/* Personalizable desde el tema o desde Elementor sobrescribiendo estas variables en .sslider */
.sslider {
	--sslider-speed: 700ms;
	--sslider-ratio: 16/9;
	--sslider-ratio-m: 4/5;
	--sslider-text: #fff;
	--sslider-btn-bg: #fff;
	--sslider-btn-color: #222;
	--sslider-radius: 0;
	--sslider-pad: clamp(1.25rem, 4vw, 3.5rem);
	--sslider-title-gap: .15em;  /* título → texto */
	--sslider-text-gap: .75em;   /* texto → botón */

	position: relative;
	overflow: hidden;
	border-radius: var(--sslider-radius);
	isolation: isolate;
}

.sslider__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sslider-ratio);
}


.sslider__slide {
	position: absolute;
	inset: 0;
}

.sslider .sslider__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Efecto fundido */
.sslider--fade .sslider__slide {
	opacity: 0;
	transition: opacity var(--sslider-speed) ease;
}
.sslider--fade .sslider__slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Efecto barrido lateral */
.sslider--slide .sslider__slide {
	transform: translateX(100%);
	transition: transform var(--sslider-speed) cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
}
.sslider--slide .sslider__slide.is-active {
	transform: translateX(0);
}

/* Contenido */
.sslider__content {
	position: absolute;
	z-index: 2;
	left: var(--sslider-pad);
	right: var(--sslider-pad);
	top: 10%;
	max-width: var(--sslider-content-w, 60%);
	color: var(--sslider-text);
}

.sslider .sslider__title {
	margin: 0 0 var(--sslider-title-gap);
	padding: 0;
	color: inherit;
	font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
	line-height: 1.1;
}

.sslider .sslider__text {
	margin: 0 0 var(--sslider-text-gap);
	padding: 0;
	color: inherit;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.5;
}

.sslider .sslider__desc {
	color: inherit;
	font-size: clamp(.9rem, .85rem + .2vw, 1rem);
	line-height: 1.5;
}

.sslider .sslider__button {
	display: inline-block;
	padding: .8em 1.5em;
	background: var(--sslider-btn-bg);
	color: var(--sslider-btn-color);
	text-decoration: none;
	line-height: 1.2;
	transition: opacity .2s;
}
.sslider .sslider__button:hover { opacity: .85; }

/* Flechas y puntos: selectores con .sslider delante para ganar a los estilos
   genéricos de <button> del tema/Elementor (padding, bordes, hover de color...). */
.sslider .sslider__arrow,
.sslider .sslider__arrow:hover,
.sslider .sslider__arrow:focus,
.sslider .sslider__arrow:active {
	position: absolute;
	z-index: 10;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #222;
	box-shadow: none;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	pointer-events: auto;
}
.sslider .sslider__arrow:hover { background: #fff; }
.sslider .sslider__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.sslider .sslider__arrow--prev { left: 1rem; right: auto; }
.sslider .sslider__arrow--next { right: 1rem; left: auto; }

@media (max-width: 767px) {
	.sslider .sslider__arrow { display: none; } /* en móvil se navega deslizando */
}

.sslider .sslider__dots {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	bottom: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sslider-dot-gap, 8px);
}
.sslider .sslider__dot,
.sslider .sslider__dot:hover,
.sslider .sslider__dot:focus,
.sslider .sslider__dot:active {
	width: var(--sslider-dot-w, var(--sslider-dot-size, 10px));
	height: var(--sslider-dot-h, var(--sslider-dot-size, 10px));
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: var(--sslider-dot-border-w, 0px) solid var(--sslider-dot-border, transparent);
	border-radius: var(--sslider-dot-radius, 50%);
	background: var(--sslider-dot-bg, rgba(255, 255, 255, .5));
	box-shadow: none;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}
.sslider .sslider__dot[aria-current="true"] {
	background: var(--sslider-dot-bg-active, #fff);
	border-color: var(--sslider-dot-border-active, var(--sslider-dot-border, transparent));
	transform: scale(var(--sslider-dot-scale, 1.25));
}

/* Controles visibles solo al pasar el ratón (solo en dispositivos con puntero;
   en táctil no existe hover, así que ahí se muestran siempre). */
.sslider { --sslider-ui-fade: .7s; }
@media (hover: hover) and (pointer: fine) {
	.sslider.sslider--hover-ui .sslider__arrow,
	.sslider.sslider--hover-ui .sslider__dots {
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--sslider-ui-fade) ease, visibility 0s linear var(--sslider-ui-fade);
	}
	.sslider.sslider--hover-ui:hover .sslider__arrow,
	.sslider.sslider--hover-ui:hover .sslider__dots,
	.sslider.sslider--hover-ui:has(:focus-visible) .sslider__arrow,
	.sslider.sslider--hover-ui:has(:focus-visible) .sslider__dots {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--sslider-ui-fade) ease, visibility 0s linear 0s;
	}
}

.sslider button:focus-visible,
.sslider a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
	.sslider__slide { transition-duration: 1ms !important; }
}

@media (max-width: 767px) {
	.sslider__viewport { aspect-ratio: var(--sslider-ratio-m); }
	.sslider__content { max-width: none; } /* en móvil, todo el ancho */
}