/* Fontes servidas pelo próprio site, não pelo Google: a página afirma no
   rodapé que não entrega nada a terceiros, e um <link> para fonts.gstatic.com
   entregaria o IP de quem visita. De quebra sai do caminho crítico e acaba o
   salto de layout do fallback serif. */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("fonts/BricolageGrotesque-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("fonts/BricolageGrotesque-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/Geist-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/Geist-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/Geist-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/GeistMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/GeistMono-Medium.woff2") format("woff2");
}

:root{
  /* Amostradas do ícone do app: ciano #1BF6FB no A, azul #1564C8 no meio,
     roxo #9C25E1 na ponta do E. O site usa a mesma rampa. */
  --bg:#05070f;
  --bg-2:#080c17;
  --surface:#0d1220;
  --surface-2:#111829;
  --line:#1b2540;
  --line-bright:#2a3a5e;

  --brand:#22c5f5;
  --brand-2:#6ee7fb;
  --brand-deep:#123a5c;
  --brand-3:#a855f7;
  --violet:#9c25e1;
  --magenta:#f83cfc;

  --rgb-brand:34,197,245;
  --rgb-brand-2:110,231,251;
  --rgb-brand-deep:18,58,92;
  --rgb-brand-3:168,85,247;

  --text:#e8edfb;
  --text-2:#9aa8c6;
  --text-3:#8592b0;   /* AA em texto pequeno: ~6:1 sobre o fundo */

  --display:"Bricolage Grotesque",Georgia,serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --max:1180px;
  /* margem lateral única do site. Mexer aqui muda todas as dobras. */
  --gutter:clamp(24px,5.4vw,34px);
  --r:14px;

  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

/* A matriz do app, mesma receita do `base.css` dele: grid de 48px nas duas
   direções a 3,5% + glows elípticos, tudo sob um blur de 1,5px que tira o
   aspecto de tabela e deixa o padrão respirando atrás do conteúdo. Aqui a
   grade é ciano e os glows vão do ciano ao roxo, como o ícone. */
body::before{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  z-index:0;
  filter:blur(1.5px);
  background-image:
    radial-gradient(ellipse 55% 40% at 15% 18%, rgba(var(--rgb-brand),.20) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 74%, rgba(var(--rgb-brand-3),.16) 0%, transparent 70%),
    radial-gradient(ellipse 30% 25% at 74% 10%, rgba(var(--rgb-brand-2),.10) 0%, transparent 70%),
    radial-gradient(ellipse 22% 22% at 38% 92%, rgba(var(--rgb-brand-3),.09) 0%, transparent 70%),
    repeating-linear-gradient(rgba(var(--rgb-brand),.035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(var(--rgb-brand),.035) 0 1px, transparent 1px 48px);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{position:relative;z-index:2}

a{color:inherit}
img{max-width:100%;display:block;height:auto}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.18rem;letter-spacing:-.015em}

.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--text-2);max-width:54ch}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  background:rgba(5,7,15,.72);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
header.stuck{border-bottom-color:var(--line);background:rgba(5,7,15,.9)}
.nav{display:flex;align-items:center;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:1;min-width:0}
.brand img{width:28px;height:28px;border-radius:7px}
.brand b{
  font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.02em;
  /* `nowrap` sozinho vazava por cima do botão da direita em telas estreitas:
     o texto ignorava o `min-width:0` do pai. O ellipsis é o limite físico. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brand-2);border:1px solid var(--line-bright);
  background:rgba(var(--rgb-brand),.07);
  padding:5px 9px;border-radius:999px;white-space:nowrap;
}
.nav-links{display:flex;gap:26px;margin-right:6px}
.nav-links a{
  font-size:.9rem;color:var(--text-2);text-decoration:none;
  transition:color .2s;
}
.nav-links a:hover{color:var(--text)}
@media(max-width:860px){.nav-links{display:none}.tag{display:none}}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:.95rem;font-weight:500;
  text-decoration:none;white-space:nowrap;
  padding:13px 20px;border-radius:11px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .2s, border-color .2s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{
  background:linear-gradient(135deg,#7df0fb 0%,var(--brand) 55%,#3f8ef0 100%);
  color:#04121f;font-weight:600;
  box-shadow:0 0 0 1px rgba(var(--rgb-brand),.5), 0 10px 30px -12px rgba(var(--rgb-brand),.75);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(var(--rgb-brand-2),.7), 0 18px 40px -14px rgba(var(--rgb-brand),.9)}
.btn-ghost{border-color:var(--line-bright);color:var(--text);background:rgba(17,24,41,.5)}
.btn-ghost:hover{border-color:var(--brand-deep);background:rgba(var(--rgb-brand-deep),.22);transform:translateY(-2px)}
.btn-sm{padding:11px 15px;font-size:.87rem;border-radius:9px}

/* Navegação por teclado: o anel padrão some no escuro. */
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:3px;
  border-radius:11px;
}

/* ---------- hero ---------- */
/* padding-block, nunca shorthand: `padding` aqui zerava a margem lateral do .wrap. */
.hero{padding-block:clamp(56px,9vw,104px) clamp(40px,6vw,64px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--text-3);margin-bottom:26px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(var(--rgb-brand),.14);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

h1 .cut{
  position:relative;
  color:var(--text-3);
  text-decoration:line-through;
  text-decoration-color:rgba(var(--rgb-brand-3),.9);
  text-decoration-thickness:.07em;
}
/* O número que sobra recebe a rampa do ícone — ciano no começo, roxo no fim. */
h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--brand-2) 0%,var(--brand) 40%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand-2);
}
.out.hl .big{
  background:linear-gradient(100deg,var(--brand-2),var(--brand) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.hero .lead{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center}
.cta-note{font-size:.86rem;color:var(--text-3);margin-top:14px}

/* ---------- waveform ---------- */
.wave-card{
  margin-top:clamp(44px,6vw,64px);
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),#080c17);
  padding:20px 20px 16px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
.wave-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.wave-head .mono{color:var(--text-3)}
.wave-state{color:var(--brand-2);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
/* Sem `gap`: o espaçamento é margem de cada barra, senão a barra de silêncio
   continua ocupando o vão do flex depois de colapsar — e o corte apareceria
   como uma emenda, em vez do áudio contínuo que ele de fato produz. */
.wave{
  display:flex;align-items:center;height:104px;
  padding-inline:2px;
}
.bar{
  flex:1 1 0;
  min-width:2px;
  margin-inline:1px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  opacity:.9;
  transform-origin:center;
  transition:height .45s cubic-bezier(.65,0,.35,1), opacity .35s,
             flex-grow .45s cubic-bezier(.65,0,.35,1),
             margin .45s cubic-bezier(.65,0,.35,1),
             min-width .45s cubic-bezier(.65,0,.35,1);
}
.bar.silence{background:linear-gradient(180deg,#3b2a5c,#241a3c);opacity:.65}
/* No corte a barra some por inteiro — largura, mínimo e margem — e o que
   sobra encosta, virando uma faixa só. */
.wave.cut .bar.silence{
  height:2px !important;
  opacity:0;
  flex-grow:0;
  min-width:0;
  margin-inline:0;
}
.wave-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;color:var(--text-3);flex-wrap:wrap;
}
.wave-foot b{color:var(--brand-2);font-weight:500}

/* ---------- seções ---------- */
section{padding:clamp(56px,7vw,92px) 0}
.sec-head{max-width:60ch;margin-bottom:clamp(34px,5vw,54px)}
.sec-head .mono{color:var(--brand);display:block;margin-bottom:16px}
.sec-head p{color:var(--text-2);margin-top:16px;font-size:1.02rem}

/* features com screenshot */
/* A coluna da screenshot é sempre a larga; `.rev` só troca de lado.
   Fazer isso com `order` deixava o texto na coluna larga em metade dos blocos. */
.feature{
  display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,64px);
  align-items:center;
  padding:clamp(30px,4vw,44px) 0;
  border-top:1px solid var(--line);
}
.feature .feature-text{grid-column:1;grid-row:1}
.feature .shot{grid-column:2;grid-row:1}
.feature.rev{grid-template-columns:1.3fr 1fr}
.feature.rev .feature-text{grid-column:2}
.feature.rev .shot{grid-column:1}
.feature h3{margin-bottom:12px}
.feature p{color:var(--text-2);font-size:.98rem}
.feature ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.feature li{
  font-size:.9rem;color:var(--text-2);padding-left:20px;position:relative;
}
.feature li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--brand);opacity:.8;
}
.shot{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 26px 60px -34px rgba(0,0,0,1);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s, border-color .4s;
}
.shot:hover{transform:translateY(-4px);border-color:var(--line-bright);box-shadow:0 34px 70px -34px rgba(var(--rgb-brand),.3)}
.shot img{width:100%;height:auto}
@media(max-width:900px){
  .feature,.feature.rev{grid-template-columns:1fr;gap:24px}
  .feature .feature-text,.feature.rev .feature-text{grid-column:1;grid-row:1}
  .feature .shot,.feature.rev .shot{grid-column:1;grid-row:2}
}

/* ---------- passos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  padding:26px 22px;position:relative;overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.step:hover{border-color:var(--line-bright);transform:translateY(-3px)}
.step .num{
  font-family:var(--display);font-size:3.4rem;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--line-bright);
  position:absolute;right:16px;top:8px;
}
.step h3{font-size:1.04rem;margin-bottom:9px;position:relative}
.step p{font-size:.92rem;color:var(--text-2);position:relative}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- honestidade ---------- */
.honest{
  border:1px solid var(--line);border-left:2px solid var(--brand-3);
  border-radius:var(--r);background:rgba(var(--rgb-brand-3),.035);
  padding:clamp(24px,3.4vw,34px);
}
.honest h3{margin-bottom:16px;color:var(--brand-3);font-size:1.05rem}
.honest ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.honest li{font-size:.94rem;color:var(--text-2);padding-left:22px;position:relative;line-height:1.55}
.honest li::before{content:"—";position:absolute;left:0;color:var(--brand-3);opacity:.65}
.honest strong{color:var(--text);font-weight:600}

/* ---------- requisitos ---------- */
.reqs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.req{background:var(--bg-2);padding:22px 20px}
.req .mono{color:var(--text-3);display:block;margin-bottom:10px}
.req p{font-size:.95rem;color:var(--text)}
.req small{display:block;color:var(--text-3);font-size:.85rem;margin-top:5px}
@media(max-width:860px){.reqs{grid-template-columns:1fr}}

/* ---------- cta final ---------- */
.final{
  border:1px solid var(--line-bright);border-radius:20px;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(var(--rgb-brand),.16), transparent 66%),
    linear-gradient(180deg,var(--surface),var(--bg-2));
  padding:clamp(40px,6vw,68px) clamp(24px,4vw,48px);
  text-align:center;
}
.final h2{margin-bottom:16px}
.final p{color:var(--text-2);max-width:48ch;margin:0 auto 30px}
.final .btn{font-size:1rem;padding:15px 26px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 56px;margin-top:clamp(56px,8vw,96px)}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot p{font-size:.86rem;color:var(--text-3);max-width:46ch;line-height:1.6}
.foot a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-bright);position:relative}
/* Estende só a área de toque: com padding, o sublinhado descolaria do texto. */
.foot a::after{content:"";position:absolute;inset:-12px -6px}
.foot a:hover{color:var(--brand-2)}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand img{width:22px;height:22px;border-radius:6px}
.foot-brand b{font-family:var(--display);font-weight:600}

/* ---------- calculadora ---------- */
.calc{
  margin-top:clamp(44px,6vw,64px);
  border:1px solid var(--line-bright);border-radius:18px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  overflow:hidden;
}
.calc-top{padding:clamp(22px,3vw,30px);border-bottom:1px solid var(--line)}
.calc-top h3{font-size:1.15rem;margin-bottom:6px}
.calc-top p{font-size:.9rem;color:var(--text-3)}
.calc-ctrls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:26px}
@media(max-width:700px){.calc-ctrls{grid-template-columns:1fr;gap:22px}}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.ctrl .lb{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.ctrl .vl{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--brand-2);white-space:nowrap}
/* A caixa tem 24px (WCAG 2.5.8 pede alvo de 24x24); a trilha fina é
   desenhada dentro dela, então o dedo acerta sem o desenho engordar. */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:24px;
  background:transparent;outline:none;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--brand) var(--pct,40%), var(--line-bright) var(--pct,40%));
}
input[type=range]::-moz-range-track{
  height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--brand) var(--pct,40%), var(--line-bright) var(--pct,40%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  margin-top:-8px;
  background:var(--brand-2);border:3px solid #060a14;cursor:pointer;
  box-shadow:0 0 0 1px var(--brand), 0 4px 14px -4px rgba(var(--rgb-brand),.9);
  transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--brand-2);
  border:3px solid #060a14;cursor:pointer;box-shadow:0 0 0 1px var(--brand);
}
input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(var(--rgb-brand),.3)}

.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.out{background:var(--bg-2);padding:24px 22px}
.out.hl{background:linear-gradient(180deg,rgba(var(--rgb-brand),.12),rgba(var(--rgb-brand),.04))}
.out .lb{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:10px}
.out .big{font-family:var(--display);font-size:clamp(1.7rem,3.3vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.out.old .big{color:var(--text-2);text-decoration:line-through;text-decoration-color:rgba(var(--rgb-brand-3),.6);text-decoration-thickness:.06em}
.out.hl .big{color:var(--brand-2)}
.out small{display:block;color:var(--text-3);font-size:.85rem;margin-top:9px;line-height:1.45}
@media(max-width:700px){.calc-out{grid-template-columns:1fr}}
.calc-note{padding:16px 22px;border-top:1px solid var(--line);font-size:.875rem;color:var(--text-3);line-height:1.55}
.calc-note a{color:var(--text-2)}

/* ---------- proposta + vídeo ---------- */
/* O h1 desta página vive dentro de um cabeçalho de seção: mesmo tamanho dos
   h2 do site, mas semanticamente o título da página. */
.titulo-proposta{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:600}
.proposta{
  border:1px solid var(--line-bright);border-radius:20px;overflow:hidden;
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(var(--rgb-brand),.14), transparent 68%),
    linear-gradient(180deg,var(--surface),var(--bg-2));
}
.video-wrap{
  background:transparent;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  scroll-margin-top:86px;
}
/* O vídeo some por opacidade antes de a altura colapsar: trocar display de
   uma vez dá um salto seco no layout. */
.video-wrap video{transition:opacity .28s ease}
.video-wrap.saindo video{opacity:0}

/* Fim do vídeo: o player encolhe para uma faixa e cede a tela para a
   proposta, que é o que a pessoa precisa ler logo depois de ouvir. */
.video-fim{
  display:none;
  align-items:center;justify-content:center;gap:16px;
  min-height:92px;padding:20px;
  opacity:0;transform:translateY(10px);
  transition:opacity .34s ease .06s, transform .34s cubic-bezier(.2,.8,.3,1) .06s;
  background:
    radial-gradient(600px 160px at 50% 0%, rgba(var(--rgb-brand),.14), transparent 70%),
    linear-gradient(180deg,#0a1020,var(--bg-2));
}
.video-wrap.fim video{display:none}
.video-wrap.fim .video-fim{display:flex}
.video-wrap.revelado .video-fim{opacity:1;transform:none}
.video-fim .btn svg{width:16px;height:16px}
.video-fim span{font-size:.88rem;color:var(--text-3)}

/* O bloco do preço pisca uma vez quando o vídeo acaba — sinaliza onde
   continuar a leitura sem roubar a atenção depois disso. */
@keyframes chamar{
  0%{box-shadow:0 0 0 0 rgba(var(--rgb-brand),0)}
  35%{box-shadow:0 0 0 3px rgba(var(--rgb-brand),.35)}
  100%{box-shadow:0 0 0 0 rgba(var(--rgb-brand),0)}
}
.plano.chamar{animation:chamar 1.8s ease-out 1}
/* 16:9 fixo: sem isso o player herda a proporção do pôster enquanto o vídeo
   não carrega e a página dá um salto quando os metadados chegam. */
.video-wrap video{width:100%;display:block;background:#060a14;aspect-ratio:16/9;object-fit:cover}
/* O header é fixo: sem esta margem, a rolagem automática para aqui deixa o
   título por baixo dele. */
.proposta-body{padding:clamp(28px,4.4vw,48px);scroll-margin-top:86px}
.proposta-body h2{margin-bottom:18px}
.proposta-body>p{color:var(--text-2);max-width:60ch;margin-bottom:28px}
.plano{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:28px;
}
.plano div{background:var(--bg-2);padding:22px 20px}
.plano .mono{color:var(--text-3);display:block;margin-bottom:10px}
.plano .p{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
@media (forced-colors:active){
  h1 em,.out.hl .big,.plano .p em{-webkit-text-fill-color:currentColor}
}
.plano .p em{
  font-style:normal;
  background:linear-gradient(100deg,var(--brand-2),var(--brand) 50%,var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.plano small{display:block;color:var(--text-3);font-size:.85rem;margin-top:8px;line-height:1.5}
@media(max-width:700px){.plano{grid-template-columns:1fr}}
.proposta-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.proposta-cta .btn{font-size:1rem;padding:15px 26px}
.proposta-cta span{font-size:.85rem;color:var(--text-3)}

/* ---------- reveal ---------- */
/* Só esconde quando o JS assumiu (`.js` no <html>). Sem isso, qualquer erro
   de script deixaria a página inteira invisível — que é pior do que não ter
   animação nenhuma. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.2,.8,.3,1), transform .75s cubic-bezier(.2,.8,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .video-wrap video,.video-fim{transition:none}
  .bar{transition:none}
  *{animation:none !important;scroll-behavior:auto}
}

/* Whatsapp flutuante no mobile. Só entra depois que o CTA do hero sai de
   cena — antes disso ele cobre o texto sem oferecer nada de novo. */
.float-wa{
  position:fixed;right:16px;bottom:16px;z-index:60;display:none;
  box-shadow:0 12px 34px -10px rgba(var(--rgb-brand),.8);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.float-wa.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:700px){.float-wa{display:inline-flex}}

/* ---------- telas estreitas (até 380px: iPhone SE, Android de 360) ----------
   Aqui a régua é o pior caso de 320px, onde tudo que é `nowrap` ou tem largura
   mínima passa a brigar pelo mesmo espaço. */
@media(max-width:380px){
  /* A marca já aparece no logo; repetir o nome custa o espaço do botão. */
  .brand b{display:none}
  /* 64 barras x 4px estouravam a caixa e eram cortadas pelo overflow do card. */
  .bar{min-width:1px}
  /* Botão de 226px numa caixa de 214px: vazava o padding do cartão. */
  .proposta-cta .btn{padding:15px 18px}
  /* O numeral decorativo do passo encostava no título. */
  .step h3{padding-right:52px}
}