/* ==================================================
   HERO
================================================== */

.aloja-hero {

  position: relative;

  min-height: 70vh;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 140px 20px 100px;

  overflow: hidden;

  background:
    url("img/HERO/alojamiento-hero.jpg")
    center/cover no-repeat;
}

.hero-overlay {

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      rgba(0,0,0,.55),
      rgba(0,0,0,.8)
    );

  z-index: 1;
}

.hero-content {

  position: relative;
  z-index: 5;

  max-width: 850px;

  color: white;
}

.hero-tag {

  display: inline-block;

  padding: 8px 18px;

  border-radius: 50px;

  margin-bottom: 22px;

  background:
    rgba(255,255,255,.12);

  backdrop-filter: blur(10px);

  font-size: 13px;

  letter-spacing: 1px;
}

.aloja-hero h2 {

  font-size:
    clamp(3rem, 7vw, 6rem);

  line-height: 1;

  margin-bottom: 25px;
}

.aloja-hero p {

  font-size: 1.1rem;

  line-height: 1.8;

  color:
    rgba(255,255,255,.85);
}

/* ==================================================
   FILTROS
================================================== */

.filtros-section {

  position: relative;

  margin-top: -45px;

  z-index: 20;
}

.aloja-filtros {

  max-width: 1200px;

  margin: auto;

  background: white;

  border-radius: 24px;

  padding: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;

  box-shadow:
    0 20px 50px rgba(0,0,0,.12);
}

.filtro-box {

  flex: 1;
  min-width: 260px;

  position: relative;
}

.filtro-box i {

  position: absolute;

  top: 50%;
  left: 18px;

  transform: translateY(-50%);

  color: #777;
}

.filtro-box input {

  width: 100%;

  padding:
    16px 18px 16px 48px;

  border-radius: 16px;

  border: 1px solid #eee;

  outline: none;

  font-size: 14px;
}

.aloja-filtros select {

  padding: 16px 18px;

  border-radius: 16px;

  border: 1px solid #eee;

  outline: none;

  min-width: 180px;

  cursor: pointer;
}

/* ==================================================
   GRID
================================================== */

.aloja-container {

  max-width: 1450px;

  margin: auto;

  padding: 60px 20px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;
}

/* ==================================================
   CARD
================================================== */

.aloja-card {
  margin-bottom: 10px;

  position: relative;

  overflow: hidden;

  border-radius: 26px;

  background: #000;

  min-height: 520px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.12);

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}

.aloja-card:hover {

  transform:
    translateY(-12px);

  box-shadow:
    0 25px 60px rgba(0,0,0,.22);
}

/* ==================================================
   IMAGEN
================================================== */

.aloja-img-wrap {

  position: absolute;
  inset: 0;
  
  overflow: hidden;
}

.aloja-img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 1.4s ease;
}

.aloja-card:hover .aloja-img {

  transform: scale(1.08);
}

/* ==================================================
   OVERLAY
================================================== */

.aloja-card::before {

  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.95),
      rgba(0,0,0,.35),
      rgba(0,0,0,.05)
    );

  z-index: 2;
}

/* ==================================================
   BADGE
================================================== */

.aloja-badge {

  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 5;

  padding: 7px 14px;

  border-radius: 50px;

  background:
    rgba(255,255,255,.14);

  backdrop-filter: blur(10px);

  color: white;

  font-size: 12px;
}

/* ==================================================
   FAVORITO
================================================== */

.aloja-fav {

  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  width: 42px;
  height: 42px;

  border: none;

  border-radius: 50%;

  background:
    rgba(255,255,255,.15);

  color: white;

  cursor: pointer;

  backdrop-filter: blur(10px);

  transition: .4s ease;
}

.aloja-fav:hover {

  transform: scale(1.1);

  background:
    rgba(255,255,255,.25);
}

/* ==================================================
   BODY
================================================== */

.aloja-body {

  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;

  z-index: 5;

  padding: 28px;

  color: white;
}

.aloja-title {

  font-size:
    clamp(1.4rem, 2vw, 2rem);

  margin-bottom: 12px;

  line-height: 1.1;
}

.aloja-location {

  font-size: 14px;

  color:
    rgba(255,255,255,.82);

  margin-bottom: 14px;
}

.aloja-location i {

  color:
    var(--color-oliva);
}

/* ==================================================
   RATING
================================================== */

.aloja-rating {

  display: inline-flex;

  align-items: center;
  gap: 6px;

  padding: 7px 14px;

  border-radius: 50px;

  background:
    rgba(255,255,255,.12);

  backdrop-filter: blur(10px);

  margin-bottom: 16px;
}

.aloja-rating i {

  color:
    #ffc107;
}

/* ==================================================
   FEATURES
================================================== */

.aloja-features {

  display: flex;
  gap: 10px;

  margin-bottom: 18px;
}

.aloja-features span {

  width: 38px;
  height: 38px;

  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    rgba(255,255,255,.12);

  backdrop-filter: blur(10px);
}

/* ==================================================
   PRECIO
================================================== */

.aloja-price {

  font-size: 2rem;

  font-weight: 700;

  margin-bottom: 18px;
}

.aloja-price span {

  font-size: 14px;

  font-weight: 400;

  color:
    rgba(255,255,255,.7);
}

/* ==================================================
   BOTON
================================================== */

.aloja-btn {

  display: inline-flex;

  align-items: center;
  gap: 10px;

  padding: 15px 24px;

  border-radius: 50px;

  background:
    #ff7a45;

  color: white;

  text-decoration: none;

  font-weight: 600;

  transition: .4s ease;
}

.aloja-btn:hover {

  transform:
    translateY(-3px);

  background:
    var(--color-primario);
}

.aloja-btn i {

  transition: .4s ease;
}

.aloja-btn:hover i {

  transform:
    translateX(5px);
}

/* ==================================================
   SIN RESULTADOS
================================================== */

#sinResultados {

  display: none;

  text-align: center;

  padding: 70px 20px;

  color: #666;
}

#sinResultados i {

  font-size: 50px;

  margin-bottom: 20px;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1200px) {

  .aloja-container {

    grid-template-columns:
      repeat(3, 1fr);
  }

}

@media (max-width: 900px) {

  .aloja-container {

    grid-template-columns:
      repeat(2, 1fr);
  }

}

@media (max-width: 600px) {

  .aloja-hero {

    min-height: 60vh;

    padding:
      120px 20px 80px;
  }

  .aloja-container {

    grid-template-columns: 1fr;

    gap: 20px;

    padding: 30px 15px;
  }

  .aloja-card {

    min-height: 470px;
  }

  .aloja-body {

    padding: 22px;
  }

  .aloja-title {

    font-size: 2rem;
  }

  .aloja-btn {

    width: 100%;

    justify-content: center;
  }

}