/* ==========================================================================
   DESIGN SYSTEM — tokens
   ========================================================================== */
:root{
  /* Backgrounds */
  --bg-white:#ffffff;
  --bg-green:#00db00;
  --bg-green-bright:#1beb00;
  --bg-green-mint:#00eb33;
  --bg-deep:#002e1f;
  --bg-deep-2:#003d1d;
  --bg-gray:#eef1f0;
  --bg-wash:#f4fcf3;

  /* Text */
  --tx-black:#000000;
  --tx-ink:#000a07;
  --tx-strong:#1b221f;
  --tx-body:#20252a;
  --tx-muted:#424a53;
  --tx-green-deep:#005700;
  --tx-green:#00c700;
  --tx-green-soft:#44c33e;

  /* Type */
  --font-display:"ABCGravity","Archivo","Roobert","Inter",system-ui,sans-serif;
  --font-body:"Roobert","Inter",ui-sans-serif,system-ui,sans-serif;

  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px;
  --fs-d1:clamp(26px,4.2vw,44px);
  --fs-d2:clamp(22px,3vw,32px);
  --fs-d3:clamp(20px,2.4vw,26px);

  /* Spacing */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px;
  --sp-80:80px;

  /* Radius + elevação */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-soft:rgba(0,0,0,.05) 0 1px 2px 0;
  --sh-card:rgba(0,0,0,.1) 0 10px 15px -3px, rgba(0,0,0,.1) 0 4px 6px -4px;
  --sh-float:rgba(66,74,83,.3) 0 8px 50px 0;

  --maxw:1120px;
  --sticky-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.5;
  color:var(--tx-ink);
  background:var(--bg-white);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
[hidden]{display:none!important}

/* Sprite de ícones fora da tela */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;flex:none;fill:none}
.ico--lg{width:40px;height:40px}

/* ==========================================================================
   Primitivos
   ========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-24)}

.display{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.02em;
  margin:0;
}
.d1{font-size:var(--fs-d1);line-height:1.02}
.d2{font-size:var(--fs-d2);line-height:1.05}
.d3{font-size:var(--fs-d3);line-height:1.1}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  font-size:var(--fs-12);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 var(--sp-16);
}
.lead{font-size:var(--fs-16);line-height:1.6;font-weight:400;margin:0}
.muted{color:var(--tx-muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  padding:var(--sp-12) var(--sp-24);
  border:2px solid transparent;border-radius:var(--r-pill);
  font-size:var(--fs-14);font-weight:600;line-height:1.3;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--bg-green);color:var(--tx-ink);box-shadow:0 8px 24px rgba(0,219,0,.3)}
.btn--primary:hover{background:var(--bg-green-bright);box-shadow:0 12px 30px rgba(0,219,0,.42)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--lg{padding:var(--sp-16) var(--sp-32);font-size:var(--fs-16)}
.btn--block{width:100%}

.dot{width:6px;height:6px;border-radius:50%;background:var(--bg-green);flex:none;display:inline-block}
.dot--pulse{animation:pulse 1.8s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,219,0,.6)}
  70%{box-shadow:0 0 0 8px rgba(0,219,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,219,0,0)}
}

/* Reveal na rolagem */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-24);height:64px;background:#fff;
}
.brand{display:flex;align-items:center}
.brand__logo{height:26px;width:auto}
.header__nav{display:flex;align-items:center;gap:var(--sp-24)}
.header__nav a{color:var(--tx-body);font-size:var(--fs-14);font-weight:600}
.header__nav a:hover{color:var(--tx-green-deep)}
@media (max-width:700px){.header__nav{display:none}}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:var(--bg-deep);
  color:#fff;
  padding-block:var(--sp-56) var(--sp-56);
  overflow:hidden;
  text-align:left;
}
.hero::before{
  content:"";position:absolute;inset:auto -20% -50% -20%;
  height:90%;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,219,0,.3),rgba(0,219,0,0) 65%);
  pointer-events:none;
}
.hero__inner{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.hero .eyebrow{color:var(--bg-green)}
.hero h1{max-width:28ch;margin-bottom:var(--sp-32)}
.hero h1 .hl{color:var(--bg-green);white-space:nowrap}

.hero__art{margin:0;max-width:460px;width:100%}
.hero__art img{
  width:100%;height:auto;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.45));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero__art img{animation:none}}

/* subheadline abaixo do h1 */
.hero__sub{max-width:54ch;margin:0 0 var(--sp-32)}
.hero__sub-title{
  display:flex;align-items:center;gap:var(--sp-8);margin:0 0 var(--sp-8);
  color:var(--bg-green);font-size:var(--fs-16);font-weight:600;line-height:1.3
}
.hero__sub-title .ico{width:20px;height:20px}
.hero__sub-text{margin:0;color:rgba(255,255,255,.8);font-size:var(--fs-14);line-height:1.6}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-bottom:var(--sp-32);
  align-self:stretch;justify-content:center;
}
.hero__cta .btn{width:100%;max-width:420px}

.hero__points{
  list-style:none;margin:var(--sp-32) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-12) var(--sp-24);
}
.hero__points li{
  display:flex;align-items:center;gap:var(--sp-8);
  font-size:var(--fs-13);color:rgba(255,255,255,.72);
}
.hero__points .ico{color:var(--bg-green);width:16px;height:16px}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{background:var(--bg-green);color:var(--tx-ink);overflow:hidden;padding-block:var(--sp-12)}
.marquee__track{display:flex;width:max-content;animation:slide 26s linear infinite}
/* só os spans de texto (filhos diretos do track) recebem o padding;
   sem o "> span" a regra também esticava os .dot e virava elipse */
.marquee__track > span{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-16);letter-spacing:-.01em;white-space:nowrap;
  display:flex;align-items:center;gap:var(--sp-16);padding-right:var(--sp-16)
}
.marquee .dot{
  width:6px;height:6px;padding:0;flex:none;
  border-radius:50%;background:var(--bg-deep)
}
/* a rolagem do marquee é mantida mesmo com "reduzir movimento" ativo (pedido do cliente) */
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   Seções
   ========================================================================== */
.section{padding-block:var(--sp-56)}
.section--wash{background:var(--bg-wash)}
.section__head{max-width:640px;margin-bottom:var(--sp-32)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head .eyebrow{color:var(--tx-green-deep)}
.section__head p.lead{color:var(--tx-muted);margin-top:var(--sp-16)}

/* ==========================================================================
   Formulário multi-etapas
   ========================================================================== */
.formcard{
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-card);
  padding:var(--sp-32) var(--sp-24);max-width:560px;margin-inline:auto;
}
@media (min-width:560px){.formcard{padding:var(--sp-40)}}

/* progresso */
.progress{display:flex;gap:var(--sp-8);margin-bottom:var(--sp-12)}
.progress__seg{
  flex:1;height:6px;border-radius:var(--r-pill);background:var(--bg-gray);
  transition:background .3s ease
}
.progress__seg.is-on{background:var(--bg-green)}
.progress__label{
  margin:0 0 var(--sp-16);font-size:var(--fs-13);font-weight:600;color:var(--tx-muted)
}

/* etapas */
.fstep{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.fstep.is-active{display:block}
.fstep__title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-d3);line-height:1.1;color:var(--tx-ink);
  display:block;width:100%;padding:0;margin:0 0 var(--sp-24);
}
.fstep__actions{margin-top:var(--sp-24)}
.fstep__actions--pair{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-12)}
/* em telas estreitas o botão principal vai para cima, em largura total */
@media (max-width:440px){
  .fstep__actions--pair{grid-template-columns:1fr}
  .fstep__actions--pair .btn--outline{order:2}
}

/* campos */
.field{margin-bottom:var(--sp-16)}
.field > label{
  display:block;margin-bottom:var(--sp-8);
  font-size:var(--fs-13);font-weight:600;color:var(--tx-strong)
}
.field .req{color:var(--tx-green-deep)}
.field-row{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-12)}

.field input[type=text],
.field input[type=tel],
.field select{
  width:100%;
  padding:14px var(--sp-16);
  font-family:inherit;font-size:var(--fs-16);color:var(--tx-ink);
  background:#fff;border:1px solid #dfe4e2;border-radius:var(--r-md);
  transition:border-color .16s ease,box-shadow .16s ease;
  appearance:none;
}
.field input::placeholder{color:#9aa4a0}
.field input:focus,
.field select:focus{
  outline:none;border-color:var(--bg-green);
  box-shadow:0 0 0 3px rgba(0,219,0,.18)
}
.field select:invalid{color:#9aa4a0}

/* select com ícone */
.select{position:relative}
.select select{padding-right:44px;cursor:pointer}
.select__ico{
  position:absolute;right:var(--sp-16);top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--tx-muted);pointer-events:none
}

/* erros */
.field__error{margin:var(--sp-8) 0 0;font-size:var(--fs-12);font-weight:600;color:#c62828;display:none}
.field.has-error .field__error{display:block}
.field.has-error input,
.field.has-error select,
.field.has-error .combo__input{border-color:#c62828}
.field.has-error input:focus,
.field.has-error .combo__input:focus{box-shadow:0 0 0 3px rgba(198,40,40,.15)}
.field__hint{
  margin:var(--sp-8) 0 0;font-size:var(--fs-12);line-height:1.5;
  color:var(--tx-green-deep);background:var(--bg-wash);
  border-radius:var(--r-sm);padding:var(--sp-8) var(--sp-12)
}

/* combobox de busca */
.combo{position:relative}
.combo__ico{
  position:absolute;right:var(--sp-16);top:22px;transform:translateY(-50%);
  width:18px;height:18px;color:var(--tx-muted);pointer-events:none;
  transition:transform .2s ease
}
.combo.is-open .combo__ico{transform:translateY(-50%) rotate(180deg)}
.combo__input{padding-right:44px!important}
.combo__list{
  position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;
  max-height:240px;overflow-y:auto;margin:0;padding:var(--sp-8);
  list-style:none;background:#fff;border:1px solid #dfe4e2;
  border-radius:var(--r-md);box-shadow:var(--sh-card)
}
.combo__opt{
  padding:10px var(--sp-12);border-radius:var(--r-sm);
  font-size:var(--fs-14);color:var(--tx-body);cursor:pointer
}
.combo__opt:hover,.combo__opt.is-active{background:var(--bg-wash);color:var(--tx-green-deep)}
.combo__empty{padding:10px var(--sp-12);font-size:var(--fs-14);color:var(--tx-muted)}

/* botão secundário */
.btn--outline{background:#fff;color:var(--tx-strong);border-color:#dfe4e2}
.btn--outline:hover{border-color:var(--tx-ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover{transform:none;background:var(--bg-green)}

/* bloco de privacidade */
.privacidade{
  margin-top:var(--sp-24);padding:var(--sp-16);
  background:var(--bg-gray);border-radius:var(--r-md)
}
.privacidade p{margin:0 0 var(--sp-12);font-size:var(--fs-12);line-height:1.6;color:var(--tx-muted)}
.check{display:flex;gap:var(--sp-12);align-items:flex-start;cursor:pointer}
.check input{
  flex:none;width:20px;height:20px;margin:0;accent-color:var(--bg-green);cursor:pointer
}
.check span{font-size:var(--fs-12);line-height:1.5;color:var(--tx-body)}
.check a{color:var(--tx-green-deep);text-decoration:underline}
.aviso-confira{
  margin:var(--sp-16) 0 0;text-align:center;
  font-size:var(--fs-13);font-weight:600;color:var(--tx-muted)
}


/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--bg-deep-2);color:rgba(255,255,255,.72)}

/* chamada */
.footer__call{padding:var(--sp-80) var(--sp-24) var(--sp-56)}
.footer__headline{
  margin:0 auto;max-width:16ch;text-align:center;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,44px);line-height:1.02;letter-spacing:-.02em;color:#fff;
}
.footer__headline span{color:var(--bg-green)}

/* colunas de links */
.footer__body{
  max-width:1280px;margin-inline:auto;
  padding:var(--sp-24) var(--sp-24) var(--sp-40);
}
.footer__grid{
  display:grid;gap:var(--sp-40) var(--sp-24);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.fcol__title{
  margin:0 0 var(--sp-16);
  font-size:var(--fs-13);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5)
}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-8)}
.fcol a{
  font-size:var(--fs-14);line-height:1.4;color:rgba(255,255,255,.92);
  transition:color .16s ease
}
.fcol a:hover{color:var(--bg-green)}

/* base */
.footer__bottom{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-32);
  margin-top:var(--sp-56);padding-top:var(--sp-32);
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}
@media (min-width:768px){
  .footer__bottom{flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left}
}
.footer__legal{margin:0;font-size:var(--fs-13);line-height:1.5;color:rgba(255,255,255,.6);max-width:70ch}
.footer__logo img{max-height:56px;width:auto;min-width:122px}
.footer__disclaimer{
  margin:var(--sp-32) 0 0;font-size:var(--fs-12);line-height:1.6;
  color:rgba(255,255,255,.45);max-width:80ch
}

/* espaço para o CTA fixo não cobrir o rodapé */
@media (max-width:700px){
  .footer__body{padding-bottom:calc(var(--sp-40) + var(--sticky-h) + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   CTA fixo (mobile)
   ========================================================================== */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--sp-12) var(--sp-16) calc(var(--sp-12) + env(safe-area-inset-bottom,0px));
  background:rgba(0,46,31,.95);backdrop-filter:blur(10px);
  transform:translateY(120%);transition:transform .3s ease
}
.stickycta.is-visible{transform:none}
@media (min-width:701px){.stickycta{display:none}}