body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f4f6f8;
    /* NUEVO FONDO GENERAL */
    background-image: url('fondo_web.png');
    background-repeat: repeat;
    background-attachment: fixed; /* Efecto elegante al hacer scroll */
    background-position: center;
    color: #333;
    -webkit-tap-highlight-color: transparent;
}

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.animate-in { animation-duration: 0.3s; animation-fill-mode: both; }
.fade-in { animation-name: fadeIn; }
.slide-in { animation-name: slideInRight; }
.zoom-in { animation-name: zoomIn; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0056b3; }

/* Optimizaciones para Móviles (Responsive) */
@media (max-width: 768px) {
    /* Optimizar títulos de sección */
    .menu-section {
        margin-bottom: 32px !important;
    }
    .section-header {
        margin-bottom: 16px !important;
    }
    .section-title {
        font-size: 1.25rem !important; /* Más proporcionado en móvil */
    }

    /* Reducir altura de las imágenes de las tarjetas */
    .product-img-wrapper {
        aspect-ratio: auto !important;
        height: 180px !important; /* Limite de altura fijo en celulares */
    }
    .product-img-wrapper img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Tarjetas más compactas */
    .product-info {
        padding: 12px !important; /* Reducción de espacios blancos */
    }
    .product-title {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    .product-desc {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }
    .product-footer {
        margin-top: 10px !important;
    }
    .product-price {
        font-size: 16px !important; /* Precio más ajustado */
    }
    .product-add-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }
}