/* =====================================================================
   LANDING — CELULAR
   =====================================================================
   Carregada com media="(max-width: 768px)": em desktop o navegador nem
   baixa este arquivo, então o site grande não paga nada por ela.

   O QUE ESTAVA ERRADO, medido no CSS antigo:

   1. `.lp-section` tinha `padding: 76px 0` e NUNCA era reduzido no
      celular. Com 19 seções, são ~2.900px de espaço vazio — a pessoa
      rola meia tela de nada entre cada bloco e desiste antes do preço.

   2. Nove breakpoints diferentes (1080, 900, 860, 760, 720, 640, 600,
      560, 420). O layout se reorganizava em nove pontos distintos, e o
      resultado entre eles era imprevisível. Aqui há UM ponto: 768px.

   3. Inputs com 15px. Abaixo de 16px o iOS dá zoom automático ao focar
      o campo e desalinha a página inteira. Custa uma linha corrigir.

   4. Links do menu sem padding próprio: alvo de toque de ~18px de
      altura, contra os 44px recomendados. Errar o toque é atrito.

   5. Efeitos de mouse (spotlight, botão magnético, parallax) rodando
      em aparelho que não tem mouse — gastam bateria e travam a rolagem
      sem entregar nada.

   PRINCÍPIO DA REFORMULAÇÃO: no celular a pessoa rola com o polegar e
   decide em segundos. Menos respiro vertical, hierarquia mais dura,
   CTA sempre alcançável.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. NADA ESTOURA A LARGURA
   Uma única regra que resolve a classe inteira de bugs de rolagem
   horizontal — o defeito mais comum e mais destrutivo em mobile.
   --------------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }

.lp * { max-width: 100%; }
.lp img, .lp video, .lp svg, .lp iframe { height: auto; }
.lp-wrap { padding-left: 20px; padding-right: 20px; }

/* ---------------------------------------------------------------------
   2. RESPIRO VERTICAL
   De 76px para 44px. Em 19 seções, economiza cerca de 1.200px de
   rolagem — quase duas telas inteiras de celular.
   --------------------------------------------------------------------- */
.lp-section { padding: 44px 0; }
.lp-section-head { margin-bottom: 24px; }
.lp-section-title { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.lp-section-desc { font-size: 15px; line-height: 1.6; }
.lp-section-eyebrow { font-size: 10.5px; }

/* ---------------------------------------------------------------------
   3. TOPO
   Só marca e botão. Os links viraram enfeite espremido; quem navega
   numa landing pelo celular rola, não usa menu.
   --------------------------------------------------------------------- */
.lp-nav { padding: 0; }
.lp-nav-inner { padding: 10px 16px; }
.lp-logo-marca svg { width: 30px; height: 30px; }
.lp-logo-nome { font-size: 14px; }
.lp-logo-nome small { display: none; }

.lp-nav-links a:not(.lp-nav-cta) { display: none; }
.lp-nav-cta {
    padding: 11px 18px;
    font-size: 13.5px;
    min-height: 44px;              /* alvo de toque confortável */
    display: inline-flex;
    align-items: center;
}

/* ---------------------------------------------------------------------
   4. HERO
   Era: título gigante, foto grande, três selos, dois botões, abas de
   público. Tudo isso empurrava o preço para a quinta rolagem.
   Agora: promessa, uma linha de apoio, um botão, e a foto acompanhando
   em vez de dominando.
   --------------------------------------------------------------------- */
.lp-hero { padding: 84px 0 36px; min-height: 0; }
.lp-hero-grid { display: flex; flex-direction: column; gap: 24px; }

.lp-hero-titulo {
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}
/* A animação linha a linha atrasa a leitura da promessa principal
   justamente onde a decisão é mais rápida. */
.lp-hero-titulo .reveal-line span { transform: none !important; opacity: 1 !important; }

.lp-hero-sub, .lp-hero-desc { font-size: 15.5px; line-height: 1.6; }

/* Foto: circular, centralizada, sem os blobs decorativos que
   consumiam altura sem comunicar nada. */
.lp-hero-foto-comp { max-width: 232px; margin: 0 auto; }
.lp-hero-foto-blob-1, .lp-hero-foto-blob-2 { display: none; }
.lp-hero-foto-wrap { border-radius: 50%; aspect-ratio: 1; }

/* Um botão só. Dois CTAs lado a lado no celular dividem a decisão. */
.lp-hero-botoes { flex-direction: column; gap: 10px; width: 100%; }
.lp-hero-botoes .lp-btn-solid { width: 100%; justify-content: center; }
.lp-hero-botoes .lp-btn-ghost { display: none; }

/* Selos: viram uma linha só, discreta */
.lp-hero-selos, .lp-hero-provas {
    display: flex; flex-wrap: wrap; gap: 7px;
    justify-content: flex-start;
}
.lp-hero-selos > div, .lp-hero-provas > div {
    font-size: 11.5px;
    padding: 5px 10px;
}

/* Abas de público: rolagem horizontal em vez de quebrar em três linhas */
.lp-hero-abas {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.lp-hero-abas::-webkit-scrollbar { display: none; }
.lp-hero-abas button { white-space: nowrap; flex-shrink: 0; min-height: 40px; }

/* ---------------------------------------------------------------------
   5. NÚMEROS — grade 2×2 em vez de quatro colunas espremidas
   --------------------------------------------------------------------- */
.lp-stats, .lp-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--paper-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.lp-stats > div, .lp-stats-grid > div {
    background: var(--paper);
    padding: 18px 12px;
    text-align: center;
}
.lp-stat-numero { font-size: 25px; line-height: 1.1; }
.lp-stat-label { font-size: 11px; line-height: 1.35; margin-top: 3px; }

/* ---------------------------------------------------------------------
   6. GRADES QUE VIRAM COLUNA ÚNICA
   --------------------------------------------------------------------- */
.lp-bento,
.lp-material-grid,
.lp-planos-grid,
.lp-metodo-grid,
.lp-mentora-grid,
.lp-apostila-grid,
.guia-cards,
.lp-destaques {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
}
.lp-bento-cell, .lp-bento-grande, .lp-bento-larga { grid-column: auto !important; min-height: 0; }
.lp-bento-grande svg { max-height: 170px; }

/* Público e resultados: chips que rolam na horizontal.
   Empilhados verticalmente eram 9 linhas de altura cada bloco. */
.lp-publico-grid, .lp-resultado-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px;
}
.lp-publico-item, .lp-resultado-item {
    font-size: 12.5px;
    padding: 8px 13px;
    flex: 0 1 auto;
}

/* ---------------------------------------------------------------------
   7. PROGRAMA DO CURSO
   --------------------------------------------------------------------- */
.lp-timeline-header { padding: 14px 15px; gap: 10px; min-height: 56px; }
.lp-timeline-header h3 { font-size: 15px; line-height: 1.3; }
.lp-timeline-num { font-size: 11px; }
.lp-timeline-badge { display: none; }        /* a duração já está no corpo */
.lp-timeline-body-inner { padding: 0 15px 16px; }
.lp-aulas-lista li { font-size: 13.5px; line-height: 1.5; }
.lp-curso-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-curso-numero strong { font-size: 21px; }

/* ---------------------------------------------------------------------
   8. PLANOS E GARANTIA
   --------------------------------------------------------------------- */
.lp-plano { padding: 24px 20px; }
.lp-plano-preco { font-size: 34px; }
.lp-plano-lista li { font-size: 13.5px; }
.lp-plano .lp-btn-solid { width: 100%; justify-content: center; min-height: 50px; }

.lp-garantia { flex-direction: column; text-align: center; padding: 22px 18px; gap: 14px; }
.lp-garantia-texto h3 { font-size: 17px; }
.lp-garantia-texto p { font-size: 14px; }

/* ---------------------------------------------------------------------
   9. FAQ — alvo de toque grande, texto legível
   --------------------------------------------------------------------- */
.lp-faq-pergunta {
    font-size: 14.5px;
    padding: 15px 14px;
    min-height: 52px;
    line-height: 1.4;
    gap: 12px;
}
.lp-faq-resposta-inner { font-size: 14px; line-height: 1.6; padding: 0 14px 15px; }
.lp-faq-ilustra-wrap { display: none; }      /* ilustração decorativa: só ocupa tela */

/* ---------------------------------------------------------------------
   10. RODAPÉ
   --------------------------------------------------------------------- */
.lp-footer { padding: 36px 0 96px; }         /* espaço extra p/ a barra fixa */
.lp-footer-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lp-footer-col-marca { grid-column: 1 / -1; }
.lp-footer-col h4 { font-size: 12px; margin-bottom: 8px; }
.lp-footer-col a { font-size: 13px; padding: 4px 0; display: block; }
.lp-footer-base { flex-direction: column; gap: 10px; text-align: center; font-size: 12px; }

/* ---------------------------------------------------------------------
   11. BARRA FIXA DE CONVERSÃO
   O polegar alcança a base da tela; o topo exige reposicionar a mão.
   A barra fica sempre visível no celular, com o preço ao lado do botão —
   sem preço, o clique é hesitante.
   --------------------------------------------------------------------- */
.lp-sticky-cta {
    display: flex !important;
    transform: translateY(0) !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 12px;
    align-items: center;
    box-shadow: 0 -6px 20px rgba(14,17,22,0.13);
}
.lp-sticky-cta span {
    font-size: 12.5px;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.lp-sticky-cta a {
    flex-shrink: 0;
    min-height: 46px;
    padding: 12px 20px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
}

/* O botão flutuante do WhatsApp sobe para não colidir com a barra */
.lp-whatsapp-float { bottom: calc(78px + env(safe-area-inset-bottom)); right: 14px; }

/* ---------------------------------------------------------------------
   12. FORMULÁRIOS
   16px é o mínimo que impede o iOS de dar zoom ao focar o campo.
   --------------------------------------------------------------------- */
.lp input, .lp select, .lp textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
}
.lp textarea { min-height: 110px; }
.lp button, .lp .lp-btn-solid, .lp .lp-btn-ghost { min-height: 48px; }

/* ---------------------------------------------------------------------
   13. DESEMPENHO
   Efeitos que dependem de mouse não existem no toque — só custam
   bateria e travam a rolagem.
   --------------------------------------------------------------------- */
.lp [data-spotlight]::before,
.lp [data-spotlight]::after { display: none !important; }

.lp-nav { backdrop-filter: none; background: var(--paper); }

.lp-reveal { opacity: 1 !important; transform: none !important; }

.lp-hero::before, .lp-hero::after,
.lp-ruido, .lp-grao { display: none; }

/* ---------------------------------------------------------------------
   14. VÍDEO
   --------------------------------------------------------------------- */
.lp-video-palco { border-radius: var(--radius-md); }
.lp-video-palco video { width: 100%; border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------
   15. GUIAS
   --------------------------------------------------------------------- */
.guia-hero { padding: 84px 0 32px; }
.guia-hero-titulo { font-size: 30px; line-height: 1.12; }
.guia-artigo { padding: 80px 0 40px; }
.guia-artigo-wrap { padding: 0 20px; }
.guia-artigo-corpo { font-size: 16.5px; line-height: 1.72; }
.guia-artigo-corpo h2 { font-size: 22px; margin: 32px 0 12px; }
.guia-artigo-corpo h3 { font-size: 17.5px; }
.guia-tabela { font-size: 14px; }
.guia-tabela th, .guia-tabela td { padding: 9px 11px; }
.guia-conversao { padding: 24px 20px; }
.guia-conversao-acoes { flex-direction: column; }
.guia-conversao-acoes a { width: 100%; text-align: center; justify-content: center; }

/* ---------------------------------------------------------------------
   16. TELAS MUITO ESTREITAS (até 360px)
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
    .lp-hero-titulo { font-size: 28px; }
    .lp-section-title { font-size: 23px; }
    .lp-stats > div, .lp-stats-grid > div { padding: 14px 8px; }
    .lp-stat-numero { font-size: 22px; }
    .lp-sticky-cta span { display: none; }     /* só o botão, sem apertar */
    .lp-sticky-cta a { width: 100%; justify-content: center; }
    .lp-footer-colunas { grid-template-columns: 1fr; }
}