/* ═══════════════════════════════════════════════════════════════════════
   EAGLE.CSS — A FOLHA ÚNICA DA MARCA THE EAGLE OF AMERICA
   Criada em 11/08/2026.

   POR QUE ELA EXISTE: até hoje CADA página declarava os próprios tokens
   inline. O site derivou em TRÊS marcas diferentes ao mesmo tempo —
   claro/azul (index), preto-ameixa/ouro (academy, admin, farms) e
   preto/verde-neon (club, dashboard) — e o MESMO azul tinha quatro nomes
   (--green, --ouro, --gold, --verde). Página nova nascia torta por herdar
   o token errado.

   A LEI: toda página do site linka ESTA folha e não redeclara cor nenhuma.
   Cor nova entra aqui, não na página. Mapa completo do site em
   /root/DOCS_ZEUS/MAPA_THE_EAGLE.md.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ---- superfícies ---- */
  --bg0:#FBFBFC;        /* fundo da página */
  --surface:#FFFFFF;    /* cartão */
  --surface2:#F7F8FA;   /* cartão recuado / faixa */
  --surface3:#F1F3F6;   /* hover, célula de tabela */

  /* ---- texto ---- */
  --ink:#0A0C12;        /* texto principal */
  --muted:#454B57;      /* texto secundário */
  --muted2:#5C6370;     /* legenda, mono, rodapé */

  /* ---- a cor da casa (AZUL — não é mais ouro desde 08/08) ---- */
  --brand:#0866FF;
  --brand2:#3B86FF;     /* clara, para gradiente e hover */
  --brand-dim:#0653CC;  /* escura, para texto sobre claro */
  --brand-wash:#E7F0FF; /* fundo de selo/etiqueta */

  /* ---- linhas ---- */
  --line:#E9EBEF;
  --line2:#DDE0E6;

  /* ---- estado ---- */
  --ok:#0E7A3C;
  --warn:#8A5A00;
  --danger:#B01029;
  --cold:#0B6E99;

  /* ---- elevação (sombra de papel, nunca preto puro) ---- */
  --sh1:0 1px 2px rgba(10,12,18,.04);
  --sh2:0 6px 20px rgba(10,12,18,.07);
  --sh3:0 18px 50px rgba(10,12,18,.10);

  /* ---- ritmo: um só, para tudo ficar simétrico ---- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --gap:18px; --gap2:28px; --secao:96px;
  --largura:1180px;

  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;

  /* ═══ APELIDOS DE COMPATIBILIDADE ═══════════════════════════════════
     Os quatro nomes que o mesmo azul já teve, e os nomes de fundo/linha
     das páginas antigas. Existem para que uma página legada possa linkar
     esta folha e ficar certa SEM reescrever cada regra. Em página NOVA,
     usar só os nomes canônicos acima. */
  --green:var(--brand); --green2:var(--brand2); --dim:var(--brand-dim);
  --ouro:var(--brand);  --ouro2:var(--brand-dim);
  --gold:var(--brand);  --gold2:var(--brand2);
  --verde:var(--brand);
  --bg:var(--bg0); --card:var(--surface); --card2:var(--surface2);
  --panel:var(--surface); --panel2:var(--surface2);
  --txt:var(--ink); --fraco:var(--muted);
  --linha:var(--line); --linha2:var(--line2);
  --bad:var(--danger); --alerta:var(--warn);
  --bg1:var(--surface2); --red:var(--danger); --amber:var(--warn);
  --clay:var(--danger);
  /* véus: no site escuro os painéis eram branco translúcido sobre preto.
     No claro isso vira TINTA translúcida sobre papel — nunca branco sobre
     branco, que some. */
  --veu1:rgba(10,12,18,.025); --veu2:rgba(10,12,18,.045);
  --veu-linha:rgba(10,12,18,.09);
  --brilho:rgba(8,102,255,.10);   /* halo/glow da marca, no claro */
}

/* ── base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg0);color:var(--ink);font-family:var(--sans);
  line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--brand-dim);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ── tipografia: uma escala só, fluida ────────────────────────────── */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(34px,5.2vw,62px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2vw,24px)}
h4{font-size:16px;letter-spacing:.02em}
p{margin:0 0 1em}
.lead{color:var(--muted);font-size:clamp(15px,1.5vw,18px);max-width:70ch}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-dim);margin-bottom:10px}
.mono{font-family:var(--mono)}
.g{color:var(--brand)}

/* ── esqueleto ────────────────────────────────────────────────────── */
.wrap{max-width:var(--largura);margin:0 auto;padding:0 22px}
.secao{padding:var(--secao) 22px}
.grade{display:grid;gap:var(--gap2)}
.grade-2{grid-template-columns:repeat(2,1fr)}
.grade-3{grid-template-columns:repeat(3,1fr)}
.grade-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grade-3,.grade-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grade-2,.grade-3,.grade-4{grid-template-columns:1fr}}

/* ── cartão ───────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh1)}
.card:hover{box-shadow:var(--sh2)}
.card-2{background:var(--surface2);border:1px solid var(--line)}

/* ── botão ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;
  font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;
  box-shadow:var(--sh1);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2);text-decoration:none;color:#fff}
.btn:active{transform:none}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand-dim)}
.btn.pequeno{padding:9px 15px;font-size:13px}

/* ── selo ─────────────────────────────────────────────────────────── */
.selo{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:999px;background:var(--brand-wash);color:var(--brand-dim);
  border:1px solid var(--line2);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.selo.vivo::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px rgba(14,122,60,.16)}

/* ── tabela ───────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted2)}
tbody tr:hover{background:var(--surface3)}

/* ── formulário ───────────────────────────────────────────────────── */
input,select,textarea{width:100%;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  font:inherit;font-size:15px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(8,102,255,.14)}
label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}

/* ── visualizador de abas (12/08) ─────────────────────────────────────
   A janela do produto com as abas REAIS do sistema, navegável. Motor em
   /show.js, compartilhado por index, /pro e /copilot. Toda cor sai de
   token — funciona claro e escuro sem redeclarar nada. */
.show{margin:6px 0 10px}
.showAbas{display:flex;gap:6px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.showAbas::-webkit-scrollbar{display:none}
.showAba{flex:none;scroll-snap-align:center;cursor:pointer;font-family:inherit;font-size:12px;
  font-weight:650;letter-spacing:-.01em;color:var(--muted);background:transparent;
  border:1px solid var(--line2);border-radius:999px;padding:7px 13px;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s}
.showAba:hover{color:var(--ink);border-color:var(--brand)}
.showAba[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 7px 18px -9px rgba(8,102,255,.9)}
.showJanela{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--surface);
  box-shadow:0 22px 52px -30px rgba(10,12,18,.4)}
.showBarra{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--surface3);
  border-bottom:1px solid var(--line)}
.showBarra .pt{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line2)}
.showBarra .pt:nth-child(1){background:#FF5F57}
.showBarra .pt:nth-child(2){background:#FEBC2E}
.showBarra .pt:nth-child(3){background:#28C840}
.showUrl{flex:1;margin-left:6px;background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:5px 11px;font-family:var(--mono);font-size:10.5px;color:var(--muted2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showUrl b{color:var(--ink);font-weight:600}
.showPalco{position:relative;background:var(--surface);aspect-ratio:16/10.4;cursor:zoom-in;overflow:hidden}
.showTela{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.015);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.showTela.on{opacity:1;transform:none;pointer-events:auto}
.showTela img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.showProg{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--brand);
  box-shadow:0 0 11px rgba(8,102,255,.7);transition:width .18s linear;z-index:3}
.showTexto{margin-top:13px;display:flex;gap:11px;align-items:flex-start;min-height:74px}
.showNum{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--brand);
  border:1px solid rgba(8,102,255,.3);border-radius:999px;padding:4px 9px;white-space:nowrap;margin-top:2px}
.showTitulo{font-size:15.5px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:0 0 4px}
.showFrase{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
@media(max-width:760px){
  .showPalco{aspect-ratio:16/12.5}
  .showTela img{object-position:top left}
  .showTexto{min-height:0}
}
@media(prefers-reduced-motion:reduce){.showTela{transition:opacity .01ms;transform:none}}
/* ── falar comigo é sempre VERDE (12/08) ──────────────────────────────
   Ordem do dono: todo link que leva a uma conversa comigo usa o verde do
   WhatsApp. Motivo de conversão, não de gosto: verde+ícone é reconhecido
   antes de o rótulo ser lido, e separa "quero conversar" de "quero pagar"
   — o azul da marca fica reservado ao botão que cobra. */
.btn.zap,a.zap{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,#1FB45E,#0F7D3F);color:#FFFFFF;border-color:transparent;
  box-shadow:0 12px 30px rgba(15,125,63,.26)}
.btn.zap:hover,a.zap:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(30,168,85,.34)}
.btn.zap svg,a.zap svg{flex:none;width:18px;height:18px;fill:currentColor}
/* link de texto (não botão) que leva à conversa */
.linkZap{color:#0F7D3F;font-weight:650;text-decoration:none;border-bottom:1px solid rgba(15,125,63,.35)}
.linkZap:hover{border-bottom-color:#0F7D3F}
/* 13/08 — BLOCO DE MODO ESCURO NEUTRALIZADO.
   Motivo medido: com o sistema no escuro, `body` continua #FBFBFC (o
   site é CLARO + AZUL desde 08/08 e não tem modo escuro). Estas regras
   pintavam painel e moldura com branco translúcido — branco sobre
   branco, que some — e o link do WhatsApp de verde-neon sobre papel.
   Componente não decide sozinho o tema da página: ou o site inteiro
   ganha modo escuro, ou ninguém troca. Quando ganhar, isto volta.
   Regras preservadas abaixo, desligadas pelo seletor impossível. */
@media (prefers-color-scheme:dark){ .modo-escuro-do-site-inteiro   .linkZap{color:#4ADE80;border-bottom-color:rgba(74,222,128,.4)}
  .linkZap:hover{border-bottom-color:#4ADE80}
}

/* a lupa: tela cheia é onde o número pequeno do print vira legível */
#lupa{position:fixed;inset:0;z-index:200;background:rgba(6,8,14,.9);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:28px;cursor:zoom-out}
#lupa.on{display:flex}
#lupa img{max-width:min(1180px,96vw);max-height:92vh;border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}

/* ── telas reais de produto (12/08) ───────────────────────────────────
   Grade de screenshots do sistema rodando. Mora aqui, na folha da marca,
   porque index e pro usam a mesma grade e nenhuma página redeclara cor
   (MAPA_THE_EAGLE.md §4). Toda cor sai de token. */
.telasReais{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 8px}
.telasReais figure{margin:0;border:1px solid var(--line);border-radius:var(--r-md,12px);
  overflow:hidden;background:var(--surface);cursor:zoom-in;
  transition:transform .25s ease,border-color .25s ease}
.telasReais figure:hover{transform:translateY(-3px);border-color:var(--brand)}
.telasReais img{display:block;width:100%;height:172px;object-fit:cover;object-position:top left}
.telasReais figcaption{padding:7px 9px;font-size:10.5px;line-height:1.35;color:var(--muted2)}
.telasNota{font-size:11.5px;color:var(--muted2);line-height:1.5;margin:2px 0 18px;font-style:italic}
/* No celular, 3 telas em grade de 2 colunas deixavam um card órfão na
   segunda linha (mesmo defeito pego no /pro em 12/08). Vira faixa que
   desliza: uma tela por vez, grande o bastante para ler, sem sobra. */
@media(max-width:640px){
  .telasReais{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .telasReais::-webkit-scrollbar{display:none}
  .telasReais figure{flex:0 0 82%;scroll-snap-align:center}
  .telasReais img{height:190px}
}

/* ── quem prefere menos movimento ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── ALVO DE TOQUE NO CELULAR (12/08) ─────────────────────────────────
   Medido, não achado: no celular a home tinha 35 links/botões com menos
   de 38px de altura — abas de 30px, links de rodapé de 15px. Dedo não
   acerta 15px; a recomendação de acessibilidade é 44px. Aqui o alvo
   cresce SEM mudar o desenho: min-height + padding, nada de fonte maior.
   É a diferença entre "no desktop é um jeito e no celular é outro". */
@media(max-width:640px){
  .btn,button.showAba,.navCta,.navEntrar{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .showAba{padding-top:11px;padding-bottom:11px}
  /* links de texto em navegação e rodapé: área de toque sem virar botão */
  nav a,footer a,.peLinks a,.rodapeLegal a,.captaVias a,.navIn a{
    display:inline-flex;align-items:center;min-height:40px}
  /* dentro de parágrafo o link continua inline (senão quebra a linha) */
  p a{display:inline;min-height:0}
}