/* Taktico — base compartilhada por todas as páginas (tokens e regras em BRAND.md).
   CSS específico de cada página fica inline no próprio HTML, depois deste arquivo.
   Ao mudar este arquivo, suba o ?v= nos <link> das páginas: /assets/* tem cache de 7 dias. */

/* ============ TOKENS (BRAND.md) ============ */
:root{
  --takt: 2s;
  --ink:#07090D; --panel:#0D1015; --panel2:#12161D; --line:#1E232C; --line2:#2A303B;
  --text:#EDEFF3; --muted:#8A919E; --dim:#5D6470;
  --red:#E8404F; --red-deep:#C93341; --red-soft:rgba(232,64,79,.12);
  --radius:14px; --wrap:1160px;
}

/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:'Archivo',system-ui,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;position:relative}
.mono{font-family:'IBM Plex Mono',monospace}
.r{color:var(--red)}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.eyebrow svg{width:64px;height:16px;flex:none}
.eyebrow path{stroke:var(--red);stroke-width:1.6;fill:none;stroke-linecap:round}

h2{font-weight:900;font-stretch:112%;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.06;letter-spacing:-.02em;margin:16px 0 18px}
.lead{color:var(--muted);font-size:clamp(1rem,1.35vw,1.13rem);max-width:620px}
.sec-head{max-width:700px;margin-bottom:56px}

section{padding:120px 0;position:relative;scroll-margin-top:64px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 28px -10px rgba(232,64,79,.7)}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--muted)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.btn-wa svg{width:18px;height:18px;fill:currentColor;flex:none}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}

/* ============ NAV ============ */
nav{position:fixed;inset:0 0 auto 0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,9,13,.8);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-stretch:108%;font-size:15.5px;letter-spacing:.18em;display:flex;align-items:center;gap:11px;text-decoration:none}
.logo svg{width:38px;height:19px}
.logo path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links .btn{padding:10px 20px;font-size:14px;color:#fff}
.nav-links .btn-wa svg{width:16px;height:16px}

/* ============ PRINCÍPIO ============ */
.principle{margin-top:96px;padding:56px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.principle svg{width:120px;height:60px}
.principle path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round}
.principle blockquote{font-weight:800;font-stretch:112%;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.015em}
.principle blockquote span{color:var(--muted)}

/* ============ CTA ============ */
#contato{text-align:center;border-top:1px solid var(--line);background:radial-gradient(700px 320px at 50% 100%,rgba(232,64,79,.08),transparent 70%)}
#contato h2{font-size:clamp(2.3rem,5.4vw,4rem)}
#contato .lead{margin:0 auto}
.deliver{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;margin:38px 0 44px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
.deliver span b{color:var(--red);font-weight:500;margin-right:8px}
.cta-note{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dim)}

/* ============ FOOTER ============ */
.foot-social{display:flex;align-items:center;gap:16px}
.foot-social a{display:inline-flex;color:var(--muted);transition:color .2s}
.foot-social a:hover{color:var(--text)}
.foot-social svg{width:20px;height:20px;fill:currentColor}

footer{border-top:1px solid var(--line);padding:36px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text)}

/* ============ RESPONSIVO ============ */
@media (max-width:720px){
  .wrap,.nav-in{padding:0 16px}
  .nav-links a:not(.btn){display:none}
  section{padding:84px 0}
  .principle{grid-template-columns:1fr;gap:20px}
  .foot{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}