/* Landing do Tesseract. Só tema claro (o escuro fica no app). Tokens do DESIGN_SYSTEM.md. */
:root {
  --bg: #F7F4EC; --panel: #FBF9F3; --card: #FFFDF8; --raised: #EFEBE0;
  --line: #E4DED0; --line-strong: #D3CBB8;
  --fg: #142057; --muted: #46547E; --faint: #5E6990;
  --accent: #2238C4; --accent-strong: #1A2DA6; --accent-soft: #E3E6F8; --on-accent: #F7F4EC;
  --serif: 'Libre Baskerville', 'Iowan Old Style', Baskerville, Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 68px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { display: block; max-width: 100% }
a { color: var(--accent) }
em { font-style: italic; color: var(--accent) }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 100 }
.skip:focus { left: 8px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.scene { width: 100%; height: 100%; object-fit: cover }

/* Navegação */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .4s }
.nav.scrolled { border-color: var(--line) }
.nav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: var(--nav-h) }
.nav-row .brand { justify-self: start }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--accent); font-family: var(--serif); font-size: 20px }
.brand img { width: 32px; height: 32px; object-fit: contain }
.brand.small { font-size: 16px } .brand.small img { width: 22px; height: 22px }
.nav-links { display: flex; gap: 30px }
.nav-links a { color: var(--fg); text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s }
.nav-links a:hover { border-color: var(--accent); color: var(--accent) }
.nav-actions { display: flex; align-items: center; gap: 14px; justify-self: end }
/* Selo de estrelas do GitHub: ícone, estrela e a contagem (main.js lê da API do GitHub). */
.gh-stars { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--fg); background: color-mix(in srgb, var(--card) 70%, transparent); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s, border-color .25s, color .25s }
.gh-stars:hover, .gh-stars:focus-visible { background: #142057; border-color: #142057; color: #fff }
.gh-stars svg { flex: none; width: 19px; height: 19px }
.gh-star { color: #E3A008; font-size: 16px; line-height: 1 }
.gh-stars [data-gh-count] { font-variant-numeric: tabular-nums }

/* Seletor de idioma: caixa com a bandeira e a sigla; ao clicar, os idiomas aparecem em lista vertical.
   Mesmo tamanho e mesmo azul-escuro ao passar o mouse que o selo do GitHub. */
.lang { position: relative }
.lang .flag { width: 21px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(20, 32, 87, .14) }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px 0 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--fg); font: 600 12.5px var(--mono); letter-spacing: .14em; cursor: pointer; transition: background .25s, border-color .25s, color .25s }
.lang-btn:hover, .lang-btn:focus-visible, .lang-btn[aria-expanded='true'] { background: #142057; border-color: #142057; color: #fff }
.lang-chev { width: 12px; height: 12px; transition: transform .3s var(--ease) }
.lang-btn[aria-expanded='true'] .lang-chev { transform: rotate(180deg) }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; min-width: 180px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); box-shadow: 0 18px 40px -18px rgba(20, 32, 87, .35); animation: lang-in .22s var(--ease) }
.lang-menu[hidden] { display: none }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 7px; color: var(--fg); font-size: 14.5px; text-decoration: none; cursor: pointer; transition: background .2s, color .2s }
.lang-menu a:hover, .lang-menu a:focus-visible { background: #142057; color: #fff; outline: none }
.lang-menu a[aria-current='page'] { font-weight: 600 }
.lang-menu a[aria-current='page']::after { content: '✓'; margin-left: auto; font-size: 13px }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: background .25s, transform .35s var(--ease), border-color .25s, box-shadow .35s; white-space: nowrap }
/* <button class="btn">: tira a borda e a fonte padrão do navegador, mostra a mãozinha. */
button.btn { border: 0; font-family: inherit; cursor: pointer; appearance: none }
.btn { cursor: pointer }
.btn-lg { height: 50px; padding: 0 24px; font-size: 14px }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent) }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent) }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--fg); background: color-mix(in srgb, var(--card) 70%, transparent) }
.is-disabled { opacity: .78; cursor: default; pointer-events: none }

/* Tipografia */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.015em }
h1 { font-size: clamp(40px, 5.6vw, 74px); line-height: 1.05 }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.1 }
h3 { font-size: 22px; line-height: 1.25 }
.eyebrow { margin: 0 0 18px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 12px }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor }
.lead { margin: 24px 0 0; font-size: 18px; color: var(--muted); max-width: 540px }
.section-lead { margin: 18px 0 0; font-size: 17px; color: var(--muted); max-width: 560px }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px }

/* Janela do app. A captura já traz a barra de título do Windows: nenhuma barra extra. */
.window { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--card); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 50px 110px -40px color-mix(in srgb, var(--accent) 45%, transparent), 0 18px 40px -24px rgba(20, 32, 87, .25) }
.window { aspect-ratio: 1568 / 778 }
.caption { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--faint) }

/* Seções comuns */
.section { padding: 120px 0; border-top: 1px solid var(--line) }

.roadmap { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--line-strong) }
.roadmap li { display: grid; grid-template-columns: 150px 130px minmax(0, 1fr); align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--muted) }
.roadmap b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--fg) }
.pill { justify-self: start; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted) }
.pill.now { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.pill.done { background: var(--accent-soft); border-color: transparent; color: var(--accent) }

.final { position: relative; overflow: hidden; padding: 160px 0; text-align: center; border-top: 1px solid var(--line) }
.final-scene { position: absolute; inset: 0; image-rendering: pixelated }
.scrim-center { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 65% at 50% 52%, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 45%, color-mix(in srgb, var(--bg) 25%, transparent) 100%) }
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center }
.final-logo { width: 140px; height: 140px; object-fit: contain; margin-bottom: 24px }
.final .btn { margin-top: 34px }

/* Página de download: hero com cena à direita e névoa do lado do texto; planos logo abaixo, revelados no scroll. */
.dl-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line) }
.dl-art { position: absolute; top: 0; right: 0; width: 58%; height: 100% }
.dl-art .scene { object-position: center 35% }
.dl-mist { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 40%, color-mix(in srgb, var(--bg) 85%, transparent) 55%, transparent 85%) }
/* Altura ~80% da tela: o hero respira e a borda dos planos ainda aparece embaixo, convidando a rolar. */
.dl-inner { position: relative; min-height: min(80vh, 820px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: calc(var(--nav-h) + 48px) 0 112px }
.dl-inner h1 { max-width: 640px; font-size: clamp(40px, 4.4vw, 62px) }
.dl-inner .lead { margin-top: 18px }
.dl-inner .cta-row { margin-top: 28px }
/* Convite para rolar: fica no pé do hero e pulsa devagar até os planos. */
.dl-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent) }
.dl-cue:hover { color: var(--accent) }
.dl-cue svg { animation: dl-bob 1.8s var(--ease) infinite }
@keyframes dl-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(5px) } }
@media (prefers-reduced-motion: reduce) { .dl-cue svg { animation: none } }
.dl-inner .btn svg { margin-right: 10px }
.dl-meta { margin: 20px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted) }

.dl-plans { padding: 48px 0 120px }
.plans-head h2 { font-size: clamp(30px, 3.4vw, 44px) }
.plans-head { display: flex; flex-direction: column; align-items: center; text-align: center }
.plans-head .section-lead { margin-inline: auto }
.plans-head .eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; max-width: 1040px; margin: 40px auto 0 }
.plan { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--card); border: 1px solid var(--line) }
.plan-art { height: 150px; overflow: hidden }
/* Hover dos planos: o card sobe, ganha sombra cobalto e a gravura aproxima devagar.
   Usa `translate` (não `transform`) para não brigar com a revelação no scroll. */
.plan, .plan.reveal { position: relative; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease), border-color .3s }
.plan .plan-art .scene { transition: scale .9s var(--ease), filter .5s }
.plan:hover { translate: 0 -6px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 28px 60px -30px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 24px -16px rgba(20, 32, 87, .25) }
.plan:hover .plan-art .scene { scale: 1.06 }
.plan.pro:hover { border-color: #3550E8; box-shadow: 0 30px 70px -28px color-mix(in srgb, #3550E8 75%, transparent) }
.plan.pro:hover .plan-art .scene { filter: brightness(.86) }
@media (prefers-reduced-motion: reduce) { .plan:hover { translate: none } .plan:hover .plan-art .scene { scale: none } }

/* Beta fechado: e-mail + botão numa linha, mensagem de retorno e contador da fila. */
[hidden] { display: none !important }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.beta-form { scroll-margin-top: calc(var(--nav-h) + 40px); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; width: min(520px, 100%) }
.beta-form input[type='email'] { flex: 1 1 240px; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--fg); font: inherit; font-size: 15px }
.beta-form input[type='email']:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.beta-form button:disabled { opacity: .7; cursor: progress; transform: none }
.beta-form.pulse input[type='email'] { animation: beta-pulse 1.2s var(--ease) }
@keyframes beta-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent) } 100% { box-shadow: 0 0 0 12px transparent } }
.beta-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.beta-status { min-height: 22px; margin: 10px 0 0; font-size: 14px; color: #B3261E }
.beta-status.ok { color: #1D6B45 }
.beta-queue { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fg) }
.beta-queue::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.btn-follow { gap: 8px }
.queue-badge { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--on-accent) 22%, transparent); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em }
.plan-body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 30px }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.plan-top h3 { font-size: 26px }
.plan-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted) }
.price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-size: 36px; font-weight: 600; letter-spacing: -.01em }
.price span { flex-basis: 100%; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--muted) }
.price small { margin-left: -10px; font-size: 17px; font-weight: 500; opacity: .75 }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--muted) }
.checks li { display: flex; gap: 10px }
.checks li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat }
.plan .btn { margin-top: auto; width: 100% }
.plan.pro { background: var(--fg); border-color: var(--fg); color: #E8E9EB }
.plan.pro h3, .plan.pro .price { color: #F7F4EC }
.plan.pro .plan-tag, .plan.pro .price span { color: #A9B0C8 }
.plan.pro .checks { color: #C9CEDF }
.plan.pro .checks li::before { background: #93A4FF }
.plan.pro .plan-art .scene { filter: brightness(.72) }
.btn-light { background: #F7F4EC; color: var(--fg) }
.plans-note { margin: 22px auto 0; max-width: 640px; text-align: center; font-size: 13.5px; color: var(--muted) }

.dl-steps-title { font-size: clamp(28px, 3vw, 40px) }
.dl-steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px }
.dl-steps li { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--card) }
.dl-steps span { font-family: var(--mono); font-size: 13px; color: var(--accent) }
.dl-steps h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0 }
.dl-steps p { margin: 0; font-size: 14.5px; color: var(--muted) }
.dl-warn { margin: 20px 0 0; padding: 22px 26px; border: 1px solid color-mix(in srgb, #E0A800 45%, var(--line)); border-left-width: 4px; border-radius: 14px; background: color-mix(in srgb, #F6EBC4 55%, var(--card)) }
.dl-warn b { display: block; font-size: 16px; margin-bottom: 6px }
.dl-warn p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted) }
.dl-warn p b { display: inline; font-size: inherit; margin: 0; color: var(--fg) }
.dl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; margin: 56px 0 0 }
.dl-facts ul { margin: 0; padding-left: 18px }
.dl-facts > div { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-strong); font-size: 14px; color: var(--muted) }
.dl-facts b { font-weight: 600; color: var(--fg) }
.dl-facts label { font-size: 12.5px }
.sha { display: flex; gap: 8px }
.sha input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--fg); font-family: var(--mono); font-size: 11.5px }
.copy { height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer }
.copy:hover { border-color: var(--accent); color: var(--accent) }

@media (max-width: 900px) {
  .dl-art { width: 100%; opacity: .35 }
  .dl-mist { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), var(--bg)) }
  .dl-inner { min-height: 0; padding: calc(var(--nav-h) + 64px) 0 104px }
  .dl-plans { padding: 84px 0 }
}

.foot { border-top: 1px solid var(--line); padding: 28px 0; font-size: 13px; color: var(--faint) }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }

/* Revelação no scroll: sobe, ganha nitidez e opacidade. */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease) }
.reveal.in { opacity: 1; transform: none; filter: none }


@media (max-width: 900px) {
  .nav-links { display: none }
  .nav-row { grid-template-columns: auto auto }
  .roadmap li { grid-template-columns: 1fr; gap: 6px }
  .section { padding: 84px 0 }
}
@media (max-width: 560px) {
  .nav-actions .btn { display: none }
  .gh-star { display: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .reveal { opacity: 1; transform: none; filter: none }
}

/* ===================================================================================
   Palcos. Dois layouts, escolhidos antes da primeira pintura (script no <head>):
   html.desk (≥ 1024px, tela deitada, sem reduced motion): cada palco ocupa a tela e desenha um canvas
     de 1440×900 escalado por --fit; main.js fixa o palco e liga a história ao scroll (GSAP ScrollTrigger).
   html.flow (resto): o canvas vira uma coluna normal e só há revelações curtas.
   =================================================================================== */
.stage { position: relative }
.stage.privacy { background: var(--panel) }
.stage + .stage, .stage + .section { border-top: 1px solid var(--line) }

/* Peças comuns aos dois layouts */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0%, #000 40%, transparent 92%); mask-image: linear-gradient(#000 0%, #000 40%, transparent 92%) }
.hero-bg .scene { opacity: .38; object-position: 50% 75% }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(56% 50% at 50% 38%, var(--bg) 45%, color-mix(in srgb, var(--bg) 70%, transparent) 72%, transparent 100%) }
.dusk { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 68% 45%, #E3E7FA 0%, transparent 70%), linear-gradient(180deg, #F1F1F6, #ECEEF8) }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center }
.hero-copy .eyebrow { justify-content: center }
.hero-copy .eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor }
.hero-copy h1 { max-width: 15ch }
.hero-copy .lead { margin-inline: auto }
.hero-copy .cta-row { justify-content: center }
.halo { position: absolute; left: 6%; right: 6%; top: 8%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent); filter: blur(50px); pointer-events: none }
#win { position: relative; overflow: visible; --s: .752551 }
/* Réplica da tela inicial do app (scripts/site-app-mock.mjs): desenhada em 1568×778 e escalada por --s
   (largura da janela / 1568; main.js atualiza no layout em coluna). Mesmos tokens do app. */
.app { position: absolute; left: 0; top: 0; width: 1568px; height: 778px; transform-origin: 0 0; transform: scale(var(--s)); border-radius: 18px; overflow: visible;
  font-family: var(--sans); color: var(--fg); font-size: 13px; line-height: 1.4; background: var(--bg) }
.app .i { flex: none }
.app img { display: block }
.a-title { position: absolute; left: 0; right: 0; top: 0; height: 30px; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--serif); font-size: 12.5px; color: var(--muted) }
.a-title img { width: 15px; height: 15px }
.a-title b { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent) }
.a-title i { position: absolute; right: 22px; display: flex; gap: 22px; color: var(--muted) }
.a-main { position: absolute; z-index: 0; left: 213px; top: 38px; width: 1343px; height: 732px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden }
.a-hero { position: absolute; inset: 0 0 auto; height: 410px; border-bottom: 1px solid var(--line); overflow: hidden }
.a-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated }
.a-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 34%, color-mix(in srgb, var(--bg) 35%, transparent) 62%, transparent 100%) }
.a-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 96px; z-index: 1; background: linear-gradient(0deg, var(--panel), transparent) }
.a-crumb, .a-copy { position: absolute; z-index: 2 }
.a-crumb { left: 39px; top: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted) }
.a-copy { left: 231px; top: 86px; width: 470px; display: flex; flex-direction: column; align-items: flex-start }
.a-badge { padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500 }
.a-greet { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent) }
.a-h1 { margin-top: 12px; font-family: var(--serif); font-size: 44px; line-height: 1.08; letter-spacing: -.02em }
.a-h1 em { color: var(--accent) }
.a-sub { margin-top: 14px; max-width: 360px; font-size: 14.5px; line-height: 1.5; color: var(--muted) }
.a-quick { position: absolute; left: 0; right: 0; top: 500px; display: flex; justify-content: center; gap: 2px }
.a-quick span { width: 82px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.a-quick i { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); color: var(--accent) }
.a-tabs { position: absolute; left: 212px; top: 600px; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px }
.a-tabs span { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted) }
.a-tabs .on { background: var(--accent-soft); color: var(--accent) }
.a-stats { position: absolute; left: 212px; top: 668px; display: flex; gap: 10px }
.a-stats span { width: 221px; height: 90px; padding: 18px 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); display: flex; flex-direction: column; gap: 10px }
.a-stats small { font-size: 12.5px; color: var(--muted) }
.a-stats b { font-size: 21px; font-weight: 600; letter-spacing: -.02em }
.a-fab { position: absolute; right: 9px; bottom: 11px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent) }
.a-fab img { width: 28px; height: 28px }

.slot { position: absolute; border-radius: 12px; background: var(--raised); border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--line-strong)) }
.piece { position: absolute }
.a-side { left: 0; top: 38px; width: 212px; height: 740px; padding: 10px 10px 12px; display: flex; flex-direction: column; background: var(--bg); border-radius: 0 0 0 18px }
.a-brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 14px; font-family: var(--serif); font-size: 18px; color: var(--accent) }
.a-brand img { width: 24px; height: 24px }
.a-brand i { margin-left: auto; display: flex; gap: 12px; color: var(--muted) }
.a-item { display: flex; align-items: center; gap: 10px; height: 29px; padding: 0 8px; border-radius: 7px; font-size: 13px; color: var(--muted); flex: none }
.a-item.on { background: var(--raised); color: var(--fg) }
.a-item kbd { margin-left: auto; font-family: var(--sans); font-size: 11px; color: var(--faint) }
.a-group { padding: 8px 8px 3px; font-size: 11.5px; color: var(--faint); flex: none }
.a-setup { margin-top: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; padding: 0 10px 10px; flex: none }
.a-setup-art { position: relative; height: 78px; margin: 0 -10px 10px; display: grid; place-items: center; background: radial-gradient(60% 80% at 50% 40%, var(--accent-soft), transparent), var(--panel) }
.a-setup-art img { width: 58px; height: 58px }
.a-setup-art .i { position: absolute; right: 8px; top: 8px; color: var(--muted) }
.a-setup b { font-family: var(--serif); font-weight: 400; font-size: 13px }
.a-setup small { margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--muted) }
.a-setup em { margin-top: 9px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-style: normal; font-size: 11.5px; font-weight: 600 }
.a-local { display: flex; align-items: center; gap: 7px; padding: 10px 6px 6px; font-size: 11.5px; color: var(--faint); flex: none }
.a-local i, .a-foot i { width: 5px; height: 5px; border-radius: 50%; background: #1D6B45 }
.a-scope { display: flex; align-items: center; gap: 9px; padding: 4px 6px; font-size: 13px; flex: none }
.a-scope b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--raised); font-size: 11px }
.a-scope .i { margin-left: auto; color: var(--muted) }
.a-today { left: 1042px; top: 85px; width: 278px; height: 286px; padding: 17px; display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 16px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 16%, transparent) }
.a-k { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent) }
.a-date { margin: 4px 0 8px; font-family: var(--serif); font-size: 18px }
.a-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted) }
.a-row:first-of-type { border-top: 0 }
.a-row b { font-weight: 500; color: var(--fg) } .a-row b.muted { color: var(--faint) }
.a-foot { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--faint) }
.a-prompt { left: 637px; top: 416px; width: 490px; height: 100px; padding: 14px 12px 10px 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line-strong); border-radius: 16px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 18%, transparent) }
.a-ph { font-size: 14px; color: var(--faint) }
.a-ctl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted) }
.a-ctl i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; margin-right: 6px }
.a-ctl b { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--faint) }
/* Etiqueta de cada peça, em px da réplica (a escala da janela reduz para ~12px na tela) */
.label { position: absolute; left: 0; top: -52px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 11px; border-radius: 999px; background: var(--fg); color: var(--bg); font-family: var(--sans); font-size: 16px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 3 }
.label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8FA0FF }
/* a barra lateral é alta: a etiqueta dela fica embaixo, longe do contador da história */
.a-side .label { top: auto; bottom: -52px }

.story-head { margin: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent) }
.story-count { color: var(--faint) } .story-count b { color: var(--fg); font-weight: 600 }
.story-bar { margin-top: 14px; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden }
.story-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.04) }
.story-steps { list-style: none; margin: 0; padding: 0 }
.story-step .n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--accent) }
.story-step h2 { margin-top: 14px; font-size: 44px }
.story-step p { margin: 16px 0 0; color: var(--muted); font-size: 17px }
.story-end { text-align: center }
.story-end-title { margin: 0; font-family: var(--serif); font-size: 30px; letter-spacing: -.01em }
.story-end .caption { margin-top: 10px }

.feat-count { display: flex; align-items: baseline; gap: 10px; margin: 44px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--faint) }
.feat-count b { font-family: var(--serif); font-weight: 400; font-size: 88px; letter-spacing: -.03em; line-height: 1; color: var(--accent) }
.feat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.feat-grid li { position: relative; border-radius: 14px; border: 1.5px dashed var(--line-strong); min-height: 200px }
.feat-grid .fill { position: absolute; inset: -1.5px; padding: 22px 22px 24px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color .4s, box-shadow .5s var(--ease) }
.feat-grid li:hover .fill { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--accent) 60%, transparent) }
.feat-grid .num { display: block; font-family: var(--serif); font-size: 15px; color: var(--accent); margin-bottom: 12px }
.feat-grid h3 { font-size: 21px }
.feat-grid p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5 }

.arch { margin: 0; overflow: hidden; border-radius: 230px 230px 18px 18px; border: 1px solid var(--line-strong); background: var(--card); box-shadow: 0 50px 90px -50px color-mix(in srgb, var(--accent) 55%, transparent) }
.arch .scene { image-rendering: pixelated }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 16px 34px -16px rgba(20, 32, 87, .6) }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: #8FA0FF; box-shadow: 0 0 0 4px rgba(143, 160, 255, .25) }
#chip1 { left: 26px; bottom: 96px } #chip2 { right: 26px; bottom: 40px }
.pillars { list-style: none; margin: 40px 0 0; padding: 0 }
.pillars li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px 0 22px 20px; border-top: 1px solid var(--line-strong) }
.pillars li:last-child { border-bottom: 1px solid var(--line-strong) }
.pillars .bar { position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--accent); transform-origin: top }
.ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent) }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.pillars h3 { font-size: 21px }
.pillars p { margin: 6px 0 0; color: var(--muted) }

.how-line { height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden }
.how-line i { display: block; height: 100%; background: var(--accent); transform-origin: left }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.steps li { position: relative; padding: 0 0 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card) }
.steps .art { height: 190px; overflow: hidden; margin-bottom: 22px; border-bottom: 1px solid var(--line) }
.steps span, .steps h3, .steps p { margin-inline: 26px }
.steps span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--accent) }
.steps h3 { margin-top: 14px }
.steps p { margin-top: 10px; margin-bottom: 0; color: var(--muted); font-size: 15px }

#finalTitle .w { display: inline-block }

/* ---------- Desktop: canvas 1440×900 escalado; posições absolutas em px do canvas ---------- */
html.desk .stage { height: 100svh; overflow: hidden }
html.desk .canvas { position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px; transform: translate(-50%, -50%) scale(var(--fit)) }
html.desk .canvas > * { position: absolute }
html.desk .stage .reveal { opacity: 1; transform: none; filter: none; transition: none }

html.desk #heroCopy { left: 170px; top: 150px; width: 1100px }
html.desk #heroCopy h1 { font-size: 74px }
html.desk #winWrap { left: 130px; top: 600px; width: 1180px; transform-origin: 0 0 }
html.desk #story { left: 110px; top: 250px; width: 440px }
html.desk .story-steps { position: relative; height: 330px; margin-top: 44px }
html.desk .story-step { position: absolute; inset: 0 0 auto }
html.desk #storyEnd { left: 0; width: 1440px; top: 770px }
/* o que a história revela começa escondido (GSAP usa autoAlpha: opacity + visibility) */
html.desk #story, html.desk .story-step, html.desk #storyEnd, html.desk .slot, html.desk .piece .label { opacity: 0; visibility: hidden }

html.desk .feat-copy { left: 110px; top: 150px; width: 400px }
html.desk .feat-copy h2, html.desk .priv-copy h2, html.desk .how-copy h2 { font-size: 50px }
html.desk .feat-grid { left: 560px; top: 120px; width: 770px; height: 680px; grid-template-rows: repeat(3, minmax(0, 1fr)) }

html.desk .arch { left: 110px; top: 110px; width: 460px; height: 680px }
html.desk .priv-copy { left: 660px; top: 130px; width: 670px }

html.desk .how-copy { left: 110px; top: 130px; width: 900px }
html.desk .how-line { left: 110px; top: 340px; width: 1220px }
html.desk .steps { left: 110px; top: 380px; width: 1220px; height: 430px }
html.desk .how-line i { transform: scaleX(0) }

/* ---------- Fluxo: coluna normal, revelações curtas ---------- */
html.flow .canvas { position: relative; width: min(1180px, 100% - 48px); margin-inline: auto }
html.flow .hero .canvas { padding: calc(var(--nav-h) + 72px) 0 110px }
html.flow #winWrap { position: relative; margin-top: 64px }
html.flow #story { margin-top: 64px }
html.flow .story-bar, html.flow .story-head { display: none }
html.flow .story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px }
html.flow .story-step h2 { font-size: 30px }
html.flow .story-step p { font-size: 15.5px }
html.flow #storyEnd { margin-top: 56px }
html.flow .slot, html.flow .label, html.flow .dusk { display: none }
html.flow .features .canvas, html.flow .privacy .canvas, html.flow .how .canvas { padding: 120px 0 }
html.flow .feat-count { display: none }
html.flow .feat-grid { margin-top: 56px }
html.flow .feat-grid li { min-height: 0; border: 0 }
html.flow .feat-grid .fill { position: relative; inset: auto; height: 100% }
html.flow .privacy .canvas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center }
html.flow .arch { position: relative; height: 560px }
html.flow .how-line { display: none }
html.flow .steps { margin-top: 56px }

@media (max-width: 900px) {
  html.flow .story-steps, html.flow .feat-grid, html.flow .steps { grid-template-columns: 1fr }
  html.flow .privacy .canvas { grid-template-columns: 1fr; gap: 48px }
  html.flow .arch { height: 380px; border-radius: 190px 190px 16px 16px }
  html.flow .features .canvas, html.flow .privacy .canvas, html.flow .how .canvas { padding: 84px 0 }
  .chip { font-size: 12px }
}

/* ---------- Guia do segundo cérebro (site/guia/, en/guide/, es/guia/) ---------- */
.nav-links a[aria-current='page'] { color: var(--accent); border-color: var(--accent) }
.g-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 96px) 0 96px; border-bottom: 1px solid var(--line) }
.g-hero .scene { position: absolute; inset: 0; opacity: .5; image-rendering: pixelated }
.g-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 45%, color-mix(in srgb, var(--bg) 40%, transparent) 100%) }
.g-hero-in { position: relative; z-index: 1 }
.g-hero h1 { max-width: 14ch }
.g-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 72px; align-items: start }
.g-what { position: sticky; top: calc(var(--nav-h) + 32px) }
.g-what h2, .g-grid > div > h2, .g-tree-sec h2 { font-size: clamp(30px, 3vw, 40px) }
.g-what p { margin: 18px 0 0; color: var(--muted); font-size: 17px }
.g-steps { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px }
.g-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--card) }
.g-n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 600 }
.g-step h3 { font-size: 24px }
.g-why { margin: 8px 0 0; color: var(--muted) }
.g-step ul { margin: 14px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px }
.g-step li::marker { color: var(--accent) }
.g-step code, .g-tree code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 5px; background: var(--raised); color: var(--fg) }
.g-ex { margin: 14px 0 0 }
.g-ex code { display: block; padding: 10px 12px; white-space: normal; color: var(--muted) }
.g-tree-sec { background: var(--panel) }
.g-tree { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong) }
.g-tree li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line) }
.g-tree li span { color: var(--muted) }
.guide .final .btn { margin-top: 34px }
@media (max-width: 900px) {
  .g-grid { grid-template-columns: 1fr; gap: 40px }
  .g-what { position: static }
  .g-step { grid-template-columns: 1fr; padding: 22px }
  .g-tree li { grid-template-columns: 1fr; gap: 4px }
}


/* Mãozinha em tudo que é clicável. */
button:not(:disabled), [role='button'], a[href], summary, select, label:has(> input[type='checkbox']), input[type='checkbox'], input[type='submit'] { cursor: pointer }
button:disabled { cursor: not-allowed }

/* Rodapé: "Feito por Lanzi Labs", com link para o site da Lanzi Labs. */
.foot-maker { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; transition: border-color .25s }
.foot-maker:hover { border-color: var(--accent) }