/**
 * CariHub — estados visuales de carga/fallback para imágenes públicas.
 * Mantiene layout estable; evita “huecos negros” sin creativo.
 */

.ch-img-slot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

/*
 * Slides de carrusel ya son position:absolute; inset:0.
 * No pisar con .ch-img-slot { position:relative } (rompe ancho mobile
 * y deja el creativo al width intrínseco ~380px ≈ media pantalla).
 */
.pb-slot__slide.ch-img-slot,
.banner-slot__slide.ch-img-slot,
.home-ad-slot__slide.ch-img-slot,
.home-ad-bottom__slide.ch-img-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

/*
 * Estados (mutuamente excluyentes vía JS; CSS refuerza):
 *   --loading  → src real en vuelo o deferred; shimmer DETRÁS de la img
 *   --fallback → error real (no lentitud)
 *   (ninguno)  → loaded
 *   .ch-img--deferred → PIXEL; opacity 0 (el slot muestra shimmer)
 *   .ch-img--broken   → error real; opacity 0 para leer el fallback
 * Una img en loading NO usa opacity:0.
 */
.ch-img-slot--loading {
  background:
    linear-gradient(110deg, #2b2b2b 0%, #3a3a3a 45%, #2b2b2b 90%);
  background-size: 220% 100%;
  animation: ch-img-shimmer 1.4s ease-in-out infinite;
}

.ch-img-slot--fallback {
  background: linear-gradient(160deg, #3a3a3a 0%, #525252 100%);
  animation: none;
}

.ch-img-slot--fallback.ch-img-slot--loading {
  animation: none;
  background: linear-gradient(160deg, #3a3a3a 0%, #525252 100%);
}

.ch-img-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.88);
  font: 600 11px/1.25 Montserrat, Arial, sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.ch-img--broken {
  opacity: 0 !important;
  visibility: hidden !important;
}

.ch-img--deferred {
  opacity: 0;
}

.ch-img-slot--loading img:not(.ch-img--deferred):not(.ch-img--broken) {
  opacity: 1;
  visibility: visible;
}

@keyframes ch-img-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Home ad / hero: soft loading instead of flat #111 void */
.home-ad-slot,
.home-ad-slot--visibilidad,
.home-ad-slot--crecimiento,
.home-ad-bottom__stage {
  background:
    linear-gradient(110deg, #2b2b2b 0%, #3a3a3a 45%, #2b2b2b 90%);
  background-size: 220% 100%;
}

.home-hero__slot--preview,
.home-hero__slot--rented {
  background:
    linear-gradient(110deg, #2b2b2b 0%, #3a3a3a 45%, #2b2b2b 90%);
  background-size: 220% 100%;
}

.home-hero__slot--preview.ch-img-slot--fallback,
.home-hero__slot--rented.ch-img-slot--fallback,
.home-ad-slot.ch-img-slot--fallback,
.home-ad-bottom__stage.ch-img-slot--fallback,
.pb-slot__slide.ch-img-slot--fallback,
.banner-slot__slide.ch-img-slot--fallback,
.res-card__media.ch-img-slot--fallback {
  background: linear-gradient(160deg, #3a3a3a 0%, #525252 100%);
}

.res-card__media {
  background: linear-gradient(160deg, #ececec 0%, #d8d8d8 100%);
}

.res-card__media.ch-img-slot--fallback {
  background: linear-gradient(160deg, #e8e8e8 0%, #cfcfcf 100%);
}

.res-card__media .ch-img-fallback {
  color: rgba(40, 40, 40, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .ch-img-slot--loading {
    animation: none;
  }
}