/* MONTAGUS — SISTEMA DE DISEÑO Dos superficies: la PARED negra donde se lee, el PAPEL encerado donde se pide. Sin librerías, sin build, sin archivos de fuente. */

:root{
  /* --- Color de marca (los 3 primeros salen del logo, muestreados exactos) -- */
  --negro-plancha:   #101010;
  --rojo-montagus:   #D24237;
  --amarillo-cinta:  #EECA36;
  --naranja-plancha: #F6A74E;
  --verde-encurtido: #8C9C37;
  --papel-encerado:  #F2EADA;
  --tinta:           #1A1512;

  /* --- Superficies derivadas (no son colores de marca) --------------------- */
  --gris-ladrillo: #232323;
  --gris-alto:     #2C2C2C;
  --humo:          #9A948C;
  --humo-claro:    #C6C0B6;
  --papel-sombra:  #E2D7C2;
  --papel-linea:   #CFC2A9;

  /* Variantes oscurecidas SOLO para texto sobre papel: el rojo y el verde de
     marca no llegan a 4.5:1 contra el papel en tamaños pequeños.
     Los originales se siguen usando como relleno (con texto blanco encima). */
  --rojo-tinta:    #B8342A;  /* 4.93:1 sobre papel */
  --verde-abierta: #61701C;  /* 4.57:1 sobre papel */
  --humo-pie:      #8A857D;  /* 5.19:1 sobre la pared */

  /* --- Tipografía: cero KB, todo del sistema ------------------------------- */
  --rotulo: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed",
            "Liberation Sans Narrow", "Helvetica Neue", system-ui, sans-serif;
  --texto:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --comanda: ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, "Courier New", monospace;

  /* --- Ritmo: base 4 px ---------------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;

  --canal: 20px;
  --tope: 1100px;
  --rad: 14px 4px 14px 4px;
  --rad-chico: 8px 2px 8px 2px;

  --alto-sede: 32px;
  --alto-cat: 48px;
  --salida: 200ms cubic-bezier(.2,.7,.3,1);
}

/* Rotulación de marca: una sola vez para las 26 reglas que la usan.
   Cada una sigue poniendo su propio tamaño y su interletra. */
.portada__titulo,
.boton,
.chip,
.volver-menu,
.tarjeta__nombre,
.cinta__texto,
.plato__nombre,
.sede__nombre,
.sede__b,
.marca__titulo,
.pie__marca,
.pie__redes a,
.cinta-carrito__v,
.papel__titulo,
.grupo__nombre,
.campo__eti,
.sello,
.linea__nombre,
.enlace,
.vacio__titulo,
.sugerido__nombre,
.resumen__fila,
.paso-titulo,
.segmento,
.elige-sede__nombre,
.aviso__b{
  font-family: var(--rotulo); font-weight: 800; font-stretch: condensed;
  text-transform: uppercase;
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background-color: var(--negro-plancha);
  background-image: url("../img/grano.png");
  background-repeat: repeat;
  color: #fff;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

body.bloqueado{ overflow: hidden; }

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

button{ font: inherit; color: inherit; cursor: pointer; }

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

.ico{ width: 1em; height: 1em; fill: currentColor; flex: none; }

.envoltura{ max-width: var(--tope); margin: 0 auto; padding: 0 var(--canal); }

/* accesibilidad */
.saltar{
  position: absolute; left: var(--e2); top: -60px; z-index: 90;
  background: var(--amarillo-cinta); color: #000;
  padding: var(--e2) var(--e4); font-family: var(--rotulo);
  font-weight: 800; text-transform: uppercase; text-decoration: none;
  border-radius: var(--rad-chico);
  transition: transform var(--salida);
}
.saltar:focus{ top: var(--e2); }

:focus-visible{ outline: 3px solid var(--amarillo-cinta); outline-offset: 2px; }
.papel :focus-visible{ outline-color: var(--rojo-montagus); }

.solo-lectores{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* PORTADA */
.portada{
  padding: var(--e7) 0 var(--e8);
  border-bottom: 3px solid #000;
}
.portada__interior{
  max-width: var(--tope); margin: 0 auto; padding: 0 var(--canal);
}
.portada__logo{
  width: 100%; max-width: 300px; height: auto;
  border-radius: var(--rad);
  border: 2px solid #000;
}
.portada__titulo{
  letter-spacing: -0.015em;
  line-height: .92;
  font-size: clamp(40px, 13vw, 88px);
  margin: var(--e6) 0 0;
  color: #fff;
  text-wrap: balance;
}
.portada__titulo .punto{ color: var(--rojo-montagus); }

.portada__bajada{
  margin: var(--e4) 0 0;
  max-width: 30ch;
  color: var(--humo-claro);
  font-size: 16px;
}

.portada__acciones{
  display: flex; flex-direction: column; gap: var(--e3);
  margin-top: var(--e6);
  max-width: 380px;
}

.pasos{
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  list-style: none; margin: var(--e6) 0 0; padding: 0;
  counter-reset: paso;
  font-family: var(--comanda);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--humo);
}
.pasos li{ counter-increment: paso; }
.pasos li::before{ content: counter(paso) " · "; color: var(--amarillo-cinta); }

/* BOTONES */
.boton{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  padding: 15px var(--e5);
  text-transform: uppercase; letter-spacing: .02em; font-size: 18px;
  text-decoration: none; border-radius: var(--rad);
  border: 2px solid transparent;
  transition: transform 140ms ease, opacity 140ms ease;
}
.boton:active{ transform: translateY(2px); }
.boton--relleno{ background: var(--amarillo-cinta); color: #000; border-color: #000; }
.boton--contorno{ background: transparent; color: var(--amarillo-cinta); border-color: var(--amarillo-cinta); }

/* BARRA SEDE */
.barra-sede{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e2);
  height: var(--alto-sede);
  padding: 0 var(--canal);
  background: #000;
  border-bottom: 1px solid #303030;
  font-family: var(--comanda); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}
.barra-sede__eti{ color: var(--humo); }
.barra-sede__val{
  color: var(--amarillo-cinta); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-sede__btn{
  margin-left: auto; background: none; border: 0;
  color: var(--humo-claro); text-decoration: underline;
  font-family: inherit; font-size: inherit; text-transform: inherit;
  letter-spacing: inherit;
  padding: var(--e2) 0 var(--e2) var(--e3); min-height: var(--alto-sede);
}

/* CATEGORÍAS */
.categorias{
  position: sticky; top: var(--alto-sede); z-index: 39;
  display: flex; gap: var(--e2);
  height: var(--alto-cat); align-items: center;
  padding: 0 var(--canal);
  background: var(--negro-plancha);
  border-bottom: 2px solid #000;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.categorias::-webkit-scrollbar{ display: none; }
/* hace falta: la clase le gana al atributo hidden del navegador */
.categorias[hidden]{ display: none; }

.chip{
  flex: none;
  background: var(--gris-ladrillo); color: var(--humo-claro);
  border: 2px solid #000; border-radius: var(--rad-chico);
  padding: var(--e2) var(--e3);
letter-spacing: .02em; font-size: 14px;
  white-space: nowrap;
  transition: transform 140ms ease;
}
.chip[aria-current="true"]{ background: var(--amarillo-cinta); color: #000; }
.chip:active{ transform: translateY(1px); }
/* Barra de la sección abierta: solo "volver al menú" y dónde estoy.
   No hay atajo a otras secciones: para cambiar hay que volver, a propósito. */
.categorias--volver{
  overflow: visible;
  gap: var(--e3);
}
.volver-menu{
  flex: none;
  display: inline-flex; align-items: center; gap: var(--e2);
  background: transparent; color: var(--amarillo-cinta);
  border: 2px solid var(--amarillo-cinta); border-radius: var(--rad-chico);
  padding: var(--e2) var(--e3);
letter-spacing: .02em; font-size: 14px;
  transition: transform 140ms ease;
}
.volver-menu:active{ transform: translateY(1px); }
.volver-menu__flecha{ font-family: var(--texto); font-weight: 700; }
.volver-menu__aqui{
  margin-left: auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--comanda); font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--humo);
}

/* Cierre de sección: se acabaron los platos, ¿qué sigue? */
.cat-pie{
  display: grid; gap: var(--e2);
  padding: var(--e6) var(--canal) 0;
}

/* REJILLA DE CATEGORÍAS La carta abre así: 9 botones grandes con foto. Al tocar uno se pinta solo esa categoría, no las 68 filas de una. */
.menu-ayuda{
  margin: var(--e5) auto var(--e4);
  max-width: var(--tope); padding: 0 var(--canal);
  color: var(--humo);
  font-family: var(--comanda); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
}

.rejilla{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
  max-width: var(--tope); margin: 0 auto;
  padding: 0 var(--canal);
}

.tarjeta{
  display: block; width: 100%; padding: 0; text-align: left;
  background: var(--gris-ladrillo);
  border: 2px solid #000; border-radius: var(--rad);
  overflow: hidden;
  transition: transform 160ms ease;
}
.tarjeta:active{ transform: scale(.97); }
.tarjeta:hover .tarjeta__foto{ opacity: .82; }

.tarjeta__foto{
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--gris-alto);
  transition: opacity 160ms ease;
}
/* Safari 14 no tiene aspect-ratio: el alto fijo evita que la rejilla salte */
@supports not (aspect-ratio: 4 / 3){
  .tarjeta__foto{ height: 128px; }
}

.tarjeta__bloque{
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--naranja-plancha);
}
@supports not (aspect-ratio: 4 / 3){
  .tarjeta__bloque{ height: 128px; }
}
.tarjeta__bloque svg{ width: 78%; height: auto; fill: #000; opacity: .38; }

.tarjeta__pie{
  display: block;
  padding: var(--e3) var(--e3) var(--e4);
  border-top: 2px solid #000;
}
.tarjeta__nombre{
  display: block;
letter-spacing: -0.01em; line-height: 1;
  font-size: 20px; color: #fff;
}
.tarjeta__meta{
  display: block; margin-top: var(--e2);
  font-family: var(--comanda); font-size: 10px;
  letter-spacing: .03em; color: var(--humo);
}

/* CINTA La cinta amarilla del logo, recortada con clip path. Gruesa al centro. */
.cinta{
  background: var(--amarillo-cinta);
  clip-path: polygon(0 14%, 50% 0, 100% 14%, 100% 86%, 50% 100%, 0 86%);
  padding: clamp(30px, 8vw, 58px) var(--canal);
  text-align: center;
  margin: var(--e7) 0 0;
}
.cinta--b{ clip-path: polygon(0 0, 50% 14%, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.cinta--menu{ margin: var(--e6) 0 0; padding: clamp(22px, 6vw, 40px) var(--canal); }

/* Marcador de paso: la eyebrow que va encima del título de la cinta */
.cinta__paso{
  margin: 0 0 var(--e2);
  color: #000;
  font-family: var(--comanda); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}
.cinta__paso::before,
.cinta__paso::after{ content: "—"; margin: 0 var(--e2); opacity: .5; }

.cinta__texto{
  margin: 0; color: #000;
letter-spacing: -0.015em; line-height: .9;
  font-size: clamp(32px, 10vw, 68px);
}

/* CARTA */
.carta{ padding-bottom: 120px; }

.cargando{
  padding: var(--e7) var(--canal); color: var(--humo);
  font-family: var(--comanda); font-size: 13px;
}

.grupo-cat{
  max-width: var(--tope); margin: 0 auto;
  scroll-margin-top: calc(var(--alto-sede) + var(--alto-cat) + 4px);
}

.platos{ margin-top: var(--e5); }

.plato{
  display: block; width: 100%; text-align: left;
  background: var(--gris-ladrillo);
  border: 0; border-bottom: 2px solid #000;
  padding: var(--e4) var(--canal);
  transition: transform 140ms ease;
}
.plato:first-child{ border-top: 2px solid #000; }
.plato:hover{ background: var(--gris-alto); }
.plato:active{ transform: scale(.995); }

/* Fila con foto: solo si el producto trae "imagen" en datos.js */
.plato--foto{ display: flex; align-items: flex-start; gap: var(--e4); }
.plato__texto{ flex: 1 1 auto; min-width: 0; }
.plato__foto{
  flex: none; width: 76px; height: 76px;
  object-fit: cover;
  border: 2px solid #000; border-radius: var(--rad-chico);
  background: var(--gris-alto);
}

.plato__cab{ display: flex; align-items: flex-start; gap: var(--e2); }
.plato__nombre{
letter-spacing: -0.01em; line-height: 1;
  font-size: 21px; color: #fff; margin: 0;
}
.plato__desc{
  display: block;
  margin: var(--e2) 0 0; color: var(--humo);
  font-size: 13px; line-height: 1.4;
}
.plato__linea{
  display: flex; align-items: center; gap: var(--e2);
  margin-top: var(--e3);
}
.plato__puntos{
  flex: 1 1 auto; height: 14px; min-width: 24px;
  color: #565656;
  background-image: radial-gradient(circle at 1.6px 50%, currentColor 1.2px, transparent 1.4px);
  background-size: 7px 100%;
}
.plato__desde{
  font-family: var(--comanda); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--humo); flex: none;
}
.plato__precio{
  font-family: var(--comanda); font-size: 16px; font-variant-numeric: tabular-nums;
  color: var(--amarillo-cinta); flex: none; white-space: nowrap;
}

.eti{
  flex: none; margin-left: auto;
  background: var(--amarillo-cinta); color: #000;
  font-family: var(--comanda); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px var(--e2);
  border-radius: 6px 2px 6px 2px;
}
.eti--verde{ background: var(--verde-encurtido); color: #fff; }
.eti--agotado{ background: var(--humo); color: #000; }

/* Agotados: se ven, pero no se pueden pedir */
.plato--agotado{ opacity: .45; cursor: not-allowed; }
.plato--agotado:hover{ background: var(--gris-ladrillo); }
.plato--agotado .plato__precio{ color: var(--humo); text-decoration: line-through; }
.tarjeta--agotada{ opacity: .5; }
.tarjeta--agotada .tarjeta__meta{ color: var(--humo); }

/* SEDES */
.seccion{ padding-bottom: var(--e7); }

.sedes{ display: grid; gap: var(--e4); margin-top: var(--e6); }

.sede{
  background: var(--gris-ladrillo);
  border: 2px solid #000; border-left: 4px solid #000;
  border-radius: var(--rad);
  padding: var(--e4);
}
.sede[data-activa="1"]{ border-left-color: var(--amarillo-cinta); background: var(--gris-alto); }
/* Cerrada NO se atenúa: abren a las 2 p. m., así que toda la mañana las 5
   saldrían apagadas y la sección entera parecería desactivada. El estado se
   dice con el punto y el texto de arriba, que además es más claro. */
.sede[data-abierta="0"] .sede__punto{ background: var(--naranja-plancha); }
.sede[data-abierta="0"] .sede__estado{ color: var(--naranja-plancha); }

.sede__estado{
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--comanda); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--humo);
}
.sede__punto{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--humo); flex: none;
}
.sede[data-abierta="1"] .sede__punto{ background: var(--verde-encurtido); }
.sede[data-abierta="1"] .sede__estado{ color: var(--verde-encurtido); }

.sede__nombre{
letter-spacing: -0.01em; line-height: 1;
  font-size: 26px; margin: var(--e2) 0 0;
}
.sede__dir{ margin: var(--e2) 0 0; color: var(--humo-claro); font-size: 14px; }
.sede__hora{
  margin: var(--e2) 0 0; color: var(--humo);
  font-family: var(--comanda); font-size: 11px;
}
.sede__acciones{ display: flex; gap: var(--e2); margin-top: var(--e3); flex-wrap: wrap; }
.sede__b{
  flex: 1 1 auto;
  padding: var(--e3) var(--e4);
  background: transparent; color: var(--amarillo-cinta);
  border: 2px solid var(--amarillo-cinta); border-radius: var(--rad-chico);
font-size: 14px; text-align: center;
  text-decoration: none;
  transition: transform 140ms ease;
}
.sede__b--activo{ background: var(--amarillo-cinta); color: #000; }
.sede__b:active{ transform: translateY(1px); }
.sede__asesores{
  margin: var(--e3) 0 0; color: var(--humo);
  font-family: var(--comanda); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase;
}
.sedes__nota{
  margin: var(--e5) 0 0; color: var(--humo);
  font-family: var(--comanda); font-size: 11px; line-height: 1.7;
}

/* MARCA */
.marca{
  position: relative;
  background: var(--gris-ladrillo);
  border-top: 3px solid #000; border-bottom: 3px solid #000;
  padding-top: var(--e8); padding-bottom: var(--e8);
  overflow: hidden;
}
.marca__interior{ position: relative; }
.marca__aspa{
  position: absolute; top: 50%; left: -15%;
  width: 130%; height: auto;
  transform: translateY(-50%);
  fill: var(--amarillo-cinta); opacity: .2;
  pointer-events: none;
}
.marca__titulo{
  position: relative;
letter-spacing: -0.015em; line-height: .92;
  font-size: clamp(34px, 11vw, 72px); margin: 0;
}
.marca__texto{
  position: relative;
  margin: var(--e5) 0 0; max-width: 56ch;
  color: var(--humo-claro); font-size: 16px; line-height: 1.6;
}

/* PIE */
.pie{
  padding: var(--e7) 0 calc(140px + env(safe-area-inset-bottom));
  border-top: 3px solid #000;
}
.pie__marca{
font-size: 34px; letter-spacing: -0.01em;
  margin: 0; color: var(--rojo-montagus);
}
.pie__tagline{ margin: var(--e1) 0 0; color: var(--humo-claro); font-size: 14px; }
.pie__horario, .pie__pagos, .pie__legal{
  margin: var(--e4) 0 0; color: var(--humo);
  font-family: var(--comanda); font-size: 11px; line-height: 1.7;
}
.pie__legal{ color: var(--humo-pie); }
.pie__redes{ display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }
.pie__redes a{
  color: var(--amarillo-cinta); text-decoration: none;
font-size: 15px;
  border-bottom: 2px solid var(--amarillo-cinta);
}

/* CINTA CARRITO */
.cinta-carrito{
  position: fixed; z-index: 45;
  left: var(--canal); right: var(--canal);
  bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--amarillo-cinta); color: #000;
  border: 2px solid #000; border-radius: var(--rad);
  box-shadow: 0 4px 0 #000;
  transition: transform var(--salida), opacity var(--salida);
}
.cinta-carrito[hidden]{ display: none; }
.cinta-carrito.entra{ transform: translateY(0); opacity: 1; }
.cinta-carrito.sale{ transform: translateY(140%); opacity: 0; }
.cinta-carrito:active{ transform: translateY(2px); box-shadow: 0 2px 0 #000; }

.cinta-carrito__n{
  flex: none; min-width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #000; color: var(--amarillo-cinta);
  border-radius: 7px 2px 7px 2px;
  font-family: var(--comanda); font-size: 13px; font-variant-numeric: tabular-nums;
}
.cinta-carrito__t{
  font-family: var(--comanda); font-size: 17px; font-variant-numeric: tabular-nums;
}
.cinta-carrito__v{
  margin-left: auto;
font-size: 16px; letter-spacing: .02em;
}

/* AVISOS */
.avisos{
  position: fixed; z-index: 60;
  left: var(--canal); right: var(--canal);
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--e2);
  pointer-events: none;
}
/* Con una hoja abierta los avisos suben, para no tapar los botones de acción */
body.bloqueado .avisos{
  bottom: auto;
  top: calc(var(--e3) + env(safe-area-inset-top));
}
.aviso{
  background: var(--tinta); color: var(--papel-encerado);
  border: 2px solid #000; border-radius: var(--rad-chico);
  padding: var(--e3) var(--e4);
  font-size: 14px;
  display: flex; align-items: center; gap: var(--e3);
  pointer-events: auto;
  opacity: 0; transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.aviso.visible{ opacity: 1; transform: translateY(0); }
.aviso__b{
  margin-left: auto; background: none; border: 0;
  padding: var(--e2) var(--e1); min-height: 36px;
  color: var(--amarillo-cinta); text-decoration: underline;
font-size: 14px;
}

/* REVELADO SCROLL Solo se esconde si el JS confirmó que va a observar (clase js anim en <html>). Si algo falla, el contenido se ve igual. */
.js-anim .revelar{ opacity: 0; transform: translateY(14px); }
.js-anim .revelar.visto{
  opacity: 1; transform: translateY(0);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.7,.3,1);
}

/* TABLET */
@media (min-width: 620px){
  :root{ --canal: 32px; }
  .sedes{ grid-template-columns: 1fr 1fr; }
  .rejilla{ grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
  .tarjeta__nombre{ font-size: 22px; }
  .portada__acciones{ flex-direction: row; max-width: none; }
  .portada__logo{ max-width: 360px; }
}

/* ESCRITORIO */
@media (min-width: 900px){
  body{ font-size: 16px; }

  .platos{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 2px; background: #000;
  }
  .plato{ border-right: 0; }

  .papel--producto{
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(560px, 92vw);
    max-height: 86vh;
    transform: translate(-50%, -46%) scale(.97);
    opacity: 0;
    border-radius: var(--rad);
    overflow: hidden;
  }
  .papel--producto.abierto{ transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .papel--producto .papel__borde{ display: none; }

  .papel--carrito{
    left: auto; right: 0; top: 0; bottom: 0;
    width: min(420px, 94vw);
    max-height: none;
    transform: translateX(100%);
  }
  .papel--carrito.abierto{ transform: translateX(0); }
  .papel--carrito .papel__borde{
    display: block; height: auto; width: 14px; flex: none;
    position: absolute; left: 0; top: 0; bottom: 0;
    clip-path: polygon(100% 0,38% 0,66% 2%,22% 5%,52% 8%,30% 11%,61% 14%,18% 18%,
      48% 21%,68% 25%,26% 28%,55% 32%,34% 35%,63% 39%,20% 43%,50% 46%,30% 50%,
      60% 54%,24% 58%,54% 61%,36% 65%,66% 69%,22% 72%,48% 76%,62% 80%,28% 84%,
      56% 87%,32% 91%,60% 94%,24% 97%,46% 100%,100% 100%);
  }
  .papel--carrito .papel__cuerpo{ margin-left: 14px; }

  .cinta-carrito{
    left: auto; right: var(--canal); width: 320px;
  }
  .avisos{ left: auto; right: var(--canal); width: 360px; }
  /* con el panel lateral abierto, los avisos se van al otro lado */
  body.bloqueado .avisos{
    right: auto; left: var(--canal);
    top: auto; bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1100px){
  .platos{ grid-template-columns: repeat(3, 1fr); }
  .rejilla{ grid-template-columns: repeat(4, 1fr); }
}

/* SAFARI iOS 14.0 – 14.4 El `gap` en flexbox llegó en Safari 14.1, en la MISMA versión que `inset`. Entonces `@supports not (inset: 0)` apunta exactamente a los navegadores que no tienen gap en flex (Safari < 14.1, Chrome < 87) y a nadie más. Ahí se reponen las separaciones a punta de margin. */
@supports not (inset: 0){
  .portada__acciones > * + *{ margin-top: var(--e3); }
  .categorias > * + *{ margin-left: var(--e2); }
  .pasos > * + *{ margin-left: var(--e4); }
  .plato--foto > * + *{ margin-left: var(--e4); }
  .plato__cab > * + *,
  .plato__linea > * + *,
  .linea__cab > * + *{ margin-left: var(--e2); }
  .sede__estado > * + *{ margin-left: var(--e2); }
  .sede__acciones > * + *,
  .segmentos > * + *{ margin-left: var(--e2); }
  .linea__acciones > * + *{ margin-left: var(--e4); }
  .papel__cab > * + *,
  .papel__pie > * + *{ margin-left: var(--e3); }
  .resumen__fila > * + *{ margin-left: var(--e3); }
  .elige-sede > * + *,
  .sugerido > * + *{ margin-left: var(--e3); }
  .opcion > * + *{ margin-left: var(--e3); }
  .cinta-carrito > * + *{ margin-left: var(--e3); }
  .aviso > * + *{ margin-left: var(--e3); }
  .boton > * + *{ margin-left: var(--e2); }
  .paso-titulo > * + *{ margin-left: var(--e2); }
  .pie__redes > *{ margin: 0 var(--e3) var(--e2) 0; }

  @media (min-width: 620px){
    .portada__acciones > * + *{ margin-top: 0; margin-left: var(--e3); }
  }
}

/* MENOS MOVIMIENTO */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-anim .revelar{ opacity: 1; transform: none; }
}