/* *********** Custom Properties ********** */
:root{
    --light-blue-color:#d7d16f;
    --blue-color:#aad0e7;
    --footer-color:#34495e;
    --gray-color:#fffff;
    --darkk-color:#5c4b51;
    --orange-color:#a6055d;
    --light-red-color:#0e0d0d;
      --form-ok-color: #4caf50;
  --form-error-color: #f44336;
    --header-height:5rem;
    --max-width:70%;
    --font: "Josefin Sans", sans-serif;
  }
  
  
  /* *********** Resets ********** */
  html {
      box-sizing: border-box;
      font-family: var(--font);
      font-size: 16px;
      scroll-behavior: smooth;
    }
    
    *,
    *::after,
    *::before {
      box-sizing: inherit;
    }
    
    body {
      margin: 0;
      overflow-x: hidden;
      color: var(--text-color);
    }
    
    a {
      color: var(--link-color);
      text-decoration: none;
    }
    
  
    
    h1 {
      margin: 0;
      font-size: 2rem;
    }
    
    h2 {
      margin: 0;
      font-size: 1.5rem;
    }
    
    h3 {
      margin: 0;
      font-size: 1.25rem;
    }
    
    h4 {
      margin: 0;
      font-size: 1rem;
    }
    
    h5 {
      margin: 0;
      font-size: 0.85rem;
    }
    
    h6 {
      margin: 0;
      font-size: 0.7rem;
    }
    
    img {
      width: 100%;
      height: auto;
    }
    
    p {
      line-height: 1.6;
      margin: 0;
    }
    /* *********** Utilities ********** */
    .btn{
      margin-top: 1rem;
      padding:  1rem 1rem;
      border-radius: 0rem;
      border: thin solid #000;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      color: #000;
      
      font-size: 1.2rem;
      font-weight: bold;
      
      transition: all .4s ease-in .1s;
    }
    .btn:hover{
      background-color: var(--darkk-color);
      color: #fff;
    }



    .top50{
      position: absolute;
      top: 50%;
    }
    .text-felt{
      text-align: left;
    }
    .text-center{
      text-align: center;
    }
    .text-right{
      text-align: right;
    }
    .padding1{
      padding: 1rem;
    }
    .padding01{
      padding: 0 1rem;
    }
    .padding-b1{
      padding-bottom: 1rem;
    }
    .padding-t1{
      padding-top: 1rem;
    }
    .margin1{
      margin: 1rem;
    }
   .none{
      display: none;
  }
  .box-shadow-1{
    box-shadow: 0.10rem 0.10rem .5rem rgba(0, 0, 0,0.25); 
  }
  .font-2{
    font-size: 1.1rem;
  }
  .back-white{
    background-color: white;
  }
  .container{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  @media screen and (min-width:720px){
    .container{
      width: 60%;
    }
  }
  /* *********** Modal ********** */

.modal{
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.322);
  transition: all 1s;
  opacity: 0;
  pointer-events: none;
}
.modal-content{
  position: relative;
  background-color: #fff;
  border-radius: .5rem;
  width: 90%;
  height: 80vw;
  padding-top: 3rem;
}
.modal-close{
  position: absolute;
  top: .5rem;
  right: .5rem;
}
.modal#modal-opiniones:target{
  opacity: 1;
  pointer-events: auto;
}

@media screen and (min-width:768px){
  .modal-content{
    width: 70%;
    height: 60vw;
  }
}
@media screen and (min-width:1024px){ 
  .modal-content{
    width: 40%;
    height: 34vw;
  }
}

  /* *********** menu accordion ********** */
.accordion{
  width: 3rem;
}
.accordion-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#e6e6e6;
  height: 2rem; 
  border-radius:  .3rem .3rem 0 0 ;

}
.accordion-btn img {
  width: 2rem; 
  height: auto;
}
.cont-accordion{
  border-top: 1px solid #acacac;
  padding-top: .2rem;
  position: absolute;
  width: 3rem;
  background-color:#e6e6e6;
  display: flex;
  flex-direction: column;
  z-index: 999;
  justify-content: center;
  align-items: center;
  border-radius:  0 0 .3rem .3rem;
  
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s ease;
}

.cont-accordion.is-active{
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  box-shadow: 0.10rem 0.10rem .5rem rgba(0, 0, 0,0.25); 
  }
.accordion-item{
  display: flex;
  justify-content: center;
  align-items: center;

  height: 2rem;
}
.accordion-item img{
  cursor: pointer;
}

  /* *********** Menu   ///   Header ********** */
.lang-img{
    width:32px;
    height:20px;
}

.menu-btn{
  
    border: 0;
    cursor: pointer;
    background-color: var(--second-color);
  }
  .menu-btn svg{
    fill: var(--orange-color);
  }
  
  
  
  
  
  
  .menu{
      position: fixed;
      left: 0;
      bottom: var(--header-height);
      width: 100%;
      background-color:#fff;
      display: flex;
      flex-direction: column;
      top: var(--header-height);
      height: 16rem;
      pointer-events: none;
      z-index: 999;
  

      clip-path: inset(0 0 100% 0);
      transition: clip-path .7s ease;
  }
  
  .menu.is-active{
    
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
    box-shadow: 0.10rem 0.10rem .5rem rgba(0, 0, 0,0.25); 
    }
  
  .menu a{
    color: var(--dark-color);
    margin: 1.5rem;
    font-size: 1rem;
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;

  }


    /*header*/
    .header{
      position: sticky;
      left: 0;
      top: 0;
      z-index: 999;
      padding: .6rem;
      width: 100%;
      height: var(--header-height);
      background-color:#fff;
  }
  .header> .container{
    margin-top: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    }
  .logo{
    
    font-size: 7vw;
    color: var(--orange-color);
    font-family: 'DM Serif Display', serif;
  }


  @media screen and (min-width:500px){
    .logo{
      font-size: 2.3rem;
    }

  
  }
  
  @media screen and (min-width:1024px){
    .header{
      position: static;
    }
    .menu-btn{
      display: none;
    }
    .menu{
      position: static;
      clip-path: inset(0 0 0 0);
      pointer-events: auto;
      width: auto;
      flex-direction: row;

      height: 32%;

    }
    .none{
      display: inline;
    }
    .menu a{
      font-size: 1.1rem;
    }
    .header > .container{
      justify-content: space-between;
    }
    .menu a{
      padding-bottom: .2rem;
      position: relative;
    }
    .menu a::after{
      content: "";
      position: absolute;
      width: 0;
      bottom: 0;
      height: .10rem;
      background-color: #000;
      left: 50%;
      transition: width 0.5s ease, left 0.5s ease, right 0.5s ease 
    }
    .menu a:hover::after{
      width: 100%;
      left: 0;
    }    .menu a::after{
      content: "";
      position: absolute;
      width: 0;
      bottom: 0;
      height: .10rem;
      background-color: #000;
      left: 50%;
      transition: width 0.5s ease, left 0.5s ease, right 0.5s ease 
    }
    .menu a:hover::after{
      width: 100%;
      left: 0;
    }
    }
  
  /* *********** Footer ********** */
    .footer{
      padding-top: 2rem;
      background-color: var(--darkk-color);
      color: #fff;

    }
    .cont-footer{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-left: auto;
      margin-right: auto;
    }
    
    .footer a{
    font-size: 1.5rem;
    font-family: 'DM Serif Display', serif;
    }
    .f-info{
    text-align: center;
    margin-bottom: 1.5rem;
    }
    .f-info img{
    width: 1rem;
    }
    .f-info h5{
      margin-bottom: .5rem;
    }
    @media screen and (min-width:1024px){ 

      .cont-footer{
        width: 70%;
        flex-direction: row;
        justify-content: space-evenly;
      }
    }

/* ************** Styles ************** */ 




  /* ************** HOME ************** */ 

.home{
  padding-top: 5rem;
  padding-bottom: 7rem;
  background-color: var(--gray-color);
}

h1{
  font-size: 2rem;
  font-family: 'DM Serif Display', serif;
  font-weight: bolder;
  background-color: var(--blue-color);
  color: #fff;
  display: inline;
  line-height : 3rem;
  white-space: pre-wrap;
}

/* ////////////////HOME MEDIA QUERY//////////// */ 

@media screen and (min-width:768px){
.home-content img{
  width: 50%;
  height: auto;
}
.home-content{
  display: flex;
  flex-direction: row;

}
.home-content article{
  max-width: 30rem;
  
}
.container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width:740px;
}

}
  @media screen and (min-width:1024px){ 
      .home-content img{
        padding-bottom: 3rem;
      }
      h1{
        font-size: 2.5rem;
        line-height : 4rem;
      }
      .home-content p{
        font-size: 1.3rem;
      }
      .container{
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width:1114px;
      }
  }


/************ section2 ********* */
.section2{
  margin-bottom: 5rem;
}
h2{
  font-size: 2rem;
  color: var(--orange-color);
  background-color: var(--gray-color);
  font-family: 'Playball', 'cursive';
  padding-bottom: 1rem;
}
.informacion1{
  background-color: var(--light-blue-color);
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;

  margin-bottom: 6rem;
  height: 17rem;

  position: relative;
  display: flex;
  
  justify-content: center;
  align-items: center;
}


.informacion1>img{
  position: absolute;
height: auto;
width: 10rem;
padding: 0;
margin: 0;
bottom: -30%;
}


.about{
  border-radius: .2rem;
  background-color: var(--blue-color);
  padding-top: 4rem;
  padding-bottom: 2rem;
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 25rem;
  transition: transform 1s ease 0s;
}
.about:hover{
  transform: translateY(-2rem);
}








.about p{
  margin: 2rem;
  color: #000;
  font-size: 1.2rem;
}
.about h3{
  font-size: 1.6rem;
  font-family: 'DM Serif Display', serif;
  font-weight: bolder;
  color: #fff;
  display: inline;
}
.about .hr{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  height:  .1px;
  background-color: #5c4b51;
  margin-top: 2rem;
}

/* ////////////////SECTION2 MEDIA QUERY//////////// */ 


@media screen and (min-width:768px){
.informacion1{
  height: 15rem;
  
}
.about{
  width: 60%;
}
}


@media screen and (min-width:1024px){ 
  .cards{
    display: grid;
    grid-template-columns: repeat(3,30%);
    justify-content: space-between;
    align-items: center;
  }
  .informacion1{
    height: 17rem;
  }
  .informacion1 .container{
    width: 30%;
  }
  .about{
    margin-top: 0;
    width: 100%;
  }
  .cards{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
/************ section3 ********* */
.section3{
  background-color: #fff;
}
.informacion3{
  
  color: var(--darkk-color);
  font-weight: bold;
  font-size: 1.2rem;
  padding-top: 2rem;
}
.informacion3 h4{
  font-size: 3rem;
}
.informacion3 .hr{
  background-color:var(--darkk-color);
  height: 1px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.informacion3 img{
  margin-top: 2rem;
}
.users img{
 max-width: 4rem;
 border-radius: 50%;
}
.informacion3:nth-last-child(1){
  padding-bottom: 5rem;
}


.slider-box{
  width: 100%;
  height: auto;
  margin: 1rem auto 0;
  overflow: hidden;
}
.slider-box ul{
  display: flex;
  padding: 0;
  width: 400%;
  animation: slide 20s infinite alternate ease-in-out;
}
.slider-box li{
  width: 100%;
  list-style: none;
}
.slider-box img{
  width: 100%;
  
}
@keyframes slide {
  0%{margin-left: 0;}
  20%{margin-left: 0;}

  25%{margin-left: -100%;}
  45%{margin-left: -100%;}
  
  50%{margin-left: -200%;}
  70%{margin-left: -200%;}

  75%{margin-left: -300%;}
  100%{margin-left: -300%;}
}



/* ////////////////SECTION3 MEDIA QUERY//////////// */ 

@media screen and (min-width:768px){
  .informacion3 img{
    height: 100%;
    width: 100%;
  }
}

@media screen and (min-width:1024px){
  .informacion3 img{
    height: 100%;
    width: 45%;
  }
  .informacion3{
    display: flex;
  }
  .opiniones{
    margin-top: 3rem;
  }
  .informacion3 .hr{
    width: 70%;
  }
  .users{
    display: flex;
    margin-top: 2rem;
  }
  .users p{
    margin-top: 2rem;
  }
}

/************ section4 ********* */
.section4{
  background-color: var(--light-blue-color);
  padding-top: 8rem;
  padding-bottom: 2rem;
}
.cards2{
  background-color: var(--light-blue-color);
}

.card{
  border-radius: 1rem 1rem 0 0;
  margin-bottom: 4rem;
  background-color: #fff;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  color: var(--darkk-color);
  transition: transform 1s ease 0s;
}
.card:hover{
  transform: translateY(-2rem);
}
.card h3{
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  padding-bottom: 1rem;
  
}
.hr{
  height: 1px;
  width: 60%;
  background-color: var(--darkk-color);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.card ul{
  list-style: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding-left: 0;
}
.card p{
  font-size: 1.1rem;
  margin: 0 3rem;
  padding-bottom: 0rem;
}
.card .precio{
  padding-top: 1rem;
  font-weight: bolder;
  font-size: 1.4rem;
}

.section4>img{
  display: none;
  height: 0;
}
/* ////////////////SECTION4 MEDIA QUERY//////////// */ 
@media screen and (min-width:768px){
.card{
  width: 50%;
  
}

.section4{
  position: relative;
  
  padding-top: 5rem;
}
.section4>img{
  display: block;
  width: 20%;
  height: auto;
  position: absolute;
}
.cac1{
  bottom: 0;
}
.cac2{
  bottom: 0;
  right: 0;
}
}
@media screen and (min-width:1024px){
.cards2{
  display: grid;
  grid-template-columns: repeat(3, 33.3333%);
}
.card{
  width: 20rem;
}
.card ul{
  text-align: left;
  padding-left: 2.5rem;
}
.section4{
  position: relative;
  padding-bottom: 0;
  padding-top: 8rem;
}
.section4>img{
  display: block;
  width: 12%;
  height: auto;
  position: absolute;
}
.cac1{
  bottom: 0;
}
.cac2{
  bottom: 0;
  right: 0;
}
}



/* ------------------- MEDIA  ----------------- */ 



.cont-cabecera{
  text-align: center;
  padding: 3rem 0;
}
.cont-cabecera p{
  padding-top: 2rem;
  font-size: 1.1rem;
  color: var(--darkk-color);
}
.m-cabecera img{
  display: none ;
}
.media1 h2{
  padding-top: 6rem;
  padding-bottom: 3rem;
  font-family: 'DM Serif Display', serif;
  font-weight: bolder;
  color: var(--darkk-color);
  font-size: 2.5rem;
  text-align: center;
}





.videos{
  
  padding-bottom: 2rem;
  top: 5rem;
}
.sinopsis h3{
  font-size: 1.6rem;
  font-weight: bolder;
  display: inline;
}
.sinopsis{
  font-size: 1.2rem;
}
.sinopsis .hr{
  margin-top: 1.5rem;
}
.cont-video{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 50vw;
}
.cont-video iframe{
  width: 100%;
  height: 100%;
}


/* ////////////// MEDIA  MEDIA QUERY /////////// */ 


@media screen and (min-width:768px){
  .informacion2 p{
    padding:0 5rem;
  }
  .cont-cabecera{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }
  .m-cabecera img{
    display: block ;
  }

  .m-cabecera{
    position: relative;
  }
  .cont-cabecera>*{
    margin-bottom: 2rem;
  }
  .m-cabecera>img{
    display: block;
    width: 15%;
    height: auto;
    position: absolute;
  }
  .cac1{
    bottom: 0;
  }
  .cac2{
    bottom: 0;
    right: 0;
  }
}
@media screen and (min-width:1024px){
  .m-cabecera{
    margin-top: 1rem;
  }
  .cont-cabecera{
    width: 57%;
  }
  .m-cabecera>img{
    display: block;
    max-width: 13%;
  }
  .cont-video{

    width: 70%;
    height: 40vw;
    background-color: #2c2c2c;
  }
  .sinopsis p{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }
  .informacion2 p{
    padding:0 2rem;
  }
  .videos{
    margin-bottom: 3rem;
  }
}

/* ------------------- ABOUT ME  ----------------- */ 
.aboutme{
  background-color: var(--gray-color);
  padding-top: 5rem;
}

.fondo{
  background-color: var(--light-blue-color);
  height: 15rem;
  position: relative;
  
}
.a-img{
  height: 15rem;
  width: 15rem;
  position: absolute;
  top: -2rem;
}
.cont-a-img{
  width: 15rem;
  height: 15rem;
}
.about1 h1{
  font-size: 2rem;
  color: var(--darkk-color);
  background-color: #ffffff00;
  font-family: 'DM Serif Display';
}

.about1 ul{
  padding: 1rem 1.5rem;
}
.about1 li{
  font-size: 1.4rem;
  margin: 1rem 0;
}
.about1 .texto{
  font-size: 1.2rem;
  margin-top: 3rem;
  margin: 1rem;
}
.about1 a{
  margin-top: 4rem;
  font-size: 1.1rem;
}
.texto{
  text-align: center;
}

.fondo>img{
display: none;
}
/* //////////////  ABOUT MEDIA QUERY /////////// */ 
@media screen and (min-width:768px){
.fondo-cont{
  margin-bottom: 2.5rem;
}
.contenido{
  padding: 0 3rem;
}
}
@media screen and (min-width:1024px){
  .fondo-cont{
    margin-bottom:0;
  }
  .contenido{
    padding: 0;
  }
  .fondo{
    position: relative;
  }
  .fondo>img{
    display: block;
    position: absolute;
    bottom: 0;
    width: 13rem;
    }
.aboutme{
  padding-top: 1rem;
}
.about1{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.fondo-cont{
  width: 30%;

  margin-right: auto;
  margin-left: 4rem;
}
.fondo{
  width: 30rem ;
  height: 90vh;
  margin-left: auto;
  margin-right: auto;
}
.a-img{
  left: 35%;
  top: 20% ;
  width: 25rem;
  height: auto;
}
.contenido{
  width: 30%;
  margin-left: auto;
  margin-right: 0;

}
.texto{
  text-align: left;
}

}
/* *********** Contact Form ********** */
.contact-form-error{
  color: #a6055d;
  font-size: 1rem;
  font-weight: bold;
}
.contact-form{
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
}
.contact-form>*{
  padding: .5rem;
  display: block;
  width: 100%;
}
.contact-form>label{
  font-size: 1.2rem;
  font-weight: bold;
  padding-top: 2rem;
}
.contact-form input,
.contact-form textarea{
  font-size: 1.2rem;
  font-family: var(--font);
}
.contact-form input{
  border: 0;
  border-bottom: .17rem solid var(--light-blue-color);
  padding-left: 0;
}
.contact-form textarea{
  border: none;
  border-bottom: .17rem solid var(--light-blue-color);
  resize: none;
  height: 5rem;
}

.contact-form input[type="submit"]{
margin-top: 1rem;
background-color: var(--light-blue-color);
padding-bottom: 0;
border-radius: .5rem;
padding: .8rem;


transition: all .5s ease-in-out;
}
.contact-form input[type="submit"]:hover{
  opacity: .75;
}
.contact-form *::placeholder{
  color: var(--darkk-color);
  padding-left: 1rem;
}

.contact-info{
  background-color: var(--light-blue-color);
  padding: 0 1.5rem;
  padding-bottom: 6rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  margin: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
  
}
.contact-info p{
  margin: 0 3rem;
  padding-top: 2rem;
}
.contact-info img{
position: absolute;
height: auto;
width: 10rem;
padding: 0;
margin: 0;
bottom: -11%;
}
.no-border {
  border-bottom: thin solid var(--form-ok-color);
  outline: none; /* También eliminamos el borde del focus */
  padding: 10px; /* Padding para mejor apariencia */
  width: 100%; /* Ajusta el ancho como necesites */
}

.contact-form-loader{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 5rem;
}
.contact-form [required]:valid {
  border-bottom: thin solid var(--form-ok-color);
}
.contact-form [required]:invalid {
  border-bottom: thin solid var(--light-blue-color);
}
.contact-form-error {
  border-bottom: thin solid var(--form-error-color);

  font-size: 80%;
  background-color: var(--form-error-color);
  color: #fff;
  transition: all 800ms ease;
}

.contact-form-error.is-active {
  display: block;
  animation: show-message 1s 1 normal 0s ease-out both;
}

.none {
  display: none;
}

.contact-form-response{
  position: absolute;
  top: 8vh;
  left: 25%;
  width: 50%;
  text-align: center;
  padding: .2rem;
  font-size: 1rem;
  color: #fff;
  border-radius: .3rem;
  z-index: 980;
}
.contact-form-response.is-active{
  display: block;
  animation: show-message2 1s 1 normal 0s ease-out both;
}
.json-ok{
  background-color: var(--form-ok-color);
}
.json-err{
  background-color: var(--form-error-color);
}

@keyframes show-message {
  0% {
    visibility: hidden;
    opacity: 0;
  }

  100% {
    visibility: visible;
    opacity: 1;
  }
  
}

@keyframes show-message2 {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);
  }

  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(2rem);
  }
  
}



/* //////////// Contact Form Media query //////// */

@media screen and (min-width:768px){
  .contact-container{
    height: 80vh;
    margin-bottom: 20vh;
  }

}
@media screen and (min-width:1024px){
  .contact-form-response{
    top: 10vh;
  }
.contact-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.contact-info{
  width: 35%;
  margin-bottom: 1rem;
}
.contact-form{
  margin-bottom: 5rem;
}
  .contact-form>label{

    padding-top: 3rem;
  }

}