@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900");
/* :: 2.0 Import All CSS */
@import url(bootstrap.min.css);
@import url(magnific-popup.css);
@import url(font-awesome.min.css);
@import url(custom-icon.css);





/* :: 3.0 Base CSS */
* {
  margin: 0;
  padding: 0; 
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 14px; 
  background-image: url("../img/bg-img/fondofernando.png");
  background-repeat: no-repeat;
  background-size: 100%;
  overflow-x: hidden;
}

/*El menu*/

.logos {
 max-width: 10%;
 position: relative;
 margin-bottom: -5%;
}
/*aquí termina el menu*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #242424;
  line-height: 1.3;
  font-weight: 700; }

p {
  color: #606060;
  font-size: 14px;
  line-height: 2;
  font-weight: 500; 
}

/* tipo de letra */
@font-face {
  font-family: "mazzard italic";
  src: url("MazzardH-BlackItalic.ttf");
}

/*iconos*/
.barrita
{ 
    text-align: center;
    position: fixed;
    z-index: 100;
    margin-left:96%; 
    margin-top: 10%;
    padding: 0.2%;    
    max-width: 4%;    
    background-color: rgb(255, 255, 255);
    border-radius: 1.5em 0em 0em 1.5em;
}
.sociales{
 padding: 10%;
}
.lassociales{
  width: 60%;
  margin: 5%;
}
/*Botones grandes cerca del footer de primaria, basico y deiversificado*/
.carreras{
  display: block;
  text-align: center;
  position: absolute;
  z-index: 100;  
  margin-top: -14.8%; 
  width: 100%; 
  font-family: mazzard italic;
  src: url("../MazzardH-BlackItalic.ttf");
}
.primaria, .CicloBasico, .Diversificado, .Pormadurez{
  display: inline-block; 
  color:#ffffff;   
  max-width: 100%; 
  margin: -0.1%;  
  
}
.primaria{
  background-color: rgb(255, 107, 59);
  width: 24%;
}
.primaria:hover{
  background-color: rgb(230, 108, 59);  
  box-shadow: 0px 1px 1px 0px rgb(130, 159, 159);
  margin-top: -1%;
}

.CicloBasico{
  background-color: rgb(159, 159, 159);
  width: 22.5%;
}
.CicloBasico:hover{
  background-color: rgb(130, 159, 159);
  box-shadow: 0px 1px 1px 0px rgb(230, 108, 59);
  margin-top: -1%;
}
.Diversificado{  
  background-color: rgb(43, 57, 58);
  width: 23.5%;
}
.Diversificado:hover{
  background-color: rgb(13, 57, 58);
  box-shadow: 0px 1px 1px 0px rgb(230, 108, 59);
  margin-top: -1%;
  
}

.Pormadurez{
  background-color: rgba(196, 73, 1, 0.87);
  width: 21.5%;
}
.Pormadurez:hover{
  background-color: rgba(196, 73, 1, 0.87);
  box-shadow: 0px 1px 1px 0px rgb(230, 108, 59);
  margin-top: -1%;
  
}

/* Footer principal */
footer {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    background-color: #5B5B5B; /* mantener fondo */
    box-sizing: border-box;
}
/* Área del pie de página */
.main-footer-area { 
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 50px 20px 20px 20px; /* usa px en lugar de % para que no dependa del ancho */
    background-color: #5B5B5B;
    box-sizing: border-box;
    text-align: center;      
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* fuerza que siempre tenga al menos 200px de altura */
}

/* Iconos de redes sociales dentro del footer */
.main-footer-area .footer-widget .footer-social-info a {   
   color: #ffffff;
    font-size: 30px;
    padding: 2%;
}

/* Iconos individuales y contactos */
.main-footer-area .footer-widget .single-contact i {
   color: #ffffff;
    font-size: 20px;
    margin-right: 15px;
}

.main-footer-area .footer-widget .single-contact p {
    margin: 0; 
    color: #ffffff;
    font-size: 15px;
}

/* Derechos de autor u otros textos del footer */
#derechos {
    position: relative;      /* dentro del flujo del footer */
    margin: 10px 0 0 0;      /* margen arriba */
    color: white;
    text-align: center;      /* centrado real */
    font-size: 14px;
    width: 100%;             /* ocupa todo el ancho */
    box-sizing: border-box;
}

.proposito{
  background-image: url("../img/bg-img/proposito.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 2300px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}

.valores{
  background-image: url("../img/bg-img/valores.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 2300px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}

.primariaInfo{
  background-image: url("../img/bg-img/InfoPrimaria.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1600px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}
.basicoInfo{
  background-image: url("../img/bg-img/InfoBasico.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1600px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}
.biologicasInfo
{
  background-image: url("../img/bg-img/InfoBiologicas.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1700px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;

}
.cllInfo
{
  background-image: url("../img/bg-img/InfoCLL.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1600px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}
.computacionInfo
{
  background-image: url("../img/bg-img/InfoComputacion.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1600px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}
.basicoMInfo
{
  background-image: url("../img/bg-img/InfoBasicomadurez.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1800px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}   
.bachilleratoMadurezInfo
{
  background-image: url("../img/bg-img/InfoBachilleratomadurez.png");
  /* background-image: url("img/bg-img/proposito.png"); */
  height: 1600px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}         

.cuotasInfo {
  background-image: url("../img/bg-img/InfoCuotas.png");
  height: 700px;
  max-width: 100%;
  background-repeat: no-repeat;  
  background-position: center 5%; /* Ajusta la imagen hacia arriba */
  background-size: 90%; /* Reduce el tamaño de la imagen de fondo a 75% */
  overflow-y: scroll; /* Desplazamiento solo vertical */
}

.requisitos {
  background-image: url("../img/bg-img/imgRequisitos.png");
  height: 2000px;
  max-width: 100%;
  background-repeat: no-repeat;  
  background-position: center 5%; /* Ajusta la imagen hacia arriba */
  background-size: 90%; /* Reduce el tamaño de la imagen de fondo a 75% */
  overflow-y: scroll; /* Desplazamiento solo vertical */
}


.PasosInscripcion{
  background-image: url("../img/bg-img/pasosParainscripcion.png");
  height: 650px;
  max-width: 100%;
  background-repeat: no-repeat;  
  background-position: center 5%; /* Ajusta la imagen hacia arriba */
  background-size: 90%; /* Reduce el tamaño de la imagen de fondo a 75% */
  overflow-y: scroll; /* Desplazamiento solo vertical */

}



/*para el slider que quiere Willy*/
.slide  {  
  text-decoration: none;
  color: inherit;
  background-color: transparent;  
}
.slide-btn {
  display: none;
 
}
.carousel {   
  position: relative;
  width: 100%;
  height: 100%; 
  overflow: hidden; 
}
.carousel h1 {
  text-align: center;
  margin: 0 auto;
  margin-top: 5%;
  line-height: 75vh;
  font-size: 9vmin;
  height: 10.2em;  
}
.slide {  
  float: left;
  height: 100%;
  width: 0;
  transition: width .3s linear;
  padding: 0;  
  white-space: nowrap;
}
.slide > * {
  transition: transform .10s linear;
  transform: scale(0);
}
.labels {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.labels label {
  display: inline-blocknon;
  background-color: transparent;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  margin: .5vmin 2vmin;
  margin-bottom: 16%;
  border: 2px solid white;
}
.carousel .one,
.carousel .two,
.carousel .three,
.carousel .four {
  max-width: 100%; 
  background-position: center center;
  background-size: cover;
}
.carousel .one {
  
  background-image: url("../img/bg-img/bg-1.png");
  max-width: 100%;
  max-height: 100%;
  background-size: 100%; 
  background-repeat: no-repeat;
  
}
.carousel .two {
  background-image: url("../img/bg-img/bg-2.png");
  max-width: 100%;
  max-height: 100%;
  background-size: 100%; 
  background-repeat: no-repeat;
}
.carousel .three {
  background-image: url("../img/bg-img/bg-3.png");
  max-width: 100%;
  max-height: 100%;
  background-size: 100%; 
  background-repeat: no-repeat;
  
}

.carousel .four {
  background-image: url("../img/bg-img/bg-4.png");
  max-width: 100%;
  max-height: 10%;
  background-size: 100%; 
  background-repeat: no-repeat;
  
}
#slide-btn-1:checked ~ .one,
#slide-btn-2:checked ~ .two,
#slide-btn-3:checked ~ .three,
#slide-btn-4:checked ~ .four {
 width: 100%;
}
#slide-btn-1:checked ~ .one > *,
#slide-btn-2:checked ~ .two > *,
#slide-btn-3:checked ~ .three > *, 
#slide-btn-4:checked ~ .four > * {
  transform: scale(1);
}
#slide-btn-1:checked ~ .labels label[for="slide-btn-1"],
#slide-btn-2:checked ~ .labels label[for="slide-btn-2"],
#slide-btn-3:checked ~ .labels label[for="slide-btn-3"],
#slide-btn-4:checked ~ .labels label[for="slide-btn-4"] {
background-color: rgb(236, 123, 18);
}

.videosincr
{
   display: block;
   padding: 8%;
}
.videosyoutube
{
  max-width: 40%;
  margin: 3%;
  display: inline-block;
}





/*Hacer el menú responsivo*/
@media only screen and (min-width: 360px) and (max-width: 640px)
{
.proposito{
background-image: url("../img/bg-img/proposito.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 1100px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;

}

.valores{
background-image: url("../img/bg-img/valores.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 1100px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;
}

.primariaInfo{
background-image: url("../img/bg-img/InfoPrimaria.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;
}
.basicoInfo{
background-image: url("../img/bg-img/InfoBasico.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;;
background-position: center;
overflow-x: hidden;
}
.biologicasInfo
{
background-image: url("../img/bg-img/InfoBiologicas.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;

}
.cllInfo
{
background-image: url("../img/bg-img/InfoCLL.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;
}
.computacionInfo
{
background-image: url("../img/bg-img/InfoComputacion.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;
}
 
.bachilleratoMadurezInfo
{
background-image: url("../img/bg-img/InfoBachilleratomadurez.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;
}         
 
}

/* ===== ESTILOS EXCLUSIVOS PARA MÓVIL ===== */
.carousel_movil
{
   display: none;
}
header{
  display: none;
}
.menu_movil{
   display: none;
}
.socials_movil{
  display: none;
}
/* ===== ESTILOS EXCLUSIVOS PARA MÓVIL ===== */
@media only screen and (max-width: 768px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

      .finscripcion
  {
    margin-left: 0px;
  }

    body, html {
        height: 100%;
        font-family: "Montserrat", Arial, sans-serif;
        color: white;
        overflow-x: hidden;
    }
    .videosincr{
      display: block;
      padding: 1%;

    }

  .videosyoutube {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* Mantiene la proporción 16:9 */
    border: none;
    display: block;
}

.basicoMInfo{
background-image: url("../img/bg-img/InfoBasicomadurez.png");
/* background-image: url("img/bg-img/proposito.png"); */
height: 900px;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
overflow-x: hidden;
}

    /* Slider de fondo para móvil */
    .carousel_movil {
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;        
        overflow: auto;
    }

    .carousel_movil img {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .carousel_movil img.active {
        opacity: 1;
    }

    /* Encabezado móvil */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        position: relative;  
        z-index: 1000;
        background: #0c0c34;
    }

    .logo_movil {
        width: 120px;
        order: 1;
    }

    .menu-btn_movil {
        border-radius: 50%;
        padding: 0;
        cursor: pointer;
        order: 2;
        background: none;
        border: none;
    }

    .menu-btn_movil img {
        width: 50px;
        height: 50px;
        display: block;
    }

    .login-btn_movil {
        order: 3;
        cursor: pointer;
    }

    .login-btn_movil img {
        width: 180px;
        height: auto;
        display: block;
    }

    /* Menú desplegable móvil */
    .menu_movil {     
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        max-width: 300px;
        height: 100%;
        background: rgba(0, 0, 50, 0.5);
        background-image: url(../img/movil/fondomenu.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 80px 20px 20px 20px;
        transition: left 0.4s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .menu_movil.active {
        left: 0;
    }

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

    .menu_movil ul li {
        color: #ffffff;
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .menu_movil ul li a {
        color: #ffffff !important;
        text-decoration: none;
        display: block;
        padding: 12px 15px;
    }

    /* ========== SUBMENÚS - VERSIÓN DEFINITIVA ========== */
    .menu_movil .has-submenu {
        position: relative;
    }

    .menu_movil .menu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #ffffff;
        text-decoration: none;
        padding: 12px 15px;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
    }

    .menu_movil .arrow {
        font-size: 12px;
        transition: transform 0.3s ease;
        margin-left: 10px;
    }

    /* ✅ CAMBIO CLAVE: Usar .submenu-open en lugar de .active */
    .menu_movil .has-submenu.submenu-open .arrow {
        transform: rotate(180deg);
    }

    /* Submenús OCULTOS por defecto */
    .menu_movil .submenu {
        display: none !important;
        list-style: none;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    /* ✅ CAMBIO CLAVE: Mostrar cuando tiene .submenu-open */
    .menu_movil .has-submenu.submenu-open .submenu {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }

    .menu_movil .submenu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 14px;
        text-transform: none;
    }

    .menu_movil .submenu li:last-child {
        border-bottom: none;
    }

    .menu_movil .submenu li a {
        color: #ffa500 !important;
        font-size: 14px;
        padding: 10px 15px 10px 25px;
        text-transform: none;
        display: block;
        min-height: 44px;
        line-height: 24px;
    }

    .menu_movil .submenu li a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.1);
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Overlay para cerrar el menú */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        display: none;
    }

    .overlay.active {
        display: block;
    }

    /* Contenido central móvil */
    .mobile-content {
        text-align: center;
        padding: 20px;
        margin-top: 60px;
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh - 200px);
    }

    .mobile-content h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .mobile-content p {
        margin: 5px 0;
    }

    /* Redes sociales fijas abajo */
    .socials_movil {
        position: fixed;
        bottom: 30px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 40px;
        z-index: 2;
    }

    .socials_movil img {
        width: 60px;
        height: 60px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .socials_movil img:hover {
        transform: scale(1.1);
    }

    /* Ocultar elementos del desktop en móvil */
    .menu,
    .carousel,
    .carreras,
    .bingreso,
    .footer,
    .footer-area,
    .logos {
        display: none !important;
    }

    /* Mostrar elementos específicos de móvil */
    .mobile-content,
    .carousel_movil,
    .menu_movil {
        display: block !important;
    }
}