/* ==========================================================
   Proyectos Slider Widget - Estilos
   ========================================================== */

.psw-slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 90vh;
	overflow: hidden;
	background: #111;
	box-sizing: border-box;
	/* Respeta el "notch"/barra de estado en móviles con pantalla curva o isla dinámica */
	padding-left: env( safe-area-inset-left, 0 );
	padding-right: env( safe-area-inset-right, 0 );

	/* Valores por defecto (JS los sobreescribe según la config del widget) */
	--psw-kb-duration: 6200ms;
	--psw-kb-scale: 1.15;
	--psw-crossfade-duration: 1200ms;
	--psw-slide-duration: 1000ms;
	--psw-text-fade-duration: 600ms;
	--psw-dir: 1; /* 1 = avanzar (siguiente), -1 = retroceder (anterior) */
}

.psw-slider,
.psw-slider *,
.psw-slider *::before,
.psw-slider *::after {
	box-sizing: border-box;
}

.psw-slides,
.psw-slide,
.psw-images,
.psw-kb-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.psw-slides {
	position: relative;
}

/* ----------------------------------------------------------
   Slides (proyectos)
   ---------------------------------------------------------- */
.psw-slide {
	opacity: 0;
	transform: translateX(0);
	pointer-events: none;
	z-index: 1;
	transition:
		transform var(--psw-slide-duration) cubic-bezier(.65, 0, .35, 1),
		opacity var(--psw-slide-duration) cubic-bezier(.65, 0, .35, 1);
	will-change: transform, opacity;
}

.psw-slide-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	z-index: 2;
}

/* El slide que sale (dirección según --psw-dir: 1 = sale a la izq., -1 = sale a la der.) */
.psw-slide-outgoing {
	opacity: 1;
	transform: translateX(calc(-6% * var(--psw-dir)));
	z-index: 2;
	transition:
		transform var(--psw-slide-duration) cubic-bezier(.65, 0, .35, 1),
		opacity var(--psw-slide-duration) cubic-bezier(.65, 0, .35, 1);
}
.psw-slide-outgoing.psw-slide-leave {
	opacity: 0;
	transform: translateX(calc(-6% * var(--psw-dir))) scale(0.98);
}

/* El slide que entra (desde el lado opuesto al de salida) */
.psw-slide-incoming-start {
	opacity: 0;
	transform: translateX(calc(6% * var(--psw-dir)));
	z-index: 3;
	transition: none;
}
.psw-slide-incoming-start.psw-slide-enter {
	opacity: 1;
	transform: translateX(0);
	transition:
		transform var(--psw-slide-duration) cubic-bezier(.65, 0, .35, 1),
		opacity var(--psw-slide-duration) cubic-bezier(.65, 0, .35, 1);
}

/* ----------------------------------------------------------
   Imágenes con efecto Ken Burns + crossfade
   La duración de la animación (--psw-kb-duration) se fija desde JS
   como "tiempo visible + crossfade", de forma que la imagen sigue
   haciendo zoom MIENTRAS se desvanece, en lugar de quedarse congelada
   antes del cambio (que es lo que provocaba el corte brusco).
   ---------------------------------------------------------- */
.psw-kb-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1);
	transition: opacity var(--psw-crossfade-duration) ease-in-out;
	will-change: transform, opacity;
}

/* Controla SOLO la opacidad (crossfade). Nunca toca el transform, así que
   una imagen que se está desvaneciendo no "resetea" su zoom de golpe. */
.psw-kb-visible {
	opacity: 1;
}

/* Controla SOLO la animación de zoom. Se añade una vez por imagen y no se
   quita mientras se desvanece: por eso el zoom queda congelado en su punto
   (animation-fill-mode: forwards) en lugar de saltar hacia atrás. */
.psw-kb-animate {
	animation-name: psw-kenburns;
	animation-duration: var(--psw-kb-duration);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes psw-kenburns {
	from {
		transform: scale(1) translate(0, 0);
	}
	to {
		transform: scale(var(--psw-kb-scale)) translate(-1.2%, -1.2%);
	}
}

/* Degradado inferior para que el texto siempre se lea bien */
.psw-has-gradient .psw-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 45%);
	pointer-events: none;
	z-index: 1;
}

/* Viñeta lateral sutil (solo izquierda y derecha, a toda la altura) para
   que los puntos y las flechas destaquen sobre la foto. */
.psw-side-vignette .psw-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--psw-vignette-strength, 0.5)) 0%,
		rgba(0, 0, 0, calc(var(--psw-vignette-strength, 0.5) * 0.35)) 12%,
		rgba(0, 0, 0, 0) 32%,
		rgba(0, 0, 0, 0) 68%,
		rgba(0, 0, 0, calc(var(--psw-vignette-strength, 0.5) * 0.35)) 88%,
		rgba(0, 0, 0, var(--psw-vignette-strength, 0.5)) 100%
	);
}

/* ----------------------------------------------------------
   Texto superpuesto (etiqueta + título)
   ---------------------------------------------------------- */
.psw-overlay-content {
	position: absolute;
	/* left / bottom: los define el control responsive "Margen lateral/inferior" */
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: min(72%, 520px);
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--psw-text-fade-duration) ease,
		transform var(--psw-text-fade-duration) ease;
}

.psw-label {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 500;
	color: #fff;
	opacity: .9;
}

.psw-title {
	font-size: 32px;
	font-weight: 600;
	color: #fff;
	margin: 0;
	text-transform: lowercase;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Estado: el texto sale hacia abajo (fade out down) */
.psw-overlay-content.psw-text-out {
	opacity: 0;
	transform: translateY(24px);
}

/* Estado inicial del texto entrante, antes de animar (fade in up) */
.psw-overlay-content.psw-text-in-start {
	opacity: 0;
	transform: translateY(-24px);
	transition: none;
}
.psw-overlay-content.psw-text-in-start.psw-text-in {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--psw-text-fade-duration) ease,
		transform var(--psw-text-fade-duration) ease;
}

/* ----------------------------------------------------------
   CTA / enlace "ver proyecto"
   ---------------------------------------------------------- */
.psw-cta {
	position: absolute;
	/* right / bottom: los define el control responsive "Margen lateral/inferior" */
	z-index: 4;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: lowercase;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	padding-bottom: 4px;
	white-space: nowrap;
	transition: opacity var(--psw-text-fade-duration) ease, border-color .3s ease;
}

.psw-cta-no-underline {
	border-bottom: none !important;
}

.psw-slide-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ----------------------------------------------------------
   Dots de navegación (proyectos)
   ---------------------------------------------------------- */
.psw-dots {
	position: absolute;
	/* right / top: los define el control responsive "Separación del borde" */
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
}

.psw-dot {
	box-sizing: content-box;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
	background-clip: content-box;
	/* Padding invisible: amplía el área táctil sin cambiar el tamaño visual
	   del punto (importante para poder tocarlo cómodamente en móvil). */
	padding: 7px;
	margin: -7px;
	cursor: pointer;
	transition: background .3s ease, width .3s ease, height .3s ease;
	flex: 0 0 auto;
}

.psw-dot-active {
	background: #fff;
	transform-origin: center;
	transition: background .3s ease, transform .3s ease;
}

/* ----------------------------------------------------------
   Flechas laterales (chevrons finos)
   ---------------------------------------------------------- */
.psw-arrow,
.psw-arrow:hover,
.psw-arrow:focus,
.psw-arrow:active,
.psw-arrow:visited {
	position: absolute;
	top: 50%;
	z-index: 5;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	touch-action: manipulation; /* evita el retraso de doble-tap en móvil */
	/* padding: lo define el control responsive "Área clicable" */
}

.psw-arrow {
	transform: translateY(-50%);
	opacity: .75;
	transition: opacity .25s ease, transform .25s ease;
}

.psw-arrow:hover,
.psw-arrow:focus-visible {
	opacity: 1;
	transform: translateY(-50%);
}

.psw-arrow:active {
	transform: translateY(-50%) scale(0.92);
}

/* left / right de .psw-arrow-prev y .psw-arrow-next: los define el
   control responsive "Separación del borde lateral" */

.psw-arrow-icon {
	width: 18px;
	height: 18px;
	display: block;
}

.psw-arrow-icon path {
	stroke: #fff;
	stroke-width: 1.25;
	fill: none;
}

/* ----------------------------------------------------------
   Ajustes finos que no dependen de ningún control (fallback de
   seguridad general; el resto de tamaños/márgenes ya son
   responsive desde el propio panel de Elementor, por dispositivo).
   ---------------------------------------------------------- */
@media (max-width: 480px) {
	.psw-overlay-content {
		max-width: 78%;
	}
}

@media (max-height: 420px) and (orientation: landscape) {
	.psw-slider {
		height: 100dvh;
	}
}