/* =========================================================================
   LIGGA MARKETING — folha única
   Reforma de 2026-09-06, conforme §11 do prompt-mestre.

   A folha anterior (75 KB) nasceu num site escuro e sobreviveu em apelidos:
   .sec--dark, .btn--gold, --navy-900 com valor claro dentro. Isso foi
   removido. Aqui o nome diz o que a coisa é.

   PALETA — decisão do Lucas em 2026-09-03, preservada:
     papel   #FFFFFF · superfície #F2F4F7 · linha #D8DDE5
     tinta   #0D1117 · secundária #59606B
     ação    #1447E6 (cobalto) · hover #0F35B8
     ouro    #D4A537 — só o ponto do logo, mais nada

   REGRAS QUE SUSTENTAM O SISTEMA:
   1. O ritmo vem da composição, não de alternar cinza e branco por seção.
   2. Nada depende de hover: no celular ele não existe.
   3. Nada nasce invisível esperando JavaScript.
   4. Movimento é transform e opacity. Nunca largura, altura ou top.
   ========================================================================= */

:root{
  /* ---------------- cor ---------------- */
  --papel:#FFFFFF;
  --superf:#F2F4F7;
  --superf-2:#E9EDF3;
  --tinta:#0D1117;
  --tinta-2:#59606B;
  --linha:#D8DDE5;
  --linha-forte:#C4CBD6;
  --acao:#1447E6;
  --acao-hover:#0F35B8;
  --acao-fraco:#EDF2FE;
  --ouro:#D4A537;

  /* ---------------- tipografia ---------------- */
  --f-display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --f-texto:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-h1:clamp(2.25rem,1.35rem + 3.9vw,4.5rem);   /* 36 -> 72 */
  --t-h2:clamp(1.75rem,1.2rem + 2.1vw,3rem);      /* 28 -> 48 */
  --t-h3:clamp(1.2rem,1.08rem + .45vw,1.45rem);
  --t-lead:clamp(1.06rem,1rem + .3vw,1.25rem);
  --t-corpo:clamp(1rem,.97rem + .18vw,1.125rem);  /* 16 -> 18 */
  --t-peq:.9375rem;
  --t-label:.8125rem;                              /* 13px */

  /* ---------------- espaço ---------------- */
  --wrap:1240px;
  --wrap-texto:760px;
  --margem:clamp(20px,4vw,48px);
  --sec-y:clamp(48px,6.2vw,104px);
  --gap:clamp(20px,2.4vw,32px);
  --cab-h:72px;

  /* ---------------- forma ---------------- */
  --r-btn:11px;
  --r-card:16px;
  --r-g:20px;
  --sombra:0 1px 2px rgba(13,17,23,.05),0 8px 24px -12px rgba(13,17,23,.14);
  --sombra-alta:0 24px 70px -28px rgba(13,17,23,.35);

  /* ---------------- movimento ---------------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.24s;
}

/* =========================================================== 1. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f-texto);font-size:var(--t-corpo);font-weight:400;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:var(--acao);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--acao-hover)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;margin:0;letter-spacing:-.022em}
h1{font-size:var(--t-h1);line-height:1.08}
h2{font-size:var(--t-h2);line-height:1.12}
h3{font-size:var(--t-h3);line-height:1.24;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--acao);outline-offset:2px;border-radius:4px}

.pular{
  position:absolute;left:12px;top:-60px;z-index:400;
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:8px;
  font-weight:600;text-decoration:none;transition:top .15s var(--ease);
}
.pular:focus{top:12px;color:#fff}

.visualmente-oculto{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* =========================================================== 2. layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--margem)}
.wrap--texto{max-width:calc(var(--wrap-texto) + var(--margem) * 2)}
.sec{padding-block:var(--sec-y)}
.sec--cinza{background:var(--superf)}
.sec--tinta{background:var(--tinta);color:#fff}
.sec--tinta h2,.sec--tinta h3{color:#fff}
.sec--tinta .lead,.sec--tinta p{color:rgba(255,255,255,.78)}
.sec--fecha{border-top:1px solid var(--linha)}
.sec--apertado{padding-block:clamp(36px,4vw,64px)}

.grade{display:grid;gap:var(--gap)}
.grade--2{grid-template-columns:repeat(2,1fr)}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--57{grid-template-columns:5fr 7fr;align-items:center;gap:clamp(28px,4vw,64px)}
.grade--75{grid-template-columns:7fr 5fr;align-items:center;gap:clamp(28px,4vw,64px)}
@media (max-width:900px){
  .grade--2,.grade--3,.grade--57,.grade--75{grid-template-columns:1fr}
}

/* =========================================================== 3. texto */
.label{
  font-family:var(--f-texto);font-size:var(--t-label);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--acao);
  margin:0 0 14px;
}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--tinta-2);margin-top:16px;max-width:62ch}
.cabec{max-width:56ch;margin-bottom:clamp(28px,3.2vw,48px)}
.cabec--largo{max-width:74ch}
.nota{
  font-size:var(--t-peq);color:var(--tinta-2);line-height:1.55;
  border-left:2px solid var(--linha);padding-left:16px;margin-top:24px;max-width:64ch;
}
.olho{
  display:inline-block;font-size:var(--t-label);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acao);background:var(--acao-fraco);
  border-radius:999px;padding:7px 14px;margin:0 0 20px;
}
.prosa p{margin-bottom:18px;max-width:70ch}
.prosa h2{margin:40px 0 14px}
.prosa h3{margin:28px 0 10px}
.prosa ul{list-style:disc;padding-left:22px;margin-bottom:18px;max-width:70ch}
.prosa li{margin-bottom:8px}

/* =========================================================== 4. botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--r-btn);
  background:var(--acao);color:#fff;border:1px solid var(--acao);
  font-weight:700;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn::after{
  content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);flex:0 0 auto;
}
.btn:hover,.btn:focus-visible{background:var(--acao-hover);border-color:var(--acao-hover);color:#fff}
.btn:hover::after,.btn:focus-visible::after{transform:rotate(45deg) translate(3px,-3px)}
.btn--fant{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
.btn--fant:hover,.btn--fant:focus-visible{background:var(--superf);color:var(--tinta);border-color:var(--tinta)}
.btn--txt{
  background:transparent;border-color:transparent;color:var(--acao);
  padding:0;min-height:44px;font-weight:700;
}
.btn--txt:hover,.btn--txt:focus-visible{background:transparent;color:var(--acao-hover)}
.btn--sm{min-height:44px;padding:0 18px;font-size:var(--t-peq)}
.btn-linha{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sec--tinta .btn--fant{color:#fff;border-color:rgba(255,255,255,.4)}
.sec--tinta .btn--fant:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* =========================================================== 5. cabeçalho */
.cab{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha);
}
.cab__in{display:flex;align-items:center;gap:clamp(12px,2vw,32px);min-height:var(--cab-h)}
/* min-height de 44px no logo, nas migalhas e nos links do rodapé: são links
   de lista, não links no meio de um parágrafo, então a exceção de alvo em
   linha do WCAG 2.5.8 não vale para eles. */
.logo{
  font-family:var(--f-display);font-weight:700;font-size:1.24rem;letter-spacing:-.03em;
  color:var(--tinta);text-decoration:none;display:inline-flex;align-items:center;gap:2px;
  flex:0 0 auto;min-height:44px;
}
.logo__ponto{width:6px;height:6px;border-radius:50%;background:var(--ouro);display:inline-block;margin-right:6px}
.logo__2{font-weight:700;color:var(--tinta-2);font-size:.82em}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>a,.drop>a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;
  border-radius:8px;color:var(--tinta);font-weight:600;font-size:var(--t-peq);
  text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav>a:hover,.drop>a:hover,.nav>a:focus-visible,.drop>a:focus-visible{background:var(--superf);color:var(--acao)}
.nav [aria-current="page"]{color:var(--acao);box-shadow:inset 0 -2px 0 var(--acao)}
.drop{position:relative}
.drop__seta{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.drop__painel{
  position:absolute;top:100%;left:-8px;width:340px;padding:8px;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r-card);
  box-shadow:var(--sombra-alta);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.drop:hover .drop__painel,.drop:focus-within .drop__painel{opacity:1;visibility:visible;transform:none}
.drop__painel a{
  display:block;padding:11px 14px;border-radius:10px;text-decoration:none;color:var(--tinta);
  transition:background var(--dur) var(--ease);
}
.drop__painel a:hover,.drop__painel a:focus-visible{background:var(--superf)}
.drop__painel strong{display:block;font-weight:700;font-size:var(--t-peq)}
.drop__painel small{display:block;color:var(--tinta-2);font-size:.8125rem;line-height:1.4;margin-top:2px}
.cab__cta{flex:0 0 auto}
.hamb{
  display:none;width:44px;height:44px;border:1px solid var(--linha-forte);
  border-radius:10px;background:#fff;cursor:pointer;position:relative;flex:0 0 auto;
}
.hamb__i,.hamb__i::before,.hamb__i::after{
  position:absolute;left:50%;width:18px;height:2px;background:var(--tinta);
  border-radius:2px;transform:translateX(-50%);transition:transform .2s var(--ease),opacity .2s;
}
.hamb__i{top:50%;margin-top:-1px}
.hamb__i::before{content:"";top:-6px;left:50%}
.hamb__i::after{content:"";top:6px;left:50%}
.hamb[aria-expanded="true"] .hamb__i{background:transparent}
.hamb[aria-expanded="true"] .hamb__i::before{transform:translateX(-50%) translateY(6px) rotate(45deg)}
.hamb[aria-expanded="true"] .hamb__i::after{transform:translateX(-50%) translateY(-6px) rotate(-45deg)}

.mnav{border-top:1px solid var(--linha);background:#fff;max-height:calc(100dvh - var(--cab-h));overflow-y:auto}
.mnav__in{padding-block:16px 28px}
.mnav__t{
  font-size:var(--t-label);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-2);margin:20px 0 6px;
}
.mnav__t:first-child{margin-top:4px}
.mnav a{
  display:flex;align-items:center;min-height:48px;color:var(--tinta);
  text-decoration:none;font-weight:600;border-bottom:1px solid var(--linha);
}
.mnav a:last-of-type{border-bottom:0}
.mnav__cta{margin-top:22px;justify-content:center;color:#fff;border-bottom:0}
.mnav__cta:hover{color:#fff}

@media (max-width:1020px){
  .nav{display:none}
  .cab__in{gap:12px}
  .cab__cta{margin-left:auto}
  .hamb{display:block}
}
@media (max-width:430px){
  .cab__cta{display:none}
  .logo{font-size:1.12rem}
}

/* =========================================================== 6. migalhas */
.migalhas{border-bottom:1px solid var(--linha);background:var(--papel)}
.migalhas ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:.8125rem;color:var(--tinta-2)}
.migalhas li{display:flex;align-items:center;gap:6px}
.migalhas li+li::before{content:"/";color:var(--linha-forte)}
.migalhas a,.migalhas span{display:inline-flex;align-items:center;min-height:40px;color:var(--tinta-2);text-decoration:none}
.migalhas a:hover{color:var(--acao);text-decoration:underline}

/* =========================================================== 7. hero da home */
.heroh{padding-block:clamp(40px,5vw,76px) clamp(48px,5vw,84px);border-bottom:1px solid var(--linha)}
.heroh__in{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,4vw,64px);align-items:center}
/* O h1 tinha 14ch e caía em seis linhas em 1440: a coluna da esquerda é
   metade de 1240, e 14ch a 72px não cabe nela. 20ch fecha em três. */
/* O h1 da home fecha em 60px, não em 72: a 72 ele ocupava cinco linhas na
   coluna da esquerda e empurrava o CTA para fora da primeira tela em
   1440x900 — que é justamente onde §11 pede o CTA visível cedo. */
.heroh h1{margin-top:18px;max-width:20ch;font-size:clamp(2.25rem,1.45rem + 2.8vw,3.75rem)}
.heroh .lead{max-width:46ch}
.heroh__micro{margin-top:20px;font-size:var(--t-peq);color:var(--tinta-2)}
.heroh__micro a{font-weight:700}
@media (max-width:940px){.heroh__in{grid-template-columns:1fr}}

/* --- o funil do hero: dois caminhos, quatro fases alinhadas ---
   Substitui `.caminho`, de 06/09, que desenhava um caminho só. A tese que a
   peça precisa passar em uma olhada é que existem DOIS: no Google a pessoa já
   procura e cai numa página; no Meta o anúncio cria o interesse e muitas
   vezes pula o site. As duas colunas ficam com as MESMAS quatro linhas para
   que a diferença apareça no alinhamento — o degrau tracejado do Meta é a
   coisa mais informativa do desenho e por isso não pode sumir.

   A largura decrescente das fases é o que faz isso parecer funil sem desenhar
   um funil: 100%, 94%, 88%, 82%. E a fase em destaque é só borda, fundo e um
   pixel de deslocamento — nada que mexa em largura ou altura, para o hero não
   reposicionar o texto ao lado enquanto a pessoa lê. */
.funil2{
  border:1px solid var(--linha);border-radius:var(--r-g);background:var(--superf);
  padding:clamp(14px,1.8vw,22px);box-shadow:var(--sombra);
}
.funil2__topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.funil2__ex{
  font-size:var(--t-label);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-2);
}
.funil2__ex b{color:var(--acao)}
.funil2__pts{display:flex;gap:5px;align-items:center}
.funil2__pt{
  width:6px;height:6px;border-radius:999px;background:var(--linha-forte);
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease);
}
.funil2__pt[data-atual]{width:16px;background:var(--acao)}
/* As duas colunas dividem AS MESMAS quatro linhas, via subgrid. Sem isso cada
   coluna mede a própria altura e as linhas se desencontram — e a comparação,
   que só existe no alinhamento, desmancha. Onde não houver subgrid o desenho
   continua de pé: as colunas voltam a medir sozinhas, com leve desencontro. */
.funil2__cols{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(4,auto);
  column-gap:clamp(10px,1.4vw,16px);row-gap:7px;
}
.funil2__col{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:7px}
.funil2__fases{display:contents}
.funil2__canal{
  display:flex;flex-direction:column;gap:1px;padding:0 0 10px;
  border-bottom:1px solid var(--linha);align-self:start;
}
.funil2__canal strong{font-family:var(--f-display);font-size:.9375rem;letter-spacing:-.01em}
.funil2__canal span{font-size:.75rem;color:var(--tinta-2);line-height:1.35}
.fase{
  width:100%;justify-self:center;background:#fff;border:1px solid var(--linha);border-radius:11px;
  padding:9px 11px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.fase[data-fase="1"]{width:95%}
.fase[data-fase="2"]{width:90%}
.fase[data-fase="3"]{width:85%}
.fase__r{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-2);margin-bottom:2px;
}
.fase__t{display:block;font-size:.8125rem;font-weight:600;line-height:1.3}
.fase--pula{background:transparent;border-style:dashed}
.fase--pula .fase__t{font-weight:400;color:var(--tinta-2)}
.fase[data-ativa]{
  border-color:var(--acao);background:var(--acao-fraco);
  box-shadow:0 8px 22px -14px rgba(20,71,230,.85);transform:translateY(-1px);
}
.fase[data-ativa] .fase__r{color:var(--acao)}
.fase--pula[data-ativa]{background:transparent;border-style:dashed;box-shadow:none}
.funil2__leg{margin-top:14px;font-size:.75rem;color:var(--tinta-2);line-height:1.5;text-align:center}
@media (max-width:420px){
  .funil2__cols{grid-template-columns:1fr;grid-template-rows:none;row-gap:7px}
  .funil2__col{grid-row:auto;grid-template-rows:none}
  .funil2__canal{margin-top:10px}
}

/* =========================================================== 8. hero de serviço */
.heros{padding-block:clamp(40px,4.6vw,76px) clamp(36px,4vw,64px);border-bottom:1px solid var(--linha)}
.heros__in{display:block}
.heros--comvisual .heros__in{
  display:grid;grid-template-columns:6fr 6fr;gap:clamp(28px,4vw,64px);align-items:center;
}
.heros h1{max-width:17ch}
.heros .lead{max-width:56ch}
@media (max-width:940px){.heros--comvisual .heros__in{grid-template-columns:1fr}}

/* =========================================================== 9. projetos */
.projs{display:grid;gap:clamp(28px,3.4vw,52px)}
.projs--2{grid-template-columns:1fr 1fr}
.projs--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.projs--2,.projs--3{grid-template-columns:1fr}}

.proj{display:flex}
/* O cartão inteiro é o link: no celular não existe alvo pequeno para acertar,
   e o leitor de tela anuncia um destino só em vez de três. */
.proj__link{
  display:flex;flex-direction:column;width:100%;text-decoration:none;color:var(--tinta);
  border:1px solid var(--linha);border-radius:var(--r-card);overflow:hidden;background:#fff;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.proj__link:hover,.proj__link:focus-visible{border-color:var(--acao);box-shadow:var(--sombra);color:var(--tinta)}
.proj__foto{display:block;overflow:hidden;background:var(--superf);border-bottom:1px solid var(--linha)}
.proj__foto img{width:100%;transition:transform .22s var(--ease)}
.proj__link:hover .proj__foto img{transform:scale(1.015)}
.proj__txt{display:block;padding:clamp(16px,1.8vw,22px)}
.proj__meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:var(--t-label);color:var(--tinta-2);font-weight:600;
}
.proj__selo{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.75rem;
  border:1px solid var(--linha-forte);color:var(--tinta-2);background:#fff;
}
.proj__selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.proj__selo--ar{color:var(--acao);border-color:var(--acao);background:var(--acao-fraco)}
.proj__n{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-h3);line-height:1.24;letter-spacing:-.012em;
}
.proj__d{display:block;margin-top:8px;color:var(--tinta-2);max-width:52ch;font-size:var(--t-peq)}
.proj__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:24px;
  color:var(--acao);font-weight:700;font-size:var(--t-peq);
}
.proj__ext{width:15px;height:15px;transition:transform var(--dur) var(--ease)}
.proj__link:hover .proj__ext{transform:translate(2px,-2px)}
.proj--g .proj__n{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem)}

/* =========================================================== 10. módulos de serviço */
.mods{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
.mods .mod--dest{grid-column:1 / -1}
/* Conteúdo é frente complementar (§7 H3): faixa larga e baixa, não um quinto
   cartão do mesmo tamanho dos outros. */
.mods .mod--faixa{
  grid-column:1 / -1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;
  align-items:center;gap:4px 40px;padding-block:clamp(20px,2vw,26px);
}
.mods .mod--faixa .mod__tag{grid-column:1;grid-row:1;margin:0}
.mods .mod--faixa h3{grid-column:1;grid-row:2;font-size:1.3rem}
.mods .mod--faixa p{grid-column:2;grid-row:1 / 3;align-self:center}
.mods .mod--faixa .mod__go{grid-column:3;grid-row:1 / 3;align-self:center;margin-top:0;white-space:nowrap}
@media (max-width:900px){
  .mods .mod--faixa{grid-template-columns:1fr;gap:0}
  .mods .mod--faixa .mod__tag,.mods .mod--faixa h3,
  .mods .mod--faixa p,.mods .mod--faixa .mod__go{grid-column:1;grid-row:auto}
  .mods .mod--faixa .mod__tag{margin-bottom:10px}
  .mods .mod--faixa h3{margin-bottom:10px}
  .mods .mod--faixa .mod__go{margin-top:18px}
}
@media (max-width:820px){.mods{grid-template-columns:1fr}}
.mod{
  border:1px solid var(--linha);border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px);
  background:#fff;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease);
}
.mod:hover{border-color:var(--linha-forte)}
.mod--dest{
  background:var(--superf);border-color:var(--linha);
  display:grid;grid-template-columns:auto 1fr;gap:6px 40px;align-items:start;
}
.mod--dest h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);grid-column:2;grid-row:1}
.mod--dest .mod__tag{grid-column:1;grid-row:1 / span 3;align-self:start}
.mod--dest p{grid-column:2}
.mod--dest .mod__go{grid-column:2}
@media (max-width:720px){
  .mod--dest{grid-template-columns:1fr}
  .mod--dest h3,.mod--dest p,.mod--dest .mod__go,.mod--dest .mod__tag{grid-column:1;grid-row:auto}
}
.mod__tag{
  font-size:var(--t-label);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acao);margin-bottom:10px;
}
.mod h3{margin-bottom:10px}
.mod p{color:var(--tinta-2);flex:1}
.mod__go{
  margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-weight:700;text-decoration:none;align-self:flex-start;min-height:44px;
}
.mod__go::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.mod__go:hover::after{transform:rotate(45deg) translate(3px,-3px)}

/* =========================================================== 11. a trilha */
/* Cinco etapas, com o ramo do visitante selecionável. Todas as combinações
   existem no HTML; o script só mostra e esconde. Sem JS o visitante vê o
   primeiro ramo com as cinco etapas empilhadas — mesma informação, sem
   interação.

   Redesenho de 07/09 (feedback 1), e o que ele corrige:

   1. **Os ramos ficaram no centro**, sem a faixa cinza que os jogava para a
      esquerda. A peça abre por uma escolha, não por um pedaço de interface.
   2. **A grade de cinco células virou trilha.** Cinco caixas encostadas têm
      cara de menu; círculos numerados ligados por um traço que se preenche
      têm cara de percurso — que é o que a seção está contando.
   3. **O painel alinha pelo topo.** Com `align-items:center` e duas linhas de
      texto contra uma figura alta, abria-se um vão branco no meio. O vão era
      falta de conteúdo: entrou o "porquê" de cada etapa. */
.trilha{
  border:1px solid var(--linha);border-radius:var(--r-g);background:#fff;
  overflow:hidden;box-shadow:var(--sombra);
}
.trilha__topo{
  padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,24px) clamp(18px,2vw,22px);
  text-align:center;background:var(--superf);border-bottom:1px solid var(--linha);
}
.trilha__rot{
  font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:14px;
}
.ramos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ramo{
  min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--linha-forte);
  background:#fff;font-weight:600;font-size:var(--t-peq);cursor:pointer;color:var(--tinta);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ramo:hover{border-color:var(--tinta)}
.ramo[aria-pressed="true"]{
  background:var(--acao);border-color:var(--acao);color:#fff;
  box-shadow:0 8px 20px -12px rgba(20,71,230,.9);
}
.ramo[aria-pressed="true"]:hover{background:var(--acao-hover);border-color:var(--acao-hover)}

/* --- os cinco nós, ligados --- */
.trilha__rail{
  --no-c:38px;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:clamp(22px,2.6vw,32px) clamp(10px,2vw,26px) clamp(16px,1.8vw,22px);
}
.no{
  position:relative;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:8px 4px 0;min-height:44px;text-align:center;
}
/* o traço entre um nó e o anterior: trilho cinza + preenchimento cobalto */
.no::before,.no::after{
  content:"";position:absolute;left:-50%;width:100%;height:2px;
  top:calc(8px + var(--no-c) / 2 - 1px);border-radius:2px;
}
.no::before{background:var(--linha)}
.no::after{background:var(--acao);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease)}
.no:first-child::before,.no:first-child::after{display:none}
.no[data-estado="passou"]::after,.no[data-estado="atual"]::after{transform:scaleX(1)}
/* enquanto anda sozinha, o traço do PRÓXIMO nó se enche no tempo da troca:
   é o único aviso de que algo vai mudar sem que nada se mexa de lugar */
.trilha--tocando .no[data-estado="atual"] + .no::after{
  transform:scaleX(1);transition:transform 3.6s linear;
}
.no__b{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:var(--no-c);height:var(--no-c);border-radius:50%;background:#fff;
  border:2px solid var(--linha-forte);color:var(--tinta-2);
  font-family:var(--f-display);font-weight:700;font-size:.9375rem;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.no[data-estado="passou"] .no__b{border-color:var(--acao);color:var(--acao);background:var(--acao-fraco)}
.no[data-estado="atual"] .no__b{
  border-color:var(--acao);background:var(--acao);color:#fff;transform:scale(1.1);
  box-shadow:0 0 0 6px var(--acao-fraco);
}
.no__t{
  font-family:var(--f-display);font-weight:700;font-size:.875rem;line-height:1.25;
  letter-spacing:-.01em;color:var(--tinta-2);
}
.no[data-estado="atual"] .no__t{color:var(--tinta)}
.no:hover .no__b{border-color:var(--acao)}
@media (max-width:560px){
  .trilha__rail{--no-c:32px;padding-inline:6px}
  .no__t{font-size:.75rem}
  .no{gap:7px}
}

.etapa__painel{
  padding:clamp(22px,2.6vw,36px);display:grid;grid-template-columns:5fr 7fr;
  gap:clamp(22px,3vw,44px);align-items:start;border-top:1px solid var(--linha);
}
.etapa__num{
  font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acao);margin-bottom:8px;
}
.etapa__d{color:var(--tinta-2);margin-top:10px;max-width:40ch}
.etapa__porque{
  margin-top:18px;padding-left:16px;border-left:2px solid var(--linha-forte);
  font-size:var(--t-peq);color:var(--tinta-2);line-height:1.55;max-width:44ch;
}
.etapa__figs{position:relative}
.etapa__fig{
  background:var(--superf);border:1px solid var(--linha);border-radius:var(--r-card);
  padding:clamp(16px,1.8vw,22px);
}
.etapa__nota{margin-top:14px;font-size:.8125rem;color:var(--tinta-2);line-height:1.5}
.mini__r{
  font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:10px;
}
@media (max-width:900px){.etapa__painel{grid-template-columns:1fr}}

/* --- etapa 1: o anúncio --- */
.anuncio{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:16px}
.anuncio__t{font-family:var(--f-display);font-weight:700;font-size:1.12rem;color:var(--acao);line-height:1.25}
.anuncio__d{font-size:var(--t-peq);color:var(--tinta-2);margin-top:6px;line-height:1.45}
.anuncio__u{font-size:.8125rem;color:var(--tinta-2);margin-top:10px;opacity:.75}

/* --- etapa 2: o site --- */
.janela{border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff}
.janela__barra{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--linha)}
.janela__pt{width:8px;height:8px;border-radius:50%;background:var(--linha-forte)}
.janela__url{
  margin-left:8px;font-size:.75rem;color:var(--tinta-2);background:var(--superf);
  border-radius:999px;padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.janela__in{padding:14px 16px}
.janela__t{font-family:var(--f-display);font-weight:700;font-size:1.05rem;margin-bottom:6px}

/* linha de ficha: rótulo à esquerda, valor à direita, separadas por uma linha.
   Usada dentro da janela do site e da ficha do CRM. */
.fig-linha{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--linha);font-size:var(--t-peq);
}
.fig-linha:last-child{border-bottom:0}
.fig-linha strong{font-weight:700}
.fig-linha span{margin-left:auto;color:var(--tinta-2);text-align:right}

/* --- etapa 4: a ficha do CRM --- */
.ficha{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px 16px}
.ficha__topo{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.ficha__av{
  width:34px;height:34px;border-radius:50%;background:var(--acao-fraco);color:var(--acao);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex:0 0 auto;
}
.ficha__n{font-weight:700;font-size:var(--t-peq)}
.ficha__o{font-size:.75rem;color:var(--tinta-2)}
.ficha__selo{
  margin-left:auto;background:var(--acao);color:#fff;border-radius:999px;padding:4px 12px;
  font-size:.75rem;font-weight:700;
}

/* --- etapa 5: o painel do mês --- */
/* o painel encosta na borda do cartão; a nota, não — ela é texto e precisa
   da mesma margem do resto */
.etapa__fig--larga{padding:0;background:transparent;border:0}
.etapa__fig--larga .painel-med{border:1px solid var(--linha);overflow:hidden}
.etapa__fig--larga .etapa__nota{padding-inline:2px}
.painel-med{background:#fff;border-radius:var(--r-card)}
.painel-med__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--linha);
}
.painel-med__top .mini__r{margin:0}
.painel-med__p{font-size:.8125rem;color:var(--tinta-2)}
.funil{padding:16px 20px 6px;display:grid;gap:12px}
.funil__l{display:grid;grid-template-columns:minmax(96px,1.1fr) 2fr auto;gap:12px;align-items:center}
.funil__rot{font-size:var(--t-peq);color:var(--tinta-2)}
.funil__barra{display:block;height:12px;border-radius:999px;background:var(--superf);overflow:hidden}
/* a largura vem no atributo style, escrita pelo gerador: o funil tem forma
   mesmo sem JavaScript, e a forma é a informação */
.funil__barra i{display:block;height:100%;border-radius:999px;background:var(--acao)}
.funil__v{font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-align:right;min-width:52px}
.inds{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linha)}
.ind{padding:14px 20px;border-right:1px solid var(--linha)}
.ind:last-child{border-right:0}
.ind__r{display:block;font-size:.75rem;color:var(--tinta-2);margin-bottom:4px}
.ind__v{display:block;font-family:var(--f-display);font-weight:700;font-size:1.1rem}
@media (max-width:640px){
  .funil__l{grid-template-columns:1fr auto;gap:4px 12px}
  .funil__barra{grid-column:1 / -1}
  .inds{grid-template-columns:1fr}
  .ind{border-right:0;border-bottom:1px solid var(--linha)}
  .ind:last-child{border-bottom:0}
}

.trilha__ctrl{display:flex;gap:10px;padding:0 clamp(22px,2.6vw,36px) clamp(20px,2.4vw,30px)}

/* =========================================================== 11b. carrossel */
/* Um serviço na frente, os outros atrás em vidro. Sem JS o palco vira uma
   faixa que rola de lado, com os quatro cartões legíveis — nada depende do
   efeito para a informação existir. */
/* O palco corta a cauda dos vizinhos. Isso NÃO esconde informação: o cartão
   de trás é prévia decorativa, e os quatro serviços continuam alcançáveis
   pelas setas, pelos pontos, pelo teclado e — sem JS — pela faixa que rola.
   Sem o corte, a inclinação empurrava os vizinhos para fora do contêiner e a
   página inteira ganhava barra horizontal em 720px. */
.carro{position:relative}
.js .carro{overflow-x:clip}
.carro__palco{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;-webkit-overflow-scrolling:touch;
}
.carro__s{
  flex:0 0 min(86%,540px);scroll-snap-align:center;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r-g);
  padding:clamp(24px,3vw,40px);
}
.js .carro__palco{
  display:block;position:relative;overflow:visible;padding:0;
  height:clamp(340px,34vw,390px);perspective:1400px;
}
.js .carro__s{
  position:absolute;left:0;right:0;top:0;margin-inline:auto;width:min(78%,560px);
  transform-origin:50% 50%;
  transition:transform .45s var(--ease),opacity .45s var(--ease),filter .45s var(--ease);
  will-change:transform,opacity;
}
/* data-d é a distância até o slide da frente, escrita pelo script: o CSS não
   faz módulo de índice, então quem calcula é o JS e aqui só se desenha */
.js .carro__s[data-d="0"]{
  transform:translateX(0) rotateY(0) scale(1);opacity:1;filter:none;z-index:3;
  box-shadow:var(--sombra-alta);
}
.js .carro__s[data-d="1"]{
  transform:translateX(46%) rotateY(-16deg) scale(.84);opacity:.5;
  filter:saturate(.45) blur(2.5px);z-index:2;
}
.js .carro__s[data-d="-1"]{
  transform:translateX(-46%) rotateY(16deg) scale(.84);opacity:.5;
  filter:saturate(.45) blur(2.5px);z-index:2;
}
.js .carro__s[data-d="2"]{
  transform:translateX(74%) rotateY(-22deg) scale(.7);opacity:.28;
  filter:saturate(.25) blur(4px);z-index:1;
}
.js .carro__s[data-d="-2"]{
  transform:translateX(-74%) rotateY(22deg) scale(.7);opacity:.28;
  filter:saturate(.25) blur(4px);z-index:1;
}
.js .carro__s:not([data-d="0"]){pointer-events:none}
.carro__tag{
  font-size:var(--t-label);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acao);margin-bottom:12px;
}
.carro__t{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.1rem);margin-bottom:12px}
.carro__d{color:var(--tinta-2);max-width:46ch}
.carro__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;min-height:44px;
  font-weight:700;text-decoration:none;
}
.carro__go::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.carro__go:hover::after{transform:rotate(45deg) translate(3px,-3px)}
.carro__ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px}
.carro__b{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--linha-forte);
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.carro__b svg{width:20px;height:20px}
.carro__b:hover{border-color:var(--acao);color:var(--acao)}
.carro__pontos{display:flex;gap:8px;align-items:center}
.carro__p{
  width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.carro__p::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--linha-forte);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.carro__p[aria-current="true"]::before{background:var(--acao);transform:scale(1.4)}
@media (prefers-reduced-motion:reduce){
  .js .carro__palco{perspective:none}
  .js .carro__s[data-d="1"],.js .carro__s[data-d="-1"],
  .js .carro__s[data-d="2"],.js .carro__s[data-d="-2"]{transform:none;opacity:0;visibility:hidden}
}

/* =========================================================== 11c. o fechamento com formulário */
.fecha__form{min-width:0}
.fecha__ou{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.fecha__ou span{font-size:var(--t-peq);color:var(--tinta-2)}
.btn-linha--fecha{margin-top:0}

/* =========================================================== 11d. "meu ramo não está aí" */
.outro{
  margin-top:var(--gap);border:1px dashed var(--linha-forte);border-radius:var(--r-card);
  background:#fff;
}
.outro summary{
  display:block;padding:clamp(18px,2vw,24px);cursor:pointer;list-style:none;min-height:44px;
}
.outro summary::-webkit-details-marker{display:none}
.outro__t{
  display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;
  font-size:1.15rem;letter-spacing:-.012em;
}
.outro__t::after{
  content:"";width:10px;height:10px;border-right:2px solid var(--acao);
  border-bottom:2px solid var(--acao);transform:rotate(45deg) translateY(-3px);
  transition:transform .18s var(--ease);
}
.outro[open] .outro__t::after{transform:rotate(-135deg) translateY(-3px)}
.outro__d{display:block;margin-top:6px;color:var(--tinta-2);font-size:var(--t-peq);max-width:60ch}
.outro__in{
  padding:0 clamp(18px,2vw,24px) clamp(20px,2.2vw,26px);display:grid;gap:14px;max-width:520px;
}
.outro__b{width:100%}
.outro__nota{font-size:.8125rem;color:var(--tinta-2);line-height:1.5}
.outro__nota[data-outro-erro]:empty{display:none}
.outro__nota[data-outro-erro]{color:#B42318;font-weight:600}

/* =========================================================== 11e. aviso de página em montagem */
.aviso{
  border-left:3px solid var(--acao);background:var(--acao-fraco);border-radius:0 12px 12px 0;
  padding:16px 20px;font-size:var(--t-peq);color:var(--tinta);max-width:70ch;
  margin-bottom:clamp(28px,3vw,44px);
}

/* =========================================================== 12. conversa demonstrativa */
.conversa{border:1px solid var(--linha);border-radius:var(--r-card);background:#fff;padding:clamp(16px,2vw,24px)}
.conversa__top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--linha);margin-bottom:16px}
.conversa__av{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;background:var(--acao-fraco);color:var(--acao);
  font-weight:700;font-size:.8125rem;
}
.conversa__q{font-weight:700;font-size:var(--t-peq)}
.conversa__m{font-size:.8125rem;color:var(--tinta-2)}
.bolha{
  max-width:min(82%,460px);padding:11px 14px;font-size:var(--t-peq);line-height:1.45;
  margin-bottom:10px;
}
.bolha time{display:block;font-size:.75rem;color:var(--tinta-2);margin-top:5px}
.bolha--ele{background:var(--superf);border-radius:14px 14px 14px 3px}
.bolha--nos{background:var(--acao-fraco);margin-left:auto;border-radius:14px 14px 3px 14px}
.passagem{border-top:1px solid var(--linha);margin-top:14px;padding-top:14px}
.passagem h3{font-size:var(--t-label);font-family:var(--f-texto);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:10px}
.passagem dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--t-peq);margin:0}
.passagem dt{color:var(--tinta-2)}
.passagem dd{margin:0;font-weight:600}

/* --- as seis conversas que trocam sozinhas (home, 07/09) ---
   O fio tem altura mínima e empilha de baixo para cima, como conversa de
   verdade: sem isso a caixa cresceria a cada bolha e empurraria a página
   enquanto a pessoa lê a coluna ao lado. */
.conversa--rot{display:flex;flex-direction:column}
/* Altura FIXA, não mínima, e preenchendo de cima para baixo.
   Com min-height a caixa crescia a cada bolha, a linha do grid crescia junto
   e a coluna de texto ao lado se reposicionava enquanto a pessoa lia. E
   ancorar embaixo, que é o que um chat faz, deixava a caixa quase vazia no
   primeiro segundo — com a única mensagem colada no rodapé e um vão branco em
   cima, que parece componente quebrado, não conversa começando.
   Enchendo de cima, cada frame se explica: a conversa começou e está andando.
   Passando da altura, o script rola para o fim e a máscara de baixo mostra
   que ainda tem coisa vindo. */
.conv__fio{
  display:flex;flex-direction:column;justify-content:flex-start;
  height:clamp(300px,33vw,372px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px,
    #000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22px,
    #000 calc(100% - 26px),transparent 100%);
}
/* A ficha de passagem NÃO entra por animação: reservar o espaço dela vazio
   abria um buraco branco de 200px, e deixá-la crescer no fim empurrava a
   página a cada troca. Ela fica sempre visível e troca de conteúdo junto com
   a conversa. */
.conversa--rot .passagem{min-height:196px}
.digitando{
  display:inline-flex;align-items:center;gap:5px;width:max-content;margin-left:auto;
  background:var(--acao-fraco);border-radius:14px 14px 3px 14px;padding:14px 16px;
  margin-bottom:10px;
}
.digitando i{width:7px;height:7px;border-radius:50%;background:var(--acao);opacity:.35}
.digitando i{animation:pisca 1.15s infinite}
.digitando i:nth-child(2){animation-delay:.18s}
.digitando i:nth-child(3){animation-delay:.36s}
@keyframes pisca{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.passagem{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.passagem[data-off]{opacity:0;transform:translateY(8px)}
.passagem__ate{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--linha);
  font-size:.8125rem;color:var(--tinta-2);line-height:1.5;
}
.passagem__ate strong{color:var(--tinta);font-weight:700}
.conv__rodape{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--linha);
}
.conv__pts{display:flex;gap:5px;align-items:center}
.conv__pt{
  width:6px;height:6px;border-radius:999px;background:var(--linha-forte);
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease);
}
.conv__pt[data-atual]{width:18px;background:var(--acao)}
.conv__nota{font-size:.75rem;color:var(--tinta-2)}

/* =========================================================== 13. CRM demonstrativo */
.crmd{border:1px solid var(--linha);border-radius:var(--r-g);background:var(--superf);padding:clamp(14px,1.8vw,22px)}
.crmd__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.crmd__col{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:12px;min-height:170px}
.crmd__ct{
  font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-2);display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.crmd__num{background:var(--superf);border-radius:999px;padding:2px 8px;font-size:.75rem}
.crmd__card{
  background:#fff;border:1px solid var(--linha);border-radius:10px;padding:11px 12px;margin-bottom:8px;
  font-size:var(--t-peq);transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease);
}
.crmd__card strong{display:block;font-weight:700}
.crmd__card span{color:var(--tinta-2);font-size:.8125rem}
.crmd__card--vivo{border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fraco)}
.crmd__ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.crmd__b{
  min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--linha-forte);
  background:#fff;font-weight:600;font-size:var(--t-peq);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.crmd__b[aria-pressed="true"]{background:var(--acao);border-color:var(--acao);color:#fff}
.crmd__b:hover{border-color:var(--tinta)}
.crmd__b[aria-pressed="true"]:hover{border-color:var(--acao-hover);background:var(--acao-hover)}
@media (max-width:700px){.crmd__cols{grid-template-columns:1fr}.crmd__col{min-height:0}}

/* =========================================================== 14. alternador desktop/celular */
.disp{border:1px solid var(--linha);border-radius:var(--r-g);background:var(--superf);padding:clamp(14px,1.8vw,22px)}
.disp__ctrl{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:4px;margin-bottom:16px}
.disp__b{
  min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;
  font-weight:700;font-size:var(--t-peq);cursor:pointer;color:var(--tinta-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.disp__b[aria-pressed="true"]{background:var(--acao);color:#fff}
/* A troca de vista acontece por clique: a mudança de altura é resposta a uma
   ação do visitante, não um salto de layout inesperado. */
.disp__palco{display:flex;justify-content:center;align-items:flex-start}
.disp__quadro{
  border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff;width:100%;
}
.disp__quadro img{width:100%;height:auto;display:block}
.disp__quadro--cel{
  width:auto;max-width:290px;border-radius:28px;border:9px solid var(--tinta);
  box-shadow:var(--sombra);
}
.disp__leg{margin-top:14px;font-size:.8125rem;color:var(--tinta-2);text-align:center}

/* =========================================================== 15. listas e passos */
.passos{counter-reset:p;display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr)}
.passos--simples{grid-template-columns:repeat(3,1fr)}
.passos li{
  counter-increment:p;padding-top:20px;border-top:2px solid var(--linha);position:relative;
}
.passos li::before{
  content:counter(p);position:absolute;top:-15px;left:0;background:var(--papel);
  padding-right:10px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--acao);
}
.sec--cinza .passos li::before{background:var(--superf)}
.passos--simples li::before{content:""}
.passos h3{margin-bottom:8px}
.passos p{color:var(--tinta-2);font-size:var(--t-peq)}
@media (max-width:900px){.passos,.passos--simples{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.passos,.passos--simples{grid-template-columns:1fr}}

.lmarc{display:grid;gap:2px;max-width:74ch}
.lmarc li{
  padding:15px 0 15px 30px;border-bottom:1px solid var(--linha);position:relative;color:var(--tinta-2);
}
.lmarc li::before{
  content:"";position:absolute;left:2px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--acao);border-bottom:2px solid var(--acao);transform:rotate(45deg) translateY(-3px);
}
.lmarc li:last-child{border-bottom:0}

.lico{display:grid;gap:2px}
.lico li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--linha)}
.lico li:last-child{border-bottom:0}
.lico__i{color:var(--acao);flex:0 0 auto}
.lico h3{font-size:1.05rem;margin-bottom:4px}
.lico p{color:var(--tinta-2);font-size:var(--t-peq)}
@media (min-width:820px){.lico{grid-template-columns:1fr 1fr;column-gap:48px}}

/* =========================================================== 16. escopo e tabela */
.escopo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:760px){.escopo{grid-template-columns:1fr}}
.escopo__c{border:1px solid var(--linha);border-radius:var(--r-card);padding:clamp(20px,2.2vw,28px);background:#fff}
.escopo__c h3{font-size:1.05rem;margin-bottom:14px}
.escopo__c li{padding:9px 0 9px 26px;position:relative;color:var(--tinta-2);font-size:var(--t-peq);line-height:1.5}
.escopo__c--sim li::before{
  content:"";position:absolute;left:1px;top:16px;width:11px;height:6px;
  border-left:2px solid var(--acao);border-bottom:2px solid var(--acao);transform:rotate(-45deg);
}
.escopo__c--nao li::before{
  content:"";position:absolute;left:2px;top:19px;width:11px;height:2px;background:var(--linha-forte);
}

.tabwrap{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--r-card)}
.tab{min-width:520px;background:#fff}
.tab th,.tab td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--linha);font-size:var(--t-peq)}
.tab th{font-weight:700;background:var(--superf);font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-2)}
.tab tr:last-child td{border-bottom:0}
.tab td{color:var(--tinta-2)}

/* =========================================================== 17. FAQ */
.faq{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  display:flex;align-items:center;gap:16px;padding:20px 0;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:-.012em;
  list-style:none;min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary::after{
  content:"";width:11px;height:11px;flex:0 0 auto;
  border-right:2px solid var(--acao);border-bottom:2px solid var(--acao);
  transform:rotate(45deg) translateY(-3px);transition:transform .18s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq__r{padding-bottom:22px}
.faq__r p{color:var(--tinta-2);max-width:70ch}

/* =========================================================== 18. fechamento */
/* start, não center: com o formulário do lado, centralizar deixava um vazio
   de 200px acima do título — o texto tem que começar onde a seção começa */
.fecha{display:grid;grid-template-columns:6fr 5fr;gap:clamp(24px,3vw,64px);align-items:start}
.fecha h2{margin-top:4px}
.fecha .btn-linha{margin-top:0;justify-content:flex-start}
@media (max-width:860px){.fecha{grid-template-columns:1fr}}

/* =========================================================== 19. formulário */
.form{display:grid;gap:16px;background:#fff;border:1px solid var(--linha);border-radius:var(--r-g);padding:clamp(22px,2.6vw,34px)}
.form h2{margin-bottom:4px}
.form--compacto{padding:clamp(18px,2vw,26px)}
.campo{display:grid;gap:7px}
.campo label{font-weight:700;font-size:var(--t-peq)}
.campo__op{font-weight:400;color:var(--tinta-2)}
.campo input,.campo select{
  min-height:50px;border:1px solid var(--linha-forte);border-radius:10px;padding:0 14px;
  font:inherit;font-size:1rem;background:#fff;color:var(--tinta);width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.campo select{appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2359606B' stroke-width='1.6' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fraco)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:#B42318}
/* --- o campo de várias escolhas (07/09) ---
   É um <details> com caixas dentro. A escolha do elemento nativo não é
   preguiça: ele abre, fecha e marca sem uma linha de JavaScript, e o campo
   continua utilizável se o script não carregar. O <input> real fica
   transparente cobrindo a linha inteira — assim o alvo de toque é a linha de
   44px, não o quadradinho de 13px que o sistema desenha. */
.campo__rot{font-weight:700;font-size:var(--t-peq)}
.multi{
  border:1px solid var(--linha-forte);border-radius:10px;background:#fff;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.multi[open]{border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fraco)}
.multi__b{
  list-style:none;cursor:pointer;min-height:50px;display:flex;align-items:center;
  gap:10px;padding:0 14px;font-size:1rem;color:var(--tinta-2);
}
.multi__b::-webkit-details-marker{display:none}
.multi__b::after{
  content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid var(--tinta-2);border-bottom:2px solid var(--tinta-2);
  transform:translateY(-3px) rotate(45deg);transition:transform var(--dur) var(--ease);
}
.multi[open] .multi__b::after{transform:translateY(1px) rotate(-135deg)}
.multi[data-tem="1"] .multi__b{color:var(--tinta);font-weight:600}
.multi__lista{border-top:1px solid var(--linha);padding:6px}
.multi__op{
  position:relative;display:flex;align-items:center;min-height:44px;padding:0 10px;
  border-radius:9px;cursor:pointer;font-size:var(--t-peq);font-weight:400;
}
.multi__op:hover{background:var(--superf)}
.multi__op input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.multi__op span{display:flex;align-items:center;gap:11px}
.multi__op span::before{
  content:"";flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:#fff;
  border:1.5px solid var(--linha-forte);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.multi__op input:checked + span::before{
  background:var(--acao);border-color:var(--acao);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px;
}
.multi__op input:focus-visible + span::before{outline:3px solid var(--acao);outline-offset:2px}
.multi__op input:checked + span{font-weight:600}
.erro{color:#B42318;font-size:.8125rem;font-weight:600}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__btn{width:100%;margin-top:4px}
.form__status{font-size:var(--t-peq);font-weight:600;min-height:1.4em}
.form__status[data-tipo="erro"]{color:#B42318}
.form__status[data-tipo="ok"]{color:var(--acao)}
.form__modo,.form__priv,.form__alt{font-size:.8125rem;color:var(--tinta-2);line-height:1.5}

/* =========================================================== 20. segmentos */
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:900px){.segs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.segs{grid-template-columns:1fr}}
.seg{
  display:block;border:1px solid var(--linha);border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);background:#fff;text-decoration:none;color:var(--tinta);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.seg:hover,.seg:focus-visible{border-color:var(--acao);background:var(--acao-fraco);color:var(--tinta)}
.seg h3{margin-bottom:6px}
.seg p{color:var(--tinta-2);font-size:var(--t-peq)}
.seg__go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--acao);font-weight:700;font-size:var(--t-peq)}
.seg__go::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.seg:hover .seg__go::after{transform:rotate(45deg) translate(3px,-3px)}

/* =========================================================== 21. jornada em linha */
.jornada{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--linha);border-radius:var(--r-card);overflow:hidden;background:#fff}
.jornada li{padding:clamp(18px,2vw,26px);border-right:1px solid var(--linha);position:relative}
.jornada li:last-child{border-right:0}
.jornada h3{font-size:1rem;margin-bottom:6px}
.jornada p{font-size:var(--t-peq);color:var(--tinta-2)}
.jornada__n{font-size:var(--t-label);font-weight:700;color:var(--acao);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
@media (max-width:900px){
  .jornada{grid-template-columns:1fr 1fr}
  .jornada li{border-bottom:1px solid var(--linha)}
  .jornada li:nth-child(2n){border-right:0}
  .jornada li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:520px){
  .jornada{grid-template-columns:1fr}
  .jornada li{border-right:0;border-bottom:1px solid var(--linha)}
  .jornada li:last-child{border-bottom:0}
}

/* =========================================================== 22. faixa de prova / números */
.faixa{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:var(--t-peq);color:var(--tinta-2);font-weight:600}
.faixa span{display:inline-flex;align-items:center;gap:10px}
.faixa span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--linha-forte)}

.demo-selo{
  display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--linha-forte);
  border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-2);background:#fff;margin-bottom:16px;
}

/* relatório demonstrativo */
.rel{border:1px solid var(--linha);border-radius:var(--r-g);background:#fff;overflow:hidden}
.rel__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linha);background:var(--superf);flex-wrap:wrap}
.rel__t{font-family:var(--f-display);font-weight:700;font-size:1rem}
.rel__p{font-size:.8125rem;color:var(--tinta-2)}
.rel__linhas{padding:6px 18px 18px}
.rel__l{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--linha)}
.rel__l:last-child{border-bottom:0}
.rel__rot{font-size:var(--t-peq);color:var(--tinta-2)}
.rel__v{font-family:var(--f-display);font-weight:700;font-size:1.3rem}
.rel__pe{padding:14px 18px;border-top:1px solid var(--linha);background:var(--superf);font-size:.8125rem;color:var(--tinta-2)}

/* =========================================================== 23. rodapé */
.rod{background:var(--superf);border-top:1px solid var(--linha);padding-block:clamp(40px,4.4vw,72px) 28px;margin-top:0}
.rod__grade{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
@media (max-width:940px){.rod__grade{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rod__grade{grid-template-columns:1fr}}
.rod__sobre{margin-top:14px;color:var(--tinta-2);font-size:var(--t-peq);max-width:40ch}
.rod__slogan{margin-top:10px;font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.rod__fala{margin-top:14px;display:grid;font-size:var(--t-peq)}
.rod__fala a{display:flex;align-items:center;min-height:40px;color:var(--tinta);text-decoration:none;font-weight:600}
.rod__fala a:hover{color:var(--acao);text-decoration:underline}
.rod__h{font-size:var(--t-label);font-family:var(--f-texto);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:14px}
.rod__grade ul{display:grid;font-size:var(--t-peq)}
.rod__grade ul a{display:flex;align-items:center;min-height:40px;color:var(--tinta-2);text-decoration:none}
.rod__grade ul a:hover{color:var(--acao);text-decoration:underline}
.rod__legal{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin-top:clamp(32px,3.4vw,52px);padding-top:20px;border-top:1px solid var(--linha);
  font-size:.8125rem;color:var(--tinta-2);
}
.rod__legal a{display:inline-flex;align-items:center;min-height:40px;color:var(--tinta-2)}

.wa-flut{
  position:fixed;right:18px;bottom:18px;z-index:150;width:54px;height:54px;border-radius:50%;
  background:#128C7E;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(13,17,23,.4);transition:background var(--dur) var(--ease);
}
.wa-flut:hover{background:#0e6f64}
.wa-flut svg{width:27px;height:27px;fill:#fff}
/* O flutuante não pode cobrir o botão do formulário nem o CTA do rodapé:
   nas telas estreitas ele sobe e o rodapé abre espaço embaixo. */
@media (max-width:640px){.wa-flut{width:50px;height:50px;right:14px;bottom:14px}.rod{padding-bottom:76px}}

/* =========================================================== 24. revelação */
/* O conteúdo nasce VISÍVEL. A classe .rv só é aplicada por JS, e só quando o
   visitante não pediu menos movimento. Sem JS, nada some. */
.js .rv[data-rv]{opacity:0;transform:translateY(14px)}
.js .rv[data-rv].vis{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* =========================================================== 25. movimento reduzido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .rv[data-rv]{opacity:1;transform:none}
  .proj__abre:hover img{transform:none}
  .btn:hover::after{transform:rotate(45deg)}
}

/* =========================================================== 26. impressão */
@media print{
  .cab,.rod,.wa-flut,.pular,.migalhas,.carro__ctrl{display:none!important}
  body{font-size:11pt}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}