/* ═══════════════════════════════════════════════════════
   round-2.css — Beto's Hospedajes fix round 2
   Cargado DESPUÉS de main.css para mayor especificidad.
   NO modifica main.css ni main.js.
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   FIX 1 — Topbar: oculto en hero, visible al scroll
   ─────────────────────────────────────────────────────
   El topbar en main.css es position:sticky.
   Lo convertimos a position:fixed para que la traslación
   funcione visualmente sin reservar espacio en el flujo.
   El hero es full-bleed y tolera que el topbar flote sobre él.
   ───────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900; /* mismo orden que --z-topbar original */

  /* Estado inicial: oculto encima del viewport */
  transform: translateY(-100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Estado visible: cuando body tiene .is-scrolled (JS lo agrega a scrollY > 80) */
body.is-scrolled .topbar {
  transform: translateY(0);
}

/* Sin animación si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .topbar {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────
   FIX 2 — Loft cards de igual altura
   ─────────────────────────────────────────────────────
   La grid ya tiene align-items:start en main.css.
   Lo sobreescribimos a stretch para que las celdas
   igualen la altura de la más alta de cada fila.
   Las cards usan flex-column para empujar el CTA al pie.
   ───────────────────────────────────────────────────── */
.lofts-grid {
  align-items: stretch;
}

.loft-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* El enlace que envuelve toda la card también debe ser flex-column
   para que el cuerpo se expanda correctamente */
.loft-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* La figura (imagen) conserva su aspect-ratio definido en main.css;
   no participa en el flex-grow */
.loft-card-figure {
  flex-shrink: 0;
}

/* El cuerpo de la card crece para llenar el espacio disponible */
.loft-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* El CTA "Ver detalle" se empuja al pie de la card en todas las unidades */
.loft-card-cta {
  margin-top: auto;
  display: inline-block; /* ya definido en main.css, pero lo reafirmamos */
}

/* Nudge de reserva directa — debajo del CTA stack en cada modal */
.cta-direct-note {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-soft, rgba(31, 40, 32, 0.7));
  font-style: italic;
  letter-spacing: 0.01em;
}