@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-italic-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; }

:root {
  --fundo: #0e0f12;
  --fundo-2: #16171c;
  --fundo-3: #1d1e24;
  --vidro: rgba(30, 31, 36, .62);
  --vidro-borda: inset 0 0 0 .5px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
  --linha: rgba(255, 255, 255, .08);
  --linha-2: rgba(255, 255, 255, .14);
  --texto: #ececef;
  --texto-2: #9a9ba3;
  --texto-3: #7d7e87;
  --apagado: #5f6068;
  --verde: #39936d;
  --verde-vivo: #4fc08d;
  --alerta: #e8a33d;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Só para saída de terminal e código: a fonte do sistema, a mesma que o terminal do Windows usa. */
  --mono: 'Cascadia Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --gut: 24px;
  --sec: 128px;

  /* Tokens do app (tema escuro de src/renderer/src/styles.css) para as figuras. */
  --a-bg: #1a1a1c;
  --a-canvas: #1e1e1e;
  --a-grid: #303030;
  --a-surface: #2c2c2e;
  --a-surface-2: #3a3a3c;
  --a-term: #1c1c1e;
  --a-text: #f5f5f7;
  --a-muted: rgba(235, 235, 245, .68);
  --a-accent: #0a84ff;
  --a-ok: #30d158;
  --a-warn: #ff9f0a;
  --a-rope: rgba(255, 255, 255, .33);
  --a-border: rgba(84, 84, 88, .5);
  --a-hover: rgba(255, 255, 255, .06);
  --a-input: rgba(118, 118, 128, .24);
  --a-glass: rgba(44, 44, 46, .82);
  --a-glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
  --a-shadow: 0 3px 18px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .08);
  --a-shadow-sel: 0 8px 36px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .08);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  color: var(--texto-2);
  font: 400 17px/1.6 var(--sans);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(57, 147, 109, .45); color: #fff; }

.num { font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.alerta { color: var(--alerta); }

.pular { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--texto); color: var(--fundo); border-radius: 8px; text-decoration: none; font-weight: 600; }
.pular:focus { top: 16px; }

/* Fundo da landing: o vale já borrado na imagem, a névoa por cima, uma tinta escura e o grão, como o acrílico do app.
   O main.js troca a imagem por um canvas WebGL que escoa perto do ponteiro (.acr.gl); sem ele a imagem fica parada. */
.acr { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.acr > * { position: absolute; inset: 0; }
.acr-img {
  inset: -64px; background: url(../img/fundo-vale.webp) center / cover no-repeat;
  background-image: image-set(url(../img/fundo-vale.avif) type("image/avif"), url(../img/fundo-vale.webp) type("image/webp"));
}
.acr-gl { width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.acr.gl .acr-gl { opacity: 1; }
.acr-nevoa {
  inset: -48px;
  background:
    radial-gradient(50% 12% at 58% 30%, rgba(170, 214, 196, .05), transparent),
    radial-gradient(60% 16% at 38% 58%, rgba(170, 214, 196, .09), transparent),
    radial-gradient(45% 12% at 70% 74%, rgba(170, 214, 196, .07), transparent);
}
.acr-tinta { background: rgba(14, 15, 18, .3); }
.acr::after { content: ''; position: absolute; inset: 0; background: url(../img/grao.svg); opacity: .05; }

.caixa { position: relative; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gut); }

.rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1.4 var(--sans); letter-spacing: -.005em; color: var(--texto-2);
}
.rotulo-n {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .02em; color: var(--texto); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--linha-2);
}
.no-vivo { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-vivo); flex: none; }
.no-vivo::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: rgba(79, 192, 141, .55); animation: pulso 1.8s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { transform: scale(.45); opacity: 1; } 60% { transform: scale(1); opacity: 0; } }

h2 {
  font: 600 clamp(34px, 5vw, 58px)/1.04 var(--sans); letter-spacing: -.04em; color: var(--texto);
  margin-top: 20px; text-wrap: balance;
}
h2 .apagado { color: var(--texto-3); }
h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.02em; color: var(--texto); }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* Linhas de título que sobem da máscara */
[data-linhas] .l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
[data-linhas] .l > span { display: inline-block; }
.js [data-linhas] .l > span { transform: translate3d(0, 108%, 0); transition: transform 1s var(--curva); }
.js [data-linhas] .l:nth-child(2) > span { transition-delay: 90ms; }
.js [data-linhas].visivel .l > span { transform: none; }

/* Entrada escalonada */
.js [data-revela] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-revela].visivel { opacity: 1; transform: none; }
.js .fig[data-revela] { transform: translate3d(0, 40px, 0) scale(.97); transition-duration: 1s, 1.2s; }
.js .fig[data-revela].visivel { transform: none; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font: 600 15px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .22s, border-color .22s, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s;
}
.botao-g { height: 50px; padding: 0 24px; font-size: 16px; }
.botao-p { background: var(--verde); color: #08130e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.botao-p:hover { background: var(--verde-vivo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 28px -6px rgba(79, 192, 141, .45); transform: translateY(-2px); }
.botao-f { color: var(--texto); border: 1px solid var(--linha-2); background: rgba(255, 255, 255, .02); }
.botao-f:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.botao-cheio { width: 100%; }

/* Topo */
.topo {
  position: fixed; z-index: 50; top: 12px; left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 12px;
  max-width: 1200px; margin-inline: auto; padding-inline: 12px;
  transition: transform .5s var(--curva);
  pointer-events: none;
}
.topo.escondido { transform: translateY(-120%); }
.topo-esq, .topo-dir {
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 6px 0 18px; border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
.topo-dir { padding: 0 6px 0 8px; }
.topo-entrar { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--texto-2); text-decoration: none; transition: color .2s, background-color .2s; }
.topo-entrar:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.topo.vidro .topo-esq, .topo.vidro .topo-dir { background: rgba(14, 15, 18, .72); border-color: var(--linha); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topo-logo { padding: 8px 12px 8px 0; }
.topo-links { display: flex; gap: 2px; }
.topo-links a { display: block; padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--texto-2); text-decoration: none; transition: color .2s, background-color .2s; }
.topo-links a:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }

main, .rodape { position: relative; z-index: 1; }

/* Corda que atravessa a página: um path só, desenhado por stroke-dashoffset; a ponta anda por transform. */
.corda { position: absolute; z-index: 1; inset: 0 auto auto 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.corda path { fill: none; stroke-linecap: round; }
.corda-trilho { stroke: var(--linha); stroke-width: 1; }
.corda-fio { stroke: var(--verde); stroke-width: 1.5; }
.corda-ponta {
  position: absolute; left: 0; top: 0; z-index: 1; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(79, 192, 141, .16), 0 0 18px rgba(79, 192, 141, .6);
  will-change: transform; pointer-events: none;
}
.no {
  position: absolute; left: calc(var(--gut) * .45); top: 0; z-index: 1;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--fundo); border: 1.5px solid var(--linha-2);
  transition: background-color .5s, border-color .5s, box-shadow .5s, transform .5s var(--mola);
}
.no.aceso, .passo-n.aceso { border-color: var(--verde); }
.no.aceso { background: var(--verde); box-shadow: 0 0 12px rgba(79, 192, 141, .5); transform: scale(1.15); }

section { position: relative; padding-block: var(--sec); }
/* Vidro do app (--glass-bg + blur 20px + saturate) nas seções e no rodapé. A corda sobe acima do vidro e abaixo do conteúdo. */
main .caixa { z-index: 1; }
section + section { border-top: 1px solid var(--linha); }
section + section::before, section + section::after {
  content: '+'; position: absolute; top: calc(-.75em - 2px); z-index: 2;
  font: 300 16px/1.5 var(--sans); color: var(--texto-3);
  /* Centro da cruz no mesmo x da corda: borda da .caixa + o left do .no. */
  width: 1em; margin-inline: -.5em; text-align: center;
  left: calc(max(0px, 50% - 600px) + var(--gut) * .45);
}
section + section::after { left: auto; right: calc(max(0px, 50% - 600px) + var(--gut) * .45); }

.sec-cab { max-width: 880px; margin-bottom: 72px; }
.sec-cab-c { margin-inline: auto; text-align: center; }
.sec-sub { margin-top: 24px; max-width: 60ch; font-size: 18px; color: var(--texto-2); }
.sec-cab-c .sec-sub { margin-inline: auto; }

/* Hero */
.hero { padding-top: 168px; padding-bottom: 64px; }
.hero-texto { text-align: center; display: flex; flex-direction: column; align-items: center; }
.titulo-hero {
  margin-top: 26px;
  font: 600 clamp(38px, 10vw, 108px)/.98 var(--sans); letter-spacing: -.045em; color: var(--texto);
}
.titulo-hero em { color: var(--verde-vivo); letter-spacing: -.02em; padding-right: .04em; }
.hero-sub { margin-top: 28px; max-width: 58ch; font-size: clamp(17px, 1.6vw, 19px); }
.acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.miuda { margin-top: 20px; font-size: 13px; color: var(--texto-3); }
.miuda span { margin-inline: 6px; }

.fig { margin-top: 88px; }
.fig-cab, .fig-leg { display: flex; justify-content: space-between; gap: 16px; font: 500 13px/1.4 var(--sans); color: var(--texto-3); }
.fig-cab b { color: var(--texto-2); font-weight: 600; }
.fig-cab { margin-bottom: 14px; }
.fig-leg { margin-top: 14px; justify-content: flex-start; gap: 0; flex-wrap: wrap; }
.fig-leg span + span::before { content: '·'; margin: 0 10px; color: var(--apagado); }

/* Janela do app */
.janela {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--a-bg); border: 1px solid var(--linha-2);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
}
.hero-fig { position: relative; }
.hero-fig::before {
  content: ''; position: absolute; inset: 0 8% auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 132, 255, .12), transparent);
  transform: translateY(-12%);
}

/* Palco: um "app" de tamanho fixo (--pw x --ph) escalado para caber na moldura, só com transform. */
.moldura { position: relative; overflow: hidden; contain: layout paint; }
.palco-moldura { --pw: 1240; --ph: 740; aspect-ratio: 1240 / 740; }
.palco {
  position: absolute; left: 0; top: 0; width: calc(var(--pw) * 1px); height: calc(var(--ph) * 1px);
  transform-origin: 0 0; transform: scale(var(--s, 1));
}
.js .palco { visibility: hidden; }
.js .palco.pronto { visibility: visible; }

/* Peças do app: barra lateral, canvas, nós, cordas, notch, barra de informações */
.app {
  font: 400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--a-text);
  background-color: var(--a-canvas);
  background-image: linear-gradient(var(--a-grid) 1px, transparent 1px), linear-gradient(90deg, var(--a-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
.app .ic { width: 16px; height: 16px; stroke-width: 1.75; }
.app-grade-off { background-image: none; }

.a-side {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; width: 236px;
  display: flex; flex-direction: column;
  background: var(--a-surface); border-right: .5px solid var(--a-border); border-radius: 0 14px 14px 0;
  font-size: 13px;
}
.a-side-top { display: flex; align-items: center; gap: 14px; height: 50px; padding: 14px 14px 2px; color: var(--a-muted); }
.a-side-top img { width: 82px; height: auto; }
.a-novo { display: flex; gap: 6px; padding: 8px 10px 6px; }
.a-btn-azul { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; background: #0071e3; color: #fff; font-weight: 600; font-size: 13px; }
.a-btn-mais { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--a-border); color: var(--a-muted); }
.a-busca { display: flex; align-items: center; gap: 8px; height: 32px; margin: 4px 10px 6px; padding: 0 10px; border-radius: 10px; background: var(--a-input); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); color: var(--a-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.a-busca .ic { width: 14px; height: 14px; }
.a-secao { margin: 10px 18px 4px; color: var(--a-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.a-ws { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 1px 8px; padding: 5px 8px; border-radius: 10px; transition: background-color .35s var(--curva), box-shadow .35s var(--curva); }
.a-ws.on { background: rgba(10, 132, 255, .16); box-shadow: inset 0 0 0 .5px rgba(10, 132, 255, .35); }
.a-ws.on b { font-weight: 600; }
.a-ws-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c) 30%, transparent); }
.a-ws-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--a-warn); box-shadow: 0 0 0 2px var(--a-surface); }
.a-ws-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.a-ws-txt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.a-badge { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.a-badge.busy { background: rgba(10, 132, 255, .18); color: #9ccfff; }
.a-badge.attn { background: rgba(255, 159, 10, .2); color: var(--a-warn); }
.a-count { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--a-hover); color: var(--a-muted); font-size: 11px; }
.a-count .ic { width: 12px; height: 12px; }
.a-config { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 18px 16px; font-size: 13px; color: var(--a-text); }
.a-config .ic { color: var(--a-muted); }

.a-tool {
  position: absolute; z-index: 4; top: 12px; left: calc(236px + (100% - 236px) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; width: max-content; padding: 4px; border-radius: 999px;
  background: var(--a-glass); box-shadow: var(--a-glass-edge), 0 6px 20px rgba(0, 0, 0, .25);
  font-size: 13px; line-height: 1; white-space: nowrap; color: var(--a-text);
}
/* Mesmas medidas da barra do app (src/renderer/src/styles.css: .toolbar, .tool-btn, .tool-sep, .icon-btn, .zoom-label). */
.a-tool > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; }
.a-tool > svg.ic { box-sizing: border-box; display: block; width: 26px; height: 26px; padding: 5px; border-radius: 999px; }
.a-tool > span .ic { width: 16px; height: 16px; }
.a-tool > i { flex: none; width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, .12); }
.a-tool b { font-weight: 500; }
.a-tool .a-zoom { min-width: 48px; padding: 0 6px; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.a-cordas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.a-cordas path { fill: none; stroke: var(--a-rope); stroke-width: 2; stroke-linecap: round; transition: stroke .3s ease, stroke-width .3s ease; }
.a-cordas path.transfer { stroke: var(--a-accent); stroke-width: 4; transition-duration: .12s; }

.a-node {
  position: absolute; z-index: 2; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w, 330) * 1px);
  display: flex; flex-direction: column;
  background: var(--a-surface); border-radius: 10px; box-shadow: var(--a-shadow);
  touch-action: none; user-select: none;
  transition: box-shadow .2s ease;
}
.a-node[data-no] { cursor: grab; }
.a-node.arrastando { cursor: grabbing; z-index: 5; box-shadow: var(--a-shadow-sel), 0 0 0 2px rgba(10, 132, 255, .55); }
.a-head {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 8px; flex: none;
  background: var(--a-surface-2); border-radius: 10px 10px 0 0;
  font-size: 12.5px; white-space: nowrap;
}
.a-head > .ic { width: 15px; height: 15px; opacity: .8; }
.a-title { flex: none; font-weight: 600; }
.a-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; background: #7b8392; }
.a-dot.busy { background: var(--a-ok); }
.a-dot.busy::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: rgba(48, 209, 88, .6); animation: pulso-a 1.1s ease-in-out infinite; }
.a-dot.attn { background: var(--a-warn); }
.a-dot.run { background: var(--a-accent); }
@keyframes pulso-a { 0%, 100% { transform: scale(.47); opacity: 1; } 50% { transform: scale(1); opacity: 0; } }
.a-flag { padding: 1px 7px; border-radius: 9px; font-size: 10.5px; font-weight: 600; line-height: 1.5; color: #ffc46b; background: rgba(255, 159, 10, .16); }
.a-pill {
  margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--a-border); background: rgba(10, 132, 255, .1); color: var(--a-text);
  font-size: 11px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.a-acts { display: flex; align-items: center; color: var(--a-muted); }
.a-acts .ic { box-sizing: content-box; width: 15px; height: 15px; padding: 5px; border-radius: 7px; }
.a-acts .ic.on { color: var(--a-warn); }
.a-body { position: relative; background: var(--a-term); border-radius: 0 0 10px 10px; padding: 10px 12px 8px; font: 400 11.5px/1.55 var(--mono); color: #d4d4d8; overflow: hidden; }
.a-log { min-height: 108px; font: inherit; white-space: pre-wrap; }
.c-g { color: #4ec970; }
.c-b { color: #f5f5f7; }
.c-o { color: #d97757; }
.c-m { color: #8b8b93; }
.c-y { color: #e5c07b; }
.m-mais { color: #4ec970; }
.m-menos { color: #f07178; }
.m-cursor { display: inline-block; width: 7px; height: 1.15em; vertical-align: -3px; background: #d4d4d8; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.cc-in { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 0; border-block: 1px solid #3f3f46; color: #d4d4d8; }
.cc-in .m-cursor { width: 6px; }
.cc-modo { padding: 4px 0 0 12px; color: #d97757; }
.cc-modo span { color: #8b8b93; }
.cx-in { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: #26262a; color: #8b8b93; }
.cx-modo { padding: 5px 0 0 2px; color: #8b8b93; }
.a-handle { position: absolute; right: -8px; top: 50%; z-index: 3; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--a-surface); border-radius: 50%; background: var(--a-accent); opacity: .55; }
.a-asking { box-shadow: 0 0 0 2px rgba(255, 159, 10, .75), var(--a-shadow); }
.a-asking::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; box-shadow: 0 0 0 6px rgba(255, 159, 10, .28); animation: halo 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes halo { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

.a-nota { --nb: #fff9c4; --nf: #5d4037; width: calc(var(--w, 212) * 1px); background: var(--nb); color: var(--nf); }
.a-nota .a-head { background: color-mix(in srgb, var(--nb), var(--nf) 10%); color: var(--nf); }
.a-nota p { padding: 10px 12px 12px; font-size: 12.5px; line-height: 1.5; }

.a-notch {
  position: absolute; z-index: 4; right: 0; top: 130px; width: 58px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--a-glass); border-radius: 14px 0 0 14px; box-shadow: var(--a-glass-edge), 0 6px 20px rgba(0, 0, 0, .3);
}
.a-notch i.sep { width: 26px; height: 1px; background: rgba(255, 255, 255, .12); }
.a-ring { --c: var(--a-accent); position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.a-ring.alto { --c: var(--a-warn); }
.a-ring > svg { width: 36px; height: 36px; }
.a-ring circle { fill: none; stroke-width: 3; }
.a-ring .tr { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .14); }
.a-ring .br { stroke: var(--c); stroke-linecap: round; stroke-dasharray: calc(var(--p-vivo, var(--p)) * 1px) 100px; }
.a-ring-ic { position: absolute; top: 10px; left: 50%; display: grid; place-items: center; width: 16px; height: 16px; margin-left: -8px; color: var(--a-text); }
.a-ring.alto .a-ring-ic { color: var(--a-warn); }
.a-ring-ic .ic { width: 15px; height: 15px; }
.a-ring-ic .claude { width: 15px; height: 15px; fill: #d97757; }
.a-ring b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.a-info {
  position: absolute; z-index: 4; left: 248px; right: 12px; bottom: 10px;
  display: flex; align-items: center; height: 32px; padding: 0 6px 0 10px; border-radius: 12px;
  background: var(--a-glass); box-shadow: var(--a-glass-edge), 0 6px 20px rgba(0, 0, 0, .25);
  font-size: 11.5px; white-space: nowrap; color: var(--a-muted); overflow: hidden;
}
.a-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; }
.a-chip + .a-chip { border-left: 1px solid rgba(255, 255, 255, .1); }
.a-chip .ic { width: 13px; height: 13px; }
.a-chip b { color: var(--a-text); font-weight: 600; }
.a-chip.warn b, .a-chip.warn .ic { color: var(--a-warn); }
.a-chip .a-dot { width: 7px; height: 7px; }
.a-info-fim { margin-left: auto; display: flex; gap: 10px; padding-right: 4px; }

.t-maestro { --x: 276; --y: 96; --w: 340; }
.t-frente { --x: 780; --y: 96; --w: 330; }
.t-testes { --x: 756; --y: 400; --w: 352; }
.n-prazo { --x: 300; --y: 450; --w: 216; }

/* Faixa de compatibilidade */
.faixa { padding-block: 44px; }
.faixa-in { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.faixa .rotulo { margin: 0; font-size: 14px; color: var(--texto-3); }
.faixa-logos { display: flex; flex-wrap: wrap; gap: 16px 44px; }
.faixa-logos li { display: flex; align-items: center; gap: 10px; font: 500 17px/1 var(--sans); letter-spacing: -.015em; color: #b9bac1; transition: color .3s; }
.faixa-logos li:hover { color: var(--texto); }
.faixa-logos .ic { width: 22px; height: 22px; color: currentColor; }

/* Problema */
.problema { padding-block: 200px; }
.problema-txt {
  margin-top: 28px; max-width: 24ch;
  font: 500 clamp(30px, 4.6vw, 60px)/1.12 var(--sans); letter-spacing: -.035em; color: var(--texto);
}
.js .problema-txt .p { color: var(--apagado); transition: color .45s var(--curva); }
.js .problema-txt .p.on { color: var(--texto); }

/* Como funciona: figura fixa no meio da tela enquanto os passos rolam */
.como-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.passos { display: flex; flex-direction: column; }
.passo { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 0 0 28px; display: flex; flex-direction: column; justify-content: center; }
.passo { min-height: 80vh; min-height: 80svh; }
.passo:last-child { min-height: 100vh; min-height: 100svh; }
.passo-n {
  position: absolute; left: calc(var(--gut) * -.55 - 20px); top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--texto-3); background: var(--fundo); border: 1px solid var(--linha-2);
  transition: color .45s, border-color .45s, background-color .45s, transform .5s var(--mola);
}
.passo h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; color: var(--texto-3); transition: color .45s var(--curva), transform .6s var(--curva); transform: translateX(-6px); }
.passo p { margin-top: 12px; max-width: 42ch; color: var(--texto-3); transition: color .45s var(--curva), transform .6s var(--curva); transform: translateX(-6px); }
.passo.ativo h3 { color: var(--texto); transform: none; }
.passo.ativo p { color: var(--texto-2); transform: none; }
.passo.ativo .passo-n { color: #08130e; background: var(--verde); border-color: var(--verde); transform: scale(1.08); }
.como-fixo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.como-fixo .fig { margin-top: 0; width: 100%; max-width: calc((100svh - 140px) * 7 / 6); margin-inline: auto; }
.como-cont { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.como-cont b { color: var(--texto); font-weight: 600; }
.como-barra { display: flex; gap: 4px; }
.como-barra i { position: relative; width: 22px; height: 3px; border-radius: 2px; background: var(--linha-2); overflow: hidden; }
.como-barra i::after { content: ''; position: absolute; inset: 0; background: var(--verde-vivo); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); }
.telas { position: relative; aspect-ratio: 7 / 6; background: var(--a-canvas); overflow: hidden; }
.tela { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0) scale(.985); transition: opacity .5s var(--curva), transform .7s var(--curva), visibility 0s .5s; }
.tela.ativa { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tela .estagio { --pw: 620; --ph: 531; }
.tela [data-entra] { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--curva), transform .6s var(--curva); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.tela.ativa [data-entra] { opacity: 1; transform: none; }

.tela-ws .a-side { width: 262px; border-radius: 0 14px 14px 0; }
.tela-ws .a-mini { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); }
.a-mini .a-body { padding: 8px 10px; font-size: 10.5px; }
.a-mini .a-log { min-height: 0; }
.tela-corda .a-node { --w: 262; }
.tela-corda .a-log { min-height: 62px; }
.tc-a { --x: 34; --y: 70; }
.tc-b { --x: 322; --y: 286; }
.tela-corda .a-cordas path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tela-corda.ativa .a-cordas path { animation: puxa 1s .35s var(--curva) forwards, solta .2s 1.35s forwards, transfere 1.1s 1.7s ease-in-out; }
.tela-corda .tc-b .a-handle-in { position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--a-surface); border-radius: 50%; background: var(--a-accent); opacity: 0; transition: opacity .2s 1.3s; }
.tela-corda.ativa .tc-b .a-handle-in { opacity: .9; }
.tela-corda .tc-a .a-handle { opacity: 1; animation: pulso-h 1.2s ease-in-out infinite; }
.tela-corda .tc-b .a-log span { opacity: 0; transition: opacity .3s; }
.tela-corda.ativa .tc-b .a-log span { opacity: 1; transition-delay: calc(1.9s + var(--i, 0) * .45s); }
@keyframes puxa { to { stroke-dashoffset: 0; } }
@keyframes solta { from { stroke: var(--a-accent); } to { stroke: var(--a-rope); } }
@keyframes transfere { 0%, 100% { stroke: var(--a-rope); stroke-width: 2; } 30%, 70% { stroke: var(--a-accent); stroke-width: 4; } }
@keyframes pulso-h { 50% { transform: scale(1.25); } }
.tela-corda .a-cordas path.previa { stroke: var(--a-accent); stroke-dasharray: 6 5; animation: none; opacity: 0; }

.tela-fim picture { position: absolute; inset: 5%; display: flex; justify-content: center; }
.tela-fim img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 .5px rgba(255, 255, 255, .1); }
.tela-fim picture { transform: translate3d(0, 24px, 0) scale(.96); transition: transform .9s var(--curva) .1s; }
.tela-fim.ativa picture { transform: none; }

/* Recursos: bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cartao {
  position: relative; overflow: hidden; padding: 28px;
  background: var(--vidro); border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--vidro-borda);
  isolation: isolate;
}
/* Hover dos painéis: sobem um pouco e acendem a borda clara do app (num ::after que só muda opacity). */
.cartao, .comp, .plano { transition: transform .26s cubic-bezier(.2, .8, .2, 1), border-color .26s, box-shadow .26s; }
.cartao::after, .comp::after, .plano::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: opacity .26s;
}
.cartao:hover, .comp:hover, .plano:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 50px -28px rgba(0, 0, 0, .85); }
.plano-dest:hover { box-shadow: 0 0 0 1px var(--verde), 0 30px 80px -40px rgba(57, 147, 109, .55); }
.cartao:hover::after, .comp:hover::after, .plano:hover::after { opacity: 1; }
.cartao h3 { margin-top: 14px; }
.cartao p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
.cartao-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; font: 500 13px/1.4 var(--sans) !important; color: var(--texto-2); }
.cartao-tag .ic { width: 16px; height: 16px; color: var(--verde-vivo); }
.cartao-txt { max-width: 44ch; }
.cartao .app { background-image: none; background-color: transparent; }

.c-notch { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.c-notch h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.08; }
.notch-demo { display: flex; align-items: center; gap: 14px; }
.notch-demo .a-notch { position: relative; top: auto; right: auto; border-radius: 14px; flex: none; }
.nx-painel {
  width: 100%; max-width: 300px; padding: 14px; border-radius: 10px;
  background: var(--a-surface); box-shadow: var(--a-shadow); font-size: 12.5px; color: var(--a-text);
}
.nx-painel h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.nx-painel h4 .claude { width: 15px; height: 15px; fill: #d97757; }
.nx-painel h4 span { margin-left: auto; padding: 0 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--a-muted); font-size: 11px; font-weight: 500; line-height: 18px; }
.nx-linha { margin-top: 12px; }
.nx-linha div { display: flex; justify-content: space-between; color: var(--a-muted); }
.nx-linha div b { color: var(--a-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-bar { height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.nx-bar i { display: block; height: 100%; border-radius: 99px; background: var(--a-accent); transform-origin: 0 50%; transform: scaleX(calc(var(--p-vivo, var(--p)) / 100)); }
.nx-bar.alto i { background: var(--a-warn); }
.nx-custo { margin-top: 14px; padding-top: 12px; border-top: .5px solid var(--a-border); display: grid; gap: 6px; }
.nx-custo div { display: flex; justify-content: space-between; color: var(--a-muted); }
.nx-custo b { color: var(--a-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.c-perg { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: 22px; }
.c-perg-img { margin-top: auto; width: 100%; max-width: 380px; }
.c-perg-img img { width: 100%; border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .12); }

.c-mod, .c-chat, .c-div { grid-column: span 2; display: flex; flex-direction: column; }
.cabs { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.cabs .a-head { border-radius: 10px; box-shadow: var(--a-shadow); transition: transform .5s var(--curva); }
.cabs .a-head:nth-child(2) { margin-left: 14px; }
.cabs .a-head:nth-child(3) { margin-left: 28px; }
.c-mod:hover .cabs .a-head:nth-child(2) { transform: translateX(-7px); }
.c-mod:hover .cabs .a-head:nth-child(3) { transform: translateX(-14px); }
.chat-demo { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--a-term); box-shadow: var(--a-shadow); font-size: 12.5px; }
.cd-msg { align-self: flex-end; max-width: 85%; padding: 7px 11px; border-radius: 12px 12px 4px 12px; background: var(--a-accent); color: #fff; }
.cd-passos { display: flex; flex-direction: column; gap: 5px; padding-left: 14px; border-left: 1px solid var(--a-border); color: var(--a-muted); }
.cd-passos span { position: relative; }
.cd-passos span::before { content: ''; position: absolute; left: -18px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--a-ok); }
.cd-passos .cd-agora { color: var(--a-text); }
.cd-passos .cd-agora::before { background: var(--a-accent); }
.cd-cod { display: block; padding: 8px 10px; border-radius: 8px; background: #26262a; font: 400 11.5px/1.5 var(--mono); color: #d4d4d8; }
.cd-cod .k { color: #c792ea; }
.cd-cod .s { color: #c3e88d; }

.div-demo { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 150px; box-sizing: content-box; }
.div-demo > div { position: relative; border-radius: 8px; background-color: var(--a-canvas); background-image: linear-gradient(var(--a-grid) 1px, transparent 1px), linear-gradient(90deg, var(--a-grid) 1px, transparent 1px); background-size: 12px 12px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1); }
.div-demo > div:first-child { box-shadow: 0 0 0 1.5px var(--a-accent); }
.div-demo .a-node { --w: 96; transform-origin: 0 0; }
.div-demo .a-head { height: 16px; padding: 0 4px; gap: 4px; font-size: 8px; border-radius: 5px 5px 0 0; }
.div-demo .a-node { border-radius: 5px; }
.div-demo .a-head .a-dot { width: 5px; height: 5px; }
.div-demo .a-body { height: 30px; border-radius: 0 0 5px 5px; padding: 0; }
.div-tab { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: var(--a-glass); box-shadow: var(--a-glass-edge); font-size: 9px; color: var(--a-text); }
.div-tab .ic { width: 9px; height: 9px; color: #ffd60a; }
.div-demo > div:last-child .div-tab .ic { color: var(--a-accent); }

.c-cel { grid-column: span 6; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding-block: 36px 0; min-height: 300px; }
.c-cel .cartao-txt { align-self: center; padding-bottom: 36px; }
.c-cel h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; }
.iphone {
  align-self: end; width: 250px; height: 300px; padding: 10px 10px 0; overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .5); border-bottom: 0; border-radius: 40px 40px 0 0;
  margin-right: 40px; transition: transform .6s var(--curva);
}
.c-cel:hover .iphone { transform: translateY(-8px); }
.iphone picture { border-radius: 30px 30px 0 0; overflow: hidden; }
.iphone img { width: 100%; }

/* Honestidade */
.compara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.comp { position: relative; padding: 28px; border-radius: 18px; border: 1px solid var(--linha); background: var(--vidro); box-shadow: var(--vidro-borda); display: flex; flex-direction: column; gap: 28px; }
.comp-dentro { border-color: rgba(57, 147, 109, .45); background: linear-gradient(180deg, rgba(57, 147, 109, .06), transparent 60%), var(--vidro); }
.comp-tit { display: flex; align-items: center; gap: 10px; font: 600 14px/1.4 var(--sans); color: var(--texto); }
.wt { height: 170px; border-radius: 10px; background: #0c0c0c; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14); overflow: hidden; font-size: 11.5px; }
.wt-abas { display: flex; overflow: hidden; gap: 2px; padding: 6px 6px 0; background: #202020; }
.wt-abas span { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; padding: 6px 8px; border-radius: 7px 7px 0 0; color: #9a9aa0; white-space: nowrap; overflow: hidden; }
.wt-abas span .ic { width: 12px; height: 12px; flex: none; }
.wt-abas .on { background: #0c0c0c; color: #f2f2f2; }
.wt-abas .q i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a-warn); opacity: .6; }
.wt pre { padding: 12px; font: 400 11.5px/1.6 var(--mono); color: #cccccc; white-space: pre-wrap; }
.mini-canvas { position: relative; height: 170px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14); }
.mini-canvas.app { background-size: 14px 14px; }
.mini-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-canvas svg path { fill: none; stroke: var(--a-rope); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mini-canvas .a-node { width: 34%; border-radius: 6px; left: var(--l); top: var(--t); }
.mini-canvas .a-head { height: 20px; padding: 0 6px; gap: 5px; font-size: 9.5px; border-radius: 6px 6px 0 0; }
.mini-canvas .a-head .a-dot { width: 6px; height: 6px; }
.mini-canvas .a-body { height: 34px; padding: 5px 7px; border-radius: 0 0 6px 6px; font-size: 8.5px; line-height: 1.4; }
.comp-dados { display: flex; flex-direction: column; font-size: 14px; }
.comp-dados li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.comp-dados span { color: var(--texto-3); }
.comp-dados b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.comp-fora .comp-dados b { color: var(--texto-2); font-weight: 500; }

/* Ritmo / changelog */
.ritmo-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.ritmo .sec-cab { margin-bottom: 0; }
.changelog { border-top: 1px solid var(--linha); }
.changelog li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--linha); transition: background-color .3s; }
.changelog time { font-size: 14px; font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.changelog li:first-child time { color: var(--verde-vivo); }
.changelog p { color: var(--texto-2); }

/* Preço */
.seletor { display: none; margin: 0 auto 28px; width: max-content; padding: 4px; border-radius: 999px; background: var(--vidro); border: 1px solid var(--linha); box-shadow: var(--vidro-borda); }
.seletor button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--texto-2); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background-color .25s, color .25s; }
.seletor button[aria-pressed="true"] { background: var(--fundo-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-2); }
.selo { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.4 var(--sans); letter-spacing: 0; color: var(--verde-vivo); background: rgba(57, 147, 109, .14); border: 1px solid rgba(57, 147, 109, .35); }
.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 16px; }
.plano { position: relative; padding: 32px; border-radius: 20px; background: var(--vidro); box-shadow: var(--vidro-borda); border: 1px solid var(--linha); display: flex; flex-direction: column; }
.plano-dest { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), 0 30px 80px -40px rgba(57, 147, 109, .45); }
.plano-nome { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 15px/1.4 var(--sans); letter-spacing: -.01em; color: var(--texto); }
.plano-valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 26px; color: var(--texto); }
.plano-valor .moeda { font: 600 20px/1 var(--sans); color: var(--texto-2); }
.plano-valor .num { font: 600 clamp(50px, 5vw, 66px)/1 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.plano-valor .per { font: 400 15px/1 var(--sans); color: var(--texto-3); }
.riscado { margin-left: 8px; font: 400 15px/1 var(--sans); color: var(--texto-3); }
.plano-nota { margin-top: 10px; font-size: 15px; min-height: 3.2em; }
.plano .botao { margin-top: 24px; }
.plano-lista { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.plano-lista li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-2); }
.plano-lista .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--verde-vivo); }
.preco-miuda { margin-top: 24px; text-align: center; font-size: 14px; color: var(--texto-3); }
.preco-porque { max-width: 816px; margin: 40px auto 0; padding: 20px 24px; border-radius: 14px; border: 1px dashed var(--linha-2); font-size: 15.5px; text-align: center; }
.preco-porque b { color: var(--texto); font-weight: 600; }
.troca { animation: troca .35s var(--curva); }
@keyframes troca { from { opacity: 0; transform: translateY(12px); } }

.oferta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
  width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 10px 18px; border-radius: 999px;
  background: rgba(57, 147, 109, .1); border: 1px solid rgba(57, 147, 109, .4); font-size: 15px; color: var(--texto-2); text-align: center;
}
.oferta[hidden] { display: none; }
.oferta b { color: var(--texto); font-weight: 600; }
.oferta-vagas { font-size: 13.5px; font-weight: 500; color: var(--verde-vivo); font-variant-numeric: tabular-nums; }
.oferta-vagas b { color: var(--verde-vivo); }
.gratis {
  display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 12px 28px;
  max-width: 816px; margin: 16px auto 0; padding: 20px 28px; border-radius: 16px; border: 1px solid var(--linha);
}
.gratis-cab { display: flex; flex-direction: column; gap: 6px; }
.gratis-valor { font-size: 14px; color: var(--texto-3); }
.gratis-valor b { color: var(--texto); font-size: 18px; font-weight: 600; margin-right: 4px; }
.gratis-txt { font-size: 14.5px; line-height: 1.55; color: var(--texto-3); }
.gratis-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--texto-2); text-decoration: none; white-space: nowrap; }
.gratis-link .ic { width: 16px; height: 16px; transition: transform .3s var(--mola); }
.gratis-link:hover { color: var(--texto); }
.gratis-link:hover .ic { transform: translateX(4px); }

/* FAQ */
.faq-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.faq-lado { position: sticky; top: 120px; align-self: start; }
.faq-lado .sec-sub a { color: var(--verde-vivo); }
.faq-lista { border-top: 1px solid var(--linha); }
.faq-lista details { border-bottom: 1px solid var(--linha); }
.faq-lista summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 500 18px/1.35 var(--sans); letter-spacing: -.015em; color: var(--texto);
  transition: color .2s;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary .ic { color: var(--texto-3); transition: transform .4s var(--curva), color .2s; }
.faq-lista details[open] summary .ic { transform: rotate(180deg); }
.faq-lista summary:hover .ic { color: var(--texto); }
.faq-lista details p { padding: 0 48px 24px 0; max-width: 64ch; }
.faq-lista details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--curva), content-visibility .4s allow-discrete; }
.faq-lista details[open]::details-content { block-size: auto; }

/* Chamada final */
.final { padding-block: 200px 220px; text-align: center; }
.final-in { display: flex; flex-direction: column; align-items: center; }
.final h2 { margin: 0; font-size: clamp(40px, 7.6vw, 112px); line-height: .98; letter-spacing: -.045em; }
.final-botao { margin-top: 56px; }
.final .miuda { margin-top: 18px; }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); padding-top: 72px; overflow: hidden; }
.rodape-grade { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.rodape-marca p { margin-top: 14px; font-size: 14px; color: var(--texto-3); }
.rodape-marca .versao { margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rodape-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.rodape-col p { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--texto); }
.rodape-col a { text-decoration: none; color: var(--texto-2); width: max-content; transition: color .2s; }
.rodape-col a:hover { color: var(--texto); }
/* Letras em tinta clara que some para baixo; as bolinhas verdes acendem quando o rodapé aparece (main.js). */
.rodape-wordmark {
  width: calc(100% - 2 * var(--gut)); max-width: 1500px; margin: 72px auto -4vw;
  -webkit-mask-image: linear-gradient(#000 25%, transparent 95%); mask-image: linear-gradient(#000 25%, transparent 95%);
}
.rodape-wordmark path { fill: rgba(226, 242, 234, .12); }
.rodape-wordmark circle { fill: var(--verde-vivo); opacity: .2; transition: opacity 1.2s var(--curva) .2s; }
.rodape-wordmark.aceso circle { opacity: .45; }
.rodape-wordmark.aceso circle:last-of-type { transition-delay: .5s; }
.contato { font-size: .95em; color: var(--texto-2); }

.preco-miuda a { color: var(--texto-2); text-underline-offset: 3px; margin-left: 6px; white-space: nowrap; }
.preco-miuda a:hover { color: var(--texto); }

/* Páginas legais */
.legal { padding-top: 140px; padding-bottom: 120px; max-width: calc(68ch + 2 * var(--gut)); }
.legal-aviso {
  margin-bottom: 48px; padding: 16px 20px; border-radius: 12px;
  background: rgba(232, 163, 61, .12); border: 1px solid rgba(232, 163, 61, .55);
  color: #f3c27a; font-size: 16px;
}
.prosa { font-size: 17px; line-height: 1.65; }
.prosa h1 { font: 600 clamp(34px, 5vw, 52px)/1.06 var(--sans); letter-spacing: -.04em; color: var(--texto); }
.prosa h1 + p { margin-top: 14px; font: 400 14px/1.5 var(--sans); color: var(--texto-3); }
.prosa h2 { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: 26px; line-height: 1.2; letter-spacing: -.025em; scroll-margin-top: 90px; }
.prosa h3 { margin-top: 32px; font-size: 19px; scroll-margin-top: 90px; }
.prosa p, .prosa ul, .prosa .tabela { margin-top: 16px; }
.prosa ul { padding-left: 1.2em; list-style: disc; }
.prosa li { margin-top: 8px; }
.prosa li::marker { color: var(--verde); }
.prosa strong { color: var(--texto); font-weight: 600; }
.prosa a { color: var(--verde-vivo); text-underline-offset: 3px; }
.prosa a.botao { color: #08130e; text-decoration: none; }
.prosa code { font: 400 .88em var(--mono); padding: 2px 6px; border-radius: 5px; background: var(--fundo-2); border: 1px solid var(--linha); color: var(--texto); }
.prosa mark { background: rgba(232, 163, 61, .14); color: #f3c27a; padding: 0 4px; border-radius: 4px; }
.tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prosa th, .prosa td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.prosa th { font: 600 13px/1.4 var(--sans); color: var(--texto-2); background: var(--fundo-2); }
.prosa tr:last-child td { border-bottom: 0; }
.prosa td:first-child { color: var(--texto); }
.rodape-fim { height: 72px; }

/* Responsivo */
@media (max-width: 1080px) {
  .topo-links a { padding: 8px 9px; }
}
@media (max-width: 900px) {
  :root { --sec: 112px; }
  .topo-links { display: none; }
  .topo-esq { padding-right: 18px; }
  .como-grade, .ritmo-grade, .faq-grade { grid-template-columns: 1fr; gap: 40px; }
  .faq-lado { position: static; }
  /* Celular: a figura gruda no topo, menor, e os passos rolam embaixo dela. */
  .como-grade { gap: 0; }
  .como-fixo { top: 64px; height: auto; order: -1; z-index: 2; display: block; padding: 10px 0 16px; background: linear-gradient(rgba(14, 15, 18, .78) 85%, transparent); }
  .como-fixo .fig { max-width: 520px; }
  .passo, .passo:first-child { min-height: 58vh; min-height: 58svh; padding-top: 0; justify-content: center; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-notch, .c-cel { grid-column: span 2; }
  .c-notch { grid-row: auto; }
  .c-perg { grid-column: span 2; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .c-perg .cartao-txt { align-self: center; padding-bottom: 28px; }
  .c-mod, .c-chat { grid-column: span 1; }
  .c-div { grid-column: span 2; }
}
/* Tela baixa demais para a figura grudada mais o texto: vira figura comum, sem sticky. */
@media (max-width: 900px) and (max-height: 700px) {
  .como-fixo { position: relative; top: auto; }
}
@media (max-width: 700px) {
  :root { --gut: 20px; --sec: 96px; }
  .hero { padding-top: 120px; padding-bottom: 80px; }
  .fig { margin-top: 56px; }
  .so-desk { display: none; }

  .palco-moldura { --pw: 560; --ph: 850; aspect-ratio: 560 / 850; }
  .a-side.so-desk-palco, .n-prazo, .a-info { display: none; }
  #palco .a-tool { left: 50%; top: 12px; }
  #palco .a-tool > span { padding: 0 6px; }
  #palco .a-tool > span b { display: none; }
  #palco .a-tool .so-desk { display: none; }
  .t-maestro { --x: 20; --y: 72; --w: 440; }
  .t-frente { --x: 40; --y: 370; --w: 420; }
  .t-testes { --x: 20; --y: 610; --w: 440; }
  #palco .a-notch { top: 330px; }
  #palco .a-body { font-size: 13px; }
  #palco .a-head { height: 34px; font-size: 13.5px; }
  #palco .a-pill { font-size: 12px; height: 22px; }
  #palco .a-log { min-height: 0; }
  .problema { padding-block: 120px; }
  .sec-cab { margin-bottom: 48px; }
  .passo { padding-left: 16px; }
  .passo-n { width: 26px; height: 26px; font-size: 10px; left: calc(var(--gut) * -.55 - 13px); }
  .bento { grid-template-columns: 1fr; }
  .c-notch, .c-perg, .c-mod, .c-chat, .c-div, .c-cel { grid-column: auto; }
  .cartao { padding: 24px; }
  .c-perg { display: flex; }
  .topo-entrar { display: none; }
  .notch-demo .a-notch { transform: scale(.92); transform-origin: 0 50%; }
  .c-cel { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .c-cel .cartao-txt { padding-bottom: 28px; }
  .iphone { margin: 0 auto; width: 220px; height: 240px; }
  .compara { grid-template-columns: minmax(0, 1fr); }
  .changelog li { grid-template-columns: 1fr; gap: 6px; }
  .seletor { display: flex; }
  .planos { grid-template-columns: minmax(0, 1fr); }
  .planos[data-mostra="anual"] .plano[data-plano="mensal"],
  .planos[data-mostra="mensal"] .plano[data-plano="anual"] { display: none; }
  .plano { padding: 26px 22px; }
  .gratis { grid-template-columns: 1fr; padding: 20px 22px; }
  .oferta { border-radius: 16px; }
  .faq-lista summary { font-size: 17px; }
  .faq-lista details p { padding-right: 0; }
  .final { padding-block: 120px 140px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: span 2; }
  .legal { padding-top: 110px; }
  .prosa th, .prosa td { padding: 10px; }
  section + section::before, section + section::after { display: none; }
}
@media (max-width: 400px) {
  .acoes { flex-direction: column; align-self: stretch; }
  .acoes .botao { width: 100%; }
  .topo-dir .botao { padding: 0 14px; }
}
@media (min-width: 1800px) {
  body { font-size: 18px; }
  .caixa { max-width: 1360px; }
  .topo { max-width: 1360px; }
  section + section::before { left: calc(50% - 680px + var(--gut) * .45); }
  section + section::after { right: calc(50% - 680px + var(--gut) * .45); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-revela], .js [data-linhas] .l > span, .tela [data-entra], .tela-fim picture { opacity: 1; transform: none; }
  .js .problema-txt .p { color: var(--texto); }
  .tela { transform: none; }
  .cartao:hover, .comp:hover, .plano:hover, .botao-p:hover, .botao-f:hover { transform: none; }
  .tela-corda .a-cordas path { stroke-dashoffset: 0; }
  .tela-corda .tc-b .a-log span, .tela-corda .tc-b .a-handle-in { opacity: 1; }
  .corda-ponta, .a-dot.busy::after { display: none; }
}