/* ===================================================================
   RESUMO CARD · landing v2
   Só o que a v2 acrescenta. Entra antes do style.css de propósito, para
   o arquivo principal continuar mandando no que já estava aprovado, e
   aqui ficar só o que é novo, com especificidade própria.
   =================================================================== */

/* ---------- kicker acima do título ---------- */
.kicker {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 10px;
}

/* ---------- garantia colada no botão ---------- */
.cta-garantia {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}
.cta-garantia::before {
  content: '✓';
  color: #34d399;
  font-weight: 900;
  margin-right: 6px;
}

/* ===================================================================
   O PREÇO QUE DESCE
   O valor de tabela fica em cima, riscado. O número grande começa em 497 e
   desce até 197 em dois segundos, assim que a oferta entra na tela. Quem não
   tem JavaScript, ou pediu menos movimento, vê 197 parado, que é o valor que
   já está escrito no HTML.
   =================================================================== */
.ofr-preco { text-align: center; margin: 16px 0 4px; }

.ofr-de {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}
.ofr-de s { color: rgba(255, 255, 255, 0.38); }

.ofr-valor {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 6px 2px 2px;
}

/* A PARCELA é o número grande: é por ela que a pessoa sente o preço. */
.ofr-valor {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1;
}
.ofr-vezes {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--branco);
  margin-top: 16px;
}
.ofr-cifrao {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--amarelo);
  margin-top: 18px;
}
.ofr-parcela {
  font-size: 76px;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.ofr-cent {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  vertical-align: top;
  position: relative;
  top: 8px;
}

/* o à vista fica embaixo, menor, e é nele que a descida de 497 acontece.
   Tabular para o 4 e o 1 ocuparem a mesma largura e o valor não tremer. */
.ofr-avista {
  margin-top: 10px;
  font-size: 16px;
  color: var(--cinza);
}
.ofr-avista b {
  color: var(--branco);
  font-weight: 800;
}
.ofr-num { font-variant-numeric: tabular-nums; }

/* brilho que acende quando o número para */
.ofr-brilho {
  position: absolute;
  inset: -18px -30px;
  border-radius: 999px;
  background: radial-gradient(60% 70% at 50% 50%, rgba(245, 199, 0, 0.3), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.ofr-preco.parou .ofr-brilho {
  animation: ofr-acende 900ms ease-out forwards;
}
@keyframes ofr-acende {
  0% { opacity: 0; transform: scale(0.85); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.35; transform: scale(1); }
}

.ofr-termos {
  margin-top: 10px;
  font-size: 14px;
  color: var(--cinza);
}
.ofr-termos b { color: var(--branco); font-weight: 800; }
.ofr-ponto {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  margin: 0 8px;
  vertical-align: middle;
}

.ofr-economia {
  margin-top: 8px;
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border-radius: 8px;
  padding: 4px 10px;
  opacity: 0;
  transform: translateY(4px);
}
.ofr-preco.parou .ofr-economia {
  animation: ofr-sobe 500ms ease-out 260ms forwards;
}
@keyframes ofr-sobe {
  to { opacity: 1; transform: translateY(0); }
}

/* quem pediu menos movimento no sistema vê o valor final, sem descida */
@media (prefers-reduced-motion: reduce) {
  .ofr-preco.parou .ofr-brilho,
  .ofr-preco.parou .ofr-economia { animation: none; opacity: 1; transform: none; }
}

/* ===================================================================
   DOIS PLANOS LADO A LADO
   Semestral e anual, cada um no seu card. O vitalício fica fora: três
   colunas na hora de decidir dividem a atenção e a comparação entre
   elas rouba o espaço da própria oferta.
   =================================================================== */
.planos.dois-planos {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}

/* A diagramação dos dois é a MESMA. O que separa o destaque é só a moldura
   amarela, a fita e o botão cheio. O semestral fica um pouco mais quieto no
   nome e no brilho, e nada além disso. */
.planos.dois-planos .plano:not(.destaque) .plano-nome { color: rgba(255, 255, 255, 0.55); }
.planos.dois-planos .plano:not(.destaque) .ofr-brilho { opacity: 0 !important; animation: none !important; }

@media (max-width: 760px) {
  .planos.dois-planos { grid-template-columns: 1fr; gap: 18px; }
  /* no celular o destaque vem primeiro: é o plano que a gente quer vender */
  .planos.dois-planos .plano.destaque { order: -1; }
}

/* ---------- lista do que entra ---------- */
.recebe-titulo {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* ===================================================================
   PARA QUEM É · três cenas
   =================================================================== */
.cenas-sec { padding-top: 10px; }

.cenas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 860px) {
  .cenas { grid-template-columns: 1fr; }
}

.cena {
  position: relative;
  background: var(--preto-3);
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 22px 20px 18px;
}
.cena-num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--amarelo);
}
.cena-tit {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.cena-txt {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cinza);
}
.cena-arte {
  margin-top: 18px;
  border-top: 1px solid var(--linha);
  padding-top: 16px;
  min-height: 104px;
}

/* cena 1: a curva do esquecimento caindo.
   Em flex porque com inline-block os quatro dias de 25% somavam mais de 100%
   por causa do espaço entre as tags, e "qua" caía para a linha de baixo. */
.curva { position: relative; display: flex; flex-wrap: wrap; }
.curva-linha {
  flex: 0 0 100%;
  display: block;
  height: 54px;
  border-radius: 6px;
  background:
    linear-gradient(to right, rgba(245, 199, 0, 0.5), rgba(245, 199, 0, 0.05)),
    repeating-linear-gradient(to right, rgba(255,255,255,0.06) 0 1px, transparent 1px 25%);
  clip-path: polygon(0 0, 25% 42%, 55% 70%, 80% 84%, 100% 92%, 100% 100%, 0 100%);
}
.curva-rot {
  position: absolute;
  top: 0; right: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}
.curva-dia {
  flex: 1 1 25%;
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 6px;
}

/* cena 2: a pilha de matérias parada */
.pilha { display: flex; flex-direction: column; gap: 5px; }
.pilha-item {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  padding: 5px 9px;
}
.pilha-item.feito {
  color: var(--preto);
  background: var(--amarelo);
}
.pilha-tag {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fca5a5;
  letter-spacing: 0.04em;
}

/* cena 3: o mesmo erro voltando */
.erros { display: flex; flex-direction: column; gap: 9px; }
.erro-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.erro-linha b { flex: 1; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.erro-linha .x {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.14);
  border-radius: 5px;
  padding: 2px 5px;
}

.cenas-fecho { margin-top: 24px; }

/* ===================================================================
   AULA EM ÁUDIO
   A barra imita a do aplicativo, mas é desenho: não tem botão de verdade.
   =================================================================== */
.audio-sec { padding-top: 10px; }

.audio-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px auto 0;
  max-width: 560px;
  background: var(--preto-3);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 14px 16px;
}

.audio-fone {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(245, 199, 0, 0.14);
  color: var(--amarelo);
}
.audio-fone svg { width: 22px; height: 22px; }

.audio-txt { flex: none; line-height: 1.3; }
.audio-txt b { display: block; font-size: 14px; font-weight: 800; }
.audio-txt i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* onda que respira, só para a barra não parecer um print morto */
.audio-onda {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  overflow: hidden;
}
.audio-onda i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(245, 199, 0, 0.55);
  animation: audio-pulsa 1200ms ease-in-out infinite alternate;
}
.audio-onda i:nth-child(odd) { animation-duration: 900ms; }
.audio-onda i:nth-child(3n) { animation-duration: 1500ms; background: rgba(245, 199, 0, 0.3); }
.audio-onda i:nth-child(4n) { animation-delay: 300ms; }
.audio-onda i:nth-child(5n) { animation-delay: 600ms; }
@keyframes audio-pulsa {
  from { height: 5px; }
  to { height: 24px; }
}

.audio-play {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amarelo);
  color: var(--preto);
}
.audio-play svg { width: 18px; height: 18px; margin-left: 2px; }

.audio-nota {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 560px) {
  .audio-txt b { font-size: 13px; }
  .audio-onda { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-onda i { animation: none; height: 14px; }
}

/* ---------- rodapé jurídico ---------- */
.juridico {
  color: rgba(255, 255, 255, 0.32) !important;
  line-height: 1.6;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* O selo do plano de entrada não é economia, é só o custo por mês: fica
   cinza para o verde continuar significando vantagem no anual. */
.ofr-economia.ofr-neutra {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}