/* flw-home.css — o estilo só da home. ⚠ Mexeu, suba FW_CSS_V no flw-entorno.php. */
/* ═══════════════════════════════════════════════════════════════════════
   Paleta do manual v1.0. Turquesa aparece POUCO — e agora tem um trabalho
   fixo: marcar o que a IA fez. Vira código de leitura, não decoração.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --turquesa:#1ED0C0; --petroleo:#0A3B3E; --profundo:#12A093;
  --mint:#86E6DD; --offwhite:#F4FAF9;
  --linha:#D7EFEC; --texto-2:#5B7C7D; --branco:#fff;
  --fonte:'Poppins',system-ui,sans-serif;

  /* Estas duas vinham do :root da demo, que removi por estar duplicado —
     e levei junto o que NÃO era duplicado. Sem elas, as centenas de regras
     com var(--font-body) ficaram sem valor e o navegador caiu no serif
     padrão: a página inteira mudou de fonte.
     Lição: ao remover bloco duplicado, comparar o conteúdo dos dois em vez
     de presumir que são iguais porque o seletor é. */
  --font-body:'Poppins',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ═══════════════════════════════════════════════════════════════════
     TOKENS DA DEMO — devolvidos por inteiro.

     Eu removi o :root da demo achando que era duplicata do :root do site.
     Não era: os dois tinham o MESMO seletor e conteúdos diferentes. O
     resultado foi 26 variáveis sem valor — a fonte virou serif (foi o que
     apareceu na tela) e metade da paleta das cenas ficou sem cor.

     Aqui elas voltam já na paleta Flowin, mapeadas sobre os tokens do
     site logo acima. Fonte única continua sendo o bloco de cima: estas
     apontam pra lá em vez de repetir valor.
     ═══════════════════════════════════════════════════════════════════ */
  --brand:        var(--turquesa);
  --brand-2:      var(--profundo);
  --brand-dark:   #0A5C55;
  --brand-light:  #E4F8F5;
  --brand-glow:   rgba(30,208,192,.22);
  --brand-grad:   var(--turquesa);   /* marca plana: degradê vira cor */

  --meta-blue:    #1877F2;           /* contexto de terceiro, fora da paleta */
  --meta-soft:    #E7F0FE;

  --green-soft:   #E4F8F5;

  --ink:          var(--petroleo);
  --muted:        var(--texto-2);
  --muted-2:      #8FA9A8;
  --text-1:       var(--petroleo);
  --text-2:       #3D6265;
  --text-3:       var(--texto-2);
  --text-4:       #8FA9A8;

  --line:         var(--linha);
  --line-2:       #E8F5F3;
  --border:       var(--linha);
  --border-2:     #E8F5F3;
  --card:         var(--branco);
  --gelo:         var(--offwhite);

  --r-md: 12px;

  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--offwhite);font-family:var(--fonte);color:var(--petroleo);-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.topo{position:sticky;top:0;z-index:90;background:rgba(244,250,249,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;gap:34px;height:68px}
/* A assinatura vem do vetor (sprite no início do body), nunca redigitada.
   Cores por variável: o rodapé troca para a versão negativa. */
.marca{display:flex;align-items:center}
.marca svg{height:26px;width:auto;display:block}
.lg{height:26px;aspect-ratio:647.5/121.7;display:block}
.menu{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--texto-2)}
.menu a{color:inherit;text-decoration:none}
.menu a:hover{color:var(--petroleo)}
.topo-fim{margin-left:auto;display:flex;align-items:center;gap:18px}
.link-entrar{font-size:14px;font-weight:500;color:var(--petroleo);text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;border:0;
  background:var(--turquesa);color:var(--petroleo);font-family:inherit;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .18s ease}
.btn:hover{background:var(--mint)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn:focus-visible{outline:2px solid var(--petroleo);outline-offset:3px}

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero{padding:70px 0 0;text-align:center}

/* MÓDULOS, não canais. A fileira antes eram logos de canal; com Marketing
   e Agenda dentro, "canal" deixa de descrever o conjunto. Como módulo,
   cada ícone conta um pedaço do hub — que é o argumento contra quem só
   faz uma coisa. */
.modulos{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.mod{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--linha);background:var(--branco);font-size:12.5px;font-weight:500;color:var(--texto-2)}
.mod i{font-size:12px;color:var(--profundo);opacity:.8}

h1{margin:0 auto;max-width:20ch;font-size:clamp(40px,6.6vw,76px);font-weight:600;line-height:1.03;letter-spacing:-.042em}
/* Uma palavra roda, a frase fica. Trocar a linha inteira faria o visitante
   converter por uma promessa e ler outra; trocar o verbo mantém a
   promessa e ainda prova o argumento — cada verbo é uma ação real. */
/* A frase que gira ocupa a SEGUNDA LINHA inteira. Em linha unica, cada
   variante com largura diferente faria o h1 pular a cada troca; em linha
   propria, a troca acontece no lugar e nada se mexe em volta. */
.gira{color:var(--profundo);display:block}
.gira span{display:inline-block;animation:giraIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes giraIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.sub{margin:26px auto 0;max-width:58ch;font-size:clamp(15px,1.7vw,18.5px);line-height:1.6;color:var(--texto-2)}
.hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
/* O .btn-ghost existe nas paginas de modulo mas nao existia aqui — o CTA
   secundario do hero ficaria com a pele do botao primario. */
.btn-ghost{background:transparent;border:1px solid var(--linha);color:var(--petroleo)}
.btn-ghost:hover{background:var(--branco)}
.prova{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  margin:34px auto 0;padding-top:24px;border-top:1px solid var(--linha);max-width:600px}
.prova-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--texto-2)}
.prova-item strong{color:var(--petroleo);font-weight:600}
.prova-item i{color:var(--profundo);font-size:14px}

/* ═══════════════════════════════════════════════════════════════════════
   A TESE: IA EMBARCADA EM TUDO
   Em vez de uma seção dizendo "temos IA", o turquesa marca cada ação que
   a IA executou DENTRO das telas. O visitante não lê o argumento — ele
   percorre a jornada e vê a marca aparecendo em toda etapa.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:999px;
  background:var(--turquesa);color:var(--petroleo);
  font-size:10px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;
  animation:iaPop .45s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes iaPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* Log da IA: o argumento vira evidência corrente. Cada linha é uma ação
   que o produto realmente executa sozinho. */
.ia-log{
  display:flex;align-items:center;gap:12px;
  margin:0;padding:11px 16px;
  background:var(--petroleo);color:var(--mint);
  font-family:var(--mono);font-size:12px;
  overflow:hidden;
}
.ia-log-rot{width:9px;height:9px;border-radius:50%;background:var(--turquesa);flex:0 0 auto;animation:pisca 1.5s infinite}
.ia-log-txt{white-space:nowrap;animation:logIn .4s ease}
@keyframes logIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}

/* ── Jornada ───────────────────────────────────────────────────────── */
.abas{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin:44px 0 14px}
.aba{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid transparent;
  border-radius:999px;background:transparent;font-family:inherit;font-size:14.5px;font-weight:500;
  color:var(--texto-2);cursor:pointer;transition:all .18s ease}
.aba .n{font-family:var(--mono);font-size:11px;opacity:.55}
.aba:hover{color:var(--petroleo)}
.aba[aria-selected="true"]{background:var(--branco);border-color:var(--linha);color:var(--petroleo);font-weight:600}
.aba[aria-selected="true"] .n{color:var(--turquesa);opacity:1}
.aba:focus-visible{outline:2px solid var(--turquesa);outline-offset:2px}
/* Dez abas em duas linhas de cinco, colunas iguais: a quebra livre deixava
   oito numa linha e duas sobrando na outra. Em tela média a coluna fica
   estreita para "Metas e Comissionamento", e o nome quebra em duas linhas
   dentro da própria aba em vez de desalinhar a grade. No celular vira
   trilho deslizante (mais abaixo). */
@media (min-width:769px){
  .abas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .aba{justify-content:center;text-align:center;line-height:1.25;padding:11px 6px;gap:6px;font-size:13.5px}
}
@media (min-width:1200px){
  .aba{white-space:nowrap}
}
@media (min-width:769px) and (max-width:999px){
  .aba{flex-direction:column;gap:2px;font-size:12.5px;padding:9px 6px}   /* número em cima do nome */
}

/* Dentro do palco: uma linha, à esquerda, sem altura mínima reservada.
   Centralizada e com min-height ela cobrava espaço mesmo quando o texto
   era curto. */
.aba-legenda{
  margin:0;padding:12px 18px;
  font-size:13.5px;line-height:1.5;
  color:var(--texto-2);
  border-bottom:1px solid var(--linha);
  background:var(--branco);
}
.aba-legenda strong{color:var(--petroleo);font-weight:600}

.palco{background:var(--branco);border:1px solid var(--linha);border-radius:18px;overflow:hidden}
/* A jornada é a demo interativa embutida. 16:9 no desktop (é a proporção
   em que a demo foi desenhada); no celular a demo empilha as colunas e
   precisa de altura, não de largura. */
.palco-demo{display:block;width:100%;aspect-ratio:16/9;min-height:520px;border:0;background:#F4F9F8}
@media (max-width:700px){.palco-demo{aspect-ratio:auto;height:640px;min-height:0}}
.palco-pe{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--linha);background:var(--offwhite);font-size:13px;color:var(--texto-2)}
.palco-pe a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:var(--petroleo);color:var(--mint);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.palco-pe a i{font-size:10px}
.chrome{display:flex;align-items:center;gap:11px;padding:12px 16px;background:var(--offwhite);
  border-bottom:1px solid var(--linha);font-size:12px;color:var(--texto-2)}
.pontos{display:flex;gap:6px}
.pontos span{width:9px;height:9px;border-radius:50%;background:var(--linha)}
.chrome-tag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  background:var(--turquesa);color:var(--petroleo);font-size:11px;font-weight:600}
.chrome-tag .vivo{width:6px;height:6px;border-radius:50%;background:var(--petroleo);animation:pisca 1.6s infinite}

@keyframes cardLand{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fieldFill{from{width:0}to{width:var(--w,100%)}}
.grafico i.-alta{background:var(--turquesa)}

.rodape-nota{text-align:center;margin:24px 0 90px;font-size:12.5px;color:var(--texto-2)}

/* ═══════════════════════════════════════════════════════════════════════
   HUB — "voce cancela varias assinaturas"
   O argumento nao e "temos muitos modulos" (todo concorrente diz isso).
   E que a conta do fim do mes encolhe. Por isso a secao abre com a PILHA
   que some, e so depois mostra a grade — grade primeiro seria feature
   list, e feature list e onde um entrante desaparece.
   ═══════════════════════════════════════════════════════════════════════ */
.hub{padding:96px 0 0}
.hub-cab{text-align:center;max-width:62ch;margin:0 auto 46px}
.hub-cab h2{font-size:clamp(30px,4.2vw,46px);font-weight:600;letter-spacing:-.035em;margin:0 0 16px;line-height:1.1}
.hub-cab p{font-size:16px;line-height:1.65;color:var(--texto-2);margin:0}

.troca{display:grid;grid-template-columns:1fr 62px 1fr;gap:22px;align-items:center;margin-bottom:70px}

.pilha-t{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-2);margin-bottom:14px}
.ferramenta{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;margin-bottom:9px;
  border:1px solid var(--linha);border-radius:12px;background:var(--branco);
  animation:subir .45s ease both;
}
.ferramenta i{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--offwhite);color:var(--texto-2);font-size:12px;flex:0 0 auto}
.ferramenta .nome{flex:1;font-size:13.5px;font-weight:500}
.ferramenta .preco{font-family:var(--mono);font-size:12.5px;color:var(--texto-2)}
.pilha-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);
  font-size:13px;color:var(--texto-2);
}
.pilha-total b{font-family:var(--mono);font-size:19px;color:var(--petroleo);font-weight:500}

.seta{display:flex;align-items:center;justify-content:center;color:var(--turquesa);font-size:22px}

.um{border:1px solid var(--turquesa);border-radius:16px;padding:22px;background:var(--branco)}
.um-marca{display:flex;align-items:center;margin-bottom:16px}
.um-marca svg{height:24px;width:auto}
.um-lista{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.um-lista span{padding:5px 11px;border-radius:999px;background:var(--offwhite);border:1px solid var(--linha);font-size:11.5px;color:var(--petroleo)}
.um-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid var(--linha);font-size:13px;color:var(--texto-2)}
.um-total b{font-family:var(--mono);font-size:19px;color:var(--profundo);font-weight:500}

/* ═══════════════════════════════════════════════════════════════════════
   CINEMA — vocabulário herdado da demo interativa
   A página estava esperando o clique pra se mexer. Numa LP, quem chega
   não sabe que tem o que clicar: a cena precisa começar a trabalhar
   sozinha e o clique vira controle, não gatilho.
   ═══════════════════════════════════════════════════════════════════════ */

/* Barra de progresso na aba ativa: mostra que vai virar sozinha e quanto
   falta. Sem ela, a troca automática parece bug. */
.aba{position:relative;overflow:hidden}
.aba .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--turquesa)}
.aba[aria-selected="true"] .prog{animation:progAba 8s linear forwards}
@keyframes progAba{from{width:0}to{width:100%}}
.abas.-pausado .aba .prog{animation-play-state:paused}

.palco{position:relative}

/* Revelação por scroll nas seções de baixo. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.-visivel{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   INTEGRAÇÕES
   A referência é um hub com linhas convergindo. Aqui as linhas são SVG
   que se desenham quando a seção entra na tela — movimento que conta a
   ideia (tudo converge pra um lugar) em vez de decorar.
   Sem logo de terceiro: rótulo em texto envelhece melhor, não depende de
   licença de marca e evita o efeito arco-íris que a referência tem.
   ═══════════════════════════════════════════════════════════════════════ */
.integra{padding:96px 0 0}
.integra-cab{text-align:center;max-width:60ch;margin:0 auto 18px}
.integra-cab h2{font-size:clamp(30px,4.2vw,46px);font-weight:600;letter-spacing:-.035em;margin:0 0 16px;line-height:1.1}
.integra-cab p{font-size:16px;line-height:1.65;color:var(--texto-2);margin:0}

/* ── O destaque do nativo ──────────────────────────────────────────────
   Google e Meta não entram na parede de integrações: viram bloco próprio.
   Enfiar junto com o resto esconderia o argumento mais raro que a Flowin
   tem — a maioria dos CRMs conecta via Zapier, não nativamente. */
.nativo{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:34px 0 64px;
}
.nativo-card{
  border:1px solid var(--turquesa);border-radius:16px;padding:22px 24px;background:var(--branco);
}
.nativo-h{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;margin-bottom:10px}
.nativo-h i{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--turquesa);color:var(--petroleo);font-size:15px}
.nativo-card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--texto-2)}
.nativo-selo{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  padding:5px 12px;border-radius:999px;background:var(--offwhite);
  border:1px solid var(--linha);font-size:11.5px;font-weight:600;color:var(--profundo);
}
.nativo-selo i{font-size:10px}

/* ── O hub ─────────────────────────────────────────────────────────── */
.hub-vis{position:relative;max-width:1020px;margin:0 auto;padding:14px 0 0}
.hub-svg{display:block;width:100%;height:auto}
/* A linha agora fica parada e quem se move é o dado. Antes ela se
   desenhava e parava — bonito uma vez só. Fluxo contínuo é o que a seção
   precisa dizer: o hub se alimenta e devolve o tempo todo. */
.hub-linha{
  fill:none;stroke:var(--linha);stroke-width:1.6;opacity:0;
}
.integra.-visivel .hub-linha{animation:aparece .7s ease forwards}
@keyframes aparece{to{opacity:1}}

/* Pontos que percorrem a curva. Entrando: turquesa cheio. Saindo: mint,
   mais leve — devolver é mais silencioso que receber. */
.hub-dot{opacity:0}
.integra.-visivel .hub-dot{opacity:1;transition:opacity .5s ease .6s}
.hub-dot.-in{fill:var(--turquesa)}
.hub-dot.-out{fill:var(--mint)}

/* Sem movimento: linhas visíveis, pontos escondidos. A informação
   permanece; só o fluxo para. */
@media (prefers-reduced-motion:reduce){
  .hub-dot{display:none}
  .hub-linha{opacity:1;animation:none}
}

/* Sigla para as marcas sem glifo pronto (Autentique, Asaas, Manychat).
   Placeholder honesto até entrar o SVG oficial de cada uma. */
.hub-sigla{
  width:18px;height:18px;border-radius:5px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:10px;font-weight:700;
}
/* .hub-marca saiu: o símbolo agora vem do vetor oficial. */
/* O bloco central e o texto ficam por último no SVG e com fundo opaco:
   antes os pontos passavam por baixo e reapareciam do outro lado, como se
   atravessassem a marca. */
.hub-centro{fill:var(--turquesa)}
.hub-svg .hub-centro,.hub-svg .hub-centro-lg{ isolation:isolate }
.hub-centro-lg{--lg-sim:#fff;--lg-tx:#fff}

.hub-nome{
  position:absolute;display:flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:12px;
  border:1px solid var(--linha);background:var(--branco);
  font-size:13px;font-weight:600;color:var(--petroleo);
  white-space:nowrap;opacity:0;transform:translateY(8px);
}
/* Raio menor que a pílula anterior: chip de integração parece mais um
   aplicativo e menos uma etiqueta, e é o que a referência fazia. */
.integra.-visivel .hub-nome{animation:subir .5s ease forwards}
.hub-nome i{font-size:14px;flex:0 0 auto}   /* cor vem inline, da marca */
.hub-nome small{font-size:11px;color:var(--texto-2);font-weight:400;margin-left:-3px}

.integra-nota{text-align:center;margin:44px 0 90px;font-size:13px;color:var(--texto-2)}
.integra-nota a{color:var(--profundo);font-weight:600;text-decoration:none}
.integra-nota a:hover{text-decoration:underline}

@media (max-width:900px){
  .nativo{grid-template-columns:1fr}
  .hub-vis{display:none}          /* em tela estreita o hub vira nó */
  .hub-lista-mobile{display:flex !important}
}
.hub-lista-mobile{display:none;flex-wrap:wrap;gap:8px;justify-content:center}


/* ═══════════════════════════════════════════════════════════════════════
   HEADER — logo + assinatura à esquerda, menu ao centro, ações à direita
   Três colunas de larguras iguais nas pontas: assim o menu fica no centro
   ÓTICO da página, não no centro do espaço que sobrou. Com flex simples
   ele penderia pro lado da coluna mais estreita.
   ═══════════════════════════════════════════════════════════════════════ */
.topo-in{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  height:68px;
}
.marca-lockup{display:flex;align-items:center;gap:14px;min-width:0}
.menu{justify-self:center}
.topo-fim{justify-self:end;margin-left:0}

/* ── A assinatura ──────────────────────────────────────────────────── */
.assina{
  height:30px;width:auto;overflow:visible;flex:0 0 auto;
  /* fio à esquerda separa do logotipo sem virar mais um elemento */
  padding-left:14px;border-left:1px solid var(--linha);
}
.assina text{
  font-family:'Caveat',cursive;
  font-size:21px;
  font-weight:600;
}
/* Contorno que se desenha. O dash cobre o comprimento inteiro e o
   offset o esconde; animar o offset pra zero "escreve" o traço. */
.assina-traco{
  fill:none;
  stroke:var(--profundo);
  stroke-width:.6;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:escreve 1.9s cubic-bezier(.5,0,.2,1) .5s forwards;
}
/* Preenchimento entra DEPOIS do traço, senão a letra já nasce cheia e a
   escrita não é percebida. */
.assina-fill{
  fill:var(--profundo);
  opacity:0;
  animation:tinta .7s ease 1.9s forwards;
}
@keyframes escreve{to{stroke-dashoffset:0}}
@keyframes tinta{to{opacity:1}}

/* Sem movimento: a assinatura aparece pronta, não some. */
@media (prefers-reduced-motion:reduce){
  .assina-traco{animation:none;stroke-dashoffset:0;opacity:0}
  .assina-fill{animation:none;opacity:1}
}

@media (max-width:1180px){ .assina{display:none} }
/* O menu some abaixo de 900px e o header vira duas colunas. A regra de
   esconder o .menu já existe noutro media query igual mais abaixo —
   mantida só aqui pra ficar junto do grid que ela acompanha. */
@media (max-width:900px){
  .topo-in{grid-template-columns:1fr auto}
  .menu{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   PAREDE DE CLIENTES
   Seis marcas de cinco famílias de cor diferentes. Coloridas, brigam entre
   si e com o turquesa — parece colagem. Em petróleo monocromático o
   conjunto vira intencional, e a cor volta no hover pra quem parar em uma.

   A altura é ÓTICA, não de caixa: Palmatec é 2560×756 e Sartor 140×65.
   Normalizar pela caixa deixaria uma gigante e a outra sumindo.
   ═══════════════════════════════════════════════════════════════════════ */
.clientes{padding:76px 0 0;overflow:hidden}
.clientes-t{
  text-align:center;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-2);margin:0 0 30px;
}

/* Trilho que desliza. Duas cópias da lista lado a lado e a animação
   deslocando -50%: quando a primeira sai, a segunda já está no lugar e o
   laço não tem emenda visível. */
.marquee{
  display:flex;width:max-content;
  animation:desliza 34s linear infinite;
}
.clientes:hover .marquee{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}

.marquee-lote{display:flex;align-items:center;gap:64px;padding-right:64px}
.cliente-logo{
  flex:0 0 auto;
  filter:grayscale(1) brightness(0) saturate(100%)
         invert(17%) sepia(21%) saturate(1093%) hue-rotate(134deg) brightness(94%) contrast(94%);
  opacity:.55;
  transition:opacity .25s ease, filter .25s ease;
}
.cliente-logo:hover{filter:none;opacity:1}

/* Altura por marca, ajustada no olho. Peso visual igual, tamanho diferente. */
.cliente-logo.-dokta    {height:24px}
.cliente-logo.-sevenbee {height:30px}
.cliente-logo.-palmatec {height:34px}
.cliente-logo.-scadi    {height:36px}
.cliente-logo.-sartor   {height:42px}
.cliente-logo.-ciano    {height:26px}
/* Biavatti vem com uma linha de subtítulo ("Especializada em...") que,
   nesta altura, não se lê e ainda vira ruído. Dando mais altura o
   subtítulo cresce junto e piora; a saída é manter baixo e deixar que o
   símbolo e o nome carreguem a leitura. Se quiserem destaque maior, o
   caminho é pedir a versão do logo SEM a linha de apoio. */
.cliente-logo.-biavatti {height:27px}

/* Bordas esmaecidas: o trilho parece continuar além da tela em vez de
   ser cortado. */
.clientes-vis{position:relative}
.clientes-vis::before,.clientes-vis::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.clientes-vis::before{left:0;background:linear-gradient(90deg,var(--offwhite),transparent)}
.clientes-vis::after{right:0;background:linear-gradient(270deg,var(--offwhite),transparent)}

@media (prefers-reduced-motion:reduce){
  .marquee{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marquee-lote:last-child{display:none}
  .clientes-vis::before,.clientes-vis::after{display:none}
}
@media (max-width:768px){
  .clientes{padding-top:56px}
  .marquee-lote{gap:38px;padding-right:38px}
  .cliente-logo{opacity:.65}
  .clientes-vis::before,.clientes-vis::after{width:40px}
}

/* ═══════════════════════════════════════════════════════════════════════
   MENU "RECURSOS" — abre no hover, como a topbar do produto
   Quem já usa a Flowin conhece esse gesto; repeti-lo no site faz o menu
   parecer o produto em vez de um site sobre o produto.
   ═══════════════════════════════════════════════════════════════════════ */
.menu{position:relative}
.menu-drop{position:relative}
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  z-index:80;width:min(680px,calc(100vw - 48px));
  padding:14px;border:1px solid var(--linha);border-radius:18px;background:var(--branco);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* Ponte invisível entre o link e o painel: sem ela o menu fecha no vão de
   14px que o mouse atravessa, e o gesto vira jogo de mira. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.menu-drop:hover .mega,
.menu-drop:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%)}

.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 12px;border-radius:12px;text-decoration:none;
  transition:background .14s ease;
}
.mega-item:hover{background:var(--offwhite)}
.mega-ic{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--offwhite);color:var(--profundo);font-size:13px;
}
.mega-item:hover .mega-ic{background:var(--turquesa);color:var(--petroleo)}
.mega-txt{min-width:0}
.mega-txt b{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--petroleo);
}
.mega-txt em{
  font-style:normal;font-family:var(--mono);font-size:10px;font-weight:500;
  padding:1px 6px;border-radius:999px;background:var(--offwhite);
  border:1px solid var(--linha);color:var(--texto-2);
}
.mega-txt small{
  display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--texto-2);
}
.mega-pe{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;padding:11px;border-radius:12px;
  background:var(--offwhite);
  font-size:12.5px;font-weight:600;color:var(--profundo);text-decoration:none;
}
.mega-pe:hover{background:var(--turquesa);color:var(--petroleo)}
.mega-pe i{font-size:10px}

/* Menu "Comparar": lista estreita, uma coluna, inicial do concorrente no
   lugar do ícone (logo de terceiro não entra no nosso menu). */
.mega.-lista{width:390px}
.mega.-lista .mega-grid{grid-template-columns:1fr}
.mega-ic.-letra{font-family:var(--fonte);font-size:13px;font-weight:700;color:var(--petroleo)}

/* Sem hover (toque) o painel não aparece: o link leva direto pra página. */
@media (hover:none){ .mega{display:none} }
@media (max-width:768px){ .mega{display:none} }

/* ═══════════════════════════════════════════════════════════════════════
   RODAPÉ
   Padrão de mega-rodapé: colunas por assunto, links diretos, e a faixa
   legal embaixo. Numa marca nova ele faz dois trabalhos — dá caminho pra
   quem quer se aprofundar e prova que existe empresa por trás.

   FUNDO PETRÓLEO. É o único bloco escuro da página inteira, de propósito:
   fecha a leitura e faz o off-white de cima parecer mais claro. O manual
   permite (petróleo substitui o preto em tudo) e é onde a marca aparece
   na versão negativa.
   ═══════════════════════════════════════════════════════════════════════ */
.rodape{background:var(--petroleo);color:#CFE8E5;margin-top:90px}
.rodape a{color:inherit;text-decoration:none}
.rodape-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-top:60px;padding-bottom:44px}

/* Negativa sobre petróleo, como manda o manual. */
.rod-marca .marca{--lg-sim:#fff;--lg-tx:#fff}
.rod-marca .marca svg{height:30px}
.rod-bordao{
  font-family:'Caveat',cursive;font-size:19px;color:var(--turquesa);
  margin:6px 0 16px;
}
.rod-sobre{font-size:12.5px;line-height:1.6;color:#9FC6C2;max-width:34ch;margin:0 0 18px}
.rod-social{display:flex;gap:10px}
.rod-social a{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);font-size:14px;
  transition:background .16s ease,color .16s ease;
}
.rod-social a:hover{background:var(--turquesa);color:var(--petroleo)}

.rod-col h4{
  margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;
}
.rod-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rod-col li{font-size:13px;line-height:1.4}
.rod-col a:hover{color:#fff}
.rod-tag{
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:999px;margin-left:6px;
  background:var(--turquesa);color:var(--petroleo);
}
.rod-tag.-breve{background:rgba(255,255,255,.12);color:#9FC6C2}

/* Faixa legal */
.rod-legal{
  border-top:1px solid rgba(255,255,255,.10);
  padding:20px 0 26px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:11.5px;color:#8FB8B4;
}
.rod-legal .sep{opacity:.4}
.rod-legal a:hover{color:#fff}
.rod-legal-fim{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}

/* A linha de origem da empresa. Duas versões — ver comentário no HTML. */
.rod-origem{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);color:#CFE8E5;
}
.rod-origem i{color:var(--turquesa);font-size:10px}

@media (max-width:1000px){ .rodape-in{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:768px){
  .rodape{margin-top:60px}
  .rodape-in{grid-template-columns:1fr 1fr;gap:26px;padding-top:44px;padding-bottom:32px}
  .rod-marca{grid-column:1 / -1}
  .rod-legal{flex-direction:column;align-items:flex-start;gap:12px}
  .rod-legal-fim{margin-left:0}
}

@media (max-width:820px){
  .troca{grid-template-columns:1fr;gap:16px}
  .seta{transform:rotate(90deg);font-size:18px}
}

@media (max-width:900px){
  .menu{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   MENU MOBILE
   Antes disso o celular ficava sem navegação nenhuma: o breakpoint de 768
   escondia .menu (com o mega dentro), .link-entrar e .assina, e sobrava só
   o logo e o botão. Nenhuma página de módulo era alcançável pelo telefone.

   Sem JavaScript, com checkbox + label — a home já tem JS demais e as
   páginas de módulo não têm nenhum; script novo em nove arquivos só pra
   abrir menu é superfície de conflito de graça.
   ═══════════════════════════════════════════════════════════════════════ */
/* Item de largura inteira no mega: usado pelo módulo contratado à parte.
   Uma regra só — o resto reaproveita o .mega-item que já existia. */
.mega-item.-larga{grid-column:1 / -1}
.mega-item.-larga .mega-txt small{max-width:62ch}

.menu-tg{position:absolute;opacity:0;pointer-events:none}
/* O atributo hidden não vence display declarado no CSS. Bug recorrente
   neste projeto — a regra explícita fica aqui pra não voltar. */
.menu-tg[hidden]{display:none}
.menu-bt{display:none}
.menu-mob{display:none}

@media (max-width:768px){
  .menu-bt{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:0 0 auto;margin-left:2px;
    border:1px solid var(--linha);border-radius:11px;background:var(--branco);
    color:var(--petroleo);font-size:15px;cursor:pointer;
  }
  .menu-bt .fa-xmark{display:none}
  .menu-tg:checked ~ .topo-in .menu-bt{background:var(--turquesa);border-color:var(--turquesa)}
  .menu-tg:checked ~ .topo-in .menu-bt .fa-bars{display:none}
  .menu-tg:checked ~ .topo-in .menu-bt .fa-xmark{display:inline}

  .menu-mob{
    display:block;max-height:0;overflow:hidden;
    border-top:1px solid transparent;
    transition:max-height .26s cubic-bezier(.2,.8,.2,1),border-color .26s;
  }
  .menu-tg:checked ~ .menu-mob{max-height:88vh;overflow-y:auto;border-top-color:var(--linha)}

  .menu-mob-in{padding:14px 18px 22px}
  .menu-mob-t{
    font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--texto-2);margin:14px 0 7px;
  }
  .menu-mob-t:first-child{margin-top:0}
  .menu-mob a{
    display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:3px;
    border-radius:11px;text-decoration:none;color:var(--petroleo);
    font-size:14.5px;font-weight:500;
  }
  .menu-mob a i{
    width:30px;height:30px;flex:0 0 auto;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--offwhite);color:var(--profundo);font-size:12px;
  }
  .menu-mob a small{display:block;font-size:11.5px;font-weight:400;color:var(--texto-2);margin-top:1px}
  .menu-mob a.-forte{background:var(--turquesa);font-weight:600;justify-content:center;margin-top:10px}
  .menu-mob a.-forte i{background:transparent;color:var(--petroleo);width:auto;height:auto}
  .menu-mob-assina{
    font-family:'Caveat',cursive;font-size:19px;color:var(--profundo);
    text-align:center;margin:16px 0 0;
  }

  /* O botão do topo não pode esticar: ele divide a linha com o logo e o
     hambúrguer, e width:100% do .btn geral empurrava o layout.
     Três colunas (logo · botão · hambúrguer). Com duas, o botão caía numa
     segunda linha que vazava por cima do conteúdo, porque o topo tem
     altura fixa. O hambúrguer vem antes no HTML; `order` o leva para o fim. */
  .topo-fim{gap:8px}
  .topo-fim .btn{width:auto;padding:9px 15px;font-size:13px}
  .topo-in{grid-template-columns:1fr auto auto;gap:10px}
  .menu-bt{order:3}
}
/* Celular estreito (360px): o botão encolhe para caber na mesma linha. */
@media (max-width:380px){
  .topo-fim .btn{padding:8px 12px;font-size:12.5px}
}

/* ══════════ CENA DO COPILOTO (set/26) ══════════ */

/* Moldura propria: a home ja define .module-frame dentro do .palco e
   ESCONDE o chrome. Reusar aquelas classes traria junto um comportamento
   que esta cena nao quer. */
.cop-sec{ padding: 8px 0 4px; }
.cop-sec-cab{ text-align:center; max-width: 660px; margin: 0 auto 20px; }
.cop-sec-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 11.5px; font-weight: 700; letter-spacing:.04em; text-transform: uppercase;
  color: var(--brand-2); background: var(--brand-light);
  border: 1px solid #BFE9EE; border-radius: 999px; padding: 5px 12px;
  margin-bottom: 12px;
}
.cop-sec-cab h2{
  margin: 0 0 8px; font-size: clamp(23px, 3.2vw, 32px); line-height: 1.15;
  font-weight: 800; letter-spacing: -.025em; color: var(--text-1);
}
.cop-sec-cab p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-3); }

.cop-frame{
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); overflow: hidden;
  max-width: 1120px; margin: 0 auto;
}
.cop-chrome{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.cop-chrome .dots{ display:flex; gap:5px; }
.cop-chrome .dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.cop-chrome .url{
  flex: 1; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--text-4);
}
.cop-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11px; font-weight: 700; color: var(--brand-2);
  background: var(--brand-light); border: 1px solid #BFE9EE;
  border-radius: 999px; padding: 4px 10px;
}
.cop-badge svg{ width: 12px; height: 12px; }
.cop-body{ height: 460px; }
@media (max-width: 900px){ .cop-body{ height: 520px; } }

/* ============================================================
   SCENE COPILOTO — o copiloto agindo sobre o CRM
   Reaproveita os tokens da demo (--brand, --ink, --line…) e as
   classes do board (.crm-*). Só o que é próprio da cena vive aqui.
   ============================================================ */

.cop-stage{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  font-family: var(--font-body);
}

/* ── Board de fundo ─────────────────────────────────────────── */
.cop-board-wrap{
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.cop-board-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cop-board-head h1{
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-1);
}
.cop-board-sub{ font-size: 12px; color: var(--text-3); }

.cop-board{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-height: 0;
}
.cop-col{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
.cop-col-head{ display: flex; align-items: center; gap: 7px; }
.cop-col-dot{ width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.cop-col-info strong{
  display: block; font-size: 12px; font-weight: 700; color: var(--text-1);
}
.cop-col-info small{ font-size: 10.5px; color: var(--text-4); }

.cop-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  transition: box-shadow .3s ease, border-color .3s ease, transform .35s ease;
}
.cop-card-title{
  font-size: 12px; font-weight: 700; color: var(--text-1);
  margin-bottom: 5px;
}
.cop-card-meta{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: var(--text-4);
}
.cop-card-dias{ font-weight: 700; }

/* Card apontado pela resposta do copiloto. Âmbar e não turquesa: turquesa
   é a marca e está em tudo; o realce precisa ser a única coisa âmbar da
   tela para o olho achar sem procurar. */
.cop-card.-apontado{
  border-color: #E9B949;
  box-shadow: 0 0 0 3px rgba(233,185,73,.22);
}
.cop-card.-parado .cop-card-dias{ color: #B45309; }

/* Tarefa que nasce no card — o ponto da cena. Cresce em altura em vez de
   aparecer: a pessoa precisa VER a coisa entrando, não achar que já
   estava lá. */
.cop-card-tarefa{
  margin-top: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-2);
  max-height: 0; opacity: 0; overflow: hidden;
  padding-top: 0; margin-top: 0; border-top-color: transparent;
  transition: max-height .45s ease, opacity .35s ease .1s,
              margin-top .45s ease, padding-top .45s ease;
}
.cop-card-tarefa.-entrou{
  max-height: 60px; opacity: 1; margin-top: 8px; padding-top: 8px;
  border-top-color: var(--line);
}
.cop-card-tarefa i{ color: var(--brand-2); font-size: 11px; }

/* ── Painel do copiloto ─────────────────────────────────────── */
.cop-panel{
  background: var(--card);
  display: flex; flex-direction: column;
  min-width: 0;
}
.cop-panel-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
}
.cop-panel-ic{
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand-light); color: var(--brand-2);
  display: grid; place-items: center; font-size: 13px; flex: 0 0 auto;
}
.cop-panel-head strong{ font-size: 13.5px; font-weight: 700; color: var(--text-1); }
.cop-panel-head small{ display: block; font-size: 11px; color: var(--text-4); }

.cop-thread{
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}

.cop-msg{ display: flex; gap: 9px; opacity: 0; transform: translateY(6px); }
.cop-msg.-vis{ opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.cop-msg.-user{ flex-direction: row-reverse; }
.cop-av{
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 10px; font-weight: 800;
}
.cop-av.-ia{ background: var(--brand-light); color: var(--brand-2); }
.cop-av.-vc{ background: var(--line-2); color: var(--text-2); }
.cop-bolha{
  border-radius: 12px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-1);
  background: var(--bg); border: 1px solid var(--line);
  max-width: 82%;
}
.cop-msg.-user .cop-bolha{
  background: var(--brand-light); border-color: #BFE9EE;
}

/* Ferramenta rodando. É o que prova que ele CONSULTOU em vez de inventar —
   e é o que separa esta demo de um chatbot bonito. */
.cop-tool{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--text-3);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 9px;
  margin-top: 7px;
}
.cop-tool i{ font-size: 9px; color: var(--brand-2); }
.cop-tool.-rodando i{ animation: copGira .9s linear infinite; }
@keyframes copGira{ to{ transform: rotate(360deg); } }

/* Confirmação antes de agir — o coração da cena. */
.cop-confirma{
  border: 1px solid #E9B949;
  background: #FEF9EC;
  border-radius: 12px;
  padding: 11px 12px;
  margin-top: 4px;
}
.cop-confirma-t{
  font-size: 12px; font-weight: 700; color: #7A5A16; margin-bottom: 3px;
}
.cop-confirma-d{ font-size: 11.5px; color: #8A6A26; line-height: 1.45; }
.cop-confirma-acoes{ display: flex; gap: 7px; margin-top: 10px; }
.cop-bt{
  border: 1px solid var(--line); background: var(--card);
  border-radius: 8px; padding: 6px 13px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--text-2); cursor: pointer;
}
.cop-bt.-sim{
  background: var(--brand-2); border-color: var(--brand-2); color: #fff;
}
.cop-confirma.-resolvida .cop-confirma-acoes{ display: none; }
.cop-confirma.-resolvida{
  border-color: var(--line); background: var(--bg);
}
.cop-feito{
  display: none; align-items: center; gap: 6px;
  margin-top: 9px; font-size: 11.5px; font-weight: 700; color: var(--brand-2);
}
.cop-confirma.-resolvida .cop-feito{ display: flex; }

/* Compositor: o texto é digitado por script, não é input real — mas o
   cursor precisa piscar, senão parece texto colado. */
.cop-comp{
  border-top: 1px solid var(--line);
  padding: 12px 16px;
}
.cop-comp-campo{
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 40px;
  font-size: 12.5px; color: var(--text-1);
  display: flex; align-items: center; gap: 2px;
  background: var(--card);
}
.cop-comp-campo.-ativo{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.cop-cursor{
  width: 1.5px; height: 15px; background: var(--brand-2);
  animation: copPisca 1s steps(2) infinite;
}
@keyframes copPisca{ 50%{ opacity: 0; } }
.cop-comp-nota{
  margin: 8px 2px 0; font-size: 10.5px; color: var(--text-4); line-height: 1.4;
}

@media (max-width: 900px){
  .cop-stage{ grid-template-columns: 1fr; grid-template-rows: 190px 1fr; }
  .cop-board-wrap{ border-right: none; border-bottom: 1px solid var(--line); padding: 12px; }
  .cop-board{ grid-template-columns: repeat(2, 1fr); }
  .cop-col:nth-child(n+3){ display: none; }
}



/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — camada única, no fim do arquivo
   A demo original era de tela cheia: dezessete grids de coluna fixa, um
   palco de altura travada e um header de três colunas. Nada disso cabe em
   390px, e foi por isso que a experiência no celular ficou ruim.

   A regra que guia tudo aqui: no celular a jornada vira ROLAGEM, não
   miniatura. Encolher um kanban de cinco colunas pra caber deixa texto de
   8px que ninguém lê — melhor deixar a cena rolar na horizontal e manter
   o tamanho legível.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  .wrap{padding:0 18px}

  /* ── Header ─────────────────────────────────────────────────────── */
  .topo-in{grid-template-columns:1fr auto auto;height:60px;gap:10px}
  .marca svg{height:22px}
  .assina{display:none}
  .link-entrar{display:none}      /* CTA sozinho: uma decisão por tela */
  .btn-sm{padding:9px 16px;font-size:13.5px}

  /* ── Hero ───────────────────────────────────────────────────────── */
  .hero{padding:44px 0 0}
  h1{font-size:clamp(32px,10vw,44px);max-width:none;letter-spacing:-.03em}
  .sub{font-size:15px;margin-top:20px}
  .modulos{gap:6px;margin-bottom:22px}
  .mod{padding:6px 11px;font-size:11.5px}
  .hero-cta .btn{width:100%;justify-content:center}
  .prova{flex-direction:column;gap:12px;align-items:flex-start;text-align:left;padding-top:20px}

  /* ── Abas da jornada ────────────────────────────────────────────────
     Viram trilho horizontal deslizante. Oito abas quebradas em quatro
     linhas empurrariam o palco pra fora da primeira tela. */
  .abas{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    justify-content:flex-start;
    gap:6px;margin:34px -18px 18px;padding:0 18px 6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .abas::-webkit-scrollbar{display:none}
  .aba{flex:0 0 auto;scroll-snap-align:center;padding:9px 14px;font-size:13.5px}
  .aba-legenda{font-size:14px;min-height:0;margin-bottom:18px;text-align:left}

  /* ── Palco ──────────────────────────────────────────────────────────
     A demo embutida cuida do próprio celular (ela empilha as colunas e
     rola por dentro). O site só dá a altura. */
  .palco{border-radius:14px}
  .chrome{padding:10px 12px;font-size:11px}
  .ia-log{padding:9px 12px;font-size:10.5px}
  .ia-log-txt{white-space:normal;line-height:1.4}
  .palco-pe{flex-direction:column;align-items:flex-start}
  .palco-pe a{width:100%;justify-content:center}

  /* ── Seções do site ─────────────────────────────────────────────── */
  .hub-cab h2,.integra-cab h2{font-size:clamp(25px,7vw,32px)}
  .hub-cab p,.integra-cab p{font-size:14.5px}
  .troca{grid-template-columns:1fr;gap:14px}
  .seta{transform:rotate(90deg);margin:2px 0}
  .nativo{grid-template-columns:1fr;gap:12px;margin:26px 0 44px}
  .nativo-card{padding:18px}

  /* ── Hub de integrações ─────────────────────────────────────────────
     O desenho com curvas não sobrevive a 390px: vira nó. No celular a
     lista faz o mesmo trabalho e lê melhor. */
  .hub-vis{display:none}
  .hub-lista-mobile{
    display:flex!important;flex-wrap:wrap;gap:8px;justify-content:center;
  }
  .hub-lista-mobile .hub-nome{font-size:12.5px;padding:8px 13px}
  .integra-nota{margin-bottom:56px}

  .rodape-nota{margin-bottom:56px}
}

/* Telas bem estreitas */
@media (max-width:400px){
  h1{font-size:clamp(29px,9.5vw,38px)}
}

/* ── Chamada no pé de cada cena da jornada ───────────────────────────
   As nove cenas nao tinham UM link. O visitante via o produto inteiro
   acontecer e nao tinha pra onde ir — se nao descobrisse o menu, a home
   era o fim da visita. Cada cena agora aponta pro modulo que ela mostra. */
.cena-cta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--linha);background:var(--offwhite);
  text-decoration:none;color:inherit;
  transition:border-color .18s,background .18s,transform .18s;
}
.cena-cta:hover{border-color:var(--turquesa);background:var(--branco);transform:translateY(-1px)}
.cena-cta-txt{font-size:13.5px;color:var(--texto-2);line-height:1.45}
.cena-cta-btn{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 16px;border-radius:999px;
  background:var(--petroleo);color:var(--mint);
  font-size:12.5px;font-weight:600;white-space:nowrap;
}
.cena-cta-btn i{font-size:10px;transition:transform .18s}
.cena-cta:hover .cena-cta-btn i{transform:translateX(3px)}
@media (max-width:560px){
  .cena-cta{flex-direction:column;align-items:flex-start}
  .cena-cta-btn{width:100%;justify-content:center}
}
/* ── Cards do hub viraram link ───────────────────────────────────────
   O <div> virou <a>: a grade listava oito modulos e nao levava a lugar
   nenhum. O painel no hover mostra a contagem de recursos e o convite —
   sem esconder nada do que ja estava visivel, porque card que troca de
   conteudo no hover esconde a informacao de quem chega pelo toque. */
/* Sem hover (toque): o painel fica sempre visivel, senao o CTA nunca
   aparece pra quem esta no celular. */
@media (hover:none){
}
/* ── Mapa dos módulos ────────────────────────────────────────────────
   Radial e nao grade: grade lista, mapa mostra que as frentes se ligam —
   que e literalmente o argumento do produto ("um hub no lugar de varias
   assinaturas"). Os fios saem do centro pra cada frente. */
.mapa{padding:84px 0 0}
.mapa-cab{text-align:center;margin-bottom:34px}
.mapa-cab h2{margin:0 0 8px;font-size:clamp(24px,3.2vw,32px);font-weight:600;letter-spacing:-.03em}
.mapa-cab p{margin:0;font-size:15px;color:var(--texto-2)}

/* 900×600, as mesmas coordenadas do mapa da calculadora: quem vem de lá
   reconhece o desenho. */
.mapa-palco{position:relative;max-width:900px;margin:0 auto;height:600px}
.mapa-fios{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mapa-fios path{fill:none;stroke:var(--turquesa);stroke-width:1.5;opacity:.55;
  stroke-dasharray:420;stroke-dashoffset:420;animation:mapa-fio 2s ease forwards}
.mapa-fios path:nth-child(2){animation-delay:.1s}
.mapa-fios path:nth-child(3){animation-delay:.2s}
.mapa-fios path:nth-child(4){animation-delay:.3s}
.mapa-fios path:nth-child(5){animation-delay:.4s}
.mapa-fios path:nth-child(6){animation-delay:.5s}
.mapa-fios path:nth-child(7){animation-delay:.6s}
.mapa-fios path:nth-child(8){animation-delay:.7s}
.mapa-fios path:nth-child(9){animation-delay:.8s}
.mapa-fios path:nth-child(10){animation-delay:.9s}
@keyframes mapa-fio{to{stroke-dashoffset:0}}

.mapa-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--turquesa);
  color:var(--petroleo);text-align:center;z-index:3}   /* plano: sem degradê */
.mapa-hub b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.mapa-hub small{font-size:10.5px;opacity:.85;margin-top:3px}
.mapa-hub-anel{position:absolute;inset:-16px;border-radius:50%;
  border:1.5px dashed var(--turquesa);opacity:.45;
  animation:mapa-gira 26s linear infinite}
@keyframes mapa-gira{to{transform:rotate(360deg)}}

.mapa-no{
  position:absolute;display:flex;align-items:center;gap:11px;width:216px;
  padding:12px 13px;border:1px solid var(--linha);border-radius:13px;
  background:var(--branco);cursor:pointer;text-align:left;font-family:inherit;
  z-index:4;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.mapa-no:hover,.mapa-no:focus-visible{border-color:var(--turquesa);
  box-shadow:0 10px 26px rgba(10,59,62,.12);transform:translateY(-2px)}
.mapa-no>i:first-child{width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--offwhite);color:var(--profundo);font-size:13px}
.mapa-no span{flex:1;min-width:0}
.mapa-no b{display:block;font-size:12.5px;font-weight:600}
.mapa-no em{display:block;font-style:normal;font-size:10px;color:var(--texto-2);margin-top:2px}
.mapa-n{flex:0 0 auto;font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--texto-2)}
/* Posições espelhando os fios do SVG (viewBox 900x600): o centro de cada
   nó cai no fim do fio (y 110, 240, 370, 500; topo 45; baixo 555). */
.mapa-no.-topo {left:50%;top:14px;transform:translateX(-50%)}
.mapa-no.-baixo{left:50%;bottom:14px;transform:translateX(-50%)}
.mapa-no.-e1{left:0;top:80px}    .mapa-no.-d1{right:0;top:80px}
.mapa-no.-e2{left:0;top:210px}   .mapa-no.-d2{right:0;top:210px}
.mapa-no.-e3{left:0;top:340px}   .mapa-no.-d3{right:0;top:340px}
.mapa-no.-e4{left:0;top:470px}   .mapa-no.-d4{right:0;top:470px}
.mapa-no.-topo:hover,.mapa-no.-baixo:hover{transform:translateX(-50%) translateY(-2px)}

.mapa-pe{text-align:center;margin-top:30px;font-size:13px;color:var(--texto-2)}
.mapa-pe b{font-family:var(--mono);font-size:17px;color:var(--texto)}
.mapa-pe span{color:var(--profundo);font-weight:600}

/* Abaixo de 900px o radial nao cabe: vira lista, os fios somem e o hub
   deixa de ser centro pra virar cabecalho. */
@media (max-width:900px){
  .mapa-palco{height:auto;display:flex;flex-direction:column;gap:9px}
  .mapa-fios{display:none}
  .mapa-hub{position:static;transform:none;width:auto;height:auto;border-radius:14px;
    padding:18px;flex-direction:row;gap:10px;justify-content:center;margin-bottom:6px}
  .mapa-hub-anel{display:none}
  .mapa-no{position:static;width:auto;transform:none!important}
}

/* ── Painel de detalhe ───────────────────────────────────────────── */
.mapa-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(10,59,62,.42);
  opacity:0;transition:opacity .2s ease}
.mapa-modal.is-on{opacity:1}
.mapa-modal[hidden]{display:none}
.mapa-modal-in{position:relative;width:100%;max-width:440px;max-height:86vh;overflow:auto;
  padding:22px;border-radius:18px;background:var(--branco);
  box-shadow:0 28px 70px rgba(10,59,62,.3);
  transform:translateY(10px) scale(.98);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.mapa-modal.is-on .mapa-modal-in{transform:none}
.mapa-modal-in:focus{outline:none}
.mapa-x{position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:9px;
  border:1px solid var(--linha);background:var(--branco);color:var(--texto-2);
  font-size:17px;line-height:1;cursor:pointer}
.mapa-x:hover{background:var(--offwhite)}
.mapa-modal-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:34px}
.mapa-modal-ic{width:42px;height:42px;border-radius:13px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--turquesa);color:var(--petroleo);font-size:16px}
.mapa-modal-h b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.mapa-modal-h small{display:block;font-size:12px;color:var(--texto-2);margin-top:3px}
.mapa-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mapa-chips span{font-size:10.5px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--offwhite);border:1px solid var(--linha);color:var(--texto-2)}
.mapa-lista{list-style:none;margin:0 0 16px;padding:0}
.mapa-lista li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;
  font-size:13px;line-height:1.5}
.mapa-lista i{color:var(--profundo);font-size:10px;margin-top:5px;flex:0 0 auto}
.mapa-cta{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px;border-radius:12px;background:var(--petroleo);color:var(--mint);
  font-size:13.5px;font-weight:600;text-decoration:none}
.mapa-cta i{font-size:11px;transition:transform .18s}
.mapa-cta:hover i{transform:translateX(3px)}


/* ── integrações v14: nos dois sentidos ─────────────────────────────── */
.hub-vis{max-width:1040px;padding:18px 0 0}
.hub-pos{position:absolute;display:flex}
.hub-vis .hub-nome{position:static}
.hub-dot.-in{fill:var(--turquesa)}
.hub-dot.-out{fill:var(--offwhite);stroke:var(--turquesa);stroke-width:1.8}
.hub-grupo{
  position:absolute;top:2.2%;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2);white-space:nowrap;
}
.hub-nome{padding:8px 14px;font-size:13px}
.hub-tag{
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--mint);color:var(--petroleo);margin-left:2px;
}
.hub-grupo-m{
  flex:0 0 100%;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2);margin:10px 0 2px;
}
.hub-leg{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;
  margin:26px auto 0;max-width:900px;font-size:12.5px;color:var(--texto-2);
}
.hub-leg > span{display:inline-flex;align-items:center;gap:7px}
.hub-leg-in,.hub-leg-out{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.hub-leg-in{background:var(--turquesa)}
.hub-leg-out{border:1.8px solid var(--turquesa);background:var(--offwhite)}
.hub-leg-sep{width:1px;height:14px;background:var(--linha)}
.hub-leg .fa-bolt{color:var(--profundo);font-size:11px}
.wa-dois{max-width:1020px;margin:44px auto 0}
.wa-cab{text-align:center;max-width:62ch;margin:0 auto 18px}
.wa-cab h3{margin:0 0 8px;font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.wa-cab p{margin:0;font-size:14.5px;color:var(--texto-2);line-height:1.6}
.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wa-card{border:1px solid var(--linha);border-radius:16px;padding:22px 24px;background:var(--branco)}
.wa-selo{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:var(--mint);color:var(--petroleo);font-size:11.5px;font-weight:600;margin-bottom:12px}
.wa-selo i{font-size:11px}
.wa-card h4{margin:0 0 8px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.wa-card p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--texto-2)}
.wa-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.wa-card li{position:relative;padding-left:20px;font-size:13px;line-height:1.5;color:var(--petroleo)}
.wa-card li::before{content:'';position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--turquesa)}
@media (max-width:760px){.wa-grid{grid-template-columns:1fr}.wa-dois{margin-top:30px}.wa-card{padding:18px}}
.integra-nota{margin-top:24px}
@media (max-width:900px){
  .hub-leg{margin-top:18px;font-size:12px}
  .hub-leg > .hub-leg-sep,.hub-leg > .hub-leg-dir{display:none}  /* sem o mapa, a legenda dos pontos não diz nada */
}


/* ══ A CENA DO COPILOTO (hero) ═══════════════════════════════════════════
   Dentro da moldura vale a paleta do PRODUTO (a mesma da demo), não a do
   site: o argumento é "isto é o Flowin", e o Flowin tem a cara dele. */
.hc-sec{padding:26px 0 0}
.hc-passos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.hc-passo{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:999px;
  border:1px solid var(--linha);background:var(--branco);font:inherit;font-size:12.5px;font-weight:500;
  color:var(--texto-2);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.hc-passo b{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--offwhite);border:1px solid var(--linha);font-size:11px;font-weight:600;color:var(--texto-2)}
.hc-passo.-on{border-color:var(--turquesa);color:var(--petroleo);background:var(--branco)}
.hc-passo.-on b{background:var(--turquesa);border-color:var(--turquesa);color:var(--petroleo)}

.hc{--pt:#3FA396;--pp:#1E6F66;--pk:#14342F;--pl:#E8F5F3;--pb:#C7E5E0;--px:#E4EDEB;--pf:#F4F9F8;
  --pt2:#4A5B58;--pt3:#8A9B97;--pam:#B45309;--pam-f:#FFF7ED;
  border:1px solid var(--linha);border-radius:18px;background:#fff;overflow:hidden;color:var(--pk);
  font-size:13px;line-height:1.5}
.hc-cab{height:40px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--px);background:#FBFDFD}
.hc-bolas{display:flex;gap:5px}.hc-bolas i{width:9px;height:9px;border-radius:50%;background:var(--px)}
.hc-url{flex:1;min-width:0;font-size:11.5px;color:var(--pt3);background:#fff;border:1px solid var(--px);border-radius:7px;
  padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'IBM Plex Mono',ui-monospace,monospace;transition:opacity .25s}
.hc-url.-troca{opacity:.35}
.hc-selo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--pp);
  background:var(--pl);border:1px solid var(--pb);border-radius:999px;padding:3px 10px}
.hc-palco{position:relative;height:560px;background:var(--pf);overflow:hidden}
.hc-fundo{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.hc-fundo.-on{opacity:1}

/* ── ato 1: a home ── */
.hc-home{display:grid;grid-template-columns:1fr 250px;background:#fff}
.hc-chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.hc-msgs{flex:1;min-height:0;overflow:hidden;padding:22px 26px 6px;display:flex;flex-direction:column;gap:14px;justify-content:flex-end}
.hc-intro{margin:auto 0;transition:opacity .35s}
.hc-intro.-sai{opacity:0}
.hc-intro h3{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.hc-intro h3 em{font-style:normal;color:var(--pp);display:block}
.hc-intro p{margin:0;font-size:12.5px;color:var(--pt2);max-width:52ch}
.hc-comp{flex:none;padding:10px 26px 14px}
.hc-box{display:flex;align-items:center;gap:8px;border:1px solid var(--px);border-radius:13px;padding:9px 9px 9px 14px;min-height:46px;background:#fff;transition:border-color .16s}
.hc-box.-ativa{border-color:var(--pt)}
.hc-ent{flex:1;min-width:0;font-size:12.5px;color:var(--pk)}
.hc-ent:empty::before{content:'Ex.: quais negócios estão parados há mais de 10 dias?';color:var(--pt3)}
.hc-cursor{display:inline-block;width:2px;height:1em;background:var(--pt);margin-left:1px;opacity:0}
.hc-box.-ativa .hc-cursor{opacity:1;animation:hcPisca 1s step-end infinite}
@keyframes hcPisca{50%{opacity:0}}
.hc-env,.hc-mic{flex:none;width:30px;height:30px;border-radius:10px;background:#EEF4F3;color:var(--pt3);display:flex;align-items:center;justify-content:center;font-size:11px;transition:background .16s,color .16s}
.hc-env.-on{background:var(--pt);color:#fff}
.hc-mic.-on{background:#FEE2E2;color:#B91C1C}
.hc-nota{margin:8px 0 0;text-align:center;font-size:10.5px;color:var(--pt3)}
.hc-rail{border-left:1px solid var(--px);padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:#FBFDFD}
.hc-rcard{border:1px solid var(--px);border-radius:12px;padding:11px 12px;background:#fff}
.hc-saldo{display:flex;align-items:center;gap:10px}
.hc-saldo .ic{width:28px;height:28px;border-radius:8px;background:var(--pl);color:var(--pp);display:flex;align-items:center;justify-content:center;font-size:11px}
.hc-saldo b{display:block;font-size:15px;line-height:1.1}.hc-saldo small{font-size:10.5px;color:var(--pt3)}
.hc-rcard h4{margin:0 0 8px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pt3);display:flex;justify-content:space-between;gap:8px}
.hc-rcard h4 span{font-weight:600;letter-spacing:0;text-transform:none}
.hc-rlin{padding:7px 0;border-top:1px solid var(--px)}
.hc-rlin b{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-rlin small{display:block;font-size:10px;color:var(--pt3)}

/* mensagens (home e janela) */
.hc-m{display:flex;gap:9px;max-width:100%;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.hc-m.-vis{opacity:1;transform:none}
.hc-m.-eu{flex-direction:row-reverse;margin-left:auto}
.hc-av{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--pl);color:var(--pp);border:1px solid var(--pb)}
.hc-m.-eu .hc-av{background:var(--pk);color:#fff;border-color:var(--pk)}
/* Copiloto: símbolo da Flowin turquesa sobre petróleo, como o Flow. */
.hc-m:not(.-eu) .hc-av{background:var(--petroleo);border-color:var(--petroleo);--lg-sim:var(--turquesa)}
.hc-av svg{width:66%;height:auto;aspect-ratio:166.5/121.7;display:block;margin-top:1px}
.hc-bolha{padding:9px 12px;border-radius:12px;font-size:12.5px;line-height:1.55;border:1px solid var(--px);background:#fff;max-width:520px}
.hc-m.-eu .hc-bolha{background:var(--pt);border-color:var(--pt);color:#fff}
.hc-bolha .hc-aud{display:block;font-size:10px;opacity:.85;margin-bottom:3px}
.hc-acao{display:flex;align-items:center;gap:7px;margin-top:7px;padding:5px 10px;border-radius:8px;background:#F7FBFA;border:1px solid var(--px);font-size:10.5px;color:var(--pt2);font-family:'IBM Plex Mono',ui-monospace,monospace}
.hc-acao i{font-size:9px;color:var(--pt);flex:none}
.hc-acao.-roda i{animation:hcGira 1s linear infinite}
@keyframes hcGira{to{transform:rotate(360deg)}}
.hc-acao b{font-weight:600;color:var(--pk)}
.hc-itens{margin-top:8px;border:1px solid var(--px);border-radius:10px;overflow:hidden}
.hc-it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-top:1px solid var(--px)}
.hc-it:first-child{border-top:0}
.hc-it .tx{flex:1;min-width:0}
.hc-it .tx b{display:block;font-size:12px;font-weight:600;line-height:1.3}
.hc-it .tx small{display:block;font-size:10.5px;color:var(--pt3)}
.hc-it .tag{flex:none;font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--pam-f);color:var(--pam)}
.hc-conf{margin-top:8px;border:1px solid var(--pb);border-radius:10px;background:var(--pl);padding:9px 11px}
.hc-conf b{display:block;font-size:12px;margin-bottom:5px}
.hc-conf small{display:block;font-size:11px;color:var(--pt2);line-height:1.45}
.hc-conf-bt{display:flex;gap:6px;margin-top:8px}
.hc-conf-bt span{padding:6px 12px;border-radius:8px;font-size:11.5px;font-weight:600;border:1px solid var(--pb);background:#fff;color:var(--pp);transition:background .15s,color .15s}
.hc-conf-bt span.-p{background:var(--pp);border-color:var(--pp);color:#fff}
.hc-conf-bt span.-p.-clic{background:var(--pk)}

/* ── ato 2: o card ── */
.hc-card{padding:16px 22px;background:#fff;overflow:hidden}
.hc-ccab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hc-ccab h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.hc-ccab small{font-size:11px;color:var(--pt3)}
.hc-cchips{display:flex;gap:6px}
.hc-cchips span{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--px);background:#fff;color:var(--pt2)}
.hc-cchips .-az{background:#EEF3FF;border-color:#D6E0FF;color:#3451B2}
.hc-cchips .-ok{color:#1F7A4D;border-color:#CBEBD8;background:#F0FAF4}
.hc-cchips .-nao{color:#B42318;border-color:#F7D0CC;background:#FEF3F2}
.hc-etapas{display:grid;grid-template-columns:repeat(5,1fr);margin:16px 0 14px}
.hc-et{position:relative;text-align:center;padding-top:16px}
.hc-et::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--px)}
.hc-et i{position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid var(--px);z-index:1;transition:border-color .3s,background .3s}
.hc-et b{display:block;font-size:11.5px;font-weight:600;color:var(--pt3)}
.hc-et small{display:block;font-size:10px;color:var(--pt3);min-height:14px}
.hc-et.-ok::before,.hc-et.-on::before{background:var(--pt)}
.hc-et.-ok i{border-color:var(--pt);background:var(--pt)}
.hc-et.-on i{border-color:var(--pt);box-shadow:0 0 0 3px var(--pl)}
.hc-et.-ok b,.hc-et.-on b{color:var(--pk)}
.hc-cgrid{display:grid;grid-template-columns:1fr 250px;gap:14px}
.hc-cbl{border:1px solid var(--px);border-radius:12px;padding:12px 14px;background:#fff}
.hc-cbl h3{margin:0 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.hc-cont{font-size:10px;font-weight:600;background:#EEF4F3;color:var(--pt2);border-radius:99px;padding:1px 7px}
.hc-vazio{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;background:#F7FBFA;color:var(--pt2);font-size:11.5px}
.hc-vazio i{color:var(--pt)}
.hc-atv{display:none;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;border:1px solid var(--pb);background:var(--pl)}
.hc-atv.-on{display:flex;animation:hcNasce .45s ease}
@keyframes hcNasce{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hc-atv .ic{width:28px;height:28px;border-radius:8px;background:#fff;color:var(--pp);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.hc-atv b{display:block;font-size:12px;font-weight:600}.hc-atv small{font-size:10.5px;color:var(--pt2)}
.hc-atv-ok{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--pb);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--pp);background:#fff}
.hc-tl{display:flex;flex-direction:column;gap:6px}
.hc-tli{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:9px;border:1px solid var(--px)}
.hc-tli .ic{flex:none;width:24px;height:24px;border-radius:7px;background:#EEF4F3;color:var(--pt2);display:flex;align-items:center;justify-content:center;font-size:10px}
.hc-tli .ic.-wa{background:#E7F8EE;color:#1F7A4D}.hc-tli .ic.-ia{background:var(--pl);color:var(--pp)}
.hc-tli b{display:block;font-size:11px;font-weight:600}.hc-tli small{display:block;font-size:10.5px;color:var(--pt2);line-height:1.4}
.hc-ctt{display:flex;align-items:center;gap:9px}
.hc-ctt .av{width:30px;height:30px;border-radius:50%;background:var(--pl);color:var(--pp);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.hc-ctt b{display:block;font-size:12px;font-weight:600}.hc-ctt small{font-size:10.5px;color:var(--pt3)}
.hc-campo{padding:7px 9px;border:1px solid var(--px);border-radius:8px;margin-top:6px}
.hc-campo small{display:block;font-size:10px;color:var(--pt3)}.hc-campo b{font-size:11.5px;font-weight:600}

/* ── ato 3: a caixa de e-mail (outra tela) ── */
.hc-mail{display:grid;grid-template-columns:170px 1fr;background:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.hc-mlado{padding:14px 12px;border-right:1px solid #ECEFF1;background:#F8FAFB}
.hc-mnovo{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #DDE3E7;font-size:12px;font-weight:600;color:#1F2937;margin-bottom:12px}
.hc-mnav{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:999px;font-size:12px;color:#374151}
.hc-mnav i{width:14px;text-align:center;font-size:11px;color:#6B7280}
.hc-mnav b{margin-left:auto;font-size:11px}
.hc-mnav.-on{background:#E3EBF2;font-weight:600}
.hc-mlista{overflow:hidden}
.hc-mit{display:grid;grid-template-columns:150px 1fr 44px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid #EEF1F3;font-size:12.5px;color:#374151}
.hc-mit b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-mit span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-mit em{font-style:normal;color:#6B7280}
.hc-mit small{text-align:right;color:#6B7280;font-size:11px}
.hc-mit.-nova{background:#fff}.hc-mit.-nova b,.hc-mit.-nova span{font-weight:600;color:#111827}
.hc-mit:not(.-nova){background:#F6F8FA}

/* ── a janela flutuante ── */
.hc-flu{position:absolute;right:18px;bottom:18px;width:340px;max-height:460px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--px);border-radius:16px;box-shadow:0 18px 48px rgba(20,52,47,.18);
  opacity:0;transform:translateY(24px) scale(.96);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.hc-flu.-on{opacity:1;transform:none}
.hc-fcab{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--px)}
.hc-fic{width:28px;height:28px;border-radius:8px;background:var(--pl);color:var(--pp);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.hc-fq{flex:1;min-width:0}
.hc-fq b{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.hc-fq small{display:block;font-size:10.5px;color:var(--pt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.hc-fq small.-ctx{color:var(--pp)}
.hc-ftag{display:none;align-items:center;gap:5px;font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--pam-f);color:var(--pam);white-space:nowrap}
.hc-ftag.-on{display:inline-flex;animation:hcNasce .4s ease}
.hc-fmsgs{flex:1;min-height:120px;overflow:hidden;padding:12px 12px 4px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.hc-fmsgs .hc-bolha{font-size:12px;padding:8px 11px}
.hc-fcomp{flex:none;padding:8px 12px 12px;position:relative}
.hc-box.-mini{min-height:40px;padding:6px 6px 6px 12px;border-radius:11px}
.hc-box.-mini .hc-ent{font-size:12px}
.hc-box.-mini .hc-ent:empty::before{content:'Pergunte ou dite…'}
.hc-box.-mini .hc-env,.hc-box.-mini .hc-mic{width:28px;height:28px}
.hc-grav{position:absolute;left:12px;right:12px;bottom:12px;height:40px;border-radius:11px;background:var(--pk);color:#fff;
  display:none;align-items:center;gap:10px;padding:0 12px;font-size:11.5px}
.hc-grav.-on{display:flex;animation:hcNasce .25s ease}
.hc-gdot{width:8px;height:8px;border-radius:50%;background:#EF4444;animation:hcPisca 1s step-end infinite}
.hc-onda{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.hc-onda i{display:block;width:3px;border-radius:2px;background:#fff;opacity:.9;animation:hcOnda .9s ease-in-out infinite}
@keyframes hcOnda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.hc-grav b{font-variant-numeric:tabular-nums;font-weight:600}

.hc-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,16px);display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:10px;background:var(--pk);color:#fff;font-size:12px;font-weight:500;
  box-shadow:0 10px 30px rgba(20,52,47,.25);opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap}
.hc-toast i{color:#86E6DD}
.hc-toast.-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .hc-home{grid-template-columns:1fr}.hc-rail{display:none}
  .hc-cgrid{grid-template-columns:1fr}.hc-cbl.-lado{display:none}
  .hc-mail{grid-template-columns:1fr}.hc-mlado{display:none}
  .hc-mit{grid-template-columns:110px 1fr 40px;padding:10px 12px}
}
@media (max-width:700px){
  .hc-palco{height:520px}
  .hc-passo span{display:none}.hc-passo{padding:6px}.hc-passo.-on span{display:inline}
  .hc-flu{left:10px;right:10px;bottom:10px;width:auto;max-height:78%}
  .hc-etapas{grid-template-columns:repeat(3,1fr)}.hc-et:nth-child(n+4){display:none}
  .hc-intro h3{font-size:18px}
  .hc-selo{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hc-onda i{animation:none;transform:scaleY(.6)}
}


/* ── o toggle do hero ────────────────────────────────────────────────── */
.perfil{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--linha);background:var(--branco);margin-top:26px}
.perfil-bt{border:0;background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--texto-2);
  padding:7px 16px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s}
.perfil-bt.-on{background:var(--turquesa);color:var(--petroleo);font-weight:600}
.perfil + .sub{margin-top:18px}
/* O subtítulo do topo quebra onde o texto manda (a quebra vem do próprio
   texto, \n no HTML e no data-*), não onde a largura acaba: duas linhas
   no computador. No celular volta a correr solto. */
#heroSub{white-space:pre-line;max-width:900px}
@media (max-width:768px){ #heroSub{white-space:normal} }
.hero-vs{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--profundo);text-decoration:none}
.hero-vs:hover{color:var(--petroleo)}
.hero-vs i{font-size:11px;transition:transform .16s ease}
.hero-vs:hover i{transform:translateX(3px)}
/* hidden não vence display declarado no CSS — regra explícita */
.hero-vs[hidden]{display:none}

/* ── entrada pela dor ────────────────────────────────────────────────── */
.dores{padding:88px 0 0}
.dores-cab{text-align:center;max-width:60ch;margin:0 auto 26px}
.dores-cab h2{font-size:clamp(30px,4.2vw,46px);font-weight:600;letter-spacing:-.035em;margin:0 0 14px;line-height:1.1}
.dores-cab p{font-size:16px;line-height:1.65;color:var(--texto-2);margin:0}
.dores-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dor{display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;border:1px solid var(--linha);border-radius:16px;
  background:var(--branco);text-decoration:none;color:var(--petroleo);transition:border-color .18s,transform .18s}
.dor:hover{border-color:var(--turquesa);transform:translateY(-2px)}
.dor-ic{width:36px;height:36px;border-radius:10px;background:var(--mint);color:var(--petroleo);display:flex;align-items:center;justify-content:center;font-size:14px}
.dor-tx{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3;flex:1}
.dor-mod{font-size:12px;font-weight:600;color:var(--profundo);display:inline-flex;align-items:center;gap:6px}
.dor-mod i{font-size:10px;transition:transform .18s}
.dor:hover .dor-mod i{transform:translateX(3px)}
@media (max-width:1000px){.dores-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dores{padding-top:60px}.dores-grid{grid-template-columns:1fr}.dor{padding:16px}}

/* ── perguntas ───────────────────────────────────────────────────────── */
.faq{padding:96px 0 0;max-width:820px}
.faq-cab{text-align:center;margin:0 auto 26px}
.faq-cab h2{font-size:clamp(28px,3.8vw,40px);font-weight:600;letter-spacing:-.035em;margin:0 0 12px;line-height:1.1}
.faq-cab p{font-size:15px;color:var(--texto-2);margin:0}
.faq-cab a{color:var(--profundo);font-weight:600;text-decoration:none}
.faq-cab a:hover{text-decoration:underline}
.faq-lista{display:flex;flex-direction:column;gap:8px}
.faq-it{border:1px solid var(--linha);border-radius:14px;background:var(--branco);overflow:hidden}
.faq-it summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--petroleo)}
.faq-it summary::-webkit-details-marker{display:none}
.faq-it summary i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--offwhite);border:1px solid var(--linha);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--profundo);transition:transform .2s,background .2s}
.faq-it[open] summary i{transform:rotate(45deg);background:var(--turquesa);border-color:var(--turquesa);color:var(--petroleo)}
.faq-r{padding:0 20px 18px}
.faq-r p{margin:0;font-size:14.5px;line-height:1.65;color:var(--texto-2)}
@media (max-width:560px){.faq{padding-top:64px}.faq-it summary{padding:14px 16px;font-size:15px}.faq-r{padding:0 16px 16px}}

.rod-selo{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap}
.rod-selo i{color:var(--turquesa);font-size:12px}
/* ── mapa v17: a jornada acesa ─────────────────────────────────────── */
.mapa-hub-lg{height:24px;width:auto;--lg-sim:#fff;--lg-tx:#fff;display:block}
.mapa-hub{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mapa-hub.-bate{transform:translate(-50%,-50%) scale(1.06)}
.mapa-pulso{fill:var(--turquesa);opacity:0}
.mapa-pulso.-vai{opacity:1}
.mapa-fios path.-vivo{opacity:1;stroke-width:2.2;transition:opacity .3s,stroke-width .3s}
.mapa-no{transition:border-color .3s,transform .18s,box-shadow .3s}
.mapa-no.-vivo{border-color:var(--turquesa);box-shadow:0 0 0 4px var(--mint)}
.mapa-no.-vivo>i:first-child{background:var(--turquesa);color:var(--petroleo)}
@media (max-width:900px){
  .mapa-hub.-bate{transform:none}
  .mapa-hub-lg{height:22px}
}
@media (prefers-reduced-motion:reduce){
  .mapa-pulso{display:none}
  .mapa-hub.-bate{transform:translate(-50%,-50%)}
}