/* Estilos personalizados para complementar Tailwind */

/* Animaciones suaves al cargar */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Scroll suave para toda la página */
html {
    scroll-behavior: smooth;
}

/* Estilos para el menú móvil */
.mobile-link {
    position: relative;
}

.mobile-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #2DD4BF; /* mint */
    transition: width 0.3s ease;
}

.mobile-link:hover::after {
    width: 100%;
}

/* Navbar transparente a sólido */
.navbar-scrolled {
    background-color: rgba(248, 250, 252, 0.95); /* off-white con transparencia */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Ajustes específicos para el formulario */
input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2); /* ring-mint/20 */
}