/* ========================================================= */
/* FUENTE                                                    */
/* ========================================================= */

@font-face {
    font-family: "Helvetica Neue 73 Bold Extended";
    src: url("../multimedia/fuentes/HelveticaNeue-BoldExt.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* ========================================================= */
/* VARIABLES                                                 */
/* ========================================================= */

:root {
    --color-acento: #d0224d;
    --color-negro: #080808;
    --color-blanco: #ffffff;
    --color-gris: #747474;
    --color-linea: #dedede;

    --fuente-titulo: "Helvetica Neue 73 Bold Extended", "Helvetica Neue", Arial, sans-serif;
    --fuente-texto: "Gotham", "Helvetica Neue", Arial, sans-serif;

    --ancho-maximo: 1500px;
}

/* ========================================================= */
/* BASE                                                      */
/* ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-blanco);
    color: var(--color-negro);
    font-family: var(--fuente-texto);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--color-acento);
    color: var(--color-blanco);
}

/* ========================================================= */
/* PÁGINA                                                    */
/* ========================================================= */

.pagina-legal {
    width: min(86%, var(--ancho-maximo));
    margin: 0 auto;
}

/* ========================================================= */
/* CABECERA                                                  */
/* ========================================================= */

.cabecera-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(28px, 5vw, 65px) 0;
    border-bottom: 1px solid var(--color-linea);
}

.enlace-logo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
}

.volver-inicio {
    font-size: 0.9rem;
    transition: color 250ms ease;
}

.volver-inicio:hover {
    color: var(--color-acento);
}

/* ========================================================= */
/* ENCABEZADO                                                */
/* ========================================================= */

.encabezado-politica { 
    padding: clamp(75px, 10vw, 150px) 0;
    border-bottom: 1px solid var(--color-linea);
}

.etiqueta-seccion {
    margin: 0 0 25px;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--color-acento);
}

.encabezado-politica h1 { /*Cambiar la fuente del titulo en la politica de privacidad*/
    margin: 0;
    max-width: 1000px;
    font-family: var(--fuente-titulo);
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.introduccion {
    max-width: 680px;
    margin: clamp(35px, 5vw, 65px) 0 0;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.6;
    color: var(--color-gris);
}

/* ========================================================= */
/* BLOQUES                                                   */
/* ========================================================= */

.bloque-legal {
    display: grid;
    grid-template-columns: 100px minmax(0, 800px);
    gap: clamp(25px, 5vw, 85px);
    padding: clamp(55px, 7vw, 100px) 0;
    border-bottom: 1px solid var(--color-linea);
}

.numero-bloque {
    font-family: var(--fuente-titulo);
    font-size: 0.85rem;
    color: var(--color-acento);
}

.bloque-legal h2 { /*Cambiar la fuente de los subtitulos en la politica de privacidad*/
    margin: 0 0 25px;
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 2.5vw, 0.95em);
    line-height: 1;
    letter-spacing: -0.03em;
}

.bloque-legal p, /*Cambiar la fuente del texto normal politica de privacidad*/
.bloque-legal li {
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    color: #454545;
}

.bloque-legal a {
    color: var(--color-acento);
}

.bloque-legal ul {
    padding-left: 20px;
}

/* ========================================================= */
/* FOOTER                                                    */
/* ========================================================= */

.pie-legal {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 40px 7%;
    background: var(--color-negro);
    color: var(--color-blanco);
    font-size: 0.8rem;
}

.pie-legal p {
    margin: 0;
}

.pie-legal a {
    color: var(--color-acento);
}

/* ========================================================= */
/* RESPONSIVE                                                */
/* ========================================================= */

@media (max-width: 700px) {
    .pagina-legal {
        width: calc(100% - 36px);
    }

    .bloque-legal {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .encabezado-politica h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .pie-legal {
        flex-direction: column;
        padding: 35px 18px;
    }
}