/**
 * NeuronUP Slider — estilos del sitio (también se cargan en el editor).
 *
 * El maquetado no depende del JavaScript: el ancho de cada slide sale de las
 * variables que escribe el PHP, así que el slider se pinta bien desde el primer
 * momento y no salta al cargar. Las medidas se toman del propio contenedor
 * (unidades `cqi`), no de la ventana.
 *
 * Toma los colores de Mai Engine si existen, con valores de reserva.
 */

.nup-slider {
	--nup-slider-per-view: var(--nup-slider-per-page-mobile, 1);
	--nup-slider-accent: var(--color-heading, #1e1e1e);
	--nup-slider-arrow-size: 2.5rem;
	--nup-slider-gutter: calc(var(--nup-slider-arrow-size) + 0.5rem);
	--nup-slider-pagination-space: 2.5rem;
	--nup-slider-pagination-offset: 0px;

	position: relative;
}

/*
 * La pista usa `container-type`, que le quita al slider el ancho que tomaría de
 * su contenido: dentro de un contenedor que ajusta sus hijos al contenido
 * (bloques Fila o Pila, rejillas centradas) se quedaba sin ancho. `stretch` le
 * da el ancho disponible, como a un bloque normal, sin tocar el alto: con
 * `flex-grow` o `align-self` el slider se estiraba junto a un vecino más alto y
 * las flechas y la paginación se descolocaban. Con :where() no pesa nada, así
 * que los ajustes de ancho que WordPress da a los hijos de una fila mandan.
 */
:where(.nup-slider) {
	width: -moz-available;
	width: -webkit-fill-available;
	width: stretch;
	min-width: 0;
}

@media (min-width: 768px) {

	.nup-slider {
		--nup-slider-per-view: var(--nup-slider-per-page-tablet, 1);
	}
}

@media (min-width: 1024px) {

	.nup-slider {
		--nup-slider-per-view: var(--nup-slider-per-page, 1);
	}
}

/* Pista y slides ---------------------------------------------------------- */

.nup-slider__viewport {
	container-type: inline-size;
	min-height: inherit;
}

.nup-slider__track {
	position: relative; /* Referencia de offsetLeft para el JavaScript. */
	display: flex;
	gap: var(--nup-slider-gap, 16px);
	min-height: inherit;
}

.nup-slider--carousel .nup-slider__track {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.nup-slider--carousel .nup-slider__track::-webkit-scrollbar {
	display: none;
}

.nup-slider__track:focus-visible {
	outline: 2px solid var(--nup-slider-accent);
	outline-offset: -2px;
}

.nup-slider__slide {
	flex: 0 0 calc((100cqi - (var(--nup-slider-per-view) - 1) * var(--nup-slider-gap, 16px)) / var(--nup-slider-per-view));
	box-sizing: border-box;
	min-width: 0;
	scroll-snap-align: start;
}

.nup-slider__slide > :first-child {
	margin-block-start: 0;
}

.nup-slider__slide > :last-child {
	margin-block-end: 0;
}

/* Con un único bloque dentro, que ocupe todo el alto: tarjetas iguales en la fila. */
.nup-slider__slide > :only-child {
	height: 100%;
}

/* Cinta continua ------------------------------------------------------------ */

.nup-slider--marquee .nup-slider__track {
	overflow: hidden;
}

/*
 * El PHP pinta el juego de slides dos veces: desplazar la cinta la mitad de su
 * ancho la deja igual que empezó y la animación enlaza sin corte. La separación
 * va como margen de cada slide y no como `gap`, para que las dos mitades midan
 * exactamente lo mismo.
 */
.nup-slider__rail {
	display: flex;
	flex: none;
	min-height: inherit;
	animation: nup-slider-marquee var(--nup-slider-duration, 30s) linear infinite;
}

.nup-slider__rail > .nup-slider__slide {
	margin-inline-end: var(--nup-slider-gap, 16px);
}

[dir="rtl"] .nup-slider__rail {
	animation-name: nup-slider-marquee-rtl;
}

@keyframes nup-slider-marquee {

	to {
		transform: translateX(-50%);
	}
}

@keyframes nup-slider-marquee-rtl {

	to {
		transform: translateX(50%);
	}
}

/*
 * Pausa al pasar el ratón por la cinta (no por el botón de pausa, para que al
 * pulsar «reanudar» se reanude) y mientras el foco de teclado esté en una slide.
 */
.nup-slider--marquee.pause-on-hover .nup-slider__track:hover .nup-slider__rail,
.nup-slider--marquee .nup-slider__rail:has(:focus-visible),
.nup-slider--marquee.is-paused .nup-slider__rail {
	animation-play-state: paused;
}

/* Controles --------------------------------------------------------------- */

/*
 * Mai Engine da estilos a cualquier <button> (borde, fondo y relleno al pasar el
 * ratón o al enfocarlo). Estos selectores de dos clases pesan más y los anulan.
 *
 * La forma se fija con `aspect-ratio` y no solo con el alto: neuronup.com tiene
 * un CSS que fuerza `height: auto !important` en cualquier botón, y con eso las
 * flechas y el botón de pausa salían ovalados y los puntos, sin alto.
 */
.nup-slider .nup-slider__arrow,
.nup-slider .nup-slider__dot,
.nup-slider .nup-slider__toggle {
	flex: none;
	aspect-ratio: 1;
	appearance: none;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.nup-slider .nup-slider__arrow:focus-visible,
.nup-slider .nup-slider__dot:focus-visible,
.nup-slider .nup-slider__toggle:focus-visible {
	outline: 2px solid var(--nup-slider-accent);
	outline-offset: 2px;
}

/* Hasta que el JavaScript los conecta, los controles no se ven; su hueco ya está reservado. */
.nup-slider[data-nup-slider]:not(.is-ready) :is(.nup-slider__arrow, .nup-slider__pagination, .nup-slider__toggle) {
	visibility: hidden;
}

.nup-slider svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

/* Flechas */

.nup-slider.has-arrows {
	padding-inline: var(--nup-slider-gutter);
}

.nup-slider .nup-slider__arrow {
	position: absolute;
	top: calc(50% - var(--nup-slider-pagination-offset) / 2);
	z-index: 2;
	display: grid;
	width: var(--nup-slider-arrow-size);
	height: var(--nup-slider-arrow-size);
	color: var(--nup-slider-arrow-color, var(--nup-slider-accent));
	place-items: center;
	transform: translateY(-50%);
}

.nup-slider .nup-slider__arrow--prev {
	inset-inline-start: 0;
}

.nup-slider .nup-slider__arrow--next {
	inset-inline-end: 0;
}

.nup-slider .nup-slider__arrow:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

.nup-slider .nup-slider__arrow[aria-disabled="true"] {
	background-color: transparent;
	cursor: default;
	opacity: 0.35;
}

.nup-slider__arrow svg {
	width: 1.5rem;
	height: 1.5rem;
}

[dir="rtl"] .nup-slider__arrow svg {
	transform: scaleX(-1);
}

/* Paginación */

.nup-slider.is-pagination-outside {
	--nup-slider-pagination-offset: var(--nup-slider-pagination-space);

	padding-bottom: var(--nup-slider-pagination-space);
}

.nup-slider__pagination {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	height: var(--nup-slider-pagination-space);
	align-items: center;
	justify-content: center;
	color: var(--nup-slider-pagination-color, var(--nup-slider-accent));
}

.nup-slider.is-pagination-inside .nup-slider__pagination {
	bottom: 0.25rem;
}

/* Botón de 24 px para que sea fácil de pulsar; el punto visible es el ::before. */
.nup-slider .nup-slider__dot {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
}

/*
 * Aro para los inactivos y relleno para el activo. El estado ya no depende de la
 * opacidad (los puntos al 30 % daban 1,9:1 de contraste, por debajo del 3:1 que
 * piden los controles) y el aro se sigue viendo en el modo de alto contraste.
 */
.nup-slider__dot::before {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 0.625rem;
	height: 0.625rem;
	margin: auto;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	content: "";
	transition: background-color 0.2s, transform 0.2s;
}

.nup-slider__dot[aria-current="true"]::before {
	background: currentColor;
	transform: scale(1.2);
}

.nup-slider__pagination--fraction {
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.nup-slider.has-arrows .nup-slider__pagination--progressbar {
	inset-inline: var(--nup-slider-gutter);
}

.nup-slider__pagination--progressbar::before,
.nup-slider__progress {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: currentColor;
}

.nup-slider__pagination--progressbar::before {
	content: "";
	opacity: 0.2;
}

.nup-slider__progress {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s;
}

[dir="rtl"] .nup-slider__progress {
	transform-origin: right center;
}

/* Botón de pausa */

.nup-slider .nup-slider__toggle {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 3;
	display: grid;
	width: 2rem;
	height: 2rem;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	color: #1e1e1e;
	place-items: center;
}

/* Con la paginación debajo, el botón va en esa misma franja y no tapa el contenido. */
.nup-slider.is-pagination-outside .nup-slider__toggle {
	inset-block-start: auto;
	bottom: calc((var(--nup-slider-pagination-space) - 2rem) / 2);
}

.nup-slider__toggle svg {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.5;
}

.nup-slider__icon-play path {
	fill: currentColor;
	stroke: none;
}

/* Con dos clases como mínimo: tienen que pesar más que `.nup-slider svg`, que los muestra. */
.nup-slider .nup-slider__icon-play,
.nup-slider.is-paused .nup-slider__icon-pause {
	display: none;
}

.nup-slider.is-paused .nup-slider__icon-play {
	display: block;
}

/* Sin nada que mover ------------------------------------------------------- */

/*
 * `is-static-*` las pone el PHP para los dispositivos en los que caben todas las
 * slides; `is-static`, el JavaScript, por si acaso. En ellos sobran los controles
 * y su hueco.
 */
.nup-slider.is-static :is(.nup-slider__arrow, .nup-slider__pagination, .nup-slider__toggle) {
	display: none;
}

.nup-slider.is-static.has-arrows {
	padding-inline: 0;
}

.nup-slider.is-static.is-pagination-outside {
	--nup-slider-pagination-offset: 0px;

	padding-bottom: 0;
}

@media (max-width: 767.98px) {

	.nup-slider.is-static-mobile :is(.nup-slider__arrow, .nup-slider__pagination, .nup-slider__toggle) {
		display: none;
	}

	.nup-slider.is-static-mobile.has-arrows {
		padding-inline: 0;
	}

	.nup-slider.is-static-mobile.is-pagination-outside {
		--nup-slider-pagination-offset: 0px;

		padding-bottom: 0;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {

	.nup-slider.is-static-tablet :is(.nup-slider__arrow, .nup-slider__pagination, .nup-slider__toggle) {
		display: none;
	}

	.nup-slider.is-static-tablet.has-arrows {
		padding-inline: 0;
	}

	.nup-slider.is-static-tablet.is-pagination-outside {
		--nup-slider-pagination-offset: 0px;

		padding-bottom: 0;
	}
}

@media (min-width: 1024px) {

	.nup-slider.is-static-desktop :is(.nup-slider__arrow, .nup-slider__pagination, .nup-slider__toggle) {
		display: none;
	}

	.nup-slider.is-static-desktop.has-arrows {
		padding-inline: 0;
	}

	.nup-slider.is-static-desktop.is-pagination-outside {
		--nup-slider-pagination-offset: 0px;

		padding-bottom: 0;
	}
}

/* Sin controles y alto contraste -------------------------------------------- */

/*
 * Sin flechas ni paginación, la barra de desplazamiento es la única forma de
 * mover el carrusel con un ratón sin rueda horizontal: se muestra, fina.
 */
.nup-slider--carousel:not(.has-arrows):not([data-pagination]) .nup-slider__track {
	scrollbar-width: thin;
}

.nup-slider--carousel:not(.has-arrows):not([data-pagination]) .nup-slider__track::-webkit-scrollbar {
	display: block;
	height: 6px;
}

.nup-slider--carousel:not(.has-arrows):not([data-pagination]) .nup-slider__track::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.35);
}

/*
 * Con colores forzados (alto contraste de Windows) el navegador sustituye los
 * fondos por el del sistema, y el punto activo y la barra de progreso quedaban
 * invisibles. Los aros de los puntos son borde, que sí se respeta.
 */
@media (forced-colors: active) {

	.nup-slider__dot[aria-current="true"]::before,
	.nup-slider__progress {
		forced-color-adjust: none;
		border-color: Highlight;
		background: Highlight;
	}

	.nup-slider__pagination--progressbar::before {
		forced-color-adjust: none;
		background: GrayText;
		opacity: 1;
	}
}

/* Reducir movimiento -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	/* La cinta se queda quieta y se puede desplazar a mano, solo con las slides originales. */
	.nup-slider__rail {
		animation: none;
	}

	.nup-slider--marquee .nup-slider__track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.nup-slider__rail > [aria-hidden="true"] {
		display: none;
	}

	.nup-slider .nup-slider__toggle {
		display: none;
	}

	.nup-slider__dot::before,
	.nup-slider__progress {
		transition: none;
	}
}