/* ================================================================
   Verigood English — Brand Book
   Chrome, layout and vanilla recreations of the brand primitives.
   All colours / type / spacing come from ../project/tokens/*.css
   (linked via ../project/styles.css). Nothing is hard-coded here
   that already exists as a token.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-corpo);
  font-weight: var(--peso-corpo);
  line-height: var(--leading-corpo);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transicao), color var(--transicao);
}

::selection { background: var(--marcatexto); color: var(--tinta); }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--urucum); }

/* ----------------------------------------------------------------
   Layout primitives
   ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

section { padding-block: clamp(72px, 9vw, 128px); scroll-margin-top: 84px; }

.kicker {
  display: inline-block;
  font: var(--peso-bold) var(--texto-xs)/1 var(--font-corpo);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--raio-sm);
  background: var(--urucum-nevoa);
  color: var(--urucum-escuro);
}
.tema-tinta .kicker { background: rgba(255,77,0,0.16); color: var(--urucum); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-titulo);
  margin: 0;
}
.sec-title { font-size: clamp(34px, 5vw, var(--titulo-lg)); margin: 18px 0 12px; }
.sec-lead {
  max-width: 62ch;
  font-size: var(--texto-lg);
  color: var(--text-secundario);
  margin: 0 0 40px;
}

.grid { display: grid; gap: var(--esp-5); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-3.keep2, .grid-4.keep2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-3.keep2, .grid-4.keep2 { grid-template-columns: 1fr; }
}

/* Cartão — brand card primitive (components/core/Cartao) */
.card {
  background: var(--surface-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-papel);
  padding: var(--esp-5);
}
.card.rebaixado { background: var(--surface-rebaixada); box-shadow: none; }
.card.flush { padding: 0; overflow: hidden; }

/* ----------------------------------------------------------------
   Brand primitives (vanilla recreations of components/brand/*)
   ---------------------------------------------------------------- */

/* Onda de correção — the pen wave under "good" */
.wave { position: relative; display: inline-block; }
.wave-svg {
  position: absolute; left: -2%; bottom: -0.2em;
  width: 104%; height: 0.22em; overflow: visible; pointer-events: none;
}

/* Marca-texto — highlighter over key words */
.mark {
  background: linear-gradient(transparent 12%, var(--marcatexto) 12%,
                              var(--marcatexto) 88%, transparent 88%);
  color: inherit;
  padding: 0 0.12em;
}

/* Anotação à mão — teacher's handwriting */
.mao {
  font-family: var(--font-mao);
  font-weight: var(--peso-bold);
  color: var(--bic);
  transform: rotate(var(--rotacao-mao));
  display: inline-block;
}

/* Fonética — IPA notation, bars are urucum */
.fon { font-family: var(--font-fonetica); font-weight: var(--peso-medio); color: var(--bic); }
.fon .bar { color: var(--urucum); font-weight: var(--peso-bold); }
.fon.errada { text-decoration: line-through; opacity: 0.55; }
.tema-tinta .fon { color: var(--bic-claro); }

/* Carimbo — approval stamp sticker */
.carimbo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--peso-display);
  letter-spacing: 0.06em;
  background: var(--urucum);
  color: var(--branco);
  padding: 7px 12px;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-adesivo);
  transform: rotate(var(--rotacao-carimbo));
  font-size: 15px;
}
.carimbo.tinta { background: var(--tinta); color: var(--marcatexto); }
.carimbo.marcatexto { background: var(--marcatexto); color: var(--tinta); }
.carimbo.lg { font-size: 22px; padding: 10px 18px; }

/* Etiqueta — content kicker chip (components/core/Etiqueta) */
.etiqueta {
  display: inline-block;
  font: var(--peso-bold) var(--texto-xs)/1 var(--font-corpo);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--raio-sm);
  background: var(--urucum-nevoa);
  color: var(--urucum-escuro);
}
.etiqueta.bic { background: rgba(35,55,198,0.10); color: var(--bic); }
.etiqueta.tinta { background: var(--tinta-08); color: var(--text-secundario); }
.etiqueta.solido { background: var(--tinta); color: var(--marcatexto); }

/* Botão — brand button (components/core/Button) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--peso-bold) 15px/1 var(--font-corpo);
  padding: 12px 20px; min-height: 44px;
  border-radius: var(--raio-pill);
  border: 2px solid transparent;
  background: var(--acao-primaria); color: var(--branco);
  cursor: pointer; transition: var(--transicao);
}
.btn:hover { background: var(--acao-primaria-hover); color: var(--branco); }
.btn:active { transform: translateY(1px); }
.btn.lg { font-size: 17px; padding: 15px 28px; min-height: 52px; }
.btn.secondary { background: transparent; color: var(--text-body); border-color: var(--borda-forte); }
.btn.secondary:hover { background: var(--tinta-08); color: var(--text-body); }
.btn.ghost { background: transparent; color: var(--text-link); }
.btn.ghost:hover { background: var(--tinta-08); }

/* Balão de fala — PT (paper, points left) vs EN (ink, points right) */
.balao {
  max-width: 85%;
  padding: 10px 14px;
  font: var(--peso-semibold) 16px/1.35 var(--font-corpo);
  border: 2px solid var(--tinta);
}
.balao.pt {
  align-self: flex-start;
  background: var(--surface-card); color: var(--tinta);
  border-radius: var(--raio-balao);
}
.balao.en {
  align-self: flex-end;
  background: var(--tinta); color: var(--papel);
  border-radius: var(--raio-balao-en);
}

/* Wordmark — the logo, rendered live */
.wordmark { display: inline-flex; flex-direction: column; gap: 0.28em; line-height: 1; }
.wordmark .veri {
  font: var(--peso-display) 1em/1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-body);
}
.wordmark .english {
  font: var(--peso-bold) 0.3em/1 var(--font-mao);
  color: var(--urucum);
  transform: rotate(var(--rotacao-mao));
  align-self: flex-start;
}

/* Monograma — round avatar mark */
.monograma {
  border-radius: 50%;
  background: var(--urucum);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.monograma .vg {
  position: relative;
  font: var(--peso-display) 0.49em/1 var(--font-display);
  color: var(--papel);
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------
   Top navigation
   ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borda);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.nav-brand {
  font: var(--peso-display) 22px/1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-body); white-space: nowrap;
}
.nav-links {
  display: flex; gap: 4px; margin-left: auto; overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font: var(--peso-semibold) 13px/1 var(--font-corpo);
  color: var(--text-secundario);
  padding: 8px 11px; border-radius: var(--raio-pill);
  white-space: nowrap; transition: var(--transicao);
}
.nav-links a:hover { color: var(--text-body); background: var(--tinta-08); }
.nav-links a.active { color: var(--urucum); background: var(--urucum-nevoa); }
.tema-tinta .nav-links a.active { background: rgba(255,77,0,0.16); }

.theme-toggle {
  flex-shrink: 0;
  font: var(--peso-bold) 12px/1 var(--font-corpo);
  letter-spacing: 0.04em;
  background: transparent; color: var(--text-body);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  padding: 8px 14px; cursor: pointer; transition: var(--transicao);
}
.theme-toggle:hover { background: var(--tinta-08); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.hero { padding-block: clamp(56px, 10vw, 120px) clamp(48px, 7vw, 96px); }
.hero-tag { margin-bottom: 26px; }
.hero h1 {
  font-size: clamp(52px, 11vw, 132px);
  line-height: 0.98;
  margin: 0 0 28px;
}
.hero .arrow { color: var(--urucum); }
.hero-lead {
  max-width: 54ch; font-size: clamp(18px, 2.4vw, 24px);
  color: var(--text-secundario); margin: 0 0 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ----------------------------------------------------------------
   Colour swatches
   ---------------------------------------------------------------- */
.swatch {
  border-radius: var(--raio-md);
  border: 1px solid var(--borda);
  overflow: hidden; cursor: pointer;
  transition: var(--transicao);
}
.swatch:hover { transform: translateY(-2px); box-shadow: var(--sombra-card); }
.swatch .chip { height: 96px; }
.swatch .meta { padding: 12px 14px; background: var(--surface-card); }
.swatch .name { font: var(--peso-bold) 15px/1.2 var(--font-corpo); }
.swatch .hex {
  font: var(--peso-medio) 12px/1 var(--font-fonetica);
  color: var(--text-secundario); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.swatch .role { font: var(--peso-corpo) 12px/1.4 var(--font-corpo); color: var(--text-terciario); margin-top: 6px; }
.copied { color: var(--bic) !important; }

/* 60/30/10 bar */
.ratio { display: flex; height: 64px; border-radius: var(--raio-md); overflow: hidden; border: 1px solid var(--borda); }
.ratio > div { display: flex; align-items: center; justify-content: center; font: var(--peso-bold) 13px var(--font-corpo); }

/* AA pairs */
.pair {
  border-radius: var(--raio-md); padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--borda);
}
.pair b { font: var(--peso-display) 24px/1 var(--font-display); }
.pair small { font: var(--peso-medio) 11px var(--font-fonetica); opacity: 0.85; }

/* ----------------------------------------------------------------
   Type specimens
   ---------------------------------------------------------------- */
.type-row { padding: 22px 0; border-bottom: 1px solid var(--borda); }
.type-row:last-child { border-bottom: none; }
.type-label {
  font: var(--peso-bold) var(--texto-xs)/1 var(--font-corpo);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-terciario); margin-bottom: 10px;
}
.type-meta { font: var(--peso-medio) 12px var(--font-fonetica); color: var(--text-secundario); }
.sp-display { font: var(--peso-display) 56px/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.sp-corpo { font: var(--peso-corpo) 20px/1.5 var(--font-corpo); }
.sp-mao { font: var(--peso-bold) 34px/1.2 var(--font-mao); color: var(--bic); transform: rotate(var(--rotacao-mao)); display: inline-block; }
.sp-fon { font: var(--peso-medio) 34px/1 var(--font-fonetica); color: var(--bic); }

.scale-list { display: flex; flex-direction: column; gap: 4px; }
.scale-item { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.scale-item .tok { font: var(--peso-medio) 12px var(--font-fonetica); color: var(--text-secundario); width: 96px; flex-shrink: 0; }
.scale-item .demo { font-family: var(--font-display); font-weight: var(--peso-display); letter-spacing: var(--tracking-display); }

/* ----------------------------------------------------------------
   Spacing / radius / shadow specimens
   ---------------------------------------------------------------- */
.token-line { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.token-line:last-child { border-bottom: none; }
.token-line .tok { font: var(--peso-medio) 12px var(--font-fonetica); color: var(--text-secundario); width: 84px; flex-shrink: 0; }
.token-line .bar { background: var(--urucum); height: 16px; border-radius: 3px; }
.radius-demo { background: var(--urucum-nevoa); border: 2px solid var(--urucum); width: 72px; height: 72px; }
.tema-tinta .radius-demo { background: rgba(255,77,0,0.18); }
.shadow-demo { background: var(--surface-card); width: 100%; height: 72px; border-radius: var(--raio-md); border: 1px solid var(--borda); }

/* ----------------------------------------------------------------
   Do's & Don'ts
   ---------------------------------------------------------------- */
.dd h3 { font-size: var(--titulo-sm); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.dd ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.dd li { position: relative; padding-left: 30px; font-size: var(--texto-base); line-height: 1.45; }
.dd li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-family: var(--font-display); }
.dd .do li::before { content: "✓"; color: var(--urucum); }
.dd .dont li::before { content: "✗"; color: var(--text-terciario); }

/* ----------------------------------------------------------------
   Instagram canvas scaling
   Native canvases are authored at 1080px wide (matching the source
   templates exactly); app.js scales each holder to its column width.
   ---------------------------------------------------------------- */
.ig-holder { position: relative; width: 100%; overflow: hidden; border-radius: var(--raio-md); border: 1px solid var(--borda); box-shadow: var(--sombra-papel); }
.ig-canvas { width: 1080px; transform-origin: top left; font-family: var(--font-corpo); }
.ig-1350 { height: 1350px; }
.ig-1920 { height: 1920px; }

.reels-row { grid-template-columns: 340px 1fr; gap: var(--esp-6); }
@media (max-width: 720px) { .reels-row { grid-template-columns: 1fr; } }

.ig-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ig-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ig-caption .t { font: var(--peso-bold) 15px/1.2 var(--font-corpo); }
.ig-caption .d { font: var(--peso-medio) 12px var(--font-fonetica); color: var(--text-terciario); }

/* Reusable IG canvas atoms (native 1080 px scale) */
.ig-canvas .pad-feed { padding: 96px 72px; }
.ig-canvas .pad-story { padding: 220px 72px 320px; }
.ig-canvas .handle { font: 700 34px/1 var(--font-corpo); }
.ig-canvas .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.ig-canvas .big { font: 800 118px/1.08 var(--font-display); letter-spacing: -0.02em; }
.ig-canvas .stamp {
  font: 800 40px/1 var(--font-display); background: var(--urucum); color: var(--branco);
  padding: 18px 28px; border-radius: 12px; box-shadow: var(--sombra-adesivo);
  transform: rotate(-3deg); display: inline-block; letter-spacing: .06em;
}
.ig-canvas .mt-mark { background: linear-gradient(transparent 12%, var(--marcatexto) 12%, var(--marcatexto) 88%, transparent 88%); color: inherit; padding: 0 10px; }
.ig-canvas .hand { font: 700 52px/1.3 var(--font-mao); transform: rotate(-2deg); display: inline-block; }

/* ----------------------------------------------------------------
   Profile mockup
   ---------------------------------------------------------------- */
.phone {
  width: 393px; max-width: 100%; margin: 0 auto;
  background: #fff; color: var(--tinta);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--borda); box-shadow: var(--sombra-card);
  font-family: var(--font-corpo);
}
.phone .stat b { font: 700 16px var(--font-corpo); }
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.feed-cell { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.feed-cell > .mini { position: absolute; inset: 0; }

/* ----------------------------------------------------------------
   Applications
   ---------------------------------------------------------------- */
.app-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.app-card .label { font: var(--peso-bold) var(--texto-xs) var(--font-corpo); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-terciario); }
.email-sig { border-left: 3px solid var(--urucum); padding-left: 16px; }
.email-sig .n { font: var(--peso-bold) 16px var(--font-corpo); }
.email-sig .r { font: var(--peso-corpo) 13px var(--font-corpo); color: var(--text-secundario); }
.email-sig .l { font: var(--peso-semibold) 13px var(--font-corpo); color: var(--text-link); margin-top: 6px; }

/* Watermark demo */
.watermark-stage {
  position: relative; height: 200px; border-radius: var(--raio-md);
  background: var(--tinta); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.watermark-stage .wm { position: absolute; bottom: 14px; right: 14px; opacity: 0.92; }
.watermark-stage .play { font: 800 40px var(--font-display); color: var(--papel-sobre-tinta); }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.foot-site { padding: 56px 0 72px; border-top: 1px solid var(--borda); }
.foot-site .row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.foot-site .muted { color: var(--text-terciario); font-size: var(--texto-sm); max-width: 60ch; }

.pill-note {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--peso-medio) 13px var(--font-corpo);
  background: var(--surface-rebaixada); color: var(--text-secundario);
  padding: 8px 14px; border-radius: var(--raio-pill);
}

.lead-quote {
  font: var(--peso-corpo) clamp(20px, 3vw, 30px)/1.5 var(--font-corpo);
  border-left: 4px solid var(--urucum); padding-left: 24px;
}
.lead-quote b { font-weight: var(--peso-bold); }