/* Global Reset */
* {
    font-family: 'Allerta', arial, Tahoma;
    box-sizing: border-box;
}



body {
    background: -webkit-gradient(linear, right top, left top, from(#212130), to(#212130));
    /*  background: linear-gradient(to left, #212130, #212130); */
    text-align: center;
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h3 {
    /* text-shadow:1px 1px 1px #fff;*/
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 1%;
    /* font-family: 'Red Hat Display', sans-serif;*/
    font-family: 'Mochiy Pop P One', sans-serif;
    /* font-family: 'Train One', cursive;*/
    font-size: 4vw;

    /* -webkit-text-stroke:    #e4e4e3 ; Esto era el borde*/
    /* -webkit-text-stroke: 1px rgb(0, 0, 0);*/
    color: #cf2121;
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.7));
    /*  text-shadow: -2px -2px 1px #f3f0f0   , 2px 2px 1px #cfced3   , -2px 2px 1px #aaa9b1   , 2px -2px 1px #aaa9b1   ; */


}




header {
    display: flex;
    /*background-color: #1a2746;*/
    /*   background: -webkit-gradient(linear, right top, left top, from(#4264b3), to(#1a2746)); */
    /*  background: linear-gradient(to left, #0e1420, #0e1420); */
    background-color: #1f1d1d;
    height: auto;
    padding: 0.5vw 4vw;
    justify-content: flex-end;
    align-items: center;
    filter: drop-shadow(0px 15px 7px rgba(0, 0, 0, 0.7));


}

header .logo {
    cursor: pointer;
    /*  margin-right: auto;*/
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.7));
    width: 15%;

}

header .logo img {
    /* height: 65px; */
    max-width: 100%;
    width: 15vh;
    transition: all 0.5s;
    margin-top: 5px;


}

header .logo img:hover {
    transform: scale(1.2);
}

/* Este es el menu clasico
header .nav-links{

    list-style: none;
}

header .nav-links li{

    display: inline-block;
    padding: 0 20px;
}

header .nav-links li:hover,
.overlay a:hover{

    transform: scale(1.1);
}

header .nav-links a{
    font-size: 700;
    color: rgb(140, 137, 140);
    
}

header .nav-links a:hover{
    color: rgb(193, 193, 193);
    
} */

.menu {
    display: none;

}

header h3 {
    width: 70%;
}

/* header a {
    width: 15%;
    display: flex;
    align-items: center;
} */
header a {


    /*  padding: 10px 15px;
    margin-left: 20px;
    
    */
    /* width: 60px;
    height: 60px; */

    width: 15%;
    border: none;
    border-radius: 10vw;
    cursor: pointer;

    transition: all 0.5s ease 0s;



    color: rgb(44, 51, 79);
    /*  background-color:rgba(50, 50, 51, 0.95); */
    /* background-color: #e7e7e7 ;*/

}


/*
header .btn button ,
header .menu button{
    font-size: 5mm;
    color: rgb(163, 163, 163);
    padding: 10px 15px;
    background-color: #20202b;
    border:none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    margin-left: 20px;
}

*/

header .btn {
    /* font-size: 5mm;
    padding: 10px 25px;*/


    transition: all 0.3s ease 0s;
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.7));
}




header .btn:hover {


    color: rgb(19, 20, 20);


    transform: scale(1.1);
    transition: all 0.5s ease 0s;



}

/* header .menu button img{ 
    height: 35px;
    width: 60px;
   
    
} */

header .btn img {
    height: auto;
    max-width: 60%;
    /* El maximo es el 70% de su padre, que es .btn o el enlace a*/
    width: 10vh;
    /* Va a tener un 10 vh es decir 10% del ancho de la pantalla pero si pasa el max-width es decir si es mas grande que el 70% se clava en el 70%*/
    transition: all 0.3s ease 0s;
    object-fit: cover;

}



/* Inicio barra de navegacion Nav*/
@media screen and (max-width:800px) {
    .nav-links {
        display: none;
    }

    /*
    .btn{
        display:none;
    }*/
    .menu {
        display: inherit;
    }
}

header a {
    text-decoration: none;
}

header .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgba(37, 30, 46, 0.95);
    overflow: hidden;
    transition: all 0.3s ease 0s;
}

header .overlay .overlay-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


}

header .overlay a {
    padding: 15px;
    font-size: 36px;
    display: block;
    transition: all 0.3s ease 0s;
    font-weight: 700;
    color: #e4e4e4;
}

header .overlay a:hover,
header .overlay a:focus {
    color: #444;
}

header .overlay .close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 65px;
}

@media screen and(max-height:450px) {
    header .overlay a {
        font-size: 20px;
    }

    .header .overlay .close {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }


}

/* Fin barra de navegacion Nav*/



/* Start  styling the page */


.contenedor-principal {
    /* display: flex;
    flex: 1; */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header,
main {
    flex: 1;
}


main {

    width: 92%;
    height: auto;
    /* background-color: #20202b;  */
    color: #444;
    /* Arriba | Derecha | Abajo | Izquierda 
    margin: 50px auto auto auto;*/
    margin: 20px auto;
    /* padding-top: 50px ;*/

    /* display:flex;*/
    min-height: 100vh;
}


.galeria {
    /*  width: 90%;*/
    /*  margin: 0 ;*/
    margin-top: 20px;
    margin-bottom: 20px;
    /* overflow: hidden;*/
    /*   padding: 60px 0;*/
    display: flex;
    /* gap: 20px;*/
    /* flex-wrap: wrap;*/
    /*  align-content: flex-start;*/
    /*  align-items: center; */
    justify-content: space-evenly;
    transition: all 0.4s ease-in-out;
}

.galeria-cuadro {
    background-color: #ebeced;
    /* min-width: 150px;*/
    /*  flex: auto;   interesante para galeria de fotos random  */
    /*  flex: 200px; /*cuando la imagen duplica este ancho se divide en 2 /*
    height: auto;
   /* flex-basis: 100px;*/
    margin: 1.5%;
    /* width: 34%; */
    /* height: 100%; */
    max-height: 20vw;
    overflow: hidden;
    display: inline-block;
    border-radius: 2%;
    border-style: solid;
    border-width: 0.5vw;
    border-color: #e4e4e4;
    filter: drop-shadow(0.5vw 0.5vw 0.2vw rgba(0, 0, 0, 0.7));
    transition: all 0.4s ease-in-out;
    position: relative;
    z-index: 1;
    object-fit: contain;



}


.galeria-imagen {
    width: 100%;
    height: 100%;
    object-fit: fill;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    border-radius: 1%;
    max-height: 19vw;



}






.galeria .galeria-cuadro:hover {

    transform: scale(1.2);
    transition: all 0.4s ease-in-out;
    z-index: 3;
    /* filter: drop-shadow(2.5vw 2.5vw 1vw rgba(0, 0, 0, 0.7)); */
    filter: drop-shadow(1.5vw 1.5vw 0.7vw rgba(0, 0, 0, 0.7));
}





/*
.galeria .galeria-cuadro .galeria-imagen:hover{
    
    background-color: #343437;
   * opacity: 0.9;
   * transform: scale(2.5);
    
    transition: all 0.2s ease-out 0.1s;
    width: 100%;
    height: 100vh; 
    *El 100% de la pantalla vertical


    padding: auto;
    position:fixed;  
    * Para fijar el elemento en la pantalla

    top: 0px;
    left: 0px;
    display:flex ; 
    justify-content: center;
    align-items: center;
    
    
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
    object-fit: contain;

}
*/


.contenedor-reproductor {
    /*display: flex;*/
    margin: 5px;
    height: 200px;
    /*
background-color: #4264b3;
*/





}


.container-audio {
    border-radius: 40px;
    transition: all 1s ease-out 3.1s;
    /*
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    */
    width: 100%;
    height: 100px;
    padding: 20px;
    /*   border-radius: 5px;*/
    background-color: #1f1d1d;
    /* background-color: #f3f3f3;*/

    display: flex;
    /* Arriba | Derecha | Abajo | Izquierda */
    margin: 0px 0px 0px 0px;
    overflow: hidden;
}


.container-grafico {
    width: 100%;
    height: 0px;
    padding: 0;
    /* border-radius: 5px;*/
    background-color: #1f1d1d;
    /*  background-color: #f5f5f5;*/
    transition: all 3s ease-out 200ms;
    margin: 0;
    overflow: hidden;

    border-radius: 0;








}

/*
.container-grafico:hover {
    
    width: 50%;
    height: 500px;
    padding: 3%;
    border-radius: 50%;
  
    background-color: #ffff31;
 
    transition: all 2s ease-out 100ms;
    margin:  auto;
    overflow: hidden;
    
}*/


/* Este era el efecto anterior, ahora al .container-grafico.encendido:hover le voy a borrar :hover
 .container-grafico.encendido {

    width:  130px;
    height:  100px;
   
    padding-top: 2%;
    padding-left: 3%;
    padding-right: 1%;
    padding-bottom: 0%;

   
    background-color: #1f1d1d;
 
    transition: all 2s ease-out 100ms;
   
    margin: auto;
    overflow: hidden;
   
}
*/

.container-audio.encendido {

    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    transition: all 400ms ease-out 200ms;



}

.container-grafico.encendido {
    width: 100%;
    height: 100px;


    background-color: #1f1d1d;

    transition: all 3s ease-out 500ms;
    padding-top: 3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;

    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;


}


audio {
    width: 100%;
    /*background-color: #00000000;*/
    /*  color: #099d9b;*/
    /*box-shadow: 5px 5px 20px rgb(20, 21, 21);*/
    /*border-radius: 15%;*/
    /*transform: scale(0.05);*/
    margin: auto 0px auto 0px;
}


audio:nth-child(2),
audio:nth-child(4),
audio:nth-child(6) {
    margin: 0;
}




.container-grafico .colum1 {
    width: 2.5%;
    height: 60px;
    border-radius: 1px;
    /* Arriba | Derecha | Abajo | Izquierda */
    margin: 0px auto 10px auto;
    display: inline-block;
    position: relative;
    animation-delay: 5s;
}



.container-grafico .colum1:last-child {
    /*margin: 0;*/

    /* Arriba | Derecha | Abajo | Izquierda */
    margin: 0px 0px 10px 0px;
}

.container-grafico .colum1 .row {
    width: 100%;
    height: 100%;
    border-radius: 2px;

    background: -webkit-gradient(linear, up, from(#7700aa), to(#8800ff));
    background: linear-gradient(to up, #7700aa, #8800ff);
    position: absolute;
    -webkit-animation: Rofa 10s infinite ease-in-out;
    animation: Rofa 10s infinite ease-in-out;

    bottom: 0;
    margin-bottom: 15px;

}


.container-grafico .colum1:nth-of-type(1) .row {
    -webkit-animation-delay: 5.99s;
    animation-delay: 5.99s;
}

.container-grafico .colum1:nth-of-type(2) .row {
    -webkit-animation-delay: 5.80s;
    animation-delay: 5.80s;
}

.container-grafico .colum1:nth-of-type(3) .row {
    -webkit-animation-delay: 5.70s;
    animation-delay: 5.70s;
}

.container-grafico .colum1:nth-of-type(4) .row {
    -webkit-animation-delay: 5.60s;
    animation-delay: 5.60s;
}

.container-grafico .colum1:nth-of-type(5) .row {
    -webkit-animation-delay: 5.50s;
    animation-delay: 5.50s;
}

.container-grafico .colum1:nth-of-type(6) .row {
    -webkit-animation-delay: 5.40s;
    animation-delay: 5.40s;
}

.container-grafico .colum1:nth-of-type(7) .row {
    -webkit-animation-delay: 5.30s;
    animation-delay: 5.30s;
}

.container-grafico .colum1:nth-of-type(8) .row {
    -webkit-animation-delay: 5.20s;
    animation-delay: 5.20s;
}

.container-grafico .colum1:nth-of-type(9) .row {
    -webkit-animation-delay: 5.10s;
    animation-delay: 5.10s;
}

.container-grafico .colum1:nth-of-type(10) .row {
    -webkit-animation-delay: 4.1s;
    animation-delay: 4.1s;
}

.container-grafico .colum1:nth-of-type(11) .row {
    -webkit-animation-delay: 4.1s;
    animation-delay: 4.1s;
}

.container-grafico .colum1:nth-of-type(12) .row {
    -webkit-animation-delay: 4.10s;
    animation-delay: 4.10s;
}

.container-grafico .colum1:nth-of-type(13) .row {
    -webkit-animation-delay: 4.20s;
    animation-delay: 4.20s;
}

.container-grafico .colum1:nth-of-type(14) .row {
    -webkit-animation-delay: 3.30s;
    animation-delay: 3.30s;
}

.container-grafico .colum1:nth-of-type(15) .row {
    -webkit-animation-delay: 3.40s;
    animation-delay: 3.40s;
}

.container-grafico .colum1:nth-of-type(16) .row {
    -webkit-animation-delay: 3.50s;
    animation-delay: 3.50s;
}

.container-grafico .colum1:nth-of-type(17) .row {
    -webkit-animation-delay: 3.60s;
    animation-delay: 3.60s;
}

.container-grafico .colum1:nth-of-type(18) .row {
    -webkit-animation-delay: 3.70s;
    animation-delay: 3.70s;
}

.container-grafico .colum1:nth-of-type(19) .row {
    -webkit-animation-delay: 3.80s;
    animation-delay: 3.80s;
}

.container-grafico .colum1:nth-of-type(20) .row {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.container-grafico .colum1:nth-of-type(21) .row {
    -webkit-animation-delay: 4.10s;
    animation-delay: 4.10s;
}

.container-grafico .colum1:nth-of-type(22) .row {
    -webkit-animation-delay: 4.20s;
    animation-delay: 4.20s;
}

.container-grafico .colum1:nth-of-type(23) .row {
    -webkit-animation-delay: 4.30s;
    animation-delay: 4.30s;
}

@-webkit-keyframes Rofa {
    0% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: yellow;
    }

    5% {
        height: 100%;
        -webkit-transform: translatey(15px);
        transform: translatey(15px);
        background-color: fuchsia;
    }

    10% {
        height: 90%;
        transform: translatey(0);
        -webkit-transform: translatey(0);
        background-color: bisque;
    }

    15% {
        height: 80%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    20% {
        height: 70%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: cornflowerblue;
    }

    25% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: cornflowerblue;
    }

    30% {
        height: 70%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: cornflowerblue;
    }

    35% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    40% {
        height: 60%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    45% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    50% {
        height: 50%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    55% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    60% {
        height: 40%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    65% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    70% {
        height: 30%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    75% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    80% {
        height: 20%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    85% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    90% {
        height: 10%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    95% {
        height: 5%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

    100% {
        height: 0;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: cornflowerblue;
    }

}



.playstore a img {
    width: 50%;
    margin: 20px;
    transition: 0.5s;
    filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 0.7));




}

.playstore a img:hover {
    transform: scale(1.1);
    transition: 0.5s;
    filter: drop-shadow(35px 35px 10px rgba(0, 0, 0, 0.7));

}

.piedepagina {
    margin-top: 50px;
    padding: 5px;
    background-color: #1f1d1d;
}



.programacion-desplegable {
    display: flex;
    width: 100%;
}


.vertical-btn {
    background-color: #141c3df0;
    color: white;
    padding: 10px;
    border: solid;
    border-width: 1px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    z-index: 1000;
    font-weight: bold;
    position: fixed;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
    filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 0.7));
}

.simbolo {
    display: block;

    transition: transform 0.3s ease-in-out;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.vertical-btn:hover .simbolo {
    transform: translate(10px, -50%);
    transition: all 0.3s ease-in-out;

}

.vertical-btn:hover {
    transform: translate(1px, -50%);
    transition: all 0.3s ease-in-out;
    background-color: #ba54a5;
}


.aside {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    padding: 1vh 10vh 1vh 5vh;


    /* Ocupa toda la vista vertical */
    background-color: rgba(9, 9, 9, 0.949);

    transition: left 0.3s ease-in-out;
    margin-top: 0vh;
    /* Ajusta según la altura del header */
    z-index: 900;
}

.aside img {

    width: 100vh;
    height: 100%;
    /* padding: 1% 1vh 1% 1vh; */
    box-shadow: 15px 8px 20px rgba(0, 0, 0, 0.922);
    /* Ajusta según la altura del header */

    /* Para mantener la proporción de la imagen */
}


.close-btn {
    position: absolute;
    top: 1%;
    right: 3%;
    background: none;
    border: none;
    font-size: 4rem;
    cursor: pointer;
    color: #bdbdbd;
    /* Puedes ajustar el color según tu diseño */
    z-index: 1001;
    /* Asegúrate de que esté por encima de otros elementos */
}

.close-btn:hover .close-icon {
    color: rgb(231, 231, 231);
    /* Efecto visual al pasar el cursor */
}

.close-icon {
    display: inline-block;
    font-weight: bold;
}



@media screen and (max-width: 700px) {


    .aside {

        top: 0;
        left: -100vw;
        width: 100vw;
        height: 100vh;
        padding: 1vw 0% 0vh 0%;





        margin-top: 0vh;

    }

    .aside img {

        width: 100vw;
        height: 100%;
        padding: 10vh 1vw 30vh 0vw;

        /* Ajusta según la altura del header */

        /* Para mantener la proporción de la imagen */
    }

    .close-btn {

        top: 0px;
        right: 5px;
        font-size: 4rem;

    }

    .galeria {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .galeria-cuadro {


        max-height: 40vw;
        max-width: 40vw;

    }

    .galeria-imagen {


        max-height: 40vw;
        max-width: 40vw;

    }
}