/**
 * responsive.css
 * Media queries para responsividade da página de vendas do Método 3M.
 * Breakpoints: 1024px (tablet), 768px (mobile), 480px (mobile pequeno)
 * Localização: cursos/online/compreometodo3m/css/responsive.css
 */

/* ════════════════════════════════════════
   TABLET — 1024px
════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Resultados */
  .resultados-nav-btn {
    width:     36px;
    height:    36px;
    font-size: 17px;
  }


  /* Hero: empilha texto + card de oferta */
  .hero-layout {
    grid-template-columns: 1fr;
    gap:                   40px;
  }

  .hero-texto {
    text-align: center;
  }

  .hero-sub {
    max-width: 100%;
  }

  .hero-selos {
    justify-content: center;
  }

  .hero-oferta {
    max-width: 480px;
    margin:    0 auto;
    width:     100%;
  }

  /* Pilares: empilha em coluna única centrada */
  .pilares-grid {
    grid-template-columns: 1fr;
    max-width:             480px;
    margin-left:           auto;
    margin-right:          auto;
  }

  /* Benefícios: remove coluna lateral */
  .beneficios-layout {
    grid-template-columns: 1fr;
  }

  .beneficios-card-lateral {
    position: static;
  }

  /* Professora: empilha */
  .professora-layout {
    grid-template-columns: 1fr;
    max-width:             560px;
    margin:                0 auto;
    gap:                   56px;
  }

  .professora-foto-wrap {
    max-width: 300px;
    margin:    0 auto;
  }

  .professora-foto-wrap.sem-imagem {
    width:  300px;
    height: 375px;
  }

  .professora-texto {
    text-align: center;
  }

  .professora-texto .linha-dourada {
    margin-left:  auto;
    margin-right: auto;
  }

  .secao-cta-esquerda {
    display:         flex;
    justify-content: center;
  }

  .professora-selos {
    justify-content: center;
  }

  /* Curso: 2 colunas */
  .curso-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bônus: 2 colunas */
  .bonus-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dor: 1 coluna */
  .dor-grid {
    grid-template-columns: 1fr;
  }

  .prova-placeholder-grid,
  .prova-forte-grid,
  .galeria-provas,
  .decisao-caminhos {
    grid-template-columns: 1fr;
  }

  /* Depoimentos: coluna única centrada, como os pilares */
  .depoimentos-grid {
    grid-template-columns: 1fr;
    max-width:             560px;
    margin-left:           auto;
    margin-right:          auto;
  }

  /* Vídeo da professora */
  .professora-video {
    margin-top: 48px;
  }

  /* Pares antes/depois: empilha em coluna única */
  .par-resultado {
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════
   MOBILE — 768px
════════════════════════════════════════ */
@media (max-width: 768px) {

  :root {
    /* Altura reduzida porque o contador do header está desativado.
       Ao reexibir o contador, voltar para 128px. */
    --header-h: 84px;
    /* --header-h: 128px; */
  }

  .secao {
    padding: 60px 0;
  }

  /* Resultados */
  .secao-resultados {
    padding: 60px 0;
  }

  .resultados-cabecalho {
    margin-bottom: 40px;
  }

  .secao-cabecalho {
    margin-bottom: 40px;
  }

  /* Header */
  .header-inner {
    flex-wrap:       wrap;
    justify-content: center;
    gap:             8px 14px;
    padding-top:     9px;
    padding-bottom:  9px;
  }

  .header-marca {
    width: 100%;
  }

  .header-nome {
    font-size: 15px;
  }

  .header-cargo {
    display: none;
  }

  .header-urgencia {
    order: 2;
    gap:   6px;
  }

  .header-urgencia-texto {
    font-size:      10px;
    letter-spacing: 1px;
  }

  .header-timer {
    gap: 5px;
  }

  .header-timer span {
    min-width: 48px;
    padding:   6px 7px;
    font-size: 9px;
  }

  .header-timer strong {
    font-size: 14px;
  }

  .header-cta {
    order:     3;
    padding:   9px 14px;
    font-size: 11px;
  }

  /* Hero */
  .hero {
    padding-top:    calc(var(--header-h) + 28px);
    padding-bottom: 48px;
    min-height:     auto;
  }

  .hero-titulo {
    font-size:   clamp(24px, 6vw, 34px);
    line-height: 1.22;
    text-wrap:   balance;
  }

  .hero-urgencia {
    font-size:      10px;
    line-height:    1.25;
    letter-spacing: 1px;
    padding:        7px 14px;
    margin-bottom:  18px;
  }

  .hero-sub {
    line-height:   1.55;
    margin-bottom: 14px;
  }

  .hero-apoio {
    margin-bottom: 20px;
  }

  .hero-comparacao {
    gap:           10px;
    margin-bottom: 22px;
  }

  .hero-comparacao-card {
    padding: 8px;
    gap:     8px;
  }

  .hero-comparacao-label {
    min-height:     50px;
    font-size:      10px;
    letter-spacing: 0.35px;
  }

  .hero-comparacao-placeholder {
    min-height:   116px;
    aspect-ratio: 4 / 3;
  }

  .hero-comparacao-placeholder span {
    font-size:      10px;
    letter-spacing: 0.6px;
  }

  .hero-microcopy {
    max-width: 320px;
  }

  .hero-selos {
    flex-wrap: wrap;
    gap:       16px;
  }

  /* Pilares */
  .pilares-grid {
    max-width: 100%;
  }

  .pilares-conclusao {
    padding: 28px 24px;
  }

  /* Curso */
  .curso-grid {
    grid-template-columns: 1fr;
  }

  /* Bônus */
  .bonus-grid {
    grid-template-columns: 1fr;
  }

  /* Super bônus */
  .superbonus-box {
    padding: 44px 28px;
  }

  .prova-social-card {
    padding: 32px 24px;
  }

  /* Galeria de provas */
  .galeria-card-midia {
    min-height: 210px;
  }

  /* Contador da oferta */
  .oferta-countdown {
    padding: 20px 16px;
  }

  .countdown {
    gap: 7px;
  }

  .countdown-bloco {
    padding: 10px 4px;
  }

  .countdown-bloco strong {
    font-size: 26px;
  }

  .countdown-bloco span {
    font-size:      9px;
    letter-spacing: 0.6px;
  }

  /* Depoimentos */
  .depoimento-card {
    padding: 26px 22px;
  }

  .prova-placeholder-alto {
    min-height: 210px;
  }

  .decisao-caminho {
    text-align: center;
  }

  .superbonus-vagas {
    padding: 18px 28px;
  }

  .superbonus-vagas-num {
    font-size: 48px;
  }

  /* Investimento */
  .investimento-valor {
    font-size: 76px;
  }

  .investimento-garantia {
    flex-direction: column;
    text-align:     center;
    gap:            14px;
  }

  /* Dor */
  .dor-transicao {
    padding:   24px 20px;
    font-size: 16px;
  }

  /* CTA final */
  .secao-cta-final {
    padding: 72px 0;
  }

  /* Professora */
  .professora-placa {
    position:   static;
    transform:  none;
    margin:     16px auto 0;
    max-width:  240px;
    white-space: normal;
  }
}

/* ════════════════════════════════════════
   MOBILE PEQUENO — 480px
════════════════════════════════════════ */
@media (max-width: 480px) {

  :root {
    /* Altura reduzida porque o contador do header está desativado.
       Ao reexibir o contador, voltar para 152px. */
    --header-h: 84px;
    /* --header-h: 152px; */
  }

  .container {
    padding: 0 16px;
  }

  .header-inner {
    gap: 7px;
  }

  .header-urgencia {
    width: 100%;
  }

  .header-timer {
    width: 100%;
  }

  .header-timer span {
    flex:      1;
    min-width: 0;
    padding:   6px 4px;
  }

  .header-cta {
    width:      100%;
    max-width:  230px;
    text-align: center;
  }

  /* Botões */
  .btn-cta-grande {
    font-size: 15px;
    padding:   18px 28px;
    width:     100%;
    text-align: center;
  }

  .investimento-cta {
    font-size: 14px;
    padding:   18px 24px;
  }

  /* Títulos */
  .secao-titulo {
    font-size: clamp(22px, 6.5vw, 30px);
  }

  /* Hero */
  .hero {
    padding-top: calc(var(--header-h) + 22px);
  }

  /* Headline: em telas de ~360–390px a serifada em corpo grande fica
     pesada — reduz o tamanho e abre a entrelinha sem mexer no desktop. */
  .hero-titulo {
    font-size:      clamp(21px, 6.4vw, 27px);
    line-height:    1.3;
    letter-spacing: 0.2px;
    text-wrap:      balance;
  }

  .hero-sub {
    font-size: 14px;
  }

  .hero-apoio {
    font-size: 14px;
  }

  .secao-cta-centro .btn-cta,
  .secao-cta-esquerda .btn-cta,
  .superbonus-box .btn-cta,
  .decisao-final-box .btn-cta {
    width:      100%;
    text-align: center;
  }

  .secao-cta-esquerda {
    display: flex;
  }

  .prova-placeholder {
    min-height: 132px;
    padding:    20px 16px;
  }

  .galeria-card {
    padding: 10px;
  }

  .galeria-card-midia {
    min-height: 180px;
    padding:    8px;
  }

  .galeria-legenda {
    font-size: 12px;
  }

  /* Contador: 4 blocos ainda cabem lado a lado */
  .countdown {
    gap: 5px;
  }

  .countdown-bloco {
    padding: 9px 2px;
  }

  .countdown-bloco strong {
    font-size: 23px;
  }

  .oferta-countdown-titulo {
    font-size:      12px;
    letter-spacing: 0.8px;
  }

  .hero-selos {
    display: none; /* simplifica em mobile muito pequeno */
  }

  /* Investimento */
  .investimento-valor {
    font-size: 64px;
  }

  .investimento-cifrao {
    font-size: 22px;
    margin-top: 8px;
  }

  .investimento-centavos {
    font-size: 26px;
    margin-top: 10px;
  }

  /* Benefícios */
  .beneficio-item {
    padding: 16px;
  }

  /* Professora */
  .professora-selos {
    gap: 16px;
  }

  /* Curso */
  .curso-formato {
    gap: 8px;
  }

  .curso-formato-item {
    font-size: 12px;
    padding:   8px 14px;
  }

  /* Pagamentos */
  .pagamento-badge {
    font-size: 10px;
    padding:   6px 10px;
  }

  /* Bônus */
  .bonus-item {
    flex-direction: column;
    gap:            10px;
  }

  /* Depoimentos */
  .depoimento-card {
    padding: 24px 18px;
  }

  .depoimento-texto p {
    font-size: 14px;
  }

  /* FAQ */
  .faq-accordion .accordion-btn {
    padding:   18px 16px;
    font-size: 14px;
    gap:       12px;
  }

  .faq-accordion .accordion-corpo-inner {
    padding: 0 16px 20px;
  }
}

/* ════════════════════════════════════════
   MOBILE MUITO PEQUENO — 380px
════════════════════════════════════════ */
@media (max-width: 380px) {

  /* Headline: último ajuste para não passar de ~4 palavras por linha */
  .hero-titulo {
    font-size:   20px;
    line-height: 1.34;
  }

  .countdown-bloco strong {
    font-size: 21px;
  }

  .countdown-bloco span {
    font-size: 8px;
  }
}