/* =============================================================================
   stage.css — capa de dirección de arte del holding (v3)
   Primitivas de composición, tipografía cinética y micro-interacciones.
   No impone color: cada marca define sus tokens y aquí sólo se consumen.
   ========================================================================== */

:root {
  --st-ease: cubic-bezier(.22,1,.36,1);
  --st-ease-io: cubic-bezier(.65,0,.35,1);
  --st-dur: .9s;
  --st-p: 0;            /* progreso de scroll, lo escribe el motor */
}

/* --- 1. Lienzo 3D del héroe ---------------------------------------------- */
.st-stage {
  position: relative;
  display: block;
  isolation: isolate;
}
.st-stage > canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.st-stage[data-stage-ready] > canvas { animation: st-stage-in 1.4s var(--st-ease) both; }
/* En modo fondo la entrada es solo de opacidad: un escalado del 6 % sobre un
   lienzo a sangre asoma por el borde y saca barra horizontal. */
.st-stage[data-stage-mode="bg"][data-stage-ready] > canvas { animation-name: st-stage-fade; }
@keyframes st-stage-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-stage-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Reserva de espacio antes de que el motor arranque: evita saltos de layout. */
.st-stage::before { content: ""; display: block; padding-top: var(--st-stage-ratio, 100%); }
.st-stage > canvas { position: absolute; inset: 0; }


/* Modo fondo: la escena ocupa toda la seccion y pinta tambien el cielo.
   La reserva por proporcion no aplica aqui, manda el alto de la seccion. */
.st-stage[data-stage-mode="bg"] { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-stage[data-stage-mode="bg"]::before { display: none; }
.st-stage-host { position: relative; isolation: isolate; }
.st-stage-host > :not(.st-stage) { position: relative; z-index: 1; }

/* Un lienzo a sangre dentro de una escena o del lateral de acceso va SIEMPRE
   pegado a los cuatro bordes, haya arrancado el motor o no.
   Antes esto solo pasaba cuando el motor ponia data-stage-mode="bg", y hasta
   entonces mandaba `.st-stage { position: relative }` de aqui arriba: como
   esta hoja va sin capa y `cine-scoped.css` va en @layer, la regla de la capa
   NO podia corregirlo (sin capa gana siempre). El resultado era el contenedor
   colapsado a 0x0 en el heroe y convertido en un cuadrado a media seccion en
   el resto — es decir, la pagina sin 3D. */
.scene > .st-stage,
.auth-art > .st-stage,
.st-stage[data-stage-bg] {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.scene > .st-stage::before,
.auth-art > .st-stage::before,
.st-stage[data-stage-bg]::before { display: none; }

/* --- 2. Revelados tipográficos ------------------------------------------- */
/* El motor parte el texto en líneas/palabras y envuelve cada una en .st-l/.st-w
   dentro de un contenedor con overflow oculto: la máscara nace del propio flujo. */
.st-split { display: block; }
/* La mascara recorta a la altura de linea, y con interlineados apretados eso
   se come los rasgos descendentes (g, j, p, y) y algun acento. Se le da aire
   con relleno y se compensa con margen negativo: se ve entero y la maquetacion
   no se mueve ni un pixel. */
.st-lm, .st-wm { display: block; overflow: hidden;
  padding: .10em 0 .20em; margin: -.10em 0 -.20em; }
.st-wm { display: inline-block; vertical-align: top; }
.st-l, .st-w {
  display: block;
  will-change: transform;
  /* 130 % y no 106 %: con el relleno de la mascara, 106 % ya no oculta la linea. */
  transform: translate3d(0, 130%, 0) rotate(var(--st-rot, 0deg));
  transition: transform var(--st-dur) var(--st-ease);
  transition-delay: var(--st-d, 0ms);
}
.st-w { display: inline-block; }
.st-in .st-l, .st-in .st-w { transform: translate3d(0, 0, 0) rotate(0deg); }

[data-rv] { --st-d: 0ms; }
[data-rv="fade"],
[data-rv="rise"],
[data-rv="scale"],
[data-rv="mask"],
[data-rv="blur"] {
  opacity: 0;
  transition: opacity var(--st-dur) var(--st-ease), transform var(--st-dur) var(--st-ease),
              clip-path var(--st-dur) var(--st-ease-io), filter var(--st-dur) var(--st-ease);
  transition-delay: var(--st-d, 0ms);
  will-change: opacity, transform;
}
[data-rv="rise"]  { transform: translate3d(0, 2.4rem, 0); }
[data-rv="scale"] { transform: scale(.94); }
[data-rv="blur"]  { filter: blur(14px); transform: scale(1.02); }
[data-rv="mask"]  { opacity: 1; clip-path: inset(0 100% 0 0); }
[data-rv].st-in   { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* Sin JS o si algo falla, todo visible a los 3,5 s (red de seguridad). */
.st-safety [data-rv], .st-safety .st-l, .st-safety .st-w {
  opacity: 1 !important; transform: none !important;
  filter: none !important; clip-path: none !important;
}

/* --- 3. Línea que se dibuja ---------------------------------------------- */
[data-rv="line"] { transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--st-ease-io); transition-delay: var(--st-d, 0ms); }
[data-rv="line"].st-in { transform: scaleX(1); }

/* --- 4. Marquesina infinita ---------------------------------------------- */
.st-marquee { display: flex; overflow: hidden; width: 100%; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.st-marquee-track { display: flex; flex: 0 0 auto; align-items: center; gap: var(--st-marquee-gap, 3rem); padding-right: var(--st-marquee-gap, 3rem); animation: st-marquee var(--st-marquee-dur, 40s) linear infinite; }
.st-marquee[data-dir="rtl"] .st-marquee-track { animation-direction: reverse; }
.st-marquee:hover .st-marquee-track { animation-play-state: paused; }
@keyframes st-marquee { to { transform: translate3d(-100%, 0, 0); } }

/* --- 5 y 6. El cursor propio y el imán se retiraron: el puntero del sistema
       debe verse y responder sin retardo, y un botón no puede apartarse
       justo cuando el usuario va a pulsarlo. -------------------------------- */

/* --- 7. Inclinación de tarjeta ------------------------------------------- */
[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform .5s var(--st-ease); }
[data-tilt].st-tilting { transition: transform .12s linear; }

/* --- 8. Grano de película ------------------------------------------------ */
/* Se anima la posicion del fondo, no un transform sobre una caja mas grande
   que la pantalla: asi la capa no puede generar barra horizontal. */
.st-grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998;
  pointer-events: none; opacity: var(--st-grain, .035); background-image: var(--st-grain-img);
  background-size: 180px 180px; animation: st-grain 1.1s steps(6) infinite; }
@keyframes st-grain {
  0%   { background-position: 0 0; }
  20%  { background-position: -32px 24px; }
  40%  { background-position: 26px -30px; }
  60%  { background-position: -24px -16px; }
  80%  { background-position: 34px 18px; }
  100% { background-position: 0 0; }
}

/* --- 9. Telón de entrada -------------------------------------------------- */
.st-curtain { position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: var(--st-curtain-bg, #000); transform-origin: top; }
.st-curtain.st-lift { animation: st-curtain 1.05s var(--st-ease-io) forwards; }
@keyframes st-curtain { to { transform: scaleY(0); } }
.st-curtain-mark { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .4s ease; }
.st-curtain.st-lift .st-curtain-mark { opacity: 0; }

/* --- 10. Barra de progreso de lectura ------------------------------------ */
.st-progress { position: fixed; top: 0; left: 0; right: 0; height: var(--st-progress-h, 2px); z-index: 9996; transform-origin: left; transform: scaleX(var(--st-read, 0)); background: var(--st-progress-bg, currentColor); pointer-events: none; }

/* --- 11. Accesibilidad y gama baja --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .st-grain, .st-curtain { display: none !important; }
  .st-marquee-track { animation: none !important; }
  [data-rv], .st-l, .st-w {
    opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; transition: none !important;
  }
  .st-stage[data-stage-ready] > canvas { animation: none; }
}
@media (pointer: coarse) {
  [data-tilt] { transform: none !important; }
}

/* -----------------------------------------------------------------------------
   objetivo táctil de summary
   Un <summary> de una línea mide 20 px de alto: menos de la mitad de los 44 px
   que necesita un dedo. Se le da altura sin tocar su composición — `align-content`
   centra el texto en el hueco nuevo y no hace nada donde no está soportado.
   Va en @layer components para que cualquier utilidad de Tailwind siga ganando:
   una regla sin capa las anularía todas.
   -------------------------------------------------------------------------- */
@layer components {
  @media (pointer: coarse), (max-width: 1024px) {
    summary { min-height: 44px; align-content: center; }
  }
}

/* -----------------------------------------------------------------------------
   Destino de los anclas bajo la barra fija
   La barra flota sobre el contenido: al saltar a una seccion desde el menu, su
   titular queda debajo y se lee como si estuviera cortado. `--st-nav-h` la mide
   stage.js en cada carga y en cada cambio de ancho.

   El selector lleva `html` delante a proposito: varias webs traen su propia
   regla `[id]{scroll-margin-top:...}` de antes del rediseNo —Hawk reservaba
   16 px para una barra de 79— y sin ese punto extra de especificidad ganaria la
   suya segun el orden de carga.
   -------------------------------------------------------------------------- */
html:has([data-st-nav]) [id],
html:has(.nav, .kg-nav, .hp-nav, .ln-nav, .pl-nav, .oc-nav, .wf-nav, .lx-nav) [id] {
  scroll-margin-top: calc(var(--st-nav-h, 76px) + 18px);
}