/* ============================================================
   CARTA DIGITAL — ÑAM Gourmet
   Archivo independiente. No importar en styles.css.
   Los tokens de marca compartidos viven en tokens.css (cargado antes
   que este archivo en carta.html).
============================================================ */

/* @font-face — BlairITC para display */
@font-face {
  font-family: 'BlairITC';
  src: url('../fonts/blair-itc-medium.woff2') format('woff2'),
       url('../fonts/blair-itc-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS ESPECÍFICOS DE PÁGINA (carta)
   Solo el chrome sticky propio de la carta. El resto: tokens.css.
============================================================ */
:root {
  /* Nav top (logo) + nav categorías sticky */
  --nav-top-h:   64px;
  --nav-cat-h:   52px;
  --chrome-h:    calc(var(--nav-top-h) + var(--nav-cat-h));
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   ICON UTILITIES
============================================================ */
.icon { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.icon-veggie { color: var(--veggie); }
.icon-chili  { color: var(--chili); }
.icon-person { color: var(--white-dim); }

/* ============================================================
   NAV TOP (logo + volver)
============================================================ */
.carta-nav-top {
  position: sticky;
  top: 0;
  z-index: 300;
  height: var(--nav-top-h);
  background: rgba(17,17,17,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
}
.carta-nav-top-logo {
  display: flex;
  align-items: center;
  height: 32px;
  text-decoration: none;
}
.carta-nav-top-logo img { height: 32px; width: auto; }
/* Link "Inicio": mismo estilo y tamaño que los enlaces del navbar del landing
   (Especialidades/Premios/Sucursales), solo que en naranja para destacar.
   Sin recuadro/botón. */
.carta-nav-top-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.carta-nav-top-back:hover,
.carta-nav-top-back:focus-visible { color: var(--accent-dim); }
.carta-nav-top-back::before {
  content: '←';
  font-family: var(--font-body);
  font-size: 14px;
  transition: transform 0.2s;
}
.carta-nav-top-back:hover::before { transform: translateX(-3px); }

.carta-nav-top-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.carta-nav-top-social a {
  display: inline-flex;
  align-items: center;
  color: var(--white-dim);
  text-decoration: none;
  transition: color 0.2s, transform 0.15s;
}
.carta-nav-top-social a:hover,
.carta-nav-top-social a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}

/* ============================================================
   NAV CATEGORÍAS (sticky bajo el nav-top)
============================================================ */
.carta-nav-cats {
  position: sticky;
  top: var(--nav-top-h);
  z-index: 290;
  height: var(--nav-cat-h);
  background: rgba(24,24,24,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.carta-nav-cats-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--pad-x);
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.carta-nav-cats-inner::-webkit-scrollbar { display: none; }

.cat-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  /* ~33px de alto: cumple WCAG 2.5.8 AA (24px). No forzamos 44px (AAA)
     porque llenaría el nav sticky de chips y se vería apretado. */
  padding: 8px 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white-dim);
  border: 1px solid transparent;
  border-radius: 100px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.cat-chip:hover,
.cat-chip:focus-visible {
  color: var(--white);
  background: var(--white-faint);
}
.cat-chip.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   PAGE HEADER
============================================================ */
.carta-header {
  padding: var(--space-lg) var(--pad-x) var(--space-md);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.carta-header::before {
  content: '';
  position: absolute;
  left: var(--pad-x);
  top: 0;
  width: 1px;
  height: 64px;
  background: var(--accent);
}
.carta-header-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 12px;
  /* Offset chico para que (a) no choque con la línea naranja vertical
     (.carta-header::before en left: var(--pad-x)) y (b) se alinee
     visualmente con el sidebearing del headline (mismo trato que el
     .hero-eyebrow del landing) */
  padding-left: 10px;
}
.carta-header-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--white);
}
.carta-header-title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}
.carta-header-sub {
  margin-top: 20px;
  font-size: 14px;
  color: var(--white-dim);
  max-width: 480px;
}

/* Watermark logo */
.carta-header-wm {
  position: absolute;
  right: var(--pad-x);
  bottom: 10px;
  width: clamp(140px, 18vw, 260px);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   MAIN LAYOUT — GRIDS DE CATEGORÍAS
============================================================ */
.carta-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x) var(--space-xl);
}

/* Grid de categorías principales (Hamburguesas, Lomos, Lomos DC, Pizzas)
   Siempre 1 columna en todos los breakpoints. */
.cat-grid-principal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Grid de categorías secundarias (Papas/Bebidas, Postres)
   ≥1200px → 2 cols | <1200px → 1 col */
.cat-grid-secundaria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 1200px) {
  .cat-grid-secundaria {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   SECCIÓN DE CATEGORÍA
============================================================ */
.cat-section {
  padding: var(--space-lg) var(--pad-x);
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Separador vertical entre columnas en el grid secundario (Papas/Bebidas + Postres a partir de 1200px).
   El grid principal ya no se divide en columnas, así que no necesita separador vertical. */
@media (min-width: 1200px) {
  .cat-grid-secundaria .cat-section:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
}

.cat-section-header {
  margin-bottom: var(--space-md);
  position: relative;
}
.cat-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cat-section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.cat-section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--white);
}
.cat-section-title-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
/* Variante usada en Lomos Doble Carne: ancla el sticker rotado al
   final del texto "DOBLE CARNE", no a la sección entera */
.cat-section-title-outline--anchor {
  position: relative;
  display: inline-block;
}

/* Tagline / note bajo el título */
.cat-tagline {
  margin-top: 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--white-dim);
  padding-left: 2px;
}

/* ============================================================
   STICKER ROTADO — Lomos Doble Carne
   Vive DENTRO del span .cat-section-title-outline--anchor para
   anclarse al final del texto "DOBLE CARNE" en vez de la sección
   entera. Se superpone visualmente con la "E" final de CARNE.
============================================================ */
.sticker-rotado {
  display: inline-block;
  background: var(--accent);
  /* Romper la herencia del parent .cat-section-title-outline
     (que tiene color: transparent + text-stroke para el efecto outline) */
  color: var(--bg);
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--bg);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  line-height: 1.2;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
  position: absolute;
  /* Anclado al final del texto "DOBLE CARNE", apenas superpuesto sobre
     la "E" final. left:100% pone el sticker arrancando justo al borde
     derecho del span; translate(-12%, -50%) lo corre 12% hacia atrás
     (lo justo para que tape un toque la E) y lo centra verticalmente. */
  top: 50%;
  left: 100%;
  transform: translate(-120%, -220%) rotate(10deg);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   VARIANTES DE PRODUCTO — sublínea sutil bajo el nombre
============================================================ */
.product-variants {
  font-size: 11.5px;
  color: var(--white-dim);
  margin-top: 4px;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-style: italic;
}

/* ============================================================
   PARTNER LOGO en el header de sección (ej: Simplot en PAPAS Y BEBIDAS)
   Posicionado a la derecha, centrado verticalmente, alto 60% del header.
   El .cat-section-header ya tiene position: relative (definido arriba).
============================================================ */
.cat-section-header--with-partner {
  /* min-height para garantizar espacio del logo cuando el título sea chico */
  min-height: 120px;
}
.cat-section-partner-logo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: auto;
  opacity: 0.85;
  /* El SVG de Simplot ya tiene fill blanco, no necesita inversión */
}

/* ============================================================
   BANNER VEGGIE
============================================================ */
.veggie-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(46,184,114,0.1);
  border: 1px solid rgba(46,184,114,0.25);
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: var(--space-md);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--veggie);
}

/* ============================================================
   GRILLAS INTERNAS DE PRODUCTOS
============================================================ */

/* Hamburguesas y Lomos: 1 columna */
.products-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Pizzas: contenedor con container query para decidir 1 o 2 columnas */
.products-grid-2-container {
  container-type: inline-size;
  container-name: pizzas-grid;
}

.products-grid-2 {
  display: grid;
  grid-template-columns: 1fr; /* default: 1 col (mobile / angosto) */
  gap: 2px;
}

/* ≥800px de ancho real del contenedor: 2 columnas internas */
@container pizzas-grid (min-width: 800px) {
  .products-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fallback para browsers sin container queries (muy raro hoy) */
@media (max-width: 640px) {
  .products-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PRODUCT CARD — container queries para layout adaptativo
============================================================ */

/* El contenedor de la card define el contexto para container queries */
.product-card {
  container-type: inline-size;
  container-name: product-card;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}
.product-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}

/* Layout interno de la card: por defecto (angosto/mobile) stack vertical */
.product-card-inner {
  display: flex;
  flex-direction: column;
}

/* Cuando la card tiene ≥520px de ancho: layout 2 columnas (info | precios) */
@container product-card (min-width: 520px) {
  .product-card-inner {
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
  }

  /* Columna izquierda: nombre + descripción — crece para llenar el espacio */
  .product-card-info {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 1px solid var(--border);
  }

  /* Columna derecha: precios — ANCHO FIJO (flex-basis) para que todas las
     cards de la misma categoría tengan exactamente el mismo bloque de precios,
     independiente de cuánto ocupe el contenido. */
  .product-card-prices {
    flex: 0 0 350px;    /* Hamburguesas (3 cols simple/doble/triple) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
  }

  /* Lomos: 2 sub-bloques mediano/grande — necesitan más ancho */
  .product-card-prices:has(.price-grid--lomo) {
    flex-basis: 470px;
  }

  /* En 2-col los price-grid no necesitan border-top ni padding extra,
     y deben ocupar el 100% del ancho del .product-card-prices */
  .product-card-prices .price-grid,
  .product-card-prices .price-grid--lomo {
    border-top: none;
    padding: 0;
    width: 100%;
  }

  /* Separadores verticales entre Simple / Doble / Triple en burgers (2-col).
     Dos líneas finas a 33.33% y 66.66% del ancho del .price-grid--burger. */
  .product-card-prices .price-grid--burger {
    background-image:
      linear-gradient(var(--border), var(--border)),
      linear-gradient(var(--border), var(--border));
    background-size: 1px 100%, 1px 100%;
    background-position: 33.33% 50%, 66.66% 50%;
    background-repeat: no-repeat;
  }

  /* El precio único de pizza se centra y escala */
  .product-card-prices .product-price-single {
    font-size: 20px;
    white-space: nowrap;
  }
}

/* Wrapper de la sección de precios para poder aplicar el container query */
.product-card-info {
  /* Por defecto: columna única, no necesita estilos extra */
}
.product-card-prices {
  /* Por defecto (angosto): los precios van debajo, sin borde lateral */
}

.product-card-header {
  padding: 14px 18px 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.product-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.product-name {
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 18px);
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.1;
}

/* Precio único (Pizzas) — columna fija a la derecha, ancho uniforme para
   que todos los precios queden alineados verticalmente entre cards. */
.product-price-single {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.product-price-single.is-todo {
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
}

/* ============================================================
   DESCRIPCIÓN — expand-in-place en mobile
============================================================ */
.product-desc-wrap {
  /* Desktop: siempre visible */
}

/* Usamos <details>/<summary> para la interacción nativa.
   En desktop lo abrimos con CSS; en mobile el usuario controla. */
.product-details {
  border-top: 1px solid var(--border);
}
.product-details[open] {}

/* Desktop: forzar abierto visualmente via CSS — sin JS */
@media (min-width: 768px) {
  .product-details {
    /* No se puede forzar [open] con CSS puro de manera confiable en todos los browsers.
       La solución: renderizamos el contenido FUERA del <details> en desktop,
       y dentro del <details> solo para mobile. Alternativa: usamos attr + JS mínimo.
       Optamos por JS mínimo en carta.js para togglear clase .always-open en desktop. */
    pointer-events: none;
  }
  .product-details summary {
    display: none;
  }
  .product-details .product-desc-inner {
    display: block !important;
    padding: 0 18px 14px;
  }
}

@media (max-width: 767px) {
  .product-details {
    pointer-events: auto;
  }
  .product-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px; /* zona táctil ~44px en mobile */
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-dim);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.15s;
  }
  .product-details summary::-webkit-details-marker { display: none; }
  .product-details summary::marker { display: none; }
  .product-details summary:hover,
  .product-details summary:focus-visible { color: var(--white); }
  .product-details summary::before {
    content: '▸';
    font-size: 9px;
    transition: transform 0.2s;
    display: inline-block;
  }
  .product-details[open] summary::before {
    transform: rotate(90deg);
  }
  .product-details[open] summary {
    color: var(--white);
  }
  .product-desc-inner {
    padding: 0 18px 14px;
    animation: desc-reveal 0.2s ease;
  }
  @keyframes desc-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.product-desc {
  font-size: 13px;
  color: var(--white-dim);
  line-height: 1.6;
}
.product-desc.is-todo {
  color: var(--white-dim);
  font-style: italic;
}

/* ============================================================
   GRILLA DE PRECIOS — Hamburguesas (3 cols)
============================================================ */
.price-grid {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
}
.price-grid-header {
  display: grid;
  margin-bottom: 4px;
}
.price-grid-body {
  display: grid;
}

/* Hamburguesas: Simple / Doble / Triple */
.price-grid--burger .price-grid-header,
.price-grid--burger .price-grid-body {
  grid-template-columns: 1fr 1fr 1fr;
}
.price-grid-col-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-align: center;
  padding-bottom: 4px;
}
.price-val {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent);
  text-align: center;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-val.is-todo {
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
}

/* ============================================================
   GRILLA DE PRECIOS — Lomos (4 cols en 2 sub-bloques)
============================================================ */
.price-grid--lomo {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.price-subblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.price-subblock + .price-subblock {
  border-left: 1px solid var(--border);
  padding-left: 12px;
}

.price-subblock-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Texto chico al lado de los íconos de personas: "200gr Carne", "400gr Carne", etc. */
.price-subblock-grams {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  font-style: italic;
  margin-left: 2px;
  white-space: nowrap;
}
.price-subblock-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.price-subblock-persons {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--white-dim);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.price-row-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  display: flex;
  align-items: center;
}
.price-row-val {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-row-val.is-todo {
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
}

/* Responsive: en pantallas muy chicas el grid de lomos colapsa */
@media (max-width: 420px) {
  .price-grid--lomo {
    grid-template-columns: 1fr;
  }
  .price-subblock + .price-subblock {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 10px;
    margin-top: 8px;
  }
}

/* ============================================================
   NOTA "TODAS CON PAPAS"
============================================================ */
.papas-note {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 4px;
  opacity: 0.7;
}

/* ============================================================
   EXTRAS BLOCK
============================================================ */
.extras-block {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* En desktop (cuando las cards están en layout 2-col con precios a la derecha),
   el bloque de extras se constriñe al mismo ancho que la columna de precios
   y se alinea a la derecha — así los ingredientes quedan al lado de sus precios. */
@media (min-width: 768px) {
  /* Burgers: ancho del .product-card-prices de hamburguesas */
  .extras-block:has(.extras-grid--2) {
    max-width: 350px;
    margin-left: auto;
  }
  /* Lomos: ancho del .product-card-prices de lomos */
  .extras-block:has(.extras-grid--3) {
    max-width: 470px;
    margin-left: auto;
  }
}
.extras-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.extras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
/* Lomos extras: 3 columnas (nombre + mediano + grande) */
.extras-grid--3 {
  grid-template-columns: 1fr auto auto;
}
.extras-col-header {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-align: right;
  padding-bottom: 4px;
}
.extras-col-header:first-child { text-align: left; }
.extra-item {
  display: contents;
}
.extra-name {
  font-size: 13px;
  color: var(--white);
}
.extra-price {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--accent);
  text-align: right;
}
/* 2-col extras (burgers): name + price inline */
.extras-grid--2 {
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
}
.extras-grid--2 .extra-price {
  white-space: nowrap;
}

/* ============================================================
   SECCIÓN PIZZAS — tagline especial
============================================================ */
.pizza-tagline {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-size: 13px;
  font-style: italic;
  color: var(--white-dim);
  padding: 8px 14px;
  border-left: 2px solid var(--accent);
  background: var(--accent-faint);
}

/* ============================================================
   PAPAS Y BEBIDAS
============================================================ */
.subsection-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}
.subsection-title:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

.simple-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.simple-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  gap: 16px;
}
.simple-item-name {
  font-size: 14px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.simple-item-price {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.simple-item-price.is-todo {
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
}

/* ============================================================
   ORDER FOOTER — "Para pedir, elegí tu local"
============================================================ */
.order-footer {
  padding: var(--space-lg) var(--pad-x) var(--space-xl);
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}
.order-footer-header {
  margin-bottom: var(--space-md);
}
.order-footer-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-footer-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.order-footer-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.95;
  color: var(--white);
}
.order-footer-title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}

.order-branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: var(--space-md);
}
.order-branch-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.order-branch-card:hover,
.order-branch-card:focus-visible {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.order-branch-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--white);
  letter-spacing: 0.02em;
}
.order-branch-cta {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.order-branch-cta::after {
  content: '→';
  transition: transform 0.2s;
}
.order-branch-card:hover .order-branch-cta::after { transform: translateX(4px); }

.order-coming {
  margin-top: 16px;
  font-size: 12px;
  color: var(--white-dim);
  letter-spacing: 0.06em;
}

/* ============================================================
   FOOTER
============================================================ */
.carta-footer {
  padding: var(--space-md) var(--pad-x);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.carta-footer-logo img { height: 28px; width: auto; }
.carta-footer-copy {
  font-size: 11px;
  color: var(--white-dim);
  letter-spacing: 0.06em;
}
.carta-footer-social {
  display: flex;
  gap: 14px;
}
.carta-footer-social a {
  color: var(--white-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px; /* zona táctil ≥44px (el ícono mide 20px) */
  transition: color 0.2s;
}
.carta-footer-social a:hover,
.carta-footer-social a:focus-visible { color: var(--accent); }

/* ============================================================
   MOBILE RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  :root {
    --pad-x: 20px;
    --nav-top-h: 56px;
    --nav-cat-h: 48px;
  }
  .carta-nav-top-social { display: none; }
  .cat-section { padding: var(--space-md) var(--pad-x); }

  /* Títulos display: tamaños mobile más chicos para que entren de una */
  .carta-header-title { font-size: clamp(28px, 9vw, 56px); }
  .cat-section-title { font-size: clamp(20px, 6.5vw, 44px); }
  /* Salvaguarda: que el título nunca sea más ancho que el contenedor */
  .carta-header-title, .cat-section-title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  /* Outline más fino en móvil */
  .carta-header-title em { -webkit-text-stroke-width: 1.5px; }
  .cat-section-title-outline { -webkit-text-stroke-width: 1px; }

  /* minmax(0,1fr) permite que las columnas se encojan y no desborden */
  .price-grid--burger .price-grid-header,
  .price-grid--burger .price-grid-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .price-val { font-size: 13px; }
  /* Lomos: apilar Mediano/Grande en una columna en todos los móviles */
  .price-grid--lomo { grid-template-columns: 1fr; }
  .price-subblock + .price-subblock {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 10px;
    margin-top: 8px;
  }
  .order-branches-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .order-branches-grid { grid-template-columns: 1fr; }
  .carta-footer { flex-direction: column; align-items: flex-start; }
  .carta-header-title { font-size: clamp(30px, 11vw, 56px); }
}

/* ============================================================
   SCROLL OFFSET para las secciones (compensa navs sticky)
============================================================ */
.cat-section {
  scroll-margin-top: calc(var(--chrome-h) + 8px);
}

/* ============================================================
   GRAIN TEXTURE OVERLAY — coherencia visual con landing
============================================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9998;
}

/* ============================================================
   PREFERS-REDUCED-MOTION — respetar la preferencia del sistema
   (transiciones/animaciones casi instantáneas y scroll sin animar)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}