/* ==========================================================================
   base.css — reset, tipografia e as regras de "tinta"
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  /* Regra da linguagem: tinta em papel não projeta sombra e guilhotina não
     faz curva. Sem exceção no site inteiro. */
  border-radius: 0;
  box-shadow: none;
}

* {
  margin: 0;
}

/* `hidden` tem que vencer qualquer `display` de componente. É o que segura os
   blocos que estão prontos mas ainda não podem aparecer (os depoimentos, à
   espera de autorização por escrito): tirar o atributo devolve a seção. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa a barra fixa de CTA quando se pula para uma âncora. */
  scroll-padding-top: 1rem;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ff-texto);
  font-size: var(--fs-body);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Público em Android de entrada: um travamento de rolagem custa mais que
     qualquer refinamento visual. */
  overscroll-behavior-y: none;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: var(--fio) solid var(--laranja);
  outline-offset: 3px;
}

/* --- Tipografia -----------------------------------------------------------
   Microgramma é extended: come largura absurda. Só entra com poucas palavras
   e <br> na mão. Deixar o navegador quebrar sozinho arruína o título.
   -------------------------------------------------------------------------- */

.marca-titulo,
.display {
  /* Bloco por padrão: o wipe de clip-path não funciona em elemento inline. */
  display: block;
  font-family: var(--ff-marca);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* O arquivo subsetado não tem minúsculas: forçar caixa alta evita fallback
     visível se alguém digitar em caixa baixa. */
}

/* Tipo "na medida": em vez de escolher um corpo e torcer para caber, o texto é
   dimensionado pela largura disponível dividida pela largura real da linha mais
   longa em ems (`--em-larg`, medido na própria fonte com fontTools). É como se
   compõe um cartaz: o tipo é ajustado à medida da folha, não ao contrário.
   Resolve de uma vez a Microgramma extended e o 70333 estourarem em 360px. */
.na-medida {
  --medida-caixa: calc(100vw - 2 * var(--pad-pagina));
  font-size: min(var(--fs-teto, var(--fs-display)), calc(var(--medida-caixa) / var(--em-larg, 8)));
}

/* Onde houver container query, a medida deixa de ser estimada: 100cqw é a
   largura real da caixa de conteúdo do bloco. Sem isso, qualquer mudança de
   grid no desktop desalinha a conta. */
@supports (container-type: inline-size) {
  .medida-container {
    container-type: inline-size;
  }

  .medida-container .na-medida {
    --medida-caixa: 100cqw;
  }
}

.numero {
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: var(--fs-numero);
  line-height: 0.82;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}

/* `.numero` vem depois de `.na-medida` neste arquivo e ganharia o corpo por
   ordem de cascata, jogando fora a medida da caixa — o número estourava a
   coluna e passava por cima do texto ao lado. As duas classes juntas voltam a
   ser compostas na medida, agora com o teto do próprio `--fs-numero`. */
.numero.na-medida {
  font-size: min(var(--fs-teto, var(--fs-numero)), calc(var(--medida-caixa) / var(--em-larg, 4.71)));
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: var(--lh-titulo);
  text-wrap: balance;
}

/* Títulos longos demais para a Microgramma vão em Archivo expandida.
   O eixo wdth rima com a largura da Microgramma sem imitá-la. */
.titulo-expandido {
  font-family: var(--ff-texto);
  font-size: var(--fs-h1);
  font-variation-settings: 'wght' 700, 'wdth' 118;
  letter-spacing: -0.015em;
}

.h2 {
  font-size: var(--fs-h2);
  font-variation-settings: 'wght' 700, 'wdth' 108;
  letter-spacing: -0.01em;
}

.h3 {
  font-size: var(--fs-h3);
  font-variation-settings: 'wght' 700, 'wdth' 100;
}

/* Rótulo fino em caixa alta acima do título. Sempre acompanhado do fio
   laranja — o fio é o que faz o eyebrow pertencer à linguagem. */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Em 360px o eyebrow mais longo do site quebra em duas linhas e deixa uma
   palavra órfã. O espacejamento cede um pouco; o corpo de texto, nunca. */
@media (max-width: 26rem) {
  .eyebrow {
    letter-spacing: 0.13em;
  }
}

.eyebrow--fio::before {
  content: '';
  display: block;
  width: 3.5rem;
  height: var(--fio);
  background: var(--laranja);
  margin-block-end: 0.875rem;
}

.lead {
  font-size: var(--fs-lead);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  line-height: 1.38;
  max-width: 34ch;
  text-wrap: pretty;
}

.corpo {
  max-width: var(--medida);
  text-wrap: pretty;
}

.corpo + .corpo {
  margin-block-start: 1.25em;
}

.meta {
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--tinta-80);
}

.destaque {
  font-variation-settings: 'wght' 700, 'wdth' 100;
}

/* Sublinhado de tinta 2. É o único jeito de o laranja tocar em texto sobre
   papel: como fio embaixo, nunca como cor da letra. */
.sublinhado {
  background-image: linear-gradient(var(--laranja), var(--laranja));
  background-repeat: no-repeat;
  background-size: 100% var(--fio);
  background-position: 0 100%;
  padding-block-end: 0.08em;
}

/* --- Estado armado: antes de o motion existir --------------------------------
   Um script inline no topo do body marca `data-motion="armado"` no <html>, e é
   isso que esconde o que vai ser revelado. Precisa ser CSS, e precisa ser antes
   da primeira pintura.

   O motivo é um bug que o Pedro viu e descreveu como "a hero aparece depois do
   site": o motion iniciava no `window.load`, ou seja, depois das fotos. Até lá
   a página já tinha sido pintada inteira e visível; o JS então escondia tudo de
   uma vez e reanimava por cima. Dava um piscar geral, e a hero — que é a única
   coisa com timeline própria e delay — voltava por último, depois do resto da
   página. Nada disso era a animação: era a página sendo desfeita e refeita.

   Com o estado inicial vindo do CSS, o conteúdo nasce escondido, o motion assume
   sem transição visível e a cascata roda uma vez só, na ordem certa.

   Rede de segurança: se o JS quebrar entre armar e iniciar, o mesmo script
   inline desarma sozinho depois de 2s e devolve a página visível. Sem JS
   nenhum, o atributo nunca é posto e nada aqui casa.
   -------------------------------------------------------------------------- */

[data-motion='armado'] [data-reveal],
[data-motion='armado'] [data-hero-item],
[data-motion='armado'] [data-pin-banda],
[data-motion='armado'] [data-pin-linha],
[data-motion='armado'] [data-linha-parte],
[data-motion='armado'] [data-indice-tinta],
[data-motion='armado'] .cta__numero {
  clip-path: inset(calc(var(--folga-mascara) * -1) 100% calc(var(--folga-mascara) * -1) 0);
}

[data-motion='armado'] [data-indice-tinta] {
  clip-path: inset(100% calc(var(--folga-mascara) * -1) 0 0);
}

[data-motion='armado'] [data-ano-cassacao] {
  clip-path: inset(calc(var(--folga-mascara) * -1) 100% calc(var(--folga-mascara) * -1) 0);
}

[data-motion='armado'] [data-ano-cassacao='direita'] {
  clip-path: inset(calc(var(--folga-mascara) * -1) 0 calc(var(--folga-mascara) * -1) 100%);
}

[data-motion='armado'] .stat__fio,
[data-motion='armado'] .cta__fio,
[data-motion='armado'] [data-indice-fio],
[data-motion='armado'] [data-ano-fio] {
  transform: scaleX(0);
}

/* O contador da lista longa nasce recolhido para fora do topo. */
[data-motion='armado'] [data-contador-lista] {
  transform: translateY(-140%);
}

[data-motion='armado'] [data-linha-fio] {
  transform: scaleY(0);
}

[data-motion='armado'] .registro,
[data-motion='armado'] .linha__marcador {
  transform: scale(0);
}

[data-motion='armado'] [data-selo] {
  opacity: 0;
  transform: scale(0.86);
}

/* --- Revelação de tinta ----------------------------------------------------
   O wipe de entrada é transição CSS, não GSAP. É a mesma curva e a mesma
   duração da assinatura de movimento, mas sem passar por biblioteca: mais
   barato no Android de entrada e sem o estado intermediário em que a tween
   roda e o elemento não acompanha.

   `data-oculto` é posto pelo JS. Sem JS, nenhum destes seletores casa e todo
   o conteúdo nasce visível.
   -------------------------------------------------------------------------- */

[data-reveal][data-oculto] {
  clip-path: inset(calc(var(--folga-mascara) * -1) 100% calc(var(--folga-mascara) * -1) 0);
  transition: clip-path var(--dur-wipe) var(--ease-tinta);
}

[data-reveal][data-oculto][data-revelado] {
  clip-path: inset(
    calc(var(--folga-mascara) * -1) calc(var(--folga-mascara) * -1)
      calc(var(--folga-mascara) * -1) 0
  );
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal][data-oculto] {
    clip-path: none;
    transition: none;
  }
}

/* --- Retícula ---------------------------------------------------------------
   ⚠️ FORA DE USO desde 13/08/2026, junto com `.cabeca-secao` e `.painel`:
   a repaginada que as trouxe não foi aprovada. Mantidas porque a regra que
   elas carregam continua sendo a do projeto. Ver ESTADO-ATUAL.md.

   Uma gráfica de duas tintas não tem meio-tom contínuo: para obter um valor
   intermediário ela imprime uma malha de pontos. É isso aqui. Note que a regra
   contra gradiente continua valendo — `radial-gradient` está sendo usado com
   parada dura, então o resultado é um ponto chapado repetido, o oposto de uma
   rampa contínua. É a terceira "cor" do site sem sair das duas tintas.

   REGRA DURA: retícula **nunca** vai atrás de texto corrido. A malha derruba o
   contraste justamente do jeito que some sob sol forte, que é a restrição
   central do projeto. Ela serve para preencher área vazia, fechar uma faixa e
   dar textura de borda. Onde precisar de rótulo por cima, o rótulo leva chapa
   sólida (ver `.cabeca-secao__rotulo > span`).
   -------------------------------------------------------------------------- */

.reticula {
  background-image: radial-gradient(var(--tinta) 1.15px, transparent 1.25px);
  background-size: 6px 6px;
}

/* Sobre bloco de tinta cheia a malha inverte: pontos de papel sobre navy. */
.reticula--papel {
  background-image: radial-gradient(var(--papel) 1.15px, transparent 1.25px);
}

.reticula--densa {
  background-size: 4px 4px;
}

.reticula--aberta {
  background-size: 9px 9px;
}

/* Painel de retícula com respiro próprio. É o que substitui o parágrafo solto
   no papel vazio: o fecho de um argumento ganha superfície. */
.painel {
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-block-start: var(--fio) solid var(--laranja);
}

/* --- Inversão: bloco de tinta cheia --------------------------------------- */

.tinta-cheia {
  background: var(--tinta);
  color: var(--papel);
}

.tinta-cheia .meta {
  color: var(--papel-75);
}

.tinta-cheia :focus-visible {
  outline-color: var(--laranja);
}

/* --- Utilitários ---------------------------------------------------------- */

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  inset-inline-start: var(--pad-pagina);
  inset-block-start: -100%;
  z-index: calc(var(--z-overlay) + 1);
  background: var(--tinta);
  color: var(--papel);
  padding: 1rem 1.25rem;
  font-size: var(--fs-meta);
  font-variation-settings: 'wght' 700, 'wdth' 100;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-block-end: var(--barra-btn) solid var(--laranja);
}

.pular-para-conteudo:focus {
  inset-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}