:root{
  --cal:#e7e5df;
  --folha:#f7f6f3;
  --grafite:#262522;
  --azul:#1560bd;
  --azul-fundo:#0e2e52;
  --ocre:#b87a12;

  --tinta:var(--grafite);
  --tinta-fraca:#5d5a53;
  --traco:#cfcbc0;

  --fonte:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --rail:170px;
  --gut:48px;
  --max:1280px;
  --larg:1240px;
  --pad:28px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cal);
  color:var(--tinta);
  font-family:var(--fonte);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--azul);outline-offset:3px}

.d1{
  font-variation-settings:'wdth' 125,'wght' 700;
  font-size:clamp(33px,4.5vw,58px);
  line-height:1.05;
  letter-spacing:-0.022em;
}
.d2{
  font-variation-settings:'wdth' 114,'wght' 700;
  font-size:clamp(24px,2.7vw,33px);
  line-height:1.14;
  letter-spacing:-0.014em;
}
.faixa--respira .d2{
  font-variation-settings:'wdth' 118,'wght' 700;
  font-size:clamp(30px,4vw,46px);
  line-height:1.08;
  letter-spacing:-0.018em;
}
.d3{
  font-variation-settings:'wdth' 112,'wght' 600;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-0.01em;
}
@media (max-width:620px){
  .d1{font-variation-settings:'wdth' 102,'wght' 700}
  .d2{font-variation-settings:'wdth' 104,'wght' 700}
}

/* densidade alternada: nenhuma seção repete o fôlego da anterior */
.faixa{padding:78px 0;position:relative}
.faixa--respira{padding:124px 0}
.faixa--densa{padding:64px 0}
.faixa--folha{background:var(--folha)}
.faixa--grafite{background:var(--grafite);color:var(--cal)}
.faixa--azul{background:var(--azul-fundo);color:#eef3f9}
.env{max-width:var(--larg);margin:0 auto;padding-inline:var(--pad)}

.bloco{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.c1-4{grid-column:1 / span 4}
.c1-5{grid-column:1 / span 5}
.c1-6{grid-column:1 / span 6}
.c1-7{grid-column:1 / span 7}
.c1-12{grid-column:1 / span 12}
.c5-12{grid-column:5 / span 8}
.c7-11{grid-column:7 / span 5}
.c7-12{grid-column:7 / span 6}
.c9-12{grid-column:9 / span 4}

.trilho{
  grid-column:1 / span 12;
  display:flex;align-items:center;gap:9px;
  padding-top:13px;
  margin:0 0 30px;
  border-top:2px solid var(--grafite);
  font-size:12.5px;
  font-variation-settings:'wdth' 104,'wght' 700;
  color:var(--azul);
}
.trilho::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.faixa--grafite .trilho{color:#8fb4dd;border-top-color:#4f4c45}
.faixa--azul .trilho{color:#8fb4dd;border-top-color:#2d5178}
@media (max-width:840px){
  .bloco{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-12,.c5-12,.c7-11,.c7-12,.c9-12,.trilho{grid-column:1 / -1}
  .texto--par{align-self:auto;padding-bottom:0;margin-top:16px}
  .faixa,.faixa--respira,.faixa--densa{padding:62px 0}
}

.texto{max-width:56ch;font-size:17px;color:var(--tinta-fraca);margin-top:20px}
.texto--par{margin-top:0;align-self:end;padding-bottom:7px}
.faixa--grafite .texto{color:#b6b2a8}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(231,229,223,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--traco);
}
.topo::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--azul)}
.mov .topo::after{width:var(--lido,0%)}
.topo-int{
  max-width:var(--larg);margin:0 auto;padding:13px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{height:27px;width:auto;display:block}
.marca b{
  font-variation-settings:'wdth' 118,'wght' 700;
  font-size:17px;letter-spacing:-0.012em;font-weight:700;
}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:14.5px;text-decoration:none;color:var(--tinta-fraca);padding-bottom:2px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--grafite);border-bottom-color:var(--azul)}
@media (max-width:880px){.menu a:not(.elo){display:none}}
@media (max-width:560px){
  :root{--pad:20px}
  .topo-int{padding:10px var(--pad);gap:12px}
  .marca img{height:24px}
  .marca b{font-size:15px;white-space:nowrap}
  --pad:20px;
}
/* ---------- convites: fim de trilha, não retângulo ---------- */
/* a trilha sai do texto e termina num nó, igual aos ramos do diagrama */
.elo,.convite{--tom:var(--azul)}
.faixa--azul .elo,.faixa--azul .convite{--tom:#fff;color:#fff}

.elo{
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  text-decoration:none;color:var(--tom);
  font-size:15px;font-variation-settings:'wdth' 106,'wght' 600;
  padding:4px 0;
}
.elo::after{
  content:"";flex:none;width:26px;height:10px;
  background:
    linear-gradient(var(--tom),var(--tom)) left center / calc(100% - 10px) 2px no-repeat,
    radial-gradient(circle 5px at calc(100% - 5px) center, var(--tom) 99%, transparent 100%);
  transition:width .24s cubic-bezier(.2,.75,.2,1);
}
.elo:hover::after{width:38px}

.convite{
  display:inline-flex;align-items:center;gap:18px;
  text-decoration:none;color:var(--tom);
  font-size:clamp(17px,1.9vw,21px);
  font-variation-settings:'wdth' 112,'wght' 700;
  letter-spacing:-0.01em;line-height:1.25;padding:6px 0;
}
.convite::after{
  content:"";flex:none;width:62px;height:16px;
  background:
    linear-gradient(var(--tom),var(--tom)) left center / calc(100% - 16px) 3px no-repeat,
    radial-gradient(circle 8px at calc(100% - 8px) center, var(--tom) 99%, transparent 100%);
  transition:width .26s cubic-bezier(.2,.75,.2,1);
}
.convite:hover::after{width:86px}
@media (max-width:520px){
  .convite{gap:14px}
  .convite::after{width:42px}
}

.ligacao{
  font-size:15.5px;color:var(--tinta-fraca);text-decoration:none;
  border-bottom:1px solid var(--traco);padding-bottom:2px;
}
.ligacao:hover{color:var(--grafite);border-bottom-color:var(--azul)}
.cta-curto{display:none}
@media (max-width:560px){
  .cta-longo{display:none}
  .cta-curto{display:inline}
}

/* ---------- herói ---------- */
.heroi{padding:74px 0 88px}
.heroi-grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.heroi h1{max-width:18ch}
.heroi .lead{margin-top:26px;font-size:18.5px;line-height:1.56;max-width:52ch;color:#46433d}
.acoes{margin-top:36px;display:flex;align-items:center;gap:16px 30px;flex-wrap:wrap}
.figura{margin:0}
.figura svg{width:100%;height:auto;display:block}
.figura figcaption{margin-top:14px;font-size:13px;color:var(--tinta-fraca);max-width:44ch}
@media (max-width:700px){
  .figura{margin-inline:calc(-1 * var(--pad))}
  .figura figcaption{margin-inline:var(--pad)}
}
@media (max-width:900px){
  .heroi-grade{grid-template-columns:minmax(0,1fr);gap:44px}
  .heroi{padding:52px 0 64px}
}

/* desenho das trilhas */
.rota{fill:none;stroke:var(--azul);stroke-width:2.6;stroke-linecap:round}
.rotulo{font-family:var(--fonte);font-size:15px;fill:var(--grafite);font-variation-settings:'wdth' 100,'wght' 500}
.no-cheio{fill:var(--azul)}
.no-vazio{fill:var(--folha);stroke:var(--azul);stroke-width:2.4}
.nucleo{fill:var(--grafite)}
.rota--humana{stroke:var(--ocre);stroke-dasharray:5 5}
.no-humano{fill:var(--ocre)}
.rotulo-fraco{font-family:var(--fonte);font-size:12.5px;fill:var(--tinta-fraca);font-variation-settings:'wdth' 100,'wght' 400}
.nucleo-txt{font-family:var(--fonte);font-size:14px;fill:#f7f6f3;font-variation-settings:'wdth' 108,'wght' 600}

.anim .rota{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:tracar .85s cubic-bezier(.6,.02,.3,1) forwards}
.anim .ponta{opacity:0;animation:surgir .3s ease forwards}
.anim .centro{opacity:0;animation:surgir .35s ease .55s forwards}
.anim .rota--saida{animation-delay:.6s}
.anim .ponta--saida{animation-delay:1.3s}
.anim .ponta--entrada{animation-delay:.1s}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes surgir{to{opacity:1}}

@media (max-width:700px){
  .rotulo{font-size:19px}
  .nucleo-txt{font-size:16px}
  .rotulo-fraco{font-size:15px}
  .rota{stroke-width:3.2}
}

/* bolinha de dado percorrendo as trilhas */
.pulso{fill:var(--azul);opacity:0;offset-rotate:0deg}
.sem-offset .pulso{display:none}
.sem-offset .rota{stroke:var(--azul)}
.anim .rota{stroke:#a6c2e0}
@media (max-width:700px){.pulso{r:7.5px}}
.anim .pulso--entrada{animation:fluir-entrada 3.2s linear infinite}
.anim .pulso--saida{animation:fluir-saida 3.2s linear infinite}
.pulso--e1{offset-path:path("M108,40 H136 Q150,40 150,54 V166 Q150,180 164,180 H206");animation-delay:1.70s}
.pulso--e2{offset-path:path("M108,110 H136 Q150,110 150,124 V166 Q150,180 164,180 H206");animation-delay:1.82s}
.pulso--e3{offset-path:path("M108,180 H206");animation-delay:1.94s}
.pulso--e4{offset-path:path("M108,250 H136 Q150,250 150,236 V194 Q150,180 164,180 H206");animation-delay:2.06s}
.pulso--e5{offset-path:path("M108,320 H136 Q150,320 150,306 V194 Q150,180 164,180 H206");animation-delay:2.18s}
.pulso--s1{offset-path:path("M350,180 H382 Q396,180 396,166 V114 Q396,100 410,100 H436");animation-delay:1.70s}
.pulso--s2{offset-path:path("M350,180 H436");animation-delay:1.80s}
.pulso--s3{offset-path:path("M350,180 H382 Q396,180 396,194 V246 Q396,260 410,260 H436");animation-delay:1.90s}
@keyframes fluir-entrada{
  0%{offset-distance:0%;opacity:0}
  6%{opacity:1}
  40%{offset-distance:100%;opacity:1}
  46%,100%{offset-distance:100%;opacity:0}
}
@keyframes fluir-saida{
  0%,44%{offset-distance:0%;opacity:0}
  50%{offset-distance:0%;opacity:1}
  85%{offset-distance:100%;opacity:1}
  91%,100%{offset-distance:100%;opacity:0}
}

/* o núcleo reage quando o dado chega */
.nucleo-eco{fill:none;stroke:var(--azul);stroke-width:2.4;opacity:0;transform-box:fill-box;transform-origin:center}
.anim .nucleo-eco{animation:eco 3.2s ease-out infinite;animation-delay:1.70s}
@keyframes eco{
  0%,32%{opacity:0;transform:scale(1)}
  41%{opacity:.5;transform:scale(1)}
  64%,100%{opacity:0;transform:scale(1.07)}
}

/* terminal de saída acende na entrega */
.anim .ponta--saida .no-vazio{animation:acender 3.2s linear infinite;animation-delay:1.70s}
@keyframes acender{
  0%,80%{fill:var(--folha)}
  88%{fill:var(--azul)}
  100%{fill:var(--folha)}
}

/* passar o mouse destaca um caminho */
.ramo .rota{transition:stroke-width .18s ease}
.ramo:hover .rota{stroke-width:4.2}
.ramo:hover .rotulo{font-variation-settings:'wdth' 100,'wght' 700}


/* ---------- entradas conforme a página rola ---------- */
/* nada aqui vale sem .mov, que o JS só aplica se o visitante aceitar movimento. */
/* cada peça entra quando ela mesma aparece, e não a seção inteira de uma vez:   */
/* assim o movimento acompanha a rolagem em vez de terminar fora do campo de visão */

.mov .trilho{opacity:0;transition:opacity .55s ease .2s}
.mov .trilho.entra{opacity:1}
.mov .trilho::before{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.mov .trilho.entra::before{transform:scaleX(1)}

.mov .bloco h2{clip-path:inset(0 100% -0.22em 0);transition:clip-path .9s cubic-bezier(.22,.8,.24,1)}
.mov .bloco h2.entra{clip-path:inset(0 0 -0.22em 0)}

.mov .bloco .texto{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.mov .bloco .texto.entra{opacity:1;transform:none}

.mov .servico::before,.mov .caso::before{transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*90ms)}
.mov .entra .servico::before,.mov .entra .caso::before{transform:scaleX(1)}
.mov .servico>*,.mov .caso>*{opacity:0;transform:translateY(14px);transition:opacity .55s ease calc(var(--i,0)*90ms + .16s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms + .16s)}
.mov .entra .servico>*,.mov .entra .caso>*{opacity:1;transform:none}

.mov .degrau::before{transform:scaleY(0);transition:transform .5s cubic-bezier(.3,.7,.3,1) calc(var(--i,0)*130ms)}
.mov .entra .degrau::before{transform:scaleY(1)}
.mov .degrau>*{opacity:0;transform:translateX(-16px);transition:opacity .5s ease calc(var(--i,0)*130ms + .14s),transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*130ms + .14s)}
.mov .entra .degrau>*{opacity:1;transform:none}

.mov .tarefas li{opacity:0;transform:translateX(-14px);transition:opacity .45s ease calc(var(--i,0)*55ms),transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*55ms)}
.mov .tarefas.entra li{opacity:1;transform:none}
.mov .legenda-ocre{opacity:0;transition:opacity .55s ease .25s}
.mov .legenda-ocre.entra{opacity:1}

.mov .area,.mov .motivo{opacity:0;transform:translateY(16px);transition:opacity .55s ease calc(var(--i,0)*95ms),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*95ms)}
.mov .entra .area,.mov .entra .motivo{opacity:1;transform:none}

.mov .frase{clip-path:inset(0 100% -0.25em 0);transition:clip-path .95s cubic-bezier(.22,.8,.24,1)}
.mov .frase.entra{clip-path:inset(0 0 -0.25em 0)}

.mov .revela{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.mov .revela.entra{opacity:1;transform:none}
.mov .bloco .quiz,.mov .rodape{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.mov .bloco .quiz.entra,.mov .rodape.entra{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .mov .trilho,.mov .trilho::before,.mov .bloco h2,.mov .bloco .texto,
  .mov .servico>*,.mov .caso>*,.mov .servico::before,.mov .caso::before,
  .mov .degrau>*,.mov .degrau::before,.mov .tarefas li,.mov .legenda-ocre,
  .mov .area,.mov .motivo,.mov .frase,.mov .bloco .quiz,.mov .rodape,.mov .revela{
    opacity:1;transform:none;clip-path:none;
  }
}

/* ---------- tarefas manuais ---------- */
.tarefas{margin-top:30px}
.tarefas li{
  break-inside:avoid;
  padding:9px 0 9px 30px;
  position:relative;
  font-size:16.5px;
  border-top:1px solid var(--traco);
}
.tarefas li::before{
  content:"";position:absolute;left:0;top:19px;
  width:16px;height:8px;
  border:2px solid var(--ocre);border-bottom:none;border-radius:8px 8px 0 0;
}
.legenda-ocre{margin-top:18px;font-size:13.5px;color:var(--tinta-fraca);display:flex;align-items:center;gap:10px}
.legenda-ocre span{width:16px;height:8px;border:2px solid var(--ocre);border-bottom:none;border-radius:8px 8px 0 0;flex:none}


.frase{
  margin-top:44px;
  font-variation-settings:'wdth' 114,'wght' 600;
  font-size:clamp(19px,2.3vw,25px);
  line-height:1.34;
  max-width:26ch;
  letter-spacing:-0.012em;
}
.frase em{font-style:normal}
.frase::before{
  content:"";display:block;width:58px;height:3px;border-radius:2px;
  background:var(--azul);margin-bottom:20px;
}

/* ---------- serviços ---------- */
.servicos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 30px;margin-top:34px}
.servico{position:relative;padding-top:15px;text-decoration:none;color:inherit;display:block}
.servico:hover h3{color:var(--azul)}
.apos-grade{margin-top:38px}
.servico::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--grafite);transform-origin:left}
.servico p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--tinta-fraca)}
@media (max-width:1040px){.servicos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.servicos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.servicos{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ---------- escada de decisão ---------- */
.escada{margin-top:40px;display:grid;gap:0}
.degrau{
  display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:26px;align-items:baseline;
  padding:19px 0 19px 26px;
  border-top:1px solid var(--traco);
  position:relative;
}
.degrau::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--azul);transform-origin:top}
.degrau:first-child{border-top:none}
.degrau p{font-size:16px;color:var(--tinta-fraca)}
.degrau--1{margin-left:0}
.degrau--2{margin-left:34px}
.degrau--3{margin-left:68px}
.degrau--4{margin-left:102px}
.degrau--5{margin-left:136px}
@media (max-width:820px){
  .degrau{grid-template-columns:minmax(0,1fr);gap:5px;padding-left:18px}
  .degrau--2,.degrau--3,.degrau--4,.degrau--5{margin-left:0}
}

/* ---------- áreas ---------- */
.areas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 24px;margin-top:34px}
.area h3{font-variation-settings:'wdth' 108,'wght' 600;font-size:15px;color:var(--azul)}
.area ul{margin-top:10px}
.area li{font-size:14px;line-height:1.7;color:var(--tinta-fraca)}
@media (max-width:1100px){.areas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}

/* ---------- casos ---------- */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 30px;margin-top:30px}
.caso{position:relative;padding-top:14px}
.caso::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:#4f4c45;transform-origin:left}
.caso h3{font-variation-settings:'wdth' 112,'wght' 600;font-size:18.5px}
.caso p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#b6b2a8}
@media (max-width:1100px){.casos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.casos{grid-template-columns:minmax(0,1fr)}}

/* ---------- motivos ---------- */
.motivos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 30px;margin-top:34px}
.motivo h3{font-variation-settings:'wdth' 116,'wght' 700;font-size:19px}
.motivo p{margin-top:7px;font-size:16px;color:var(--tinta-fraca)}
@media (max-width:960px){.motivos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.motivos{grid-template-columns:minmax(0,1fr);gap:26px}}

/* coluna de contato direto, para quem não quer responder o quiz */
.direto{align-self:start;padding-top:4px}
.direto-titulo{font-variation-settings:'wdth' 110,'wght' 600;font-size:16px;color:#fff}
.direto p{margin-top:10px;font-size:14.5px;line-height:1.55;color:#92aac6}
.direto a{display:block;margin-top:14px;font-size:14.5px;color:#dbe6f3;text-decoration:none;border-bottom:1px solid #2d5178;padding-bottom:4px}
.direto a:hover{border-bottom-color:#dbe6f3}
.gruda{position:sticky;top:96px;align-self:start}
@media (max-width:840px){.gruda{position:static}}

/* ---------- quiz do contato ---------- */
.quiz{margin-top:38px;max-width:680px}
.quiz-passos{display:none}
.js-quiz .quiz-passos{display:block}
.js-quiz .quiz-simples{display:none}

.quiz-trilha{display:flex;align-items:center;margin-bottom:30px;max-width:380px}
.quiz-trilha i{
  width:11px;height:11px;border-radius:50%;flex:none;
  border:2px solid #456b96;background:transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.quiz-trilha b{height:2px;background:#2d5178;flex:1;position:relative;overflow:hidden}
.quiz-trilha b::after{
  content:"";position:absolute;inset:0;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.75,.2,1);
}
.quiz-trilha .feito{background:#fff;border-color:#fff}
.quiz-trilha b.feito::after{transform:scaleX(1)}
.quiz-trilha .agora{background:#fff;border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16)}

.passo{display:none;border:0;padding:0;margin:0;min-width:0}
.passo.ativo{display:block}
.passo legend{padding:0;color:#fff}

.opcoes{display:grid;gap:0;margin-top:20px}
@media (min-width:700px){.opcoes--duas{grid-template-columns:1fr 1fr;column-gap:34px}}
.opcao{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:transparent;border:0;border-top:1px solid #2d5178;
  color:#c3d3e6;font:inherit;font-size:16px;line-height:1.35;
  padding:13px 2px;cursor:pointer;
}
.opcao::before{
  content:"";width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid #6c8db3;background:transparent;
  transition:background .18s ease,border-color .18s ease;
}
.opcao:hover{color:#fff}
.opcao:hover::before{border-color:#fff}
.opcao[aria-pressed="true"]{color:#fff}
.opcao[aria-pressed="true"]::before{background:#fff;border-color:#fff}

/* múltipla escolha usa quadrado com marca de seleção: redondo é convenção de
   escolha única, e o usuário lia como rádio */
.dica{margin-top:9px;font-size:13.5px;color:#8fb4dd}
.passo[data-tipo="multipla"] .opcao{position:relative}
.passo[data-tipo="multipla"] .opcao::before{border-radius:3px}
.passo[data-tipo="multipla"] .opcao[aria-pressed="true"]::after{
  content:"";position:absolute;left:6px;top:50%;
  width:4px;height:9px;
  border:2px solid var(--azul-fundo);border-top:0;border-left:0;
  transform:translateY(-62%) rotate(45deg);
}

.quiz-nav{margin-top:24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.quiz-seguir{
  background:transparent;border:0;padding:4px 0;cursor:pointer;color:#fff;
  font:inherit;font-size:15px;font-variation-settings:'wdth' 106,'wght' 600;
  display:inline-flex;align-items:center;gap:12px;
}
.quiz-seguir::after{
  content:"";flex:none;width:26px;height:10px;
  background:
    linear-gradient(#fff,#fff) left center / calc(100% - 10px) 2px no-repeat,
    radial-gradient(circle 5px at calc(100% - 5px) center, #fff 99%, transparent 100%);
  transition:width .24s cubic-bezier(.2,.75,.2,1);
}
.quiz-seguir:hover:not([disabled])::after{width:38px}
.quiz-seguir[disabled]{opacity:.38;cursor:default}
.quiz-voltar{
  background:transparent;border:0;padding:4px 0;cursor:pointer;
  color:#92aac6;font:inherit;font-size:14.5px;
  text-decoration:underline;text-underline-offset:3px;
}
.quiz-voltar:hover{color:#dbe6f3}

.quiz-fim{display:none}
.quiz-fim.ativo{display:block}
.leitura{font-size:17px;line-height:1.6;color:#c3d3e6;max-width:56ch;margin-top:16px}
.leitura--abre{margin-top:0;color:#eef3f9;font-size:18px}
.leitura strong{color:#fff;font-variation-settings:'wdth' 110,'wght' 700;font-weight:700}
.hipotese-nota{margin-top:18px;font-size:14px;color:#8fa8c4;max-width:54ch}
.quiz-fim .convite{margin-top:30px}
#quiz-aviso{margin-top:14px}
.quiz-refazer{margin-top:24px;display:block}

/* ---------- contato ---------- */
.contato h2{max-width:20ch}
.faixa--azul .texto{color:#a8bdd4}
.contato .texto{max-width:50ch;font-size:17.5px}
.rodape{
  margin-top:88px;padding-top:24px;border-top:1px solid #2d5178;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:#8fa8c4;
}
.rodape a{color:#c7d8ea}
.rodape-marca{display:flex;align-items:center;gap:10px}
.rodape-marca img{height:20px;width:auto;display:block}
.selo{background:#eef3f9;border-radius:4px;padding:6px 7px;display:inline-flex}

/* ==========================================================
   páginas de serviço
   ========================================================== */

.migalha{font-size:13.5px;color:var(--tinta-fraca);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.migalha a{text-decoration:none;border-bottom:1px solid var(--traco);padding-bottom:2px}
.migalha a:hover{border-bottom-color:var(--azul);color:var(--grafite)}
.migalha span[aria-hidden]{color:#a9a49a}
.heroi-servico + .faixa{padding-top:76px}

.heroi-servico{padding:44px 0 56px}
.heroi-servico .env{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.heroi-servico .migalha{grid-column:1 / span 12;margin-bottom:34px}
.heroi-servico .texto-heroi{grid-column:1 / span 5}
.heroi-servico h1{max-width:14ch}
.heroi-servico .lead{margin-top:22px;font-size:19px;line-height:1.55;max-width:46ch;color:#46433d}
.heroi-servico .acoes{margin-top:32px}
.heroi-servico--largo .texto-heroi{grid-column:1 / span 8}
.heroi-servico--largo h1{max-width:18ch}
.heroi-servico--largo .lead{font-size:20px;max-width:56ch}
.heroi-servico--largo{padding-bottom:16px}
.heroi-servico--largo + .faixa{padding-top:30px}

.figura-larga{
  margin:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:34px 44px;align-items:center;
}
.figura-larga svg{width:100%;height:auto;display:block}
.figura-larga figcaption{
  font-size:16px;line-height:1.6;color:var(--tinta-fraca);max-width:40ch;
}
@media (max-width:860px){
  .figura-larga{grid-template-columns:minmax(0,1fr);gap:22px}
  .figura-larga figcaption{max-width:60ch;font-size:15px}
}
.heroi-servico figure{grid-column:7 / span 6;margin:0;align-self:center}
.heroi-servico figure svg{width:100%;height:auto;display:block}
.heroi-servico figcaption{margin-top:14px;font-size:13px;color:var(--tinta-fraca);line-height:1.5}
@media (max-width:900px){
  .heroi-servico{padding:30px 0 44px}
  .heroi-servico .env{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .heroi-servico .texto-heroi,.heroi-servico figure,.heroi-servico .migalha{grid-column:1 / -1}
}
@media (max-width:700px){
  .heroi-servico figure{margin-inline:calc(-1 * var(--pad))}
  .heroi-servico figcaption{margin-inline:var(--pad)}
  .figura-larga{margin-inline:calc(-1 * var(--pad))}
  .figura-larga figcaption{margin-inline:var(--pad)}
}

/* sinais: situações concretas em que o serviço aparece */
.sinais{margin-top:4px}
.sinais li{
  position:relative;padding:12px 0 12px 26px;
  border-top:1px solid var(--traco);font-size:16.5px;line-height:1.45;
}
.sinais li::before{
  content:"";position:absolute;left:0;top:21px;
  width:9px;height:9px;border-radius:50%;border:2px solid var(--azul);
}
.faixa--grafite .sinais li{border-top-color:#4f4c45}

/* passos: aqui a numeração vale, porque é sequência de verdade */
.passos{counter-reset:passo;margin-top:34px;display:grid;gap:0}
.passo-item{
  counter-increment:passo;
  display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:0 20px;padding:22px 0;border-top:1px solid var(--traco);
}
.passo-item::before{
  content:counter(passo);
  font-variation-settings:'wdth' 108,'wght' 600;font-size:14px;
  color:var(--azul);padding-top:3px;
}
.passo-item h3{font-variation-settings:'wdth' 110,'wght' 600;font-size:18px;line-height:1.3}
.passo-item p{margin-top:7px;font-size:15.5px;line-height:1.6;color:var(--tinta-fraca);max-width:62ch}
.faixa--folha .passo-item{border-top-color:#e2e0da}

/* entregas: o que fica com o cliente no fim */
.entregas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:30px}
.entrega{border-top:2px solid var(--grafite);padding:14px 0 18px}
.entrega h3{font-variation-settings:'wdth' 110,'wght' 600;font-size:16.5px}
.entrega p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--tinta-fraca)}
@media (max-width:760px){.entregas{grid-template-columns:minmax(0,1fr)}}

/* quando não serve: a parte que dá confiança */
.limites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:32px}
.limite{border-top:2px solid #4f4c45;padding-top:14px}
.limite h3{font-variation-settings:'wdth' 110,'wght' 600;font-size:16.5px;color:#fff}
.limite p{margin-top:7px;font-size:15px;line-height:1.55;color:#b6b2a8}
.limite a{color:#dfe6ee}
@media (max-width:860px){.limites{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.limites{grid-template-columns:minmax(0,1fr);gap:24px}}

/* ferramentas declaradas, sem enfeite */
.ferramentas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px;margin-top:30px}
.ferramenta h3{font-variation-settings:'wdth' 108,'wght' 600;font-size:15px;color:var(--azul)}
.ferramenta p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--tinta-fraca)}
@media (max-width:820px){.ferramentas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ferramentas{grid-template-columns:minmax(0,1fr)}}

/* catálogo de serviços */
.catalogo{margin-top:10px}
.item-catalogo{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:10px 40px;padding:30px 0;border-top:2px solid var(--grafite);
  text-decoration:none;color:inherit;
}
.item-catalogo:first-of-type{border-top-width:2px}
.item-catalogo h3{font-variation-settings:'wdth' 114,'wght' 700;font-size:clamp(21px,2.2vw,27px);letter-spacing:-0.012em}
.item-catalogo p{font-size:16px;line-height:1.6;color:var(--tinta-fraca);max-width:58ch}
.item-catalogo .abre{
  margin-top:12px;display:inline-flex;align-items:center;gap:12px;
  font-size:14.5px;font-variation-settings:'wdth' 106,'wght' 600;color:var(--azul);
}
.item-catalogo .abre::after{
  content:"";flex:none;width:24px;height:10px;
  background:
    linear-gradient(var(--azul),var(--azul)) left center / calc(100% - 10px) 2px no-repeat,
    radial-gradient(circle 5px at calc(100% - 5px) center, var(--azul) 99%, transparent 100%);
  transition:width .24s cubic-bezier(.2,.75,.2,1);
}
.item-catalogo:hover .abre::after{width:38px}
.item-catalogo:hover h3{color:var(--azul)}
@media (max-width:820px){
  .item-catalogo{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 0}
}

/* rodapé de site, com navegação de verdade */
.rodape-site{background:var(--grafite);color:var(--cal);padding:64px 0 40px}
.rodape-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px}
.rodape-marca-bloco{grid-column:1 / span 3}
.rodape-marca-bloco p{margin-top:14px;font-size:14.5px;line-height:1.6;color:#a8a49a;max-width:34ch}
.rodape-col{grid-column:span 3}
.rodape-col h3{font-variation-settings:'wdth' 108,'wght' 600;font-size:14px;color:#fff}
.rodape-col ul{margin-top:14px}
.rodape-col li{margin-top:9px}
.rodape-col a{font-size:14.5px;color:#b6b2a8;text-decoration:none}
.rodape-col a:hover{color:#fff}
.rodape-fim{
  grid-column:1 / span 12;margin-top:14px;padding-top:22px;border-top:1px solid #403d37;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#9c988d;
}
@media (max-width:900px){
  .rodape-marca-bloco{grid-column:1 / -1}
  .rodape-col{grid-column:span 6}
}
@media (max-width:560px){.rodape-col{grid-column:1 / -1}}

/* ==========================================================
   seletor de casos: sete caminhos paralelos que nunca se cruzam
   cada situação do cliente termina num serviço, e só nele. O desenho
   não liga um serviço ao outro de propósito: cada um é um produto
   fechado, e encadear leria como pacote
   ========================================================== */

.seletor{margin-top:30px}
.caso{
  display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,270px);
  gap:0 18px;align-items:center;
  padding:19px 0;border-top:1px solid var(--traco);
  text-decoration:none;color:inherit;
}
.caso:last-child{border-bottom:1px solid var(--traco)}
.caso-situacao{font-size:16.5px;line-height:1.45;max-width:44ch;color:var(--tinta)}
.caso-trilha{
  height:10px;
  background:
    linear-gradient(var(--traco),var(--traco)) left center / calc(100% - 10px) 2px no-repeat,
    radial-gradient(circle 5px at calc(100% - 5px) center, var(--traco) 99%, transparent 100%);
  transition:background .18s ease;
}
.caso-servico{
  font-size:16.5px;line-height:1.3;
  font-variation-settings:'wdth' 108,'wght' 700;
  transition:color .18s ease;
}
.caso:hover .caso-servico,.caso:focus-visible .caso-servico{color:var(--azul)}
.caso:hover .caso-trilha,.caso:focus-visible .caso-trilha{
  background:
    linear-gradient(var(--azul),var(--azul)) left center / calc(100% - 10px) 2px no-repeat,
    radial-gradient(circle 5px at calc(100% - 5px) center, var(--azul) 99%, transparent 100%);
}

@media (max-width:820px){
  .caso{grid-template-columns:minmax(0,1fr) 56px minmax(0,220px);gap:0 14px}
  .caso-situacao,.caso-servico{font-size:15.5px}
}
@media (max-width:660px){
  /* empilhado, a trilha horizontal não cabe: o nó passa a marcar o serviço */
  .caso{grid-template-columns:minmax(0,1fr);gap:9px;padding:17px 0}
  .caso-trilha{display:none}
  .caso-situacao{max-width:none}
  .caso-servico{display:flex;align-items:center;gap:11px;color:var(--azul)}
  .caso-servico::before{
    content:"";flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;
  }
}