@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   GuaráSoft — v2 "linha viva"
   Direção: painel de instrumentos de uma operação séria, iluminado por dentro.
   Assinatura: uma linha da marca que atravessa a página e acende no scroll.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 01 · FONTES ───────────────────────────────────────────────────────── */
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/SpaceGrotesk-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/SpaceGrotesk-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/SpaceGrotesk-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'sg-fb';src:local('Arial');size-adjust:105%;ascent-override:97%;descent-override:29%;line-gap-override:0%}

/* ─── 02 · TOKENS ───────────────────────────────────────────────────────── */
:root{
  /* superfícies — a escala do manual da marca: base → elevado → card */
  --void:#111113;
  --deep:#151517;
  --surface:#19191B;
  --surface-2:#222325;

  /* a rampa da marca, tratada como LUZ e não como tinta */
  --magenta:#ED1376;
  --coral:#F0505E;
  --salmon:#F15E55;
  --ramp:linear-gradient(90deg,#ED1376,#F0505E,#F15E55);   /* manual da marca, literal */
  --ramp-soft:linear-gradient(90deg,rgba(237,19,118,.9),rgba(240,80,94,.9),rgba(241,94,85,.9));

  /* tinta */
  --ink:#FFFFFF;
  --ink-2:#FAFAFA;
  --mist:#A1A1AA;      /* corpo — 7,36:1 sobre #111113, AAA */
  --dim:#8A8B95;       /* rótulos pequenos — 5,58:1. Era #6E6E7C (3,76:1, reprovava AA) */
  --ok:#3ECF8E;

  /* fios — sempre alpha, nunca hex fixo: funciona em qualquer superfície */
  --hair:rgba(255,255,255,.06);
  --hair-2:rgba(255,255,255,.12);
  --hair-3:rgba(255,255,255,.20);

  /* tipografia */
  --sans:'Space Grotesk','sg-fb',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --fs-hero:clamp(2.55rem,1.5rem + 4.2vw,4.35rem);
  --fs-d1:clamp(2.1rem,1.25rem + 3.5vw,4rem);
  --fs-d2:clamp(1.65rem,1.25rem + 1.75vw,2.5rem);
  --fs-d3:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.375rem);
  --fs-body:clamp(1rem,.97rem + .17vw,1.0625rem);
  --fs-cap:.875rem;
  --fs-mono:.6875rem;

  /* No mobile o mono de 11px com .2em de tracking em caixa alta fica no limite
     do legível — e ele carrega TODOS os rótulos de seção (eyebrow, overlines
     dos cards, selo de agenda). 12px resolve sem mexer no desktop. */

  /* ritmo */
  --nav-h:calc(35px + 2.3rem);   /* logo + padding-block da .nav__in */

  --shell:1200px;
  --gut:clamp(1.25rem,5vw,3.5rem);
  --foot-h:4rem;                 /* faixa do rodapé — a .end desconta isto da viewport */
  --sec:clamp(5rem,4.5rem + 4vw,9rem);   /* 88px em 390 · 130px em 1440 */

  /* raio */
  --r-xl:24px;
  --r-lg:18px;
  --r-md:12px;
  --r-sm:8px;
  --r-pill:100px;

  /* motion */
  --e:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.16,1,.3,1);
  --t:220ms;
  --t-m:380ms;
  --t-l:720ms;
}
@media (max-width:760px){:root{--foot-h:7rem}}   /* empilha em duas linhas centradas */
@media (max-width:520px){:root{--fs-mono:.75rem}}

/* ─── 03 · RESET ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--void);color:var(--mist);
  font:400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','ss03';
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{color:var(--ink);font-weight:500;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
/* h1 é o único peso 700 da hierarquia — regra global, não ajuste local no hero */
h1{font-weight:900}
strong,b{font-weight:500;color:var(--ink-2)}
:focus-visible{outline:2px solid var(--salmon);outline-offset:3px;border-radius:4px}
::selection{background:rgba(240,80,94,.3);color:#fff}
:where(.tnum){font-variant-numeric:tabular-nums}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
main:focus{outline:none}

.skip{
  position:fixed;top:.75rem;left:.75rem;z-index:999;
  padding:.75rem 1.25rem;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink);border:1px solid var(--hair-2);
  font-size:var(--fs-cap);font-weight:500;
  transform:translateY(-200%);transition:transform var(--t) var(--e);
}
.skip:focus-visible{transform:none}

/* ─── 04 · EMPILHAMENTO ─────────────────────────────────────────────────── */
main,.nav,.foot{position:relative;z-index:2}

/* ─── 05 · FIO DE PROGRESSO ─────────────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.prog i{
  display:block;height:100%;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left;
  background:var(--ramp);
}

/* ─── 06 · TIPOGRAFIA UTILITÁRIA ────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font:500 var(--fs-mono)/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  margin-bottom:1.5rem;
}
.eyebrow::before{content:'';width:1.75rem;height:1px;background:var(--ramp)}

.h-sec{font-size:var(--fs-d1);max-width:18ch}
.h-sec--wide{max-width:24ch}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--mist);max-width:46ch}
.lead strong{color:var(--ink)}

/* Abertura de seção centralizada. Os max-width em ch continuam mandando na
   medida da linha — o que muda é o eixo. O fio do eyebrow ganha um espelho
   à direita, senão a marca fica torta em volta de um texto centrado. */
.head--mid{text-align:center}
.head--mid .h-sec,.head--mid .lead{margin-inline:auto}
.head--mid .lead{margin-top:1.25rem}
.head--mid .eyebrow::after{content:'';width:1.75rem;height:1px;background:var(--ramp);transform:scaleX(-1)}

/* DESTAQUE EM TEXTO — um padrão só, estático, no site inteiro.
   A rampa da marca atravessa a palavra inteira. Sem animação: o gradiente
   já é o destaque; movimento em cima dele só rouba a leitura. */
.grad,
.own__k,
.own__free em,
.founder__q em{
  background:var(--ramp);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ─── 07 · BOTÕES ───────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2rem;border-radius:var(--r-pill);
  font:500 1.0625rem/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),
             background-color var(--t) var(--e),border-color var(--t) var(--e);
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform var(--t) var(--e)}
.btn:hover svg{transform:translateX(3px)}

/* primário: a rampa da marca preenchida. Branco por cima passa contraste
   em toda a extensão do gradiente. */
.btn--go{
  color:#fff;background:var(--ramp);background-size:190% auto;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
             0 10px 30px -12px rgba(237,19,118,.7),
             0 2px 10px -4px rgba(0,0,0,.6);
}
.btn--go:hover{transform:translateY(-2px);background-position:100% 50%;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,
             0 16px 40px -14px rgba(237,19,118,.85),
             0 3px 12px -4px rgba(0,0,0,.7)}
.btn--go:active{transform:translateY(0)}

.btn--quiet{
  color:var(--ink);background:rgba(255,255,255,.055);
  border:1px solid var(--hair-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn--quiet:hover{background:rgba(255,255,255,.1);border-color:var(--hair-3);transform:translateY(-2px)}

/* terceira variante: contorno puro, para o CTA intermediário que não pode
   competir com o botão primário da dobra nem com o do fecho.

   .34 e não .20 no fio: rgba(255,255,255,.2) sobre #111113 mede 1,85:1 e o
   contorno É o que identifica isto como botão (sem ele, sobra texto branco).
   O CLAUDE.md §6 nomeia exatamente esse erro — o botão ghost do site antigo.
   .34 chega a 3,10 e passa o mínimo de componente de interface. */
.btn--line{
  color:var(--ink-2);background:transparent;
  border:1px solid rgba(255,255,255,.34);
}
/* o magenta entra CHAPADO no hover: a .5 pedida mede 1,86:1 e derrubaria o
   contorno abaixo do mínimo justo no estado interativo. Sólido dá 4,45. */
.btn--line:hover{
  background:rgba(255,255,255,.05);
  border-color:var(--magenta);
  transform:translateY(-2px);
}

.btn--sm{padding:.7rem 1.35rem;font-size:.9375rem}

/* Âncora de CTA no meio da página. Um só bloco centralizado; o white-space
   volta ao normal porque o rótulo do case tem 45 caracteres e o nowrap do
   .btn estouraria a viewport de 390px. */
.sec__cta{margin-top:clamp(2.5rem,6vh,3.5rem);display:flex;justify-content:center}
.sec__cta--near{margin-top:clamp(2.25rem,5vh,3rem)}
.sec__cta .btn{white-space:normal;text-align:center;text-wrap:balance;max-width:100%}
/* com o rótulo em duas linhas a seta empurra o texto para a esquerda e o botão
   fica visivelmente torto. Ela é decorativa (aria-hidden) — sai. */
@media (max-width:520px){.sec__cta .btn svg{display:none}}

.risk{margin-top:1rem;font-size:var(--fs-cap);color:var(--dim)}
.risk .sep{opacity:.45;padding-inline:.45rem}

/* ─── 08 · NAV ──────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;transition:background-color var(--t-m) var(--e),border-color var(--t-m) var(--e)}
.nav::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--hair);opacity:0;transition:opacity var(--t-m) var(--e)}
.nav.stuck{background:rgba(17,17,19,.72);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
.nav.stuck::after{opacity:1}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.15rem;transition:padding var(--t-m) var(--e)}
.nav.stuck .nav__in{padding-block:.7rem}
.nav__logo{width:138px;height:35px}
.nav__links{display:none;gap:2rem;font-size:.9375rem;color:var(--mist)}
.nav__links a{position:relative;padding-block:.35rem;transition:color var(--t) var(--e)}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ramp);transform:scaleX(0);transform-origin:left;transition:transform var(--t-m) var(--e-soft)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
@media (min-width:940px){.nav__links{display:flex}}
@media (max-width:520px){.nav__in .btn{display:none}.nav__logo{width:120px;height:30px}
  :root{--nav-h:calc(30px + 2.3rem)}}

/* ─── 09 · HERO ─────────────────────────────────────────────────────────── */
/* O bloco fica no CENTRO óptico da dobra, não colado na nav: a dobra menos a
   altura da nav sticky vira o palco, e o conteúdo se centra dentro dele. Como é
   min-height, no mobile (onde o conteúdo é mais alto que a tela) nada muda. */
.hero{
  position:relative;display:flex;align-items:center;
  min-height:calc(100svh - var(--nav-h));
  padding-top:clamp(2rem,5vh,3.5rem);padding-bottom:clamp(3rem,7vh,5rem);
}
.hero > .shell{width:100%}
/* Textura do fundo da dobra: uma grade modular, quase branca, sobre o #111113.
   É a única imagem de fundo da página — o resto do site é cor chapada.
   Sobe atrás da nav e apaga no fim da dobra, pra não virar faixa recortada. */
.hero::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-7rem;left:50%;width:100vw;margin-left:-50vw;bottom:-2rem;
  background:url(/assets/img/hero-texture.webp) center top/cover no-repeat;
  opacity:var(--tex,.7);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 96%);
}
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:1060px){
  .hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,4vw,3.5rem)}
}
.hero__h{font-size:var(--fs-hero);line-height:1.05;letter-spacing:-.036em;max-width:15ch}

/* ── A JANELA VIVA (assinatura portada da v1) ──────────────────────────────
   A moldura nunca sai de cena; o que muda é o produto dentro dela. Um painel
   principal + dois satélites que se revezam: o "de onde veio" sai, o "no que
   virou" entra. O JS só troca texto e classe — quem anima é o CSS. */
.viz{--viz-dim:#8A8B95;width:100%;max-width:452px}
@media (min-width:1060px){.viz{justify-self:end}}
.viz__stage{position:relative;padding-top:2.9rem;padding-bottom:2.9rem}

/* -- a moldura persistente: mesma gramática de vidro dos cards da v2 -- */
.viz__win{
  position:relative;z-index:1;margin-left:2.1rem;margin-right:1.5rem;
  border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,rgba(27,27,35,.78),rgba(19,19,25,.66)) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.02)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 52px -32px rgba(0,0,0,.95);
  transition:filter var(--t-m) var(--e),transform var(--t-m) var(--e),opacity var(--t-m) var(--e);
}
.viz__win.is-refocus{filter:blur(4px);transform:scale(.988);opacity:.5}
.viz__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem .95rem;border-bottom:1px solid var(--hair);
  font:400 .75rem/1.1 var(--mono);color:var(--mist)}
.viz__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz__live{color:var(--ok);font-weight:700;white-space:nowrap}
.viz__live::before{content:"● "}
.viz__live:empty{visibility:hidden}
.viz__body{height:16.1rem;display:flex;flex-direction:column;padding-block:.35rem .8rem}

/* -- as linhas: um só esqueleto, quatro gramáticas -- */
.viz__rows li{position:relative;display:grid;align-items:center;gap:.7rem;
  grid-template-columns:auto 1fr auto;padding:.68rem 1rem;font-size:.8125rem;color:var(--mist);
  transition:opacity var(--t-m) var(--e),transform var(--t-m) var(--e)}
.viz__rows li+li{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.viz__rows li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz__rows li:nth-child(2){transition-delay:.045s}
.viz__rows li:nth-child(3){transition-delay:.09s}
.viz__rows li:nth-child(4){transition-delay:.135s}
.viz__rows li:nth-child(5){transition-delay:.18s}
/* gramática 1 · menu de aplicativo */
[data-mode=menu] .c1{color:var(--ink);font-size:.875rem}
[data-mode=menu] .c3{color:var(--viz-dim);font-size:1.0625rem;line-height:1}
/* gramática 2 · planilha */
[data-mode=grid] .viz__rows li{grid-template-columns:1fr 3.1rem 3.4rem;gap:.5rem;font-family:var(--mono);font-size:.75rem}
[data-mode=grid] .c2,[data-mode=grid] .c3{text-align:right}
/* gramática 3 · sistema */
[data-mode=sys] .viz__rows li{grid-template-columns:3.9rem 1fr auto}
[data-mode=sys] .c1{font-family:var(--mono);font-size:.75rem;color:var(--viz-dim)}
[data-mode=sys] .c2{color:var(--ink-2)}
/* gramática 4 · fila / automação */
[data-mode=log] .viz__rows li{grid-template-columns:1.15rem 1fr auto}
[data-mode=log] .c1{font-size:.875rem;line-height:1;color:var(--viz-dim)}
[data-mode=log] .c3{font:400 var(--fs-mono)/1 var(--mono);color:var(--viz-dim)}
/* estados de linha */
.viz__rows li.hd{font:400 var(--fs-mono)/1.1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--viz-dim)}
[data-mode=sys] .viz__rows li.hd .c1,[data-mode=sys] .viz__rows li.hd .c2{color:inherit;font-size:inherit;font-family:inherit}
.viz__rows li.err{background:rgba(240,80,94,.06)}
.viz__rows li.err .c2,.viz__rows li.err .c3{color:var(--coral)}
.viz__rows li.ok .c3{color:var(--ok)}
.viz__rows li.ok .c3::before{content:"● "}
.viz__rows li.wait .c3::before{content:"○ ";color:var(--viz-dim)}
[data-mode=log] .viz__rows li.done .c1{color:var(--ok)}
[data-mode=log] .viz__rows li.done .c2{color:var(--ink-2)}
/* linha ainda não construída: barra de esqueleto, sem shimmer */
.viz__rows li.sk>span{opacity:0}
.viz__rows li.sk::after{content:"";position:absolute;left:1rem;top:50%;margin-top:-5px;
  height:9px;width:var(--sk,50%);background:var(--hair-2);border-radius:4px}

/* -- ação primária do produto -- */
.viz__act{margin-top:auto;align-self:flex-end;margin-right:1rem;
  display:inline-flex;align-items:center;padding:.52rem .9rem;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--hair-2);
  font:500 .8125rem/1 var(--sans);color:var(--ink);white-space:nowrap;
  transition:opacity var(--t-m) var(--e),transform var(--t-m) var(--e)}
.viz__act:not(.is-on){opacity:0;transform:translateY(6px)}

/* -- satélites: profundidade e assimetria -- */
.viz__sat{position:absolute;z-index:2;display:grid;gap:.2rem;min-width:9.75rem;max-width:13.5rem;
  padding:.6rem .8rem;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(31,31,40,.92),rgba(19,19,25,.88)) padding-box,
             linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.95);
  transition:opacity var(--t-l) var(--e),transform var(--t-l) var(--e)}
.viz__k{font:500 var(--fs-mono)/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--viz-dim)}
.viz__v{font:500 .8125rem/1.35 var(--sans);color:var(--ink)}
.viz__sat--out{top:0;right:0}
.viz__sat--src{left:0;bottom:1.3rem}
.viz__sat:not(.is-on){opacity:0;pointer-events:none}
.viz__sat--out:not(.is-on){transform:translate(5px,7px) scale(.985)}
.viz__sat--src:not(.is-on){transform:translate(-5px,7px) scale(.985)}

/* -- ritmo: qual das três transformações está em cena. Usa a rampa da marca. -- */
.viz__ticks{position:absolute;left:2.1rem;bottom:.4rem;display:flex;gap:.35rem}
.viz__ticks i{width:1.35rem;height:2px;border-radius:2px;background:var(--hair-2);
  transition:background var(--t-m) var(--e)}
.viz__ticks i.is-on{background:var(--ramp)}

/* -- a troca: as linhas se reassentam, não trocam de tela -- */
.viz__stage.is-swap .viz__rows li{opacity:0}
.viz__stage.is-swap .viz__rows li:nth-child(odd){transform:translateX(-9px)}
.viz__stage.is-swap .viz__rows li:nth-child(even){transform:translateX(9px)}
.viz__stage.is-swap .viz__act{opacity:0;transform:translateY(6px)}

/* -- responsivo: tablet perde o satélite de origem, mobile fica só com a janela -- */
@media (max-width:1059px){
  .viz{max-width:430px;margin-inline:auto}
  .viz__stage{padding-top:2.9rem;padding-bottom:2.2rem}
  .viz__win{margin-left:0}
  .viz__ticks{left:0;bottom:.2rem}
  .viz__sat--src{display:none}
}
@media (max-width:639px){
  .viz__sat--out{display:none}
  .viz__win{margin-right:0}
  .viz__stage{padding-top:.25rem}
  .viz__body{height:15.3rem}
}

.hero__h .grad{font-weight:700}
.hero__p{margin-top:clamp(1.5rem,3.5vh,2.25rem);font-size:var(--fs-lead);line-height:1.5;color:var(--mist);max-width:44ch}
.hero__p+.hero__p{margin-top:.9rem}
.hero__cta{margin-top:clamp(2rem,5vh,2.75rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* ─── 10 · CARDS DE VIDRO (base reutilizável) ───────────────────────────── */
/* Borda em gradiente: clara em cima, some embaixo — luz vinda de cima,
   que é o que faz a superfície parecer física e não desenhada. */
/* Base de card do site inteiro: vidro sutil, fio interno, sombra que assenta.
   O hover puxa a borda para o magenta da marca — é o único lugar em que o
   acento toca um card, e só sob ponteiro. */
/* frames — os que têm moldura própria */
.glass,.bc,.terms,.own__grid,.path__no,.case{
  background:rgba(255,255,255,.025);
  border:1px solid var(--hair);
  box-shadow:0 8px 32px 0 rgba(0,0,0,.4);
}
/* células — vivem dentro de um frame que já desenha a divisória com gap:1px,
   então recebem só a superfície, nunca borda (senão viram borda dupla) */
.own__c,.no{background:rgba(255,255,255,.025)}
.glass{
  position:relative;border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  overflow:hidden;isolation:isolate;
  transition:transform var(--t-m) var(--e),box-shadow var(--t-m) var(--e),
             background-color var(--t) var(--e),border-color var(--t) var(--e);
}
/* holofote que segue o ponteiro — só onde existe ponteiro fino */
.glass::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(237,19,118,.14),transparent 62%);
  transition:opacity var(--t-m) var(--e);
}
@media (hover:hover) and (pointer:fine){
  .glass:hover::before{opacity:1}
  .glass:hover,.bc:hover,.own__c:hover{background:rgba(255,255,255,.05)}
  /* a borda vira magenta — menos no plano destacado, cuja borda JÁ é a rampa
     (sobrescrever border-color ali apagaria o gradiente do border-box) */
  .glass:not(.plan--lead):not(.fork__c):hover,.bc:hover{border-color:rgba(237,19,118,.3)}
  .glass:hover{transform:translateY(-3px);box-shadow:0 16px 44px 0 rgba(0,0,0,.5)}
}

/* ─── 11 · PERFIS ───────────────────────────────────────────────────────── */
.who__grid{margin-top:clamp(2.5rem,6vh,4rem);display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:840px){.who__grid{grid-template-columns:repeat(3,1fr)}}
.who__c{padding:clamp(1.6rem,2.6vw,2.1rem);display:flex;flex-direction:column;gap:1rem;min-height:100%}
.who__t{font-size:var(--fs-d3);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.who__d{font-size:var(--fs-body);color:var(--mist);line-height:1.55}
.who__a{
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--hair);
  display:flex;gap:.65rem;align-items:flex-start;
  font-size:var(--fs-body);color:var(--ink-2);line-height:1.5;
}
.who__a svg{width:1.15em;height:1.15em;flex:none;margin-top:.22em;stroke:var(--coral)}

/* ─── 12 · CAMINHO ──────────────────────────────────────────────────────── */
/* A JORNADA 01→04. O trilho é o objeto: uma linha que acende da esquerda para a
   direita, com um nó por etapa acendendo em sequência atrás dela. A cor dos nós
   percorre a rampa da marca — magenta na entrada, salmão na entrega —, então dá
   pra ver que a coisa AVANÇA, não que são quatro colunas de texto. */
.path{--rail-gap:2.75rem;position:relative;margin-top:clamp(3rem,8vh,5rem)}
.path__rail{position:absolute;left:0;right:0;top:0;height:2px;background:var(--hair);border-radius:2px}
.path__rail i{display:block;height:100%;width:100%;border-radius:2px;
  transform:scaleX(0);transform-origin:left;background:var(--ramp);
  transition:transform 1.3s var(--e-soft)}
/* a ponta: o trilho termina apontando para "Entregar" */
.path__rail::after{content:'';position:absolute;right:-1px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;
  border-top:2px solid var(--hair-2);border-right:2px solid var(--hair-2);
  transform:rotate(45deg);transform-origin:center;
  transition:border-color var(--t-l) var(--e)}
.path.is-go .path__rail i{transform:scaleX(1)}
.path.is-go .path__rail::after{border-color:var(--salmon);transition-delay:1.15s}

.path__steps{display:grid;gap:clamp(2rem,3vw,2.5rem);padding-top:var(--rail-gap)}
@media (min-width:760px){.path__steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative}
.step__node{
  position:absolute;top:calc(-1 * var(--rail-gap) - 4px);left:0;
  width:10px;height:10px;border-radius:50%;
  background:var(--void);border:1px solid var(--hair-2);
  transition:background-color .5s var(--e),border-color .5s var(--e),box-shadow .5s var(--e);
}
.step:nth-child(1) .step__node{--c:#ED1376;transition-delay:.20s}
.step:nth-child(2) .step__node{--c:#F23A6A;transition-delay:.50s}
.step:nth-child(3) .step__node{--c:#F0505E;transition-delay:.80s}
.step:nth-child(4) .step__node{--c:#F15E55;transition-delay:1.10s}
.path.is-go .step__node{background:var(--c);border-color:var(--c);box-shadow:0 0 0 4px rgba(240,80,94,.10)}

.step__n{font:500 clamp(1.7rem,1.2rem + 1.4vw,2.4rem)/1 var(--mono);
  letter-spacing:.01em;color:var(--mist);font-variant-numeric:tabular-nums}
.step__t{margin-top:.75rem;font-size:var(--fs-d3);font-weight:500;color:var(--ink);letter-spacing:-.02em}
.step__d{margin-top:.5rem;font-size:var(--fs-cap);color:var(--mist);line-height:1.55;max-width:26ch}

/* mobile: o mesmo trilho, de pé. Vira linha do tempo de verdade. */
@media (max-width:759px){
  .path{--rail-gap:2.25rem}
  .path__rail{top:.5rem;bottom:.5rem;left:4px;width:2px;height:auto;right:auto}
  .path__rail i{width:100%;height:100%;transform:scaleY(0);transform-origin:top;
    transition:transform 1.3s var(--e-soft)}
  .path.is-go .path__rail i{transform:scaleY(1)}
  .path__rail::after{right:auto;left:50%;top:auto;bottom:-1px;margin:0 0 0 -3.5px;
    transform:rotate(135deg)}
  .path__steps{padding-top:0;padding-left:var(--rail-gap)}
  .step__node{top:.55rem;left:calc(-1 * var(--rail-gap) - 1px)}
  .step__d{max-width:none}
}

/* As três objeções. Continuam com destaque — o "Sem" coral três vezes é o ritmo —
   mas como UM bloco contido, não três faixas de largura total competindo com a
   jornada logo acima. */
.path__no{
  margin-top:clamp(3rem,7vh,4.5rem);
  display:grid;gap:1px;
  background:var(--hair);
  border-radius:var(--r-lg);overflow:hidden;
}
@media (min-width:880px){.path__no{grid-template-columns:repeat(3,1fr)}}
.no{
  padding:1.15rem clamp(1.1rem,2vw,1.5rem);
  display:flex;gap:.6rem;align-items:baseline;
  font-size:var(--fs-cap);color:var(--mist);line-height:1.5;
}
.no em{font-style:normal;font-weight:500;color:var(--coral);flex:none}

/* ─── 13 · O QUE CONSTRUÍMOS ────────────────────────────────────────────── */
/* Seis frentes num 3×2. Catálogo, não decisão — por isso a superfície é mais
   leve que a dos três cards de perfil lá em cima: hierarquia por peso.
   Os ícones ficam no cinza do corpo, NUNCA no acento: seis ícones acesos
   viravam painel de app e o olho parava de ler o texto. O coral fica no CTA. */
.build{margin-top:clamp(2.5rem,6vh,4rem);display:grid;gap:clamp(.85rem,1.6vw,1.15rem)}
@media (min-width:660px){.build{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.build{grid-template-columns:repeat(3,1fr)}}

.bc{
  padding:clamp(1.35rem,2.2vw,1.75rem);
  border-radius:var(--r-md);
  transition:background-color var(--t) var(--e),border-color var(--t) var(--e);
}
.bc__i{width:22px;height:22px;color:var(--mist);margin-bottom:1rem}
.bc__t{font-size:1.0625rem;font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.25}
.bc__d{margin-top:.55rem;font-size:var(--fs-cap);color:var(--mist);line-height:1.6}

/* mobile: linha compacta — ícone ao lado do título, texto continua inteiro.
   Corta a altura da grade sem esconder o que vende. */
@media (max-width:659px){
  .bc{padding:1.15rem 1.25rem;display:grid;grid-template-columns:22px 1fr;
      column-gap:.85rem;row-gap:.4rem;align-items:center}
  .bc__i{margin-bottom:0}
  .bc__t{grid-column:2}
  .bc__d{grid-column:2;margin-top:0}
}

/* ─── 14 · PREÇO ────────────────────────────────────────────────────────── */
/* Hierarquia: a PARCELA é o número grande — é ela que responde "cabe no meu mês?".
   O total à vista fica logo abaixo, menor e neutro. Botões alinhados no rodapé
   dos três cards, independentemente do tamanho da lista. */
.plans{margin-top:clamp(2.75rem,7vh,4.5rem);display:grid;gap:clamp(1rem,2vw,1.5rem);align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:clamp(1.75rem,2.8vw,2.25rem);display:flex;flex-direction:column;gap:1rem}
/* Os três nomes de plano no mesmo salmão — 5,52:1 sobre o card e 5,29:1 sobre o
   plano destacado, os dois acima do mínimo AA de 4,5. Quem separa o plano do
   meio continua sendo a borda em rampa e a flag, não a cor do rótulo. */
.plan__n{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--salmon)}
/* min-height segura a calha mesmo vazia: sem isso o preço do "Sob medida"
   descia uma linha em relação aos outros dois */
.plan__pre{font-size:var(--fs-cap);line-height:1.5;color:var(--dim);margin-bottom:-.75rem;min-height:1.5em}

/* preço principal */
.plan__p{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem;letter-spacing:-.045em;margin-top:.35rem}
.plan__p .x{font-size:1.0625rem;font-weight:500;color:var(--mist);letter-spacing:-.01em}
.plan__p .cur{font-size:1.05rem;font-weight:500;color:var(--mist)}
.plan__p .val{font-size:clamp(2.35rem,1.5rem + 3vw,3.4rem);font-weight:700;color:var(--ink);line-height:1}
/* preço secundário: presente, mas claramente subordinado */
.plan__alt{margin-top:-.55rem;font-size:var(--fs-cap);color:var(--dim)}

.plan__d{font-size:var(--fs-body);color:var(--mist);line-height:1.55}

/* lista de features */
.plan__f{display:grid;gap:.7rem;padding-top:1rem;border-top:1px solid var(--hair);flex:1}
.plan__f li{display:flex;gap:.65rem;align-items:flex-start;
  font-size:var(--fs-cap);color:var(--mist);line-height:1.5}
.plan__f svg{width:15px;height:15px;flex:none;margin-top:.24em;color:var(--mist);opacity:.75}
.plan__f b{color:var(--ink-2);font-weight:500}

.plan .btn{width:100%;margin-top:.35rem}

/* o plano do meio: a rampa vira borda de verdade */
.plan--lead{
  background:
    linear-gradient(180deg,rgba(35,26,32,.9),rgba(22,18,22,.75)) padding-box,
    var(--ramp) border-box;
  box-shadow:0 30px 70px -40px rgba(237,19,118,.55);
}
.plan--lead .plan__f{border-top-color:var(--hair-2)}
.plan--lead .plan__f svg{color:var(--salmon);opacity:1}
.plan__flag{
  position:absolute;top:0;right:0;
  padding:.35rem .8rem;border-radius:0 var(--r-lg) 0 var(--r-md);
  background:var(--ramp);color:#fff;
  font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}

/* rodapé da seção */
.terms{
  margin-top:clamp(1.75rem,4vh,2.5rem);padding:1.5rem clamp(1.25rem,2.4vw,1.9rem);
  border-radius:var(--r-lg);
  display:grid;gap:.55rem;text-align:center;
}
.terms b{color:var(--ink);font-size:var(--fs-lead);font-weight:500;letter-spacing:-.02em;line-height:1.4}
.terms .ok{color:#3ECF8E;font-size:var(--fs-body)}
.terms small{color:var(--dim);font-size:var(--fs-cap);line-height:1.5}

/* ─── 15 · PROPRIEDADE ──────────────────────────────────────────────────── */
.own__grid{margin-top:clamp(2.5rem,6vh,4rem);display:grid;gap:1px;background:var(--hair);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:760px){.own__grid{grid-template-columns:repeat(3,1fr)}}
.own__c{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:clamp(1.6rem,2.6vw,2.1rem);
  transition:background-color var(--t) var(--e),border-color var(--t) var(--e)}
.own__k{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.own__v{margin-top:.85rem;font-size:var(--fs-d3);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.25}
/* --dim aqui dava 3,2:1 e reprovava AA; com o texto mais longo pesa mais ainda */
.own__note{margin-top:.6rem;font-size:var(--fs-cap);color:var(--mist);line-height:1.55}
/* balance evita a palavra órfã na última linha ("gente." sozinho) */
.own__free{margin-top:clamp(2rem,5vh,3rem);font-size:var(--fs-d2);font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1.25;max-width:30ch;text-wrap:balance}
.own__free em{font-style:normal}

/* ── A FAIXA ─────────────────────────────────────────────────────────────
   Única seção do site que não roda sobre o fundo base. O corte é seco por
   construção: as vizinhas são #111113 e não existe gradiente entre elas.
   O fundo é pintado na própria .sec, que já ocupa a largura do body — nada de
   width:100vw, que soma a barra de rolagem e cria scroll horizontal.

   A quebra não vem de inverter o modo, vem de inverter a DIREÇÃO da elevação:
   no resto da página o card é mais claro que a seção; aqui a faixa sobe
   (#292A2E) e os cards descem (#111113). Mesma leitura de "isto aqui é outro
   plano", sem o choque do fundo claro. */
.sec--band{
  --mist:#B2B3BD;   /* corpo · 6,88:1 sobre #292A2E — o #A1A1AA padrão cairia p/ 5,59 */
  --dim:#9596A0;    /* eyebrow · 4,88:1 — o --dim padrão dava 4,24 e reprovava AA */
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.16);
  background:#292A2E;
  /* mais ar que o --sec padrão: a faixa precisa respirar para o corte ler
     como decisão e não como acidente */
  padding-block:clamp(6rem,5rem + 4.5vw,10.5rem);
}
/* o bloco preto não leva sombra: card mais escuro que o fundo é reentrância,
   não elevação — sombra externa contaria a história errada. Quem separa os
   planos aqui é a superfície, como no resto do site. */
.sec--band .own__grid{
  background:rgba(255,255,255,.10);   /* vira o fio de 1px entre os cards */
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}
.sec--band .own__c{
  --mist:#A1A1AA;   /* volta ao tom do site: 7,36:1 sobre #111113 */
  background:#111113;
  /* fundo opaco: o blur não teria o que borrar e só custaria composição */
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@media (hover:hover) and (pointer:fine){
  .sec--band .own__c:hover{background:#161619}
}
/* sem <br> manual: o text-wrap:balance distribui as linhas sozinho e não deixa
   "gente." órfã na última — o <br> antigo era calibrado na copy longa */
.sec--band .own__free{max-width:24ch}

/* ─── 16 · PROVA ────────────────────────────────────────────────────────── */
/* Cada caso é UMA moldura. A imagem não flutua dentro dela: ela é metade da
   moldura, sangrando até a borda, cortada pelo overflow do próprio card. O
   lado da imagem alterna a cada caso — positivo, negativo, positivo. */
.cases{margin-top:clamp(2.75rem,7vh,4.5rem);display:grid;gap:clamp(1.75rem,3.5vh,2.75rem)}
.case{
  display:grid;gap:0;
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
}
.case__fig{order:-1}                 /* no mobile a imagem vem por cima */
@media (min-width:900px){
  .case{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .case__fig{order:0}                              /* ímpares: imagem à direita */
  .case:nth-child(even) .case__fig{order:-1}       /* pares: imagem à esquerda */
}

/* A imagem preenche o próprio meio-lado. Sem borda, sem raio, sem sombra —
   quem desenha a borda é o card. object-fit corta o excesso. */
.case__fig{position:relative;min-width:0}
.case__fig picture{display:block;height:100%}
.case__fig img{width:100%;height:auto;object-fit:cover;object-position:center;
  border:0;border-radius:0;box-shadow:none}
@media (min-width:900px){
  .case__fig{height:100%}
  .case__fig img{height:100%}
}

.case__say{padding:clamp(1.75rem,3vw,3.25rem);align-self:center;min-width:0}

/* Quatro degraus: setor (rótulo) → empresa (o nome) → a prova, sublinhada pela
   rampa → o relato em dois parágrafos. */
.case__k{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);margin-bottom:1.1rem}
.case__co{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.4rem);font-weight:500;color:var(--ink);
  letter-spacing:-.035em;line-height:1.1}
.case__n{
  position:relative;display:inline-block;margin-top:1.5rem;padding-bottom:.7rem;
  font-size:var(--fs-lead);font-weight:500;color:var(--ink);letter-spacing:-.02em;
  line-height:1.35;font-variant-numeric:tabular-nums;max-width:26ch;
}
.case__n::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--ramp)}
/* O número em branco puro, não na rampa: o card já tem coral no setor e a rampa
   no fio de baixo. Quem destaca aqui é peso e tamanho, não mais uma cor. */
.case__n b{font-weight:700;font-size:1.12em;color:var(--ink)}
.case__d{margin-top:1.15rem;font-size:var(--fs-body);color:var(--mist);line-height:1.6;max-width:46ch}
.case__n + .case__d{margin-top:1.6rem}

.proof__since{
  margin-top:clamp(3rem,7vh,4.5rem);padding-top:1.75rem;border-top:1px solid var(--hair);
  font-size:var(--fs-cap);color:var(--dim);letter-spacing:.02em;text-align:center;
}

/* ─── 17 · BIFURCAÇÃO ───────────────────────────────────────────────────── */
.fork{margin-top:clamp(2.5rem,6vh,4rem);display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:820px){.fork{grid-template-columns:1fr auto 1fr;align-items:center}}
/* Os dois caminhos NÃO têm peso igual — é a única bifurcação da página em que
   a gente tem preferência. O peso vem escalonado em três degraus (superfície,
   fio, sombra), não de um efeito só. */
.fork__c{padding:clamp(1.6rem,2.6vw,2.1rem);background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.05)}
.fork__t{font-size:var(--fs-d3);font-weight:500;color:var(--ink);letter-spacing:-.02em}
.fork__d{margin-top:.7rem;font-size:var(--fs-body);color:var(--mist);line-height:1.55}
.fork__or{
  justify-self:center;width:3.25rem;height:3.25rem;border-radius:50%;
  display:grid;place-items:center;
  /* opaco, não translúcido: a moeda tem que parecer sobreposta aos dois cards,
     e não uma terceira superfície transparente competindo com eles */
  background:#1A1A1D;border:1px solid rgba(255,255,255,.10);
  font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;
}
.fork__p{margin-top:1rem;font-size:var(--fs-lead);font-weight:500;color:var(--ink);letter-spacing:-.02em}

/* o card do upsell. A sombra é DIRECIONAL (offset-y + spread negativo), não um
   halo par: halo em volta de card é o vício de dark de startup de IA que o
   guia §18 proíbe. Mesma gramática do .plan--lead lá em cima, em volume menor,
   para a página ter um só dialeto de "este é o recomendado". */
.fork__c--lead{
  background:rgba(255,255,255,.04);
  border-color:rgba(237,19,118,.30);
  box-shadow:0 8px 32px 0 rgba(0,0,0,.4),
             0 24px 56px -32px rgba(237,19,118,.45);
}
/* --coral e não #ED1376: o magenta mede 4,06:1 sobre esta superfície e reprova
   AA em texto normal (o .fork__p é 500, não 700 — 700 é exclusivo do h1). O
   coral dá 4,93:1 e é o acento de destaque definido no manual da marca. */
.fork__c--lead .fork__p{color:var(--coral)}
@media (hover:hover) and (pointer:fine){
  .fork__c--lead:hover{
    background:rgba(255,255,255,.06);
    box-shadow:0 8px 32px 0 rgba(0,0,0,.4),
               0 24px 56px -28px rgba(237,19,118,.6);
  }
}

/* ─── 18 · FAQ ──────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--hair)}
.q{border-bottom:1px solid var(--hair)}
.q summary{
  list-style:none;cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-size:var(--fs-d3);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.35;
  transition:color var(--t) var(--e);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--salmon)}
.q summary::after,.q summary::before{
  content:'';position:absolute;right:.35rem;top:50%;background:var(--mist);
  transition:transform var(--t-m) var(--e-soft),background-color var(--t) var(--e);
}
.q summary::before{width:15px;height:1.5px;margin-top:-.75px}
.q summary::after{width:1.5px;height:15px;right:1.05rem;margin-top:-7.5px}
.q[open] summary::before,.q[open] summary::after{background:var(--coral)}
.q[open] summary::after{transform:rotate(90deg)}
.q__a{padding:0 0 1.5rem;font-size:var(--fs-body);color:var(--mist);line-height:1.65;max-width:62ch}
.q[open] .q__a{animation:fade var(--t-m) var(--e)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ─── 19 · FUNDADOR ─────────────────────────────────────────────────────── */
/* overflow:clip na seção, não na figure: é a figure que precisa deixar o glow
   sangrar para fora. No mobile a foto é quase a largura da tela e o -20% do
   glow saía da viewport (scrollWidth 440 num clientWidth de 390). A seção
   ocupa a largura do body, então clipar aqui para o glow exatamente na borda
   da tela sem tocar no efeito. `clip` e não `hidden`: não cria contêiner de
   rolagem nem quebra sticky. */
.founder{position:relative;overflow:clip}
.founder__in{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
/* a foto cresceu de 340 para 420: com a copy nova mais longa, 340 deixava o
   retrato pequeno demais ao lado de um bloco de seis linhas */
@media (min-width:880px){.founder__in{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}

/* O recorte saiu do <figure> e foi para o <picture>. Isso libera o figure para
   desenhar o glow por fora sem ser cortado pelo overflow:hidden — e o isolate
   segura o z-index:-1 dentro da seção, sem furar o fundo da página. */
.founder__fig{position:relative;isolation:isolate}
.founder__fig::before{
  content:'';position:absolute;inset:-22% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 50% at 50% 52%,
    rgba(237,19,118,.42),rgba(237,19,118,.16) 46%,transparent 74%);
}
.founder__fig picture{
  display:block;position:relative;overflow:hidden;
  border-radius:16px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.founder__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 14%;filter:saturate(.95) contrast(1.04)}
/* a vinheta migrou junto com o overflow: no figure ela voltaria a ter canto
   reto por cima da imagem arredondada */
.founder__fig picture::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(186deg,transparent 42%,rgba(17,17,19,.72) 100%)}
.founder__q{font-size:var(--fs-d2);font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1.25;max-width:22ch}
.founder__q em{font-style:normal}
.founder__b{margin-top:1.25rem;font-size:var(--fs-body);color:var(--mist);line-height:1.6;max-width:46ch}
.founder__sig{margin-top:1.5rem;display:flex;align-items:center;gap:.85rem;font-size:var(--fs-cap)}
.founder__sig b{color:var(--ink);font-weight:500}
.founder__sig span{color:var(--dim)}
.founder__sig i{display:block;width:2rem;height:1px;background:var(--ramp)}

/* ─── 20 · CTA FINAL ────────────────────────────────────────────────────── */
/* A página fecha em uma tela cheia: a seção ocupa a viewport menos a faixa do
   rodapé, com o conteúdo centralizado. No fim do scroll o visitante para vendo
   exatamente esta composição — CTA no centro, rodapé como linha embaixo.
   min-height (não height) e o padding-block garantem que nada seja cortado em
   tela baixa; aí a seção cresce e volta a rolar normalmente. */
.end{
  position:relative;text-align:center;overflow:clip;
  min-height:calc(100vh - var(--foot-h));
  min-height:calc(100svh - var(--foot-h));
  display:grid;
  align-content:center;
  /* safe: quando o conteúdo é mais alto que a viewport (tela baixa, fonte
     grande), `center` estoura para os DOIS lados e o topo do título some atrás
     da nav sticky. `safe` faz cair para o início nesse caso. */
  align-content:safe center;
  /* o padding-top nunca fica menor que a nav, senão o título encosta nela no
     momento em que a seção passa a rolar */
  padding-block:max(var(--nav-h),clamp(4rem,10vh,7rem)) clamp(4rem,10vh,7rem);
}
/* a luz de fechamento — a única da página. Círculo de raio fixo em vez do
   farthest-corner do `circle at center`: senão o raio cresce com a largura da
   tela e em ultrawide a luz vira um campo chapado sem centro. */
.end::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle 620px at 50% 50%,
    rgba(237,19,118,.12) 0%,rgba(237,19,118,.05) 38%,transparent 68%);
}
.end__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
/* 18ch e não 15ch: a copy nova tem 51 caracteres e a 15ch quebrava em quatro
   linhas — o título perdia a leitura de bloco único */
.end__h{font-size:clamp(2.35rem,1.2rem + 4.6vw,4.5rem);font-weight:500;letter-spacing:-.045em;line-height:1.05;max-width:18ch}
.end__p{margin-top:clamp(1.35rem,3.5vh,2rem);font-size:var(--fs-lead);color:var(--mist);line-height:1.5;max-width:52ch}
.end__acts{margin-top:clamp(2rem,5vh,3rem);display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
/* --mist e não --dim: 7,36:1 contra 5,58. O selo subiu pro topo e esta linha
   virou o último texto da seção — vale ler bem. */
.end__meta{margin-top:1.5rem;font-size:var(--fs-cap);color:var(--mist)}
/* o selo abre a seção agora: margin virou de baixo, não de cima */
.end__agenda{
  margin-bottom:clamp(1.5rem,4vh,2.25rem);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.72rem 1.35rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);border:1px solid var(--hair-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  text-wrap:balance;   /* no mobile o selo quebra em duas linhas e deixa "PROJETOS" órfã */
}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(240,80,94,.45)}55%{box-shadow:0 0 0 7px rgba(240,80,94,0)}}
.end__agenda .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;
  box-shadow:0 0 0 0 rgba(240,80,94,.5);animation:beat 3.2s var(--e) infinite}

/* ─── 21 · FOOTER ───────────────────────────────────────────────────────── */
/* Faixa de uma linha. A altura vive em --foot-h porque a .end depende dela para
   fechar a página em exatamente uma viewport — mudar uma sem a outra quebra o
   enquadramento. min-height, não height: se o texto quebrar, a faixa cresce em
   vez de cortar. */
.foot{
  border-top:1px solid var(--hair);
  min-height:var(--foot-h);
  display:flex;align-items:center;
  padding-block:.85rem;
}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:.9rem 2rem;flex-wrap:wrap;width:100%}
.foot__id{display:flex;align-items:center;gap:.9rem;min-width:0}
.foot__logo{width:96px;height:24px;opacity:.85;flex:none}
.foot__m{font:400 var(--fs-mono)/1.5 var(--mono);color:var(--dim);letter-spacing:.03em}
.foot__m .nb{white-space:nowrap}   /* o CNPJ não pode quebrar no meio do número */
@media (max-width:760px){
  .foot__in{flex-direction:column-reverse;justify-content:center;text-align:center;gap:.75rem}
  .foot__logo{display:none}   /* a marca já está na nav; no mobile ela só empilha altura */
  /* uma pista menor: sem isto a linha vai a três e a faixa deixa de ser estreita */
  .foot__m{font-size:.6875rem;letter-spacing:.02em;text-wrap:balance}
}
/* os links tinham 22px de altura e reprovavam o mínimo de 24x24 do WCAG 2.2
   (2.5.8). O padding vertical leva a área de toque para ~44px sem mudar nada
   do que se vê; a margem negativa devolve o espaço que o padding roubaria. */
.foot__l{display:flex;gap:1.5rem;font-size:var(--fs-cap);color:var(--mist);flex-wrap:wrap;margin-block:-.7rem}
.foot__l a{padding-block:.7rem}
.foot__l a:hover{color:var(--ink)}

/* ─── 23 · REVELAÇÃO ────────────────────────────────────────────────────── */
/* SEM JS A PÁGINA ENTREGA O ESTADO FINAL.
   A classe .js é posta por um inline no <head>; se o app.js não rodar — ou se
   nem chegar a carregar — nada disso aqui abaixo se aplica e tudo nasce visível.
   Especificidade 0,2,1 contra os 0,1,0 das regras de reveal: vence sem
   !important. */
html:not(.js) [data-r]{opacity:1;transform:none;filter:none}
html:not(.js) .nav{background:rgba(17,17,19,.92)}
html:not(.js) .nav::after{opacity:1}
html:not(.js) .path__rail i{transform:none}
html:not(.js) .path__rail::after{border-color:var(--salmon)}
html:not(.js) .step__node{background:var(--c);border-color:var(--c)}

[data-r]{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity var(--t-l) var(--e-soft),transform var(--t-l) var(--e-soft),filter var(--t-l) var(--e-soft)}
[data-r].in{opacity:1;transform:none;filter:none}
[data-r][data-d="1"]{transition-delay:80ms}
[data-r][data-d="2"]{transition-delay:160ms}
[data-r][data-d="3"]{transition-delay:240ms}
[data-r][data-d="4"]{transition-delay:320ms}

/* ─── 24 · CONSENTIMENTO DE COOKIES ───────────────────────────── */
/* position:fixed de propósito: a linha de base tem CLS 0,005 e um banner em
   fluxo normal empurraria a página inteira. Aqui ele não custa layout nenhum.
   Aceitar e Recusar têm o MESMO peso visual — o Guia da ANPD sobre cookies
   exige que recusar seja tão fácil quanto aceitar. Não "melhore" isso. */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(25,25,27,.92);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--hair-2);
  padding:1.15rem 0;
  transition:transform var(--t-l) var(--e-soft);
}
/* INVERTIDO DE PROPÓSITO: o estado normal do banner é VISÍVEL. A entrada
   deslizante é a exceção (.is-enter), removida no frame seguinte. Se o rAF
   nunca disparar, ou a transição não rodar, o banner aparece sem animação —
   em vez de existir no DOM, invisível, com a pessoa sem como consentir.
   Falha do lado seguro. Não volte a pendurar a visibilidade numa animação. */
.ck.is-enter{transform:translateY(100%)}
.ck__in{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.ck__t{flex:1 1 22rem;min-width:0;font-size:.9375rem;line-height:1.6;color:var(--mist);margin:0}
.ck__t a{color:var(--salmon);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.ck__acts{display:flex;gap:.7rem;flex:none}
.ck__b{
  font:500 .9375rem/1 var(--sans);letter-spacing:-.01em;
  padding:.8rem 1.4rem;border-radius:var(--r-pill);border:1px solid var(--hair-3);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color var(--t) var(--e),border-color var(--t) var(--e);
}
.ck__b:hover{background:var(--surface-2);border-color:var(--hair-3)}
.ck__b--go{background:var(--coral);border-color:var(--coral);color:#111113}
.ck__b--go:hover{background:var(--salmon);border-color:var(--salmon)}
@media (max-width:560px){
  .ck__acts{width:100%}
  .ck__b{flex:1 1 0}      /* dois botões de mesma largura: recusar não pode ser menor */
}

/* ─── 25 · MOVIMENTO REDUZIDO ───────────────────────────────────────────── */
@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-r]{opacity:1 !important;transform:none !important;filter:none !important}
  .path__rail i{transform:none !important}
  .step__node{transition-delay:0s !important}
  .ck{transform:none !important}
  .viz__stage.is-swap .viz__rows li,.viz__stage.is-swap .viz__act{opacity:1 !important;transform:none !important}
  .viz__win.is-refocus{filter:none !important;transform:none !important;opacity:1 !important}
}

/* ─── 26 · LP DA DESTTRA (13/10/2026 · #2135) ──────────────────────────── */
/* A home virou a LP da Desttra, dobra a dobra e sem preço. Só o mínimo novo:
   o resto reaproveita as peças acima (who, path, band, own__free, cases, faq).
   Cores sempre pelos tokens; contraste conferido contra a tabela do §6. */

/* topo: o h1 novo tem 84 caracteres — o dobro do antigo. No tamanho e na medida
   de 15ch ele ia a sete linhas em 390px e empurrava o botão para fora da dobra. */
.hero__h--long{font-size:clamp(2.1rem,1.3rem + 3.1vw,3.55rem);line-height:1.07;max-width:19ch}

/* o que fazemos: uma frase grande, sem cards. O destaque é a mesma rampa do
   .grad (bloco 06), repetida aqui para não mexer naquela lista de seletores. */
.says{font-size:var(--fs-d2);font-weight:500;line-height:1.25;letter-spacing:-.03em;max-width:32ch;text-wrap:balance}
.says em{font-style:normal;background:var(--ramp);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* problema: o número dos três erros. Coral sobre o vidro (~#151517) mede ~5,2:1
   e o tamanho já é de texto grande — passa AA com folga. */
.who__n{font:500 clamp(1.5rem,1.2rem + 1vw,2rem)/1 var(--mono);color:var(--coral);font-variant-numeric:tabular-nums}

/* frase de afirmação: a faixa com a frase de um lado e uma janela ESTÁTICA do
   outro (irmã da janela viva do topo, sem os data-* que o app.js anima). */
.aff{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:1060px){.aff{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.sec--band .aff__h{margin-top:0;font-size:clamp(2.1rem,1.3rem + 3vw,3.4rem);line-height:1.1;max-width:18ch}
@media (max-width:639px){.aff__viz .viz__stage{padding-bottom:0}}

/* como funciona: "Etapa" vira rótulo acima do número, e a frase do ↓ do doc
   entra como segunda linha discreta, presa ao passo por um fio da rampa. */
.step__k{display:block;margin-bottom:.55rem;font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.step__x{margin-top:1rem;font-size:var(--fs-cap);font-weight:500;color:var(--ink-2);line-height:1.5;max-width:26ch}
.step__x::before{content:'';display:block;width:1.5rem;height:1px;margin-bottom:.75rem;background:var(--ramp)}
@media (max-width:759px){.step__x{max-width:none}}

/* para quem é: sete momentos numerados. Lista corrida com fio entre as linhas;
   no desktop vira duas colunas que enchem de cima para baixo (4 + 3). */
.moments{margin-top:clamp(2.5rem,6vh,4rem);display:grid;column-gap:clamp(2rem,5vw,4.5rem)}
@media (min-width:760px){.moments{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column}}
.moment{display:flex;gap:1.1rem;align-items:baseline;padding:1.2rem 0;border-top:1px solid var(--hair-2)}
.moment__n{flex:none;font:500 var(--fs-cap)/1 var(--mono);color:var(--coral);font-variant-numeric:tabular-nums}
.moment__t{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.3}