/* ==========================================================================
   Asegura tu Mundo — identidad compartida (España)
   Misma familia visual que aseguratumundo.com.ar:
   Quicksand (títulos) + DM Sans (texto), azul eléctrico, botones píldora.
   Se carga DESPUÉS del <style> propio de cada landing, así que lo pisa.
   ========================================================================== */

:root {
    --azul: #2F4BC4;
    --azul-hover: #253C9E;
    --marino: #13216B;
    --marino-oscuro: #0B1445;
    --celeste: #7FB3F0;
    --lavanda: #F0F2FB;
    --lavanda-borde: #DCE1F5;
    --rojo: #E30613;
    --verde-wsp: #16A34A;
    --verde-wsp-hover: #128C3E;

    /* Variables que usan las landings originales, remapeadas a la marca */
    --primary: var(--marino);
    --primary-accent: var(--azul);
    --primary-accent-hover: var(--azul-hover);
    --accent-green: var(--verde-wsp);
    --accent-green-hover: var(--verde-wsp-hover);
    --text-main: #1D1E20;
    --text-muted: #55586A;
    --bg-light: #FAFBFE;
    --border-color: #E3E4F7;
    --card-bg: #FFFFFF;
    --badge-bg: var(--lavanda);
    --badge-text: var(--marino);
}

* { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; }

h1, h2, h3, h4,
.card-title, .logo, .form-header h2 {
    font-family: 'Quicksand', 'DM Sans', sans-serif;
    letter-spacing: -0.01em;
}
h1 { color: var(--marino); font-weight: 700; }
h1 span { color: var(--azul); }
h2, h3 { color: var(--marino); font-weight: 700; }

body { background-color: var(--bg-light); }

/* ---------- Botones píldora (como la web argentina) ---------- */
.btn-whatsapp, .btn-submit, .btn-secondary, .card-cta, .btn-marca, .btn-marca-sec {
    border-radius: 999px !important;
}
.btn-secondary {
    border-color: var(--azul) !important;
    color: var(--azul) !important;
}
.btn-secondary:hover { background: var(--lavanda) !important; }
.btn-submit { background: var(--azul) !important; }
.btn-submit:hover { background: var(--azul-hover) !important; }

.btn-marca, .btn-marca-sec {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.7rem; font-weight: 700; font-size: 1rem;
    text-decoration: none; border: 2px solid var(--azul); cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-marca { background: var(--azul); color: #fff; box-shadow: 0 6px 18px rgba(47, 75, 196, .25); }
.btn-marca:hover { background: var(--azul-hover); transform: translateY(-1px); }
.btn-marca-sec { background: #fff; color: var(--azul); }
.btn-marca-sec:hover { background: var(--lavanda); }
.btn-marca.wsp { background: var(--verde-wsp); border-color: var(--verde-wsp); box-shadow: 0 6px 18px rgba(22, 163, 74, .25); }
.btn-marca.wsp:hover { background: var(--verde-wsp-hover); }

/* ---------- Franja superior ---------- */
.atm-franja {
    background: var(--azul);
    color: #fff;
    text-align: center;
    font-size: .88rem;
    padding: .45rem 1rem;
    font-weight: 500;
}

/* ---------- Encabezado compartido ---------- */
.atm-header {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 200;
    box-shadow: 0 2px 12px rgba(1, 6, 143, .05);
}
.atm-nav {
    max-width: 1200px; margin: 0 auto;
    padding: .6rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.atm-marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.atm-marca img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--rojo); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--azul); }
.atm-marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.atm-marca-texto strong {
    font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--marino);
}
.atm-marca-texto strong span { color: var(--rojo); }
.atm-marca-texto small { font-size: .72rem; color: var(--text-muted); letter-spacing: .02em; }

.atm-menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.atm-menu > li { position: relative; }
.atm-menu a {
    color: var(--text-main); text-decoration: none; font-size: .95rem; font-weight: 500;
    padding: .4rem 0; display: inline-block;
}
.atm-menu a:hover, .atm-menu a.activo { color: var(--azul); }
.atm-menu a.activo { border-bottom: 2px solid var(--rojo); }
.atm-sub {
    display: none; position: absolute; top: 100%; left: -1rem; min-width: 260px;
    background: #fff; border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: 0 12px 30px rgba(1, 6, 143, .12); padding: .5rem; list-style: none; margin: 0;
}
.atm-menu > li:hover .atm-sub, .atm-menu > li:focus-within .atm-sub { display: block; }
.atm-sub a { display: block; padding: .55rem .8rem; border-radius: 10px; border: 0 !important; }
.atm-sub a:hover { background: var(--lavanda); }

.atm-nav .btn-marca { padding: .6rem 1.2rem; font-size: .92rem; }
.atm-hamburguesa {
    display: none; background: none; border: 0; font-size: 1.6rem; color: var(--marino); cursor: pointer;
}

@media (max-width: 860px) {
    .atm-hamburguesa { display: block; }
    .atm-menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch; gap: 0;
        border-bottom: 1px solid var(--border-color); padding: .5rem 1.25rem 1rem;
    }
    .atm-menu.abierto { display: flex; }
    .atm-menu > li { border-bottom: 1px solid var(--border-color); }
    .atm-menu a { padding: .8rem 0; width: 100%; }
    .atm-sub { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 .5rem .75rem; min-width: 0; }
    .atm-nav .btn-marca.solo-escritorio { display: none; }
    .atm-marca-texto small { display: none; }
}

/* ---------- Pie compartido ---------- */
.atm-footer {
    background: var(--marino-oscuro);
    color: #C9CBF5;
    padding: 3rem 1.25rem 1.5rem;
    font-size: .9rem;
    text-align: left;
}
.atm-footer-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem;
}
.atm-footer h4 { color: #fff; font-size: 1rem; margin-bottom: .8rem; font-family: 'Quicksand', sans-serif; }
.atm-footer a { color: #fff; text-decoration: none; }
.atm-footer a:hover { text-decoration: underline; }
.atm-footer ul { list-style: none; padding: 0; margin: 0; }
.atm-footer li { margin-bottom: .45rem; }
.atm-footer-marca { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.atm-footer-marca img { width: 56px; height: 56px; border-radius: 50%; background: #fff; }
.atm-footer-legal {
    max-width: 1200px; margin: 2rem auto 0; padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .78rem; color: #9EA1DB; line-height: 1.6;
}
@media (max-width: 760px) {
    .atm-footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Casilla de privacidad en formularios ---------- */
.atm-consent {
    display: flex; gap: .6rem; align-items: flex-start;
    font-size: .85rem; color: var(--text-muted); line-height: 1.5;
    grid-column: 1 / -1;
}
.atm-consent input { margin-top: .25rem; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--azul); }
.atm-consent a { color: var(--azul); }
.atm-info-basica {
    grid-column: 1 / -1;
    font-size: .75rem; color: var(--text-muted); line-height: 1.5;
    background: var(--lavanda); border-radius: 10px; padding: .7rem .9rem;
}
.atm-info-basica a { color: var(--azul); }

/* ---------- Botón flotante de WhatsApp ---------- */
.atm-wsp-flotante {
    position: fixed; right: 18px; bottom: 18px; z-index: 300;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25); text-decoration: none;
}
.atm-wsp-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* Estado de "enviando" en el botón del formulario */
.btn-submit[disabled] { opacity: .7; cursor: wait; }

/* Que el encabezado fijo no tape el título al saltar a un ancla (#contacto, #cotizar…) */
[id] { scroll-margin-top: 96px; }

/* Las opciones largas de los desplegables estiraban la grilla del formulario en el celular */
.form-grid > * { min-width: 0; }
.form-grid select, .form-grid input:not([type="checkbox"]) { max-width: 100%; width: 100%; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- Toque rojo de Occident al pasar el cursor por las tarjetas ----------
   Rojo como acento (borde, franja superior y flecha), no como fondo:
   en seguros el rojo de fondo se lee como alerta. */
.p-cat, .card, .cob-item { position: relative; overflow: hidden; }
.p-cat::after, .card::after, .cob-item::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--rojo); transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
}
.p-cat:hover::after, .card:hover::after, .cob-item:hover::after { transform: scaleX(1); }
.p-cat:hover, .card:hover, .cob-item:hover { border-color: var(--rojo) !important; }
.p-cat:hover .ir, .card:hover .card-cta { color: var(--rojo) !important; }
.p-cat.destacada:hover .ir { color: #fff !important; }

/* ---------- Preferencia de contacto (WhatsApp / llamada / correo) ---------- */
.atm-preferencia { grid-column: 1 / -1; min-width: 0; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.atm-preferencia legend { font-size: .88rem; font-weight: 600; color: var(--text-main); margin-bottom: .5rem; padding: 0; }
.atm-preferencia label { cursor: pointer; }
.atm-preferencia label { position: relative; }
.form-grid .atm-preferencia input, .atm-preferencia input { position: absolute; opacity: 0; width: 1px !important; height: 1px; left: 0; top: 0; }
.atm-preferencia span {
    display: inline-block; padding: .55rem 1rem; border-radius: 999px; font-size: .92rem; font-weight: 500;
    border: 2px solid var(--lavanda-borde); background: #fff; color: var(--text-main); transition: all .15s ease;
}
.atm-preferencia input:checked + span { border-color: var(--azul); background: var(--lavanda); color: var(--marino); font-weight: 700; }
.atm-preferencia input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Títulos sobre fondo oscuro: blancos (la regla general los pone en marino) */
.section-cta-final h2, .section-cta-final h3 { color: #fff; }