/* Estilos base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    color: #333;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s ease-in;
}

/* Efectos hover */
.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.05);
}

/* Estilos para la tipografía en español */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Colores temáticos mexicanos */
.bg-mexican-red {
    background-color: #E53E3E;
}

.text-mexican-red {
    color: #E53E3E;
}

.bg-mexican-yellow {
    background-color: #F6AD55;
}

.text-mexican-yellow {
    color: #F6AD55;
}

/* Estilos para botones */
.btn-mexican {
    background-color: #E53E3E;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-mexican:hover {
    background-color: #C53030;
    transform: translateY(-2px);
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .mobile-flex-col {
        flex-direction: column;
    }
}