/* ============================================================
   Site24h — Landing "Editorial Bold" (claro, premium)
   CSS puro, zero build. Tokens + seções + motion contido.
   ============================================================ */

:root{
  /* Papel / tinta */
  --paper:#F7F4EC;        /* fundo creme quente */
  --paper-2:#FBF9F2;
  --surface:#FFFFFF;
  --ink:#15140F;          /* quase-preto quente */
  --ink-2:#2C2A22;
  --muted:#615C50;        /* texto secundário (>=5:1 no creme) */
  --line:#E6E0D2;         /* hairline */
  --line-2:#D8D1BF;

  /* Acento de conversão (verde WhatsApp, acessível) */
  --green:#16A34A;
  --green-deep:#0E7A38;   /* verde para texto/sublinhado */
  --wpp:#10893F;          /* fundo de botão WhatsApp (texto branco 4.5:1) */
  --green-tint:#E8F2E9;

  /* Seção invertida (editorial dark block) */
  --night:#15140F;
  --night-2:#211F18;
  --on-night:#F4F1E6;
  --on-night-muted:#A7A091;
  --on-night-line:#34322A;

  /* Raio */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --pill:999px;

  /* Sombra (suave, editorial) */
  --sh-sm:0 1px 2px rgba(21,20,15,.05);
  --sh:0 14px 38px -16px rgba(21,20,15,.20);
  --sh-lg:0 40px 80px -28px rgba(21,20,15,.34);

  /* Tipografia — display grotesk moderna + Inter no corpo */
  --display:"Space Grotesk","Inter",system-ui,-apple-system,sans-serif;
  --serif:var(--display); /* compat: títulos agora em sans display, sem serif */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Aurora (verde-marca + frio para profundidade, discreto sobre o creme) */
  --aur-green:#16A34A;
  --aur-teal:#0EA5A0;
  --aur-blue:#6FA8FF;
  --aur-warm:#E9C46A;

  /* Cursor (atualizado via JS) */
  --mx:50%; --my:30%;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px;border-radius:4px}
summary:focus-visible{outline-offset:0}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ic{width:24px;height:24px;flex:none}

/* Tipografia display — grotesk moderna, tracking negativo */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.03em;color:var(--ink);overflow-wrap:break-word}
.serif{font-family:var(--display)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);
}
.eyebrow .ic{width:16px;height:16px}
.eyebrow--light{color:var(--on-night-muted)}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;
  padding:15px 25px;border-radius:var(--pill);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .26s var(--ease-out),box-shadow .26s var(--ease),background .18s,color .18s,border-color .18s;
}
/* ÍCONE: trava o tamanho (o sprite #wpp não tem classe e cairia no default 300×150) */
.btn svg{width:19px;height:19px;flex:none;position:relative;z-index:1}
.btn .ic{width:19px;height:19px}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* sweep de brilho que cruza no hover (handcrafted, não-genérico) */
.btn--ink::before,.btn--wpp::before,.btn--light::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);
}
.btn--ink:hover::before,.btn--wpp:hover::before,.btn--light:hover::before{transform:translateX(120%)}

.btn--ink{background:var(--ink);color:var(--paper);box-shadow:var(--sh)}
.btn--ink:hover{box-shadow:var(--sh-lg)}

.btn--wpp{background:var(--wpp);color:#fff;box-shadow:0 10px 26px -14px rgba(16,137,63,.55)}
.btn--wpp:hover{box-shadow:0 16px 34px -14px rgba(16,137,63,.7)}
.btn--wpp svg,.btn--wpp svg *{fill:currentColor}

/* lift padrão dos botões sólidos (sobrescrito inline pelos magnéticos) */
.btn--ink:hover,.btn--wpp:hover{transform:translateY(-3px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-3px)}

.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}

.btn--block{width:100%}
.btn--lg{padding:19px 32px;font-size:1.06rem}

/* ícone de seta que desliza no hover */
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,padding .3s var(--ease);
  border-bottom:1px solid transparent;padding:18px 0;
}
.nav.is-stuck{
  background:rgba(247,244,236,.82);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);padding:11px 0;box-shadow:var(--sh-sm);
}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:600}
.brand__mark{
  width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.15rem;
  box-shadow:var(--sh-sm)
}
.brand__name{font-family:var(--serif);font-size:1.12rem;letter-spacing:-.01em}
.brand__name b{font-weight:700}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--ink-2);position:relative;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--ink);transition:right .25s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__burger{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:150px 0 80px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{
  font-size:clamp(2.7rem,6vw,4.7rem);font-weight:700;letter-spacing:-.04em;margin:22px 0 0;
}
/* destaque com texto em gradiente vivo (verde-marca → teal) */
.hero h1 .hl{
  position:relative;white-space:nowrap;font-weight:700;color:var(--green-deep);
  background:linear-gradient(100deg,var(--green) 0%,var(--green-deep) 38%,var(--aur-teal) 78%,var(--green) 100%);
  background-size:220% 100%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:hlflow 7s linear infinite;
}
@keyframes hlflow{to{background-position:-220% 50%}}
.hero h1 .hl::after{
  content:"";position:absolute;left:-1%;right:-1%;bottom:.02em;height:.1em;border-radius:6px;
  background:linear-gradient(90deg,var(--green),var(--aur-teal));opacity:.45;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .55s
}
.hero.is-in h1 .hl::after{transform:scaleX(1)}

/* AURORA — blobs desfocados animados + glow que segue o cursor */
.hero__aurora{position:absolute;inset:-12% -6% 0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 70% 0%,#000 35%,transparent 78%);}
.hero__aurora span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform}
.hero__aurora .a1{width:46vw;height:46vw;right:-6vw;top:-12vw;background:radial-gradient(circle,var(--aur-green),transparent 66%);animation:aur1 17s var(--ease) infinite}
.hero__aurora .a2{width:38vw;height:38vw;right:14vw;top:-2vw;background:radial-gradient(circle,var(--aur-teal),transparent 64%);opacity:.4;animation:aur2 21s var(--ease) infinite}
.hero__aurora .a3{width:34vw;height:34vw;right:2vw;top:16vw;background:radial-gradient(circle,var(--aur-blue),transparent 62%);opacity:.32;animation:aur3 25s var(--ease) infinite}
.hero__aurora .a4{width:26vw;height:26vw;left:-8vw;top:8vw;background:radial-gradient(circle,var(--aur-warm),transparent 66%);opacity:.22;animation:aur2 23s var(--ease) infinite reverse}
@keyframes aur1{50%{transform:translate3d(-7%,6%,0) scale(1.12)}}
@keyframes aur2{50%{transform:translate3d(8%,-5%,0) scale(.9)}}
@keyframes aur3{50%{transform:translate3d(-9%,-7%,0) scale(1.15)}}
/* glow reativo ao cursor (só com ponteiro fino) */
.hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(280px 280px at var(--mx) var(--my),rgba(22,163,74,.16),transparent 70%);}
.hero.glow-on .hero__glow{opacity:1}
.hero__sub{font-size:1.18rem;color:var(--muted);max-width:520px;margin-top:24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__selos{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px}
.hero__selo{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;color:var(--ink-2);font-weight:500}
.hero__selo .tick{width:26px;height:26px;border-radius:50%;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;flex:none}
.hero__selo .tick .ic{width:15px;height:15px}

.hero__grid{position:relative;z-index:1}

/* reveal por palavra do h1 (preenchido pelo JS via [data-split]) */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.word>i{display:inline-block;font-style:inherit;transform:translateY(115%);
  transition:transform .85s var(--ease-out)}
.hero.is-in .word>i{transform:none}

/* BENTO do hero (lado direito) */
.hero__art{perspective:1100px}
.bento{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:16px;transform-style:preserve-3d;transition:transform .4s var(--ease-out)}
.bento__mock{grid-column:1 / -1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}

.mock{padding:12px;transform:rotate(-1.1deg);transition:transform .5s var(--ease)}
.hero:hover .mock{transform:rotate(0deg)}
.mock__bar{display:flex;align-items:center;gap:7px;padding:8px 8px 12px}
.mock__bar i{width:11px;height:11px;border-radius:50%;background:#e2ddd0}
.mock__bar i:nth-child(1){background:#f0bcae}.mock__bar i:nth-child(2){background:#f2dcae}.mock__bar i:nth-child(3){background:#bfe3c2}
.mock__bar span{margin-left:8px;font-size:.72rem;color:var(--muted);font-weight:500}
.mock__screen{border-radius:14px;overflow:hidden;background:#f3f0e8;border:1px solid var(--line)}
.mock__topo{background:var(--ink);color:var(--paper);padding:13px 16px;font-weight:600;font-size:.9rem;font-family:var(--serif);display:flex;justify-content:space-between;align-items:center}
.mock__topo .dotmenu{display:flex;gap:4px}.mock__topo .dotmenu i{width:4px;height:4px;border-radius:50%;background:var(--on-night-muted)}
.mock__corpo{padding:16px}
.mock__corpo .ln{height:9px;border-radius:6px;background:#e3ddcf;margin:9px 0}
.ln.w40{width:40%}.ln.w60{width:60%}.ln.w80{width:80%}.ln.w90{width:90%}
.mock__hero{height:62px;border-radius:10px;background:linear-gradient(110deg,#e8f2e9,#d3e8d7);margin:12px 0;position:relative;overflow:hidden}
.mock__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.2s var(--ease) infinite}
@keyframes shine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.mock__btn{display:inline-block;background:var(--wpp);color:#fff;font-size:.72rem;font-weight:600;padding:7px 14px;border-radius:30px}

.stat{padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:118px}
.stat--ink{background:var(--ink);color:var(--on-night);border-color:transparent}
.stat--green{background:var(--green-tint);border-color:#d3e6d6}
.stat__k{font-family:var(--serif);font-weight:700;font-size:2.3rem;letter-spacing:-.02em;line-height:1}
.stat--ink .stat__k{color:#fff}.stat--green .stat__k{color:var(--green-deep)}
.stat__l{font-size:.82rem;color:var(--muted);font-weight:500;margin-top:6px}
.stat--ink .stat__l{color:var(--on-night-muted)}
.stat__top{display:flex;align-items:center;justify-content:space-between}
.stat__top .ic{width:20px;height:20px;opacity:.8}
.stat--green .stat__top .ic{color:var(--green-deep)}

/* ============================================================
   MARQUEE (faixa cinética de nichos)
   ============================================================ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:18px 0;overflow:hidden;margin-top:64px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:inline-flex;align-items:center;gap:42px;white-space:nowrap;will-change:transform;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:42px;font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--ink-2)}
.marquee__item .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   SEÇÕES — base
   ============================================================ */
.section{padding:96px 0}
.section--tight{padding:72px 0}
.head{max-width:680px;margin:0 0 52px}
.head--center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:16px 0 0}
.head p{color:var(--muted);font-size:1.12rem;margin-top:16px;max-width:560px}
.head--center p{margin-left:auto;margin-right:auto}

/* ============================================================
   DORES
   ============================================================ */
.dores{background:var(--surface)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dor{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.dor:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--line-2)}
.dor__ic{width:54px;height:54px;border-radius:15px;background:var(--ink);color:var(--paper);display:grid;place-items:center;margin-bottom:20px}
.dor__ic .ic{width:26px;height:26px}
.dor h3{font-size:1.4rem;margin-bottom:10px}
.dor p{color:var(--muted);font-size:1rem}

/* ============================================================
   PASSOS — seção invertida (editorial dark block)
   ============================================================ */
.passos{background:var(--night);color:var(--on-night);border-radius:38px;margin:0 16px;position:relative;overflow:hidden}
.passos::before{content:"";position:absolute;width:540px;height:540px;left:-160px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.16),transparent 65%)}
.passos .wrap{position:relative;z-index:1}
.passos .head h2{color:#fff}
.passos .head p{color:var(--on-night-muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:30px 26px;border:1px solid var(--on-night-line);border-radius:var(--r-lg);background:var(--night-2);position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.step:hover{transform:translateY(-6px);border-color:var(--green)}
.step__n{font-family:var(--serif);font-weight:900;font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--on-night-muted);margin-bottom:18px}
.step:hover .step__n{-webkit-text-stroke-color:var(--green);color:rgba(22,163,74,.12)}
.step h3{color:#fff;font-size:1.35rem;margin-bottom:10px}
.step p{color:var(--on-night-muted);font-size:1rem}
.step__line{position:absolute;top:50px;right:-9px;color:var(--on-night-line)}

/* ============================================================
   PLANOS
   ============================================================ */
.planos{background:var(--paper)}
.grid-planos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plano{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 28px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.plano:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.plano--destaque{background:var(--ink);border-color:var(--ink);color:var(--on-night);box-shadow:var(--sh-lg)}
.plano--destaque:hover{transform:translateY(-8px) scale(1.005)}
.plano__pop{position:absolute;top:-14px;left:28px;display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:7px 14px;border-radius:var(--pill);text-transform:uppercase}
.plano__pop .ic{width:13px;height:13px}
.plano__nome{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plano--destaque .plano__nome{color:var(--green)}
.plano__preco{font-family:var(--serif);font-size:3rem;font-weight:700;letter-spacing:-.02em;margin:10px 0 2px;color:var(--ink)}
.plano--destaque .plano__preco{color:#fff}
.plano__preco small{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--muted)}
.plano__obs{font-size:.9rem;color:var(--muted);margin-bottom:22px}
.plano--destaque .plano__obs{color:var(--on-night-muted)}
.plano ul{list-style:none;margin-bottom:26px;flex:1;display:flex;flex-direction:column;gap:1px}
.plano li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:.96rem;border-bottom:1px solid var(--line)}
.plano--destaque li{border-bottom-color:var(--on-night-line)}
.plano li:last-child{border-bottom:none}
.plano li .ic{width:19px;height:19px;margin-top:2px;flex:none}
.plano li .ck{color:var(--green-deep)}
.plano--destaque li .ck{color:var(--green)}
.plano li .xk{color:#c2bcae}
.plano li.off{color:#a8a294}
.plano--destaque li.off{color:#6f6a5e}

/* ============================================================
   HOSPEDAGEM
   ============================================================ */
.host{background:var(--surface)}
.host-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:46px}
.host-box .preco-h{font-family:var(--serif);font-size:3.2rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.host-box .preco-h small{font-family:var(--sans);font-size:1.05rem;font-weight:500;color:var(--muted)}
.host-box .desc{color:var(--muted);margin:14px 0 24px;font-size:1.05rem}
.host-feats{list-style:none;display:grid;gap:14px}
.host-feats li{display:flex;gap:13px;align-items:flex-start;font-size:1rem}
.host-feats li .fic{width:34px;height:34px;border-radius:10px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;flex:none}
.host-feats li .fic .ic{width:18px;height:18px}

/* ============================================================
   PROVA SOCIAL
   ============================================================ */
.prova{background:var(--paper)}
.grid-dep{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dep:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.dep__stars{display:flex;gap:3px;color:#E0A11A;margin-bottom:16px}
.dep__stars .ic{width:18px;height:18px}
.dep__txt{font-family:var(--serif);font-size:1.14rem;line-height:1.45;color:var(--ink-2);flex:1;font-weight:400}
.dep__quem{display:flex;align-items:center;gap:13px;margin-top:22px}
.dep__av{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:600;display:grid;place-items:center;flex:none}
.dep__quem b{display:block;font-size:.98rem;font-weight:600}
.dep__quem span{font-size:.85rem;color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--surface)}
.faq-list{max-width:780px;margin:0 auto}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:1.22rem;color:var(--ink)
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .sign{position:relative;width:24px;height:24px;flex:none}
.faq-list summary .sign::before,.faq-list summary .sign::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .28s}
.faq-list summary .sign::before{left:4px;right:4px;top:11px;height:2px}
.faq-list summary .sign::after{top:4px;bottom:4px;left:11px;width:2px}
.faq-list details[open] summary .sign::after{transform:scaleY(0);opacity:0}
.faq-list details[open] summary{color:var(--green-deep)}
.faq-list details[open] summary .sign::before{background:var(--green-deep)}
.faq-list .ans{overflow:hidden;color:var(--muted);font-size:1.04rem;padding:0 4px 26px;max-width:660px}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta{background:var(--paper)}
.cta-box{position:relative;overflow:hidden;background:var(--ink);color:var(--on-night);border-radius:38px;padding:78px 40px;text-align:center}
.cta-box::before{content:"";position:absolute;width:600px;height:600px;left:50%;top:-260px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.22),transparent 62%)}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:680px;margin:14px auto 0}
.cta-box p{color:var(--on-night-muted);font-size:1.16rem;max-width:560px;margin:18px auto 32px}

/* ============================================================
   RODAPÉ
   ============================================================ */
footer.foot{background:var(--ink);color:var(--on-night-muted);padding:64px 0 40px}
.foot__top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;padding-bottom:34px;border-bottom:1px solid var(--on-night-line)}
.foot .brand__name{color:#fff}
.foot__tag{margin-top:14px;max-width:340px;font-size:.98rem;color:var(--on-night-muted)}
.foot__links{display:flex;gap:28px;flex-wrap:wrap}
.foot__links a{text-decoration:none;color:var(--on-night-muted);font-size:.95rem;transition:color .2s}
.foot__links a:hover{color:#fff}
.foot__bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:26px;font-size:.86rem}
.foot__bottom .razao{color:var(--on-night)}

/* ============================================================
   BOTÃO FLUTUANTE + COOKIE
   ============================================================ */
.float{position:fixed;bottom:22px;right:22px;z-index:75;display:inline-flex;align-items:center;gap:9px;background:var(--wpp);color:#fff;padding:13px 18px;border-radius:var(--pill);text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:0 10px 26px -12px rgba(16,137,63,.55);transition:transform .3s var(--ease-out),box-shadow .25s var(--ease)}
.float svg{width:21px;height:21px;fill:#fff;position:relative;z-index:1}
.float span{position:relative;z-index:1}
.float:hover{box-shadow:0 16px 34px -12px rgba(16,137,63,.7)}
.float::after{content:"";position:absolute;inset:0;border-radius:var(--pill);box-shadow:0 0 0 0 rgba(16,137,63,.4);animation:halo 3.2s var(--ease) infinite}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(16,137,63,.34)}70%{box-shadow:0 0 0 13px rgba(16,137,63,0)}100%{box-shadow:0 0 0 0 rgba(16,137,63,0)}}

.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;box-shadow:var(--sh-lg);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cookie p{font-size:.9rem;color:var(--ink-2);margin:0;flex:1;min-width:240px}
.cookie a{color:var(--green-deep);text-decoration:underline;cursor:pointer}
.cookie button{flex:none}

/* ============================================================
   MOTION — reveal on scroll (com guarda de reduced-motion)
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.07s}
[data-reveal][data-delay="2"]{transition-delay:.14s}
[data-reveal][data-delay="3"]{transition-delay:.21s}
[data-reveal][data-delay="4"]{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .hl::after{transform:scaleX(1)}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero{padding:120px 0 56px}
  .bento{max-width:460px}
  .step__line{display:none}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .nav{position:fixed}
  .nav__row{position:relative}
  .nav__links{display:none}
  .nav.open .nav__links{
    display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 18px;box-shadow:var(--sh-lg)
  }
  .nav.open .nav__links a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav.open .nav__links a:last-child{border-bottom:none}
  .nav.open .nav__links a::after{display:none}
  .nav__cta .btn--ghost{display:none}
  .nav__burger{display:flex}
  .hero{padding:104px 0 48px}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
  .head h2{font-size:clamp(1.72rem,6.6vw,2.3rem)}
  .hero__sub{font-size:1.08rem}
  .grid3,.steps,.grid-planos,.grid-dep{grid-template-columns:1fr}
  .passos{margin:0 8px;border-radius:28px}
  .host-box{grid-template-columns:1fr;gap:30px;padding:30px}
  .section{padding:68px 0}
  .cta-box{padding:54px 24px;border-radius:28px}
  .float span{display:none}
  .float{padding:16px;border-radius:50%}
  .marquee__item{font-size:1.2rem}
  .foot__top{flex-direction:column}
  /* no celular some o mock do navegador — sobram só as badges Entrega / A partir de */
  .bento__mock{display:none}
  .bento{grid-template-columns:1fr 1fr;max-width:none;gap:12px}
  .stat{min-height:104px;padding:18px}
}
@media (max-width:420px){
  .hero__cta .btn{width:100%}
  .bento{grid-template-columns:1fr 1fr}
}

/* ============================================================
   PORTFÓLIO (/portfolio)
   ============================================================ */
.nav__links a.is-active{color:var(--green-deep)}
.nav__links a.is-active::after{right:0}

.pf-hero{position:relative;overflow:hidden;padding:140px 0 60px}
.pf-hero .wrap{position:relative;z-index:1}
.pf-back{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;font-weight:500;color:var(--muted);text-decoration:none;margin-bottom:22px;transition:color .2s,gap .2s var(--ease)}
.pf-back .ic{width:17px;height:17px;transform:rotate(180deg)}
.pf-back:hover{color:var(--ink);gap:11px}
.pf-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:700;letter-spacing:-.04em;margin:18px 0 0;max-width:14ch}
.pf-sub{font-size:1.18rem;color:var(--muted);max-width:560px;margin-top:22px}
.pf-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.pf-actions .btn--ghost svg,.btn--ink svg{fill:currentColor}

.pf{background:var(--surface)}
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pf-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px 28px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.pf-card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--line-2)}
.pf-card--feat{grid-column:1 / -1;background:var(--ink);border-color:var(--ink);color:var(--on-night)}
.pf-card--feat:hover{box-shadow:var(--sh-lg)}
.pf-card__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.pf-card__cat{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
.pf-card--feat .pf-card__cat{color:var(--green)}
.pf-card__year{font-size:.82rem;color:var(--muted);font-weight:500}
.pf-card--feat .pf-card__year{color:var(--on-night-muted)}
.pf-card h3{font-size:1.55rem;letter-spacing:-.025em}
.pf-card--feat h3{color:#fff}
.pf-card__desc{color:var(--muted);font-size:1rem;margin:10px 0 18px;flex:1}
.pf-card--feat .pf-card__desc{color:var(--on-night-muted)}
.pf-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pf-tags li{font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:5px 12px}
.pf-card--feat .pf-tags li{color:var(--on-night);background:var(--night-2);border-color:var(--on-night-line)}
.pf-card__links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:auto}
.pf-card__links a{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;font-weight:600;text-decoration:none;color:var(--ink);transition:color .2s,gap .2s var(--ease)}
.pf-card__links a:hover{color:var(--green-deep);gap:10px}
.pf-card__links .ic{width:18px;height:18px}
.pf-card--feat .pf-card__links a{color:#fff}
.pf-card--feat .pf-card__links a:hover{color:var(--green)}

.pf-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px;padding:34px 36px;background:var(--green-tint);border:1px solid #d3e6d6;border-radius:var(--r-xl)}
.pf-foot p{font-family:var(--display);font-size:1.32rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);max-width:34ch}

@media (max-width:760px){
  .pf-hero{padding:104px 0 40px}
  .pf-grid{grid-template-columns:1fr}
  .pf-foot{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .pf-foot .btn{width:100%}
}