/* Base: tokens não amostrados, reset, tipografia, utilidades e animação de entrada */
:root {
  --papel: #FFFFFF;
  --papel-2: #F2F4F7;
  --branco: #FFFFFF;
  --tinta-suave: #4A4550;
  --creme-suave: rgba(255, 255, 255, .78);

  --fonte-titulo: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --fonte-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 18px;
  --raio-grande: 28px;
  --borda: 2.5px solid var(--tinta);
  --sombra-adesivo: 4px 5px 0 var(--tinta);

  --ease-quique: cubic-bezier(.34, 1.56, .64, 1);
  --ease-suave: cubic-bezier(.22, 1, .36, 1);
  --ease-tilt: cubic-bezier(.03, .98, .52, .99);

  --largura: 1180px;
  --header-h: 76px;

  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip; /* "hidden" aqui quebrava a barra de filtros fixa (position: sticky) */
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.02; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; }
p, ul, ol { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 8px; }
.secao--tinta :focus-visible { outline-color: var(--amarelo); }

.container { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 8px 14px; border-radius: 10px; }
.pular:focus { left: 8px; }

.etiqueta {
  display: inline-block;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vermelho);
}

.secao { padding-block: clamp(72px, 10vw, 128px); position: relative; }
.secao--tinta { background: var(--tinta); color: var(--papel); }
.secao--tinta .etiqueta { color: var(--amarelo); }

.secao-cabeca { max-width: 720px; margin-bottom: clamp(30px, 5vw, 52px); }
.secao-cabeca h2 { margin-top: 6px; }
.secao-cabeca p:not(.etiqueta) { margin-top: 14px; color: var(--tinta-suave); font-size: 1.12rem; max-width: 56ch; }
.secao--tinta .secao-cabeca p:not(.etiqueta) { color: var(--creme-suave); }

/* Marca-texto amarelo, como caneta de verdade (levemente torto) */
.marca-texto {
  background: linear-gradient(100deg, transparent .3em, var(--amarelo) .3em calc(100% - .2em), transparent calc(100% - .2em)) 0 78% / 100% .5em no-repeat;
  padding-inline: .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.secao--tinta .marca-texto { color: var(--tinta); background-size: 100% 82%; background-position: 0 70%; }

/* Sublinhado desenhado à mão que "se escreve" */
.sublinhado { position: relative; display: inline-block; white-space: nowrap; }
.sublinhado::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -.14em;
  height: .34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 70 18, 106 9 S 168 5, 197 12' fill='none' stroke='%23C70906' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: rabisco 1.1s .6s var(--ease-suave) forwards;
}
.sublinhado--amarelo::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 70 18, 106 9 S 168 5, 197 12' fill='none' stroke='%23FDBA04' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
@keyframes rabisco { to { clip-path: inset(0 0 0 0); } }

/* Entrada ao rolar — só depois que o JS marca <html class="anim"> */
.anim [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s var(--ease-suave), translate .8s var(--ease-quique);
  transition-delay: var(--reveal-delay, 0ms);
}
.anim [data-reveal].revelado { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .anim [data-reveal] { opacity: 1; translate: none; }
  .sublinhado::after { clip-path: none; }
}