/* =========================================================================
   2. BASE - reset, elementos HTML, layout de página, utilitarios.
   Sem classes de componente aqui (essas vivem em components.css).
   ========================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o header fixo quando o usuário chega por uma ancora. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

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

body {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Trava a página em tema claro. A LP não inverte por seção. */
  color-scheme: light;
  overflow-x: hidden;
}

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

img, video { height: auto; }

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

/* O navegador nao aplica cursor de mao em <button> por padrao. Sem esta
   regra, acordeao, filtros e setas do carrossel ficam com a seta comum e
   nao parecem clicaveis. */
button,
[role="button"],
summary,
label[for] { cursor: pointer; }

button { background: none; border: none; }

button:disabled,
[aria-disabled="true"] { cursor: not-allowed; }

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

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

:where(p, li, figcaption) { text-wrap: pretty; }

/* --- Tipografia dos elementos ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}

h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

strong, b { font-weight: var(--fw-semi); color: var(--ink-900); }

/* Em contexto escuro, negrito NÃO pode forçar tinta escura: sobre o navy do
   rodapé o texto ficava em 1,09:1, ou seja, invisível. Aqui ele herda a cor
   do bloco e apenas ganha peso, que é o papel do negrito. */
.rodape strong, .rodape b,
.secao--escura strong, .secao--escura b {
  color: inherit;
  font-weight: var(--fw-bold);
}

/* No rodapé o nome do polo é a informação de identidade e merece o branco
   cheio, um degrau acima do texto de apoio. */
.rodape__tagline b { color: #FFFFFF; }

/* Palavra em destaque dentro de um titulo. Sublinhado desenhado pelo
   próprio texto (não pseudo-elemento), então acompanha a quebra de linha. */
.marca {
  color: var(--brand-600);
  text-decoration: underline;
  text-decoration-color: var(--accent-500);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}


/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


.secao { padding-block: var(--section-y); }

/* Variante compacta: usada na faixa de credibilidade, para o ritmo vertical
   da pagina nao virar um metronomo de blocos idênticos. */

.secao--alt { background: var(--paper-alt); }

/* Regiao comum (Gestalt): quando secoes vizinhas sustentam o mesmo
   argumento, elas dividem a superficie e o vao entre elas encolhe. A
   proximidade faz o conjunto ser lido como um bloco unico, e nao como
   secoes soltas que por acaso ficaram perto. O respiro cheio so volta
   na proxima troca de campo -- e essa troca passa a marcar o fim do
   argumento, em vez de acontecer a cada secao. */
.secao--continua { padding-top: calc(var(--section-y) * 0.38); }


.secao--escura {
  background: var(--brand-800);
  color: var(--brand-100);
}

.secao--escura h2,
.secao--escura h3 { color: #FFFFFF; }

/* Cabecalho de seção: titulo e apoio empilhados, medida de leitura travada.
   Não usamos o padrão "titulo grande a esquerda + paragrafo pequeno solto
   a direita": e um vicio de layout que deixa o texto de apoio orfao. */
.secao-head { margin-bottom: var(--sp-8); max-width: var(--measure); }

.secao-head p {
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--ink-600);
  max-width: 56ch;
}
.secao--escura .secao-head p { color: var(--brand-100); }

.secao-head--centro {
  margin-inline: auto;
  text-align: center;
}

/* --- Utilitarios --------------------------------------------------------- */

/* Visivel apenas para leitores de tela. Usa clip, não display:none, para o
   elemento continuar focavel e anunciavel. */
.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;
}


/* --- Aninhamento duplo (casca + nucleo) ---------------------------------
   Um bloco premium nunca fica pousado direto no fundo: ele vive dentro de
   uma moldura, como uma placa de vidro assentada numa bandeja de aluminio.
   A casca e translucida e carrega a sombra; o nucleo carrega o conteudo. */
.casca {
  padding: var(--casca);
  border-radius: var(--r-2xl);
  background: rgba(20, 60, 106, .06);
  box-shadow: var(--sh-xl);
}

.casca > .nucleo {
  border-radius: var(--r-nucleo);
  background: var(--paper);
  box-shadow: var(--realce);
}

/* Números em largura tabular, para o contador não "pular" enquanto anima. */
.tabular { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

/* --- Foco ---------------------------------------------------------------
   A LP de referência zerava o outline global, o que apaga a navegacao por
   teclado da página inteira. Aqui o foco e visivel e consistente. */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.secao--escura :focus-visible,
.rodape :focus-visible {
  outline-color: #FFFFFF;
}

::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

/* --- Link de pular para o conteúdo --------------------------------------- */
.pular-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-600);
  color: #FFFFFF;
  font-weight: var(--fw-semi);
  border-radius: var(--r-pill);
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
}

.pular-link:focus-visible { transform: translateY(0); }

/* --- Revelacao no scroll -------------------------------------------------
   Aplicada por ui.js via IntersectionObserver. O estado inicial só e
   aplicado quando o JS confirma que vai observar (classe js-reveal no html),
   para a página nunca ficar invisivel se o JS falhar. */
.js-reveal [data-revelar] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.js-reveal [data-revelar].is-visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-revelar] { opacity: 1; transform: none; }
}

/* --- Barra de progresso de leitura --------------------------------------- */
.progresso {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  z-index: var(--z-modal);
  background: transparent;
  pointer-events: none;
}

.progresso__barra {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  background: var(--accent-500);
  transform-origin: left center;
}


.pagina { position: relative; }