/* ==========================================================================
   Template Nutri — estilos
   Para trocar a identidade de uma cliente, edite só o bloco :root abaixo.
   ========================================================================== */

/* ---------- Identidade ---------- */
:root{
  --primary:#0b5d2a; --primary-dark:#08451f;
  --green:#15803d; --green-dark:#0f6b32;
  --lime:#b7e96e; --white:#fff;
  --ink:#10291a; --muted:#5a6f61;
  --bg:#f4faf5; --soft:#e8f5ea; --line:#d6eadb;
  --shadow:0 20px 60px rgba(11,93,42,.10);
  --radius:24px; --max:1160px;
  --font-title:"Manrope",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.6;overflow-x:clip}
/* o overflow do body vai para a viewport e não impede o scroll lateral; o main recorta
   os elementos que entram de lado (x:60, rotação) enquanto animam */
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:min(100% - 3rem, var(--max));margin-inline:auto}
.section{padding:clamp(64px,10vw,104px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--green);border-radius:10px}
h1,h2,h3{font-family:var(--font-title);line-height:1.12;letter-spacing:-.035em;color:var(--ink)}
h1{font-size:clamp(2.4rem,6vw,5rem);max-width:15ch}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:1.2rem}
p{color:var(--muted)}
.section-head{max-width:720px;margin-bottom:46px}
.section-head p{margin-top:16px;font-size:1.05rem}
.section-head.center{margin-inline:auto;text-align:center}

/* ---------- Botões ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 25px;border-radius:14px;background:var(--green);color:#fff;font-weight:700;border:1px solid var(--green);box-shadow:0 10px 25px rgb(21 128 61 / .22);transition:background .25s,box-shadow .25s;text-align:center}
.btn:hover{background:var(--green-dark);box-shadow:0 16px 34px rgb(21 128 61 / .32)}
.btn.secondary{background:transparent;color:var(--primary);border-color:var(--primary);box-shadow:none}
.btn.secondary:hover{background:var(--soft)}
.btn.large{min-height:60px;padding:0 30px;font-size:1.02rem}
.btn.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgb(255 255 255 / .45),transparent);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,62%{left:-60%}100%{left:135%}}

/* ---------- Palavras divididas e faixa que revela (classes geradas pelo JS) ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block;will-change:transform}
.rb-line{display:block}
.rb-inner{position:relative;display:inline-block;isolation:isolate}
.rb-txt{position:relative;display:inline-block}
.rb-bar{position:absolute;z-index:-1;inset:.12em -.14em .02em;border-radius:8px;background:linear-gradient(90deg,var(--soft),color-mix(in srgb,var(--lime) 55%,#fff));transform:scaleX(0);pointer-events:none}
.final-cta .rb-bar{background:linear-gradient(90deg,rgb(183 233 110 / .45),rgb(255 255 255 / .18))}

/* ---------- Loader, progresso, cursor ---------- */
#loader{position:fixed;inset:0;z-index:999;background:var(--primary);display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#fff}
html.js #loader{display:flex}
.loader-logo{font-family:var(--font-title);font-weight:800;font-size:clamp(2.4rem,8vw,4.2rem);display:flex;overflow:hidden;letter-spacing:-.04em}
.loader-logo span{display:inline-block}
.loader-logo .g{color:var(--lime)}
.loader-tag{font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgb(255 255 255 / .78)}
.loader-bar{width:170px;height:3px;background:rgb(255 255 255 / .2);border-radius:3px;overflow:hidden}
.loader-bar i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.progress{position:fixed;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--primary),var(--green) 55%,var(--lime));box-shadow:0 0 12px rgb(183 233 110 / .7);transform:scaleX(0);transform-origin:left;z-index:120;pointer-events:none}
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:300;border-radius:50%;display:none}
.cursor{width:38px;height:38px;border:1.5px solid var(--primary);transition:width .3s,height .3s,background .3s,border-color .3s}
.cursor-dot{width:6px;height:6px;background:var(--green)}
.cursor.hover{width:70px;height:70px;background:rgb(11 93 42 / .12);border-color:transparent}
@media (pointer:fine){html.js .cursor,html.js .cursor-dot{display:block}}

/* ---------- Cabeçalho ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px rgb(16 41 26 / .08)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-title);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;color:var(--ink)}
.logo-mark{color:var(--green)}
.logo b{color:var(--green);font-weight:800}
.nav-links{display:flex;align-items:center;gap:30px;font-weight:600;font-size:.95rem}
.nav-links a:not(.btn){color:var(--ink);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--green)}
.nav-cta{min-height:46px;padding:0 20px}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:55.99em){
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;padding:16px 1.5rem 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgb(16 41 26 / .08)}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-cta{margin-top:12px}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;padding:clamp(36px,6vw,72px) 0 clamp(48px,7vw,88px);background:linear-gradient(180deg,var(--bg),#fff)}
.hero-orbs{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:blob 14s ease-in-out infinite}
.orb.o1{width:420px;height:420px;background:var(--lime);top:-120px;right:-80px}
.orb.o2{width:320px;height:320px;background:color-mix(in srgb,var(--green) 40%,#fff);bottom:-80px;left:-100px;animation-delay:-4s}
.orb.o3{width:220px;height:220px;background:var(--soft);top:40%;left:45%;animation-delay:-8s}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.08)}}
.hero-grid{display:grid;gap:44px;align-items:center}
.hero-lead{margin-top:22px;font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-trust{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:.84rem;line-height:1.4;color:var(--muted)}
.hero-trust strong{display:block;color:var(--ink);font-size:.92rem}
.trust-avatars{display:flex;flex:none}
.trust-avatars i{display:grid;place-items:center;width:34px;height:34px;margin-left:-9px;border-radius:50%;border:2px solid #fff;background:var(--soft);color:var(--primary);font-style:normal;font-weight:800;font-size:.68rem}
.trust-avatars i:first-child{margin-left:0}
.trust-avatars i:last-child{background:var(--lime)}
@media (max-width:30em){.hero-actions .btn{width:100%}}

/* Composição do hero: blob + disco + órbita + foto que sai do círculo + cards + selo.
   Medidas em % da largura do .hero-visual (altura = 1.1 × largura). */
.hero-media{position:relative;justify-self:center;width:100%;max-width:460px}
.hero-visual{position:relative;width:100%;aspect-ratio:1/1.1}
.hv-blob{position:absolute;left:4%;bottom:1%;width:88%;aspect-ratio:1;background:linear-gradient(150deg,color-mix(in srgb,var(--lime) 85%,#fff),color-mix(in srgb,var(--green) 22%,#fff) 70%);border-radius:48% 52% 45% 55% / 52% 46% 54% 48%;opacity:.9;animation:morph 12s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:48% 52% 45% 55% / 52% 46% 54% 48%;transform:rotate(0deg)}
  33%{border-radius:56% 44% 52% 48% / 45% 55% 45% 55%;transform:rotate(6deg)}
  66%{border-radius:44% 56% 58% 42% / 55% 48% 52% 45%;transform:rotate(-5deg)}}
.hv-orbit{position:absolute;left:2%;top:15.8%;width:96%;aspect-ratio:1;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--green) 40%,transparent);animation:spinOrbit 18s linear infinite}
.hv-orbit i{position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgb(21 128 61 / .15)}
@keyframes spinOrbit{to{transform:rotate(360deg)}}
.hv-disc{position:absolute;left:12%;bottom:6%;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(rgb(255 255 255 / .16) 1.2px,transparent 1.8px) 0 0/14px 14px,linear-gradient(150deg,var(--green),var(--primary) 70%);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--lime) 35%,transparent),0 30px 60px rgb(11 93 42 / .25)}
/* recorte "pop-out": retângulo em cima, semicírculo do disco embaixo */
.hv-cut{position:absolute;left:12%;bottom:6%;width:76%;aspect-ratio:1/1.3;border-radius:0 0 9999px 9999px;overflow:hidden}
.hv-cut img{position:absolute;top:0;left:-4%;width:108%;max-width:none;height:auto}
.hv-card{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;max-width:250px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 18px 40px rgb(16 41 26 / .14);font-size:.8rem;line-height:1.4;color:var(--muted);animation:drift 6s ease-in-out infinite}
.hv-card strong{display:block;color:var(--ink);font-size:.9rem}
.hv-card-top{right:-4%;top:12%}
.hv-card-bottom{left:-6%;bottom:16%;animation-delay:-3s}
.hv-card-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--soft);color:var(--green)}
.hv-seal{position:absolute;z-index:2;right:1%;top:44%;width:max(92px,24%);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 14px 34px rgb(16 41 26 / .16)}
.hv-seal-text{position:absolute;inset:0;width:100%;height:100%;animation:spinOrbit 14s linear infinite}
.hv-seal-text text{font-family:var(--font-title);font-size:10.5px;font-weight:800;letter-spacing:.08em;fill:var(--primary)}
.hv-seal-check{position:absolute;inset:29%;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff}
.hv-seal-check svg{width:55%;height:55%}
.hv-spark{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px 3px rgb(183 233 110 / .8);animation:pulse 2.6s ease-in-out infinite}
.hv-spark.k1{left:8%;top:30%}.hv-spark.k2{right:12%;bottom:8%;animation-delay:-.9s}.hv-spark.k3{left:46%;top:10%;width:6px;height:6px;animation-delay:-1.7s}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
/* parallax do mouse (o JS anima --px/--py); "translate" soma com o transform das animações CSS */
.orb,.hero-visual>*{translate:var(--px,0px) var(--py,0px)}
@media (max-width:30em){
  .hv-card{max-width:190px;padding:10px 12px;gap:9px;font-size:.7rem}
  .hv-card strong{font-size:.78rem}
  .hv-card-icon{width:30px;height:30px}
  .hv-card-top{right:-2%;top:8%}
  .hv-card-bottom{left:-2%;bottom:10%}
}
@media (min-width:56em){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-media{max-width:540px}
}

/* ---------- Destaques + ticker ---------- */
.highlights{padding:0 0 clamp(56px,8vw,88px);background:#fff}
.highlights-label{font-family:var(--font-title);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:18px}
.highlights-label span{color:var(--green)}
.highlights-grid{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,64px)}
.highlight-card{display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--line)}
.highlight-card h3{margin-bottom:6px}
.hl-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--primary);color:var(--lime)}
@media (min-width:40em){.highlights-grid{grid-template-columns:1fr 1fr}}
.ticker{overflow:hidden;padding:18px 0;background:var(--primary);color:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:42px;width:max-content;font-family:var(--font-title);font-weight:700;font-size:1.05rem;white-space:nowrap;padding-right:42px}
.ticker-track span:nth-child(odd){color:var(--lime)}

/* ---------- Dores ---------- */
.problem{background:var(--bg)}
.pain-grid{display:grid;gap:22px}
@media (min-width:56em){.pain-grid{grid-template-columns:repeat(3,1fr);perspective:900px}}
.pain{position:relative;overflow:hidden;padding:30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transform-style:preserve-3d}
.pain::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(183 233 110 / .28),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.pain:hover::before{opacity:1}
.pain-num{display:block;font-family:var(--font-title);font-weight:800;font-size:2.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--green);margin-bottom:18px}
.pain-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--primary);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.pain h3{font-size:1.25rem;margin-bottom:12px}
.problem-note{display:flex;gap:16px;align-items:flex-start;margin-top:34px;padding:26px 28px;border-radius:20px;background:var(--primary)}
.problem-note p{color:rgb(255 255 255 / .85);font-size:1.05rem}
.problem-note strong{color:var(--lime)}
.note-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--primary)}

/* ---------- Benefícios (palco da maçã) ---------- */
.benefits-grid{display:grid;gap:48px;align-items:center}
@media (min-width:56em){.benefits-grid{grid-template-columns:1fr 1fr;gap:64px}}
.apple-stage{position:relative;width:100%;aspect-ratio:1/1.14;max-width:460px;margin-inline:auto;border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--soft) 70%,#fff),var(--soft));box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.apple-glow{position:absolute;inset:18% 14% 30%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lime) 55%,transparent),transparent 70%);filter:blur(30px);z-index:-1}
.apple-in{position:absolute;z-index:2;left:23%;right:23%;top:17%;bottom:33%;animation:appleBob 5s ease-in-out infinite}
.apple-in img{width:100%;height:100%;object-fit:contain;animation:appleSway 7s ease-in-out infinite;transform-origin:50% 90%}
.apple-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(../img/maca.webp) center/contain no-repeat;mask:url(../img/maca.webp) center/contain no-repeat;background:linear-gradient(100deg,transparent 40%,rgb(255 255 255 / .6) 50%,transparent 60%);background-size:250% 100%;animation:appleShine 4.5s ease-in-out infinite,appleSway 7s ease-in-out infinite;transform-origin:50% 90%;mix-blend-mode:screen}
.apple-shadow{position:absolute;z-index:1;left:34%;right:34%;top:66%;height:4%;border-radius:50%;background:rgb(16 41 26 / .22);filter:blur(8px);animation:appleShadow 5s ease-in-out infinite}
@keyframes appleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes appleSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes appleShine{0%,40%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes appleShadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.82);opacity:.55}}
/* anel elíptico inclinado (as duas metades ficam em camadas diferentes da maçã) */
.apple-orbit{position:absolute;left:8%;width:84%;top:59%;aspect-ratio:3;transform:translateY(-50%) rotate(-5deg);pointer-events:none}
.apple-orbit svg{display:block;width:100%;height:100%;overflow:visible}
.apple-orbit path{fill:none;stroke:color-mix(in srgb,var(--green) 55%,transparent);stroke-width:1.4;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.apple-orbit.back{z-index:1}
.apple-orbit.front{z-index:3}
/* satélites: posições fixas sem JS; com JS (.orbiting) giram pelo anel em 3D */
.sats{position:absolute;inset:0;pointer-events:none}
.sat{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;box-shadow:0 10px 26px rgb(16 41 26 / .12);font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap}
.sat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.sat.s1{top:56%;left:4%}.sat.s2{top:47%;left:62%;z-index:1;opacity:.6}.sat.s3{top:63%;left:58%}.sat.s4{top:70%;left:26%}
.orbit-dot{position:absolute;z-index:4;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px 4px rgb(183 233 110 / .85)}
.orbit-dot.d1{top:66%;left:84%}.orbit-dot.d2{top:52%;left:12%;z-index:1}
.orbiting .sat,.orbiting .orbit-dot{top:0;left:0}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-10px)}}
@media (max-width:30em){.sat{font-size:.7rem;padding:5px 10px;gap:5px}}
.benefits-list{display:grid;gap:26px}
.benefit{display:flex;gap:18px;align-items:flex-start}
.benefit .icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--soft);color:var(--primary)}
.benefit h3{margin-bottom:6px}

/* ---------- Como funciona ---------- */
.how{background:var(--bg)}
.steps-wrap{position:relative}
.steps-line{display:none}
.steps{display:grid;gap:30px;position:relative}
.step{position:relative;padding:28px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.step-number{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:1.5px solid var(--line);font-family:var(--font-title);font-weight:800;font-size:1.2rem;color:var(--primary);margin-bottom:18px}
html.js .step-number{color:color-mix(in srgb,var(--green) 35%,#fff)}
.step h3{margin-bottom:8px}
@media (min-width:56em){
  .steps{grid-template-columns:repeat(4,1fr);gap:22px}
  .steps-line{display:block;position:absolute;top:56px;left:56px;right:56px;height:2px;background:var(--line);z-index:0}
  .steps-line i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--green),var(--lime));transform:scaleX(0);transform-origin:left}
  .step{background:transparent;border:0;padding:28px 10px 0}
  .step-number{position:relative;z-index:1}
}

/* ---------- Depoimentos ---------- */
.note-exemplo{margin:-26px 0 26px;font-size:.85rem;font-style:italic}
.testimonials{display:grid;gap:22px}
@media (min-width:56em){.testimonials{grid-template-columns:repeat(3,1fr)}}
.testimonial{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.testimonial blockquote{font-size:1.05rem;color:var(--ink);line-height:1.6}
.testimonial figcaption{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center}
.avatar{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--primary);font-family:var(--font-title);font-weight:800}
.testimonial figcaption strong{font-family:var(--font-title)}
.testimonial figcaption span:last-child{font-size:.85rem;color:var(--muted)}

/* ---------- Plano ---------- */
.offer-box{max-width:760px;margin-inline:auto;display:grid;gap:22px}
.price-card{position:relative;border-radius:var(--radius);padding:3px;background:conic-gradient(from var(--ang),var(--primary),var(--lime),var(--green),var(--primary));animation:spin 6s linear infinite;box-shadow:var(--shadow)}
.price-card>.price-inner{border-radius:calc(var(--radius) - 3px);background:#fff;padding:34px;text-align:center}
@keyframes spin{to{--ang:360deg}}
.price-inner h3{font-size:1.4rem}
.price{margin:14px 0 26px;font-family:var(--font-title);font-weight:800;color:var(--primary)}
.currency{font-size:1.4rem;vertical-align:top}
.price-num{font-size:clamp(3.4rem,9vw,4.6rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price small{display:block;margin-top:6px;font-family:var(--font-body);font-weight:500;font-size:.88rem;color:var(--muted)}
.price-inner ul{display:grid;gap:12px;text-align:left;max-width:420px;margin:0 auto 22px}
.price-inner li{position:relative;padding-left:32px;color:var(--ink)}
.price-inner li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.price-obs{font-size:.88rem;margin-bottom:22px}
.price-inner .btn{width:100%}
.guarantee-box{display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)}
.guarantee-box strong{color:var(--ink)}
.shield{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--primary)}

/* ---------- FAQ ---------- */
.faq{background:var(--bg)}
.faq-wrap{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-wrap details{border-bottom:1px solid var(--line)}
.faq-wrap details[open]{padding-bottom:20px}
.faq-wrap summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;font-family:var(--font-title);font-weight:700;font-size:1.08rem;cursor:pointer}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--green);font-size:1.3rem;font-weight:600;transition:transform .3s,background .3s}
.faq-wrap details[open] summary::after{transform:rotate(45deg);background:var(--lime);border-color:var(--lime);color:var(--primary)}
.faq-wrap details p{overflow:hidden;padding-right:2.5rem}

/* ---------- CTA final ---------- */
.final-cta{position:relative;overflow:hidden;background:var(--primary);color:#fff;text-align:center}
.final-cta h2,.final-cta p{color:#fff}
.final-cta .container{position:relative;z-index:1}
.final-cta .eyebrow{color:var(--lime)}
.final-cta .eyebrow::before{background:var(--lime)}
.final-cta h2{max-width:18ch;margin-inline:auto;font-size:clamp(2.1rem,5vw,3.8rem)}
.final-cta p{max-width:52ch;margin:20px auto 34px;color:rgb(255 255 255 / .82);font-size:1.08rem}
.final-cta .btn{background:var(--lime);border-color:var(--lime);color:var(--primary);box-shadow:0 14px 34px rgb(0 0 0 / .18)}
.final-cta .btn:hover{background:#fff;border-color:#fff}
.ring{position:absolute;border-radius:50%;border:1.5px solid rgb(183 233 110 / .35);pointer-events:none}
.ring.r1{width:520px;height:520px;top:-220px;left:-160px}
.ring.r2{width:380px;height:380px;bottom:-170px;right:-120px}

/* ---------- Rodapé ---------- */
.footer{background:var(--ink);padding:28px 0;text-align:center}
.footer p{color:rgb(255 255 255 / .7);font-size:.88rem}

/* ---------- Estados iniciais (só com JS ativo) ----------
   O script.js remove a classe "js" se o GSAP faltar ou com movimento reduzido. */
html.js .hero-copy>*,html.js .hero-media{opacity:0}
html.js h2.reveal-bar,html.js .split{visibility:hidden}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html.js #loader,.cursor,.cursor-dot{display:none!important}
}
