/* CONTRASTE: varios grises del mock (#9AA7B4, #8A97A6, #7A8899, #6B7A8A) quedaban entre 2.45:1
   y 4.4:1 sobre blanco — por debajo del 4.5:1 que pide WCAG AA para texto pequeño. Un mock no
   está auditado; una página en producción sí tiene que estarlo. Se subieron al #5A6A7A que el
   propio diseño ya usa de cuerpo, así que la paleta no cambia y el texto se lee.

   PreMonet landing — diseño 2A "Premium SaaS: claro, aireado, editorial"
   (fuente: proyecto de diseño "PreMonet Landing.dc.html", sección 2A).

   Sustituye al 1A "Institucional claro" que vivía aquí. Los tres cambios que definen el 2A y de
   los que se deriva todo lo demás:

   1. Plus Jakarta Sans deja de ser sólo la cara de la marca y pasa a llevar TODO — títulos, nav
      y cuerpo. El 1A usaba IBM Plex Sans de cuerpo; el aire editorial del 2A viene de una sola
      familia con una escala muy contrastada.
   2. Los títulos van grandes y con el tracking cerrado (-3px en el h1, -1.5px en los h2). Es lo
      que hace que la página se lea como editorial y no como un formulario.
   3. Fondo BLANCO con secciones alternas en #FAFBFD, en vez del gris parejo del 1A. El aire lo
      da el blanco y el padding vertical, no las cajas.

   Paleta (tomada del diseño, ya existente en premonet.css): tinta #10243E, verde #0BA47E con
   #12C99B para el degradado, texto #5A6A7A, apagados #8A97A6/#9AA7B4, bordes #E9EFF4/#E4EBF1. */

.pm-landing {
    background: #fff;
    color: #10243E;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* `color: inherit` en los enlaces vale (0,1,1) y le GANA a cualquier regla de una sola clase:
   .pm-nav__cta y .pm-btn--green quedaban con el color heredado del contenedor en vez del suyo.
   Se veía: "Crear cuenta" salía gris sobre azul marino y el botón verde salía azul sobre verde.
   Por eso los componentes que fijan color van prefijados con .pm-landing — misma familia de
   especificidad, y ganan por orden. */
.pm-landing a { color: inherit; text-decoration: none; }
.pm-landing a:hover { opacity: .85; }

/* El foco debe verse: la nav y los CTA son navegables con teclado y el diseño no trae estado
   propio para ello. */
.pm-landing a:focus-visible,
.pm-landing button:focus-visible {
    outline: 2px solid #0BA47E;
    outline-offset: 3px;
    border-radius: 6px;
    opacity: 1;
}

/* El nav es sticky (~66px: 18px de padding arriba y abajo más el contenido), así que un salto a
   un ancla dejaría el título de la sección escondido detrás de él. scroll-margin-top reserva ese
   espacio en el destino — es la propiedad hecha para esto y no exige tocar el marcado ni JS.

   Aplica a los tres anclas del nav y a las URLs cortas (/precios, /como-funciona, /aseguradoras),
   que aterrizan en el mismo sitio. #preguntas incluido: el footer enlaza ahí. */
#como-funciona,
#precios,
#aseguradoras,
#preguntas {
    scroll-margin-top: 84px;
}

.pm-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 44px;
}

/* Ojo con esto: en el 2A cada sección lleva su propio padding vertical y el contenedor NO
   aporta ninguno. Mezclar ambos es cómo se acaba con separaciones que se cancelan entre sí. */
.pm-section { padding: 76px 0; }
.pm-section--tint { background: #FAFBFD; border-top: 1px solid #F0F4F8; border-bottom: 1px solid #F0F4F8; }

/* Eyebrow: la etiqueta verde en versalitas que abre cada sección. Es el recurso estructural del
   2A — dice de qué trata el bloque antes del título, y por eso va en el color de acento y no en
   gris decorativo. */
.pm-eyebrow {
    text-align: center;
    font-size: 12.5px;
    color: #0A7E5E;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.pm-h2 {
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    text-align: center;
    color: #10243E;
    letter-spacing: -1.5px;
    line-height: 1.12;
    margin-bottom: 16px;
}

.pm-sub {
    text-align: center;
    color: #5A6A7A;
    font-size: 17px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 44px;
}

/* ---------- BOTONES ---------- */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    padding: 15px 30px;
    border-radius: 12px;
    transition: transform .16s ease, box-shadow .16s ease;
}
.pm-btn:hover { opacity: 1; transform: translateY(-1px); }

.pm-landing .pm-btn--green {
    background: #0BA47E;
    color: #fff;
    box-shadow: 0 16px 34px -12px rgba(11, 164, 126, .75);
}
.pm-landing .pm-btn--green:hover { box-shadow: 0 20px 40px -12px rgba(11, 164, 126, .85); }

.pm-landing .pm-btn--outline {
    background: #fff;
    color: #10243E;
    border: 1.5px solid #DDE5EC;
    padding: 15px 24px;
}

.pm-landing .pm-btn--navy {
    background: #fff;
    color: #10243E;
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5);
}

/* ---------- NAV ---------- */
.pm-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #EEF2F6;
}
.pm-nav__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.pm-nav__links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 14.5px;
    font-weight: 500;
    color: #54677D;
}
.pm-nav__links a:not(.pm-nav__cta):hover { color: #10243E; opacity: 1; }
.pm-landing .pm-nav__cta {
    background: #10243E;
    color: #fff;
    padding: 10px 19px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgba(16, 36, 62, .6);
}

/* ---------- HERO ----------
   Centrado, no a dos columnas como el 1A. El resplandor radial verde es lo único que hay detrás:
   marca el eje de la página sin meter una caja más. */
.pm-hero {
    position: relative;
    padding: 76px 0 0;
    text-align: center;
    background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(11, 164, 126, .13), transparent 65%);
}

.pm-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #E2E9F0;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    margin-bottom: 30px;
    box-shadow: 0 4px 14px -6px rgba(16, 36, 62, .18);
    font-size: 13.5px;
    color: #42556A;
    font-weight: 500;
}
.pm-hero__badge i { font-style: normal; color: #9AA7B4; }
.pm-hero__badge span {
    background: #E7F6F0;
    color: #0A7E5E;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .3px;
}

.pm-hero__title {
    font-weight: 700;
    font-size: clamp(38px, 5.6vw, 74px);
    line-height: 1.02;
    color: #10243E;
    letter-spacing: -3px;
    max-width: 940px;
    margin: 0 auto 22px;
}

/* La firma del 2A: una frase del titular en degradado recortado sobre el texto. Va sobre "en
   tiempo real" porque es la promesa de la que cuelga todo el producto. */
.pm-hero__accent {
    background: linear-gradient(100deg, #0BA47E, #12C99B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pm-hero__lead {
    font-size: 19px;
    line-height: 1.62;
    color: #5A6A7A;
    max-width: 640px;
    margin: 0 auto 34px;
}

.pm-hero__cta-row {
    display: flex;
    gap: 13px;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pm-hero__note { font-size: 13px; color: #5A6A7A; margin-bottom: 52px; }

/* ---------- PANEL DEL HERO ----------
   Va debajo del titular y centrado, como una captura del producto. En el 1A era la columna
   derecha; aquí es la prueba de la promesa y por eso ocupa el eje. */
.pm-herocard {
    max-width: 940px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E4EBF1;
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 40px 80px -40px rgba(16, 36, 62, .35);
    text-align: left;
}

/* Barra de navegador: sitúa el panel como PRODUCTO, no como gráfico decorativo. */
.pm-herocard__chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 0 16px;
    border-bottom: 1px solid #F0F4F8;
    margin-bottom: 18px;
}
.pm-herocard__chrome i { width: 9px; height: 9px; border-radius: 999px; background: #E4EBF1; }
.pm-herocard__chrome i:first-child { background: #F2C4CC; }
.pm-herocard__chrome i:nth-child(2) { background: #F5DFB0; }
.pm-herocard__chrome span {
    margin-left: 10px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    color: #5A6A7A;
}

.pm-herocard__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.pm-herocard__stats > div {
    background: #F8FAFC;
    border: 1px solid #EEF2F6;
    border-radius: 11px;
    padding: 13px 15px;
}
.pm-herocard__stats span { display: block; font-size: 11.5px; color: #5A6A7A; font-weight: 600; margin-bottom: 5px; }
.pm-herocard__stats b { font-size: 19px; font-weight: 700; color: #10243E; letter-spacing: -.6px; }
.pm-herocard__stats b.is-green { color: #0A7E5E; }

.pm-herocard__table { width: 100%; border-collapse: collapse; }
.pm-herocard__table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5A6A7A;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEF2F6;
}
.pm-herocard__table td {
    padding: 13px 0;
    font-size: 14px;
    color: #10243E;
    font-weight: 500;
    border-bottom: 1px solid #F5F8FB;
}
.pm-herocard__table tr:last-child td { border-bottom: none; }
.pm-herocard__table td:last-child { text-align: right; }

.pm-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.pm-tag--green { background: #E7F6F0; color: #0A7E5E; }
.pm-tag--amber { background: #FDF0DA; color: #8A6412; }
.pm-tag--blue { background: #EAF1FB; color: #276ACA; }

/* ---------- ASEGURADORAS (marquesina) ----------
   Desfilan en vez de listarse: son más de las que caben en una línea, y el movimiento dice
   "hay muchas" mejor que una rejilla recortada. El degradado de máscara evita el corte seco. */
.pm-insurers { padding: 64px 0; }
.pm-insurers__label {
    text-align: center;
    font-size: 12px;
    color: #5A6A7A;
    letter-spacing: 1.6px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.pm-insurers__track {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.pm-insurers__logos {
    display: flex;
    gap: 64px;
    width: max-content;
    align-items: center;
    padding: 0 32px;
    animation: pmMarquee 26s linear infinite;
}
.pm-insurers__logos span {
    font-weight: 700;
    font-size: 23px;
    color: #77869A;
    white-space: nowrap;
}

@keyframes pmMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- DOLOR / BENEFICIOS ---------- */
.pm-pain__grid,
.pm-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pm-feature,
.pm-step {
    background: #fff;
    border: 1px solid #E9EFF4;
    border-radius: 16px;
    padding: 30px;
}
.pm-feature__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #E7F6F0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.pm-feature h3,
.pm-step h3 {
    font-weight: 700;
    font-size: 19px;
    color: #10243E;
    letter-spacing: -.3px;
    margin-bottom: 10px;
}
.pm-feature p,
.pm-step p { color: #5A6A7A; font-size: 15px; line-height: 1.6; }

/* El número SÍ significa algo aquí: los cuatro pasos son una secuencia real y el orden es
   información para quien lee. No es un adorno numérico. */
.pm-step__num {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #10243E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
}
/* El último paso en verde: es donde el médico cobra, y el color lo dice antes de leerlo. */
.pm-step__num--pago { background: #0BA47E; }

/* ---------- PRECIOS ----------
   Dos columnas comparadas: hacerlo tú mismo (claro, apagado) contra PreMonet (tinta, con peso).
   El contraste ES el argumento; un solo cuadro no lo diría. */
.pm-pricing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
}
.pm-pricing__card {
    background: #fff;
    border: 1px solid #E4EBF1;
    border-radius: 18px;
    padding: 36px;
}
.pm-pricing__card--pm {
    background: #10243E;
    border-color: #10243E;
    color: #fff;
    box-shadow: 0 30px 60px -30px rgba(16, 36, 62, .7);
}
.pm-pricing__eyebrow {
    font-size: 12.5px;
    color: #5A6A7A;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.pm-pricing__card--pm .pm-pricing__eyebrow { color: #3DD9A8; }

.pm-pricing__pct {
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -1.5px;
    line-height: 1;
    margin-bottom: 6px;
    color: #77869A;
}
.pm-pricing__card--pm .pm-pricing__pct { color: #fff; }
.pm-pricing__pct span { font-size: 26px; }

.pm-pricing__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pm-pricing__badge {
    background: rgba(61, 217, 168, .16);
    color: #3DD9A8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.pm-pricing__pct del { font-size: 22px; color: #7E90A4; font-weight: 600; letter-spacing: 0; margin-left: 8px; }
.pm-pricing__cta { width: 100%; margin-top: 26px; }

.pm-pricing__unit { font-size: 14px; color: #5A6A7A; margin-bottom: 26px; }
.pm-pricing__card--pm .pm-pricing__unit { color: #A8B5C2; }

.pm-pricing__list { display: flex; flex-direction: column; gap: 12px; }
.pm-pricing__list div {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    color: #5A6A7A;
    line-height: 1.5;
}
.pm-pricing__card--pm .pm-pricing__list div { color: #DCE7F2; }
.pm-pricing__list i { font-style: normal; color: #C3CDD8; flex-shrink: 0; }
.pm-pricing__card--pm .pm-pricing__list i { color: #3DD9A8; }

/* Tintes de icono del PROBLEMA: tres colores distintos porque son tres problemas distintos.
   Un solo verde para los tres los leería como variantes de lo mismo. */
.pm-feature__icon--red { background: #FDECEF; }
.pm-feature__icon--amber { background: #FDF0DA; }
.pm-feature__icon--blue { background: #EAF1FB; }

/* ---------- BENTO (LA SOLUCIÓN) ----------
   Anchos desiguales alternados (1.35fr/1fr y luego 1fr/1.35fr): es lo que impide que se lea como
   una rejilla pareja de tarjetas y le da el ritmo editorial del 2A.

   Dos celdas van con color pleno —la de visibilidad en marino, la de velocidad en verde— porque
   son las que sostienen el bloque. Las otras dos claras: repartir el contraste lo diluye. */
.pm-bento { display: flex; flex-direction: column; gap: 18px; }
.pm-bento__row { display: grid; gap: 18px; }
.pm-bento__row--wide-first { grid-template-columns: 1.35fr 1fr; }
.pm-bento__row--wide-last { grid-template-columns: 1fr 1.35fr; }

.pm-bento__cell { border-radius: 18px; padding: 34px; position: relative; overflow: hidden; }
.pm-bento__cell--soft { background: #F8FAFC; border: 1px solid #E9EFF4; }
.pm-bento__cell h3 {
    font-weight: 700;
    font-size: 25px;
    letter-spacing: -.8px;
    color: #10243E;
    margin-bottom: 11px;
}
.pm-bento__cell p {
    color: #5A6A7A;
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 26px;
}
/* El resplandor va DETRÁS del contenido: ::before más position:relative en los hijos. */
.pm-bento__cell--navy > *,
.pm-bento__cell--green > * { position: relative; }

/* La celda del panel: marino con el resplandor verde en la esquina superior derecha. */
.pm-bento__cell--navy { background: #10243E; color: #fff; }
.pm-bento__cell--navy::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(11, 164, 126, .35), transparent 70%);
    pointer-events: none;
}
.pm-bento__cell--navy h3 { color: #fff; }
.pm-bento__cell--navy p { color: #B6C7DA; max-width: 400px; }

.pm-bento__cell--green {
    background: linear-gradient(135deg, #0BA47E, #0A8A6C);
    color: #fff;
}
.pm-bento__cell--green::before {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -30px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
    pointer-events: none;
}
.pm-bento__cell--green h3 { color: #fff; }
.pm-bento__cell--green p { color: #DFF5EE; }

.pm-bento__live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(61, 217, 168, .14);
    color: #3DD9A8;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.pm-bento__live i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #3DD9A8;
    animation: pmPulse 2s ease-in-out infinite;
}
@keyframes pmPulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

.pm-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

/* Cada evento es su propia tarjeta sobre el marino, no una fila con línea divisoria: así se
   lee como una bandeja de notificaciones, que es lo que representa. */
.pm-bento__feed { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pm-bento__feed li {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #DCE7F2;
}
.pm-bento__feed em { margin-left: auto; font-style: normal; font-size: 12px; color: #A3B4C7; white-space: nowrap; }

/* ---------- LÍNEA DE TIEMPO ----------
   El conector vertical es lo que la convierte en un recorrido y no en una lista con viñetas.
   Los tres estados se distinguen por FORMA además de color —palomita, punto latiendo, número—
   para que sigan siendo legibles sin percibir el color. */
.pm-timeline { list-style: none; }
.pm-timeline li { display: flex; gap: 13px; position: relative; padding-bottom: 16px; }
.pm-timeline li:last-child { padding-bottom: 0; }

.pm-timeline__mark {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 auto;
    z-index: 1;
}
/* El conector nace del marcador y llega al siguiente; el último no lo lleva. */
.pm-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: -2px;
    width: 2px;
    background: #DDE5EC;
}
.pm-timeline li.is-done:not(.is-dim)::before { background: #0BA47E; }

.pm-timeline b { display: block; font-weight: 600; font-size: 13.5px; color: #10243E; }
.pm-timeline em { display: block; font-style: normal; font-size: 11.5px; color: #5A6A7A; margin-top: 2px; }

.pm-timeline .is-done .pm-timeline__mark { background: #0BA47E; color: #fff; }
.pm-timeline .is-now .pm-timeline__mark { background: #E7F6F0; }
.pm-timeline .is-now .pm-timeline__mark i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0BA47E;
    animation: pmPulse 2s ease-in-out infinite;
}
.pm-timeline .is-now b { color: #0A7E5E; }
.pm-timeline .is-pending .pm-timeline__mark { background: #EEF2F6; color: #5A6A7A; }
.pm-timeline .is-pending b,
.pm-timeline .is-pending em { color: #5A6A7A; }

.pm-bento__alert {
    background: #fff;
    border: 1px solid #F5D998;
    border-radius: 13px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pm-bento__alert-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #FDF0DA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}
.pm-bento__alert strong { display: block; font-size: 13.5px; font-weight: 600; color: #10243E; margin-bottom: 3px; }
.pm-bento__alert span { font-size: 12px; color: #5A6A7A; }

.pm-bento__stats { display: flex; gap: 34px; align-items: flex-end; flex-wrap: wrap; }
.pm-bento__stats b {
    display: block;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.5px;
}
/* Blanco y no el menta #DFF5EE del mock: sobre este verde el menta da 3.79:1 y el mínimo
   para texto pequeño es 4.5. */
.pm-bento__stats span { display: block; font-size: 13px; color: #fff; margin-top: 6px; }

/* ---------- FAQ ----------
   <details> nativo: se abre con teclado, funciona sin JS y el texto vive en el DOM aunque el
   bloque esté cerrado — que es lo que necesita un rastreador para poder citarlo. */
.pm-faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pm-faq__item {
    background: #F8FAFC;
    border: 1px solid #E9EFF4;
    border-radius: 13px;
    padding: 20px 24px;
}
.pm-faq__item summary {
    font-size: 16px;
    font-weight: 600;
    color: #10243E;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.pm-faq__item summary::-webkit-details-marker { display: none; }
/* El h3 vive DENTRO del summary (el HTML lo permite y así la FAQ aporta esquema al documento).
   No debe traer tamaño propio: el que manda es el del summary. */
.pm-faq__item summary h3 { font: inherit; color: inherit; margin: 0; }
.pm-faq__item summary::after {
    content: "+";
    color: #0BA47E;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.pm-faq__item[open] summary::after { content: "\2013"; }
.pm-faq__item p {
    color: #5A6A7A;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 12px;
}

/* ---------- CTA FINAL ---------- */
.pm-ctafinal { padding: 20px 0 84px; }
.pm-ctafinal__panel {
    background: #10243E;
    border-radius: 20px;
    padding: 64px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(16, 36, 62, .6);
}
/* Resplandor verde subiendo desde el borde inferior: es lo que evita que el panel se lea como
   un rectángulo plano y ata el cierre al color de la marca. */
.pm-ctafinal__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(11, 164, 126, .4), transparent 70%);
    pointer-events: none;
}
.pm-ctafinal__panel > * { position: relative; }
.pm-ctafinal h2 {
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 38px);
    color: #fff;
    letter-spacing: -1.4px;
    margin-bottom: 12px;
}
.pm-ctafinal p { color: #B6C7DA; font-size: 18px; margin-bottom: 32px; }
.pm-ctafinal__note { font-size: 13px; color: #9DB2C9; margin: 16px 0 0; }

/* ---------- FOOTER ----------
   CLARO (#FAFBFD), no el bloque oscuro que tenía: en el 2A el único bloque en tinta es el panel
   del CTA, y meter un segundo lo duplicaba y le quitaba peso al cierre. */
.pm-footer { background: #FAFBFD; border-top: 1px solid #EEF2F6; color: #5A6A7A; }
.pm-footer__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 48px 44px 0;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
}
.pm-footer__brand { max-width: 320px; }
.pm-footer__brand p { font-size: 14px; line-height: 1.65; color: #5A6A7A; margin-top: 14px; }
.pm-footer__cols { display: contents; }
.pm-footer__coltitle {
    font-size: 13px;
    font-weight: 700;
    color: #10243E;
    margin-bottom: 14px;
}
.pm-footer__cols a { display: block; font-size: 14px; color: #5A6A7A; margin-bottom: 10px; }
.pm-footer a:hover { color: #10243E; opacity: 1; }
.pm-footer__bottom {
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 44px 32px;
    border-top: 1px solid #EEF2F6;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5A6A7A;
}

/* ---------- LEGAL PAGES (términos / privacidad) ---------- */
.pm-legal { max-width: 820px; margin: 0 auto; padding: 56px 48px 80px; }
.pm-legal h1 {
    font-weight: 700;
    font-size: 34px;
    color: #10243E;
    letter-spacing: -1px;
    margin-bottom: 8px;
}
.pm-legal__updated { color: #5D6A7A; font-size: 14px; margin-bottom: 32px; }
.pm-legal h2 {
    font-weight: 700;
    font-size: 20px;
    color: #10243E;
    letter-spacing: -.4px;
    margin: 32px 0 10px;
}
.pm-legal p, .pm-legal li { font-size: 15px; line-height: 1.7; color: #42556A; }
.pm-legal ul { margin: 10px 0 10px 22px; }
.pm-legal li { margin-bottom: 6px; }
.pm-legal__note {
    background: #FDF0DA;
    border: 1px solid #F5D8A0;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: #7A5A1B;
    margin-bottom: 28px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .pm-container { padding: 0 22px; }
    .pm-nav__inner, .pm-footer__inner { padding-left: 22px; padding-right: 22px; }
    .pm-section { padding: 56px 0; }
    .pm-hero { padding-top: 48px; }
    .pm-hero__title { letter-spacing: -1.6px; }
    .pm-pain__grid { grid-template-columns: 1fr; }
    .pm-bento__row--wide-first,
    .pm-bento__row--wide-last { grid-template-columns: 1fr; }
    .pm-steps__grid { grid-template-columns: 1fr; }
    .pm-herocard__stats { grid-template-columns: 1fr 1fr; }
    .pm-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .pm-pricing__grid { grid-template-columns: 1fr; }
    .pm-nav__links { gap: 18px; font-size: 14px; }
    /* Se ocultan los CUATRO enlaces de sección (Cómo funciona, Aseguradoras, Precios,
       Preguntas) y quedan sólo entrar y crear cuenta. Si el conteo se queda corto —como pasó
       al añadir "Preguntas"— el botón de crear cuenta se sale de la pantalla. */
    .pm-nav__links a:not(.pm-nav__cta):nth-child(-n+4) { display: none; }
    .pm-ctafinal__panel { padding: 44px 24px; }
}

@media (max-width: 560px) {
    .pm-nav__inner { padding-left: 18px; padding-right: 18px; gap: 12px; }
    .pm-nav__links { gap: 12px; }
    .pm-landing .pm-nav__cta { padding: 9px 14px; }
    .pm-herocard__table th:nth-child(2), .pm-herocard__table td:nth-child(2) { display: none; }
    .pm-footer__inner { grid-template-columns: 1fr; }
    .pm-hero__cta-row .pm-btn { width: 100%; }
    .pm-herocard { padding: 20px; }
        .pm-legal { padding: 40px 22px 64px; }
}

/* ---------- REDUCED MOTION ----------
   La marquesina de aseguradoras es el único movimiento perpetuo que queda, y no comunica nada
   que no diga la lista quieta: se detiene. Las transiciones de los botones se van con ella.
   Nada de esto transmite estado. */
@media (prefers-reduced-motion: reduce) {
    .pm-insurers__logos { animation: none; }
    .pm-bento__live i { animation: none; }
    .pm-btn { transition: none; }
    .pm-btn:hover { transform: none; }
}