/* =========================================================
   GKF Company — Design System do GKF Radar
   Fonte da identidade: gkfcompany.com.br (cores, Geist, botões em pílula,
   painéis em grade com linhas de 1px, títulos "01 / Seção").
   ========================================================= */
:root{
  /* Marca (valores do site institucional) */
  --black:#050506; --black-soft:#0a0a0c; --graphite:#121216; --graphite-light:#1a1a20;
  --white:#f7f5f2; --muted:#aaa8a8; --muted-dark:#747278;
  --red:#ff1738; --red-btn:#ed1637; --red-dark:#a60022; --green:#25d366;
  --line:#ffffff1f; --line-strong:#ffffff38;

  /* Semânticos */
  --bg:var(--black); --surface:var(--black-soft); --surface-2:var(--graphite); --surface-3:var(--graphite-light);
  --ink:var(--white); --ink-2:var(--muted); --ink-3:var(--muted-dark);
  --accent:var(--red); --accent-btn:var(--red-btn);
  --ok:#2fcf7a; --warn:#f2b632; --bad:var(--red); --info:#8fa6ff;
  --focus:#ff5a72;

  /* Tipografia */
  --font:"Geist", Arial, Helvetica, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-base:16px; --fs-lg:18px;
  --fs-h3:20px; --fs-h2:clamp(30px,4.2vw,56px); --fs-h1:clamp(38px,6.6vw,92px);
  --track-eyebrow:.28em; --track-btn:.04em;

  /* Espaço, raio, alturas */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s30:120px;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --h-field:44px; --h-btn:44px; --h-btn-lg:54px; --h-btn-sm:34px;
  --icon:18px;
  --wrap:1180px; --gutter:clamp(16px,4vw,40px);
  --shadow-pop:0 18px 50px -20px #000c;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-base)/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--font);text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:550;line-height:1;letter-spacing:-.03em}
h2{font-size:var(--fs-h2);font-weight:500;line-height:1.04;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
.red{color:var(--accent)}
.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--red-dark);color:#fff}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--accent-btn);color:#fff;padding:10px 16px;border-radius:var(--r-pill)}

/* ---------- Textos de apoio ---------- */
.eyebrow{font-size:var(--fs-xs);font-weight:400;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-2)}
.eyebrow.red{color:var(--accent)}
.lead-text{font-size:var(--fs-lg);color:var(--ink-2);max-width:60ch;line-height:1.55}
.hint{font-size:var(--fs-sm);color:var(--ink-3)}

/* ---------- Marca ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:38px;height:38px}
.brand b{display:block;font-weight:800;font-size:15px;line-height:1;letter-spacing:.02em}
.brand small{display:block;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.brand small em{font-style:normal;color:var(--accent)}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h-btn);padding:10px 20px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:800 var(--fs-sm)/1 var(--font);letter-spacing:var(--track-btn);text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s,color .15s}
.btn:hover{border-color:var(--ink-2);background:#ffffff0a}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.btn.wa{background:var(--green);border-color:var(--green);color:#03140a}
.btn.ghost{border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{color:var(--ink);background:#ffffff0d}
.btn.lg{min-height:var(--h-btn-lg);padding:14px 24px;font-size:var(--fs-md)}
.btn.sm{min-height:var(--h-btn-sm);padding:7px 14px;font-size:11px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}
.link-red{font:800 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.link-red:hover{text-decoration:underline}

/* ---------- Campos ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;min-width:0;min-height:var(--h-field);padding:10px 14px;font:var(--fs-md) var(--font);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s}
textarea.input{min-height:110px;resize:vertical;line-height:1.5}
.input:hover{border-color:var(--line-strong)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ff17382e}
.check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--ink-2);cursor:pointer}
.check input{accent-color:var(--accent-btn);width:16px;height:16px}

/* ---------- Painéis (padrão grade do site) ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel.pad{padding:var(--s6)}
.gridline{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.gridline>*{background:var(--surface);padding:var(--s5)}
.section-head{display:grid;gap:12px}
.section-head .eyebrow{color:var(--accent)}

/* ---------- Badges / status ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font:600 11px/1.6 var(--font);letter-spacing:.04em;border:1px solid var(--line);color:var(--ink-2)}
.badge.red{color:var(--accent);border-color:#ff173855;background:#ff173814}
.badge.green{color:var(--green);border-color:#25d36655;background:#25d36612}
.badge.info{color:var(--info);border-color:#8fa6ff55;background:#8fa6ff12}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}

/* ---------- Topo público ---------- */
.site-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:linear-gradient(#050506ee,#050506cc);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.public::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:51;background:var(--black)}
.site-top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;min-height:68px}
.site-top .brand{grid-column:1;justify-self:start}
.site-top nav{grid-column:2;display:flex;gap:28px;justify-content:center}
.site-top .acts{grid-column:3;justify-self:end}
.site-top nav a{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.site-top nav a:hover{color:var(--ink)}
.site-top .acts{display:flex;gap:8px}
@media (max-width:820px){.site-top nav{display:none}}

/* ---------- Rodapé ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:var(--s30)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding-block:32px;color:var(--ink-3);font-size:var(--fs-sm)}
.site-foot nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.site-foot a{text-decoration:none}.site-foot a:hover{color:var(--ink)}

/* ---------- Fundo de marca (grade vermelha sutil do hero) ---------- */
.brand-bg{background:
  radial-gradient(60% 70% at 78% 40%,#ff173822,transparent 70%),
  linear-gradient(#ff17380d 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,#ff17380d 1px,transparent 1px) 0 0/48px 48px,
  var(--black)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong);padding:12px 18px;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);z-index:4000;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:var(--shadow-pop)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Estados vazios e carregamento ---------- */
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:40px 20px;text-align:center;color:var(--ink-2);display:grid;gap:8px;justify-items:center}
.empty b{color:var(--ink);font-weight:600}
.spinner{width:18px;height:18px;border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

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