/* ==========================================================================
   OVERLAY · TEXTOS LEGALES
========================================================================== */

.legal-overlay {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: color-mix(
        in srgb,
        var(--magenta) 75%,
        transparent
    );

    z-index: 1000;
    display: none;
}

.legal-overlay.legal-abierto {
    display: block;
}

/* ==========================================================================
   OVERLAY · VENTANA LEGAL
========================================================================== */

.legal-ventana {

    position: absolute;

    top: 100px;
    bottom: 100px;

    left: var(--page-margin);

    width: var(--page-width);

    background: var(--blanco);

}

/* ==========================================================================
   OVERLAY · CONTENIDO LEGAL
========================================================================== */

.legal-contenido {

    width: 100%;
    height: 100%;

    overflow-y: auto;

}

/* ==========================================================================
   OVERLAY · BLOQUEO DEL SCROLL DE LA WEB
========================================================================== */

html.legal-abierto {

    overflow: hidden;

}

/* ==========================================================================
   LEGALES · DOCUMENTOS
========================================================================== */

.legal-documento {

    display: none;

}

/* ==========================================================================
   LEGALES · BOTÓN CERRAR
========================================================================== */

.legal-cerrar {

    position: absolute;

    top: 20px;
    right: 20px;

    padding: 0;
    border: 0;

    background: transparent;

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-90);

    font-weight: var(--sans-light);

    line-height: var(--interlineado-sin);

    appearance: none;

    cursor: pointer;

}


/* ==========================================================================
   LEGALES · ESTILOS GENERALES
========================================================================== */

.legal-contenido {

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-12);

    font-weight: var(--sans-regular);

    line-height: var(--interlineado-separado);

    padding: 200px 50px;

}


/* ==========================================================================
   LEGALES · TÍTULO
========================================================================== */

.legal-bloque-titulo {

    margin-bottom: var(--espacio-xl);

}


.legal-bloque-titulo h1 {

    margin: 0;

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-50);

    font-weight: var(--sans-extrabold);

    line-height: var(--interlineado-muypegado);

}


.legal-bloque-titulo p {

    margin-top: var(--espacio-xs);

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-25);

    font-weight: var(--sans-semibold);

    line-height: var(--interlineado-pegado);

}


/* ==========================================================================
   LEGALES · BLOQUES
========================================================================== */

.legal-bloque {

    margin-bottom: var(--espacio-xl);

}


.legal-bloque:last-child {

    margin-bottom: 0;

}


/* ==========================================================================
   LEGALES · TÍTULOS DE APARTADO
========================================================================== */

.legal-bloque h2 {

    margin: 0 0 var(--espacio-m);

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-30);

    font-weight: var(--sans-bold);

    line-height: var(--interlineado-pegado);

}


/* ==========================================================================
   LEGALES · SUBTÍTULOS
========================================================================== */

.legal-bloque h3 {

    margin: var(--espacio-l) 0 var(--espacio-m);

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-20);

    font-weight: var(--sans-semibold);

    line-height: var(--interlineado-pegado);

}


.legal-bloque h3:first-child {

    margin-top: 0;

}


/* ==========================================================================
   LEGALES · PÁRRAFOS
========================================================================== */

.legal-bloque p {

    margin: 0;

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-15);

    font-weight: var(--sans-regular);

    line-height: var(--interlineado-separado);

}


/* ==========================================================================
   LEGALES · ENLACES
========================================================================== */

.legal-bloque a {

    color: var(--magenta);

    font-family: var(--font-sans);

    text-decoration: underline;

}


.legal-bloque strong {

    font-weight: var(--sans-semibold);

}