/* ===================================================================
 * Carta de Ático Flores · sistema de diseño v8
 *
 * Todo el color, la tipografia y el espaciado salen de los tokens del
 * tema de la tienda (atico-tokens-v8.css). Aqui no hay ni un hexadecimal
 * ni un tamaño de letra suelto: si la marca cambia, se vuelve a pasar
 * scripts/traer-tokens.sh y la carta cambia con ella.
 *
 * Es una carta de QR: se abre de pie, con una mano, con datos moviles y a
 * veces con mala cobertura dentro de la tienda. Por eso no lleva ni una
 * imagen, el javascript es de 4 KB y la unica dependencia externa son las
 * dos fuentes de la marca.
 * =================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Cuando se pincha un pill, el navegador lleva la seccion al borde de
   * arriba del todo... que es justo donde esta la barra de secciones,
   * pegada. El titular se metia debajo.
   *
   * scroll-padding-top le dice donde esta de verdad el borde util. El alto
   * no se puede escribir a mano: en movil la tira es una fila de 65px y en
   * escritorio los pills se reparten en dos o tres, asi que lo mide el
   * javascript y lo deja en --alto-nav. El valor de respaldo es el del
   * movil, por si el javascript no llega a correr.
   *
   * El aire que se le suma es --v8-space-8, el mismo padding de arriba que
   * tiene .carta. Asi, saltar a una seccion deja el titular exactamente
   * donde queda la primera al abrir la pagina, y no pegado a la tira. */
  scroll-padding-top: calc(var(--alto-nav, 65px) + var(--v8-space-8));
}

body {
  margin: 0;
  background: var(--v8-paper);
  color: var(--v8-ink);
  font-family: var(--v8-font-body);
  font-size: var(--v8-size-body-m);
  line-height: var(--v8-lh-body-m);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* El salto al contenido solo aparece con el tabulador. Una carta se lee
 * tambien con lector de pantalla y con el movil en horizontal. */
.carta-saltar {
  position: absolute;
  left: -9999px;
  background: var(--v8-action-primary);
  color: var(--v8-text-on-dark);
  padding: var(--v8-space-3) var(--v8-space-4);
  border-radius: var(--v8-radius-control);
  text-decoration: none;
  z-index: 20;
}
.carta-saltar:focus { left: var(--v8-space-4); top: var(--v8-space-4); }

/* -------------------------------------------------------------------
 * Cabecera
 *
 * Va en el beige calido de la marca, que es el mismo de la franja de
 * envios de la tienda. No lleva foto: una cabecera con imagen son 200 KB
 * para algo que se mira medio segundo.
 * ------------------------------------------------------------------- */

.carta-cab {
  background: var(--v8-surface-warm);
  padding: var(--v8-space-6) var(--v8-margin-mobile) var(--v8-space-6);
  text-align: center;
}
.carta-cab__marca {
  margin: 0;
  font-family: var(--v8-font-display);
  font-weight: var(--v8-weight-display);
  font-size: var(--v8-size-h2);
  line-height: var(--v8-lh-h2);
  letter-spacing: var(--v8-tracking-display);
}
.carta-cab__dir {
  margin: var(--v8-space-2) 0 0;
  font-size: var(--v8-size-caption);
  font-weight: var(--v8-weight-label);
  letter-spacing: var(--v8-tracking-data);
  text-transform: uppercase;
  color: var(--v8-text-secondary);
}

/* -------------------------------------------------------------------
 * Navegacion por secciones
 *
 * Trece secciones no caben en una pantalla de movil, asi que la tira se
 * desliza en horizontal, como el carrete de la portada. Se queda pegada
 * arriba porque en una carta larga es la unica forma de volver sin hacer
 * scroll a ciegas.
 *
 * El pill es el mismo componente que el de la portada y el del blog:
 * misma altura (--s-pill-height), mismo radio y mismo estado activo.
 * ------------------------------------------------------------------- */

.carta-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--v8-paper);
  border-bottom: var(--v8-border-width) solid var(--v8-line);
}
.carta-nav__fila {
  display: flex;
  gap: var(--v8-space-2);
  margin: 0;
  padding: var(--v8-space-3) var(--v8-margin-mobile);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  /* Sin scroll-snap: en una tira que se recorre con el pulgar para buscar
   * una seccion, el enganche pelea con el dedo. */
}
.carta-nav__fila::-webkit-scrollbar { display: none; }

.carta-nav__pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: var(--s-pill-height);
  padding: 0 var(--v8-space-4);
  border-radius: var(--v8-radius-pill);
  border: var(--v8-border-width) solid var(--v8-line);
  background: var(--v8-paper);
  color: var(--v8-text-secondary);
  font-size: var(--v8-size-body-s);
  font-weight: var(--v8-weight-medium);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.carta-nav__pill:hover {
  background: var(--v8-surface);
  border-color: var(--v8-ink);
  color: var(--v8-ink);
}
.carta-nav__pill[aria-current="location"] {
  background: var(--v8-action-primary);
  border-color: var(--v8-action-primary);
  color: var(--v8-text-on-dark);
}

/* -------------------------------------------------------------------
 * Secciones y platos
 * ------------------------------------------------------------------- */

.carta {
  max-width: var(--v8-measure-deck, 760px);
  margin-inline: auto;
  padding: var(--v8-space-8) var(--v8-margin-mobile) var(--v8-space-12);
}
.carta__cargando { color: var(--v8-text-secondary); text-align: center; }

.carta-seccion + .carta-seccion { margin-top: var(--v8-space-12); }

/* El titulo de seccion se apoya en un filete y no en una banda de color.
 * En el Canva eran bandas negras; a pantalla completa de movil, trece
 * bandas negras seguidas pesan mucho y el ojo deja de distinguirlas. El
 * filete separa igual y deja mandar al nombre.
 *
 * NO se queda pegado. Lo estuvo, para no perder de vista en que seccion
 * estabas, y era un error: un titulo pegado con fondo opaco se come los
 * platos segun pasan por detras, y el primero de cada seccion desaparecia
 * debajo del titulo. Medido el 26-10-2026: bajando 120px, el primer plato
 * acababa 87px por encima del borde inferior del titulo, o sea tapado.
 *
 * Y ademas sobraba: la tira de pills ya va pegada y marca sola la seccion
 * que se esta leyendo. Dos capas pegadas, una encima de otra, era lo que
 * creaba el solape. */
.carta-seccion__cab {
  padding-bottom: var(--v8-space-3);
  border-bottom: var(--v8-border-width) solid var(--v8-ink);
}
.carta-seccion__titulo {
  margin: 0;
  font-family: var(--v8-font-display);
  font-weight: var(--v8-weight-display);
  font-size: var(--v8-size-h3);
  line-height: var(--v8-lh-h3);
  letter-spacing: var(--v8-tracking-display);
}
.carta-seccion__sub {
  margin: var(--v8-space-1) 0 0;
  font-size: var(--v8-size-caption);
  color: var(--v8-text-secondary);
}

.carta-platos { margin: 0; padding: 0; list-style: none; }

.carta-plato {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--v8-space-4);
  padding: var(--v8-space-4) 0;
  border-bottom: var(--v8-border-width) solid var(--v8-line);
}
.carta-plato:last-child { border-bottom: none; }

.carta-plato__nombre {
  margin: 0;
  font-weight: var(--v8-weight-medium);
  /* El nombre puede ser largo ("Crujientes de pistacho o limon") y el
   * precio no puede bajar de linea por eso. Se parte el nombre. */
  overflow-wrap: anywhere;
}

/* El precio en tabular para que la columna quede a plomo: con cifras
 * proporcionales, "1,70 €" y "11,00 €" no alinean la coma. */
.carta-plato__precio {
  margin: 0;
  font-weight: var(--v8-weight-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.carta-plato__desc {
  grid-column: 1 / -1;
  margin: var(--v8-space-2) 0 0;
  font-size: var(--v8-size-body-s);
  line-height: var(--v8-lh-body-s);
  color: var(--v8-text-secondary);
  max-width: var(--v8-measure, 62ch);
}

/* Marca de picante. Es una palabra y no un emoji: el emoji se ve distinto
 * en cada telefono, no lo lee el lector de pantalla y en el v8 los
 * pictogramas son de linea. */
.carta-plato__marca {
  display: inline-block;
  margin-left: var(--v8-space-2);
  padding: 0 var(--v8-space-2);
  border-radius: var(--v8-radius-badge);
  background: var(--v8-surface-warm);
  color: var(--v8-text-secondary);
  font-size: var(--v8-size-caption);
  font-weight: var(--v8-weight-label);
  letter-spacing: var(--v8-tracking-data);
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* Nota al pie de una seccion (la de los combos de desayuno). */
.carta-seccion__nota {
  margin: var(--v8-space-4) 0 0;
  padding: var(--v8-space-4);
  background: var(--v8-surface);
  border-radius: var(--v8-radius-control);
  font-size: var(--v8-size-body-s);
  line-height: var(--v8-lh-body-s);
  color: var(--v8-text-secondary);
}

/* -------------------------------------------------------------------
 * Pie
 * ------------------------------------------------------------------- */

.carta-pie {
  background: var(--v8-surface);
  border-top: var(--v8-border-width) solid var(--v8-line);
  padding: var(--v8-space-8) var(--v8-margin-mobile);
  text-align: center;
}
.carta-pie__alerg {
  margin: 0;
  font-size: var(--v8-size-body-s);
  color: var(--v8-text-secondary);
  max-width: var(--v8-measure, 62ch);
  margin-inline: auto;
}
.carta-pie__links {
  display: flex;
  justify-content: center;
  gap: var(--v8-space-6);
  flex-wrap: wrap;
  margin: var(--v8-space-6) 0 0;
}
.carta-pie__links a {
  color: var(--v8-ink);
  font-size: var(--v8-size-caption);
  font-weight: var(--v8-weight-label);
  letter-spacing: var(--v8-tracking-data);
  text-transform: uppercase;
  text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------------
 * Pantallas grandes
 *
 * La carta no se estira: una linea de 760px ya es larga para leer un
 * nombre y un precio. Lo que cambia son los margenes y el aire.
 * ------------------------------------------------------------------- */

@media (min-width: 768px) {
  .carta-cab { padding: var(--v8-space-12) var(--v8-margin-desktop) var(--v8-space-6); }
  .carta-cab__marca { font-size: var(--v8-size-h1); line-height: var(--v8-lh-h1); }
  .carta-nav__fila { padding: var(--v8-space-3) var(--v8-margin-desktop); justify-content: center; flex-wrap: wrap; overflow-x: visible; }
  .carta { padding: var(--v8-space-12) var(--v8-margin-desktop) var(--v8-space-16); }
  .carta-seccion__titulo { font-size: var(--v8-size-h2); line-height: var(--v8-lh-h2); }
}

@media print {
  .carta-nav, .carta-saltar { display: none; }
  body { background: #fff; }
}