/* "TAMBIÉN TE PODRÍA INTERESAR"
   ============================
   La tira de propiedades parecidas, al pie de la ficha.

   No tiene un solo color escrito: todo sale de los tokens de `:root` de
   `app/globals.css`. Por eso este archivo es idéntico en los tres repos y cada
   sitio se ve como su marca sin tocarlo. */

/* ── Por qué esto empieza deshaciendo cosas ──
   `globals.css` tiene una regla para el ELEMENTO `section`, pensada para las
   franjas a pantalla completa de la portada:

     section { display: flex; flex-direction: column; align-items: center;
               justify-content: center; text-align: center;
               min-height: calc(100vh - var(--navbar-height)); }

   Estas dos tiras también son `<section>`, así que les caía encima. El
   `align-items: center` es el que rompía el layout: en un contenedor flex, un
   hijo centrado se encoge a su ancho de contenido, así que la grilla de
   tarjetas medía 552px dentro de una página de 1920 y entraba UNA sola tarjeta
   por fila. Parecía que las recomendaciones usaban otra tarjeta distinta a la
   de `/propiedades`, y es exactamente la misma.

   `display: block` alcanza para salir de todo eso de una: sin flex no hay
   `align-items` ni `justify-content` que apliquen. El resto se declara igual
   porque heredarlo de una regla de elemento es demasiado frágil. */
.similar-properties {
  display: block;
  text-align: left;
  min-height: 0;
  /* `width: 100%` no sobra. Estas secciones son hijas de un contenedor flex en
     columna, y ahí un `margin: 0 auto` cancela el estirado: los márgenes `auto`
     se comen el espacio libre y el item se queda en su ancho de contenido. Sin
     este `width`, la sección medía 616px en una página de 1920 aunque su
     `max-width` fuera 1400. Con él, toma el ancho del contenedor, lo limita a
     1400 y recién ahí los márgenes la centran. */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.similar-properties-header {
  margin-bottom: 2rem;
}

.similar-properties-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-title, #1a1a1a);
  margin: 0 0 0.35rem;
}

.similar-properties-subtitulo {
  margin: 0;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.95rem;
}

/* `auto-fill` y no `auto-fit`: con dos propiedades, `auto-fit` las estira hasta
   ocupar todo el ancho y quedan dos tarjetas gigantes que no se parecen a las
   del listado. Con `auto-fill` conservan el tamaño y sobra espacio a la
   derecha, que es lo correcto. */
.similar-properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Tablet: dos columnas fijas. Sin esto, entre 768 y 1023 el `minmax(320px)`
   entra tres veces justo y las tarjetas quedan apretadas. */
@media (min-width: 768px) and (max-width: 1023px) {
  .similar-properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .similar-properties {
    padding: 2.5rem 1.5rem 3rem;
  }
}

@media (max-width: 767px) {
  .similar-properties {
    padding: 2rem 1rem 2.5rem;
  }

  .similar-properties-header h2 {
    font-size: 1.4rem;
  }

  /* Una sola columna. `minmax(320px, 1fr)` desborda en teléfonos de 320px de
     ancho, porque el mínimo no cabe con el padding. */
  .similar-properties-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}