/* ========================================
   TEMA NEGRONI - Restaurant Menu Theme
   Colores: #ecdcc3 (beige), #dd903e (naranja)
   Tipografías: Saphira (títulos), Nexa (texto)
   ======================================== */

/* ===== TIPOGRAFÍAS OPTIMIZADAS (Estructura: css/ y fonts/ al mismo nivel) ===== */

/* Saphira */
@font-face {
    font-family: 'Saphira';
    src: url('../fonts/saphira-webfont.woff2') format('woff2'),
         url('../fonts/saphira-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Nexa Regular */
@font-face {
    font-family: 'Nexa';
    src: url('../fonts/nexa-regular-webfont.woff2') format('woff2'),
         url('../fonts/nexa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Nexa Bold */
@font-face {
    font-family: 'Nexa';
    src: url('../fonts/nexa-bold-webfont.woff2') format('woff2'),
         url('../fonts/nexa-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Nexa Heavy */
@font-face {
    font-family: 'Nexa';
    src: url('../fonts/nexa-heavy-webfont.woff2') format('woff2'),
         url('../fonts/nexa-heavy-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ===== VARIABLES ===== */
:root {
    --bg-color: #efdcc0;
    --accent-color: #f7941f;
    --text-color: #333;
    --card-bg: #ffffff;
    --border-radius: 10px;
    --transition: all 0.3s ease;
}

/* ===== ESTILOS BASE ===== */
body {
    background: var(--bg-color);
    font-family: 'Nexa', Arial, sans-serif;
    color: var(--text-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== HEADER ===== */
.header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(236, 220, 195, 0.9) 0%, rgba(221, 144, 62, 0.1) 100%);
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}

.header h1 {
    font-family: 'Saphira', serif;
    font-size: 3em;
    margin: 0;
    color: var(--accent-color);
    position: relative;
    display: inline-block;
}

/* Líneas decorativas en títulos */
.header h1::before,
.header h1::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 60px;
    height: 2px;
    background: var(--accent-color);
}

.header h1::before {
    right: calc(100% + 20px);
}

.header h1::after {
    left: calc(100% + 20px);
}

@media (max-width: 768px) {
    .header h1 {
        font-size: 2em;
    }
    .header h1::before,
    .header h1::after {
        width: 30px;
    }
}

.header p {
    font-size: 1.1em;
    color: #666;
    margin-top: 10px;
}

.header-logo img {
    max-width: 150px;
    max-height: 150px;
    margin-bottom: 15px;
}

/* ===== BOTONERA DE CATEGORÍAS ===== */
/* (ver definición consolidada más abajo) */

.category-button {
    background: white;
    border: 2px solid var(--accent-color);
    padding: 18px 24px;
    border-radius: var(--border-radius);
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Nexa', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@media (min-width: 769px) {
    .category-button:hover {
        background: var(--accent-color);
        border-color: transparent;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 16px rgba(221, 144, 62, 0.35);
    }

    .category-button.active {
        background: var(--accent-color);
        border-color: transparent;
        color: white;
    }

    .category-button.active .btn-icon img {
        filter: brightness(0) invert(1);
    }
}


/* ===== TÍTULOS DE CATEGORÍA ===== */
.category-title {
    font-family: 'Saphira', serif;
    font-size: 2.2em;
    color: var(--accent-color);
    text-align: center;
    margin: 40px 0 30px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.category-title::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-color) 50%, transparent 100%);
}

/* ===== PRODUCTOS ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.product-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    transition: var(--transition);
    border: 2px solid transparent;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.product-name {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 10px;
    font-family: 'Nexa', Arial, sans-serif;
}

.product-price {
    font-size: 1.2em;
    color: var(--accent-color);
    font-weight: bold;
    margin: 5px 0;
}

.product-description {
    color: #666;
    line-height: 1.6;
    margin: 10px 0;
}

/* Iconos de producto — tamaño controlado */
.product-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    align-items: center;
}

.product-icons i,
.product-icons span {
    width: auto;
    height: auto;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* ===== SUPER DESTACADOS ===== */

.super-featured-name {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 1em !important;
    color: var(--accent-color)!important;
}
.super-featured-desc {
    font-size: 1em !important;
    }


/* ===== PRODUCTOS DESTACADOS (SPECIALS) ===== */

.super-featured-info {
     background:#f0e2cc;
}

.featured-products-section {
    margin: 30px 0;
    padding: 25px;
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border: 3px solid var(--accent-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(221, 144, 62, 0.2);
}

.featured-products-section h3 {
    font-family: 'Saphira', serif;
    color: var(--accent-color);
    font-size: 1.8em;
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.featured-product-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 25px;
    padding: 25px;
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 5px solid var(--accent-color);
}

.featured-product-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.featured-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-product-name {
    font-family: 'Nexa', Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--text-color);
}

.featured-product-price {
    font-size: 1.4em;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .featured-product-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .featured-product-card img {
        margin: 0 auto;
        width: 180px;
        height: 180px;
    }
}

/* ===== TEXTO PERSONALIZADO ===== */
.custom-text-container {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.7);
    border-left: 5px solid var(--accent-color);
    border-radius: 12px;
    margin: 25px 0;
    font-size: 1em;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.custom-text-container img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ===== IMAGEN DESTACADA DE CATEGORÍA ===== */
.category-featured-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 30px auto;
    display: block;
    border-radius: var(--border-radius);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border: 3px solid var(--accent-color);
}

/* ===== BOTÓN VOLVER ===== */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 25px;
    transition: var(--transition);
    color: var(--accent-color);
    font-family: 'Nexa', Arial, sans-serif;
}

.back-button:hover {
    background: var(--accent-color);
    color: white;
    transform: translateX(-5px);
}

/* ===== PROMOCIONES DESTACADAS ===== */
.featured-section {
    margin: 40px 0;
}

.featured-title {
    font-family: 'Saphira', serif;
    font-size: 2em;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 30px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    align-items: stretch;
}

/* Asegurar que las tarjetas ocupen todo el alto disponible */
.featured-product-card,
.generic-promo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ===== INFO BAR ===== */
.info-bar {
    background: var(--accent-color);
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(221, 144, 62, 0.3);
}

/* ===== FLYERS ===== */
.flyers-grid-desktop,
.flyers-grid-mobile {
    margin: 40px 0;
}

.flyers-grid-desktop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.flyers-grid-desktop img,
.flyers-grid-mobile img {
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: var(--transition);
    border: 2px solid var(--accent-color);
}

.flyers-grid-desktop > div:hover img {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(221, 144, 62, 0.3);
}

/* ===== LOADING Y ERROR ===== */
.loading,
.error {
    text-align: center;
    padding: 50px;
    font-size: 1.2em;
    color: var(--accent-color);
    font-family: 'Nexa', Arial, sans-serif;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .container {
        padding: 1px;
    }
    
    .category-button {
        font-size: 1em;
        padding: 15px 20px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .category-title {
        font-size: 1.8em;
    }
    
    .header h1 {
        font-size: 2em;
    }
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card,
.category-button,
.featured-product-card {
    animation: fadeIn 0.5s ease-out;
}

/* ===== STOCK STATUS ===== */
.product-card[data-stock="out_of_stock"] {
    opacity: 0.6;
    position: relative;
}

.product-card[data-stock="out_of_stock"]::after {
    content: 'AGOTADO';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

/* ===== responsive 2 columnas ===== */
@media (max-width: 768px) {
    /* categories-buttons: ver definición base */
    
    .category-button {
        font-size: 1.1em !important;
        padding: 10px 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
        margin: 0 !important;
    }
}

/* ===== BOTÓN VOLVER ARRIBA ===== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: var(--accent-color);
    color: white;
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(221, 144, 62, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.back-to-top img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1); /* blanco si el SVG es oscuro */
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #c57a2e;
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.3em;
    }
}
/* ===== MEJORAS TARJETAS PROMOCIONES ===== */
.featured-product-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid var(--accent-color);
    transition: var(--transition);
}

.featured-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(221, 144, 62, 0.3);
}

.featured-badge {
    background: var(--accent-color);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 15px;
    text-align: center;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
}

.clickable-image {
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}
.clickable-image:hover {
    opacity: 0.9;
}

.product-name {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-color);
    text-align: center;
}

.product-description {
    color: #666;
    line-height: 1.6;
    margin: 10px 0;
    text-align: center;
    font-size: 0.95em;
}

.price-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding-top: 5px;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1em;
}

.promo-price {
    color: var(--accent-color);
    font-size: 1.5em;
    font-weight: bold;
}

/* Responsive promociones */
@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
    
    .featured-product-card {
        padding: 20px;
    }
}

/* ============================================
   NEGRONI — NUEVOS COMPONENTES
   ============================================ */

/* Selector de idioma */
.lang-btn {
    font-family: 'Nexa', Arial, sans-serif;
    border-color: rgba(221, 144, 62, 0.4);
    color: var(--text-color);
}

.lang-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    font-weight: bold;
}

/* Nav — no sticky, fluye con el contenido */
.nav-container {
    position: relative !important;
    top: auto !important;
    background: var(--bg-color);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 10px 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Botones de categoría — iconos */
.category-button {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    min-width: 70px;
    max-width: 140px;
}

.category-button .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 1.2em;
}

.category-button .btn-icon img {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
}

.category-button .btn-label {
    font-size: 0.9em;
    line-height: 1.2;
}

@media (min-width: 769px) {
    .category-button {
        flex-direction: row;
        min-width: auto;
        max-width: none;
        padding: 10px 18px;
    }
    .category-button .btn-label {
        font-size: 0.88em;
    }
}

/* Miniflyers — grid centrado, imagen completa */
.miniflyer-grid {
    display: grid;
    gap: 16px;
    margin: 15px auto 5px;
    width: 100%;
}

.miniflyer-card {
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    width: 100%;
}

.miniflyer-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Desktop: centrado, 80% del ancho */
@media (min-width: 769px) {
    .miniflyer-grid {
        grid-template-columns: 1fr;
        max-width: 80%;
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile: ancho completo */
@media (max-width: 768px) {
    .miniflyer-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* Títulos de sección */
.section-title-text {
    font-family: 'Saphira', serif;
    color: var(--accent-color);
    letter-spacing: 0.1em;
}

.section-group-box {
    background: rgba(236, 220, 195, 0.4);
    border-color: var(--accent-color);
}

/* Chef special */
.chef-special-card {
    border-left-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.85);
}

.chef-special-name {
    font-family: 'Nexa', Arial, sans-serif;
    color: var(--text-color);
}

.chef-special-price {
    color: var(--accent-color);
}

/* Featured products title */
.featured-products-title {
    font-family: 'Saphira', serif;
    color: var(--accent-color);
    letter-spacing: 0.08em;
}

/* Sponsor */
.sponsor-container {
    text-align: center;
    padding: 10px 15px;
    background: transparent;
    border: none;
}

.sponsor-container img,
.sponsor-container .sponsor-logo {
    max-width: 40% !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .sponsor-container img,
    .sponsor-container .sponsor-logo {
        max-width: 55% !important;
        max-height: 70px !important;
    }
}

/* Prix fixe */
.prix-fixe-box {
    background: linear-gradient(135deg, var(--accent-color) 0%, #c47a2d 100%);
    font-family: 'Nexa', Arial, sans-serif;
}

/* Additional info */
.additional-info-box {
    background: rgba(236, 220, 195, 0.5);
    border-left-color: var(--accent-color);
}

/* ============================================
   NEGRONI — MENÚ ESPECIAL
   ============================================ */

.special-menu-header {
    border-bottom-color: var(--accent-color);
    border-bottom-width: 3px;
}

.special-menu-title {
    font-family: 'Saphira', serif;
    color: var(--accent-color);
}

.prix-fixe-box {
    border-radius: var(--border-radius);
}

.additional-info-box {
    border-radius: var(--border-radius);
}

.featured-box {
    border-radius: var(--border-radius);
    font-family: 'Nexa', Arial, sans-serif;
}

.featured-box-title {
    font-family: 'Nexa', Arial, sans-serif;
    font-weight: 900;
}

.subcategory-title {
    font-family: 'Nexa', Arial, sans-serif;
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    opacity: 0.8;
}

/* ============================================
   NEGRONI — FLYERS
   ============================================ */
.flyers-section-title {
    font-family: 'Saphira', serif;
    font-size: 2em;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 30px;
}

.flyers-grid-desktop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}

@media (max-width: 768px) {
    .flyers-grid-desktop {
        display: none;
    }
}

.flyers-grid-mobile {
    display: none;
}

@media (max-width: 768px) {
    .flyers-grid-mobile {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        overflow: hidden;
    }
    
    .flyers-grid-mobile .flyer-item {
        width: 100%;
        max-width: 100%;
    }
    
    .flyers-grid-mobile .flyer-item img {
        width: 100%;
        height: auto;
    }
}

/* ============================================
   NEGRONI — BADGES E ICONOS
   ============================================ */
.badge-nuevo {
    background: var(--accent-color);
    letter-spacing: 0.03em;
}

.badge-sin-tacc {
    background: #5a9e52;
}

/* ============================================
   NEGRONI — GENERIC PROMO CARD
   ============================================ */
.generic-promo-in-category {
    border-color: var(--accent-color);
}

.promo-schedule-box {
    border: 1px solid rgba(221,144,62,0.2);
    border-radius: var(--border-radius);
}

.promo-schedule-box.in-category {
    background: rgba(236,220,195,0.5);
    border-color: rgba(221,144,62,0.3);
}

/* ============================================
   NEGRONI — FEATURED PRODUCT CARD
   ============================================ */
.featured-promo-badge {
    background: var(--accent-color);
    border-radius: var(--border-radius);
}

.featured-product-name-large {
    font-family: 'Nexa', Arial, sans-serif;
    color: var(--text-color);
}

.featured-price-new,
.featured-price-original {
    color: var(--accent-color);
}

.featured-promo-desc {
    background: rgba(221,144,62,0.08);
    border-radius: var(--border-radius);
}

/* ============================================
   NEGRONI — FLYERS
   ============================================ */
.flyers-section-title {
    font-family: 'Saphira', serif;
    color: var(--accent-color);
    font-size: 2em;
}

.flyer-item {
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
}

.flyer-item.clickable:hover {
    box-shadow: 0 8px 25px rgba(221,144,62,0.3);
}

/* ============================================
   NEGRONI — CATEGORY FEATURED IMAGE
   ============================================ */
.category-featured-image {
    border: none;
}

/* ============================================
   NEGRONI — BOTONERA PRINCIPAL
   ============================================ */

/* BOTONERA: mobile grid 2 cols, desktop flex centrado */
.categories-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px auto;
    width: 100%;
}

/* Desktop: fila horizontal centrada */
@media (min-width: 769px) {
    .categories-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 20px auto;
    }

    .categories-buttons .category-button {
        flex: 0 1 auto;
    }
}

/* ============================================
   MOBILE: BOTONES CON SVG DE FONDO (boton.svg)
   ============================================ */
@media (max-width: 768px) {
    .category-button {
        background-image: url('../img/boton.svg');
        background-size: 100% 100%;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 14px 10px;
        min-height: 90px;
        gap: 6px;
        font-size: 0.85em;
    }

    .category-button.active,
    .category-button:hover {
        background-image: url('../img/boton.svg') !important;
        background-color: transparent !important;
        color: var(--accent-color) !important;
        box-shadow: none !important;
        filter: drop-shadow(0 2px 6px rgba(221,144,62,0.3));
    }

    .category-button .btn-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.8em !important;
    }

    .category-button .btn-icon img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    .category-button.active .btn-icon img,
    .category-button:hover .btn-icon img {
        filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(500%) hue-rotate(355deg) brightness(80%);
    }

    /* Botones especiales (menús especiales) — mismo SVG */
    .special-menu-button {
        background-image: url('../img/boton.svg') !important;
        background-size: 100% 100% !important;
        background-color: transparent !important;
        border: none !important;
    }
}

/* Iconos de producto: contener el tamaño */
.product-icon-row .product-icon-emoji,
.product-icon-row i,
.product-icon-row img {
    font-size: 0.95em;
    width: auto;
    height: auto;
    max-width: 22px;
    max-height: 22px;
}

/* ============================================
   NEGRONI — ICONOS DE PRODUCTO (tamaño fijo)
   Los SVG custom pueden ser enormes sin restricción
   ============================================ */
   .product-icon-custom {
   margin-left: 0 !important;
   }
   
.product-icon-custom,
.product-icon-row img,
.product-icons img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    margin-bottom: 4px;
    
}

.product-icon-emoji {
    font-size: 0.95em;
    line-height: 1;
}

.product-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin: 6px 0 0;
}

.product-icons i,
.product-icons span {
    width: 22px;
    height: 22px;
    font-size: 0.85em;
}


/* =============================================
   NEGRONI — RESTAURAR ESTÉTICA DE LA VERSIÓN FINAL
   (todo lo que se perdió en el refactor)
   ============================================= */

/* ── 1. SUBCATEGORY BUTTONS: pastillas Saphira, columna centrada ── */
.subcategories-buttons {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin: 24px 0;
    padding: 0 20px;
    align-items: stretch;
}

.subcategory-button {
    background: transparent;
    border: 2px solid var(--text-color) !important;
    border-radius: 50px !important;
    padding: 16px 30px !important;
    font-size: 1.5em !important;
    font-weight: bold !important;
    color: var(--text-color) !important;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Saphira', serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    letter-spacing: 0.02em;
    line-height: 1 !important;
}

.subcategory-button:hover,
.subcategory-button.active {
    background: var(--text-color) !important;
    color: var(--bg-color, #ecdcc3) !important;
    transform: translateY(-2px);
}

/* ── 2. PRODUCT CARDS: lista minimalista, sin tarjeta ── */
.products-grid {
    display: block !important;
    grid-template-columns: none !important;
}

.product-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    overflow: hidden;
    transition: none !important;
}

/* Separador delgado gris */
.product-card::after {
    content: '';
    display: block;
    clear: both;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-top: 18px;
}
.product-card.chef-special-card::after 
{
    border-bottom: none !important;
}

.product-card:last-child::after {
    border-bottom: none;
}

.product-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Imagen flotando a la derecha */
.product-card .product-image {
    float: right !important;
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 2px 0 8px 12px !important;
}

/* ── 3. NOMBRE + PRECIO: inline en el mismo renglón ── */
.product-name-row {
    display: block !important;
    text-align: left !important;
    line-height: 1.1!important;
    margin-bottom: -2px !important;
}

/* Iconos inline en tarjetas normales - fluyen después del precio */
.product-name-row .inline-icons {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    align-items: center !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    margin-bottom: 0px !important;
}

.product-name {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.90em !important;
    color: var(--text-color) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: inline !important;
    line-height: 1.1;
}

.price-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 0 0 6px !important;
    white-space: nowrap;
}

.price-container .product-price,
.price-container span {
    display: inline !important;
}

.product-price {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-size: 1em !important;
    font-weight: normal !important;
    color: var(--text-color) !important;
}

.product-price.old-price {
    text-decoration: line-through !important;
    color: #999 !important;
    font-size: 0.85em !important;
}

.product-price.promo-price {
    color: var(--accent-color) !important;
    font-weight: bold !important;
}

/* Producto con promo: nombre naranja */
.product-card.has-promotion .product-name {
    color: var(--accent-color) !important;
}

/* ── 4. DESCRIPCIÓN ── */
.product-description {
    font-size: 1em !important;
    color: #333 !important;
    line-height: 1.1 !important;
    margin: 4px 0 0 0 !important;
    text-align: left !important;
}

/* ── 5. ICONOS: debajo, alineados izquierda ── */
.product-icon-row {
    margin-top: 4px;
    justify-content: flex-start !important;
}

/* ── 6. PROMO BADGE: texto simple naranja, sin borde ── */
.promotion-badge {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--accent-color) !important;
    font-size: 0.8em !important;
    font-weight: bold !important;
    display: block !important;
    margin-top: 4px !important;
}

.promotion-description {
    background: none !important;
    border: none !important;
    color: #888 !important;
    font-size: 0.82em !important;
    padding: 0 !important;
    margin-top: 2px !important;
}

/* Sin stock */
.product-card.out-of-stock {
    opacity: 0.55;
}

.out-of-stock-badge {
    font-size: 0.78em;
    color: #999;
    display: block;
    margin-top: 4px;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Desktop: dos columnas de lista */
@media (min-width: 769px) {
    .products-grid {
        column-count: 2 !important;
        column-gap: 48px !important;
    }
    .product-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ── 7. SECTION GROUP BOX: caja con borde naranja ── */
.section-group-box {
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 8px !important;
    padding: 20px 20px 8px !important;
    margin-bottom: 28px !important;
    background: transparent !important;
}

.section-group-box .section-title-divider {
    margin-top: 0 !important;
}

/* Último producto dentro del box: sin separador */
.section-group-box .product-card:last-child::after {
    border-bottom: none !important;
}

/* ── 8. TEXTOS INFORMATIVOS: centrados ── */
.custom-text-container {
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    margin: 16px 0 !important;
    font-weight: bold !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.info-bar {
    text-align: center !important;
}

.category-description {
    text-align: center !important;
}

/* ── 9. NEGRONI: category sin tarjeta ── */
.category {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 16px !important;
    background: var(--bg-color) !important;
}

@media (max-width: 768px) {
    .category {
        padding: 16px 10px !important;
    }
}

/* ============================================
   NEGRONI — PRECIO SIN IVA
   ============================================ */
.price-without-vat {
    font-family: 'Nexa', Arial, sans-serif;
    font-size: 0.78em;
    color: #999;
    margin-top: 1px;
    margin-bottom: 0 !important;
    letter-spacing: 0.01em;
}


/* =============================================
   NEGRONI — TRES FIXES VISUALES
   ============================================= */

/* ── 1. TÍTULO DE CATEGORÍA: líneas flanqueando ── */
.category-title {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    font-size: 2.2em;
    text-align: center;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.category-title::before,
.category-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent) !important;
    min-width: 30px;
    /* anula el ::before anterior que era underline */
    position: static !important;
    transform: none !important;
    width: auto !important;
    bottom: auto !important;
    left: auto !important;
}

@media (max-width: 768px) {
    .category-title {
        font-size: 1.6em !important;
        gap: 12px !important;
    }
}

/* ── 2. FEATURED EN CATEGORÍA: no ocupa ancho completo, fluye con productos ── */
.featured-products-section {
    float: left !important;
    width: 45% !important;
    margin: 0 24px 24px 0 !important;
    padding: 18px !important;
    background: rgba(236, 220, 195, 0.5) !important;
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Clearfix en el products-grid para que el float no se desborde */
.products-grid::after {
    content: '';
    display: table;
    clear: both;
}

/* En mobile: ocupa todo el ancho y vuelve a bloque */
@media (max-width: 768px) {
    .featured-products-section {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
}

/* Card dentro de la sección featured: más compacta */
.featured-products-section .featured-product-card {
    display: block !important;
    grid-template-columns: none !important;
    padding: 12px !important;
    background: white !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    border: none !important;
    border-left: none !important;
    margin-bottom: 10px !important;
}

.featured-products-section .featured-product-img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    float: none !important;
}

.featured-products-section .featured-product-name {
    font-size: 1em !important;
    margin-bottom: 4px !important;
}

.featured-products-section .featured-product-price {
    font-size: 1.1em !important;
    margin-bottom: 4px !important;
}

/* ── 3. GENERIC PROMO CARD: stacking vertical, no grid ── */
.generic-promo-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px !important;
    background: white !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--accent-color) !important;
    box-shadow: none !important;
}

.generic-promo-card .featured-badge {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 4px !important;
}

.generic-promo-card .product-description {
    text-align: left !important;
    margin: 0 !important;
    font-size: 0.9em !important;
    color: #444 !important;
}

.generic-promo-card .promo-price-wrapper {
    margin-top: 6px !important;
}

.generic-promo-card .promo-price-value {
    display: block !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    color: var(--accent-color) !important;
}

.generic-promo-card .promo-schedule-box {
    font-size: 0.82em !important;
    color: #777 !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding-top: 8px !important;
}

/* ── CSS GRID para el layout featured + productos ── */
.category-content-layout {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 24px;
    align-items: start;
}

/* Si no hay featured, el products-column ocupa todo el ancho */
.category-content-layout:not(:has(.featured-products-section)) {
    grid-template-columns: 1fr;
}

.category-products-column {
    min-width: 0; /* evita overflow en grid */
}

/* En mobile: una sola columna */
@media (max-width: 768px) {
    .category-content-layout {
        grid-template-columns: 1fr !important;
    }
    .featured-products-section {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
}

/* Override: flex en lugar de grid (más compatible, maneja bien el caso sin featured) */
.category-content-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: flex-start !important;
}

.featured-products-section {
    flex: 0 0 38% !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.category-products-column {
    flex: 1 !important;
    min-width: 0 !important;
}

@media (max-width: 768px) {
    .category-content-layout {
        flex-direction: column !important;
    }
    .featured-products-section {
        flex: none !important;
        width: 100% !important;
    }
}


/* =============================================
   NEGRONI — FIXES FINALES (sesión 2026-02-23)
   ============================================= */

/* ── 1. TÍTULO CATEGORÍA: anular border-bottom del base, solo las líneas laterales ── */
.category-title {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    font-family: 'Saphira', serif !important;
    font-size: 2.2em !important;
    color: var(--accent-color) !important;
    text-align: center !important;
    margin: 40px 0 30px !important;
    white-space: nowrap !important;
}

/* Anular el ::before que era underline corto */
.category-title::before {
    content: '' !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: 2px !important;
    bottom: auto !important;
    left: auto !important;
    flex: 1 !important;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent) !important;
    display: block !important;
}

/* Agregar ::after como segunda línea */
.category-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent) !important;
    display: block !important;
}

/* ── 2. FEATURED LAYOUT: no aplastar cuando hay pocos productos ── */
/* Si la columna de productos es muy corta, el featured no debe estirarse */
.category-content-layout {
    align-items: flex-start !important;
}

/* En desktop cuando hay POCOS productos, evitar layout partido */
/* Cuando no hay featured-products-section, la columna ocupa todo */
.category-content-layout > .category-products-column:only-child {
    flex: 1 1 100% !important;
}

/* ── 3. PROMO GENÉRICA EN CATEGORÍA: restaurar estilo con borde verde ── */
.generic-promo-in-category {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: rgba(40, 167, 69, 0.05) !important;
    border: 1.5px solid #28a745 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

.generic-promo-in-category .promotion-badge {
    font-size: 0.9em !important;
    font-weight: bold !important;
    color: #28a745 !important;
    margin-bottom: 4px !important;
}

.generic-promo-in-category .product-description {
    text-align: left !important;
    font-size: 0.9em !important;
    color: #444 !important;
    margin: 0 !important;
}

.generic-promo-in-category .promo-price-wrapper {
    margin-top: 6px !important;
}

.generic-promo-in-category .promo-price-value {
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: var(--accent-color) !important;
}

.generic-promo-in-category .promo-schedule-box {
    font-size: 0.82em !important;
    color: #666 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
}


/* ── LÍNEAS DOBLES EN TÍTULO DE CATEGORÍA ── */
/* Override de los ::before y ::after para mostrar dos líneas cortas */
.category-title::before,
.category-title::after {
    max-width: 80px !important;   /* líneas cortas como en la captura */
    height: 1px !important;
    background: var(--accent-color) !important;
    box-shadow: 0 4px 0 var(--accent-color) !important;  /* segunda línea */
    /* anular el gradiente transparente */
    opacity: 1 !important;
}


/* =============================================
   MENÚ ESPECIAL — Estilos específicos
   ============================================= */

/* ── Botón VOLVER AL MENÚ ── */
.back-to-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 50px;
    font-family: 'Nexa', Arial, sans-serif;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.back-to-menu-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: translateX(-3px);
    box-shadow: 4px 0 16px rgba(221, 144, 62, 0.3);
}

.back-btn-container {
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
}

/* ── Caja Destacada ── */
.featured-box {
    border-radius: 12px;
    padding: 20px 24px;
    color: white;
    text-align: center;
}

.featured-box-title {
    font-family: 'Nexa', Arial, sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.featured-box-text {
    font-size: 0.95em;
    line-height: 1.6;
    opacity: 0.95;
}

.featured-box-text strong { font-weight: bold; }
.featured-box-text em { font-style: italic; }
.featured-box-text u { text-decoration: underline; }

/* ── Título de categoría en menú especial: igual que el principal ── */
.menu-especial .category-title,
[data-page="especial"] .category-title {
    /* hereda el estilo del tema: Saphira + líneas dobles */
    font-size: 1.8em !important;
}

/* ── Subcategoría título ── */
.subcategory-title {
    font-family: 'Nexa', Arial, sans-serif;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(221, 144, 62, 0.3);
    margin: 20px 0 12px;
}

/* ── Prix fixe box ── */
.prix-fixe-box {
    background: var(--accent-color);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
    margin: 16px 0;
}

.prix-fixe-box small {
    display: block;
    font-weight: normal;
    font-size: 0.78em;
    margin-top: 4px;
    opacity: 0.85;
}

/* ── Menu schedule / payment info ── */
.menu-schedule-info,
.menu-payment-info {
    background: rgba(221, 144, 62, 0.1);
    border-left: 3px solid var(--accent-color);
    padding: 8px 14px;
    border-radius: 0 6px 6px 0;
    margin: 8px 0;
    font-size: 0.9em;
    color: #555;
}

/* ── Custom text ── */
.menu-custom-text-primary {
    font-family: 'Nexa', Arial, sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    margin: 8px 0;
}

.menu-custom-text-secondary {
    font-size: 0.9em;
    color: #666;
    text-align: center;
    margin: 4px 0 12px;
}


/* =============================================
   MENÚ ESPECIAL — Header y fix orden productos
   ============================================= */

/* ── Header del menú especial: centrado y estilado ── */
.menu-header {
    text-align: center !important;
    padding: 20px 20px 10px !important;
    background: var(--bg-color) !important;
    border-bottom: none !important;
}

.menu-header h1 {
    font-family: 'Saphira', serif !important;
    font-size: clamp(2.5em, 8vw, 5em) !important;
    color: var(--text-color) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    font-weight: normal !important;
}

.menu-header h2,
.menu-header .subtitle {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-size: 0.85em !important;
    font-weight: 400 !important;
    color: #999 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
}

.header-logo-img {
    max-width: min(280px, 70%) !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Selectores de idioma */
.menu-header .lang-selector {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* ── Fix orden productos desktop en menú especial ──
   column-count rellena top-to-bottom por columna, lo que
   da la sensación de "orden invertido". Usamos CSS grid
   con orden fila-por-fila (el natural) en menu-especial  */
.menu-content .products-grid {
    column-count: unset !important;
    column-gap: unset !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 48px !important;
}

@media (max-width: 768px) {
    .menu-content .products-grid {
        grid-template-columns: 1fr !important;
    }
    .menu-header h1 {
        font-size: clamp(2em, 10vw, 3.5em) !important;
    }
}

/* Volver al menú: asegurar que se aplique el estilo bonito */
.back-to-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 32px !important;
    background: transparent !important;
    color: var(--accent-color) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 50px !important;
    font-family: 'Nexa', Arial, sans-serif !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.back-to-menu-btn:hover {
    background: var(--accent-color) !important;
    color: white !important;
    transform: translateX(-3px) !important;
}


/* ── Título del menú especial: con líneas dobles laterales ── */
.special-menu-title {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    justify-content: center !important;
    font-family: 'Saphira', serif !important;
    font-size: clamp(1.8em, 6vw, 2.8em) !important;
    color: var(--accent-color) !important;
    white-space: nowrap !important;
    margin-bottom: 16px !important;
    font-weight: normal !important;
}

.special-menu-title::before,
.special-menu-title::after {
    content: '' !important;
    flex: 1 !important;
    max-width: 80px !important;
    height: 1px !important;
    background: var(--accent-color) !important;
    box-shadow: 0 4px 0 var(--accent-color) !important;
    display: block !important;
}

@media (max-width: 768px) {
    .special-menu-title::before,
    .special-menu-title::after {
        max-width: 50px !important;
    }
}


/* =============================================
   FIXES — sesión 2026-02-24 (segunda ronda)
   ============================================= */

/* ── 1. TÍTULO FLYERS: centrado correcto con wrap ── */
.flyers-section-title.category-title {
    white-space: normal !important;
    word-break: break-word !important;
    justify-content: center !important;
    text-align: center !important;
    align-items: center !important;
    line-height: 1.2 !important;
}
.flyers-section-title.category-title::before,
.flyers-section-title.category-title::after {
    flex-shrink: 0 !important;
    min-width: 20px !important;
    max-width: 80px !important;
    align-self: center !important;
}
@media (max-width: 768px) {
    .flyers-section-title.category-title {
        font-size: 1.4em !important;
        gap: 10px !important;
    }
}

/* ── 2. PROMOS GENÉRICAS: centradas cuando hay 1 o 2 ──
   Truco: flex con justify-content center + max-width en items */
.generic-promos-container .products-grid,
.featured-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    column-count: unset !important;
}

.generic-promos-container .products-grid > *,
.featured-grid > * {
    flex: 0 1 280px !important;   /* no crece más allá de 280px, se encoge */
    max-width: 320px !important;
    min-width: 220px !important;
}

@media (max-width: 768px) {
    .generic-promos-container .products-grid > *,
    .featured-grid > * {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ── 3. PRODUCTO DESTACADO EN CATEGORÍA: integrado al flujo ── */

/* La tarjeta featured no tiene fondo especial — se integra al flow */
.product-card--featured {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--accent-color) !important;
    padding-bottom: 18px !important;
    margin-bottom: 4px !important;
}

/* Nombre: bold, accent-color, un poco más grande */
.featured-inline-name {
    font-weight: 900 !important;
    color: var(--accent-color) !important;
    font-size: 1.05em !important;
    font-family: 'Nexa', Arial, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Precio: igual que el normal */
.featured-inline-price {
    font-weight: bold !important;
    color: var(--text-color) !important;
}

/* Descripción: ligeramente más grande que la del producto normal */
.featured-inline-desc {
    font-size: 1em !important;     /* normal es ~0.88em */
    color: #555 !important;
    line-height: 1.55 !important;
    margin-top: 4px !important;
}

/* En desktop: el featured ocupa las 2 columnas completas del grid */
@media (min-width: 769px) {
    .product-card--featured {
        column-span: all !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        column-count: unset !important;
    }

    /* nombre y precio en la misma fila */
    .product-card--featured .product-name-row {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }

    /* precio sin IVA */
    .product-card--featured .price-without-vat {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
    }

    /* descripción */
    .product-card--featured .featured-inline-desc {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
    }

    /* imagen a la derecha, span de todas las filas */
    .product-card--featured .product-image {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 4 !important;
        width: 100px !important;
        height: 100px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-left: 16px !important;
    }
}


/* ============================================================
   FIX COLUMNAS + FEATURED — sesión 2026-02-24
   ============================================================ */

/* ── 1. Columnas de productos: Grid fila-por-fila (izquierda siempre igual o más) ──
   column-count balancea por altura → la derecha puede tener más items
   CSS Grid llena de izquierda a derecha, fila por fila → izquierda siempre ≥ derecha */
@media (min-width: 769px) {
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-count: unset !important;
        gap: 0 48px !important;
    }
    /* break-inside sigue funcionando en grid con esta propiedad */
    .product-card {
        break-inside: avoid !important;
    }
}

/* ── 2. Featured layout: producto destacado ARRIBA, ancho completo,
   luego los productos normales debajo en 2 columnas ── */
.category-content-layout {
    display: flex !important;
    flex-direction: column !important;  /* apilado vertical, no lado a lado */
    gap: 0 !important;
}

.featured-products-section {
    width: 100% !important;
    flex: none !important;
    float: none !important;
    margin: 0 0 24px 0 !important;
    box-sizing: border-box !important;
}

.category-products-column {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
}


/* ============================================================
   FIX CATEGORY-TITLE + FEATURED CARD — sesión 2026-02-24
   ============================================================ */

/* ── 1. CATEGORY-TITLE centrado — pisa todas las definiciones anteriores ── */
.category-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Saphira', serif !important;
    font-size: 2.2em !important;
    color: #000 !important;
    margin: 20px 0 20px !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    position: static !important;
    text-align: center !important;
}

.category-title::before,
.category-title::after {
    content: '' !important;
    display: block !important;
    flex: 1 !important;
    max-width: 80px !important;
    height: 1px !important;
    background: var(--accent-color) !important;
    box-shadow: 0 4px 0 var(--accent-color) !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    bottom: auto !important;
    left: auto !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .category-title {
        font-size: 2em !important;
        gap: 12px !important;
    }
    .category-title::before,
    .category-title::after {
        max-width: 50px !important;
    }
}

/* ── 2. FEATURED CARD: sin tarjeta blanca interna, layout limpio ── */
/* El box naranja de la sección va ancho completo arriba */
.featured-products-section {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 28px 0 !important;
    padding: 20px 24px !important;
    background: rgba(236, 220, 195, 0.35) !important;
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 8px !important;
}

/* La card interna: sin fondo blanco, layout horizontal nombre | precio */
.featured-products-section .featured-product-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 24px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    margin-bottom: 0 !important;
}

.featured-products-section .featured-product-card:last-child {
    border-bottom: none !important;
}

/* Nombre: bold, uppercase, accent-color */
.featured-products-section .featured-product-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-weight: 900 !important;
    font-size: 1em !important;
    text-transform: uppercase !important;
    color: var(--text-color) !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0 !important;
}

/* Descripción: debajo del nombre */
.featured-products-section .featured-product-desc,
.featured-products-section p {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 0.92em !important;
    color: #555 !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.5 !important;
}

/* Precio: derecha, grande */
.featured-products-section .featured-product-price {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1.15em !important;
    font-weight: bold !important;
    color: var(--accent-color) !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* Sin IVA: debajo del precio */
.featured-products-section .price-without-vat {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: right !important;
}

/* Imagen: visible dentro del box, columna 1 del grid */
.featured-products-section .featured-product-img {
    display: block !important;
}

/* Mobile: una columna */
@media (max-width: 768px) {
    .featured-products-section {
        padding: 16px !important;
    }
    .featured-products-section .featured-product-card {
        grid-template-columns: 1fr !important;
    }
    .featured-products-section .featured-product-price,
    .featured-products-section .price-without-vat {
        grid-column: 1 !important;
        text-align: left !important;
    }
    .featured-products-section .featured-product-price {
        grid-row: 2 !important;
    }
    .featured-products-section .price-without-vat {
        grid-row: 3 !important;
    }
    .featured-products-section .featured-product-desc,
    .featured-products-section p {
        grid-row: 4 !important;
    }
}


/* ============================================================
   FEATURED CARD + CHEF SPECIAL — layout definitivo
   ============================================================ */

/* ── FEATURED: box arriba, imagen+info bien alineados ── */
.featured-products-section {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 28px 0 !important;
    padding: 20px 24px !important;
    background: rgba(236, 220, 195, 0.35) !important;
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 8px !important;
}

/* ============================================================
   FEATURED PRODUCT CARD — en .featured-products-section
   Desktop: [IMG 220px] | [contenido alineado izq en su columna]
   Mobile:  imagen ancho completo + todo el contenido centrado
   ============================================================ */

/* Contenedor de la sección */
.featured-products-section {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 28px 0 !important;
    padding: 20px 24px !important;
    background: rgba(236, 220, 195, 0.35) !important;
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 10px !important;
}

/* Card: grid 2 col — imagen | contenido */
.featured-products-section .featured-product-card {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    column-gap: 24px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    margin-bottom: 0 !important;
}

.featured-products-section .featured-product-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Sin imagen: columna única */
.featured-products-section .featured-product-card:not(:has(.featured-product-img)) {
    grid-template-columns: 1fr !important;
}

/* Imagen: cuadrada 220px */
.featured-products-section .featured-product-img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 220px !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
}

/* Columna derecha: flex vertical, alineado izquierda */
.featured-products-section .featured-product-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

/* Nombre + iconos en la misma fila */
.featured-products-section .featured-product-name-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Nombre: Nexa bold, naranja, izquierda */
.featured-products-section .featured-product-name {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.1em !important;
    color: var(--accent-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.3 !important;
}

/* Iconos en la fila del nombre */
.featured-products-section .featured-product-name-row .product-icon-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
    margin-top: 0 !important;
}

/* Descripción: texto, izquierda */
.featured-products-section .featured-product-desc {
    font-size: 0.95em !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Precio: naranja bold, grande */
.featured-products-section .featured-product-price {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-size: 1.3em !important;
    font-weight: 900 !important;
    color: var(--accent-color) !important;
    text-align: left !important;
    white-space: nowrap !important;
    grid-column: unset !important;
    grid-row: unset !important;
    margin-top: 2px !important;
}

/* Precio sin IVA */
.featured-products-section .price-without-vat {
    font-size: 0.78em !important;
    color: #999 !important;
    text-align: left !important;
    margin-top: -4px !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* ── MOBILE: imagen ancho completo, todo centrado ── */
@media (max-width: 768px) {
    .featured-products-section {
        padding: 16px !important;
    }

    .featured-products-section .featured-product-card {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }

    .featured-products-section .featured-product-img {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 240px !important;
        border-radius: 10px !important;
        margin-bottom: 4px !important;
    }

    .featured-products-section .featured-product-info {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-items: center !important;  /* centra el contenido */
        width: 100% !important;
    }

    .featured-products-section .featured-product-name-row {
        justify-content: center !important;
        text-align: center !important;
    }

    .featured-products-section .featured-product-name {
        text-align: center !important;
    }

    .featured-products-section .featured-product-desc {
        text-align: center !important;
    }

    .featured-products-section .featured-product-price {
        text-align: center !important;
        font-size: 1.5em !important;
    }

    .featured-products-section .price-without-vat {
        text-align: center !important;
    }

    .featured-products-section .featured-product-name-row .product-icon-row {
        justify-content: center !important;
    }
}

/* ── CHEF SPECIAL: en su lugar en la lista, con borde y tipografía especial ── */
.product-card.chef-special-card {
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    margin-bottom: 15px !important;
}

.product-card.chef-special-card .product-name {
    font-family: 'Saphira', serif !important;
    font-size: 1.2em !important;
    color: var(--accent-color) !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}


/* =============================================
   NEGRONI — FEATURED SECTION (sección DESTACADO del menú principal)
   Aplica SOLO a .featured-section, no a .featured-products-section
   ============================================= */

/* ── Color de fondo: paleta de la marca ── */
.featured-section {
    background: linear-gradient(135deg,
        rgba(236, 220, 195, 0.95) 0%,
        rgba(221, 144, 62, 0.18) 100%) !important;
    border: 2px solid rgba(221, 144, 62, 0.45) !important;
    box-shadow: 0 4px 20px rgba(221, 144, 62, 0.15) !important;
}

/* ── Título "DESTACADO": Nexa, uppercase, bold, color marca ── */
.featured-section .featured-title {
    font-family: 'Nexa', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--accent-color) !important;
    text-shadow: none !important;
    font-size: 1.6em !important;
}

/* ── Grid: flex centrado (ya estaba, se refuerza) ── */
.featured-section .featured-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    column-count: unset !important;
}

.featured-section .featured-grid > * {
    flex: 0 1 280px !important;
    max-width: 340px !important;
    min-width: 220px !important;
}

@media (max-width: 768px) {
    .featured-section .featured-grid > * {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ── Tarjetas en la sección DESTACADO: verticales (flex column) ──
   CRÍTICO: anula el grid auto|1fr|auto que aplica el bloque del special menu  */
.featured-section .featured-product-card,
.featured-section .generic-promo-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: none !important;
    background: #ffefda!important;
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Ítems internos: centrados */
.featured-section .featured-product-card > *,
.featured-section .generic-promo-card > * {
    grid-column: unset !important;
    grid-row: unset !important;
    text-align: center !important;
    width: 100% !important;
}

/* Badge arriba */
.featured-section .featured-promo-badge,
.featured-section .featured-badge {
    background: var(--accent-color) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 900 !important;
    font-size: 0.95em !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Descripción */
.featured-section .product-description,
.featured-section .promo-description.featured {
    text-align: center !important;
    font-size: 0.92em !important;
    color: #555 !important;
    line-height: 1.55 !important;
    margin: 8px 0 !important;
}

/* Precios */
.featured-section .featured-price-container {
    margin-top: auto !important;
    padding-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
}

.featured-section .featured-price-new,
.featured-section .promo-price-value.featured {
    font-size: 1.6em !important;
    font-weight: 900 !important;
    color: var(--accent-color) !important;
}

.featured-section .featured-price-old {
    text-decoration: line-through !important;
    color: #aaa !important;
    font-size: 0.9em !important;
}

/* Nombre del producto */
.featured-section .featured-product-name-large {
    font-size: 1.2em !important;
    font-weight: 900 !important;
    color: var(--text-color) !important;
    text-align: center !important;
    margin: 8px 0 !important;
}