/* escena.css — el sistema de escenas del home llevado a todas las vistas.
   Lo inyecta tools/escenas.py (junto con /escena.js) en cada página:
   · .esc-fx  dentro del hero: anillos de fondo, horizonte de luz y el
     objeto cromado ([data-obj]) que dibuja escena.js en desktop (WebGL)
     o, sin WebGL, su imagen pre-renderizada (assets/escena/*.webp)
   · .lamina  la sección de preguntas como lámina clara (el contrapunto)
   · .amanecer  la luz que sube detrás del cierre
   · .foot-giant  el nombre a escala de cartel antes del pie
   El home tiene su propia copia inline (bloque #escenas). --p (0→1) es el
   progreso de scroll de cada [data-p]. */

/* el .esc-fx mide 100vw: sin esto aparece scroll horizontal con la barra vertical */
body{overflow-x:clip}

.escena-gl{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.obj{position:absolute;pointer-events:none}
.obj img{display:block;width:100%;height:auto;position:relative;z-index:1;
  transform:rotate(calc((var(--p,.5) - .5) * 36deg)) scale(calc(.92 + var(--p,.5) * .16));transition:opacity .7s}
html.escena-on .obj.is-gl img{opacity:0}

/* ── hero ── */
.esc-hero{position:relative}
:where(.esc-hero)>*:not(.esc-fx){position:relative;z-index:2}
.esc-fx{position:absolute;top:0;left:50%;width:100vw;height:min(100%,100svh);transform:translateX(-50%);
  overflow:hidden;pointer-events:none;z-index:0;container-type:size}
.esc-fx .esc-rings{position:absolute;inset:0;background:
  radial-gradient(circle at 78% 52%,transparent 229px,rgba(255,255,255,.04) 230px,transparent 231.5px),
  radial-gradient(circle at 78% 52%,transparent 399px,rgba(255,255,255,.03) 400px,transparent 401.5px),
  radial-gradient(circle at 78% 52%,transparent 619px,rgba(255,255,255,.02) 620px,transparent 621.5px),
  radial-gradient(48% 52% at 80% 50%,rgba(190,196,205,.07),transparent 68%)}
.esc-fx .horizonte{position:absolute;left:50%;top:calc(100% - clamp(70px,9vw,130px));width:240vw;height:240vw;border-radius:50%;transform:translateX(-50%);
  border-top:1px solid rgba(232,235,240,.3);
  background:radial-gradient(60% 6% at 50% 0%,rgba(220,224,232,.12),transparent 70%);
  box-shadow:0 -40px 140px -70px rgba(226,230,238,.5)}
.esc-fx::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,8,.55) 0%,rgba(7,7,8,.15) 45%,transparent 70%)}
/* el objeto nunca más alto que el hero (88cqh): en heros bajos no se corta */
.esc-fx .obj{--w:min(600px,44vw,88cqh);right:max(-4vw,calc((100vw - 1240px) / 2 - 140px));top:50%;width:var(--w);aspect-ratio:1;margin-top:calc(var(--w) / -2)}
.esc-fx .obj-knot img{mix-blend-mode:screen}
/* hero sin objeto (artículos, legales, gracias): solo horizonte y anillos */
.esc-fx.solo .esc-rings{opacity:.7}
.esc-fx.solo::after{display:none}

/* ── numerito en pastilla ── */
.num{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:99px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font:500 11.5px/1 var(--mono);color:var(--white)}
.num::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}

/* ── lámina clara (preguntas frecuentes) ── */
.lamina{--white:#0c0c0e;--silver:#2b2e34;--dim:#5b6069;--line:rgba(12,12,14,.12);--line-soft:rgba(12,12,14,.1);
  --glass:#fff;--glass-line:rgba(12,12,14,.06);--glass-sh:0 24px 50px -30px rgba(20,22,28,.28);
  position:relative;color:var(--dim);background:linear-gradient(180deg,#eceef1,#e3e6ea);
  border-radius:clamp(24px,3vw,40px);padding:clamp(48px,6vw,84px) clamp(22px,4vw,64px)!important;
  /* dentro de un .wrap sobresale un poco; si la sección ya es de ancho completo
     (100% = 100vw) queda a 8px del borde en vez de desbordar */
  margin:clamp(70px,9vw,120px) max(calc(var(--pad,24px) * -.5),calc((100% - 100vw) / 2 + 8px)) 0;overflow:hidden;overflow:clip}
.lamina h2,.lamina h3{color:#0c0c0e}
.lamina .g{background:linear-gradient(110deg,#5e646e 0%,#9aa1ac 20%,#2d3138 42%,#7d8592 60%,#40454d 80%,#8d939c 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lamina .chip{background:rgba(255,255,255,.6);color:#5b6069;border-color:rgba(12,12,14,.12)}
.lamina .btn-solid,.lamina .btn:not(.btn-ghost):not(.ghost){background:#0c0c0e;color:#f4f5f7}
.lamina a:not(.btn){color:#0c0c0e}
.lamina summary:hover{color:#0c0c0e}

/* ── cierre: luz que amanece ── */
.amanecer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.amanecer i{position:absolute;left:50%;top:100%;width:170vw;height:170vw;border-radius:50%;
  transform:translate(-50%,calc(-26% + (1 - var(--p,.5)) * 20%));
  border-top:1px solid rgba(236,238,242,.38);
  background:radial-gradient(closest-side,rgba(12,12,14,1) 96%,transparent 100%),radial-gradient(50% 10% at 50% 0%,rgba(226,230,238,.18),transparent 75%);
  box-shadow:0 -60px 180px -60px rgba(226,230,238,.5)}
.esc-cierre{position:relative;overflow:hidden;overflow:clip}
:where(.esc-cierre)>*:not(.amanecer){position:relative;z-index:2}

/* ── el nombre a escala de cartel ── */
.foot-giant{overflow:hidden;padding:clamp(26px,4vw,56px) 0 clamp(10px,2vw,22px);border-top:1px solid var(--line-soft);margin-top:clamp(40px,6vw,80px)}
.foot-giant .cinta-in{display:flex;align-items:center;width:max-content;animation:cinta 60s linear infinite}
.foot-giant span{font-family:var(--sans);font-size:clamp(54px,10vw,168px);font-weight:600;letter-spacing:-.045em;line-height:1.05;white-space:nowrap;padding:0 .32em;
  background:linear-gradient(165deg,#fff 0%,#d4d8de 30%,#878c94 58%,#e9ebef 85%,#b9bec6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.foot-giant i{width:.16em;height:.16em;font-size:clamp(54px,10vw,168px);border-radius:50%;background:#5c6068;flex:none}
.foot-giant+footer{border-top:0}
@keyframes cinta{to{transform:translateX(-50%)}}

@media(max-width:980px){
  .esc-fx .obj{right:-14vw;top:64px;margin-top:0;width:min(48vw,240px);opacity:.42}
  .esc-fx::after{background:linear-gradient(180deg,transparent 40%,rgba(7,7,8,.3))}
  .esc-fx .esc-rings{background-position:30% -10%}
}
@media(prefers-reduced-motion:reduce){
  .foot-giant .cinta-in{animation:none}
  .obj img,.amanecer i{transform:none}
}