/* ══════════════════════════════════════════════════════════════
   SUSTENTARE — ENHANCEMENTS.CSS
   Camada de melhorias visuais e profissionais.
   Carregar SEMPRE depois de style.css.
   ══════════════════════════════════════════════════════════════ */

/* ───────── Tokens novos: paleta misturada e gradientes ───────── */
:root {
  /* Gradientes mesh assinados — misturando todas as cores da marca */
  --grad-mesh-1:
    radial-gradient(at 18% 22%, rgba(228, 104, 48, .35) 0px, transparent 50%),
    radial-gradient(at 82% 14%, rgba(136, 188, 36, .32) 0px, transparent 50%),
    radial-gradient(at 75% 82%, rgba(19, 172, 135, .28) 0px, transparent 50%),
    radial-gradient(at 12% 78%, rgba(65, 125, 69, .30) 0px, transparent 50%);

  --grad-mesh-2:
    radial-gradient(at 20% 30%, rgba(196, 210, 35, .35) 0px, transparent 55%),
    radial-gradient(at 80% 20%, rgba(228, 104, 48, .30) 0px, transparent 55%),
    radial-gradient(at 50% 90%, rgba(19, 172, 135, .25) 0px, transparent 55%);

  --grad-fire: linear-gradient(135deg, #e46830 0%, #f0845a 38%, #e8d81c 100%);
  --grad-leaf: linear-gradient(135deg, #417d45 0%, #45963f 45%, #88bc24 100%);
  --grad-aqua: linear-gradient(135deg, #13ac87 0%, #45963f 50%, #88bc24 100%);
  --grad-sunset: linear-gradient(135deg, #ba262d 0%, #e46830 50%, #e8d81c 100%);
  --grad-ocean: linear-gradient(135deg, #417d45 0%, #13ac87 60%, #88bc24 100%);
  --grad-rainbow: conic-gradient(from 210deg at 50% 50%,
      #417d45, #88bc24, #e8d81c, #e46830, #ba262d, #13ac87, #417d45);
  --grad-text-rainbow: linear-gradient(95deg, #417d45 0%, #13ac87 25%, #88bc24 50%, #e46830 75%, #ba262d 100%);

  /* Glow / sombras coloridas */
  --glow-orange: 0 8px 30px rgba(228, 104, 48, .35);
  --glow-green: 0 8px 30px rgba(65, 125, 69, .30);
  --glow-lime:  0 8px 30px rgba(136, 188, 36, .35);
  --glow-teal:  0 8px 30px rgba(19, 172, 135, .35);

  /* Glass effect tokens (light) */
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-bd: rgba(255, 255, 255, .65);
  --glass-blur: 18px;

  /* Surface tokens — vão ser sobrescritos no dark mode */
  --surface: #ffffff;
  --surface-soft: #f7faf7;
  --surface-elev: #ffffff;
  --text-primary: #1d2b1e;
  --text-soft: #4a5e4b;
  --border-soft: #e2ece2;
}

/* ──────────────────────────────────────────────────────────────
   DARK MODE
   ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg: #0f1612;
  --bg-off: #131c16;
  --bg-soft: #182019;
  --branco: #1a231c;
  --branco-sujo: #1e2820;
  --preto: #eaf3ec;
  --cinza-txt: #b6c8b9;
  --cinza-texto: #b6c8b9;
  --cinza-cl: #2f3e31;
  --cinza-light: #243027;

  --surface: #182019;
  --surface-soft: #131c16;
  --surface-elev: #1e2820;
  --text-primary: #eaf3ec;
  --text-soft: #b6c8b9;
  --border-soft: #2c3a2e;

  --glass-bg: rgba(24, 32, 25, .55);
  --glass-bd: rgba(255, 255, 255, .08);

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow:    0 6px 24px rgba(0, 0, 0, .45);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, .55);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .65);
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text-primary); }
html[data-theme="dark"] nav#navbar { background: rgba(15, 22, 18, .82) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
html[data-theme="dark"] nav#navbar a { color: var(--text-primary); }

/* Cartões e superfícies brancas viram superfícies escuras */
html[data-theme="dark"] .blog-card-v2,
html[data-theme="dark"] .blog-featured-v2,
html[data-theme="dark"] .form-box-v2,
html[data-theme="dark"] .contato-card-v2,
html[data-theme="dark"] .faq-item-v2,
html[data-theme="dark"] .servico-card,
html[data-theme="dark"] .servico-card-v2,
html[data-theme="dark"] .servico-full-card-v2,
html[data-theme="dark"] .processo-step,
html[data-theme="dark"] .depoimento-card,
html[data-theme="dark"] .dep-card,
html[data-theme="dark"] .dep-logo-box,
html[data-theme="dark"] .depo-video-wrap,
html[data-theme="dark"] .parceria-card,
html[data-theme="dark"] .parceiro,
html[data-theme="dark"] .parceiros-selos .selo,
html[data-theme="dark"] .selo-logo,
html[data-theme="dark"] .pessoa-card,
html[data-theme="dark"] .membro-card-v2,
html[data-theme="dark"] .vcard-v2,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .ods-card,
html[data-theme="dark"] .repercussao-card,
html[data-theme="dark"] .repercussao-item,
html[data-theme="dark"] .impacto-card,
html[data-theme="dark"] .impacto-item,
html[data-theme="dark"] .entrega-card,
html[data-theme="dark"] .video-card-body,
html[data-theme="dark"] .blog-stat,
html[data-theme="dark"] .blog-toolbar,
html[data-theme="dark"] .blog-filter-v2,
html[data-theme="dark"] .blog-search-wrap,
html[data-theme="dark"] .blog-sort,
html[data-theme="dark"] .blog-empty,
html[data-theme="dark"] .blog-tags-box,
html[data-theme="dark"] .blog-tag-pill,
html[data-theme="dark"] .blog-newsletter-v2,
html[data-theme="dark"] .videos-section,
html[data-theme="dark"] .newsletter-form-v2,
html[data-theme="dark"] .rede-v2,
html[data-theme="dark"] .form-box-v2 input,
html[data-theme="dark"] .form-box-v2 select,
html[data-theme="dark"] .form-box-v2 textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: rgba(182, 200, 185, .55) !important; }

/* Override genérico: qualquer section/div com fundo branco ou claro vira escuro */
html[data-theme="dark"] section,
html[data-theme="dark"] section > div,
html[data-theme="dark"] main > section { background-color: transparent !important; }

html[data-theme="dark"] .equipe-section,
html[data-theme="dark"] .video-section,
html[data-theme="dark"] .youtube-feature,
html[data-theme="dark"] .servicos-section,
html[data-theme="dark"] .vitrine-section,
html[data-theme="dark"] .blog-section-v2,
html[data-theme="dark"] .contato-section,
html[data-theme="dark"] .faq-section-v2,
html[data-theme="dark"] .processo-section,
html[data-theme="dark"] .depoimentos-section,
html[data-theme="dark"] .impacto-section,
html[data-theme="dark"] #video-home-youtube,
html[data-theme="dark"] #servicos-home,
html[data-theme="dark"] #processo,
html[data-theme="dark"] #depoimentos,
html[data-theme="dark"] #parceiros-vitrine,
html[data-theme="dark"] #pessoas,
html[data-theme="dark"] #cases-home,
html[data-theme="dark"] #ods-home,
html[data-theme="dark"] #entregas-destaque,
html[data-theme="dark"] #impacto { background-color: var(--bg) !important; }

/* cta-home mantém o gradiente laranja mesmo no dark mode */
html[data-theme="dark"] #cta-home {
  background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-h) 100%) !important;
}

html[data-theme="dark"] footer { background: #0a100c !important; color: var(--text-primary); border-top: 1px solid rgba(255, 255, 255, .04); }
html[data-theme="dark"] footer a { color: var(--text-soft); }
html[data-theme="dark"] footer a:hover { color: var(--lima); }

html[data-theme="dark"] .page-loader { background: var(--bg); }
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] section { background: transparent; }
/* section[id] não deve sobrescrever seções com background intencional */
html[data-theme="dark"] section[id]:not(#cta-home):not(#impacto):not(#processo):not(#pessoas) { background: transparent; }

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-primary); }

html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] li { color: inherit; }

html[data-theme="dark"] .blog-cat-v2,
html[data-theme="dark"] .section-tag,
html[data-theme="dark"] .professional-kicker,
html[data-theme="dark"] .page-hero-eyebrow { background: rgba(136, 188, 36, .15); color: var(--lima-c); }

html[data-theme="dark"] .breadcrumb { color: var(--text-soft); }

/* Hero quote box, proof pills e similares com fundo branco fixo */
html[data-theme="dark"] .hero-frase-chave,
html[data-theme="dark"] .hero-frase-autor,
html[data-theme="dark"] .proof-pill,
html[data-theme="dark"] .footer-badge,
html[data-theme="dark"] .blog-hero-pill,
html[data-theme="dark"] .blog-tag-pill,
html[data-theme="dark"] .blog-dest-badge {
  background: var(--surface-elev) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}
html[data-theme="dark"] .hero-frase-chave * { color: var(--text-primary) !important; }
html[data-theme="dark"] .hero-frase-autor { color: var(--text-soft) !important; }
html[data-theme="dark"] .frase-aspas { color: var(--laranja-c) !important; }
html[data-theme="dark"] .proof-pill .logo-mark img { filter: brightness(1.15); }
html[data-theme="dark"] .blog-tag-pill:hover { background: var(--grad-leaf) !important; color: #fff !important; }

/* Wrappers de imagem com fundo claro padrão */
html[data-theme="dark"] .servico-full-card-v2 .servico-img,
html[data-theme="dark"] .servico-full-card-v2 picture,
html[data-theme="dark"] .blog-featured-img-v2,
html[data-theme="dark"] .video-card-thumb,
html[data-theme="dark"] .case-card-img,
html[data-theme="dark"] .vcard-v2 .vcard-img { background: var(--bg-off) !important; }

/* ──────────────────────────────────────────────────────────────
   THEME TOGGLE — botão flutuante
   ────────────────────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  right: clamp(1.2rem, 3vw, 2rem);
  bottom: calc(clamp(5.5rem, 11vh, 7rem) + var(--sab, 0px));
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad-leaf);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--glow-green), 0 8px 24px rgba(0, 0, 0, .18);
  z-index: 998;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s, background .35s;
  border: 0;
}
.theme-toggle:hover { transform: translateY(-3px) rotate(-12deg); box-shadow: var(--glow-lime), 0 12px 30px rgba(0, 0, 0, .25); }
.theme-toggle:active { transform: scale(.92); }
html[data-theme="dark"] .theme-toggle { background: var(--grad-fire); box-shadow: var(--glow-orange); }

/* ──────────────────────────────────────────────────────────────
   FUNDO MESH ANIMADO (atrás do hero principal)
   ────────────────────────────────────────────────────────────── */
.mesh-bg {
  position: absolute; inset: 0;
  background: var(--grad-mesh-1);
  filter: blur(44px) saturate(1.05);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
  animation: meshDrift 22s ease-in-out infinite alternate;
}
html[data-theme="dark"] .mesh-bg { opacity: .35; }

@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

/* Blobs flutuantes coloridos */
.floating-blobs {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.floating-blobs::before,
.floating-blobs::after {
  content: ''; position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: blobFloat 18s ease-in-out infinite;
}
.floating-blobs::before {
  top: -80px; left: -100px;
  background: radial-gradient(circle, var(--laranja), transparent 65%);
}
.floating-blobs::after {
  bottom: -120px; right: -80px;
  background: radial-gradient(circle, var(--teal), transparent 65%);
  animation-delay: -9s;
  animation-direction: reverse;
}
html[data-theme="dark"] .floating-blobs::before,
html[data-theme="dark"] .floating-blobs::after { opacity: .35; }

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.1); }
  66%      { transform: translate(-30px, 30px) scale(.95); }
}

/* ──────────────────────────────────────────────────────────────
   TIPOGRAFIA — gradient text helper
   ────────────────────────────────────────────────────────────── */
.text-gradient,
.hero-title em,
.section-title em {
  background: var(--grad-text-rainbow);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientShift 12s ease-in-out infinite; /* de 8s → 12s: menos repaint */
  will-change: background-position;
}

/* page-hero fica sobre fundo verde escuro — usa laranja sólido para garantir contraste e legibilidade */
.page-hero-title em {
  background: linear-gradient(135deg, var(--laranja), #f0a060);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ──────────────────────────────────────────────────────────────
   BOTÕES — versões com gradiente
   ────────────────────────────────────────────────────────────── */
.btn.btn-laranja {
  background: var(--grad-fire) !important;
  background-size: 200% 200% !important;
  position: relative;
  overflow: hidden;
  transition: background-position .55s ease, transform .25s, box-shadow .35s;
  box-shadow: var(--glow-orange);
}
.btn.btn-laranja:hover {
  background-position: 100% 0% !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(228, 104, 48, .45);
}
.btn.btn-laranja::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.btn.btn-laranja:hover::after { transform: translateX(100%); }

.btn.btn-outline-verde {
  position: relative; overflow: hidden;
  transition: color .3s, border-color .3s, transform .25s, box-shadow .35s;
}
.btn.btn-outline-verde::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-leaf);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.6, 0, .2, 1);
  z-index: -1;
}
.btn.btn-outline-verde:hover { color: #fff !important; border-color: var(--lima) !important; transform: translateY(-3px); box-shadow: var(--glow-lime); }
.btn.btn-outline-verde:hover::before { transform: translateY(0); }
html[data-theme="dark"] .btn.btn-outline-verde { color: var(--lima-c) !important; border-color: var(--lima-c) !important; background: transparent !important; }

/* ──────────────────────────────────────────────────────────────
   CARTÕES — efeito 3D tilt + brilho na borda
   ────────────────────────────────────────────────────────────── */
.blog-card-v2,
.servico-card,
.processo-step,
.depoimento-card,
.case-card,
.parceria-card,
.pessoa-card,
.entrega-card,
.impacto-card,
.contato-card-v2 {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .35s !important;
  position: relative;
}
.blog-card-v2:hover,
.servico-card:hover,
.processo-step:hover,
.depoimento-card:hover,
.case-card:hover,
.parceria-card:hover,
.pessoa-card:hover,
.entrega-card:hover,
.impacto-card:hover,
.contato-card-v2:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 30px 60px -20px rgba(65, 125, 69, .35), 0 0 0 1px rgba(136, 188, 36, .25) !important;
}
html[data-theme="dark"] .blog-card-v2:hover,
html[data-theme="dark"] .servico-card:hover,
html[data-theme="dark"] .processo-step:hover,
html[data-theme="dark"] .depoimento-card:hover,
html[data-theme="dark"] .case-card:hover,
html[data-theme="dark"] .parceria-card:hover,
html[data-theme="dark"] .pessoa-card:hover,
html[data-theme="dark"] .entrega-card:hover,
html[data-theme="dark"] .impacto-card:hover,
html[data-theme="dark"] .contato-card-v2:hover {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(136, 188, 36, .35) !important;
}

/* Glow gradiente animado na borda dos cards "destaque" */
.blog-featured-v2 {
  position: relative;
  isolation: isolate;
}
.blog-featured-v2::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: var(--grad-rainbow);
  z-index: -1;
  filter: blur(18px);
  opacity: 0;
  transition: opacity .5s;
  animation: spinSlow 14s linear infinite;
}
.blog-featured-v2:hover::before { opacity: .55; }

@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Imagem do cartão com zoom + tinte colorido no hover */
.blog-card-v2 img,
.blog-featured-img-v2 img,
.video-card-thumb img,
.case-card img,
.parceria-card img {
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .55s !important;
}
.blog-card-v2:hover img,
.blog-featured-v2:hover img,
.video-card-thumb:hover img,
.case-card:hover img,
.parceria-card:hover img {
  transform: scale(1.08) !important;
  filter: saturate(1.15) contrast(1.05);
}

/* ──────────────────────────────────────────────────────────────
   GLASS NAVBAR
   ────────────────────────────────────────────────────────────── */
nav#navbar {
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background .3s, box-shadow .3s, padding .3s, transform .35s !important;
}
nav#navbar.nav-hidden { transform: translateY(-110%); }
nav#navbar a { transition: color .25s, transform .2s; }
nav#navbar .nav-links a:not(.nav-cta) { position: relative; }
nav#navbar .nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--grad-fire);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.6, 0, .2, 1);
}
nav#navbar .nav-links a:not(.nav-cta):hover::after,
nav#navbar .nav-links a.active-link:not(.nav-cta)::after { transform: scaleX(1); }

/* ──────────────────────────────────────────────────────────────
   SCROLL PROGRESS — gradiente colorido
   ────────────────────────────────────────────────────────────── */
.scroll-progress {
  background: var(--grad-text-rainbow) !important;
  background-size: 200% 100%;
  height: 4px !important;
  box-shadow: 0 1px 8px rgba(228, 104, 48, .35);
  /* sem animation — o scroll já atualiza o width via JS, não precisa de gradient animado */
}

/* ──────────────────────────────────────────────────────────────
   CURSOR CUSTOMIZADO (somente desktop)
   ────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none !important;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100000;
    will-change: transform;
  }

  .cursor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--laranja);
  }

  .cursor-ring {
    width: 34px;
    height: 34px;
    border: 2px solid var(--laranja);
    border-radius: 50%;
    opacity: .7;
    transition: width .2s ease, height .2s ease, opacity .2s ease, border-color .2s ease;
  }

  .cursor-ring.cursor-active {
    width: 52px;
    height: 52px;
    opacity: .35;
    border-color: var(--verde-esc);
  }

  .cursor-dot.cursor-active {
    background: var(--verde-esc);
  }
}

/* ──────────────────────────────────────────────────────────────
   REVEAL — animações ao rolar (incrementos sobre o existente)
   ────────────────────────────────────────────────────────────── */
.fx-fade-up { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.fx-fade-up.is-in { opacity: 1; transform: translateY(0); }

.fx-zoom { opacity: 0; transform: scale(.92); transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.fx-zoom.is-in { opacity: 1; transform: scale(1); }

.fx-tilt { opacity: 0; transform: perspective(900px) rotateX(12deg) translateY(40px); transition: opacity .9s, transform 1s cubic-bezier(.2, .8, .2, 1); }
.fx-tilt.is-in { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); }

.fx-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.fx-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.fx-stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
.fx-stagger.is-in > *:nth-child(2) { transition-delay: .12s; }
.fx-stagger.is-in > *:nth-child(3) { transition-delay: .19s; }
.fx-stagger.is-in > *:nth-child(4) { transition-delay: .26s; }
.fx-stagger.is-in > *:nth-child(5) { transition-delay: .33s; }
.fx-stagger.is-in > *:nth-child(6) { transition-delay: .40s; }
.fx-stagger.is-in > *:nth-child(7) { transition-delay: .47s; }
.fx-stagger.is-in > *:nth-child(8) { transition-delay: .54s; }

/* Parallax suave em fotos do hero */
.parallax-y { will-change: transform; transition: transform .15s linear; }

/* ──────────────────────────────────────────────────────────────
   GRÁFICO INTERATIVO DE IMPACTO (nova seção)
   ────────────────────────────────────────────────────────────── */
.impact-chart-section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}
.impact-chart-section::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-mesh-2);
  filter: blur(60px) saturate(1.1);
  opacity: .35;
  z-index: 0;
}
html[data-theme="dark"] .impact-chart-section::before { opacity: .25; }

.impact-chart-inner {
  max-width: 1240px; margin: 0 auto;
  position: relative; z-index: 1;
}
.impact-chart-head { text-align: center; margin-bottom: 3rem; }
.impact-chart-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  margin: .6rem 0 .8rem;
  color: var(--text-primary);
}
.impact-chart-head p {
  max-width: 720px; margin: 0 auto;
  color: var(--cinza-txt);
  font-size: 1rem; line-height: 1.7;
}

.impact-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 880px) { .impact-chart-grid { grid-template-columns: 1fr; } }

.impact-pillar-list {
  display: flex; flex-direction: column; gap: .75rem;
}
.impact-pillar-btn {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 2px solid var(--border-soft);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  color: var(--text-primary);
  transition: all .35s cubic-bezier(.2, .8, .2, 1);
  position: relative;
  overflow: hidden;
}
.impact-pillar-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--grad-leaf);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.impact-pillar-btn:hover { transform: translateX(6px); border-color: var(--lima); }
.impact-pillar-btn.is-active {
  border-color: transparent;
  background: var(--grad-leaf);
  color: #fff;
  box-shadow: var(--glow-green);
  transform: translateX(8px);
}
.impact-pillar-btn.is-active::before { transform: scaleY(1); background: rgba(255, 255, 255, .5); }
.impact-pillar-btn[data-pillar="ambiental"].is-active { background: var(--grad-aqua); box-shadow: var(--glow-teal); }
.impact-pillar-btn[data-pillar="social"].is-active   { background: var(--grad-fire); box-shadow: var(--glow-orange); }
.impact-pillar-btn[data-pillar="governanca"].is-active { background: var(--grad-sunset); box-shadow: 0 8px 30px rgba(186, 38, 45, .35); }

.impact-pillar-btn .ip-icon {
  font-size: 1.4rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(136, 188, 36, .14);
  border-radius: 12px;
  flex-shrink: 0;
  transition: background .35s, transform .35s;
}
.impact-pillar-btn.is-active .ip-icon { background: rgba(255, 255, 255, .25); transform: rotate(-8deg) scale(1.05); }
.impact-pillar-btn .ip-text { display: flex; flex-direction: column; gap: .15rem; }
.impact-pillar-btn .ip-text small { font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.impact-pillar-btn .ip-text strong { font-size: 1.05rem; font-weight: 900; }

.impact-chart-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.impact-chart-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--grad-text-rainbow);
}
.impact-chart-bars {
  display: flex; flex-direction: column; gap: 1.1rem;
  margin-top: 1rem;
}
.impact-bar-row { display: flex; flex-direction: column; gap: .4rem; }
.impact-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 800; font-size: .9rem; color: var(--text-primary);
}
.impact-bar-head .ibar-num {
  font-size: 1.4rem; font-weight: 900;
  background: var(--grad-fire);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.impact-bar-track {
  height: 12px;
  background: var(--cinza-light);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.impact-bar-fill {
  position: absolute; inset: 0; right: auto;
  width: 0;
  background: var(--grad-leaf);
  border-radius: 99px;
  transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
  position: relative;
}
.impact-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.impact-bar-row[data-color="orange"] .impact-bar-fill { background: var(--grad-fire); }
.impact-bar-row[data-color="teal"]   .impact-bar-fill { background: var(--grad-aqua); }
.impact-bar-row[data-color="red"]    .impact-bar-fill { background: var(--grad-sunset); }

.impact-chart-foot {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px dashed var(--border-soft);
  font-size: .85rem; color: var(--text-soft);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.impact-chart-foot strong { color: var(--text-primary); font-weight: 900; }

/* ──────────────────────────────────────────────────────────────
   CONTADORES — visual upgrade
   ────────────────────────────────────────────────────────────── */
[data-counter], .counter-num, .blog-stat strong {
  background: var(--grad-text-rainbow);
  background-size: 100% 100%; /* estático — sem animação, evita repaint contínuo */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* impacto-num: gradiente sem risco de corte */
.impacto-num {
  background: linear-gradient(135deg, var(--lima-c) 0%, var(--lima) 50%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding: .05em .1em; /* micro-padding que garante que o clip não corte as bordas */
  display: block;
  width: 100%;
}

/* section-title em sobre fundo verde (#processo) — usa lima em vez do rainbow */
#processo .section-title em,
.section-title.light em {
  background: linear-gradient(135deg, var(--lima-c), var(--lima));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none;
}

/* ──────────────────────────────────────────────────────────────
   WhatsApp float — pulso colorido
   ────────────────────────────────────────────────────────────── */
/* WhatsApp float — mantém position: fixed do style.css, apenas adiciona glow e pulso */
.wa-float {
  position: fixed !important; /* garante que o fixed não seja sobrescrito */
  box-shadow: 0 8px 24px rgba(37, 211, 102, .45) !important;
}
.wa-float::before {
  content: '';
  position: absolute;
  /* pulso circular — limitado ao tamanho do botão (52px) para não vazar */
  inset: -8px;
  border-radius: 50px; /* acompanha o border-radius do botão */
  background: rgba(37, 211, 102, .30);
  z-index: -1;
  pointer-events: none;
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(.85); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────
   FAQ — animação suave do +
   ────────────────────────────────────────────────────────────── */
.faq-btn-v2 .faq-icon-v2 { transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .3s; }
.faq-item-v2.is-open .faq-btn-v2 .faq-icon-v2 { transform: rotate(135deg); color: var(--laranja); }
.faq-btn-v2:hover { color: var(--laranja); }

/* ──────────────────────────────────────────────────────────────
   BACK TO TOP — circular progress visual
   ────────────────────────────────────────────────────────────── */
.back-to-top {
  background: var(--grad-leaf) !important;
  box-shadow: var(--glow-green) !important;
  transition: transform .3s, box-shadow .3s, opacity .3s !important;
}
.back-to-top:hover {
  background: var(--grad-fire) !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: var(--glow-orange) !important;
}

/* ──────────────────────────────────────────────────────────────
   FORMS — focus colorido
   ────────────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--lima) !important;
  box-shadow: 0 0 0 3px rgba(136, 188, 36, .2) !important;
}

/* ──────────────────────────────────────────────────────────────
   IMAGENS — efeito reveal de máscara
   ────────────────────────────────────────────────────────────── */
.fx-mask {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1);
}
.fx-mask.is-in { clip-path: inset(0 0 0 0); }

/* ──────────────────────────────────────────────────────────────
   ACESSIBILIDADE — respeitar preferência do usuário
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mesh-bg, .floating-blobs::before, .floating-blobs::after { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE — sem cursor custom, mas mantém o resto
   ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .theme-toggle { width: 46px; height: 46px; font-size: 1.2rem; bottom: calc(5rem + var(--sab, 0px)); }
  .impact-pillar-btn { padding: .9rem 1rem; }
}
/* ══════════════════════════════════════
   PERFORMANCE GERAL
   ══════════════════════════════════════ */

.mesh-bg,
.floating-blobs {
  display: none !important;
}

.blog-featured-v2::before {
  animation: none !important;
  filter: none !important;
}

.scroll-progress {
  animation: none !important;
}

.blog-card-v2 img,
.blog-featured-img-v2 img,
.video-card-thumb img,
.case-card img,
.parceria-card img {
  transition: transform .25s ease !important;
}

.blog-card-v2:hover img,
.blog-featured-v2:hover img,
.video-card-thumb:hover img,
.case-card:hover img,
.parceria-card:hover img {
  transform: scale(1.03) !important;
  filter: none !important;
}

.hero-leaf-1,
.hero-leaf-2,
.hero-leaf-3 {
  transform: none !important;
  will-change: auto !important;
}

@media (max-width: 768px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .fx-fade-up,
  .fx-zoom,
  .fx-tilt,
  .fx-stagger,
  .fx-mask {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}
/* ══════════════════════════════════════
   RESPONSIVO ENHANCEMENTS — MOBILE
   ══════════════════════════════════════ */

/* Impact chart — mobile */
@media (max-width: 640px) {
  .impact-chart-section {
    padding: 3rem 4% !important;
  }
  .impact-chart-bars {
    max-height: 260px;
  }
  .impact-item-card {
    padding: .7rem .85rem;
    gap: .65rem;
  }
  .impact-item-icon {
    font-size: 1.1rem;
  }
  .chart-foot {
    font-size: .75rem;
  }
  #impactChartTitle {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}

/* Pillar buttons — mobile */
@media (max-width: 480px) {
  .impact-pillar-list {
    gap: .4rem;
  }
  .impact-pillar-btn {
    font-size: .72rem;
    padding: .65rem .8rem;
  }
  .impact-pillar-btn small {
    display: none;
  }
}

/* Selos carousel — mobile */
@media (max-width: 640px) {
  .selos-track-outer::before,
  .selos-track-outer::after {
    width: 36px !important;
  }
}

/* Transp float button — ensure not covering content */
@media (max-width: 640px) {
  .transp-float {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   REVISÃO GERAL — AJUSTES VISUAIS E DE CONTRASTE (2025)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Gradientes escuros: versões mais claras e legíveis ── */
#processo {
  background: linear-gradient(135deg, #1e4824 0%, #2d6435 55%, #1e4824 100%) !important;
}

/* ── 2. Impacto section grid — 5 colunas responsivas ── */
@media (max-width: 900px) {
  .impacto-grid[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .impacto-grid[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── 3. Respiro geral entre seções ── */
#video-home-youtube,
#entregas-destaque,
#ods-home,
#servicos-home,
#depoimentos,
#parceiros-vitrine,
#casos-home,
#cases-home {
  padding-block: clamp(4rem, 7vw, 7rem);
}

/* ── 4. Selos carousel — itens mais equilibrados ── */
.selo-item {
  padding: 0 3.5rem !important;
}
.selo-logo-img {
  height: 110px !important;
}
@media (max-width: 600px) {
  .selo-item { padding: 0 2rem !important; }
  .selo-logo-img { height: 80px !important; }
}

/* ── 5. Parceiros grid — fundo branco puro, sem cinza ── */
.parceiro {
  background: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.2rem;
  min-height: 80px;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.parceiro:hover {
  box-shadow: 0 8px 24px rgba(65,125,69,.15);
  transform: translateY(-3px);
  border-color: var(--laranja) !important;
}
.parceiro img,
.parceiro:hover img {
  max-height: 52px;
  width: auto;
  filter: none !important;
  opacity: 1 !important;
  transition: filter .25s;
}

/* ── 6. Section tags — padronização ── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem !important;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(65,125,69,.1);
  color: var(--verde-esc) !important;
  padding: .32rem .85rem !important;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  margin-bottom: .75rem !important;
  width: fit-content;
}

/* ── 7. Botões — consistência e respiro ── */
.btn {
  font-weight: 900 !important;
  letter-spacing: .02em;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, background .22s !important;
}
.btn:hover { transform: translateY(-2px); }
.btn-laranja { box-shadow: 0 6px 20px rgba(228,104,48,.28); }
.btn-laranja:hover { box-shadow: 0 10px 30px rgba(228,104,48,.38); }
.btn-verde { box-shadow: 0 6px 20px rgba(65,125,69,.22); }
.btn-verde:hover { box-shadow: 0 10px 30px rgba(65,125,69,.32); }

/* ── 8. Cards em geral — sombras mais suaves ── */
.dep-card,
.case-card,
.mvv-card,
.servico-card-v2 {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s !important;
}

/* ── 9. Títulos — hierarquia visual ── */
.section-title {
  line-height: 1.18 !important;
  letter-spacing: -.4px;
}
.section-title em {
  font-style: normal;
  color: var(--laranja);
}

/* ── 10. Timeline trajetória — melhorar legibilidade mobile ── */
@media (max-width: 760px) {
  .traj-track {
    padding-left: 2.2rem !important;
  }
  .traj-card p {
    font-size: .8rem !important;
  }
}

/* ── 11. Motivos section — hover card verde ── */
.motivo-card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s !important;
}
.motivo-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(65,125,69,.14) !important;
}

/* ── 12. Impacto section — slight green tint instead of near-black ── */
#impacto {
  background: linear-gradient(160deg, #498352 0%, #4d7254 100%) !important;
}

/* ── 13. Hero "4 anos" → align to page style ── */
.hero-img-selo {
  border: 2.5px solid rgba(255,255,255,.18) !important;
}

/* ── 14. Vitrine motivos section — responsive fix ── */
@media (max-width: 760px) {
  #motivos-contratar > div > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #motivos-contratar > div > div[style*="grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Fix extra: garante branco puro e sem cinza em todos os contextos ── */
.parceiro,
.parceiros-grid .parceiro,
.parceiros-grid.parceiros-marquee .parceiro {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.5) !important;
}
.parceiro img,
.parceiros-grid .parceiro img,
.parceiros-grid.parceiros-marquee .parceiro img {
  filter: none !important;
  opacity: 1 !important;
}

/* ── Parceiros vitrine — fundo branco ── */
#parceiros-vitrine {
  background: #ffffff !important;
}
#parceiros-vitrine .parceiros-title,
#parceiros-vitrine .parceiros-title em,
#parceiros-vitrine .parceiros-subtitle {
  color: var(--verde-esc) !important;
  -webkit-text-fill-color: unset !important;
}
#parceiros-vitrine .parceiros-tag {
  color: var(--cinza-txt) !important;
}

/* ── Footer — verde claro ── */
footer {
  background: #3a7a3e !important;
  background-image: linear-gradient(#3a7a3e, #3a7a3e),
    linear-gradient(90deg, var(--laranja), var(--lima), var(--laranja)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — CORREÇÕES VISUAIS
   ══════════════════════════════════════════════════════════════ */

/* ── Parceiros: manter fundo claro para logos escuras ficarem visíveis ── */
html[data-theme="dark"] .parceiro {
  background: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .parceiro:hover {
  background: #ffffff !important;
  border-color: var(--laranja) !important;
}
html[data-theme="dark"] .parceiro img {
  mix-blend-mode: multiply;
  filter: grayscale(15%);
  opacity: 0.88;
}
html[data-theme="dark"] .parceiro:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ── Modal de Soluções: fundo escuro para texto não sumir ── */
html[data-theme="dark"] .sol-modal-panel {
  background: var(--surface-elev) !important;
  border: 1px solid var(--border-soft);
}
html[data-theme="dark"] .sol-modal-close {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .sol-modal-close:hover {
  background: rgba(255, 255, 255, 0.20) !important;
}
html[data-theme="dark"] .sol-modal-title {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .sol-modal-lead {
  color: var(--text-soft) !important;
}
html[data-theme="dark"] .sol-modal-list li {
  color: var(--text-soft) !important;
}
html[data-theme="dark"] .sol-modal-tag {
  background: rgba(136, 188, 36, 0.15) !important;
  color: var(--lima-c) !important;
}
html[data-theme="dark"] .sol-modal-foot {
  border-color: var(--border-soft) !important;
}
html[data-theme="dark"] .sol-modal-list li::before {
  background: var(--verde-esc) !important;
  color: #fff !important;
}
html[data-theme="dark"] .sol-modal-body {
  background: transparent !important;
}