/* PMTV Btn Carrusel Widget */
.pm-btnc {
	--pm-btnc-ar: 16/10;
	--pm-btnc-max-w: 100%;
	--pm-btnc-radius: 22px;
	--pm-btnc-overlay-color: #000000;
	--pm-btnc-overlay-opacity: 0.62;
	--pm-btnc-tint-color: #ffafcd;
	--pm-btnc-tint-opacity: 0.35;
	--pm-btnc-overlay-blur: 0px;
	--pm-btnc-hover-lift: 8px;
	--pm-btnc-active-press: 2px;
	--pm-btnc-transition: 220ms;
	--pm-btnc-fade: 700ms;
	--pm-btnc-top-scale: 1;
	--pm-btnc-top-filter: none;
	--pm-btnc-top-fit: contain;
	--pm-btnc-top-padding: 12%;
	--pm-btnc-focus-color: #93c5fd;
	--pm-btnc-focus-width: 2px;
	--pm-btnc-shine-opacity: 0.45;
	--pm-btnc-shine-size: 68%;
	--pm-btnc-shine-x: 50%;
	--pm-btnc-shine-y: 40%;
	--pm-btnc-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
	--pm-btnc-shadow-hover: 0 22px 54px rgba(0, 0, 0, 0.32);
	--pm-btnc-bg-position: center;
	--pm-btnc-bg-size: cover;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--pm-btnc-max-w);
	aspect-ratio: var(--pm-btnc-ar);
	overflow: hidden;
	border-radius: var(--pm-btnc-radius);
	background-color: #0c0c0f;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	box-shadow: var(--pm-btnc-shadow);
	transition: transform var(--pm-btnc-transition) ease, box-shadow var(--pm-btnc-transition) ease, filter var(--pm-btnc-transition) ease;
	outline: none;
}

.pm-btnc[disabled] {
	cursor: not-allowed;
	opacity: 0.8;
}

.pm-btnc__slides,
.pm-btnc__overlay,
.pm-btnc__tint,
.pm-btnc__shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pm-btnc__slides {
	z-index: 0;
}

.pm-btnc__slide {
	position: absolute;
	inset: 0;
	background-size: var(--pm-btnc-bg-size);
	background-position: var(--pm-btnc-bg-position);
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--pm-btnc-fade) ease;
	will-change: opacity;
}

.pm-btnc__slide.is-active {
	opacity: 1;
}

.pm-btnc__overlay {
	z-index: 1;
	background-color: var(--pm-btnc-overlay-color);
	opacity: var(--pm-btnc-overlay-opacity);
	backdrop-filter: blur(var(--pm-btnc-overlay-blur));
}

.pm-btnc.pm-btnc--gradient .pm-btnc__overlay {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.52) 100%);
}

.pm-btnc__tint {
	z-index: 2;
	background-color: var(--pm-btnc-tint-color);
	opacity: var(--pm-btnc-tint-opacity);
	mix-blend-mode: multiply;
}

.pm-btnc__shine {
	z-index: 2;
	background: radial-gradient(circle at var(--pm-btnc-shine-x) var(--pm-btnc-shine-y), rgba(255, 255, 255, var(--pm-btnc-shine-opacity)) 0%, rgba(255, 255, 255, 0) var(--pm-btnc-shine-size));
	opacity: var(--pm-btnc-shine-opacity);
}

.pm-btnc:not(.has-shine) .pm-btnc__shine {
	display: none;
}

.pm-btnc__top {
	position: absolute;
	inset: var(--pm-btnc-top-padding);
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: var(--pm-btnc-top-fit);
	transform: scale(var(--pm-btnc-top-scale));
	filter: var(--pm-btnc-top-filter);
	transition: transform var(--pm-btnc-transition) ease, filter var(--pm-btnc-transition) ease;
	z-index: 3;
}

.pm-btnc:hover,
.pm-btnc:focus-visible {
	transform: translate3d(0, calc(var(--pm-btnc-hover-lift) * -1), 0);
	box-shadow: var(--pm-btnc-shadow-hover);
}

.pm-btnc:active {
	transform: translate3d(0, var(--pm-btnc-active-press), 0);
}

.pm-btnc:focus-visible {
	outline: var(--pm-btnc-focus-width) solid var(--pm-btnc-focus-color);
	outline-offset: 3px;
}

.pm-btnc__top:hover {
	transform: scale(calc(var(--pm-btnc-top-scale) * 1.02));
}

@media (prefers-reduced-motion: reduce) {
	.pm-btnc,
	.pm-btnc__slide,
	.pm-btnc__top {
		transition-duration: 0ms;
	}
}

/* Ajuste responsivo: que cada botón ocupe 100% en mobile */
@media (max-width: 540px) {
	.pm-btnc {
		width: 100%;
		max-width: 100%;
	}
}
