/**Paleta de colores**/
:root{
    --blanco: #ffffff;
    --negro: #212121;
    --grisClaro: #979797;
    --verdeOscuro: #097A00;
    --primario: #00A859;
    --secundario: #32FF2D;
}

html{
        font-size: 62.5%; /**Hace que 1rem=10px**/
        box-sizing: border-box;
        scroll-snap-type: y mandatory;
    }
        *, *:before, *:after {
        box-sizing: inherit;
    }

body{
    font-size: 16px; /**Hace que 1rem=10px**/
    font-family: "Bricolage Grotesque", sans-serif;
   background-image: linear-gradient(to top, var(--negro) 0%,var(--verdeOscuro)20%, var(--primario) 60%, var(--blanco)98.5%) ;
}

/**Botón en cascada**/
/* Asegura que el nuevo botón se alinee perfectamente con los otros enlaces <a> */
.navegacion-principal {
  display: flex;
  align-items: center;
}

/* Contenedor del menú */
.menu-desplegable {
  position: relative;
  display: inline-block;
}

/* El botón principal copia el estilo de tus enlaces de la barra */
.btn-principal {
  background: none;
  border: none;
  font-family: inherit; 
  font-size: inherit; /* Hereda el tamaño de tus otros enlaces */
  color: inherit;     /* Hereda el color de tus otros enlaces */
  cursor: pointer;
  padding: 0;
}

/* Estilo y ocultamiento de la cascada */
.cascada {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  background-color: var(--verdeOscuro); /* Fondo del menú desplegable */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 10;
  margin-top: 5px;
  
  /* Animación suave */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Muestra la cascada al pasar el cursor */
.menu-desplegable:hover .cascada {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Estilo de los enlaces de adentro de la cascada */
.cascada a {
  padding: 12px 20px;
  color:var(--negro); /* Texto oscuro para que se lea sobre el fondo blanco */
  text-decoration: none;
  text-align: left;
  font-size: 15px;
  transition: background-color 0.2s;
}

/* Efecto hover para las opciones de la cascada */
.cascada a:hover {
  background-color: var(--blanco);
  color: var(--negro);
}


/**Estilo del html de cursos**/
.cuerpo-cursos {
     font-size: 1.6rem;
     line-height: 1.5;
}
 .parrafo-cursos{
     font-size: 1.8rem;
     color: var(--blanco)
 }

 .img-cursos{
    max-width: 100%;
 }

 .contenedor-cursos {
    max-width: 120rem;
    margin: 0 auto;
 }
 .header-cursos h1{
    text-decoration: none;
 }

 .img-curso{
    cursor: pointer;
 }  /* Termina estilos*/

 /* Aquí empieza el de la ventana*/
  /* Ocultamos por completo el checkbox original */
        .modal-estado {
            display: none;
        }
  /* --- 2. ESTILOS COMUNES DE LAS VENTANAS FLOTANTES --- */
        .modal-fondo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            
            /* Ocultas por defecto */
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-contenido {
            background-color: white;
            padding: 15px;
            border-radius: 10px;
            max-width: 700px;
            width: 95%;
            position: relative;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .modal-contenido p{
            line-height: 1.2;
            text-align: left;
            font-size:medium;
        }

        .modal-contenido h2{
            font-weight: bold;
        }

        .boton-cerrar {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 30px;
            cursor: pointer;
            color: #333;
            line-height: 1;
        }

        .boton-cerrar:hover {
            color: red;
        }

        /* --- 3. LÓGICA DE APERTURA PARA LOS 6 MODALES --- */
        /* Si cualquiera de los 6 inputs se marca, muestra su respectivo fondo hermano */
        #img1:checked ~ #modal1,
        #img2:checked ~ #modal2,
        #img3:checked ~ #modal3,
        #img4:checked ~ #modal4,
        #img5:checked ~ #modal5,
        #img6:checked ~ #modal6 {
            opacity: 1;
            pointer-events: auto;
        }

/* Aquí termina el de la ventana */
@media (min-width: 650px) {
   .oferta-cursos{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items:center ;
    row-gap: 20px;
 }
}
    .oferta-cursos{
        display: grid;
        align-items: center;
        justify-items:center ;
        row-gap: 20px;
    }
    

 .separador__cursos{
    background-color: var(--primario);
    padding-top: 0%;
    color: var(--blanco);
 }

 .separador-avisos{
    background-color: var(--blanco);
    font-size: 25px;
    font-weight: bold;
 }

 .avisos-cursos{
    background-color: var(--blanco);
    padding: 2rem 1rem; /* Espaciado interno superior, inferior y lateral */
    
    /* Configuración Grid para distribución perfecta */
    display: grid; 
    grid-template-columns: 1fr; /* Una sola columna en celulares */
    gap: 2rem; /* Espacio uniforme entre las columnas */
    max-width: 1200px; /* Evita que se estire demasiado en pantallas gigantes */
    margin: 0 auto; /* Centra todo el bloque en la pantalla */
 }

/* Estilos para cada bloque de curso */
.avisos-cursos > div {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los títulos y listas internamente */
    text-align: left; /* Mantiene el texto de la lista alineado a la izquierda */
}


.avisos-cursos ul {
    line-height: 1.8; /* Interlineado más cómodo para leer */
    padding-left: 1.2rem; /* Espacio para que no se corten las viñetas */
    margin: 0;
}

/* Cambia a 3 columnas automáticas en pantallas medianas y grandes (Computadoras/Tablets) */
@media (min-width: 768px) {
    .avisos-cursos {
        grid-template-columns: repeat(2, 1fr); /* 3 columnas exactamente iguales */
    }
}


.titulo, .titulo__cursos{
       font-weight: bold;
       display: flex;
       justify-content: center;
       align-items: center;
}

 /**Aquí terminan estilos de cursos**/

/**Formato de encabezados**/
h1{
    text-align: center;
    font-size: 3.8rem;
}

h2{
    padding-top: 1rem;
    font-size: 2.8rem;
    text-align: center;
}

h3{
    font-size: 1.8rem;
    text-align: center;
}

/**Espacios del scroll

.filosofia-general, .titulo, .mapa {
    scroll-snap-align:center;
    scroll-snap-stop: always;
}

**/

.sombra{
    -webkit-box-shadow: -2px 5px 15px 0px rgba(144,147,152,0.5);
    -moz-box-shadow: -2px 5px 15px 0px rgba(144,147,152,0.5);
    box-shadow: -2px 5px 15px 0px rgba(144,147,152,0.5);
    background-color: var(--blanco);
    width: 100px;
    border-radius: 1rem;
}

.contenedor{
    width: auto;
    max-width: 100rem;
    margin: 0 auto;
    align-items: center;
}
@media (min-width: 650px) {
   .filosofia-general{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 1rem;
}
}


.filosofia{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.filosofia .iconos{
    height: 12rem;
    width: 12rem;
    background-color: var(--secundario);
    border-radius: 50%;  /**Círculo exacto**/
    display: flex;
    justify-content: center;
    align-items: center;
}

.filosofia h3{
    color: var(--primario);
    font-weight: 600;
}

.filosofia p{
    text-align: justify;
    margin: 2rem;
    line-height: 1.5;
}

.filosofia ul{
    margin-top: 1.5rem;
    line-height: 2.5;
    list-style-type:square;
}

.boton{
    background-color: var(--primario);
    color: var(--blanco);
    padding: 1rem 2rem;
    font-size: 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.5rem;
    text-align: center;
    border: none;
}

.boton-inicio{
    background-color: var(--primario);
    color: var(--blanco);
    padding: 1rem 2rem;
    font-size: 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 2rem;
    text-align: center;
    border: none;
}
/* Tu botón con los ajustes de centrado integrados */
.boton-horario {
    display: block;         /* Cambiado a block para que respete el centrado y los saltos de línea */
    width: max-content;     /* Hace que el botón se ajuste al tamaño exacto de su texto */
    margin: 0 auto 1rem auto; /* El 'auto' a los lados fuerza el centrado horizontal perfecto */
    
    background-color: var(--primario);
    color: var(--blanco);
    padding: 1rem 2rem;
    font-size: 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 1rem;
    text-align: center;
    border: none;
}

.boton-horario:hover {
    cursor: pointer;
    background-color: var(--secundario);
    color: var(--negro);
}

.boton-inicio:hover{
    cursor: pointer;
    background-color: var(--secundario);
    color: var(--negro);
}

.boton:hover{
    cursor: pointer;
    background-color: var(--secundario);
    color: var(--negro);
}

/** Navegación principal**/
.nav-bg{
background-color: var(--primario);
}

.navegacion-principal{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.navegacion-principal a{
    color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem;
}

/**a:hover es el evento que indica que se coloca el cursor sobre ese objeto**/
.navegacion-principal a:hover{
    background-color: var(--secundario);
    color: var(--negro);
}
/**
hover: poner el cursor sobre el objeto
visited: cuando ya se haya visitado el enlace
focus: es cuando se coloca sobre el elemento, útil para cuando se maneja con teclado
**/
@media(min-width: 600px){
    .navegacion-principal{
        flex-direction: row;
        justify-content:space-evenly;
    }
}
/**
.fachada {
background-image: url(../img/Fachada_escuela.jpg);
padding-top: 200px;
padding-bottom: 200px;
background-repeat: no-repeat;
background-size: cover;
position: relative
}
.fachada-dentro {
    position: absolute;
    background-color: rgba(0,0,0, 0.6); /**Transparencia anterior**/ /**
    background-color: rgb(0 0 0 / 60%);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lema {
    color: var(--blanco);
**/
    
.fachada {
  /* Eliminamos background-image porque ahora usaremos las etiquetas <img> */
  padding-top: 200px;
  padding-bottom: 200px;
  position: relative;
  overflow: hidden; /* IMPORTANTE: Oculta las imágenes que quedan fuera del cuadro */
}

/* NUEVO: Capa del carrusel que se mueve detrás de todo */
.carrusel-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%; /* 100% multiplicado por las 5 imágenes */
  height: 100%;
  display: flex;
  z-index: 1; /* Se coloca al fondo */
  animation: cambio-fachada 10s infinite; /* 5 segundos por imagen */
}

/* NUEVO: Estilos para que las imágenes ocupen todo el espacio sin deformarse */
.carrusel-fondo img {
  width: 20%; /* Cada imagen toma el 100% del ancho de .fachada (5 * 20% = 100%) */
  height: 100%;
  object-fit: cover; /* Hace el mismo efecto que background-size: cover */
}

/* Tu capa original intacta, solo agregamos z-index para asegurar que flote arriba */
.fachada-dentro {
  position: absolute;
  background-color: rgb(0 0 0 / 60%);
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2; /* IMPORTANTE: Se dibuja por encima de las imágenes del carrusel */
}

.lema {
  color: var(--blanco);
}

/* NUEVO: Animación para mover las imágenes cada 5 segundos */
@keyframes cambio-fachada {
  0%, 16%   { transform: translateX(0%); }
  20%, 36%  { transform: translateX(-20%); }
  40%, 56%  { transform: translateX(-40%); }
  60%, 76%  { transform: translateX(-60%); }
  80%, 96%  { transform: translateX(-80%); }
  100%      { transform: translateX(0%); }
}


.mapa {
    display: flex;
    justify-content: center;
    position:relative;
    width: 850px;
    height: 400px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

.mapa iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    border:0;
}

.contacto {
    display: flex;
    justify-content: right;
    padding-right: 1.5rem;
}
.regresar {
    display: flex;
    justify-content: center;
    padding-right: 1.5rem;
}
footer p{
    text-align: center;
    color: var(--blanco);
}

/** Estilo secundaria **/

.contenedor-principal-secundaria {
    display: flex;
    max-width: 120rem;
    margin: 0 auto;
    background-color: var(--blanco);
    border-radius: 1rem;
}

.menu-lateral {
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    background-color: var(--primario);
    width: 200px;
    flex-shrink: 0;
    overflow: hidden;
}

.contenido-derecha {
    flex-grow: 1;
    color: var(--negro);
    line-height: 1.3;
    padding: 1rem;
}

/* === CONTROL DE VISIBILIDAD === */

/* Oculta todas las secciones por defecto */
.seccion-contenido {
    display: none;
}

/* Muestra únicamente la sección que tenga la clase 'activa' */
.seccion-contenido.activa {
    display: block;
}

.seccion-contenido h1 {
    font-size: 3rem;
    margin-top: 0.2rem;
    font-weight: bold;
}

.servicios-secundaria{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}



/*Imágenes escolarizado*/
/* Contenedor del espacio disponible */
.contenedor-imagen {
    width: 100%;          /* Ocupa el 100% del ancho del bloque derecho */
    height: 100%;        /* Define una altura fija o máxima adecuada para tu diseño */
    background-color:var(--blanco); /* Fondo gris opcional por si la imagen es angosta */
    overflow: hidden;
}

/* Reglas mágicas para la imagen */
.imagen-ajustada {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Escala la imagen para que quepa entera sin deformar ni cortar */
    object-position: center; /* Centra la imagen en el espacio disponible */
}

/* Estilo escolarizado */
/* Estilo de horarios */
/* Estilo del contenedor de horarios */
.horarios {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* Centra los textos y elementos flex */
    text-align: center;
    margin: 1rem 0;        
}

.horarios p {
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1.5rem; /* Espacio entre el texto y el primer botón */
}

/* Apuntar directamente a los enlaces/botones dentro del contenedor */


/* Pantallas medianas y grandes (computadoras y tablets) */
/* Pantallas medianas y grandes (computadoras y tablets) */
@media (min-width: 768px) {
    .boton-horario {
        display: inline-block; /* Los coloca uno al lado del otro en pantallas grandes */
        margin: 0 0.75rem;     /* Separa los botones de forma horizontal en PC */
    }
    .horarios{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: center;
    }
}

.boton-avisos{
   margin: 1rem 0;  
}

.horarios-primaria p{
    text-align: center;
    line-height: 1.5;
}

.horarios-primaria {
    display:grid;
    grid-template-columns: 1fr;
    justify-content:space-between;
    justify-items: center;
}


@media (min-width: 768px) {
  .horarios-primaria {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: center;
    }
}

.modelo-pedagogico {
  padding: 1rem 1.5rem; /* Ajuste de márgenes laterales cómodos */
  display: grid;
  grid-template-columns: 1fr; /* Una sola columna para que no se desborde */
  gap: 1.5rem; /* Espacio vertical entre los bloques */
  max-width: 80rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .modelo-pedagogico {
        padding: 0rem 4rem 0rem 1rem;
        grid-template-columns: 30% 70%; /* Estilo de dos columnas en pantallas anchas */
        max-width: 100rem;
        gap: 0rem 1.5rem;
    }
}

/* Estilo base para celulares (Pantallas pequeñas) */
.pilares {
  padding: 1rem 1.5rem; /* Ajuste de márgenes laterales cómodos */
  display: grid;
  grid-template-columns: 1fr; /* Una sola columna para que no se desborde */
  gap: 1.5rem; /* Espacio vertical entre los bloques */
  max-width: 80rem;
  margin: 0 auto;
}

/* Pantallas medianas y grandes (computadoras y tablets) */
@media (min-width: 768px) {
  .pilares {
    padding: 0rem 4rem 0rem 1rem;
    grid-template-columns: 20% 80%; /* Dos columnas solo en pantallas anchas */
    max-width: 100rem;
    gap: 0rem 1.5rem;
  }
}

.avisos-escolarizado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
  .avisos-escolarizado {
    flex-direction: row;
    justify-content: space-evenly;
    }
    }