body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
.hero-gradient-blue {
    /* Utiliza las variables de color de Tailwind definidas en el JS */
    background: linear-gradient(135deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
}
.feature-image-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.feature-image-card:hover {
    transform: translateY(-10px);
    /* Asegúrate que 'zaha-blue-rgb' esté definido en tu config de Tailwind para que esto funcione */
    box-shadow: 0 20px 30px -10px rgba(var(--tw-color-zaha-blue-rgb), 0.2);
}


/* ELIMINADO: .mobile-menu-custom ya no es necesario con los ajustes directos en el HTML */

.btn-shine:hover {
    background-size: 200% auto;
    background-position: right center;
}

.md\:my-12{
    margin-top: 1rem!important;
        margin-bottom: 1rem!important;
}

/* Estilos para el Menú Móvil */
#mobile-menu {
    /* La transición es manejada por las clases de Tailwind en el HTML. */
    /* Añadimos will-change para optimizar el rendimiento de la animación. */
    will-change: transform, opacity;
}
#mobile-menu.hidden-menu {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
#mobile-menu:not(.hidden-menu) {
    transform: translateX(0);
    opacity: 1;
}

/* Estilos para el botón de hamburguesa y su transformación a X */
#mobile-menu-button .icon-bar {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.2s ease-in-out;
}
#mobile-menu-button.open .icon-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#mobile-menu-button.open .icon-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
#mobile-menu-button.open .icon-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hero-image-container img {
    max-height: 520px;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.hero-image-animate {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInFromRight 0.8s 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes slideInFromRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.hero-text-animate {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInFromBottom 0.7s 0.1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes slideInFromBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para la barra de promoción */
#promo-banner {
    transition: max-height 0.5s ease-in-out, padding-top 0.5s ease-in-out, padding-bottom 0.5s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
}
.promo-banner-hidden {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
}

@media (min-width: 768px) {
    .md\:py-32 { /* Hero section */
        padding-top: 3rem!important;
        padding-bottom: 8rem;
    }

    .py-24{ /* Contact section */
        padding-top: 2rem!important;
        padding-bottom: 6rem;
    }
}

/* Clase para el enlace activo */
.nav-active {
    background-color: #0A74DA; /* zaha-blue */
    color: white !important; /* !important para asegurar que sobreescriba el color de texto de Tailwind */
    padding:10px!important;
}

/* Para móvil, cuando .nav-active está en .mobile-menu-link */
.mobile-menu-link.nav-active {
    padding-left: 1.5rem!important; /* px-6, igual que el padding del contenedor de enlaces */
    padding-right: 1.5rem!important; /* px-6 */
    margin-left: -1.5rem!important; /* Compensar padding para que el fondo ocupe todo el ancho disponible */
    margin-right: -1.5rem!important; /* Compensar padding */
    border-radius: 0rem!important; /* rounded-lg o el que prefieras */
}

.p-5 {
    padding:1.1rem!important;
}

.nav-active-desktop { /* Específico para desktop para añadir padding y border-radius */
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem; /* px-3 */
    padding-top: 0.25rem; /* py-1 */
    padding-bottom: 0.25rem; /* py-1 */
    border-radius: 0.375rem; /* rounded-md */
}

/* Utilidad para la animación del menú (ya incluida en Tailwind, pero por si acaso) */
.ease-cubic-bezier {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}