/*
  Slider de portada (home): fundido suave, zoom lento, caption centrada y flechas.
  Todo va acotado a #myCarousel para no afectar a otros carruseles (p. ej. la galeria de ficha-inmueble.php).
  El JS de index.php solo anade .hs-zoomed a la imagen activa.
*/

/* Altura y contenedor */
#myCarousel{margin-top:0 !important;overflow:hidden;position:relative}
/* custom.css ("AJUSTES") da .homeslider{margin-top:-67px}; con el overflow:hidden de aqui recortaria la imagen. La demo no lo lleva */
#myCarousel .carousel-inner.homeslider{margin-top:0}
#myCarousel .carousel-inner{height:72vh;overflow:hidden;position:relative}
@media (max-width:767px){#myCarousel .carousel-inner{height:60vw}}
@media (min-width:1400px){#myCarousel .carousel-inner{height:78vh}}

/* Crossfade: neutraliza el desplazamiento lateral de Bootstrap 3 y usa opacity */
#myCarousel .carousel-inner > .item{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;opacity:0;z-index:1;transition:opacity 1.1s ease !important;-webkit-transform:none !important;transform:none !important}
#myCarousel .carousel-inner > .item.active{opacity:1 !important;z-index:2 !important}
#myCarousel .carousel-inner > .item.left,#myCarousel .carousel-inner > .item.right{left:0 !important;-webkit-transform:none !important;transform:none !important}
#myCarousel .carousel-inner > .item.next,#myCarousel .carousel-inner > .item.prev{left:0 !important;opacity:0 !important;z-index:2 !important;-webkit-transform:none !important;transform:none !important}
#myCarousel .carousel-inner > .item.next.left,#myCarousel .carousel-inner > .item.prev.right{opacity:1 !important}
#myCarousel .carousel-inner > .item.active.left,#myCarousel .carousel-inner > .item.active.right{opacity:0 !important;z-index:1 !important}
#myCarousel .homeslider .item{height:100% !important;overflow:hidden;position:relative}

/* Imagen con zoom suave */
#myCarousel .homeslider .item img{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;object-position:center !important;display:block !important;transform:scale(1.07);transition:none !important}
#myCarousel .homeslider .item img.hs-zoomed{transform:scale(1.0) !important;transition:transform 8s ease-out !important}

/* Overlay degradado */
#myCarousel .homeslider .item::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(0,0,0,.10) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.72) 100%);pointer-events:none;z-index:2}

/* Caption centrada */
#myCarousel .homeslider .carousel-caption{display:none !important}
#myCarousel .hs-caption{position:absolute !important;top:0;right:0;bottom:0;left:0;display:flex !important;align-items:center !important;justify-content:center !important;z-index:3;pointer-events:none;text-align:center;padding:0 16px;box-sizing:border-box}
#myCarousel .hs-caption__inner{pointer-events:auto;max-width:680px;width:100%;padding:0 8px}
#myCarousel .hs-caption__title{color:#fff !important;font-size:clamp(20px,3.5vw,46px) !important;font-weight:700 !important;line-height:1.2 !important;text-align:center !important;text-shadow:0 2px 18px rgba(0,0,0,.55);margin:0 0 clamp(10px,2vw,20px) !important;letter-spacing:-.02em}
#myCarousel .hs-caption__price{color:rgba(255,255,255,.92) !important;font-size:clamp(16px,2.2vw,30px) !important;font-weight:300 !important;text-align:center !important;text-shadow:0 1px 10px rgba(0,0,0,.50);letter-spacing:.04em;margin:0 0 clamp(14px,2.5vw,28px) !important}
#myCarousel .hs-caption__btn{display:inline-block !important;padding:clamp(9px,1.2vw,13px) clamp(22px,3vw,40px) !important;font-size:clamp(12px,1vw,14px) !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:#fff !important;background:transparent !important;border:1.5px solid rgba(255,255,255,.75) !important;border-radius:2px !important;text-decoration:none !important;transition:background .25s,border-color .25s !important}
#myCarousel .hs-caption__btn:hover,#myCarousel .hs-caption__btn:focus{background:rgba(255,255,255,.18) !important;border-color:#fff !important;color:#fff !important;text-decoration:none !important}

/* Flechas */
#myCarousel .carousel-control{top:0 !important;bottom:0 !important;height:100% !important;width:52px !important;opacity:1 !important;display:flex !important;align-items:center !important;justify-content:center !important;background:transparent !important;z-index:10}
#myCarousel .carousel-control.left{left:0;padding-left:0 !important}
#myCarousel .carousel-control.right{right:0;padding-right:0 !important}
#myCarousel .carousel-control .fa{width:40px !important;height:40px !important;line-height:40px !important;font-size:18px !important;background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.28) !important;border-radius:50% !important;color:#fff !important;text-align:center !important;transition:background .2s !important;position:static !important;margin:0 !important}
#myCarousel .carousel-control:hover .fa{background:rgba(255,255,255,.26) !important}
@media (max-width:767px){
	#myCarousel .carousel-control{width:36px !important}
	#myCarousel .carousel-control .fa{width:30px !important;height:30px !important;line-height:30px !important;font-size:15px !important}
	#myCarousel .hs-caption__inner{max-width:100%}
}