/* FOGEL STUDIO v2 — portada (fase 3). Apertura + cinco actos (PLAN.md §5). */
.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}
.acto{position:relative}
.acto-h{padding:clamp(90px,12vw,170px) var(--gut) clamp(30px,4vw,50px);max-width:1100px}
.acto-h h2{font-size:clamp(1.9rem,6.4vw,5.6rem);margin:14px 0 18px}
.acto-h p{color:var(--ink-dim);max-width:56ch;font-size:clamp(1rem,1.3vw,1.12rem)}
.nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--ink-dim)}

/* ── apertura: el isotipo como zoótropo visto desde arriba; por sus ranuras aparece el showreel ── */
/* desde el primer dibujo: fondo negro y el isotipo que aparece; al arrancar (.corre) el lienzo toma el control y abre las ranuras */
.apertura{position:fixed;inset:0;z-index:3000;pointer-events:none;background:#050506}
.apertura.corre{background:transparent}
.sin-apertura .apertura{display:none}
.apertura canvas{width:100%;height:100%;display:block}
.apertura img{position:absolute;left:50%;top:50%;width:clamp(110px,16vw,190px);height:auto;transform:translate(-50%,-50%);
  opacity:0;animation:apLogo .45s .05s var(--ease) forwards}
.apertura.corre img{animation:none;opacity:1}
@keyframes apLogo{to{opacity:1}}

/* ── I · el lente ── */
.hero{height:100vh;height:100svh;overflow:hidden;overflow:clip}
/* Juan, 2026-11-10: sin el párrafo; los botones justo encima del titular, centrados, el grande debajo del chico.
   --tit = dónde empieza el titular (lo calcula heroLente() al dibujarlo); 64 % mientras carga el lente. */
.hero-ui{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(100% - var(--tit, 64%) + clamp(24px,4vh,40px));z-index:5;display:flex;justify-content:center}
.hero-acts{display:flex;flex-direction:column;align-items:center;gap:12px}
/* Juan, 2026-11-10: los botones entran con retraso, ya cargada la página: llegan desenfocados y el lente los enfoca.
   heroLente() pone .on un momento después de que el lente se asienta (tras la apertura, si la hay). */
.hero-acts>*{opacity:0;visibility:hidden;transform:translateY(12px);filter:blur(7px);pointer-events:none;
  transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease),visibility 0s .9s,color .25s,background .25s}
.hero-acts>:nth-child(2){transition-delay:.2s,.2s,.2s,1.1s,0s,0s}
.hero-ui.on .hero-acts>*{opacity:1;visibility:visible;transform:none;filter:none;pointer-events:auto;
  transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease),visibility 0s,color .25s,background .25s}
.hero-ui.on .hero-acts>:nth-child(2){transition-delay:.2s,.2s,.2s,0s,0s,0s}
@media (prefers-reduced-motion:reduce){.hero-acts>*,.hero-ui.on .hero-acts>*{transform:none;filter:none;transition:opacity .3s,visibility 0s}}
/* el registro del lente en los botones (lente.js escribe --cx/--cy/--cb): franjas azul → terracota en el texto,
   en la caja blanca de Ver showreel y en las esquinas de Cotizar */
.hero-acts .cue{--cx:0px;--cy:0px;--cb:0px;
  text-shadow:calc(var(--cx)*-1) calc(var(--cy)*-1) var(--cb) rgba(60,120,230,.6),calc(var(--cx)*-.5) calc(var(--cy)*-.5) calc(var(--cb)*.5) rgba(110,155,215,.42),
    calc(var(--cx)*.5) calc(var(--cy)*.5) calc(var(--cb)*.5) rgba(228,175,150,.42),var(--cx) var(--cy) var(--cb) rgba(230,110,60,.6)}
.hero-acts .cue.solid{box-shadow:calc(var(--cx)*-1) calc(var(--cy)*-1) var(--cb) rgba(60,120,230,.55),var(--cx) var(--cy) var(--cb) rgba(230,110,60,.55)}
.hero-acts .cue:not(.solid)::before,.hero-acts .cue:not(.solid)::after{transition:width .3s var(--ease),height .3s var(--ease);
  filter:drop-shadow(calc(var(--cx)*-1) calc(var(--cy)*-1) 0 rgba(60,120,230,.75)) drop-shadow(var(--cx) var(--cy) 0 rgba(230,110,60,.75))}
.hero .code.k{position:absolute;right:var(--gut);top:calc(var(--nav) + 4vh);z-index:5;text-shadow:0 0 10px #000}
.hero .hand{position:absolute;right:clamp(28px,8vw,140px);top:30vh;z-index:5;font-size:clamp(1.25rem,1.8vw,1.6rem);text-align:right;max-width:14ch}

/* ── II · dos miradas ── */
.dm-track{height:330vh;position:relative}
.dm-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip;display:grid;place-items:center}
.dm-ring{position:absolute;left:50%;top:50%;pointer-events:none;transform:translate(-50%,-50%)}
.dm-ring svg{display:block;width:100%;height:100%;overflow:visible}
.dm-frame{position:relative;z-index:2;overflow:hidden;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6);will-change:width,height}
.dm-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm-frame .dm-h{transform-origin:50% 50%}
.dm-frame .dm-v{opacity:0}
.dm-ghost{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;mix-blend-mode:screen;background-size:cover;background-position:center;
  background-blend-mode:multiply;opacity:0}
.dm-ghost.b{background-color:#3a78d6;box-shadow:inset 0 0 0 2px rgba(91,143,207,.9)}
.dm-ghost.t{background-color:#d8743f;box-shadow:inset 0 0 0 2px rgba(216,128,92,.9)}
.dm-c{position:absolute;width:18px;height:18px;border:0 solid rgba(255,255,255,.8);z-index:4;pointer-events:none}
.dm-c.tl{left:12px;top:12px;border-left-width:1.5px;border-top-width:1.5px}.dm-c.tr{right:12px;top:12px;border-right-width:1.5px;border-top-width:1.5px}
.dm-c.bl{left:12px;bottom:12px;border-left-width:1.5px;border-bottom-width:1.5px}.dm-c.br{right:12px;bottom:12px;border-right-width:1.5px;border-bottom-width:1.5px}
.dm-copy{position:absolute;z-index:4;font-family:'Syne';font-weight:800;text-transform:uppercase;line-height:.93;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.4vw,3.9rem);pointer-events:none}
.dm-a{left:var(--gut);top:calc(var(--nav) + 3vh)}
.dm-b{opacity:0;left:calc(50% + var(--dmx,240px));top:50%;transform:translateY(-50%);font-size:clamp(1.6rem,3vw,3.4rem)}
.dm-b small{display:block;font-family:'Space Grotesk';font-weight:500;text-transform:none;letter-spacing:0;font-size:clamp(1rem,1.5vw,1.25rem);
  color:var(--terra);margin-top:.6em}
.dm-ratio{position:absolute;left:50%;bottom:clamp(14px,3vh,30px);transform:translateX(-50%);z-index:4;display:flex;gap:14px;align-items:baseline;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.dm-ratio b{font-family:'Syne';font-size:1.05rem;color:var(--ink);letter-spacing:.04em;min-width:7ch;text-align:right;font-variant-numeric:tabular-nums}
.dm-doors{position:absolute;left:var(--gut);bottom:clamp(60px,10vh,110px);z-index:5;display:grid;gap:10px;opacity:0;transform:translateY(12px);
  transition:opacity .5s,transform .6s var(--ease);pointer-events:none}
.dm-doors.on{opacity:1;transform:none;pointer-events:auto}
.dm-doors .code{color:var(--ink-mute)}
.dm-doors div{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1180px){.dm-b{left:auto;right:var(--gut);top:auto;bottom:clamp(110px,16vh,170px);transform:none;text-align:right}}
/* en el teléfono: el remate arriba (donde estaba "Un rodaje."), las puertas en una fila abajo */
@media (max-width:760px){
  .dm-b{left:50%;right:auto;top:calc(var(--nav) + 6px);bottom:auto;transform:translateX(-50%);text-align:center;width:max-content;font-size:1.6rem}
  .dm-b br{display:none}
  .dm-doors{left:50%;transform:translate(-50%,12px);bottom:48px;justify-items:center}.dm-doors.on{transform:translateX(-50%)}
  .dm-doors .code{display:none}.dm-doors div{flex-wrap:nowrap}
  .hero .code.k{display:none}
}

/* ── III · el carrete ── */
.reel-marks{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;align-items:baseline}
.reel-marks button{font-family:'Syne';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color .2s}
.reel-marks button b{font-family:'Space Grotesk';font-weight:500;font-size:9px;color:var(--terra);margin-right:6px}
.reel-marks button:hover,.reel-marks button.on{color:var(--ink)}
.reel-marks a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-left:auto}
.ts-track{position:relative}
.ts-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip}
.ts-ui{position:absolute;left:var(--gut);bottom:clamp(30px,8vh,80px);z-index:5;max-width:min(36vw,480px);pointer-events:none}
.ts-ui h3{font-size:clamp(1.9rem,4vw,3.8rem);margin:12px 0 12px;filter:drop-shadow(0 3px 20px rgba(0,0,0,.7))}
.ts-ui .meta{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#cfcfd4}
.ts-ui .code,.ts-ui .meta{text-shadow:0 1px 12px rgba(0,0,0,.9)}
.ts-ui .ver{pointer-events:auto;margin-top:16px}
@media (max-width:760px){.ts-ui{left:18px;right:18px;max-width:none;top:calc(var(--nav) + 6px);bottom:auto}.ts-ui h3{font-size:1.6rem;margin:6px 0}.ts-ui .ver{display:none}}
/* en el teléfono el título del carrete ya no se monta sobre los cuadros que pasan: va sobre una franja oscura */
@media (max-width:759.98px){
  .ts-ui{left:0;right:0;top:0;padding:calc(var(--nav) + 6px) 18px 34px;background:linear-gradient(rgba(11,11,13,.95) 64%,rgba(11,11,13,0))}}

/* ── puerta al archivo ── */
.puerta{padding:clamp(70px,9vw,120px) 0 0}
.puerta-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;padding-inline:var(--gut);margin-bottom:18px}
.puerta-h h3{font-size:clamp(1.4rem,3vw,2.4rem)}
.neg-strip{display:flex;gap:4px;padding:12px 0 22px;background:#050506;overflow-x:auto;scrollbar-width:none;position:relative}
.neg-strip::-webkit-scrollbar{display:none}
.neg-strip::before,.neg-strip::after{content:"";position:absolute;left:0;right:0;height:7px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Crect x='3' y='1' width='6' height='5' rx='1.2' fill='%231a1a1d'/%3E%3C/svg%3E") left center/12px 7px repeat-x}
.neg-strip::before{top:2px}.neg-strip::after{bottom:4px}
.neg-strip button{position:relative;flex:none;height:clamp(120px,16vw,190px);aspect-ratio:var(--a);overflow:hidden;background:#111;
  filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .35s}
.neg-strip button:hover,.neg-strip button:focus-visible{filter:none}
.neg-strip img{width:100%;height:100%;object-fit:cover}
.neg-strip .n{position:absolute;left:4px;bottom:3px;font-size:8px;letter-spacing:.14em;color:var(--terra)}

/* ── IV · el oficio: la mesa ── */
.mesa{margin:0 var(--gut);border:1px solid var(--line-strong);background:#0d0e11;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.mesa-chrome{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-mute)}
.mesa-chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.mesa-top{display:grid;grid-template-columns:minmax(220px,280px) 1fr minmax(240px,320px)}
.mesa-h{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 10px}
.mesa-bin{border-right:1px solid var(--line);padding:14px}
.mesa-temas{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:16px}
.mesa-temas button{font-family:'Syne';font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:4px 0}
.mesa-temas button[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--terra)}
.mesa-item{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:10px;width:100%;text-align:left;padding:8px;transition:background .15s}
.mesa-item:hover{background:rgba(255,255,255,.05)}
.mesa-item i{width:8px;height:24px}
.mesa-item b{display:block;font-weight:500;font-size:.88rem;line-height:1.2}
.mesa-item small{color:var(--ink-mute);font-size:.7rem}
.mesa-item em{font-style:normal;font-family:'Syne';font-weight:800;font-size:1rem;color:var(--ink-dim)}
.mesa-mon{display:grid;place-items:center;padding:20px;background:#07080a;min-height:420px}
.mesa-screen{position:relative;width:min(100%,560px);aspect-ratio:16/9;background:#000;overflow:hidden;transition:aspect-ratio .5s var(--ease),width .5s var(--ease)}
.mesa-screen.alto{width:auto;height:min(52vh,460px);aspect-ratio:9/16}
.mesa-screen video,.mesa-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mesa-screen img.pan{object-fit:cover;object-position:0% 50%;animation:pan 14s linear infinite alternate}
@keyframes pan{to{object-position:100% 50%}}
.mesa-screen .tag{position:absolute;z-index:2;font-size:10px;letter-spacing:.12em;background:rgba(0,0,0,.62);padding:3px 7px}
.mesa-screen .tag.tl{top:8px;left:8px}.mesa-screen .tag.br{bottom:8px;right:8px;color:var(--terra)}
.mesa-empty{color:var(--ink-mute);font-size:.9rem;text-align:center;max-width:26ch}
.mesa-out{border-left:1px solid var(--line);padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
.mesa-out .plan{font-family:'Syne';font-weight:800;text-transform:uppercase;font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1}
.mesa-out .precio{font-family:'Syne';font-weight:800;font-size:1.1rem;color:var(--terra)}
.mesa-out ul{list-style:none;display:grid;gap:5px;font-size:.84rem;color:var(--ink-dim)}
.mesa-out li::before{content:"▸ ";color:var(--terra)}
.mesa-out .nota{font-size:.75rem;color:var(--ink-mute)}
.mesa-out .cue{margin-top:auto;align-self:flex-start}
.mesa-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.mesa-bar b{font-family:'Syne';font-size:1rem;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.mesa-bar button{margin-left:auto;color:var(--ink-dim);letter-spacing:.2em}
.mesa-tl{position:relative;display:grid;grid-template-columns:40px 1fr;padding:14px 14px 18px 0;min-height:96px}
.mesa-tl .heads{display:grid;align-content:center;font-size:10px;letter-spacing:.14em;color:var(--ink-mute);text-align:center}
.mesa-lane{position:relative;display:flex;gap:3px;min-height:62px;align-items:stretch}
.mesa-lane:empty::before{content:"Toca una pieza de la izquierda para ponerla en la línea de tiempo";align-self:center;font-size:.85rem;color:var(--ink-mute);
  padding-left:6px}
.mesa-clip{position:relative;min-width:54px;background:#1a1c21 center/cover;border-top:3px solid var(--cc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  text-align:left;animation:clipIn .45s var(--ease)}
.mesa-clip.on{box-shadow:inset 0 0 0 1.5px #fff}
.mesa-clip span{position:absolute;left:0;top:0;font-size:10px;background:var(--cc);color:#0b0b0d;padding:1px 6px 2px;font-weight:500;white-space:nowrap}
.mesa-clip em{position:absolute;right:4px;bottom:3px;font-style:normal;font-size:12px;opacity:0;transition:opacity .2s}
.mesa-clip:hover em{opacity:1}
@keyframes clipIn{from{transform:scaleX(.2);opacity:0}}
.mesa-ph{position:absolute;top:8px;bottom:12px;left:40px;width:0;z-index:5;pointer-events:none;transition:left .25s linear}
.mesa-ph::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--terra)}
.mesa-ph::after{content:"";position:absolute;top:-2px;left:-7px;border:7px solid transparent;border-top:9px solid var(--terra)}
@media (max-width:980px){.mesa-top{grid-template-columns:1fr}.mesa-bin,.mesa-out{border:0}.mesa-mon{min-height:300px}}


/* ── estudio (igual al sitio actual) ── */
.estudio{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(90px,11vw,160px) var(--gut)}
.estudio h2{font-size:clamp(2rem,5vw,3.8rem)}
.estudio .motto{font-family:'Syne';font-weight:800;color:var(--terra);font-size:clamp(1.05rem,1.6vw,1.35rem);margin:12px 0 16px}
.estudio .lead{color:var(--ink-dim);max-width:56ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.stats b{font-family:'Syne';font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);display:block;line-height:1}
.stats span{font-size:.82rem;color:var(--ink-mute)}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;position:relative}
.member{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line)}
.member:nth-child(1){background:linear-gradient(165deg,#1d4470,#0f1d2f 72%)}
.member:nth-child(2){background:linear-gradient(165deg,#8a583c,#2a1a12 72%)}
.member .av{position:absolute;inset:0;display:grid;place-items:center;font-family:'Syne';font-weight:800;font-size:clamp(3rem,6vw,5rem);
  color:rgba(255,255,255,.16)}
.member .info{position:absolute;left:16px;right:16px;bottom:16px}
.member .info b{display:block;font-family:'Syne';font-weight:800;text-transform:uppercase;font-size:1.05rem}
.member .info span{font-size:.8rem;color:var(--ink-dim)}
.team::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);z-index:3;
  pointer-events:none;box-shadow:0 0 0 7px var(--bg);
  background:radial-gradient(circle closest-side,var(--navy) 0 17%,var(--ink) 18% 54%,var(--navy) 55% 71%,var(--ink) 72% 100%)}
@media (max-width:860px){.estudio{grid-template-columns:1fr}}
@media (max-width:760px){.member .av{place-items:start center;padding-top:24%;font-size:2.6rem}.team::after{top:28%;width:46px;height:46px;box-shadow:0 0 0 5px var(--bg)}}

/* ── V · el estreno ── */
.estreno{padding:clamp(100px,13vw,190px) var(--gut) clamp(90px,10vw,140px);border-top:1px solid var(--line)}
/* Syne 800 en mayúsculas ≈ 1,2 em por letra: "¿ESTRENAMOS" (11) tiene que caber en el ancho */
.estreno h2{font-size:clamp(1.5rem,6.6vw,6.4rem);max-width:11ch}
.estreno-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:clamp(36px,5vw,60px)}
.ci{display:grid;gap:16px;align-content:start}
.ci .code{color:var(--ink-mute)}
.ci a.big{font-family:'Syne';font-weight:800;font-size:clamp(1.3rem,2.4vw,2rem)}
.avail{display:flex;align-items:center;gap:10px;color:var(--ink-dim);font-size:.92rem}
.avail i{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(37,211,102,.18)}
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  padding:8px 0;border-radius:0;letter-spacing:0;text-transform:none}
.form select option{background:#111}
.form textarea{min-height:90px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--terra)}
.form .err{color:var(--terra);font-size:.8rem;min-height:1em;letter-spacing:0;text-transform:none}
.form .cue{justify-self:start}
@media (max-width:860px){.estreno-grid{grid-template-columns:1fr}}