@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&family=Roboto+Flex:wght@400;500;600;700&display=swap");

/* =========================================
     RESET (limitado al wrapper para NO tocar
     el header/footer/markup global de AEM)
     ========================================= */
.migrana-site-wrapper *,
.migrana-site-wrapper *::before,
.migrana-site-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
     VARIABLES DE COLOR (MODO OFF / NORMAL)
     ========================================= */
/* ==========================================================================
     SISTEMA DE DISEÑO — ENTENDIENDO LA MIGRAÑA (CO)
     --------------------------------------------------------------------------
     Todos los valores del sitio viven acá. Para cambiar un color, tamaño o
     gradiente en TODO el sitio, se edita UNA sola línea de este bloque.

     El sitio tiene DOS temas:
       · NORMAL  → este bloque (:root)
       · ALIVIO  → más abajo, reescribe los mismos tokens (fondo oscuro,
                   menos brillo, pensado para fotofobia)

     Al lado de cada token está QUÉ ELEMENTOS afecta.
     Ver GUIA-DE-ESTILOS.md para la lógica completa y cómo crear contenido.
     ========================================================================== */
:root {
  /* ------------------------------------------------------------------
     1. COLORES DE MARCA
     ------------------------------------------------------------------ */

  /* Azul corporativo. AFECTA: títulos (h1/h2/h3), texto de bullets,
     fondo de cards navy (.info-card.navy, .uso-card, .phase-card.navy),
     botones .btn-navy / .btn-test-navy, banner CTA. */
  --navy: #071d49;

  /* Verde de marca. AFECTA: <span class="span"> de los títulos, botones
     primarios (.btn-teal, .start-test, .next, descargas), cards .type-card,
     .phase-card.teal, círculos de iconos, dots activos del carrusel,
     bordes de imágenes, barra de avance del test. */
  --teal: #1ac9a8;

  /* Verde oscuro. AFECTA: hover de botones teal, callouts (.faq-callout,
     .sabias-cta), títulos de bullets (.bullet-title), "REFERENCIAS". */
  --teal-dark: #099479;

  /* Verde muy claro. AFECTA: fondo de secciones (.faq-section, .dia-section),
     fondo de círculos de iconos, bordes suaves, radio seleccionado. */
  --light-mint: #e8faf6;

  /* ------------------------------------------------------------------
     2. FONDOS Y SUPERFICIES
     ------------------------------------------------------------------ */

  /* Fondo general del sitio y de secciones amplias (.three-cards). */
  --white: #fafafa;

  /* Superficie de tarjetas. AFECTA: .card, .content-card, .info-card,
     .test-box, .faq-item, .dia-card, .riesgo-card, .resultados-card. */
  --pure-white: #ffffff;

  /* Fondo gris suave de bloques menores. AFECTA: .grado-item. */
  --surface-muted: #f4f6f5;

  /* Bordes y separadores finos. AFECTA: líneas del menú móvil, hr, cards. */
  --border-soft: #ececec;
  --border-hairline: #f0f0f0;

  /* Borde azul de imágenes destacadas. AFECTA: Tipos, Tratamiento. */
  --border-image: #1e7fd4;

  /* ------------------------------------------------------------------
     3. TEXTO
     ------------------------------------------------------------------ */

  /* Títulos y énfasis (<strong>). */
  --text-dark: #020202;

  /* Párrafos, listas y descripciones. */
  --text-body: #333;

  /* Texto sobre fondos oscuros. AFECTA: cards navy, banners, CTA. */
  --text-on-dark: #d4dad7;

  /* Texto de intro sobre banners. */
  --text-on-hero: #e6ebe9;

  /* Texto sobre color saturado (botones hover, callouts).
     En Modo Alivio se atenúa para no encandilar. */
  --text-on-color: #ffffff;

  /* ------------------------------------------------------------------
     4. GRADIENTES
     Declarados completos: se cambian de una sola vez.
     ------------------------------------------------------------------ */

  /* AFECTA: barra del switch MODO ALIVIO. */
  --gradient-switch: linear-gradient(90deg, #071d49 0%, #0b3177 100%);

  /* Azul→verde. AFECTA: .riesgo-section (Factores de Riesgo)
     y .migrana-section-gradient (sección del home). */
  --gradient-brand: linear-gradient(180deg, #071d49 27.77%, #1ac9a8 100%);

  /* Blanco→menta. AFECTA: secciones informativas claras. */
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #eafdf8 100%);

  /* Menta. AFECTA: bloques de apoyo con tinte verde. */
  --gradient-mint: linear-gradient(180deg, #dffff7 0%, #bdf5ea 100%);

  /* ------------------------------------------------------------------
     5. SOMBRA Y RADIOS
     ------------------------------------------------------------------ */

  /* Sombra de tarjetas. En Modo Alivio se anula (se usa borde). */
  --shadow: 0 5px 62px 22px rgba(0, 0, 0, 0.05);

  --card-radius: 20px;   /* Tarjetas grandes */
  --btn-radius: 30px;    /* Botones tipo pill */
  --radius-md: 14px;     /* Cards internas, callouts */
  --radius-sm: 8px;      /* Imágenes, bloques chicos */

  /* ------------------------------------------------------------------
     6. TIPOGRAFÍA
     ------------------------------------------------------------------ */
  --font-base: "Roboto", sans-serif;                    /* Cuerpo */
  --font-display: "Roboto Flex", "Roboto", sans-serif;  /* Botones y menú */

  --fs-hero: clamp(28px, 3.4vw, 46px);  /* Título de banner */
  --fs-h2: clamp(26px, 3vw, 34px);      /* Título de sección */
  --fs-h3: 26px;                        /* Título de card */
  --fs-h4: 22px;                        /* Título de card interna */
  --fs-lead: 20px;                      /* Bajada / intro destacada */
  --fs-body: 17px;                      /* Párrafo estándar */
  --fs-sm: 15px;                        /* Texto secundario, listas */
  --fs-xs: 12px;                        /* Referencias, disclaimers */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.2;   /* Títulos */
  --lh-normal: 1.5;  /* Párrafos */

  /* ------------------------------------------------------------------
     7. LAYOUT Y ESPACIADO
     ------------------------------------------------------------------ */

  /* Ancho de contenido fiel a Figma: 1146px de contenido en lienzo de 1440px */
  --content-max: 80vw;
  --gutter: clamp(24px, 5vw, 60px);

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 72px;   /* Separación entre secciones */

  /* Proporción de cards imagen+texto. Cambiar acá reajusta
     todas las secciones informativas a la vez. */
  --grid-media-text: 1fr 3fr;

  /* ------------------------------------------------------------------
     8. TRANSICIONES
     ------------------------------------------------------------------ */
  --transition-theme: 0.5s ease;   /* Cambio de tema */
  --transition-ui: 0.2s ease;      /* Hover de botones y links */

  /* ------------------------------------------------------------------
     9. FILTRO DE IMÁGENES
     En tema normal no se aplica filtro. En Modo Alivio se tiñen.
     ------------------------------------------------------------------ */
  --img-filter: none;
  --bg-filter: none;

  /* ------------------------------------------------------------------
     10. CAPAS (z-index)
     ------------------------------------------------------------------ */
  --z-switch: 90;
  --z-header: 200;

  /* ------------------------------------------------------------------
     11. COLORES DE APOYO
     ------------------------------------------------------------------ */
  /* Dots inactivos del carrusel (.carousel-dot). */
  --dot-inactive: #c3d6cf;
  /* Barra superior de aviso legal de AbbVie. */
  --bar-legal-bg: #ededed;
  --bar-legal-text: #2a2a2a;
}

/* =========================================
     CONTENEDOR RAÍZ
     Todas las reglas se cuelgan de aquí para ganar
     especificidad frente al CSS global de AEM.
     ========================================= */
.migrana-site-wrapper {
  width: 100%;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
  transition:
    background 0.5s ease,
    color 0.5s ease;
}

/* AEM fuerza el font-family de encabezados; lo restauramos */
.migrana-site-wrapper h1,
.migrana-site-wrapper h2,
.migrana-site-wrapper h3,
.migrana-site-wrapper h4,
.migrana-site-wrapper h5,
.migrana-site-wrapper h6 {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: 1.15;
}

/* =========================================
     BANNERS POR PÁGINA
     .bg-hero = configuración COMÚN (tamaño, posición, repeat).
     Las subclases .bg-hero-* solo cambian la imagen de fondo.
     En el HTML de cada página: <div class="hero bg-hero bg-hero-XXXX">
     ========================================= */
.migrana-site-wrapper .bg-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* HOME */
.migrana-site-wrapper .bg-hero-home {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20HOME.jpg");
}

/* ¿PUEDE SER MIGRAÑA? (Test) */
.migrana-site-wrapper .bg-hero-puede {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20HOME.jpg");
}

/* GUÍA CLARA SOBRE MIGRAÑA */
.migrana-site-wrapper .bg-hero-guia {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/gu%C3%ADa-clara-para-migra%C3%B1a/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Guia%20clara%20sobre%20Migra%C3%B1a.jpg");
}

/* MI DIARIO DE MIGRAÑA */
.migrana-site-wrapper .bg-hero-diario {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/diario-de-migra%C3%B1a/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Diario.jpg");
}

/* MIGRAÑA EN TU DÍA A DÍA */
.migrana-site-wrapper .bg-hero-dia {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/migra%C3%B1a-en-tu-dia-a-dia/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Migra%C3%B1a%20en%20tu%20d%C3%ADa%20a%20d%C3%ADa.jpg");
}

/* RESOLVAMOS TUS DUDAS (FAQ) */
.migrana-site-wrapper .bg-hero-faq {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/resolvamos-tus-dudas/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Resolvamos%20tus%20dudas.jpg");
  background-position: right center; /* mantiene a la persona visible a la derecha */
}

/* Compatibilidad: si aún usás la clase antigua .bg-hero sola,
   mantiene el banner HOME por defecto. */
.migrana-site-wrapper .bg-hero:not([class*="bg-hero-"]) {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20HOME.jpg");
}

/* ---------- RESPONSIVE DE BANNERS ----------
   En móvil cada banner usa su PROPIA imagen (versión mobile).
   Reemplazá cada REEMPLAZAR_URL_*_MOBILE por la URL correspondiente.
   El alto del .hero también se reduce. */
@media (max-width: 1000px) {
  .migrana-site-wrapper .hero {
    min-height: 420px;
  }
}
@media (max-width: 600px) {
  .migrana-site-wrapper .hero {
    min-height: 340px;
  }

  /* HOME */
  .migrana-site-wrapper .bg-hero-home {
    background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20HOME.jpg");
  }
  /* ¿PUEDE SER MIGRAÑA? (Test) */
  .migrana-site-wrapper .bg-hero-puede {
    background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20HOME.jpg");
  }
  /* GUÍA CLARA SOBRE MIGRAÑA */
  .migrana-site-wrapper .bg-hero-guia {
    background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/gu%C3%ADa-clara-para-migra%C3%B1a/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Guia%20clara%20sobre%20Migra%C3%B1a%20Mobile.jpg");
  }
  /* MI DIARIO DE MIGRAÑA */
  .migrana-site-wrapper .bg-hero-diario {
    background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/diario-de-migra%C3%B1a/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Diario%20Mobile.jpg");
  }
  /* MIGRAÑA EN TU DÍA A DÍA */
  .migrana-site-wrapper .bg-hero-dia {
    background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/migra%C3%B1a-en-tu-dia-a-dia/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Migra%C3%B1a%20en%20tu%20d%C3%ADa%20a%20d%C3%ADa%20Mobile.jpg");
  }
  /* RESOLVAMOS TUS DUDAS (FAQ) */
  .migrana-site-wrapper .bg-hero-faq {
    background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/resolvamos-tus-dudas/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Resolvamos%20tus%20dudas%20Mobile.jpg");
  }
}


.migrana-site-wrapper .bg-test {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Entendiendo%20la%20Migra%C3%B1a%20-%20Banner%20Test.jpg");
}

.migrana-site-wrapper .bg-test-img {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/%C2%BFPuede%20ser%20Migra%C3%B1a_.png");
}
.migrana-site-wrapper .bg-card-guia {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Guia%20clara%20sobre%20Migra%C3%B1a.png");
}
.migrana-site-wrapper .bg-card-diario {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Mi%20Diario%20de%20Migra%C3%B1a.png");
}
.migrana-site-wrapper .bg-card-dia {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/Migra%C3%B1a%20en%20tu%20d%C3%ADa%20a%20d%C3%ADa.png");
}
.migrana-site-wrapper .bg-faq-img {
  background-image: url("/content/dam/abbvie-sitegenerator-ous/entendiendolamigrana/co/es/entendiendo-la-migra%C3%B1a/assets-generales/APLICAR.png");
}

/* =========================================
     ACTIVACIÓN DEL MODO ALIVIO (ON)
     Al activar el switch, reescribimos las variables
     ========================================= */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) {
  /* --- Marca (versión atenuada para fondo oscuro) --- */
  --navy: #04100e;
  --teal: #3fb89c; /* Verde más claro: mejor contraste sobre fondo oscuro */
  --teal-dark: #0d5c4c;
  --light-mint: #0d2622;

  /* --- Fondos --- */
  --white: #0a1c19;
  --pure-white: #0d2420;
  --surface-muted: #0d2622;
  --border-soft: #1d3b35;
  --border-hairline: #16302b;
  --border-image: #2a6ca8;

  /* --- Texto ---
     Todo el texto usa blanco suave: nunca #fff puro ni negro.
     Menos brillo = mejor para fotofobia. */
  --text-dark: #d4dad7;
  --text-body: #b9c4bf; /* Cuerpo: gris verdoso más visible (antes #cccccc apagado) */
  --text-on-dark: #d4dad7;
  --text-on-hero: #d4dad7;
  --text-on-color: #d4dad7; /* NUNCA blanco puro en Modo Alivio */

  /* --- Gradientes (versión oscura) --- */
  --gradient-switch: linear-gradient(90deg, #04100e 0%, #0d2622 100%);
  --gradient-brand: linear-gradient(180deg, #04100e 27.77%, #0d5c4c 100%);
  --gradient-soft: linear-gradient(180deg, #0a1c19 0%, #0d2420 100%);
  --gradient-mint: linear-gradient(180deg, #0d2420 0%, #0d2622 100%);

  /* --- Sombra: se reemplaza por borde --- */
  --shadow: none;

  /* Blanco suave (no puro) para reducir brillo agresivo en fotofobia */
  --soft-white: #d4dad7;
  /* Verde de acento matizado (menos saturado) para los spans de los títulos */
  --teal-accent: #7ec4b2;

  /* --- Filtro de imágenes ---
     Tiñe fotos hacia el verde y baja brillo.
     AFECTA: toda imagen con .img-alivio y las de secciones informativas. */
  --img-filter: grayscale(60%) sepia(50%) hue-rotate(110deg) brightness(60%)
    contrast(85%);
  --bg-filter: grayscale(50%) brightness(70%) contrast(85%);

  /* --- Apoyo --- */
  --dot-inactive: var(--dot-inactive);
  --bar-legal-bg: #0d2622;
  --bar-legal-text: #b9c4bf;
}

/* Convierte los blancos puros fijos (#fff) en blanco suave al activar Modo Alivio,
   para reducir el brillo intenso (molesto en fotofobia). */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .cta h2,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .switch-container,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-test-navy,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-navy,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .intro p,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .migrana-section-gradient .section-title {
  color: var(--soft-white) !important;
}
/* El párrafo del CTA, ya tenue, lo bajamos un poco más para que no compita */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .cta p {
  color: rgba(212, 218, 215, 0.75) !important;
}

/* Textos que en modo claro son navy (var(--navy)) quedarían casi negros e ilegibles
   sobre el fondo oscuro del Modo Alivio. Los reasignamos a blanco suave.
   Cubre: hero h1, intro <strong>, títulos de sección, h3/subtítulos de cards. */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .hero h1,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .intro p strong,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .intro-note,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .div-title,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .section-title,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .card-body h3,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .test-card h3,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .content-card h3,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .content-card .subtitle {
  color: var(--soft-white) !important;
}
/* Conservamos el ACENTO verde en las palabras resaltadas (span) de los títulos,
   pero matizado (--teal-accent) para que no compita con el texto en Modo Alivio */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .div-title span,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .section-title span,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .hero h1 span,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .content-card h3 span,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-card h3 span {
  color: var(--teal-accent) !important;
}

.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .img-alivio {
  filter: var(--img-filter);
}

.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .bg-alivio {
  filter: var(--bg-filter);
}

.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #042621;
  opacity: 0.6;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Capa de oscurecimiento en el CTA para que el texto no se lave en Modo Alivio */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #04100e;
  opacity: 0.7;
  z-index: 1;
}

/* En Modo Alivio el botón blanco del CTA queda oscuro sobre oscuro (ilegible).
   Lo dejamos teal con texto blanco, igual que los botones de las secciones de arriba. */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-cta {
  background: var(--teal);
  color: var(--text-on-color) !important;
}

/* =========================================
   SWITCH MODO ALIVIO — MÁS CLARO Y VISIBLE
   ========================================= */

.switch-container {
  background: var(--gradient-switch);
  color: var(--text-on-color);
  padding: 16px 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(7, 29, 73, 0.22);
  transition: background 0.4s ease;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  max-width: 100%;
}

.switch-global-alivio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.theme-slider {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 350px;
  padding: 12px 14px 12px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(26, 201, 168, 0.18);
  transition: all 0.3s ease;
}

.theme-switch:hover .theme-slider {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(26, 201, 168, 0.28);
}

.switch-copy {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}

.switch-title {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-color);
}

.switch-subtitle {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.switch-track {
  position: relative;
  width: 120px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.18) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.switch-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  z-index: 2;
  transition: all 0.25s ease;
}

.switch-label-on {
  left: 0;
  color: rgba(255, 255, 255, 0.65);
}

.switch-label-off {
  right: 0;
  color: var(--text-on-color);
}

.switch-knob {
  position: absolute;
  top: 5px;
  left: 63px; /* OFF por defecto */
  width: 48px;
  height: 44px;
  border-radius: 999px;
  background: var(--gradient-soft);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.25),
    0 0 14px rgba(255, 255, 255, 0.35);
  z-index: 1;
  transition: all 0.35s ease;
}

/* Estado checked = ON */
#modoAlivioGlobal:checked + .theme-slider .switch-knob {
  left: 5px;
  background: var(--gradient-mint);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.22),
    0 0 16px rgba(26, 201, 168, 0.55);
}

#modoAlivioGlobal:checked + .theme-slider .switch-label-on {
  color: var(--text-on-color);
}

#modoAlivioGlobal:checked + .theme-slider .switch-label-off {
  color: rgba(255, 255, 255, 0.55);
}

/* Estado normal = OFF */
#modoAlivioGlobal:not(:checked) + .theme-slider .switch-label-off {
  color: var(--text-on-color);
}

#modoAlivioGlobal:not(:checked) + .theme-slider .switch-label-on {
  color: rgba(255, 255, 255, 0.55);
}

/* foco accesible */
.switch-global-alivio:focus-visible + .theme-slider {
  outline: 3px solid rgba(26, 201, 168, 0.85);
  outline-offset: 4px;
}

/* Cuando está activo el modo alivio */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .switch-container {
  background: linear-gradient(90deg, #04100e 0%, #0d2622 100%);
}

.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .theme-slider {
  background: rgba(18, 139, 116, 0.18);
  border-color: rgba(26, 201, 168, 0.45);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 24px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(26, 201, 168, 0.22);
}

/* Responsive */
@media (max-width: 600px) {
  .switch-container {
    padding: 14px 20px;
    justify-content: center;
  }

  .theme-slider {
    width: 100%;
    min-width: 0;
    gap: 12px;
    padding: 12px 12px 12px 16px;
  }

  .switch-title {
    font-size: 13px;
  }

  .switch-subtitle {
    font-size: 10px;
  }

  .switch-track {
    width: 108px;
    height: 50px;
  }

  .switch-knob {
    width: 42px;
    height: 40px;
    left: 61px;
  }

  #modoAlivioGlobal:checked + .theme-slider .switch-knob {
    left: 5px;
  }
}

/* Topbar / Nav */
.migrana-site-wrapper .topbar {
  background: var(--bar-legal-bg);
  color: var(--bar-legal-text);
  font-size: 16px;
  text-align: center;
  padding: 8px 16px;
}
.migrana-site-wrapper nav {
  background: var(--pure-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.5s ease;
}
.migrana-site-wrapper .logo-word-top {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.migrana-site-wrapper .logo-main {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.migrana-site-wrapper .logo-main span {
  color: var(--teal);
}
.migrana-site-wrapper .nav-links {
  display: flex;
  gap: clamp(16px, 2.2vw, 36px);
  list-style: none;
}
.migrana-site-wrapper .nav-links a {
  text-decoration: none;
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-dark);
  transition: color 0.2s;
}
.migrana-site-wrapper .nav-links a:hover {
  color: var(--teal);
}

/* =========================================
     HERO
     ========================================= */
.migrana-site-wrapper .hero {
  position: relative;
  min-height: 570px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: filter 0.5s ease;
}
.migrana-site-wrapper .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.migrana-site-wrapper .hero h1 {
  font-size: clamp(38px, 4.2vw, 60px) !important;
  font-weight: 400;
  color: var(--text-on-color);
  line-height: 1.08;
  max-width: 560px;
}
.migrana-site-wrapper .hero h1 span {
  color: var(--teal);
  font-weight: 900;
}

/* =========================================
     INTRO
     ========================================= */
.migrana-site-wrapper .intro {
  background: var(--white);
  padding: 56px var(--gutter);
  text-align: center;
  transition: background 0.5s ease;
}
.migrana-site-wrapper .intro-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.migrana-site-wrapper .intro p {
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.33;
  color: var(--navy);
  font-weight: 400;
}
.migrana-site-wrapper .intro p strong {
  color: var(--navy);
  font-weight: 700;
}
.migrana-site-wrapper .intro-note {
  margin-top: 24px;
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 18px !important;
  color: var(--navy);
  font-style: normal;
}

/* Títulos de sección grandes (55px en Figma) */
.migrana-site-wrapper .div-title,
.migrana-site-wrapper .section-title {
  text-align: center;
  font-size: clamp(34px, 3.9vw, 55px) !important;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 48px;
}
.migrana-site-wrapper .div-title span,
.migrana-site-wrapper .section-title span {
  color: var(--teal);
  font-weight: 900;
}

/* =========================================
     CARDS (¿Qué necesitas hoy?)
     ========================================= */
.migrana-site-wrapper .needs {
  background: var(--white);
  padding: 40px var(--gutter) 72px;
  transition: background 0.5s ease;
}
.migrana-site-wrapper .cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.migrana-site-wrapper .card {
  background: var(--pure-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.5s ease;
}
.migrana-site-wrapper .card:hover {
  transform: translateY(-4px);
}
/* La imagen YA ES el cabezal completo (banda + círculo + ícono) */
.migrana-site-wrapper .card-icon-img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}
.migrana-site-wrapper .card-body {
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.migrana-site-wrapper .card-body h3 {
  font-size: 22px !important;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 14px;
  line-height: 1.15;
}
.migrana-site-wrapper .card-body p {
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-body);
  flex: 1;
  margin-bottom: 22px;
}

/* =========================================
     BOTONES
     ========================================= */
.migrana-site-wrapper .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--btn-radius);
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
  border: none;
  white-space: nowrap;
}
/* Botón verde de las cards: texto NAVY (no blanco) — fiel a Figma */
.migrana-site-wrapper .btn-teal {
  background: var(--teal);
  color: var(--navy);
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.migrana-site-wrapper .btn-teal:hover {
  background: var(--teal-dark);
  color: var(--text-on-color);
  transform: translateY(-1px);
}
.migrana-site-wrapper .btn-arrow::after {
  content: "›";
  font-size: 1.4em;
  line-height: 0;
  font-weight: 700;
}

/* =========================================
     ¿PUEDE SER MIGRAÑA? (Gradiente)
     ========================================= */
.migrana-site-wrapper .migrana-section-gradient {
  background: var(--gradient-brand);
  padding: 72px var(--gutter);
  transition: background 0.5s ease;
}
.migrana-site-wrapper .migrana-section-gradient .section-title {
  color: var(--text-on-color);
}
.migrana-site-wrapper .migrana-section-gradient .section-title span {
  color: var(--teal);
}

.migrana-site-wrapper .test-card {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 48px;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.migrana-site-wrapper .test-card h3 {
  font-size: 30px !important;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.22;
}
.migrana-site-wrapper .test-card p {
  font-size: 25px;
  line-height: 1.4;
  color: var(--text-body);
  margin-bottom: 32px;
}
.migrana-site-wrapper .test-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.migrana-site-wrapper .action-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.migrana-site-wrapper .test-icon svg {
  width: 35px;
  height: auto;
  transition:
    fill 0.5s ease,
    stroke 0.5s ease;
}
/* Los íconos del test perdieron su <mask> al pegarse en AEM (igual que el CTA).
   1er ícono: quedaron varios "marcos" (cuadros) + el dibujo. Ocultamos todos los
   paths y mostramos solo el último (el ícono real), en teal para que contraste
   en ambos modos. */
.migrana-site-wrapper .action-group:first-child .test-icon svg path {
  fill: none;
  stroke: none;
}
.migrana-site-wrapper .action-group:first-child .test-icon svg path:last-child {
  fill: var(--teal);
}
/* 2do ícono (check): es un solo path; solo lo coloreamos con el texto principal,
   que ya es oscuro en modo normal y claro en Modo Alivio (adaptativo). */
.migrana-site-wrapper .action-group:nth-child(2) .test-icon svg path {
  fill: var(--text-dark);
  stroke: none;
}
.migrana-site-wrapper .btn-test-teal {
  background: var(--teal);
  color: var(--navy);
  padding: 11px 22px;
  border-radius: var(--btn-radius);
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.5s ease;
}
.migrana-site-wrapper .btn-test-navy {
  background: var(--navy);
  color: var(--text-on-color) !important;
  padding: 11px 22px;
  border-radius: var(--btn-radius);
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.5s ease;
}
.migrana-site-wrapper .test-photo {
  width: 100%;
  height: 100%;
  min-height: 242px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  transition: filter 0.5s ease;
}

.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .test-card {
  box-shadow: none;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-test-teal {
  color: var(--text-on-color);
}

/* =========================================
     3 CARDS DE CONTENIDO
     ========================================= */
.migrana-site-wrapper .three-cards {
  background: var(--white);
  padding: 72px var(--gutter);
  transition: background 0.5s ease;
}
.migrana-site-wrapper .three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.migrana-site-wrapper .content-card {
  background: var(--pure-white);
  border-radius: var(--card-radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.migrana-site-wrapper .content-card h3 {
  font-size: 30px !important;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
  line-height: 1.15;
}
.migrana-site-wrapper .content-card h3 span {
  color: var(--teal);
}
.migrana-site-wrapper .content-card .subtitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  line-height: 1.3;
}
.migrana-site-wrapper .content-card hr {
  border: none;
  border-bottom: 2px solid rgba(26, 201, 168, 0.5);
  margin-bottom: 18px;
}
.migrana-site-wrapper .content-card p.desc {
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-body);
  margin-bottom: 24px;
  flex: 1;
}
.migrana-site-wrapper .content-card .card-mid-img {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  margin-bottom: 22px;
  transition: filter 0.5s ease;
}
.migrana-site-wrapper .btn-navy {
  background: var(--navy);
  color: var(--text-on-color);
  width: 100%;
  justify-content: space-between;
  padding: 14px 24px;
}
.migrana-site-wrapper .btn-navy:hover {
  background: #0a2a6e;
  color: var(--text-on-color) !important;
}

/* =========================================
     FAQ
     ========================================= */
.migrana-site-wrapper .faq-section {
  background: var(--light-mint);
  padding: 72px var(--gutter);
  transition: background 0.5s ease;
}
.migrana-site-wrapper .faq-card {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 48px;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.migrana-site-wrapper .faq-card h3 {
  font-size: 30px !important;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 20px;
  line-height: 1.25;
}
.migrana-site-wrapper .faq-card h3 span {
  color: var(--teal);
}
.migrana-site-wrapper .faq-card p {
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-body);
  margin-bottom: 32px;
}
.migrana-site-wrapper .faq-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.migrana-site-wrapper .faq-icon-chat {
  flex-shrink: 0;
  line-height: 0;
}
.migrana-site-wrapper .faq-icon-chat svg {
  width: 38px;
  height: auto;
  display: block;
}
.migrana-site-wrapper .btn-faq {
  background: var(--teal);
  color: var(--navy);
  border-radius: 29.592px;
  padding: 12px 28px;
}
.migrana-site-wrapper .btn-faq:hover {
  background: var(--teal-dark);
  color: var(--text-on-color);
}
.migrana-site-wrapper .faq-photo {
  width: 100%;
  height: 100%;
  min-height: 242px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  transition: filter 0.5s ease;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-card {
  box-shadow: none;
}

/* =========================================
     CTA
     ========================================= */
.migrana-site-wrapper .cta {
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: filter 0.5s ease;
  padding: 96px var(--gutter);
  text-align: center;
  position: relative;
  min-height: 519px;
}
.migrana-site-wrapper .cta h2 {
  position: relative;
  z-index: 2;
  font-size: clamp(32px, 3.4vw, 48px) !important;
  font-weight: 700;
  color: var(--text-on-color);
  max-width: 880px;
  margin: 0 auto 24px;
  line-height: 1.22;
}
.migrana-site-wrapper .cta p {
  position: relative;
  z-index: 2;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.5;
}
.migrana-site-wrapper .cta-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.migrana-site-wrapper .cta-icon {
  line-height: 0;
  flex-shrink: 0;
}
.migrana-site-wrapper .cta-icon svg {
  width: 32px;
  height: auto;
  display: block;
}
/* Al pegar el SVG en AEM se pierde el <mask>: el primer <path> es solo el marco
   (se ve como un cuadro). Lo ocultamos y pintamos el ícono en blanco. */
.migrana-site-wrapper .cta-icon svg path {
  fill: #fff;
}
.migrana-site-wrapper .cta-icon svg path:first-child {
  fill: none;
  stroke: none;
}
.migrana-site-wrapper .btn-cta {
  position: relative;
  z-index: 2;
  background: var(--pure-white);
  color: var(--navy);
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* =========================================
     FOOTER (banda navy, todo centrado — según Figma)
     ========================================= */
.migrana-site-wrapper .migrana-footer {
  background: var(--navy);
  padding: 48px var(--gutter) 40px;
  text-align: center;
  transition: background 0.5s ease;
}
.migrana-site-wrapper .footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.migrana-site-wrapper .footer-logo {
  display: flex;
    align-items: center;
    justify-content: center;
}
.migrana-site-wrapper .footer-logo img {
  width: 230px;
  max-width: 70%;
  height: auto;
  display: block;
}
.migrana-site-wrapper .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 48px;
  list-style: none;
}
.migrana-site-wrapper .footer-links a {
  color: var(--text-on-color) !important;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}
.migrana-site-wrapper .footer-links a:hover {
  text-decoration: underline;
}
.migrana-site-wrapper .footer-legal {
  max-width: 920px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.migrana-site-wrapper .footer-legal a {
  color: var(--text-on-color);
}
.migrana-site-wrapper .footer-abbvie {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-on-color);
}

/* Footer en Modo Alivio: mismo tono de texto suave que el resto */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .footer-links a,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .footer-abbvie {
  color: var(--soft-white) !important;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .footer-legal {
  color: rgba(212, 218, 215, 0.8) !important;
}

/* =========================================
     RESPONSIVE
     ========================================= */
@media (max-width: 1000px) {
  .migrana-site-wrapper .cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .migrana-site-wrapper .three-grid {
    grid-template-columns: 1fr;
  }
  .migrana-site-wrapper .test-card,
  .migrana-site-wrapper .faq-card {
    grid-template-columns: 1fr;
  }
  .migrana-site-wrapper .test-photo,
  .migrana-site-wrapper .faq-photo {
    min-height: 200px;
  }
  .migrana-site-wrapper .nav-links {
    display: none;
  }

  /* Evita el desbordamiento de estas tarjetas en mobile: por defecto los ítems
     de un grid tienen min-width:auto y no encogen por debajo de su contenido,
     y los .btn traen white-space:nowrap. Con texto largo, el botón ensancha la
     tarjeta más que la pantalla. Aquí permitimos que todo encoja/envuelva,
     igual que las tarjetas simples de arriba. */
  .migrana-site-wrapper .three-grid > *,
  .migrana-site-wrapper .test-content,
  .migrana-site-wrapper .test-photo,
  .migrana-site-wrapper .faq-content,
  .migrana-site-wrapper .faq-photo {
    min-width: 0;
  }
  .migrana-site-wrapper .faq-actions {
    flex-wrap: wrap;
  }
  .migrana-site-wrapper .btn-navy,
  .migrana-site-wrapper .btn-faq,
  .migrana-site-wrapper .btn-test-teal,
  .migrana-site-wrapper .btn-test-navy,
  .migrana-site-wrapper .btn-cta {
    white-space: normal;
  }
}
@media (max-width: 600px) {
  .migrana-site-wrapper .cards-grid {
    grid-template-columns: 1fr;
  }
  .migrana-site-wrapper .footer-links {
    gap: 12px 28px;
  }
  .migrana-site-wrapper .footer-legal {
    font-size: 14px;
  }
  .migrana-site-wrapper .footer-abbvie {
    font-size: 20px;
  }
  .migrana-site-wrapper .test-card,
  .migrana-site-wrapper .faq-card {
    padding: 28px;
  }
}

/* =========================================================
     TEST DE SÍNTOMAS — FLUJO INTERACTIVO
     Pre-test · Preguntas (1-7) · Resultados
     Usa los mismos tokens del sitio: --navy, --teal,
     --teal-dark, --pure-white, --card-radius, --btn-radius.
     Compatible con Modo Alivio vía :has(#modoAlivioGlobal:checked).
     Pegar al FINAL de main.css.
     ========================================================= */

/* ---------- Contenedores de cada etapa ---------- */
.migrana-site-wrapper .main__container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px var(--gutter) 72px;
}

/* El JS conmuta display entre etapas. Estado inicial:
   solo pre-test visible; test y resultados ocultos. */
.migrana-site-wrapper .main__container.test,
.migrana-site-wrapper .main__container.resultados {
  display: none;
}

/* ---------- Tarjeta base (reutilizada por las 3 etapas) ---------- */
.migrana-site-wrapper .main__container .test-box {
  background: var(--pure-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 48px;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}

/* ---------- Títulos y textos de etapa ---------- */
.migrana-site-wrapper .main__container h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.22;
  margin-bottom: 18px;
}
.migrana-site-wrapper .main__container h2 span {
  color: var(--teal);
}
.migrana-site-wrapper .main__container p {
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-body);
  margin-bottom: 24px;
}

/* =========================================================
     BARRA DE AVANCE (círculos + líneas)
     El JS agrega/quita la clase .done a .circulo y .linea.
     ========================================================= */
.migrana-site-wrapper .avance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 8px auto 40px;
  max-width: 640px;
}
.migrana-site-wrapper .avance .circulo {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--light-mint);
  border: 2px solid var(--teal);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}
.migrana-site-wrapper .avance .linea {
  flex: 1 1 auto;
  height: 4px;
  min-width: 24px;
  background: var(--light-mint);
  border-radius: 999px;
  transition: background 0.3s ease;
}
.migrana-site-wrapper .avance .circulo.done {
  background: var(--teal);
  border-color: var(--teal);
}
.migrana-site-wrapper .avance .linea.done {
  background: var(--teal);
}

/* =========================================================
     PREGUNTAS
     El JS muestra solo .pregunta-N a la vez (display block/none).
     ========================================================= */
.migrana-site-wrapper .preguntas > [class*="pregunta-"] {
  display: none;
}
.migrana-site-wrapper .preguntas .pregunta-1 {
  display: block; /* primera pregunta visible al iniciar */
}
.migrana-site-wrapper .preguntas h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 24px;
}

/* ---------- Opciones (radios) ---------- */
.migrana-site-wrapper .preguntas label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 2px solid var(--light-mint);
  border-radius: 14px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-body);
  background: var(--pure-white);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.migrana-site-wrapper .preguntas label:hover {
  border-color: var(--teal);
}
.migrana-site-wrapper .preguntas input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--teal);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
}
.migrana-site-wrapper .preguntas input[type="radio"]:checked {
  border-color: var(--teal);
}
.migrana-site-wrapper .preguntas input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--teal);
}
/* Resalta la opción marcada (label que contiene el radio checked) */
.migrana-site-wrapper .preguntas label:has(input[type="radio"]:checked) {
  border-color: var(--teal);
  background: var(--light-mint);
}

/* =========================================================
     BOTONES DEL TEST (.btn-migrania)
     Coherentes con .btn-test-teal / .btn-test-navy del sitio.
     ========================================================= */
.migrana-site-wrapper .btn-migrania,
.migrana-site-wrapper .start-test,
.migrana-site-wrapper .return-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--btn-radius);
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    visibility 0s;
}

/* Primario (teal): iniciar, siguiente, descargar */
.migrana-site-wrapper .start-test,
.migrana-site-wrapper .btn-migrania.next,
.migrana-site-wrapper .btn-migrania.descargar-resultados {
  background: var(--teal);
  color: var(--navy);
}
.migrana-site-wrapper .start-test:hover,
.migrana-site-wrapper .btn-migrania.next:hover,
.migrana-site-wrapper .btn-migrania.descargar-resultados:hover {
  background: var(--teal-dark);
  color: var(--text-on-color);
  transform: translateY(-1px);
}

/* Secundario (contorno navy): anterior, volver */
.migrana-site-wrapper .btn-migrania.prev,
.migrana-site-wrapper .return-test {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.migrana-site-wrapper .btn-migrania.prev:hover,
.migrana-site-wrapper .return-test:hover {
  background: var(--navy);
  color: var(--text-on-color);
}

/* Fila de navegación anterior / siguiente */
.migrana-site-wrapper .test-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* =========================================================
     RESULTADOS
     El JS inyecta .grado, .grado-descr y .grado-advice.
     ========================================================= */
.migrana-site-wrapper .main__container.resultados .test-box {
  text-align: center;
}
.migrana-site-wrapper .main__container.resultados .grado {
  font-size: 42px;
  font-weight: 900;
  color: var(--teal);
  line-height: 1.1;
  margin-bottom: 8px;
}
.migrana-site-wrapper .main__container.resultados .grado-descr {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}
.migrana-site-wrapper .main__container.resultados .grado-advice {
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-body);
  margin: 0 auto 32px;
}
.migrana-site-wrapper .main__container.resultados .resultados-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================================
     MODO ALIVIO (dark) — ajustes de contraste
     Los tokens ya cambian solos; aquí solo suavizamos
     sombras y blancos puros, como el resto del sitio.
     ========================================================= */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .main__container .test-box {
  box-shadow: none;
  border: 1px solid var(--light-mint);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .preguntas label {
  background: var(--pure-white);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .start-test,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-migrania.next,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-migrania.descargar-resultados {
  color: var(--text-dark); /* gris apagado del sistema, legible sobre verde */
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .btn-migrania.prev,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .return-test {
  color: var(--text-dark);
  border-color: var(--text-dark);
}
/* Modo Alivio: textos que estaban en navy (casi negro) pasan al gris claro
   del sistema, para que sean legibles sobre el fondo oscuro. */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .main__container h2,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .preguntas h3,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .main__container.resultados .grado-descr,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .resultados-card .grado-descr {
  color: var(--text-dark);
}

/* =========================================================
     RESPONSIVE
     ========================================================= */
@media (max-width: 768px) {
  .migrana-site-wrapper .main__container {
    padding: 40px var(--gutter) 56px;
  }
  .migrana-site-wrapper .main__container .test-box {
    padding: 28px 20px;
  }
  .migrana-site-wrapper .main__container h2 {
    font-size: 24px;
  }
  .migrana-site-wrapper .preguntas h3 {
    font-size: 20px;
  }
  .migrana-site-wrapper .avance .circulo {
    width: 20px;
    height: 20px;
  }
  .migrana-site-wrapper .test-nav {
    flex-direction: row;
  }
  .migrana-site-wrapper .btn-migrania,
  .migrana-site-wrapper .start-test,
  .migrana-site-wrapper .return-test {
    font-size: 16px;
    padding: 11px 20px;
  }
  .migrana-site-wrapper .main__container.resultados .grado {
    font-size: 34px;
  }
}

/* =========================================================
     LAYOUT SPLIT (imagen izquierda + contenido derecha)
     Usado en pre-test y en la card de resultados.
     Card oscura sobre navy, fiel al diseño de Figma.
     ========================================================= */
.migrana-site-wrapper .main__container .test-box--split {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 40px;
  align-items: center;
  background: var(--navy);
  padding: 40px;
}
.migrana-site-wrapper .test-media {
  width: 100%;
}
.migrana-site-wrapper .test-media-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  border: 3px solid var(--teal);
}
.migrana-site-wrapper .test-box--split .test-body h2 {
  color: var(--text-on-color);
  font-size: 32px;
  margin-bottom: 20px;
}
.migrana-site-wrapper .test-box--split .test-body h2 span {
  color: var(--teal);
}
.migrana-site-wrapper .test-box--split .test-body p {
  color: #d4dad7;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.migrana-site-wrapper .test-box--split .test-body p strong {
  color: var(--teal);
  font-weight: 700;
}

/* =========================================================
     RESULTADOS — card BLANCA (fondo claro)
     Sobrescribe el fondo navy de .test-box--split.
     ========================================================= */
.migrana-site-wrapper .main__container.resultados .resultados-card {
  background: var(--pure-white);
}
.migrana-site-wrapper .resultados-card .test-body {
  text-align: center;
}
.migrana-site-wrapper .resultados-eyebrow {
  color: var(--teal) !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px !important;
  text-align: center;
}
.migrana-site-wrapper .resultados-card .grado {
  font-size: 44px;
  font-weight: 900;
  color: var(--teal);
  line-height: 1.1;
  margin-bottom: 2px;
  text-align: left;
}
.migrana-site-wrapper .resultados-card .grado-descr {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 20px;
  text-align: left;
}
.migrana-site-wrapper .resultados-card .grado-advice {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-body);
  max-width: none;
  margin: 0 0 28px;
  text-align: left;
}
.migrana-site-wrapper .resultados-nota {
  font-size: 15px !important;
  color: var(--text-body) !important;
  opacity: 0.7;
  text-align: left;
  margin: 18px 0 12px !important;
}

/* Botones de descarga: en UNA fila, del MISMO tamaño */
.migrana-site-wrapper .resultados-card .resultados-actions {
  justify-content: center;
  margin-bottom: 4px;
}
.migrana-site-wrapper .resultados-card .resultados-botones {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}
.migrana-site-wrapper .resultados-card .resultados-botones .btn-migrania {
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
  text-align: center;
}
/* Ambos botones de descarga: MISMO diseño.
   Modo normal (blanco): teal de fondo, texto navy. */
.migrana-site-wrapper .resultados-card .btn-migrania.descargar-resultados,
.migrana-site-wrapper .resultados-card .btn-migrania.descargar-diarios-de-cefaleas {
  background: var(--teal);
  color: var(--navy);
  border: 2px solid var(--teal);
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.migrana-site-wrapper .resultados-card .btn-migrania.descargar-resultados:hover,
.migrana-site-wrapper .resultados-card .btn-migrania.descargar-diarios-de-cefaleas:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--text-on-color);
  transform: translateY(-1px);
}
/* Modo Alivio: texto NO oscuro sobre el verde (ilegible).
   Usamos el blanco suave / gris apagado del sistema. */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .resultados-card .btn-migrania.descargar-resultados,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .resultados-card .btn-migrania.descargar-diarios-de-cefaleas {
  color: var(--text-dark);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .resultados-card .btn-migrania.descargar-resultados:hover,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .resultados-card .btn-migrania.descargar-diarios-de-cefaleas:hover {
  color: var(--text-dark);
}

/* =========================================================
     BLOQUE MIDAS (info general + referencia + disclaimer)
     ========================================================= */
.migrana-site-wrapper .midas-info {
  max-width: var(--content-max);
  margin: 32px auto 0;
  padding: 0 8px;
}
.migrana-site-wrapper .midas-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.migrana-site-wrapper .midas-info p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
  margin-bottom: 12px;
}
.migrana-site-wrapper .midas-info ul {
  margin: 0 0 16px 20px;
}
.migrana-site-wrapper .midas-info li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}
.migrana-site-wrapper .midas-info li strong {
  color: var(--text-dark);
}
.migrana-site-wrapper .midas-ref {
  font-size: 13px !important;
  color: var(--text-body);
}
.migrana-site-wrapper .midas-disclaimer {
  font-size: 13px !important;
  color: var(--text-body);
  border-top: 1px solid var(--light-mint);
  padding-top: 16px;
  margin-top: 16px !important;
}
.migrana-site-wrapper .resultados-reiniciar {
  margin-top: 24px;
}

/* Modo Alivio: la card split ya es oscura; solo suavizamos borde imagen */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .test-media-img {
  border-color: var(--teal);
}

/* Responsive: split se apila en una columna */
@media (max-width: 768px) {
  .migrana-site-wrapper .main__container .test-box--split {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 24px;
    padding: 24px;
    align-items: stretch;
  }
  /* La imagen ya no se estira: altura automática con proporción fija */
  .migrana-site-wrapper .test-media {
    width: 100%;
    height: auto;
  }
  .migrana-site-wrapper .test-media-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 320px;
    object-fit: cover;
  }
  .migrana-site-wrapper .test-box--split .test-body {
    text-align: left;
  }
  .migrana-site-wrapper .test-box--split .test-body h2 {
    font-size: 26px;
  }
  .migrana-site-wrapper .resultados-card .grado {
    font-size: 32px;
  }
  .migrana-site-wrapper .resultados-card .grado-descr {
    font-size: 22px;
  }
  /* Botones de descarga: apilados a ancho completo en móvil */
  .migrana-site-wrapper .resultados-card .resultados-botones {
    flex-direction: column;
  }
  .migrana-site-wrapper .resultados-card .resultados-botones .btn-migrania {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}
/* =========================================================
     SECCIÓN FAQ — "Resolvamos tus Dudas"
     Acordeones (una pregunta abierta a la vez).
     Movimiento controlado por faq-accordion.js.
     Colores vía tokens: funciona en modo normal y Modo Alivio.
     ========================================================= */
.migrana-site-wrapper .faq-intro {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--gutter) 8px;
  text-align: center;
}
.migrana-site-wrapper .faq-intro h2 {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}

.migrana-site-wrapper .faq-list {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Item de acordeón ---------- */
.migrana-site-wrapper .faq-item {
  background: var(--pure-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

/* Cabecera (botón que abre/cierra) */
.migrana-site-wrapper .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  transition: color 0.2s ease;
}
.migrana-site-wrapper .faq-question:hover {
  color: var(--teal-dark);
}

/* Flecha (chevron) */
.migrana-site-wrapper .faq-chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform 0.3s ease;
}
.migrana-site-wrapper .faq-chevron::before,
.migrana-site-wrapper .faq-chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 2.5px;
  background: var(--teal);
  border-radius: 2px;
}
.migrana-site-wrapper .faq-chevron::before {
  left: 1px;
  transform: rotate(45deg);
}
.migrana-site-wrapper .faq-chevron::after {
  right: 1px;
  transform: rotate(-45deg);
}
/* Abierto: gira la flecha */
.migrana-site-wrapper .faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

/* Cuerpo desplegable: animación por max-height (controlada por JS) */
.migrana-site-wrapper .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.migrana-site-wrapper .faq-answer-inner {
  padding: 0 28px 26px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
}
.migrana-site-wrapper .faq-answer-inner p {
  margin-bottom: 12px;
}
.migrana-site-wrapper .faq-answer-inner strong {
  color: var(--text-dark);
  font-weight: 700;
}
.migrana-site-wrapper .faq-answer-inner ul {
  margin: 0 0 14px 20px;
}
.migrana-site-wrapper .faq-answer-inner li {
  margin-bottom: 8px;
}

/* Caja destacada dentro de una respuesta (Importante / Recuerda) */
.migrana-site-wrapper .faq-callout {
  background: var(--teal-dark);
  color: var(--text-on-color);
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 8px;
}
.migrana-site-wrapper .faq-callout strong {
  color: var(--text-on-color) !important;
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

/* Referencias: texto chico y apagado */
.migrana-site-wrapper .faq-refs {
  font-size: 12px !important;
  color: var(--text-body);
  opacity: 0.7;
  margin-top: 10px;
  margin-bottom: 0 !important;
}

/* ---------- MODO ALIVIO ---------- */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-intro h2,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-question {
  color: var(--text-dark);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-item {
  border: 1px solid var(--light-mint);
  box-shadow: none;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-callout {
  color: var(--text-dark);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-callout strong {
  color: var(--text-dark) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .migrana-site-wrapper .faq-intro h2 {
    font-size: 26px;
  }
  .migrana-site-wrapper .faq-question {
    font-size: 17px;
    padding: 20px 20px;
  }
  .migrana-site-wrapper .faq-answer-inner {
    padding: 0 20px 22px;
    font-size: 16px;
  }
}

/* =========================================================
     BANNER FAQ — texto dentro, alineado a la izquierda
     Título superior + subtítulo teal + intro, sobre la imagen.
     ========================================================= */

.migrana-site-wrapper .faq-hero-title {
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 800;
  color: var(--text-on-color);
  line-height: 1.1;
  margin-bottom: 18px;
  max-width: none;
}
.migrana-site-wrapper .faq-hero-title span {
  color: var(--teal);
  font-weight: 800;
}
.migrana-site-wrapper .faq-hero-subtitle {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  color: var(--teal);
  line-height: 1.15;
  margin-bottom: 22px;
}
.migrana-site-wrapper .faq-hero-intro {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--text-on-hero);
  max-width: 480px;
  margin-bottom: 0;
}

/* Modo Alivio: el banner ya es oscuro; matizamos el teal del subtítulo */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-hero-subtitle {
  color: var(--teal-accent);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .faq-hero-title span {
  color: var(--teal-accent);
}



/* =========================================================
     SECCIONES INFORMATIVAS (Guía / Diario)
     Bloques reutilizables: banner con texto a la izq (.info-hero),
     tarjetas split imagen+texto (.info-card), lista de iconos,
     tarjetas de tipos, fases en columnas y callouts.
     Todo con tokens → funciona en normal y Modo Alivio.
     ========================================================= */

/* ---------- Banner con texto dentro, a la izquierda ---------- */
.migrana-site-wrapper * .hero-content {
  max-width: none;
}
.migrana-site-wrapper * .hero-content * {
  max-width: max(500px,50vw);
}
/* Responsive: en móvil el texto ocupa todo el ancho */
@media (max-width: 768px) {
  .migrana-site-wrapper * .hero-content  * {
    max-width: 100%;
  }
  .migrana-site-wrapper .faq-hero-intro {
    max-width: 100%;
  }
}

.migrana-site-wrapper .info-hero-title {
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 800;
  color: var(--text-on-color);
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: none;
}
.migrana-site-wrapper .info-hero-title span { color: var(--teal); }
.migrana-site-wrapper .info-hero-subtitle {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--teal);
  line-height: 1.15;
  margin-bottom: 20px;
}
.migrana-site-wrapper .info-hero-intro {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--text-on-hero);
  max-width: 520px;
  margin-bottom: 0;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-hero-subtitle,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-hero-title span {
  color: var(--teal);
}

/* ---------- Nota educativa centrada bajo el banner ---------- */
.migrana-site-wrapper .info-note {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--gutter);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.migrana-site-wrapper .info-note span { color: var(--teal); }
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-note {
  color: var(--text-dark);
}

/* ---------- Contenedor de sección ---------- */
.migrana-site-wrapper .info-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.migrana-site-wrapper .info-section-title {
  text-align: center;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.migrana-site-wrapper .info-section-title span { color: var(--teal); }
.migrana-site-wrapper .info-section-sub {
  text-align: center;
  font-size: 18px;
  color: var(--text-body);
  margin-top: -18px;
  margin-bottom: 8px;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-section-title {
  color: var(--text-dark);
}

/* ---------- Tarjeta split: imagen + texto ---------- */
.migrana-site-wrapper .info-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--pure-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 40px;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.migrana-site-wrapper .info-card.reverse {
  grid-template-columns: 1fr 300px;
}
.migrana-site-wrapper .info-card.reverse .info-card-media { order: 2; }
.migrana-site-wrapper .info-card-media-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  border: 3px solid var(--teal);
}
.migrana-site-wrapper .info-card-body h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
}
.migrana-site-wrapper .info-card-body h3 span { color: var(--teal); }
.migrana-site-wrapper .info-card-body p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 12px;
}
.migrana-site-wrapper .info-card-body strong { color: var(--text-dark); }
.migrana-site-wrapper .info-card-body .lead-teal { color: var(--teal); font-weight: 700; }
.migrana-site-wrapper .info-card-body ul,
.migrana-site-wrapper .info-card-body ol {
  margin: 0 0 12px 20px;
}
.migrana-site-wrapper .info-card-body li {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 8px;
}

/* Variante NAVY de la tarjeta (fondo oscuro, texto claro) */
.migrana-site-wrapper .info-card.navy {
  background: var(--navy);
}
.migrana-site-wrapper .info-card.navy .info-card-body h3 { color: var(--text-on-color); }
.migrana-site-wrapper .info-card.navy .info-card-body h3 span { color: var(--teal); }
.migrana-site-wrapper .info-card.navy .info-card-body p,
.migrana-site-wrapper .info-card.navy .info-card-body li { color: #d4dad7; }
.migrana-site-wrapper .info-card.navy .info-card-body strong { color: var(--text-on-color); }

.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-card {
  box-shadow: none;
  border: 1px solid var(--light-mint);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-card-body h3 {
  color: var(--text-dark);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .info-card.navy .info-card-body h3 {
  color: var(--text-dark);
}

/* ---------- Fila de iconos con círculo ---------- */
.migrana-site-wrapper .icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  margin-top: 12px;
}
.migrana-site-wrapper .icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 150px;
  gap: 10px;
}
.migrana-site-wrapper .icon-item svg {
  width: 72px;
  height: 72px;
  display: block;
}
.migrana-site-wrapper .icon-item span {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.3;
}
/* En Modo Alivio el círculo del icono se ve mejor con relleno suave */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .icon-item svg circle {
  fill: var(--light-mint);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .icon-item svg path {
  fill: var(--text-dark);
  stroke: var(--text-dark);
}

/* ---------- Tarjetas "Tipos" (2 columnas destacadas) ---------- */
.migrana-site-wrapper .types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.migrana-site-wrapper .type-card {
  background: var(--light-mint);
  border-radius: 16px;
  padding: 28px;
}
.migrana-site-wrapper .type-card h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--teal-dark);
  margin-bottom: 12px;
}
.migrana-site-wrapper .type-card p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- Fases en columnas de colores ---------- */
.migrana-site-wrapper .phases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.migrana-site-wrapper .phase-card {
  border-radius: 14px;
  padding: 22px 18px;
  color: var(--text-on-color);
}
.migrana-site-wrapper .phase-card h4 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-on-color);
}
.migrana-site-wrapper .phase-card ul { margin: 0 0 0 16px; }
.migrana-site-wrapper .phase-card li {
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 8px;
  color: var(--text-on-dark);
}
/* Degradé de tonos teal→navy para las 4 fases */
.migrana-site-wrapper .phase-card.p1 { background: var(--teal-dark); }
.migrana-site-wrapper .phase-card.p2 { background: #0b7d68; }
.migrana-site-wrapper .phase-card.p3 { background: #0a5a68; }
.migrana-site-wrapper .phase-card.p4 { background: var(--navy); }

/* ---------- Callout (¿Sabías que…? / Importante / Recuerda) ---------- */
.migrana-site-wrapper .info-callout {
  background: var(--navy);
  border-radius: var(--card-radius);
  padding: 32px 36px;
  color: var(--text-on-color);
  max-width: var(--content-max);
  margin: 8px auto;
}
.migrana-site-wrapper .info-callout h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 12px;
}
.migrana-site-wrapper .info-callout p {
  font-size: 17px;
  line-height: 1.55;
  color: #d4dad7;
  margin-bottom: 12px;
}
.migrana-site-wrapper .info-callout .callout-highlight {
  display: block;
  background: var(--teal-dark);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--text-on-color);
  font-weight: 600;
  margin-top: 12px;
}

/* ---------- Bloque de 2 columnas de texto (ciclo / por qué) ---------- */
.migrana-site-wrapper .two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.migrana-site-wrapper .two-col .col h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 12px;
}
.migrana-site-wrapper .two-col .col ul { margin: 0 0 0 18px; }
.migrana-site-wrapper .two-col .col li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-on-dark);
  margin-bottom: 8px;
}

/* Referencias chicas */
.migrana-site-wrapper .info-refs {
  font-size: 12px;
  color: var(--text-body);
  opacity: 0.7;
  margin-top: 8px;
}

/* Botón centrado (descarga) */
.migrana-site-wrapper .info-cta-center {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .migrana-site-wrapper .phases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .migrana-site-wrapper .info-hero .hero-content,
  .migrana-site-wrapper .info-hero-intro { max-width: 100%; }
  .migrana-site-wrapper .info-card,
  .migrana-site-wrapper .info-card.reverse {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
  }
  .migrana-site-wrapper .info-card.reverse .info-card-media { order: 0; }
  .migrana-site-wrapper .info-card-media-img { aspect-ratio: 16 / 10; max-height: 260px; }
  .migrana-site-wrapper .types-grid,
  .migrana-site-wrapper .two-col { grid-template-columns: 1fr; }
  .migrana-site-wrapper .phases-grid { grid-template-columns: 1fr; }
}

/* =========================================================
     SECCIÓN "Migraña en tu día a día"
     Carrusel infinito: 3 cards visibles, autoplay cada 5s,
     pausa en hover, dots por página. Lógica en dia-a-dia-carousel.js
     ========================================================= */
.migrana-site-wrapper .dia-section {
  background: var(--light-mint);
  padding: 8px var(--gutter) 64px;
  transition: background 0.5s ease;
}

/* Viewport: recorta lo que sobra */
.migrana-site-wrapper .carousel {
  max-width: var(--content-max);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
/* Track: fila que se desplaza */
.migrana-site-wrapper .carousel-track {
  display: flex;
  gap: 24px;
  will-change: transform;
}
/* Cuando el JS mueve, aplica la transición; al "teletransportar" el loop la quita */
.migrana-site-wrapper .carousel-track.is-animating {
  transition: transform 0.6s ease;
}

/* Cada card ocupa 1/3 del ancho (menos el gap) → 3 visibles */
.migrana-site-wrapper .dia-card {
  flex: 0 0 calc((100% - 48px) / 3);
  box-sizing: border-box;
  background: var(--pure-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.migrana-site-wrapper .dia-card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.migrana-site-wrapper .dia-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.migrana-site-wrapper .dia-card-body h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}
.migrana-site-wrapper .dia-card-body h3 span { color: var(--teal); }
.migrana-site-wrapper .dia-card-quote {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}
.migrana-site-wrapper .dia-card-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  flex: 1;
}
.migrana-site-wrapper .dia-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Dots de navegación */
.migrana-site-wrapper .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.migrana-site-wrapper .carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: none;
  background: var(--dot-inactive);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, width 0.25s ease;
}
.migrana-site-wrapper .carousel-dot.active {
  background: var(--teal);
  width: 28px;
}

/* Modo Alivio */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .dia-card {
  box-shadow: none;
  border: 1px solid var(--light-mint);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .dia-card-body h3 {
  color: var(--text-dark);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .carousel-dot {
  background: var(--dot-inactive);
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .carousel-dot.active {
  background: var(--teal);
}

/* Responsive: 2 cards en tablet, 1 en móvil */
@media (max-width: 900px) {
  .migrana-site-wrapper .dia-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}
@media (max-width: 600px) {
  .migrana-site-wrapper .dia-card {
    flex: 0 0 100%;
  }
}

/* =========================================================
     GUÍA CLARA SOBRE MIGRAÑA — CORRECCIONES DE MAQUETACIÓN
     Sobrescribe las reglas genéricas de .info-* para esta página.
     Tokens: --navy var(--navy) · --teal var(--teal) · --light-mint var(--light-mint)
     ========================================================= */

/* ---------- Nota educativa: texto chico dentro ---------- */
.migrana-site-wrapper .info-note-small {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-body);
  max-width: 900px;
  margin: 10px auto 0;
  line-height: 1.5;
}

/* ---------- Card "flush": imagen a sangre, altura completa ---------- */
.migrana-site-wrapper .info-card.flush {
  padding: 0;
  align-items: stretch;   /* la imagen iguala la altura de la columna de texto */
  overflow: hidden;
  grid-template-columns: 380px 1fr;
}
.migrana-site-wrapper .info-card.flush .info-card-media {
  height: 100%;
  padding: 40px 0 40px 40px;   /* respiro respecto al borde de la card */
}
.migrana-site-wrapper .info-card.flush .info-card-media-img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* sin proporción fija: llena la altura */
  object-fit: cover;
  border: none;                /* SIN bordes ni curvas */
  border-radius: 0;
  display: block;
}
/* Variante con borde azul claro (Tipos / Tratamiento) */
.migrana-site-wrapper .info-card.flush .info-card-media-img.bordered {
  border: 3px solid var(--border-image);
  border-radius: 0;
}
.migrana-site-wrapper .info-card.flush .info-card-body {
  padding: 40px;
}

/* ---------- Iconos rodeados de círculo verde claro ---------- */
.migrana-site-wrapper .icon-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
  margin: 20px 0 8px;
}
.migrana-site-wrapper .icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 100%;
}
.migrana-site-wrapper .icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--light-mint);
  border: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.migrana-site-wrapper .icon-circle svg {
  width: 76px;
  height: 76px;
  display: block;
}
/* El SVG ya trae su propio círculo: lo dejamos transparente para no duplicar */
.migrana-site-wrapper .icon-circle svg circle {
  fill: transparent;
  stroke: transparent;
}
.migrana-site-wrapper .icon-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

/* ---------- REFERENCIAS en verde oscuro ---------- */
.migrana-site-wrapper .info-refs {
  font-size: 12px;
  color: var(--text-body);
  opacity: 1;
  margin-top: 16px;
  line-height: 1.4;
}
.migrana-site-wrapper .refs-title {
  color: var(--teal-dark);
  font-weight: 700;
  letter-spacing: 0.4px;
}
/* En la card navy, las referencias se leen en teal */
.migrana-site-wrapper .info-card.navy .info-refs { color: #b9c4bf; }
.migrana-site-wrapper .info-card.navy .refs-title { color: var(--teal); }

/* ---------- TIPOS: cards teal con texto navy ---------- */
.migrana-site-wrapper .types-grid { gap: 20px; }
.migrana-site-wrapper .type-card {
  background: var(--teal);
  border-radius: 12px;
  padding: 24px;
}
.migrana-site-wrapper .type-card h4 {
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}
.migrana-site-wrapper .type-card p,
.migrana-site-wrapper .type-card li {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.6;
}
.migrana-site-wrapper .type-card ul,
.migrana-site-wrapper .type-card ol { margin: 0 0 0 18px; }
.migrana-site-wrapper .type-card li { margin-bottom: 8px; }

/* ---------- FASES: alternan teal / navy, título centrado + línea ---------- */
.migrana-site-wrapper .phase-card {
  border-radius: 12px;
  padding: 24px 20px;
}
.migrana-site-wrapper .phase-card h4 {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 0;
  padding-bottom: 16px;
}
/* Línea bajo el título */
.migrana-site-wrapper .phase-card h4::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 16px;
}
.migrana-site-wrapper .phase-card ul {
  margin: 20px 0 0 16px;
  text-align: left;   /* bullets a la izquierda */
}
.migrana-site-wrapper .phase-card li {
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 10px;
}
/* Verde: título, línea y texto en navy */
.migrana-site-wrapper .phase-card.teal { background: var(--teal); }
.migrana-site-wrapper .phase-card.teal h4 { color: var(--navy); }
.migrana-site-wrapper .phase-card.teal h4::after { background: var(--navy); }
.migrana-site-wrapper .phase-card.teal li { color: var(--navy); }
/* Navy: título y línea en teal, texto blanco */
.migrana-site-wrapper .phase-card.navy { background: var(--navy); }
.migrana-site-wrapper .phase-card.navy h4 { color: var(--teal); }
.migrana-site-wrapper .phase-card.navy h4::after { background: var(--teal); }
.migrana-site-wrapper .phase-card.navy li { color: var(--text-on-color); }

/* ---------- ASPECTOS: título + 2 columnas (bullets izq / imagen der) ---------- */
.migrana-site-wrapper .aspectos-title {
  margin-top: 48px;
  margin-bottom: 32px;
}
.migrana-site-wrapper .aspectos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.migrana-site-wrapper .aspectos-list ul {
  margin: 0 0 0 18px;
  list-style: none;
}
.migrana-site-wrapper .aspectos-list li {
  position: relative;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
  padding-left: 4px;
}
.migrana-site-wrapper .aspectos-list li::before {
  content: "•";
  position: absolute;
  left: -16px;
  color: var(--teal);
  font-size: 18px;
  line-height: 1.4;
}
.migrana-site-wrapper .bullet-title {
  color: var(--teal-dark);
  font-weight: 700;
}
.migrana-site-wrapper .aspectos-img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border: none;
  border-radius: 0;   /* sin curvas */
  display: block;
}

/* ---------- FACTORES DE RIESGO: fondo degradé + card blanca ---------- */
.migrana-site-wrapper .riesgo-section {
  background: var(--gradient-brand);
  padding: 72px var(--gutter);
  margin: 56px 0;
}
.migrana-site-wrapper .riesgo-card {
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--pure-white);
  border-radius: var(--card-radius);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
  transition: background 0.5s ease;
}
.migrana-site-wrapper .riesgo-body h3 {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 20px;
}
.migrana-site-wrapper .riesgo-body ul { margin: 0 0 0 18px; }
.migrana-site-wrapper .riesgo-body li {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.migrana-site-wrapper .riesgo-highlight {
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 24px;
}
.migrana-site-wrapper .riesgo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .riesgo-body h3,
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .riesgo-body li {
  color: var(--text-dark);
}

/* ---------- ¿SABÍAS QUE...?: tono claro, imagen a la derecha ---------- */
.migrana-site-wrapper .sabias-card {
  max-width: var(--content-max);
  margin: 8px auto 0;
  background: var(--white);
  border: 1px solid var(--light-mint);
  border-radius: var(--card-radius);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
}
.migrana-site-wrapper .sabias-body h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
}
.migrana-site-wrapper .sabias-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 12px;
}
.migrana-site-wrapper .sabias-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
/* CTA verde debajo, texto blanco, "profesional de la salud" resaltado */
.migrana-site-wrapper .sabias-cta {
  max-width: var(--content-max);
  margin: 24px auto 0;
  background: var(--teal-dark);
  border-radius: 12px;
  padding: 22px 28px;
  text-align: center;
  color: var(--text-on-color);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.migrana-site-wrapper .sabias-cta .span { color: var(--text-on-color); }
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .sabias-body h3 {
  color: var(--text-dark);
}

/* ---------- USO EXCESIVO: card navy con footer dentro ---------- */
.migrana-site-wrapper .uso-card {
  background: var(--navy);
  border-radius: var(--card-radius);
  padding: 40px;
  overflow: hidden;
}
.migrana-site-wrapper .uso-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: stretch;
}
.migrana-site-wrapper .uso-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.migrana-site-wrapper .uso-body h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-on-color);
  margin-bottom: 12px;
}
.migrana-site-wrapper .uso-body > p {
  font-size: 15px;
  line-height: 1.55;
  color: #d4dad7;
  margin-bottom: 20px;
}
/* El footer va DENTRO del banner, letra blanca */
.migrana-site-wrapper .uso-footer {
  color: var(--text-on-color);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 32px 0 0;
  line-height: 1.4;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .migrana-site-wrapper .icon-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .migrana-site-wrapper .info-card.flush,
  .migrana-site-wrapper .info-card.flush.reverse {
    grid-template-columns: 1fr;
  }
  .migrana-site-wrapper .info-card.flush .info-card-media {
    padding: 24px 24px 0;
  }
  .migrana-site-wrapper .info-card.flush .info-card-media-img {
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 280px;
  }
  .migrana-site-wrapper .info-card.flush .info-card-body { padding: 24px; }
  .migrana-site-wrapper .aspectos-grid,
  .migrana-site-wrapper .riesgo-card,
  .migrana-site-wrapper .sabias-card,
  .migrana-site-wrapper .uso-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .migrana-site-wrapper .riesgo-card,
  .migrana-site-wrapper .uso-card { padding: 24px; }
  .migrana-site-wrapper .aspectos-img { min-height: 260px; }
  .migrana-site-wrapper .uso-img { height: auto; aspect-ratio: 4 / 3; }
}

/* Contenedores de imagen: aseguran altura completa en sus grids */
.migrana-site-wrapper .aspectos-media,
.migrana-site-wrapper .riesgo-media,
.migrana-site-wrapper .sabias-media,
.migrana-site-wrapper .uso-media {
  height: 100%;
  display: block;
}

/* =========================================================
     GUÍA CLARA — AJUSTES FINALES
     1) Modo Alivio: los bullets de "Se tienen en cuenta..."
        no pueden quedar en negro. Usan el gris del sistema.
     2) El cierre (three-cards / cta) debe ir de borde a borde,
        sin el padding lateral de la sección que lo precede.
     ========================================================= */

/* --- 1) Bullets de aspectos legibles en Modo Alivio --- */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .aspectos-list li {
  color: var(--text-dark);   /* gris claro #d4dad7, nunca negro */
}
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .aspectos-title {
  color: var(--text-dark);
}
/* El título del bullet sigue en verde, pero matizado para dark */
.migrana-site-wrapper:has(#modoAlivioGlobal:checked) .bullet-title {
  color: var(--teal);
}

/* --- 2) Cierre a borde completo --- */
/* La última info-section no debe empujar ni recortar el cierre */
.migrana-site-wrapper .info-section:last-of-type {
  padding-bottom: 0;
}
/* three-cards y cta ocupan todo el ancho de la ventana */
.migrana-site-wrapper .three-cards,
.migrana-site-wrapper .cta {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
/* Separación entre el último bloque y el cierre */
.migrana-site-wrapper .uso-card {
  margin-bottom: 56px;
}


/* =========================================================
     CABEZOTE AEM — ADAPTACIÓN
     AEM genera su propio markup con clases de Bootstrap:
       #global-header > .global-header
         .global-header-logo > .brand-logo
         .global-header-navigation
           button.navbar-toggler        (hamburguesa)
           .global-header-menu#navbarText (menú colapsable)
             .meta-navigation__inner > ul > li > a

     OJO: el header vive FUERA de .migrana-site-wrapper,
     por eso estos selectores NO llevan ese prefijo.

     El header NO cambia con Modo Alivio: colores fijos.
     ========================================================= */

/* ---------- Barra del header: sticky y sobre todo lo demás ---------- */
#global-header > div.global-header.section {
  position: sticky;
  top: 0;
  z-index: 200;                    /* por encima del switch (z-index 90) */
  background: #ffffff;
  border-bottom: 1px solid #ececec;
  width: 100%;
}
#global-header .global-header {
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 32px;
    padding: 0 10vw;
}

/* ---------- Logo ---------- */
#global-header .global-header-logo {
  flex: 0 0 auto;
}
#global-header .brand-logo .image-container {
  justify-content: flex-start !important;
}
#global-header .brand-logo img {
  height: 96px;
  width: auto;
  max-width: none;
  display: block;
}

/* ---------- Zona de navegación ---------- */
#global-header .global-header-navigation {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ---------- Lista de links ---------- */
#global-header .meta-navigation__inner ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
#global-header .meta-navigation__inner li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#global-header .meta-navigation__inner a {
  display: inline-block;
  font-family: "Roboto Flex", "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #071d49;                  /* navy fijo */
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#global-header .meta-navigation__inner a:hover {
  color: #1ac9a8;
  text-decoration: none;
}
/* Página actual (AEM suele marcar el li con .active) */
#global-header .meta-navigation__inner li.active > a,
#global-header .meta-navigation__inner a.active {
  color: #1ac9a8;
  font-weight: 700;
  border-bottom-color: #1ac9a8;
}

/* ---------- Botón hamburguesa ---------- */
#global-header .navbar-toggler {
  display: none;                   /* oculto en desktop */
  border: 1px solid #071d49;
  border-radius: 6px;
  background: transparent;
  padding: 6px 10px;
  line-height: 1;
  cursor: pointer;
}
#global-header .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}
#global-header .navbar-toggler .bi-list {
  color: #071d49;
  font-size: 26px;
  line-height: 1;
}

#global-header .meta-navigation ul {
  background: var(--pure-white)
}

#global-header .meta-navigation__inner a {
  text-align: center;
}

/* ---------- El switch NO debe taparse con el header ---------- */
/* El header ya está en z-index 200; bajamos el switch por las dudas. */
.switch-container {
  z-index: 1;
  position: relative;
}

/* ---------- Modo Alivio: el header NO cambia ---------- */
/* El header vive fuera de .migrana-site-wrapper, así que ya es
   inmune por estructura. Estas reglas son una red de seguridad. */
body:has(#modoAlivioGlobal:checked) #global-header {
  background: #ffffff;
  border-bottom-color: #ececec;
}
body:has(#modoAlivioGlobal:checked) #global-header .meta-navigation__inner a {
  color: #071d49;
}
body:has(#modoAlivioGlobal:checked) #global-header .meta-navigation__inner a:hover,
body:has(#modoAlivioGlobal:checked) #global-header .meta-navigation__inner li.active > a {
  color: #1ac9a8;
}
body:has(#modoAlivioGlobal:checked) #global-header .navbar-toggler,
body:has(#modoAlivioGlobal:checked) #global-header .navbar-toggler .bi-list {
  border-color: #071d49;
  color: #071d49;
}

/* ---------- RESPONSIVE: hamburguesa ---------- */
@media (max-width: 1000px) {
  #global-header .global-header {
    max-width: 100%;
    min-height: 66px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px clamp(16px, 4vw, 24px);
  }
  #global-header .brand-logo img {
    height: 40px;
  }
  #global-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #global-header .global-header-navigation {
    flex: 0 0 auto;
  }

  /* El menú colapsable ocupa todo el ancho, debajo del logo */
  #global-header .global-header-menu {
    flex: 0 0 100%;
    order: 3;
    width: 100%;
    background: #ffffff;
  }
  /* Bootstrap deja .collapse.show abierto por defecto: lo cerramos */
  #global-header .global-header-menu.collapse:not(.show) {
    display: none;
  }
  #global-header .meta-navigation__inner ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 4px 0 12px;
  }
  #global-header .meta-navigation__inner li {
    width: 100%;
    border-top: 1px solid #f0f0f0;
  }
  #global-header .meta-navigation__inner a {
    display: block;
    width: 100%;
    padding: 14px 2px;
    font-size: 16px;
    white-space: normal;
    border-bottom: none;
  }
  #global-header .meta-navigation__inner li.active > a {
    border-bottom: none;
  }
}