/**
 * responsive.css
 * Breakpoints: >1440 desktop grande | 1240 notebook | 992 tablet | 768 tablet pequeno | 480 celular
 */

/* Notebook / telas médias */
@media (max-width: 1240px) {
  .properties-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
  .highlights { gap: var(--space-sm); }
  .agents-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
}

/* Tablets grandes */
@media (max-width: 992px) {
  :root { --header-height: 76px; }

  .container { padding: 0 var(--space-sm); }

  .nav-menu { display: none; }
  .menu-toggle { display: inline-flex; }

  .search-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-bar .btn-primary { grid-column: 1 / -1; }

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

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

  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 480px; margin: 0 auto; }

  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

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

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

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

  .hero-title { font-size: clamp(2.1rem, 6vw, 2.8rem); }
}

/* Tablets pequenos / celular grande */
@media (max-width: 768px) {
  .section { padding: var(--space-xl) 0; }

  .section-head-row { flex-direction: column; align-items: center; }
  .section-head-row .section-head { text-align: center; }

  /* Centraliza o restante do conteúdo no celular/tablet (a leitura fica mais fácil) */
  .about-text { text-align: center; }
  .about-list li { justify-content: center; }
  .about-text .btn { margin: 0 auto; }

  .highlight-card { text-align: center; }
  .highlight-icon { margin: 0 auto; }

  .diff-card { text-align: center; }
  .diff-icon { margin: 0 auto; }

  .footer-brand { text-align: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }
  .footer-col { text-align: center; }
  .footer-newsletter form { justify-content: center; }

  .hero { min-height: auto; padding-bottom: var(--space-lg); }
  .hero .container { padding: 0 var(--space-md); }
  .hero-content { padding: var(--space-lg) 0 var(--space-md); }
  .hero-text { text-align: center; }
  .hero-tag { font-size: 11px; padding: 6px 14px; margin: 0 auto var(--space-md); }
  .hero-title { margin-bottom: var(--space-md); line-height: 1.18; }
  .hero-desc { margin: 0 auto var(--space-lg); }
  .hero-actions { gap: 12px; margin-bottom: var(--space-lg); justify-content: center; flex-direction: column; align-items: center; }
  .hero-actions .btn { width: auto; min-width: 220px; }
  .hero-stats { gap: var(--space-lg); row-gap: var(--space-sm); justify-content: center; }
  .search-bar { margin-top: var(--space-lg); margin-left: var(--space-xs); margin-right: var(--space-xs); }

  .search-bar {
    grid-template-columns: 1fr;
    padding: var(--space-md);
  }

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

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

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

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

  .testimonial-card { padding: var(--space-lg); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; }

  .modal-prev { left: 10px; }
  .modal-next { right: 10px; }
  .modal-close { top: 10px; right: 10px; }
}

/* Celulares */
@media (max-width: 480px) {
  :root { --header-height: 68px; }

  .section-title { font-size: var(--fs-xl); }
  .hero-title { font-size: 1.75rem; }
  .hero-desc { font-size: var(--fs-sm); }
  .hero-stat strong { font-size: var(--fs-md); }

  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: auto; min-width: 200px; }

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

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

  .btn { padding: 12px 20px; }

  .whatsapp-float { width: 50px; height: 50px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
  .back-to-top { width: 40px; height: 40px; right: calc(var(--space-sm) + 60px); }

  /* Evita que o header quebre/sobreponha em telas muito estreitas */
  .logo span:last-child { font-size: var(--fs-sm); }
  .header-actions { gap: 6px; }
  .header-actions .btn-primary.btn-sm { display: none; }

  .property-specs { flex-wrap: wrap; row-gap: 6px; }
  .property-body { padding: var(--space-sm); }
}