/* Estilos base */
body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Compensar altura del header fixed al hacer scroll a secciones */
html {
    scroll-padding-top: 100px; /* Altura del header + espacio extra */
}

* {
    box-sizing: border-box;
}

/* Animación del botón del carrito */
#cart-button {
    transition: transform 0.2s ease-in-out;
}

/* Tema oscuro - variables CSS */
:root {
    --bg-primary: theme('colors.gray.50');
    --bg-card: theme('colors.white');
    --text-primary: theme('colors.gray.900');
    --text-secondary: theme('colors.gray.600');
    --border-color: theme('colors.gray.200');
}

.dark {
    --bg-primary: theme('colors.gray.900');
    --bg-card: theme('colors.gray.800');
    --text-primary: theme('colors.gray.100');
    --text-secondary: theme('colors.gray.300');
    --border-color: theme('colors.gray.700');
}

/* Transiciones suaves para tema */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Animaciones del carrito */
.cart-count {
    animation: bounce 0.3s;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Modal backdrop blur */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Mobile: show hero image from center right and keep overlay transparent */
@media (max-width: 640px) {
    #hero-section {
        /* Mostrar la imagen empezando un poco antes del centro (30px a la izquierda del centro) */
           background-position: calc(50% - 110px) calc(70% - 60px) !important;
           background-size: cover;
           background-repeat: no-repeat;
    }
    #hero-section .absolute.inset-0 {
        background: transparent !important;
        opacity: 0 !important;
    }
}