/* =============================================================================
   WYN PIZZA — LA MARCA
   -----------------------------------------------------------------------------
   PALETA: la del BRANDBOOK OFICIAL de 28 páginas, no la del sitio viejo.
     navy #0F1C42 · naranja #FF8000 · azul eléctrico #0080FF
   El WordPress que se reemplaza usaba #F39200/#0069B4 (conversiones de imprenta
   en CMYK) y un fondo #00375B que no existe en el brandbook. Se corrige acá a
   propósito: la directiva de Studio del 24-jul es anclar SIEMPRE al brandbook.

   ⚠️ 19-ago: este encabezado decía lo correcto y los TOKENS de abajo decían otra
   cosa. El 11-ago se cambiaron los valores a los del WordPress viejo y nadie tocó
   este texto, así que el archivo se contradecía a sí mismo durante ocho días.
   Un comentario que describe un valor y el valor tienen que vivir juntos, o el
   comentario se vuelve una mentira con fecha (es R16 dentro de una hoja de estilo).

   El papel #E3E5F5 sí sale del material del cliente: es el fondo exacto,
   muestreado del PNG de su menú impreso. Los colores se miden, no se estiman.

   TIPOGRAFÍA: el brandbook pide Nickel Gothic Variable Wide (titulares) y Basic
   Sans (cuerpo). No tenemos las licencias de esas dos, así que van sustitutos
   auto-alojados elegidos por parecido de forma — Archivo Black es una gótica
   ancha y pesada como la Nickel; Figtree es humanista geométrica como la Basic.
   ⚠️ Si el cliente entrega los archivos de las dos oficiales, se cambian estos
   dos @font-face y no hay que tocar nada más.
   ============================================================================= */

@font-face {
  font-family: "Wyn Titular";
  src: url("fuentes/archivo-black.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wyn Cuerpo";
  src: url("fuentes/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* — marca — */
  --navy: #0f1c42;
  --navy-hondo: #0a1330;     /* pie de página y capas por debajo del navy */
  --navy-suave: #1b2a5c;     /* tarjetas sobre navy */
  /* 🎨 MEDIDOS DEL BRANDBOOK OFICIAL (2026-08-19) — `marca/WynPizza-BrandBook-2025.pdf`,
     página 11 «LOGO / COLOR USAGE», que es la hoja donde la marca declara sus colores.
     Cuantificado el color dominante de cada recuadro:
         naranja  #FF7F00   ·   azul eléctrico  #0080FF   ·   claro  #DEE7FF   ·   navy  #0F1B42
     Y contrastado contra los archivos originales: `marca/logo.png` da #FD7E01 y
     `marca/brand-board.jpeg` #FE7D02 — o sea el mismo naranja, no otro.

     ⛔ ESTO CORRIGE LO QUE DECÍA ACÁ ANTES, y conviene entender por qué se equivocó.
     La versión del 11-ago midió `#f7941d` contando apariciones **en el HTML del
     wynpizzamiami.com viejo**, y concluyó que «#ff8000 era genérico». El método era
     razonable —medir en vez de elegir— pero **la fuente estaba mal**: ese CSS era el del
     WordPress que estamos reemplazando justamente por estar fuera de marca. Un tema de
     WordPress no define la marca; el brandbook sí, y el logo también.
     👉 Entre dos mediciones que se contradicen, gana la del ORIGINAL, no la de la copia.
     (De paso: el naranja del contenido ya venía en #FF8000, así que web y piezas dejan
      de ir con dos naranjas distintos.) */
  --barra-fondo: #000;       /* la barra de navegación del cliente es negra */
  --naranja: #ff7f00;
  --naranja-vivo: #e06f00;   /* hover: el mismo naranja un escalón más oscuro */
  --azul: #0080ff;
  --papel: #e3e5f5;          /* muestreado del PNG del menú IMPRESO del cliente.
                                El brandbook da #DEE7FF: 10 unidades de diferencia en
                                un lavanda pálido, imperceptible. Se deja el del menú
                                real, que es material del cliente y estaba bien. */
  --papel-hondo: #d3d7ee;
  --blanco: #ffffff;
  --tinta: #0f1c42;
  --tinta-suave: #4a5578;

  /* — semántica — */
  --fondo: var(--papel);
  --texto: var(--tinta);
  --texto-tenue: var(--tinta-suave);
  --borde: #c6cbe6;
  --exito: #0d8a4f;
  --alerta: #b3261e;

  /* — forma — */
  --radio: 14px;
  --radio-chico: 9px;
  --radio-pastilla: 999px;
  --sombra: 0 1px 2px rgba(15, 28, 66, 0.08), 0 8px 24px rgba(15, 28, 66, 0.10);
  --sombra-alta: 0 24px 60px rgba(10, 19, 48, 0.28);
  --ancho: 1180px;
  --barra: 62px;             /* alto de la barra de navegación */

  --tipo-titular: "Wyn Titular", "Arial Black", "Haettenschweiler", sans-serif;
  --tipo-cuerpo: "Wyn Cuerpo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-cuerpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* ninguna página desborda a lo ancho */
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4, .titular {
  font-family: var(--tipo-titular);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0 0 .5em;
  font-weight: 400;
}
h1 { font-size: clamp(2.1rem, 6.5vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.6rem); }

p { margin: 0 0 1em; }

.env { width: min(100% - 2.4rem, var(--ancho)); margin-inline: auto; }
.seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.centro { text-align: center; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── la estrella, que es el signo de la marca ───────────────────────────── */
.estrella { color: var(--naranja); font-style: normal; }

.cinta-estrellas {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  color: var(--azul); font-size: 1.05rem; letter-spacing: .18em;
  user-select: none;
}
.cinta-estrellas::before, .cinta-estrellas::after {
  content: "★★★★★"; letter-spacing: .22em; opacity: .95;
}

/* ── botones ────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--naranja);
  --btn-fg: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;                 /* objetivo táctil: se mide, no se estima */
  padding: .7rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--tipo-titular); font-size: .95rem; text-transform: uppercase;
  letter-spacing: .02em; text-decoration: none;
  border: 0; border-radius: var(--radio-pastilla); cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:hover { --btn-bg: var(--naranja-vivo); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--azul { --btn-bg: var(--azul); --btn-fg: var(--blanco); }
.btn--azul:hover { --btn-bg: #2b95ff; }
.btn--fantasma {
  --btn-bg: transparent; --btn-fg: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--fantasma:hover { --btn-bg: rgba(255, 128, 0, .12); }
.btn--bloque { width: 100%; }
.btn--grande { min-height: 56px; padding: .9rem 2rem; font-size: 1.05rem; }

/* ── encabezado ─────────────────────────────────────────────────────────── */
/* 🏪 UNA SOLA BARRA (19-ago) — antes eran tres franjas apiladas (246 px de cromo
   antes del primer contenido). Pedido de Joan: que luzca como una pizzería grande
   de cadena, clara y ordenada. La fila es: MARCA · NAVEGACIÓN · PEDIR.
   La banda clara `.tira-logo` ya no existe; su regla queda borrada, no huérfana. */

.barra {
  position: sticky; top: 0; z-index: 60;
  /* La barra del sitio del cliente es NEGRA, no navy. Es un contraste que se
     nota: el navy la funde con el resto y el negro la recorta. Se copia, no se
     interpreta. */
  background: var(--barra-fondo);
  color: var(--blanco);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.barra__env {
  min-height: var(--barra);
  display: flex; align-items: center; gap: 1.4rem;
}

/* El lockup entra a 46 px de alto: en pantalla ocupa más ancho que los 42 px que
   tenía antes de la corrección del 11-ago, así que la marca no pierde presencia
   por haber ganado orden. En blanco, porque sobre negro el wordmark negro no existe. */
.barra__marca { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.barra__marca img { height: 46px; width: auto; display: block; }
@media (max-width: 900px) { .barra__marca img { height: 38px; } }
@media (max-width: 600px) { .barra__marca img { height: 32px; } }

.nav { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.nav a {
  padding: .55rem .8rem;
  font-family: var(--tipo-titular); font-size: .82rem; letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none; color: var(--blanco);
  border-radius: var(--radio-chico);
  display: inline-flex; align-items: center; min-height: 44px;
}
/* ⚠️ La navegación pasa de naranja a BLANCA a propósito. Con todo el enlace en
   naranja, el naranja deja de significar «acá se pide»: la barra tenía cinco
   naranjas compitiendo y ninguno mandaba. Ahora el naranja es del botón de pedir
   y del enlace ACTIVO, nada más. Es la jerarquía que usa cualquier cadena. */
.nav a:hover { background: rgba(255, 255, 255, .10); }
.nav a[aria-current="page"] { color: var(--naranja); box-shadow: inset 0 -3px 0 var(--naranja); }

/* ── 💬 EL CHAT, ARREGLADO PARA TELÉFONO ──────────────────────────────────────
   Joan, 19-ago, dos veces: «el chat bot en teléfono abre mal» · «sigue sin ser
   responsive, no está cómodo para trabajarse».

   ⛔ EL WIDGET NO ES DE ESTA TERMINAL. Se sirve desde `inbox.promeseoagency.com` y lo
   usan varias marcas, así que el arreglo de fondo va en el BUZÓN de AXIS. Lo que sí es
   nuestro es el CSS de ESTE sitio, y alcanza: el widget **no usa Shadow DOM** —inyecta
   un `<style>` y divs con clases `pmi-*`—, así que se puede corregir desde acá.
   Sus reglas son de una sola clase; `body .pmi-x` gana por especificidad sin `!important`.

   LO QUE ESTABA MAL, medido sobre su código (4,4 KB, CERO media queries):
   1. 🔴 `.pmi-pie input` va a **14 px**. En iOS, un campo de menos de **16 px hace que
      Safari haga ZOOM a la página al tocarlo** — y el widget además llama a `input.focus()`
      al abrir. O sea: abrís el chat y la página entera salta y se agranda sola. Esa es,
      casi seguro, la mayor parte de «no está cómodo».
   2. 🔴 `max-height:70vh`. En móvil `vh` cuenta el alto CON la barra del navegador oculta,
      así que la caja se dibuja más alta que lo visible y **el campo de escribir queda por
      debajo del borde**. Se cambia por `dvh`, que es el alto que de verdad se ve y que
      además se achica solo cuando sale el teclado.
   3. `width:340px` flotando con márgenes: en un teléfono tiene que ser una hoja, como
      cualquier chat de app.

   ⚠️ Y el detalle que evita romperlo: en el DOM el botón se agrega ANTES que la caja, así
   que a pantalla completa la caja **taparía el botón y no habría con qué cerrar**. Por eso
   la hoja termina ARRIBA del botón en vez de ocupar todo. */
@media (max-width: 620px) {
  body .pmi-caja {
    right: 0; left: 0; bottom: 84px;
    width: 100%; max-width: 100%;
    height: auto; max-height: calc(100dvh - 108px);
    border-radius: 16px 16px 0 0;
  }
  body .pmi-top { padding: 15px 16px; font-size: 1rem; }
  body .pmi-m { max-width: 88%; font-size: 15px; }
  /* 16px es el número exacto que impide el zoom de iOS. No es estética: es el umbral. */
  body .pmi-pie input { font-size: 16px; padding: 15px 14px; }
  body .pmi-pie button { padding: 0 18px; min-height: 48px; font-size: 15px; }
  body .pmi-nota { font-size: 12px; padding: 6px 8px 10px; }
  body .pmi-btn { right: 16px; bottom: 16px; width: 60px; height: 60px; }
}

/* ── 📏 comparador de tamaño ─────────────────────────────────────────────────
   Las 21 pulgadas eran sólo un número dentro de una frase. Acá se ven.
   ⛔ Los dos discos van A ESCALA REAL: el diámetro en píxeles lo calcula
   `construir.py` con una regla de tres sobre las pulgadas, y por eso viaja como
   estilo en línea. NO se ajusta a ojo desde acá: si el CSS le cambia el tamaño a
   uno solo, el gráfico deja de ser el dato y pasa a ser una ilustración falsa. */
.tamano { background: var(--papel); }
/* 📐 UNA SOLA ESCALA PARA LOS DOS DISCOS. Cada disco trae sus PULGADAS en `--pulg`
   y acá se multiplican por `--esc`. Cambiar `--esc` achica los dos por el mismo
   factor, así que la proporción 21:14 se mantiene en cualquier pantalla.
   ⛔ Nunca poner `max-width` a un disco: recorta uno solo (o los dos al mismo
   tope) y el gráfico deja de ser el dato. Fue exactamente el error de la primera
   versión — con `max-width:42vw`, en un teléfono las dos pizzas medían igual. */
.tamano__grafico {
  --esc: 14.3px;                     /* 21 × 14,3 ≈ 300 px en escritorio */
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.9rem, 5vw, 3.5rem); margin-top: 2.2rem;
}
@media (max-width: 720px) { .tamano__grafico { --esc: 9.5px; } }   /* 200 y 133 */
@media (max-width: 420px) { .tamano__grafico { --esc: 7.4px; } }   /* 155 y 104 */
.tamano__disco {
  position: relative; border-radius: 50%; display: grid; place-content: center;
  text-align: center; flex: 0 0 auto;
  width: calc(var(--pulg) * var(--esc));
  height: calc(var(--pulg) * var(--esc));
}
.tamano__disco--wyn {
  background: var(--navy);
  border: 6px solid var(--naranja);
  box-shadow: 0 18px 44px -18px rgba(15, 28, 66, .55);
  color: var(--blanco);
}
.tamano__disco--std {
  background: transparent;
  border: 3px dashed var(--tinta-suave);
  color: var(--tinta-suave);
}
.tamano__pulg {
  display: block; font-family: var(--tipo-titular);
  font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1;
}
.tamano__disco--wyn .tamano__pulg { color: var(--naranja); }
.tamano__quien {
  display: block; margin-top: .35rem;
  font-size: clamp(.62rem, 1.7vw, .78rem); letter-spacing: .12em;
  text-transform: uppercase; opacity: .85;
}
.tamano__datos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 2.6rem; text-align: center;
}
.tamano__dato b {
  display: block; font-family: var(--tipo-titular);
  font-size: clamp(1.5rem, 4.5vw, 2.3rem); color: var(--navy); line-height: 1.1;
}
/* 🔴 `:not([hidden])` NO es un adorno. Los textos bilingües son dos <span>, y app.js
   esconde el que no toca poniéndole el atributo `hidden`. Un `display:block` suelto
   sobre `span` LE GANA a `hidden` y la pieza sale con los DOS idiomas encima —
   pasó acá y se vio en la captura. Cualquier regla de `display` que caiga sobre un
   bloque bilingüe tiene que excluir los ocultos. */
.tamano__dato span:not([hidden]) { display: block; margin-top: .3rem; color: var(--texto-tenue); font-size: .9rem; }
@media (max-width: 640px) {
  .tamano__datos { grid-template-columns: 1fr; gap: 1.4rem; }
  .tamano__grafico { gap: 1.2rem; }
}

.barra__derecha { display: flex; align-items: center; gap: .6rem; }

/* botón de idioma */
.idioma {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem .8rem; gap: .4rem;
  background: rgba(255, 255, 255, .1); color: var(--blanco);
  border: 0; border-radius: var(--radio-pastilla); cursor: pointer;
  font-family: var(--tipo-titular); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase;
}
.idioma:hover { background: rgba(255, 255, 255, .2); }

/* el carrito vive en la barra y solo aparece cuando tiene algo */
.chip-carrito {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .4rem 1rem;
  background: var(--naranja); color: var(--navy);
  border: 0; border-radius: var(--radio-pastilla); cursor: pointer;
  font-family: var(--tipo-titular); font-size: .82rem; text-transform: uppercase;
}
.chip-carrito:hover { background: var(--naranja-vivo); }
.chip-carrito__n {
  min-width: 22px; height: 22px; padding: 0 .3rem;
  display: grid; place-items: center;
  background: var(--navy); color: var(--blanco);
  border-radius: var(--radio-pastilla); font-size: .75rem;
}

/* menú de teléfono */
.hamburguesa {
  display: none; width: 44px; height: 44px; place-items: center;
  background: transparent; border: 0; color: var(--blanco); cursor: pointer;
}
.hamburguesa svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 900px) {
  .hamburguesa { display: grid; }
  .barra__social { display: none; }
  .nav {
    position: fixed; inset: var(--barra) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-hondo);
    padding: .5rem 1.2rem 1.4rem;
    border-bottom: 3px solid var(--naranja);
    transform: translateY(-130%); transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .nav[data-abierto="true"] { transform: translateY(0); }
  .nav a { font-size: 1rem; padding: .9rem .6rem; min-height: 52px; }
}

/* ── portada ────────────────────────────────────────────────────────────── */
.portada {
  position: relative; isolation: isolate;
  min-height: min(78svh, 620px);
  display: grid; place-items: center;
  background: var(--navy); color: var(--blanco);
  text-align: center; overflow: hidden;
}
.portada__media { position: absolute; inset: 0; z-index: -2; }
.portada__media img, .portada__media video {
  width: 100%; height: 100%; object-fit: cover;
}
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(85% 75% at 50% 45%, rgba(10, 19, 48, .70), rgba(10, 19, 48, .88) 80%);
}
.portada__env { padding: clamp(3.5rem, 10vw, 6rem) 1.2rem; }
.portada h1 {
  color: var(--blanco);
  text-shadow: 0 3px 26px rgba(0, 0, 0, .5);
  max-width: 16ch; margin-inline: auto;
}
.portada h1 .estrella { display: inline-block; }
.portada__bajada {
  font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 46ch;
  margin: 0 auto 1.8rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9);
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* estado abierto/cerrado, en la hora del local */
.estado {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem; margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radio-pastilla);
  font-size: .88rem; font-weight: 600;
  backdrop-filter: blur(6px);
}
.estado__punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--exito); box-shadow: 0 0 0 4px rgba(13, 138, 79, .28);
}
.estado[data-abierto="false"] .estado__punto {
  background: #ff5a4d; box-shadow: 0 0 0 4px rgba(255, 90, 77, .28);
}

/* ── banda de cabecera de página ────────────────────────────────────────────
   Cada página interior de la web anterior abría con una foto y el titular
   encima. Es lo que más se notaba que faltaba, así que vuelve — con la foto
   que tenía cada una. */
.banda {
  position: relative; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(230px, 34vw, 380px);
  background: var(--navy); color: var(--blanco);
  overflow: hidden;
}
.banda picture, .banda img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* 🔴 EL VELO SE BAJÓ (2026-08-11). El mural ES la marca: en wynpizzamiami.com
   los retratos se ven a todo color, y acá quedaban apagados detrás de dos capas
   —una radial al 74% más una lineal al 70%— que juntas se comían la foto.
   Es R23 del estándar al pie de la letra: *si queda oscuro, no se sube el velo*;
   el orden es aclarar el fondo, después sombra al texto, y el velo al final.
   Y es literalmente lo que el cliente ya rechazó dos veces: «se ve oscuro».
   Queda una sola capa suave, concentrada donde cae el titular, y el contraste
   lo aporta la SOMBRA del texto — que no toca la foto. */
.banda::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 82% at 50% 50%, rgba(10, 19, 48, .46), rgba(10, 19, 48, 0) 100%),
    linear-gradient(180deg, rgba(10, 19, 48, .16), rgba(10, 19, 48, .34));
}
.banda__env { padding: clamp(2.2rem, 6vw, 3.6rem) 1.2rem; }
.banda h1 {
  color: var(--blanco); margin-bottom: .4rem;
  /* Tres sombras en vez de un velo: una dura y pegada que recorta la letra
     contra cualquier color del graffiti, y dos difusas que le dan cuerpo. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 3px 14px rgba(0, 0, 0, .85),
               0 6px 34px rgba(0, 0, 0, .6);
}
.banda p {
  color: #fff; max-width: 52ch; margin-inline: auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9);
}
.banda .cinta-estrellas { margin-bottom: .7rem; color: #7ec2ff; }

/* ── LA SLICE ───────────────────────────────────────────────────────────────
   El negocio se llama "slice bar" y la carta se vende por porción, pero las
   fotos de producto son pies enteros (vienen de Uber Eats). Faltaba lo obvio:
   la slice. Estos son clips REALES del local, mudos y en bucle. */
.slices {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px; margin-inline: auto;
}
@media (min-width: 760px) { .slices { grid-template-columns: repeat(4, 1fr); } }
.slice-clip {
  position: relative; overflow: hidden;
  margin: 0;                 /* <figure> trae margen propio y descuadra la fila */
  border-radius: var(--radio);
  background: var(--navy-suave);
  aspect-ratio: 9 / 16;
  box-shadow: var(--sombra);
}
.slice-clip video, .slice-clip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.slice-clip figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 1.6rem .8rem .7rem;
  background: linear-gradient(180deg, transparent, rgba(10, 19, 48, .85));
  color: #fff; font-size: .82rem; font-weight: 700;
}

/* ── banda de canales de delivery ───────────────────────────────────────────
   Las pastillas son arte propio del cliente, no logos que rearmemos nosotros:
   se usan tal cual salen de su biblioteca. */
.canales { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.canales a {
  display: block; flex: 0 1 260px;
  transition: transform .14s ease;
}
.canales a:hover { transform: translateY(-2px) scale(1.02); }
.canales img { width: 100%; height: auto; }

/* ── el trío numerado que acompañaba a los dips ─────────────────────────── */
/* Estas tres piezas traen el "1", el "2" y el "3" impresos en NAVY. Sobre la
   sección navy los números desaparecían: van sobre una placa clara. */
.trio {
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
  max-width: 780px; margin: 2.4rem auto 0;
  padding: 1.2rem 1.2rem .4rem;
  background: var(--papel); border-radius: var(--radio);
}
.trio img { width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .35)); }
@media (max-width: 560px) { .trio { gap: .5rem; } }

/* ── tira de fotos del local ────────────────────────────────────────────── */
.tira-fotos {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .tira-fotos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tira-fotos { grid-template-columns: repeat(5, 1fr); } }
.tira-fotos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-chico); }

/* ── títulos de sección ─────────────────────────────────────────────────── */
.titulo-seccion { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.titulo-seccion h2 { margin-bottom: .35rem; }
.titulo-seccion p { color: var(--texto-tenue); max-width: 52ch; margin-inline: auto; }
.seccion--navy .titulo-seccion p { color: rgba(255, 255, 255, .72); }

.seccion--navy { background: var(--navy); color: var(--blanco); }
.seccion--navy h2, .seccion--navy h3 { color: var(--blanco); }
/* ⚠️ Una tarjeta blanca DENTRO de una sección navy heredaba el h3 blanco y el
   nombre del plato desaparecía sobre el fondo blanco de la tarjeta. La tarjeta
   manda sobre su propio contenido — pasó de verdad con los dips. */
.plato h3, .plato .plato__nombre { color: var(--tinta); }
.plato .plato__desc { color: var(--texto-tenue); }
.plato .plato__apodo { color: var(--azul); }

/* ── rejilla de la carta ────────────────────────────────────────────────── */
.rejilla {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

/* 📱 EN TELÉFONO, LA HOME NO ES LA TIENDA — Joan, 19-ago: «en teléfonos se ve
   demasiado producto en el home, estos deberían ir en la tienda o en carrusel».
   Tenía razón y era medible: la home trae 14 tarjetas y la rejilla en móvil es de
   UNA columna, así que eran 14 tarjetas a pantalla completa una debajo de otra.
   Quien entra a ver el local termina haciendo scroll por un catálogo.

   La home pasa a CARRUSEL horizontal (una fila que se desliza) y la carta completa
   sigue siendo la carta. Sale sin una línea de JavaScript: `scroll-snap` lo hace el
   navegador, y por eso funciona con el dedo como la gente ya espera.

   ⛔ Sólo las rejillas de PRODUCTO de la home llevan esta clase. La carta y el
   pedido se quedan en lista vertical: ahí el catálogo largo ES lo correcto, y un
   carrusel escondería platos detrás de un gesto. */
@media (max-width: 619px) {
  .rejilla--carrusel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .9rem;
    /* sangra hasta los bordes de la pantalla: que la tarjeta siguiente ASOME es lo
       único que le dice al dedo que ahí hay más. Un carrusel que no asoma no se desliza. */
    margin-inline: -1.2rem;
    padding: 0 1.2rem .8rem;
    scrollbar-width: none;
  }
  .rejilla--carrusel::-webkit-scrollbar { display: none; }
  .rejilla--carrusel > * {
    flex: 0 0 76%;
    scroll-snap-align: center;
  }
}

/* aire entre secciones de la carta, o "Dips" arranca pegado a la última pizza */
.seccion-carta + .seccion-carta { margin-top: clamp(2.6rem, 6vw, 4.5rem); }

.plato {
  display: flex; flex-direction: column;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; text-align: left;
  transition: transform .14s ease, box-shadow .14s ease;
}
.plato:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.plato__foto {
  position: relative; aspect-ratio: 1 / 1; background: var(--papel-hondo);
  overflow: hidden;
}
.plato__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto va la estrella de la marca — y con la MISMA proporción que una foto,
   o las filas de la rejilla quedan desparejas y un producto flota suelto. */
/* 🧾 LA FICHA SIN FOTO LLEVA EL PAPEL DE LA MARCA, no un hueco.
   ⚠️ Y que no tenga foto está BIEN, no es un olvido: casi todas esas fichas son marcas
   ajenas — Coca-Cola, Sprite, Fanta, Dr Pepper, Red Bull, Monster, Gatorade, Lays,
   Doritos. R12 y R33: a una marca de otro no se le genera una foto, porque dibujar su
   etiqueta es falsificarla. Lo que estaba mal era el hueco: una tarjeta vacía de 300 px
   con una estrellita flotando, al lado de otras con foto, se lee como un error de carga.
   El papel encerado del propio local llena el espacio, se reconoce como suyo y —esto es
   lo importante— **no finge ser un producto**.
   El patrón se DIBUJA por código con el logo oficial (`papel-patron.py`), no se recorta
   de una foto ni se le pide a un modelo (R22). */
.plato__foto--vacia {
  display: grid; place-items: center;
  background: var(--blanco) url("/assets/web/papel-patron.jpg") center/58% repeat;
  color: var(--naranja); font-size: 2.6rem; line-height: 1;
  aspect-ratio: 1 / 1;
}
.plato__foto--vacia .estrella { opacity: .55; filter: drop-shadow(0 2px 6px rgba(255,255,255,.9)); }
.plato__cuerpo { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.plato__nombre { font-family: var(--tipo-titular); font-size: 1.2rem; margin: 0; }
.plato__apodo {
  color: var(--azul); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; margin: .15rem 0 .5rem;
}
.plato__desc { color: var(--texto-tenue); font-size: .92rem; margin: 0 0 .9rem; }
.plato__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.plato__precio { font-family: var(--tipo-titular); font-size: 1.15rem; white-space: nowrap; }
.plato__precio small { font-family: var(--tipo-cuerpo); font-weight: 600; font-size: .72rem; color: var(--texto-tenue); display: block; text-transform: none; }

.sello {
  position: absolute; inset-inline-start: .65rem; inset-block-start: .65rem;
  padding: .22rem .6rem; border-radius: var(--radio-pastilla);
  background: var(--naranja); color: var(--navy);
  font-family: var(--tipo-titular); font-size: .68rem; letter-spacing: .04em;
}

/* variantes slice / pie entero */
.variantes { display: flex; gap: .4rem; margin-bottom: .85rem; }
.variantes button {
  flex: 1; min-height: 44px; padding: .4rem .5rem;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  cursor: pointer; font-family: var(--tipo-cuerpo); font-size: .82rem; font-weight: 700;
  line-height: 1.15;
}
.variantes button small { display: block; font-weight: 600; color: var(--texto-tenue); }
.variantes button[aria-pressed="true"] {
  background: var(--navy); color: var(--blanco); border-color: var(--navy);
}
.variantes button[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }

/* ── filtros ────────────────────────────────────────────────────────────────
   La carta tiene 54 productos: en cuanto se baja un poco, los filtros quedaban
   arriba fuera de la vista y para cambiar de sección había que volver a subir.
   Ahora la barra se pega debajo del encabezado y viaja con el visitante. */
.barra-carta {
  position: sticky; top: var(--barra); z-index: 50;
  background: rgba(227, 229, 245, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  padding: .6rem 0;
  margin-bottom: 2rem;
}
.barra-carta .buscador { margin-bottom: .55rem; }
.barra-carta .filtros { margin-bottom: 0; }

/* En teléfono los chips no se apilan en tres filas: ruedan en una sola. */
@media (max-width: 700px) {
  .barra-carta .filtros {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: .15rem .2rem .45rem;
    scrollbar-width: none;
  }
  .barra-carta .filtros::-webkit-scrollbar { display: none; }
  .barra-carta .filtros button { flex: 0 0 auto; scroll-snap-align: start; }
  /* que el primero y el último no queden pegados al borde */
  .barra-carta .filtros::before,
  .barra-carta .filtros::after { content: ""; flex: 0 0 .4rem; }
}

.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-bottom: 2rem;
}
.filtros button {
  min-height: 48px; padding: .5rem 1.1rem;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-pastilla);
  cursor: pointer; font-family: var(--tipo-cuerpo); font-weight: 700; font-size: .9rem;
}
.filtros button:hover { border-color: var(--azul); }
.filtros button[aria-pressed="true"] {
  background: var(--navy); color: var(--blanco); border-color: var(--navy);
}

.buscador { position: relative; max-width: 460px; margin: 0 auto 1.4rem; }
.buscador input {
  width: 100%; min-height: 52px; padding: .8rem 2.8rem .8rem 1.1rem;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-pastilla);
  font-family: var(--tipo-cuerpo); font-size: 1rem;
}
.buscador button {
  position: absolute; inset-inline-end: .4rem; inset-block-start: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--texto-tenue);
  font-size: 1.3rem; border-radius: 50%;
}

/* =============================================================================
   LA PÁGINA DE PEDIDO
   -----------------------------------------------------------------------------
   La estructura sale del trabajo que ya se había hecho para esta marca en el
   plugin `material/wyn-pizza-orders/` (v1.4.1): marquesina, tiras de promo,
   filas densas de producto y panel de pedido siempre a la vista.
   Lo que NO se copió es su paleta (`#0E1424` / crema `#F4EEDE` / Anton): el
   sitio entero usa la del brandbook y tener una página con otra identidad se
   ve como dos webs distintas. Si el cliente prefiere ese look, se cambia acá.
   ============================================================================= */

/* la marquesina: dice las tres cosas que hacen entrar (tarde, barrio, delivery) */
.marquesina {
  background: var(--naranja); color: var(--navy);
  font-family: var(--tipo-titular); font-size: .74rem; letter-spacing: .12em;
  padding: .42rem 0; overflow: hidden; white-space: nowrap;
}
.marquesina__pista {
  display: inline-flex; gap: 2.2rem;
  animation: correr 26s linear infinite;
  will-change: transform;
}
.marquesina__pista > span { flex: 0 0 auto; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquesina__pista { animation: none; }
}

/* las tres promos del día, en tira */
.tiras {
  display: grid; gap: .7rem; grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 780px) { .tiras { grid-template-columns: repeat(3, 1fr); } }
.tira {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1rem;
  background: var(--blanco); border: 1px solid var(--borde);
  border-inline-start: 4px solid var(--naranja);
  border-radius: var(--radio-chico);
}
.tira:nth-child(2) { border-inline-start-color: var(--azul); }
.tira:nth-child(3) { border-inline-start-color: #dd2e2e; }
.tira__hora {
  font-family: var(--tipo-titular); font-size: .68rem; letter-spacing: .04em;
  color: var(--texto-tenue); white-space: nowrap;
}
.tira__nombre { font-family: var(--tipo-titular); font-size: .95rem; line-height: 1.1; }
.tira__detalle { font-size: .8rem; color: var(--texto-tenue); }

/* el armazón: lista a la izquierda, pedido a la derecha */
.pedido { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) {
  .pedido { grid-template-columns: minmax(0, 1fr) 330px; gap: 2rem; }
}

/* ── fila densa de producto ───────────────────────────────────────────────
   Una carta de 54 productos con tarjetas grandes obliga a un scroll enorme.
   La fila muestra lo mismo en un cuarto del alto: foto chica, nombre, qué
   trae, variantes y el botón de agregar. */
.filas { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .filas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .filas { grid-template-columns: 1fr; } }
@media (min-width: 1240px) { .filas { grid-template-columns: repeat(2, 1fr); } }

.fila {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: .85rem;
  padding: .7rem; align-items: start;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fila:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.fila--sinfoto { grid-template-columns: minmax(0, 1fr); }

.fila__foto {
  position: relative;
  width: 74px; height: 74px; border-radius: 8px; overflow: hidden;
  background: var(--papel-hondo);
}
.fila__foto img { width: 100%; height: 100%; object-fit: cover; }

.fila__nombre {
  font-family: var(--tipo-titular); font-size: 1rem; line-height: 1.05;
  margin: 0 0 .1rem; color: var(--tinta);
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.sello-mini {
  padding: .1rem .38rem; border-radius: 4px;
  background: var(--azul); color: var(--blanco);
  font-family: var(--tipo-cuerpo); font-size: .58rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.fila__desc {
  font-size: .8rem; color: var(--texto-tenue); margin: 0 0 .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fila__pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.fila__precio { font-family: var(--tipo-titular); font-size: 1rem; white-space: nowrap; }
.fila__precio small {
  font-family: var(--tipo-cuerpo); font-weight: 600; font-size: .64rem;
  color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .05em;
}
.fila .variantes { margin-bottom: .5rem; gap: .3rem; }
/* 44px aunque la fila sea compacta: comprimir el alto de un botón que se toca
   es exactamente el error que el estándar de la casa prohíbe. Se gana espacio
   apretando el texto, no el objetivo táctil. */
.fila .variantes button { min-height: 44px; font-size: .74rem; padding: .2rem .35rem; line-height: 1.1; }
.fila .variantes button small { font-size: .68rem; }

/* el + de agregar: 44px reales aunque se vea chico */
.mas {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  background: var(--naranja); color: var(--navy);
  border: 0; border-radius: 50%; cursor: pointer;
  font-family: var(--tipo-titular); font-size: 1.25rem; line-height: 1;
  transition: transform .12s ease, background-color .12s ease;
}
.mas:hover { background: var(--naranja-vivo); transform: scale(1.08); }
.mas[data-ok="1"] { background: var(--exito); color: #fff; }

.subtitulo {
  font-family: var(--tipo-cuerpo); font-weight: 800; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
  margin: 1.6rem 0 .6rem;
}
.seccion-carta:first-child .subtitulo:first-child { margin-top: 0; }

/* ── el panel del pedido, siempre a la vista ─────────────────────────────── */
.resumen {
  position: sticky; top: calc(var(--barra) + 5.6rem);
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.resumen__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .9rem 1rem; background: var(--navy); color: var(--blanco);
}
.resumen__cabeza h2 { margin: 0; font-size: 1.1rem; color: var(--blanco); }
.resumen__n { font-size: .78rem; color: rgba(255, 255, 255, .7); }
.resumen__cuerpo { padding: .9rem 1rem; max-height: 42vh; overflow-y: auto; }
.resumen__pie { padding: .9rem 1rem; border-top: 1px solid var(--borde); background: var(--papel); }
@media (max-width: 999px) {
  /* en teléfono el panel no se pega: vive en la hoja del carrito */
  .resumen { display: none; }
}

.propinas { display: flex; gap: .35rem; margin: .2rem 0 .9rem; }
.propinas button {
  flex: 1; min-height: 44px; padding: .3rem;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  cursor: pointer; font-family: var(--tipo-cuerpo); font-weight: 800; font-size: .8rem;
}
.propinas button[aria-pressed="true"] {
  background: var(--navy); color: var(--blanco); border-color: var(--navy);
}
.etiqueta-bloque {
  font-weight: 800; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .3rem;
}

/* ── promos ─────────────────────────────────────────────────────────────── */
.promos { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .promos { grid-template-columns: repeat(3, 1fr); } }

.promo {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.8rem 1.3rem 1.5rem;
  background: var(--navy-suave); color: var(--blanco);
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, .1);
}
.promo__arte { width: min(72%, 210px); margin: 0 auto .9rem; }
.promo__arte img { width: 100%; height: auto; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38)); }
.promo h3 { color: var(--naranja); font-size: 1.25rem; margin-bottom: .2rem; }
.promo__hora {
  font-weight: 800; font-size: .95rem; color: var(--azul);
  letter-spacing: .04em; margin-bottom: .55rem;
}
.promo__gancho { font-family: var(--tipo-titular); font-size: 1rem; margin-bottom: .35rem; }
.promo__detalle { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }
.promo__precio {
  margin-top: .9rem; padding: .35rem 1rem;
  background: var(--naranja); color: var(--navy);
  border-radius: var(--radio-pastilla);
  font-family: var(--tipo-titular); font-size: 1.05rem;
}

/* ── reseñas ────────────────────────────────────────────────────────────── */
.resenas { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .resenas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .resenas { grid-template-columns: repeat(3, 1fr); } }
.resena {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.2rem 1.3rem;
}
.resena__estrellas { color: var(--naranja); letter-spacing: .12em; font-size: .95rem; }
.resena p { font-size: .95rem; margin: .5rem 0 .8rem; }
.resena__autor { font-weight: 800; font-size: .88rem; }
.resena__fuente { color: var(--texto-tenue); font-size: .78rem; }

.puntaje {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--tipo-titular); font-size: 2.4rem; color: var(--naranja);
}
.puntaje small { font-family: var(--tipo-cuerpo); font-size: .9rem; color: var(--texto-tenue); font-weight: 600; }

/* ── datos del local ────────────────────────────────────────────────────── */
.datos { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .datos { grid-template-columns: 1fr 1fr; } }

.horario { list-style: none; margin: 0; padding: 0; }
.horario li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 1rem;
}
.horario li:last-child { border-bottom: 0; }
.horario li[data-hoy="true"] { color: var(--naranja); font-weight: 800; }
.horario__dia { font-weight: 700; }

.contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contacto-lista a { text-decoration: none; }
.contacto-lista a:hover { text-decoration: underline; }
.contacto-lista li { display: flex; gap: .8rem; align-items: flex-start; }
.contacto-lista .icono { font-size: 1.2rem; line-height: 1.35; }

/* ── formulario ─────────────────────────────────────────────────────────── */
.campo { display: grid; gap: .35rem; margin-bottom: 1rem; }
.campo label { font-weight: 700; font-size: .9rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 50px; padding: .7rem .9rem;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  font-family: var(--tipo-cuerpo); font-size: 1rem;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--azul); }
.campo__ayuda { color: var(--texto-tenue); font-size: .82rem; }
.campo--error input, .campo--error textarea { border-color: var(--alerta); }
.campo__error { color: var(--alerta); font-size: .82rem; font-weight: 600; }

.aviso {
  padding: .9rem 1.1rem; border-radius: var(--radio-chico);
  background: rgba(0, 128, 255, .1); border: 1px solid rgba(0, 128, 255, .3);
  font-size: .92rem;
}
.aviso--ok { background: rgba(13, 138, 79, .1); border-color: rgba(13, 138, 79, .35); }
.aviso--mal { background: rgba(179, 38, 30, .08); border-color: rgba(179, 38, 30, .3); }

/* ── el carrito ─────────────────────────────────────────────────────────── */
.panel {
  position: fixed; inset: 0; z-index: 90;
  display: none; /* lo abre el JS */
}
.panel[data-abierto="true"] { display: block; }
.panel__fondo { position: absolute; inset: 0; background: rgba(10, 19, 48, .6); backdrop-filter: blur(3px); }
.panel__hoja {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(100%, 430px);
  background: var(--papel); color: var(--tinta);
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-alta);
  animation: entra-lateral .2s ease;
}
@keyframes entra-lateral { from { transform: translateX(100%); } }
@media (max-width: 560px) {
  .panel__hoja {
    inset: auto 0 0 0; width: 100%; max-height: 92svh;
    border-radius: var(--radio) var(--radio) 0 0;
    animation: entra-abajo .22s ease;
  }
  @keyframes entra-abajo { from { transform: translateY(100%); } }
}
.panel__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.2rem; background: var(--navy); color: var(--blanco);
}
.panel__cabeza h2 { margin: 0; font-size: 1.3rem; }
.panel__cerrar {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--blanco);
  border: 0; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
}
.panel__cerrar:hover { background: rgba(255, 255, 255, .25); }
.panel__cuerpo { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem; }
.panel__pie { padding: 1.1rem 1.2rem; border-top: 1px solid var(--borde); background: var(--blanco); }

.linea {
  display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem;
  align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--borde);
}
.linea:last-of-type { border-bottom: 0; }
.linea__foto { width: 56px; height: 56px; border-radius: var(--radio-chico); object-fit: cover; background: var(--papel-hondo); }
.linea__nombre { font-weight: 800; font-size: .95rem; line-height: 1.25; }
.linea__var { color: var(--texto-tenue); font-size: .82rem; }
.linea__nota { color: var(--azul); font-size: .8rem; font-style: italic; }
.linea__precio { font-family: var(--tipo-titular); font-size: 1rem; }

.contador { display: inline-flex; align-items: center; gap: .1rem; margin-top: .3rem; }
.contador button {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--papel-hondo); color: var(--tinta);
  border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.contador button:first-child { border-radius: var(--radio-chico) 0 0 var(--radio-chico); }
.contador button:last-child { border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }
.contador button:hover { background: var(--azul); color: var(--blanco); }
.contador span { min-width: 34px; height: 34px; display: grid; place-items: center; background: var(--blanco); font-weight: 800; font-size: .9rem; }

.totales { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .4rem; }
.totales li { display: flex; justify-content: space-between; font-size: .95rem; }
.totales li.total {
  border-top: 1px solid var(--borde); padding-top: .6rem; margin-top: .3rem;
  font-family: var(--tipo-titular); font-size: 1.35rem;
}

.vacio { text-align: center; padding: 3rem 1rem; color: var(--texto-tenue); }
.vacio__icono { font-size: 3rem; margin-bottom: .6rem; }

/* selector de retiro / delivery */
.conmutador { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.conmutador button {
  flex: 1; min-height: 48px;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  cursor: pointer; font-family: var(--tipo-cuerpo); font-weight: 700; font-size: .92rem;
}
.conmutador button[aria-pressed="true"] { background: var(--navy); color: var(--blanco); border-color: var(--navy); }

/* ── pie ────────────────────────────────────────────────────────────────── */
.pie { background: var(--navy-hondo); color: rgba(255, 255, 255, .82); padding: 3rem 0 1.5rem; }
.pie a { color: rgba(255, 255, 255, .82); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.2fr 1fr 1fr; } }
.pie h3 { color: var(--blanco); font-size: 1rem; margin-bottom: .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.pie__logo { height: 46px; width: auto; margin-bottom: 1rem; }
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255, 255, 255, .6);
}
/* La firma de la casa: se lee si la buscás, no compite con la marca del cliente. */
.pie__firma { color: rgba(255, 255, 255, .45); }
.pie__firma a {
  color: rgba(255, 255, 255, .7); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transition: color .12s ease, border-color .12s ease;
}
.pie__firma a:hover { color: var(--naranja); border-color: var(--naranja); }

/* ── volver arriba ──────────────────────────────────────────────────────────
   En una carta de 54 productos, llegar al final y tener que arrastrar de vuelta
   hasta el buscador es la queja más común. Aparece recién al bajar. */
.arriba {
  position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 65;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--navy); color: var(--blanco);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.arriba[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.arriba:hover { background: var(--naranja); color: var(--navy); }
.arriba svg { width: 22px; height: 22px; fill: currentColor; }
/* si hay barra de pedido en el teléfono, el botón sube para no taparla */
@media (max-width: 900px) {
  .arriba { inset-block-end: 5.2rem; }
}

/* saltar al contenido — lo primero que toca un lector de pantalla */
.saltar {
  position: absolute; inset-inline-start: -9999px; z-index: 200;
  background: var(--naranja); color: var(--navy); padding: .8rem 1.2rem;
  font-weight: 800; border-radius: 0 0 var(--radio-chico) 0;
}
.saltar:focus { inset-inline-start: 0; }

/* barra fija de pedido en teléfono: el CTA nunca queda bajo el pliegue */
.barra-pedido {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70;
  display: none; gap: .7rem; align-items: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--navy); color: var(--blanco);
  box-shadow: 0 -8px 24px rgba(10, 19, 48, .3);
}
.barra-pedido[data-visible="true"] { display: flex; }
.barra-pedido__total { font-family: var(--tipo-titular); font-size: 1.1rem; }
.barra-pedido .btn { flex: 1; }
@media (min-width: 901px) { .barra-pedido { display: none !important; } }

/* =============================================================================
   ⏰ BANNER DE LA FRANJA QUE ESTÁ CORRIENDO
   -----------------------------------------------------------------------------
   Aparece SOLO dentro de su ventana horaria (la enciende app.js con el reloj del
   local). Va pegado debajo de la barra, a ancho completo: es lo primero que se
   ve al entrar y desaparece solo cuando la promo termina.

   Nace con `hidden` en el HTML — si el JS no corre no se muestra nada. Un cartel
   de happy hour a las 11 de la noche es peor que ningún cartel.
   ============================================================================= */
.bannerp {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-suave) 100%);
  color: #fff;
  border-bottom: 3px solid var(--naranja);
}
.bannerp[hidden] { display: none; }

.bannerp__cuerpo {
  max-width: 1180px; margin: 0 auto;
  padding: .55rem clamp(.9rem, 3vw, 1.6rem);
  display: flex; align-items: center; gap: .9rem;
}

/* La foto es la mitad del anuncio: sin ella esto es un cartel de texto. */
.bannerp__foto {
  position: relative; flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.bannerp__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* R13 — lo generado que puede pasar por real se dice EN la pieza, no sólo
   internamente. Chico pero legible y siempre encima de la foto. */
.bannerp__aviso {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: .48rem; line-height: 1.5; letter-spacing: .03em;
  text-align: center; text-transform: uppercase;
}

.bannerp__texto { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.bannerp__texto strong {
  font-family: "Wyn Titular", system-ui, sans-serif;
  font-size: clamp(.95rem, 2.6vw, 1.15rem); letter-spacing: .01em;
}
.bannerp__precio {
  background: var(--naranja); color: var(--navy);
  font-weight: 800; font-size: .86rem; padding: .12rem .5rem; border-radius: 99px;
  white-space: nowrap;
}
.bannerp__hasta { color: rgba(255, 255, 255, .72); font-size: .8rem; white-space: nowrap; }

/* El punto que late dice "esto está pasando AHORA", que es todo el argumento. */
.bannerp__vivo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--naranja); white-space: nowrap;
}
.bannerp__vivo i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--naranja);
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(247, 148, 29, .55); }
  50%      { opacity: .65; box-shadow: 0 0 0 6px rgba(247, 148, 29, 0); }
}
@media (prefers-reduced-motion: reduce) { .bannerp__vivo i { animation: none; } }

.bannerp__cta {
  flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center;
  padding: 0 .95rem; border-radius: 99px; text-decoration: none;
  background: var(--naranja); color: var(--navy);
  font-weight: 800; font-size: .84rem; white-space: nowrap;
}
.bannerp__cta:hover { filter: brightness(1.07); }

/* En teléfono el CTA se va a su propia línea antes de que el titular se parta. */
@media (max-width: 560px) {
  .bannerp__cuerpo { flex-wrap: wrap; gap: .6rem .7rem; }
  .bannerp__foto { width: 52px; height: 52px; }
  .bannerp__cta { width: 100%; justify-content: center; }
  .bannerp__hasta { width: 100%; }
}

/* ── Pedidos en pausa ─────────────────────────────────────────────────────── */
/* Reemplaza al carrito en la página de pedido. No se ve como un error: el local
   está abierto, lo que está en pausa es el pedido por internet — y por eso el
   bloque trae la salida (teléfono y apps) en el mismo lugar donde estaba el
   botón de comprar. */
.pausa{
  background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:1.4rem 1.3rem;align-self:start;position:sticky;top:96px;
}
.pausa h2{font-family:"Wyn Titular",system-ui,sans-serif;font-size:1.15rem;margin-bottom:.6rem;line-height:1.2}
.pausa p{color:#b9c2dd;font-size:.92rem;line-height:1.55}
.pausa__acciones{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.pausa__acciones .btn{justify-content:center;text-align:center}

/* ── Datos de quien pide ──────────────────────────────────────────────────── */
/* Van DENTRO del carrito, arriba del botón de enviar: pedirlos en otra pantalla
   es donde la gente abandona. Aparecieron el 12-ago, cuando una prueba real
   mandó un pedido con nombre y teléfono vacíos. */
.campos{display:flex;flex-direction:column;gap:.5rem;margin:.9rem 0 1rem}
.campos input,.campos textarea{
  width:100%;min-height:46px;padding:.7rem .85rem;border-radius:12px;
  border:1px solid var(--linea,rgba(15,28,66,.18));background:#fff;color:var(--navy);
  font:inherit;font-size:.95rem;resize:vertical;
}
.campos input:focus,.campos textarea:focus{
  outline:2px solid var(--naranja);outline-offset:1px;border-color:transparent;
}
.campos input[hidden]{display:none}
.campos__error{
  color:#c0392b;font-size:.86rem;font-weight:600;line-height:1.4;
  background:rgba(192,57,43,.09);border-radius:10px;padding:.5rem .7rem;
}