:root{
    --color-1: #fff;
    --color-2: #222;
    --color-3: rgb(233, 165, 81);
    --color-4: rgb(5, 39, 84);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background: var(--color-4);
    color: var(--color-1);

}
header{
    width: 100%;
}
main{
    width: 100%;
    /* margin-top: 60px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1{
    color: var(--color-3);
    justify-self: center;
    align-self: center;
    text-align: center;
    font-family: "Amarante", serif;
    font-size: 2.5rem;
    padding: 20px;
    border-radius: 30px;
    text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000;
}
h3{
  font-family: "Amarante", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
  padding-bottom: 20px;
}

#logoNavBar{
  display: flex;
  gap: 10px;
  align-items: center;
}
#logoNavBarTEXTO{
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 0.8rem;
  text-align: left;

  transition: opacity 0.5s ease;
  opacity: 1;
}
#logoNavBarTEXTO.transparent{
  opacity: 0;
}

#logoNavBarTEXTO a{
  text-decoration: none;
  color: white;
  margin: 0;
}
#logoNavBarTEXTO p{
  margin: 0;
}
#navBar{
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: var(--color-4);
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    z-index: 1001;
    transition: background-color 0.5s ease
  
}
#navBar img{
    display: block;
}
#navBar.transparent{
  background-color: rgba(5, 39, 84, 0);
}

#menu-desplegable{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: 10px;
    position: fixed;
    top: 0px;
    right: -300px;
    width: 300px;
    background-color: var(--color-4);
    transition: right 0.4s ease;
    z-index: 1000;
    border-radius: 0 0 0 30px;
}
#menu-desplegable.visible{
    right: 0;
}
#menu-desplegable ul{
    text-align: right;
    padding-right: 15px;
    transition: transform 0.2s ease-in-out;
}
#menu-desplegable ul:hover{
    transform: scale(1.1);
    transform: translateX(-20px);
    font-weight: bold;
}

#menu-burguer{
    background-color: rgba(5, 39, 84, 0.7);
    padding: 8px;
    margin: 5px 0;
    border-radius: 5px;
  }
  
  .burger {
      position: relative;
      width: 40px;
      height: 30px;
      background: transparent;
      cursor: pointer;
      display: block;
    }
    
    .burger input {
      display: none;
    }
    
    .burger span {
      display: block;
      position: absolute;
      height: 4px;
      width: 100%;
      background: var(--color-3);
      border-radius: 9px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: .25s ease-in-out;
    }
    
    .burger span:nth-of-type(1) {
      top: 0px;
      transform-origin: left center;
    }
    
    .burger span:nth-of-type(2) {
      top: 50%;
      transform: translateY(-50%);
      transform-origin: left center;
    }
    
    .burger span:nth-of-type(3) {
      top: 100%;
      transform-origin: left center;
      transform: translateY(-100%);
    }
    
    .burger input:checked ~ span:nth-of-type(1) {
      transform: rotate(45deg);
      top: 0px;
      left: 5px;
    }
    
    .burger input:checked ~ span:nth-of-type(2) {
      width: 0%;
      opacity: 0;
    }
    
    .burger input:checked ~ span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
      left: 5px;
    }

footer{
    margin-top: 50px;
    width: 100%;
    background-color: black;
    color: gray;
    padding: 10px;
    text-align: end;
    padding: 50px 20px 50px 0;
}

/* ------- CLASES -------
   ------- CLASES ------- */

.verPC{
  display: none;
}

.fondo1{
    background-image: url(./FOTOS-INDEX/libro-azul-english.webp);
    background-size: cover;
    background-position: center;
    aspect-ratio: 1244 / 829 ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}
.fondo2{
    background-image: url(./FOTOS-INDEX/nina-whiteboard.webp);
    background-size: cover;
    background-position: center;
    aspect-ratio: 1244 / 829 ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative

}
.fondo3{
    background-image: url(./FOTOS-INDEX/nina-laptop.webp);
    background-size: cover;
    background-position: center;
    aspect-ratio: 1244 / 829 ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative

}
.fotoPpalContacto{
    width: 100%;
    background-image: url(./FOTOS-INDEX/laptop-sobre-mesa.webp);
    background-size: cover;
    background-position: 25%;
    aspect-ratio: 400 / 600 ;
    display: flex;
    justify-content: center;
    align-items: center ;
    position: relative

}
.fotoPpalCurricula{
    width: 100%;
    background-image: url(./FOTOS-INDEX/img-whiteboard-iStock-1297624591.webp);
    background-size: cover;
    background-position: 75%;
    aspect-ratio: 400 / 600 ;
    display: flex;
    justify-content: center;
    align-items: center ;
    position: relative

}
.fotoPpalAranceles{
    width: 100%;
    background-image: url(./FOTOS-INDEX/mujer-laptop.webp);
    background-size: cover;
    background-position: 25%;
    aspect-ratio: 400 / 600 ;
    display: flex;
    justify-content: center;
    align-items: center ;
    position: relative

}

.bloqueTexto {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-radius: 50px 0 50px 0;
  transition: transform 0.5s ease-in-out;
}

/* Estilo base para los <p> */
.bloqueTexto p {
  position: absolute;
  margin: 0;
  transition: opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
  padding: 10px 20px;
  text-align: center;
  border-radius: 15px;
  margin: 10px;
}

/* Texto visible por defecto */
.bloqueTexto .TextoInicial {
  color: white;
  font-size: 1.5rem;
  text-shadow:
    1px 1px 0 black,
    -1px 1px 0 black,
    1px -1px 0 black,
    -1px -1px 0 black;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Texto oculto con fondo blanco */
.TextoOculto {
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  font-size: 1rem;
}
.bloqueTexto{
  margin: 10px;
}

/* para Accordion bootstrap */
.accordion-button:not(.collapsed) {
  background-color: #f8f9fa; /* Fondo claro cuando está abierto */
}

.accordion-button.collapsed {
  background-color: transparent; /* Sin fondo al estar cerrado */
}

/* TARJETAS ARANCELES  */
#precios{
  display: flex;
  justify-content: center;
}
#precios img{
  width: 90%;
  padding-top: 20px;
}

/* -------- IDS -------
   -------- IDS ------- */

#imgInicial{
    width: 100%;
    height: 700px;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(20, 1fr);
    background-image: url(./FOTOS-INDEX/clase-grupal-ingles.webp);
    background-size: cover;
    background-position: 30% center;
    background-repeat: no-repeat;
    
}
#dialogoInicial{
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    grid-column: 3 / 15;
    grid-row: 6 / 16;
    justify-self: center;
    align-self: center;
    text-align: center;
    margin: 0;
    padding: 10px;
    border-radius: 30px;
}

/* BOTON INSCRIBETE AHORA */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
#inscribeteBtn{
    display: flex;
    justify-content: center;
    width: 50%;
    height: 60px;
    border-radius: 30px;
    grid-row: 18 / 20;
    grid-column: 4 / 14;
    width: 100%;
    font-size: 1.5rem;
    background-color: var(--color-4);
    color: white;
    animation: pulse 2s ease-in-out infinite;
}
#inscribeteBtn p{
    justify-self: center;
    align-self: center;
    margin: 0;
}
#inscribeteBtn p:hover{
  color: var(--color-3);
}
#porQue{
  width: 90%;
  height: 80px;
  background-color: var(--color-3);
  border-radius: 40px 0 0 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.fade-loop {
  opacity: 1;
  animation: fadeLoop 3s ease-in-out infinite;
}

@keyframes fadeLoop {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}


#porQue p{
  margin: 0;
  font-size: 1.3rem;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}

#curPer{
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#separadorVanesa{
  width: 90%;
  height: 80px;
  background-color: var(--color-3);
  border-radius: 40px 0 0 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}
#separadorVanesa p{
  margin: 0;
  font-size: 1.3rem;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}


#vanesa{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#vanesa img{
  width: 95%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
#vanesa p{
  width: 95%;
  padding: 15px 0 15px 0;
}

#contContenedor{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#contacto{
  width: 95%;
  text-align: center;
  background-color:  rgb(228, 228, 228);
  color: black;
  padding: 50px;
  
  margin-top: 50px;
  border-radius: 30px;
}
#logoRedes{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 20px;
}
#logoRedes img{
  width: 60px;
  height: auto;
  transition: transform 0.3s ease;
}
#logoRedes img:hover{
  transform: scale(1.2);
}
#acordCurricula{
  padding-top: 30px;
  width: 95%;
}
#curricAprendeDeCasa{
  width: 95%;
  padding-top: 20px;
}
#curricAprendeDeCasa img{
  width: 100%;
  height: auto;
  border-radius: 20px;
}
#curricAprendeDeCasa button{
  display: block;
  margin: 0 auto; /* Esto centra horizontalmente el botón */
  border-radius: 30px;
  height: 60px;
  width: 200px;
  font-weight: bolder;
  margin-top: 50px;

}
#secTitulo{
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  padding: 0;
  width: 80%;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#secTitulo h3{
  padding: 0;
  margin: 20px;
}

/* PARA HOVER EN CURPER */

.bloqueTexto::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 1.5s ease;
    transform: scale(1);
  }

.bloqueTexto.zoom-bg {
  transform: scale(1.05);
}
/* Asegurarse de que el texto esté por encima del background pseudo-elemento */
.bloqueTexto > * {
  position: relative;
  z-index: 1;
}

/* TESTIMONIOS */

#carouselTestimonios{
  width: 95%;
  height: 450px;
}

.testimonio{
  width: 100%;
  height: 450px;
  background-color: #fff;
  color: black;
  padding: 15px 40px 30px 40px;
  border-radius: 15px;
  margin-top: 15px;
}
.estudiante{
  display: flex;
  width: 95%;
  justify-content: flex-start;
  align-items: center;
}
.estudiante img{
  width: 70px;
  height: auto;
  border-radius: 50%;
}
.estudiante p{
  align-self: center;
  margin: 0;
  margin-left: 10px;
}
.oracion{
  display: block;
  text-indent: 1em;
}
.carousel-item{
  padding: 5px;
}
.carousel-indicators{
  margin-bottom: 0;
}

/* -------PANTALLAS GRANDES---------
   -------PANTALLAS GRANDES--------- */

@media (min-width: 992px) {
    header{
        width: 100%;
    }

    h1{
        color: var(--color-3);
        justify-self: center;
        align-self: center;
        text-align: center;
        font-size: 4rem;
        padding: 20px;
        border-radius: 30px;
        text-shadow:
        2px 2px 0 #000,
        -2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000;
    }
    h3{
      font-family: "Amarante", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 4rem;
      padding-bottom: 20px;
    }



    /* ------- CLASES -------
    ------- CLASES ------- */

  .verMovil{
    display: none;
  }
  .verPC{
    display: block;
  }
    
  .fondo1, .fondo2, .fondo3 {
    position: relative;
    overflow: hidden;
  }
  .fondo1::before,
  .fondo2::before,
  .fondo3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    transform: scale(1);
  }
  .fondo1::before {
    background-image: url('./FOTOS-INDEX/libro-azul-english.webp');
  }

  .fondo2::before {
    background-image: url('./FOTOS-INDEX/nina-whiteboard.webp');
  }

  .fondo3::before {
    background-image: url('./FOTOS-INDEX/mujer-laptop.webp');
  }

  .TextoInicial,
  .TextoOculto {
    position: relative;
    z-index: 1;
  }

  .fondo1:hover::before,
  .fondo2:hover::before,
  .fondo3:hover::before {
    transform: scale(1.1);
  }
  .bloqueTexto:has(.TextoInicial:hover)::before {
    transform: scale(1.1);
  }
  .fotoPpalContacto{
    background-position: center;
    aspect-ratio: 1244 / 400 ;
  }
  .fotoPpalCurricula{
    background-position: center 25%;
    aspect-ratio: 1244 / 400 ;
  }
  .fotoPpalAranceles{
    background-position: center 50%;
    aspect-ratio: 1244 / 400 ;
  }


    /* -------- IDS -------
    -------- IDS ------- */
    
    #imgInicial{
        width: 100%;
        height: 800px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
        background-image: url(./FOTOS-INDEX/clase-grupal-ingles.webp);
        background-size: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        
    }
    #dialogoInicial{
      background-color: rgba(255, 255, 255, 0.8);
      color: black;
      grid-column: 4 / 10;
      grid-row: 5 / 7;
      justify-self: center;
      align-self: center;
      text-align: center;
      margin: 0;
      padding: 10px;
      border-radius: 30px;
    }
    #inscribeteBtn{
      width: 50%;
      height: 60px;
      border-radius: 30px;
      grid-row: 8 / 10;
      grid-column: 5 / 9;
      justify-self: center;
      align-self: center;
      width: 100%;
      font-size: 1.5rem;
      transition: transform 0.3s ease; 
    }

    #inscribeteBtn:hover {
      transform: scale(1.2);
      color: var(--color-3);
    }
    #curPer {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 20px;
    }

    .bloqueTexto {
      flex: 1 1 0;
      min-width: 0;
      max-width: 100%;
    }
    #porQue p{
      margin: 0;
      font-size: 2rem;
      font-weight: bolder;
      color: rgb(255, 255, 255);
      text-align: center;
      transition: transform 0.3s ease;
      cursor: pointer;
    }
    #porQue p:hover{
      transform: scale(1.2);
    }
    #separadorVanesa p{
      margin: 0;
      font-size: 2rem;
      font-weight: bolder;
      color: rgb(255, 255, 255);
      text-align: center;
    }

    #vanesa{
      display: grid;
      grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
      align-items: center;
      padding: 20px;
      margin: 10px;
      gap: 20px; /* Espacio entre columnas */
    }
    #vanesa img{
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 50px;
    }
    #vanesa p{
      text-align: left;
      padding: 25px;
    }


    /* CONTACTO ---- CONTACTO */
      #contacto{
        width: 50%;
        text-align: center;
        background-color: rgb(228, 228, 228);
        color: black;
        padding: 50px;
        margin-top: 50px;
        border-radius: 30px;
      }
      #logoRedes{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 20px;
      }
      #logoRedes img{
        width: 80px;
        height: auto;
        transition: transform 0.3s ease;
      }
      #logoRedes img:hover{
        transform: scale(1.2);
      }
      #acordCurricula{
        padding-top: 30px;
        width: 80%;
      }
      #curricAprendeDeCasa{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        align-items: start;
        padding: 20px;
        margin: 10px;
        gap: 20px;
        width: 80%;
        padding-top: 20px;
      }
      #curricAprendeDeCasa img{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        align-self: start;
        width: 100%;
        height: auto;
        border-radius: 20px;
      }
      #curricAprendeDeCasa p{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
      }
      #curricAprendeDeCasa button{
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        border-radius: 30px;
        height: 60px;
        width: 200px;
        font-weight: bolder;
        margin-top: 50px;
        transition: transform 0.3s ease;
      }
      #curricAprendeDeCasa button:hover{
        transform: scale(1.2);
      }

      #secTitulo{
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
        padding: 0;
        width: 50%;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #secTitulo h3{
        padding: 0;
        margin: 20px;
      }
      .bloqueTexto.zoom-bg {
        transform: none;
      }

      .swiffy-slider{
        width: 90%;
      }

      #precios{
        width: 100%;
        display: flex;
        justify-content: center;
      }
      #precios img{
        width: 40%;
        padding-top: 20px;
      }







}