/*
 * Camada visual da landing. Consome só `var(--bs-*)` de tokens.css —
 * nenhum hexadecimal escrito aqui (há teste que falha se aparecer um).
 *
 * As classes reproduzem a linguagem já existente no site
 * (`.bs-section`, `.bs-wrap`, `.bs-card`, `.bs-btn`, `.bs-steps`…) para
 * que a página seja reconhecível como ByteSeguro e para que cada bloco
 * tenha um equivalente direto no Kadence — ver WORDPRESS-KADENCE-MAP.md.
 */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-fonte);
  font-size: var(--bs-fs-corpo);
  line-height: var(--bs-lh-corpo);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img, svg { max-width: 100%; height: auto; }

p { margin: 0 0 var(--bs-s4); }
p:last-child { margin-bottom: 0; }

/*
 * "Compras.gov.br" e as URLs citadas são palavras únicas e longas. Sem
 * isto, o H1 media 269px numa tela de 320px. `break-word` só age quando
 * a palavra realmente não cabe.
 */
p, li, dd, dt, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }

a { color: var(--bs-cyan); }

:focus-visible {
  outline: 3px solid var(--bs-focus);
  outline-offset: 3px;
  border-radius: var(--bs-s1);
}

.link-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--bs-bg-2);
  color: var(--bs-text);
  padding: var(--bs-s3) var(--bs-s5);
  border-radius: 0 0 var(--bs-s3) 0;
}
.link-pular:focus { left: 0; }

/* Só para leitor de tela — rótulos que a diagramação já entrega visualmente. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Estrutura de seção ---------- */

.bs-section { padding: var(--bs-secao-y) var(--bs-gutter); }
.bs-section--alt { background: var(--bs-bg-3); }
/*
 * Seções de apoio (IA, público, benefícios, segurança) respiram menos que
 * as de decisão. Elas sustentam a compra, não a conduzem — e a sequência
 * delas criava grandes blocos vazios entre uma leitura e a seguinte.
 */
.bs-section--compacta { padding-top: var(--bs-s12); padding-bottom: var(--bs-s12); }
.bs-wrap { width: min(100% - 2 * var(--bs-gutter), var(--bs-wrap)); margin: 0 auto; }
.bs-wrap--texto { max-width: var(--bs-wrap-texto); }

.bs-kicker {
  display: flex;
  align-items: center;
  gap: var(--bs-s3);
  color: var(--bs-cyan);
  font-weight: var(--bs-peso-titulo);
  text-transform: uppercase;
  letter-spacing: var(--bs-ls-kicker);
  font-size: var(--bs-fs-kicker);
  margin: 0 0 var(--bs-s6);
}
.bs-kicker::before {
  content: "";
  width: 58px;
  height: 4px;
  background: var(--bs-cyan);
  border-radius: var(--bs-raio-btn);
  flex: none;
}

h1, h2, h3, h4 { line-height: var(--bs-lh-titulo); margin: 0 0 var(--bs-s4); }

.bs-title {
  font-size: var(--bs-fs-hero);
  font-weight: var(--bs-peso-titulo);
  letter-spacing: var(--bs-ls-titulo);
  text-transform: uppercase;
  margin: 0 0 var(--bs-s6);
}
.bs-section-title {
  font-size: var(--bs-fs-secao);
  font-weight: var(--bs-peso-titulo);
  letter-spacing: var(--bs-ls-titulo);
  text-transform: uppercase;
  margin: 0 0 var(--bs-s5);
}
.bs-lead {
  font-size: var(--bs-fs-lead);
  color: var(--bs-muted);
  max-width: var(--bs-wrap-texto);
  margin: 0 0 var(--bs-s8);
}

/* ---------- Botões (§29) ---------- */

.bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bs-s2);
  border: 0;
  border-radius: var(--bs-raio-btn);
  padding: 15px 24px;
  min-height: 48px;
  font-family: inherit;
  font-size: var(--bs-fs-btn);
  font-weight: var(--bs-peso-titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.bs-btn:hover { transform: translateY(-1px); opacity: 0.94; }
.bs-btn-primary {
  background: var(--bs-blue);
  color: var(--bs-text);
  box-shadow: var(--bs-sombra-btn);
}
.bs-btn-ghost {
  background: transparent;
  color: var(--bs-text);
  border: 1px solid var(--bs-line);
}
.bs-btn-texto {
  background: none;
  border: 0;
  padding: var(--bs-s2) 0;
  color: var(--bs-cyan);
  font-weight: var(--bs-peso-titulo);
  text-transform: uppercase;
  font-size: var(--bs-fs-kicker);
  letter-spacing: 0.07em;
  cursor: pointer;
}
/* CTA de conversão: mais alto e mais largo, sem esticar até a borda no desktop. */
.bs-btn-grande {
  min-height: 58px;
  padding: 18px 40px;
  font-size: 16px;
}
/* Dentro de card estreito, o botão ocupa a largura disponível. */
.bs-btn-bloco { width: 100%; margin-top: var(--bs-s6); }
.bs-actions { display: flex; gap: var(--bs-s3); flex-wrap: wrap; align-items: center; }

/* ---------- Cabeçalho ---------- */

.bs-topo { border-bottom: 1px solid var(--bs-line); background: var(--bs-bg); }
.bs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-s5);
  flex-wrap: wrap;
  padding: var(--bs-s4) 0;
}
.bs-logo {
  font-weight: var(--bs-peso-titulo);
  letter-spacing: -1px;
  font-size: 28px;
  color: var(--bs-text);
  text-transform: uppercase;
  text-decoration: none;
}
.bs-logo span { color: var(--bs-cyan); }
.bs-menu {
  display: flex;
  gap: var(--bs-s6);
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: var(--bs-peso-forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bs-menu a { color: var(--bs-muted); text-decoration: none; padding: var(--bs-s2) 0; display: inline-block; }
.bs-menu a:hover { color: var(--bs-text); }

/* ---------- Hero ---------- */

.bs-hero {
  background:
    radial-gradient(circle at 76% 22%, rgba(41, 86, 232, 0.42), transparent 36%),
    radial-gradient(circle at 22% 60%, rgba(36, 214, 255, 0.18), transparent 34%),
    linear-gradient(var(--bs-bg) 0%, var(--bs-bg-2) 54%, var(--bs-bg-3) 100%);
}
.bs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  grid-template-areas:
    "intro resumo"
    "beneficios resumo"
    "acoes resumo";
  column-gap: var(--bs-s12);
  row-gap: var(--bs-s6);
  align-items: start;
}
.bs-lead--integral { width: 100%; max-width: none; }
.bs-hero-intro { grid-area: intro; }
.bs-hero-resumo { grid-area: resumo; align-self: center; }
.bs-hero-acoes { grid-area: acoes; }
.bs-hero h1 { color: var(--bs-text); }
.bs-nota {
  color: var(--bs-muted);
  font-size: 15px;
  margin-top: var(--bs-s6);
}

.bs-beneficios { grid-area: beneficios; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bs-s3); }
.bs-beneficios li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bs-s3);
  align-items: start;
  color: var(--bs-text);
}
.bs-beneficios li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-radius: var(--bs-raio-btn);
  background: var(--bs-cyan);
}

.bs-painel {
  border: 1px solid var(--bs-line-forte);
  border-radius: var(--bs-raio-painel);
  background: var(--bs-bg-2);
  padding: var(--bs-s8);
  box-shadow: var(--bs-sombra-painel);
}
.bs-painel h2 { font-size: var(--bs-fs-card-titulo); text-transform: none; letter-spacing: -0.02em; }
.bs-painel-promessa { color: var(--bs-muted); font-size: 16px; margin: 0; }
.bs-painel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bs-s4); }
.bs-painel-lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bs-s3);
  align-items: start;
  color: var(--bs-text);
  font-size: 17px;
}
.bs-painel-lista li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-radius: var(--bs-raio-btn);
  background: var(--bs-cyan);
}
/* A promessa aprovada, em texto secundário: presente e literal, sem competir com o H1. */
.bs-promessa {
  color: var(--bs-muted);
  font-size: 15px;
  margin-top: var(--bs-s4);
  max-width: 620px;
  border-left: 2px solid var(--bs-line-forte);
  padding-left: var(--bs-s4);
}

/* ---------- Cards ---------- */

/*
 * `min(260px, 100%)` em vez de `260px`: numa tela de 320px o contêiner
 * útil tem 232px, e um mínimo fixo de 260px força o grid a ficar mais
 * largo que a tela. Medido a 320px antes da correção: 260 contra 232.
 */
.bs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--bs-s5); }
/*
 * Contagem fixa em vez de `auto-fit` onde a quantidade é conhecida: com
 * seis cards o cálculo automático produzia 4 + 2 e deixava a segunda
 * linha órfã. As colunas caem para 2 e depois 1 nas media queries.
 */
.bs-cards--3 { grid-template-columns: repeat(3, 1fr); }
.bs-cards--4 { grid-template-columns: repeat(4, 1fr); }
/* Cards da mesma linha terminam juntos, independentemente do texto. */
.bs-cards > .bs-card { display: flex; flex-direction: column; }
.bs-card {
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-raio-card);
  background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035));
  padding: var(--bs-s8);
}
.bs-card h3 { font-size: 20px; font-weight: var(--bs-peso-forte); letter-spacing: -0.02em; color: var(--bs-text); }
.bs-card p { color: var(--bs-muted); font-size: 16px; margin: 0; }
.bs-card ul { margin: 0; padding-left: 1.15em; color: var(--bs-muted); }
.bs-card li { margin-bottom: var(--bs-s2); }

.bs-fechamento {
  margin-top: var(--bs-s8);
  font-size: var(--bs-fs-lead);
  color: var(--bs-text);
  max-width: var(--bs-wrap-texto);
}
.bs-problema-fechamento { width: 100%; max-width: none; }

/* ---------- Passos numerados ---------- */

.bs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bs-s4); }
.bs-step {
  border: 1px solid var(--bs-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.043);
  padding: var(--bs-s6);
}
.bs-step b { display: block; color: var(--bs-cyan); font-size: 30px; margin-bottom: var(--bs-s4); }
.bs-step h3 { font-size: 19px; color: var(--bs-text); }
.bs-step ul { margin: 0; padding-left: 1.15em; color: var(--bs-muted); font-size: 15px; }

/* ---------- Aviso / alerta ---------- */

.bs-aviso {
  border: 1px solid var(--bs-line);
  border-left: 5px solid var(--bs-cyan);
  border-radius: var(--bs-raio-mini);
  background: rgba(255, 255, 255, 0.043);
  padding: var(--bs-s5) var(--bs-s6);
  margin-top: var(--bs-s8);
  color: var(--bs-muted);
}
.bs-aviso strong { color: var(--bs-text); display: block; margin-bottom: var(--bs-s2); }

/* ---------- Formulário (§13, §14) ---------- */

.bs-form { display: grid; gap: var(--bs-s10); }
.bs-form fieldset { border: 0; margin: 0; padding: 0; }
.bs-form legend {
  font-size: var(--bs-fs-card-titulo);
  font-weight: var(--bs-peso-forte);
  letter-spacing: -0.02em;
  color: var(--bs-text);
  margin-bottom: var(--bs-s5);
  padding: 0;
}
.bs-opcoes { display: grid; gap: var(--bs-s3); }
/*
 * Duas colunas onde há mais de quatro opções: encurta o formulário no
 * desktop sem mexer em um único valor, rótulo ou ordem. Volta a uma
 * coluna no celular.
 */
.bs-opcoes--duplas { grid-template-columns: 1fr 1fr; }
.bs-opcao {
  display: flex;
  gap: var(--bs-s4);
  align-items: flex-start;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-raio-mini);
  background: rgba(255, 255, 255, 0.043);
  padding: var(--bs-s4) var(--bs-s5);
  min-height: 48px;
  cursor: pointer;
}
.bs-opcao:hover { border-color: var(--bs-line-forte); }
.bs-opcao input { margin: 4px 0 0; width: 20px; height: 20px; accent-color: var(--bs-cyan); flex: none; }
.bs-opcao:has(input:checked) { border-color: var(--bs-cyan); background: rgba(36, 214, 255, 0.1); }
.bs-opcao:has(input:focus-visible) { outline: 3px solid var(--bs-focus); outline-offset: 3px; }

.bs-erro-campo {
  display: none;
  color: var(--bs-erro);
  font-weight: var(--bs-peso-medio);
  margin-top: var(--bs-s3);
}
.bs-campo--invalido .bs-erro-campo { display: block; }
.bs-campo--invalido .bs-opcoes { border-left: 3px solid var(--bs-erro); padding-left: var(--bs-s4); }

.bs-erro-resumo {
  display: none;
  border: 1px solid var(--bs-erro);
  border-radius: var(--bs-raio-mini);
  padding: var(--bs-s4) var(--bs-s5);
  color: var(--bs-erro);
}
.bs-erro-resumo[data-visivel="sim"] { display: block; }

/* ---------- Painel do diagnóstico ----------
 *
 * O resultado gratuito aprovado é uma peça CLARA e não foi alterado.
 * Aqui ele aparece sobre uma superfície branca, como a folha de
 * documento que é — em vez de ser repintado para o escuro, o que
 * mexeria em componente já validado. Decisão registrada em
 * AUDITORIA-COERENCIA-BYTESEGURO.md.
 */

/*
 * No resultado gratuito original, o respiro entre blocos vem de
 * `#conteudo-principal` (flex column + gap) — o invólucro de página que
 * a landing não reproduz, para não criar um segundo `main`. Repetimos
 * aqui só o layout, lendo o MESMO token de espaçamento aprovado, para
 * que os blocos não fiquem colados.
 */
.bs-doc {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  background: var(--bs-surface-doc);
  color: var(--bs-text-doc);
  border-radius: var(--bs-raio-painel);
  padding: var(--bs-s8);
  box-shadow: var(--bs-sombra-painel);
}
.bs-doc :is(h1, h2, h3, h4) { color: var(--bs-text-doc); }
.bs-doc a { color: var(--bs-accent-doc); }
.bs-doc :focus-visible { outline-color: var(--bs-accent-doc); }

/*
 * Legibilidade do diagnóstico DENTRO da landing.
 *
 * Tudo aqui é escopado em `.bs-doc` — os componentes do resultado
 * gratuito não são tocados, e a página autônoma dele continua exatamente
 * como foi aprovada. O que muda é só como ele é lido quando embutido em
 * uma página comercial: corpo um pouco maior, títulos internos com mais
 * presença e mais ar entre os blocos.
 */
.bs-doc {
  font-size: 17px;
  line-height: 1.62;
  border: 1px solid var(--bs-line-doc);
}
.bs-doc .secao > h2 { font-size: 22px; }
.bs-doc .secao { margin: 0; }
.bs-doc .cta-principal {
  min-height: 58px;
  padding: 18px 36px;
  font-size: 16px;
}

.bs-resultado[hidden] { display: none; }
.bs-resultado-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-s4);
  align-items: center;
  margin-top: var(--bs-s8);
}

/* ---------- Comparação (§16) ---------- */

/*
 * `align-items: start` para que cada card termine onde o conteúdo dele
 * termina. Com alturas iguais, o card do gratuito (5 itens) ganhava um
 * vazio de quase 400px ao lado do completo (11 itens) — e o pedido desta
 * rodada é justamente eliminar blocos vazios.
 */
.bs-comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-s5); align-items: start; }
.bs-comparacao-coluna { display: flex; flex-direction: column; gap: var(--bs-s6); }
.bs-comparacao-card {
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-raio-card);
  padding: var(--bs-s8);
}
/*
 * O card do roteiro completo é o destino comercial da seção: borda ciano
 * cheia, fundo distinto e um leve realce. A diferença é de hierarquia,
 * não de estridência — não há urgência, contagem nem desconto.
 */
.bs-comparacao .destaque {
  border-color: var(--bs-cyan);
  border-width: 2px;
  background: rgba(36, 214, 255, 0.09);
  box-shadow: 0 18px 50px rgba(36, 214, 255, 0.12);
}
.bs-etiqueta {
  display: inline-block;
  margin: 0 0 var(--bs-s3);
  padding: var(--bs-s1) var(--bs-s3);
  border-radius: var(--bs-raio-btn);
  background: var(--bs-cyan);
  color: var(--bs-bg);
  font-size: 12px;
  font-weight: var(--bs-peso-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bs-comparacao h3 { font-size: 21px; color: var(--bs-text); }
.bs-comparacao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bs-s3); }
.bs-comparacao-completo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bs-s6); }
.bs-comparacao li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bs-s3); align-items: start; color: var(--bs-muted); }
.bs-comparacao li::before { content: "—"; color: var(--bs-cyan); }
.bs-comparacao-texto { margin: 0; color: var(--bs-muted); font-size: var(--bs-fs-corpo); }
.bs-comparacao-texto--completo { color: var(--bs-text); font-size: var(--bs-fs-lead); }

/* ---------- Listas em duas colunas ---------- */

.bs-lista-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-s5); align-items: start; }
.bs-seguranca-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bs-s8); }
/*
 * A lista desenha o próprio marcador com `::before`, então não precisa
 * do recuo nativo de lista. `.bs-card ul` reinjetava 1,15em desse recuo
 * (especificidade maior que a da classe) — espaço morto que ainda
 * estreitava a coluna de texto. Daí o `padding-left: 0` explícito.
 *
 * Cada item é um GRID de duas colunas, não um flex: a coluna do texto é
 * `minmax(0, 1fr)`, que pode encolher abaixo do próprio conteúdo e
 * quebrar. Em flex, o texto vira um item anônimo com `min-width: auto` e
 * se recusa a ficar menor que a palavra mais longa — era isso que
 * produzia o estouro de 3px em contêiner estreito.
 */
.bs-lista-simples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bs-s3);
  color: var(--bs-muted);
}
.bs-card .bs-lista-simples,
.bs-painel .bs-lista-simples { padding-left: 0; }
.bs-lista-simples li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bs-s3);
  align-items: start;
}
.bs-lista-simples li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 10px;
  border-radius: var(--bs-raio-btn);
  background: var(--bs-cyan);
}
.bs-lista-simples--nao li::before { background: var(--bs-muted); }

/* ---------- Exemplo de ação ---------- */

.bs-acao-demo {
  border: 1px solid var(--bs-line-forte);
  border-radius: var(--bs-raio-painel);
  background: var(--bs-bg-2);
  padding: var(--bs-s8);
}
.bs-partes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-s5) var(--bs-s8); }
.bs-parte { display: flex; gap: var(--bs-s4); align-items: flex-start; }
.bs-parte-num {
  flex: none;
  color: var(--bs-cyan);
  font-weight: var(--bs-peso-titulo);
  font-size: 15px;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.bs-parte h3 { font-size: 17px; font-weight: var(--bs-peso-forte); color: var(--bs-text); margin: 0 0 var(--bs-s1); }
.bs-parte p { color: var(--bs-muted); font-size: 15px; margin: 0; }
.bs-acao-demo-aviso {
  margin: var(--bs-s8) 0 0;
  padding-top: var(--bs-s5);
  border-top: 1px solid var(--bs-line);
  color: var(--bs-muted);
  font-size: 15px;
}
.bs-acao-demo-aviso strong { color: var(--bs-text); }

/* ---------- Oferta (§23) ---------- */

.bs-oferta {
  border: 1px solid var(--bs-line-forte);
  border-radius: var(--bs-raio-cta);
  background: linear-gradient(var(--bs-bg-2), var(--bs-bg));
  padding: var(--bs-s12);
  text-align: center;
}
.bs-oferta-subtitulo { color: var(--bs-muted); font-size: 17px; margin: 0 0 var(--bs-s6); }
.bs-preco { font-size: 52px; font-weight: var(--bs-peso-titulo); color: var(--bs-cyan); letter-spacing: -0.03em; margin: 0 0 var(--bs-s2); }
.bs-preco-forma { color: var(--bs-text); font-size: 16px; margin: 0 0 var(--bs-s8); }
.bs-oferta-rotulo {
  color: var(--bs-muted);
  font-size: var(--bs-fs-kicker);
  font-weight: var(--bs-peso-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--bs-s4);
}
/* O processador do pagamento é dito em texto — não há ativo de marca autorizado. */
.bs-nota-pagamento { color: var(--bs-muted); font-size: 15px; margin-top: var(--bs-s6); }
.bs-oferta .bs-oferta-itens {
  list-style: none;
  margin: 0 auto var(--bs-s8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bs-s3) var(--bs-s6);
  max-width: none;
  text-align: left;
}
.bs-oferta li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bs-s3); align-items: start; color: var(--bs-muted); }
.bs-oferta li::before { content: ""; width: 7px; height: 7px; margin-top: 10px; border-radius: var(--bs-raio-btn); background: var(--bs-cyan); }

/* Como o comprador recebe: fica ao lado da oferta, não escondido no rodapé. */
.bs-aviso--entrega { border-left-color: var(--bs-cyan); }
.bs-aviso--entrega p { margin-bottom: var(--bs-s3); }
.bs-aviso--entrega p:last-child { margin-bottom: 0; }

/* ---------- FAQ (§25) ---------- */

.bs-faq { display: grid; gap: var(--bs-s3); }
.bs-faq-item { border: 1px solid var(--bs-line); border-radius: var(--bs-raio-mini); background: rgba(255, 255, 255, 0.043); overflow: hidden; }
.bs-faq-botao {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bs-s4);
  background: none;
  border: 0;
  padding: var(--bs-s5) var(--bs-s6);
  min-height: 48px;
  color: var(--bs-text);
  font-family: inherit;
  font-size: 18px;
  font-weight: var(--bs-peso-forte);
  text-align: left;
  cursor: pointer;
}
.bs-faq-botao::after { content: "+"; color: var(--bs-cyan); font-size: 26px; line-height: 1; flex: none; }
.bs-faq-botao[aria-expanded="true"]::after { content: "−"; }
.bs-faq-resposta { padding: 0 var(--bs-s6) var(--bs-s5); color: var(--bs-muted); }
.bs-faq-resposta[hidden] { display: none; }

/*
 * "Outras dúvidas": `<details>` recolhe sem JavaScript, é focável por
 * teclado e mantém o conteúdo no HTML para busca e leitor de tela.
 */
.bs-faq-mais { margin-top: var(--bs-s6); }
.bs-faq-mais > summary {
  cursor: pointer;
  padding: var(--bs-s4) 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  color: var(--bs-cyan);
  font-weight: var(--bs-peso-titulo);
  font-size: var(--bs-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.bs-faq-mais > summary:focus-visible { outline: 3px solid var(--bs-focus); outline-offset: 3px; }
.bs-faq-mais[open] > summary { margin-bottom: var(--bs-s3); }

/* ---------- CTA final ---------- */

.bs-cta {
  border: 1px solid var(--bs-line-forte);
  border-radius: var(--bs-raio-cta);
  background:
    radial-gradient(circle at 80% 20%, rgba(36, 214, 255, 0.18), transparent 34%),
    linear-gradient(var(--bs-bg-2), var(--bs-bg));
  padding: var(--bs-s12);
  text-align: center;
}
.bs-cta h2 { color: var(--bs-text); }
.bs-cta p { color: var(--bs-muted); max-width: var(--bs-wrap-texto); margin: 0 auto var(--bs-s8); font-size: var(--bs-fs-lead); }
.bs-cta .bs-nota { margin: var(--bs-s6) auto 0; font-size: 15px; }

/* ---------- Rodapé ---------- */

.bs-footer { border-top: 1px solid var(--bs-line); padding: var(--bs-s8) var(--bs-gutter); color: var(--bs-muted); font-size: 15px; }
.bs-footer .bs-logo { display: inline-block; margin-bottom: var(--bs-s3); }
.bs-footer .bs-wrap > p { margin-bottom: var(--bs-s3); }
.bs-footer-links { list-style: none; margin: var(--bs-s4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bs-s3) var(--bs-s5); }
.bs-footer a { color: var(--bs-muted); }
.bs-footer a:hover { color: var(--bs-text); }

/* ---------- Faixa de demonstração (§40) ---------- */

.bs-demo {
  background: var(--bs-yellow);
  color: var(--bs-bg);
  padding: var(--bs-s3) var(--bs-gutter);
  font-weight: var(--bs-peso-forte);
  text-align: center;
}
.bs-demo a { color: var(--bs-bg); }
.bs-demo-casos { display: flex; flex-wrap: wrap; gap: var(--bs-s3); justify-content: center; margin-top: var(--bs-s2); }

/*
 * Filho de grid ou flex tem `min-width: auto` por padrão e se recusa a
 * encolher abaixo do próprio conteúdo — é a causa mais comum de rolagem
 * lateral em tela estreita.
 */
.bs-hero-grid > *,
.bs-cards > *,
.bs-steps > *,
.bs-comparacao > *,
.bs-lista-dupla > *,
.bs-actions > * { min-width: 0; }

/* ---------- Responsividade (§33) ---------- */

@media (max-width: 1100px) {
  .bs-steps,
  .bs-cards--3,
  .bs-cards--4 { grid-template-columns: 1fr 1fr; }
  .bs-oferta .bs-oferta-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bs-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "beneficios"
      "resumo"
      "acoes";
  }
}

@media (max-width: 767px) {
  .bs-section { padding: var(--bs-secao-y-mobile) var(--bs-s5); }
  /*
   * No celular a calha da `.bs-wrap` se somava ao padding da seção: 44px
   * de margem de cada lado numa tela de 375px, quase um quarto da
   * largura. O padding da seção já é a calha. O próprio site faz o mesmo
   * abaixo de 720px.
   */
  .bs-wrap { width: 100%; }
  .bs-painel { padding: var(--bs-s5); }
  .bs-section--compacta { padding-top: var(--bs-s10); padding-bottom: var(--bs-s10); }
  .bs-steps,
  .bs-comparacao,
  .bs-lista-dupla,
  .bs-cards--3,
  .bs-cards--4,
  .bs-partes,
  .bs-opcoes--duplas { grid-template-columns: 1fr; }
  .bs-comparacao-completo ul,
  .bs-seguranca-itens { grid-template-columns: 1fr; }
  .bs-oferta .bs-oferta-itens { grid-template-columns: 1fr; }
  .bs-acao-demo { padding: var(--bs-s5); }
  .bs-oferta,
  .bs-cta { padding: var(--bs-s8) var(--bs-s5); }
  .bs-doc { padding: var(--bs-s5); border-radius: var(--bs-raio-mini); }
  .bs-actions .bs-btn { width: 100%; }
  .bs-btn-grande { padding: 18px 24px; }
  .bs-nav { gap: var(--bs-s4); }
  .bs-menu { gap: var(--bs-s4); font-size: 13px; }
}