/* Importación de Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos personalizados */
body {
    font-family: 'Inter', sans-serif;
    margin-top: 0; /* Asegura que no haya margen en la parte superior del body */
    /* La línea de padding-top se ha comentado/eliminado como solicitaste */
}

/* Animación suave para el menú móvil */
#mobile-menu {
    /* Asegura que la transición funcione correctamente con position: absolute */
    transition: transform 0.3s ease-in-out; /* Eliminado top de la transición ya que no se usa */
}

/* Clase para controlar la visibilidad y posición del menú móvil */
/* Se ajusta el valor de ocultamiento para asegurar que no se vea */
#mobile-menu:not(.is-open) {
    transform: translateY(-100%); /* Oculta el menú completamente */
}
#mobile-menu.is-open {
    transform: translateY(0); /* Muestra el menú */
}


/* Fondo para la sección principal (Hero) */
.hero-bg {
    /* Reemplazar con una imagen real del colegio para mejor impacto */
    background-image: url('img/FachadaColegio.jpg');
    background-size: cover;
    background-position: center;
    /* Se quita background-attachment: fixed si causa problemas con el header fijo */
    /* background-attachment: fixed; */
}

/* Estilo para enlaces activos en la navegación (ejemplo) */
.nav-link-active {
    font-weight: 700;
    border-bottom: 2px solid #3b82f6; /* Azul como ejemplo */
}

/* Estilo base para botones */
.btn {
    @apply inline-block px-6 py-3 rounded-lg shadow-md text-white font-semibold transition duration-300 ease-in-out;
}

/* Estilo para botón primario */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700;
}

/* Estilo para botón secundario */
.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700;
}

/* Asegurar que el footer quede abajo (ya estaba bien) */
html, body {
    min-height: 100%; /* Usar min-height en lugar de height */
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

/* Animación para iconos al pasar el ratón */
.icon-animated {
    display: inline-block; /* Asegura que la transformación funcione */
    transition: transform 0.3s ease-in-out; /* Añade una transición suave */
}

/* Animación para imágenes al pasar el ratón */
.image-animated {
    display: inline-block; /* Asegura que la transformación funcione */
    transition: transform 0.3s ease-in-out; /* Añade una transición suave */
}

/* Las animaciones de hover (scale) se manejan con clases de Tailwind en el HTML */
/* No se necesitan reglas CSS adicionales aquí para eso */

/* --- Corrección para títulos cortados por el header fijo --- */
/* Añade un margen superior a las secciones que son destino de los enlaces del menú
   para que el header fijo no cubra el título al hacer scroll.
   Ajusta este valor (ej. 6rem) según la altura real de tu header. */
#inicio, /* Incluir #inicio también si se enlaza a él desde fuera de la página */
#nosotros,
#oferta,
#vida,
#admisiones,
#comunidad,
#contacto,
#testimonios { /* Incluir todas las secciones a las que se podría enlazar */
    scroll-margin-top: 6rem; /* Valor de ejemplo, ajusta si es necesario */
}

/* Estilos para el mensaje del formulario */
.bg-green-100 { background-color: #d1fae5; } /* Tailwind green-100 */
.text-green-700 { color: #047857; } /* Tailwind green-700 */
.bg-red-100 { background-color: #fee2e2; } /* Tailwind red-100 */
.text-red-700 { color: #b91c1c; } /* Tailwind red-700 */