/* ==========================================================================
   responsive.css
   Base (style.css) é mobile. Aqui só adicionamos/ajustamos para telas maiores.
   ========================================================================== */

/* ---------- TABLET (>= 640px) ---------- */
@media (min-width: 640px) {
  .grupo-cta { flex-direction: row; flex-wrap: wrap; }
  .grupo-cta .btn { flex: none; }

  .transformacao-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-investimento { grid-template-columns: repeat(2, 1fr); }

  .barra-fixa-mobile .btn { font-size: 0.92rem; }
}

/* ---------- MOBILE/TABLET (< 1024px) ---------- */
@media (max-width: 1023px) {
  .hero::after { display: none; }
}

/* ---------- TABLET MAIOR (>= 760px) ---------- */
@media (min-width: 760px) {
  .grid-depoimentos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- DESKTOP (>= 1024px) ---------- */
@media (min-width: 1024px) {
  body { font-size: 17px; }

  .secao { padding: var(--space-2xl) 0; }

  /* Header completo */
  .header__nav {
    position: static;
    display: flex;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: var(--space-md);
    font-size: 0.9rem;
    color: #C9D6DA;
  }
  .header__nav.header__nav--aberta { display: flex; }
  .header__nav a {
    padding: 0;
    border-radius: 0;
    font-family: var(--fonte-corpo);
    font-size: inherit;
    font-weight: 400;
    transition: color var(--transicao);
  }
  .header__nav a:hover,
  .header__nav a:focus-visible {
    background: transparent;
    color: var(--branco);
  }
  .header__menu-toggle { display: none; }
  .header__cta { display: inline-flex; }

  /* Hero em duas colunas: texto + bloco de destaque lateral */
  .hero__interno {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .hero__sub { max-width: 46ch; }

  /* Dores: texto + lista lado a lado */
  .dores__interno {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  /* Autoridade: foto + título/stats + bio, três colunas */
  .grid-autoridade {
    grid-template-columns: minmax(320px, 0.85fr) 1.15fr;
    align-items: start;
    gap: var(--space-xl);
  }
  .autoridade__foto-coluna { grid-row: 1 / span 2; }
  .autoridade__foto { min-height: 560px; }
  .stats-autoridade { margin: 0 0 var(--space-lg); }

  /* Garantia: selo ao lado do texto */
  .garantia__grid { grid-template-columns: 200px 1fr; text-align: left; }
  .garantia__grid .selo-garantia { margin: 0; }

  /* Método: timeline com mais respiro */
  .etapa { grid-template-columns: 64px 1fr; gap: var(--space-lg); }
  .etapa__numero { width: 64px; height: 64px; font-size: 1.2rem; }
  .timeline::before { left: 31px; }
  .etapa__corpo { padding: var(--space-lg); }

  /* Para quem: duas colunas */
  .lista-paraquem { grid-template-columns: 1fr 1fr; display: grid; gap: var(--space-md) var(--space-lg); }

  /* Depoimentos: três colunas */
  .grid-depoimentos { grid-template-columns: repeat(3, 1fr); }

  /* Avaliações do Google: esteira horizontal com vários cards visíveis */
  .avaliacoes-google__topo {
    grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr);
    align-items: start;
  }
  .avaliacoes-google__link {
    justify-self: start;
  }
  .google-review {
    flex-basis: calc((100% - 2.2rem) / 3);
  }
  .avaliacoes-google__nav--anterior {
    left: -1.25rem;
  }
  .avaliacoes-google__nav--proxima {
    right: -1.25rem;
  }

  /* Investimento: cartões lado a lado, centrados */
  .grid-investimento { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .comparativo-investimento { margin-left: auto; margin-right: auto; text-align: center; }
  .investimento .titulo-secao,
  .investimento .eyebrow { margin-left: auto; margin-right: auto; }

  /* FAQ centralizado com largura confortável de leitura */
  .lista-faq { max-width: 760px; margin: var(--space-lg) auto 0; }

  /* Barra fixa mobile some no desktop — CTA já está no header */
  .barra-fixa-mobile { display: none; }
  .whatsapp-flutuante { bottom: var(--space-md); }
  .footer { padding-bottom: var(--space-xl); }

  .footer__topo { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .footer__ctas { flex-direction: row; }
}

/* ---------- DESKTOP GRANDE (>= 1280px) ---------- */
@media (min-width: 1280px) {
  .container { padding: 0 var(--space-lg); }
}

/* ---------- CENTRALIZAÇÃO DE SEÇÕES CURTAS (todas as telas) ---------- */
.secao--centrada .container { text-align: center; }
.secao--centrada .titulo-secao,
.secao--centrada .texto-lead,
.secao--centrada .grupo-cta { margin-left: auto; margin-right: auto; }
.secao--centrada .grupo-cta { justify-content: center; }