/* ===========================================================================
   PÁGINA INTEIRA NA LINHA DO TOPO NOVO (02/10)
   O topo ganhou luz, grade e o app de verdade e o dono aprovou ("outra cara
   pro negócio"). Este arquivo leva o mesmo acabamento para o resto: títulos
   com mais peso, cartões com ícone e profundidade, passos ligados, comparativo
   com contraste, depoimentos sem sobra branca e o fecho com a luz do topo.
   Só visual: a copy é a mesma. Carregado por último; tirar o <link> desfaz.
=========================================================================== */

/* ---------- ritmo e títulos ---------- */
.secao { position: relative; }
.secao h2 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.secao h2 + .texto { margin-top: 18px; }

.kicker {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--amarelo) !important;
  opacity: 1 !important;
}
.kicker::before, .kicker::after {
  content: ''; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 199, 0, 0.7));
}
.kicker::after { transform: scaleX(-1); }

/* seções de fundo: luz amarela fraca no alto, em vez de cinza chapado */
.fundo {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(245, 199, 0, 0.07), transparent 70%),
    #070707;
}

/* ---------- cartões com ícone ---------- */
.item {
  position: relative;
  background: linear-gradient(180deg, #151515, #0b0b0b) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 26px 24px 24px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.item:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 199, 0, 0.45) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 26px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 199, 0, 0.08);
}
.ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--amarelo);
  background: rgba(245, 199, 0, 0.1);
  border: 1px solid rgba(245, 199, 0, 0.28);
  box-shadow: 0 0 24px rgba(245, 199, 0, 0.12);
}
.ico svg { width: 23px; height: 23px; }
.item h3 { font-size: 19px !important; letter-spacing: -0.01em; }

/* ---------- frase de impacto ---------- */
.frase-forte {
  position: relative;
  max-width: 760px;
  margin: 64px auto 0 !important;
  padding: 34px 28px;
  border-radius: 22px;
  font-size: clamp(24px, 3.4vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  background: radial-gradient(80% 120% at 50% 0%, rgba(245, 199, 0, 0.12), transparent 70%);
  border: 1px solid rgba(245, 199, 0, 0.22);
}

/* ---------- passos do método ---------- */
.passos { position: relative; gap: 20px !important; }
.passo {
  position: relative;
  background: linear-gradient(180deg, #121212, #090909) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  padding: 30px 26px !important;
}
.passo .num {
  width: 52px !important; height: 52px !important;
  font-size: 22px !important;
  border-radius: 16px !important;
  background: var(--amarelo) !important;
  color: #000 !important;
  box-shadow: 0 0 0 6px rgba(245, 199, 0, 0.12), 0 10px 30px rgba(245, 199, 0, 0.25);
  margin-bottom: 20px;
}
@media (min-width: 720px) {
  /* linha ligando os três passos, por trás dos números */
  .passos::before {
    content: '';
    position: absolute; left: 14%; right: 14%; top: 56px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 199, 0, 0.5), transparent);
    z-index: 0;
  }
  .passo { z-index: 1; }
}

/* ---------- botões "Ver os planos" no tamanho de botão ---------- */
.secao .btn.cheio {
  display: inline-block;
  width: auto;
  min-width: 300px;
  box-shadow: 0 14px 40px rgba(245, 199, 0, 0.22);
}
.planos .btn.cheio { display: block; width: 100%; min-width: 0; }

/* ---------- comparativo ---------- */
.versus-sec .wrap.estreito { max-width: 980px; }
.versus { gap: 20px !important; }
.col { border-radius: 22px !important; padding: 30px 28px !important; }
.ruim { background: #0c0c0c !important; border-color: rgba(255, 90, 90, 0.18) !important; }
.ruim li { color: rgba(255, 255, 255, 0.5) !important; }
.bom {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(245, 199, 0, 0.14), transparent 70%),
    #0d0b02 !important;
  border-color: rgba(245, 199, 0, 0.6) !important;
  box-shadow: 0 0 60px rgba(245, 199, 0, 0.12), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.bom li { color: #fff !important; }
@media (min-width: 720px) {
  .versus { grid-template-columns: 1fr 1.08fr !important; align-items: center; }
  .bom { transform: scale(1.02); }
}

/* ---------- concursos e matérias ---------- */
.concursos li {
  background: linear-gradient(180deg, #151515, #0d0d0d);
  border-color: rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.concursos li:hover { border-color: rgba(245, 199, 0, 0.5); color: var(--amarelo); }
.estados-destaque {
  background: radial-gradient(80% 100% at 50% 0%, rgba(245, 199, 0, 0.1), transparent 70%), #0b0a04 !important;
  border-radius: 22px !important;
  box-shadow: 0 0 50px rgba(245, 199, 0, 0.07);
}
.materias-caixa { border-radius: 18px !important; }

/* ---------- atualização semanal: vira um cartão de destaque ---------- */
.atualiza-sec .wrap.estreito {
  max-width: 860px;
  padding-top: 46px; padding-bottom: 46px;
  border-radius: 26px;
  border: 1px solid rgba(245, 199, 0, 0.25);
  background: radial-gradient(80% 90% at 50% 0%, rgba(245, 199, 0, 0.12), transparent 70%), #0a0a0a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
@media (max-width: 719px) {
  .atualiza-sec .wrap.estreito { margin: 0 16px; width: auto; padding: 34px 20px; }
}

/* ---------- depoimentos: print inteiro, sem sobra branca ---------- */
.prova-sec .esteira { align-items: flex-start; }
.prova-sec .cartao {
  background: transparent !important;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---------- FAQ ---------- */
.fundo details {
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px;
  padding: 4px 22px !important;
  margin-top: 10px;
  transition: border-color 0.2s ease;
}
.fundo details[open] { border-color: rgba(245, 199, 0, 0.4) !important; }
.fundo details summary { font-weight: 800; }

/* ---------- fecho com a luz do topo ---------- */
.fim {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0 116px !important;
  background:
    radial-gradient(55% 70% at 50% 100%, rgba(245, 199, 0, 0.2), transparent 70%),
    #000 !important;
  border-top: 1px solid var(--linha);
}
.fim::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 70%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 70%, #000 25%, transparent 75%);
}
.fim h2 { font-size: clamp(32px, 5vw, 56px) !important; line-height: 1.05; letter-spacing: -0.03em; }
.fim .btn { box-shadow: 0 16px 50px rgba(245, 199, 0, 0.3); }

/* ---------- oferta: palco próprio, último bloco ---------- */
.planos-sec {
  background:
    radial-gradient(60% 45% at 50% 30%, rgba(245, 199, 0, 0.1), transparent 70%),
    #000;
}
.plano.destaque { box-shadow: 0 0 80px rgba(245, 199, 0, 0.16), 0 30px 70px rgba(0, 0, 0, 0.6); }

/* ---------- celular ---------- */
@media (max-width: 719px) {
  .secao h2 { font-size: clamp(28px, 7.6vw, 34px); }
  .item { text-align: left !important; }
  .ico { width: 42px; height: 42px; margin-bottom: 14px; }
  .passo { text-align: left !important; }
  .passo .num { margin-left: 0 !important; }
  .secao .btn.cheio { display: block; width: 100%; min-width: 0; }
  .frase-forte { margin-top: 40px !important; padding: 26px 20px; }
  .fim { padding: 76px 0 80px !important; }
}

/* ajustes de quebra: em coluna estreita o título grande quebrava torto */
.wrap.estreito h2 { font-size: clamp(28px, 4vw, 44px); }
.atualiza-sec h2 { font-size: clamp(26px, 3.4vw, 38px) !important; }
/* luz do fecho no meio, para não vazar como faixa em cima da oferta */
.fim {
  background:
    radial-gradient(55% 65% at 50% 55%, rgba(245, 199, 0, 0.16), transparent 70%),
    #000 !important;
}

/* Em telas grandes os fundos vão de ponta a ponta e o conteúdo fica em
   1120px (.wrap). Em 02/10 a página chegou a ser travada em 1600px com borda
   dos lados; o dono preferiu fundo cheio. */

/* Nada passa da lateral da tela. clip (e não hidden) para não quebrar o
   cabeçalho fixo, que deixa de grudar quando o body vira área de rolagem. */
html, body { overflow-x: clip; max-width: 100%; }

/* passos do método: número e título na mesma linha, texto embaixo na largura
   toda. Antes o número ficava sozinho numa linha e o cartão crescia à toa. */
.passo {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
}
.passo .num {
  width: 44px !important; height: 44px !important;
  font-size: 19px !important;
  border-radius: 13px !important;
  margin: 0 !important;
}
.passo h3 { margin: 0 !important; line-height: 1.2; }
.passo p { grid-column: 1 / -1; margin-top: 16px; }
@media (min-width: 720px) { .passos::before { top: 52px; } }
.passo { align-content: start; }

/* cartões com ícone: ícone e título na mesma linha, texto embaixo na largura
   toda (mesmo ajuste dos passos, para encurtar a página). */
.item {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
  align-content: start;
}
.item .ico { margin: 0 !important; width: 42px; height: 42px; }
.item h3 { margin: 0 !important; line-height: 1.25; }
.item p { grid-column: 1 / -1; margin-top: 12px; }

/* depoimentos em arte quadrada (03/10): a arte já tem fundo e borda, então o
   cartão perde a moldura e o espaço interno da regra geral de .cartao */
.prova-sec .cartao {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.prova-sec .cartao img { width: 100%; height: 100%; object-fit: cover; }

/* depoimentos menores: sempre aparece um pedaço do próximo, mostrando que
   tem mais (pedido do dono em 03/10) */
.prova-sec .cartao { width: min(55vw, 250px) !important; }
@media (min-width: 900px) { .prova-sec .cartao { width: 290px !important; } }