/* ═══════════════════════════════════════════════════════════════════
   VI 2026-07-05 · Cards de sala — franja estrecha abajo + zoom obvio
   ─────────────────────────────────────────────────────────────────
   · Género (badge) y título quedan ARRIBA sobre la imagen con sombra
   · La franja abajo solo cubre los 3 datos: meta + precio + urgencia
   · Zoom Ken Burns real sobre la imagen en hover
   · Cross-fade a 2ª imagen si existe .room-card-img-alt

   Activar cross-fade en una card:
     Añadir DENTRO del <a class="room-card">, junto al <img> principal:
       <img class="room-card-img-alt" src="URL_2A_IMAGEN"
            alt="" aria-hidden="true" loading="lazy">
     El JS de vi-cards.js marcará data-has-alt="1" y el efecto se
     activa automáticamente.
   ═══════════════════════════════════════════════════════════════ */

/* Padding — top/laterales grandes; bottom calculado para que los datos
   queden CENTRADOS verticalmente dentro de la franja de 88px
   (sin "Precio" el texto es más bajito, franja más estrecha). */
.room-card { padding: 1.75rem 1.75rem 1.1rem !important; }

/* Imagen(es) de fondo — reglas comunes */
.room-card > img,
.room-card .room-card-img,
.room-card .room-card-img-alt {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  z-index: 0 !important;
  transform: scale(1.03);
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.7s ease-in-out;
  will-change: transform, opacity;
}

/* La 2ª imagen empieza invisible y encima */
.room-card .room-card-img-alt {
  opacity: 0 !important;
  z-index: 1 !important;
}

/* Zoom Ken Burns al hover (cursor sobre la card) */
.room-card:hover > img,
.room-card:hover .room-card-img,
.room-card.room-card--show-alt > img,
.room-card.room-card--show-alt .room-card-img {
  transform: scale(1.14);
}

/* Cross-fade:
   · Desktop: :hover binario (al pasar el ratón)
   · Móvil: .room-card--show-alt (JS lo activa al cruzar el centro del viewport) */
.room-card[data-has-alt="1"]:hover > img:not(.room-card-img-alt),
.room-card[data-has-alt="1"].room-card--show-alt > img:not(.room-card-img-alt) {
  opacity: 0 !important;
}
.room-card:hover .room-card-img-alt,
.room-card.room-card--show-alt .room-card-img-alt {
  opacity: 1 !important;
  transform: scale(1.14);
}

/* ── Franja abajo — estrecha, solo los 3 datos ── */
.room-card::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  /* Reset del inset:0 heredado del CSS original; sin top:auto la franja
     se estiraba a toda la card (top:0 + bottom:0 → height ignorada). */
  top: auto !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 88px !important;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(6,6,6,0.94) 0%,
    rgba(6,6,6,0.84) 55%,
    rgba(6,6,6,0.55) 92%,
    rgba(6,6,6,0.15) 100%
  ) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border-top: 1px solid rgba(255,255,255,0.09);
  transition: height 0.3s ease, background 0.3s ease !important;
  pointer-events: none;
  opacity: 1 !important;
}
.room-card:hover::after {
  height: 94px;
  background: linear-gradient(
    to top,
    rgba(4,4,4,0.97) 0%,
    rgba(4,4,4,0.88) 55%,
    rgba(4,4,4,0.62) 92%,
    rgba(4,4,4,0.2) 100%
  ) !important;
}

/* Al mostrar la 2ª imagen (hover desktop / cruce del 50% en móvil):
   la franja desaparece PERO el texto que contenía sigue visible.
   Sin fondo detrás, el texto se refuerza con sombra más marcada. */
.room-card[data-has-alt="1"]:hover::after,
.room-card[data-has-alt="1"].room-card--show-alt::after {
  opacity: 0 !important;
}
.room-card[data-has-alt="1"]:hover .room-meta-item,
.room-card[data-has-alt="1"]:hover .room-price,
.room-card[data-has-alt="1"]:hover .room-urgency,
.room-card[data-has-alt="1"].room-card--show-alt .room-meta-item,
.room-card[data-has-alt="1"].room-card--show-alt .room-price,
.room-card[data-has-alt="1"].room-card--show-alt .room-urgency {
  text-shadow:
    0 2px 10px rgba(0,0,0,0.9),
    0 0 6px rgba(0,0,0,0.8) !important;
}

/* Contenido: flujo natural, título arriba y meta abajo por margin-top:auto */
.room-card .room-card-content,
.room-card .room-content {
  position: relative !important;
  z-index: 3;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: none !important;
  padding: 0 !important;
  left: auto; right: auto; bottom: auto;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Título y badge respiran sobre la imagen con sombra fuerte */
.room-card .room-name {
  text-shadow:
    0 2px 14px rgba(0,0,0,0.75),
    0 0 6px rgba(0,0,0,0.5);
}
.room-card .genre-badge {
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Datos de abajo — sombra sutil (van sobre franja, ya son legibles) */
.room-card .room-meta-item,
.room-card .room-price,
.room-card .room-urgency {
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.room-card .room-meta,
.room-card .room-price,
.room-card .room-urgency {
  transition: opacity 0.4s ease;
}

/* Márgenes internos de la franja — compactos, sin aire muerto */
.room-card .room-meta { gap: 1rem !important; margin-bottom: 0 !important; }
.room-card .room-price {
  margin-top: 0.2rem !important;
  font-size: 1.2rem !important;
  line-height: 1.1 !important;
}
.room-card .room-price span { display: none !important; } /* oculta el label "Precio" */
.room-card .room-urgency { margin-top: 0.1rem !important; }

/* "No Te Olvides de Jesús" — encuadre alto en desktop (parte alta de la imagen).
   1ª imagen: center top; 2ª imagen (nueva): 25% para que se vea correcto. */
@media (min-width: 641px) {
  .room-card.room-terror > img,
  .room-card.bg-terror > img,
  .room-card[href*="noteolvidesdejesus"] > img {
    object-position: center top !important;
  }
  .room-card.room-terror .room-card-img-alt,
  .room-card.bg-terror .room-card-img-alt,
  .room-card[href*="noteolvidesdejesus"] .room-card-img-alt {
    object-position: center 40% !important;
  }
}

/* Móvil: card más compacta, franja proporcional */
@media (max-width: 640px) {
  .room-card { padding: 1.25rem 1.25rem 0.65rem !important; }
  .room-card::after { height: 78px !important; }
  .room-card:hover::after { height: 82px !important; }
}