/* =========================================================================
   PERRO — hoja de estilos
   Todo valor sale de brand/brand.tokens.json. Si algo no está acá arriba,
   no existe: no se hardcodea un color, un tamaño ni un espaciado más abajo.
   ========================================================================= */

:root {
  /* --- primitivo.color --- */
  --marca-100: #FFE24A;   /* mostaza flúor */
  --marca-500: #F2C200;   /* mostaza riso */
  --marca-900: #FF1F6B;   /* magenta riso */
  --neutral-0: #FFFFFF;
  --neutral-100: #E9E4D8; /* papel de fotocopia */
  --neutral-500: #5F5B52; /* gris de trama */
  --neutral-900: #0B0B0B; /* tinta */

  /* --- primitivo.espacio --- */
  --e1: 4px;  --e2: 8px;  --e3: 16px; --e4: 24px;
  --e5: 40px; --e6: 64px; --e7: 104px; --e8: 168px;

  /* --- semantico.superficie --- */
  --sup-base: var(--neutral-100);
  --sup-elevada: var(--neutral-0);
  --sup-inversa: var(--neutral-900);
  --sup-acento: var(--marca-900);

  /* --- semantico.texto --- */
  --txt-principal: var(--neutral-900);
  --txt-secundario: var(--neutral-500);
  --txt-sobre-inversa: var(--neutral-100);
  --txt-acento: var(--marca-500);   /* SOLO sobre superficie inversa */

  /* --- semantico.borde --- */
  --borde-sutil: var(--neutral-500);
  --borde-fuerte: var(--neutral-900);

  /* Divisores sobre superficie inversa. No son colores nuevos: el RGB es el
     de neutral-100 y lo único que cambia es la opacidad. El gris de trama
     (neutral-500) NO se usa sobre tinta — ese par no está en la tabla de
     contraste y no se inventa acá. */
  --linea-inversa: rgba(233, 228, 216, 0.22);
  --punto-inversa: rgba(233, 228, 216, 0.40);

  /* --- tipografia.familia --- */
  --f-display: "Bricolage Grotesque", "Archivo", Impact, sans-serif;
  --f-texto: "Archivo", Helvetica, Arial, sans-serif;
  --f-mono: "Space Mono", "Courier New", monospace;

  /* --- tipografia.rol (escala CERRADA, seis roles) --- */
  --r-display-size: clamp(3.25rem, 14vw, 9rem);
  --r-display-lh: 0.84;   --r-display-w: 800; --r-display-tr: -0.035em;
  --r-headline-size: clamp(1.875rem, 6vw, 3.5rem);
  --r-headline-lh: 0.94;  --r-headline-w: 800; --r-headline-tr: -0.02em;
  --r-rotulo-size: 0.75rem;
  --r-rotulo-lh: 1;       --r-rotulo-w: 700;  --r-rotulo-tr: 0.22em;
  --r-subhead-size: clamp(1.125rem, 2.4vw, 1.5rem);
  --r-subhead-lh: 1.22;   --r-subhead-w: 600; --r-subhead-tr: -0.01em;
  --r-body-size: 1.0625rem;
  --r-body-lh: 1.55;      --r-body-w: 400;    --r-body-tr: 0;
  --r-caption-size: 0.8125rem;
  --r-caption-lh: 1.4;    --r-caption-w: 400; --r-caption-tr: 0.04em;

  /* --- movimiento --- */
  --mov-rapido: 90ms cubic-bezier(0.2, 0, 0, 1);
  --mov-lento: 520ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- forma --- */
  --radio-chico: 0px;
  --radio-grande: 999px;

  /* --- collage.rotacion --- */
  --rot-nada: 0deg;
  --rot-poco: -0.9deg;
  --rot-medio: 2.2deg;
  --rot-mucho: -6deg;

  /* --- collage.recorte --- */
  --rec-tijera: polygon(0.6% 1.4%, 99.2% 0%, 100% 98.4%, 1.2% 100%);
  --rec-rasgado: polygon(0% 2%, 12% 0%, 31% 2.4%, 55% 0.4%, 78% 2.6%, 100% 0%,
                         100% 97%, 82% 100%, 61% 97.4%, 37% 100%, 15% 97.2%, 0% 99.6%);

  /* --- collage.trama --- */
  --trama-puntos: radial-gradient(var(--neutral-900) 0.7px, transparent 0.8px);
  --trama-size: 4px 4px;
  --grano-opacidad: 0.055;

  /* --- estructura --- */
  --contenedor: 1240px;
  --espina: 26px;          /* ancho del chorro de mostaza */
}

/* =========================================================================
   RESET
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Las piezas rotadas del collage sangran a propósito contra el borde.
     `clip` las recorta sin crear un contenedor de scroll (a diferencia de
     `hidden`), así que los elementos fijos siguen funcionando. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--sup-base);
  color: var(--txt-principal);
  font-family: var(--f-texto);
  font-size: var(--r-body-size);
  line-height: var(--r-body-lh);
  font-weight: var(--r-body-w);
  overflow-x: hidden;
}

/* Los márgenes por defecto del navegador no forman parte del sistema: el
   espaciado sale siempre de los tokens. Sin esto, un <p> sin clase de rol
   arrastra 1em arriba y abajo y desalinea las filas de precio. */
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* =========================================================================
   EL AMBIENTE — una sola capa fija detrás de todo.
   Grano de fotocopia + trama de puntos que deriva muy lento (90s), para que
   scrollear se sienta como moverse por un impreso y no por secciones apiladas.
   ========================================================================= */

.ambiente {
  position: fixed;
  inset: -10vmax;
  z-index: 0;
  pointer-events: none;
  background-image: var(--trama-puntos);
  background-size: var(--trama-size);
  opacity: var(--grano-opacidad);
  animation: deriva 90s linear infinite alternate;
}

@keyframes deriva {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(2.5vmax, 3.5vmax, 0); }
}

/* =========================================================================
   EL ELEMENTO FIRMA — el chorro de mostaza.
   Baja pegado al borde izquierdo y crece con el scroll. Es a la vez barra de
   progreso y navegación de secciones. Si se saca, la página se desarma en
   secciones sueltas: por eso es la firma y por eso toda la audacia va acá.
   ========================================================================= */

.espina {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--espina);
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.espina__canal {
  position: absolute;
  inset: 0;
  background: var(--neutral-900);
  opacity: 0.08;
}

/* el chorro propiamente dicho: altura = progreso de scroll */
.espina__chorro {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--progreso, 0%);
  background: var(--marca-500);
  will-change: height;
}

/* la gota que cuelga de la punta del chorro */
.espina__chorro::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(var(--espina) * 0.72);
  height: calc(var(--espina) * 1.15);
  transform: translateX(-50%);
  background: var(--marca-500);
  border-radius: 0 0 50% 50% / 0 0 62% 62%;
}

/* las pestañas de sección, colgadas del chorro */
.espina__marcas {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0; padding: 0;
  pointer-events: auto;
}

.espina__marca {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}

.espina__marca a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--espina);
  height: var(--espina);
  font-family: var(--f-mono);
  font-size: var(--r-caption-size);
  font-weight: 700;
  line-height: 1;
  color: var(--txt-principal);
  text-decoration: none;
  opacity: 0.42;
  transition: opacity var(--mov-rapido), background var(--mov-rapido);
}

.espina__marca a:hover,
.espina__marca a:focus-visible { opacity: 1; background: var(--neutral-900); color: var(--marca-500); }
.espina__marca[aria-current="true"] a { opacity: 1; }

@media (max-width: 900px) {
  :root { --espina: 8px; }
  .espina__marcas { display: none; }
}

/* =========================================================================
   TIPOGRAFÍA — solo los seis roles. Ningún tamaño intermedio.
   ========================================================================= */

.display {
  font-family: var(--f-display);
  font-size: var(--r-display-size);
  line-height: var(--r-display-lh);
  font-weight: var(--r-display-w);
  letter-spacing: var(--r-display-tr);
  text-transform: uppercase;
  margin: 0;
}

.headline {
  font-family: var(--f-display);
  font-size: var(--r-headline-size);
  line-height: var(--r-headline-lh);
  font-weight: var(--r-headline-w);
  letter-spacing: var(--r-headline-tr);
  text-transform: uppercase;
  margin: 0;
}

.rotulo {
  font-family: var(--f-mono);
  font-size: var(--r-rotulo-size);
  line-height: var(--r-rotulo-lh);
  font-weight: var(--r-rotulo-w);
  letter-spacing: var(--r-rotulo-tr);
  text-transform: uppercase;
  margin: 0;
}

.subhead {
  font-family: var(--f-texto);
  font-size: var(--r-subhead-size);
  line-height: var(--r-subhead-lh);
  font-weight: var(--r-subhead-w);
  letter-spacing: var(--r-subhead-tr);
  margin: 0;
}

.body { margin: 0; max-width: 62ch; }
.body + .body { margin-top: var(--e3); }

.caption {
  font-family: var(--f-mono);
  font-size: var(--r-caption-size);
  line-height: var(--r-caption-lh);
  font-weight: var(--r-caption-w);
  letter-spacing: var(--r-caption-tr);
  margin: 0;
}

/* =========================================================================
   ESTRUCTURA
   ========================================================================= */

.saltar {
  position: absolute;
  left: var(--espina); top: 0;
  z-index: 100;
  transform: translateY(-140%);
  background: var(--sup-inversa);
  color: var(--txt-acento);
  font-family: var(--f-mono);
  font-size: var(--r-caption-size);
  text-transform: uppercase;
  letter-spacing: var(--r-rotulo-tr);
  padding: var(--e3) var(--e4);
  text-decoration: none;
  transition: transform var(--mov-rapido);
}
.saltar:focus { transform: translateY(0); }

.pagina {
  position: relative;
  z-index: 1;
  padding-left: var(--espina);
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--e4);
}

@media (min-width: 900px) {
  .contenedor { padding-inline: var(--e6); }
}

/* Ritmo vertical DESIGUAL: dos secciones vecinas nunca comparten padding.
   Las de tinta van apretadas (se leen como franja pegada); las de papel,
   amplias (se leen como hoja). */
.seccion { position: relative; }
.seccion--apretada { padding-block: var(--e5); }
.seccion--media    { padding-block: var(--e7); }
.seccion--amplia   { padding-block: var(--e8); }

.seccion--tinta {
  background: var(--sup-inversa);
  color: var(--txt-sobre-inversa);
}
.seccion--tinta .caption { color: var(--txt-sobre-inversa); opacity: 0.72; }

/* El foco es un anillo doble. El magenta solo no alcanza: sobre papel da
   2,92:1 y un indicador de foco necesita 3:1 contra lo que tiene al lado
   (WCAG 1.4.11). El anillo interno es el que carga el contraste —tinta sobre
   papel, 15,51:1— y el magenta queda por fuera como forma sólida, que es la
   única manera en que el sistema lo permite. */
:focus-visible {
  outline: 3px solid var(--borde-fuerte);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--sup-acento);
}
.seccion--tinta :focus-visible { outline-color: var(--marca-500); }

/* =========================================================================
   PIEZAS DEL COLLAGE
   ========================================================================= */

/* tratamiento riso: el look no está horneado en los archivos, se aplica acá */
.riso {
  filter: contrast(1.22) saturate(1.15) brightness(0.98);
}

.recorte {
  position: relative;
  background: var(--sup-elevada);
  padding: var(--e2);
  box-shadow: var(--e1) var(--e1) 0 var(--borde-fuerte);
}

.recorte--tijera { clip-path: var(--rec-tijera); box-shadow: none; }
.recorte--rasgado { clip-path: var(--rec-rasgado); box-shadow: none; }
.recorte--poco  { rotate: var(--rot-poco); }
.recorte--medio { rotate: var(--rot-medio); }

/* la cinta de embalar que sostiene los recortes */
.cinta {
  position: absolute;
  width: 92px; height: 26px;
  background: var(--neutral-0);
  opacity: 0.62;
  border-left: 1px dashed var(--borde-sutil);
  border-right: 1px dashed var(--borde-sutil);
  rotate: var(--rot-mucho);
  pointer-events: none;
}
.cinta--sup-izq { top: calc(var(--e3) * -1); left: var(--e5); }
.cinta--sup-der { top: calc(var(--e3) * -1); right: var(--e5); rotate: calc(var(--rot-mucho) * -1); }
.cinta--inf-izq { bottom: calc(var(--e3) * -1); left: var(--e6); }

/* las chapitas: la ÚNICA forma redonda del sistema, máx. 3 por pantalla */
.chapita {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border-radius: var(--radio-grande);
  padding: var(--e2) var(--e3);
  font-family: var(--f-mono);
  font-size: var(--r-caption-size);
  font-weight: 700;
  letter-spacing: var(--r-caption-tr);
  text-transform: uppercase;
  border: 2px solid currentColor;
}
.chapita--abierto { background: var(--marca-500); color: var(--neutral-900); border-color: var(--neutral-900); }
.chapita--cerrado { background: var(--sup-inversa); color: var(--marca-500); border-color: var(--marca-500); }

.chapita__punto {
  width: 9px; height: 9px;
  border-radius: var(--radio-grande);
  background: currentColor;
}
.chapita--abierto .chapita__punto { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* botones: rectángulo de tinta plena, borde 2px. Sin radio, sin sombra suave,
   sin gradiente — regla dura de brand.rules.md */
.boton {
  display: inline-block;
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--sup-inversa);
  color: var(--txt-acento);
  font-family: var(--f-mono);
  font-size: var(--r-caption-size);
  font-weight: 700;
  letter-spacing: var(--r-rotulo-tr);
  text-transform: uppercase;
  padding: var(--e3) var(--e4);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--mov-rapido), background var(--mov-rapido), color var(--mov-rapido);
}
.boton:hover { transform: translate(-2px, -2px); background: var(--marca-900); color: var(--neutral-900); }
.boton:active { transform: translate(0, 0); }

.seccion--tinta .boton {
  background: var(--marca-500);
  color: var(--neutral-900);
  border-color: var(--marca-500);
}
.seccion--tinta .boton:hover { background: var(--marca-900); border-color: var(--marca-900); }

/* subrayado de mostaza: mostaza sobre papel SOLO como forma sólida, nunca
   como letra (1.32:1). El texto encima sigue siendo tinta. */
.marcado {
  background: linear-gradient(var(--marca-500), var(--marca-500));
  background-size: 100% 0.42em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  padding-inline: 0.1em;
}

/* =========================================================================
   VOCABULARIO DE COMPOSICIÓN — cuatro formas de abrir una sección.
   Definidas en brand.rules.md. Ninguna se usa en más de 3 de las 7 secciones
   y dos secciones vecinas nunca comparten forma. Existe porque la versión
   anterior de este sitio abría 7 de 7 con `rotulo → h2 → contenido`, que era
   el molde que traía el pipeline y no una decisión de este proyecto.
   ========================================================================= */

/* --- FORMA 1: `indice` — entrada de índice numerada -----------------------
   Único lugar donde un `rotulo` puede ir arriba de un titular. El número es
   el real de la espina: se imprimen 01, 03 y 07 y los huecos son las
   secciones que abren de otra manera. Máximo 3 de 7. */

.rotulo--orden {
  display: flex;
  align-items: center;
  gap: var(--e3);
  border-bottom: 2px solid var(--borde-fuerte);
  padding-bottom: var(--e3);
}

.rotulo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6em;
  padding: 0.55em 0.4em;
  background: var(--sup-inversa);
  color: var(--txt-acento);      /* mostaza sobre tinta — 11,71:1 */
  letter-spacing: 0;
}

.indice__titulo { margin-top: var(--e4); }

/* --- FORMA 2: `pizarra` — el tablero de la puerta -------------------------
   Forma propia de este proyecto y la única que no se podría llevar a otro
   rubro: la pizarra existe porque se hacen 120 panes por día y el menú se
   achica durante la noche. Abre con la chapa; el titular va adentro del
   marco. Se usa UNA vez. */

.pizarra { position: relative; }

/* la chapa se sale del contenedor por los dos lados: es el borde superior
   del tablero, no un encabezado de texto */
.pizarra__chapa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e4);
  margin-inline: calc(var(--e4) * -1);
  padding: var(--e3) var(--e4);
  background: var(--marca-500);
  color: var(--neutral-900);     /* tinta sobre mostaza — 11,71:1 */
}

.pizarra__titulo {
  margin-top: var(--e6);
  color: var(--txt-sobre-inversa);
}

@media (min-width: 900px) {
  .pizarra__chapa { margin-inline: calc(var(--e6) * -1); padding-inline: var(--e6); }
  /* el aviso se va al extremo derecho de la chapa solo cuando la chapa entra
     en una línea; envuelto, colgarlo a la derecha lo deja suelto en el aire */
  .pizarra__aviso { margin-left: auto; }
}

/* filas de tiza: el tablero está sobre tinta, así que los divisores y los
   puntos suspensivos son papel a baja opacidad, nunca el gris de trama */
.forma-pizarra .menu { border-top-color: var(--marca-500); }
.forma-pizarra .item { border-bottom-color: var(--linea-inversa); }
.forma-pizarra .item__que { color: var(--txt-sobre-inversa); opacity: 0.72; }
.forma-pizarra .item__precio { color: var(--txt-acento); }
.forma-pizarra .item__puntos {
  background-image: radial-gradient(var(--punto-inversa) 1px, transparent 1.2px);
}

/* el tachado: estado de datos, no rediseño. Se marca `data-agotado="true"`
   en el <article> y la fila queda como en la pizarra de la vereda. No se
   apaga con opacidad —eso rompería el contraste—: se tacha. */
.item[data-agotado="true"] .item__nombre,
.item[data-agotado="true"] .item__precio {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
.item[data-agotado="true"] .item__foto { opacity: 0.3; }
/* `inline-block` no es decorativo: sin él el ::after hereda el tachado del
   <h3> y la aclaración sale tachada también, que es justo lo contrario de
   lo que tiene que decir. */
.item[data-agotado="true"] .item__nombre::after {
  content: "se acabó";
  display: inline-block;
  margin-left: var(--e3);
  font-family: var(--f-mono);
  font-size: var(--r-rotulo-size);
  letter-spacing: var(--r-rotulo-tr);
  text-transform: uppercase;
  text-decoration: none;
}

/* --- FORMA 3: `margen` — nota al margen ----------------------------------
   El objeto manda y el titular lo anota, que es lo contrario de `indice`.
   Reservada a las secciones donde el contenido pesa más que el enunciado:
   las cinco barras de la comparación y la tabla de horarios. Máximo 2 de 7.
   En móvil el riel no se convierte en un titular centrado: se queda con la
   barra a la izquierda y el titular sangrado contra ella. */

.margen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
  align-items: start;
}

.margen__riel {
  border-left: 4px solid var(--borde-fuerte);
  padding-left: var(--e4);
}
/* bandera angosta: los cortes los reparte el navegador, no un <br> */
.margen__riel .headline { text-wrap: balance; }
.seccion--tinta .margen__riel { border-left-color: var(--marca-500); }

.margen__nota { margin-top: var(--e3); color: var(--txt-secundario); }
.seccion--tinta .margen__nota { color: var(--txt-sobre-inversa); opacity: 0.72; }

/* 1000px y no 880: el riel es angosto y el titular está en rol headline, que
   no tiene tamaño intermedio. Por debajo de eso no hay ancho para las dos
   columnas sin partir palabras. */
@media (min-width: 1000px) {
  .margen {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
    gap: var(--e6);
  }
  .margen__riel { position: sticky; top: var(--e5); }
}

/* --- FORMA 4: `grito` — la franja ----------------------------------------
   Titular en rol display sobre mostaza plena, a sangre contra los dos bordes.
   Sin etiqueta arriba: la etiqueta baja a un sello magenta sobreimpreso en el
   aire de la franja, nunca sobre las letras. Se usa UNA vez, en la historia.
   Mostaza y papel juntos solo así: forma sólida, jamás letra. */

.grito {
  position: relative;
  z-index: 1;
  background: var(--marca-500);
  border-block: 3px solid var(--borde-fuerte);
  padding: var(--e5) var(--e4);
  margin-bottom: var(--e7);
}

.grito__titulo {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--e4);
  color: var(--txt-principal);   /* tinta sobre mostaza — 11,71:1 */
}

/* el sello vive dentro del padding superior de la franja (40px de aire), así
   que se sobreimprime en el borde y no sobre ninguna letra */
.grito__sello {
  position: absolute;
  top: calc(var(--e2) * -1);
  right: var(--e5);
  background: var(--sup-acento);
  color: var(--txt-principal);   /* tinta sobre magenta — 5,30:1 */
  border: 2px solid var(--borde-fuerte);
  padding: var(--e2) var(--e3);
  rotate: var(--rot-mucho);
}

/* En angosto el titular ocupa la franja entera y no queda aire arriba: el
   sello se despega y va debajo, sin superponerse a nada. */
@media (max-width: 760px) {
  .grito__sello {
    position: static;
    display: inline-block;
    margin-top: var(--e4);
  }
}

@media (min-width: 900px) {
  .grito { padding-inline: var(--e6); }
  .grito__titulo { padding-inline: var(--e6); }
}

/* =========================================================================
   1 — HERO / tapa de fanzine (arquetipo DENSO INFORMATIVO)
   ========================================================================= */

.tapa {
  position: relative;
  padding-block: var(--e5) var(--e6);
  border-bottom: 3px solid var(--borde-fuerte);
  overflow: hidden;
}

.tapa__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  align-items: start;
}

.tapa__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  border-bottom: 2px solid var(--borde-fuerte);
  padding-bottom: var(--e2);
  margin-bottom: var(--e4);
}

/* el nombre a sangre, cortado contra el borde: el logo es elemento de estilo */
.tapa__nombre {
  font-size: clamp(4.5rem, 26vw, 17rem);
  margin-left: -0.06em;
  margin-block: var(--e2) 0;
}

.tapa__bajada { max-width: 34ch; }

.tapa__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e4);
  margin-top: var(--e4);
}

.tapa__foto {
  position: relative;
  margin-top: var(--e5);
}
.tapa__foto img { width: 100%; height: auto; }

/* los fragmentos pegados: lo que hace que la tapa sea DENSA */
.tapa__pegados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
  margin-top: var(--e5);
  border-top: 2px solid var(--borde-fuerte);
  padding-top: var(--e4);
}

.pegado {
  border: 2px solid var(--borde-fuerte);
  padding: var(--e3);
  background: var(--sup-elevada);
}
.pegado:nth-child(2n) { rotate: var(--rot-poco); }
.pegado:nth-child(3n) { background: var(--sup-acento); }
.pegado dt { margin: 0 0 var(--e2); }
.pegado dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--r-subhead-size);
  font-weight: var(--r-headline-w);
  line-height: var(--r-headline-lh);
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .tapa__grilla {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--e6);
  }
  .tapa__foto { margin-top: 0; }
  .tapa__nombre { font-size: clamp(7rem, 15vw, 15rem); }
}

/* =========================================================================
   2 — PAN Y SALCHICHA / díptico
   Esqueleto propio: dos columnas espejadas, foto arriba y ficha técnica abajo.
   ========================================================================= */

.diptico {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e6);
  margin-top: var(--e6);
}

.pieza__foto { position: relative; margin-bottom: var(--e4); }
.pieza__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.pieza__specs {
  margin: var(--e4) 0 0;
  border-top: 2px solid var(--borde-fuerte);
}
.pieza__specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  border-bottom: 1px solid var(--borde-sutil);
  padding-block: var(--e2);
}
.pieza__specs dt { color: var(--txt-secundario); }
.pieza__specs dd {
  margin: 0;
  font-family: var(--f-texto);
  font-weight: 600;
  text-align: right;
}

@media (min-width: 820px) {
  .diptico { grid-template-columns: 1fr 1fr; gap: var(--e7); }
  .diptico > :nth-child(2) { margin-top: var(--e7); }
}

/* =========================================================================
   3 — MENÚ / filas de pizarra (forma `pizarra`)
   Filas lineales con línea de puntos hasta el precio. La piel de tablero
   —chapa, tiza, tachado— está arriba, en el bloque del vocabulario.
   ========================================================================= */

.menu { margin-top: var(--e5); border-top: 3px solid var(--borde-fuerte); }

.item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  padding-block: var(--e4);
  border-bottom: 1px solid var(--borde-sutil);
}

.item__fila {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}

.item__nombre { flex: 0 1 auto; }

/* La guía de puntos hasta el precio. La altura tiene que ser la del mosaico
   (6px) y el punto tiene que quedar centrado: con `height: 1px` el centro del
   radial cae fuera de la caja y la guía no se dibuja nunca. */
.item__puntos {
  flex: 1 1 auto;
  height: 6px;
  min-width: var(--e5);
  background-image: radial-gradient(var(--borde-sutil) 1px, transparent 1.2px);
  background-size: 6px 6px;
  background-position: 0 center;
  background-repeat: repeat-x;
  transform: translateY(-0.2em);
}

.item__precio {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: var(--r-subhead-size);
}

.item__que { color: var(--txt-secundario); max-width: 58ch; }

.item__foto {
  width: 132px;
  grid-row: span 2;
  justify-self: end;
  align-self: center;
}
.item__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

@media (min-width: 720px) {
  .item {
    grid-template-columns: 1fr 132px;
    column-gap: var(--e5);
    align-items: center;
  }
  .item__fila, .item__que { grid-column: 1; }
  .item__foto { grid-column: 2; grid-row: 1 / span 2; }
}

.menu__nota { margin-top: var(--e4); }

/* =========================================================================
   4 — COMBOS / fichas encimadas
   Esqueleto propio: tarjetas superpuestas con rotación y cinta.
   ========================================================================= */

.combos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
  margin-top: var(--e6);
}

.combo {
  position: relative;
  background: var(--sup-elevada);
  border: 2px solid var(--borde-fuerte);
  padding: var(--e5) var(--e4) var(--e4);
  box-shadow: 6px 6px 0 var(--borde-fuerte);
}
.combo:nth-child(1) { rotate: var(--rot-poco); }
.combo:nth-child(2) { rotate: var(--rot-medio); background: var(--sup-acento); }
.combo:nth-child(3) { rotate: var(--rot-poco); }

.combo__lleva { list-style: none; margin: var(--e3) 0 var(--e4); padding: 0; }
.combo__lleva li {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding-block: var(--e1);
}
.combo__lleva li::before {
  content: "+";
  font-family: var(--f-mono);
  font-weight: 700;
  flex: 0 0 auto;
}

.combo__precios {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  border-top: 2px solid var(--borde-fuerte);
  padding-top: var(--e3);
  flex-wrap: wrap;
}
.combo__precio {
  font-family: var(--f-display);
  font-size: var(--r-headline-size);
  font-weight: var(--r-headline-w);
  line-height: 1;
  letter-spacing: var(--r-headline-tr);
}
.combo__suelto { color: var(--txt-secundario); text-decoration: line-through; }
/* En la tarjeta magenta la tinta va al 100%: al 70% queda en 3,80:1 y es un
   caption de 13px, que necesita 4,5:1. La tinta plena sobre magenta da 5,30:1
   y el tachado ya distingue el precio suelto sin ayuda de la opacidad. */
.combo:nth-child(2) .combo__suelto { color: var(--txt-principal); }

@media (min-width: 880px) {
  .combos { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
  .combos > :nth-child(2) { margin-top: var(--e5); z-index: 2; }
}

/* =========================================================================
   5 — PRECIO / franja de tinta con la comparación (forma `margen`)
   Superficie inversa + barras tipográficas. Las barras son el objeto; el
   titular las anota desde el riel.
   ========================================================================= */

.compara { margin-top: var(--e5); list-style: none; padding: 0; }

.compara li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e1);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--linea-inversa);
}

.compara__que { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.compara__monto { font-family: var(--f-mono); font-weight: 700; flex: 0 0 auto; }

.compara__barra {
  height: 14px;
  background: var(--txt-sobre-inversa);
  opacity: 0.28;
  width: var(--largo, 20%);
}
.compara li[data-nosotros] .compara__barra { background: var(--marca-500); opacity: 1; }
.compara li[data-nosotros] { border-bottom-color: var(--marca-500); }

/* =========================================================================
   6 — HISTORIA / columna única sobre foto del local (forma `grito`)
   Una sola columna angosta, sin grilla, sin fichas. La franja de mostaza que
   abre la sección está arriba, en el bloque del vocabulario.
   ========================================================================= */

.historia { position: relative; }

.historia__fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.historia__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: contrast(1.3) grayscale(0.55);
}

.historia__hoja {
  position: relative;
  z-index: 1;
  background: var(--sup-elevada);
  border: 2px solid var(--borde-fuerte);
  padding: var(--e6) var(--e4);
  max-width: 720px;
  margin-inline: auto;
  rotate: var(--rot-poco);
  box-shadow: 8px 8px 0 var(--borde-fuerte);
}
.historia__hoja .body { max-width: 58ch; }
.historia__hoja .body + .body { margin-top: var(--e4); }

@media (min-width: 760px) {
  .historia__hoja { padding: var(--e7) var(--e6); }
}

/* =========================================================================
   7 — HORARIOS Y UBICACIÓN / tabla sobria (forma `margen`)
   Tabular, decoración al mínimo. Acá la legibilidad le gana al collage — es
   donde se cierra la acción principal, y por eso la tabla es el objeto y el
   titular se corre al riel.
   ========================================================================= */

.donde {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e6);
}

.horarios { width: 100%; border-collapse: collapse; text-align: left; }
.horarios caption { text-align: left; margin-bottom: var(--e3); }
.horarios th, .horarios td {
  padding-block: var(--e3);
  border-bottom: 1px solid var(--borde-sutil);
  vertical-align: baseline;
}
.horarios th { font-weight: 600; }
.horarios td { font-family: var(--f-mono); text-align: right; }
.horarios tr[data-hoy="true"] th,
.horarios tr[data-hoy="true"] td {
  background: var(--marca-500);
  color: var(--txt-principal);
  border-bottom-color: var(--borde-fuerte);
}
.horarios tr[data-cerrado="true"] td { color: var(--txt-secundario); }

/* El lunes está cerrado Y, los lunes, es hoy: la fila queda con fondo mostaza
   y el gris de trama encima da 4,01:1, que no llega. Ese par no está en la
   tabla de contraste porque no existe: en la fila marcada todo va en tinta
   (11,71:1). Solo se veía los lunes, y el QA anterior corrió un domingo. */
.horarios tr[data-hoy="true"][data-cerrado="true"] td { color: var(--txt-principal); }

.mapa { position: relative; }
.mapa img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__ficha { margin-top: var(--e4); }
.mapa__ficha .body { max-width: 40ch; }

/* 1100 y no 880: dentro del riel de `margen` la columna útil arranca más
   tarde, y a 880 la tabla y el mapa quedaban de 200px cada uno. */
@media (min-width: 1100px) {
  .donde { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--e6); }
}

/* =========================================================================
   8 — NEWSLETTER / cupón recortable
   Esqueleto propio: borde de troquel y línea de corte.
   ========================================================================= */

.cupon {
  position: relative;
  margin-top: var(--e6);
  border: 3px dashed var(--borde-fuerte);
  background: var(--sup-elevada);
  padding: var(--e6) var(--e4);
  max-width: 860px;
}

@media (min-width: 760px) {
  .cupon { padding: var(--e7) var(--e6); }
}

.cupon__anticipos { list-style: none; margin: var(--e4) 0 var(--e6); padding: 0; }
.cupon__anticipos li {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding-block: var(--e2);
  border-bottom: 1px solid var(--borde-sutil);
}
.cupon__anticipos b { font-family: var(--f-texto); font-weight: 600; }
.cupon__anticipos span { color: var(--txt-secundario); margin-left: auto; text-align: right; }

.formulario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: stretch;
}

.campo { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--e2); }

.campo input {
  font-family: var(--f-mono);
  font-size: var(--r-body-size);
  color: var(--txt-principal);
  background: var(--sup-base);
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  padding: var(--e3);
  min-height: 52px;
}
.campo input::placeholder { color: var(--txt-secundario); }

.formulario .boton { flex: 0 0 auto; align-self: flex-end; min-height: 52px; }

/* Cuando el botón cae debajo del campo, ocupa el ancho: un botón corto
   colgado a la izquierda debajo de un campo largo se lee como error. */
@media (max-width: 560px) {
  .formulario .boton { flex: 1 1 100%; align-self: stretch; text-align: center; }
}

.formulario__aviso { flex: 1 1 100%; color: var(--txt-secundario); }

.formulario__estado { flex: 1 1 100%; margin-top: var(--e3); }
.formulario__estado[data-estado="ok"] { font-weight: 600; }

/* El mensaje de error va en tinta, no en magenta: magenta sobre el blanco del
   cupón da 3,71:1 y es un caption de 13px, que necesita 4,5:1. El magenta
   sigue marcando el error, pero como la regla lo permite — bloque sólido. */
.formulario__estado[data-estado="error"] {
  color: var(--txt-principal);
  font-weight: 600;
  border-left: 4px solid var(--sup-acento);
  padding-left: var(--e3);
}

/* =========================================================================
   9 — PIE
   ========================================================================= */

.pie { border-top: 3px solid var(--borde-fuerte); }

.pie__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
  align-items: start;
}

.pie__nombre {
  font-size: clamp(3.5rem, 17vw, 11rem);
  color: var(--txt-acento);
  margin-left: -0.06em;
  margin-top: var(--e5);
  line-height: 0.78;
}

.pie a { color: var(--txt-acento); }

@media (min-width: 780px) {
  .pie__grilla { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
}

/* =========================================================================
   BARRA MÓVIL — dos destinos reales, sin hamburguesa
   ========================================================================= */

.barra {
  position: fixed;
  left: var(--espina); right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sup-inversa);
  border-top: 2px solid var(--marca-500);
}

.barra a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--e3);
  font-family: var(--f-mono);
  font-size: var(--r-caption-size);
  font-weight: 700;
  letter-spacing: var(--r-rotulo-tr);
  text-transform: uppercase;
  color: var(--marca-500);
  text-decoration: none;
}
.barra a + a { border-left: 2px solid var(--marca-500); }
.barra a:hover { background: var(--marca-500); color: var(--neutral-900); }

@media (min-width: 900px) { .barra { display: none; } }
@media (max-width: 899px) { .pagina { padding-bottom: 56px; } }

/* =========================================================================
   ACCESIBILIDAD
   ========================================================================= */

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* targets táctiles de 44px sin mover el layout */
@media (pointer: coarse) {
  .menu a, .pie a, .mapa__ficha a, .tapa__datos a {
    position: relative;
  }
  .menu a::after, .pie a::after, .mapa__ficha a::after, .tapa__datos a::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* la entrada de los recortes: una sola animación, con la velocidad lenta.
   No es fade-in-up en todo: solo los recortes del collage se despegan. */
/* Se esconde SOLO si el JS corre (la clase `js` la pone main.js). Sin esa
   guarda, un visitante sin JS vería secciones enteras en blanco. */
@media (prefers-reduced-motion: no-preference) {
  .js .despega {
    opacity: 0;
    translate: 0 var(--e4);
    transition: opacity var(--mov-lento), translate var(--mov-lento);
  }
  .js .despega.pegado-ya {
    opacity: 1;
    translate: 0 0;
  }
}

/* las decoraciones se esconden en pantallas bajas para no chocar */
@media (max-height: 520px) {
  .cinta { display: none; }
}