*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font-family: var(--inter);
  font-weight: 400;
  font-size: var(--fs-corpo);
  line-height: 1.6;
  /* SEM `overflow-x: hidden` (removido na onda de correcao do review final).
     Ele tornava o criterio de aceite infalsificavel: com ele, toda medicao de
     scrollWidth == clientWidth da verdadeira POR CONSTRUCAO, entao o teste de
     "nao ha scroll horizontal" nao testava nada. Sem ele, a medicao volta a
     poder falhar — e passou: 375/768/1280 nas 5 paginas, todas iguais.
     Se aparecer overflow, conserte a CAUSA (quase sempre a margem negativa do
     .trilho ou um max-width faltando); nao recoloque esta linha. */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* `.display` foi REMOVIDA na onda de correcao do review final: estava
   definida em dois seletores e nao era usada em nenhuma pagina (conferido
   nas 5). Uma classe que so existe no CSS e armadilha — o proximo a mexer
   assume que ela e "o estilo de display" e duplica silenciosamente o h1.
   Se um dia precisar de um titulo grande que nao seja h1 semanticamente,
   traga a classe de volta junto com o HTML que a usa. */
h1, h2 {
  font-family: var(--archivo);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .95;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--archivo); font-weight: 800; letter-spacing: -.02em; }
p  { max-width: var(--medida); color: var(--corpo2); }

.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--corpo2);
}

.anotacao {                      /* lapis grafite, o motif assinatura */
  font-family: var(--caveat);
  font-weight: 600;               /* unico peso self-hosted (caveat-600.woff2) */
  font-size: 1.75rem;
  color: var(--grafite);
  transform: rotate(-3deg);
  display: inline-block;
}
.marca-texto {                   /* realce limao dosado, 1 palavra */
  /* box-shadow inset, NAO linear-gradient: a tecnica classica de realce usa
     um gradiente de duas cores iguais, e a regra "gradiente" do verify.mjs
     reprovaria o build. O resultado visual e o mesmo. */
  box-shadow: inset 0 -.35em 0 var(--limao);
}

.secao { padding: var(--respiro) var(--gutter); }
.secao--hero { padding-top: var(--respiro-hero); }
/* O rodape e um bloco escuro como qualquer .secao--dark — antes ele
   REDECLARAVA o mesmo par background+color por conta propria e NAO herdava a
   regra de texto abaixo. Consequencia medida no navegador (getComputedStyle,
   29/07): os enderecos e os labels do rodape saiam em rgb(74,69,61) sobre
   rgb(28,27,24) — contraste 1.8:1, praticamente ilegivel, porque a regra
   generica `p { color: var(--corpo2) }` vencia. Reusar em vez de duplicar
   conserta o contraste junto. */
.secao--dark, .footer {
  background: var(--grafite-fundo);
  color: var(--papel);
}
.secao--dark p, .secao--dark .label,
.footer p, .footer .label { color: var(--papel); opacity: .78; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.nav__links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: var(--inter); font-weight: 500; text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: .3em; }

.btn {
  display: inline-block;
  background: var(--limao);
  color: var(--grafite);
  font-family: var(--archivo);
  font-weight: 800;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 2px solid var(--grafite);
}
.btn:hover { background: var(--grafite); color: var(--limao); }

.footer { padding: 6.25rem var(--gutter) 2rem; }   /* fundo e cor vem de .secao--dark */
.footer a { color: var(--limao); }
.footer__grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* a tese e a assinatura do rodape: fica em opacidade cheia, nao nos .78 */
.footer .footer__tese { font-family: var(--archivo); font-weight: 800; opacity: 1; }
.footer__legal {
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .875rem; opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.hero__sub {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  margin: 2.5rem 0 3rem;
  max-width: 42ch;
}

.furo__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  margin-top: 4rem;
  align-items: start;
}
@media (min-width: 60rem) {
  .furo__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
/* sem `position: relative` aqui: era so a ancora do position:absolute que a
   .furo__nota abandonou quando a anotacao foi pro fluxo dentro do .vao */
.furo__artefato { margin: 0; }
.furo__texto p + p { margin-top: 1.5rem; }

/* Artefato: a thread de conversa, desenhada.
   ATENCAO: nenhum hex novo aqui. As bolhas se diferenciam por rgba DOS TOKENS
   (grafite e limao com alfa baixo) — usar branco puro, um cinza claro tipo
   "f4f4f0" em hex ou tons de verde claro reprovaria no verify, que so aceita
   os 5 hexes da paleta (o verify escaneia texto bruto, entao ate escrever o
   hex literal com cerquilha dentro de um comentario dispara a regra "paleta"
   — por isso a cerquilha foi omitida de proposito aqui). */
.thread {
  border: 1px solid var(--rule);
  background: var(--papel);
  padding: 1.25rem;
  font-size: .95rem;
}
.thread__cab {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--corpo2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .75rem;
  margin: 0 0 1rem;
  max-width: none;
}
.bolha {
  max-width: 82%;
  padding: .7rem .9rem;
  margin-bottom: .6rem;
  line-height: 1.4;
  border: 1px solid var(--rule);
  color: var(--grafite);
}
.bolha--deles { background: rgba(38,36,33,.04); }
.bolha--nossa { background: rgba(198,216,46,.18); margin-left: auto; }
.bolha time {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .65rem;
  color: var(--corpo2);
  margin-top: .35rem;
}
.vao {
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--corpo2);
  padding: 1.25rem 0;
  position: relative;
  max-width: none;
}
.vao::before, .vao::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule);
}
.vao::before { top: .5rem; }
.vao::after  { bottom: .5rem; }

/* .furo__nota — a anotacao de lapis vive DENTRO do vao (revisao de 29/07
   apos feedback do coordenador). O Step 3 original ancorava a nota em
   position:absolute (right:-.5rem; bottom:8%) por cima do card inteiro; a
   conferencia visual (getBoundingClientRect real, 375px e 1280px) mostrou
   que ela sempre caia sobre a ultima bolha "deles" — as bolhas ocupam 82%
   da largura (regra .bolha acima) alinhadas a esquerda, entao nunca sobra
   faixa livre a direita pros ~170px que a nota precisa, em nenhuma largura.
   Um primeiro ajuste tirou a nota do fluxo absoluto e a jogou como legenda
   ABAIXO do card inteiro — resolvia o overlap, mas descaracterizava o
   motif: a identidade "Marcado a Mao" (17/04) define a anotacao como marca
   de lapis SOBRE o artefato, apontando o furo, nao como legenda solta.
   Fix definitivo: o motif aponta o vao, nao a bolha. "2 dias sem resposta"
   e o unico trecho da thread sem bolha — e e literalmente onde o lead se
   perde. Mover o <span> pro HTML pra dentro do .thread, logo apos o
   <p class="vao">, e tirar o position:absolute aqui faz a nota viver ali,
   em fluxo normal (sem competir por espaco com nenhuma bolha, no overlap
   possivel por construcao). Mantem a rotacao -3deg que .anotacao ja da;
   vira bloco centralizado (display:block + margin auto) com respiro em
   cima/baixo pra nao encostar nas linhas finas do vao nem na bolha
   seguinte; max-width:24ch (achado por teste visual — 13ch da Step 3
   original quebrava em ~4 linhas apertadas, comprimento overkill pra uma
   legenda dentro do vao; 24ch quebra o texto em 2 linhas legiveis nas duas
   larguras testadas, sem esticar quase a largura toda do card). */
.furo__nota {
  display: block;
  width: fit-content;
  max-width: 24ch;
  margin: 1.5rem auto;
  text-align: center;
  line-height: 1.15;
}

.sistema-slider__cab { max-width: 48ch; }
.sistema-slider__cab h2 { margin: .75rem 0 1.25rem; }

.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 22rem);
  gap: 1.5rem;
  list-style: none;
  margin: 3.5rem 0 1rem;
  padding: 0 var(--gutter) 1.5rem;
  /* sangra ate a borda da viewport, como o slider da referencia */
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.peca {
  scroll-snap-align: start;
  border: 1px solid var(--rule);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
/* ATENCAO a especificidade: `.secao--dark p` (0,1,1) vence `.peca__num` (0,1,0)
   e pintaria o numero de papel com opacity .78, matando o acento limao. Por isso
   o seletor e qualificado com .secao--dark (0,2,0). Mesmo motivo do opacity:1.
   Confirme no navegador que o numero sai limao, nao branco. */
.secao--dark .peca__num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 2.5rem;
  color: var(--limao);
  margin: 0 0 .5rem;
  opacity: 1;
}
.peca h3 { font-size: 1.75rem; margin: 0; }
.peca p { margin: 0; }
.peca a {
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--limao);
  text-decoration: none;
}
.peca a:hover { text-decoration: underline; text-underline-offset: .3em; }
.peca--destaque { border-color: var(--limao); }
.trilho__dica { padding-left: 0; }

@media (min-width: 75rem) {
  .trilho { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .trilho__dica { display: none; }
}

/* Task 6 — diferenciais, quem monta, CTA */
.dif__grid, .quem__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 3rem;
}
@media (min-width: 60rem) {
  .dif__grid  { grid-template-columns: 1fr 1fr; }
  .quem__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; }
}
.dif h3 { font-size: 1.75rem; margin: 0 0 1rem; }
.dif { border-top: 2px solid var(--grafite); padding-top: 1.5rem; }
.quem__grid img { border: 1px solid var(--rule); }
.quem h2 { margin: .75rem 0 1.5rem; }

.secao--cta { border-top: 1px solid var(--rule); }
.secao--cta h2 { margin: .75rem 0 1.5rem; }
.secao--cta .btn { margin-top: 1.5rem; }
.cta__alt { margin-top: 1.5rem; font-size: 1rem; }

/* Task 7 — pagina /sistema, as 6 pecas em definition list */
.peca-longa { border-top: 1px solid var(--rule); }
.peca-longa h2 { margin: .75rem 0 2.5rem; }
.peca-longa--destaque { border-top: 2px solid var(--limao); }

.peca-longa__dl { display: grid; gap: 0; margin: 0; max-width: var(--medida); }
@media (min-width: 48rem) {
  .peca-longa__dl { grid-template-columns: minmax(9rem, 12rem) 1fr; column-gap: 3rem; }
}
.peca-longa__dl dt {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--corpo2);
  padding-top: 1.5rem;
}
.peca-longa__dl dd {
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--corpo2);
}
@media (max-width: 47.99rem) {
  .peca-longa__dl dt { padding-bottom: .25rem; }
  .peca-longa__dl dd { padding-top: 0; }
}

/* --- 404 (C1) e politica de privacidade (C2) --------------------------- */

.erro__saidas {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: var(--medida);
}
.erro__saidas li { border-top: 1px solid var(--rule); padding: 1.5rem 0; }
.erro__saidas li:last-child { border-bottom: 1px solid var(--rule); }
.erro__saidas a {
  font-family: var(--archivo);
  font-weight: 800;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: inset 0 -.12em 0 var(--limao);
}
.erro__saidas a:hover { box-shadow: inset 0 -.6em 0 var(--limao); }
.erro__saidas p { margin: .5rem 0 0; font-size: 1rem; }

/* Texto legal: coluna estreita, respiro menor entre secoes que o resto do
   site (sao muitos blocos curtos em sequencia, nao secoes de venda). */
.legal { padding-top: 0; padding-bottom: 3rem; }
.legal.secao--hero { padding-top: var(--respiro-hero); }
.legal h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 1rem; }
.legal p + p, .legal ul + p { margin-top: 1.25rem; }
.legal__data {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2rem;
}
.legal__lista { max-width: var(--medida); padding-left: 1.25rem; color: var(--corpo2); }
.legal__lista li { margin-bottom: .75rem; }

/* qualificado com .footer pra vencer `.footer p` (0,1,1) na especificidade —
   sem isso o font-size e a opacidade daqui perdiam em silencio */
.footer .footer__lgpd {
  margin: 1.5rem 0 0;
  max-width: var(--medida);
  font-size: .875rem;
}

/* Task 8 — pagina /alessandro */
.bio__hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) {
  .bio__hero { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
}
.bio__hero img { border: 1px solid var(--rule); }
.bio { border-top: 1px solid var(--rule); }
.bio h2 { margin-bottom: 2rem; }
.bio p + p { margin-top: 1.5rem; }