@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght,YOPQ@500,250&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+SC:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


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

html {scroll-behavior: smooth; min-height: 100%; position: relative;}
a {transition-duration: 0s;}
body {position: relative; background-color: #000000 !important;}


.mt-6 {margin-top: 4rem !important;}
.mt-7 {margin-top: 5rem !important;}
.mt-8 {margin-top: 6rem !important;}
.mt-9 {margin-top: 7rem !important;}
.mt-10 {margin-top: 8rem !important;}

.mb-6 {margin-bottom: 4rem !important;}
.mb-7 {margin-bottom: 5rem !important;}
.mb-8 {margin-bottom: 6rem !important;}
.mb-9 {margin-bottom: 7rem !important;}
.mb-10 {margin-bottom: 8rem !important;}

.ps-6 {padding-left: 4rem !important;}
.ps-7 {padding-left: 5rem !important;}
.ps-8 {padding-left: 6rem !important;}
.ps-9 {padding-left: 7rem !important;}
.ps-10 {padding-left: 8rem !important;}

.pe-6 {padding-right: 4rem !important;}
.pe-7 {padding-right: 5rem !important;}
.pe-8 {padding-right: 6rem !important;}
.pe-9 {padding-right: 7rem !important;}
.pe-10 {padding-right: 8rem !important;}



/* HOME ---------------------------------------------------------------------------------------------------------------------------------*/

main {position: relative}


/*NAV*/

.navbar {height: 4rem; background-color: #1d1d1d !important; justify-content: center !important;}
.navbar-nav {align-items: end;}
.navbar-collapse {flex-grow: unset !important;}
.nav-item {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-optical-sizing: auto; font-size: 1.25rem; letter-spacing: 4px; font-variation-settings: "YOPQ" 250;}
.nav-link {margin: 0rem 1.25rem; color: #5291c5 !important;}
.nav-link:hover {color: #a65ab8 !important;}
.nav-link.active {color: #a65ab8 !important;}


/*BANNER*/

.banner {display: flex; justify-content: center; align-items: center; position: relative; background-color: #000000;}
.banner img {z-index: 0;}


/*TITULO HOME*/
.titulo h1 {font-family: "Alumni Sans SC", sans-serif; font-optical-sizing: auto; font-weight: 100; color: #ffffff; font-size: 15rem; letter-spacing: -7px; line-height: 90%;}
.titulo h2 {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-optical-sizing: auto; font-size: 1.25rem; color: #ffffff; letter-spacing: 7px;}

.flyer-home p {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-size: 1rem; margin-top: 2rem; letter-spacing: 1px; line-height: 120%; color: #959595;}


/*texto home*/
.titulo h3 {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-optical-sizing: auto; font-size: 1.75rem; color: #8961ed; letter-spacing: 7px;}
.titulo h3 span {font-size: 1rem; letter-spacing: 3px;}
.texto-home {font-family: "Roboto", sans-serif; font-weight: 400; color: #959595; font-size: 1rem;}
.texto-home span {font-size: 0.75rem;}

/*frase inicio*/
.inicio {background-image: url('../img-index/inicio-fondo.webp'); background-repeat: no-repeat; background-position: center; background-size: contain;}
.inicio {padding: 5rem; font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-size: 1rem; color: #ffffff; letter-spacing: 3px;}
.inicio .experiencia {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-size: 1rem; color: #959595; letter-spacing: 4px;}
.inicio .fulldome {font-size: 2.75rem; margin-top: 0rem; letter-spacing: 4px; margin-bottom: 0rem; line-height: 110%; color: #8961ed;}
.inicio .musicos {font-size: 2rem; margin-top: 0rem; margin-bottom: 0.8rem; color: #8961ed;}
.inicio .celebrando {font-size: 1rem; margin-top: 1rem; letter-spacing: 1px; line-height: 120%; color: #959595;}
.inicio .dark {font-family: "Pridi", serif; font-weight: 300; font-size: 2rem; font-style: normal; letter-spacing: 0px; line-height: 110%; margin-bottom: 0rem;}
.inicio .lay {margin-bottom: 0.4rem; color: #959595;}
.inicio .wish {font-size: 1.8rem; line-height: 110%; letter-spacing: 0px;}
.inicio .entradas {font-size: 1rem; margin-top: 2rem; letter-spacing: 1px; line-height: 120%; color: #959595;}
.inicio img {width: 11rem;}


/* Footer */


.footer {position: relative; bottom: 0; width: 100%; padding-top: 2rem; padding-bottom: 4rem; margin-top: 5rem; text-align: center; background-color: #1a1a1a;}
.footer .redes-pie a {color: grey !important; font-size: 1.6rem; margin: 0rem 0.4rem;}
.footer .redes-pie a:hover {color: #a65ab8 !important;}
.footer .fa-youtube {position: relative; font-size: 1.8rem; top: 0.075rem;}
.footer .fa-tiktok {position: relative; font-size: 1.4rem; bottom: 0.1rem;}
.footer p {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 0.85rem; color: #aeaeae; margin-bottom: 0.20rem; letter-spacing: 2px;}
.footer a {color: #5291c5; text-decoration: none; font-size: 1rem;}
.footer a:hover {color: #a65ab8; text-decoration: underline;}
.footer .creditos {margin-top: 0.85rem; text-align: center;}
.footer .creditos p {font-size: 0.75rem; color: #aeaeae; margin-top: 0.3rem; letter-spacing: 1px;} 
.footer .creditos img:last-child {display: none;}
.footer .creditos:hover img:last-child {display: unset;}
.footer .creditos:hover img:first-child {display: none;}


/* SECCIONES ---------------------------------------------------------------------------------------------------------------------------------*/

.tit-sec h1 {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-size: 3.75rem; margin: 22rem 0rem 2rem; color: #a65ab8; line-height: 45%; animation: tit 5s; animation-fill-mode: forwards;}
.tit-sec h1 span {font-weight: 500; font-size: 1rem; animation: tit 5s; animation-fill-mode: forwards;}

.navbar-brand {padding: 0rem !important; margin: 0rem !important;}

.body-secciones {background-color: #000000;}
.barra-secciones .navbar {height: 10rem; padding: 0rem 9rem; background-color: unset !important; background-image: url('../img-secciones/fondo-barra.webp'); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.barra-secciones img {width: 10rem; height: auto;}
.barra-secciones .navbar-nav {margin-bottom: 0.5rem;}
.barra-secciones .nav-item {font-size: 0.9rem; letter-spacing: 1px;}
.barra-secciones .nav-link {margin: 0rem 0.25rem; text-shadow: 0px 0px 2px #000000, 0px 0px 2px #000000; color: #ffffff;}
.barra-secciones a:hover {text-shadow: 0px 0px 15px #000000 !important;}



@keyframes tit {
  0%    {letter-spacing: 33px;}
  100%  {letter-spacing: 3px;}
}




/* HISTORIA ----------------------*/
/* HISTORIA ----------------------*/
/* HISTORIA ----------------------*/

.historia h2 {font-family: "Roboto", sans-serif; font-weight: 400; font-size: 1.35rem; color: #ffffff; margin: 1rem 0rem 0.5rem;}

.historia p {font-family: "Roboto", sans-serif; font-weight: 400; color: #ababab; font-size: 1.1rem;}
.historia p a {color: #858383;}
.historia p a:hover {color: #e3b93f;}
.historia p:nth-child(1) {font-size: 1.35rem; line-height: 150%; color: #63a7b7;}
.historia p:nth-child(2) {font-size: 1.35rem; line-height: 150%; color: #63a7b7;}
.historia .entradas {font-size: 0.75rem; margin-bottom: 0.25rem;}
.historia img {width: 25%;}



/* FOTOS ----------------------*/
/* FOTOS ----------------------*/
/* FOTOS ----------------------*/

#galeria {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; margin-bottom: 2.5rem;}

.contenedor-img {overflow: hidden; position: relative; cursor: pointer; flex: 32%; max-width: 50%; margin: 5px 5px;}
.contenedor-img .mascara,.contenedor-img .contenido {position: absolute; overflow: hidden; top: 0; left: 0;}

.efecto .mascara {background-color: rgb(143 77 158 / 60%); width: 700px; padding: 60px; height: 700px; opacity: 1; transform: translate(300px, 200px) rotate(45deg); transition: all 0.3s ease-in-out;}
.efecto:hover .mascara {opacity:1; transform: translate(-96px, -120px) rotate(45deg);}


/* CONTACTO ----------------------*/
/* CONTACTO ----------------------*/
/* CONTACTO ----------------------*/

.contacto-tit h1 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2.75rem; margin: 10rem 0rem 2rem; color: #e3b93f; line-height: 70%; animation: tit 5s; animation-fill-mode: forwards;}
.contacto-tit h1 span {font-weight: 500; font-size: 1.5rem; letter-spacing: 1px;}
.contacto-tit h2 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: 2px; margin: 3rem 0rem 1rem; color: #e3b93f; line-height: 70%;}


.form-tit {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.2rem; color: #4f8bbe;}
.form-control {color: #c7c7c7 !important; background-color: #343333 !important; box-shadow: 2px 3px 7px 1px rgb(0 0 0 / 45%); border-color: #404040 !important; border-radius: unset !important;}
.btn-primary {color: #ffffff !important; background-color: #a65ab8 !important; border-color: #a65ab8 !important; margin-top: 1.5rem; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);}
.btn-primary:hover {color: #000000 !important; background-color: #e3b93f !important; border-color: #816922 !important;}

.contenedor-data div p {font-family: "Roboto", sans-serif; font-size: 1.125rem; color: #959595; margin-top: 1.5rem;}
.contenedor-data div a {font-size: 1.25rem; color: #959595;}
.contenedor-data div a:hover {color: #a65ab8; text-decoration: none;}

.gracias {font-family: "Kumbh Sans", sans-serif; font-weight: 500; font-size: 2rem; line-height: 130%; margin-top: 2rem; margin-bottom: 0.9rem; color: #e3b93f; text-align: center; color: #4d89ba;}
.gracias a {color: #e3b93f;}
.gracias.error {color: #b10000;}
.gracias.error a {color: #b10000;}
.gracias.error a:hover {color: #ff0000;}

















/* 2560  ------------------------------------------------------- */
@media (max-width: 2560px){


}













/* 1920  ------------------------------------------------------- */
@media (max-width: 1920px){




.barra-secciones .navbar {height: 13rem; padding: 1rem 19rem;}
.barra-secciones img {width: 14rem; margin-top: 1rem;}
.barra-secciones .nav-item {font-size: 1.1rem;}

.gracias {margin-top: 23rem;}

}







/* 1366  ------------------------------------------------------- */
@media (max-width: 1366px){


/* SECCIONES ----------------------------------------------------*/

.barra-secciones .navbar {height: 10rem; padding: 0rem 9rem;}
.barra-secciones img {width: 12rem; margin-top: 0rem;}

.tit-sec h1 {margin-top: 18rem;}

.gracias {margin-top: 19rem;}

}






/* 1180  ------------------------------------------------------- */
@media (max-width: 1180px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 4rem;}

}








/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 1024px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 4rem;}
.barra-secciones .nav-link {margin: 0rem 0.125rem;}



}







/* SURFACE PRO 7 --------------------------------------------------- */
@media (max-width: 912px){

barra-secciones img {width: 12rem; margin-bottom: 2.5rem;}

.barra-home .nav-item {font-size: 1.2rem !important;}
.barra-home .nav-link {margin: 0rem 0.5rem;}


}




/* ASUS ZENBOOK FOLD  --------------------------------------------------- */
@media (max-width: 853px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 1rem;}
.barra-secciones img {width: 13rem; margin-bottom: 2.5rem;}

}




/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 820px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 2rem;}
.barra-secciones img {width: 13rem; margin-bottom: 2.5rem;}
.barra-secciones .nav-item {font-size: 1rem !important;}





}






/* IPAD  ------------------------------------------------------- */
@media (max-width: 768px){

.barra-secciones .nav-link {margin: 0rem 0rem;}




}








/* CELULARES --------------------------------------------------- */
@media (max-width: 500px){

/* NAV HOME */
.barra-home .nav-item {font-size: 1.35rem !important;  letter-spacing: 2px;}
.barra-home .nav-link {margin: 0rem 1rem;}


/* NAV SECCIONES*/
.barra-secciones .navbar {padding: 2rem 1rem !important; background-image: url('../img-secciones/fondo-barra-responsive.webp');}
.barra-secciones .navbar .navbar-toggler {background-color: #102302 !important; border-radius: 1.8rem !important; border: solid 2px #5291c5 !important; height: 3.6rem; width: 3.6rem; box-shadow: 2px 2px 10px 1px black; margin-bottom: 0rem; z-index: 2 !important;}
.barra-secciones .navbar .navbar-toggler:hover {background-color: #a65ab8 !important; border: solid 2px #a65ab8 !important;}
.barra-secciones .navbar .navbar-toggler.collapsed {background-color: #102302 !important; border: solid 2px #5291c5 !important;}
.barra-secciones img {width: 14rem; position: relative; top: -4rem;}
.barra-secciones .navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; background-color: #000000d9; padding: 7.75rem 2rem 1.75rem 25rem; z-index: 1 !important;}
.barra-secciones .nav-item {font-size: 1.35rem !important;  letter-spacing: 2px;}
.barra-secciones .nav-link {margin: 0rem 0rem;}


/* BANNER */
.banner div {padding: 0rem 1.5rem; margin-top: 8rem;}

/* FOOTER */
.footer p {letter-spacing: 1px !important;}


/* HOME */

.barra-home .navbar {position: fixed !important; top: 0rem; right: 0rem; background-color: unset !important; justify-content: flex-end !important;}
.barra-home .navbar .navbar-toggler {background-color: #102302 !important; border-radius: 2rem !important; border: solid 2px #5291c5 !important; height: 4rem; width: 4rem; box-shadow: 2px 2px 10px 1px black; margin: 0.7rem 2rem 0rem 0rem;}
.barra-home .navbar .navbar-toggler:hover {background-color: #a65ab8 !important; border: solid 2px #a65ab8 !important;}
.barra-home .navbar .navbar-toggler.collapsed {background-color: #102302 !important; border: solid 2px #5291c5 !important;}
.barra-home .navbar-collapse {z-index: -100000 !important;}
.barra-home .navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; background-color: #000000d9; padding: 7rem 1.25rem 1.75rem 25rem;}

.titulo h1 {font-family: "Alumni Sans SC", sans-serif; font-optical-sizing: auto; font-weight: 100; color: #ffffff; font-size: 8rem; letter-spacing: -7px; line-height: 90%;}

.texto-home {font-size: 1.2rem;}

.inicio {padding: 1rem;}
.inicio .fulldome {font-size: 2.5rem;}
.inicio .musicos {font-size: 1.45rem;}
.inicio .dark {padding: 0 4rem;}
.inicio .wish {padding: 0 5rem;}


/* HISTORIA */

.historia p {font-size: 1.2rem;}
.historia img {width: 35%;}


/* FOTOS */

.contenedor-img {flex: 100%; max-width: 100%;}



}