/* ══════════════════════════════════════════════════════════════
   MAS KM0 · Gastronomic Forum Barcelona 2026 — base comuna dels heros
   Tipografies en local (la landing ha de funcionar sense wifi a la fira)
   ══════════════════════════════════════════════════════════════ */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Boldonse"; src: url("../fonts/Boldonse-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("../fonts/YoungSerif-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Crimson Pro"; font-style: italic; src: url("../fonts/CrimsonPro-Italic.ttf") format("truetype"); font-display: swap; }

:root {
  /* Marca */
  --mas-negre: #1d1d1b;
  --mas-groc: #f2c200;
  --km0-verd: #23753f;
  --paper: #f3eee2;
  /* Colors de producte (mostrejats dels packshots) */
  --c-sorra: #d9c6a5;
  --c-verd-bosc: #7f8f6c;
  --c-negre: #4a4a4c;
  --c-granat: #7a2a35;
  --c-rosa: #b8708f;
  --c-gris: #c9c3d4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Etiquetes de botó llarga/curta */
.curt { display: none; }
@media (max-width: 760px) { .llarg { display: none; } .curt { display: inline; } }

/* ── Selector d'opcions (només per a la presentació, no va a la landing final) ── */
.opcions {
  position: fixed; z-index: 1000; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 5px;
  background: rgba(20, 20, 18, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; font: 500 13px/1 "Instrument Sans", sans-serif; color: #f3eee2;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.opcions a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.opcions a:hover { background: rgba(255, 255, 255, 0.12); }
.opcions a[aria-current="page"] { background: #f3eee2; color: #1d1d1b; }
.opcions .lletra { font-weight: 700; }
@media (max-width: 560px) {
  .opcions .nom { display: none; }
  .opcions a { padding: 0 12px; }
}

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