/* =========================================================
   Spingola — landing
   El sistema visual sale del hero de "Power AI Hero.html":
   fondo casi negro violáceo, texto blanco cálido, tipografías
   Geist + General Sans, píldoras de vidrio y un gradiente
   índigo → violeta → ámbar como único acento.
   ========================================================= */

/* ---------- Tipografías (extraídas del bundle del hero) ---------- */

/* Geist es variable: un solo archivo cubre de 100 a 900. */
@font-face {
  font-family: 'Geist';
  src: url("assets/fuentes/geist-latin.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url("assets/fuentes/geist-latin-ext.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* General Sans es estática: un archivo por peso. */
@font-face { font-family:'General Sans'; src:url("assets/fuentes/general-sans-400.woff2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url("assets/fuentes/general-sans-500.woff2") format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url("assets/fuentes/general-sans-600.woff2") format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url("assets/fuentes/general-sans-700.woff2") format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* Manual de marca v2. Estos siete son los colores de la marca:
     no inventar ninguno más. */
  --violeta-tinta: #3B1D53;
  --violeta-senal: #6E3FA3;
  --lila-alta:     #B98CE8;
  --bruma:         #E7DEF0;
  --tinta:         #1A1220;
  --laton:         #C2A15B;
  --blanco:        #FFFFFF;

  /* Semánticos del tema oscuro, derivados de los de arriba.
     OJO: --violeta-senal sobre fondo oscuro da 2,6:1 — no alcanza para
     texto. Va solo en rellenos, bordes y glow. Para texto de acento,
     --lila-alta o --laton. */
  --vacio:    #0B0710;              /* negro de sala: --tinta llevado al fondo */
  --texto:    var(--blanco);
  --texto-2:  #CBC1D8;              /* --bruma bajada para fondo oscuro */
  --texto-3:  rgba(255,255,255,.65);
  --texto-4:  rgba(255,255,255,.6);
  --linea:    rgba(185,140,232,.2); /* --lila-alta */
  --linea-2:  rgba(185,140,232,.1);

  /* Único acento del sistema. Va de frío a cálido dentro de la marca.
     --violeta-senal queda afuera a propósito: medido sobre el cuadro más
     claro del video da 1,4:1, y el gradiente se usa en titulares y en el
     fondo del botón de envío, donde hace falta 3:1 y 4,5:1. Los tres que
     quedan dan 3,9:1, 10,6:1 y 4,2:1. */
  --grad: linear-gradient(to left, var(--lila-alta), var(--bruma), var(--laton));

  --display: 'General Sans', 'Geist', system-ui, sans-serif;
  --sans:    'Geist', system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1: .5rem; --s2: 1rem; --s3: 1.75rem; --s4: 3rem; --s5: 5rem; --s6: 8rem;

  --radio: 9px;
  --radio-lg: 16px;
  --pill: 999px;

  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-suave: cubic-bezier(.4,0,.2,1);

  --gutter: clamp(1.25rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--vacio);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: var(--texto); text-decoration: none; }

:focus-visible { outline: 2px solid var(--lila-alta); outline-offset: 3px; border-radius: 2px; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--texto); color: var(--vacio);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s1) var(--s2); z-index: 100;
  font-family: var(--mono); font-size: .8rem;
}
.saltar:focus { left: var(--s2); top: var(--s2); }

/* Texto presente en el HTML y accesible para lectores de pantalla y
   buscadores, pero recortado de la pantalla: no ocupa espacio ni cambia
   nada visualmente. Se usa para meter "Spingola" al principio del <h1>
   sin alterar el titular grande que ya está aprobado. Es el patrón
   estándar (el mismo que usan Bootstrap, WordPress, etc.), no un truco:
   Google lo distingue explícitamente del texto oculto con fines
   engañosos porque sigue siendo real para tecnología de asistencia. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   VIDRIO LÍQUIDO
   Receta tomada literal del hero: un fondo casi transparente,
   desenfoque por detrás y un filo de luz arriba y abajo hecho
   con un borde enmascarado.
   ========================================================= */

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   FONDO
   El <video> está fijo detrás de todo el documento y no se
   reproduce nunca: main.js le mueve currentTime con el scroll.
   ========================================================= */

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--vacio);
  pointer-events: none;
}

.fondo-video, .fondo-quieto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.fondo-quieto {
  background: url("assets/hero-poster.jpg") center / cover no-repeat;
  transition: opacity .6s var(--ease-suave);
}
.fondo-video { opacity: 0; transition: opacity .6s var(--ease-suave); }
.fondo.video-listo .fondo-video  { opacity: 1; }
.fondo.video-listo .fondo-quieto { opacity: 0; }

/* Velo: sube donde hay texto denso, baja donde el video respira.
   El valor lo escribe main.js en --velo según la sección. */
.fondo-velo {
  position: absolute;
  inset: 0;
  background: var(--vacio);
  opacity: var(--velo, .72);
  transition: opacity .55s var(--ease-suave);
}

/* El orbe desenfocado del hero original, que apaga el centro para
   que el titular tenga dónde apoyarse. */
.fondo-orbe {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(984px, 92vw);
  height: min(527px, 55vh);
  background: var(--vacio);
  filter: blur(82px);
  opacity: .9;
}

/* ---------- Utilidades ---------- */

.contenedor { width: min(1180px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.contenedor-angosto { width: min(720px, 100% - (var(--gutter) * 2)); }

.seccion { padding-block: clamp(4.5rem, 10vw, var(--s6)); position: relative; }

/* micro-etiqueta monoespaciada, como el "logo.png" del hero */
.micro {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-4);
}

/* el gradiente del hero aplicado a texto */
.titulo em, .form-titulo em, .hero-titulo em {
  font-style: normal;
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.024em;
  text-wrap: balance;
  margin-top: .75rem;
}

.intro {
  margin-top: var(--s2);
  max-width: 54ch;
  color: var(--texto-2);
  font-size: 1rem;
  line-height: 1.7;
}

/* filo horizontal degradado, el separador del hero */
.filo {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, var(--linea), transparent);
}

/* ---------- Píldoras ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pill);
  padding: 12px 20px;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  border: none;
  transition: background 200ms ease, transform 200ms var(--ease);
}
.pill:hover { background: rgba(255,255,255,0.06); }
.pill:active { transform: translateY(1px); }

.pill-grande {
  margin-top: 25px;
  padding: 20px 29px;
  min-height: 56px;
  font-size: 16px;
}

/* ---------- Marca ---------- */

/* El logotipo es el archivo de marca, no texto: el wordmark tiene su
   propia tipografía y no se reproduce con las fuentes del sitio. */
.marca { display: inline-flex; align-items: center; flex-shrink: 0; }
.marca-logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  transition: filter .3s var(--ease);
}
.marca:hover .marca-logo { filter: drop-shadow(0 0 12px rgba(185,140,232,.75)); }

.marca-pie { flex-direction: column; align-items: flex-start; gap: .55rem; }
.marca-logo-lg { height: 35px; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 20px var(--gutter);
  background: transparent;
  transition: background-color .35s var(--ease), padding .35s var(--ease),
              -webkit-backdrop-filter .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.pegado {
  padding-block: 12px;
  background: rgba(11,7,16,.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav.pegado::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--linea), transparent);
}

.nav-progreso {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  transform: scaleX(var(--avance, 0));
  transform-origin: 0 50%;
  background: var(--grad);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 1;
}
.nav.pegado .nav-progreso { opacity: 1; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 34px); }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px;
  color: rgba(255,255,255,.9);
  transition: color 200ms ease;
}
.nav-links a:hover { color: var(--texto); }

.nav-cta { flex-shrink: 0; padding: 8px 16px; min-height: 40px; }

@media (max-width: 860px) { .nav-links { display: none; } }

/* Por debajo de ~420 px la marca más la píldora no entran en la barra y
   la píldora se salía por el borde derecho. Se achica la píldora y se
   deja solo el cuadro de la marca. */
@media (max-width: 420px) {
  .nav { gap: .5rem; }
  .marca-logo { height: 22px; }
  .nav-cta { font-size: 13px; padding: 8px 12px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(7rem, 16vh, 9rem) var(--gutter) clamp(2rem, 5vh, 2.5rem);
}

.hero-centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-titulo {
  margin: var(--s2) 0 0;
  font-family: var(--display);
  font-weight: 400;
  /* El hero original usa 220px fijos para "Power AI" (8 caracteres). Este
     titular es una frase: su línea más larga mide 15,1 em en General Sans.
     A 5,5vw entra en un renglón de 768 px para arriba y por debajo de eso
     envuelve sola, que es preferible a achicar la fuente hasta 18 px para
     forzar el renglón único. El tope de 5,5rem es lo que la mantiene
     "chica" en monitores grandes.
     Si cambiás el texto del h1, volvé a medir esto. */
  font-size: clamp(2rem, 5.5vw, 5.5rem);
  line-height: 1.06;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.hero-titulo .linea { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-titulo .linea-int {
  display: block;
  transform: translateY(110%);
  animation: subir-linea 1s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes subir-linea { to { transform: none; } }

.hero-bajada {
  margin-top: 9px;
  max-width: 30rem;
  font-size: 18px;
  line-height: 32px;
  color: var(--texto-2);
}

.hero-cue { display: flex; justify-content: center; padding-top: var(--s3); }
.hero-cue-linea {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
  transform-origin: 50% 0;
  animation: caer 2.2s var(--ease-suave) infinite;
}
@keyframes caer {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.anim-hero {
  opacity: 0;
  transform: translateY(16px);
  animation: entrar .9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes entrar { to { opacity: 1; transform: none; } }

/* ---------- Marquesina ---------- */

.marquesina {
  max-width: 64rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 48px);
  padding-top: var(--s3);
}
.marquesina-label {
  flex: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto-3);
}
.marquesina-caja {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquesina-pista {
  display: flex;
  width: max-content;
  gap: 64px;
  animation: marquee-scroll 26s linear infinite;
}
@keyframes marquee-scroll { from { transform: translateX(0%); } to { transform: translateX(-50%); } }

.marca-item { display: flex; align-items: center; gap: 10px; flex: none; }
.marca-item .inicial {
  width: 24px; height: 24px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.9);
}
.marca-item .nombre {
  font-size: 16px; font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .marquesina-label { display: none; }
}

/* ---------- Tarjetas ---------- */

.grilla { display: grid; gap: var(--s2); margin-top: var(--s4); }
@media (min-width: 760px) {
  .grilla-2 { grid-template-columns: 1fr 1fr; }
  .grilla-3 { grid-template-columns: repeat(3, 1fr); }
  /* Cinco tarjetas en dos columnas dejarían la última suelta con un hueco
     al lado; la quinta ocupa el ancho completo y cierra la grilla. */
  .tarjeta-ancha { grid-column: 1 / -1; }
}

.tarjeta {
  border-radius: var(--radio-lg);
  padding: clamp(1.35rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
/* halo que sigue al puntero: --mx/--my los escribe main.js */
.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(185,140,232,.14), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease-suave);
  pointer-events: none;
}
.tarjeta:hover::after { opacity: 1; }
.tarjeta > * { position: relative; z-index: 1; }

.tarjeta-indice {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--texto-4);
}
.tarjeta h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.16;
  letter-spacing: -.015em;
}
.tarjeta p { color: var(--texto-2); font-size: .9375rem; }

/* Las tarjetas anchas ocupan las 2 columnas: sin tope de ancho el párrafo
   queda con líneas de más de 90 caracteres, incómodas de leer. */
.tarjeta-ancha p { max-width: 72ch; }

/* Capturas reales de proyectos propios, no maquetas. Cada imagen ya trae
   su propio "chrome" de ventana horneado en el PNG (ver los scripts de
   captura): acá solo se ordenan en fila y se dejan respirar. */
.tarjeta-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: .4rem;
}
.tarjeta-galeria img {
  flex: 1 1 220px;
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 50px -22px rgba(0,0,0,.75);
}
.tarjeta-galeria-2 img { flex-basis: 320px; }

@media (max-width: 700px) {
  .tarjeta-galeria { flex-direction: column; }
  .tarjeta-galeria img { flex-basis: auto; }
}

/* ---------- Quiénes somos: números ---------- */

.stats-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
  text-align: center;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem .6rem;
}
.stat-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1;
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-etiqueta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-4);
  margin: 0;
}
@media (max-width: 560px) {
  .stats-grilla { grid-template-columns: 1fr; gap: 0; }
  .stat { border-top: 1px solid var(--linea-2); }
  .stat:first-child { border-top: none; }
}

/* ---------- Preguntas frecuentes ---------- */
/* <details>/<summary> nativos: el acordeón no necesita una línea de JS.
   El navegador ya maneja abrir/cerrar y el estado accesible. */

.faq-lista { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

/* Cruz que gira 45° y pasa a ser un "+": misma idea que el resto del sitio
   (nada de íconos importados, formas hechas con el propio CSS). */
.faq-icono {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
  transition: transform .3s var(--ease);
}
.faq-icono::before, .faq-icono::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  background: var(--texto-3);
  transition: background-color .2s var(--ease);
}
.faq-icono::before { width: 14px; height: 1.5px; }
.faq-icono::after  { width: 1.5px; height: 14px; }
.faq-item[open] .faq-icono { transform: rotate(45deg); }
.faq-item:hover .faq-icono::before,
.faq-item:hover .faq-icono::after { background: var(--texto); }

.faq-item p {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea-2);
  color: var(--texto-2);
  font-size: .9375rem;
  max-width: 62ch;
}

/* ---------- Formulario ---------- */

.form-panel { padding: clamp(1.6rem, 4.5vw, 3rem); gap: 0; }

.form-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-top: .75rem;
  text-wrap: balance;
}

form { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .875rem; font-weight: 500; color: var(--texto); }

.campo input {
  font-family: var(--sans);
  font-size: 16px; /* evita el zoom automático en iOS */
  padding: .8rem .95rem;
  min-height: 48px;
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--texto);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.campo input::placeholder { color: var(--texto-4); }
.campo input:hover { border-color: var(--linea); }
.campo input:focus-visible {
  border-color: var(--lila-alta);
  outline-offset: 0;
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 4px rgba(185,140,232,.14);
}
.campo input[aria-invalid="true"] { border-color: #f0a2a2; }

.error { font-size: .8125rem; color: #f0a2a2; min-height: 1.2em; }

.pill-enviar {
  margin-top: var(--s1);
  width: 100%;
  min-height: 54px;
  font-size: 16px;
  font-weight: 500;
  color: var(--tinta);
  background-image: var(--grad);
}
.pill-enviar:hover:not(:disabled) { filter: brightness(1.08); background-image: var(--grad); }
.pill-enviar:disabled { opacity: .5; cursor: not-allowed; }

.form-estado { font-family: var(--mono); font-size: .8125rem; min-height: 1.4em; }
.form-estado.ok { color: #86efac; }
.form-estado.mal { color: #f0a2a2; }

/* ---------- Pie ---------- */

.pie { position: relative; padding-block: var(--s4) var(--s3); }
.pie-cuerpo {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: space-between; align-items: center;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linea-2);
}
.pie-bajada {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-4);
}
.pie-datos { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: .9375rem; }
.pie-datos a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: rgba(255,255,255,.75);
  transition: color 200ms ease;
}
.pie-datos a:hover { color: var(--texto); }

.pie-legal {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding-top: var(--s2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--texto-4);
}

/* =========================================================
   MOVIMIENTO LIGADO AL SCROLL
   ========================================================= */

.escena { perspective: 1300px; perspective-origin: 50% 40%; }

.tarjeta-3d {
  --p: 0; --tx: 0deg; --ty: 0deg; --tz: 0px;
  opacity: var(--p);
  transform:
    rotateX(calc((1 - var(--p)) * 14deg))
    translateZ(calc((1 - var(--p)) * -110px))
    translateY(calc((1 - var(--p)) * 24px));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.panel-3d {
  --p: 0;
  opacity: var(--p);
  transform: rotateX(calc((1 - var(--p)) * -10deg)) translateZ(calc((1 - var(--p)) * -80px));
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.anim {
  --p: 0;
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * 20px));
  will-change: transform, opacity;
}

/* Camino preferido: el navegador resuelve el scroll en el compositor.
   El JS queda solo como reserva para navegadores sin soporte. */
@supports (animation-timeline: view()) {
  .tarjeta-3d:not(.tilt-activo) {
    animation: revelar-tarjeta linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 42%;
  }
  .panel-3d {
    animation: revelar-panel linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 40%;
  }
  .anim {
    animation: revelar-simple linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 35%;
  }
}

/* Ya revelada, la tarjeta pasa a modo tilt: opacidad plena y solo la
   rotación del puntero. */
.tarjeta-3d.tilt-activo {
  animation: none;
  opacity: 1;
  transform: rotateX(var(--tx)) rotateY(var(--ty)) translateZ(var(--tz));
  transition: transform .5s var(--ease-suave);
}
.tarjeta-3d.tilt-activo.tilt-tocando { transition: transform .08s linear; }

@keyframes revelar-tarjeta {
  from { opacity: 0; transform: rotateX(14deg) translateZ(-110px) translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes revelar-panel {
  from { opacity: 0; transform: rotateX(-10deg) translateZ(-80px); }
  to   { opacity: 1; transform: none; }
}
@keyframes revelar-simple {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-3d, .panel-3d, .anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anim-hero { animation: none; opacity: 1; transform: none; }
  .hero-titulo .linea-int { animation: none; transform: none; }
  .marquesina-pista { animation: none; }
  .hero-cue-linea { animation: none; }
  .hero-cue-linea { opacity: .5; }
  .fondo-velo { transition: none; }
}