/* Variante "premium escuro". Só tokens abaixo definem a paleta. */
:root {
  color-scheme: dark;
  --fundo: #060b14;
  --superficie: #0c1626;
  --linha: rgba(158, 200, 228, 0.14);
  --texto: #eaf2f8;
  --suave: #9db0c2;
  --agua: #6ee7f2;
  --agua-forte: #a5f3fc;
  --agua-tinta: #03222a;
  --raio: 1rem;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto);
  background:
    radial-gradient(60rem 36rem at 85% -10%, rgba(56, 189, 248, 0.10), transparent 60%),
    var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--agua); text-underline-offset: 0.2em; }
a:hover { color: var(--agua-forte); }
:focus-visible { outline: 2px solid var(--agua-forte); outline-offset: 3px; border-radius: 0.375rem; }
p { margin: 0; }

/* ---------- Faixa fixa (todas as páginas) ---------- */
.faixa {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 0.625rem 1rem;
  background: #09111e;
  color: var(--texto);
  border-bottom: 1px solid var(--linha);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-align: center;
}
.faixa::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--agua);
  vertical-align: 0.05em;
}
.aviso-dev {
  padding: 0.5rem 1rem;
  background: #7f1d1d;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
}

/* ---------- Estrutura ---------- */
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
main { flex: 1; }

.topo { padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Seletor de idioma (PT | EN) */
.idioma {
  display: flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: rgba(12, 22, 38, 0.6);
  font-size: 0.9375rem;
  font-weight: 600;
}
.idioma > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 0.5rem;
  text-decoration: none;
}
.idioma > * + * { border-left: 1px solid var(--linha); }
.idioma a { color: var(--suave); }
.idioma a:hover { color: var(--agua); }
.idioma [aria-current="page"] { color: var(--agua-tinta); background: var(--agua); border-radius: 999px; }
.idioma > :first-child[aria-current="page"] { border-radius: 999px 0 0 999px; }
.idioma > :last-child[aria-current="page"] { border-radius: 0 999px 999px 0; }
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  color: var(--texto);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.marca svg { width: 1.375rem; height: 1.375rem; color: var(--agua); }
.marca:hover { color: var(--texto); }

h1, h2 { font-family: var(--fonte-display); text-wrap: balance; }
h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.35rem + 4vw, 4.25rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.038em;
}
h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.sub {
  margin-top: 1.125rem;
  max-width: 30rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.45;
  color: var(--suave);
  letter-spacing: -0.008em;
}

/* ---------- Botão (uma ação por página) ---------- */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  margin-top: 2rem;
  padding: 0.875rem 1.75rem;
  background: var(--agua);
  color: var(--agua-tinta);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  border-radius: 0.875rem;
  box-shadow: 0 0 0 1px rgba(165, 243, 252, 0.5) inset, 0 8px 28px -10px rgba(110, 231, 242, 0.55);
}
.botao:hover { background: var(--agua-forte); color: var(--agua-tinta); }
.botao:focus-visible { outline-color: #fff; border-radius: 0.875rem; }
.nota { margin-top: 0.875rem; font-size: 0.9375rem; color: var(--suave); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% -10% 0;
  background: radial-gradient(closest-side, rgba(110, 231, 242, 0.16), transparent);
  pointer-events: none;
}

/* Celular desenhado em CSS */
.celular {
  position: relative;
  width: min(100%, 17.5rem);
  aspect-ratio: 9 / 18.6;
  padding: 0.5rem;
  border-radius: 2.75rem;
  background: linear-gradient(160deg, #1d2a3d, #0a121e 60%);
  box-shadow: 0 0 0 1px rgba(158, 200, 228, 0.22), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.tela {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.25rem;
  background: var(--superficie);
  isolation: isolate;
}
.tela::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0.625rem;
  left: 50%;
  width: 30%;
  height: 1.375rem;
  margin-left: -15%;
  border-radius: 1rem;
  background: #000;
}
.feed { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.veu {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(6, 11, 20, 0.35);
}
.veu .feed { filter: blur(9px); transform: scale(1.06); }

/* Trilho: 100% da altura da tela, move o selo do centro para baixo */
.trilho {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateY(79%);
}
.selo {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  width: 11.5rem;
  padding: 1rem 0.75rem 0.875rem;
  border-radius: 1.75rem;
  background: rgba(6, 11, 20, 0.8);
  box-shadow: 0 0 0 1px rgba(158, 200, 228, 0.18);
  transform: translate(-50%, -50%) scale(0.7);
}
.anel { width: 6rem; height: 6rem; display: block; }
.anel-trilha { stroke: rgba(110, 231, 242, 0.16); }
.gole { stroke: var(--agua); }
.agua { transform: translateY(0); }
.selo-rotulo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cadeado { width: 0.875rem; height: 0.875rem; flex: none; overflow: visible; color: var(--agua); }
.alca { transform-box: view-box; transform-origin: 10.75px 7.5px; transform: translateY(-1.5px) rotate(28deg); }
.rotulos { display: grid; }
.rotulos > span { grid-area: 1 / 1; white-space: nowrap; }
.r-travado { opacity: 0; color: var(--texto); }
.r-livre { color: var(--agua); }

/* ---------- Como funciona ---------- */
.como { padding-top: 3rem; padding-bottom: 4rem; border-top: 1px solid var(--linha); }
#video-bloco { margin: 0 0 3rem; }
#video-bloco video {
  display: block;
  width: 100%;
  max-width: 40rem;
  border-radius: var(--raio);
  background: #000;
  box-shadow: 0 0 0 1px var(--linha);
}
.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: passo;
  display: grid;
}
.passos li {
  counter-increment: passo;
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--linha);
}
.passos li:last-child { border-bottom: 1px solid var(--linha); }
.passos svg {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
  border-radius: 0.875rem;
  color: var(--agua);
  background: rgba(110, 231, 242, 0.08);
  box-shadow: 0 0 0 1px rgba(110, 231, 242, 0.2) inset;
}
.passos p { color: var(--suave); padding-top: 0.125rem; }
.passos p::before {
  content: "Passo " counter(passo);
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--agua);
}
:lang(en) .passos p::before { content: "Step " counter(passo); }
.passos strong { color: var(--texto); font-weight: 600; }

/* ---------- Rodapé ---------- */
.rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--linha);
  color: var(--suave);
  font-size: 0.9375rem;
}
.rodape nav { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.rodape a, .voltar a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--texto);
  overflow-wrap: anywhere;
}
.rodape a:hover { color: var(--agua); }

/* ---------- Páginas de texto (obrigado, privacidade) ---------- */
.pagina { max-width: 40rem; padding-top: 2.5rem; padding-bottom: 4rem; }
.pagina h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); }

.selo-ok { width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; color: var(--agua); display: block; }

.planos {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.plano {
  display: grid;
  gap: 0.25rem;
  padding: 1.375rem 1.375rem 1.25rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(158, 200, 228, 0.06), rgba(158, 200, 228, 0.015));
  box-shadow: 0 0 0 1px var(--linha) inset;
}
.plano:last-child {
  background: linear-gradient(180deg, rgba(110, 231, 242, 0.11), rgba(110, 231, 242, 0.02));
  box-shadow: 0 0 0 1px rgba(110, 231, 242, 0.32) inset;
}
.plano-nome { font-size: 0.9375rem; font-weight: 600; color: var(--texto); }
.plano-preco {
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.plano-desc { font-size: 0.9375rem; color: var(--suave); }
.destaque {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--agua);
  color: var(--texto);
  font-size: 1.0625rem;
}
.destaque span { font-weight: 600; white-space: nowrap; }

.privacidade h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.privacidade p, .privacidade li { color: var(--suave); }
.privacidade p + p { margin-top: 0.75rem; }
.privacidade > p:first-of-type { margin-top: 1.125rem; font-size: 1.125rem; }
.privacidade ul { margin: 0; padding-left: 1.25rem; }
.privacidade li { margin: 0.5rem 0; }
.privacidade li::marker { color: var(--agua); }
.privacidade .voltar { margin-top: 2.5rem; }
.privacidade .ressalva {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
  font-size: 0.9375rem;
}

/* ---------- Telas maiores ---------- */
@media (min-width: 30rem) {
  .planos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 40rem) {
  .botao { display: inline-flex; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .passos li { grid-template-columns: 1fr; border-bottom: 0; padding: 1.5rem 0 0; }
  .passos li:last-child { border-bottom: 0; }
}
@media (min-width: 56rem) {
  .hero {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 4rem;
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }
  .celular { width: 19rem; }
}

/* ---------- Movimento: só para quem não pediu redução ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gole { animation: gole 0.18s ease-out calc(0.7s + var(--i) * 0.13s) both; }
  .agua { animation: encher 1.7s cubic-bezier(0.3, 0, 0.3, 1) 0.7s both; }
  .alca { animation: abrir 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 2.55s both; }
  .veu { animation: clarear 0.9s ease-out 3.05s both; }
  .trilho { animation: descer 0.8s cubic-bezier(0.6, 0, 0.2, 1) 3.05s both; }
  .selo { animation: encolher 0.8s cubic-bezier(0.6, 0, 0.2, 1) 3.05s both; }
  .r-travado { animation: sumir 0.3s ease-out 2.75s both; }
  .r-livre { animation: surgir 0.3s ease-out 2.85s both; }
  .botao { transition: background-color 0.15s ease; }
}
@keyframes gole { from { opacity: 0; } }
@keyframes encher { from { transform: translateY(42px); } }
@keyframes abrir { from { transform: none; } }
@keyframes clarear { from { opacity: 1; } }
@keyframes descer { from { transform: translateY(50%); } }
@keyframes encolher { from { transform: translate(-50%, -50%) scale(1); } }
@keyframes sumir { from { opacity: 1; } }
@keyframes surgir { from { opacity: 0; } }