/* Smart Pages: site público e telas do módulo site (P10). Só variáveis de tokens.css: identidade EcomSmart v4 aplicada
   como no tema do ecomsmart.com.br (ADR 0051): só tema claro, hero centrado com selos, rótulo com fio curto, painéis
   pastel .recurso (azul, creme, rosa, menta) com a tela de exemplo num cartão branco, cartões com a Linha e sem sombra
   pesada, chamada final num bloco Céu, rodapé num bloco Papel. Mobile first: 390, 768, 1024, 1440 e 1920 px sem rolagem
   horizontal; alvos de 44 a 48 px; foco visível; selo com 14 px no mínimo (L.10). */

/* topo e rodapé: base.css (casca pública, a mesma das páginas que ficam no app; v2.2) */

/* ------------------------------------------------------------ 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 a { min-width: var(--alvo); color: var(--es-texto-2); }
.migalha a:hover { color: var(--es-destaque); }
.migalha [aria-current="page"] { color: var(--es-texto); font-weight: 500; }
.aviso-juridico { margin: var(--esp-3) 0 0; }
/* abertura das páginas internas: bloco Céu arredondado, com a moldura branca em volta (o "hero" das internas do tema) */
.secao-topo { width: calc(100% - 2 * var(--moldura)); max-width: calc(var(--container) - 2 * var(--gutter));
  margin: var(--esp-2) auto 0; padding-block: var(--esp-7); background: var(--es-suave); border: 1px solid var(--es-primaria-linha);
  border-radius: var(--raio-xl); }
@media (min-width: 768px) { .secao-topo { padding-block: var(--esp-8); border-radius: var(--raio-2xl); } }
.secao-topo h1 { max-width: 22ch; }
.secao-topo .lead { color: var(--es-texto-2); }
.secao-topo .alerta.info { background: var(--es-fundo); }
.secao-topo.texto-legal { background: var(--es-fundo); border-color: transparent; padding-block: var(--esp-6) var(--sec); }
.secao-clara { background: var(--es-superficie); }
/* seção que é só um painel pastel: o painel já separa, a seção não precisa do respiro inteiro */
.secao-recurso { padding-block: var(--esp-5); }
@media (min-width: 768px) { .secao-recurso { padding-block: var(--esp-6); } }
.estreito-texto > * { max-width: 820px; }
.secao-clara .card { background: var(--es-fundo); border-color: var(--es-linha); }
.secao-clara .card.coluna-antes { background: var(--es-superficie-2); border-color: transparent; }
.lead { max-width: 64ch; }
.cab-secao { max-width: 760px; margin-bottom: var(--esp-6); }
.cab-secao.centro { margin-inline: auto; }
.cab-secao h2 { margin-bottom: var(--esp-3); }
.cab-secao .lead { margin-bottom: 0; }
.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-pontos li::marker { color: var(--es-primaria); }
/* lista com a marca de verificação num círculo (no painel pastel, na cor do painel: --ac) */
.lista, .lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.lista li, .lista-check li { position: relative; padding-left: 32px; color: var(--es-texto); max-width: none; }
.lista li::before, .lista-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ac, var(--es-primaria)); }
.lista li::after, .lista-check li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 6px); width: 8px; height: 4px;
  border-left: 2px solid var(--es-branco-fixo); border-bottom: 2px solid var(--es-branco-fixo); transform: rotate(-45deg); }
.lista-check { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--esp-4) var(--esp-5); }
.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.01em; }
/* dores: fio e tipografia no lugar de cartão (home v5 do ecomsmart.com.br) */
.card-dor { background: transparent; border: 0; border-top: 2px solid var(--es-texto); border-radius: 0; padding: var(--esp-4) 0 0; }
.secao-clara .card.card-dor { background: transparent; border-color: var(--es-texto); border-width: 2px 0 0; }
.card-dor p { font-size: var(--fs-xl); font-weight: 500; line-height: 1.35; color: var(--es-texto); letter-spacing: -0.01em; }
.card { min-width: 0; }

/* ------------------------------------------------------------ selos e dicas */
/* Selo de demonstração (L.10, v2.2): o mesmo componente nas duas frentes (site e app), um por figura, sempre no canto
   superior direito da moldura (.moldura-barra, .aba-topo ou sobre o canto do print). Pílula de 32 px, borda #C9D1DF,
   fundo branco, texto navy de 14 px e peso 600, bolinha azul de 8 px. Dois textos: "Exemplo ilustrativo" (tela
   desenhada em HTML) e "Conta de demonstração com dados fictícios" (print real). */
.selo-demo { flex: none; min-height: 32px; padding: 0 var(--esp-3); font-weight: var(--peso-ui); color: var(--es-texto);
  border-color: var(--es-linha-media); background: var(--es-fundo); white-space: nowrap; }
.selo-demo::before { width: 8px; height: 8px; }
.moldura-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin: 0 0 var(--esp-3);
  padding-bottom: var(--esp-3); border-bottom: 1px solid var(--es-linha); font-size: var(--fs-peq); color: var(--es-texto-2); }
.moldura-barra > span:first-child { min-width: 0; }
.aba-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 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-media); 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-md);
  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; }
}
[data-area="app"][data-tema="escuro"] .dica[open] > p { background: var(--es-superficie-2); color: var(--es-texto); border: 1px solid var(--es-linha-forte); }

/* ------------------------------------------------------------ hero (centrado: rótulo, título, subtítulo, botões, selos e o palco) */
.hero { padding-top: var(--esp-7); padding-bottom: var(--esp-6); }
.hero-grade { display: grid; justify-items: center; gap: var(--esp-7); }
.hero-texto, .hero-palco > * { min-width: 0; }
.hero-texto { display: grid; justify-items: center; text-align: center; max-width: 980px; }
.hero-texto .rotulo { margin-bottom: var(--esp-4); }
.hero h1 { font-size: var(--fs-display); font-weight: var(--peso-display); line-height: 1.04; letter-spacing: -0.038em; max-width: 21ch;
  margin-bottom: var(--esp-5); }
.hero .lead { margin: 0 auto; max-width: 60ch; }
.acoes-hero { justify-content: center; margin: var(--esp-6) 0 0; }
.acoes-hero .btn { flex: 0 1 auto; min-height: 50px; }
@media (max-width: 559px) { .acoes-hero { width: 100%; } .acoes-hero .btn { flex: 1 1 100%; } }
.selos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin: var(--esp-5) 0 0; padding: 0; }
.selos li { max-width: none; }
.selos .selo { color: var(--es-texto-2); }
/* palco: o formulário do diagnóstico e o exemplo do painel num campo Céu, como a imagem de produto do hero v5.1 */
.hero-palco { display: grid; gap: var(--esp-5); width: 100%; padding: var(--esp-4); background: var(--pastel-azul);
  border: 1px solid var(--es-primaria-linha); border-radius: var(--raio-xl); text-align: left; }
@media (min-width: 768px) { .hero-palco { padding: var(--esp-6); border-radius: var(--raio-2xl); } }
@media (min-width: 1024px) { .hero-palco { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: var(--esp-6); } }
.widget { margin: 0; box-shadow: var(--es-sombra); }
.widget-titulo { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: -0.01em; }
.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; }
/* três campos lado a lado quando o palco está empilhado (768 a 1023) ou largo (1280 ou mais); dois de 1024 a 1279 */
@media (min-width: 768px) { .widget-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* o componente do P03 (montarSimulador) troca o formulário sem JS do hero: a mesma grade e a mesma altura, sem salto de
   layout (segmento e serviço na largura toda e estado ao lado da cidade no celular; uma linha só a partir de 768 px) */
.widget .diag-simulador { display: grid; gap: 0 var(--esp-2); grid-template-columns: 7.5rem minmax(0, 1fr); }
.widget .diag-simulador > .campo:nth-child(-n+2), .widget .diag-simulador > .btn { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .widget .diag-simulador { gap: 0 var(--esp-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7.5rem minmax(0, 1fr); }
  .widget .diag-simulador > .campo:nth-child(-n+2) { grid-column: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* coluna do palco estreita: os dois formulários em duas linhas, sem quebrar os rótulos */
  .widget-campos, .widget .diag-simulador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mockups (sempre com selo, L.10): cartão branco com a Linha, sem moldura de janela */
.mockup, .perfil-mock, .conversa { margin: 0; display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; }
.mockup-tela, .conversa-tela {
  width: 100%; background: var(--es-fundo); border-radius: var(--raio-lg); padding: var(--esp-4); box-shadow: var(--es-sombra);
  border: 1px solid 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-md);
  border: 1px solid var(--es-linha); background: var(--es-fundo); max-width: none; }
.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-md); 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, .conversa figcaption, .perfil-mock figcaption { margin: 0; }

/* ------------------------------------------------------------ painéis pastel (.recurso, padrão do grupo vindo do EcomIA)
   fundo pastel, etiqueta escura, título, lista com a marca da cor do painel e, do outro lado, a tela de exemplo num cartão
   branco sobre um cartão pastel um pouco inclinado (só o de trás: o texto da tela fica reto). .inv troca o lado. */
.azul { --c: var(--pastel-azul); --p: var(--pastel-azul-p); --a: var(--pastel-azul-a); --ac: var(--a); }
.creme { --c: var(--pastel-creme); --p: var(--pastel-creme-p); --a: var(--pastel-creme-a); --ac: var(--a); }
.rosa { --c: var(--pastel-rosa); --p: var(--pastel-rosa-p); --a: var(--pastel-rosa-a); --ac: var(--a); }
.menta { --c: var(--pastel-menta); --p: var(--pastel-menta-p); --a: var(--pastel-menta-a); --ac: var(--a); }
.recurso { position: relative; border-radius: var(--raio-xl); padding: var(--esp-5) var(--esp-4); background: var(--c); border: 1px solid var(--es-linha); }
@media (min-width: 768px) { .recurso { padding: var(--esp-7); border-radius: var(--raio-2xl); } }
.recurso .g { display: grid; gap: var(--esp-6); align-items: center; }
.recurso .g > * { min-width: 0; }
@media (min-width: 1024px) { .recurso .g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-8); } .recurso.inv .txt { order: 2; } }
.recurso h2 { max-width: 20ch; font-size: clamp(26px, min(3vw, 5.4vh), 36px); margin-top: var(--esp-4); }
.recurso .txt > p { max-width: 52ch; }
.recurso .txt > .lead { color: var(--es-texto); }
.recurso .lista { margin: var(--esp-5) 0; }
.recurso .termos-linha { margin-bottom: 0; }
.tag { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 0 var(--esp-3); border-radius: var(--raio-sm);
  background: var(--es-texto); color: var(--es-fundo); font-size: 13px; font-weight: var(--peso-ui); letter-spacing: 0; }
.btn.ac { background: var(--ac); color: var(--es-branco-fixo); }
.btn.ac:hover { background: var(--es-texto); color: var(--es-branco-fixo); }
.palco { position: relative; margin: var(--esp-4); }
.palco::before { content: ""; position: absolute; inset: calc(var(--esp-4) * -1); border-radius: var(--raio-xl); background: var(--p);
  transform: rotate(-2deg); }
.palco > * { position: relative; }
.palco .card, .palco .tela, .palco .mockup-tela, .palco .conversa-tela { background: var(--es-fundo); border: 1px solid var(--es-linha);
  box-shadow: var(--es-sombra-forte); }
.palco .card { border-radius: var(--raio-lg); }
.palco figure { margin: 0; }
@media (max-width: 559px) { .palco { margin: var(--esp-3) var(--esp-2); } .palco::before { inset: calc(var(--esp-3) * -1); transform: rotate(-1.5deg); } }
@media (prefers-reduced-motion: no-preference) {
  .palco::before { transition: transform var(--es-dur-3) var(--es-ease); }
  .recurso:hover .palco::before { transform: rotate(0deg); }
}

/* ------------------------------------------------------------ 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);
}
.local-campos input:focus-visible, .local-campos select:focus-visible { border-color: var(--es-primaria); box-shadow: 0 0 0 3px var(--es-primaria-linha); }
@media (min-width: 1024px) { .simulador-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ------------------------------------------------------------ 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)); counter-reset: passo; }
.passos-landing p { margin: 0; }
.passo-num { display: block; margin-bottom: var(--esp-3); font-size: var(--fs-2xl); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--es-dado); }
.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-fundo); border: 1px solid var(--es-linha);
  color: var(--es-texto); font-size: var(--fs-peq); font-weight: 500; }
.faixa li + li::before { content: "\2192"; margin-right: var(--esp-2); color: var(--es-primaria); }
.faixa-texto { color: var(--es-texto-2); }
/* link para a página da etapa: o mesmo desenho do .link-seta, com o alvo de 44 px do .link-alvo */
.link-proximo .link-alvo { gap: 6px; font-weight: var(--peso-ui); color: var(--es-destaque); text-decoration: none; }
.link-proximo .link-alvo::after { content: "\2192"; transition: transform var(--es-dur-2) var(--es-ease); }
.link-proximo .link-alvo:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-proximo .link-alvo:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------ 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-media);
  background: var(--es-fundo); color: var(--es-texto-2); font-weight: 500; cursor: pointer;
  transition: border-color var(--es-dur-1), color var(--es-dur-1), background-color var(--es-dur-1);
}
.abas-lista [role="tab"]:hover { border-color: var(--es-primaria); color: var(--es-destaque); }
.abas-lista [role="tab"][aria-selected="true"] { background: var(--es-texto); border-color: var(--es-texto); color: var(--es-fundo); }
.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.01em; }
.coluna-antes { background: var(--es-superficie-2); }
.coluna-depois { background: var(--es-fundo); border: 1px solid var(--es-primaria-linha); box-shadow: inset 0 3px 0 var(--es-primaria); }
.coluna-depois li::marker { color: var(--es-primaria); }
@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-3); border-radius: var(--raio-pilula); background: var(--es-fundo);
  border: 1px solid var(--es-linha); font-weight: 500; font-size: var(--fs-peq); }
.cadeia li::before { content: counter(elo) ". "; color: var(--ac, var(--es-primaria)); font-weight: var(--peso-ui); }
.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-2); border-radius: var(--raio-md); }
.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: 170px 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); }
/* SEO e GEO: resposta curta num bloco de leitura com o fio forte em cima (bloco GEO do tema) */
.resposta { padding-top: var(--esp-5); border-top: 2px solid var(--es-texto); }
.resposta .lead { color: var(--es-texto); }
.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-media); font-size: var(--fs-peq);
  color: var(--es-destaque); font-weight: 500; }
@media (min-width: 768px) {
  .perfil-grade, .whatsapp-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* seção 11: prints reais da conta de demonstração (WebP com srcset; width e height no HTML reservam o espaço) */
.prints-nota { max-width: 72ch; }
.prints { display: grid; gap: var(--esp-6) var(--esp-5); margin-top: var(--esp-5); align-items: start; }
.print { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; }
.print picture { display: block; width: 100%; }
.print-moldura { position: relative; width: 100%; }
.print-moldura > .selo-demo { position: absolute; top: 8px; right: 8px; z-index: 1; max-width: calc(100% - 16px); white-space: normal;
  line-height: 1.3; padding-block: var(--esp-1); box-shadow: var(--es-sombra-leve); }
.print-ampliar { display: block; width: 100%; border-radius: var(--raio-md); }
.print-ampliar:hover img { border-color: var(--es-primaria); }
.print img { display: block; width: 100%; height: auto; border: 1px solid var(--es-linha); border-radius: var(--raio-md);
  box-shadow: var(--es-sombra); background: var(--es-superficie); transition: border-color var(--es-dur-1); }
.print figcaption { margin: 0; }
.print-telefone .print-moldura { max-width: 300px; }
@media (max-width: 599px) {   /* no celular entra a captura do celular, duas por linha (tocar abre no tamanho original) */
  .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5) var(--esp-3); }
  .print-so-desktop { grid-column: 1 / -1; }
  /* duas capturas por linha: o selo sai de cima da imagem e fica acima dela, à direita, quebrando a linha */
  .print-moldura { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-2); }
  .print-moldura > .selo-demo { position: static; white-space: normal; border-radius: var(--raio-sm); padding: var(--esp-1) var(--esp-2);
    line-height: 1.3; box-shadow: none; }
}
@media (min-width: 600px) {
  .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .print-larga { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .prints { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .print-larga { grid-column: span 4; }
  .print-telefone { grid-column: span 2; }
  .print-terco { grid-column: span 2; }
  .print-metade { grid-column: span 3; }
}

/* ------------------------------------------------------------ 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(--raio-lg); padding: var(--esp-5); min-width: 0; max-width: none; }
@media (min-width: 768px) { .plano { padding: 28px; } }
.plano-destaque { border: 2px solid var(--es-primaria); }
.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.01em; }
.pilula.destaque { background: var(--es-primaria); color: var(--es-primaria-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: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plano-preco .periodo { color: var(--es-texto-2); }
.plano-itens { list-style: none; padding: var(--esp-3) 0 0; margin: var(--esp-3) 0 var(--esp-4); display: grid; gap: var(--esp-2); flex: 1;
  align-content: start; border-top: 1px solid var(--es-linha); }
.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; }
/* nos cartões a linha tem a altura da dica (44 px): a marca de verificação fica no meio dela */
.plano-itens.itens-plano > li::before { top: calc(50% - 10px); }
.plano-itens.itens-plano > li::after { top: calc(50% - 4px); }
.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: 1px solid var(--es-linha); border-radius: var(--raio-md); }
.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); 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: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--es-primaria);
  border-bottom: 2px solid var(--es-primaria); transform: translateY(-3px) rotate(45deg); transition: transform var(--es-dur-2) var(--es-ease); }
.acordeao[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.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-md); 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(--raio-lg);
  border: 1px solid var(--es-linha); 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); color: var(--es-texto); }
.conversa-baloes { display: flex; flex-direction: column; gap: var(--esp-2); }
/* o resumo como chega por e-mail (modelo aviso.html da mensageria: Papel, cartão com a Linha, marca com o traço azul,
   botão azul com raio 10, rodapé com o endosso) */
.email-tela { background: var(--es-fundo-2); }
.email-mock p { margin: 0; }
.email-de { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2); font-size: var(--fs-peq); color: var(--es-texto-2); }
.email-de strong { color: var(--es-texto); }
.email-mock .email-assunto { margin: var(--esp-1) 0 var(--esp-3); font-weight: var(--peso-ui); color: var(--es-texto); }
.email-corpo { display: grid; gap: var(--esp-3); padding: var(--esp-4); background: var(--es-fundo); border: 1px solid var(--es-linha);
  border-radius: var(--raio-md); }
.email-marca { padding-left: var(--esp-3); border-left: 3px solid var(--es-primaria); font-weight: var(--peso-ui); color: var(--es-texto); }
.email-botao { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--esp-4); border-radius: var(--raio-btn);
  background: var(--es-primaria); color: var(--es-primaria-texto); font-weight: var(--peso-ui); }
.email-rodape { padding-top: var(--esp-3); border-top: 1px solid var(--es-linha); font-size: var(--fs-peq); color: var(--es-texto-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-md) var(--raio-md) var(--raio-md); max-width: 92%;
  box-shadow: var(--es-sombra-leve); }

/* ------------------------------------------------------------ perguntas e chamada final */
.faq { margin-top: var(--esp-4); display: grid; gap: 10px; }
.faq-item { margin: 0; padding: 0 var(--esp-5); background: var(--es-fundo); border: 1px solid var(--es-linha); border-radius: var(--es-raio);
  transition: border-color var(--es-dur-2); }
.faq-item[open] { border-color: var(--es-primaria-linha); }
.faq-item.acordeao { border-top: 1px solid var(--es-linha); }
.faq-item.acordeao[open] { border-color: var(--es-suave-2); }
.faq-item > summary { min-height: 56px; }
.faq-item p { color: var(--es-texto-2); padding-bottom: var(--esp-3); }
/* chamada final: bloco Céu arredondado (painel do formulário do tema v4), um primário só */
.cta-final { padding-block: var(--sec); }
.cta-final > .container { max-width: calc(var(--container) - 2 * var(--gutter)); padding: var(--esp-7) var(--gutter);
  width: calc(100% - 2 * var(--moldura)); background: var(--es-suave); border: 1px solid var(--es-primaria-linha); border-radius: var(--raio-xl); }
@media (min-width: 768px) { .cta-final > .container { padding: var(--esp-8) var(--esp-7); border-radius: var(--raio-2xl); } }
.cta-final h2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.cta-final .btn { min-height: 52px; padding: 0 var(--esp-6); }
.cta-rodape { margin: var(--esp-5) auto 0; font-size: var(--fs-peq); color: var(--es-texto-2); }

/* ------------------------------------------------------------ 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-media); background: var(--es-fundo); text-decoration: none; color: var(--es-texto-2); font-weight: 500; }
.indice a:hover { border-color: var(--es-primaria); color: var(--es-destaque); }
.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; }

/* ------------------------------------------------------------ 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: 1px solid var(--es-linha); background: var(--es-suave); }
.site-painel .linha-estado { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.site-painel .linha-estado a, .sc-pagina a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.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; } }

/* ------------------------------------------------------------ área do cliente v2 (telas sc-*; briefing 4)
   Corpo de 16 a 18 px, alvos de 44 a 48 px, foco visível, só variáveis de tokens.css (claro e escuro). */
.sc-tela { min-width: 0; }
.sc-tela .card h2, .sc-tela .vazio h2, .sc-implantacao h2 { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: 0; }
.sc-tela .card h3 { font-size: var(--fs-h3); font-weight: var(--peso-ui); letter-spacing: 0; margin-bottom: var(--esp-3); }
.sc-tela h4 { font-size: var(--fs-corpo); font-weight: var(--peso-ui); letter-spacing: 0; margin: var(--esp-3) 0 var(--esp-2); }
.sc-h2 { font-size: var(--fs-2xl); font-weight: var(--peso-ui); letter-spacing: 0; margin: var(--esp-2) 0 0; }
.sc-tela p, .sc-tela li, .sc-tela dd { font-size: var(--fs-corpo); }
.sc-tela .lead { font-size: var(--fs-lead); }
.sc-quebra { overflow-wrap: anywhere; word-break: break-word; }
.sc-tela .sc-meta, .sc-tela .sc-fonte, .sc-tela .sc-explica, .sc-meta, .sc-fonte, .sc-explica { font-size: var(--fs-peq); color: var(--es-texto-2); margin: 0; }
.sc-fonte { display: block; }
.sc-explica { display: block; font-weight: 400; }

/* ajuda contextual e dicas */
.sc-ajuda { border: 1px solid var(--es-linha); border-radius: var(--es-raio); background: var(--es-fundo); }
.sc-ajuda > summary { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-g); padding: 0 var(--esp-4);
  cursor: pointer; font-weight: var(--peso-ui); color: var(--es-destaque); list-style: none; }
.sc-ajuda > summary::-webkit-details-marker { display: none; }
.sc-ajuda > summary::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--es-linha-forte); font-size: var(--fs-peq); flex: none; }
.sc-ajuda[open] > summary { border-bottom: 1px solid var(--es-linha); }
.sc-ajuda-corpo { padding: var(--esp-3) var(--esp-4) var(--esp-2); }
.sc-glossario-curto { display: grid; gap: var(--esp-1); margin: 0 0 var(--esp-2); }
.sc-glossario-curto dt { font-weight: var(--peso-ui); }
.sc-glossario-curto dd { margin: 0 0 var(--esp-2); color: var(--es-texto-2); }
.sc-termo { display: inline-flex; align-items: center; gap: var(--esp-1); font-weight: var(--peso-ui); }
.sc-tela .dica { vertical-align: middle; }

/* skeleton com o desenho da tela */
.sc-esqueleto { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sc-esqueleto .card { min-height: 140px; }
.sk-titulo { height: 22px; width: 45%; margin-bottom: var(--esp-3); }

/* em implantação */
.sc-implantacao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); max-width: 760px; }
.sc-implantacao h2, .sc-implantacao p { margin: 0; }

/* painel: ação recomendada e as outras ações. Uma borda de cartão só (a Linha, 1 px, v2.2): a recomendada se
   destaca pelo fundo Céu, e os atalhos ganham a borda azul só no foco e ao passar o ponteiro */
.sc-recomendada { border: 1px solid var(--es-linha); background: var(--es-suave); }
.app-main .sc-recomendada { border: 1px solid var(--es-linha); }
.sc-recomendada h2 { font-size: var(--fs-2xl); font-weight: var(--peso-ui); letter-spacing: 0; margin-bottom: var(--esp-2); }
.sc-recomendada .lead { color: var(--es-texto); }
.sc-recomendada .rotulo { color: var(--es-texto-2); }   /* texto-3 no fundo suave do tema escuro dava 4,32:1 */
.sc-acoes h2 { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: 0; margin-bottom: var(--esp-3); }
.sc-lista-acoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sc-lista-acoes li { max-width: none; }
.sc-acao { display: flex; flex-direction: column; gap: var(--esp-1); height: 100%; min-height: 88px; width: 100%; padding: var(--esp-4);
  border: 1px solid var(--es-linha); border-radius: var(--es-raio); background: var(--es-fundo); color: var(--es-texto);
  text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: border-color var(--es-dur-1); }
.sc-acao:hover, .sc-acao:focus-visible { border-color: var(--es-primaria); color: var(--es-texto); }
.sc-acao strong { color: var(--es-destaque); font-size: var(--fs-h3); }
.sc-acao span { font-size: var(--fs-peq); color: var(--es-texto-2); }
/* painel: busca no Google (Search Console, Fase 4; só com a conexão ativa) */
.sc-google-numeros { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0 0 var(--esp-3); }
.site-painel .sc-google-numeros dt { font-size: var(--fs-peq); color: var(--es-texto-2); }
.site-painel .sc-google-numeros dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2); }
.sc-google-numeros strong { font-size: var(--fs-2xl); font-weight: var(--peso-ui); color: var(--es-texto); }
.sc-google-item { min-width: 0; padding: var(--esp-3); border: 1px solid var(--es-linha); border-radius: var(--raio-md);
  background: var(--es-fundo); }
.sc-google-grafico { margin: var(--esp-4) 0 var(--esp-3); color: var(--es-primaria); }
.sc-google-grafico .grafico { display: block; width: 100%; height: 120px; border-bottom: 1px solid var(--es-linha); }
.sc-google-eixo { display: flex; justify-content: space-between; gap: var(--esp-3); margin: var(--esp-1) 0 0; max-width: none; }
.sc-google-notas { margin: 0 0 var(--esp-2); padding-left: var(--esp-5); }
.sc-google-notas li { font-size: var(--fs-peq); }
.sc-duas { display: grid; gap: var(--esp-4); }
.sc-duas > * { min-width: 0; }
@media (min-width: 1024px) { .sc-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* listas */
.sc-itens { list-style: none; margin: 0 0 var(--esp-3); padding: 0; }
.sc-itens > li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); padding: var(--esp-3) 0;
  border-top: 1px solid var(--es-linha); max-width: none; }
.sc-itens > li:first-child { border-top: 0; padding-top: var(--esp-1); }
.sc-itens > li > .alerta { margin: 0; }
.sc-itens > li > .sc-botoes { margin-top: var(--esp-2); }
.sc-itens:last-child { margin-bottom: 0; }
.sc-itens > li > a, .sc-artigo-topo > a, .sc-artigo-titulo { display: inline-flex; align-items: center; min-height: var(--alvo); }
.sc-itens > li > a { min-width: var(--alvo); }
.sc-artigo-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); width: 100%; }
.sc-artigo-topo > :first-child { min-width: 0; flex: 1 1 220px; }
.sc-artigo-titulo { font-weight: var(--peso-ui); }
.sc-lista-simples { margin: 0 0 var(--esp-2); padding-left: var(--esp-5); }
.sc-dados, .site-painel .sc-dados { display: grid; gap: var(--esp-1); margin: 0 0 var(--esp-3); }
.sc-dados dt { font-size: var(--fs-peq); color: var(--es-texto-2); }
.sc-dados dd { margin: 0 0 var(--esp-2); }
@media (min-width: 560px) {
  .sc-dados { grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); column-gap: var(--esp-4); row-gap: var(--esp-2); }
  .sc-dados dd { margin: 0; }
}

/* estratégia por serviço */
.sc-origem { color: var(--es-texto-2); }
.sc-proxima-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); color: var(--es-texto-2); }
.vazio .sc-proxima-etapa { justify-content: center; }
.sc-servicos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sc-servico { min-width: 0; }
.sc-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.sc-subtitulo { border-top: 1px solid var(--es-linha); padding-top: var(--esp-3); }
.sc-grupos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.sc-grupo { max-width: none; padding: var(--esp-3); border-radius: var(--raio-md); background: var(--es-fundo); border: 1px solid var(--es-linha); }
.sc-grupo h4 { margin-top: 0; }
.sc-termo-principal { margin-bottom: var(--esp-2); }
.sc-meta { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.sc-volume { display: flex; flex-direction: column; gap: 2px; margin: var(--esp-2) 0; }
.sc-sugestao { color: var(--es-texto-2); }
.sc-descartar { margin-top: var(--esp-1); }
.app-main .sc-estrategia { border: 1px solid var(--es-linha); }
.sc-detalhe-palavras > summary, .sc-gestao > summary, .sc-antigos > summary, .sc-pergunta > summary, .sc-grupo-artigos > summary {
  display: flex; align-items: center; min-height: var(--alvo-g); cursor: pointer; font-weight: var(--peso-ui); color: var(--es-destaque); }
.sc-detalhe-palavras[open] > summary, .sc-gestao[open] > summary { margin-bottom: var(--esp-4); }

/* calendário de "Seus artigos" */
.sc-meses { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
@media (max-width: 599px) {   /* no celular: o mês em cima e os dois botões lado a lado */
  .sc-meses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sc-meses .sc-mes-atual { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .sc-meses .btn { width: 100%; justify-content: center; }
}
.sc-tela .sc-mes-atual { margin: 0; font-size: var(--fs-xl); font-weight: var(--peso-ui); }
.sc-mes-atual::first-letter, .sc-calendario caption::first-letter { text-transform: uppercase; }
.sc-calendario-caixa { min-width: 0; }
.sc-calendario { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--es-fundo); }
.sc-calendario caption { text-align: left; font-weight: var(--peso-ui); padding-bottom: var(--esp-2); }
.sc-calendario th { font-size: var(--fs-peq); font-weight: var(--peso-ui); color: var(--es-texto-2); padding: var(--esp-2) 2px; text-align: center; }
.sc-calendario td { vertical-align: top; height: 76px; padding: 4px; border: 1px solid var(--es-linha); overflow: hidden; }
.sc-calendario td.sc-vazio { background: var(--es-superficie-2); }
.sc-calendario td.sc-hoje { outline: 2px solid var(--es-primaria); outline-offset: -2px; }
.sc-dia { display: block; font-size: var(--fs-peq); font-weight: var(--peso-ui); }
.sc-marca { display: block; margin-top: 2px; padding: 0 4px; border-left: 4px solid var(--es-primaria); border-radius: 4px;
  background: var(--es-suave); color: var(--es-texto); font-size: var(--fs-peq); line-height: 1.3; }
.sc-marca-texto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-marca.sc-aguardando, .sc-marca-ponto.sc-aguardando { border-color: var(--es-aviso); }
.sc-marca.sc-publicados, .sc-marca-ponto.sc-publicados { border-color: var(--es-sucesso); }
.sc-marca.sc-segurados, .sc-marca-ponto.sc-segurados { border-color: var(--es-erro); }
.sc-marca.sc-nao_publicados { border-color: var(--es-linha-forte); }
.sc-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); padding: 0; margin: var(--esp-3) 0 0; }
.sc-tela .sc-legenda li { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-peq); }
.sc-marca-ponto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--es-primaria); }
@media (max-width: 599px) {
  .sc-calendario td { height: 52px; padding: 2px; }
  .sc-calendario th { padding: var(--esp-1) 0; }
  .sc-marca { display: inline-block; width: 12px; height: 12px; margin: 2px 2px 0 0; padding: 0; border: 4px solid var(--es-primaria);
    border-radius: 50%; }
  .sc-marca-texto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sc-grupo-artigos h2 { margin-bottom: var(--esp-1); }
.sc-artigos { list-style: none; margin: 0; padding: 0; }
.sc-artigo { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) 0; border-top: 1px solid var(--es-linha); max-width: none; }
.sc-artigo:first-child { border-top: 0; }
.sc-artigo p { margin: 0; }
.sc-tela .sc-prazo { font-weight: var(--peso-ui); color: var(--es-aviso); }
.sc-tela .sc-motivo { color: var(--es-texto); background: var(--es-suave); border-radius: var(--raio-sm); padding: var(--esp-2) var(--esp-3); }
.sc-tela .sc-segurados .sc-motivo { background: var(--es-aviso-fundo); }
.sc-artigo .linha { margin-top: var(--esp-2); }

/* revisão do artigo e prévia como no celular */
.sc-voltar { margin-bottom: var(--esp-2); }
.sc-tela .sc-rev-titulo { font-size: var(--fs-2xl); font-weight: var(--peso-ui); letter-spacing: 0; margin: 0 0 var(--esp-4); }
.sc-rev-grade { display: grid; gap: var(--esp-5); margin-top: var(--esp-4); }
.sc-rev-grade > * { min-width: 0; }
@media (min-width: 1024px) { .sc-rev-grade { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; } }
.sc-tela .sc-previa h2 { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: 0; }
.sc-celular { max-width: 390px; margin: 0 auto var(--esp-3); padding: 12px; border-radius: 36px; background: var(--es-escuro); box-shadow: var(--es-sombra); }
.sc-celular-tela { display: block; max-height: 72vh; overflow-y: auto; padding: var(--esp-5) var(--esp-4); border-radius: 26px;
  background: var(--es-fundo); color: var(--es-texto); font-size: var(--fs-corpo); line-height: var(--lh-longo); }
.sc-celular-tela:focus-visible { outline: 3px solid var(--es-dado-2); outline-offset: 2px; }
.sc-celular-tela h1, .sc-celular-tela h2, .sc-celular-tela h3, .sc-celular-tela h4, .sc-celular-tela p, .sc-celular-tela li { color: var(--es-texto); letter-spacing: 0; }
.sc-tela .sc-previa-h1 { font-size: 26px; font-weight: var(--peso-ui); line-height: var(--lh-titulo); }
.sc-tela .sc-previa-corpo h2 { font-size: 21px; font-weight: var(--peso-ui); margin-top: var(--esp-5); }
.sc-tela .sc-previa-corpo h3 { font-size: 18px; font-weight: var(--peso-ui); }
.sc-previa-corpo a { color: var(--es-destaque); }
.sc-previa-corpo nav li > a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.sc-previa-corpo table { display: block; overflow-x: auto; border-collapse: collapse; max-width: 100%; }
.sc-previa-corpo th, .sc-previa-corpo td { border: 1px solid var(--es-linha); padding: var(--esp-2); font-size: var(--fs-peq); }
.sc-previa-corpo img { max-width: 100%; height: auto; border-radius: var(--raio-sm); }
.sc-previa-corpo blockquote { margin: var(--esp-4) 0; padding-left: var(--esp-4); border-left: 4px solid var(--es-suave-2); }
.sc-previa-corpo details summary { min-height: var(--alvo); display: flex; align-items: center; cursor: pointer; font-weight: var(--peso-ui); }
.sc-imagem-fora { display: block; margin: var(--esp-3) 0; padding: var(--esp-3); border: 1px dashed var(--es-linha-forte); border-radius: var(--raio-sm);
  font-size: var(--fs-peq); color: var(--es-texto-2); }
.sc-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
@media (max-width: 599px) { .sc-botoes .btn { flex: 1 1 100%; } }
.sc-mudou { margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-sm); background: var(--es-suave); }
.sc-mudou h3 { margin-bottom: var(--esp-2); }

/* formulários das telas (ajuste, correção, convite, pedidos, avisos) */
.sc-ajuste, .sc-form { margin-top: var(--esp-4); padding: var(--esp-4); border-radius: var(--raio-md); background: var(--es-fundo);
  border: 1px solid var(--es-linha); }
@media (min-width: 560px) { .sc-ajuste, .sc-form { padding: var(--esp-5); } }
.sc-tela .sc-ajuste h3, .sc-tela .sc-form h3 { font-size: var(--fs-h3); font-weight: var(--peso-ui); }
.sc-tela .campo label, .sc-tela .grupo-opcoes legend { font-size: var(--fs-corpo); }
.sc-tela .check { min-height: var(--alvo); padding: var(--esp-1) 0; }
.sc-tela .check > span { padding-top: 1px; }
.sc-canal { border-top: 1px solid var(--es-linha); padding-top: var(--esp-3); margin-top: var(--esp-3); }
.sc-canal:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.sc-canal .selo { margin-bottom: var(--esp-2); }
fieldset.sc-canal { border-left: 0; border-right: 0; border-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; min-width: 0; }
fieldset.sc-canal:first-of-type { border-top: 0; }
.sc-canal > legend { font-size: var(--fs-h3); font-weight: var(--peso-h3); padding: 0; margin-bottom: var(--esp-2); }
.sc-membro .linha { margin-top: var(--esp-2); }
.sc-tela h2[tabindex="-1"]:focus { outline: none; }
.sc-tela h2[tabindex="-1"]:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 3px; }

/* glossário e dúvidas */
.sc-glossario dl { margin: 0; }
.sc-glossario dt { font-weight: var(--peso-ui); font-size: var(--fs-h3); margin-top: var(--esp-4); scroll-margin-top: 80px; }
.sc-glossario dt:first-child { margin-top: 0; }
.sc-glossario dd { margin: var(--esp-1) 0 0; color: var(--es-texto-2); max-width: 72ch; }
.sc-pergunta { border-top: 1px solid var(--es-linha); }
.sc-pergunta:first-of-type { border-top: 0; }
.sc-pergunta p { color: var(--es-texto-2); }
.site-painel > .sc-ajuda { grid-column: 1 / -1; }
.sc-conta, .sc-site, .sc-relatorio { align-items: start; }