/* ======================================================
   BILLY PAGÁN · SITIO OFICIAL
   styles.css
====================================================== */


/* ======================================================
   RESET
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


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

:root{

    --texto:#202020;
    --texto-secundario:#666666;
    --menu:#242424;

    --capa:rgba(255,255,255,.15);
    --caja:rgba(255,255,255,.28);

}


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

html,
body{

    width:100%;
    height:100%;

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

    color:var(--texto);

    background:#ffffff;

}


a{

    color:inherit;

    text-decoration:none;

}


em{

    font-style:italic;

}


/* ======================================================
   TITULOS
====================================================== */

h1{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-weight:600;

    line-height:.9;

    letter-spacing:3px;

    color:var(--texto);

    text-shadow:0 4px 25px rgba(255,255,255,.8);

}


/* ======================================================
   HERO
====================================================== */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background-image:url("fondo-web-index.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:zoomFoto 20s ease-in-out infinite alternate;

}


.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--capa);

}


/* ======================================================
   ANIMACIONES
====================================================== */

@keyframes zoomFoto{

    from{

        background-size:100%;

    }

    to{

        background-size:112%;

    }

}


@keyframes entradaTexto{

    from{

        opacity:0;

        transform:translateY(50px);

        filter:blur(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

        filter:blur(0);

    }

}

/* ======================================================
   MENÚ ESCRITORIO
====================================================== */

.menu{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    padding-top:35px;

    z-index:100;

}


.menu nav{

    width:100%;

}


.menu ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    list-style:none;

}


.menu li{

    white-space:nowrap;

}


.menu a{

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

    font-size:11px;

    font-weight:300;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--menu);

    text-shadow:0 1px 8px rgba(255,255,255,.5);

    transition:.35s;

}


.menu a:hover{

    opacity:.65;

    letter-spacing:4px;

}


/* ======================================================
   BOTÓN HAMBURGUESA
====================================================== */

.hamburguesa{

    display:none;

    position:absolute;

    top:22px;

    right:22px;

    z-index:1000;

    background:none;

    border:none;

    color:var(--menu);

    font-size:34px;

    cursor:pointer;

    text-shadow:0 1px 8px rgba(255,255,255,.5);

}


/* ======================================================
   MENÚ MÓVIL
====================================================== */

.menu-movil{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

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

    transition:right .35s ease;

    z-index:999;

}


.menu-movil.abierto{

    right:0;

}


.menu-movil a{

    margin:18px 0;

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

    font-size:18px;

    font-weight:300;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--menu);

}


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

.footer{

    position:fixed;

    left:0;

    bottom:35px;

    width:100%;

    text-align:center;

    font-size:9px;

    font-weight:300;

    letter-spacing:1px;

    color:var(--texto-secundario);

    z-index:100;

}

/* ======================================================
   PORTADA
====================================================== */

.hero .contenido{

    position:relative;

    z-index:5;

    margin-left:38%;

    text-align:center;

    opacity:0;

    animation:entradaTexto 2s ease forwards;

    animation-delay:1s;

}


.hero .contenido h1{

    font-size:clamp(70px,10vw,130px);

}


.subtitulo{

    margin-top:30px;

    font-size:14px;

    font-weight:300;

    letter-spacing:10px;

    color:var(--texto);

}

/* ======================================================
   BIOGRAFÍA
====================================================== */

.pagina-biografia{

    overflow-y:auto;

}


/* ======================================================
   CONTENIDO
====================================================== */

.biografia{

    position:relative;

    z-index:5;

    width:45%;

    margin-left:52%;

    padding-top:430px;

    padding-bottom:140px;

    text-align:left;

}

/* ======================================================
   TÍTULO
====================================================== */

.biografia h1{

    text-align:left;

    font-size:clamp(42px,5vw,65px);

    font-family:"Cormorant Garamond",serif;

    font-weight:600;

    line-height:1;

    letter-spacing:2px;

    margin-bottom:45px;

}


/* ======================================================
   TEXTO
====================================================== */

.texto-biografia{

    max-width:650px;

    padding:34px 38px;

    margin-bottom:40px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.78),
        rgba(255,255,255,.62)
    );

    backdrop-filter:blur(6px);

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

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

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

    font-size:15px;

    font-weight:300;

    line-height:2;

    letter-spacing:.3px;

    color:var(--texto);

    text-align:left;

}

.texto-biografia p{

    margin-bottom:32px;

}


.texto-biografia p:last-child{

    margin-bottom:0;

}


.texto-biografia em{

    font-family:"Cormorant Garamond",serif;

    font-size:18px;

    font-weight:600;

}


/* ======================================================
   FOOTER BIOGRAFÍA
====================================================== */

.pagina-biografia + .footer{

    position:fixed;

    bottom:35px;

}

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

@media (max-width:700px){

    /* BASE */

    html,
    body{

        overflow:hidden;

    }

    /* HERO */

    .hero{

        background-image:url("fondo-web-index-movil.png");

        background-size:cover;

        background-position:left bottom;

        background-repeat:no-repeat;

        animation:none;

    }

    /* MENÚ */

    .menu{

        display:none;

    }

    .hamburguesa{

        display:block;

        top:24px;

        right:24px;

    }

    .menu-movil{

        display:flex;

    }

    /* PORTADA */

    .hero .contenido{

        position:absolute;

        top:12%;

        left:0;

        right:0;

        margin:0 auto;

        padding:0;

        text-align:center;

    }

    .hero .contenido h1{

        font-size:54px;

        letter-spacing:1px;

        line-height:.92;

    }

    .subtitulo{

        margin-top:14px;

        font-size:11px;

        letter-spacing:6px;

    }

    /* BIOGRAFÍA */

    .pagina-biografia{

        overflow-y:auto;

        overflow-x:hidden;

    }

    .pagina-biografia .hero{

        height:auto;

        min-height:100vh;

    }

    .biografia{

        width:auto;

        margin:0;

        padding:170px 25px 420px;

    }

    .biografia h1{

        font-size:52px;

        margin-bottom:35px;

    }

.texto-biografia{

    max-width:none;

    padding:28px;

    margin-bottom:90px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.82),
        rgba(255,255,255,.60)
    );

    border-radius:12px;

    backdrop-filter:blur(8px);

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

    box-shadow:0 8px 25px rgba(0,0,0,.10);

    font-size:14px;

    line-height:1.9;

    color:#202020;

}

    .texto-biografia p{

        margin-bottom:28px;

    }

    /* FOOTER */

    .footer{

    position:fixed;

    left:0;

    bottom:8px;

    width:100%;

    text-align:center;

    font-size:9px;

    letter-spacing:1px;

    z-index:100;

}

/* ======================================================
   CONCIERTOS
====================================================== */


.pagina-conciertos .conciertos{

    position:relative;

    z-index:5;

    width:50%;

    margin-left:45%;

    padding-top:280px;

    text-align:left;

}



.conciertos h1{

    font-size:clamp(45px,6vw,75px);

    margin-bottom:45px;

}



.texto-conciertos{

    max-width:600px;

    padding:35px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(5px);

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

    border-radius:12px;

    font-size:15px;

    line-height:2;

}



.texto-conciertos p{

    margin-bottom:25px;

}




@media(max-width:700px){


    .pagina-conciertos .conciertos{

        width:auto;

        margin:0;

        padding:170px 25px 350px;

    }



    .conciertos h1{

        font-size:52px;

        margin-bottom:35px;

    }



    .texto-conciertos{

        padding:28px;

        font-size:14px;

        background:rgba(255,255,255,.55);

    }


}

/* ======================================================
   CONCIERTOS
====================================================== */


.pagina-conciertos{

    background-image:url("fondo-web-index.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}




.pagina-conciertos .conciertos{

    position:relative;

    z-index:5;

    width:50%;

    margin-left:45%;

    padding-top:360px;

    padding-bottom:200px;

    text-align:left;

}




.conciertos h1{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(45px,6vw,75px);

    margin-bottom:45px;

    text-align:left;

}




.texto-conciertos{

    max-width:600px;

    padding:35px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(5px);

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

    border-radius:12px;

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

    font-size:15px;

    font-weight:300;

    line-height:2;

    color:#202020;

}




.texto-conciertos p{

    margin-bottom:25px;

}





@media(max-width:700px){


    .pagina-conciertos{

        background-image:url("fondo-web-index-movil.png");

        background-size:cover;

        background-position:left bottom;

        background-repeat:no-repeat;

    }



    .pagina-conciertos .conciertos{

        width:auto;

        margin:0;

        padding:170px 25px 380px;

    }



    .conciertos h1{

        font-size:52px;

        margin-bottom:35px;

    }



    .texto-conciertos{

        padding:28px;

        font-size:14px;

        background:rgba(255,255,255,.65);

    }


}

/* ======================================================
   MUSICA
====================================================== */


.pagina-musica{

    background-image:url("fondo-web-index.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.pagina-musica .musica{

    position:relative;

    z-index:5;

    width:50%;

    margin-left:45%;

    padding-top:360px;

    padding-bottom:200px;

    text-align:left;

}



.musica h1{

    font-size:clamp(45px,6vw,75px);

    margin-bottom:45px;

}



.texto-musica{

    max-width:600px;

    padding:35px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(5px);

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

    border-radius:12px;

    font-size:15px;

    line-height:2;

}



.texto-musica p{

    margin-bottom:25px;

}



@media(max-width:700px){


    .pagina-musica{

        background-image:url("fondo-web-index-movil.png");

        background-size:cover;

        background-position:left bottom;

    }



    .pagina-musica .musica{

        width:auto;

        margin:0;

        padding:170px 25px 380px;

    }



    .musica h1{

        font-size:52px;

    }



    .texto-musica{

        padding:28px;

        font-size:14px;

        background:rgba(255,255,255,.65);

    }


}

/* ======================================================
   VIDEOS
====================================================== */


.pagina-videos{

    background-image:url("fondo-web-index.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.pagina-videos .videos{

    position:relative;

    z-index:5;

    width:50%;

    margin-left:45%;

    padding-top:360px;

    padding-bottom:200px;

    text-align:left;

}



.videos h1{

    font-size:clamp(45px,6vw,75px);

    margin-bottom:45px;

}



.texto-videos{

    max-width:600px;

    padding:35px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(5px);

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

    border-radius:12px;

    font-size:15px;

    line-height:2;

}



.texto-videos p{

    margin-bottom:25px;

}



@media(max-width:700px){


    .pagina-videos{

        background-image:url("fondo-web-index-movil.png");

        background-size:cover;

        background-position:left bottom;

        background-repeat:no-repeat;

    }



    .pagina-videos .videos{

        width:auto;

        margin:0;

        padding:170px 25px 380px;

    }



    .videos h1{

        font-size:52px;

    }



    .texto-videos{

        padding:28px;

        font-size:14px;

        background:rgba(255,255,255,.65);

    }


}

/* ======================================================
   GALERIA
====================================================== */


.pagina-galeria{

    background-image:url("fondo-web-index.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.pagina-galeria .galeria{

    position:relative;

    z-index:5;

    width:70%;

    margin-left:25%;

    padding-top:250px;

    padding-bottom:200px;

    text-align:left;

}



.galeria h1{

    font-size:clamp(45px,6vw,75px);

    margin-bottom:45px;

}



.galeria-contenedor{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}



.foto-galeria{

    height:260px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(5px);

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

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

}




@media(max-width:700px){


    .pagina-galeria{

        background-image:url("fondo-web-index-movil.png");

        background-size:cover;

        background-position:left bottom;

    }



    .pagina-galeria .galeria{

        width:auto;

        margin:0;

        padding:170px 25px 380px;

    }



    .galeria h1{

        font-size:52px;

        margin-bottom:35px;

    }



    .galeria-contenedor{

        grid-template-columns:1fr;

        gap:20px;

    }



    .foto-galeria{

        height:220px;

    }


}

/* ======================================================
   CONTACTO
====================================================== */


.pagina-contacto{

    background-image:url("fondo-web-index.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.pagina-contacto .contacto{


    position:relative;

    z-index:5;

    width:45%;

    margin-left:50%;

    padding-top:330px;

    padding-bottom:180px;

    text-align:left;

}



.contacto h1{

    font-size:clamp(45px,6vw,75px);

    margin-bottom:45px;

}



.texto-contacto{

    padding:35px;

    background:rgba(255,255,255,.40);

    backdrop-filter:blur(5px);

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

    border-radius:12px;

    font-size:15px;

    line-height:2;

}



.texto-contacto strong{

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

}



.boton-contacto{

    display:inline-block;

    margin-top:30px;

    padding:15px 25px;

    border:1px solid #202020;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    transition:.3s;

}



.boton-contacto:hover{

    opacity:.6;

}





@media(max-width:700px){


.pagina-contacto{

    background-image:url("fondo-web-index-movil.png");

    background-position:left bottom;

}



.pagina-contacto .contacto{

    width:auto;

    margin:0;

    padding:170px 25px 380px;

}



.contacto h1{

    font-size:52px;

}



.texto-contacto{

    padding:28px;

    background:rgba(255,255,255,.55);

}



}