body { 
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Color de fondo principal */
    color: #1e1e1c;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el cuerpo ocupe al menos el 100% de la altura de la ventana */
}

header {
    background-color: #d32626; /* Color de fondo del header */
    position: relative; /* Necesario para el posicionamiento del logo */
}

.header-container {
    display: flex;
    align-items: center; /* Alinea el logo y el texto verticalmente */
    padding: 10px 20px;
}

.logo-container {
    flex: 0 0 80%; /* Ocupa el 80% del ancho para el logotipo */
    position: absolute; /* Permite que el logo sobresalga */
    left: 20px; /* Alineación izquierda */
    top: -20px; /* Mueve el logo hacia arriba */
}

.logo {
    max-width: 75%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.header-text {
    flex: 1; /* Ocupa el ancho restante */
    text-align: center; /* Centra el texto */
}

.colegio-nombre {
    font-size: 36px; /* Tamaño de fuente más grande */
    color: #feed01; /* Color del nombre del colegio */
    font-weight: bold; /* Hacer la fuente más gruesa */
    font-family: 'Georgia', serif; /* Fuente más formal */
    margin: 10px 0; /* Añade margen para separación */
}

.menu {
    background-color: #ffffff; /* Color gris claro para la barra de menú */
    width: 100%; /* Asegura que la barra de menú abarque toda la línea */
    padding: 10px 0; /* Espaciado vertical para el menú */
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Alinear el menú a la derecha */
    margin: 0; /* Eliminar margen para alinear mejor */
}

nav ul li {
    margin: 0 15px;
    position: relative; /* Necesario para el submenú */
}

nav ul li a {
    text-decoration: none;
    color: #ce3838; /* Color verde para el texto del menú */
    font-weight: bold; /* Hace el texto en negrita */
    transition: color 0.3s, font-weight 0.3s; /* Efecto suave al pasar el cursor */
}

nav ul li a:hover {
    color: #c26868; /* Cambia a color #68a5c2 al pasar el cursor sobre el menú */
}

.submenu {
    display: none; /* Oculta el submenú por defecto */
    position: absolute; /* Posiciona el submenú relativo al elemento padre */
    top: 100%; /* Posiciona debajo del menú principal */
    left: 0;
    background-color: #e0e0e0; /* Color de fondo gris del submenú */
    padding: 0; /* Elimina el espaciado vertical */
    border-radius: 5px; /* Opcional: bordes redondeados */
    z-index: 1; /* Asegura que el submenú esté encima */
}

nav ul li:hover .submenu {
    display: block; /* Muestra el submenú al pasar el cursor */
}

.submenu li {
    margin: 0; /* Elimina margen para los elementos del submenú */
}

.submenu li a {
    display: block; /* Hace que el área clicable sea más grande */
    padding: 10px 15px; /* Espaciado interno */
    color: #333; /* Color de texto en el submenú */
    transition: background-color 0.3s; /* Efecto suave al pasar el cursor */
}

.submenu li a:hover {
    background-color: #c26868; /* Cambia el color de fondo a #68a5c2 al pasar el cursor */
    color: white; /* Cambia el color de texto a blanco al pasar el cursor */
}

main {
    padding: 20px;
    flex: 1; /* Permite que el main ocupe el espacio disponible */
}

.tarjetas {
    display: flex; /* Usar flexbox para organizar las tarjetas */
    gap: 20px; /* Espacio entre las tarjetas */
    height: 70%; /* Establece la altura de las tarjetas */
}

.tarjeta {
    background-color: #d44d4d; /* Color de fondo más oscuro para las tarjetas */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    flex: 1; /* Ocupa el espacio disponible */
}

#tarjeta1 {
    flex-basis: 35%; /* Tarjeta 1 ocupa el 35% */
}

#tarjeta1 h2 {
    text-align: center; /* Centrar el título */
    color: #2e7d32; /* Color verde más oscuro para el título */
    font-size: 28px; /* Aumentar el tamaño del título */
    margin-bottom: 15px; /* Espacio debajo del título */
}

#tarjeta1 div {
    font-size: 20px; /* Aumentar el tamaño del texto del contenido */
    line-height: 1.5; /* Mejora la legibilidad */
    text-align: justify; /* Justificar el texto del contenido */
}

#tarjeta2 {
    flex-basis: 75%; /* Tarjeta 2 ocupa el 75% */
    position: relative; /* Necesario para posicionar los elementos dentro */
}

.carousel {
    position: relative;
    height: 100%; /* Para que el contenido se ajuste a la tarjeta */
}

.carousel img {
    width: 100%; /* Ajusta la imagen al 100% del contenedor */
    border-radius: 10px; /* Bordes redondeados para la imagen */
}

#mensaje {
    position: absolute;
    bottom: 10px; /* Alinear el mensaje en la parte inferior */
    left: 0;
    right: 0;
    text-align: center; /* Centrar el mensaje */
    color: white; /* Color del mensaje */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para el mensaje */
    padding: 5px; /* Espaciado interno del mensaje */
}

.iconos {
    display: flex; /* Usa flexbox para organizar los iconos */
    justify-content: center; /* Centra los iconos en el contenedor */
    gap: 20px; /* Espacio entre los iconos */
    margin-top: 20px; /* Espacio arriba de los iconos */
    flex-direction: row; /* Coloca los iconos en fila */
}

.icono {
    text-align: center; /* Centra el texto debajo del icono */
}

.icono-circulo {
    width: 86px; /* Ancho de los iconos */
    height: 86px; /* Alto de los iconos */
    border-radius: 50%; /* Hace los iconos circulares */
    overflow: hidden; /* Esconde el desbordamiento */
    background-color: #e0e0e0; /* Color de fondo de los iconos */
    display: flex; /* Usa flexbox para centrar el contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    transition: background-color 0.3s, transform 0.3s; /* Efecto suave al pasar el cursor */
}

.icono:hover .icono-circulo {
    background-color: #d44d4d; /* Cambia el color de fondo a #68a5c2 al pasar el cursor */
    transform: rotate(360deg); /* Gira el icono 360 grados al pasar el cursor */
}

.icono img {
    max-width: 70%; /* Ajusta el tamaño de la imagen dentro del icono */
    max-height: 70%; /* Ajusta el tamaño de la imagen dentro del icono */
    object-fit: contain; /* Asegura que la imagen mantenga sus proporciones */
}

.icono-nombre {
    color: #333; /* Color del texto */
    font-weight: bold; /* Hace el texto en negrita */
    margin-top: 5px; /* Espacio entre el icono y el nombre */
}

h2 {
    color: #89bd54;
}

footer {
    text-align: left; /* Alinea el texto a la izquierda */
    background-color: #333232; /* Color de fondo del pie de página */
    color: #ffffff; /* Color de texto blanco */
    padding: 15px 20px; /* Espacio arriba y abajo del pie de página */
}

.contactos-footer {
    background-color: #e0e0e0; /* Color de fondo de la sección de contactos */
    padding: 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    margin-bottom: 10px; /* Espacio debajo de la sección de contactos */
}

.contactos-footer h2 {
    color: #c26868; /* Cambia el color de "Contactos Institucionales" */
}

.contactos-footer p {
    color: black; /* Color negro para el resto del texto */
    font-weight: bold; /* Texto en negrita */
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Alinea el logo y el texto en columnas */
        align-items: center; /* Centra los elementos */
    }

    .logo-container {
        position: relative; /* Asegura que el logo esté bien posicionado */
        top: 0; /* Restablece la posición del logo */
    }

    .menu {
        display: flex; /* Mantiene el menú horizontal */
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        width: 100%; /* Asegura que ocupe el 100% del ancho */
    }

    nav ul {
        flex-direction: column; /* Cambia a columna */
        align-items: center; /* Centra los elementos del menú */
    }

    .tarjetas {
        flex-direction: column; /* Apila las tarjetas en lugar de alinearlas en fila */
    }

    #tarjeta1, #tarjeta2 {
        flex-basis: 100%; /* Asegura que ocupen el ancho completo en pantallas pequeñas */
    }

    .iconos {
        flex-direction: column; /* Apila los iconos en lugar de alinearlos en fila */
        align-items: center; /* Centra los iconos */
    }

    .icono {
        margin-bottom: 20px; /* Añade espacio entre iconos */
    }
}
.submenu .submenu {
    display: none; /* Oculta el sub-submenú por defecto */
    position: absolute; /* Posiciona el sub-submenú relativo al elemento padre */
    top: 0; /* Alinea al mismo nivel que el elemento padre */
    left: 100%; /* Mueve el sub-submenú a la derecha */
    background-color: #e0e0e0; /* Color de fondo del sub-submenú */
    padding: 0; /* Elimina el espaciado vertical */
    border-radius: 5px; /* Bordes redondeados */
    z-index: 1; /* Asegura que esté encima */
}