/* =============================================================================
   Carta digital de Pescador
   Formato: el de la carta impresa. Cada sección es una "hoja" de pared azul descascarada.
   Los valores de marca (colores, proporciones de tipo) se midieron sobre las páginas
   originales. Ver PROMPT-MAESTRO.md, sección 3.
   Un solo aspecto a propósito (el de la marca): sin modo oscuro.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Pared (medida) */
  --pared: #9cd4e1;
  --pared-clara: #a7daea;
  --pared-sombra: #84c0d4;      /* también separa las hojas, como el canto de una página */
  --pintura: #bcdde9;
  /* Tinta */
  --tinta: #232829;             /* texto: casi negro frío, como en la carta */
  --tinta-2: #343c3f;           /* notas pequeñas: 4,8:1 sobre lo más oscuro de la pared (AA) */
  --cafe: #3b2e2b;              /* del logo: barra, botones */
  --claro: #f4fafc;
  --rotulo: rgba(38, 38, 38, .68);

  --f-titulo: "Tinos", "Times New Roman", Times, serif;
  --f-texto: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-firma: "Herr Von Muellerhoff", "Mrs Saint Delafield", "Brush Script MT", cursive;

  /* Escala tipográfica (proporción medida: título : nombre : cuerpo ≈ 2,06 : 1,14 : 1) */
  --t-cuerpo: 1.0625rem;
  --t-nombre: 1.1875rem;
  --t-titulo: clamp(1.625rem, 1.1rem + 2.4vw, 2.5rem);
  --t-pequeno: .875rem;
  --t-firma: clamp(2.6rem, 1.6rem + 5vw, 3.6rem);

  /* Espacio (base 4) */
  --pad: max(clamp(22px, 7vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* en horizontal respeta la muesca */
  --hoja-pb: 40px;
  --col: 680px;
  --rail-h: 52px;

  /* Movimiento */
  --ease-salida: cubic-bezier(.23, 1, .32, 1);
  --ease-autoral: cubic-bezier(.16, 1, .3, 1);
  --ease-hoja: cubic-bezier(.32, .72, 0, 1);

  color-scheme: light;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-color: var(--cafe) var(--pared-sombra);
}
body {
  margin: 0;
  background: var(--pared-sombra);
  color: var(--tinta);
  font: 400 var(--t-cuerpo)/1.32 var(--f-texto);
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--cafe);
  min-height: 100dvh;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--cafe); color: var(--claro); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cafe); outline-offset: 3px; border-radius: 4px; }
.rail :focus-visible, .boton.primario:focus-visible, .visor-cerrar:focus-visible { outline-color: var(--claro); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.saltar { position: absolute; left: 12px; top: -64px; z-index: 50; padding: 12px 16px; border-radius: 999px; background: var(--cafe); color: var(--claro); font-weight: 600; text-decoration: none; transition: top .15s var(--ease-salida); }
.saltar:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- 3. Estructura ---------- */
.app, .panel { display: contents; }
.hoja {
  width: min(100%, var(--col));
  margin-inline: auto;
  background:
    url("fondo/tope.webp") top center / 100% auto no-repeat,
    url("fondo/pared.webp") top center / 100% auto repeat-y,
    var(--pared);
}
.hoja + .hoja, .hoja + .pagina-foto, .pagina-foto + .hoja, main > * + * { margin-top: 8px; }
.hoja-in { padding: 0 var(--pad); }
main { display: block; outline: none; }
/* Datos extremos (palabras larguísimas, enlaces): se parten en vez de ensanchar la página */
main, .contratapa, .visor-cuerpo { overflow-wrap: anywhere; }

/* ---------- 4. Portada ---------- */
.tapa { padding: 56px var(--pad) 44px; display: grid; place-items: center; text-align: center; min-height: min(78svh, 620px); }
.tapa-in { display: grid; justify-items: center; width: 100%; }
.logo-h { line-height: 0; width: 100%; } /* ancho completo: si se encoge, la imagen al 82 % queda pegada a la izquierda */
/* corrección óptica: la caña de pescar alarga el logo a la derecha; se corre 2,9 % para que "RESTAURANTE" quede al centro */
.logo { width: min(340px, 82%); aspect-ratio: 900 / 686; margin-inline: auto; translate: -2.9% 0; }
.lema { margin-top: 4px; font: 400 var(--t-firma)/1 var(--f-firma); color: var(--cafe); }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.redes { display: none; }

/* Entrada de la portada: el único momento autoral. Es un movimiento fijo (no depende de nada que el usuario haga),
   así que va con keyframes en CSS. Si no hay JavaScript la clase "js" no existe y todo se ve de una vez. */
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.js .tapa-in > * { animation: entra .65s var(--ease-autoral) both; }
.js .tapa-in > :nth-child(2) { animation-delay: .09s; }
.js .tapa-in > :nth-child(3) { animation-delay: .18s; }

/* ---------- 5. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.3rem; border: 0; border-radius: 999px;
  font: 600 1.0625rem/1 var(--f-texto); text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform .12s var(--ease-salida), background-color .15s ease;
}
.boton.primario { background: var(--cafe); color: var(--claro); }
.boton.secundario { background: var(--claro); color: var(--cafe); }
.boton.ancho { width: 100%; }
.boton:active, .rail-btn:active, .tarjeta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .boton.primario:hover { background: #4a3b37; }
  .boton.secundario:hover { background: #fff; }
}

/* ---------- 6. Barra de secciones y buscador ---------- */
.rail {
  position: sticky; top: 0; z-index: 20;
  background: var(--cafe); color: var(--claro);
  padding-top: env(safe-area-inset-top, 0px);
}
.rail-fila, .buscador-in {
  max-width: var(--col); margin-inline: auto;
  padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
}
.rail-fila { display: flex; align-items: center; gap: 6px; min-height: var(--rail-h); }
.rail-nav { flex: 1; min-width: 0; }
.rail-lista { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail-lista::-webkit-scrollbar { display: none; }
.rail-lista a {
  display: flex; align-items: center; min-height: 44px; padding: 4px 14px; border-radius: 999px; max-width: min(72vw, 300px);
  font: 600 1rem/1.2 var(--f-texto); text-decoration: none;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.rail-lista a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-lista a[aria-current="true"] { background: var(--claro); color: var(--cafe); }
.rail-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--claro); cursor: pointer;
  touch-action: manipulation; transition: transform .12s var(--ease-salida), background-color .15s ease;
}
.rail-btn .ico { width: 22px; height: 22px; }
.rail-btn[aria-expanded="true"] { background: var(--claro); color: var(--cafe); }

.buscador { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease-salida); }
.buscador.abierto { grid-template-rows: 1fr; }
.buscador-in { min-height: 0; overflow: hidden; }
.buscador form, .buscador-in { display: block; }
.campo { position: relative; margin: 2px 0 10px; }
.campo > .ico { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--tinta-2); pointer-events: none; }
.campo input {
  width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--claro); color: var(--tinta);
  padding: 0 48px 0 44px; font: 500 1.0625rem var(--f-texto); /* ≥16 px: iOS no hace zoom */
  appearance: none; -webkit-appearance: none;
}
.campo input::placeholder { color: #55605f; }
.campo input::-webkit-search-cancel-button { display: none; }
.borrar { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--tinta-2); border-radius: 50%; cursor: pointer; touch-action: manipulation; }
.conteo { margin: -2px 6px 8px; font-size: .9375rem; font-weight: 600; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; }
.sugerencias button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(244, 250, 252, .16); color: var(--claro);
  font: 500 .9375rem/1 var(--f-texto); cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, transform .12s var(--ease-salida);
}
.sugerencias button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .sugerencias button:hover { background: rgba(244, 250, 252, .28); } }

/* ---------- 7. Hojas, bloques y platos ---------- */
.hoja.seccion, .hoja.antojarse { padding: 44px 0 var(--hoja-pb); scroll-margin-top: calc(var(--rail-h) + env(safe-area-inset-top, 0px) + 6px); }
.bloque + .bloque { margin-top: clamp(40px, 10vw, 60px); }
.bloque > h2, .antojarse h2 {
  font: 400 var(--t-titulo)/1.08 var(--f-titulo); text-transform: uppercase; text-align: center; text-wrap: balance;
  margin-bottom: 1.05em; letter-spacing: .005em;
}
.lista { display: grid; gap: 1.15em; }
.lista > .nota { margin-top: 0; }
.grupo { font: 700 var(--t-cuerpo)/1.1 var(--f-texto); text-transform: uppercase; }
/* Listas de vino: como en la carta, el nombre va en peso normal y las categorías (Rosado, Blanco, Tinto) en negrilla */
.lista--grupos { gap: .4em; }
.lista--grupos .grupo-t { margin-top: .9em; }
.lista--grupos .grupo-t:first-child { margin-top: 0; }
.plato.en-grupo .nombre { font-weight: 400; text-transform: none; font-size: var(--t-cuerpo); letter-spacing: 0; }
.plato.en-grupo .precio { font-size: var(--t-cuerpo); }
.plato.en-grupo .variantes li { padding-left: 1em; }

.plato { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
.plato .nombre { font: 700 var(--t-nombre)/1.15 var(--f-texto); text-transform: uppercase; letter-spacing: .005em; text-wrap: pretty; overflow-wrap: anywhere; }
.plato .nombre small { font: 400 .78em var(--f-texto); text-transform: none; letter-spacing: 0; }
.precio { font: 400 var(--t-nombre)/1.15 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; text-align: right; }
.precio small { font-size: .78em; margin-right: .5em; }
.precio.consultar { font-style: italic; font-size: var(--t-cuerpo); }
.plato > p { grid-column: 1 / -1; margin-top: .1em; max-width: 56ch; text-wrap: pretty; overflow-wrap: anywhere; }
.plato .nota-plato { grid-column: 1 / -1; font-size: var(--t-pequeno); color: var(--tinta-2); margin-top: .35em; }
.variantes { grid-column: 1 / -1; display: grid; gap: .1em; margin-top: .15em; }
.variantes li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.variantes li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.variantes li > span:last-child { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.bandera { display: inline-block; width: 1.35em; height: .9em; margin-left: .5em; vertical-align: -.1em; }

.nota { font-size: var(--t-pequeno); line-height: 1.35; color: var(--tinta-2); margin-top: 1.3em; }
.texto-bloque { max-width: 52ch; text-wrap: pretty; }
.aviso { margin-top: 1.4em; padding: .9em 1.1em; border-radius: 12px; background: rgba(244, 250, 252, .55); font-size: .9375rem; line-height: 1.35; }
.leyenda { margin-top: 2.6rem; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .875rem; line-height: 1.3; text-transform: uppercase; }
.leyenda p { flex: 1 1 220px; }
.leyenda img { width: 128px; height: auto; flex: none; }

/* ---------- 8. Fotos ---------- */
.fotos { display: grid; gap: 6px; margin-top: 1.7rem; }
.fotos.arriba { margin-top: 0; margin-bottom: 1.8rem; }
.fotos--par { grid-template-columns: 1fr 1fr; gap: clamp(8px, 3vw, 20px); }
.fotos--trio { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fotos--sangre { margin: 2rem calc(var(--pad) * -1) calc(var(--hoja-pb) * -1); gap: 0; }
.foto-btn {
  display: block; width: 100%; padding: 0; border: 0; background: rgba(35, 40, 41, .1); line-height: 0; cursor: zoom-in;
  touch-action: manipulation; overflow: hidden;
}
.foto-btn img { width: 100%; height: auto; object-fit: cover; opacity: 0; transition: opacity .25s ease-out; }
.foto-btn img.lista, .tarjeta img.lista { opacity: 1; }
.no-img-js .foto-btn img, .no-img-js .tarjeta img { opacity: 1; }
.pagina-foto { width: min(100%, var(--col)); margin-inline: auto; background: var(--pared-sombra); }
.pagina-foto .foto-btn { background: rgba(35, 40, 41, .2); }
.pagina-foto .foto-btn { max-height: min(88svh, 940px); }
.pagina-foto .foto-btn img { width: 100%; height: 100%; max-height: min(88svh, 940px); object-position: 50% 40%; }

/* ---------- 9. Para antojarse ---------- */
.antojarse { padding-bottom: 36px; }
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(46vw, 176px); gap: 12px;
  margin-inline: calc(var(--pad) * -1); padding: 2px var(--pad) 10px; scroll-padding-inline: var(--pad);
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > li { scroll-snap-align: start; min-width: 0; }
.tarjeta {
  width: 100%; display: grid; gap: 8px; align-content: start; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  touch-action: manipulation; transition: transform .12s var(--ease-salida);
}
.tarjeta .mini { display: block; background: rgba(35, 40, 41, .12); aspect-ratio: 1; overflow: hidden; }
.tarjeta img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease-out; }
.tarjeta b { font: 700 1rem/1.12 var(--f-texto); text-transform: uppercase; text-wrap: balance; }
.tarjeta span.p { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 10. Contraportada ---------- */
.contratapa { padding: 56px 0 calc(44px + env(safe-area-inset-bottom, 0px)); margin-top: 8px; text-align: center; }
.contratapa .logo { width: min(280px, 72%); margin-inline: auto; }
.contra-redes { display: grid; justify-content: center; gap: 10px; margin-top: 28px; text-align: left; font-weight: 600; font-size: 1.0625rem; }
.contra-redes li, .contra-redes li > a { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.contra-redes .nums { display: flex; flex-wrap: wrap; gap: 0 18px; }
.contra-redes .nums a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; }
.contra-redes .ico-c { width: 36px; height: 36px; border-radius: 50%; background: var(--cafe); color: var(--claro); display: grid; place-items: center; flex: none; }
.contra-redes .ico-c .ico { width: 19px; height: 19px; }
.contra-dir { margin-top: 18px; font-size: 1.0625rem; }
.contra-legal { margin: 36px auto 0; max-width: 44ch; font-size: .9375rem; text-transform: uppercase; line-height: 1.3; }

/* ---------- 11. Estados ---------- */
.cargando, .hoja.error { padding: 80px var(--pad); text-align: center; min-height: 50svh; display: grid; place-content: center; gap: 18px; font: 400 1.5rem/1.25 var(--f-titulo); }
.sin-resultados { padding: 64px var(--pad); text-align: center; display: grid; gap: 18px; justify-items: center; }
.sin-resultados p { font: 400 1.5rem/1.25 var(--f-titulo); text-wrap: balance; }
.sin-js { padding: 48px var(--pad); font-size: 1.125rem; }
.filtrando .solo-sin-filtro { display: none; }

.hoja.vacia { padding: 80px var(--pad); text-align: center; font: 400 1.5rem/1.3 var(--f-titulo); display: grid; gap: 10px; }
.hoja.vacia .peq { font: 400 1.0625rem/1.35 var(--f-texto); }

/* ---------- 12. Vista ampliada ---------- */
dialog#visor {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--tinta); overflow: hidden; overscroll-behavior: contain; touch-action: none;
}
dialog#visor::backdrop { background: rgba(24, 28, 29, .6); opacity: 0; transition: opacity .25s var(--ease-salida); }
dialog#visor.abierto::backdrop { opacity: 1; }
.visor-sheet {
  position: absolute; left: 50%; bottom: 0; width: min(100%, 560px);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  transform: translate(-50%, 100%); transition: transform .22s var(--ease-salida);
  background: url("fondo/pared.webp") top center / 100% auto repeat-y, var(--pared);
  border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  scrollbar-width: thin;
}
dialog#visor.abierto .visor-sheet { transform: translate(-50%, 0); transition-duration: .32s; transition-timing-function: var(--ease-hoja); }
.visor-arrastre { position: relative; touch-action: none; cursor: grab; }
.visor-arrastre, .visor-arrastre img, .foto-btn img, .tarjeta img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.visor-asa { position: absolute; z-index: 2; left: 50%; top: 8px; translate: -50% 0; width: 40px; height: 5px; border-radius: 3px; background: rgba(244, 250, 252, .85); }
.visor-foto { background: rgba(35, 40, 41, .15); line-height: 0; }
.visor-foto img { width: 100%; height: auto; max-height: 56svh; object-fit: cover; object-position: var(--foco, 50% 50%); border-radius: 18px 18px 0 0; }
.visor-cerrar {
  position: absolute; z-index: 3; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--rotulo); color: #fff; cursor: pointer; touch-action: manipulation; transition: transform .12s var(--ease-salida);
}
.visor-cerrar:active { transform: scale(.96); }
.visor-cuerpo { padding: 22px var(--pad) 26px; display: grid; gap: 10px; }
.visor-cuerpo h2:focus { outline: none; }
.visor-cuerpo h2 { font: 400 clamp(1.7rem, 1.2rem + 2vw, 2.1rem)/1.1 var(--f-titulo); text-transform: uppercase; text-wrap: balance; }
.visor-detalle { font-size: .9375rem; color: var(--tinta-2); }
.visor-desc { max-width: 52ch; text-wrap: pretty; }
.visor-precios { display: grid; gap: 2px; }
.visor-precios li { display: flex; justify-content: space-between; gap: 16px; font: 600 var(--t-nombre)/1.25 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; }
.visor-precios li > span:first-child { font-weight: 400; font-size: var(--t-cuerpo); min-width: 0; overflow-wrap: anywhere; }
.visor-alergia { font-size: var(--t-pequeno); color: var(--tinta-2); margin-top: 6px; }
.visor-cuerpo .boton { margin-top: 6px; }
html.visor-abierto { overflow: hidden; }

/* ---------- 13. Escritorio (panel lateral + hojas) ---------- */
@media (min-width: 720px) {
  :root { --hoja-pb: 48px; }
  .carrusel { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; overflow: visible; margin-inline: 0; padding: 4px 0 0; }
  .hoja.seccion, .hoja.antojarse { padding-top: 52px; }
  .visor-sheet { bottom: auto; top: 50%; width: min(92vw, 520px); max-height: min(90dvh, 860px); border-radius: 16px; transform: translate(-50%, -46%); opacity: 0; transition: transform .22s var(--ease-salida), opacity .18s ease-out; }
  dialog#visor.abierto .visor-sheet { transform: translate(-50%, -50%); opacity: 1; transition-duration: .3s, .25s; }
  .visor-foto img { border-radius: 16px 16px 0 0; }
  .visor-asa { display: none; }
  .visor-arrastre { cursor: default; }
}

@media (min-width: 1080px) {
  .app { display: grid; grid-template-columns: clamp(340px, 29vw, 460px) minmax(0, 1fr); align-items: start; }
  .panel {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    background: url("fondo/tope.webp") top center / 100% auto no-repeat, url("fondo/pared.webp") top center / 100% auto repeat-y, var(--pared);
  }
  .panel .hoja { background: none; width: 100%; margin: 0; }
  .tapa { min-height: 0; padding: 36px 24px 10px; }
  .logo { width: min(250px, 76%); }
  .lema { font-size: 2.9rem; }
  .acciones { margin-top: 14px; }
  .acciones .primario { display: none; }  /* la carta ya está al lado */
  .rail { position: static; z-index: auto; background: transparent; color: var(--tinta); padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .rail-fila { order: 2; display: block; height: auto; max-width: none; padding: 6px 16px 0; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(59, 46, 43, .4) transparent; }
  .rail-nav { min-width: 0; }
  .rail-lista { display: grid; gap: 2px; overflow: visible; }
  .rail-lista a { min-height: 40px; max-width: none; padding: 4px 14px; border-radius: 10px; font-size: 1.0625rem; }
  .rail-lista a[aria-current="true"] { background: var(--cafe); color: var(--claro); }
  @media (hover: hover) and (pointer: fine) { .rail-lista a:hover:not([aria-current="true"]) { background: rgba(244, 250, 252, .5); } }
  .rail-btn { display: none; }
  .buscador { order: 1; grid-template-rows: 1fr; transition: none; }
  .buscador-in { max-width: none; padding: 8px 20px 0; }
  .campo { margin-bottom: 8px; }
  .sugerencias button { background: rgba(244, 250, 252, .55); color: var(--tinta); }
  .sugerencias button:nth-child(n+5) { display: none; }
  .rail :focus-visible { outline-color: var(--cafe); }
  .redes { order: 3; display: flex; gap: 6px; justify-content: center; padding: 10px 0 16px; }
  .redes a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--cafe); color: var(--claro); }
  .columna { display: block; min-width: 0; }
  .hoja { width: min(100%, var(--col)); }
  main > .hoja, .columna > .hoja { margin-inline: auto; }
  .hoja.seccion, .hoja.antojarse { scroll-margin-top: 0; }
}
@media (min-width: 1080px) and (max-height: 940px) {
  .logo { width: min(200px, 64%); }
  .lema, .sugerencias { display: none; }
  .tapa { padding-top: 26px; }
}

/* ---------- 14. Preferencias del usuario ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .tapa-in > * { animation: aparece .2s ease-out both; animation-delay: 0s !important; }
  .buscador, dialog#visor::backdrop { transition-duration: .01ms; }
  .visor-sheet { transition: opacity .18s ease-out; transform: translate(-50%, 0); opacity: 0; }
  dialog#visor.abierto .visor-sheet { opacity: 1; }
  @media (min-width: 720px) { .visor-sheet { transform: translate(-50%, -50%); } }
  .boton:active, .rail-btn:active, .tarjeta:active, .visor-cerrar:active, .sugerencias button:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .aviso { background: #eaf6f9; }
  .sugerencias button { background: #5a4c48; }
}
@media (prefers-contrast: more) {
  .nota, .nota-plato, .visor-detalle, .visor-alergia { color: var(--tinta); }
  .foto-btn { outline: 1px solid var(--tinta); }
}
@media print { .rail, .saltar, dialog, .acciones { display: none !important; } }