/* ============================================================
   [NOME DA MARCA] — Mini Mercado Autônomo
   Sistema: dark quente + accent esmeralda. Mobile-first.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:#08090A; --ink-2:#0D0F11; --ink-3:#14171A; --ink-4:#1E2227;
  /* antes eram as seções claras — agora são o grafite do ritmo escuro */
  --paper:#0F1113; --paper-2:#171A1D;
  --on-ink:#F2F4F3; --on-ink-2:rgba(242,244,243,.62); --on-ink-3:rgba(242,244,243,.40);
  --on-paper:#F2F4F3; --on-paper-2:rgba(242,244,243,.62);
  --acc:#C6F048; --acc-d:#A3C92E; --acc-ink:#0C1000; --acc-glow:rgba(198,240,72,.26);
  --line-l:rgba(255,255,255,.10); --line-d:rgba(255,255,255,.09);

  --ff:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(1.25rem,5vw,2rem);
  --wrap:1280px;
  --sec:clamp(5rem,11vw,9.5rem);
  --r:14px; --r-lg:22px;
  --e:cubic-bezier(.22,.61,.36,1);
  --hdr-h:70px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--ff); font-size:16px; line-height:1.6;
  background:var(--ink); color:var(--on-ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
ul,ol{list-style:none; padding:0}
fieldset{border:0; padding:0; min-width:0}
legend{padding:0}
::selection{background:var(--acc); color:var(--acc-ink)}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--acc); outline-offset:3px; border-radius:6px;
}
.sprite{position:absolute}
.skip{
  position:absolute; left:var(--pad); top:-100px; z-index:200;
  background:var(--acc); color:var(--acc-ink); padding:.7rem 1.1rem; border-radius:8px; font-weight:600;
  transition:top .2s;
}
.skip:focus{top:14px}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.ic{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ic--arw{width:19px; height:19px; transition:transform .35s var(--e)}
.ic--back{width:17px; height:17px; transform:rotate(180deg)}

/* ---------- tipografia ---------- */
.h2{
  font-size:clamp(1.95rem,4.4vw,3.4rem); line-height:1.06; font-weight:700;
  letter-spacing:-.032em; text-wrap:balance;
}
.h2--xl{font-size:clamp(2.3rem,5.2vw,4.2rem)}
.h2 em,.hero__h1 em,.quote em{font-style:normal; color:var(--acc)}
.lead{
  font-size:clamp(1rem,1.55vw,1.16rem); line-height:1.62; color:var(--on-ink-2);
  max-width:56ch; text-wrap:pretty;
}
.eyebrow{
  font-family:var(--fm); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.19em; color:var(--acc); margin-bottom:1.15rem;
}
.sec-head{margin-bottom:clamp(2.75rem,6vw,4.5rem); max-width:60ch}
.sec-head .h2,.benef__txt .h2{margin-bottom:1.2rem}
.sec-head--split{max-width:none}
@media(min-width:900px){
  .sec-head--split{display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:end}
  .sec-head--split .lead{padding-bottom:.4rem}
}

/* ---------- botões ---------- */
.btn{
  --bg:var(--acc); --fg:var(--acc-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  padding:1.02rem 1.6rem; border-radius:100px;
  font-weight:600; font-size:.97rem; letter-spacing:-.01em; line-height:1;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--e), box-shadow .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -12px var(--acc-glow);
  text-align:center;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:#fff; opacity:0;
  transition:opacity .3s var(--e);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 40px -14px var(--acc-glow)}
.btn:hover::before{opacity:.14}
.btn:hover .ic--arw{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  --bg:transparent; --fg:var(--on-ink);
  border:1px solid var(--line-l); box-shadow:none; backdrop-filter:blur(6px);
}
.btn--ghost:hover{box-shadow:none; border-color:rgba(255,255,255,.28)}
.btn--ghost::before{background:#fff}
.btn--sm{padding:.72rem 1.15rem; font-size:.87rem}
.btn--lg{padding:1.18rem 2rem; font-size:1.04rem}
.btn--full{width:100%}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--hdr-h);
  transition:background .45s var(--e), border-color .45s var(--e), backdrop-filter .45s var(--e);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(8,9,10,.80); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line-l);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  height:100%; display:flex; align-items:center; gap:1.5rem;
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:-.03em; font-size:1.02rem; margin-right:auto}
.logo__mark{
  width:32px; height:32px; border-radius:50%; flex:none; display:block;
  box-shadow:0 0 0 1px rgba(198,240,72,.20), 0 4px 18px -6px var(--acc-glow);
}
.logo__txt{opacity:.96}
.logo__txt em{font-style:normal; color:var(--acc)}
.nav{display:none; gap:2rem; font-size:.93rem}
.nav a{color:var(--on-ink-2); transition:color .25s; position:relative; padding:.3rem 0}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--acc);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--e);
}
.nav a:hover{color:var(--on-ink)}
.nav a:hover::after{transform:scaleX(1); transform-origin:left}
.hdr__cta{display:none}
.burger{width:44px; height:44px; display:grid; place-items:center; margin-right:-8px; color:var(--on-ink)}
@media(min-width:940px){
  .nav{display:flex} .hdr__cta{display:inline-flex} .burger{display:none}
}
/* menu mobile */
body.menu-open{overflow:hidden}
@media(max-width:939px){
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto; display:flex; flex-direction:column; gap:0;
    background:rgba(8,9,10,.97); backdrop-filter:blur(20px); padding:1rem var(--pad) 2rem;
    border-bottom:1px solid var(--line-l);
    transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .32s var(--e), transform .32s var(--e), visibility .32s;
  }
  .nav a{padding:1.05rem 0; font-size:1.15rem; border-bottom:1px solid var(--line-l); color:var(--on-ink)}
  .nav a::after{display:none}
  body.menu-open .nav{transform:none; opacity:1; pointer-events:auto; visibility:visible}
}

/* ============ 01 HERO ============ */
/* mobile: a foto é o FUNDO do hero — ocupa o topo e se dissolve no preto,
   com o texto por cima. Não esticamos em cover na altura toda porque numa
   tela 0.46 isso cortaria ~60% da largura e partiria o equipamento ao meio. */
.hero{position:relative; display:flex; flex-direction:column; justify-content:flex-end;
      min-height:100svh; padding-top:calc(var(--hdr-h) + 1rem); overflow:hidden}
.hero__in{order:2}
.hero__media{order:1; position:absolute; top:0; left:0; right:0; margin:0; z-index:0}
.hero__media img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 34%}
/* o scrim vive DENTRO do .hero__media, então termina exatamente onde a foto
   termina: sem degrau visível, em qualquer altura de tela */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,9,10,.66) 0%, rgba(8,9,10,.26) 15%,
    rgba(8,9,10,.62) 34%, rgba(8,9,10,.86) 60%,
    rgba(8,9,10,.96) 82%, var(--ink) 100%);
}
.hero__in{position:relative; z-index:1; padding-bottom:clamp(2.5rem,6vw,4rem)}
.hero__h1{
  font-size:clamp(2.4rem,5.6vw,4.8rem); line-height:1.0; font-weight:800;
  letter-spacing:-.042em; margin-bottom:1.5rem; text-wrap:balance;
}
.hero__sub{font-size:clamp(1.02rem,1.8vw,1.3rem); line-height:1.55; color:rgba(245,243,240,.78); max-width:46ch; margin-bottom:2.1rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.6rem}
.hero__cta .btn{flex:1 1 auto; min-width:min(100%,240px)}
.hero__note{font-size:.9rem; color:var(--on-ink-3); max-width:40ch}
@media(min-width:768px){
  /* desktop: composição horizontal, texto à esquerda, equipamento à direita */
  .hero{padding-top:calc(var(--hdr-h) + 2rem)}
  .hero__media{inset:0; order:0}
  .hero__media img{height:100%; aspect-ratio:auto; object-position:58% 50%}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(8,9,10,.80) 0%,rgba(8,9,10,.28) 30%,rgba(8,9,10,.52) 70%,var(--ink) 100%),
      linear-gradient(90deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.60) 44%,rgba(8,9,10,.10) 78%);
  }
  .hero__in{padding-bottom:clamp(2.4rem,4vw,3.4rem)}
  .hero__in>*{max-width:min(56vw,640px)}
  .hero__cta .btn{flex:0 0 auto; min-width:0}
}

/* telas baixas (ex.: 1280x800): comprime o hero p/ a faixa caber na dobra */
@media(min-width:768px) and (max-height:790px){
  .hero__h1{font-size:clamp(2.2rem,4.4vw,3.5rem); margin-bottom:1.05rem}
  .hero__sub{font-size:1.04rem; margin-bottom:1.5rem}
  .hero__cta{margin-bottom:1.1rem}
  .hero__in{padding-bottom:1.7rem}
  .hero .eyebrow{margin-bottom:.8rem}
}

/* faixa deslizante (substitui a antiga caixa de 4 colunas) */
.ticker{
  order:3; position:relative; z-index:1; overflow:hidden;
  border-top:1px solid var(--line-l); border-bottom:1px solid var(--line-l);
  background:rgba(8,9,10,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  margin-top:2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker__track{display:flex; width:max-content; animation:tick 44s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ticker__set{display:flex; align-items:center; padding-block:1.05rem}
.tk{
  display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  font-family:var(--fm); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-ink-3);
}
.tk--f{color:var(--on-ink); font-weight:500}
.tk .ic{width:16px; height:16px; color:var(--acc); stroke-width:1.6}
.tk::after{
  content:''; flex:none; width:4px; height:4px; margin-inline:1.5rem;
  background:var(--acc); opacity:.5; transform:rotate(45deg);
}
@media(min-width:768px){
  .ticker{margin-top:0}
  .ticker__set{padding-block:1.15rem}
  .tk{font-size:.75rem}
  .tk::after{margin-inline:1.9rem}
}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none; width:auto}
  .ticker__set:nth-child(2){display:none}
  .ticker__set{flex-wrap:wrap; gap:.4rem 0; padding-inline:var(--pad)}
}

/* ============ 02 BENEFÍCIOS ============ */
.benef{background:var(--paper); color:var(--on-paper); padding-top:var(--sec)}
.benef .lead{color:var(--on-paper-2)}
.benef__top{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; margin-bottom:clamp(2.5rem,5vw,4rem)}
.benef__fig{border-radius:var(--r-lg); overflow:hidden; position:relative}
.benef__fig img{width:100%; aspect-ratio:16/9; object-fit:cover}
@media(max-width:767px){.benef__fig img{aspect-ratio:4/5}}
.benef__fig::after{content:''; position:absolute; inset:0; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; border-radius:inherit; pointer-events:none}

@media(min-width:1024px){
  /* a foto sai da caixa e vira fundo da faixa, sangrando de ponta a ponta */
  .benef__top{display:flex; align-items:center; position:relative; margin-bottom:0;
              min-height:74vh; padding-block:clamp(4rem,7vw,6.5rem)}
  /* sangra de ponta a ponta sem usar transform: o GSAP escreve transform
     nesses elementos no fade-in e apagaria o translateX */
  .benef__fig{position:absolute; top:0; bottom:0; left:calc(50% - 50vw);
              width:100vw; border-radius:0; margin:0}
  .benef__fig img{width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:64% 50%}
  .benef__fig::after{
    box-shadow:none;
    background:
      linear-gradient(90deg,rgba(8,9,10,.97) 0%,rgba(8,9,10,.95) 38%,rgba(8,9,10,.78) 54%,rgba(8,9,10,.12) 84%),
      /* dissolve para a cor da PRÓPRIA seção, senão aparece degrau entre os dois pretos */
      linear-gradient(180deg,var(--paper) 0%,transparent 20%,transparent 80%,var(--paper) 100%);
  }
  .benef__txt{position:relative; z-index:1; max-width:min(46vw,560px)}
}


/* bloco B — diferencial */
.dif{background:var(--ink); color:var(--on-ink); margin-top:var(--sec); padding-block:var(--sec); position:relative}
.dif__grid{display:grid; gap:clamp(2.2rem,4.5vw,4rem); align-items:center}
.dif__fig{border-radius:var(--r-lg); overflow:hidden; position:relative}
.dif__fig img{width:100%; aspect-ratio:4/3; object-fit:cover}
@media(max-width:767px){.dif__fig img{aspect-ratio:1/1}}
.dif__fig::after{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 1px var(--line-l) inset; pointer-events:none}
@media(min-width:1024px){
  /* mesma ideia, espelhada: foto ao fundo, texto encostado à direita */
  .dif__grid{display:flex; align-items:center; justify-content:flex-end; position:relative;
             min-height:78vh; padding-block:clamp(4rem,7vw,6.5rem)}
  .dif__fig{position:absolute; top:0; bottom:0; left:calc(50% - 50vw);
            width:100vw; border-radius:0; margin:0}
  .dif__fig img{width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:36% 50%}
  .dif__fig::after{
    box-shadow:none;
    background:
      linear-gradient(270deg,rgba(8,9,10,.97) 0%,rgba(8,9,10,.95) 38%,rgba(8,9,10,.78) 54%,rgba(8,9,10,.12) 84%),
      linear-gradient(180deg,var(--ink) 0%,transparent 20%,transparent 80%,var(--ink) 100%);
  }
  .dif__txt{position:relative; z-index:1; max-width:min(46vw,560px)}
}

.dif__txt .h2{margin-bottom:1.4rem}
.dif__txt .lead{margin-bottom:2.4rem}
.args{display:grid; gap:1.5rem}
.args li{display:flex; gap:1rem; align-items:flex-start}
.args .ic{
  color:var(--acc); flex:none; width:44px; height:44px; padding:11px; margin-top:0;
  border:1px solid rgba(198,240,72,.42); border-radius:50%;
  background:rgba(198,240,72,.05); box-sizing:border-box;
  transition:background .4s var(--e), border-color .4s var(--e);
}
.args li:hover .ic{background:rgba(198,240,72,.12); border-color:rgba(198,240,72,.65)}
.args h4{font-size:.95rem; font-weight:700; text-transform:uppercase; letter-spacing:.01em; margin-bottom:.3rem}
.args p{font-size:.92rem; color:var(--on-ink-2); line-height:1.55; max-width:46ch}
.dif__quote{margin-top:clamp(3.5rem,8vw,6.5rem); border-top:1px solid var(--line-l); padding-top:clamp(2.5rem,5vw,4rem); display:grid; gap:2.2rem}
@media(min-width:1024px){.dif__quote{grid-template-columns:1.35fr auto; align-items:end}}
.quote{
  font-size:clamp(1.6rem,3.6vw,2.9rem); line-height:1.14; font-weight:700; letter-spacing:-.035em;
  text-wrap:balance;
}
.dif__quote .btn{justify-self:start; align-self:end}
.dif__quote .quote{max-width:20ch}


/* ============ CAMADA FUTURISTA (seções 01 e 02) ============
   Tudo decorativo: some inteiro em prefers-reduced-motion.   */

/* malha de pontos do hero */
.fx-net{position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:.9}
@media(max-width:767px){.fx-net{opacity:.55}}

/* moldura técnica do hero */
.hud{position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(198,240,72,.045) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(198,240,72,.045) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(120% 90% at 20% 50%,#000 10%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 20% 50%,#000 10%,transparent 72%);
}
.hud__br{position:absolute; width:26px; height:26px; border:1px solid rgba(198,240,72,.34)}
.hud__br--tl{top:calc(var(--hdr-h) + 14px); left:var(--pad); border-right:0; border-bottom:0}
.hud__br--tr{top:calc(var(--hdr-h) + 14px); right:var(--pad); border-left:0; border-bottom:0}
.hud__br--bl{bottom:82px; left:var(--pad); border-right:0; border-top:0}
.hud__br--br{bottom:82px; right:var(--pad); border-left:0; border-top:0}
/* varredura lenta */
.hud__scan{position:absolute; left:0; right:0; height:140px; top:-140px;
  background:linear-gradient(180deg,transparent,rgba(198,240,72,.055),transparent);
  animation:scan 9s linear infinite;
}
@keyframes scan{to{top:100%}}

/* o conteúdo do hero fica acima da camada decorativa */
.hero__in,.ticker{z-index:2}

@media(prefers-reduced-motion:reduce){
  .fx-net,.hud{display:none}
}



/* faixa dos benefícios — mesma mecânica da do hero, invertida.
   Duas esteiras no mesmo sentido, tão perto uma da outra, leriam
   como repetição; no sentido contrário viram um par intencional. */
@keyframes tickRev{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.ticker--benef{
  order:initial; margin-top:0;
  background:var(--acc); backdrop-filter:none; -webkit-backdrop-filter:none;
  border-top:1px solid rgba(12,16,0,.18); border-bottom:1px solid rgba(12,16,0,.18);
  /* sem máscara aqui: mascarar o elemento apagaria o próprio lima nas pontas
     e pareceria defeito. O texto some num degrau da mesma cor, abaixo. */
  position:relative;
}
.ticker--benef::before,.ticker--benef::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(28px,6%,90px); z-index:2; pointer-events:none;
}
.ticker--benef::before{left:0; background:linear-gradient(90deg,var(--acc),rgba(198,240,72,0))}
.ticker--benef::after{right:0; background:linear-gradient(270deg,var(--acc),rgba(198,240,72,0))}
.ticker--benef .ticker__track{animation-name:tickRev; animation-duration:58s}
.ticker--benef .ticker__set{padding-block:1.45rem; align-items:center}
.tk--b{gap:.7rem; color:var(--acc-ink)}
.tk--b .ic{width:19px; height:19px; color:var(--acc-ink); stroke-width:1.7; opacity:.85}
.tk--b b{
  font-family:var(--ff); font-size:1.02rem; font-weight:700; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--acc-ink);
}
.tk--b span{
  font-family:var(--ff); font-size:.95rem; font-weight:400; letter-spacing:0;
  text-transform:none; color:rgba(12,16,0,.66); white-space:nowrap;
}
.tk--b::after{background:var(--acc-ink); opacity:.30; margin-inline:1.6rem}
@media(min-width:768px){
  .ticker--benef .ticker__set{padding-block:1.7rem}
  .tk--b b{font-size:1.1rem}
  .tk--b span{font-size:1rem}
  .tk--b::after{margin-inline:2.1rem}
}
@media(prefers-reduced-motion:reduce){
  .ticker--benef .ticker__set{padding-inline:var(--pad)}
}

/* transição de seção — a cobertura que se desfaz */
#beneficios,#solucoes,#onde-instalamos{position:relative}
.strans{position:absolute; inset:0; z-index:5; pointer-events:none}
.strans--grade{display:grid}
.strans i{display:block; width:100%; height:100%; will-change:opacity,transform}
.strans i{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.strans{display:none}}

/* ============ 03 COMO FUNCIONA ============ */
.how{background:var(--paper); color:var(--on-paper); padding-block:var(--sec); position:relative; overflow:hidden}
.how .lead{color:var(--on-paper-2)}
.how .eyebrow{color:var(--acc)}
.how__glow{
  position:absolute; top:-30%; left:50%; width:min(1100px,120%); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(198,240,72,.10) 0%,transparent 62%); pointer-events:none;
}
.steps{position:relative; display:grid; gap:0}
.step{
  position:relative; padding:2.2rem 0 2.2rem 3.6rem; border-top:1px solid var(--line-d);
}
.step:last-of-type{border-bottom:1px solid var(--line-d)}
.step__n{
  font-family:var(--fm); font-size:.82rem; color:var(--acc); letter-spacing:.06em;
  position:absolute; left:0; top:2.35rem;
}
.step__dot{
  position:absolute; left:1.62rem; top:2.5rem; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--on-paper-2); transition:all .45s var(--e);
}
.step.is-on .step__dot{background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 5px rgba(198,240,72,.16)}
.step h3{font-size:clamp(1.35rem,3.1vw,2.05rem); font-weight:700; letter-spacing:-.028em; margin-bottom:.45rem; line-height:1.1}
.step p{color:var(--on-paper-2); font-size:1rem; max-width:34ch}
.steps__line{position:absolute; left:1.99rem; top:2.5rem; bottom:2.5rem; width:1.5px; background:var(--line-d)}
.steps__line i{display:block; width:100%; height:0; background:var(--acc); transform-origin:top}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); padding-top:2.6rem}
  .step{padding:3.4rem 0 0; border-top:0; border-bottom:0 !important}
  .step__n{top:auto; bottom:calc(100% + .9rem); left:0}
  .step__dot{left:0; top:-5px}
  .steps__line{left:0; right:0; top:calc(2.6rem - .75px); bottom:auto; width:auto; height:1.5px}
  .steps__line i{height:100%; width:0; background:var(--acc)}
  .step h3{margin-top:.2rem}
}

/* ============ 04 SOLUÇÕES ============ */
.sol{background:var(--ink); padding-block:var(--sec)}
.sol__grid{display:grid; gap:clamp(1.1rem,2.2vw,1.6rem)}
@media(min-width:640px){.sol__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sol__grid{grid-template-columns:repeat(3,1fr)}}
.scard a{
  display:block; height:100%; background:var(--ink-2); border:1px solid rgba(198,240,72,.20);
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  transition:border-color .45s var(--e), transform .45s var(--e), box-shadow .45s var(--e);
}
.scard__img{display:block; overflow:hidden; position:relative}
.scard__img img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.1s var(--e)}
.scard__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(13,15,17,.85) 100%);
}
.scard__body{display:block; padding:1.5rem clamp(1.25rem,2vw,1.7rem) 1.7rem}
.scard__body h3{font-size:1.22rem; font-weight:700; letter-spacing:-.024em; margin-bottom:.55rem}
.scard__body p{font-size:.93rem; color:var(--on-ink-2); line-height:1.55; margin-bottom:1.3rem; min-height:2.9em}
.lnk{display:inline-flex; align-items:center; gap:.5rem; color:var(--acc); font-weight:600; font-size:.9rem}
.scard a:hover{transform:translateY(-4px); border-color:rgba(198,240,72,.42); box-shadow:0 24px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(198,240,72,.16)}
.scard a:hover .scard__img img{transform:scale(1.045)}
.scard a:hover .ic--arw{transform:translateX(5px)}

/* ============ 05 ONDE INSTALAMOS ============ */
.amb{background:var(--paper); color:var(--on-paper); padding-block:var(--sec)}
.amb .eyebrow{color:var(--acc)}
.amb__grid{display:grid; gap:clamp(1.1rem,2.2vw,1.5rem)}
@media(min-width:700px){.amb__grid{grid-template-columns:repeat(3,1fr)}}
.acard a{display:block; position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate}
.acard img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 50%; transition:transform 1.1s var(--e)}
.acard--hotel img{object-position:76% 50%}
.acard--predio img{object-position:60% 50%}
@media(max-width:767px){.acard img{aspect-ratio:4/5}}
@media(min-width:700px){.acard img{aspect-ratio:3/4}}
.acard__ov{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,9,10,.10) 30%,rgba(8,9,10,.55) 65%,rgba(8,9,10,.88) 100%);
  transition:background .5s var(--e);
}
.acard__b{
  position:absolute; inset:auto 0 0; display:flex; align-items:center; gap:.8rem;
  padding:1.4rem clamp(1.2rem,2vw,1.6rem); color:var(--on-ink);
}
.acard__b h3{font-size:1.18rem; font-weight:700; letter-spacing:-.02em; margin-right:auto}
.acard__b .ic{color:var(--acc)}
.acard a:hover img{transform:scale(1.05)}
.acard a:hover .acard__ov{background:linear-gradient(180deg,rgba(8,9,10,.05) 25%,rgba(8,9,10,.45) 60%,rgba(12,16,0,.90) 100%)}
.acard a:hover .ic--arw{transform:translateX(5px)}
.amb__cta{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line-d);
  display:grid; gap:1.4rem;
}
.amb__cta p{font-size:clamp(1.15rem,2.6vw,1.65rem); font-weight:600; letter-spacing:-.025em; max-width:24ch}
@media(min-width:900px){.amb__cta{grid-template-columns:1fr auto; align-items:center}.amb__cta .btn{justify-self:end}}

/* ============ 06 FORMULÁRIO ============ */
.form-sec{background:var(--ink); padding-block:var(--sec); position:relative; overflow:hidden}
.form-sec::before{
  content:''; position:absolute; top:-10%; right:-15%; width:min(760px,90%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(198,240,72,.085) 0%,transparent 65%); pointer-events:none;
}
.form-sec__grid{position:relative; display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start}
@media(min-width:1024px){
  .form-sec__grid{grid-template-columns:.9fr 1.1fr}
  .form-sec__intro{position:sticky; top:calc(var(--hdr-h) + 3rem)}
}
.form-sec__intro .h2{margin-bottom:1.3rem}
.perks{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.2rem}
.perks li{display:flex; align-items:center; gap:.55rem; font-size:.92rem; color:var(--on-ink-2)}
.perks .ic{width:17px; height:17px; stroke-width:2.2; color:var(--acc)}

.quiz{
  background:linear-gradient(168deg,var(--ink-3) 0%,var(--ink-2) 62%);
  border:1px solid var(--line-l); border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,2.4rem);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset;
  position:relative;
}
.quiz__bar{margin-bottom:clamp(1.6rem,3vw,2.2rem)}
.quiz__meta{display:flex; align-items:center; gap:1rem; margin-bottom:.85rem; min-height:26px}
.quiz__back{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--on-ink-2);
  transition:color .25s; padding:.2rem .1rem;
}
.quiz__back:hover{color:var(--on-ink)}
.quiz__count{font-family:var(--fm); font-size:.72rem; letter-spacing:.09em; color:var(--on-ink-3); margin-left:auto; text-transform:uppercase}
.prog{height:3px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden}
.prog i{
  display:block; height:100%; width:10%; border-radius:99px;
  background:linear-gradient(90deg,var(--acc-d),var(--acc));
  box-shadow:0 0 12px var(--acc-glow);
  transition:width .55s var(--e);
}
.quiz__stage{position:relative}
@media(min-width:640px){.quiz__stage{min-height:290px}}

.qs{display:none}
.qs.is-on{display:block; animation:qin .42s var(--e) both}
.no-js .qs{display:block; margin-bottom:2.5rem}
@keyframes qin{from{opacity:0; transform:translateX(16px)}to{opacity:1; transform:none}}
.qs.is-back.is-on{animation-name:qinb}
@keyframes qinb{from{opacity:0; transform:translateX(-16px)}to{opacity:1; transform:none}}
.qs__q{
  font-size:clamp(1.22rem,2.6vw,1.6rem); font-weight:700; letter-spacing:-.028em;
  line-height:1.22; margin-bottom:1.5rem; text-wrap:balance; color:var(--on-ink);
}

.fld{display:block; margin-bottom:.2rem}
.fld__lb{display:block; font-family:var(--fm); font-size:.68rem; text-transform:uppercase; letter-spacing:.11em; color:var(--on-ink-3); margin-bottom:.55rem}
.fld input{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line-l);
  border-radius:12px; padding:1.02rem 1.1rem; font-size:16px; color:var(--on-ink);
  transition:border-color .3s var(--e), background .3s var(--e), box-shadow .3s var(--e);
}
.fld input::placeholder{color:rgba(245,243,240,.28)}
.fld input:hover{border-color:rgba(255,255,255,.20)}
.fld input:focus{outline:none; border-color:var(--acc); background:rgba(198,240,72,.05); box-shadow:0 0 0 3px rgba(198,240,72,.14)}
.fld-row{display:grid; gap:1rem}
@media(min-width:560px){.fld-row{grid-template-columns:1fr 1fr}}
.hint{font-size:.83rem; color:var(--on-ink-3); margin-top:.85rem}
.err{font-size:.85rem; color:#FF8A7A; margin-top:.7rem; min-height:1.2em; display:none}
.err.is-on{display:block; animation:qin .3s var(--e) both}

.opts{display:grid; gap:.7rem}
.opts--3{grid-template-columns:repeat(3,1fr); gap:.6rem}
.opt input{position:absolute; opacity:0; width:1px; height:1px}
.opt__in{
  display:flex; align-items:center; gap:.8rem; position:relative;
  background:rgba(255,255,255,.035); border:1px solid var(--line-l); border-radius:12px;
  padding:1.05rem 1.1rem; font-size:.97rem; cursor:pointer; min-height:58px;
  transition:border-color .28s var(--e), background .28s var(--e), transform .28s var(--e);
}
.opts--3 .opt__in{flex-direction:column; gap:.6rem; text-align:center; padding:1.25rem .7rem; min-height:112px; justify-content:center}
.opt__in b{font-weight:500; letter-spacing:-.01em; line-height:1.3}
.opt__in .ic{color:var(--on-ink-3); transition:color .28s var(--e)}
.opt__in:hover{border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06)}
.opt__ck{
  width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(255,255,255,.20); flex:none;
  margin-left:auto; position:relative; transition:all .28s var(--e);
}
.opts--3 .opt__ck{position:absolute; top:.7rem; right:.7rem; margin:0; width:17px; height:17px}
.opt__ck::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--acc) no-repeat center/9px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
  transform:scale(0); transition:transform .3s cubic-bezier(.2,1.5,.4,1);
}
.opt input:checked + .opt__in{border-color:var(--acc); background:rgba(198,240,72,.09)}
.opt input:checked + .opt__in .ic{color:var(--acc)}
.opt input:checked + .opt__in .opt__ck{border-color:var(--acc)}
.opt input:checked + .opt__in .opt__ck::after{transform:scale(1)}
.opt input:focus-visible + .opt__in{outline:2px solid var(--acc); outline-offset:3px}
.opt__in:active{transform:scale(.988)}

.quiz__foot{margin-top:clamp(1.6rem,3vw,2.2rem)}
.quiz.is-sending .quiz__foot .btn{opacity:.6; pointer-events:none}

.done{text-align:center; padding:clamp(2rem,5vw,3.5rem) 1rem}
.done__ck{display:block; width:74px; margin:0 auto 1.8rem}
.done__ck svg{width:100%; height:auto; fill:none; stroke-linecap:round; stroke-linejoin:round}
.done__c{stroke:var(--acc); stroke-width:2; stroke-dasharray:151; stroke-dashoffset:151; animation:dc .7s var(--e) forwards}
.done__p{stroke:var(--acc); stroke-width:3.5; stroke-dasharray:40; stroke-dashoffset:40; animation:dp .45s var(--e) .55s forwards}
@keyframes dc{to{stroke-dashoffset:0}}
@keyframes dp{to{stroke-dashoffset:0}}
.done h3{font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:700; letter-spacing:-.03em; margin-bottom:.8rem}
.done p{color:var(--on-ink-2); max-width:38ch; margin-inline:auto; line-height:1.6}

/* armadilha anti-bot — fora da tela, mas não display:none
   (bot moderno ignora campo com display:none; esse ele preenche) */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.hp input{width:1px; height:1px}

/* ============ 07 CTA FINAL ============ */
.fcta{position:relative; min-height:min(88svh,760px); display:flex; align-items:center; padding-block:clamp(5rem,12vw,9rem); overflow:hidden}
.fcta__media{position:absolute; inset:0; z-index:0}
.fcta__media img{width:100%; height:100%; object-fit:cover; object-position:66% 50%}
.fcta__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(8,9,10,.95) 0%,rgba(8,9,10,.74) 45%,rgba(8,9,10,.30) 80%),
    linear-gradient(180deg,var(--ink) 0%,transparent 22%,transparent 72%,var(--ink) 100%);
}
.fcta__in{position:relative; z-index:1}
.fcta__in>*{max-width:min(90%,660px)}
.fcta .h2{margin-bottom:1.4rem}
.fcta .lead{margin-bottom:2.4rem}

/* ============ FOOTER ============ */
.ft{background:var(--ink); border-top:1px solid var(--line-l); padding-top:clamp(3rem,6vw,4.5rem)}
.ft__grid{display:grid; gap:2.5rem; padding-bottom:clamp(2.5rem,5vw,4rem)}
@media(min-width:760px){.ft__grid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem}}
.ft__brand p{color:var(--on-ink-3); font-size:.93rem; margin-top:1rem; max-width:30ch}
.ft h2{font-family:var(--fm); font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; color:var(--on-ink-3); margin-bottom:1.1rem; font-weight:400}
.ft nav,.ft__ct,.ft__lg{display:flex; flex-direction:column; gap:.75rem; align-items:flex-start}
.ft a:not(.logo){color:var(--on-ink-2); font-size:.93rem; display:inline-flex; align-items:center; gap:.55rem; transition:color .25s}
.ft a:not(.logo):hover{color:var(--acc)}
.ft .ic{width:18px; height:18px}
.ph{font-family:var(--fm); font-size:.72rem; color:var(--on-ink-3); opacity:.75}
.ft__bot{
  border-top:1px solid var(--line-l); padding-block:1.6rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.82rem; color:var(--on-ink-3);
}
.ft__cnpj{font-family:var(--fm); font-size:.74rem; opacity:.7}

/* ============ CTA MOBILE FIXO ============ */
.mcta{
  position:fixed; left:var(--pad); right:var(--pad); bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:90;
  background:var(--acc); color:var(--acc-ink); text-align:center; font-weight:600; font-size:.95rem;
  padding:1rem 1.2rem; border-radius:100px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.25) inset;
  transform:translateY(140%); opacity:0; pointer-events:none;
  transition:transform .45s var(--e), opacity .35s var(--e);
}
.mcta.is-on{transform:none; opacity:1; pointer-events:auto}
@media(min-width:940px){.mcta{display:none}}

/* ============ REVEAL ============ */
.js [data-rv]{opacity:0}
/* O hero é a exceção: ele NÃO espera o GSAP.
   Antes o texto nascia invisível e só aparecia quando o script terminava de
   baixar da CDN — no 4G isso custava segundos e derrubava o LCP. Agora entra
   por animação CSS, que começa assim que a folha de estilo é lida. */
.js .hero [data-rv]{opacity:1}
.hero .eyebrow,.hero__h1,.hero__sub,.hero__cta,.hero__note,.hero .ticker{
  animation:heroIn .5s var(--e) both;
}
.hero .eyebrow{animation-delay:.04s}
.hero__h1{animation-delay:.10s}
.hero__sub{animation-delay:.18s}
.hero__cta{animation-delay:.25s}
.hero__note{animation-delay:.31s}
.hero .ticker{animation-delay:.36s}
@keyframes heroIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.js [data-split] .wl{display:inline-block; overflow:hidden; vertical-align:top}
.js [data-split] .wl i{display:inline-block; font-style:inherit; will-change:transform}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js [data-rv]{opacity:1 !important; transform:none !important}
  .mcta{transition:none}
}