* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}

@font-face {
  font-family: "DroidSerif";
  src: url("/assets/fonts/droid-serif/DroidSerif-Italic.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "headingnow_italic";
  src: url("/assets/fonts/headingnow/HeadingNowTrial-64Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "cocogothic";
  src: url("/assets/fonts/coco_gothic/CocoGothic_trial.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "opensans_bold";
  src: url("/assets/fonts/open_sans/OpenSans-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "CooperLtBT-Regular";
  src: url("/fonts/Cooper_BT_Font_Family/CooperLtBT-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "CooperLtBT-Bold";
  src: url("/fonts/Cooper_BT_Font_Family/CooperLtBT-Bold.ttf")
    format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "CooperLtBT-Italic";
  src: url("/fonts/Cooper_BT_Font_Family/CooperLtBT-Italic.ttf")
    format("truetype");
  font-weight: normal;
  font-style: italic;
}

header {
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.conteinerlogo {
  display: inline-flex;
  align-items: center;
  width: 30%;
}
.conteinerlogo h1 {
  font-family: "CooperLtBT-Regular";
  color: #001739;
}

.conteinerlogo img {
  width: 100px;
  height: 100px;
  margin-right: 5%;
}

header ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 70%;
  justify-content: flex-end;
}

header ul li {
  margin: 0 10px;
}

header ul li a {
  font-family: "opensans_bold";
  text-decoration: none;
  color: #001739;
}

.conteninerlandings {
  position: relative; /* Importante para contener los elementos con position: absolute */
  width: 100%;
  height: 500px;
  overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
}

.landing1 {
  position: absolute; /* Añadido para definir un contexto de apilamiento */
  overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  height: 500px;
  width: 100%;
  opacity: 0; /* Oculto por defecto */
  display: inline-flex;
  z-index: 0; /* Valor más bajo, quedará detrás de landing2 */
}
.landing1.active {
  opacity: 1; /* Solo la landing activa será visible */
  z-index: 1; /* Se coloca encima de las demás */
}
.landing1::before {
  content: ""; /* Necesario para que el pseudo-elemento sea visible */
  position: absolute; /* Posicionarlo dentro de su contenedor */
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-image: url("/assets/img/fondo1grande.jpg");
  opacity: 0.3;
  background-size: cover; /* Asegura que la imagen ocupe todo el espacio del contenedor */
  background-position: center; /* Centrar la imagen */
  background-repeat: no-repeat; /* Evitar que la imagen se repita */
  z-index: -1; /* Colocar la imagen detrás del contenido de .landing1 */
}

.landing1 section {
  width: 60%;
  padding: 10%;
}

.landing1 h1 {
  font-size: 1.8rem;
  font-family: "cocogothic";
  color: #001739;
}

.landing1 h4 {
  font-size: 2rem;
  font-family: "opensans_bold";
  color: #001739;
}

.landing1 img {
  width: 500px;
  object-fit: cover; /* Ajustar la imagen para que no se deforme */
}

.landing2 {
  position: absolute; /* Añadido para definir un contexto de apilamiento */
  overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
  height: 500px;
  width: 100%;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  opacity: 0; /* Oculto por defecto */
  z-index: 0;
}
.landing2.active {
  opacity: 1; /* Solo la landing activa será visible */

  z-index: 1; /* Se coloca encima de las demás */
}

.landing3 {
  display: inline-flex;
  position: absolute; /* Añadido para definir un contexto de apilamiento */
  overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
  height: 500px;
  width: 100%;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  opacity: 0; /* Oculto por defecto */
  z-index: 0;
}

.landing3 img {
  margin-left: 10%;
}

.landing3 h4 {
  font-size: 2rem;
  text-align: center;
  margin-top: 8%;
  margin-left: -25%;
  font-family: "headingnow_italic";
  font-style: italic;
  font-weight: bold;
  color: #001739;

  margin: 10% 0% 0% 20%;
}
.landing3.active {
  opacity: 1; /* Solo la landing activa será visible */

  z-index: 1; /* Se coloca encima de las demás */
}
.landing2 h1 {
  text-align: center;
  font-family: "opensans_bold";
  margin-top: 1%;
  font-size: 2rem;
  color: #001739;
}

.landing2 section {
  width: 100%;

  display: inline-flex;
}
.landing2 img {
  width: 700px;
  margin-left: 20%;
}
.landing2 h4 {
  font-size: 1.3rem;
  text-align: center;
  margin-top: 8%;
  margin-left: -25%;
  font-family: "headingnow_italic";
  font-style: italic;
  font-weight: bold;
  color: #001739;
}

.formcontacto {
  padding: 5%;

  width: 100%;
  height: 700px;
}
.formcontacto h1 {
  text-align: center;
  font-family: "opensans_bold";
  color: #001739;
}

.conteinercontactos {
  width: 100%;

  height: 400px;
  padding: 5%;
  display: inline-flex;
}

.conteiner-ws {
  padding: 2%;
}
.conteineractionws {
  width: 220px;
  font-family: "headingnow_italic";
  font-weight: bold;
  background-color: #f5dde5;
  color: #001739;
  padding: 2%;
  display: inline-flex;
  margin-top: 5%;
  margin-left: 40%;
  margin-bottom: 5%;
}
.conteineractionws img {
  margin-right: 3%;
  width: 20x;
  height: 20px;
}
.contacto-imputs {
  margin-left: 15%;

  display: block;
  height: 250px;
  width: 40%;
}
.contacto-imputs h2 {
  font-family: "headingnow_italic";
  text-align: center;
  margin-bottom: 5%;
  color: #001739;
}
.formulariocontacto {
  display: block;
  height: 250px;
  text-align: center;
}
.formulariocontacto input,
textarea {
  background-color: #f5dde5;
  width: 200px;
  height: 40px;
  border: none;
  text-align: center; /* Centra el texto dentro del input */
  font-weight: bold;
}
.formulariocontacto button {
  border: none;
  width: 100px;
  height: 30px;
  font-family: "headingnow_italic";
  font-weight: bold;
  background-color: #f5dde5;
}
.formcontacto label {
  font-family: "headingnow_italic";
  font-weight: bold;
  color: #001739;
}
footer {
  width: 100%;
  height: 200px;
  display: inline-flex;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}

.logofootercont {
  width: 40%;
}
.logofootercont img {
  margin: 6% 10% 0% 40%;
  width: 100px;
  height: 100px;
}
.logofootercont h2 {
  font-family: "cocogothic";
  font-weight: bold;
  color: #001739;
  text-align: center;
}
.conteinerredesfooter {
  padding: 2%;
}
.conteinerredesfooter li {
  margin-top: 3%;
  list-style: none;
}
.conteinerredesfooter h2 {
  text-align: center;
  font-size: 1.3rem;
  font-family: "headingnow_italic";
  font-weight: bold;
  color: #001739;
  margin-right: 10%;
  margin-left: -10%;
}
.conteinerredesfooter ul {
  display: inline-flex;
  width: 70%;
  height: 40%;
  margin-left: 10%;
}
.conteinerredesfooter li {
  margin-left: 10%;
  margin-bottom: 5%;
}

.conteinerquienesomos {
  height: 600px;

  display: inline-flex;
}

.conteinerquienesomos .imgquienessomos {
  margin-right: 10%;
}
.infoquienesomos h1 {
  font-family: "headingnow_italic";
  color: #001739;
  margin: 1% 10% 1% 10%;
  text-align: justify;
}
.infoquienesomos p {
  margin: 1% 20% 1% 10%;
  font-family: "opensans_bold";
  text-align: justify;
}
.conteinercurso {
  display: inline-flex;
}
.infoprograma {
  width: 800px;
  font-family: "opensans_bold";
  font-weight: bold;
  color: #001739;

  margin: 1% 5% 1% 5%;
  text-align: justify;
}
.imagenprograma {
  margin-top: 10%;
  height: 600px;
}

.titulotestimonios {
  font-family: "opensans_bold";
  font-weight: bold;
  color: #001739;
  padding: 3%;
}

.ctnvideos {
  width: 100%;
  height: 400px;

  display: inline-flex;
}
.ctnvideos video {
  width: 25%;
  height: 400px;
}
.ctnvideos .videos3x3 {
  width: 34%;
  height: 400px;
}
.ctnvideosgrandes {
  width: 100%;
  height: 400px;

  display: inline-flex;
}
.ctnvideosgrandes video {
  width: 50%;
  height: 400px;
}
.videofinal {
  margin-left: 30%;
  width: 40%;
}

.conteiner-sobrecursoprincipal{
  width: 100%;
  height: 500px;
  display: inline-flex;
  

}

.imagensobrecurso{
 
  padding: 10% 10% 10% 10%;
  
}
.imagensobrecurso img{
  width: 100%;
}
.conteiner-sobrecursoprincipal{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );

}
.conteinerinfocurso{
  padding: 3% 3% 3% 3%;
}
.conteiner-sobrecursoprincipal h1{
  font-family: "opensans_bold";
  font-weight: bold;
  color: #012350;
}
.conteiner-sobrecursoprincipal .textonormal{
  font-family: "opensans_bold";
  color: #545454;
}
.conteinertextoazul{
  background-color: #2e3190;
  padding: 3% 2% 1% 2%;
  text-align: justify;
  border-radius: 25px;
}
.textoconfondoazul{

  font-family: "opensans_bold";
  color:white;
 
  

}

.conteiner-sobrecursosecundario{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  
  padding: 2%;
}
.conteiner-sobrecursosecundario h2{
  text-align: center;
  padding: 1%;
  border: solid #001739;
  margin: 0% 5% 0% 5%;
}

.container-publicidad{
  width: 100%;

}
.conteinerpublicidad{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  width: 100%;
  display: inline-flex;
}
.conteinerinfopublicidad{

  width: 70%;
  padding: 10% 5% 5% 5%;
}
.conteinerinfopublicidad h1{
  font-family: "opensans_bold";
  font-weight: bold;
  margin: 2% 0% 2% 0%;
}
.conteinerinfopublicidad p{
  font-family: "opensans_bold";
  font-weight: bold;
  margin: 2% 0% 2% 0%;
  font-size: 1.2rem;
}
.conteinervideopublicidad{
  width: 30%;
  padding: 2% 5% 5% 5%;
}
.conteinervideopublicidad div{
  background-color: #004aad;
  padding: 10% 10% 10% 10%;
  text-align: center;
  border-radius: 25px;
  color: white;
 
}

.videoinfosobre{
  width: 100%;
}
.reservatucupo{
  padding: 2% 2% 2% 2%;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  display: flex;
  flex-direction: column; /* Para alinear el h4 y el botón en columna */
  justify-content: center; /* Centra verticalmente los elementos */
  align-items: center; /* Centra horizontalmente los elementos */
  /* Para centrarlo verticalmente en toda la pantalla */
  text-align: center; /* Para centrar el texto dentro del h4 */
}
.reservatucupo h4{
  font-size: 1.3rem;
  font-family: "opensans_bold";
  color: #012350;
}
.reservatucupo button{
  border: none;
  color: white;
  padding: 1.2% 1.2% 1.2% 1.2%;
  font-size: 1.5rem;
  background-color: #2e3190;
  font-family: "opensans_bold";
  border-radius: 30px;
}
.reservatucupo button:hover{
  background-color: #696bbb;
}

.conteiner-horarios{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  
  display: inline-flex;
  width: 100%;
}
.conteinerimghora{
  
  padding: 2% 2% 2% 10%;
  text-align: center;
}
.conteinerimghora img{
  opacity: 0.9;
}
.conteinerimghora h1{
  margin: 1% 0% 2% 0%;
  font-family: "opensans_bold";
  font-weight: bold;
  color: red;
 
}
.conteinerimghora button{
  border: none;
  color: white;
  padding: 1.2% 1.2% 1.2% 1.2%;
  font-size: 2rem;
  background-color: #2e3190;
  font-family: "opensans_bold";
  border-radius: 30px;
}
.conteinerinfohora{
  padding: 5% 5% 5% 5%;
}
.conteinerinfohora h1{
  margin: 1% 0% 2% 0%;
  font-family: "opensans_bold";
  font-weight: bold;
  color: red;
}
.conteinerinfohora p{
  font-family: "opensans_bold";
  font-weight: bold;
  color: #545454;
  font-size: 1.8rem;
  margin: 1% 0% 2% 10%;
}


.conteinerquetendrasprincipal{
  width: 100%;
  display: inline-flex;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}
.conteinerimgquetendras{

  width: 40%;
  padding: 2% 2% 0% 2%;
}
.conteinerimgquetendras img{
  transform: rotateY(0.5turn);
  opacity: 0.7;
}
.infoquetendras{
  padding: 5%;
  
  width: 60%;
}
.infoquetendras h1{
  font-family: "opensans_bold";
  font-weight: bold;
  color: #001739;
  margin: 2% 0% 2% 0%;
  text-shadow: 3px 1px 4px #061a38;
}
.infoquetendras p{
  margin: 10% 0% 2% 0%;
  font-size: 1.2rem;
  font-family: "opensans_bold";
  font-weight: bold;
  color: #012350;
}

.estandodentrodelcursocontainer{
  width: 100%;
  
  display: inline-block;
  text-align: center;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}
.estandodentrodelcursocontainer h1{
  font-family: "opensans_bold";
  color: red;
  margin: 2% 0% 2% 0%;
}
.conteinerbonouno{
  background-color: #cb6ce6;
  border-radius: 25px;
  
  display: inline-flex;
  width: 60%;  
  padding: 3%;
  margin: 2% 2% 2% -25%;
}
.conteinerbonouno img{
width: 20%;
}
.infobonouno{
  text-align: start;
  margin: 0% 5% 0% 10%;
}
.infobonouno p{
  font-family: "opensans_bold";
  color: white;
}
.infobonouno h1{
  font-family: "opensans_bold";
  color: white;

}
.conteinerbonodos{
  background-color: #cb6ce6;
  border-radius: 25px;
 
  display: inline-block;
  width: 60%;  
  padding: 3%;
  margin-left: 25%;
  margin-top: 8%;
  margin-bottom: 8%;
  text-align: start;
}
.infobonodos{
  display: inline-flex;

}
.infobonodos h1{
  font-family: "opensans_bold";
  color: white;
}
.infobonodos p{
  font-family: "opensans_bold";
  color: white;
}
.infobonodos img{
  width: 15%;

  
    border-radius: 20px;
  margin: -10% 2% 2% 10%;
}
.conteinerbonocuatro{
  background-color: #cb6ce6;
  border-radius: 25px;
 
  display: inline-flex;
  width: 60%;  
  padding: 3%;
  margin-left: 25%;
  margin-top: 8%;
  margin-bottom: 8%;
  text-align: start;
}


.infobonocuatro{
  text-align: start;
  margin: 0% 5% 0% 10%;
}
.infobonocuatro p{
  font-family: "opensans_bold";
  color: white;
}
.infobonocuatro h1{
  font-family: "opensans_bold";
  color: white;

}
.conteinerinversion{
  width: 100%;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  display: inline-flex ;
}

.infoinversion{
  width: 70%;
  
  padding:5%;
}
.infoinversion h1{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 3rem;
  color: #ff5757;
}
.infoinversion p{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 1.5rem;
  color: #2e3190;
}
.segundocontainer{

  padding: 10%;
  text-align: center;
  background-color: #dfc3dc;
  border-radius: 25px;
  width: 80%;
  margin: 25% 0% 10% 5%;
}
.montoinversion{
  display: inline-block;
  width: 30%;
 
}
.logotipoinversion{
  display: inline-flex;
}
.logotipoinversion img{
  width: 30%;
}
.conteinerlogotext {
margin: 3% 2% 2% 5%;
text-align: start;
}
.conteinerlogotext h6{
  font-family: "opensans_bold";
  font-weight:bold;
  
  font-size: 1.3rem;
  color: #2e3190;
}
.conteinerlogotext p{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 1.3rem;
  color: #ff5757;
}

.preciosconteiner h2{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 2rem;
  color: #ff5757;
}
.preciosconteiner h3{
  font-family: "opensans_bold";
  font-weight:bold;
  
  font-size: 1.3rem;
  color: #2e3190;
}
.montoinversion button{
  border: none;
  color: white;
  padding: 1.2% 1.2% 1.2% 1.2%;
  font-size: 1.3rem;
  background-color: #2e3190;
  font-family: "opensans_bold";
  border-radius: 30px;
}

.conteinertienesalgunaduda{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  text-align: center;

}
.conteinertienesalgunaduda h2{
  font-family: "opensans_bold";
  color: #5b5b5b;
}
.conteinertienesalgunaduda h3{
  font-family: "opensans_bold";
  color: #5b5b5b;
}
.botoncomunicarse{
  margin: 2% 0% 2% 0%;
  width: 20%;
  height: 40px;
  display: inline-flex;
  color: white;
  background-color:#00bf63 ;
  border-radius: 25px;
  border: none;
}
.botoncomunicarse img{
  margin: 1% 2% 1% 5%;
  width: 15%;
  height: 90%;
}
.botoncomunicarse p{
  font-family: "opensans_bold";
  font-weight:bold;
  margin: 3% 2% 1% 1%;
  font-size: 0.9rem;
}

.quiendictaelcursosobreelcurso{
  width: 100%;
  display: inline-flex;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}
.conteinerimagenquiendictasobreelcurso{
  
  width: 40%;
}
.quiendictainfocobrecurso{
  width: 60%;
  padding: 5%;
}

.quiendictaelcursosobreelcurso h1{
font-family: 'DroidSerif';
text-align: center;
font-size: 3rem;
font-style: italic;
}
.quiendictaelcursosobreelcurso p{
  text-align: justify;
  font-family: "opensans_bold";
  font-weight:bold;
  color:#5b5b5b;
  font-size: 1.2rem;
 
  }
  
  .imagenbonodos{
    border-radius: 20px;
    width: 15%;
  }
  .libritobono{
    width: 25%;
  }

/* Styles for mobile devices (below 768px width) */
@media screen and (max-width: 768px) {
  header {
    display: inline-block;
    width: 100%;
    position: relative; /* Asegura que el contenido se posicione correctamente */
  }
  .conteinerlogo h1 {
    font-size: 1rem;

    justify-content: flex-start; /* Cambiado a flex-start para pegar los elementos al inicio */
  }

  header a {
    font-size: 1rem;
  }
  header ul {
    padding: 10px;
    width: 100%;
    display: inline-block;
    margin: 5% 0% 1% 0%;
  }
  .conteinerlogo img {
    margin: 0% 0% 2% 10%;
    width: 60px;
    height: 60px;
  }

  header ul {
    flex-direction: column;
    align-items: center;
  }

  .landing1 {
    position: absolute; /* Añadido para definir un contexto de apilamiento */
    overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
    background: rgb(237, 134, 237);
    background: linear-gradient(
      90deg,
      rgba(237, 134, 237) 0%,
      rgba(255, 255, 255, 1) 46%,
      rgba(236, 236, 236, 1) 100%,
      rgba(236, 236, 236, 1) 100%
    );
    height: 500px;
    width: 100%;
    opacity: 0; /* Oculto por defecto */
    display: inline-block;
    z-index: 0; /* Valor más bajo, quedará detrás de landing2 */
  }
  .landing1.active {
    opacity: 1; /* Solo la landing activa será visible */
    z-index: 1; /* Se coloca encima de las demás */
  }
  .landing1::before {
    content: ""; /* Necesario para que el pseudo-elemento sea visible */
    position: absolute; /* Posicionarlo dentro de su contenedor */
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    background-image: url("/assets/img/fondo1grande.jpg");
    opacity: 0.3;
    background-size: cover; /* Asegura que la imagen ocupe todo el espacio del contenedor */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */
    z-index: -1; /* Colocar la imagen detrás del contenido de .landing1 */
  }

  .landing1 section {
    width: 100%;
    padding: 10%;
  }

  .landing1 h1 {
    font-size: 1.5rem;
    font-family: "cocogothic";
    color: #001739;
  }

  .landing1 h4 {
    font-size: 1.5rem;
    font-family: "opensans_bold";
    color: #001739;
  }

  .landing1 img {
    width: 100%;
    object-fit: cover; /* Ajustar la imagen para que no se deforme */
    margin: -30% 0% 0% 0%;
  }

  .landing2 {
    position: absolute; /* Añadido para definir un contexto de apilamiento */
    overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
    height: 500px;
    width: 100%;
    background: rgb(237, 134, 237);
    background: linear-gradient(
      90deg,
      rgba(237, 134, 237) 0%,
      rgba(255, 255, 255, 1) 46%,
      rgba(236, 236, 236, 1) 100%,
      rgba(236, 236, 236, 1) 100%
    );
    display: inline-block;
    opacity: 0; /* Oculto por defecto */
    z-index: 0;
  }
  .landing2.active {
    opacity: 1; /* Solo la landing activa será visible */

    z-index: 1; /* Se coloca encima de las demás */
  }

  .landing3 {
    display: inline-flex;
    position: absolute; /* Añadido para definir un contexto de apilamiento */
    overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
    height: 500px;
    width: 100%;
    background: rgb(237, 134, 237);
    background: linear-gradient(
      90deg,
      rgba(237, 134, 237) 0%,
      rgba(255, 255, 255, 1) 46%,
      rgba(236, 236, 236, 1) 100%,
      rgba(236, 236, 236, 1) 100%
    );
    opacity: 0; /* Oculto por defecto */
    z-index: 0;

    padding-top: 0;
  }

  .landing3 img {
    margin: 0% 0% 0% -10%;
    width: 60%;
    height: 100%;
  }

  .landing3 h4 {
    font-size: 1rem;
    text-align: center;
    font-family: "headingnow_italic";
    font-style: italic;
    font-weight: bold;
    color: #001739;
    margin: 40% 0% 0% -10%;
  }
  .landing3.active {
    opacity: 1; /* Solo la landing activa será visible */

    z-index: 1; /* Se coloca encima de las demás */
  }
  .landing2 h1 {
    text-align: center;
    font-family: "opensans_bold";
    margin-top: 16%;
    font-size: 2rem;
    color: #001739;
  }

  .landing2 section {
    width: 100%;
    display: inline-flex;
    margin: 15% 0% 0% 0%;
  }
  .landing2 img {
    width: 100%;
    margin: 0% 0% 0% -10%;
  }
  .landing2 h4 {
    font-size: 1rem;
    text-align: center;
    margin-top: 8%;
    margin-left: -50%;
    font-family: "headingnow_italic";
    font-style: italic;
    font-weight: bold;
    color: #001739;
  }

  .formcontacto {
    padding: 5%;

    width: 100%;
    height: 700px;
  }
  .formcontacto h1 {
    text-align: center;
    font-family: "opensans_bold";
    color: #001739;
    font-size: 1.2rem;
  }

  .conteinercontactos {
    width: 100%;
    height: 600px;
    padding: 5%;
    display: inline-block;
  }

  .conteiner-ws {
    padding: 2%;
  }
  .conteineractionws {
    width: 220px;
    font-family: "headingnow_italic";
    font-weight: bold;
    background-color: #f5dde5;
    color: #001739;
    padding: 2%;
    display: inline-flex;
    margin-top: 5%;
    margin-left: 12%;
    margin-bottom: 5%;
  }
  .conteineractionws img {
    margin-right: 3%;
    width: 20x;
    height: 20px;
  }
  .contacto-imputs {
    margin-left: 0%;
    display: block;
    height: 450px;
    width: 100%;
  }
  .contacto-imputs h2 {
    font-family: "headingnow_italic";
    text-align: center;
    margin-bottom: 5%;
    color: #001739;
  }
  .formulariocontacto {
    display: block;
    height: 250px;
    text-align: center;
  }
  .formulariocontacto input,
  textarea {
    background-color: #f5dde5;
    width: 200px;
    height: 40px;
    border: none;
    text-align: center; /* Centra el texto dentro del input */
    font-weight: bold;
  }
  .formulariocontacto button {
    border: none;
    width: 100px;
    height: 30px;
    font-family: "headingnow_italic";
    font-weight: bold;
    background-color: #f5dde5;
  }
  .formcontacto label {
    font-family: "headingnow_italic";
    font-weight: bold;
    color: #001739;
  }
  footer {
    width: 100%;
    height: 400px;
    display: inline-block;
    background: rgb(237, 134, 237);
    background: linear-gradient(
      90deg,
      rgba(237, 134, 237) 0%,
      rgba(255, 255, 255, 1) 46%,
      rgba(236, 236, 236, 1) 100%,
      rgba(236, 236, 236, 1) 100%
    );
  }

  .logofootercont {
    width: 100%;
  }
  .logofootercont img {
    margin: 6% 0% 5% 35%;
    width: 100px;
    height: 100px;
  }
  .logofootercont h2 {
    font-family: "cocogothic";
    font-weight: bold;
    color: #001739;
    text-align: center;
  }
  .conteinerredesfooter {
    margin: 6% 0% 0% 0%;

    padding: 2%;
  }
  .conteinerredesfooter li {
    margin-top: 3%;
    list-style: none;
  }
  .conteinerredesfooter h2 {
    text-align: center;
    font-size: 1.3rem;
    font-family: "headingnow_italic";
    font-weight: bold;
    color: #001739;
    margin: 2% 0% 0% 0%;
  }
  .conteinerredesfooter ul {
    display: inline-flex;
    width: 70%;
    height: 40%;
    margin-left: 5%;
  }
  .conteinerredesfooter li {
    margin-left: 10%;
    margin-bottom: 5%;
  }

  .conteinerquienesomos {
    height: 1200px;
    overflow: hidden; /* Evitar que los elementos sobrepasen el contenedor */
    display: inline-block;
  }

  .conteinerquienesomos .imgquienessomos {
    margin: 10% 0% 0% 0%;
  }
  .infoquienesomos h1 {
    font-family: "headingnow_italic";
    color: #001739;
    margin: 5% 10% 1% 10%;
    text-align: justify;
    font-size: 1.5rem;
  }
  .infoquienesomos p {
    margin: 1% 20% 1% 10%;
    font-family: "opensans_bold";
    text-align: justify;
    font-size: 0.9rem;
  }
  .conteinercurso {
    display: inline-block;
    width: 100%;
  }
  .infoprograma {
    width: 100%;
    font-family: "opensans_bold";
    font-weight: bold;
    color: #001739;
    font-size: 0.9rem;

    margin: 1% 0% 1% 0%;
    padding: 4%;
    text-align: justify;
  }
  .imagenprograma {
    margin: 1% 0% 1% -15%;
    height: 600px;
  }

  .titulotestimonios {
    font-family: "opensans_bold";
    font-weight: bold;
    color: #001739;
    padding: 3%;
    font-size: 1rem;
  }

  .ctnvideos {
    width: 100%;
    height: 400px;

    display: inline-flex;
  }
  .ctnvideos video {
    width: 25%;
    height: 400px;
  }
  .ctnvideos .videos3x3 {
    width: 100%;
    height: 400px;
    display: inline-block;
  }
  .ctnvideos {
    width: 100%;
    height: 400px;

    display: inline-block;
  }
  .ctnvideos video {
    width: 100%;
    height: 400px;
  }
  .ctnvideosgrandes {
    width: 100%;
    height: 400px;

    display: inline-flex;
  }
  .ctnvideosgrandes video {
    width: 100%;
    height: 400px;
  }
  .videofinal {
    margin-left: 0;
    width: 100%;
  }

  
.conteiner-sobrecursoprincipal{
  width: 100%;
  height: 830px;
  display: inline-block;
  

}

.imagensobrecurso{
 
  padding: 10% 10% 10% 10%;
  
}
.imagensobrecurso img{
  width: 100%;
}
.conteiner-sobrecursoprincipal{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );

}
.conteinerinfocurso{
  padding: 3% 3% 3% 3%;
}
.conteiner-sobrecursoprincipal h1{
  font-family: "opensans_bold";
  font-weight: bold;
  color: #012350;
}
.conteiner-sobrecursoprincipal .textonormal{
  font-family: "opensans_bold";
  color: #545454;
}
.conteinertextoazul{
  background-color: #2e3190;
  padding: 3% 2% 1% 2%;
  text-align: justify;
  border-radius: 25px;
}
.textoconfondoazul{

  font-family: "opensans_bold";
  color:white;
 
  

}

.conteiner-sobrecursosecundario{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  
  padding: 2%;
}
.conteiner-sobrecursosecundario h2{
  text-align: center;
  padding: 1%;
  border: solid #001739;
  margin: 0% 5% 0% 5%;
}


.conteinerpublicidad{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  width: 100%;
  display: inline-block;

}
.conteinerinfopublicidad{

  width: 100%;
  padding: 10% 5% 5% 5%;
}
.conteinerinfopublicidad h1{
  font-family: "opensans_bold";
  font-weight: bold;
  margin: 2% 0% 2% 0%;
}
.conteinerinfopublicidad p{
  font-family: "opensans_bold";
  font-weight: bold;
  margin: 2% 0% 2% 0%;
  font-size: 1.2rem;
}
.conteinervideopublicidad{
  width: 100%;
  padding: 2% 5% 5% 5%;
}
.conteinervideopublicidad div{
  background-color: #004aad;
  padding: 10% 10% 10% 10%;
  text-align: center;
  border-radius: 25px;
  color: white;
 
}

.reservatucupo{
  padding: 4% 4% 4% 4%;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  display: flex;
  flex-direction: column; /* Para alinear el h4 y el botón en columna */
  justify-content: center; /* Centra verticalmente los elementos */
  align-items: center; /* Centra horizontalmente los elementos */
  /* Para centrarlo verticalmente en toda la pantalla */
  text-align: center; /* Para centrar el texto dentro del h4 */
}
.reservatucupo h4{
  font-size: 1.3rem;
  font-family: "opensans_bold";
  color: #012350;
}
.reservatucupo button{
  border: none;
  color: white;
  padding: 3% 3% 3% 3%;
  font-size: 1.4rem;
  background-color: #2e3190;
  font-family: "opensans_bold";
  border-radius: 30px;
}


.conteiner-horarios{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  
  display: inline-block;
  width: 100%;
}
.conteinerimghora{
  width: 100%;
  padding: 2% 2% 2% 2%;
  text-align: center;
}
.conteinerimghora img{
  width: 100%;
  opacity: 0.9;
}
.conteinerimghora h1{
  margin: 1% 0% 2% 0%;
  font-family: "opensans_bold";
  font-weight: bold;
  color: red;
  font-size: 1.5rem;
 
}
.conteinerimghora button{
  border: none;
  color: white;
  padding: 2% 2% 2% 2%;
  font-size: 1.5rem;
  background-color: #2e3190;
  font-family: "opensans_bold";
  border-radius: 30px;
}
.conteinerinfohora{
  text-align: center;
  
}
.conteinerinfohora h1{
  
  font-family: "opensans_bold";
  font-weight: bold;
  color: red;
  font-size: 1.5rem;
}
.conteinerinfohora p{
  font-family: "opensans_bold";
  font-weight: bold;
  color: #545454;
  font-size: 1.5rem;
  
}

.conteinerquetendrasprincipal{
  width: 100%;
  display: inline-block;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}
.conteinerimgquetendras{

  width: 100%;

}
.conteinerimgquetendras img{
  transform: rotateY(0.5turn);
  margin: 2% 0% 2% -10%;
  opacity: 1;
  
}
.infoquetendras{
  padding: 5%;
  text-align: center;
  width: 100%;
}
.infoquetendras h1{
  font-family: "opensans_bold";
  font-weight: bold;
  color: #001739;
  margin: 2% 0% 5% 0%;
  text-shadow: 3px 1px 4px #061a38;
}
.infoquetendras p{
  margin: 10% 0% 2% 0%;
  font-size: 1.2rem;
  font-family: "opensans_bold";
  font-weight: bold;
  color: #012350;
}

.estandodentrodelcursocontainer{
  width: 100%;
  
  display: inline-block;
  text-align: center;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}
.estandodentrodelcursocontainer h1{
  font-family: "opensans_bold";
  color: red;
  font-size: 1.5rem;
  margin: 2% 0% 2% 0%;
}
.conteinerbonouno{
  background-color: #cb6ce6;
  border-radius: 25px;
  
  display: inline-block;
  width: 100%;  
  padding: 3%;
  margin: 2% 2% 2% 0%;
}
.conteinerbonouno img{
width: 20%;
}
.infobonouno{
  text-align: start;
  margin: 0% 5% 0% 10%;
}
.infobonouno p{
  font-family: "opensans_bold";
  color: white;
}
.infobonouno h1{
  font-family: "opensans_bold";
  color: white;

}
.conteinerbonodos{
  background-color: #cb6ce6;
  border-radius: 25px;
 
  display: inline-block;
  width: 100%;  
  padding: 3%;
  margin-left: 0%;
  margin-top: 8%;
  margin-bottom: 8%;
  text-align: start;
}
.infobonodos{
  display: inline-block;

}
.infobonodos h1{
  font-family: "opensans_bold";
  color: white;
}
.infobonodos p{
  font-family: "opensans_bold";
  color: white;
}
.infobonodos img{
  
    width: 20%;
    border-radius: 10px;
    margin: 5% 0% 2% 40%;
  
}
.conteinerbonocuatro{
  background-color: #cb6ce6;
  border-radius: 25px;
 
  display: inline-block;
  width: 100%;  
  padding: 3%;
  margin-left: 0%;
  margin-top: 8%;
  margin-bottom: 8%;
  text-align: start;
}

.infobonocuatro{
  text-align: start;
  margin: 0% 5% 0% 10%;
}
.infobonocuatro p{
  font-family: "opensans_bold";
  color: white;
}
.infobonocuatro h1{
  font-family: "opensans_bold";
  color: white;

}

.conteinerinversion{
  width: 100%;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  display: inline-block ;
}

.infoinversion{
  width: 100%;
  
  padding:5%;
}
.infoinversion h1{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 1.5rem;
  color: #ff5757;
}
.infoinversion p{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 1.2rem;
  color: #2e3190;
}
.segundocontainer{

  padding: 10%;
  text-align: center;
  background-color: #dfc3dc;
  border-radius: 25px;
  width: 80%;
  margin: 5% 0% 10% 10%;
  
}
.montoinversion{
  display: inline-block;
  width: 100%;
}
.logotipoinversion{
  display: inline-flex;
}
.logotipoinversion img{
  width: 30%;
}
.conteinerlogotext {
margin: 3% 2% 2% 5%;
text-align: start;
}
.conteinerlogotext h6{
  font-family: "opensans_bold";
  font-weight:bold;
  
  font-size: 1.3rem;
  color: #2e3190;
}
.conteinerlogotext p{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 1.3rem;
  color: #ff5757;
}
.preciosconteiner h2{
  font-family: "opensans_bold";
  font-weight: bold;
  font-size: 2rem;
  color: #ff5757;
}
.preciosconteiner h3{
  font-family: "opensans_bold";
  font-weight:bold;
  
  font-size: 1.3rem;
  color: #2e3190;
}
.montoinversion button{
  border: none;
  color: white;
  padding: 1.2% 1.2% 1.2% 1.2%;
  font-size: 1.3rem;
  background-color: #2e3190;
  font-family: "opensans_bold";
  border-radius: 30px;
}



.conteinertienesalgunaduda{
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
  text-align: center;

}
.conteinertienesalgunaduda h2{
  font-family: "opensans_bold";
  color: #5b5b5b;
}
.conteinertienesalgunaduda h3{
  font-family: "opensans_bold";
  color: #5b5b5b;
}
.botoncomunicarse{
  margin: 2% 0% 2% 0%;
  width: 90%;
  height: 40px;
  padding: 2% 0% 2% 0%;
  display: inline-flex;
  color: white;
  background-color:#00bf63 ;
  border-radius: 25px;
  border: none;
}
.botoncomunicarse img{
  margin: 0% 2% 1% 10%;
  width: 10%;
  height: 100%;
}
.botoncomunicarse p{
  font-family: "opensans_bold";
  font-weight:bold;
  margin: 1% 2% 1% 1%;
  font-size: 0.9rem;
}


.quiendictaelcursosobreelcurso{
  width: 100%;
  display: inline-block;
  background: rgb(237, 134, 237);
  background: linear-gradient(
    90deg,
    rgba(237, 134, 237) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(236, 236, 236, 1) 100%,
    rgba(236, 236, 236, 1) 100%
  );
}
.conteinerimagenquiendictasobreelcurso{
  
  width: 100%;
}
.quiendictainfocobrecurso{
  width: 100%;
  padding: 5%;
}

.quiendictaelcursosobreelcurso h1{
text-align: center;
font-size: 3rem;
}
.quiendictaelcursosobreelcurso p{
  text-align: justify;
  font-family: "opensans_bold";
  font-weight:bold;
  color:#5b5b5b;
  font-size: 1.2rem;
  }
  
  .imagenbonodos{
    width: 20%;
    margin-left: 40%;
    border-radius: 10px;
    
  }
  .libritobono{
    width: 40%;
    margin-left: 30%;
  }

}