/* ==========================================================
   ROMA 382 — INFORMACIÓN LEGAL
   Agencia Misterio
========================================================== */

.roma382-legal-modal{
    position:fixed;
    inset:0;
    z-index:10060;

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

    padding:28px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.roma382-legal-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.roma382-legal-modal__overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.58);

    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
}

.roma382-legal-modal__dialog{
    position:relative;
    z-index:1;

    width:min(100%,500px);
    max-height:calc(100dvh - 56px);

    overflow-y:auto;
    overscroll-behavior:contain;

    padding:48px 32px 32px;

    background:#ffffff;
    color:#2E2E2D;

    transform:translateY(16px) scale(.985);
    opacity:0;

    box-shadow:0 18px 55px rgba(0,0,0,.24);

    transition:
        transform .34s cubic-bezier(.22,.8,.2,1),
        opacity .28s ease;
}

.roma382-legal-modal.is-open .roma382-legal-modal__dialog{
    transform:translateY(0) scale(1);
    opacity:1;
}

/* ==========================================================
   CERRAR
========================================================== */

.roma382-legal-modal__close{
    position:absolute;
    top:7px;
    right:8px;
    z-index:4;

    width:48px;
    height:48px;
    padding:0 !important;

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

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#DA4E18 !important;

    cursor:pointer;
    box-shadow:none !important;

    -webkit-appearance:none !important;
    appearance:none !important;

    transition:transform .28s cubic-bezier(.22,.61,.36,1);
}

/* Ocultamos el carácter ×: Elementor/tema puede alterar su tipografía.
   La X visible se construye con CSS y conserva siempre el tamaño. */
.roma382-legal-modal__close span{
    position:relative;
    display:block;

    width:26px !important;
    height:26px !important;

    font-size:0 !important;
    line-height:0 !important;

    transform:rotate(0deg);
    transform-origin:center;

    transition:transform .32s cubic-bezier(.22,.61,.36,1);
}

.roma382-legal-modal__close span::before,
.roma382-legal-modal__close span::after{
    content:"";
    position:absolute;

    top:50%;
    left:50%;

    width:25px;
    height:2px;

    background:#DA4E18 !important;
    border-radius:2px;

    transform-origin:center;
}

.roma382-legal-modal__close span::before{
    transform:translate(-50%,-50%) rotate(45deg);
}

.roma382-legal-modal__close span::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}

.roma382-legal-modal__close:hover,
.roma382-legal-modal__close:focus,
.roma382-legal-modal__close:focus-visible,
.roma382-legal-modal__close:active{
    border:0 !important;
    background:transparent !important;
    color:#DA4E18 !important;
    outline:none !important;
    box-shadow:none !important;
}

.roma382-legal-modal__close:hover span,
.roma382-legal-modal__close:focus-visible span{
    transform:rotate(90deg) scale(1.08);
}

/* ==========================================================
   CONTENIDO
========================================================== */

.roma382-legal-modal__body h3{
    margin:0;

    color:#2E2E2D;

    font-family:"ClashDisplay",sans-serif !important;
    font-size:21px;
    font-weight:500;
    line-height:1.05;
}

.roma382-legal-modal__text{
    margin-top:18px;

    color:#2E2E2D;

    font-family:"ClashDisplay",sans-serif !important;
    font-size:14px;
    font-weight:400;
    line-height:1.18;
}

.roma382-legal-modal__text p{
    margin:0 0 12px;
}

/* ==========================================================
   BOTÓN INTERNO
========================================================== */

.roma382-legal-modal__footer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    margin-top:22px;
    padding:6px 8px;

    border:0 !important;
    border-radius:0;

    background:#DA4E18 !important;
    color:#ffffff !important;

    font-family:"ClashDisplay",sans-serif !important;
    font-size:13px !important;
    font-weight:400;
    line-height:1;

    cursor:pointer;
    box-shadow:none !important;

    transition:background-color .25s ease;
}

.roma382-legal-modal__footer-btn span{
    font-family:"ClashDisplay",sans-serif !important;
    font-size:13px !important;
    font-weight:400;
    line-height:1;
}

.roma382-legal-modal__footer-btn:hover,
.roma382-legal-modal__footer-btn:focus,
.roma382-legal-modal__footer-btn:focus-visible{
    background:#B83D10 !important;
    color:#ffffff !important;
    outline:none !important;
}

.roma382-legal-modal__arrow{
    display:block;

    width:13px;
    height:13px;

    flex:0 0 13px;

    object-fit:contain;

    transform:rotate(0deg);
    transform-origin:center;

    transition:transform .3s ease;
}

.roma382-legal-modal__footer-btn:hover .roma382-legal-modal__arrow{
    transform:rotate(-45deg);
}

/* ==========================================================
   BLOQUEO DE SCROLL
========================================================== */

html.roma382-legal-lock,
body.roma382-legal-lock{
    overflow:hidden !important;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .roma382-legal-modal{
        align-items:center;
        padding:20px 31px;
    }

    .roma382-legal-modal__dialog{
        width:100%;
        max-height:calc(100dvh - 40px);

        padding:54px 24px 30px;
    }

    .roma382-legal-modal__close{
        top:4px;
        right:5px;

        width:50px;
        height:50px;
    }

    .roma382-legal-modal__close span{
        width:28px !important;
        height:28px !important;
    }

    .roma382-legal-modal__close span::before,
    .roma382-legal-modal__close span::after{
        width:27px;
        height:2px;
    }

    .roma382-legal-modal__body h3{
        font-size:17px;
        font-weight:500;
    }

    .roma382-legal-modal__text{
        margin-top:17px;

        font-size:12px;
        font-weight:400;
        line-height:1.12;
    }

    .roma382-legal-modal__text p{
        margin-bottom:10px;
    }

    .roma382-legal-modal__footer-btn{
        margin-top:20px;

        padding:6px 8px;

        font-size:12px !important;
    }

    .roma382-legal-modal__footer-btn span{
        font-size:12px !important;
    }

    .roma382-legal-modal__arrow{
        width:12px;
        height:12px;
        flex-basis:12px;
    }
}

/* ==========================================================
   REDUCIR MOVIMIENTO
========================================================== */

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

    .roma382-legal-modal,
    .roma382-legal-modal__dialog,
    .roma382-legal-modal__close span,
    .roma382-legal-modal__arrow{
        transition:none !important;
    }
}