/*
 * =========================================
 * ESTILOS GENERALES Y RESET
 * =========================================
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9; /* Un fondo gris muy claro */
}

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: #1A5F9E; /* Azul DGETI */
}

h1, h2, h3 {
    margin-bottom: 15px;
}

h2 { /* Títulos de sección */
    text-align: center;
    font-size: 2rem;
    color: #8C243C; /* Color Vino DGETI/SEP */
    margin-bottom: 30px;
}

/*
 * =========================================
 * BARRA GOBIERNO (SUPERIOR)
 * =========================================
 */
.barra-gobierno {
    background-color: #0d0d0d; /* Negro/Gris muy oscuro */
    padding: 10px 0;
}

.barra-gobierno .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.barra-gobierno a {
    color: white;
    font-weight: bold;
}

/* Texto "" como placeholder */
.barra-gobierno a[href*="gob.mx"] {
    font-size: 1.2rem; 
}

.barra-gobierno ul {
    list-style: none;
    display: flex;
}

.barra-gobierno ul li {
    margin-left: 20px;
}

.barra-gobierno ul li a {
    color: white;
    font-size: 0.9rem;
}

/*
 * =========================================
 * ENCABEZADO DEL PLANTEL (LOGOS)
 * =========================================
 */
.encabezado-plantel {
    background-color: #ffffff;
    padding: 20px 0;
    border-bottom: 5px solid #8C243C; /* Franja VINO */
}

.encabezado-plantel .logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logos-institucionales {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Placeholder para logos */
.logos-institucionales a {
    display: block;
    background: #eee;
    padding: 10px;
    min-width: 100px; 
    text-align: center;
    font-size: 0.8rem;
    color: #555;
    border: 1px dashed #ccc;
}

.logo-cbtis {
    text-align: right;
}

.logo-cbtis h2 {
    color: #8C243C; /* VINO */
    font-size: 1.8rem;
    margin: 0;
}

.logo-cbtis p {
    font-style: italic;
    color: #555;
    margin: 0;
}

/*
 * =========================================
 * MENÚ PRINCIPAL (CON SUBMENÚ AÑADIDO)
 * =========================================
 */
.menu-principal {
    background-color: #1A5F9E; /* Azul DGETI */
    width: 100%;
}

.menu-principal ul {
    list-style: none;
    display: flex;
    justify-content: center; /* Centramos el menú */
}

.menu-principal ul li a {
    display: block;
    padding: 15px 20px;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.menu-principal ul li a:hover {
    background-color: #134a80; /* Azul más oscuro al pasar el mouse */
}

/* --- Estilos para flechas de dropdown --- */
.menu-principal .dropdown-toggle::after {
    content: ' ▼';
    font-size: 0.7em;
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}


/* --- INICIA CÓDIGO DEL SUBMENÚ --- */

/* 1. Al 'li' padre le damos posición relativa */
.menu-principal .dropdown {
    position: relative;
}

/* 2. El submenú (la lista anidada) */
.menu-principal .submenu {
    display: none; /* Oculto por defecto */
    position: absolute; /* Posicionado absolutamente al padre */
    top: 100%; /* Justo debajo del 'li' padre */
    left: 0;
    background-color: #134a80; /* Un azul más oscuro */
    min-width: 220px; /* Ancho mínimo */
    padding: 0; /* Quitamos padding por defecto de la lista */
    list-style: none; /* Quitamos los 'bullets' */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000; /* Nos aseguramos que esté por encima de otro contenido */
}

/* 3. Mostramos el submenú cuando se pasa el mouse sobre el 'li' padre */
.menu-principal .dropdown:hover > .submenu {
    display: block;
}

/* 4. Estilos de los enlaces del submenú */
.menu-principal .submenu li {
    position: relative; /* Necesario para el sub-submenú */
}

.menu-principal .submenu li a {
    /* Sobrescribimos los estilos del menú principal */
    display: block; /* Hacemos que ocupe todo el 'li' */
    padding: 12px 15px;
    color: white;
    font-weight: normal; /* Fuente más ligera */
    font-size: 0.85rem;
    white-space: nowrap; /* Evitamos que el texto se parta en dos líneas */
    border-bottom: 1px solid #1A5F9E; /* Separador */
}

/* 5. Efecto hover para los enlaces del submenú */
.menu-principal .submenu li a:hover {
    background-color: #8C243C; /* Color VINO al pasar el mouse */
}

/* 6. Quitamos el borde del último elemento */
.menu-principal .submenu li:last-child a {
    border-bottom: none;
}
/* --- TERMINA CÓDIGO DEL SUBMENÚ --- */


/* --- INICIA CÓDIGO DEL SUB-SUBMENÚ (NIVEL 2) --- */

/* 1. Flecha para sub-submenú (distinta) */
.menu-principal .submenu .sub-toggle::after {
    content: ' ►';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* 2. Posicionamos el nuevo submenú (level2) */
.menu-principal .submenu .submenu.level2 {
    display: none;
    position: absolute;
    top: -1px; /* Alineado con el 'li' padre, -1px para solapar borde */
    left: 100%; /* A la derecha del 'li' padre */
    background-color: #113e6a; /* Un azul más oscuro */
    min-width: 280px; /* Más ancho para nombres largos */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1001;
}

/* 3. Mostramos el sub-submenú al pasar el mouse por el 'li' padre */
.menu-principal .submenu .dropdown.has-submenu:hover > .submenu.level2 {
    display: block;
}

/* 4. Estilos de los enlaces del sub-submenú */
.menu-principal .submenu .submenu.level2 li a {
    background-color: #113e6a;
    border-bottom: 1px solid #1A5F9E;
}

.menu-principal .submenu .submenu.level2 li a:hover {
    background-color: #8C243C; /* Color VINO al pasar el mouse */
}

/* --- FIN CÓDIGO DEL SUB-SUBMENÚ --- */


/*
 * =========================================
 * CONTENIDO PRINCIPAL (INDEX)
 * =========================================
 */
.contenedor-principal {
    padding: 20px 0;
}

/* --- Hero Slider --- */
.hero-slider {
    background-color: #333; /* Placeholder para un slider o imagen */
    color: white;
    padding: 100px 0;
    text-align: center;
}

.hero-slider h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}

/* --- Botones --- */
.boton-primario {
    display: inline-block;
    padding: 12px 25px;
    background-color: #8C243C; /* VINO */
    color: white;
    font-weight: bold;
    border-radius: 5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.boton-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.boton-secundario {
    display: inline-block;
    padding: 8px 15px;
    background-color: #f4f4f4;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.boton-secundario:hover {
    background-color: #e9e9e9;
}


/* --- Noticias --- */
.noticias-anuncios {
    padding: 40px 0;
}

.grid-noticias {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 25px;
}

.tarjeta-noticia {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden; /* Para que la imagen no se salga */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tarjeta-noticia:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}
.tarjeta-noticia img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.tarjeta-noticia h3 { 
    padding: 15px 15px 5px; 
    color: #1A5F9E; /* Azul */
}
.tarjeta-noticia p { 
    padding: 0 15px 15px; 
    font-size: 0.9rem;
}
.tarjeta-noticia .boton-secundario { 
    margin: 0 15px 15px; 
}


/* --- Accesos Rápidos --- */
.accesos-rapidos {
    background-color: #f0f4f8; /* Un fondo azulado/gris claro */
    padding: 40px 0;
}

.grid-accesos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 20px;
}

.acceso-item {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.acceso-item:hover {
    background-color: #1A5F9E;
    color: white;
    border-color: #1A5F9E;
    transform: translateY(-5px);
}
.acceso-item span[class^="icon-"] {
    display: block;
    font-size: 2.5rem; /* Tamaño del icono */
    margin-bottom: 10px;
    color: #8C243C; /* VINO */
}
.acceso-item:hover span[class^="icon-"] {
    color: white;
}


/*
 * =========================================
 * PIE DE PÁGINA
 * =========================================
 */
.pie-pagina {
    background-color: #333333;
    color: #ccc;
    padding: 40px 0 20px;
}

.pie-pagina .contenedor {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.pie-pagina .info-footer {
    flex-basis: 50%; /* Ocupa la mitad del espacio */
}
.pie-pagina .info-footer [Image] {
    background: #777;
    padding: 10px;
    max-width: 200px;
    margin-bottom: 15px;
    display: block;
}

.pie-pagina h3 {
    color: white;
    margin-bottom: 15px;
}

.pie-pagina p {
    font-size: 0.9rem;
    line-height: 1.8;
}

.pie-pagina .enlaces-footer {
    flex-basis: 40%; /* Ocupa el 40% */
}

.pie-pagina .enlaces-footer ul {
    list-style: none;
}

.pie-pagina .enlaces-footer ul li a {
    color: #ccc;
    font-size: 0.9rem;
    padding: 5px 0;
    display: inline-block;
    transition: color 0.3s ease;
}
.pie-pagina .enlaces-footer ul li a:hover {
    color: white;
}

.copyright {
    text-align: center;
    border-top: 1px solid #555;
    padding-top: 20px;
    font-size: 0.8rem;
    color: #999;
}

/*
 * =========================================
 * DISEÑO RESPONSIVO (Media Queries)
 * =========================================
 */

/* Para tabletas y celulares (menos de 768px) */
@media (max-width: 768px) {

    h2 { font-size: 1.8rem; }
    .hero-slider h1 { font-size: 2rem; }

    /* --- Header --- */
    .encabezado-plantel .logos {
        flex-direction: column; /* Apila los logos */
    }
    .logo-cbtis {
        text-align: center; /* Centra el texto del CBTIS */
        margin-top: 20px;
    }
    .logo-cbtis h2 { font-size: 1.5rem; }

    /* --- Menú --- */
    .menu-principal ul {
        flex-direction: column; /* Apila el menú */
        align-items: center;
    }
    .menu-principal ul li a {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #134a80; /* Separador */
    }

    /* --- INICIO: Ajustes para Submenu en Móvil --- */
    
    .menu-principal .dropdown {
        position: static;
        width: 100%;
    }

    /* Ocultamos las flechas en móvil */
    .menu-principal .dropdown-toggle::after {
        display: none;
    }

    .menu-principal .submenu {
        position: static;
        display: block;
        box-shadow: none;
        min-width: 100%;
        background-color: #113e6a;
    }

    .menu-principal .submenu li a {
        font-size: 0.85rem;
        text-align: center;
        border-bottom: 1px solid #1A5F9E;
    }

    /* --- Ajustes para Sub-Submenu en Móvil --- */
    .menu-principal .submenu .submenu.level2 {
        background-color: #0d2f50; /* Aún más oscuro */
    }
    
    .menu-principal .submenu .submenu.level2 li a {
        padding-left: 40px; /* Más sangría */
        font-size: 0.8rem;
    }
    /* --- FIN: Ajustes para Submenu en Móvil --- */


    /* --- Grids (Noticias y Accesos) --- */
    .grid-noticias,
    .grid-accesos {
        grid-template-columns: 1fr; /* Una sola columna */
    }

    /* --- Footer --- */
    .pie-pagina .contenedor {
        flex-direction: column; /* Apila las secciones del footer */
    }
    .pie-pagina .enlaces-footer {
        margin-top: 30px;
    }

    /* --- Barra Gov (ocultamos enlaces, dejamos logo) --- */
    .barra-gobierno ul {
        display: none;
    }
    .barra-gobierno .contenedor {
        justify-content: center; /* Centramos el logo de Gob.mx */
    }
}

/* Para celulares (menos de 480px) */
@media (max-width: 480px) {
    .hero-slider { padding: 60px 0; }
    .hero-slider h1 { font-size: 1.8rem; }
}

/*
 * =========================================
 * ESTILOS PÁGINA 404
 * =========================================
 */
.error-404 {
    padding: 60px 0;
    text-align: center;
    background-color: #ffffff;
}
.error-404 h1 {
    font-size: 8rem;
    color: #8C243C;
    margin-bottom: 0;
    line-height: 1;
}
.error-404 h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}
.error-404 p {
    font-size: 1.1rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 20px;
}
.error-404 .boton-primario {
    margin-top: 20px;
}

/*
 * =========================================
 * ESTILOS PÁGINA "NOSOTROS"
 * =========================================
 */
.pagina-contenido {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.titulo-pagina {
    background-color: #f0f4f8;
    padding: 25px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
}
.titulo-pagina h1 {
    color: #8C243C;
    font-size: 2.2rem;
    margin: 0;
    text-align: center;
}
.seccion-nosotros {
    padding: 0 30px 30px 30px;
}
.grid-nosotros {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}
.col-historia h2, 
.col-fundadores h2 {
    font-size: 1.8rem;
    color: #1A5F9E;
    text-align: left;
    margin-bottom: 10px;
}
.red {
    border: 0;
    height: 3px;
    background-color: #8C243C;
    width: 70px;
    margin: 0 0 20px 0;
}
.col-historia p {
    margin-bottom: 20px;
    line-height: 1.7;
    font-size: 1rem;
}
.col-fundadores ol {
    list-style-type: decimal;
    padding-left: 20px;
    font-size: 0.95rem;
}
.col-fundadores li {
    margin-bottom: 12px;
    color: #333;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .grid-nosotros {
        grid-template-columns: 1fr;
    }
    .seccion-nosotros {
        padding: 0 15px 15px 15px;
    }
}

/*
 * =========================================
 * ESTILOS PÁGINA "MISIÓN, VISIÓN"
 * =========================================
 */
.seccion-mision {
    padding: 0 30px 30px 30px;
}
.grid-mision {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.col-mision {
    text-align: center;
}
.col-mision h3 {
    font-size: 1.8rem;
    color: #1A5F9E;
    text-align: center;
    margin-bottom: 10px;
}
.col-mision .red {
    margin: 0 auto 20px auto; 
}
.col-mision p {
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
}
.col-mision ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
}
.col-mision ul li {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .grid-mision {
        grid-template-columns: 1fr;
    }
}

/*
 * =========================================
 * ESTILOS PÁGINA "OFERTA EDUCATIVA (CARRERAS)"
 * =========================================
 */
.seccion-carrera {
    padding: 0 30px 30px 30px;
}

.descripcion-carrera {
    text-align: center;
    margin-bottom: 40px;
}

.descripcion-carrera h2 {
    font-size: 2rem;
    color: #8C243C; /* VINO */
    text-align: center;
    margin-bottom: 5px;
}

.descripcion-carrera .subtitulo-area {
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.descripcion-carrera .red {
    margin: 0 auto 20px auto; /* Centrar la línea */
}

.descripcion-carrera .descripcion-texto {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto; /* Centrar el párrafo */
}

/* Grid para "Campo de Trabajo" y "Carreras" */
.grid-carrera {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px; /* Espacio entre columnas */
}

.col-carrera h3 {
    font-size: 1.6rem;
    color: #1A5F9E; /* Azul DGETI */
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.col-carrera ul {
    list-style: none;
    padding-left: 0;
}

.col-carrera ul li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px; /* Espacio para el icono */
}

/* Añadir una viñeta personalizada (un 'check') */
.col-carrera ul li::before {
    content: '✓'; /* Icono de check */
    color: #8C243C; /* Color VINO */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/*
 * =========================================
 * RESPONSIVO PARA "OFERTA (CARRERAS)"
 * =========================================
 */
@media (max-width: 768px) {
    .grid-carrera {
        grid-template-columns: 1fr; /* Una sola columna */
    }
}