@font-face{font-family:"Montserrat";src:url("/app/fuentes/montserrat.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Gloock";src:url("/app/fuentes/gloock.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Estilo de los dossieres de Polo Properties: verde #003B33, crema #F7F3EC, Gloock en titulares,
   Montserrat fina en textos, mayúsculas espaciadas en antetítulos y filetes dorados. Sin cajas ni vidrio. */
:root{
  --verde:#003B33;
  --verde-hondo:#002A24;
  --dorado:#B89C66;
  --dorado-oscuro:#846C3C;
  --crema:#F7F3EC;
  --papel:#FCFBF8;
  --tinta:#141414;
  --gris:#4B4B4B;
  --texto:#F6F2EA;
  --texto-2:rgba(246,242,234,.72);
  --filete:rgba(184,156,102,.45);
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Gloock",Georgia,"Times New Roman",serif;
  --muelle:cubic-bezier(.34,1.56,.64,1);
  --suave:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--verde)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--verde);color:var(--texto);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pulsable{transition:transform .5s var(--muelle),opacity .2s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pulsable:active{transform:scale(.96);opacity:.85;transition-duration:.1s}

/* ---------- Fondo verde con el patrón de monogramas (Carta Gráfica, pág. 13) ---------- */
.fondo{position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 70% at 50% 0%,#0A4A40 0%,var(--verde) 55%,var(--verde-hondo) 100%)}
.patron{position:absolute;inset:0;background:url("/app/img/patron.png") repeat center top/120px auto;opacity:.06;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%)}

/* ---------- Parte verde: tarjeta, nombre y accesos ---------- */
.pagina{width:100%;max-width:460px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 28px) 22px 34px;display:flex;flex-direction:column}
.pagina>*,.crema-in>*{animation:sube .9s var(--suave) both}
.pagina>:nth-child(2){animation-delay:.06s}
.pagina>:nth-child(3){animation-delay:.12s}
.pagina>:nth-child(4){animation-delay:.18s}
.crema-in>*{animation-delay:.24s}
@keyframes sube{from{opacity:0;transform:translate3d(0,18px,0)}}

/* Tarjeta (diseño oficial de la Carta Gráfica, pág. 16) */
.escena{perspective:1500px;container-type:inline-size;margin-top:6px}
.tarjeta{position:relative;width:100%;aspect-ratio:85/55;transform-style:preserve-3d;touch-action:pan-y;cursor:pointer;will-change:transform;--bx:30%}
.cara{position:absolute;inset:0;border-radius:2.4cqw;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 34px 60px -24px rgba(0,0,0,.6),0 10px 24px -10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.07)}
.anverso{background:var(--verde);display:grid;place-items:center}
.anverso .logo{width:62%;height:auto;display:block;-webkit-user-drag:none;user-select:none}
.reverso{background:var(--papel);color:var(--tinta);transform:rotateY(180deg)}
.brillo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.2) 46%,rgba(255,255,255,.04) 54%,rgba(255,255,255,0) 66%);background-size:260% 100%;background-position:var(--bx) 0;mix-blend-mode:soft-light}
.reverso .brillo{mix-blend-mode:normal;opacity:.35}
.reverso p{position:absolute;left:10.6%;margin:0;white-space:nowrap}
.reverso a{color:inherit}
.r-nombre{top:15.3%;font-size:4cqw;font-weight:800;line-height:1;letter-spacing:0;color:var(--tinta)}
.r-cargo{top:22.3%;font-size:3.15cqw;font-weight:600;line-height:1;color:var(--verde)}
.r-contacto,.r-oficina{font-size:2.45cqw;font-weight:400;line-height:1.19;color:#2A2A2A}
.r-contacto{top:37.6%}
.r-oficina{top:55.6%}
.r-pie{top:auto!important;bottom:17.6%;display:flex;align-items:flex-end;gap:1.7cqw;line-height:1}
.r-ico{width:3.5cqw;height:3.5cqw;fill:none;stroke:var(--tinta);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.r-web{margin-left:.6cqw;font-size:1.75cqw;font-weight:700;letter-spacing:.02em;color:var(--verde);padding-bottom:.15cqw}
.r-sello{position:absolute;left:68.6%;top:54.2%;width:21.3%;height:auto;-webkit-user-drag:none;user-select:none}

.girar{align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 10px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2)}
.girar .i{font-size:14px}
.identidad{text-align:center;margin:22px 0 0}
.identidad h1{margin:0;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.08;letter-spacing:-.005em;color:var(--texto)}
.identidad p{margin:12px 0 0;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado)}
.identidad .empresa{margin-top:6px;font-size:13px;font-weight:300;letter-spacing:.04em;text-transform:none;color:var(--texto-2)}

/* Iconos de app, solo el logotipo */
.app{display:block;width:44px;height:44px;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.logos{display:flex;justify-content:center;gap:22px;margin:30px 0 4px}
.logos .app{width:62px;height:62px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}

/* ---------- Parte crema (como las páginas interiores de los dossieres) ---------- */
.crema{flex:1;background:var(--crema);color:var(--verde)}
.crema-in{max-width:460px;margin:0 auto;padding:30px 22px calc(env(safe-area-inset-bottom,0px) + 30px);display:flex;flex-direction:column}

.boton{display:flex;align-items:center;justify-content:center;gap:12px;height:58px;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.boton .i{font-size:19px}
.boton-verde{background:var(--verde);color:var(--crema);box-shadow:inset 0 0 0 1px var(--verde),inset 0 0 0 4px var(--verde),inset 0 0 0 5px rgba(184,156,102,.55)}
.boton-contorno{color:var(--verde);border:1px solid var(--verde);background:transparent}
.boton.ancho{width:100%;margin-top:22px}

.ante{display:flex;align-items:center;gap:14px;margin:34px 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--dorado-oscuro)}
.ante::after{content:"";flex:1;height:1px;background:var(--filete)}

.lista{margin-bottom:30px}
.fila{display:flex;align-items:center;gap:16px;min-height:72px;padding:12px 2px;border-bottom:1px solid var(--filete)}
.fila .app{width:42px;height:42px}
.fila-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fila-etq{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado-oscuro)}
.fila-val{font-size:16px;font-weight:400;color:var(--verde);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-val.largo{font-size:14px;letter-spacing:-.01em}
.fila-chev{font-size:15px;color:var(--dorado)}

.logo-final{display:block;width:46%;height:auto;margin:46px auto 0}
.pie{margin-top:22px;text-align:center;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--gris)}
.pie a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Hoja de compartir (crema, como el dossier) ---------- */
.hoja{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:480px;max-height:92vh;max-height:92dvh;overflow:auto;padding:10px 24px calc(env(safe-area-inset-bottom,0px) + 28px);border:0;border-radius:24px 24px 0 0;color:var(--verde);background:var(--crema);box-shadow:0 -20px 50px rgba(0,0,0,.35);transform:translate3d(0,105%,0);transition:transform .6s var(--suave)}
.hoja.visible{transform:translate3d(0,0,0)}
.hoja.arrastrando{transition:none}
.hoja::backdrop{background:rgba(0,20,16,0);transition:background .4s}
.hoja.visible::backdrop{background:rgba(0,20,16,.55)}
.asa{width:38px;height:4px;border-radius:4px;background:rgba(0,59,51,.18);margin:0 auto 14px;touch-action:none}
.cerrar{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--verde);border:1px solid var(--filete)}
.cerrar .i{font-size:14px}
.hoja-ante{margin:12px 0 0;text-align:center;font-size:10px;font-weight:600;letter-spacing:.28em;color:var(--dorado-oscuro)}
.hoja h2{margin:8px 0 0;text-align:center;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;color:var(--verde)}
.hoja-sub{margin:8px 0 0;text-align:center;font-size:13.5px;font-weight:300;color:var(--verde)}
.qr{width:min(60vw,228px);aspect-ratio:1;margin:24px auto 26px;padding:12px;background:#fff;border:1px solid var(--filete)}
.qr svg{display:block;width:100%;height:100%;fill:var(--verde)}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px}
.opcion{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);text-align:center}
.opcion .app{width:56px;height:56px}

.aviso{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:20;padding:12px 20px;border-radius:3px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--crema);background:var(--verde);box-shadow:0 14px 30px -12px rgba(0,0,0,.5);opacity:0;transform:translate3d(-50%,14px,0);transition:opacity .3s,transform .5s var(--muelle);pointer-events:none}
.aviso.visible{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- Aviso legal (página crema) ---------- */
body.legal{background:var(--crema);color:var(--verde)}
.texto-legal{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px)}
.volver{align-self:flex-start;height:auto;padding:9px 14px;border-radius:3px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.logo-legal{width:42%;height:auto;margin:34px auto 6px;display:block}
.texto-legal h1{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;margin:22px 0 10px;text-align:center}
.texto-legal .bloque{padding:22px 0;border-bottom:1px solid var(--filete)}
.texto-legal h2{margin:0 0 10px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado-oscuro)}
.texto-legal p{margin:0 0 10px;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--verde)}
.texto-legal p:last-child{margin-bottom:0}
.texto-legal b{font-weight:600}
.texto-legal a{text-decoration:underline;text-underline-offset:3px}
.texto-legal mark{background:rgba(184,156,102,.28);color:var(--verde);padding:0 4px}

/* ---------- Inicio y 404 (verde) ---------- */
.inicio{min-height:100vh;min-height:100dvh;justify-content:center;align-items:center;text-align:center;gap:20px}
.inicio img{width:min(70vw,300px);height:auto}
.inicio p{margin:0;color:var(--texto-2);font-size:13px;font-weight:300;letter-spacing:.06em}
.inicio .boton{padding:0 26px;color:var(--texto);border:1px solid rgba(246,242,234,.5)}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .pagina>*,.crema-in>*{animation:none}
  .pulsable,.hoja,.aviso{transition:none}
}
@media (min-width:700px){
  .pagina{padding-top:56px}
}