/* ============================================================
   BASE.CSS — reset, tipografia base, grade, utilidades
   ------------------------------------------------------------
   REGRA DE TOKEN: este arquivo nao contem nenhum valor literal
   de cor, familia tipografica, tamanho de fonte, peso, entrelinha,
   espacamento, raio, sombra ou largura de traco.
   Todo valor literal vive nos arquivos /css/direcao-*.css.
   ============================================================ */

/* ---------- RESET ---------- */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: var(--esp-0);
  padding: var(--esp-0);
}

ul[class],
ol[class] {
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* O cabecalho fica preso no topo: sem isto, toda ancora interna
     pousa por baixo dele. */
  scroll-padding-top: var(--esp-8);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

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

/* ---------- TIPOGRAFIA BASE ---------- */

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  font-weight: var(--peso-corpo);
  line-height: var(--el-corpo);
  letter-spacing: var(--ll-corpo);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-titulo);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--peso-display);
  line-height: var(--el-display);
  letter-spacing: var(--ll-display);
}

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

p {
  text-wrap: pretty;
}

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

a {
  color: var(--cor-acao);
  text-decoration-thickness: var(--borda-fina);
  text-underline-offset: var(--esp-1);
}

a:hover {
  color: var(--cor-acao-hover);
}

/* ---------- FOCO VISIVEL ---------- */

:focus-visible {
  outline: var(--borda-grossa) solid var(--cor-foco);
  outline-offset: var(--esp-1);
  border-radius: var(--raio-p);
}

/* ---------- GRADE E CONTAINER ---------- */
/* Layout intrinsecamente responsivo: nenhuma media query de largura.
   Mobile primeiro por consequencia — as colunas so aparecem quando
   ha espaco para o token de largura minima. */

.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
}

.container--estreito {
  max-width: var(--largura-estreita);
}

.grade {
  display: grid;
  gap: var(--respiro-grade);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-coluna), 100%), 1fr));
}

.grade--densa {
  gap: var(--esp-4);
}

/* Grade de cartoes de produto: com auto-fill as colunas vazias
   continuam existindo, e um cartao sozinho fica com a largura de
   uma coluna em vez de esticar pela pagina inteira (auto-fit).
   Use quando a grade pode ter um item so, como a lista de cursos. */
.grade--fixa {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--largura-min-coluna), 100%), 1fr));
}

/* Grade de kits (entre-elas.html): dois por linha, no maximo. Ate
   11/10/2026 eram quatro, como no modelo; com os textos da Cris, cada
   cartao ficava com uns 290px e o texto virava uma tira estreita. A
   coluna nunca e menor que metade da linha (o max), nem que a minima
   das outras grades; quando duas dela nao cabem, um por linha. */
.grade--kits {
  grid-template-columns: repeat(auto-fill, minmax(min(max(var(--largura-min-coluna), (100% - var(--respiro-grade)) / 2), 100%), 1fr));
}

.pilha {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.pilha--solta {
  gap: var(--esp-6);
}

.linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}

/* ---------- UTILIDADES ---------- */

.medida {
  max-width: var(--medida-texto);
}

.centro {
  margin-inline: auto;
}

.so-leitor-de-tela {
  position: absolute;
  width: var(--borda-fina);
  height: var(--borda-fina);
  padding: var(--esp-0);
  margin: var(--esp-0);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}