/* ==========================================================================
   MonoTRIBU Experience 2026 — AsesoriasNET
   Hoja única, sin build de CSS. Orden: tokens → fuentes → reset → layout →
   componentes.

   DESIGN SYSTEM: "MonoTRIBU Design System" (claude.ai/design 99ad9f35).
   Fundamentos aplicados:
   - Fondo casi negro (#0a0a0f) SIEMPRE. Esta marca no tiene modo claro.
   - Motivo insignia: fondo "nebulosa" — glow radial magenta abajo-izquierda,
     cyan arriba-derecha, sobre una trama de puntos sutil.
   - Dos acentos sobre negro: rosa/magenta #f40061 (primario) y cyan #29def7
     (secundario). Alternan entre elementos repetidos; nunca domina uno solo.
   - Blanco es el único color de texto; el texto secundario es blanco con
     opacidad reducida (sin escala de grises).
   - Tipografía: Poppins Black/ExtraBold (800–900) en MAYÚSCULAS para títulos,
     Poppins Regular/Medium para cuerpo. Un solo acento manuscrito (Caveat),
     nunca más de una línea por layout, siempre en rosa.
   - Sin sombras grises: la única "sombra" es un glow de color, ancho y suave.
   - Tarjetas: borde rosa fino (1.5px) semi-transparente sobre relleno blanco
     al 4%, radio grande (16–24px). El borde encuadra; no hay elevación.
   - Pills en botones y tags. Nada de esquinas rectas.
   - Hover aclara el acento; press reduce escala (~0.96). 120–220ms.

   Performance (Core Web Vitals):
   - Webfonts self-hosteadas (woff2, font-display: swap, preload en el head).
   - Sin frameworks. Un solo archivo cacheable un año.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base — casi negro, sin modo claro */
  --c-fondo: #0a0a0f;
  --c-fondo-alt: #0d0d15;
  --c-fondo-elev: #12121c;
  --c-borde: rgb(255 255 255 / 0.12);
  --c-texto: #ffffff;
  --c-texto-sec: rgb(255 255 255 / 0.72);
  --c-texto-ter: rgb(255 255 255 / 0.55);

  /* Acentos — rosa primario, cyan secundario */
  --c-rosa: #f40061;
  --c-rosa-claro: #ff4d94;
  --c-cyan: #29def7;
  --c-cyan-claro: #7deafb;

  /* Aliases heredados (mantienen compatibilidad con clases existentes) */
  --c-acento: var(--c-rosa);
  --c-acento-alt: var(--c-rosa-claro);
  --c-acento-oscuro: #c30050;
  --c-exito: var(--c-cyan);
  --c-alerta: #fbbf24;

  /* Superficies y bordes de marca */
  --s-tarjeta: rgb(255 255 255 / 0.04);
  --s-tarjeta-hover: rgb(255 255 255 / 0.07);
  --b-rosa: rgb(244 0 97 / 0.35);
  --b-cyan: rgb(41 222 247 / 0.35);

  /* Glows — la única sombra permitida es de color */
  --glow-rosa: 0 0 44px rgb(244 0 97 / 0.35);
  --glow-cyan: 0 0 44px rgb(41 222 247 / 0.3);

  /* Tipografía — una sola grotesk + un acento manuscrito */
  --f-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Escala tipográfica fluida (las mayúsculas del display leen más grande,
     por eso el techo es algo menor que en la identidad v1) */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --t-xl: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
  --t-2xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  --t-3xl: clamp(2rem, 1.55rem + 2.2vw, 3.25rem);

  /* Espaciado — escala base 4px */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* Layout */
  --alto-barra: 4.2rem;
  --alto-tira: 2.6rem;
  --ancho-max: 1120px;
  --ancho-texto: 68ch;
  --radio: 20px;
  --radio-sm: 14px;

  --transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Fuentes de marca (self-hosteadas, ver src/assets/fonts/)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-400-normal.woff2?v=9212f6f9") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-500-normal.woff2?v=a09f2fcc") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-700-normal.woff2?v=25b0e113") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-900-normal.woff2?v=5426bf50") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-latin-700-normal.woff2?v=9700119a") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Dos barras pegadas arriba (la de navegación y la tira del reloj): un
     ancla que no las descuente aterriza tapada. */
  scroll-padding-top: calc(var(--alto-barra) + var(--alto-tira) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Display: Poppins Black, MAYÚSCULAS, interlineado apretado */
h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  line-height: 1.12;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-3xl);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--t-2xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
h3 {
  font-size: var(--t-xl);
  font-weight: 800;
}
h4 {
  font-size: var(--t-lg);
  font-weight: 700;
}

p {
  margin: 0 0 var(--e-4);
  text-wrap: pretty;
}

/* Links inline: cyan (el acento secundario), hover más claro */
a {
  color: var(--c-cyan);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--c-cyan-claro);
}

:focus-visible {
  outline: 3px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

ul,
ol {
  padding-left: 1.35em;
}
li {
  margin-bottom: var(--e-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--c-borde);
  margin: var(--e-7) 0;
}

/* --------------------------------------------------------------------------
   4. Utilidades y layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}

.contenedor--angosto {
  width: min(100% - 2.5rem, 780px);
  margin-inline: auto;
}

.seccion {
  padding-block: var(--e-8);
  scroll-margin-top: 4.5rem;
}

@media (min-width: 768px) {
  .seccion {
    padding-block: var(--e-9);
  }
}

.seccion--alt {
  background: var(--c-fondo-alt);
}

/* Motivo insignia: nebulosa — glow rosa abajo-izq, cyan arriba-der, trama
   de puntos encima. Se usa en el hero y en el CTA final. */
.seccion--nebulosa {
  background-image: radial-gradient(
      rgb(255 255 255 / 0.05) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      ellipse 60% 55% at 8% 108%,
      rgb(244 0 97 / 0.2),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 50% at 94% -8%,
      rgb(41 222 247 / 0.15),
      transparent 70%
    );
  background-size: 26px 26px, auto, auto;
  background-color: var(--c-fondo);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar-a-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-rosa);
  color: #ffffff;
  padding: var(--e-3) var(--e-4);
  z-index: 200;
  font-weight: 700;
  border-radius: 999px;
}
.saltar-a-contenido:focus {
  left: var(--e-4);
  top: var(--e-4);
}

.acento {
  /* rosa-claro (pink-400) y no rosa puro: contraste AA sobre casi negro */
  color: var(--c-rosa-claro);
}

/* Acento manuscrito (Caveat) — una sola línea por layout, siempre rosa */
.acento-manuscrito {
  font-family: var(--f-script);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--c-rosa-claro);
  text-transform: none;
  letter-spacing: 0;
}

/* Párrafo de respuesta directa: el bloque que los motores de respuesta citan.
   40–60 palabras, primer párrafo de cada sección. */
.respuesta {
  font-size: var(--t-lg);
  color: var(--c-texto);
  max-width: var(--ancho-texto);
  border-left: 3px solid var(--c-rosa);
  padding-left: var(--e-4);
  margin-bottom: var(--e-6);
}

/* Kicker / antetítulo: caps espaciadas + barra corta de subrayado con
   extremos redondeados — el gesto gráfico de la marca */
.antetitulo {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rosa-claro);
  margin-bottom: var(--e-4);
}

.antetitulo::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  border-radius: 999px;
  background: var(--c-rosa);
  margin-top: var(--e-2);
}

/* En secciones alternas, el kicker alterna al cyan (los acentos se turnan) */
.seccion--alt .antetitulo {
  color: var(--c-cyan);
}
.seccion--alt .antetitulo::after {
  background: var(--c-cyan);
}

/* --------------------------------------------------------------------------
   5. Botones — pills, glow de color al hover, escala al press
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.95rem 2rem;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1),
    background var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion), color var(--transicion);
}

.boton:active {
  transform: scale(0.96);
}

.boton--primario {
  background: var(--c-rosa);
  color: #ffffff;
}
.boton--primario:hover {
  background: var(--c-rosa-claro);
  color: #ffffff;
  box-shadow: var(--glow-rosa);
}

.boton--secundario {
  background: transparent;
  border-color: var(--b-cyan);
  color: var(--c-cyan);
}
.boton--secundario:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan-claro);
  box-shadow: var(--glow-cyan);
}

.boton--ancho {
  width: 100%;
}

.boton-nota {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-texto-ter);
  margin-top: var(--e-2);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(10 10 15 / 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-borde);
}

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}

.cabecera__marca {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-texto);
  text-decoration: none;
  white-space: nowrap;
}
.cabecera__marca:hover {
  color: var(--c-texto);
}

.cabecera__nav {
  display: none;
  gap: var(--e-5);
}

@media (min-width: 900px) {
  .cabecera__nav {
    display: flex;
  }
}

.cabecera__nav a {
  color: var(--c-texto-sec);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
}
.cabecera__nav a:hover {
  color: var(--c-cyan);
}

.cabecera .boton {
  padding: 0.6rem 1.25rem;
  min-height: 42px;
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   7. Hero — fondo nebulosa completo
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--e-6) var(--e-7);
  background-image: radial-gradient(
      rgb(255 255 255 / 0.05) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      ellipse 65% 60% at 6% 110%,
      rgb(244 0 97 / 0.22),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 55% at 96% -12%,
      rgb(41 222 247 / 0.17),
      transparent 72%
    );
  background-size: 26px 26px, auto, auto;
  background-color: var(--c-fondo);
}

/* En escritorio el hero mide exactamente una pantalla: mínimo y máximo son el
   mismo valor. El techo no recorta nada — lo que entra en él es la compresión
   continua del final de esta sección, que achica tipografía y espaciado a
   medida que baja el alto de la ventana. svh en vez de vh para no pelearse con
   la barra del navegador móvil.

   `safe center` es el seguro: si alguna vez el contenido superara el techo
   (traducción larga, fuente de sistema más ancha), el centrado se degrada a
   inicio en lugar de desbordar por arriba y meterse abajo de la barra. */
@media (min-width: 1000px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    /* La cabecera son sus dos filas más el hilo de 1px que las separa. Sin ese
       1px el hero se pasa de la pantalla por medio píxel y asoma el borde de
       los pilares abajo del pliegue. */
    min-height: calc(100svh - var(--alto-barra) - var(--alto-tira) - 1px);
    max-height: calc(100svh - var(--alto-barra) - var(--alto-tira) - 1px);
    padding-block: var(--e-5);
  }
}

/* Fila de contexto: sede, fecha, horario y cupo en una sola línea */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
}

.hero__meta > * {
  margin-bottom: 0;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-texto-sec);
}

.hero__datos span {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

/* Iconos de línea (Lucide inline): alternan rosa / cyan / rosa */
.hero__datos svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  color: var(--c-rosa-claro);
}
.hero__datos span:nth-child(even) svg {
  color: var(--c-cyan);
}

.hero h1 {
  max-width: 18ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.etiqueta-cupo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: rgb(244 0 97 / 0.12);
  border: 1.5px solid var(--b-rosa);
  color: var(--c-rosa-claro);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--e-2) var(--e-4);
  border-radius: 999px;
  margin-bottom: var(--e-4);
}

/* Tira del reloj — segunda fila de la cabecera ──────────────────────────────
   Antes el contador era un bloque de tarjetas dentro del hero: se veía tres
   segundos y se iba con el primer scroll. Acá es una franja fina que queda
   fija toda la página. Números en Poppins Black alternando rosa y cyan, que
   es lo que hay que leer de reojo; el rótulo va en gris terciario.
   No tiene sticky ni fondo propios: los hereda de la cabecera, que es quien
   se pega arriba. Su alto está tokenizado en --alto-tira porque el hero se lo
   descuenta a la pantalla. */
.tira-reloj {
  border-top: 1px solid var(--c-borde);
}

/* El JS la esconde cuando el evento ya pasó; sin esto, el display de abajo
   le gana al atributo hidden. */
.tira-reloj[hidden] {
  display: none;
}

.tira-reloj__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-5);
  min-height: var(--alto-tira);
  padding-block: 0.3rem;
}

.tira-reloj__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-texto-ter);
}

.tira-reloj__rotulo svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  color: var(--c-rosa-claro);
}

.tira-reloj__cifras {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  margin: 0;
}

.tira-reloj__bloque {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.tira-reloj__num {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 900;
  line-height: 1;
  color: var(--c-rosa-claro);
  font-variant-numeric: tabular-nums;
}

.tira-reloj__bloque:nth-child(even) .tira-reloj__num {
  color: var(--c-cyan);
}

.tira-reloj__lab {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-texto-ter);
}

/* En pantallas angostas el rótulo se queda en "Faltan": la tira tiene que
   entrar en una línea, y quién es el evento ya lo dice la barra de arriba. */
@media (max-width: 719px) {
  .tira-reloj__evento {
    display: none;
  }

  .tira-reloj__inner {
    gap: var(--e-2) var(--e-4);
  }

  .tira-reloj__cifras {
    gap: var(--e-3);
  }
}

/* Hero a dos columnas: texto a la izquierda, figura a la derecha.
   La figura está primero en el HTML porque en móvil abre la sección; las
   grid-areas la reubican a la derecha en escritorio sin tocar el orden del DOM
   (que es también el orden de lectura de un lector de pantalla: foto, texto). */
.hero__grilla {
  display: grid;
  gap: var(--e-4);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__grilla {
    /* La columna de la foto cede ancho en ventanas chicas: si el texto baja de
       ~680px, los dos CTA dejan de entrar en una línea y el hero crece 70px. */
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(220px, 24vw, 340px));
    grid-template-areas: "texto figura";
    gap: var(--e-6);
  }
  .hero__texto {
    grid-area: texto;
  }
  .hero__figura {
    grid-area: figura;
  }
}

/* Lockup del título: "MONOTRIBU" arriba, "EXPERIENCE 2026" abajo. Dos líneas
   y no tres: la tercera costaba casi 50px de alto en un hero que tiene que
   entrar en una pantalla. */
.hero__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25em;
  max-width: none;
  line-height: 0.95;
  margin-bottom: var(--e-2);
}

.hero__titulo-1 {
  flex-basis: 100%;
}

.hero__titulo-2 {
  color: var(--c-rosa);
}

.hero__titulo-3 {
  color: var(--c-cyan);
}

/* El acento manuscrito va con una línea rosa debajo, como en la pieza gráfica */
.hero__firma {
  display: inline-block;
  padding-bottom: var(--e-1);
  border-bottom: 3px solid var(--c-rosa);
  margin-bottom: var(--e-4);
}

/* Dicotomía "hay dos tipos de emprendedores" */
.hero__dicotomia {
  margin-bottom: var(--e-4);
}

.hero__dicotomia-intro {
  color: var(--c-texto-sec);
  margin-bottom: var(--e-3);
}

.hero__dicotomia ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-2);
}

.hero__dicotomia li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: 0;
}

.hero__dicotomia svg {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  padding: 0.3rem;
  border-radius: 999px;
  color: #ffffff;
}

.hero__dicotomia-no svg {
  background: var(--c-rosa);
}

.hero__dicotomia-si svg {
  background: var(--c-cyan);
  color: var(--c-fondo);
}

.hero__dicotomia-cierre {
  margin-top: var(--e-3);
  margin-bottom: 0;
  font-weight: 700;
  color: var(--c-rosa-claro);
}

/* Caja de promesa — el único borde cyan del hero */
.hero__promesa {
  border: 1.5px solid var(--b-cyan);
  border-radius: var(--radio-sm);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-base);
  color: var(--c-texto-sec);
  max-width: 46ch;
  margin-bottom: var(--e-6);
}

.hero__promesa strong {
  display: block;
  color: var(--c-cyan);
}

/* En escritorio entra en una línea sola: es una frase, no un párrafo. */
@media (min-width: 1000px) {
  .hero__promesa {
    max-width: none;
  }
  .hero__promesa strong {
    display: inline;
  }
}

/* Figura del hero: recorte PNG con transparencia sobre el fondo nebulosa.
   Detrás lleva el glow rosa de la marca y abajo se desvanece con una máscara,
   así la silueta no termina en un corte seco.

   El desvanecido es RADIAL, no lineal. Un degradado lineal desvanece por
   bandas horizontales: el ojo lee el arranque de la transparencia como una
   línea recta cruzando la figura, y los bordes laterales del recorte quedan
   duros. El radial apaga la silueta desde un centro, con la frontera curva.

   Las proporciones del óvalo (150% de ancho por 62% de alto) están calculadas
   para que en píxeles sea un CÍRCULO: la caja de la figura tiene la relación
   del recorte (420×1019 ≈ 0.41), así que un radio horizontal 2,4 veces mayor
   que el vertical da los dos radios iguales en px. Y como el radio horizontal
   pasa del 100%, el círculo se extiende por fuera de la imagen: a la altura
   del torso el núcleo opaco cubre todo el ancho y no se ve dónde empieza la
   máscara. */
.hero__figura {
  position: relative;
  justify-self: center;
  align-self: end;
  /* El glow de atrás va con z-index:-1. Sin contexto de apilado propio, ese
     -1 lo manda detrás del fondo del .hero, que es opaco: en escritorio el
     glow directamente no se veía (en móvil sí, de casualidad, porque el
     transform de la banda ya creaba el contexto). isolation lo encierra acá. */
  isolation: isolate;
  --desvanecido: radial-gradient(
    ellipse 150% 62% at 50% 28%,
    #000 0%,
    #000 58%,
    rgb(0 0 0 / 0.93) 68%,
    rgb(0 0 0 / 0.78) 76%,
    rgb(0 0 0 / 0.56) 83%,
    rgb(0 0 0 / 0.32) 89%,
    rgb(0 0 0 / 0.14) 94%,
    rgb(0 0 0 / 0.04) 98%,
    transparent 100%
  );
}

.hero__figura::before {
  content: "";
  position: absolute;
  inset: 8% -14% 6%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgb(244 0 97 / 0.42), transparent);
  filter: blur(30px);
  z-index: -1;
}

/* <picture> es sólo el envoltorio del webp: que no cuente como caja propia. */
.hero__figura picture {
  display: contents;
}

/* La máscara va sobre el <img> y no sobre la figura: si va sobre la figura
   también enmascara el glow, y como el glow se sale de la caja a propósito,
   quedaba a merced del mosaico de la máscara (mask-repeat es 'repeat' por
   defecto) — de ahí los cortes rectos. Enmascarando sólo la imagen, el glow
   queda libre y el desvanecido cae donde tiene que caer. */
.hero__figura img {
  display: block;
  width: auto;
  /* La altura manda: la figura se acomoda a lo que deja libre la pantalla. */
  height: min(64svh, 620px);
  margin-inline: auto;
  /* Seguro contra deformación: si alguna regla de ancho llegara a apretar la
     caja, el recorte se achica manteniendo proporción en vez de estirarse. */
  object-fit: contain;
  -webkit-mask-image: var(--desvanecido);
  mask-image: var(--desvanecido);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Móvil: la figura abre el hero, apenas debajo de la barra, recortada a cara
   y hombros. El recorte es de CSS y no de un archivo aparte: la imagen es la
   misma, sólo se la agranda y se muestra su tercio superior. Con la banda a
   200px, mostrar hasta los hombros (≈32% de la silueta) pide 200/0.32 ≈ 620px
   de alto de imagen. */
@media (max-width: 999px) {
  /* La caja se ciñe a la imagen (no al ancho de la columna) para que los
     porcentajes de la máscara y del glow se midan contra el recorte y no
     contra el viewport: si no, en una tablet el óvalo se estira y el
     desvanecido vuelve a leerse como una línea recta. El corrimiento va acá y
     no en el <img> porque tiene que arrastrar también el glow: la cara cae al
     57% del ancho del recorte y sin esto la banda queda descentrada. */
  .hero__figura {
    width: fit-content;
    margin-inline: auto;
    transform: translateX(-7%);
    margin-bottom: var(--e-2);
  }

  /* 256 × 200: el ancho es el que tiene el recorte cuando mide 620 de alto
     (420 / 1019 × 620 ≈ 256), así que el object-fit no achica nada — sólo tira
     abajo lo que sobra. Recortar con object-fit y no con overflow:hidden es lo
     que deja al glow salirse de la caja sin que lo corte un rectángulo. */
  .hero__figura img {
    width: 256px;
    height: 200px;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
  }

  .hero__figura::before {
    inset: -18% -26% 4%;
  }

  /* Acá la máscara no termina una silueta entera sino un busto: el círculo es
     más chico y se centra en la cara. Los radios vuelven a estar calculados
     para que en px sean iguales (caja de ~255×200). */
  .hero__figura {
    --desvanecido: radial-gradient(
      ellipse 75% 96% at 50% 4%,
      #000 0%,
      #000 66%,
      rgb(0 0 0 / 0.92) 74%,
      rgb(0 0 0 / 0.76) 81%,
      rgb(0 0 0 / 0.54) 87%,
      rgb(0 0 0 / 0.3) 92%,
      rgb(0 0 0 / 0.12) 96%,
      transparent 100%
    );
  }
}

/* Los cuatro pilares, a lo ancho del hero */
.hero__pilares {
  list-style: none;
  padding: var(--e-5) 0 0;
  margin: var(--e-5) 0 0;
  border-top: 1px solid var(--c-borde);
  display: grid;
  gap: var(--e-4) var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.hero__pilares svg {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.45rem;
  border-radius: 999px;
  border: 1.5px solid var(--b-rosa);
  color: var(--c-rosa-claro);
  grid-row: 1 / span 2;
}

.hero__pilares li:nth-child(even) svg {
  border-color: var(--b-cyan);
  color: var(--c-cyan);
}

/* Icono a la izquierda y texto a la derecha: ocupa la mitad de alto que el
   icono apilado sobre el título, que es lo que le sobraba al hero. */
.hero__pilares li {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--e-3);
  align-items: center;
}

.hero__pilar-titulo {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-sm);
  margin-bottom: var(--e-1);
}

.hero__pilares p:last-child {
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
  margin-bottom: 0;
}

/* Compresión del hero por alto de pantalla ─────────────────────────────────
   El hero tiene que entrar completo en un escritorio, y el alto disponible
   varía mucho más que el ancho (una notebook de 1366×768 deja ~700px de
   viewport; un monitor 27" pasa de 1200px).

   Antes esto eran dos escalones con `max-height` que, en el más chico,
   escondían la bajada de los pilares. Ahora la compresión es continua: los
   tokens de tipografía y espaciado se interpolan con `svh`, así que el hero se
   achica de a poco en vez de saltar, y no hay ningún nodo con display:none —
   en la pantalla más baja se ve todo lo que se ve en la más alta, más chico.

   Cada token es clamp(piso, recta en svh, techo original). La recta va del
   piso a los 600px de viewport hasta el techo a los 1000px; fuera de ese rango
   mandan el piso y el techo. Como las variables se heredan, alcanza con
   redefinirlas en .hero: ninguna regla de abajo necesita saber nada de esto.

   La pendiente importa: sumadas, todas las rectas crecen ~0,77px por cada px
   de pantalla. Al ser menor que 1, cuanto más alta la ventana más aire sobra,
   nunca al revés. Con el techo a los 900px la suma pasaba de 1 y aparecía una
   franja fea cerca de los 880px donde el hero volvía a no entrar.

   El bloque va al final de la sección a propósito: pisa reglas de arriba con
   la misma especificidad, así que depende del orden. */
@media (min-width: 1000px) {
  .hero {
    /* min() mantiene el guardia por ancho del título: en ventanas altas pero
       angostas manda el vw, no el svh. */
    --t-3xl: clamp(1.625rem, min(-0.8125rem + 6.5svh, 1.55rem + 2.2vw), 3.25rem);
    --t-xl: clamp(1.125rem, 0.375rem + 2svh, 1.625rem);
    --t-lg: clamp(1rem, 0.625rem + 1svh, 1.25rem);
    --t-base: clamp(0.9375rem, 0.75rem + 0.5svh, 1.0625rem);
    --t-sm: clamp(0.875rem, 0.78125rem + 0.25svh, 0.9375rem);

    --e-6: clamp(0.875rem, -0.8125rem + 4.5svh, 2rem);
    --e-5: clamp(0.5rem, -1rem + 4svh, 1.5rem);
    --e-4: clamp(0.375rem, -0.5625rem + 2.5svh, 1rem);
    --e-3: clamp(0.3125rem, -0.34375rem + 1.75svh, 0.75rem);
    --e-2: clamp(0.3125rem, 0.03125rem + 0.75svh, 0.5rem);
    --e-1: clamp(0.1875rem, 0.09375rem + 0.25svh, 0.25rem);

    /* El cuerpo del hero no hereda el tamaño del body: toma el token ya
       comprimido, y con él bajan todas las líneas de la sección. */
    font-size: var(--t-base);
    /* Interlineado como "tamaño + aire", con el aire interpolado igual que
       todo lo demás. Así el texto se junta en pantallas bajas sin apretarse
       nunca por debajo de ~1,45. */
    line-height: calc(1em + clamp(0.34rem, -0.14rem + 1.28svh, 0.66rem));

    padding-block: var(--e-4);
  }

  /* Los dos tamaños que no salen de un token */
  .acento-manuscrito.hero__firma {
    font-size: clamp(1.6rem, 0.25rem + 3.6svh, 2.5rem);
  }

  .hero__pilares svg {
    width: clamp(1.7rem, 1.1rem + 1.6svh, 2.1rem);
    height: clamp(1.7rem, 1.1rem + 1.6svh, 2.1rem);
  }

  /* El botón puede achicar su padding, pero nunca el área de toque. */
  .hero__acciones .boton {
    padding-block: clamp(0.7rem, 0.4rem + 0.8svh, 0.9rem);
    min-height: 44px;
  }

  /* El respiro más grande de la columna va un escalón más abajo que el resto:
     es el que más alto cuesta y el que menos se nota. */
  .hero__pilares {
    padding-top: var(--e-4);
    margin-top: var(--e-4);
  }

  /* La figura deja de medirse sola. Antes su alto era min(64svh, 620px): una
     regla propia, con su propio ritmo, que hacía que la foto creciera y se
     achicara por su cuenta mientras el resto del hero se mantenía quieto.

     Ahora la grilla se estira a lo que deja libre el hero y la figura ocupa su
     celda entera: la foto mide lo que mide el hueco, ni más ni menos, y sólo
     cambia cuando cambia el hero. De paso, el espacio que liberó la cuenta
     regresiva al mudarse a la tira se lo queda la foto en vez de quedar en
     aire muerto. */
  .hero__grilla {
    flex: 1 1 auto;
  }

  .hero__figura {
    justify-self: stretch;
    align-self: stretch;
  }

  /* La imagen va en position:absolute a propósito: así no aporta alto a la
     fila (si aportara, su alto natural de 1019px mandaría sobre el texto y el
     hero se iría de la pantalla). Conserva width:auto, con lo cual su caja
     sigue siendo exactamente la foto y la máscara circular cae donde tiene que
     caer. El tope de 820px es el alto al que el ancho (820 × 420/1019 ≈ 338)
     todavía entra en la columna de la foto: más que eso se derramaría. */
  .hero__figura img {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    height: min(100%, 820px);
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* Piso de la compresión. Debajo de ~600px de alto de viewport (una ventana
   restaurada chica, una pantalla 1280×720 con toda la barra del navegador) ya
   no hay compresión honesta que alcance: el texto quedaría ilegible. Antes de
   recortar o esconder nada, el hero renuncia a medir una pantalla y crece; se
   scrollea, que es la única salida que no le saca contenido a nadie. */
@media (min-width: 1000px) and (max-height: 599px) {
  .hero {
    min-height: 0;
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   7 bis. Video de presentación — banda a todo el ancho, pegada al hero
   -------------------------------------------------------------------------- */

/* Va sin .contenedor a propósito: es la única pieza de la página que sangra
   hasta el borde de la ventana, y ese corte con el resto (que respira dentro
   de una columna de 1120px) es justamente lo que la hace leer como un trailer
   y no como una ilustración más. Los hilos de arriba y abajo la cierran contra
   el hero sin meter aire entre las dos. */
.video-presentacion {
  position: relative;
  background: var(--c-fondo);
  border-block: 1px solid var(--c-borde);
  line-height: 0; /* mata el hueco del inline-block debajo del <video> */
}

/* El alto lo fija la relación de aspecto del archivo; el tope en svh es para
   que en una notebook baja el video no ocupe la pantalla entera él solo y se
   pierda el resto de la página. Cuando el tope corta, `cover` recorta por los
   costados en lugar de dejar franjas negras. */
.video-presentacion__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 722;
  max-height: 78svh;
  object-fit: cover;
  background: var(--c-fondo-elev);
}

/* Botón de sonido: lo inyecta el JS, arriba a la derecha para no pelearse con
   los controles nativos, que viven abajo. Vidrio esmerilado sobre la imagen
   —el video puede ser claro u oscuro según el plano, y un fondo plano se
   perdería en la mitad de ellos. */
.video-presentacion__sonido {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  border: 1.5px solid var(--b-cyan);
  border-radius: 999px;
  background: rgb(10 10 15 / 0.6);
  backdrop-filter: blur(8px);
  color: var(--c-texto);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.video-presentacion__sonido:hover,
.video-presentacion__sonido:focus-visible {
  background: rgb(10 10 15 / 0.85);
  box-shadow: var(--glow-cyan);
}

.video-presentacion__sonido svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: var(--c-cyan);
}

@media (max-width: 480px) {
  /* En un teléfono el texto del botón se come el ancho del plano: queda el
     icono solo, con el nombre accesible en aria-label. */
  .video-presentacion__sonido span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .video-presentacion__sonido {
    padding: 0.55rem;
    width: 44px;
    justify-content: center;
  }
}

/* Mensaje ancla de la marca — banda de respiro, sin CTA */
.manifiesto {
  text-align: center;
}

.manifiesto__texto {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 auto;
  max-width: 24ch;
}

/* Frases puente — bandas de una línea que respiran entre secciones. Mismo
   recurso que el manifiesto pero más liviano: menos aire vertical y tipografía
   un punto más chica, para que acompañen el scroll sin frenarlo. */
.seccion--puente {
  padding-block: var(--e-7);
}

.manifiesto--puente .manifiesto__texto {
  font-size: var(--t-xl);
  max-width: 36ch;
}

/* Programa del día — cuatro momentos numerados. Tarjetas del mismo material
   que .precio y .duo__col; el número grande es el hilo que convierte cuatro
   charlas en una sola historia con capítulos. */
.momentos {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.momento {
  border-radius: var(--radio);
  padding: var(--e-5);
  border: 1.5px solid var(--c-borde);
  background: var(--s-tarjeta);
}

.momento__numero {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--c-rosa-claro);
  margin-bottom: var(--e-2);
}

.momento__titulo {
  font-size: var(--t-lg);
  font-weight: 700;
  margin-bottom: var(--e-2);
}

.momento p:last-child {
  color: var(--c-texto-sec);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Grillas y tarjetas — borde rosa fino sobre blanco al 4%
   -------------------------------------------------------------------------- */
.grilla {
  display: grid;
  gap: var(--e-5);
}

.grilla--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grilla--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Bloque de texto + foto ─────────────────────────────────────────────────────────
   Bloque de dos columnas con foto. La foto va primera en el HTML porque en
   móvil abre el bloque; en escritorio las grid-areas la mandan a la derecha
   sin tocar el orden de lectura (que es también el de un lector de pantalla).
   Mismo recurso que usa el hero. */
.bloque-foto {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 900px) {
  .bloque-foto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    grid-template-areas: "texto foto";
    gap: var(--e-7);
    /* La foto se estira al alto de la columna de texto en vez de traer un alto
       propio: así las dos columnas cierran parejas a cualquier ancho, sin tener
       que adivinar una proporción que el texto va a desmentir al primer
       cambio de copy. El aspect-ratio de abajo igual se queda, porque es lo que
       la grilla mide para decidir el alto de la fila (si midiera el alto
       natural de la foto, 800px, la fila se estiraría de más). */
    align-items: stretch;
  }
  .bloque-foto__texto {
    grid-area: texto;
  }
  .bloque-foto__foto {
    grid-area: foto;
  }
}

.bloque-foto__texto > :last-child {
  margin-bottom: 0;
}

/* La foto no lleva borde: el que cierra el bloque es el velo, que la disuelve
   contra el fondo del lado que toca al texto. Un borde ahí pelearía con el
   degradado — dibujaría una caja alrededor de algo que justamente se está
   desvaneciendo. */
.bloque-foto__foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  /* El velo es vertical en móvil, donde la foto está ARRIBA del texto y tiene
     que entregarle la lectura hacia abajo. */
  --velo: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.1) 0%,
    rgb(0 0 0 / 0.2) 45%,
    rgb(0 0 0 / 0.55) 78%,
    rgb(0 0 0 / 0.85) 100%
  );
}

.bloque-foto__foto picture {
  display: contents;
}

.bloque-foto__foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.bloque-foto__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--velo);
  pointer-events: none;
}

/* En escritorio la foto está a la DERECHA del texto, así que el velo gira 90°:
   se oscurece hacia la izquierda, que es el lado por donde la columna de texto
   se le acerca. */
@media (min-width: 900px) {
  .bloque-foto__foto {
    --velo: linear-gradient(
      to left,
      rgb(0 0 0 / 0.1) 0%,
      rgb(0 0 0 / 0.2) 45%,
      rgb(0 0 0 / 0.55) 78%,
      rgb(0 0 0 / 0.85) 100%
    );
  }

  .bloque-foto__foto {
    height: 100%;
  }
}

.tarjeta {
  background: var(--s-tarjeta);
  border: 1.5px solid var(--b-rosa);
  border-radius: var(--radio);
  padding: var(--e-5);
}

/* Los números / acentos de tarjetas repetidas alternan rosa y cyan */
.tarjeta__numero {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 900;
  color: var(--c-rosa-claro);
  line-height: 1;
  display: block;
  margin-bottom: var(--e-3);
}

.grilla > .tarjeta:nth-child(even) {
  border-color: var(--b-cyan);
}
.grilla > .tarjeta:nth-child(even) .tarjeta__numero {
  color: var(--c-cyan);
}

.tarjeta h3 {
  margin-bottom: var(--e-2);
}

.tarjeta__promesa {
  color: var(--c-texto);
  font-weight: 600;
  margin-bottom: var(--e-3);
}

.tarjeta__detalle {
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
  margin: 0;
}

.tarjeta__pendiente {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-alerta);
  border: 1px dashed rgb(251 191 36 / 0.5);
  border-radius: 999px;
  padding: var(--e-1) var(--e-3);
  margin-top: var(--e-3);
}

/* Quién dicta el bloque. Va separado del detalle por una línea fina, no por
   una caja: es un pie de tarjeta, no otro dato más de la lista. */
.tarjeta__orador {
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
  border-top: 1px solid var(--c-borde);
  padding-top: var(--e-3);
  margin: var(--e-4) 0 0;
}

.tarjeta__orador strong {
  color: var(--c-texto);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8.b Speakers — figura recortada sobre un gradiente radial de color

   Las tres figuras salen de sus piezas gráficas recortadas al contorno (fondo
   removido con Vision, sin tocar un solo píxel del interior) y normalizadas a
   un lienzo de 640×800 escalando por el alto de la cara: en una fila de
   tarjetas, tres cabezas de tamaños distintos se notan más que cualquier otra
   diferencia.

   Por qué gradiente radial y no tarjeta: los tres visten oscuro sobre un fondo
   casi negro. Un borde los encajonaría; el disco de color los despega del
   fondo, les da un color propio a cada uno y deja que el recorte respire.

   El violeta es la única excepción a la regla de dos acentos del sistema:
   son tres figuras y con rosa y cyan una quedaría repetida.
   -------------------------------------------------------------------------- */
.speakers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.orador {
  --halo: 244 0 97; /* rosa por defecto */
  position: relative;
  text-align: center;
}

.orador--cyan {
  --halo: 41 222 247;
}
.orador--violeta {
  --halo: 150 88 255;
}

.orador__figura {
  position: relative;
  margin-bottom: var(--e-4);
}

/* El disco. Se apaga antes de llegar al borde para que no dibuje un círculo
   duro: lo que tiene que leerse es un halo, no una moneda. */
.orador__figura::before {
  content: "";
  position: absolute;
  inset: -4% -6% 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 44%,
    rgb(var(--halo) / 0.5) 0%,
    rgb(var(--halo) / 0.26) 36%,
    rgb(var(--halo) / 0.07) 60%,
    transparent 75%
  );
}

.orador__figura picture {
  display: contents;
}

/* El recorte ya trae el aire y el degradado inferior horneados en el alfa:
   acá sólo se lo deja ocupar el ancho de la columna. */
.orador__figura img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.orador__nombre {
  font-size: var(--t-xl);
  margin-bottom: var(--e-1);
}

/* Reserva dos líneas siempre: "Contadora pública y especialista en finanzas"
   ocupa dos y los otros dos roles una, y sin esto los tres temas arrancan a
   alturas distintas. */
.orador__rol {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--halo));
  min-height: 2.8em;
  margin-bottom: var(--e-3);
}

.orador__tema {
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
  max-width: 34ch;
  margin: 0 auto;
}

.orador__red {
  font-size: var(--t-sm);
  margin: var(--e-3) 0 0;
}

.orador__red a {
  color: var(--c-texto-ter);
  text-decoration: none;
}

.orador__red a:hover {
  color: rgb(var(--halo));
}

/* En pantallas anchas las tres figuras se acercan: el halo de cada una se
   roza con el de la vecina y la fila lee como una sola banda de color. */
@media (min-width: 900px) {
  .speakers {
    gap: var(--e-4);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .orador__figura img,
  .orador__figura::before {
    transition: transform var(--transicion);
  }
  .orador:hover .orador__figura img {
    transform: translateY(-6px);
  }
  .orador:hover .orador__figura::before {
    transform: scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   9. Tablas
   -------------------------------------------------------------------------- */
.tabla-envoltura {
  overflow-x: auto;
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio);
  margin-bottom: var(--e-5);
  background: var(--s-tarjeta);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 520px;
}

caption {
  caption-side: top;
  text-align: left;
  padding: var(--e-4);
  font-weight: 700;
  color: var(--c-texto);
  background: rgb(255 255 255 / 0.03);
  border-bottom: 1px solid var(--c-borde);
}

th,
td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  border-bottom: 1px solid var(--c-borde);
  vertical-align: top;
}

thead th {
  background: rgb(255 255 255 / 0.03);
  font-weight: 700;
  color: var(--c-texto);
  white-space: nowrap;
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: rgb(255 255 255 / 0.02);
}

td.si {
  color: var(--c-cyan);
  font-weight: 700;
}
td.no {
  color: var(--c-texto-ter);
}

/* --------------------------------------------------------------------------
   10. Precios
   -------------------------------------------------------------------------- */
.precios {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}

.precio {
  position: relative;
  background: var(--s-tarjeta);
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio);
  padding: var(--e-6) var(--e-5);
  display: flex;
  flex-direction: column;
}

.precio--destacado {
  border-color: var(--c-rosa);
  box-shadow: var(--glow-rosa);
}

.precio__cinta {
  position: absolute;
  top: -0.75rem;
  left: var(--e-5);
  background: var(--c-rosa);
  color: #ffffff;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--e-1) var(--e-3);
  border-radius: 999px;
}

.precio__nombre {
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-texto-sec);
  margin-bottom: var(--e-2);
}

.precio__monto {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--e-4);
}

.precio__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-5);
  flex-grow: 1;
}

.precio__lista li {
  position: relative;
  padding-left: 1.6em;
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
}

.precio__lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-cyan);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. Objeciones (para vos / no para vos) — cyan = sí, neutro = no
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.duo__col {
  border-radius: var(--radio);
  padding: var(--e-5);
  border: 1.5px solid var(--c-borde);
  background: var(--s-tarjeta);
}

.duo__col--si {
  background: rgb(41 222 247 / 0.05);
  border-color: var(--b-cyan);
}
.duo__col--no {
  background: rgb(255 255 255 / 0.02);
}

.duo__col h3 {
  font-family: var(--f-texto);
  font-size: var(--t-lg);
  text-transform: none;
}

.duo__col ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq-grupo {
  margin-bottom: var(--e-6);
}

.faq-grupo__titulo {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rosa-claro);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--c-borde);
}

.faq-item {
  border-bottom: 1px solid var(--c-borde);
}

.faq-item summary {
  cursor: pointer;
  padding: var(--e-4) 2.5rem var(--e-4) 0;
  position: relative;
  font-weight: 600;
  font-size: var(--t-lg);
  list-style: none;
  color: var(--c-texto);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--c-rosa-claro);
  transition: transform var(--transicion);
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
  color: var(--c-cyan);
}

.faq-item summary:hover {
  color: var(--c-cyan-claro);
}

.faq-item__respuesta {
  padding-bottom: var(--e-5);
  color: var(--c-texto-sec);
  max-width: var(--ancho-texto);
}

.faq-item__respuesta p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. Prueba social — video vertical + quote cards con glifo de comillas
   -------------------------------------------------------------------------- */

/* En móvil el video abre el bloque y las citas caen debajo. Desde 900px el
   video se queda en una columna angosta a la izquierda —es vertical, 9:16, y
   estirarlo a todo el ancho lo único que hace es empujar las citas fuera de la
   pantalla— y las citas ocupan el resto. */
.prueba-social {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 900px) {
  .prueba-social {
    grid-template-columns: minmax(260px, 320px) 1fr;
    align-items: start;
    gap: var(--e-7);
  }
}

.testimonio-video {
  margin: 0;
  max-width: 320px;
  margin-inline: auto;
}

/* El borde cyan y el glow son los mismos de las tarjetas: el video tiene que
   leerse como una pieza más del sistema, no como un embed pegado. */
.testimonio-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 864;
  background: var(--c-fondo-elev);
  border: 1.5px solid var(--b-cyan);
  border-radius: var(--radio);
  box-shadow: var(--glow-cyan);
  object-fit: cover;
}

.testimonio-video__pie {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
  text-align: center;
}

.testimonio-video__dato {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-xs);
  color: var(--c-texto-ter);
}

.testimonios {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.testimonio {
  background: var(--s-tarjeta);
  border: 1.5px solid var(--b-rosa);
  border-radius: var(--radio);
  padding: var(--e-5);
  margin: 0;
}

.testimonio::before {
  content: "\201C";
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--c-rosa);
  margin-bottom: var(--e-3);
}

.testimonios .testimonio:nth-child(even) {
  border-color: var(--b-cyan);
}
.testimonios .testimonio:nth-child(even)::before {
  color: var(--c-cyan);
}

.testimonio blockquote {
  margin: 0 0 var(--e-4);
  font-size: var(--t-lg);
  line-height: 1.5;
}

.testimonio figcaption {
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
}

.testimonio__autor {
  color: var(--c-texto);
  font-weight: 700;
  display: block;
}

/* Bloque visible sólo mientras falten los assets reales */
.aviso-pendiente {
  background: rgb(251 191 36 / 0.07);
  border: 1px dashed rgb(251 191 36 / 0.45);
  border-radius: var(--radio);
  padding: var(--e-5);
  color: var(--c-alerta);
  font-size: var(--t-sm);
}

.aviso-pendiente strong {
  display: block;
  font-size: var(--t-base);
  margin-bottom: var(--e-2);
}

.aviso-pendiente ul {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   14. Autoridad / bio
   -------------------------------------------------------------------------- */
.bio {
  display: grid;
  gap: var(--e-6);
  align-items: start;
}

@media (min-width: 800px) {
  .bio {
    grid-template-columns: 260px 1fr;
  }
}

.bio__foto {
  border-radius: var(--radio);
  border: 1.5px solid var(--b-rosa);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--c-fondo-elev);
}

.credenciales {
  list-style: none;
  padding: 0;
  margin: var(--e-4) 0 0;
}

.credenciales li {
  position: relative;
  padding-left: 1.6em;
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
}

.credenciales li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--c-cyan);
}

/* --------------------------------------------------------------------------
   15. Mapa / cómo llegar
   -------------------------------------------------------------------------- */
.mapa {
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-fondo-elev);
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   16. CTA fijo en mobile
   -------------------------------------------------------------------------- */
.cta-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--e-3) var(--e-4);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
  background: rgb(10 10 15 / 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-borde);
  transform: translateY(110%);
  transition: transform 240ms ease;
}

.cta-fija[data-visible="true"] {
  transform: translateY(0);
}

.cta-fija__inner {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  max-width: var(--ancho-max);
  margin-inline: auto;
}

.cta-fija__texto {
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
  line-height: 1.3;
  flex: 1;
}

.cta-fija__texto strong {
  display: block;
  color: var(--c-texto);
}

.cta-fija .boton {
  padding: 0.7rem 1.4rem;
  min-height: 46px;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .cta-fija {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   17. Artículos del blog
   El cuerpo editorial mantiene caja de oración (las mayúsculas del display
   son para titulares de marketing, no para lectura larga).
   -------------------------------------------------------------------------- */
.articulo {
  padding-block: var(--e-7) var(--e-8);
}

.articulo h1 {
  text-transform: none;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.articulo__meta {
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
  margin-bottom: var(--e-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
}

.articulo__cuerpo {
  max-width: var(--ancho-texto);
}

.articulo__cuerpo h2 {
  margin-top: var(--e-7);
  font-size: var(--t-xl);
  text-transform: none;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.articulo__cuerpo h3 {
  margin-top: var(--e-5);
  font-size: var(--t-lg);
  font-weight: 700;
}

.articulo__cuerpo table {
  min-width: 0;
}

.articulo__cuerpo blockquote {
  margin: var(--e-5) 0;
  padding: var(--e-4) var(--e-5);
  border: 1.5px solid var(--b-rosa);
  background: var(--s-tarjeta);
  border-radius: var(--radio-sm);
  color: var(--c-texto);
}

.articulo__cuerpo blockquote p:last-child {
  margin-bottom: 0;
}

.fuentes {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--c-borde);
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
}

.fuentes ol {
  padding-left: 1.4em;
}

.actualizado {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cyan);
  background: rgb(41 222 247 / 0.1);
  border-radius: 999px;
  padding: var(--e-1) var(--e-3);
}

/* Bloque de conversión dentro del artículo */
.cta-articulo {
  margin: var(--e-7) 0;
  padding: var(--e-6) var(--e-5);
  background: var(--s-tarjeta);
  border: 1.5px solid var(--b-rosa);
  border-radius: var(--radio);
}

.cta-articulo h3 {
  font-family: var(--f-display);
  margin-bottom: var(--e-2);
}

.cta-articulo p {
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
}

/* Listado de artículos */
.lista-articulos {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  list-style: none;
  padding: 0;
}

.lista-articulos a {
  display: block;
  height: 100%;
  background: var(--s-tarjeta);
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio);
  padding: var(--e-5);
  text-decoration: none;
  color: var(--c-texto);
  transition: border-color var(--transicion), background var(--transicion);
}

.lista-articulos a:hover {
  border-color: var(--b-cyan);
  background: var(--s-tarjeta-hover);
  color: var(--c-texto);
}

.lista-articulos h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--e-2);
  text-transform: none;
}

.lista-articulos p {
  color: var(--c-texto-sec);
  font-size: var(--t-sm);
  margin: 0;
}

/* --------------------------------------------------------------------------
   18. Migas de pan
   -------------------------------------------------------------------------- */
.migas {
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
  padding-block: var(--e-4) 0;
}

.migas ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0;
  margin: 0;
}

.migas li + li::before {
  content: "/";
  margin-right: var(--e-2);
  color: var(--c-texto-ter);
}

.migas a {
  color: var(--c-texto-sec);
}
.migas a:hover {
  color: var(--c-cyan);
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.pie {
  background: var(--c-fondo-alt);
  border-top: 1px solid var(--c-borde);
  padding-block: var(--e-7) var(--e-6);
  font-size: var(--t-sm);
  color: var(--c-texto-sec);
}

.pie__grilla {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-bottom: var(--e-6);
}

.pie h4 {
  color: var(--c-texto);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}

.pie ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pie a {
  color: var(--c-texto-sec);
  text-decoration: none;
}
.pie a:hover {
  color: var(--c-cyan);
}

.pie__legal {
  border-top: 1px solid var(--c-borde);
  padding-top: var(--e-5);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--c-texto-ter);
}

/* --------------------------------------------------------------------------
   20. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .cabecera,
  .cta-fija,
  .hero__acciones {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}