/* 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); }

.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; }
/* 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;
}

/* 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 { transition: none !important; animation: none !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; }
}

/* ============================================================
   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; }
}