/* ⚠️ Cada @font-face aqui tem de corresponder a algo que a pagina REALMENTE
   pede. Medido em 25/08 com `document.fonts`: o peso 300 estava declarado, com
   <link rel=preload> no HTML, e ficava `unloaded` — 25 KB baixados em
   prioridade alta e descartados. Saiu.
   O ITALICO e o oposto: era PEDIDO (`h1 em`) e nao existia como arquivo, entao
   o navegador inclinava o roman. Falso italico nao muda a largura do texto, so
   o desenho — por isso passa despercebido. A Miller Banner italica tem `a`, `d`
   e `j` proprios, e a palavra em questao e o `desejado` do H1, a 67px. */
@font-face {
  font-family: "Miller Banner"; src: url("../fonts/miller-banner-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Miller Banner"; src: url("../fonts/miller-banner-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* ⚠️ FAIXA 600-700, nao 600 puro: os 4 numeros do Manifesto pedem 700 e so ha
   SemiBold. Sem a faixa o navegador escolhe o 600 e fica livre para engrossar
   por conta. Declarar a faixa faz o 700 virar acerto exato, sem arquivo novo. */
@font-face {
  font-family: "Miller Banner"; src: url("../fonts/miller-banner-600.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.8;              /* entrelinha larga: metade do ar da referencia */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Display ROMANO. O italico e reservado para <em> dentro do H1 — uma palavra na
   pagina inteira. Ver a nota em tokens.css: italico em todo titulo foi a causa
   nº1 do "nao parece caro". */
h1, h2, h3 {
  font-family: var(--fonte-titulo); font-weight: 400; font-style: normal;
  line-height: 1.14; letter-spacing: -0.012em; color: var(--marrom);
}
/* A UNICA assinatura em italico da pagina. */
h1 em { font-style: italic; color: var(--acento); }
h2 em, h3 em { font-style: normal; color: var(--acento); }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-secao); }
h3 { font-size: var(--t-card); }
p { max-width: var(--largura-texto); }
/* Espacamento de fluxo: sem isto o paragrafo cola no titulo em qualquer bloco
   que nao tenha regra propria (aconteceu na secao Sobre). */
h1 + p, h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: 1rem; }
p + p, p + ul, ul + p { margin-top: .85rem; }
.olho + h1, .olho + h2, .olho + h3 { margin-top: 0; }
h1 + .botao, h2 + .botao, p + .botao, ul + .botao, p + div > .botao { margin-top: 1.6rem; }

img { display: block; max-width: 100%; height: auto; border-radius: var(--raio-foto); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dourado-texto); outline-offset: 4px; }

/* A margem lateral ESCALA com a janela. Com o `- 2.5rem` fixo anterior, o
   respiro caia para 30px em 1280 (contra 110px em 1440) e a pagina lia espremida
   justamente na tela de notebook. O piso de 2.5rem preserva o mobile. */
.container { width: min(100% - clamp(2.5rem, 7vw, 8rem), var(--largura-max)); margin-inline: auto; }
.secao { padding-block: var(--esp-secao); position: relative; }
.centro { text-align: center; }
.centro p { margin-inline: auto; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sobrelinha em caixa alta espacada: abre quase toda secao na referencia.
   Em TERRACOTA, nao em dourado: o dourado e cor secundaria e estava aparecendo
   em toda sobrelinha da pagina, o que puxava tudo para o mostarda. */
.olho {
  display: block; font-size: var(--t-olho); font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--acento);
  margin-bottom: 1.1rem;
}
/* sobre o marrom da marca o dourado puro da 3.26 — aqui vai a tinta clara (5.73) */
.olho--claro { color: var(--dourado-claro); }

.onda {
  display: block; width: 44px; height: 17px; margin-bottom: 1rem;
  background-color: var(--dourado);
  -webkit-mask: var(--onda-svg) no-repeat center / contain;
          mask: var(--onda-svg) no-repeat center / contain;
}
.centro .onda { margin-inline: auto; }

/* ---------- MOVIMENTO ----------
   Só um gesto: subir e aparecer. Nada de parallax, 3D ou degrade — foi o excesso
   de efeito que tirou o ar premium. O estado FINAL e o padrao no CSS e o JS
   ADICIONA o inicial, entao JS quebrado mostra a pagina inteira, nunca em branco. */
[data-revela] { transition: opacity 800ms var(--transicao), transform 800ms var(--transicao); }
.js [data-revela]:not(.revelado) { opacity: 0; transform: translateY(18px); }
[data-revela].revelado { opacity: 1; transform: none; }
[data-cascata] > * { transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .js [data-revela]:not(.revelado) { opacity: 1; transform: none; }
}