/* ============================================================
   Evolink — Tema (base KKTECH, identidade verde)
   Superfícies: paleta do KKTECH (bg #141415, header #0f0f10,
   panel #1a1a1c, borda #26262a, texto #e1e1e3).
   Ação: ÚNICA cor de destaque = verde escuro fosco #15803d.
   Nenhum azul. Nenhum glow/blur em botões.
   ============================================================ */

/* --------- fontes (Space Grotesk p/ títulos, igual KKTECH) --------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('/static/fonts/spacegrotesk.woff2') format('woff2-variations');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* --------- tokens --------- */
:root{
  /* superfícies (KKTECH) */
  --bg:        #141415;
  --bg-elev:   #18181b;
  --panel:     #1a1a1c;
  --panel-2:   #202023;
  --bg-header: #0f0f10;

  --ink:       #e1e1e3;
  --ink-2:     #d6d6da;
  --dim:       #8b8b93;
  --faint:     #5b5b63;
  --mute:      #48484f;

  --line:      #1f1f23;
  --line-2:    #26262a;
  --line-3:    #36363c;

  /* ação — verde escuro fosco, a única cor de destaque */
  --accent:    #15803d;              /* verde fosco escuro */
  --accent-2:  #16a34a;              /* hover — um passo mais claro */
  --accent-ink:#ffffff;              /* texto sobre o verde */
  --accent-soft:rgba(21,128,61,.15);
  --accent-line:rgba(21,128,61,.4);

  --green:     var(--accent);
  --green-2:   var(--accent-2);
  --green-ink: #ffffff;

  --warn:      #d29922;
  --red:       #e54d42;
  --ok:        #00c08b;   /* status "online" apenas */

  /* fontes (KKTECH) */
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  --f-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease:      cubic-bezier(.2,.7,.2,1);
}

/* --------- ajustes globais --------- */
::selection{ background:var(--accent); color:#ffffff }

h1,h2,h3,h4{
  font-family:var(--f-display);
  letter-spacing:-.02em;
}
.eyebrow{ color:var(--dim) }

/* --------- header --------- */
/* EVOLINK-NAV-SOLID (refatoracao): header opaco e deterministico.
   O backdrop-filter da base (.nav em site.css) combinado com position:sticky
   vaza/estica no scroll (composicao de camadas bugada). Aqui o CSS ganha da
   base por ordem de carga: fundo solido sempre, blur desligado, sem
   translateZ/will-change. .nav.is-scrolled fica so com sombra (site.js mantem
   o toggle, que tambem fecha o menu mobile ao rolar). */
.nav{
  background:#0f0f10;
  border-bottom:1px solid var(--line-2);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transform:none;
  will-change:auto;
}
.nav.is-scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.35) }
.brand__mark{ color:var(--accent) }

/* --------- botões: verde fosco escuro, SEM glow/blur --------- */
.btn{ border-radius:8px; color:var(--ink) }
.btn svg{ color:var(--accent) }
.btn--solid{
  background:var(--accent);
  color:var(--accent-ink) !important;
  box-shadow:none;
}
.btn--solid:hover{
  background:var(--accent-2);
  color:var(--accent-ink);
  box-shadow:none;
  transform:none;
}
.btn--solid svg{ color:var(--accent-ink) !important }
.btn--outline{
  border-color:var(--line-2);
  background:var(--panel);
  color:var(--ink);
}
.btn--outline:hover{ border-color:var(--accent); background:var(--panel-2); color:var(--ink) }
.btn--ghost{
  border:1px solid var(--line-2);
  background:var(--panel);
  color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--line-3); background:var(--panel-2); color:var(--ink) }

/* --------- cards (superfície painel, borda #26262a) --------- */
.grid3{ border:none; gap:16px }
.grid3 .card{
  border:1px solid var(--line-2);
  border-radius:10px;
  background:var(--panel);
}
.grid3 .card:hover{
  background:var(--panel-2);
  border-color:var(--line-3);
}
.card__ico{ color:var(--accent) }
.card__link{ color:var(--accent) !important }
.card__link svg{ color:var(--accent) }

/* --------- hero --------- */
.hero{ border-bottom:1px solid var(--line-2) }
.hero__trust li{
  border:1px solid var(--line-2);
  border-radius:8px;
  background:var(--panel);
  padding:6px 14px;
}
.console{
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:10px;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9);
}
/* EVOLINK-HERO-FIX: sem glow verde no console do hero */
.hero__console{
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.console__bar{ background:var(--panel-2) }
.tag--ok{ color:var(--ok) }
.pulse-dot{ background:var(--ok) }

/* --------- seções alternadas --------- */
.section--alt{ background:var(--bg-elev) }

/* --------- track (como funciona) --------- */
.track__card{
  border:1px solid var(--line-2);
  border-radius:10px;
  background:var(--panel);
}
.track__dot{ border-color:var(--accent); color:var(--accent) }
.track__meta{ color:var(--dim) }
.track__check{ color:var(--accent-ink) }

/* --------- preços --------- */
.plans{
  border:1px solid var(--line-2) !important;
  border-radius:10px;
  background:var(--bg-elev);
  overflow:hidden;
}
.plan__flag{ color:var(--accent) }
.plan__cta{ background:var(--panel) }
.plans__note{ color:var(--dim) }

/* strip IA/Fiscal — card duplo com card de preço */
.strip{
  border:1px solid var(--line-2); border-radius:10px;
  background:var(--panel); overflow:hidden;
  grid-template-columns:1fr 1fr;
  gap:1px;
}
.strip__item{
  background:var(--panel);
  padding:22px 24px;
  flex-wrap:wrap;
  row-gap:10px;
}
.strip__item + .strip__item{ border-left:1px solid var(--line-2) }
.strip__k{
  color:var(--accent);
  font-size:12px;
  width:100%;
  flex:0 0 auto;
}
.strip__v{
  color:var(--ink-2);
  text-transform:none;
  letter-spacing:0;
  font-size:var(--t-sm);
  background:none;
  padding-left:0;
  flex:1;
}
.strip__item .btn{ flex:0 0 auto }

/* --------- FAQ --------- */
.faq details{ border-bottom:1px solid var(--line-2) }
.faq summary:hover{ color:var(--accent) }
.faq details code{ background:var(--panel-2); border:1px solid var(--line-2) }

/* --------- CTA final --------- */
.cta{ border-top:1px solid var(--line-2) }

/* --------- rodapé --------- */
.foot{ background:var(--bg) }
.foot__col a:hover{ color:var(--accent) }

/* --------- superfícies de ícone/badge: SEM transparência ---------
   Regra: ou fundo sólido + borda contrastante, ou nada. --------- */
.card__ico{
  background:var(--panel-2);
  border:1px solid var(--line-3);
  color:var(--accent);
}
.card__ico svg{ color:var(--accent) }

.tag--ok{
  background:var(--panel-2);
  border-color:var(--line-3);
  color:var(--ok);
}
.pulse-dot{ background:var(--ok) }

.track__node:first-child .track__dot{
  background:var(--panel-2);
  border-color:var(--accent);
}

/* --------- foco acessível --------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* EVOLINK-LAYOUT: item ativo do menu publico (header unico) */
.nav__links a.on{ color:var(--ink) }
.nav__links a.on svg{ color:var(--accent) }

/* EVOLINK-NAVDROP: dropdown Produtos do header unico (details nativo, sem JS) */
.nav__links .navdd{ position:relative }
.nav__links .navdd summary{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-sm); color:var(--dim); cursor:pointer;
  user-select:none; list-style:none; transition:color .15s var(--ease);
}
.nav__links .navdd summary::-webkit-details-marker{ display:none }
.nav__links .navdd summary svg:last-child{ transition:transform .18s var(--ease, ease) }
.nav__links .navdd[open] summary svg:last-child{ transform:rotate(180deg) }
.nav__links .navdd summary:hover{ color:var(--ink) }
.nav__links .navdd summary:hover svg:first-child{ color:var(--accent) }
.nav__links .navdd summary.on{ color:var(--ink) }
.nav__links .navdd summary.on svg:first-child{ color:var(--accent) }
.navdd__menu{
  position:absolute; top:calc(100% + 12px); left:0; min-width:210px;
  background:var(--bg-header); border:1px solid var(--line-2);
  border-radius:10px; padding:6px; z-index:60;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.navdd__menu a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px;
  color:var(--ink-2); font-size:var(--t-sm); text-decoration:none;
  transition:background .15s var(--ease, ease), color .15s var(--ease, ease);
}
.navdd__menu a:hover{ background:var(--panel-2); color:var(--ink) }
.navdd__menu a svg{ color:var(--accent) }

/* EVOLINK-NAVDROP: rotulos de grupo no menu mobile */
.nav__mobile .navm-sec{
  margin:10px 12px 4px; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
}

/* EVOLINK-NAVUSER: dropdown de conta (3 pontos) do header unico */
.navuser{ position:relative }
.navuser summary{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 10px 0 14px;
  border:1px solid var(--line-2); border-radius:8px;
  background:var(--panel); cursor:pointer; list-style:none; user-select:none;
  transition:border-color .15s var(--ease, ease), background .15s var(--ease, ease);
}
.navuser summary::-webkit-details-marker{ display:none }
.navuser summary:hover{ border-color:var(--line-3); background:var(--panel-2) }
.navuser summary svg{ color:var(--dim) }
.navuser[open] summary{ border-color:var(--line-3); background:var(--panel-2) }
.navuser__who{ font-size:var(--t-sm); color:var(--ink); font-weight:500; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.navuser__menu{ left:auto; right:0; min-width:220px; padding:10px; display:flex; flex-direction:column; gap:8px }
.navuser__label{ margin:0 2px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
.navuser__menu .btn{ width:100%; justify-content:flex-start }
.navuser__sair{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:7px 10px; border-radius:6px; margin-top:2px;
  font-size:var(--t-sm); color:var(--dim); text-decoration:none;
  border:1px solid transparent;
  transition:color .15s var(--ease, ease), background .15s var(--ease, ease);
}
.navuser__sair:hover{ color:#f87171; background:rgba(248,113,113,.08) }

/* EVOLINK-NAV-CENTER: menu do header centralizado (desktop) — brand e CTA crescem igual, o menu fica exatamente no meio */
@media (min-width:901px){
  .nav__in > .brand{ flex:1 1 0 }
  .nav__in > .nav__links{ flex:0 0 auto }
  .nav__in > .nav__cta{ flex:1 1 0; justify-content:flex-end }
}


/* EVOLINK-STORE-CSS: breadcrumb + secoes de categoria da loja */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin:0 0 6px}
.breadcrumb a{color:var(--ink-2);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb__sep{color:var(--faint)}
.breadcrumb [aria-current]{color:var(--ink)}
.storecat{margin-top:38px;padding-top:26px;border-top:1px solid var(--line-2);scroll-margin-top:78px}
.storecat:first-of-type{border-top:0;margin-top:26px}
.storecat__head{margin:12px 0 18px}
.storecat__title{display:flex;align-items:center;gap:9px;font-size:20px;margin:0 0 4px;color:var(--ink)}
.storecat__title svg{color:var(--accent)}
.storecat__sub{margin:0;color:var(--dim);font-size:14px}

/* EVOLINK-STORE-PRICE: preco compacto em uma linha (cards da loja) */
.plan__price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.plan__val{font-size:26px;font-weight:700;letter-spacing:-.01em}
.plan__per{font-size:13px}

/* EVOLINK-STORE-DETAIL-CSS: pagina exclusiva por categoria */
.storecat__link,.storecat__link:hover{color:inherit;text-decoration:none}
.storecat__go{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;color:var(--dim);border:1px solid var(--line-2);margin-left:6px;vertical-align:middle;transition:all .15s var(--ease)}
.storecat__go:hover{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft)}
.plan__flag-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.plan__flag-link:hover{color:var(--accent-2)}
.catpage-hero{padding:56px 0 8px}
.catpage-intro{margin:14px 0 0;color:var(--dim);font-size:17px;line-height:1.65;max-width:820px}

/* EVOLINK-STORE-BANNER-CSS: banner de entrada por categoria (home) */
.catbanner{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.catbanner{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.catbanner{grid-template-columns:1fr}}
.catcard{display:flex;flex-direction:column;gap:10px;padding:22px 20px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;color:inherit;text-decoration:none;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.catcard:hover{transform:translateY(-3px);border-color:var(--accent-line);background:var(--panel-2)}
.catcard__ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.catcard__ico svg{width:22px;height:22px}
.catcard__title{margin:4px 0 0;font-size:19px;color:var(--ink)}
.catcard__blurb{margin:0;color:var(--dim);font-size:14px;line-height:1.55}
.catcard__ref{margin:6px 0 0;display:flex;flex-direction:column;gap:2px}
.catcard__ref-name{font-size:12px;font-family:var(--f-mono);letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.catcard__ref-price{font-size:17px;font-weight:700;color:var(--ink)}
.catcard__cta{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent-2)}
.catcard:hover .catcard__cta{color:var(--ink)}
/* ===== EVOLINK-MICRO (EVOLINK-MOTION, 2026-10-15): fisica tatti + micro-interacoes ===== */
:root{ --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-snappy:cubic-bezier(.2,.9,.3,1); --ease-editorial:cubic-bezier(.22,.61,.36,1) }
.btn,.navitem,.ev-row-menu__item,.navdd summary,.pager__nav a,.evsel__btn{ transition:transform .15s var(--ease-snappy,var(--ease,ease)),background .15s var(--ease,ease),color .15s var(--ease,ease),border-color .15s var(--ease,ease),box-shadow .15s var(--ease,ease) }
.btn:active:not(:disabled),.navitem:active,.evsel__btn:active{ transform:scale(.97) }
.btn:hover:not(:disabled){ transform:translateY(-1px) }
.pcard{ transition:transform .25s var(--ease-editorial,var(--ease,ease)),box-shadow .25s var(--ease-editorial,var(--ease,ease)),border-color .25s var(--ease-editorial,var(--ease,ease)) }
.pcard:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -18px rgba(0,0,0,.45) }
.ptable tbody tr{ transition:background .15s var(--ease,ease) }
.ptable tbody tr:hover td{ background:var(--bg-elev,rgba(255,255,255,.03)) }
.msg[data-flash]{ animation:evToastIn .3s var(--ease-spring,var(--ease,ease)) }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}