/* ════════════════════════════════════════════════════════════════════
   FOGEL STUDIO v2 — estilos compartidos (fase 2, núcleo)
   Dirección de arte "A través del lente" (PLAN.md §4). Intensidad del lente: Marcada f/4.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0b0d;--bg-2:#101013;--panel:#121216;
  --ink:#f2f2ef;--ink-dim:#c4c4ca;--ink-mute:#8a8a93;
  --blue:#5b8fcf;--terra:#d8805c;--terra-deep:#a8684a;--navy:#184878;--sand:#ebdccd;--grease:#e2764c;
  --line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.24);
  --nav:64px;--gut:clamp(18px,4vw,56px);--ease:cubic-bezier(.2,.8,.2,1);
  --wa:#25d366;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.fg-locked{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
[hidden]{display:none!important}   /* si no, clases con display (p. ej. .cue) le ganan al atributo */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1,h2,h3{font-family:'Syne',sans-serif;font-weight:800;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:break-word}   /* red de seguridad: una palabra que no quepa se parte, no empuja la página hacia el lado */

/* entre páginas: la que se va sale de foco y la que llega entra enfocando; la cabecera no se mueve */
@view-transition{navigation:auto}
.fg-head{view-transition-name:fg-head}
::view-transition-old(root){animation:fgDesenfoca .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:fgEnfoca .5s cubic-bezier(0,0,.2,1) both}
@keyframes fgDesenfoca{to{opacity:0;filter:blur(10px)}}
@keyframes fgEnfoca{from{opacity:0;filter:blur(10px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* grano: única textura global */
body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── registro: el texto de titulares se abre en abanico azul → terracota (lente.js escribe las variables) ── */
.reg{--cx:0px;--cy:0px;--cb:0px;--ia:1;color:rgba(242,242,239,var(--ia));
  text-shadow:
    calc(var(--cx)*-1) calc(var(--cy)*-1) var(--cb) rgba(60,120,230,.42),
    calc(var(--cx)*-.78) calc(var(--cy)*-.78) calc(var(--cb)*.8) rgba(80,138,220,.4),
    calc(var(--cx)*-.56) calc(var(--cy)*-.56) calc(var(--cb)*.6) rgba(110,155,215,.36),
    calc(var(--cx)*-.34) calc(var(--cy)*-.34) calc(var(--cb)*.4) rgba(150,175,215,.3),
    calc(var(--cx)*-.14) calc(var(--cy)*-.14) calc(var(--cb)*.2) rgba(200,205,225,.24),
    calc(var(--cx)*.14) calc(var(--cy)*.14) calc(var(--cb)*.2) rgba(230,205,195,.24),
    calc(var(--cx)*.34) calc(var(--cy)*.34) calc(var(--cb)*.4) rgba(228,175,150,.3),
    calc(var(--cx)*.56) calc(var(--cy)*.56) calc(var(--cb)*.6) rgba(225,150,115,.36),
    calc(var(--cx)*.78) calc(var(--cy)*.78) calc(var(--cb)*.8) rgba(222,130,90,.4),
    var(--cx) var(--cy) var(--cb) rgba(230,110,60,.42)}

/* capítulo claro (arena) y pie de página: los comparten todas las páginas */
.light{--ink:#1b3a5c;--ink-dim:#44607f;--ink-mute:#7a6456;--line:rgba(24,72,120,.16);--line-strong:rgba(24,72,120,.34);background:var(--sand);color:var(--ink)}
.light .reg{--ia:1;color:var(--ink)}
.pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:30px var(--gut) 90px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--ink-mute)}
.pie a{color:var(--ink-dim)}
.pie a:hover{color:var(--ink)}

/* ── preguntas frecuentes (portada y temas). Cada una es una toma numerada; publicar.mjs lee estos
   <details class="faq"><summary>…</summary><p>…</p></details> y arma el FAQPage para buscadores: respetar ese formato. ── */
.faqs{padding:0 var(--gut) clamp(80px,10vw,140px);max-width:1100px;counter-reset:toma}
.faqs>.code{display:block;margin-bottom:14px}
.faq{counter-increment:toma;border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:19px 0;cursor:pointer;list-style:none;
  font-weight:500;font-size:clamp(1.02rem,1.45vw,1.22rem);line-height:1.3;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Toma " counter(toma,decimal-leading-zero);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.faq summary::after{content:"+";font-family:'Syne';font-weight:800;font-size:1.35rem;line-height:1;color:var(--terra);transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--terra)}
.faq p{max-width:62ch;margin-left:110px;padding:0 0 24px;color:var(--ink-dim)}
.faq a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){
  .faq summary{grid-template-columns:minmax(0,1fr) auto}
  .faq summary::before{grid-column:1/-1;margin-bottom:-8px}
  .faq p{margin-left:0}
}

/* ── tarifas (capítulo claro): portada y páginas de tema ── */
.tar{padding:0 var(--gut) clamp(80px,10vw,140px)}
.tar-tabs{display:flex;flex-wrap:wrap;gap:4px 26px;margin-bottom:26px}
.tar-tabs button{font-family:'Syne';font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:6px 0}
.tar-tabs button small{display:block;font-family:'Space Grotesk';font-weight:500;font-size:9px;letter-spacing:.2em;color:var(--terra-deep)}
.tar-tabs button[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--navy)}
.tar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.tar-plan{background:var(--sand);padding:26px 24px 30px;display:flex;flex-direction:column;gap:10px}
.tar-plan.pop{background:#f2e6da}
.tar-plan h4{font-family:'Syne';font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:.04em}
.tar-plan .p{font-family:'Syne';font-weight:800;font-size:2.6rem;line-height:1}
.tar-plan .p small{font-family:'Space Grotesk';font-weight:500;font-size:.8rem;color:var(--ink-mute);margin-left:6px}
.tar-plan ul{list-style:none;display:grid;gap:6px;font-size:.92rem;color:var(--ink-dim);margin-top:4px}
.tar-plan li::before{content:"▸ ";color:var(--terra-deep)}
.tar-plan .hand{font-size:1.25rem;color:var(--terra-deep)}
.tar-note{margin-top:18px;font-size:.88rem;color:var(--ink-dim)}
.tar-note a{color:var(--navy);text-decoration:underline}
@media (max-width:860px){.tar-grid{grid-template-columns:1fr}}

/* ── marcas de producción (reemplazan etiquetas y pastillas) ── */
.code{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra)}
.hand{font-family:'Caveat',cursive;font-weight:600;color:var(--grease);line-height:1.02;transform:rotate(-3deg)}
.fg-edge{position:fixed;left:16px;top:50%;z-index:40;transform-origin:left top;transform:rotate(-90deg) translateX(-50%);
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--terra);white-space:nowrap;pointer-events:none;
  text-shadow:0 0 10px rgba(0,0,0,.9)}
/* botón con esquinas de ventanilla: la única forma de botón del sitio */
.cue{position:relative;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;font-family:'Syne';font-weight:800;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:color .25s,background .25s}
.cue::before,.cue::after{content:"";position:absolute;width:10px;height:10px;border:0 solid currentColor;transition:all .3s var(--ease)}
.cue::before{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.cue::after{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.cue:hover::before,.cue:hover::after{width:100%;height:100%}
.cue.solid{background:var(--ink);color:#0b0b0d}
.cue.solid::before,.cue.solid::after{border-color:var(--ink)}
.cue i{width:7px;height:7px;border-radius:50%;background:var(--wa);flex:none}

/* ── cabecera ── */
.fg-head{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav);display:flex;align-items:center;gap:24px;
  padding-inline:var(--gut);background:linear-gradient(rgba(11,11,13,.82),rgba(11,11,13,0))}
.fg-head{transition:background-color .3s}
.fg-head.sobre-claro{background:rgba(11,11,13,.94)}
.fg-brand{display:flex;align-items:center;gap:10px;font-family:'Syne';font-weight:800;font-size:.82rem;letter-spacing:.16em;white-space:nowrap}
.fg-brand img{height:30px;width:auto}
.fg-brand span{color:var(--ink-mute)}
.fg-nav{display:flex;gap:4px;margin-left:auto}
.fg-nav a{position:relative;padding:8px 10px;font-family:'Syne';font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);text-shadow:0 1px 12px rgba(0,0,0,.8);transition:color .25s}
.fg-nav a b{font-family:'Space Grotesk';font-weight:500;font-size:9px;color:var(--terra);margin-right:6px;letter-spacing:.1em}
.fg-nav a:hover,.fg-nav a[aria-current]{color:var(--ink)}
.fg-nav a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1.5px;
  background:linear-gradient(90deg,var(--blue),var(--ink) 50%,var(--terra))}
.fg-nav a[aria-disabled]{opacity:.38;pointer-events:none}
.fg-clock{font-size:10px;letter-spacing:.2em;color:var(--ink-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.fg-menu-btn{display:none;font-family:'Syne';font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:10px 4px}
.fg-menu{position:fixed;inset:0;z-index:1100;background:rgba(7,7,8,.97);display:none;flex-direction:column;justify-content:center;
  gap:6px;padding:var(--gut)}
.fg-menu.open{display:flex}
.fg-menu a{font-family:'Syne';font-weight:800;font-size:clamp(1.4rem,7.8vw,4rem);text-transform:uppercase;line-height:1.1}   /* PRODUCTO, la más ancha, mide ~10 em: cabe desde 320 px */
.fg-menu a b{font-family:'Space Grotesk';font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--terra);vertical-align:top;margin-right:10px}
.fg-menu a[aria-disabled]{opacity:.35;pointer-events:none}
.fg-menu .close{position:absolute;top:18px;right:var(--gut);font-family:'Syne';font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:980px){.fg-nav,.fg-clock,.fg-head .cue{display:none}.fg-menu-btn{display:block;margin-left:auto}}
@media (max-width:760px){.fg-edge{display:none}}

/* ── WhatsApp flotante (aparece tras el primer scroll) ── */
.fg-wa{position:fixed;right:18px;bottom:18px;z-index:900;width:52px;height:52px;border-radius:50%;background:var(--wa);display:grid;
  place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:opacity .35s,transform .35s var(--ease)}
.fg-wa svg{width:26px;height:26px;fill:#fff}
.fg-wa.hide{opacity:0;transform:translateY(14px);pointer-events:none}

/* ════════════ LA SALA ════════════ */
.sala{position:fixed;inset:0;z-index:1500;display:none;background:#070708;color:var(--ink);isolation:isolate;overflow:hidden;overflow:clip}
.sala.open{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(20px,3.4vw,56px);
  padding:calc(var(--nav) + 6px) var(--gut) 54px}
.sala-amb{position:absolute;left:-14%;top:-14%;width:128%;height:128%;z-index:-2;filter:blur(64px) saturate(1.6) brightness(.8);
  opacity:.9;transition:opacity .6s}
.sala-veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(7,7,8,.05) 18%,rgba(7,7,8,.72) 100%)}
.sala-meta{justify-self:end;width:min(340px,100%);min-width:0}
.sala-meta .code{display:block}
.sala-title{font-size:clamp(1.25rem,1.9vw,1.75rem);margin:12px 0 10px;overflow-wrap:break-word}
.sala-sub{color:var(--ink-dim);font-size:.92rem}
.sala-acts{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:22px}
.sala-count{margin-top:18px;font-family:'Syne';font-weight:800;font-size:.78rem;letter-spacing:.14em;color:var(--ink-mute);font-variant-numeric:tabular-nums}

.sala-stage{position:relative;width:360px;height:640px;background:#000;
  transition:width .7s var(--ease),height .7s var(--ease)}
/* cover: mientras el escenario cambia de proporción, la imagen llena el cuadro en vez de mostrar franjas */
.sala-stage>.m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* halo cromático por fuera del cuadro: la imagen queda limpia (ley 6) */
.sala-rim{position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:-3px 0 8px -2px rgba(70,128,225,.55),-7px 0 18px -6px rgba(91,143,207,.35),
             3px 0 8px -2px rgba(230,120,75,.55),7px 0 18px -6px rgba(216,128,92,.35),
             0 30px 90px rgba(0,0,0,.6)}
/* entrada: dos miradas fuera de registro que convergen */
.sala-stage::before,.sala-stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;border:2px solid}
.sala-stage::before{border-color:rgba(91,143,207,.9)}
.sala-stage::after{border-color:rgba(216,128,92,.9)}
.sala-stage.entra::before{animation:salaB .8s var(--ease)}
.sala-stage.entra::after{animation:salaT .8s var(--ease)}
@keyframes salaB{from{opacity:.9;transform:translate(-22px,-6px)}to{opacity:0;transform:none}}
@keyframes salaT{from{opacity:.9;transform:translate(22px,6px)}to{opacity:0;transform:none}}
.sala-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:6;pointer-events:none}
.sala-bars span{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.sala-bars i{display:block;height:100%;width:0;background:#fff}
.sala-tap{position:absolute;inset:0;z-index:3;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* sonido: un parlante fácil de ver y de tocar */
.sala-ctl .sala-snd{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;color:#fff}
.sala-snd svg{width:22px;height:22px}
.sala-snd .con,.sala-snd[aria-pressed="true"] .sin{display:none}
.sala-snd[aria-pressed="true"] .con{display:inline}
.sala-ctl{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.sala-ctl button{pointer-events:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:8px 11px;
  background:rgba(8,8,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sala-arrow{position:absolute;top:50%;z-index:6;width:44px;height:44px;margin-top:-22px;font-size:1.1rem;color:var(--ink-dim);
  transition:color .2s,transform .3s var(--ease)}
.sala-arrow:hover{color:var(--ink)}
.sala-arrow.prev{left:-62px}.sala-arrow.prev:hover{transform:translateX(-4px)}
.sala-arrow.next{right:-62px}.sala-arrow.next:hover{transform:translateX(4px)}
.sala-queue{justify-self:start;display:grid;gap:12px;width:min(260px,100%)}
.sala-queue .code{color:var(--ink-mute)}
.sala-q{display:flex;align-items:center;gap:12px;text-align:left;opacity:.72;transition:opacity .2s,transform .3s var(--ease)}
.sala-q:hover{opacity:1;transform:translateX(4px)}
.sala-q img{width:46px;height:62px;object-fit:cover;flex:none;background:#111}
.sala-q b{display:block;font-weight:500;font-size:.86rem;line-height:1.25}
.sala-q small{color:var(--ink-mute);font-size:.72rem;letter-spacing:.06em}
.sala-close{position:absolute;top:16px;right:var(--gut);z-index:8;font-family:'Syne';font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 4px}
.sala-keys{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);white-space:nowrap}
@media (max-width:820px){
  .sala.open{display:block;padding:0}
  .sala-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  /* justify-self:stretch — Chrome ya aplica justify-self a lo absoluto: con el "end" de escritorio la franja se
     encogía y quedaba pegada a la derecha, cortando el video a la mitad */
  .sala-meta{position:absolute;left:0;right:0;bottom:0;z-index:7;width:auto;justify-self:stretch;padding:70px 18px 22px;
    background:linear-gradient(rgba(7,7,8,0),rgba(7,7,8,.92) 46%)}
  .sala-title{font-size:1.4rem;margin:8px 0 6px}
  .sala-acts{margin-top:14px}
  .sala-count{margin-top:12px}   /* en su propia línea: antes se montaba sobre "Quiero algo así" */
  .sala-queue,.sala-keys,.sala-arrow{display:none}
  .sala-ctl{bottom:auto;top:24px;align-items:center}
  .sala-ctl [data-k="pp"]{display:none}   /* en el teléfono se pausa manteniendo presionado */
  /* el parlante queda arriba a la izquierda; Cerrar, arriba a la derecha */
  .sala-close{top:30px;right:14px;z-index:9;text-shadow:0 1px 10px #000}
}
@media (prefers-reduced-motion:reduce){
  .sala-stage{transition:none}.sala-stage.entra::before,.sala-stage.entra::after{animation:none}
}