/* Maqueta de la portada animada de Tony Shoarma. Tokens de specs/design.md. */

:root {
  --azul-tinta: #0B3C82;
  --azul-tinta-oscuro: #072A5C;
  --azul-gris: #4A6283;
  --azul-claro: #E8EEF7;
  --terracota: #BC6D3C;
  --terracota-oscuro: #9E5328;
  --terracota-claro: #EBD3C3;
  --papel: #FFFFFF;
  --papel-calido: #FBF6F1;
  --exito: #2E7D4F;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-lenta: 400ms;
  --dur-escena: 800ms;
  --escalonado: 80ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-escena: cubic-bezier(0.65, 0, 0.35, 1);

  --fuente-titulos: "Anton", "Arial Narrow", sans-serif;
  --fuente-texto: "Nunito", system-ui, sans-serif;
  --alto-cabecera: 72px;
  --alto-barra: 60px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--azul-tinta);
  font: 400 1rem/1.5 var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--terracota-oscuro); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; top: var(--space-2); left: var(--space-2); z-index: 20;
  padding: var(--space-2) var(--space-4); background: var(--papel); color: var(--azul-tinta);
  font-weight: 800; transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 900px) { .contenedor { padding: 0 var(--space-6); } }

.etiqueta {
  margin: 0 0 var(--space-3);
  font: 800 .8125rem/1.2 var(--fuente-texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota-oscuro);
}
.titulo-seccion {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
}
.linea {
  display: block;
  width: 64px;
  height: 3px;
  margin: var(--space-5) 0;
  background: var(--terracota);
  transform-origin: left center;
}

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--space-6);
  border: 2px solid var(--azul-tinta); border-radius: 4px;
  background: var(--azul-tinta); color: var(--papel);
  font: 400 1.375rem/1 var(--fuente-titulos); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.boton:hover { background: var(--azul-tinta-oscuro); border-color: var(--azul-tinta-oscuro); }
.boton--claro { background: var(--papel); border-color: var(--papel); color: var(--azul-tinta); }
.boton--claro:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.boton--secundario { background: var(--papel); color: var(--azul-tinta); }
.boton--secundario:hover { background: var(--azul-claro); border-color: var(--azul-tinta); }

/* Cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: var(--space-5);
  height: var(--alto-cabecera); padding: 0 var(--space-4);
  border-bottom: 3px solid transparent;
  transition: background-color var(--dur-media) var(--ease), color var(--dur-media) var(--ease), border-color var(--dur-media) var(--ease);
}
@media (min-width: 900px) { .cabecera { padding: 0 var(--space-6); } }
.cabecera.sobre-foto { background: transparent; color: var(--papel); }
.cabecera.sobre-foto :focus-visible { outline-color: var(--papel); }
.cabecera.solida { background: var(--papel); color: var(--azul-tinta); border-bottom-color: var(--terracota); }
.cabecera__logo { display: block; }
.logo { height: 44px; width: auto; }
.cabecera.sobre-foto .logo--azul, .cabecera.solida .logo--blanco { display: none; }
.cabecera__nav { display: none; margin-left: auto; gap: var(--space-6); }
.cabecera__nav a {
  padding: var(--space-2) 0;
  font: 800 .8125rem/1 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid transparent;
}
.cabecera__nav a[aria-current="page"], .cabecera__nav a:hover { border-bottom-color: var(--terracota); }
@media (min-width: 900px) { .cabecera__nav { display: flex; } }
.idioma { display: flex; margin-left: auto; }
@media (min-width: 900px) { .idioma { margin-left: 0; } }
.idioma button {
  min-width: 44px; min-height: 36px;
  border: 2px solid currentColor; background: transparent; color: inherit;
  font: 800 .75rem/1 var(--fuente-texto); letter-spacing: .08em; cursor: pointer;
}
.idioma button + button { border-left: 0; }
.idioma button[aria-pressed="true"] { background: var(--papel); border-color: var(--papel); color: var(--azul-tinta); }
.cabecera.solida .idioma button[aria-pressed="true"] { background: var(--azul-tinta); border-color: var(--azul-tinta); color: var(--papel); }

/* Barra inferior (móvil) */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--papel); border-top: 2px solid var(--azul-tinta);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--alto-barra);
  color: var(--azul-tinta); text-decoration: none;
  font: 800 .75rem/1 var(--fuente-texto); letter-spacing: .06em; text-transform: uppercase;
}
.barra-inferior a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--terracota); }
.barra-inferior svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .barra-inferior { display: none; } }

/* ============ Portada con carrusel ============ */
.portada {
  position: relative;
  height: 100svh; min-height: 600px;
  /* clip y no hidden: con hidden, el navegador puede desplazar la caja al enfocar un botón y descuadrar las capas */
  overflow: hidden;
  overflow: clip;
  color: var(--papel);
  background: var(--azul-tinta-oscuro);
  touch-action: pan-y;
  view-timeline: --portada block;
}
.portada :focus-visible { outline-color: var(--papel); }
.portada__fotos { position: absolute; inset: 0; transform-origin: 50% 40%; }
.portada__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco, 50% 50%);
  opacity: 0; transform: scale(1.1);
  transition: opacity var(--dur-escena) var(--ease-escena), transform 1400ms var(--ease-escena);
}
.portada__foto.is-activa { opacity: 1; transform: scale(1); }
/* Capa oscura: más densa en el centro y abajo, donde va el texto (contraste mínimo 4,5:1). */
.portada__capa {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(7, 42, 92, .55), rgba(7, 42, 92, 0) 100%),
    linear-gradient(180deg, rgba(7, 42, 92, .7) 0%, rgba(7, 42, 92, .55) 35%, rgba(7, 42, 92, .6) 65%, rgba(7, 42, 92, .9) 100%);
}
.portada__oscuro { position: absolute; inset: 0; background: var(--azul-tinta-oscuro); opacity: 0; }
.portada__envoltura {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: calc(var(--alto-cabecera) + var(--space-5)) var(--space-4) calc(var(--alto-barra) + 120px);
}
@media (min-width: 900px) { .portada__envoltura { padding: calc(var(--alto-cabecera) + var(--space-5)) 200px 180px; } }
.portada__contenido { display: flex; flex-direction: column; align-items: center; max-width: 900px; text-align: center; }
.portada__etiqueta { margin: 0 0 var(--space-4); font: 800 .8125rem/1.2 var(--fuente-texto); letter-spacing: .24em; text-transform: uppercase; }
.portada__titulo {
  margin: 0;
  font-family: var(--fuente-titulos); font-weight: 400;
  font-size: clamp(3.25rem, min(12vw, 13svh), 7rem); line-height: .95;
  text-transform: uppercase; text-wrap: balance;
}
.portada__contenido .linea { margin: var(--space-5) auto; transform-origin: center; }
.portada__texto { max-width: 40ch; margin: 0; font-size: 1.125rem; font-weight: 600; }
.portada__precio { margin: var(--space-2) 0 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.portada__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.portada__botones:empty { display: none; }
.boton--portada {
  min-height: 44px; padding: 0 var(--space-5);
  background: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .92);
  color: var(--azul-tinta); font-size: .9375rem; letter-spacing: .02em;
  backdrop-filter: blur(2px);
}
.boton--portada:hover { background: var(--papel); border-color: var(--papel); }
.portada__etiqueta.destacada { display: inline-block; padding: 6px 12px; border: 2px solid var(--terracota); }
/* Diapositiva sin foto (avisos): azul tinta con el logo de fondo */
.portada__foto--marca { display: grid; place-items: center; background: var(--azul-tinta); }
.portada__foto--marca img { width: min(90vw, 900px); height: auto; opacity: .1; }

.entrando .anim { animation: aparecer var(--dur-escena) var(--ease) both; animation-delay: calc(var(--i) * var(--escalonado) + 120ms); }
.entrando .anim-linea { animation: trazar var(--dur-lenta) var(--ease) both; animation-delay: calc(var(--i) * var(--escalonado) + 200ms); }

/* Vecinos */
.vecino {
  position: absolute; z-index: 2; bottom: calc(var(--alto-barra) + var(--space-5));
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border: 0; background: none; color: var(--papel);
  font: 800 .6875rem/1.2 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.vecino--anterior { left: var(--space-2); }
.vecino--siguiente { right: var(--space-2); flex-direction: row-reverse; text-align: right; }
/* Miniaturas: esquinas redondeadas y el naranja como una luz suave que sale por detrás */
.vecino__marco {
  display: block; width: 68px; height: 68px; flex: none;
  overflow: hidden; overflow: clip; border-radius: 10px;
  border: 1px solid rgba(188, 109, 60, .5); background: var(--azul-tinta-oscuro);
  box-shadow: 0 0 18px 5px rgba(188, 109, 60, .45), 0 0 4px 1px rgba(188, 109, 60, .35);
  transition: box-shadow var(--dur-media) var(--ease);
}
.vecino__marco img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform var(--dur-media) var(--ease), opacity var(--dur-media) var(--ease); }
.vecino:hover .vecino__marco { box-shadow: 0 0 26px 8px rgba(188, 109, 60, .6), 0 0 5px 1px rgba(188, 109, 60, .45); }
.vecino:hover .vecino__marco img { transform: scale(1.08); opacity: 1; }
.vecino__marco.marca { background: var(--azul-tinta); }
.vecino__marco.marca img { object-fit: contain; padding: 16%; opacity: 1; }
.vecino__nombre { display: flex; align-items: center; gap: 6px; max-width: 9em; }
.vecino__nombre svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 599px) {
  /* En móvil solo miniatura y flecha; el nombre queda en el aria-label del botón */
  .vecino__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.desde-derecha { animation: vecino-derecha var(--dur-escena) var(--ease) both; }
.desde-izquierda { animation: vecino-izquierda var(--dur-escena) var(--ease) both; }
@media (min-width: 900px) {
  .vecino { top: 50%; bottom: auto; transform: translateY(-50%); gap: var(--space-4); font-size: .75rem; }
  .vecino--anterior { left: -52px; }
  .vecino--siguiente { right: -52px; }
  .vecino__marco { width: 172px; height: 172px; border-radius: 14px; box-shadow: 0 0 34px 10px rgba(188, 109, 60, .45), 0 0 6px 2px rgba(188, 109, 60, .35); }
  .desde-derecha { animation-name: vecino-derecha-centro; }
  .desde-izquierda { animation-name: vecino-izquierda-centro; }
}

.portada__pie {
  position: absolute; left: 50%; bottom: calc(var(--alto-barra) + var(--space-6)); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  transform: translateX(-50%);
}
.portada__contador { font: 400 1.125rem/1 var(--fuente-titulos); letter-spacing: .08em; }
.portada__bajar {
  display: none; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--papel); border-radius: 4px; color: var(--papel);
}
.portada__bajar svg { width: 18px; height: 18px; }
.portada__bajar:hover { background: var(--papel); color: var(--azul-tinta); }
@media (min-width: 900px) {
  .portada__pie { bottom: 100px; }
  .portada__bajar { display: grid; }
}

/* ============ Estado de hoy ============ */
.hoy { position: relative; z-index: 3; padding: var(--space-5) var(--space-4) 0; }
.hoy__tarjeta {
  display: grid; gap: var(--space-4);
  max-width: 760px; margin: 0 auto; padding: var(--space-5);
  background: var(--papel); border: 2px solid var(--azul-tinta);
  color: var(--azul-tinta); text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease);
}
.hoy__tarjeta:hover { background: var(--azul-claro); }
@media (min-width: 900px) {
  .hoy { margin-top: -110px; padding-top: 0; }
  .hoy__tarjeta { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-7); padding: var(--space-5) var(--space-6); }
}
.estado-abierto {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 2px 8px; border: 1px solid var(--exito); border-radius: 2px;
  color: var(--exito); font: 800 .8125rem/1.4 var(--fuente-texto); letter-spacing: .04em; text-transform: uppercase;
}
.estado-abierto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hoy__horario { margin: var(--space-2) 0 var(--space-2); font-weight: 700; }
.enlace { font-weight: 700; text-underline-offset: 3px; }
.hoy__espera { display: grid; gap: 2px; justify-items: center; text-align: center; }
.hoy__espera .etiqueta { margin: 0; color: var(--azul-gris); letter-spacing: .12em; }
.hoy__minutos { font: 400 2.5rem/1 var(--fuente-titulos); text-transform: uppercase; }
.hoy__actualizado { color: var(--azul-gris); font-size: .875rem; font-weight: 600; }

/* ============ La carta: categorías ============ */
.carta { padding: var(--space-8) 0; }
@media (min-width: 900px) { .carta { padding: var(--space-9) 0; } }
.seccion__cabecera { margin-bottom: var(--space-7); }
.categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
.categoria a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 170px; padding: var(--space-4);
  color: var(--azul-tinta); text-decoration: none;
}
@media (min-width: 900px) { .categoria a { min-height: 240px; padding: var(--space-5); } }
.categoria__dibujo {
  position: absolute; top: -20px; right: var(--space-3);
  height: 86px; width: auto; max-width: 60%; object-fit: contain;
  transition: transform var(--dur-lenta) var(--ease);
}
/* La línea de arriba se interrumpe justo donde apoya el dibujo */
.categoria a:hover .categoria__dibujo { transform: rotate(-4deg) scale(1.05); }
.categoria__nombre { font: 400 clamp(1.625rem, 4vw, 2.5rem)/1 var(--fuente-titulos); text-transform: uppercase; }
.categoria__cuenta { margin-top: 6px; color: var(--azul-gris); font-size: .875rem; font-weight: 700; }

/* Marco terracota que se dibuja lado a lado */
.marco { position: absolute; inset: 0; pointer-events: none; }
.marco i { position: absolute; background: var(--terracota); transition: transform var(--dur-lenta) var(--ease); }
.marco__sup { top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; }
.marco__sup { background: linear-gradient(to right,
  var(--terracota) 0 calc(100% - var(--space-3) - var(--ancho-dibujo, 0px)),
  transparent 0 calc(100% - var(--space-3)),
  var(--terracota) 0 100%); }
@media (min-width: 900px) { .categoria__dibujo { height: 130px; top: -28px; } }
.marco__der { top: 0; right: 0; bottom: 0; width: 3px; transform: scaleY(0); transform-origin: top; }
.marco__inf { left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(0); transform-origin: right; }
.marco__izq { top: 0; left: 0; bottom: 0; width: 3px; transform: scaleY(0); transform-origin: bottom; }
.visible .marco i { transform: none; }
.visible .marco__sup { transition-delay: calc(var(--i, 0) * var(--escalonado) + 200ms); }
.visible .marco__der { transition-delay: calc(var(--i, 0) * var(--escalonado) + 350ms); }
.visible .marco__inf { transition-delay: calc(var(--i, 0) * var(--escalonado) + 500ms); }
.visible .marco__izq { transition-delay: calc(var(--i, 0) * var(--escalonado) + 650ms); }

/* Aparición por pasos al entrar en pantalla */
.js .revelar {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-escena) var(--ease), transform var(--dur-escena) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--escalonado));
}
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar .linea { transform: scaleX(0); transition: transform var(--dur-lenta) var(--ease) 300ms; }
.js .revelar.visible .linea { transform: none; }

/* ============ Nuestra historia (foto fija con zoom) ============ */
.historia { position: relative; color: var(--papel); background: var(--azul-tinta-oscuro); view-timeline: --historia block; }
.historia__fija { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; }
.historia__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform-origin: 50% 45%; }
.historia__capa { position: absolute; inset: 0; background: rgba(7, 42, 92, .76); }
.historia__textos { position: relative; margin-top: -100svh; }
.historia__paso { display: grid; align-content: center; min-height: 52svh; max-width: 820px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.historia__paso:first-child { min-height: 60svh; align-content: end; }
.historia__paso:last-child { min-height: 60svh; align-content: start; }
.historia__paso .etiqueta { margin: var(--space-3) 0 0; color: var(--papel); }
.historia__paso .linea { margin-bottom: 0; }
.historia__frase { margin: 0; font-size: clamp(1.375rem, 3.4vw, 2.125rem); font-weight: 700; line-height: 1.35; text-wrap: pretty; }

/* ============ Página de una categoría (estilo carta impresa) ============ */
.vista-categoria { padding: var(--alto-cabecera) 0 var(--space-8); }
.chips { position: sticky; top: var(--alto-cabecera); z-index: 9; background: var(--papel); border-bottom: 1px solid var(--terracota-claro); }
.chips ul { display: flex; gap: var(--space-2); max-width: 1200px; margin: 0 auto; padding: var(--space-3) var(--space-4); overflow-x: auto; list-style: none; scrollbar-width: none; }
@media (min-width: 900px) { .chips ul { padding: var(--space-3) var(--space-6); } }
.chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border: 2px solid var(--azul-tinta); border-radius: 4px;
  color: var(--azul-tinta); text-decoration: none; white-space: nowrap;
  font: 800 .8125rem/1 var(--fuente-texto); letter-spacing: .06em; text-transform: uppercase;
}
.chips a:hover { background: var(--azul-claro); }
.chips a[aria-current="page"] { background: var(--azul-tinta); color: var(--papel); }

.cabecera-foto { position: relative; height: clamp(220px, 42vh, 440px); overflow: hidden; overflow: clip; background: var(--azul-tinta-oscuro); view-timeline: --cabecera block; }
.cabecera-foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.cabecera-foto__capa { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 42, 92, .45) 0%, rgba(7, 42, 92, .1) 60%); }

.volver { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-5); color: var(--azul-tinta); font-weight: 800; text-decoration: none; }
.volver svg { width: 18px; height: 18px; }
.volver:hover { text-decoration: underline; text-underline-offset: 3px; }

.bloque-carta { position: relative; max-width: 760px; margin: var(--space-8) 0 var(--space-5); padding: var(--space-6) var(--space-5) var(--space-2); border: 3px solid var(--terracota); }
@media (min-width: 600px) { .bloque-carta { padding: var(--space-7) var(--space-6) var(--space-3); } }
.bloque-carta.sin-dibujo { margin-top: var(--space-6); }
.bloque-carta__dibujo { position: absolute; top: calc(-88px * var(--escala, 1) / 2); right: var(--space-4); height: calc(88px * var(--escala, 1)); width: auto; }
@media (min-width: 900px) { .bloque-carta__dibujo { top: calc(-136px * var(--escala, 1) / 2); height: calc(136px * var(--escala, 1)); } }
/* El marco se corta justo donde apoya el dibujo, como en la carta impresa */
.bloque-carta { border-top-color: transparent; }
.bloque-carta__corte {
  position: absolute; top: -3px; left: -3px; width: calc(100% + 6px); height: 3px;
  background: linear-gradient(to right,
    var(--terracota) 0 calc(100% - var(--space-4) - 3px - var(--ancho-dibujo, 0px)),
    transparent 0 calc(100% - var(--space-4) - 3px),
    var(--terracota) 0 100%);
}
.bloque-carta:not(.sin-dibujo) .bloque-carta__titulo { max-width: calc(100% - 150px); }
@media (min-width: 900px) { .bloque-carta:not(.sin-dibujo) .bloque-carta__titulo { max-width: calc(100% - 200px); } }
.bloque-carta__titulo { margin: 0; font: 400 clamp(2.25rem, 9vw, 3.5rem)/1 var(--fuente-titulos); text-transform: uppercase; }
.bloque-carta__titulo:focus { outline: none; }
.bloque-carta__nota { margin: var(--space-2) 0 0; font: 800 .8125rem/1.2 var(--fuente-texto); letter-spacing: .12em; text-transform: uppercase; }
/* Trazos que sobresalen del marco, como las líneas de la carta impresa (nunca sobre el texto) */
.bloque-carta__trazo { position: absolute; background: var(--terracota); }
.bloque-carta__trazo--1 { top: -18px; left: 30%; width: 1px; height: 34px; }
.bloque-carta__trazo--2 { bottom: -18px; left: 64%; width: 1px; height: 34px; }
.bloque-carta__trazo--3 { top: 48%; left: -18px; width: 32px; height: 1px; }
.bloque-carta__trazo--4 { top: 22%; right: -18px; width: 32px; height: 1px; }
.bloque-carta .platos { max-width: none; margin-top: var(--space-5); }

.aviso-alergenos { max-width: 760px; margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--terracota); background: var(--papel-calido); font-weight: 700; }
.paginacion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); max-width: 760px; margin-top: var(--space-6); }
.paginacion__siguiente { margin-left: auto; }
.boton-texto {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-4);
  border: 2px solid var(--azul-tinta); border-radius: 4px; color: var(--azul-tinta); text-decoration: none;
  font: 800 .875rem/1 var(--fuente-texto); letter-spacing: .06em; text-transform: uppercase;
}
.boton-texto:hover { background: var(--azul-claro); }
.nota-maqueta { max-width: 760px; margin-top: var(--space-6); color: var(--azul-gris); font-size: .875rem; }

.platos { max-width: 760px; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.plato { padding: var(--space-4) 0; border-top: 1px solid var(--terracota-claro); }
.plato__linea { display: flex; align-items: baseline; gap: var(--space-2); }
.plato__nombre { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.plato__guia { flex: 1; min-width: 16px; border-bottom: 1px solid var(--terracota); transform: translateY(-4px); }
.plato__precio { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plato__descripcion { margin: 4px 0 0; }
.botones--centrados { justify-content: center; }
.estado-abierto.estado-cerrado { color: var(--azul-gris); border-color: var(--azul-gris); }
.estado-abierto.estado-cerrado::before { background: var(--azul-gris); }
.horario--hoy { font-weight: 800; }
.hoy__minutos { text-wrap: balance; }
.bloque-carta__fondo { position: absolute; inset: 0; z-index: 0; background-size: cover; opacity: .1; }
.bloque-carta__titulo, .bloque-carta__nota, .platos { position: relative; z-index: 1; }
.pie__reparto { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.pie__reparto-bloque { position: relative; align-self: start; padding: var(--space-6) var(--space-5) var(--space-7); text-align: center; }
.pie__reparto-bloque > :not(.salsa) { position: relative; z-index: 1; }
.pie__reparto-bloque .pie__titulo::after { margin-inline: auto; }
.salsa { position: absolute; top: -26px; left: -18px; z-index: 0; width: calc(100% + 36px); height: calc(100% + 58px); fill: var(--terracota); }
.pie__reparto-bloque .pie__titulo { font-size: 1.875rem; }
.pie__reparto-bloque .boton--reparto { border-color: var(--papel); }
.boton--reparto { min-height: 44px; padding: 0 var(--space-4); background: var(--papel); border-color: var(--papel); color: var(--azul-tinta); font-size: .9375rem; }
.boton--reparto:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.pagina { padding: calc(var(--alto-cabecera) + var(--space-6)) 0 calc(var(--alto-barra) + var(--space-8)); }
.pagina .titulo-seccion { margin: var(--space-4) 0 0; }
.pagina .info-rejilla, .pagina .avisos { margin-top: var(--space-6); }
.aviso-tarjeta__legal { margin: var(--space-2) 0 0; color: var(--azul-gris); font-size: .875rem; }
.bases { margin-top: var(--space-3); }
.bases summary { display: inline-block; padding: 4px 0; color: var(--azul-tinta); font-weight: 800; cursor: pointer; text-decoration: underline; }
.bases__lista { margin: var(--space-3) 0 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); font-size: .9375rem; }
.plato--agotado .plato__linea { opacity: .5; }
.plato__agotado { display: inline-block; margin-top: 4px; padding: 1px 6px; border: 1px solid #B3261E; border-radius: 2px; color: #B3261E; background: var(--papel); font-size: .875rem; font-weight: 800; }

/* ============ Info: estado y avisos ============ */
section[id] { scroll-margin-top: calc(var(--alto-cabecera) + var(--space-2)); }
.info { padding: var(--space-8) 0; background: var(--papel-calido); }
@media (min-width: 900px) { .info { padding: var(--space-9) 0; } }
.info-rejilla { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px) { .info-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.info-bloque { padding: var(--space-5); border: 2px solid var(--azul-tinta); background: var(--papel); }
.info-bloque__titulo { margin: 0 0 var(--space-3); font: 400 1.5rem/1 var(--fuente-titulos); text-transform: uppercase; }
.info-bloque__dato { margin: var(--space-3) 0; font-weight: 700; }
.info-bloque__espera { display: grid; justify-items: center; gap: 2px; margin: var(--space-4) 0 var(--space-1); text-align: center; }
.info-bloque__espera .etiqueta { margin: 0; color: var(--azul-gris); letter-spacing: .12em; }
.info-bloque .botones { margin-top: var(--space-4); }
.horario { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.horario li { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 600; }
.horario li span:first-child { font-weight: 700; }
.horario--cerrado { color: var(--azul-gris); }
.subtitulo { margin: var(--space-8) 0 var(--space-4); font: 400 2rem/1 var(--fuente-titulos); text-transform: uppercase; }
.avisos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .avisos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aviso-tarjeta { padding: var(--space-5); border: 3px solid var(--terracota); background: var(--papel); }
.aviso-tarjeta .etiqueta { margin-bottom: var(--space-2); }
.aviso-tarjeta__texto { margin: 0; }
.apps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.app { padding: 8px var(--space-4); border: 2px solid var(--azul-tinta); border-radius: 4px; font: 800 .875rem/1.2 var(--fuente-texto); }

/* ============ Reseñas ============ */
.resenas { padding: var(--space-8) 0; }
@media (min-width: 900px) { .resenas { padding: var(--space-9) 0; } }
.resenas__cabecera { max-width: 620px; margin-bottom: var(--space-6); }
.resenas__mensaje { margin: 0 0 var(--space-5); font-size: 1.125rem; font-weight: 700; }
.resenas__lista { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .resenas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.resena { display: grid; gap: var(--space-3); padding: var(--space-5); border: 2px solid var(--terracota-claro); background: var(--papel); text-align: center; }
.resena__origen { margin: 0; font: 800 .75rem/1.2 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-gris); }
.resena__texto { margin: 0; }
.resena__autor { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: 0; font-weight: 700; }
.resena__inicial { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-claro); color: var(--azul-gris); font-weight: 800; }
.botones { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============ Pie ============ */
.pie { padding: var(--space-8) 0 calc(var(--alto-barra) + var(--space-6) + env(safe-area-inset-bottom)); background: var(--azul-tinta); color: var(--papel); }
@media (min-width: 900px) { .pie { padding-bottom: var(--space-6); } }
.pie :focus-visible { outline-color: var(--papel); }
.pie a { color: inherit; }
.pie__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
.pie__marca, .pie__contacto, .pie__app { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .pie__rejilla { grid-template-columns: 1.4fr .8fr .8fr 1.4fr 1fr; gap: var(--space-6); }
  .pie__marca, .pie__contacto, .pie__app { grid-column: auto; }
}
.pie__logo { width: 150px; height: auto; }
.pie__descripcion { max-width: 30ch; margin: var(--space-4) 0; color: var(--azul-claro); }
.pie__redes { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--papel); border-radius: 4px; }
.pie__redes a:hover { background: var(--papel); color: var(--azul-tinta); }
.pie__redes svg { width: 20px; height: 20px; }
.pie__titulo { margin: 0 0 var(--space-4); font: 400 1.375rem/1 var(--fuente-titulos); text-transform: uppercase; }
.pie__titulo::after { content: ""; display: block; width: 32px; height: 3px; margin-top: var(--space-3); background: var(--terracota); }
.pie__lista { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pie__lista a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; text-decoration: none; }
.pie__lista a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__lista--iconos li { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; overflow-wrap: anywhere; }
.pie__lista--iconos svg { width: 20px; height: 20px; flex: none; }
.pie__app .boton { background: var(--papel); border-color: var(--papel); color: var(--azul-tinta); }
.pie__app .boton:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.pie__estado-app { margin: var(--space-3) 0 0; color: var(--azul-claro); font-size: .875rem; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .3); color: var(--azul-claro); font-size: .875rem; }
.pie__base p { margin: 0; text-align: center; }
.pie__corazon { width: 1em; height: 1em; vertical-align: -.15em; color: var(--terracota); }

/* ============ Animaciones ligadas al desplazamiento ============ */
@keyframes aparecer { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes trazar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vecino-derecha { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes vecino-izquierda { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes vecino-derecha-centro { from { opacity: 0; transform: translate(24px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes vecino-izquierda-centro { from { opacity: 0; transform: translate(-24px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes zoom-salida { to { transform: scale(1.15); } }
@keyframes oscurecer { to { opacity: .85; } }
@keyframes alejar { to { transform: translateY(-12vh); opacity: .15; } }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.15); } }
@keyframes zoom-cubrir { from { transform: scale(1.18); } to { transform: scale(1); } }

@supports (animation-timeline: view()) {
  .portada__fotos { animation: zoom-salida linear both; animation-timeline: --portada; animation-range: exit 0% exit 100%; }
  .portada__oscuro { animation: oscurecer linear both; animation-timeline: --portada; animation-range: exit 0% exit 100%; }
  .portada__envoltura { animation: alejar linear both; animation-timeline: --portada; animation-range: exit 0% exit 80%; }
  .historia__foto { animation: zoom-lento linear both; animation-timeline: --historia; animation-range: contain 0% contain 100%; }
  .cabecera-foto__img { animation: zoom-cubrir linear both; animation-timeline: --cabecera; animation-range: cover 0% cover 100%; }
}

/* Alternativa con JavaScript (navegadores sin animation-timeline): --p va de 0 a 1 */
.sin-timeline .portada__fotos { transform: scale(calc(1 + var(--p, 0) * .15)); }
.sin-timeline .portada__oscuro { opacity: calc(var(--p, 0) * .85); }
.sin-timeline .portada__envoltura { transform: translateY(calc(var(--p, 0) * -12vh)); opacity: calc(1 - var(--p, 0) * .85); }
.sin-timeline .historia__foto { transform: scale(calc(1 + var(--p, 0) * .15)); }
.sin-timeline .cabecera-foto__img { transform: scale(calc(1.18 - var(--p, 0) * .18)); }

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .portada__fotos, .portada__oscuro, .portada__envoltura, .historia__foto, .cabecera-foto__img { animation: none !important; transform: none !important; }
  .portada__oscuro { opacity: 0 !important; }
  .portada__envoltura { opacity: 1 !important; }
  .portada__foto { transform: none !important; transition: opacity 200ms linear !important; }
  .js .revelar, .js .revelar .linea, .marco i { opacity: 1; transform: none; }
}