/* ADN Soluciones — Sección: HERO */
/* Se cargaba desde home.css; separado el 2026-07-28 para poder iterar
   cada sección de forma aislada. Ver §18 del CLAUDE.md. */

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.adn-hero {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16);
}
@media (min-width: 768px)  { .adn-hero { padding-block: var(--space-20); } }
@media (min-width: 1024px) { .adn-hero { padding-block: var(--space-24) var(--space-20); } }

/* Halo frío detrás del visual. Sobre blanco tiene que ser casi imperceptible:
   basta con que el aire del fold no lea como papel plano. */
.adn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%,
    color-mix(in oklab, var(--accent) 7%, transparent),
    transparent 70%);
  pointer-events: none;
}
/* Filete dorado que cierra el fold contra la franja de confianza. */
.adn-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--adn-hairline);
  pointer-events: none;
}

/* Split layout */
.adn-hero__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 768px) {
  .adn-hero__wrap { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
@media (min-width: 1024px) {
  .adn-hero__wrap { grid-template-columns: 1.15fr 0.85fr; }
}

/* Content side */
.adn-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* El eyebrow del hero ES un .adn-kicker, así que ya hereda el filete dorado
   de base.css. Aquí solo se alarga: en el fold el filete puede permitirse
   más presencia que en el resto de la página. */
.adn-hero__eyebrow::before {
  width: 48px;
}

.adn-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--ink);
  margin: 0;
}
.adn-hero__line { display: block; }
/* Sin italic: D-DIN PRO no trae cara cursiva, así que el navegador la
   sintetizaba inclinando la romana — en una geométrica se nota y abarata el
   titular. El énfasis lo carga el azul profundo (9.26 sobre blanco), que en
   fondo claro rinde más que el azul vivo a este tamaño. */
.adn-hero__line--accent {
  color: var(--accent-2);
}

.adn-hero__sub {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
  color: var(--ink-2);
  max-width: 46ch;
  line-height: var(--leading-normal);
  margin: 0;
}

.adn-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.adn-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
/* La métrica de satisfacción trae <strong>98</strong><sup>%</sup><span>…</span>:
   en una columna flex el <sup> se llevaba su propia línea y partía el dato en
   tres. Se pasa a fila con wrap y se empuja solo la etiqueta abajo, así el
   signo queda pegado a la cifra sin tocar el marcado. */
.adn-metric {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 2px;
}
.adn-metric > span {
  flex-basis: 100%;
  white-space: nowrap;
  margin-top: 2px;
}
.adn-metric sup {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  vertical-align: baseline;
  top: 0;
}
/* tabular-nums es obligatorio aquí: estos números los anima un counter-up y sin
   ancho de dígito fijo la fila entera se reajusta en cada frame. */
.adn-metric strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.adn-metric span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mute);
}

/* Visual side */
.adn-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* El disco del hero es el único lugar donde el degradado cyan→azul del isotipo
   aparece a gran escala. Se usa como aro de 3px, no como relleno: el cyan sobre
   blanco no aguanta superficie, pero como filete perimetral firma la marca sin
   comprometer nada legible. El padding forma el aro; el box-sizing global hace
   que la imagen ocupe la caja de contenido y lo deje visible. */
.adn-hero__bubble {
  width: clamp(240px, 40vw, 400px);
  height: clamp(240px, 40vw, 400px);
  border-radius: var(--radius-full);
  background: var(--adn-gradient);
  padding: 3px;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.adn-hero__bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
  background: var(--surface);
}
.adn-hero__bubble-label {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
/* Scroll indicator */
.adn-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  animation: adn-bounce 2s ease-in-out infinite;
}
@keyframes adn-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(4px); }
}

/* ════════════════════════════════════════════════════════
   HERO — variante «lineup» (2026-07-29)
   ════════════════════════════════════════════════════════
   Composición en 3 bandas apiladas: bloque de texto alineado a la izquierda,
   familia de productos a todo ancho, y tira de métricas.

   Por qué NO va centrado: el texto centrado sobre una imagen centrada es el
   patrón más genérico posible. Manteniendo el texto a la izquierda y dejando
   que solo la imagen ocupe el ancho completo, la composición gana asimetría
   sin perder foco.                                                          */

.adn-hero--lineup {
  padding-block: var(--space-10) var(--space-12);
  display: block;
}
@media (min-width: 1024px) {
  .adn-hero--lineup { padding-block: var(--space-12) var(--space-16); }
}

/* El halo se recoloca hacia la derecha, detrás de la familia de productos. */
.adn-hero--lineup::before {
  background: radial-gradient(ellipse 60% 70% at 72% 50%,
    color-mix(in oklab, var(--accent) 9%, transparent),
    transparent 72%);
}

/* ── Rejilla ─────────────────────────────────────────────────────────────── */
/* En móvil se apila. A partir de 1024 px pasa a dos columnas, y esto NO es
   cosmético: apilado, la familia a su tamaño útil mide ~519 px de alto y,
   sumada a un bloque de texto de ~420 px, deja los envases fuera del fold en
   una pantalla de portátil. En dos columnas ambos caben en el primer golpe
   de vista, que es justo el objetivo del hero. */
@media (min-width: 1024px) {
  .adn-hero--lineup .adn-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "intro   lineup"
      "metrics lineup";
    align-items: center;
    column-gap: var(--space-8);
    row-gap: var(--space-8);
  }
  .adn-hero__intro  { grid-area: intro; align-self: end; }
  .adn-hero__lineup { grid-area: lineup; }
  .adn-hero--lineup .adn-hero__metrics { grid-area: metrics; align-self: start; }
}

/* ── Bloque de texto ─────────────────────────────────────────────────────── */
.adn-hero__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 58ch;
}

.adn-hero--lineup .adn-hero__title {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
}
.adn-hero--lineup .adn-hero__sub {
  max-width: 48ch;
}

/* ── Familia de productos ────────────────────────────────────────────────── */
/* max-width 1040 sobre una fuente de 1319 px = escala 0.79. Es deliberado:
   a ese tamaño la letra pequeña del render queda por debajo del umbral de
   lectura. Subirlo haría legible un texto que no es real. */
.adn-hero__lineup {
  position: relative;
  z-index: 1;
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}
.adn-hero__lineup img {
  width: 100%;
  max-width: 1040px;
  height: auto;
  /* Sombra de contacto muy suave: apoya la familia sobre el blanco sin que
     parezca recortada y pegada. */
  filter: drop-shadow(0 18px 28px color-mix(in oklab, var(--ink) 14%, transparent));

  /* Desvanecido muy leve al pie: asienta los envases sobre el blanco en vez
     de dejarlos cortados en seco. El texto falso de las etiquetas NO se
     resuelve aquí sino en el propio asset (ver cabecera de hero-lineup.php):
     lleva un desenfoque selectivo horneado de la mitad hacia abajo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

/* En escritorio la familia sangra hasta el borde del viewport.
   El margen NO va en porcentaje: un % se resuelve contra el ancho de la columna,
   que cambia con el viewport, y dejaba la imagen flotando a media distancia del
   borde — ni contenida ni sangrada. La fórmula calcula la distancia exacta que
   hay del borde de contenido del contenedor centrado al borde de la pantalla,
   así que la imagen termina siempre pegada al canto sea cual sea el ancho.
   La sección tiene overflow:hidden, de modo que no genera scroll horizontal. */
@media (min-width: 1024px) {
  .adn-hero__lineup {
    --adn-sangria: calc((100vw - min(100vw, var(--container-max))) / 2 + var(--container-pad));
    margin-top: 0;
    margin-inline-end: calc(var(--adn-sangria) * -1);
    justify-content: flex-end;
  }
  /* Se dimensiona por ALTURA, no por ancho. La imagen tiene proporción 1.53:1,
     así que fijar el ancho hace que el alto se dispare y empuje las cifras
     fuera del fold. Atándola a la altura del viewport, el hero entra entero en
     el primer golpe de vista en cualquier pantalla, y el ancho se acomoda solo. */
  .adn-hero__lineup img {
    width: auto;
    max-width: none;
    height: auto;
    max-height: min(64vh, 580px);
  }
}

/* En móvil la familia completa se vería diminuta (7 envases en 390 px), así que
   se amplía y se recorta al centro, donde está el desengrasante automotriz —
   el producto estrella del rebrand. */
@media (max-width: 700px) {
  .adn-hero__lineup {
    overflow: hidden;
    margin-inline: calc(var(--container-pad) * -1);
  }
  .adn-hero__lineup img {
    width: 165%;
    max-width: none;
    margin-inline-start: -38%;
  }
}

/* ── Tira de métricas ────────────────────────────────────────────────────── */
/* Rejilla 2×2 en lugar de una fila que se parte sola.
   Cuatro métricas en la columna estrecha del texto no caben en línea: se
   rompían en 2+2 de forma accidental, con la última huérfana. Declararlo como
   rejilla 2×2 lo convierte en una decisión y aguanta cualquier ancho. */
.adn-hero--lineup .adn-hero__metrics {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-5) var(--space-10);
  justify-content: start;
  /* Filete superior: separa las cifras del bloque de texto sin meter una caja. */
  border-top: 1px solid var(--line);
}
/* En tablet hay ancho de sobra: las cuatro en una fila. */
@media (min-width: 600px) and (max-width: 1023px) {
  .adn-hero--lineup .adn-hero__metrics {
    grid-template-columns: repeat(4, minmax(0, max-content));
  }
}

/* ════════════════════════════════════════════════════════
   HERO — variante «fondo» a sangre completa (2026-07-29)
   ════════════════════════════════════════════════════════
   Imagen a todo ancho + velo + contenido centrado, estilo P&G.

   ⚠️ El velo NO es decoración. Medida la imagen, la banda central donde va el
   texto tiene luminancia máxima 0.92 (los envases blancos): el texto blanco
   daría 1.08:1 sin velo. Con el velo actual pasa AA. Cualquier ajuste que lo
   aclare hay que re-medirlo, no estimarlo a ojo.                            */

.adn-hero--fondo {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(88vh, 760px);
  padding-block: var(--space-16);
  overflow: hidden;
  text-align: center;
}

/* El halo del hero base sobra aquí: el fondo ya es una imagen. */
.adn-hero--fondo::before { content: none; }

/* ── Imagen ──────────────────────────────────────────────────────────────── */
.adn-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.adn-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  /* Zoom lento continuo (Ken Burns). transform sobre la imagen, no sobre el
     contenedor, para no arrastrar el texto ni el velo. */
  animation: adn-hero-zoom 26s var(--ease-inout) infinite alternate;
  will-change: transform;
}
@keyframes adn-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* ── Velo ────────────────────────────────────────────────────────────────── */
/* Plano y uniforme en toda la superficie (antes eran dos capas, una radial
   centrada sobre otra lineal). El refuerzo radial se retiró a petición del
   usuario: se notaba como una mancha oscura en el centro.

   Al ser uniforme y más claro, ya no basta por sí solo para el titular: el
   trabajo de legibilidad lo comparte ahora con el glow de .adn-hero__title.
   Ver la nota de contraste más abajo. */
.adn-hero--fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Imprescindible: .adn-hero::after ya define height:1px para el filete dorado
     del fold, y en posicionamiento absoluto `height` gana sobre el par
     top/bottom. Sin esto el velo mediría 1 píxel de alto. */
  height: auto;
  z-index: -1;
  background: color-mix(in oklab, var(--ink) 63%, transparent);
  pointer-events: none;
}

/* ── Contenido ───────────────────────────────────────────────────────────── */
.adn-hero__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 72ch;
}

/* ── Titular ─────────────────────────────────────────────────────────────
   Antes eran dos líneas del mismo cuerpo y peso, y leía plano. El arreglo
   viene de la referencia (latam.pg.com), donde el titular mide 80 px y el
   impacto lo da el TAMAÑO y el aire, no el adorno:

   · línea de entrada pequeña, en peso medio → hace de rampa
   · línea principal enorme, en el peso 900 de D-DIN PRO que estaba instalado
     y sin usar (solo se llegaba a 700)
   · el acento se reduce a un ÚNICO signo, el punto final, en cyan — es el
     recurso de P&G, que colorea solo el punto de «Reporte Anual 2025.»

   Colorear la línea entera repartía el énfasis; concentrarlo en un carácter
   lo vuelve un gesto de marca.                                             */
.adn-hero--fondo .adn-hero__title {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: 1.08;

  /* ── Glow ──────────────────────────────────────────────────────────────
     Tres capas con funciones distintas, no un efecto decorativo suelto:
       1) sombra corta y opaca — despega el glifo del envase que tenga detrás
          y es la que realmente sostiene la legibilidad al aclarar el velo;
       2) sombra media difusa — halo oscuro que amplía esa separación;
       3) resplandor cyan amplio — el efecto visible, en color de marca.
     El orden importa: las oscuras van primero para quedar por debajo. */
  text-shadow:
    0 1px 2px  rgb(0 0 0 / 0.55),
    0 4px 18px rgb(0 0 0 / 0.45),
    0 0 46px   color-mix(in oklab, var(--adn-cyan) 42%, transparent);
}

.adn-hero__line--entrada {
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: color-mix(in oklab, #fff 82%, var(--adn-cyan));
}

.adn-hero__line--peso {
  font-weight: 900;
  font-size: clamp(2.75rem, 6.6vw, 5.25rem);
  letter-spacing: -.035em;
}
/* El punto final: único carácter en cyan. */
.adn-hero__line--peso::after {
  content: '.';
  color: var(--adn-cyan);
}

/* ── «ADN» con el degradado del isotipo ──────────────────────────────────
   background-clip:text pinta el texto con el degradado cyan→azul del logo.
   Dos cuidados que no son obvios:

   1) text-shadow NO sirve aquí. Con el relleno en transparent, la sombra se
      ve A TRAVÉS del glifo y lo ensucia. El halo se hace con filter:
      drop-shadow, que actúa sobre el resultado ya pintado.
   2) El azul pleno del logo (#0566f3) es demasiado oscuro para ir sobre el
      velo: se hundiría. El degradado conserva la dirección cyan→azul de la
      marca pero desplazada al tramo claro. Los tres topes están elegidos por
      luminancia medida, no a ojo — y el punto CRÍTICO es el intermedio, que
      es el más oscuro de la rampa y por tanto el que fija el contraste:

        #0ddcd1  L 0.630   cyan de marca
        #4fd3f0  L 0.545   ← el que manda: da 3.11:1 sobre el peor fondo
        #7fcdff  L 0.554

      Una versión anterior usaba #4bb4f5 en el medio (L 0.403) y bajaba a
      2.37:1. Al oscurecer cualquier tope, re-medir. */
.adn-hero__marca {
  background: linear-gradient(100deg,
    var(--adn-cyan) 0%,
    #4fd3f0 55%,
    #7fcdff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 2px 6px  rgb(0 0 0 / 0.5))
    drop-shadow(0 0 24px   color-mix(in oklab, var(--adn-cyan) 55%, transparent));
}
.adn-hero--fondo .adn-hero__sub {
  color: color-mix(in oklab, #fff 88%, var(--adn-cyan));
  max-width: 58ch;
  margin-inline: auto;
  /* Reparte las dos líneas por igual. Sin esto la frase actual cortaba dejando
     «RM.» solo en la segunda línea. Cabría en una sola línea con ~78ch, pero esa
     medida es demasiado larga para leer cómodo en un bloque centrado. */
  text-wrap: balance;
}
.adn-hero--fondo .adn-kicker { color: #fff; }
/* El filete dorado del kicker sobre fondo oscuro: se centra y se ve mejor. */
.adn-hero--fondo .adn-kicker::before {
  background: linear-gradient(90deg, transparent, var(--adn-gold));
}

.adn-hero--fondo .adn-hero__ctas { justify-content: center; }

/* CTA secundario sobre fondo oscuro: el --outline usa --line-2 y --ink, que
   sobre el velo no se ven. */
.adn-cta--sobre-oscuro {
  background: transparent;
  color: #fff;
  border-color: color-mix(in oklab, #fff 55%, transparent);
}
.adn-cta--sobre-oscuro:hover {
  background: color-mix(in oklab, #fff 14%, transparent);
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* 88vh en un teléfono deja el hero ocupando la pantalla entera y nada
     asoma por debajo: el usuario no percibe que la página continúa. */
  .adn-hero--fondo {
    min-height: min(76vh, 600px);
    padding-block: var(--space-12);
  }

  /* La imagen es apaisada (1.96:1) dentro de un hueco vertical (0.44:1), así
     que `cover` recorta ~74 % del ancho. El encuadre sube para que lo que
     quede sea la zona de etiquetas y no el centro plano de los envases. */
  .adn-hero__media img {
    object-position: center 38%;
  }

  /* Apilados y a ancho completo. En fila quedaban con anchos distintos —el
     primario más largo que el secundario— y leía como un descuadre. */
  .adn-hero--fondo .adn-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    gap: var(--space-3);
  }
  .adn-hero--fondo .adn-hero__ctas .adn-cta {
    justify-content: center;
    width: 100%;
  }
}

/* ── Movimiento reducido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .adn-hero__media img { animation: none; }
}