/* Site institucional (/, /planos, /como-funciona, /parceiros).
 *
 * Folha separada de propósito: spydata.css é carregado por TODAS as telas do
 * app, inclusive a caixa de confirmação de ações sensíveis. Uma chave `}`
 * desbalanceada aqui para nas 4 páginas do site; lá pararia o sistema inteiro.
 * Os TOKENS continuam vindo de spydata.css — este arquivo não declara :root.
 *
 * A regra que governa este arquivo, porque as páginas nasceram com estilo
 * inline: estilo inline vence qualquer seletor, então uma propriedade só pode
 * ficar no style="" se NENHUMA media query e NENHUM :hover a tocam. Por isso
 * `color`, `background`, `border`, `display` e `grid-template-columns` moram
 * aqui, e `padding`, `font-size`, `gap`, `margin` e `border-radius` seguem
 * inline — é o que deixa uma única classe servir 24 botões de tamanhos
 * diferentes. Onde o inline trazia o shorthand `border`, a classe leva o
 * shorthand inteiro: `border:1px solid X` inline inclui border-color e
 * derrotaria um `:hover { border-color }` de classe.
 *
 * Conversões do design system herdadas do site original: as ~14 superfícies
 * quentes viraram --s1/--s2, os 11 tons de linha viraram --line/--line-g, e os
 * raios 8/14/16 viraram 7/10/12 (botão/cartão/container). No canvas do mapa as
 * tintas são literais rgba(200,155,76,…) — ver o comentário em site.js.
 */

/* ---------- casca ---------- */
/* spydata.css põe body{display:flex;flex-direction:column}: sem o flex:1 aqui,
   página curta (Como funciona) renderiza o rodapé no meio da tela. */
.s-conteudo { flex: 1; }

.s-topo { border-bottom: 1px solid var(--line); background: var(--bg); }
.s-topo-linha {
  max-width: 1140px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.s-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.s-acoes { display: flex; align-items: center; gap: 16px; }

.s-rodape { border-top: 1px solid var(--line); background: var(--bg); }
.s-rodape-grid {
  max-width: 1140px; margin: 0 auto; padding: 44px 24px 28px;
  display: grid; grid-template-columns: 250px repeat(4, 1fr); gap: 24px;
}
.s-rodape-col { font-family: var(--f-title); font-size: 10px; letter-spacing: 1.6px; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.s-rodape-links { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.s-rodape-barra {
  max-width: 1140px; margin: 0 auto; padding: 0 24px 24px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--t3);
}

/* ---------- links e botões (os 8 pares base→hover do site) ---------- */
.s-a          { color: var(--t2); }
.s-a:hover    { color: var(--gold-h); }
.s-a-t1       { color: var(--t1); }
.s-a-t1:hover { color: var(--gold-h); }
.s-a-ouro       { color: var(--gold); }
.s-a-ouro:hover { color: var(--gold-h); }
.s-a-fraco       { color: var(--t3); }
.s-a-fraco:hover { color: var(--t2); }
.s-nav-ativo { color: var(--gold); font-weight: 600; }
.s-nav-ativo:hover { color: var(--gold-h); }

.s-btn        { background: var(--gold); color: #0B0B0B; }
.s-btn:hover  { background: var(--gold-h); color: #0B0B0B; }
.s-btn-borda        { border: 1px solid var(--line-g); color: var(--t1); }
.s-btn-borda:hover  { border-color: var(--gold); color: var(--gold-h); }
.s-btn-borda--ouro       { color: var(--gold); }

/* cartão que só acende a borda no hover */
.s-card-h       { background: var(--s1); border: 1px solid var(--line); }
.s-card-h:hover { border-color: var(--line-g); }

/* ---------- grades ---------- */
.s-hero       { display: grid; grid-template-columns: 430px 1fr 300px; }
.s-mock       { display: grid; grid-template-columns: 150px 1fr 200px; }
.s-g2         { display: grid; grid-template-columns: 1fr 1fr; }
.s-g3         { display: grid; grid-template-columns: repeat(3, 1fr); }
.s-g4         { display: grid; grid-template-columns: repeat(4, 1fr); }
.s-garantias  { display: grid; grid-template-columns: 250px repeat(3, 1fr); }
.s-depo       { display: grid; grid-template-columns: 220px repeat(3, 1fr); }
/* três larguras de coluna-título, mantidas distintas para não mexer no desktop */
.s-2col-230   { display: grid; grid-template-columns: 230px 1fr; }
.s-2col-300   { display: grid; grid-template-columns: 300px 1fr; }
.s-2col-340   { display: grid; grid-template-columns: 340px 1fr; }
.s-2col-cta   { display: grid; grid-template-columns: 1fr 300px; }
/* as 31 linhas do comparativo são <div> irmãs: só se alinham porque a grade é a
   MESMA declaração. Uma classe garante isso por construção — inline, bastava uma
   divergir para a tabela desalinhar. */
.s-comp-linha { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.s-rolagem    { overflow-x: auto; }

/* ---------- responsivo ---------- */
/* Breakpoints 1100/860/560, os mesmos que spydata.css já usa. As grades acima
   são a versão desktop; daqui para baixo elas quebram em menos colunas. */
@media (max-width: 1100px) {
  .s-hero { grid-template-columns: 1fr 300px; }
  .s-mock { grid-template-columns: 1fr 200px; }
  .s-g3, .s-g4, .s-garantias, .s-depo { grid-template-columns: repeat(2, 1fr); }
  .s-2col-230, .s-2col-300, .s-2col-340, .s-2col-cta { grid-template-columns: 1fr; }
  .s-rodape-grid { grid-template-columns: repeat(3, 1fr); }
  /* o mapa é ornamento e é posicionado em pixels absolutos: some junto com a
     coluna que o abrigava, e o JS para de desenhar (bail-out por offsetParent) */
  .s-mapa, .s-hero-mapa { display: none; }
}
@media (max-width: 860px) {
  .s-hero, .s-mock, .s-garantias, .s-depo, .s-g2 { grid-template-columns: 1fr; }
  .s-rodape-grid { grid-template-columns: repeat(2, 1fr); }
  .s-topo-linha { flex-wrap: wrap; gap: 14px; }
  .s-nav { order: 3; width: 100%; justify-content: center; gap: 20px; }
}
@media (max-width: 560px) {
  .s-g3, .s-g4, .s-rodape-grid { grid-template-columns: 1fr; }
  .s-nav { gap: 14px; font-size: 12.5px; }
  .s-rodape-barra { flex-direction: column; gap: 8px; }
  /* Tabela de 4 colunas não empilha: vira ilegível. Rola na horizontal, com o
     bloco interno preso na largura mínima em que ainda se lê. */
  .s-rolagem > * { min-width: 620px; }
}

/* ---------- mapa do hero ---------- */
/* O canvas sangra 59px à esquerda de propósito (a seção tem overflow:hidden) —
   é o que faz o mapa nascer sob o texto. Não trocar por inset:0. */
.s-mapa { position: absolute; left: -59px; top: 10px; width: 537px; height: 465px; pointer-events: none; }

/* ---------- animações do feed de demonstração ---------- */
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -120px 0; } 100% { background-position: 120px 0; } }
@keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes dotBlink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@keyframes flashFound {
  0%   { background: var(--gold-25); box-shadow: 0 0 0 1px rgba(200, 155, 76, .7), 0 0 24px rgba(200, 155, 76, .4); }
  100% { background: var(--s2); box-shadow: none; }
}
@keyframes searchGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(200, 155, 76, 0); }
  50%      { box-shadow: 0 0 16px var(--gold-16); }
}