/* Página pública do Kairstrom. Só disposição: cor, tipo, espaço e raio vêm dos
   tokens (--k-*) e os componentes de componentes.css (.k-*). */

/* Alvo de toque de 44 px, como no modo leito (design system, seção 6). */
:root { --k-alvo-min: 44px; }

/* Pular para o conteúdo: fora da tela até receber foco. */
.site-pular:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

a.k-botao { text-decoration: none; }
.site-cta { padding-inline: var(--k-espaco-4); font-size: var(--k-tamanho-16); }

.site-largura { max-width: 72rem; margin-inline: auto; padding-inline: var(--k-espaco-4); }
main p, main li { max-width: var(--k-medida-prosa); }

.site-topo { border-bottom: 1px solid var(--k-linha); }
.site-topo__conteudo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0 var(--k-espaco-6);
}
.site-marca { margin: 0; font-size: var(--k-tamanho-21); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--k-espaco-4); margin: 0; padding: 0; list-style: none; }
.site-nav a, .site-rodape a { display: inline-flex; align-items: center; min-height: var(--k-alvo-min); }
/* Tela estreita: só "Contato" no topo; as seções seguem na rolagem. */
@media (max-width: 40rem) {
  .site-nav li:not(:last-child) { display: none; }
}

/* Títulos: 36 e 24 px na tela estreita; 48 e 36 px a partir de 768 px. */
h1 { margin: var(--k-espaco-3) 0; font-size: var(--k-tamanho-36); }
h2 { margin: 0 0 var(--k-espaco-6); font-size: var(--k-tamanho-24); }
h3 { font-size: var(--k-tamanho-18); }
@media (min-width: 48rem) {
  h1 { font-size: var(--k-tamanho-48); }
  h2 { font-size: var(--k-tamanho-36); }
}

/* Abertura: texto e ilustração lado a lado; uma coluna na tela estreita. */
.site-abertura {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  align-items: center; gap: var(--k-espaco-8); padding-block: var(--k-espaco-12);
}
.site-lide { font-size: var(--k-tamanho-21); }
.site-nota { color: var(--k-texto-secundario); font-size: var(--k-tamanho-14); }
.site-figura { display: grid; gap: var(--k-espaco-2); margin: 0; }
.site-figura__corpo { display: grid; gap: var(--k-espaco-3); padding: var(--k-espaco-4); }

.site-secao { padding-block: var(--k-espaco-16); border-top: 1px solid var(--k-linha); }
.site-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--k-espaco-4); margin: var(--k-espaco-6) 0; padding: 0; list-style: none;
}
.site-grade p { margin: 0; }
.site-nome { margin: 0 0 var(--k-espaco-6); font-size: var(--k-tamanho-48); }

.site-rodape {
  padding-block: var(--k-espaco-8); border-top: 1px solid var(--k-linha);
  color: var(--k-texto-secundario); font-size: var(--k-tamanho-14);
}
.site-rodape p { margin: 0; }