/* ============================================================
   Conecta Negócios — base.css
   Fundação do redesign (Passo 0): tokens de design + componentes
   compartilhados. Direção: corporativo premium & sóbrio.
   A intranet herda estes tokens nas fases seguintes.
   ============================================================ */

:root{
  /* Cor — base clara dominante, accent pontual */
  --c-bg:#FFFFFF;
  --c-bg-soft:#FAFBFD;
  --c-ink:#0A1033;
  --c-ink-2:#5A6178;
  --c-fio:#E2E8F5;
  --c-accent:#003DFF;
  --c-accent-deep:#0030CC;
  --c-azul-claro:#00AAFF;
  --c-turquesa:#0BECF8;

  /* Raio e sombra — moderados, em camadas */
  --r-md:14px;
  --r-lg:22px;
  --sombra-1:0 1px 2px rgba(10,16,51,.05),0 4px 14px rgba(10,16,51,.06);
  --sombra-2:0 2px 6px rgba(10,16,51,.06),0 16px 40px rgba(10,16,51,.10);

  /* Ritmo vertical fluido */
  --sec:clamp(64px,9vw,110px);

  /* Escala tipográfica fluida */
  --t-display:clamp(2.3rem,5vw,3.6rem);
  --t-h2:clamp(1.6rem,3.2vw,2.4rem);
  --t-body:clamp(1rem,1.15vw,1.125rem);
}

/* ── Estrutura ── */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:var(--sec) 0}
.head{max-width:680px;margin-bottom:clamp(36px,5vw,56px)}
.head h2{font-size:var(--t-h2);letter-spacing:-.02em;line-height:1.12;color:var(--c-ink);margin-bottom:16px}
.head p{color:var(--c-ink-2);font-size:var(--t-body);max-width:65ch}

/* ── Kicker (Demi, caixa-alta, tracking largo) ── */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);margin-bottom:14px}
.kicker::before{content:'';width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c-azul-claro),var(--c-turquesa))}

/* ── Botões ── */
.btn{display:inline-block;background:var(--c-accent);color:#fff;font-weight:600;padding:13px 30px;border-radius:999px;text-decoration:none;font-size:.93rem;border:none;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:var(--c-accent-deep);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,61,255,.22)}
.btn-light{background:#fff;color:var(--c-accent)}
.btn-light:hover{background:#fff;box-shadow:0 10px 24px rgba(10,16,51,.18)}
/* Ghost para fundos claros (hero) e escuros (seções antigas sobrescrevem) */
.btn-outline{background:transparent;border:1.5px solid #C9D3EA;color:var(--c-ink)}
.btn-outline:hover{border-color:var(--c-accent);color:var(--c-accent);box-shadow:none;background:transparent}

/* ── Motion sutil ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}