/* animacoes.css — as animações da PÁGINA INICIAL (16/09/2026).
   Decisão dele: "coloca tudo na página inicial". Junção de produção do
   inteligente.css (v1) com o v2.css, sem a barra de comparação. As páginas
   /animacoes.html e /animacoes-v2.html usam os arquivos originais e ficam
   como referência: editar lá não muda o site, editar aqui não muda lá. */

/* inteligente.css — animações que EXPLICAM o serviço (16/09/2026).

   Pedido dele: "quero que as animações sejam mais inteligentes, com relação ao
   serviço que prestamos... animações de fundo, de mouse, de entrada, rolagem".

   Regra desta rodada: cada movimento conta uma coisa que a Houzzes faz. Nada de
   enfeite solto. Cinco, cada uma ligada por uma palavra em data-inteligente:

     busca     · FUNDO/TOPO  alguém pesquisa e o anúncio do cliente sobe ao 1º lugar  (Google Ads)
     cartoes   · MOUSE       o site se monta, o anúncio sobe, o agente responde       (os 3 serviços)
     ciclo     · ROLAGEM     o ponto percorre as 3 etapas e as barras do logo crescem  (CRM → Google)
     whats     · DIGITAÇÃO   o formulário vira a prévia da mensagem e da resposta      (agente de IA)
     portfolio · ENTRADA     cada site "abre" como página carregando                  (sites no ar)

   Cautela, a mesma do sutil.css: movimento curto, cores do tema, nada piscando
   forte. Tudo que ESCONDE ou apaga depende de html.js-intel (o inteligente.js
   escreve, e não escreve com movimento reduzido): sem script, cada peça aparece
   no estado final, parada. */

/* ==================================================== A · BUSCA (topo) ==== */
/* Só em tela larga: no celular o título ocupa a largura e a busca empurraria
   a primeira dobra para baixo. */
.busca-viva { display: none; }
@media (min-width: 1080px) {
  html[data-inteligente~="busca"] .hero__topo {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: center;
  }
  html[data-inteligente~="busca"] .busca-viva { display: block; }
}
.busca-viva { --h: 60px; font-size: .8125rem; }
.busca-viva__caixa { display: flex; align-items: center; gap: .6rem; height: 44px; padding: 0 1rem;
  border-radius: 999px; background: var(--sup); border: 1px solid var(--borda); margin-bottom: .8rem; }
.busca-viva__caixa svg { flex: none; width: 16px; height: 16px; }
.busca-viva__texto { white-space: nowrap; overflow: hidden; color: var(--texto); }
.busca-viva__cursor { flex: none; width: 1px; height: 18px; background: var(--acento); }
html.js-intel .busca-viva__cursor { animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

.busca-viva__lista { list-style: none; margin: 0; padding: 0; position: relative;
  height: calc(var(--h) * 3); transition: opacity .4s ease; }
html.js-intel .busca-viva:not(.achou) .busca-viva__lista { opacity: .45; }
.busca-viva__item { position: absolute; left: 0; right: 0; height: calc(var(--h) - 8px);
  padding: .45rem .9rem; border-radius: 10px; background: rgba(50, 40, 34, .55);
  border: 1px solid var(--borda); display: flex; flex-direction: column; justify-content: center; gap: .35rem;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), border-color .5s ease; }
.busca-viva__item:nth-child(1) { top: 0; }
.busca-viva__item:nth-child(2) { top: var(--h); }
.busca-viva__item:nth-child(3) { top: calc(var(--h) * 2); }
.busca-viva__item > i { display: block; height: 6px; border-radius: 3px; background: var(--borda); width: 72%; }
.busca-viva__item > i + i { width: 46%; }
/* o do cliente mora no 3º lugar do HTML e sobe para o 1º */
.busca-viva__seu { background: var(--sup); }
.busca-viva__linha { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.busca-viva__tag { flex: none; font-family: var(--maquina); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.busca-viva__seu b { color: var(--creme); font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-viva__seu small { font-family: var(--maquina); color: var(--apoio); line-height: 1.2; }
.busca-viva.achou .busca-viva__seu { transform: translateY(calc(var(--h) * -2)); border-color: rgba(224, 185, 111, .55); }
.busca-viva.achou .busca-viva__item:not(.busca-viva__seu) { transform: translateY(var(--h)); }
.busca-viva.reinicio .busca-viva__item { transition: none; }

/* ============================================= B · CARTÕES (mouse) ======== */
/* Cada cartão de serviço ganha uma cena de 88 px que mostra o serviço
   ACONTECENDO. Parado, a cena está no estado final (site montado, anúncio em
   1º, resposta enviada). No mouse, ela acontece de novo. No celular, acontece
   quando o cartão aparece (o JS marca .demo-on). */
.demo { display: none; }
html[data-inteligente~="cartoes"] .demo {
  display: block; position: relative; height: 88px; margin-bottom: var(--e3, 1.3rem);
  border-radius: 10px; background: var(--poco); border: 1px solid var(--borda); overflow: hidden;
}
.demo i, .demo b { font-style: normal; }

/* -- site se montando */
.demo--site > i { position: absolute; display: block; border-radius: 3px; background: var(--elevada); }
.demo--site .d-barra { left: 0; right: 0; top: 0; height: 14px; border-radius: 0; background: var(--faixa);
  border-bottom: 1px solid var(--borda); }
.demo--site .d-titulo { left: 12px; top: 26px; width: 42%; height: 11px; background: var(--creme); }
.demo--site .d-texto { left: 12px; top: 45px; width: 52%; height: 6px; }
.demo--site .d-texto2 { left: 12px; top: 56px; width: 34%; height: 6px; }
.demo--site .d-botao { left: 12px; top: 68px; width: 52px; height: 11px; background: var(--acento); border-radius: 4px; }
.demo--site .d-foto { right: 12px; top: 24px; width: 30%; height: 54px;
  background: linear-gradient(135deg, var(--elevada), var(--sup)); }

/* -- anúncio subindo para o 1º lugar */
.demo--ads > i { position: absolute; left: 12px; right: 12px; height: 18px; border-radius: 5px;
  background: var(--elevada); display: block; }
.demo--ads > i:nth-child(1) { top: 10px; }
.demo--ads > i:nth-child(2) { top: 35px; }
.demo--ads > i:nth-child(3) { top: 60px; }
.demo--ads .d-seu { background: rgba(224, 185, 111, .18); border: 1px solid rgba(224, 185, 111, .55); }
.demo--ads .d-seu::after { content: "1º"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--maquina); font-size: .66rem; font-weight: 700; color: var(--acento); }
.demo--ads .d-seu::before { content: ""; position: absolute; left: 8px; top: 6px; width: 38%; height: 5px;
  border-radius: 3px; background: var(--creme); opacity: .8; }

/* -- agente respondendo */
.demo--chat .d-msg { position: absolute; font-size: .72rem; line-height: 1.3; padding: .32rem .6rem;
  border-radius: 10px; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo--chat .d-cliente { left: 12px; top: 10px; background: var(--elevada); color: var(--texto);
  border-bottom-left-radius: 3px; }
.demo--chat .d-agente { right: 12px; bottom: 10px; color: var(--creme);
  background: rgba(224, 185, 111, .16); border: 1px solid rgba(224, 185, 111, .45); border-bottom-right-radius: 3px; }
.demo--chat .d-agente::after { content: " ✓✓"; color: var(--acento); }
.demo--chat .d-digitando { right: 12px; bottom: 12px; display: flex; gap: 3px; padding: .45rem .6rem;
  background: var(--elevada); opacity: 0; }
.demo--chat .d-digitando b { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--apoio); }

/* -- o gatilho: mouse em cima (computador) ou .demo-on (celular) */
@keyframes montar { from { opacity: 0; transform: translateY(6px); } }
@keyframes rank-sobe { from { transform: translateY(50px); } }
@keyframes rank-desce { from { transform: translateY(-25px); } }
@keyframes digitar { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes quicar { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }

@media (hover: hover) {
  html[data-inteligente~="cartoes"] .servico:hover .demo--site > i { animation: montar .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--n, 0) * 110ms); }
  html[data-inteligente~="cartoes"] .servico:hover .demo--ads .d-seu { animation: rank-sobe .8s cubic-bezier(.22, .61, .36, 1) .15s both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--ads > i:not(.d-seu) { animation: rank-desce .8s cubic-bezier(.22, .61, .36, 1) .15s both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--chat .d-cliente { animation: montar .4s ease both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--chat .d-digitando { animation: digitar 1.3s ease .35s both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--chat .d-digitando b { animation: quicar .9s ease infinite; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--chat .d-agente { animation: montar .4s ease 1.55s both; }
}
html[data-inteligente~="cartoes"] .servico.demo-on .demo--site > i { animation: montar .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--n, 0) * 110ms); }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--ads .d-seu { animation: rank-sobe .8s cubic-bezier(.22, .61, .36, 1) .15s both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--ads > i:not(.d-seu) { animation: rank-desce .8s cubic-bezier(.22, .61, .36, 1) .15s both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--chat .d-cliente { animation: montar .4s ease both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--chat .d-digitando { animation: digitar 1.3s ease .35s both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--chat .d-digitando b { animation: quicar .9s ease infinite; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--chat .d-agente { animation: montar .4s ease 1.55s both; }
.demo--chat .d-digitando b:nth-child(2) { animation-delay: .15s !important; }
.demo--chat .d-digitando b:nth-child(3) { animation-delay: .3s !important; }

/* ============================================== C · CICLO (rolagem) ====== */
/* O inteligente.js escreve --p (0 a 1) na seção conforme ela é lida. O ponto
   anda, a etapa acende quando ele chega, e as barras do logo crescem junto:
   o crescimento acompanha a leitura, em vez de pulsar sozinho. Sem --p, o
   padrão é 1: tudo aceso e crescido. */
.trilho { display: none; }
html[data-inteligente~="ciclo"] .trilho { display: block; position: relative; height: 14px; margin: 0 0 var(--e3, 1.3rem); }
.trilho__linha { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px;
  background: var(--borda); overflow: hidden; }
.trilho__cheio { display: block; height: 100%; width: calc(var(--p, 1) * 100%);
  background: linear-gradient(90deg, var(--acento-2), var(--acento)); }
.trilho__ponto { position: absolute; top: 1px; left: calc(var(--p, 1) * 100%); width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px rgba(224, 185, 111, .18); }
@media (max-width: 760px) { html[data-inteligente~="ciclo"] .trilho { display: none; } }

html.js-intel[data-inteligente~="ciclo"] #diferencial .grade > .bloco { transition: border-color .5s ease, background-color var(--lento), transform var(--lento); }
html.js-intel[data-inteligente~="ciclo"] #diferencial .passo__num { transition: color .5s ease, text-shadow .5s ease; }
html.js-intel[data-inteligente~="ciclo"] #diferencial .grade > .bloco:not(.aceso) .passo__num { color: var(--borda-campo); }
html.js-intel[data-inteligente~="ciclo"] #diferencial .grade > .bloco.aceso { border-color: rgba(224, 185, 111, .45); }
html.js-intel[data-inteligente~="ciclo"] #diferencial .grade > .bloco.aceso .passo__num { text-shadow: 0 0 18px rgba(224, 185, 111, .45); }

/* as barras do logo crescem com a leitura, uma depois da outra */
html.js-intel[data-inteligente~="ciclo"] [data-crescer] .crescer rect {
  animation: none;
  transform: scaleY(calc(.3 + clamp(0, var(--p, 1) * 1.5 - var(--k, 0) * .08, 1) * .7));
  transition: transform .35s ease-out;
}
[data-crescer] .crescer rect:nth-child(2) { --k: 1; }
[data-crescer] .crescer rect:nth-child(3) { --k: 2; }
[data-crescer] .crescer rect:nth-child(4) { --k: 3; }
[data-crescer] .crescer rect:nth-child(5) { --k: 4; }
[data-crescer] .crescer rect:nth-child(6) { --k: 5; }
[data-crescer] .crescer rect:nth-child(7) { --k: 6; }
html.js-intel[data-inteligente~="ciclo"] [data-crescer] .crescer .seta {
  animation: none; opacity: 1; stroke-dashoffset: calc(760 * (1 - var(--p, 1)));
}
html.js-intel[data-inteligente~="ciclo"] [data-crescer] .crescer .ponta {
  animation: none; opacity: clamp(0, (var(--p, 1) - .85) * 7, 1);
}

/* ======================================== D · WHATSAPP (digitação) ======= */
.zap { display: none; }
html[data-inteligente~="whats"] .zap { display: block; margin-top: var(--e4, 2.1rem); max-width: 26rem; }
.zap__legenda { font-family: var(--maquina); font-size: var(--fs-nota); letter-spacing: .08em;
  text-transform: uppercase; color: var(--apoio); margin: 0 0 .6rem; }
.zap__janela { border-radius: 14px; border: 1px solid var(--borda); overflow: hidden; background: var(--poco); }
.zap__topo { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  background: var(--sup); border-bottom: 1px solid var(--borda); }
.zap__topo img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.zap__topo b { display: block; font-size: .875rem; line-height: 1.2; }
.zap__topo small { display: block; font-size: .72rem; line-height: 1.2; color: var(--acento); }
.zap__corpo { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; min-height: 9.5rem; }
.zap__msg { margin: 0; max-width: 85%; padding: .5rem .75rem; border-radius: 12px; font-size: .875rem;
  line-height: 1.45; overflow-wrap: anywhere; }
.zap__msg--cliente { align-self: flex-end; background: var(--elevada); border-bottom-right-radius: 4px; }
.zap__msg--resposta { align-self: flex-start; color: var(--creme); background: rgba(224, 185, 111, .14);
  border: 1px solid rgba(224, 185, 111, .4); border-bottom-left-radius: 4px; }
.zap__msg--digitando { align-self: flex-start; display: flex; gap: 4px; padding: .65rem .8rem; background: var(--sup); }
.zap__msg--digitando b { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--apoio);
  animation: quicar .9s ease infinite; }
.zap__msg--digitando b:nth-child(2) { animation-delay: .15s; }
.zap__msg--digitando b:nth-child(3) { animation-delay: .3s; }
.zap__msg.oculto { display: none; }
html.js-intel .zap__msg.chegou { animation: montar .35s ease both; }

/* ============================================ E · PORTFÓLIO (entrada) ===== */
/* Três bolinhas de navegador em cima de cada site e, quando o cartão entra na
   tela, um esqueleto de página que "carrega" (barra dourada de progresso) e
   some, mostrando o site. Só com js-mov E js-intel: o cartão precisa estar
   sendo revelado pelo mov.js para a sequência fazer sentido. */
.carrega, .barra-url { display: none; }
html[data-inteligente~="portfolio"] #sites .barra-url { display: flex; gap: 4px; margin-bottom: .45rem; }
.barra-url i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--borda-campo); opacity: .6; }

html.js-intel.js-mov[data-inteligente~="portfolio"] #sites .bloco .carrega {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  border-radius: inherit;
  background:
    linear-gradient(var(--elevada), var(--elevada)) 1.7rem 2.6rem / 28% 10px no-repeat,
    linear-gradient(var(--elevada), var(--elevada)) 1.7rem 3.7rem / 62% 16px no-repeat,
    linear-gradient(var(--elevada), var(--elevada)) 1.7rem 5.2rem / 48% 8px no-repeat,
    linear-gradient(var(--elevada), var(--elevada)) 1.7rem 6.2rem / 36% 8px no-repeat,
    var(--sup);
}
html.js-intel.js-mov[data-inteligente~="portfolio"] #sites .bloco .carrega::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(234, 223, 198, .07) 50%, transparent 70%);
  background-size: 250% 100%; animation: brilho-carga 1s linear infinite;
}
html.js-intel.js-mov[data-inteligente~="portfolio"] #sites .bloco .carrega::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--acento);
}
html.js-intel.js-mov[data-inteligente~="portfolio"] #sites .bloco.visivel .carrega {
  animation: carregar 1.3s ease both; animation-delay: var(--atraso, 0ms);
}
html.js-intel.js-mov[data-inteligente~="portfolio"] #sites .bloco.visivel .carrega::after {
  animation: progresso .75s cubic-bezier(.3, .1, .3, 1) both; animation-delay: var(--atraso, 0ms);
}
@keyframes carregar { 0%, 58% { opacity: 1; } 100% { opacity: 0; } }
@keyframes progresso { from { width: 0; } to { width: 100%; } }
@keyframes brilho-carga { from { background-position: 120% 0; } to { background-position: -20% 0; } }


/* ======================== camada v2 ======================== */

/* v2.css — a camada "mais sofisticada" por cima do inteligente.css (16/09/2026).
   Carregada só em animacoes-v2.html, depois do inteligente.css, que segue
   intocado para a v1. Mapa das peças no cabeçalho do v2.js. */

/* ==================================================== voo do logo ======== */
/* O cabeçalho não desce mais de cima: ele se ACENDE em volta do logo, que
   chegou rolando. Por isso a barra fica no lugar (sem translate) e só fundo,
   borda e links aparecem. O logo do cabeçalho não tem transição nenhuma, para
   a troca com o logo da abertura ser invisível. */
html.v2-voo.js-cab .nav {
  transform: none; opacity: 1; visibility: visible; pointer-events: none;
  background-color: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .35s ease, border-color .35s ease;
}
html.v2-voo.js-cab .nav .nav__caixa > * { visibility: hidden; }
html.v2-voo.js-cab .nav .nav__links,
html.v2-voo.js-cab .nav .menu { opacity: 0; transition: opacity .35s ease .05s, visibility 0s linear .4s; }
html.v2-voo.js-cab .nav.nav--visivel,
html.v2-voo.js-cab .nav:focus-within {
  pointer-events: auto; background-color: rgba(16, 12, 10, .9); border-bottom-color: var(--borda);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html.v2-voo.js-cab .nav.nav--visivel .nav__caixa > *,
html.v2-voo.js-cab .nav:focus-within .nav__caixa > * { visibility: visible; }
html.v2-voo.js-cab .nav.nav--visivel .nav__links,
html.v2-voo.js-cab .nav.nav--visivel .menu,
html.v2-voo.js-cab .nav:focus-within .nav__links,
html.v2-voo.js-cab .nav:focus-within .menu { opacity: 1; transition: opacity .35s ease .05s, visibility 0s; }

html.v2-voo .hero__marca { transform-origin: left center; will-change: transform; }
html.v2-voo .nav.nav--visivel ~ main .hero__marca { visibility: hidden; }

/* ============================================ A · busca vira funil ======= */
.busca-viva__mouse { position: absolute; left: 86%; top: calc(var(--h) * 3); width: 18px; height: 18px;
  list-style: none; opacity: 0; z-index: 3; pointer-events: none;
  transition: left .9s cubic-bezier(.22, .61, .36, 1), top .9s cubic-bezier(.22, .61, .36, 1), opacity .3s ease; }
.busca-viva__mouse svg { display: block; width: 100%; height: 100%; fill: var(--creme); stroke: #100C0A; stroke-width: 1.2; }
.busca-viva.mira .busca-viva__mouse { left: 64%; top: calc(var(--h) * .42); opacity: 1; }
.busca-viva.lead .busca-viva__mouse { opacity: 0; }
html.js-intel .busca-viva.clicou .busca-viva__seu { animation: clique .6s ease-out 1; }
@keyframes clique {
  0%   { box-shadow: 0 0 0 0 rgba(224, 185, 111, .55); }
  100% { box-shadow: 0 0 0 12px rgba(224, 185, 111, 0); }
}
html.js-intel .busca-viva.clicou .busca-viva__seu { background: var(--elevada); }

.busca-viva__lead { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; padding: .55rem .8rem;
  border-radius: 10px; background: var(--sup); border: 1px solid rgba(224, 185, 111, .45);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1); }
.busca-viva__lead b { font-size: .8125rem; color: var(--creme); }
.busca-viva__lead small { margin-left: auto; font-family: var(--maquina); font-size: .7rem; color: var(--apoio); }
.busca-viva__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
html.js-intel .busca-viva__ponto { animation: bater 2.4s ease-out infinite; }
html.js-intel .busca-viva:not(.lead) .busca-viva__lead { opacity: 0; transform: translateY(8px); }
html.js-intel .busca-viva.reinicio .busca-viva__lead,
html.js-intel .busca-viva.reinicio .busca-viva__mouse { transition: none; }

/* ============================================ B · cartões com fundo ====== */
@media (hover: hover) {
  html.js-intel[data-inteligente~="cartoes"] .demo > i {
    translate: calc(var(--dx, 0) * var(--z, 1) * 4px) calc(var(--dy, 0) * var(--z, 1) * 3px);
    transition: translate .35s ease-out;
  }
}
.demo--site .d-barra { --z: .3; }
.demo--site .d-foto { --z: 1.4; }
.demo--site .d-titulo, .demo--site .d-botao { --z: 1; }
.demo--site .d-texto, .demo--site .d-texto2 { --z: .7; }

/* site: termina com um contato chegando */
.demo--site .d-ok { position: absolute; right: 10px; bottom: 7px; z-index: 2; display: flex; align-items: center; gap: .3rem;
  padding: .12rem .45rem; border-radius: 6px; font-family: var(--maquina); font-size: .6rem; letter-spacing: .04em;
  color: var(--creme); background: var(--poco); border: 1px solid rgba(224, 185, 111, .55); --z: 1.8; }
.demo--site .d-ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); }

/* anúncio: termina com um clique no 1º lugar */
.demo--ads .d-clique { position: absolute; left: auto; right: 34px; top: 16px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--creme); opacity: 0; --z: 1.6; }
.demo--ads .d-seu { --z: 1.2; }

/* agente: a resposta sobe e aparecem horários para escolher */
.demo--chat .d-agente { bottom: 32px; --z: 1.2; }
.demo--chat .d-digitando { bottom: 34px; }
.demo--chat .d-cliente { --z: .8; }
.demo--chat .d-chip { position: absolute; bottom: 7px; font-size: .62rem; padding: .12rem .5rem; border-radius: 999px;
  color: var(--acento); border: 1px solid rgba(224, 185, 111, .5); background: var(--poco); --z: 1.6; }
.demo--chat .d-chip1 { right: 76px; }
.demo--chat .d-chip2 { right: 12px; }

@keyframes piscar-clique {
  0%, 100% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(234, 223, 198, .6); }
  30% { opacity: 1; transform: scale(1); }
  70% { opacity: .9; box-shadow: 0 0 0 9px rgba(234, 223, 198, 0); }
}
@media (hover: hover) {
  html[data-inteligente~="cartoes"] .servico:hover .demo--site .d-ok { animation: montar .45s ease .95s both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--ads > i.d-clique { animation: piscar-clique 1s ease 1.05s both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--chat .d-chip1 { animation: montar .35s ease 2.05s both; }
  html[data-inteligente~="cartoes"] .servico:hover .demo--chat .d-chip2 { animation: montar .35s ease 2.2s both; }
}
html[data-inteligente~="cartoes"] .servico.demo-on .demo--site .d-ok { animation: montar .45s ease .95s both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--ads > i.d-clique { animation: piscar-clique 1s ease 1.05s both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--chat .d-chip1 { animation: montar .35s ease 2.05s both; }
html[data-inteligente~="cartoes"] .servico.demo-on .demo--chat .d-chip2 { animation: montar .35s ease 2.2s both; }

/* ============================================= C · o arco de volta ======= */
html[data-inteligente~="ciclo"] .trilho { height: 56px; }
.trilho__linha { top: 48px; }
.trilho__ponto { top: 43px; }
.trilho__ponto::before { content: ""; position: absolute; right: 8px; top: 50%; width: 70px; height: 2px;
  transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(224, 185, 111, .75)); }
.trilho__volta { position: absolute; left: 0; top: 4px; width: 100%; height: 40px; overflow: visible; }
.trilho__volta path { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 4 6;
  opacity: .75; }
/* A linha tracejada fica POR BAIXO e um traço contínuo da cor da faixa a
   esconde. dasharray 100 com pathLength 100: deslocamento 0 = traço cobrindo
   tudo (volta escondida); 100 = só o vão (volta inteira). Conforme --p passa de
   .78 o vão entra pelo começo do caminho, que é a ponta direita: a volta se
   desenha da etapa 3 para a etapa 1. */
.trilho__volta .trilho__risco { stroke-dasharray: 100 100; stroke-dashoffset: calc(clamp(0, (var(--p, 1) - .78) * 4.5, 1) * 100);
  stroke: var(--faixa); opacity: 1; stroke-width: 5; }
.trilho__rotulo { position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  font-family: var(--maquina); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--acento); background: var(--faixa); padding: 0 .6rem;
  opacity: clamp(0, (var(--p, 1) - .9) * 12, 1); }

/* ========================================== D · o contato vira CRM ======= */
.crm { margin-top: var(--e3, 1.3rem); }
.crm__quadro { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  height: 92px; }
.crm__coluna { border-radius: 10px; background: var(--poco); border: 1px solid var(--borda); padding: .4rem .5rem; }
.crm__coluna span { display: block; font-family: var(--maquina); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--apoio); }
.crm__cartao { position: absolute; top: 28px; width: calc((100% - 12px) / 3 - 12px);
  left: calc(var(--col, 0) * ((100% - 12px) / 3 + 6px) + 6px);
  padding: .35rem .5rem; border-radius: 7px; background: var(--elevada); border: 1px solid rgba(224, 185, 111, .5);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8); transition: left .8s cubic-bezier(.22, .61, .36, 1); }
.crm__cartao b { display: block; font-size: .75rem; line-height: 1.25; color: var(--creme);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm__cartao small { display: block; font-family: var(--maquina); font-size: .6rem; line-height: 1.3; color: var(--apoio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.js-intel .crm__cartao.chegou { animation: montar .4s ease both; }
.crm { display: none; }
html[data-inteligente~="whats"] .crm { display: block; }

/* ========================================== E · foto real do site ======== */
.tela { display: none; }
html[data-inteligente~="portfolio"] #sites .tela {
  display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 11; margin: -.2rem 0 .9rem;
  border-radius: 8px; border: 1px solid var(--borda); background: var(--poco);
}
html[data-inteligente~="portfolio"] #sites .tela .barra-url {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 16px; margin: 0; align-items: center;
  padding: 0 7px; background: rgba(12, 9, 8, .9); border-bottom: 1px solid var(--borda);
}
.tela img { position: absolute; left: 0; top: 16px; width: 100%; height: calc(100% - 16px); display: block;
  object-fit: cover; object-position: top center; transition: transform 1.4s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) {
  html.js-intel #sites a.bloco:hover .tela img { transform: scale(1.07); }
}
/* o esqueleto de carregamento cobre só a tela, não o cartão inteiro */
html.js-intel.js-mov[data-inteligente~="portfolio"] #sites .tela .carrega {
  background:
    linear-gradient(var(--elevada), var(--elevada)) 12px 30px / 34% 8px no-repeat,
    linear-gradient(var(--elevada), var(--elevada)) 12px 46px / 62% 14px no-repeat,
    linear-gradient(var(--elevada), var(--elevada)) 12px 68px / 50% 7px no-repeat,
    linear-gradient(var(--elevada), var(--elevada)) 12px 82px / 40% 7px no-repeat,
    var(--sup);
}

/* ============================================== F · luz nas buscas ======= */
@property --lx { syntax: "<length-percentage>"; inherits: true; initial-value: -999px; }
@property --ly { syntax: "<length-percentage>"; inherits: true; initial-value: -999px; }
/* Ele, 17/09: "não gosto das pesquisas escritas como está [no topo], mas gostei
   da ideia do mouse carregar algo que mostra algo atrás... usar em outro lugar,
   talvez quando falarmos de anúncios". As buscas saíram da abertura e viraram a
   faixa #aparecer: fundo cheio de pesquisas de verdade, quase invisíveis, e só
   aparece o que a luz alcança.
   O texto da faixa vive numa camada por cima, com véu: mesmo com uma busca acesa
   atrás, ele continua legível. Sem JavaScript a luz não existe e nada se perde,
   porque as buscas são decoração (aria-hidden). */
.farol { --farol-fundo: #0B0807; position: relative; overflow: hidden; isolation: isolate;
  background: var(--farol-fundo); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.buscas-fundo { display: none; }
.farol .buscas-fundo { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.buscas-fundo__camada { position: absolute; inset: 0; }
.buscas-fundo span { position: absolute; white-space: nowrap; font-family: var(--maquina);
  font-size: .88rem; letter-spacing: .02em; color: rgba(234, 223, 198, .05); }
.buscas-fundo span::before { content: "\2315  "; }
/* a camada de cima existe só onde a luz passa */
.buscas-fundo__camada--luz span { color: rgba(234, 223, 198, .62); }
/* o facho: um halo ambar de lanterna, atras das buscas (o ::before pinta antes
   dos filhos). E o unico lugar da pagina onde a cor do acento vira luz. */
.buscas-fundo::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(260px circle at var(--lx, -999px) var(--ly, -999px), rgba(224, 185, 111, .09) 0%, rgba(224, 185, 111, .03) 45%, transparent 72%); }
.buscas-fundo__camada--luz {
  -webkit-mask-image: radial-gradient(240px circle at var(--lx, -999px) var(--ly, -999px), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: radial-gradient(240px circle at var(--lx, -999px) var(--ly, -999px), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
html.js-intel .buscas-fundo span { animation: flutuar 16s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes flutuar { to { transform: translate(8px, -6px); } }
.farol__meio { position: relative; }
/* Cortina: apaga as buscas na coluna do texto e as deixa vivas do lado de fora.
   Vive no ::after do proprio .buscas-fundo porque ele e um contexto de
   empilhamento proprio (z-index -1) e o ::after e a ULTIMA coisa pintada la
   dentro; um ::before no .farol ficaria ATRAS das camadas de busca. */
.buscas-fundo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--farol-fundo) 0%, rgba(11, 8, 7, .95) 30%, rgba(11, 8, 7, .6) 48%, rgba(11, 8, 7, 0) 66%); }
.farol .secao__topo { max-width: 42rem; margin-bottom: 0; }
.farol .botoes { margin-top: 2rem; }
.farol__dica { display: none; margin: 1.8rem 0 0; font-family: var(--maquina); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--borda-campo); }
.farol__dica::before { content: "\2315  "; }
@media (hover: hover) { html.js-intel .farol__dica { display: block; } }
@media (max-width: 760px) {
  .buscas-fundo span { font-size: .7rem; }
  .buscas-fundo span:nth-child(2n) { display: none; }
  /* no celular o texto ocupa a largura toda: a cortina passa a descer */
  .buscas-fundo::after { background: linear-gradient(to bottom, var(--farol-fundo) 0%, rgba(11, 8, 7, .93) 40%, rgba(11, 8, 7, .45) 68%, rgba(11, 8, 7, 0) 92%); }
}

/* ================================================ G · métricas vivas ===== */
.glifo { display: none; }
html[data-inteligente~="metricas"] .glifo { display: block; position: absolute; top: 1.3rem; right: 1.4rem; height: 18px; width: auto; overflow: visible; }
.glifo--dias rect { fill: var(--acento); }
.glifo--relogio circle, .glifo--anel .fundo-anel { fill: none; stroke: var(--borda-campo); stroke-width: 2; }
.glifo--relogio path { stroke: var(--acento); stroke-width: 2; stroke-linecap: round; fill: none; }
.glifo--relogio .ponteiro { transform-box: view-box; transform-origin: 12px 12px; }
.glifo--anel .anel { fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 12px 12px; transform-box: view-box; }

html.js-intel[data-inteligente~="metricas"] .medida .glifo--dias rect { fill: var(--borda); }
html.js-intel[data-inteligente~="metricas"] .medida.visivel .glifo--dias rect {
  animation: dia .3s ease both; animation-delay: calc(.5s + var(--i, 0) * .2s);
}
@keyframes dia { from { fill: var(--borda); } to { fill: var(--acento); } }
html.js-intel[data-inteligente~="metricas"] .medida.visivel .glifo--relogio .ponteiro { animation: volta 1.8s cubic-bezier(.45, 0, .2, 1) .5s both; }
@keyframes volta { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html.js-intel[data-inteligente~="metricas"] .medida .glifo--anel .anel { stroke-dashoffset: 100; }
html.js-intel[data-inteligente~="metricas"] .medida.visivel .glifo--anel .anel { animation: fechar 1.5s cubic-bezier(.3, .1, .3, 1) .6s both; }
@keyframes fechar { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.v2-voo .hero__marca { transform: none !important; }
  .busca-viva__mouse { display: none; }
}

/* retirada garantida do "carregando" (o animacoes.js marca .carregou 1,6 s
   depois de o cartão aparecer): a foto nunca fica coberta */
#sites .bloco.carregou .carrega { display: none !important; }