@import url('https://fonts.googleapis.com/css2?family=Encode+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
    --rosa-vibrante: #E81F76;
    --azul-profundo: #417099;
    --cian-vibrante: #00AEC3;
    --gris-claro: #EAEAEA;
    --gris-oscuro: #D9D9D9;
    --gris-muy-oscuro: #2c2c2c;
    --blanco: #F5F5F5;
    --negro: #1A1A1A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


/* Estilos generales para el cuerpo de la página */
body {
    font-family: 'Encode Sans', sans-serif;
    background-color: var(--blanco);
    color: var(--negro);
    line-height: 1.6;
}

main {
    /* Añadimos un padding para que el contenido no quede oculto detrás del header fijo */
    padding-top: 150px;
}

/* Clase para ocultar elementos visualmente pero mantenerlos accesibles para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(245, 245, 245, 0.85);
    /* Fondo semitransparente */
    -webkit-backdrop-filter: blur(5px);
    /* Efecto de desenfoque para legibilidad (Safari) */
    backdrop-filter: blur(5px);
    /* Efecto de desenfoque para legibilidad */
    padding: 10px 0;
}

.banner-content,
.nav-menu,
.subtitle {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.banner-content {
    background: linear-gradient(to right, var(--rosa-vibrante), var(--azul-profundo), var(--cian-vibrante));
    border-radius: 4px 10px;
    color: var(--blanco);
    display: flex;
    justify-content: space-between; /* En la página principal, esto separa el logo del menú */
    align-items: center; /* Centra verticalmente los elementos por defecto */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-height: 80px;
    /* Usamos min-height para más flexibilidad si el contenido crece */
    padding: 10px 4%;
}

/* En las subpáginas, solo queremos mostrar el logo centrado */
body:not(#top) .banner-content {
    justify-content: center;
}

/* Cuando el menú está abierto, se aplanan las esquinas inferiores del banner */
header.menu-open .banner-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.header-logo-main {
    height: 60px; /* Ajusta la altura del logo */
    width: auto; /* Mantiene la proporción */
    display: block;
    max-width: 100%; /* Asegura que la imagen no desborde su contenedor */
    padding: 5px 0; /* Añade un poco de espacio vertical */
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Aumentamos la especificidad para sobreescribir los estilos por defecto de Google Icons */
.banner-content .hamburger-icon {
    font-size: 42px;
    /* Controla el tamaño del icono */
    cursor: pointer;
}

.subtitle {
    font-size: 14px;
    color: var(--azul-profundo);
    font-weight: normal;
    /* Sombra aplicada directamente al texto para un efecto de profundidad */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Menú de Navegación para Escritorio --- */
.desktop-nav {
    display: none; /* Oculto por defecto */
}

.desktop-nav ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Un poco más de separación entre los enlaces */
}

.desktop-nav a {
    text-decoration: none;
    color: var(--blanco); /* Color de las letras en blanco */
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.desktop-nav a:hover {
    background-color: var(--cian-vibrante);
    color: var(--blanco);
}

.nav-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    /* Mismo degradado que el banner para unificar */
    background: linear-gradient(to right, var(--rosa-vibrante), var(--azul-profundo), var(--cian-vibrante));
    /* Se ajustan las esquinas para que coincidan con el banner */
    border-radius: 0 0 4px 10px;
}

.nav-menu.active {
    max-height: 500px;
    /* A large enough value to show all items */
}

.nav-menu ul {
    list-style: none;
}

.nav-menu li a {
    display: block;
    padding: 15px 20px;
    color: var(--blanco);
    text-decoration: none;
    text-align: center;
    border-top: 1px solid rgba(245, 245, 245, 0.2);
    /* A subtle separator */
    transition: background-color 0.2s;
}

.nav-menu li a:hover {
    background-color: var(--cian-vibrante);
}

.number-container {
    font-family: 'Anton', sans-serif;
    /* Nueva fuente, más robusta y sin deformación */
    font-size: 60px;
    line-height: 1;
    display: flex;
    align-items: flex-start;
}

.number-container sup {
    font-size: 0.4em;
    line-height: 1;
    margin-top: 4px;
    margin-left: 2px;
    /* Separamos el 'er' del '1' */
}

.text-container {
    display: flex;
    flex-direction: column;
}

.main-text {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

.small-text {
    font-family: 'Just Me Again Down Here', cursive;
    font-size: 26px;
    text-align: center;
    line-height: .8;
    /* Ajuste vertical para compensar el espacio extra de la fuente */
    transform: translateY(-4px);
}

.bottom-text {
    font-size: 18px;
    font-weight: normal;
    line-height: .7;
}

/* --- Hero Section --- */
.hero {
    position: relative;
    /* Necesario para posicionar el fondo SVG */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 250px); /* Ajustamos la altura mínima para pantallas pequeñas */
    /* Centra verticalmente en el espacio restante de la pantalla */
    padding: 0 20px 40px;
    text-align: center;
    overflow: hidden;
    scroll-margin-top: 150px;
    /* Espacio para compensar la altura del header fijo */
    /* Contiene al pseudo-elemento rotado para evitar que se desborde */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usamos una máscara para poder colorear el SVG con variables CSS */
    background-color: var(--cian-vibrante);
    -webkit-mask-image: url(../assets/proyector.svg);
    mask-image: url(../assets/proyector.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 65%; /* Reducimos aún más el tamaño de la máscara para evitar desbordes al rotar */
    mask-size: 65%;
    opacity: 0.1;
    /* Opacidad muy baja para que no moleste */
    z-index: -1;
    /* Lo enviamos detrás del contenido */
    transform: rotate(30deg);
    /* Rotado 30 grados hacia arriba */
}

.hero-content {
    max-width: 800px;
    /* Ancho máximo para el texto para mejorar legibilidad */
    color: var(--azul-profundo);
    line-height: 1.8;
    /* Interlineado para mejorar la lectura del texto centrado */
}

.hero-content p {
    margin-bottom: 10px;
}

/* --- Section Styles --- */

h2 {
    text-align: center;
    margin: 0 0 20px 0;
    color: var(--azul-profundo);
    font-size: 28px;
    font-weight: bold;
    position: relative;
    /* Necesario para posicionar el subrayado */
    scroll-margin-top: 150px;
    /* Espacio para compensar la altura del header fijo */
    padding-bottom: 10px;
    /* Espacio para el subrayado */
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--rosa-vibrante);
    border-radius: 2px;
}

/* --- Video Player --- */
.marquee-frame {
    width: 95%;
    max-width: 800px;
    margin: 40px auto 60px;
    padding: 8px;
    border-radius: 4px;
    /* Marco más cercano al reproductor */
    background: linear-gradient(to right, var(--rosa-vibrante), var(--azul-profundo), var(--cian-vibrante));
    /* Mismo degradado que el banner */

}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* Proporción 16:9 para el video */
    height: 0;
    border-radius: 4px;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Schools Section --- */
.schools-section {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

.district {
    margin-bottom: 40px;
}

.district h3 {
    color: var(--azul-profundo);
    font-size: 22px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cian-vibrante);
}

.school-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.school-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    color: var(--negro);
    background-color: var(--gris-claro);
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    font-size: 14px;
}

.school-list li a:hover {
    background-color: var(--azul-profundo);
    color: var(--blanco);
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Estilo para enlaces deshabilitados */
.school-list li a.disabled {
    background-color: var(--gris-oscuro);
    color: #999;
    cursor: not-allowed;
    pointer-events: none; /* Evita que se pueda hacer clic */
}

.school-list li a.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--gris-muy-oscuro);
    color: var(--blanco);
    padding: 40px 20px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 95%; /* Aumentamos el ancho para mejor distribución en móvil */
    margin: 0 auto;
}

.footer-logo {
    width: 90%;
    /* Hacemos que ocupe casi todo el ancho del contenedor */
    max-width: 500px;
    /* Pero con un límite para pantallas grandes */
    height: auto;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    gap: 25px; /* Reducido para juntar más los íconos */
    justify-content: center; /* Centra el grupo de enlaces */
    align-items: center; /* Centra los grupos de enlaces verticalmente */
}

.link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Aumenta la separación entre el icono y el texto */
}

.footer-links a {
    color: var(--blanco);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--cian-vibrante);
}

.link-label {
    font-size: 14px; /* Ligeramente más grande para mejor legibilidad */
    color: var(--gris-claro);
    text-align: center; /* Centra el texto de la etiqueta */
}

.copyright-text {
    font-size: 0.8rem; /* Reduce el tamaño de la fuente para que sea más discreto */
    color: var(--gris-oscuro); /* Color más suave */
    text-align: center;
    margin-top: 10px;
    width: 100%; /* Asegura que ocupe todo el ancho para centrar */
}
/* Nuevos estilos para las secciones del footer */
.footer-section {
    margin-bottom: 1rem; /* Reducido para que las secciones estén más juntas en móvil */
    width: 100%; /* Ocupa todo el ancho disponible en móvil */
    text-align: center; /* Centra los elementos inline-block dentro de la sección */
}

.footer-heading {
    color: var(--blanco); /* Cambiado a blanco */
    font-size: 1.2rem;
    margin-bottom: 2rem; /* Aumentado para separar más el título de los logos */
    text-align: center; /* Centra los títulos */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

/* Espacio extra arriba de la sección Jefaturas */
.footer-left-column .footer-section:nth-child(2) {
    margin-top: 2rem;
}

/* Estilos para los iconos del footer (RESTAURADO) */
.footer-links .material-symbols-outlined,
.footer-links svg {
    font-size: 30px;
    width: 30px;
    height: 30px;
    fill: currentColor; /* Permite que el SVG herede el color del enlace */
    display: block;
}

/* --- Filter Buttons for Productions --- */
.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Permite que los botones se reorganicen en pantallas pequeñas */
    gap: 10px;
    margin-bottom: 30px;
    padding: 0 10px;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--azul-profundo);
    background-color: transparent;
    color: var(--azul-profundo);
    font-family: 'Encode Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--rosa-vibrante);
    color: var(--blanco);
    border-color: var(--rosa-vibrante);
}

/* --- Back Button (for subpages) --- */
.back-button {
    display: block;
    width: 90%;
    max-width: 400px;
    margin: 0 auto 40px auto;
    padding: 12px 20px;
    background-color: var(--rosa-vibrante);
    color: var(--blanco);
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.back-button:hover {
    background-color: var(--azul-profundo);
}

/* --- School Subpages --- */
.school-description {
    width: 95%;
    max-width: 800px;
    margin: 20px auto 40px;
    text-align: justify;
    color: var(--azul-profundo);
}

.school-description p {
    margin-bottom: 15px;
}

.sub-heading {
    text-align: center;
    color: var(--azul-profundo);
    font-size: 24px;
    font-weight: bold;
    margin: 40px 0 20px 0;
    position: relative;
    padding-bottom: 10px;
}

.sub-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--rosa-vibrante);
    border-radius: 2px;
}

/* --- Carousel for School Pages --- */
.carousel-container {
    width: 95%;
    max-width: 800px;
    /* Mismo ancho máximo que el reproductor de video */
    margin: 40px auto;
    /* Espaciado superior e inferior */
    overflow-x: scroll;
    /* Habilita el desplazamiento horizontal */
    -webkit-overflow-scrolling: touch;
    /* Desplazamiento suave en iOS */
    scrollbar-width: none;
    /* Oculta la barra de desplazamiento para Firefox */
    -ms-overflow-style: none;
    /* Oculta la barra de desplazamiento para IE y Edge */
}

/* Oculta la barra de desplazamiento para Chrome, Safari y Opera */
.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 15px;
    /* Espacio entre las imágenes */
}

.carousel-track img {
    flex-shrink: 0;
    /* Evita que las imágenes se encojan */
    width: calc((100% - (2 * 15px)) / 3);
    /* 3 imágenes por pantalla en móvil, considerando los gaps */
    height: auto;
    /* Mantiene la relación de aspecto */
    aspect-ratio: 4 / 3;
    /* Fuerza la relación de aspecto 4x3 */
    object-fit: cover;
    /* Cubre el área, recortando si es necesario */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .hero {
        min-height: 50vh; /* Reducimos la altura mínima para que no sea tan grande */
        padding-top: 40px; /* Añadimos un poco de padding superior */
        padding-bottom: 60px; /* y aumentamos el inferior */
    }

    .hero-content {
        max-width: 600px; /* Ancho específico para tablets */
    }

    .hero::before {
        -webkit-mask-size: 35%; /* Reduce el tamaño del proyector para pantallas medianas y grandes */
        mask-size: 35%;
    }
}

@media (min-width: 1200px) {
    /* Ajustes para la sección Hero en pantallas grandes */
    .hero {
        min-height: 55vh; /* Altura más contenida para integrar mejor */
        padding: 0 0 60px 0;
    }

    .hero h2 {
        font-size: 42px; /* Título más grande */
    }

    .hero-content {
        max-width: 900px; /* Aumenta el ancho máximo del contenido */
        font-size: 1.15em; /* Aumenta ligeramente el tamaño de la fuente */
        line-height: 1.9; /* Ajusta el interlineado para la nueva fuente */
    }
    .hero-content p {
        margin-bottom: 20px; /* Aumenta el margen inferior de los párrafos para mejor separación */
    }

    .banner-content {
        align-items: flex-end; /* Alinea los elementos a la parte inferior en escritorio */
    }

    header {
        padding: 10px 4%; /* Aumenta el padding lateral */
    }

    /* Oculta el icono de hamburguesa y el menú desplegable en pantallas grandes */
    .hamburger-icon,
    header .nav-menu { /* Aumentamos especificidad para asegurar que se oculte */
        display: none !important; /* Usamos !important para garantizar la anulación */
    }

    .footer-content {
        /* Alinea los elementos del footer a la parte superior */
        flex-direction: row; /* Pone los elementos en fila */
        flex-wrap: wrap;
        justify-content: space-between; /* Empuja los elementos a los extremos */
        align-items: center; /* Centra verticalmente las columnas izquierda y derecha */
        gap: 20px;
    }

    /* Nuevo contenedor para las secciones de la izquierda */
    .footer-left-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alinea el contenido de la columna a la izquierda */
        gap: 20px;
        flex-basis: 45%; /* Reduce el espacio que ocupa la columna izquierda */
    }

    /* Nuevo contenedor para la columna derecha */
    .footer-right-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-basis: 50%; /* Le da más espacio a la columna derecha */
    }

    .footer-section {
        width: 100%;
        margin-bottom: 0; /* Eliminamos el margen que ya no es necesario */
        text-align: left; /* Alinea el texto de los títulos a la izquierda */
    }

    .footer-heading {
        text-align: left; /* Asegura que los títulos se alineen a la izquierda */
    }

    .footer-links {
        justify-content: flex-start; /* Alinea los grupos de enlaces a la izquierda */
        flex-wrap: wrap; /* Permite que los enlaces se envuelvan si hay muchos */
    }

    /* Estilos específicos para la sección de Jefaturas en escritorio */
    .footer-links.collaborators {
        justify-content: space-between; /* Distribuye los 3 elementos de abajo */
    }

    .footer-links.collaborators .link-item.regional-link {
        flex-basis: 100%; /* Ocupa toda la línea */
        margin-bottom: 15px; /* Espacio debajo del enlace regional */
    }

    .link-item {
        flex-direction: row; /* Pone el icono y el texto en fila */
        align-items: center; /* Centra verticalmente icono y texto */
        gap: 10px; /* Espacio entre icono y texto */
    }

    .footer-logo {
        order: 0; /* Restablece el orden */
        max-width: 460px; /* Aumentado un 15% */
    }

    .copyright-text {
        order: 3; /* Lo mandamos al final de todo */
        flex-basis: 100%; /* Ocupa todo el ancho para poder centrarse */
        width: 100%;
        text-align: center;
        margin-top: 10px;
        font-size: 0.8rem; /* Reduce el tamaño de la fuente para que sea más discreto */
        color: var(--gris-oscuro); /* Color más suave */
    }

    .site-footer {
        padding: 40px 20px 20px; /* Aumenta el padding superior del footer */
    }

    /* Muestra el menú de escritorio */
    .desktop-nav {
        display: block;
    }

    /* Convierte el carrusel en una galería flexible en pantallas grandes */
    .carousel-container {
        overflow-x: visible; /* Permite que el contenido se desborde para el wrap */
    }

    .carousel-track {
        flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente línea */
        justify-content: center; /* Centra las imágenes en la galería */
    }

    .carousel-track img {
        width: calc(33.333% - 11px); /* Mantiene 3 imágenes por fila con el gap */
    }
}

@media (min-width: 1400px) {
    .header-logo-main {
        height: 66px; /* Aumenta el tamaño del logo en un 10% para pantallas grandes */
    }
}