/* ============================================================================
   ALMA NOVE · DESIGN SYSTEM v4 — "LANÇAMENTO"
   Combinação criativa de: acilav · grotesk-zero · jeton · viaagencia · 2op
   Marca: verde #0BD39A (sistema/links) + navy #114D68 (base) + ÂMBAR (CTA, contraste).
   Conceito: o foguete da marca decola — foguete e nuvens em camadas INDEPENDENTES.
   Movimento inspirado na física da Remotion (spring/overshoot + liftoff exp).
   Fundos SEM grade quadriculada: aurora, órbitas, linhas diagonais e glow.
   Nav com hover "roll" (sem underline). Sem cursor custom, sem botão magnético.
   ============================================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* — CORES BASE — */
  --green:        #0BD39A;
  --green-light:  #3FE0B4;
  --green-soft:   #7CEBCE;
  --green-deep:   #08A87B;
  --green-dark:   #066B50;

  --navy:         #114D68;
  --navy-light:   #1C6B8F;
  --navy-soft:    #2E89B0;
  --navy-deep:    #0B3346;

  --aqua:         #21E6C1;
  --ember:        #F0592A;   /* chama do foguete (vem do rocket.svg) */
  --ink:          #06141B;
  --ink-2:        #0A222E;

  --bone:         #F4F8F6;
  --bone-2:       #E9F3EF;
  --white:        #FFFFFF;
  --mist:         #B9CCC9;

  --spark:        #FFC857;
  --amber:        #FFB23D;   /* CTA PRINCIPAL — contraste complementar ao teal, ecoa a chama */
  --amber-deep:   #FF8A1E;
  --danger:       #FF5470;
  --info:         var(--navy-soft);
  --success:      var(--green);

  /* — LINHAS / HAIRLINES — */
  --hair-light:   rgba(17,77,104,.16);
  --hair-dark:    rgba(244,248,246,.14);
  --hair-green:   rgba(11,211,154,.32);

  /* — GRADIENTES — */
  --grad-brand:      linear-gradient(120deg, var(--green) 0%, var(--navy) 100%);
  --grad-brand-soft: linear-gradient(120deg, #3FE0B4 0%, #0E8F86 48%, #114D68 100%);
  --grad-glow:       radial-gradient(60% 70% at 30% 20%, rgba(11,211,154,.35) 0%, rgba(11,211,154,0) 60%);
  --grad-deep:       linear-gradient(180deg, var(--ink) 0%, var(--navy-deep) 100%);
  --grad-cta:        /* botão primário — âmbar/dourado p/ contraste (jeton dual-radial) */
                     radial-gradient(80% 90% at 75% 100%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 55%),
                     radial-gradient(110% 85% at 50% 0%, #FFD27A 0%, #FF9E2C 100%);
  --grad-cta-green:  radial-gradient(80% 90% at 80% 100%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 55%),
                     radial-gradient(100% 80% at 50% 0%, var(--green-light) 0%, var(--green-deep) 100%);
  --grad-aurora:     conic-gradient(from 120deg at 50% 50%, #0BD39A, #114D68, #21E6C1, #0B3346, #0BD39A);

  /* — TIPOGRAFIA — */
  --font-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* — EASE (Remotion-mapeado) — */
  --ease:        cubic-bezier(.33, 1, .68, 1);    /* Easing.out(cubic) — entrada workhorse */
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1); /* Easing.out(back) — overshoot/pop */
  --ease-launch: cubic-bezier(.7, 0, .84, .2);    /* exp-in — liftoff (devagar→rápido) */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* — RAIO / ESPAÇO / SOMBRA — */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;
  --pad:  clamp(20px, 5vw, 92px);
  --shadow-soft: 0 18px 50px -20px rgba(6,20,27,.55);
  --shadow-glow: 0 0 0 1px var(--hair-green), 0 24px 70px -20px rgba(11,211,154,.5);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---------- LENIS (smooth scroll) — CSS oficial p/ o JS não brigar com o scroll nativo ---------- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }   /* Lenis cuida da suavidade; sem scroll-behavior nativo brigando */
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }                  /* trava o fundo quando o modal abre (lenis.stop()) */
.lenis.lenis-smooth iframe{ pointer-events:none; }
body{ font-family:var(--font-body); font-size:17px; line-height:1.6; font-weight:400; color:var(--ink); background:var(--ink); overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--green); color:var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--navy-light); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--green-deep); }

/* ---------- GRÃO AMBIENTE (grotesk-zero) — textura, não grade ---------- */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}

/* ============================================================================
   KEYFRAMES
   ============================================================================ */
@keyframes grain{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes spin-rev{ to{ transform:rotate(-360deg) } }
@keyframes marquee-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes marquee-right{ 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-.6deg)} 50%{transform:translateY(-18px) rotate(.6deg)} }
@keyframes glow-pulse{ 0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)} }
@keyframes cue{ 50%{opacity:.15} }
@keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes aurora-drift{ 0%{transform:translate(0,0) rotate(0deg) scale(1)} 33%{transform:translate(6%,-4%) rotate(40deg) scale(1.12)} 66%{transform:translate(-5%,5%) rotate(-30deg) scale(.95)} 100%{transform:translate(0,0) rotate(0deg) scale(1)} }
@keyframes wave{ 0%,100%{height:22%} 50%{height:88%} }
@keyframes ping{ 0%{transform:scale(.6); opacity:.8} 80%,100%{transform:scale(2.4); opacity:0} }
@keyframes twinkle{ 0%,100%{opacity:.25; transform:scale(.7)} 50%{opacity:1; transform:scale(1)} }
@keyframes flame{ 0%,100%{ transform:translateX(-50%) scaleY(1) scaleX(1); opacity:.95 } 50%{ transform:translateX(-50%) scaleY(1.28) scaleX(.82); opacity:1 } }
@keyframes thrust{ 0%,100%{ opacity:.5; transform:translateX(-50%) scale(1) } 50%{ opacity:.9; transform:translateX(-50%) scale(1.15) } }
@keyframes lines-pan{ to{ background-position:600px 0, 0 0 } }
@keyframes draw{ to{ stroke-dashoffset:0 } }
/* nuvens — deriva contínua e INDEPENDENTE do foguete (camadas em profundidades diferentes) */
@keyframes cloud-drift-a{ 0%,100%{ transform:scale(1.04) translate(0,0) } 50%{ transform:scale(1.04) translate(22px,-7px) } }
@keyframes cloud-drift-b{ 0%,100%{ transform:scale(-1.32,1.32) translate(0,7%) } 50%{ transform:scale(-1.32,1.32) translate(20px,7%) } }

/* ============================================================================
   FUNDOS ANIMADOS (substituem a grade) — reutilizáveis em todas as dobras
   ============================================================================ */
/* aurora: blobs de marca borrados que derivam */
.bg-aurora{ position:absolute; inset:-25%; z-index:0; pointer-events:none; overflow:hidden; filter:blur(72px); opacity:.5; }
.bg-aurora span{ position:absolute; border-radius:50%; background:var(--grad-aurora); mix-blend-mode:screen; }
.bg-aurora .a1{ width:54vw; height:54vw; top:-8%; left:-8%; animation:aurora-drift 24s ease-in-out infinite; }
.bg-aurora .a2{ width:42vw; height:42vw; bottom:-12%; right:-6%; animation:aurora-drift 30s ease-in-out infinite reverse; opacity:.85; }
.bg-aurora .a3{ width:30vw; height:30vw; top:30%; left:46%; animation:aurora-drift 19s ease-in-out infinite; opacity:.6; }
.section:not(.dark) .bg-aurora{ opacity:.22; mix-blend-mode:normal; filter:blur(86px); }

/* órbitas: anéis concêntricos finos girando (tema espacial, casa com o foguete) */
.bg-orbits{ position:absolute; z-index:0; pointer-events:none; width:760px; height:760px; right:-200px; top:50%; translate:0 -50%; opacity:.5; animation:spin 60s linear infinite; }
.bg-orbits i{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid var(--hair-dark); }
.section:not(.dark) .bg-orbits i{ border-color:var(--hair-light); }
.bg-orbits i:nth-child(1){ width:760px; height:760px; }
.bg-orbits i:nth-child(2){ width:560px; height:560px; }
.bg-orbits i:nth-child(3){ width:360px; height:360px; }
.bg-orbits i:nth-child(2)::after,.bg-orbits i:nth-child(3)::after{ content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.bg-orbits.left{ right:auto; left:-220px; animation-name:spin-rev; }

/* linhas diagonais finas (direcionais — não é grade) com leve panning */
.bg-lines{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    repeating-linear-gradient(118deg, var(--hair-light) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(118deg, var(--hair-light) 0 1px, transparent 1px 120px);
  background-size:200px 200px, 600px 600px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000, transparent);
  mask-image:radial-gradient(80% 70% at 50% 40%, #000, transparent);
  animation:lines-pan 24s linear infinite; }
.dark .bg-lines{ background-image:
    repeating-linear-gradient(118deg, var(--hair-dark) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(118deg, var(--hair-dark) 0 1px, transparent 1px 120px); }

/* glow de canto suave que pulsa */
.bg-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40% 50% at 12% 0%, rgba(11,211,154,.16), transparent 60%),
             radial-gradient(46% 60% at 100% 100%, rgba(28,107,143,.22), transparent 60%);
  animation:glow-pulse 9s ease-in-out infinite; }

/* ============================================================================
   LAYOUT HELPERS
   ============================================================================ */
.section{ position:relative; padding:clamp(84px,13vh,170px) var(--pad); overflow:hidden; background:var(--bone); color:var(--ink); }
.section.dark{ background:var(--grad-deep); color:var(--bone); }
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{ color:var(--white); }
.wrap{ max-width:1280px; margin-inline:auto; position:relative; z-index:2; }
.eyebrow{ font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--green-deep); display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; }
.dark .eyebrow{ color:var(--green); }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.6; }
.section-head{ max-width:780px; margin-bottom:60px; }
.lead{ font-size:clamp(18px,2vw,22px); color:var(--navy); line-height:1.55; }
.dark .lead{ color:var(--mist); }

/* ============================================================================
   TIPOGRAFIA — escala completa
   ============================================================================ */
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.02em; color:var(--navy); }
.display{ font-family:var(--font-display); font-weight:800; font-size:clamp(56px,9.4vw,150px); line-height:.9; letter-spacing:-.035em; }
h1{ font-size:clamp(42px,6vw,90px); letter-spacing:-.03em; }
h2{ font-size:clamp(33px,4.6vw,62px); }
h3{ font-size:clamp(25px,3vw,40px); }
h4{ font-size:clamp(21px,2.4vw,29px); font-weight:600; }
h5{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
h6{ font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.body-lg{ font-size:clamp(18px,2vw,22px); line-height:1.55; }
.body{ font-size:17px; line-height:1.6; }
.body-sm{ font-size:15px; line-height:1.6; }
.caption{ font-size:13px; line-height:1.5; color:var(--navy-light); }
.label,.mono{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.text-gradient{ background:var(--grad-brand-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-green{ color:var(--green-deep); } .dark .text-green{ color:var(--green); }

/* ============================================================================
   1 · HERO — "LANÇAMENTO" (primeira dobra · showstopper)
   ============================================================================ */
.hero{ position:relative; min-height:100vh; min-height:100svh; background:var(--ink); color:var(--bone); overflow:hidden; display:flex; align-items:center; padding-top:152px; padding-bottom:60px; }

/* campo de estrelas em 3 camadas (parallax / sensação de velocidade) */
.stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.stars i{ position:absolute; border-radius:50%; background:var(--green-soft); box-shadow:0 0 8px var(--green); animation:twinkle 4s ease-in-out infinite; }

.hero-inner{ position:relative; z-index:3; width:100%; max-width:1280px; margin-inline:auto; display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; padding:0 var(--pad); }

/* selo glass */
.hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--hair-green); border-radius:var(--r-pill); background:rgba(11,211,154,.06); backdrop-filter:blur(8px); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--green-soft); margin-bottom:30px; }
.hero-badge .dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.hero-badge .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--green); animation:ping 1.8s var(--ease) infinite; }

.hero h1{ color:var(--white); margin-bottom:26px; font-size:clamp(40px,5.4vw,82px); line-height:.98; letter-spacing:-.035em; }
.hero h1 .gsap_split_word{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .gsap_split_word > span{ display:inline-block; will-change:transform; }
.hero-sub{ font-size:clamp(17px,1.5vw,21px); color:var(--mist); max-width:48ch; margin-bottom:38px; }
.hero-sub b{ color:var(--green-soft); font-weight:600; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* — palco do FOGUETE — */
.rocket-stage{ position:relative; height:560px; display:flex; align-items:center; justify-content:center; }
/* glow / aurora atrás do foguete */
.rocket-stage .halo{ position:absolute; width:460px; height:460px; border-radius:50%; background:var(--grad-glow); filter:blur(10px); animation:glow-pulse 7s ease-in-out infinite; }
/* anel orbital decorativo */
.rocket-stage .ring{ position:absolute; width:420px; height:420px; border-radius:50%; border:1px dashed rgba(124,235,206,.25); animation:spin 40s linear infinite; }
.rocket-stage .ring::after{ content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }

/* o foguete (rocket_only.svg) — a chama já vem dentro do SVG; aqui só reforçamos com luz e movimento */
.rocket{ position:relative; z-index:3; width:min(96%,460px); filter:drop-shadow(0 28px 46px rgba(11,211,154,.28)); }
.rocket .ship{ display:block; width:100%; animation:bob 4.5s ease-in-out infinite; }
/* NUVENS — camadas separadas (clouds_only.svg), profundidades de parallax distintas + deriva própria */
.clouds{ position:absolute; inset:0; margin:auto; width:min(96%,460px); aspect-ratio:1/1; pointer-events:none; }
.clouds-back{ z-index:1; opacity:.9; animation:cloud-drift-a 17s ease-in-out infinite; }
.clouds-front{ z-index:4; opacity:.78; animation:cloud-drift-b 21s ease-in-out infinite; }
/* luz de propulsão: glow quente, amplo e tolerante a posição (fica atrás, vaza pela chama do SVG) */
.exhaust-glow{ position:absolute; left:50%; top:58%; z-index:-1; transform:translateX(-50%); width:58%; height:46%; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 32%, rgba(255,200,87,.55) 0%, rgba(240,89,42,.3) 42%, transparent 72%);
  filter:blur(16px); animation:thrust .5s ease-in-out infinite; pointer-events:none; }
/* trilha de fumaça (gerada via JS no liftoff) */
.smoke{ position:absolute; left:50%; bottom:54px; z-index:1; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle, rgba(220,235,232,.6), rgba(220,235,232,0) 70%); pointer-events:none; }
/* partículas de ignição (geradas via JS) */
.spark-p{ position:absolute; left:50%; top:64%; margin:-4px 0 0 -4px; z-index:4; width:8px; height:8px; border-radius:50%; background:var(--spark); box-shadow:0 0 9px var(--spark); pointer-events:none; }

/* cards flutuantes de capacidade */
.cap-card{ position:absolute; z-index:5; display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:14px; background:rgba(6,20,27,.72); border:1px solid var(--hair-green); backdrop-filter:blur(10px); font-family:var(--font-body); font-size:13px; font-weight:600; color:#fff; box-shadow:var(--shadow-soft); animation:float 6s var(--ease) infinite; }
.cap-card .ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--grad-brand-soft); color:var(--ink); flex:0 0 auto; }
.cap-card .ic svg{ width:16px; height:16px; }
.cap-card small{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-soft); font-weight:500; }
.cap-card.c1{ top:28px; right:6px; animation-delay:-1s; }
.cap-card.c2{ bottom:96px; left:-6px; animation-delay:-3s; }
.cap-card .spark-num{ font-family:var(--font-display); font-weight:800; color:var(--green); font-size:16px; }

/* scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--mist); font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; animation:cue 2.6s infinite; }
.scroll-cue .mouse{ width:22px; height:36px; border:1.5px solid var(--mist); border-radius:14px; position:relative; }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:3px; height:7px; border-radius:2px; background:var(--green); animation:cue 1.4s infinite; }

/* ============================================================================
   2 · BOTÕES (acilav .primary-btn · jeton char-stagger · 2op .btn-plus · grotesk ghost)
   ============================================================================ */
.btn-row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.primary-btn{ --i:0; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:58px; padding:0 32px; border:none; border-radius:var(--r-pill); cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:.01em; color:var(--ink); background:var(--grad-cta); overflow:hidden; isolation:isolate; box-shadow:0 14px 34px -12px rgba(255,138,30,.7); transition:transform .25s var(--ease), box-shadow .3s var(--ease); }
.primary-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 52px -14px rgba(255,138,30,.85); }
.primary-btn:active{ transform:translateY(0) scale(.98); }
/* variante verde (marca) — quando precisar do CTA na cor primária */
.primary-btn.green{ background:var(--grad-cta-green); box-shadow:0 14px 34px -12px rgba(11,211,154,.75); }
.primary-btn.green:hover{ box-shadow:0 22px 52px -14px rgba(11,211,154,.9); }
.primary-btn .label{ position:relative; display:inline-flex; overflow:hidden; white-space:nowrap; flex:0 0 auto; }
.primary-btn .label .real,.primary-btn .label .clone{ white-space:nowrap; }
.primary-btn .label .c{ display:inline-block; white-space:pre; transition:transform .4s var(--ease) calc(18ms * var(--i)); }
.primary-btn .label .clone{ position:absolute; left:0; top:0; }
.primary-btn .label .clone .c{ transform:translateY(110%); }
.primary-btn:hover .label .real .c{ transform:translateY(-110%); }
.primary-btn:hover .label .clone .c{ transform:translateY(0); }
.primary-btn .ic{ width:18px; height:18px; transition:transform .3s var(--ease); }
.primary-btn:hover .ic{ transform:translate(3px,-3px); }
.primary-btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:220% 100%; background-position:200% 0; }
.primary-btn:hover::before{ transition:background-position .8s var(--ease); background-position:-120% 0; }

.btn-plus{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none; will-change:transform; }
.btn-plus .texto{ padding:16px 26px; border:1px solid currentColor; border-radius:var(--r-pill); font-family:var(--font-body); font-weight:600; font-size:14px; transition:.25s var(--ease); }
.btn-plus .plus{ width:54px; height:54px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; transition:.25s var(--ease); }
.btn-plus .plus svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.btn-plus:hover .texto{ background:var(--green); border-color:var(--green); color:var(--ink); }
.btn-plus:hover .plus{ background:var(--green); border-color:var(--green); color:var(--ink); transform:rotate(90deg); }
.btn-plus.light{ color:var(--white); } .btn-plus.dark-ink{ color:var(--navy); }

.btn-ghost{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.04em; border:1px solid var(--hair-dark); color:var(--bone); background:transparent; padding:17px 26px; border-radius:var(--r-pill); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.section:not(.dark) .btn-ghost{ border-color:var(--hair-light); color:var(--navy); }
.btn-ghost:hover{ background:var(--green); border-color:var(--green); color:var(--ink); }
.btn-ghost svg{ width:16px; height:16px; }

.btn-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--green-deep); cursor:pointer; }
.dark .btn-link{ color:var(--green); }
.btn-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn-link:hover svg{ transform:translateX(5px); }
.primary-btn:disabled,.btn-plus:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.4); }

/* ============================================================================
   3 · BADGES
   ============================================================================ */
.custom-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; box-shadow:inset 0 0 0 1px var(--hair-light); color:var(--navy); }
.custom-badge + .custom-badge{ margin-left:8px; }
.custom-badge.solid{ background:var(--green); color:var(--ink); box-shadow:none; }
.custom-badge.navy{ background:var(--navy); color:var(--white); box-shadow:none; }
.custom-badge.glass{ background:rgba(11,211,154,.10); color:var(--green-deep); box-shadow:inset 0 0 0 1px var(--hair-green); }
.dark .custom-badge.glass{ color:var(--green-soft); }
.custom-badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.custom-badge.dot-live .dot{ background:var(--green); box-shadow:0 0 8px var(--green); animation:glow-pulse 1.6s infinite; }

/* ============================================================================
   4 · CARDS (2op group-hover · viaagencia card-case · jeton glass bento)
   ============================================================================ */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }   /* faixa de autoridade — 4 números; minmax(0,..) p/ colunas iguais c/ nowrap */

.borda{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:34px; background:var(--white); border:1px solid var(--hair-light); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.dark .borda{ background:rgba(255,255,255,.03); border-color:var(--hair-dark); backdrop-filter:blur(8px); }
.borda:hover{ transform:translateY(-8px); box-shadow:var(--shadow-glow); border-color:var(--hair-green); }
.borda .card-ic{ width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--grad-brand-soft); color:var(--ink); margin-bottom:22px; transition:transform .5s var(--ease); }
.borda:hover .card-ic{ transform:rotate(-6deg) scale(1.08); }
.borda .card-ic svg{ width:26px; height:26px; }
.borda h4{ margin-bottom:10px; }
.borda p{ color:var(--navy-light); font-size:15.5px; }
.dark .borda p{ color:var(--mist); }
.borda::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); pointer-events:none; background:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%), rgba(11,211,154,.16), transparent 70%); }
.borda:hover::before{ opacity:1; }

/* O QUE FAZEMOS — 3 pilares de execução + barra-fundação (Método 3A3R) */
.svc-pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-pillars .borda{ display:flex; flex-direction:column; }

/* BARRA-FUNDAÇÃO — Método 3A3R em destaque (a base sob os pilares) */
.svc-base{ margin-top:20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; padding:30px 36px;
  background:
    radial-gradient(130% 200% at 0% 0%, rgba(11,211,154,.18), transparent 58%),
    linear-gradient(120deg, rgba(11,211,154,.07), rgba(17,77,104,.12)); }
.svc-base .card-ic{ width:64px; height:64px; margin-bottom:0; align-self:center; }
.svc-base .card-ic svg{ width:30px; height:30px; }
.svc-base-txt h3{ color:#fff; font-size:clamp(22px,2.4vw,30px); margin:11px 0 8px; }
.svc-base-txt p{ color:var(--mist); font-size:15.5px; max-width:66ch; }
.svc-base-txt p b{ color:var(--green-soft); font-weight:700; }
.svc-base-cta{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:var(--r-pill); background:var(--green); color:var(--ink); font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; box-shadow:0 12px 32px -12px rgba(11,211,154,.8); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.svc-base-cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.svc-base-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(11,211,154,.9); }
.svc-base-cta:hover svg{ transform:translateX(4px); }

.step-card .step-n{ font-family:var(--font-display); font-weight:800; font-size:56px; line-height:1; background:var(--grad-brand-soft); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.92; }
.step-card{ position:relative; }
.step-card .arrow{ position:absolute; top:34px; right:28px; color:var(--green); opacity:.45; }

.quote-card{ background:var(--white); border-radius:var(--r-lg); padding:34px; border:1px solid var(--hair-light); }
.dark .quote-card{ background:rgba(255,255,255,.04); border-color:var(--hair-dark); }
.quote-card .stars-row{ color:var(--spark); display:flex; gap:3px; margin-bottom:16px; }
.quote-card blockquote{ font-size:17px; line-height:1.6; color:var(--navy); margin-bottom:22px; }
.dark .quote-card blockquote{ color:var(--bone); }
.quote-card .who{ display:flex; align-items:center; gap:12px; }
.quote-card .who .av{ width:44px; height:44px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:var(--ink); font-family:var(--font-display); font-weight:800; }
.quote-card .who b{ display:block; color:var(--navy); } .dark .quote-card .who b{ color:var(--white); }
.quote-card .who span{ font-size:13px; color:var(--navy-light); } .dark .quote-card .who span{ color:var(--mist); }

.offer-card{ position:relative; border-radius:var(--r-xl); padding:clamp(28px,4vw,52px); overflow:hidden; background:var(--grad-deep); color:var(--bone); border:1px solid var(--hair-green); }
.offer-card .offer-glow{ position:absolute; inset:0; z-index:0; background:var(--grad-glow); animation:glow-pulse 7s infinite; }
.offer-card > *{ position:relative; z-index:1; }
.offer-card ul{ list-style:none; display:grid; gap:14px; margin:24px 0; }
.offer-card li{ display:flex; gap:12px; align-items:flex-start; color:var(--mist); }
.offer-card li svg{ flex:0 0 auto; width:22px; height:22px; color:var(--green); margin-top:1px; }

.chips{ display:flex; flex-wrap:wrap; gap:14px; }
.chip{ display:inline-flex; align-items:center; gap:12px; padding:16px 22px; border-radius:var(--r-pill); background:var(--white); border:1px solid var(--hair-light); cursor:pointer; font-weight:600; color:var(--navy); transition:.35s var(--ease); }
.dark .chip{ background:rgba(255,255,255,.04); border-color:var(--hair-dark); color:var(--bone); }
.chip .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); padding:3px 9px; border-radius:var(--r-pill); background:rgba(11,211,154,.12); }
.dark .chip .tag{ color:var(--green-soft); }
.chip:hover{ transform:translateY(-4px); border-color:var(--green); box-shadow:0 16px 34px -18px rgba(11,211,154,.7); }
.chip:hover .tag{ background:var(--green); color:var(--ink); }

/* — FAIXA DE AUTORIDADE: números grandes (count-up) — momento focal, distinto da faixa do hero — */
.stat-big{ position:relative; padding:8px 8px 4px; }
.stat-big + .stat-big::before{ content:""; position:absolute; left:-1px; top:14%; height:72%; width:1px; background:var(--hair-light); } /* divisória vertical entre colunas (some no mobile) */
.stat-big .stat-n{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4.4vw,60px); line-height:.92; letter-spacing:-.04em; color:var(--navy); display:block; white-space:nowrap; } /* cap p/ "+R$ 15 mi" caber na coluna 1/4 sem cortar */
.stat-big .stat-n .text-gradient{ font-weight:800; }
.stat-big .stat-l{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-light); margin-top:12px; display:block; }
.dark .stat-big .stat-n{ color:var(--white); } .dark .stat-big .stat-l{ color:var(--mist); }

/* ============================================================================
   5 · INPUTS / FORM (jeton floating label + focus glow)
   ============================================================================ */
.form{ display:grid; gap:18px; max-width:440px; }
.field{ position:relative; }
.field input,.field textarea{ width:100%; padding:23px 18px 11px; font-family:var(--font-body); font-size:16px; color:var(--white); background:rgba(255,255,255,.04); border:1px solid var(--hair-dark); border-radius:var(--r-md); transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.section:not(.dark) .field input,.section:not(.dark) .field textarea{ color:var(--ink); background:var(--white); border-color:var(--hair-light); }
.field label{ position:absolute; left:18px; top:18px; font-size:15px; color:var(--mist); pointer-events:none; transition:transform .25s var(--ease), color .25s var(--ease), font-size .25s var(--ease); transform-origin:left top; }
.section:not(.dark) .field label{ color:var(--navy-light); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(11,211,154,.18); }
.field input:focus + label,.field input:not(:placeholder-shown) + label,.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{ transform:translateY(-13px) scale(.78); color:var(--green); }
.field input::placeholder,.field textarea::placeholder{ color:transparent; }
.field-help{ font-size:12.5px; color:var(--navy-light); display:flex; align-items:center; gap:6px; }
.dark .field-help{ color:var(--mist); }

/* ============================================================================
   6 · NAVBAR (sticky blur + hover "roll" cinético — sem underline)
   ============================================================================ */
/* HEADER FIXO — empilha a faixa de aviso + a navbar (sem sobreposição) */
.site-head{ position:fixed; top:0; left:0; right:0; z-index:8000; }

/* FAIXA DE AVISO — identidade de "alerta/obra": ícone + fita de obra animada (âmbar) */
.announce{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:13px; padding:11px 20px; color:var(--bone);
  background:linear-gradient(90deg, #0a2330 0%, #0e2e3f 50%, #0a2330 100%);
  border-top:1px solid rgba(255,200,87,.20); border-bottom:1px solid rgba(255,200,87,.32);
  box-shadow:0 1px 22px -8px rgba(255,200,87,.35);
  max-height:64px; transition:max-height .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease), border-color .3s var(--ease); }
/* fita de obra — listras diagonais âmbar que deslizam (referência a "construção") */
.announce::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:repeating-linear-gradient(45deg, rgba(255,200,87,.11) 0 12px, transparent 12px 30px);
  background-size:42px 42px; animation:hazard-pan 2.6s linear infinite; }
@keyframes hazard-pan{ to{ background-position:42px 0; } }
/* sheen — luz que varre a faixa (a animação que ficou aprovada) */
.announce::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%); transform:translateX(-110%); animation:announce-sheen 7s var(--ease) infinite; }
@keyframes announce-sheen{ 0%,60%{ transform:translateX(-110%); } 100%{ transform:translateX(110%); } }
/* ÍCONE DE ALERTA — triângulo âmbar pulsante */
.announce-icon{ position:relative; z-index:1; flex:0 0 auto; display:inline-flex; color:var(--spark); filter:drop-shadow(0 0 6px rgba(255,200,87,.6)); animation:alert-pulse 2.2s var(--ease) infinite; }
.announce-icon svg{ display:block; width:18px; height:18px; }
@keyframes alert-pulse{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.13); opacity:1; } }
.announce-txt{ position:relative; z-index:1; display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:11px; font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.announce-txt .ac-lead{ color:var(--bone); }
.announce-txt .ac-rest{ color:var(--mist); }
.announce-txt .ac-rest strong{ color:var(--green); font-weight:700; }
.announce-txt .ac-sep{ width:5px; height:5px; border-radius:50%; background:var(--spark); box-shadow:0 0 8px rgba(255,200,87,.7); }
/* ao rolar a página, a faixa recolhe e a navbar sobe ao topo */
.site-head.scrolled .announce{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-width:0; }

.nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:15px var(--pad); background:rgba(6,20,27,.5); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair-dark); transition:padding .3s var(--ease), background .3s var(--ease); }
.nav.shrink{ padding:10px var(--pad); background:rgba(6,20,27,.85); }
/* logo oficial (SVG) — branca+verde sobre escuro */
.brand{ display:inline-flex; align-items:center; }
.brand img{ display:block; height:38px; width:auto; transition:height .3s var(--ease); }
.nav.shrink .brand img{ height:32px; }
.footer .brand img{ height:56px; }
.nav-links{ display:flex; gap:30px; align-items:center; }
/* hover ROLL: a palavra sobe e uma cópia verde (negrito) entra por baixo */
.nav-links a{ position:relative; display:inline-block; overflow:hidden; height:1.5em; line-height:1.5em; font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--mist); }
.nav-links a .txt{ display:block; will-change:transform; transition:transform .42s var(--ease); }
.nav-links a::after{ content:attr(data-label); position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; color:var(--green); font-weight:600; transform:translateY(101%); transition:transform .42s var(--ease); }
.nav-links a:hover .txt{ transform:translateY(-101%); }
.nav-links a:hover::after{ transform:translateY(0); }
/* item ativo: ponto orbital verde */
.nav-links a.active{ color:var(--white); }

/* ============================================================================
   7 · MODAL (jeton glass / backdrop blur)
   ============================================================================ */
.modal-overlay{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(6,20,27,.55); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{ position:relative; width:min(520px,100%); border-radius:var(--r-xl); padding:42px; background:var(--grad-deep); border:1px solid var(--hair-green); color:var(--bone); box-shadow:var(--shadow-glow); transform:translateY(26px) scale(.96); transition:transform .45s var(--ease-pop); }
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal .close{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid var(--hair-dark); background:transparent; color:var(--bone); display:flex; align-items:center; justify-content:center; transition:.25s var(--ease); }
.modal .close:hover{ background:var(--green); color:var(--ink); border-color:var(--green); transform:rotate(90deg); }

/* ============================================================================
   8 · TOOLTIP
   ============================================================================ */
.tip{ position:relative; display:inline-flex; cursor:help; border-bottom:1px dashed var(--green-deep); }
.dark .tip{ border-color:var(--green); }
.tip .tip-body{ position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--ink); color:var(--bone); font-family:var(--font-body); font-size:12.5px; line-height:1.4; font-weight:400; letter-spacing:0; text-transform:none; padding:10px 14px; border-radius:10px; width:max-content; max-width:240px; border:1px solid var(--hair-green); box-shadow:var(--shadow-soft); opacity:0; pointer-events:none; transition:.25s var(--ease); z-index:50; }
.tip .tip-body::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ink); }
.tip:hover .tip-body{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================================
   9 · ÍCONES
   ============================================================================ */
.icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:14px; }
.icon-cell{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 10px; border-radius:var(--r-md); border:1px solid var(--hair-light); background:var(--white); transition:.35s var(--ease); }
.dark .icon-cell{ background:rgba(255,255,255,.03); border-color:var(--hair-dark); }
.icon-cell:hover{ border-color:var(--green); transform:translateY(-5px); box-shadow:0 14px 30px -16px rgba(11,211,154,.6); }
.icon-cell svg{ width:30px; height:30px; color:var(--navy); transition:.35s var(--ease); }
.dark .icon-cell svg{ color:var(--green-soft); }
.icon-cell:hover svg{ color:var(--green); transform:scale(1.15); }
.icon-cell span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--navy-light); }
.dark .icon-cell span{ color:var(--mist); }

/* ============================================================================
   PALETA / SWATCHES (REFEITOS — estrutura uniforme, sem bug)
   ============================================================================ */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px; }
/* card de cor = UM bloco sólido: faixa de cor full-bleed em cima + info embaixo (sem azulejo arredondado interno) */
.swatch{ position:relative; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; border:1px solid var(--hair-light); background:var(--white); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.dark .swatch{ background:#0E2733; border-color:var(--hair-dark); }
.swatch:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.swatch .chip{ height:104px; position:relative; display:flex; align-items:flex-end; padding:12px; }
.swatch .chip .hexbtn{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.04em; color:#fff; background:rgba(6,20,27,.34); border:1px solid rgba(255,255,255,.22); padding:5px 10px; border-radius:var(--r-pill); cursor:pointer; backdrop-filter:blur(4px); transition:.2s var(--ease); }
.swatch .chip .hexbtn:hover{ background:rgba(6,20,27,.55); }
.swatch .chip .hexbtn.dark-txt{ color:var(--ink); background:rgba(255,255,255,.5); border-color:rgba(0,0,0,.12); }
.swatch .meta{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.swatch .role{ align-self:flex-start; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); font-weight:500; padding:3px 9px; border-radius:var(--r-pill); background:rgba(11,211,154,.1); }
.dark .swatch .role{ color:var(--green-soft); }
.swatch .name{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy); letter-spacing:-.01em; }
.dark .swatch .name{ color:var(--white); }
.swatch .vals{ display:grid; gap:3px; margin-top:auto; }
.swatch .vals code{ font-family:var(--font-mono); font-size:11.5px; color:var(--navy-light); display:flex; justify-content:space-between; gap:10px; }
.dark .swatch .vals code{ color:var(--mist); }
.swatch .vals code b{ color:var(--navy); font-weight:600; } .dark .swatch .vals code b{ color:var(--bone); }

/* cards de gradiente (uniformes) */
.grad-card{ position:relative; height:150px; border-radius:18px; overflow:hidden; border:1px solid var(--hair-light); display:flex; align-items:flex-end; padding:16px; }
.dark .grad-card{ border-color:var(--hair-dark); }
.grad-card .gname{ position:relative; z-index:1; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:#fff; background:rgba(6,20,27,.4); padding:6px 12px; border-radius:var(--r-pill); backdrop-filter:blur(4px); }

/* escala tipográfica */
.type-row{ display:flex; align-items:baseline; gap:20px; padding:18px 0; border-bottom:1px solid var(--hair-light); flex-wrap:wrap; }
.dark .type-row{ border-color:var(--hair-dark); }
.type-row .spec{ font-family:var(--font-mono); font-size:11.5px; color:var(--navy-light); min-width:260px; }
.dark .type-row .spec{ color:var(--mist); }

/* tabela de specs */
.spec-table{ width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:13.5px; }
.spec-table th,.spec-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--hair-light); }
.dark .spec-table th,.dark .spec-table td{ border-color:var(--hair-dark); }
.spec-table th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); }
.dark .spec-table th{ color:var(--green); }
.spec-table td{ color:var(--navy); } .dark .spec-table td{ color:var(--mist); }
.spec-table code{ background:rgba(11,211,154,.10); color:var(--green-deep); padding:2px 7px; border-radius:6px; font-family:var(--font-mono); font-size:12px; }
.dark .spec-table code{ color:var(--green-soft); }

/* marquee duplo */
/* faixa-ponte entre Autoridade (clara) e o Método (escuro): banda fina, hairline
   embaixo p/ separar do funil, e padding vertical enxuto (não é seção cheia). */
.marquee-band{ padding-top:46px; padding-bottom:46px; border-bottom:1px solid var(--hair-dark); }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee .track{ display:flex; gap:48px; width:max-content; animation:marquee-left 28s linear infinite; }
.marquee.rev .track{ animation:marquee-right 32s linear infinite; }
.marquee .item{ display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:800; font-size:clamp(22px,3vw,42px); color:var(--navy); white-space:nowrap; letter-spacing:-.02em; }
.dark .marquee .item{ color:var(--bone); }
.marquee.outline .item{ color:transparent; -webkit-text-stroke:1.4px var(--green); }
.marquee .item .dot{ width:11px; height:11px; border-radius:50%; background:var(--green); }

/* ============================================================================
   10 · DESAFIOS — "Qual é o seu desafio?" (cards-link p/ WhatsApp · seção clara)
   Grid de auto-qualificação: cada item é um <a> que abre o WhatsApp com a dor
   pré-preenchida. Item 7 ("não sei por onde começar") ocupa a largura toda como
   convite ao diagnóstico. Hover eleva, a tag fica verde e a seta "→ WhatsApp"
   desliza pra dentro.
   ============================================================================ */
.desafios-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:50px; }
.desafio-card{ position:relative; display:flex; flex-direction:column; gap:14px; padding:26px 28px; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--hair-light); color:var(--navy); cursor:pointer; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.desafio-card::before{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); background:radial-gradient(420px 220px at 12% 0%, rgba(11,211,154,.12), transparent 70%); }
.desafio-card:hover{ transform:translateY(-6px); border-color:var(--green); box-shadow:0 22px 48px -22px rgba(11,211,154,.7); }
.desafio-card:hover::before{ opacity:1; }
.desafio-card:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
/* topo: a tag (etapa 3A3R) + a seta WhatsApp que aparece no hover */
.desafio-card .top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.desafio-card .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); padding:4px 10px; border-radius:var(--r-pill); background:rgba(11,211,154,.12); transition:background .35s var(--ease), color .35s var(--ease); }
.desafio-card:hover .tag{ background:var(--green); color:var(--ink); }
.desafio-card .go{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); opacity:0; transform:translateX(-8px); transition:opacity .35s var(--ease), transform .35s var(--ease); white-space:nowrap; }
.desafio-card .go svg{ width:15px; height:15px; }
.desafio-card:hover .go{ opacity:1; transform:translateX(0); }
.desafio-card .frase{ font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2vw,24px); line-height:1.12; letter-spacing:-.02em; color:var(--navy); }
.desafio-card .benef{ font-size:14.5px; line-height:1.5; color:var(--navy-light); margin-top:auto; }
/* item de destaque (largura toda) — convite ao diagnóstico */
.desafio-card.feature{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:22px; background:var(--grad-deep); border-color:var(--hair-green); color:var(--bone); }
.desafio-card.feature::before{ background:var(--grad-glow); opacity:.7; }
.desafio-card.feature:hover{ box-shadow:var(--shadow-glow); }
.desafio-card.feature .feature-ic{ flex:0 0 auto; width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--grad-brand-soft); color:var(--ink); }
.desafio-card.feature .feature-ic svg{ width:28px; height:28px; }
.desafio-card.feature .feature-txt{ display:flex; flex-direction:column; gap:6px; }
.desafio-card.feature .frase{ color:var(--white); }
.desafio-card.feature .benef{ color:var(--mist); margin-top:0; }
.desafio-card.feature .go{ margin-left:auto; color:var(--green-soft); opacity:1; transform:none; font-size:12px; }

/* ============================================================================
   11 · MÉTODO — FUNIL 3A3R (a seção-show · seção escura)
   Lê como um FUNIL: do topo largo ao fundo estreito, 6 etapas em sequência.
   Uma "trilha de fluxo" central desce o funil (linha + luz viajante). O estado
   BASE é 100% legível (sem JS / com reduced-motion): o funil aparece inteiro.
   O JS só adiciona a classe .js-anim na seção p/ ocultar e revelar em sequência.
   ============================================================================ */
.metodo-intro{ font-size:clamp(18px,2vw,22px); color:var(--mist); max-width:62ch; margin-top:18px; }
.funnel{ position:relative; max-width:880px; margin:64px auto 0; }
/* trilha central: linha de base + luz que "preenche" de cima pra baixo */
.funnel-track{ position:absolute; top:24px; bottom:24px; left:50%; width:2px; transform:translateX(-50%); z-index:0; pointer-events:none; }
.funnel-track .rail{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(124,235,206,.05), rgba(124,235,206,.22) 12%, rgba(124,235,206,.22) 88%, rgba(124,235,206,.05)); }
.funnel-track .fill{ position:absolute; top:0; left:0; right:0; height:0; background:linear-gradient(180deg, var(--green-light), var(--green-deep)); box-shadow:0 0 14px rgba(11,211,154,.7); transform-origin:top; }
/* a luz/"comet" que viaja descendo o funil */
.funnel-track .comet{ position:absolute; top:0; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--green); box-shadow:0 0 18px 5px rgba(11,211,154,.85); opacity:0; }

.funnel-steps{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; }
/* cada etapa: card glass; a LARGURA decresce do topo ao fundo (forma de funil) */
.funnel-step{ position:relative; margin-inline:auto; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:24px clamp(22px,3vw,34px); border-radius:var(--r-lg); background:rgba(255,255,255,.035); border:1px solid var(--hair-dark); backdrop-filter:blur(8px); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
/* AMPULHETA: afunila até a cintura (3→4 = a conversão) e reabre na base */
.funnel-step:nth-child(1){ width:100%; }
.funnel-step:nth-child(2){ width:80%; }
.funnel-step:nth-child(3){ width:60%; }
.funnel-step:nth-child(4){ width:60%; }
.funnel-step:nth-child(5){ width:80%; }
.funnel-step:nth-child(6){ width:100%; }
.funnel-step::after{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); background:radial-gradient(300px 160px at 18% 0%, rgba(11,211,154,.14), transparent 70%); }
.funnel-step:hover{ transform:translateY(-3px); border-color:var(--hair-green); box-shadow:0 22px 60px -28px rgba(11,211,154,.6); }
.funnel-step:hover::after{ opacity:1; }
.funnel-step .n{ flex:0 0 auto; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.03em; background:var(--grad-brand-soft); -webkit-background-clip:text; background-clip:text; color:transparent; min-width:1.6em; }
.funnel-step .body h4{ color:var(--white); margin-bottom:4px; }
.funnel-step .body p{ color:var(--mist); font-size:15px; line-height:1.5; }
/* pingo conector na trilha, alinhado a cada etapa */
.funnel-step .pin-dot{ position:absolute; left:50%; bottom:-10px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--navy-light); box-shadow:0 0 0 4px var(--ink); z-index:2; transition:background .4s var(--ease), box-shadow .4s var(--ease); }
.funnel-step.lit .pin-dot{ background:var(--green); box-shadow:0 0 0 4px var(--ink), 0 0 12px var(--green); }
.funnel-step:last-child .pin-dot{ display:none; }
/* fechamento */
.funnel-close{ position:relative; z-index:1; max-width:720px; margin:56px auto 0; text-align:center; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,38px); line-height:1.12; letter-spacing:-.02em; color:var(--white); }
.funnel-close .text-green{ color:var(--green); }

/* AMPULHETA — núcleo (trilha + etapas) + legendas Topo/Base (tudo na cor da marca, sem dourado) + cabeçalho centralizado */
.funnel-core{ position:relative; }
#metodo .section-head{ margin-inline:auto; text-align:center; }
/* ampulheta ilustrada acima do cabeçalho — pequena (~tamanho do mini-foguete do CTA), centralizada, flutua de leve e vira devagar evocando a areia */
.metodo-hourglass{ display:flex; justify-content:center; margin-bottom:clamp(14px,3vh,24px); animation:hg-float 5s ease-in-out infinite; }
.metodo-hourglass img{ width:auto; height:63px; transform-origin:50% 50%; filter:drop-shadow(0 10px 20px rgba(11,211,154,.28)); animation:hg-turn 7s ease-in-out infinite; }
@keyframes hg-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@keyframes hg-turn{ 0%,38%{ transform:rotate(0deg) } 50%,88%{ transform:rotate(180deg) } 100%{ transform:rotate(360deg) } }
#metodo .metodo-intro{ margin-inline:auto; }
/* legendas que explicam a ampulheta: topo (3A) atrai · base (3R) monetiza */
.funnel-cap{ position:relative; z-index:2; max-width:560px; margin-inline:auto; text-align:center; }
.funnel-cap.top{ margin-bottom:30px; }
.funnel-cap.base{ margin-top:30px; }
.funnel-cap .t{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.funnel-cap .ar{ font-size:15px; line-height:1; }
.funnel-cap.top .t{ color:var(--green); }
.funnel-cap.base .t{ color:var(--green); }
.funnel-cap .d{ display:block; margin-top:7px; font-family:var(--font-body); font-size:14px; color:var(--mist); letter-spacing:0; text-transform:none; }

/* estado animado (só quando o JS marca a seção): oculta p/ revelar em sequência.
   SEM esta classe, tudo fica visível — fallback legível garantido. */
#metodo.js-anim .funnel-step{ opacity:0; transform:translateY(28px) scale(.98); }
#metodo.js-anim .funnel-close{ opacity:0; transform:translateY(20px); }


/* ============================================================================
   12 · DIFERENCIAIS — "Por que a gente é diferente" (seção clara · Fase 4)
   4 cards .borda numerados em grid 2-col; reveal ALTERNADO (data-aos left/right).
   O número grande (gradiente de marca) ancora cada item; o corpo respira ao lado.
   ============================================================================ */
.dif-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:8px; }
.dif-card{ display:flex; align-items:flex-start; gap:22px; padding:30px clamp(24px,3vw,34px); }
.dif-card .dif-n{ flex:0 0 auto; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.03em; background:var(--grad-brand-soft); -webkit-background-clip:text; background-clip:text; color:transparent; min-width:1.4em; }
.dif-card .dif-body h4{ margin-bottom:8px; }
.dif-card .dif-body p{ color:var(--navy-light); font-size:15.5px; line-height:1.55; }

/* ============================================================================
   13 · OFERTA — Diagnóstico 3A3R (CORAÇÃO da conversão · seção escura · Fase 4)
   2 colunas: ESQ = promessa + "o que você recebe" (check verde) / DIR = .offer-card
   com .form + divisória + WhatsApp direto + microtexto de confiança.
   Colapsa p/ 1 coluna ≤980px (o card vem primeiro p/ o form ficar à mão no mobile).
   ============================================================================ */
.oferta-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
.oferta-pitch .lead{ max-width:46ch; }
/* "o que você recebe" — bullets com check verde (espelha .offer-card li) */
.oferta-recebe{ list-style:none; display:grid; gap:14px; margin-top:30px; }
.oferta-recebe li{ display:flex; gap:12px; align-items:flex-start; color:var(--bone); font-size:clamp(15.5px,1.5vw,17px); line-height:1.5; }
.oferta-recebe li svg{ flex:0 0 auto; width:22px; height:22px; color:var(--green); margin-top:2px; }
/* o card de captura precisa caber o form inteiro — solta o teto do .form */
.offer-card .form{ max-width:none; gap:16px; }
/* divisória "— ou, se preferir na hora —" */
.offer-or{ display:flex; align-items:center; gap:14px; margin:22px 0 18px; color:var(--mist); }
.offer-or::before,.offer-or::after{ content:""; height:1px; flex:1; background:var(--hair-dark); }
.offer-or span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
/* WhatsApp direto: btn-ghost cheio, na cor verde da marca p/ destacar do CTA âmbar */
.offer-wa{ width:100%; justify-content:center; border-color:var(--hair-green); color:var(--green-soft); }
.offer-wa svg{ width:18px; height:18px; }
.offer-wa:hover{ background:var(--green); border-color:var(--green); color:var(--ink); }
/* microtexto de confiança */
.offer-trust{ display:flex; align-items:flex-start; gap:8px; margin-top:16px; font-size:12.5px; line-height:1.5; color:var(--mist); }
.offer-trust svg{ flex:0 0 auto; width:14px; height:14px; color:var(--green); margin-top:2px; }
/* micro-estado de sucesso após abrir o WhatsApp */
.form-ok{ margin-top:4px; font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.04em; color:var(--green); display:flex; align-items:center; gap:6px; }
.form-ok[hidden]{ display:none; }

/* estado de erro de campo (validação mínima Nome/WhatsApp) — reutilizável nos 2 forms */
.field input.is-error,.field textarea.is-error{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(255,84,112,.16); }
.field input.is-error + label,.field textarea.is-error + label{ color:var(--danger); }

/* ============================================================================
   REVEAL ON SCROLL (data-aos — IntersectionObserver)
   ============================================================================ */
[data-aos],[animacao-slide-top]{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-aos].in,[animacao-slide-top].in{ opacity:1; transform:translateY(0); }
[data-aos="zoom"]{ transform:scale(.92); }
[data-aos="left"]{ transform:translateX(-44px); }
[data-aos="right"]{ transform:translateX(44px); }

/* ============================================================================
   WHATSAPP FLUTUANTE + BARRA MOBILE
   ============================================================================ */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:8500; width:60px; height:60px; border-radius:50%; background:var(--green); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 34px -10px rgba(11,211,154,.8); cursor:pointer; transition:transform .3s var(--ease); }
.wa-float::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--green); animation:ping 2s var(--ease) infinite; }
.wa-float:hover{ transform:scale(1.1) rotate(6deg); }
.wa-float svg{ width:30px; height:30px; }
.mobile-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:8400; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer{ background:var(--ink); color:var(--mist); padding:clamp(64px,8vh,110px) var(--pad) 40px; position:relative; overflow:hidden; }
.footer .big{ font-family:var(--font-display); font-weight:800; font-size:clamp(44px,9vw,150px); line-height:.92; color:transparent; -webkit-text-stroke:1.4px rgba(244,248,246,.12); letter-spacing:-.04em; pointer-events:none; }
.footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin:48px 0; }
.footer a{ color:var(--mist); transition:color .25s var(--ease); display:inline-block; }
.footer a:hover{ color:var(--green); }
.footer .fcol h6{ color:var(--white); margin-bottom:16px; }
.footer .fcol ul{ list-style:none; display:grid; gap:9px; font-size:14px; }
/* Contato: ícone (verde da paleta) + texto, alinhados */
.footer .contact-links a{ display:inline-flex; align-items:center; gap:10px; }
.footer .contact-links svg{ width:16px; height:16px; flex:0 0 auto; color:var(--green); }
.footer .legal{ border-top:1px solid var(--hair-dark); padding-top:24px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
/* linha discreta do A9 CRM no rodapé legal — link verde herda o hover dos .footer a */
.footer .legal .legal-crm a{ color:var(--green); }
/* ACORDEÃO do rodapé (<details class="facc">) — no desktop é neutro: sempre aberto (JS),
   sem chevron, summary não-clicável → visualmente idêntico ao h6 antigo. Vira acordeão só no mobile. */
.footer .facc > summary{ list-style:none; cursor:default; pointer-events:none; }
.footer .facc > summary::-webkit-details-marker{ display:none; }
.footer .facc > summary::marker{ content:""; }
.footer .acc-chev{ display:none; flex:0 0 auto; width:18px; height:18px; color:var(--mist); transition:transform .3s var(--ease); }

/* ── CTA FINAL — fechamento centrado: mini-foguete + chama + estrelas (espelha o v4) ── */
.cta-final-inner{ max-width:760px; margin-inline:auto; text-align:center; position:relative; z-index:2; }
.cta-final .eyebrow{ justify-content:center; }
.cta-final h2{ color:var(--white); }
.cta-final .lead{ color:var(--mist); margin:18px auto 36px; max-width:56ch; }
.cta-final .btn-row{ justify-content:center; }
.cta-final .primary-btn .ic{ fill:currentColor; }
/* mini-foguete idle + chama que tremula (reusa o keyframe thrust do hero) */
.cta-rocket{ position:relative; z-index:2; width:112px; height:118px; margin:0 auto clamp(16px,3vh,28px); display:flex; align-items:flex-end; justify-content:center; }
.cta-rocket .ship{ position:relative; z-index:2; width:92px; height:auto; filter:drop-shadow(0 16px 26px rgba(11,211,154,.35)); animation:bob 4.5s ease-in-out infinite; }
.cta-rocket .exhaust-glow{ position:absolute; left:50%; top:auto; bottom:0; z-index:1; width:64%; height:54%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(50% 50% at 50% 30%, rgba(255,200,87,.8) 0%, rgba(240,89,42,.42) 42%, transparent 72%);
  filter:blur(13px); animation:thrust .5s ease-in-out infinite; }

/* ============================================================================
   ACESSIBILIDADE — foco visível por teclado (on-brand, discreto)
   Só aparece na navegação por teclado (:focus-visible), não trava o mouse.
   ============================================================================ */
a:focus-visible,
button:focus-visible,
.primary-btn:focus-visible,
.btn-ghost:focus-visible,
.nav-links a:focus-visible,
.wa-float:focus-visible,
.mobile-bar a:focus-visible,
.footer a:focus-visible,
.modal .close:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }
/* o foguete flutuante é redondo — o anel de foco acompanha o raio */
.wa-float:focus-visible{ outline-offset:4px; border-radius:50%; }
/* inputs já têm glow no :focus; reforça contorno no teclado */
.field input:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* ============================================================================
   RESPONSIVO
   ============================================================================ */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:24px; padding-top:24px; padding-bottom:48px; }
  .rocket-stage{ height:380px; }   /* mobile: texto + formulário PRIMEIRO, foguete depois (ordem natural do DOM) */
  .rocket{ width:min(58%,260px); }
  .cap-card.c1{ right:0; } .cap-card.c2{ left:0; }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }    /* autoridade: 2 colunas no tablet (iguais) */
  .stat-big:nth-child(odd) + .stat-big::before{ display:none; } /* divisória só entre as colunas que sobram lado a lado */
  .svc-pillars{ grid-template-columns:1fr; }
  .svc-base{ grid-template-columns:1fr; gap:18px; padding:28px; }
  .svc-base .card-ic{ align-self:start; }
  .svc-base-cta{ justify-self:start; }
  .footer .cols{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
  /* funil: ampulheta mais suave no tablet (o texto respira) */
  .funnel-step:nth-child(1){ width:100%; }
  .funnel-step:nth-child(2){ width:90%; } .funnel-step:nth-child(3){ width:80%; }
  .funnel-step:nth-child(4){ width:80%; } .funnel-step:nth-child(5){ width:90%; } .funnel-step:nth-child(6){ width:100%; }
  /* diferenciais: 1 coluna no tablet */
  .dif-grid{ grid-template-columns:1fr; }
  /* oferta: empilha na ordem natural — pitch ("Descubra onde...") PRIMEIRO, depois o formulário */
  .oferta-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .footer .cols{ grid-template-columns:1fr; gap:0; margin:32px 0; }
  /* rodapé mobile: marca d'água gigante "alma nove." some (redundante com o logo logo abaixo, ficava perdida) */
  .footer .big{ display:none; }
  /* Contato + Navegação viram acordeão tocável: summary clicável com chevron, lista recolhível */
  .footer .facc{ border-top:1px solid var(--hair-dark); }
  .footer .facc > summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; pointer-events:auto; padding:18px 2px; }
  .footer .facc > summary h6{ margin:0; }
  .footer .facc .acc-chev{ display:block; }
  .footer .facc[open] > summary .acc-chev{ transform:rotate(180deg); }
  .footer .facc[open] > summary h6{ color:var(--green); }
  .footer .facc > ul{ padding:2px 2px 18px; }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }    /* autoridade: mantém 2 colunas no celular (iguais) */
  .stat-big .stat-n{ font-size:clamp(30px,8.6vw,40px); }      /* reduz p/ "+R$ 15 mi" caber na meia-coluna sem cortar */
  .wa-float{ bottom:74px; }
  .mobile-bar{ display:grid; grid-template-columns:1fr 1fr; }
  .mobile-bar a{ padding:16px; text-align:center; font-weight:700; font-size:14px; }
  .mobile-bar .a{ background:var(--green); color:var(--ink); }
  .mobile-bar .b{ background:var(--ink); color:#fff; border-top:1px solid var(--hair-dark); }
  /* Tarefa 0: o CTA largo da navbar estoura em 360px; a .mobile-bar + .wa-float já cobrem o CTA no mobile */
  .nav .primary-btn{ display:none; }
  .nav{ justify-content:center; }   /* mobile: só sobra a logo → centralizada no topo */
  /* CTA final: botões full-width (mais tocáveis no celular) */
  .cta-final .btn-row{ flex-direction:column; align-items:stretch; width:100%; }
  .cta-final .btn-row .primary-btn,.cta-final .btn-row .btn-ghost{ width:100%; justify-content:center; }
  /* desafios: 1 coluna no celular; o card destaque empilha */
  .desafios-grid{ grid-template-columns:1fr; gap:14px; }
  .desafio-card{ padding:22px; }
  .desafio-card.feature{ flex-direction:column; align-items:flex-start; gap:16px; }
  .desafio-card.feature .go{ margin-left:0; }
  /* diferenciais: aperta o número/gap p/ caber em 360px sem estourar */
  .dif-card{ gap:16px; padding:24px 20px; }
  .dif-card .dif-n{ font-size:38px; min-width:1.2em; }
  /* funil: no celular vira pilha legível (sem afunilar largura — texto respira) */
  .funnel{ margin-top:44px; }
  .funnel-track{ left:21px; }
  .funnel-steps{ gap:14px; }
  .funnel-step,
  .funnel-step:nth-child(n){ width:100% !important; flex-direction:row; text-align:left; gap:16px; padding:18px 20px; }
  .funnel-step .pin-dot{ left:21px; margin-left:-4.5px; }
  .funnel-step .n{ font-size:34px; min-width:1.4em; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  /* rede de segurança: o funil nunca fica oculto sob reduced-motion */
  #metodo.js-anim .funnel-step,
  #metodo.js-anim .funnel-close{ opacity:1 !important; transform:none !important; }
}