/* ===== RESPONSIVE ===== */
/* El tamaño de columnas de .props-grid se controla en index.css (carga al final,
   con !important) usando auto-fill + minmax de tamaño fijo, así las cards no se
   estiran y el navegador agrega/quita columnas solo según el ancho disponible. */

@media(max-width:768px){
  .nav-links { display:none; }
  .hamburger { display:block; }
  .modal-gallery { grid-template-columns:1fr; grid-template-rows:250px; height:250px; }
  .modal-gallery-item:not(:first-child) { display:none; }
  .modal-gallery-item:first-child { grid-row:1; }
  .modal-body { padding:20px 18px; }
  .modal-amenities { grid-template-columns:1fr 1fr; }

  /* Antes no había reglas para la barra de filtros ni las cards en
     móvil: los botones de filtro se apretaban entre sí y el padding
     de la sección quedaba igual que en escritorio (demasiado ancho
     para pantallas chicas). */
  .props-section { padding: 48px 16px; }
  .props-filters { gap: 8px; margin-bottom: 24px; }
  .filter-btn { padding: 7px 14px; font-size: 0.74rem; }
  .prop-card { border-radius: 18px; }
  .zonas-grid { gap: 10px !important; }
}

/* ── Teléfonos chicos (<420px) ── */
@media (max-width: 420px) {
  .props-section { padding: 36px 12px; }
  /* A pedido: el logo + "IXTAXPLORA" del navbar se ve igual en móvil
     que en escritorio — antes se achicaba acá (40px/1.05rem) para
     casi todos los celulares, ya que la mayoría mide menos de 420px
     de ancho. */
  .btn-lang-switch { padding: 5px 11px; font-size: 0.72rem; }
  .modal-amenities { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* FIX: index.css carga después y ya repite estos mismos valores para
     .hero-stats/.hero-stat — es el que manda. Esto se deja como
     referencia/respaldo pero si necesitas ajustar el tamaño en móvil,
     el lugar correcto es el @media(max-width:768px) de index.css. */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 15px auto 0 !important;
  }

  .hero-stat {
    padding: 8px 4px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  .hero-stat strong {
    font-size: 1.25rem !important;
  }

  .hero-stat span {
    font-size: 0.62rem !important;
    letter-spacing: 0px !important;
    white-space: nowrap !important;
  }
}