/* ======================================================
   BILLY PAGÁN · SITIO OFICIAL
   legal.css
   TÉRMINOS Y CONDICIONES
====================================================== */


/* ======================================================
   01 · VARIABLES
====================================================== */

:root {

    --color-principal: #202020;

    --color-texto:
        rgba(32, 32, 32, 0.86);

    --color-secundario:
        rgba(32, 32, 32, 0.58);

    --color-borde:
        rgba(32, 32, 32, 0.12);

    --color-papel:
        rgba(248, 248, 245, 0.94);

    --fuente-serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --fuente-sans:
        "Montserrat",
        sans-serif;
}


/* ======================================================
   02 · PÁGINA LEGAL
   FONDO PROPIO
====================================================== */

html {

    min-height:
        100%;

    background:
        #4f554f;
}


body.pagina-legal {

    margin:
        0;

    padding:
        0;

    min-height:
        100vh;

    color:
        var(--color-principal);

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

    /*
       Fondo exclusivo de la página legal.
    */

    background-color:
        #4f554f;

    background-image:
        url("../../images/fondos/escritorio/fondo-legal-desktop.jpg");

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* ======================================================
   03 · CAPA DE AMBIENTACIÓN
====================================================== */

/*
   Capa prácticamente transparente.
   La fotografía permanece claramente visible.
*/

body.pagina-legal::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:
        rgba(245, 245, 245, 0.035);
}


/* ======================================================
   04 · CONTENEDOR GENERAL
====================================================== */

body.pagina-legal .legal {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-height:
        100vh;

    height:
        auto;

    overflow:
        visible;
}


/* ======================================================
   05 · CABECERA
====================================================== */

body.pagina-legal .legal-cabecera {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    padding:
        3.5rem 2rem 0;

    text-align:
        center;
}


/* ======================================================
   06 · VOLVER AL SITIO
====================================================== */

body.pagina-legal .legal-volver {

    display:
        inline-block;

    color:
        rgba(32, 32, 32, 0.70);

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

    font-size:
        0.64rem;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;

    text-decoration:
        none;

    border-bottom:
        1px solid
        transparent;

    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}


body.pagina-legal .legal-volver:hover {

    color:
        var(--color-principal);

    border-bottom-color:
        var(--color-principal);
}


/* ======================================================
   07 · VOLVER A INICIO
       NAVEGACIÓN FIJA
====================================================== */

/*
   Enlace permanente para abandonar la página legal.

   Permanece visible durante todo el scroll.
   No depende de JavaScript.
*/

body.pagina-legal .legal-volver-inicio {

    position:
        fixed;

    top:
        1.5rem;

    left:
        1.5rem;

    z-index:
        100;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    padding:
        0.65rem 0.9rem;

    color:
        rgba(32, 32, 32, 0.68);

    background:
        rgba(248, 248, 245, 0.72);

    border:
        1px solid
        rgba(32, 32, 32, 0.10);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

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

    font-size:
        0.57rem;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    text-decoration:
        none;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.06);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ----------------------------------------------
   FLECHA
---------------------------------------------- */

body.pagina-legal
.legal-volver-inicio
span {

    display:
        inline-block;

    font-family:
        Georgia,
        serif;

    font-size:
        0.9rem;

    font-weight:
        400;

    line-height:
        0.8;

    transition:
        transform 0.3s ease;
}


/* ----------------------------------------------
   HOVER
---------------------------------------------- */

body.pagina-legal
.legal-volver-inicio:hover {

    color:
        var(--color-principal);

    background:
        rgba(248, 248, 245, 0.92);

    border-color:
        rgba(32, 32, 32, 0.18);

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.09);
}


body.pagina-legal
.legal-volver-inicio:hover
span {

    transform:
        translateX(-3px);
}


/* ----------------------------------------------
   FOCUS · TECLADO
---------------------------------------------- */

body.pagina-legal
.legal-volver-inicio:focus-visible {

    outline:
        1px solid
        rgba(32, 32, 32, 0.65);

    outline-offset:
        4px;
}


/* ======================================================
   08 · SUPERFICIE ÚNICA DE LECTURA
====================================================== */

/*
   NO hay tarjetas individuales.

   Todo el documento está contenido en una única
   superficie clara que permite leer perfectamente
   sobre el fondo fotográfico.
*/

body.pagina-legal .legal-contenido {

    position:
        relative;

    z-index:
        2;

    width:
        min(820px, 90%);

    margin:
        0 auto;

    padding:
        5.5rem
        clamp(2rem, 6vw, 5.5rem)
        5.5rem;

    background:
        var(--color-papel);

    /*
       El desenfoque afecta únicamente a lo que
       queda detrás de esta superficie.
    */

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.10);
}


/* ======================================================
   09 · TÍTULO
====================================================== */

body.pagina-legal .legal-titulo {

    margin:
        0 0 5rem;

    text-align:
        center;
}


body.pagina-legal .legal-etiqueta {

    display:
        block;

    margin:
        0 0 1.2rem;

    color:
        var(--color-secundario);

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

    font-size:
        0.56rem;

    font-weight:
        400;

    line-height:
        1.4;

    letter-spacing:
        0.30em;

    text-transform:
        uppercase;
}


body.pagina-legal .legal-titulo h1 {

    margin:
        0;

    color:
        var(--color-principal);

    font-family:
        var(--fuente-serif);

    font-size:
        clamp(1.2rem, 4vw, 2rem);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -0.035em;

    white-space:
        nowrap;
}


/* ======================================================
   10 · FECHA
====================================================== */

body.pagina-legal .legal-fecha {

    margin:
        1.25rem 0 0;

    color:
        var(--color-secundario);

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

    font-size:
        0.54rem;

    font-weight:
        300;

    line-height:
        1.5;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


/* ======================================================
   11 · SECCIONES
====================================================== */

body.pagina-legal .legal-seccion {

    margin:
        0;

    padding:
        0 0 3.5rem;
}


/*
   Separadores muy finos.
*/

body.pagina-legal
.legal-seccion
+ .legal-seccion {

    padding-top:
        3.5rem;

    border-top:
        1px solid
        var(--color-borde);
}


/* ======================================================
   12 · TÍTULOS DE SECCIÓN
====================================================== */

body.pagina-legal .legal-seccion h2 {

    display:
        flex;

    align-items:
        baseline;

    gap:
        1.1rem;

    margin:
        0 0 1.5rem;

    color:
        var(--color-principal);

    font-family:
        var(--fuente-serif);

    font-size:
        1.8rem;

    font-weight:
        500;

    line-height:
        1.15;

    letter-spacing:
        0.01em;
}


/* ======================================================
   13 · TEXTO LEGAL
====================================================== */

body.pagina-legal .legal-seccion p {

    margin:
        0 0 1.45rem;

    color:
        var(--color-texto);

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

    font-size:
        0.90rem;

    font-weight:
        300;

    line-height:
        1.9;

    letter-spacing:
        0.008em;

    text-align:
        left;
}


body.pagina-legal
.legal-seccion
p:last-child {

    margin-bottom:
        0;
}


/* ======================================================
   14 · TEXTO DESTACADO
====================================================== */

body.pagina-legal
.legal-seccion
strong {

    color:
        #151515;

    font-weight:
        500;
}


/* ======================================================
   15 · ENLACES
====================================================== */

body.pagina-legal
.legal-seccion
a {

    color:
        var(--color-principal);

    text-decoration:
        underline;

    text-decoration-color:
        rgba(32, 32, 32, 0.30);

    text-underline-offset:
        0.22rem;

    transition:
        text-decoration-color 0.3s ease;
}


body.pagina-legal
.legal-seccion
a:hover {

    text-decoration-color:
        var(--color-principal);
}


/* ======================================================
   16 · ÚLTIMA SECCIÓN
====================================================== */

body.pagina-legal
.legal-final {

    padding-bottom:
        0;

    border-top:
        0;
}


/* ======================================================
   17 · PIE LEGAL
====================================================== */

body.pagina-legal .legal-pie {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        2rem;

    width:
        100%;

    padding:
        3rem 2rem 5rem;

    color:
        rgba(32, 32, 32, 0.58);

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

    font-size:
        0.54rem;

    font-weight:
        400;

    line-height:
        1.5;

    letter-spacing:
        0.18em;

    text-align:
        center;

    text-transform:
        uppercase;
}


body.pagina-legal
.legal-pie
a {

    color:
        rgba(32, 32, 32, 0.70);

    text-decoration:
        none;

    transition:
        color 0.3s ease;
}


body.pagina-legal
.legal-pie
a:hover {

    color:
        var(--color-principal);
}


/* ======================================================
   18 · MÓVIL
====================================================== */

@media (max-width: 767px) {


    /* ----------------------------------------------
       FONDO LEGAL EXCLUSIVO PARA MÓVIL
    ---------------------------------------------- */

    body.pagina-legal {

        background-image:
            url("../../images/fondos/movil/fondo-legal-movil.jpg");

        background-position:
            center center;

        background-size:
            cover;

        background-repeat:
            no-repeat;

        background-attachment:
            scroll;
    }


    body.pagina-legal::before {

        background:
            rgba(245, 245, 245, 0.045);
    }


    /* ----------------------------------------------
       CABECERA
    ---------------------------------------------- */

    body.pagina-legal
    .legal-cabecera {

        padding:
            2.5rem
            1.5rem
            0;
    }


    body.pagina-legal
    .legal-volver {

        font-size:
            0.54rem;

        letter-spacing:
            0.18em;
    }


    /* ----------------------------------------------
       VOLVER A INICIO
    ---------------------------------------------- */

    body.pagina-legal
    .legal-volver-inicio {

        top:
            1rem;

        left:
            1rem;

        padding:
            0.58rem
            0.72rem;

        gap:
            0.42rem;

        font-size:
            0.50rem;

        letter-spacing:
            0.12em;
    }


    body.pagina-legal
    .legal-volver-inicio
    span {

        font-size:
            0.82rem;
    }


    /* ----------------------------------------------
       SUPERFICIE
    ---------------------------------------------- */

    body.pagina-legal
    .legal-contenido {

        width:
            94%;

        padding:
            4rem
            1.5rem
            4rem;
    }


    /* ----------------------------------------------
       TÍTULO
    ---------------------------------------------- */

    body.pagina-legal
    .legal-titulo {

        margin-bottom:
            3.5rem;
    }


    body.pagina-legal
    .legal-etiqueta {

        margin-bottom:
            1rem;

        font-size:
            0.49rem;

        letter-spacing:
            0.20em;
    }


    body.pagina-legal
    .legal-titulo
    h1 {

        font-size:
            clamp(1.2rem, 4vw, 2rem);

        white-space:
            normal;

        line-height:
            1.15;
    }


    body.pagina-legal
    .legal-fecha {

        font-size:
            0.47rem;

        letter-spacing:
            0.09em;
    }


    /* ----------------------------------------------
       SECCIONES
    ---------------------------------------------- */

    body.pagina-legal
    .legal-seccion {

        padding-bottom:
            2.8rem;
    }


    body.pagina-legal
    .legal-seccion
    + .legal-seccion {

        padding-top:
            2.8rem;
    }


    /* ----------------------------------------------
       TÍTULOS
    ---------------------------------------------- */

    body.pagina-legal
    .legal-seccion
    h2 {

        gap:
            0.75rem;

        margin-bottom:
            1.2rem;

        font-size:
            1.5rem;
    }


    /* ----------------------------------------------
       TEXTO
    ---------------------------------------------- */

    body.pagina-legal
    .legal-seccion
    p {

        font-size:
            0.78rem;

        line-height:
            1.85;

        text-align:
            left;
    }


    /* ----------------------------------------------
       PIE
    ---------------------------------------------- */

    body.pagina-legal
    .legal-pie {

        flex-direction:
            column;

        gap:
            0.9rem;

        padding:
            2.5rem
            1.5rem
            3.5rem;

        font-size:
            0.48rem;

        letter-spacing:
            0.12em;
    }
}


/* ======================================================
   19 · ACCESIBILIDAD
====================================================== */

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

    body.pagina-legal
    .legal-volver,

    body.pagina-legal
    .legal-volver-inicio,

    body.pagina-legal
    .legal-seccion
    a,

    body.pagina-legal
    .legal-pie
    a {

        transition:
            none;
    }
}


/* ======================================================
   20 · SCROLL
       SOLO PÁGINA LEGAL
====================================================== */

/*
   Se mantiene el flujo natural del documento para
   permitir la lectura completa de los términos.
*/

body.pagina-legal {

    position:
        static;

    min-height:
        100%;

    height:
        auto;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    -webkit-overflow-scrolling:
        touch;
}


/*
   El contenido legal puede crecer libremente.
*/

html body.pagina-legal {

    overflow-y:
        auto;

    overflow-x:
        hidden;
}


/* ======================================================
   FIN · legal.css
====================================================== */