/* ============================================================
   Guardian Tec — base.css
   Casca compartilhada pelas 19 páginas de conteúdo:
   tokens, reset, tipografia, cabeçalho, botões, rodapé.
   O que é específico de uma página continua no <style> dela.
   ============================================================ */

:root{
  --bg:#0E1116;
  --card:#1C2026;
  --line:#333A43;
  --text:#F3F5F7;
  --muted:#9BA3AC;
  /* 20/10/2026 — segundo tom de apagado, criado na auditoria.
     O index.html tinha SEIS cinzas cravados à mão (#6E767F, #636B74, #5C646D,
     #67707A) fora do sistema, e todos reprovavam no contraste: 3,2:1 a 4,1:1
     sobre o fundo. A saída não foi achatar tudo em --muted: a hierarquia de
     apagado existia de propósito. Este tom preserva a hierarquia E passa.
     #7C8590 sobre --bg = 5,06:1 (AA exige 4,5). */
  --muted-2:#7C8590;
  --blue:#2F80ED;
  /* Fundo de superfície azul com texto branco. O --blue da marca dá 3,87:1 com
     branco — passa só para texto grande. Este é o mínimo de desvio do azul que
     alcança 4,81:1. O --blue segue intacto como cor da marca. */
  --blue-acao:#2470D6;
  --blue-claro:#57A6FF;
  --wa:#0E7466;
  --titulo:'Poppins','Segoe UI',system-ui,sans-serif;
  --corpo:'Inter','Segoe UI',system-ui,sans-serif;
  /* Curvas fortes: as nativas do CSS são fracas demais e tiram a intenção
     do movimento. ease-out para entrada (começa rápido, responde na hora);
     ease para mudança de cor, que não tem direção. */
  --saida:cubic-bezier(.23,1,.32,1);
}

/* ---------- reset e base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{font-family:var(--corpo);background:var(--bg);color:var(--text);line-height:1.65;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-claro)}
h1,h2,h3{font-family:var(--titulo);font-weight:700;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- acessibilidade ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue-claro);outline-offset:2px}
.skip-link{position:absolute;left:8px;top:-56px;background:var(--blue-acao);color:#fff;padding:12px 18px;z-index:100;border-radius:6px;text-decoration:none}
.skip-link:focus{top:8px}

/* ---------- cabeçalho ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(14,17,22,.9);backdrop-filter:blur(10px);border-bottom:1px solid #222831}
.nav{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;padding:14px 0}
.nav nav{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap}
.nav a.link{text-decoration:none;color:#C6CCD3;font-size:15px;font-weight:600;padding:10px 8px;border-bottom:2px solid transparent;transition:color 200ms ease,border-bottom-color 200ms ease}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{height:40px;width:auto}
.brand .nome{font-family:var(--titulo);font-size:20px;font-weight:700;color:#fff}
.brand .nome b{color:var(--blue-claro);font-weight:700}
.brand small{display:block;font-size:9px;letter-spacing:.24em;color:#828A93;text-transform:uppercase;line-height:1.1;font-weight:600;font-family:var(--corpo)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.menu-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;display:block}

/* ---------- botões ---------- */
/* Propriedades nomeadas, nunca `all`: `all` anima o que você não pediu e
   custa layout. Só transform e cor, que rodam na GPU. */
.btn{display:inline-block;font-weight:600;font-family:var(--titulo);font-size:15px;padding:14px 28px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform 160ms var(--saida),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
/* Resposta ao toque. Sem isto o botão não confirma que ouviu o clique —
   é o detalhe que ninguém percebe e que faz a interface parecer viva. */
.btn:active{transform:scale(.97)}
.btn-branco{background:#fff;color:#0E1116}
.btn-contorno{border-color:#828A93;color:var(--text);background:transparent}
.btn-wa{background:var(--wa);color:#fff}

/* ---------- rodapé ---------- */
footer{background:#0A0D11;border-top:1px solid #222831;padding:36px 0;font-size:14.5px;color:#828A93}
footer .base{border-top:1px solid #1B2027;padding-top:20px;display:flex;gap:8px 32px;flex-wrap:wrap;justify-content:space-between}
/* 21/10/2026 — 8px de recuo dava ~35px de altura de toque no celular. 12px leva a
   ~43px, que é o alvo confortável para o polegar. Mudança de área, não de aparência. */
footer a{color:#C6CCD3;text-decoration:none;display:inline-block;padding:12px 8px}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- hover só onde existe mouse ---------- */
/* Em tela de toque, tocar dispara :hover e a cor fica PRESA até o dedo cair
   em outro lugar. O usuário vê um botão que parece continuar selecionado
   depois de sair da página. */
@media (hover:hover) and (pointer:fine){
  .btn-branco:hover{background:#E6E9EC}
  .btn-contorno:hover{border-color:#fff}
  .btn-wa:hover{background:#0B5F54}
  .nav a.link:hover{color:#fff;border-bottom-color:var(--blue)}
  footer a:hover{color:#fff}
}

/* ---------- responsivo (casca) ---------- */
@media (max-width:920px){
  .menu-btn{display:block}
  .nav{flex-wrap:nowrap;justify-content:space-between}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:#12151A;border-bottom:1px solid #222831;padding:10px 24px 18px;flex-direction:column;align-items:stretch}
  .nav nav.aberto{display:flex}
  .nav a.link{padding:14px 8px;border-bottom:1px solid #1C2127}
  .nav nav .btn{margin-top:14px;text-align:center}
}
@media (max-width:560px){
  .brand img{height:34px}
  .brand .nome{font-size:17px}
  .brand small{display:none}
}

/* ---------- entrada por rolagem ---------- */
/* Tudo atrás de `html.js`: se o JavaScript não rodar, nada nunca fica
   escondido. Conteúdo não pode depender de script para existir.
   Era .6s com `ease` — 600ms é longo demais para entrada de conteúdo (o
   leitor chega antes da animação) e `ease` começa devagar, justo no instante
   em que o olho está olhando. 420ms com curva forte de saída: começa rápido
   e assenta. */
html.js .rev{opacity:0;transform:translateY(18px);transition:opacity 420ms var(--saida),transform 420ms var(--saida)}
html.js .rev.vis{opacity:1;transform:none}
/* Escalonamento: quando vários blocos entram juntos, aparecer tudo de uma vez
   parece salto. 60ms entre eles basta para virar cascata sem atrasar a leitura. */
html.js .rev.vis:nth-child(2){transition-delay:60ms}
html.js .rev.vis:nth-child(3){transition-delay:120ms}
html.js .rev.vis:nth-child(4){transition-delay:180ms}
@media (prefers-reduced-motion:reduce){
  html.js .rev{opacity:1;transform:none;transition:none}
}

/* ---------- quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}