/* Homepage de e-commerce: camada visual isolada do Brooklyn. */
/* Alinha avaliação e posicionamento em uma faixa única, sem rótulo duplicado. */
.hero .hero-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
  margin-bottom: 28px;
}
.hero .hero-rating .hr-txt {
  color: #75f6c8;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .hero .hero-rating .hr-txt {
    flex-basis: 100%;
    text-align: center;
    letter-spacing: .09em;
  }
}


/* -------------------------------------------------------------------------
   Ecossistema D'avila: formato "How we do" do Synck (pedido do dono, 24/10).
   Cards baixos e largos, icone grande, titulo em duas linhas, sem numeracao.
   Desktop: grade de 6 colunas, fileiras 3-2-3 com a do meio deslocada meio
   card; cada card desenha o trecho da rota que chega nele (reta do vizinho ou
   curva da fileira de cima), entao a linha acompanha o card em qualquer
   largura. Celular: lista vertical.
   Motion: .ecm-anim (posta pelo brooklyn.js) esconde; .is-on em cada etapa
   liga em sequencia: a linha se desenha, o ponto acende, o card sobe e o
   icone ganha cor. Sem JS ou com "reduzir movimento", nada fica escondido.
   ------------------------------------------------------------------------- */
.ecm-section {
  background:#fff;
  /* em cima, a faixa de clientes ja traz 110px de respiro (mesmo fundo
     branco): aqui so o complemento para fechar ~120px ate o painel */
  padding:clamp(8px,1vw,16px) 0 clamp(24px,3vw,48px);
}
/* a secao de servicos logo abaixo abre com respiro menor: os dois respiros
   somados deixavam um vao branco grande entre as secoes */
.ecm-section + #servicos {padding-top:clamp(40px,4.5vw,72px);}
.ecm-section .ecm-width {max-width:1680px;}
.ecm-panel {
  --ecm-mint:#00e19e;
  --ecm-bg:#1c1f1f;
  display:grid;
  /* medidas do original (synck style.css): texto em coluna estreita e fixa,
     cards com o resto. A coluna larga espremia os cards e fechava o espaco
     entre eles (68px contra os 100px do original em 1900px) */
  /* o palco dos cards tem so a largura que os cards pedem (auto); a sobra
     vai para a coluna do texto, que antes ficava espremida */
  /* a coluna do texto nunca abaixo de 380px: com 260-340px o título ia a 4
     linhas e o parágrafo a 5 (dono, 28/10: "espremido") */
  grid-template-columns:minmax(280px,1fr) auto;
  gap:clamp(40px,3.4vw,72px);
  align-items:stretch;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* mais ar em cima e embaixo que o original (pedido do dono): o conteudo
     daqui e mais denso que o "How we do" */
  padding:clamp(56px,5.4vw,104px) clamp(36px,3.6vw,72px);
  color:#f8faf9;
  background:var(--ecm-bg);
  border-radius:14px;
  /* as medidas dos cards (abaixo) seguem a largura do painel */
  container-type:inline-size;
}
/* trama de linhas no canto, no lugar da malha do Synck */
.ecm-panel::before {
  content:"";
  position:absolute;
  width:62%;
  height:120%;
  bottom:-72%;
  left:-24%;
  z-index:-1;
  opacity:.2;
  pointer-events:none;
  background:repeating-radial-gradient(ellipse at center,transparent 0 18px,rgba(173,211,194,.45) 19px,transparent 20px,transparent 30px);
  transform:rotate(-24deg);
}
.ecm-intro {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  min-width:0;
}
.ecm-kicker {
  display:block;
  margin-bottom:18px;
  font-size:11px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ecm-mint);
}
.ecm-section .ecm-intro h2 {
  font-family:"Poppins",system-ui,sans-serif;
  font-size:clamp(28px, calc(1.1vw + 18px), 40px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.045em;
  text-transform:none;
  color:#fff;
  margin:0 0 22px;
  max-width:none;
  text-align:left;
  text-wrap:balance;
}
.ecm-section .ecm-intro h2 .ecm-nw {white-space:nowrap;}
/* texto de apoio justificado (pedido do dono), sem hifenizar: no celular a
   coluna e estreita e o justificado abriria buracos, entao fica a esquerda */
@media(min-width:721px){
  .ecm-intro p {text-align:justify;text-align-last:left;hyphens:manual;}
}
.ecm-section .ecm-intro h2 em {color:var(--ecm-mint);font-style:normal;font-weight:inherit;}
.ecm-intro p {
  color:#c3cdc9;
  font-size:clamp(15px,.85vw,16.5px);
  line-height:1.75;
  max-width:none;
  margin:0;
}
.ecm-cta {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:14px 26px;
  background:var(--ecm-mint);
  color:#073427;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .2s ease;
}
.ecm-cta:hover {color:#073427;background:#74ffd0;}
.ecm-cta:focus-visible {outline:3px solid #0bdba1;outline-offset:4px;}

.ecm-stage {
  --ecm-gx:clamp(26px,3.4vw,64px);
  /* medidas do card num lugar so: o card tem a largura do conteudo, como no
     original (o texto mais longo, "logistica e checkout", mede 9,9em) */
  /* respiro único do card, igual nos 4 lados (dono, 28/10: cards com
     sobras diferentes pareciam um apertado e outro folgado) */
  --ecm-pad:clamp(16px,1.2vw,24px);
  --ecm-ico:clamp(46px,3.2vw,60px);
  --ecm-gi:clamp(10px,.8vw,14px);
  --ecm-fs:clamp(13.5px,.85vw,16px);
  /* largura = respiro + ícone + vão + a linha mais longa ("logística e
     checkout", 9,95em) + respiro: nenhum texto encosta na borda */
  --ecm-card:calc(var(--ecm-pad) * 2 + var(--ecm-ico) + var(--ecm-gi) + var(--ecm-fs) * 9.95 + 2px);
  --ecm-gy:clamp(44px,4.4vw,80px);
  --ecm-turn:clamp(20px,1.8vw,34px);
  --ecm-line:1.5px dashed rgba(255,255,255,.9);
  min-width:0;
  align-self:center;
  /* a curva da rota sai pelos lados da grade: o respiro fica dentro do palco */
  padding:0 var(--ecm-turn);
}
.ecm-steps {
  display:grid;
  /* minmax(0, ...): no tamanho cheio os cards ficam justos; se faltar
     largura (painel empilhado), encolhem em vez de vazar */
  grid-template-columns:repeat(6,minmax(0,calc((var(--ecm-card) - var(--ecm-gx)) / 2)));
  justify-content:center;
  /* 1fr numa grade de altura automatica iguala as fileiras: as curvas medem
     100% + gap e so fecham com fileiras do mesmo tamanho */
  grid-template-rows:repeat(3,minmax(calc(var(--ecm-ico) + var(--ecm-pad) * 2),1fr));
  column-gap:var(--ecm-gx);
  row-gap:var(--ecm-gy);
  padding:0;
  margin:0;
  list-style:none;
}
.ecm-step {position:relative;min-width:0;display:block;}
.ecm-step-01 {grid-area:1 / 1 / 2 / 3;}
.ecm-step-02 {grid-area:1 / 3 / 2 / 5;}
.ecm-step-03 {grid-area:1 / 5 / 2 / 7;}
.ecm-step-04 {grid-area:2 / 4 / 3 / 6;}
.ecm-step-05 {grid-area:2 / 2 / 3 / 4;}
.ecm-step-06 {grid-area:3 / 1 / 4 / 3;}
.ecm-step-07 {grid-area:3 / 3 / 4 / 5;}
.ecm-step-08 {grid-area:3 / 5 / 4 / 7;}

.ecm-step-link {
  box-sizing:border-box;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:var(--ecm-gi);
  height:100%;
  padding:var(--ecm-pad);
  border-radius:8px;
  background:#fff;
  /* translate (hover) e separado de transform (entrada): o hover responde na
     hora, sem herdar o atraso da sequencia */
  transition:box-shadow .3s ease,opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.7,.2,1);
}
@media(hover:hover){
  .ecm-step-link:hover {translate:0 -6px;box-shadow:0 0 0 2px var(--ecm-mint),0 16px 32px rgba(0,0,0,.3);}
  .ecm-step-link:hover .ecm-step-icon {scale:1.08;}
}
.ecm-step-icon {
  display:grid;
  flex:0 0 auto;
  width:var(--ecm-ico);
  aspect-ratio:1;
  place-items:center;
  border-radius:6px;
  background:#e3f7ee;
  color:#06805b;
  transition:background-color .45s ease,color .45s ease,scale .35s cubic-bezier(.2,.7,.2,1);
}
.ecm-step-icon svg {display:block;width:44%;height:44%;}
.ecm-section .ecm-step-link h3 {
  margin:0;
  min-width:0;
  font-family:inherit;
  font-size:var(--ecm-fs);
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:none;
  overflow-wrap:normal;
  hyphens:none;
}
.ecm-l1,.ecm-l2 {display:block;}
.ecm-l1 {color:#06805b;font-weight:600;}
.ecm-l2 {color:#2a3330;font-weight:500;}

/* rota e pontos (desktop) */
@media(min-width:901px){
  /* conteúdo alinhado à esquerda com o mesmo respiro em todos os cards: os
     ícones ficam na mesma linha vertical de card para card */
  .ecm-step::before {
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    transition:clip-path .34s linear;
    clip-path:inset(0);
  }
  .ecm-step-01::before {display:none;}
  /* retas: chegam pela esquerda (fileiras 1 e 3) ou pela direita (fileira 2) */
  .ecm-step-02::before,.ecm-step-03::before,.ecm-step-07::before,.ecm-step-08::before,.ecm-step-05::before {
    top:50%;
    width:var(--ecm-gx);
    border-top:var(--ecm-line);
  }
  .ecm-step-02::before,.ecm-step-03::before,.ecm-step-07::before,.ecm-step-08::before {left:calc(-1 * var(--ecm-gx));}
  .ecm-step-05::before {right:calc(-1 * var(--ecm-gx));}
  /* curvas: da ponta da fileira de cima, por fora da grade, ate o card */
  .ecm-step-04::before,.ecm-step-06::before {
    top:calc(-50% - var(--ecm-gy));
    height:calc(100% + var(--ecm-gy));
    width:calc(50% + var(--ecm-gx) / 2 + var(--ecm-turn));
    border:var(--ecm-line);
  }
  .ecm-step-04::before {right:calc(-50% - var(--ecm-gx) / 2 - var(--ecm-turn));border-left:0;border-radius:0 18px 18px 0;}
  .ecm-step-06::before {left:calc(-1 * var(--ecm-turn));border-right:0;border-radius:18px 0 0 18px;}

  .ecm-step::after {
    content:"";
    position:absolute;
    z-index:2;
    top:50%;
    width:10px;
    height:10px;
    margin-top:-5px;
    border-radius:50%;
    background:var(--ecm-mint);
    box-shadow:0 0 0 4px #fff;
    pointer-events:none;
  }
  .ecm-step-01::after {display:none;}
  .ecm-step-02::after,.ecm-step-03::after,.ecm-step-06::after,.ecm-step-07::after,.ecm-step-08::after {left:-5px;}
  .ecm-step-04::after,.ecm-step-05::after {right:-5px;}

  /* motion: a sequencia segue a ordem das etapas */
  .ecm-step {--t:calc(var(--i) * .36s);}
  /* esconder e instantaneo; o atraso da sequencia vale so para ligar. Com o
     atraso no esconder, as ultimas etapas ainda nao tinham sumido quando a
     secao entrava na tela e apareciam prontas, sem movimento */
  .ecm-anim .ecm-step:not(.is-on)::before {transition:none;}
  .ecm-anim .ecm-step.is-on::before {transition-delay:calc(var(--t) - .34s);}
  .ecm-anim .ecm-step:not(.is-on)::before {clip-path:inset(0 100% 0 0);}
  .ecm-anim .ecm-step-05:not(.is-on)::before {clip-path:inset(0 0 0 100%);}
  .ecm-anim .ecm-step-04:not(.is-on)::before,
  .ecm-anim .ecm-step-06:not(.is-on)::before {clip-path:inset(0 0 100% 0);}
}

.ecm-anim .ecm-step:not(.is-on) .ecm-step-link,
.ecm-anim .ecm-step:not(.is-on) .ecm-step-icon {transition:none;}
.ecm-anim .ecm-step.is-on .ecm-step-link {transition-delay:0s,var(--t,0s),var(--t,0s),0s;}
.ecm-anim .ecm-step.is-on .ecm-step-icon {transition-delay:var(--t,0s),var(--t,0s),0s;}
.ecm-anim .ecm-step:not(.is-on) .ecm-step-link {opacity:0;transform:translateY(18px);}
.ecm-anim .ecm-step:not(.is-on) .ecm-step-icon {background:#eef1f0;color:#a3aea9;}
.ecm-anim .ecm-step:not(.is-on)::after {transform:scale(0);}
.ecm-anim .ecm-step.is-on::after {animation:ecm-liga .7s cubic-bezier(.3,1.5,.5,1) var(--t,0s) both;}
@keyframes ecm-liga {
  0% {transform:scale(0);}
  55% {transform:scale(1.4);box-shadow:0 0 0 4px #fff,0 0 0 8px rgba(0,225,158,.5);}
  100% {transform:scale(1);box-shadow:0 0 0 4px #fff,0 0 0 18px rgba(0,225,158,0);}
}

/* Notebook (dono, 29/10: "estourando na tela do notebook"): o painel tinha
   só 26px de margem e ocupava 97% da tela em 1440-1680px. Agora a margem
   acompanha a tela (8vw, como o "How we do" do Synck, ~84% de largura) e o
   painel para em 1560px. Cards, ícones, textos e vãos são medidos em cqi
   (largura do painel), então tudo encolhe junto sem mudar o zigue-zague. */
@media(min-width:1025px){
  .ecm-section .ecm-width {max-width:none;padding-inline:max(var(--gutter,26px), calc((100% - 1560px) / 2), 8vw);}
}
@media(min-width:901px){
  .ecm-stage {
    --ecm-fs:clamp(12.5px,1.09cqi,16px);
    --ecm-ico:clamp(40px,3.6cqi,60px);
    --ecm-pad:clamp(13px,1.3cqi,24px);
    --ecm-gi:clamp(10px,.9cqi,14px);
    --ecm-gx:clamp(24px,3cqi,64px);
    --ecm-turn:clamp(16px,1.6cqi,34px);
    --ecm-gy:clamp(34px,3.8cqi,80px);
  }
}
/* lado a lado (1400px+): o título acompanha a largura do painel, para caber
   em 3 linhas na coluna do texto (~30% do painel, como na referência) */
@media(min-width:1400px){
  .ecm-section .ecm-intro h2 {font-size:clamp(28px,2.55cqi,40px);}
}
@media(max-width:1399px){
  .ecm-panel {grid-template-columns:1fr;}
  .ecm-intro {flex-direction:row;align-items:flex-end;gap:32px;}
  .ecm-section .ecm-intro h2 {max-width:30ch;}
  .ecm-intro p {max-width:56ch;}
  .ecm-cta {flex-shrink:0;}
}
/* abaixo de 900px a grade em zigue-zague estreita demais para os titulos:
   vira lista vertical com a linha tracejada na lateral */
@media(max-width:900px){
  .ecm-intro {display:block;}
  .ecm-cta {margin-top:26px;}
  .ecm-stage {padding:0;}
  .ecm-steps {
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:12px;
    max-width:560px;
    border-left:1.5px dashed rgba(255,255,255,.4);
    margin-left:6px;
    padding-left:22px;
  }
  .ecm-step {grid-area:auto !important;}
  .ecm-step::after {
    content:"";
    position:absolute;
    z-index:2;
    left:-28px;
    top:50%;
    width:10px;
    height:10px;
    margin-top:-5px;
    border-radius:50%;
    background:var(--ecm-mint);
    box-shadow:0 0 0 4px #fff;
  }
  .ecm-step-link {min-height:80px;padding:12px;gap:14px;}
  .ecm-step-icon {width:52px;}
  .ecm-section .ecm-step-link h3 {font-size:15px;}
}
/* motion do celular: a linha lateral acende em verde ate cada etapa, o ponto
   pulsa e o card sobe pouco, com curva longa e suave. --t vem do brooklyn.js
   (fila das etapas que entram juntas) */
@media(max-width:900px){
  .ecm-step::before {
    content:"";
    position:absolute;
    z-index:1;
    /* sobre a linha tracejada da lista (borda de 1.5px a 22px do card), do
       centro da etapa anterior ate o centro desta; --seg medido no JS */
    left:-23px;
    top:calc(50% - var(--seg, calc(100% + 12px)));
    bottom:50%;
    width:1.5px;
    background:var(--ecm-mint);
    transform-origin:top;
    pointer-events:none;
  }
  .ecm-step-01::before {display:none;}
  .ecm-anim .ecm-step::before {transition:transform .5s cubic-bezier(.4,0,.2,1);}
  .ecm-anim .ecm-step:not(.is-on)::before {transform:scaleY(0);transition:none;}
  .ecm-anim .ecm-step.is-on::before {transition-delay:var(--t,0s);}
  .ecm-anim .ecm-step-link {transition:box-shadow .3s ease,opacity .7s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),translate .35s cubic-bezier(.2,.7,.2,1);}
  .ecm-anim .ecm-step:not(.is-on) .ecm-step-link {transform:translateY(12px) scale(.985);}
  .ecm-anim .ecm-step.is-on .ecm-step-link {transition-delay:0s,calc(var(--t,0s) + .18s),calc(var(--t,0s) + .18s),0s;}
  .ecm-anim .ecm-step.is-on .ecm-step-icon {transition-delay:calc(var(--t,0s) + .18s),calc(var(--t,0s) + .18s),0s;}
  .ecm-anim .ecm-step.is-on::after {animation-delay:calc(var(--t,0s) + .38s);}
}
@media(max-width:720px){
  .ecm-section {padding:48px 0 28px;}
  .ecm-panel {gap:30px;padding:44px 20px;border-radius:10px;}
  .ecm-section .ecm-intro h2 {font-size:clamp(28px,8vw,36px);}
  .ecm-intro p {font-size:15px;}
}
@media(max-width:400px){
  .ecm-step-link {gap:12px;padding:11px;}
  .ecm-cta {padding:14px 20px;font-size:14px;}
  .ecm-step-icon {width:44px;}
  .ecm-section .ecm-step-link h3 {font-size:14px;}
}
@media(prefers-reduced-motion:reduce){
  .ecm-step-link,.ecm-step-icon,.ecm-cta,.ecm-step::before {transition:none;}
  .ecm-step::after {animation:none !important;}
}

/* -------------------------------------------------------------------------
   Clientes: esteira de logos no formato do Synck (pedido do dono, 24/10).
   Cards brancos 247x112 (330x150 em tela grande), 30px entre eles, sombra
   leve do original. A trilha tem a lista duas vezes e anda -50% em loop, entao
   a emenda cai exatamente no inicio da segunda copia. Pausa com o mouse em
   cima; com "reduzir movimento" fica parada, centralizada e sem a copia.
   ------------------------------------------------------------------------- */
.brands.bm {
  --bm-gap:clamp(30px,2.6vw,52px);
  padding:clamp(56px,6vw,96px) 0 clamp(40px,4.4vw,72px);
  overflow:hidden;
  /* as bordas somem aos poucos em vez de cortar o card seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.bm-track {
  display:flex;
  width:max-content;
  /* respiro para a sombra dos cards nao ser cortada pelo overflow */
  padding:24px 0;
  animation:bm-rola 46s linear infinite;
}
.brands.bm:hover .bm-track {animation-play-state:paused;}
.bm-list {
  display:flex;
  gap:var(--bm-gap);
  padding:0 var(--bm-gap) 0 0;
  margin:0;
  list-style:none;
}
.bm-card {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:247px;
  height:112px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 20px 5px rgba(0,0,0,.045);
}
.bm-card img {
  display:block;
  width:auto;
  height:auto;
  max-width:74%;
  max-height:60px;
  object-fit:contain;
}
/* acerto de peso visual por logo (mesmo da grade antiga) */
.bm-card img[src*="tagfix"] {max-height:44px;}
.bm-card img[src*="rodadagua"] {max-height:76px;}
.bm-card img[src*="engloob"] {max-height:52px;}
@keyframes bm-rola {to {transform:translateX(-50%);}}
@media(min-width:1701px){
  .bm-card {width:330px;height:150px;}
  .bm-card img {max-height:76px;}
  .bm-card img[src*="tagfix"] {max-height:56px;}
  .bm-card img[src*="rodadagua"] {max-height:96px;}
  .bm-card img[src*="engloob"] {max-height:66px;}
}
@media(max-width:720px){
  .brands.bm {--bm-gap:16px;padding:40px 0 24px;}
  .bm-card {width:170px;height:84px;}
  .bm-card img {max-height:46px;}
  .bm-card img[src*="tagfix"] {max-height:34px;}
  .bm-card img[src*="rodadagua"] {max-height:60px;}
  .bm-card img[src*="engloob"] {max-height:40px;}
  .bm-track {animation-duration:34s;}
}
@media(prefers-reduced-motion:reduce){
  .brands.bm {-webkit-mask-image:none;mask-image:none;}
  .bm-track {animation:none;width:auto;justify-content:center;}
  .bm-list {flex-wrap:wrap;justify-content:center;padding:0 20px;}
  .bm-list[aria-hidden="true"] {display:none;}
}

/* -------------------------------------------------------------------------
   Servicos em abas (PREVIA /previa/servicos): formato "Detailing of our
   products" do Synck com AS MEDIDAS DO ORIGINAL (style.css/responsive.css,
   .case-studio-area), pedido do dono 24/10: "mais alinhado, menos exagerado".
     ate 1700px: container 982, imagens 525x357 (cards 252x321), texto 403,
                 icone 37, nome 18px, abas 15px
     acima:      container 1340, imagens 768x475 (cards 372x427), texto 518,
                 icone 46, nome 24px, abas 20px
   Motion so com .sva-js (brooklyn.js): sem JS os 6 paineis aparecem empilhados.
   ------------------------------------------------------------------------- */
.sva {
  --sva-pad:18px;
  --sva-card-h:321px;
  --sva-dir:403px;
  background:#f3f5f4;
  padding:100px 0;
}
.ecm-section + #servicos.sva {padding-top:100px;}
.sva .sva-wrap {max-width:1004px;}
.sva-head {text-align:center;margin-bottom:40px;}
.sva-head .eyebrow {justify-content:center;}
.sva .sva-head h2 {
  margin:16px auto 0;
  max-width:30ch;
  font-size:clamp(24px,2.3vw,34px);
  line-height:1.15;
  text-align:center;
}
.sva-head h2 .sva-nw {white-space:nowrap;}

.sva-abas {display:none;}
.sva-js .sva-abas {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:4px;
  padding:12px;
  margin-bottom:30px;
  background:#fff;
  border-radius:10px;
}
.sva-marca {
  position:absolute;
  top:12px;
  left:0;
  height:calc(100% - 24px);
  width:var(--sva-w,0);
  transform:translateX(var(--sva-x,0));
  background:#1c1f1f;
  border-radius:10px;
  transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1);
}
.sva-aba {
  position:relative;
  z-index:1;
  flex:0 0 auto;
  padding:11px 26px;
  border:0;
  border-radius:10px;
  background:transparent;
  font:inherit;
  font-size:15px;
  font-weight:400;
  line-height:1;
  color:rgba(28,28,28,.8);
  cursor:pointer;
  white-space:nowrap;
  transition:color .35s ease;
}
.sva-aba:hover {color:#06805b;}
.sva-aba[aria-selected="true"] {color:#fff;}
.sva-aba:focus-visible {outline:3px solid #0bdba1;outline-offset:2px;}

.sva-paineis {display:grid;gap:24px;}
.sva-js .sva-paineis {display:block;}
.sva-painel {display:flex;gap:24px;align-items:stretch;}
.sva-js .sva-painel:not(.is-ativa) {display:none;}

.sva-visuais {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:var(--sva-pad);
  padding:var(--sva-pad);
  background:#fff;
  border-radius:10px;
}
.sva-vis {
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:var(--sva-card-h);
  margin:0;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 20px 5px rgba(0,0,0,.04);
}
.sva-pill {
  position:absolute;
  z-index:2;
  top:18px;
  left:18px;
  padding:8px 16px;
  border-radius:10px;
  background:#e3f7ee;
  color:#06805b;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
}
/* notebook e celular encostados embaixo a direita, cortados pela borda como
   no original */
.sva-laptop {position:absolute;left:24%;right:-20%;bottom:22px;}
.sva-laptop .sva-tela {
  aspect-ratio:16/10;
  overflow:hidden;
  border:6px solid #18191b;
  border-bottom-width:9px;
  border-radius:9px 9px 0 0;
  background:#fff;
}
.sva-base {height:8px;margin:0 -8% 0 -12%;border-radius:0 0 8px 8px;background:linear-gradient(#d3d7da,#a3a9ad);}
.sva-phone {position:absolute;left:26%;width:78%;bottom:-70px;}
.sva-phone .sva-tela {aspect-ratio:9/17;overflow:hidden;border:6px solid #18191b;border-radius:24px;background:#fff;}
.sva-phone::before {content:"";position:absolute;z-index:1;top:11px;left:12%;width:9px;height:9px;border-radius:50%;background:#18191b;}
.sva-tela img {display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;}
.sva-foto {position:absolute;inset:62px 0 0 18px;overflow:hidden;border-radius:10px 0 0 0;}
.sva-foto img {display:block;width:100%;height:100%;object-fit:cover;}
.sva-lista {padding:64px 18px 18px;}
.sva-lista ul {list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.sva-lista li {display:flex;gap:9px;align-items:center;font-size:12.5px;line-height:1.3;font-weight:500;color:#1c2421;}
.sva-ok {flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#e3f7ee;color:#06805b;}
.sva-ok svg {width:13px;height:13px;}

.sva-info {
  position:relative;
  flex:0 0 var(--sva-dir);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:48px 36px 38px 40px;
  background:#fff;
  border-radius:10px;
}
.sva-icone {color:#06805b;margin-bottom:22px;}
.sva-icone svg {display:block;width:37px;height:37px;}
.sva .sva-info h3 {
  margin:0 0 14px;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  text-transform:none;
  color:#1c2421;
}
.sva-info p {margin:0 0 20px;font-size:13px;line-height:19px;color:#5d6662;}
.sva-ir {
  margin-top:auto;
  align-self:flex-end;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--ecm-mint,#00e19e);
  color:#073427;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .25s ease,color .25s ease;
}
.sva-ir svg {width:18px;height:18px;}
.sva-ir:hover {background:#1c1f1f;color:#fff;transform:rotate(45deg);}
.sva-ir:focus-visible {outline:3px solid #0bdba1;outline-offset:4px;}
.sva-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media(min-width:1701px){
  .sva {--sva-pad:24px;--sva-card-h:427px;--sva-dir:518px;padding:140px 0;}
  .ecm-section + #servicos.sva {padding-top:140px;}
  .sva .sva-wrap {max-width:1362px;}
  .sva-head {margin-bottom:50px;}
  .sva .sva-head h2 {font-size:44px;}
  .sva-js .sva-abas {margin-bottom:40px;}
  .sva-aba {font-size:20px;padding:15px 40px;}
  .sva-pill {font-size:14px;padding:8px 21px;left:24px;top:24px;}
  .sva-foto {inset:78px 0 0 24px;}
  .sva-lista {padding:84px 24px 24px;}
  .sva-lista ul {gap:14px;}
  .sva-lista li {font-size:16px;}
  .sva-info {padding:67px 50px 50px 53px;}
  .sva-icone svg {width:46px;height:46px;}
  .sva .sva-info h3 {font-size:24px;}
  .sva-info p {font-size:18px;line-height:26px;}
  .sva-ir {width:53px;height:53px;}
}

/* motion da troca de aba: cards entram em sequencia, a imagem assenta com
   zoom leve e o texto sobe linha a linha */
@media(prefers-reduced-motion:no-preference){
  .sva-js .sva-painel.is-ativa .sva-vis,
  .sva-js .sva-painel.is-ativa .sva-info > * {animation:sva-sobe .7s cubic-bezier(.22,1,.36,1) both;}
  .sva-js .sva-painel.is-ativa .sva-vis-b {animation-delay:.08s;}
  .sva-js .sva-painel.is-ativa .sva-info > :nth-child(1) {animation-delay:.12s;}
  .sva-js .sva-painel.is-ativa .sva-info > :nth-child(2) {animation-delay:.18s;}
  .sva-js .sva-painel.is-ativa .sva-info > :nth-child(3) {animation-delay:.24s;}
  .sva-js .sva-painel.is-ativa .sva-info > :nth-child(4) {animation:sva-gira .7s cubic-bezier(.22,1,.36,1) .3s both;}
  .sva-js .sva-painel.is-ativa .sva-tela img,
  .sva-js .sva-painel.is-ativa .sva-foto img {animation:sva-assenta 1.1s cubic-bezier(.22,1,.36,1) both;}
  .sva-js .sva-painel.is-ativa .sva-lista li {animation:sva-sobe .6s cubic-bezier(.22,1,.36,1) both;}
  .sva-js .sva-painel.is-ativa .sva-lista li:nth-child(1) {animation-delay:.16s;}
  .sva-js .sva-painel.is-ativa .sva-lista li:nth-child(2) {animation-delay:.24s;}
  .sva-js .sva-painel.is-ativa .sva-lista li:nth-child(3) {animation-delay:.32s;}
  .sva-js .sva-painel.is-ativa .sva-lista li:nth-child(4) {animation-delay:.4s;}
  .sva-js .sva-painel.is-ativa .sva-lista li:nth-child(5) {animation-delay:.48s;}
  .sva-js .sva-painel.is-ativa .sva-lista li:nth-child(6) {animation-delay:.56s;}
}
@keyframes sva-sobe {from {opacity:0;transform:translateY(22px);}}
@keyframes sva-gira {from {opacity:0;transform:scale(.6) rotate(-45deg);}}
@keyframes sva-assenta {from {transform:scale(1.08);}}

/* abaixo de 1200 (como o original): texto embaixo das imagens */
@media(max-width:1200px){
  .sva .sva-wrap {max-width:1004px;}
  .sva-painel {flex-direction:column;}
  .sva-info {flex-basis:auto;}
  .sva-ir {margin-top:8px;}
}
@media(max-width:1060px){
  /* abas viram trilho que rola de lado dentro da barra (a pagina nao) */
  .sva-js .sva-abas {overflow-x:auto;scrollbar-width:none;justify-content:flex-start;scroll-snap-type:x mandatory;}
  .sva-js .sva-abas::-webkit-scrollbar {display:none;}
  .sva-aba {scroll-snap-align:center;}
}
@media(max-width:720px){
  .sva {padding:64px 0;}
  .ecm-section + #servicos.sva {padding-top:64px;}
  .sva-head {margin-bottom:32px;}
  .sva-visuais {flex-direction:column;padding:14px;gap:14px;}
  .sva-vis {flex:0 0 auto;height:280px;}
  .sva-phone {left:auto;right:14%;width:min(52%,170px);bottom:-60px;}
  .sva-laptop {left:16%;right:-14%;}
  .sva-lista {height:auto;}
  .sva-info {padding:30px 24px;}
  .sva-info p {font-size:14px;line-height:21px;}
}

/* -------------------------------------------------------------------------
   CASE EM DESTAQUE (no lugar do mosaico "Por que a D'avila", prévia 28/10)
   Fundo claro, card branco com borda fina e sombra leve; o verde só destaca
   o valor final, a linha e o "juntos". Motion: .cr-js esconde, .is-on liga.
   ------------------------------------------------------------------------- */
.cr {padding:clamp(72px,8vw,140px) 0 clamp(56px,6vw,100px);background:#fff;}
.cr-wrap {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,5vw,96px);
  align-items:center;
  max-width:1240px;
}
.cr-texto .eyebrow {display:block;margin-bottom:18px;}
.cr .cr-texto h2 {
  margin:0 0 24px;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:clamp(28px, calc(1.1vw + 21px), 44px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.045em;
  text-transform:none;
  text-align:left;
  color:#161a19;
  text-wrap:balance;
}
.cr .cr-texto h2 .ital {color:#06a874;font-family:inherit;}
.cr-texto p {margin:0;max-width:46ch;font-size:clamp(15px,.9vw,17px);line-height:1.75;color:#5d6662;}

.cr-card {
  justify-self:end;
  width:100%;
  max-width:520px;
  margin:0;
  padding:clamp(20px,1.7vw,28px);
  background:#fff;
  border:1px solid #e3e8e6;
  border-radius:16px;
  box-shadow:0 24px 60px -28px rgba(16,40,32,.22);
}
.cr-topo,.cr-rodape {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7b8581;
}
.cr-valor {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  margin:clamp(20px,1.8vw,28px) 0 4px;
  font-family:"Poppins",system-ui,sans-serif;
}
.cr-de {font-size:clamp(16px,1.15vw,20px);font-weight:500;color:#7b8581;letter-spacing:-.02em;}
.cr-seta {font-size:clamp(16px,1.15vw,20px);color:#06a874;}
.cr-ate {font-size:clamp(32px,2.9vw,48px);font-weight:800;line-height:1;letter-spacing:-.045em;color:#06a874;white-space:nowrap;}
.cr-n {font-variant-numeric:tabular-nums;}
.cr-legenda {margin:0 0 clamp(14px,1.4vw,20px);font-size:13.5px;color:#3d4643;}

.cr-grafico {position:relative;aspect-ratio:600 / 180;}
.cr-svg {display:block;width:100%;height:100%;overflow:visible;}
.cr-grade {stroke:#eef2f0;stroke-width:1;vector-effect:non-scaling-stroke;}
.cr-base {stroke:#d6ddda;stroke-width:1;vector-effect:non-scaling-stroke;}
.cr-tick {stroke:#c5cdca;stroke-width:1;vector-effect:non-scaling-stroke;}
.cr-linha {fill:none;stroke:#00c98d;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;}
.cr-ponto {
  position:absolute;
  width:12px;height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  background:#fff;
  border:3px solid #00c98d;
}
.cr-ponto-b {width:16px;height:16px;margin:-8px 0 0 -8px;background:#00e19e;border-color:#fff;box-shadow:0 0 0 2px #00c98d;}
.cr-rodape {margin-top:12px;padding-top:14px;border-top:1px solid #eef2f0;}
.cr-rodape b {color:#06a874;font-weight:700;}
.cr-nota {margin-top:clamp(40px,4vw,64px);max-width:1240px;font-size:12px;line-height:1.6;color:#8a938f;}

/* motion: só com JS e sem "reduzir movimento" */
.cr-js .cr-texto > * {opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1);}
.cr-js .cr-texto > :nth-child(2) {transition-delay:.08s;}
.cr-js .cr-texto > :nth-child(3) {transition-delay:.16s;}
.cr-js .cr-card {opacity:0;transform:translateY(28px);transition:opacity .8s ease .1s,transform .9s cubic-bezier(.22,1,.36,1) .1s;}
.cr-js .cr-linha {stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .5s;}
.cr-js .cr-area {opacity:0;transition:opacity 1s ease 1.3s;}
.cr-js .cr-ponto-a {opacity:0;transform:scale(.4);transition:opacity .3s ease .45s,transform .4s cubic-bezier(.3,1.6,.5,1) .45s;}
.cr-js .cr-ponto-b {opacity:0;transform:scale(.4);transition:opacity .3s ease 2s,transform .5s cubic-bezier(.3,1.6,.5,1) 2s;}
.cr-js.is-on .cr-texto > *,
.cr-js.is-on .cr-card {opacity:1;transform:none;}
.cr-js.is-on .cr-linha {stroke-dashoffset:0;}
.cr-js.is-on .cr-area {opacity:1;}
.cr-js.is-on .cr-ponto {opacity:1;transform:none;}
.cr-js.is-on .cr-ponto-b {animation:cr-pulsa 2.4s ease-out 2.5s infinite;}
@keyframes cr-pulsa {
  0% {box-shadow:0 0 0 2px #00c98d,0 0 0 2px rgba(0,225,158,.45);}
  100% {box-shadow:0 0 0 2px #00c98d,0 0 0 18px rgba(0,225,158,0);}
}

/* notebook e acima (dono, 29/10): mesmas bordas do painel do ecossistema
   logo acima (margem 8vw até 1560px + o respiro interno do painel). O texto
   começa na linha do texto do painel e o card termina na linha dos cards;
   colunas iguais e vão menor no lugar dos 110-120px que sobravam. */
@media(min-width:1025px){
  .cr-wrap,.cr-nota {
    max-width:none;
    padding-inline:calc(max(var(--gutter,26px), calc((100% - 1560px) / 2), 8vw) + clamp(36px,3.6vw,72px));
  }
  .cr-wrap {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,5vw,96px);}
  .cr-card {max-width:620px;}
  .cr-texto p {max-width:none;}
  .cr-nota {margin-top:clamp(24px,2.4vw,40px);}
}
@media(max-width:980px){
  .cr-wrap {grid-template-columns:minmax(0,1fr);}
  .cr-card {justify-self:start;max-width:560px;}
  .cr-texto p {max-width:60ch;}
}
@media(max-width:720px){
  .cr {padding:64px 0 48px;}
  .cr-topo {flex-direction:column;gap:6px;}
  .cr-rodape {flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
  .cr-js.is-on .cr-ponto-b {animation:none;}
}

/* -------------------------------------------------------------------------
   PROJETOS (prévia 29/10): carrossel das lojas feitas, formato "Showcase"
   do Synck. Texto à esquerda alinhado ao case acima; os cards passam da
   borda direita da tela. Ao passar o mouse, o print desce pela loja.
   ------------------------------------------------------------------------- */
.pj {padding:clamp(72px,7vw,120px) 0;background:#f2f6f4;overflow:hidden;}
.pj-wrap {
  --pj-esq:max(var(--gutter,26px), calc((100% - 1240px) / 2 + var(--gutter,26px)));
  /* acima de 1025px: mesma linha do texto do painel e do case (ver .cr-wrap) */
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(40px,5vw,96px);
  align-items:center;
  padding-left:var(--pj-esq);
}
.pj-texto .eyebrow {display:block;margin-bottom:18px;}
.pj .pj-texto h2 {
  margin:0 0 22px;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:clamp(28px, calc(1.1vw + 21px), 44px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.045em;
  text-transform:none;
  text-align:left;
  color:#161a19;
  text-wrap:balance;
}
.pj .pj-texto h2 .ital {color:#06a874;font-family:inherit;}
.pj-texto p {margin:0;font-size:clamp(15px,.9vw,17px);line-height:1.75;color:#5d6662;}
.pj-texto ul {list-style:none;margin:28px 0 0;padding:28px 0 0;border-top:1px solid #d9e2de;display:grid;gap:16px;}
.pj-texto li {display:flex;align-items:center;gap:12px;font-size:15px;color:#2b3330;}
.pj-ok {flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#06a874;color:#fff;}
.pj-ok svg {width:12px;height:12px;}

.pj-carrossel {min-width:0;}
.pj-trilho {
  --pj-w:clamp(250px,19vw,320px);
  display:flex;
  gap:clamp(16px,1.4vw,24px);
  margin:0;
  padding:0 var(--gutter,26px) 4px 0;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.pj-trilho::-webkit-scrollbar {display:none;}
.pj-trilho:focus-visible {outline:2px solid #06a874;outline-offset:4px;border-radius:12px;}
.pj-card {
  flex:0 0 var(--pj-w);
  height:calc(var(--pj-w) * 1.62);
  display:flex;
  flex-direction:column;
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
}
.pj-card h3 {
  margin:0;
  padding:clamp(20px,1.6vw,28px) clamp(20px,1.6vw,28px) 0;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:clamp(22px,1.6vw,28px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.045em;
  text-transform:none;
  white-space:nowrap;
  box-sizing:content-box;
  height:2.1em;
}
.pj-escuro {background:#121615;color:#fff;}
.pj-escuro h3 {color:#fff;}
.pj-cinza {background:#dfe6e3;}
.pj-branco {background:#fff;}
.pj-cinza h3,.pj-branco h3 {color:#161a19;}
.pj-print {
  position:relative;
  flex:1;
  min-height:0;
  margin:clamp(20px,1.8vw,28px) 0 0 clamp(20px,1.6vw,28px);
  border-radius:10px 0 0 0;
  overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.35);
}
.pj-print img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;
  transition:object-position 7s cubic-bezier(.45,0,.55,1);
}
.pj-card:hover .pj-print img,
.pj-card.is-desce .pj-print img {object-position:50% 100%;transition-duration:7s;}

.pj-controles {display:none;align-items:center;gap:10px;margin-top:28px;padding-right:var(--gutter,26px);}
.pj-js .pj-controles {display:flex;}
.pj-btn {
  display:grid;place-items:center;
  width:42px;height:42px;
  padding:0;
  border:1px solid #cfd9d5;
  border-radius:50%;
  background:#fff;
  color:#161a19;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.pj-btn svg {width:18px;height:18px;}
.pj-btn:hover,.pj-btn:focus-visible {background:#161a19;border-color:#161a19;color:#fff;}
.pj-btn[disabled] {opacity:.35;cursor:default;background:#fff;color:#161a19;border-color:#cfd9d5;}
.pj-barra {position:relative;flex:0 1 160px;height:3px;margin-left:auto;border-radius:3px;background:#d9e2de;overflow:hidden;}
.pj-barra-in {position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:3px;background:#161a19;transition:transform .3s ease;}

/* entrada */
.pj-js .pj-texto > *,.pj-js .pj-card {opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1);}
.pj-js .pj-texto > :nth-child(2) {transition-delay:.08s;}
.pj-js .pj-texto > :nth-child(3) {transition-delay:.16s;}
.pj-js .pj-texto > :nth-child(4) {transition-delay:.24s;}
.pj-js .pj-card:nth-child(2) {transition-delay:.1s;}
.pj-js .pj-card:nth-child(3) {transition-delay:.2s;}
.pj-js .pj-card:nth-child(n+4) {transition-delay:.3s;}
.pj-js.is-on .pj-texto > *,.pj-js.is-on .pj-card {opacity:1;transform:none;}

@media(min-width:1025px){
  .pj-wrap {--pj-esq:calc(max(var(--gutter,26px), calc((100% - 1560px) / 2), 8vw) + clamp(36px,3.6vw,72px));}
}
@media(max-width:980px){
  .pj-wrap {grid-template-columns:minmax(0,1fr);padding-left:0;}
  .pj-texto {padding:0 var(--gutter,26px);max-width:640px;}
  .pj-trilho {padding-left:var(--gutter,26px);scroll-padding-left:var(--gutter,26px);}
  .pj-controles {padding-left:var(--gutter,26px);}
}
@media(max-width:600px){
  .pj {--gutter:20px;}
}
@media(max-width:720px){
  .pj {padding:64px 0;}
  .pj-trilho {--pj-w:min(74vw,290px);}
}
@media(hover:none){
  .pj-card:hover .pj-print img {object-position:50% 0;}
  .pj-card.is-desce .pj-print img {object-position:50% 100%;}
}
@media(prefers-reduced-motion:reduce){
  .pj-print img {transition:none;}
  .pj-trilho {scroll-behavior:auto;}
}

/* -------------------------------------------------------------------------
   CAPA COM TEXTO À ESQUERDA (prévia 29/10, .hero-esq): mesmo fundo de foto,
   texto alinhado à esquerda numa coluna de até 640px e a coluna da direita
   (.hero-dir) reservada para o que o dono vai colocar depois.
   ------------------------------------------------------------------------- */
.hero.hero-esq {text-align:left;}
.hero-esq .hero-grid {
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(0,1fr);
  gap:clamp(40px,4vw,80px);
  align-items:center;
  width:100%;
  max-width:1240px;
  text-align:left;
}
.hero-esq .hero-rating,
.hero-esq .hero-ctas,
.hero-esq .hero-trust {justify-content:flex-start;}
.hero-esq .hero-rating {margin-bottom:22px;}
.hero-esq h1 {
  margin:0 0 24px;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:clamp(32px, calc(1.4vw + 24px), 52px);
  font-weight:800;
  line-height:1.08;
  /* -.045em colava as letras: o hífen de "e-commerces" encostava no "e" e
     no "c" e parecia um travessão (dono, 29/10). Mais ar entre letras e
     entre palavras; no "e-commerces" quase sem aperto. */
  letter-spacing:-.03em;
  word-spacing:.03em;
  text-transform:none;
  text-align:left;
  text-wrap:balance;
}
.hero-esq p.lead {
  max-width:56ch;
  margin:0 0 36px;
  font-size:clamp(15px,.95vw,17px);
  line-height:1.75;
  color:#c3c7c9;
}
.hero-esq .hero-trust {margin-top:28px;}
.hero-esq .h1-nw {letter-spacing:-.005em;}
.hero-dir {display:flex;justify-content:flex-start;align-items:center;min-height:1px;}
/* selo giratório (views/hero-roda.js), só o texto, sem aros: o círculo gira devagar e o
   brooklyn.js troca as palavras com um fade */
/* um pouco maior que a coluna: entra no vão até o texto e na margem
   direita (só onde a tela tem margem fora dos 1240px) */
.hr-roda {
  --hr-vao:clamp(40px,4vw,80px);
  position:relative;
  flex:none;
  width:min(400px, calc(100% + var(--hr-vao) * .5 + max(0px, (100vw - 1240px) / 2) * .2));
  margin-left:calc(var(--hr-vao) * -.25);
  aspect-ratio:1;
}
.hr-svg {display:block;width:100%;height:100%;overflow:visible;animation:hr-gira 28s linear infinite;}
.hr-texto {
  font-family:"Poppins",system-ui,sans-serif;
  font-size:27px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  fill:#fff;
  transition:opacity .45s ease;
}
.hr-texto.is-troca {opacity:0;}
.hr-ponto {fill:#75f6c8;}
/* "D'" em vidro (public/js/hero-marca.js) no vão do anel; só aparece
   quando o WebGL sobe (.gl-on), senão o centro fica vazio */
.hr-marca {position:absolute;inset:10%;opacity:0;transition:opacity .8s ease;}
.hr-marca.gl-on {opacity:1;}
.hr-marca canvas {display:block;width:100%;height:100%;}
@keyframes hr-gira {to {transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .hr-svg {animation:none;}
}
/* Linhas do H1 por tela (dono, 29/10): notebook em 4 linhas (coluna mais
   estreita, sobra espaço para o selo), monitor grande em 3 (coluna larga).
   Acima de 1025px a capa usa as mesmas bordas do painel do ecossistema e do
   case: o texto começa na mesma linha das seções de baixo. */
@media(min-width:1025px){
  .hero-esq .hero-grid {
    --h1-col:560px;
    grid-template-columns:minmax(0,var(--h1-col)) minmax(0,1fr);
    max-width:none;
    padding-inline:calc(max(var(--gutter,26px), calc((100% - 1560px) / 2), 8vw) + clamp(36px,3.6vw,72px));
  }
}
@media(min-width:1280px){.hero-esq .hero-grid {--h1-col:600px;}}
@media(min-width:1440px){.hero-esq .hero-grid {--h1-col:650px;}}
@media(min-width:1025px) and (max-width:1599px){.hero-esq h1 {font-size:clamp(40px, calc(2vw + 22px), 52px);}}
@media(min-width:1600px){.hero-esq .hero-grid {--h1-col:900px;}}
@media(max-width:1024px){
  .hero-esq .hero-grid {grid-template-columns:minmax(0,1fr);}
  .hero-esq .hero-copy {max-width:700px;}
  .hero-dir {display:none;}
}
@media(max-width:700px){
  .hero-esq .hero-rating .hr-txt {text-align:left;}
  .hero-esq h1 {font-size:clamp(22px,7.2vw,32px);}
  .hero-esq .hero-ctas .btn {width:100%;justify-content:center;}
}

/* ---------------------------------------------- blog da home, formato de cases
   (dono, 31/10). Referencia: cards brancos com sombra, capa larga encostada no
   topo, titulo grande e resumo em caixa normal, link "Ler artigo" discreto e uma
   faixa verde que aparece por baixo quando o card sobe no hover. Tudo preso em
   .bs-novo: o card e o mesmo do blog e das paginas de servico, que nao mudam. */
.bs-novo {background:linear-gradient(180deg,#fff 0%,#f2f6f4 100%);padding:clamp(72px,7vw,120px) 0;}
.bsn-head {text-align:center;max-width:760px;margin:0 auto clamp(40px,4vw,64px);}
.bsn-head .eyebrow {justify-content:center;}
.bs-novo .bsn-head h2 {
  margin:16px auto 0;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:clamp(28px, calc(1.1vw + 21px), 44px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.035em;
  text-transform:none;
  color:#161a19;
  text-wrap:balance;
}
.bsn-head .bsn-nw {white-space:nowrap;letter-spacing:-.01em;}
.bs-novo .bsn-head h2 .ital {color:#06a874;font-family:inherit;}
.bsn-head p {margin:18px auto 0;max-width:600px;font-size:clamp(15px,.9vw,17px);line-height:1.7;color:#5d6662;}
.bs-novo .bs-grid {gap:clamp(24px,2.4vw,40px);}
.bs-novo .bs-card {
  position:relative;
  padding:0;
  border:0;
  border-radius:10px;
  overflow:visible;
  box-shadow:0 1px 2px rgba(16,24,20,.04),0 12px 32px rgba(16,24,20,.08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
/* a faixa verde fica atras do card e so aparece quando ele sobe */
.bs-novo .bs-card::after {
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:40px;
  border-radius:0 0 10px 10px;
  background:#06a874;
  z-index:-1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.bs-novo .bs-card:hover {transform:translateY(-8px);box-shadow:0 18px 40px rgba(16,24,20,.12);}
.bs-novo .bs-card:hover::after {transform:translateY(8px);}
.bs-novo .bs-cover {border-radius:10px 10px 0 0;}
.bs-novo .bs-cover img {aspect-ratio:16/9;}
.bs-novo .bs-card:hover .bs-cover img {transform:scale(1.03);}
.bs-novo .bs-body {padding:clamp(24px,2.2vw,34px);background:#fff;border-radius:0 0 10px 10px;min-height:250px;}
.bs-novo .bs-meta {text-transform:none;letter-spacing:0;font-size:13px;color:#7a8580;display:flex;align-items:center;}
.bs-novo .bs-meta .bs-autor {display:none;}
.bs-novo .bs-meta b {font-weight:600;color:#06805b;}
.bs-novo .bs-card h3 {margin-top:12px;font-size:clamp(19px,calc(.6vw + 13px),24px);line-height:1.3;letter-spacing:-.02em;color:#161a19;}
.bs-novo .bs-card:hover h3 {color:#161a19;}
.bs-novo .bs-card p {font-size:15px;line-height:1.75;color:#5d6662;}
.bs-novo .bs-btn {text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;gap:8px;color:#161a19;}
.bs-novo .bs-card:hover .bs-btn {color:#06805b;}
.bsn-temas {display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:clamp(36px,3.4vw,52px);}
.bsn-temas a {font-size:14px;font-weight:500;color:#5d6662;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.bsn-temas a:hover {color:#06805b;border-bottom-color:#06805b;}
.bs-novo .bs-all {margin-top:clamp(28px,2.6vw,40px);}
.bsn-todos {
  display:inline-flex;align-items:center;
  padding:16px 30px;
  border:1px solid #161a19;border-radius:999px;
  font-size:15px;font-weight:600;color:#161a19;text-decoration:none;
  transition:background-color .25s ease,color .25s ease;
}
.bsn-todos:hover,.bsn-todos:focus-visible {background:#161a19;color:#fff;}
@media(max-width:980px){
  .bs-novo .bs-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .bs-novo .bs-grid > :nth-child(3) {display:none;}
}
@media(max-width:640px){
  .bs-novo .bs-grid {grid-template-columns:1fr;gap:28px;}
  .bs-novo .bs-grid > :nth-child(3) {display:flex;}
  .bs-novo .bs-body {min-height:0;}
}