/* --- TUS VARIABLES Y ESTILOS ORIGINALES (MANTENIDOS) --- */
:root {
    --primary: #25D366;
    --accent: #E67E22;
    --background-light: #FCF9F2;
    --charcoal: #121417;
    --terracotta: #D35400;
    /* Nueva variable mantenida */
    /* Sombras originales del HTML */
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -6px rgba(0, 0, 0, 0.08);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Burbuja de WhatsApp Estilizada (Nueva) */
.whatsapp-bubble {
    position: relative;
    background: #E1FFC7;
}

.whatsapp-bubble::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid #E1FFC7;
    border-bottom: 10px solid transparent;
}

/* Ocultar items marcados para eliminación (Nueva) */
.order-item:has(input[type="checkbox"]:checked) {
    display: none;
}

/* Gradiente del Header */
.hero-gradient {
    background: linear-gradient(to bottom, rgba(18, 20, 23, 0.2), rgba(18, 20, 23, 0.75));
}

/* Lógica del Carrito (Hover y Animación) */
.cart-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group-hover-cart:hover .cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Scrollbar Personalizado del sitio */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #fdfaf3;
}

::-webkit-scrollbar-thumb {
    background: #E67E22;
    border-radius: 20px;
    border: 3px solid #fdfaf3;
}

/* Suavizado de scroll */
html {
    scroll-behavior: smooth;
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-pupu-card {
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes pupuEntry {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-pupu-entry {
    animation: pupuEntry 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}