/* Estilos para las secciones y animaciones de scroll */
html {
    scroll-behavior: smooth; /* Fallback para navegadores antiguos */
}

.hero,
.services,
.contact {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.hero.visible,
.services.visible,
.contact.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Asegurarnos de que las secciones tienen suficiente padding para el scroll */
section {
    scroll-margin-top: 80px; /* Ajusta este valor según la altura de tu navbar */
}

/* Animación de entrada para las secciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clase para activar la animación */
.animate {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Asegurar que el scroll es suave en dispositivos táctiles */
@media (hover: none) {
    html {
        scroll-behavior: auto;
    }
}