/* 3ª DeraFest — tokens e base compartilhados pelo convite e pelo painel. */
@font-face { font-family: 'Big Shoulders'; src: url('/fontes/big-shoulders-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('/fontes/big-shoulders-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('/fontes/big-shoulders-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/fontes/hanken-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/fontes/hanken-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/fontes/hanken-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/fontes/hanken-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('/fontes/instrument-serif-italico.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('/fontes/instrument-serif.woff2') format('woff2'); font-style: normal; font-display: swap; }

:root {
  /* Cor */
  --carvao: #120b09;
  --carvao-2: #1d1210;
  --carvao-3: #2b1a16;
  --campari: #d2122e;
  --campari-escuro: #9e0c22;
  --brasa: #ff6a2b;
  --ambar: #f4b23c;
  --espuma: #fff4e2;
  --papel: #f3e7d3;
  --papel-2: #e9d8bc;
  --tinta: #1a0f0c;
  --tinta-2: #5a3f37;
  --verde: #2f8f5b;

  /* Tipo */
  --f-display: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --f-corpo: 'Hanken', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Instrument', Georgia, serif;
  --t-sm: 0.875rem;
  --t-corpo: 1rem;
  --t-lead: 1.1875rem;
  --t-h3: 1.5rem;
  --t-h2: clamp(2.6rem, 9vw, 4.6rem);
  --t-h1: clamp(5.2rem, 27vw, 13rem);

  /* Forma */
  --raio: 18px;
  --raio-sm: 12px;
  --gutter: clamp(16px, 5vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-volta: cubic-bezier(.34, 1.56, .64, 1);

  /* Grão de papel/pôster, sem arquivo extra. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--f-corpo); font-size: var(--t-corpo); line-height: 1.55; color: var(--espuma); background: var(--carvao); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mel { position: absolute; inset-inline-start: -200vw; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .8em 1.4em; border: 0; border-radius: 999px; font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none; transition: transform .18s var(--ease), background-color .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--campari { background: var(--campari); color: var(--espuma); box-shadow: 0 10px 30px -12px rgba(210, 18, 46, .8); }
.btn--campari:hover { background: #e01633; }
.btn--ambar { background: var(--ambar); color: var(--tinta); }
.btn--ambar:hover { background: #ffc254; }
.btn--fantasma { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--escuro { background: var(--carvao); color: var(--espuma); }
.btn--bloco { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

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