/* =========================================================
   Ágora Consultoria · Design System
   Paleta alinhada à referência taxconsulting.com.br
   navy #0F1F48 · azul royal #1F3C90 · azul claro #2B7EC5 · verde #28CD78
   ========================================================= */

:root{
  /* ---- cor ---- */
  --ink:        #111111;
  --navy-deep:  #0C1A38;
  --navy:       #0F1F48;
  --navy-soft:  #1D4698;
  --blue:       #1F3C90;
  --blue-lt:    #2B7EC5;

  --accent:     #2B7EC5;   /* destaque em fundo claro e escuro */
  --accent-lt:  #7FBCEA;   /* destaque sobre fundo escuro */
  --accent-dk:  #1F3C90;   /* destaque sobre fundo claro (texto) */

  --green:      #28CD78;   /* CTA principal e WhatsApp */
  --green-lt:   #3FE08D;
  --green-dk:   #00BB2D;

  --paper:      #FFFFFF;
  --mist:       #F7F7F7;
  --mist-2:     #EEF2F7;
  --pale:       #D1E1E3;
  --line:       #E3E7EE;
  --line-dk:    rgba(255,255,255,.14);
  --muted:      #69727D;
  --muted-lt:   #9AA3AF;

  /* ---- tipografia ---- */
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ---- medidas ---- */
  --wrap: 1200px;
  --pad: 24px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* ---- sombras ---- */
  --sh-1: 0 1px 2px rgba(12,26,56,.05), 0 4px 12px rgba(12,26,56,.05);
  --sh-2: 0 2px 6px rgba(12,26,56,.06), 0 12px 32px rgba(12,26,56,.09);
  --sh-3: 0 24px 60px rgba(12,26,56,.20);
  --sh-cta: 0 10px 28px rgba(40,205,120,.34);

  --ease: cubic-bezier(.2,.7,.3,1);
  /* Hover dos cards. A curva anterior (.33,.66,…) andava 44% no primeiro 100ms:
     parecia um salto seco seguido de nada. E .5s era longo demais: passando o
     mouse rápido por vários cards, todos seguiam animando depois que o cursor
     já tinha saído, virando uma onda atrás do ponteiro. */
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-hover: .28s;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* scroll-padding acompanha a altura do header fixo: com ele mais baixo, 96px
   deixava um vão grande acima do título ao pular por uma âncora */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }

/* Trava da rolagem horizontal: precisa ficar no <html>, nunca no <body>.
   No body, o overflow-x:hidden faz o outro eixo virar `auto` e transforma o
   body numa caixa de rolagem própria; aí o position:sticky do header passa a
   se ancorar nela em vez de na janela e o header para de grudar no celular,
   levando junto o position:fixed do botão de WhatsApp no iOS. No html o valor
   é propagado para a janela e nenhuma caixa nova é criada.
   `clip` é a forma correta (corta sem criar caixa de rolagem); `hidden` fica
   como reserva para navegador anterior ao Safari 16. */
html{ overflow-x:hidden; }
@supports (overflow:clip){
  html{ overflow-x:clip; }
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.022em; font-weight:800; color:var(--navy); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:fixed; left:12px; top:-100px; z-index:200;
  background:var(--blue); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.container{ width:min(100% - (var(--pad) * 2), var(--wrap)); margin-inline:auto; }

/* ---------- tipografia utilitária ---------- */
.h2{
  font-size:clamp(1.85rem, 1.15rem + 2.1vw, 2.9rem);
  letter-spacing:-.03em;
}
.h2--light{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 .9rem;
  font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-dk);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.eyebrow--light{ color:var(--accent-lt); }
.eyebrow--light::before{ background:var(--accent-lt); }

.grad{
  display:block;
  background:linear-gradient(92deg,#8FC9F0 0%,#5FA9E0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:13px 22px; border:1px solid transparent; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; stroke-width:2.2; transition:transform .22s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--lg{ padding:16px 28px; font-size:1rem; }
.btn--block{ width:100%; }

/* botao principal: verde */
.btn--cta{ background:var(--green); color:var(--navy-deep); box-shadow:var(--sh-cta); }
.btn--cta:hover{ background:var(--green-lt); transform:translateY(-2px); box-shadow:0 14px 34px rgba(40,205,120,.44); }

.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55); }

/* =========================================================
   PRELOADER
   Só aparece se o JS tiver adicionado .is-loading no <html>.
   Sem JS a página abre direto, sem tela intermediária.
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  background:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .34s var(--ease), visibility 0s linear .34s;
}
html.is-loading .preloader{ opacity:1; visibility:visible; pointer-events:auto; transition:none; }
/* trava a rolagem enquanto o preloader está em cena. No <html> e não no <body>
   pelo mesmo motivo da regra lá em cima: no body isso cria uma caixa de
   rolagem e o header sticky passa a se ancorar nela. */
html.is-loading{ overflow:hidden; }

.preloader__inner{ display:grid; justify-items:center; gap:28px; padding:24px; }
/* a logo entra uma vez e fica parada: nada de pulsar */
.preloader__logo{
  width:auto; height:clamp(42px,6vw,58px); display:block;
  animation:preIn .55s var(--ease-soft) both;
}
@keyframes preIn{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:none; }
}

/* Linha indeterminada: um traço curto que atravessa. Não finge medir
   progresso, só diz que a página ainda está trabalhando. */
.preloader__bar{
  width:128px; height:2px; border-radius:999px;
  background:var(--line); overflow:hidden;
  animation:preIn .55s var(--ease-soft) .12s both;
}
.preloader__bar i{
  display:block; width:42%; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  animation:preSlide 1.15s var(--ease-soft) infinite;
  transition:width .2s var(--ease);
}
@keyframes preSlide{
  from{ transform:translateX(-110%); }
  to  { transform:translateX(250%);  }
}
/* na saída o traço para de correr e fecha a linha inteira */
html.is-ready .preloader__bar i{ animation:none; width:100%; }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; inset:0 auto auto 0; height:3px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--accent),var(--green));
  z-index:120; transition:width .1s linear;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  background:var(--navy-deep); color:#B7C2D6;
  font-size:.78rem; border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:34px; }
.topbar__tag{ margin:0; display:inline-flex; align-items:center; gap:.5rem; color:#95A3BC; }
.topbar__tag svg{ width:1em; height:1em; color:var(--accent-lt); }
.topbar__links{ display:flex; align-items:center; gap:22px; }
.topbar__links a{ display:inline-flex; align-items:center; gap:.45rem; transition:color .2s var(--ease); }
.topbar__links a:hover{ color:var(--accent-lt); }
.topbar__links svg{ width:1em; height:1em; color:var(--accent-lt); }
.topbar__social{ width:24px; height:24px; justify-content:center; border-radius:50%; background:var(--green); }
.topbar__social svg{ width:13px; height:13px; color:var(--navy-deep) !important; }
@media (max-width:960px){ .topbar{ display:none; } }

/* =========================================================
   HEADER
   ========================================================= */
/* O vidro fica num ::before, não no próprio header. backdrop-filter cria
   containing block para descendentes position:fixed: com ele no header, o
   menu lateral (.nav) se ancorava no header em vez da viewport e abria como
   uma faixa presa no topo. */
.header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.header.is-stuck{ box-shadow:0 6px 24px rgba(12,26,56,.09); border-bottom-color:var(--line); }
/* Grid de três faixas para os links caírem no centro exato do header: as
   colunas laterais são iguais (1fr), então a marca à esquerda e o botão à
   direita não puxam o miolo para nenhum lado.
   O `display:contents` da nav é o truque que permite isso sem tirar o CTA de
   dentro do <nav>: a nav some do layout e a lista e o botão viram itens do
   grid do header. No celular ela volta a ser uma caixa de verdade (gaveta). */
.header__inner{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px; min-height:64px;
}

.brand{ display:inline-flex; align-items:center; flex:none; justify-self:start; }
.brand__logo{ width:auto; height:40px; display:block; }

.nav{ display:contents; }
.nav__list{ justify-self:center; }
.nav__cta{ justify-self:end; }
.burger{ justify-self:end; }
.nav__list{ display:flex; align-items:center; gap:2px; }
.nav__list a{
  position:relative; display:block; padding:7px 11px; border-radius:999px;
  font-size:.875rem; font-weight:600; color:#3A4657; white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:50%; bottom:3px; width:0; height:2px;
  background:var(--accent); border-radius:2px; transform:translateX(-50%);
  transition:width .25s var(--ease);
}
.nav__list a:hover{ color:var(--blue); background:var(--mist); }
.nav__list a.is-active{ color:var(--blue); }
.nav__list a.is-active::after{ width:18px; }
/* Azul, não verde. O verde fica reservado ao botão flutuante do WhatsApp, que
   está sempre na tela: dois botões verdes lado a lado disputavam a atenção e
   nenhum dos dois lia como "o" próximo passo. Assim vira hierarquia: verde
   é a conversa imediata, azul leva ao formulário. */
.nav__cta{
  padding:8px 14px; font-size:.8rem;
  background:transparent; color:var(--blue);
  border-color:#C6D6EA; box-shadow:none;
}
.nav__cta:hover{
  background:var(--mist-2); color:var(--blue);
  border-color:#A6C1E0; transform:none; box-shadow:none;
}
/* sem o brilho que atravessa: em botão vazado ele só faria piscar a borda */
.nav__cta::before{ display:none; }

/* faixa intermediária: encolhe a nav antes de recorrer ao menu lateral */
@media (max-width:1300px){
  .header__inner{ gap:14px; }
  .nav__list a{ padding:7px 8px; font-size:.84rem; }
  .brand__logo{ height:36px; }
}

/* As três barras são posicionadas em absoluto a partir do centro: é o único
   jeito de o traço girar em torno do próprio meio na hora de virar X. */
.burger{
  /* z-index acima do .nav (99): os dois vivem no mesmo contexto de
     empilhamento do header, e sem isso o painel aberto cobre o botão:
     o X de fechar some. O padding-top do .nav é o espaço reservado pra ele. */
  display:none; position:relative; z-index:101; flex:none;
  width:44px; height:44px; padding:0;
  border:0; border-radius:14px;
  background:var(--mist-2);
  transition:background .25s var(--ease), transform .18s var(--ease);
}
.burger:hover{ background:#DCE7F5; }
.burger:active{ transform:scale(.93); }
.burger span{
  position:absolute; left:50%; top:50%;
  width:19px; height:2px; margin:-1px 0 0 -9.5px;
  background:var(--navy); border-radius:2px;
  transition:transform .32s var(--ease-soft), opacity .18s var(--ease), background .25s var(--ease);
}
.burger span:nth-child(1){ transform:translateY(-6px); }
.burger span:nth-child(3){ transform:translateY(6px); }

.burger[aria-expanded="true"]{ background:var(--navy); }
.burger[aria-expanded="true"] span{ background:#fff; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg); }

.nav-backdrop{ position:fixed; inset:0; background:rgba(12,26,56,.5); z-index:98; opacity:0; transition:opacity .25s var(--ease); }
.nav-backdrop.is-on{ opacity:1; }

@media (max-width:1180px){
  .burger{ display:block; }
  .brand__logo{ height:38px; }
  /* sem os links no header, o grid de três faixas não faz sentido: volta ao
     flex simples com a marca de um lado e o hambúrguer do outro */
  .header__inner{ display:flex; justify-content:space-between; }
  .nav{
    display:flex;
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw); z-index:99;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px;
    background:#fff; padding:96px 22px 32px;
    box-shadow:-20px 0 60px rgba(12,26,56,.2);
    transform:translateX(105%); transition:transform .32s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__list a{ padding:14px 16px; border-radius:12px; font-size:1.02rem; white-space:normal; }
  .nav__list a::after{ display:none; }
  /* dentro da gaveta ele volta a ser sólido: ali é o único CTA da tela e não
     divide espaço com o botão flutuante do WhatsApp, que fica atrás do painel */
  .nav__cta{
    margin-top:14px; padding:15px 20px; font-size:.98rem;
    background:linear-gradient(150deg,#2A72BC,#182F73); color:#fff; border-color:transparent;
  }
  .nav__cta:hover{ background:linear-gradient(150deg,#3384D2,#203C8C); border-color:transparent; }
}
@media (max-width:420px){ .brand__logo{ height:32px; } }

/* =========================================================
   HERO
   ========================================================= */
/* Sem a grade de linhas que passava por cima de tudo. A foto volta como
   textura: dessaturada, atrás de um véu pesado do lado do texto e mais aberto
   na direita. Assim o azul ganha profundidade sem virar cena concorrente. */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(72px,7.5vw,124px) 0 clamp(84px,8vw,132px);
  background:
    radial-gradient(1200px 620px at 12% -15%, #1D4698 0%, transparent 60%),
    linear-gradient(165deg, #14275A 0%, #0F1F48 48%, #0C1A38 100%);
  color:#fff;
}
.hero h1,.hero h2,.hero h3{ color:#fff; }

/* ---- foto de fundo ---- */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* A foto é retrato (900x1350) numa faixa larga e baixa, então o object-position
   escolhe QUAL fatia aparece: 70% joga o enquadramento para as fachadas de
   vidro, longe do céu claro lá em cima, que sob o véu viraria uma nuvem de
   luz atrás do título. Só um desfoque leve, porque aqui a geometria do vidro é
   textura, não informação. O scale cobre a borda mole do blur nos cantos. */
.hero__bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 70%;
  filter:grayscale(.35) blur(2px); transform:scale(1.05);
}
/* véu: quase opaco onde fica o texto, mais aberto do lado da foto; a segunda
   camada escurece o rodapé para a linha do diagnóstico não encostar na cena */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(9,20,44,.96) 0%, rgba(12,26,60,.91) 40%, rgba(20,48,110,.76) 100%),
    linear-gradient(to top, rgba(9,20,44,.5) 0%, transparent 42%);
}

.hero__glow{
  position:absolute; right:-12%; top:-24%; z-index:1;
  width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(43,126,197,.26) 0%, transparent 62%);
  filter:blur(30px); pointer-events:none;
}
.hero__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,4.5vw,72px); align-items:center;
}
.hero__title{
  font-size:clamp(2.25rem, 1.15rem + 3.7vw, 3.9rem);
  letter-spacing:-.035em; margin-bottom:1.35rem; text-wrap:balance;
}
.hero__lead{
  font-size:clamp(1.06rem,1rem + .35vw,1.24rem);
  line-height:1.6; color:#C2CFE4; max-width:40ch; margin-bottom:2.4rem;
  text-wrap:pretty;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__note{
  margin:1.6rem 0 0; font-size:.88rem; color:#8FA0BC; letter-spacing:.01em;
}

/* hero media */
.hero__media{ position:relative; }
/* Brilho por trás do cartão. Sem ele a foto é um retângulo claro colado no
   azul; com ele o cartão parece estar à frente do fundo, não dentro dele. */
.hero__media::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:8% -9% -13%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(43,126,197,.5) 0%, transparent 76%);
  filter:blur(38px);
}
.hero__shot{
  position:relative; z-index:1;
  margin:0; border-radius:var(--r-xl); overflow:hidden;
  /* sombra longa e baixa em vez da genérica: é o que sustenta o cartão */
  box-shadow:0 44px 90px -34px rgba(3,9,24,.9), 0 10px 26px -14px rgba(3,9,24,.6);
  border:1px solid rgba(255,255,255,.16);
}
/* as três fotos são de banco de imagem, claras e meio lavadas: um empurrão
   pequeno em cor e contraste tira o aspecto desbotado */
.hero__shot img{
  width:100%; aspect-ratio:4/3.1; object-fit:cover; display:block;
  filter:saturate(1.08) contrast(1.05);
}
/* Degradê escuro por cima da foto. Faz três coisas: costura o retângulo claro
   ao azul do hero, dá profundidade a um material que é claro e chapado, e abre
   contraste para a plaquinha lá embaixo. Duas camadas, uma sobe do pé, outra
   fecha o canto de cima à esquerda, que é de onde vem a luz do aro. */
.hero__shot::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,15,36,.74) 0%, rgba(6,15,36,.3) 30%, transparent 60%),
    linear-gradient(158deg, rgba(7,17,40,.34) 0%, transparent 46%);
}
/* Plaquinha de vidro no pé da foto. Fica sobre o véu do ::before, que é
   justamente o que garante contraste para ela em qualquer uma das três fotos. */
.hero__tag{
  position:absolute; left:18px; bottom:18px; z-index:4;
  display:flex; align-items:baseline; gap:9px;
  padding:9px 17px; border-radius:999px;
  background:rgba(9,20,44,.5);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 8px 22px -12px rgba(3,9,24,.8);
  color:#fff; white-space:nowrap;
}
.hero__tag strong{ font-size:1.06rem; font-weight:800; letter-spacing:-.025em; }
.hero__tag span{ font-size:.78rem; color:#C7D3E8; }
@media (max-width:420px){
  .hero__tag{ left:13px; bottom:13px; padding:8px 14px; gap:7px; }
  .hero__tag strong{ font-size:.96rem; }
  .hero__tag span{ font-size:.72rem; }
}

/* Aro de vidro: uma borda de 1px em degradê, clara no canto de cima, quase
   sumindo no meio, puxando o azul claro embaixo. É o que dá o acabamento.
   Feito por máscara, então só entra onde a máscara existe; sem ela, a borda
   simples ali de cima continua valendo. */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .hero__shot{ border:0; }
  .hero__shot::after{
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    border-radius:inherit; padding:1px;
    background:linear-gradient(150deg,
      rgba(255,255,255,.72) 0%, rgba(255,255,255,.07) 42%, rgba(127,188,234,.45) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
  }
}
/* as fotos se alternam em cross-fade: a primeira fica no fluxo (é ela que dá
   altura ao cartão) e as outras flutuam por cima, na mesma caixa */
.hero__shot img + img{ position:absolute; inset:0; height:100%; }
.hero__shot img{ animation:shotCycle 16s ease-in-out infinite; will-change:opacity; }
/* atrasos negativos: todas já entram com a animação rodando, então nenhum
   quadro começa com duas fotos acesas nem com o cartão vazio. O ciclo e as
   porcentagens acompanham o número de fotos: são duas, 8s cada */
.hero__shot img:nth-child(1){ animation-delay:0s; }
.hero__shot img:nth-child(2){ animation-delay:-8s; }
@keyframes shotCycle{
  0%,  45% { opacity:1; }
  50%, 95% { opacity:0; }
  100%     { opacity:1; }
}

@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:560px; }
  /* Em coluna única o texto ocupa a largura toda, então o véu na diagonal
     deixava a ponta clara cair bem atrás do título, dava para ler os rótulos
     dos gráficos da foto. Aqui ele fecha por igual, de cima a baixo. */
  .hero__veil{
    background:linear-gradient(rgba(9,20,44,.95) 0%, rgba(12,26,60,.92) 55%, rgba(13,30,70,.95) 100%);
  }
  .hero__bg img{ filter:grayscale(.5) blur(3px); }
}
@media (max-width:700px){
  /* no celular a mensagem vem antes da imagem */
  .hero__media{ order:0; margin-top:30px; }
}
@media (max-width:560px){
  .hero__actions .btn{ width:100%; }
}

/* =========================================================
   STRIP + MARQUEE
   ========================================================= */
.strip{ padding:30px 0 34px; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.07); }
/* o `.strip__label` é filho único do container, então o reset `p:last-child`
   (especificidade maior que uma classe sozinha) zerava a margem daqui */
.strip .strip__label{
  margin:0 0 30px; text-align:center;
  font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#7A88A3;
}

.marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:56px; width:max-content;
  animation:scroll var(--dur,42s) linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
@keyframes scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
/* mesma aceleração que o JS aplica no celular, para o fallback sem JS bater */
@media (max-width:700px){ .marquee__track{ animation-duration:calc(var(--dur,42s) / 1.7); } }

/* com JS ativo o posicionamento passa a ser do script (permite arrastar);
   a animação acima fica só como fallback sem JS */
.marquee.is-interactive{
  cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.marquee.is-interactive:focus-visible{
  outline:2px solid var(--accent-lt); outline-offset:4px;
}
.marquee.is-interactive.is-dragging{ cursor:grabbing; }
.marquee.is-interactive .marquee__track{
  animation:none; will-change:transform;
}
.marquee.is-interactive img{ -webkit-user-drag:none; user-drag:none; }

.logoword{
  display:inline-flex; align-items:center;
  font-size:1.18rem; font-weight:800; letter-spacing:.01em; white-space:nowrap;
  color:#8B99B4; opacity:.9; transition:color .25s var(--ease), opacity .25s var(--ease);
}
.logoword:hover{ color:var(--accent-lt); opacity:1; }

/* logo em imagem, fundo escuro: sempre monocromático branco (logos escuros
   sumiriam no navy se voltassem à cor original); o hover só aumenta o contraste */
/* wordmarks deitados encostam no max-width antes da altura: o limite de largura
   é o que iguala o peso visual deles com os nomes em texto ao lado */
.logoword__img{
  height:52px; width:auto; max-width:150px; object-fit:contain; display:block;
  filter:grayscale(1) brightness(0) invert(1); opacity:.62;
  transition:opacity .25s var(--ease), filter .25s var(--ease);
}
@media (max-width:760px){
  .logoword__img{ height:40px; max-width:120px; }
}
.logoword:hover .logoword__img{ opacity:1; }
/* o nome em texto só aparece quando não há arquivo de logo */
.logoword__txt{ display:none; }
.logoword.is-textonly .logoword__txt{ display:inline; }

/* cards de cliente */
.marquee--cards{ padding:10px 0; }
.marquee--cards + .marquee--cards{ margin-top:18px; }
.marquee--cards .marquee__track{ gap:20px; }
.clogo{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:14px;
  min-width:278px; padding:18px 22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:transform var(--t-hover) var(--ease-soft), box-shadow var(--t-hover) var(--ease-soft), border-color var(--t-hover) var(--ease-soft);
}
.clogo:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#C6D4E6; }
/* a caixa acompanha o formato da logo: quadrada p/ o badge,
   mais larga quando a marca é deitada (a maioria dos wordmarks) */
.clogo__mark{
  grid-row:1 / span 2; display:grid; place-items:center;
  width:auto; min-width:48px; height:52px;
}
.clogo__img{
  height:52px; width:auto; max-width:118px; object-fit:contain; display:block;
  /* logos com fundo sólido acompanham o arredondamento do badge de iniciais;
     nas de fundo transparente o raio não aparece */
  border-radius:13px;
}
/* símbolo isolado (sem o nome da marca junto): ocupa mais ou menos o mesmo
   espaço do badge de iniciais, senão um símbolo deitado domina a linha */
.clogo__img--icone{ max-width:72px; }
/* Marca que só existe em versão branca (arte branca sobre fundo transparente).
   A plaquinha escura que resolvia isso virava um segundo cartão dentro do card,
   então em vez dela a própria arte é invertida: o branco vira escuro e a logo
   fica no mesmo tom das outras. O hue-rotate devolve a cor dos detalhes, sem
   ele o invert joga o azul da assinatura da Akiyama para laranja. */
.clogo__img--negativo{
  filter:invert(1) hue-rotate(180deg) contrast(.86);
}
.clogo__badge{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:13px;
  background:linear-gradient(150deg,#2B7EC5,#1F3C90); color:#fff;
  font-size:.86rem; font-weight:800; letter-spacing:.04em;
}
/* com imagem, o badge de iniciais some; sem arquivo, ele volta */
.clogo__mark .clogo__badge{ display:none; }
.clogo.is-textonly .clogo__badge{ display:grid; }
.clogo__name{ font-weight:800; font-size:1rem; letter-spacing:-.015em; color:var(--navy); white-space:nowrap; }
.clogo__seg{ font-size:.76rem; color:var(--muted); font-weight:600; }

/* =========================================================
   SEÇÕES
   ========================================================= */
.section{ padding:clamp(64px,7vw,110px) 0; }
.section--mist{ background:var(--mist); }

.section__head{ max-width:720px; margin:0 auto clamp(36px,4vw,58px); text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }
.section__head .h2{ margin-bottom:1rem; text-wrap:balance; }
.section__lead{ color:var(--muted); font-size:1.04rem; }
.section__head--left .section__lead{ max-width:60ch; }

/* ---------- cards de solução ---------- */
/* Flex em vez de grid porque são 7 cards: numa grade de 4 colunas a última
   linha encostava à esquerda com um buraco à direita, como se um card tivesse
   sumido. Com flex-wrap + center a sobra fica dividida entre os dois lados.
   O max-width é quem define quantos cabem por linha: sem ele os três da
   última linha esticariam para preencher a largura toda. */
.cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.cards > *{ flex:1 1 260px; max-width:calc((100% - 60px) / 4); }
@media (max-width:1100px){ .cards > *{ max-width:calc((100% - 40px) / 3); } }
@media (max-width:820px) { .cards > *{ max-width:calc((100% - 20px) / 2); } }
@media (max-width:560px) { .cards > *{ max-width:100%; } }
.card{
  position:relative; overflow:hidden;
  padding:30px 26px 28px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
  transition:transform var(--t-hover) var(--ease-soft),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--accent),var(--green));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-soft);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:#CFDBEA; }
.card:hover::after{ transform:scaleX(1); }
.card__n{
  position:absolute; top:22px; right:24px;
  font-size:.78rem; font-weight:800; letter-spacing:.08em; color:#BFCBDC;
}
.card__icon{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px;
  border-radius:15px; background:linear-gradient(150deg,#EAF2FA,#DDE9F6); color:var(--blue);
  transition:background var(--t-hover) var(--ease-soft),
             color var(--t-hover) var(--ease-soft),
             transform var(--t-hover) var(--ease-soft);
}
.card__icon svg{ width:25px; height:25px; }
.card:hover .card__icon{ background:linear-gradient(150deg,#2B7EC5,#1F3C90); color:#fff; transform:rotate(-3deg); }
.card h3{ font-size:1.14rem; margin-bottom:.55rem; letter-spacing:-.02em; }
.card p{ font-size:.93rem; color:var(--muted); line-height:1.6; }

.cards__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin-top:34px; padding:26px 30px; border-radius:var(--r-lg);
  background:var(--mist); border:1px dashed #C6D4E6;
}
.cards__foot p{ margin:0; font-weight:600; color:var(--navy); }

/* ---------- quem somos ---------- */
.about{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:center; }
/* O recuo aqui é o que "empurra" a foto menor para fora da maior. Estava curto
   demais para a largura dela: a pequena cobria metade da grande e cortava as
   pessoas no meio da cena. Mais recuo embaixo e uma foto menor deixam a
   sobreposição num canto só. */
.about__media{ position:relative; padding-bottom:92px; padding-right:52px; }
.about__img{ width:100%; border-radius:var(--r-xl); object-fit:cover; aspect-ratio:3/2; box-shadow:var(--sh-2); }
/* O retrato da fundadora ocupa o canto que antes era de uma foto genérica de
   banco de imagens. Formato retrato porque é o da foto, e porque dá presença
   à pessoa que de fato conduz o negócio. */
.about__owner{
  position:absolute; right:0; bottom:0; width:36%; margin:0;
  aspect-ratio:3/4; overflow:hidden;
  border:6px solid var(--mist); border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
/* retrato vertical numa moldura 3/4: o cover corta só um pouco de teto e de
   piso, e o rosto já vem centrado, não precisa deslocar o enquadramento */
.about__owner img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.about__owner figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px;
  background:linear-gradient(180deg, rgba(12,26,56,0) 0%, rgba(12,26,56,.88) 62%);
  color:#fff;
}
.about__owner strong{ display:block; font-size:.92rem; font-weight:800; letter-spacing:-.01em; }
.about__owner figcaption span{ display:block; font-size:.74rem; color:#C2D0E8; }
.about__badge{
  position:absolute; left:-12px; top:20px; max-width:186px;
  padding:13px 16px; border-radius:var(--r); background:var(--navy); color:#fff;
  box-shadow:var(--sh-3);
}
.about__badge strong{ display:block; font-size:.95rem; color:var(--accent-lt); margin-bottom:.25rem; }
.about__badge small{ font-size:.75rem; line-height:1.5; color:#B7C2D6; }

/* este h2 é o único que não vive dentro de um .section__head, então não herdava
   o respiro de 1rem que todos os outros títulos da página têm */
.about__copy .h2{ margin-bottom:1rem; }
.about__copy p{ color:var(--muted); }

/* Missão · Visão · Valores: três cards, mesma linguagem dos cards de solução.
   Antes era um painel único dividido por filetes, que repetia a estrutura do
   bloco de números logo abaixo e deixava a seção com cara de tabela. */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:clamp(44px,4.5vw,68px);
}
.pillar{
  padding:clamp(28px,3vw,36px) clamp(24px,2.5vw,30px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--t-hover) var(--ease-soft),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}
.pillar:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:#CFDBEA; }
.pillar__icon{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:20px;
  border-radius:13px; background:linear-gradient(150deg,#EAF2FA,#DDE9F6); color:var(--blue);
  transition:background var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft);
}
.pillar:hover .pillar__icon{ background:linear-gradient(150deg,#2B7EC5,#1F3C90); color:#fff; }
.pillar__icon svg{ width:22px; height:22px; }
.pillar h3{ font-size:1.12rem; margin-bottom:.55rem; letter-spacing:-.02em; }
.pillar p{ margin:0; font-size:.94rem; color:var(--muted); line-height:1.65; }

@media (max-width:860px){
  .pillars{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  /* Empilhado ninguém sobrepõe ninguém: a foto ocupa a linha inteira e, logo
     abaixo, o retrato e o selo dividem uma segunda linha. Emparelhados eles
     leem como um bloco só, soltos, um embaixo do outro, pareciam sobras. */
  .about__media{
    padding-right:0; padding-bottom:0; max-width:620px;
    display:flex; flex-wrap:wrap; align-items:stretch; gap:14px;
  }
  .about__img{ flex:1 0 100%; }
  /* `relative` e não `static`: a foto de dentro é absoluta, e sem um pai
     posicionado ela se ancora no .about__media e cobre a seção inteira.
     A legenda sai de cima da imagem: com o nome completo ela virava três linhas
     num card de ~190px e o degradê cobria o rosto inteiro. Aqui o retrato fica
     quadrado e o nome desce para uma faixa sólida dentro da mesma moldura. */
  .about__owner{
    position:relative; flex:1 1 100%; max-width:430px; margin:0;
    aspect-ratio:auto; display:flex; align-items:stretch; background:var(--navy);
  }
  /* deitado: sem o selo ao lado sobra a linha inteira, e o retrato em pé numa
     coluna larga viraria um bloco alto demais antes do texto da seção */
  .about__owner img{ position:static; width:44%; aspect-ratio:3/3.4; height:auto; }
  .about__owner figcaption{
    position:static; flex:1 1 0; min-width:0; background:none;
    display:flex; flex-direction:column; justify-content:center; padding:14px 16px;
  }
  /* O selo existe para ocupar o canto vazio da foto grande no desktop. Sem a
     sobreposição ele vira só mais um bloco no meio do caminho, entre a imagem e
     o texto de "Quem somos". A independência não se perde: ela é dita de novo
     nos diferenciais e nas dúvidas, mais abaixo na mesma página. */
  .about__badge{ display:none; }
}

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;   /* 4 divisores exatos: nunca sobra célula vazia */
  margin-top:clamp(48px,5vw,72px);
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1);
}
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .stats{ grid-template-columns:1fr; } }
.stat{
  position:relative; padding:38px 24px 34px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#fff 0%, #FAFCFF 100%);
  transition:background .35s ease;
}
.stat:hover{ background:linear-gradient(180deg,#fff 0%, #F1F7FF 100%); }

/* halo atrás do número: sem ele a faixa fica chapada, quatro retângulos brancos
   iguais. Acende junto com a contagem. */
.stat::before{
  content:''; position:absolute; left:50%; top:24px;
  width:160px; height:82px; margin-left:-80px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(43,126,197,.14), transparent 72%);
  opacity:0; pointer-events:none; transition:opacity .7s var(--ease-soft);
}
.stats:not(.is-armed) .stat::before,
.stats.is-armed .stat.is-live::before{ opacity:1; }

.stat__num{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(2rem,1.4rem + 1.8vw,2.85rem);          /* alinha os rótulos entre os cards */
  font-size:clamp(2.1rem,1.4rem + 2vw,3rem); font-weight:800;
  letter-spacing:-.04em; color:var(--blue); line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;  /* largura estável ao contar */
}
/* o degradê no número só entra onde dá para recortar o fundo no texto; fora
   disso vale o azul chapado declarado acima, senão o número sumiria */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat__num{
    background:linear-gradient(120deg,var(--blue) 10%, var(--accent) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.stat__num--text{ font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); letter-spacing:-.02em; }
.stat p{
  margin:.85rem 0 0; font-size:.8rem; color:var(--muted); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}

/* Entrada escalonada, aplicada só quando o JS assume a contagem.
   Sem JS (ou com is-armed ausente) os números já aparecem prontos. */
.stats.is-armed .stat__num,
.stats.is-armed .stat p{
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.stats.is-armed .stat__num{ opacity:.25; transform:translateY(10px) scale(.96); }
.stats.is-armed .stat p{ opacity:0; transform:translateY(6px); }
.stats.is-armed .stat.is-live .stat__num,
.stats.is-armed .stat.is-live p{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .stats.is-armed .stat__num,
  .stats.is-armed .stat p{ opacity:1; transform:none; transition:none; }
}

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step{
  position:relative;
  padding:32px 28px 30px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
  transition:transform var(--t-hover) var(--ease-soft), box-shadow var(--t-hover) var(--ease-soft);
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.step__top{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.step__n{
  position:relative;
  display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(150deg,#2B7EC5,#1F3C90); color:#fff;
  font-size:1.1rem; font-weight:800;
}
.step__line{ flex:1; height:2px; background:linear-gradient(90deg,var(--accent) 0%, var(--line) 100%); border-radius:2px; }
.step__line--last{ background:linear-gradient(90deg,var(--line) 0%, transparent 100%); }
.step h3{ font-size:1.32rem; margin-bottom:.7rem; }
.step p{ font-size:.95rem; color:var(--muted); line-height:1.65; }
.step__tag{
  display:inline-block; margin-top:1rem; padding:6px 13px; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  background:#E8F2FB; color:var(--accent-dk);
}
/* --- entrada em sequência: o card acende, a linha corre até o próximo ---
   Tudo depende de .is-armed, que só o JS adiciona. Sem JS (ou com
   prefers-reduced-motion) os cards ficam visíveis do jeito normal. */
.steps.is-armed .step{
  opacity:0; transform:translateY(30px);
  transition:opacity .7s var(--ease-soft),
             transform .8s cubic-bezier(.2,.85,.3,1.04),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}
.steps.is-armed .step.is-live{ opacity:1; transform:none; }
/* terminada a sequência, o hover volta a responder na velocidade de sempre */
.steps.is-done .step{
  transition:transform var(--t-hover) var(--ease-soft),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}

/* o número surge primeiro, com um anel que pulsa uma única vez */
.steps.is-armed .step__n{
  opacity:0; transform:scale(.45);
  transition:opacity .4s var(--ease), transform .6s cubic-bezier(.2,.9,.25,1.3);
}
.steps.is-armed .step.is-live .step__n{ opacity:1; transform:none; }
.step__n::before{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--accent); opacity:0; pointer-events:none;
}
.steps.is-armed .step.is-live .step__n::before{ animation:stepPing .95s var(--ease) .12s 1; }
@keyframes stepPing{
  from{ transform:scale(.72); opacity:.5; }
  to  { transform:scale(1.45); opacity:0; }
}

/* a linha é desenhada a partir do número */
.steps.is-armed .step__line{
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.05s var(--ease) .18s;
}
.steps.is-armed .step.is-live .step__line{ transform:scaleX(1); }

/* ponto luminoso que corre à frente da linha enquanto ela é desenhada */
.step__top::after{
  content:''; position:absolute; top:50%; left:62px;
  width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:var(--accent); opacity:0; pointer-events:none;
  box-shadow:0 0 0 5px rgba(43,126,197,.16), 0 0 16px rgba(43,126,197,.8);
}
.steps.is-armed .step.is-live .step__top::after{ animation:stepComet 1.15s var(--ease) .18s 1; }
@keyframes stepComet{
  0%  { left:62px;             opacity:0; transform:scale(.3); }
  15% { opacity:1; transform:scale(1); }
  80% { opacity:1; }
  100%{ left:calc(100% - 9px); opacity:0; transform:scale(.45); }
}

@media (max-width:860px){
  .steps{ grid-template-columns:1fr; }
  .step__line{ display:none; }
  .step__top::after{ display:none; }

  /* empilhado, quem liga um card ao outro é um filete vertical no vão */
  .step::after{
    content:''; position:absolute; left:52px; top:100%; width:2px; height:26px;
    background:linear-gradient(180deg,var(--accent),var(--line));
  }
  .step:last-child::after{ display:none; }
  .steps.is-armed .step::after{ transform:scaleY(0); transform-origin:top center; }
  .steps.is-armed .step.is-live::after{ transform:scaleY(1); transition:transform .55s var(--ease) .2s; }
}

/* ---------- linha do tempo (etapas da página Consultoria) ----------
   Duas trilhas sobrepostas à esquerda: a cinza é o caminho inteiro, a azul é o
   quanto já foi percorrido. A altura da azul vem de --tl, que o JS atualiza a
   cada rolagem: é isso que dá a sensação de a linha estar sendo desenhada.
   A trilha corre POR TRÁS dos cartões (z-index abaixo das etapas): só aparece
   nos vãos, costurando uma etapa na outra. --tl-x é o eixo dessa costura, e o
   marcador usa o mesmo valor para ficar sempre em cima da linha. */
.tl{
  position:relative; display:grid; gap:clamp(56px,7vw,110px);
  --tl-x:56px; --tl-pad:0px; --tl-node:30px; --tl-node-y:9px;
}
.tl::before,.tl::after{
  content:""; position:absolute; left:var(--tl-x); width:2px; z-index:0;
  border-radius:2px; pointer-events:none;
}
.tl::before{ top:0; bottom:0; background:var(--line); }
.tl::after{
  top:0; height:calc(var(--tl,0) * 100%);
  background:linear-gradient(180deg,var(--blue) 0%, var(--accent) 100%);
  box-shadow:0 0 14px rgba(43,126,197,.45);
}

/* a etapa ocupa a largura toda e fica ACIMA da trilha: é o cartão que esconde
   a linha, deixando à mostra só o trecho entre uma etapa e outra */
.tl__item{ position:relative; z-index:1; padding-left:var(--tl-pad); }

/* ...só que quem esconde a linha não pode ser o cartão em si: na entrada ele
   ainda está translúcido, e a trilha aparecia atravessando o cartão-fantasma.
   Esta chapa ocupa exatamente a área do cartão, na mesma cor dele, e fica de
   fora da animação: a linha para na borda de cima do cartão desde o primeiro
   quadro. Fica atrás do cartão, então some assim que ele fica opaco. */
.tl__item::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; right:0; bottom:0; left:var(--tl-pad);
  background:#fff; border-radius:var(--r-lg);
}


/* cada etapa é um cartão: texto à esquerda, foto à direita */
.tl__card{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42%);
  align-items:stretch; min-height:288px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}
.tl__item:hover .tl__card{ box-shadow:var(--sh-2); border-color:#CFDBEA; }

/* A onda é uma máscara na foto, não um elemento: o que aparece no recorte é o
   próprio branco do cartão, então o texto "invade" a imagem sem precisar de
   marcação extra nem de casar cor de fundo. preserveAspectRatio='none' faz a
   curva esticar junto com a altura do cartão. */
.tl__media{
  position:relative; overflow:hidden;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 400' preserveAspectRatio='none'%3E%3Cpath d='M15,0 C31,120 -1,280 15,400 L100,400 L100,0 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 400' preserveAspectRatio='none'%3E%3Cpath d='M15,0 C31,120 -1,280 15,400 L100,400 L100,0 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;         mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
}
/* fora do fluxo de propósito: solta, a foto impunha a própria proporção ao
   cartão: a de Pós-venda é vertical (736x1104) e esticava a etapa para ~700px
   de altura. Assim quem manda na altura é o texto, e a foto recorta */
.tl__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease-soft);
}
.tl__item:hover .tl__media img{ transform:scale(1.05); }

.tl__copy h2,
.tl__copy h3{
  font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem); letter-spacing:-.025em; margin-bottom:.2rem;
}
.tl__copy h2::after,
.tl__copy h3::after{
  content:""; display:block; width:44px; height:3px; margin:.9rem 0 0;
  border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--accent));
}
/* o padding da direita é maior: é ali que a onda avança sobre a foto, e sem a
   folga a última palavra de cada linha encostaria na curva */
.tl__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(26px,2.6vw,38px) clamp(34px,3.4vw,52px) clamp(26px,2.6vw,38px) clamp(24px,2.4vw,36px);
}
.tl__copy p{ margin-top:1.1rem; color:var(--muted); font-size:1.02rem; line-height:1.72; }

/* o marcador fica montado na borda de cima do cartão, que é justamente onde a
   linha deixa de aparecer, já que daí para baixo o cartão a cobre. No meio da
   etapa ele ficava solto: a linha morria na borda e só reencontrava o marcador
   150px depois, no vazio. --tl-node-y desce um pouco esse encaixe: centrado na
   borda o marcador pesava para fora do cartão. O deslocamento não pode passar
   de metade do diâmetro, senão o marcador desgruda da linha */
.tl__node{
  position:absolute; left:var(--tl-x); top:var(--tl-node-y); z-index:2;
  width:var(--tl-node); height:var(--tl-node);
  margin:calc(var(--tl-node) / -2) 0 0 calc(var(--tl-node) / -2);
  display:grid; place-items:center; border-radius:50%;
  background:#fff; border:2px solid var(--line);
  color:var(--muted-lt); font-size:.72rem; font-weight:800;
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), box-shadow .5s var(--ease),
             transform .5s cubic-bezier(.2,.9,.25,1.3);
}
.tl__item.is-on .tl__node{
  background:linear-gradient(150deg,#2B7EC5,#1F3C90); border-color:transparent; color:#fff;
  box-shadow:0 0 0 4px rgba(43,126,197,.13), 0 6px 14px rgba(31,60,144,.28);
  transform:scale(1.06);
}
/* anel que pulsa uma única vez quando a linha chega no marcador */
.tl__node::before{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--accent); opacity:0; pointer-events:none;
}
.tl.is-armed .tl__item.is-on .tl__node::before{ animation:stepPing 1s var(--ease) .05s 1; }

/* estado inicial só existe com JS: sem ele, tudo já aparece no lugar. O cartão
   pode voltar a entrar por opacidade porque quem esconde a linha agora é a
   chapa lá de cima, e não a opacidade dele */
.tl.is-armed .tl__card{
  opacity:0; transform:translateX(30px);
  transition:opacity .55s var(--ease-soft),
             transform .7s cubic-bezier(.2,.85,.3,1.04),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}
.tl.is-armed .tl__item.is-on .tl__card{ opacity:1; transform:none; }

/* o selo da etapa (só a home usa) reaproveita o estilo de .step__tag */
.tl__copy .step__tag{ align-self:flex-start; margin-top:1.2rem; }

@media (max-width:860px){
  /* sem espaço para foto e texto lado a lado, a etapa empilha: a foto vai para
     cima e a onda sai de cena: na horizontal ela cortaria a imagem toda.
     O corredor lateral também sai: 72px comiam um quinto da tela e o texto
     quebrava a cada duas palavras. O cartão fica com a largura inteira e a
     trilha corre atrás dele, como no desktop: o vão cresce um pouco para
     sobrar linha à vista acima do marcador */
  .tl{ gap:56px; --tl-x:44px; --tl-pad:0px; }
  .tl__card{ grid-template-columns:1fr; min-height:0; }
  .tl__media{
    order:-1;
    -webkit-mask-image:none; mask-image:none;
  }
  /* empilhado a foto volta ao fluxo: aqui é ela que dá altura ao próprio bloco */
  .tl__media img{ position:static; aspect-ratio:16/9; height:auto; }
  /* como no empilhado a etapa acende já entrando pela base da tela, a entrada
     precisa terminar rápido: em .7s o cartão ainda estaria clareando quando
     o dedo já o levou para o meio da tela */
  .tl.is-armed .tl__card{
    transform:translateY(26px);
    transition:opacity .42s var(--ease-soft),
               transform .48s cubic-bezier(.2,.85,.3,1.04),
               box-shadow var(--t-hover) var(--ease-soft),
               border-color var(--t-hover) var(--ease-soft);
  }
  .tl.is-armed .tl__item.is-on .tl__card{ transform:none; }
}

/* ---------- cartão de onda fora da linha do tempo ----------
   Quem somos usa o mesmo cartão das etapas: texto à esquerda, foto à direita
   com o recorte de onda. Por isso a marcação de lá repete as classes .tl__card,
   .tl__copy e .tl__media: o desenho do cartão mora num lugar só. O que falta
   quando não há linha do tempo é o que na Consultoria vem do .tl__item: o
   empilhamento e o hover. */
.wavecards{ display:grid; gap:clamp(28px,3.4vw,48px); }
.wavecard:hover{ box-shadow:var(--sh-2); border-color:#CFDBEA; }
.wavecard:hover .tl__media img{ transform:scale(1.05); }

/* ---------- diferenciais ---------- */
.diffs{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(64px,7vw,110px) 0;
  background:var(--navy-deep);
}
.diffs h2,.diffs h3{ color:#fff; }
.diffs__bg{ position:absolute; inset:0; }
/* A foto vinha a 18% de opacidade DEBAIXO de um véu de 86–96%: sobrava perto de
   2% dela na tela, ou seja, nada. Agora ela entra inteira e quem controla a
   leitura é só o véu. O desfoque é o mesmo raciocínio do hero, textura, não
   uma segunda cena para o olho decifrar. */
/* dessatura bastante: a foto tem madeira e tons de pêssego que, sob um véu
   azul, viravam um bege sujo em vez de luz */
.diffs__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) blur(3px);
}
.diffs::after{
  content:""; position:absolute; inset:0;
  background:
    /* o degradê principal fecha na esquerda, onde fica o título, e abre para a
       direita; a segunda camada escurece o topo pelo mesmo motivo */
    linear-gradient(120deg, rgba(12,26,56,.975) 0%, rgba(15,31,72,.91) 55%, rgba(29,70,152,.87) 100%),
    linear-gradient(to bottom, rgba(12,26,56,.5) 0%, transparent 36%);
}
.diffs__inner{ position:relative; z-index:2; }
.diffs .section__lead{ color:#A6B4CD; }
.diffs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:1000px){ .diffs__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .diffs__grid{ grid-template-columns:1fr; } }
.diff{
  padding:28px 26px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.05); border:1px solid var(--line-dk);
  backdrop-filter:blur(6px);
  transition:transform var(--t-hover) var(--ease-soft), background var(--t-hover) var(--ease-soft), border-color var(--t-hover) var(--ease-soft);
}
.diff:hover{ transform:translateY(-5px); background:rgba(255,255,255,.09); border-color:rgba(127,188,234,.5); }
.diff__icon{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px;
  border-radius:13px; background:rgba(43,126,197,.24); color:var(--accent-lt);
}
.diff__icon svg{ width:22px; height:22px; }
.diff h3{ font-size:1.08rem; margin-bottom:.5rem; }
.diff p{ font-size:.92rem; color:#A6B4CD; line-height:1.62; }

/* =========================================================
   SLIDER DE DEPOIMENTOS
   ========================================================= */
.slider{ position:relative; }
.slider__viewport{ overflow:hidden; border-radius:var(--r-lg); }
.slider__viewport:focus-visible{ outline:3px solid var(--accent); outline-offset:6px; }
.slider__track{ display:flex; gap:22px; transition:transform .55s var(--ease); will-change:transform; }
.slider__track.is-dragging{ transition:none; }
.slide{ flex:0 0 calc((100% - 44px) / 3); }

.quote{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  padding:34px 30px 28px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-1);
}
.quote__mark{
  position:absolute; top:6px; right:24px;
  font-family:var(--serif); font-size:5.5rem; line-height:1; color:#E3EDF7;
  pointer-events:none; user-select:none;
}
.quote__stars{ display:flex; gap:3px; margin-bottom:16px; }
.quote__stars svg{ width:17px; height:17px; fill:#F5B301; stroke:none; }
.quote blockquote{
  position:relative; margin:0 0 24px; flex:1;
  font-family:var(--serif); font-size:1.04rem; line-height:1.68; color:#2E3A4C;
}
.quote__by{ display:flex; align-items:center; gap:13px; padding-top:20px; border-top:1px solid var(--line); }
.quote__avatar{
  display:block; flex:none; width:44px; height:44px; border-radius:50%;
  object-fit:cover; object-position:center;
  background:#E3EDF7; border:1px solid var(--line);
}
.quote__by strong{ display:block; font-size:.98rem; letter-spacing:-.01em; color:var(--navy); }
.quote__by small{ display:block; font-size:.78rem; color:var(--muted); line-height:1.45; }

.slider__arrow{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  display:grid; place-items:center; width:50px; height:50px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--blue);
  box-shadow:var(--sh-2);
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease), opacity .22s var(--ease);
}
.slider__arrow svg{ width:20px; height:20px; stroke-width:2.3; }
.slider__arrow:hover{ background:var(--blue); color:#fff; }
.slider__arrow:disabled{ opacity:.35; cursor:not-allowed; }
.slider__arrow--prev{ left:-24px; }
.slider__arrow--next{ right:-24px; }

.slider__dots{ display:flex; justify-content:center; gap:9px; margin-top:30px; }
.slider__dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:999px;
  background:#BFCBDC; transition:width .3s var(--ease), background .3s var(--ease);
}
.slider__dots button.is-active{ width:30px; background:var(--accent); }

@media (max-width:1100px){
  .slide{ flex:0 0 calc((100% - 22px) / 2); }
  .slider__arrow--prev{ left:-12px; }
  .slider__arrow--next{ right:-12px; }
}
@media (max-width:760px){
  .slide{ flex:0 0 100%; }
  .slider__arrow{ display:none; }
  /* Aqui era `overflow:visible`, para a sombra do card não sair cortada. Só
     que com um depoimento por tela os cinco slides passam de 1700px e todo o
     excedente virava rolagem horizontal: era a maior fonte de estouro da
     página. `hidden` resolve; logo abaixo o clip recupera a sombra. */
  .slider__viewport{ overflow:hidden; }
}
/* clip corta só na horizontal e, ao contrário de hidden, aceita o outro eixo
   em `visible`: a sombra volta a respirar em cima e embaixo do card */
@supports (overflow:clip){
  @media (max-width:760px){
    .slider__viewport{ overflow-x:clip; overflow-y:visible; }
  }
}

/* ---------- clientes ---------- */
.clients{ background:linear-gradient(180deg,#fff 0%,var(--mist) 100%); overflow:hidden; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:start; }
.faq__aside{ position:sticky; top:88px; }   /* header encolhido (54px) + respiro */
.faq__aside .h2{ margin-bottom:1rem; }
.faq__aside .section__lead{ margin-bottom:1.6rem; }

.faq__list{ display:grid; gap:12px; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.faq__item[open]{ box-shadow:var(--sh-1); border-color:#C6D4E6; }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 22px; cursor:pointer; list-style:none;
  font-weight:700; font-size:1rem; letter-spacing:-.015em; color:var(--navy);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__plus{ position:relative; flex:none; width:22px; height:22px; }
.faq__plus::before,.faq__plus::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--accent); border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.faq__plus::before{ width:13px; height:2px; }
.faq__plus::after{ width:2px; height:13px; }
.faq__item[open] .faq__plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
/* O padding fica nos filhos, não aqui: quem anima é a altura do .faq__body, e
   com padding próprio ele nunca chegaria a zero (border-box não comprime
   padding), sobrando uma faixa aberta embaixo de cada pergunta fechada. */
.faq__body{ overflow:hidden; transition:height .32s var(--ease); }
.faq__body > *{ padding-left:22px; padding-right:22px; }
.faq__body > :last-child{ padding-bottom:22px; }
.faq__body p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.65; }

@media (max-width:900px){
  .faq{ grid-template-columns:1fr; }
  .faq__aside{ position:static; }
}

/* =========================================================
   CONTATO
   ========================================================= */
.contact{
  position:relative; color:#fff;
  background:
    radial-gradient(900px 460px at 88% 8%, rgba(43,126,197,.34) 0%, transparent 62%),
    linear-gradient(160deg,#14275A 0%, #0F1F48 50%, #0C1A38 100%);
}
.contact h2{ color:#fff; }
/* minmax(0,1fr) e não 1fr: a coluna `1fr` tem piso automático no conteúdo mais
   largo, e o e-mail (contato@consultoriaagora.com) é uma palavra que não quebra.
   Em tela estreita ela empurrava a coluna, e com ela o formulário inteiro,
   para fora do container. */
.contact__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,68px); align-items:start; }
.contact__lead{ color:#A6B4CD; font-size:1.04rem; margin-bottom:2rem; max-width:46ch; }
.contact .h2{ margin-bottom:1rem; }

.contact__info{ display:grid; gap:18px; }
.contact__info li{ display:flex; gap:14px; align-items:flex-start; }
/* sem o min-width:0 o texto ao lado do ícone se recusa a encolher abaixo da
   maior palavra e volta a estourar a linha */
.contact__info li > span{ min-width:0; }
.contact__ic{
  display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px;
  background:rgba(43,126,197,.24); color:var(--accent-lt);
}
.contact__ic svg{ width:19px; height:19px; }
.contact__info strong{ display:block; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:#7A88A3; margin-bottom:.2rem; font-weight:800; }
/* break-word e não anywhere: assim o navegador tenta primeiro os pontos de
   quebra legítimos (o <wbr> depois do @) e só reparte a palavra se não couber
   nem assim */
.contact__info a{ font-weight:600; overflow-wrap:break-word; transition:color .2s var(--ease); }
.contact__info a:hover{ color:var(--accent-lt); }
.contact__addr{ font-size:.92rem; color:#C2CDE0; line-height:1.5; }

/* form */
.formcard{ padding:clamp(26px,3vw,38px); border-radius:var(--r-xl); background:#fff; color:var(--ink); box-shadow:var(--sh-3); }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.field label{ display:block; margin-bottom:7px; font-size:.79rem; font-weight:800; letter-spacing:.04em; color:#3A4657; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--mist); border:1.5px solid transparent; border-radius:12px;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:84px; }
.field input::placeholder,.field textarea::placeholder{ color:#9AA3AF; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(43,126,197,.16);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369727D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:42px;
}
.field.is-invalid input,.field.is-invalid select{ border-color:#D14343; background:#FEF4F4; }
.field__err{ display:none; margin-top:6px; font-size:.78rem; font-weight:600; color:#D14343; }
.field.is-invalid .field__err,.field__err.is-on{ display:block; }

.check{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 20px; font-size:.84rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.check input{ flex:none; width:19px; height:19px; margin-top:1px; accent-color:var(--accent); cursor:pointer; }

.formcard__alt{ margin:16px 0 0; text-align:center; font-size:.86rem; color:var(--muted); }
.formcard__alt a{ color:var(--blue); font-weight:800; border-bottom:2px solid var(--green); }
/* O recado abaixo do botão agora tem três estados: o verde de
   sucesso que já existia, o vermelho de falha e um neutro enquanto
   o envio está no ar. O verde continua sendo o padrão da classe
   base, então nada quebra se o JS não chegar a pôr a variante. */
.formcard__ok{ margin:16px 0 0; padding:14px 16px; border-radius:12px; background:#E4FAEE; color:#0E7A45; font-size:.88rem; font-weight:600; text-align:center; }
.formcard__ok--erro{ background:#FDECEC; color:#B3261E; }
.formcard__ok--enviando{ background:var(--mist-2); color:var(--muted); }

@media (max-width:900px){ .contact__grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px){ .field-row{ grid-template-columns:minmax(0,1fr); } }

/* =========================================================
   FOOTER (claro)
   ========================================================= */
.footer{ background:#F5F7FA; color:#54627E; font-size:.94rem; }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1.05fr 1.05fr 1.2fr;
  gap:clamp(28px,3.5vw,48px);
  padding:clamp(56px,6vw,84px) 0 clamp(48px,5vw,72px);
}

.brand--footer{ margin-bottom:22px; }
.brand--footer .brand__logo{ height:58px; }

.footer__social{ display:flex; gap:12px; margin-bottom:26px; }
.footer__social a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:#E9EEF6; color:var(--blue);
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.footer__social svg{ width:19px; height:19px; }
.footer__social a:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }

.footer__entity{ margin:0; font-size:.88rem; line-height:1.7; color:#8894AB; }

.footer__col h4{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); font-weight:800; margin-bottom:20px;
}
.footer__col ul{ display:grid; gap:14px; }
.footer__col a{ color:#54627E; transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--blue); }

.footer__col--contact{ display:grid; gap:18px; align-content:start; }
.footer__col--contact h4{ margin-bottom:2px; }
.fcontact strong{ display:block; font-size:.88rem; font-weight:800; color:var(--navy); margin-bottom:4px; }
.fcontact a{ color:#54627E; transition:color .2s var(--ease); }
.fcontact a:hover{ color:var(--blue); }
.fcontact p{ margin:0; line-height:1.65; }

.footer__bar{ border-top:1px solid #E3E7EE; }
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 0 26px; font-size:.86rem;
}
.footer__bottom p{ margin:0; color:#98A2B3; }
.footer__terms{ display:inline-flex; align-items:center; gap:12px; }
.footer__terms a{ color:#98A2B3; transition:color .2s var(--ease); }
.footer__terms a:hover{ color:var(--blue); }
.footer__terms span{ color:#C7CEDA; }

@media (max-width:1080px){
  .footer__grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__col--contact{ grid-column:1 / -1; }
}
@media (max-width:420px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   PÁGINAS LEGAIS
   ========================================================= */
.legal{ padding:clamp(48px,6vw,86px) 0 clamp(56px,6vw,90px); }
.legal__wrap{ width:min(100% - 48px, 760px); margin-inline:auto; }
.legal__back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:28px;
  font-size:.9rem; font-weight:700; color:var(--blue);
}
.legal__back svg{ width:1em; height:1em; stroke-width:2.2; }
.legal__back:hover{ color:var(--accent); }
.legal h1{ font-size:clamp(1.9rem,1.3rem + 2vw,2.6rem); margin-bottom:.6rem; }
.legal__date{ font-size:.86rem; color:var(--muted-lt); margin-bottom:36px; }
.legal h2{
  font-size:1.15rem; color:var(--navy); margin:36px 0 12px;
  padding-top:22px; border-top:1px solid var(--line);
}
.legal p,.legal li{ color:#3F4C61; line-height:1.75; }
.legal ul{ list-style:disc; padding-left:22px; display:grid; gap:8px; margin:0 0 1em; }
.legal a:not(.legal__back){ color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   AÇÕES FLUTUANTES
   ========================================================= */
.wpp{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px; border-radius:999px;
  background:var(--green); color:var(--navy-deep); font-weight:800; font-size:.9rem;
  box-shadow:0 12px 32px rgba(40,205,120,.44);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.wpp svg{ width:21px; height:21px; fill:none; stroke:var(--navy-deep); stroke-width:1.9; }
.wpp:hover{ background:var(--green-lt); transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px rgba(40,205,120,.52); }

.totop{
  position:fixed; right:22px; bottom:84px; z-index:89;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--blue);
  box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.totop svg{ width:19px; height:19px; stroke-width:2.3; }
.totop.is-on{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--blue); color:#fff; }

@media (max-width:560px){
  .wpp span{ display:none; }
  .wpp{ padding:15px; }
  .totop{ bottom:82px; right:20px; }
}

/* ---------- link "ver mais" no fim de uma seção da home ---------- */
.section__more{ margin:clamp(28px,3.5vw,44px) 0 0; text-align:center; }
.section__more--left{ text-align:left; }
.section__more a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.95rem; color:var(--blue);
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color .25s var(--ease), gap .25s var(--ease);
}
.section__more a:hover{ border-bottom-color:var(--accent); gap:.8rem; }
.section__more svg{ width:1.05em; height:1.05em; stroke-width:2.2; }

/* =========================================================
   PÁGINAS INTERNAS (quem somos · consultoria · soluções)
   ========================================================= */
.pagehero{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(52px,6vw,88px) 0 clamp(56px,6vw,92px);
  background:
    radial-gradient(900px 460px at 12% -10%, #1D4698 0%, transparent 60%),
    linear-gradient(160deg,#14275A 0%, #0F1F48 52%, #0C1A38 100%);
}
/* foto de fundo + véu, mesma receita do hero da home: a imagem entra apagada e
   em preto e branco, e o degradê por cima garante o contraste do texto
   independentemente do que aparecer na foto.
   A opacidade é maior do lado direito, onde não há texto: o degradê de máscara
   segura a foto quase invisível sob o título e a libera na metade vazia. */
.pagehero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.pagehero__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.72; filter:grayscale(.9);
  mask-image:linear-gradient(100deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.72) 68%, #000 100%);
  -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.72) 68%, #000 100%);
}
/* véu no ::before e grade no ::after de propósito: com o mesmo z-index quem
   vem depois pinta por cima, então a grade precisa ser o ::after para não
   ficar enterrada sob o degradê */
.pagehero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, rgba(10,22,50,.95) 0%, rgba(12,26,56,.9) 40%, rgba(15,31,72,.62) 66%, rgba(20,45,105,.3) 100%);
}
/* em tela estreita o texto ocupa a largura toda e passa por cima da parte
   clara, então a foto volta a ficar contida */
@media (max-width:900px){
  .pagehero__bg img{
    opacity:.5;
    mask-image:linear-gradient(100deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.78) 100%);
    -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.78) 100%);
  }
  .pagehero::before{
    background:linear-gradient(105deg, rgba(10,22,50,.95) 0%, rgba(12,26,56,.9) 55%, rgba(15,31,72,.74) 100%);
  }
}
.pagehero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 78%);
}
.pagehero h1{ font-size:clamp(2rem,1.2rem + 2.8vw,3.3rem); letter-spacing:-.035em; color:#fff; }
.pagehero .container{ position:relative; z-index:2; }
/* O limite de 760px fica num filho do .container, não no próprio. Junto, o
   `margin-inline:auto` do container centralizava esses 760px na tela inteira
   e o texto do hero saía ~220px à direita do logo, fora do alinhamento. */
.pagehero__wrap{ max-width:760px; }
.pagehero__lead{ margin-top:1.1rem; font-size:clamp(1rem,.95rem + .3vw,1.14rem); color:#B6C4DC; }
.crumbs{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-bottom:1.1rem; font-size:.8rem; font-weight:600; color:#8FA3C4;
}
.crumbs a{ color:var(--accent-lt); }
.crumbs a:hover{ color:#fff; }
.crumbs span{ opacity:.5; }

/* ---------- blocos alternados imagem / texto ---------- */
.stack{ display:grid; gap:clamp(48px,6vw,86px); }
.duo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,64px); align-items:center;
}
/* nos ímpares a imagem vai para a direita, sem mexer na ordem do HTML:
   o texto continua vindo antes para quem usa leitor de tela */
.duo:nth-child(even) .duo__media{ order:2; }
.duo__media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-2); border:1px solid var(--line);
}
/* Formato panorâmico porque os textos são curtos: com 4/3 a foto ficava cinco
   vezes mais alta que o parágrafo ao lado e o bloco pendia todo para a imagem. */
.duo__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.duo__n{
  position:absolute; left:18px; top:18px; z-index:2;
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:rgba(12,26,56,.82); backdrop-filter:blur(6px);
  color:#fff; font-size:.9rem; font-weight:800;
}
.duo__copy h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin-bottom:.8rem; letter-spacing:-.025em; }
.duo__copy p{ color:var(--muted); font-size:1.06rem; line-height:1.72; max-width:46ch; }
.duo__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.2rem; }
.duo__tags span{
  padding:6px 13px; border-radius:999px; font-size:.76rem; font-weight:700;
  background:#E8F2FB; color:var(--accent-dk);
}
@media (max-width:820px){
  .duo{ grid-template-columns:1fr; }
  .duo:nth-child(even) .duo__media{ order:0; }
}

/* ---------- grade de soluções: foto em cima, texto embaixo ----------
   Duas colunas, como no site atual da Ágora. O cartão não tem moldura nem
   fundo: o que separa um do outro é o espaço em volta. Por isso a borda
   arredondada fica na foto: sem ela a imagem vira um retângulo solto. */
.sols{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(38px,4.5vw,66px) clamp(28px,4vw,60px);
}
/* a foto não ocupa a coluna inteira: fica mais estreita que o texto, como no
   site atual, e o limite em px impede que ela cresça junto com a tela */
.sol__media{
  max-width:min(100%,420px);
  overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--sh-1);
}
/* 3/2 é o formato nativo das fotos da pasta assets/img/solucoes: declarar o
   mesmo valor evita corte e reserva a altura antes de a imagem chegar */
.sol__media img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  transition:transform .7s var(--ease-soft);
}
.sol:hover .sol__media img{ transform:scale(1.05); }
.sol h2{
  margin:1.5rem 0 0;
  font-size:clamp(1rem,.94rem + .3vw,1.16rem);
  letter-spacing:.08em; text-transform:uppercase;
}
/* filete curto no lugar da linha cheia: marca o título sem pesar na grade */
.sol h2::after{
  content:""; display:block; width:44px; height:3px; margin-top:.85rem;
  border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--accent));
}
.sol p{ margin-top:1rem; color:var(--muted); font-size:1.02rem; line-height:1.75; max-width:52ch; }
@media (max-width:820px){
  .sols{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
}

/* ---------- faixa de chamada no fim das páginas ---------- */
.endcta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; padding:clamp(30px,4vw,44px);
  border-radius:var(--r-xl); background:var(--mist); border:1px dashed #C6D4E6;
}
.endcta h2{ font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin-bottom:.4rem; letter-spacing:-.025em; }
.endcta p{ margin:0; color:var(--muted); max-width:52ch; }
.endcta__acts{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- cartão de parceria (Q4 Talent) ----------
   Fica logo abaixo do convite às soluções, mas em fundo escuro: é produto de
   outra empresa e não pode se confundir com o que a Ágora entrega. O roxo do
   Talent aparece só no brilho e no botão, para o cartão não brigar com o azul
   da marca. */
.partner{
  /* o recuo vira variável porque a placa branca precisa anulá-lo para encostar
     na borda do cartão */
  --partner-y:clamp(26px,3vw,36px);
  --partner-x:clamp(24px,3vw,40px);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(20px,3vw,38px); margin-top:20px;
  padding:var(--partner-y) var(--partner-x);
  border-radius:var(--r-xl);
  /* Sem borda no cartão. A que existia era branca a 10%: sumia no lado escuro e
     virava um risco cinza torto contornando a placa branca. Quem precisa de
     contorno é só a placa, que é clara sobre uma seção clara, e lá a borda vai
     na cor das outras bordas do site. */
  background:
    radial-gradient(680px 300px at 88% 0%, rgba(92,88,232,.28) 0%, transparent 66%),
    linear-gradient(150deg,#111634 0%, #0B0F26 100%);
  color:#fff;
}
/* As duas marcas empilhadas numa placa branca. As duas artes são escuras e
   sumiriam no cartão; a placa é o fundo para o qual elas foram desenhadas, e
   assim nenhuma precisa de filtro, logo de parceiro vai como o dono fez.
   As margens negativas encostam a placa na esquerda e a esticam de topo a
   base: solta no meio do escuro ela parecia um adesivo colado por cima. */
.partner__brands{
  align-self:stretch; align-content:center;
  display:grid; justify-items:center; gap:9px;
  margin:calc(-1 * var(--partner-y)) 0 calc(-1 * var(--partner-y)) calc(-1 * var(--partner-x));
  padding:26px clamp(30px,3.4vw,44px);
  background:#fff;
  /* borda só nos três lados que dão para fora; do lado do texto o encontro
     branco/escuro já é o próprio limite */
  border:1px solid var(--line); border-right:0;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
}
.partner__logo{ display:block; width:auto; }
.partner__logo--talent{ height:46px; }
.partner__logo--q4{ height:15px; }
.partner__by{
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#9AA6BF;
}

/* Precisa do `.partner` na frente: a tarja é um <p> dentro de .partner__copy, e
   `.partner__copy p` tem especificidade maior que uma classe sozinha. Sem isso
   o tamanho e a cor daqui eram simplesmente ignorados, e a tarja saía com a
   fonte e o cinza do parágrafo. */
.partner .partner__tag{
  margin:0 0 .4rem; font-size:.66rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#A9A4FF;
}
.partner__copy h3{
  margin:0 0 .5rem; color:#fff;
  font-size:clamp(1.15rem,1.02rem + .5vw,1.44rem); letter-spacing:-.02em;
}
.partner__copy p{ margin:0; color:#B9C0DA; max-width:56ch; font-size:.96rem; }

.partner__cta{
  flex:none; background:#5C58E8; color:#fff; border-color:transparent;
  box-shadow:0 10px 26px -12px rgba(92,88,232,.9);
}
.partner__cta:hover{ background:#6E6AF0; color:#fff; }

@media (max-width:900px){
  .partner{ grid-template-columns:1fr; justify-items:start; gap:22px; }
  /* Empilhado, a placa vira uma faixa no topo: encosta nos dois lados, e a
     borda muda de lado junto. As marcas passam a correr na horizontal, na
     vertical elas ocupavam três linhas de altura à toa numa faixa larga. */
  .partner__brands{
    grid-auto-flow:column; align-items:center;
    justify-items:start; justify-content:start; justify-self:stretch;
    gap:12px;
    margin:calc(-1 * var(--partner-y)) calc(-1 * var(--partner-x)) 0;
    padding:20px var(--partner-x);
    border-right:1px solid var(--line); border-bottom:0;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
  /* deitadas lado a lado, o símbolo do Talent precisa ceder altura para não
     dominar o wordmark da Qu4ntica */
  .partner__logo--talent{ height:34px; }
  .partner__logo--q4{ height:14px; }
  .partner__cta{ width:100%; }
}

/* ---------- missão · visão · valores ---------- */
.mvv{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .mvv{ grid-template-columns:1fr; } }
.mvv__card{
  position:relative; overflow:hidden;
  padding:clamp(28px,3vw,36px) clamp(24px,2.5vw,30px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--t-hover) var(--ease-soft),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft);
}
/* mesmo filete que cresce no topo dos cards de solução da home */
.mvv__card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--accent),var(--green));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-soft);
}
.mvv__card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:#CFDBEA; }
.mvv__card:hover::after{ transform:scaleX(1); }
.mvv__icon{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:20px;
  border-radius:13px; background:linear-gradient(150deg,#EAF2FA,#DDE9F6); color:var(--blue);
  transition:background var(--t-hover) var(--ease-soft),
             color var(--t-hover) var(--ease-soft),
             transform var(--t-hover) var(--ease-soft);
}
.mvv__card:hover .mvv__icon{
  background:linear-gradient(150deg,#2B7EC5,#1F3C90); color:#fff; transform:rotate(-3deg);
}

/* a foto do bloco alternado dá um zoom lento quando o cursor entra no cartão */
.duo__media img{ transition:transform .7s var(--ease-soft); }
.duo:hover .duo__media img{ transform:scale(1.05); }
.mvv__icon svg{ width:22px; height:22px; }
.mvv__card h3{ font-size:1.12rem; margin-bottom:.55rem; letter-spacing:-.02em; }
.mvv__card p{ margin:0; font-size:.94rem; color:var(--muted); line-height:1.65; }

/* ---------- retrato da fundadora em página interna ---------- */
.founder{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,60px); align-items:center; }
@media (max-width:820px){ .founder{ grid-template-columns:1fr; max-width:560px; } }
.founder__photo{
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-2);
}
.founder__photo img{ width:100%; aspect-ratio:4/4.3; object-fit:cover; display:block; }
.founder__role{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.9rem;
  font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dk);
}
.founder__role::before{ content:""; width:24px; height:2px; background:var(--accent); border-radius:2px; }
.founder h2{ font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); margin-bottom:.9rem; letter-spacing:-.03em; }
.founder p{ color:var(--muted); line-height:1.75; }
.founder p + p{ margin-top:1rem; }
/* Formação e tempo de estrada em plaquinhas: são dados que o leitor procura de
   relance, então saem do corpo do texto e viram itens escaneáveis. */
.founder__creds{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem;
  list-style:none; padding:0;
}
.founder__creds li{
  padding:.42rem .8rem; border:1px solid var(--line); border-radius:999px;
  background:#fff; box-shadow:var(--sh-1);
  font-size:.82rem; font-weight:700; color:var(--ink); letter-spacing:-.01em;
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.cards .reveal.is-in,.diffs__grid .reveal.is-in,.mvv .reveal.is-in{ transition-delay:var(--d,0ms); }

/* Cards que também são .reveal precisam de uma única declaração de transition
   cobrindo entrada E hover: senão .reveal sobrescreve e sombra/borda mudam de estalo. */
.cards .card,
.steps .step,
.diffs__grid .diff,
.mvv .mvv__card{
  transition:opacity .6s var(--ease-soft),
             transform var(--t-hover) var(--ease-soft),
             box-shadow var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft),
             background var(--t-hover) var(--ease-soft);
}

/* variações de direção: blocos laterais entram pelo lado em que estão */
.reveal--left { transform:translate3d(-46px,0,0); }
.reveal--right{ transform:translate3d( 46px,0,0); }
.reveal--left.is-in,.reveal--right.is-in{ transform:none; }

/* No celular a coluna ocupa a largura toda: os 46px de deslocamento não têm
   onde caber e o bloco fica pendurado fora da tela até a animação disparar.
   Empilhado, "entrar pelo lado" também perde o sentido: os dois blocos ficam
   um sobre o outro, não lado a lado. Entram subindo, como o reveal comum. */
@media (max-width:760px){
  .reveal--left,.reveal--right{ transform:translate3d(0,26px,0); }
}

/* =========================================================
   EFEITOS DE INTERAÇÃO
   Tudo aqui depende do JS (classe .js no <html>) ou de :hover,
   então nada some se o script falhar.
   ========================================================= */

/* ---------- entrada do hero, logo depois que o preloader sai ---------- */
html.js .hero__copy > *,
html.js .hero__media{ opacity:0; transform:translateY(28px); }
html.is-loaded .hero__copy > *,
html.is-loaded .hero__media{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-soft), transform .95s cubic-bezier(.2,.85,.3,1.02);
}
html.is-loaded .hero__copy > *:nth-child(1){ transition-delay:.06s; }
html.is-loaded .hero__copy > *:nth-child(2){ transition-delay:.17s; }
html.is-loaded .hero__copy > *:nth-child(3){ transition-delay:.28s; }
html.is-loaded .hero__copy > *:nth-child(4){ transition-delay:.39s; }
html.is-loaded .hero__media{ transition-delay:.22s; }

/* ---------- header encolhe ao rolar ---------- */
.header__inner{ transition:min-height .3s var(--ease); }
.brand__logo{ transition:height .3s var(--ease); }
.header.is-stuck .header__inner{ min-height:54px; }
.header.is-stuck .brand__logo{ height:34px; }

/* ---------- brilho que atravessa o botão principal ---------- */
.btn--cta{ position:relative; overflow:hidden; }
.btn--cta::before{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn--cta:hover::before{ animation:btnShine .8s var(--ease) 1; }
@keyframes btnShine{ to{ left:135%; } }

/* ---------- luz que segue o cursor dentro dos cards ---------- */
/* isolation + z-index:-1 deixa a luz acima do fundo do card e abaixo do texto,
   sem precisar mexer no empilhamento de nenhum filho (o .card__n é absoluto). */
.card,.step,.diff,.mvv__card{ --mx:50%; --my:0%; isolation:isolate; }
.diff{ position:relative; overflow:hidden; }
.card::before,.step::before,.diff::before,.mvv__card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none; opacity:0;
  transition:opacity .35s var(--ease);
}
.card::before,.step::before,.mvv__card::before{
  background:radial-gradient(230px circle at var(--mx) var(--my), rgba(43,126,197,.13), transparent 68%);
}
.diff::before{
  background:radial-gradient(230px circle at var(--mx) var(--my), rgba(127,188,234,.16), transparent 68%);
}
.card:hover::before,.step:hover::before,.diff:hover::before,.mvv__card:hover::before{ opacity:1; }

/* o ícone do diferencial acompanha o hover, como o dos cards de solução */
.diff__icon{ transition:background var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft), transform var(--t-hover) var(--ease-soft); }
.diff:hover .diff__icon{ background:rgba(127,188,234,.34); color:#fff; transform:rotate(-3deg) scale(1.05); }

/* ---------- filete que se desenha sob o título da seção ---------- */
.section__head .h2{ position:relative; display:inline-block; padding-bottom:.5rem; }
.section__head .h2::after{
  content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--green));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .85s var(--ease) .25s;
}
.section__head:not(.section__head--left) .h2::after{ left:50%; margin-left:-32px; }
.section__head.is-in .h2::after{ transform:scaleX(1); }

/* ---------- parallax do fundo dos diferenciais (--py vem do JS) ---------- */
.diffs__bg img{ transform:translate3d(0,var(--py,0px),0) scale(1.14); will-change:transform; }

/* ---------- micro-interações de links ---------- */
.footer__col ul a{ display:inline-block; transition:color .2s var(--ease), transform .25s var(--ease); }
.footer__col ul a:hover{ transform:translateX(5px); }
.footer__social a,.topbar__social{ transition:transform .25s var(--ease), background .25s var(--ease); }
.footer__social a:hover,.topbar__social:hover{ transform:translateY(-3px); }

/* o botão flutuante do WhatsApp pulsa uma vez a cada tanto, sem incomodar */
.wpp::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--green); opacity:0; pointer-events:none;
  animation:wppPing 4.5s var(--ease) infinite;
}
@keyframes wppPing{
  0%      { transform:scale(1);    opacity:.55; }
  18%,100%{ transform:scale(1.28); opacity:0;   }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  /* sem troca de imagens: fica só a primeira, estática */
  .hero__shot img{ animation:none; opacity:0; }
  .hero__shot img:first-child{ opacity:1; }
  /* o traço da tela de carregamento depende da animação para existir: sem ela
     sobraria só o trilho cinza parado, então some de vez */
  .preloader__bar{ display:none; }
  /* sem preloader, sem parallax e sem pulso */
  html.js .hero__copy > *,html.js .hero__media{ opacity:1; transform:none; }
  .diffs__bg img{ transform:scale(1.14); }
  .wpp::after{ display:none; }
}

/* impressão */
@media print{
  .header,.topbar,.wpp,.totop,.slider__arrow,.slider__dots,.scroll-progress{ display:none !important; }
  body{ color:#000; }
  .hero,.contact,.diffs,.footer{ background:#fff !important; color:#000 !important; }
}