/* ==========================================================================
   Responsive — el mobile no es una reducción del desktop: cambia la
   estructura del header, buscador, filtros, galería y ficha de detalle.
   ========================================================================== */

/* --------------------------------------------------- Tablet horizontal --- */
@media (max-width: 1080px) {
  .listing { grid-template-columns: 1fr; }

  /* Los filtros dejan de ser barra lateral fija y pasan a un panel plegable:
     así los resultados quedan visibles apenas se abre la página. */
  .filters {
    position: static;
    padding: var(--space-5);
  }
  .filters-toggle { display: flex; }
  .filters-zone { display: none; margin-bottom: var(--space-6); }
  .filters-zone.is-open { display: block; }
  .filters__group { grid-template-columns: repeat(2, 1fr); }
  .filters__group .filters__field--full { grid-column: 1 / -1; }

  .detail-body {
    grid-template-columns: 1fr;
    grid-template-areas: 'aside' 'main';
  }
  .detail-aside { position: static; }
}

/* ------------------------------------------------------------- Tablet ---- */
@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .site-nav,
  .header-actions .btn { display: none; }
  .menu-toggle { display: grid; }
  .header-actions { gap: var(--space-3); }

  .hero { min-height: min(88vh, 720px); align-items: flex-end; }
  .hero__title { max-width: 14ch; }

  /* El buscador se apila: en pantallas pequeñas un buscador de 4 columnas
     se vuelve ilegible y difícil de tocar. */
  .search-bar {
    grid-template-columns: 1fr 1fr;
    padding: 0.9rem;
    gap: 0.75rem;
  }
  .search-bar .field {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
  }
  .search-bar .field + .field { border-left: 1px solid var(--line); }
  .search-bar .btn { grid-column: 1 / -1; padding-block: 0.95rem; }

  .featured-single { grid-template-columns: 1fr; }
  .featured-single__media { aspect-ratio: 3 / 2; }

  .about { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .about__media img { aspect-ratio: 3 / 2; }

  .reasons { grid-template-columns: 1fr 1fr; }
  .reason { border-bottom: 1px solid var(--line); padding-left: 0; }
  .reason:nth-child(2n) { border-right: 0; padding-left: var(--space-5); }
  .reason:nth-child(2n+1) { padding-right: var(--space-5); }

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

  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-top > :first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- Mobile ---- */
@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-7); }
  .hero__title { max-width: 100%; }

  .search-bar { grid-template-columns: 1fr; }
  .search-bar .field + .field { border-left: 1px solid var(--line); }

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

  .featured-single__acciones { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .featured-single__acciones .btn { width: 100%; }
  .featured-single__acciones .link-arrow { align-self: flex-start; }

  .filters__group,
  .filters__row { grid-template-columns: 1fr; }

  .form-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-alert__acciones { flex-direction: column; }
  .form-alert__acciones .btn { width: 100%; }
  .form-foot .btn { width: 100%; }

  .detail-head { flex-direction: column; align-items: flex-start; }
  .detail-head__title { max-width: 100%; }

  /* La galería en mobile: una imagen grande + miniaturas desplazables.
     El marco es cuadrado porque en el teléfono conviven fotos horizontales y
     verticales: en un marco 4:3, una foto vertical quedaría reducida a poco
     más de la mitad del ancho de la pantalla. */
  .gallery__stage { aspect-ratio: 1 / 1; }
  .gallery__thumbs {
    grid-auto-flow: column;
    grid-auto-columns: 90px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .gallery__thumb { scroll-snap-align: start; }
  .gallery__nav { width: 40px; height: 40px; }

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

  .info-table th { width: 50%; }

  .reasons { grid-template-columns: 1fr; }
  .reason,
  .reason:nth-child(2n),
  .reason:nth-child(2n+1) {
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .reason:last-child { border-bottom: 0; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  .results-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

@media (max-width: 420px) {
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 0.9375rem; }
  /* En pantallas angostas el descriptor se aprieta para no partirse en dos
     líneas junto al botón del menú. */
  .brand__name--marca { font-size: 1.0625rem; letter-spacing: 0.1em; }
  .brand__tag { font-size: 0.5625rem; letter-spacing: 0.12em; }
  .spec-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- Impresión ----- */
@media print {
  .site-header, .mobile-menu, .toast-stack, .gallery__nav, .btn { display: none !important; }
  body { color: #000; }
  .page { padding-top: 0; }
}