/* ==========================================================================
   Hoolistic Web Toolkit · Carrusel de imágenes (al estilo del slider de Osty)
   ========================================================================== */

.hwt-car{
	--hwt-car-per:3;
	--hwt-car-gap:50px;
	--hwt-car-h:360px;
	--hwt-car-radius:24px;
	--hwt-car-side:10px;
	--hwt-car-arrow:#fff;
	position:relative;
}
/* Valores por defecto por dispositivo (Elementor los sustituye por los del panel). */
@media (max-width:1024px){.hwt-car{--hwt-car-per:2;--hwt-car-gap:24px;--hwt-car-h:340px}}
@media (max-width:767px){.hwt-car{--hwt-car-per:1.15;--hwt-car-gap:12px;--hwt-car-h:300px}}
/* A todo el ancho: sale del contenedor (--hwt-vw lo calcula el JS sin la barra de scroll). */
.hwt-car--bleed{
	width:var(--hwt-vw,100vw);
	margin-left:calc(50% - var(--hwt-vw,100vw) / 2);
}
.hwt-car:not(.hwt-car--bleed){--hwt-car-side:0px}

.hwt-car__track{
	display:flex;gap:var(--hwt-car-gap);
	margin:0;padding:0 var(--hwt-car-side);list-style:none;
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scroll-padding-inline:var(--hwt-car-side);scroll-behavior:smooth;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.hwt-car__track::-webkit-scrollbar{display:none}
.hwt-car__track:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hwt-car.is-dragging .hwt-car__track{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.hwt-car.is-dragging a{pointer-events:none}

.hwt-car__slide{
	flex:0 0 calc((100% - (var(--hwt-car-per) - 1) * var(--hwt-car-gap)) / var(--hwt-car-per));
	margin:0;scroll-snap-align:start;
}
.hwt-car__slide figure{margin:0}
.hwt-car__slide a{display:block;border-radius:var(--hwt-car-radius);overflow:hidden}
.hwt-car__slide img{
	display:block;width:100%;height:var(--hwt-car-h);max-width:none;
	object-fit:cover;border-radius:var(--hwt-car-radius);
	user-select:none;-webkit-user-drag:none;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hwt-car__slide a:hover img{transform:scale(1.03)}
.hwt-car__slide figcaption{margin-top:10px;font-size:.85rem;line-height:1.4;color:var(--color-contrast-medium,#6b6870)}

/* Flechas finas sobre la imagen, como Osty */
.hwt-car__arrow{
	position:absolute;top:calc(var(--hwt-car-h) / 2);z-index:2;
	display:flex;align-items:center;justify-content:center;
	width:48px;height:64px;margin-top:-32px;padding:0;border:0;background:none;
	color:var(--hwt-car-arrow);cursor:pointer;
	filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));
	transition:opacity .25s ease,transform .25s ease;
}
.hwt-car__arrow svg{width:22px;height:44px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hwt-car__arrow--prev{left:calc(var(--hwt-car-side) + 30px)}
.hwt-car__arrow--next{right:calc(var(--hwt-car-side) + 30px)}
.hwt-car__arrow:hover{transform:scale(1.1)}
.hwt-car__arrow:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}
.hwt-car__arrow[disabled]{opacity:0;pointer-events:none}

/* Puntos */
.hwt-car__dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.hwt-car__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--color-contrast-higher,#262626);opacity:.25;cursor:pointer;transition:opacity .25s ease,width .25s ease}
.hwt-car__dots button[aria-current="true"]{width:22px;border-radius:4px;opacity:1}

.hwt-car-empty{padding:16px;border:1px dashed #b5b3b0;font-size:.9rem;color:#6b6870}

@media (max-width:767px){
	.hwt-car__arrow{width:36px;height:52px;margin-top:-26px}
	.hwt-car__arrow svg{width:16px;height:32px}
	.hwt-car__arrow--prev{left:calc(var(--hwt-car-side) + 8px)}
	.hwt-car__arrow--next{right:calc(var(--hwt-car-side) + 8px)}
}
@media (prefers-reduced-motion:reduce){
	.hwt-car__track{scroll-behavior:auto}
	.hwt-car__slide img,.hwt-car__arrow{transition:none}
}