/* ==========================================================================
   BILLY PAGÁN · SITIO OFICIAL
   conciertos.css
   PÁGINA · CONCIERTOS
   ========================================================================== */


/* ==========================================================================
   01 · PÁGINA
   ========================================================================== */

.pagina-conciertos {

    position: relative;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    isolation: isolate;

    background: transparent;

}


/* ==========================================================================
   02 · FONDO
   ========================================================================== */

.pagina-conciertos::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

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

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

}


/* ==========================================================================
   03 · ATMÓSFERA
   ========================================================================== */

.pagina-conciertos::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%
        );

}


/* ==========================================================================
   04 · CONTENEDOR PRINCIPAL
   ========================================================================== */

.conciertos-hero {

    position: relative;

    z-index: 1;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    margin: 0;

    padding: 0;

}


/* ==========================================================================
   05 · CONTENIDO
   ========================================================================== */

.conciertos-contenido {

    position: relative;

    z-index: 5;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    margin: 0;

    padding:
        10rem
        6%
        8rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}


/* ==========================================================================
   06 · TÍTULO
   ========================================================================== */

.conciertos-titulo {

    margin: 0;

    padding: 0;

}


.conciertos-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: center;

    text-rendering: optimizeLegibility;

}


/* ==========================================================================
   07 · MENSAJE
   ========================================================================== */

.conciertos-mensaje {

    width: min(100%, 720px);

    margin: 2rem 0 0;

    padding: 0;

    text-align: center;

}


.conciertos-mensaje p {

    margin: 0;

    padding: 0;

    color: var(--color-texto-suave);

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

    font-size: 0.68rem;

    font-weight: 300;

    line-height: 1.8;

    letter-spacing: 0.20em;

    text-align: center;

}


/* ==========================================================================
   08 · BOTÓN · HISTÓRICO
   ========================================================================== */

.conciertos-historico {

    margin: 3rem 0 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

}


.conciertos-boton-historico {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding:
        0.85rem
        1.8rem
        0.75rem;

    color: var(--color-texto);

    background: transparent;

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

    border-radius: 0;

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

    font-size: 0.60rem;

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.22em;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;

}


.conciertos-boton-historico::after {

    content: "";

    position: absolute;

    left: 1.8rem;

    right: 1.8rem;

    bottom: 0.32rem;

    height: 1px;

    background: currentColor;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.45s ease;

}


.conciertos-boton-historico:hover {

    color: var(--color-texto-suave);

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

    transform: translateY(-2px);

}


.conciertos-boton-historico:hover::after {

    transform: scaleX(1);

}


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

@media (min-width: 1600px) {

    .conciertos-contenido {

        padding:
            11rem
            6%
            9rem;

    }


    .conciertos-titulo h1 {

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

    }


    .conciertos-mensaje {

        margin-top: 2.2rem;

    }


    .conciertos-mensaje p {

        font-size: 0.72rem;

    }


    .conciertos-historico {

        margin-top: 3.2rem;

    }

}


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

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

    .conciertos-contenido {

        padding:
            9rem
            6%
            7rem;

    }


    .conciertos-titulo h1 {

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

    }


    .conciertos-mensaje {

        margin-top: 1.8rem;

    }


    .conciertos-mensaje p {

        font-size: 0.64rem;

    }


    .conciertos-historico {

        margin-top: 2.8rem;

    }

}


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

@media (max-width: 767px) {

    .pagina-conciertos::before {

        background-position: center center;

        background-size: cover;

        background-repeat: no-repeat;

    }


    .conciertos-hero {

        min-height: 100svh;

    }


    .conciertos-contenido {

        width: 100%;

        min-height: 100svh;

        padding:
            7rem
            7%
            5rem;

        justify-content: center;

        align-items: center;

        text-align: center;

    }


    .conciertos-titulo h1 {

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

        text-align: center;

    }


    .conciertos-mensaje {

        max-width: 520px;

        margin-top: 1.6rem;

        text-align: center;

    }


    .conciertos-mensaje p {

        font-size: 0.58rem;

        line-height: 1.8;

        letter-spacing: 0.16em;

        text-align: center;

    }


    .conciertos-historico {

        margin-top: 2.6rem;

    }


    .conciertos-boton-historico {

        padding:
            0.82rem
            1.35rem
            0.72rem;

        font-size: 0.56rem;

        letter-spacing: 0.18em;

    }


    .conciertos-boton-historico::after {

        left: 1.35rem;

        right: 1.35rem;

    }

}


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

@media (max-width: 380px) {

    .conciertos-contenido {

        padding:
            6.5rem
            7%
            5rem;

    }


    .conciertos-titulo h1 {

        font-size: 2.4rem;

    }


    .conciertos-mensaje {

        margin-top: 1.4rem;

    }


    .conciertos-mensaje p {

        font-size: 0.54rem;

        letter-spacing: 0.14em;

    }


    .conciertos-historico {

        margin-top: 2.3rem;

    }


    .conciertos-boton-historico {

        padding:
            0.78rem
            1.1rem
            0.68rem;

        font-size: 0.52rem;

        letter-spacing: 0.15em;

    }


    .conciertos-boton-historico::after {

        left: 1.1rem;

        right: 1.1rem;

    }

}


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

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

    .pagina-conciertos::before {

        position: absolute;

    }


    .conciertos-boton-historico {

        transition: none;

    }


    .conciertos-boton-historico::after {

        transition: none;

    }

}