/* ===========================================================================
   BASTIONCYBER — folha de estilo do site comercial
   ===========================================================================

   TEMA CLARO, CORPORATIVO. Nao ha' dark mode nem `prefers-color-scheme`: a
   identidade e' uma so'.

   SEM CDN, SEM FONTE EXTERNA, SEM JAVASCRIPT. Tres motivos, na ordem em que
   importam:

     1. e' o site de uma empresa de seguranca — script de terceiro na pagina
        institucional e' superficie que nao precisa existir;
     2. a pagina fica identica com o link caido, e o revisor do cadastro
        comercial pode abrir de qualquer rede;
     3. os menus abrem por `:hover`/`:focus-within` puro, como pedido.

   A pilha de fontes e' a do SISTEMA: carrega instantaneo e nao vaza o IP do
   visitante para servidor de fonte de terceiro.
   ========================================================================= */

:root {
  /* Escala de cinza (slate) — o corpo da identidade. */
  --branco:      #ffffff;
  --cinza-50:    #f8fafc;
  --cinza-100:   #f1f5f9;
  --cinza-200:   #e2e8f0;
  --cinza-300:   #cbd5e1;
  --cinza-500:   #64748b;
  --cinza-600:   #475569;
  --cinza-700:   #334155;
  --cinza-900:   #0f172a;

  /* Azul institucional, usado com parcimonia: acao, foco e o filete de marca.
     Cor demais num site B2B de seguranca le-se como consumo, nao como
     infraestrutura. */
  --azul:        #1d4ed8;
  --azul-escuro: #1e3a8a;
  --azul-claro:  #eff6ff;

  --raio:        10px;
  --largura:     1120px;
  --sombra:      0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --transicao:   .18s ease;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-700);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--cinza-900); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.05rem); letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem);  letter-spacing: -.02em;  font-weight: 700; }
h3 { font-size: 1.075rem; letter-spacing: -.01em; font-weight: 700; }
p  { margin: 0 0 1rem; }

a { color: var(--azul); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-escuro); text-decoration: underline; }

/* Foco visivel em TODO elemento interativo. Um outline removido "por estetica"
   deixa o site inutilizavel por teclado — e o menu abaixo depende de foco. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

/* Atalho para quem navega por teclado pular o menu inteiro. */
.pular {
  position: absolute; left: -9999px;
  background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; top: 0; z-index: 100; }

/* ===========================================================================
   CABECALHO E MENU COM SUBMENU EM CSS PURO
   ===========================================================================
   O submenu abre em `:hover` (pedido) E em `:focus-within`. O segundo nao e'
   enfeite: sem ele, quem navega por teclado NUNCA alcanca "Funcionalidades" ou
   "Contato" — os itens existem no DOM e sao inalcancaveis. Custa uma linha.

   `visibility` + `opacity` em vez de `display:none`: `display` nao anima e
   tira o elemento do fluxo de foco de forma abrupta.
   ========================================================================= */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--cinza-200);
}
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }

/* --- MARCA: escudo minimalista, metade preta / metade clara ---------------
   O SVG e' INLINE no HTML (nao <img>): escala sem perder nitidez, nao custa
   requisicao e o mesmo desenho vira o favicon por data URI. Aqui so' o
   dimensionamento. */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cinza-900); letter-spacing: -.03em; font-size: 1.08rem; }
.marca:hover { text-decoration: none; color: var(--cinza-900); }
.marca .logo { width: 26px; height: 31px; flex: none; display: block; }
.marca-texto { line-height: 1; }
.marca-forte { font-weight: 800; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }

.nav-item > a,
.nav-item > .rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 8px;
  color: var(--cinza-700); font-size: .93rem; font-weight: 600;
  cursor: default; white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.nav-item > a { cursor: pointer; }
.nav-item:hover > a, .nav-item:hover > .rotulo,
.nav-item:focus-within > a, .nav-item:focus-within > .rotulo {
  background: var(--cinza-100); color: var(--cinza-900); text-decoration: none;
}

/* A seta gira quando o submenu esta' aberto — o unico indicador de estado que
   um menu sem JS consegue dar. */
.seta { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--transicao); }
.nav-item:hover .seta, .nav-item:focus-within .seta { transform: rotate(-135deg) translate(-3px, -3px); }

.submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 232px; margin: 0; padding: 8px;
  list-style: none;
  background: var(--branco);
  border: 1px solid var(--cinza-200); border-radius: var(--raio);
  box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
/* PONTE DE HOVER. Sem esta faixa invisivel entre o item e o submenu, o menu
   fecha no vao de 1px que o mouse atravessa ao descer — o defeito classico de
   dropdown em CSS puro. */
.nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--cinza-700); font-size: .9rem; font-weight: 500;
}
.submenu a:hover, .submenu a:focus-visible { background: var(--azul-claro); color: var(--azul-escuro); text-decoration: none; }
.submenu .desc { display: block; font-size: .78rem; color: var(--cinza-500); font-weight: 400; }

/* ===========================================================================
   BOTOES
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 9px;
  font-size: .95rem; font-weight: 650; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-escuro); color: #fff; }
.btn-secundario { background: var(--branco); color: var(--cinza-900); border-color: var(--cinza-300); }
.btn-secundario:hover { background: var(--cinza-50); border-color: var(--cinza-500); color: var(--cinza-900); }
.btn-pequeno { padding: 9px 16px; font-size: .88rem; border-radius: 8px; }
.btn-bloco { display: flex; width: 100%; margin-top: auto; }

/* O CTA do header e' um BOTAO dentro do menu: ele nao herda o realce cinza dos
   outros itens de navegacao, senao o azul some no hover. */
.destaque-nav > a { padding: 0; background: none !important; }
.destaque-nav:hover > a, .destaque-nav:focus-within > a { background: none; }
.destaque-nav .btn-primario { color: #fff; }
.destaque-nav .btn-primario:hover { color: #fff; background: var(--azul-escuro); }

/* ===========================================================================
   HERO
   ========================================================================= */
.hero {
  padding: 84px 0 72px;
  background:
    /* malha tenue, feita so' com gradiente: nenhuma imagem para carregar */
    linear-gradient(var(--cinza-200) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--cinza-200) 1px, transparent 1px) 0 0 / 56px 100%,
    linear-gradient(180deg, var(--cinza-50), var(--branco) 78%);
  border-bottom: 1px solid var(--cinza-200);
  position: relative;
}
/* Esmaece a malha nas bordas para ela nao competir com o texto. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, var(--branco) 100%);
}
.hero .container { position: relative; z-index: 1; max-width: 880px; text-align: center; }

.selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 22px;
  background: var(--azul-claro); color: var(--azul-escuro);
  border: 1px solid #bfdbfe; border-radius: 999px;
  font-size: .8rem; font-weight: 650; letter-spacing: .02em;
}
.selo .ponto { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }

.hero .sub { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--cinza-600); max-width: 660px; margin: 0 auto 34px; }
.hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero .nota { margin-top: 26px; font-size: .84rem; color: var(--cinza-500); }

/* ===========================================================================
   SECOES
   ========================================================================= */
.secao { padding: 76px 0; }
.secao.alt { background: var(--cinza-50); border-top: 1px solid var(--cinza-200); border-bottom: 1px solid var(--cinza-200); }
.secao-cabeca { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.secao-cabeca .olho { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--azul); margin-bottom: 10px; }
.secao-cabeca p { color: var(--cinza-600); margin: 0; }

/* --- grade de funcionalidades ----------------------------------------------
   TRES COLUNAS (2026-08-23). Com seis cards, 3x2 fecha duas linhas cheias; em
   duas colunas seriam tres linhas e a secao empurraria o resto da pagina para
   baixo do dobro da tela.

   `align-items: stretch` (padrao do grid) + `.cartao` como FLEX COLUMN com
   `.tag { margin-top: auto }`: as seis etiquetas cinzas alinham na MESMA linha
   horizontal, mesmo com descricoes de 2, 3 e 4 linhas. Sem isso cada etiqueta
   flutua na altura do proprio texto e a grade parece desalinhada — e' o mesmo
   ajuste que os botoes "Assinar Agora" receberam no quadro de precos. */
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cartao {
  display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 12px;
  padding: 26px 24px; transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.cartao:hover { border-color: var(--cinza-300); box-shadow: var(--sombra); transform: translateY(-2px); }
.cartao .icone {
  width: 42px; height: 42px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--azul-claro); border: 1px solid #dbeafe; color: var(--azul);
}
.cartao .icone svg { width: 21px; height: 21px; }
.cartao h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* O selo da AMEACA neutralizada. Vermelho contido: e' o unico ponto quente da
   pagina, e ele existe para o olho parar no problema que o card resolve. */
.cartao .contra {
  font-size: .655rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 5px; padding: 3px 8px; white-space: nowrap;
}
.cartao p { color: var(--cinza-600); font-size: .93rem; margin-bottom: 14px; }
.cartao .tag {
  display: inline-block; align-self: flex-start; margin-top: auto;
  padding: 3px 9px; border-radius: 6px;
  background: var(--cinza-100); border: 1px solid var(--cinza-200);
  color: var(--cinza-600); font-size: .74rem; font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- arquitetura: duas colunas -------------------------------------------- */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.lista-checada { list-style: none; margin: 0; padding: 0; }
.lista-checada li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--cinza-600); font-size: .95rem; }
.lista-checada li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--azul-claro); border: 1px solid #bfdbfe;
}
.lista-checada li::after {
  content: ""; position: absolute; left: 5px; top: 10px;
  width: 5px; height: 8px; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: rotate(45deg);
}
.lista-checada strong { color: var(--cinza-900); font-weight: 650; }

/* Diagrama de aneis — inline, sem imagem. */
.anel {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 12px;
  padding: 24px; box-shadow: var(--sombra);
}
.anel .faixa {
  border: 1px solid var(--cinza-200); border-radius: 9px; padding: 14px 16px; margin-bottom: 12px;
  background: var(--cinza-50);
}
.anel .faixa:last-child { margin-bottom: 0; }
.anel .faixa.kernel { background: var(--azul-claro); border-color: #bfdbfe; }
.anel .faixa .titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--cinza-900); font-size: .9rem; }
.anel .faixa .detalhe { font-size: .82rem; color: var(--cinza-500); margin: 4px 0 0; }
.anel .faixa .anilha {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; font-weight: 700; color: var(--azul-escuro);
  background: var(--branco); border: 1px solid #bfdbfe; border-radius: 5px; padding: 2px 7px;
}

/* --- licenciamento (LEGADO) -------------------------------------------------
   A secao `.painel` foi substituida por `.precos` quando os valores passaram a
   aparecer na pagina. As regras ficam porque `.painel` ainda serve de caixa
   generica centralizada, e apaga-las agora quebraria qualquer uso futuro sem
   avisar. Nao ha' consumidor no index.html de hoje. */
.painel {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 12px;
  padding: 34px; box-shadow: var(--sombra); max-width: 780px; margin: 0 auto; text-align: center;
}
.painel .passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; text-align: left; }
.painel .passo .n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); color: #fff; font-size: .8rem; font-weight: 700; margin-bottom: 10px;
}
.painel .passo p { font-size: .88rem; color: var(--cinza-600); margin: 0; }
.painel .passo strong { display: block; color: var(--cinza-900); font-size: .92rem; margin-bottom: 2px; }

/* --- contato ---------------------------------------------------------------*/
.contato-caixa { text-align: center; }
.contato-caixa .email {
  display: inline-block; margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 650;
}

/* ===========================================================================
   PLANOS E PRECOS
   ===========================================================================
   Quatro cards numa linha no desktop, um por linha no celular. O plano ANUAL e'
   o unico com borda azul, faixa "Best Value" e botao primario — num quadro de
   precos, mais de um destaque nao destaca nada.

   `align-items: stretch` + `.btn-bloco { margin-top: auto }`: os botoes ficam
   alinhados na MESMA linha horizontal mesmo com textos de comprimentos
   diferentes. Sem isso, cada "Assinar Agora" flutua numa altura, e a grade
   parece quebrada.
   ========================================================================= */

/* Os tres passos da ativacao, em faixa horizontal acima dos precos. */
.passos-linha {
  list-style: none; margin: 0 0 34px; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 12px;
}
.passos-linha li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--cinza-600); }
.passos-linha .n {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: #fff; font-size: .78rem; font-weight: 700;
}
.passos-linha strong { color: var(--cinza-900); font-weight: 650; }

.precos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }

.preco {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 12px;
  padding: 26px 22px 22px;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.preco:hover { border-color: var(--cinza-300); box-shadow: var(--sombra); transform: translateY(-2px); }

.preco-nome {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cinza-500); margin: 0 0 10px;
}
.preco-valor {
  margin: 0 0 4px; color: var(--cinza-900);
  font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preco-valor .cifra { font-size: 1.35rem; font-weight: 700; vertical-align: super; margin-right: 2px; }
.preco-valor .periodo { font-size: .92rem; font-weight: 600; color: var(--cinza-500); letter-spacing: -.01em; }
.preco-equiv { margin: 0 0 14px; font-size: .86rem; color: var(--cinza-500); }
.preco-equiv strong { color: var(--cinza-700); font-weight: 700; }
.preco-copy { font-size: .91rem; color: var(--cinza-600); margin: 0 0 14px; }
.preco-inclui {
  margin: 0 0 20px; padding-top: 14px; border-top: 1px solid var(--cinza-200);
  font-size: .82rem; color: var(--cinza-500); line-height: 1.5;
}

/* Selo de economia, ancorado no canto do card. */
.economia {
  position: absolute; top: -10px; right: 16px;
  padding: 3px 10px; border-radius: 999px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.economia.forte { background: #d1fae5; border-color: #6ee7b7; }

/* O plano em destaque. */
.preco.melhor {
  border-color: var(--azul); border-width: 2px;
  box-shadow: 0 10px 30px rgba(29, 78, 216, .10);
  padding-top: 32px;
}
.preco.melhor:hover { border-color: var(--azul-escuro); }
.faixa-topo {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--azul); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 5px 0; border-radius: 10px 10px 0 0;
}
.preco.melhor .economia { top: 26px; }

.preco-rodape { margin: 30px 0 0; text-align: center; font-size: .9rem; color: var(--cinza-500); }

/* ---------------------------------------------------------------------------
   RESPONSIVO DOS PRECOS — media queries proprias, DEPOIS das gerais do arquivo,
   para nao serem sobrescritas pela regra `.grade { grid-template-columns: 1fr }`
   do bloco de 860px.
   ------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  /* Tres cards de funcionalidade numa largura de tablet espremem o titulo e o
     selo da ameaca na mesma linha; duas colunas devolvem o respiro. */
  .grade { grid-template-columns: repeat(2, 1fr); }
  .precos { grid-template-columns: repeat(2, 1fr); }
  /* Com duas colunas o selo do card da direita encosta na borda da tela em
     telas justas; recolhe-lo evita corte. */
  .economia { right: 12px; }
}
@media (max-width: 860px) {
  .passos-linha { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 620px) {
  .precos { grid-template-columns: 1fr; }
  .preco.melhor { padding-top: 32px; }
}

/* ===========================================================================
   POR QUE O GHOSTSHIELD? — os dois argumentos comerciais
   ===========================================================================
   Duas colunas iguais no desktop, empilhadas no celular. Sao BLOCOS DE TEXTO
   com hierarquia, e nao cards com sombra: aqui o que convence e' a frase, e
   moldura demais competiria com ela.
   ========================================================================= */

.argumentos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

.argumento {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 12px;
  padding: 30px 28px;
}
.arg-olho {
  display: inline-block; margin-bottom: 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-claro); border: 1px solid #dbeafe;
  border-radius: 6px; padding: 4px 10px;
}
/* A pergunta e' o gancho: corpo maior que o do paragrafo, peso menor que o de
   um titulo de secao. E' pull-quote, nao cabecalho. */
.argumento h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.24rem); font-weight: 700;
  line-height: 1.45; letter-spacing: -.015em; margin: 0 0 14px;
}
.argumento > p { color: var(--cinza-600); font-size: .95rem; margin: 0 0 18px; }

.lista-checada.compacta li { font-size: .88rem; margin-bottom: 10px; }

.arg-cta {
  display: inline-block; margin-top: 4px;
  font-size: .92rem; font-weight: 650;
}

/* --- barras de footprint ---------------------------------------------------
   Ver o comentario no HTML: NAO sao proporcionais (1:1000 apagaria a menor).
   O numero ao lado e' que carrega a informacao. */
.barras { margin: 4px 0 8px; display: grid; gap: 10px; }
.barra-linha { display: grid; grid-template-columns: 96px 1fr 54px; align-items: center; gap: 12px; }
.barra-rot { font-size: .8rem; color: var(--cinza-500); font-weight: 600; }
.barra-trilho { height: 10px; border-radius: 999px; background: var(--cinza-100); border: 1px solid var(--cinza-200); overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 999px; }
.barra-fill.legado { width: 100%; background: var(--cinza-300); }
.barra-fill.nosso  { width: 6%;   background: var(--azul); min-width: 10px; }
.barra-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 700; color: var(--cinza-500); text-align: right;
}
.barra-num.forte { color: var(--azul); }
.barras-nota { font-size: .78rem; color: var(--cinza-500); margin: 0; }

/* ===========================================================================
   FAIXA DE LICENCIAMENTO POR VOLUME
   ========================================================================= */
.faixa-volume {
  margin-top: 30px; padding: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-left: 4px solid var(--azul);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.faixa-volume-texto { font-size: .95rem; color: var(--cinza-600); max-width: 640px; }
.faixa-volume-texto strong { display: block; color: var(--cinza-900); font-weight: 700; font-size: 1.02rem; margin-bottom: 2px; }
.faixa-volume .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .argumentos { grid-template-columns: 1fr; gap: 20px; }
  .argumento { padding: 24px 22px; }
  .faixa-volume { flex-direction: column; align-items: flex-start; }
  .faixa-volume .btn { width: 100%; }
  .barra-linha { grid-template-columns: 84px 1fr 48px; gap: 8px; }
}

/* ===========================================================================
   TRANSPARENCIA E ESCOPO
   ===========================================================================
   Deliberadamente SEM os recursos visuais do resto da pagina: sem selo
   vermelho, sem icone, sem sombra, corpo menor. Ela alinha expectativa; se
   competisse em peso com o grid de defesas, leria-se como aviso de defeito.

   `.escopo-secao` e' branca e vem depois de `.secao.alt` (Planos, cinza), entao
   o contraste de fundo ja' separa as duas sem precisar de borda.
   ========================================================================= */
.escopo-secao { padding-top: 56px; padding-bottom: 64px; }

.escopo-painel {
  max-width: 860px; margin: 0 auto;
  padding: 32px 34px;
  background: var(--cinza-50);
  border: 1px solid var(--cinza-200);
  border-radius: 12px;
}
.escopo-painel h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0 0 12px; }
.escopo-intro { color: var(--cinza-600); font-size: .95rem; margin: 0 0 18px; }
.escopo-intro strong { color: var(--cinza-900); font-weight: 700; }

.escopo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.escopo-lista li {
  position: relative; padding-left: 26px;
  font-size: .92rem; color: var(--cinza-600); line-height: 1.6;
}
/* Marcador NEUTRO (traco cinza), e nao um "x" vermelho: a lista diz o que o
   produto nao faz por DESENHO, nao o que ele falha em fazer. */
.escopo-lista li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 12px; height: 2px; border-radius: 2px; background: var(--cinza-300);
}
.escopo-lista strong { color: var(--cinza-900); font-weight: 700; }

@media (max-width: 860px) {
  .escopo-painel { padding: 24px 20px; }
}

/* ===========================================================================
   RODAPE — bloco legal obrigatorio
   ========================================================================= */
.rodape { background: var(--cinza-50); border-top: 1px solid var(--cinza-200); padding: 56px 0 28px; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.rodape h4 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-900); margin: 0 0 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 9px; }
.rodape a { color: var(--cinza-600); font-size: .9rem; }
.rodape a:hover { color: var(--azul); }
.rodape .sobre p { font-size: .89rem; color: var(--cinza-500); max-width: 320px; margin: 12px 0 0; }
.rodape-base {
  border-top: 1px solid var(--cinza-200); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-size: .84rem; color: var(--cinza-500);
}
.rodape-base .legais { display: flex; flex-wrap: wrap; gap: 18px; }

/* ===========================================================================
   PAGINAS SIMPLES (termos / privacidade / reembolso)
   ========================================================================= */
.pagina { padding: 72px 0 84px; }
.pagina .container { max-width: 760px; }
.pagina .voltar { display: inline-block; margin-bottom: 26px; font-size: .9rem; font-weight: 600; }
.aviso-obra {
  margin-top: 26px; padding: 18px 20px;
  background: var(--cinza-50); border: 1px solid var(--cinza-200);
  border-left: 3px solid var(--azul); border-radius: var(--raio);
  color: var(--cinza-600); font-size: .93rem;
}
.aviso-obra strong { color: var(--cinza-900); }

/* ===========================================================================
   RESPONSIVO
   ===========================================================================
   ABAIXO DE 860px NAO HA' `:hover` CONFIAVEL. Num toque, o primeiro tap so'
   dispara o hover e o segundo navega — e num menu sem JS isso costuma resultar
   em item que "nao abre". A saida honesta e' NAO depender de hover ali: o
   submenu vira lista sempre visivel, empilhada. Ninguem fica sem alcancar o
   link.
   ========================================================================= */
@media (max-width: 860px) {
  .topo .container { flex-direction: column; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; gap: 10px; }
  .nav { flex-wrap: wrap; gap: 2px 18px; width: 100%; }
  .nav-item { position: static; }
  .nav-item::after { display: none; }
  .nav-item > a, .nav-item > .rotulo { padding: 6px 0; }
  .seta { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: none; box-shadow: none; background: transparent;
    padding: 0 0 6px 12px; display: flex; flex-wrap: wrap; gap: 0 14px;
  }
  .submenu a { padding: 4px 0; font-size: .86rem; }
  .submenu .desc { display: none; }

  .grade, .duas-colunas, .painel .passos { grid-template-columns: 1fr; }
  .duas-colunas { gap: 34px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero { padding: 56px 0 48px; }
  .secao { padding: 56px 0; }
}

@media (max-width: 540px) {
  .rodape-grade { grid-template-columns: 1fr; }
  .hero .acoes .btn { width: 100%; }
}

/* Respeita quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .cartao:hover { transform: none; }
}

/* Impressao: o revisor de cadastro comercial as vezes imprime ou salva em PDF. */
@media print {
  .topo, .hero::after { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}