@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/carreras/fondoCarreras.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");
}

.informacion {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; 
}
.informacionMadurez {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  margin-left: 20%;
}
.imgCarreras{
 display: inline-block;
 max-width: 25%;
 margin: 3%;
 text-align: center;

}
/*El menu*/

.logo
{
  position: relative;
  display: inline-block;
  /*background-image: url('../img/core-img/logo.png');*/
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: 10%;
  width: 12%; /* Establece el ancho y alto según las dimensiones de la imagen de fondo */
  height: 12%;
 margin-top: -8%;

}



/* Are del pie de la página */
.main-footer-area {
  margin-top: 0%;
  background-color: #5B5B5B;
  height: 250px;
  width: 100%;
  widows: 10%;
  margin-top: 10%;
 margin-bottom: 0%;
 padding-top: 2%;
   
 }

  .main-footer-area .footer-widget .footer-social-info a
{   
   
    color: #ffffff;
    font-size: 30px;
    padding: 2%;

}
  .main-footer-area .footer-widget .single-contact i {
    color: #ffffff;
    font-size: 20px;
    margin-right: 15px;
    padding-top: 0px; }
  .main-footer-area .footer-widget .single-contact p {
    margin-bottom: 0; 
    color: #ffffff;
     font-size: 15px;
    padding:  0px;
  }
#derechos
{
    margin-left: 25%;
    margin-top: 14%;
    position: absolute;
    color: white;
    text-align: right;
}


/*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;
}

 .basicoMadurezInfo
{
  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;
}   

  
.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;
}

    /* 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;
    }
  }