/* =========================================================================
   OFFMENU · tokens y componentes base (manual de identidad v1.0)
   Prefijo om-. Tipografías: Schibsted Grotesk (titulares y texto) + Montserrat (etiquetas, botones, precios).
   ========================================================================= */
:root {
  /* Color (pág. 10-11) */
  --om-granate: #42000E;
  --om-granate-hover: #5C0A1B;
  --om-rojo: #F5302A;        /* la línea, tachaduras, titulares ≥ 24 px */
  --om-rojo-texto: #D8241E;  /* errores y rojo pequeño */
  --om-blanco: #FFFFFF;
  --om-negro: #141518;
  --om-papel: #F6F4F1;
  --om-borde: #E2DFDA;
  --om-gris: #5F5B59;

  /* Tipografía (pág. 12-13) */
  --om-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --om-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* segunda tipografía (antes IBM Plex Mono) */
  --om-fs-display: clamp(48px, 33.1px + 3.97vw, 104px);
  --om-fs-h1: clamp(40px, 31.5px + 2.27vw, 72px);
  --om-fs-h2: clamp(32px, 27.75px + 1.13vw, 48px);
  --om-fs-h3: clamp(24px, 21.9px + 0.57vw, 32px);
  --om-fs-h4: 20px;
  --om-fs-text: 17px;
  --om-fs-small: 15px;
  --om-fs-label: 13px;

  /* Espacio (pág. 16) */
  --om-s1: 4px; --om-s2: 8px; --om-s3: 12px; --om-s4: 16px; --om-s5: 24px;
  --om-s6: 32px; --om-s7: 48px; --om-s8: 64px; --om-s9: 96px; --om-s10: 128px;
  --om-max: 1280px;
  --om-margin: 16px;
  --om-gutter: 16px;
}
@media (min-width: 480px)  { :root { --om-margin: 24px; } }
@media (min-width: 768px)  { :root { --om-margin: 32px; --om-gutter: 20px; } }
@media (min-width: 1024px) { :root { --om-margin: 48px; --om-gutter: 24px; } }
@media (min-width: 1280px) { :root { --om-margin: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--om-blanco); color: var(--om-negro);
  font-family: var(--om-sans); font-size: var(--om-fs-text); font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--om-granate); line-height: 1.02; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--om-rojo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.om-display { font-size: var(--om-fs-display); font-weight: 900; letter-spacing: -0.05em; line-height: 0.98; }
.om-h1 { font-size: var(--om-fs-h1); font-weight: 900; letter-spacing: -0.045em; line-height: 1; }
.om-h2 { font-size: var(--om-fs-h2); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.om-h3 { font-size: var(--om-fs-h3); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.om-h4 { font-size: var(--om-fs-h4); font-weight: 700; line-height: 1.25; color: var(--om-negro); }
.om-small { font-size: var(--om-fs-small); }
.om-muted { color: var(--om-gris); }
.om-label {
  font-family: var(--om-mono); font-size: var(--om-fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.4;
}
.om-price { font-family: var(--om-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* La tachadura (pág. 14): línea roja, texto tachado en gris. Una por página, solo en titulares. */
.om-tachado {
  color: var(--om-gris);
  text-decoration: line-through;
  text-decoration-color: var(--om-rojo);
  text-decoration-thickness: 0.12em;
  text-decoration-skip-ink: none;
}

/* ---------- Botones (pág. 21) ---------- */
.om-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--om-s2);
  min-height: 48px; padding: 0 var(--om-s5);
  font-family: var(--om-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border-radius: 0; border: 1px solid var(--om-granate);
  background: var(--om-granate); color: var(--om-blanco); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.om-btn:hover { background: var(--om-granate-hover); border-color: var(--om-granate-hover); }
.om-btn--secondary { background: transparent; color: var(--om-negro); border-color: var(--om-negro); }
.om-btn--secondary:hover { background: var(--om-negro); color: var(--om-blanco); border-color: var(--om-negro); }
.om-on-granate .om-btn { background: var(--om-blanco); color: var(--om-granate); border-color: var(--om-blanco); }
.om-on-granate .om-btn:hover { background: var(--om-papel); }
.om-on-granate .om-btn--secondary { background: transparent; color: var(--om-blanco); border-color: var(--om-blanco); }
.om-on-granate .om-btn--secondary:hover { background: var(--om-blanco); color: var(--om-granate); }
.om-btn[disabled] { opacity: .55; cursor: progress; }
.om-link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.om-link:hover { text-decoration-color: var(--om-rojo); }

/* ---------- Formularios (pág. 21) ---------- */
.om-field { display: grid; gap: var(--om-s2); }
.om-field > span { font-family: var(--om-mono); font-size: var(--om-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.om-input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 17px; color: var(--om-negro);
  background: var(--om-blanco); border: 1px solid var(--om-negro); border-radius: 0;
}
textarea.om-input { min-height: 120px; resize: vertical; }
.om-input::placeholder { color: var(--om-gris); }
.om-input:focus { outline: 2px solid var(--om-rojo); outline-offset: 0; }
.om-input[aria-invalid="true"] { border-color: var(--om-rojo-texto); }
.om-error { color: var(--om-rojo-texto); font-size: var(--om-fs-small); }
.om-error:empty { display: none; }

/* ---------- Retícula ---------- */
.om-wrap { width: 100%; max-width: calc(var(--om-max) + 2 * var(--om-margin)); margin-inline: auto; padding-inline: var(--om-margin); }
.om-rule { border: 0; border-top: 1px solid var(--om-negro); margin: 0; }