/* ============================================================
   MoonVox — landing v3 · "A Voz"
   Base Cosmic. Tokens = brand/tokens/tokens.css (fonte de verdade).
   Mesmo DNA da mãe MOONUP: piso xadrez, seções full-height,
   footer cf máximo, pílulas magnéticas elásticas.
   Vanilla + GSAP. Roda em file://.
   ============================================================ */

:root{
  --aether:#00C2FF;
  --aether-deep:#0E89BE;
  --aether-ink:#7FE0FF;
  --aether-glow:rgba(0,194,255,.45);
  --aether-wash:rgba(0,194,255,.06);
  --cosmic:#040407;
  --sunken:#06060A;
  --text-1:#FFFFFF;
  --text-2:#C7CBD1;
  --text-3:#8E9196;
  --text-4:#4A4D52;
  --line:rgba(243,244,247,.08);
  --line-strong:rgba(255,255,255,.13);
  --success:#11AB6A;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --grid:66px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --container:1180px;
  /* piso xadrez — animado pelo GSAP conforme a narrativa avança */
  --floor-x:50%;
  --floor-y:78%;
  --floor-intensity:.5;
  --floor-opacity:.42;
  --floor-mask:78%;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{
  background:var(--cosmic);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(0,194,255,.15);color:#fff}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2A2D31;border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:#8E9196}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid rgba(0,194,255,.45);outline-offset:3px;border-radius:4px}
img,svg,canvas{display:block;max-width:100%}
.mono{font-family:var(--font-mono);letter-spacing:.08em}

/* grão de filme */
.grain{
  position:fixed;inset:-8%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

.container{width:min(var(--container),100% - clamp(40px,8vw,96px));margin-inline:auto}

/* ============================================================
   PISO XADREZ · a malha nasce coberta pela sombra e só é
   revelada onde o pool de luz Aether passa (mask radial).
   As seções não redesenham o chão: a luz reposiciona a revelação.
   ============================================================ */
.world-floor{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--cosmic)}
.world-floor-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.085) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  opacity:var(--floor-opacity);
  -webkit-mask-image:radial-gradient(ellipse var(--floor-mask) 60% at var(--floor-x) var(--floor-y),#000 0%,rgba(0,0,0,.55) 42%,transparent 70%);
  mask-image:radial-gradient(ellipse var(--floor-mask) 60% at var(--floor-x) var(--floor-y),#000 0%,rgba(0,0,0,.55) 42%,transparent 70%);
}
.world-floor-light{
  position:absolute;left:var(--floor-x);top:var(--floor-y);
  width:64vw;height:46vh;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,194,255,.14),rgba(0,194,255,.04) 55%,transparent 75%);
  filter:blur(60px);mix-blend-mode:screen;
  opacity:var(--floor-intensity);
}
.world-floor-haze{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(4,4,7,.9),transparent 18%,transparent 82%,rgba(4,4,7,.9)),
    linear-gradient(to bottom,rgba(4,4,7,.65),transparent 30%);
}
/* conteúdo acima do piso */
.hero,main,.cf{position:relative;z-index:1}

/* ============================================================ NAV */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:clamp(20px,4vw,48px);
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.nav-solid{background:rgba(4,4,7,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-mark{height:26px;width:auto}
.nav-word{font-weight:700;font-size:15px;letter-spacing:.02em}
.js .nav-brand{opacity:0;transform:translateY(-6px);transition:opacity .6s var(--ease-enter),transform .6s var(--ease-enter)}
.js .nav.nav-branded .nav-brand,html.force-done .nav-brand{opacity:1;transform:none}
.nav-links{display:flex;gap:clamp(16px,2.4vw,32px)}
.nav-links a{font-size:13px;color:var(--text-3);transition:color .3s var(--ease)}
.nav-links a:hover{color:var(--text-1)}
.nav-cta{font-size:11px;padding:10px 18px}

/* ============================================================ PILLS (glass magnéticas)
   Transform é 100% do GSAP: nenhuma transition de transform aqui
   (transition de transform estrangula a elasticidade). */
.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:999px;
  font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 12px rgba(0,0,0,.4);
  color:var(--text-2);
  transition:border-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  will-change:transform;
}
.pill:hover{color:var(--text-1);border-color:var(--line-strong)}
.pill-primary{
  background:linear-gradient(145deg,rgba(0,194,255,.14),rgba(0,194,255,.03));
  border-color:rgba(0,194,255,.35);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 28px -8px var(--aether-glow);
}
.pill-primary:hover{border-color:rgba(0,194,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 44px -8px var(--aether-glow)}
.pill-ghost{background:transparent}
.pill-lg{padding:20px 40px;font-size:13px}
.pill-sm{padding:10px 18px;font-size:10px}

/* ============================================================ HERO · A VOZ */
.hero{min-height:100vh}
.hero-stage{
  position:relative;min-height:100vh;overflow:clip;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
@supports (min-height:100svh){
  .hero,.hero-stage{min-height:100svh}
}
.voice{position:relative;width:100%;height:min(42vh,380px);flex:none;will-change:transform}
.wave{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.hero-copy{position:relative;margin-top:clamp(20px,4vh,44px);text-align:center;z-index:3;display:flex;flex-direction:column;align-items:center}
.kicker{font-size:11px;color:var(--text-3);letter-spacing:.22em}
.js .kicker{opacity:0}
.wordmark{
  margin-top:14px;
  font-size:clamp(2.2rem,7.6vw,4.8rem);
  font-weight:700;line-height:1;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.wordmark span{display:inline-block}
.wm-vox{color:var(--aether)}
.js .wordmark span{opacity:0;transform:translateY(24px)}
.hero-line{margin-top:16px;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--text-2);font-weight:300}
.js .hero-line{opacity:0}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.js .hero-cta{opacity:0;transform:translateY(14px)}
.scroll-hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10px;color:var(--text-4);letter-spacing:.26em;z-index:3;
}
.hint-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--text-4),transparent);animation:hint 2.4s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.flood{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(64% 38% at 50% 50%,rgba(0,194,255,.14),rgba(0,194,255,.04) 46%,transparent 72%);
}
html.force-done .kicker, html.force-done .hero-line,
html.force-done .hero-cta{opacity:1 !important;transform:none !important}
html.force-done .wordmark span{opacity:1 !important;transform:none !important}

/* ============================================================ SEÇÕES (base)
   Cada capítulo ocupa a tela inteira: min-height 100svh + conteúdo
   centrado. Nunca height fixa que corta. */
.section{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(96px,12vh,150px);
}
@supports (min-height:100svh){
  .section{min-height:100svh}
}
.index{font-size:11px;color:var(--aether);letter-spacing:.24em;margin-bottom:clamp(24px,4vh,44px)}
h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.lead{margin-top:24px;max-width:520px;font-size:clamp(1rem,1.6vw,1.125rem);color:var(--text-2);font-weight:300}
.lead.sub{color:var(--text-3);font-size:.95rem}
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(18px)}
html.force-done [data-reveal]{opacity:1 !important;transform:none !important}

/* ============================================================ 01 · O SILÊNCIO */
.silencio{border-top:1px solid var(--line)}
.sil-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.sil-ghosts{display:flex;flex-direction:column;gap:14px;max-width:420px;margin-inline:auto;width:100%;will-change:transform}
.ghost{
  align-self:flex-start;max-width:88%;
  padding:14px 18px;border-radius:14px;border-bottom-left-radius:4px;
  background:#101116;border:1px solid var(--line);
  opacity:.9;
}
.ghost p{font-size:14px;color:var(--text-3);line-height:1.5}
.ghost time{display:block;margin-top:8px;font-size:9px;color:var(--text-4);letter-spacing:.16em}
.ghost:nth-child(2){margin-left:8%}
.ghost:nth-child(3){margin-left:3%}
.ghost-gone{border-color:rgba(255,90,90,.18);margin-left:12%}
.ghost-gone p{color:#B9848A}
.ghost-gone time{color:rgba(255,120,120,.55)}

/* ============================================================ 02 · COMO FUNCIONA */
.como{border-top:1px solid var(--line)}
.como-grid{
  margin-top:clamp(40px,7vh,72px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);align-items:center;
}
.steps{display:flex;flex-direction:column}
.step{
  display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:clamp(16px,2.6vw,32px);row-gap:8px;
  padding:30px 0;border-top:1px solid var(--line);
  transition:background .4s var(--ease);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step:hover{background:rgba(255,255,255,.014)}
.step-n{grid-row:1 / span 2;align-self:start;font-size:11px;color:var(--text-4);letter-spacing:.2em;padding-top:6px}
.step:hover .step-n{color:var(--aether)}
.step-t{font-size:clamp(1.2rem,2.3vw,1.6rem);font-weight:700;letter-spacing:-.01em}
.step-d{font-size:.95rem;color:var(--text-3);font-weight:300;max-width:460px}

/* chat (o mesmo motor do site da casa) */
.vox-demo{will-change:transform}
.chat{
  border-radius:24px;border:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,14,.72);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;max-width:440px;margin-inline:auto;width:100%;
}
.chat-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.chat-avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--sunken);border:1px solid rgba(0,194,255,.30);
}
.chat-avatar svg{width:24px}
.chat-id strong{display:block;font-size:14px;font-weight:700}
.chat-id span{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--text-4);letter-spacing:.14em}
.chat-id .dot{width:5px;height:5px;background:var(--success);box-shadow:0 0 6px var(--success)}
.chat-body{padding:22px;display:flex;flex-direction:column;gap:12px;min-height:340px}
.msg{max-width:84%;padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.5}
.msg p{color:var(--text-2)}
.msg time{display:block;margin-top:6px;font-size:9px;color:var(--text-4);letter-spacing:.1em}
.msg-in{align-self:flex-start;background:#14151A;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-out{align-self:flex-end;background:var(--aether-wash);border:1px solid rgba(0,194,255,.22);border-bottom-right-radius:4px}
.msg-out p{color:#EAF6FF}
.msg-event{
  align-self:center;font-size:9px;color:rgba(0,194,255,.75);letter-spacing:.18em;
  padding:8px 14px;border:1px dashed rgba(0,194,255,.25);border-radius:999px;
  text-align:center;
}
.js [data-msg]{opacity:0;transform:translateY(10px)}
html.force-done [data-msg]{opacity:1 !important;transform:none !important}
/* bolha de áudio (o produto entende áudio) */
.audio{display:flex;align-items:center;gap:10px}
.play{
  width:26px;height:26px;border-radius:50%;flex:none;position:relative;
  background:rgba(255,255,255,.08);border:1px solid var(--line-strong);
}
.play::after{
  content:"";position:absolute;left:10px;top:8px;
  border-left:8px solid var(--text-2);border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.bars{display:flex;align-items:center;gap:2px;height:22px}
.bars b{width:2.5px;border-radius:2px;background:var(--text-3)}
.bars b:nth-child(1){height:6px}.bars b:nth-child(2){height:12px}.bars b:nth-child(3){height:18px}
.bars b:nth-child(4){height:10px}.bars b:nth-child(5){height:15px}.bars b:nth-child(6){height:20px}
.bars b:nth-child(7){height:9px}.bars b:nth-child(8){height:14px}.bars b:nth-child(9){height:7px}
.bars b:nth-child(10){height:12px}.bars b:nth-child(11){height:5px}.bars b:nth-child(12){height:9px}
.alen{font-size:9px;color:var(--text-4)}
.typing{display:none;align-self:flex-start;gap:5px;padding:14px 16px;background:#14151A;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px}
.typing.on{display:flex}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:tp 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.vox-demo-note{margin-top:16px;text-align:center;font-size:9px;color:var(--text-4);letter-spacing:.2em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--aether);box-shadow:0 0 8px var(--aether);flex:none;animation:pulse 2.2s ease-in-out infinite}
.dot-ok{background:var(--success);box-shadow:0 0 8px var(--success)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================ 03 · POR DENTRO */
.dentro{border-top:1px solid var(--line)}
.dentro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.stats{
  margin-top:36px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);
}
.stat{padding-top:20px;border-top:1px solid var(--line)}
.stat-v{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-unit{font-size:.42em;font-weight:600;color:var(--aether);margin-left:3px}
.stat-static i{font-style:normal;color:var(--aether);font-weight:300}
.stat-l{margin-top:10px;font-size:9px;color:var(--text-4);letter-spacing:.16em}
.facts{margin-top:36px;border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fact-k{font-size:10px;color:var(--text-4);letter-spacing:.2em}
.fact-v{font-size:14px;color:var(--text-2)}
.fact-live{display:inline-flex;align-items:center;gap:8px;color:#fff}
.fact-live .dot{background:var(--success);box-shadow:0 0 8px var(--success)}
.panel{
  border-radius:24px;border:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,14,.72);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;max-width:480px;margin-inline:auto;width:100%;will-change:transform;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-title{font-size:10px;color:var(--text-3);letter-spacing:.2em}
.panel-live{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--aether);letter-spacing:.18em}
.panel-live .dot{width:5px;height:5px}
.convo{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)}
.convo:last-child{border-bottom:none}
.convo-human{background:var(--aether-wash)}
.cdot{width:8px;height:8px;border-radius:50%;flex:none}
.c-ia{background:var(--text-4)}
.c-h{background:var(--aether);box-shadow:0 0 8px var(--aether)}
.convo-t{min-width:0;flex:1}
.convo-t strong{display:block;font-size:13px;font-weight:600}
.convo-t span{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctag{font-size:8px;color:var(--text-4);letter-spacing:.18em;border:1px solid var(--line);border-radius:999px;padding:4px 8px;flex:none}
.ctag-h{color:var(--aether);border-color:rgba(0,194,255,.3)}

/* ============================================================ 04 · PLANOS */
.planos{border-top:1px solid var(--line)}
.plans{
  margin-top:clamp(40px,7vh,72px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);align-items:stretch;
}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,40px);border-radius:24px;
  background:rgba(10,10,14,.6);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 60px rgba(0,0,0,.4);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.plan:hover{border-color:var(--line-strong)}
.plan-hl{border-color:rgba(0,194,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 60px -18px var(--aether-glow),0 16px 60px rgba(0,0,0,.4)}
.plan-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--aether);letter-spacing:.2em;white-space:nowrap;
  background:var(--cosmic);border:1px solid rgba(0,194,255,.35);border-radius:999px;padding:5px 14px;
}
.plan-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.plan-price{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.plan-price strong{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.02em}
.plan-price span{font-size:10px;color:var(--text-4);letter-spacing:.18em}
.plan-tag{margin-top:10px;font-size:.9rem;color:var(--text-3);font-weight:300;min-height:2.7em}
.plan-list{margin-top:22px;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1}
.plan-list li{
  position:relative;padding-left:22px;font-size:.9rem;color:var(--text-2);font-weight:300;
}
.plan-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:10px;height:1px;background:var(--aether);opacity:.7;
}
.plan-cta{margin-top:28px;width:100%}

/* ============================================================ 05 · A CASA */
.casa{border-top:1px solid var(--line)}
.casa-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;max-width:620px;margin-inline:auto}
.casa-mark{width:74px;opacity:.9;will-change:transform}
.casa-line{font-size:clamp(1rem,1.8vw,1.2rem);color:var(--text-3);font-weight:300;line-height:1.7}
.casa-line strong{color:var(--text-1);font-weight:700;letter-spacing:.18em;font-size:.92em}

/* ============================================================ FOOTER cf · DNA máximo */
.cf{position:relative;border-top:1px solid var(--line);overflow:clip;background:var(--cosmic)}
.cf-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(243,244,247,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(243,244,247,.05) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(110% 90% at 50% 100%,#000 30%,transparent 78%);
  mask-image:radial-gradient(110% 90% at 50% 100%,#000 30%,transparent 78%);
}
.cf-aurora{
  position:absolute;left:50%;bottom:-30%;width:70vw;height:60vh;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,194,255,.13),transparent 70%);
  filter:blur(40px);
}
.cf-cta{position:relative;text-align:center;padding-top:clamp(110px,16vh,190px);padding-bottom:clamp(70px,10vh,120px)}
.cf-cta h2{font-size:clamp(2.4rem,6.4vw,4.8rem);margin-bottom:44px}
.cf-cta-actions{display:flex;justify-content:center}
.cf-marquee{
  position:relative;overflow:clip;padding-block:18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.cf-marquee-track{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.cf-marquee-track span{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.3em;
  color:var(--text-3);
}
.cf-giant{
  position:relative;text-align:center;pointer-events:none;user-select:none;
  margin-top:clamp(40px,7vh,80px);
  font-size:clamp(72px,13.5vw,210px);font-weight:500;line-height:.82;
  letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.008));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:transform;
}
.cf-pills{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:clamp(36px,6vh,64px);
}
.cf-base{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(32px,5vw,72px);
  margin-top:clamp(44px,7vh,80px);
  padding-block:clamp(48px,7vh,80px);border-top:1px solid var(--line);
}
.cf-mark{width:52px;height:auto}
.cf-tag{margin-top:18px;color:var(--text-3);font-weight:300;font-size:.95rem;max-width:280px}
.cf-status{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:10px;color:var(--text-3);letter-spacing:.2em}
.cf-links{display:flex;flex-direction:column;gap:12px}
.cf-links a{font-size:14px;color:var(--text-3);transition:color .3s var(--ease);width:fit-content}
.cf-links a:hover{color:#fff}
.cf-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cf-top{font-size:10px;color:var(--text-4);letter-spacing:.2em;transition:color .3s var(--ease)}
.cf-top:hover{color:var(--aether)}
.cf-legal{
  position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-block:26px;border-top:1px solid var(--line);
  font-size:9px;color:var(--text-4);letter-spacing:.14em;
}

/* ============================================================ RESPONSIVO */
@media (max-width:1024px){
  .sil-grid,.como-grid,.dentro-grid{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}
  .plan-hl{order:-1}
  .cf-base{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:840px){
  .nav-links{display:none}
}
@media (max-width:640px){
  html{scroll-padding-top:80px}
  .nav{height:64px}
  .nav-word{display:none}
  .voice{height:min(34vh,300px)}
  .kicker{font-size:9px;letter-spacing:.14em;padding-inline:20px}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .chat-body{min-height:300px;padding:16px}
  .cf-base{grid-template-columns:minmax(0,1fr)}
  .cf-legal{flex-direction:column}
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ============================================ RODAPÉ LEGAL + AVISO DE COOKIES
   Links jurídicos e portão de consentimento. O aviso não bloqueia a navegação
   e recusar é tão fácil quanto aceitar. Vive fora do motor GSAP: se o CDN cair,
   o aviso continua de pé. */
.cf-legal-links{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.1em;
}
.cf-legal-links a,.cf-legal-btn{
  color:var(--text-3);border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cf-legal-btn{
  font:inherit;font-size:10px;letter-spacing:.1em;text-transform:inherit;
  background:none;border:0;border-bottom:1px solid transparent;padding:0;cursor:pointer;
}
.cf-legal-links a:hover,.cf-legal-btn:hover{color:var(--text-1);border-bottom-color:var(--line-strong)}
.cf-legal-links a:focus-visible,.cf-legal-btn:focus-visible{outline:2px solid var(--aether);outline-offset:3px;border-radius:2px}
.cf-legal-sep{color:var(--text-4)}

.cmp{
  position:fixed;z-index:130;inset:auto 0 0 0;
  padding:0 clamp(16px,4vw,32px) clamp(16px,3vh,28px);
  display:flex;justify-content:center;pointer-events:none;
}
.cmp[hidden]{display:none}
/* Fala o mesmo idioma do resto da página: pílula magnética (.pill), micro-rótulo
   em mono maiúsculo, superfícies na escada --sunken/--cosmic e um único Aether
   reservado ao que está ATIVO. O vidro vem do gradiente + borda + luz interna,
   não de backdrop-filter (blur num card quase opaco é custo sem efeito).
   Vive fora do motor GSAP: se o CDN cair, o aviso continua de pé, só perde a
   elasticidade das pílulas. */
.cmp-card{
  pointer-events:auto;width:min(680px,100%);
  padding:clamp(22px,3vw,28px) clamp(22px,3vw,30px);border-radius:24px;
  border:1px solid var(--line-strong);
  background:linear-gradient(150deg,rgba(243,244,247,.035) 0%,rgba(243,244,247,.012) 100%),var(--sunken);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(243,244,247,.07);
  transform:translateY(22px);opacity:0;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
}
.cmp.is-open .cmp-card{transform:translateY(0);opacity:1}
/* micro-rótulo: mesma língua do .kicker da página, sem herdar o opacity:0
   que o .kicker recebe enquanto espera a linha do tempo do GSAP */
.cmp-kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);
}
.cmp-title{margin-top:12px;font-size:clamp(1rem,2.4vw,1.125rem);font-weight:700;letter-spacing:-.02em;color:var(--text-1)}
.cmp-text{margin-top:8px;max-width:62ch;font-size:.8125rem;line-height:1.65;color:var(--text-2)}
.cmp-link{color:var(--text-1);border-bottom:1px solid var(--line-strong);transition:color .3s var(--ease),border-color .3s var(--ease)}
.cmp-link:hover{color:var(--aether);border-bottom-color:var(--aether)}
.cmp-link:focus-visible{outline:2px solid var(--aether);outline-offset:3px;border-radius:2px}
.cmp-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* a pílula é a mesma da página inteira; aqui ela só encolhe para caber três */
.cmp .pill,.cmp-sheet .pill{padding:13px 22px;font-size:11px}
@media (max-width:560px){
  .cmp-card{padding:22px 20px;border-radius:20px}
  .cmp-actions{justify-content:stretch}
  .cmp-actions .pill{flex:1 1 calc(50% - 5px)}
  .cmp-actions [data-consent-allow]{flex:1 1 100%}
}

/* ---- Painel de escolhas por categoria ----
   Mesma escada de superfícies: folha em --sunken/--cosmic, cartão de
   categoria em --sunken. A categoria ligada acende Aether pelo :has(),
   sem exigir nada do JavaScript. */
.cmp-panel { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; }
.cmp-panel[hidden] { display: none; }
.cmp-scrim {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(4,4,7,0.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .42s var(--ease);
}
.cmp-panel.is-open .cmp-scrim { opacity: 1; }
/* Coluna com UMA área rolável (as categorias). As ações ficam ancoradas:
   no telefone, uma lista longa não pode empurrar o "Salvar" para fora da tela. */
.cmp-sheet {
  position: relative; display: flex; flex-direction: column;
  width: min(620px, calc(100vw - 32px));
  max-height: min(86vh, 760px); overflow: hidden;
  padding: 28px 30px 24px; border-radius: 24px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(155deg, rgba(243,244,247,0.035) 0%, rgba(243,244,247,0.008) 100%), var(--cosmic);
  box-shadow: 0 44px 96px -30px rgba(0,0,0,0.94), inset 0 1px 0 rgba(243,244,247,0.07);
  transform: translateY(18px) scale(0.985); opacity: 0;
  transition: transform .42s var(--ease), opacity .42s var(--ease);
}
.cmp-panel.is-open .cmp-sheet { transform: translateY(0) scale(1); opacity: 1; }
.cmp-sheet-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cmp-sheet-title { margin-top: 10px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); }
.cmp-close {
  flex: 0 0 auto; display: inline-grid; place-items: center; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(243,244,247,0.02); color: var(--text-3);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.cmp-close:hover { border-color: var(--aether); color: var(--aether); background: var(--aether-wash); }
.cmp-sheet-intro { flex: 0 0 auto; margin-top: 10px; max-width: 62ch; font-size: 0.8125rem; line-height: 1.65; color: var(--text-2); }
/* O padding de 4px existe para o anel de foco dos interruptores não ser
   cortado pela rolagem; a margem negativa devolve o alinhamento. */
.cmp-cats {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 20px -4px 0; padding: 4px; display: grid; gap: 12px;
}
.cmp-cat {
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--sunken);
  transition: border-color .32s var(--ease), background .32s var(--ease);
}
.cmp-cat:has([aria-checked="true"]) {
  border-color: rgba(0,194,255,0.26);
  background: linear-gradient(150deg, rgba(0,194,255,0.05) 0%, var(--sunken) 60%);
}
.cmp-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cmp-cat-name { font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); }
.cmp-cat-text { margin-top: 7px; font-size: 0.8125rem; line-height: 1.6; color: var(--text-2); }
.cmp-always {
  flex: 0 0 auto; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--text-3);
}
/* Interruptor 100% nosso: controle nativo não passa no DNA nem no foco. */
.cmp-switch {
  flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer;
  padding: 4px; border: 0; background: none; border-radius: 999px;
}
.cmp-switch-track {
  display: block; position: relative; width: 46px; height: 26px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(243,244,247,0.04);
  transition: border-color .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease);
}
.cmp-switch-dot {
  position: absolute; top: 50%; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(0, -50%); background: var(--text-3);
  transition: transform .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease);
}
.cmp-switch[aria-checked="true"] .cmp-switch-track {
  border-color: rgba(0,194,255,0.45); background: rgba(0,194,255,0.12);
  box-shadow: inset 0 1px 0 rgba(243,244,247,0.06), 0 0 28px -10px var(--aether-glow);
}
.cmp-switch[aria-checked="true"] .cmp-switch-dot {
  transform: translate(20px, -50%); background: var(--aether); box-shadow: 0 0 12px var(--aether-glow);
}
.cmp-switch:hover .cmp-switch-track { border-color: rgba(243,244,247,0.24); }
.cmp-switch:focus-visible, .cmp-close:focus-visible { outline: 2px solid var(--aether); outline-offset: 3px; border-radius: 999px; }
/* A linha fina separa o que rola do que fica ancorado: sem ela, a categoria
   cortada pela borda da rolagem parece defeito de renderização. */
.cmp-sheet-actions {
  flex: 0 0 auto; margin-top: 20px; padding-top: 20px; display: flex; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.cmp-sheet-actions .pill { flex: 1 1 auto; }
.cmp-sheet-foot { flex: 0 0 auto; margin-top: 16px; font-size: 0.75rem; line-height: 1.6; color: var(--text-3); }
/* Rótulo só para leitor de tela: o interruptor precisa de nome acessível. */
.cmp-sr, .cmp-sr-inline {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 560px) {
  .cmp-sheet { padding: 24px 20px 20px; border-radius: 20px; max-height: 88vh; }
  /* duas linhas em vez de três: a barra ancorada não pode comer a tela */
  .cmp-sheet-actions .pill { flex: 1 1 calc(50% - 5px); padding: 12px 14px; }
  .cmp-sheet-actions [data-consent-save] { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-card, .cmp-scrim, .cmp-sheet, .cmp-cat, .cmp-switch-track, .cmp-switch-dot { transition-duration: 0.01ms; }
}