/* ==========================================================================
   BILLY PAGÁN · SITIO OFICIAL
   biografia.css
   PÁGINA · BIOGRAFÍA · DISEÑO EDITORIAL
   ========================================================================== */


/* ==========================================================================
   01 · FONDO DE LA PÁGINA
   ========================================================================== */

.pagina-biografia {

    position: relative;

    width: 100%;

    min-height: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    isolation: isolate;

    background:
        url("../../images/fondos/escritorio/fondo-general-desktop.jpg")
        center center / cover
        fixed
        no-repeat;

}


/* ==========================================================================
   02 · ATMÓSFERA
   ========================================================================== */

.pagina-biografia::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0) 45%,
            rgba(0, 0, 0, 0.025) 100%
        );

}


/* ==========================================================================
   03 · CONTENEDOR PRINCIPAL
   ========================================================================== */

.biografia-hero {

    position: relative;

    z-index: 1;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    margin: 0;

    padding: 0;

}


/* ==========================================================================
   04 · CONTENIDO EDITORIAL
   ========================================================================== */

.biografia-contenido {

    position: relative;

    z-index: 5;

    width: min(88%, 820px);

    margin: 0 auto;

    padding:
        10rem
        0
        8rem;

}


/* ==========================================================================
   05 · TÍTULO
   ========================================================================== */

.biografia-titulo {

    margin: 0 0 3.5rem;

    padding: 0;

}


.biografia-titulo h1 {

    margin: 0;

    padding: 0;

    color: var(--color-texto);

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

    font-size:
        clamp(
            2.6rem,
            4.5vw,
            4.5rem
        );

    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -0.02em;

    text-align: left;

    text-rendering: optimizeLegibility;

}


/* ==========================================================================
   06 · CUERPO DEL TEXTO
   ========================================================================== */

.biografia-texto {

    width: 100%;

    margin: 0;

    padding: 0;

    color: var(--color-texto);

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

    font-size: 0.9rem;

    font-weight: 300;

    line-height: 1.9;

    letter-spacing: 0.005em;

    text-align: left;

    text-rendering: optimizeLegibility;

}


/* ==========================================================================
   07 · PÁRRAFOS
   ========================================================================== */

.biografia-texto p {

    margin: 0 0 1.8rem;

    padding: 0;

}


.biografia-texto p:last-child {

    margin-bottom: 0;

}


/* ==========================================================================
   08 · TÍTULOS DE OBRAS
   ========================================================================== */

.biografia-texto em {

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

    font-size: 1.05em;

    font-weight: 500;

}


/* ==========================================================================
   09 · PANTALLAS GRANDES
   ========================================================================== */

@media (min-width: 1600px) {

    .biografia-contenido {

        width: min(82%, 900px);

        padding:
            11rem
            0
            9rem;

    }


    .biografia-titulo h1 {

        font-size:
            clamp(
                3.2rem,
                4vw,
                5rem
            );

    }


    .biografia-texto {

        font-size: 0.94rem;

        line-height: 1.95;

    }

}


/* ==========================================================================
   10 · TABLET
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .biografia-contenido {

        width: min(86%, 760px);

        padding:
            9rem
            0
            7rem;

    }


    .biografia-titulo {

        margin-bottom: 3rem;

    }


    .biografia-titulo h1 {

        font-size:
            clamp(
                2.8rem,
                5vw,
                4rem
            );

    }


    .biografia-texto {

        font-size: 0.88rem;

        line-height: 1.85;

    }

}


/* ==========================================================================
   11 · MÓVIL
   ========================================================================== */

@media (max-width: 767px) {

    .pagina-biografia {

        background-position: center center;

        background-attachment: fixed;

    }


    .biografia-hero {

        min-height: 100svh;

    }


    .biografia-contenido {

        width: 88%;

        padding:
            7rem
            0
            5rem;

    }


    .biografia-titulo {

        margin-bottom: 2.8rem;

    }


    .biografia-titulo h1 {

        font-size:
            clamp(
                2.5rem,
                10vw,
                3.5rem
            );

        line-height: 0.95;

    }


    .biografia-texto {

        font-size: 0.78rem;

        line-height: 1.85;

        letter-spacing: 0;

    }


    .biografia-texto p {

        margin-bottom: 1.6rem;

    }

}


/* ==========================================================================
   12 · MÓVILES PEQUEÑOS
   ========================================================================== */

@media (max-width: 380px) {

    .biografia-contenido {

        width: 86%;

        padding:
            6.5rem
            0
            5rem;

    }


    .biografia-titulo {

        margin-bottom: 2.5rem;

    }


    .biografia-titulo h1 {

        font-size: 2.4rem;

    }


    .biografia-texto {

        font-size: 0.75rem;

        line-height: 1.8;

    }

}


/* ==========================================================================
   13 · REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

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

    .biografia-titulo h1 {

        animation: none;

    }

}