/* ══════════════════════════════════════════════════════════
   0. FONTE — Instrument Sans, servida pelo próprio domínio
   ══════════════════════════════════════════════════════════
   Antes vinha do fonts.googleapis.com. Self-hosted: uma origem a menos
   no caminho crítico, sem DNS/TLS de terceiro e sem enviar IP do visitante
   para fora. É fonte variável, então o mesmo arquivo cobre 400–600 —
   por isso um `font-weight` em faixa em vez de três arquivos iguais. */
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/fonts/instrument-sans-latin-ext.woff2?__frsh_c=ba13c9c6a87225fa212012ef25e50200d18cf292") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/fonts/instrument-sans-latin.woff2?__frsh_c=ba13c9c6a87225fa212012ef25e50200d18cf292") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ══════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════ */
:root{
  --ink:#0a0a0a; --on-ink:#fff;
  --gray-600:#8d8d8d;
  /* Texto corrido. O --gray-600 continua servindo a rótulo, meta e link
     de interface, que devem mesmo recuar; parágrafo é para ler, e a
     #8d8d8d deixava a leitura clara demais. */
  --texto:#575757;
  --gray-500:#9a9a9a; --gray-300:#c9c9c9;
  --line:#e2e2e2; --line-soft:#efefef;
  --ph:#e3e3e3; --ph-2:#ededed; --frame:#cfcfcf; --beige:#e7e8e0;
  --surface:#fff; --panel:#fafafa; --card:#f2f1ee;
  --dot:#c9c9c9; --wire:#b9b9b9;
  --accent:#e2fb50;
  /* O verde da barra do logo. Estava cravado em seis lugares (colagens,
     HeroCopy, faixa do deploy) sem nunca ter virado token. */
  --mint:#6fffce; --on-accent:#0a0a0a;
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:32px; --r-pill:999px;
  --font:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t:.22s cubic-bezier(.4,0,.2,1);
  --slide:.62s cubic-bezier(.32,.72,.28,1);
  --pad:22px;
  --gutter:clamp(16px,4vw,64px);
  --max:1440px;
  --gap:14px;
  /* Tamanho e recuo do botão flutuante de WhatsApp. São tokens porque
     o rodapé precisa reservar exatamente esse canto: se os dois valores
     divergirem, o botão volta a cobrir a barra legal. */
  --zap:56px; --zap-recuo:clamp(16px,3vw,28px);
  /* Folga que todo alvo de âncora precisa reservar. O cabeçalho é fixo em
     todas as páginas: sem isto o título rolado para uma âncora para por
     baixo dele. Medido no estado rolado, que é o mais baixo (65px). */
  --ancora:clamp(84px,10vh,108px);
}
@media (min-width:900px){:root{--gutter:46px;--max:1180px;--gap:18px}}
/* ══════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Rolagem animada nas âncoras: "Ver planos" descendo até o trilho, o sumário
   dos posts indo até o heading, os links dos Termos. O destino já tem folga
   via `scroll-margin-top` (ver #planos e .post-conteudo h2/h3), senão o
   cabeçalho fixo da v2 cobriria o título ao chegar.

   As rolagens do JS são todas horizontais, nos trilhos, e declaram o próprio
   `behavior` — esta regra não interfere nelas. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}



/* faixa com malha de pontos */
.dotted{position:relative}
.dotted::before{
  content:"";position:absolute;inset:0 calc(var(--gutter)*-1);
  background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);
  background-size:27px 27px;background-position:11px 11px;pointer-events:none;
  opacity:.45;
}
/* O `.conteudo` do modo fluido também precisa deixar passar: sem o
   segundo seletor os filhos ficariam abaixo da malha. */
.dotted > *,.dotted > .conteudo > *{position:relative}

/* ══════════════════════════════════════════════════════════
   3. HEADER
   ══════════════════════════════════════════════════════════ */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:90}
.logo{width:120px;height:44px;flex:none;color:var(--ink)}
.logo svg{display:none}
.logo .fg{fill:currentColor}.logo .bg{fill:var(--surface)}
.topnav{display:none}
@media (min-width:900px){
  .logo{width:120px;height:44px}
  .topnav{display:flex;align-items:center;gap:2px;margin-left:22px;margin-right:auto}
  .topnav a{
    padding:11px 18px;border-radius:var(--r-pill);border:1.4px solid transparent;
    font-size:15px;letter-spacing:-.2px;color:var(--gray-600);transition:all var(--t);
  }
  .topnav a:hover{color:var(--ink);border-color:var(--line)}
  .topnav a.is-on{color:var(--ink);font-weight:500}
  .nav .burger,.nav .label{display:none}
  .nav{padding:9px}
}
.nav{display:flex;align-items:center;gap:12px;background:var(--ink);border-radius:var(--r-pill);padding:0 20px;height:48px;margin-left:auto;cursor:pointer}
@media (min-width:900px){.nav{margin-left:0}}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:48px;background:none;border:0;cursor:pointer;padding:0;flex:none}
.burger span{display:block;height:1.6px;background:var(--on-ink);border-radius:2px;width:100%;transition:transform var(--t),width var(--t)}
.burger span:last-child{width:80%}
.nav.is-open .burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.is-open .burger span:last-child{width:100%;transform:translateY(-3.3px) rotate(-45deg)}
.nav .label{color:var(--on-ink);font-size:17px;letter-spacing:-.2px}
/* ── menu mobile ── */
.mmenu[hidden]{display:none}
.mmenu{
  position:fixed;inset:0;z-index:80;background:var(--surface);
  padding:96px var(--gutter) 40px;overflow-y:auto;
  animation:mmenu-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes mmenu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mmenu__nav{display:flex;flex-direction:column}
/* Só os itens do menu. Antes isto pegava qualquer <a> dentro do menu,
   inclusive os botões de ação — o "Ver planos" herdava a cor escura e o
   texto sumia no fundo preto. */
.mmenu__grupo a{
  display:block;
  font-size:22px;letter-spacing:-.4px;color:var(--ink);
  padding:16px 2px;border-bottom:1.4px solid var(--line-soft);
}
.mmenu__grupo a:last-child{border-bottom:0}
body.is-locked{overflow:hidden}
@media (min-width:900px){.mmenu{display:none}}

/* ══════════════════════════════════════════════════════════
   4. HERO · CATÁLOGO
   ══════════════════════════════════════════════════════════ */

/* ── HERO WordPress (migrado de _local/heros/wordpress.html) ──
   Referência 820x300. Tudo em cqw, então escala junto com a largura.
   Cores originais do componente mapeadas para os tokens do site,
   para acompanhar o tema claro/escuro. */
/* Vitrine de produto: a colagem da hero fora do slot. Os painéis não têm
   altura própria — todo o desenho é `position:absolute` — então quem dá a
   moldura é o contêiner. Sem esta proporção o bloco renderiza com 0px de
   altura e a arte some. É a mesma razão do slot: os elementos são
   posicionados em cqw (% da largura), então a moldura não reposiciona nada. */
.vitrine__arte [data-hero-panel]{aspect-ratio:1071/417}
/* O Deploy pede uma moldura mais alta que as outras colagens: o `.deploy-stack`
   tem proporção 798/340 e, dentro de 1071/417, os quatro cartões vazavam por
   baixo e a pílula passava 23px da direita. Na página do produto isso não
   aparece porque o stack bate no teto de 1100px e sobra altura. */
.vitrine__arte [data-hero-panel="deploy"]{aspect-ratio:1071/490}
/* A pílula é posicionada em `right:-3%` do stack, de propósito: ela deve
   passar da borda da pilha de cartões. Na página do produto o stack para em
   1100px dentro de um painel de 1440, e essa sobra a acomoda. Aqui o stack
   ocupava a largura inteira e a pílula caía fora do painel, que tem
   `overflow:hidden`. Os 92% devolvem a margem que ela precisa. */
.vitrine__arte .deploy-stack{width:92%}
@media (max-width:640px){.vitrine__arte [data-hero-panel]{aspect-ratio:640/400}}

/* Só acima do breakpoint compacto: abaixo de 640px o `@media` original
   já reposiciona a colagem para telas estreitas, e estas regras, de
   especificidade maior, venciam aquele bloco e produziam um híbrido —
   tamanho novo com o `translateX` antigo, e 86px de vão sobrando. */
@media (min-width:641px){
  /* Na vitrine a colagem ocupa metade da largura que tem no topo da página, e
     como tudo ali é dimensionado em cqw os elementos encolhem junto: a pílula
     ficava com 9px de fonte. Aqui eles voltam a 1,35x.

     O wordmark fica de fora de propósito — ele já é a moldura da composição, e
     crescer junto só o faria estourar as bordas.

     As posições foram recalculadas, não só os tamanhos: o topo da foto é o
     âncora vertical e o centro horizontal de cada peça é preservado, senão a
     composição se desmancha ao escalar. */
  .vitrine__arte .em-hero__photo{
    top:1.30cqw;left:32.35cqw;width:35.55cqw;height:37.13cqw;border-radius:3.78cqw;
  }
  .vitrine__arte .em-hero__badge{
    top:5.22cqw;left:66.03cqw;width:9.59cqw;height:9.59cqw;
  }
  .vitrine__arte .em-hero__binary{
    top:20.58cqw;width:39.16cqw;font-size:1.54cqw;letter-spacing:.027cqw;
  }
  .vitrine__arte .em-hero__pill{gap:1.28cqw}
  .vitrine__arte .em-hero__pill img{width:2.13cqw;height:2.13cqw}
  .vitrine__arte .em-hero__pill--pro{
    top:26.28cqw;left:21.06cqw;height:5.86cqw;padding:0 2.55cqw;font-size:1.81cqw;
  }
  .vitrine__arte .em-hero__pill--mail{
    top:30.87cqw;left:55.49cqw;height:6.60cqw;padding:0 2.77cqw;font-size:1.92cqw;
  }

  /* A colagem da loja tem outras proporções, então a escala é recalculada
     para ela — não dá para reaproveitar os números do Elementor. Fator 1,32:
     em 1,35 a foto passava 0,25cqw da moldura. Mesmo método: o topo da foto
     é o âncora vertical, os centros horizontais são preservados, e o
     wordmark fica de fora. */
  .vitrine__arte .lj-hero__photo{
    top:1cqw;left:38.85cqw;width:30.10cqw;height:37.34cqw;border-radius:2.71cqw;
  }
  .vitrine__arte .lj-hero__badge{
    top:5.49cqw;left:68.42cqw;width:6.60cqw;height:6.60cqw;border-radius:1.69cqw;
  }
  .vitrine__arte .lj-hero__spark{top:28.46cqw;left:55.35cqw;width:5.54cqw}
  .vitrine__arte .lj-hero__binary{
    top:15.08cqw;width:32.17cqw;font-size:1.48cqw;letter-spacing:.026cqw;
  }
  .vitrine__arte .lj-hero__pill{gap:1.48cqw}
  .vitrine__arte .lj-hero__pill--loja{
    top:14.71cqw;left:18.39cqw;height:6.60cqw;padding:0 2.64cqw;font-size:1.91cqw;
  }
  .vitrine__arte .lj-hero__pill--loja img{width:2.90cqw;height:2.90cqw}
  .vitrine__arte .lj-hero__pill--pedido{
    top:32.02cqw;left:59.97cqw;height:6.07cqw;padding:0 2.44cqw;font-size:1.91cqw;
  }
  .vitrine__arte .lj-hero__pill--pedido img{width:2.64cqw;height:2.64cqw}
}

.hero-slot{margin:42px calc(var(--gutter)*-1) 30px}
@media (min-width:900px){.hero-slot{margin-top:52px}}
.hero-slot [data-hero-panel][hidden]{display:none}
/* altura padronizada para todos os heroes do slot (a da Loja digital).
   Os elementos são posicionados em cqw (% da LARGURA), então mudar a
   altura só ajusta a moldura — nada reposiciona nem corta. */
.hero-slot [data-hero-panel]{aspect-ratio:1071/417}
/* Páginas de serviço: um hero só. A arte de cada um termina numa altura
   diferente dentro da moldura padronizada, então o vão até o texto ia de
   78px (wordpress) a 221px (elementor). A compensação abaixo aproxima esse
   vão do da página de deploy (~56px). Em %, que resolve contra a largura
   do slot — escala junto com a página. */
@media (min-width:900px){
  .hero-slot--page [data-hero-panel="wordpress"]{margin-bottom:-1.5%}
  .hero-slot--page [data-hero-panel="email"]{margin-bottom:-4.2%}
  .hero-slot--page [data-hero-panel="loja"]{margin-bottom:-7.7%}
  .hero-slot--page [data-hero-panel="elementor"]{margin-bottom:-11.5%}
}
/* no mobile a composição muda (foto centralizada, wordmark maior), então a
   folga é outra — elementor e wordpress precisam de um ajuste próprio */
@media (max-width:899px){
  .hero-slot--page [data-hero-panel="elementor"]{margin-bottom:-9%}
  .hero-slot--page [data-hero-panel="wordpress"]{margin-bottom:-1.8%}
}
@media (max-width:640px){.hero-slot [data-hero-panel]{aspect-ratio:640/400}}

.wp-hero{
  position:relative;width:100%;overflow:hidden;
  container-type:inline-size;isolation:isolate;user-select:none;
  --wp-red:#E03E1A;
  --wp-shadow:0 .60cqw 2.00cqw rgba(23,23,26,.10),0 .12cqw .40cqw rgba(23,23,26,.06);
}

/* 1. wordmark gigante, atrás da foto */
.wp-hero__wordmark{
  position:absolute;top:13.41cqw;left:50%;transform:translateX(-50%);
  width:103%;height:auto;display:block;z-index:1;pointer-events:none;opacity:.14;
  animation:wp-rise-wide 1.1s cubic-bezier(.16,.84,.36,1) .05s backwards;
}
/* 2. string binária decorativa */
.wp-hero__binary{
  position:absolute;top:12.80cqw;right:0;width:28.66cqw;margin:0;z-index:2;
  font-family:var(--font);font-size:1.22cqw;line-height:1;letter-spacing:.02cqw;
  color:var(--gray-300);white-space:nowrap;overflow:hidden;
  direction:rtl;text-align:right;border-left:.18cqw solid transparent;
  animation:wp-type 1.05s steps(40,end) .95s backwards,wp-caret .55s steps(1,end) .95s infinite;
}

/* 3. foto */
.wp-hero__photo{
  position:absolute;top:1.22cqw;left:50%;transform:translateX(-50%);
  width:22.80cqw;height:28.29cqw;object-fit:cover;object-position:center top;
  border-radius:2.75cqw;display:block;z-index:3;
  animation:wp-rise-center 1s cubic-bezier(.16,.84,.36,1) .28s backwards;
}

/* 4. ícone Elementor */
.wp-hero__elementor{
  position:absolute;top:5.49cqw;left:61.95cqw;width:6.34cqw;height:6.34cqw;
  border-radius:1.71cqw;display:block;z-index:4;
  animation:wp-pop .7s cubic-bezier(.34,1.4,.5,1) .52s backwards;
}

/* 5. pílulas flutuantes */
.wp-hero__pill{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.96cqw;
  border-radius:999px;font-size:1.55cqw;font-weight:500;letter-spacing:-.01em;
  line-height:1;white-space:nowrap;
}
.wp-hero__pill img{width:1.92cqw;height:1.92cqw;display:block;flex:none}
.wp-hero__pill--modelos{
  top:19.15cqw;left:25.24cqw;height:4.51cqw;padding:0 2.09cqw;
  background:var(--wp-red);color:#fff;box-shadow:var(--wp-shadow);
  animation:wp-pill-left .75s cubic-bezier(.34,1.3,.5,1) .66s backwards;
}
.wp-hero__pill--recursos{
  top:25.61cqw;left:54.76cqw;height:4.72cqw;padding:0 2.30cqw;
  background:var(--surface);color:var(--ink);box-shadow:var(--wp-shadow);
  animation:wp-pill-right .75s cubic-bezier(.34,1.3,.5,1) .80s backwards;
}
/* Os três `*-rise-wide` animam o wordmark, que por ser o maior elemento do
   hero é o LCP da página. Eles NÃO animam opacidade de propósito: nascendo
   em `opacity:0` o LCP só era registrado quando a animação terminava, e a
   métrica ficava em ~1,2s numa página que pinta em 60ms. O movimento é o
   mesmo; o que saiu foi só o fade. */
@keyframes wp-rise-wide{from{transform:translateX(-50%) translateY(2.4cqw) scale(.985)}}
@keyframes wp-rise-center{from{opacity:0;transform:translateX(-50%) translateY(3.2cqw) scale(.96)}}
@keyframes wp-pop{from{opacity:0;transform:translateY(1.2cqw) scale(.7)}}
@keyframes wp-pill-left{from{opacity:0;transform:translateX(-2.4cqw) scale(.94)}}
@keyframes wp-pill-right{from{opacity:0;transform:translateX(2.4cqw) scale(.94)}}
@keyframes wp-type{from{width:0}}
@keyframes wp-caret{0%,49%{border-left-color:var(--gray-300)}50%,100%{border-left-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  .wp-hero__pill,.wp-hero__elementor{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .wp-hero:hover .wp-hero__pill--modelos,
  .wp-hero:hover .wp-hero__pill--recursos{transform:translateY(-.45cqw)}
  .wp-hero:hover .wp-hero__elementor{transform:translateY(-.35cqw)}
}
@media (prefers-reduced-motion:reduce){
  .wp-hero__wordmark,.wp-hero__photo,.wp-hero__elementor,
  .wp-hero__pill,.wp-hero__binary{animation:none !important}
}

/* mobile: a escala proporcional pura ficaria pequena demais */
@media (max-width:640px){
  .wp-hero__wordmark{width:150%;top:22cqw}
  .wp-hero__photo{top:2cqw;width:38cqw;height:47cqw;border-radius:4.4cqw}
  .wp-hero__elementor{top:4.5cqw;left:auto;right:5cqw;width:8.4cqw;height:8.4cqw;border-radius:2.2cqw}
  .wp-hero__binary{display:none}
  .wp-hero__pill{font-size:2.5cqw;gap:1.4cqw}
  .wp-hero__pill img{width:3cqw;height:3cqw}
  .wp-hero__pill--modelos{top:24cqw;left:3cqw;height:7cqw;padding:0 3.4cqw}
  .wp-hero__pill--recursos{top:37cqw;left:auto;right:3cqw;height:7.3cqw;padding:0 3.7cqw}
}

.foot .scroll{letter-spacing:.06em}

.fade{position:absolute;top:0;bottom:4px;width:34px;pointer-events:none}
.fade.l{left:0;background:linear-gradient(90deg,var(--surface) 30%,transparent)}
.fade.r{right:0;background:linear-gradient(270deg,var(--surface) 30%,transparent)}
@media (min-width:900px){.fade{display:none}}

/* ══════════════════════════════════════════════════════════
   5. TIPOGRAFIA DE SEÇÃO
   ══════════════════════════════════════════════════════════ */
.section{margin-top:96px}
@media (min-width:900px){.section{margin-top:132px}}
@media (min-width:1280px){.section{margin-top:168px}}
.split{display:grid;gap:10px}
@media (max-width:899px){
  .split--cta-last > div:first-child{display:contents}
  /* viram itens do grid: sem esticar os elementos que sao inline por natureza */
  .split--cta-last > div:first-child > .tagline,
  .split--cta-last > div:first-child > .eyebrow{justify-self:start}
  .split--cta-last > div:first-child > .cta{order:2;justify-self:center;margin-top:28px}
  .split--cta-last > .flow{order:1}
}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
  .split--rev > *:first-child{order:2}
  .split--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
@media (min-width:1280px){.split{gap:88px}}

.tagline{display:inline-flex;border:1.4px solid var(--ink);border-radius:var(--r-pill);padding:8px 16px;font-size:12.5px;letter-spacing:-.1px;margin-bottom:22px}
.title{font-size:38px;line-height:1.06;letter-spacing:-1.8px;font-weight:400;max-width:13ch}
@media (min-width:900px){.title{font-size:50px;letter-spacing:-2.4px}}
@media (min-width:1280px){.title{font-size:60px;letter-spacing:-3px;max-width:12ch}}
@media (max-width:370px){.title{font-size:32px;letter-spacing:-1.4px}}
.para{font-size:18px;line-height:1.55;color:var(--texto);margin-top:20px;max-width:36ch}
@media (min-width:900px){.para{margin-top:24px;max-width:44ch}}


/* ══════════════════════════════════════════════════════════
   6. DEPOIMENTOS
   ══════════════════════════════════════════════════════════ */
.voices__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.voices__title{font-size:38px;font-weight:400;letter-spacing:-1.8px;line-height:1.05}
.voices__title b{font-weight:500}
@media (min-width:900px){.voices__title{font-size:52px;letter-spacing:-2.5px}}
@media (min-width:1280px){.voices__title{font-size:62px;letter-spacing:-3px}}
.arrowbtn:hover{border-color:var(--ink);transform:scale(1.05)}
.arrowbtn:active{transform:scale(.96)}
.counter{font-size:13px;color:var(--gray-600);min-width:56px;text-align:center}
.counter b{color:var(--ink);font-weight:500}

.voices-embedded{min-width:0}
.voices-embedded .dots{margin-top:20px}
.voices__controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px}
@media (max-width:899px){.voices-embedded{margin-top:54px}}


/* ══════════════════════════════════════════════════════════
   7. HERO SECUNDÁRIA
   ══════════════════════════════════════════════════════════ */
.shot{position:relative;margin-top:34px;padding:0 6px}
@media (min-width:900px){.shot{margin-top:0}}
@media (min-width:900px){.shot{max-width:520px;margin-left:auto;padding:0}.shot__img{aspect-ratio:5/6}}

/* ══════════════════════════════════════════════════════════
   8. COLAGENS
   ══════════════════════════════════════════════════════════ */
.collage{position:relative;width:100%;container-type:inline-size;margin-top:38px}
@media (min-width:900px){.collage{max-width:600px;margin-left:auto;margin-right:auto}}
@media (min-width:900px){.collage{margin-top:0}}
.collage > *{position:absolute}

/* — colagem A (mensagem) — */
/* ── HERO E-mail profissional (migrado de _local/heros/hero-email.html) ──
   Referência 1141x430. Mesmas adaptações dos outros heroes:
   cores próprias do componente trocadas pelos tokens do tema. */
.em-hero{
  position:relative;width:100%;overflow:hidden;
  container-type:inline-size;isolation:isolate;user-select:none;
  --em-graphite:#454545;
  --em-shadow:0 .60cqw 2.00cqw rgba(23,23,26,.10),0 .12cqw .40cqw rgba(23,23,26,.06);
}
.em-hero__wordmark{
  position:absolute;top:7.45cqw;left:50%;transform:translateX(-50%);
  width:88%;height:auto;display:block;z-index:1;pointer-events:none;opacity:100;
  animation:em-rise-wide 1.1s cubic-bezier(.16,.84,.36,1) .05s backwards;
}
.em-hero__binary{
  position:absolute;top:15.58cqw;right:0;width:29.01cqw;margin:0;z-index:2;
  font-family:var(--font);font-size:1.14cqw;line-height:1;letter-spacing:.02cqw;
  color:var(--gray-300);white-space:nowrap;overflow:hidden;
  direction:rtl;text-align:right;border-left:.16cqw solid transparent;
  animation:em-type 1.05s steps(40,end) .95s backwards,em-caret .55s steps(1,end) .95s infinite;
}
.em-hero__photo{
  /* A caixa precisa ter a proporção do arquivo (429x448 = 0.958). Estava em
     22x27.50cqw = 0.80, e o `object-fit:cover` comia 16,5% da largura — os
     ombros saíam cortados dos dois lados. Mantida a altura e alargada a
     caixa (27.50 x 0.958 = 26.33cqw), com o `left` recuado metade do
     crescimento para o centro da composição não andar. */
  position:absolute;top:1.30cqw;left:37.96cqw;width:26.33cqw;height:27.50cqw;
  object-fit:cover;object-position:50% 22%;border-radius:2.80cqw;display:block;z-index:3;
  animation:em-rise 1s cubic-bezier(.16,.84,.36,1) .28s backwards;
}
.em-hero__badge{
  position:absolute;top:4.20cqw;left:62.90cqw;width:7.10cqw;height:7.10cqw;
  border-radius:50%;display:block;z-index:4;
  animation:em-pop .7s cubic-bezier(.34,1.4,.5,1) .52s backwards;
}
.em-hero__pill{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.95cqw;
  border-radius:999px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
}
.em-hero__pill img{width:1.58cqw;height:1.58cqw;display:block;flex:none}
.em-hero__pill--pro{
  top:19.80cqw;left:29.60cqw;height:4.34cqw;padding:0 1.89cqw;font-size:1.34cqw;
  background:var(--em-graphite);color:#fff;box-shadow:var(--em-shadow);
  animation:em-pill-left .75s cubic-bezier(.34,1.3,.5,1) .66s backwards;
}
.em-hero__pill--mail{
  top:23.20cqw;left:55.10cqw;height:4.89cqw;padding:0 2.05cqw;font-size:1.42cqw;
  background:var(--surface);color:var(--ink);box-shadow:var(--em-shadow);
  animation:em-pill-right .75s cubic-bezier(.34,1.3,.5,1) .80s backwards;
}
/* star.svg é quase branco (#F8F8F6): no hero do WordPress ele cai sobre a
   pílula vermelha e lê bem, mas aqui a pílula é clara e ele sumia
   (contraste medido: 1,03:1). No tema escuro a pílula escurece e não precisa. */
/* star.svg é quase branco (#F8F8F6) e sumia nesta pílula clara
   (contraste medido: 1,03:1). */
[data-hero-panel="elementor"] .em-hero__pill--mail img{filter:invert(1)}

@keyframes em-rise-wide{from{transform:translateX(-50%) translateY(2cqw) scale(.985)}}
@keyframes em-rise{from{opacity:0;transform:translateY(2.6cqw) scale(.96)}}
@keyframes em-rise-center{from{opacity:0;transform:translateX(-50%) translateY(4cqw) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes em-pop{from{opacity:0;transform:translateY(1cqw) scale(.7)}}
@keyframes em-pill-left{from{opacity:0;transform:translateX(-2cqw) scale(.94)}}
@keyframes em-pill-right{from{opacity:0;transform:translateX(2cqw) scale(.94)}}
@keyframes em-type{from{width:0}}
@keyframes em-caret{0%,49%{border-left-color:var(--gray-300)}50%,100%{border-left-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  .em-hero__pill,.em-hero__badge{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .em-hero:hover .em-hero__pill--pro,
  .em-hero:hover .em-hero__pill--mail{transform:translateY(-.4cqw)}
  .em-hero:hover .em-hero__badge{transform:translateY(-.3cqw) rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){
  .em-hero__wordmark,.em-hero__photo,.em-hero__badge,
  .em-hero__pill,.em-hero__binary{animation:none !important}
}
@media (max-width:640px){
  .em-hero__wordmark{width:118%;top:23cqw}
  .em-hero__photo{top:2cqw;left:50%;transform:translateX(-50%);width:45cqw;height:47cqw;border-radius:4.4cqw;animation-name:em-rise-center}
  .em-hero__badge{top:4cqw;left:auto;right:5cqw;width:11.5cqw;height:11.5cqw}
  .em-hero__binary{display:none}
  .em-hero__pill{gap:1.4cqw}
  .em-hero__pill img{width:2.9cqw;height:2.9cqw}
  .em-hero__pill--pro{top:26cqw;left:3cqw;height:7.4cqw;padding:0 3.2cqw;font-size:2.5cqw}
  .em-hero__pill--mail{top:41cqw;left:auto;right:3cqw;height:7.9cqw;padding:0 3.4cqw;font-size:2.6cqw}
}

/* ── PÚBLICOS / audience-row (migrado de _local: section.audience) ──
   Acordeão horizontal: o card ativo abre 1,68x. Os cards trazem o próprio
   véu escuro sobre a foto, então funcionam em qualquer fundo — a faixa
   escura da seção original não veio junto. */
.audience-row{
  display:flex;gap:clamp(10px,1.6vw,18px);
  height:clamp(250px,27vw,360px);
  margin-top:clamp(38px,5.8vw,70px);
}
.audience-card{
  position:relative;flex:1 1 0;min-width:0;display:block;
  padding:0;border:0;border-radius:6px;overflow:hidden;
  background:#25252a;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:flex-grow .75s cubic-bezier(.22,.68,.24,1);
}
.audience-card.is-active{flex-grow:1.68}
.audience-card__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.68);transition:filter .75s ease;
}
.audience-card.is-active .audience-card__media{filter:brightness(1)}
.audience-card__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,6,.9) 0%,rgba(6,6,6,.5) 30%,rgba(6,6,6,0) 62%);
}
.audience-card__text{
  display:block;position:absolute;left:0;right:0;bottom:0;
  padding:0 clamp(16px,2vw,24px) clamp(18px,2.2vw,26px);
}
.audience-card__title{
  display:block;margin:0;font-size:16px;font-weight:600;line-height:1.3;color:#fff;
}
.audience-card__desc{
  display:block;margin:0;font-size:clamp(12.5px,1.05vw,13px);line-height:1.45;
  color:rgba(255,255,255,.72);
  max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);
  transition:max-height .6s cubic-bezier(.22,.68,.24,1),opacity .4s ease,
             transform .6s cubic-bezier(.22,.68,.24,1),margin-top .6s cubic-bezier(.22,.68,.24,1);
}
.audience-card.is-active .audience-card__desc{max-height:4.5em;opacity:1;transform:none;margin-top:6px}

/* mobile: vira trilho deslizante, todos os textos visíveis */
@media (max-width:640px){
  .audience-row{
    height:auto;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter)*-1);
    padding-inline:var(--gutter);
  }
  .audience-row::-webkit-scrollbar{display:none}
  .audience-card{flex:0 0 min(78vw,340px);height:clamp(240px,78vw,330px);scroll-snap-align:start}
  .audience-card.is-active{flex-grow:0}
  .audience-card__media{filter:brightness(.9)}
  .audience-card__desc{max-height:4.5em;opacity:1;transform:none;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .audience-card,.audience-card__media,.audience-card__desc{transition:none}
}

/* ── painel do Deploy dentro do slot ──
   Reaproveita a cena do topo da página (.deploy-stage); aqui ela é
   absoluta para preencher a moldura de altura padrão do slot. */
.deploy-panel{position:relative;width:100%;overflow:hidden;container-type:inline-size}
.deploy-panel .deploy-stage{position:absolute;inset:0;min-height:0;margin-top:0}
.deploy-panel .deploy-stack-wrap{padding-top:clamp(14px,3.4cqw,40px)}

/* ── HERO Loja digital (migrado de _local/heros/hero-loja.html) ──
   Referência 1071x417. Mesmas adaptações do hero WordPress:
   cores próprias do componente trocadas pelos tokens do tema. */
.lj-hero{
  position:relative;width:100%;overflow:hidden;
  container-type:inline-size;isolation:isolate;user-select:none;
  --lj-shadow:0 .60cqw 2.00cqw rgba(23,23,26,.10),0 .12cqw .40cqw rgba(23,23,26,.06);
}
.lj-hero__wordmark{
  position:absolute;top:7.47cqw;left:50%;transform:translateX(-50%);
  width:102%;height:auto;display:block;z-index:1;pointer-events:none;opacity:100;
  animation:lj-rise-wide 1.1s cubic-bezier(.16,.84,.36,1) .05s backwards;
}
.lj-hero__binary{
  position:absolute;top:11.67cqw;right:0;width:24.37cqw;margin:0;z-index:2;
  font-family:var(--font);font-size:1.12cqw;line-height:1;letter-spacing:.02cqw;
  color:var(--gray-300);white-space:nowrap;overflow:hidden;
  direction:rtl;text-align:right;border-left:.16cqw solid transparent;
  animation:lj-type 1.05s steps(40,end) .95s backwards,lj-caret .55s steps(1,end) .95s infinite;
}
.lj-hero__photo{
  position:absolute;top:1cqw;left:42.50cqw;width:22.80cqw;height:28.29cqw;
  object-fit:cover;object-position:50% 25%;border-radius:2.05cqw;display:block;z-index:3;
  animation:lj-rise 1s cubic-bezier(.16,.84,.36,1) .28s backwards;
}
.lj-hero__badge{
  position:absolute;top:4.40cqw;left:64.90cqw;width:5cqw;height:5cqw;
  border-radius:1.28cqw;display:block;z-index:4;
  animation:lj-pop .7s cubic-bezier(.34,1.4,.5,1) .52s backwards;
}
.lj-hero__spark{
  position:absolute;top:21.80cqw;left:55cqw;width:4.20cqw;height:auto;
  display:block;z-index:4;pointer-events:none;
  animation:lj-spark .8s cubic-bezier(.34,1.4,.5,1) .88s backwards;
}
.lj-hero__pill{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:1.12cqw;
  border-radius:999px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  background:var(--surface);color:var(--ink);box-shadow:var(--lj-shadow);
}
.lj-hero__pill img{display:block;flex:none}
.lj-hero__pill--loja{
  top:11.39cqw;left:27cqw;height:5cqw;padding:0 2cqw;font-size:1.45cqw;
  animation:lj-pill-left .75s cubic-bezier(.34,1.3,.5,1) .66s backwards;
}
.lj-hero__pill--loja img{width:2.20cqw;height:2.20cqw}
.lj-hero__pill--pedido{
  top:24.50cqw;left:58.50cqw;height:4.60cqw;padding:0 1.85cqw;font-size:1.45cqw;
  animation:lj-pill-right .75s cubic-bezier(.34,1.3,.5,1) .80s backwards;
}
.lj-hero__pill--pedido img{width:2cqw;height:2cqw}

@keyframes lj-rise-wide{from{transform:translateX(-50%) translateY(2cqw) scale(.985)}}
@keyframes lj-rise{from{opacity:0;transform:translateY(2.6cqw) scale(.96)}}
@keyframes lj-rise-center{from{opacity:0;transform:translateX(-50%) translateY(4cqw) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes lj-pop{from{opacity:0;transform:translateY(1cqw) scale(.7)}}
@keyframes lj-spark{from{opacity:0;transform:scale(.4) rotate(-25deg)}}
@keyframes lj-pill-left{from{opacity:0;transform:translateX(-2cqw) scale(.94)}}
@keyframes lj-pill-right{from{opacity:0;transform:translateX(2cqw) scale(.94)}}
@keyframes lj-type{from{width:0}}
@keyframes lj-caret{0%,49%{border-left-color:var(--gray-300)}50%,100%{border-left-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  .lj-hero__pill,.lj-hero__badge{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .lj-hero:hover .lj-hero__pill--loja,
  .lj-hero:hover .lj-hero__pill--pedido{transform:translateY(-.4cqw)}
  .lj-hero:hover .lj-hero__badge{transform:translateY(-.3cqw)}
}
@media (prefers-reduced-motion:reduce){
  .lj-hero__wordmark,.lj-hero__photo,.lj-hero__badge,
  .lj-hero__spark,.lj-hero__pill,.lj-hero__binary{animation:none !important}
}
@media (max-width:640px){
  .lj-hero__wordmark{width:150%;top:23cqw}
  .lj-hero__photo{top:2cqw;left:50%;transform:translateX(-50%);width:38cqw;height:47cqw;border-radius:4.4cqw;animation-name:lj-rise-center}
  .lj-hero__badge{top:4cqw;left:auto;right:5cqw;width:9cqw;height:9cqw;border-radius:2.3cqw}
  .lj-hero__spark{top:35cqw;left:7cqw;width:8cqw}
  .lj-hero__binary{display:none}
  .lj-hero__pill{gap:1.6cqw}
  .lj-hero__pill--loja{top:25cqw;left:3cqw;height:7.2cqw;padding:0 3cqw;font-size:2.5cqw}
  .lj-hero__pill--loja img{width:3.4cqw;height:3.4cqw}
  .lj-hero__pill--pedido{top:40cqw;left:auto;right:3cqw;height:7.4cqw;padding:0 3cqw;font-size:2.5cqw}
  .lj-hero__pill--pedido img{width:3.1cqw;height:3.1cqw}
}

/* ── PASSOS (faixa de 3, na seção "a gente cuida de tudo") ──
   Numeração no idioma que o projeto já usa: [ 01 ], como em .slide__idx
   e nos itens de plano. Tipografia espelha os cards de post. */
.steps{list-style:none;display:grid;gap:30px;margin-top:clamp(44px,5vw,64px)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px)}}
.step{border-top:1.4px solid var(--line);padding-top:18px}
.step__n{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600)}
.step__t{margin-top:12px;font-size:19px;font-weight:500;letter-spacing:-.5px;line-height:1.25}
.step__d{margin-top:9px;font-size:15px;line-height:1.5;color:var(--texto);max-width:34ch}

/* ── COLAGEM Elementor (migrada de _local: .promise > .collage) ──
   O original vivia numa seção escura; aqui a seção acompanha o tema,
   então os rótulos que assumiam fundo escuro passaram a usar tokens. */
.wp-collage{position:relative;width:100%;container-type:inline-size;aspect-ratio:480/430;margin-top:38px}
.wp-collage__photo{
  position:absolute;left:28.7%;top:15.8%;width:50.4%;height:73.3%;
  border-radius:3cqw;overflow:hidden;background:#26262a;z-index:1;
}
.wp-collage__photo img{width:100%;height:100%;object-fit:cover;display:block}

.wp-fl{position:absolute;z-index:2}
.wp-fl--ssl{left:7.9%;top:17.4%;width:16%;text-align:center}
.wp-fl--models{left:65.8%;top:2.3%;width:23.8%}
.wp-fl--logo{
  left:70%;top:14.8%;width:14.2%;aspect-ratio:1;
  display:grid;place-items:center;background:#34324a;border-radius:2.6cqw;
}
.wp-fl--logo svg,.wp-fl--logo img{width:42%;height:auto;display:block}
/* na página de Deploy o slot traz a marca do parceiro (Cloudflare), que é
   colorida e pede fundo neutro — ao contrário do roxo do Elementor */
.wp-fl--logo.is-light{background:#fff}
.wp-fl--perf{left:7.5%;top:41.9%;width:28%}
.wp-fl--resources{left:.4%;top:84.2%;width:26%}
.wp-fl--builder{left:64.6%;top:72.8%;width:25.8%}

/* itens sem caixa (ícone + rótulo) */
.wp-fl-icon{display:flex;align-items:center;gap:2.2cqw}
.wp-fl--ssl .wp-fl-icon{flex-direction:column;gap:1.6cqw}
.wp-fl-icon svg{display:block;width:100%;height:auto}
.wp-fl--ssl .wp-fl-icon > svg{width:7cqw}
.wp-fl--resources .wp-fl-icon > svg{width:4.4cqw;flex:0 0 auto}
.wp-fl-icon p{margin:0;font-size:2.7cqw;line-height:1.35;white-space:nowrap}
/* eram mint/cinza-claro sobre fundo escuro: sem contraste no tema claro */
.wp-fl--ssl .wp-fl-icon p{color:var(--ink);font-weight:500}
.wp-fl--resources .wp-fl-icon p{color:var(--gray-600)}

/* caixas */
.wp-fl-box{border-radius:2.4cqw;padding:3.2cqw}
.wp-fl-box__label{margin:0;font-size:2.5cqw;line-height:1.35}
.wp-fl-box__value{margin:2cqw 0 0;font-size:3.4cqw;line-height:1.25}
.wp-fl--models .wp-fl-box{background:#e9e9e7}
.wp-fl--models .wp-fl-box__label{color:#17181a;font-size:2.7cqw}
/* o vidro fosco pressupunha fundo escuro atrás; aqui vira cartão do tema */
.wp-fl--perf .wp-fl-box{
  background:var(--surface);border:1.4px solid var(--line);
  box-shadow:0 2cqw 4cqw rgba(0,0,0,.07);
}
.wp-fl--perf .wp-fl-box__label{color:var(--gray-600)}
.wp-fl--perf .wp-fl-box__value{color:var(--ink);margin-top:1.4cqw}
.wp-fl--perf .wp-flag{display:block;width:5.4cqw;height:auto;margin-top:2.4cqw;border-radius:.5cqw}
/* na variante do Deploy a caixa começa pela bandeira (sem rótulo acima) */
.wp-fl--perf .wp-flag:first-child{margin-top:0}
.wp-fl--builder .wp-fl-box{background:#b3a4e6}
.wp-fl--builder .wp-fl-box__label{color:#2a2542}
.wp-fl--builder .wp-fl-box__value{color:#17142b;font-size:3.1cqw;margin-top:4cqw}

@media (min-width:900px){.wp-collage{margin-top:0}}

/* — colagem B (agendamento) — */
/* ── COLAGEM renda recorrente (migrada de _local: .collage2 / StatBand) ──
   Medidas do design isolado 611x594, em % e cqw — nada com tamanho fixo.
   O original vivia numa faixa escura; as pílulas escuras passaram a usar
   os tokens, então acompanham o tema. O painel do gráfico segue claro nos
   dois temas, porque o r-chart.svg é traçado em quase-preto. */
.rc-collage{position:relative;container-type:inline-size;width:100%;aspect-ratio:611/594;margin-top:38px}
@media (min-width:900px){.rc-collage{margin-top:0}}

.rc-shot{position:absolute;z-index:1;border-radius:1.31cqw;background:#26262a;overflow:hidden}
.rc-media{width:100%;height:100%;object-fit:cover;display:block;border-radius:1.31cqw}
.rc-dotmark{position:absolute;left:91.75%;top:-2.6%;width:2.36cqw;height:auto;z-index:3}
.rc-shot--a{left:28.81%;top:13.13%;width:21.77%;height:16.5%;overflow:visible}
.rc-shot--b{left:52.7%;top:13.3%;width:22.09%;height:16.67%}
.rc-shot--c{left:49.1%;top:31.48%;width:21.77%;height:16.5%}
.rc-shot--d{left:53.19%;top:50.17%;width:26.02%;height:16.5%;overflow:visible}

.rc-rocket{position:absolute;left:70.65%;top:9.87%;width:7.69%;height:auto;z-index:3}
.rc-dashes{position:absolute;left:8.61%;top:28.45%;width:6.89%;height:auto;z-index:2}
/* arco que sai do foguete e termina atrás do painel */
.rc-arc{position:absolute;left:50.08%;top:16.18%;width:44.5%;height:auto;z-index:0;pointer-events:none}
/* seta que nasce atrás da foto e aponta para o ticket */
.rc-arrow{position:absolute;left:65.3%;top:66.23%;width:12.24%;height:auto;z-index:0;pointer-events:none}

.rc-gains{
  position:absolute;left:14.08%;top:33.84%;width:32.08%;height:11.62%;z-index:2;
  display:flex;align-items:center;gap:2.29cqw;padding-left:5.89cqw;
  border-radius:999px;background:var(--ink);
}
.rc-gains .rc-ico{width:2.29cqw;height:auto;flex:0 0 auto}
.rc-gains p{margin:0;font-size:2cqw;line-height:1.32;color:var(--on-ink)}

.rc-wallet{
  position:absolute;left:26.68%;top:52.53%;width:33.06%;height:11.11%;z-index:3;
  display:flex;align-items:center;gap:2.62cqw;padding-left:2.62cqw;
  border-radius:1.64cqw;background:#6fffce;
}
.rc-wallet .rc-ic{width:6.3cqw;height:auto;flex:0 0 auto}
.rc-wallet p{margin:0;font-size:2cqw;line-height:1.4;color:#14201b}
.rc-wallet p b{font-weight:600}

.rc-ticket{
  position:absolute;left:33.88%;top:83.5%;width:28.48%;height:9.6%;z-index:3;
  display:grid;align-items:center;padding-left:4.75cqw;
  border-radius:1.31cqw;background:var(--ink);
}
.rc-ticket p{margin:0;font-size:2.05cqw;line-height:1.45;color:var(--on-ink);opacity:.82}

/* painel claro com o gráfico */
.rc-dash{
  position:absolute;left:15.06%;top:50.34%;width:34.86%;height:39.23%;z-index:1;
  border-radius:1.64cqw;background:#e7e7e7;overflow:hidden;
}
.rc-dash .rc-chart{position:absolute;inset:0;width:100%;height:100%}
.rc-info{position:absolute;left:3.11cqw;right:3.11cqw;top:13.26cqw}
.rc-lbl{margin:0;font-size:1.9cqw;line-height:1.1;color:#5c605e}
.rc-val{margin:.55cqw 0 0;font-size:5.4cqw;font-weight:500;line-height:1;letter-spacing:-.03em;color:#141514}
.rc-dlt{margin:.67cqw 0 0;font-size:1.9cqw;line-height:1.1;font-weight:500;color:#5c605e}
.rc-tag{
  position:absolute;left:60.56%;top:45.06%;width:9.17cqw;height:4.75cqw;z-index:2;
  display:grid;place-items:center;border-radius:999px;background:#a1a195;
  font-size:1.8cqw;line-height:1;color:#2e302f;white-space:nowrap;
}

/* entrada das duas pílulas, junto com a contagem do número */
@media (prefers-reduced-motion:no-preference){
  .rc-collage.is-ready .rc-gains,
  .rc-collage.is-ready .rc-wallet{opacity:0;transform:translateY(1.8cqw) scale(.96)}
  .rc-collage.is-ready.is-animating .rc-gains{animation:rc-in .65s cubic-bezier(.22,.68,.24,1) .5s forwards}
  .rc-collage.is-ready.is-animating .rc-wallet{animation:rc-in .65s cubic-bezier(.22,.68,.24,1) 1.25s forwards}
}
@keyframes rc-in{to{opacity:1;transform:none}}

/* — colagem C (vertical) — */

/* disco de produto (compartilhado) */
.disc{width:58%;aspect-ratio:1;border-radius:50%;background:var(--ph);border:1.4px solid var(--line);position:relative}
.disc::after{content:"";position:absolute;top:-8%;right:2%;width:16%;aspect-ratio:1;border-radius:50%;border:1.6px solid var(--gray-500)}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ══════════════════════════════════════════════════════════
   9. DIAGRAMA
   ══════════════════════════════════════════════════════════ */
.flow{position:relative;width:100%;aspect-ratio:560/400;container-type:inline-size;margin-top:36px}
@media (min-width:900px){.flow{margin-top:0;max-width:620px;margin-inline:auto}}
.flow__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow__wires path{fill:none;stroke:var(--wire);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 7;animation:drift 14s linear infinite}
@keyframes drift{to{stroke-dashoffset:-160}}
.node{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:2.2cqi;
  background:var(--surface);border:1.4px solid var(--line);border-radius:var(--r-pill);
  padding:1.6cqi;font-size:max(12px,2.9cqi);letter-spacing:-.4px;white-space:nowrap;
  cursor:pointer;transition:border-color var(--t),transform var(--t);z-index:2;
}
.node:hover{border-color:var(--ink);transform:translate(-50%,-50%) scale(1.03)}
.node span:last-child{padding-right:3.4cqi}
.node__badge{
  width:7.1cqi;height:7.1cqi;min-width:30px;min-height:30px;border-radius:50%;
  background:var(--panel);border:1.4px solid var(--line);display:grid;place-items:center;
  flex:none;font-size:max(11px,2.6cqi);color:var(--gray-600);
}
.node__badge svg{width:56%;height:56%;fill:var(--gray-500)}
.node--accent .node__badge{background:var(--accent);border-color:var(--accent)}
.node--accent .node__badge svg{fill:var(--on-accent)}
.n-tags{left:50%;top:10%}
.n-sms{left:16.1%;top:45%}
.n-insta{left:50%;top:45%}
.n-mail{left:83.9%;top:45%}
.n-u1{left:30.4%;top:82.5%}
.n-u2{left:71.4%;top:82.5%}

@media (prefers-reduced-motion:reduce){
  .msg,.flow__wires path{animation:none}
  :root{--slide:.01ms}
}

/* Hero Deploy */
.deploy-hero{position:relative;overflow:hidden;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter)}
.deploy-stage{position:relative;min-height:clamp(270px,38vw,470px);margin-top:24px}
.deploy-stage__word{position:absolute;left:0;right:0;bottom:4%;pointer-events:none;opacity:.12}
.deploy-stage__word img{display:block;width:100%;height:auto}
.deploy-binary{position:absolute;right:4%;top:14%;margin:0;color:var(--gray-300);font:11px/1 var(--font);letter-spacing:.05em;white-space:nowrap}
.deploy-stack-wrap{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(22px,5vw,46px)}
.deploy-stack{position:relative;width:min(1100px,100%);aspect-ratio:798/340}
.deploy-card{position:absolute;top:0;height:90%;display:block;overflow:hidden;clip-path:polygon(0 0,100% 14.8%,100% 83.9%,0 100%);filter:drop-shadow(0 22px 32px rgba(0,0,0,.28));transition:all .6s cubic-bezier(.22,.9,.32,1);opacity:0;transform:translateX(-24px);animation:deploy-layer-in .7s cubic-bezier(.22,.9,.32,1) both;cursor:pointer}
.deploy-card img{display:block;width:100%;height:100%;object-fit:cover}
.deploy-card:nth-child(1){left:4%;aspect-ratio:373/297;z-index:1;animation-delay:.1s}.deploy-card:nth-child(2){left:16%;top:4%;aspect-ratio:423/346;z-index:2;animation-delay:.28s}.deploy-card:nth-child(3){left:30%;top:5.5%;aspect-ratio:423/337;z-index:3;animation-delay:.46s}.deploy-card:nth-child(4){left:45%;aspect-ratio:466/371;z-index:4;animation-delay:.64s}
.deploy-card:hover,.deploy-card.is-active{z-index:10;aspect-ratio:12/7;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.38))}
.deploy-card:nth-child(1):hover,.deploy-card:nth-child(1).is-active{height:92%;top:4%;transform:translateX(28%)}.deploy-card:nth-child(2):hover,.deploy-card:nth-child(2).is-active{height:92%;top:4%;transform:translateX(14%)}.deploy-card:nth-child(3):hover,.deploy-card:nth-child(3).is-active{height:92%;top:4%;transform:translateX(2%)}.deploy-card:nth-child(4):hover,.deploy-card:nth-child(4).is-active{height:92%;top:4%;transform:translateX(-14%)}
.deploy-pill{position:absolute;z-index:20;right:-3%;top:6%;width:20%;max-width:180px;min-width:130px;aspect-ratio:158/44;filter:drop-shadow(0 12px 20px rgba(0,0,0,.28));opacity:0;transform:scale(.7) translateX(-8px);animation:deploy-pill-in .55s cubic-bezier(.34,1.56,.64,1) 1.05s both}.deploy-pill svg{display:block;width:100%;height:100%}
.deploy-content{width:100%;max-width:var(--max);margin:6% auto;padding:20px 0 40px;display:grid;grid-template-columns:1fr .68fr;gap:clamp(32px,9.6vw,88px);align-items:start}.deploy-content h1{margin:0;font-size:clamp(38px,4.6vw,62px);font-weight:500;line-height:1.1;letter-spacing:-.04em;max-width:22ch}.deploy-pitch{display:flex;flex-direction:column;align-items:flex-start}.deploy-pitch p{margin:0;font-size:clamp(17px,1.65vw,22px);line-height:1.5;max-width:32ch;color:var(--texto)}
.deploy-cta{display:inline-flex;align-items:center;margin-top:28px;padding:15px 22px;border:0;border-radius:4px;background:var(--ink);color:var(--on-ink);font:500 13px var(--font);cursor:pointer;transition:transform var(--t)}.deploy-cta:hover{transform:translateY(-2px)}.deploy-features{display:flex;gap:clamp(20px,4vw,40px);margin-top:30px}.deploy-feature{display:flex;align-items:center;gap:9px}.deploy-feature svg{flex:none}.deploy-feature span{font-size:11px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@keyframes deploy-layer-in{to{opacity:1;transform:translateX(0)}}@keyframes deploy-pill-in{to{opacity:1;transform:scale(1) translateX(0)}}
@media (max-width:640px){.deploy-stage{min-height:260px}.deploy-stack{width:100%}.deploy-pill{top:auto;right:6%;bottom:22%;min-width:108px}.deploy-content{display:block;padding-top:8px}.deploy-pitch{margin-top:22px}.deploy-features{gap:20px}}
@media (prefers-reduced-motion:reduce){.deploy-card,.deploy-pill{animation:none;opacity:1;transform:none}.deploy-card{clip-path:none}}



/* ════════════════════ SEÇÃO ════════════════════ */
.section{margin-top:76px;padding-bottom:70px}
@media (min-width:900px){.section{margin-top:112px}}

.head{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:42px;text-align:left}
.title{font-size:42px;line-height:1.06;letter-spacing:-1.8px;font-weight:400;max-width:15ch}
@media (min-width:900px){.title{font-size:64px;letter-spacing:-3px;max-width:16ch}}
@media (max-width:370px){.title{font-size:32px;letter-spacing:-1.4px}}

.nav-arrows{display:flex;align-items:center;gap:10px;flex:none}
.arrowbtn{width:56px;height:56px;border-radius:50%;flex:none;cursor:pointer;background:var(--surface);border:1.4px solid var(--line);display:grid;place-items:center;transition:all var(--t)}
.arrowbtn:hover:not(:disabled){border-color:var(--ink);transform:scale(1.05)}
.arrowbtn:active:not(:disabled){transform:scale(.96)}
.arrowbtn:disabled{opacity:.3;cursor:not-allowed}
.arrowbtn svg{width:19px;height:19px;stroke:var(--ink);fill:none}

/* ── trilho ── */
.rail{
  display:flex;gap:var(--gap);
  margin:0 calc(var(--gutter)*-1);padding:4px calc(var(--gutter) + 16px) 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  cursor:grab;
}
@media (min-width:900px){.rail{gap:var(--gap)}}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.is-dragging *{user-select:none;pointer-events:none}

/* 1 card + 10% do próximo */
.plan{
  flex:0 0 calc((100% - var(--gap)) / 1.1);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--surface);border:1.4px solid var(--line);border-radius:12px;
  padding:28px 24px;transition:border-color var(--t),box-shadow var(--t);
}
@media (min-width:700px){.plan{flex-basis:calc((100% - 2*var(--gap)) / 2.1)}}
@media (min-width:900px){.plan{flex-basis:calc((100% + 2*var(--gutter) - 2*var(--gap)) / 3.1)}}
.plan:hover{border-color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.plan--featured{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.plan__tag{
  align-self:flex-start;border:0;border-radius:0;
  padding:0;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-600);white-space:nowrap;
}
.plan--featured .plan__tag{color:var(--ink)}
.plan__name{font-size:28px;font-weight:600;letter-spacing:-1.2px;margin-top:16px;line-height:1}
.plan__rule{height:1px;background:var(--line-soft);margin:26px 0 24px}

.plan__list{list-style:none;display:flex;flex-direction:column;gap:17px;flex:1}
.plan__item{display:flex;align-items:center;gap:14px;font-size:16px;letter-spacing:-.3px;line-height:1.3}
.plan__item svg{width:16px;height:16px;stroke:var(--gray-500);fill:none;flex:none}
.plan__item .num{color:var(--ink)}
.plan__item.is-off{color:var(--gray-300)}
.plan__item.is-off svg{stroke:var(--gray-300)}
.hint{
  width:22px;height:22px;border-radius:50%;border:1.2px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--gray-500);
  flex:none;cursor:help;transition:border-color var(--t);
}
.hint:hover,.hint.is-on{border-color:var(--ink);color:var(--ink)}

/* tooltip flutuante — fica fora do .rail para nao ser cortado pelo overflow */
.tip{
  position:fixed;z-index:200;max-width:250px;
  background:var(--ink);color:var(--on-ink);
  font-size:13px;line-height:1.45;letter-spacing:-.1px;
  padding:10px 12px;border-radius:10px;
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .16s var(--t),transform .16s var(--t);
}
.tip.is-on{opacity:1;transform:none}

.plan__price{display:flex;align-items:baseline;gap:8px;margin-top:24px}
.plan__price b{font-size:38px;font-weight:600;letter-spacing:-1.5px}
.plan__price span{font-size:16px;color:var(--gray-500)}
.plan__note{font-size:14px;line-height:1.45;color:var(--gray-500);margin-top:10px}

.plan__cta{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  margin-top:22px;background:var(--ink);color:var(--on-ink);border:1.4px solid var(--ink);
  border-radius:7px;padding:16px;font-size:16px;letter-spacing:-.3px;
  cursor:pointer;transition:opacity var(--t),transform var(--t);
}
.plan__cta:hover{opacity:.86}
.plan__cta:active{transform:scale(.99)}
.plan__cta svg{width:18px;height:18px;stroke:currentColor;fill:none}
.plan--featured .plan__cta{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* pontos */
@media (min-width:1240px){
  .plan{padding:32px 28px}
}

.foot{display:flex;align-items:center;justify-content:space-between;padding:40px 2px 34px;font-size:11px;color:var(--gray-600)}
.foot .rule{flex:1;height:1px;background:var(--line-soft);margin:0 14px}



/* ════════════════════ TIPOGRAFIA ════════════════════ */
.section{margin-top:80px}
@media (min-width:900px){.section{margin-top:110px}}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);margin-bottom:14px}
.title{font-size:38px;line-height:1.06;letter-spacing:-1.8px;font-weight:400}
.title b{font-weight:500}
.title em{font-style:normal;color:var(--gray-500)}
@media (min-width:900px){.title{font-size:50px;letter-spacing:-2.4px}}
@media (max-width:370px){.title{font-size:32px;letter-spacing:-1.4px}}
.para{font-size:18px;line-height:1.55;color:var(--texto);margin-top:18px;max-width:38ch}

.cta{display:inline-flex;align-items:center;gap:12px;margin-top:28px;background:var(--surface);color:var(--ink);border:1.4px solid var(--line);border-radius:var(--r-pill);padding:7px 8px 7px 24px;font-size:16px;letter-spacing:-.2px;cursor:pointer;transition:border-color var(--t),transform var(--t)}
.cta:hover{border-color:var(--ink)}
.cta:active{transform:scale(.98)}
.cta .badge{width:38px;height:38px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.cta .badge svg{width:19px;height:19px;fill:none;stroke:var(--on-accent)}

/* ════════════════════ FAQ ════════════════════ */
/* A FAQ é a única seção que distribui os próprios filhos. No modo
   fluido quem tem os filhos é o `.conteudo`, então o grid mora nele. */
.faq,.screen--fluido .faq > .conteudo{display:grid;gap:8px}
@media (min-width:900px){
  .faq,.screen--fluido .faq > .conteudo{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start;
  }
}
.screen--fluido .faq{display:block}

.acc{border-top:1.4px solid var(--line);margin-top:26px}
@media (min-width:900px){.acc{margin-top:0}}
.acc__item{border-bottom:1.4px solid var(--line)}
.acc__btn{
  display:flex;align-items:center;gap:20px;width:100%;
  background:transparent;border:0;padding:24px 2px;cursor:pointer;text-align:left;
  font-size:18px;letter-spacing:-.4px;line-height:1.3;transition:color var(--t);
}
@media (min-width:900px){.acc__btn{font-size:20px;padding:28px 2px}}
.acc__btn:hover{color:var(--ink)}
.acc__q{flex:1}
.acc__ico{
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1.4px solid var(--line);display:grid;place-items:center;position:relative;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;transition:all var(--t);
}
.acc__ico::before{width:13px;height:1.7px}
.acc__ico::after{width:1.7px;height:13px}
.acc__item.is-open .acc__ico{background:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.acc__item.is-open .acc__ico::before{background:var(--on-ink)}
.acc__item.is-open .acc__ico::after{height:0}

.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t);
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__a{
  font-size:15px;line-height:1.6;color:var(--texto);
  padding:0 60px 26px 2px;max-width:60ch;
}
@media (min-width:900px){.acc__a{font-size:16px}}

/* ════════════════════ POSTS ════════════════════ */
.posts{
  display:flex;gap:16px;margin-top:26px;
  margin-inline:calc(var(--gutter)*-1);padding:4px calc(var(--gutter) + 16px) 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
}
.posts::-webkit-scrollbar{display:none}
.posts.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.posts.is-dragging *{user-select:none;pointer-events:none}
/* 1 card + 10% do próximo */
.post{
  flex:0 0 calc((100% - 16px) / 1.1);scroll-snap-align:start;
  display:flex;flex-direction:column;
  border:1.4px solid var(--line);border-radius:12px;
  padding:16px;transition:border-color var(--t),transform var(--t);
}
@media (min-width:600px){.post{flex-basis:calc((100% - 32px) / 2.1)}}
@media (min-width:900px){
  .posts{overflow:visible;cursor:auto;margin-inline:0;padding:0;scroll-snap-type:none}
  .post{flex-basis:calc((100% - 32px) / 3)}
}
.post:hover{border-color:var(--ink);transform:translateY(-2px)}
.post__media{background:var(--ph);border-radius:var(--r-md);aspect-ratio:16/10;position:relative}
.post__tag{
  position:absolute;top:12px;left:12px;background:var(--surface);
  border:1.4px solid var(--line);border-radius:var(--r-pill);
  padding:6px 12px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.post__meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600);margin-top:18px}
.post__title{font-size:19px;font-weight:500;letter-spacing:-.5px;line-height:1.25;margin-top:10px}
.post__text{font-size:14px;line-height:1.5;color:var(--texto);margin-top:9px;flex:1}
.post__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:14px;color:var(--ink);
}
.post__link svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform var(--t)}
.post:hover .post__link svg{transform:translateX(3px)}

.dots{display:flex;justify-content:center;gap:7px;margin-top:24px}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line);transition:all .3s}
.dots button.is-on{background:var(--ink);width:24px;border-radius:var(--r-pill)}
@media (min-width:900px){.dots{display:none}}

/* ════════════════════ FOOTER ════════════════════ */
.footer{
  margin:96px calc(var(--gutter)*-1) 0;
  /* O recuo de baixo soma o espaço do botão flutuante: ao chegar no fim
     da página não há mais para onde rolar, então sem essa reserva ele
     ficaria permanentemente por cima do último link da barra legal. */
  padding:52px var(--gutter) calc(30px + var(--zap) + var(--zap-recuo));
  border-top:1.4px solid var(--line);
}
@media (min-width:900px){.footer{margin-top:130px}}
.footer__grid{display:grid;gap:36px}
@media (min-width:760px){.footer__grid{grid-template-columns:1.4fr repeat(3,1fr);gap:40px}}

.footer__brand .logo{width:120px;height:44px}
.footer__pitch{font-size:14.5px;line-height:1.55;color:var(--texto);margin-top:14px;max-width:32ch}
.footer__social{display:flex;gap:8px;margin-top:20px}
.footer__social a{
  width:40px;height:40px;border-radius:50%;border:1.4px solid var(--line);
  display:grid;place-items:center;transition:border-color var(--t)}
.footer__social a:hover{border-color:var(--ink)}
.footer__social svg{width:16px;height:16px;stroke:var(--ink);fill:none}

/* Título de coluna do rodapé. Era `h4`, o que criava salto de nível nas
   páginas sem h2 — a aparência é a mesma, muda só a tag. */
.footer__col-t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-600);font-weight:600;margin-bottom:16px}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer__col a{font-size:15px;letter-spacing:-.2px;color:var(--gray-600);transition:color var(--t)}
.footer__col a:hover{color:var(--ink)}

.footer__news{margin-top:44px;padding-top:32px;border-top:1px solid var(--line-soft);display:grid;gap:16px}
@media (min-width:760px){.footer__news{grid-template-columns:1fr auto;align-items:center;gap:32px}}
.footer__news .t{font-size:20px;letter-spacing:-.5px}
.footer__news .s{font-size:14px;color:var(--texto);margin-top:6px}
.subscribe{position:relative;min-width:min(340px,100%)}
.subscribe input{
  width:100%;border:1.4px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font-size:15px;letter-spacing:-.2px;
  padding:16px 58px 16px 22px;outline:none;transition:border-color var(--t);
}
.subscribe input::placeholder{color:var(--gray-300)}
.subscribe input:focus{border-color:var(--ink)}
.subscribe button{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);
  display:grid;place-items:center;cursor:pointer;transition:transform var(--t);
}
.subscribe button:hover{transform:translateY(-50%) scale(1.06)}
.subscribe button svg{width:17px;height:17px;stroke:var(--on-accent);fill:none}

.footer__base{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--gray-600);
}
.footer__base nav{display:flex;gap:20px;flex-wrap:wrap}
.footer__base a:hover{color:var(--ink)}


/* Single-document layout overrides */
.screen{width:100%;max-width:1440px;margin:0 auto;background:transparent;padding:22px var(--gutter) 0;position:relative;overflow:hidden;transition:background .25s;border:0;border-radius:0}
body{background:var(--surface);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;transition:background .25s,color .25s}
@media (min-width:900px){body{padding:0}.screen{padding-top:30px}}

/* ─── Estrutura fluida ──────────────────────────────────────────────
   Ligada pela prop `fluido` do Layout. A `.screen` para de limitar a
   largura: cada faixa ocupa a tela inteira e quem segura os 1440px é o
   `.conteudo` dentro dela. Fora de `.screen--fluido` o `.conteudo` é
   inerte — é o que permite as seções serem compartilhadas com as
   páginas de serviço sem mudar nada lá. */
.screen--fluido{max-width:none;padding-inline:0;overflow:visible;overflow-x:clip}
/* Quando a página traz o próprio cabeçalho, ele já encosta no topo: o
   respiro que o shell reserva viraria uma faixa branca acima da arte. */
.screen--colado{padding-top:0}
/* Com o cabeçalho fixo ele sai do fluxo, e sem esta reserva a primeira
   seção passaria por baixo dele. A home não precisa: lá a hero ocupa o topo
   de propósito, com o cabeçalho sobreposto à foto. */
/* O piso de 100px não é estético: no estreito o cabeçalho mede 95px, e um
   mínimo menor deixava a primeira seção do /deploy passar por baixo dele. */
.screen--sob-fixo{padding-top:clamp(100px,9vw,104px)}
/* Fora do modo fluido o wrapper não pode existir para o layout: várias
   seções distribuem os próprios filhos em grid/flex, e um div no meio
   colapsaria tudo numa coluna só. `display:contents` o torna inerte. */
.conteudo{display:contents}
.screen--fluido .conteudo{
  display:block;width:100%;max-width:1440px;margin-inline:auto;
  padding-inline:var(--gutter);
}
/* O cabeçalho não tem faixa de fundo, então não precisa de wrapper:
   basta ele mesmo respeitar o limite. */
.screen--fluido .top{
  width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);
}
/* A malha de pontos não precisa mais furar o gutter — a faixa já é 100%. */
.screen--fluido .dotted::before{inset:0}
/* O rodapé idem: a borda superior atravessa a tela, o conteúdo não. */
.screen--fluido .footer{margin-inline:0;padding-inline:0}
/* O hero sai do `.conteudo` e vale por si — nada a compensar. */
.screen--fluido .hero-slot{margin-inline:0}
/* Mesma coisa na página de Deploy: a faixa vai inteira e quem segura a
   largura é o `.conteudo` que ela passou a ter dentro. */
.screen--fluido .deploy-hero{margin-inline:0;padding-inline:0}
/* Nas páginas de serviço o slot NÃO sangra: os encaixes de cada arte são
   percentuais (`margin-bottom:-1.5%`) medidos na largura do container, e
   soltá-lo até a borda os aumentaria junto. Só a home tem faixa inteira,
   porque lá o painel é o palco. */
.screen--fluido .hero-slot--page{max-width:1440px;margin-inline:auto}

/* A altura do slot vinha do `aspect-ratio`, então sangrar até a borda a
   fazia crescer junto com a tela (1920px dava 748px de altura) e empurrava
   os chips para fora da primeira dobra. A partir de 1440 a altura trava no
   que ela já tinha nessa largura: telas maiores ganham mais palco na
   horizontal, não cards maiores. */
.screen--fluido .hero-slot [data-hero-panel]{
  max-height:calc(1440px * 417 / 1071);
}
/* Só o palco sangra. Os outros heros são arte desenhada em `cqw`, que
   esticaria fora do quadro se o container ficasse mais largo que o alto. */
.screen--fluido .hero-slot [data-hero-panel]:not(.stage-hero){
  max-width:1440px;margin-inline:auto;
}
.logo img{width:100%;height:100%;display:block;object-fit:contain}
.logo svg{display:none}
@media (min-width:900px){.top>.nav{display:none}}
.rail,.posts{scroll-padding-left:32px}
@media (max-width:899px){.rail,.posts{padding-left:calc(var(--gutter) + 16px);padding-right:calc(var(--gutter) + 16px)}}

/* ══════════════════════════════════════════════════════════
   BLOG e CENTRAL DE AJUDA
   ══════════════════════════════════════════════════════════
   As listagens reaproveitam o card `.post` da home. Lá ele vive num trilho
   horizontal (`.posts` é flex); aqui vira grade — daí o modificador. */
.posts--grid{display:grid;grid-template-columns:1fr;gap:22px;overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none;cursor:auto;margin-top:40px}
@media (min-width:640px){.posts--grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (min-width:1024px){.posts--grid{grid-template-columns:repeat(3,1fr);gap:28px}}
.posts--grid .post{flex:none;width:auto}
.post__media{overflow:hidden}
.post__cover{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-md)}

/* busca e filtros */
.blog-busca{display:flex;gap:10px;margin-top:26px;max-width:460px}
.blog-busca input{
  flex:1;min-width:0;border:1.4px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font:400 15px var(--font);
  padding:12px 18px;transition:border-color var(--t);
}
.blog-busca input:focus{outline:none;border-color:var(--ink)}
.blog-busca input::placeholder{color:var(--gray-300)}
.blog-busca button{
  flex:none;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);
  font:500 15px var(--font);padding:12px 24px;cursor:pointer;transition:transform var(--t);
}
.blog-busca button:hover{transform:translateY(-1px)}
.blog-filtro{margin-top:16px;font-size:15px;color:var(--gray-600)}
.blog-filtro a{text-decoration:underline;text-underline-offset:3px}

/* paginação */
.blog-paginacao{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:48px;font-size:15px}
.blog-paginacao a{padding:11px 20px;border:1.4px solid var(--line);border-radius:var(--r-pill);transition:border-color var(--t)}
.blog-paginacao a:hover{border-color:var(--ink)}
.blog-paginacao__n{color:var(--gray-600)}

/* ── página de um post ── */
.post-page{max-width:1180px;margin:0 auto;padding-top:8px}
.post-page__titulo{max-width:20ch;margin-top:10px}
.post-page__lede{margin-top:18px;max-width:62ch}
/* A capa tinha `height:auto`, então cada post rendia uma altura diferente:
   as imagens 1024x1024 do acervo apareciam a 1180x1180 — uma tela inteira de
   foto antes da primeira linha de texto. Proporção fixa resolve os dois
   problemas de uma vez, o tamanho e a falta de ritmo entre um post e outro. */
.post-page__capa{
  /* `height:auto` é necessário: o atributo height do <img> vira dica de
     estilo e, sem isto, vence o aspect-ratio. */
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;
  max-height:min(60vh,520px);
  border-radius:var(--r-lg);margin-top:36px;display:block;background:var(--ph);
}
.post-page__corpo{display:grid;gap:40px;margin-top:44px}
@media (min-width:1024px){.post-page__corpo{grid-template-columns:minmax(0,1fr) 250px;gap:56px}
  .post-sumario{order:2;position:sticky;top:28px;align-self:start}}

/* sumário — os ids vêm do mesmo sanitizer que limpa o HTML */
.post-sumario{border-top:1.4px solid var(--line);padding-top:18px}
.post-sumario__t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600)}
.post-sumario ol{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.post-sumario a{font-size:14.5px;line-height:1.4;color:var(--gray-600);transition:color var(--t)}
.post-sumario a:hover{color:var(--ink)}
.post-sumario li.is-sub{padding-left:14px}

/* corpo do post: o HTML vem do editor, então estilizamos por tag */
.post-conteudo{font-size:18px;line-height:1.7;color:var(--ink);max-width:68ch}
.post-conteudo > * + *{margin-top:20px}
.post-conteudo h2{font-size:28px;line-height:1.2;letter-spacing:-.8px;font-weight:500;margin-top:44px;scroll-margin-top:var(--ancora)}
.post-conteudo h3{font-size:21px;line-height:1.25;letter-spacing:-.4px;font-weight:500;margin-top:32px;scroll-margin-top:var(--ancora)}
.post-conteudo p{color:var(--texto)}
.post-conteudo a{text-decoration:underline;text-underline-offset:3px}
.post-conteudo ul,.post-conteudo ol{padding-left:22px;color:var(--texto)}
.post-conteudo li + li{margin-top:8px}
.post-conteudo img{max-width:100%;height:auto;border-radius:var(--r-md);display:block}
.post-conteudo blockquote{border-left:2px solid var(--accent);padding-left:20px;color:var(--texto)}
.post-conteudo pre{background:var(--card);border-radius:var(--r-sm);padding:18px;overflow-x:auto;font-size:14px}
.post-conteudo code{font-size:.92em}
.post-conteudo strong,.post-conteudo b{color:var(--ink);font-weight:600}

/* Chamada de fim de artigo. Quem chegou até aqui leu o assunto inteiro e é
   o melhor momento para oferecer o produto — antes disso seria interrupção. */
.post-cta{
  margin-top:56px;padding:28px;border:1.4px solid var(--line);
  border-radius:var(--r-lg);background:var(--panel);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.post-cta__t{font-size:22px;line-height:1.2;letter-spacing:-.5px;font-weight:500}
.post-cta__s{font-size:15px;line-height:1.5;color:var(--texto);margin-top:6px;max-width:46ch}
.post-cta .cta{margin-top:0;flex:none}
@media (max-width:620px){.post-cta{padding:22px}.post-cta .cta{width:100%;justify-content:space-between}}

/* O mesmo convite, menor, ancorado abaixo do sumário — acompanha a leitura
   em telas largas, onde a coluna lateral sobra. */
.post-lateral-cta{
  margin-top:26px;padding-top:20px;border-top:1.4px solid var(--line);
}
.post-lateral-cta p{font-size:14.5px;line-height:1.45;color:var(--texto)}
.post-lateral-cta a{
  display:inline-block;margin-top:12px;font-size:14.5px;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
}

.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.post-tags a{
  font-size:13px;color:var(--gray-600);border:1.4px solid var(--line);
  border-radius:var(--r-pill);padding:7px 14px;transition:all var(--t);
}
.post-tags a:hover{color:var(--ink);border-color:var(--ink)}

/* ══════════════════════════════════════════════════════════
   MENUS SUSPENSOS DO CABEÇALHO
   ══════════════════════════════════════════════════════════
   Painel ancorado sob o gatilho, com colunas de item = ícone + título +
   descrição. Só no desktop: abaixo de 900px o cabeçalho usa o menu mobile. */
.dd{position:relative}
.dd__btn{
  display:inline-flex;align-items:center;gap:8px;
  /* Sem cantos de pílula: o gatilho agora carrega ícone e rótulo, e a
     forma arredondada competia com as pílulas de fato do site. */
  padding:11px 14px;border:1.4px solid transparent;border-radius:var(--r-sm);
  background:none;font:400 15px var(--font);letter-spacing:-.2px;
  color:var(--gray-600);cursor:pointer;transition:all var(--t);
}
.dd__btn:hover,.dd__btn[aria-expanded="true"]{color:var(--ink);border-color:var(--line)}
.dd__btn.is-on{color:var(--ink);font-weight:500}
.dd__seta{width:15px;height:15px;flex:none;transition:transform var(--t)}
.dd__btn[aria-expanded="true"] .dd__seta{transform:rotate(180deg)}

.dd__painel[hidden]{display:none}
.dd__painel{
  position:absolute;top:calc(100% + 10px);left:0;
  z-index:70;width:max-content;max-width:min(680px,calc(100vw - 32px));
  background:var(--surface);border:1.4px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
  padding:18px;animation:dd-in .16s cubic-bezier(.4,0,.2,1);
}
@keyframes dd-in{from{opacity:0;transform:translateY(-6px)}}
/* O painel abre 10px abaixo do gatilho. Esse vão não pertence a nenhum dos
   dois, então o ponteiro "saía" do menu ao atravessá-lo e o painel fechava
   antes de dar pra clicar. Esta faixa invisível liga os dois. */
.dd__painel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

.dd__colunas{display:grid;gap:22px}
@media (min-width:1024px){.dd__colunas{grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr)}}
.dd__col-t{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-300);padding:0 12px;margin-bottom:8px;
}
.dd__item{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 12px;border-radius:var(--r-md);transition:background var(--t);
}
.dd__item:hover{background:var(--panel)}
.dd__item.is-on{background:var(--panel)}
.dd__item b{display:block;font-size:15px;font-weight:500;letter-spacing:-.2px;line-height:1.3}
.dd__desc{display:block;font-size:13px;line-height:1.4;color:var(--texto);margin-top:3px;max-width:30ch}
.dd__ico{
  flex:none;width:34px;height:34px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--panel);
  border:1.4px solid var(--line-soft);color:var(--ink);
}
.dd__item:hover .dd__ico{background:var(--surface);border-color:var(--line)}
.menu-icone{width:17px;height:17px}

.dd__rodape{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:16px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--panel);transition:background var(--t);
}
.dd__rodape:hover{background:var(--card)}
.dd__rodape b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.2px}
.dd__cta{flex:none;font-size:14px;font-weight:500;white-space:nowrap}

/* grupos do menu mobile */
.mmenu__grupo + .mmenu__grupo{margin-top:26px}
.mmenu__grupo-t{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-300);margin-bottom:6px;
}

/* ── ações do cabeçalho: entrar (texto) + chamada (sólido) ── */
.top__acoes{display:none}
@media (min-width:900px){
  .top__acoes{display:flex;align-items:center;gap:8px}
}
.top__entrar{
  /* `inline-flex` para o ícone de usuário assentar na mesma linha do rótulo,
     com o mesmo gap dos links de produto. */
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border:0;background:none;border-radius:var(--r-pill);
  font-size:15px;letter-spacing:-.2px;color:var(--gray-600);transition:color var(--t);
}
.top__entrar .menu-icone{width:18px;height:18px;flex:none}
.top__entrar:hover{color:var(--ink)}
.top__cta{
  padding:11px 20px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);
  font-size:15px;font-weight:500;letter-spacing:-.2px;
  transition:transform var(--t);
}
.top__cta:hover{transform:translateY(-1px)}

/* no mobile as ações entram no fim do menu, empilhadas */
.mmenu__acoes{display:flex;flex-direction:column;gap:10px;margin-top:32px;padding-top:26px;border-top:1.4px solid var(--line-soft)}
.mmenu__acoes .top__entrar,.mmenu__acoes .top__cta{display:block;text-align:center;font-size:16px;padding:14px 20px}

/* ══════════════════════════════════════════════════════════
   PALCO DA HOME (marquee)  —  bloco removível
   ══════════════════════════════════════════════════════════
   Tudo do palco vive aqui e nada fora depende dele. Se o teste de
   performance não justificar, apagar este bloco + StageHome.tsx + a linha
   no HeroSlot resolve. Trazido do `.stage` do site antigo. */
.stage-hero{
  position:relative;width:100%;overflow:hidden;
  --card-gap:clamp(10px,1.8vw,30px);
  --marquee-tempo:56s;
}
/* Dentro do slot o palco usa a altura padronizada dos heros (o slot já
   impõe o aspect-ratio), para a troca pelo chip não dar salto. O
   --palco-h fica como piso, para o palco funcionar fora do slot também. */
/* O piso de --palco-h vinha do palco original, solto na página. Dentro do
   slot quem manda é a altura do painel, e no mobile (244px) o piso de
   260px era maior que ela — os cards vazavam e ficavam cortados. */
.stage-palco{position:relative;height:100%}

/* a palavra em SVG ao fundo, alinhada pela base */
.stage-word{position:absolute;left:0;right:0;bottom:-1vw;margin:0;pointer-events:none;user-select:none}
.stage-word__svg{display:block;width:100%;height:auto;opacity:.14}
.stage-binary{
  position:absolute;left:71%;top:18%;margin:0;z-index:2;
  font-family:var(--font);font-size:clamp(10px,1.42vw,13px);letter-spacing:.02em;
  color:var(--gray-300);white-space:nowrap;user-select:none;
}

/* as fotos: faixa horizontal em loop */
.stage-cards{position:absolute;inset:0;overflow:hidden}
.stage-track{
  display:flex;align-items:flex-start;width:max-content;height:100%;
  margin:0;padding:0;list-style:none;
  animation:stage-marquee var(--marquee-tempo) linear infinite;
  animation-play-state:paused;   /* o JS solta depois do load */
  will-change:transform;
}
.stage-track.is-running{animation-play-state:running}
/* três conjuntos idênticos: deslocar 1/3 recoloca a faixa no início */
@keyframes stage-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.3333%,0,0)}
}
/* quem pediu menos movimento não recebe o loop */
@media (prefers-reduced-motion:reduce){
  .stage-track{animation:none}
}

.stage-card{
  position:relative;flex:0 0 auto;margin-right:var(--card-gap);
  background:var(--card);border-radius:14px;
  box-shadow:0 26px 44px -22px rgba(0,0,0,.34);overflow:hidden;
}
.stage-card img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
/* altura em % do palco + aspect-ratio preserva a proporção do desenho */
.stage-card--c1{height:47%;aspect-ratio:98/100;top:13%}
.stage-card--c2{height:54%;aspect-ratio:71/100;top:24.4%}
.stage-card--c3{height:80%;aspect-ratio:62/100;top:18.2%}
.stage-card--c4{height:77%;aspect-ratio:66/100;top:1.2%}
.stage-card--c5{height:62%;aspect-ratio:68/100;top:30.5%}
.stage-card--c6{height:65%;aspect-ratio:70/100;top:3.7%}

/* ─── Cenas da loja digital ─────────────────────────────────────────
   Três camadas empilhadas: aparelho (fundo) → domo colorido → ilustração.
   As posições vêm do projeto de origem, onde eram pixels fixos com um
   bloco de media query redesenhando o mobile. Aqui viraram porcentagem da
   própria cena: a `aspect-ratio` de cada variante segura a proporção e o
   mesmo conjunto de regras serve a todos os tamanhos. */
.cena{position:relative;width:100%}
.cena > img{position:absolute;height:auto;max-width:none;display:block}
.cena__fundo{z-index:1}
.cena__domo{z-index:2}
.cena__frente{z-index:3}

.cena--atendimento{aspect-ratio:700/700}
.cena--atendimento .cena__fundo{top:0;left:42.857%;width:54.286%}
.cena--atendimento .cena__domo{bottom:0;left:0;width:100%}
.cena--atendimento .cena__frente{bottom:0;left:7.143%;width:70%}

.cena--catalogo{aspect-ratio:745/620}
.cena--catalogo .cena__fundo{top:0;left:4.564%;width:62.685%}
.cena--catalogo .cena__domo{bottom:0;left:0;width:100%}
.cena--catalogo .cena__frente{bottom:3.871%;left:31.544%;width:67.114%}

/* Sem domo: esta cena tem só duas camadas, então é mais estreita. */
.cena--taxa{aspect-ratio:560/620}
.cena--taxa .cena__fundo{top:0;left:0;width:82.679%}
.cena--taxa .cena__frente{bottom:0;left:10.714%;width:89.286%}

.cena--atualize{aspect-ratio:886/760}
.cena--atualize .cena__fundo{top:10%;left:39.616%;width:60.384%}
.cena--atualize .cena__domo{bottom:0;left:0;width:88.375%}
.cena--atualize .cena__frente{bottom:0;left:12.189%;width:56.433%}

.cena--planos{aspect-ratio:620/420}
.cena--planos .cena__domo{bottom:0;left:0;width:100%}
.cena--planos .cena__frente{bottom:0;left:8.871%;width:80.645%}

/* A cena do "configuramos sua loja". No original o aparelho vinha
   recortado numa moldura horizontal, mas a arte é a maquete de um celular
   em pé: cortada, virava um retângulo branco. Aqui ela fica inteira, como
   nas outras cenas. */
.cena--montagem{aspect-ratio:588/440}
.cena--montagem .cena__fundo{top:0;left:2%;width:42%}
.cena--montagem .cena__frente{bottom:0;right:0;left:auto;width:73.129%}

/* Modificadores no lugar de `style` inline: a CSP com nonce barra atributo
   de estilo, e não há nonce que se aplique a um atributo. */
.cta--sem-topo{margin-top:0}
.adm-meta--secao{margin:30px 0 12px}

/* ─── Páginas institucionais ────────────────────────────────────────
   Sobre, contato e políticas. Não têm arte de hero, então o topo é só
   texto; o resto reaproveita `.section`, `.split` e `.steps`. */
.pagina-topo{margin-top:clamp(38px,5vw,64px)}
.pagina-topo .title{max-width:18ch}
.pagina-topo__lede{margin-top:20px;max-width:56ch}
/* O `.cta` já traz `margin-top:28px` para quando aparece solto no fim de
   um texto; aqui quem dá o respiro é o contêiner. */
.pagina-topo__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.pagina-topo__acoes .cta{margin-top:0}
/* Listas de 2 ou 4 itens: em 3 colunas a última linha fica torta. */
@media (min-width:900px){.steps--duas{grid-template-columns:repeat(2,1fr)}}
.step__link{
  display:inline-block;margin-top:14px;font-size:15px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;
}

/* O documento jurídico: coluna estreita para leitura corrida, numeração
   preservada do texto original (as cláusulas se citam por número). */
.legal-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.legal-nav a{
  display:inline-flex;align-items:center;gap:10px;border:1.4px solid var(--line);
  border-radius:var(--r-pill);padding:10px 18px;font-size:14px;
}
.legal-nav a:hover{border-color:var(--ink)}
.legal-data{margin-top:18px;font-size:14px;color:var(--gray-600)}
.legal-doc{margin-top:clamp(56px,7vw,88px);max-width:74ch}
.legal-doc__titulo{font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.8px;line-height:1.2}
.legal-doc__intro{margin-top:16px;font-size:16px;line-height:1.6;color:var(--texto)}
.legal-secao{margin-top:38px}
.legal-secao h3{font-size:18px;font-weight:500;letter-spacing:-.3px;line-height:1.3}
.legal-secao p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--texto)}
.legal-secao ul{margin:12px 0 0;padding-left:20px;display:grid;gap:10px}
.legal-secao li{font-size:16px;line-height:1.65;color:var(--texto)}

/* Variante sem preenchimento do `.cta`, para a ação secundária das
   páginas institucionais — o par "ver planos / falar com alguém". */
.cta--ghost{border-color:var(--line);background:transparent;padding:14px 24px}
.cta--ghost:hover{border-color:var(--ink)}
.cta--ghost .badge{display:none}


/* ─── Hero alternativa (página /hero-teste) ─────────────────────────
   Diagramação em duas peças e nada mais: a `.heroB` é uma grade — uma
   linha na home, duas quando a página embute o próprio cabeçalho — e o
   resto é flex onde há itens lado a lado.
   O texto fica numa coluna só, à esquerda, sobre a área desfocada da foto
   — que foi enquadrada para isso. Prefixo `heroB` para conviver com a hero
   atual enquanto a comparação acontece. */
/* Navegação simples da v2: link com ícone, sem painel suspenso. Herda a
   cor do cabeçalho, então funciona igual sobre a foto e sobre o vidro
   quando o topo fica sólido ao rolar. */
/* Só o necessário para o ícone caber ao lado do rótulo. Cor, recuo, pílula
   e transição vêm do `.topnav a`, que já é a linguagem do cabeçalho — não
   vale reescrever aqui o que a regra de cima já resolve. */
.topnav a.navsimples{display:inline-flex;align-items:center;gap:8px}
.navsimples .menu-icone{width:18px;height:18px;flex:none}

.heroB{
  position:relative;width:100%;min-height:min(96vh,960px);
  /* Sem cabeçalho embutido é uma linha só; com ele (a /hero-teste), a
     primeira linha é o topo e a segunda o corpo. */
  display:grid;grid-template-rows:1fr;
  overflow:hidden;background:var(--ink);
  /* Precisa ser MAIOR que a altura do divisor (clamp(66px,15.7vw,201px)),
     senão a curva branca passa por cima e corta o pé do título — o divisor
     tem z-index 3, acima do corpo. A folga extra é o respiro entre a última
     linha de texto e o começo da curva. */
  --heroB-pad:clamp(150px,17.5vw,232px);
  --heroB-sobe:clamp(16px,3vw,48px);   /* quanto o pitch sobe do divisor */
}
.heroB--com-topo{grid-template-rows:auto 1fr}
.heroB__foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% center;
}
/* Escurece a esquerda, onde o texto assenta, e um pouco o topo, para o
   cabeçalho branco descolar do fundo claro. */
.heroB__veu{
  position:absolute;inset:0;
  background:
    /* A faixa do topo cobre a navegação. Com .34 o item mais à direita caía
       para 4.1:1 de contraste sobre a área clara da foto, abaixo do mínimo
       de 4.5:1 — o texto branco sumia. */
    linear-gradient(180deg,rgba(10,10,10,.58) 0%,rgba(10,10,10,0) 30%),
    /* Mancha suave sob o pitch, no canto inferior direito. O degradê lateral
       já zerou aos 80%, então o parágrafo cai sobre a foto crua: medido, 62%
       da área dele ficava abaixo de 4.5:1 e o link secundário sumia. Um
       degradê ancorado ali resolve sem chapar a foto — vale mais que escurecer
       a hero inteira, que apagaria o rosto.

       O raio é justo de propósito: baixar o alfa reprovava o contraste, mas
       encolher a mancha mantém a densidade sob o texto e devolve foto em
       volta. Se a imagem mudar e a área clara for para outro canto, o que se
       remede é a posição, não a opacidade. */
    radial-gradient(66% 54% at 76% 57%,
      rgba(10,10,10,.76) 0%,rgba(10,10,10,.50) 50%,rgba(10,10,10,0) 80%),
    linear-gradient(90deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.68) 34%,rgba(10,10,10,.16) 62%,rgba(10,10,10,0) 80%);
}

.heroB__topo{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  padding:22px var(--gutter);width:100%;max-width:1440px;margin-inline:auto;
}
.heroB__logo img{display:block;height:42px;width:auto}
.heroB__nav{display:none;gap:clamp(18px,3.2vw,46px)}
@media (min-width:1000px){.heroB__nav{display:flex}}
.heroB__nav a{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.86);white-space:nowrap;
}
.heroB__nav a:hover{color:#fff}
.heroB__login{
  /* O menta é o mesmo da barra do logo, não o limão dos CTAs do site:
     aqui ele fecha com a marca desenhada logo ao lado. */
  margin-left:auto;background:var(--mint);color:var(--ink);
  padding:11px 20px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
}

/* Duas colunas, como o `.deploy-content` das outras páginas: o h1 à
   esquerda e o texto com as ações à direita. `align-items:end` é o que põe as
   duas na parte baixa da foto; `align-self:end` faz a grade inteira descer
   dentro da hero, em vez de ficar centralizada verticalmente.

   A proporção .68 e o gap são os mesmos do `.deploy-content`, para as duas
   heros do site terem a mesma métrica. */
.heroB__corpo{
  /* Dois alinhamentos diferentes, e a distinção importa:

     `align-self:end` ancora a LINHA inteira na parte baixa da hero, logo
     acima do divisor. `align-items:start` alinha as duas colunas pelo TOPO
     dessa linha. Como o pitch é o bloco mais alto, é ele que define a altura
     da linha — e o título passa a começar na mesma altura do parágrafo,
     que é o resultado desejado.

     Com `stretch` a linha ocupava a hero inteira e o topo virava o padding;
     com `align-items:end` os dois se alinhavam pela base e o título, mais
     baixo, começava abaixo do parágrafo. */
  position:relative;z-index:2;align-self:end;
  display:grid;grid-template-columns:1fr .68fr;
  gap:clamp(32px,9.6vw,88px);align-items:start;
  /* Um shorthand só: um `padding-top` separado antes desta linha seria
     zerado por ela. O recuo de baixo soma `--heroB-sobe` para levantar o
     pitch sem comer a folga que protege do divisor. */
  padding:0 var(--gutter) calc(var(--heroB-pad) + var(--heroB-sobe));
  width:100%;max-width:1440px;margin-inline:auto;
}
.heroB__pitch{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.heroB__titulo{
  margin:0;color:#fff;font-weight:400;max-width:13ch;
  font-size:clamp(38px,5.4vw,52px);line-height:1.06;letter-spacing:-1.8px;
}
.heroB__texto{
  /* Branco cheio, não 90%: rende contraste de graça e permitiu encolher o
     overlay em vez de escurecer mais a foto. */
  margin:0;max-width:44ch;color:#fff;
  font-size:22px;line-height:1.55;
}
.heroB__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,34px);margin-top:8px}
.heroB__cta{
  background:var(--surface);color:var(--ink);padding:16px 30px;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
}
.heroB__cta:hover{background:var(--accent)}
.heroB__link{color:#fff;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.heroB__link:hover{color:var(--accent)}

/* No estreito o degradê lateral não resolve: o sujeito ocupa o quadro
   inteiro. Em vez de clarear a foto, o texto desce para a metade de baixo,
   deixando o rosto livre em cima — e o véu escurece justamente a faixa onde
   ele passa a assentar. */
@media (max-width:860px){
  /* O recorte no estreito é horizontal; 65% traz o rosto, que fica à
     direita da foto, para o meio do quadro. */
  /* O sujeito da foto nova fica por volta de 52% da largura. Aumentar o
     object-position empurra o recorte para a direita da imagem e joga o
     rosto para fora — o que resolve é diminuir: em 50% ele aparece inteiro,
     à direita do quadro, com o texto assentando na área escura embaixo. */
  .heroB__foto{object-position:50% center}
  .heroB__veu{
    /* Este bloco substitui o `background` inteiro, então o radial do pitch não
       vale aqui: no estreito é esta faixa que precisa segurar sozinha a
       legibilidade do parágrafo. */
    background:linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.8) 34%,rgba(10,10,10,.42) 62%,rgba(10,10,10,.08) 84%,rgba(10,10,10,.2) 100%);
  }
  .heroB__corpo{grid-template-columns:1fr;gap:22px;align-content:end;padding-top:0}
  .heroB__titulo{align-self:auto}
}

/* Encosta um pixel abaixo da borda para não deixar fio na emenda. */
.heroB__divisor{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  width:100%;height:clamp(66px,15.7vw,201px);display:block;pointer-events:none;
}
/* A primeira seção depois da hero sobe: o respiro padrão de 96px, somado ao
   que a faixa de barras já ocupa, abria um vão grande demais logo abaixo da
   curva. Vale só aqui — as outras páginas seguem com o espaçamento do site. */
.heroB__abaixo + .section{margin-top:clamp(18px,2.4vw,34px)}
/* O que vem logo depois da faixa sobe: o palco tem 42px de margem própria e
   a seção, 96px do espaçamento do site — somados à curva, abriam um vão que
   soltava a segunda seção da abertura. */
.heroB + .hero-slot{margin-top:clamp(6px,1.4vw,18px)}
/* A curva do divisor já entrega bastante branco antes do conteúdo começar;
   somar o respiro cheio de seção abria um vão grande demais logo abaixo
   dela. Encurtado para o conteúdo da segunda seção subir. */
.heroB + .section,.heroB + .hero-slot + .conteudo + .section{margin-top:clamp(0px,0.8vw,14px)}

/* As barras do desenho, no mesmo traço que o site anterior usava. */
.heroB__marcas{
  display:block;margin-top:clamp(18px,2.4vw,28px);
  width:clamp(120px,16vw,200px);height:16px;
  background:repeating-linear-gradient(-72deg,var(--gray-300) 0 1.5px,transparent 1.5px 9px);
}

/* Ícone do gatilho do menu. Mesmo traço dos ícones de dentro do painel, só
   que menor e sem a caixa — no topo ele acompanha o rótulo, não o substitui. */
.dd__btn-ico{display:grid;place-items:center;width:17px;height:17px;flex:none;color:var(--gray-600)}
.dd__btn-ico svg{width:17px;height:17px}
.dd__btn:hover .dd__btn-ico,.dd__btn.is-on .dd__btn-ico{color:var(--ink)}

/* ─── Cabeçalho flutuante (v2) ──────────────────────────────────────
   A ideia vem do site anterior: em vez de uma barra que ocupa espaço no
   fluxo, uma casca branca que paira sobre o conteúdo. É isso que deixa a
   foto da hero sangrar até a borda de cima da tela.

   Diferente do original em dois pontos, por decisão: a tipografia é a
   nossa (não entrou uma segunda família só para três rótulos) e o menu
   suspenso continua sendo o nosso. */
/* A especificidade acompanha a de `.screen--fluido .top`, que também define
   largura e recuo: sem isso aquela regra vencia e a casca esticava até as
   bordas, perdendo justamente o ar de peça solta. */
.screen--fluido .top--flutuante,.top--flutuante{
  position:fixed;top:10px;left:0;right:0;z-index:100;
  width:calc(100% - 32px);max-width:1180px;margin-inline:auto;
  padding:0 24px;min-height:64px;
  background:var(--surface);border-radius:12px;
  box-shadow:0 14px 34px -28px rgba(0,0,0,.45);
  /* Ao rolar, encolhe o respiro de cima — o mesmo gesto do original. */
  transition:top .3s ease,box-shadow .3s ease;
}
.screen--fluido .top--flutuante.is-scrolled,.top--flutuante.is-scrolled{
  top:8px;box-shadow:0 18px 40px -26px rgba(0,0,0,.55);
}

/* ─── Rede de pessoas ───────────────────────────────────────────────
   Anéis pontilhados girando, com rostos em órbita. A estrutura mora aqui;
   os valores de cada órbita saem do componente, num bloco `<style>`, porque
   são dados e não desenho (ver components/Rede.tsx). */
.rede{
  position:relative;width:100%;max-width:576px;aspect-ratio:1/1;
  container-type:inline-size;margin-inline:auto;
  /* O traço era `--line`, claro demais para um pontilhado fino. */
  --rede-anel:var(--wire);--rede-cheio:var(--ph);--rede-suave:var(--ph-2);
  --rede-no:var(--gray-300);
}
/* A dissolução vive aqui, não no componente inteiro: aplicada em `.rede`
   ela desbotava também os retratos, e rosto de cliente meio apagado é o
   oposto do que a peça existe para fazer. Só as linhas somem no fundo. */
.rede__aneis{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  -webkit-mask-image:
    linear-gradient(to top,transparent 0%,#000 44%),
    linear-gradient(to left,transparent 0%,#000 44%);
  mask-image:
    linear-gradient(to top,transparent 0%,#000 44%),
    linear-gradient(to left,transparent 0%,#000 44%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.rede__aneis circle{
  fill:none;stroke:var(--rede-anel);stroke-width:2.6;
  stroke-linecap:round;stroke-dasharray:.1 8;
  transform-origin:288px 288px;
  animation:rede-gira var(--dur) linear infinite var(--dir);
}
.orbita{position:absolute;inset:0;animation:rede-gira var(--dur) linear infinite var(--dir)}
.orbe{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
/* O nó contra-gira na mesma velocidade: assim o rosto nunca fica de cabeça
   para baixo enquanto o anel roda. */
.orbe > span{
  display:block;border-radius:50%;aspect-ratio:1;width:var(--size);
  margin-left:calc(var(--size) / -2);margin-top:calc(var(--size) / -2);
  animation:rede-gira var(--dur) linear infinite var(--contra);
  background:var(--rede-cheio) center/cover no-repeat;
}
.orbe--suave > span{background-color:var(--rede-suave)}
.orbe--menta > span{background-color:var(--mint)}
.orbe--cinza > span{background-color:var(--rede-no)}
@keyframes rede-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .rede__aneis circle,.orbita,.orbe > span{animation:none}
}

/* ─── Faixa de depoimentos ──────────────────────────────────────────
   Estrutura do site anterior — foto pequena, citação, assinatura, rolando
   na horizontal com snap — vestida com os nossos tokens. Duas visíveis por
   vez no desktop, uma no estreito. */
.depo{
  --depo-gap:clamp(20px,3.8vw,36px);
  container-type:inline-size;width:100%;
  margin-top:clamp(30px,4.6vw,52px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.depo::-webkit-scrollbar{display:none}
.depo:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:var(--r-md)}
.depo__trilho{display:flex;gap:var(--depo-gap);width:max-content;margin:0;padding:0}
.depo__item{
  flex:0 0 100cqw;min-width:0;margin:0;
  display:flex;flex-direction:column;align-items:flex-start;
  scroll-snap-align:start;
}
@media (min-width:760px){
  .depo__item{flex-basis:calc((100cqw - var(--depo-gap)) / 2)}
}
.depo__foto{
  width:clamp(84px,11vw,100px);aspect-ratio:100/96;
  border-radius:var(--r-sm);overflow:hidden;background:var(--ph);flex:none;
}
.depo__foto img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.depo__texto{
  margin:26px 0 0;font-size:clamp(14px,1.55vw,15.5px);line-height:1.7;
  color:var(--ink);
}
.depo__autor{margin:22px 0 0;font-size:13px;line-height:1.4;color:var(--gray-600)}
.depo__autor b{font-weight:500;color:var(--ink)}
/* Só indicam posição: quem controla é a rolagem e as setas. */
.depo__pontos span{
  /* `span` é inline: sem `block` não recebe largura nem altura. */
  display:block;width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background var(--t),width var(--t);
}
.depo__pontos span.is-on{width:20px;border-radius:var(--r-pill);background:var(--ink)}

/* Chamada centralizada: quando a seção apresenta o carrossel abaixo dela,
   em vez de ficar ao lado de uma colagem. */

/* ─── Formulário dos planos (popover nativo) ────────────────────────
   Abrir, fechar, Esc e clique fora são do navegador — nada aqui depende
   de script. O envio também não: é POST comum, e o servidor responde com
   o redirect para o WhatsApp. */
.lead{
  border:0;padding:0;background:transparent;
  max-width:min(420px,calc(100vw - 32px));width:100%;
  /* O navegador centraliza popover com `inset:0;margin:auto`, mas o reset
     de margem do site zera esse `auto` — sem devolvê-lo, a caixa gruda no
     canto superior esquerdo. */
  inset:0;margin:auto;
}
.lead::backdrop{background:rgba(10,10,10,.45)}
.lead__forma{
  position:relative;display:grid;gap:14px;
  background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,34px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.5);
}
.lead__chapeu{
  margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-600);
}
.lead__titulo{margin:0;font-size:26px;font-weight:500;letter-spacing:-.8px;line-height:1.15}
.lead__lede{margin:0;font-size:15px;line-height:1.5;color:var(--texto)}
.lead__campo{display:grid;gap:6px}
.lead__campo span{font-size:13px;color:var(--gray-600)}
.lead__campo input{
  width:100%;border:1.4px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;font:400 16px var(--font);color:var(--ink);background:var(--surface);
}
.lead__campo input:focus-visible{outline:0;border-color:var(--ink)}
.lead__enviar{
  margin-top:4px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--ink);color:var(--on-ink);
  padding:15px 24px;font:400 16px var(--font);
}
.lead__enviar:hover{background:#000}
.lead__aviso{margin:0;font-size:12.5px;line-height:1.5;color:var(--texto)}
.lead__aviso a{text-decoration:underline;text-underline-offset:2px}
.lead__fechar{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;color:var(--gray-600);
}
.lead__fechar:hover{background:var(--panel);color:var(--ink)}

/* ─── Painel: contatos ──────────────────────────────────────────── */
.adm-bloco{margin:26px 0 34px;padding:20px;border:1.4px solid var(--line);border-radius:var(--r-md)}
.adm-nota{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--texto);max-width:78ch}
.adm-nota code{font-size:13px;background:var(--panel);padding:1px 5px;border-radius:4px}
.adm-linha-forma{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.adm-input{
  flex:1 1 320px;border:1.4px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font:400 15px var(--font);
}
.adm-btn{
  border:0;border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);
  padding:11px 20px;font:400 15px var(--font);cursor:pointer;
}
.adm-tabela{width:100%;border-collapse:collapse;font-size:14px}
.adm-tabela th{
  text-align:left;font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-600);
  padding:10px 12px;border-bottom:1.4px solid var(--line);
}
.adm-tabela td{padding:14px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.adm-selo{
  display:inline-block;font-size:12px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--panel);color:var(--gray-600);
}
.adm-selo.is-ok{background:var(--mint);color:var(--ink)}

/* A âncora dos planos precisa de folga: na v2 o cabeçalho é fixo e taparia
   o topo da seção ao rolar até ela. */
#planos,.legal-doc [id],[id="termos"],[id="privacidade"]{scroll-margin-top:var(--ancora)}

/* Página de confirmação do formulário dos planos. Transitória: a pessoa
   passa por ela por um instante, a caminho do WhatsApp. */
.enviado{
  max-width:52ch;margin:0 auto;padding:clamp(60px,14vh,140px) var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;
}
.enviado .para{margin-top:16px}
.enviado__volta{margin-top:28px;font-size:15px}
.enviado__volta a{text-decoration:underline;text-underline-offset:3px;color:var(--gray-600)}

/* ─── Cabeçalho de vidro (v2) ───────────────────────────────────────
   Transparente sobre a arte do topo, com fundo desfocado ao rolar. A
   dificuldade não é o desfoque, é a troca de cor: sobre a foto escura o
   cabeçalho precisa ser claro, e sobre o conteúdo branco precisa inverter.
   Por isso quase toda regra abaixo aparece em par — um estado e o outro. */
.top--vidro,
.top--fixo{
  position:fixed;inset:0 0 auto;z-index:100;
  width:100%;max-width:none;margin:0;
  /* 30px no topo é o mesmo recuo que o `.screen` dá às páginas internas —
     é o que faz o logo da home nascer na mesma altura do das outras. O
     rodapé menor mantém a barra enxuta. */
  padding:30px clamp(20px,4vw,48px) 16px;
  background:transparent;
  transition:background .3s ease,backdrop-filter .3s ease,
             border-color .3s ease,padding .3s ease;
  border-bottom:1px solid transparent;
}
/* Sobre a foto: tudo claro. */
/* Sobre a foto vale o arquivo branco; rolado, o escuro. Os dois ocupam a
   mesma célula da grade para a troca não mexer no layout. */
.top--vidro .logo{display:grid}
.top--vidro .logo img{grid-area:1/1}
.top--vidro .logo__escuro{opacity:0}
.top--vidro .logo__claro{opacity:1}
.top--vidro.is-scrolled .logo__escuro{opacity:1}
.top--vidro.is-scrolled .logo__claro{opacity:0}
.top--vidro .logo img{transition:opacity .3s ease}
.top--vidro .dd__btn,.top--vidro .top__entrar{color:#fff}
/* Branco levemente transparente sobre a foto; no hover, branco cheio. O
   `opacity` genérico do `.navsimples` escureceria no hover, que é o oposto
   do que se quer aqui. */
.top--vidro .topnav a.navsimples{color:rgba(255,255,255,.78)}
.top--vidro .topnav a.navsimples:hover{color:#fff}
.top--vidro.is-scrolled .topnav a.navsimples{color:var(--ink)}
.top--vidro .dd__btn-ico{color:rgba(255,255,255,.7)}
.top--vidro .dd__seta{color:rgba(255,255,255,.7)}
.top--vidro .top__cta{background:var(--surface);color:var(--ink)}
.top--vidro .burger span{background:#fff}
.top--vidro .label{color:#fff}

/* Rolado: o vidro entra e as cores voltam ao normal do site. */
.top--vidro.is-scrolled,
.top--fixo.is-scrolled{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line-soft);
  padding-block:10px;
}

.top--vidro.is-scrolled .dd__btn,.top--vidro.is-scrolled .top__entrar{color:var(--ink)}
.top--vidro.is-scrolled .dd__btn-ico,
.top--vidro.is-scrolled .dd__seta{color:var(--gray-600)}
.top--vidro.is-scrolled .top__cta{background:var(--ink);color:var(--on-ink)}
.top--vidro.is-scrolled .burger span{background:var(--ink)}
.top--vidro.is-scrolled .label{color:var(--ink)}

/* Sem suporte a desfoque o vidro viraria um branco lavado por cima do
   conteúdo — nesse caso vale um fundo sólido, que ao menos é honesto. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top--vidro.is-scrolled,.top--fixo.is-scrolled{background:var(--surface)}
}

/* ─── Botão flutuante do WhatsApp ───────────────────────────────────────
   z-index 60 é deliberado: acima do conteúdo, abaixo do painel do menu
   mobile (80) e dos cabeçalhos fixos (100). Assim o botão some sozinho
   quando o menu abre em tela cheia, sem precisar de JS para escondê-lo.
   O popover dos planos usa a top layer do navegador e passa por cima de
   qualquer z-index — não há conflito a resolver ali. */
.zap{
  position:fixed;z-index:60;
  right:var(--zap-recuo);bottom:var(--zap-recuo);
  width:var(--zap);height:var(--zap);border-radius:50%;
  display:grid;place-items:center;
  background:#25d366;
  box-shadow:0 6px 18px rgba(37,211,102,.34),0 2px 6px rgba(0,0,0,.12);
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.zap svg{width:29px;height:29px;fill:#fff;display:block}
.zap:hover{background:#1fbc59;transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.42),0 3px 8px rgba(0,0,0,.14)}
.zap:active{transform:translateY(0) scale(.96)}
.zap:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:640px){
  :root{--zap:52px}
  .zap svg{width:27px;height:27px}
}

@media (prefers-reduced-motion:reduce){
  .zap{transition:none}
  .zap:hover,.zap:active{transform:none}
}