/* Fuentes cargadas desde index.html para mayor rendimiento */
:root {
    --primary-color: #e60000;
    --bg-color: #080808;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* Definición de Capas (Stacking Contexts) */
    --layer-c1: 10;   /* Fondo y Decoraciones */
    --layer-c2: 100;  /* Interfaz (Menú, Videos, Buscador, Botón Carrito) */
    --layer-c3: 1000; /* Popups, Sidebar Carrito, Modals */
}

.banner-card {
    max-width: 350px !important;
    margin: -55px auto 0px !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    touch-action: auto !important;
    pointer-events: auto !important;
}

.banner-card.hidden {
    display: none !important;
}

.promo-banner-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    touch-action: auto !important;
    pointer-events: auto !important;
}

.promo-banner-section .banner-card {
    margin-top: -55px !important;
    margin-bottom: 0px !important;
}

/* Optimización de Banners para PC */
@media (min-width: 768px) {
    .promo-banner-section {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        gap: 30px !important; /* Espacio entre las dos tarjetas */
    }

    .promo-banner-section .banner-card {
        flex: 1 !important;
        max-width: 500px !important;
        margin: 20px 0 !important; /* Ajuste de margen para desktop */
    }
}

.banner-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Asegura respuesta táctil instantánea en móviles (elimina delay de 300ms) */
button, a, input, select, textarea {
    touch-action: manipulation;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    margin: 0; 
    padding: 0; 
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic height para móviles */
    scroll-behavior: smooth; 
    background-color: #080808;
    image-rendering: -webkit-optimize-contrast;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #1a0000 0%, var(--bg-color) 100%);
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}


.contenedor-logo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, #1a0000 0%, #080808 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: calc(var(--layer-c3) + 500); /* Preloader siempre al frente */
}

.logo-animado {
    width: 80%;
    max-width: 250px;
    border-radius: 50%;
    animation: latido 1.8s ease-in-out infinite; /* Sincronizado con el ritmo del preloader */
    will-change: transform;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.background-decor {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--layer-c1);
    pointer-events: none;
    opacity: 0.2;
}

.corner-item {
    position: absolute;
    filter: none !important;
    animation: flotar 12s ease-in-out infinite;
    will-change: transform;
}

.papa-top-left { width: 280px; top: 5%; left: -60px; }
.papa-top-right { width: 240px; top: 20%; right: -50px; animation-delay: -3s; }
.burger-bottom-left { width: 300px; bottom: 10%; left: -70px; animation-delay: -6s; }
.nuggets-bottom-left { width: 280px; bottom: 20px; left: 20px; animation-delay: -4s; transform: rotate(-15deg); }
.plato-bottom-right { width: 350px; bottom: 2%; right: -90px; }

@keyframes flotar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-40px) rotate(8deg); }
}


.menu-container {
    opacity: 0;
    visibility: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding-top: calc(175px + env(safe-area-inset-top));
    padding-bottom: 0 !important;
    z-index: var(--layer-c2);
    transition: opacity 1s ease, visibility 1s;
    position: relative;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
}

/* Sobrescribir max-width para el menú fijo */
.sticky-nav {
    max-width: none !important;
    z-index: calc(var(--layer-c2) + 5) !important;
}

.mostrar-menu { 
    opacity: 1 !important; 
    visibility: visible !important; 
}

/* === NUEVA ESTRUCTURA DE HEADER CON TRES FILAS === */

/* Fila Superior: Logo y Carrito */
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 8px;
    width: 100%;
}

.menu-header-logo {
    width: clamp(45px, 10vw, 55px);
    height: auto;
    border-radius: 50%;
    border: none;
    box-shadow: none !important;
    object-fit: contain;
}

/* Carrito dentro del header (ya no es fixed) */
.header-top-row #cart-floating-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.header-top-row #cart-floating-btn:hover {
    background: rgba(255, 0, 0, 0.15) !important;
    border-color: rgba(255, 0, 0, 0.5) !important;
    transform: scale(1.05);
}

.header-top-row #cart-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    font-size: 0.75rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10 !important;
}

.header-top-row #cart-floating-btn .icono-moto {
    width: 26px !important;
    height: 26px !important;
    filter: brightness(0) invert(1) !important;
}

/* Fila Central: Barra de búsqueda */
.header-search-row {
    padding: 0 20px 10px;
    width: 100%;
}

.search-container-full {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.search-container-full .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.search-container-full .search-input {
    width: 100%;
    background: rgba(30, 30, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 25px !important;
    padding: 14px 20px 14px 48px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-family: var(--font-body) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.search-container-full .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-container-full .search-input:focus {
    outline: none !important;
    border-color: rgba(255, 0, 0, 0.4) !important;
    background: rgba(40, 40, 40, 0.9) !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Fila Inferior: Categorías horizontales */
.category-bar {
    display: flex;
    gap: 10px;
    padding: 0 20px 0;
    margin-bottom: 5px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    animation: slideHint 6s ease-in-out infinite;
    position: relative;
}

@keyframes slideHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

.category-bar::-webkit-scrollbar {
    display: none;
}

.category-btn {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: var(--font-body);
}

.category-btn svg {
    flex-shrink: 0;
}

.category-btn.active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(230, 0, 0, 0.3);
}

.category-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

/* === RESPONSIVE DESIGN PARA MÓVILES === */
@media (max-width: 480px) {
    .header-top-row {
        padding: 10px 15px 6px;
    }
    
    .menu-header-logo {
        width: 42px;
    }
    
    .header-top-row #cart-floating-btn {
        width: 44px !important;
        height: 44px !important;
    }
    
    .header-top-row #cart-floating-btn .icono-moto {
        width: 22px !important;
        height: 22px !important;
    }
    
    .header-top-row #cart-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.7rem !important;
    }
    
    .header-search-row {
        padding: 0 15px 8px;
    }
    
    .search-container-full .search-input {
        padding: 12px 16px 12px 42px !important;
        font-size: 0.9rem !important;
    }
    
    .search-container-full .search-icon {
        left: 14px;
    }
    
    .category-bar {
        padding: 0 15px 10px;
        gap: 8px;
    }
    
    .category-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    
    .category-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Estilos antiguos mantenidos para compatibilidad */
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

h1 { 
    font-family: var(--font-heading); 
    font-size: clamp(2rem, 10vw, 3.5rem); 
    margin-bottom: 0; 
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.seccion-titulo {
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    margin: 25px 0 15px;
    font-weight: 800;
    border-bottom: 2px solid rgba(230, 0, 0, 0.3);
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
}

.menu-item {
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 6px solid var(--primary-color);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    z-index: 5;
    touch-action: manipulation;
    /* Optimización Extrema Móvil: Solo renderiza lo que está en pantalla */
    content-visibility: auto;
    contain-intrinsic-size: 140px; /* Tamaño estimado de la tarjeta para que el scroll no salte */
}

/* Eliminar margin-bottom en pantallas con grid responsivo */
@media (min-width: 768px) {
    .menu-item {
        margin-bottom: 0;
    }
}

@media (hover: hover) {
    .menu-item:hover {
        transform: translateY(-8px) scale(1.02);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 30px rgba(230, 0, 0, 0.3);
    }
}

.menu-item:active {
    transform: scale(0.94) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.badge-new {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.badge-best {
    display: inline-block;
    background: #28a745;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.item-name { font-family: var(--font-heading); font-size: 1.6rem; color: var(--text-main); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

p, .item-desc { 
    color: var(--text-muted); 
    font-size: 0.9rem; 
    margin-top: 4px; 
    font-weight: 500;
    line-height: 1.6;
}

/* Contenedor para productos con doble imagen (Transiciones suaves) */
.menu-item-img-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-item-img-wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 1.2s ease-in-out;
    will-change: opacity;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    left: 0; top: 0; /* Asegura alineación perfecta */
}

.menu-item-img-wrapper img.img-back {
    opacity: 0;
}

/* Efecto en PC: Cambia al pasar el mouse */
@media (hover: hover) {
    .menu-item-img-wrapper:hover img.img-front { opacity: 0; }
    .menu-item-img-wrapper:hover img.img-back { opacity: 1; }
}

/* Animación automática para Celulares */
@keyframes fadeDoubleImg {
    0%, 35% { opacity: 1; }
    65%, 100% { opacity: 0; }
}

.item-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.item-price { 
    font-family: var(--font-heading); 
    font-size: 1.8rem; 
    color: var(--primary-color); 
    font-weight: bold; 
    line-height: 1;
    text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.3);
}

@media (max-width: 480px) {
    .menu-item { flex-direction: column; text-align: center; gap: 10px; padding: 15px 12px; margin-bottom: 15px; }
    
    .menu-item-img-wrapper {
        margin: 0 auto 5px;
        width: 80px;
        height: 80px;
    }

    .menu-item-img-wrapper img.img-front {
        animation: fadeDoubleImg 4s infinite alternate ease-in-out;
    }

    .menu-item-img-wrapper img.img-back {
        animation: fadeDoubleImg 4s infinite alternate-reverse ease-in-out;
    }

    .item-price-wrapper { align-items: center; }
    
    .papa-top-left { width: 150px; left: -30px; }
    .papa-top-right { width: 120px; right: -20px; }
    .burger-bottom-left { width: 150px; left: -40px; }
    .nuggets-bottom-left { width: 140px; left: 10px; bottom: 10px; }
    .plato-bottom-right { width: 180px; right: -40px; }

    .item-name { font-size: 1.4rem; }
    .item-price { font-size: 1.6rem; }
    
    .badge-new, .badge-best { font-size: 0.6rem; padding: 1px 6px; }

    .modal { padding: 10px 5px; }
    .modal-content { border-radius: 20px; }
    .modal-image-container { height: 160px; padding: 15px; }
    .modal-details { padding: 15px; }
    .modal-title { font-size: 1.8rem; }
    .modal-description { font-size: 0.9rem; margin-bottom: 15px; }
    .modal-main-qty { padding: 10px 15px; margin-bottom: 15px; }
    .extra-card { padding: 8px 12px; }
    .modal-price { font-size: 2.2rem; margin-bottom: 15px; }
    .btn-add-order { padding: 15px; font-size: 1.2rem; }
}

.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: var(--layer-c3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none !important;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 10px;
    overscroll-behavior: contain;
}

.modal:not(.active) {
    height: 0 !important;
    overflow: hidden !important;
}

.modal.active {
    display: flex !important;
}

.modal-content {
    background: #111;
    width: 95%;
    max-width: 450px;
    margin: auto;
    border-radius: 30px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    /* animation: zoomIn 0.3s ease-out; (Movida a las clases dinámicas de Framer) */
}

.clock-container {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    filter: drop-shadow(0 0 10px rgba(230, 0, 0, 0.5));
}

.clock-svg {
    width: 100%;
    height: 100%;
}

.clock-face {
    fill: rgba(255, 255, 255, 0.05);
    stroke: var(--primary-color);
    stroke-width: 4;
    animation: clockPulse 2s infinite ease-in-out;
}

.clock-hand {
    stroke: white;
    stroke-width: 4;
    stroke-linecap: round;
    transform-origin: 50px 50px;
}

.hour { animation: rotateClock 8s linear infinite; }
.minute { animation: rotateClock 2s linear infinite; }

.preparing-text {
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 600;
}

.preparing-text span {
    animation: dotBlink 1.4s infinite both;
}

.preparing-text span:nth-child(2) { animation-delay: 0.2s; }
.preparing-text span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBlink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}

@keyframes clockPulse {
    0%, 100% { stroke-opacity: 1; filter: drop-shadow(0 0 2px var(--primary-color)); }
    50% { stroke-opacity: 0.5; filter: drop-shadow(0 0 15px var(--primary-color)); }
}

@keyframes rotateClock {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.upsell-content {
    max-width: 380px;
    border: 2px solid var(--primary-color);
}

#btn-upsell-more {
    width: 100%;
    margin-top: 10px;
    font-size: 1.3rem;
    padding: 15px;
    background: #28a745;
    color: white;
    border: none;
    font-family: var(--font-heading);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    touch-action: manipulation;
}

#btn-upsell-cancel {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.3s;
}

@media (hover: hover) {
    #btn-upsell-add:hover, 
    #btn-upsell-more:hover, 
    #btn-upsell-cancel:hover,
    .btn-add-order:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(230, 0, 0, 0.5);
    }
}

.upsell-img {
    width: 80px;
    margin-bottom: 15px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) !important;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.close-modal {
    position: absolute;
    top: 20px; right: 20px;
    background: var(--primary-color);
    border: none;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    width: 45px; height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

@media (hover: hover) {
    .close-modal:hover { filter: brightness(1.2); transform: rotate(90deg); }
}

.modal-image-container {
    width: 100%;
    height: 250px;
    background: radial-gradient(circle, #222 0%, #080808 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.modal-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
}

.modal-details { padding: 30px; text-align: center; }
.modal-title { font-family: var(--font-heading); font-size: 2.2rem; margin-bottom: 10px; color: var(--text-main); }
.modal-description { 
    font-family: var(--font-body); 
    color: var(--text-muted); 
    font-size: 1rem; 
    line-height: 1.6; 
    margin-bottom: 25px; 
    font-weight: 500;
}

.modal-main-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 25px;
    border-radius: 20px;
    margin-bottom: 25px;
}

.qty-label { font-family: var(--font-heading); font-size: 1.2rem; }

.warning-box {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
    padding: 12px 15px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
    text-align: left;
    animation: zoomIn 0.3s ease;
}

.warning-icon { width: 18px; height: 18px; fill: #ff9800; flex-shrink: 0; margin-top: 2px; }
.warning-text { color: #ffbb33; font-size: 0.85rem; line-height: 1.4; font-weight: 400; }

.btn-variation-helper {
    background: transparent;
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 8px;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

@media (hover: hover) {
    .btn-variation-helper:hover {
        color: white;
    }
}

@keyframes highlightGlow {
    0%, 100% { box-shadow: 0 10px 20px rgba(230, 0, 0, 0.3); transform: scale(1); }
    50% { box-shadow: 0 0 30px rgba(230, 0, 0, 0.7); transform: scale(1.02); }
}

.btn-highlight { animation: highlightGlow 0.8s ease-in-out 3; }


.counter-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

.main-qty-btn {
    width: 35px; height: 35px;
    border-radius: 10px;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
}

#main-qty-val { font-family: var(--font-heading); font-size: 1.5rem; min-width: 25px; text-align: center; }

.modal-extras-container { text-align: left; margin-bottom: 25px; }
.extras-title { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 15px; color: var(--text-main); }

.extras-grid { display: flex; flex-direction: column; gap: 10px; }

.extra-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 20px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Asegura que los elementos hijos con position: absolute se posicionen correctamente */
    border: 1px solid rgba(255,255,255,0.05);
}

/* --- Estilos para Interruptores (Toggles) en Extras --- */
.extra-card[data-is-toggle="true"] {
    cursor: pointer;
    transition: background 0.3s ease;
}

.extra-card[data-is-toggle="true"]:hover {
    background: rgba(255, 255, 255, 0.06);
}

.toggle-switch {
    width: 44px;
    height: 24px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.toggle-indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #aaa;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado Activo (SÍ) para Toggles */
.extra-card.selected .toggle-switch {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.extra-card.selected .toggle-indicator {
    background: #ffffff;
    transform: translateX(20px);
}

 .extra-info-text { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
 .extra-name { font-weight: 600; flex: 1; line-height: 1.2; }
 .extra-cost { color: var(--primary-color); font-size: 0.85rem; margin-right: 12px; white-space: nowrap; text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.2); }

.extra-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    padding: 5px 10px;
    border-radius: 10px;
}

.extra-qty-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
}

.extra-qty-val { min-width: 20px; text-align: center; font-family: var(--font-heading); font-size: 1.1rem; }

.modal-price { display: block; font-family: var(--font-heading); font-size: 2.8rem; color: var(--primary-color); margin-bottom: 25px; font-weight: bold; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
.btn-add-order { width: 100%; background: var(--primary-color); color: white; border: none; padding: 20px; border-radius: 15px; font-family: var(--font-heading); font-size: 1.4rem; text-transform: uppercase; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(230, 0, 0, 0.3); }

#cart-floating-btn.cart-btn-hidden {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

.pulse-animation {
    animation: cartPulse 0.5s ease-in-out 2;
}

@keyframes cartPulse {
    0% { transform: scale(1.1); }
    50% { 
        transform: scale(1.3); 
        box-shadow: 0 0 40px var(--primary-color);
    }
    100% { transform: scale(1.1); }
}

/* Estilos antiguos del carrito (mantenidos para compatibilidad, pero sobrescritos por .header-top-row #cart-floating-btn) */
#cart-floating-btn {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top));
    right: 20px;
    width: 60px; height: 60px;
    background: #ffffff;
    border: 2px solid var(--primary-color);
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: calc(var(--layer-c2) + 20) !important;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#cart-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: #666;
    color: white;
    border: 2px solid white;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cart-floating-btn .icono-moto { 
    width: 32px; 
    height: 32px; 
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(11%) sepia(94%) saturate(7441%) hue-rotate(358deg) brightness(96%) contrast(113%);
}

#cart-sidebar {
    position: fixed;
    top: 0; right: 0;
    width: 100%; max-width: 400px;
    height: 100%;
    background: #0f0f0f;
    z-index: var(--layer-c3);
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    -webkit-overflow-scrolling: touch;
    transition: transform 0.4s ease;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.cart-closed { transform: translateX(100%); }

.cart-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.cart-header h2 .icono-moto { 
    width: 28px; 
    height: 28px; 
    margin-right: 12px; 
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(11%) sepia(94%) saturate(7441%) hue-rotate(358deg) brightness(96%) contrast(113%);
}

 #close-cart { 
    background: var(--primary-color); 
    border: none; 
    color: white; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 1.5rem; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
}

@media (hover: hover) {
    #close-cart:hover {
       filter: brightness(1.2);
       transform: rotate(90deg);
   }
}

#cart-items-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.cart-item-info h4 { font-family: var(--font-heading); font-size: 1.1rem; }
.cart-item-extras { font-size: 0.8rem; color: var(--text-muted); }

/* === SISTEMA DE CUPONES === */
.coupon-section {
    margin-top: 16px;
}

.coupon-section > div {
    background: linear-gradient(135deg, rgba(153, 27, 27, 0.2) 0%, rgba(124, 45, 18, 0.2) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.coupon-section .flex.items-center.gap-3 {
    margin-bottom: 12px;
}

.coupon-section .flex.items-center.gap-3 svg {
    width: 20px;
    height: 20px;
    color: #f87171;
}

.coupon-section .flex.items-center.gap-3 span {
    color: #f87171;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.coupon-section .flex.gap-2 {
    display: flex;
    gap: 8px;
}

.coupon-section input#coupon-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    color: white;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    outline: none;
    transition: all 0.3s ease;
}

.coupon-section input#coupon-input::placeholder {
    color: rgba(156, 163, 175, 1);
}

.coupon-section input#coupon-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.coupon-section button#btn-apply-coupon {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.3);
}

.coupon-section button#btn-apply-coupon:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: scale(1.05);
}

.coupon-section button#btn-apply-coupon:active {
    transform: scale(0.95);
}

/* === RESUMEN DE DESCUENTO === */
#discount-summary {
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.3) 0%, rgba(6, 95, 70, 0.3) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#discount-summary.hidden {
    display: none;
}

#discount-summary .flex.items-center.justify-between.mb-2 {
    margin-bottom: 8px;
}

#discount-summary .flex.items-center.gap-2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

#discount-summary .flex.items-center.gap-2 svg {
    width: 20px;
    height: 20px;
    color: #4ade80;
}

#discount-summary .flex.items-center.gap-2 span {
    color: #4ade80;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#discount-summary .flex.items-center.gap-3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

#discount-summary #discount-percentage {
    color: #4ade80;
    font-weight: 700;
    font-size: 0.875rem;
    background: rgba(34, 197, 94, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

#discount-summary #discount-amount {
    color: #4ade80;
    font-weight: 700;
    font-size: 1.125rem;
}

#discount-summary .flex.items-center.justify-between.text-xs {
    font-size: 0.75rem;
}

#discount-summary .flex.items-center.justify-between.text-xs span:first-child {
    color: rgba(156, 163, 175, 1);
}

#discount-summary .flex.items-center.gap-2:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

#discount-summary #coupon-code-display {
    color: white;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

#discount-summary #btn-remove-coupon {
    color: #f87171;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

#discount-summary #btn-remove-coupon:hover {
    color: #fca5a5;
}

#discount-summary #btn-remove-coupon svg {
    width: 16px;
    height: 16px;
}
.cart-item-price { color: var(--primary-color); font-weight: bold; text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.2); }

.cart-price-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart-item-ref {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: bold;
    margin-top: -2px;
}

.cart-ref-total {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 5px;
}

.cart-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.remove-item {
    background: var(--primary-color);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: 0.3s;
    line-height: 1;
}

@media (hover: hover) {
    .remove-item:hover {
        filter: brightness(1.2);
        transform: scale(1.1);
    }
}

.cart-footer {
    padding: 20px;
    background: #151515;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.cart-total-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-family: var(--font-heading);
}

.sugerencia-bebida {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sugerencia-bebida span {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-sugerencia-outline {
    background: white;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 12px 24px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-sugerencia-outline:active {
    background: var(--primary-color);
    color: white;
    transform: scale(0.95);
}

#cart-grand-total { color: var(--primary-color); font-size: 1.5rem; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }

#btn-go-checkout, .btn-checkout-final {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #28a745;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-go-checkout:active, .btn-checkout-final:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

.btn-checkout-final {
    background: #25D366;
    font-size: 1.3rem;
    margin-top: 24px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

@media (hover: hover) {
    .btn-checkout-final:hover { background: #128C7E; transform: translateY(-2px); }
}

#checkout-view { 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    flex: 1;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
}

#btn-back-to-cart {
    background: var(--primary-color);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.1rem;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    transition: 0.3s;
    width: 100%;
}

.back-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.btn-large-cancel {
    font-family: var(--font-heading);
    font-size: 1.1rem !important;
    padding: 12px !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

@media (hover: hover) {
    #btn-back-to-cart:hover {
        filter: brightness(1.2);
        transform: translateY(-2px);
    }
}

.checkout-form { display: flex; flex-direction: column; gap: 12px; }
.checkout-title { font-family: var(--font-heading); color: var(--primary-color); margin-bottom: 5px; font-size: 1.5rem; text-align: center; }

.checkout-form input, .checkout-form textarea, .checkout-form select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 14px;
    border-radius: 8px;
    color: white;
    font-family: var(--font-body);
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
}

.checkout-form label { font-size: 0.8rem; color: var(--text-muted); margin-top: 5px; }

.hidden { display: none !important; }

@media (max-width: 480px) {
    #cart-sidebar { max-width: 100%; }
}

/* Estilos para el Pop-up Publicitario */
.promo-modal-content {
    background: rgba(0, 0, 0, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Reflejo de cristal premium */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important; /* Sombra profunda masiva */
    width: 92% !important; /* Pequeño margen para que se aprecie el marco */
    max-width: 400px !important;
    height: auto !important; /* Altura flexible según contenido */
    min-height: 250px !important;
    max-height: 92vh !important; /* Evita que la tarjeta toque los bordes del dispositivo */
    position: relative !important;
    padding: 0 !important; /* Eliminamos padding para permitir superposición total */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 16px !important;
    overflow: visible !important; /* Crucial: permite que el botón respire sin ser recortado */
}

.promo-img-container {
    flex: 0 1 auto; /* Permite que el contenedor se ajuste a la imagen */
    display: flex;
    flex-direction: column; /* Stacks image and button vertically */
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    overflow: visible;
}

.promo-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garantiza que no haya recortes */
    display: block;
}

.promo-img-container::after {
    display: none;
}

.close-promo {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent !important; /* Minimalismo: sin fondo circular */
    color: rgba(255, 255, 255, 0.6) !important; /* Gris suave para no competir */
    border: none !important;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    font-weight: 300; /* Líneas estilizadas */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 110;
    transition: all 0.3s ease;
}

.close-promo:hover {
    transform: rotate(90deg); /* Micro-interacción premium */
    color: #ffffff !important;
}

/* Botón Ordenar Premium */
.btn-promo-premium {
    position: absolute !important; /* Posicionamiento ultra preciso */
    bottom: 20px !important; /* Ubicación en el espacio vacío inferior */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centrado perfecto */
    display: block !important;
    width: 85% !important;
    max-width: 310px !important; /* Incremento sutil */
    padding: 14px 30px !important; /* Incremento sutil */
    margin: 0 !important;
    background: linear-gradient(135deg, rgba(230, 0, 0, 0.95), rgba(180, 0, 0, 0.95)) !important; /* Restaurado estilo Ayuda */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Restaurado borde sutil */
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.90rem !important; /* Incremento sutil */
    font-weight: 600 !important; /* Restaurado peso tipográfico refinado */
    text-transform: uppercase;
    letter-spacing: 2px; /* Aire exclusivo */
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(230, 0, 0, 0.5), 0 0 40px rgba(230, 0, 0, 0.3) !important; /* Restaurado doble glow */
    transition: all 0.3s ease;
    animation: premium-pulse 2s infinite;
    z-index: 120;
    pointer-events: auto !important; /* Asegura que sea clickable */
}

.btn-promo-premium:hover {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.95), rgba(200, 0, 0, 0.95)) !important;
    box-shadow: 0 6px 25px rgba(230, 0, 0, 0.6), 0 0 50px rgba(230, 0, 0, 0.4) !important;
    transform: translateX(-50%) translateY(-3px) !important; /* Mantiene centrado en hover */
}
@keyframes premium-pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.03); }
    100% { transform: translateX(-50%) scale(1); }
}

.btn-promo-premium:active {
    transform: translateX(-50%) scale(0.96) !important;
}

/* --- FOOTER MODERNO (ESTILO FARMATODO) --- */
.bh-footer {
    background-color: #7a0000; /* Rojo profundo / Borgoña */
    color: #ffffff;
    width: 100%;
    padding: 40px 20px calc(30px + env(safe-area-inset-bottom)) !important;
    text-align: center;
    font-family: var(--font-body);
    position: relative;
    z-index: var(--layer-c1);
}

.footer-section {
    margin-bottom: 30px;
}

.footer-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.footer-social-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 10px;
}

.footer-social-links a {
    color: #ffffff;
    transition: transform 0.3s ease;
}

.footer-social-links a:active { transform: scale(0.9); }

.payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}

.payment-item {
    background: transparent;
    padding: 5px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 400;
    border: none;
}

.footer-credits {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

.footer-credits b { color: rgba(255, 255, 255, 0.8); }

/* === FEED DE VIDEOS HORIZONTAL (ESTILO CARRUSEL) === */
.bh-video-feed-scroll {
 display: flex !important;
    flex-direction: row !important; /* Forza alineación horizontal */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding: 5px 20px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    touch-action: auto !important;
    animation: slideHint 6s ease-in-out 1.5s infinite;
    position: relative;
}

.bh-video-feed-scroll::-webkit-scrollbar { display: none !important; }

.video-story-card {
    flex: 0 0 115px !important; /* Impide que los videos se encojan */
    width: 115px !important;
    height: 190px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #000;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.video-story-card video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- CAPA DEL MENÚ SUPERIOR / INFERIOR --- */
.sticky-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: calc(var(--layer-c2) + 10) !important;
    overflow-x: hidden !important; /* Previene scroll horizontal en el menú */
    overflow-y: hidden !important; /* Previene scroll vertical en el menú */
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- FORZAR CONTENEDOR DE HISTORIAS --- */
#bh-video-feed-scroll, .bh-video-feed-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 15px !important;
    padding: 5px 20px 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    min-height: 195px !important; /* Altura optimizada para reducir scroll */
    background: transparent !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    touch-action: auto !important;
    overscroll-behavior: contain !important; /* Previene propagación del scroll */
    overscroll-behavior-x: contain !important;
}

#bh-video-feed-scroll.hidden, .bh-video-feed-scroll.hidden {
    display: none !important;
}
#bh-video-feed-scroll::-webkit-scrollbar { display: none !important; }

/* --- ESPACIADO DE SECCIÓN DE PRODUCTOS --- */
.menu-container {
    padding-top: calc(175px + env(safe-area-inset-top)) !important; /* Espacio optimizado para reducir gap */
}

#main-menu section {
    scroll-margin-top: 180px; /* Compensar altura del header fijo para scrollIntoView */
}

/* --- ESTILOS ESPECÍFICOS PARA DESKTOP --- */
@media (min-width: 1024px) {
    .menu-container {
        padding-top: 205px !important; /* Aumenta el espacio superior en PC para dar más aire bajo el header fijo */
    }
    .grid-cols-1 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- TARJETAS DE VIDEO --- */
.video-story-card {
    flex: 0 0 115px !important;
    width: 115px !important;
    height: 175px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #111 !important; /* Fondo oscuro por si el video tarda en cargar */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde sutil semitransparente */
    /* Optimización de rendimiento móvil (GPU Acceleration) */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.video-story-card video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.start-order-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 10px auto 10px !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.85rem !important;
    width: fit-content !important;
    position: relative;
}

.help-btn {
    background: var(--primary-color) !important;
    border: none !important;
    color: white !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 0 10px rgba(230, 0, 0, 0.3) !important;
    transition: transform 0.2s ease !important;
    animation: pulseGlow 5s ease-in-out 2.5s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(230, 0, 0, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px 15px rgba(230, 0, 0, 0.5);
        transform: scale(1.15);
    }
}

.help-tooltip {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, rgba(230, 0, 0, 0.95), rgba(180, 0, 0, 0.95));
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(230, 0, 0, 0.5), 0 0 40px rgba(230, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: tooltipPopup 5s ease-in-out 3s infinite;
    pointer-events: none;
    z-index: 200;
}

.tooltip-text {
    position: relative;
    z-index: 2;
}

.tooltip-arrow {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(230, 0, 0, 0.95);
    z-index: 1;
}

@keyframes tooltipPopup {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(20px) scale(0.8);
    }
    15% {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
    85% {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(20px) scale(0.8);
    }
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: toastSlideIn 0.3s ease-out;
    pointer-events: auto;
    max-width: 90vw;
    text-align: center;
}

.toast.error {
    border-color: rgba(255, 0, 0, 0.5);
    background: rgba(50, 0, 0, 0.95);
}

.toast.success {
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 50, 0, 0.95);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.help-btn:active {
    transform: scale(0.9);
}

/* --- ESTILOS PARA EL MODAL DE AYUDA --- */
#modal-help {
    padding: 0 !important;
}

.modal-content-help {
    background: #111 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: calc(20px + env(safe-area-inset-top)) 25px !important;
    position: relative !important;
    border: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
    animation: zoomIn 0.3s ease-out !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.help-title {
    font-family: var(--font-heading) !important;
    color: var(--primary-color) !important;
    font-size: 1.6rem !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.help-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    max-width: 500px;
    margin: 0 auto;
}

.help-step {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-start !important;
}

.step-number {
    background: var(--primary-color) !important;
    color: white !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 10px rgba(230, 0, 0, 0.4) !important;
}

.step-content h3 {
    font-size: 1rem !important;
    color: white !important;
    margin-bottom: 4px !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
}

.step-content p {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
}

.step-icon {
    width: 32px !important;
    height: 32px !important;
    background: rgba(230, 0, 0, 0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5px !important;
    border: 1px solid rgba(230, 0, 0, 0.3) !important;
    box-shadow: 0 2px 8px rgba(230, 0, 0, 0.2) !important;
}

.step-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    animation: arrowBounce 2s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(5px);
        opacity: 1;
    }
}

.help-close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: var(--primary-color) !important;
    border: none !important;
    color: white !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.2s ease !important;
}

.help-close-btn:active {
    transform: scale(0.9);
}

.emergencia-side-icon {
    width: clamp(40px, 10vw, 60px);
    fill: var(--primary-color);
    filter: drop-shadow(0 0 10px rgba(230, 0, 0, 0.6));
    opacity: 0.8;
}

.emergencia-text-content h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: #ffffff;
    font-size: clamp(1.4rem, 5vw, 2.5rem);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.emergencia-text-content p {
    font-family: var(--font-body);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .emergencia-icon-row {
        flex-direction: column;
        gap: 20px;
    }
    .emergencia-logo {
        order: 1;
    }
    .emergencia-side-icon {
        order: 2;
        width: 45px;
    }
}

.oculto {
    display: none !important;
}

/* Animaciones para los interruptores de la ventana de personalización de promos */
.promo-burger-card.selected .promo-toggle-switch,
#promo-combo-option.selected .promo-toggle-switch {
    background: var(--primary-color) !important;
}

.promo-burger-card.selected .promo-switch-indicator,
#promo-combo-option.selected .promo-switch-indicator {
    transform: translateX(20px);
}

/* --- ANIMACIÓN DE VUELO AL CARRITO --- */
.product-fly-particle {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease-out;
    filter: drop-shadow(0 0 20px rgba(230, 0, 0, 0.4));
    will-change: transform, opacity;
}

/* --- ANIMACIÓN DE CARGA PARA BOTONES (LOADING STATE) --- */
.btn-with-spinner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s ease;
}

.btn-spinner {
    display: none;
    width: 22px;
    height: 22px;
    animation: spin-loader 1s linear infinite;
}

.btn-spinner.active {
    display: block;
}

@keyframes spin-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- ANIMACIONES TIPO FRAMER MOTION (SPRING & STAGGER) --- */
/* Simulación de la física 'type: spring' de Framer Motion */
@keyframes framerSpring {
    0% { opacity: 0; transform: scale(0.92); }
    60% { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* Simulación del 'y: 20 -> y: 0' de Framer Motion */
@keyframes framerSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 1. Modal contenedor (Escala elástica) */
.modal.active .modal-content:not(.discount-modal-content):not(.promo-modal-content) {
    animation: framerSpring 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 2. Hijos en Cascada (StaggerChildren) */
.modal.active .modal-image-container {
    opacity: 0;
    animation: framerSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.05s forwards;
}

.modal.active .modal-details > .modal-title,
.modal.active .modal-details > .modal-description {
    opacity: 0;
    animation: framerSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s forwards;
}

.modal.active .modal-main-qty,
.modal.active .modal-extras-container,
.modal.active .upsell-buttons {
    opacity: 0;
    animation: framerSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards;
}

.modal.active .modal-price,
.modal.active .btn-add-order {
    opacity: 0;
    animation: framerSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
}

/* ============================================================
   ESTILOS MIGRADOS DESDE index.html
   (antes eran un bloque <style> inline — ahora cacheables)
   ============================================================ */

* {
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar { display: none; }

body {
    background: linear-gradient(to bottom, #1a0000 0%, #080808 100%) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
}

section { scroll-margin-top: 30px; margin-top: 0 !important; position: relative; clear: both; }

.contenedor-logo {
    position: fixed; inset: 0;
    z-index: calc(var(--layer-c3) + 500);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, #1a0000 0%, #080808 100%);
    overflow: hidden;
    transition: opacity 0.9s ease, filter 0.9s ease;
}
.contenedor-logo::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,0.07) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 42%, rgba(255,255,255,0.05) 0 1px, transparent 1px);
    background-size: 6px 6px, 7px 7px;
    opacity: 0.2;
}

.preloader-inner {
    position: relative; z-index: 2;
    width: min(82vw, 360px);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.logo-glow-wrap { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.logo-animado { width: 165px !important; max-width: 165px !important; border-radius: 50%; position: relative; z-index: 1; will-change: transform; }

.preloader-bar { width: 100%; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.13); overflow: hidden; position: relative; }
.preloader-progress { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8b0000 0%, #ff0000 55%, #ff6a00 100%); box-shadow: 0 0 16px rgba(255,106,0,0.45); transition: width 0.18s ease; position: relative; }
.preloader-progress::after { content: ""; position: absolute; right: 0; top: -3px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,130,0.95) 0%, rgba(255,214,130,0) 72%); filter: blur(0.5px); }
.preloader-sparks span { position: absolute; bottom: -2px; width: 3px; height: 3px; border-radius: 50%; background: #ffb347; opacity: 0; animation: spark-rise 1.7s linear infinite; }
.preloader-sparks span:nth-child(1) { left: 18%; animation-delay: 0s; }
.preloader-sparks span:nth-child(2) { left: 37%; animation-delay: 0.35s; }
.preloader-sparks span:nth-child(3) { left: 57%; animation-delay: 0.8s; }
.preloader-sparks span:nth-child(4) { left: 73%; animation-delay: 1.1s; }
.preloader-sparks span:nth-child(5) { left: 88%; animation-delay: 1.35s; }
.preloader-caption { font-size: 0.72rem; letter-spacing: 2.8px; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.contenedor-logo.ocultar { opacity: 0; filter: blur(2px); visibility: hidden; }

.closed-store-content { background-color: #121212 !important; color: #ffffff !important; border: 1px solid #333; border-radius: 40px !important; box-shadow: 0 0 30px rgba(0,0,0,0.8); }
.closed-store-content .modal-title       { color: #ff0000 !important; text-shadow: 1px 1px 0px rgba(255,255,255,0.3); }
.closed-store-content .modal-description { color: #cccccc !important; }
.closed-store-content .btn-add-order     { background-color: #ff0000 !important; }

.warning-box { background-color: #f7941d !important; border-radius: 12px !important; padding: 8px 15px !important; margin: 10px auto !important; max-width: 280px !important; display: flex; align-items: center; justify-content: center; gap: 8px; }
.warning-icon { display: none !important; }
.warning-text { font-size: 0.85rem !important; margin: 0 !important; color: #fff !important; font-weight: 600; text-align: center; }

.btn-variation-helper { background-color: #ffc107 !important; color: #000 !important; font-weight: 900 !important; border-radius: 50px !important; border: none !important; padding: 12px 20px !important; font-size: 0.8rem !important; width: 100% !important; margin: 10px auto 0 !important; box-shadow: 0 4px 15px rgba(255,193,7,0.4) !important; cursor: pointer; display: block; text-transform: uppercase !important; letter-spacing: 1px !important; }

.pulse-animation { animation: pulse-latido 1.5s infinite ease-in-out; }
@keyframes pulse-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

#cart-floating-btn { background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 58px !important; height: 58px !important; border-radius: 50% !important; transition: transform 0.22s ease, filter 0.22s ease !important; }
#cart-floating-btn:hover { transform: scale(1.1); filter: brightness(1.06); }
.icono-moto { width: 30px !important; height: auto !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
#cart-floating-btn .icono-moto { filter: brightness(0) invert(1) !important; }
#cart-badge { position: absolute !important; top: -2px !important; right: -2px !important; z-index: 10 !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 1.5px solid rgba(255,255,255,0.9) !important; background: rgba(0,0,0,0.9) !important; color: #ffffff !important; font-size: 0.72rem !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; line-height: 1; }

.background-decor { z-index: 10 !important; pointer-events: auto; }
.corner-item { z-index: 10; pointer-events: auto; opacity: 0.9; filter: drop-shadow(0 10px 18px rgba(255,140,0,0.5)); animation: floating 11s ease-in-out infinite !important; transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease; will-change: transform; }
.papa-top-left, .papa-top-right, .burger-bottom-left, .plato-bottom-right { filter: blur(1.5px) drop-shadow(0 10px 20px rgba(255,140,0,0.45)); }
.nuggets-bottom-left { filter: drop-shadow(0 10px 20px rgba(255,140,0,0.55)); }
@keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-13px); } }
.papa-top-right      { animation-delay: -2.5s !important; }
.burger-bottom-left  { animation-delay: -4s !important; }
.nuggets-bottom-left { animation-delay: -1.5s !important; }
.plato-bottom-right  { animation-delay: -3.2s !important; }
.corner-item:hover { transform: translateY(-6px) scale(1.02); opacity: 1; filter: drop-shadow(0 12px 22px rgba(255,175,70,0.62)); }

.menu-container {
    background:
        radial-gradient(circle at 0% 0%, rgba(255,0,0,0.15) 0%, transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(255,0,0,0.15) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(255,0,0,0.1) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(255,0,0,0.1) 0%, transparent 40%),
        rgba(10,10,10,0.98);
    border-radius: 50px 50px 0 0 !important;
    backdrop-filter: blur(8px);
    margin: 0 auto; max-width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0; transform: translateY(40px);
    transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), opacity 0.8s ease;
    position: relative; z-index: var(--layer-c2);
    filter: blur(8px); min-height: 100dvh !important;
}
.menu-container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0.6) 50%, rgba(255,0,0,0) 100%); pointer-events: none; }
.menu-container::after  { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: linear-gradient(180deg, rgba(255,0,0,0.12) 0%, rgba(255,0,0,0) 100%); pointer-events: none; }
.menu-container.mostrar-menu { opacity: 1; transform: translateY(0); filter: blur(0); }

@keyframes grill-glow {
    0%, 100% { transform: scale(1);   opacity: 0.5; }
    50%       { transform: scale(1.2); opacity: 0.8; }
}

.sticky-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: calc(var(--layer-c2) + 20) !important; background: rgba(8,8,8,0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: calc(10px + env(safe-area-inset-top)) 15px 5px !important; margin: 0 !important; border-radius: 0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; width: 100% !important; max-width: 100vw !important; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; }
.sticky-nav.mostrar-menu { opacity: 1; visibility: visible; }
.menu-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 3px; width: 100%; max-width: 100%; padding: 0 15px; margin-left: auto; margin-right: auto; }

/* Tarjeta global */
section:not(#bebidas) .menu-item { height: auto; padding: 0 !important; margin-bottom: 8px !important; border-radius: 30px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; position: relative !important; border: none !important; box-shadow: none !important; transition: transform 0.3s ease; background: transparent !important; }
section:not(#bebidas) .item-img-bg { display: block !important; position: relative; width: 100%; height: auto; object-fit: contain; object-position: center; z-index: 1; }
.ajuste-subir, .ajuste-baby, .ajuste-crispy { object-position: center !important; }
.ajuste-alejar { object-fit: cover !important; }
.menu-item::after { display: none; }
.menu-item:hover  { transform: translateX(5px); }
.item-name { color: #ffffff !important; text-shadow: 1px 1px 5px rgba(0,0,0,0.5) !important; font-size: 1.1rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-family: 'Montserrat', sans-serif !important; }
.seccion-titulo { text-shadow: 2px 2px 5px rgba(0,0,0,0.9); color: #ffffff !important; margin-top: 10px; margin-bottom: 12px; }
.menu-item .item-name { transition: color 0.28s ease; }
.menu-item:hover .item-name { color: inherit !important; }

.badge-best, .badge-new, .badge-promo, .badge-discount { color: #ffffff !important; border: none !important; border-radius: 999px !important; padding: 2px 8px !important; font-size: 0.65rem !important; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 700 !important; box-shadow: none !important; }
.badge-best     { background: #28a745 !important; }
.badge-new      { background: #ff0000 !important; }
.badge-promo    { background: #ffbb33 !important; color: #000000 !important; }
.badge-discount { background: #a855f7 !important; animation: pulse-discount 1.8s ease-in-out infinite; }
@keyframes pulse-discount { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

section:not(#bebidas) .menu-item.promo-item         { display: none !important; }
section:not(#bebidas) .menu-item.promo-item.visible { display: flex !important; }

section:not(#bebidas) .item-info { display: flex !important; flex-direction: column; align-items: flex-start; flex: 1; position: static !important; z-index: auto !important; padding: 0 !important; width: auto !important; }
section:not(#bebidas) .item-price-wrapper { display: flex !important; flex-direction: column; align-items: flex-end; flex-shrink: 0; position: static !important; z-index: auto !important; margin: 0 !important; min-width: auto !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.item-info-split { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 15px 14px; width: 100%; }

/* Grid PC */
@media (min-width: 769px) {
    body { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .sticky-nav { max-width: 1000px; margin: 0 auto; left: 50% !important; transform: translateX(-50%); border-radius: 0 0 20px 20px !important; }
    .bh-video-feed-scroll { display: flex !important; max-width: 1000px; margin: 0 auto; }
    .banner-card { max-width: 1000px; margin: 0 auto; }
    section:not(#bebidas) { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .seccion-titulo { grid-column: span 2; }
    #bebidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
    .modal-content { max-width: 500px; margin: 0 auto; }
    #cart-sidebar { background: rgba(15,15,15,0.95) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; max-width: 500px; width: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; margin: auto !important; height: auto !important; max-height: 90vh !important; border-radius: 30px !important; border: 1px solid rgba(255,255,255,0.1) !important; transform: scale(0.9) !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.4s ease !important; inset: auto !important; pointer-events: none !important; z-index: var(--layer-c3) !important; }
    #cart-sidebar:not(.cart-closed) { transform: scale(1) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
    .cart-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: calc(var(--layer-c3) - 1) !important; opacity: 0 !important; transition: opacity 0.4s ease !important; pointer-events: none !important; }
    .cart-backdrop.active { opacity: 1 !important; pointer-events: auto !important; }
    .cart-header      { padding: 20px 30px !important; }
    .cart-item-row    { padding: 16px 30px !important; }
    #cart-grand-total { font-size: 2rem !important; }
    #cart-floating-btn { width: 60px !important; height: 60px !important; }
    #checkout-view    { padding: 20px 30px !important; }
}

.item-price { color: #ffffff !important; font-size: 1.4rem !important; font-weight: bold !important; line-height: 1; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); background: transparent !important; padding: 0 !important; border: none !important; border-radius: 0 !important; }
.item-ref { color: #aaa !important; font-size: 0.64rem !important; font-weight: 700 !important; letter-spacing: 0.4px; opacity: 0.95; margin-top: 3px; line-height: 1; text-align: center; align-self: center; padding: 0; border: none; border-radius: 0; background: transparent !important; }
.menu-item:hover .item-price-wrapper { transform: none; filter: none; }
.item-desc { display: block !important; color: #aaa; font-size: 0.8rem; margin-top: 2px; font-weight: 500; line-height: 1.6; font-family: 'Montserrat', sans-serif; }

#cart-sidebar { background: #0a0a0a !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; z-index: var(--layer-c3) !important; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important; overflow-y: auto !important; display: flex; flex-direction: column; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#cart-sidebar.cart-closed { transform: translateX(100vw) !important; }
.cart-header { position: relative; padding: 12px 20px !important; border-bottom: none !important; }
.cart-header::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255,0,0,0) 0%, rgba(255,90,70,0.65) 50%, rgba(255,0,0,0) 100%); }
#close-cart { background: #ff1f1f !important; color: #ffffff !important; box-shadow: 0 6px 14px rgba(255,31,31,0.35); }
#btn-go-checkout { background: linear-gradient(180deg, #8b0000 0%, #ff0000 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.3) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; }
#cart-grand-total { color: #ffffff !important; font-weight: 900 !important; font-size: 1.75rem !important; text-shadow: 0 2px 12px rgba(255,255,255,0.18); }
#checkout-view { padding: 24px 20px calc(60px + env(safe-area-inset-bottom)) !important; display: flex; flex-direction: column; max-height: none !important; flex: 1 !important; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.cart-item-row { padding: 12px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.cart-item-info h4 { color: #f3f3f3 !important; margin: 0 0 4px 0 !important; }
.cart-item-extras { color: #d8b77a !important; }

.modal { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; display: none !important; pointer-events: none; z-index: var(--layer-c3); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal.active { display: flex !important; opacity: 1; visibility: visible; pointer-events: auto; }
.modal-content { background: rgba(15,15,15,0.9) !important; border-radius: 30px !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.55) !important; overflow: hidden; display: flex !important; flex-direction: column !important; gap: 0 !important; will-change: transform; transform: translateZ(0); }
.modal-title { color: #ffffff !important; font-weight: 800 !important; letter-spacing: 0.3px; text-shadow: 0 2px 10px rgba(0,0,0,0.6); margin-bottom: 12px !important; }
.modal-description { color: #f0f0f0 !important; line-height: 1.55; margin-bottom: 12px !important; }

.search-container { flex: 1; max-width: 200px; position: relative; margin-bottom: 0; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4); pointer-events: none; display: flex; align-items: center; }
.menu-header-logo { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; }
.search-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 50px !important; padding: 10px 15px 10px 38px !important; width: 100%; backdrop-filter: none !important; box-shadow: none !important; }
.search-input:focus { border-color: rgba(255,0,0,0.5) !important; background: rgba(255,255,255,0.08) !important; box-shadow: 0 0 15px rgba(255,0,0,0.15) !important; }
#main-menu .menu-item.hidden-search, #main-menu section.hidden-search { display: none !important; }
.modal-main-qty { margin: 0 !important; }

.modal-price { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; background: transparent !important; color: #ffffff !important; padding: 0 !important; border: none !important; font-family: 'Montserrat', sans-serif !important; box-shadow: none !important; min-width: auto !important; font-size: 2.1rem !important; font-weight: 800 !important; margin: 15px auto 25px !important; line-height: 1 !important; text-shadow: 2px 2px 10px rgba(0,0,0,0.8) !important; }
.modal-ref { font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.5px; margin-top: 4px; opacity: 0.95; }
.modal-extras-container { margin-top: 5px !important; }
.modal .btn-add-order    { background: linear-gradient(180deg, #8b0000 0%, #ff0000 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.3) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; color: #ffffff !important; }
.modal .btn-back-to-cart { background: linear-gradient(180deg, #c65b00 0%, #ff8a00 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.28) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important; }
.modal .btn-large-cancel { background: transparent !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.78) !important; box-shadow: none !important; }
.modal .btn-large-cancel:hover { color: #ffffff !important; border-color: rgba(255,255,255,0.42) !important; background: rgba(255,255,255,0.05) !important; }

.checkout-title { color: #ffffff !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); font-weight: 700; margin-bottom: 10px; font-size: 1.1rem !important; }
#btn-back-to-cart { background: linear-gradient(180deg, #8b0000 0%, #ff0000 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.3) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; color: #fff !important; padding: 12px 20px !important; border-radius: 12px !important; font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 20px !important; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; width: 100% !important; font-family: inherit; }

.selector-metodo { display: flex; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 4px; margin-bottom: 15px; }
.metodo-btn { flex: 1; border: none; background: transparent; color: rgba(255,255,255,0.5); padding: 12px; border-radius: 11px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.metodo-btn.active { background: #B20000; color: #fff; box-shadow: 0 4px 12px rgba(178,0,0,0.3); }

.checkout-form input,
.checkout-form textarea {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 8px !important;
    width: 100%;
    outline: none;
    font-size: 16px !important;
    font-family: inherit;
    -webkit-appearance: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.checkout-form input:focus,
.checkout-form textarea:focus {
    border-color: #e60000 !important;
    background-color: rgba(230,0,0,0.05) !important;
    box-shadow: 0 0 12px rgba(230,0,0,0.25), inset 0 2px 4px rgba(0,0,0,0.2) !important;
}
.checkout-form textarea { resize: none; min-height: 100px; }
.input-with-location { position: relative; width: 100%; }
#pickup-location-info { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.2); padding: 15px; border-radius: 12px; margin-bottom: 15px; font-size: 0.85rem; color: #ddd; }
.btn-maps-pickup { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; padding: 12px 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; color: #ffffff; text-decoration: none; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; width: 100%; }
.btn-maps-pickup:active { transform: scale(0.98); background: rgba(255,255,255,0.1); }
.input-with-location input { padding-right: 18px !important; }
#btn-get-location { position: relative; background: var(--primary-color) !important; border: none !important; border-radius: 50px !important; color: #ffffff !important; height: auto !important; padding: 10px 30px !important; grid-column: span 2 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; cursor: pointer; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); width: 100%; box-shadow: 0 4px 15px rgba(230,0,0,0.3) !important; }
#btn-get-location svg { stroke: #ffffff; width: 24px; height: 24px; }
#btn-get-location:active { transform: scale(0.96); }
#btn-get-location:hover  { filter: brightness(1.1); }
#btn-get-location.loading { opacity: 0.6; pointer-events: none; }
.location-success { border-color: #28a745 !important; box-shadow: 0 0 10px rgba(40,167,69,0.4) !important; background: rgba(40,167,69,0.1) !important; transition: all 0.5s ease; }
.btn-checkout-final { background: linear-gradient(180deg, #1b5e20 0%, #28a745 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.3) !important; color: #fff !important; font-weight: 700 !important; padding: 14px !important; border-radius: 12px !important; margin-top: 24px !important; position: relative !important; bottom: auto !important; width: 100%; margin-bottom: 20px !important; }
.btn-volver-menu { background: linear-gradient(180deg, #8b0000 0%, #ff0000 100%) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.3) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; color: #fff !important; font-weight: 700 !important; padding: 14px !important; border-radius: 12px !important; margin-top: 24px !important; position: relative !important; bottom: auto !important; width: 100%; margin-bottom: 20px !important; transition: all 0.3s ease !important; cursor: pointer !important; }
.btn-volver-menu:hover { background: linear-gradient(180deg, #6b0000 0%, #e60000 100%) !important; transform: scale(1.02) !important; }

.delivery-notice-premium { background: rgba(255,193,7,0.08) !important; border: 1px solid rgba(255,193,7,0.2) !important; padding: 12px 16px !important; border-radius: 12px !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-top: -5px !important; margin-bottom: 10px !important; }
.delivery-notice-premium svg { flex-shrink: 0 !important; margin-top: 2px !important; }
.delivery-notice-content { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.delivery-notice-main { color: #ffc107 !important; font-size: 0.85rem !important; font-weight: 600 !important; line-height: 1.3 !important; }
.delivery-notice-sub  { color: rgba(255,255,255,0.7) !important; font-size: 0.75rem !important; font-weight: 400 !important; line-height: 1.3 !important; }
.checkout-form input::placeholder { color: rgba(255,255,255,0.45) !important; font-size: 0.95rem; letter-spacing: 0.5px; }

.modal-image-container { width: 100%; height: 440px; overflow: hidden; position: relative; background: transparent !important; padding: 0 !important; }

.category-bar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0; padding: 8px 15px !important; border: none !important; box-shadow: none !important; margin-top: 3px; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }
.category-bar::-webkit-scrollbar { display: none; }
.category-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.75) !important; border: 1px solid rgba(255,255,255,0.1) !important; cursor: pointer; font-size: 0.85rem !important; font-weight: 600 !important; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; }
.category-btn.active { background: #b91c1c !important; color: #ffffff !important; border-color: #ef4444 !important; box-shadow: 0 4px 15px rgba(185,28,28,0.4); }

#modal-img { width: 100%; height: 100%; display: block !important; object-fit: cover !important; object-position: center 85%; transform: scale(1.15); filter: none; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
#modal-img.modal-img-alejar              { transform: scale(1) !important; object-fit: cover !important; }
#modal-img.modal-img-bebida              { transform: scale(0.7) !important; object-fit: contain !important; }
#modal-img.modal-img-bottom-aligned      { object-position: center 92% !important; transform: scale(1.15) translateY(-2%) !important; }
#modal-img.modal-img-junior-crispy-lower { object-position: center 70% !important; }
.modal-image-container::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,15,0.8) 0%, rgba(15,15,15,0) 20%); pointer-events: none; }
.modal-details { padding: 15px 25px 30px !important; position: relative; z-index: 10; }
#modal-hamburguesa .modal-details { margin-top: 0 !important; }
.upsell-img { width: 180px; height: 180px; display: block; margin: 0 auto 10px; object-fit: contain; transform: scale(1.15); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); }

/* Media Query Movil */
@media (max-width: 768px) {
    body { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('brasas.webp') !important; background-attachment: scroll !important; background-size: cover !important; background-position: center !important; }
    .menu-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 185px 15px 40px !important; border-radius: 0 !important; backdrop-filter: none !important; background: rgba(10,10,10,0.98) !important; min-height: 100dvh !important; }
    .sticky-nav { margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
    .header-top-row    { padding: 10px 15px 6px !important; }
    .menu-header-logo  { width: 42px !important; height: auto !important; }
    .header-search-row { padding: 0 15px 8px !important; }
    .category-bar      { padding: 0 15px 10px !important; gap: 8px !important; }
    section:not(#bebidas) .item-img-bg { object-position: center 30% !important; }
    #bebidas .menu-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; background: transparent !important; border: none !important; border-left: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0 !important; padding: 14px 10px !important; margin-bottom: 0 !important; box-shadow: none !important; height: auto !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #bebidas .menu-item:last-child { border-bottom: none !important; }
    #bebidas .item-info { width: auto !important; padding: 0 !important; margin: 0 !important; position: static !important; z-index: 1 !important; }
    #bebidas .item-price-wrapper { position: static !important; min-width: auto !important; transform: none !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; }
    .badge-best, .badge-new, .badge-discount { position: relative !important; display: inline-block !important; top: 0 !important; left: 0 !important; z-index: 4; margin: 4px 0 0 0 !important; }
    #bebidas .item-name  { color: #ffffff !important; font-size: 0.95rem !important; font-weight: 500 !important; text-transform: uppercase; text-shadow: none !important; }
    #bebidas .item-price { font-size: 1.15rem !important; color: #ffffff !important; font-weight: 700 !important; text-shadow: none !important; }
    #bebidas .item-ref   { font-size: 0.5rem !important; opacity: 0.4; margin-top: 0 !important; }
    .modal-image-container { height: 35vh !important; max-height: 250px !important; position: relative; z-index: 1 !important; background: #000; }
    .modal-image-container::after { background: linear-gradient(to bottom, transparent 80%, rgba(0,0,0,0.9) 100%) !important; z-index: 6 !important; }
    .modal-content:not(.food-modal) .modal-image-container { height: 22vh !important; background: transparent !important; }
    .modal-content:not(.food-modal) #modal-img { object-fit: contain !important; transform: scale(0.8) !important; object-position: center center !important; }
    .upsell-img { width: 110px !important; height: 110px !important; transform: scale(1) !important; margin-bottom: 5px !important; }
    #modal-img { width: 100% !important; height: 100% !important; transform: scale(1.3) !important; object-fit: cover !important; z-index: 5 !important; position: relative; object-position: center 85% !important; }
    .modal-details { padding: 12px 18px 20px !important; background: #0f0f0f !important; margin-top: 0 !important; position: relative; z-index: 10; }
    .extras-title { font-size: 0.9rem !important; margin-bottom: 10px !important; }
    .combo-tabs { margin-bottom: 15px !important; }
    .combo-progress { text-align: center; color: #ffffff !important; font-size: 0.85rem !important; font-weight: 600 !important; margin-bottom: 10px !important; background: rgba(230,0,0,0.1) !important; padding: 8px !important; border-radius: 8px !important; border: 1px solid rgba(230,0,0,0.3) !important; }
    .combo-tabs-nav { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; row-gap: 6px !important; }
    .combo-tab { all: unset !important; -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2) !important; color: #ffffff !important; padding: 7px 12px !important; border-radius: 8px !important; font-size: 0.78rem !important; font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important; text-align: center !important; cursor: pointer !important; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; outline: none !important; line-height: 1.4 !important; user-select: none !important; -webkit-user-select: none !important; }
    .combo-tab:hover  { background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.4) !important; }
    .combo-tab.active { background: #e60000 !important; border-color: #e60000 !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(230,0,0,0.4) !important; }
    @media (min-width: 769px) {
        #modal-hamburguesa .combo-tabs-nav button.combo-tab { all: unset; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #ffffff; padding: 9px 20px; border-radius: 10px; font-size: 0.82rem; font-weight: 700; font-family: 'Montserrat', sans-serif; text-align: center; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; outline: none; line-height: 1.4; white-space: nowrap; user-select: none; letter-spacing: 0.3px; }
        #modal-hamburguesa .combo-tabs-nav button.combo-tab:hover  { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); }
        #modal-hamburguesa .combo-tabs-nav button.combo-tab.active  { background: #e60000; border-color: #e60000; color: #ffffff; box-shadow: 0 4px 18px rgba(230,0,0,0.45); }
    }
    .extras-section { margin-bottom: 15px !important; }
    .extras-section-title { color: #ffffff !important; font-size: 0.8rem !important; font-weight: 700 !important; margin-bottom: 8px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding-bottom: 5px !important; }
    .extras-grid  { gap: 6px !important; }
    .extra-card   { padding: 6px 10px !important; min-height: 45px !important; }
    .extra-name   { font-size: 0.78rem !important; }
    .extra-qty-btn, .main-qty-btn { width: 28px !important; height: 28px !important; font-size: 0.8rem !important; }
    .extra-qty-val { font-size: 0.8rem !important; }
}

/* Barra inferior de categorias */
.category-bar-bottom-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; background: #0a0a0a; z-index: calc(var(--layer-c2) + 10); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -10px 30px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; }
.category-bar-bottom-wrapper.mostrar-barra { opacity: 1; visibility: visible; }

/* Interruptores promos */
#modal-promo-selection .extras-grid { display: flex; flex-direction: column; gap: 12px; }
.promo-burguer-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 18px !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 14px 20px !important; cursor: pointer; transition: all 0.3s ease !important; height: auto !important; }
.promo-burguer-card.selected { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.1) !important; }
.promo-toggle-switch { width: 42px; height: 22px; background: rgba(255,255,255,0.1); border-radius: 20px; position: relative; transition: 0.3s; }
.promo-switch-indicator { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.68,-0.55,0.265,1.55); }
.promo-burger-card.selected .promo-toggle-switch   { background: var(--primary-color); }
.promo-burger-card.selected .promo-switch-indicator { transform: translateX(20px); }
#modal-promo-lunes-miercoles { padding: 0 !important; }
#modal-promo-selection .modal-image-container { height: 620px !important; }
@media (max-width: 768px) { #modal-promo-selection .modal-image-container { height: 65vh !important; max-height: 550px !important; } }

.hidden { display: none !important; }