/* ===================================================================
   RESPONSIVIDADE — mobile-first
   Breakpoints principais: 600 / 768 / 1024 / 1280
=================================================================== */

/* ---------- ≥ 480px: pequenos ajustes de grade em cards ------------- */
@media (min-width: 480px) {
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- < 768px: Hero ocupa a largura útil da tela no mobile -----
   O card de oferta e os botões, por padrão, se ajustam ao próprio
   conteúdo (align-items: center no container do Hero). Em telas de
   celular isso os deixa visivelmente mais estreitos que o título e o
   texto acima, dando sensação de "coluna presa". Aqui eles passam a
   acompanhar a largura disponível (mesma margem lateral do container,
   ~20-24px). Não afeta nada a partir de 768px.
------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .banner-hero {
    padding-top: var(--space-5);
  }

  .banner-hero__image {
    aspect-ratio: 1024 / 1536;
  }

  .hero {
    padding-bottom: var(--space-4);
  }

  #problema {
    padding-top: var(--space-6);
  }

  .hero-copy h1 {
    font-size: 1.75rem;
  }

  .hero-offer {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* ---------- ≥ 600px --------------------------------------------------- */
@media (min-width: 600px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-connector {
    flex-direction: row;
    justify-content: center;
  }

  .price-connector__step {
    width: auto;
  }

  .price-connector__arrow {
    transform: rotate(0deg);
  }

  .hero-offer__prices {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

/* ---------- ≥ 768px: navegação desktop, grades maiores ---------------- */
@media (min-width: 768px) {
  #problema {
    padding-top: var(--space-7);
  }

  .nav-desktop {
    display: block;
  }

  .header-actions .btn {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .edits-layout {
    grid-template-columns: 1.1fr 0.9fr;
  }

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

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .contact-panel {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: var(--space-8);
    padding: var(--space-7);
  }

  #como-funciona .section-head h2,
  #diferenciais .section-head h2 {
    white-space: nowrap;
  }
}

/* ---------- ≥ 1024px: preços lado a lado, grades maiores ------------- */
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .models-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .pricing-showcase {
    flex-direction: row;
    align-items: stretch;
    max-width: 1100px;
    margin-inline: auto;
  }

  .pricing-showcase__link {
    transform: rotate(0deg);
  }

  section {
    padding-block: var(--space-10);
  }
}

/* ---------- ≥ 1280px: respiro extra no container ---------------------- */
@media (min-width: 1280px) {
  .hero-copy p.lead {
    max-width: 56ch;
  }
}

/* ---------- Telas muito pequenas (320–359px): reforço de segurança ---- */
@media (max-width: 359px) {
  :root {
    --container-pad: 1rem;
  }

  .btn {
    padding: 0.85rem 1.3rem;
    font-size: 0.92rem;
  }

  .price-card__value .amount {
    font-size: 2.2rem;
  }

  .hero-offer {
    padding: var(--space-6) var(--space-4);
  }

  .hero-offer__price--primary strong {
    font-size: 2.6rem;
  }

  .hero-offer__price--secondary strong {
    font-size: 1.6rem;
  }
}