/* Peptivé — Sections
   Estilos de secciones de contenido, compartidos entre variantes.
   Requiere css/tokens.css y css/base.css cargados antes que este archivo. */

.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--s-3);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--s-4);
  }
}

/* Ancla de scroll para secciones con id (nav, footer): el header
   fijo (Parte 00) tapa el borde superior del viewport, así que un
   fragment-link (#ciencia, #areas, etc.) sin esto puede dejar el
   título tapado — confirmado con #areas, cuya sección tiene menos
   contenido antes del título que las demás y quedaba justo detrás
   del header. Los valores igualan la altura real del header
   (137px desktop / 75px mobile) más un margen de respiro. */
section[id] {
  scroll-margin-top: 100px;
}

@media (min-width: 1024px) {
  section[id] {
    scroll-margin-top: 160px;
  }
}

/* ============================================
   TEXTURA DE GRANO + FADE-UP EN SCROLL
   Compartidos por todo el sitio (dirección editorial Stillwater).
   ============================================ */

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   PARTE 00 — HEADER
   Barra fija traslúcida con blur sobre el hero — mismo patrón
   validado en el mockup editorial-preview.css, ahora integrado
   al sistema real. .hero-content reserva var(--s-7) de padding
   superior para no quedar oculto detrás de esta barra.
   Toggle mobile sin JS (checkbox + label, mismo espíritu que
   <details> en el FAQ de la Parte 08).
   ============================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

/* UX Uplift — Fase 3/13: el 55%+blur del header colapsado (barra
   delgada) se lee bien, pero cuando el menú mobile se expande (6 links
   + CTA) el mismo fondo translúcido deja pasar el contenido del hero
   detrás, difuminado, justo sobre el texto de los links — reduce
   legibilidad y se percibe como un glitch. Con el panel abierto, el
   header pasa a un fondo sólido (mismo color base, sin blur) --  el
   estado colapsado no cambia. */
.site-header:has(.nav-toggle-input:checked) {
  background-color: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
}

.site-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-display-light);
  font-size: var(--text-heading-m-size);
  letter-spacing: var(--tracking-logo);
  color: var(--ink-100);
}

.site-header-cta {
  display: none;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink-100);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--ink-100);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .site-header-cta {
    display: inline-flex;
  }
}

.site-header-cta:hover {
  background-color: var(--ink-100);
  color: var(--paper);
}

.site-header-cta:active {
  background-color: var(--ink-90);
  color: var(--paper);
}

.site-header-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- Toggle hamburguesa (solo mobile/tablet) --- */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 22px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ink-100);
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}

.nav-toggle-input:checked ~ .site-header-top .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-input:checked ~ .site-header-top .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle-input:checked ~ .site-header-top .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle-input:focus-visible ~ .site-header-top .nav-toggle {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- Nav: dropdown en mobile, fila centrada en desktop.
   display:none primero (mobile), el toggle solo lo abre por
   debajo de 1024px; a partir de 1024px queda siempre visible
   como segunda fila del header, sin depender del checkbox. --- */

.site-nav {
  display: none;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

@media (max-width: 1023px) {
  .nav-toggle-input:checked ~ .site-nav {
    display: block;
    padding-block: var(--s-3);
  }
}

.site-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.site-nav-link {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: 0.9375rem;
  color: var(--ink-100);
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: var(--gold);
}

.site-nav-link:active {
  color: var(--gold-deep);
}

.site-nav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.site-nav-link[aria-current="page"] {
  color: var(--gold);
  font-weight: var(--weight-body-semibold);
}

.site-nav-cta {
  display: inline-flex;
  justify-content: center;
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink-100);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--ink-100);
  text-align: center;
}

.site-nav-cta:hover {
  background-color: var(--ink-100);
  color: var(--paper);
}

.site-nav-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
  }

  .site-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-2);
  }

  .site-nav-cta {
    display: none;
  }
}

/* ============================================
   PARTE 03 — SHOP BY GOAL: 8 ÁREAS TERAPÉUTICAS (03a — tipográfica)
   ============================================ */

/* Revisión de balance cromático: se retira la salvia mineral (probada
   en una iteración anterior) -- vuelve al travertino de marca para
   que la homepage se sienta predominantemente clara, con el negro
   reservado a los insights y al cierre de compromiso profesional. */
.area-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.area-section-title {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

/* Fotografía editorial junto al encabezado (03a únicamente -- 04a
   reutiliza .area-section-title suelto, sin este wrapper, y no se ve
   afectado). Apilado en mobile (encabezado, luego foto, luego grid);
   a partir de 1024px pasan a quedar lado a lado. La imagen conserva su
   proporción nativa 3:2 vía aspect-ratio -- nunca se fuerza un recorte
   vertical que elimine a las personas de la escena. */
.area-section-header {
  margin-bottom: var(--s-5);
}

.area-section-header .area-section-title {
  margin-bottom: var(--s-4);
}

.area-section-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
}

@media (min-width: 1024px) {
  .area-section-header {
    display: flex;
    align-items: center;
    gap: var(--s-6);
  }

  .area-section-header .area-section-title {
    flex: 1 1 50%;
    margin-bottom: 0;
  }

  .area-section-media {
    flex: 1 1 50%;
  }
}

.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .area-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.area-name {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  /* Fija, no el token fluido --text-heading-m-size: esta tarjeta
     vive en un grid de 4 columnas dentro de .container (tope de
     1440px), así que su ancho real nunca crece más allá de ese
     techo aunque el viewport siga creciendo. El token fluido sí
     sigue escalando con vw sin límite de ancho de columna, y a
     partir de ~36px "Enhancement"/"Optimization" ya no caben en
     una línea — con overflow-wrap rompían a media palabra. 32px
     es el máximo seguro verificado para esta columna. */
  font-size: 1.875rem;
  line-height: 2.375rem;
  overflow-wrap: break-word;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
}

.area-context {
  margin-bottom: var(--s-3);
  max-width: 30ch;
}

.area-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-100);
}

.area-link:hover,
.area-link:focus-visible {
  color: var(--gold);
}

.area-link:active {
  color: var(--gold-deep);
}

.area-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.area-link-arrow {
  display: inline-block;
  transition: transform 400ms ease-out;
}

.area-link:hover .area-link-arrow,
.area-link:active .area-link-arrow {
  transform: translateX(4px);
}

/* --- Variante Cards (03a) ---
   Tarjeta real: fondo paper (blanco puro sobre el travertine de
   la sección), borde dorado muy desaturado a baja opacidad, y
   elevación suave en hover. Reemplaza la variante tipográfica
   sin caja de la Fase 1. */

.area-grid--cards {
  gap: var(--s-4);
}

@media (min-width: 1024px) {
  .area-grid--cards {
    gap: var(--s-5);
  }
}

.area-grid--cards .area-cell {
  background-color: var(--paper);
  border: 1px solid rgba(197, 169, 116, 0.2);
  border-radius: var(--r-md);
  padding: var(--s-4);
  transition: box-shadow 300ms ease-out, transform 300ms ease-out;
}

.area-grid--cards .area-cell:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .area-grid--cards .area-cell {
    transition: none;
  }
}

.area-mark {
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--gold);
  margin-bottom: var(--s-3);
}

/* ============================================
   PARTE 04 — TÍTULOS Y ENCABEZADOS COMPARTIDOS
   .pillars-header/-eyebrow/-headline/-intro se usan en 04b, 05,
   06, 07 y 08 — encabezado asimétrico (headline izquierda,
   párrafo derecha, alineados arriba; referencia Kinetic AI).
   ============================================ */

.pillars-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

@media (min-width: 768px) {
  .pillars-header {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--s-5);
  }
}

.pillars-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.pillars-headline {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-100);
}

.pillars-intro {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 24;
  font-size: var(--text-body-l-size);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 42ch;
}

/* ============================================
   PARTE 04a — LO MÁS DEMANDADO
   Reemplaza la grilla tipográfica de 6 tarjetas (Fase 2) — la
   regla "sin imágenes" quedó anulada por decisión explícita del
   cliente al incorporar fotografía de producto propia. Ahora son
   solo 2 productos en fila editorial alternada (imagen/texto),
   con máximo protagonismo por ítem. grid-template-areas define
   qué lado ocupa cada bloque para no depender del orden en el
   DOM — así .demand-row-media/.demand-row-body no cambian de
   posición semántica, solo de área visual.
   ============================================ */

.demand-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.demand-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  margin-top: var(--s-6);
}

.demand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "body";
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .demand-row {
    grid-template-columns: 40fr 60fr;
    grid-template-areas: "media body";
    gap: var(--s-5);
    align-items: center;
  }

  .demand-row--reverse {
    grid-template-columns: 60fr 40fr;
    grid-template-areas: "body media";
  }
}

.demand-row-media {
  grid-area: media;
}

.demand-row-body {
  grid-area: body;
}

.demand-placeholder {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  background-color: var(--travertine-deep);
  border-radius: var(--r-md);
}

@media (min-width: 768px) {
  .demand-placeholder {
    height: 400px;
  }
}

.demand-row-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
}

.demand-row-subtitle {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 24;
  font-size: var(--text-body-l-size);
  line-height: 1.5;
  color: var(--gold);
  margin-bottom: var(--s-3);
}

.demand-row-text {
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: var(--ink-70);
  max-width: 52ch;
  margin-bottom: var(--s-4);
}

/* Bloque discreto de información comercial (presentaciones vigentes),
   no una dosis recomendada -- mismo lenguaje tipográfico que
   .sources-consulted-label (label pequeño en mayúsculas + valor en
   texto de cuerpo), sin ningún tratamiento clínico/destacado. */
.demand-row-presentations {
  margin-bottom: var(--s-4);
}

.demand-row-presentations-label {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 4px;
}

.demand-row-presentations-values {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  color: var(--ink-70);
}

/* ============================================
   PARTE 04b — SERVICIO CONSULTIVO (Sprint 2)
   Split-screen a pantalla completa (mismo patrón que
   .hero-section: 45% media / 55% contenido) en vez del stepper
   horizontal con íconos de la Fase 2 — ahora es una lista
   vertical numerada con fotografía real de producto.
   ============================================ */

.consult-section {
  display: flex;
  flex-direction: column;
  background-color: var(--travertine);
}

@media (min-width: 1024px) {
  .consult-section {
    flex-direction: row;
  }
}

.consult-media {
  position: relative;
  width: 100%;
  height: 45vh;
  overflow: hidden;
  background-color: var(--travertine-deep);
}

@media (min-width: 1024px) {
  /* peptive-recursos-profesionales.png es horizontal (3:2) -- si
     .consult-media se estira (comportamiento flex por defecto) para
     igualar la altura de la columna de texto, ahora mucho más alta con
     las 4 rutas, object-fit:cover recorta un slice vertical extremo
     que deja fuera el vial por completo. align-self:flex-start +
     aspect-ratio mantienen el encuadre real de la foto en vez de
     forzarla a una relación de aspecto vertical que no le corresponde. */
  .consult-media {
    width: 45%;
    height: auto;
    align-self: flex-start;
    aspect-ratio: 3 / 2;
    position: sticky;
    top: 152px;
  }
}

.consult-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.consult-content {
  width: 100%;
  padding: var(--s-6) var(--s-4);
}

@media (min-width: 1024px) {
  .consult-content {
    width: 55%;
    padding: var(--s-6);
  }
}

/* Hub de Calculadoras (2026-09): reutiliza .consult-route* para sus 4
   accesos de igual jerarquía, sin la columna de foto -- .consult-content
   ocupa el ancho completo en vez de heredar el 55% pensado para
   convivir junto a .consult-media. */
.consult-section--no-media .consult-content {
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .consult-section--no-media .consult-content {
    width: 100%;
    padding: var(--s-7) var(--s-6);
  }
}

.consult-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.consult-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--s-3);
  max-width: 18ch;
}

.consult-intro {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--ink-70);
  max-width: 52ch;
}

/* Especificidad ol.consult-routes (no solo .consult-routes) a propósito:
   el reset ol[class] { margin:0 } de base.css (cargado antes que este
   archivo) empata en especificidad con un selector de una sola clase,
   así que .consult-routes sola pierde el margin-top contra el reset --
   necesita empatar también la especificidad (elemento+clase) para
   ganar por orden de cascada. */
ol.consult-routes {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.consult-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.consult-route:first-child {
  border-top: none;
  padding-top: 0;
}

.consult-route:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.consult-route-number {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.consult-route-title {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.2;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
  max-width: 32ch;
}

.consult-route-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-body-l-size);
  line-height: 1.4;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
  max-width: 40ch;
}

.consult-route-text {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--ink-70);
  max-width: 48ch;
}

.consult-route-cta {
  display: inline-flex;
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-100);
}

.consult-route-cta:hover,
.consult-route-cta:focus-visible {
  color: var(--gold);
}

.consult-route-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ============================================
   PARTE 05 — EL GATE (Sprint 2)
   Fondo Ink — "membresía exclusiva" en vez del QR sobre
   travertine de la Fase 3. Sigue sin formulario de captura de
   datos (nombre/cédula/WhatsApp): la única acción es un CTA que
   abre WhatsApp directo, mismo mecanismo real que ya usa el CTA
   del FAQ (Parte 08).
   ============================================ */

.gate-section {
  background-color: var(--ink);
  padding-block: var(--space-section-y);
}

.gate-centered {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.gate-centered .pillars-eyebrow {
  color: var(--gold-light);
}

.gate-centered-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 32ch;
  margin-inline: auto;
}

.gate-centered-intro {
  margin-top: var(--s-3);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  max-width: 52ch;
  margin-inline: auto;
}

.gate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  background-color: var(--travertine-deep);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-m-size);
}

.gate-cta:hover {
  background-color: var(--travertine-base);
}

.gate-cta:active {
  background-color: var(--travertine-light);
}

.gate-cta:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* ============================================
   PARTE 05b — CIENCIA Y PUREZA (Sprint 2)
   Fotografía a contraluz centrada + statement de pureza. Nota:
   el radio de 16px y el max-width de 800px son valores literales
   pedidos por el cliente, no tokens (--r-md=12px no coincidía) —
   mismo criterio que el borde rgba() de las tarjetas de áreas.
   ============================================ */

.purity-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.purity-inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.purity-media {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: var(--s-5);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 12%, transparent);
}

.purity-media img {
  display: block;
  width: 100%;
  height: auto;
}

.purity-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--s-3);
}

.purity-text {
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: var(--ink-70);
}

.purity-note {
  font-size: var(--text-body-s-size, 0.85rem);
  color: var(--ink-50);
  margin-top: var(--s-3);
}

/* ============================================
   PARTE 06b — STACKS DE INVESTIGACIÓN (catálogo, Sprint 3)
   Cascarón con 3 tarjetas de ejemplo (categoría Recuperación) —
   filtrado real por JS (ver index.html), no solo visual, para
   validar la lógica de tabs antes de cargar los 20+ stacks
   restantes. .stack-card usa flex-column + margin-top:auto en el
   CTA para que el botón quede siempre al fondo aunque el texto
   de sinergia varíe de longitud entre tarjetas.
   ============================================ */

.stacks-catalog-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.stacks-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.stacks-filter {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-30);
  background-color: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--ink-70);
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.stacks-filter:hover {
  border-color: var(--ink-100);
  color: var(--ink-100);
}

.stacks-filter.is-active {
  background-color: var(--ink-100);
  border-color: var(--ink-100);
  color: var(--paper);
}

.stacks-filter:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.stacks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

/* QA de lanzamiento — Hallazgo 2: margin-top de arriba nunca se
   renderizaba. base.css trae `ul[class] { margin: 0; }` (especificidad
   0-1-1), que le gana a `.stacks-grid` sola (0-1-0) — el separador
   quedaba en 0px pese a estar declarado. Se sube la especificidad
   calificando con la sección padre, sin tocar el reset global (usado
   por más listas del sitio). 24px mobile / 32px desktop: la escala de
   tokens no tiene un paso entre --s-3 (24px) y --s-4 (40px). */
.stacks-catalog-section .stacks-grid {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .stacks-catalog-section .stacks-grid {
    margin-top: 32px;
  }

  .stacks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .stacks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stacks-empty {
  margin-top: var(--s-6);
  color: var(--ink-50);
}

.stack-card {
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-md);
  padding: var(--s-5);
  /* UX Uplift — Fase 10/12: mismo patrón de elevación ya usado en
     .portfolio-teaser (sombra en reposo + leve elevación al pasar el
     mouse) -- esta card era la única del "card family" sin ninguna
     de las dos, quedaba visualmente plana frente al resto del sitio. */
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

.stack-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .stack-card {
    transition: none;
  }
}

/* .stack-card{display:flex} de arriba pisa la regla nativa del
   navegador para [hidden] (display:none) porque un selector de
   clase gana a un selector de atributo en la cascada — sin esto,
   el filtrado por JS (card.hidden = true) no ocultaba nada
   visualmente aunque el atributo sí se aplicaba. */
.stack-card[hidden] {
  display: none;
}

.stack-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

.stack-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-2);
  border-radius: var(--r-pill);
  background-color: var(--travertine);
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-70);
}

.stack-tag--premium {
  background-color: var(--gold-pale);
  color: var(--gold-deep);
}

.stack-card-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.15;
  overflow-wrap: break-word;
  color: var(--ink-100);
  /* s-2 en vez de s-1: los stacks de Metabolismo/Longevidad no
     traen .stack-card-subtitle (no se dio copy para ellos), así
     que el título queda seguido directo de "PRODUCTOS INCLUIDOS"
     — necesita más aire que cuando hay subtítulo de por medio. */
  margin-bottom: var(--s-2);
}

.stack-card-subtitle {
  color: var(--ink-70);
  margin-bottom: var(--s-4);
}

.stack-card-products {
  margin-bottom: var(--s-4);
}

.stack-card-products-label,
.stack-card-synergy-label {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.stack-card-products-label {
  color: var(--ink-50);
}

.stack-product-list {
  display: flex;
  flex-direction: column;
}

.stack-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-1);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.stack-product:last-child {
  border-bottom: none;
}

.stack-product-name {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: var(--weight-body-medium);
  color: var(--ink-100);
}

.stack-product-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
  flex-shrink: 0;
}

.stack-product-dose {
  font-size: var(--text-body-m-size);
  color: var(--ink-50);
  white-space: nowrap;
}

.stack-card-synergy {
  background-color: var(--travertine-light);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}

.stack-card-synergy-label {
  color: var(--gold-deep);
}

.stack-card-synergy-text {
  font-size: var(--text-body-m-size);
  color: var(--ink-70);
}

.stack-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background-color: var(--ink-100);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-m-size);
}

.stack-card-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.stack-card-cta:hover {
  background-color: var(--ink-90);
}

.stack-card-cta:active {
  background-color: var(--ink-70);
}

.stack-card-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- Banner final "Arma tu Propio Stack" ---
   Vive fuera de .stacks-grid (hermano, no hijo), así que el JS
   de filtrado por tabs no lo toca — .stacks-filter solo consulta
   .stack-card, y este banner no lleva esa clase. */

.stacks-cta-banner {
  margin-top: var(--s-6);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background-color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
}

.stacks-cta-icon {
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--s-3);
}

.stacks-cta-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--s-3);
}

.stacks-cta-text {
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: var(--ink-70);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--s-4);
}

.stacks-cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  background-color: var(--ink-100);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-m-size);
}

.stacks-cta-button:hover {
  background-color: var(--ink-90);
}

.stacks-cta-button:active {
  background-color: var(--ink-70);
}

.stacks-cta-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================
   PARTE 07 — CIENCIA / MISIÓN
   Reutiliza el encabezado asimétrico (.pillars-header) con
   overrides de color para fondo oscuro — la estructura no
   cambia.
   ============================================ */

.science-section {
  background-color: var(--ink);
  padding-block: var(--space-section-y);
}

.science-section .pillars-eyebrow {
  color: var(--gold-light);
}

.science-section .pillars-headline {
  color: var(--paper);
}

.science-section .pillars-intro {
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}

.science-section .e-gold {
  color: var(--gold-light);
}

.science-body {
  max-width: 65ch;
}

.science-subtitle {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-heading-m-size);
  line-height: var(--text-heading-m-line);
  color: var(--paper);
  margin-bottom: var(--s-2);
}

.science-subtitle:not(:first-child) {
  margin-top: var(--s-5);
}

.science-text {
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

.science-ps {
  margin-top: var(--s-5);
}

.science-divider {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--gold-light);
  margin-bottom: var(--s-3);
}

.science-ps-text {
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: var(--paper);
}

.science-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-m-size);
  color: var(--paper);
}

.science-cta:hover {
  border-color: var(--paper);
  background-color: color-mix(in srgb, var(--paper) 8%, transparent);
}

.science-cta:active {
  background-color: color-mix(in srgb, var(--paper) 14%, transparent);
}

.science-cta:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ============================================
   PARTE 08 — FAQ + CTA A WHATSAPP
   ============================================ */

.faq-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.faq-list {
  max-width: 760px;
  margin-top: var(--s-5);
  border-top: 1px solid var(--ink-30);
}

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

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-4);
  list-style: none;
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: var(--ink-100);
  cursor: pointer;
}

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

.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-weight: var(--weight-body-regular);
  font-size: var(--text-heading-m-size);
  line-height: 1;
  color: var(--ink-50);
  transition: transform 400ms ease-out;
}

.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-question:hover {
  color: var(--gold);
}

.faq-question:active {
  color: var(--gold-deep);
}

.faq-question:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.faq-answer {
  max-width: 60ch;
  padding-bottom: var(--s-4);
  color: var(--ink-70);
}

.cta-block {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--s-6);
  text-align: center;
}

.cta-block .pillars-eyebrow {
  display: block;
}

.cta-title {
  font-weight: var(--weight-body-bold);
  font-size: var(--text-heading-m-size);
  line-height: var(--text-heading-m-line);
  color: var(--ink-100);
  margin-bottom: var(--s-2);
}

.cta-text {
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  color: var(--ink-70);
  margin-bottom: var(--s-4);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background-color: var(--ink-100);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
}

.cta-button:hover {
  background-color: var(--ink-90);
}

.cta-button:active {
  background-color: var(--ink-70);
}

.cta-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================
   PARTE 11 — NEWSLETTER (captación de leads, antes del footer)
   ============================================ */

.newsletter-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.newsletter-inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.newsletter-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--s-4);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 440px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .newsletter-form {
    flex-direction: row;
  }
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  background-color: var(--paper);
  font-size: var(--text-body-m-size);
  color: var(--ink-100);
}

.newsletter-input::placeholder {
  color: var(--ink-30);
}

.newsletter-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.newsletter-submit {
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.newsletter-feedback {
  max-width: 440px;
  margin-inline: auto;
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  font-size: var(--text-body-m-size);
  color: var(--ink-100);
}

.newsletter-feedback a {
  color: var(--ink-100);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-disclaimer {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-50);
}

/* ============================================
   PARTE 09 — FOOTER + AVISO RUO
   Fondo Ink — única franja oscura además de Ciencia/Misión
   (Parte 07). Todas las clases footer-* son exclusivas de esta
   sección (no se reutilizan en otra parte del sitio), así que
   sus colores se fijan directo en modo oscuro sin necesitar el
   patrón de override usado en .science-section.
   ============================================ */

.footer-section {
  background-color: var(--ink);
  padding-top: var(--s-6);
  padding-bottom: var(--s-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer-brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-display-light);
  font-size: var(--text-heading-m-size);
  line-height: var(--text-heading-m-line);
  letter-spacing: var(--tracking-logo);
  color: var(--paper);
  margin-bottom: var(--s-2);
}

.footer-brand-text {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  max-width: 32ch;
}

.footer-column-title {
  font-weight: var(--weight-body-bold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--s-3);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.footer-contact-text {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  max-width: 32ch;
  margin-bottom: var(--s-3);
}

.footer-link {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--gold-light);
}

.footer-link:active {
  color: var(--gold);
}

.footer-link:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}

.footer-ruo {
  max-width: 75ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

.footer-copyright {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 45%, transparent);
}

/* ============================================
   PARTE 01 — HERO (dirección editorial Stillwater)
   Reemplaza la versión oscura/masiva original. Split screen
   cálido sobre travertino, tipografía Fraunces + Inter.
   ============================================ */

.hero-section {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--travertine);
}

@media (min-width: 1024px) {
  .hero-section {
    flex-direction: row;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-7) var(--s-4) var(--s-5);
}

@media (min-width: 1024px) {
  .hero-content {
    width: 55%;
    padding: var(--s-6);
  }
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-headline {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  /* +30% sobre el tamaño anterior (clamp(2.5rem, 5.5vw, 4.75rem)) --
     mayor presencia visual del headline, verificado sin overflow en
     390/430/1440px (ver tests/homepage-editorial.test.mjs). */
  font-size: clamp(3.25rem, 7.2vw, 6.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink-100);
}

.hero-subtitle {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 24;
  font-size: var(--text-body-l-size);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 48ch;
}

/* Agrupa el CTA principal (botón) y el secundario (link de texto) con un
   gap más ajustado que el resto de .hero-content -- se leen como un par,
   no como dos bloques de contenido independientes. */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}

.hero-cta {
  display: inline-flex;
  width: fit-content;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  background-color: var(--ink-100);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--paper);
}

.hero-cta:hover {
  background-color: var(--ink-90);
  border-color: var(--ink-90);
}

.hero-cta:active {
  background-color: var(--ink-70);
  border-color: var(--ink-70);
}

.hero-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* CTA secundario -- link de texto discreto, mismo lenguaje visual que
   .calc-hero-tool-link en calculadora.css (subrayado, ink-50, hover
   gold-deep), sin competir con el botón principal. */
.hero-cta-secondary {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--ink-50);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease-out;
}

.hero-cta-secondary:hover,
.hero-cta-secondary:focus-visible {
  color: var(--gold-deep);
}

.hero-scroll-indicator {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-50);
}

.hero-scroll-indicator::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--ink-50);
}

.hero-media {
  position: relative;
  width: 100%;
  height: 45vh;
  overflow: hidden;
  background-color: var(--travertine-deep);
}

@media (min-width: 1024px) {
  .hero-media {
    width: 45%;
    height: auto;
  }
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-breath 8s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img {
    animation: none;
  }
}

/* ============================================
   PARTE 02 — LOS 3 PILARES (valor bajo el hero)
   Grid de tarjetas Paper sobre fondo Travertine-light, mismo
   patrón visual que .ciencia-pilar-card (ciencia.css) — marca
   dorada, título Fraunces, texto de cuerpo. Reimplementado aquí
   porque sections.css es compartido y ciencia.css no carga en
   index.html.
   ============================================ */

.value-pillars-section {
  background-color: var(--travertine-light);
  padding-block: var(--space-section-y);
}

.value-pillars-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .value-pillars-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.value-pillar-card {
  background-color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

.value-pillar-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .value-pillar-card {
    transition: none;
  }
}

.value-pillar-mark {
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--gold);
  margin-bottom: var(--s-3);
}

.value-pillar-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.2;
  overflow-wrap: break-word;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
}

.value-pillar-text {
  color: var(--ink-70);
}

/* ============================================
   PARTE 02c — ¿POR QUÉ INTEGRAR LA TERAPIA
   PEPTÍDICA? (3 viñetas de valor B2B)
   Franja limpia y ligera, fondo Paper con hairline —
   mismo tratamiento que la vieja barra de trust badges,
   para no competir visualmente con las tarjetas de
   Pilares que la preceden.
   ============================================ */

/* ============================================
   CUATRO SEÑALES DE OPORTUNIDAD -- inteligencia de mercado/evidencia,
   no marketing: cada tarjeta es cifra + titular breve + explicación +
   fuente discreta. Sin checks, sin look de dashboard/SaaS (ver
   docs/homepage-editorial-sources.md).
   Ajuste de color (dirección editorial aprobada, revisión post-verde):
   fondo negro suave (--ink, #0D0D0D) como pausa editorial -- reemplaza
   el verde petróleo de la iteración anterior, retirado del balance
   cromático de la homepage. Las tarjetas (.insights-card) permanecen
   claras sin cambios; solo el texto que vive directamente sobre el
   fondo negro (título/intro/fuentes consultadas) usa tonos claros para
   mantener contraste AA -- esas reglas ya usaban paper/travertine
   (pensadas para un fondo oscuro), así que no cambian con este ajuste.
   ============================================ */
.insights-section {
  background-color: var(--ink);
  padding-block: var(--s-6);
}

.insights-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-m-size);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-align: center;
  max-width: 36ch;
  margin-inline: auto;
  margin-bottom: var(--s-3);
}

.insights-intro {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--travertine);
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--s-5);
}

/* 4 tarjetas -> grilla 2x2 real en desktop (no 3+1): grid-auto-rows
   además hace que ambas filas usen la altura de su fila más alta sin
   necesidad de padding extra ni min-height fijo. */
.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  max-width: 880px;
  margin: 0 auto var(--s-4);
}

@media (min-width: 640px) {
  .insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.insights-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background-color: var(--travertine-light);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-left: 3px solid var(--gold-deep);
}

.insights-figure {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-100);
}

.insights-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--ink-100);
}

.insights-text {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--ink-70);
}

.insights-source {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
}

.insights-source:hover,
.insights-source:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Ver evidencia" -- disclosure nativo details/summary (mismo patrón
   accesible que .faq-item, en una variante compacta para vivir dentro
   de una tarjeta). Anclado al fondo de la tarjeta vía margin-top:auto
   para que las 2 tarjetas de cada fila (altura igualada por el grid)
   siempre abran el control a la misma altura. */
.insights-evidence {
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.insights-evidence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-deep);
}

.insights-evidence-toggle::-webkit-details-marker {
  display: none;
}

.insights-evidence-toggle::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body-regular);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-50);
  transition: transform 300ms ease-out;
}

.insights-evidence[open] .insights-evidence-toggle::after {
  transform: rotate(45deg);
}

.insights-evidence-toggle:hover,
.insights-evidence-toggle:focus-visible {
  color: var(--gold);
}

.insights-evidence-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.insights-evidence-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-3);
}

.insights-evidence-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insights-evidence-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--ink-50);
}

.insights-footnote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--ink-50);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--s-5);
}

/* ============================================
   PARTE 10 — BIBLIOTECA DE PÉPTIDOS Y PRÁCTICA CLÍNICA
   Sección educativa, unbranded. Misma dirección editorial que
   el Hero (Fraunces + Inter, grano, fade-up).
   ============================================ */

.edu-section {
  background-color: var(--travertine);
  padding-block: var(--space-section-y);
}

.edu-subsection {
  margin-top: var(--s-6);
}

.edu-subsection-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
}

/* --- Biblioteca de péptidos: grid de 4, bordes finos, look de
   artículo de revista científica — sin imágenes, sin sombra. --- */

.peptide-library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--ink-30);
}

@media (min-width: 768px) {
  .peptide-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.peptide-card {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--ink-30);
}

@media (min-width: 768px) {
  .peptide-card {
    border-bottom: none;
    border-left: 1px solid var(--ink-30);
  }

  .peptide-card:first-child {
    border-left: none;
  }
}

.peptide-card-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.15;
  overflow-wrap: break-word;
  color: var(--ink-100);
  margin-bottom: var(--s-1);
}

.peptide-card-subtitle {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--s-3);
}

.peptide-card-text {
  color: var(--ink-70);
}

/* --- Avances y estrategias clínicas: lista editorial vertical --- */

.edu-article-list {
  display: flex;
  flex-direction: column;
}

.edu-article {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--ink-30);
}

.edu-article:last-child {
  border-bottom: 1px solid var(--ink-30);
}

@media (min-width: 768px) {
  .edu-article {
    flex-direction: row;
    gap: var(--s-4);
  }
}

.edu-article-date {
  flex: 0 0 auto;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.1;
  color: var(--gold);
}

@media (min-width: 768px) {
  .edu-article-date {
    flex: 0 0 var(--s-7);
  }
}

.edu-article-body {
  flex: 1 1 auto;
  min-width: 0;
}

.edu-article-title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.2;
  color: var(--ink-100);
  max-width: 60ch;
  margin-bottom: var(--s-2);
}

.edu-article-excerpt {
  color: var(--ink-70);
  max-width: 65ch;
}

.edu-article-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
}

.edu-article-link:hover,
.edu-article-link:focus-visible {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================
   PARTE 05c — COMPROMISO CON LA CONFIANZA DEL PROFESIONAL
   Declaración editorial de principios de confianza (Peptivé
   Trust Standard 1.0). Sin iconos/badges/cards/sombras —
   numeración 01–06 y líneas finas como único recurso visual.
   ============================================ */

.trust-commitment-section {
  background-color: var(--paper);
  padding-block: var(--space-section-y);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.trust-commitment-header {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  text-align: center;
}

.trust-commitment-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.trust-commitment-title {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-heading-l-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--s-4);
}

.trust-commitment-intro {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--ink-70);
  max-width: 56ch;
  margin-inline: auto;
}

.trust-commitment-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--s-6);
}

@media (min-width: 768px) {
  .trust-commitment-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trust-commitment-principle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.trust-commitment-principle:first-child {
  border-top: none;
  padding-top: 0;
}

@media (min-width: 768px) {
  .trust-commitment-principle:nth-child(2) {
    border-top: none;
    padding-top: 0;
  }
  .trust-commitment-principle:nth-child(3),
  .trust-commitment-principle:nth-child(4) {
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    padding-top: var(--s-5);
  }
}

.trust-commitment-number {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.trust-commitment-principle-title {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-heading-m-size);
  line-height: 1.2;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
  max-width: 32ch;
}

.trust-commitment-principle-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-body-l-size);
  line-height: 1.4;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
  max-width: 40ch;
}

.trust-commitment-principle-text {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  color: var(--ink-70);
  max-width: 48ch;
}

.trust-commitment-principle-cta {
  display: inline-flex;
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-100);
}

.trust-commitment-principle-cta:hover,
.trust-commitment-principle-cta:focus-visible {
  color: var(--gold);
}

.trust-commitment-principle-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Ajuste de color (revisión de balance cromático): banda en negro
   suave (--ink) en vez del verde petróleo de la iteración anterior --
   sigue siendo una pausa puntual SOLO en el cierre comercial, no toda
   la sección. Contenida (radio propio), no a sangre completa, para no
   leer como un segundo bloque oscuro pegado al resto de la página.
   Fotografía (computadora.png): apilada arriba del contenido en
   mobile, y a partir de 900px pasa a ocupar la columna derecha,
   aprovechando el escritorio despejado del lado izquierdo de la foto
   como transición natural hacia el bloque de texto -- ningún texto se
   superpone a la imagen, los CTAs no cambian. */
.trust-commitment-closing-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-6);
  background-color: var(--ink);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 900px) {
  .trust-commitment-closing-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.trust-commitment-closing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5);
  text-align: center;
}

@media (min-width: 900px) {
  .trust-commitment-closing-content {
    align-items: flex-start;
    text-align: left;
  }
}

.trust-commitment-closing-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 900px) {
  .trust-commitment-closing-media {
    height: 100%;
  }

  .trust-commitment-closing-media img {
    height: 100%;
    aspect-ratio: auto;
  }
}

.trust-commitment-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  background-color: var(--gold);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--ink-100);
}

.trust-commitment-cta-primary:hover {
  background-color: var(--gold-light);
  border-color: var(--gold-light);
}

.trust-commitment-cta-primary:active {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

.trust-commitment-cta-primary:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.trust-commitment-cta-secondary {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--travertine);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease-out;
}

.trust-commitment-cta-secondary:hover,
.trust-commitment-cta-secondary:focus-visible {
  color: var(--gold-light);
}

.trust-commitment-cta-secondary:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* ============================================
   RELEASE 2026-09-10 — RITMO VISUAL HOME
   Alcance cerrado: únicamente Home. Alterna dos fondos claros
   (travertine / travertine-light) sin modificar layout, tipografía,
   espaciados ni componentes. Otros módulos que reutilizan estas
   clases conservan sus estilos base.
   ============================================ */

.home-page .hero-section,
.home-page .insights-section,
.home-page .demand-section,
.home-page .purity-section,
.home-page .stacks-catalog-section,
.home-page .faq-section,
.home-page .newsletter-section {
  background-color: var(--travertine);
}

.home-page .value-pillars-section,
.home-page .area-section,
.home-page .consult-section,
.home-page .trust-commitment-section,
.home-page .science-section,
.home-page .edu-section {
  background-color: var(--travertine-light);
}

/* Insights y Ciencia/Misión eran las dos franjas oscuras del baseline.
   Solo en Home pasan a claro; estos overrides cambian exclusivamente
   los colores necesarios para conservar contraste y jerarquía. */
.home-page .insights-title,
.home-page .science-section .pillars-headline,
.home-page .science-subtitle,
.home-page .science-ps-text {
  color: var(--ink-100);
}

.home-page .insights-intro,
.home-page .science-section .pillars-intro,
.home-page .science-text {
  color: var(--ink-70);
}

.home-page .science-section .pillars-eyebrow,
.home-page .science-section .e-gold {
  color: var(--gold);
}

.home-page .science-divider {
  background-color: var(--gold);
}

.home-page .science-cta {
  border-color: var(--ink-30);
  color: var(--ink-100);
}

.home-page .science-cta:hover {
  border-color: var(--ink-100);
  background-color: color-mix(in srgb, var(--ink) 4%, transparent);
}

.home-page .science-cta:active {
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
}

.home-page .science-cta:focus-visible {
  outline-color: var(--gold);
}