/* ==========================================================================
   EonLifeX - Identidad de las paginas publicas (Brand OS v2.0)
   --------------------------------------------------------------------------
   POR QUE EXISTE ESTE ARCHIVO

   Los tokens del Brand OS ya vivian en el repo (css/eon_ds_tokens.css) y el
   <body> de eon_base.html ya lleva `.eon-ds`, pero ninguna pagina publica los
   consumia: el aspecto seguia saliendo de home.css (4,377 lineas), style.css y
   las hojas por pagina, escritas antes del manual. Resultado: tokens correctos,
   pantallas que no se parecian a la marca.

   Este archivo es el puente. Toma el vocabulario de clases que YA comparten las
   89 plantillas que extienden eon_base.html -`.section-title`, `.title-gradient`,
   `.cta-button`, `.content-box`, `.section-eyebrow`...- y les aplica la forma,
   la tipografia, el color y el ritmo del manual.

   TRES REGLAS QUE NO SE ROMPEN

   1. Es ADITIVO. Todo cuelga de `.eon-ds`, igual que el resto del sistema. Una
      pagina sin la clase se ve exactamente como antes.
   2. No declara clases `.eds-*` nuevas. Las primitivas del sistema viven en
      eon_ui.css; aqui solo se re-viste lo legacy.
   3. Se carga DESPUES del bloque de estilos por pagina en eon_base.html. Ese
      orden es toda su fuerza: el archivo no usa NI UN SOLO `!important`. Si
      alguien mueve el <link> mas arriba, la pagina no truena -vuelve al aspecto
      anterior-, que es justo el fallo silencioso que hay que vigilar.

      El corolario incomodo esta en la seccion 9: esta capa tambien le gana a
      las media queries que cada pagina ya tenia. Todo valor que se fije aqui
      con un numero -y no con clamp()- deshace el movil que alguien ya ajusto.

   COMO SE DECIDIO QUE ARREGLAR
   ----------------------------
   Midiendo en el navegador, no leyendo CSS. La seccion 8 documenta el censo de
   `border-radius` computado -14 valores distintos en /plan- y el comando para
   repetirlo. Varias de esas desviaciones no estan escritas en ninguna hoja: se
   heredan o las pone Bootstrap, y leyendo el codigo no aparecen.

   Fuente: design_handoff_eonlifex_design_system/README.md y docs/design_system.md
   ========================================================================== */


/* ==========================================================================
   1 - TIPOGRAFIA
   El manual reserva MuseoModerno para titulos hero, nombre de marca y metricas.
   Montserrat sostiene el cuerpo. Antes los titulos salian en Montserrat 800:
   pesados, pero sin la voz de la marca.
   ========================================================================== */

.eon-ds .hero-section h1,
.eon-ds .hero-copy h1,
.eon-ds .section-title,
.eon-ds .hero-title {
  font-family: var(--eds-font-display);
  font-weight: 700;
  letter-spacing: var(--eds-ls-hero);
  text-wrap: balance;
}

/* Hero: la escala del manual. clamp() sostiene movil sin media queries. */
.eon-ds .hero-section h1,
.eon-ds .hero-copy h1 {
  font-size: var(--eds-fs-hero);
  line-height: var(--eds-lh-hero);
  margin-bottom: var(--eds-space-3);
}

.eon-ds .section-title {
  font-size: var(--eds-fs-h1);
  line-height: var(--eds-lh-title);
  letter-spacing: -0.02em;
  margin-bottom: var(--eds-space-2);
}

/* Home: el antetitulo y el titulo son filas distintas, no dos inline vecinos.
   El scope evita cambiar cabeceras editoriales de otras paginas publicas. */
.eon-ds .home-page .section-title {
  display: block;
}

.eon-ds .home-page .section-eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
}

/* Cuerpo: 56ch es la medida del manual. Mas ancho y el ojo pierde el renglon;
   `pretty` evita la palabra huerfana al final del parrafo. */
.eon-ds .section-subtitle,
.eon-ds .hero-section .lead,
.eon-ds .hero-copy .lead {
  font-family: var(--eds-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--eds-lh-body);
  color: var(--ink-2);
  max-width: 56ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* Eyebrow: 11px / .16em / mayusculas / acento. Es el mismo gesto en las ocho
   secciones, y es lo que hace que la pagina se lea como un sistema. */
.eon-ds .section-eyebrow {
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-micro);
  font-weight: 700;
  letter-spacing: var(--eds-ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--eds-space-1);
  margin-bottom: var(--eds-space-2);
}

.eon-ds .section-eyebrow i {
  font-size: 14px;
  color: inherit;
}

/* Metricas y contadores en MuseoModerno: el manual los trata como display. */
.eon-ds .counter-value,
.eon-ds .metric-value,
.eon-ds .stat-value {
  font-family: var(--eds-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}


/* ==========================================================================
   2 - EL DEGRADADO DE TITULO
   --------------------------------------------------------------------------
   Antes: seis paradas -verde, aqua, azul, morado, oro, verde- barriendose en
   bucle de 11 s. Se veia como un banner, no como una marca, y el morado #6d5bd3
   ni siquiera esta en la paleta.

   Ahora: el degradado del manual, quieto. Tres paradas, 100deg.
   ========================================================================== */

.eon-ds .title-gradient {
  background: linear-gradient(
    100deg,
    var(--eds-blue-lt) 0%,
    var(--accent) 50%,
    var(--accent-lt) 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
  animation: none;
}

/* La misma identidad, con tinta clara sobre el lienzo nocturno del Home. */
[data-theme="dark"] .eon-home .home-page .title-gradient {
  background-image: linear-gradient(100deg, #b4b2e4 0%, var(--accent-lt) 100%);
}

[data-theme="dark"] .eon-home .eon-brand-logo {
  filter: brightness(0) invert(1);
}


/* ==========================================================================
   3 - FORMA
   --------------------------------------------------------------------------
   Invariante del manual: UN radio para panel, tarjeta, boton e input (33px), y
   `--r-pill` solo para chips y conmutadores. El repo tenia 50px en botones,
   20px en tarjetas y 12px en otras: tres radios distintos en la misma pantalla.
   ========================================================================== */

.eon-ds .content-box,
.eon-ds .route-card,
.eon-ds .brand-card,
.eon-ds .universe-card,
.eon-ds .purpose-card,
.eon-ds .counter-card,
.eon-ds .faq-card,
.eon-ds .image-card,
.eon-ds .home-editorial-card,
.eon-ds .eonx-preview-card,
.eon-ds .home-feature-panel {
  border-radius: var(--eds-r);
}

.eon-ds .hero-badge,
.eon-ds .feature-pill,
.eon-ds .route-kicker,
.eon-ds .route-fit-tags span,
.eon-ds .value-item {
  border-radius: var(--eds-r-pill);
}

/* Tarjetas: superficie, linea y sombra del tema.
   ---------------------------------------------------------------------------
   `.universe-card` NO esta en esta lista, y la razon merece quedar escrita.

   Una primera version le daba `var(--panel-2)` a las seis familias por igual.
   Pero home.css la habia disenado OSCURA a proposito -`background:
   rgba(6, 16, 37, .85)` con `color: #f4f7f9`-, asi que la receta la pinto
   blanca y su texto claro se quedo claro: cuatro parrafos de "Ciencia simple"
   en blanco sobre blanco, invisibles en modo claro.

   Se detecto midiendo contraste, no mirando: un texto invisible no llama la
   atencion en una captura, porque no hay nada que ver.

   LA LECCION: antes de darle una superficie comun a una familia de tarjetas,
   comprobar que TODAS querian la misma. Aqui cinco eran claras (`rgba(255,
   255, 255, .92)`) y una era oscura.

       for c in route-card brand-card universe-card purpose-card ...; do
         grep -A6 "^\s*\.$c {" app/static/home.css | grep -m1 background
       done
   --------------------------------------------------------------------------- */
.eon-ds .route-card,
.eon-ds .brand-card,
.eon-ds .purpose-card,
.eon-ds .counter-card,
.eon-ds .home-editorial-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition:
    transform var(--eds-dur-2) var(--eds-ease-bounce),
    box-shadow var(--eds-dur-2) var(--eds-ease-bounce),
    border-color var(--eds-dur-1) var(--eds-ease-1);
}

.eon-ds .route-card:hover,
.eon-ds .brand-card:hover,
.eon-ds .universe-card:hover,
.eon-ds .purpose-card:hover,
.eon-ds .counter-card:hover,
.eon-ds .home-editorial-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
  box-shadow: var(--glow), var(--shadow);
}

/* Titulos de tarjeta: h3 del manual -Montserrat 600 / 20px-, no display. */
.eon-ds .route-card h3,
.eon-ds .brand-card h3,
.eon-ds .universe-card h3,
.eon-ds .purpose-card h3 {
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* El color va aparte, y `.universe-card` queda fuera por la misma razon que
   arriba: su tarjeta es oscura, asi que `var(--ink)` -azul marino en tema
   claro- la dejaba con el titulo ilegible. home.css ya le da `#ffffff`. */
.eon-ds .route-card h3,
.eon-ds .brand-card h3,
.eon-ds .purpose-card h3 {
  color: var(--ink);
}


/* ==========================================================================
   4 - CONTROLES
   Alturas del manual: 52 / 44 / 34. El CTA publico es grande.
   ========================================================================== */

.eon-ds .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eds-space-1);
  min-height: var(--eds-h-lg);
  /* El relleno es elastico, no fijo. Con 32px fijos esta regla le ganaba por
     orden de carga a la que home.css ya tenia para movil, y en 375px los dos
     CTA del hero partian su texto en tres renglones. */
  padding: 0 clamp(var(--eds-space-2), 4vw, var(--eds-space-4));
  border-radius: var(--eds-r);
  font-family: var(--eds-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  background: var(--accent);
  color: var(--eds-white);
  border: 1px solid transparent;
  box-shadow: var(--glow);
  text-decoration: none;
  transition:
    transform var(--eds-dur-1) var(--eds-ease-1),
    box-shadow var(--eds-dur-1) var(--eds-ease-1),
    background-color var(--eds-dur-1) var(--eds-ease-1);
}

.eon-ds .cta-button:hover {
  transform: translateY(-3px);
  background: var(--accent);
  color: var(--eds-white);
  box-shadow:
    0 18px 38px -14px color-mix(in oklab, var(--accent) 72%, transparent),
    var(--shadow);
}

/* El manual pide feedback tactil en el click, no solo en el hover. */
.eon-ds .cta-button:active {
  transform: scale(0.97);
}

.eon-ds .cta-button.secondary {
  background: transparent;
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  box-shadow: none;
}

.eon-ds .cta-button.secondary:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

.eon-ds .cta-button.tertiary {
  background: var(--panel-2);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}

.eon-ds .cta-button.tertiary:hover {
  background: var(--surface-2);
  color: var(--accent);
  border-color: var(--accent);
}

/* Foco visible: el degradado de texto borra el contorno por defecto en los
   enlaces del hero, asi que se declara uno propio. */
.eon-ds .cta-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ==========================================================================
   5 - PILDORAS Y ETIQUETAS
   ========================================================================== */

.eon-ds .hero-badge,
.eon-ds .feature-pill {
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-caption);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--eds-space-1) var(--eds-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--eds-space-1);
  min-height: var(--eds-h-sm);
  transition: border-color var(--eds-dur-1) var(--eds-ease-1);
}

.eon-ds .hero-badge:hover,
.eon-ds .feature-pill:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}

.eon-ds .route-kicker,
.eon-ds .route-fit-tags span {
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ==========================================================================
   6 - RITMO VERTICAL
   Rejilla de 8px. Las secciones publicas usaban clamp() sueltos, cada una con
   su numero; esto las alinea sin tocar el layout interno de ninguna.
   ========================================================================== */

.eon-ds .section {
  padding-block: clamp(var(--eds-space-8), 7vw, var(--eds-space-10));
}

.eon-ds .hero-section {
  padding-block: clamp(var(--eds-space-10), 9vw, 104px);
}


/* ==========================================================================
   7 - LAS FAMILIAS POR PAGINA
   --------------------------------------------------------------------------
   Cada pagina publica trajo su propio prefijo -`plan-`, `values-`, `join-`,
   `esg-`, `opp-`, `landing-`, `faq-`, `contact-`, `incentives-`, `bm-`, `s3d-`-
   y dentro de cada uno se repite el mismo puñado de piezas: una tarjeta, un
   kicker, un titulo, un boton, una pildora.

   Doce vocabularios distintos para cinco componentes. Por eso dos paginas
   publicas contiguas no se parecian entre si aunque ambas fueran EonLifeX.

   Aqui NO se renombra nada -romperia el JS y el CSS de cada pagina-. Se las
   enumera y se les da la misma forma, el mismo radio y la misma tipografia.
   Es una lista larga a proposito: un selector generico tipo [class*="-card"]
   alcanzaria tambien a `.credit-card` o `.card-header` y repintaria cosas que
   nadie pidio.
   ========================================================================== */

/* --- Tarjetas --- */
.eon-ds .plan-example-card,
.eon-ds .plan-matrix-panel,
.eon-ds .values-card,
.eon-ds .join-card,
.eon-ds .join-panel,
.eon-ds .esg-card,
.eon-ds .esg-hero-card,
.eon-ds .opp-card,
.eon-ds .opp-intent-card,
.eon-ds .opp-process-card,
.eon-ds .opp-visual-card,
.eon-ds .landing-card,
.eon-ds .landing-panel,
.eon-ds .faq-card,
.eon-ds .contact-card,
.eon-ds .incentives-family-card,
.eon-ds .incentives-reward-card,
.eon-ds .bm-card,
.eon-ds .bm-landing-card,
.eon-ds .bm-rank-card,
.eon-ds .bm-type-card,
.eon-ds .s3d-comm-card,
.eon-ds .s3d-proto-card,
.eon-ds .s3d-rank-card,
.eon-ds .philosophy-card,
.eon-ds .health-action-card,
.eon-ds .mission-vision-card {
  border-radius: var(--eds-r);
}

/* --- Kickers y eyebrows --- */
.eon-ds .plan-kicker,
.eon-ds .values-kicker,
.eon-ds .join-kicker,
.eon-ds .incentives-kicker {
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-micro);
  font-weight: 700;
  letter-spacing: var(--eds-ls-eyebrow);
  text-transform: uppercase;
}

/* --- Titulos de seccion --- */
.eon-ds .opp-section-title,
.eon-ds .opp-title,
.eon-ds .esg-title,
.eon-ds .faq-title,
.eon-ds .faq-block-title,
.eon-ds .contact-title,
.eon-ds .join-title,
.eon-ds .incentives-title,
.eon-ds .bm-section__title,
.eon-ds .bm-hero__title,
.eon-ds .s3d-section__title,
.eon-ds .s3d-hero__title,
.eon-ds .landing-title-gradient {
  font-family: var(--eds-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* --- Botones --- */
.eon-ds .plan-btn,
.eon-ds .values-btn,
.eon-ds .join-btn,
.eon-ds .opp-btn,
.eon-ds .landing-btn,
.eon-ds .faq-cta-btn,
.eon-ds .incentives-btn,
.eon-ds .bm-btn,
.eon-ds .s3d-btn {
  border-radius: var(--eds-r);
  min-height: var(--eds-h-md);
  font-family: var(--eds-font-body);
  font-weight: 600;
  transition:
    transform var(--eds-dur-1) var(--eds-ease-1),
    box-shadow var(--eds-dur-1) var(--eds-ease-1);
}

.eon-ds .plan-btn:hover,
.eon-ds .values-btn:hover,
.eon-ds .join-btn:hover,
.eon-ds .opp-btn:hover,
.eon-ds .landing-btn:hover,
.eon-ds .faq-cta-btn:hover,
.eon-ds .incentives-btn:hover,
.eon-ds .bm-btn:hover,
.eon-ds .s3d-btn:hover {
  transform: translateY(-3px);
}

.eon-ds .plan-btn:active,
.eon-ds .values-btn:active,
.eon-ds .join-btn:active,
.eon-ds .opp-btn:active,
.eon-ds .landing-btn:active,
.eon-ds .faq-cta-btn:active,
.eon-ds .incentives-btn:active,
.eon-ds .bm-btn:active,
.eon-ds .s3d-btn:active {
  transform: scale(0.97);
}

/* --- Pildoras y chips --- */
.eon-ds .landing-pill,
.eon-ds .faq-pill,
.eon-ds .esg-pill,
.eon-ds .contact-pill,
.eon-ds .bm-pill,
.eon-ds .s3d-pill,
.eon-ds .incentives-chip,
.eon-ds .concept-chip {
  border-radius: var(--eds-r-pill);
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-caption);
  font-weight: 500;
}

/* --- Subtitulos --- */
.eon-ds .esg-subtitle,
.eon-ds .faq-subtitle,
.eon-ds .faq-block-subtitle,
.eon-ds .contact-subtitle {
  font-family: var(--eds-font-body);
  line-height: var(--eds-lh-body);
  text-wrap: pretty;
}


/* ==========================================================================
   8 - EL RADIO UNICO
   --------------------------------------------------------------------------
   La seccion 3 puso el radio del manual donde las clases eran compartidas. Al
   medirlo en el navegador aparecio el resto, y el numero es el hallazgo:

     /plan            14 radios distintos en una sola pantalla
                      (8, 11, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 32px)
     /contacto        11
     /eonxperience    10

   El manual pide UNO (33px) para panel, tarjeta, boton e input, mas `--r-pill`
   para chips y conmutadores. Esa diferencia no se nota mirando una pantalla
   -nadie ve que 22 no es 24-, se nota al pasar de una pagina a otra: es la
   razon principal por la que dos paginas publicas contiguas no se sentian la
   misma marca.

   ESTA LISTA SALIO DE MEDIR, NO DE LEER EL CSS. Se recorrio cada pagina en el
   navegador preguntando el `border-radius` COMPUTADO de cada elemento con
   fondo o borde. Leer las hojas no habria servido: varios de estos valores no
   estan escritos en ninguna parte, se heredan o los pone Bootstrap.

   Para repetir el censo y comprobar que sigue en cero:

     document.querySelectorAll('*').forEach(el => {
       const cs = getComputedStyle(el), r = cs.borderTopLeftRadius;
       if (['0px','999px','33px','50%','9999px','980px'].includes(r)) return;
       if (cs.backgroundColor === 'rgba(0, 0, 0, 0)' && cs.borderTopWidth === '0px') return;
       console.log(r, el.className || el.tagName);
     });

   LO QUE SE DEJO FUERA, A PROPOSITO
   - `th` y celdas de tabla: 33px en un encabezado de tabla se ve roto.
   - Los azulejos de icono (`.esg-card-icon`, `.faq-block-icon`,
     `.contact-card-icon`): el manual les da su propio radio proporcional al
     lado (28px sobre 84px en las insignias de rango), no el del panel.
   - `.contact-captcha__preview` y `__checkbox`: imitan la caja de Google a
     proposito. Redondearlas rompe el parecido, que es justo su funcion.
   - LA BARRA DE NAVEGACION Y EL CTA PEGAJOSO. Esto merece parrafo aparte.

   EL NAV Y EL STICKY NO SON DESVIACIONES, Y TOCARLOS ERA CODIGO MUERTO

   Una primera version de esta seccion incluia `.public-nav__shell` (medido en
   22px) y `.public-sticky-cta` (14px). Las dos medidas eran falsas:

   - El 22px del nav es su radio de MOVIL. La medicion se habia tomado con el
     panel del navegador angosto, no a 1440px. A ancho de escritorio el nav ya
     es `999px` -una pildora- y los conmutadores de idioma y tema son `50%`
     -circulos-. Estaba bien desde el principio.
   - El CTA pegajoso es `display: none` en escritorio. La regla de aqui se
     aplicaba solo donde el elemento no se ve, y perdia donde si se ve, porque
     `body[data-public-sticky-cta='true'] .public-sticky-cta` (0,2,1) le gana a
     `.eon-ds .public-sticky-cta` (0,2,0).

   Ademas el nav se estiliza con `#main-nav .public-nav__shell`, y un ID (1,1,0)
   le gana a esta capa entera. Una regla que nunca aplica es peor que ninguna:
   parece que el tema esta cubierto y no lo esta.

   MORALEJA PARA LA PROXIMA MEDICION: fijar el ancho del viewport ANTES de
   medir. Un censo tomado al ancho que tuviera el panel mezcla los valores de
   movil con los de escritorio y manda a "arreglar" cosas que estan bien.
   ========================================================================== */

/* --- Chrome compartido: se ve en las 89 paginas --- */
.eon-ds .eon-consent-banner,
.eon-ds .eon-brand-shell,
.eon-ds .footer-column,
.eon-ds .footer-link-group,
.eon-ds .footer-conversation,
.eon-ds .lead-modal__card,
.eon-ds .lead-modal__data-use,
.eon-ds .lead-modal__field input,
.eon-ds .lead-modal__field select,
.eon-ds .lead-modal__field textarea {
  border-radius: var(--eds-r);
}

/* Chips y pasos: pildora, no panel. */
.eon-ds .lead-modal__next span,
.eon-ds .trust-item {
  border-radius: var(--eds-r-pill);
}

/* --- Portada --- */
.eon-ds .home-promo-ribbon__shell,
.eon-ds .route-decision-strip,
.eon-ds .home-disclaimer,
.eon-ds .route-links a,
.eon-ds .quick-plan li {
  border-radius: var(--eds-r);
}

/* --- Plan 3x10 --- */
.eon-ds .plan-visual,
.eon-ds .plan-visual__grid article,
.eon-ds .plan-fast,
.eon-ds .plan-fast__steps article,
.eon-ds .plan-reading-path,
.eon-ds .plan-reading-step,
.eon-ds .plan-summary article,
.eon-ds .plan-path,
.eon-ds .plan-bonuses article,
.eon-ds .plan-example-card__panel article,
.eon-ds .plan-levels article,
.eon-ds .plan-matrix-diagram,
.eon-ds .plan-matrix-note,
.eon-ds .plan-rank-card,
.eon-ds .plan-final {
  border-radius: var(--eds-r);
}

/* --- Quienes somos --- */
/* Estas cinco no salieron en el primer censo: se tomo con el panel del
   navegador angosto y quedaban fuera de vista. Segunda leccion del mismo
   error -medir sin fijar el ancho-. `.cert-logo` se deja: es un azulejo de
   logotipo, misma excepcion que los azulejos de icono. */
.eon-ds .philosophy-highlight,
.eon-ds .dna-showcase,
.eon-ds .certifications-panel,
.eon-ds .cert-card {
  border-radius: var(--eds-r);
}

/* --- Valores --- */
.eon-ds .values-photo,
.eon-ds .values-manifest,
.eon-ds .values-manifest article,
.eon-ds .values-code article,
.eon-ds .values-final {
  border-radius: var(--eds-r);
}

/* --- Sostenibilidad (ESG) --- */
.eon-ds .esg-pillar,
.eon-ds .esg-statement,
.eon-ds .esg-note,
.eon-ds .esg-cta {
  border-radius: var(--eds-r);
}

/* --- Contacto --- */
.eon-ds .contact-direct-email,
.eon-ds .contact-media-badge,
.eon-ds .contact-note,
.eon-ds .contact-form,
.eon-ds .contact-list-item,
.eon-ds .contact-cta,
.eon-ds .contact-captcha,
.eon-ds .contact-form input,
.eon-ds .contact-field input,
.eon-ds .contact-field select,
.eon-ds .contact-field textarea {
  border-radius: var(--eds-r);
}

/* --- Preguntas frecuentes --- */
.eon-ds .faq-nav {
  border-radius: var(--eds-r);
}

/* --- Unete --- */
.eon-ds .join-score article {
  border-radius: var(--eds-r);
}

/* --- EonXperience / incentivos --- */
.eon-ds .incentives-photo,
.eon-ds .incentives-caption,
.eon-ds .incentives-prize,
.eon-ds .incentives-info,
.eon-ds .incentives-list li,
.eon-ds .incentives-note,
.eon-ds .incentives-fit__intro,
.eon-ds .incentives-fit__card,
.eon-ds .incentives-final {
  border-radius: var(--eds-r);
}


/* ==========================================================================
   8c - LA HOJITA ABRE LA PORTADA
   --------------------------------------------------------------------------
   El sprite del isotipo, las clases `.eds-hoja` y los cuarenta @keyframes
   `eon-*` estaban en el repo desde que se implanto el sistema... y no se usaban
   en NINGUNA pagina publica. Solo aparecian en la pagina de demostracion del
   propio sistema. La marca sobre la que esta construido todo el manual no
   estaba en el sitio.

   Aqui entra, centrada sobre el logotipo, con la coreografia del handoff
   (seccion 01):

     1. el contorno se traza          eon-hojaDraw   2.4 s
     2. el relleno degradado aparece  eon-hojaFillIn 3.4 s (arranca al 42%)
     3. detras, un halo que respira   eon-hojaBreath 5 s, en bucle

   El trazo funciona porque el contorno mide exactamente 1140 unidades
   -`--eds-hoja-length`-: ese numero es lo que permite animar `stroke-dashoffset`
   de 1140 a 0. Si alguien reemplaza el path, hay que volver a medirlo o la
   animacion arranca por la mitad.

   Las dos capas van en la MISMA rejilla de una celda, no con `position:
   absolute`: asi el bloque reserva su altura y el titular de abajo no salta
   cuando la animacion empieza.
   ========================================================================== */

.eon-ds .hero-hoja {
  display: grid;
  grid-template-areas: "hoja";
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  place-content: center;
  width: clamp(56px, 6vw, 80px);
  aspect-ratio: 1;
  margin: 0 auto var(--eds-space-3);
}

.eon-ds .hero-hoja > * {
  grid-area: hoja;
}

.eon-ds .hero-hoja .eds-hoja {
  width: 100%;
  height: 100%;
}

/* El contorno: se traza una vez y se queda. */
.eon-ds .hero-hoja__linea {
  color: var(--accent);
  stroke-dasharray: var(--eds-hoja-length);
  animation: eon-hojaDraw 2400ms var(--eds-ease-hoja) both;
}

/* El relleno entra despues, ya trazado el contorno. */
.eon-ds .hero-hoja__relleno {
  animation: eon-hojaFillIn 3400ms var(--eds-ease-2) both;
}

/* El halo respira detras, en bucle lento. */
.eon-ds .hero-hoja__halo {
  width: 150%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--accent) 22%, transparent) 0%,
    transparent 68%
  );
  animation: eon-hojaBreath 5s var(--eds-ease-1) infinite;
}

/* Una animacion de apertura que no se puede detener es justo lo que
   `prefers-reduced-motion` viene a evitar. La hoja se queda puesta, rellena. */
@media (prefers-reduced-motion: reduce) {
  .eon-ds .hero-hoja__linea,
  .eon-ds .hero-hoja__relleno,
  .eon-ds .hero-hoja__halo {
    animation: none;
  }
  .eon-ds .hero-hoja__linea {
    stroke-dashoffset: 0;
  }
}


/* ==========================================================================
   8d - EL RITMO DEL HERO
   --------------------------------------------------------------------------
   El hero apilaba siete bloques -hojita, logotipo, titular, posicionamiento,
   parrafo, cinco pildoras y dos botones- con los margenes que cada uno traia
   de su propia regla. El resultado se sentia apretado arriba y suelto abajo.

   Se ordenan todos sobre la rejilla de 8 px del manual, de mayor a menor
   respiro segun la jerarquia: el titular manda, el parrafo acompana y las
   pildoras son un apoyo.
   ========================================================================== */

.eon-ds .hero-copy .eon-brand-logo {
  margin-bottom: var(--eds-space-2);
}

.eon-ds .hero-copy .hero-positioning {
  margin-top: var(--eds-space-2);
  margin-bottom: var(--eds-space-2);
}

.eon-ds .hero-copy .lead {
  margin-top: 0;
  margin-bottom: var(--eds-space-4);
}

/* Las pildoras salen de la columna de lectura.
   ---------------------------------------------------------------------------
   Medido a 1440px: las cinco pildoras piden 795px y `.hero-copy` mide 664
   -esta capado a 720px para que el parrafo conserve su medida de lectura-. El
   sobrante partia la fila en 4+1, con una pildora huerfana debajo.

   La solucion no es apretarlas: ni con el relleno al minimo bajan de 700px. Es
   que NO necesitan la medida de lectura. Un parrafo se lee en renglones y por
   eso se limita a 56ch; una tira de etiquetas se barre de un vistazo y puede
   ocupar mas ancho. Asi que la tira sale de la columna y se centra sola.

   `width: min()` con el ancho de la ventana evita que se desborde en pantallas
   angostas, donde vuelve a partirse en varias filas, que ahi si es correcto. */
.eon-ds .hero-badges {
  --tira: min(840px, 100vw - var(--eds-space-4));
  width: var(--tira);
  max-width: none;
  /* `margin-inline: auto` NO centra un hijo mas ancho que su padre: los margenes
     automaticos se resuelven a cero y el sobrante se va todo a la derecha.
     Medido: 88px de desvio. El margen negativo simetrico si lo centra -la mitad
     del sobrante a cada lado- y no usa `transform`, que se llevaria por delante
     el contorno de foco de las pildoras. */
  margin-inline: calc(50% - var(--tira) / 2);
  margin-bottom: var(--eds-space-4);
  gap: var(--eds-space-1);
}

.eon-ds .hero-actions {
  margin-top: 0;
  gap: var(--eds-space-2);
}

.eon-ds .home-page .hero-copy .hero-badges {
  justify-content: center;
}

.eon-ds .home-page .hero-hoja,
.eon-ds .home-page .hero-copy .eon-brand-logo {
  margin-bottom: var(--eds-space-1);
}

.eon-ds .home-page .hero-copy .lead {
  margin-bottom: var(--eds-space-2);
}


/* ==========================================================================
   8e - LA ESCALA DE TEXTO, MEDIDA
   --------------------------------------------------------------------------
   La jerarquia semantica de la portada esta bien: un solo <h1>, treinta
   encabezados y CERO saltos de nivel (nunca se pasa de h1 a h3). Eso no habia
   que arreglarlo.

   Lo que si estaba roto es la escala visual. Medida en el navegador:

     h3          27px y 20px      dos tamanos para el mismo nivel
     parrafo     13/15/16/17/18/19px   SEIS tamanos

   Seis tamanos de parrafo no es una escala, es el rastro de que cada seccion
   se ajusto por separado. Y el ojo lo nota aunque nadie sepa decir por que:
   dos tarjetas contiguas con 15 y 18 no se leen como pares.

   El manual define dos tamanos de cuerpo -`text/body` 16px y `text/caption`
   13px- mas el parrafo de entrada a 18px que pide el handoff para hero y
   subtitulo de seccion. Tres papeles, tres tamanos:

     18px   entrada      .lead, .section-subtitle        (ya estaba)
     16px   cuerpo       texto dentro de tarjeta
     13px   al pie       descargos y notas

   TODO VA POR TOKEN, NO POR NUMERO. Este repo tiene la perilla de AIRE de
   eon_ds_overrides.css encendida desde el 2026-08-09 -con autorizacion
   escrita- y eso mueve la escala de espacio (16->18, 24->28, 32->36). Escribir
   numeros aqui la dejaria fuera de esa perilla; escribir tokens la deja
   seguirla sola. Misma razon para el tamano de letra.

   Para repetir la medicion:

     const m={};document.querySelectorAll('main p').forEach(p=>{
       const px=Math.round(parseFloat(getComputedStyle(p).fontSize));
       m[px]=(m[px]||0)+1;});  console.table(m)
   ========================================================================== */

/* --- Cuerpo de tarjeta: uno solo --- */
.eon-ds .route-card p,
.eon-ds .brand-card p,
.eon-ds .universe-card p,
.eon-ds .purpose-card p,
.eon-ds .faq-card p,
.eon-ds .counter-label,
.eon-ds .home-editorial-card__body p,
.eon-ds .route-decision-strip__copy p {
  font-size: var(--eds-fs-body);
  line-height: var(--eds-lh-body);
}

/* `#vision-mision` viste sus tarjetas con selectores de ID, asi que hay que
   igualar el ID o la regla de arriba no llega. Es la misma familia de problema
   que la seccion 8: un `#id` (1,1,0) le gana a toda esta capa (0,3,0). */
.eon-ds #vision-mision .purpose-card p {
  font-size: var(--eds-fs-body);
  line-height: var(--eds-lh-body);
}

.eon-ds #vision-mision .purpose-card h3 {
  font-size: var(--eds-fs-h3);
}

/* --- Notas al pie: el tamano de caption del manual --- */
.eon-ds .home-disclaimer,
.eon-ds .eds-descargo-ingresos {
  font-size: var(--eds-fs-caption);
  line-height: 1.6;
}

/* --- La linea de posicionamiento del hero --- */
/* Estaba en 19px: un valor huerfano, ni cuerpo ni titulo. Sube al tamano de h3
   del manual y se apoya en el PESO -no en el tamano- para separarse del
   parrafo que lleva debajo. */
.eon-ds .hero-positioning {
  font-size: var(--eds-fs-h3);
  line-height: 1.35;
}


/* ==========================================================================
   8f - LAS TRES COSAS QUE HACIAN QUE LA PORTADA NO PARECIERA UN SISTEMA
   --------------------------------------------------------------------------
   Medido en el navegador a 1440 px, con la portada ya migrada a Phosphor y
   con una sola escala de encabezado. Lo que seguia delatando que la pagina se
   armo seccion por seccion:

   1. NUEVE `style=` en linea, con CINCO medidas distintas

      Cada `.section-subtitle` traia `style="max-width: Npx; margin-inline:
      auto"` con N en 720, 780, 800, 820 y 860. La clase ya define
      `max-width: 760px` (home.css:111), asi que las cinco medidas eran cinco
      formas de tapar la misma regla. Los `style=` se quitaron de la plantilla
      -queda en CERO- y solo hizo falta devolver el centrado, que era lo unico
      que la clase no traia.

      Ojo con esto al limpiar estilos en linea: `max-width` sin `margin-inline:
      auto` deja el bloque pegado a la izquierda dentro de un contenedor
      centrado. El `text-align: center` del padre centra el TEXTO, no la caja.

   2. CINCO radios sin relacion entre si en las tejas de icono

      teja            lado    radio    proporcion
      .float-icon      28      10       0.357
      .eonx-preview    42      14       0.333
      .counter-icon    46      16       0.348
      .route-icon      60      21       0.350
      .value-item i    78      22       0.282

      La sorpresa al medirlo: NO eran numeros arbitrarios. Cuatro de los cinco
      rondan un tercio del lado, que es justo la proporcion que usa el handoff
      para la teja de insignia de rango (84 px con radio 28). Lo que faltaba no
      era decidir un radio: era escribir la proporcion UNA vez en vez de cinco
      numeros que la aproximan.

      `border-radius: 34%` lo resuelve solo. En un cuadrado el porcentaje se
      mide contra cada lado, asi que la teja de 28 y la de 78 quedan
      proporcionales sin una linea por tamano. Y arregla de paso el unico
      valor que se habia salido -el 22 de `.value-item i`, que daba 0.282-.

      La ventaja que no se ve: `.route-icon` encoge a 44 px en movil
      (home.css:3657) y `.value-item i` es un `clamp()` de 64 a 78. Un radio
      fijo se veria mal en los dos extremos; el porcentaje los sigue. Esto
      ademas esquiva la trampa de la bitacora -una capa que carga al final le
      gana a la media query de mas abajo-, porque aqui no hay tamano que pisar.

   3. Dos tejas separadas por 4 px

      42 y 46 no leen como dos tamanos: leen como un descuido. Las dos pasan a
      44 px, que es la altura de control BASE del manual (52 / 44 / 34).

   Y la tarjeta de imagen entra al radio unico: estaba en 26 px con la foto en
   20 px dentro. El radio interior no se elige, se calcula -el exterior menos
   el hueco-, o la foto se ve como un parche pegado encima.

   Para repetir la medicion:

     const t={};document.querySelectorAll('main [class*="-icon"], main i.ph')
       .forEach(e=>{const r=e.getBoundingClientRect();if(r.width<2)return;
       const c=getComputedStyle(e);if(c.borderRadius==='0px')return;
       t[Math.round(r.width)+' -> '+c.borderRadius]=1});console.log(t)
   ========================================================================== */

/* --- 1. El subtitulo de seccion vuelve al centro --- */
/* La medida ya la pone `.section-subtitle` (760 px). Aqui solo va el centrado
   que se perdio al quitar los `style=` en linea. */
.eon-ds .section-subtitle {
  margin-inline: auto;
}

/* --- 2. Un tercio del lado, escrito una sola vez --- */
.eon-ds .route-icon,
.eon-ds .counter-icon,
.eon-ds .value-item i,
.eon-ds .eonx-preview-card i,
.eon-ds .float-icon {
  border-radius: 34%;
}

/* --- 3. Las dos tejas que se diferenciaban por 4 px --- */
.eon-ds .counter-icon,
.eon-ds .eonx-preview-card i {
  width: var(--eds-h-md);
  height: var(--eds-h-md);
}

/* --- La tarjeta de imagen, y su foto, al radio unico --- */
/* El hueco es el `padding: 0.75rem` de `.image-card` (home.css:1540). Restarlo
   es lo que hace que las dos curvas sean concentricas. */
.eon-ds .image-card {
  border-radius: var(--eds-r);
}

.eon-ds .image-card .optimized-picture,
.eon-ds .image-card .optimized-picture img {
  border-radius: calc(var(--eds-r) - 0.75rem);
}


/* ==========================================================================
   8g - EL FONDO DEL HERO: DOS ELEMENTOS EN VEZ DE UNA LIBRERIA
   --------------------------------------------------------------------------
   Lo que habia: una escena de three.js con un toro de 20,000 particulas
   (9,000 en movil) sobre un <canvas>, y la libreria pedida a cdnjs.

   Lo que no se veia al mirar la pantalla: `disableHeavyEffects` en home.js la
   apaga con `(hover: none)`, `(pointer: coarse)` o `(max-width: 768px)`. O
   sea que en TELEFONO la escena nunca arrancaba. El efecto costaba una
   libreria de un tercero, una peticion mas y trabajo de GPU en escritorio, y
   no existia justo donde entra la mayoria del trafico.

   Lo que hay ahora es lo que pide la seccion 01 del handoff -"halo radial
   pulsante y anillo en orbita de 26 s"-: tres <span> vacios y CSS. Cero
   peticiones, cero JavaScript, y funciona igual en telefono que en escritorio,
   que era el punto.

   DOS DETALLES QUE HACEN QUE ESTO NO CUESTE NADA AL HACER SCROLL

   1. El parallax del halo es una VARIABLE, no un `top` recalculado. home.js
      escribe `--eon-orbit-y` y el halo lo lee. Mover una custom property que
      solo alimenta un `translate` no invalida el layout de la pagina.

   2. El anillo se centra con la propiedad `translate` y gira con `transform`.
      Son propiedades INDEPENDIENTES: si el centrado tambien fuera un
      `transform`, la animacion de giro lo pisaria y el anillo saldria disparado
      a la esquina. Es el fallo clasico al animar algo centrado con
      `translate(-50%, ...)`.
   ========================================================================== */

.eon-ds .hero-section {
  position: relative;
  isolation: isolate;
}

.eon-ds .hero-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.eon-ds .hero-fondo > * {
  position: absolute;
  left: 50%;
  top: calc(10vh + var(--eon-orbit-y, 0px));
  aspect-ratio: 1;
  border-radius: 50%;
}

/* El halo: el mismo verde de la marca abriendo hacia aqua, sin borde duro. */
.eon-ds .hero-fondo__halo {
  width: min(780px, 82vw);
  translate: -50% -22%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--accent) 22%, transparent) 0%,
    color-mix(in oklab, var(--eds-aqua) 11%, transparent) 40%,
    transparent 68%);
  animation: eon-hojaBreath 7s var(--eds-ease-1) infinite;
}

/* Los anillos en orbita. El segundo gira al reves y mas despacio: dos orbitas
   en el mismo sentido y a la misma velocidad se leen como una sola. */
.eon-ds .hero-fondo__anillo {
  width: min(560px, 64vw);
  translate: -50% -14%;
  border: 1px dashed color-mix(in oklab, var(--accent) 26%, transparent);
  animation: eon-orbit 26s linear infinite;
}

.eon-ds .hero-fondo__anillo--2 {
  width: min(720px, 78vw);
  translate: -50% -20%;
  border-style: dotted;
  border-color: color-mix(in oklab, var(--eds-blue-lt) 20%, transparent);
  animation: eon-orbit 41s linear infinite reverse;
}

/* El contenido del hero va por encima del fondo. */
.eon-ds .hero-section > .content-box {
  position: relative;
  z-index: 1;
}

/* Quien pide menos movimiento se queda con el halo quieto, no sin halo: el
   fondo sigue siendo el fondo de la marca. */
@media (prefers-reduced-motion: reduce) {
  .eon-ds .hero-fondo__halo,
  .eon-ds .hero-fondo__anillo {
    animation: none;
  }
}


/* ==========================================================================
   8h - EL FRASCO DEJA DE SER UN PNG RECORTADO
   --------------------------------------------------------------------------
   El PNG no se toco. Lo que cambia es donde esta y que lleva detras.

   DONDE. Estaba al FINAL de `#producto-estrella`, solo, dentro de una rejilla
   de una sola celda, debajo de tres tarjetas de texto. El producto es lo que
   la persona vino a ver y era lo ultimo que aparecia. Ahora abre la seccion y
   las tarjetas van al lado; en telefono la columna se apila y el frasco sigue
   siendo lo primero.

   QUE LLEVA DETRAS. El mismo vocabulario del hero -anillo en orbita y la
   hojita-, para que producto y marca se lean como una sola pieza en vez de
   como una foto pegada sobre un degradado.

   Y FLOTA. `eon-floaty` del catalogo, 7 s. Un objeto quieto sobre un fondo
   quieto se lee como una imagen; el mismo objeto subiendo y bajando diez
   pixeles se lee como algo que esta ahi. Es el movimiento mas barato que
   existe -solo `transform`, en la capa de composicion, sin reflow-.

   OJO CON EL ORDEN DE PINTADO. `.image-card--clean-product` ya traia un
   `::before` con brillo y un `::after` con la sombra del frasco, ambos sin
   `z-index` propio o en 1, y la imagen en 2. El anillo y la hojita entran en 0
   para quedar POR DEBAJO de los dos y del frasco. Si entraran despues sin
   z-index, taparian la sombra y el frasco se veria flotando sin apoyo.
   ========================================================================== */

.eon-ds .producto-dupla {
  display: grid;
  gap: var(--eds-space-3);
  align-items: center;
  margin-top: var(--eds-space-4);
}

@media (min-width: 900px) {
  .eon-ds .producto-dupla {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--eds-space-4);
  }

  /* Las tres tarjetas pasan de fila de tres a columna de tres al ponerse al
     lado del frasco. Sin esto quedarian de 90 px de ancho. */
  .eon-ds .producto-dupla .brand-overview__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.eon-ds .producto-frasco {
  position: relative;
  overflow: hidden;
}

.eon-ds .producto-frasco__anillo,
.eon-ds .producto-frasco__marca {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  pointer-events: none;
}

.eon-ds .producto-frasco__anillo {
  width: min(88%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--accent) 24%, transparent);
  translate: -50% -50%;
  animation: eon-orbit 34s linear infinite;
}

.eon-ds .producto-frasco__marca {
  width: min(70%, 320px);
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0.1;
}

.eon-ds .producto-frasco .product-bottle-image {
  animation: eon-floaty 7s var(--eds-ease-1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .eon-ds .producto-frasco__anillo,
  .eon-ds .producto-frasco .product-bottle-image {
    animation: none;
  }
}


/* ==========================================================================
   8i - EL RITMO VERTICAL, COMPRIMIDO
   --------------------------------------------------------------------------
   La portada medía 14,687 px en catorce secciones. Ninguna sección sobra -la
   informacion es la misma-, pero el aire entre ellas estaba pensado seccion
   por seccion y se sumaba.

   Desglose de `#elige-camino`, la que se pidio comprimir primero (1,369 px):

     160 px   padding vertical de la seccion (80 arriba, 80 abajo)
      96 px   padding de `.route-hub` (48 arriba, 48 abajo)
      97 px   la cabecera -antetitulo, titulo y subtitulo-
      50 px   el hueco entre la cabecera y la rejilla
     671 px   las tres tarjetas
     293 px   la tira de decision y su margen

   O sea: 306 px -el 22% de la seccion- son hueco vertical antes de que
   empiece el contenido. Y eso se repite catorce veces.

   QUE SE TOCA Y QUE NO. Se toca el HUECO, nunca el texto. Las tarjetas bajan
   de 671 a ~560 px apretando su propio relleno, el tamano de sus pildoras y el
   interlineado del parrafo; ni una palabra cambia.

   EL PADDING DE SECCION VA EN `clamp()`, NO EN DOS MEDIA QUERIES. Con
   `clamp(48px, 5vw, 64px)` el telefono recibe 48 y el escritorio 64, con una
   sola declaracion. Y el ahorro es mayor justo donde hace falta: en movil las
   secciones venian a 80 px fijos, asi que la portada pierde ~900 px de scroll
   muerto en telefono, que es por donde entra la mayoria del trafico.

   Para volver a medirlo:

     [...document.querySelectorAll('main > section')].forEach(s =>
       console.log(s.id, Math.round(s.getBoundingClientRect().height)))
   ========================================================================== */

.eon-ds .section {
  padding-block: clamp(var(--eds-space-6), 5vw, var(--eds-space-8));
}

/* Las otras paginas conservan el ritmo publico existente. */
.eon-ds .hero-section {
  padding-block: clamp(var(--eds-space-8), 7vw, var(--eds-space-10));
}

/* Home: priorizar titular y acciones sobre el aire decorativo de apertura. */
.eon-ds .home-page .hero-section {
  padding-block: clamp(var(--eds-space-3), 3vw, var(--eds-space-4));
}

.eon-ds .route-hub {
  padding: var(--eds-space-4);
}

/* El hueco entre cabecera y contenido: uno solo, en vez de un margen inferior
   de 50 y otro superior de 45 que ademas no colapsan entre hermanos. */
.eon-ds .route-hub .section-subtitle {
  margin-bottom: var(--eds-space-3);
}

.eon-ds .route-grid {
  margin-top: var(--eds-space-4);
}

.eon-ds .route-decision-strip {
  margin-top: var(--eds-space-3);
}

/* --- La tarjeta de ruta, apretada por dentro --- */
.eon-ds .route-card {
  padding: var(--eds-space-3);
  gap: var(--eds-space-1);
}

/* `clamp()` en vez de media query: sigue sola el paso a 44 px que home.css ya
   define para movil, sin que esta capa -que carga al final- se lo pise. */
.eon-ds .route-icon {
  width: clamp(44px, 4vw, var(--eds-h-lg));
  height: clamp(44px, 4vw, var(--eds-h-lg));
}

.eon-ds .route-card p {
  line-height: 1.55;
}

/* Las pildoras de "esta ruta encaja si": tres filas de 30 px pasan a dos de
   26. Es el tamano de caption del manual, que es lo que son. */
.eon-ds .route-fit-tags span {
  font-size: var(--eds-fs-caption);
  padding: 4px 10px;
}

.eon-ds .route-links {
  gap: var(--eds-space-1);
}

/* La rejilla y su CTA pertenecen al panel, cuyo overflow protege el brillo.
   Un breakout basado en 100vw los recortaba dentro de ese panel a escritorio;
   ocultar el overflow del body no detecta ni corrige ese recorte interno. */
.eon-ds .home-page .route-grid,
.eon-ds .home-page .route-decision-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}


/* ==========================================================================
   8j - LAS TARJETAS ENTRAN ESCALONADAS
   --------------------------------------------------------------------------
   La maquinaria ya existia y no se usaba entera: home.js observa cada
   `.section` y le pone `is-visible` al entrar en pantalla, y home.css la usa
   para subir y revelar la SECCION COMPLETA de una vez. Un bloque entero
   apareciendo de golpe se lee como un salto; las mismas tarjetas entrando con
   70 ms de diferencia se leen como una secuencia.

   No hace falta JavaScript nuevo: se cuelga de la clase que ya se pone, con
   `eon-riseUp` del catalogo de la identidad.

   UNA EXCLUSION OBLIGATORIA: `.universe-card`. `#biotecnologia.is-visible
   .universe-card` ya tiene `animation: value-float 9s infinite` (home.css:970)
   con retardos escalonados por `nth-child`. La propiedad `animation` es una
   sola: poner aqui `eon-riseUp` sobre esas tarjetas no se suma, las DEJA
   QUIETAS. Es la misma familia de trampa que la seccion 3 con el color de esa
   misma tarjeta.
   ========================================================================== */

.eon-ds .section.is-visible .route-card,
.eon-ds .section.is-visible .brand-card,
.eon-ds .section.is-visible .counter-card,
.eon-ds .section.is-visible .purpose-card,
.eon-ds .section.is-visible .faq-card,
.eon-ds .section.is-visible .value-item,
.eon-ds .section.is-visible .image-card {
  animation: eon-riseUp 520ms var(--eds-ease-2) both;
}

.eon-ds .section.is-visible :nth-child(2 of .route-card),
.eon-ds .section.is-visible :nth-child(2 of .brand-card),
.eon-ds .section.is-visible :nth-child(2 of .counter-card),
.eon-ds .section.is-visible :nth-child(2 of .purpose-card),
.eon-ds .section.is-visible :nth-child(2 of .faq-card),
.eon-ds .section.is-visible :nth-child(2 of .value-item),
.eon-ds .section.is-visible :nth-child(2 of .image-card) {
  animation-delay: 80ms;
}

.eon-ds .section.is-visible :nth-child(3 of .route-card),
.eon-ds .section.is-visible :nth-child(3 of .brand-card),
.eon-ds .section.is-visible :nth-child(3 of .counter-card),
.eon-ds .section.is-visible :nth-child(3 of .purpose-card),
.eon-ds .section.is-visible :nth-child(3 of .faq-card),
.eon-ds .section.is-visible :nth-child(3 of .value-item),
.eon-ds .section.is-visible :nth-child(3 of .image-card) {
  animation-delay: 160ms;
}

.eon-ds .section.is-visible :nth-child(n + 4 of .route-card),
.eon-ds .section.is-visible :nth-child(n + 4 of .brand-card),
.eon-ds .section.is-visible :nth-child(n + 4 of .counter-card),
.eon-ds .section.is-visible :nth-child(n + 4 of .purpose-card),
.eon-ds .section.is-visible :nth-child(n + 4 of .faq-card),
.eon-ds .section.is-visible :nth-child(n + 4 of .value-item),
.eon-ds .section.is-visible :nth-child(n + 4 of .image-card) {
  animation-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .eon-ds .section.is-visible .route-card,
  .eon-ds .section.is-visible .brand-card,
  .eon-ds .section.is-visible .counter-card,
  .eon-ds .section.is-visible .purpose-card,
  .eon-ds .section.is-visible .faq-card,
  .eon-ds .section.is-visible .value-item,
  .eon-ds .section.is-visible .image-card {
    animation: none;
  }
}


/* ==========================================================================
   8k - EL MENU DE PRODUCTO, POR SERIES
   --------------------------------------------------------------------------
   La seccion `#linea-preventa` del home. Solo existe si hay productos
   activos (ver `productos_activos()` en `app/public/core/preventa_content.py`):
   con la bandera apagada no se pinta nada y estas reglas no aplican a nada.

   Las tarjetas son OSCURAS aunque el home sea claro. No es capricho: los
   logotipos de producto son blancos -salen de la etiqueta negra- y el frasco
   tiene que verse igual que en su pagina propia. Cada tarjeta trae su acento
   en linea (`--acento`), el color de SU etiqueta impresa.
   ========================================================================== */

.eon-ds .preventa-rejilla {
  display: grid;
  gap: var(--eds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--eds-space-4);
}

.eon-ds .preventa-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--eds-r);
  background: #0a0c14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eef1f6;
  text-decoration: none;
  transition: transform var(--eds-dur-2) var(--eds-ease-2), border-color var(--eds-dur-2) var(--eds-ease-2);
}

.eon-ds .preventa-tarjeta:hover,
.eon-ds .preventa-tarjeta:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--acento) 55%, transparent);
}

.eon-ds .preventa-tarjeta:focus-visible {
  outline: 2px solid var(--acento-lt);
  outline-offset: 3px;
}

.eon-ds .preventa-tarjeta__escena {
  position: relative;
  display: grid;
  place-items: center;
  height: 260px;
}

.eon-ds .preventa-tarjeta__halo {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--acento) 42%, transparent), transparent 66%);
  filter: blur(26px);
}

.eon-ds .preventa-tarjeta__escena img {
  position: relative;
  height: 210px;
  width: auto;
  animation: eon-floaty 7s var(--eds-ease-1) infinite;
}

.eon-ds .preventa-tarjeta__pie {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--eds-space-3) var(--eds-space-3);
}

/* Reviewed catalog scenes, not transparent animated 3D posters. */
.eon-ds .preventa-tarjeta__escena--catalogo {
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: var(--eds-space-3);
}

.eon-ds .preventa-tarjeta__escena--catalogo .optimized-picture {
  height: 100%;
}

.eon-ds .preventa-tarjeta__escena--catalogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
}

.eon-ds .preventa-tarjeta__escena--catalogo .preventa-tarjeta__halo {
  display: none;
}

.eon-ds .preventa-tarjeta__logo {
  height: 34px;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  object-fit: contain;
}

.eon-ds .preventa-tarjeta__nombre {
  font-family: 'MuseoModerno', sans-serif;
  font-size: 1.4rem;
  color: #fff;
}

.eon-ds .preventa-tarjeta__eslogan {
  font-size: var(--eds-fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #98a2b3;
}

.eon-ds .preventa-tarjeta__ir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--eds-space-1);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--acento-lt);
}

/* Las dos series, cada una con su encabezado: EonX Series -formulas
   integrales- y X Series -un enfoque por producto-. La diferencia se dice por
   lo que ES cada serie, nunca por precio ni por «gama». */

.eon-ds .serie {
  margin-top: var(--eds-space-5);
}

.eon-ds .serie__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eds-space-2);
  padding-bottom: var(--eds-space-2);
  border-bottom: 1px solid var(--eds-border, rgba(0, 0, 0, 0.1));
}

.eon-ds .serie__nombre {
  margin: 0;
  font-family: 'MuseoModerno', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--eds-title, #2e2c72);
}

.eon-ds .serie__entrada {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: var(--eds-fs-body);
  line-height: 1.6;
  color: var(--eds-muted, #4d4d4d);
}

.eon-ds .serie__etiqueta {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 980px;
  border: 1px solid var(--eds-border, rgba(0, 0, 0, 0.12));
  font-size: var(--eds-fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eds-muted, #4d4d4d);
}

/* La insignia de estado: «Disponible» o «Preventa». */
.eon-ds .preventa-tarjeta__insignia {
  position: absolute;
  top: var(--eds-space-2);
  left: var(--eds-space-2);
  z-index: 2;
  padding: 4px 12px;
  border-radius: 980px;
  background: color-mix(in oklab, var(--acento) 22%, rgba(0, 0, 0, 0.4));
  border: 1px solid color-mix(in oklab, var(--acento) 45%, transparent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

/* Un producto que todavia no se puede publicar: se nombra y ya. Sin enlace,
   sin frasco y sin decir que hace (Potasio+X y DefenX estan bloqueados, y
   Sleep+X aun no existe). */
.eon-ds .preventa-tarjeta--proxima {
  justify-content: flex-end;
  min-height: 180px;
  background: #0a0c14;
  border-style: dashed;
  cursor: default;
}

/* El frasco se ve COMPLETO: estos frascos son negros y atenuarlos sobre una
   tarjeta oscura los borraba. Que todavia no tenga pagina lo dicen el borde
   punteado y la insignia, no un frasco a medias. */
.eon-ds .preventa-tarjeta--proxima .preventa-tarjeta__logo {
  opacity: 0.85;
}

.eon-ds .preventa-tarjeta--proxima .preventa-tarjeta__halo {
  opacity: 0.6;
}

.eon-ds .preventa-tarjeta--proxima .preventa-tarjeta__insignia {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #c7cedb;
}

.eon-ds .preventa-tarjeta--proxima .preventa-tarjeta__pie {
  padding-top: var(--eds-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .eon-ds .preventa-tarjeta { transition: none; }
  .eon-ds .preventa-tarjeta:hover { transform: none; }
  .eon-ds .preventa-tarjeta__escena img { animation: none; }
}


/* ==========================================================================
   9 - MODO OSCURO
   --------------------------------------------------------------------------
   El interruptor de tema existe desde antes (`#theme-toggle` en eon_base.html:
   escribe `data-theme`, lo guarda en localStorage y en una cookie). Lo que no
   existia era la implementacion.

   LA CAUSA RAIZ ERA UNA LINEA

   style.css SI traia el fondo oscuro:

       style.css:11    :root                { --bg-color: #f4f7f9 }
       style.css:1763  [data-theme="dark"]  { --bg-color: linear-gradient(...) }
       style.css:1754  html, body           { background: var(--bg-color) }

   ...y home.css lo deshacia sin querer:

       home.css:8      :root                { --bg-color: #f4f7f9 }

   Las dos declaraciones tienen la misma especificidad (0,1,0) y home.css carga
   despues, asi que gana. El modo oscuro llevaba anulado por una variable que
   alguien redeclaro al copiar la paleta a la hoja de la portada.

   Peor aun: home.css pinta el <body> con un degradado claro FIJO que ni
   siquiera pasa por la variable, asi que arreglar `--bg-color` sola tampoco
   bastaba.

   QUE HACE ESTA SECCION

   1. Pinta el lienzo (html y body) con las superficies del tema.
   2. Remapea las variables legacy que consumen home.css y style.css
      -`--heading-color`, `--text-color`, `--glass-bg`- a los tokens del
      sistema. Eso arregla de una vez cada regla que las usa, sin enumerar
      selectores ni tocar home.css.
   3. Nombra los colores escritos a mano, que no pasan por variable.
   4. Sube el acento a `--accent-lt` para texto pequeno: `#00965e` sobre
      `#05061a` da 3.2:1 y no pasa el minimo; `#00c277` da 5.8:1.

   COMO SE VERIFICA

   En la consola del navegador, con el medidor de contraste que acompana a esta
   seccion (esta en docs/design_system.md). El objetivo es que oscuro no sea
   peor que claro. Medido en la portada:

       antes:   claro 17    oscuro 48
       despues: ver docs/design_system.md

   OJO AL MEDIR: la CSP de la app BLOQUEA los <style> inyectados
   (`el.sheet` queda en `false`), asi que probar reglas desde la consola es un
   no-op silencioso -parece que la regla no sirve cuando en realidad nunca se
   aplico-. Hay que editar el archivo, subir el `?v=` y reiniciar.
   ========================================================================== */

/* --- 1. El lienzo --- */
html[data-theme="dark"] {
  --bg-color: #05061a;
  background: #05061a;
  color-scheme: dark;
}

[data-theme="dark"] .eon-ds {
  /* Las variables legacy. Remapearlas arregla cada regla que las consume. */
  --bg-color: #05061a;
  --heading-color: var(--ink);
  --text-color: var(--ink-2);
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.10);
  --scroll-bar-bg: #0c0e2a;

  /* home.css pinta el body con un degradado claro fijo, sin variable. Se
     conserva su FORMA -velo radial de acento arriba, degradado vertical- y
     solo se mueven los valores. */
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 194, 119, 0.10), transparent 34rem),
    linear-gradient(180deg, #05061a 0%, #0c0e2a 100%);
  color: var(--ink-2);
}

/* --- 2. Paneles y superficies --- */
[data-theme="dark"] .eon-ds .content-box,
[data-theme="dark"] .eon-ds .home-feature-panel,
[data-theme="dark"] .eon-ds .faq-card,
[data-theme="dark"] .eon-ds .eonx-preview-card,
[data-theme="dark"] .eon-ds .image-card,
[data-theme="dark"] .eon-ds .plan-visual,
[data-theme="dark"] .eon-ds .plan-fast,
[data-theme="dark"] .eon-ds .plan-reading-path,
[data-theme="dark"] .eon-ds .values-manifest,
[data-theme="dark"] .eon-ds .esg-statement,
[data-theme="dark"] .eon-ds .esg-note,
[data-theme="dark"] .eon-ds .contact-form,
[data-theme="dark"] .eon-ds .contact-note,
[data-theme="dark"] .eon-ds .incentives-info,
[data-theme="dark"] .eon-ds .incentives-note {
  background: var(--surface-2);
  border-color: var(--line);
}

/* --- 3. Texto --- */
[data-theme="dark"] .eon-ds h1,
[data-theme="dark"] .eon-ds h2,
[data-theme="dark"] .eon-ds h3,
[data-theme="dark"] .eon-ds h4,
[data-theme="dark"] .eon-ds strong,
[data-theme="dark"] .eon-ds summary,
[data-theme="dark"] .eon-ds .counter-value,
[data-theme="dark"] .eon-ds .value-item span {
  color: var(--ink);
}

[data-theme="dark"] .eon-ds p,
[data-theme="dark"] .eon-ds li,
[data-theme="dark"] .eon-ds .section-subtitle,
[data-theme="dark"] .eon-ds .lead,
[data-theme="dark"] .eon-ds .hero-positioning,
[data-theme="dark"] .eon-ds .counter-label,
[data-theme="dark"] .eon-ds .home-disclaimer {
  color: var(--ink-2);
}

/* The application intro retains a light surface in both themes. Its local
   text tokens must win over the generic dark-page heading/body rules. */
[data-theme="dark"] .eon-ds .leader-apply-copy h1,
[data-theme="dark"] .eon-ds .leader-apply-copy li {
  color: var(--apply-ink);
}

[data-theme="dark"] .eon-ds .leader-apply-copy p {
  color: var(--apply-muted);
}

/* Registration's header is a dark local surface, not a new global ink theme. */
[data-theme="dark"] .eon-ds .eon-register__hero .eon-register__title,
[data-theme="dark"] .eon-ds .eon-register__hero .eon-register__sponsor strong {
  color: var(--register-hero-ink);
}

[data-theme="dark"] .eon-ds .eon-register__hero .eon-register__subtitle {
  color: var(--register-hero-muted);
}

/* El texto con degradado recortado no se toca: `-webkit-text-fill-color`
   transparente lo deja invisible si alguien le pone `color`. */

/* --- 3b. Las secciones con #id --- */
/* home.css decora varias secciones con selectores de ID -`#valores
   .content-box`, `#vision-mision .content-box`...-. Un ID (1,1,0) le gana a
   toda esta capa (0,3,0), asi que sus fondos claros sobrevivian al tema y
   dejaban texto claro sobre panel claro.

   Se igualan con el mismo ID en vez de subir a `!important`: la lista es
   finita -siete secciones- y deja el archivo sin una sola excepcion de fuerza
   bruta. Si aparece una seccion nueva con ID, se agrega aqui; el medidor de
   contraste la delata. */
[data-theme="dark"] .eon-ds #valores .content-box,
[data-theme="dark"] .eon-ds #vision-mision .content-box,
[data-theme="dark"] .eon-ds #productos .content-box,
[data-theme="dark"] .eon-ds #bienvenida .section-header-stack,
[data-theme="dark"] .eon-ds .experience-section,
[data-theme="dark"] .eon-ds #vision-mision .purpose-card {
  background: var(--surface-2);
  border-color: var(--line);
}

[data-theme="dark"] .eon-ds #vision-mision .purpose-card h3,
[data-theme="dark"] .eon-ds #productos .section-title {
  color: var(--ink);
}

[data-theme="dark"] .eon-ds #vision-mision .purpose-card p,
[data-theme="dark"] .eon-ds #productos .section-subtitle {
  color: var(--ink-2);
}

[data-theme="dark"] .eon-ds #bienvenida .section-header-stack .section-eyebrow {
  color: var(--accent-on-dark);
}

/* --- 4. El acento sube un escalon para texto pequeno --- */
/* El portal `publica` ya oscurece su acento para el modo claro:
   `--accent: #007549` y `--accent-lt: #00965e`. Sobre `#05061a` ese verde da
   4.17:1 y no pasa el minimo de 4.5.

   En vez de fijar un verde a mano -que romperia el acento de los otros
   portales-, se aclara EL ACENTO DEL PORTAL con color-mix. Asi conserva su
   matiz: sirve igual en publica, academia o finanzas. El nombre es nuevo a
   proposito, porque una propiedad personalizada no puede referirse a si misma. */
[data-theme="dark"] .eon-ds {
  --accent-on-dark: color-mix(in oklab, var(--accent-lt) 72%, white);
}

[data-theme="dark"] .eon-ds .section-eyebrow,
[data-theme="dark"] .eon-ds .route-kicker,
[data-theme="dark"] .eon-ds .plan-kicker,
[data-theme="dark"] .eon-ds .values-kicker,
[data-theme="dark"] .eon-ds .join-kicker,
[data-theme="dark"] .eon-ds .incentives-kicker,
[data-theme="dark"] .eon-ds .home-editorial-card__date,
[data-theme="dark"] .eon-ds .cta-button.secondary,
[data-theme="dark"] .eon-ds .cta-button.tertiary,
[data-theme="dark"] .eon-ds .route-links a,
[data-theme="dark"] .eon-ds .home-editorial-card__body a,
[data-theme="dark"] .eon-ds .quick-plan i {
  color: var(--accent-on-dark);
}

[data-theme="dark"] .eon-ds .cta-button.secondary {
  border-color: color-mix(in oklab, var(--accent-on-dark) 48%, transparent);
}

/* --- 5. Pildoras y etiquetas --- */
[data-theme="dark"] .eon-ds .hero-badge,
[data-theme="dark"] .eon-ds .feature-pill,
[data-theme="dark"] .eon-ds .route-fit-tags span,
[data-theme="dark"] .eon-ds .value-item {
  background: var(--panel-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}

/* --- 5b. Las secciones traen su propio fondo claro --- */
/* Cada `<section class="section">` de la portada se pinta con tres capas:
   dos velos radiales de acento y UNA BASE SOLIDA CLARA
   -`linear-gradient(#fff 0%, #f3f6fb 100%)`-. Esa base tapaba el lienzo
   oscuro, y por eso quedaba texto claro sobre panel claro aunque el body ya
   fuera oscuro.

   SIMPLIFICACION DELIBERADA: en claro cada seccion alterna el matiz del velo
   -verde en unas, azul en otras, aqua en EonXperience-. Aqui se unifica en una
   sola receta con los dos velos. Sobre un lienzo oscuro un velo al 7% es
   imperceptible, asi que distinguirlos costaria doce reglas y no se notaria.
   Si algun dia se quiere recuperar la alternancia, el sitio donde hacerlo es
   este y la lista de secciones esta en home.css con sus `#id`. */
[data-theme="dark"] .eon-ds main > section#hero.section,
[data-theme="dark"] .eon-ds main > section#elige-camino.section,
[data-theme="dark"] .eon-ds main > section#bienvenida.section,
[data-theme="dark"] .eon-ds main > section#impacto.section,
[data-theme="dark"] .eon-ds main > section#prueba-social.section,
[data-theme="dark"] .eon-ds main > section#producto-estrella.section,
[data-theme="dark"] .eon-ds main > section#sistema-lideres.section,
[data-theme="dark"] .eon-ds main > section#eonxperience-preview.section,
[data-theme="dark"] .eon-ds main > section#biotecnologia.section,
[data-theme="dark"] .eon-ds main > section#vision-mision.section,
[data-theme="dark"] .eon-ds main > section#valores.section,
[data-theme="dark"] .eon-ds main > section#guias-decision.section,
[data-theme="dark"] .eon-ds main > section#faq.section,
[data-theme="dark"] .eon-ds main > section#accion.section,
[data-theme="dark"] .eon-ds main > section.section {
  background-image:
    radial-gradient(circle at 18% 25%, rgba(0, 194, 119, 0.07), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(74, 71, 163, 0.10), transparent 55%),
    linear-gradient(#05061a 0%, #0c0e2a 100%);
}

/* El hero lleva un velo BLANCO al 84% para levantar el titular sobre el canvas
   de particulas. En oscuro hay que invertirlo o se come la pantalla. */
[data-theme="dark"] .eon-ds #hero.section {
  background-image:
    radial-gradient(circle at 50% 35%, rgba(12, 14, 42, 0.84), transparent 304px),
    linear-gradient(rgba(5, 6, 26, 0.72), rgba(12, 14, 42, 0.72));
}

/* Fichas sueltas con fondo blanco fijo dentro de un panel ya oscuro. */
[data-theme="dark"] .eon-ds .quick-plan li,
[data-theme="dark"] .eon-ds .route-fit-tags span,
[data-theme="dark"] .eon-ds .counter-card,
[data-theme="dark"] .eon-ds .home-editorial-card {
  background: var(--panel-2);
  color: var(--ink-2);
}

/* --- 6. Imagenes --- */
/* Las fotos sobre fondo claro llevan su propio marco blanco. En oscuro el
   marco se nota como un recorte; se le quita el fondo y se deja la sombra. */
[data-theme="dark"] .eon-ds .image-card {
  background: transparent;
}


/* ==========================================================================
   9a - DOS FALLOS DE LEGIBILIDAD QUE NO ERAN DEL TEMA
   --------------------------------------------------------------------------
   Los dos salieron al medir contraste y existian en modo claro, desde antes de
   esta capa. Se arreglan aqui porque el medidor los encontro y porque son la
   misma familia de problema: un color de marca usado donde no da el minimo.

   1 - EL CTA "Revisar mi caso" USA AQUA DE FONDO

       .route-decision-strip__button--primary
         background: linear-gradient(135deg, var(--aqua), var(--bright-green))
         color: var(--white)

   El extremo aqua es `#00c6ff`. Texto blanco encima da **2.0:1** -medido en
   conjunto: 3.16-, muy por debajo de 4.5. Y el manual es explicito sobre el
   aqua: "gradientes DECORATIVOS". No es un color para poner texto encima.

   Se cambia el arranque del degradado al Azul Claro de la paleta, que si es
   color de interfaz. El gesto -degradado diagonal de dos tonos de marca- se
   conserva; solo deja de apoyarse en el unico color que el manual reserva para
   decoracion.

   2 - EL EYEBROW SE QUEDA A 0.5 DEL MINIMO

   El acento del portal `publica` es `#007549`. Sobre blanco da **4.01:1** y el
   minimo es 4.5. Son diez eyebrows en la portada, en cada seccion.

   No se cambia el acento -lo usan los botones, donde si da de sobra porque va
   de fondo, no de texto-: se oscurece un punto SOLO donde el acento hace de
   texto pequeno.
   ========================================================================== */

.eon-ds .route-decision-strip__button--primary {
  background: linear-gradient(135deg, var(--eds-blue-lt), var(--eds-green));
  box-shadow: 0 14px 28px rgba(46, 44, 114, 0.22);
}

.eon-ds .section-eyebrow,
.eon-ds .route-kicker,
.eon-ds .home-editorial-card__date {
  /* Un escalon mas oscuro que el acento, solo para texto pequeno. */
  color: color-mix(in oklab, var(--accent) 86%, black);
}


/* La franja de decision ya es oscura en los dos temas, asi que su parrafo no
   debe heredar `--ink-2` -que en oscuro baja al 66% de opacidad y se queda en
   4.41:1, a nueve centesimas del minimo-. Se le da tinta plena. */
.eon-ds .route-decision-strip__copy p {
  color: rgba(255, 255, 255, 0.86);
}


/* ==========================================================================
   9b - PANELES OSCUROS EN MODO CLARO
   --------------------------------------------------------------------------
   Otro fallo que existia en los dos temas y que salio al medir contraste.

   `.home-feature-panel--dark` es, como dice su nombre, un panel oscuro dentro
   de una pagina clara. Dentro lleva un `.cta-button.secondary`, cuyo color es
   el acento del portal: en `publica` ese acento es `#007549`, un verde ya
   oscurecido para leerse sobre blanco. Sobre el panel oscuro da **1.97:1**.

   Mismo criterio que en el pie: se aclara el acento solo dentro del panel.
   ========================================================================== */

.eon-ds .home-feature-panel--dark,
.eon-ds .eonx-preview-card {
  --accent-on-dark: color-mix(in oklab, var(--accent-lt) 72%, white);
}

.eon-ds .home-feature-panel--dark .cta-button.secondary {
  color: var(--accent-on-dark);
  border-color: color-mix(in oklab, var(--accent-on-dark) 48%, transparent);
}

.eon-ds .home-feature-panel--dark .section-eyebrow {
  color: var(--accent-on-dark);
}


/* ==========================================================================
   9c - EL PIE DE PAGINA SIEMPRE FUE OSCURO
   --------------------------------------------------------------------------
   Esto NO es del modo oscuro: salio al medir contraste y resulto ser un fallo
   que llevaba ahi desde siempre, en los dos temas.

   `footer.footer-pro` se pinta `linear-gradient(#11131e, #080a12)` sin mirar el
   tema -es oscuro tambien en modo claro-, y dentro lleva texto en el verde de
   marca `#007b55`. Medido: **2.77:1**, muy por debajo del minimo de 4.5.

   Se aclara el acento solo dentro del pie, en los dos temas, conservando el
   matiz del portal.
   ========================================================================== */

.eon-ds .footer-pro {
  --accent-on-dark: color-mix(in oklab, var(--accent-lt) 72%, white);
}

.eon-ds .footer-conversation__copy span,
.eon-ds .footer-pro .footer-link-group a:hover,
.eon-ds .footer-pro .footer-accent {
  color: var(--accent-on-dark);
}


/* ==========================================================================
   10 - MOVIL
   --------------------------------------------------------------------------
   Las paginas publicas ya traian sus propias reglas de movil. Esta capa carga
   despues, asi que cualquier valor fijo que declare arriba se las pisa aunque
   la de ellas fuera mejor. Aqui se devuelve el aire donde hace falta.
   ========================================================================== */

@media (max-width: 560px) {
  .eon-ds .cta-button {
    padding-inline: var(--eds-space-2);
    font-size: 14px;
    /* Una etiqueta de dos palabras no debe partirse en tres renglones. */
    text-wrap: balance;
  }

  /* El hero baja un escalon: 44px es el piso del manual y a 375px el titular
     ya ocupa el ancho completo. */
  .eon-ds .section {
    padding-block: var(--eds-space-6);
  }
}

/* Los CTA del hero se apilan en telefono.
   Medido a 375px: la rejilla de dos columnas deja 145px por boton y, quitando
   el relleno, ~113px de texto. "Aplicar como lider" necesita mas: partia en
   TRES renglones y el boton crecia a 70px de alto, por encima de los 52 del
   manual. Bajar la tipografia no alcanza -solo lo deja en dos renglones-, asi
   que la respuesta es una columna: cada CTA ocupa el ancho y se lee de un
   golpe. */
@media (max-width: 480px) {
  .eon-ds .hero-actions,
  .eon-ds .home-action-row {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .eon-ds .hero-actions .cta-button,
  .eon-ds .home-action-row .cta-button {
    width: 100%;
  }
}


/* Home: el lienzo ocupa el ancho util de la ventana, no un .container de 1200px.
   El contenido conserva sus max-width canonicos; no se usa 100vw ni margenes
   negativos, que introducirian scroll horizontal con la barra del navegador. */
.eon-home #main-content.container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.eon-home .home-page {
  background:
    radial-gradient(ellipse min(90vw, 70rem) 38rem at 8% 25%, color-mix(in srgb, var(--eds-green) 10%, transparent), transparent 75%),
    radial-gradient(ellipse min(90vw, 70rem) 42rem at 95% 55%, color-mix(in srgb, var(--eds-blue-lt) 10%, transparent), transparent 75%),
    radial-gradient(ellipse min(90vw, 70rem) 38rem at 20% 80%, color-mix(in srgb, var(--eds-green) 8%, transparent), transparent 75%);
}

/* Gana a los fondos por ID, incluidos los nocturnos, sin afectar otras paginas.
   Un solo lienzo continuo evita cortes rectangulares entre secciones. */
body.eon-home #main-content main.home-page > section.section {
  background: transparent;
}

/* ==========================================================================
   11 - MOVIMIENTO
   El manual define cuatro duraciones y tres curvas. Lo que NO define es
   animacion continua en texto de lectura: eso se retira arriba.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .eon-ds .route-card,
  .eon-ds .brand-card,
  .eon-ds .universe-card,
  .eon-ds .purpose-card,
  .eon-ds .counter-card,
  .eon-ds .home-editorial-card,
  .eon-ds .cta-button {
    transition: none;
  }

  .eon-ds .route-card:hover,
  .eon-ds .brand-card:hover,
  .eon-ds .universe-card:hover,
  .eon-ds .purpose-card:hover,
  .eon-ds .counter-card:hover,
  .eon-ds .home-editorial-card:hover,
  .eon-ds .cta-button:hover {
    transform: none;
  }
}