/* ============================================================
   InfinityTrader — Landing (só o específico da página).
   Base compartilhada (reset/header/footer/CTA/botões/tipografia
   de seção) vem de web-base.css — carregar ANTES deste arquivo.
   ============================================================ */

/* hero */
.hero{background:var(--brand-grad);color:#fff;overflow:hidden}
.hero .container{display:grid;grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:48px}
.hero h1{font-size:clamp(28px,7vw,50px);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.hero .sub{font-size:17px;opacity:.94;margin:18px 0 26px;max-width:520px}
.hero .mini{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:20px}
.hero-visual{background:#fff;border-radius:var(--radius);box-shadow:var(--sombra-md);padding:16px}
.hv-bar{height:10px;border-radius:6px;background:var(--c100);margin-bottom:12px}
.hv-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.hv-kpi{background:var(--c50);border:1px solid var(--c200);border-radius:10px;padding:12px}
.hv-kpi .l{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--c500);font-weight:700}
.hv-kpi .v{font-size:20px;font-weight:800;color:var(--c900);margin-top:3px}
.hv-kpi .v.g{color:var(--verde)}
.hv-chart{height:110px;border-radius:10px;background:linear-gradient(180deg,var(--brand-light),transparent);
  position:relative;border:1px solid var(--c200);overflow:hidden}
.hv-chart svg{position:absolute;inset:0;width:100%;height:100%}

/* sections */
section{padding:52px 0}

/* benefícios */
.benef{display:grid;grid-template-columns:1fr;gap:14px;margin-top:32px}
.bcard{background:var(--white);border:1px solid var(--c200);border-radius:var(--radius);padding:24px;transition:.2s}
.bcard:hover{box-shadow:var(--sombra-md);transform:translateY(-3px)}
.bcard .ic{width:46px;height:46px;border-radius:12px;background:var(--brand-light);color:var(--brand-dark);
  display:grid;place-items:center;font-size:20px;margin-bottom:14px}
.bcard h3{font-size:17px;margin-bottom:8px}
.bcard p{font-size:14.5px;color:var(--c600)}

/* steps */
.steps{background:var(--c50)}
.steps-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:44px}
.step{background:#fff;border:1px solid var(--c200);border-radius:var(--radius);padding:28px;position:relative}
.step .n{position:absolute;top:-16px;left:24px;width:36px;height:36px;border-radius:10px;background:var(--brand-grad);
  color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:var(--sombra)}
.step h3{font-size:18px;margin:12px 0 8px}
.step p{font-size:14.5px;color:var(--c600)}

/* proof */
.proof .container{display:grid;grid-template-columns:1fr;gap:32px}
.proof-shot{background:var(--app-side-bg);border-radius:var(--radius);padding:18px;box-shadow:var(--sombra-md)}
.ps-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
.ps-kpi{background:rgba(255,255,255,.06);border-radius:10px;padding:12px}
.ps-kpi .l{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.ps-kpi .v{font-size:16px;color:#fff;font-weight:800;margin-top:4px}
.ps-kpi .v.g{color:#3ee08f}
.ps-chart{height:140px;border-radius:10px;background:rgba(255,255,255,.04);position:relative;overflow:hidden}
.ps-chart svg{position:absolute;inset:0;width:100%;height:100%}

/* planos */
.plans-wrap{background:var(--c50)}
.plans{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px;
  justify-content:center}
.plan{background:#fff;border:2px solid var(--c200);border-radius:var(--radius);padding:30px 24px;text-align:center;position:relative}
.plan.hot{border-color:var(--brand);box-shadow:var(--sombra-md)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;padding:5px 14px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.plan .name{font-size:15px;font-weight:700;color:var(--c500);text-transform:uppercase;letter-spacing:.05em}
.plan .price{font-size:40px;font-weight:800;color:var(--c900);margin:10px 0 2px}
.plan .price small{font-size:16px;color:var(--c500);font-weight:600}
.plan .pix{display:inline-flex;align-items:center;gap:6px;margin:12px 0;font-size:12px;font-weight:700;
  background:var(--verde-bg);color:var(--verde);padding:5px 12px;border-radius:99px}
.plan ul{list-style:none;text-align:left;margin:16px 0;display:grid;gap:9px}
.plan li{font-size:14px;color:var(--c600);display:flex;gap:9px}
.plan li::before{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:var(--verde)}
.plan .buy{display:block;background:var(--brand);color:#fff;font-weight:700;padding:14px;border-radius:var(--radius-sm);transition:.15s}
.plan .buy:hover{background:var(--brand-dark)}
.plan.hot .buy{background:var(--brand-grad)}

/* trust */
.trust{background:var(--app-side-bg);color:#fff}
.trust .container{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:32px 20px}
.trust .item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.06);padding:12px 18px;border-radius:99px}
.trust .item .i{width:26px;height:26px;border-radius:7px;background:var(--brand);display:grid;place-items:center;font-size:12px}

/* faq */
.faq-list{max-width:760px;margin:36px auto 0;display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--c200);border-radius:var(--radius);padding:20px 22px}
.faq-item h3{font-size:16px;margin-bottom:8px}
.faq-item p{font-size:14.5px;color:var(--c600)}

/* ============ >= 720px ============ */
@media(min-width:720px){
  section{padding:72px 0}
  .hero .container{grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:72px}
  .hero .sub{font-size:19px}
  .hv-kpi .v{font-size:22px}
  .benef{grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
  .steps-grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .proof .container{grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .ps-kpi .v{font-size:18px}
  /* auto-fit + max de 340px: o grid se ajusta a QUANTOS planos existirem.
     Era repeat(3,1fr) com dois planos ativos -- sobrava uma coluna vazia a
     direita e os cards ficavam encostados a esquerda, parecendo desalinhados.
     Com justify-content:center no bloco base, dois cards centralizam, tres
     preenchem, e um fica sozinho no meio. */
  .plans{grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:20px}
}
@media(max-width:719px){
  .hero-visual{order:2}
  .benef .bcard,.step,.plan{}
}

/* ===== Selos de forma de pagamento no card do plano ================= */
/* Ate agora so havia .plan .pix. O cartao ja era aceito pelo checkout
   (Pay::subscribe trata CREDIT_CARD), mas o card nao dizia — e e no card
   que a decisao acontece. */
.plan .pay-badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.plan .pay-badges .pix,
.plan .pay-badges .cc{margin:0}
/* .cc e nao .card: `.card` e generico e ja e usado (escopado) pela
   pagina do diagnostico. Um seletor de selo nao deve disputar um nome
   tao amplo. */
.plan .cc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  background:var(--brand-light);color:var(--brand-dark);padding:5px 12px;border-radius:99px}

/* ===== Bloco do diagnostico (abaixo dos planos) ===================== */
.diag-cta{background:#fff}
.diag-box{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  background:var(--c50);border:1px solid var(--c200);border-radius:var(--radius);padding:32px 26px}
.diag-copy .eyebrow{color:var(--brand-dark)}
.diag-copy .h2{margin:8px 0 12px}
.diag-copy .lead{margin:0 0 22px}
.diag-note{font-size:12.5px;color:var(--c500);margin-top:12px}

/* Lista das 5 etapas: prova que o diagnostico tem substancia, sem
   precisar de screenshot. */
.diag-stages{list-style:none;display:grid;gap:10px}
.diag-stages li{background:#fff;border:1px solid var(--c200);border-radius:var(--radius-sm);
  padding:13px 16px;display:grid;gap:2px}
.diag-stages b{font-size:13.5px;color:var(--c900)}
.diag-stages span{font-size:12.5px;color:var(--c600);line-height:1.45}

@media(min-width:900px){
  .diag-box{grid-template-columns:1.15fr .85fr;gap:44px;padding:40px 44px}
}

/* Linha de apoio do preço: equivalente mensal, valor cheio e âncora riscada.
   Só aparece nos cards de plano — não é utilitário global. */
.plan .price-sub{font-size:13px;color:var(--c500);margin-top:-4px;margin-bottom:14px;line-height:1.5}
.plan .price-sub .riscado{text-decoration:line-through;color:var(--c300);margin-right:6px}
/* Selo "Economize N%" precisa de mais peso que "Mais popular": é número,
   não opinião, e é o que justifica escolher o anual. */
.plan.hot .tag{letter-spacing:.03em;padding:5px 16px}

/* ===== ARTIGOS (blog na home) ==========================================
   auto-fill + max 380px: 3 posts enchem a linha; com 1 ou 2 publicados os
   cards mantêm o tamanho em vez de esticar pela largura toda — que é o que
   denuncia "blog vazio". Mesmo motivo do grid de planos. */
.artigos{background:#fff}
.artigos-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
.artigo{display:block;background:#fff;border:1px solid var(--c200);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sombra);
  transition:box-shadow .15s,transform .15s}
.artigo:hover{box-shadow:var(--sombra-md);transform:translateY(-3px)}
.artigo img{width:100%;height:180px;object-fit:cover;display:block}
.artigo-txt{padding:18px 20px 20px}
.artigo-txt h3{font-size:17px;font-weight:700;line-height:1.35;color:var(--c900);margin:0 0 8px}
.artigo-txt p{font-size:14px;color:var(--c600);line-height:1.55;margin:0 0 12px;
  /* 2 linhas: subtítulos variam muito e sem corte o card desalinha */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artigo-data{font-size:12px;color:var(--c500);font-weight:600}

/* Secundário: leva ao blog sem competir com o CTA de cadastro. */
.btn-ghost{display:inline-block;padding:13px 26px;border-radius:99px;font-weight:700;font-size:15px;
  text-decoration:none;color:var(--brand-dark);background:transparent;border:2px solid var(--c200)}
.btn-ghost:hover{border-color:var(--brand);background:var(--c50)}

@media(min-width:720px){
  .artigos-grid{grid-template-columns:repeat(auto-fill,minmax(280px,380px));justify-content:center}
}