/* ================================================================ */
/* ARCHIVO: assets/css/main.css (Sistema de Diseño Completo)      */
/* ================================================================ */

/* --- ESTILOS BASE --- */
body {
    font-family: 'Poppins', sans-serif; 
    color: #374151; /* gray-700 - Color por defecto para texto narrativo */
}

/* --- CLASES DE UTILIDAD PERSONALIZADAS CON @layer --- */
/* Usamos @layer para que Tailwind pueda optimizar estas clases y respetar el orden */

@layer base {
    /* Estilos base para textos narrativos y titulares */
    /* Aplica la clase 'prose-podofam' a un div contenedor para estilizar párrafos, listas, etc. */
    .prose-podofam {
        @apply text-lg text-gray-600 leading-relaxed;
    }
    .prose-podofam h1, 
    .prose-podofam h2, 
    .prose-podofam h3 {
        @apply text-gray-800 font-bold;
    }
}

@layer components {

    /* ============================ */
    /* PALETA DE COLORES DE MARCA   */
    /* ============================ */

    /* --- Fondos (Backgrounds) --- */
    .bg-brand-azul { background-color: #22356C; }
    .bg-brand-gris { background-color: #E5E5E5; }
    .bg-brand-verde { background-color: #ABC434; }
    .bg-brand-turquesa { background-color: #00E6E6; }

    /* --- Textos --- */
    .text-brand-azul { color: #22356C; }
    .text-brand-verde { color: #ABC434; }
    .text-brand-turquesa { color: #00E6E6; }
    /* Para textos sobre fondos oscuros (ej. sobre bg-brand-azul) */
    .text-on-dark { color: #F9FAFB; } /* gray-50 */
    /* Para textos sobre fondos de acento (ej. sobre bg-brand-verde) */
    .text-on-accent { color: #111827; } /* gray-900 */


    /* ============================ */
    /* SISTEMA DE BOTONES (CTA)     */
    /* ============================ */

    /* --- Botón Principal (Azul oscuro, texto blanco) --- */
    .btn-principal {
        @apply inline-block font-bold text-white bg-brand-azul rounded-full py-3 px-8 transition duration-300;
        white-space: nowrap; /* Evita que el texto se parta */
    }
    .btn-principal:hover {
        @apply bg-blue-800; /* Un azul un poco más oscuro de Tailwind para el hover */
    }

    /* --- Botón de Acento (Verde, texto oscuro) --- */
    .btn-acento {
        @apply inline-block font-bold text-on-accent bg-brand-verde rounded-full py-3 px-8 transition duration-300;
        white-space: nowrap;
    }
    .btn-acento:hover {
        background-color: #9eb32e; /* Un verde ligeramente más oscuro para el hover */
    }

    /* --- Botón Secundario (Borde Azul, fondo transparente) --- */
    .btn-secundario {
        @apply inline-block font-bold text-brand-azul bg-transparent border-2 border-brand-azul rounded-full py-3 px-6 transition duration-300;
        white-space: nowrap;
    }
    .btn-secundario:hover {
        @apply bg-brand-azul text-white;
    }


    /* ============================ */
    /* OTROS COMPONENTES            */
    /* ============================ */

    /* Clase para textos importantes o destacados */
    .texto-importante {
        @apply text-brand-azul font-semibold;
    }

    /* Clase de utilidad para evitar saltos de línea (la mantenemos de tu código original) */
    .btn-no-wrap {
        white-space: nowrap;
    }
}


/* ================================================================ */
/* CÓDIGO ORIGINAL (MANTENIDO ÍNTEGRAMENTE)                      */
/* ================================================================ */

/* Animaciones para el modal y notificaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }

/* Por defecto, la imagen de fondo está centrada */
.bg-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 
    Regla @media para el fondo del hero en la página "About"
    (Mantenida de tu código original)
*/
@media (max-width: 640px) { /* Corresponde al breakpoint 'sm' de Tailwind */
    .hero-background-image {
        background-size: 150% auto; /* Zoom a la imagen */
    }
}