/* ═══════════════════════════════════════════════════════════════════════════
   Mirage — site

   Identidade preservada: o olho, o verde #00ff88, Inter + Orbitron, o grão e a
   escada de superfícies. O olho foi reduzido — mesma referência, 80% menos
   desenho — mas continua sendo o olho, em ouro fosco.

   As três regras do visual seguem valendo:
     1. Título peso 600 com entreletra negativa.
     2. Zero sombra: profundidade é escada de superfície + fio de 1px.
     3. Grão por cima de tudo.

   A mudança desta versão não foi de copy, foi de DEMONSTRAÇÃO. A tese "cada
   conta ganha um computador" ficava abstrata enquanto a página só a afirmava.
   Agora ela aparece: uma janela com três máquinas logo depois da dobra, e cada
   princípio com o seu desenho.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --canvas:  #08090a;
  --s1:      #0f1011;
  --s2:      #141516;
  --s3:      #18191a;

  --fio:        #1e2024;
  --fio-forte:  #2c2e33;

  --ink:      #f7f8f8;
  --ink-2:    #d0d6e0;
  --ink-3:    #8a8f98;
  --ink-4:    #62666d;

  --verde:    #00ff88;
  --verde-12: rgba(0, 255, 136, .12);
  --verde-30: rgba(0, 255, 136, .30);

  --ouro:     #c8ae73;
  --ouro-30:  rgba(200, 174, 115, .30);

  --vermelho: #ff6b6b;

  --corpo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Orbitron', monospace;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e6: 24px; --e8: 32px; --e12: 48px; --e16: 64px; --e24: 96px;

  --raio:  8px;
  --raio2: 12px;

  --largura: 1180px;
  --larga:   1320px;   /* só a janela do produto, que precisa de presença */
  --margem:  40px;
  --topo-h:  72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-3);
  font-family: var(--corpo);
  font-size: 16px; font-weight: 400; line-height: 1.5;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Atmosfera ────────────────────────────────────────────────────────── */

.brilho {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 520px at 78% 3%,  rgba(0, 255, 136, .075), transparent 62%),
    radial-gradient(900px 600px at 12% 26%, rgba(60, 90, 220, .05),  transparent 66%);
}

.grao {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

header, main { position: relative; z-index: 2; }
.hidden { display: none !important; }

/* ── Tipografia ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.04; letter-spacing: -.037em;
  margin-bottom: var(--e6);
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.14; letter-spacing: -.028em;
}
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.022em; }
h4 { font-size: 1rem; letter-spacing: -.015em; }
p  { margin: 0; }

.apagado { color: var(--ink-4); }

.titulo-secao { margin-bottom: var(--e16); max-width: 900px; }
.titulo-secao.centro { margin-inline: auto; text-align: center; }

.rotulo {
  display: flex; align-items: center; gap: var(--e3);
  font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 var(--e8);
}
.rotulo::after {
  content: ''; flex: 1; height: 1px; max-width: 120px;
  background: linear-gradient(90deg, var(--fio), transparent);
}
.rotulo.ouro { color: var(--ouro); }
.rotulo.ouro::after { background: linear-gradient(90deg, var(--ouro-30), transparent); }
.rotulo i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 12px currentColor;
}

/* Rótulo pequeno que encabeça cada desenho. */
.arte-rotulo {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--e4);
}

.sep { opacity: .4; margin: 0 .5em; }
.micro { font-size: .8125rem; color: var(--ink-4); }

.marca {
  font-family: var(--display);
  font-size: .9375rem; font-weight: 700; letter-spacing: .3em;
  color: var(--ink);
}
.marca.pequena { font-size: .75rem; color: var(--ink-4); }

.remate {
  margin-top: var(--e16); padding-top: var(--e8);
  border-top: 1px solid var(--fio);
  font-size: 1.0625rem; line-height: 1.7;
  color: var(--ink-4); text-align: center;
}
.remate b { color: var(--ink); font-weight: 500; }

/* ── Topo ─────────────────────────────────────────────────────────────── */

.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topo-h); padding: 0 var(--margem);
  background: rgba(8, 9, 10, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.topo.colado { border-bottom-color: var(--fio); background: rgba(8, 9, 10, .9); }
.topo > * { flex: 1; }
.topo .marca { flex: none; }
.topo-nav { display: flex; justify-content: center; gap: var(--e8); }
.topo-nav a { color: var(--ink-4); text-decoration: none; font-size: .875rem; transition: color .2s; }
.topo-nav a:hover { color: var(--ink); }
.topo-acao { display: flex; align-items: center; justify-content: flex-end; gap: var(--e6); flex: none; }

/* ── Dobra ────────────────────────────────────────────────────────────── */

.dobra {
  max-width: var(--largura); margin: 0 auto;
  padding: var(--e12) var(--margem) var(--e24);
  min-height: calc(100svh - var(--topo-h));
  display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: center; gap: var(--e8);
}
.dobra-txt  { grid-column: 1 / 8; }
.dobra-arte { grid-column: 9 / 13; display: flex; justify-content: center; }

.lead {
  font-size: 1.125rem; line-height: 1.55; letter-spacing: -.006em;
  color: var(--ink-3); max-width: 540px; margin-bottom: var(--e6);
}
.triade {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e6);
  padding-top: var(--e4); border-top: 1px solid var(--fio);
  margin-bottom: var(--e8); max-width: 540px;
}
.triade span { font-size: .8125rem; color: var(--ink-4); }
.acao { display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap; margin-bottom: var(--e4); }

/* ── Digital + o olho no núcleo ───────────────────────────────────────── */

.digital {
  position: relative; width: 100%; max-width: 320px;
  animation: flutua 9s ease-in-out infinite;
}
@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.digital svg { display: block; width: 100%; height: auto; }
.dg-base { stroke: rgba(0, 255, 136, .19); stroke-width: 1.7; }
/* opacity: 0 e translate no estado BASE, não só no quadro 0% da animação.
   Sem isto, o primeiro quadro pinta o retângulo no lugar estático e em opacidade
   cheia — antes de a máscara resolver — e uma barra verde inteira aparece
   atravessada por fora da digital. Dura um quadro e é impossível de ignorar.
   O `backwards` garante que o quadro 0% valha também antes de a animação
   começar, em qualquer atraso. */
.dg-feixe {
  transform-box: view-box; transform-origin: 0 0;
  opacity: 0;
  transform: translateY(-72px);
  animation: varre 6.5s cubic-bezier(.55, .05, .45, .95) infinite backwards;
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, .55));
}
@keyframes varre {
  0%   { transform: translateY(-72px); opacity: 0; }
  7%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { transform: translateY(254px); opacity: 0; }
  100% { transform: translateY(254px); opacity: 0; }
}

/* Núcleo. A posição vem do centro do turbilhão no viewBox: x=100 de -2..208,
   y=122 de 10..256. Encostar nestes números desalinha a marca inteira. */
.dg-olho {
  position: absolute;
  left: 48.6%; top: 45.5%;
  width: 33%;
  transform: translate(-50%, -50%);
}
.dg-olho img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 34px rgba(0, 255, 136, .3));
}

/* ── Botões e links ───────────────────────────────────────────────────── */

.botao {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 26px;
  background: var(--verde-12);
  color: var(--verde);
  border: 1px solid var(--verde-30);
  border-radius: var(--raio);
  font-family: var(--corpo); font-size: .875rem; font-weight: 500;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.botao em { font-style: normal; transition: transform .22s ease; }
.botao::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(0,255,136,.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.botao:hover {
  background: rgba(0, 255, 136, .18);
  border-color: rgba(0, 255, 136, .55);
  transform: translateY(-1px);
}
.botao:hover em { transform: translateX(3px); }
.botao:hover::after { transform: translateX(120%); }
.botao:focus-visible { outline: 2px solid var(--verde-30); outline-offset: 3px; }
.botao.pequeno { padding: 8px 16px; font-size: .8125rem; }
.botao.grande  { padding: 17px 38px; font-size: .9375rem; }
.botao.cheio   { width: 100%; }
.botao:disabled { opacity: .4; cursor: default; transform: none; }
.botao:disabled::after { display: none; }

.lnk {
  background: none; border: 0; padding: 0;
  color: var(--ink-3);
  font-family: var(--corpo); font-size: .875rem;
  text-decoration: none; cursor: pointer; transition: color .2s;
}
.lnk:hover { color: var(--ink); }
.voltar { display: block; margin: var(--e6) auto 0; color: var(--ink-4); }

.secao {
  max-width: var(--largura); margin: 0 auto;
  padding: var(--e24) var(--margem);
  border-top: 1px solid var(--fio);
}

/* ── 02 · O produto ───────────────────────────────────────────────────────
   A janela é mais larga que o resto da página de propósito. Ela é a prova da
   tese, e prova precisa ter presença. */

.produto {
  max-width: var(--larga); margin: 0 auto;
  padding: 0 var(--margem) var(--e24);
}

.janela {
  background: var(--s1);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio2);
  overflow: hidden;
}

.janela-barra {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--s2);
  border-bottom: 1px solid var(--fio);
}
.janela-luzes { display: flex; gap: 7px; }
.janela-luzes i { width: 10px; height: 10px; border-radius: 50%; background: var(--fio-forte); }
.janela-titulo {
  flex: 1; text-align: center;
  font-family: var(--display); font-size: .625rem;
  font-weight: 700; letter-spacing: .28em; color: var(--ink-4);
}
.janela-selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6875rem; letter-spacing: .08em; color: var(--verde);
}
.janela-selo i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}

.janela-corpo { display: grid; grid-template-columns: 208px 1fr; min-height: 380px; }

.lateral {
  padding: var(--e6) var(--e4);
  border-right: 1px solid var(--fio);
  background: rgba(0, 0, 0, .18);
}
.lateral-rotulo {
  display: block;
  font-size: .625rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 var(--e3);
  margin-bottom: var(--e3);
}
.lateral-item {
  display: block;
  padding: 9px var(--e3);
  border-radius: 6px;
  font-size: .875rem; color: var(--ink-4);
}
.lateral-item.ativo { background: var(--verde-12); color: var(--verde); }

.painel { padding: var(--e6); }
.painel-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--fio);
  margin-bottom: var(--e4);
}
.painel-conta { font-size: .75rem; color: var(--ink-4); }

.maquinas { display: flex; flex-direction: column; gap: var(--e2); }
.maq {
  display: grid; grid-template-columns: 8px 1fr auto 70px;
  align-items: center; gap: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  font-size: .8125rem;
}
.maq.sel { border-color: var(--verde-30); background: rgba(0, 255, 136, .04); }
.maq-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--fio-forte); }
.maq-pt.on { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.maq-id b { display: block; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.maq-id span { font-size: .75rem; color: var(--ink-4); }
.maq-estado {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4);
}
.maq-estado.on { color: var(--verde); }
.maq-abrir { text-align: right; color: var(--ink-4); }
.maq.sel .maq-abrir { color: var(--verde); }

.fichas {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e6); padding-top: var(--e6);
  border-top: 1px solid var(--fio);
}
.fichas span {
  padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--fio-forte);
  font-size: .75rem; color: var(--ink-3);
}
.fichas .apaga { border-color: transparent; color: var(--ink-4); }

/* ── 03 · Não é um perfil ─────────────────────────────────────────────── */

.tese-dupla {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e24); align-items: center;
}
.tese-dupla p { font-size: 1.25rem; line-height: 1.6; letter-spacing: -.015em; color: var(--ink-2); }
.tese-dupla p + p { margin-top: var(--e2); }

/* ── 04 · Princípios ──────────────────────────────────────────────────────
   Linhas de largura inteira alternando o lado. Em três colunas os desenhos
   ficariam com 340px e nenhum deles sobreviveria a isso. */

.principio {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e24);
  align-items: center;
  padding: var(--e16) 0;
  border-top: 1px solid var(--fio);
}
.principio:first-of-type { border-top: 0; padding-top: 0; }
.principio.invertido .principio-txt  { order: 2; }
.principio.invertido .principio-arte { order: 1; }

.principio-txt .num {
  display: block;
  font-size: .75rem; font-weight: 500; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--verde); margin-bottom: var(--e3);
}
.principio-txt h3 { margin-bottom: var(--e4); }
.principio-txt p { font-size: 1rem; line-height: 1.7; color: var(--ink-4); }
.selo-tec {
  margin-top: var(--e6);
  padding-left: var(--e3);
  border-left: 2px solid var(--verde-30);
  font-size: .8125rem !important;
  color: var(--ink-2) !important;
}

.principio-arte {
  padding: var(--e8);
  background: var(--s1);
  border: 1px solid var(--fio);
  border-radius: var(--raio2);
}

/* 01 — as fontes convergindo */
.fontes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e1); }
.fontes span {
  text-align: center;
  padding: 8px 2px;
  border: 1px solid var(--fio-forte);
  border-radius: 6px;
  font-size: .625rem; letter-spacing: .04em;
  color: var(--ink-3);
}
.converge { display: block; width: 100%; height: auto; color: var(--fio-forte); }
.uma-maquina {
  text-align: center;
  padding: var(--e3);
  background: var(--verde-12);
  border: 1px solid var(--verde-30);
  border-radius: var(--raio);
  font-size: .875rem; font-weight: 500; letter-spacing: .02em;
  color: var(--verde);
}

/* 02 — a linha do tempo */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li {
  display: grid; grid-template-columns: 62px 20px 1fr;
  align-items: center; gap: var(--e3);
}
.dia {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4); text-align: right;
}
/* O marco desenha o ponto e o fio que desce até o próximo — assim a linha é
   contínua sem um elemento extra atrás dela. */
.marco {
  position: relative; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.marco::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fio-forte); z-index: 1;
}
.marco::after {
  content: ''; position: absolute; top: 50%; bottom: -50%;
  width: 1px; background: var(--fio-forte);
}
.linha-tempo li:last-child .marco::after { display: none; }
.linha-tempo li:last-child .marco::before { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.fato { font-size: .875rem; color: var(--ink-4); }
.fato.acesa { color: var(--ink); font-weight: 500; }

/* 03 — a fronteira */
.barrado { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.barrado span {
  padding: 5px 11px; border-radius: 6px;
  border: 1px dashed var(--fio-forte);
  font-size: .75rem; color: var(--ink-4);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 107, .5);
}
.caixa-limite {
  padding: var(--e4);
  border: 1px solid var(--verde-30);
  border-radius: var(--raio);
  background: rgba(0, 255, 136, .04);
}
.caixa-cab {
  display: block;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--verde); margin-bottom: var(--e3);
}
.caixa-itens { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
.caixa-itens span {
  padding: 7px 11px;
  background: var(--s2);
  border-radius: 6px;
  font-size: .8125rem; color: var(--ink-3);
}
.saida {
  display: flex; flex-direction: column; align-items: center; gap: var(--e1);
  margin-top: var(--e3);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4);
}
.saida .seta { color: var(--fio-forte); font-size: 1rem; }

/* ── 05 · Constelação ─────────────────────────────────────────────────── */

.constelacao-secao { text-align: center; }
.constelacao-secao .rotulo { justify-content: center; }
.constelacao-secao .rotulo::after { display: none; }
.constelacao { max-width: 600px; margin: 0 auto; }
.constelacao svg { width: 100%; height: auto; display: block; overflow: visible; }

.ct-anel { fill: none; stroke: var(--fio); stroke-width: 1; }
.ct-anel.fraco { stroke: var(--fio); stroke-dasharray: 2 7; opacity: .6; }

/* Cada fio acende na sua vez. O intervalo entre eles é o que faz parecer um
   sistema respondendo, em vez de seis linhas piscando juntas. */
.ct-fio {
  stroke: var(--fio-forte); stroke-width: 1;
  animation: fio-pulsa 7s linear infinite;
  animation-delay: calc(var(--i) * .7s);
}
@keyframes fio-pulsa {
  0%, 86%, 100% { stroke: var(--fio-forte); }
  91%           { stroke: rgba(0, 255, 136, .8); }
}
.ct-no circle {
  fill: var(--s2); stroke: var(--fio-forte); stroke-width: 1;
  animation: no-pulsa 7s linear infinite;
  animation-delay: calc(var(--i) * .7s);
}
@keyframes no-pulsa {
  0%, 86%, 100% { stroke: var(--fio-forte); }
  91%           { stroke: rgba(0, 255, 136, .8); }
}
.ct-no text {
  fill: var(--ink-3);
  font-family: var(--corpo); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-anchor: middle; dominant-baseline: middle;
}

.ct-nucleo circle { fill: var(--s1); stroke: var(--verde-30); stroke-width: 1; }
.ct-t1 {
  fill: var(--ink-4);
  font-family: var(--corpo); font-size: 11px; font-weight: 500;
  letter-spacing: .3em; text-anchor: middle;
}
.ct-t2 {
  fill: var(--verde);
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-anchor: middle;
}

/* ── 06 · Confronto ───────────────────────────────────────────────────── */

.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e16); }
.lado { border-top: 1px solid var(--fio-forte); padding-top: var(--e6); }
.lado.forte { border-top-color: var(--verde-30); }
.lado-cab {
  font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--e6);
}
.lado.forte .lado-cab { color: var(--verde); }

.lista-seca, .lista-checa { list-style: none; margin: 0; padding: 0; }
.lista-seca li, .lista-checa li {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--fio);
  font-size: .9375rem; color: var(--ink-4);
}
.lista-seca.acesa li { color: var(--ink-2); }
.lista-checa li::before {
  content: '✓'; margin-right: var(--e3);
  color: var(--ink-4); opacity: .55;
}
.lado-nota { margin-top: var(--e6); font-size: .8125rem; line-height: 1.6; color: var(--ink-4); }

/* ── 07 · Privacidade ─────────────────────────────────────────────────── */

.privacidade { position: relative; }
.privacidade::before {
  content: ''; position: absolute; z-index: -1;
  top: -1px; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw;
  background: var(--s1);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

.quatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e12); }
.quatro h3 {
  font-size: 1.0625rem;
  padding-top: var(--e4);
  border-top: 1px solid var(--verde-30);
  margin-bottom: var(--e3);
}
.quatro p { font-size: .875rem; line-height: 1.7; color: var(--ink-4); }

.distribuicao {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--e12);
  margin-top: var(--e16); padding-top: var(--e8);
  border-top: 1px solid var(--fio-forte);
}
.dist-txt { font-size: .9375rem; line-height: 1.7; color: var(--ink-3); max-width: 520px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.etiquetas span {
  padding: 7px 14px; border-radius: 99px;
  border: 1px solid var(--ouro-30);
  font-size: .75rem; letter-spacing: .06em;
  color: var(--ouro);
}

/* ── 08 · O convite ───────────────────────────────────────────────────────
   Quase uma tela inteira, quase vazia. O espaço em volta é o argumento: uma
   página que não tenta vender parece não precisar vender. */

.acesso {
  min-height: 92svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--e24) var(--margem);
  border-top: 1px solid var(--fio);
}
/* O mesmo olho da dobra, menor. Sem opacidade reduzida: o desenho já tem os
   seus próprios meios-tons, e apagá-lo por cima só o deixa sujo. */
.acesso-mark { margin-bottom: var(--e12); }
.acesso-mark img {
  width: 104px; height: auto; display: block;
  filter: drop-shadow(0 0 30px rgba(0, 255, 136, .22));
}
.acesso h2 {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  letter-spacing: -.032em;
  margin-bottom: var(--e8);
}
.acesso-txt { margin-bottom: var(--e16); }
.acesso-txt p { font-size: 1.0625rem; line-height: 1.9; color: var(--ink-4); }
.acesso-nota {
  margin-top: var(--e8);
  font-size: .75rem; letter-spacing: .1em;
  color: var(--ink-4); opacity: .6;
}

.rodape {
  max-width: var(--largura); margin: 0 auto;
  padding: var(--e6) var(--margem) var(--e12);
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--fio);
}

/* ── Telas de conta ───────────────────────────────────────────────────── */

.tela {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e12) var(--e6);
}
.cartao {
  width: 420px; max-width: 100%;
  background: var(--s1);
  border: 1px solid var(--fio);
  border-radius: var(--raio2);
  padding: var(--e8);
}
.cartao.largo { width: 560px; }
.cartao .rotulo { margin-bottom: var(--e6); }
.cartao .rotulo::after { display: none; }

.cartao-titulo {
  font-size: 1.5rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.024em;
  color: var(--ink); margin: 0 0 var(--e2);
}
.cartao-lead { font-size: .9375rem; line-height: 1.6; color: var(--ink-4); margin: 0 0 var(--e8); }

.campo { display: block; margin-bottom: var(--e4); }
.campo > span {
  display: block;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--e2);
}
.campo input {
  width: 100%; padding: 11px 13px;
  background: var(--s2);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio);
  color: var(--ink);
  font-family: var(--corpo); font-size: .9375rem;
  transition: border-color .2s, background .2s;
}
.campo input::placeholder { color: var(--ink-4); opacity: .55; }
.campo input:focus { outline: none; border-color: var(--verde-30); background: var(--s3); }

.erro {
  background: rgba(255, 107, 107, .07);
  border: 1px solid rgba(255, 107, 107, .25);
  border-radius: var(--raio);
  padding: 11px 13px; margin-bottom: var(--e4);
  font-size: .875rem; color: var(--vermelho);
}
.cartao .botao.cheio { margin-top: var(--e4); }

.baixa-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e6); padding: var(--e6);
  background: var(--s2);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio2);
  margin-bottom: var(--e4);
}
.baixa-nome { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.baixa-meta {
  font-size: .75rem; letter-spacing: .06em; color: var(--ink-4);
  margin-top: var(--e1); font-variant-numeric: tabular-nums;
}
.baixa-nota { font-size: .8125rem; line-height: 1.6; color: var(--ink-4); }

/* ── O comando de instalação ──────────────────────────────────────────────
   O comando não cabe na largura do cartão e NÃO deve quebrar em duas linhas:
   comando quebrado convida a pessoa a copiar metade. Rola dentro da própria
   caixa, e o botão fica fixo do lado. */

.comando {
  display: flex; align-items: stretch; gap: var(--e2);
  margin-bottom: var(--e4);
}
.comando code {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .75rem; line-height: 1.5;
  color: var(--ink-2);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.comando code::-webkit-scrollbar { display: none; }
.comando .botao { flex: none; }

/* O .dmg continua ali, fechado. Quem quiser encontra; quem não abrir o
   detalhe segue pelo caminho que não dá susto. */
.alternativa { margin-top: var(--e6); }
.alternativa summary {
  cursor: pointer;
  font-size: .8125rem; color: var(--ink-4);
  list-style: none;
}
.alternativa summary::-webkit-details-marker { display: none; }
.alternativa summary::before { content: '+ '; opacity: .6; }
.alternativa[open] summary::before { content: '– '; }
.alternativa summary:hover { color: var(--ink-3); }
.alternativa p {
  margin: var(--e3) 0;
  font-size: .8125rem; line-height: 1.65; color: var(--ink-4);
}

/* ── Revelação ao rolar ───────────────────────────────────────────────── */

.js-revela [data-revela] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-revela [data-revela].visivel { opacity: 1; transform: none; }

/* ── Telas estreitas ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .quatro { grid-template-columns: repeat(2, 1fr); gap: var(--e8); }
  .tese-dupla, .principio { grid-template-columns: 1fr; gap: var(--e8); }
  /* Invertido só faz sentido em duas colunas; empilhado, o texto vem sempre
     antes do desenho. */
  .principio.invertido .principio-txt  { order: 0; }
  .principio.invertido .principio-arte { order: 0; }
  .confronto { gap: var(--e12); }
  .distribuicao { grid-template-columns: 1fr; gap: var(--e6); }
  .topo-nav { display: none; }
  .janela-corpo { grid-template-columns: 172px 1fr; }
}

@media (max-width: 860px) {
  :root { --margem: 24px; --e24: 72px; }
  .dobra { min-height: 0; padding-bottom: var(--e16); }
  .dobra-txt  { grid-column: 1 / -1; }
  .dobra-arte { grid-column: 1 / -1; order: -1; justify-content: flex-start; }
  .digital { max-width: 148px; }
  .lead, .triade { max-width: none; }
  .confronto { grid-template-columns: 1fr; }
  /* A barra lateral vira uma faixa de páginas em cima da lista. */
  .janela-corpo { grid-template-columns: 1fr; }
  .lateral {
    display: flex; gap: var(--e1); overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--fio);
    padding: var(--e3) var(--e4);
  }
  .lateral-rotulo { display: none; }
  .lateral-item { white-space: nowrap; }
}

@media (max-width: 520px) {
  .acao { flex-direction: column; align-items: stretch; }
  .acao .botao { width: 100%; }
  .acao .lnk { text-align: center; }
  .quatro { grid-template-columns: 1fr; }
  .principio-arte { padding: var(--e6); }
  .fontes { grid-template-columns: repeat(3, 1fr); }
  .maq { grid-template-columns: 8px 1fr auto; }
  .maq-abrir { display: none; }
  .baixa-linha { flex-direction: column; align-items: stretch; }
  .rodape { flex-direction: column; gap: var(--e4); }
  .cartao { padding: var(--e6); }
  .topo-acao .lnk { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .digital { animation: none; }
  .dg-feixe { animation: none; opacity: 1; transform: translateY(96px); }
  .ct-fio, .ct-no circle { animation: none; }
  .botao::after { display: none; }
  .js-revela [data-revela] { opacity: 1; transform: none; transition: none; }
}