/*
 * CifraCut — landing.
 *
 * Texto secundário não desce de 56% de opacidade sobre o fundo: abaixo disso
 * o contraste cai de 4,5:1 e a linha some para quem lê no celular, no sol.
 *
 * Os tokens são os mesmos do app (frontendV2/src/index.css). Mudou lá, muda
 * aqui: a página e o produto precisam parecer a mesma coisa quando a pessoa
 * atravessa o botão.
 *
 * A página é escura de propósito e não tem tema claro. Ela é um palco: o
 * vídeo é o que deve brilhar, e fundo branco atrás de um Reel escuro rouba
 * o olho do único elemento que vende.
 */

:root {
  --ink: #0b0b0f;
  --ink-deep: #08080b;
  --surface: #15151c;
  --surface-2: #17171f;
  --surface-3: #1c1c24;
  --surface-4: #262633;

  --paper: #f2f1f6;
  --violet: #7b4dff;
  --violet-bright: #8b5cff;
  --violet-soft: #a78bfa;
  --violet-pale: #c4b5fd;
  --amber: #ffb020;
  --mint: #7cf5c4;
  --coral: #ff7276;

  --hair: rgba(255, 255, 255, 0.07);
  --hair-strong: rgba(255, 255, 255, 0.14);

  --display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --largura: 1180px;
  --raio: 18px;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/*
 * A textura do fundo é um braço de violão: seis linhas verticais finas,
 * espaçadas como cordas. Fica quase invisível, e é justamente o ponto —
 * dá matéria ao preto sem competir com nada.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.028) 0 1px,
      transparent 1px 84px);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--violet-pale);
  outline-offset: 3px;
  border-radius: 6px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--violet);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 99;
  font-weight: 700;
}
.pular:focus { left: 12px; }

/* ───────────────────────────  TIPOGRAFIA  ─────────────────────────── */

/*
 * Titulo em sans pesada, nao em serifada de alto contraste.
 *
 * A didone anterior era bonita no H1 e ilegivel no resto: traco fino sobre
 * fundo escuro some em 24px. As ferramentas com que o CifraCut concorre —
 * CapCut, Captions — usam sans grossa por esse motivo, e legibilidade num
 * titulo de venda vale mais que sofisticacao tipografica.
 *
 * Bricolage Grotesque tem eixo optico e de largura: nos corpos grandes ela
 * fecha e ganha densidade, nos pequenos ela abre e continua legivel.
 */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
}
h3 { font-weight: 700; letter-spacing: -0.018em; }

/* Bodoni ocupa mais linha que a Instrument Serif no mesmo corpo. Sem baixar a
   escala, o heroi cresceu 109px e empurrou o botao para fora da primeira
   tela. */
h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); }
/* Numa sans o italico e sintetico e sai torto. A enfase passa a ser cor. */
h1 em {
  font-style: normal;
  color: var(--violet-pale);
}

.titulo-secao {
  font-size: clamp(1.9rem, 3.9vw, 2.85rem);
  max-width: 22ch;
}

.sub-secao {
  margin: 14px 0 0;
  color: rgba(242, 241, 246, 0.56);
  font-size: 1.02rem;
  max-width: 52ch;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 10px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 241, 246, 0.68);
}
.ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.14);
}

.linha-fina {
  margin: 26px 0 0;
  font-size: 1.08rem;
  line-height: 1.68;
  color: rgba(242, 241, 246, 0.66);
  max-width: 46ch;
}

.nota {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgba(242, 241, 246, 0.56);
}

/* ─────────────────────────────  BOTÕES  ──────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--violet-bright);
  box-shadow: 0 10px 30px -12px rgba(123, 77, 255, 0.9);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn:hover {
  background: var(--violet-bright);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -14px rgba(123, 77, 255, 1);
}
.btn:active { transform: translateY(0); }

.btn-grande {
  padding: 16px 30px;
  font-size: 16px;
  border-radius: 14px;
}

.btn-fantasma {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(242, 241, 246, 0.72);
  border-radius: 10px;
  transition: color 0.16s ease, background 0.16s ease;
}
.btn-fantasma:hover { color: var(--paper); background: rgba(255, 255, 255, 0.05); }

.btn-linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--paper);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.btn-linha:hover { border-color: var(--violet-soft); background: rgba(123, 77, 255, 0.08); }

/* ──────────────────────────────  TOPO  ───────────────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(100% - 40px, var(--largura));
  margin: 0 auto;
  padding: 16px 0;
  background: linear-gradient(180deg, var(--ink) 55%, rgba(11, 11, 15, 0));
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
}
/* A palheta e o unico elemento colorido do cabecalho; a folga a direita
   compensa o vazio da propria forma, que e mais estreita embaixo. */
.marca-sinal {
  flex: none;
  width: 26px;
  height: 26px;
}

.topo-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
}
.topo-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
  color: rgba(242, 241, 246, 0.58);
  transition: color 0.16s ease;
}
.topo-links a:hover { color: var(--paper); }

.topo-acoes { display: flex; align-items: center; gap: 8px; }

/* ──────────────────────────────  HERÓI  ──────────────────────────── */

/*
 * `overflow: clip` aqui, e não no <html>.
 *
 * O holofote tem 780px de largura e vaza numa tela de 375 — sem cortar, o
 * telefone ganha uma faixa vazia à direita para rolar. Cortar na raiz
 * resolveria o transbordo e quebraria junto o cabeçalho grudento: medido,
 * `position: sticky` deixa de grudar quando um ancestral tem overflow
 * diferente de visible. Cortando só aqui, o cabeçalho fica fora do estrago.
 */
.heroi {
  position: relative;
  overflow: clip;
  z-index: 1;
  width: min(100% - 40px, var(--largura));
  margin: 0 auto;
  padding: 34px 0 76px;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  grid-template-areas:
    'cabeca palco'
    'pe     palco';
  column-gap: 48px;
  row-gap: 34px;
  align-items: center;
}
.heroi-cabeca { grid-area: cabeca; align-self: end; }
.heroi-pe { grid-area: pe; align-self: start; }
.palco { grid-area: palco; }

.holofote {
  position: absolute;
  top: -220px;
  left: -8%;
  width: 780px;
  height: 640px;
  pointer-events: none;
  background: radial-gradient(48% 50% at 42% 40%, rgba(123, 77, 255, 0.34), transparent 72%);
  filter: blur(18px);
  z-index: -1;
}
.holofote-baixo {
  top: auto;
  bottom: -260px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(123, 77, 255, 0.28), transparent 70%);
}

.heroi-acoes {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.selos {
  list-style: none;
  margin: 38px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(242, 241, 246, 0.56);
}
.selos li { display: flex; align-items: center; gap: 10px; }
.selos li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet-soft);
  flex: none;
}

/* ──────────────────────────────  PALCO  ──────────────────────────── */

/*
 * O palco: dois aparelhos verticais lado a lado.
 *
 * O "antes" também é 9:16 de propósito. O vídeo horizontal já chegou ao feed
 * vertical — o que a pessoa vê no Instagram é a tarja preta, não o take
 * bonito da câmera. Comparar 16:9 com 9:16 compararia formatos; comparar dois
 * 9:16 compara o que ela publica hoje com o que passaria a publicar.
 */
/*
 * Tres faixas: rotulo, aparelho, carimbo. Cada lado ocupa as mesmas faixas,
 * entao "ANTES" e "DEPOIS" ficam na mesma linha mesmo com os aparelhos de
 * alturas diferentes. Alinhando so pela base, como estava, os dois rotulos
 * ficavam 47px desencontrados no desktop.
 */
.palco {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 12px 26px;
  align-items: center;
}

.palco-lado {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  justify-items: center;
  align-items: center;
}
/* Sem subgrid (Safari antigo), o alinhamento cai para o comportamento
   anterior em vez de quebrar. */
@supports not (grid-template-rows: subgrid) {
  .palco-lado { grid-template-rows: auto 1fr auto; gap: 12px; }
}

.rotulo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rotulo-antes { color: rgba(255, 176, 32, 0.75); }
.rotulo-depois { color: var(--mint); }

.carimbo-linha {
  align-self: start;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(242, 241, 246, 0.56);
  text-align: center;
  line-height: 1.5;
}
.carimbo-mint {
  color: var(--mint);
  background: rgba(124, 245, 196, 0.09);
  border: 1px solid rgba(124, 245, 196, 0.2);
  padding: 4px 9px;
  border-radius: 999px;
}

.grao {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

/* O aparelho: moldura fina, 9:16, sem desenhar um iPhone inteiro — o
   contorno basta para o olho entender "isto é um Reel". */
.aparelho {
  width: min(100%, 214px);
  padding: 7px;
  border-radius: 26px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(160deg, #23202e, #101015);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
/* O aparelho do "antes" recua: menor, sem brilho e dessaturado. Ele está na
   página para ser deixado para trás, não para disputar o olho. */
.aparelho-fosco {
  width: min(100%, 188px);
  filter: saturate(0.3) brightness(0.86);
  box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.9);
}

.tela {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink-deep);
}

.quadro-cru {
  position: absolute;
  inset: 0;
  background: #050507;
}
.tarja { position: absolute; inset: 0; }
/* A faixa 16:9 no meio do 9:16 — o vídeo horizontal como ele cai no feed. */
.faixa-cru {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, #2b2536, #16151c);
  overflow: hidden;
}
/* O grao fica por cima do filme, nao no lugar dele — e mais fraco, porque
   sobre imagem de verdade ele deixa de ser textura e vira listra. */
.faixa-cru .grao, .quadro-video .grao { z-index: 1; opacity: 0.35; }

.quadro-video {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #2a2340, #14131a);
  overflow: clip;
}


/* ────────────────────  A FILEIRA DE ACORDES  ─────────────────────── */

/*
 * Quatro diagramas em fila, na base do quadro. No app real e assim: a
 * progressao inteira fica na tela e a cifra do momento acende em ambar. O
 * cartao flutuando no canto superior, que estava aqui antes, cobria o rosto
 * de quem toca — que e a unica parte do quadro que nao se pode tapar.
 */
/*
 * A base da tela: letra, fileira de acordes e regua empilhadas com folga
 * declarada. Antes cada uma tinha seu proprio `bottom` em pixel, e bastava o
 * aparelho encolher para a letra sentar em cima das cifras — que foi
 * exatamente o que aconteceu no desktop.
 */
.base-tela {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 9px;
  display: grid;
  gap: 7px;
}

.fileira-acordes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.acorde {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 4px 3px 5px;
  border-radius: 8px;
  background: rgba(8, 8, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(4px);
  opacity: 0.55;
  animation: acende-acorde 8s infinite;
}
.acorde:nth-child(1) { animation-delay: 0s; }
.acorde:nth-child(2) { animation-delay: 2s; }
.acorde:nth-child(3) { animation-delay: 4s; }
.acorde:nth-child(4) { animation-delay: 6s; }

.acorde-nome {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(242, 241, 246, 0.75);
  line-height: 1.1;
}

.diagrama { width: 100%; height: auto; }
.diagrama .grade path {
  stroke: rgba(242, 241, 246, 0.3);
  stroke-width: 0.85;
  fill: none;
}
.diagrama .dedo, .diagrama .pestana { fill: rgba(242, 241, 246, 0.8); }

/* A do momento: borda e digitacao em ambar, como no editor. */
@keyframes acende-acorde {
  0%, 2% { opacity: 0.55; border-color: rgba(255, 255, 255, 0.09); }
  5%, 22% { opacity: 1; border-color: rgba(255, 176, 32, 0.75); }
  27%, 100% { opacity: 0.55; border-color: rgba(255, 255, 255, 0.09); }
}
.acorde[data-ativo] {
  opacity: 1;
  border-color: rgba(255, 176, 32, 0.75);
}
.acorde[data-ativo] .acorde-nome { color: var(--amber); }
.acorde[data-ativo] .dedo, .acorde[data-ativo] .pestana { fill: var(--amber); }

/* ────────────────────────────  A LETRA  ──────────────────────────── */

/*
 * O veu atras da letra. Com fundo pintado o `text-shadow` bastava; sobre o
 * tampo claro de um violao ele nao basta, e legenda ilegivel no heroi e o
 * unico elemento que a pagina nao pode errar.
 */
.tela::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 11, 0.9) 58%);
}
.lado-antes .tela::after { display: none; }

.letra {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.letra span {
  opacity: 0.28;
  animation: acende-palavra 8s infinite;
}
.letra span:nth-child(1) { animation-delay: 0.2s; }
.letra span:nth-child(2) { animation-delay: 2.2s; }
.letra span:nth-child(3) { animation-delay: 4.2s; }
.letra span:nth-child(4) { animation-delay: 6.2s; }

@keyframes acende-palavra {
  0%, 2%   { opacity: 0.28; color: var(--paper); }
  5%, 22%  { opacity: 1; color: var(--mint); }
  27%      { opacity: 0.28; color: var(--paper); }
  100%     { opacity: 0.28; color: var(--paper); }
}

/* ──────────────────────  A RÉGUA DA TIMELINE  ────────────────────── */

.regua {
  position: relative;
  height: 18px;
  border-radius: 7px;
  background: rgba(14, 14, 19, 0.86);
  border: 1px solid var(--hair);
  overflow: hidden;
}

.regua-trilha {
  position: absolute;
  inset: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.regua-trilha .bloco {
  border-radius: 3px;
  background: linear-gradient(160deg, #3a2c4d, #211e2b);
  animation: bloco-ativo 8s infinite;
}
.bloco.b1 { animation-delay: 0s; }
.bloco.b2 { animation-delay: 2s; }
.bloco.b3 { animation-delay: 4s; }
.bloco.b4 { animation-delay: 6s; }

@keyframes bloco-ativo {
  0%, 2%  { background: linear-gradient(160deg, #3a2c4d, #211e2b); }
  5%, 22% { background: linear-gradient(160deg, #6d4bd0, #3a2c6d); }
  27%     { background: linear-gradient(160deg, #3a2c4d, #211e2b); }
  100%    { background: linear-gradient(160deg, #3a2c4d, #211e2b); }
}

.cabeca {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(124, 245, 196, 0.8);
  animation: cabeca-anda 8s linear infinite;
}
@keyframes cabeca-anda {
  from { left: 3%; }
  to { left: 97%; }
}

/* ────────────────────────────  SEÇÕES  ───────────────────────────── */

.secao {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, var(--largura));
  margin: 0 auto;
  padding: 92px 0;
}

/* O divisor é uma régua de timeline: tiques finos que ficam mais raros
   nas pontas. Repete o vocabulário do editor no corpo da página. */
.regua-secao {
  height: 9px;
  margin-bottom: 58px;
  background-image: repeating-linear-gradient(90deg,
    var(--hair-strong) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ─────────────────────────────  DORES  ───────────────────────────── */

.cartas {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cartas li {
  padding: 28px 24px 30px;
  border: 1px solid var(--hair);
  border-radius: var(--raio);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cartas li:hover { border-color: var(--hair-strong); transform: translateY(-2px); }
.num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 16px;
}
.cartas h3 { font-size: 1.55rem; margin-bottom: 10px; }
.cartas p {
  margin: 0;
  font-size: 14.5px;
  color: rgba(242, 241, 246, 0.55);
  line-height: 1.65;
}
.cartas em { font-family: var(--mono); font-style: normal; color: var(--violet-pale); }


/* ─────────────────────────  HOJE E DEPOIS  ───────────────────────── */

/*
 * Duas colunas de troca. A da esquerda usa ambar e opacidade menor: ela
 * descreve o que a pessoa ja vive, e nao precisa competir com a da direita.
 */
.troca {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.coluna {
  padding: 26px 24px 28px;
  border: 1px solid var(--hair);
  border-radius: var(--raio);
  background: var(--surface);
}
.coluna.depois {
  border-color: rgba(167, 139, 250, 0.36);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(123, 77, 255, 0.13), transparent 62%),
    var(--surface-2);
}

.coluna-selo {
  display: inline-block;
  margin-bottom: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hoje .coluna-selo {
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.36);
  color: var(--amber);
}
.depois .coluna-selo {
  background: rgba(124, 245, 196, 0.1);
  border: 1px solid rgba(124, 245, 196, 0.34);
  color: var(--mint);
}

.coluna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.coluna li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(242, 241, 246, 0.72);
}
.hoje li { color: rgba(242, 241, 246, 0.56); }
/* A marca de cada linha: um traco do lado que perde, um tique do lado que
   ganha. Sem emoji e sem cor sozinha carregando o sentido. */
.hoje li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 11px;
  height: 1.5px;
  background: rgba(255, 176, 32, 0.7);
}
.depois li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 6px;
  width: 5px;
  height: 9px;
  border-right: 1.8px solid var(--mint);
  border-bottom: 1.8px solid var(--mint);
  transform: rotate(42deg);
}
.coluna em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.92em;
  color: var(--paper);
}

/* ─────────────────────────────  PASSOS  ──────────────────────────── */

.passo-grade {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.passo {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--hair);
  border-radius: var(--raio);
  background: var(--surface);
}
.tempo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--violet-soft);
  margin-bottom: 14px;
}
.passo h3 { font-size: 1.5rem; margin-bottom: 9px; }
.passo p {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(242, 241, 246, 0.55);
  line-height: 1.65;
}

.passo-arte {
  margin-top: auto;
  position: relative;
  height: 108px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--ink-deep);
  overflow: hidden;
}

.arte-sobe .alvo {
  position: absolute;
  inset: 14px;
  display: grid;
  place-items: center;
}
.arte-sobe .tracejado {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(167, 139, 250, 0.28);
  border-radius: 10px;
  animation: pulsa-alvo 3.4s ease-in-out 2;
}
.arte-sobe .arquivo {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(242, 241, 246, 0.7);
  background: var(--surface-3);
  border: 1px solid var(--hair-strong);
  padding: 7px 11px;
  border-radius: 8px;
  animation: pousa 1.1s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}
@keyframes pulsa-alvo {
  0%, 100% { border-color: rgba(167, 139, 250, 0.2); }
  46% { border-color: rgba(167, 139, 250, 0.6); }
}
/* O arquivo nunca some: piscar um elemento decorativo rouba o olho de quem
   está lendo o texto ao lado. Ele só desce e assenta. */
@keyframes pousa {
  from { transform: translateY(-9px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}

.arte-marca .trilhas {
  position: absolute;
  inset: 12px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
}
.arte-marca .trilhas span {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
}
.arte-marca .trilhas span:nth-child(2) {
  background: linear-gradient(90deg, #3a2c4d, #211e2b);
}
/* Os marcadores ficam sobre a segunda trilha — a dos acordes. Posição em
   porcentagem para acompanharem a caixa em qualquer largura. */
.marcador {
  position: absolute;
  top: 31px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #fff;
  background: var(--violet);
  padding: 2px 6px;
  border-radius: 5px;
  box-shadow: 0 4px 12px -4px rgba(123, 77, 255, 0.9);
}
.marcador.m1 { left: 20%; }
.marcador.m2 { left: 50%; }
.marcador.m3 { left: 80%; }

.arte-marca::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 1.5px;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(124, 245, 196, 0.7);
  animation: varre 4.2s linear 2 both;
}
@keyframes varre {
  from { left: 10%; }
  to { left: 92%; }
}

.arte-exporta { display: grid; place-items: center; gap: 12px; align-content: center; }
.arte-exporta .barra {
  width: 68%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.arte-exporta .barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--mint));
  animation: enche 2.4s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}
@keyframes enche {
  from { width: 4%; }
  to { width: 100%; }
}
.arquivo-pronto {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mint);
}

/* ────────────────────────────  PROMESSA  ─────────────────────────── */

.promessa blockquote {
  margin: 0;
  padding: 62px 44px;
  border: 1px solid var(--hair);
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(123, 77, 255, 0.16), transparent 62%),
    var(--surface);
  text-align: center;
}
.promessa p {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  line-height: 1.08;
}
.promessa em { font-style: normal; color: var(--mint); }
.promessa cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 15px;
  color: rgba(242, 241, 246, 0.56);
}

/* ────────────────────────────  RECURSOS  ─────────────────────────── */

/*
 * A secao mostra o editor, nao o descreve. Cada arte aqui e uma reconstrucao
 * fiel da tela correspondente do app: a busca em notacao brasileira, as
 * variacoes por casa, as quatro montagens, as setas da batida. Se a interface
 * mudar la, muda aqui — arte que mente sobre o produto e pior que arte
 * nenhuma, porque quem entra depois percebe.
 */

.recurso-grade {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.recurso {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--hair);
  border-radius: var(--raio);
  background: var(--surface);
  transition: border-color 0.2s ease;
}
.recurso:hover { border-color: var(--hair-strong); }

.recurso-selo {
  display: inline-block;
  width: max-content;
  margin-bottom: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(123, 77, 255, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.3);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-pale);
}

.recurso h3 { font-size: 1.42rem; margin-bottom: 10px; }
.recurso p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(242, 241, 246, 0.7);
}
.recurso em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.92em;
  color: rgba(242, 241, 246, 0.5);
}
.recurso > *:last-child { margin-bottom: 0; }

.recurso.largo {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  align-items: center;
}
.recurso-texto { display: flex; flex-direction: column; }
.recurso-texto p { margin-bottom: 0; }

/* ── o painel da biblioteca de cifras ── */

.painel {
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  background: var(--ink-deep);
  padding: 12px;
  font-size: 11px;
}
.painel-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 12px;
  color: var(--paper);
}
.painel-topo .x { color: rgba(242, 241, 246, 0.4); }

.busca {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--hair-strong);
  border-radius: 9px;
  background: var(--surface-3);
  margin-bottom: 10px;
}
.lupa {
  width: 9px;
  height: 9px;
  flex: none;
  border: 1.4px solid rgba(242, 241, 246, 0.45);
  border-radius: 50%;
  box-shadow: 3px 3px 0 -1.4px rgba(242, 241, 246, 0.45);
}
.digitado { font-family: var(--mono); color: var(--paper); }
.cursor {
  width: 1.5px;
  height: 12px;
  background: var(--violet-pale);
  animation: pisca 1.1s steps(2) infinite;
}
@keyframes pisca { 50% { opacity: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.chips b {
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: rgba(242, 241, 246, 0.62);
}
.chips b.on {
  border-color: var(--violet);
  background: rgba(123, 77, 255, 0.18);
  color: var(--violet-pale);
}

.painel-rotulo, .painel-nota {
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 241, 246, 0.45);
}
.painel-nota { margin-top: 12px; letter-spacing: 0.06em; }

.posicoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.posicoes figure {
  margin: 0;
  padding: 6px 4px 5px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--surface-2);
  text-align: center;
}
.posicoes figure.on { border-color: rgba(255, 176, 32, 0.6); }
.posicoes svg { width: 100%; height: auto; }
/* Em 60px de largura a grade de 0,85 sumia: o diagrama lia como caixa vazia. */
.posicoes .grade path { stroke: rgba(242, 241, 246, 0.42); stroke-width: 1; }
.posicoes .dedo { fill: var(--paper); }
.posicoes figure.on .dedo { fill: var(--amber); }
.posicoes figcaption {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(242, 241, 246, 0.5);
}

.quantas { display: flex; gap: 4px; }
.quantas b {
  flex: 1;
  padding: 4px 0;
  text-align: center;
  border-radius: 7px;
  border: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: rgba(242, 241, 246, 0.6);
}
.quantas b.on {
  border-color: var(--violet);
  background: rgba(123, 77, 255, 0.18);
  color: var(--violet-pale);
}

/* ── a batida ── */

.batida {
  margin-top: auto;
  padding: 14px 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--ink-deep);
}
.batida-nome {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
}
.setas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: center; }
.setas i {
  position: relative;
  height: 26px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  animation: bate 3s linear infinite;
}
.setas i:nth-child(1) { animation-delay: 0s; }
.setas i:nth-child(2) { animation-delay: 0.5s; }
.setas i:nth-child(3) { animation-delay: 1s; }
.setas i:nth-child(4) { animation-delay: 1.5s; }
.setas i:nth-child(5) { animation-delay: 2s; }
.setas i:nth-child(6) { animation-delay: 2.5s; }
/* A seta: um traco com ponta. Para baixo e para cima, como se escreve levada. */
.setas i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 5px;
  width: 1.6px;
  transform: translateX(-50%);
  background: rgba(242, 241, 246, 0.65);
}
.setas i::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid rgba(242, 241, 246, 0.65);
  border-bottom: 1.6px solid rgba(242, 241, 246, 0.65);
}
.setas .baixo::after { bottom: 3px; transform: translateX(-50%) rotate(45deg); }
.setas .cima::after { top: 3px; transform: translateX(-50%) rotate(-135deg); }
@keyframes bate {
  0%, 12% { background: rgba(124, 245, 196, 0.16); }
  20%, 100% { background: rgba(255, 255, 255, 0.05); }
}

/* ── os três recortes ── */

.recortes { margin-top: auto; display: grid; gap: 7px; }
.recortes .r {
  position: relative;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  background: var(--ink-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 241, 246, 0.65);
}
.recortes .r::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 9px 0 0 9px;
}
.recortes .braco::before { background: var(--violet); }
.recortes .corpo::before { background: var(--amber); }
.recortes .cena::before { background: var(--mint); }

/* ── as quatro montagens ── */

.layouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.layouts figure {
  margin: 0;
  padding: 9px 7px 8px;
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: var(--ink-deep);
  text-align: center;
}
.layouts figure.on { border-color: rgba(167, 139, 250, 0.6); background: rgba(123, 77, 255, 0.09); }
.layouts .l {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  background: var(--surface-3);
  overflow: hidden;
}
/* Violeta cheio nos quatro cartoes gritava mais que o titulo ao lado. O
   bloco vira superficie, e a cor fica so no que esta selecionado. */
.layouts .l i {
  position: absolute;
  background: rgba(123, 77, 255, 0.42);
  border-radius: 3px;
}
.layouts figure.on .l i { background: var(--violet); }
.layouts .l i.peq { background: rgba(196, 181, 253, 0.55); }
.layouts figure.on .l i.peq { background: var(--violet-pale); }
.l-unica i { inset: 4px; }
.l-split i:first-child { left: 4px; right: 4px; top: 4px; height: 44%; }
.l-split i:last-child { left: 4px; right: 4px; bottom: 4px; height: 44%; }
.l-pip i:first-child { inset: 4px; }
.l-pip i.peq { left: auto; right: 7px; bottom: 7px; width: 34%; height: 20%; }
.l-palco i:first-child { inset: 4px; }
.l-palco i.peq { left: 7px; bottom: 7px; width: 36%; height: 18%; }
.l-palco i.peq + .peq { left: auto; right: 7px; }
.layouts figcaption {
  margin-top: 6px;
  font-size: 9.5px;
  line-height: 1.3;
  color: rgba(242, 241, 246, 0.6);
}

/* ── letra e link ── */

.letra-demo {
  margin-top: auto;
  padding: 16px 14px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--ink-deep);
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}
.letra-demo span { opacity: 0.32; }
.letra-demo .on { opacity: 1; color: var(--mint); }

/* ── o corte ── */

.corte-demo {
  margin-top: auto;
  display: grid;
  gap: 9px;
}
.corte-demo .faixa {
  position: relative;
  display: block;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
/* O trecho escolhido: o resto da trilha continua ali, apagado, porque cortar
   aqui e escolher o que entra, nao apagar o que sobra. */
.corte-demo .dentro {
  position: absolute;
  left: 22%;
  right: 34%;
  top: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(160deg, #6d4bd0, #3a2c6d);
  border-left: 2px solid var(--mint);
  border-right: 2px solid var(--mint);
}
.corte-demo .marca {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mint);
}


/* ─────────────────────────────  PREÇOS  ──────────────────────────── */

.planos {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 20px;
  align-items: start;
}
.plano {
  position: relative;
  padding: 34px 30px 32px;
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plano-pro {
  border-color: rgba(167, 139, 250, 0.42);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(123, 77, 255, 0.15), transparent 60%),
    var(--surface-2);
  box-shadow: 0 40px 90px -60px rgba(123, 77, 255, 0.9);
}
.fita {
  position: absolute;
  top: -11px;
  left: 30px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #17131f;
  background: var(--mint);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.plano h3 { font-size: 1.7rem; }
.plano-preco { margin: 6px 0 0; display: flex; align-items: baseline; gap: 9px; }
.valor {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.85rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.por, .plano-nota {
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(242, 241, 246, 0.56);
}
.plano-nota { margin: 8px 0 0; }
.plano ul {
  list-style: none;
  margin: 24px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 14.5px;
  color: rgba(242, 241, 246, 0.75);
}
.plano li { display: flex; align-items: flex-start; gap: 10px; }
.plano li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
}
.plano li.fraco { color: rgba(242, 241, 246, 0.56); }
.plano li.fraco::before { background: rgba(255, 176, 32, 0.7); }
.plano .btn, .plano .btn-linha { margin-top: auto; }
.plano-rodape {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: rgba(242, 241, 246, 0.56);
  line-height: 1.55;
}

/* ──────────────────────────────  FAQ  ────────────────────────────── */

.faq-lista {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.faq-lista details {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--surface);
  padding: 0 20px;
  transition: border-color 0.2s ease;
}
.faq-lista details[open] { border-color: rgba(167, 139, 250, 0.34); }
.faq-lista summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 17px;
  color: var(--violet-soft);
  flex: none;
  transition: transform 0.2s ease;
}
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.68;
  color: rgba(242, 241, 246, 0.55);
}

/* ───────────────────────────  FECHAMENTO  ────────────────────────── */

.fechamento {
  position: relative;
  overflow: clip;
  z-index: 1;
  width: min(100% - 40px, var(--largura));
  margin: 0 auto;
  padding: 110px 0 130px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
}
.fechamento h2 {
  font-size: clamp(2.15rem, 4.8vw, 3.4rem);
  max-width: 16ch;
}
.fechamento p {
  margin: 0;
  max-width: 46ch;
  color: rgba(242, 241, 246, 0.58);
  font-size: 1.02rem;
  line-height: 1.68;
}
.fechamento .btn-grande { margin-top: 12px; }

/* A linha de quem fez. Discreta: ela ganha por ser verdadeira, não por ser
   grande. */
.assinatura {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  max-width: 42ch;
  font-size: 13.5px;
  color: rgba(242, 241, 246, 0.56);
}

/* ────────────────────────────  RODAPÉ  ───────────────────────────── */

.rodape {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, var(--largura));
  margin: 0 auto;
  padding: 34px 0 54px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.rodape-marca span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}
.rodape-marca img { flex: none; }
.rodape-marca p {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(242, 241, 246, 0.56);
}
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; }
/* Alvo de toque: 13px de texto dá 18px de altura, e dedo não acerta 18px.
   O padding leva a área clicável para perto dos 44px do guia da Apple. */
.rodape nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 13.5px;
  text-decoration: none;
  color: rgba(242, 241, 246, 0.55);
  transition: color 0.16s ease;
}
.rodape nav a:hover { color: var(--paper); }
.copy {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(242, 241, 246, 0.52);
}

/* ────────────────────────────  ENTRADA  ──────────────────────────── */

.heroi-cabeca > *,
.heroi-pe > *,
.palco { animation: sobe 0.72s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.heroi-cabeca > *:nth-child(1) { animation-delay: 0.02s; }
.heroi-cabeca > *:nth-child(2) { animation-delay: 0.09s; }
/* Quando o anima.js divide o H1 em palavras, quem anima são elas. O bloco
   inteiro subindo por baixo delas seria o mesmo movimento contado duas vezes. */
h1[data-dividido] { animation: none !important; }
.heroi-cabeca > *:nth-child(3) { animation-delay: 0.16s; }
.heroi-pe > *:nth-child(1) { animation-delay: 0.23s; }
.heroi-pe > *:nth-child(2) { animation-delay: 0.3s; }
.palco { animation-delay: 0.2s; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────  O TRILHO LATERAL  ──────────────────────── */

/*
 * Seis cordas verticais, trastes a cada 76px e uma cabeça de leitura que
 * desce conforme a pessoa rola. O `top` da cabeça vem do anima.js; aqui só
 * mora a aparência.
 *
 * Some abaixo de 1100px: numa tela estreita ela roubaria margem do texto, e
 * quem está no celular ganha a barra de CTA no lugar.
 */
.trilho {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 18px;
  width: 26px;
  z-index: 30;
  pointer-events: none;
  display: none;
}
@media (min-width: 1100px) {
  .trilho { display: block; }
}

/*
 * Numa tela larga o aparelho de 214px vira selo, nao demonstracao: e o unico
 * elemento que prova o produto, e estava menor que o botao ao lado.
 */
@media (min-width: 1100px) {
  .aparelho { width: min(100%, 268px); }
  .aparelho-fosco { width: min(100%, 232px); }
}

.trilho-cordas {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 5.2px),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 76px);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}

.trilho-cabeca {
  position: absolute;
  left: -5px;
  right: -5px;
  top: 0;
  height: 2px;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(124, 245, 196, 0.75);
  will-change: top;
}

/* Dentro dos 26px do trilho, e não ao lado dele: a 1100px de largura a
   coluna de texto começa aos 50px, e um rótulo à direita da cabeça encostaria
   nela. */
.trilho-acorde {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mint);
  white-space: nowrap;
}

/* ────────────────────  A BARRA FIXA DO CELULAR  ──────────────────── */

.barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 11, 15, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hair-strong);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.barra-fixa[data-oculta] { transform: translateY(105%); }

/*
 * A barra tem 67px e fica por cima do conteudo. Sem folga equivalente, a
 * ultima linha visivel vive escondida atras dela — a pessoa continua
 * conseguindo rolar, mas le sempre com um pedaco tampado.
 *
 * A marca vem do anima.js e so existe enquanto a barra esta no ar.
 */
html[data-barra] body { padding-bottom: 74px; }
html[data-barra] { scroll-padding-bottom: 74px; }
.barra-fixa strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--paper);
}
.barra-fixa span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(242, 241, 246, 0.56);
}
.barra-fixa .btn { flex: none; }

/* Acima de 900px o botão do topo fica sempre à vista, e a barra não tem
   trabalho a fazer. */
@media (min-width: 900px) {
  .barra-fixa { display: none; }
}

/* ───────────────────────  CAMADA AMBIENTE  ───────────────────────── */

/*
 * A terceira camada de movimento. Primária é a entrada das seções, secundária
 * são os estados de toque; sem uma camada de fundo respirando, a página fica
 * viva só enquanto alguém mexe nela.
 *
 * 12s e 26s são propositalmente longos: movimento ambiente que a pessoa
 * percebe conscientemente virou distração.
 */
@keyframes respira {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.holofote { animation: respira 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.holofote-baixo { animation-duration: 16s; animation-delay: -6s; }

@keyframes deriva {
  from { background-position: 0 0; }
  to { background-position: 56px 56px; }
}
.grao { animation: deriva 26s linear infinite; }

/* Fora da tela, nada anima: o palco tem seis animações em laço, e mantê-las
   rodando invisíveis gasta bateria de quem está lendo os preços. */
.palco[data-pausado] * { animation-play-state: paused !important; }



/* ────────────────────────────  FILME  ────────────────────────────── */

/*
 * Os videos nao trazem `autoplay` no HTML de proposito. Quem manda tocar e o
 * anima.js, e so quando o bloco esta na tela e o sistema nao pediu movimento
 * reduzido — nesse caso fica o poster, que ja e um quadro do proprio filme.
 *
 * `muted` e obrigatorio para o navegador deixar tocar sozinho, e `playsinline`
 * e o que impede o iPhone de abrir em tela cheia por conta propria.
 */
.filme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Na faixa 16:9 dentro do celular vertical, o video aparece inteiro: e o
   ponto do "antes" — o take horizontal com tarja em cima e embaixo. */
.faixa-cru .filme { object-fit: cover; }

/* Fundo de secao: o filme e textura, nao conteudo. O veu por cima existe
   para o texto continuar com 4,5:1 de contraste sobre qualquer quadro. */
.fundo-filme {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
.fundo-filme video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  filter: saturate(0.7);
}
.fundo-filme::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 11, 15, 0.72) 30%,
      rgba(11, 11, 15, 0.82) 70%, var(--ink) 100%);
}

.dores { overflow: clip; }
/* Os cartoes tem fundo proprio, entao o filme so aparece nas frestas entre
   eles: a 26% nao aparecia em fresta nenhuma. */
.dores .fundo-filme video { opacity: 0.44; }
.dores .fundo-filme::after {
  background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 11, 15, 0.6) 26%,
    rgba(11, 11, 15, 0.72) 74%, var(--ink) 100%);
}
.promessa blockquote { position: relative; overflow: clip; isolation: isolate; }
.promessa .fundo-filme video { opacity: 0.34; }

/* ─────────────  O PALCO SOB COMANDO DA ROLAGEM  ──────────────────── */

/*
 * Enquanto ninguém rolou, o palco roda em laço — um herói parado na chegada
 * não mostra nada. Ao primeiro gesto o anima.js marca `data-manual` e a
 * rolagem passa a decidir qual acorde está no ar, qual palavra acende, qual
 * bloco da trilha está ativo e onde fica a cabeça de leitura.
 *
 * Voltando ao topo, a marca sai e o laço volta.
 */
.palco[data-manual] .acorde,
.palco[data-manual] .letra span,
.palco[data-manual] .regua-trilha .bloco,
.palco[data-manual] .cabeca {
  animation: none !important;
}

.palco[data-manual] .acorde {
  opacity: 0.55;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.18s ease;
}
.palco[data-manual] .acorde[data-ativo] { opacity: 1; }

.palco[data-manual] .letra span {
  opacity: 0.28;
  color: var(--paper);
  transition: opacity 0.18s ease, color 0.18s ease;
}
.palco[data-manual] .letra span[data-ativo] {
  opacity: 1;
  color: var(--mint);
}

.palco[data-manual] .regua-trilha .bloco {
  transition: background 0.18s ease;
}
.palco[data-manual] .regua-trilha .bloco[data-ativo] {
  background: linear-gradient(160deg, #6d4bd0, #3a2c6d);
}

/* ───────────  AS ARTES DOS PASSOS TOCAM AO ENTRAR  ──────────────── */

/*
 * Elas rodavam em laço eterno. Movimento de fundo que nunca para vira ruído,
 * e a skill de motion design é clara: camada ambiente existe para ser sentida,
 * não notada. Agora cada arte espera a seção chegar, toca e assenta.
 */
.passo-arte[data-parado] * { animation-play-state: paused !important; }

/* ──────────────────────  ESTADOS DE TOQUE  ───────────────────────── */

/*
 * Curva e tempos da personalidade Premium: o aperto responde em 140ms porque
 * feedback precisa ser imediato, e a volta leva 240ms porque quem solta já
 * não está esperando nada.
 */
.btn,
.btn-linha,
.btn-fantasma {
  transition:
    transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:active,
.btn-linha:active,
.btn-fantasma:active {
  transform: scale(0.975);
  transition-duration: 0.14s;
}

/* A marca vem do anima.js e só existe quando há JavaScript. Sem ele, ou com
   movimento reduzido, nada aqui se aplica e a página aparece inteira. */
[data-espera] { opacity: 0; }

/* ───────────────────────────  RESPONSIVO  ────────────────────────── */

@media (max-width: 980px) {
  /* Numa coluna só, o palco sobe: a prova vem antes do botão, não depois
     de duas dobras de texto. */
  .heroi {
    grid-template-columns: 1fr;
    grid-template-areas: 'cabeca' 'palco' 'pe';
    row-gap: 40px;
    padding-bottom: 64px;
  }
  .cartas, .passo-grade, .recurso-grade { grid-template-columns: 1fr 1fr; }
  .troca { grid-template-columns: 1fr; }
  .recurso.largo { grid-column: span 2; grid-template-columns: 1fr; row-gap: 22px; }
  .planos { grid-template-columns: 1fr; }
  .topo-links { display: none; }
}

@media (max-width: 700px) {
  .secao { padding: 66px 0; }
  .regua-secao { margin-bottom: 40px; }
  .cartas, .passo-grade, .recurso-grade, .faq-lista, .troca {
    grid-template-columns: 1fr;
  }
  .recurso.largo { grid-column: auto; grid-template-columns: 1fr; row-gap: 20px; }
  .layouts { grid-template-columns: repeat(4, 1fr); }
  .palco { gap: 14px; }
  .aparelho { width: min(100%, 176px); }
  .aparelho-fosco { width: min(100%, 156px); }
  .heroi-acoes { gap: 14px; }
  .linha-fina { font-size: 1rem; }
  .heroi { row-gap: 32px; }
  .btn-grande { width: 100%; }
  .promessa blockquote { padding: 44px 24px; }
  .topo { gap: 12px; }
  .btn-fantasma { display: none; }
}

/* ──────────────────────  MOVIMENTO REDUZIDO  ─────────────────────── */

/*
 * Quem pediu menos movimento no sistema não deveria receber um cartão de
 * acorde piscando na cara. As animações param no estado legível: o primeiro
 * acorde visível, a barra cheia, a letra acesa.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .acorde { opacity: 0; }
  .acorde:nth-child(1) { opacity: 1; }
  .letra span { opacity: 1; color: var(--mint); }
  .arte-marca::after { left: 50%; }
  [data-espera] { opacity: 1; }
  .holofote, .grao { animation: none; }
  .fundo-filme video { opacity: 0.2; }
  .trilho-cabeca { transition: none; }
  .cabeca { left: 38%; }
  .arte-exporta .barra span { width: 100%; }
}