/* Tokens e base do protótipo (handoff/README.md). Fontes: os mesmos arquivos woff2 que o protótipo
   carrega do Google Fonts, hospedados no próprio site (tools/extract_fonts.py). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --amarelo: #FFE500;
  --grafite: #17181A;
  --off: #F6F6F3;
  --branco: #FFFFFF;
  --borda: #DEDED9;
  --borda-2: #EAEAE6;
  --borda-3: #E4E4DF;
  --texto-2: #3A3C40;
  --texto-3: #4A4C50;
  --texto-4: #6A6C70;
  --texto-5: #8A8C90;
  --texto-escuro: #BDBEC1;
  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 32px);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--branco); color: var(--grafite); font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
::selection { background: var(--amarelo); color: var(--grafite); }

/* Marcador de dado pendente (só aparece no modo de desenvolvimento; o release recusa pendências) */
mark.pendente { background: var(--amarelo); color: var(--grafite); outline: 1px dashed var(--grafite); padding: 0 4px; font-size: .9em; }

/* Páginas de desenvolvimento (teste e comparação). Não fazem parte do design do protótipo. */
.dev { max-width: var(--container); margin: 0 auto; padding: 32px var(--gutter) 96px; line-height: 1.55; }
.dev h1 { font-weight: 400; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 16px; }
.dev h2 { font-weight: 400; font-size: 26px; letter-spacing: -.02em; margin: 48px 0 16px; border-top: 3px solid var(--amarelo); padding-top: 12px; }
.dev .mono { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: .08em; }
.dev .pesos span { display: block; }
.dev .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: start; }
.dev figure { margin: 0; }
.dev figcaption { font-size: 14px; color: var(--texto-4); margin-top: 6px; }
.dev video, .dev img { display: block; width: 100%; height: auto; background: var(--borda); }
.dev .phone { width: 300px; max-width: 100%; aspect-ratio: 375 / 812; overflow: hidden; background: var(--borda); }
.dev .phone video, .dev .phone img { width: 100%; height: 100%; object-fit: cover; }
.dev .retrato { max-width: 420px; }
.dev .logo { width: 170px; background: transparent; }
.dev .amarelo { background: var(--amarelo); padding: 16px; }
.dev .amarelo figcaption { color: var(--grafite); }
.dev .crop82 { object-position: 82% 50%; }
.dev .selo { color: var(--grafite); background: var(--amarelo); display: inline-block; padding: 2px 8px; }
.dev .amostra { font-size: 26px; margin: 0; }
.dev .w400 { font-weight: 400; }
.dev .w500 { font-weight: 500; }
.dev .w600 { font-weight: 600; }
.dev td code { overflow-wrap: anywhere; }
.dev .preto { filter: brightness(0); }
.dev table { border-collapse: collapse; width: 100%; font-size: 15px; }
.dev th, .dev td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda-2); }
.dev button { font: inherit; background: var(--amarelo); color: var(--grafite); border: 0; border-radius: 2px; padding: 12px 18px; cursor: pointer; }
.dev .nota { font-size: 14px; color: var(--texto-4); }
.dev .cmp { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
.dev .cmp:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }