/**
 * =============================================================================
 * PROYECTO: La Lobera de Martín · Web pública
 * ARCHIVO:  /css/emergentes.css
 * MÓDULO:   Mensajes emergentes web
 * -----------------------------------------------------------------------------
 * VERSIÓN:  1.1.0
 * FECHA:    2026-09-26
 * AUTORÍA:  La Lobera de Martín SLU
 * LICENCIA: CC BY-NC 4.0
 * -----------------------------------------------------------------------------
 * DESCRIPCIÓN
 * -----------------------------------------------------------------------------
 * Hoja de estilos pública del sistema de mensajes emergentes.
 *
 * RESPONSABILIDADES
 * -----------------------------------------------------------------------------
 * - Overlay general.
 * - Contenedor modal accesible.
 * - Plantillas EDITORIAL, HERO, SPLIT y MINIMAL.
 * - Posición configurable de multimedia.
 * - Ajuste CUBRIR / CONTENER.
 * - Fondo de color, gradiente o multimedia.
 * - Botones principal y secundario.
 * - Audio.
 * - Control alternativo accesible para activar sonido cuando autoplay se bloquea.
 * - Animaciones de entrada y salida.
 * - Adaptación responsive.
 * - Compatibilidad con prefers-reduced-motion.
 *
 * NOTAS
 * -----------------------------------------------------------------------------
 * - No contiene estilos de AppGestión.
 * - No modifica estilos globales de la web.
 * - Todas las reglas utilizan el prefijo web-emergente.
 * - Los colores configurables llegan mediante variables CSS generadas por PHP.
 * =============================================================================
 */


/* =============================================================================
 * 1. RAÍZ
 * =============================================================================
 */

.web-emergente {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 24px;

    --emg-color-fondo: #a16445;
    --emg-color-texto: #ffffff;
    --emg-color-boton: #b8a236;
    --emg-color-texto-boton: #ffffff;
    --emg-overlay: .55;
    --emg-blur: 0px;
    --emg-media-altura: 360px;
}

.web-emergente[hidden] {
    display: none !important;
}

.web-emergente *,
.web-emergente *::before,
.web-emergente *::after {
    box-sizing: border-box;
}


/* =============================================================================
 * 2. BLOQUEO VISUAL DEL FONDO
 * =============================================================================
 */

.web-emergente__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--emg-overlay));
    -webkit-backdrop-filter: blur(var(--emg-blur));
    backdrop-filter: blur(var(--emg-blur));
}


/* =============================================================================
 * 3. DIÁLOGO
 * =============================================================================
 */

.web-emergente__dialogo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(94vw, 780px);
    max-height: min(90vh, 900px);
    overflow: hidden;

    background: var(--emg-color-fondo);
    color: var(--emg-color-texto);

    font-family: inherit;

    opacity: 0;
    transform: translateZ(0);
    will-change: opacity, transform;
}

.web-emergente--redondeado .web-emergente__dialogo {
    border-radius: 14px;
}

.web-emergente--sombra .web-emergente__dialogo {
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34),
        0 5px 18px rgba(0, 0, 0, .16);
}


/* =============================================================================
 * 4. FONDO INTERNO
 * =============================================================================
 */

.web-emergente__fondo,
.web-emergente__fondo-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.web-emergente__fondo {
    background: var(--emg-color-fondo);
}

.web-emergente__fondo[data-fondo-tipo="TRANSPARENTE"] {
    background: transparent;
}

.web-emergente__fondo-media {
    overflow: hidden;
}

.web-emergente__fondo-media img,
.web-emergente__fondo-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.web-emergente__fondo-media + .web-emergente__fondo {
    background: rgba(0, 0, 0, .18);
}


/* =============================================================================
 * 5. ESTRUCTURA INTERIOR
 * =============================================================================
 */

.web-emergente__estructura {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}


/* =============================================================================
 * 6. BOTÓN DE CIERRE
 * =============================================================================
 */

.web-emergente__cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, .28);
    color: #fff;

    font: inherit;
    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .18s ease,
        transform .18s ease;
}

.web-emergente__cerrar:hover {
    background: rgba(0, 0, 0, .52);
    transform: scale(1.05);
}

.web-emergente__cerrar:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.web-emergente__cerrar span {
    display: block;
    transform: translateY(-1px);
}


/* =============================================================================
 * 7. MULTIMEDIA PRINCIPAL
 * =============================================================================
 */

.web-emergente__media {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: var(--emg-media-altura);
    min-height: 0;
    overflow: hidden;
}

.web-emergente__media-elemento {
    display: block;
    width: 100%;
    height: 100%;
}


/* CUBRIR */

.web-emergente--ajuste-cubrir .web-emergente__media-elemento {
    object-fit: cover;
}


/* CONTENER */

.web-emergente--ajuste-contener .web-emergente__media-elemento {
    object-fit: contain;
}


/* =============================================================================
 * 8. POSICIÓN DE MULTIMEDIA
 * =============================================================================
 */

/* ARRIBA */

.web-emergente--media-arriba .web-emergente__estructura {
    flex-direction: column;
}

.web-emergente--media-arriba .web-emergente__media {
    order: 1;
}

.web-emergente--media-arriba .web-emergente__contenido {
    order: 2;
}


/* ABAJO */

.web-emergente--media-abajo .web-emergente__estructura {
    flex-direction: column;
}

.web-emergente--media-abajo .web-emergente__contenido {
    order: 1;
}

.web-emergente--media-abajo .web-emergente__media {
    order: 2;
}


/* IZQUIERDA */

.web-emergente--media-izquierda .web-emergente__estructura {
    flex-direction: row;
}

.web-emergente--media-izquierda .web-emergente__media {
    order: 1;
    width: 46%;
    height: auto;
    min-height: 420px;
}

.web-emergente--media-izquierda .web-emergente__contenido {
    order: 2;
    width: 54%;
}


/* DERECHA */

.web-emergente--media-derecha .web-emergente__estructura {
    flex-direction: row;
}

.web-emergente--media-derecha .web-emergente__contenido {
    order: 1;
    width: 54%;
}

.web-emergente--media-derecha .web-emergente__media {
    order: 2;
    width: 46%;
    height: auto;
    min-height: 420px;
}


/* =============================================================================
 * 9. CONTENIDO
 * =============================================================================
 */

.web-emergente__contenido {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 38px 42px;

    color: var(--emg-color-texto);
}

.web-emergente__subtitulo {
    margin: 0 0 9px;

    color: inherit;

    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;

    opacity: .82;
}

.web-emergente__titulo {
    margin: 0;

    color: inherit;

    font-family: inherit;
    font-size: clamp(1.75rem, 4vw, 2.65rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.web-emergente__texto {
    margin-top: 19px;

    color: inherit;

    font-size: 1rem;
    line-height: 1.62;

    opacity: .94;
}

.web-emergente__pie {
    margin: 22px 0 0;

    color: inherit;

    font-size: 1.15rem;
    line-height: 1.45;

    opacity: .72;
}


/* =============================================================================
 * 10. BOTONES
 * =============================================================================
 */

.web-emergente__acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 25px;
}

.web-emergente__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 11px 20px;

    border: 1px solid transparent;
    border-radius: 5px;

    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        opacity .17s ease,
        background-color .17s ease;
}

.web-emergente__boton:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.web-emergente__boton:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.web-emergente__boton--principal {
    background: var(--emg-color-boton);
    border-color: var(--emg-color-boton);
    color: var(--emg-color-texto-boton);
}

.web-emergente__boton--principal:hover {
    color: var(--emg-color-texto-boton);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
}

.web-emergente__boton--secundario {
    background: transparent;
    border-color: currentColor;
    color: var(--emg-color-texto);
}

.web-emergente__boton--secundario:hover {
    background: rgba(255, 255, 255, .10);
    color: var(--emg-color-texto);
}


/* =============================================================================
 * 11. AUDIO
 * =============================================================================
 */

.web-emergente__audio {
    position: relative;
    z-index: 4;
    display: block;

    width: calc(100% - 48px);
    max-width: 520px;

    margin: 0 auto 24px;
}


/* Control alternativo cuando el navegador bloquea autoplay con sonido */

.web-emergente__activar-sonido {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 30;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    max-width: calc(100% - 36px);
    padding: 10px 16px;

    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;

    background: rgba(20, 20, 20, .82);
    color: #fff;

    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    transition:
        transform .17s ease,
        background-color .17s ease,
        box-shadow .17s ease;
}

.web-emergente__activar-sonido:hover {
    background: rgba(0, 0, 0, .94);
    transform: translateY(-1px);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .34);
}

.web-emergente__activar-sonido:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.web-emergente__activar-sonido-icono {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
}

.web-emergente__activar-sonido-texto {
    min-width: 0;
}


/* =============================================================================
 * 12. PLANTILLA EDITORIAL
 * =============================================================================
 */

.web-emergente--plantilla-editorial .web-emergente__dialogo {
    width: min(94vw, 760px);
}

.web-emergente--plantilla-editorial .web-emergente__contenido {
    text-align: center;
    align-items: center;
    padding: 38px 52px 42px;
}

.web-emergente--plantilla-editorial .web-emergente__acciones {
    justify-content: center;
}

.web-emergente--plantilla-editorial .web-emergente__media {
    height: var(--emg-media-altura);
}


/* Cuando la imagen editorial está en un lateral */

.web-emergente--plantilla-editorial.web-emergente--media-izquierda
.web-emergente__contenido,
.web-emergente--plantilla-editorial.web-emergente--media-derecha
.web-emergente__contenido {
    text-align: left;
    align-items: flex-start;
    padding: 42px;
}

.web-emergente--plantilla-editorial.web-emergente--media-izquierda
.web-emergente__acciones,
.web-emergente--plantilla-editorial.web-emergente--media-derecha
.web-emergente__acciones {
    justify-content: flex-start;
}


/* =============================================================================
 * 13. PLANTILLA HERO
 * =============================================================================
 */

.web-emergente--plantilla-hero .web-emergente__dialogo {
    width: min(94vw, 900px);
    min-height: min(76vh, 650px);
}

.web-emergente--plantilla-hero .web-emergente__estructura {
    min-height: inherit;
}

.web-emergente--plantilla-hero .web-emergente__media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    min-height: 100%;

    z-index: 0;
}

.web-emergente--plantilla-hero .web-emergente__media::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .10) 0%,
            rgba(0, 0, 0, .25) 42%,
            rgba(0, 0, 0, .68) 100%
        );

    pointer-events: none;
}

.web-emergente--plantilla-hero .web-emergente__contenido {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: inherit;

    justify-content: flex-end;
    align-items: flex-start;

    padding: 70px 58px 52px;

    color: #fff;
}

.web-emergente--plantilla-hero .web-emergente__titulo {
    max-width: 720px;
    font-size: clamp(2rem, 5vw, 3.6rem);
}

.web-emergente--plantilla-hero .web-emergente__texto {
    max-width: 650px;
}

.web-emergente--plantilla-hero .web-emergente__acciones {
    justify-content: flex-start;
}

.web-emergente--plantilla-hero .web-emergente__boton--secundario {
    color: #fff;
}


/* HERO sin multimedia principal */

.web-emergente--plantilla-hero.web-emergente--sin-media
.web-emergente__contenido {
    justify-content: center;
}


/* =============================================================================
 * 14. PLANTILLA SPLIT
 * =============================================================================
 */

.web-emergente--plantilla-split .web-emergente__dialogo {
    width: min(94vw, 960px);
}

.web-emergente--plantilla-split .web-emergente__estructura {
    flex-direction: row;
    min-height: 470px;
}

.web-emergente--plantilla-split .web-emergente__media,
.web-emergente--plantilla-split .web-emergente__contenido {
    width: 50%;
}

.web-emergente--plantilla-split .web-emergente__media {
    height: auto;
    min-height: 470px;
}

.web-emergente--plantilla-split .web-emergente__contenido {
    padding: 48px;
}


/* En SPLIT respetamos izquierda/derecha */

.web-emergente--plantilla-split.web-emergente--media-derecha
.web-emergente__contenido {
    order: 1;
}

.web-emergente--plantilla-split.web-emergente--media-derecha
.web-emergente__media {
    order: 2;
}

.web-emergente--plantilla-split.web-emergente--media-izquierda
.web-emergente__media {
    order: 1;
}

.web-emergente--plantilla-split.web-emergente--media-izquierda
.web-emergente__contenido {
    order: 2;
}


/*
 * Si SPLIT recibe ARRIBA/ABAJO, se respeta también la configuración.
 */

.web-emergente--plantilla-split.web-emergente--media-arriba
.web-emergente__estructura,
.web-emergente--plantilla-split.web-emergente--media-abajo
.web-emergente__estructura {
    flex-direction: column;
}

.web-emergente--plantilla-split.web-emergente--media-arriba
.web-emergente__media,
.web-emergente--plantilla-split.web-emergente--media-abajo
.web-emergente__media,
.web-emergente--plantilla-split.web-emergente--media-arriba
.web-emergente__contenido,
.web-emergente--plantilla-split.web-emergente--media-abajo
.web-emergente__contenido {
    width: 100%;
}

.web-emergente--plantilla-split.web-emergente--media-arriba
.web-emergente__media,
.web-emergente--plantilla-split.web-emergente--media-abajo
.web-emergente__media {
    height: var(--emg-media-altura);
    min-height: 0;
}


/* =============================================================================
 * 15. PLANTILLA MINIMAL
 * =============================================================================
 */

.web-emergente--plantilla-minimal .web-emergente__dialogo {
    width: min(92vw, 570px);
}

.web-emergente--plantilla-minimal .web-emergente__contenido {
    padding: 44px 46px;
    text-align: center;
    align-items: center;
}

.web-emergente--plantilla-minimal .web-emergente__titulo {
    font-size: clamp(1.55rem, 4vw, 2.2rem);
}

.web-emergente--plantilla-minimal .web-emergente__texto {
    max-width: 470px;
}

.web-emergente--plantilla-minimal .web-emergente__acciones {
    justify-content: center;
}

.web-emergente--plantilla-minimal .web-emergente__media {
    max-height: 260px;
}


/* =============================================================================
 * 16. SIN MULTIMEDIA
 * =============================================================================
 */

.web-emergente--sin-media .web-emergente__contenido {
    width: 100%;
}


/* =============================================================================
 * 17. ESTADOS DE ANIMACIÓN
 * =============================================================================
 */

.web-emergente.is-visible .web-emergente__dialogo {
    opacity: 1;
}


/* NINGUNA */

.web-emergente[data-animacion-entrada="NINGUNA"]
.web-emergente__dialogo {
    opacity: 1;
    transform: none;
}


/* FADE */

.web-emergente[data-animacion-entrada="FADE"]
.web-emergente__dialogo {
    opacity: 0;
    transition: opacity .28s ease;
}

.web-emergente[data-animacion-entrada="FADE"].is-visible
.web-emergente__dialogo {
    opacity: 1;
}


/* ZOOM */

.web-emergente[data-animacion-entrada="ZOOM"]
.web-emergente__dialogo {
    opacity: 0;
    transform: scale(.94);
    transition:
        opacity .30s ease,
        transform .30s ease;
}

.web-emergente[data-animacion-entrada="ZOOM"].is-visible
.web-emergente__dialogo {
    opacity: 1;
    transform: scale(1);
}


/* DESLIZAR ARRIBA */

.web-emergente[data-animacion-entrada="DESLIZAR_ARRIBA"]
.web-emergente__dialogo {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .30s ease,
        transform .30s ease;
}

.web-emergente[data-animacion-entrada="DESLIZAR_ARRIBA"].is-visible
.web-emergente__dialogo {
    opacity: 1;
    transform: translateY(0);
}


/* DESLIZAR ABAJO */

.web-emergente[data-animacion-entrada="DESLIZAR_ABAJO"]
.web-emergente__dialogo {
    opacity: 0;
    transform: translateY(-35px);
    transition:
        opacity .30s ease,
        transform .30s ease;
}

.web-emergente[data-animacion-entrada="DESLIZAR_ABAJO"].is-visible
.web-emergente__dialogo {
    opacity: 1;
    transform: translateY(0);
}


/* DESLIZAR IZQUIERDA */

.web-emergente[data-animacion-entrada="DESLIZAR_IZQUIERDA"]
.web-emergente__dialogo {
    opacity: 0;
    transform: translateX(42px);
    transition:
        opacity .30s ease,
        transform .30s ease;
}

.web-emergente[data-animacion-entrada="DESLIZAR_IZQUIERDA"].is-visible
.web-emergente__dialogo {
    opacity: 1;
    transform: translateX(0);
}


/* DESLIZAR DERECHA */

.web-emergente[data-animacion-entrada="DESLIZAR_DERECHA"]
.web-emergente__dialogo {
    opacity: 0;
    transform: translateX(-42px);
    transition:
        opacity .30s ease,
        transform .30s ease;
}

.web-emergente[data-animacion-entrada="DESLIZAR_DERECHA"].is-visible
.web-emergente__dialogo {
    opacity: 1;
    transform: translateX(0);
}


/* =============================================================================
 * 18. SALIDA
 * =============================================================================
 */

.web-emergente.is-closing[data-animacion-salida="NINGUNA"]
.web-emergente__dialogo {
    opacity: 0;
}

.web-emergente.is-closing[data-animacion-salida="FADE"]
.web-emergente__dialogo {
    opacity: 0;
    transition: opacity .22s ease;
}

.web-emergente.is-closing[data-animacion-salida="ZOOM"]
.web-emergente__dialogo {
    opacity: 0;
    transform: scale(.94);
    transition:
        opacity .22s ease,
        transform .22s ease;
}


/* =============================================================================
 * 19. ESTADO DEL DOCUMENTO
 * =============================================================================
 *
 * JavaScript añadirá esta clase al <html> mientras exista un emergente abierto.
 * =============================================================================
 */

html.web-emergente-abierto,
html.web-emergente-abierto body {
    overflow: hidden;
}


/* =============================================================================
 * 20. TABLET
 * =============================================================================
 */

@media (max-width: 900px) {

    .web-emergente {
        padding: 18px;
    }

    .web-emergente__dialogo {
        width: min(96vw, 720px);
        max-height: 92vh;
    }

    .web-emergente__contenido {
        padding: 34px;
    }

    .web-emergente--media-izquierda .web-emergente__media,
    .web-emergente--media-derecha .web-emergente__media {
        width: 43%;
    }

    .web-emergente--media-izquierda .web-emergente__contenido,
    .web-emergente--media-derecha .web-emergente__contenido {
        width: 57%;
    }

    .web-emergente--plantilla-split .web-emergente__contenido {
        padding: 36px;
    }

}


/* =============================================================================
 * 21. MÓVIL
 * =============================================================================
 */

@media (max-width: 700px) {

    .web-emergente {
        align-items: center;
        padding: 12px;
    }

    .web-emergente__dialogo {
        width: 100%;
        max-height: 94vh;
    }

    .web-emergente--redondeado .web-emergente__dialogo {
        border-radius: 11px;
    }

    .web-emergente__cerrar {
        top: 7px;
        right: 7px;

        width: 39px;
        height: 39px;

        font-size: 28px;
    }

    .web-emergente__estructura,
    .web-emergente--media-izquierda .web-emergente__estructura,
    .web-emergente--media-derecha .web-emergente__estructura,
    .web-emergente--plantilla-split .web-emergente__estructura {
        flex-direction: column;
        min-height: 0;
    }

    .web-emergente--media-arriba .web-emergente__media,
    .web-emergente--media-izquierda .web-emergente__media,
    .web-emergente--media-derecha .web-emergente__media,
    .web-emergente--plantilla-split .web-emergente__media {
        order: 1;

        width: 100%;
        height: min(var(--emg-media-altura), 42vh);
        min-height: 180px;
        max-height: 390px;
    }

    .web-emergente--media-arriba .web-emergente__contenido,
    .web-emergente--media-izquierda .web-emergente__contenido,
    .web-emergente--media-derecha .web-emergente__contenido,
    .web-emergente--plantilla-split .web-emergente__contenido {
        order: 2;
        width: 100%;
    }

    .web-emergente--media-abajo .web-emergente__contenido {
        order: 1;
        width: 100%;
    }

    .web-emergente--media-abajo .web-emergente__media {
        order: 2;

        width: 100%;
        height: min(var(--emg-media-altura), 42vh);
        min-height: 180px;
        max-height: 390px;
    }

    .web-emergente__contenido,
    .web-emergente--plantilla-editorial .web-emergente__contenido,
    .web-emergente--plantilla-editorial.web-emergente--media-izquierda
    .web-emergente__contenido,
    .web-emergente--plantilla-editorial.web-emergente--media-derecha
    .web-emergente__contenido,
    .web-emergente--plantilla-split .web-emergente__contenido {
        padding: 29px 24px 30px;
    }

    .web-emergente__titulo {
        font-size: clamp(1.55rem, 7vw, 2.2rem);
    }

    .web-emergente__texto {
        margin-top: 14px;
        font-size: .95rem;
        line-height: 1.55;
    }

    .web-emergente__acciones {
        width: 100%;
        margin-top: 20px;
    }

    .web-emergente__boton {
        flex: 1 1 150px;
    }


    /* HERO móvil */

    .web-emergente--plantilla-hero .web-emergente__dialogo {
        min-height: min(82vh, 680px);
    }

    .web-emergente--plantilla-hero .web-emergente__estructura {
        position: relative;
        min-height: inherit;
    }

    .web-emergente--plantilla-hero .web-emergente__media {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: none;

        order: initial;
    }

    .web-emergente--plantilla-hero .web-emergente__contenido {
        position: relative;
        z-index: 2;

        width: 100%;
        min-height: inherit;

        order: initial;

        justify-content: flex-end;
        align-items: flex-start;

        padding: 70px 27px 34px;
    }

    .web-emergente--plantilla-hero .web-emergente__titulo {
        font-size: clamp(2rem, 9vw, 3rem);
    }

}


/* =============================================================================
 * 22. MÓVIL ESTRECHO
 * =============================================================================
 */

@media (max-width: 480px) {

    .web-emergente {
        padding: 8px;
    }

    .web-emergente__dialogo {
        max-height: 96vh;
    }

    .web-emergente__contenido,
    .web-emergente--plantilla-editorial .web-emergente__contenido,
    .web-emergente--plantilla-minimal .web-emergente__contenido {
        padding: 27px 20px;
    }

    .web-emergente__subtitulo {
        font-size: .74rem;
    }

    .web-emergente__acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .web-emergente__boton {
        flex: 0 0 auto;
        width: 100%;
    }

    .web-emergente__audio {
        width: calc(100% - 32px);
        margin-bottom: 16px;
    }

    .web-emergente__activar-sonido {
        right: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        min-height: 42px;
        padding: 9px 14px;
        font-size: .86rem;
    }

}


/* =============================================================================
 * 23. PANTALLAS BAJAS
 * =============================================================================
 */

@media (max-height: 650px) and (min-width: 701px) {

    .web-emergente {
        padding: 12px;
    }

    .web-emergente__dialogo {
        max-height: 94vh;
    }

    .web-emergente__media {
        height: min(var(--emg-media-altura), 40vh);
    }

    .web-emergente__contenido {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .web-emergente--plantilla-hero .web-emergente__dialogo {
        min-height: 0;
        height: 90vh;
    }

}


/* =============================================================================
 * 24. REDUCCIÓN DE MOVIMIENTO
 * =============================================================================
 */

@media (prefers-reduced-motion: reduce) {

    .web-emergente__dialogo,
    .web-emergente__cerrar,
    .web-emergente__boton,
    .web-emergente__activar-sonido {
        transition: none !important;
        animation: none !important;
    }

    .web-emergente__dialogo {
        transform: none !important;
    }

    .web-emergente.is-visible .web-emergente__dialogo {
        opacity: 1;
    }

    .web-emergente.is-closing .web-emergente__dialogo {
        opacity: 0;
    }

}


/* =============================================================================
 * 25. IMPRESIÓN
 * =============================================================================
 */

@media print {

    .web-emergente {
        display: none !important;
    }

}