/* Variáveis copiadas de design/tokens/tokens.css pelo site/gerar.mjs. */
:root {
  --borda-fina: 1px;
  --camada-dica: 50;
  --controle-toque-minimo: 44px;
  --cor-acao: var(--cor-laranja-700);
  --cor-acao-hover: var(--cor-laranja-800);
  --cor-borda: var(--cor-neutro-200);
  --cor-borda-destaque: var(--cor-laranja-200);
  --cor-destaque-suave: var(--cor-laranja-50);
  --cor-foco: var(--cor-laranja-600);
  --cor-fundo-pagina: var(--cor-neutro-100);
  --cor-laranja-200: #FED2BC;
  --cor-laranja-50: #FFF4F0;
  --cor-laranja-600: #D45E06;
  --cor-laranja-700: #B54B0C;
  --cor-laranja-800: #943C0B;
  --cor-menu: var(--cor-neutro-150);
  --cor-neutro-0: #FFFFFF;
  --cor-neutro-100: #F3F2EE;
  --cor-neutro-150: #ECEBE6;
  --cor-neutro-200: #E1DFD8;
  --cor-neutro-600: #5F5D57;
  --cor-neutro-900: #1C1B19;
  --cor-superficie: var(--cor-neutro-0);
  --cor-texto: var(--cor-neutro-900);
  --cor-texto-secundario: var(--cor-neutro-600);
  --espaco-12: 12px;
  --espaco-16: 16px;
  --espaco-2: 2px;
  --espaco-20: 20px;
  --espaco-24: 24px;
  --espaco-32: 32px;
  --espaco-4: 4px;
  --espaco-40: 40px;
  --espaco-48: 48px;
  --espaco-8: 8px;
  --fonte-corpo-forte-peso: 600;
  --fonte-corpo-linha: 22px;
  --fonte-corpo-peso: 400;
  --fonte-corpo-tamanho: 14px;
  --fonte-legenda-linha: 18px;
  --fonte-legenda-tamanho: 13px;
  --fonte-titulo-cartao-linha: 22px;
  --fonte-titulo-cartao-peso: 600;
  --fonte-titulo-cartao-tamanho: 15px;
  --fonte-titulo-grande-linha: 40px;
  --fonte-titulo-grande-peso: 700;
  --fonte-titulo-grande-tamanho: 32px;
  --fonte-titulo-pagina-linha: 32px;
  --fonte-titulo-pagina-peso: 700;
  --fonte-titulo-pagina-tamanho: 24px;
  --fonte-titulo-secao-linha: 26px;
  --fonte-titulo-secao-peso: 700;
  --fonte-titulo-secao-tamanho: 18px;
  --largura-cadastro: 760px;
  --largura-conteudo: 1200px;
  --movimento-rapido: 150ms;
  --raio-cartao: 14px;
  --raio-controle: 10px;
  --raio-folha: 18px;
  --sombra-media: 0 8px 24px rgba(28,27,25,0.12);
  --vitrine-logo-pequeno: 32px;
}

/* Site público da Comercializy. Cores, espaços e medidas só pelos tokens: o site/gerar.mjs põe no começo deste
   arquivo as variáveis de design/tokens/tokens.css que ele usa. Fonte do sistema, sem baixar fonte. Celular primeiro;
   os pontos de quebra do design system ficam só nos @media. */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Coluna que ocupa a tela toda, para o rodapé ficar no fim mesmo nas páginas curtas. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fonte-corpo-tamanho);
  font-weight: var(--fonte-corpo-peso);
  line-height: var(--fonte-corpo-linha);
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; }

a {
  color: var(--cor-acao);
  text-decoration-line: underline;
  text-underline-offset: var(--espaco-2);
}
a:hover { color: var(--cor-acao-hover); }

:focus-visible {
  outline: var(--espaco-2) solid var(--cor-foco);
  outline-offset: var(--espaco-2);
}

/* Atalho para quem usa o teclado: só aparece com o foco. */
.pular {
  position: absolute;
  top: var(--espaco-8);
  left: var(--espaco-16);
  z-index: var(--camada-dica);
  display: inline-flex;
  align-items: center;
  min-height: var(--controle-toque-minimo);
  padding-inline: var(--espaco-16);
  background: var(--cor-superficie);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-media);
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* O cabeçalho e o rodapé vão até a largura do conteúdo; o texto fica numa coluna de leitura. */
.faixa {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--espaco-16);
}
.coluna {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura-cadastro);
  margin-inline: auto;
  padding: var(--espaco-24) var(--espaco-16) var(--espaco-48);
}

.topo {
  background: var(--cor-superficie);
  border-bottom: var(--borda-fina) solid var(--cor-borda);
}
.topo .faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4) var(--espaco-16);
  padding-block: var(--espaco-8);
}
.marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--controle-toque-minimo);
  border-radius: var(--raio-controle);
}
.marca img {
  width: auto;
  height: var(--vitrine-logo-pequeno);
}

/* Menu do cabeçalho e do rodapé, com a área de toque mínima em cada link. A margem negativa alinha o texto dos links com a borda da faixa. */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
  margin: 0 calc(-1 * var(--espaco-12));
  padding: 0;
  list-style: none;
}
.menu li { margin: 0; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--controle-toque-minimo);
  padding-inline: var(--espaco-12);
  border-radius: var(--raio-controle);
  color: var(--cor-texto);
  font-weight: var(--fonte-corpo-forte-peso);
  text-decoration: none;
  transition: background-color var(--movimento-rapido);
}
.menu a:hover { background: var(--cor-menu); color: var(--cor-texto); }
.menu a[aria-current='page'] { background: var(--cor-destaque-suave); color: var(--cor-acao); }

.rodape {
  background: var(--cor-fundo-pagina);
  border-top: var(--borda-fina) solid var(--cor-borda);
  color: var(--cor-texto-secundario);
}
.rodape .faixa { padding-block: var(--espaco-24) var(--espaco-32); }
.empresa {
  margin-top: var(--espaco-16);
  font-size: var(--fonte-legenda-tamanho);
  font-style: normal;
  line-height: var(--fonte-legenda-linha);
}

h1, h2, h3 { margin: 0; color: var(--cor-texto); }
h1 {
  font-size: var(--fonte-titulo-pagina-tamanho);
  font-weight: var(--fonte-titulo-pagina-peso);
  line-height: var(--fonte-titulo-pagina-linha);
}
h2 {
  margin: var(--espaco-32) 0 var(--espaco-8);
  font-size: var(--fonte-titulo-secao-tamanho);
  font-weight: var(--fonte-titulo-secao-peso);
  line-height: var(--fonte-titulo-secao-linha);
}
h3 {
  margin: var(--espaco-20) 0 var(--espaco-4);
  font-size: var(--fonte-titulo-cartao-tamanho);
  font-weight: var(--fonte-titulo-cartao-peso);
  line-height: var(--fonte-titulo-cartao-linha);
}
p, ul, ol, dl { margin: 0 0 var(--espaco-12); }
h1 + p { margin-top: var(--espaco-12); }
ul, ol { padding-inline-start: var(--espaco-20); }
li + li { margin-top: var(--espaco-4); }
li > ul { margin: var(--espaco-4) 0 0; }
strong { font-weight: var(--fonte-corpo-forte-peso); }

.versao {
  margin: var(--espaco-4) 0 var(--espaco-24);
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-legenda-tamanho);
  line-height: var(--fonte-legenda-linha);
}
.nota {
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-legenda-tamanho);
  line-height: var(--fonte-legenda-linha);
}
/* CNPJ, CEP e telefone sem quebra no meio. */
.junto { white-space: nowrap; }
/* Link sozinho na linha: área de toque mínima. */
.toque {
  display: inline-flex;
  align-items: center;
  min-height: var(--controle-toque-minimo);
}

/* Início */
.chamada {
  margin-bottom: var(--espaco-8);
  padding: var(--espaco-24) var(--espaco-20);
  background: var(--cor-destaque-suave);
  border: var(--borda-fina) solid var(--cor-borda-destaque);
  border-radius: var(--raio-folha);
}
.chamada .versao { margin-bottom: var(--espaco-16); }
.abertura {
  margin: 0;
  font-size: var(--fonte-titulo-secao-tamanho);
  line-height: var(--fonte-titulo-secao-linha);
}
.cartoes {
  display: grid;
  gap: var(--espaco-12);
  margin: var(--espaco-16) 0;
  padding: 0;
  list-style: none;
}
.cartoes li + li { margin-top: 0; }
.cartao {
  padding: var(--espaco-16) var(--espaco-20);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-cartao);
}
.cartao h3 { margin-top: 0; }
.cartao p { margin: 0; }

/* Contato: o rótulo em cima do dado. */
.dados {
  display: grid;
  gap: var(--espaco-4);
}
.dados dt {
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-legenda-tamanho);
  font-weight: var(--fonte-corpo-forte-peso);
  line-height: var(--fonte-legenda-linha);
}
.dados dd { margin: 0 0 var(--espaco-12); }

@media (min-width: 768px) {
  .faixa { padding-inline: var(--espaco-24); }
  .coluna { padding: var(--espaco-40) var(--espaco-24) var(--espaco-48); }
  h1 {
    font-size: var(--fonte-titulo-grande-tamanho);
    font-weight: var(--fonte-titulo-grande-peso);
    line-height: var(--fonte-titulo-grande-linha);
  }
  .chamada { padding: var(--espaco-32); }
  .cartoes { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}