:root {
  --primaryColor: 186, 0, 1; /*rgb(186, 0, 1) #ba0001 Principal*/
  --secondaryColor: 0, 33, 74; /*rgb(0, 33, 74) #00214a Secundario*/
  --thirdColor: 83, 147, 212; /*rgb(83, 147, 212) #5393D4 Tercer Color*/
  
  --black: 13, 13, 13; /*rgb(13, 13, 13)  #0D0D0D*/
  --white: 255, 255, 255; /*rgb(255, 255, 255) #FFFFFF*/
}

/* 
==================
Google fonts
 <weight>: Use a value from 200 to 800
 <uniquifier>: Use a unique and descriptive class name

.manrope-<uniquifier> {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


<weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

==================
*/


/* 
==================
Global Styles
==================
*/

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  max-width: 100%;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

button{
  border: none;
}


/* 
==================
Fonts/Colors
==================
*/

body{
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  color: rgb(var(--black));
  background-color: rgb(var(--white));
}

.header-curso__quote{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.logo-text,
.title{
  font-family: "Montserrat", sans-serif;
}

.logo-text,
.menu-item-link{
  font-size: 1.2rem;
}

.title{
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.title--big{
    font-size: clamp(1.8rem, 4vw, 2.25rem);
}

.header{
    color: rgb(var(--white));
    font-size: 1rem;
    font-weight: 600;
}

.paragraph{
    text-align: justify;
    line-height: 1.4em;
}

.presentacion{
    color: rgb(var(--white));
}

.cursos{
    color: rgb(var(--white));
}

.vacacional-contact__title{
    font-size: 1.5em;
    font-weight: 800;
}

.footer{
    color: rgb(var(--white));
}


/* 
==================
Layout
==================
*/

.layout{
    display: flex;
    flex-direction: column;
}

/* INICIO Nav menu */

.header{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgb(var(--primaryColor));
}

.logo-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo{
    width: 45px;
    margin: 0.5em 0 0.5em 1em;
}

.logo-text{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
}

.nav-menu{
    margin-left: 1.8em;
}

.menu{
    display: flex;
    justify-content: center;
    gap: 2.5em;
}

.menu-item{
    transition: background-color 0.3s ease;
}

.menu-item:hover{
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.menu-item--active{
  font-weight: 800;
  border-bottom: 1px solid rgb(var(--white));
}

.hamburger{
  display: none;
  cursor: pointer;
}

.bar{
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: rgb(var(--white));
}

/* FIN Nav menu */

.main-content{
    /* background-color: aqua; */
    flex: 1;
    margin: 0 auto 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.banner{
    width: 100%;
}

.banner--mobile,
.vacacional-contact__art--mobile{
  display: none;
}

.paragraph{
    text-align: center;
    margin-bottom: 1.5em;
}

.paragraph--center{
    text-align: center;
    margin-bottom: 0;
}

.paragraph--end{
    margin-top: 0;
}

.presentacion{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../assets/img/background-notas-musicales-grande.webp);
    background-repeat: no-repeat;
    background-position: 47% 85%;
    background-size: 80%;
}

.presentacion::before,
.presentacion::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -2;
}

.presentacion::before{
    top: 0;
    background-color: rgb(var(--primaryColor));
}

.presentacion::after{
    bottom: 0;
    background-color: rgb(var(--white));
}

.title--presentacion{
    margin-top: 1em;
    margin-bottom: 0;
}

.title--presentacion,
.presentacion__paragraph{
    width: 65%;
    text-align: center;
}

.presentacion__paragraph{
    margin-bottom: 1.8em;
}

.presentacion__destacado{
    display: flex;
    width: 70%;
    margin-bottom: 4em;
}

.presentacion__destacado__text{
    background-color: rgb(var(--thirdColor));
    padding: 2.2em;
}

.presentacion__destacado__paragraph{
    text-align: left;
    line-height: 1em;
}

.title--presentacion,
.cursos-title,
.lista-cursos__curso__title{
        text-shadow: 2px 2px 0 #000;
}

.vacacional-contact__title,
.title--cursos{
        text-shadow: 2px 2px 0 #bcbcbc;
}

.img-recital{
    width: 75%;
}

.img-recital--mobile{
    display: none;
}

.cursos{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url(../assets/img/background-notas-musicales-pequeño.webp);
    background-repeat: no-repeat;
    background-position: 10% 115%;
    background-size: 100%;
}

.cursos::before,
.cursos::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -2;
}

.cursos::before{
    top:0;
    background-color: rgb(var(--secondaryColor));
}

.cursos::after{
    bottom:0;
    background-color: rgb(var(--white));
}

.cursos-title{
    margin: 1.5em 0;
    align-self: center;
}

.cursos__container{
    display: flex;
    justify-content: center;
    gap: 3em;    
    margin-bottom: 3.8em;
}

.cursos__container a{
    width: 27%;
}

.curso{
    background-color: rgb(var(--primaryColor));
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.curso:hover{
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

.curso__img{
    width: 100%;
    height: 285px;
}

.curso-card__title{
    margin: 0.8em;
    padding-top: 0.2em;
}

.vacacional-contact-container{
    display: flex;
    margin-bottom: 2em;
}

.vacacional-contact__art{
    width: 50%;
}

.vacacional-contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1em;
    border-top: 1px solid rgb(var(--secondaryColor));
    border-right: 1px solid rgb(var(--secondaryColor));
    border-bottom: 1px solid rgb(var(--secondaryColor));
}

.vacacional-contact__title{
    text-transform: uppercase;
}

.vacacional-contact__content{
    margin:0 0 0.7rem 0;
}

.vacacional-contact__whatsapp--container{
    display: flex;
    justify-content: center;
}

.vacacional-contact__whatsapp{
  transition: transform 0.3s ease;
  width: 45%;
  height: auto;
  min-width: 230px;
}
.vacacional-contact__whatsapp:hover{
    transform: scale(1.1);
}

.footer{
    width: 100%;
    background-color: rgb(var(--primaryColor));
    display: flex;
    align-items: center;
    justify-content: center; 
}

.footer__contact-numbers{
    margin: 0 1.5em;
}

/* 
==================
WhatsApp float
==================
*/

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.whatsapp-float img {
  width: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}
.whatsapp-float img:hover {
  transform: scale(1.1);
}


/* 
==================
Página cursos
==================
*/

.title--cursos,
.lista-cursos__curso__title{
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 800;
}

.title--cursos{
    margin: 1.5em 0;
}

.lista-cursos__curso{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 2.5em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lista-cursos__curso:hover{
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

.lista-cursos__curso__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgb(var(--secondaryColor));
    border-right: 1px solid rgb(var(--secondaryColor));
    border-bottom: 1px solid rgb(var(--secondaryColor));
}

.lista-cursos__curso__title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 35%;
    background-color: rgb(var(--primaryColor));
    color: rgb(var(--white));
    margin: 0;
    text-align: center;
}

.lista-cursos__curso__title--secondarycolor{
    background-color: rgb(var(--secondaryColor));
}

.lista-cursos__curso__title--thirdcolor{
    background-color: rgb(var(--thirdColor));
}

.lista-cursos__curso__subtitle{
    font-weight: 700;
}

.lista-cursos-curso__description{
    margin-top: 0;
    padding: 0 7em;
}

.lista-cursos__curso__img{
    width: 50%;
}

.lista-cursos__curso__img--mobile{
    display: none;
}

.bold-text{
    font-weight: 700;
}

/* 
==================
Página curso individual
==================
*/

.header-curso{
    display: flex;
    margin-bottom: 2em;
}

.header-curso__img{
    width: 65%;
}

.header-curso__quote{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    width: 35%;
}

.header-curso__title{
    font-size: 3em;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0.4em;
    width: 50%;
    text-indent: -0.5em;
}

.header-curso__subtitle{
    font-size: 1.5em;
    margin: 0 0 1em 0;
    text-transform: uppercase;
    font-weight: 600;
    text-indent: 4em;
}

.curso-intro{
    text-align: justify;
}

.beneficios-curso{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 2em;
}

.beneficios-curso__title,
.caract-curso__title,
.profesor-curso__title,
.faq-curso__title{
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 0;
    padding: 0.8em;
    margin-bottom: 1.5em;
    color: rgb(var(--white));
}

.caract-curso__title,
.beneficios-curso__title{
  background-color: rgb(var(--primaryColor));
}

.profesor-curso__title{
  background-color: rgb(var(--secondaryColor));
}

.faq-curso__title{
  background-color: rgb(var(--thirdColor));
}

.beneficios-curso__content-container{
    display: flex;
    justify-content: space-evenly;
}

.beneficios-curso__content{
    width: 35%;
}

.beneficios-curso__content__list{
    color: rgb(var(--white));
    height: 100%;
    text-align: center;
}

.beneficios-curso__content__list__beneficio{
    background-color: rgb(var(--secondaryColor));
    padding: 1em;
}

.beneficios-curso__content__list__beneficio--thirdcolor{
    background-color: rgb(var(--thirdColor));
}

.caract-curso__title{
    margin-bottom: 2.5em;
}

.caract-curso__element {
  border: 1px solid rgb(var(--secondaryColor));
  position: relative;
  padding-top: 1em;
  margin: 2rem auto;
  width: 70%;
}

.caract-curso__element__title {
  position: absolute;
  top: -1.2rem; /* sobresale del borde */
  left: -1rem;
  background-color: rgb(var(--secondaryColor));
  color: rgb(var(--white));
  padding: 0.7rem 0;
  font-weight: 800;
  width: 50%;
  font-size: 1rem;
  z-index: 2;
  margin: 0;
  text-align: center;
}

.caract-curso__element__title--primarycolor{
    background-color: rgb(var(--primaryColor));
}

.caract-curso__element__title--thirdcolor{
    background-color: rgb(var(--thirdColor));
}

.caract-curso__element__content {
  display: flex;
  padding: 1rem;
  gap: 1rem;
}

.caract-curso__element__img {
  width: 40%;
}

.caract-curso__element__text {
  text-align: justify;
}

.profesor-curso__img-container{
    background-image: url(../assets/img/background-profesores.webp);
    background-repeat: no-repeat;
    background-position: 66% 50%;
    background-size: 78%;
}

.profesor-curso__img{
    width: 40%;
    margin: auto;
    padding-bottom: 4em;
}

.profesor-curso__bio{
    text-align: justify;
    margin-bottom: 2em;
}

.faq-curso{
    margin-bottom: 2em;
}

.faq-curso__content{
    display: flex;
    flex-direction: column;
}

.faq-curso__question{
    font-weight: 800;
}

.faq-curso-img{
    width: 70%;
    align-self: center;
}

.mas-cursos{
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.mas-cursos__relacionados{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

.button-curso{
  width: 300px;
  padding: 7px;
  background-color: rgb(var(--primaryColor));
  color: rgb(var(--white));
  font-weight: 800;
  text-align: center;
  transition: transform 0.3s ease;
}

.button-curso:hover{
  transform: scale(1.1);
}

.button-curso--secondarycolor{
  background-color: rgb(var(--secondaryColor));
}

.button-curso--thirdcolor{
  background-color: rgb(var(--thirdColor));
}

/* 
==================
Media Querys
==================
*/

/* Escritorios pequeños 1220px*/

@media (max-width:1220px) {

    .presentacion__destacado {
    padding: 2em;
  }

  .img-recital {
    max-width: 70%;
    height: auto;
    object-fit: cover;
  }

  .presentacion__destacado__text {
    padding: 2em 1em;
  }
  
  .vacacional-contact__art{
      object-fit: cover;
      width: 60%;
  }

  .curso-main-content,
  .cursos-page-main-content{
    margin: 0 1em;
  }
  
  .caract-curso__element__img{
    object-fit: cover;
    height: auto;
  }

}


/* Tablets grandes 1080px*/

@media (max-width:1080px) {
    
  .verano-text{
    margin: 0 1em;
   }
  .presentacion__destacado {
    padding: 0;
    flex-direction: column;
  }

  .img-recital {
    width: 100%;
    max-width: fit-content;
  }

  .presentacion__destacado__text {
    padding: 1em 1em;
  }

  .presentacion__destacado__paragraph{
    text-align: center;
  }

  .presentacion{
    background-position: 0% 95%;
    background-size: 100%;
  }

  .cursos{
    background-position: -2.5em 100%;
  }

  .cursos__container{
    width: 100%;
  }

  .curso__img{
    height: auto;
  }

  .vacacional-contact-container{
    flex-direction: column;
  }

  .vacacional-contact__art{
    max-width: none;
    width: 100%;
  }

  .cursos-page-main-content{
    margin: 0;
  }

  .title--cursos{
    text-align: center;
  }

  .lista-cursos__curso__img{
    width: 40%;
    height: auto;
  }

  .lista-cursos__curso__title{
    padding: 0.3em 0;
  }

  .lista-cursos-curso__description{
    padding: 0 1em;
  }

  .header-curso__title{
    font-size: 2.5em;
  }

  .header-curso__subtitle{
    font-size: 1.5em;
  }

  .beneficios-curso__content{
    width: 45%;
  }

  .beneficios-curso__content__list__beneficio{
    padding: 1em 0.16em;
  }

  .caract-curso__element{
    width: 95%;
  }

}

@media (max-width: 900px) {
  .header-curso__title{
    font-size: 2em;
  }

  .header-curso__subtitle{
    font-size: 1em;
  }
}

/* Tablets verticales y teléfonos grandes 768px*/
@media (max-width: 768px){
  .hamburger{
    display: block;
  }

  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }
  
  .hamburger.active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  
  .hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  .header{
    justify-content: space-between;
    position: fixed;
    z-index: 5;
    /* padding: 10px 0;  Evita que se oculte el logo en celular*/
  }

  .nav-menu{
    width: auto;
    margin-right: 15px;
  }

  .menu{
    position: absolute;
    left:-100%;
    top: 61px;
    gap: 0;
    flex-direction: column;
    background-color: rgb(var(--primaryColor));
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .menu.active{
    left: 0;
  }
  
  .menu-item{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .menu-item--active{
    border: none;
    text-decoration: underline;
  }
  
  .menu-item-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .main-content,
  .footer{
    position: relative;
    top: 61px;
  }

  .profesor-curso__img{
    width: 55%;
  }
}

/* Teléfono grande 420px*/

@media (max-width: 420px){

  .vacacional-contact__art,
  .banner{
    display: none;
  }

  .banner--mobile,
  .vacacional-contact__art--mobile{
    display: block;
  }

  .title--presentacion,
  .presentacion__paragraph,
  .presentacion__destacado{
    width: 100%;
  }

  .presentacion__paragraph{
    padding: 0 1em;
  }

  .presentacion__destacado{
    margin-bottom: 0;
  }

  .img-recital{
    display: none;
  }
  
  
  .img-recital--mobile{
    display: block;
  }

  .cursos__container{
    background-color: rgb(var(--secondaryColor));
    flex-direction: column;
    align-items: center;
    gap: 2em;
    padding-bottom: 3em;
    margin-bottom: 0;

  }

  .cursos-title{
    text-align: center;
  }

  .cursos__container a{
    width: 80%;
  }

  .vacacional-contact-container{
    margin-bottom: 0;
  }

  .vacacional-contact{
    padding-bottom: 1em;
  }

  .footer{
    padding: 1em 0;
  }

  .footer__contact-numbers{
    padding-right: 2.7em;
  }

  .lista-cursos__curso__container{
    margin: 1em;
    border-left: 1px solid rgb(var(--secondaryColor));
  }

  .lista-cursos__curso__img{
    display: none;
  }
  
  .lista-cursos__curso__img--mobile{
    display: block;
    width: 100%;
  }
  
  .header-curso{
    display: block;
    position: relative;
  }

  .header-curso__quote{
    width: 100%;
    position: absolute;
    top: 50%;
    right: -50%;
    transform: translate(-50%, -50%);
  }

  .header-curso__img{
    width: 100%;
    object-fit: cover;
    opacity: 0.3;
  }

  .header-curso__title{
    width: 80%;
  }

  .header-curso__subtitle{
    text-align: end;
  }

  .beneficios-curso__title,
  .caract-curso__title,
  .profesor-curso__title,
  .faq-curso__title{
    font-size: 1.3rem;
  }

  .beneficios-curso__content-container{
    flex-direction: column;
    justify-content: start;
  }

  .beneficios-curso__content{
    width: 100%;
  }

  .beneficios-curso__content__list__beneficio{
    margin-top: 0;
  }

  .caract-curso__element__title{
    width: 70%;
  }

  .caract-curso__element__content{
    flex-direction: column;
    gap: 0;
  }

  .caract-curso__element__img{
    width: 100%;
  }

  .profesor-curso__img{
    width: 100%;
    padding: 0;
  }

}

/* Teléfono 360px (también en 320px*/

@media (max-width: 360px) {

  body{
    font-size: 1rem;
  }

  .title,
  .cursos-title{
    font-size: 1.8rem;
  }

  .title--presentacion{
    margin-top: 0.8em;
    font-size: 1.8rem;
  }

  .presentacion__destacado__text{
    padding: 27px 0.5em 0 0.5em;
  }

  .presentacion__destacado__paragraph{
    margin-top: 0;
  }

  .salto-linea::after {
  content: "\A";
  white-space: pre;
}

  .curso-card__title,
  .lista-cursos__curso__title{
    font-size: 1.4rem;
  }

  .lista-cursos__curso__subtitle{
    font-size: 1.05rem;
  }

  .beneficios-curso__title,
  .caract-curso__title,
  .profesor-curso__title,
  .faq-curso__title{
    font-size: 1.3rem;
  }

  .caract-curso__element__title{
    width: 85%;    
  }

}