/* ==========================================================================
   Helpi Insurance — estilos
   Colores de marca: azul #2E9BF0 y rojo #E84A5F (logo), verde WhatsApp.
   Móvil primero: los estilos base son de celular y crecen con min-width.
   ========================================================================== */

:root {
    --blue: #2E9BF0;
    --blue-ink: #1769C2;        /* azul para texto pequeño: contraste AA sobre blanco */
    --blue-soft: #EAF4FE;
    --blue-line: #CFE5FB;
    --red: #E84A5F;
    --red-ink: #D93A51;
    --wa: #22C35E;
    --wa-hover: #1BA84F;
    --yellow: #FFC83D;
    --yellow-soft: #FFF6DB;
    --yellow-line: #F6DF96;
    --navy: #0B2A5B;
    --ink: #0F172A;
    --text: #334155;
    --muted: #64748B;
    --line: #E2E8F0;
    --bg: #FFFFFF;
    --bg-soft: #F3F7FB;

    --tint-pink: #FDE8EC;   --c-pink: #E84A5F;
    --tint-blue: #E3F0FD;   --c-blue: #2E9BF0;
    --tint-purple: #F1E8FD; --c-purple: #8B5CF6;
    --tint-yellow: #FFF3D1; --c-yellow: #F5B014;
    --tint-teal: #DDF7F1;   --c-teal: #14B8A6;
    --c-green: #4CC46B;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Plus Jakarta Sans", var(--font);

    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
    --shadow: 0 10px 30px -12px rgb(15 23 42 / .18);
    --shadow-card: 0 1px 3px rgb(15 23 42 / .05), 0 12px 32px -18px rgb(15 23 42 / .22);
    --container: 1180px;
    --gutter: 16px;
    --nav-h: 68px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

.text-accent { color: var(--red); }
.bg-yellow { background: var(--c-yellow); } .bg-blue { background: var(--c-blue); } .bg-pink { background: var(--c-pink); }
.bg-green { background: var(--c-green); } .bg-purple { background: var(--c-purple); }
.text-yellow { color: var(--c-yellow); } .text-blue { color: var(--c-blue); } .text-pink { color: var(--c-pink); }
.tint-pink { background: var(--tint-pink); color: var(--c-pink); } .tint-blue { background: var(--tint-blue); color: var(--c-blue); }
.tint-purple { background: var(--tint-purple); color: var(--c-purple); } .tint-yellow { background: var(--tint-yellow); color: #D99A00; }
.tint-teal { background: var(--tint-teal); color: var(--c-teal); }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 46px; padding: 12px 22px; border: 0; border-radius: 999px;
    font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; text-align: center;
    cursor: pointer; transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 8px 20px -10px rgb(34 195 94 / .8); }
.btn--wa:hover { background: var(--wa-hover); }
.btn--brand { background: linear-gradient(90deg, #EC5A6E, var(--red-ink)); color: #fff; border-radius: 10px; box-shadow: 0 8px 20px -12px rgb(232 74 95 / .9); }
.btn--brand:hover { background: var(--red-ink); }
.btn--brand:disabled { opacity: .7; cursor: progress; transform: none; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1.05rem; }
.btn--lg .icon { width: 1.5em; height: 1.5em; }
.btn--block { display: flex; width: 100%; }

/* ---------- Etiquetas ---------- */
.pill { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.pill--blue { background: var(--blue-soft); color: var(--blue-ink); }
.pill--yellow { background: var(--yellow-soft); color: #8A6100; border: 1px solid var(--yellow-line); }
.pill--caps { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; }

/* ---------- Secciones ---------- */
.section { padding-block: 56px; }
.section__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 36px; }
.section__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4.4vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-align: center; text-wrap: balance; }
.section__title--blue { color: var(--navy); }
.section__title--narrow { max-width: 18ch; }
.section__subtitle { color: var(--muted); max-width: 60ch; }
.section__subtitle--ink { color: var(--text); }

/* ==========================================================================
   1. Barra superior
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.nav.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); }

.logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.logo__img { height: 46px; width: auto; }
@media (min-width: 720px) { .logo__img { height: 52px; } }

.nav__menu { display: none; }
.nav__menu a { text-decoration: none; color: var(--text); font-weight: 500; padding: 8px 4px; transition: color .2s; }
.nav__menu a:hover { color: var(--blue-ink); }
.nav__cta { display: none; }
.nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.nav__toggle .icon { width: 22px; height: 22px; }
.nav__close { display: none; }

/* Menú abierto en celular */
.nav.is-open .nav__menu { display: flex; flex-direction: column; position: absolute; inset: var(--nav-h) 0 auto 0; padding: 8px var(--gutter) 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.nav.is-open .nav__menu a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.nav.is-open .nav__open { display: none; }
.nav.is-open .nav__close { display: block; }

.nav__menu a[aria-current="page"] { color: var(--blue-ink); font-weight: 600; }
/* Con 5 enlaces el menú completo necesita unos 1100px; por debajo va el botón de menú. */
@media (min-width: 1100px) {
    .logo { margin-right: 0; }
    .nav__menu { display: flex; gap: 26px; margin-inline: auto; }
    .nav__cta { display: inline-flex; }
    .nav__toggle { display: none; }
}

/* ==========================================================================
   2. Banner (hero)
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: linear-gradient(100deg, #FFFFFF 0%, #F4F9FF 45%, #EAF4FE 100%); }
.hero__decor { position: absolute; inset: 0 auto auto 0; width: 360px; height: 260px; pointer-events: none; opacity: .9;
    background:
        radial-gradient(120px 220px at 70px -10px, rgb(255 200 61 / .55), transparent 70%),
        radial-gradient(90px 200px at 170px -20px, rgb(46 155 240 / .28), transparent 70%); }
.hero__grid { position: relative; display: grid; gap: 28px; padding-block: 28px 40px; }

.hero__photo { display: none; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 6.4vw, 2.6rem); line-height: 1.14; letter-spacing: -.025em; color: var(--navy); text-wrap: balance; }
.hero__subtitle { font-size: 1.02rem; color: var(--text); max-width: 52ch; }
.hero__copy .btn { margin-top: 6px; }
.hero__micro { font-size: .85rem; color: var(--muted); }

/* Tarjeta del formulario */
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow); align-self: start; }
.quote-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--navy); margin-bottom: 14px; }
.quote-form { display: grid; gap: 10px; }
.field input, .field select {
    width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff;
    color: var(--ink); /* fondo siempre blanco: no heredar el blanco de la tarjeta translúcida */
    font-size: 16px; /* 16px evita el zoom automático en iPhone */
    transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; padding-right: 40px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.field select:invalid { color: #64748B; }
.field option { color: var(--ink); }
.field input::placeholder { color: #64748B; }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(46 155 240 / .2); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--red-ink); box-shadow: 0 0 0 3px rgb(232 74 95 / .15); }
.quote-form .btn { margin-top: 4px; min-height: 50px; }
.quote-form__error { padding: 10px 12px; border-radius: 10px; background: #FDECEF; color: #B4233A; font-size: .9rem; font-weight: 500; }
.quote-form__legal { display: flex; gap: 8px; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.quote-form__legal .icon { width: 14px; height: 14px; margin-top: 2px; color: #94A3B8; }
.quote-card__success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 6px; text-align: center; color: var(--text); }
.quote-card__success .icon { width: 52px; height: 52px; color: var(--wa); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 720px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 36px; padding-block: 48px; }
    .quote-card { padding: 24px; }
}
@media (min-width: 1100px) {
    .hero__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) 340px; gap: 32px; padding-block: 0; min-height: 520px; }
    .hero__title { font-size: clamp(2.2rem, 2.9vw, 2.6rem); }
    .hero__photo { display: block; align-self: stretch; margin-left: calc(var(--gutter) * -1); position: relative; }
    .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
        -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
    .hero__copy { padding-block: 40px; }
    .quote-card { align-self: center; }
}
@media (min-width: 1240px) {
    /* La foto llega hasta el borde izquierdo de la ventana, como en la maqueta. */
    .hero__photo { margin-left: calc((100vw - var(--container)) / -2); }
}

/* ---------- Fila de confianza ---------- */
.trust { background: var(--blue-soft); border-block: 1px solid var(--blue-line); }
.trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding-block: 18px; }
.trust__item { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .88rem; color: var(--navy); }
.trust__item .icon { width: 28px; height: 28px; color: var(--blue); }
@media (min-width: 900px) {
    .trust__list { grid-template-columns: repeat(4, 1fr); padding-block: 22px; }
    .trust__item { justify-content: center; font-size: .95rem; }
    .trust__item + .trust__item { border-left: 1px solid var(--blue-line); }
}

/* ==========================================================================
   3. Beneficios
   ========================================================================== */
.benefits .section__title { margin-bottom: 32px; }
.benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.benefit__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .08), 0 8px 18px -10px currentColor; }
.benefit__icon .icon { width: 28px; height: 28px; }
.benefit__icon.bg-yellow { color: #fff; }
.benefit__title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.benefit__text { font-size: .88rem; color: var(--muted); text-wrap: pretty; }
@media (min-width: 720px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; } }
@media (min-width: 1100px) {
    .benefits__grid { grid-template-columns: repeat(6, 1fr); gap: 0; }
    .benefit { padding-inline: 16px; }
    .benefit + .benefit { border-left: 1px solid var(--line); }
}

/* ==========================================================================
   4. Servicios
   ========================================================================== */
.services { background: var(--bg-soft); }
.services__grid { display: grid; gap: 20px; }
.svc { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 18px; box-shadow: var(--shadow-card); min-width: 0; }
.svc__head { display: flex; align-items: center; gap: 12px; }
.svc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; }
.svc__icon .icon { width: 22px; height: 22px; }
.svc__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); line-height: 1.2; }
.svc__product { font-size: .78rem; font-weight: 600; color: var(--muted); }
.svc__phrase { padding: 10px 14px; border-radius: 10px; background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--blue-ink); font-weight: 600; font-size: .9rem; }
.svc__cta { margin-top: auto; border-radius: 10px; }

.checklist { display: grid; gap: 8px; font-size: .9rem; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--wa); }
.checklist strong { color: var(--ink); }
.checklist--dots .icon { color: var(--blue); }
@media (min-width: 560px) { .checklist--cols { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* Tablas de planes: se desplazan dentro de su caja en pantallas angostas. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.plans { width: 100%; border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.plans th, .plans td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.plans thead th { background: var(--bg-soft); font-weight: 600; color: var(--text); font-size: .76rem; }
.plans tbody th { font-weight: 700; color: var(--ink); }
.plans tbody tr:last-child > * { border-bottom: 0; }
.plans .is-accent { color: #15A34A; font-weight: 700; }
.plans--dark thead th { background: var(--navy); color: #fff; }
.plans--dark { white-space: normal; }
.plans--dark th, .plans--dark td { padding: 10px; }
.plans--dark tbody th { min-width: 150px; }
.plans--dark td { min-width: 92px; }
.plans--dark td:last-child { color: #15A34A; font-weight: 700; }
.plans--dark tbody tr:nth-child(even) { background: #FAFCFE; }

.savings { padding: 14px 16px; border-radius: 12px; background: var(--yellow-soft); border: 1px solid var(--yellow-line); font-size: .84rem; }
.savings__title { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.savings li { position: relative; padding-left: 14px; }
.savings li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #D99A00; }

@media (min-width: 900px) {
    .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .svc { padding: 26px 24px; }
    .svc--wide { grid-column: 1 / -1; width: 100%; max-width: 580px; justify-self: center; }
}

/* ==========================================================================
   5. ManhattanLife
   ========================================================================== */
.manhattan { background: linear-gradient(180deg, #FFFBF0 0%, #FFFDF8 40%, #FFFFFF 100%); }
.manhattan__backing { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.manhattan__backing .icon { color: #D99A00; width: 16px; height: 16px; }
.manhattan .section__head .btn { margin-top: 6px; }
.manhattan__grid { display: grid; gap: 20px; }
.ml-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; background: #fff; border: 1px solid var(--yellow-line); border-radius: var(--radius-lg); padding: 22px 18px; box-shadow: 0 16px 40px -24px rgb(217 154 0 / .45); }
.ml-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ml-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--ink); }
.ml-card__ages { font-size: .8rem; font-weight: 600; color: var(--blue-ink); margin-top: 2px; }
.price-badge { padding: 5px 12px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ml-card__intro { padding: 12px 14px; border-radius: 12px; background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--navy); font-weight: 500; font-size: .92rem; }
.ml-card__cta { margin-top: auto; border-radius: 10px; }
.ml-notes { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .82rem; }
.ml-notes li { position: relative; padding-left: 14px; }
.ml-notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.ml-notes strong { color: var(--ink); }
.manhattan__footnote { margin-top: 24px; font-size: .76rem; color: var(--muted); text-align: center; max-width: 90ch; margin-inline: auto; }
@media (min-width: 1000px) {
    .manhattan__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
    .ml-card { padding: 28px; }
}

/* ==========================================================================
   6. Cómo funciona
   ========================================================================== */
.steps { background: linear-gradient(180deg, #FFFFFF, var(--blue-soft)); }
.steps .section__title { margin-bottom: 32px; }
.steps__list { display: grid; gap: 28px; counter-reset: none; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; }
.step__icon .icon { width: 44px; height: 44px; stroke-width: 1.6; }
.step__head { display: flex; align-items: center; gap: 10px; }
.step__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; font-family: var(--font-display); flex: none; }
.step__num.bg-yellow { color: var(--ink); }
.step__title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.step__text { font-size: .9rem; color: var(--muted); max-width: 32ch; }
@media (min-width: 820px) {
    .steps__list { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    /* Flecha entre pasos */
    .step + .step::before {
        content: ""; position: absolute; left: -28px; top: 72px; width: 14px; height: 14px;
        border-top: 2.5px solid var(--navy); border-right: 2.5px solid var(--navy); transform: rotate(45deg);
    }
}

/* ==========================================================================
   7. Llamado a la acción final (banda azul)
   ========================================================================== */
.btn--light { background: #fff; color: var(--navy); box-shadow: 0 8px 20px -12px rgb(11 42 91 / .6); }
.btn--light:hover { background: #F1F5F9; }
.btn--light .icon { color: var(--blue); }

/* El fondo continúa el degradado de "Cómo funciona"; las ondas amarillas asoman en las esquinas. */
.cta { position: relative; background: var(--blue-soft); padding-top: 28px; overflow: hidden; }
/* Elipses inclinadas: el azul tapa la mitad inferior y solo asoma la curva. */
.cta::before, .cta::after { content: ""; position: absolute; top: 4px; width: 34%; height: 110px; border-radius: 50%; background: var(--yellow); opacity: .7; }
.cta::before { left: -10%; transform: rotate(-7deg); }
.cta::after { right: -10%; transform: rotate(7deg); }
.cta__band { position: relative; z-index: 1; background: linear-gradient(100deg, var(--blue) 0%, #2589E0 60%, #1E78CF 100%); border-radius: 48px 48px 0 0 / 36px 36px 0 0; color: #fff; }
.cta__inner { display: grid; gap: 24px; padding-block: 40px 44px; }
.cta__copy { display: flex; gap: 16px; align-items: flex-start; }
.cta__icon .icon { width: 48px; height: 48px; stroke-width: 1.6; }
.cta__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 1.85rem); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.cta__text { margin-top: 8px; color: rgb(255 255 255 / .9); max-width: 56ch; }
.cta__actions { display: flex; flex-direction: column; gap: 12px; }
.cta__actions .btn--wa { box-shadow: 0 10px 24px -10px rgb(0 0 0 / .35); }
@media (min-width: 560px) { .cta__actions { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 1000px) {
    .cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
    .cta__actions { padding-left: 48px; border-left: 1px solid rgb(255 255 255 / .35); flex-direction: column; flex-wrap: nowrap; }
}
@media (min-width: 1200px) { .cta__actions { flex-direction: row; } }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.footer { background: #0E1628; color: #A7B3C6; font-size: .9rem; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 36px; padding-block: 52px 40px; }
.footer .logo__img { height: 48px; }
.footer__about { margin-top: 16px; max-width: 42ch; line-height: 1.6; }
.footer__social { display: flex; gap: 14px; margin-top: 20px; }
.footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #C7D2E1; }
.footer__social a:hover { background: rgb(255 255 255 / .08); }
.footer__heading { font-family: var(--font-display); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer__links { display: grid; gap: 10px; }
.footer__contact { display: grid; gap: 12px; }
.footer__contact li { display: flex; align-items: center; gap: 10px; }
.footer__contact .icon { width: 17px; height: 17px; }
.c-wa { color: var(--wa); } .c-mail { color: #C7D2E1; } .c-clock { color: #C7D2E1; } .c-ig { color: #F0577A; } .c-web { color: var(--blue); }
.footer__contact span[class^="c-"] { display: inline-flex; }
.footer__cta { border-radius: 12px; }
.footer__bottom { border-top: 1px solid rgb(255 255 255 / .08); padding-block: 20px 24px; font-size: .8rem; color: #8592A6; }
.footer__bottom .container { display: grid; gap: 8px; }
.footer__legal { max-width: 110ch; line-height: 1.55; }
.footer__pages { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__pages a { color: #B4BFCE; }
.footer__pages a:hover { color: #fff; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
    .footer__grid { grid-template-columns: 1.3fr 1fr 1.1fr .9fr; gap: 40px; padding-block: 60px 44px; }
    .footer__cta { width: 100%; max-width: 220px; }
}
/* Deja libre la esquina del botón flotante para que no tape el texto legal. */
@media (max-width: 719px) { .footer__bottom { padding-bottom: 92px; } }

/* ==========================================================================
   Página Obamacare
   ========================================================================== */
.btn--primary { background: var(--blue); color: #fff; border-radius: 10px; box-shadow: 0 8px 20px -12px rgb(46 155 240 / .9); }
.btn--primary:hover { background: #1F86D8; }
.btn--primary:disabled { opacity: .7; cursor: progress; transform: none; }

/* Fondo fotográfico con velo oscuro para que el texto blanco se lea. La foto va en el
   style="background-image" de la vista: una url() relativa dentro de una variable CSS
   se resolvería contra assets/css/ y no cargaría. */
.photo-bg { position: relative; isolation: isolate; color: #fff; background-color: var(--navy); background-position: center; background-size: cover; background-repeat: no-repeat; }
.photo-bg::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(11 22 40 / .82) 0%, rgb(11 22 40 / .6) 55%, rgb(11 22 40 / .4) 100%); }
.rule { width: 100%; max-width: 360px; height: 3px; margin: 0; border: 0; border-radius: 3px; background: var(--blue); }
.rule--center { margin: 14px auto 0; max-width: 520px; }

.oc-hero { padding-block: 44px 52px; }
.oc-hero__grid { display: grid; gap: 32px; align-items: center; }
.oc-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.oc-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5.6vw, 2.75rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.oc-hero__accent { color: #6CC0FF; }
.oc-hero__text { font-size: 1.05rem; color: rgb(255 255 255 / .92); max-width: 52ch; }
.oc-hero__proof { font-weight: 600; font-size: 1.05rem; }
.oc-hero__note { font-size: .9rem; color: rgb(255 255 255 / .85); max-width: 52ch; }

/* Formulario sobre foto: tarjeta translúcida, etiquetas visibles como en la página original. */
.quote-card--glass { background: rgb(15 23 42 / .62); border-color: rgb(255 255 255 / .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; box-shadow: 0 24px 48px -24px rgb(0 0 0 / .6); }
.quote-card--glass .quote-card__title { color: #fff; text-align: center; font-size: 1.35rem; margin-bottom: 6px; }
.quote-card__subtitle { text-align: center; font-size: .92rem; color: rgb(255 255 255 / .85); margin-bottom: 16px; }
.quote-card--glass .field label { display: block; margin-bottom: 5px; font-size: .85rem; font-weight: 600; }
.quote-card--glass .field input, .quote-card--glass .field select { border-color: transparent; }
.quote-card--glass .quote-form__legal { color: rgb(255 255 255 / .75); }
.quote-card--glass .quote-form__legal .icon { color: rgb(255 255 255 / .6); }
.quote-card--glass .quote-card__success { color: #fff; }

@media (min-width: 900px) {
    .oc-hero { padding-block: 72px 80px; }
    .oc-hero__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
}

/* Todo lo que necesitas saber */
.oc-know__grid { display: grid; gap: 20px; }
.oc-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 22px 24px; border: 1px solid var(--blue-line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 14px 30px -20px rgb(46 155 240 / .7); }
.oc-card__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--blue-soft); color: var(--blue-ink); }
.oc-card__icon .icon { width: 34px; height: 34px; }
.oc-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.25; color: var(--blue-ink); text-wrap: balance; }
.oc-card__body { display: grid; gap: 2px; font-size: .92rem; color: var(--text); }
.oc-card__closing { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--navy); }
.oc-myths { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 32px; padding: 26px 22px; border-radius: 28px; background: linear-gradient(100deg, var(--blue), #2589E0); color: #fff; text-align: center; box-shadow: 0 18px 36px -22px rgb(46 155 240 / .9); }
.oc-myths p { font-size: 1.08rem; max-width: 62ch; text-wrap: balance; }
@media (min-width: 900px) { .oc-know__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .oc-myths { padding: 30px 48px; } }

/* ¿Qué es Obamacare? */
.oc-what { background: var(--bg-soft); }
.oc-what__grid { display: grid; gap: 32px; align-items: center; }
.oc-what__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.oc-left { text-align: left; }
.oc-what__media img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (min-width: 900px) { .oc-what__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* Entendemos tu camino */
.oc-why { padding-block: 64px; }
.oc-on-photo { color: #fff; }
.oc-why__grid { display: grid; gap: 32px; margin-top: 40px; }
.oc-why__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.oc-why__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue); box-shadow: 0 10px 24px -10px rgb(46 155 240 / .9); }
.oc-why__icon .icon { width: 28px; height: 28px; }
.oc-why__item h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.oc-why__item p { color: rgb(255 255 255 / .88); max-width: 32ch; }
@media (min-width: 820px) { .oc-why { padding-block: 88px; } .oc-why__grid { grid-template-columns: repeat(3, 1fr); } }

/* Servicios con foto */
.oc-services__grid { display: grid; gap: 20px; }
.oc-service { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
.oc-service img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.oc-service__body { padding: 20px 20px 24px; }
.oc-service h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--ink); margin-bottom: 8px; }
.oc-service p { font-size: .92rem; color: var(--muted); }
@media (min-width: 820px) { .oc-services__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Aseguradoras aliadas */
.oc-insurers { background: var(--bg-soft); }
.oc-insurers__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.oc-insurers__list li { display: grid; place-items: center; height: 96px; padding: 16px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.oc-insurers__list img { max-height: 52px; width: auto; object-fit: contain; }
@media (min-width: 720px) { .oc-insurers__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .oc-insurers__list { grid-template-columns: repeat(6, 1fr); } }

/* Cifras */
.oc-stats { background: linear-gradient(100deg, var(--blue), #1E78CF); color: #fff; }
.oc-stats__list { display: grid; gap: 24px; padding-block: 36px; text-align: center; }
.oc-stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1.1; }
.oc-stats span { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgb(255 255 255 / .88); }
@media (min-width: 720px) { .oc-stats__list { grid-template-columns: repeat(3, 1fr); } .oc-stats li + li { border-left: 1px solid rgb(255 255 255 / .25); } }

/* Testimonios */
.oc-testimonials .section__title { margin-bottom: 32px; }
.oc-testimonials__grid { display: grid; gap: 20px; }
.oc-quote { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 26px 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.oc-quote__mark { width: 30px; height: 30px; color: var(--blue); }
.oc-quote blockquote { margin: 0; font-size: .93rem; color: var(--text); }
.oc-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; font-weight: 700; color: var(--ink); }
.oc-quote__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tint-pink); color: var(--red-ink); font-family: var(--font-display); font-weight: 800; }
@media (min-width: 900px) { .oc-testimonials__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Cierre con segundo formulario */
.oc-final { padding-block: 56px; background-position: center 30%; }
.oc-final__text { font-size: 1.15rem; color: rgb(255 255 255 / .92); max-width: 44ch; }
@media (min-width: 900px) { .oc-final { padding-block: 96px; } }

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */
.wa-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: grid; place-items: center; width: 58px; height: 58px;
    border-radius: 50%; background: var(--wa); color: #fff; text-decoration: none;
    box-shadow: 0 10px 28px -8px rgb(34 195 94 / .7), 0 2px 6px rgb(0 0 0 / .12);
    transition: background-color .2s, transform .2s;
}
.wa-float .icon { width: 30px; height: 30px; }
/* Burbuja "¿Tienes dudas? Escríbenos" a la izquierda del botón: solo opacity y transform. */
.wa-float__label {
    position: absolute; right: calc(100% + 12px); top: 50%;
    padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink);
    font-size: .88rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow);
    opacity: 0; transform: translate(8px, -50%); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.wa-float:hover, .wa-float:focus-visible { background: var(--wa-hover); transform: translateY(-2px); }
.wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); }
@media (hover: none) { .wa-float__label { display: none; } }

/* ==========================================================================
   Páginas legales (privacidad.php, terminos.php)
   ========================================================================== */
.quote-form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal { background: var(--bg-soft); }
.legal__inner { max-width: calc(76ch + var(--gutter) * 2); }
.legal__head { margin-bottom: 28px; }
.legal__head .section__title { text-align: left; }
.legal__updated { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.legal__section + .legal__section { margin-top: 24px; }
.legal__section h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--navy); margin-bottom: 8px; }
.legal__section p + p { margin-top: 10px; }
.legal__section ul { margin-top: 10px; padding-left: 1.25em; list-style: disc; }
.legal__section li + li { margin-top: 4px; }
.legal__section a { color: var(--blue-ink); }
.legal__section + .legal__section:not(:has(> h2)) { margin-top: 10px; }