/* =========================================================================
   Base — reset, tipografia, acessibilidade e primitivas de layout
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--altura-texto);
  font-weight: var(--peso-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Lenis assume o controle da rolagem quando ativo */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-semi);
  font-style: normal;           /* títulos nunca em itálico */
  line-height: var(--altura-titulo);
  letter-spacing: var(--espaco-letra-titulo);
  color: var(--cor-texto);
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--texto-4xl); line-height: var(--altura-apertada); }
h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
li { margin-bottom: var(--e-2); }

strong, b { font-weight: var(--peso-forte); color: var(--cor-texto); }

a { color: var(--cor-marca-forte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cor-acao); }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

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

hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--e-8) 0; }

::selection { background: var(--rosa-200); color: var(--tinta-900); }

/* --------------------------- Acessibilidade --------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  border-radius: var(--raio-sm);
}

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

.pular-para-conteudo {
  position: absolute; left: var(--e-4); top: var(--e-4);
  z-index: var(--z-preload);
  background: var(--cor-acao); color: var(--branco);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--raio-md);
  font-weight: var(--peso-semi);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-rapida) var(--ease-saida);
}
.pular-para-conteudo:focus { transform: translateY(0); color: var(--branco); }

/* ----------------------------- Layout ----------------------------- */

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.envelope--estreito { max-width: 880px; }
.envelope--largo    { max-width: 1440px; }

.secao { position: relative; padding-block: var(--secao-y); }
.secao--alt   { background: var(--cor-fundo-alt); }
.secao--fundo { background: var(--cor-fundo-fundo); position: relative; }
/* grão de papel: tira o aspecto de fundo digital chapado */
.secao--fundo::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/textura/textura-papel.jpg") center / cover no-repeat;
  opacity: 0.3;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.secao--fundo > * { position: relative; z-index: 1; }
.secao--escura {
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-invertido);
}
.secao--escura h2, .secao--escura h3, .secao--escura h4 { color: var(--papel); }
.secao--escura .olho { color: var(--ouro-300); }
.secao--escura .secao__sub { color: var(--tinta-200); }

.secao__cabeca { max-width: 62ch; margin-bottom: var(--e-8); }
.secao__cabeca--centro { margin-inline: auto; text-align: center; }
.secao__sub {
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
  line-height: var(--altura-media);
  max-width: 60ch;
}
.secao__cabeca--centro .secao__sub { margin-inline: auto; }

.olho {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-olho);
  text-transform: uppercase;
  color: var(--cor-marca-forte);
  margin-bottom: var(--e-3);
}
.olho::before {
  content: "";
  width: 22px; height: 2px; border-radius: var(--raio-total);
  background: linear-gradient(90deg, var(--cor-destaque), var(--cor-acao));
}

.grade { display: grid; gap: var(--e-5); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }

.pilha  { display: flex; flex-direction: column; gap: var(--e-4); }
.linha  { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

.texto-centro { text-align: center; }
.medida { max-width: var(--largura-texto); }

/* Realce manuscrito sob palavras-chave do texto corrido */
.realce {
  background-image: linear-gradient(120deg, var(--ouro-200) 0%, var(--rosa-200) 100%);
  background-repeat: no-repeat;
  background-size: 100% 38%;
  background-position: 0 88%;
  padding-inline: 2px;
}