/* Visual do site do KingVend. A MESMA identidade do sistema (src/assets/css/sistema.css): verde #00b873, botão #00875a,
   verde profundo #02382b, Sora nos títulos e Inter no texto. Nenhuma cor nova: tudo sai das variáveis abaixo.
   CSS PRÓPRIO, sem framework de CDN (desempenho é SEO); fontes locais; desenhos em HTML/CSS e SVG (nunca imagem de texto).
   Estrutura e decisões: docs/site_kingvend_seo_e_estrutura.md, seção 2.4. */
@font-face { font-family: 'Sora'; src: url('../fontes/sora.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fontes/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --profundo: #02382b;
  --profundo-2: #034a39;
  --verde: #00b873;
  --botao: #00875a;
  --botao-hover: #00714b;
  --link: #007a52;
  --claro: #e9faf3;
  --borda-verde: rgba(0, 184, 115, .28);
  --fundo: #fff;
  --fundo-2: #f4fbf8;
  --tinta: #0b1410;
  --cinza: #586b62;
  --linha: rgba(11, 20, 16, .1);
  --sobre-profundo: #eafff5;
  --suave-profundo: #b4dccd;
  --raio: 20px;
  --raio-p: 12px;
  --sombra: 0 20px 40px rgba(2, 56, 43, .08);
  --sombra-forte: 0 30px 60px rgba(2, 56, 43, .16);
  --titulo: 'Sora', system-ui, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.65 var(--texto); color: var(--tinta); background: var(--fundo); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.18; color: var(--profundo); letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.icone { flex: none; vertical-align: middle; }
.caixa { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.caixa--texto { max-width: 820px; }
.centro { text-align: center; margin: 32px 0 0; }
.sr, .isca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 16px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 30; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 6px; }

/* Botões e links */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem/1.2 var(--texto); background: var(--botao); color: #fff; padding: 14px 24px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.botao:hover { background: var(--botao-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 135, 90, .28); }
.botao--pequeno { padding: 10px 18px; font-size: .95rem; }
.botao--largo { width: 100%; margin-top: 8px; }
.botao--claro { background: var(--verde); color: var(--profundo); }
.botao--claro:hover { background: #2bd596; box-shadow: 0 10px 24px rgba(0, 184, 115, .3); }
.botao--contorno { background: transparent; color: var(--profundo); border-color: var(--borda-verde); }
.botao--contorno:hover { background: var(--claro); box-shadow: none; }
.botao--contorno-claro { background: transparent; color: var(--sobre-profundo); border-color: rgba(234, 255, 245, .35); }
.botao--contorno-claro:hover { background: rgba(234, 255, 245, .1); box-shadow: none; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.link-seta .icone { transition: transform .2s; }
.link-seta:hover .icone { transform: translateX(4px); }
.link-seta--claro { color: #5fe3ad; }
.selo { display: inline-flex; align-items: center; gap: 8px; background: var(--claro); color: var(--link); border: 1px solid var(--borda-verde); border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: .85rem; margin: 0 0 18px; }
.selo--escuro { background: rgba(0, 184, 115, .14); color: #7ff0c0; border-color: rgba(0, 184, 115, .35); }

/* Topo e menu (computador: em linha, com os grupos em painel; celular: três linhas) */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.topo__logo { font: 800 1.45rem/1 var(--titulo); letter-spacing: -.03em; color: var(--profundo); text-decoration: none; }
.topo__logo img { display: block; width: auto; height: 44px; }   /* a logo da marca (ferramentas/gerar_icones.py copia o SVG; etapa B, 12/11) */
.topo__logo--claro img { height: 50px; }
.topo__menu { display: flex; align-items: center; gap: 2px; }
.topo__link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 10px; color: var(--tinta); font: 500 .97rem/1.3 var(--texto); text-decoration: none; background: none; border: 0; cursor: pointer; }
.topo__link:hover { background: var(--fundo-2); }
.topo__link[aria-current="page"], .topo__link--dentro { color: var(--profundo); font-weight: 600; background: var(--claro); }
.topo__grupo { position: relative; }
.topo__grupo::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.topo__grupo-botao .icone { transition: transform .2s; }
.topo__grupo.aberto .topo__grupo-botao .icone { transform: rotate(180deg); }
.topo__painel { position: absolute; top: calc(100% + 12px); left: 50%; width: 340px; padding: 10px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s, transform .18s, visibility .18s; }
.topo__painel--largo { width: 680px; display: grid; grid-template-columns: 1fr 1fr; }
.topo__grupo.aberto .topo__painel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.topo__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--raio-p); text-decoration: none; color: var(--tinta); }
.topo__item:hover, .topo__item[aria-current="page"] { background: var(--fundo-2); }
.topo__item strong { display: block; font-weight: 600; font-size: .97rem; line-height: 1.3; }
.topo__item small { display: block; color: var(--cinza); font-size: .84rem; line-height: 1.4; margin-top: 2px; }
.topo__item-icone { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--claro); color: var(--botao); }
.topo__item--todos { grid-column: 1 / -1; align-items: center; justify-content: space-between; color: var(--link); border-top: 1px solid var(--linha); border-radius: 0 0 var(--raio-p) var(--raio-p); margin-top: 6px; }
.topo__acoes { display: inline-flex; align-items: center; gap: 12px; margin-left: 10px; }
.topo__entrar { font-weight: 600; font-size: .97rem; color: var(--profundo); text-decoration: none; padding: 8px 6px; }
.topo__entrar:hover { text-decoration: underline; }
.topo__menu-botao { display: none; background: none; border: 1px solid var(--linha); border-radius: 10px; padding: 6px 8px; cursor: pointer; color: var(--profundo); line-height: 0; }
@media (hover: hover) and (min-width: 1081px) {
  .topo__grupo:hover .topo__painel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
html:not(.js) .topo__grupo:focus-within .topo__painel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Abertura da Home */
.heroi { position: relative; overflow: hidden; color: var(--sobre-profundo); padding: 76px 0 110px;
  background: radial-gradient(900px 520px at 88% -8%, rgba(0, 184, 115, .32), transparent 62%), radial-gradient(620px 420px at -6% 104%, rgba(0, 184, 115, .14), transparent 60%), var(--profundo); }
.heroi__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.heroi h1 { color: #fff; max-width: 15em; }
.heroi__resumo { font-size: 1.14rem; color: var(--suave-profundo); max-width: 34em; }
.heroi__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.heroi__pontos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--suave-profundo); font-size: .98rem; }
.heroi__pontos li { display: flex; gap: 10px; align-items: center; }
.heroi__pontos .icone { color: var(--verde); }
.heroi__desenho { position: relative; padding: 16px 8px; }
.heroi__etiqueta { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--profundo); font-weight: 600; font-size: .86rem; padding: 10px 14px; border-radius: 999px; box-shadow: var(--sombra-forte); }
.heroi__etiqueta .icone { color: var(--botao); }
.heroi__etiqueta--a { top: 0; right: 0; }
.heroi__etiqueta--b { bottom: 0; left: 0; }

/* O totem desenhado (decorativo) */
.totem { background: #0b1410; border-radius: 30px; padding: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, .38); transform: rotate(-1.5deg); }
.totem__tela { background: var(--fundo-2); border-radius: 20px; padding: 14px; color: var(--tinta); font-size: .78rem; }
.totem__cabecalho { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; }
.totem__marca { width: 26px; height: 26px; border-radius: 8px; background: var(--verde); }
.totem__linha { flex: 1; height: 8px; border-radius: 4px; background: var(--linha); max-width: 46%; }
.totem__ponto { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(0, 184, 115, .2); }
.totem__abas { display: flex; gap: 6px; margin: 10px 0; overflow: hidden; }
.totem__abas span { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); font-weight: 600; color: var(--cinza); white-space: nowrap; }
.totem__abas .ativa { background: var(--profundo); color: #fff; border-color: var(--profundo); }
.totem__corpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.totem__vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.totem__produto { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 8px; display: grid; gap: 6px; }
.totem__foto { display: block; aspect-ratio: 1; border-radius: 8px; }
.totem__foto--a { background: linear-gradient(135deg, #c9f3e2, #7fdfba); }
.totem__foto--b { background: linear-gradient(135deg, #e9faf3, #a9ecd0); }
.totem__foto--c { background: linear-gradient(135deg, #d5efe5, #58c99c); }
.totem__foto--d { background: linear-gradient(135deg, #cfe8de, #2f8f6c); }
.totem__foto--e { background: linear-gradient(135deg, #e9faf3, #00b873); }
.totem__foto--f { background: linear-gradient(135deg, #dff5ec, #8fd9bd); }
.totem__nome { font-weight: 600; }
.totem__mais { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--botao); color: #fff; display: grid; place-items: center; font-weight: 700; line-height: 1; }
.totem__carrinho { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.totem__titulo { font: 700 .85rem var(--titulo); color: var(--profundo); }
.totem__item { height: 8px; border-radius: 4px; background: var(--linha); }
.totem__item--curto { width: 60%; }
.totem__qr { display: grid; place-items: center; padding: 8px; border: 1px dashed var(--borda-verde); border-radius: 10px; color: var(--tinta); }
.totem__pagar { background: var(--botao); color: #fff; font-weight: 700; text-align: center; padding: 8px; border-radius: 999px; }

/* Faixa de números (sobe sobre a abertura) */
.numeros { margin-top: -56px; position: relative; z-index: 2; }
.numeros__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); max-width: 1140px; padding: 0; }
.numeros__grade p { margin: 0; padding: 26px 24px; display: grid; gap: 4px; border-left: 1px solid var(--linha); }
.numeros__grade p:first-child { border-left: 0; }
.numeros__grade strong { font: 700 1.7rem/1.1 var(--titulo); color: var(--profundo); letter-spacing: -.02em; }
.numeros__grade span { color: var(--cinza); font-size: .93rem; line-height: 1.4; }

/* Seções */
.secao { padding: 76px 0; }
.secao--clara { background: var(--fundo-2); }
.secao--escura { color: var(--suave-profundo); background: radial-gradient(700px 420px at 100% 0%, rgba(0, 184, 115, .2), transparent 60%), var(--profundo); }
.secao--escura h2 { color: #fff; }
.titulo-secao { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.titulo-secao p:last-child { color: var(--cinza); font-size: 1.08rem; margin: 0; }
.titulo-secao--esquerda { text-align: left; margin: 0; }
.titulo-secao--esquerda p:last-child { margin-top: 20px; }
.grade-3, .grade-4, .grade-5 { display: grid; gap: 20px; }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.destaque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }

/* Cartões */
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; }
.cartao h3 { margin-top: 0; }
.cartao p:last-child { margin-bottom: 0; }
.cartao--peca p { color: var(--cinza); }
.cartao__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--claro); color: var(--botao); margin-bottom: 18px; }
.cartao--link { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; color: var(--tinta); transition: transform .2s, box-shadow .2s, border-color .2s; }
.cartao--link:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--borda-verde); }
.cartao--link .cartao__icone { margin-bottom: 8px; }
.cartao--link strong { font: 600 1.08rem/1.3 var(--titulo); color: var(--profundo); letter-spacing: -.01em; }
.cartao--link > span:not(.cartao__icone) { color: var(--cinza); font-size: .95rem; line-height: 1.5; }
.cartao--link em { margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 600; font-size: .93rem; color: var(--link); display: inline-flex; align-items: center; gap: 6px; }
.cartao--link em .icone { transition: transform .2s; }
.cartao--link:hover em .icone { transform: translateX(4px); }
.cartao--segmento { padding: 22px; }
.cartao--lista { background: var(--fundo-2); border-color: var(--borda-verde); position: sticky; top: 92px; }
.cartao--lista h2 { font-size: 1.2rem; }

/* Passos de uma venda */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: 8px; }
.passos li { counter-increment: passo; position: relative; padding: 0 0 32px 72px; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--profundo); color: #fff; display: grid; place-items: center; font: 700 1.1rem var(--titulo); }
.passos li::after { content: ''; position: absolute; left: 23px; top: 56px; bottom: 4px; width: 2px; background: var(--borda-verde); }
.passos li:last-child::after { display: none; }
.passos h2, .passos h3 { font-size: 1.25rem; margin: 8px 0 8px; }
.passos p { color: var(--cinza); }
.passos--linha { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.passos--linha li { padding: 64px 0 0; }
.passos--linha li::after { left: 60px; right: -12px; top: 23px; bottom: auto; width: auto; height: 2px; }
.passos--linha h3 { font-size: 1.1rem; }

/* Páginas internas */
.topo-pagina { color: var(--suave-profundo); padding: 44px 0 60px; background: radial-gradient(760px 420px at 92% -20%, rgba(0, 184, 115, .28), transparent 62%), var(--profundo); }
.topo-pagina h1 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.7rem); max-width: 20em; }
.topo-pagina__texto { font-size: 1.12rem; max-width: 46em; margin: 0; }
.migalhas { font-size: .88rem; margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; color: var(--suave-profundo); }
.migalhas a { color: var(--suave-profundo); }
.migalhas [aria-current] { color: #fff; }
.pagina { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 56px; align-items: start; }
.bloco { margin-bottom: 40px; }
.bloco:last-child { margin-bottom: 0; }
.bloco h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.bloco p { color: #2b3a33; }
.marcas { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.marcas li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.marcas .icone { color: var(--botao); margin-top: 3px; }
.artigo__data { color: var(--cinza); font-size: .92rem; border-top: 1px solid var(--linha); padding-top: 20px; margin-top: 40px; }
.lista-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 18px 20px; text-decoration: none; color: var(--profundo); font-weight: 600; transition: border-color .2s, transform .2s; }
.lista-links a:hover { border-color: var(--borda-verde); transform: translateX(4px); }

/* Perguntas e glossário */
.perguntas h2 { margin-top: 48px; }
.perguntas h2:first-child { margin-top: 0; }
.pergunta { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 0 20px; margin-bottom: 10px; }
.pergunta summary { cursor: pointer; padding: 18px 28px 18px 0; list-style: none; position: relative; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--titulo); color: var(--botao); }
.pergunta[open] summary::after { content: '\2212'; }
.pergunta summary h3 { display: inline; font-size: 1.05rem; margin: 0; }
.pergunta p { color: #2b3a33; padding-bottom: 18px; margin: 0; }
.glossario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.glossario__termo { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 22px 24px; scroll-margin-top: 90px; }
.glossario dt { font: 600 1.12rem var(--titulo); color: var(--profundo); margin-bottom: 6px; }
.glossario dd { margin: 0; color: #2b3a33; }
.glossario dd .link-seta { display: flex; margin-top: 10px; font-size: .93rem; }

/* Continue conhecendo e chamada final */
.continue { border-top: 1px solid var(--linha); padding: 64px 0; }
.continue__lista { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.chamada { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; color: var(--suave-profundo); border-radius: 28px; padding: 48px; background: radial-gradient(560px 320px at 100% 0%, rgba(0, 184, 115, .34), transparent 62%), var(--profundo); }
.chamada > div { max-width: 620px; }
.chamada h2 { color: #fff; }
.chamada p { margin: 0; }
.chamada__botoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* Formulário de contato */
.contato form { display: grid; gap: 14px; }
.contato__direto { display: flex; flex-wrap: wrap; gap: 12px; }   /* formulário desligado (Q348 b): WhatsApp e e-mail */
.contato__direto .botao { max-width: 100%; overflow-wrap: anywhere; }
.contato label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.contato input, .contato textarea { font: inherit; padding: 12px 14px; border: 1px solid rgba(11, 20, 16, .2); border-radius: var(--raio-p); width: 100%; background: #fff; }
.contato input:focus, .contato textarea:focus { outline: 3px solid var(--borda-verde); border-color: var(--botao); }
.contato .botao { justify-self: start; }
.erro { color: #b42318; font-size: .9rem; }
.aviso { padding: 14px 18px; border-radius: var(--raio-p); }
.aviso--ok { background: var(--claro); border: 1px solid var(--borda-verde); }
.aviso--erro { background: #fdeeee; border: 1px solid rgba(192, 38, 38, .25); }

/* Rodapé */
.rodape { background: var(--profundo); color: var(--suave-profundo); padding: 64px 0 24px; }
.rodape a { color: var(--sobre-profundo); text-decoration: none; display: block; padding: 4px 0; font-size: .95rem; }
.rodape a:hover { text-decoration: underline; }
.rodape__topo { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.rodape__marca p { font-size: .95rem; max-width: 26em; margin: 14px 0 0; }
.rodape__titulo { font: 600 .82rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: #7ff0c0; margin-bottom: 10px; }
.rodape__fim { font-size: .86rem; margin: 48px 0 0; padding-top: 22px; border-top: 1px solid rgba(234, 255, 245, .14); }
.whats-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 15; background: #128c4b; color: #fff; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: var(--sombra-forte); }

/* Tablet */
@media (max-width: 1080px) {
  .topo__menu-botao { display: inline-block; }
  .topo__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; background: #fff; border-bottom: 1px solid var(--linha); box-shadow: var(--sombra); padding: 12px 20px 24px; max-height: calc(100vh - 68px); overflow-y: auto; }
  .topo__menu.aberto { display: flex; }
  .topo__link { padding: 12px; font-size: 1.02rem; justify-content: space-between; width: 100%; }
  .topo__grupo::after { display: none; }
  .topo__painel, .topo__painel--largo { position: static; width: auto; display: none; grid-template-columns: 1fr; opacity: 1; visibility: visible; transform: none; transition: none; box-shadow: none; border: 0; border-left: 2px solid var(--borda-verde); border-radius: 0; margin: 4px 0 8px 12px; padding: 0 0 0 8px; }
  .topo__grupo.aberto .topo__painel { display: grid; transform: none; }
  .topo__item small { display: none; }
  .topo__item { align-items: center; }
  .topo__acoes { margin: 12px 0 0; justify-content: space-between; }
  .heroi__grade { grid-template-columns: 1fr; gap: 48px; }
  .heroi__desenho { max-width: 560px; margin: 0 auto; width: 100%; }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagina { grid-template-columns: 1fr; gap: 40px; }
  .cartao--lista { position: static; }
  .rodape__topo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
}
/* Celular */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .secao { padding: 56px 0; }
  .heroi { padding: 48px 0 96px; }
  .heroi__botoes .botao { flex: 1 1 100%; }
  .heroi__etiqueta { font-size: .78rem; padding: 8px 12px; }
  .totem { transform: none; border-radius: 22px; padding: 8px; }
  .totem__tela { font-size: .68rem; padding: 10px; border-radius: 16px; }
  .totem__abas span:last-child, .totem__mais { display: none; }
  .numeros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 20px; width: auto; }
  .numeros__grade p { padding: 20px 16px; border-top: 1px solid var(--linha); }
  .numeros__grade p:nth-child(odd) { border-left: 0; }
  .numeros__grade p:nth-child(-n+2) { border-top: 0; }
  .numeros__grade strong { font-size: 1.3rem; }
  .grade-3, .grade-4, .continue__lista, .glossario, .duas-colunas, .destaque { grid-template-columns: 1fr; }
  .grade-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-colunas, .destaque { gap: 40px; }
  .passos--linha { grid-template-columns: 1fr; gap: 8px; }
  .passos--linha li { padding: 0 0 28px 72px; }
  .passos--linha li::after { left: 23px; right: auto; top: 56px; bottom: 4px; width: 2px; height: auto; }
  .passos--linha h3 { margin-top: 8px; }
  .chamada { padding: 32px 24px; border-radius: 22px; }
  .chamada__botoes .botao { flex: 1 1 100%; }
  .topo-pagina { padding: 32px 0 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}