/* ==========================================================================
   BILLY PAGÁN · SITIO OFICIAL
   footer.css
   COMPONENTE · FOOTER GLOBAL
   ========================================================================== */


/* ==========================================================================
   01 · FOOTER GENERAL
   ========================================================================== */

.footer {

    position: relative;

    z-index: 20;

    width: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    background: transparent;

}


/* ==========================================================================
   02 · CONTENIDO
   ========================================================================== */

.footer-contenido {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: 0 auto;

    padding:
        1.8rem
        1rem
        0.75rem;

    box-sizing: border-box;

    text-align: center;

}


/* ==========================================================================
   03 · TEXTO PRINCIPAL
   ========================================================================== */

.footer-copy {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: 0;

    padding: 0;

    color:
        rgba(35, 35, 35, 0.62);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        0.56rem;

    font-weight:
        300;

    line-height:
        1;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    user-select:
        none;

}


/* ==========================================================================
   04 · ENLACES
   ========================================================================== */

.footer-artista,
.footer-terminos {

    position: relative;

    display: inline-block;

    color:
        rgba(35, 35, 35, 0.66);

    font-family:
        inherit;

    font-size:
        inherit;

    font-weight:
        inherit;

    line-height:
        inherit;

    letter-spacing:
        inherit;

    text-transform:
        inherit;

    text-decoration:
        none;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

    -webkit-touch-callout:
        none;

    outline:
        none;

    overflow:
        hidden;

    transition:
        color 0.45s ease,
        font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);

}


/* ==========================================================================
   05 · ESPACIO ENTRE © 2026 Y BILLY PAGÁN
   ========================================================================== */

.footer-artista {

    margin-left:
        0.20em;

}


/* ==========================================================================
   06 · HOVER
   AMPLIACIÓN MUY SUTIL
   ========================================================================== */

.footer-artista:hover,
.footer-terminos:hover {

    color:
        rgba(25, 25, 25, 0.90);

    font-size:
        1.035em;

}


/* ==========================================================================
   07 · SEPARADORES
   ========================================================================== */

.footer-separador {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        1em;

    margin:
        0 0.48em;

    padding:
        0;

    color:
        rgba(35, 35, 35, 0.34);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        0.58em;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        0;

    user-select:
        none;

}


/* ==========================================================================
   08 · DESTELLO
   BARRIDO HORIZONTAL SOBRE EL ENLACE
   ========================================================================== */

.footer-artista::after,
.footer-terminos::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -150%;

    width:
        100%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.40),
            transparent
        );

    transform:
        skewX(-20deg);

    pointer-events:
        none;

}


/* ==========================================================================
   09 · ACTIVACIÓN DEL DESTELLO
   ========================================================================== */

.footer-artista.barrido::after,
.footer-terminos.barrido::after {

    animation:
        footerSweep
        0.6s
        cubic-bezier(0.25, 1, 0.5, 1)
        forwards;

}


/* ==========================================================================
   10 · ANIMACIÓN
   ========================================================================== */

@keyframes footerSweep {

    0% {

        left:
            -150%;

    }

    100% {

        left:
            150%;

    }

}


/* ==========================================================================
   11 · ESTADO DURANTE EL DESTELLO
   ========================================================================== */

.footer-artista.barrido,
.footer-terminos.barrido {

    color:
        rgba(25, 25, 25, 0.84);

}


/* ==========================================================================
   12 · FOCO DE TECLADO
   ========================================================================== */

.footer-artista:focus,
.footer-terminos:focus {

    outline:
        none;

}


.footer-artista:focus-visible,
.footer-terminos:focus-visible {

    outline:
        1px solid rgba(35, 35, 35, 0.22);

    outline-offset:
        4px;

}


/* ==========================================================================
   13 · PÁGINA DE INICIO
   ========================================================================== */

body.pagina-inicio .footer {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

}


/* ==========================================================================
   14 · PÁGINA LEGAL
   ========================================================================== */

body.pagina-legal .footer {

    position:
        relative;

    width:
        100%;

    margin-top:
        0;

}


/* ==========================================================================
   15 · PÁGINA LEGAL · TEXTO
   ========================================================================== */

body.pagina-legal .footer-copy {

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

}


body.pagina-legal .footer-artista,
body.pagina-legal .footer-terminos {

    color:
        rgba(255, 255, 255, 0.60);

}


/* ==========================================================================
   16 · PÁGINA LEGAL · SEPARADORES
   ========================================================================== */

body.pagina-legal .footer-separador {

    color:
        rgba(255, 255, 255, 0.32);

}


/* ==========================================================================
   17 · PÁGINA LEGAL · HOVER
   ========================================================================== */

body.pagina-legal .footer-artista:hover,
body.pagina-legal .footer-terminos:hover {

    color:
        rgba(255, 255, 255, 0.90);

}


/* ==========================================================================
   18 · PÁGINA LEGAL · DESTELLO
   ========================================================================== */

body.pagina-legal .footer-artista::after,
body.pagina-legal .footer-terminos::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.30),
            transparent
        );

}


/* ==========================================================================
   19 · ESTADO DURANTE DESTELLO · PÁGINA LEGAL
   ========================================================================== */

body.pagina-legal .footer-artista.barrido,
body.pagina-legal .footer-terminos.barrido {

    color:
        rgba(255, 255, 255, 0.86);

}


/* ==========================================================================
   20 · MÓVIL
   Solo vertical (portrait). En horizontal (landscape)
   el footer debe verse igual que en escritorio.
   ========================================================================== */

@media (max-width: 767px) and (orientation: portrait) {

    .footer-contenido {

        padding:
            1.45rem
            0.5rem
            0.75rem;

    }


    .footer-copy {

        font-size:
            0.44rem;

        letter-spacing:
            0.085em;

    }


    .footer-artista {

        margin-left:
            0.16em;

    }


    .footer-separador {

        width:
            0.9em;

        margin:
            0 0.32em;

        font-size:
            0.55em;

    }


    .footer-artista:hover,
    .footer-terminos:hover {

        font-size:
            1.025em;

    }


    .footer-artista:active,
    .footer-terminos:active {

        color:
            rgba(25, 25, 25, 0.86);

    }

}


/* ==========================================================================
   21 · PANTALLAS MUY PEQUEÑAS
   ========================================================================== */

@media (max-width: 380px) {

    .footer-contenido {

        padding:
            1.25rem
            0.3rem
            0.6rem;

    }


    .footer-copy {

        font-size:
            0.40rem;

        letter-spacing:
            0.065em;

    }


    .footer-artista {

        margin-left:
            0.14em;

    }


    .footer-separador {

        margin:
            0 0.24em;

    }

}


/* ==========================================================================
   22 · ACCESIBILIDAD
   ========================================================================== */

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

    .footer-artista,
    .footer-terminos {

        transition:
            none;

    }


    .footer-artista:hover,
    .footer-terminos:hover {

        font-size:
            inherit;

    }


    .footer-artista::after,
    .footer-terminos::after {

        display:
            none;

    }

}


/* ==========================================================================
   FIN · footer.css
   ========================================================================== */