/* ============================================================
   MAJOR ASSESSORIA CONTÁBIL — sistema visual
   Tipografia: Inter Tight (display) + Inter (texto) + JetBrains Mono (técnico)
   Paleta: navy da marca (#1D1C58) sobre superfícies claras
   ============================================================ */

:root{
  /* marca */
  --navy:        #1D1C58;
  --navy-deep:   #141338;
  --navy-night:  #0D0C28;
  --navy-soft:   #2E2D73;
  --navy-line:   #3B3A82;

  /* texto */
  --ink:         #14152A;
  --ink-2:       #3D4059;
  --ink-3:       #6B6F8A;
  --ink-4:       #5F6480;

  /* superfícies */
  --paper:       #FFFFFF;
  --paper-2:     #F6F7FB;
  --paper-3:     #EFF1F8;
  --line:        #E1E4EF;
  --line-2:      #CED3E4;

  /* acento técnico */
  --accent:      #2F55C8;
  --accent-soft: #E8EDFB;

  /* verde da marca — mesmo token da LP, para o site e a LP parecerem
     a mesma empresa. Entra em destaque de titulo, marcador de lista e
     sinal de "ok"; nunca como fundo de bloco inteiro. */
  --lime:        #9BE917;
  --lime-deep:   #7CC40C;
  --lime-soft:   #F2FCDF;

  /* parceiro (somente nos blocos de parceria) */
  --ramo:        #8DD615;

  --wrap: 1180px;
  --r: 10px;
  --r-sm: 6px;
  --sh-1: 0 1px 2px rgba(20,19,57,.05), 0 4px 14px rgba(20,19,57,.05);
  --sh-2: 0 2px 6px rgba(20,19,57,.07), 0 18px 44px rgba(20,19,57,.11);

  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --f-text:    "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--ink);
  margin:0;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.12;
}
h1{ font-size:clamp(32px,4.1vw,52px); letter-spacing:-.032em; }
h2{ font-size:clamp(27px,3.1vw,40px); letter-spacing:-.028em; }
h3{ font-size:clamp(19px,1.6vw,22px); letter-spacing:-.018em; line-height:1.3; }
h4{ font-size:17px; letter-spacing:-.012em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- rótulo técnico (mono) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line-2); border-radius:999px;
  padding:7px 16px 7px 13px; background:#fff;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:22px;
  box-shadow:var(--sh-1);
}
.pill::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 3px rgba(155,233,23,.25);
  flex:0 0 auto;
}

/* destaque do titulo: traco lime sob a palavra-chave.
   Feito com background-image, nao com ::after + z-index:-1 — com z-index
   negativo o traco fica ATRAS do fundo da secao e some. E o gradiente
   acompanha a quebra de linha, que o pseudo-elemento nao faz. */
.hl{
  color:var(--navy);
  /* text-decoration e o unico que acompanha a quebra de linha sozinho.
     Com ::after + z-index:-1 o traco some atras do fundo da secao; com
     background-image, o background-position joga o gradiente para fora
     do box e ele some tambem. Os dois foram tentados e medidos. */
  text-decoration:underline;
  text-decoration-color:var(--lime);
  text-decoration-thickness:.11em;
  text-underline-offset:.04em;
  text-decoration-skip-ink:none;
}

.kicker{
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-4);
  margin:0 0 18px;
  display:block;
}
.kicker--on-dark{ color:#9FA3D4; }
.kicker--accent{ color:var(--accent); }

.num{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-text);
  font-size:15px; font-weight:600; letter-spacing:-.008em;
  padding:14px 24px;
  border-radius:var(--r);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg{ flex:0 0 auto; }
.btn.btn--primary{ background:var(--navy); color:#fff; }
.btn--primary:hover{ background:var(--navy-soft); }
.btn.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--navy); background:var(--paper-2); }
.btn.btn--light{ background:#fff; color:var(--navy); }
.btn--light:hover{ background:var(--paper-3); }
.btn.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- link com seta ---------- */
.lnk{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:600; color:var(--navy);
  text-decoration:none; letter-spacing:-.008em;
  border-bottom:1px solid var(--line-2); padding-bottom:3px;
  transition:border-color .18s ease, gap .18s ease;
}
.lnk:hover{ border-color:var(--navy); gap:11px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header__in{
  max-width:var(--wrap); margin:0 auto; padding:0 28px;
  height:94px; display:flex; align-items:center; gap:34px;
}
.brand{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.brand img{ height:58px; width:auto; }

.site-nav{ margin-left:auto; display:flex; align-items:center; gap:28px; }
.site-nav a{
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  text-decoration:none; letter-spacing:-.006em;
  padding:6px 0; border-bottom:1.5px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.site-nav a:hover{ color:var(--navy); }
.site-nav a[aria-current="page"]{ color:var(--navy); border-color:var(--navy); font-weight:600; }

.nav-toggle{
  display:none; margin-left:auto;
  width:42px; height:42px; border:1px solid var(--line-2);
  background:#fff; border-radius:var(--r); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:17px; height:1.5px; background:var(--navy); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--navy);
}
.nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:76px 0 0;
  position:relative; overflow:hidden;
}
.hero__grid{
  display:grid; grid-template-columns:1.04fr .96fr; gap:58px; align-items:start;
}
.hero h1{ margin-bottom:22px; }
.hero__lead{ font-size:19px; color:var(--ink-2); max-width:33em; margin-bottom:30px; }
.hero__note{
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-4);
  letter-spacing:.03em; margin-top:22px;
}

/* painel do ciclo — elemento próprio */
.cycle-panel{
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:var(--r);
  padding:26px 26px 22px;
}
.cycle-panel__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding-bottom:16px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.cycle-panel__head strong{
  font-family:var(--f-display); font-size:15.5px; color:var(--ink); letter-spacing:-.015em;
}
.cycle-panel__head span{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-4); letter-spacing:.1em; text-transform:uppercase; }

.cycle-row{
  display:grid; grid-template-columns:62px 1fr; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.cycle-row:last-child{ border-bottom:0; padding-bottom:2px; }
.cycle-row__when{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  color:var(--navy); letter-spacing:.02em; padding-top:2px;
}
.cycle-row__what{ font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.cycle-row__what b{ color:var(--ink); font-weight:600; }

/* barra de números */
.factbar{ border-top:1px solid var(--line); margin-top:72px; }
.factbar__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.fact{
  padding:30px 28px 32px;
  border-left:1px solid var(--line);
}
.fact:first-child{ border-left:0; padding-left:0; }
.fact__n{
  font-family:var(--f-display); font-size:34px; font-weight:700;
  color:var(--navy); letter-spacing:-.035em; line-height:1; margin-bottom:9px;
  font-variant-numeric:tabular-nums;
}
.fact__l{ font-size:13.5px; color:var(--ink-3); line-height:1.45; }

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{ padding:80px 0; }
.sec--tight{ padding:64px 0; }
.sec--paper2{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec--navy{ background:var(--navy); color:#C9CBE8; }
/* quando um bloco navy encosta no outro, so a cor nao separa: a
   gradacao (navy -> navy-deep -> navy-night) mais o fio lime no topo
   do CTA marcam onde um termina e o outro comeca. */
.sec--navy h2,.sec--navy h3{ color:#fff; }

.sec__head{ max-width:62ch; margin-bottom:40px; }
.sec__head p{ font-size:18px; color:var(--ink-3); margin-top:16px; }
.sec--navy .sec__head p{ color:#A7AAD4; }

.sec__head--split{
  max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.sec__head--split p{ margin-top:0; }

/* ---------- cards de serviço ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.svc{
  padding:34px 30px 34px 0;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.svc:last-child{ border-right:0; }
.svc:not(:first-child){ padding-left:30px; }
.svc__i{
  font-family:var(--f-mono); font-size:11px; color:var(--ink-4);
  letter-spacing:.1em; margin-bottom:20px;
}
.ico{
  width:46px; height:46px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; margin-bottom:20px;
  flex:0 0 auto;
}
.ico svg{ width:23px; height:23px; }
.ico--lime{ background:var(--lime-soft); color:var(--navy); border:1px solid #DCF3B4; }
.ico--line{ background:#fff; color:var(--navy); border:1px solid var(--line-2); }
.step .ico svg, .profile .ico svg{ width:19px; height:19px; }
.svc h3{ margin-bottom:12px; }
.svc p{ font-size:15px; color:var(--ink-3); margin-bottom:20px; }
.svc .lnk{ margin-top:auto; align-self:flex-start; }

/* ---------- lista de áreas ---------- */
.areas{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.area{
  padding:26px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:30px 1fr; gap:18px; align-items:start;
}
.area__n{ font-family:var(--f-mono); font-size:12px; color:var(--ink-4); padding-top:4px; }
.area{ transition:background .2s ease; }
.area:hover{ background:linear-gradient(90deg,var(--paper-2),transparent 70%); }
.area__ico{
  /* display:flex, nao inline-flex: como inline ele herdava o line-height do
     bloco e abria um vao de dezenas de pixels entre o icone e o titulo */
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--lime-soft); color:var(--navy);
  border:1px solid #DCF3B4; margin:0 0 10px;
}
.area__ico svg{ width:18px; height:18px; }
.sec--navy .area__ico{ background:rgba(155,233,23,.12); border-color:rgba(155,233,23,.3); color:#DFF7A8; }
.area h4{ margin-bottom:7px; }
.area p{ font-size:14.5px; color:var(--ink-3); line-height:1.55; }

/* hero de pagina interna: texto + imagem lado a lado */
.hero__grid--2{ display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:start; }
@media (max-width:1040px){ .hero__grid--2{ grid-template-columns:1fr; gap:34px; } }

/* coluna de imagem do hero */
/* A foto do hero NAO estica para acompanhar a altura do texto: com
   align-items:stretch + height:100%, um H1 de 4-5 linhas espremia uma foto
   16:9 ate a proporcao 1.17 e o `cover` comia quase metade do enquadramento.
   Proporcao fixa, recorte previsivel. */
.hero__media{ position:relative; }
.hero__media .fig img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.fig__cap{
  font-family:var(--f-mono); font-size:10.5px; color:var(--ink-4);
  letter-spacing:.05em; margin-top:12px; display:block;
}

/* o ciclo mensal como REGUA horizontal: 5 etapas lado a lado leem
   muito mais rapido que uma lista vertical de 5 paragrafos */
.wrap-bleed{ margin-top:56px; }
.cycle-panel--faixa{ padding:0; border:0; background:transparent; }
.cycle-panel--faixa .cycle-panel__head{
  border-bottom:0; padding-bottom:0; margin-bottom:22px;
}
.cycle-panel--faixa .cycle-trilha{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); overflow:hidden;
}
.cycle-panel--faixa .cycle-row{
  display:block; padding:22px 22px 24px;
  border-bottom:0; border-left:1px solid var(--line);
  position:relative;
}
.cycle-panel--faixa .cycle-row:first-child{ border-left:0; }
.cycle-panel--faixa .cycle-row::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease, ease);
}
.cycle-panel--faixa .cycle-row.in::before{ transform:scaleX(1); }
.cycle-panel--faixa .cycle-row__when{
  color:var(--navy); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; margin-bottom:10px; padding-top:0;
}
.cycle-panel--faixa .cycle-row__what{ font-size:14px; }

/* ---------- figuras ---------- */
/* o browser aplica `figure{margin:1em 40px}` por padrao — sao 80px comidos da
   largura em TODA figura do site, e isso nao aparece como erro: a foto so fica
   menor que a coluna. Zerar e obrigatorio. */
figure{ margin:0; }
.fig{ position:relative; margin:0; }
.fig img{
  width:100%; height:auto; border-radius:var(--r);
  box-shadow:var(--sh-2); display:block;
}
.fig figcaption{
  font-family:var(--f-mono); font-size:10.5px; color:var(--ink-4);
  letter-spacing:.05em; margin-top:12px; line-height:1.5;
}
.fig--crop img{ aspect-ratio:16/10; object-fit:cover; }
/* foto em faixa larga: sem limite ela chega a 700px de altura num
   container de 1124px e vira um buraco entre duas secoes */
.fig--faixa{ margin:0 auto; }
.fig--faixa img{ aspect-ratio:24/9; object-fit:cover; max-height:280px; width:100%; }
.fig--tall img{ aspect-ratio:4/5; object-fit:cover; }

/* selo flutuante sobre a foto, igual ao da LP */
.fig__selo{
  position:absolute; left:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border-radius:999px; padding:10px 18px 10px 14px;
  box-shadow:var(--sh-2); font-size:13.5px; font-weight:600; color:var(--ink);
  letter-spacing:-.008em; max-width:calc(100% - 36px);
}
.fig__selo svg{ width:17px; height:17px; color:var(--lime-deep); flex:0 0 auto; }

/* faixa de imagem + texto */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split--inv .split__txt{ order:2; }

/* ---------- bloco de sistema / parceria ---------- */
.sys{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sys__logos{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
  padding:30px 32px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.sys__logos img[alt^='SAP']{ height:34px; width:auto; }
.sys__logos img[alt^='Ramo']{ height:40px; width:auto; }
.sys__logos .sep{ width:1px; height:34px; background:var(--line); }
.sys__cap{
  font-family:var(--f-mono); font-size:10.5px; color:var(--ink-4);
  letter-spacing:.08em; margin-top:14px; line-height:1.6;
}
.sys--on-navy .sys__logos{ background:#fff; border-color:transparent; }
.sys--on-navy .sys__cap{ color:#8D91C2; }

.ck{ list-style:none; margin:0; padding:0; }
.ck li{
  position:relative; padding-left:26px; margin-bottom:13px;
  font-size:15.5px; line-height:1.55;
}
.ck li{ padding-left:32px; }
.ck li::before{
  content:""; position:absolute; left:0; top:4px;
  width:20px; height:20px; border-radius:50%;
  background:var(--lime-soft);
  border:1px solid #D3EFA6;
}
.ck li::after{
  content:""; position:absolute; left:6px; top:9px;
  width:8px; height:4px; border-left:2px solid var(--lime-deep);
  border-bottom:2px solid var(--lime-deep); transform:rotate(-45deg);
}
.sec--navy .ck li::before{ background:rgba(155,233,23,.14); border-color:rgba(155,233,23,.4); }
.sec--navy .ck li::after{ border-color:var(--lime); }
.ck li:last-child{ margin-bottom:0; }

/* ---------- jornada ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.step{ padding:30px 26px 30px 0; border-right:1px solid var(--line); }
.step:last-child{ border-right:0; }
.step:not(:first-child){ padding-left:26px; }
.step__n{
  font-family:var(--f-mono); font-size:11px; color:var(--accent);
  letter-spacing:.1em; margin-bottom:16px;
}
.step h4{ margin-bottom:8px; }
.step p{ font-size:14px; color:var(--ink-3); line-height:1.55; }

/* ---------- socios ---------- */
.socio__retrato{
  aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden;
  margin:-28px -26px 22px; background:var(--paper-3);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;
}
.socio__retrato img{ width:100%; height:100%; object-fit:cover; }
.socio__mono{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  /* background-color explicito ALEM do gradiente: auditor de contraste (e
     leitor de tela em modo de alto contraste) nao enxerga gradiente, e o
     texto branco aparecia como se estivesse sobre fundo claro. */
  background-color:var(--navy);
  background-image:
    radial-gradient(120% 120% at 20% 0%, rgba(80,78,180,.55) 0%, rgba(29,28,88,0) 60%);
  color:#fff; position:relative;
}
.socio__mono span{
  font-family:var(--f-display); font-size:46px; font-weight:700;
  letter-spacing:-.03em; line-height:1;
}
.socio__mono::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--lime);
}

/* ---------- perfil de cliente ---------- */
.profile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.profile-grid--2{ grid-template-columns:repeat(2,1fr); }
.profile{
  border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; background:#fff;
  box-shadow:var(--sh-1);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.profile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.profile h4{ margin-bottom:10px; }
.profile p{ font-size:14.5px; color:var(--ink-3); }

/* ---------- destaque / citação de posicionamento ---------- */
.statement,
.sec__head .statement,
.sec__head--split p.statement{
  font-family:var(--f-display); font-size:clamp(22px,2.5vw,32px); font-weight:700;
  line-height:1.3; letter-spacing:-.028em; color:var(--ink);
  max-width:21ch; margin-top:0;
}
.sec--navy .statement,
.sec--navy .sec__head .statement{ color:#fff; }

/* ============================================================
   CTA / CONTATO
   ============================================================ */
.cta{
  background:var(--navy-deep); color:#C9CBE8; padding:88px 0;
  border-top:3px solid var(--lime);
}
.cta h2{ color:#fff; max-width:17ch; }
.cta p{ color:#A7AAD4; font-size:18px; max-width:46ch; margin-top:18px; }
.cta__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }

/* formulário de qualificação */
.qform{
  background:#fff; border-radius:var(--r); padding:30px 30px 28px;
}
.cta .qform h3{ color:var(--ink); font-size:19px; margin-bottom:6px; }
.cta .qform .qform__sub{ font-size:14px; color:var(--ink-3); margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--f-text); font-size:15px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r);
  background:#fff; transition:border-color .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy);
}
.field textarea{ resize:vertical; min-height:78px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qform .btn{ width:100%; justify-content:center; margin-top:4px; }
.cta .qform .qform__note{ font-size:12px; color:var(--ink-3); margin-top:14px; line-height:1.5; }

/* ---------- bloco de contato / endereço ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.contact-item{ padding:28px 26px 28px 0; border-right:1px solid var(--line); }
.contact-item:last-child{ border-right:0; }
.contact-item:not(:first-child){ padding-left:26px; }
.contact-item .kicker{ margin-bottom:12px; }
.contact-item p{ font-size:15.5px; color:var(--ink); line-height:1.6; }
.contact-item a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line-2); }
.contact-item a:hover{ border-color:var(--navy); }

.map-embed{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--paper-2); line-height:0;
}
.map-embed iframe{ width:100%; height:380px; border:0; display:block; filter:grayscale(1) contrast(.94); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-night); color:#A3A7D6; padding:64px 0 0; font-size:14.5px; }
.site-footer a{ color:#B9BCE0; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:52px; }
.footer__brand img{ height:46px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.92; }
.footer__brand p{ font-size:14px; line-height:1.65; max-width:30ch; }
.footer h5{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:#8B8FC4; margin:0 0 16px;
}
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:10px; line-height:1.5; }
.footer__bar{
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0 26px;
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:#9296CC;
}
.footer__bar .mono{ font-family:var(--f-mono); letter-spacing:.03em; }

/* botão flutuante de WhatsApp */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--navy); color:#fff; text-decoration:none;
  padding:13px 18px; border-radius:40px;
  font-size:14.5px; font-weight:600; letter-spacing:-.008em;
  box-shadow:0 6px 24px rgba(20,19,56,.26);
  transition:background .18s ease;
}
.wa-float:hover{ background:var(--navy-soft); }

/* ============================================================
   ANIMAÇÃO DE ENTRADA (discreta)
   ============================================================ */
/* o conteudo e visivel por padrao; so esconde quando ha JS para revelar */
.js .rise{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.js .rise.in{ opacity:1; transform:none; }

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

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1040px){
  .hero__grid{ grid-template-columns:1fr; gap:46px; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .hero__media .fig{ display:block; }
  .hero__media .fig img{ flex:none; height:auto; min-height:0; width:100%;
                         aspect-ratio:16/10; max-height:380px; }
  .split--inv .split__txt{ order:0; }
  .sys{ grid-template-columns:1fr; gap:38px; }
  .cta__grid{ grid-template-columns:1fr; gap:40px; }
  .sec__head--split{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:38px; }
}

@media (max-width:880px){
  .site-nav{
    display:none; position:absolute; top:94px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 28px 20px;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:13px 0; border-bottom:1px solid var(--line); }
  .site-nav .btn{ margin-top:14px; justify-content:center; }
  .nav-toggle{ display:inline-flex; }
  .brand img{ height:46px; }
  .site-header__in{ height:78px; }
  .site-nav{ top:78px; }

  .svc-grid{ grid-template-columns:1fr; }
  .svc{ border-right:0; border-bottom:1px solid var(--line); padding:28px 0 !important; }
  .svc:last-child{ border-bottom:0; }

  .steps{ grid-template-columns:1fr 1fr; }
  .step{ padding:26px 20px 26px 0 !important; border-bottom:1px solid var(--line); }
  .step:nth-child(2n){ border-right:0; padding-left:20px !important; }
  .step:nth-child(2n+1){ padding-left:0 !important; }

  .areas{ grid-template-columns:1fr; gap:0; }
  .profile-grid{ grid-template-columns:1fr; }
  .cycle-panel--faixa .cycle-trilha{ grid-template-columns:1fr 1fr; }
  .cycle-panel--faixa .cycle-row:nth-child(2n+1){ border-left:0; }
  .cycle-panel--faixa .cycle-row{ border-top:1px solid var(--line); }
  .cycle-panel--faixa .cycle-row:nth-child(-n+2){ border-top:0; }

  .contact-grid{ grid-template-columns:1fr; }
  .contact-item{ border-right:0; border-bottom:1px solid var(--line); padding:24px 0 !important; }
  .contact-item:last-child{ border-bottom:0; }

  .factbar__grid{ grid-template-columns:1fr 1fr; }
  .fact{ padding:24px 20px 26px; }
  .fact:first-child{ padding-left:20px; }
  .fact:nth-child(2n+1){ border-left:0; padding-left:0; }
  .fact:nth-child(n+3){ border-top:1px solid var(--line); }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .wrap,.site-header__in{ padding-left:20px; padding-right:20px; }
  .sec{ padding:62px 0; }
  .sec--tight{ padding:52px 0; }
  .hero{ padding-top:52px; }
  .hero__lead{ font-size:17px; }
  .factbar{ margin-top:52px; }
  .cta{ padding:62px 0; }
  .cycle-panel{ padding:22px 20px 18px; }
  .cycle-row{ grid-template-columns:54px 1fr; gap:12px; }
  .cycle-panel--faixa .cycle-trilha{ grid-template-columns:1fr; }
  /* no celular a coluna e estreita: com min-height de 420px + cover a foto
     vira um retangulo vertical que empurra todo o resto para fora da dobra */
  /* no celular a coluna e estreita: o height:100% do desktop brigava com o
     aspect-ratio e encolhia a foto. Aqui ela volta a ser largura cheia. */
  .hero__media .fig{ display:block; }
  .hero__media .fig img{ flex:none; height:auto; min-height:0; width:100%;
                         aspect-ratio:4/3; max-height:300px; }
  .fig--faixa img{ aspect-ratio:16/10; max-height:230px; }
  .cycle-panel--faixa .cycle-row{ border-left:0; border-top:1px solid var(--line); }
  .cycle-panel--faixa .cycle-row:first-child{ border-top:0; }
  .wrap-bleed{ margin-top:40px; }
  .field--row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:34px; }
  .btn{ width:100%; justify-content:center; }
  .btn-row{ gap:10px; }
  .wa-float span{ display:none; }
  .wa-float{ padding:15px; border-radius:50%; }
  .sys__logos{ gap:20px; padding:22px 20px; }
  .brand img{ height:40px; }
  .site-header__in{ height:70px; }
  .site-nav{ top:70px; }
  .fig__selo{ font-size:12.5px; padding:8px 14px 8px 11px; left:12px; bottom:12px; }
  .sys__logos img[alt^='SAP']{ height:26px; }
  .sys__logos img[alt^='Ramo']{ height:31px; }
}

/* ---- sócios com retrato + equipe (fotos do cliente, 18/10/2026) ----
   As fotos vêm de crachás circulares; o recorte entregue já é 3:4 e já exclui
   a borda do círculo e o painel de logo. Por isso o CSS só enquadra — nunca
   force aspect-ratio diferente de 3/4 aqui, senão o cover decapita a cabeça. */
.socio__head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.socio__foto{ flex:0 0 auto; width:108px; height:144px; object-fit:cover;
  border-radius:var(--r-sm); background:var(--paper-3);
  border:1px solid var(--line); box-shadow:var(--sh-1); }
.socio .socio__head .kicker{ display:block; margin-bottom:8px; }
.socio .socio__head h3{ margin:0; }

.equipe{ margin-top:46px; padding-top:38px; border-top:1px solid var(--line); }
.equipe__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:16px; }
.equipe__item{ margin:0; }
/* height:auto e OBRIGATORIO: o `img{max-width:100%}` global nao o define, e aí
   o atributo height="720" do HTML vence o aspect-ratio — a caixa vira 147x720
   e a foto ocupa meia tela, sem erro em lugar nenhum. */
.equipe__item img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:var(--r-sm); background:var(--paper-3);
  border:1px solid var(--line); }
.equipe__item figcaption{ margin-top:10px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); text-align:center; }

.footer__claim{ color:#fff; font-weight:600; font-size:15.5px; margin-bottom:8px; }

@media (max-width:1040px){
  .equipe__grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:620px){
  .equipe__grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .socio__foto{ width:88px; height:117px; }
}