/* ════════════════════════════════════════════════════════════════════
   FOGEL STUDIO v2 — páginas de tema (fase 5): la plantilla común y los cuatro gestos
   Espacios = entrar (tour 360) · Producto = girar (zoótropo) · Personas = enfocar · Historias = pantalla grande
   ════════════════════════════════════════════════════════════════════ */
.stage{position:absolute;inset:0;background:var(--bg)}
canvas.gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.vault{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--ink-dim)}

/* ── 1 · la claqueta ── */
.th{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,84px);align-items:center;
  min-height:100vh;min-height:100svh;padding:calc(var(--nav) + clamp(36px,6vw,90px)) var(--gut) clamp(60px,8vw,100px)}
.th-txt{min-width:0}
.th-claq{width:min(430px,100%);margin-bottom:clamp(26px,3.6vw,42px)}
/* el palo con bisagra cae una vez (clase .clac en el body) */
.th-palo,.th-base{display:block;height:24px;border:1.5px solid var(--ink);
  background:repeating-linear-gradient(-56deg,var(--ink) 0 15px,#0b0b0d 15px 30px)}
.th-palo{transform-origin:3px 100%;transform:rotate(-17deg);box-shadow:0 2px 0 -1px var(--blue)}
.th-base{border-top:0;background:repeating-linear-gradient(56deg,var(--ink) 0 15px,#0b0b0d 15px 30px);box-shadow:inset 0 2px 0 -1px var(--terra)}
.clac .th-palo{animation:clac .26s cubic-bezier(.75,0,.95,.45) forwards}
@keyframes clac{to{transform:rotate(0)}}
.th-pizarra{display:grid;grid-template-columns:repeat(4,minmax(0,auto));border:1.5px solid var(--ink);border-top:0}
.th-pizarra span{padding:8px 10px 10px;border-left:1px solid var(--line-strong);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);min-width:0}
.th-pizarra span:first-child{border-left:0}
.th-pizarra b{display:block;margin-top:4px;font-family:'Caveat',cursive;font-weight:600;font-size:1.3rem;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1;white-space:nowrap}
@media (max-width:420px){.th-pizarra span:nth-child(3){display:none}}   /* sin "Toma": la pizarra cabe en 320 px */
@media (max-width:760px){
  .th-palo{transform:rotate(-10deg)}   /* abierto, no se mete en la cabecera */
  .th .cue{font-size:11px;letter-spacing:.1em;padding:11px 13px}
}
.th h1{font-size:clamp(1.9rem,4.3vw,4.5rem);line-height:.96;max-width:15ch}
.th-lead{margin-top:clamp(18px,2.4vw,26px);max-width:50ch;color:var(--ink-dim);font-size:clamp(1rem,1.25vw,1.12rem)}
.th-acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(24px,3vw,34px)}
/* la ventana: la pieza destacada va limpia; el halo bicolor queda por fuera (ley 6) */
.th-ventana{position:relative;justify-self:center;width:100%;margin:0 0 34px;aspect-ratio:var(--a,.5625);background:#000;cursor:pointer}
.th-ventana.alto{max-width:calc(72vh * .5625);max-width:calc(72svh * .5625)}
.th-ventana video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th-ventana figcaption{position:absolute;left:0;right:0;top:calc(100% + 12px);display:flex;justify-content:space-between;gap:12px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.th-ventana figcaption b{font-weight:500;color:var(--ink);text-align:right}
.th-ventana:hover figcaption b{color:var(--terra)}
@media (max-width:900px){
  .th{grid-template-columns:1fr;min-height:0}
  .th-ventana.alto{max-width:min(100%,calc(64vh * .5625));max-width:min(100%,calc(64svh * .5625))}
}

/* ── encabezado de sección ── */
.th-h{padding:clamp(90px,11vw,160px) var(--gut) clamp(28px,4vw,48px);max-width:1100px}
.th-h h2{font-size:clamp(1.8rem,5vw,4.4rem);margin:14px 0 18px}
.th-h p{color:var(--ink-dim);max-width:56ch;font-size:clamp(1rem,1.3vw,1.12rem)}
.tar-plan .cue{margin-top:auto;align-self:flex-start;font-size:11px}

/* ── 4 bis · ficha técnica: qué hacemos, qué incluye, cómo trabajamos y preguntas.
   Es el texto que leen los buscadores (2026-11-11): el h2 dice el servicio con todas sus palabras. ── */
.ficha-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,110px);
  padding:0 var(--gut) clamp(60px,7vw,100px);max-width:1240px}
.ficha .th-h h2{font-size:clamp(1.6rem,3.7vw,3.3rem);max-width:20ch}   /* el título largo con palabras clave: más chico que los h2 de escena */
.ficha h3{font-size:clamp(1rem,1.35vw,1.15rem);letter-spacing:.03em;margin-bottom:18px}
.ficha-lista{list-style:none}
.ficha-lista li{display:grid;grid-template-columns:1.4em minmax(0,1fr);padding:13px 0;border-top:1px solid var(--line);color:var(--ink-dim)}
.ficha-lista li::before{content:"▸";color:var(--terra)}
.ficha-lista li b{color:var(--ink);font-weight:500}
.ficha-pasos{list-style:none;counter-reset:paso}
.ficha-pasos li{counter-increment:paso;position:relative;padding:0 0 28px 88px}
.ficha-pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:-.08em;font-family:'Syne';font-weight:800;font-size:1.9rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--terra)}
.ficha-pasos li::after{content:"";position:absolute;left:26px;top:2.6em;bottom:8px;width:1px;background:var(--line-strong)}
.ficha-pasos li:last-child::after{display:none}
.ficha-pasos b{display:block;font-family:'Syne';font-weight:800;text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.ficha-pasos span{display:block;margin-top:6px;color:var(--ink-dim)}
.ficha-mas{display:inline-block;margin-top:6px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ficha-mas:hover{color:var(--terra)}
@media (max-width:860px){.ficha-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){   /* "DESARROLLAMOS" ≈ 15,2 em: con 88 px de sangría no cabía en 320 px */
  .ficha-pasos li{padding-left:62px}
  .ficha-pasos li::before{font-size:1.5rem}
  .ficha-pasos li::after{left:20px}
  .ficha-pasos b{font-size:.85rem}
}

/* Títulos con una palabra muy larga en Syne 800 (≈1,1 em por letra: "DOCUMENTALES," ≈ 14,6 em; "PROPIEDADES" ≈ 12,2 em).
   En pantallas angostas la letra se ajusta al ancho para que la palabra quepa entera; --em = ancho de esa palabra en em
   (+3 % de margen). Sin esto el celular se alejaba para mostrar la palabra cortada (2026-11-11). */
@media (max-width:600px){
  .th-h h2.largo{font-size:min(1.8rem,calc((100vw - 2 * var(--gut)) / var(--em,15)))}
  .ficha .th-h h2.largo{font-size:min(1.6rem,calc((100vw - 2 * var(--gut)) / var(--em,15)))}
}

/* ── 5 · corte final ── */
.th-fin{padding:clamp(100px,12vw,170px) var(--gut) clamp(60px,7vw,100px);max-width:1240px}
.th-fin h2{font-size:clamp(1.8rem,7vw,6.4rem);margin:14px 0 20px}   /* "CONTAMOS?" ≈ 10,8 em: cabe desde 320 px */
.th .cue,.th-fin .cue,.pantalla-ui .cue,.foco-pie .cue{max-width:100%;white-space:normal}
.th-fin p{color:var(--ink-dim);max-width:50ch;font-size:clamp(1rem,1.3vw,1.12rem)}
.th-fin .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.th-otros{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:clamp(56px,7vw,96px);padding-top:22px;border-top:1px solid var(--line)}
.th-otros .code{width:100%;color:var(--ink-mute)}
.th-otros a{font-family:'Syne';font-weight:800;font-size:clamp(1.1rem,2.2vw,1.8rem);text-transform:uppercase;color:var(--ink-dim);transition:color .2s}
.th-otros a b{font-family:'Space Grotesk';font-weight:500;font-size:10px;color:var(--terra);margin-right:8px;vertical-align:super}
.th-otros a:hover{color:var(--ink)}

/* ════════ ESPACIOS · entrar ════════ */
.puerta360{position:relative;margin:0 var(--gut);aspect-ratio:16/9;max-height:82vh;max-height:82svh;background:#000;overflow:clip}
.puerta360 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.puerta360 .tapa{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;cursor:pointer;
  background:url("../media/pano-puerta.jpg") 0 50%/auto 140% repeat-x;animation:paneo 80s linear infinite}
@keyframes paneo{to{background-position:-200vw 50%}}
.puerta360 .tapa::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(7,7,8,.2),rgba(7,7,8,.8))}
.puerta360 .tapa>*{position:relative}
.puerta360 .tapa .hand{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.puerta360 .sala-rim{z-index:2}
.puerta360-pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:14px var(--gut) 0;font-size:.9rem;color:var(--ink-dim)}
.puerta360-pie a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.puerta360{aspect-ratio:4/5}}
@media (prefers-reduced-motion:reduce){.puerta360 .tapa{animation:none}}
/* el caso: una agencia, nueve propiedades */
.caso-rail{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 18px;scrollbar-width:none}
.caso-rail::-webkit-scrollbar{display:none}
.prop{flex:none;width:clamp(150px,14vw,210px);scroll-snap-align:start;text-align:left}
.prop .f{position:relative;display:block;aspect-ratio:9/16;background:#111;overflow:hidden}
.prop .f img,.prop .f .previa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prop .f .previa{opacity:0;transition:opacity .3s}
.prop .f.vivo .previa{opacity:1}
.prop .n{display:block;margin-top:12px;font-size:9px;letter-spacing:.24em;color:var(--terra)}
.prop b{display:block;margin-top:5px;font-family:'Syne';font-weight:800;font-size:.92rem;text-transform:uppercase;line-height:1.05}
.prop small{display:block;margin-top:4px;color:var(--ink-mute);font-size:.78rem}
/* escritorio: las nueve a la vista (con mouse no hay cómo deslizar una fila sin barra) */
@media (min-width:900px){.caso-rail{overflow:visible}.prop{flex:1 1 0;width:auto;min-width:0}.prop b{font-size:clamp(.72rem,.95vw,.92rem)}}

/* ════════ PRODUCTO · girar ════════ */
.zoo{position:relative;height:100vh;height:100svh;overflow:hidden;overflow:clip;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.zoo.drag{cursor:grabbing}
.zoo-ui{position:absolute;left:var(--gut);bottom:clamp(30px,7vh,70px);z-index:3;max-width:min(440px,80vw);pointer-events:none}
.zoo-ui h3{font-size:clamp(1.4rem,2.6vw,2.4rem);margin:10px 0 8px}
.zoo-ui .meta{font-size:.85rem;color:var(--ink-dim)}
.zoo-ui .cue{pointer-events:auto;margin-top:18px}
.zoo .hand{position:absolute;right:var(--gut);top:calc(var(--nav) + clamp(14px,4vh,40px));z-index:3;font-size:clamp(1.2rem,1.8vw,1.5rem);max-width:15ch;text-align:right;pointer-events:none}
@media (max-width:760px){.zoo-ui{bottom:22px}}

/* ════════ PERSONAS · enfocar ════════ */
.foco{display:flex;gap:clamp(8px,1.1vw,16px);padding:8px var(--gut) 26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.foco::-webkit-scrollbar{display:none}
.retrato{position:relative;flex:1 1 0;min-width:clamp(150px,12.5vw,210px);aspect-ratio:9/16;scroll-snap-align:center;background:#111;overflow:hidden;
  filter:blur(8px) brightness(.6) saturate(.75);transform:scale(.955);
  transition:filter .75s cubic-bezier(.5,0,.2,1),transform .9s cubic-bezier(.5,0,.2,1)}
.retrato img,.retrato video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.retrato video{opacity:0;transition:opacity .35s}
.retrato.vivo video{opacity:1}
/* cambio de foco de cine: el que se va respira un poco hacia atrás, el que llega entra nítido */
.retrato.en-foco{filter:none;transform:none}
.foco-pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;padding:6px var(--gut) 0}
.foco-pie h3{font-size:clamp(1.3rem,2.6vw,2.4rem);margin-top:8px}
.foco-pie .meta{display:block;margin-top:6px;color:var(--ink-dim);font-size:.88rem}
@media (max-width:760px){.retrato{flex:none;width:58vw;min-width:0}}
@media (prefers-reduced-motion:reduce){.retrato{transition:none}}

/* ════════ HISTORIAS · pantalla grande ════════ */
.pantalla{position:relative;padding:0 var(--gut);isolation:isolate;overflow-x:clip}   /* la luz se derrama arriba y abajo, no fuera de la página */
.pantalla-sala{position:relative;max-width:1500px;margin:0 auto}
.pantalla-luz{position:absolute;left:-8%;top:-22%;width:116%;height:144%;z-index:-1;filter:blur(70px) saturate(1.5);opacity:.6;transition:opacity .8s}
.pantalla-tela{position:relative;aspect-ratio:2.35/1;background:#000;overflow:hidden;cursor:pointer;
  box-shadow:0 40px 120px rgba(0,0,0,.65)}
.pantalla-tela video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.pantalla-tela video.alto{object-fit:contain}
.pantalla-tela .sala-rim{z-index:2}
.pantalla-ui{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:20px}
.pantalla-ui h3{font-size:clamp(1.3rem,2.8vw,2.6rem);margin-top:8px}
.pantalla-ui .meta{display:block;margin-top:6px;color:var(--ink-dim);font-size:.88rem}
.cartelera{max-width:1500px;margin:clamp(34px,4vw,56px) auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 34px}
.cartelera .code{grid-column:1/-1;margin-bottom:8px;color:var(--ink-mute)}
.cartelera button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:baseline;text-align:left;
  padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink-mute);font-size:.8rem}
.cartelera button i{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--terra)}
.cartelera button b{font-family:'Syne';font-weight:800;text-transform:uppercase;font-size:.84rem;letter-spacing:.02em;color:var(--ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartelera button:hover b,.cartelera button[aria-current="true"] b{color:var(--ink)}
.cartelera button[aria-current="true"]::after{content:"";position:absolute;left:-10px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--grease)}