/* =====================================================================
   MEDICINA PREPAGADA FÁCIL — VERSIÓN 2 · Secciones del sitio
   /public_html/assets/css/sections.css
   ---------------------------------------------------------------------
   Se carga SIEMPRE después de styles.css.

   Por qué está separado: `styles.css` es el sistema de diseño común a
   todos los clientes. Aquí vive todo lo propio de esta versión: slider,
   franja de confianza, planes con foto, plan para bebés, beneficios,
   proceso, galería, cobertura nacional, asesor, testimonios, preguntas
   y legal.

   Reglas respetadas:
     · Solo variables de styles.css.
     · Sin unidades vw sueltas para títulos: todo va con clamp() acotado y
       la relación titular/texto se mantiene entre 2 y 3 a lo ancho.
     · Accesible: foco visible, contraste verificado, funciona sin JS.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Utilidad de accesibilidad
   --------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   Botón cálido · el de los llamados emocionales sobre fondo oscuro.
   Ámbar con texto azul oscuro: contraste alto y verificado.
   --------------------------------------------------------------------- */
.btn-warm {
    background: var(--warm-500);
    color: var(--ink-900);
    border: 1px solid var(--warm-500);
    box-shadow: 0 14px 30px -16px rgba(255, 194, 71, .7);
}
.btn-warm:hover,
.btn-warm:focus-visible {
    background: #ffd479;
    border-color: #ffd479;
    color: var(--ink-900);
    transform: translateY(-2px);
}

/* =====================================================================
   1. SLIDER DE ENTRADA
   ===================================================================== */
.slider {
    position: relative;
    isolation: isolate;
    background: var(--blue-950);
    color: var(--white);
    overflow: hidden;
}

.slider-track {
    position: relative;
    min-height: min(88vh, 760px);
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* La foto, con un zoom lento y continuo (efecto Ken Burns). */
.slide-media {
    position: absolute;
    inset: 0;
    background-color: var(--blue-900);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}
.slide.is-active .slide-media {
    animation: slideZoom 11s var(--ease-out) forwards;
}
@keyframes slideZoom {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}

/* Velo. Es azul de marca, pero NO tapa la fotografía: la opacidad es alta
   sólo por donde pasa el texto y baja hacia la derecha, que es donde no hay
   nada escrito y la imagen puede lucirse.

   El texto vive a la izquierda (el bloque mide 780 px y el contenedor 1180),
   así que con la ventana a 1101 px —el peor caso— el texto llega al 73 % del
   ancho. Hasta ahí el velo se mantiene en .94 o más; a partir del 80 % cae
   hasta .30 para dejar ver la foto.

   Contraste medido con el peor caso posible (foto totalmente BLANCA) y texto
   blanco, en los puntos donde HAY texto: 5,05:1 al inicio y 4,87:1 al borde.
   Todos por encima del 4,5:1 de WCAG AA. Con el azul #0372B9 el velo no puede
   bajar de .93 en la zona del texto: un blanco al 10 % ya deja 4,28:1.
   (Reproducible con .testenv/contraste2.php) */
.slide-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(3, 114, 185, .97) 0%,
        rgba(3, 114, 185, .96) 40%,
        rgba(3, 114, 185, .95) 62%,
        rgba(3, 114, 185, .94) 80%,
        rgba(3, 114, 185, .58) 92%,
        rgba(3, 114, 185, .30) 100%);
}

.slide-inner {
    position: relative;
    z-index: 2;
    padding: clamp(56px, 9vh, 104px) 0 clamp(72px, 11vh, 120px);
    max-width: 780px;
}

.slide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    margin-bottom: 20px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .3);
    font-family: var(--ff-head);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
}

/* Titular: la pieza clave. Grande, apretado y con la palabra destacada
   subrayada con un trazo cálido. En móvil manda el tamaño: 29,6 px con
   texto de 16 px (relación 1,85) y en escritorio 48 px con 17 px (2,8).

   OJO con `color`: la hoja base define `h1, h2, h3, h4 { color: var(--ink-900) }`,
   y una regla directa SIEMPRE gana a la herencia. Sin esta línea el titular
   salía gris oscuro aunque `.slider` declare `color: var(--white)`. */
.slide-title {
    margin: 0 0 18px;
    font-family: var(--ff-head);
    color: var(--white);
    font-size: clamp(1.85rem, 1.15rem + 3.1vw, 3rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(3, 114, 185, .5);
}

/* Palabra destacada: va sobre un marcador ámbar sólido con texto oscuro.
   Se probó primero con texto blanco sobre una banda translúcida y daba
   3,15:1 (apenas pasaba por ser titular grande); así da 9,35:1 y además
   se ve mucho más llamativo, que es lo que pidió el cliente.
   box-decoration-break hace que el marcador se repita bien si la palabra
   cae al final de una línea. */
.slide-hl {
    padding: .02em .18em;
    border-radius: 10px;
    background: var(--warm-500);
    color: var(--ink-900);
    text-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.slide-text {
    margin: 0 0 30px;
    max-width: 46ch;
    font-size: clamp(1rem, .96rem + .28vw, 1.13rem);
    line-height: 1.65;
    font-weight: 600;
    color: var(--white);
}

.slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Controles del slider. El fondo va bastante opaco (.88) porque la flecha de
   la derecha cae en la zona donde la foto se ve: así el icono blanco siempre
   supera 3:1 y la sombra lo separa de una foto clara. */
.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--r-full);
    background: rgba(3, 114, 185, .88);
    color: var(--white);
    box-shadow: 0 8px 22px -10px rgba(20, 24, 28, .45);
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider-arrow:hover,
.slider-arrow:focus-visible {
    background: rgba(3, 114, 185, .98);
    transform: scale(1.06);
}
.slider-arrow-prev { left: clamp(10px, 2vw, 26px); }
.slider-arrow-next { right: clamp(10px, 2vw, 26px); }

.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 10px;
}
/* Dots del slider: el relleno es blanco casi sólido para que se vean también
   cuando el velo se aclara en el borde inferior; el activo lleva un anillo
   blanco porque el ámbar sobre azul sólo da 2,8:1 y el anillo lo delimita. */
.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .92);
    cursor: pointer;
    transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.slider-dot.is-active {
    width: 32px;
    background: var(--warm-500);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
}
.slider-dot:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* =====================================================================
   2. FRANJA DE CONFIANZA
   ===================================================================== */
.trust {
    position: relative;
    z-index: 5;
    margin-top: -44px;
    padding-bottom: 4px;
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.trust-grid li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-right: 1px solid var(--ink-100);
}
.trust-grid li:last-child { border-right: 0; }
.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    background: var(--blue-50);
    color: var(--blue-700);
}
.trust-body { display: flex; flex-direction: column; min-width: 0; }
.trust-body strong {
    font-family: var(--ff-head);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--blue-900);
}
.trust-body small {
    font-size: .85rem;
    line-height: 1.35;
    color: var(--ink-600);
}

/* =====================================================================
   3. NUESTROS PLANES · una fila por programa
   ===================================================================== */
.plans { background: var(--grad-soft); }

.plan-list { display: grid; gap: 26px; }

.plan-row {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
    padding: clamp(20px, 2.4vw, 30px);
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plan-row:hover {
    transform: translateY(-4px);
    border-color: var(--blue-200);
    box-shadow: var(--sh-lg);
}
/* Fila invertida: la foto pasa a la derecha. Se hace con orden, no con
   dirección de texto, para no romper la lectura. */
.plan-row.is-flipped .plan-photo { order: 2; }

.plan-row.is-featured {
    border-color: var(--blue-700);
    box-shadow: var(--sh-md);
    background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 55%);
}

.plan-photo {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--blue-50);
}
.plan-photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
}
.plan-row:hover .plan-photo img { transform: scale(1.05); }

.plan-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    background: var(--warm-500);
    color: var(--ink-900);
    font-family: var(--ff-head);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: var(--sh-sm);
}

.plan-body { display: flex; flex-direction: column; gap: 10px; }

.plan-number {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: var(--r-full);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    font-family: var(--ff-head);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--blue-700);
}

.plan-name {
    margin: 0;
    font-family: var(--ff-head);
    font-size: clamp(1.4rem, 1.2rem + .9vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--blue-900);
}
.plan-tagline {
    margin: -4px 0 0;
    font-family: var(--ff-head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--amber-600);
}
.plan-desc {
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ink-600);
}

.plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 0;
    padding: 13px 18px;
    border-radius: var(--r-sm);
    background: var(--blue-50);
    border: 1px dashed var(--blue-200);
}
.plan-price strong {
    font-family: var(--ff-head);
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--blue-800);
}
.plan-price small { font-size: .78rem; color: var(--ink-500); }

.plan-cond {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-500);
}
.plan-cond svg { flex: 0 0 auto; margin-top: 1px; color: var(--blue-600); }

.plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.plan-actions .btn { flex: 1 1 190px; }

.plans-note {
    display: grid;
    gap: 10px;
    margin-top: 30px;
    padding: 20px 24px;
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--ink-200);
}
.plans-note p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ink-600);
}
.plans-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--blue-600); }
.plans-disclaimer { color: var(--ink-500) !important; font-size: .8rem !important; }

/* =====================================================================
   4. PLAN PARA BEBÉS
   ===================================================================== */
.baby {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff9f0 0%, var(--white) 60%);
}
.baby-glow {
    position: absolute;
    top: -160px;
    right: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 194, 71, .38), transparent 68%);
    pointer-events: none;
}
.baby-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
}

.baby-photo {
    position: relative;
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}
.baby-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.baby-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .94);
    color: var(--blue-800);
    font-family: var(--ff-head);
    font-size: .84rem;
    font-weight: 800;
    box-shadow: var(--sh-sm);
}

.baby-copy { display: flex; flex-direction: column; }
.baby-title {
    margin: 0 0 14px;
    font-family: var(--ff-head);
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--blue-900);
}
.baby-text {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-600);
}
.baby-text-soft { font-size: .93rem; color: var(--ink-500); }

.baby-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.baby-points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-700);
}
.baby-points svg { flex: 0 0 auto; margin-top: 2px; color: var(--amber-600); }

.baby-quote {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: var(--r-md);
    background: var(--warm-100);
    border-left: 4px solid var(--warm-500);
    font-family: var(--ff-head);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.5;
    color: #7a4a00;
}

.baby-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* =====================================================================
   5. POR QUÉ LAS FAMILIAS NOS ELIGEN
   ===================================================================== */
.reasons {
    position: relative;
    overflow: hidden;
    background: var(--grad-deep);
    color: var(--white);
}
/* Esta sección NO lleva foto de fondo: sobre #0372B9 cualquier imagen clara
   dejaría el texto blanco por debajo de 4,5:1 (basta un blanco al 10 % para
   bajar a 4,28:1). Va en azul plano de marca. */
.reasons > .container { position: relative; z-index: 2; }

.section-head-light .section-title { color: var(--white); }
.section-head-light .section-subtitle { color: var(--white); }

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.reason-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .24);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.reason-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, .45);
}
.reason-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-sm);
    background: var(--warm-500);
    color: var(--ink-900);
}
.reason-card h3 {
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--white);
}
.reason-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--white);
}

.reasons-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
    padding: 22px 26px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .24);
}
.reasons-cta p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.04rem;
    font-weight: 700;
}
.reasons-cta svg { color: var(--warm-500); }

/* =====================================================================
   6. ASÍ TE ACOMPAÑAMOS
   ===================================================================== */
.steps { background: var(--white); }

.steps-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 30px 24px 26px;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--ink-200);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
/* Línea conectora entre pasos */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 52px;
    right: -20px;
    width: 20px;
    height: 2px;
    background: var(--blue-100);
}
.step-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-sm);
    background: var(--grad-blue);
    color: var(--white);
    box-shadow: var(--sh-sm);
}
.step-number {
    font-family: var(--ff-head);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--blue-700);
}
.step h3 {
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.14rem;
    font-weight: 800;
    color: var(--blue-900);
}
.step p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink-600);
}

/* =====================================================================
   7. GALERÍA — se quitó a pedido del cliente
   ---------------------------------------------------------------------
   La sección «Familias que ya están tranquilas» ya no existe: se
   eliminaron el bloque de la portada, el módulo del panel, sus ajustes
   y la tabla `gallery_items`. Los estilos se van con ella para no
   arrastrar peso muerto. La numeración siguiente se conserva.
   ===================================================================== */
/* =====================================================================
   8. COBERTURA NACIONAL
   ===================================================================== */
.coverage {
    position: relative;
    overflow: hidden;
    background: var(--blue-950);
    color: var(--white);
}
.coverage-bg { position: absolute; inset: 0; }
.coverage-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
}
.coverage-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(3, 114, 185, .98) 0%, rgba(3, 114, 185, .96) 55%, rgba(3, 114, 185, .94) 100%);
}
.coverage-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: center;
}
.coverage .section-title { color: var(--white); }
.coverage .section-subtitle { color: var(--white); }

.coverage-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0 20px;
    padding: 0;
    list-style: none;
}
.coverage-cities li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: .85rem;
    font-weight: 600;
}
.coverage-cities li.is-primary {
    background: var(--warm-500);
    border-color: var(--warm-500);
    color: var(--ink-900);
}
.coverage-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: .88rem;
    color: var(--white);
}
.coverage-note svg { color: var(--warm-500); }

.coverage-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 26px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .96);
    color: var(--ink-700);
    box-shadow: var(--sh-xl);
}
.coverage-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-sm);
    background: var(--blue-50);
    color: var(--blue-700);
}
.coverage-card h3 {
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--blue-900);
}
.coverage-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-600);
}
.coverage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
}
.coverage-chips li {
    padding: 5px 12px;
    border-radius: var(--r-full);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    font-size: .78rem;
    font-weight: 600;
    color: var(--blue-800);
}
.coverage-card .btn { width: 100%; }
.coverage-copy { position: relative; }

/* Un programa sin precio publicado muestra "Valor según tu caso". */
.plan-price-quote strong {
    font-size: 1.05rem;
    color: var(--ink-700);
}

/* =====================================================================
   9. HABLEMOS DE TU FAMILIA · sin fotos de asesores
   ===================================================================== */
.advisor { background: var(--white); }
.advisor-inner {
    max-width: 780px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.advisor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 18px;
    border-radius: var(--r-md);
    background: var(--blue-50);
    color: var(--blue-700);
}
.advisor-title {
    margin: 0 0 12px;
    font-family: var(--ff-head);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--blue-900);
}
.advisor-text {
    margin: 0 0 22px;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-600);
}
.advisor-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.advisor-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-700);
}
.advisor-points svg { color: var(--amber-600); }
.advisor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.advisor-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    font-size: .84rem;
    color: var(--ink-500);
}
.advisor-note svg { color: var(--ink-500); }

/* =====================================================================
   10. TESTIMONIOS
   ===================================================================== */
.testimonials { background: var(--blue-50); }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.testimonial {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 28px 26px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.testimonial-icon { color: var(--blue-200); }
.testimonial blockquote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-700);
}
.testimonial figcaption {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ink-100);
}
.testimonial figcaption strong { font-size: .93rem; color: var(--blue-900); }
.testimonial figcaption small { font-size: .78rem; color: var(--ink-500); }
.testimonial-rating {
    display: inline-flex;
    gap: 2px;
    margin-top: 6px;
    color: var(--ink-300);
}
.testimonial-rating .is-on { color: var(--warm-500); }

/* =====================================================================
   11. PREGUNTAS FRECUENTES
   ===================================================================== */
.faq { background: var(--white); }
.faq-inner {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(26px, 3.6vw, 50px);
    align-items: start;
}
.faq-copy .btn { margin-top: 22px; }

/* Logotipo de la marca propia dentro del bloque de dudas: va entre el
   subtítulo y el botón. Se limita el ancho, nunca la altura, para que la
   imagen conserve su proporción (es casi cuadrada: 1,15:1). */
.faq-logo { margin: 0 0 22px; }
.faq-logo img {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
}

.faq-list { display: grid; gap: 12px; }
.faq-item {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.faq-item[open] { border-color: var(--blue-200); box-shadow: var(--sh-sm); }
.faq-item summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--blue-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--blue-500); outline-offset: -3px; }
.faq-question { flex: 1 1 auto; }
.faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--r-full);
    background: var(--blue-50);
    color: var(--blue-700);
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq-item[open] .faq-toggle { transform: rotate(180deg); background: var(--blue-100); }
.faq-answer {
    padding: 0 20px 20px;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--ink-600);
}
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* =====================================================================
   12. LEGAL
   ===================================================================== */
.legal { background: var(--ink-50); }
.legal-inner { max-width: 940px; }
.legal-blocks { display: grid; gap: 14px; }
.legal-block {
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: var(--white);
    overflow: hidden;
}
.legal-block summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 800;
    color: var(--blue-900);
}
.legal-block summary::-webkit-details-marker { display: none; }
.legal-block summary:focus-visible { outline: 3px solid var(--blue-500); outline-offset: -3px; }
.legal-block[open] summary { border-bottom: 1px solid var(--ink-200); }
.legal-block[open] .faq-toggle { transform: rotate(180deg); }
.legal-text {
    padding: 20px 22px 22px;
    font-size: .89rem;
    line-height: 1.75;
    color: var(--ink-600);
}
.legal-text p { margin: 0 0 12px; }
.legal-text p:last-child { margin-bottom: 0; }

/* =====================================================================
   13. DETALLES DE CONTACTO PROPIOS DE ESTA VERSIÓN
   ===================================================================== */
.contact-partner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-radius: var(--r-md);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
}
/* Los dos logos, uno al lado del otro. La línea divisoria los separa sin
   necesidad de un borde en cada uno. */
.contact-partner-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* Proporción conservada: se limita la ALTURA y el ancho se calcula solo.
   El de Coomeva es horizontal (3,85:1) y el de la marca propia casi
   cuadrado (1,15:1), así que cada uno tiene su propia altura máxima: es
   la única forma de que los dos se vean del mismo porte sin deformarse. */
.contact-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}
.contact-logo-coomeva { max-height: 46px; }
.contact-logo-own { max-height: 60px; }
.contact-logo-sep {
    width: 1px;
    height: 38px;
    background: var(--blue-200);
}
.contact-partner p {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--blue-800);
}

/* =====================================================================
   Adaptación a pantallas menores
   ===================================================================== */
@media (max-width: 1080px) {
    .reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .step:not(:last-child)::after { display: none; }
    .baby-inner { grid-template-columns: 1fr; }
    .baby-photo { max-width: 460px; }
    .coverage-inner { grid-template-columns: 1fr; }
    .faq-inner { grid-template-columns: 1fr; }
}

/* Entre 901 y 1100 px el texto ocupa mucho más ancho (hasta el 89 %), así que
   el velo se queda alto casi hasta el borde derecho: la foto se asoma en la
   última franja, más cuanto más abajo (el degradado baja en diagonal). Es el
   precio de que el titular se lea en una tablet. */
@media (max-width: 1100px) {
    .slide-veil {
        background: linear-gradient(100deg,
            rgba(3, 114, 185, .97) 0%,
            rgba(3, 114, 185, .96) 55%,
            rgba(3, 114, 185, .95) 85%,
            rgba(3, 114, 185, .93) 93%,
            rgba(3, 114, 185, .30) 100%);
    }
}

@media (max-width: 900px) {
    /* En móvil el texto ocupa todo el ancho, así que manda el degradado
       vertical: el velo es fuerte justo donde está el texto y se aclara en
       las dos franjas libres (arriba del antetítulo y abajo de los botones),
       que es donde la fotografía puede verse. */
    .slide-veil {
        background: linear-gradient(180deg,
            rgba(3, 114, 185, .42) 0%,
            rgba(3, 114, 185, .93) 9%,
            rgba(3, 114, 185, .95) 45%,
            rgba(3, 114, 185, .96) 86%,
            rgba(3, 114, 185, .78) 100%);
    }
    .slider-track { min-height: min(86vh, 620px); }
    .slider-arrow { display: none; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-grid li { border-right: 0; border-bottom: 1px solid var(--ink-100); }
    .trust-grid li:last-child { border-bottom: 0; }
    .plan-row { grid-template-columns: 1fr; }
    .plan-row.is-flipped .plan-photo { order: 0; }
    .baby-points { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .slide-inner { max-width: none; padding: 46px 0 74px; }
    .slide-title { font-size: clamp(1.8rem, 1.1rem + 5.4vw, 2.35rem); }
    .slide-text { font-size: 1rem; }
    .slide-actions .btn { width: 100%; }
    .trust { margin-top: -34px; }
    .reasons-grid { grid-template-columns: 1fr; }
    .steps-track { grid-template-columns: 1fr; }
    .plan-actions .btn { flex: 1 1 100%; }
    .baby-actions .btn { width: 100%; }
    .advisor-actions .btn { width: 100%; }
    .reasons-cta { flex-direction: column; align-items: stretch; }
    .reasons-cta .btn { width: 100%; }
}

@media (max-width: 560px) {
    .slide-title { font-size: 1.85rem; line-height: 1.1; }
    .slider-dots { bottom: 16px; }
    .trust-grid li { padding: 18px 20px; }
    .plan-row { padding: 18px; }
    .coverage-card { padding: 24px 20px; }
}

/* Con movimiento reducido no hay zoom ni fundidos. */
@media (prefers-reduced-motion: reduce) {
    .slide.is-active .slide-media { animation: none; transform: none; }
    .slide { transition: none; }
    .plan-row:hover,
    .step:hover,
    .reason-card:hover { transform: none; }
    .plan-row:hover .plan-photo img { transform: none; }
}