/* ==========================================================================
   BASE — reset, tipografia, grid de 12 colunas, temas de bloco
   ========================================================================== */

/* Pride entra sozinha assim que o arquivo existir em assets/fonts/.
   Enquanto não existir, o navegador cai para Anton sem quebrar nada. */
@font-face {
  font-family: 'Pride';
  src: url('../fonts/Pride.woff2') format('woff2'),
       url('../fonts/Pride.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

/* O cabeçalho é fixo: sem esta folga o topo da seção some atrás dele quando
   o link de âncora leva até lá. */
:target,
section[id],
footer[id] { scroll-margin-top: calc(var(--header-altura) + var(--e-24)); }

body {
  margin: 0;
  background: var(--preto);
  color: var(--sobre-preto-100);
  font-family: var(--font-text);
  font-size: var(--corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-padrao),
              border-color var(--dur-rapida) var(--ease-padrao);
}

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

::selection { background: var(--amarelo); color: var(--preto); }

:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
}

/* Fundo claro: o amarelo sozinho não tem contraste suficiente para servir
   de anel de foco, então ganha um segundo anel preto por fora. Sobre o
   amarelo do bloco de conversão sobra só o preto — que já basta. */
.bloco--branco :focus-visible,
.bloco--amarelo :focus-visible,
.formulario :focus-visible {
  outline-color: var(--preto);
  /* REVERSÍVEL: box-shadow desativado temporariamente.
  box-shadow: 0 0 0 4px var(--amarelo); */
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: fixed;
  top: -100px;
  left: var(--margem);
  z-index: 100;
  background: var(--amarelo);
  color: var(--preto);
  font-weight: 700;
  font-size: var(--rotulo);
  padding: 14px 22px;
  border-radius: var(--raio-controle);
  transition: top var(--dur-media) var(--ease-saida);
}
.pular-para-conteudo:focus { top: 16px; }


/* --------------------------------------------------------------------------
   Grid — container 1280 · margem 80 · gutter 32 · coluna 77
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--margem) * 2);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* Arranjos da página — sete, e só sete */
.col-12  { grid-column: 1 / span 12; }
.col-1-8 { grid-column: 1 / span 8; }
.col-1-6 { grid-column: 1 / span 6; }
.col-1-5 { grid-column: 1 / span 5; }
.col-1-4 { grid-column: 1 / span 4; }
.col-6-7 { grid-column: 6 / span 7; }   /* coluna 5 fica vazia como respiro */
.col-8-5 { grid-column: 8 / span 5; }   /* coluna 7 fica vazia               */
.col-9-4 { grid-column: 9 / span 4; }
.col-3-8 { grid-column: 3 / span 8; }   /* 8 centralizado — exceção única    */

@media (max-width: 1023px) {
  .col-1-8, .col-1-6, .col-1-5, .col-1-4,
  .col-6-7, .col-8-5, .col-9-4, .col-3-8 { grid-column: 1 / span 12; }
}


/* --------------------------------------------------------------------------
   Blocos — alternância preto → branco → preto → branco → preto
   -------------------------------------------------------------------------- */

.bloco {
  padding-block: var(--bloco-y);
  position: relative;
}
.bloco--amplo { padding-block: var(--bloco-y-amplo); }

.bloco--preto {
  background: var(--preto);
  color: var(--sobre-preto-100);
  --bloco-bg: var(--preto);
  --texto-corpo: var(--sobre-preto-72);
  --texto-meta: var(--sobre-preto-45);
  --linha: var(--sobre-preto-16);
}

.bloco--branco {
  background: var(--branco);
  color: var(--sobre-branco-100);
  --bloco-bg: var(--branco);
  --texto-corpo: var(--sobre-branco-65);
  --texto-meta: var(--sobre-branco-40);
  --linha: var(--sobre-branco-14);
}

/* Fundo amarelo — inversão reservada ao bloco de conversão. O texto vira
   preto e o acento da headline passa a ser o branco. O gradient em si mora
   em .conversao__fundo (blocks.css), a camada que faz a paralaxe — aqui fica
   só a cor sólida de fallback e o overflow que recorta a sobra dela. */
.bloco--amarelo {
  background: var(--amarelo);
  color: var(--sobre-amarelo-100);
  --bloco-bg: var(--amarelo);
  --texto-corpo: var(--sobre-amarelo-65);
  --texto-meta: var(--sobre-amarelo-40);
  --linha: var(--sobre-amarelo-14);
  overflow: hidden;
  /* O overflow acima já recorta a sobra de 8% do .conversao__fundo. O contain
     repete o recorte como promessa ao compositor — nada dentro deste bloco
     pinta fora dele — para o Chrome poder aplicar o clip na camada do canvas
     em vez de no paint. Também cria contexto de empilhamento, o que torna
     `isolation: isolate` redundante aqui. Não muda o bloco contentor: .bloco
     já é position: relative. */
  contain: paint;
}


/* --------------------------------------------------------------------------
   Hierarquia tipográfica
   -------------------------------------------------------------------------- */

.d1, .d2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  margin: 0;
}
.d1 { font-size: var(--d1); line-height: var(--lh-d1); }
.d2 { font-size: var(--d2); line-height: var(--lh-d2); }

/* Duas headlines da página passam de 55 caracteres e, em D2/64, estourariam
   o teto de linhas do bloco. Elas descem um passo da escala em vez de
   atropelar a regra de medida. */
.d2--longa { font-size: clamp(2rem, 3.9vw, 3.5rem); }   /* 32 → 56 */

/* Segunda linha da headline em amarelo — uso previsto do acento */
.acento { color: var(--amarelo); }
.bloco--amarelo .acento { color: var(--branco); }

.h3 {
  font-size: var(--h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
}

.h4 {
  font-size: var(--h4);
  font-weight: 600;
  line-height: var(--lh-h4);
}

.apoio {
  font-size: var(--apoio);
  font-weight: 400;
  line-height: var(--lh-apoio);
  color: var(--texto-corpo);
  max-width: 52ch;          /* medida antes de largura */
  text-wrap: pretty;
}

.corpo {
  font-size: var(--corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-corpo);
  max-width: 66ch;          /* 60–70 caracteres, independente da coluna */
  text-wrap: pretty;
}

.texto-card {
  font-size: var(--card);
  line-height: var(--lh-card);
  color: var(--texto-corpo);
  max-width: 42ch;
  text-wrap: pretty;
}

.meta {
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-meta);
  line-height: 1.5;
}

/* Ritmo vertical: quanto mais alto o nível, maior o espaço acima */
.pilha-24 > * + * { margin-top: var(--e-24); }
.pilha-32 > * + * { margin-top: var(--e-32); }
.pilha-48 > * + * { margin-top: var(--e-48); }
.pilha-64 > * + * { margin-top: var(--e-64); }

@media (max-width: 767px) {
  .pilha-64 > * + * { margin-top: var(--e-48); }
}