/* style.css */

/* Animación simple para el Hero Section */
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInFromBottom 1s ease-out forwards;
    opacity: 0; /* Asegura que esté oculto antes de la animación */
}

.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }

/* Asegurar que el scroll suave funcione bien */
html {
    scroll-behavior: smooth;
}

/* Estilo para el menú móvil deslizable desde abajo (el overlay completo) */
#mobile-menu {
    transform: translateY(100%); /* Oculto por defecto, fuera de la vista */
}

#mobile-menu.is-active {
    transform: translateY(0); /* Visible, desliza hacia arriba */
}

/* --- Nuevos estilos para la barra de navegación inferior en móvil --- */
/* Esta clase 'mobile-bottom-nav' se aplicaría a un nuevo elemento DIV en el HTML */
/* que contendría el botón de menú y quizás otros enlaces rápidos */
@media (max-width: 767px) { /* Se aplica solo en pantallas pequeñas (hasta 'md' de Tailwind) */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #2F6C50; /* primary-green definido en tailwind.config.js */
        color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 1rem 0;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
        z-index: 40; /* Asegura que esté sobre el contenido principal, pero debajo del menú overlay (z-50) */
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .mobile-bottom-nav .nav-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white; /* Color del icono y texto */
        font-size: 0.875rem; /* Tamaño de fuente para el texto bajo el icono */
        transition: color 0.3s ease;
    }

    .mobile-bottom-nav .nav-icon i {
        font-size: 1.5rem; /* Tamaño del icono */
        margin-bottom: 0.25rem;
    }

    .mobile-bottom-nav .nav-icon:hover {
        color: #8DC63F; /* accent-green al pasar el mouse */
    }

    /* Ocultar el botón de hamburguesa original en el header para móviles
       ya que ahora estará en la barra inferior */
    header .md\:hidden {
        display: none;
    }

    /* Para asegurar que el contenido no quede oculto detrás de la barra inferior */
    body {
        padding-bottom: 5rem; /* Ajusta este valor según la altura de tu barra inferior */
    }
}


/* Opcional: Estilos para la barra de desplazamiento (personalizable) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}