/* =============================================================================
   WM SYSTEM — Sistema visual global do site Acelera 3X
   -----------------------------------------------------------------------------
   Carregue este arquivo no <head> de TODAS as páginas, DEPOIS das fontes:
     <link rel="stylesheet" href="/assets/css/wm-system.css">

   Como funciona
   -------------
   Cada página tem seu próprio bloco :root com tokens do tema escuro.
   Este arquivo NÃO substitui esses tokens no escuro: ele apenas os remapeia
   quando o atributo data-theme="light" está no <html>.

   Especificidade: :root[data-theme="light"] = (0,2,0) vence :root = (0,1,0),
   independente da ordem de carregamento. Por isso o CSS embutido de cada
   página continua funcionando sem nenhuma reescrita.
   ========================================================================== */


/* =============================================================================
   1. TOKENS SEMÂNTICOS — TEMA ESCURO (padrão, referência)
   -----------------------------------------------------------------------------
   Declarados para que páginas futuras herdem o sistema sem copiar valores.
   Usa @property-free fallback: se a página já define, o valor dela prevalece
   (mesma especificidade, mas o <style> embutido vem depois no documento).
   ========================================================================== */
:root {
  /* Superfícies */
  --wm-bg:            #060912;
  --wm-surface:       #0A101E;
  --wm-card:          #111A2D;
  --wm-elevated:      #18233A;

  /* Texto */
  --wm-text:          #EAF0FB;
  --wm-text-dim:      #9BA8C4;
  --wm-text-mute:     #7C8BA6;

  /* Traços */
  --wm-border:        rgba(255, 255, 255, 0.07);
  --wm-border-strong: rgba(255, 255, 255, 0.13);

  /* Marca */
  --wm-brand:         #33F0A4;  /* verde da marca, medido nas logos (H154) */
  --wm-brand-solid:   #33F0A4;  /* verde, uso como fundo de botão */
  --wm-on-brand:      #04130C;  /* texto sobre o fundo verde */
  --wm-accent:        #1FD9C6;  /* verde-azulado, dados e medição */
  --wm-accent-solid:  #1FD9C6;
  --wm-on-accent:     #041A17;

  /* Estados */
  --wm-success:       #33F0A4;
  --wm-danger:        #FF6B7A;
  --wm-warning:       #FFB347;
  --wm-focus:         #1FD9C6;

  /* Campos */
  --wm-input-bg:      rgba(255, 255, 255, 0.03);
  --wm-input-border:  rgba(255, 255, 255, 0.13);

  /* Sombras */
  --wm-shadow-sm:     0 2px 10px -4px rgba(0, 0, 0, 0.6);
  --wm-shadow-md:     0 12px 32px -14px rgba(0, 0, 0, 0.7);
  --wm-shadow-lg:     0 26px 60px -22px rgba(0, 0, 0, 0.8);

  /* Brilhos da marca */
  --wm-glow-brand:    rgba(51, 240, 164, 0.45);
  --wm-glow-accent:   rgba(31, 217, 198, 0.40);

  /* Cor do overlay de véu (modais, popups) */
  --wm-scrim:         rgba(4, 7, 14, 0.78);

  /* Transição padrão do sistema */
  --wm-t:             200ms cubic-bezier(.4, 0, .2, 1);

  /* Marca 3X usada no bloco de logo e no avatar do chat.
     O caminho é relativo a ESTE arquivo, então resolve igual em qualquer
     página, esteja ela na raiz ou dentro de uma pasta de serviço. */
  --wm-foto: url("../img/avatar-acelera3x.webp");
}


/* =============================================================================
   2. TEMA CLARO
   -----------------------------------------------------------------------------
   Não é uma inversão do escuro. É um "papel técnico frio": brancos levemente
   azulados, tinta navy profunda, e os mesmos verde/ciano da marca escurecidos
   apenas o suficiente para passar em contraste AA sobre fundo claro.

   Contrastes verificados sobre #FFFFFF / #F6F9FD:
     --text      #0B1424  ->  16.4:1   AAA
     --text-dim  #45546C  ->   7.6:1   AAA
     --mute      #5A6A80  ->   5.2:1   AA
     --wire      #067A48  ->   5.4:1   AA
     --volt      #00806E  ->   4.9:1   AA
   ========================================================================== */
:root[data-theme="light"] {
  /* ---- Tokens do sistema ---- */
  --wm-bg:            #F6F9FD;
  --wm-surface:       #FFFFFF;
  --wm-card:          #FFFFFF;
  --wm-elevated:      #EDF2F9;

  --wm-text:          #0B1424;
  --wm-text-dim:      #45546C;
  --wm-text-mute:     #5A6A80;

  --wm-border:        rgba(11, 20, 36, 0.10);
  --wm-border-strong: rgba(11, 20, 36, 0.17);

  --wm-brand:         #067A48;
  --wm-brand-solid:   #078551;
  --wm-on-brand:      #FFFFFF;
  --wm-accent:        #00806E;
  --wm-accent-solid:  #00806E;
  --wm-on-accent:     #FFFFFF;

  --wm-success:       #067A48;
  --wm-danger:        #C0273B;
  --wm-warning:       #9A5B00;
  --wm-focus:         #00806E;

  --wm-input-bg:      #FFFFFF;
  --wm-input-border:  rgba(11, 20, 36, 0.22);

  --wm-shadow-sm:     0 1px 3px rgba(11, 20, 36, 0.07);
  --wm-shadow-md:     0 10px 28px -14px rgba(11, 20, 36, 0.22);
  --wm-shadow-lg:     0 24px 56px -24px rgba(11, 20, 36, 0.28);

  --wm-glow-brand:    rgba(6, 122, 72, 0.28);
  --wm-glow-accent:   rgba(0, 128, 110, 0.26);

  --wm-scrim:         rgba(11, 20, 36, 0.55);

  /* ---- Remapeamento dos tokens legados das páginas ----
     Os nomes abaixo já são usados por todo o CSS embutido de cada página.
     Ao redefini-los aqui, o site inteiro muda de tema sem reescrever regras. */
  --ink-0:   #F6F9FD;
  --ink-1:   #FFFFFF;
  --ink-2:   #FFFFFF;
  --ink-3:   #EDF2F9;

  --line:    rgba(11, 20, 36, 0.10);
  --line-2:  rgba(11, 20, 36, 0.17);

  --text:     #0B1424;
  --text-dim: #45546C;
  --mute:     #5A6A80;

  --wire:      #067A48;
  --wire-deep: #04603A;
  --volt:      #00806E;
  --volt-deep: #006356;
  --whats:     #128C4A;

  --glow-g: rgba(6, 122, 72, 0.28);
  --glow-c: rgba(0, 128, 110, 0.26);

  /* Acentos específicos das landing pages, escurecidos para contraste AA */
  --social-1: #7C3AED;  /* era #C084FC */
  --social-2: #BE185D;  /* era #F472B6 */
  --ia-1:     #9A5B00;  /* era #FFB347 */

  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark; }


/* =============================================================================
   3. CORREÇÕES DE COMPONENTE NO TEMA CLARO
   -----------------------------------------------------------------------------
   Casos em que o simples remapeamento de token quebraria contraste ou
   legibilidade, porque a regra original tinha cor fixa (hardcoded).
   ========================================================================== */

/* ---- 3.1 Fundo da página: o véu radial escuro fica pesado no claro ---- */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(700px 500px at 78% 8%,  rgba(12, 110, 150, 0.07), transparent 62%),
    radial-gradient(620px 520px at 12% 88%, rgba(6, 121, 90, 0.06),  transparent 62%) !important;
}

/* ---- 3.2 Barra de navegação ----
   As páginas fixam o fundo da nav em rgba(6,9,18,...) direto na regra, sem
   token. Como esses valores não passam por var(), o remapeamento de tokens
   não os alcança: aqui o !important é a forma correta de o tema global
   vencer uma cor escrita à mão na página. */
:root[data-theme="light"] .nav,
:root[data-theme="light"] .navbar,
:root[data-theme="light"] header.nav {
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom-color: var(--wm-border) !important;
  box-shadow: 0 1px 0 rgba(11, 20, 36, 0.06);
}
:root[data-theme="light"] .nav.scrolled,
:root[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 24px -18px rgba(11, 20, 36, 0.4);
}

/* Menu mobile aberto precisa ser opaco para não vazar o conteúdo atrás */
:root[data-theme="light"] .mobile,
:root[data-theme="light"] .nav-mobile,
:root[data-theme="light"] .menu-mobile,
:root[data-theme="light"] .nav-drawer,
:root[data-theme="light"] .mobile-menu {
  background: #FFFFFF !important;
  border-color: var(--wm-border-strong) !important;
}

/* ---- 3.3 Botão sólido: no claro o texto precisa ser branco ---- */
:root[data-theme="light"] .btn-solid,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-wire,
:root[data-theme="light"] .cta-solid {
  background: var(--wm-brand-solid) !important;
  color: var(--wm-on-brand) !important;
}
:root[data-theme="light"] .btn-solid:hover,
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .btn-wire:hover,
:root[data-theme="light"] .cta-solid:hover {
  background: #06694C !important;
  color: #FFFFFF !important;
}

/* Selo dos planos: gradiente verde/ciano com texto quase preto no escuro.
   No claro o texto precisa ser branco para manter contraste. */
:root[data-theme="light"] .ribbon { color: #FFFFFF !important; }

/* Véu de modais e pop-ups */
:root[data-theme="light"] .exit-overlay {
  background: var(--wm-scrim) !important;
}

/* -----------------------------------------------------------------------------
   Marca: o símbolo 3X no lugar da letra
   -----------------------------------------------------------------------------
   O quadrado de cantos arredondados recebe o símbolo 3X da marca. O gradiente
   fica só como moldura fina, para a marca continuar reconhecível nos dois
   temas. A letra dentro do bloco fica escondida, mas segue no HTML para
   leitores de tela.
   -------------------------------------------------------------------------- */
.logo-mark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wire-deep, #07C07E), var(--wire, #33F0A4));
  padding: 1.5px;
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background-image: var(--wm-foto, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.logo-mark > span,
.logo-mark > b {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 3.4 Cards: no claro precisam de borda e sombra, não de gradiente escuro ---- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .mod,
:root[data-theme="light"] .flow-item,
:root[data-theme="light"] .plano,
:root[data-theme="light"] .plan-card,
:root[data-theme="light"] .price-card,
:root[data-theme="light"] .dor-item,
:root[data-theme="light"] .benef,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .depo {
  background: var(--wm-card);
  border-color: var(--wm-border-strong);
  box-shadow: var(--wm-shadow-sm);
}

/* ---- 3.4b Avatares de depoimento ----
   As iniciais são quase pretas (#04130C) porque no escuro ficam sobre o verde
   neon. No claro esse mesmo gradiente escurece e o texto some: aqui ele vira
   branco. Alguns avatares já trazem color:#fff no atributo style e seguem iguais. */
:root[data-theme="light"] .quote-av,
:root[data-theme="light"] .depo-av,
:root[data-theme="light"] .testi-av,
:root[data-theme="light"] .qav {
  color: #FFFFFF;
}

/* ---- 3.5 Seleção de texto ---- */
:root[data-theme="light"] ::selection {
  background: var(--wm-brand-solid);
  color: #FFFFFF;
}

/* ---- 3.6 Campos de formulário ---- */
/* background-color, nunca o atalho `background`: o atalho zera
   background-repeat/position/size e faz o ícone da seta do <select>
   se repetir lado a lado dentro do campo. */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background-color: var(--wm-input-bg);
  border-color: var(--wm-input-border);
  color: var(--wm-text);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: var(--wm-text-mute);
}
:root[data-theme="light"] select option {
  background: #FFFFFF;
  color: var(--wm-text);
}

/* ---- 3.7 Imagens: os retratos da equipe já vêm tratados para fundo escuro ---- */
:root[data-theme="light"] .autoridade-foto img,
:root[data-theme="light"] .auth-photo img {
  filter: none;
}


/* =============================================================================
   4. BOTÃO DE TEMA
   -----------------------------------------------------------------------------
   Alvo de toque de 44x44px. Um ícone por vez: sol no escuro (ação = clarear),
   lua no claro (ação = escurecer).
   ========================================================================== */
.wm-theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-2, var(--wm-border-strong));
  color: var(--text-dim, var(--wm-text-dim));
  cursor: pointer;
  transition: color var(--wm-t), border-color var(--wm-t), background var(--wm-t);
  -webkit-tap-highlight-color: transparent;
}
.wm-theme-toggle:hover {
  color: var(--wire, var(--wm-brand));
  border-color: var(--wire, var(--wm-brand));
  background: color-mix(in srgb, var(--wire, #33F0A4) 8%, transparent);
}
.wm-theme-toggle:focus-visible {
  outline: 2px solid var(--wm-focus);
  outline-offset: 3px;
}
.wm-theme-toggle svg {
  width: 19px;
  height: 19px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--wm-t), transform var(--wm-t);
}
/* Sol visível apenas no escuro, lua apenas no claro */
.wm-theme-toggle .wm-icon-sun  { display: block; }
.wm-theme-toggle .wm-icon-moon { display: none; }
:root[data-theme="light"] .wm-theme-toggle .wm-icon-sun  { display: none; }
:root[data-theme="light"] .wm-theme-toggle .wm-icon-moon { display: block; }


/* =============================================================================
   5. AVISO DE COOKIES
   -----------------------------------------------------------------------------
   Barra inferior compacta. Não bloqueia, não cobre o hero, não usa véu.
   No celular fica acima da área segura e não conflita com o botão flutuante
   do WhatsApp (que recebe um deslocamento enquanto a barra está visível).
   ========================================================================== */
.wm-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9200;
  display: none;
  padding: 0.75rem clamp(0.9rem, 4vw, 1.5rem);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--wm-card);
  border-top: 1px solid var(--wm-border-strong);
  box-shadow: 0 -8px 30px -18px rgba(0, 0, 0, 0.65);
  font-family: inherit;
  animation: wm-consent-in 260ms cubic-bezier(.16, 1, .3, 1) both;
}
.wm-consent[data-open="true"] { display: block; }

@keyframes wm-consent-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.wm-consent-in {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem 1.25rem;
  flex-wrap: wrap;
}

.wm-consent-txt {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--wm-text-dim);
}
.wm-consent-txt a {
  color: var(--wm-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wm-consent-txt a:focus-visible {
  outline: 2px solid var(--wm-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.wm-consent-acts {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wm-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 104px;
  padding: 0 1.1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--wm-t), border-color var(--wm-t), color var(--wm-t), transform var(--wm-t);
  -webkit-tap-highlight-color: transparent;
}
.wm-consent-btn:focus-visible {
  outline: 2px solid var(--wm-focus);
  outline-offset: 3px;
}
.wm-consent-accept {
  background: var(--wm-brand-solid);
  color: var(--wm-on-brand);
}
.wm-consent-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px var(--wm-glow-brand);
}
.wm-consent-reject {
  background: transparent;
  color: var(--wm-text-dim);
  border-color: var(--wm-border-strong);
}
.wm-consent-reject:hover {
  color: var(--wm-text);
  border-color: var(--wm-text-mute);
}

/* Celular: barra mais enxuta, botões lado a lado ocupando a largura */
@media (max-width: 640px) {
  .wm-consent { padding-top: 0.65rem; }
  .wm-consent-in { gap: 0.65rem; }
  .wm-consent-txt { flex-basis: 100%; font-size: 0.79rem; line-height: 1.45; }
  .wm-consent-acts { width: 100%; }
  .wm-consent-btn { flex: 1; min-width: 0; }
}

/* O botão flutuante do WhatsApp sobe enquanto o aviso estiver aberto */
body.wm-consent-open .wa,
body.wm-consent-open .whats-float,
body.wm-consent-open .whatsapp-float {
  transform: translateY(-76px);
  transition: transform var(--wm-t);
}
@media (max-width: 640px) {
  body.wm-consent-open .wa,
  body.wm-consent-open .whats-float,
  body.wm-consent-open .whatsapp-float {
    transform: translateY(-104px);
  }
}


/* =============================================================================
   5.B CAMPOS DE FORMULÁRIO ACRESCENTADOS
   -----------------------------------------------------------------------------
   As páginas estilizam apenas `.lead-field input`. Os <select> novos e as
   mensagens de erro precisam acompanhar exatamente essa aparência, nos dois
   temas, sem tocar no CSS embutido de cada página.
   ========================================================================== */
.lead-field select {
  width: 100%;
  height: 50px;
  padding: 0 2.4rem 0 1rem;
  font-family: var(--font-body, inherit);
  font-size: 0.97rem;
  color: var(--text);
  background-color: rgba(6, 9, 18, 0.55);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA8C4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  transition: border-color var(--wm-t), box-shadow var(--wm-t), background-color var(--wm-t);
}
.lead-field select:focus {
  outline: none;
  border-color: var(--wire);
  background-color: rgba(6, 9, 18, 0.8);
  box-shadow: 0 0 0 3px rgba(25, 242, 160, 0.14);
}
.lead-field.invalid select {
  border-color: var(--wm-danger);
  box-shadow: 0 0 0 3px rgba(255, 107, 122, 0.14);
}

:root[data-theme="light"] .lead-field select,
:root[data-theme="light"] .lead-field input {
  background-color: #FFFFFF !important;
  color: var(--wm-text) !important;
  border-color: var(--wm-input-border) !important;
}
:root[data-theme="light"] .lead-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345546C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
:root[data-theme="light"] .lead-field select:focus,
:root[data-theme="light"] .lead-field input:focus {
  border-color: var(--wm-brand) !important;
  box-shadow: 0 0 0 3px rgba(6, 121, 90, 0.16) !important;
}
:root[data-theme="light"] .lead-field.invalid select,
:root[data-theme="light"] .lead-field.invalid input {
  border-color: var(--wm-danger) !important;
  box-shadow: 0 0 0 3px rgba(192, 39, 59, 0.14) !important;
}

/* Mensagem de erro: ocupa espaço só quando existe texto */
.lead-err {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--wm-danger);
}
.lead-err:not(:empty) { margin-top: 0.4rem; }

/* Marcadores de obrigatório e opcional no rótulo */
.lead-field label .req { color: var(--wire); margin-left: 1px; }
.lead-field label .opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--mute);
  font-weight: 400;
}


/* =============================================================================
   5.C PRÉVIA DE CONVERSA NO WHATSApp
   -----------------------------------------------------------------------------
   Cartão que sobe a partir do botão flutuante. Mostra o convite da agência e,
   logo abaixo, a mensagem que o visitante vai enviar. É uma prévia do que ele
   mesmo manda ao clicar, não um histórico de conversa encenado.
   ========================================================================== */
.wm-chat {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 95;
  width: min(310px, calc(100vw - 44px));
  border-radius: 18px;
  background: var(--wm-card);
  border: 1px solid var(--wm-border-strong);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition: opacity 220ms cubic-bezier(.16,1,.3,1),
              transform 220ms cubic-bezier(.16,1,.3,1),
              visibility 220ms;
}
.wm-chat[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wm-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 0.95rem;
  background: #075E54;                 /* verde escuro do WhatsApp */
  color: #FFFFFF;
}
.wm-chat-av {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background-image: var(--wm-foto, none);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
  /* A letra continua no HTML para leitor de tela, mas não aparece */
  font-size: 0;
  color: transparent;
}
.wm-chat-av::after {                    /* bolinha de disponível */
  content: '';
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #178540;
  border: 2px solid #075E54;
}
.wm-chat-id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wm-chat-id b { font-size: 0.88rem; font-weight: 600; }
.wm-chat-id small {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; opacity: 0.85;
}
/* Bolinha de "online agora": pulsa devagar, o suficiente para o olho notar
   que tem alguém do outro lado, sem virar pisca-pisca. */
.wm-chat-id small i {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80; font-style: normal; flex-shrink: 0;
}
.wm-chat-id small i::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #4ADE80;
  animation: wm-pulso 2.2s ease-out infinite;
}
@keyframes wm-pulso {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Três pontinhos de "digitando", no ritmo do WhatsApp */
.wm-chat-digitando {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.7rem 0.85rem;
  border-radius: 2px 12px 12px 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}
:root[data-theme="dark"] .wm-chat-digitando { background: #202C33; }
.wm-chat-digitando[hidden] { display: none; }
.wm-chat-digitando i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8696A0;
  animation: wm-digita 1.2s ease-in-out infinite;
}
.wm-chat-digitando i:nth-child(2) { animation-delay: 0.18s; }
.wm-chat-digitando i:nth-child(3) { animation-delay: 0.36s; }
@keyframes wm-digita {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.wm-chat-msg[hidden] { display: none; }

/* O botão ocupa 44x44 para ser um alvo de toque acessível, mas o círculo
   visível continua com 30px, desenhado no ::before. Aumentar o botão inteiro
   engordaria o cabeçalho do cartão sem necessidade. */
.wm-chat-close {
  position: relative;
  margin-left: auto;
  margin-right: -7px;
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: none;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.wm-chat-close::before {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background var(--wm-t);
}
.wm-chat-close:hover::before { background: rgba(255, 255, 255, 0.26); }
.wm-chat-close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -6px; border-radius: 50%; }
.wm-chat-close svg { position: relative; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* Corpo com a textura clara típica do app */
.wm-chat-body {
  padding: 1rem 0.95rem 0.85rem;
  background: #ECE5DD;
}
:root[data-theme="dark"] .wm-chat-body { background: #0B141A; }

/* -----------------------------------------------------------------------------
   BOLHAS DA CONVERSA
   -----------------------------------------------------------------------------
   Duas vozes, dois lados, duas cores, como no aplicativo:

     agência   -> branca (escuro: #202C33), encostada à esquerda, rabicho à esquerda
     visitante -> verde  (escuro: #005C4B), encostada à direita, rabicho à direita

   O rabicho é um triângulo em ::after, na altura do topo da bolha, do mesmo
   tom do fundo dela. Sem isso as duas mensagens pareciam da mesma pessoa.
   -------------------------------------------------------------------------- */
.wm-chat-msg {
  position: relative;
  /* 76% e não 84%: com 84% as duas falas batiam no teto e saíam com a MESMA
     largura, uma embaixo da outra. Cor e rabicho diferentes não salvavam —
     dois blocos gêmeos leem como um monólogo. Em 76% sobram ~67px de folga em
     lados opostos, e o degrau entre quem fala e quem responde fica óbvio. */
  max-width: 76%;
  width: fit-content;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0 12px 12px 12px;
  background: #FFFFFF;
  color: #111B21;
  font-size: 0.86rem;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}
:root[data-theme="dark"] .wm-chat-msg { background: #202C33; color: #E9EDEF; }

/* Rabicho da agência: aponta para a esquerda */
.wm-chat-msg::after {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 8px 9px 0;
  border-color: transparent #FFFFFF transparent transparent;
}
:root[data-theme="dark"] .wm-chat-msg::after { border-right-color: #202C33; }

/* A do visitante inverte tudo: lado, cor e direção do rabicho.
   Especificidade (0,2,0) para vencer a regra base, que vem antes no arquivo. */
.wm-chat-msg.wm-chat-msg-visitante {
  margin-left: auto;
  margin-top: 1.15rem;               /* respiro entre uma fala e outra */
  border-radius: 12px 0 12px 12px;
  background: #D9FDD3;
  color: #111B21;
}
:root[data-theme="dark"] .wm-chat-msg.wm-chat-msg-visitante {
  background: #005C4B;
  color: #E9EDEF;
}
.wm-chat-msg.wm-chat-msg-visitante::after {
  left: auto;
  right: -7px;
  border-width: 0 0 9px 8px;
  border-color: transparent transparent transparent #D9FDD3;
}
:root[data-theme="dark"] .wm-chat-msg.wm-chat-msg-visitante::after {
  border-left-color: #005C4B;
}

/* O "digitando" também ganha o rabicho da agência, para nascer do mesmo lado */
.wm-chat-digitando { position: relative; border-radius: 0 12px 12px 12px; }
.wm-chat-digitando::after {
  content: '';
  position: absolute;
  top: 0; left: -7px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 8px 9px 0;
  border-color: transparent #FFFFFF transparent transparent;
}
:root[data-theme="dark"] .wm-chat-digitando::after { border-right-color: #202C33; }

/* Rodapé com o botão de ação, no padrão que já validamos em outros projetos */
.wm-chat-foot {
  padding: 0.75rem;
  background: var(--wm-card);
  border-top: 1px solid var(--wm-border);
}
.wm-chat-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: 12px;
  background: #178540;
  color: #FFFFFF;
  text-decoration: none;
  transition: background var(--wm-t), transform var(--wm-t), box-shadow var(--wm-t);
}
.wm-chat-send:hover {
  background: #1FBE5A;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(23, 133, 64, 0.8);
}
.wm-chat-send:focus-visible { outline: 2px solid var(--wm-focus); outline-offset: 2px; }
.wm-chat-send svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.wm-chat-send b { font-size: 0.9rem; font-weight: 600; }

/* Sinal de mensagem não lida sobre o botão flutuante */
.wm-chat-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FF3B30;
  color: #FFFFFF;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 640px) {
  .wm-chat { right: 16px; bottom: 84px; }
}

/* A prévia sobe junto com o botão quando o aviso de cookies está aberto */
body.wm-consent-open .wm-chat { transform: translateY(-76px); }
body.wm-consent-open .wm-chat[data-open="true"] { transform: translateY(-76px); }
@media (max-width: 640px) {
  body.wm-consent-open .wm-chat,
  body.wm-consent-open .wm-chat[data-open="true"] { transform: translateY(-104px); }
}

/* O convite discreto do desktop (.wm-chat-callout) foi removido: agora o
   cartão já abre por conta própria, então não havia mais o que convidar. */

/* -----------------------------------------------------------------------------
   POSIÇÃO DO BOTÃO FLUTUANTE — normalizada para o site inteiro
   -----------------------------------------------------------------------------
   Cada página escrevia a sua própria regra `.wa`, e elas divergiram: 26px numa,
   22px noutra, e a proposta ficou em 84px com z-index 80, sobra de uma barra
   fixa que já saiu. O resultado era o cartão abrindo por cima do botão só
   naquela página.

   `body .wa` tem especificidade (0,1,1) e vence o `.wa` (0,1,0) do <style> de
   cada página sem precisar de !important. O z-index fica abaixo do cartão,
   para o cartão sempre empilhar por cima do botão, nunca o contrário.
   -------------------------------------------------------------------------- */
body .wa,
body .whats-float,
body .whatsapp-float {
  right: 22px;
  bottom: 22px;
  z-index: 94;
}

/* No celular, o cartão e o botão sobem juntos para não cobrir o CTA fixo.
   Onde :has() não existir, a regra é ignorada e vale o comportamento antigo. */
@media (max-width: 720px) {
  body:has(.sticky-cta) .wa,
  body:has(.sticky-cta) .whats-float,
  body:has(.sticky-cta) .whatsapp-float { bottom: 88px; }
  body:has(.sticky-cta) .wm-chat { bottom: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-chat { transition: opacity 1ms, visibility 1ms; transform: none !important; }
  .wm-chat-id small i::after { animation: none; }
  .wm-chat-digitando i { animation: none; opacity: 0.6; }
}

/* =============================================================================
   5.E AVISO DE FALHA NO ENVIO DO FORMULÁRIO
   -----------------------------------------------------------------------------
   Aparece abaixo do botão, no lugar onde a pessoa está olhando quando o envio
   não conclui. Traz o motivo e um caminho alternativo pelo WhatsApp, para o
   contato não se perder por causa de uma falha de servidor ou de conexão.
   ========================================================================== */
.wm-form-alert {
  display: none;
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: color-mix(in srgb, #FF6B6B 12%, transparent);
  border: 1px solid color-mix(in srgb, #FF6B6B 45%, transparent);
}
.wm-form-alert[data-open="true"] { display: block; }

.wm-form-alert-txt {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}

.wm-form-alert-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                    /* alvo de toque acessível */
  padding: 0 1.15rem;
  border-radius: 12px;
  background: #178540;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--wm-t);
}
.wm-form-alert-wa:hover { background: #1FBE5A; }
.wm-form-alert-wa:focus-visible { outline: 2px solid var(--wm-focus); outline-offset: 2px; }

/* Botão em envio: o visitante precisa ver que algo está acontecendo */
.lead-submit[aria-busy="true"] { opacity: 0.72; cursor: progress; }


/* =============================================================================
   5.F PORTFÓLIO REAL — vitrine cinética compartilhada
   -----------------------------------------------------------------------------
   Três trilhos no desktop e dois no celular. O movimento alterna direções,
   pode ser pausado pelo visitante e vira grade estática quando o sistema pede
   movimento reduzido. A imagem é o conteúdo: nomes e marcas não são repetidos.
   ========================================================================== */
.wm-portfolio-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wm-portfolio-section::before {
  content: '';
  position: absolute;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--wm-brand) 16%, transparent), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
  z-index: -1;
}

.wm-portfolio-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.wm-portfolio-copy { max-width: 760px; }
.wm-portfolio-copy .kicker { margin-bottom: 0.8rem; }
.wm-portfolio-copy h2 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 4.6vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.wm-portfolio-copy p {
  max-width: 680px;
  margin: 1rem 0 0;
  color: var(--wm-text-dim);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.65;
}

.wm-portfolio-toggle {
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--wm-border-strong);
  border-radius: 999px;
  background: var(--wm-card);
  color: var(--wm-text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--wm-shadow-sm);
  transition: border-color var(--wm-t), background var(--wm-t), transform var(--wm-t);
}
.wm-portfolio-toggle:hover { border-color: var(--wm-brand); transform: translateY(-1px); }
.wm-portfolio-toggle:focus-visible { outline: 2px solid var(--wm-focus); outline-offset: 3px; }
.wm-portfolio-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.wm-portfolio-toggle [hidden] { display: none; }

.wm-portfolio-stage {
  height: clamp(520px, 61vw, 720px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.3vw, 1rem);
  overflow: hidden;
  padding: 0.3rem;
  border-radius: 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.wm-portfolio-col { min-width: 0; overflow: hidden; }
.wm-portfolio-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation: wm-portfolio-up var(--wm-port-duration, 58s) linear infinite;
}
.wm-portfolio-col[data-direction="down"] .wm-portfolio-track {
  animation-name: wm-portfolio-down;
}
.wm-portfolio-loop {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.3vw, 1rem);
  padding-bottom: clamp(0.65rem, 1.3vw, 1rem);
}

@keyframes wm-portfolio-up {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}
@keyframes wm-portfolio-down {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.wm-portfolio-stage:hover .wm-portfolio-track,
.wm-portfolio-stage:focus-within .wm-portfolio-track,
.wm-portfolio-section.is-paused .wm-portfolio-track {
  animation-play-state: paused;
}

.wm-portfolio-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wm-border-strong);
  border-radius: clamp(14px, 1.5vw, 20px);
  background: var(--wm-elevated);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: var(--wm-shadow-sm);
  transform: translateZ(0);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), border-color 260ms ease, box-shadow 260ms ease;
}
.wm-portfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 8, 18, 0.7), transparent 46%);
  opacity: 0.5;
  transition: opacity 220ms ease;
}
.wm-portfolio-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), filter 260ms ease;
}
.wm-portfolio-card:hover,
.wm-portfolio-card:focus-visible {
  z-index: 2;
  transform: translateY(-3px) scale(1.012);
  border-color: color-mix(in srgb, var(--wm-brand) 76%, #FFFFFF);
  box-shadow: var(--wm-shadow-md);
}
.wm-portfolio-card:hover::after,
.wm-portfolio-card:focus-visible::after { opacity: 0.82; }
.wm-portfolio-card:hover img,
.wm-portfolio-card:focus-visible img { transform: scale(1.025); }
.wm-portfolio-card:focus-visible { outline: 3px solid var(--wm-focus); outline-offset: 3px; }

.wm-portfolio-open {
  position: absolute;
  z-index: 1;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.72rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.wm-portfolio-open svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.wm-portfolio-card:hover .wm-portfolio-open,
.wm-portfolio-card:focus-visible .wm-portfolio-open { opacity: 1; transform: none; }

.wm-portfolio-note {
  margin: 1rem 0 0;
  color: var(--wm-text-mute);
  font-size: 0.8rem;
  line-height: 1.55;
  text-align: center;
}

.wm-portfolio-section.is-static .wm-portfolio-stage {
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -webkit-mask-image: none;
  mask-image: none;
}
.wm-portfolio-section.is-static .wm-portfolio-open { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .wm-portfolio-head { align-items: flex-start; flex-direction: column; margin-bottom: 1.25rem; }
  .wm-portfolio-copy h2 { font-size: clamp(2rem, 11vw, 3.1rem); }
  .wm-portfolio-toggle { align-self: flex-start; }
  .wm-portfolio-stage { height: 520px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; padding: 0; border-radius: 18px; }
  .wm-portfolio-loop { gap: 0.55rem; padding-bottom: 0.55rem; }
  .wm-portfolio-card { border-radius: 12px; }
  .wm-portfolio-open { left: 0.55rem; right: 0.55rem; bottom: 0.42rem; font-size: 0.63rem; }
  .wm-portfolio-section.is-static .wm-portfolio-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .wm-portfolio-section::before { filter: none; }
  .wm-portfolio-card,
  .wm-portfolio-card img,
  .wm-portfolio-open { transition: none; }
  .wm-portfolio-card:hover,
  .wm-portfolio-card:focus-visible,
  .wm-portfolio-card:hover img,
  .wm-portfolio-card:focus-visible img { transform: none; }
}


/* =============================================================================
   5.F-bis MOLDURA DO VÍDEO DE CONVITE
   -----------------------------------------------------------------------------
   Enquanto o vídeo não existe, a moldura fica visível mas não se comporta como
   botão: sem cursor de mão, sem crescer no hover e com o play apagado. É a
   diferença entre "ainda não" e "clique aqui e nada acontece".
   ========================================================================== */
/* O estado "aguardando" deixou de existir: sem VIDEO_URL a seção inteira
   recebe `hidden` e some da página, em vez de ficar uma moldura apagada
   ocupando espaço. Só resta o estado pronto, que é um link de verdade. */
[data-wm-video-estado="pronto"] { cursor: pointer; }


/* =============================================================================
   5.G ATALHO PARA AS PÁGINAS DE SEGMENTO
   -----------------------------------------------------------------------------
   Bloco de links contextuais. Quem chega pela página geral de criação de sites
   mas atua em área regulada encontra aqui a página específica, em vez de ler
   uma página que não fala da regra dele.
   ========================================================================== */
.wm-segmentos {
  margin-top: 2.6rem;
  padding: 1.6rem 1.5rem;
  border-radius: 20px;
  background: var(--wm-surface);
  border: 1px solid var(--wm-border);
}
.wm-segmentos h3 {
  font-family: var(--font-display, inherit);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.wm-segmentos > p {
  margin: 0 0 1.2rem;
  font-size: 0.91rem;
  line-height: 1.6;
  color: var(--wm-text-dim);
  max-width: 68ch;
}
.wm-segmentos-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.8rem;
}
.wm-segmentos-links a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 44px;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--wm-card);
  border: 1px solid var(--wm-border-strong);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--wm-t), transform var(--wm-t);
}
.wm-segmentos-links a:hover { border-color: var(--wm-brand); transform: translateY(-2px); }
.wm-segmentos-links a:focus-visible { outline: 2px solid var(--wm-focus); outline-offset: 2px; }
.wm-segmentos-links b { font-size: 0.93rem; font-weight: 600; }
.wm-segmentos-links span { font-size: 0.8rem; color: var(--wm-text-mute); }

@media (prefers-reduced-motion: reduce) {
  .wm-segmentos-links a:hover { transform: none; }
}


/* =============================================================================
   5.D ÁRVORE DE LINKS DO RODAPÉ
   -----------------------------------------------------------------------------
   Faixa discreta acima do rodapé de cada página, ligando todas as áreas do site
   entre si. Serve ao visitante e também aos buscadores, que passam a enxergar a
   estrutura inteira a partir de qualquer página.
   ========================================================================== */
.wm-tree {
  border-top: 1px solid var(--wm-border);
  background: color-mix(in srgb, var(--wm-surface) 60%, transparent);
}
.wm-tree-in {
  max-width: 1200px;
  margin-inline: auto;
  padding: 2.4rem clamp(1.25rem, 5vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem 2rem;
}
.wm-tree h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wm-text-mute);
}
/* Sem gap: a altura mínima de 44px de cada link já cria o espaçamento, e o
   gap somado a ela deixaria a coluna alta demais no celular. */
.wm-tree ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wm-tree a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Alvo de toque acessível: são links de navegação isolados, não links
     dentro de frase. Antes tinham 20px de altura. */
  min-height: 44px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--wm-text-dim);
  text-decoration: none;
  transition: color var(--wm-t), transform var(--wm-t);
}
.wm-tree a::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity var(--wm-t), background var(--wm-t);
}
.wm-tree a:hover { color: var(--wire, var(--wm-brand)); transform: translateX(2px); }
.wm-tree a:hover::before { opacity: 1; }
.wm-tree a[aria-current="page"] { color: var(--wire, var(--wm-brand)); font-weight: 600; }
.wm-tree a:focus-visible { outline: 2px solid var(--wm-focus); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 560px) {
  .wm-tree-in { padding-block: 1.9rem; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-tree a { font-size: 0.83rem; }
}


/* =============================================================================
   6. SKIP LINK
   ========================================================================== */
.wm-skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 10000;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 12px 12px;
  background: var(--wm-brand-solid);
  color: var(--wm-on-brand);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease;
}
.wm-skip:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--wm-focus);
  outline-offset: 2px;
}


/* =============================================================================
   7. PISO DE QUALIDADE GLOBAL
   ========================================================================== */

/* Nenhuma página deve rolar na horizontal.
   Rede de segurança: a correção real de cada estouro é feita abaixo. */
html, body { max-width: 100%; overflow-x: clip; }

/* -----------------------------------------------------------------------------
   Grids que não encolhem
   -----------------------------------------------------------------------------
   `1fr` equivale a `minmax(auto, 1fr)`, e esse `auto` nunca fica menor que o
   conteúdo mínimo da coluna. Num formulário ou num texto longo, a coluna estoura
   o container e o conteúdo é cortado na lateral. `minmax(0, 1fr)` resolve, e o
   `min-width: 0` libera os filhos a encolher junto.
   -------------------------------------------------------------------------- */
.hero-grid,
.auth-grid,
.pricing-grid,
.stat-grid,
.foot-grid,
.tiers,
.flow,
.next-grid { min-width: 0; }

.hero-grid > *,
.auth-grid > *,
.pricing-grid > *,
.stat-grid > *,
.foot-grid > *,
.tiers > *,
.flow > *,
.next-grid > * { min-width: 0; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Nada de palavra ou URL comprida empurrando a coluna */
h1, h2, h3, p, li, td, .lead-field label { overflow-wrap: anywhere; }

/* Barra fixa de CTA: no celular o rótulo longo com white-space:nowrap
   empurrava o botão para fora da tela. Aqui ele passa a quebrar. */
@media (max-width: 640px) {
  .sticky-in, .sticky-cta { flex-wrap: wrap; gap: 0.6rem; }
  .sticky-in .btn, .sticky-cta .btn {
    white-space: normal;
    text-align: center;
    min-width: 0;
    line-height: 1.25;
  }
}

/* Foco sempre visível, mesmo onde a página não previu */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wm-focus);
  outline-offset: 2px;
}

/* Texto base de 16px no celular evita o zoom automático do iOS ao focar um
   campo. As páginas definem 0.97rem em .lead-field input, seletor mais
   específico que `input`, por isso o !important é necessário aqui. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: 16px !important; }
}

/* Movimento reduzido: respeitado em todo o sistema */
@media (prefers-reduced-motion: reduce) {
  .wm-consent { animation: none; }
  .wm-theme-toggle svg { transition: none; }
  body.wm-consent-open .wa,
  body.wm-consent-open .whats-float,
  body.wm-consent-open .whatsapp-float { transition: none; }
}

/* Pop-up de saída: desligado por completo no celular.
   A regra é de CSS para não haver nem uma piscada antes do JS agir. */
@media (max-width: 900px) {
  .exit, #exitModal { display: none !important; }
}
@media (pointer: coarse) {
  .exit, #exitModal { display: none !important; }
}

/* Impressão: nada de barra de cookies nem botão flutuante */
@media print {
  .wm-consent, .wm-theme-toggle, .wa, .whats-float, .whatsapp-float { display: none !important; }
}

/* A grade da parede segue a contagem de trilhos que o JS realmente montou.
   Sem isto, um render que acontecesse antes da largura final deixava a
   terceira celula vazia no desktop: o CSS pedia 3 colunas e o JS tinha
   montado 2. Agora quem manda e o atributo escrito na montagem. */
.wm-portfolio-stage[data-wm-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-portfolio-stage[data-wm-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* =============================================================================
   5.C-bis CAMADA DE FUNDO DA HERO
   -----------------------------------------------------------------------------
   Decorativa e discreta. Fica atras de tudo, em opacidade baixa, e so aparece
   depois que o JS confirma que a imagem carregou (data-pronto). Antes disso a
   camada existe mas e invisivel, entao nao ha salto de layout.

   A opacidade e menor no tema claro: sobre fundo claro a mesma imagem pesa
   muito mais na leitura do texto.
   ========================================================================== */
.wm-hero-fundo {
  position: absolute;
  inset: 0 0 auto 0;
  /* Teto de altura de proposito. Com `inset: 0` a camada acompanhava o heroi
     inteiro, que no celular passa de 1900px: o `cover` ampliava a imagem 2,1x
     e o navegador rasterizava uns 26 MB de textura para exibir 13% de
     opacidade. Com o teto a ampliacao cai para menos de 1x e a memoria cai
     junto, sem mudar o que aparece: a mascara ja apagava tudo abaixo disso. */
  height: min(100%, 760px);
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 700ms ease;
  /* apaga de cima para baixo: o topo do heroi ganha atmosfera, a base
     entrega o terreno limpo para os botoes e a barra de confianca */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
}
/* -----------------------------------------------------------------------------
   Visibilidade da cena — revisado em 02/08/2026
   -----------------------------------------------------------------------------
   As cenas estavam fracas demais para valer a pena existir. Medindo em L* do
   CIELAB (perceptualmente uniforme, ao contrário de "níveis de 0 a 255"), a
   visibilidade média era 1,25 no tema escuro e 4,42 no claro. Abaixo de 1 o
   olho não distingue nada; acima de 5 a cena aparece de verdade.

   Cada tema tem um problema diferente, então a solução é diferente:

   TEMA CLARO — cena escura sobre fundo quase branco. Aqui opacidade resolve
   sozinha. Subiu de 0,06 para 0,14 e a visibilidade foi de 4,42 para 10,38.

   TEMA ESCURO — cena escura sobre fundo quase preto. Opacidade tem alcance
   curto: o máximo que a camada consegue somar é a própria cor da cena, que já
   é escura. Levar a opacidade ao teto de AA (0,26) chegaria só a 2,86.
   A saída é clarear a cena antes de compor. E há um detalhe que faz isso sair
   de graça: com brightness(2.6) os pontos já claros (janela, céu, reflexo do
   guindaste) SATURAM em branco, então o pixel mais claro do quadro não piora,
   e o contraste do texto fica preso à opacidade. Enquanto isso, os meios-tons
   sobem muito. Resultado: visibilidade 5,85 com opacidade MENOR que a testada
   antes, e contraste melhor.

     tema      ajuste                    visibilidade   subtítulo   h1
     escuro    brightness(2.6) + 0,17    1,25 -> 5,85   5,30:1      11,1:1
     claro     opacidade 0,14            4,42 -> 10,38  5,28:1      12,7:1

   Limites, para quem for trocar uma cena: no escuro o subtítulo reprova em AA
   passando de 0,18 de opacidade; no claro, passando de 0,16. O brilho pode
   subir mais, mas acima de 2,6 o quadro começa a estourar (a 3,4 já são ~20%
   dos pixels saturados) e a cena vira mancha em vez de imagem.
   -------------------------------------------------------------------------- */
.wm-hero-fundo[data-pronto] { opacity: 0.17; }
:root[data-theme="dark"]  .wm-hero-fundo { filter: brightness(2.6); }
:root[data-theme="light"] .wm-hero-fundo[data-pronto] { opacity: 0.14; }

/* O conteudo do heroi sobe acima da camada */
.hero > *:not(.wm-hero-fundo) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .wm-hero-fundo { transition: none; }
}

/* =============================================================================
   5.C-ter O HERÓI INTEIRO NA PRIMEIRA DOBRA (só no desktop largo)
   -----------------------------------------------------------------------------
   O problema medido em 1440x900: o herói tinha 1108px de altura contra 900px de
   viewport. Passava 208px, e quem chegava pelo anúncio via o formulário cortado
   ao meio, que é justo o elemento que precisa parecer curto.

   De onde vinha a altura:
     formulário  882px  <- mandava na altura da seção
     coluna texto 720px
     respiros     226px (146 em cima, 80 embaixo)

   Três frentes, nesta ordem de ganho:

   1. FORMULÁRIO EM DUAS COLUNAS. Seis campos empilhados viravam seis linhas de
      74px. Emparelhando os curtos sobram quatro linhas: -148px. Nome e WhatsApp
      juntos, tipo de projeto e faixa de investimento juntos. Área de atuação e
      e-mail ficam na linha inteira porque o texto deles não cabe na metade.

   2. OS DOIS CTAs NUMA LINHA SÓ. Eles somavam 547px numa coluna de 541px e
      quebravam por 6px, custando 68px de altura à toa.

   3. RITMO VERTICAL POR ALTURA DE TELA. A restrição aqui não é largura, é
      ALTURA, então as regras usam `max-height`. Notebook de 900px e notebook de
      768px precisam de aperto diferente.

   POR QUE O CORTE É EM 1180px, E NÃO EM 900px
   -------------------------------------------
   Medido, não estimado: a opção mais longa dos selects é "Reformulação de site",
   que ocupa 155px de texto. Para caber numa meia-coluna, a coluna precisa de
   pelo menos ~200px úteis. Como a largura do formulário acompanha a grade do
   herói, isso só acontece a partir de 1180px de viewport. Em 1024px a
   meia-coluna cairia para 135px úteis e a opção sairia cortada. Entre 981px e
   1180px, portanto, o formulário fica em uma coluna de propósito.

   O celular também fica de fora de propósito: campo embaixo de campo é o
   formato certo para preencher com o polegar, e ali a dobra não é o problema.

   O FORMULÁRIO DO RODAPÉ NÃO ENTRA
   --------------------------------
   O bloco de CTA no fim da página dá ao formulário 440px fixos, o que resultaria
   em 135px úteis por meia-coluna: a mesma opção sairia cortada. E lá não existe
   restrição de dobra para resolver. Fica em uma coluna, que é também o formato
   que costuma converter melhor quando não há pressa de espaço.
   ========================================================================== */

@media (min-width: 1180px) {

  /* Mais largo para as duas colunas respirarem, e menos preenchimento interno,
     para sobrar largura útil dentro de cada campo. */
  body .hero .lead-wrap { max-width: 480px; }
  body .hero .lead-card { padding: 1.5rem; }

  body .hero .lead-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.85rem;
    align-items: start;
  }

  /* Cabeçalho, botão e nota nunca se dividem. O honeypot e a barra colorida do
     topo são posicionados de forma absoluta, então não entram na grade. */
  body .hero .lead-card > .lead-head,
  body .hero .lead-card > .lead-submit,
  body .hero .lead-card > .lead-note,
  body .hero .lead-card > .lead-field[data-wm-largo] { grid-column: 1 / -1; }

  body .hero .lead-card > .lead-field { margin-bottom: 0.7rem; }
  body .hero .lead-card > .lead-head  { margin-bottom: 1rem; }
  body .hero .lead-card > .lead-note  { margin-top: 0.6rem; }
  body .hero .lead-card > .lead-field .lead-err { margin-top: 0.25rem; }

  /* A seta do select reservava 2,4rem. Em meia-coluna isso é largura demais
     entregue a um ícone de 16px. */
  body .hero .lead-field select { padding-right: 1.7rem; }

  body .hero .hero-actions { gap: 0.7rem; }
  body .hero .hero-actions .btn { padding-inline: 1.3rem; }
}

/* Notebook comum: 900px de viewport útil. */
@media (min-width: 1180px) and (max-height: 940px) {
  body .hero { padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: 2.75rem; }
  body .hero h1 { font-size: clamp(2.5rem, 3.4vw, 3.35rem); margin-top: 1.05rem; }
  body .hero .hero-sub { margin-top: 1.05rem; }
  body .hero .hero-actions { margin-top: 1.5rem; }
  body .hero .hero-trust { margin-top: 1.6rem; padding-top: 1.2rem; }
  body .hero .lead-card > .lead-head { margin-bottom: 0.8rem; }
  body .hero .lead-card > .lead-field { margin-bottom: 0.6rem; }
}

/* Notebook baixo, o 1366x768 e parentes: sobra pouco mais de 700px de viewport.
   Aqui o aperto chega ao formulário também, com campo de 46px. */
@media (min-width: 1180px) and (max-height: 810px) {
  body .hero { padding-top: calc(var(--nav-h) + 1.4rem); padding-bottom: 1.9rem; }
  body .hero h1 { font-size: clamp(2.05rem, 2.8vw, 2.7rem); margin-top: 0.8rem; }
  body .hero .hero-sub { margin-top: 0.8rem; font-size: 1.02rem; }
  body .hero .hero-actions { margin-top: 1.1rem; }
  body .hero .hero-trust { margin-top: 1.15rem; padding-top: 0.9rem; }

  body .hero .lead-card { padding: 1.35rem 1.4rem; }
  body .hero .lead-card > .lead-head { margin-bottom: 0.65rem; }
  body .hero .lead-card > .lead-field { margin-bottom: 0.45rem; }
  body .hero .lead-field label { margin-bottom: 0.28rem; }
  body .hero .lead-field input,
  body .hero .lead-field select { height: 46px; }
  body .hero .lead-submit { height: 48px; margin-top: 0.4rem; }
  body .hero .lead-note { margin-top: 0.45rem; }
}

/* =============================================================================
   LOGO POR TEMA
   -----------------------------------------------------------------------------
   O wordmark "ACELERA" da logo e branco, feito para fundo escuro. No tema claro
   ele desaparece contra a navbar. Cada pagina carrega as duas versoes e o CSS
   mostra a certa, sem troca de src por JavaScript, que piscaria no carregamento.
   ========================================================================== */
.logo-claro { display: none; }
:root[data-theme="light"] .logo-escuro { display: none; }
:root[data-theme="light"] .logo-claro { display: block; }


/* =============================================================================
   PORTÃO DO WHATSAPP
   -----------------------------------------------------------------------------
   Cartão curto que aparece antes de abrir a conversa. Herda a linguagem do
   pop-up de saída, para não parecer um componente de outro site.
   ========================================================================== */
.wm-porta {
  position: fixed; inset: 0; z-index: 420;
  display: grid; place-items: center; padding: 1.25rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--wm-t), visibility var(--wm-t);
}
.wm-porta[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
body.wm-porta-aberta { overflow: hidden; }

.wm-porta-veu {
  position: absolute; inset: 0;
  background: var(--wm-scrim);
  backdrop-filter: blur(6px);
}
.wm-porta-cartao {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  border-radius: 22px;
  padding: 2rem 1.6rem 1.5rem;
  background: var(--wm-card);
  border: 1px solid var(--wm-border-strong);
  box-shadow: var(--wm-shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
}
.wm-porta[data-open="true"] .wm-porta-cartao { transform: none; }
.wm-porta-cartao::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--wm-brand), var(--wm-accent));
}
.wm-porta-x {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid var(--wm-border-strong);
  color: var(--wm-text-dim); cursor: pointer;
  display: grid; place-items: center; transition: var(--wm-t);
}
.wm-porta-x:hover { color: var(--wm-text); background: var(--wm-elevated); }
.wm-porta-x svg { width: 17px; height: 17px; }
.wm-porta-tag {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wm-brand); margin-bottom: 0.7rem;
}
.wm-porta-cartao h2 {
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: clamp(1.25rem, 3.6vw, 1.55rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--wm-text); margin: 0;
}
.wm-porta-sub {
  margin: 0.6rem 0 1.3rem;
  font-size: 0.94rem; line-height: 1.55; color: var(--wm-text-dim);
}
.wm-porta-campo { display: block; margin-bottom: 0.9rem; }
.wm-porta-campo > span {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wm-text-dim);
}
.wm-porta-campo input {
  width: 100%; height: 50px; padding: 0 1rem;
  font-family: inherit; font-size: 0.97rem; color: var(--wm-text);
  background: var(--wm-input-bg); border: 1px solid var(--wm-input-border);
  border-radius: 10px;
  transition: border-color var(--wm-t), box-shadow var(--wm-t);
}
.wm-porta-campo input:focus {
  outline: none; border-color: var(--wm-brand);
  box-shadow: 0 0 0 3px var(--wm-glow-brand);
}
.wm-porta-campo.invalido input {
  border-color: var(--wm-danger);
  box-shadow: 0 0 0 3px rgba(255, 107, 122, 0.16);
}
.wm-porta-erro {
  display: block; min-height: 1em; margin-top: 0.3rem;
  font-style: normal; font-size: 0.78rem; color: var(--wm-danger);
}
.wm-porta-enviar {
  width: 100%; min-height: 54px; margin-top: 0.4rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 0.97rem; font-weight: 600;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--wm-brand-solid); color: var(--wm-on-brand);
  transition: transform var(--wm-t), box-shadow var(--wm-t);
}
.wm-porta-enviar:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--wm-glow-brand); }
.wm-porta-enviar svg { width: 19px; height: 19px; }
.wm-porta-nota {
  margin: 0.9rem 0 0; text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem; letter-spacing: 0.03em; color: var(--wm-text-mute);
}
@media (max-width: 420px) {
  .wm-porta-cartao { padding: 1.7rem 1.2rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-porta, .wm-porta-cartao { transition: none; }
  .wm-porta-cartao { transform: none; }
}
