/* Smart Pages: site público e telas do módulo site (P10). Só variáveis de tokens.css (identidade SmartHub v3.0 com
   o contraste corrigido, design-system-audit.md seção 17). Mobile first: 390, 768, 1024, 1440 e 1920 px sem rolagem
   horizontal; alvos de 44 a 48 px; foco visível também nos blocos escuros; selo com 14 px no mínimo (L.10). */

/* ------------------------------------------------------------ topo */
.topo-site { background: var(--es-fundo); border-bottom: 1px solid var(--es-linha); position: relative; z-index: 20; }
.topo-linha { display: flex; align-items: center; gap: var(--esp-3); min-height: 64px; flex-wrap: wrap; }
.topo-linha .marca { min-height: var(--alvo); margin-right: auto; }
.nav-larga { display: none; }
.nav-larga ul, .menu-movel ul { list-style: none; margin: 0; padding: 0; }
.nav-larga a, .menu-movel a {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--esp-3);
  color: var(--es-texto); text-decoration: none; border-radius: var(--raio-sm); font-weight: 500;
}
.nav-larga a:hover, .menu-movel a:hover { background: var(--es-superficie-2); color: var(--es-texto); }
.nav-larga a[aria-current="page"], .menu-movel a[aria-current="page"] { color: var(--es-destaque); text-decoration: underline; text-underline-offset: 6px; }
.topo-acoes { display: flex; align-items: center; gap: var(--esp-2); }
.topo-acoes .entrar { display: none; }
.btn-topo { min-height: var(--alvo); padding: 0 var(--esp-4); }
.menu-movel { width: 100%; order: 3; padding-bottom: var(--esp-2); }
.menu-movel > summary {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--esp-4); cursor: pointer;
  border: 1px solid var(--es-linha-forte); border-radius: var(--raio-btn); font-weight: var(--peso-ui); list-style: none;
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel[open] > summary { background: var(--es-superficie-2); }
.menu-movel nav { padding: var(--esp-2) 0 var(--esp-3); }
.menu-movel li a { width: 100%; }
@media (min-width: 560px) {
  .menu-movel { width: auto; order: 0; padding-bottom: 0; }
  .menu-movel[open] nav { position: absolute; left: var(--gutter); right: var(--gutter); top: 64px; background: var(--es-fundo);
    border-radius: var(--es-raio); box-shadow: var(--es-sombra-forte); padding: var(--esp-3); }
}
@media (min-width: 1024px) {
  .menu-movel { display: none; }
  .nav-larga { display: block; }
  .nav-larga ul { display: flex; gap: var(--esp-1); }
  .topo-acoes .entrar { display: inline-flex; align-items: center; }
}

/* ------------------------------------------------------------ migalha, avisos e seções */
.migalha { padding-top: var(--esp-3); }
.migalha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--esp-2); margin: 0; padding: 0; font-size: var(--fs-peq); }
.migalha li + li::before { content: "/"; margin-right: var(--esp-2); color: var(--es-texto-3); }
.migalha a, .migalha [aria-current="page"] { display: inline-flex; align-items: center; min-height: var(--alvo); }
.migalha [aria-current="page"] { color: var(--es-texto-2); }
.aviso-juridico { margin: var(--esp-3) 0 0; }
.secao-topo { padding-top: var(--esp-6); }
.secao-clara { background: var(--es-superficie); }
.secao-escura { background: var(--es-escuro); color: var(--es-branco-fixo); }
.secao-escura h2, .secao-escura h3 { color: var(--es-branco-fixo); }
.secao-escura .lead, .secao-escura p { color: var(--es-pagina); }
.secao-escura a { color: var(--es-suave-2); }
.secao-escura :focus-visible, .rodape-site :focus-visible { outline-color: var(--es-amarelo); }
.estreito-texto > * { max-width: 820px; }
.secao-clara .card { background: var(--es-fundo); }
.secao-clara .card.coluna-antes { background: var(--es-superficie-2); }
.lead { max-width: 64ch; }
.rotulo-secao { font-size: var(--fs-peq); font-weight: var(--peso-ui); color: var(--es-texto-2); margin-bottom: var(--esp-2); }
.lista-pontos { padding-left: var(--esp-5); }
.lista-pontos li + li { margin-top: var(--esp-2); }
.lista-check { list-style: none; padding: 0; display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lista-check li { position: relative; padding: var(--esp-3) var(--esp-4) var(--esp-3) calc(var(--esp-4) + 22px); background: var(--es-fundo);
  border-radius: var(--raio-sm); border: 1px solid var(--es-linha); }
.lista-check li::before { content: ""; position: absolute; left: var(--esp-4); top: 1.05em; width: 12px; height: 7px;
  border-left: 2px solid var(--es-sucesso); border-bottom: 2px solid var(--es-sucesso); transform: rotate(-45deg); }
.texto-longo { line-height: var(--lh-longo); }
.texto-longo h2 { margin-top: var(--esp-6); }
.texto-longo h3 { margin-top: var(--esp-5); }
.cards-3 { list-style: none; padding: 0; margin: var(--esp-5) 0 0; display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cards-3 .card p:last-child { margin-bottom: 0; }
.cards-3 h3 { font-weight: var(--peso-ui); letter-spacing: 0; }
.card-dor p { font-size: var(--fs-xl); color: var(--es-texto); }
.card { min-width: 0; }

/* ------------------------------------------------------------ selos e dicas */
.selo-demo { font-weight: var(--peso-ui); color: var(--es-texto); border-color: var(--es-texto-2); }
.aba-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.aba-topo h2, .aba-topo h3 { margin: 0; }
.com-dica { display: inline-flex; align-items: center; gap: var(--esp-1); position: relative; font-weight: var(--peso-ui); }
.dica { display: inline-block; position: relative; vertical-align: middle; }
.dica > summary {
  display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo); cursor: pointer;
  list-style: none; color: var(--es-destaque); font-weight: 700;
}
.dica > summary::-webkit-details-marker { display: none; }
.dica > summary > span[aria-hidden] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--es-linha-forte); background: var(--es-fundo); font-size: var(--fs-peq); }
.dica[open] > p {
  position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(var(--alvo) - 2px); width: min(300px, 80vw);
  margin: 0; padding: var(--esp-3) var(--esp-4); background: var(--es-escuro); color: var(--es-branco-fixo); border-radius: var(--raio-sm);
  font-size: var(--fs-peq); font-weight: 400; line-height: var(--lh-base); box-shadow: var(--es-sombra-forte); text-align: left;
}
/* Perto da borda (a dica do primeiro cartão de planos em 1440 px começava em -11 px), o site.js alinha o balão ao
   ícone em vez de centralizar. */
.dica.dica-esquerda[open] > p { left: 0; transform: none; }
.dica.dica-direita[open] > p { left: auto; right: 0; transform: none; }
/* Em tela estreita o balão centrado no ícone saía pela borda (WCAG 1.4.10): abaixo de 600 px ele vira uma faixa presa
   às margens da tela, sempre inteira à vista (revisão do MVP v1). */
@media (max-width: 599px) {
  .dica[open] > p { position: fixed; left: var(--esp-4); right: var(--esp-4); top: auto; bottom: var(--esp-4); width: auto;
    max-width: none; transform: none; z-index: 75; }
}
.secao-escura .dica > summary { color: var(--es-suave-2); }
.secao-escura .dica > summary > span[aria-hidden] { background: transparent; border-color: var(--es-suave-2); }
.secao-escura .dica[open] > p { background: var(--es-fundo); color: var(--es-texto); }

/* ------------------------------------------------------------ hero */
.hero { padding-top: var(--esp-6); }
.hero-grade { display: grid; gap: var(--esp-6); align-items: start; }
.hero-texto, .mockup { min-width: 0; }
.hero h1 { font-size: var(--fs-display); max-width: 20ch; }
.acoes-hero { margin: var(--esp-5) 0; }
.acoes-hero .btn { flex: 1 1 220px; }
.widget { margin-top: var(--esp-5); }
.widget-titulo { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: 0; }
.widget-campos { display: grid; gap: 0 var(--esp-4); }
.widget-nota { margin: var(--esp-3) 0 0; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--es-texto-3); opacity: 1; }
@media (min-width: 768px) { .widget-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .hero-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .mockup { margin-top: var(--esp-7); }
}

/* mockups (sempre com selo, L.10) */
.mockup, .perfil-mock, .conversa, .tela-demo { margin: 0; display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; }
.mockup-tela, .tela-demo > div, .conversa-tela {
  width: 100%; background: var(--es-fundo); border-radius: var(--es-raio); padding: var(--esp-4); box-shadow: var(--es-sombra);
  border: 1px solid var(--es-linha);
}
.mockup-barra { display: flex; gap: 6px; margin: 0 0 var(--esp-3); }
.mockup-barra span { width: 10px; height: 10px; border-radius: 50%; background: var(--es-linha); }
.mockup-titulo { font-weight: var(--peso-ui); margin-bottom: var(--esp-3); }
.mockup-lista { list-style: none; padding: 0; margin: 0 0 var(--esp-3); display: grid; gap: var(--esp-2); }
.mockup-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-sm);
  background: var(--es-superficie); }
.mockup-item { flex: 1 1 180px; font-weight: 500; }
.mockup-tipo { font-size: var(--fs-peq); color: var(--es-texto-2); }
.mockup-acao { margin: 0; padding: var(--esp-3); border-radius: var(--raio-sm); background: var(--es-suave); color: var(--es-destaque); font-weight: 500; }
.mockup-rotulo { display: block; font-size: var(--fs-peq); font-weight: var(--peso-ui); }
.mockup figcaption, .tela-demo figcaption, .conversa figcaption, .perfil-mock figcaption { margin: 0; }

/* ------------------------------------------------------------ simulador */
.simulador-grade { display: grid; gap: var(--esp-6); }
.simulador-grade > * { min-width: 0; }
.grupo-opcoes { border: 0; padding: 0; margin: 0 0 var(--esp-4); min-width: 0; }
.grupo-opcoes legend { font-size: var(--fs-peq); font-weight: 500; padding: 0; margin-bottom: var(--esp-2); }
.grupo-opcoes .check { align-items: center; }
.grupo-local { border: 0; padding: 0; margin: 0 0 var(--esp-4); min-width: 0; }
.grupo-local legend { font-size: var(--fs-peq); font-weight: 500; padding: 0; margin-bottom: var(--esp-2); }
.local-campos { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--esp-2); }
.local-campos input, .local-campos select {
  min-height: var(--alvo-g); padding: var(--esp-3) var(--esp-4); width: 100%; background: var(--es-fundo); color: var(--es-texto);
  border: 1px solid var(--es-linha-forte); border-radius: var(--raio-sm); font-size: var(--fs-corpo);
}
@media (min-width: 1024px) { .simulador-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ------------------------------------------------------------ como funciona */
.passos-landing, .etapas { list-style: none; padding: 0; margin: var(--esp-5) 0; display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.passos-landing p { margin: 0; }
.passo-num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--es-primaria); color: var(--es-primaria-texto); font-weight: var(--peso-ui); margin-bottom: var(--esp-3); }
.etapas h3 { font-weight: var(--peso-ui); }
.etapas a { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: var(--peso-ui); }
.faixa { list-style: none; padding: 0; margin: var(--esp-5) 0 var(--esp-3); display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.faixa li { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-pilula); background: var(--es-suave); color: var(--es-destaque);
  font-size: var(--fs-peq); font-weight: 500; }
.faixa li + li::before { content: "\2192"; margin-right: var(--esp-2); color: var(--es-destaque); }
.faixa-texto { color: var(--es-texto-2); }

/* ------------------------------------------------------------ abas de nichos (sem JS: todos os painéis visíveis) */
.abas-lista { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-4) 0; }
.abas-lista [role="tab"] {
  min-height: var(--alvo); padding: 0 var(--esp-4); border-radius: var(--raio-pilula); border: 1px solid var(--es-linha-forte);
  background: var(--es-fundo); color: var(--es-texto); font-weight: 500; cursor: pointer;
}
.abas-lista [role="tab"][aria-selected="true"] { background: var(--es-escuro); border-color: var(--es-escuro); color: var(--es-branco-fixo); }
.aba-painel { padding: var(--esp-2) 0; }
.aba-painel + .aba-painel { margin-top: var(--esp-6); }
.abas.ligadas .aba-painel + .aba-painel { margin-top: 0; }
.antes-depois, .exemplo-grade { display: grid; gap: var(--esp-4); margin: var(--esp-4) 0; }
.antes-depois ul, .exemplo-grade ul { padding-left: var(--esp-5); margin: 0; }
.antes-depois li + li, .exemplo-grade li + li { margin-top: var(--esp-2); }
.exemplo-grade h3 { font-weight: var(--peso-ui); letter-spacing: 0; }
.coluna-antes { background: var(--es-superficie-2); }
.coluna-depois { background: var(--es-fundo); border: 1px solid var(--es-linha-forte); }
@media (min-width: 768px) { .antes-depois, .exemplo-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ estratégia */
.cadeia { list-style: none; padding: 0; margin: var(--esp-5) 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); counter-reset: elo; }
.cadeia li { counter-increment: elo; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-pilula); background: var(--es-fundo);
  border: 1px solid var(--es-linha-forte); font-weight: 500; }
.cadeia li::before { content: counter(elo) ". "; color: var(--es-texto-2); }
.exemplo-cadeia { display: grid; gap: var(--esp-2); margin: 0 0 var(--esp-3); }
.exemplo-cadeia div { display: grid; gap: var(--esp-1); padding: var(--esp-3); background: var(--es-fundo); border-radius: var(--raio-sm); }
.exemplo-cadeia dt { font-size: var(--fs-peq); color: var(--es-texto-2); font-weight: var(--peso-ui); }
.exemplo-cadeia dd { margin: 0; }
@media (min-width: 768px) { .exemplo-cadeia div { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; } }

/* ------------------------------------------------------------ SEO e GEO, perfil, por dentro */
.termos-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-4); }
.termos-linha > a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.secao-escura .link-claro { font-weight: var(--peso-ui); display: inline-flex; align-items: center; min-height: var(--alvo); }
.perfil-grade, .whatsapp-grade { display: grid; gap: var(--esp-6); align-items: start; }
.perfil-grade > *, .whatsapp-grade > * { min-width: 0; }
.perfil-mock { background: var(--es-fundo); border: 1px solid var(--es-linha); }
.perfil-mock p { margin-bottom: var(--esp-2); }
.perfil-nome { font-size: var(--fs-xl); font-weight: var(--peso-ui); }
.perfil-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.perfil-botoes span { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-pilula); border: 1px solid var(--es-linha-forte); font-size: var(--fs-peq); }
.por-dentro { display: grid; gap: var(--esp-5); margin-top: var(--esp-5); align-items: start; }
.por-dentro > * { min-width: 0; }
.tela-demo-corpo { display: grid; gap: var(--esp-4); }
.tela-demo-corpo > * { min-width: 0; }
.tela-demo-menu { list-style: none; padding: 0; margin: 0; display: none; font-size: var(--fs-peq); }
.tela-demo-menu li { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-sm); color: var(--es-texto-2); }
.tela-demo-menu li.ativo { background: var(--es-suave); color: var(--es-destaque); font-weight: var(--peso-ui); }
.tela-celular > div { max-width: 340px; }
@media (min-width: 768px) {
  .perfil-grade, .whatsapp-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tela-demo-corpo { grid-template-columns: 200px minmax(0, 1fr); }
  .tela-demo-menu { display: block; }
}
@media (min-width: 1024px) { .por-dentro { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* ------------------------------------------------------------ planos (tudo do catálogo) */
.planos { list-style: none; padding: 0; margin: var(--esp-5) 0; display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }
.plano { display: flex; flex-direction: column; gap: var(--esp-2); background: var(--es-fundo); border: 1px solid var(--es-linha);
  border-radius: var(--es-raio); padding: var(--esp-5); min-width: 0; }
.plano-destaque { border: 2px solid var(--es-primaria); box-shadow: var(--es-sombra); }
.plano-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.plano-nome { margin: 0; font-size: var(--fs-2xl); font-weight: var(--peso-ui); letter-spacing: 0; }
.pilula.destaque { background: var(--es-amarelo); color: var(--es-amarelo-texto); margin: 0; }
.plano-descricao { color: var(--es-texto-2); }
.plano-preco { display: flex; align-items: baseline; gap: var(--esp-2); margin: 0; }
.plano-preco .valor { font-size: var(--fs-kpi); font-weight: var(--peso-titulo); line-height: 1.1; }
.plano-preco .periodo { color: var(--es-texto-2); }
.plano-itens { list-style: none; padding: 0; margin: var(--esp-3) 0 var(--esp-4); display: grid; gap: var(--esp-2); flex: 1; align-content: start; }
.plano-itens li, .lista-incluido li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); }
.plano-itens li > span:first-child, .lista-incluido li > span:first-child { flex: 1 1 160px; }
.plano .btn { margin-top: auto; }
.plano .peq.centro { margin: 0; }
.em-implantacao > span:first-child { color: var(--es-texto-2); }
.todos-planos { margin: var(--esp-5) 0; }
.lista-incluido { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lista-incluido li { padding: var(--esp-2) var(--esp-3); background: var(--es-fundo); border-radius: var(--raio-sm); }
.lista-incluido .incluido > span:first-child::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-right: var(--esp-2);
  border-left: 2px solid var(--es-sucesso); border-bottom: 2px solid var(--es-sucesso); transform: rotate(-45deg) translateY(-2px); }
.acordeao { border-top: 1px solid var(--es-linha-forte); margin: var(--esp-4) 0; }
.acordeao > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: var(--alvo-g);
  padding: var(--esp-3) 0; cursor: pointer; font-weight: var(--peso-ui); list-style: none; }
.acordeao > summary::-webkit-details-marker { display: none; }
.acordeao > summary::after { content: "+"; font-size: var(--fs-2xl); line-height: 1; color: var(--es-destaque); }
.acordeao[open] > summary::after { content: "\2212"; }
.tabela-rolagem { max-width: 100%; overflow-x: auto; }
.tabela th[scope="row"] { font-weight: 500; color: var(--es-texto); font-size: var(--fs-corpo); }
.comparativo td.nao-incluido { color: var(--es-texto-2); }
.comparativo td .selo { margin-top: var(--esp-1); }
.tabela .selo { white-space: nowrap; }
@media (max-width: 767px) {
  .tabela th[scope="row"] { display: block; border: 0; padding: var(--esp-1) 0; }
  .pagina-site .tabela td { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: var(--esp-3); }
  .pagina-site .tabela td::before { overflow-wrap: normal; }
  .celula { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); align-items: center; }
}
.definicoes { margin-top: var(--esp-5); }
.definicoes dl, .glossario, .quadro-contrato { display: grid; gap: var(--esp-3); margin: 0; }
.definicao { padding: var(--esp-3) var(--esp-4); background: var(--es-fundo); border-radius: var(--raio-sm); border: 1px solid var(--es-linha); }
.definicao dt { font-weight: var(--peso-ui); margin-bottom: var(--esp-1); }
.definicao dd { margin: 0; }
.por-plano { display: block; margin-top: var(--esp-2); color: var(--es-texto-2); font-size: var(--fs-peq); }
.lista-espera { margin-top: var(--esp-6); padding: var(--esp-5); background: var(--es-fundo); border-radius: var(--es-raio);
  border: 1px solid var(--es-linha-forte); max-width: 720px; }
.lista-espera h3 { font-size: var(--fs-2xl); }
.lista-espera .alerta.ok { margin: var(--esp-4) 0 0; }

/* ------------------------------------------------------------ WhatsApp (demonstração) */
.conversa-tela { background: var(--es-superficie-2); display: flex; flex-direction: column; gap: var(--esp-2); }
.conversa-topo { display: flex; align-items: center; gap: var(--esp-2); font-weight: var(--peso-ui); margin: 0 0 var(--esp-2); }
.ponto-wa { width: 10px; height: 10px; border-radius: 50%; background: var(--es-wa-marca); }
.balao { margin: 0; padding: var(--esp-3) var(--esp-4); background: var(--es-fundo); border-radius: var(--esp-1) var(--raio-sm) var(--raio-sm) var(--raio-sm); max-width: 92%; }

/* ------------------------------------------------------------ perguntas e CTA final */
.faq { margin-top: var(--esp-4); }
.faq-item { margin: 0; }
.faq-item:last-child { border-bottom: 1px solid var(--es-linha-forte); }
.faq-item p { color: var(--es-texto-2); }
.cta-final h2 { margin-left: auto; margin-right: auto; max-width: 24ch; }
.btn-claro { background: var(--es-amarelo); color: var(--es-amarelo-texto); }
.btn-claro:hover { background: var(--es-fundo); color: var(--es-texto); }
.secao-escura .btn-claro { color: var(--es-amarelo-texto); }
.cta-rodape { margin: var(--esp-5) auto 0; font-size: var(--fs-peq); }

/* ------------------------------------------------------------ páginas internas */
.indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--esp-2); padding: 0; }
.indice a { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--esp-4); border-radius: var(--raio-pilula);
  border: 1px solid var(--es-linha-forte); background: var(--es-fundo); text-decoration: none; color: var(--es-texto); }
.texto-legal .tabela, .texto-legal .tabela th[scope="row"] { font-size: var(--fs-peq); }
.campo-dupla { display: grid; gap: 0 var(--esp-3); grid-template-columns: 110px minmax(0, 1fr); }
code { font-family: ui-monospace, monospace; font-size: var(--fs-peq); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ rodapé */
.rodape-site { margin-top: 0; padding: var(--esp-7) 0 var(--esp-5); background: var(--es-escuro); color: var(--es-pagina); }
.rodape-site a { color: var(--es-branco-fixo); display: inline-flex; align-items: center; min-height: var(--alvo); }
.rodape-grade { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rodape-grade > * { min-width: 0; }
.rodape-grade ul { list-style: none; padding: 0; margin: 0; }
.rodape-grade p { font-size: var(--fs-peq); margin-bottom: var(--esp-2); }
.rodape-nome { display: flex; align-items: center; gap: var(--esp-2); font-weight: var(--peso-ui); color: var(--es-branco-fixo); }
.rodape-nome img { width: 22px; height: 24px; }
.rodape-titulo { font-weight: var(--peso-ui); color: var(--es-branco-fixo); }
.rodape-base { margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--es-texto-3); }
.rodape-base p { margin: 0 0 var(--esp-1); font-size: var(--fs-peq); }

/* ------------------------------------------------------------ telas do módulo site na área do cliente e no backoffice */
.site-painel { display: grid; gap: var(--esp-4); }
.site-painel > * { min-width: 0; }
.site-painel .card h2, .site-painel .card h3 { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: 0; }
.site-painel .acao { border: 2px solid var(--es-primaria); }
.site-painel .linha-estado { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.site-painel .implantacao { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.site-painel dl { display: grid; gap: var(--esp-1); margin: 0; }
.site-painel dt { font-size: var(--fs-peq); color: var(--es-texto-2); }
.site-painel dd { margin: 0 0 var(--esp-2); }
.site-admin .filtros { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; margin-bottom: var(--esp-4); }
.site-admin .filtros .campo { margin: 0; min-width: 200px; }
@media (min-width: 1024px) { .site-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-painel .largo { grid-column: 1 / -1; } }