/* ==========================================================================
   WM MATIC — Base: reset moderno, tipografia, layout e utilitários mínimos
   Depende de tokens.css.
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--altura-header) + var(--esp-4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--fs-base);
  font-weight: var(--peso-texto);
  line-height: var(--lh-texto);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* --- Tipografia --- */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  color: var(--texto-forte);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); font-weight: var(--peso-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--peso-semi); }
h4 { font-size: var(--fs-h4); font-weight: var(--peso-semi); }
p, li { text-wrap: pretty; }
strong, b { font-weight: var(--peso-semi); color: var(--texto-forte); }
small { font-size: var(--fs-sm); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-rapida) var(--curva), text-decoration-color var(--dur-rapida) var(--curva);
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* Foco visível e consistente (WCAG 2.4.7 / 2.4.13) */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Texto corrido */
.prosa > * + * { margin-top: var(--esp-4); }
.prosa > * + h2 { margin-top: var(--esp-7); }
.prosa > * + h3 { margin-top: var(--esp-6); }
.prosa { max-width: var(--medida); }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li + li { margin-top: var(--esp-2); }
.prosa li::marker { color: var(--cor-laranja-texto); }

.lead { font-size: var(--fs-lg); color: var(--texto-suave); max-width: var(--medida); }

/* Rótulo em caixa-alta — eco tipográfico do descritor do logo */
.rotulo {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-sm);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-laranja-texto);
}

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

.secao { padding-block: var(--esp-secao); }
.secao--alt { background: var(--fundo-alt); }
.secao--escura {
  background: var(--fundo-escuro);
  color: var(--texto-inverso);
}
.secao__cabecalho { max-width: var(--medida); margin-bottom: var(--esp-6); }
.secao__cabecalho > * + * { margin-top: var(--esp-3); }

/* Contexto escuro: inverte papéis de cor para tudo que estiver dentro */
.secao--escura, .contexto-escuro, .site-footer, .faixa-cta, .barra-contato {
  --texto: var(--texto-inverso);
  --texto-forte: var(--cor-branco);
  --texto-suave: var(--texto-inverso-suave);
  --link: var(--link-inverso);
  --link-hover: var(--link-inverso-hover);
  --foco: var(--foco-inverso);
  --cor-linha: rgb(232 237 241 / 0.16);
}
.secao--escura .rotulo, .contexto-escuro .rotulo, .faixa-cta .rotulo { color: var(--cor-laranja); }
.secao--escura .prosa li::marker, .contexto-escuro .prosa li::marker { color: var(--cor-laranja); }

.grade {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.pilha > * + * { margin-top: var(--esp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }

/* --- Utilitários de acessibilidade --- */
.visualmente-oculto:not(:focus):not(:active) {
  position: absolute !important;
  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;
}

/* Movimento reduzido: neutraliza animações e transições residuais */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Modo de alto contraste do Windows: garante bordas e foco visíveis */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
}

@media (min-width: 75em) {
  html { scroll-padding-top: calc(var(--altura-header-desktop) + var(--esp-4)); }
}