@charset "utf-8";

/* =========================================================================
   Legado Nacional 2026
   Paleta y tipografia derivadas del dossier LN-Press (Adobe Illustrator).
   Los valores de color estan MEDIDOS sobre el arte original, no elegidos.
   ========================================================================= */

/* ---------- Tipografia autohospedada ----------
   El original usa Grift (display y texto), Diagramm (cifras) y Avenir, las tres
   comerciales y sin licencia web para este sitio. Be Vietnam Pro es el sustituto
   libre mas cercano: misma anchura natural, 'a' de dos pisos con bowl chico,
   'g' de un piso con cola abierta. Una sola familia con contraste de peso, como
   hace el original (Grift Bold + Grift Regular).
   Solo subset latin: el castellano no necesita latin-ext. */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/bevietnampro-300-latin.woff2") format("woff2");
  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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bevietnampro-400-latin.woff2") format("woff2");
  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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/bevietnampro-600-latin.woff2") format("woff2");
  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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/bevietnampro-800-latin.woff2") format("woff2");
  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;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Fondo: medido #02010a en el arte. Se usa un negro con sesgo violeta,
     nunca #000 puro, para que los degradados tengan donde apoyarse. */
  --negro: #05040d;
  --negro-2: #0a0817;
  --negro-3: #120d24;

  /* Acentos de marca, medidos sobre el dossier */
  --violeta: #8424fc;
  --violeta-hondo: #30006c;
  --magenta: #d30df8;
  --azul: #0b34f4;
  --azul-hondo: #000c54;
  --cian: #00aef6;

  /* Versiones aclaradas para texto a tamano de lectura.
     Los acentos puros rondan 3.4:1 sobre el fondo: alcanzan para texto grande,
     no para cuerpo. Estas pasan AA (>4.5:1) conservando el mismo tono. */
  --violeta-txt: #b47cff;
  --magenta-txt: #f085ff;
  --azul-txt: #87a2ff;
  --cian-txt: #6fd6ff;

  /* Error de formulario. La paleta del dossier no trae rojo, asi que se usa
     un rosa de la familia del magenta: se lee como alerta sin romper la marca
     y pasa AA sobre el fondo. */
  --alerta: #ff6b8b;

  --tinta: #ffffff;
  --tinta-2: rgba(255, 255, 255, 0.76);
  --tinta-3: rgba(255, 255, 255, 0.56);
  --linea: rgba(255, 255, 255, 0.14);
  --linea-fuerte: rgba(255, 255, 255, 0.28);

  /* Radios: un solo sistema. Pastillas e interactivos a pildora completa,
     tarjetas 14px, controles chicos 8px. */
  --r-card: 14px;
  --r-chico: 8px;
  --r-pildora: 999px;

  /* Curvas: salida exponencial, sin rebote */
  --sal: cubic-bezier(0.16, 1, 0.3, 1);
  --sal-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --entra-sale: cubic-bezier(0.65, 0, 0.35, 1);

  /* Ritmo vertical fluido */
  --bloque: clamp(5rem, 11vw, 9.5rem);
  --ancho: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Capas */
  --z-fondo: 0;
  --z-velo: 1;
  --z-contenido: 2;
  --z-nav: 50;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* La nav fija mide 68 px, asi que los destinos de anclaje reservan su alto.
   Se hace con scroll-margin en el destino y NO con scroll-padding en el html:
   scroll-padding corre el borde del scrollport y con el se corre el rango de
   las animaciones guiadas por scroll, que fue justo lo que descuadro el riel. */
#evento, #conversaciones, #publico, #patrocinios, #contacto, #registro, #top {
  scroll-margin-top: 5rem;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--tinta);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, dt { margin: 0; padding: 0; }
li { list-style: none; }
b { font-weight: 600; }

a { color: inherit; }

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

.caja {
  width: min(100% - (var(--gutter) * 2), var(--ancho));
  margin-inline: auto;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salto-contenido {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  background: var(--violeta);
  color: #fff;
  border-radius: var(--r-chico);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--sal);
}
.salto-contenido:focus,
.salto-contenido:focus-visible { transform: translateY(0); }

/* Acentos de texto a tamano de lectura */
.t-violeta { color: var(--violeta-txt); }
.t-magenta { color: var(--magenta-txt); }
.t-azul    { color: var(--azul-txt); }
.t-cian    { color: var(--cian-txt); }

.ico {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex: none;
}

.pendiente {
  color: #ffd166;
  font-weight: 600;
  border-bottom: 1px dashed currentColor;
}

/* =========================================================================
   NAVEGACION
   ========================================================================= */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: 68px;
  display: flex;
  align-items: center;
  background: color-mix(in oklab, var(--negro) 86%, transparent);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform 420ms var(--sal), border-color 300ms ease,
              background-color 300ms ease;
}
@supports (backdrop-filter: blur(1px)) {
  .nav { background: color-mix(in oklab, var(--negro) 62%, transparent); backdrop-filter: blur(14px); }
}
/* Sin :focus-within, tabular desde el hero mandaba el foco a seis controles
   renderizados fuera de la pantalla y el foco desaparecia sin rastro. */
.nav[data-visible="si"],
.nav:focus-within {
  transform: translateY(0);
  border-bottom-color: var(--linea);
}

.nav__caja {
  width: min(100% - (var(--gutter) * 2), var(--ancho));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav__marca {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  /* A 375 px la marca quedaba en 135x21 y el alto no llegaba al minimo tactil
     de 24. Se gana con alto minimo, sin cambiar como se ve. */
  min-height: 24px;
  align-content: center;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  margin-inline-end: auto;
}
.nav__marca-l { font-weight: 800; }
.nav__marca-n { font-weight: 300; color: var(--tinta-2); }

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  font-size: 0.9375rem;
}
.nav__links a {
  position: relative;
  color: var(--tinta-2);
  text-decoration: none;
  padding-block: 0.4rem;
  transition: color 180ms ease;
  white-space: nowrap;
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--violeta), var(--cian));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--tinta); }
  .nav__links a:hover::after { transform: scaleX(1); }
}

@media (max-width: 920px) {
  .nav__links { display: none; }
}

/* A 375 px la fila de la nav media 360 sobre 335 disponibles y el boton se
   salia del borde. Se achican marca y boton, nunca la etiqueta. */
@media (max-width: 480px) {
  .nav__marca { font-size: 0.82rem; gap: 0.3em; }
  .nav__cta { padding: 0.6rem 0.95rem; font-size: 0.82rem; }
  .nav__caja { gap: 0.75rem; }
}

/* =========================================================================
   BOTONES
   ========================================================================= */
.boton {
  --glow: var(--violeta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pildora);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--sal), box-shadow 240ms ease,
              background-color 240ms ease, border-color 240ms ease;
}
.boton:active { transform: scale(0.975); }

.boton--primario {
  /* Degradado del arte: violeta a azul, los dos extremos de la onda del hero */
  background: linear-gradient(100deg, var(--violeta), var(--azul));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset,
              0 6px 22px -8px color-mix(in oklab, var(--violeta) 70%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset,
                0 10px 34px -8px color-mix(in oklab, var(--violeta) 85%, transparent);
  }
}

.boton--grande { padding: 0.95rem 1.9rem; font-size: 1rem; }

/* Secundario: acompana a un primario sin competir con el. Se usa en el hero,
   donde la accion principal pasa a ser el registro. */
.boton--fantasma {
  background: color-mix(in oklab, var(--tinta) 7%, transparent);
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}
@media (hover: hover) and (pointer: fine) {
  .boton--fantasma:hover {
    border-color: var(--violeta-txt);
    background: color-mix(in oklab, var(--violeta) 20%, transparent);
  }
}

.boton--plan {
  width: 100%;
  margin-top: auto;
  background: transparent;
  border-color: color-mix(in oklab, var(--glow) 55%, transparent);
  color: var(--tinta);
}
@media (hover: hover) and (pointer: fine) {
  .boton--plan:hover {
    border-color: var(--glow);
    background: color-mix(in oklab, var(--glow) 16%, transparent);
  }
}

/* =========================================================================
   PIEZAS DE MARCA REUTILIZADAS
   ========================================================================= */

/* La regla con la cruz: aparece bajo el logotipo en el dossier */
.regla {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 36rem);
}
.regla__cruz {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--magenta);
  translate: 0 -0.05em;
}
.regla__linea {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violeta), var(--azul) 46%, var(--cian) 78%, transparent);
  box-shadow: 0 0 12px -2px color-mix(in oklab, var(--violeta) 70%, transparent);
  transform-origin: left center;
}
.regla--seccion { margin-block: 1.5rem; width: min(100%, 26rem); }
.hero .regla { width: min(100%, 38rem); }

.pastilla {
  display: inline-block;   /* inline-flex colapsaba el espacio tras <sup> */
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--magenta);
  border-radius: var(--r-chico);
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  box-shadow: 0 0 22px -6px color-mix(in oklab, var(--magenta) 75%, transparent),
              inset 0 0 18px -10px color-mix(in oklab, var(--magenta) 60%, transparent);
}
.pastilla sup { font-size: 0.6em; letter-spacing: 0.06em; }

.titulo-seccion {
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  letter-spacing: -0.025em;
  max-width: 21ch;
}
.titulo-seccion--ancho { max-width: 24ch; }

.parrafo {
  color: var(--tinta-2);
  max-width: 62ch;
}
.parrafo + .parrafo { margin-top: 1.1rem; }
.parrafo--grande {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--tinta);
}

/* =========================================================================
   MOTIVOS DE MARCA
   Aros concentricos y esferas. Los dos vienen del dossier (paginas 3, 8, 9 y
   10). Se rehacen en SVG y no como recorte: asi quedan nitidos a cualquier
   tamano, pesan cien veces menos y pueden moverse.
   ========================================================================= */
.aros {
  position: absolute;
  z-index: var(--z-velo);
  pointer-events: none;
  color: #2f3bf0;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--azul) 70%, transparent));
}
.aros circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  transform-origin: center;
}

.esfera {
  position: absolute;
  z-index: var(--z-velo);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), transparent 42%),
    radial-gradient(circle at 60% 70%, color-mix(in oklab, var(--violeta) 85%, transparent), color-mix(in oklab, var(--azul) 70%, transparent));
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.16),
              0 0 26px -8px color-mix(in oklab, var(--violeta) 70%, transparent);
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: 6rem 4rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__fondo {
  display: block;   /* anula el display:contents global de picture */
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* En vertical, cover recorta los laterales del arte apaisado y la onda de
     marca desaparece: el hero quedaba negro. Se baja el encuadre para que la
     cresta de puntos entre en pantalla. */
  /* Deriva muy lenta: el campo de puntos del original respira sin distraer */
  animation: deriva 34s var(--entra-sale) infinite alternate;
}
@keyframes deriva {
  from { transform: scale(1.04) translate3d(-0.6%, 0.4%, 0); }
  to   { transform: scale(1.1) translate3d(0.6%, -0.4%, 0); }
}


/* Velo: asegura contraste del texto sobre el arte y disimula el recorte
   del rotulo que venia incrustado en el raster original */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(62% 40% at -4% 56%, color-mix(in oklab, var(--violeta) 26%, transparent), transparent 70%),
    radial-gradient(62% 40% at 104% 50%, color-mix(in oklab, var(--azul) 26%, transparent), transparent 70%),
    radial-gradient(118% 76% at 50% 42%, rgba(5, 4, 13, 0.9) 0%, rgba(5, 4, 13, 0.55) 46%, transparent 72%),
    linear-gradient(180deg, rgba(5, 4, 13, 0.82) 0%, transparent 26%, transparent 64%, var(--negro) 100%);
}

/* En vertical, cover recorta los laterales del arte apaisado y la onda de marca
   desaparece: el hero quedaba negro. Se baja el encuadre para que entre la
   cresta de puntos, y se repone por CSS el violeta y el azul de los bordes.
   Esta regla va DESPUES de .hero__velo a proposito: puesta antes, la regla de
   escritorio la pisaba por orden y no aplicaba nada. */
@media (max-width: 1100px) {
  .hero__fondo img { object-position: center 84%; }
  .hero__velo {
    background:
      radial-gradient(78% 42% at -6% 54%, color-mix(in oklab, var(--violeta) 72%, transparent), transparent 72%),
      radial-gradient(78% 42% at 106% 48%, color-mix(in oklab, var(--azul) 70%, transparent), transparent 72%),
      radial-gradient(120% 50% at 50% 38%, rgba(5, 4, 13, 0.9) 0%, rgba(5, 4, 13, 0.58) 52%, transparent 80%),
      linear-gradient(180deg, rgba(5, 4, 13, 0.88) 0%, transparent 26%, transparent 66%, var(--negro) 100%);
  }
}
@media (max-width: 760px) {
  .hero { padding-block: 5.5rem 3rem; }
}

.hero__contenido {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
  text-align: center;
  /* Mismo ancho de caja que el resto de la pagina: los bloques tienen que
     empezar y terminar en la misma x, de arriba a abajo. La medida de lectura
     se acota adentro, en cada pieza, no estrechando el contenedor. */
  width: min(100% - (var(--gutter) * 2), var(--ancho));
}

.hero__titulo {
  display: grid;
  gap: 0;
  /* El resplandor va aca y no en cada linea: las lineas llevan overflow hidden
     para el barrido de entrada, y ese recorte cortaba el text-shadow dejando un
     halo rectangular visible detras del rotulo. drop-shadow sigue la forma de
     las letras y no lo recorta nadie. */
  filter: drop-shadow(0 0 34px rgba(148, 120, 255, 0.34));
  /* Medido: con la escala atada solo al ancho, a 1366x658 el hero media 780 px
     y el unico boton de la pagina terminaba en y=734, fuera de pantalla. La
     escala pasa a mirar tambien el ALTO, que es lo que faltaba. */
  font-size: clamp(2.6rem, min(10.6vw, 15vh), 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero__linea {
  display: block;
  overflow: hidden;      /* para el barrido de entrada */
  padding-block: 0.03em; /* reserva para que el barrido no corte el trazo */
}
.hero__linea > span {
  display: block;
}
.hero__linea--peso > span { font-weight: 800; }
.hero__linea--fino > span { font-weight: 300; letter-spacing: 0.012em; }

.hero__bajada {
  font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--tinta);
  max-width: 34ch;
}

.hero__acciones { margin-top: 0.4rem; }

/* =========================================================================
   REGISTRO
   El bloque del arte nuevo: ficha de inscripcion dentro del hero, a la derecha
   del rotulo. En pantalla angosta se apila debajo.
   ========================================================================= */

/* El hero pasa a dos columnas. Hasta 1000 px sigue siendo una sola, centrada,
   que es como venia: una ficha de cuatro campos al lado del titulo no entra en
   un telefono sin dejar las dos cosas chicas. */
.hero__texto {
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
}

@media (min-width: 1000px) {
  .hero__contenido {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
    justify-items: stretch;
    text-align: left;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .hero__texto { justify-items: start; }
  /* El rotulo ya no dispone del ancho entero: la escala pasa a mirar la columna
     y no la ventana, o "NACIONAL" se sale de su mitad. */
  .hero__titulo { font-size: clamp(3rem, min(5.9vw, 15vh), 6.2rem); }
  .hero__bajada { max-width: 28ch; }
  .hero .regla { width: min(100%, 24rem); }
}

.registro {
  position: relative;
  width: min(100%, 28rem);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background:
    linear-gradient(165deg, rgba(23, 16, 48, 0.86), rgba(7, 5, 18, 0.93));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 26px 60px -30px rgba(0, 0, 0, 0.9),
    0 0 70px -24px color-mix(in oklab, var(--violeta) 60%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
  /* Deja ver la onda del arte por detras sin perder el contraste del texto. */
  .registro {
    background: linear-gradient(165deg, rgba(23, 16, 48, 0.72), rgba(7, 5, 18, 0.84));
    backdrop-filter: blur(16px) saturate(130%);
  }
}

/* Hilo de luz sobre el borde superior: la misma pieza que corona la franja de
   datos y el logotipo. */
.registro::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violeta), var(--cian), transparent);
  opacity: 0.85;
}

.registro__forma {
  display: grid;
  gap: 0.7rem;
}
/* Al confirmar, el formulario se esconde con el atributo hidden. Sin esta
   linea el display de la clase lo pisa y la ficha queda con el formulario y la
   confirmacion uno encima del otro: el mismo error que ya aparecio con la
   pastilla del plan elegido. */
.registro__forma[hidden] { display: none; }

.registro__cabecera {
  text-align: center;
  margin-bottom: 0.35rem;
}
.registro__titulo {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.registro__bajada {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* ---------- Campos ----------
   Etiqueta flotante: en reposo se ve donde iria el texto, como en el arte, y
   sube al escribir. Es una <label> de verdad y no un placeholder: el
   placeholder desaparece justo cuando hace falta saber que va en el campo, y
   para un lector de pantalla no siempre existe. */
.campo {
  position: relative;
}

.campo__control {
  width: 100%;
  min-height: 3.5rem;
  padding: 1.45rem 0.95rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tinta);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.campo__control::placeholder { color: transparent; }

.campo__etiqueta {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-2);
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
  transition: transform 180ms var(--sal), font-size 180ms var(--sal), color 180ms ease;
}

/* Sube cuando el campo tiene foco o contenido. :placeholder-shown es lo que
   permite saber si esta vacio sin una linea de JavaScript. */
.campo__control:focus + .campo__etiqueta,
.campo__control:not(:placeholder-shown) + .campo__etiqueta {
  top: 0.95rem;
  transform: translateY(-50%) scale(0.78);
  transform-origin: left center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.campo__control:focus + .campo__etiqueta { color: var(--violeta-txt); }

.campo__control:hover { border-color: var(--linea-fuerte); }
.campo__control:focus {
  outline: none;                       /* lo reemplaza el anillo de abajo */
  border-color: var(--violeta);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--violeta) 30%, transparent);
}
/* Para quien navega con teclado, ademas del anillo de color va el contorno del
   sistema: el color solo no alcanza para decir donde esta el foco. */
.campo__control:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
}

.campo__opcional {
  font-size: 0.86em;
  color: var(--tinta-2);
}

.campo__aviso {
  margin-top: 0.35rem;
  padding-inline-start: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--alerta);
}

.campo__control[aria-invalid="true"] {
  border-color: var(--alerta);
}
.campo__control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--alerta) 30%, transparent);
}

/* El campo trampa existe en el HTML y no se ve. No se usa display:none ni
   hidden: hay robots que justamente saltean lo que esta oculto asi. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.registro__enviar {
  width: 100%;
  margin-top: 0.35rem;
}
.registro__enviar[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

.registro__estado {
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--alerta);
}
.registro__estado:empty { display: none; }

.registro__legal {
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tinta-2);
}

/* ---------- Confirmacion ---------- */
.registro__listo {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.registro__listo[hidden] { display: none; }   /* la clase no puede pisar al atributo */

.registro__tilde {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border-radius: var(--r-pildora);
  color: #fff;
  background: linear-gradient(135deg, var(--violeta), var(--cian));
  box-shadow: 0 0 34px -8px color-mix(in oklab, var(--cian) 70%, transparent);
}
.registro__listo-titulo {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.registro__listo-texto {
  max-width: 26ch;
  font-size: 0.9375rem;
  color: var(--tinta-2);
}

/* El autocompletado de Chrome pinta el campo de celeste y borra el texto claro.
   -webkit-autofill no admite background-color, asi que se tapa con una sombra
   interior del color de la ficha. */
.campo__control:-webkit-autofill,
.campo__control:-webkit-autofill:hover,
.campo__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: 0 0 0 1000px #17102f inset;
  caret-color: var(--tinta);
}

/* =========================================================================
   2. FRANJA DE DATOS
   ========================================================================= */
.franja {
  position: relative;
  z-index: 3;
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-block: 1px solid var(--linea);
  overflow: hidden;
  background:
    radial-gradient(90% 180% at 8% 50%, color-mix(in oklab, var(--violeta) 16%, transparent), transparent 62%),
    radial-gradient(90% 180% at 92% 50%, color-mix(in oklab, var(--azul) 16%, transparent), transparent 62%),
    linear-gradient(180deg, var(--negro-2), var(--negro));
}
/* Hilo de luz sobre el borde superior, del violeta al cian: es la misma regla
   que acompana al logotipo, estirada al ancho de la pagina. */
.franja::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violeta) 22%, var(--azul) 50%, var(--cian) 78%, transparent);
  opacity: 0.75;
}
.franja__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.1rem, 3vw, 2.5rem);
  flex: 1 1 32rem;
}
/* dt y dd cuelgan directo del div, que es lo unico que admite el modelo de
   contenido de <dl>. El icono va dentro del dt, no como hermano suelto. */
.datos__item {
  padding-inline-start: clamp(1rem, 2.5vw, 2rem);
  border-inline-start: 1px solid var(--linea);
}
.datos__item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ico--dato { width: 1.3rem; height: 1.3rem; color: var(--magenta); }

.datos dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.datos dd { margin: 0.2rem 0 0; display: grid; }
.datos dd b { font-size: 1.1rem; font-weight: 600; color: var(--tinta); }
.datos dd span { font-size: 0.95rem; color: var(--tinta-2); }

.cuenta {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background: color-mix(in oklab, var(--violeta) 7%, transparent);
}
.cuenta__etiqueta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.cuenta__reloj { display: flex; gap: 1.1rem; }
.cuenta__unidad { display: grid; justify-items: center; }
.cuenta__unidad b {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.cuenta__unidad i {
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* =========================================================================
   3. EL EVENTO
   ========================================================================= */
.evento {
  position: relative;
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
}
/* El lavado violeta que en el dossier sale del planeta y bana toda la pagina.
   Sin esto la mitad izquierda quedaba en negro plano. */
.evento::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(64% 86% at 88% 50%, color-mix(in oklab, var(--violeta) 30%, transparent), transparent 68%),
    radial-gradient(48% 70% at 72% 76%, color-mix(in oklab, var(--magenta) 20%, transparent), transparent 66%),
    radial-gradient(52% 64% at 4% 34%, color-mix(in oklab, var(--azul) 18%, transparent), transparent 70%);
}
.evento__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 4rem);
}
.evento__texto { display: grid; gap: 1.5rem; }
.evento__arte { margin: 0; position: relative; }
.evento__arte img {
  width: 100%;
  /* Se sangra hacia la derecha para que el planeta toque el borde, como en el
     dossier, en vez de quedar como una estampilla centrada. */
  margin-inline-end: calc(var(--gutter) * -1);
  -webkit-mask-image: radial-gradient(74% 74% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(74% 74% at 50% 50%, #000 52%, transparent 100%);
}
@media (min-width: 1340px) {
  .evento__arte img { margin-inline-end: calc((100vw - var(--ancho)) / -2); width: auto; max-width: none; }
}
@media (max-width: 860px) {
  .evento__caja { grid-template-columns: 1fr; }
  .evento__arte { order: -1; }
}

/* =========================================================================
   4. EL PULSO DEL PAIS
   ========================================================================= */
.pulso {
  position: relative;
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
}
.pulso__fondo { display: block; position: absolute; inset: 0; z-index: var(--z-fondo); }
.pulso__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 40%;
  /* El dossier colorea fotos en blanco y negro con violeta y azul.
     Aca el mismo tratamiento se hace en CSS, asi la foto queda a plena
     resolucion y responsive en vez de un raster plano de 1668 px. */
  filter: grayscale(1) contrast(1.15) brightness(0.52);
}
.pulso__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    linear-gradient(90deg, var(--negro) 6%, rgba(5, 4, 13, 0.82) 38%, rgba(5, 4, 13, 0.3) 72%, rgba(5, 4, 13, 0.6) 100%),
    linear-gradient(180deg, var(--negro) 0%, transparent 18%, transparent 80%, var(--negro) 100%),
    radial-gradient(70% 90% at 78% 52%, color-mix(in oklab, var(--violeta) 55%, transparent) 0%, transparent 62%),
    radial-gradient(60% 80% at 92% 78%, color-mix(in oklab, var(--azul) 48%, transparent) 0%, transparent 60%);
  mix-blend-mode: normal;
}
.pulso__caja { position: relative; z-index: var(--z-contenido); }
.pulso__columnas {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 60rem;
}

/* =========================================================================
   5. LA CIFRA
   ========================================================================= */
.cifra {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cifra__fondo { display: block; position: absolute; inset: 0; z-index: var(--z-fondo); }
.cifra__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.cifra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(42% 60% at 50% 46%, color-mix(in oklab, var(--violeta) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--negro) 0%, transparent 16%, transparent 84%, var(--negro) 100%);
}
.cifra__caja { position: relative; z-index: var(--z-contenido); display: grid; justify-items: center; gap: 0.5rem; }

.cifra__marca {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.cifra__numero {
  font-size: clamp(5rem, 2rem + 18vw, 14rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  /* Degradado del original: violeta a azul a traves de los tres digitos.
     Es una decision de marca del dossier, no decoracion anadida. */
  background: linear-gradient(96deg, var(--violeta) 8%, #6c30f0 46%, #3060f0 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 44px rgba(132, 36, 252, 0.35));
}
.cifra__palabra {
  font-size: clamp(1.1rem, 0.7rem + 1.9vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
  color: var(--tinta);
}
.cifra__sello {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.25rem 0.5rem;
  color: var(--violeta-txt);
}
.cifra__raya { width: clamp(2rem, 8vw, 5rem); height: 1px; background: var(--linea-fuerte); }
.ico--sello {
  width: 2.6rem; height: 2.6rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in oklab, var(--violeta) 60%, transparent);
  border-radius: var(--r-pildora);
  box-sizing: content-box;
}
.cifra__pie {
  max-width: 44ch;
  color: var(--tinta-2);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
}

/* =========================================================================
   6. CONVERSACIONES (riel)
   ========================================================================= */
.riel { position: relative; }
.riel__pantalla {
  position: relative;
  min-height: 100dvh;
  display: grid;
  /* La pista mide max-content cuando se fija la seccion. Sin esta columna
     acotada, ese ancho arrastra al resto de la grilla y la cabecera se va
     fuera de la caja. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
}
.riel__fondo { display: block; position: absolute; inset: 0; z-index: var(--z-fondo); }
.riel__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.riel__cabecera { position: relative; z-index: var(--z-contenido); }
.riel__titulo {
  /* Medido a 375 px: con el minimo anterior "CONVERSACIONES" pedia 363 px en
     una caja de 335 y se salia. La palabra mas larga manda la escala minima. */
  font-size: clamp(1.78rem, 0.35rem + 6.5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.riel__titulo-acento {
  font-weight: 800;
  /* El extremo azul se aclara de #0b34f4 a #3a5cfb: medido, aquel daba 2.62:1
     sobre el fondo y el minimo para texto grande es 3:1. Mismo tono. */
  background: linear-gradient(94deg, var(--violeta) 4%, #6c30f0 44%, #3a5cfb 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.riel__bajada { max-width: 52ch; color: var(--tinta-2); }

.riel__pista {
  position: relative;
  z-index: var(--z-contenido);
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  /* Se alinea con la caja de contenido, no con el borde de la ventana.
     El porcentaje se resuelve contra el ancho del contenedor, que ya excluye
     la barra de scroll; con 100vw la primera tarjeta quedaba 8 px corrida
     respecto del resto de la pagina. */
  padding-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2));
  /* Base sin animacion de scroll: carrusel con anclaje, usable en todos lados */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-fuerte) transparent;
  padding-bottom: 0.75rem;
  min-height: min-content;   /* que la grilla no la comprima sobre las tarjetas */
}
.riel__pista:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 4px;
  border-radius: var(--r-card);
}

.tema {
  scroll-snap-align: center;
  flex: 0 0 clamp(14rem, 23vw, 19rem);
  min-height: clamp(9rem, 16vw, 12rem);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background: linear-gradient(165deg,
      color-mix(in oklab, var(--violeta) 11%, transparent),
      color-mix(in oklab, var(--negro-3) 86%, transparent));
  transition: border-color 260ms ease, transform 300ms var(--sal),
              box-shadow 300ms ease;
}
.tema p { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); font-weight: 600; line-height: 1.25; }
@media (hover: hover) and (pointer: fine) {
  .tema:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--violeta) 65%, transparent);
    box-shadow: 0 18px 40px -22px var(--violeta);
  }
}

/* Mejora progresiva: donde hay animaciones guiadas por scroll, la seccion se
   fija y el riel se desplaza en horizontal con el scroll vertical.
   Donde no (Firefox hoy), queda el carrusel de arriba, que funciona igual. */
@supports (animation-timeline: view()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .riel {
      height: 320vh;
      view-timeline-name: --riel;
      view-timeline-axis: block;
    }
    .riel__pantalla {
      position: sticky;
      top: 0;
      height: 100dvh;
      min-height: 0;
      /* Con el relleno del modo normal, cabecera mas pista no entran en 100dvh
         y la fila de la pista se encogia 36 px, recortando las tarjetas. */
      padding-block: 6rem 3.5rem;
      row-gap: clamp(1.25rem, 3.5vh, 2.25rem);
    }
    .riel__pista {
      overflow-x: hidden;
      scroll-snap-type: none;
      width: max-content;
      animation: desplaza linear both;
      animation-timeline: --riel;
      animation-range: contain 0% contain 100%;
    }
    @keyframes desplaza {
      from { transform: translate3d(0, 0, 0); }
      /* Exactamente lo que sobra: ancho de la pista menos el viewport. */
      to   { transform: translate3d(calc(100vw - 100%), 0, 0); }
    }
  }
}

/* =========================================================================
   7. PUBLICO OBJETIVO
   La foto va a sangre en toda la seccion, como en la pagina 7 del dossier, y
   el texto se alinea a la MISMA caja que el resto de la pagina. Antes la
   seccion tenia su propia grilla a ancho completo y rompia la alineacion.
   ========================================================================= */
.publico {
  position: relative;
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
}
.publico__fondo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
}
.publico__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 28% 50%;
  filter: grayscale(1) contrast(1.12) brightness(0.62);
}
.publico__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(44% 64% at 22% 46%, color-mix(in oklab, var(--violeta) 62%, transparent), transparent 66%),
    radial-gradient(34% 48% at 8% 76%, color-mix(in oklab, var(--azul) 52%, transparent), transparent 64%),
    linear-gradient(90deg, transparent 26%, rgba(5, 4, 13, 0.74) 52%, rgba(5, 4, 13, 0.9) 78%),
    linear-gradient(180deg, var(--negro) 0%, transparent 16%, transparent 84%, var(--negro) 100%);
}
.publico__caja {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}
.publico__titulo {
  font-size: clamp(2.1rem, 1rem + 4.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(5, 4, 13, 0.9);
}
.publico__lista { display: grid; }
.publico__lista li {
  padding-block: clamp(0.85rem, 2vw, 1.15rem);
  border-bottom: 1px solid var(--linea);   /* una sola hairline, nunca top y bottom */
  color: var(--tinta-2);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.publico__lista li:last-child { border-bottom: 0; }
.publico__lista b { color: var(--tinta); }

@media (max-width: 900px) {
  .publico__caja { grid-template-columns: 1fr; }
  /* En vertical el texto cae encima de la foto, asi que el velo tiene que
     tapar mas: el titulo se apoya en la parte luminosa y la lista sobre una
     base casi opaca. */
  .publico__velo {
    background:
      radial-gradient(70% 34% at 34% 16%, color-mix(in oklab, var(--violeta) 62%, transparent), transparent 68%),
      linear-gradient(180deg, var(--negro) 0%, rgba(5, 4, 13, 0.42) 16%, rgba(5, 4, 13, 0.9) 42%, rgba(5, 4, 13, 0.95) 76%, var(--negro) 100%);
  }
  .publico__fondo img { object-position: 36% 38%; }
}

/* =========================================================================
   8. RAZONES
   ========================================================================= */
/* El fondo de la pagina 8 del dossier es un lavado difuso de violeta y azul
   que entra por la izquierda, con un circulo magenta hondo abajo y los aros a
   la derecha. El lavado se rehace con degradados (se reproduce exacto y ademas
   respira), y debajo va una textura fotografica muy tenue para que no quede
   plano, que es lo que hacia el original. */
.razones {
  position: relative;
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
}
.razones__textura {
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
  display: block;
}
.razones__textura img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 18% 72%;
  filter: grayscale(1) brightness(0.34) contrast(1.2) blur(3px);
  opacity: 0.34;
}
.razones::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(58% 72% at 6% 34%, color-mix(in oklab, var(--azul) 58%, transparent), transparent 64%),
    radial-gradient(40% 46% at 18% 62%, color-mix(in oklab, var(--violeta) 54%, transparent), transparent 64%),
    radial-gradient(30% 38% at 2% 92%, color-mix(in oklab, #6b0a5e 70%, transparent), transparent 66%),
    linear-gradient(180deg, var(--negro) 0%, transparent 18%, transparent 82%, var(--negro) 100%);
}
.razones .caja { position: relative; z-index: var(--z-contenido); }
.razones .aros {
  inset-block-start: -18%;
  inset-inline-end: -20%;
  width: min(56rem, 72vw);
}
.razones .esfera--a { width: 2.2rem; height: 2.2rem; top: 30%; right: 12%; }
.razones .esfera--b { width: 3.4rem; height: 3.4rem; top: 52%; right: 20%; }
@media (max-width: 1000px) {
  /* En pantalla angosta las esferas caen justo sobre el texto. Son decoracion:
     se van, no se achican. */
  .razones .esfera { display: none; }
}
.razones__titulo { max-width: 16ch; }
.razones__lista {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 760px) {
  /* Cuatro motivos, cuatro celdas. Nada de huecos al final de la grilla. */
  .razones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.razones__lista li {
  display: grid;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--violeta), transparent 72%) 1;
}
.razones__lista h3 {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.razones__lista p { color: var(--tinta-2); font-size: 1rem; }
.razones__cierre {
  grid-column: 1 / -1;
  border-image: linear-gradient(90deg, var(--magenta), var(--cian) 60%, transparent) 1;
}
.razones__cierre p {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  color: var(--tinta);
  max-width: 44ch;
}

/* =========================================================================
   9. PATROCINIOS
   ========================================================================= */
/* En el dossier las tres columnas de neon van sobre una sala llena, tenida de
   violeta, con los aros asomando por la derecha. Antes aca solo habia un
   degradado radial sobre negro. */
.planes {
  position: relative;
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
  background: var(--negro);
}
.planes__fondo {
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
  display: block;
}
.planes__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 78%;
  filter: grayscale(1) brightness(0.5) contrast(1.1);
}
.planes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(76% 52% at 50% 2%, color-mix(in oklab, var(--violeta) 34%, transparent), transparent 68%),
    radial-gradient(50% 46% at 92% 70%, color-mix(in oklab, var(--azul) 34%, transparent), transparent 66%),
    linear-gradient(180deg, var(--negro) 0%, rgba(5, 4, 13, 0.72) 26%, rgba(5, 4, 13, 0.82) 70%, var(--negro) 100%);
}
.planes .caja { position: relative; z-index: var(--z-contenido); }
.planes .aros {
  inset-block-end: -26%;
  inset-inline-end: -24%;
  width: min(48rem, 64vw);
  opacity: 0.62;
}
.planes__cabecera { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.planes__lema {
  margin-top: 0.75rem;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.planes__lema b { font-weight: 600; }

.planes__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.plan {
  --glow: var(--violeta);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in oklab, var(--glow) 45%, transparent);
  border-radius: var(--r-card);
  background: linear-gradient(170deg,
      color-mix(in oklab, var(--glow) 13%, transparent) 0%,
      color-mix(in oklab, var(--negro-2) 92%, transparent) 58%);
  box-shadow: 0 0 36px -22px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  text-align: center;
  transition: transform 300ms var(--sal), box-shadow 300ms ease, border-color 300ms ease;
}
/* --glow pinta bordes, resplandor y vinetas; --glow-txt pinta texto e iconos.
   Se separan porque el azul puro de Impulsores da 2.73:1 sobre el fondo y el
   minimo es 4.5:1. Los otros dos ya pasaban y se dejan como estaban. */
.plan--visionarios   { --glow: var(--magenta); --glow-txt: var(--magenta); }
.plan--impulsores    { --glow: var(--azul);    --glow-txt: #5b7bff; }
.plan--catalizadores { --glow: var(--cian);    --glow-txt: var(--cian); }

@media (hover: hover) and (pointer: fine) {
  .plan:hover {
    transform: translateY(-5px);
    border-color: var(--glow);
    box-shadow: 0 24px 54px -30px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

.plan > * { position: relative; z-index: 1; }
.ico--plan {
  width: 2rem; height: 2rem;
  margin-inline: auto;
  color: var(--glow-txt);
}
.plan h3 {
  margin-top: 0.75rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glow-txt);
}
.plan__moneda {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--tinta-2);
}
.plan__precio {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  text-shadow: 0 0 34px color-mix(in oklab, var(--glow) 55%, transparent);
}
.plan__pases {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in oklab, var(--glow) 38%, transparent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glow-txt);
}
.plan__destacados {
  display: grid;
  gap: 0.6rem;
  margin-block: 1.35rem;
  text-align: start;
}
/* Un icono de verificacion en lugar de un cuadrado de color: dice "incluido"
   en vez de decorar, que es lo que pide la regla de puntos decorativos. */
.plan__destacados li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--tinta-2);
  line-height: 1.45;
}
.ico--incluido {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  color: var(--glow-txt);
}

.planes__nota {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  color: var(--tinta-2);
  font-size: 0.95rem;
}
.ico--nota { width: 1.35rem; height: 1.35rem; color: var(--magenta); }
.planes__nota b { color: var(--magenta-txt); letter-spacing: 0.08em; text-transform: uppercase; }

/* Matriz completa, bajo divulgacion: 17 filas no son contenido de primer golpe */
.matriz { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.matriz summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.matriz summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .matriz summary:hover { border-color: var(--linea-fuerte); background: var(--negro-2); }
}
.ico--caret { transition: rotate 240ms var(--sal); color: var(--tinta-3); }
.matriz[open] .ico--caret { rotate: 180deg; }

.matriz__scroll { overflow-x: auto; margin-top: 1rem; }
.matriz__tabla {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.matriz__tabla th,
.matriz__tabla td { padding: 0.7rem 0.9rem; text-align: center; }
.matriz__tabla thead th {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linea-fuerte);
}
.matriz__tabla thead th:first-child { text-align: start; }
.matriz__tabla .es-visionarios   { color: var(--magenta-txt); }
.matriz__tabla .es-impulsores    { color: var(--azul-txt); }
.matriz__tabla .es-catalizadores { color: var(--cian-txt); }

.matriz__tabla tbody th {
  text-align: start;
  font-weight: 400;
  color: var(--tinta-2);
}
.matriz__tabla tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.matriz__grupo th {
  padding-top: 1.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violeta-txt);
}
/* Un solo mecanismo para el si/no. Antes convivian dos: los span del HTML
   escondidos con font-size 0 y un ::after de CSS cuyo glifo era un guion
   medio, que la guia prohibe en cualquier texto visible. Ahora el texto lo
   lee el lector de pantalla y el icono lo ve el resto. */
.ico--marca { width: 1.15rem; height: 1.15rem; }
.matriz__tabla td[data-si] .ico--marca { color: var(--cian-txt); }
.matriz__tabla td[data-no] .ico--marca { color: var(--tinta-3); opacity: 0.72; }

/* =========================================================================
   10. CIERRE
   ========================================================================= */
.cierre {
  position: relative;
  min-height: 92dvh;
  display: grid;
  align-items: center;
  padding-block: var(--bloque);
  overflow: hidden;
  isolation: isolate;
}
.cierre__fondo { display: block; position: absolute; inset: 0; z-index: var(--z-fondo); }
.cierre__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 34% 46%;
  filter: grayscale(1) contrast(1.08) brightness(0.6);
}
.cierre__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(56% 64% at 30% 52%, color-mix(in oklab, var(--azul) 60%, transparent), transparent 64%),
    radial-gradient(42% 50% at 40% 62%, color-mix(in oklab, var(--magenta) 40%, transparent), transparent 62%),
    linear-gradient(90deg, transparent 32%, rgba(5, 4, 13, 0.86) 62%, var(--negro) 100%),
    linear-gradient(180deg, var(--negro), transparent 22%, transparent 78%, var(--negro));
}
.cierre .aros {
  inset-block-start: 4%;
  inset-inline-start: -26%;
  width: min(52rem, 78vw);
  opacity: 0.55;
  color: #5a3df5;
}
.cierre__caja { position: relative; z-index: var(--z-contenido); }
.cierre__texto {
  margin-inline-start: auto;
  width: min(100%, 36rem);
  display: grid;
  gap: 1.25rem;
}
.cierre__raya { width: 100%; height: 1px; background: var(--linea-fuerte); }
.cierre__frase {
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.8rem);
  letter-spacing: -0.025em;
}
/* El atributo hidden lo pisa cualquier display de autor, asi que hay que
   devolverselo explicitamente: sin esto la pastilla aparecia vacia desde el
   principio, antes de que nadie eligiera un plan. */
.cierre__plan[hidden] { display: none; }
.cierre__plan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: start;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in oklab, var(--violeta) 55%, transparent);
  border-radius: var(--r-pildora);
  background: color-mix(in oklab, var(--violeta) 14%, transparent);
  font-size: 0.9rem;
  color: var(--tinta-2);
}
.cierre__plan b { color: var(--tinta); }
.cierre__acciones { display: grid; justify-items: start; gap: 1rem; margin-top: 0.75rem; }
.cierre__dato { color: var(--tinta-2); font-size: 0.95rem; }

@media (max-width: 860px) {
  .cierre__texto { margin-inline-start: 0; }
}

/* =========================================================================
   PIE
   ========================================================================= */
.pie {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
  background:
    radial-gradient(70% 160% at 50% 0%, color-mix(in oklab, var(--violeta) 14%, transparent), transparent 70%),
    var(--negro-2);
}
.pie::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violeta) 28%, var(--cian) 72%, transparent);
  opacity: 0.6;
}
.pie__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.pie__marca {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 300;
}
.pie__marca span { font-weight: 800; }
.pie__dato, .pie__legal { color: var(--tinta-3); font-size: 0.9rem; }

/* =========================================================================
   EFECTOS
   Cada uno existe por una razon, no porque se pueda. Si no se puede decir en
   una linea para que esta, no entra.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Los aros se propagan hacia afuera, uno detras de otro. Es el motivo de
     marca del dossier contando lo que la seccion dice: algo que se expande.
     Son ocho trazos, no ocho elementos animando layout. */
  .aros circle {
    animation: propaga 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: calc(var(--i, 0) * -0.78s);
  }
  @keyframes propaga {
    0%   { opacity: 0;    scale: 0.82; }
    18%  { opacity: 0.95; }
    100% { opacity: 0;    scale: 1.12; }
  }

  /* Las esferas flotan. En el dossier estan quietas, pero quietas en pantalla
     se leen como manchas; con deriva se leen como profundidad. */
  .esfera { animation: flota 11s ease-in-out infinite alternate; }
  .esfera--b { animation-duration: 14s; animation-delay: -4s; }
  @keyframes flota {
    from { transform: translate3d(0, -0.7rem, 0); }
    to   { transform: translate3d(0.5rem, 0.9rem, 0); }
  }

  /* Barrido de luz sobre la regla de marca, una sola vez cada tanto. */
  .regla__linea { position: relative; overflow: hidden; }
  .regla__linea::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -40%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: barre 5.5s ease-in-out infinite;
  }
  @keyframes barre {
    0%, 55% { transform: translateX(0); opacity: 0; }
    60%     { opacity: 1; }
    100%    { transform: translateX(350%); opacity: 0; }
  }

  /* Revelado palabra por palabra de los titulares grandes: marca el orden de
     lectura en vez de encender el bloque entero de golpe. Lo arma el script;
     sin script el titulo ya esta ahi y no pasa nada. */
  .pal { display: inline-block; overflow: hidden; vertical-align: top; }

  .pal > span {
    display: inline-block;
    transform: translateY(102%);
    opacity: 0;
  }
  .visible .pal > span,
  .pal.visible > span {
    transform: translateY(0);
    opacity: 1;
    transition: transform 760ms var(--sal), opacity 560ms var(--sal);
    transition-delay: calc(var(--i, 0) * 55ms);
  }

  /* Foco que sigue al puntero sobre las tarjetas de plan: dice cual de las
     tres esta bajo la mano. Las coordenadas llegan por variable desde el
     script, en un rAF, no por estado ni por listener de scroll. */
  @media (hover: hover) and (pointer: fine) {
    .plan::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity 320ms ease;
      background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 50%),
                  color-mix(in oklab, var(--glow) 26%, transparent), transparent 62%);
    }
    .plan:hover::after { opacity: 1; }
  }
}

/* Paralaje de los fondos fotograficos: el arte del dossier esta por capas y
   esto lo devuelve. Va por animacion guiada por scroll, que corre fuera del
   hilo principal; donde no hay soporte, la imagen queda quieta y ya. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pulso__fondo img,
    .publico__fondo img,
    .planes__fondo img,
    .cierre__fondo img,
    .razones__textura img {
      animation: paralaje linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
    @keyframes paralaje {
      from { transform: translate3d(0, -5%, 0) scale(1.12); }
      to   { transform: translate3d(0, 5%, 0) scale(1.12); }
    }
  }
}

/* =========================================================================
   MOVIMIENTO
   ========================================================================= */

/* Entrada orquestada del hero. Una sola coreografia en la carga, que es lo que
   la marca pide, en vez de micro animaciones sueltas por todas partes. */
@media (prefers-reduced-motion: no-preference) {
  /* El estado inicial oculto se aplica SOLO si hay JavaScript. Sin esta
     guarda, un fallo del script o un render sin ventana dejaria la pagina
     entera en blanco: la animacion tiene que mejorar algo ya visible. */
  .js [data-anim] { opacity: 0; }

  .cargado [data-anim="pastilla"] { animation: sube 700ms var(--sal) 120ms both; }
  .cargado [data-anim="titulo"] > span { animation: barrido 900ms var(--sal) both; }
  .cargado [data-anim="titulo"] { opacity: 1; }
  .cargado .hero__linea--peso > span { animation-delay: 260ms; }
  .cargado .hero__linea--fino > span { animation-delay: 380ms; }
  .cargado [data-anim="regla"] { animation: aparece 500ms var(--sal) 700ms both; }
  .cargado [data-anim="regla"] .regla__linea { animation: traza 900ms var(--sal) 760ms both; }
  .cargado [data-anim="bajada"] { animation: sube 760ms var(--sal) 820ms both; }
  .cargado [data-anim="acciones"] { animation: sube 760ms var(--sal) 960ms both; }
  .cargado [data-anim="registro"] { animation: sube 820ms var(--sal) 560ms both; }

  @keyframes barrido {
    from { opacity: 0; transform: translateY(0.42em); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: translateY(0);     clip-path: inset(0 0 -10% 0); }
  }
  @keyframes sube {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  @keyframes traza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* Revelado al entrar en pantalla. Misma guarda: solo con JS, y el script
     tiene ademas un plazo de seguridad que revela todo a los 3 s. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.4rem);
    transition: opacity 700ms var(--sal), transform 700ms var(--sal);
    transition-delay: var(--retraso, 0ms);
  }
  .js [data-reveal].visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim], [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__fondo img { animation: none; }
  .aros circle, .esfera, .regla__linea::after { animation: none; }
  .aros circle { opacity: 0.5; }
  .pal, .pal > span { overflow: visible; transform: none; opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}