/* ============================================================================
   PÁGINAS DE COMORBILIDAD / AUTORIDAD DE TEMA
   (hígado graso, diabetes, hipertensión, apnea, menopausia, dolor articular)

   Estas páginas se importaron de un page builder y su CSS nunca se migró al
   tema: las clases .menopausia-* y .extracted-style-* no tenían estilos. Esta
   hoja las alinea con el sistema del sitio (tokens de base.css): ancho de
   contenedor, azul de marca #334DCF, fuentes Outfit/Saans, tarjetas, círculos
   de icono (SVG, sin emojis) y ritmo vertical de secciones.

   Las 6 páginas comparten exactamente las mismas clases, así que esta hoja
   sirve para todas (se encola en functions.php para esas plantillas).
   ============================================================================ */

/* — Contenedor y ritmo general ------------------------------------------- */
.menopausia-landing {
    --com-container: 1100px;
    --com-blue: #334DCF;
    --com-blue-dark: #2A3FB0;
    --com-blue-soft: #F2F5FC;
    --com-blue-border: #DBE1F5;
    --com-ink: #2A2822;
    --com-body: #635E54;
    --com-cream: #FAF6F0;
    --com-border: #E2DED4;
    color: var(--com-body);
    overflow-x: hidden;
}

/* main a ancho completo (por defecto va en la columna central del grid del
   sitio): así los FONDOS de sección ocupan el 100% del viewport y el contenido
   se centra dentro con --com-container. */
.menopausia-landing { grid-column: 1 / -1 !important; }

.menopausia-landing section {
    padding: clamp(48px, 6vw, 88px) var(--page-margin, 24px);
}

/* Cada sección centra su contenido a un ancho de lectura del sitio */
.menopausia-landing > section > div {
    max-width: var(--com-container);
    margin-inline: auto;
}

/* Fondos alternos para separar secciones (como el resto del sitio) */
.menopausia-science,
.menopausia-treatment,
.menopausia-social-proof { background: var(--com-cream); }

/* — Tipografía base de la landing ---------------------------------------- */
.menopausia-landing h2 {
    font-family: 'Saans', sans-serif;
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--com-ink);
    margin: 0 0 16px;
    text-wrap: balance;
}
.menopausia-landing h3 {
    font-family: 'Saans', sans-serif;
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--com-ink);
    margin: 0 0 12px;
}
.menopausia-landing h4 {
    font-family: 'Saans', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--com-ink);
    margin: 0 0 8px;
}
.menopausia-landing p { line-height: 1.6; margin: 0 0 14px; }
.menopausia-landing strong { color: var(--com-ink); font-weight: 600; }
.menopausia-landing ul { padding-left: 1.25rem; list-style: disc; margin: 0 0 14px; }
.menopausia-landing li { margin-bottom: 8px; line-height: 1.55; }

/* Antetítulos / eyebrows (hero-tag, info-badge, y los span de sección) */
.hero-tag,
.info-badge,
.menopausia-preventive .extracted-style-43,
.menopausia-treatment .extracted-style-43,
.menopausia-how-senda .extracted-style-74 {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--com-blue);
    background: var(--com-blue-soft);
    border: 1px solid var(--com-blue-border);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* — HERO ------------------------------------------------------------------ */
.menopausia-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--com-cream) 100%); }
/* Hero centrado de "autoridad": texto e intro centrados, CTAs debajo con
   espacio y centradas, imagen debajo. */
.menopausia-hero > .extracted-style-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 860px;
    gap: 0;
}
.hero-text-side {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.medical-signature { margin-inline: auto; }
.hero-ctas { justify-content: center; margin-top: 4px; }
.hero-image-side { width: 100%; max-width: 680px; margin-top: 36px; }
.menopausia-hero h1 {
    font-family: 'Saans', sans-serif;
    font-size: clamp(2rem, 3.5vw + 0.5rem, 3rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--com-ink);
    margin: 0 0 20px;
    text-wrap: balance;
}
.hero-text-side > p:first-of-type,
.menopausia-hero .extracted-style-6 {
    font-size: 1.125rem;
    color: var(--com-body);
    margin-bottom: 24px;
}
.medical-signature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-radius: var(--radius-lg, 16px);
    padding: 12px 16px;
    margin-bottom: 28px;
}
.signature-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--com-blue-soft);
    color: var(--com-blue);
    border-radius: 50%;
}
.signature-details { font-size: 13px; color: var(--com-body); line-height: 1.45; }
.signature-details .extracted-style-10 { display: block; font-weight: 700; color: var(--com-ink); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botones (estilo global del sitio) */
.cta-btn-primary,
.cta-btn-closing {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--com-blue);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: var(--radius-md, 12px);
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.cta-btn-primary:hover,
.cta-btn-closing:hover { background: var(--com-blue-dark); color: #fff; transform: translateY(-1px); }
.cta-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF;
    color: var(--com-blue);
    border: 1.5px solid var(--com-blue);
    font-weight: 700;
    font-size: 1rem;
    padding: 12.5px 26px;
    border-radius: var(--radius-md, 12px);
    text-decoration: none;
    transition: background-color .15s ease;
}
.cta-btn-secondary:hover { background: var(--com-blue-soft); }

.hero-image-side { position: relative; }
.image-wrapper { border-radius: var(--radius-xl, 24px); overflow: hidden; box-shadow: 0 20px 50px rgba(14,14,144,.10); }
.image-wrapper img { width: 100%; height: auto; display: block; }
.confidence-badge {
    position: absolute; left: 18px; bottom: 18px;
    background: #FFFFFF;
    color: var(--com-ink);
    font-weight: 700; font-size: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* — SECCIÓN CIENCIA (grid de tarjetas) ----------------------------------- */
.menopausia-science .extracted-style-20 { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.science-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.science-card {
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-radius: var(--radius-xl, 24px);
    padding: 28px;
}
.science-card h3 { font-size: 1.1875rem; }

/* Timeline de fases */
.timeline-block { margin-top: 48px; }
.timeline-block > h3 { text-align: center; margin-bottom: 24px; }
.timeline-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.timeline-steps-grid > div {
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-top: 4px solid var(--com-blue);
    border-radius: var(--radius-lg, 16px);
    padding: 22px;
}
.timeline-steps-grid .extracted-style-31 {
    display: block; font-weight: 700; color: var(--com-ink); margin-bottom: 8px; font-size: 1.0625rem;
}

/* Diagrama de proceso (flujo con flechas) */
.process-diagram { margin-top: 40px; text-align: center; }
.process-diagram > h4 { margin-bottom: 20px; }
.diagram-flow {
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px;
}
.diagram-step {
    flex: 1 1 220px; max-width: 300px;
    background: var(--com-blue-soft);
    border: 1px solid var(--com-blue-border);
    border-radius: var(--radius-md, 12px);
    padding: 16px 18px;
    font-weight: 600; color: var(--com-ink);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.diagram-arrow { display: inline-flex; align-items: center; color: var(--com-blue); }
.diagram-arrow svg { width: 22px; height: 22px; }

/* — SECCIÓN "VENTANA DE OPORTUNIDAD" (2 columnas: texto + tarjeta) -------- */
.menopausia-preventive .extracted-style-42,
.menopausia-diet-failures .extracted-style-54,
.menopausia-how-senda .extracted-style-72 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.menopausia-preventive .extracted-style-48 {   /* tarjeta de evidencia */
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-radius: var(--radius-xl, 24px);
    padding: 32px;
}
.menopausia-preventive .extracted-style-52,     /* cita guías clínicas */
.menopausia-treatment .extracted-style-80,      /* cita equipo clínico */
.menopausia-social-proof .extracted-style-80 {
    border-left: 3px solid var(--com-blue);
    background: var(--com-blue-soft);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin-top: 16px;
    font-style: italic;
    color: var(--com-ink);
}

/* — SECCIÓN "DIETAS QUE FALLAN" (tarjeta warning + lista numerada) -------- */
.menopausia-diet-failures .extracted-style-55 {  /* tarjeta de aviso */
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-radius: var(--radius-xl, 24px);
    padding: 32px;
}
/* Lista numerada (pasos) — reutilizada en varias secciones */
.extracted-style-60 { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.extracted-style-61 { display: flex; gap: 14px; align-items: flex-start; }
.extracted-style-62,
.extracted-style-76 {   /* badge numérico */
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--com-blue);
    color: #FFFFFF;
    font-weight: 700; font-size: 15px;
    border-radius: 50%;
}
.extracted-style-63 { display: block; color: var(--com-ink); margin-bottom: 4px; }
.extracted-style-64, .extracted-style-77 { margin: 0; }

/* — SECCIÓN TRATAMIENTO (rejilla de tarjetas con icono) ------------------- */
.menopausia-treatment .extracted-style-19 { }
.menopausia-treatment .extracted-style-66 { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.extracted-style-67 {   /* rejilla de las 5 tarjetas */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.extracted-style-68 {   /* tarjeta de tratamiento */
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-radius: var(--radius-xl, 24px);
    padding: 26px;
}

/* Círculos de icono (SVG, sin emojis) — usados en varias secciones */
.signature-icon,
.extracted-style-49,
.extracted-style-56,
.extracted-style-69 {
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--com-blue-soft);
    color: var(--com-blue);
    border-radius: 14px;
    margin-bottom: 16px;
}
.extracted-style-49, .extracted-style-56, .extracted-style-69 { border-radius: 14px; }
.extracted-style-49 svg,
.extracted-style-56 svg,
.extracted-style-69 svg,
.signature-icon svg { width: 26px; height: 26px; }

/* — CÓMO LO TRATA SENDA --------------------------------------------------- */
.steps-flow-vertical { }
.menopausia-how-senda .extracted-style-79 { margin-top: 8px; }

/* — PRUEBA SOCIAL (testimonio + stats) ----------------------------------- */
.menopausia-social-proof .extracted-style-20 { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.testimonial-card {
    background: #FFFFFF;
    border: 1px solid var(--com-border);
    border-radius: var(--radius-xl, 24px);
    padding: 36px;
    max-width: 820px;
    margin: 0 auto 28px;
    position: relative;
}
.testimonial-card .extracted-style-87 {   /* comilla */
    font-family: 'Saans', serif;
    font-size: 56px; line-height: 1; color: var(--com-blue-border);
    display: block; margin-bottom: -12px;
}
.testimonial-card blockquote { margin: 0 0 20px; font-size: 1.0625rem; line-height: 1.6; color: var(--com-ink); }
.extracted-style-89 { display: flex; align-items: center; gap: 14px; }
.extracted-style-90 {   /* avatar inicial */
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    background: var(--com-blue); color: #fff; font-weight: 700; font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center;
}
.extracted-style-91 { display: block; font-weight: 700; font-style: normal; color: var(--com-ink); }
.extracted-style-92 { font-size: 13px; color: var(--com-body); }

.extracted-style-93 {   /* fila de stats */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 820px; margin: 0 auto;
}
.extracted-style-94, .extracted-style-97 {
    background: #FFFFFF; border: 1px solid var(--com-border);
    border-radius: var(--radius-lg, 16px); padding: 22px; text-align: center;
}
.extracted-style-97 { background: var(--com-blue); border-color: var(--com-blue); }
.extracted-style-95 { display: block; font-family: 'Saans', sans-serif; font-size: 2.25rem; font-weight: 700; color: var(--com-blue); line-height: 1; margin-bottom: 8px; }
.extracted-style-98 { display: block; font-family: 'Saans', sans-serif; font-size: 2.25rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 8px; }
.extracted-style-96 { font-size: 13.5px; color: var(--com-body); }
.extracted-style-97 .extracted-style-96 { color: rgba(255,255,255,.9); }

/* — FAQ ACCORDION -------------------------------------------------------- */
.menopausia-faq > .extracted-style-20 { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.faq-accordion-container { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item-wrapper { border: 1px solid var(--com-border); border-radius: var(--radius-lg, 16px); background: #fff; overflow: hidden; }
.faq-trigger-btn {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 24px; font-size: 1.0625rem; font-weight: 600; color: var(--com-ink);
    font-family: inherit;
}
.faq-icon-arrow { flex-shrink: 0; font-size: 24px; font-weight: 400; color: var(--com-blue); transition: transform .2s ease; line-height: 1; }
.faq-item-active .faq-icon-arrow { transform: rotate(45deg); }
.faq-content-pane { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-content-pane p { padding: 0 24px 22px; margin: 0; color: var(--com-body); }

/* — Bloque legal RGPD bajo el formulario (fine print, pequeño) ----------- */
.rgpd-block-layered { margin-top: 16px; font-size: 11.5px; line-height: 1.45; color: #6d6a62; }
.rgpd-block-layered p { font-weight: 700; margin: 0 0 4px; font-size: 11.5px; color: var(--com-ink); }
.rgpd-block-layered ul { list-style: none; padding: 0; margin: 0; }
.rgpd-block-layered li { margin-bottom: 3px; }
.rgpd-block-layered strong { color: #4a4a4a; font-weight: 600; }
.rgpd-block-layered a { color: var(--com-blue); text-decoration: underline; }

/* — CTA DE CIERRE + FORM ------------------------------------------------- */
.menopausia-cta-closing { background: var(--com-blue); }
.menopausia-cta-closing > .extracted-style-108 {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center;
}
.menopausia-cta-closing h2 { color: #fff; }
.menopausia-cta-closing .extracted-style-110 { color: rgba(255,255,255,.88); font-size: 1.0625rem; }
.cta-btn-closing { background: #fff; color: var(--com-blue); margin: 8px 0 20px; }
.cta-btn-closing:hover { background: #F2F5FC; color: var(--com-blue); }
.extracted-style-113 { display: flex; flex-direction: column; gap: 8px; }
.extracted-style-114 { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.9); font-size: 14.5px; }
.extracted-style-115 { color: #fff; display: inline-flex; }
.extracted-style-115 svg { width: 18px; height: 18px; }

/* Formulario de callback dentro del CTA */
.extracted-style-116 {
    background: #fff; border-radius: var(--radius-xl, 24px); padding: 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.extracted-style-116 h3 { margin-bottom: 6px; }
.extracted-style-116 p { color: var(--com-body); font-size: 14.5px; margin-bottom: 18px; }
.extracted-style-116 input,
.extracted-style-116 select,
.extracted-style-116 textarea {
    width: 100%; border: 1px solid var(--com-border); border-radius: 10px;
    padding: 12px 14px; font-family: inherit; font-size: 14px; box-sizing: border-box;
}

/* — RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 900px) {
    .menopausia-hero > .extracted-style-3,
    .menopausia-preventive .extracted-style-42,
    .menopausia-diet-failures .extracted-style-54,
    .menopausia-how-senda .extracted-style-72,
    .menopausia-cta-closing > .extracted-style-108 {
        grid-template-columns: 1fr;
    }
    .hero-image-side { order: -1; }
    .science-grid,
    .extracted-style-67,
    .timeline-steps-grid,
    .extracted-style-93 { grid-template-columns: 1fr; }
    .diagram-arrow { transform: rotate(90deg); }
}
@media (min-width: 601px) and (max-width: 900px) {
    .science-grid,
    .extracted-style-67 { grid-template-columns: repeat(2, 1fr); }
}

/* 3 testimonios con la tarjeta global del sitio y la misma responsive que la
   portada: 3 columnas en desktop, 2 en tablet, y carrusel horizontal en móvil
   (este último lo aporta la base .testimonios-grid de blocks-bundle a ≤767px). */
.com-testimonios-3.testimonios-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
}
@media (max-width: 991px) {
    .com-testimonios-3.testimonios-grid { grid-template-columns: repeat(2, 1fr); }
}