/* estilos.css */

body {
    margin: 0;
    font-family: sans-serif; /* Puedes cambiar la fuente si lo deseas */
}

.hero {
    background-image: url('fondo-hero.jpg'); /* Reemplaza 'fondo-hero.jpg' con el nombre de tu archivo */
    background-size: cover; /* Cubre todo el espacio del contenedor */
    background-position: center; /* Centra la imagen */
    color: #ffffff; /* Color del texto blanco */
    height: 500px; /* Altura de la sección principal (ajustable) */
    display: flex;
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    text-align: center; /* Centra el texto dentro del contenedor */
}

.hero-content {
    max-width: 800px; /* Ancho máximo del contenido */
    padding: 20px;
}

.hero-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px #000000; /* Añade una sombra negra sutil */
}

.button {
    display: inline-block;
    background-color: #e4ac36; /* Color dorado del botón */
    color: #2a344e; /* Color del texto del botón azul oscuro */
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.button:hover {
    background-color: #fecd29; /* Un tono de dorado más claro al pasar el ratón */
}

/* Estilos para la sección de pilares */

.pillars {
    padding: 40px 20px; /* Espacio superior, inferior y a los lados */
    background-color: #f9f9f9; /* Un fondo gris claro para diferenciar la sección */
}

.pillar-container {
    /* ... otras propiedades */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Reduce el ancho mínimo a 200px */
    /* ... */
}

.pillar {
    background-color: #ffffff; /* Fondo blanco para cada bloque */
    padding: 30px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Centra el contenido dentro de cada bloque */
}

.pillar h3 {
    color: #2a344e; /* Color del título azul oscuro */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
}

.pillar-icon {
    width: 40px; /* Tamaño del icono */
    height: 40px;
    margin-bottom: 15px; /* Espacio entre el icono y el título */
    color: #e4ac36; /* Color dorado institucional para los iconos */
    display: block; /* Para centrar el icono */
    margin-left: auto;
    margin-right: auto;
}

.pillar p {
    color: #555; /* Color del texto gris oscuro */
    font-size: 1em;
    line-height: 1.6;
}
/* Estilos para la sección de metodología */

.methodology {
    padding: 40px 20px;
    background-color: #ffffff; /* Un fondo blanco para diferenciarla */
    text-align: center; /* Centra el contenido general de la sección */
    opacity: 0; /* Inicialmente la sección estará invisible */
    transform: translateY(50px); /* Inicialmente estará desplazada 50px hacia abajo */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transición suave para la opacidad y la transformación */
}

.methodology.visible {
    opacity: 1; /* Cuando la clase 'visible' se añada, la sección será completamente visible */
    transform: translateY(0); /* Y estará en su posición original */
}

.methodology-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.methodology-item {
    background-color: #f0f0f0; /* Un fondo gris claro para los bloques */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.methodology-item h3 {
    color: #e4ac36; /* Color dorado para los títulos */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
}

.methodology-item p {
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

/* Estilos visuales diferentes para cada bloque */

.methodology-interactive-classes {
    background-color: #e9f7f2; /* Un tono verde claro */
}

.methodology-personalized-teaching {
    background-color: #fde9e9; /* Un tono rojo claro */
}

.methodology-creative-projects {
    background-color: #f3e9f7; /* Un tono morado claro */
}

.methodology-collaborative-community {
    background-color: #e9eff7; /* Un tono azul claro */
}
/* Estilos para la sección Sobre Nosotros */

.about-us {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Un fondo gris claro para destacar la sección */
    text-align: center;
}

.about-us-container {
    max-width: 800px;
    margin: 0 auto;
}

.about-us h2 {
    color: #2a344e; /* Color azul oscuro para el título */
    font-size: 2.5em;
    margin-bottom: 30px;
}

.about-us h3 {
    color: #e4ac36; /* Color dorado para los subtítulos */
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 15px;
}

.about-us p {
    color: #555;
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 20px;
}

.about-us ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.about-us li {
    color: #555;
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 10px;
}

.about-us li strong {
    color: #2a344e; /* Resaltar el nombre del valor */
    font-weight: bold;
}