/* ==========================================================================
   BudgetZap — Folha de estilo principal
   --------------------------------------------------------------------------
   Estrutura do arquivo:
   1. Variáveis globais
   2. Reset & base
   3. Utilidades (container, botões, badges, seções)
   4. Header / Navegação / Menu mobile
   5. Hero + Mockup de celular
   6. Barra de confiança
   7. Problema vs Solução
   8. Recursos
   9. Como funciona
   10. Preço
   11. Depoimentos
   12. FAQ
   13. CTA final
   14. Footer
   15. Botão flutuante WhatsApp
   16. Animações (reveal) & acessibilidade
   17. Responsividade (breakpoints)
   ========================================================================== */

/* ==========================================================================
   1. VARIÁVEIS GLOBAIS
   ========================================================================== */
:root{
  /* Paleta oficial derivada dos logos */
  --verde-whats:#25D366;
  --verde-whats-dark:#1EBE5D;          /* variação mais escura p/ contraste */
  --verde-whats-soft:#E4F8EC;          /* fundo verde clarinho */
  --verde-profundo:#075E54;
  --verde-medio:#128C7E;
  --azul-noite:#0B1F3A;
  --branco:#FFFFFF;
  --ambar:#F5B041;

  /* Neutros */
  --cinza-800:#334155;
  --cinza-600:#55627A;
  --cinza-400:#94A3B8;
  --cinza-100:#F1F5F9;
  --borda:#E5EAF2;

  /* Gradiente sutil verde → azul (apenas detalhes) */
  --gradiente-primario:linear-gradient(135deg, var(--verde-whats) 0%, var(--verde-profundo) 130%);
  --gradiente-suave:linear-gradient(180deg, #F4FBF7 0%, var(--branco) 100%);

  /* Tipografia */
  --fonte-titulos:'Poppins', system-ui, -apple-system, sans-serif;
  --fonte-texto:'Inter', system-ui, -apple-system, sans-serif;

  /* Raio e sombra */
  --raio:18px;
  --raio-sm:12px;
  --sombra-suave:0 10px 30px rgba(7, 94, 84, .10);
  --sombra-media:0 18px 40px rgba(7, 94, 84, .16);
  --sombra-ambar:0 14px 34px rgba(245, 176, 65, .35);

  /* Layout */
  --container:1180px;
  --header-h:76px;
  --transicao:.28s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;                       /* rolagem suave entre âncoras */
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--fonte-texto);
  font-size:1rem;
  line-height:1.65;
  color:var(--azul-noite);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--fonte-titulos); line-height:1.18; color:var(--azul-noite); font-weight:700;}
p{margin:0 0 1rem;}
a{color:var(--verde-profundo); text-decoration:none;}
a:hover{color:var(--verde-medio);}
img{max-width:100%; height:auto; display:block;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
blockquote{margin:0;}
input{font-family:inherit;}

/* Foco visível (acessibilidade por teclado) */
:focus-visible{
  outline:3px solid var(--ambar);
  outline-offset:2px;
  border-radius:6px;
}

::selection{background:var(--verde-whats); color:var(--azul-noite);}

/* ==========================================================================
   3. UTILIDADES
   ========================================================================== */
.container{
  width:min(100% - 2.5rem, var(--container));
  margin-inline:auto;
}
.container-narrow{width:min(100% - 2.5rem, 780px); margin-inline:auto;}

/* Botões */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  padding:.95rem 1.5rem;
  border-radius:999px;
  border:2px solid transparent;
  text-decoration:none;
  white-space:nowrap;
  transition:transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn:active{transform:translateY(1px) scale(.99);}

.btn-primary{
  background:var(--verde-whats);
  color:var(--verde-profundo);
  box-shadow:0 10px 24px rgba(37, 211, 102, .35);
}
.btn-primary:hover{
  background:var(--verde-whats-dark);
  color:var(--verde-profundo);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(37, 211, 102, .45);
}

.btn-outline{
  border-color:var(--verde-profundo);
  color:var(--verde-profundo);
  background:transparent;
}
.btn-outline:hover{
  background:var(--verde-profundo);
  color:var(--branco);
  transform:translateY(-2px);
}

.btn-whatsapp{
  background:var(--branco);
  color:var(--verde-profundo);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.btn-whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.btn-whatsapp svg{color:var(--verde-whats-dark);}

.btn-ghost-light{
  border-color:rgba(255,255,255,.55);
  color:var(--branco);
  background:transparent;
}
.btn-ghost-light:hover{
  background:var(--branco);
  color:var(--verde-profundo);
  transform:translateY(-2px);
}

.btn-lg{padding:1.1rem 1.8rem; font-size:1.05rem;}
.btn-sm{padding:.7rem 1.15rem; font-size:.9rem;}
.btn-block{width:100%;}

/* Cabeçalho de seção */
.section-head{text-align:center; max-width:680px; margin:0 auto clamp(2.5rem, 6vw, 4rem);}
.section-head h2{font-size:clamp(1.75rem, 4.2vw, 2.6rem); font-weight:800; margin-bottom:.9rem;}
.section-sub{color:var(--cinza-600); font-size:1.05rem; margin:0;}

.eyebrow{
  display:inline-block;
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--verde-profundo);
  background:var(--verde-whats-soft);
  padding:.45rem 1rem;
  border-radius:999px;
  margin-bottom:1rem;
}

/* Seções */
section{padding:clamp(4rem, 9vw, 6.5rem) 0;}

/* ==========================================================================
   4. HEADER / NAVEGAÇÃO
   ========================================================================== */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:box-shadow var(--transicao), background var(--transicao);
}
.site-header.is-scrolled{
  box-shadow:0 4px 24px rgba(11, 31, 58, .08);
  background:rgba(255,255,255,.98);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--header-h);
}

/* Marca */
.brand{display:inline-flex; align-items:center; gap:.7rem;}
.brand-logo{
  display:inline-flex;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--sombra-suave);
  border:1px solid var(--borda);
  line-height:0;
}
.brand-name{font-family:var(--fonte-titulos); font-weight:800; font-size:1.35rem; color:var(--azul-noite); letter-spacing:-.02em;}
.brand-name span{color:var(--verde-whats-dark);}

/* Menu principal */
.main-nav{display:flex; align-items:center; gap:1.5rem;}
.nav-list{display:flex; align-items:center; gap:1.6rem;}
.nav-link{
  font-weight:600;
  font-size:.95rem;
  color:var(--cinza-800);
  position:relative;
  padding:.25rem 0;
  transition:color var(--transicao);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2.5px;
  border-radius:2px;
  background:var(--gradiente-primario);
  transition:width var(--transicao);
}
.nav-link:hover{color:var(--verde-profundo);}
.nav-link:hover::after,
.nav-link.is-active::after{width:100%;}
.nav-link.is-active{color:var(--verde-profundo);}
.nav-cta{flex-shrink:0;}

/* Hambúrguer */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  border:none;
  background:var(--verde-whats-soft);
  border-radius:12px;
  padding:10px;
}
.menu-bar{
  display:block;
  height:3px; width:100%;
  border-radius:3px;
  background:var(--verde-profundo);
  transition:transform var(--transicao), opacity var(--transicao);
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ==========================================================================
   5. HERO + MOCKUP
   ========================================================================== */
.hero{
  position:relative;
  padding:calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3rem, 7vw, 5rem);
  background:var(--gradiente-suave);
  overflow:hidden;
}

/* Padrão sutil de balões ao fundo */
.hero-pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(37,211,102,.10) 0 90px, transparent 90px),
    radial-gradient(circle at 92% 8%, rgba(18,140,126,.08) 0 120px, transparent 120px),
    radial-gradient(circle at 85% 80%, rgba(245,176,65,.07) 0 100px, transparent 100px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 8a6 6 0 1 1 6 6 6 6 0 0 1-6-6zM8 24a4 4 0 1 1 4 4 4 4 0 0 1-4-4z' fill='%23075E54' fill-opacity='.05'/%3E%3C/svg%3E");
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem, 6vw, 4.5rem);
  align-items:center;
}

.hero-copy{max-width:600px;}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.82rem;
  color:var(--verde-profundo);
  background:var(--branco);
  border:1px solid rgba(7,94,84,.14);
  box-shadow:var(--sombra-suave);
  padding:.55rem 1rem;
  border-radius:999px;
  margin-bottom:1.4rem;
}
.hero-badge svg{color:var(--verde-whats-dark);}

.hero h1{
  font-size:clamp(2rem, 4.6vw, 3.05rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:1.15rem;
}
.hero-sub{
  font-size:clamp(1.02rem, 1.6vw, 1.2rem);
  color:var(--cinza-600);
  margin-bottom:2rem;
}

.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2rem;}

.hero-trust{display:flex; flex-wrap:wrap; gap:1.4rem;}
.hero-trust li{
  display:flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:600; color:var(--cinza-800);
}

/* ---- Mockup de celular ---- */
.hero-phone{position:relative; display:flex; flex-direction:column; align-items:center;}
.hero-phone img{max-width:100%;}

.phone{
  position:relative;
  width:min(300px, 82vw);
  background:#0B1F3A;
  border-radius:46px;
  padding:12px;
  box-shadow:var(--sombra-media), 0 0 0 1px rgba(11,31,58,.12);
}
.phone-notch{
  position:absolute;
  top:22px; left:50%;
  transform:translateX(-50%);
  width:110px; height:26px;
  background:var(--azul-noite);
  border-radius:20px;
  z-index:2;
}

.chat-header{
  display:flex;
  align-items:center;
  gap:.55rem;
  background:var(--verde-profundo);
  color:var(--branco);
  padding:.7rem .9rem .7rem .7rem;
  border-radius:34px 34px 0 0;
}
.chat-avatar{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--verde-medio);
  color:var(--branco);
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
}
.chat-meta{display:flex; flex-direction:column; flex:1; line-height:1.2;}
.chat-name{font-size:.82rem; font-weight:600;}
.chat-status{font-size:.68rem; opacity:.85;}
.chat-header svg{opacity:.9;}

.chat-body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23118C7E' fill-opacity='.10'/%3E%3C/svg%3E"),
    #ECE5DD;
  min-height:340px;
  padding:.8rem .7rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.chat-day{
  align-self:center;
  background:rgba(255,255,255,.75);
  color:var(--cinza-600);
  font-size:.66rem;
  font-weight:600;
  padding:.25rem .7rem;
  border-radius:999px;
}

.chat-msg{
  max-width:88%;
  padding:.55rem .8rem;
  border-radius:14px;
  font-size:.78rem;
  line-height:1.4;
  position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.chat-in{align-self:flex-start; background:var(--branco); color:var(--cinza-800); border-bottom-left-radius:4px;}
.chat-out{align-self:flex-end; background:#DCF8C6; color:var(--cinza-800); border-bottom-right-radius:4px;}

.chat-time{display:block; font-size:.6rem; color:var(--cinza-400); text-align:right; margin-top:.25rem;}

.chat-demo{animation:msgIn .5s ease both;}
@keyframes msgIn{from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;}}
.demo-check{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--verde-whats);
  color:var(--branco);
  font-size:.6rem; font-weight:800;
  margin-right:.35rem;
}

/* Card de orçamento dentro do WhatsApp */
.budget-card{
  background:var(--branco);
  border-radius:12px;
  padding:.7rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  min-width:210px;
  margin-bottom:.3rem;
}
.budget-top{margin-bottom:.4rem;}
.budget-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.66rem;
  color:var(--verde-profundo);
  background:var(--verde-whats-soft);
  padding:.25rem .55rem;
  border-radius:999px;
}
.budget-badge svg{color:var(--verde-whats-dark);}
.budget-title{font-family:var(--fonte-titulos); font-weight:700; font-size:.78rem; margin:0 0 .4rem;}
.budget-items{margin:0 0 .5rem;}
.budget-items li{
  display:flex; justify-content:space-between; gap:.6rem;
  font-size:.68rem;
  color:var(--cinza-600);
  padding:.16rem 0;
  border-bottom:1px dashed var(--borda);
}
.budget-items li span:last-child{color:var(--azul-noite); font-weight:600; white-space:nowrap;}
.budget-total{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.74rem;
  margin-bottom:.6rem;
}
.budget-total strong{font-family:var(--fonte-titulos); color:var(--verde-profundo); font-size:.92rem;}
.budget-btn{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--verde-whats);
  color:var(--verde-profundo);
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.7rem;
  padding:.5rem;
  border-radius:8px;
}

.chat-input{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:var(--branco);
  padding:.5rem .7rem;
  border-radius:0 0 34px 34px;
}
.chat-input-emoji{font-size:.85rem;}
.chat-input-field{
  flex:1;
  background:var(--cinza-100);
  color:var(--cinza-400);
  font-size:.74rem;
  padding:.45rem .7rem;
  border-radius:999px;
}
.chat-mic{color:var(--verde-profundo); display:flex;}

/* Botão demo "Enviar" + dica */
.demo-send{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.4rem;
  background:var(--verde-profundo);
  color:var(--branco);
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.95rem;
  border:none;
  border-radius:999px;
  padding:.85rem 1.4rem;
  box-shadow:var(--sombra-media);
  transition:transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.demo-send svg{color:var(--verde-whats);}
.demo-send:hover{
  transform:translateY(-3px) scale(1.02);
  background:var(--verde-medio);
  box-shadow:0 20px 40px rgba(7,94,84,.3);
}
.demo-hint{margin-top:.7rem; font-size:.85rem; color:var(--cinza-600);}

/* Logo Direção 1 em destaque */
.hero-logo-card{
  position:absolute;
  right:-14px;
  bottom:-8px;
  background:var(--branco);
  border-radius:24px;
  box-shadow:var(--sombra-media);
  padding:.8rem;
  line-height:0;
  animation:flutuar 5s ease-in-out infinite;
}
.hero-logo-card img{width:clamp(72px, 9vw, 110px); height:auto;}
@keyframes flutuar{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-12px) rotate(2deg);}
}

/* Toast de sucesso do demo */
.toast{
  position:fixed;
  bottom:28px; left:50%;
  transform:translate(-50%, 140%);
  z-index:2000;
  background:var(--verde-profundo);
  color:var(--branco);
  font-weight:600;
  font-size:.95rem;
  padding:.9rem 1.4rem;
  border-radius:999px;
  box-shadow:var(--sombra-media);
  transition:transform .4s cubic-bezier(.18,.89,.32,1.28);
  max-width:90vw;
  text-align:center;
}
.toast.show{transform:translate(-50%, 0);}

/* ==========================================================================
   6. BARRA DE CONFIANÇA
   ========================================================================== */
.trustbar{
  padding:2rem 0;
  background:var(--branco);
  border-top:1px solid var(--borda);
}
.trustbar-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(1.5rem, 4vw, 3rem);
}
.trustbar-selo img{
  width:clamp(80px, 10vw, 104px);
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(7,94,84,.16));
}
.trustbar-list{display:flex; flex-wrap:wrap; gap:1.6rem clamp(1.2rem, 3vw, 2.6rem); align-items:center;}
.trustbar-list li{
  display:flex; align-items:center; gap:.7rem;
  font-size:.92rem; color:var(--cinza-600);
  max-width:240px;
}
.trustbar-list strong{display:block; color:var(--azul-noite); font-weight:700;}
.trustbar-icon{
  flex-shrink:0;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--verde-whats-soft);
  color:var(--verde-profundo);
  border-radius:14px;
}

/* ==========================================================================
   7. PROBLEMA vs SOLUÇÃO
   ========================================================================== */
.contrast{background:var(--branco);}
.contrast-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem, 3vw, 2rem);
  max-width:960px;
  margin-inline:auto;
}
.contrast-card{
  border-radius:var(--raio);
  padding:clamp(1.5rem, 3vw, 2.2rem);
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.contrast-card:hover{transform:translateY(-6px);}
.contrast-before{background:var(--cinza-100); border:1px solid var(--borda);}
.contrast-before:hover{box-shadow:0 16px 34px rgba(11,31,58,.08);}
.contrast-after{
  background:linear-gradient(180deg, #E9F9F0, #E4F4F1);
  border:1px solid rgba(18,140,126,.22);
  box-shadow:var(--sombra-suave);
}
.contrast-after:hover{box-shadow:var(--sombra-media);}

.contrast-label{
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.85rem;
  margin-bottom:1rem;
}
.contrast-before .contrast-label{color:#C0392B;}
.contrast-after .contrast-label{color:var(--verde-profundo);}
.contrast-card h3{font-size:1.3rem; font-weight:800; margin-bottom:1.2rem;}
.contrast-list li{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.55rem 0;
  font-size:.98rem;
  color:var(--cinza-800);
}
.contrast-list svg{flex-shrink:0; margin-top:.25rem;}

/* ==========================================================================
   8. RECURSOS
   ========================================================================== */
.features{background:var(--cinza-100);}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.feature-card{
  background:var(--branco);
  border-radius:var(--raio);
  border:1px solid var(--borda);
  padding:1.8rem;
  transition:transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-media);
  border-color:rgba(37,211,102,.5);
}
.feature-icon{
  display:inline-flex;
  width:56px; height:56px;
  align-items:center; justify-content:center;
  border-radius:16px;
  background:var(--verde-whats-soft);
  color:var(--verde-profundo);
  margin-bottom:1.1rem;
}
.feature-card h3{font-size:1.1rem; font-weight:700; margin-bottom:.55rem;}
.feature-card p{margin:0; color:var(--cinza-600); font-size:.95rem;}

/* Destaque com logo Direção 3 */
.features-highlight{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.4rem, 4vw, 2.5rem);
  align-items:center;
  background:linear-gradient(135deg, var(--verde-profundo) 0%, var(--azul-noite) 100%);
  border-radius:26px;
  padding:clamp(1.8rem, 4vw, 2.8rem);
  color:var(--branco);
  overflow:hidden;
  position:relative;
}
.features-highlight::after{
  content:"";
  position:absolute;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,211,102,.18), transparent 70%);
  top:-90px; right:-60px;
  pointer-events:none;
}
.highlight-logo{
  background:var(--branco);
  border-radius:22px;
  padding:.8rem;
  line-height:0;
  box-shadow:0 16px 40px rgba(0,0,0,.3);
  flex-shrink:0;
}
.highlight-logo img{width:clamp(88px, 10vw, 140px); height:auto;}
.highlight-copy h3{
  color:var(--branco);
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:800;
  margin-bottom:.8rem;
}
.highlight-copy p{margin:0; color:rgba(255,255,255,.88); font-size:1rem;}

/* ==========================================================================
   9. COMO FUNCIONA
   ========================================================================== */
.steps{background:var(--branco);}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
  counter-reset:passo;
}
.step-card{
  position:relative;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:2rem 1.5rem 1.6rem;
  text-align:center;
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.step-card:hover{transform:translateY(-6px); box-shadow:var(--sombra-media);}

.step-number{
  position:absolute;
  top:-16px; left:50%;
  transform:translateX(-50%);
  width:34px; height:34px;
  border-radius:50%;
  background:var(--gradiente-primario);
  color:var(--branco);
  font-family:var(--fonte-titulos);
  font-weight:800;
  font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(37,211,102,.4);
  border:3px solid var(--branco);
}
.step-icon{
  display:inline-flex;
  width:64px; height:64px;
  align-items:center; justify-content:center;
  border-radius:20px;
  background:var(--verde-whats-soft);
  color:var(--verde-profundo);
  margin:1rem 0 1rem;
}
.step-card h3{font-size:1.05rem; font-weight:700; margin-bottom:.5rem;}
.step-card p{margin:0; font-size:.9rem; color:var(--cinza-600);}

/* ==========================================================================
   10. PREÇO
   ========================================================================== */
.pricing{background:var(--cinza-100);}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(1.5rem, 4vw, 2.5rem);
  align-items:stretch;
  max-width:960px;
  margin-inline:auto;
}

.price-card{
  background:var(--branco);
  border-radius:26px;
  border:2px solid var(--verde-whats);
  box-shadow:var(--sombra-media);
  padding:clamp(1.8rem, 3.5vw, 2.5rem);
  position:relative;
  text-align:center;
}
.price-flag{
  display:inline-block;
  background:var(--gradiente-primario);
  color:var(--branco);
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.78rem;
  padding:.4rem 1.1rem;
  border-radius:999px;
  margin-bottom:1rem;
}
.price-name{font-size:1.1rem; font-weight:700; color:var(--cinza-600); margin-bottom:.4rem;}
.price-value{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.15rem;
  margin-bottom:.4rem;
}
.price-currency{font-family:var(--fonte-titulos); font-weight:800; font-size:1.5rem; color:var(--verde-profundo);}
.price-number{
  font-family:var(--fonte-titulos);
  font-weight:800;
  font-size:clamp(3.2rem, 7vw, 4.4rem);
  line-height:1;
  color:var(--azul-noite);
  background:linear-gradient(180deg, var(--verde-profundo), var(--verde-medio));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.price-period{font-weight:600; color:var(--cinza-600); font-size:1.05rem;}
.price-note{font-size:.85rem; color:var(--cinza-600); margin-bottom:1.4rem;}
.price-card .btn{margin-bottom:1.6rem;}

.price-list{text-align:left; display:grid; gap:.7rem;}
.price-list li{
  display:flex; align-items:center; gap:.7rem;
  font-size:.95rem; font-weight:500;
  color:var(--cinza-800);
}
.price-list svg{color:var(--verde-whats-dark); flex-shrink:0;}

.price-compare{
  max-width:960px;
  margin:clamp(1.5rem, 4vw, 2.5rem) auto 0;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:26px;
  padding:clamp(1.6rem, 3.5vw, 2.2rem);
}
.price-compare h3{font-size:1.35rem; font-weight:800; margin-bottom:.7rem;}
.price-compare > p{color:var(--cinza-600); font-size:.95rem;}
.compare-list{display:grid; gap:.8rem; margin:1.4rem 0;}
.compare-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  background:var(--cinza-100);
  border:1px solid var(--borda);
  border-radius:14px;
  padding:.8rem 1rem;
  font-size:.9rem;
  flex-wrap:wrap;
}
.compare-list .compare-ok{background:var(--verde-whats-soft); border-color:rgba(37,211,102,.45);}
.compare-item{display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--cinza-800);}
.compare-x{color:#C0392B; font-weight:800;}
.compare-check{
  color:var(--branco);
  background:var(--verde-whats-dark);
  width:20px; height:20px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem;
}
.compare-cost{font-weight:600; color:var(--cinza-600); white-space:nowrap;}
.compare-list .compare-ok .compare-cost{color:var(--verde-profundo);}

.compare-badge{
  display:flex;
  align-items:center;
  gap:1rem;
  background:linear-gradient(135deg, #E9F9F0, #E4F4F1);
  border:1px solid rgba(18,140,126,.22);
  border-radius:16px;
  padding:1rem 1.2rem;
}
.compare-badge img{width:56px; height:auto; flex-shrink:0; filter:drop-shadow(0 8px 16px rgba(7,94,84,.2));}
.compare-badge p{margin:0; font-size:.92rem; color:var(--cinza-800);}
.compare-badge strong{color:var(--verde-profundo);}

/* ==========================================================================
   11. DEPOIMENTOS
   ========================================================================== */
.testimonials{background:var(--branco);}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.testimonial-card{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  box-shadow:var(--sombra-suave);
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.testimonial-card:hover{transform:translateY(-6px); box-shadow:var(--sombra-media);}
.testimonial-stars{color:var(--ambar); letter-spacing:3px; font-size:.95rem;}
.testimonial-card blockquote{
  font-size:1rem;
  color:var(--cinza-800);
  line-height:1.6;
  flex:1;
}
.testimonial-author{
  display:flex; align-items:center; gap:.9rem;
  padding-top:1rem;
  border-top:1px dashed var(--borda);
}
.author-avatar{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--gradiente-primario);
  color:var(--branco);
  font-family:var(--fonte-titulos);
  font-weight:800;
  font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.author-info{display:flex; flex-direction:column; line-height:1.35;}
.author-info strong{color:var(--azul-noite); font-size:.95rem;}
.author-info span{font-size:.82rem; color:var(--cinza-600);}

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq{background:var(--cinza-100);}
.faq-list{display:grid; gap:1rem;}
.faq-item{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:16px;
  overflow:hidden;
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.faq-item[data-open="true"]{border-color:rgba(37,211,102,.55); box-shadow:var(--sombra-suave);}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:none;
  border:none;
  padding:1.15rem 1.4rem;
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:1.02rem;
  color:var(--azul-noite);
  text-align:left;
}
.faq-toggle{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--verde-whats-soft);
  position:relative;
  transition:transform var(--transicao), background var(--transicao);
}
.faq-toggle::before,
.faq-toggle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--verde-profundo);
  border-radius:2px;
  transform:translate(-50%, -50%);
}
.faq-toggle::before{width:12px; height:2px;}
.faq-toggle::after{width:2px; height:12px; transition:opacity var(--transicao);}
.faq-item[data-open="true"] .faq-toggle{transform:rotate(135deg); background:var(--verde-whats);}
.faq-item[data-open="true"] .faq-toggle::before,
.faq-item[data-open="true"] .faq-toggle::after{background:var(--verde-profundo);}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-answer p{
  padding:0 1.4rem 1.2rem;
  margin:0;
  color:var(--cinza-600);
  font-size:.97rem;
}

/* ==========================================================================
   13. CTA FINAL
   ========================================================================== */
.cta-final{
  position:relative;
  background:linear-gradient(150deg, var(--verde-profundo) 0%, #0A4A42 55%, var(--azul-noite) 100%);
  color:var(--branco);
  overflow:hidden;
  text-align:center;
}
.cta-final::before{
  content:"";
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,211,102,.22), transparent 65%);
  top:-140px; left:-120px;
  pointer-events:none;
}
.cta-final::after{
  content:"";
  position:absolute;
  width:380px; height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,176,65,.16), transparent 65%);
  bottom:-160px; right:-110px;
  pointer-events:none;
}
.cta-final-inner{position:relative; z-index:1; max-width:760px;}
.cta-final-logo{
  width:fit-content;
  margin:0 auto 1.6rem;
  background:var(--branco);
  border-radius:24px;
  padding:.8rem;
  line-height:0;
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.cta-final-logo img{width:clamp(84px, 12vw, 120px); height:auto; margin-inline:auto;}
.cta-final-badge{
  display:inline-block;
  font-family:var(--fonte-titulos);
  font-weight:700;
  font-size:.85rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:var(--branco);
  padding:.5rem 1.1rem;
  border-radius:999px;
  margin-bottom:1.2rem;
}
.cta-final h2{color:var(--branco); font-size:clamp(1.8rem, 4.4vw, 2.7rem); font-weight:800; margin-bottom:1rem;}
.cta-final-sub{color:rgba(255,255,255,.9); font-size:clamp(1rem, 1.6vw, 1.15rem); max-width:560px; margin:0 auto 2rem;}
.cta-final-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-bottom:1.4rem;}
.cta-final-note{color:rgba(255,255,255,.75); font-size:.9rem; margin:0;}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer{background:var(--azul-noite); color:rgba(255,255,255,.82); padding:4rem 0 2rem;}
.brand-footer .brand-name{color:var(--branco);}
.brand-footer .brand-name span{color:var(--verde-whats);}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1.3fr;
  gap:clamp(1.8rem, 4vw, 2.8rem);
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:1.8rem;
}
.footer-brand p{font-size:.92rem; color:rgba(255,255,255,.72); margin:1.1rem 0 1.3rem;}
.footer-social{display:flex; gap:.7rem;}
.footer-social a{
  display:inline-flex;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:var(--branco);
  transition:background var(--transicao), transform var(--transicao);
}
.footer-social a:hover{background:var(--verde-whats); color:var(--azul-noite); transform:translateY(-3px);}

.footer-col h3{
  color:var(--branco);
  font-size:.95rem;
  font-weight:700;
  margin-bottom:1.1rem;
}
.footer-col ul{display:grid; gap:.65rem;}
.footer-col a, .footer-col li span{
  display:inline-flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.78);
  font-size:.9rem;
  transition:color var(--transicao);
}
.footer-col a svg{flex-shrink:0; color:var(--verde-whats);}
.footer-col a:hover{color:var(--verde-whats);}
.footer-news-text{font-size:.9rem; color:rgba(255,255,255,.72);}
.footer-news{display:flex; gap:.5rem; margin-top:.6rem;}
.footer-news input{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:var(--branco);
  padding:.65rem 1rem;
  font-size:.9rem;
}
.footer-news input::placeholder{color:rgba(255,255,255,.55);}
.footer-news input:focus{outline:2px solid var(--verde-whats); outline-offset:1px;}
.news-success{color:var(--verde-whats); font-weight:600; font-size:.9rem; margin-top:.6rem;}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.6rem;
  font-size:.85rem;
  color:rgba(255,255,255,.6);
}
.footer-bottom p{margin:0;}

/* ==========================================================================
   15. BOTÃO FLUTUANTE WHATSAPP
   ========================================================================== */
.fab-whatsapp{
  position:fixed;
  right:20px; bottom:20px;
  z-index:1500;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--verde-whats);
  color:var(--azul-noite);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.5);
  transition:transform var(--transicao), box-shadow var(--transicao);
  animation:flutuar 4s ease-in-out infinite;
}
.fab-whatsapp:hover{
  transform:scale(1.12);
  box-shadow:0 16px 36px rgba(37,211,102,.6);
  color:var(--azul-noite);
}

/* ==========================================================================
   16. ANIMAÇÕES & ACESSIBILIDADE
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.visible{opacity:1; transform:none;}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
  .reveal{opacity:1; transform:none;}
}

/* ==========================================================================
   17. RESPONSIVIDADE
   ========================================================================== */
/* Tablet (<= 1024px) */
@media (max-width:1024px){
  .features-grid{grid-template-columns:repeat(2, 1fr);}
  .steps-grid{grid-template-columns:repeat(2, 1fr); gap:1.6rem;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

/* Tablet/mobile (<= 900px) */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-copy{margin-inline:auto;}
  .hero-actions,.hero-trust{justify-content:center;}
  .hero-phone{margin-top:1rem;}
  .hero-logo-card{right:2vw;}
  .contrast-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr; max-width:520px;}
  .testimonials-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto;}
}

/* Mobile (<= 768px) — menu hambúrguer */
@media (max-width:768px){
  .menu-toggle{display:flex;}

  .main-nav{
    position:fixed;
    top:var(--header-h);
    inset-inline:0;
    min-height:calc(100vh - var(--header-h));
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(12px);
    flex-direction:column;
    justify-content:flex-start;
    gap:1.6rem;
    padding:2.4rem 1.6rem 2rem;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
    overflow-y:auto;
  }
  .main-nav.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
    visibility:visible;
  }
  .nav-list{flex-direction:column; align-items:stretch; gap:0; width:100%;}
  .nav-link{
    display:block;
    font-size:1.15rem;
    padding:1rem .5rem;
    border-bottom:1px solid var(--borda);
  }
  .nav-link::after{display:none;}
  .nav-cta{width:100%;}
}

/* Mobile pequeno (<= 560px) */
@media (max-width:560px){
  .features-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .trustbar-inner{flex-direction:column; text-align:center;}
  .trustbar-list{flex-direction:column; align-items:center; text-align:left;}
  .hero-logo-card{right:50%; transform:translateX(50%); bottom:-20px;}
  .features-highlight{grid-template-columns:1fr; text-align:center;}
  .highlight-logo{width:fit-content; margin-inline:auto;}
  .footer-grid{grid-template-columns:1fr;}
  .compare-list li{justify-content:flex-start;}
  .compare-cost{width:100%; padding-left:1.5rem;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .btn-lg{width:100%;}
  .hero-actions .btn{width:100%;}
}