/* EvoTalks — site styles
   Identidade: Poppins 400/600, sem gradientes nas cores de marca, flat + glass leve
*/

/* === REGRA GLOBAL: PROIBIDO ITÁLICO no Site Evotalks ===
   `<em>`, `<i>`, `<cite>`, `<address>`, `<dfn>`, `<var>` renderizam itálico
   por DEFAULT do browser. Override aqui mata todos de uma vez pra qualquer
   página/feature futura — não precisa lembrar caso a caso.
   Exceção implícita: <i class="ico"> (ícones por classe) — esses não têm
   texto, então font-style não tem efeito visual. */
em, i, cite, address, dfn, var {
  font-style: normal;
}

:root {
  /* Cores de marca */
  --evo-green: #1bbf5d;
  --evo-green-deep: #16a34a;
  --evo-green-soft: #d8f5e6;
  --evo-purple: #7c6bf5;
  --evo-purple-deep: #5e4cd9;
  --evo-purple-soft: #ebe8ff;
  --evo-off-white: #eff2f7;
  --evo-dark: #1e2026;
  --evo-dark-2: #2a2d35;
  --evo-text: #1e2026;
  --evo-text-soft: #5b606b;
  --evo-text-mute: #8a8f99;
  --evo-border: #e4e8ef;
  --evo-border-soft: #eef1f6;
  --evo-white: #ffffff;

  /* Cores de apoio (uso pontual em ícones de categoria) */
  --evo-orange: #f59e0b;
  --evo-blue: #3b82f6;
  --evo-pink: #ec4899;
  --evo-lime: #84cc16;

  /* Tipografia */
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Sombras */
  --sh-sm: 0 2px 8px rgba(30, 32, 38, 0.04);
  --sh-md: 0 6px 22px rgba(30, 32, 38, 0.06);
  --sh-lg: 0 18px 50px rgba(30, 32, 38, 0.10);
  --sh-glow-green: 0 24px 60px rgba(27, 191, 93, 0.22);
  --sh-glow-purple: 0 24px 60px rgba(124, 107, 245, 0.22);

  /* Espaçamento de seção */
  --section-y: 120px;
  --section-y-sm: 80px;
  --container-max: 1240px;
  --container-pad: 28px;

  /* Mood (Tweak) — defaults match Daylight */
  --mood-page-bg: #ffffff;
  --mood-hero-glow: radial-gradient(900px 600px at 85% 0%, rgba(27,191,93,0.10), transparent 60%), radial-gradient(700px 500px at 5% 30%, rgba(124,107,245,0.08), transparent 60%);
  --mood-section-tinted: #eff2f7;
  --mood-card-bg: #ffffff;
  --mood-card-border: #e8eaee;
  --mood-card-shadow: 0 1px 2px rgba(30,32,38,0.04);
  --mood-card-shadow-hover: 0 20px 40px rgba(30,32,38,0.08);
  --mood-text: #1e2026;
  --mood-text-soft: #5b606b;
  --mood-central-glow: 0 30px 70px rgba(27,191,93,0.45);
  --mood-chip-bg: #ffffff;
  --mood-chip-border: #e3e6eb;
  --mood-header-bg: rgba(255,255,255,0.85);
  --mood-orbit-stroke: rgba(30,32,38,0.08);

  /* Energy (Tweak) — defaults match Lively */
  --fx-orbit-speed: 60s;
  --fx-pulse-duration: 3s;
  --fx-pulse-scale: 1.6;
  --fx-float-amp: 6px;
  --fx-float-duration: 6s;
  --fx-dash-speed: 8s;
  --fx-reveal-stagger: 80ms;
  --fx-hover-lift: -4px;
  --fx-hover-scale: 1.02;
}

/* Mood applies to body + key surfaces */
:root[data-mood] body { background: var(--mood-page-bg); color: var(--mood-text); transition: background-color .5s ease, color .5s ease; }
:root[data-mood] .hero::before { background: var(--mood-hero-glow) !important; transition: background .5s ease; }
:root[data-mood] .section-tinted { background: var(--mood-section-tinted) !important; transition: background-color .5s ease; }
:root[data-mood] .central { box-shadow: var(--mood-central-glow) !important; transition: box-shadow .5s ease; }
:root[data-mood] .chip { background: var(--mood-chip-bg) !important; border-color: var(--mood-chip-border) !important; color: var(--mood-text) !important; }
:root[data-mood] .site-header { background: var(--mood-header-bg) !important; transition: background-color .5s ease; }
:root[data-mood] .orbit { stroke: var(--mood-orbit-stroke) !important; transition: stroke .5s ease; }
:root[data-mood="studio"] .bento .tile:not(.t-multicanal):not(.t-ia):not(.t-tel) { background: var(--mood-card-bg); border-color: var(--mood-card-border); color: var(--mood-text); }
:root[data-mood="studio"] .bento .tile p, :root[data-mood="studio"] .channels-strip .item, :root[data-mood="studio"] .stats { color: var(--mood-text-soft); }
:root[data-mood="studio"] .channels-strip .item { background: var(--mood-card-bg); border-color: var(--mood-card-border); color: var(--mood-text); }
:root[data-mood="studio"] .stats { background: var(--mood-card-bg); border-color: var(--mood-card-border); color: var(--mood-text); }
:root[data-mood="studio"] .step { background: var(--mood-card-bg); border-color: var(--mood-card-border); color: var(--mood-text); }
:root[data-mood="studio"] .step p { color: var(--mood-text-soft); }
:root[data-mood="studio"] .lead, :root[data-mood="studio"] .hero-bullets, :root[data-mood="studio"] .nav-link { color: var(--mood-text-soft) !important; }
:root[data-mood="studio"] .nav-link:hover { background: rgba(255,255,255,0.06); color: var(--mood-text) !important; }

/* Energy hooks — animations read these vars */
:root[data-energy] .orbit-spin { animation-duration: var(--fx-orbit-speed) !important; }
:root[data-energy] .central::before, :root[data-energy] .central::after { animation-duration: var(--fx-pulse-duration) !important; }
:root[data-energy] .chip { animation-duration: var(--fx-float-duration) !important; }
:root[data-energy] .lines path { animation-duration: var(--fx-dash-speed) !important; }
/* Bento tiles têm tilt 3D próprio (JS) — não aplicar essa regra de hover-lift
   chapada com !important que quebraria a rotação. Mantido pra steps/channels. */
:root[data-energy] .step:hover, :root[data-energy] .channels-strip .item:hover { transform: translateY(var(--fx-hover-lift)) scale(var(--fx-hover-scale)) !important; }
@keyframes float-amp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--fx-float-amp))); } }
:root[data-energy] .chip { animation-name: float-amp !important; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Previne scroll horizontal acidental por overflow de elemento.
   Importante em mobile onde 1px a mais já estoura viewport. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
/* Reserva SEMPRE o espaço da barra de scroll vertical. Sem isto, ao trocar de
   página (uma com scroll, outra sem, ou antes do conteúdo crescer), a barra
   some/volta e a largura do viewport muda → a página inteira "pula"
   lateralmente, dando sensação de piscada/travamento. `stable` reserva a
   calha em qualquer cenário, então o conteúdo nunca desloca. */
html { scrollbar-gutter: stable; }

/* ===================================================================
   SCROLLBAR FININHO GLOBAL — qualquer elemento com scroll usa um track
   transparente e thumb branca quase invisível. Aplicado a TUDO que rola
   internamente (asides, popovers, drawers, etc) + element opt-in via
   [data-thin-scroll]. Firefox usa scrollbar-width/color, WebKit usa
   ::-webkit-scrollbar.
   =================================================================== */
[data-thin-scroll],
.mm-seg-list,
.evo-md-scrollarea,
.mm-stage-inner,
.pn-ia-stream,
.ia-hp-stream,
.int-popup-chat-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}
[data-thin-scroll]::-webkit-scrollbar,
.mm-seg-list::-webkit-scrollbar,
.evo-md-scrollarea::-webkit-scrollbar,
.mm-stage-inner::-webkit-scrollbar,
.pn-ia-stream::-webkit-scrollbar,
.ia-hp-stream::-webkit-scrollbar,
.int-popup-chat-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-thin-scroll]::-webkit-scrollbar-track,
.mm-seg-list::-webkit-scrollbar-track,
.evo-md-scrollarea::-webkit-scrollbar-track,
.mm-stage-inner::-webkit-scrollbar-track,
.pn-ia-stream::-webkit-scrollbar-track,
.ia-hp-stream::-webkit-scrollbar-track,
.int-popup-chat-box::-webkit-scrollbar-track {
  background: transparent;
}
[data-thin-scroll]::-webkit-scrollbar-thumb,
.mm-seg-list::-webkit-scrollbar-thumb,
.evo-md-scrollarea::-webkit-scrollbar-thumb,
.mm-stage-inner::-webkit-scrollbar-thumb,
.pn-ia-stream::-webkit-scrollbar-thumb,
.ia-hp-stream::-webkit-scrollbar-thumb,
.int-popup-chat-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(30, 32, 38, 0.06);
}
[data-thin-scroll]::-webkit-scrollbar-thumb:hover,
.mm-seg-list::-webkit-scrollbar-thumb:hover,
.evo-md-scrollarea::-webkit-scrollbar-thumb:hover,
.mm-stage-inner::-webkit-scrollbar-thumb:hover,
.pn-ia-stream::-webkit-scrollbar-thumb:hover,
.ia-hp-stream::-webkit-scrollbar-thumb:hover,
.int-popup-chat-box::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 191, 93, 0.45);
}
/* Scroll suave global pra anchors (#xxx) e offset pra compensar header fixo (~76px).
   Sem isso, clique em href="#catalogo" pulava seco e ficava embaixo do header. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
[id] { scroll-margin-top: 100px; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--evo-text);
  background: var(--evo-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 16px;
  /* `clip` (não `hidden`) — contém o overflow horizontal SEM tornar o body um
     container de scroll. Com `hidden`, o overflow-y virava `auto` e o body
     virava scroll container, quebrando `position: sticky` (ex: índice do blog). */
  overflow-x: clip;
  /* Momentum nativo iOS — scrollar fica com bounce/inércia natural */
  -webkit-overflow-scrolling: touch;
  /* Permite touch-action default (não bloqueia gesto de scroll) */
  touch-action: manipulation;
}

/* ===================================================================
   TOUCH / MOBILE GLOBAL OPTIMIZATIONS
   - Tap-target mínimo 44×44 em controles
   - Remove highlight cinza padrão em links/buttons
   - Em touch devices (sem hover), desabilita transforms de hover que
     ficam "presos" depois do tap (-webkit-tap-highlight-color)
   =================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Touch device — desabilita os efeitos hover-only que estragam UX:
     tilt 3D, scale grande, magnetic, etc. Mantém transitions sutis. */
  .mm-link, .mm-mod-row, .mm-card,
  .iavs-tab, .iavs-sug,
  .depo-card,
  .ft-pitch .ft-panel,
  .pn-flowx-node,
  .step,
  .sol-feature, .sol-mod-card,
  .logos-item {
    transition: none !important;
  }
  .mm-link:hover, .mm-mod-row:hover, .mm-card:hover,
  .pn-flowx-node:hover,
  .logos-item:hover {
    transform: none !important;
  }
  /* Logos marquee — não pausa no "hover" em touch, deixa sempre rolando */
  .logos-marquee:hover { animation-play-state: running !important; }
}
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(27, 191, 93, 0.15); }

/* ===================================================================
   MOBILE BREAKPOINTS — refinos globais.
   ≤720px: layout puramente mobile. ≤480px: ainda mais apertado.
   =================================================================== */
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  /* Container ganha menos padding mobile pra mais espaço útil */
  .container { padding-left: 18px; padding-right: 18px; }
  /* Sections respiram menos verticalmente — não desperdiça scroll */
  .section { padding: 56px 0; }
  .section-sm { padding: 36px 0; }
  /* Headings maiores ficam toleráveis */
  h1, .h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1; }
  h2, .h2 { font-size: clamp(24px, 6.5vw, 30px) !important; line-height: 1.15; }
  h3, .h3 { font-size: clamp(20px, 5vw, 24px) !important; }
  .lead { font-size: 16px !important; line-height: 1.55; }
  /* Botões touch-friendly — altura mínima 48px (Apple HIG) */
  .btn { min-height: 48px; font-size: 15.5px; padding: 14px 20px; }
  .btn-lg { min-height: 52px; padding: 16px 24px; font-size: 16px; }
}
@media (max-width: 480px) {
  /* Section padding ainda menor em telas pequenas */
  .section { padding: 44px 0; }
  .container { padding-left: 16px; padding-right: 16px; }
  /* CTA buttons full-width em telas muito pequenas — sumir lado a lado é UX ruim */
  .hero-actions .btn,
  .ft-cta {
    width: 100%;
    justify-content: center;
  }
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
input, textarea { font-family: inherit; }

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Tipografia */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.h1, h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; }
.h2, h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
.h3, h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; line-height: 1.6; text-wrap: pretty; }
.lead { font-size: 18px; color: var(--evo-text-soft); max-width: 60ch; }

/* Eyebrow tag (label antes de heading) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--evo-green-soft);
  color: var(--evo-green-deep);
}
.eyebrow.purple { background: var(--evo-purple-soft); color: var(--evo-purple-deep); }
.eyebrow.dark { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.12); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .2s, color .2s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--evo-green);
  color: #fff;
  box-shadow: 0 8px 24px rgba(27, 191, 93, 0.28);
}
.btn-primary:hover { background: var(--evo-green-deep); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27, 191, 93, 0.32); }
.btn-ghost {
  background: transparent;
  color: var(--evo-text);
  border: 1px solid var(--evo-border);
}
.btn-ghost:hover { background: var(--evo-off-white); }
.btn-dark {
  background: var(--evo-dark);
  color: #fff;
}
.btn-dark:hover { background: #000; transform: translateY(-2px); }
.btn-purple {
  background: var(--evo-purple);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 107, 245, 0.32);
}
.btn-purple:hover { background: var(--evo-purple-deep); transform: translateY(-2px); }
.btn .arrow { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* Light traçante — faixa de luz diagonal atravessando o botão de tempo em tempo.
   Mesmo efeito do .mm-btn-shine (menu mobile), aqui como variante genérica do .btn.
   O gradiente aqui É a luz, não fundo de UI — é o único jeito de a faixa ter borda
   suave; não troque por cor sólida.
   isolation: isolate é OBRIGATÓRIO: o ::before usa z-index:-1 pra passar por baixo do
   texto, e sem contexto de empilhamento próprio ele cairia atrás do fundo do botão e
   simplesmente não apareceria. O clipe vem do overflow:hidden que o .btn já tem. */
.btn-shine { isolation: isolate; }
.btn-shine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: -1;
  animation: btnShine 3.6s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 62% { left: -60%; }
  86%     { left: 130%; }
  100%    { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shine::before { animation: none; }
}

.btn-lg { padding: 18px 28px; font-size: 16px; }

/* Magnetic button effect */
.btn[data-magnetic] { will-change: transform; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--evo-border-soft); background: rgba(255,255,255,0.92); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--evo-text-soft);
  font-weight: 500;
  transition: color .2s, background-color .2s;
}
.nav-link:hover { color: var(--evo-text); background: var(--evo-off-white); }
.nav-link.active { color: var(--evo-text); }
.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile nav hidden by default; we'll handle responsive later */
@media (max-width: 880px) {
  .nav-links { display: none; }
}

/* Section utilities */
.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section-sm { padding: var(--section-y-sm) 0; }
.section-dark {
  background: var(--evo-dark);
  color: #fff;
}
.section-dark .lead { color: rgba(255,255,255,0.7); }
.section-tinted { background: var(--evo-off-white); }
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.section-head .lead { margin: 0 auto; }

/* ===== Benefit grid — usado em todas as páginas de módulo (fluxos, monitoramento,
   ia, multicanal, crm, campanhas). Antes existia só em integracoes.css, causando
   cards quebrados nas outras páginas. */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.benefit {
  background: #fff;
  border: 1px solid var(--evo-border-soft);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: transform .35s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.benefit:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: transparent;
}
.benefit h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.25; }
.benefit p { margin: 0; font-size: 14.5px; color: var(--evo-text-soft); line-height: 1.55; }
.benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(30,32,38,0.10);
}
.benefit-icon .ico { background-color: #fff; }
.benefit-icon.green   { background: var(--evo-green); }
.benefit-icon.purple  { background: var(--evo-purple); }
.benefit-icon.blue    { background: #2563eb; }
.benefit-icon.orange  { background: #f59e0b; }
@media (max-width: 980px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit { padding: 26px 22px; }
}

/* ===== feat-row — seção alternada (texto + visual) usada em todas as módulo-pages */
.feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 96px;
}
.feat-row.flip { direction: rtl; }
.feat-row.flip > * { direction: ltr; }
.feat-row h3 { font-size: 30px; line-height: 1.2; margin-bottom: 14px; }
.feat-row p { font-size: 16px; color: var(--evo-text-soft); margin-bottom: 12px; line-height: 1.6; }
.feat-row ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.feat-row li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--evo-text);
  line-height: 1.5;
}
.feat-row li::before {
  content: "✓"; color: #fff; font-weight: 600;
  background: var(--evo-green);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; flex-shrink: 0;
  margin-top: 2px;
}
@media (max-width: 980px) {
  .feat-row, .feat-row.flip { grid-template-columns: 1fr; direction: ltr; gap: 40px; margin-bottom: 64px; }
}

/* ===== Stats strip — banner escuro com KPIs numéricos. Antes estava inline
   só em evo-monitoramento.php; agora todas as páginas (campanhas, crm, multi)
   compartilham. */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  background: var(--evo-dark);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.stats-strip::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 280px at 100% 0, rgba(27,191,93,0.20), transparent 60%);
  pointer-events: none;
}
.stats-strip .stat { position: relative; }
.stats-strip .stat .v {
  font-size: 44px;
  font-weight: 600;
  color: var(--evo-green);
  line-height: 1;
  font-feature-settings: "tnum";
}
.stats-strip .stat .l {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 8px;
  line-height: 1.4;
}
@media (max-width: 980px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 540px) {
  .stats-strip { grid-template-columns: 1fr; padding: 32px 28px; }
  .stats-strip .stat .v { font-size: 36px; }
}

/* ===== CTA card grande no final das páginas */
.cta-card {
  background: linear-gradient(135deg, var(--evo-green) 0%, var(--evo-green-deep, #16a34a) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 60px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(27,191,93,0.20);
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 320px at 20% 0%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(420px 280px at 100% 100%, rgba(255,255,255,0.12), transparent 60%);
  pointer-events: none;
}
.cta-card h2 {
  position: relative;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  margin-bottom: 14px;
  color: #fff;
}
.cta-card p {
  position: relative;
  font-size: 17px;
  margin: 0 auto 32px;
  max-width: 640px;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
}
.cta-card .btn { position: relative; }
.cta-card .btn-primary {
  background: #fff;
  color: var(--evo-green-deep, #16a34a);
}
.cta-card .btn-primary:hover { background: #f3fdf6; }
@media (max-width: 640px) {
  .cta-card { padding: 44px 28px; }
  .cta-card p { font-size: 15.5px; }
}

/* Seção que envelopa o CTA Megacard — zera padding vertical pra encostar
   no padding-bottom da seção anterior sem somar gap. O próprio megacard
   tem 96px de padding interno, então o respiro fica controlado pelo card. */
.cta-megacard-section {
  padding: var(--section-y) 0;
}
@media (max-width: 980px) {
  .cta-megacard-section { padding: var(--section-y-sm) 0; }
}

/* ============================================================
   CTA MEGACARD — versão dark com lista de bullets animados.
   Usado no fim de toda página principal via partials/cta-megacard.php.
   Sem linear-gradient (regra dura: cor sólida em UI).
   Anima cascata dos itens + scale do círculo + desenho do path do check.
   Dispara via classe .in adicionada pelo IntersectionObserver de site.js.
   ============================================================ */
.cta-megacard {
  background: var(--evo-dark);
  color: #fff;
  border-radius: var(--r-2xl);
  /* Padding generoso pra ocupar bem o espaço da seção (88-96px vertical). */
  padding: 96px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-megacard h2 {
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #fff;
}
.cta-megacard p {
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 52ch;
  line-height: 1.6;
  font-size: 17px;
}
.cta-megacard-actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-megacard .btn-ghost {
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.cta-megacard .btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.35);
}
.cta-megacard-list {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: 32px;
}
.cta-megacard-list h4 {
  font-size: 14px;
  margin: 0 0 22px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.cta-megacard-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cta-megacard-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: #fff;
  line-height: 1.4;
  /* Estado inicial — invisível, ligeiramente deslocado pra esquerda */
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity .55s cubic-bezier(.16, 1, .3, 1),
    transform .55s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 130ms + 250ms);
}
.cta-megacard-list .ck {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--evo-green);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  /* Círculo do check entra com bounce após o item slidar */
  transform: scale(0);
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 130ms + 420ms);
}
.cta-megacard-list .ck svg {
  width: 12px;
  height: 12px;
  /* Path do check tem ~22px de comprimento total.
     dasharray maior cobre 100% do path, dashoffset começa no fim (invisível)
     e anima até 0 (totalmente desenhado). */
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .5s cubic-bezier(.65, 0, .35, 1);
  transition-delay: calc(var(--i, 0) * 130ms + 620ms);
}
/* Quando .in entra (revealObserver intersection), dispara toda a cascata */
.cta-megacard.in .cta-megacard-list li {
  opacity: 1;
  transform: translateX(0);
}
.cta-megacard.in .cta-megacard-list .ck {
  transform: scale(1);
}
.cta-megacard.in .cta-megacard-list .ck svg {
  stroke-dashoffset: 0;
}

/* Replay da animação do check ao passar o cursor — círculo dá um "bounce"
   (scale 1 → 1.18 → 1) e o path do check redesenha (dashoffset 24 → 0).
   Cada hover dispara as keyframes do zero porque a regra de seletor `:hover`
   re-aplica as animations. Após hover-out o estado persistente fica do
   `.cta-megacard.in` (scale 1 + dashoffset 0). */
.cta-megacard.in .cta-megacard-list li:hover .ck {
  animation: ctaCkPulse .6s cubic-bezier(.34, 1.56, .64, 1);
}
.cta-megacard.in .cta-megacard-list li:hover .ck svg {
  animation: ctaCkRedraw .6s cubic-bezier(.65, 0, .35, 1);
}
@keyframes ctaCkPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes ctaCkRedraw {
  0%   { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}
@media (max-width: 980px) {
  .cta-megacard {
    grid-template-columns: 1fr;
    padding: 56px 32px;
    gap: 36px;
  }
  .cta-megacard h2 { font-size: 28px; }
  .cta-megacard-list { padding: 24px; }
}

/* ===== Generic card */
.card {
  background: #fff;
  border: 1px solid var(--evo-border-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--evo-border);
}
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* Glass card (uso moderado) */
.glass {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(30, 32, 38, 0.08);
  border-radius: var(--r-lg);
}
.glass-dark {
  background: rgba(30, 32, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-lg);
  color: #fff;
}

/* === Reveal-on-scroll — o surgimento ACOMPANHA O SCROLL ===
   .reveal nasce ESCONDIDO (opacity:0). O IntersectionObserver em site.js
   adiciona `.in` quando o elemento entra no viewport — só então a animação
   roda. Above-the-fold: o observer dispara `.in` logo no load (anima na hora).
   Below-the-fold: `.in` entra ao ROLAR até o elemento — é o que dá a sensação
   de "a página surgindo conforme você desce".
   Sem flash: a base opacity:0 vem do site.css (render-blocking, aplicada ANTES
   do 1º paint) e o keyframe `from` casa com ela — não há snap.
   Sem JS: o <noscript> em partials/seo.php revela tudo. */
@keyframes evoRevealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.reveal.in {
  animation: evoRevealUp .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--reveal-delay, 0ms); /* stagger setado pelo site.js (cap 80ms) */
}


/* === Selo Meta Partner — animação de entrada UNIFICADA ===
   Cobre as 3 variantes do badge "Meta Business Partners" presentes no site:
     - .hero-meta-badge       (home — index.php)
     - .meta-badge-inline     (módulos — evo-crm, evo-ia, evo-fluxos, etc.)
     - .qs-meta-badge         (quem-somos)
   Entrada SUAVE de BAIXO pra CIMA. SEM mexer no tamanho (sem scale, sem
   rotação, sem deslocamento lateral). Curva ease-out longa pra parecer
   "flutuante". 1.1s pra dar respiro — quanto mais lento, mais suave. */
@keyframes metaBadgeFloatUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Selos seguem a MESMA lógica .in (base .reveal já os esconde), só com curva
   mais lenta/flutuante. `both` mantém visível depois de animar. */
.hero-meta-badge.reveal.in,
.meta-badge-inline.reveal.in,
.qs-meta-badge.reveal.in {
  animation: metaBadgeFloatUp 1.1s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Reduced-motion: mostra tudo IMEDIATAMENTE, sem animação nem deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.in,
  .hero-meta-badge.reveal.in,
  .meta-badge-inline.reveal.in,
  .qs-meta-badge.reveal.in { animation: none; }
}

/* === Tilt 3D — desliga transitions de transform durante o hover ativo ===
   O attachTileTilt em site.js atualiza `el.style.transform` a cada frame
   no mousemove. Se o CSS do card tem `transition: transform .35s`, o
   transform é INTERPOLADO suavemente em 350ms — resultado: o card NÃO
   acompanha o cursor (parece travado ou que o tilt não funciona).

   - .is-tilting: adicionada no mouseenter, mantida durante o hover
   - .is-tilt-easing: adicionada no mouseleave, MANTIDA até o LERP zerar
     todos os valores (impede que a transition CSS se ative enquanto o
     JS ainda está animando — senão o card trava na última posição). */
[data-tilt].is-tilting,
[data-tilt].is-tilt-easing {
  transition: none !important;
}

/* Subtle grid bg helper */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(30, 32, 38, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 32, 38, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Footer */
.site-footer {
  background: var(--evo-dark);
  color: rgba(255,255,255,0.78);
  padding: 88px 0 40px;
}
.site-footer h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.site-footer a {
  display: block;
  padding: 7px 0;
  font-size: 14.5px;
  color: rgba(255,255,255,0.78);
  transition: color .2s;
}
.site-footer a:hover { color: var(--evo-green); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Social pills + localização — adicionadas na coluna do brand */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 14px;
}
.footer-social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color .2s, color .2s, transform .2s;
}
.footer-social a:hover {
  background: var(--evo-green);
  color: #fff;
  transform: translateY(-2px);
}
.footer-social a svg { width: 16px; height: 16px; }
.footer-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  padding: 0;
}
.footer-location svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Logo do rodapé = easter egg (leva pra /logo-3d). Sobrescreve o
   `.site-footer a { display: block; padding: 7px 0 }` pra logo não ganhar
   respiro extra. Hover quase imperceptível: quem procura, acha. */
.footer-logo-egg,
.site-footer a.footer-logo-egg {
  display: inline-block;
  width: fit-content;
  margin-bottom: 18px;
  padding: 0;
  opacity: .95;
  transition: opacity .25s ease;
}
.site-footer a.footer-logo-egg:hover { opacity: 1; }
.site-footer a.footer-logo-egg:focus-visible { outline: 2px solid var(--evo-green); outline-offset: 6px; border-radius: 4px; }
/* Badge Meta Business Partner — pill branca pro contraste no footer escuro.
   Sobrescreve `.site-footer a { display: block }` com inline-flex explícito. */
.footer-meta-badge,
.site-footer a.footer-meta-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.site-footer a.footer-meta-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}
.footer-meta-badge img {
  height: 40px;
  width: auto;
  display: block;
}
/* ============================================================
   SELO META PARTNER INLINE — pill branca com a logo oficial Meta
   Business Partner. Aponta sempre pra /parceiro-meta.
     <a href="/parceiro-meta" class="meta-badge-inline">
       <img src="assets/social/meta-partner.png" alt="Meta Business Partner">
     </a>
   Borda quase imperceptível, sombra suave, lift no hover.
   ============================================================ */
.meta-badge-inline {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.08);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 22, 38, 0.06);
  /* Pré-requisitos do tilt 3D — site.js attachTileTilt() escreve a transform
     em runtime; preserve-3d garante que o translateZ do img produza profundidade.
     transition cobre a sombra; transform o JS controla. */
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .35s ease, border-color .25s ease;
  margin-bottom: 20px;
}
.meta-badge-inline.is-tilting,
.meta-badge-inline:hover {
  box-shadow: 0 10px 28px rgba(15, 22, 38, 0.12);
  border-color: rgba(24, 119, 242, 0.3);
}
.meta-badge-inline img {
  height: 44px !important;
  width: auto !important;
  max-width: 280px;
  display: block;
  transform: translateZ(8px);     /* relevo 3D — logo pula pra frente no tilt */
}
/* Mobile — o selo de 44px ficava enorme na tela estreita. Reduz a altura
   (largura acompanha pelo aspect ratio). !important pra vencer a base acima. */
@media (max-width: 600px) {
  .meta-badge-inline img { height: 32px !important; max-width: 210px !important; }
}

/* ============================================================
   WHATSAPP FAB — botão flutuante global, identidade EvoTalks
   Injetado via assets/js/whatsapp-fab.js. Card branco limpo,
   header verde sutil, CTA verde. Tilt 3D suave (3-4° max) ligado
   só depois da animação de abertura terminar.
   ============================================================ */
.evo-wa-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  font-family: 'Poppins', system-ui, sans-serif;
  /* Pop-in: começa em scale(0); .is-loaded entra suave depois do load */
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.45, .64, 1);
}
.evo-wa-fab.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* ===== Botão fechado — só o logo PNG natural (SEM bola/background) ===== */
.evo-wa-btn {
  width: 64px; height: 64px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;   /* ancora o badge de notificação */
  filter: drop-shadow(0 12px 22px rgba(27, 191, 93, 0.35)) drop-shadow(0 4px 8px rgba(15, 23, 42, 0.12));
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter .35s ease, opacity .3s ease, transform .35s cubic-bezier(.34, 1.45, .64, 1);
}
.evo-wa-btn:hover,
.evo-wa-btn.is-tilting {
  filter: drop-shadow(0 18px 30px rgba(27, 191, 93, 0.45)) drop-shadow(0 8px 14px rgba(15, 23, 42, 0.16));
}
/* Logo do botão — PNG/SVG natural, sem filter, sem mask. */
.evo-wa-btn-logo {
  width: 64px; height: 64px;
  display: block;
  transform: translateZ(6px);
}

/* ===== Badge de notificação "1" — surge depois de uns segundos ===== */
.evo-wa-badge {
  position: absolute;
  top: 0; right: 0;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ea3934;          /* vermelho da marca */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(234, 57, 52, 0.45);
  transform: translateZ(10px) scale(0);   /* escondido por padrão */
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: transform .4s cubic-bezier(.34, 1.6, .64, 1), opacity .3s ease;
}
.evo-wa-fab.has-notif .evo-wa-badge {
  transform: translateZ(10px) scale(1);    /* pop-in com bounce */
  opacity: 1;
}

/* ===== Balançadinha (nudge) — chama atenção pro botão, em loop ===== */
@keyframes evoWaWiggle {
  0%, 100% { transform: rotate(0deg); }
  12%      { transform: rotate(-13deg); }
  26%      { transform: rotate(10deg); }
  40%      { transform: rotate(-7deg); }
  54%      { transform: rotate(5deg); }
  68%      { transform: rotate(-3deg); }
  82%      { transform: rotate(1deg); }
}
.evo-wa-fab.is-nudge .evo-wa-btn {
  animation: evoWaWiggle .85s cubic-bezier(.36, .07, .19, .97) both;
  transform-origin: 50% 60%;
}

/* ===== Painel expandido =====
   Usa CSS vars (--wa-rx/--wa-ry) pra rotação 3D — assim o JS do tilt não
   conflita com o scale que controla open/close. Transform tem MESMA estrutura
   nos 2 estados (perspective + rotateX/Y + scale + translateY) — só os valores
   mudam, garantindo interpolação suave. */
.evo-wa-panel {
  --wa-rx: 0deg;
  --wa-ry: 0deg;
  position: absolute;
  bottom: 0; right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid var(--evo-border-soft, #eef1f6);
  border-radius: 22px;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.16),
    0 8px 18px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transform-origin: bottom right;
  /* Estado fechado — invisível e bem pequeno (sai do tamanho do botão) */
  transform: perspective(1100px) rotateX(var(--wa-rx)) rotateY(var(--wa-ry)) scale(0.04) translateY(0);
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition:
    transform .6s cubic-bezier(.34, 1.40, .64, 1),
    opacity .45s ease,
    box-shadow .35s ease;
}
.evo-wa-panel.is-tilting {
  box-shadow:
    0 32px 70px rgba(15, 23, 42, 0.22),
    0 12px 26px rgba(15, 23, 42, 0.12);
}

/* Estados open/closed */
.evo-wa-fab[data-state="open"] .evo-wa-btn {
  opacity: 0;
  transform: scale(0) !important;
  pointer-events: none;
}
.evo-wa-fab[data-state="open"] .evo-wa-panel {
  transform: perspective(1100px) rotateX(var(--wa-rx)) rotateY(var(--wa-ry)) scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ===== Header branco — identidade EvoTalks limpa ===== */
.evo-wa-head {
  background: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--evo-text, #1e2026);
  border-bottom: 1px solid var(--evo-border-soft, #eef1f6);
}
/* Logo WhatsApp natural — sem mask, sem filter */
.evo-wa-head-logo {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: block;
  transform: translateZ(6px);
}
.evo-wa-head-logo img {
  width: 100%; height: 100%;
  display: block;
}
.evo-wa-head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateZ(4px);
}
.evo-wa-head-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--evo-text, #1e2026);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.evo-wa-head-status {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--evo-text-mute, #8a8f99);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.evo-wa-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--evo-green, #1bbf5d);
  box-shadow: 0 0 0 0 rgba(27, 191, 93, 0.5);
  animation: evoWaDot 2s ease-in-out infinite;
}
@keyframes evoWaDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 191, 93, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(27, 191, 93, 0); }
}
.evo-wa-close {
  background: var(--evo-off-white, #f4f6f9);
  border: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--evo-text-mute, #8a8f99);
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  transform: translateZ(4px);
}
.evo-wa-close:hover {
  background: var(--evo-border-soft, #eef1f6);
  color: var(--evo-text, #1e2026);
  transform: translateZ(4px) scale(1.08);
}

/* ===== Body off-white (sutil cor EvoTalks, não branco clínico) ===== */
.evo-wa-body {
  padding: 22px 20px 22px;
  background: var(--evo-off-white, #f7f8fa);
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Perspective menor = rotateX mais pronunciado (efeito mais dramático) */
  perspective: 500px;
  perspective-origin: 50% 0%;
}

/* === Wrapper externo — tilt 3D do cursor (INSTANTÂNEO, sem transition) ===
   softTilt JS escreve nas vars --msg-rx/--msg-ry. SEM transition no transform
   aqui — o LERP do softTilt já suaviza a 60fps. Se tivesse transition, o
   browser interpolaria sobre a interpolação e o tilt ficaria lento/laggy. */
.evo-wa-msg {
  --msg-rx: 0deg;
  --msg-ry: 0deg;
  align-self: flex-start;
  max-width: 92%;
  position: relative;
  transform: perspective(700px) rotateX(var(--msg-rx)) rotateY(var(--msg-ry));
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
  /* NENHUMA transition no transform — softTilt LERP é responsável */
}

/* === Inner bubble — visual + animação de chegada (junto com o card) === */
.evo-wa-msg-bubble {
  background: #fff;
  border: 1px solid var(--evo-border-soft, #eef1f6);
  border-radius: 4px 16px 16px 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  /* Chegada: invisível, vindo de cima, girado pra trás */
  opacity: 0;
  transform: translateY(-18px) rotateX(-50deg) scale(0.92);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition:
    opacity .45s cubic-bezier(.16, 1, .3, 1) .12s,
    transform .55s cubic-bezier(.34, 1.55, .64, 1) .12s,
    box-shadow .3s ease;
}
/* Sombra mais funda enquanto o tilt do cursor está ativo (= card flutuando) */
.evo-wa-msg.is-tilting .evo-wa-msg-bubble {
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15);
}
/* Inner bubble revela quando o painel está aberto */
.evo-wa-fab[data-state="open"] .evo-wa-msg-bubble {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
}
.evo-wa-msg p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--evo-text, #1e2026);
}
.evo-wa-msg strong {
  color: var(--evo-green-deep, #16a34a);
  font-weight: 700;
}
.evo-wa-msg-time {
  display: block;
  font-size: 10.5px;
  color: var(--evo-text-mute, #8a8f99);
  text-align: right;
  margin-top: 4px;
}

/* === Wrapper externo do CTA — magnético + tilt (instantâneo via LERP JS) === */
.evo-wa-cta-wrap {
  --cta-rx: 0deg;
  --cta-ry: 0deg;
  --cta-mx: 0px;
  --cta-my: 0px;
  align-self: flex-end;
  display: inline-block;
  transform: perspective(600px) translate(var(--cta-mx), var(--cta-my)) rotateX(var(--cta-rx)) rotateY(var(--cta-ry));
  transform-style: preserve-3d;
  will-change: transform;
  /* Sem transition no transform — cursor effects são instantaneous + LERPed */
}

/* === CTA inner (link) — visual + animação de chegada === */
.evo-wa-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--evo-green, #1bbf5d);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 22px rgba(27, 191, 93, 0.32);
  opacity: 0;
  transform: rotateX(-35deg) translateY(14px) scale(0.88);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  transition:
    background .25s ease,
    box-shadow .25s ease,
    opacity .45s ease .22s,
    transform .6s cubic-bezier(.34, 1.55, .64, 1) .22s;
}
.evo-wa-fab[data-state="open"] .evo-wa-cta {
  opacity: 1;
  transform: rotateX(0) translateY(0) scale(1);
}
.evo-wa-cta:hover {
  background: var(--evo-green-deep, #16a34a);
  box-shadow: 0 18px 36px rgba(27, 191, 93, 0.46);
}
.evo-wa-cta .ico {
  background-color: #fff;
  transition: transform .2s ease;
}
.evo-wa-cta:hover .ico { transform: translateX(3px); }

/* Respostas rápidas: chips que abrem o WhatsApp já com a mensagem certa da página */
.evo-wa-quick { display: flex; flex-direction: column; gap: 8px; }
.evo-wa-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 15px; background: #fff;
  border: 1px solid var(--evo-border-soft, #eef1f6); border-radius: 12px;
  color: var(--evo-text, #1e2026); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  position: relative; overflow: hidden; opacity: 0;
  /* tilt do cursor (--chip-rx/ry, JS) + balanço (--chip-sway) compostos numa transform só.
     Sem transition no transform: o LERP do softTilt já suaviza a 60fps. */
  --chip-rx: 0deg; --chip-ry: 0deg;
  transform: perspective(650px) rotate(var(--chip-sway, 0deg)) rotateX(var(--chip-rx, 0deg)) rotateY(var(--chip-ry, 0deg));
  will-change: transform;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.evo-wa-chip:hover {
  border-color: #bfe8cf; background: #f3fbf6;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.evo-wa-chip-ic { opacity: .75; transition: transform .18s ease, opacity .18s ease; }
.evo-wa-chip:hover .evo-wa-chip-ic { transform: translateX(3px); opacity: 1; }
/* Chegada em cascata quando o painel abre (só opacidade, pra não brigar com o hover) */
.evo-wa-fab[data-state="open"] .evo-wa-chip { animation: evoWaChipIn .4s ease both; }
.evo-wa-fab[data-state="open"] .evo-wa-chip:nth-child(1) { animation-delay: .06s; }
.evo-wa-fab[data-state="open"] .evo-wa-chip:nth-child(2) { animation-delay: .13s; }
.evo-wa-fab[data-state="open"] .evo-wa-chip:nth-child(3) { animation-delay: .20s; }
@keyframes evoWaChipIn { from { opacity: 0; } to { opacity: 1; } }

/* Chip primário (demonstração): verde como o "Abrir chat" + leve balanço pra chamar atenção */
.evo-wa-chip--primary {
  background: var(--evo-green, #1bbf5d);
  border-color: var(--evo-green, #1bbf5d);
  color: #fff;
  box-shadow: 0 8px 18px rgba(27, 191, 93, 0.30);
}
.evo-wa-chip--primary:hover {
  background: var(--evo-green-deep, #16a34a);
  border-color: var(--evo-green-deep, #16a34a);
  box-shadow: 0 12px 24px rgba(27, 191, 93, 0.42);
}
.evo-wa-chip--primary .evo-wa-chip-ic { background-color: #fff !important; opacity: .95; }
.evo-wa-fab[data-state="open"] .evo-wa-chip--primary {
  animation: evoWaChipIn .4s ease both, evoWaChipSway 3.4s ease-in-out 1.2s infinite;
}
@property --chip-sway { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes evoWaChipSway {
  0%, 78%, 100% { --chip-sway: 0deg; }
  83% { --chip-sway: -1.6deg; }
  88% { --chip-sway: 1.6deg; }
  93% { --chip-sway: -1deg; }
}

/* Ripple (micro-interação de clique) */
.evo-wa-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255, 255, 255, 0.5); pointer-events: none;
  animation: evoWaRipple .6s ease-out forwards;
}
.evo-wa-chip .evo-wa-ripple { background: rgba(27, 191, 93, 0.18); }
@keyframes evoWaRipple { to { transform: scale(1); opacity: 0; } }

/* Balão-teaser: sai do botão de vez em quando incentivando (some sozinho) */
.evo-wa-teaser {
  position: absolute; right: 74px; bottom: 13px;
  width: max-content; max-width: 250px; background: #fff;
  border: 1px solid var(--evo-border-soft, #eef1f6); border-radius: 14px;
  padding: 12px 32px 12px 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  font-size: 13px; line-height: 1.4; color: var(--evo-text, #1e2026);
  cursor: pointer; text-align: left;
  opacity: 0; transform: translateX(12px) scale(0.96); transform-origin: right center;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
.evo-wa-teaser.is-show { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.evo-wa-teaser::after {
  content: ''; position: absolute; right: -6px; bottom: 15px;
  width: 12px; height: 12px; background: #fff;
  border-right: 1px solid var(--evo-border-soft, #eef1f6);
  border-top: 1px solid var(--evo-border-soft, #eef1f6);
  transform: rotate(45deg);
}
.evo-wa-teaser-close {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; border: 0; background: transparent; padding: 0;
  cursor: pointer; color: var(--evo-text-mute, #8a8f99);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.evo-wa-teaser-close:hover { color: var(--evo-text, #1e2026); background: rgba(15, 23, 42, 0.05); }
@media (max-width: 480px) { .evo-wa-teaser { display: none; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .evo-wa-fab,
  .evo-wa-btn,
  .evo-wa-panel,
  .evo-wa-msg,
  .evo-wa-cta,
  .evo-wa-close,
  .evo-wa-badge,
  .evo-wa-dot,
  .evo-wa-chip,
  .evo-wa-teaser { transition: none !important; animation: none !important; }
  .evo-wa-chip { opacity: 1 !important; }
}

/* Mobile */
@media (max-width: 480px) {
  .evo-wa-fab { bottom: 16px; right: 16px; }
  .evo-wa-panel { width: calc(100vw - 32px); max-width: 360px; }
  .evo-wa-btn { width: 60px; height: 60px; }
  /* O logo (a própria bolinha verde) precisa PREENCHER o botão. Estava 30px
     dentro de um botão 58px → ícone minúsculo no mobile. Agora acompanha. */
  .evo-wa-btn-logo { width: 60px; height: 60px; }
}

/* ============================================================
   BOTAO FLUTUANTE DE WHATSAPP, COM PORTEIRO DE NOME E NUMERO
   O canto do site abre o WhatsApp. Antes de abrir a conversa, pede
   nome e numero: quem clica ali esta interessado, e sem isso a
   pessoa desaparece se nao chegar a mandar a mensagem. Com nome e
   numero, o lead fica registrado de qualquer jeito.
   Quem monta os elementos e o assets/js/whatsapp-lead.js.
   O CSS do .evo-wa-* continua acima, inerte, do FAB antigo com
   cartao: fica de referencia e permite voltar aquele desenho.
   ============================================================ */
.evo-wl-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  font-family: 'Poppins', system-ui, sans-serif;
  /* A perspectiva vive AQUI, no wrapper que nao se move, e quem gira e o botao
     lá dentro. Perspectiva no proprio elemento que gira daria uma projecao que
     muda junto com ele. */
  perspective: 620px;
  /* Pop-in: nasce em scale(0) e o .is-loaded entra depois do load */
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.45, .64, 1);
}
.evo-wl-fab.is-loaded { opacity: 1; transform: scale(1); }
/* Cartao aberto: o botao nao fica ali embaixo, porque ele VIROU o cartao.
   Cresce um pouco enquanto some, e a origem bottom right herdada faz esse
   crescimento apontar pra cima e pra esquerda, que e onde a janelinha nasce.
   Sem isso o mesmo bloquinho verde aparece duas vezes na tela e a impressao
   de que uma coisa se transformou na outra se perde. Depende de .is-loaded
   vir ANTES daqui: as duas regras tem a mesma especificidade. */
.evo-wl-fab.is-virou {
  opacity: 0;
  transform: scale(1.45);
  pointer-events: none;
  transition: opacity .18s ease-out, transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* O bloquinho verde, que e o proprio logo do canal em assets/canais: SVG
   natural, sem mask e sem filter de cor, do mesmo jeito que o FAB antigo
   fazia. A sombra vem de drop-shadow no verde da marca, e nao de box-shadow,
   porque o desenho tem canto arredondado proprio e box-shadow vazaria nos
   cantos. */
.evo-wl-btn {
  display: block;
  position: relative;   /* ancora o badge de nao lida */
  width: 64px; height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 12px 22px rgba(27, 191, 93, .35)) drop-shadow(0 4px 8px rgba(15, 23, 42, .12));
  /* Um transform so, montado por variaveis que o JS escreve: o ima empurra o
     translate, o tilt gira, e o clique aperta a escala. Tres regras separadas
     mexendo em transform se cancelariam, porque a ultima a valer apaga as
     outras.
     A transicao e curta de proposito. Longa, o botao chega no lugar onde o
     cursor ESTAVA, e a sensacao de ima vira atraso. */
  transform: translate3d(var(--wl-mx, 0px), var(--wl-my, 0px), 0)
             rotateX(var(--wl-rx, 0deg)) rotateY(var(--wl-ry, 0deg))
             scale(var(--wl-esc, 1));
  transition: filter .35s ease, transform .16s ease-out;
}
.evo-wl-btn:hover {
  filter: drop-shadow(0 18px 30px rgba(27, 191, 93, .45)) drop-shadow(0 8px 14px rgba(15, 23, 42, .16));
}
.evo-wl-btn:active { --wl-esc: .96; }
.evo-wl-logo { width: 64px; height: 64px; display: block; }

/* ── Chamada de atencao: "1", balancada e balao ────────────────────
   Uns segundos depois do load o botao ganha o "1" de mensagem nao lida, da
   uma balancada e abre um balao com uma frase da pagina em que a pessoa
   esta. O balao sai sozinho em poucos segundos e dali pra frente fica so o
   botao com o "1", balancando de tempo em tempo.
   Quem toca a conversa (ou dispensa no X) nao ve mais nada disso na sessao:
   o "1" quer dizer mensagem nao lida, e insistir depois que a pessoa olhou
   e barulho. */
.evo-wl-badge {
  position: absolute;
  top: 0; right: 0;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--r-pill, 999px);
  background: #ea3934;                 /* o vermelho da marca */
  color: #fff;
  font: 700 12px/17px 'Poppins', system-ui, sans-serif;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(234, 57, 52, .45);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: transform .4s cubic-bezier(.34, 1.6, .64, 1), opacity .3s ease;
}
.evo-wl-fab.has-notif .evo-wl-badge { opacity: 1; transform: scale(1); }

/* Keyframes proprio, e nao o evoWaWiggle la de cima: aquele bloco e do FAB
   antigo, guardado so como referencia, e apagar ele um dia nao pode levar
   esta animacao junto sem ninguem perceber. */
@keyframes evoWlBalanco {
  0%, 100% { transform: rotate(0deg); }
  12%      { transform: rotate(-13deg); }
  26%      { transform: rotate(10deg); }
  40%      { transform: rotate(-7deg); }
  54%      { transform: rotate(5deg); }
  68%      { transform: rotate(-3deg); }
  82%      { transform: rotate(1deg); }
}
.evo-wl-fab.is-balanco .evo-wl-btn {
  animation: evoWlBalanco .85s cubic-bezier(.36, .07, .19, .97) both;
  transform-origin: 50% 60%;
}

/* O balao sai do lado esquerdo do botao, com o bico apontando pra ele. O bico
   e um quadrado girado com duas bordas, e nao um triangulo desenhado.
   O X divide a linha com o texto em vez de flutuar em cima dele. Antes ele era
   absoluto e o balao precisava de 32px de folga na direita contra 16 na
   esquerda pra ele nao sentar na frase: com folga desigual a frase fica torta
   dentro do balao. Agora as duas folgas sao 14, e cada um tem o seu lugar. */
.evo-wl-teaser {
  position: absolute;
  right: 74px; bottom: 13px;
  /* 220 nao e chute: com 250 as frases quebravam deixando UMA palavra de umas
     tres letras sozinha na segunda linha, e o balao ficava largo com um vazio
     grande embaixo. Medido no navegador com as frases reais, 220 faz as duas
     linhas encherem entre 88% e 99% da coluna de texto. */
  width: max-content; max-width: 220px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--evo-border-soft, #eef1f6);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  font-size: 13px; line-height: 1.4;
  color: var(--evo-text, #1e2026);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateX(12px) scale(.96);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
.evo-wl-teaser.is-show { opacity: 1; transform: none; pointer-events: auto; }
.evo-wl-teaser::after {
  content: "";
  position: absolute;
  right: -6px; bottom: 15px;
  width: 12px; height: 12px;
  background: #fff;
  border-right: 1px solid var(--evo-border-soft, #eef1f6);
  border-top: 1px solid var(--evo-border-soft, #eef1f6);
  transform: rotate(45deg);
}
/* A frase ocupa a coluna que sobra, e o min-width: 0 e o que deixa ela
   quebrar em vez de esticar o balao alem do max-width. */
.evo-wl-teaser-txt { flex: 1; min-width: 0; }
.evo-wl-teaser-x {
  flex: none;
  width: 20px; height: 20px;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
}
.evo-wl-teaser-x:hover { background: rgba(15, 23, 42, .05); }
.evo-wl-teaser-x::before {
  content: "";
  width: 10px; height: 10px;
  background-color: var(--evo-text-mute, #8a93a0);
  -webkit-mask: url(../icons/iconixto_solid_close.svg) center/contain no-repeat;
          mask: url(../icons/iconixto_solid_close.svg) center/contain no-repeat;
}
.evo-wl-teaser-x:hover::before { background-color: var(--evo-text, #1e2026); }

/* ── O cartao, com a cara do WhatsApp ─────────────────────────────
   Reaproveita o desenho da tela do evento (assets/css/febratex.css): o bege
   reconhecivel, o cabecalho verde, a pilula de data, a bolha com a quina viva
   do lado de quem fala, e o bloco de resposta flutuando dentro da conversa.
   O papel de parede e o NOSSO, montado com os icones do iconixto que o site
   ja licencia (assets/img/fb-padrao.svg): copiar a arte da Meta seria usar
   obra de terceiro.
   O que ficou de fora de proposito foi a luz que atravessa os campos. Lá ela
   diz "responde aqui" numa tela que e a pagina inteira; aqui a pessoa acabou
   de clicar no botao pra abrir isto, a intencao ja esta dada, e animacao em
   laco num cartao flutuante vira enfeite piscando. */
/* A janelinha CRESCE do botao, em vez de aparecer do lado dele: a escala e o
   circulo de recorte partem os dois do CENTRO do bloquinho verde. O cartao
   termina na MESMA linha do botao (bottom 24 nos dois), entao esse centro cai
   32px pra dentro do canto inferior direito dele, nos dois eixos: botao de 64
   em bottom/right 24 tem o centro a 56px das bordas da tela, e o canto do
   cartao esta a 24. Mexer na posicao de um dos dois sem mexer nestes numeros
   desalinha o crescimento, e por isso eles sao variaveis: o mobile so troca os
   valores.
   O cartao fica em cima do botao, e nao acima dele, porque o botao sai de cena
   quando o cartao entra: sao a mesma coisa, e a coisa nao muda de lugar.
   O fundo verde e o mesmo do botao de proposito: nos primeiros quadros o que
   cresce ainda parece o bloquinho, e o conteudo aparece dentro dele depois.
   A curva nao tem repique: o pedido era surgir mais suave, e overshoot num
   cartao desse tamanho da um solavanco no fim. */
.evo-wl-form {
  --wl-org-x: calc(100% - 32px);
  --wl-org-y: calc(100% - 32px);
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9001;
  width: min(344px, calc(100vw - 40px));
  box-sizing: border-box;
  border-radius: 18px;
  overflow: hidden;
  background: var(--evo-green-deep, #16a34a);
  /* Sombra aqui e legitima: e o unico plano que SOBE da pagina.
     O clip-path recorta a sombra junto, entao ela aparece conforme a forma
     cresce, sem o retangulo inteiro se anunciar antes do cartao. */
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24), 0 6px 16px rgba(15, 23, 42, .1);
  font-family: 'Poppins', system-ui, sans-serif;
  opacity: 0;
  transform: scale(.84);
  transform-origin: var(--wl-org-x) var(--wl-org-y);
  /* O raio em % resolve contra a diagonal media do cartao (~390px aqui). Com
     a origem dentro do cartao, o canto mais longe dela fica a 130% disso e a
     sombra estica ate ~147%, entao 155% e o quanto basta pra revelar tudo.
     Botar 250% por seguranca sairia caro: o cartao apareceria inteiro na
     metade do tempo e o resto da animacao empurraria um circulo invisivel.
     A curva e ease-out puro, sem repique: as curvas tipo quint entregam
     metade do caminho em 15% do tempo, o circulo abre antes de a pessoa ver, e
     o crescimento se perde. */
  clip-path: circle(0% at var(--wl-org-x) var(--wl-org-y));
  pointer-events: none;
  /* Esta transicao e a de FECHAR, e nao a de abrir: o navegador usa a regra do
     estado pra onde o elemento VAI, e ao fechar ele volta pra ca. Encolhe um
     pouco mais rapido do que abre, e a opacidade sai atrasada e devagar pra
     dar tempo de VER o encolhimento: apagando junto, o cartao virava um
     piscar no lugar e o caminho de volta pro botao se perdia. Nada de ease-in
     aqui, que quase nao anda na primeira metade e gastaria justo a parte em
     que o cartao ainda esta visivel. */
  transition: opacity .24s ease .07s,
              transform .3s ease,
              clip-path .3s ease;
}
.evo-wl-form.is-open {
  opacity: 1;
  transform: scale(1);
  clip-path: circle(155% at var(--wl-org-x) var(--wl-org-y));
  pointer-events: auto;
  /* A de ABRIR. A opacidade sobe quase seca de proposito: rampeando junto com
     a forma, os primeiros quadros sao um verde translucido lavando a pagina em
     vez de um bloquinho opaco crescendo. */
  transition: opacity .12s ease,
              transform .42s ease-out,
              clip-path .42s ease-out;
}
/* O conteudo entra depois da forma, senao o cabecalho e a conversa aparecem
   espremidos no meio do crescimento. Na saida nao tem atraso: o conteudo
   apaga junto com o cartao encolhendo. */
.evo-wl-topo, .evo-wl-chat { opacity: 0; transition: opacity .16s ease; }
.evo-wl-form.is-open .evo-wl-topo,
.evo-wl-form.is-open .evo-wl-chat { opacity: 1; transition: opacity .24s ease .12s; }

/* Depois que o cartao acaba de crescer, a conversa CHEGA: a pilula de data,
   cada bolha e por fim o bloco de resposta, um atras do outro, subindo. O
   primeiro entra aos 280ms, que e quando o crescimento ja revelou o cartao
   inteiro, entao ninguem aparece espremido no meio do caminho.
   O atraso vem do nth-child, ou seja, a ordem na marcacao E a ordem na tela:
   mexer na ordem do HTML muda a entrada. Sao cinco degraus porque a conversa
   tem quatro pecas hoje e sobra um pra proxima. */
.evo-wl-chat > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .26s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}
.evo-wl-form.is-open .evo-wl-chat > * { opacity: 1; transform: none; }
.evo-wl-form.is-open .evo-wl-chat > :nth-child(1) { transition-delay: .28s; }
.evo-wl-form.is-open .evo-wl-chat > :nth-child(2) { transition-delay: .38s; }
.evo-wl-form.is-open .evo-wl-chat > :nth-child(3) { transition-delay: .48s; }
.evo-wl-form.is-open .evo-wl-chat > :nth-child(4) { transition-delay: .60s; }
.evo-wl-form.is-open .evo-wl-chat > :nth-child(5) { transition-delay: .70s; }

/* Cabecalho de contato. Plano fixo, entao sem sombra. */
.evo-wl-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 11px 14px;
  background: var(--evo-green-deep, #16a34a);
  color: #fff;
}
.evo-wl-retrato {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
/* A marca e mais alta que larga: quem manda e a altura, a largura vai automatica. */
.evo-wl-retrato img { display: block; height: 23px; width: auto; }
.evo-wl-quem { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.evo-wl-quem b {
  font-size: 15.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evo-wl-quem span {
  font-size: 12px; font-weight: 400; line-height: 16px;
  color: rgba(255, 255, 255, .82);
}
.evo-wl-fechar {
  width: 30px; height: 30px; flex: none;
  border: 0; padding: 0; margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  cursor: pointer;
  display: grid; place-items: center;
}
.evo-wl-fechar:hover { background: rgba(255, 255, 255, .26); }
.evo-wl-fechar::before {
  content: "";
  width: 11px; height: 11px;
  background-color: #fff;
  /* url relativa ao ARQUIVO css, que mora em assets/css/ */
  -webkit-mask: url(../icons/iconixto_solid_close.svg) center/contain no-repeat;
          mask: url(../icons/iconixto_solid_close.svg) center/contain no-repeat;
}

/* A conversa, sobre o bege com a textura. */
.evo-wl-chat {
  background-color: #e9e5de;
  background-image: url(../img/fb-padrao.svg);
  background-repeat: repeat;
  background-size: 620px;
  padding: 13px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evo-wl-dia {
  align-self: center;
  margin: 0 0 4px;
  font-size: 11.5px; font-weight: 500;
  color: var(--evo-text-soft, #4b5563);
  background: #fff;
  border-radius: var(--r-pill, 999px);
  padding: 4px 12px;
}
/* A quina viva do lado de quem fala e o bico do balao, sem desenhar triangulo. */
.evo-wl-b {
  align-self: flex-start;
  max-width: 88%;
  background: #fff;
  border-radius: 9px;
  border-top-left-radius: 2px;
  padding: 7px 10px 6px;
  font-size: 14px;
  line-height: 1.42;
  color: var(--evo-text, #1e2026);
  overflow-wrap: anywhere;
}
/* Segura o float da hora dentro do balao. */
.evo-wl-b::after { content: ""; display: block; clear: both; }
.evo-wl-b .hora {
  float: right;
  margin: 5px -1px -1px 8px;
  font-size: 10.5px; line-height: 1;
  color: var(--evo-text-mute, #8a93a0);
  font-variant-numeric: tabular-nums;
}

/* O bloco de resposta e o proximo item da conversa, e nao uma barra no rodape. */
.evo-wl-acao {
  align-self: stretch;
  margin: 6px 0 0;
  background: #fff;
  border-radius: 18px;
  padding: 13px;
  box-shadow: 0 8px 26px rgba(30, 32, 38, .13);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evo-wl-campo {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
  /* 16px e PISO: abaixo disso o Safari do iPhone da zoom ao focar e nao desfaz. */
  font-size: 16px;
  font-weight: 400;
  color: var(--evo-text, #1e2026);
  background: var(--evo-off-white, #f7f9f8);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill, 999px);
  padding: 11px 16px;
  min-height: 46px;
  transition: border-color .16s ease, background .16s ease;
}
.evo-wl-campo::placeholder { color: var(--evo-text-mute, #8a93a0); }
.evo-wl-campo:focus { outline: 0; background: #fff; border-color: var(--evo-green, #1bbf5d); }
/* Verde quando o campo esta VALIDO, e nao quando tem qualquer coisa dentro:
   telefone com cinco digitos tem conteudo e nao serve. */
.evo-wl-campo.is-ok { border-color: var(--evo-green, #1bbf5d); }
.evo-wl-campo.is-erro { border-color: #ea3934; background: #fff; }
.evo-wl-erro {
  margin: 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #ea3934;
}
/* Envelope PARADO do botao: e daqui que sai a perspectiva do tilt e a regua
   do ima. Mesma divisao do bloquinho do canto, e pelo mesmo motivo: quem mede
   nunca pode ser quem anda, senao o centro muda a cada quadro. */
.evo-wl-envolve { display: block; perspective: 620px; }
.evo-wl-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--r-pill, 999px);
  padding: 0 16px;
  min-height: 50px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  background: var(--evo-green, #1bbf5d);
  color: #fff;
  /* O MESMO transform composto do bloquinho do canto, com as mesmas variaveis:
     os dois botoes verdes respondem ao cursor igual. Os nomes podem repetir
     porque um nao e descendente do outro, e cada um recebe os seus no inline. */
  transform: translate3d(var(--wl-mx, 0px), var(--wl-my, 0px), 0)
             rotateX(var(--wl-rx, 0deg)) rotateY(var(--wl-ry, 0deg))
             scale(var(--wl-esc, 1));
  transition: background .16s ease, transform .16s ease-out;
}
.evo-wl-enviar:hover { background: var(--evo-green-deep, #16a34a); }
.evo-wl-enviar:active { --wl-esc: .985; }
/* O icone vai por mascara, como todo icone do site, pra herdar o currentColor
   do botao. Um img do logo colorido ficaria verde sobre verde. */
.evo-wl-enviar i {
  width: 19px; height: 19px; flex: none;
  background-color: currentColor;
  -webkit-mask: url(../icons/iconixto_solid_whatsapp.svg) center/contain no-repeat;
          mask: url(../icons/iconixto_solid_whatsapp.svg) center/contain no-repeat;
}

@media (max-width: 560px) {
  .evo-wl-fab { bottom: 16px; right: 16px; }
  .evo-wl-btn, .evo-wl-logo { width: 60px; height: 60px; }
  .evo-wl-teaser { right: 70px; }   /* botao 4px menor, balao 4px mais perto */
  /* Botao de 60 em bottom/right 16 tem o centro a 46px das bordas; o cartao
     para a 12 da direita e a 16 do fundo, logo 34px e 30px pra dentro. */
  .evo-wl-form {
    right: 12px; left: 12px; bottom: 16px; width: auto;
    --wl-org-x: calc(100% - 34px);
    --wl-org-y: calc(100% - 30px);
  }
}

/* Abaixo disso o balao nao cabe sem tapar a tela: fica so o botao com o "1". */
@media (max-width: 480px) {
  .evo-wl-teaser { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .evo-wl-fab, .evo-wl-btn, .evo-wl-form, .evo-wl-enviar, .evo-wl-campo,
  .evo-wl-topo, .evo-wl-chat, .evo-wl-chat > *, .evo-wl-badge,
  .evo-wl-teaser { transition: none; }
  .evo-wl-fab.is-balanco .evo-wl-btn { animation: none; }
  .evo-wl-fab { opacity: 1; transform: none; }
  /* Sem cascata e sem ima: a conversa aparece pronta e o botao fica parado.
     O JS tambem nem liga o ima nesse caso, isto aqui e o cinto. */
  .evo-wl-chat > * { opacity: 1; transform: none; }
  .evo-wl-btn, .evo-wl-enviar { transform: none; }
  /* Sem crescimento nenhum: o cartao so aparece, ja inteiro e com o conteudo
     visivel. */
  .evo-wl-form { transform: none; clip-path: none; }
  .evo-wl-topo, .evo-wl-chat { opacity: 1; }
}

/* ============================================================
   ANIMAÇÃO SUAVE PARA <details>/<summary> SITE-WIDE
   Site.js controla [open] e height em pixels. CSS só define a
   transição. Importante: details[open] precisa força o display do
   wrapper, sobrescrevendo a regra UA que esconde com display: none.
   ============================================================ */
.fx-details-wrap {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height .42s cubic-bezier(.16, 1, .3, 1),
    opacity .3s ease;
  /* Força o wrapper a SEMPRE renderizar, mesmo com <details> fechado.
     Sem isso, o browser aplica display:none e a animação não funciona. */
  display: block !important;
}
@media (prefers-reduced-motion: reduce) {
  .fx-details-wrap { transition: none; }
}

/* Footer bottom — 3 itens com flex space-between, gaps iguais entre eles.
   ANTES era grid 1fr auto 1fr que centralizava o copyright no viewport mas
   deixava o gap esquerda-centro pequeno e centro-direita grande (assimetria
   visual porque os textos têm tamanhos diferentes). space-between iguala
   os gaps entre itens — visualmente balanceado. */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a {
  display: inline;
  padding: 0;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
.footer-bottom a:hover { color: var(--evo-green); }
.footer-bottom .sep {
  margin: 0 6px;
  opacity: 0.4;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .site-footer { padding: 64px 0 32px; }
  /* Em viewports estreitos, 2 colunas comprime tudo — vira 1 coluna */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 36px;
  }
  /* Remove max-width: 36ch da descrição do brand (era inline no footer.php),
     deixa o texto usar a largura da coluna inteira */
  .site-footer .footer-grid > div:first-child p {
    max-width: none !important;
  }
}

/* Cursor glow (cursor-aware) */
.cursor-glow {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  /* mix-blend-mode: multiply REMOVIDO — forçava re-blend de TODO o conteúdo
     abaixo de uma área de 360x360 a cada movimento do cursor (60fps), criando
     stacking context isolado. Era o maior culpado por engasgo no scroll.
     Substituí pelo gradient com alpha levemente maior pra manter intensidade. */
  background: radial-gradient(circle, rgba(27, 191, 93, 0.22) 0%, rgba(27, 191, 93, 0) 65%);
  transform: translate(-50%, -50%);
  transition: opacity .4s;
  opacity: 0;
}
.cursor-glow.purple {
  background: radial-gradient(circle, rgba(124, 107, 245, 0.22) 0%, rgba(124, 107, 245, 0) 65%);
}
body.cursor-glow-on .cursor-glow { opacity: 1; }

/* Em dispositivos touch (sem cursor real seguindo), o glow é decorativo
   e desnecessário. Em tela 360px, um glow de 360px ocupa todo o viewport
   e pode até causar overflow. Desabilitar pra hover-none. */
@media (hover: none) {
  .cursor-glow { display: none; }
}

/* Number animator */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Helpers */
.text-center { text-align: center; }
.text-mute { color: var(--evo-text-soft); }
.divider { height: 1px; background: var(--evo-border-soft); border: 0; margin: 0; }

/* SVG icon mask — pinta qualquer SVG monocromático com a cor atual.
   Uso (preferido — mask shorthand inline pra evitar quirks de var() com mask):
       <i class="ico" style="mask:url(assets/icons/foo.svg) center/contain no-repeat;
                              -webkit-mask:url(assets/icons/foo.svg) center/contain no-repeat;
                              width:20px;height:20px"></i>
   Variante legada com --ico ainda funciona (back-compat). */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  /* Fallback baseado em --ico (se mask shorthand não estiver inline) */
  -webkit-mask-image: var(--ico);
  mask-image: var(--ico);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ===================================================================
   ANTES/DEPOIS — sistema de "pares de transformação"
   Substitui o velho layout de 2 colunas (uma lista cada) por CARDS
   INDIVIDUAIS por par, mostrando "problema → solução" lado a lado
   no desktop ou empilhados verticalmente no mobile dentro de UM card.
   Cada par é uma micro-story visual com indicador de transformação.
   =================================================================== */
.ad-pairs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.ad-pair {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  background: #fff;
  border: 1px solid var(--evo-border-soft);
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform .25s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s cubic-bezier(.22, 1, .36, 1);
}
.ad-pair:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(30, 32, 38, 0.08);
}
.ad-pair > .ad-side {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.ad-pair .ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.ad-pair .ad-tag::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Antes — wash cinza claro, tag vermelha com ✕ */
.ad-pair .ad-before {
  background: linear-gradient(180deg, #fafbfc 0%, #f6f7fa 100%);
}
.ad-pair .ad-before .ad-tag {
  background: #fde2e1;
  color: #ea3934;
}
.ad-pair .ad-before .ad-tag::before {
  background: #ea3934
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/9px no-repeat;
}
.ad-pair .ad-before strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--evo-text);
  line-height: 1.35;
}
.ad-pair .ad-before span {
  font-size: 12.5px;
  color: var(--evo-text-mute);
  line-height: 1.5;
}
/* Depois — wash verde, tag verde com ✓ */
.ad-pair .ad-after {
  background: linear-gradient(180deg, #f0fdf4 0%, #e8fbef 100%);
}
.ad-pair .ad-after .ad-tag {
  background: var(--evo-green-soft);
  color: var(--evo-green-deep);
}
.ad-pair .ad-after .ad-tag::before {
  background: var(--evo-green-deep)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center/10px no-repeat;
}
.ad-pair .ad-after strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--evo-text);
  line-height: 1.35;
}
.ad-pair .ad-after span {
  font-size: 12.5px;
  color: var(--evo-text-soft);
  line-height: 1.5;
}
/* Divider central com setinha */
.ad-pair .ad-arrow {
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #f6f7fa 0%, var(--evo-green-soft) 100%);
  position: relative;
}
.ad-pair .ad-arrow::before {
  content: "";
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--evo-green)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/16px no-repeat;
  box-shadow: 0 4px 12px rgba(27, 191, 93, 0.35);
}

/* Mobile (≤720px): card único vertical — antes em cima, arrow no meio,
   depois em baixo. UM card só, story coesa. */
@media (max-width: 720px) {
  .ad-pairs { gap: 12px; }
  .ad-pair {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .ad-pair > .ad-side {
    padding: 16px 18px;
  }
  .ad-pair .ad-arrow {
    background: linear-gradient(180deg, #f6f7fa 0%, var(--evo-green-soft) 100%);
    padding: 8px 0;
  }
  .ad-pair .ad-arrow::before {
    width: 28px; height: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M6 13l6 6 6-6'/></svg>");
    background-color: var(--evo-green);
    background-size: 14px;
  }
  .ad-pair .ad-before strong,
  .ad-pair .ad-after strong { font-size: 13.5px; }
  .ad-pair .ad-before span,
  .ad-pair .ad-after span { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   IMAGEM EM TELA CHEIA (lightbox), com zoom
   Toque numa imagem de conteúdo e ela abre aqui dentro, sem sair do site.
   Quem decide o que é "imagem de conteúdo" é o site.js.

   `touch-action: none` na cena não é exagero: o zoom e o arrasto são feitos por
   nós no JS, e deixar o navegador também tentando resolver o gesto foi
   exatamente o que fez o menu do celular não rolar por três tentativas.
   ═══════════════════════════════════════════════════════════════════════ */
.evo-lbx {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;             /* a viewport que o navegador mostra AGORA */
  z-index: 200;               /* acima do header (60) e do drawer (95) */
  background: rgba(18, 20, 24, 0.94);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  touch-action: none;
  overscroll-behavior: contain;
}
.evo-lbx.is-open { opacity: 1; pointer-events: auto; }
.evo-lbx-cena {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.evo-lbx-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  transform-origin: center center;
  will-change: transform;
  /* Nenhuma transição no transform durante o gesto: o JS liga a classe só nos
     saltos (toque duplo, fechar), senão o dedo fica com lag de 200ms. */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.evo-lbx-img.is-suave { transition: transform .22s cubic-bezier(.2,.9,.3,1); }
.evo-lbx-fechar {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 44px; height: 44px;   /* 44 é o mínimo de alvo de toque */
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.evo-lbx-fechar:hover { background: rgba(255, 255, 255, 0.24); }
.evo-lbx-dica {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  pointer-events: none;
  transition: opacity .3s ease;
}
.evo-lbx.is-zoom .evo-lbx-dica { opacity: 0; }
/* A imagem clicável avisa que é clicável, e só onde o site.js marcou. */
img[data-zoomavel] { cursor: zoom-in; }

/* Botão de tela cheia do player: mesma pílula dos outros, só o ícone muda. */
.ev-player-btn[data-ev-full] .ico-full-sair { display: none; }
.ev-player.is-full .ev-player-btn[data-ev-full] .ico-full-sair { display: block; }
.ev-player.is-full .ev-player-btn[data-ev-full] .ico-full-entrar { display: none; }