/* -------- Altura y recorte por defecto (pantallas ≥ 768 px) -------- */
.inmostore-slider .slick-slide {
  height: 60vh;          /* 60 % del alto de pantalla */
  overflow: hidden;      /* recorta lo que sobrepase */
}
.inmostore-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* llena sin deformar */
}

/* -------- Ajustes responsive (≤ 767 px) -------- */
@media (max-width: 767px) {

  /* cambiamos solo la altura a 65 vh (lo demás ya está) */
  .inmostore-slider .slick-slide {
    height: 65vh;
  }

  /* resto de tus reglas móviles (flechas + caption) se conserva */
}


/* -----  Flechas  ----- */
.inmostore-slider .slick-prev,
.inmostore-slider .slick-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;              /* iconos < y > de slick‑theme.css */
  position: absolute;
  top: 50%;
  margin-top: -22px;
  z-index: 10;
}
.inmostore-slider .slick-prev { left: 20px; }
.inmostore-slider .slick-next { right: 20px; }

/* Hover */
.inmostore-slider .slick-prev:hover,
.inmostore-slider .slick-next:hover {
  background: rgba(0,0,0,.8);
}

/* -----  Bullets (dots)  ----- */
.inmostore-slider .slick-dots li button:before {
  font-size: 10px;
  color: #fff;
  opacity: .3;
}
.inmostore-slider .slick-dots li.slick-active button:before {
  opacity: 1;
}

/* -----  Caption superpuesta  ----- */
.inmostore-slide {
  position: relative;
}
.inmostore-slide-caption {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,.7);
  max-width: 80%;
}
.inmostore-slide-caption h3 {
  margin: 0 0 8px;
  font-size: 80px;
  color: #ffffff;
  line-height: 1.2;
}
.inmostore-slide-caption p {
  margin: 0;
  font-size: 1.1rem;
}

/* ---------- RESPONSIVE  (≤ 767 px) ---------- */
@media (max-width: 767px) {

  /* 1) El slide ocupa 65 vh; la imagen se recorta manteniendo proporción */
  .inmostore-slider .slick-slide {
    height: 65vh;
    overflow: hidden;          /* recorta lo que sobresale */
  }
  .inmostore-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* cubre todo el alto sin deformar */
  }

  /* 2) Flechas más pequeñas y pegadas a los lados */
  .inmostore-slider .slick-prev,
  .inmostore-slider .slick-next {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }
  .inmostore-slider .slick-prev { left: 8px; }
  .inmostore-slider .slick-next { right: 8px; }
  .inmostore-slider .slick-prev::before,
  .inmostore-slider .slick-next::before {
    border-width: 0 2px 2px 0;
    padding: 7px;
  }

  /* 3) Caption centrado + tipografía más chica */
  .inmostore-slide-caption {
    bottom: 35px;
    max-width: 90%;
  }
  .inmostore-slide-caption h3 {
    font-size: 1.4rem;
  }
  .inmostore-slide-caption p {
    font-size: 0.95rem;
  }
}