/* ══════════════════════════════════════════════════════════════
   MÉTRICA — site institucional
   Sistema visual derivado do manual da marca: réguas navy de 2px,
   canto vivo (raio zero), rótulos em caixa alta espaçada.
   O elemento assinatura é o cubo de dados do hero.
   ══════════════════════════════════════════════════════════════ */

/* ─── tokens ─────────────────────────────────────────────── */
:root{
  /* marca */
  --navy:#0B2545;
  --cyan:#15C1E0;
  --gray:#6E7B8A;

  /* derivados */
  --navy-deep:#071A31;      /* superfícies escuras */
  --navy-soft:#123256;      /* réguas sobre escuro */
  --cyan-ink:#0B7C93;       /* ciano legível sobre claro (4.6:1) */
  --gray-ink:#55636F;       /* Pro Gray escurecido p/ texto: 5.3:1 sobre o papel.
                               O #6E7B8A original fica reservado a grafismo. */
  --paper:#EDF1F4;          /* fundo frio, painel de instrumento */
  --white:#FFFFFF;
  --hair:rgba(11,37,69,.14);
  --hair-lt:rgba(255,255,255,.16);

  /* tipografia */
  --disp:'Archivo',system-ui,sans-serif;      /* títulos e corpo */
  --util:'Space Grotesk',ui-monospace,monospace; /* rótulos, números, metadados */

  /* ritmo */
  --gut:24px;
  --max:1240px;
  --sec-y:clamp(72px,9vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:900px){ :root{ --gut:48px; } }

/* ─── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--disp);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
a{color:var(--cyan-ink);text-underline-offset:3px;}

:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(21,193,224,.45);
}
.sec--dark :focus-visible,.cta :focus-visible{
  outline-color:var(--cyan);
  box-shadow:0 0 0 6px rgba(21,193,224,.3);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;text-decoration:none;
}
.skip:focus{left:0;}

/* malha isométrica de fundo — ecoa as faces do cubo (±30°) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(30deg,transparent 0 47px,rgba(11,37,69,.045) 47px 48px),
    repeating-linear-gradient(-30deg,transparent 0 47px,rgba(11,37,69,.045) 47px 48px);
}
body > *{position:relative;z-index:1;}

/* ─── tipografia utilitária ──────────────────────────────── */
.eyebrow{
  font-family:var(--util);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gray-ink);
  margin:0 0 20px;
}
.eyebrow--cy{color:var(--cyan);}

.h1{
  font-weight:800;font-size:clamp(38px,5vw,64px);line-height:1;
  letter-spacing:-.035em;margin:0 0 26px;max-width:11ch;text-wrap:balance;
}
.h2{
  font-weight:800;font-size:clamp(30px,3.9vw,50px);line-height:1.04;
  letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance;
}

/* ─── botões ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 28px;border:2px solid var(--navy);
  font-family:var(--util);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn--sm{padding:11px 18px;font-size:11px;}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy);}
.btn--ghost{background:transparent;color:var(--navy);}
.btn--ghost:hover{background:var(--navy);color:#fff;}
.btn--cyan{background:var(--cyan);border-color:var(--cyan);color:var(--navy);}
.btn--cyan:hover{background:#fff;border-color:#fff;}
.btn:active{transform:translateY(1px);}

/* ─── header ─────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(237,241,244,.9);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--navy);
}
.hdr__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.brand__cube{width:30px;height:33px;flex:none;}
.brand__wm{
  font-family:var(--util);font-weight:700;font-size:19px;letter-spacing:.16em;
}
/* medidor de rolagem — a "métrica" da própria leitura */
.hdr__meter{position:absolute;left:0;right:0;bottom:-2px;height:2px;}
.hdr__meter i{display:block;height:100%;width:0;background:var(--cyan);}

.nav{display:flex;align-items:center;gap:30px;}
/* não estilizar `.nav a` de forma genérica: venceria `.btn--navy`
   por especificidade e apagaria o texto do botão. */
.nav a:not(.btn){
  font-family:var(--util);font-weight:500;font-size:14px;
  color:var(--navy);text-decoration:none;letter-spacing:.02em;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:not(.btn):hover{border-bottom-color:var(--cyan);}

.burger{
  display:none;width:44px;height:44px;background:none;border:2px solid var(--navy);
  padding:0;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--navy);transition:transform .2s var(--ease);}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

@media (max-width:899px){
  .burger{display:flex;}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:2px solid var(--navy);
    padding:8px var(--gut) 24px;display:none;
  }
  .nav[data-open="true"]{display:flex;}
  .nav a:not(.btn){padding:16px 0;border-bottom:1px solid var(--hair);font-size:17px;}
  .nav .btn{margin-top:18px;}
}

/* ─── hero ───────────────────────────────────────────────── */
.hero{border-bottom:2px solid var(--navy);}
.hero__in{
  max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,96px) var(--gut) clamp(56px,7vw,96px);
  display:grid;gap:clamp(40px,5vw,72px);align-items:center;
}
@media (min-width:960px){
  .hero__in{grid-template-columns:1.1fr .9fr;}
}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:34em;margin:0 0 34px;color:#28405f;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;}
@media (max-width:520px){ .hero__cta .btn{flex:1 1 100%;} }
.hero__foot{
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--hair);
  font-family:var(--util);font-size:13px;line-height:1.6;color:var(--gray-ink);max-width:36em;
}

/* ─── cubo de dados (assinatura) ─────────────────────────── */
.cube{position:relative;width:100%;max-width:520px;margin-inline:auto;}
.cube svg{width:100%;height:auto;overflow:visible;}
.cube .face{transition:opacity .3s var(--ease);cursor:pointer;}
.cube[data-hot="true"] .face{opacity:.34;}
.cube[data-hot="true"] .face[data-active="true"]{opacity:1;}

/* células vivas — dado entrando no cubo.
   A célula acende em branco, mas cada face parte de uma luminosidade
   diferente. As três opacidades abaixo estão calibradas para produzir o
   MESMO salto de luminosidade percebida (ΔL* ≈ 23) sobre ciano, navy e
   Pro Gray — por isso os números não são iguais. */
.cells rect,.cells polygon{opacity:0;}
.cell{fill:#fff;opacity:0;}
.cell.on{animation:pulse 2.6s var(--ease) forwards;}
[data-cells="left"] .cell.on{animation-name:pulse-navy;}
[data-cells="right"] .cell.on{animation-name:pulse-gray;}
@keyframes pulse{
  0%{opacity:0;}
  18%{opacity:.85;}
  100%{opacity:0;}
}
@keyframes pulse-navy{
  0%{opacity:0;}
  18%{opacity:.26;}
  100%{opacity:0;}
}
@keyframes pulse-gray{
  0%{opacity:0;}
  18%{opacity:.45;}
  100%{opacity:0;}
}

.cube__lbl{
  position:absolute;transform:translate(-50%,-50%);
  background:none;border:0;padding:6px 8px;cursor:pointer;
  font-family:var(--util);font-weight:700;font-size:clamp(10px,1.15vw,13px);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.35;text-align:center;
}
.cube__lbl--top{left:50%;top:29%;color:var(--navy);}
/* branco sobre o Pro Gray fica em 4.33:1 — a sombra navy escurece o
   fundo local e leva o par acima de 4.5:1 sem alterar a cor da face. */
/* Correção óptica: os dois laterais são brancos sobre fundo escuro e
   sofrem irradiação — o branco vaza para o fundo e a letra engorda. No
   mesmo corpo do ANALYTICS (navy sobre ciano, que lê mais magro) eles
   apareciam maiores. 6% a menos de corpo e um halo mais curto igualam o
   peso percebido, sem tocar no rótulo de cima.
   O halo mantém o trabalho de contraste descrito acima: menos raio
   concentra o escurecimento junto da letra, que é onde a razão é medida. */
.cube__lbl--left,.cube__lbl--right{
  color:#fff;text-shadow:0 0 5px rgba(7,26,49,.95);
  font-size:clamp(9.5px,1.08vw,12.2px);
}
/* Os rótulos laterais ficam deitados no plano da própria face: a linha de
   base acompanha a aresta, mas as hastes continuam em pé — que é como o
   cubo trata suas arestas verticais. 29,25° = atan(84/150), a inclinação
   real das arestas deste cubo; o isométrico de manual (30°) sairia da linha. */
.cube__lbl--left{left:31%;top:62%;transform:translate(-50%,-50%) skewY(29.25deg);}
.cube__lbl--right{left:69%;top:62%;transform:translate(-50%,-50%) skewY(-29.25deg);}
.cube__lbl:hover{text-decoration:underline;text-underline-offset:4px;}

/* ─── faixa da cadeia de valor ───────────────────────────── */
.strip{background:var(--white);border-bottom:2px solid var(--navy);}
.strip__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .strip__in{grid-template-columns:repeat(4,1fr);} }
.stat{
  padding:34px 26px 34px 0;border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:8px;
}
.stat:nth-child(2n){padding-left:26px;}
@media (min-width:900px){
  .stat{padding-left:26px;}
  .stat:first-child{padding-left:0;}
  .stat:last-child{border-right:0;}
}
@media (max-width:899px){
  .stat:nth-child(2n){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--hair);}
}
.stat__n{
  font-family:var(--util);font-weight:700;font-size:clamp(26px,3.2vw,36px);
  letter-spacing:-.01em;line-height:1;
}
.stat__l{font-size:14px;line-height:1.45;color:var(--gray-ink);max-width:22em;}
/* a faixa carrega termos, não algarismos: corpo menor para caber em uma
   ou duas linhas na coluna estreita, mantendo a face utilitária. */
.strip--flow .stat__n{font-size:clamp(19px,1.9vw,23px);line-height:1.2;letter-spacing:0;}

/* ─── seções ─────────────────────────────────────────────── */
.sec{padding:var(--sec-y) 0;border-bottom:2px solid var(--navy);}
.sec__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.sec__hd{max-width:44rem;margin-bottom:clamp(40px,5vw,64px);}
.sec__intro{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:#28405f;margin:0;max-width:40em;}
.sec--alt{background:var(--white);}
.sec--dark{background:var(--navy);color:#fff;border-bottom-color:var(--navy);}
.sec--dark .sec__intro{color:rgba(255,255,255,.72);}

/* ─── serviços ───────────────────────────────────────────── */
.svcs{display:grid;gap:0;border:2px solid var(--navy);background:var(--white);}
@media (min-width:900px){ .svcs{grid-template-columns:repeat(3,1fr);} }
.svc{padding:36px 30px 40px;border-bottom:2px solid var(--navy);position:relative;}
.svc:last-child{border-bottom:0;}
@media (min-width:900px){
  .svc{border-bottom:0;border-right:2px solid var(--navy);}
  .svc:last-child{border-right:0;}
}
/* barra de face — mesma cor da face correspondente no cubo */
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;}
.svc--navy::before{background:var(--navy);}
.svc--cyan::before{background:var(--cyan);}
.svc--gray::before{background:var(--gray);}
.svc__ax{
  font-family:var(--util);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray-ink);margin:8px 0 18px;
}
.svc__t{font-weight:800;font-size:26px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;}
.svc__d{font-size:16px;line-height:1.6;margin:0 0 24px;color:#28405f;}
.svc__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);}
.svc__l li{
  font-family:var(--util);font-size:13.5px;letter-spacing:.01em;
  padding:11px 0 11px 20px;border-bottom:1px solid var(--hair);position:relative;
}
/* marcador losango — a célula do cubo vista de cima */
.svc__l li::before{
  content:"";position:absolute;left:0;top:18px;width:8px;height:8px;
  background:var(--cyan);transform:rotate(45deg) scaleY(.62);
}
.svc:target{box-shadow:inset 0 0 0 3px var(--cyan);}

/* ─── método ─────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--navy);}
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,1fr);} }
.step{padding:30px 26px 40px 0;border-bottom:1px solid var(--hair);position:relative;}
@media (min-width:900px){
  .step{border-bottom:0;border-right:1px solid var(--hair);padding:30px 26px 10px;}
  .step:first-child{padding-left:0;}
  .step:last-child{border-right:0;padding-right:0;}
}
/* tique de medição no topo de cada etapa */
.step::before{content:"";position:absolute;top:-2px;left:0;width:38px;height:6px;background:var(--cyan);}
@media (min-width:900px){ .step:first-child::before{left:0;} }
.step__n{
  display:block;font-family:var(--util);font-weight:700;font-size:13px;
  letter-spacing:.2em;color:var(--gray-ink);margin:14px 0 16px;
}
.step__t{font-weight:800;font-size:23px;letter-spacing:-.02em;margin:0 0 12px;}
.step__d{font-size:15.5px;line-height:1.6;margin:0;color:#28405f;}

/* ─── aplicações ─────────────────────────────────────────── */
/* 6 células em 3×2: as regras usam nth-child para que a borda viva
   sempre no limite da grade, e não no primeiro/último item. */
.cases{display:grid;gap:0;border-top:1px solid var(--hair-lt);}
@media (min-width:900px){ .cases{grid-template-columns:repeat(3,1fr);} }
.case{padding:34px 28px 40px 0;border-bottom:1px solid var(--hair-lt);}
.case:last-child{border-bottom:0;}
@media (min-width:900px){
  .case{border-right:1px solid var(--hair-lt);padding:34px 30px 38px;}
  .case:nth-child(3n+1){padding-left:0;}
  .case:nth-child(3n){border-right:0;padding-right:0;}
  .case:nth-last-child(-n+3){border-bottom:0;padding-bottom:16px;}
}
.case__who{
  font-family:var(--util);font-weight:500;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 18px;
}
/* a pergunta do negócio é o título do cartão — o número saiu do lugar
   de destaque porque a marca não expõe resultado que não seja seu. */
.case__q{
  font-weight:800;font-size:clamp(19px,1.75vw,22px);line-height:1.22;
  letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance;
}
.case__d{font-size:15.5px;line-height:1.6;margin:0;color:rgba(255,255,255,.75);}
.case__link{
  display:inline-block;margin-top:20px;font-family:var(--util);font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
  text-decoration:none;padding-bottom:4px;border-bottom:2px solid rgba(21,193,224,.4);
  transition:border-color .18s var(--ease);
}
.case__link:hover{border-bottom-color:var(--cyan);}

/* ─── stack ──────────────────────────────────────────────── */
/* 9 itens em 3×3 — linhas cheias em qualquer largura, e o trio ecoa
   as três faces do cubo. */
.stackgrid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--navy);border-left:2px solid var(--navy);
}
.stackgrid li{
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;padding:16px 12px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  background:var(--white);transition:background .18s var(--ease),color .18s var(--ease);
}
@media (min-width:600px){
  .stackgrid li{font-size:13px;letter-spacing:.08em;padding:24px 20px;}
}
.stackgrid li:hover{background:var(--navy);color:#fff;}

/* ─── ferramenta (Layout Studio) ─────────────────────────── */
.tool{display:grid;gap:clamp(32px,4vw,56px);align-items:start;}
.tool__l{border-top:2px solid var(--navy);}
/* o losango sai da faixa e vai para o texto: na faixa ele ficaria preso a
   uma distância fixa do topo (ou ao centro), e no item de duas linhas cairia
   entre as linhas. No <span> ele sempre acompanha a primeira. */
.tool__l li{padding-left:0;}
.tool__l li::before{display:none;}
.tool__l li > span{position:relative;display:block;padding-left:20px;}
.tool__l li > span::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  background:var(--cyan);transform:rotate(45deg) scaleY(.62);
}
/* o .btn do site é inline-flex: sem gap, o espaço antes da seta é engolido */
.tool__cta{margin-top:28px;gap:9px;}

/* No desktop as duas colunas dividem as MESMAS duas linhas: lista e exemplo
   na de cima, botão e controles do carrossel na de baixo — quatro caixas
   com as quatro bordas coincidindo. Por isso stretch, e não start: sem ele
   a coluna de texto terminava 79 px acima do carrossel, com o botão solto
   no meio do vão. Sem subgrid: a régua comum são a altura fixa da linha de
   ação (--tool-act) e o mesmo respiro acima dela nas duas colunas. */
@media (min-width:900px){
  .tool{
    grid-template-columns:1fr 1fr;align-items:stretch;
    --tool-act:56px;      /* altura da linha de ação */
    --tool-gap:16px;      /* respiro entre a linha de conteúdo e a de ação */
  }
  .tool__copy{display:flex;flex-direction:column;}
  /* a lista cresce até a altura do exemplo, em faixas iguais */
  .tool__l{flex:1;display:flex;flex-direction:column;}
  .tool__l li{flex:1;display:flex;align-items:center;}
  /* faixa mais alta: o losango acompanha o meio da linha, não o topo */
  .tool__l li::before{top:50%;transform:translateY(-50%) rotate(45deg) scaleY(.62);}
  .tool__cta{margin-top:var(--tool-gap);height:var(--tool-act);}
}

/* Carrossel escuro/claro. Um exemplo por vez, na largura cheia da coluna:
   lado a lado eles ficavam pequenos demais para mostrar o que a ferramenta
   faz — que é a única função desta vitrine. */
/* 1fr auto + align-self:start na janela: se a coluna do texto for a mais
   alta (telas estreitas), a sobra cai entre o exemplo e os controles em vez
   de esticar a moldura para longe da imagem. */
.car{display:grid;grid-template-rows:1fr auto;gap:var(--tool-gap,16px);}
.car__win{align-self:start;overflow:hidden;border:2px solid var(--navy);}
.car__track{display:flex;transition:transform .45s var(--ease);}
.car__item{flex:0 0 100%;min-width:0;margin:0;}
.car__item img{width:100%;height:auto;}

.car__bar{display:flex;align-items:stretch;gap:10px;height:var(--tool-act,56px);}
.car__arrow{
  flex:none;width:44px;border:2px solid var(--navy);background:transparent;
  color:var(--navy);font-size:17px;line-height:1;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.car__arrow:hover{background:var(--navy);color:#fff;}

/* dois botões nomeados em vez de bolinhas: o leitor escolhe o tema
   direto, e forma redonda não existe neste sistema. */
.car__tabs{display:flex;flex:1;border:2px solid var(--navy);}
.car__tab{
  flex:1;padding:11px 12px;border:0;background:transparent;cursor:pointer;
  font-family:var(--util);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gray-ink);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.car__tab + .car__tab{border-left:2px solid var(--navy);}
.car__tab:hover{color:var(--navy);}
.car__tab.is-on{background:var(--navy);color:#fff;}

@media (prefers-reduced-motion:reduce){ .car__track{transition:none;} }

/* ─── whatsapp ───────────────────────────────────────────── */
/* A marca do WhatsApp entra como ela é: círculo verde oficial. É logo de
   terceiro — não se redesenha para caber no nosso sistema. Por isso é a
   única forma redonda da página, e a exceção fica evidente de propósito. */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:120;
  display:block;width:58px;height:58px;
  border-radius:50%;text-decoration:none;
  box-shadow:0 8px 26px rgba(7,26,49,.32);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.wa svg{width:100%;height:100%;display:block;border-radius:50%;}
.wa:hover{transform:scale(1.06);box-shadow:0 12px 32px rgba(7,26,49,.42);}
.wa:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;}
.wa-inline svg{width:19px;height:19px;fill:currentColor;flex:none;}
@media (max-width:620px){ .wa{right:16px;bottom:16px;width:54px;height:54px;} }
@media print{ .wa{display:none;} }

/* gap explícito: o .btn é inline-flex e engoliria o espaço antes do rótulo */
.wa-inline{margin-bottom:30px;gap:10px;}

/* ─── cta + formulário ───────────────────────────────────── */
.cta{background:var(--navy-deep);color:#fff;padding:var(--sec-y) 0;}
.cta__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;gap:clamp(40px,5vw,72px);align-items:start;
}
@media (min-width:960px){ .cta__in{grid-template-columns:1fr 1fr;} }
.cta__d{font-size:17px;line-height:1.6;color:rgba(255,255,255,.75);max-width:34em;margin:0 0 30px;}
.cta__contacts{display:flex;flex-direction:column;gap:10px;padding-top:26px;border-top:1px solid var(--hair-lt);}
.cta__contacts a{
  font-family:var(--util);font-size:17px;color:var(--cyan);text-decoration:none;width:fit-content;
}
.cta__contacts a:hover{text-decoration:underline;text-underline-offset:4px;}

.form{display:grid;gap:20px;}
.field{display:grid;gap:8px;}
.field label{
  font-family:var(--util);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.field input,.field textarea{
  font-family:var(--disp);font-size:16px;color:#fff;
  background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.22);
  padding:14px 16px;width:100%;border-radius:0;transition:border-color .18s var(--ease);
}
.field textarea{resize:vertical;min-height:112px;}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.42);}
.field input:focus,.field textarea:focus{border-color:var(--cyan);}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:#FF8A7A;}
.err{margin:0;min-height:0;font-size:13.5px;color:#FF8A7A;}
.err:empty{display:none;}
.form .btn{justify-self:start;}
.form__note{margin:0;font-family:var(--util);font-size:14px;color:var(--cyan);}

/* ─── rodapé ─────────────────────────────────────────────── */
.ft{background:var(--navy);color:#fff;border-top:2px solid var(--cyan);}
.ft__in{
  max-width:var(--max);margin:0 auto;padding:36px var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;
}
.brand--ft{color:#fff;}
.ft__tag{
  font-family:var(--util);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0;
}
.ft__link{
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);text-decoration:none;
  padding-bottom:3px;border-bottom:2px solid transparent;
}
.ft__link:hover{border-bottom-color:var(--cyan);}
.ft__c{margin:0 0 0 auto;font-size:13px;color:rgba(255,255,255,.55);}

/* ─── revelação ao rolar ─────────────────────────────────── */
.rv{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
.rv.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .rv{opacity:1;transform:none;}
}

/* ─── trilha de navegação (páginas internas) ─────────────── */
.crumb{
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-ink);
  margin:0 0 clamp(24px,3vw,40px);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.crumb a{color:var(--gray-ink);text-decoration:none;border-bottom:1px solid var(--hair);}
.crumb a:hover{color:var(--navy);border-bottom-color:var(--navy);}
.crumb [aria-current]{color:var(--navy);}

/* ─── citação de fonte externa ───────────────────────────── */
/* A fonte é sempre creditada: veículo, título e ano. Ver §14 do
   contexto mestre — número de terceiro é permitido, número inventado não. */
.quote{
  margin:clamp(40px,5vw,64px) 0 0;padding:clamp(24px,3vw,36px);
  background:var(--white);border:2px solid var(--navy);border-left-width:8px;
  max-width:46rem;
}
.quote blockquote{
  margin:0 0 16px;font-size:clamp(17px,1.7vw,20px);line-height:1.5;
  letter-spacing:-.01em;color:var(--navy);
}
.quote figcaption{
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-ink);
}
.quote cite{font-style:normal;}

/* ─── lista de links sobre fundo escuro ──────────────────── */
/* .svc__l usa réguas navy, que somem sobre o navy-deep da seção
   de contato. Esta variante usa a régua clara e o ciano puro —
   8.1:1 sobre --navy-deep, bem acima do mínimo AA. */
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-lt);}
.linklist li{border-bottom:1px solid var(--hair-lt);}
.linklist a{
  display:block;padding:14px 0 14px 22px;position:relative;
  font-family:var(--util);font-size:14px;letter-spacing:.01em;
  color:var(--cyan);text-decoration:none;
  transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.linklist a::before{
  content:"";position:absolute;left:0;top:20px;width:8px;height:8px;
  background:var(--cyan);transform:rotate(45deg) scaleY(.62);
}
.linklist a:hover{color:#fff;padding-left:28px;}
.linklist a:hover::before{background:#fff;}

/* ─── embed sob demanda (Power BI) ───────────────────────── */
/* O iframe só nasce no clique. Motivos: o embed é pesado e roda em
   domínio de terceiro — carregá-lo de saída penalizaria o tempo de
   carregamento e colocaria cookie de terceiro em quem não pediu. */
.embed{
  position:relative;width:100%;aspect-ratio:16/10;
  border:2px solid var(--navy);background:var(--navy-deep);overflow:hidden;
}
@media (max-width:640px){ .embed{aspect-ratio:4/5;} }

.embed iframe{width:100%;height:100%;border:0;display:block;}

.embed__facade{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;
  background:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),
    var(--navy-deep);
}
.embed__cube{width:64px;height:auto;opacity:.9;}
.embed__t{
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin:0;
}
.embed__note{
  font-family:var(--util);font-size:12px;letter-spacing:.04em;
  color:rgba(255,255,255,.55);margin:0;
}
.embed__foot{
  font-size:14.5px;color:var(--gray-ink);margin:18px 0 0;
}

/* rodapé da seção de tecnologia: a lista de ferramentas entra como
   consequência do critério, em corpo menor que os cartões */
.stack__foot{margin-top:clamp(28px,3vw,40px);max-width:52rem;}

/* ─── hero de página interna ─────────────────────────────── */
/* O .sec__hd sozinho tem max-width 44rem: numa página interna isso
   deixava metade da largura vazia à direita. O .pghero devolve o
   equilíbrio de duas colunas do hero da home, com um desenho no lugar
   do cubo — que fica reservado à home, como assinatura. */
.pghero{display:grid;gap:clamp(32px,5vw,64px);align-items:center;}
@media (min-width:960px){ .pghero{grid-template-columns:1.15fr .85fr;} }
.pghero__copy{max-width:44rem;}
.pghero .h1{margin-top:0;}

/* figura de apoio do hero interno */
.loop,.flow{margin:0;}
.loop svg,.flow svg{width:100%;height:auto;max-width:420px;margin:0 auto;}
.loop figcaption,.flow figcaption{
  font-family:var(--util);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray-ink);text-align:center;margin-top:16px;
}
@media (max-width:959px){
  .loop svg,.flow svg{max-width:320px;}
}

/* ─── faixa de imagem ────────────────────────────────────── */
/* Sangra de ponta a ponta: quebra a coluna de 1240px de propósito,
   para a foto respirar entre duas seções de texto. */
.band{
  position:relative;margin:0;
  border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);
  background:var(--navy-deep);
}
.band img{
  width:100%;height:clamp(220px,34vw,420px);
  object-fit:cover;display:block;
}
.band figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(40px,6vw,72px) var(--gut) clamp(16px,2vw,24px);
  background:linear-gradient(to top,rgba(7,26,49,.92),rgba(7,26,49,0));
  color:#fff;
}
.band__t{
  display:block;max-width:var(--max);margin:0 auto;
  font-family:var(--util);font-weight:500;font-size:clamp(13px,1.5vw,16px);
  letter-spacing:.02em;
}
.band__t b{color:var(--cyan);font-weight:500;}

/* ─── textura sob a seção escura ─────────────────────────── */
/* A imagem entra por baixo de um véu navy: dá matéria à maior
   superfície chapada do site sem disputar com o texto por cima.
   O gradiente mantém o contraste do corpo bem acima de 4.5:1. */
.sec--tex{
  background-image:
    linear-gradient(rgba(11,37,69,.90),rgba(11,37,69,.95)),
    url("/assets/textura-grade-1600.webp");
  background-size:cover;
  background-position:center;
}
@media (max-width:900px){
  .sec--tex{background-image:linear-gradient(rgba(11,37,69,.90),rgba(11,37,69,.95)),url("/assets/textura-grade-900.webp");}
}

/* ─── cartões de navegação entre páginas ─────────────────── */
/* Bloco "Continue lendo": mesma estrutura em toda página interna,
   para que elas se refiram umas às outras do mesmo jeito. */
.cards{
  list-style:none;margin:0;padding:0;display:grid;gap:0;
  border:2px solid var(--navy);background:var(--white);
}
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,1fr);} }
.cards .card + .card{border-top:2px solid var(--navy);}
@media (min-width:900px){
  .cards .card + .card{border-top:0;border-left:2px solid var(--navy);}
}
.card a{
  display:flex;flex-direction:column;gap:10px;height:100%;
  padding:clamp(24px,2.6vw,32px);text-decoration:none;color:var(--navy);
  transition:background .18s var(--ease);
}
.card a:hover{background:var(--paper);}
.card__k{
  font-family:var(--util);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-ink);
}
.card__t{font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.25;}
.card__d{font-size:15px;line-height:1.55;color:#28405f;}
.card a::after{
  content:"→";margin-top:auto;padding-top:12px;
  font-family:var(--util);color:var(--cyan-ink);
  transition:transform .18s var(--ease);
}
.card a:hover::after{transform:translateX(4px);}

/* armadilha anti-robô: fora da tela, fora do foco, fora do leitor de tela.
   display:none é detectado por alguns robôs; deslocar é mais discreto. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ─── mini-gráfico dentro do cartão de aplicação ─────────── */
/* Não é dado real: é a forma da pergunta. Compras mostra duas curvas
   de preço, Vendas mostra realizado contra meta, Operações mostra a
   etapa que consome o tempo. Os demais cartões seguem só com texto. */
.case__viz{
  width:100%;height:auto;margin-top:20px;
  border-top:1px solid var(--hair-lt);padding-top:18px;
}

/* ─── fundo do Método ────────────────────────────────────── */
/* A seção é clara e cheia de texto: a foto entraria competindo.
   Em vez disso, a mesma textura de grade em opacidade muito baixa,
   sobre o branco — dá matéria sem tirar legibilidade do corpo. */
.sec--tramas{
  background-image:
    linear-gradient(rgba(255,255,255,.955),rgba(255,255,255,.975)),
    url("/assets/textura-grade-1600.webp");
  background-size:cover;
  background-position:center;
}
@media (max-width:900px){
  .sec--tramas{background-image:linear-gradient(rgba(255,255,255,.955),rgba(255,255,255,.975)),url("/assets/textura-grade-900.webp");}
}

/* ─── grade de ferramentas ───────────────────────────────── */
/* Marcas em texto, monocromáticas de propósito. Logos oficiais são
   multicoloridos (Power BI amarelo, Google e Meta coloridos) e
   quebrariam a disciplina de paleta que sustenta o site inteiro.
   Também evita distorcer marca de terceiro. */
.toolbar{margin-top:clamp(36px,4vw,56px);}
.toolbar__hd{
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-ink);margin:0 0 20px;
}
.tools{
  list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,1fr);
  border-top:2px solid var(--navy);border-left:2px solid var(--navy);
}
@media (min-width:640px){ .tools{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1000px){ .tools{grid-template-columns:repeat(4,1fr);} }
.tool__i{
  display:flex;flex-direction:column;gap:4px;
  padding:18px 20px;background:var(--white);
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transition:background .18s var(--ease);
}
.tool__i:hover{background:var(--paper);}
.tool__n{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--navy);}
.tool__c{
  font-family:var(--util);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan-ink);
}
.toolbar__ft{font-size:14.5px;color:var(--gray-ink);margin:18px 0 0;max-width:46rem;}

/* ─── lista de artigos ───────────────────────────────────── */
.posts{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy);}
.post{border-bottom:2px solid var(--navy);}
.post a{
  display:block;padding:clamp(24px,3vw,36px) 0;text-decoration:none;color:var(--navy);
  transition:padding-left .18s var(--ease);
}
.post a:hover{padding-left:12px;}
.post__k{
  display:block;font-family:var(--util);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px;
}
.post__t{
  display:block;font-weight:800;font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.02em;line-height:1.25;margin-bottom:10px;max-width:32em;
}
.post__d{display:block;font-size:16px;line-height:1.6;color:#28405f;max-width:44em;}
.posts__ft{font-size:14.5px;color:var(--gray-ink);margin-top:24px;}

/* ─── corpo de artigo ────────────────────────────────────── */
/* Coluna estreita de proposito: 34em e a medida em que o olho nao
   perde a linha ao voltar. O resto da pagina e largo; o texto nao. */
.art__hd{max-width:36em;margin-bottom:clamp(36px,4vw,52px);}
.art__meta{
  font-family:var(--util);font-size:13px;letter-spacing:.02em;
  color:var(--gray-ink);margin:24px 0 0;
}
.art{max-width:34em;}
.art p{font-size:17.5px;line-height:1.68;margin:0 0 22px;color:#22364f;}
.art h2{
  font-weight:800;font-size:clamp(22px,2.4vw,27px);letter-spacing:-.02em;
  line-height:1.2;margin:clamp(40px,4vw,56px) 0 18px;color:var(--navy);
}
.art b{font-weight:600;color:var(--navy);}
.art .quote{margin:32px 0;max-width:none;}
.art__l{margin:0 0 22px;padding-left:22px;}
.art__l li{font-size:17.5px;line-height:1.6;margin-bottom:14px;color:#22364f;}
.art__cta{border-left:4px solid var(--cyan);padding:4px 0 4px 20px;margin:32px 0 0;}
.art__hr{border:0;border-top:2px solid var(--navy);margin:clamp(40px,4vw,56px) 0 24px;}
.art__fonte{font-size:14.5px !important;line-height:1.6;color:var(--gray-ink) !important;}

/* ─── caixas de artigo no hub do Insights ────────────────── */
/* Grade que se ajusta sozinha: com um post a caixa fica no tamanho
   dela, alinhada a esquerda; com tres, forma a linha inteira.
   A capa e sempre 16:9 — padrao unico para todo post. */
.posts{
  list-style:none;margin:0;padding:0;border:0;
  display:grid;gap:clamp(24px,2.6vw,32px);
  grid-template-columns:1fr;justify-content:start;
}
@media (min-width:700px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1060px){ .posts{grid-template-columns:repeat(3,minmax(0,1fr));} }
.post{border:0;max-width:460px;}
.post a{
  display:flex;flex-direction:column;height:100%;padding:0;
  border:2px solid var(--navy);background:var(--white);
  text-decoration:none;color:var(--navy);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.post a:hover{transform:translateY(-4px);box-shadow:10px 10px 0 var(--navy);}
.post__capa{
  display:block;background:var(--navy-deep);
  border-bottom:2px solid var(--navy);
}
.post__capa img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
.post__corpo{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,28px);height:100%;}
.post__k{
  font-family:var(--util);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-ink);
}
.post__t{font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1.25;}
.post__d{font-size:15.5px;line-height:1.6;color:#28405f;}
.post__l{
  margin-top:auto;padding-top:14px;
  font-family:var(--util);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan-ink);
}
.post__l::after{content:" →";}

/* capa do artigo: sai da coluna de leitura de proposito, para respirar
   antes do texto comecar. Alt descritivo — a capa carrega informacao. */
.art__capa{margin:0 0 clamp(36px,4vw,52px);max-width:1000px;}
.art__capa img{
  width:100%;height:auto;display:block;
  border:2px solid var(--navy);background:var(--navy-deep);
}