/*CLASES GENERALES*/

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


html, body {
    background-color: #000;
    scroll-behavior: smooth;
    font-family: 'Archivo', sans-serif;
    font-size: 18px;
    height: 100%;
    width: 100%;
}

a{
    text-decoration: none;
    cursor: pointer;
}

ul li {
    list-style: none;
}

.etiqueta{
    position: relative;
}

.etiqueta span{
    z-index: 1;
    position: relative;
    padding: 0 15px 0 0;
}

.etiqueta::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    background: #027866;
}

button{
    height: 42px;
    cursor: pointer;
    background-color: transparent;
    justify-content: space-between;
    padding: 8px 20px;
    align-items: center;
    display: flex;
    border: 2px solid #EC096F;
    border-radius: 63px;
    margin: 0 0 0 auto;
}

button:hover{
    border: 2px solid transparent;
    transition: ease-in-out 0.2s;
    background-color: #FCB0D2;

}

button:focus{
    outline: none;
}

.bgblack{
    background: #000;
}

.bgwhite{
    background: #DBE1E0;
}

.wrapper{
    padding: 0 20px;
    max-width: 700px;
    margin: 0 auto;
}

.margin_big{
    margin-bottom: 35px;
}

.margin_regular{
    margin-bottom: 25px;
}

.margin_small{
    margin-bottom: 15px;
}

.margin_icon{
    margin-right: 5px;
}

/*TIPOGRAFIA*/

h1{
    
    font-size: 1.777rem;
    font-weight: 400;
}

.big{
    line-height: 1.7rem;
    font-size: 1.333rem;
    font-weight: 400;
}

.regular{
    font-size: 1rem;
    font-weight: 400;
}

.small{
    font-size: 0.75rem;
    font-weight: 400;
}

.button{
    font-family: 'Archivo', sans-serif;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    font-weight: 700;
}


/*COLORES*/

.g200{
    color: #87FCEB;
}

.g500{
    color: #04B499;
}

.g600{
    color: #027866;
}

.g700{
    color: #013C33;
}

.b100{
    color: #F1F3F3;
}

.b200{
    color: #DBE1E0;
}

.b400{
    color: #99A8A6;
}

.b600{
    color: #556361;
}

.b700{
    color: #313A39;
}

.b800{
    color: #101313;
}

.r400{
    color: #EC096F;
}


/*HEADER*/

.minilogo{
    z-index: 4;
    justify-content: center;
    width: 100%;
    padding-top: 9px;
    position: fixed;
    display: flex;
    align-items: center;
    mix-blend-mode: difference; 
} 

.burger{
    padding-top: 9px;
    z-index: 5;
    mix-blend-mode: difference;
    align-items: center;
    display: flex;
    height: 45px;
    padding-right: 20px;
    right: 0;
    position: fixed;
}






/*FOOTER*/

footer{
    padding: 9px 0;
    position: fixed;
    justify-content: center;
    display: flex;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.spotify_content{
    border-radius: 60px;
    padding: 5px 15px;
    align-items: center;
    display: flex;
}

.spotify_content:hover{
    transition: 0.2s;
    background-color: #013C33
    
}

.spotify_content svg{
    margin-left: 8px;
    width: 85px;
    height: 32px;
}

.fondo{
    transition: ease-in-out 0.6s;
    background-color: rgba(1,60,51,0.8);
}

/*CAJA RRSS*/

.boxredes{
    height: 0;
    visibility: hidden;
}

.boxredes ul li{
    margin: 0;
}


.boxredes_socialitem svg{
    fill:  #FCB0D2;
}

.boxredes_socialitem svg:hover{
    fill: #F1F3F3;
}


/*MENU*/

.menu{
    max-width: 400px;
    transition: right .3s ease-in-out;
    background-image: url(../assets/aurora_menudos.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 20px 20px 0 20px;
    z-index: 6;
    background-color: #313A39;
    height: 100vh;
    width: 100%;
    position: fixed;
    right: -400px;
}

.menu_close svg{
    cursor: pointer;
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.menu_logo img{
    height: 100px;
}

.menu-open .menu{
    right: 0;
}

.menu_section{
    margin-top: 60px;
}

.menu_section ul li{
    border-bottom: 1px solid #556361;
    width: 100%;
    padding-left: 10px;
}

.menu_section ul li:hover{
    background-color: rgba(85, 99, 97, 0.5);
}

.menu_section li{
    cursor: pointer;
    padding: 20px 0;
}

.menu_footer{
    justify-content: space-between;
    height: 120px;
    margin-left: -20px;
    display: flex;
    position: absolute;
    bottom: 0;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

.menu_redes{
    width: 300px;
}

.menu_redes ul{
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.menu_redes ul li{
    align-items: center;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
}

.menuredes_socialitem svg{
    fill: #04B499;
}

.menuredes_socialitem:hover svg{
    fill: #87FCEB;
}

/*INICIO*/

.inicio{
    height: 100vh;
    width: 100%;
}

.inicio video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}


.inicio_logo{
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -105px;
    margin-top: -100PX;
}

.inicio_logo img{
    position: absolute;
    z-index: 2;
    height: 200px;
    width: 200px;
}



/*BIO*/

.bio{
    padding: 0 0 250px 0;
    background-color: black;
    background-image: url(../assets/bgsobremi.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left bottom;
}

/*MUSICA*/

.musica{
    padding: 50px 0;
    background-color: #DBE1E0;
}

.spotify_player iframe{
    border-radius: 20px;
}


.flex_column{
    grid-template-columns: repeat(1, auto);
    grid-gap: 20px;
    display: grid;
}

/*VIDEOS*/

.videos{
    padding: 50px 0;
    background-color: #DBE1E0;
}

.youtube_player iframe{
    border-radius: 20px;
}


/*EVENTOS*/

.eventos{
    padding: 50px 0;
    background-color: #DBE1E0;
}

.ticket_left{
    border-radius: 20px 20px 0 0;
    padding: 30px 20px 20px 20px;
    width: 100%;
    height: auto;
    background-color: #F1F3F3;
    border-bottom: dashed 2px #DBE1E0;
}

.ticket_right{
    display: flex;
    border-radius: 0 0 20px 20px;
    padding: 20px 20px;
    width: 100%;
    background-color: #F1F3F3;
}

.ticket_title{
    border-bottom: solid 1.5px #99A8A6;
}

.ticket_right::before{
    content: "";
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: #DBE1E0;
    border-radius: 50%;
    margin-left: -30px;
    margin-top: -30px;
}

.ticket_left::after{
    bottom: -30px;
    left: 30px;
    margin: 0 0 0 auto;
    content: "";
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: #DBE1E0;
    border-radius: 50%;
}

.ticket_button{
    margin: auto auto 0 auto;
}

/*FORMULARIO*/
.formulario{
    background-position: left bottom;
    background-size: 90%;
    background-repeat: no-repeat;
    background-image: url(../assets/bg_auroraboreal.png);
    width: 100%;
    position: absolute;
    z-index: 2;
    padding: 50px 0 0 0;
    background-color: #000;
}


.form__reg {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.input{
    font-family: 'Archivo', sans-serif;
	background-color: transparent;
	padding: .5rem 0;
	margin: .5rem 0;
	border: none;
    border-bottom: solid #556361 1px;
	transition: all 0.2s;
}

.input:focus {
    outline: none;
	border-bottom: solid #87FCEB 2px;
}

.input::placeholder{
    font-family: 'Archivo', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #556361;
}

textarea{
    resize: none;
    min-height: 120px;
}

.contacto_redes{
    padding: 14px 0;
    margin: 80px auto 80px auto;
    max-width: 300px;
}

.contacto_redes ul{
    justify-content: space-between;
    display: flex;
}


.contacto_redes ul li{
    justify-content: center;
    display: flex;
    border-radius: 60px;
    background-color: rgba(1,60,51,0.8);
    align-items: center;
    height: 42px;
    width: 42px;
}

.contacto_redes ul li:hover{
    transition: ease-in-out 0.2s;
    background-color: #013C33;
}

.contacto_socialitem{
    height: 20px;
}

.contactoredes_enlaces{
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.enlaces{
    margin: 5px 0;
    display: flex;
}

.enlaces a:hover{
    color: #F1F3F3;
}

@media screen and (min-width: 900px) {

    /*CLASES GENERALES*/
    a{
        font-size: 13.5px;
        letter-spacing: 0.08em;
    }

    .wrapper{
        max-width: 1300px;
        padding: 0 80px;
    }

    /*TIPOGRAFIA*/

    h1{
        max-width: 600px;
        font-size: 2.36rem;
        font-weight: 400;
    }

    .big{
        font-size: 1.777rem;
        font-weight: 400;
        line-height: 40px;
    }

    .regular{
        font-size: 1.333rem;
        font-weight: 400;
    }

    .small{
        font-size: 1rem;
        font-weight: 400;
    }

    .button{
        font-size: 0.75rem;
        font-weight: 700;
    }


    /*FOOTER*/

    .spotify{
        width: 240px;
    }

    .spotify_content svg{
        width: 100px;
    }

    /*CAJA RRSS*/

    .boxredes{
        height: initial;
        visibility: visible;
        text-align: center;
        right: 0;
        width: 48px;
        z-index: 1;
        position: fixed;
        top: 40%;
        background: #B10653;
        box-shadow: 0px 33px 80px rgba(0, 0, 0, 0.06), 0px 9.94853px 24.1177px rgba(0, 0, 0, 0.0390953), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.03), 0px 1.4945px 3.62304px rgba(0, 0, 0, 0.0209047);
        border-radius: 20px 0 0 20px;
    }

    .boxredes ul li{
        margin: 20px 0;
    }


    /*INICIO*/

    .inicio_logo{
        margin-left: -150px;
        margin-top: -150PX;
    }

    .inicio_logo img{
        height: 300px;
        width: 300px;
    }


    /*BIO*/

    .bio{
        padding: 50px 0;
        background-size: 40%;
    }

    .flex_column{
        grid-template-columns: repeat(2, auto);
        grid-gap: 60px;
        display: grid;
    }

    #margin_super{
        margin-top: 200px;
    }

    /*EVENTOS*/

    .eventos{
        padding: 80px 0;
    }

    .ticket{
        display: flex;
        
    }

    .ticket_left{
        padding: 40px 20px 20px 40px;
        border-bottom: none;
        border-right: dashed 2px #DBE1E0;
        width: 75%;
        border-radius: 20px 0 0 20px;
    }
    
    .ticket_right{
        width: 25%;
        border-radius: 0 20px 20px 0;
    }


    .ticket_content{
        display: flex;
    }

    /*FORMULARIO*/

    .formulario{
        padding-top: 100px;
    }

    .input::placeholder{
        font-size: 1rem;
    }

    .formulario{
        background-size: 50%;
    }

    .contacto_redes{
        margin: 150px auto 90px auto;
    }

    .contactoredes_enlaces{
        justify-content: space-evenly;
        justify-content: center;
        flex-flow: initial;
    }
    
    .enlaces{
        margin: 0 8px;
    }
}