/* =========================================================
   SERENA · Hoja de estilos global
   Sistema de diseño minimalista, alto contraste (WCAG 2.1 AA).
   Compatible con Bootstrap 5.3 (se carga antes que este archivo).
   ========================================================= */

:root {
  /* =========================================================
     Paleta 2026: derivada de los 4 colores predominantes de la
     nueva línea gráfica (verde vivo #00BF63, verde salvia #83C7A0,
     magenta #830D9C, morado profundo #5C418E). El resto de los
     tokens de esta sección son variaciones (tintes/sombras) de esos
     4 colores — no hay tonos sueltos sin relación. Se evitan a
     propósito el rosa, el rojo puro y el celeste: los estados que
     antes usaban esos tonos se re-derivaron dentro de la familia
     verde/morado, o hacia un naranja-terracota cálido.
     ========================================================= */

  /* Marca: verde vivo de la nueva paleta. Uso: acentos, íconos,
     indicadores y detalles de marca — NUNCA como texto ni botón sólido
     (blanco sobre este verde da 2,43:1, insuficiente para texto). */
  --serena-primary: #00BF63;

  /* Acciones y texto: derivación oscura accesible del verde de marca.
     Uso: enlaces, botones sólidos, radios seleccionados, navegación
     activa, burbujas de chat — todo lo que combina texto/blanco con verde. */
  --serena-action: #008545;
  --serena-action-hover: #006635;
  --serena-primary-dark: #008545;
  /* alias histórico, mismo valor que --serena-action */
  --serena-primary-tint: #E6F9EF;

  /* Superficies: distribución 60 (blanco/off-white) – 30 (menta/lila) – 10 (verde) */
  --serena-bg: #FCFBF8;
  --serena-bg-soft: #E6F9EF;
  --serena-surface: #FFFFFF;

  /* Secundario suave: acompañamiento puntual, nunca dominante.
     Morado profundo de la nueva paleta (antes un lila más apagado). */
  --serena-secondary-bg: #F1EEF7;
  --serena-secondary-text: #5C418E;
  --serena-accent: #5C418E;
  --serena-accent-dark: #443069;

  /* Acentos pastel adicionales: fondos suaves reutilizados en el banner de la
     app, el carrusel de FAQ y pruebas.html. Se centralizan aquí para no
     tener colores sueltos. --serena-pink-tint conserva el nombre histórico
     por compatibilidad, pero ya no es rosa: es un lila muy pálido, derivado
     del morado de marca, para evitar el rosa en la nueva línea gráfica. */
  --serena-lilac-faint: #FAF9FC;
  --serena-mint-deep: #C7E6D4;
  /* Verde menta suave: el 2º de los 4 tonos protagonistas de la línea
     gráfica informal (distinto de --serena-mint-deep, que es un tinte
     mucho más pálido para fondos de tarjeta). Este se usa como color
     SÓLIDO de sección/fondo, no solo como tinte de apoyo. */
  --serena-mint-soft: #83C7A0;
  --serena-mint-soft-rgb: 131, 199, 160;
  --serena-pink-tint: #F7F6F9;
  --serena-purple-accent: #830D9C;

   /* Acentos pastel adicionales: fondos suaves reutilizados en el banner de la
     app, el carrusel de FAQ y pruebas.html. Se centralizan aquí para no
     tener colores sueltos. --serena-pink-tint conserva el nombre histórico
     por compatibilidad, pero ya no es rosa: es un lila muy pálido, derivado
     del morado de marca, para evitar el rosa en la nueva línea gráfica. */
  /* Cálido a sangre, solo para el bloque "Acompañamiento confiable": el
     cliente pidió un crema propio (distinto de --serena-bg, #FCFBF8) para que
     ese bloque corte el recorrido igual que el morado lo hace en el hero.
     No reemplaza --serena-bg en ningún otro lugar del sitio. */
  --serena-cream-band: #FEF9EA;
  --serena-lilac-faint: #FAF9FC;
  --serena-mint-deep: #C7E6D4;

  /* Derivados suaves para íconos/estados. --serena-accent-blue ya no es un
     azul/celeste: es un morado claro derivado de la marca. --serena-accent-red
     se corrió del rojo puro hacia un terracota cálido (naranja quemado),
     coherente con --serena-accent-orange, para no usar rojo en la web. */
  --serena-accent-orange: #D98C4A;
  --serena-accent-blue: #7B58BB;
  --serena-accent-red: #8E414D;
  /* Ámbar/dorado — representa la orina (gota), a diferencia del ámbar de
     --serena-warn-text que es más oscuro/apagado (pensado para texto). */
  --serena-accent-amber: #C99A2E;

  /* Versiones "claras" de esos mismos acentos, para fondos suaves detrás de
     un ícono (en vez del círculo sólido + ícono blanco). Verde/ámbar ya
     tenían su tinte oficial (--serena-primary-tint / --serena-warn-bg). */
  --serena-blue-tint: #EDE8F5;
  --serena-red-tint: #F5EAE6;

  /* Texto */
  --serena-text: #23282B;
  --serena-text-soft: #545B5F;

  /* Bordes: decorativo vs. control funcional (inputs, botones, radios) */
  --serena-border: #DEDCD5;
  --serena-control-border: #747D76;

  /* Estados: siempre acompañados de texto/ícono, nunca solo color.
     "Urgente" se corrió del rojo hacia el mismo terracota cálido que
     --serena-accent-red (mismo tono, más oscuro), en vez de un rojo puro. */
  --serena-warn-bg: #FCF3E3;
  --serena-warn-text: #7A4A12;
  --serena-warn-border: #7A4A12;
  --serena-urgent-bg: #F1EAE8;
  --serena-urgent-text: #753215;
  --serena-urgent-border: #753215;

  /* Foco visible: morado oscuro de marca en vez de azul, para no romper la
     paleta cálida con un celeste. */
  --serena-focus: #3E2768;

  /* Forma y espacio */
  --radius-sm: .5rem;
  /* 8px */
  --radius-md: .75rem;
  /* 12px */
  --radius-lg: 1rem;
  /* 16px */
  --serena-shadow: 0 6px 20px rgb(35 40 43 / 7%);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Canal RGB de los MISMOS colores de marca de arriba (ningún tono nuevo):
     permite componer rgba(var(--x-rgb), alpha) para bordes/sombras/fondos
     translúcidos derivados, en vez de definir hex sueltos adicionales. */
  --serena-primary-rgb: 0, 191, 99;
  --serena-action-rgb: 0, 133, 69;
  --serena-purple-accent-rgb: 131, 13, 156;
  --serena-accent-orange-rgb: 217, 140, 74;
  --serena-accent-red-rgb: 169, 78, 45;
  --serena-text-rgb: 35, 40, 43;

  /* ---- Sistema de tarjetas: mismo radio, borde y elevación en toda la web ----
     Reposo: sombra neutra tenue (igual espíritu que --serena-shadow).
     Hover/foco: se eleva 2px y la sombra pasa a un verde de marca tenue —
     nunca un tono nuevo, solo --serena-action con opacidad baja. */
  --card-radius: var(--radius-lg);
  /* Paneles grandes de una sola pieza (hero, banners, recuadros de
     resultado): un radio propio, un escalón más suave que --card-radius,
     compartido por TODOS en vez de cada uno con su propio valor (antes
     entre 1rem y 28px según el componente). */
  --panel-radius: 1.25rem;
  --card-border-color: rgba(var(--serena-action-rgb), .16);
  --card-border-color-hover: rgba(var(--serena-action-rgb), .35);
  --card-shadow-rest: 0 2px 10px rgba(var(--serena-text-rgb), .05);
  --card-shadow-hover: 0 10px 22px rgba(var(--serena-action-rgb), .16);
  --card-transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

  /* Alto del encabezado fijo (navbar), usado para que los enlaces con ancla
     (#id) no queden tapados al hacer scroll. */
  --header-offset: 6.5rem;

  /* Altura única que comparten TODOS los controles inline del navbar en escritorio
     (enlaces, botón CTA) para que quede una sola línea base. */
  --nav-h: 2.5rem;
  /* 40px */
  --nav-h-mobile: 2.75rem;
  /* 44px, tamaño táctil mínimo recomendado */
}

* {
  scroll-behavior: smooth;
}

html {
  scroll-padding-top: var(--header-offset);
  /* evita que el header pegajoso tape los anclajes */
}

body {
  background-color: var(--serena-bg);
  color: var(--serena-text);
  font-family: "Nunito Sans", "Segoe UI", "Atkinson Hyperlegible", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* Jerarquía tipográfica: tamaño fluido (clamp) y margen inferior consistente
   (escala --space-*) en vez de valores ad-hoc repetidos por componente. Las
   clases de componente que necesitan un margen distinto lo siguen pudiendo
   sobrescribir (mayor especificidad), esto solo fija una base común. */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Baloo 2", "Nunito Sans", "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--serena-primary-dark);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}

h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  margin-bottom: var(--space-3);
}

/* Enlace "saltar al contenido": visible solo con foco de teclado */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--serena-action);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 700;
  z-index: 2000;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ---------- Logotipo Serena (isologo/isotipo reales) ---------- */
.brand-logo {
  height: 2.1rem;
  /* navbar: ver además .site-header .brand-logo con var(--nav-h) */
  width: auto;
  display: block;
}

/* En el navbar, el logo comparte el mismo eje de altura que el resto de controles */
.site-header .brand-logo {
  height: var(--nav-h);
}

/* En el footer (fondo oscuro) se usa la versión blanca del isologo, un poco más grande */
.site-footer .brand-logo {
  height: 2.6rem;
}

a {
  color: var(--serena-action);
  transition: color .15s ease;
}

a:hover {
  color: var(--serena-action-hover);
}

::selection {
  background: var(--serena-accent);
  color: #fff;
}

/* Foco visible accesible en toda la web */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Contenido según país (Bolivia vs. resto de Latinoamérica) ----------
   El sitio no detecta la ubicación por IP (no hay backend, y enviar la IP de
   quien visita a un tercero de geolocalización contradice la postura de
   privacidad del sitio): la persona elige su país una sola vez con el
   selector (#countryBanner en el HTML, lógica en main.js) y la preferencia
   se guarda en localStorage, nunca en un servidor. Por defecto se muestra el
   contenido de Bolivia (audiencia principal); .is-general-country la invierte.
   Un script inline en <head> aplica la clase antes del primer pintado para
   que no haya parpadeo de contenido en visitas que ya eligieron "otro país". */
[data-country-content="general"] {
  display: none;
}

.is-general-country [data-country-content="BO"] {
  display: none;
}

.is-general-country [data-country-content="general"] {
  display: block;
}

.country-banner {
  background: var(--serena-primary-tint);
  border-bottom: 1px solid var(--serena-primary);
}

.country-banner .container {
  color: var(--serena-primary-dark);
  font-size: .9rem;
}

/* Bordes de campos y controles: distinguibles de los bordes decorativos */
.form-control {
  border-color: var(--serena-control-border);
}

.form-control:focus {
  border-color: var(--serena-action);
  box-shadow: 0 0 0 .2rem rgba(27, 110, 52, .15);
}

/* =========================================================
   NAVBAR — sistema de altura única
   Todo elemento inline del navbar (marca, enlaces, botón CTA) comparte
   var(--nav-h) y se centra con inline-flex +
   align-items:center, para quedar sobre el mismo eje horizontal sin
   depender de que el texto y los íconos tengan la misma línea base.
   ========================================================= */
.site-header {
  background: var(--serena-surface);
  border-bottom: none;
  box-shadow: var(--serena-shadow);
  /* position:sticky directo (no solo depender de la utilidad .sticky-top del
     HTML): antes esto era position:relative, que pisaba el position:sticky
     de .sticky-top (misma especificidad, pero styles.css carga después de
     Bootstrap) y el header terminaba desplazándose con el scroll en vez de
     quedarse fijo arriba. */
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar {
  row-gap: .5rem;
}

.navbar>.container-fluid {
  display: flex;
  align-items: center;
  /* marca, toggler y collapse sobre el mismo eje */
  /* En pantallas anchas, .container-fluid llega hasta el borde del viewport y
     separa demasiado el logo/CTA del menú central. Se limita el ancho útil
     del navbar (no el del header, que sigue a todo lo ancho) para que todo
     el contenido quede agrupado, sin llegar a tocar los enlaces del menú. */
  max-width: 1330px;
  margin-left: auto;
  margin-right: auto;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: var(--nav-h);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--serena-primary-dark);
  text-decoration: none;
  transition: opacity .15s ease;
  flex: none;
}

.brand:hover {
  opacity: .8;
}

/* Hoja pequeña que "crece" del enlace/botón activo del menú — la marca de
   página actual deja de ser solo texto sobre relleno verde. */
.navbar-nav .nav-link.active,
.site-header .btn-serena-accent.active {
  position: relative;
}

.nav-leaf {
  position: absolute;
  top: -7px;
  right: 0;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.nav-leaf svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* La fila de navegación también se centra verticalmente como conjunto */
.navbar-collapse {
  display: flex;
  align-items: center;
}

.navbar-nav {
  display: flex;
  align-items: center;
  /* cada <li> queda centrado en la fila */
  flex-wrap: wrap;
  gap: .3rem;
  row-gap: .4rem;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

/* Enlace de navbar = misma altura, mismo padding, mismo radio para TODOS
   (Gestograma, Pruebas, Interrupción, Orientador) */
.navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  line-height: 1;
  color: var(--serena-text);
  font-weight: 700;
  font-size: .86rem;
  padding: 0 .75rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

/* Ícono: mismo tamaño y mismo espacio respecto al texto en TODOS los ítems */
.navbar-nav .nav-link i {
  font-size: 1rem;
  /* ~16px, uniforme */
  line-height: 1;
  margin-right: .45rem;
  color: var(--serena-primary);
  flex: none;
  transition: color .15s ease;
}

.navbar-nav .nav-link:hover {
  background: var(--serena-primary-tint);
  color: var(--serena-action);
}

.navbar-nav .nav-link.active {
  background: var(--serena-action);
  color: #fff;
}

.navbar-nav .nav-link.active i {
  color: #fff;
}

.navbar-toggler {
  height: var(--nav-h);
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--serena-control-border);
  border-radius: var(--radius-sm);
  padding: 0 .6rem;
  flex: none;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--serena-primary-tint);
}

/* Botón CTA "Descargar Serena": único elemento con color sólido lila (acompañamiento) */
.site-header .btn-serena-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  line-height: 1;
  border-radius: 999px;
  padding: 0 1.1rem;
  white-space: nowrap;
  flex: none;
  font-size: .86rem;
}

.site-header .btn-serena-accent i {
  font-size: 1rem;
  line-height: 1;
}

/* ---------- Menú colapsado: panel vertical apilado ----------
   Cubre todo el rango en que navbar-expand-xxl mantiene el menú
   como hamburguesa (por debajo de 1400px), no solo md/sm. */
@media (max-width: 1399.98px) {
  .navbar>.container-fluid {
    align-items: center;
  }

  .navbar-collapse {
    display: block;
    /* dentro del panel, cada fila apilada, no centrada como conjunto */
    margin-top: .9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--serena-border);
  }

  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    height: auto;
    min-height: var(--nav-h-mobile);
    /* 44px, tamaño táctil accesible */
    width: 100%;
    justify-content: flex-start;
    padding: .6rem 1rem;
    border-radius: var(--radius-md);
  }

  .site-header .btn-serena-accent {
    width: 100%;
    height: var(--nav-h-mobile);
  }
}

/* ---------- Hero / portada ---------- */
.hero {
  background: var(--serena-bg-soft);
  border-radius: var(--panel-radius);
  padding: var(--space-12) var(--space-8);
}

.hero .lead {
  color: var(--serena-text-soft);
  font-size: 1.15rem;
}

/* ---------- Tarjetas de ruta / necesidad (disposición horizontal) ----------
   Grid en vez de flex: sin envolver h3+p en un <div> (no se toca el HTML),
   Grid los agrupa igual en una "columna" de texto vía grid-template-areas.
   Si la tarjeta no trae <p> (algunas variantes solo llevan ícono+título), la
   fila "desc" queda vacía y colapsa a 0 — el ícono se recentra solo, porque
   su área abarca ambas filas mediante grid-row: 1 / span 2. */
.route-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-rest);
  height: 100%;
  text-decoration: none;
  color: var(--serena-text);
  transition: var(--card-transition), background-color .15s ease;
}

.route-card:hover,
.route-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
  background: var(--serena-primary-tint);
  color: var(--serena-text);
}

.route-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  text-align: start;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 .25rem;
  color: var(--serena-primary-dark);
}

.route-card p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  text-align: start;
  font-family: "Nunito Sans", sans-serif;
  font-size: .9rem;
  color: var(--serena-text-soft);
  margin: 0;
}

/* Tarjetas sin <p> (solo ícono + título): la fila 2 nunca se crea, así que el
   ícono y el título comparten una única fila y quedan centrados entre sí de
   forma exacta (evita depender del colapso implícito de una fila vacía). */
.route-card:not(:has(p)) h3 {
  align-self: center;
  margin: 0;
}

/* ---------- Franjas de aviso ----------
   Mismo radio y ritmo de padding (escala --space-*) en las 4 variantes;
   solo cambia el color según el significado (aviso/info/privacidad). */
.notice-box {
  background: var(--serena-warn-bg);
  border: 1px solid var(--serena-warn-border);
  color: var(--serena-warn-text);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.info-box {
  background: var(--serena-bg-soft);
  border: 1px solid var(--serena-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.privacy-box {
  background: var(--serena-primary-tint);
  border: 1px solid var(--serena-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--serena-primary-dark);
}

/* ---------- Plantilla de contenido ---------- */
.answer-quick {
  background: var(--serena-surface);
  border-left: 6px solid var(--serena-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  font-size: 1.05rem;
}

.section-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--serena-primary-dark);
}

/* ---------- Botones y componentes generales ----------
   .btn-serena-primary se define más abajo, junto a los demás componentes
   del banner de la app (única definición — antes existía una segunda
   declaración redundante aquí arriba, con distinto verde y sin
   border-radius/transition; se retiró para no tener dos configuraciones
   del mismo botón). */
.btn-serena-accent {
  background: var(--serena-accent);
  border-color: var(--serena-accent);
  color: #fff;
  font-weight: 600;
}

.btn-serena-accent:hover {
  background: var(--serena-accent-dark);
  border-color: var(--serena-accent-dark);
  color: #fff;
}

.btn-outline-serena {
  border: 1.5px solid var(--serena-action);
  color: var(--serena-action);
  font-weight: 600;
  background: transparent;
}

.btn-outline-serena:hover {
  background: var(--serena-action);
  color: #fff;
}

/* Radio irregular tipo "hecho a mano" en vez de la pastilla perfecta de
   Bootstrap (el CTA del navbar mantiene su pastilla vía la regla más
   específica .site-header .btn-serena-accent, así que no se toca aquí). */
.btn-outline-serena {
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.btn-check:checked+.btn-outline-serena,
.btn-check:active+.btn-outline-serena {
  background: var(--serena-action);
  color: #fff;
  border-color: var(--serena-action);
}

/* El input real queda clipeado a 0x0 (técnica estándar de Bootstrap para
   btn-check), así que el foco de teclado necesita su propio contorno visible
   en el <label>: sin esto, tabular por estas opciones no muestra ningún
   indicador, a diferencia del resto del sitio. */
.btn-check:focus-visible+.btn-outline-serena {
  outline: 3px solid var(--serena-focus);
  outline-offset: 2px;
}

/* Grupo de opciones tipo "chip" (radios ocultos + label-botón): columnas
   iguales en vez de flex-wrap, para que ningún botón quede huérfano en su
   propia fila con ancho dispar cuando el texto más largo no entra. */
.gestograma-choice-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.gestograma-choice-group .btn {
  width: 100%;
}

/* El hover global de .btn-outline-serena rellena el botón por completo
   (fondo y borde quedan del mismo verde, así que el borde "desaparece"),
   pensado para botones de acción sólidos. Aquí son opciones sin elegir
   todavía: un relleno tenue con el borde bien visible se distingue mejor
   y no se confunde con el estado ya seleccionado (que sí es sólido). */
.gestograma-choice-group .btn-check:not(:checked)+.btn-outline-serena:hover {
  background: var(--serena-bg-soft);
  color: var(--serena-action);
  border-color: var(--serena-action);
}

@media (max-width: 575.98px) {
  .gestograma-choice-group {
    grid-template-columns: 1fr;
  }
}

/* Contenedor del banner */
.card-app {
  background-color: var(--serena-secondary-bg);
  /* Lila suave armonioso — antes #F3EEF9, casi idéntico al lila oficial */
  border-radius: var(--panel-radius);
  border: 1px solid rgba(var(--serena-purple-accent-rgb), 0.12);
  /* morado corporativo (--serena-purple-accent) en baja opacidad */
  box-shadow: 0 10px 30px -10px rgba(var(--serena-purple-accent-rgb), 0.14);
}

.badge-tag {
  color: var(--serena-action);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.banner-subtitle {
  color: #555e58;
  font-size: 1.05rem;
}

/* Tarjetas de los beneficios (feature pills) */
.feature-card {
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: var(--card-transition);
  box-shadow: var(--card-shadow-rest);
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
}

/* Círculo de fondo para los iconos */
.icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--serena-bg-soft);
  /* Verde menta claro */
  color: var(--serena-action);
  /* Verde corporativo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.feature-text {
  font-weight: 600;
  font-size: 0.92rem;
  color: #2b332f;
  line-height: 1.3;
}

/* Ajustes del botón */
.btn-serena-primary {
  background-color: var(--serena-action);
  border-color: var(--serena-action);
  color: #ffffff;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-serena-primary:hover {
  background-color: var(--serena-action-hover);
  border-color: var(--serena-action-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Botón de acento especial (ej. "Ver video explicativo"): mismo lenguaje que
   .btn-serena-primary, pero en el morado corporativo — para destacar sobre
   el verde dominante del resto de la página en llamadas puntuales, sin
   sumar un color nuevo a la paleta. */
.btn-serena-purple {
  background-color: var(--serena-purple-accent);
  border-color: var(--serena-purple-accent);
  color: #ffffff;
  border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-serena-purple:hover {
  background-color: var(--serena-accent-dark);
  border-color: var(--serena-accent-dark);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--serena-purple-accent-rgb), .3);
}

/* Botón cálido (ej. "Conversar con Serena"): mismo lenguaje que los demás
   .btn-serena-*, pero en el rojo/terracota que ya usa el sitio para
   transmitir cuidado y cercanía (p. ej. la insignia "Descanso" en la
   sección Durante) — no el semáforo de alerta, que usa un rojo distinto. */
.btn-serena-warm {
  background-color: var(--serena-accent-red);
  border-color: var(--serena-accent-red);
  color: #ffffff;
  border-radius: 225px 15px 255px 15px/15px 255px 15px 225px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-serena-warm:hover {
  background-color: var(--serena-urgent-text);
  border-color: var(--serena-urgent-text);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--serena-accent-red-rgb), .3);
}

/* Mockup flotante */
.phone-mockup-wrapper {
  display: inline-block;
  filter: drop-shadow(0 15px 25px rgba(35, 20, 50, 0.12));
}

.phone-image {
  max-height: 440px;
  object-fit: contain;
}

/* Orientador inteligente */
.orientador-box {
  background: var(--serena-surface);
  border: 1px solid var(--serena-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

/* Footer */
.site-footer {
  background: var(--serena-action);
  color: #DDE6EC;
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover {
  color: #CFE0EA;
}

.site-footer hr {
  border-color: rgba(255, 255, 255, .15);
}

/* Bootstrap's utilities (.d-flex, .d-grid, etc.) carry !important and would
   otherwise outrank the native [hidden] rule wherever both are applied to the
   same element (e.g. a placeholder toggled via el.hidden = true). */
[hidden] {
  display: none !important;
}

/* ---------- Avatar de acompañamiento y burbuja de saludo ---------- */
.avatar-serena {
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

/* Ilustración completa del personaje (hero de portada): conserva su proporción real,
   nunca se recorta ni se deforma. */
.avatar-hero {
  width: auto;
  max-width: 100%;
  max-height: 320px;
  height: auto;
}

.speech-bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--serena-primary);
  border-radius: 1.3rem;
  padding: 1rem 1.35rem;
  font-size: 1.05rem;
  color: var(--serena-primary-dark);
  font-weight: 600;
  flex: 1 1 260px;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 24px;
  border: 9px solid transparent;
  border-right-color: var(--serena-primary);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: -10.5px;
  top: 24px;
  border: 7px solid transparent;
  border-right-color: #fff;
}

/* ---------- Asistente conversacional (Orientador Inteligente) ---------- */
.chat-window {
  background: var(--serena-bg-soft);
  border: 1px solid var(--serena-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-height: 480px;
  overflow-y: auto;
  padding: .25rem .25rem 1rem;
}

.chat-msg {
  display: flex;
  gap: .6rem;
  max-width: 88%;
}

.chat-msg.from-serena {
  align-self: flex-start;
}

.chat-msg.from-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg .chat-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
}

.chat-bubble {
  border-radius: 1.1rem;
  padding: .7rem 1rem;
  font-size: .95rem;
}

.chat-msg.from-serena .chat-bubble {
  background: #fff;
  border: 1px solid var(--serena-border);
  border-top-left-radius: .3rem;
  color: var(--serena-text);
}

.chat-msg.from-user .chat-bubble {
  background: var(--serena-action);
  color: #fff;
  border-top-right-radius: .3rem;
}

.chat-bubble .cat {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--serena-primary-dark);
  font-weight: 700;
  display: block;
  margin-bottom: .15rem;
}

.chat-quickreplies {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}

.chat-input-row {
  display: flex;
  gap: .6rem;
  margin-top: .9rem;
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Utilidad: texto para lectores de pantalla ya la trae Bootstrap (.visually-hidden) */

/* =========================================================
   REORGANIZACIÓN FASE 1 — componentes nuevos
   (Inicio / Pruebas / Interrupción del embarazo)
   ========================================================= */

/* ---------- Pestañas accesibles: mejora progresiva (Pruebas / Interrupción) ----------
   Bootstrap oculta con CSS puro cualquier .tab-pane que no sea .active, incluso sin
   JavaScript. Para que el contenido siga siendo legible sin JS, esta regla solo actúa
   sobre paneles que NO tengan el atributo [hidden] — nunca compite con la regla
   [hidden]{display:none!important} de más arriba, porque apuntan a estados distintos.
   El único código que llega a poner [hidden] es initTabsFromHash() en main.js. */
/* Asegura que los paneles inactivos no ocupen espacio físico ni altura */
.tab-content>.tab-pane:not(.active) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.tab-content>.tab-pane.active {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}

/* Título de la sección */
.faq-carousel-title {
  font-weight: 800;
  color: var(--serena-primary-dark);
}

.faq-carousel-title span {
  color: var(--serena-purple-accent);
}

/* Listado de checks */
.faq-check-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #333d37;
}

.faq-check-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  line-height: 1.35;
}

.faq-check-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--serena-action);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 0.9rem;
}

/* Caja de tip o recomendación */
.faq-tip-box {
  margin-top: auto;
  background: var(--serena-lilac-faint);
  border-left: 3px solid var(--serena-purple-accent);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #555e58;
  line-height: 1.35;
}

/* =========================================================
   PRUEBAS.HTML — pestañas tipo cápsula, pasos de recolección,
   fichas de datos rápidos y tarjetas de resultados/análisis
   ========================================================= */

/* Contenedor principal de la barra de pestañas */
.serena-custom-tabs-lg {
  background-color: var(--serena-bg-soft);
  /* Gris verdoso muy claro y suave */
  border-radius: 20px;
  padding: 6px;
  width: 100%;
  max-width: 780px;
  /* Ancho generoso como en la imagen de referencia */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Si no caben todas en una fila (p. ej. 3 pestañas en móvil), la fila
     sobrante queda centrada en vez de pegada a la izquierda. */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Estilo individual de cada botón */
.serena-custom-tabs-lg .nav-link {
  width: 100%;
  padding: 16px 28px;
  border-radius: 16px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--serena-action);
  background-color: transparent;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

/* Texto de la pestaña */
.serena-custom-tabs-lg .tab-label {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Círculo contenedor del icono */
.tab-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.tab-icon-circle i {
  line-height: 1;
}

/* Fondo claro + ícono en color (mismo lenguaje que .status-indicator más
   abajo): funciona igual de bien sobre el verde de la pestaña activa que
   sobre el verde muy claro de la inactiva, sin el choque de un círculo
   sólido y saturado contra el fondo. El color además representa el fluido:
   ámbar/dorado para orina, rojo para sangre — no un azul/naranja genéricos
   sin relación con lo que describen. */
.icon-circle-amber {
  background-color: var(--serena-warn-bg);
  color: var(--serena-accent-amber);
}

.icon-circle-red {
  background-color: var(--serena-red-tint);
  color: var(--serena-accent-red);
}

/* Estado activo: botón seleccionado */
.serena-custom-tabs-lg .nav-link.active {
  background-color: var(--serena-action) !important;
  /* Verde oscuro Serena */
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(27, 110, 52, 0.25);
}

.serena-custom-tabs-lg .nav-link.active .tab-icon-circle {
  transform: scale(1.06);
}

/* Estado Hover para la pestaña inactiva */
.serena-custom-tabs-lg .nav-link:not(.active):hover {
  background-color: rgba(27, 110, 52, 0.06);
}

/* Ajustes para pantalla móvil */
@media (max-width: 575.98px) {
  .serena-custom-tabs-lg .nav-link {
    padding: 12px 14px;
    gap: 10px;
  }

  .serena-custom-tabs-lg .tab-label {
    font-size: 0.92rem;
  }

  .tab-icon-circle {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
}

/* Tarjetas de pasos de recolección */
.step-card {
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  box-shadow: var(--card-shadow-rest);
  transition: var(--card-transition);
}

.step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
}

.step-img-box {
  height: 150px;
  background: var(--serena-pink-tint);
  /* Contenedor suave para resaltar la ilustración */
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.step-img-box img {
  max-height: 100%;
  object-fit: contain;
}

.step-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--serena-purple-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Fichas de datos rápidos (Precisión, Momento, Dónde) */
.feature-tile {
  background: var(--serena-surface);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-shadow-rest);
  transition: var(--card-transition);
}

.feature-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
}

.feature-tile-header {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--serena-accent-orange);
  /* Derivado suave, acorde al resto de la paleta */
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.feature-tile p {
  font-size: 0.88rem;
  color: #374151;
  line-height: 1.45;
}

/* Contenedores de guías de resultados */
.result-guide-box {
  background: var(--serena-lilac-faint);
  /* Lila tenue de Serena */
  border: 1px solid rgba(var(--serena-purple-accent-rgb), 0.12);
  border-radius: var(--card-radius);
}

.result-status-item {
  display: flex;
  align-items: center;
  font-size: 0.88rem;
  color: var(--serena-text);
  gap: 12px;
}

/* Círculo con ícono (mismo lenguaje visual que .tab-icon-circle de las
   pestañas de arriba): el color deja de ser el único portador de
   significado — el ícono distingue el estado también sin depender de él.
   Fondo claro + ícono en color (no círculo sólido + ícono blanco): más
   suave y coherente con el resto de cajas pastel de la página. */
.status-indicator {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1;
}

/* line-height:1 evita que la altura de línea heredada (1.6 del body)
   desplace el glifo del ícono hacia arriba dentro del círculo. */
.status-indicator i {
  line-height: 1;
}

/* Verde/ámbar reutilizan los tintes oficiales que ya existían
   (--serena-primary-tint, --serena-warn-bg); azul/rojo usan los tintes
   claros agregados junto a sus derivados. "Tenue" comparte el ámbar de
   .tl-check (mismo significado: "revisa de nuevo"), no un color nuevo. */
.status-pos {
  background-color: var(--serena-primary-tint);
  color: var(--serena-action);
}

.status-faint {
  background-color: var(--serena-warn-bg);
  color: var(--serena-warn-text);
}

.status-neg {
  background-color: var(--serena-blue-tint);
  color: var(--serena-accent-blue);
}

.status-inv {
  background-color: var(--serena-red-tint);
  color: var(--serena-accent-red);
}

/* Tarjetas de tipos de análisis de sangre */
.blood-type-card {
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-top: 4px solid var(--serena-action);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-rest);
  transition: var(--card-transition);
}

.blood-type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
  border-top-color: var(--serena-action);
}

.badge-type {
  background: var(--serena-bg-soft);
  color: var(--serena-action);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Alerta de embarazo ectópico: mantiene su propio tono ámbar/naranja (es una
   advertencia, no debe leerse como una tarjeta de contenido más), pero
   comparte el mismo radio y ritmo de elevación que el resto de tarjetas. */
.ectopic-alert-card {
  background: var(--serena-bg);
  border: 1px solid rgba(var(--serena-accent-orange-rgb), 0.2);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 14px rgba(var(--serena-accent-orange-rgb), 0.05);
  transition: var(--card-transition);
}

.ectopic-alert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(var(--serena-accent-orange-rgb), 0.12);
  border-color: rgba(var(--serena-accent-orange-rgb), 0.4);
}

/* Tipografía y jerarquía */
.opciones-title {
  color: var(--serena-action);
  font-weight: 800;
  line-height: 1.25;
}

.opciones-desc {
  color: var(--serena-text-soft);
  font-size: 1rem;
  line-height: 1.55;
}

/* Caja de pre-requisito (Gestograma) */
.opciones-notice {
  background-color: var(--serena-bg-soft);
  border: 1px solid var(--serena-border);
  border-left: 4px solid var(--serena-action);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  color: var(--serena-text);
  display: flex;
  align-items: flex-start;
}

.text-action {
  color: var(--serena-action);
}

.opciones-link {
  color: var(--serena-action);
  font-weight: 700;
  text-decoration: underline;
}

.opciones-link:hover {
  color: var(--serena-action-hover);
}

/* Íconos circulares de cada opción */
.opcion-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Colores derivados de tus variables */
.bg-blue-tint {
  background-color: var(--serena-blue-tint);
}

.text-accent-blue {
  color: var(--serena-accent-blue);
}

.bg-primary-tint {
  background-color: var(--serena-primary-tint);
}

.text-primary-action {
  color: var(--serena-action);
}

.text-soft {
  color: var(--serena-text-soft);
}

/* Títulos y enlaces de las opciones */
.opcion-item-title {
  color: var(--serena-text);
}

/* Wrapper de la ilustración */
.opciones-img-wrapper {
  display: inline-block;
  max-width: 400px;
}

.opciones-img-wrapper img {
  max-height: 420px;
  object-fit: contain;
}

.antes-feature-content h3 {
  color: var(--serena-text, #23282B);
  font-size: 1.15rem;
  margin-bottom: .35rem;
}

.antes-feature-content p {
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: .5rem;
}

.durante-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--serena-purple-accent, #7B4397);
  margin-bottom: var(--space-2);
}

.durante-title {
  color: var(--serena-text, #23282B);
  margin-bottom: var(--space-3);
}

.durante-lead {
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: var(--space-5);
}

.durante-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.durante-feature-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}

.durante-feature-item+.durante-feature-item {
  margin-top: 1.4rem;
}

.durante-feature-item i {
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: var(--serena-primary, #29A744);
  margin-top: .15rem;
}

.durante-feature-item.is-urgent i {
  color: var(--serena-urgent-text, #7A3311);
}

.durante-feature-content h3 {
  color: var(--serena-text, #23282B);
  font-size: 1.1rem;
  margin-bottom: .3rem;
}

.durante-feature-content p {
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: .35rem;
  font-size: .95rem;
}

.symptom-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--chip-color, var(--serena-primary));
  color: var(--serena-text, #23282B);
  font-size: .9rem;
  background: var(--serena-surface, #FFFFFF);
}

.symptom-chip i {
  color: var(--chip-color, var(--serena-primary));
  font-size: 1rem;
}

/* Enlace discreto para citar fuentes (ej. "Fuentes: Ipas — ...") — se
   mantiene en el mismo tono gris del texto secundario, solo un punto más
   oscuro para leerse como enlace sin usar el verde de marca, que llamaría
   demasiado la atención en una línea de crédito menor. */
.citation-link {
  color: var(--serena-text, #23282B);
  text-decoration: underline;
}

.citation-link:hover,
.citation-link:focus-visible {
  color: var(--serena-action, #1B6E34);
}

/* Miniatura de video clicable: reutiliza el mismo morado que ya
   identificaba al enlace de video (btn-serena-purple), ahora como
   overlay sobre la miniatura en vez de un botón separado. */
.video-thumb-card {
  position: relative;
  display: block;
  border-radius: var(--card-radius, 1rem);
  overflow: hidden;
  text-decoration: none;
}

.video-thumb-card img {
  display: block;
  width: 100%;
  height: auto;
}

.video-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(var(--serena-purple-accent-rgb), 0) 50%, rgba(var(--serena-purple-accent-rgb), .75) 100%);
}

.video-thumb-overlay i {
  font-size: 2.75rem;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.video-thumb-label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
}

.despues-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--serena-action, #1B6E34);
  margin-bottom: var(--space-2);
}

.despues-hero-title {
  color: var(--serena-text, #23282B);
  margin-bottom: var(--space-3);
}

.despues-hero-text {
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: var(--space-5);
}

.despues-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.despues-feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.despues-feature-item+.despues-feature-item {
  margin-top: 1.5rem;
}

.despues-feature-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--serena-primary-tint, #E9F5EC);
  color: var(--serena-primary, #29A744);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.despues-feature-item.is-urgent .despues-feature-icon {
  background: var(--serena-urgent-bg, #F8E9E4);
  color: var(--serena-urgent-text, #7A3311);
}

.despues-feature-content h3 {
  color: var(--serena-text, #23282B);
  font-size: 1.1rem;
  margin-bottom: .35rem;
}

.despues-feature-content p {
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: .4rem;
  font-size: .95rem;
}

.alert-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

.alert-eyebrow {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--serena-urgent-text, #7A3311);
  margin-bottom: .5rem;
}

.alert-note {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: var(--serena-primary-tint, #E9F5EC);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  max-width: 720px;
  margin: 1.25rem auto 0;
  text-align: left;
}

.alert-note-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--serena-surface, #FFFFFF);
  color: var(--serena-primary, #29A744);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.alert-note p {
  margin-bottom: 0;
  color: var(--serena-text-soft, #545B5F);
  font-size: .95rem;
}

.alert-list-lead {
  font-weight: 700;
  color: var(--serena-text, #23282B);
  margin-bottom: .9rem;
}

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

.alert-list-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.alert-list-item+.alert-list-item {
  margin-top: 1rem;
}

.alert-list-item i {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--serena-urgent-text, #7A3311);
  margin-top: .15rem;
}

.alert-list-item p {
  margin-bottom: 0;
  font-size: .92rem;
  color: var(--serena-text-soft, #545B5F);
}

.alert-list-item strong {
  color: var(--serena-text, #23282B);
}

.alert-list-item a {
  font-weight: 700;
  color: var(--serena-action, #1B6E34);
}

.alert-card {
  background: var(--serena-surface, #FFFFFF);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  height: 100%;
  transition: var(--card-transition);
}

.alert-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
}

.alert-card h3 {
  font-size: 1.1rem;
  color: var(--serena-text, #23282B);
  margin-bottom: .75rem;
}

.alert-card-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: none;
  padding: 0;
  font-weight: 700;
  font-size: .9rem;
  color: var(--serena-action, #1B6E34);
}

.alert-card-toggle i {
  transition: transform .2s ease;
}

.alert-card-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.alert-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--serena-text-soft, #545B5F);
  font-size: .92rem;
}

.alert-card ul li+li {
  margin-top: .4rem;
}

.alert-card p {
  color: var(--serena-text-soft, #545B5F);
  font-size: .92rem;
  margin-bottom: 0;
}

/* =========================================================
   GESTOGRAMA — sección dinámica bajo el hero
   Mismo lenguaje visual que pruebas.html / interrupcion-del-embarazo.html:
   franja de tarjetas con ilustración, círculos de ícono, tarjeta de
   resultado con blob decorativo. El formulario y la lógica de cálculo
   (ids, name de los radios, JS) no se tocan — solo la presentación.
   ========================================================= */

/* ---- Placeholder antes de calcular ---- */
.gestograma-placeholder {
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--panel-radius);
  padding: var(--space-8);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gestograma-placeholder-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--serena-bg-soft);
  color: var(--serena-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 1.5rem auto 1rem;
  box-shadow: 0 4px 14px rgba(35, 40, 43, .06);
}

.gestograma-placeholder p {
  color: var(--serena-text-soft);
}

/* ---- Tarjeta de resultado: blob decorativo + ilustración + número grande ---- */
.gestograma-result-card {
  position: relative;
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--panel-radius);
  padding: var(--space-6);
  overflow: hidden;
  height: 100%;
}

.gestograma-result-blob {
  position: absolute;
  top: -25%;
  right: -15%;
  width: 220px;
  height: 220px;
  background: var(--serena-secondary-bg);
  border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
  opacity: .55;
  z-index: 0;
}

/* ---- Resultado calculado: imagen del trimestre a la izquierda, texto a la
   derecha (se apilan en pantallas angostas). La imagen solo existe aquí,
   nunca antes de calcular. ---- */
.gestograma-result-body {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}

.gestograma-result-media {
  flex: 0 0 38%;
  max-width: 38%;
}

.gestograma-result-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .9rem;
  background: var(--serena-bg-soft);
}

.gestograma-result-text {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 480px) {
  .gestograma-result-body {
    flex-direction: column;
  }

  .gestograma-result-media {
    max-width: 55%;
  }
}

.gestograma-result-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--serena-action);
  background: var(--serena-bg-soft);
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: .4rem;
}

.gestograma-result-weeks {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--serena-text);
  line-height: 1.1;
  margin: 0;
}

.gestograma-result-note {
  position: relative;
  z-index: 1;
  background: var(--serena-surface);
  border: 1px solid var(--serena-border);
  border-radius: .9rem;
  padding: .9rem 1.1rem;
  font-size: .86rem;
  color: var(--serena-text-soft);
  margin-bottom: 1.1rem;
}

.gestograma-route-links {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: .75rem;
}

@media (max-width: 400px) {
  .gestograma-route-links {
    grid-template-columns: 1fr;
  }
}

/* ---- Hero: buscador + avatar ----
   Mismo radio y proporción de padding que .hero (misma función: banner de
   portada), en vez de un tamaño propio ligeramente distinto. */
.orientador-hero {
  background: var(--serena-bg-soft, #E9F5EC);
  border-radius: var(--panel-radius);
  padding: var(--space-12) var(--space-8);
}

.orientador-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--serena-purple-accent, #7B4397);
  margin-bottom: var(--space-2);
}

.orientador-title {
  color: var(--serena-text, #23282B);
  margin-bottom: var(--space-3);
}

.orientador-lead {
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: var(--space-5);
  max-width: 60ch;
}

.orientador-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--serena-surface, #FFFFFF);
  border: 1.5px solid var(--serena-border, #DEDCD5);
  border-radius: 999px;
  padding: .5rem .5rem .5rem 1.25rem;
  box-shadow: 0 6px 20px rgba(35, 40, 43, .06);
}

.orientador-search:focus-within {
  border-color: var(--serena-focus, #1B4965);
}

.orientador-search>i.bi-search {
  color: var(--serena-text-soft, #545B5F);
  font-size: 1.1rem;
}

.orientador-search-input {
  flex: 1;
  min-width: 0;
  /* sin esto, el ancho mínimo intrínseco del input empuja al botón fuera
     del contenedor en pantallas angostas. */
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  color: var(--serena-text, #23282B);
}

.orientador-search-btn {
  border-radius: 999px;
  padding: .7rem 1.4rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* En pantallas chicas el buscador se apila: input arriba, botón a todo el
   ancho abajo. Deja de ser píldora y se vuelve un rectángulo redondeado. */
@media (max-width: 575.98px) {
  .orientador-hero {
    padding: var(--space-6) var(--space-5);
  }

  .orientador-search {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    padding: 1rem;
    gap: .75rem;
  }

  .orientador-search>i.bi-search {
    display: none;
  }

  .orientador-search-input {
    padding: .4rem .25rem;
  }

  /* El botón se vuelve un círculo con solo el ícono: en un ancho tan chico,
     el texto completo ya no cabe cómodo dentro de la píldora apilada. */
  .orientador-search-btn {
    width: 3rem;
    height: 3rem;
    padding: 0;
    align-self: center;
    justify-content: center;
  }

  .orientador-search-btn i {
    margin: 0 !important;
  }

  .orientador-search-btn-text {
    display: none;
  }
}

.orientador-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.orientador-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--serena-surface, #FFFFFF);
  border: 1.5px solid var(--serena-primary, #29A744);
  color: var(--serena-action, #1B6E34);
  border-radius: 999px;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}

.orientador-chip:hover {
  background: var(--serena-primary-tint, #E9F5EC);
}

.orientador-avatar-wrap {
  position: relative;
  display: inline-block;
}

.orientador-avatar-img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--serena-surface, #FFFFFF);
  border: 6px solid var(--serena-surface, #FFFFFF);
  box-shadow: 0 10px 30px rgba(35, 40, 43, .1);
}

.orientador-avatar-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--serena-purple-accent, #7B4397);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* Recuadro de respuesta única del Orientador Inteligente: cada consulta
   reemplaza por completo lo que había antes (saludo, resultados anteriores).
   No es un historial de chat, por eso no reutiliza .speech-bubble. */
.orientador-respuesta {
  position: relative;
  background: var(--serena-surface, #FFFFFF);
  border: 2px solid var(--serena-primary);
  border-radius: 1.3rem;
  padding: 1.5rem;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.orientador-respuesta::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 24px;
  border: 9px solid transparent;
  border-right-color: var(--serena-primary);
}

.orientador-respuesta::after {
  content: "";
  position: absolute;
  left: -10.5px;
  top: 24px;
  border: 7px solid transparent;
  border-right-color: var(--serena-surface, #fff);
}

.orientador-respuesta-inicial {
  text-align: center;
  margin: auto;
  max-width: 34ch;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--serena-primary-dark);
}

.orientador-respuesta-loading {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: auto;
}

.orientador-respuesta-loading span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--serena-primary);
  animation: orientadorRespuestaDot 1.1s ease-in-out infinite;
}

.orientador-respuesta-loading span:nth-child(2) {
  animation-delay: .15s;
}

.orientador-respuesta-loading span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes orientadorRespuestaDot {

  0%,
  60%,
  100% {
    opacity: .3;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.serena-escribiendo {
  margin: .6rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--serena-text-soft, #545B5F);
}

/* Respuesta de Serena dentro del recuadro: texto conversacional + botones a
   páginas del sitio. */
.serena-respuesta {
  text-align: left;
  animation: serenaRespuestaEntrada .25s ease-out;
}

.serena-texto {
  color: var(--serena-text, #23282B);
  font-size: .98rem;
  line-height: 1.55;
}

.serena-texto p,
.serena-texto ul {
  margin-bottom: .6rem;
}

.serena-texto ul {
  padding-left: 1.2rem;
}

.serena-texto li+li {
  margin-top: .2rem;
}

.serena-texto> :last-child {
  margin-bottom: 0;
}

.serena-texto strong {
  color: var(--serena-primary-dark, #1B6E34);
}

.serena-paginas {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--serena-border, #DEDCD5);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.serena-paginas-titulo {
  margin: 0 0 .1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--serena-purple-accent, #7B4397);
}

.serena-pagina {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .8rem;
  border: 1.5px solid var(--card-border-color, #DEDCD5);
  border-radius: var(--card-radius, .9rem);
  background: var(--serena-surface, #FFFFFF);
  color: var(--serena-text, #23282B);
  text-decoration: none;
  transition: var(--card-transition, border-color .15s ease, background .15s ease);
}

.serena-pagina:hover,
.serena-pagina:focus-visible {
  border-color: var(--card-border-color-hover, #29A744);
  background: var(--serena-primary-tint, #E9F5EC);
  box-shadow: var(--card-shadow-hover, none);
}

.serena-pagina-icono {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--serena-primary-tint, #E9F5EC);
  color: var(--serena-primary, #29A744);
  font-size: 1rem;
}

.serena-pagina-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.serena-pagina-titulo {
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.3;
}

.serena-pagina-resumen {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--serena-text-soft, #545B5F);
}

.serena-pagina-flecha {
  margin-left: auto;
  color: var(--serena-action, #1B6E34);
}

.serena-pagina.is-urgente {
  border-color: var(--serena-urgent-text, #7A3311);
  background: var(--serena-urgent-bg, #F8E9E4);
}

.serena-pagina.is-urgente .serena-pagina-icono {
  background: var(--serena-surface, #FFFFFF);
  color: var(--serena-urgent-text, #7A3311);
}

@keyframes serenaRespuestaEntrada {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

.orientador-privacidad {
  margin: .75rem 0 0 1.25rem;
  font-size: .82rem;
  color: var(--serena-text-soft, #545B5F);
}

/* ---- Explicación: qué es / qué hace ---- */
.orientador-explainer h2 {
  color: var(--serena-text, #23282B);
}

.orientador-capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .75rem;
  margin-top: 1.25rem;
}

.cap-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--serena-surface, #FFFFFF);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: .88rem;
  color: var(--serena-text-soft, #545B5F);
  transition: var(--card-transition);
}

.cap-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
}

.cap-item i {
  color: var(--serena-primary, #29A744);
  font-size: 1.8rem;
  margin-right: 0.5rem;
}

/* ---- Accesos rápidos ---- */
.orientador-section-title {
  color: var(--serena-text, #23282B);
  margin-bottom: 1rem;
}

.orientador-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.orientador-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--serena-surface, #FFFFFF);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  text-decoration: none;
  transition: var(--card-transition);
}

.orientador-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
  transform: translateY(-2px);
}

.orientador-card-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--serena-primary-tint, #E9F5EC);
  color: var(--serena-primary, #29A744);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.orientador-card h3 {
  font-size: .98rem;
  color: var(--serena-text, #23282B);
  margin-bottom: .2rem;
}

.orientador-card p {
  font-size: .82rem;
  color: var(--serena-text-soft, #545B5F);
  margin-bottom: 0;
}

.orientador-card-arrow {
  margin-left: auto;
  color: var(--serena-action, #1B6E34);
}

/* ---- Panel de confianza ---- */
.orientador-trust {
  background: var(--serena-lilac-faint, #FAF7FD);
  border-radius: var(--panel-radius);
  padding: var(--space-6);
  height: 100%;
}

.orientador-trust h2 {
  color: var(--serena-text, #23282B);
  margin-bottom: 1rem;
}

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

.orientador-trust li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  color: var(--serena-text-soft, #545B5F);
}

.orientador-trust li+li {
  margin-top: .9rem;
}

.orientador-trust li i {
  color: var(--serena-purple-accent, #7B4397);
  margin-top: .15rem;
}

.orientador-trust a {
  color: var(--serena-action, #1B6E34);
  font-weight: 700;
}

/* ---- Aviso de emergencia ---- */
.orientador-urgent-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  background: var(--serena-urgent-bg, #F8E9E4);
  color: var(--serena-urgent-text, #7A3311);
  border-radius: .85rem;
  padding: 1rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
}

.orientador-urgent-banner i {
  font-size: 1.2rem;
}

.orientador-urgent-banner a {
  color: var(--serena-urgent-text, #7A3311);
  text-decoration: underline;
  font-weight: 700;
  margin-left: auto;
}

.app-hero-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(35, 40, 43, .1);
  background: var(--serena-surface, #FFFFFF);
}

.app-hero-badge i {
  font-size: 1rem;
}

.app-badge-reminder {
  top: 10%;
  left: -6%;
  color: var(--serena-action, #1B6E34);
}

.app-badge-reminder i {
  color: var(--serena-primary, #29A744);
}

.app-badge-guide {
  bottom: 6%;
  right: -8%;
  color: var(--serena-purple-accent, #7B4397);
}

.app-badge-guide i {
  color: var(--serena-purple-accent, #7B4397);
}

/* =========================================================
   REDISEÑO INDEX 2026 — línea gráfica informal, sin look institucional
   Todo lo que sigue está deliberadamente escrito para no afectar el resto
   de las páginas: o son reglas de bajo nivel (nav, botones) que ya
   comparte todo el sitio y forman parte del sistema de diseño, o van
   scoped a un id/clase que solo existe en index.html (#rutas,
   #acompanamiento-confiable, #teaser-faq, #recursos-verificados,
   .site-footer--illustrated). .app-banner-organic/.app-banner-band ya no
   son exclusivas de esta página: interrupcion-del-embarazo.html
   (2026-09-23) reutiliza el mismo banner de app. Las illustraciones
   nuevas referenciadas aquí (assets/img/ilustraciones/*) todavía no
   existen como archivo — se integran ya mismo en el código para que solo
   haga falta soltar el PNG/SVG final en esa ruta cuando esté listo; ver
   prompts-ilustraciones-2026.md para el brief de cada una.
   ========================================================= */

/* ---- 1. Nav: subrayado dibujado a mano en vez de pastilla de fondo ---- */
.navbar-nav .nav-link {
  position: relative;
}

.navbar-nav .nav-link:not(.active):hover {
  background: transparent;
  color: var(--serena-action);
}

.navbar-nav .nav-link:not(.active)::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: 3px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M1,7 Q15,1 28,7 T55,7 T82,7 T99,6' fill='none' stroke='%23008545' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transform: scaleX(.8) translateY(2px);
  transform-origin: left center;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.navbar-nav .nav-link:not(.active):hover::after,
.navbar-nav .nav-link:not(.active):focus-visible::after {
  opacity: 1;
  transform: scaleX(1) translateY(0);
}

/* ---- 8 (cont.). Giro sutil de botones al pasar el mouse ----
   Va al final de la hoja a propósito: misma especificidad que los
   :hover individuales de cada .btn-serena-*, así que por orden en el
   documento es esta declaración la que gana y agrega el giro sin
   pisar el resto de sus propiedades de hover (color, sombra, etc). */
@media (prefers-reduced-motion: no-preference) {

  .btn-serena-primary:hover,
  .btn-outline-serena:hover,
  .btn-serena-purple:hover,
  .btn-serena-warm:hover {
    transform: rotate(-1deg) translateY(-1px);
  }

  @keyframes gentle-float {
    0%, 100% { transform: translateY(0) rotate(var(--float-rot, 0deg)); }
    50% { transform: translateY(-8px) rotate(var(--float-rot, 0deg)); }
  }

  .floaty {
    animation: gentle-float 4.5s ease-in-out infinite;
  }
}

/* ---- 10. Tipografía "etiqueta escrita a mano" para eyebrows/badges ----
   Clase adicional (no se toca la regla base .badge-tag/.section-label,
   que siguen viéndose igual en el resto del sitio): index.html suma esta
   clase a sus propias instancias para el tratamiento "a mano", sin
   afectar a pruebas.html, interrupcion-del-embarazo.html, etc. */
.label-handwritten {
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-weight: 700;
  display: inline-block;
  transform: rotate(-2deg);
  letter-spacing: .01em;
}

.badge-tag.label-handwritten {
  font-size: 1.7rem;
}

.section-label.label-handwritten {
  font-size: 1.35rem;
}

/* ---- 2. Hero: sin badge institucional, ilustración asimétrica ---- */
.hero {
  position: relative;
  overflow: visible;
}

/* Ancla el sticker a una esquina de la ilustración colectiva (mismo
   contenedor relativo que hero-comunidad-img, .hero-media-group) en vez
   de flotar suelto en el espacio vacío del hero — así se lee como parte
   de la composición. Sin rotación estática: solo el vaivén de .floaty. */

/* ---- 3/5. Rutas: las 4 en una sola fila, mismo tamaño, sin rotación,
   unidas entre sí (sin gap, sin borde individual) formando una sola franja
   de color, como el bloque "Descubre" de acompanandoabortos.org. El radio
   queda solo en las esquinas exteriores del conjunto. */
#rutas .row.g-3 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  overflow: hidden;
  border-radius: var(--panel-radius);
  box-shadow: var(--card-shadow-rest);
}

@media (min-width: 992px) {
  #rutas .row.g-3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  /* .row-cols-lg-4 (Bootstrap) deja width:25% en cada .col, pensado para su
     propio layout en flex; en nuestro grid eso encogía cada tarjeta a una
     fracción de su celda y el texto largo se salía de la franja de color.
     Debe ocupar toda su celda. */
  #rutas .col {
    width: auto;
  }
}

/* Tarjeta = "tapa" (estado cerrado, ícono grande + título) apilada sobre
   "contenido" (estado abierto, párrafo + CTA) en la MISMA celda de grid.
   .route-card (clase base) deja su propio grid-template-rows: auto auto de
   2 filas; hay que reemplazarlo por una sola fila con minmax(piso, auto),
   si no, la fila 1 se autoajusta solo al contenido de esa tarjeta (ignora
   el piso) y tapa/contenido terminan con alturas distintas entre sí: el
   deslizado dejaba entonces un hueco arriba en vez de alinear al pixel. */
#rutas .route-card--flip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(210px, auto);
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 0;
}

#rutas .route-card--flip h3,
#rutas .route-card--flip p {
  grid-column: unset;
  grid-row: unset;
  align-self: unset;
  text-align: center;
}

.route-flip-cover,
.route-flip-content {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

.route-flip-cover {
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .route-flip-cover {
    transition: transform .42s ease;
  }
}

.route-flip-icon {
  width: 136px;
  height: 136px;
  object-fit: contain;
  margin-bottom: .6rem;
}

.route-flip-content {
  z-index: 1;
  background: var(--serena-primary-tint);
  color: var(--serena-text);
}

.route-flip-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  font-weight: 700;
  color: var(--serena-action);
}

/* Revela el contenido: mouse (hover/foco real) o teclado (foco visible en
   el <a> que envuelve toda la tarjeta) mueven la tapa; en táctil, JS
   agrega .is-open al primer toque (ver index-interactions.js). Sin
   elevación/sombra al hover: las tarjetas están unidas, "flotar" una sola
   rompería la franja continua — el propio deslizamiento de la tapa ya es
   la señal de interacción. */
@media (hover: hover) {

  #rutas .route-card--flip:hover .route-flip-cover,
  #rutas .route-card--flip:focus-visible .route-flip-cover {
    transform: translateY(-100%);
  }
}

#rutas .route-card--flip.is-open .route-flip-cover {
  transform: translateY(-100%);
}

/* Colores por ruta: la tapa lleva el tono protagonista, el contenido un
   tinte relacionado pero más claro — no el mismo color repetido. */
#rutas .col:nth-child(1) .route-flip-cover {
  background: var(--serena-mint-soft);
}

#rutas .col:nth-child(1) .route-flip-cover h3 {
  color: var(--serena-text);
}

#rutas .col:nth-child(2) .route-flip-cover {
  background: var(--serena-purple-accent);
}

#rutas .col:nth-child(2) .route-flip-cover h3 {
  color: #fff;
}

#rutas .col:nth-child(2) .route-flip-content {
  background: rgba(var(--serena-purple-accent-rgb), .12);
}

#rutas .col:nth-child(3) .route-flip-cover {
  background: var(--serena-accent);
}

#rutas .col:nth-child(3) .route-flip-cover h3 {
  color: #fff;
}

#rutas .col:nth-child(3) .route-flip-content {
  background: var(--serena-secondary-bg);
}

#rutas .col:nth-child(4) .route-flip-cover {
  background: var(--serena-secondary-bg);
}

#rutas .col:nth-child(4) .route-flip-cover h3 {
  color: var(--serena-text);
}

#rutas .col:nth-child(4) .route-flip-content {
  background: var(--serena-lilac-faint);
}

/* ---- 4. Acompañamiento confiable: cajas "marco blanco" a mano ----
   Fondo sólido de la paleta (no un tinte translúcido) + borde blanco
   grueso + radio irregular (no una tarjeta rectangular con sombra),
   alternando los 2 tonos protagonistas menos usados hasta ahora. */

   /* ---- 4. Acompañamiento confiable: bloque a sangre + collage informal ----
   Segunda vuelta de diseño sobre este bloque: se independiza con su propio
   fondo cálido a sangre (mismo criterio que .hero-band / .hero-band--purple)
   y la fila "imagen + caja" + la caja de checklist se reemplazan por un
   collage asimétrico — la foto, la cita y la tarjeta de Serena se superponen
   levemente en vez de alinearse en columnas iguales, y el checklist pasa de
   una sola caja rectangular a notas sueltas de 3 tonos alternados y
   rotación propia. Nada de tarjetas idénticas: cada nota tiene su propio
   radio irregular, como el resto del sitio. */

 
/* Grid libre (no row/col de Bootstrap) para poder superponer las 3 piezas
   sin pelear con el sistema de columnas. */

/* Inclinación fija + escala de entrada en un solo transform, con más
   especificidad (id + clase) que la regla genérica de .stagger-children
   (transform:translateY(...)) — así la entrada suave no le pisa la
   inclinación "collage" a la foto. Ver adenda de animación de entrada,
   2026-09-23. */

 
/* "Cinta" que sostiene la cita, como una nota pegada — refuerzo del tono
   scrapbook/collage que pide el cliente, sin depender de una imagen. */

 
/* Antes era un bloque sólido en --serena-mint-soft: se leía como una
   tarjeta/botón más, no como parte del collage. Se pasa a fondo papel
   (blanco) + borde orgánico en el verde de marca + cinta superior, para
   que sea "la nota de Serena" y haga pareja visual con .confianza-quote
   ("la nota de la persona"): mismo lenguaje (papel, borde grueso,
   rotación, cinta), colores invertidos entre sí (ahí borde morado /
   cinta verde, acá borde verde / cinta morada). */

 
/* Checklist: notas sueltas en vez de una sola caja rectangular. */

 
/* Flex + wrap (no grid): así la fila incompleta de abajo (3 notas, ya que
   son 7 en total) queda centrada en vez de pegada a la izquierda como
   haría un grid con columnas fijas. 4 por fila en escritorio. */

/* Misma composición rotate()+scale() que .confianza-photo/-quote/-cta, y
   por el mismo motivo (especificidad sobre .stagger-children genérico). */

 
/* ---- 3 (cont). Zigzag de las 4 tarjetas del banner de la app ---- */
@media (min-width: 576px) {
  .app-banner-organic .row.g-3 > .col:nth-child(even) .feature-card {
    margin-top: 1.4rem;
  }
}
 
.icon-bubble img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Check dibujado a mano en vez de bi-check-circle — más grande para que se
   lea como protagonista de la tarjeta, no como un bullet chico. */

/* ---- 5. Teaser FAQ: bloque a sangre (mismo criterio que .hero-band /
   .confianza-band) + burbuja que se desborda. Antes era una caja de tinte
   suelta sobre el fondo de la página; ahora el tinte cubre todo el ancho
   de la pantalla y la "caja" solo aporta el layout interno (bubble +
   texto), sin su propio fondo/borde redondeado. */

/* Botón CTA: forma asimétrica dibujada a mano + sombra "offset" en vez de
   blur, y el mismo giro sutil del resto de los botones se combina con un
   desplazamiento propio al hover para que se sienta "despegado" del papel. */

/* Recursos verificados: ilustración de acompañamiento junto al título,
   no solo texto centrado. */

/* ---- 6. Banner app: bloque a sangre (mismo criterio que .hero-band /
   .confianza-band / .teaser-faq-band) en morado bajo claro
   (--serena-secondary-bg, ya documentado como tinte claro derivado del
   morado profundo de marca) para que deje de ser una card suelta sobre
   el fondo de la página y se funda, sin corte, con el section-divider +
   footer-strip que llevan al pie — antes había un tramo de --serena-bg
   plano entre la card y esa transición. El card-app/app-banner-organic
   (blob menta) sigue flotando dentro de este fondo, sin tocarse. ---- */
.app-banner-band {
  width: 100%;
  background: var(--serena-secondary-bg);
  position: relative;
}

/* ---- 6 (cont). Banner app: contexto ilustrado en vez de card blanca genérica ---- */
.app-banner-organic {
  position: relative;
  border: none;
  box-shadow: none;
  border-radius: 60px 20px 70px 24px/24px 60px 20px 70px;
}

.app-banner-organic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("../img/ilustraciones/ilustracion-manos-planta.webp");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: min(260px, 40%) auto;
  opacity: .85;
  pointer-events: none;
}

.app-banner-organic>.row {
  position: relative;
  z-index: 1;
}

.app-banner-organic .banner-subtitle {
  color: var(--serena-text);
}

/* Iconos de features: antes 22px sobre un círculo verde clarito, casi
   invisibles junto a las líneas moradas finas de los PNG. Círculo blanco
   (máximo contraste para el morado del ícono) más grande + borde/sombra en
   el mismo morado para que se lea como parte de la paleta, no como un
   recorte suelto. Scoped a .app-banner-organic — ya no exclusivo de
   index.html: interrupcion-del-embarazo.html (2026-09-23) suma la misma
   clase a su propio banner de app para compartir este mismo tratamiento,
   sin duplicar CSS. */
.app-banner-organic .icon-bubble {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .18);
  box-shadow: 0 4px 12px rgba(var(--serena-purple-accent-rgb), .16);
}

.app-banner-organic .icon-bubble img {
  width: 34px;
  height: 34px;
}

.app-banner-organic .feature-card {
  border-radius: 22px 10px 22px 10px/10px 22px 10px 22px;
}

/* Mockup del teléfono: entra deslizándose con un giro sutil (no solo
   fade), y suma las mismas insignias flotantes ya usadas en el hero de
   descargar-serena.html (.app-hero-badge) para que el banner se sienta
   vivo, no una card estática. Mismo patrón a prueba de fallos que
   .reveal-on-scroll (ver index-interactions.js): visible por defecto,
   solo se anima si JS realmente corre. */
.app-banner-organic .phone-mockup-wrapper {
  position: relative;
}

.js-reveal-ready .banner-phone-col.reveal-on-scroll {
  opacity: 0;
  transform: translateX(36px) rotate(5deg) scale(.95);
  transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

.js-reveal-ready .banner-phone-col.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateX(0) rotate(0deg) scale(1);
}

/* ---- 7. Footer: franja ilustrada horizontal, sin verse corporativo ---- */
.footer-strip {
  height: 48px;
  background: var(--serena-action);
  background-image: url("../img/ilustraciones/franja-mariposas-plantas.webp");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.site-footer--illustrated hr {
  opacity: .2;
}

.site-footer--illustrated h3.h6 {
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .02em;
  /* Se suaviza el contraste: blanco puro (.text-white de Bootstrap trae
     !important) se lleva a un blanco tenue, coherente con "aligerar" el
     footer sin perder legibilidad (>10:1 sobre el verde de fondo). */
  color: rgba(255, 255, 255, .82) !important;
}

/* =========================================================
   REDISEÑO INDEX 2026 · segunda pasada — pill nav, hero a sangre,
   masonry de recursos, dividers SVG, stickers de apoyo.
   Mismo criterio que el bloque anterior: todo lo de acá o es de bajo
   nivel y ya compartido (nada nuevo se agrega fuera de scope), o va
   detrás de una clase/id que solo existe en index.html
   (.site-header--floating, .hero-band, #rutas, #acompanamiento-confiable,
   #recursos-verificados, .support-sticker, .section-divider). Las
   imágenes nuevas (hero-comunidad.png, plantilla-portada-recurso.png,
   icono-feature-*.png, sticker-apoyo-0{1,2,3}.png,
   ilustracion-acompanar-v2.png) se integran ya en el código a la espera
   del archivo final — ver prompts-ilustraciones-2026.md, sección 2.2.
   ========================================================= */

/* ---- 1. Nav flotante tipo "pill" (solo en index.html) ---- */
.site-header--floating {
  background: transparent;
  box-shadow: none;
  border-bottom: none;
  top: .6rem;
  padding: 0 .75rem;
}

.site-header--floating .navbar {
  background: var(--serena-surface);
  border-radius: 40px;
  box-shadow: 0 14px 30px -10px rgba(var(--serena-text-rgb), .22);
  max-width: 1200px;
  margin: 0 auto;
  padding: .35rem .75rem;
}

@media (max-width: 1399.98px) {
  .site-header--floating .navbar-collapse {
    border-top-color: rgba(var(--serena-text-rgb), .1);
  }
}

/* ---- 2. Hero: bloque de color a sangre + composición colectiva ---- */
.hero-band {
  width: 100%;
  position: relative;
}

.ola-separadora {
    display: block; /* Elimina el espacio invisible inferior de los elementos en línea */
    width: 100%;    /* Asegura que el SVG ocupe todo el ancho de la pantalla */
}

.hero-band .hero {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.hero-band h1,
.hero-band .lead {
  color: #fff;
}

.hero-band .lead {
  color: rgba(255, 255, 255, .88);
}

/* ---- 3. .highlight-underline: resaltado reutilizable para CUALQUIER
   frase (no solo "hasta las 12 semanas") — más grande que el texto que lo
   contiene + subrayado ondulado a mano debajo. Color configurable vía
   --highlight-color (variable CSS), así funciona con cualquiera de los 4
   colores de marca sin duplicar la regla. El subrayado se colorea con
   mask-image (no background-image con el color "horneado" en el SVG) para
   que también responda a la misma variable. Sin animación: se muestra
   siempre en su estado final (se quitó el énfasis con retardo). */

/* ---- 2. Botón "Conversar con Serena": la acción principal del hero ---- */
.btn-serena-primary.btn-hero-cta {
  padding: .95rem 2.1rem;
  border-radius: 999px;
  box-shadow: 0 12px 26px -6px rgba(var(--serena-action-rgb), .55);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .btn-hero-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 32px -6px rgba(var(--serena-action-rgb), .65);
  }

  .btn-hero-cta:active {
    transform: scale(.96);
    box-shadow: 0 6px 16px -4px rgba(var(--serena-action-rgb), .5);
  }
}

/* Divisor de onda entre un bloque de color a sangre y lo que sigue:
   SVG en línea (no imagen rasterizada), el color del path es el del
   fondo que empieza después, para simular que "sube" en ola. */
.section-divider {
  display: block;
  line-height: 0;
  margin-bottom: -2px; /* <-- Forzará la superposición con el bloque de abajo */
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 44px;
}

@media (min-width: 992px) {
  .section-divider svg {
    height: 64px;
  }
}

/* ---- 3 (cont). Zigzag de las 4 tarjetas del banner de la app ---- */
@media (min-width: 576px) {
  .app-banner-organic .row.g-3 > .col:nth-child(even) .feature-card {
    margin-top: 1.4rem;
  }
}

.icon-bubble img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---- 6. Recursos verificados: riel con scroll-snap ----
   Mismo mecanismo que el carrusel de preguntas frecuentes de versiones
   anteriores del sitio (riel horizontal con scroll-snap + soporte táctil
   nativo, flechas y puntos que solo controlan el scroll del riel) — no el
   componente carousel de Bootstrap, adaptado a las tarjetas de recursos. */
.recurso-cover {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.recurso-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}

.recursos-scroll-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* "proximity", no "mandatory": con 8 tarjetas que no dividen exacto entre
     las que se ven por pantalla, el snap "mandatory" puede dejar las
     últimas 1-2 tarjetas inalcanzables (su punto de snap "start" cae más
     allá del scroll máximo posible, y el navegador se niega a moverse en
     vez de solo ajustar al límite). "proximity" conserva el enganche al
     hacer scroll normal pero no bloquea llegar hasta el final real. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: .25rem .25rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.recursos-scroll-track::-webkit-scrollbar {
  display: none;
}

.recurso-slide-item {
  flex: 0 0 84%;
  max-width: 84%;
  scroll-snap-align: start;
}

@media (min-width: 576px) {
  .recurso-slide-item {
    flex: 0 0 calc((100% - 1.25rem) / 2);
    max-width: calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 992px) {
  .recurso-slide-item {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    max-width: calc((100% - 2.5rem) / 3);
  }
}

.recurso-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--serena-surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-rest);
  text-decoration: none;
  color: var(--serena-text);
  transition: var(--card-transition);
}

.recurso-slide:hover,
.recurso-slide:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-color-hover);
  color: var(--serena-text);
}

.recurso-slide-body h3 {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--serena-primary-dark);
  margin-bottom: .4rem;
}

.recurso-slide-body p {
  color: var(--serena-text-soft);
  margin-bottom: .6rem;
}

/* Mismo ciclo de 4 colores que el resto del sitio para las portadas,
   recorriendo los 8 recursos dos veces. */
.recurso-slide-item:nth-child(4n+1) .recurso-cover {
  background: var(--serena-mint-soft);
}

.recurso-slide-item:nth-child(4n+2) .recurso-cover {
  background: var(--serena-purple-accent);
}

.recurso-slide-item:nth-child(4n+3) .recurso-cover {
  background: var(--serena-accent);
}

.recurso-slide-item:nth-child(4n+4) .recurso-cover {
  background: var(--serena-primary-tint);
}

/* Flechas + puntos agrupados debajo del riel (no encima de las tarjetas):
   así no tapan la pista visual del siguiente recurso que asoma al borde). */
.recursos-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  flex: none;
  background: var(--serena-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--card-shadow-rest);
}

@media (prefers-reduced-motion: no-preference) {
  .recursos-nav-btn {
    transition: transform .15s ease;
  }

  .recursos-nav-btn:hover {
    transform: scale(1.06);
  }
}

.recursos-indicators {
  min-height: 22px;
}

.recursos-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--card-border-color-hover);
  border: none;
  padding: 0;
  cursor: pointer;
  flex: none;
  transition: width .2s ease, background-color .2s ease;
}

.recursos-dot.active {
  background-color: var(--serena-action);
  width: 22px;
  border-radius: 999px;
}

/* ---- 9. Stickers de apoyo flotantes (decorativos, aria-hidden) ----
   Posicionados en % dentro de su propia sección (nunca causan scroll
   horizontal) y ocultos en mobile para no competir con el contenido. */
#rutas,
#acompanamiento-confiable,
#recursos-verificados {
  position: relative;
}

/* Antes 60px: quedaban casi decorativos/imperceptibles junto a los demás
   elementos ya agrandados del rediseño (route-flip-icon 136px,
   confianza-symbol 110-132px). clamp() para que crezcan en pantallas
   grandes sin desbordar en tablet. */

/* ---- 6. Revelado por scroll ----
   Visible por defecto (si JS no corre, o hay prefers-reduced-motion, o el
   navegador no soporta IntersectionObserver, la sección nunca queda
   invisible): index-interactions.js solo agrega .js-reveal-ready al
   <html> cuando de verdad va a animar, y recién ahí aplican estas reglas. */
.js-reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.js-reveal-ready .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   REDISEÑO interrupcion-del-embarazo.html (2026-09-23) — mismo sistema
   visual de index.html (bloques de color, tapas dibujadas a mano,
   scroll/hover), aplicado a esta página. Reutiliza en lo posible clases y
   tokens ya existentes; lo nuevo va scoped por ID donde la clase base se
   comparte con otras páginas (result-guide-box, alert-*), y directo en la
   clase cuando es exclusiva de esta página (care-*, despues-*, chip-list,
   step-tracker, badge-pill).
   ========================================================= */

/* ---- 2. Hero: bloque de color menta (distinto del morado del index) ---- */
.hero-band--mint {
  background: var(--serena-mint-soft);
}

.hero-band--mint h1,
.hero-band--mint .lead {
  color: var(--serena-text);
}

.hero-band--mint .lead {
  color: var(--serena-text-soft);
}

/* Botón "Ver video explicativo" como CTA reforzado, mismo tratamiento que
   .btn-serena-primary.btn-hero-cta del index pero en el morado ya usado
   en esta página (no se cambia el color del botón, solo se le suma el
   peso visual: sombra + hover con scale). */
.btn-serena-purple.btn-hero-cta {
  padding: .95rem 2.1rem;
  border-radius: 999px;
  box-shadow: 0 12px 26px -6px rgba(var(--serena-purple-accent-rgb), .55);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

@media (prefers-reduced-motion: no-preference) {

  .btn-serena-purple.btn-hero-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 32px -6px rgba(var(--serena-purple-accent-rgb), .65);
  }

  .btn-serena-purple.btn-hero-cta:active {
    transform: scale(.96);
    box-shadow: 0 6px 16px -4px rgba(var(--serena-purple-accent-rgb), .5);
  }
}

/* ---- 4. Listas largas → chips en fila ----
   Mismo componente visual que .symptom-chip (Durante),
   aplicado a las listas de Antes/Después que antes eran <ul> vertical. */
.chip-list {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip-list-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1.5px solid var(--chip-color, var(--serena-primary));
  color: var(--serena-text);
  font-size: .85rem;
  background: var(--serena-surface);
}

.chip-list-item i {
  color: var(--chip-color, var(--serena-primary));
  font-size: .95rem;
}

/* Pasos numerados → mini-tracker vertical: círculo/glifo + línea que
   conecta con el siguiente paso (mismo concepto que .timeline-steps,
   adaptado a vertical para una lista corta de 2-3 pasos). */
.step-tracker {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-tracker>li {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.4rem;
}

.step-tracker>li:last-child {
  padding-bottom: 0;
}

.step-tracker>li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -2px;
  width: 2px;
  background: var(--card-border-color-hover);
}

.step-tracker>li>i {
  flex: 0 0 auto;
  width: 32px;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--serena-action);
  background: var(--serena-lilac-faint);
  position: relative;
  z-index: 1;
}

.step-tracker>li>span {
  padding-top: .15rem;
}

/* ---- 7. Señales de alerta: borde izquierdo según urgencia ---- */
.alert-list-item {
  border-left: 3px solid var(--serena-border);
  padding-left: .85rem;
}

.alert-list-item--urgent {
  border-left-color: var(--serena-urgent-text);
}

/* ---- 8/10. Tarjetas .alert-card: ícono + resumen visible + toggle pill
   con fondo tenue del color de la tarjeta (se reutiliza aquí también
   para las tarjetas de marco legal, mismo componente). ---- */
.alert-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  margin-bottom: .6rem;
}

.alert-card-summary {
  color: var(--serena-text-soft);
  font-size: .92rem;
  margin-bottom: .75rem;
}

.alert-card--green {
  border-left: 4px solid var(--serena-primary);
}

.alert-card--green .alert-card-icon,
.alert-card--green .alert-card-toggle {
  background: var(--serena-primary-tint);
  color: var(--serena-action);
}

.alert-card--red {
  border-left: 4px solid var(--serena-accent-red);
}

.alert-card--red .alert-card-icon,
.alert-card--red .alert-card-toggle {
  background: var(--serena-red-tint);
  color: var(--serena-accent-red);
}

.alert-card--purple {
  border-left: 4px solid var(--serena-purple-accent);
}

.alert-card--purple .alert-card-icon,
.alert-card--purple .alert-card-toggle {
  background: var(--serena-lilac-faint);
  color: var(--serena-purple-accent);
}

.alert-card--amber {
  border-left: 4px solid var(--serena-accent-amber);
}

.alert-card--amber .alert-card-icon,
.alert-card--amber .alert-card-toggle {
  background: var(--serena-warn-bg);
  color: var(--serena-warn-text);
}

.alert-card-toggle {
  padding: .4rem .9rem;
  border-radius: 999px;
  transition: background-color .25s ease;
}

.alert-card-toggle i {
  transition: transform .25s ease;
}

/* Curva de easing propia para el alto del .collapse (Bootstrap trae una
   lineal por defecto); solo dentro de .alert-card, así no afecta otros
   collapse del sitio. Ya respeta prefers-reduced-motion por la regla
   global "* { transition: none !important }" de más arriba. */
.alert-card .collapsing {
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
}

/* ---- 10. Marco legal: badge en pill + causales por color ---- */
.badge-pill {
  padding: .4rem 1rem;
  border-radius: 999px;
  background: var(--serena-primary-tint);
}

.info-box--red {
  background: var(--serena-red-tint);
  border-left: 4px solid var(--serena-accent-red);
}

.info-box--blue {
  background: var(--serena-blue-tint);
  border-left: 4px solid var(--serena-accent-blue);
}

/* =========================================================
   ADENDA TRANSVERSAL (index.html + interrupcion-del-embarazo.html),
   2026-09-23 — componentes/mecanismos nuevos, compartidos entre ambas
   páginas (ver scroll-effects.js).
   ========================================================= */

/* ---- 1. Entrada en cascada de los hijos directos de un bloque ----
   Mismo patrón "a prueba de fallos" que .reveal-on-scroll: visible por
   defecto; solo se oculta y anima si JS realmente va a poder revelarlo
   (soporte de IntersectionObserver, sin prefers-reduced-motion). El
   delay de cada hijo lo pone JS (transition-delay inline, incremental),
   así que aquí solo se define el estado "antes/después" y la duración. */
.js-stagger-ready .stagger-children>* {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.js-stagger-ready .stagger-children.stagger-revealed>* {
  opacity: 1;
  transform: translateY(0);
}

/* Excepción scoped a #acompanamiento-confiable: sus tarjetas
   (.confianza-photo/.confianza-quote/.confianza-cta/.confianza-note) ya
   usan su propio transform:rotate(...) fijo como parte del look "collage"
   — el translateY genérico de arriba pisaría esa rotación justo al
   revelarse (quedarían perfectamente derechas). Acá la entrada es un fade
   puro (solo opacity, sin tocar transform), más discreto y sin ese
   conflicto. Mismo mecanismo/clases, mismo resguardo sin JS. */
.js-stagger-ready #acompanamiento-confiable .stagger-children>* {
  opacity: 0;
  --reveal-scale: .94;
  transition: opacity .5s ease, transform .5s ease;
}

.js-stagger-ready #acompanamiento-confiable .stagger-children.stagger-revealed>* {
  opacity: 1;
  --reveal-scale: 1;
}

/* ---- 4. .support-note: tarjeta con esquina doblada, para mensajes
   cortos de refuerzo emocional (no reemplaza .alert-card/.info-box, que
   siguen siendo para información técnica). ---- */
.support-note {
  position: relative;
  background: var(--serena-warn-bg);
  border-radius: var(--card-radius) 4px var(--card-radius) var(--card-radius);
  padding: var(--space-5);
  box-shadow: var(--card-shadow-rest);
  color: var(--serena-warn-text);
  overflow: hidden;
}

.support-note::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--serena-bg) transparent transparent;
  filter: drop-shadow(-1px 1px 2px rgba(35, 40, 43, .18));
}

.support-note p {
  margin-bottom: 0;
  color: var(--serena-warn-text);
}

.support-note strong {
  font-family: "Baloo 2", sans-serif;
}

/* ---- 5. .badge-hashtag: píldora corta tipo hashtag, para cerrar
   bloques/secciones — mismo espíritu que los stickers de apoyo, en
   formato texto. ---- */
.badge-hashtag {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: var(--serena-purple-accent);
  color: #fff;
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .01em;
}

/* ---- 6. Textura de garabatos de fondo, dentro de bloques de color a
   sangre. Puramente decorativo (aria-hidden), opacidad baja para que sea
   textura y no compita con el contenido. Un solo SVG con 4 trazos
   sueltos, posicionado en distintas esquinas vía las clases --a/--b/--c/--d
   para reutilizar el mismo <svg> en cualquier bloque. */
.doodle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* El contenido real del bloque necesita su propio z-index para quedar
   siempre encima de la textura de garabatos (position:absolute pinta
   después del contenido estático del bloque por defecto, sin esto los
   garabatos taparían el texto/la ilustración). */
.hero-band>.container {
  position: relative;
  z-index: 1;
}

.doodle {
  position: absolute;
  opacity: .12;
  color: #fff;
}

.doodle--a {
  top: 8%;
  left: 4%;
  width: 34px;
}

.doodle--b {
  top: 65%;
  left: 12%;
  width: 22px;
}

.doodle--c {
  top: 15%;
  right: 6%;
  width: 26px;
}

.doodle--d {
  bottom: 10%;
  right: 14%;
  width: 30px;
}

/* Sobre fondos claros (hero menta de interrupcion-del-embarazo.html) el
   garabato blanco se pierde: se oscurece en vez de aclarar. */
.hero-band--mint .doodle {
  color: var(--serena-accent);
  opacity: .1;
}

/* =========================================================
   GESTOGRAMA.HTML — lo que queda de la pasada 2026-09-23. El rediseño
   "collage" (2026-09-24) está al final del archivo, bajo body.gest-page.
   #gestograma y #opciones también existen en pruebas.html: su
   position:relative se conserva tal cual.
   ========================================================= */
.hero-band--green {
  background: var(--serena-action);
}

#gestograma,
#opciones {
  position: relative;
}

/* Tarjetas de #opciones: misma estructura de tapa deslizante que #rutas
   (index.html), duplicada para no tocar esa página. */
#opciones .route-card--flip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(210px, auto);
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 0;
}

#opciones .route-card--flip h3,
#opciones .route-card--flip p {
  grid-column: unset;
  grid-row: unset;
  align-self: unset;
  text-align: center;
}

/* .route-flip-cover / .route-flip-content / .route-flip-icon /
   .route-flip-cta son genéricas (no scoped a #rutas) y ya cubren la
   tapa, el contenido revelado y la transición — no hace falta
   duplicarlas aquí. */
@media (hover: hover) {

  #opciones .route-card--flip:hover .route-flip-cover,
  #opciones .route-card--flip:focus-visible .route-flip-cover {
    transform: translateY(-100%);
  }
}

#opciones .route-card--flip.is-open .route-flip-cover {
  transform: translateY(-100%);
}

/* =========================================================
   DESCARGAR-SERENA.HTML (antes: assets/css/descargar-serena.css,
   consolidado acá 2026-09-24). Todas las clases llevan el prefijo
   "descarga-" para no chocar con nada del resto del sitio. Reutiliza a
   propósito componentes ya existentes más arriba en este archivo:
   hero-band/hero-band--purple, doodle-field, section-divider,
   badge-tag/label-handwritten, badge-hashtag, highlight-underline,
   support-sticker, floaty, app-hero-badge (app-badge-reminder/
   app-badge-guide), phone-mockup-wrapper, faq-carousel-title,
   stagger-children, reveal-on-scroll.
   ========================================================= */

/* ---------------------------------------------------------------
   A. Hero
   --------------------------------------------------------------- */

/* Nota final como post-it lila con cinta — mismo lenguaje que
   .confianza-quote/.confianza-quote-tape del index (papel + cinta +
   rotación), en tono lila (--serena-blue-tint) para diferenciarse de la
   cita morada de esa otra sección. */

/* Collage visual del hero: sin caja, elementos superpuestos con
   desbordes controlados. overflow-x:clip en la sección madre evita
   scroll horizontal por los desbordes. */

/* ---------------------------------------------------------------
   B. Recorrido "Lo que encuentras en la app"
   --------------------------------------------------------------------
   Rediseñado 2026-09-23: las 5 ilustraciones finales llegaron con
   composiciones muy distintas entre sí (una escena única casi cuadrada,
   tiras de 2, 3 y hasta 5 viñetas muy anchas) — el diseño original
   (círculo fijo de 112px + un único SVG de camino estirado con
   preserveAspectRatio="none" de punta a punta de la sección) forzaba esas
   proporciones tan dispares dentro de un círculo (recortando/aplastando
   el contenido) y estiraba el trazo de forma no uniforme sobre un
   contenedor mucho más alto que ancho, deformándolo. Ahora cada
   ilustración se muestra dentro de una altura fija por parada
   (object-fit:contain — nunca recorta ni deforma, solo deja ver más o
   menos "marco" a los lados o arriba/abajo según la proporción real de
   cada imagen), dentro de un marco de color que hace de "passe-partout"
   — funciona igual de bien con las escenas de fondo opaco que con las
   tiras de fondo transparente, y con la altura fija todas las tarjetas
   del camino quedan a la misma altura H aunque las ilustraciones lleguen
   con proporciones muy distintas entre sí. El "camino" pasa a ser una
   serie de conectores cortos de tamaño fijo entre paradas (nunca se
   estiran, no dependen de la altura real de cada parada). */

/* Marco de color: hace de "mat" alrededor de la ilustración — funciona
   tanto para las escenas de fondo opaco (se ven como una foto con marco)
   como para las tiras de fondo transparente (el color de marca se ve en
   el espacio negativo alrededor del dibujo, en vez de quedar en blanco). */

/* Alto fijo para las 5 ilustraciones (llegaron con proporciones muy
   dispares: de casi cuadradas a tiras 3.6:1) — object-fit:contain nunca
   recorta ni estira, solo deja ver más o menos color de --paso-bg como
   "marco" a los lados o arriba/abajo. Así todas las tarjetas quedan con
   la misma altura H sin importar la proporción real de cada imagen. */

/* Nota tipo papel, rotación suave (entre -3° y 3°), Baloo 2. Se superpone
   al borde inferior del marco (margin-top negativo) como una etiqueta
   pegada, no como un bloque de texto separado. */

/* Conector corto entre paradas: tamaño fijo (nunca se estira ni se
   deforma), independiente de cuánto mida cada parada real. */

/* Trazado al hacer scroll: visible por defecto (dasharray punteado fijo
   de arriba), solo se "dibuja" si JS realmente puede animarlo (ver
   main.js). Mismo patrón a prueba de fallos que .stagger-children
   del index. */

/* ---------------------------------------------------------------
   C. Muro de mensajes (arte urbano)
   --------------------------------------------------------------- */

/* Pegatina de mensaje: texto real en HTML (nunca dentro de una imagen),
   sombra desplazada en vez de difusa, giro fijo + leve interacción. */

/* ---------------------------------------------------------------
   D. Cierre con llamada a la acción
   --------------------------------------------------------------- */

/* Botón sobre fondo magenta: borde blanco + sombra desplazada clara para
   que el botón se despegue del fondo (el verde de --serena-action ya
   contrasta por matiz, esto suma definición de borde). */

/* =========================================================
   INTERRUPCION-DEL-EMBARAZO.HTML — rediseño "collage" (2026-09-24)
   Exclusivo de esa página: clases nuevas con prefijo "inte-", o clases
   compartidas re-estilizadas SOLO bajo body.inte-page / .inte-band--*
   (sus reglas base, que usan index.html, gestograma.html, pruebas.html,
   etc., no se tocan). Animaciones con el patrón "visible por defecto":
   los estados ocultos solo aplican con .js-inte-ready en <html>, que
   main.js agrega únicamente si hay IntersectionObserver y no hay
   prefers-reduced-motion.
   ========================================================= */

:root {
  --inte-antes: var(--serena-cream-band);
  --inte-dur-a: var(--serena-blue-tint);
  --inte-dur-b: var(--serena-mint-soft);
  --inte-dur-c: var(--serena-accent);
  --inte-despues: var(--serena-primary-tint);
}

.inte-page {
  --inte-gutter: clamp(16px, 4vw, 64px);
  --inte-ease: cubic-bezier(.2, .7, .2, 1);
  --inte-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --inte-sticky-top: calc(var(--header-h, 80px) + 84px);
}

/* ---------------------------------------------------------------
   Base: contenedor, grilla de 12 columnas, bandas a sangre
   --------------------------------------------------------------- */
.inte-wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--inte-gutter), 1440px);
  margin-inline: auto;
}

.inte-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 992px) {
  .inte-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.inte-band {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding-top: clamp(64px, 9vw, 136px);
  scroll-margin-top: 4.5rem;
}

.inte-band>.inte-wrap {
  padding-bottom: clamp(48px, 7vw, 104px);
}

.inte-band--antes {
  background: var(--inte-antes);
}

.inte-band--dur-a {
  background: var(--inte-dur-a);
}

.inte-band--dur-b {
  background: var(--inte-dur-b);
}

.inte-band--dur-c {
  background: var(--inte-dur-c);
  color: #fff;
}

.inte-band--despues {
  background: var(--inte-despues);
}

.inte-page main a:focus-visible,
.inte-page main button:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 3px;
}

.inte-page .inte-band--dur-c a:focus-visible,
.inte-page .inte-band--dur-c button:focus-visible,
.inte-page .inte-progress a:focus-visible {
  outline-color: #fff;
}

/* ---------------------------------------------------------------
   Piezas comunes: figuras, manchas, stickers, texto, huecos de imagen
   --------------------------------------------------------------- */
.inte-figure {
  position: relative;
  margin: 0;
}

.inte-figure>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.inte-blob {
  position: absolute;
  z-index: 0;
  inset: 8% 6% 6% 4%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  rotate: -7deg;
  pointer-events: none;
}

.inte-blob--mint {
  background: var(--serena-mint-soft);
}

.inte-blob--cream {
  background: var(--serena-cream-band);
}

.inte-blob--lilac {
  background: rgba(var(--serena-purple-accent-rgb), .16);
}

.inte-blob--blue {
  background: var(--serena-blue-tint);
}

.inte-page .inte-sticker {
  position: absolute;
  z-index: 3;
  width: clamp(72px, 8.5vw, 124px);
  height: auto;
  pointer-events: none;
}

.inte-sticker--hero {
  top: clamp(84px, 10vw, 140px);
  right: clamp(8px, 3vw, 56px);
  z-index: 4;
}

.inte-sticker--antes-a,
.inte-sticker--durb {
  top: clamp(12px, 2vw, 28px);
  left: clamp(8px, 2.5vw, 40px);
}

.inte-sticker--antes-b {
  bottom: clamp(56px, 6vw, 96px);
  left: clamp(8px, 4vw, 64px);
}

.inte-sticker--dura,
.inte-sticker--despues-a {
  top: clamp(12px, 2vw, 28px);
  right: clamp(8px, 3vw, 48px);
}

.inte-sticker--despues-b {
  bottom: clamp(56px, 6vw, 96px);
  right: clamp(8px, 4vw, 64px);
}

.inte-page .inte-kicker {
  margin-bottom: .5rem;
}

.inte-h2 {
  position: relative;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--serena-text);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.inte-h2-accent {
  position: relative;
  display: inline-block;
}

.inte-underline {
  position: absolute;
  left: -2%;
  bottom: -.16em;
  width: 104%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
}

.inte-circle {
  position: absolute;
  left: -8%;
  top: -18%;
  width: 116%;
  height: 140%;
  overflow: visible;
  pointer-events: none;
  color: var(--serena-purple-accent);
}

.inte-underline path,
.inte-circle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.inte-text {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--serena-text-soft);
}

.inte-note {
  max-width: 62ch;
  margin: .6rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--serena-text-soft);
}

.inte-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  rotate: -6deg;
}

/* Hueco de imagen que todavía no existe (ver comentario FALTA en el HTML):
   mismo tamaño y proporción que tendrá el PNG final. */

/* Chips sueltos (sin contenedor), con giro corto */
.inte-page .inte-chips {
  gap: 10px 12px;
  margin: 1rem 0 .75rem;
}

.inte-page .inte-chips>.chip-list-item {
  padding: .5rem .95rem;
  border-width: 2px;
  background: #fff;
  font-size: .9rem;
  font-weight: 700;
  rotate: var(--chip-rot, 0deg);
}

.inte-page .inte-chips>:nth-child(3n+1) {
  --chip-rot: -2deg;
}

.inte-page .inte-chips>:nth-child(3n+2) {
  --chip-rot: 1.5deg;
}

.inte-page .inte-chips>:nth-child(3n) {
  --chip-rot: -.8deg;
}

/* ---------------------------------------------------------------
   Hero (fondo menta, textos y columnas de siempre)
   --------------------------------------------------------------- */
.inte-page .inte-hero {
  z-index: 2;
  overflow-x: clip;
}

.inte-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: end;
  padding-top: clamp(36px, 6vw, 96px);
}

.inte-hero-copy {
  align-self: center;
  padding-bottom: 16px;
}

.inte-page .inte-hero .inte-hero-h1 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--serena-text);
  margin-bottom: clamp(18px, 2.4vw, 32px);
}

.inte-hero-accent {
  position: relative;
  display: inline-block;
  color: var(--serena-accent-dark);
}

.inte-hero-accent .inte-underline {
  color: #fff;
}

.inte-page .inte-hero .inte-hero-lead {
  max-width: 56ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--serena-text);
}

.inte-tag-sticker {
  display: inline-block;
  padding: .04em .45em;
  border-radius: 999px;
  background: var(--serena-accent);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  rotate: -1.5deg;
}

.inte-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.inte-hero-figure {
  z-index: 3;
  width: min(100%, 560px);
  margin: 0 auto -48px;
}

.inte-hero-figure>img {
  filter: drop-shadow(0 22px 26px rgba(var(--serena-text-rgb), .14));
}

.inte-hero-figure .inte-blob {
  inset: 10% 2% 14% 6%;
  rotate: -8deg;
}

@media (min-width: 992px) {
  .inte-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .inte-hero-copy {
    padding-bottom: clamp(40px, 6vw, 104px);
  }

  /* ≈46 % del contenedor; sobresale de la banda por encima de la ola */
  .inte-hero-figure {
    width: auto;
    margin: 0 calc(-.5 * var(--inte-gutter)) calc(-1 * clamp(96px, 10vw, 168px)) 0;
  }
}

.inte-page .inte-hero .doodle {
  opacity: .32;
  color: var(--serena-accent);
}

.inte-page .inte-hero .doodle--a {
  top: 1.5%;
  left: .5%;
  width: 22px;
}

.inte-page .inte-hero .doodle--b {
  top: auto;
  bottom: 12%;
  left: 1%;
  width: 22px;
}

.inte-page .inte-hero .doodle--c {
  top: 1.5%;
  right: 1.5%;
  width: 28px;
}

.inte-page .inte-hero .doodle--d {
  bottom: 10%;
  right: 2%;
  width: 24px;
}

/* Botones del sitio en esta página: píldora + sombra suave */
.inte-page .inte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(var(--serena-text-rgb), .45);
  transition: transform .25s var(--inte-ease), box-shadow .25s var(--inte-ease), background-color .2s ease, color .2s ease;
}

.inte-page .inte-btn i {
  display: inline-block;
  transition: transform .3s var(--inte-bounce);
}

.inte-page .inte-btn--light {
  background: #fff;
  color: var(--serena-accent);
  border: 2px solid var(--serena-accent);
}

.inte-page .inte-btn--light:hover,
.inte-page .inte-btn--light:focus-visible {
  background: var(--serena-accent);
  border-color: var(--serena-accent);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .inte-page .inte-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(var(--serena-text-rgb), .5);
  }

  .inte-page .inte-btn:hover i {
    transform: rotate(-14deg) scale(1.1);
  }
}

/* ---------------------------------------------------------------
   Barra de progreso Antes · Durante · Después (sticky bajo el header)
   --------------------------------------------------------------- */
.inte-progress {
  position: sticky;
  top: calc(var(--header-h, 80px) + 10px);
  z-index: 1020;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 0;
  pointer-events: none;
}

.inte-progress-pill {
  position: relative;
  padding: 5px;
  border-radius: 999px;
  background: var(--serena-accent);
  box-shadow: 0 12px 26px -12px rgba(var(--serena-text-rgb), .55);
  pointer-events: auto;
  transition: opacity .35s var(--inte-ease), transform .35s var(--inte-ease), visibility .35s;
}

.inte-progress.is-hidden .inte-progress-pill {
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
}

.inte-progress ol {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inte-progress-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .25s ease;
}

.inte-progress-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.inte-progress-link[aria-current="true"] {
  background: rgba(255, 255, 255, .16);
}

.inte-progress-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

/* Punto activo único: salta de estación en estación */
.inte-progress-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--serena-mint-soft);
  opacity: 0;
  translate: var(--mx, 0) var(--my, 0);
  pointer-events: none;
}

.inte-progress-marker.is-set {
  opacity: 1;
  transition: translate .45s var(--inte-bounce), opacity .2s ease;
}

.inte-progress-marker.is-jump {
  animation: inteDotJump .45s var(--inte-ease);
}

@keyframes inteDotJump {
  45% {
    transform: translateY(-9px) scale(1.35);
  }
}

@media (max-width: 575.98px) {
  .inte-progress-link {
    gap: .35rem;
    padding: .4rem .7rem;
    font-size: .8rem;
  }

  .inte-progress-dot,
  .inte-progress-marker {
    width: 8px;
    height: 8px;
  }
}

/* ---------------------------------------------------------------
   ANTES (crema)
   --------------------------------------------------------------- */
.inte-band--antes .inte-kicker {
  color: var(--serena-accent);
}

.inte-h2--antes {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

.inte-h2--antes .inte-h2-accent {
  color: var(--serena-purple-accent);
}

.inte-antes-aside {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.inte-figure--acompanar {
  width: min(100%, 640px);
}

.inte-cta {
  text-align: center;
}

.inte-cta-q {
  margin-bottom: .75rem;
  font-weight: 700;
  color: var(--serena-text);
}

.inte-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.inte-cta-sticker {
  width: clamp(64px, 8vw, 120px);
  height: auto;
}

@media (min-width: 992px) {
  .inte-antes-head {
    align-items: start;
  }

  .inte-head--antes {
    grid-column: 1 / 7;
    padding-top: clamp(8px, 2vw, 32px);
  }

  /* Deja espacio a la ilustración del hero que sobresale arriba a la derecha */
  .inte-antes-aside {
    grid-column: 7 / 13;
    padding-top: clamp(96px, 11vw, 176px);
  }
}

/* Tres puntos unidos por un hilo que se dibuja con el scroll */
.inte-antes-points {
  position: relative;
  display: grid;
  row-gap: clamp(72px, 11vw, 168px);
  margin-top: clamp(64px, 10vw, 150px);
}

.inte-thread {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--inte-gutter) / 2 - 12px);
  z-index: 0;
  width: 24px;
  height: 100%;
  overflow: visible;
  color: var(--serena-purple-accent);
  pointer-events: none;
}

.inte-thread-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .6;
}

.inte-antes-point {
  position: relative;
}

.inte-point-marker {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 0 0 5px var(--inte-antes);
}

.inte-point-copy {
  position: relative;
  z-index: 2;
  max-width: 62ch;
}

.inte-page .inte-point-copy h3,
.inte-page .inte-dura-revisa h3,
.inte-page .inte-tomar-head h3 {
  margin-bottom: .75rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  color: var(--serena-text);
}

.inte-page .inte-point-copy p,
.inte-page .inte-dura-revisa p,
.inte-page .inte-tomar-head p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--serena-text-soft);
}

.inte-page .inte-point-copy .inte-note,
.inte-page .inte-dura-revisa .inte-note {
  font-size: .92rem;
}

.inte-figure--bleed {
  margin-left: calc(-1 * var(--inte-gutter));
}

.inte-figure--sticker-xl {
  justify-self: center;
  width: min(100%, 420px);
}

.inte-figure--sticker-xl .inte-blob {
  inset: 4%;
  border-radius: 50%;
  rotate: 0deg;
}

.inte-figure--sticker-xl img {
  filter: drop-shadow(0 12px 16px rgba(var(--serena-text-rgb), .12));
}

.inte-antes-point--3 {
  display: grid;
  justify-items: center;
  row-gap: clamp(24px, 3vw, 40px);
}

.inte-point-copy--center {
  text-align: center;
}

.inte-escena {
  display: grid;
  justify-items: center;
  row-gap: 24px;
  width: 100%;
}

.inte-escena-figure {
  width: min(100%, 680px);
}

.inte-escena-chips {
  justify-content: center;
}

.inte-point-foot {
  max-width: 62ch;
}

@media (min-width: 992px) {
  .inte-point-marker {
    position: absolute;
    top: -6px;
    left: calc(-1 * var(--inte-gutter) / 2 - 20px);
  }

  .inte-antes-point--1 .inte-figure--bleed {
    grid-column: 1 / 7;
    margin-left: calc(-1 * max(var(--inte-gutter), (100vw - 1440px) / 2));
  }

  .inte-antes-point--1 .inte-point-copy {
    grid-column: 7 / 13;
  }

  .inte-antes-point--2 .inte-point-copy {
    grid-column: 1 / 8;
  }

  .inte-antes-point--2 .inte-figure--sticker-xl {
    grid-column: 8 / 13;
  }

  /* Escena central con los chips a ambos lados: la lista usa la misma
     plantilla de 3 columnas que el contenedor, así sus pistas coinciden
     y la columna del medio queda libre para la imagen. */
  .inte-escena,
  .inte-escena-chips {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 32px);
  }

  .inte-escena {
    align-items: center;
    justify-items: stretch;
  }

  .inte-escena-figure {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .inte-page .inte-escena-chips {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    row-gap: 16px;
    align-content: center;
    margin: 0;
    pointer-events: none;
  }

  .inte-page .inte-escena-chips>li {
    max-width: 100%;
    border-radius: 24px;
    pointer-events: auto;
  }

  .inte-escena-chips>:nth-child(-n+4) {
    grid-column: 1;
    justify-self: end;
  }

  .inte-escena-chips>:nth-child(n+5) {
    grid-column: 3;
    justify-self: start;
  }

  .inte-escena-chips>:nth-child(1),
  .inte-escena-chips>:nth-child(5) {
    grid-row: 1;
  }

  .inte-escena-chips>:nth-child(2),
  .inte-escena-chips>:nth-child(6) {
    grid-row: 2;
  }

  .inte-escena-chips>:nth-child(3),
  .inte-escena-chips>:nth-child(7) {
    grid-row: 3;
  }

  .inte-escena-chips>:nth-child(4),
  .inte-escena-chips>:nth-child(8) {
    grid-row: 4;
  }
}

@media (min-width: 1200px) {

  .inte-escena,
  .inte-escena-chips {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 1.5fr) minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------
   DURANTE A (lila): medicamentos y cómo tomarlos
   --------------------------------------------------------------- */
.inte-band--dur-a .inte-kicker {
  color: var(--serena-purple-accent);
}

.inte-head--dur-a {
  max-width: 920px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  text-align: center;
}

.inte-h2--dur-a {
  font-size: clamp(2rem, 4vw, 3.3rem);
  color: var(--serena-accent);
}

/* Subrayado tipo resaltador en menta, se "pinta" al entrar */
.inte-h2--dur-a .inte-h2-accent {
  padding-inline: .1em;
  background: linear-gradient(transparent 56%, rgba(var(--serena-mint-soft-rgb), .85) 56%, rgba(var(--serena-mint-soft-rgb), .85) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
}

.inte-page .inte-band--dur-a .durante-eyebrow {
  font-size: .85rem;
  color: var(--serena-purple-accent);
}

.inte-page .inte-band--dur-a .durante-title {
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  color: var(--serena-accent);
}

.inte-page .inte-band--dur-a .durante-lead {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--serena-text);
}

.inte-teasers {
  margin-top: 1.5rem;
}

.inte-page .inte-teasers .durante-feature-item {
  padding-left: 1rem;
  border-left: 3px solid var(--serena-accent);
}

.inte-page .inte-teasers .durante-feature-item.is-urgent {
  border-left-color: var(--serena-urgent-text);
}

.inte-page .inte-teasers .durante-feature-item i {
  color: var(--serena-accent);
}

.inte-page .inte-teasers .durante-feature-item.is-urgent i {
  color: var(--serena-urgent-text);
}

.inte-page .inte-teasers .durante-feature-content h4 {
  margin-bottom: .25rem;
  font-weight: 800;
  color: var(--serena-text);
}

.inte-page .inte-teasers .durante-feature-content p {
  color: var(--serena-text);
}

.inte-page .inte-teasers .btn {
  border-radius: 999px;
  font-weight: 700;
}

.inte-page .inte-band--dur-a .btn-outline-serena {
  border: 2px solid var(--serena-accent);
  color: var(--serena-accent);
}

.inte-page .inte-band--dur-a .btn-outline-serena:hover {
  background: var(--serena-accent);
  color: #fff;
}

.inte-dura-figure .inte-blob {
  inset: 6% 2% 4% 8%;
  rotate: 6deg;
}

.inte-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  box-shadow: 0 6px 14px -8px rgba(var(--serena-text-rgb), .5);
}

.inte-badge--rest {
  left: 2%;
  bottom: 14%;
  background: #fff;
  color: var(--serena-accent-red);
  rotate: -4deg;
}

.inte-badge--support {
  right: 4%;
  bottom: 3%;
  background: var(--serena-accent);
  color: #fff;
  rotate: 3deg;
}

.inte-dura-revisa {
  position: relative;
  max-width: 62ch;
}

.inte-pill-sticker {
  position: absolute;
  top: clamp(-56px, -5vw, -32px);
  right: clamp(-8px, 1vw, 16px);
  z-index: 2;
  width: clamp(72px, 9vw, 136px);
  height: auto;
  pointer-events: none;
}

.inte-page .inte-notice {
  margin-bottom: .75rem;
  border: none;
  border-radius: 6px 22px 8px 20px / 18px 6px 22px 8px;
}

@media (min-width: 992px) {
  .inte-dura-top {
    align-items: start;
    row-gap: clamp(56px, 7vw, 96px);
  }

  .inte-dura-intro {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  /* Imagen al lado del texto de "¿Qué puedo esperar?" y de "Revisa tus
     medicamentos": se queda fija mientras se lee la columna. */
  .inte-dura-figure {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    position: sticky;
    top: var(--inte-sticky-top);
  }

  .inte-dura-revisa {
    grid-column: 1 / 7;
    grid-row: 2;
  }
}

/* Cómo tomar: tres imágenes en fila, escalonadas */
.inte-tomar {
  margin-top: clamp(80px, 11vw, 160px);
}

.inte-tomar-head {
  max-width: 62ch;
}

.inte-tomar-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
  margin: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px);
}

.inte-tomar-item {
  position: relative;
  margin: 0;
  rotate: var(--r, 0deg);
}

.inte-tomar-item::before {
  content: "";
  position: absolute;
  inset: 8% 4% 2% 6%;
  z-index: 0;
  border-radius: 55% 45% 50% 50% / 48% 52% 48% 52%;
  background: var(--serena-cream-band);
}

.inte-tomar-item:nth-child(2)::before {
  background: rgba(var(--serena-mint-soft-rgb), .7);
}

.inte-tomar-item img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.inte-tomar-item:nth-child(1) {
  --r: -2deg;
  margin-top: clamp(16px, 3vw, 48px);
}

.inte-tomar-item:nth-child(3) {
  --r: 2deg;
  margin-top: clamp(32px, 5vw, 80px);
}

.inte-tomar-dots {
  display: none;
}

.inte-esquemas {
  align-items: start;
}

.inte-esquema-title {
  margin-bottom: 1rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  color: var(--serena-accent);
}

.inte-page .inte-esquemas .step-tracker>li>i {
  background: transparent;
  color: var(--serena-purple-accent);
}

.inte-page .inte-esquemas .step-tracker>li>span {
  color: var(--serena-text);
}

.inte-media-blob {
  position: relative;
  margin-top: 1.5rem;
  padding: clamp(12px, 2vw, 24px);
}

.inte-media-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%;
  rotate: -3deg;
}

.inte-media-blob--cream::before {
  background: var(--serena-cream-band);
}

.inte-media-blob--lilac::before {
  background: rgba(var(--serena-purple-accent-rgb), .14);
}

.inte-media-blob>* {
  position: relative;
  z-index: 1;
}

.inte-media-blob>img {
  display: block;
  width: 100%;
  height: auto;
  rotate: 1deg;
}

.inte-page .inte-media-blob .video-thumb-card {
  border-radius: 22px;
  rotate: -1.5deg;
}

@media (min-width: 992px) {
  .inte-esquema--a {
    grid-column: 1 / 7;
  }

  .inte-esquema--b {
    grid-column: 7 / 13;
  }
}

@media (max-width: 767.98px) {

  /* Móvil: carrusel horizontal con puntos */
  .inte-tomar-row {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * var(--inte-gutter));
    padding: 16px var(--inte-gutter) 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .inte-tomar-row::-webkit-scrollbar {
    display: none;
  }

  .inte-tomar-row>.inte-tomar-item {
    flex: 0 0 84%;
    margin-top: 0;
    scroll-snap-align: center;
  }

  .inte-tomar-row>.inte-tomar-item:nth-child(1) {
    --r: -1deg;
  }

  .inte-tomar-row>.inte-tomar-item:nth-child(3) {
    --r: 1deg;
  }

  .inte-tomar-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -4px 0 40px;
  }

  .inte-tomar-dots>span {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: rgba(var(--serena-text-rgb), .25);
    transition: width .3s ease, background-color .3s ease;
  }

  .inte-tomar-dots>span.is-active {
    width: 22px;
    background: var(--serena-purple-accent);
  }
}

/* ---------------------------------------------------------------
   DURANTE B (menta): qué suele esperarse
   --------------------------------------------------------------- */
.inte-page .inte-band--dur-b .inte-note {
  color: var(--serena-text);
}

.inte-head--dur-b {
  margin-bottom: clamp(40px, 6vw, 80px);
  text-align: center;
}

.inte-head--dur-b .inte-num {
  display: flex;
  margin: 0 auto 1.25rem;
  background: var(--serena-accent);
}

.inte-h-label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: .12em .6em .08em;
  border-radius: 8px 22px 10px 24px / 20px 8px 24px 10px;
  background: var(--serena-cream-band);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--serena-text);
  rotate: -2deg;
}

/* Cinta naranja (el naranja solo como detalle, nunca de fondo) */
.inte-h-label::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 14%;
  width: clamp(64px, 8vw, 104px);
  height: 26px;
  background: rgba(var(--serena-accent-orange-rgb), .8);
  rotate: -7deg;
}

/* Grilla rota tipo mural: dos grandes y tres medianas, con giros y solapes */
.inte-esperar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.inte-esperar {
  position: relative;
  margin: 0;
  rotate: var(--r, 0deg);
}

.inte-esperar figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: -1.4rem;
  padding-inline: 8px;
}

.inte-page .inte-esperar .symptom-chip {
  max-width: 100%;
  border-width: 2px;
  border-radius: 22px;
  font-weight: 700;
  rotate: calc(var(--r, 0deg) * -1.5);
}

@media (min-width: 768px) {
  .inte-esperar-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px) clamp(16px, 2.5vw, 40px);
  }

  .inte-esperar:nth-child(1) {
    grid-column: 1 / 7;
    --r: -2deg;
  }

  .inte-esperar:nth-child(2) {
    grid-column: 7 / 13;
    --r: 1.5deg;
    margin-top: clamp(32px, 6vw, 96px);
  }

  .inte-esperar:nth-child(3) {
    grid-column: 1 / 5;
    --r: 2deg;
    margin-top: clamp(-80px, -5vw, -24px);
  }

  .inte-esperar:nth-child(4) {
    grid-column: 5 / 9;
    --r: -1.5deg;
    margin-top: clamp(8px, 2vw, 32px);
  }

  .inte-esperar:nth-child(5) {
    grid-column: 9 / 13;
    --r: 1deg;
    margin-top: clamp(-48px, -3vw, -16px);
  }
}

@media (max-width: 767.98px) {
  .inte-esperar-grid>.inte-esperar {
    width: 88%;
  }

  .inte-esperar-grid>.inte-esperar:nth-child(odd) {
    justify-self: start;
    --r: -1.2deg;
  }

  .inte-esperar-grid>.inte-esperar:nth-child(even) {
    justify-self: end;
    --r: 1.2deg;
  }
}

/* Qué puedo hacer: stickers circulares, sin tarjeta */
.inte-cuidados {
  margin-top: clamp(72px, 10vw, 140px);
  text-align: center;
}

.inte-cuidados-title {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--serena-text);
}

.inte-cuidados-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px) clamp(16px, 3vw, 48px);
}

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

.inte-cuidado-sticker {
  display: block;
  width: clamp(88px, 10vw, 136px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1rem;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 18px -10px rgba(var(--serena-text-rgb), .4);
  rotate: var(--r, 0deg);
}

.inte-cuidado:nth-child(odd) .inte-cuidado-sticker {
  --r: -5deg;
}

.inte-cuidado:nth-child(even) .inte-cuidado-sticker {
  --r: 4deg;
}

.inte-page .inte-cuidado h5 {
  margin-bottom: .35rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--serena-text);
}

.inte-cuidado p {
  max-width: 24ch;
  margin: 0 auto;
  font-size: .98rem;
  color: var(--serena-text);
}

.inte-page .inte-cuidados-note {
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
}

/* ---------------------------------------------------------------
   DURANTE C (morado): señales de alerta
   --------------------------------------------------------------- */
.inte-page .inte-band--dur-c .inte-note {
  color: rgba(255, 255, 255, .88);
}

.inte-page .inte-band--dur-c .citation-link {
  color: #fff;
}

.inte-page .inte-band--dur-c .alert-header {
  max-width: 900px;
  margin: 0 0 clamp(40px, 6vw, 80px);
  text-align: left;
}

.inte-band--dur-c .inte-num {
  background: var(--serena-mint-soft);
  color: var(--serena-accent-dark);
}

.inte-page .inte-band--dur-c .alert-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
}

.inte-page .inte-band--dur-c .alert-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--serena-mint-soft);
}

.inte-h2--dur-c {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  color: #fff;
}

.inte-h2--dur-c .inte-underline {
  color: var(--serena-mint-soft);
}

.inte-page .inte-band--dur-c .alert-note {
  max-width: 720px;
  margin: 1.25rem 0 0;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 22px 8px 24px 10px / 10px 22px 8px 24px;
  background: rgba(255, 255, 255, .1);
}

.inte-page .inte-band--dur-c .alert-note p {
  color: #fff;
}

.inte-page .inte-band--dur-c .alert-note-icon {
  background: var(--serena-mint-soft);
  color: var(--serena-accent-dark);
}

.inte-alertas-art {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(100%, 560px);
  margin-inline: auto;
}

.inte-alerta {
  margin: 0;
  rotate: var(--r, 0deg);
}

.inte-alerta--1 {
  grid-column: 1 / 8;
  grid-row: 1;
  z-index: 1;
  --r: -3deg;
}

.inte-alerta--2 {
  grid-column: 4 / 11;
  grid-row: 1;
  z-index: 2;
  margin-top: 46%;
  --r: 2deg;
}

.inte-page .inte-band--dur-c .alert-list-lead {
  font-size: 1.1rem;
  color: #fff;
}

.inte-alert-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 28px;
}

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

.inte-page .inte-band--dur-c .alert-list-item {
  margin: 0;
  padding: .45rem 0 .45rem .9rem;
  border-left: 3px solid rgba(255, 255, 255, .35);
}

.inte-page .inte-band--dur-c .alert-list-item i {
  color: var(--serena-mint-soft);
}

.inte-page .inte-band--dur-c .alert-list-item p {
  color: rgba(255, 255, 255, .9);
}

.inte-page .inte-band--dur-c .alert-list-item strong {
  color: #fff;
}

/* Franja urgente */
.inte-page .inte-band--dur-c .alert-list-item--urgent {
  padding: .7rem .9rem;
  border-left: 5px solid var(--serena-urgent-text);
  border-radius: 4px 16px 16px 4px;
  background: var(--serena-urgent-bg);
}

.inte-page .inte-band--dur-c .alert-list-item--urgent i,
.inte-page .inte-band--dur-c .alert-list-item--urgent p,
.inte-page .inte-band--dur-c .alert-list-item--urgent strong {
  color: var(--serena-urgent-text);
}

.inte-page .inte-band--dur-c .btn-outline-serena {
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
}

.inte-page .inte-band--dur-c .btn-outline-serena:hover {
  background: #fff;
  color: var(--serena-accent);
}

.inte-alertas-foot {
  align-items: stretch;
  margin-top: clamp(40px, 6vw, 72px);
}

.inte-page .inte-band--dur-c .alert-card {
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 26px 10px 24px 12px / 12px 22px 10px 26px;
  background: transparent;
  box-shadow: none;
  color: #fff;
}

.inte-page .inte-band--dur-c .alert-card:hover {
  border-color: rgba(255, 255, 255, .75);
  box-shadow: none;
  transform: none;
}

.inte-page .inte-band--dur-c .alert-card h4 {
  font-weight: 800;
  color: #fff;
}

.inte-page .inte-band--dur-c .alert-card-icon,
.inte-page .inte-band--dur-c .alert-card-toggle {
  background: var(--serena-mint-soft);
  color: var(--serena-accent-dark);
}

.inte-page .inte-band--dur-c .alert-card ul {
  color: rgba(255, 255, 255, .92);
}

.inte-page .inte-band--dur-c .alert-card a {
  color: #fff;
}

/* Nota de apoyo: papel crema con cinta, sin sombra ni giro */
.inte-page .inte-band--dur-c .inte-support {
  overflow: visible;
  background: var(--serena-cream-band);
  box-shadow: none;
}

.inte-page .inte-band--dur-c .inte-support::before {
  border-color: transparent var(--inte-dur-c) transparent transparent;
  filter: none;
}

.inte-page .inte-band--dur-c .inte-support::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 28px;
  width: 84px;
  height: 24px;
  background: rgba(var(--serena-accent-orange-rgb), .85);
  rotate: -5deg;
}

.inte-page .inte-band--dur-c .inte-support p {
  color: var(--serena-text);
}

@media (min-width: 992px) {
  .inte-alertas {
    align-items: start;
  }

  .inte-alertas-art {
    grid-column: 1 / 6;
    width: 100%;
  }

  .inte-alertas-copy {
    grid-column: 6 / 13;
  }

  .inte-alertas-foot>:first-child {
    grid-column: 1 / 7;
  }

  .inte-alertas-foot>:last-child {
    grid-column: 7 / 13;
  }
}

/* ---------------------------------------------------------------
   DESPUÉS (verde muy claro): imagen sticky + línea de tiempo
   --------------------------------------------------------------- */
.inte-band--despues .inte-kicker {
  color: var(--serena-accent-dark);
}

.inte-h2--despues {
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
}

.inte-h2--despues .inte-h2-accent {
  padding: 0 .2em;
  color: var(--serena-accent-dark);
}

.inte-despues-head {
  margin-bottom: clamp(48px, 7vw, 104px);
}

.inte-page .inte-despues-intro .despues-eyebrow {
  color: var(--serena-purple-accent);
}

.inte-page .inte-despues-intro .despues-hero-title {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.inte-page .inte-despues-intro .despues-hero-text {
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--serena-text);
}

.inte-despues-sticky {
  position: relative;
  display: none;
  margin: 0;
  align-items: center;
  justify-items: center;
}

.inte-despues-sticky>.inte-blob {
  inset: 6%;
  rotate: -6deg;
}

/* Crossfade: todas las imágenes en la misma celda, se ve la activa */
.inte-despues-sticky>img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  scale: .96;
  rotate: -2deg;
  transition: opacity .6s var(--inte-ease), scale .8s var(--inte-ease), rotate .8s var(--inte-ease);
}

.inte-despues-sticky>img.is-active {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
}

.inte-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 64px;
  list-style: none;
}

.inte-timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 40px;
  left: 20px;
  width: 4px;
  border-radius: 4px;
  background: var(--serena-primary);
}

.inte-page .inte-timeline .despues-feature-item {
  position: relative;
  display: block;
  padding-bottom: clamp(36px, 5vw, 64px);
}

.inte-page .inte-timeline .despues-feature-item+.despues-feature-item {
  margin-top: 0;
}

.inte-page .inte-timeline .despues-feature-icon {
  position: absolute;
  top: 0;
  left: -64px;
  z-index: 1;
  width: 44px;
  height: 44px;
  background: var(--serena-purple-accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--inte-despues);
  transition: scale .35s var(--inte-bounce);
}

.inte-page .inte-timeline .despues-feature-item.is-urgent .despues-feature-icon {
  background: var(--serena-urgent-text);
  color: #fff;
}

.inte-page .inte-timeline .despues-feature-item.is-current .despues-feature-icon {
  scale: 1.18;
}

.inte-page .inte-timeline .despues-feature-content h4 {
  margin: .35rem 0 .5rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--serena-text);
}

.inte-page .inte-timeline .despues-feature-content p {
  max-width: 62ch;
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--serena-text);
}

.inte-page .inte-timeline .despues-feature-content .inte-note {
  font-size: .92rem;
  color: var(--serena-text-soft);
}

.inte-page .inte-timeline .btn {
  border-radius: 999px;
  font-weight: 700;
}

.inte-timeline-img {
  display: block;
  width: 70%;
  height: auto;
  margin: 0 0 1rem;
  rotate: -1deg;
}

@media (min-width: 992px) {
  .inte-despues-head {
    align-items: end;
  }

  .inte-head--despues {
    grid-column: 1 / 7;
  }

  .inte-despues-intro {
    grid-column: 8 / 13;
  }

  .inte-despues-body {
    align-items: start;
  }

  .inte-despues-sticky {
    display: grid;
    grid-column: 1 / 6;
    position: sticky;
    top: var(--inte-sticky-top);
  }

  .inte-timeline {
    grid-column: 7 / 13;
  }

  .inte-timeline-img {
    display: none;
  }
}

.inte-despues-cierre {
  width: min(100%, 780px);
  margin: clamp(40px, 6vw, 88px) auto clamp(24px, 3vw, 40px);
}

.inte-despues-cierre .inte-blob {
  inset: 8% 4% 4% 6%;
  rotate: 5deg;
}

.inte-page .inte-fuente {
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------------
   Mural: el texto solo a la izquierda, nunca sobre las cuatro mujeres
   --------------------------------------------------------------- */
.inte-mural {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(520px, 52vw, 760px);
  overflow: clip;
  background: var(--serena-mint-soft);
}

.inte-mural-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/ilustraciones/descarga-muro-urbano.webp") right bottom / cover no-repeat;
  transform-origin: 68% 78%;
}

/* Suaviza los afiches en blanco detrás del texto */
.inte-mural::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(131, 199, 160, .96) 0%, rgba(131, 199, 160, .9) 28%, rgba(131, 199, 160, 0) 42%);
}

.inte-mural-inner {
  z-index: 2;
}

.inte-mural-copy {
  max-width: min(30vw, 460px);
  padding-block: clamp(48px, 6vw, 88px);
}

.inte-mural-title {
  margin-bottom: 1rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1.15;
  color: var(--serena-text);
}

.inte-mural-faq {
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: var(--serena-text);
}

.inte-page .inte-mural-faq .citation-link {
  font-weight: 800;
}

.inte-mural-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.inte-mural-actions .badge-hashtag {
  rotate: -3deg;
}

@media (max-width: 991.98px) {
  .inte-mural {
    display: block;
    min-height: 0;
  }

  .inte-mural::before {
    display: none;
  }

  .inte-mural-art {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    background-position: 82% bottom;
  }

  .inte-mural-copy {
    max-width: 62ch;
    padding-block: var(--space-6) clamp(64px, 10vw, 96px);
  }
}

/* ---------------------------------------------------------------
   Marquesina de comunidad (se ve caminar)
   --------------------------------------------------------------- */
.inte-marquee-band {
  position: relative;
  z-index: 1;
  padding-block: clamp(24px, 4vw, 56px) clamp(8px, 2vw, 24px);
  background: var(--serena-cream-band);
}

.inte-divider-up {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  transform: translateY(calc(-100% + 2px));
}

.inte-marquee {
  position: relative;
  overflow: hidden;
}

.inte-marquee-track {
  display: flex;
  width: max-content;
  animation: inteWalk 70s linear infinite;
}

.inte-marquee img {
  flex: none;
  display: block;
  width: auto;
  height: clamp(140px, 16vw, 220px);
}

.inte-marquee:hover .inte-marquee-track,
.inte-marquee.is-paused .inte-marquee-track {
  animation-play-state: paused;
}

@keyframes inteWalk {
  to {
    transform: translateX(-50%);
  }
}

.inte-marquee-toggle {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--serena-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--serena-accent);
  font-size: 1.2rem;
}

.inte-marquee-toggle:hover {
  background: var(--serena-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .inte-marquee-track {
    animation: none;
  }

  .inte-marquee img[aria-hidden="true"],
  .inte-marquee-toggle {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Móvil: una columna, giros ≤ ±1.5°, stickers chicos en los bordes
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .inte-page .inte-sticker {
    width: clamp(50px, 14vw, 66px);
  }

  .inte-sticker--hero {
    top: 8px;
    right: 8px;
  }

  .inte-sticker--antes-a,
  .inte-sticker--durb,
  .inte-sticker--dura,
  .inte-sticker--despues-a {
    top: 8px;
  }

  .inte-sticker--antes-b,
  .inte-sticker--despues-b {
    bottom: 64px;
  }

  .inte-page .inte-hero .doodle--a,
  .inte-page .inte-hero .doodle--c {
    top: 4px;
  }

  .inte-page .inte-kicker {
    transform: rotate(-1.5deg);
  }

  .inte-page .inte-chips>:nth-child(3n+1) {
    --chip-rot: -1deg;
  }

  .inte-page .inte-chips>:nth-child(3n+2) {
    --chip-rot: 1deg;
  }

  .inte-num,
  .inte-h-label,
  .inte-badge--rest,
  .inte-mural-actions .badge-hashtag {
    rotate: -1.5deg;
  }

  .inte-badge--support {
    rotate: 1.5deg;
  }

  .inte-alerta--1 {
    --r: -1.5deg;
  }

  .inte-alerta--2 {
    --r: 1.5deg;
  }

  .inte-cuidado:nth-child(odd) .inte-cuidado-sticker {
    --r: -1.5deg;
  }

  .inte-cuidado:nth-child(even) .inte-cuidado-sticker {
    --r: 1.5deg;
  }

  .inte-page .inte-esperar .symptom-chip {
    rotate: 0deg;
  }
}

/* ---------------------------------------------------------------
   Animaciones (solo si JS puede y no hay movimiento reducido)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero: H1 por líneas, luego lead, etiqueta, botones e imagen */
  .js-inte-ready .inte-hero-h1 .inte-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--inte-ease), transform .7s var(--inte-ease);
    transition-delay: calc(var(--line, 0) * 60ms + 100ms);
  }

  .js-inte-ready .inte-hero.is-go .inte-hero-h1 .inte-word {
    opacity: 1;
    transform: none;
  }

  .js-inte-ready .inte-hero [data-hero-part] {
    opacity: 0;
    transition: opacity .6s var(--inte-ease), transform .7s var(--inte-ease);
    transition-delay: var(--delay, 0ms);
  }

  .js-inte-ready .inte-hero [data-hero-part="up"] {
    transform: translateY(20px);
  }

  .js-inte-ready .inte-hero [data-hero-part="pop"] {
    transform: scale(.8);
    transition-duration: .5s;
    transition-timing-function: var(--inte-ease), var(--inte-bounce);
  }

  .js-inte-ready .inte-hero [data-hero-part="tilt"] {
    transform: rotate(4deg) translateY(28px);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--inte-ease), var(--inte-bounce);
  }

  .js-inte-ready .inte-hero.is-go [data-hero-part] {
    opacity: 1;
    transform: none;
  }

  /* 2-3. Revelado direccional; "tilt" = pegada al muro con rebote */
  .js-inte-ready [data-inte-reveal] {
    opacity: 0;
    transition: opacity .7s var(--inte-ease), transform .75s var(--inte-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js-inte-ready [data-inte-reveal="up"] {
    transform: translateY(32px);
  }

  .js-inte-ready [data-inte-reveal="left"] {
    transform: translateX(-56px);
  }

  .js-inte-ready [data-inte-reveal="right"] {
    transform: translateX(56px);
  }

  .js-inte-ready [data-inte-reveal="pop"] {
    transform: scale(.82);
    transition-timing-function: var(--inte-ease), var(--inte-bounce);
  }

  .js-inte-ready [data-inte-reveal="tilt"] {
    transform: rotate(5deg) translateY(40px) scale(.95);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--inte-ease), var(--inte-bounce);
  }

  .js-inte-ready [data-inte-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 6. Chips y stickers de cuidado en cascada con rebote */
  .inte-page .inte-chips>.chip-list-item {
    transition: rotate .3s var(--inte-bounce);
  }

  .inte-page .inte-chips>:nth-child(odd):hover {
    rotate: 3deg;
  }

  .inte-page .inte-chips>:nth-child(even):hover {
    rotate: -3deg;
  }

  .js-inte-ready [data-inte-stagger]>* {
    opacity: 0;
    transform: scale(.7) translateY(12px);
    transition: opacity .45s var(--inte-ease), transform .6s var(--inte-bounce), rotate .3s var(--inte-bounce);
    transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s;
  }

  .js-inte-ready [data-inte-stagger].is-in>* {
    opacity: 1;
    transform: none;
  }

  /* 5. Trazos: subrayados de los títulos y resaltador de Durante */
  .js-inte-ready .inte-underline path,
  .js-inte-ready .inte-circle path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s var(--inte-ease) .35s;
  }

  .js-inte-ready .inte-hero .inte-underline path {
    transition-delay: .9s;
  }

  .js-inte-ready .is-in .inte-underline path,
  .js-inte-ready .is-in .inte-circle path,
  .js-inte-ready .inte-hero.is-go .inte-underline path {
    stroke-dashoffset: 0;
  }

  .js-inte-ready .inte-h2--dur-a .inte-h2-accent {
    background-size: 0% 100%;
    transition: background-size .9s var(--inte-ease) .3s;
  }

  .js-inte-ready .is-in .inte-h2--dur-a .inte-h2-accent {
    background-size: 100% 100%;
  }

  /* 9. Mural: zoom lento del fondo y titular por palabras */
  .js-inte-ready .inte-mural-art {
    transform: scale(1.08);
    transition: transform 8s ease-out;
  }

  .js-inte-ready .inte-mural.is-in .inte-mural-art {
    transform: scale(1);
  }

  .js-inte-ready .inte-mural-title .inte-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--inte-ease), transform .5s var(--inte-ease);
    transition-delay: calc(var(--i, 0) * 45ms + 250ms);
  }

  .js-inte-ready .inte-mural.is-in .inte-mural-title .inte-word {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .js-inte-ready .inte-esperar:nth-child(odd)[data-inte-reveal] {
    transform: translateX(-40px);
  }

  .js-inte-ready .inte-esperar:nth-child(even)[data-inte-reveal] {
    transform: translateX(40px);
  }

  .js-inte-ready .inte-esperar[data-inte-reveal].is-in {
    transform: none;
  }
}

/* =========================================================
   GESTOGRAMA.HTML — rediseño "collage" (2026-09-24)
   Mismo criterio que interrupcion-del-embarazo.html: bandas de color a
   sangre, stickers, figuras con mancha, trazos a mano y animaciones con
   el patrón "visible por defecto" (los estados ocultos solo aplican con
   .js-gest-ready en <html>, que main.js agrega únicamente si hay
   IntersectionObserver y no hay prefers-reduced-motion).
   Todo va bajo body.gest-page o en clases "gest-": pruebas.html comparte
   el formulario (#gestograma, .gestograma-*, .orientador-box,
   .privacy-box) y no cambia. Símbolo central: la maceta que crece
   (trimestre-1/2/3.png, fondo crema propio → la tarjeta del resultado
   usa el mismo crema para que la imagen no deje un recuadro).
   ========================================================= */

.gest-page {
  --gest-calc: var(--serena-primary-tint);
  --gest-dudas: var(--serena-blue-tint);
  --gest-rutas: var(--serena-accent);
  /* Tonos tomados de la maceta de trimestre-*.png, solo para la maceta
     vacía en SVG del estado inicial (misma maceta, sin planta todavía). */
  --gest-pot: #E9C6A3;
  --gest-pot-line: #815B4A;
  --gest-soil: #694932;
  --gest-gutter: clamp(16px, 4vw, 64px);
  --gest-ease: cubic-bezier(.2, .7, .2, 1);
  --gest-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --gest-paper: 28px 12px 30px 14px / 14px 28px 12px 30px;
}

/* ---------------------------------------------------------------
   Base: contenedor, grilla de 12 columnas, bandas a sangre
   --------------------------------------------------------------- */
.gest-wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gest-gutter), 1440px);
  margin-inline: auto;
}

.gest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(24px, 3.5vw, 48px);
}

@media (min-width: 992px) {
  .gest-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.gest-band {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding-top: clamp(64px, 9vw, 136px);
  scroll-margin-top: 4.5rem;
}

.gest-band>.gest-wrap {
  padding-bottom: clamp(40px, 5vw, 80px);
}

.gest-band--calc {
  background: var(--gest-calc);
}

.gest-band--dudas {
  background: var(--gest-dudas);
}

.gest-band--rutas {
  background: var(--gest-rutas);
  color: #fff;
}

/* La ola verde del pie arranca sobre el morado de la última banda */
.gest-page main+.section-divider {
  background: var(--gest-rutas);
}

.gest-page main a:focus-visible,
.gest-page main button:focus-visible,
.gest-page .gest-faq summary:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 3px;
}

.gest-page .gest-hero a:focus-visible,
.gest-page .gest-hero button:focus-visible,
.gest-page .gest-band--rutas a:focus-visible {
  outline-color: #fff;
}

/* ---------------------------------------------------------------
   Piezas comunes: figuras, manchas, stickers, títulos, trazos
   --------------------------------------------------------------- */
.gest-figure {
  position: relative;
  margin: 0;
}

.gest-figure>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.gest-blob {
  position: absolute;
  z-index: 0;
  inset: 8% 6% 6% 4%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  rotate: -7deg;
  pointer-events: none;
}

.gest-blob--cream {
  background: var(--serena-cream-band);
}

.gest-blob--mint {
  background: var(--serena-mint-soft);
}

.gest-page .gest-sticker {
  position: absolute;
  z-index: 3;
  width: clamp(72px, 8.5vw, 124px);
  height: auto;
  pointer-events: none;
}

.gest-sticker--hero {
  top: clamp(84px, 10vw, 140px);
  right: clamp(8px, 3vw, 56px);
  z-index: 4;
}

/* Abajo a la izquierda, junto al aviso (arriba a la derecha asoma la
   figura del hero y arriba a la izquierda está la etiqueta) */
.gest-sticker--calc {
  bottom: clamp(88px, 9vw, 150px);
  left: clamp(8px, 2vw, 32px);
}

.gest-page .gest-sticker--rutas {
  top: clamp(12px, 2vw, 28px);
  left: clamp(8px, 2.5vw, 40px);
}

.gest-sticker--dudas {
  top: clamp(12px, 2vw, 28px);
  right: clamp(8px, 3vw, 48px);
}

.gest-page .gest-sticker--rutas {
  width: clamp(72px, 8vw, 120px);
}

.gest-page .gest-kicker {
  margin-bottom: .5rem;
  color: var(--serena-accent);
}

.gest-band--rutas .gest-kicker {
  color: var(--serena-mint-soft);
}

.gest-h2 {
  position: relative;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--serena-text);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.gest-h2-accent {
  position: relative;
  display: inline-block;
  color: var(--serena-purple-accent);
}

.gest-h2 .gest-underline {
  color: var(--serena-primary);
}

.gest-h2--light {
  color: #fff;
}

.gest-h2--light .gest-h2-accent {
  color: var(--serena-mint-soft);
}

.gest-h2--light .gest-underline {
  color: #fff;
}

.gest-underline {
  position: absolute;
  left: -2%;
  bottom: -.16em;
  width: 104%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
}

.gest-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.gest-text {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--serena-text-soft);
}

/* Enredadera bajo el título (recorte del espacio vacío superior del PNG) */
.gest-vine {
  display: block;
  width: min(100%, 400px);
  height: auto;
  aspect-ratio: 2172 / 540;
  object-fit: cover;
  object-position: 50% 100%;
  margin: 0 0 1rem -8px;
}

/* ---------------------------------------------------------------
   Hero (verde, textos y botones de siempre)
   --------------------------------------------------------------- */
.gest-page .gest-hero {
  z-index: 2;
  overflow-x: clip;
}

.gest-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: end;
  padding-top: clamp(28px, 5vw, 80px);
}

.gest-hero-copy {
  align-self: center;
  padding-bottom: 16px;
}

.gest-page .gest-hero-kicker {
  margin-bottom: .35rem;
}

.gest-page .gest-hero .gest-hero-h1 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 7.4vw, 5.75rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

.gest-hero-accent {
  position: relative;
  display: inline-block;
}

.gest-hero-accent .gest-underline {
  color: var(--serena-mint-soft);
}

.gest-page .gest-hero .gest-hero-lead {
  max-width: 54ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  color: #fff;
}

.gest-tag-sticker {
  display: inline-block;
  padding: .04em .5em;
  border-radius: 999px;
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-weight: 800;
  white-space: nowrap;
  rotate: -1.5deg;
}

.gest-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

@media (max-width: 575.98px) {
  .gest-hero-actions {
    flex-direction: column;
  }
}

.gest-hero-figure {
  z-index: 3;
  width: min(100%, 460px);
  margin: 8px auto -36px;
}

.gest-hero-figure>img {
  filter: drop-shadow(0 22px 26px rgba(var(--serena-text-rgb), .22));
}

.gest-hero-figure .gest-blob {
  inset: 8% 4% 8% 6%;
  rotate: 6deg;
}

@media (min-width: 992px) {
  .gest-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .gest-hero-copy {
    padding-bottom: clamp(40px, 6vw, 104px);
  }

  /* Sobresale de la banda por encima de la ola, como en interrupción */
  .gest-hero-figure {
    width: auto;
    margin: 0 calc(-.5 * var(--gest-gutter)) calc(-1 * clamp(88px, 9vw, 150px)) 0;
  }
}

/* Botones: píldora + sombra suave. Sobre el verde, "Conversar" va en
   blanco (el morado apenas se separa del verde) y "Escuchar" en contorno. */
.gest-page .gest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  border-width: 2px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(var(--serena-text-rgb), .5);
  transition: transform .25s var(--gest-ease), box-shadow .25s var(--gest-ease), background-color .2s ease, color .2s ease;
}

.gest-page .gest-btn i,
.gest-page .gest-submit i {
  display: inline-block;
  transition: transform .3s var(--gest-bounce);
}

.gest-page .gest-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--serena-purple-accent);
}

.gest-page .gest-btn--light:hover,
.gest-page .gest-btn--light:focus-visible {
  background: var(--serena-cream-band);
  border-color: var(--serena-cream-band);
  color: var(--serena-accent-dark);
}

.gest-page .gest-btn--ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.gest-page .gest-btn--ghost:hover,
.gest-page .gest-btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--serena-action);
}

@media (prefers-reduced-motion: no-preference) {

  .gest-page .gest-btn:hover,
  .gest-page .gest-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(var(--serena-text-rgb), .55);
  }

  .gest-page .gest-btn:hover i,
  .gest-page .gest-submit:hover i {
    transform: rotate(-14deg) scale(1.1);
  }
}

/* ---------------------------------------------------------------
   Calculadora (verde claro): título, nota de privacidad, formulario
   de papel, maceta vacía / resultado, aviso
   --------------------------------------------------------------- */
@media (min-width: 992px) {
  .gest-calc-head {
    grid-column: 1 / span 7;
  }

  .gest-privacy {
    grid-column: 8 / span 5;
    align-self: end;
  }

  .gest-calc-form {
    grid-column: 1 / span 6;
    align-self: start;
  }

  .gest-calc-result {
    grid-column: 7 / span 6;
  }

  .gest-notice {
    grid-column: 2 / span 10;
  }
}

@media (max-width: 991.98px) {
  .gest-sticker--calc {
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
  }

  .gest-privacy,
  .gest-calc-form,
  .gest-calc-result,
  .gest-notice {
    width: 100%;
    max-width: 680px;
  }
}

/* Nota de privacidad: papel con borde punteado, candado en círculo */
.gest-page .gest-privacy {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 4.25rem;
  border: 2px dashed rgba(var(--serena-action-rgb), .5);
  border-radius: var(--gest-paper);
  background: #fff;
  color: var(--serena-text);
  font-weight: 600;
  line-height: 1.55;
  rotate: 1.5deg;
  box-shadow: 0 14px 26px -18px rgba(var(--serena-text-rgb), .4);
}

.gest-page .gest-privacy>.bi {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-size: 1.2rem;
}

/* Formulario: hoja de papel con cinta, preguntas numeradas */
.gest-page .gest-form {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  border: 0;
  border-radius: var(--gest-paper);
  background: #fff;
  box-shadow: 0 24px 40px -28px rgba(var(--serena-text-rgb), .45);
}

.gest-page .gest-form::before {
  content: "";
  position: absolute;
  top: -13px;
  left: clamp(24px, 12%, 64px);
  width: 112px;
  height: 28px;
  border-radius: 3px;
  background: rgba(var(--serena-mint-soft-rgb), .8);
  rotate: -4deg;
  pointer-events: none;
}

.gest-page .gest-q {
  position: relative;
  display: block;
  min-height: 32px;
  padding-left: 44px;
  margin-bottom: .75rem;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--serena-text);
}

.gest-page .gest-q .text-body-secondary {
  font-family: "Nunito Sans", sans-serif;
  font-size: .9rem;
}

.gest-step {
  position: absolute;
  top: -.15rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  rotate: -6deg;
}

.gest-page .gest-form .form-control {
  min-height: 56px;
  border: 2px solid var(--serena-control-border);
  border-radius: 16px;
  font-size: 1.1rem;
}

.gest-page .gest-form .form-control:focus {
  border-color: var(--serena-accent);
  box-shadow: 0 0 0 4px rgba(var(--serena-purple-accent-rgb), .18);
}

.gest-page .gest-form .form-control[aria-invalid="true"] {
  border-color: var(--serena-urgent-border);
}

/* Sin rojo en la paleta: el error usa el terracota "urgente" del sitio */
.gest-page #fum-error {
  color: var(--serena-urgent-text) !important;
  font-weight: 700;
}

.gest-page .gest-no-recuerdo {
  font-size: .95rem;
  color: var(--serena-text-soft);
}

.gest-page .gest-no-recuerdo b {
  color: var(--serena-text);
}

.gest-page .gest-no-recuerdo a {
  font-weight: 700;
  color: var(--serena-action);
}

.gest-page .gestograma-choice-group .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .5rem .9rem;
  border-width: 2px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
}

.gest-page .gest-submit {
  min-height: 58px;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 14px 26px -14px rgba(var(--serena-action-rgb), .8);
  transition: transform .25s var(--gest-ease), box-shadow .25s var(--gest-ease), background-color .2s ease;
}

/* Estado inicial: maceta vacía sobre papel crema */
.gest-page .gestograma-placeholder {
  min-height: 360px;
  gap: .25rem;
  padding: clamp(24px, 3vw, 40px);
  border: 3px dashed rgba(var(--serena-action-rgb), .35);
  border-radius: var(--gest-paper);
  background: var(--serena-cream-band);
}

.gest-page .gestograma-placeholder p {
  max-width: 34ch;
  font-weight: 600;
  line-height: 1.55;
  color: var(--serena-text-soft);
}

.gest-pot {
  width: clamp(160px, 46%, 260px);
  margin: 0 auto .5rem;
}

.gest-pot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gest-pot-shadow {
  fill: rgba(var(--serena-text-rgb), .08);
}

.gest-pot-soil {
  fill: var(--gest-soil);
}

.gest-pot-body {
  fill: var(--gest-pot);
  stroke: var(--gest-pot-line);
  stroke-width: 4;
  stroke-linejoin: round;
}

.gest-pot-grain {
  fill: var(--gest-pot-line);
}

.gest-pot-spark {
  fill: none;
  stroke: var(--serena-primary);
  stroke-width: 4;
  stroke-linecap: round;
}

.gest-pot-seed {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Resultado: tarjeta crema (mismo crema que el fondo de la maceta) */
.gest-page .gestograma-result-card {
  padding: clamp(20px, 2.6vw, 32px);
  border: 0;
  border-radius: var(--gest-paper);
  background: var(--serena-cream-band);
  box-shadow: 0 24px 40px -28px rgba(var(--serena-text-rgb), .45);
}

.gest-page .gestograma-result-blob {
  display: none;
}

.gest-page .gestograma-result-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .5rem 1.25rem;
  margin-bottom: 1rem;
}

.gest-page .gestograma-result-media {
  width: min(100%, 260px);
  max-width: none;
  margin-inline: auto;
}

/* 3:4 recorta solo los costados, que en las 3 macetas están vacíos */
.gest-page .gestograma-result-img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 0;
  background: none;
}

.gest-page .gestograma-result-text {
  text-align: center;
}

@media (min-width: 576px) {
  .gest-page .gestograma-result-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gest-page .gestograma-result-text {
    text-align: start;
  }
}

.gest-page .gestograma-result-tag {
  padding: .35rem .85rem;
  font-size: .8rem;
  letter-spacing: .06em;
  rotate: -2deg;
}

/* El papel de trimestre-1.png es apenas más cálido (#FEF7E5) que el crema
   del sitio: la tarjeta toma ese tono para que la imagen no se note. Las
   otras dos macetas ya coinciden con --serena-cream-band. */
.gest-page .gest-result--t1 {
  background: #FEF7E5;
}

.gest-result--t1 .gestograma-result-tag {
  background: var(--serena-mint-soft);
  color: var(--serena-text);
}

.gest-result--t2 .gestograma-result-tag {
  background: var(--serena-action);
  color: #fff;
}

.gest-result--t3 .gestograma-result-tag {
  background: var(--serena-accent);
  color: #fff;
}

.gest-page .gestograma-result-weeks {
  margin: .35rem 0 0;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.04;
  text-wrap: balance;
}

/* main.js enfoca el contenedor del resultado (tabindex="-1") para que el
   lector de pantalla lo anuncie; no es un control, no lleva anillo. */
.gest-page #gestogramaResultado:focus {
  outline: none;
}

/* Pista de las 40 semanas en 3 tramos (solo visual, aria-hidden: el dato
   ya está en el texto). Colores = color de la planta de cada maceta. */
.gest-track {
  margin: 0 0 1.1rem;
  padding: 0 4px;
}

.gest-track-bar {
  position: relative;
  display: grid;
  grid-template-columns: 14fr 14fr 12fr;
  gap: 4px;
  height: 14px;
}

.gest-track-seg {
  border-radius: 999px;
  opacity: .3;
}

.gest-track-seg--1 {
  background: var(--serena-mint-soft);
}

.gest-track-seg--2 {
  background: var(--serena-primary);
}

.gest-track-seg--3 {
  background: var(--serena-accent-blue);
}

.gest-track-seg.is-current {
  opacity: 1;
}

.gest-track-marker {
  position: absolute;
  top: 50%;
  left: var(--pos, 0%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  translate: -50% -50%;
  border: 3px solid var(--serena-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 12px -6px rgba(var(--serena-text-rgb), .5);
}

.gest-track-marker svg {
  width: 17px;
  height: 17px;
}

.gest-track-marker path {
  fill: var(--serena-primary);
  stroke: var(--serena-action);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.gest-track-marker .gest-track-vein {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}

.gest-track-labels {
  display: grid;
  grid-template-columns: 14fr 14fr 12fr;
  gap: 4px;
  margin-top: .6rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--serena-text-soft);
}

.gest-track-labels .is-current {
  color: var(--serena-text);
}

.gest-page .gestograma-result-note {
  border: 0;
  border-radius: 16px;
  padding: 1rem 1.15rem;
  background: #fff;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--serena-text-soft);
}

/* Fondo blanco: el verde de acción sobre el crema queda en 4,4:1 */
.gest-page .gestograma-route-links .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-width: 2px;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
}

.gest-page .gestograma-route-links .btn:hover,
.gest-page .gestograma-route-links .btn:focus-visible {
  background: var(--serena-action);
  color: #fff;
}

/* Aviso: franja cálida de siempre, sin giro (es información de seguridad) */
.gest-page .gest-notice {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border-width: 2px;
  border-radius: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.gest-page .gest-notice>.bi {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  font-size: 1.3rem;
  line-height: 1.2;
}

/* ---------------------------------------------------------------
   Dudas (lila): figura + nota de apoyo pegada encima, preguntas
   --------------------------------------------------------------- */
.gest-dudas-aside {
  position: relative;
  display: grid;
  justify-items: center;
}

.gest-dudas-figure {
  width: min(100%, 520px);
}

.gest-dudas-figure .gest-blob {
  inset: 12% 8% 4% 8%;
  rotate: 5deg;
}

.gest-page .gest-support {
  z-index: 2;
  width: min(100%, 440px);
  margin-top: calc(-1 * clamp(16px, 3vw, 44px));
  padding: 1.6rem 1.5rem 1.4rem;
  overflow: visible;
  border-radius: 6px 18px 8px 20px;
  rotate: -2deg;
  box-shadow: 0 18px 30px -18px rgba(var(--serena-text-rgb), .45);
}

/* Cinta en vez de la esquina doblada (su triángulo es del color del fondo
   general del sitio y acá quedaría un parche sobre el lila) */
.gest-page .gest-support::before {
  display: none;
}

.gest-page .gest-support::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 26px;
  translate: -50% 0;
  border-radius: 3px;
  background: rgba(var(--serena-purple-accent-rgb), .3);
  rotate: 3deg;
  pointer-events: none;
}

.gest-page .gest-support p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.gest-page .gest-support strong {
  display: block;
  margin-bottom: .35rem;
  font-size: 1.3rem;
  line-height: 1.2;
}

@media (min-width: 992px) {
  .gest-dudas-aside {
    grid-column: 1 / span 5;
  }

  .gest-faq {
    grid-column: 7 / span 6;
    align-self: center;
  }
}

.gest-faq-title {
  margin-bottom: 1.25rem;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  color: var(--serena-text);
}

.gest-faq-list {
  display: grid;
  gap: 12px;
}

.gest-faq details {
  border-radius: 20px 10px 22px 12px / 12px 20px 10px 22px;
  background: #fff;
  box-shadow: 0 12px 24px -20px rgba(var(--serena-text-rgb), .5);
  transition: box-shadow .25s ease;
}

.gest-faq details[open] {
  box-shadow: 0 0 0 3px var(--serena-mint-soft), 0 16px 28px -20px rgba(var(--serena-text-rgb), .5);
}

.gest-faq summary {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 1.05rem 3.75rem 1.05rem 1.25rem;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--serena-action);
}

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

/* "+" dibujado con dos barras; al abrir gira a "×" */
.gest-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 32px;
  height: 32px;
  translate: 0 -50%;
  border-radius: 50%;
  background:
    linear-gradient(var(--serena-text), var(--serena-text)) center / 12px 2.5px no-repeat,
    linear-gradient(var(--serena-text), var(--serena-text)) center / 2.5px 12px no-repeat,
    var(--serena-mint-soft);
  transition: rotate .35s var(--gest-bounce);
}

.gest-faq details[open]>summary::after {
  rotate: 135deg;
}

.gest-faq details>p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  line-height: 1.6;
  color: var(--serena-text-soft);
}

.gest-faq details a {
  font-weight: 700;
  color: var(--serena-action);
}

/* ---------------------------------------------------------------
   Siguiente paso (morado): 3 tarjetas sueltas con tapa deslizante
   --------------------------------------------------------------- */
.gest-rutas-head {
  margin-bottom: clamp(28px, 4vw, 52px);
  text-align: center;
}

.gest-rutas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .gest-rutas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }
}

.gest-ruta {
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--gest-bounce);
}

.gest-ruta:nth-child(1) {
  --gest-cover: var(--serena-cream-band);
}

.gest-ruta:nth-child(2) {
  --gest-cover: var(--serena-mint-soft);
}

.gest-ruta:nth-child(3) {
  --gest-cover: var(--serena-blue-tint);
}

@media (min-width: 992px) {
  .gest-ruta:nth-child(1) {
    --r: -1.5deg;
  }

  .gest-ruta:nth-child(2) {
    --r: 1deg;
    margin-top: 20px;
  }

  .gest-ruta:nth-child(3) {
    --r: -.8deg;
  }

  .gest-ruta:hover,
  .gest-ruta:focus-within {
    --r: 0deg;
  }
}

.gest-page #opciones .route-card--flip {
  grid-template-rows: minmax(240px, auto);
  border-radius: 26px 12px 28px 14px / 14px 26px 12px 28px;
  background: #fff;
  box-shadow: 0 22px 36px -24px rgba(0, 0, 0, .55);
}

.gest-page #opciones .route-flip-cover {
  background: var(--gest-cover);
}

.gest-page #opciones .route-flip-cover h3 {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--serena-text);
}

.gest-page #opciones .route-flip-icon {
  width: clamp(104px, 10vw, 132px);
  height: auto;
  aspect-ratio: 1;
}

.gest-page #opciones .route-flip-content {
  background: #fff;
}

.gest-page #opciones .route-flip-content p {
  font-size: 1rem;
  color: var(--serena-text);
}

.gest-hashtag {
  margin: clamp(32px, 4vw, 52px) 0 0;
  text-align: center;
}

.gest-page .gest-hashtag .badge-hashtag {
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-size: 1.4rem;
  rotate: -3deg;
}

/* ---------------------------------------------------------------
   Móvil: una columna, giros ≤ ±1.5°, stickers chicos en los bordes
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .gest-page .gest-sticker {
    width: clamp(50px, 14vw, 66px);
  }

  .gest-sticker--hero {
    top: 8px;
    right: 8px;
  }

  .gest-sticker--dudas,
  .gest-page .gest-sticker--rutas {
    top: 8px;
  }

  .gest-page .gest-kicker {
    transform: rotate(-1.5deg);
  }

  .gest-page .gest-privacy {
    rotate: .75deg;
  }

  .gest-dudas-figure {
    width: min(100%, 380px);
  }

  .gest-page .gest-support {
    rotate: -1deg;
  }

  .gest-page #opciones .route-card--flip {
    grid-template-rows: minmax(210px, auto);
  }
}

/* ---------------------------------------------------------------
   Animaciones (solo si JS puede y no hay movimiento reducido)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero: etiqueta, título, texto, botones e imagen en secuencia */
  .js-gest-ready .gest-hero [data-hero-part] {
    opacity: 0;
    transition: opacity .6s var(--gest-ease), transform .7s var(--gest-ease);
    transition-delay: var(--delay, 0ms);
  }

  .js-gest-ready .gest-hero [data-hero-part="up"] {
    transform: translateY(24px);
  }

  .js-gest-ready .gest-hero [data-hero-part="pop"] {
    transform: scale(.8);
    transition-duration: .5s;
    transition-timing-function: var(--gest-ease), var(--gest-bounce);
  }

  .js-gest-ready .gest-hero [data-hero-part="tilt"] {
    transform: rotate(4deg) translateY(28px);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--gest-ease), var(--gest-bounce);
  }

  .js-gest-ready .gest-hero.is-go [data-hero-part] {
    opacity: 1;
    transform: none;
  }

  /* 2. Revelado direccional; "tilt" = pegada al muro con rebote */
  .js-gest-ready [data-gest-reveal] {
    opacity: 0;
    transition: opacity .7s var(--gest-ease), transform .75s var(--gest-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js-gest-ready [data-gest-reveal="up"] {
    transform: translateY(32px);
  }

  .js-gest-ready [data-gest-reveal="left"] {
    transform: translateX(-48px);
  }

  .js-gest-ready [data-gest-reveal="right"] {
    transform: translateX(48px);
  }

  .js-gest-ready [data-gest-reveal="pop"] {
    transform: scale(.82);
    transition-timing-function: var(--gest-ease), var(--gest-bounce);
  }

  .js-gest-ready [data-gest-reveal="tilt"] {
    transform: rotate(5deg) translateY(40px) scale(.95);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--gest-ease), var(--gest-bounce);
  }

  .js-gest-ready [data-gest-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 3. Cascada (preguntas y tarjetas de ruta) */
  .js-gest-ready [data-gest-stagger]>* {
    opacity: 0;
    transform: translateY(18px) scale(.94);
    transition: opacity .45s var(--gest-ease), transform .6s var(--gest-bounce), rotate .35s var(--gest-bounce);
    transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s;
  }

  .js-gest-ready [data-gest-stagger].is-in>* {
    opacity: 1;
    transform: none;
  }

  /* 4. Trazos: subrayados y enredadera que crece desde la izquierda */
  .js-gest-ready .gest-underline path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s var(--gest-ease) .35s;
  }

  .js-gest-ready .gest-hero .gest-underline path {
    transition-delay: .8s;
  }

  .js-gest-ready .is-in .gest-underline path,
  .js-gest-ready .gest-hero.is-go .gest-underline path {
    stroke-dashoffset: 0;
  }

  .js-gest-ready .gest-vine {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s var(--gest-ease) .45s;
  }

  .js-gest-ready .is-in .gest-vine {
    clip-path: inset(0 0 0 0);
  }

  /* 5. Maceta vacía: la semilla flota, esperando */
  .gest-pot-seed {
    animation: gestSeed 3.2s ease-in-out infinite;
  }

  .gest-pot-spark {
    animation: gestSpark 3.2s ease-in-out infinite;
  }

  /* 6. Opción elegida: pequeño salto */
  .gest-page .btn-check:checked+.btn {
    animation: gestChip .35s var(--gest-bounce);
  }

  /* 7. Resultado: la tarjeta entra, la planta crece desde la maceta y el
     marcador recorre la pista hasta tu semana. Corre al insertar el
     resultado (y otra vez en cada nuevo cálculo); la planta espera a que
     su imagen cargue (.is-ready, lo agrega main.js). */
  .gest-result {
    animation: gestIn .55s var(--gest-ease) both;
  }

  .gest-result .gestograma-result-tag {
    animation: gestPop .5s var(--gest-bounce) .2s both;
  }

  .gest-result .gestograma-result-weeks {
    animation: gestPop .6s var(--gest-bounce) .35s both;
  }

  .gest-result:not(.is-ready) .gestograma-result-img {
    clip-path: inset(100% 0 0 0);
  }

  .gest-result.is-ready .gestograma-result-img {
    animation: gestGrow 1.6s var(--gest-ease) both;
  }

  .gest-result .gest-track-marker {
    animation: gestMarker 1.1s var(--gest-bounce) .5s both;
  }

  /* 8. Preguntas: la respuesta aparece suave al abrir */
  .gest-faq details[open]>p {
    animation: gestFaq .35s var(--gest-ease);
  }

  @keyframes gestSeed {
    50% {
      transform: translateY(-7px) rotate(-8deg);
    }
  }

  @keyframes gestSpark {

    0%,
    100% {
      opacity: .25;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes gestChip {
    40% {
      transform: scale(1.06) rotate(-1.5deg);
    }
  }

  @keyframes gestIn {
    from {
      opacity: 0;
      transform: translateY(18px) scale(.97);
    }
  }

  @keyframes gestPop {
    from {
      opacity: 0;
      transform: scale(.6);
    }
  }

  @keyframes gestGrow {
    0% {
      clip-path: inset(100% 0 0 0);
    }

    28% {
      clip-path: inset(62% 0 0 0);
    }

    100% {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes gestMarker {
    from {
      left: 0%;
      opacity: 0;
    }

    15% {
      opacity: 1;
    }
  }

  @keyframes gestFaq {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

/* =========================================================
   PREGUNTAS-FRECUENTES.HTML — rediseño "collage" (2026-09-24)
   Mismo criterio que interrupcion-del-embarazo.html y gestograma.html:
   bandas de color a sangre (una por categoría, con los mismos colores de
   Antes / Durante / Después de interrupción), figuras con mancha o
   "foto pegada con cinta", stickers, trazos a mano y animaciones con el
   patrón "visible por defecto" (.js-pf-ready solo la agrega main.js si
   hay IntersectionObserver y no hay prefers-reduced-motion).
   Todo va bajo body.pf-page o en clases "pf-". Las reglas viejas
   .faq-sidebar / .faq-topic-* quedaron sin uso y se retiraron.
   ========================================================= */

.pf-page {
  --pf-hero: var(--serena-purple-accent);
  --pf-hub: var(--serena-cream-band);
  --pf-dudas: var(--serena-blue-tint);
  --pf-sobre: var(--serena-primary-tint);
  --pf-antes: var(--serena-cream-band);
  --pf-como: var(--serena-blue-tint);
  --pf-sentir: var(--serena-mint-soft);
  --pf-atencion: var(--serena-accent);
  --pf-despues: var(--serena-primary-tint);
  --pf-cierre: var(--serena-cream-band);
  --pf-gutter: clamp(16px, 4vw, 64px);
  --pf-ease: cubic-bezier(.2, .7, .2, 1);
  --pf-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --pf-paper: 22px 10px 24px 12px / 12px 22px 10px 24px;
  --pf-sticky-top: calc(var(--header-h, 80px) + 76px);
}

/* ---------------------------------------------------------------
   Base: contenedor, bandas, piezas comunes
   --------------------------------------------------------------- */
.pf-wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--pf-gutter), 1440px);
  margin-inline: auto;
}

.pf-band {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding-top: clamp(56px, 8vw, 120px);
  scroll-margin-top: calc(var(--header-h, 80px) + 56px);
}

.pf-band>.pf-wrap {
  padding-bottom: clamp(40px, 5vw, 80px);
}

.pf-band--hub {
  background: var(--pf-hub);
}

.pf-band--dudas {
  --pf-tint: var(--pf-dudas);
  background: var(--pf-dudas);
}

.pf-band--sobre {
  --pf-tint: var(--pf-sobre);
  background: var(--pf-sobre);
}

.pf-band--antes {
  --pf-tint: var(--pf-antes);
  background: var(--pf-antes);
}

.pf-band--como {
  --pf-tint: var(--pf-como);
  background: var(--pf-como);
}

.pf-band--sentir {
  --pf-tint: var(--pf-sentir);
  background: var(--pf-sentir);
}

.pf-band--atencion {
  --pf-tint: var(--serena-urgent-bg);
  background: var(--pf-atencion);
}

.pf-band--despues {
  --pf-tint: var(--pf-despues);
  background: var(--pf-despues);
}

.pf-band--cierre {
  background: var(--pf-cierre);
}

/* La ola verde del pie arranca sobre el crema del cierre */
.pf-page main+.section-divider {
  background: var(--pf-cierre);
}

.pf-page main a:focus-visible,
.pf-page main button:focus-visible,
.pf-page main summary:focus-visible,
.pf-page .pf-nav a:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 3px;
}

.pf-page .pf-hero a:focus-visible,
.pf-page .pf-hero button:focus-visible,
.pf-page .pf-band--atencion .pf-aside a:focus-visible,
.pf-page .pf-nav a:focus-visible {
  outline-color: #fff;
}

.pf-figure {
  position: relative;
  margin: 0;
}

.pf-figure>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.pf-blob {
  position: absolute;
  z-index: 0;
  inset: 8% 6% 6% 4%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  rotate: -7deg;
  pointer-events: none;
}

.pf-blob--cream {
  background: var(--serena-cream-band);
}

/* Mancha de cada banda: siempre un tono distinto del fondo de la banda */
.pf-blob--dudas {
  background: #fff;
}

.pf-blob--sobre,
.pf-blob--atencion,
.pf-blob--cierre {
  background: var(--serena-mint-soft);
}

.pf-blob--antes,
.pf-blob--despues {
  background: var(--serena-mint-deep);
}

.pf-blob--sentir {
  background: var(--serena-cream-band);
}

.pf-page .pf-sticker {
  position: absolute;
  z-index: 3;
  top: clamp(12px, 2vw, 28px);
  width: clamp(72px, 8.5vw, 124px);
  height: auto;
  pointer-events: none;
}

.pf-sticker--left {
  left: clamp(8px, 2.5vw, 40px);
}

.pf-sticker--right {
  right: clamp(8px, 3vw, 48px);
}

.pf-sticker--hero {
  top: clamp(84px, 10vw, 140px);
  right: clamp(8px, 3vw, 56px);
  z-index: 4;
}

.pf-underline {
  position: absolute;
  left: -2%;
  bottom: -.16em;
  width: 104%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
}

.pf-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pf-h2 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--serena-text);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

.pf-h2-accent {
  position: relative;
  display: inline-block;
  color: var(--serena-purple-accent);
}

.pf-h2-accent .pf-underline {
  color: var(--serena-primary);
}

/* Botones: píldora + sombra suave */
.pf-page .pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .75rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(var(--serena-text-rgb), .5);
  transition: transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease), background-color .2s ease, color .2s ease;
}

.pf-page .pf-btn i {
  display: inline-block;
  transition: transform .3s var(--pf-bounce);
}

.pf-page .pf-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--serena-purple-accent);
}

.pf-page .pf-btn--light:hover,
.pf-page .pf-btn--light:focus-visible {
  background: var(--serena-cream-band);
  border-color: var(--serena-cream-band);
  color: var(--serena-accent-dark);
}

.pf-page .pf-btn--ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.pf-page .pf-btn--ghost:hover,
.pf-page .pf-btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--serena-purple-accent);
}

.pf-page .pf-btn--purple {
  background: var(--serena-purple-accent);
  border-color: var(--serena-purple-accent);
  color: #fff;
}

.pf-page .pf-btn--purple:hover,
.pf-page .pf-btn--purple:focus-visible {
  background: var(--serena-accent-dark);
  border-color: var(--serena-accent-dark);
  color: #fff;
}

.pf-page .pf-btn--outline {
  background: #fff;
  border-color: var(--serena-action);
  color: var(--serena-action);
}

.pf-page .pf-btn--outline:hover,
.pf-page .pf-btn--outline:focus-visible {
  background: var(--serena-action);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .pf-page .pf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(var(--serena-text-rgb), .55);
  }

  .pf-page .pf-btn:hover i {
    transform: rotate(-14deg) scale(1.1);
  }
}

/* ---------------------------------------------------------------
   Hero (magenta)
   --------------------------------------------------------------- */
.pf-page .pf-hero {
  z-index: 2;
  overflow-x: clip;
  background: var(--pf-hero);
}

.pf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: end;
  padding-top: clamp(28px, 5vw, 80px);
}

.pf-hero-copy {
  align-self: center;
  padding-bottom: 16px;
}

.pf-page .pf-hero .pf-hero-h1 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

.pf-hero-accent {
  position: relative;
  display: inline-block;
}

.pf-hero-accent .pf-underline {
  color: var(--serena-mint-soft);
}

.pf-page .pf-hero .pf-hero-lead {
  max-width: 52ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  color: #fff;
}

.pf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.pf-hero-figure {
  z-index: 3;
  width: min(100%, 480px);
  margin: 8px auto -36px;
}

.pf-hero-figure>img {
  filter: drop-shadow(0 22px 26px rgba(var(--serena-text-rgb), .25));
}

.pf-hero-figure .pf-blob {
  inset: 6% 2% 4% 4%;
  rotate: 5deg;
}

.pf-page .pf-hero .doodle {
  color: #fff;
  opacity: .16;
}

@media (min-width: 992px) {
  .pf-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pf-hero-copy {
    padding-bottom: clamp(40px, 6vw, 104px);
  }

  .pf-hero-figure {
    width: auto;
    margin: 0 calc(-.5 * var(--pf-gutter)) calc(-1 * clamp(88px, 9vw, 150px)) 0;
  }
}

@media (max-width: 575.98px) {
  .pf-hero-actions {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------
   Categorías + buscador (crema)
   --------------------------------------------------------------- */
.pf-hub-head {
  max-width: 720px;
  margin: 0 auto clamp(24px, 3vw, 40px);
  text-align: center;
}

.pf-page .pf-kicker {
  margin-bottom: .75rem;
  color: var(--serena-accent);
}

.pf-search {
  position: relative;
  margin: 0;
}

.pf-search>.bi-search {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  translate: 0 -50%;
  font-size: 1.15rem;
  color: var(--serena-accent);
  pointer-events: none;
}

.pf-search-input {
  width: 100%;
  min-height: 58px;
  padding: .75rem 3.5rem .75rem 3.2rem;
  border: 2px solid var(--serena-control-border);
  border-radius: 999px;
  background: #fff;
  font-size: 1.05rem;
  color: var(--serena-text);
  box-shadow: 0 14px 26px -20px rgba(var(--serena-text-rgb), .45);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.pf-search-input::placeholder {
  color: var(--serena-text-soft);
}

.pf-search-input:focus {
  outline: none;
  border-color: var(--serena-accent);
  box-shadow: 0 0 0 4px rgba(var(--serena-purple-accent-rgb), .18);
}

/* Sin la "x" nativa: ya hay un botón propio para borrar */
.pf-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pf-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: 0 -50%;
  border: 0;
  border-radius: 50%;
  background: var(--serena-blue-tint);
  color: var(--serena-accent);
}

.pf-search-clear:hover {
  background: var(--serena-accent);
  color: #fff;
}

.pf-search-status {
  min-height: 1.5em;
  margin: .6rem 0 0;
  font-weight: 700;
  color: var(--serena-text-soft);
}

.pf-cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 992px) {
  .pf-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .pf-cats>li {
    flex: 0 1 calc(25% - 12px);
    min-width: 0;
  }

  .pf-cats>li:nth-child(odd) {
    rotate: -1deg;
  }

  .pf-cats>li:nth-child(even) {
    rotate: .8deg;
  }
}

.pf-cat {
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 100%;
  min-height: 72px;
  padding: .75rem 1rem;
  border-radius: var(--pf-paper);
  background: #fff;
  color: var(--serena-text);
  text-decoration: none;
  box-shadow: 0 14px 24px -20px rgba(var(--serena-text-rgb), .55);
  transition: transform .3s var(--pf-bounce), box-shadow .3s var(--pf-ease), opacity .25s ease;
}

.pf-cat:hover,
.pf-cat:focus-visible {
  color: var(--serena-text);
  box-shadow: 0 18px 30px -18px rgba(var(--serena-text-rgb), .55);
}

.pf-cat-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pf-cat-bg);
  box-shadow: inset 0 0 0 2px rgba(var(--serena-text-rgb), .08);
  color: var(--pf-cat-ink, var(--serena-text));
  font-size: 1.3rem;
  transition: transform .35s var(--pf-bounce);
}

.pf-cat-name {
  flex: 1 1 auto;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

.pf-cat-count {
  flex: none;
  min-width: 34px;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--serena-blue-tint);
  color: var(--serena-accent);
  font-weight: 800;
  font-size: .9rem;
  text-align: center;
}

.pf-cat--dudas {
  --pf-cat-bg: var(--pf-dudas);
}

.pf-cat--sobre {
  --pf-cat-bg: var(--pf-sobre);
}

.pf-cat--antes {
  --pf-cat-bg: var(--pf-antes);
}

.pf-cat--como {
  --pf-cat-bg: var(--pf-como);
}

.pf-cat--sentir {
  --pf-cat-bg: var(--pf-sentir);
}

.pf-cat--atencion {
  --pf-cat-bg: var(--pf-atencion);
  --pf-cat-ink: #fff;
}

.pf-cat--despues {
  --pf-cat-bg: var(--pf-despues);
}

.pf-cat.is-empty {
  opacity: .45;
}

.pf-empty {
  max-width: 560px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  font-weight: 600;
  color: var(--serena-text);
}

.pf-empty a {
  font-weight: 800;
  color: var(--serena-action);
}

/* ---------------------------------------------------------------
   Barra de categorías (sticky bajo el header): 7 íconos + nombre de
   la categoría en pantalla. Visible solo mientras hay una categoría
   en el centro de la pantalla.
   --------------------------------------------------------------- */
.pf-nav {
  position: sticky;
  top: calc(var(--header-h, 80px) + 10px);
  z-index: 1020;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 0;
  pointer-events: none;
}

.pf-nav-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  padding: 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--serena-accent);
  box-shadow: 0 12px 26px -12px rgba(var(--serena-text-rgb), .55);
  pointer-events: auto;
  transition: opacity .35s var(--pf-ease), transform .35s var(--pf-ease), visibility .35s;
}

.pf-nav.is-hidden .pf-nav-pill {
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
}

.pf-nav ol {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-nav-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, transform .35s var(--pf-bounce);
}

.pf-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.pf-nav-link[aria-current="true"] {
  background: #fff;
  color: var(--serena-accent);
  transform: scale(1.08);
}

.pf-nav-current {
  display: none;
  padding: 0 .9rem 0 .3rem;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pf-nav-current:not(:empty) {
    display: block;
  }
}

@media (max-width: 339.98px) {
  .pf-nav-link {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------
   Bandas de categoría: título + figura (sticky) y lista de preguntas
   --------------------------------------------------------------- */
.pf-cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(20px, 3vw, 36px);
}

@media (min-width: 992px) {
  .pf-cat-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }

  .pf-cat-band--left .pf-aside {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .pf-cat-band--left .pf-list {
    grid-column: 5 / span 8;
    grid-row: 1;
  }

  .pf-cat-band--right .pf-aside {
    grid-column: 9 / span 4;
    grid-row: 1;
  }

  .pf-cat-band--right .pf-list {
    grid-column: 1 / span 8;
    grid-row: 1;
  }

  .pf-aside-inner {
    position: sticky;
    top: var(--pf-sticky-top);
  }
}

.pf-aside-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pf-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  rotate: -6deg;
}

.pf-band--atencion .pf-num {
  background: #fff;
  color: var(--serena-accent);
}

.pf-band--atencion .pf-aside .pf-h2 {
  color: #fff;
}

.pf-aside .pf-figure {
  width: min(100%, 380px);
  margin-bottom: 1.25rem;
}

/* Escenas con fondo propio: foto pegada con cinta */
.pf-figure--polaroid {
  padding: 10px 10px 30px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 32px -20px rgba(var(--serena-text-rgb), .6);
  rotate: -2deg;
}

.pf-cat-band--right .pf-figure--polaroid {
  rotate: 2deg;
}

.pf-figure--polaroid>img {
  border-radius: 2px;
}

.pf-figure--polaroid::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 26px;
  translate: -50% 0;
  border-radius: 3px;
  background: rgba(var(--serena-mint-soft-rgb), .8);
  rotate: -3deg;
}

/* Enlace de redirección: píldora con flecha */
.pf-go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.05rem;
  border: 2px solid var(--serena-action);
  border-radius: 999px;
  background: #fff;
  color: var(--serena-action);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.pf-go i {
  flex: none;
  transition: transform .3s var(--pf-bounce);
}

.pf-go:hover,
.pf-go:focus-visible {
  background: var(--serena-action);
  color: #fff;
}

.pf-go:hover i {
  transform: translateX(4px);
}

.pf-go--cta {
  min-height: 52px;
  padding: .7rem 1.4rem;
  border-color: #fff;
  color: var(--serena-purple-accent);
  font-size: 1.02rem;
  box-shadow: 0 12px 24px -14px rgba(var(--serena-text-rgb), .55);
}

.pf-go--cta:hover,
.pf-go--cta:focus-visible {
  border-color: var(--serena-purple-accent);
  background: var(--serena-purple-accent);
  color: #fff;
}

/* Preguntas: desplegables en tarjeta de papel */
.pf-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.pf-q {
  border-radius: var(--pf-paper);
  background: #fff;
  box-shadow: 0 12px 24px -20px rgba(var(--serena-text-rgb), .55);
  transition: box-shadow .25s ease;
}

.pf-q[open] {
  box-shadow: 0 0 0 3px var(--serena-mint-soft), 0 18px 30px -20px rgba(var(--serena-text-rgb), .55);
}

.pf-band--sentir .pf-q[open] {
  box-shadow: 0 0 0 3px var(--serena-accent), 0 18px 30px -20px rgba(var(--serena-text-rgb), .55);
}

.pf-q>summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 64px;
  padding: .85rem 3.9rem .85rem 1rem;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.28;
  color: var(--serena-text);
}

.pf-q>summary::-webkit-details-marker {
  display: none;
}

.pf-q-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pf-tint, var(--serena-blue-tint));
  box-shadow: inset 0 0 0 2px rgba(var(--serena-text-rgb), .08);
  color: var(--serena-accent);
  font-size: 1.1rem;
  transition: transform .35s var(--pf-bounce);
}

/* "+" dibujado con dos barras; al abrir gira a "×" */
.pf-q>summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 32px;
  height: 32px;
  translate: 0 -50%;
  border-radius: 50%;
  background:
    linear-gradient(var(--serena-text), var(--serena-text)) center / 12px 2.5px no-repeat,
    linear-gradient(var(--serena-text), var(--serena-text)) center / 2.5px 12px no-repeat,
    var(--serena-mint-soft);
  transition: rotate .35s var(--pf-bounce), background-color .2s ease;
}

.pf-q[open]>summary::after {
  rotate: 135deg;
}

.pf-q>summary:hover .pf-q-icon {
  transform: rotate(-10deg) scale(1.08);
}

.pf-a {
  overflow: hidden;
}

.pf-a-inner {
  padding: 0 1.25rem 1.25rem 1rem;
  color: var(--serena-text-soft);
  line-height: 1.65;
}

@media (min-width: 576px) {
  .pf-a-inner {
    padding-left: calc(1rem + 40px + .9rem);
  }
}

.pf-a-inner p {
  margin-bottom: .6rem;
}

.pf-a-inner p:last-child {
  margin-bottom: 0;
}

.pf-a-inner .fst-italic {
  padding: .6rem .8rem;
  border-radius: 10px;
  background: var(--serena-warn-bg);
  color: var(--serena-warn-text) !important;
}

.pf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: .9rem;
}

.pf-page .pf-links .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: .5rem 1.05rem;
  border-width: 2px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
}

/* Categoría de alerta: franja terracota e ícono en "urgente" */
.pf-q--alert {
  border-left: 6px solid var(--serena-urgent-border);
}

.pf-q--alert .pf-q-icon {
  background: var(--serena-urgent-bg);
  color: var(--serena-urgent-text);
}

/* ---------------------------------------------------------------
   Cierre (crema)
   --------------------------------------------------------------- */
.pf-cierre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.pf-cierre-figure {
  width: min(100%, 520px);
  margin-inline: auto;
}

.pf-cierre-figure .pf-blob {
  inset: 10% 4% 4% 6%;
  rotate: 6deg;
}

.pf-cierre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-bottom: 1.5rem;
}

.pf-fuente {
  max-width: 60ch;
  margin-bottom: 1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--serena-text-soft);
}

.pf-hashtag {
  margin: 0;
}

.pf-page .pf-hashtag .badge-hashtag {
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-size: 1.4rem;
  rotate: -3deg;
}

@media (min-width: 992px) {
  .pf-cierre-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ---------------------------------------------------------------
   Móvil: una columna, giros ≤ ±1.5°, stickers chicos
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .pf-aside .pf-figure {
    width: min(78%, 320px);
  }
}

/* En móvil la ilustración se achica para que las preguntas lleguen antes */
@media (max-width: 575.98px) {
  .pf-aside .pf-figure {
    width: min(62%, 230px);
    margin-bottom: 1rem;
  }
}

.pf-cat.is-empty {
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .pf-page .pf-sticker {
    top: 8px;
    width: clamp(50px, 14vw, 66px);
  }

  .pf-sticker--hero {
    right: 8px;
  }

  .pf-figure--polaroid,
  .pf-cat-band--right .pf-figure--polaroid {
    rotate: -1.5deg;
  }

  .pf-q>summary {
    gap: .7rem;
    padding-left: .8rem;
    font-size: 1.05rem;
  }

  .pf-q-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .pf-cierre-actions {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------
   Animaciones (solo si JS puede y no hay movimiento reducido)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero: título, texto, botones e imagen en secuencia */
  .js-pf-ready .pf-hero [data-hero-part] {
    opacity: 0;
    transition: opacity .6s var(--pf-ease), transform .7s var(--pf-ease);
    transition-delay: var(--delay, 0ms);
  }

  .js-pf-ready .pf-hero [data-hero-part="up"] {
    transform: translateY(24px);
  }

  .js-pf-ready .pf-hero [data-hero-part="tilt"] {
    transform: rotate(4deg) translateY(28px);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--pf-ease), var(--pf-bounce);
  }

  .js-pf-ready .pf-hero.is-go [data-hero-part] {
    opacity: 1;
    transform: none;
  }

  /* 2. Revelado direccional */
  .js-pf-ready [data-pf-reveal] {
    opacity: 0;
    transition: opacity .7s var(--pf-ease), transform .75s var(--pf-ease);
  }

  .js-pf-ready [data-pf-reveal="up"] {
    transform: translateY(32px);
  }

  .js-pf-ready [data-pf-reveal="left"] {
    transform: translateX(-48px);
  }

  .js-pf-ready [data-pf-reveal="right"] {
    transform: translateX(48px);
  }

  .js-pf-ready [data-pf-reveal="tilt"] {
    transform: rotate(5deg) translateY(40px) scale(.95);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--pf-ease), var(--pf-bounce);
  }

  .js-pf-ready [data-pf-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 3. Cascada: categorías y preguntas */
  .js-pf-ready [data-pf-stagger]>* {
    opacity: 0;
    transform: translateY(18px) scale(.96);
    transition: opacity .45s var(--pf-ease), transform .6s var(--pf-bounce), rotate .35s var(--pf-bounce);
    transition-delay: calc(min(var(--i, 0), 10) * 55ms), calc(min(var(--i, 0), 10) * 55ms), 0s;
  }

  .js-pf-ready [data-pf-stagger].is-in>* {
    opacity: 1;
    transform: none;
  }

  /* 4. Subrayados a mano */
  .js-pf-ready .pf-underline path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s var(--pf-ease) .35s;
  }

  .js-pf-ready .pf-hero .pf-underline path {
    transition-delay: .8s;
  }

  .js-pf-ready .is-in .pf-underline path,
  .js-pf-ready .pf-hero.is-go .pf-underline path {
    stroke-dashoffset: 0;
  }

  /* 5. Tarjetas de categoría: se levantan y el ícono salta */
  .pf-cat:hover,
  .pf-cat:focus-visible {
    transform: translateY(-4px) rotate(-1deg);
  }

  .pf-cat:hover .pf-cat-icon,
  .pf-cat:focus-visible .pf-cat-icon {
    transform: rotate(-12deg) scale(1.1);
  }

  /* 6. Fotos pegadas: se enderezan al pasar */
  .pf-figure--polaroid {
    transition: rotate .45s var(--pf-bounce);
  }

  .pf-aside:hover .pf-figure--polaroid {
    rotate: 0deg;
  }

  /* 7. Buscador: la pregunta encontrada "aparece" y el contador salta */
  .pf-q.is-flash {
    animation: pfFlash .5s var(--pf-bounce);
  }

  .pf-cat-count.is-flash {
    animation: pfPop .45s var(--pf-bounce);
  }

  /* 8. Barra de categorías: el ícono activo salta al cambiar */
  .pf-nav-link.is-jump {
    animation: pfJump .45s var(--pf-ease);
  }

  @keyframes pfFlash {
    from {
      opacity: 0;
      transform: translateY(10px) scale(.97);
    }
  }

  @keyframes pfPop {
    40% {
      transform: scale(1.3);
    }
  }

  @keyframes pfJump {
    45% {
      transform: translateY(-7px) scale(1.15);
    }
  }
}

/* =========================================================
   ORIENTADOR.HTML — rediseño "collage" (2026-09-24)
   Mismo estándar que interrupcion-del-embarazo.html y
   preguntas-frecuentes.html. Todo va bajo body.ori-page o en clases
   "ori-": las reglas .orientador-* / .serena-* de más arriba siguen
   existiendo (las usa el HTML que arma main.js) y aquí solo se
   re-estilizan. No cambia nada del funcionamiento del chat.
   Serena cambia de expresión con data-serena-visible (ver main.js).
   ========================================================= */

.ori-page {
  --ori-hero: var(--serena-blue-tint);
  --ori-explica: var(--serena-cream-band);
  --ori-gutter: clamp(16px, 4vw, 64px);
  --ori-ease: cubic-bezier(.2, .7, .2, 1);
  --ori-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ori-paper: 22px 10px 24px 12px / 12px 22px 10px 24px;
}

.ori-wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--ori-gutter), 1440px);
  margin-inline: auto;
}

.ori-page main+.section-divider {
  background: var(--ori-explica);
}

.ori-page main a:focus-visible,
.ori-page main button:focus-visible,
.ori-page main input:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 3px;
}

.ori-page .ori-sticker {
  position: absolute;
  z-index: 3;
  width: clamp(72px, 8.5vw, 124px);
  height: auto;
  pointer-events: none;
}

.ori-sticker--hero {
  top: clamp(16px, 3vw, 40px);
  right: clamp(8px, 3vw, 48px);
}

.ori-sticker--explica {
  top: clamp(12px, 2vw, 28px);
  left: clamp(8px, 2.5vw, 40px);
}

.ori-underline {
  position: absolute;
  left: -2%;
  bottom: -.16em;
  width: 104%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
  color: var(--serena-primary);
}

.ori-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* ---------------------------------------------------------------
   Hero: buscador a la izquierda, Serena y su respuesta a la derecha
   --------------------------------------------------------------- */
.ori-hero {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  background: var(--ori-hero);
}

.ori-page .ori-hero .doodle {
  color: var(--serena-accent);
  opacity: .2;
}

.ori-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(28px, 5vw, 72px) clamp(40px, 5vw, 72px);
}

@media (min-width: 992px) {
  .ori-hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 56px);
    align-items: start;
  }

  .ori-copy {
    grid-column: 1 / span 7;
    padding-top: clamp(8px, 2vw, 32px);
  }

  .ori-serena {
    grid-column: 8 / span 5;
  }
}

.ori-page .ori-eyebrow {
  gap: .45rem;
  margin-bottom: .5rem;
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--serena-accent);
  rotate: -2deg;
}

.ori-page .ori-eyebrow i {
  font-size: 1.2rem;
  color: var(--serena-purple-accent);
}

.ori-page .ori-h1 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--serena-text);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.ori-accent {
  position: relative;
  color: var(--serena-purple-accent);
}

/* En pantallas chicas la frase se parte en líneas: subrayado ondulado
   del propio texto en vez del trazo SVG (que no puede cortarse). */
@media (max-width: 575.98px) {
  .ori-accent {
    text-decoration: underline wavy var(--serena-primary) 3px;
    text-underline-offset: .22em;
  }

  .ori-accent .ori-underline {
    display: none;
  }
}

@media (min-width: 576px) {
  .ori-accent {
    display: inline-block;
  }
}

.ori-page .ori-lead {
  max-width: 56ch;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--serena-text-soft);
}

/* Buscador: píldora blanca grande */
.ori-page .ori-search {
  min-height: 66px;
  padding: .45rem .45rem .45rem 1.25rem;
  border: 2px solid var(--serena-control-border);
  background: #fff;
  box-shadow: 0 18px 32px -22px rgba(var(--serena-text-rgb), .55);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ori-page .ori-search:focus-within {
  border-color: var(--serena-accent);
  box-shadow: 0 0 0 4px rgba(var(--serena-purple-accent-rgb), .16), 0 18px 32px -22px rgba(var(--serena-text-rgb), .55);
}

.ori-page .ori-search>i.bi-search {
  color: var(--serena-accent);
  font-size: 1.2rem;
}

/* La caja crece con el texto (textarea): el botón y la lupa quedan abajo,
   alineados con la última línea */
.ori-page .ori-search {
  align-items: flex-end;
}

.ori-page .ori-search>i.bi-search {
  align-self: flex-end;
  line-height: 52px;
}

.ori-page .ori-search .orientador-search-input {
  align-self: stretch;
  min-height: 52px;
  max-height: 180px;
  padding: .85rem 0;
  border: 0;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
}

.ori-page .ori-search .orientador-search-input::placeholder {
  color: var(--serena-text-soft);
}

.ori-page .ori-search .orientador-search-input:focus-visible {
  outline: none;
}

.ori-page .ori-search .orientador-search-btn {
  min-height: 52px;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 10px 20px -12px rgba(var(--serena-action-rgb), .9);
  transition: transform .25s var(--ori-ease), background-color .2s ease;
}

@media (max-width: 575.98px) {
  .ori-page .ori-search {
    border-radius: 24px;
    padding: .9rem;
  }

  /* Caja apilada: el campo toma su alto real (flex:1 lo ignoraría) */
  .ori-page .ori-search .orientador-search-input {
    flex: none;
    width: 100%;
  }

  .ori-page .ori-search .orientador-search-btn {
    width: 100%;
    height: auto;
    padding: .7rem 1.2rem;
  }

  .ori-page .ori-search .orientador-search-btn-text {
    display: inline;
  }
}

/* Aviso de privacidad: resaltado en morado para que no pase desapercibido */
.ori-page .ori-privacidad {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0 0;
  padding: .55rem 1.1rem .55rem .55rem;
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .35);
  border-radius: 999px;
  background: rgba(var(--serena-purple-accent-rgb), .1);
  color: var(--serena-accent-dark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.ori-page .ori-privacidad i {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
  font-size: 1rem;
}

@media (max-width: 575.98px) {
  .ori-page .ori-privacidad {
    border-radius: 18px;
    font-size: .95rem;
  }
}

/* "…o elige una opción" */
.ori-opciones {
  margin-top: clamp(22px, 3vw, 34px);
}

.ori-opciones-titulo {
  margin-bottom: .6rem;
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--serena-accent);
}

.ori-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ori-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .22);
  border-radius: 999px;
  background: #fff;
  color: var(--serena-text);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-align: left;
  box-shadow: 0 10px 18px -16px rgba(var(--serena-text-rgb), .6);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--ori-bounce);
}

.ori-chip i {
  flex: none;
  color: var(--serena-purple-accent);
  transition: color .2s ease;
}

.ori-chip--alerta i {
  color: var(--serena-urgent-text);
}

/* Móvil: las opciones van en una fila deslizable para que Serena y su
   respuesta queden cerca del buscador */
@media (max-width: 575.98px) {
  .ori-chips {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--ori-gutter));
    padding: 4px var(--ori-gutter) 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ori-gutter);
    scrollbar-width: none;
  }

  .ori-chips::-webkit-scrollbar {
    display: none;
  }

  .ori-chips>li {
    flex: none;
    scroll-snap-align: start;
  }

  .ori-chip {
    white-space: nowrap;
  }
}

.ori-chip:hover,
.ori-chip:focus-visible {
  border-color: var(--serena-accent);
  background: var(--serena-accent);
  color: #fff;
}

.ori-chip:hover i,
.ori-chip:focus-visible i {
  color: #fff;
}

/* ---- Serena: avatar con expresiones + burbuja de respuesta ---- */
.ori-serena {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ori-page .ori-avatar {
  position: relative;
  display: block;
  width: clamp(230px, 26vw, 340px);
  aspect-ratio: 1;
}

.ori-avatar-blob {
  position: absolute;
  inset: 6%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  background: var(--serena-mint-soft);
  rotate: -6deg;
}

.ori-avatar-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .35s ease;
}

.ori-avatar[data-serena-visible="hola"] .ori-avatar-img[data-estado="hola"],
.ori-avatar[data-serena-visible="escucha"] .ori-avatar-img[data-estado="escucha"],
.ori-avatar[data-serena-visible="responde"] .ori-avatar-img[data-estado="responde"],
.ori-avatar[data-serena-visible="cuidado"] .ori-avatar-img[data-estado="cuidado"],
.ori-avatar[data-serena-visible="alegre"] .ori-avatar-img[data-estado="alegre"] {
  opacity: 1;
}

/* Respaldo mientras no existan las imágenes de Serena */
.ori-avatar-vacio {
  position: absolute;
  inset: 16%;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--serena-accent);
  font-size: clamp(3rem, 6vw, 4.5rem);
  box-shadow: 0 18px 30px -20px rgba(var(--serena-text-rgb), .5);
  opacity: 0;
  transition: opacity .3s ease;
}

.ori-avatar.is-vacia .ori-avatar-vacio {
  opacity: 1;
}

.ori-page .ori-avatar-badge {
  z-index: 2;
  right: 10%;
  bottom: 10%;
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  background: var(--serena-purple-accent);
}

/* Burbuja: sale de Serena hacia abajo (cola arriba) */
.ori-page .ori-bubble {
  width: 100%;
  max-width: 540px;
  min-height: 0;
  margin-top: 20px;
  padding: 1.25rem 1.35rem;
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 38px -26px rgba(var(--serena-text-rgb), .55);
}

.ori-page .ori-bubble::before {
  left: 50%;
  top: -13px;
  border: 0 solid transparent;
  border-width: 0 13px 14px;
  border-bottom-color: #fff;
  translate: -50% 0;
}

.ori-page .ori-bubble::after {
  display: none;
}

.ori-page .orientador-respuesta-inicial {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--serena-text);
}

.ori-page .orientador-respuesta-loading span {
  background: var(--serena-accent);
}

/* Eco de la consulta: burbuja propia, a la derecha */
.serena-pregunta {
  align-self: flex-end;
  max-width: 88%;
  margin: 0 0 1rem auto;
  padding: .55rem .95rem;
  border-radius: 18px 18px 4px 18px;
  background: var(--serena-accent);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ori-page .serena-texto {
  font-size: 1rem;
  line-height: 1.62;
}

.ori-page .serena-texto strong {
  color: var(--serena-accent-dark);
}

.ori-page .serena-paginas {
  gap: .6rem;
  border-top: 2px dashed rgba(var(--serena-purple-accent-rgb), .2);
}

.ori-page .serena-paginas-titulo {
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--serena-accent);
}

.ori-page .serena-pagina {
  min-height: 56px;
  padding: .65rem .85rem;
  border: 2px solid rgba(var(--serena-text-rgb), .08);
  border-radius: 16px 8px 18px 10px / 10px 16px 8px 18px;
  background: var(--serena-lilac-faint);
  transition: border-color .2s ease, background-color .2s ease, transform .3s var(--ori-bounce);
}

.ori-page .serena-pagina:hover,
.ori-page .serena-pagina:focus-visible {
  border-color: var(--serena-accent);
  background: var(--serena-blue-tint);
  box-shadow: none;
}

.ori-page .serena-pagina-icono {
  width: 40px;
  height: 40px;
  background: var(--serena-mint-soft);
  color: var(--serena-text);
}

.ori-page .serena-pagina-titulo {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-size: .98rem;
}

.ori-page .serena-pagina-resumen {
  font-size: .85rem;
}

.ori-page .serena-pagina-flecha {
  color: var(--serena-accent);
  transition: transform .3s var(--ori-bounce);
}

.ori-page .serena-pagina:hover .serena-pagina-flecha {
  transform: translateX(4px);
}

.ori-page .serena-pagina.is-urgente {
  border-color: var(--serena-urgent-border);
  background: var(--serena-urgent-bg);
}

.ori-page .serena-pagina.is-urgente .serena-pagina-icono {
  background: #fff;
  color: var(--serena-urgent-text);
}

/* ---------------------------------------------------------------
   Qué es y qué hace (crema)
   --------------------------------------------------------------- */
.ori-band {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding-block: clamp(56px, 8vw, 120px) clamp(40px, 5vw, 80px);
}

.ori-band--explica {
  background: var(--ori-explica);
}

.ori-explica-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 992px) {
  .ori-explica-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.ori-figure {
  position: relative;
  margin: 0;
}

.ori-figure>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.ori-explica-figure {
  width: min(100%, 520px);
  margin-inline: auto;
}

.ori-blob {
  position: absolute;
  z-index: 0;
  inset: 8% 4% 4% 6%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  background: var(--serena-mint-soft);
  rotate: 5deg;
  pointer-events: none;
}

.ori-page .ori-h2 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--serena-text);
}

.ori-page .ori-h2 i {
  color: var(--serena-purple-accent);
}

.ori-page .ori-text {
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.3vw, 1.12rem);
  line-height: 1.65;
  color: var(--serena-text-soft) !important;
}

.ori-page .ori-caps {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 576px) {
  .ori-page .ori-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ori-page .ori-caps .cap-item {
  gap: .85rem;
  min-height: 72px;
  padding: .9rem 1.1rem;
  border: 0;
  border-radius: var(--ori-paper);
  background: #fff;
  font-size: .98rem;
  font-weight: 600;
  color: var(--serena-text);
  box-shadow: 0 14px 24px -20px rgba(var(--serena-text-rgb), .55);
}

.ori-page .ori-caps .cap-item i {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 50%;
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-size: 1.25rem;
}

.ori-page .ori-caps .cap-item:nth-child(3n+2) i {
  background: var(--serena-blue-tint);
  color: var(--serena-accent);
}

.ori-page .ori-caps .cap-item:nth-child(3n) i {
  background: var(--serena-primary-tint);
  color: var(--serena-action);
}

@media (min-width: 992px) {
  .ori-page .ori-caps .cap-item:nth-child(odd) {
    rotate: -.8deg;
  }

  .ori-page .ori-caps .cap-item:nth-child(even) {
    rotate: .8deg;
  }
}

/* ---------------------------------------------------------------
   Móvil
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ori-page .ori-sticker {
    width: clamp(50px, 14vw, 66px);
  }

  .ori-sticker--hero,
  .ori-sticker--explica {
    top: 8px;
  }

  .ori-page .ori-avatar {
    width: min(62vw, 250px);
  }

  .ori-page .ori-eyebrow {
    rotate: -1.5deg;
  }
}

/* ---------------------------------------------------------------
   Animaciones (solo si JS puede y no hay movimiento reducido)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .js-ori-ready .ori-hero [data-hero-part] {
    opacity: 0;
    transition: opacity .6s var(--ori-ease), transform .7s var(--ori-ease);
    transition-delay: var(--delay, 0ms);
  }

  .js-ori-ready .ori-hero [data-hero-part="up"] {
    transform: translateY(24px);
  }

  .js-ori-ready .ori-hero [data-hero-part="pop"] {
    transform: scale(.8);
    transition-timing-function: var(--ori-ease), var(--ori-bounce);
  }

  .js-ori-ready .ori-hero [data-hero-part="tilt"] {
    transform: rotate(3deg) translateY(28px);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--ori-ease), var(--ori-bounce);
  }

  .js-ori-ready .ori-hero.is-go [data-hero-part] {
    opacity: 1;
    transform: none;
  }

  .js-ori-ready [data-ori-reveal] {
    opacity: 0;
    transition: opacity .7s var(--ori-ease), transform .75s var(--ori-ease);
  }

  .js-ori-ready [data-ori-reveal="up"] {
    transform: translateY(32px);
  }

  .js-ori-ready [data-ori-reveal="tilt"] {
    transform: rotate(5deg) translateY(40px) scale(.95);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--ori-ease), var(--ori-bounce);
  }

  .js-ori-ready [data-ori-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .js-ori-ready [data-ori-stagger]>* {
    opacity: 0;
    transform: translateY(18px) scale(.95);
    transition: opacity .45s var(--ori-ease), transform .6s var(--ori-bounce);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js-ori-ready [data-ori-stagger].is-in>* {
    opacity: 1;
    transform: none;
  }

  .js-ori-ready .ori-underline path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s var(--ori-ease) .8s;
  }

  .js-ori-ready .ori-hero.is-go .ori-underline path {
    stroke-dashoffset: 0;
  }

  /* Opciones: saltan un poco al pasar */
  .ori-chip:hover,
  .ori-chip:focus-visible {
    transform: translateY(-2px) rotate(-1deg);
  }

  .ori-page .ori-search .orientador-search-btn:hover {
    transform: translateY(-1px) scale(1.02);
  }

  .ori-page .serena-pagina:hover {
    transform: translateX(3px);
  }

  /* La mancha de Serena "respira" */
  .ori-avatar-blob {
    animation: oriBlob 9s ease-in-out infinite;
  }

  /* Serena cambia de expresión: pequeño rebote */
  .ori-avatar.is-cambio .ori-avatar-img {
    animation: oriCambio .45s var(--ori-bounce);
  }

  /* Mientras escucha: se balancea suave, como pensando */
  .ori-avatar[data-serena-estado="escucha"] .ori-avatar-img,
  .ori-avatar[data-serena-estado="escucha"] .ori-avatar-vacio {
    animation: oriPiensa 1.8s ease-in-out infinite;
  }

  /* La consulta entra desde la derecha; la respuesta, desde abajo */
  .serena-pregunta {
    animation: oriPregunta .35s var(--ori-ease);
  }

  @keyframes oriBlob {
    50% {
      border-radius: 45% 55% 42% 58% / 58% 42% 55% 45%;
      rotate: 4deg;
    }
  }

  @keyframes oriCambio {
    from {
      transform: scale(.94);
    }
  }

  @keyframes oriPiensa {
    50% {
      transform: translateY(-5px) rotate(-1.5deg);
    }
  }

  @keyframes oriPregunta {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
  }
}

/* =========================================================
   INDEX.HTML + DESCARGAR-SERENA.HTML — rediseño "collage" (2026-09-24)
   Mismo estándar que interrupcion-del-embarazo.html y
   preguntas-frecuentes.html. Las dos páginas comparten un pequeño kit
   ("sr-": bandas, stickers, figuras con mancha, trazos a mano, mural,
   marquesina, hilo dibujado y animaciones) y cada una suma lo suyo con
   "home-" (index) y "dsc-" (descargar). Todo va bajo body.sr-page, así
   que ninguna otra página cambia. Animaciones con el patrón "visible por
   defecto": los estados ocultos solo aplican con .js-sr-ready en <html>.
   ========================================================= */

.sr-page {
  --sr-gutter: clamp(16px, 4vw, 64px);
  --sr-ease: cubic-bezier(.2, .7, .2, 1);
  --sr-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --sr-paper: 24px 10px 26px 12px / 12px 24px 10px 26px;
}

.home-page {
  --home-hero: var(--serena-accent);
  --home-rutas: var(--serena-cream-band);
  --home-confianza: var(--serena-blue-tint);
  --home-faq: var(--serena-purple-accent);
  --home-recursos: var(--serena-primary-tint);
  --home-app: var(--serena-cream-band);
}

.dsc-page {
  --dsc-hero: var(--serena-mint-soft);
  --dsc-camino: var(--serena-cream-band);
  --dsc-muro: var(--serena-accent);
  --dsc-cierre: var(--serena-purple-accent);
}

/* ---------------------------------------------------------------
   Kit común
   --------------------------------------------------------------- */
.sr-wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--sr-gutter), 1440px);
  margin-inline: auto;
}

.sr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 992px) {
  .sr-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.sr-band {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding-top: clamp(64px, 9vw, 128px);
  scroll-margin-top: 4.5rem;
}

.sr-band>.sr-wrap {
  padding-bottom: clamp(44px, 6vw, 96px);
}

.sr-page main a:focus-visible,
.sr-page main button:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 3px;
}

.sr-page .sr-hero:not(.sr-hero--light) a:not(.sr-btn--light):focus-visible,
.home-band--faq a:focus-visible,
.dsc-band--cierre a:focus-visible,
.dsc-band--muro button:focus-visible {
  outline-color: #fff;
}

.sr-page .sr-sticker {
  position: absolute;
  z-index: 3;
  width: clamp(72px, 8.5vw, 124px);
  height: auto;
  pointer-events: none;
}

.sr-sticker--hero {
  top: clamp(20px, 4vw, 56px);
  right: clamp(8px, 3vw, 56px);
  z-index: 4;
}

.sr-sticker--tl {
  top: clamp(12px, 2vw, 28px);
  left: clamp(8px, 2.5vw, 40px);
}

.sr-sticker--tr {
  top: clamp(12px, 2vw, 28px);
  right: clamp(8px, 3vw, 48px);
}

.sr-sticker--bl {
  bottom: clamp(180px, 18vw, 260px);
  left: clamp(8px, 3vw, 56px);
}

.sr-sticker--br {
  bottom: clamp(200px, 20vw, 280px);
  right: clamp(8px, 3vw, 56px);
}

.sr-figure {
  position: relative;
  margin: 0;
}

.sr-figure>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.sr-blob {
  position: absolute;
  z-index: 0;
  inset: 8% 6% 6% 4%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  background: var(--paso-bg, var(--serena-mint-soft));
  rotate: -6deg;
  pointer-events: none;
}

.sr-blob--cream {
  background: var(--serena-cream-band);
}

.sr-blob--mint {
  background: var(--serena-mint-soft);
}

.sr-blob--white {
  background: #fff;
}

.sr-head {
  margin-bottom: clamp(28px, 4vw, 52px);
}

.sr-head--center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.sr-page .sr-kicker {
  display: inline-block;
  margin-bottom: .5rem;
  color: var(--serena-accent);
}

.sr-h2 {
  position: relative;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.07;
  letter-spacing: -.01em;
  color: var(--serena-text);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

.sr-h2-accent {
  position: relative;
  display: inline-block;
  color: var(--serena-purple-accent);
}

.sr-h2-accent .sr-underline {
  color: var(--serena-primary);
}

.sr-h2--light {
  color: #fff;
}

.sr-h2--light .sr-h2-accent {
  color: var(--serena-mint-soft);
}

.sr-h2--light .sr-underline {
  color: #fff;
}

.sr-underline {
  position: absolute;
  left: -2%;
  bottom: -.16em;
  width: 104%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
}

.sr-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.sr-text {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--serena-text-soft);
}

.sr-text--center {
  margin-inline: auto;
}

/* Nota de papel con cinta */
.sr-postit {
  position: relative;
  max-width: 440px;
  padding: 1.3rem 1.4rem 1.2rem;
  border-radius: 6px 18px 8px 20px;
  background: var(--serena-warn-bg);
  color: var(--serena-warn-text);
  font-weight: 700;
  line-height: 1.5;
  rotate: -1.5deg;
  box-shadow: 0 16px 28px -20px rgba(var(--serena-text-rgb), .6);
}

.sr-postit-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  translate: -50% 0;
  border-radius: 3px;
  background: rgba(var(--serena-mint-soft-rgb), .85);
  rotate: -3deg;
}

.sr-hashtag {
  margin: clamp(24px, 3vw, 40px) 0 0;
  text-align: center;
}

.sr-page .sr-hashtag .badge-hashtag {
  background: var(--serena-purple-accent);
  font-size: 1.4rem;
  rotate: -3deg;
}

/* Botones: píldora + sombra suave */
.sr-page .sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: .75rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 12px 24px -14px rgba(var(--serena-text-rgb), .55);
  transition: transform .25s var(--sr-ease), box-shadow .25s var(--sr-ease), background-color .2s ease, color .2s ease;
}

.sr-page .sr-btn i {
  display: inline-block;
  transition: transform .3s var(--sr-bounce);
}

.sr-page .sr-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--serena-purple-accent);
}

.sr-page .sr-btn--light:hover,
.sr-page .sr-btn--light:focus-visible {
  background: var(--serena-cream-band);
  border-color: var(--serena-cream-band);
  color: var(--serena-accent-dark);
}

.sr-page .sr-btn--purple {
  background: var(--serena-purple-accent);
  border-color: var(--serena-purple-accent);
  color: #fff;
}

.sr-page .sr-btn--purple:hover,
.sr-page .sr-btn--purple:focus-visible {
  background: var(--serena-accent-dark);
  border-color: var(--serena-accent-dark);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .sr-page .sr-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -14px rgba(var(--serena-text-rgb), .6);
  }

  .sr-page .sr-btn:hover i {
    transform: rotate(-14deg) scale(1.1);
  }
}

/* ---- Hero común ---- */
.sr-page .sr-hero {
  z-index: 2;
  overflow-x: clip;
}

.sr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: end;
  padding-top: clamp(28px, 5vw, 80px);
}

.sr-hero-copy {
  align-self: center;
  padding-bottom: 16px;
}

.sr-page .sr-hero .sr-hero-h1 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

.sr-hero-accent {
  color: var(--serena-mint-soft);
}

.sr-page .sr-hero .sr-hero-lead {
  max-width: 54ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: #fff;
}

.sr-page .sr-hero--light .sr-hero-h1,
.sr-page .sr-hero--light .sr-hero-lead {
  color: var(--serena-text);
}

.sr-tag-sticker {
  display: inline-block;
  padding: .04em .5em;
  border-radius: 999px;
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-weight: 800;
  white-space: nowrap;
  rotate: -1.5deg;
}

.sr-tag-sticker--purple {
  background: var(--serena-purple-accent);
  color: #fff;
}

.sr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.sr-hero-figure {
  z-index: 3;
  width: min(100%, 480px);
  margin: 8px auto -36px;
}

.sr-hero-figure>img {
  filter: drop-shadow(0 22px 26px rgba(var(--serena-text-rgb), .25));
}

.sr-hero-figure .sr-blob {
  inset: 6% 2% 6% 4%;
  rotate: 5deg;
}

.sr-page .sr-hero .doodle {
  color: #fff;
  opacity: .16;
}

.sr-page .sr-hero--light .doodle {
  color: var(--serena-accent);
  opacity: .22;
}

@media (min-width: 992px) {
  .sr-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }

  .sr-hero-copy {
    padding-bottom: clamp(40px, 6vw, 104px);
  }

  .sr-hero-figure {
    width: auto;
    margin: 0 calc(-.5 * var(--sr-gutter)) calc(-1 * clamp(88px, 9vw, 150px)) 0;
  }
}

@media (max-width: 575.98px) {
  .sr-hero-actions {
    flex-direction: column;
  }
}

/* ---- Rutas con tapa deslizante (misma mecánica de #rutas / #opciones) ---- */
.sr-rutas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 1320px;
  margin-inline: auto;
}

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

@media (min-width: 992px) {
  .sr-rutas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }

  .sr-ruta:nth-child(odd) {
    --r: -1.2deg;
  }

  .sr-ruta:nth-child(even) {
    --r: 1deg;
    margin-top: 18px;
  }

  .sr-ruta:hover,
  .sr-ruta:focus-within {
    --r: 0deg;
  }
}

.sr-ruta {
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--sr-bounce);
}

.sr-page #rutas .route-card--flip {
  grid-template-rows: minmax(250px, auto);
  border-radius: 26px 12px 28px 14px / 14px 26px 12px 28px;
  background: #fff;
  box-shadow: 0 22px 36px -24px rgba(var(--serena-text-rgb), .55);
}

.sr-page #rutas .route-flip-cover h3 {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--pf-ink, var(--serena-text));
}

.sr-page #rutas .route-flip-icon {
  width: clamp(104px, 9vw, 128px);
  height: auto;
  aspect-ratio: 1;
}

.sr-page #rutas .route-flip-content {
  background: #fff;
}

.sr-page #rutas .route-flip-content p {
  font-size: 1rem;
  color: var(--serena-text);
}

.home-page #rutas .sr-ruta:nth-child(1) .route-flip-cover {
  background: var(--serena-mint-soft);
}

.home-page #rutas .sr-ruta:nth-child(2) .route-flip-cover {
  --pf-ink: #fff;
  background: var(--serena-purple-accent);
}

.home-page #rutas .sr-ruta:nth-child(3) .route-flip-cover {
  background: var(--serena-blue-tint);
}

.home-page #rutas .sr-ruta:nth-child(4) .route-flip-cover {
  --pf-ink: #fff;
  background: var(--serena-accent);
}

/* ---- Mural: el texto solo sobre la pared lisa ---- */
.sr-mural {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(520px, 50vw, 760px);
  overflow: clip;
  background: var(--serena-mint-soft);
}

.sr-mural-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/ilustraciones/descarga-muro-urbano.webp") right bottom / cover no-repeat;
  transform-origin: 70% 80%;
}

.sr-mural::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(131, 199, 160, .95) 0%, rgba(131, 199, 160, .88) 30%, rgba(131, 199, 160, 0) 44%);
}

.sr-divider-top {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  z-index: 2;
}

.sr-mural-inner {
  z-index: 2;
}

.sr-mural-copy {
  max-width: min(31vw, 450px);
  padding-block: clamp(80px, 8vw, 120px) clamp(48px, 6vw, 88px);
}

.sr-page .sr-mural .sr-kicker {
  font-size: 1.6rem;
  color: var(--serena-accent-dark);
}

.sr-mural-lead {
  margin-bottom: 1.4rem;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--serena-text);
}

.sr-mural .badge-hashtag {
  font-size: 1.35rem;
}

@media (max-width: 991.98px) {
  .sr-mural {
    display: block;
    min-height: 0;
  }

  .sr-mural::before {
    display: none;
  }

  .sr-mural-art {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
    background-position: 82% bottom;
  }

  .sr-mural-copy {
    max-width: 62ch;
    padding-block: var(--space-6) clamp(48px, 8vw, 72px);
  }
}

/* ---- Marquesina (se ve caminar); pausa manual por accesibilidad ---- */
.sr-marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(16px, 3vw, 32px) clamp(8px, 2vw, 16px);
  background: var(--serena-cream-band);
}

.sr-marquee-track {
  display: flex;
  width: max-content;
  animation: srWalkRight 150s linear infinite; /* Nueva animación */
}

@keyframes srWalkRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.sr-marquee img {
  flex: none;
  display: block;
  width: auto;
  height: clamp(130px, 15vw, 210px);
}

.sr-marquee:hover .sr-marquee-track,
.sr-marquee.is-paused .sr-marquee-track {
  animation-play-state: paused;
}

@keyframes srWalk {
  to {
    transform: translateX(-50%);
  }
}

.sr-marquee-toggle {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--serena-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--serena-accent);
  font-size: 1.2rem;
}

.sr-marquee-toggle:hover {
  background: var(--serena-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sr-marquee-track {
    animation: none;
  }

  .sr-marquee img[aria-hidden="true"],
  .sr-marquee-toggle {
    display: none;
  }
}

/* ---- Hilo que se dibuja al bajar ---- */
.sr-thread {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 40px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sr-thread path {
  fill: none;
  stroke: var(--serena-purple-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  opacity: .55;
}

/* ---------------------------------------------------------------
   INDEX.HTML
   --------------------------------------------------------------- */
.home-hero {
  background: var(--home-hero);
}

.home-page .home-hero .home-hero-h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.7rem);
}

.home-band--rutas {
  background: var(--home-rutas);
}

.home-acomp {
  position: relative;
  scroll-margin-top: 4.5rem;
}

.home-band--confianza {
  background: var(--home-confianza);
}

.home-band--faq {
  background: var(--home-faq);
  color: #fff;
}

.home-band--recursos {
  background: var(--home-recursos);
}

.home-band--app {
  background: var(--home-app);
}

.home-page main+.section-divider {
  background: var(--home-app);
}

/* Acompañamiento: collage (cita, figura, tarjeta de Serena) + checklist */
@media (min-width: 992px) {
  .home-confianza-col {
    grid-column: 1 / span 6;
  }

  .home-checklist {
    grid-column: 7 / span 6;
  }
}

.home-confianza-col {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vw, 32px);
}

.home-quote {
  max-width: 460px;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.35;
}

.home-confianza-figure {
  width: min(100%, 520px);
}

.home-serena-card {
  position: relative;
  width: min(100%, 520px);
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--sr-paper);
  background: #fff;
  box-shadow: 0 20px 34px -24px rgba(var(--serena-text-rgb), .55);
}

.home-serena-card-avatar {
  position: absolute;
  top: -58px;
  right: 8px;
  width: 116px;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(var(--serena-text-rgb), .18));
}

.home-serena-card-title {
  max-width: calc(100% - 100px);
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--serena-text);
}

.home-serena-card p {
  line-height: 1.6;
  color: var(--serena-text-soft);
}

.home-checklist {
  position: relative;
  align-self: center;
}

.home-checklist-sticker {
  position: absolute;
  top: -30px;
  right: 0;
  width: clamp(56px, 6vw, 84px);
  height: auto;
  pointer-events: none;
}

.home-checklist-title {
  max-width: calc(100% - 70px);
  margin-bottom: 1.25rem;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--serena-text);
}

.home-notes {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-note {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 64px;
  padding: .8rem 1.1rem;
  border-radius: var(--sr-paper);
  background: #fff;
  font-weight: 600;
  line-height: 1.45;
  color: var(--serena-text);
  box-shadow: 0 12px 22px -18px rgba(var(--serena-text-rgb), .55);
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--sr-bounce);
}

.home-note:nth-child(odd) {
  --r: -.6deg;
}

.home-note:nth-child(even) {
  --r: .6deg;
}

.home-note:hover {
  --r: 0deg;
}

.home-note-check {
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* Teaser de preguntas (magenta) */
@media (min-width: 992px) {
  .home-faq-art {
    grid-column: 1 / span 5;
  }

  .home-faq-copy {
    grid-column: 6 / span 7;
    align-self: center;
  }
}

.home-faq-art {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.home-faq-art .sr-blob {
  inset: 6%;
}

.home-faq-bubble {
  position: relative;
  z-index: 1;
  display: block;
  width: 78%;
  height: auto;
  margin: 11% auto 0;
}

.home-faq-sticker {
  position: absolute;
  right: 0;
  bottom: 4%;
  z-index: 2;
  width: 30%;
  height: auto;
}

.home-page .home-band--faq .sr-kicker {
  color: var(--serena-mint-soft);
}

.home-faq-text {
  max-width: 56ch;
  margin-bottom: 1.25rem;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: #fff;
}

.home-faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.home-faq-cats a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .3s var(--sr-bounce);
}

.home-faq-cats a:hover,
.home-faq-cats a:focus-visible {
  background: #fff;
  color: var(--serena-purple-accent);
}

/* Recursos: carteles pegados en un riel */
.home-recursos-libro {
  display: block;
  width: min(62%, 240px);
  height: auto;
  margin: 0 auto .5rem;
}

.home-page .home-recursos-track {
  gap: 1.4rem;
  padding: 1rem .5rem 1.5rem;
}

.home-page .recurso-slide {
  padding: 12px 12px 18px;
  border: 0;
  border-radius: var(--sr-paper);
  background: #fff;
  box-shadow: 0 18px 30px -22px rgba(var(--serena-text-rgb), .6);
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--sr-bounce), box-shadow .3s ease;
}

.home-page .recurso-slide-item:nth-child(odd) .recurso-slide {
  --r: -1deg;
}

.home-page .recurso-slide-item:nth-child(even) .recurso-slide {
  --r: .8deg;
}

.home-page .recurso-slide:hover,
.home-page .recurso-slide:focus-visible {
  --r: 0deg;
  transform: none;
  box-shadow: 0 22px 34px -20px rgba(var(--serena-text-rgb), .6);
}

.home-page .recurso-cover {
  border-radius: 14px 6px 16px 8px;
}

.home-page .recurso-slide-body {
  padding: 0 .4rem;
}

.home-page .recurso-slide-body h3 {
  font-weight: 800;
  line-height: 1.25;
  color: var(--serena-text);
}

.home-page .recurso-slide-body .route-flip-cta {
  color: var(--serena-purple-accent);
}

.home-recursos-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .5rem;
}

.home-page .recursos-nav-btn {
  width: 48px;
  height: 48px;
  background: var(--serena-purple-accent);
  box-shadow: 0 10px 18px -12px rgba(var(--serena-text-rgb), .6);
}

.home-page .recursos-indicators {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Puntos de 12px con área de toque de 24px */
.home-page .recursos-dot {
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  padding: 6px;
  background-color: rgba(var(--serena-text-rgb), .25);
  background-clip: content-box;
}

.home-page .recursos-dot.active {
  width: 28px;
  background-color: var(--serena-purple-accent);
}

/* App Serena */
@media (min-width: 992px) {
  .home-app-copy {
    grid-column: 1 / span 7;
    align-self: center;
  }

  .home-app-art {
    grid-column: 8 / span 5;
  }
}

.home-app-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .home-app-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-app-feature {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 68px;
  padding: .7rem 1rem;
  border-radius: var(--sr-paper);
  background: #fff;
  font-weight: 700;
  line-height: 1.3;
  color: var(--serena-text);
  box-shadow: 0 12px 22px -18px rgba(var(--serena-text-rgb), .55);
}

.home-app-feature-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--serena-blue-tint);
}

.home-app-feature-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.home-app-feature:nth-child(even) .home-app-feature-icon {
  background: rgba(var(--serena-mint-soft-rgb), .45);
}

.home-app-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.home-app-note {
  margin: 0;
  font-size: .95rem;
  color: var(--serena-text-soft);
}

.home-app-art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  margin-inline: auto;
  padding: 20px 0 10px;
}

.home-app-art .sr-blob {
  inset: 4% 2% 6% 6%;
}

.home-page .home-app-phone {
  position: relative;
  z-index: 1;
  rotate: 4deg;
}

.home-page .home-app-phone .phone-image {
  width: clamp(190px, 17vw, 240px);
  height: auto;
  max-height: none;
}

.home-app-serena {
  position: absolute;
  bottom: -4%;
  left: -6%;
  z-index: 2;
  width: 52%;
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(var(--serena-text-rgb), .2));
}

/* ---------------------------------------------------------------
   DESCARGAR-SERENA.HTML
   --------------------------------------------------------------- */
.dsc-hero {
  background: var(--dsc-hero);
}

.dsc-page .dsc-hero .dsc-hero-h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
}

.dsc-hero-postit {
  margin: clamp(24px, 3vw, 36px) 0 0;
}

.dsc-hero-art {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(100%, 480px);
  margin: 24px auto -30px;
  padding: 20px 0 30px;
}

.dsc-hero-art .sr-blob {
  inset: 2% 4% 8% 4%;
  rotate: 6deg;
}

.dsc-page .dsc-hero-phone {
  position: relative;
  z-index: 1;
  margin-left: 22%;
  rotate: 5deg;
}

.dsc-page .dsc-hero-phone .phone-image {
  width: clamp(180px, 17vw, 250px);
  height: auto;
  max-height: none;
}

.dsc-hero-serena {
  position: absolute;
  bottom: 0;
  left: -4%;
  z-index: 2;
  width: 58%;
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(var(--serena-text-rgb), .22));
}

@media (min-width: 992px) {
  .dsc-hero-art {
    width: auto;
    margin: 0 0 calc(-1 * clamp(70px, 7vw, 120px));
  }
}

.dsc-band--camino {
  background: var(--dsc-camino);
}

.dsc-band--muro {
  background: var(--dsc-muro);
}

.dsc-band--muro>.section-divider {
  background: var(--serena-cream-band);
}

.dsc-band--cierre {
  background: var(--dsc-cierre);
  color: #fff;
}

.dsc-page main+.section-divider {
  background: var(--dsc-cierre);
}

/* Recorrido de 5 pasos con hilo */
.dsc-camino {
  position: relative;
  max-width: 1160px;
  margin-inline: auto;
}

.dsc-camino .sr-thread {
  left: 2px;
}

.dsc-pasos {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 6vw, 88px);
  margin: 0;
  padding: 0 0 0 44px;
  list-style: none;
}

.dsc-paso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.dsc-paso-figure .sr-blob {
  inset: 4% 2% 2% 2%;
  rotate: -3deg;
}

.dsc-paso:nth-child(even) .dsc-paso-figure .sr-blob {
  rotate: 3deg;
}

.dsc-paso-figure>img {
  width: 92%;
  margin-inline: auto;
}

.dsc-paso-copy {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dsc-paso-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
  font-size: 1.5rem;
  rotate: -6deg;
  box-shadow: 0 10px 18px -12px rgba(var(--serena-text-rgb), .6);
}

.dsc-paso--alerta .dsc-paso-num {
  background: var(--serena-urgent-text);
}

.dsc-paso-nota {
  margin: 0;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  color: var(--serena-text);
}

@media (min-width: 768px) {
  .dsc-camino .sr-thread {
    left: calc(50% - 20px);
  }

  .dsc-pasos {
    padding-left: 0;
  }

  .dsc-paso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 7vw, 110px);
  }

  .dsc-paso:nth-child(even) .dsc-paso-figure {
    grid-column: 2;
    grid-row: 1;
  }

  .dsc-paso:nth-child(even) .dsc-paso-copy {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* Muro de mensajes */
.dsc-mensajes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  max-width: 980px;
  margin-inline: auto;
}

.dsc-mensaje {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: var(--sr-paper);
  background: #fff;
  color: var(--serena-text);
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.8vw, 2.3rem);
  line-height: 1.15;
  rotate: var(--r, 0deg);
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .55);
  transition: rotate .35s var(--sr-bounce);
}

.dsc-mensaje:nth-child(1) {
  background: var(--serena-mint-soft);
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
}

.dsc-mensaje:nth-child(3) {
  background: var(--serena-cream-band);
}

.dsc-mensaje:nth-child(4) {
  background: var(--serena-blue-tint);
}

.dsc-mensaje:hover {
  rotate: 0deg;
}

/* Cierre */
@media (min-width: 992px) {
  .dsc-cierre-figure {
    grid-column: 1 / span 6;
  }

  .dsc-cierre-copy {
    grid-column: 7 / span 6;
    align-self: center;
  }
}

.dsc-cierre-figure {
  width: min(100%, 600px);
  margin-inline: auto;
}

.dsc-page .dsc-cierre-title {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
}

.dsc-cierre-note {
  max-width: 48ch;
  margin: 1.25rem 0 0;
  font-weight: 600;
  line-height: 1.55;
  color: #fff;
}

/* ---------------------------------------------------------------
   Móvil
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sr-page .sr-sticker {
    width: clamp(50px, 14vw, 66px);
  }

  .sr-sticker--hero,
  .sr-sticker--tl,
  .sr-sticker--tr {
    top: 8px;
  }

  .sr-sticker--bl,
  .sr-sticker--br {
    display: none;
  }

  .home-note:nth-child(odd),
  .home-note:nth-child(even) {
    --r: 0deg;
  }

  .sr-postit {
    rotate: -1deg;
  }

  /* El avatar de Serena se asoma por encima de la tarjeta, sin tapar texto */
  .home-serena-card {
    margin-top: 40px;
  }

  .home-serena-card-avatar {
    top: -72px;
    right: 14px;
    width: 86px;
  }

  /* En móvil el título del hero llega arriba: el sticker baja junto a la ilustración */
  .sr-sticker--hero {
    top: auto;
    bottom: 110px;
    right: 12px;
  }

  .home-faq-art {
    width: min(60%, 230px);
  }
}

/* ---------------------------------------------------------------
   Animaciones (solo si JS puede y no hay movimiento reducido)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .js-sr-ready .sr-hero [data-hero-part] {
    opacity: 0;
    transition: opacity .6s var(--sr-ease), transform .7s var(--sr-ease);
    transition-delay: var(--delay, 0ms);
  }

  .js-sr-ready .sr-hero [data-hero-part="up"] {
    transform: translateY(24px);
  }

  .js-sr-ready .sr-hero [data-hero-part="pop"] {
    transform: scale(.8);
    transition-timing-function: var(--sr-ease), var(--sr-bounce);
  }

  .js-sr-ready .sr-hero [data-hero-part="tilt"] {
    transform: rotate(4deg) translateY(28px);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--sr-ease), var(--sr-bounce);
  }

  .js-sr-ready .sr-hero.is-go [data-hero-part] {
    opacity: 1;
    transform: none;
  }

  .js-sr-ready [data-sr-reveal] {
    opacity: 0;
    transition: opacity .7s var(--sr-ease), transform .75s var(--sr-ease);
  }

  .js-sr-ready [data-sr-reveal="up"] {
    transform: translateY(32px);
  }

  .js-sr-ready [data-sr-reveal="left"] {
    transform: translateX(-48px);
  }

  .js-sr-ready [data-sr-reveal="right"] {
    transform: translateX(48px);
  }

  .js-sr-ready [data-sr-reveal="tilt"] {
    transform: rotate(5deg) translateY(40px) scale(.95);
    transition-duration: .7s, .9s;
    transition-timing-function: var(--sr-ease), var(--sr-bounce);
  }

  .js-sr-ready [data-sr-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .js-sr-ready [data-sr-stagger]>* {
    opacity: 0;
    transform: translateY(18px) scale(.94);
    transition: opacity .45s var(--sr-ease), transform .6s var(--sr-bounce), rotate .35s var(--sr-bounce);
    transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s;
  }

  .js-sr-ready [data-sr-stagger].is-in>* {
    opacity: 1;
    transform: none;
  }

  .js-sr-ready .sr-underline path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s var(--sr-ease) .35s;
  }

  .js-sr-ready .is-in .sr-underline path {
    stroke-dashoffset: 0;
  }

  /* Mural: zoom lento del fondo y título por palabras */
  .js-sr-ready .sr-mural-art {
    transform: scale(1.08);
    transition: transform 8s ease-out;
  }

  .js-sr-ready .sr-mural.is-in .sr-mural-art {
    transform: scale(1);
  }

  .js-sr-ready [data-sr-words] .sr-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--sr-ease), transform .5s var(--sr-ease);
    transition-delay: calc(var(--i, 0) * 70ms + 200ms);
  }

  .js-sr-ready .is-in [data-sr-words] .sr-word,
  .js-sr-ready [data-sr-words].is-in .sr-word {
    opacity: 1;
    transform: none;
  }

  /* Mensajes del muro: aparecen "pegándose" */
  .js-sr-ready .dsc-mensajes[data-sr-stagger]:not(.is-in)>* {
    transform: scale(.6) rotate(8deg);
  }

  .home-faq-cats a:hover {
    transform: translateY(-2px) rotate(-1deg);
  }
}

/* =========================================================
   INTERRUPCIÓN — recorrido lineal + imágenes finales (2026-09-24)
   Orden: Revisa tus medicamentos → Cómo tomar cada pastilla → app →
   ¿Qué puedo esperar? → signos frecuentes → qué puedo hacer → app →
   señales de alerta → después. Cada tramo cierra con "Siguiente paso".
   ========================================================= */

/* Durante A: "Revisa tus medicamentos" junto a la imagen fija */
@media (min-width: 992px) {
  .inte-dura-top .inte-dura-revisa {
    grid-row: 1;
  }

  .inte-dura-top .inte-dura-figure {
    grid-row: 1;
  }
}

/* Durante B: "¿Qué puedo esperar?" abre la banda (texto + dos avisos) */
.inte-page .inte-band--dur-b .durante-lead {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--serena-text);
}

.inte-page .inte-band--dur-b .durante-eyebrow {
  color: var(--serena-accent-dark);
}

.inte-page .inte-band--dur-b .durante-title {
  color: var(--serena-text);
}

.inte-page .inte-band--dur-b .inte-note {
  color: var(--serena-text);
}

.inte-durb-intro {
  margin-bottom: clamp(48px, 7vw, 96px);
}

@media (min-width: 992px) {
  .inte-durb-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }

  .inte-durb-intro>* {
    grid-column: 1;
  }

  .inte-durb-intro>.inte-teasers {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
  }
}

.inte-page .inte-band--dur-b .inte-teasers .durante-feature-item {
  padding: 1rem 1.1rem;
  border-left-width: 5px;
  border-radius: 6px 20px 8px 18px;
  background: #fff;
  box-shadow: 0 14px 24px -20px rgba(var(--serena-text-rgb), .55);
}

.inte-page .inte-teasers .btn-outline-serena {
  border: 2px solid var(--serena-accent);
  background: #fff;
  color: var(--serena-accent);
}

.inte-page .inte-teasers .btn-outline-serena:hover,
.inte-page .inte-teasers .btn-outline-serena:focus-visible {
  background: var(--serena-accent);
  color: #fff;
}

/* Signos frecuentes: imágenes 4:3 sobre una mancha */
.inte-esperar-art {
  position: relative;
  margin-inline: auto;
}

.inte-esperar-art>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.inte-esperar-art .inte-blob {
  inset: 6% 4% 10% 4%;
}

.inte-esperar:nth-child(even) .inte-esperar-art .inte-blob {
  rotate: 5deg;
}

@media (min-width: 768px) {
  .inte-esperar--lg .inte-esperar-art {
    width: 92%;
  }

  .inte-esperar:not(.inte-esperar--lg) .inte-esperar-art {
    width: 100%;
  }
}

/* Qué puedo hacer: ícono dibujado dentro del sticker circular */
.inte-cuidado-sticker {
  display: grid;
  place-items: center;
}

.inte-cuidado-sticker img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.inte-cuidado-sticker--cream {
  background: var(--serena-cream-band);
}

.inte-cuidado-sticker--blue {
  background: var(--serena-blue-tint);
}

.inte-cuidado-sticker--lilac {
  background: var(--serena-secondary-bg);
}

/* Señales de alerta: escenas como fotos pegadas sobre el morado */
.inte-alerta img {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: 22px 8px 24px 10px / 10px 22px 8px 24px;
  background: var(--serena-cream-band);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55);
}

.inte-alerta--2 img {
  background: var(--serena-primary-tint);
}

.inte-alerta--2 {
  margin-top: 40%;
}

/* ---- Recomendación de la app en los puntos clave ---- */
.inte-app-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: .5rem;
  max-width: 980px;
  margin: clamp(88px, 10vw, 136px) auto 0;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 28px 12px 30px 14px / 14px 28px 12px 30px;
  background: #fff;
  box-shadow: 0 24px 40px -26px rgba(var(--serena-text-rgb), .55);
  rotate: -.6deg;
}

.inte-app-cta-serena {
  width: 150px;
  height: auto;
  margin-top: -96px;
  filter: drop-shadow(0 12px 16px rgba(var(--serena-text-rgb), .2));
}

.inte-app-cta-copy {
  width: 100%;
}

.inte-page .inte-app-cta-kicker {
  color: var(--serena-accent);
  font-size: 1.5rem;
}

.inte-app-cta-title {
  margin: .25rem 0 .9rem;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 1.12;
  color: var(--serena-text);
}

.inte-app-cta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.inte-app-cta-chips li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--serena-blue-tint);
  color: var(--serena-accent-dark);
  font-weight: 700;
  font-size: .92rem;
}

.inte-app-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.inte-page .inte-app-cta-btn {
  border: 2px solid var(--serena-purple-accent);
  background: var(--serena-purple-accent);
  color: #fff;
}

.inte-page .inte-app-cta-btn:hover,
.inte-page .inte-app-cta-btn:focus-visible {
  border-color: var(--serena-accent-dark);
  background: var(--serena-accent-dark);
  color: #fff;
}

.inte-app-cta-note {
  margin: 0;
  font-size: .92rem;
  color: var(--serena-text-soft);
}

@media (min-width: 768px) {
  .inte-app-cta {
    grid-template-columns: clamp(170px, 22vw, 250px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(64px, 8vw, 112px);
  }

  .inte-app-cta-serena {
    width: 100%;
    margin: -40px 0 -20px;
  }
}

/* ---- Siguiente paso: une cada tramo con el que sigue ---- */
.inte-next {
  margin: clamp(48px, 6vw, 80px) 0 0;
  text-align: center;
}

.inte-next a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  max-width: 100%;
  min-height: 60px;
  padding: .6rem .7rem .6rem 1.4rem;
  border-radius: 999px;
  background: #fff;
  color: var(--serena-text);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 16px 28px -18px rgba(var(--serena-text-rgb), .6);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

.inte-next-label {
  flex: none;
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--serena-accent);
}

.inte-next-title {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.2;
}

.inte-next i {
  flex: none;
  font-size: 2rem;
  color: var(--serena-purple-accent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.inte-next a:hover {
  color: var(--serena-text);
  box-shadow: 0 20px 32px -18px rgba(var(--serena-text-rgb), .65);
}

@media (prefers-reduced-motion: no-preference) {
  .inte-next a:hover {
    transform: translateY(-2px);
  }

  .inte-next a:hover i {
    transform: translateY(4px);
  }
}

@media (max-width: 575.98px) {
  .inte-next a {
    border-radius: 24px;
  }

  .inte-next-label {
    display: none;
  }

  .inte-app-cta {
    rotate: 0deg;
  }
}

/* =========================================================
   CONTINÚA EL RECORRIDO — ciclo de toda la web (todas las páginas)
   Inicio → Gestograma → Aborto informado → Preguntas frecuentes →
   Hablar con Serena → Descargar Serena → Inicio.
   ========================================================= */
.cyc-band {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6vw, 88px) 0 clamp(44px, 6vw, 88px);
  background: var(--serena-cream-band);
}

.cyc-divider-up {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  transform: translateY(calc(-100% + 2px));
}

/* La ola verde del pie arranca sobre el crema de este bloque */
main:has(> .cyc-band:last-child)+.section-divider {
  background: var(--serena-cream-band) !important;
}

.cyc-wrap {
  width: min(100% - 2 * clamp(16px, 4vw, 64px), 1100px);
  margin-inline: auto;
  text-align: center;
}

.cyc-band .cyc-kicker {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--serena-accent);
}

.cyc-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 18px) clamp(18px, 2.4vw, 28px) clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px);
  border-radius: 28px 12px 30px 14px / 14px 28px 12px 30px;
  background: #fff;
  color: var(--serena-text);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 22px 36px -24px rgba(var(--serena-text-rgb), .6);
  rotate: -.8deg;
  transition: rotate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

.cyc-next:hover,
.cyc-next:focus-visible {
  color: var(--serena-text);
  rotate: 0deg;
  box-shadow: 0 26px 40px -22px rgba(var(--serena-text-rgb), .65);
}

.cyc-next:focus-visible {
  outline: 3px solid var(--serena-focus);
  outline-offset: 3px;
}

.cyc-next-art {
  display: grid;
  place-items: center;
  width: clamp(88px, 12vw, 140px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--serena-mint-soft);
}

.cyc-next-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
}

.cyc-next-copy {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.cyc-next-label {
  font-family: "Caveat", "Baloo 2", cursive, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--serena-accent);
}

.cyc-next-title {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.08;
  color: var(--serena-purple-accent);
}

.cyc-next-desc {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--serena-text-soft);
}

.cyc-next-arrow {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  color: var(--serena-purple-accent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .cyc-next:hover .cyc-next-arrow {
    transform: translateX(6px);
  }

  .cyc-next-art img {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  }

  .cyc-next:hover .cyc-next-art img {
    transform: scale(1.06) rotate(-3deg);
  }
}

.cyc-others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px);
}

.cyc-others a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .25);
  border-radius: 999px;
  background: #fff;
  color: var(--serena-text);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cyc-others a i {
  color: var(--serena-purple-accent);
}

.cyc-others a:hover,
.cyc-others a:focus-visible {
  border-color: var(--serena-accent);
  background: var(--serena-accent);
  color: #fff;
}

.cyc-others a:hover i,
.cyc-others a:focus-visible i {
  color: #fff;
}

@media (max-width: 575.98px) {
  .cyc-next {
    grid-template-columns: auto minmax(0, 1fr);
    rotate: 0deg;
  }

  .cyc-next-arrow {
    display: none;
  }

  .cyc-next-art {
    width: 76px;
  }
}

/* Banner de la app en interrupción: la insignia del teléfono no debe
   generar scroll horizontal */
.inte-page .app-banner-band {
  overflow-x: clip;
}

/* =========================================================
   HEADER, FOOTER Y AVISO DE PAÍS — rediseño "collage" (2026-09-24)
   Mismo lenguaje que interrupción y preguntas frecuentes: píldora de
   papel, tipografía Baloo, morado de acento, trazos a mano. Aplica a
   todas las páginas (mismo marcado en todas).
   ========================================================= */

/* ---- Header: píldora flotante ---- */
.site-header--floating .navbar {
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .12);
  box-shadow: 0 16px 32px -18px rgba(var(--serena-text-rgb), .4);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.site-header--floating.is-scrolled .navbar {
  border-color: rgba(var(--serena-purple-accent-rgb), .22);
  box-shadow: 0 18px 36px -16px rgba(var(--serena-text-rgb), .5);
}

.navbar-nav .nav-link {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: .95rem;
}

.navbar-nav .nav-link i {
  color: var(--serena-purple-accent);
}

.navbar-nav .nav-link:not(.active):hover {
  color: var(--serena-purple-accent);
}

/* Subrayado dibujado a mano, en morado */
.navbar-nav .nav-link:not(.active)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M1,7 Q15,1 28,7 T55,7 T82,7 T99,6' fill='none' stroke='%23830D9C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Página actual: sticker morado con la hojita */
.navbar-nav .nav-link.active {
  background: var(--serena-purple-accent);
  color: #fff;
  rotate: -1.5deg;
  box-shadow: 0 8px 16px -10px rgba(var(--serena-purple-accent-rgb), .9);
}

.navbar-nav .nav-link.active i {
  color: #fff;
}

/* Botón "Descargar Serena": píldora con sombra y rebote */
.site-header .btn-serena-accent {
  border: 2px solid var(--serena-accent);
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: .95rem;
  box-shadow: 0 10px 20px -12px rgba(var(--serena-text-rgb), .6);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, background-color .2s ease;
}

.site-header .btn-serena-accent i {
  display: inline-block;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .site-header .btn-serena-accent:hover {
    transform: translateY(-2px);
  }

  .site-header .btn-serena-accent:hover i {
    transform: rotate(-14deg) scale(1.12);
  }
}

/* Botón del menú: círculo crema con borde morado */
.navbar-toggler {
  width: 48px;
  justify-content: center;
  padding: 0;
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .35);
  border-radius: 50%;
  background: var(--serena-cream-band);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(var(--serena-purple-accent-rgb), .25);
}

.navbar-toggler-icon {
  width: 1.3em;
  height: 1.3em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235C418E' stroke-linecap='round' stroke-width='2.6' d='M5 8h20M5 15h16M5 22h20'/%3e%3c/svg%3e");
}

/* Menú desplegado (celular / tablet): filas de papel */
@media (max-width: 1399.98px) {
  .site-header--floating .navbar {
    border-radius: 28px;
  }

  .navbar-collapse {
    border-top: 2px dashed rgba(var(--serena-purple-accent-rgb), .18);
  }

  .navbar-nav .nav-link {
    font-size: 1.02rem;
  }

  .navbar-nav .nav-link:not(.active) {
    background: var(--serena-lilac-faint);
  }

  .navbar-nav .nav-link:not(.active):hover {
    background: var(--serena-blue-tint);
  }

  .navbar-nav .nav-link:not(.active)::after {
    display: none;
  }

  .navbar-nav .nav-link.active {
    rotate: 0deg;
  }

  .navbar-nav .nav-link i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: .7rem;
    border-radius: 50%;
    background: #fff;
  }

  .navbar-nav .nav-link.active i {
    background: rgba(255, 255, 255, .18);
  }

  .site-header .btn-serena-accent {
    margin-top: .6rem;
  }
}

/* ---- Aviso de país: tarjeta flotante abajo, siempre a la vista ---- */
.country-banner {
  position: fixed;
  right: 0;
  bottom: clamp(12px, 3vw, 24px);
  left: 0;
  z-index: 1060;
  width: min(100% - 24px, 760px);
  margin-inline: auto;
  border: 2px solid rgba(var(--serena-purple-accent-rgb), .2);
  border-radius: 26px 12px 28px 14px / 14px 26px 12px 28px;
  background: #fff;
  box-shadow: 0 24px 48px -18px rgba(var(--serena-text-rgb), .5);
}

@media (prefers-reduced-motion: no-preference) {
  .country-banner:not([hidden]) {
    animation: countryIn .45s cubic-bezier(.34, 1.56, .64, 1);
  }

  @keyframes countryIn {
    from {
      opacity: 0;
      transform: translateY(24px) scale(.96);
    }
  }
}

.country-banner .container {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: .9rem !important;
  max-width: none;
  padding: 1.1rem 3.4rem 1.1rem 1.2rem !important;
  color: var(--serena-text);
  font-size: 1rem;
}

.country-banner-text {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-weight: 600;
  line-height: 1.45;
}

.country-banner-text .bi {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--serena-mint-soft);
  color: var(--serena-text);
  font-size: 1.35rem;
  rotate: -6deg;
}

.country-banner-actions {
  flex-wrap: wrap;
  padding-left: calc(46px + .85rem);
}

.country-banner-actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem 1.15rem;
  border: 2px solid var(--serena-purple-accent);
  border-radius: 999px;
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: .98rem;
}

.country-banner-actions .btn-serena-primary {
  background: var(--serena-purple-accent);
  color: #fff;
}

.country-banner-actions .btn-serena-primary:hover,
.country-banner-actions .btn-serena-primary:focus-visible {
  border-color: var(--serena-accent-dark);
  background: var(--serena-accent-dark);
  color: #fff;
}

.country-banner-actions .btn-outline-serena {
  background: #fff;
  color: var(--serena-purple-accent);
}

.country-banner-actions .btn-outline-serena:hover,
.country-banner-actions .btn-outline-serena:focus-visible {
  background: var(--serena-blue-tint);
  color: var(--serena-accent-dark);
}

/* Opción vigente: se nota con un check */
.country-banner-actions .btn[aria-pressed="true"]::before {
  content: "\2713";
  margin-right: .4rem;
  font-weight: 800;
}

.country-banner-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--serena-lilac-faint);
  color: var(--serena-text);
  font-size: 1rem;
}

.country-banner-close:hover {
  background: var(--serena-blue-tint);
}

@media (max-width: 575.98px) {
  .country-banner-actions {
    padding-left: 0;
  }

  .country-banner-text {
    align-items: flex-start;
    font-size: .95rem;
  }
}

/* ---- Footer: franja ilustrada + pie verde con acentos a mano ---- */
.site-footer--illustrated {
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
  font-size: 1rem;
}

.site-footer--illustrated .container {
  max-width: 1200px;
}

.site-footer--illustrated .brand-logo {
  height: 3rem;
  margin-bottom: .75rem !important;
}

.site-footer--illustrated .col-lg-6>p {
  max-width: 34ch;
  font-size: 1.05rem;
  color: #fff;
}

.site-footer--illustrated h3.h6 {
  margin-bottom: .6rem;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--serena-cream-band) !important;
  rotate: -2deg;
}

.site-footer--illustrated ul {
  margin: 0;
}

.site-footer--illustrated ul li {
  margin-bottom: .15rem;
}

.site-footer--illustrated ul a {
  position: relative;
  display: inline-block;
  padding: .25rem 0;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}

/* Subrayado ondulado a mano al pasar (crema) */
.site-footer--illustrated ul a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M1,7 Q15,1 28,7 T55,7 T82,7 T99,6' fill='none' stroke='%23FEF9EA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transform: scaleX(.7);
  transform-origin: left center;
  transition: opacity .2s ease, transform .25s ease;
}

.site-footer--illustrated ul a:hover,
.site-footer--illustrated ul a:focus-visible {
  color: var(--serena-cream-band);
}

.site-footer--illustrated ul a:hover::after,
.site-footer--illustrated ul a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.site-footer--illustrated a:focus-visible {
  outline-color: #fff;
}

.site-footer--illustrated hr {
  margin: clamp(28px, 4vw, 40px) 0 1.25rem;
  border: 0;
  border-top: 2px dashed rgba(255, 255, 255, .35);
  opacity: 1;
}

.site-footer--illustrated>.container>p.small {
  max-width: 90ch;
  color: rgba(255, 255, 255, .92);
  line-height: 1.55;
}

/* "Cambiar país": píldora crema, bien visible */
.site-footer--illustrated .footer-country {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .75rem;
  padding: .45rem 1.1rem .45rem .5rem;
  border-radius: 999px;
  background: var(--serena-cream-band);
  color: var(--serena-accent-dark);
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .5);
  transition: transform .25s ease, background-color .2s ease;
}

.site-footer--illustrated .footer-country i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--serena-purple-accent);
  color: #fff;
}

.site-footer--illustrated .footer-country:hover {
  background: #fff;
  color: var(--serena-accent-dark);
}

@media (prefers-reduced-motion: no-preference) {
  .site-footer--illustrated .footer-country:hover {
    transform: translateY(-2px) rotate(-1deg);
  }
}

.footer-strip {
  height: 56px;
}

/* ---- Header: ajustes (sin inclinación, sin hojita, CTA centrado) ---- */
.navbar-nav .nav-link.active {
  rotate: 0deg;
}

.nav-leaf {
  display: none;
}

/* Baloo 2 se asienta alto en su caja: se baja apenas para que el texto
   quede centrado con el ícono en enlaces y botón */
.navbar-nav .nav-link,
.site-header .btn-serena-accent {
  padding-top: .14em;
}

.site-header .btn-serena-accent i {
  margin-top: -.14em;
}

/* "Descargar Serena" como página actual: sólido morado (Bootstrap le
   quitaba el fondo y quedaba solo el contorno) con un aro suave */
.site-header .btn-serena-accent.active,
.site-header .btn-serena-accent[aria-current="page"] {
  border-color: var(--serena-purple-accent);
  background: var(--serena-purple-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--serena-purple-accent-rgb), .18), 0 10px 20px -12px rgba(var(--serena-text-rgb), .6);
}

.site-header .btn-serena-accent.active:hover,
.site-header .btn-serena-accent[aria-current="page"]:hover {
  border-color: var(--serena-accent-dark);
  background: var(--serena-accent-dark);
  color: #fff;
}

/* ---- Gestograma: botones del resultado en morado, misma altura ---- */
.gest-page .gest-result-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gest-page .gest-result-actions .gest-result-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .55rem 1rem;
  border: 2px solid var(--serena-purple-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--serena-purple-accent);
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 10px 18px -14px rgba(var(--serena-text-rgb), .6);
  transition: background-color .2s ease, color .2s ease, transform .25s ease;
}

.gest-page .gest-result-actions .gest-result-btn i {
  flex: none;
  font-size: 1.1rem;
}

.gest-page .gest-result-actions .gest-result-btn--solid {
  background: var(--serena-purple-accent);
  color: #fff;
}

.gest-page .gest-result-actions .gest-result-btn:hover,
.gest-page .gest-result-actions .gest-result-btn:focus-visible {
  border-color: var(--serena-accent-dark);
  background: var(--serena-accent-dark);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .gest-page .gest-result-actions .gest-result-btn:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 400px) {
  .gest-page .gest-result-actions {
    grid-template-columns: 1fr;
  }
}

/* Menú en celular / tablet: opciones centradas en vertical y horizontal
   (el ajuste de Baloo de escritorio dejaba el relleno superior más chico) */
@media (max-width: 1399.98px) {
  .navbar-nav .nav-link {
    justify-content: center;
    padding: calc(.6rem + .1em) 1rem calc(.6rem - .1em);
  }

  .navbar-nav .nav-link i {
    margin-top: -.2em;
  }

  .site-header .btn-serena-accent {
    padding-top: .12em;
    padding-bottom: 0;
  }
}

/* Index · Acompañamiento: en pantallas grandes Serena se asomaba sobre la
   ilustración de arriba y quedaba tapada. Más aire y siempre por encima. */
.home-serena-card {
  z-index: 2;
}

@media (min-width: 768px) {
  .home-serena-card {
    margin-top: 44px;
  }

  .home-serena-card-avatar {
    top: -86px;
    right: 18px;
    width: 124px;
  }
}

/* ---- Mural de interrupción: mismo formato y colores que el de index ---- */
.inte-mural {
  min-height: clamp(520px, 50vw, 760px);
}

.inte-mural-copy {
  max-width: min(31vw, 450px);
  padding-block: clamp(80px, 8vw, 120px) clamp(48px, 6vw, 88px);
}

.inte-mural-title {
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  line-height: 1.12;
  color: var(--serena-text);
}

.inte-mural-accent {
  color: var(--serena-purple-accent);
}

.inte-mural-faq {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--serena-text);
}

.inte-page .inte-mural-faq .citation-link {
  color: var(--serena-accent-dark);
}

.inte-mural-actions .badge-hashtag {
  font-size: 1.35rem;
}

.inte-page .inte-mural-btn {
  border: 2px solid var(--serena-purple-accent);
  background: var(--serena-purple-accent);
  color: #fff;
}

.inte-page .inte-mural-btn:hover,
.inte-page .inte-mural-btn:focus-visible {
  border-color: var(--serena-accent-dark);
  background: var(--serena-accent-dark);
  color: #fff;
}

@media (max-width: 991.98px) {
  .inte-mural-art {
    aspect-ratio: 16 / 10;
  }

  .inte-mural-copy {
    max-width: 62ch;
    padding-block: var(--space-6) clamp(48px, 8vw, 72px);
  }
}

/* Ola superior del mural, dibujada sobre la imagen (como en index) */
.inte-mural-divider {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  z-index: 2;
}

@media (min-width: 992px) {
  .inte-mural-copy {
    padding-top: clamp(96px, 9vw, 136px);
  }
}

/* Marquesina de interrupción: camina hacia la derecha, como en
   descargar-serena.html. Tiene el doble de imágenes (8 vs 4), así que el
   doble de duración mantiene la misma velocidad. */
.inte-marquee-track {
  animation: inteWalkRight 300s linear infinite;
}

@keyframes inteWalkRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inte-marquee-track {
    animation: none;
  }
}

/* Antes · punto 1: en pantallas grandes la imagen ya no sangra hasta el
   borde (tapaba la línea morada que acompaña el recorrido); empieza
   después de la línea y se limita su tamaño. */
@media (min-width: 992px) {
  .inte-antes-point--1 .inte-figure--bleed {
    grid-column: 1 / 7;
    justify-self: start;
    width: min(100%, 600px);
    margin-left: 12px;
  }
}