/**
 * FS Services — carrusel
 *
 * Todo lo configurable entra por variables CSS. El PHP solo imprime las
 * variables; este archivo no cambia nunca entre presets.
 */

.fss {
	--fss-pv: 5.5;
	--fss-gap: 16px;
	--fss-w: 280px;
	--fss-radius: 18px;
	--fss-ratio: 0.75;
	--fss-height: 420px;
	--fss-pad-y: 22px;
	--fss-pad-x: 20px;
	--fss-zoom: 1.06;
	--fss-speed: 550ms;

	--fss-lock: 0;
	--fss-ref-w: 1440;
	--fss-img-position: center;

	--fss-off-mode: both;
	--fss-off-unit: pct;
	--fss-off-pct: 30;
	--fss-off-px: 80;

	--fss-icon-size: 16px;
	--fss-icon-gap: 8px;
	--fss-icon-color: var(--fss-t-color);
	--fss-icon-h-color: var(--fss-icon-color);

	--fss-t-family: inherit;
	--fss-t-size: 16px;
	--fss-t-weight: 700;
	--fss-t-spacing: -0.2px;
	--fss-t-line: 1.3;
	--fss-t-transform: none;
	--fss-t-color: #fff;

	--fss-d-size: 14px;
	--fss-d-weight: 400;
	--fss-d-line: 1.5;
	--fss-d-color: #fff;
	--fss-d-clamp: 7;
	--fss-d-gap: 12px;

	--fss-hover-bg: linear-gradient(180deg, rgba(140, 16, 22, .94), rgba(60, 6, 9, .94));
	--fss-hover-speed: 380ms;

	--fss-b-align: flex-start;
	--fss-b-size: 13px;
	--fss-b-weight: 700;
	--fss-b-spacing: 0px;
	--fss-b-transform: none;
	--fss-b-pad-y: 10px;
	--fss-b-pad-x: 22px;
	--fss-b-radius: 99px;
	--fss-b-border-w: 1.5px;
	--fss-b-border-style: solid;
	--fss-b-border-color: #fff;
	--fss-b-color: #fff;
	--fss-b-bg: none;
	--fss-b-shadow: none;

	--fss-bh-color: #111;
	--fss-bh-border-color: #fff;
	--fss-bh-bg: #fff;
	--fss-bh-lift: 0px;
	--fss-bh-speed: 220ms;

	--fss-arrows: none;
	--fss-dots: flex;
	--fss-pause: none;
	--fss-dot-color: rgba(225, 6, 0, .32);
	--fss-dot-active-color: #e10600;
	--fss-dot-hover-color: #e10600;
	--fss-dot-hover-grow: 1.3;
	--fss-dot-size: 7px;
	--fss-dot-active-w: 36px;
	--fss-dot-gap: 7px;
	--fss-dot-space: 26px;

	--fss-columns: 4;
	--fss-row-gap: 16px;
	--fss-grid-align: stretch;

	position: relative;
}

/* Safari iOS: el font inflation agranda el texto por su cuenta en columnas
   angostas, que es exactamente lo que es una tarjeta de carrusel. */
.fss--fix-inflate,
.fss--fix-inflate * {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.fss__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.fss__track {
	display: flex;
	will-change: transform;
}

.fss--fix-gpu .fss__track {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.fss__slide {
	flex: 0 0 var(--fss-w);
	width: var(--fss-w);
	margin-right: var(--fss-gap);
}

/* ---------------------------------------------------------------- Tarjeta */

.fss-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--fss-radius);
	background: #22252b;
	color: var(--fss-t-color);
	text-decoration: none;
	aspect-ratio: var(--fss-ratio);
	isolation: isolate;
	-webkit-user-select: none;
	user-select: none;
}

.fss--fixed-height .fss-card {
	aspect-ratio: auto;
	height: var(--fss-height);
}

/* Safari recorta mal el border-radius cuando un hijo tiene transform.
   La máscara restituye el recorte. */
.fss--fix-mask .fss-card {
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.fss-card__media {
	position: absolute;
	inset: 0;
}

.fss .fss-card__img {
	position: absolute;
	inset: 0;
	/* Elementor y casi todos los temas fuerzan img { height: auto } en su
	   normalización. Sin !important la imagen deja de cubrir la tarjeta. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 100% !important;
	object-fit: cover !important;
	object-position: var(--fss-img-position, center);
	display: block;
	margin: 0;
	border-radius: 0;
	transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
	-webkit-user-drag: none;
}

.fss-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #3d4a5c, #15181d);
}

.fss-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .15) 38%, rgba(0, 0, 0, 0) 62%);
	transition: opacity 320ms ease;
}

.fss-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--fss-hover-bg);
	opacity: 0;
	transition: opacity var(--fss-hover-speed) ease;
}

/* Etiqueta en reposo */
.fss-card__label {
	position: absolute;
	left: var(--fss-pad-x);
	right: var(--fss-pad-x);
	bottom: var(--fss-pad-y);
	display: flex;
	align-items: center;
	gap: var(--fss-icon-gap);
	font-family: var(--fss-t-family);
	font-size: var(--fss-t-size);
	font-weight: var(--fss-t-weight);
	letter-spacing: var(--fss-t-spacing);
	line-height: var(--fss-t-line);
	text-transform: var(--fss-t-transform);
	color: var(--fss-t-color);
	transition: opacity 260ms ease, transform 320ms ease;
}

/* Panel del hover */
.fss-card__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--fss-pad-y) var(--fss-pad-x);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 300ms ease, transform 380ms cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}

.fss-card__title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--fss-icon-gap);
	font-family: var(--fss-t-family);
	font-size: var(--fss-t-size);
	font-weight: var(--fss-t-weight);
	letter-spacing: var(--fss-t-spacing);
	line-height: var(--fss-t-line);
	text-transform: var(--fss-t-transform);
	color: var(--fss-t-color);
}

.fss-card__text {
	margin: var(--fss-d-gap) 0 0;
	font-size: var(--fss-d-size);
	font-weight: var(--fss-d-weight);
	line-height: var(--fss-d-line);
	color: var(--fss-d-color);
	display: -webkit-box;
	-webkit-line-clamp: var(--fss-d-clamp);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Sin descripción: título centrado y botón, sin hueco vacío */
.fss-card--no-text .fss-card__panel {
	justify-content: center;
}

.fss-card--no-text .fss-card__cta {
	margin-top: var(--fss-d-gap);
}

/* Icono */
.fss-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--fss-icon-size);
	height: var(--fss-icon-size);
	color: var(--fss-icon-color);
	transition: color var(--fss-hover-speed) ease;
}

.fss .fss-icon__svg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: block;
	overflow: visible;
	fill: currentColor;
}

/* fill se hereda en SVG, así que la raíz cubre a los hijos sin atributo
   propio; estas dos reglas se encargan de los que sí lo traen. */
.fss .fss-icon__svg [fill]:not([fill="none"]) {
	fill: currentColor !important;
}

.fss .fss-icon__svg [stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}

/* Icono encima del título */
.fss--icon-above .fss-card__label,
.fss--icon-above .fss-card__title {
	flex-direction: column;
	align-items: flex-start;
}

.fss--icon-above .fss-card__label {
	align-items: flex-start;
}

/* Botón */
.fss .fss-card__cta {
	margin-top: auto;
	align-self: var(--fss-b-align);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fss-b-pad-y) var(--fss-b-pad-x);
	border-radius: var(--fss-b-radius);
	border: var(--fss-b-border-w) var(--fss-b-border-style) var(--fss-b-border-color);
	background: var(--fss-b-bg);
	box-shadow: var(--fss-b-shadow);
	color: var(--fss-b-color);
	font-size: var(--fss-b-size);
	font-weight: var(--fss-b-weight);
	letter-spacing: var(--fss-b-spacing);
	text-transform: var(--fss-b-transform);
	text-decoration: none;
	transition:
		background var(--fss-bh-speed) ease,
		color var(--fss-bh-speed) ease,
		border-color var(--fss-bh-speed) ease,
		transform var(--fss-bh-speed) ease;
}

/* El tema casi siempre define a:hover { color } y se carga después que el
   plugin, así que con especificidad baja gana él y el texto se pierde
   contra el fondo. De ahí el prefijo .fss y el !important en el color. */
.fss .fss-card__cta:hover,
.fss .fss-card__cta:focus-visible,
.fss .fss-card:hover .fss-card__cta:hover {
	background: var(--fss-bh-bg);
	color: var(--fss-bh-color) !important;
	border-color: var(--fss-bh-border-color);
	transform: translateY(var(--fss-bh-lift));
}

.fss .fss-card__cta,
.fss .fss-card__cta:link,
.fss .fss-card__cta:visited {
	color: var(--fss-b-color) !important;
	text-decoration: none;
}

.fss .fss-card__cta--inert {
	pointer-events: none;
	opacity: .6;
}

/* ------------------------------------------------------- Estados de hover */

.fss-card:hover .fss-card__img,
.fss-card:focus-within .fss-card__img,
.fss-card.is-open .fss-card__img {
	transform: scale(var(--fss-zoom));
}

.fss-card:hover .fss-card__overlay,
.fss-card:focus-within .fss-card__overlay,
.fss-card.is-open .fss-card__overlay {
	opacity: 1;
}

.fss-card:hover .fss-card__scrim,
.fss-card:focus-within .fss-card__scrim,
.fss-card.is-open .fss-card__scrim {
	opacity: 0;
}

.fss-card:hover .fss-card__label,
.fss-card:focus-within .fss-card__label,
.fss-card.is-open .fss-card__label {
	opacity: 0;
	transform: translateY(6px);
}

.fss-card:hover .fss-card__panel,
.fss-card:focus-within .fss-card__panel,
.fss-card.is-open .fss-card__panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.fss-card:hover .fss-icon,
.fss-card:focus-within .fss-icon,
.fss-card.is-open .fss-icon {
	color: var(--fss-icon-h-color);
}

.fss-card:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Descripción siempre visible en táctil */
.fss--touch-always .fss-card__panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.fss--touch-always .fss-card__label {
	opacity: 0;
}

.fss--touch-always .fss-card__overlay {
	opacity: 1;
}

.fss--touch-off .fss-card__panel {
	display: none;
}

/* Mientras se arrastra no debe dispararse el hover */
.fss.is-dragging .fss-card__overlay,
.fss.is-dragging .fss-card__panel {
	opacity: 0 !important;
}

.fss.is-dragging .fss-card__label {
	opacity: 1 !important;
	transform: none !important;
}

.fss.is-dragging .fss__track {
	cursor: grabbing;
}

/* ------------------------------------------------------------- Navegación */

.fss__arrows {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: var(--fss-arrows);
}

.fss .fss__arrow {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .94);
	background-image: none;
	color: #111;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
	cursor: pointer;
	pointer-events: auto;
	display: grid;
	place-items: center;
	transition: transform 200ms ease, background-color 200ms ease;
}

.fss .fss__arrow:hover,
.fss .fss__arrow:focus,
.fss .fss__arrow:focus-visible {
	background-color: rgba(255, 255, 255, 1);
	color: #111;
	transform: scale(1.08);
}

.fss .fss__arrow svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.fss .fss__arrow--prev {
	left: 14px;
}

.fss .fss__arrow--next {
	right: 14px;
}

.fss__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: var(--fss-dot-space);
}

.fss__dots {
	display: var(--fss-dots);
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
}

.fss__dots {
	gap: var(--fss-dot-gap);
}

/* Muchos temas aplican background-color a cualquier button:hover con
   selectores tipo [type=button]:hover, que tienen especificidad 0,2,0 y
   cargan después del plugin. De ahí el prefijo doble y los estados
   declarados uno a uno en vez de dejarlos al navegador. */
.fss .fss__dots .fss__dot {
	width: var(--fss-dot-size);
	height: var(--fss-dot-size);
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 99px;
	box-shadow: none;
	background-color: var(--fss-dot-color);
	background-image: none;
	cursor: pointer;
	transform: scale(1);
	transition:
		width 300ms cubic-bezier(.22, .61, .36, 1),
		background-color 220ms ease,
		transform 220ms ease;
}

.fss .fss__dots .fss__dot:hover,
.fss .fss__dots .fss__dot:focus,
.fss .fss__dots .fss__dot:focus-visible {
	background-color: var(--fss-dot-hover-color);
	transform: scale(var(--fss-dot-hover-grow));
	outline: none;
}

.fss .fss__dots .fss__dot:focus-visible {
	outline: 2px solid var(--fss-dot-hover-color);
	outline-offset: 3px;
}

.fss .fss__dots .fss__dot[aria-selected="true"] {
	width: var(--fss-dot-active-w);
	background-color: var(--fss-dot-active-color);
	transform: scale(1);
}

.fss .fss__pause {
	display: var(--fss-pause);
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 50%;
	background-color: transparent;
	background-image: none;
	color: inherit;
	cursor: pointer;
	place-items: center;
	transition: background-color 200ms ease;
}

.fss .fss__pause:hover,
.fss .fss__pause:focus,
.fss .fss__pause:focus-visible {
	background-color: rgba(0, 0, 0, .06);
	color: inherit;
}

.fss .fss__pause svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.fss .fss__pause .fss__play-ico,
.fss .fss__pause[aria-pressed="true"] .fss__pause-ico {
	display: none;
}

.fss .fss__pause[aria-pressed="true"] .fss__play-ico {
	display: block;
}

.fss-empty {
	padding: 24px;
	text-align: center;
	opacity: .7;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fss[data-reduce="1"] .fss__track,
	.fss[data-reduce="1"] .fss-card__img,
	.fss[data-reduce="1"] .fss-card__overlay,
	.fss[data-reduce="1"] .fss-card__panel {
		transition-duration: 1ms !important;
	}
}

/* ---------------------------------------------------------------- Grid */

.fss__grid {
	display: grid;
	grid-template-columns: repeat(var(--fss-columns), minmax(0, 1fr));
	column-gap: var(--fss-gap);
	row-gap: var(--fss-row-gap);
	align-items: var(--fss-grid-align);
}

/* En grid la tarjeta la dimensiona la columna, no el ancho de slide. */
.fss--grid .fss-card {
	width: 100%;
}

.fss--grid.fss--fixed-height .fss-card {
	height: var(--fss-height);
}