/**
 * PW Media Carousel — slider horizontal de imagen/vídeo.
 * Tokens editables como custom properties en .pwmc (Elementor los sobreescribe
 * en {{WRAPPER}} .pwmc).
 */

.pwmc {
	/* Alineación: el primer slide arranca en el borde izquierdo de un
	   contenedor centrado de --pwmc-content-max. Así queda alineado con el
	   título de una cabecera nativa del mismo ancho. */
	--pwmc-content-max: 1140px;
	--pwmc-side-min: 24px;
	--pwmc-inset: max(var(--pwmc-side-min), calc((100% - var(--pwmc-content-max)) / 2));

	/* Nº de tarjetas visibles (modo por defecto). El control responsive de
	   Elementor lo sobreescribe; estos valores son el fallback. */
	--pwmc-visible: 3.5;
	--pwmc-card-w: 440px; /* solo en modo "ancho fijo" (.pwmc--fixed) */
	--pwmc-ratio: 4 / 5;

	/* Recuadro de texto inferior. */
	--pwmc-caption-bg: rgba(255, 255, 255, 0.6);
	--pwmc-caption-color: #010814;
	--pwmc-caption-radius: 12px;
	--pwmc-gap: 24px;
	--pwmc-radius: 10px;

	--pwmc-arrow-size: 60px;
	--pwmc-arrow-bg: #001d3f;
	--pwmc-arrow-bg-hover: #ff4f18;
	--pwmc-arrow-icon: #ffffff;
	--pwmc-arrow-icon-hover: #ffffff;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}

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

/* El carrusel no tiene ancho intrínseco (el track mide el 100% del viewport),
   así que en un contenedor flex con align-items:center Elementor lo encogería
   al ancho de las flechas. Ocupa siempre todo el ancho disponible; un ancho
   personalizado puesto en Elementor (clases __width-*) sigue mandando. */
.elementor-widget-pw_media_carousel {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Viewport / track
 * ------------------------------------------------------------------------- */

.pwmc-viewport {
	width: 100%;
	overflow: hidden;
}

.pwmc[data-drag="1"] .pwmc-viewport {
	cursor: grab;
	touch-action: pan-y;
}

.pwmc[data-drag="1"] .pwmc-viewport.is-dragging {
	cursor: grabbing;
}

/* El track mide lo mismo que el viewport y las tarjetas lo desbordan por la
   derecha (flex-shrink 0). Así el % del ancho de cada tarjeta se calcula sobre
   el área visible (viewport − sangría izquierda). El JS usa scrollWidth, que
   incluye ese desbordamiento. */
.pwmc-track {
	display: flex;
	align-items: stretch;
	gap: var(--pwmc-gap);
	width: 100%;
	/* Sangría izquierda = borde del contenido; a la derecha llega a sangre. */
	padding-left: var(--pwmc-inset);
	padding-right: 0;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
}

/* Sin transición durante el arrastre; suave al pulsar flechas. */
.pwmc-track {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pwmc-viewport.is-dragging .pwmc-track {
	transition: none;
}

/* ---------------------------------------------------------------------------
 * Slides / tarjetas
 * ------------------------------------------------------------------------- */

/* Modo "tarjetas visibles": N tarjetas + (N − 0,5) huecos llenan el área
   visible. Para 3,5 → 3 tarjetas enteras, 3 huecos y media tarjeta asomando
   (con enteros sobra medio hueco al final, inapreciable). Sin round()/ceil()
   a propósito: si el navegador no los soporta, la declaración entera se
   invalida y la tarjeta colapsaría a 0px. */
.pwmc-slide {
	flex: 0 0 auto;
	width: calc((100% - var(--pwmc-gap) * (var(--pwmc-visible) - 0.5)) / var(--pwmc-visible));
}

.pwmc--fixed .pwmc-slide {
	width: var(--pwmc-card-w);
}

.pwmc-card {
	position: relative;
	width: 100%;
	border-radius: var(--pwmc-radius);
	overflow: hidden;
	background: #e9e9ea;
}

/* Recuadro de texto (2 líneas) sobre la parte inferior de la tarjeta.
   Márgenes y relleno en % del ancho de la tarjeta (24px / 18px / 22px sobre
   una tarjeta de 360px, la del diseño a 1440px) para que escale con ella.
   El margen inferior va como margin-bottom (su % es del ANCHO, como el
   diseño), no como bottom:% (que sería del alto y cambiaría con la proporción). */
.pwmc-caption {
	position: absolute;
	left: 6.67%;
	right: 6.67%;
	bottom: 0;
	margin-bottom: 5%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 6.67% 6.67% 6.1%;
	border-radius: var(--pwmc-caption-radius);
	background: var(--pwmc-caption-bg);
	color: var(--pwmc-caption-color);
	pointer-events: none;
}

.pwmc-caption__line {
	display: block;
	font-size: clamp(14px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 1.375;
	color: inherit;
	overflow-wrap: anywhere;
}

.pwmc-media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pwmc-ratio);
	overflow: hidden;
}

.pwmc-image,
.pwmc-video,
.pwmc-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	pointer-events: none;
}

.pwmc-placeholder {
	background: repeating-linear-gradient(
		135deg,
		#e9e9ea,
		#e9e9ea 12px,
		#e2e2e3 12px,
		#e2e2e3 24px
	);
}

/* Embeds de YouTube / Vimeo: el iframe cubre la tarjeta (cover) aunque el
   vídeo sea 16:9 y la tarjeta sea retrato. */
.pwmc-embed {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pwmc-iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: auto;
	/* El iframe debe ser EXACTAMENTE 16:9 para que YouTube/Vimeo llenen su
	   caja sin letterbox; con height:100% + aspect-ratio queda 16:9 y, al ser
	   más ancho que la tarjeta retrato, la cubre (overflow recortado). Hay que
	   anular el max-width:100% que el tema aplica a los iframes, o el ancho se
	   recortaría al de la tarjeta y aparecerían barras. */
	max-width: none !important;
	aspect-ratio: 16 / 9;
	border: 0;
	pointer-events: none;
}

/* Refuerzo por JS (data-cover-w/h): tamaño exacto de cobertura calculado en
   runtime, por si algún estilo global interfiere con el auto-sizing. */
.pwmc-iframe[style*="--cover"] {
	width: var(--cover-w);
	height: var(--cover-h);
	aspect-ratio: auto;
}

/* ---------------------------------------------------------------------------
 * Controles (flechas)
 * ------------------------------------------------------------------------- */

.pwmc-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	/* Centradas, con un pequeño margen lateral simétrico. */
	padding-inline: var(--pwmc-side-min);
	margin-top: 28px;
}

/* Los colores se blindan con !important porque el kit de Elementor aplica sus
   estilos de botón (fondo rojo/gradiente, sombra) en :active/:focus. El color
   real sigue siendo editable desde la pestaña Estilo porque ahí se cambian las
   custom properties (--pwmc-arrow-*), no la propiedad background-color. */
.pwmc .pwmc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pwmc-arrow-size);
	height: var(--pwmc-arrow-size);
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: var(--pwmc-arrow-bg) !important;
	background-image: none !important;
	color: var(--pwmc-arrow-icon) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease,
		transform 0.15s ease;
}

.pwmc-arrow__icon {
	width: 42%;
	height: 42%;
	fill: currentColor;
	pointer-events: none;
}

/* Naranja SOLO en hover y durante la pulsación (no en :focus persistente, para
   que no se quede naranja después de soltar el clic). */
.pwmc .pwmc-arrow:hover,
.pwmc .pwmc-arrow:active {
	background-color: var(--pwmc-arrow-bg-hover) !important;
	background-image: none !important;
	color: var(--pwmc-arrow-icon-hover) !important;
	box-shadow: none !important;
}

/* Tras soltar el clic el botón conserva el foco: forzamos navy de nuevo (y de
   paso neutralizamos cualquier fondo de foco que aplique el tema). */
.pwmc .pwmc-arrow:focus:not(:hover):not(:active) {
	background-color: var(--pwmc-arrow-bg) !important;
	color: var(--pwmc-arrow-icon) !important;
	box-shadow: none !important;
}

.pwmc .pwmc-arrow:active {
	transform: scale(0.94);
}

.pwmc .pwmc-arrow:focus-visible {
	outline: 2px solid var(--pwmc-arrow-bg-hover);
	outline-offset: 3px;
}

.pwmc .pwmc-arrow:focus:not(:focus-visible) {
	outline: none;
}

.pwmc .pwmc-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* El primer slide arranca en el gutter móvil del sitio (16px). */
	.pwmc {
		--pwmc-side-min: 16px;
	}

	.pwmc-controls {
		margin-top: 20px;
	}

	/* Flechas de navegación más pequeñas en móvil. Se fija width/height
	   DIRECTAMENTE (no la variable) porque --pwmc-arrow-size lo controla
	   Elementor con especificidad alta y no se puede pisar desde `.pwmc`.
	   Escalamos al 70% del tamaño configurado (60px → 42px), así respeta lo
	   que pongas en el widget. El icono es 42% del botón → escala solo. */
	.pwmc .pwmc-arrow {
		width: calc(var(--pwmc-arrow-size) * 0.7);
		height: calc(var(--pwmc-arrow-size) * 0.7);
	}
}

/* ---------------------------------------------------------------------------
 * Accesibilidad: sin movimiento
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pwmc-track {
		transition-duration: 0.01ms;
	}
	.pwmc-arrow {
		transition: background-color 0.01ms, color 0.01ms;
	}
}