/* ---------- fontes ---------- */
@font-face {
  font-family: "Jakarta";
  src: url("fonts/jakarta-Medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("fonts/jakarta-ExtraBold.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
/* fallback com métricas calculadas do próprio .woff2 (mata o pulo do texto na troca) */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  size-adjust: 111.88%;
  ascent-override: 92.78%;
  descent-override: 19.84%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
:root {
  --fundo: #0e0e11;
  --fundo-2: #16171b;
  --caixa: #1b1c20;
  --linha: rgba(255, 255, 255, .09);
  --linha-forte: rgba(255, 255, 255, .16);
  --texto: #f2f2f5;
  --apagado: #a1a2ab;
  --roxo: #534ab7;
  --roxo-claro: #6f66dd;
  --verde: #3ddc84;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Jakarta", "Jakarta Fallback", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
}
h1 { font-size: 2.05rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.06rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.wrap.estreito { max-width: 760px; }
.centro { text-align: center; }

section { padding: 64px 0; }
#preco { text-align: center; }
#preco .preco-etiqueta, #preco .preco-valor, #preco .preco-sub { text-align: left; }
.faixa { background: var(--fundo-2); border-block: 1px solid var(--linha); }

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: 12px; top: 12px;
  z-index: 10;
  background: var(--roxo);
  padding: 10px 16px;
  border-radius: 8px;
}

/* ---------- botões ---------- */
.btn {
  display: inline-block;
  background: var(--roxo);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.01em;
  border-radius: 12px;
  padding: 12px 20px;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--roxo-claro); }
.btn:active { transform: translateY(1px); }
.btn-menor { padding: 9px 16px; font-size: .92rem; border-radius: 10px; }
.btn-grande { padding: 16px 28px; font-size: 1.06rem; }
.btn-largo { display: block; text-align: center; }

.btn-vazio {
  display: inline-block;
  padding: 16px 22px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  transition: border-color .15s ease;
}
.btn-vazio:hover { border-color: rgba(255, 255, 255, .38); }

/* ---------- topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(14, 14, 17, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}
.marca { display: flex; line-height: 0; }
.menu { display: none; margin-left: auto; gap: 26px; }
.menu a {
  text-decoration: none;
  color: var(--apagado);
  font-size: .95rem;
  transition: color .15s ease;
}
.menu a:hover { color: var(--texto); }
.topo .btn { margin-left: auto; }
.menu + .btn { margin-left: 0; }

/* ---------- hero ---------- */
.hero {
  padding: 44px 0 56px;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 66px);   /* 66px = altura do topo fixo */
  min-height: calc(100svh - 66px);  /* svh: no celular ignora a barra do navegador */
}
.hero > .wrap { width: 100%; }
.etiqueta {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apagado);
}
.destaque { color: var(--verde); }
.sub {
  color: var(--apagado);
  font-size: 1.06rem;
  max-width: 46ch;
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}
.linha-preco {
  color: var(--apagado);
  font-size: .92rem;
  margin: 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.chips li {
  font-size: .84rem;
  color: var(--apagado);
  background: var(--caixa);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 12px;
}

.hero-img {
  margin: 56px 0 0;
  position: relative;
}
.hero-img::before {
  content: "";
  position: absolute;
  inset: -18% -8% 20%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(83, 74, 183, .38), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}
.hero-img picture { display: block; }
.hero-img img {
  display: block;
  width: 100%;
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.hero-img figcaption {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--apagado);
}

/* ---------- velocidade ---------- */
.intro {
  color: var(--apagado);
  font-size: 1.04rem;
  max-width: 62ch;
}
.barras {
  display: grid;
  gap: 20px;
  margin: 34px 0 14px;
  max-width: 640px;
}
.barra-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tempo {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.tempo.verde { color: var(--verde); }
.trilho {
  height: 12px;
  background: var(--caixa);
  border: 1px solid var(--linha);
  border-radius: 999px;
  overflow: hidden;
}
.preenche { display: block; height: 100%; border-radius: 999px; }
.preenche.v1 { width: 17%; background: var(--verde); }
.preenche.v2 { width: 100%; background: rgba(255, 255, 255, .22); }
.nota { font-size: .86rem; color: var(--apagado); margin: 0; }

/* ---------- passos ---------- */
.passos {
  list-style: none;
  counter-reset: passo;
  display: grid;
  gap: 24px;
  margin: 34px 0 0;
  padding: 0;
}
.passos li {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 26px 24px;
}
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--roxo);
  color: #fff;
  font-weight: 800;
}
.passos p { color: var(--apagado); margin: 0; }

/* ---------- blocos de duas colunas ---------- */
.duas { display: grid; gap: 30px; }
.duas p { color: var(--apagado); max-width: 60ch; }
.ressalva {
  border-left: 2px solid var(--roxo);
  padding-left: 14px;
  font-size: .95rem;
}
.ressalva strong { color: var(--texto); }
.marcas-lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: start;
  margin: 0;
  padding: 0;
}
.marcas-lista li {
  background: var(--caixa);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: .92rem;
}

.cena { margin: 40px 0 0; }
.cena img {
  display: block;
  width: 100%;
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.cena figcaption {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--apagado);
}

/* ---------- recursos ---------- */
.grade {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}
.card {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 24px 22px;
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--apagado); margin: 0; font-size: .96rem; }

/* ---------- comparativo ---------- */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tabela-rolagem {
  overflow-x: auto;
  margin: 34px 0 16px;
  -webkit-overflow-scrolling: touch;
}
table.comparativo {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
table.comparativo th,
table.comparativo td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--linha);
  font-size: .96rem;
  vertical-align: top;
}
table.comparativo thead th {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}
table.comparativo tbody th {
  font-weight: 700;
  color: var(--apagado);
  width: 30%;
}
table.comparativo td { color: var(--apagado); }
table.comparativo .destaque-col {
  background: rgba(83, 74, 183, .16);
  color: var(--texto);
}
table.comparativo thead .destaque-col {
  color: #fff;
  border-radius: 12px 12px 0 0;
}
table.comparativo tbody tr:last-child .destaque-col { border-radius: 0 0 12px 12px; }
table.comparativo strong { color: var(--texto); }
.selo-vital {
  display: inline-block;
  margin: 4px 0 0 12px;
  padding: 4px 11px;
  border: 1px solid rgba(61, 220, 132, .45);
  border-radius: 999px;
  background: rgba(61, 220, 132, .14);
  color: var(--verde);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ---------- vídeo ---------- */
.video-bloco {
  margin: 34px auto 0;
  max-width: 980px;
}
.video-bloco video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------- preço ---------- */
.preco-card {
  max-width: 460px;
  margin: 34px auto 0;
  text-align: left;
  background: var(--fundo-2);
  border: 1px solid var(--linha-forte);
  border-radius: 20px;
  padding: 32px 28px;
}
.preco-etiqueta {
  margin: 0;
  color: var(--verde);
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.preco-valor {
  margin: 6px 0 2px;
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.preco-valor span { font-size: 1.5rem; margin-right: 6px; color: var(--apagado); }
.preco-sub { color: var(--apagado); margin-bottom: 22px; }
.preco-lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.preco-lista li {
  position: relative;
  padding-left: 28px;
  font-size: .96rem;
}
.preco-lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .5em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}
.preco-rodape {
  margin: 16px 0 0;
  font-size: .84rem;
  color: var(--apagado);
}

/* ---------- dúvidas ---------- */
details {
  border-bottom: 1px solid var(--linha);
  padding: 4px 0;
}
summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 700;
  position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 26px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--apagado);
  border-bottom: 2px solid var(--apagado);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(-135deg); top: 30px; }
details p { color: var(--apagado); padding-bottom: 6px; margin: 0 0 14px; }

/* ---------- final ---------- */
.final { padding: 80px 0; }
.final h2 { max-width: 20ch; margin-inline: auto; }
.final p { color: var(--apagado); }
.final .btn { margin: 10px 0 16px; }

/* ---------- rodapé ---------- */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 30px 0;
  font-size: .88rem;
  color: var(--apagado);
}
.rodape-in { display: grid; gap: 10px; }
.rodape p { margin: 0; }
.rodape a { color: var(--apagado); }

/* ---------- telas maiores ---------- */
@media (min-width: 720px) {
  h1 { font-size: 2.9rem; }
  h2 { font-size: 2.1rem; }
  section { padding: 84px 0; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .duas { grid-template-columns: 1.3fr .7fr; gap: 44px; }
  .rodape-in {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
  }
}

@media (min-width: 980px) {
  .menu { display: flex; }
  .hero { padding: 60px 0 90px; }
  .hero .wrap { max-width: 1300px; }
  .hero-in {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 124px;
    align-items: center;
  }
  .hero-img { margin: 0; }
  .grade { grid-template-columns: repeat(3, 1fr); }
  h1 { font-size: 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}