/* ============================================================
   REFINAMIENTO VISUAL
   Capa de pulido aplicada sobre el diseño existente. Toma
   principios de composición de sitios premium (espaciado
   generoso, escala tipográfica dramática, radios amplios,
   paleta mínima) y los adapta a un catálogo inmobiliario.

   Se carga DESPUÉS de las otras hojas para poder ajustar sin
   reescribirlas. Si algo no gusta, se quita este archivo y el
   sitio vuelve al estado anterior: cero riesgo.
   ============================================================ */

:root {
  /* Un nivel más de espaciado: el "aire" entre secciones que
     distingue a un sitio premium de uno apretado. */
  --e9: 6rem;    /* 96px  */
  --e10: 8rem;   /* 128px */

  /* Radios amplios, estilo píldora, para botones y tarjetas */
  --radio-xl: 24px;
  --radio-pill: 999px;
}

/* ---------- 1. Respiración entre secciones ----------
   El cambio de mayor impacto: dar aire. Las secciones dejan de
   sentirse amontonadas y cada bloque se lee como una unidad. */
.contenido > section {
  margin-bottom: clamp(var(--e7), 8vw, var(--e9));
}
.contenido > section:last-of-type { margin-bottom: var(--e7); }

/* ---------- 2. Escala tipográfica con más contraste ----------
   Titulares notablemente más grandes que el texto: la jerarquía
   se vuelve obvia de un vistazo. clamp() lo hace responsivo. */
.seccion-titulo h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.seccion-titulo .eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  margin-bottom: var(--e2);
}
.seccion-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: var(--e3);
}

/* Más aire entre el título de sección y su contenido */
.seccion-titulo { margin-bottom: var(--e6); }

/* ---------- 3. Botones tipo píldora ----------
   Detalle sutil que moderniza mucho la interfaz. */
.boton,
.nav-publicar {
  border-radius: var(--radio-pill);
  padding-inline: 1.4em;
}
.boton--grande { padding: 0.9rem 1.8rem; }

/* ---------- 4. Tarjetas con radio más amplio ---------- */
.tarjeta,
.testimonio,
.ventaja,
.cifra {
  border-radius: var(--radio-xl);
}
.tarjeta-foto { border-radius: 0; }

/* ---------- 5. Transiciones más suaves ----------
   Curva de salida lenta: se siente pulido, no mecánico. */
.tarjeta,
.boton,
.nav-publicar {
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1),
              border-color .25s ease,
              background-color .25s ease;
}

/* ---------- 6. Rejilla con más separación ----------
   Menos densidad = más percepción de calidad. El margen inferior
   lo controla la sección (punto 1), así que aquí se anula para
   que no se sumen dos espacios. */
.rejilla { gap: clamp(var(--e4), 2.2vw, var(--e6)); }
.contenido > section > .rejilla:last-child { margin-bottom: 0; }

/* ---------- 7. Cabecera más ligera ----------
   Se ajusta la VARIABLE, no la altura directa: otros elementos
   (filtros pegajosos del catálogo, mapa a pantalla completa)
   calculan su posición con var(--cabecera) y se desalinearían. */
:root { --cabecera: 72px; }
.navegacion a { font-size: 0.9rem; }

/* ---------- 8. La sección de realce, con más presencia ---------- */
.seccion-realce {
  border-radius: var(--radio-xl);
  padding-top: clamp(var(--e6), 6vw, var(--e9));
  padding-bottom: clamp(var(--e6), 6vw, var(--e9));
}

/* ---------- 9. Foco visible y accesible ----------
   Necesario para quien navega con teclado; muchos sitios
   "bonitos" lo olvidan y quedan inaccesibles. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--monte-2);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

/* ---------- 10. Ajustes móviles ----------
   En pantallas chicas se recorta el aire para no obligar a
   hacer scroll eterno entre secciones. */
@media (max-width: 680px) {
  .contenido > section { margin-bottom: var(--e7); }
  .seccion-titulo { margin-bottom: var(--e5); }
  .seccion-titulo h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
}