:root {
    --carbon: #1C1C1C;
    --ivory: #F5F0E8;
    --orange-red: #E8501A;
    --olive: #5A6B3A;
    --gray-100: #E8E4DD;
    --gray-300: #B8B2A8;
    --gray-600: #6B655C;
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

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

[hidden] { display: none !important; }

body {
    font-family: var(--font-body);
    background: var(--ivory);
    color: var(--carbon);
    line-height: 1.6;
}

button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f4a17f; outline-offset: 3px; }

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--orange-red);
    color: #fff;
    padding: 8px;
    z-index: 1000;
}
.skip-link:focus { top: 0; }

/* Header */
.site-header {
    background: var(--carbon);
    color: var(--ivory);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid var(--orange-red);
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: 4px;
    color: var(--ivory);
    text-decoration: none;
    text-transform: uppercase;
}
.logo img { display: block; width: 68px; height: 68px; object-fit: contain; }

.btn-cart {
    background: var(--orange-red);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1rem;
    min-height: 44px;
    cursor: pointer;
}
.cart-count {
    background: var(--ivory);
    color: var(--orange-red);
    border-radius: 50%;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
    margin-left: 0.3rem;
}

/* Hero */
.hero {
    background: linear-gradient(rgba(28,28,28,0.85), rgba(28,28,28,0.85)),
                url('/assets/img/burger-demo.webp') center/cover;
    color: var(--ivory);
    text-align: center;
    padding: 5rem 1.5rem;
    animation: fade-up 0.8s ease-out;
}
.hero h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 8vw, 5rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 1rem;
}
.hero-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    color: var(--gray-100);
}
.hero-status {
    font-weight: 700;
    font-size: 1.1rem;
    min-height: 1.5em;
}
.hero-status.status-closed { color: #ff6b6b; }

/* Promo banner */
.promo-banner {
    background: var(--orange-red);
    color: #fff;
    padding: 3rem 1.5rem;
    text-align: center;
    animation: fade-up 0.8s ease-out 0.2s both;
}
.promo-badge {
    background: var(--carbon);
    color: var(--ivory);
    padding: 0.3rem 1rem;
    border-radius: 4px;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 0.8rem;
}
.promo-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 5vw, 3rem);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.promo-price {
    font-size: 2rem;
    font-weight: 900;
    margin: 1rem 0;
}

/* Menu */
.menu-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--carbon);
    margin-bottom: 1.5rem;
}
.category-filters {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.category-btn {
    background: var(--gray-100);
    border: 2px solid transparent;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 44px;
}
.category-btn.active {
    background: var(--carbon);
    color: var(--ivory);
    border-color: var(--orange-red);
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.menu-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    min-width: 0;
    animation: fade-up 0.6s ease-out both;
}
.menu-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.menu-card:hover img { transform: scale(1.03); }
.menu-card-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; }
.menu-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}
.ingredients { color: var(--gray-600); font-size: 0.95rem; margin-bottom: 0.8rem; flex: 1; }
.price { font-size: 1.5rem; font-weight: 900; color: var(--orange-red); margin-bottom: 0.8rem; }
.demo-label { color: var(--gray-600); font-size: .76rem; margin: -.55rem 0 .65rem; }

/* Botones */
.btn {
    display: inline-block;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.2s, transform 0.1s;
    text-align: center;
}
.btn-primary { background: var(--orange-red); color: #fff; }
.btn-primary:hover { background: #c94415; }
.btn:disabled { background: var(--gray-300); color: var(--gray-600); cursor: not-allowed; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: var(--gray-100); color: var(--carbon); }
.btn-block { width: 100%; }
.btn:hover { filter: brightness(.96); }
.btn:focus-visible, .btn-cart:focus-visible, .category-btn:focus-visible { outline-color: var(--orange-red); }

/* Carrito */
.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 100vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    overflow: hidden;
    overscroll-behavior: contain;
}
.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex: 0 0 auto; }
.cart-header h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; text-transform: uppercase; }
.btn-close { background: none; border: none; font-size: 2rem; cursor: pointer; line-height: 1; min-width: 44px; min-height: 44px; }
.cart-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 .15rem; }
.empty-cart-message {
    min-height: 14rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2rem;
    color: var(--gray-600);
    text-align: center;
}
.empty-cart-message strong {
    color: var(--carbon);
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
}
.empty-cart-message span { max-width: 18rem; }
.cart-panel.is-empty .cart-items {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-panel.is-empty .cart-footer {
    border-top: 0;
    padding-top: 0;
}
.cart-panel.is-empty .delivery-toggle,
.cart-panel.is-empty #deliveryForm,
.cart-panel.is-empty #checkoutButton,
.cart-panel.is-empty .cart-issues { display: none !important; }
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.cart-item-info { min-width: 0; display: grid; gap: .15rem; }
.cart-item-info strong { overflow-wrap: anywhere; }
.cart-item-info small { color: var(--gray-600); line-height: 1.4; }
.cart-item-actions { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.btn-qty, .btn-remove {
    background: var(--gray-100);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
}
.btn-qty { width: 44px; height: 44px; }
.btn-edit-item { min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--gray-300); border-radius: 4px; background: #fff; color: var(--carbon); font-weight: 700; cursor: pointer; }
.btn-edit-item:hover { background: var(--gray-100); }
.btn-remove { width: 44px; height: 44px; }
.btn-remove { background: #ffdddd; color: #c00; }
.cart-footer { flex: 0 0 auto; max-height: 54dvh; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 0 max(.65rem, env(safe-area-inset-bottom)); border-top: 2px solid var(--carbon); background: #fff; }
.total-row { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }
.total-final { font-weight: 900; font-size: 1.25rem; font-variant-numeric: tabular-nums; padding-top: .4rem; }
.delivery-toggle { margin: .8rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.delivery-toggle label { display: flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: .5rem; border: 1px solid var(--gray-300); border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1.3; }
.delivery-toggle input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--orange-red); }
.delivery-toggle label.is-disabled { opacity: .55; cursor: not-allowed; }
.delivery-unavailable { font-size: .72rem; color: #777; }
#deliveryForm { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
#deliveryForm[hidden] { display: none !important; }
#deliveryForm label { font-size: 0.9rem; font-weight: 600; }
#deliveryForm input, #deliveryForm textarea {
    padding: 0.6rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    min-height: 44px;
    width: 100%;
}
#deliveryForm textarea { min-height: 5rem; resize: vertical; }
#checkoutButton { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 16px rgba(255,255,255,.96); min-height: 52px; }
.cart-issues { padding: .75rem; border-radius: 6px; background: #fff0eb; }
.cart-issues { color: #c00; font-weight: 600; margin-top: 0.8rem; }

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    border-radius: 14px;
    padding: 0;
    width: min(31rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(90dvh, 48rem);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.modal::backdrop { background: rgba(0,0,0,0.6); }
.modal-content { padding: clamp(1rem, 4vw, 1.4rem); overflow-y: auto; overscroll-behavior: contain; max-height: min(90dvh, 48rem); }
.modal h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; text-transform: uppercase; margin-bottom: 1rem; }
.customize-modal .modal-content { display: grid; gap: 1rem; }
.customize-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.customize-eyebrow { color: var(--orange-red); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; margin-bottom: .15rem; }
.customize-heading h2 { font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.05; margin: 0; }
.modal-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--gray-100); border-radius: 50%; background: #fff; color: var(--carbon); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-close:hover { background: var(--gray-100); }
.customize-intro { margin: 0; color: var(--gray-600); font-size: .92rem; line-height: 1.45; }
#customizeForm { display: grid; gap: 1rem; min-width: 0; }
.customize-section-heading { margin-bottom: .55rem; }
.customize-section-heading h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.customize-section-heading p { color: var(--gray-600); font-size: .84rem; }
#customizeIngredients { display: grid; gap: .45rem; max-height: min(36dvh, 16rem); overflow-y: auto; overscroll-behavior: contain; }
.ingredient-check {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    min-height: 54px;
    margin: 0;
    border: 1px solid #e3ded6;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ingredient-check:has(input:checked) { border-color: #dfd8cf; background: #fff; }
.ingredient-check:has(input:not(:checked)) { border-color: #edaa92; background: #fff5f1; }
.ingredient-check input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--orange-red); }
.ingredient-name { flex: 1; min-width: 0; }
.ingredient-state { color: var(--gray-600); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ingredient-check:has(input:not(:checked)) .ingredient-state { color: #b53f1d; }
.customize-summary { padding: .6rem .75rem; border-radius: 8px; background: #f6f3ee; color: var(--gray-600); font-size: .85rem; margin-top: .55rem; }
.customize-empty { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem; border: 1px solid #f0d3c8; border-radius: 10px; background: #fff7f3; }
.customize-empty-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #fbe4db; color: #bd441f; font-size: 1.15rem; }
.customize-empty strong { display: block; margin-bottom: .2rem; font-size: .92rem; }
.customize-empty p { color: var(--gray-600); font-size: .84rem; line-height: 1.4; }
.customize-notes { display: grid; gap: .45rem; min-width: 0; }
.customize-notes label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 700; }
.customize-notes label span { color: var(--gray-600); font-size: .78rem; font-weight: 500; }
#customizeRemoveText { width: 100%; min-height: 48px; padding: .7rem .75rem; border: 1px solid #c9c2b8; border-radius: 8px; }
.customize-removals { display: grid; gap: .4rem; min-width: 0; }
.customize-removals label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 700; }
.customize-removals label span:last-child { color: var(--gray-600); font-size: .78rem; font-weight: 500; }
.customize-removals small { color: var(--gray-600); font-size: .78rem; line-height: 1.4; }
#customizeNotes { width: 100%; min-height: 6rem; padding: .75rem; border: 1px solid #c9c2b8; border-radius: 8px; resize: vertical; line-height: 1.45; }
#customizeNotes:focus-visible { border-color: var(--orange-red); }
.notes-count { justify-self: end; color: var(--gray-600); font-size: .74rem; }
.modal-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: .65rem; position: sticky; bottom: -1.4rem; padding: .8rem 0 0; margin-top: .1rem; background: #fff; border-top: 1px solid var(--gray-100); }
.modal-actions .btn { width: 100%; min-height: 48px; padding-inline: .7rem; }

/* Footer */
.site-footer {
    background: var(--carbon);
    color: var(--gray-300);
    text-align: center;
    padding: 1.5rem;
    font-size: 0.85rem;
    margin-top: 3rem;
}

/* Animaciones */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .menu-card:hover img { transform: none; }
}

/* Responsive */
@media (max-width: 600px) {
    .header-inner { padding: .65rem 1rem; min-height: 60px; }
    .logo { font-size: 1.45rem; letter-spacing: 2px; }
    .logo img { width: 58px; height: 58px; }
    .btn-cart { padding: .55rem .8rem; font-size: .92rem; }
    .hero { padding: 3.25rem 1.1rem 3rem; }
    .hero-subtitle { font-size: 1rem; line-height: 1.5; }
    .menu-section { margin: 2rem auto; padding: 0 1rem; }
    .section-title { text-align: left; font-size: 2.25rem; margin-bottom: .75rem; }
    .category-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: .25rem .15rem .65rem; margin: 0 -.15rem 1rem; scrollbar-width: thin; }
    .category-btn { flex: 0 0 auto; }
    .menu-grid { grid-template-columns: 1fr; gap: .8rem; }
    .menu-card { display: grid; grid-template-columns: minmax(6.25rem, 34%) minmax(0, 1fr); border-radius: 10px; }
    .menu-card img { height: 100%; min-height: 10rem; aspect-ratio: auto; object-fit: cover; }
    .menu-card-body { padding: .8rem; }
    .menu-card h3 { font-size: 1.28rem; line-height: 1.05; }
    .ingredients { font-size: .82rem; line-height: 1.4; margin-bottom: .45rem; }
    .price { font-size: 1.25rem; margin-bottom: .5rem; }
    .demo-label { margin: -.35rem 0 .45rem; font-size: .7rem; }
    .menu-card .btn { padding: .65rem .5rem; font-size: .88rem; min-height: 48px; }
    .cart-panel { width: 100vw; padding: max(.7rem, env(safe-area-inset-top)) 1rem max(.7rem, env(safe-area-inset-bottom)); }
    .cart-header h2 { font-size: 1.6rem; }
    .cart-footer { max-height: 57dvh; }
    .modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px; }
    .customize-modal { inset: auto 0 0; width: 100vw; max-height: min(88dvh, 48rem); margin: 0 auto; border-radius: 18px 18px 0 0; }
    .customize-modal .modal-content { max-height: min(88dvh, 48rem); padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
    #customizeIngredients { max-height: min(32dvh, 15rem); }
    .modal-actions { grid-template-columns: .75fr 1.25fr; gap: .5rem; }
    .modal-actions .btn { padding: .7rem .45rem; font-size: .88rem; }
}

@media (max-width: 370px) {
    .menu-card { grid-template-columns: minmax(5.5rem, 32%) minmax(0, 1fr); }
    .menu-card img { min-height: 9rem; }
    .menu-card-body { padding: .7rem; }
    .menu-card .btn { font-size: .82rem; }
    .delivery-toggle { grid-template-columns: 1fr; }
}