/**
 * ==========================================================================
 * ARQUIVO: css/responsive.css
 * DESCRIÇÃO: Ajustes de responsividade para celulares, tablets e telas menores.
 * ==========================================================================
 */

/* Telas médias (Tablets - até 992px) */
@media (max-width: 992px) {
  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .special-offer-card {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-2xl);
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

/* Telas pequenas (Smartphones - até 640px) */
@media (max-width: 640px) {
  .hero {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

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

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .service-price-box {
    text-align: center;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}