/* ==========================================================================
   Aviso de salida (exit intent)
   Marcado: template-parts/blocks/salida-popup.php
   Lógica:  assets/js/salida-popup.js
   ========================================================================== */

.salida-popup[hidden] {
    display: none;
}

.salida-popup {
    position: fixed;
    inset: 0;
    /* MAPA DE CAPAS — no bajar este número sin mirar la lista.
       Estaba en 9998 y la cabecera va en 9999 !important (header.css:432 y
       :466), así que el menú se pintaba ENCIMA del aviso y le tapaba el
       antetítulo y la X. Se reportó cuatro veces como "problema de alto en
       pantallas pequeñas" y nunca lo fue: en pantalla corta el aviso sube
       hasta donde está la cabecera, y ahí se veía el solape.

         9999      cabecera fija (header.css)
         99999     botón flotante de WhatsApp (style.css:3648)
         100000    lightbox de WordPress (blocks.css)
       → 100001    este aviso
         9999999   banner de cookies (CookieYes)

       Queda por debajo del banner de cookies A PROPÓSITO: el consentimiento se
       decide antes que nada, y taparlo con una promoción no es defendible. */
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Si la caja llegara a ser más alta que la pantalla, se desplaza el aviso
       entero. Con solo align-items:center, lo que sobra por arriba queda
       recortado y fuera de alcance: no hay forma de llegar a la cabecera. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.salida-popup__fondo {
    position: absolute;
    inset: 0;
    background: rgba(29, 27, 22, 0.55);
    animation: salida-popup-fundido .25s ease both;
}

.salida-popup__caja {
    position: relative;
    width: 100%;
    max-width: 480px;
    /* margin:auto centra igual que align-items, pero además reparte el sobrante
       cuando la caja no cabe, en vez de comerse el borde de arriba. */
    margin: auto;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    padding: 40px 36px 32px;
    box-sizing: border-box;
    animation: salida-popup-entrada .28s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes salida-popup-fundido {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes salida-popup-entrada {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Quien pide menos movimiento no debería recibir una animación de entrada. */
@media (prefers-reduced-motion: reduce) {
    .salida-popup__fondo,
    .salida-popup__caja {
        animation: none;
    }
}

.salida-popup__cerrar {
    /* sticky y no absolute: cuando el contenido no cabe y la caja hace scroll
       interno, una X absoluta se va hacia arriba y deja al visitante sin el
       botón de cerrar más evidente. Así se queda pegada arriba.
       (Escape y "Ahora no" cierran igual, pero el aviso no puede depender de
       que el visitante los conozca.) */
    position: sticky;
    float: right;
    top: 14px;
    right: 14px;
    margin-left: auto;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #F4F3F0;
    color: #635E54;
    cursor: pointer;
    /* Al quedarse fija sobre el texto que pasa por debajo, el halo blanco le
       recorta un hueco y evita que se lea el botón encima de una palabra. */
    box-shadow: 0 0 0 6px #FFFFFF;
    transition: background-color .18s ease, color .18s ease;
}

.salida-popup__cerrar:hover {
    background: #E2DED4;
    color: #1D1B16;
}

.salida-popup__antetitulo {
    margin: 0 0 10px;
    font-family: 'Saans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #334DCF;
}

.salida-popup__titulo {
    margin: 0 0 14px;
    font-family: 'Saans', sans-serif;
    font-size: clamp(22px, 4.4vw, 27px);
    font-weight: 400;
    line-height: 1.25;
    color: #1D1B16;
    text-wrap: balance;
}

.salida-popup__titulo strong {
    font-weight: 700;
}

.salida-popup__texto {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #635E54;
}

.salida-popup__puntos {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.4;
    color: #1D1B16;
}

.salida-popup__puntos li {
    position: relative;
    padding-left: 26px;
}

/* Check dibujado en CSS: evita meter un SVG por cada punto. */
.salida-popup__puntos li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .28em;
    width: 6px;
    height: 11px;
    border: solid #2E7D32;
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg);
}

.salida-popup__acciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.salida-popup__cta {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.salida-popup__descartar {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    color: #7F786C;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.salida-popup__descartar:hover {
    color: #1D1B16;
}

/* Bloquea el scroll del fondo mientras el aviso está abierto. */
body.salida-popup-abierto {
    overflow: hidden;
}

/* Escritorio bajo (portátiles de 13-14", ventanas a media altura). La caja
   medía 599px y a 640px de alto llegaba a tocar arriba y abajo, cortando la
   línea legal. Se aprieta el relleno para que siga habiendo aire alrededor y
   se vea centrada de verdad, no solo por aritmética. */
@media (min-width: 521px) and (max-height: 780px) {
    .salida-popup__caja {
        padding: 30px 32px 24px;
    }
}

@media (min-width: 521px) and (max-height: 680px) {
    .salida-popup__caja {
        padding: 24px 28px 20px;
    }
    .salida-popup__titulo {
        font-size: 25px;
    }
}

@media (max-width: 520px) {
    .salida-popup {
        /* Hoja inferior. El padding-top deja ver la cabecera: el aviso no puede
           taparle al usuario de dónde viene ni el botón de cerrar del sitio. */
        padding: 0 12px 12px;
        align-items: flex-end;
    }

    .salida-popup__caja {
        /* En un iPhone SE (667px) la caja medía 607px y se comía la cabecera.
           Se le pone techo dejando sitio a la barra superior, y se aprieta
           todo el interior para que quepa sin scroll en vez de recortarse. */
        max-height: calc(100vh - 96px);
        max-height: calc(100dvh - 96px);
        padding: 22px 20px 20px;
        border-radius: 18px 18px 0 0;
        /* El `margin:auto` que centra en escritorio anulaba el align-items
           flex-end de aquí y dejaba la hoja flotando a media altura, tapando
           la cabecera. Abajo pegada, arriba lo que sobre. */
        margin: auto 0 0;
    }

    .salida-popup__antetitulo { margin-bottom: 6px; font-size: 11px; }

    .salida-popup__titulo {
        font-size: 21px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .salida-popup__texto {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .salida-popup__puntos {
        gap: 6px;
        margin-bottom: 16px;
        font-size: 13.5px;
        line-height: 1.3;
    }

    .salida-popup__nota-cta { font-size: 12px; line-height: 1.35; }

    .salida-popup__legal {
        margin-top: 12px;
        padding-top: 10px;
        font-size: 11px;
        line-height: 1.35;
    }

    .salida-popup__cerrar { top: 10px; right: 10px; }
}

/* Apoyo bajo el CTA y nota legal del plazo */
.salida-popup__nota-cta {
    margin: -2px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #7F786C;
    text-align: center;
}

.salida-popup__legal {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid #EDEAE3;
    font-size: 11.5px;
    line-height: 1.45;
    color: #9A9488;
    text-align: center;
}

/* Las negritas de los puntos marcan lo escaneable, no gritan */
.salida-popup__puntos strong {
    font-weight: 700;
    color: #1D1B16;
}