/* Despeguía · base: tokens, reset y piezas compartidas entre páginas */

:root {
  --paper: #F4EEE6;
  --ticket: #FFFBF7;
  --ink: #120F0E;
  --board: #141110;
  --sign: #FFD3B8;
  --accent: #FF4A12;
  --accent-text: #B83300;
  --muted: #5A524C;
  --danger: #C0271D;
  --line-dark: rgba(255 255 255 / .12);

  --f-display: 'Big Shoulders Display', sans-serif;
  --f-mono: 'Space Mono', monospace;
  --f-body: 'Plus Jakarta Sans', sans-serif;

  --gutter: 20px;
  color-scheme: light;
  interpolate-size: allow-keywords;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); background: var(--board); color: var(--ink); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex-shrink: 0; }

/* Tamaño fluido: --m en móvil (390px) → --d en escritorio (1440px) */
h1, h2, h3, .fs {
  font-size: clamp(calc(var(--m, 26) * 1px),
                   calc(var(--m, 26) * 1px + (var(--d, 48) - var(--m, 26)) * (100vw - 390px) / 1050),
                   calc(var(--d, 48) * 1px));
}

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); }
.accent { color: var(--accent); }

.logo { font-family: var(--f-display); font-weight: 900; letter-spacing: .01em; color: #fff; line-height: 1; }
.logo span { color: var(--accent); }

.kicker { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; }

/* Botón grande de marca */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase;
  border: 0; padding: 20px; transition: transform .15s, box-shadow .15s;
  --m: 30; --d: 44;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 currentColor; }
.btn:active { transform: none; box-shadow: none; }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--sign); }
.btn--sign { background: var(--sign); color: var(--ink); }

@media (max-width: 899px) { .hide-m { display: none !important; } }
@media (min-width: 900px) { .hide-d { display: none !important; } }

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