/*
 * Conik Carrusel.
 * Usa variables del tema activo (presets de theme.json) con respaldo neutro.
 *
 * Personalizable por bloque con propiedades CSS:
 *   --conik-carrusel-ancho        ancho de cada tarjeta en escritorio
 *   --conik-carrusel-ancho-movil  ancho de cada tarjeta en móvil
 */

.is-style-carrusel,
.is-style-carrusel-movil {
	position: relative; /* referencia de offsetLeft para el script */
	--conik-carrusel-borde: max(var(--wp--custom--gutter, 1rem), calc((100vw - var(--wp--style--global--wide-size, 100vw)) / 2));
}

/* Grupo «Carrusel»: fila con desplazamiento horizontal en todas las pantallas. */
.wp-block-group.is-style-carrusel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--conik-carrusel-borde);
	padding-inline: var(--conik-carrusel-borde);
	scrollbar-width: none;
}

.wp-block-group.is-style-carrusel > * {
	flex: 0 0 var(--conik-carrusel-ancho, 40%);
	margin: 0;
	scroll-snap-align: start;
}

/* Columnas «Carrusel en móvil»: en escritorio son columnas normales. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-carrusel-movil {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	/* Core fuerza flex-basis:100% !important al apilar columnas en móvil. */
	.wp-block-columns.is-style-carrusel-movil > .wp-block-column {
		flex: 0 0 var(--conik-carrusel-ancho-movil, 88%) !important;
		scroll-snap-align: start;
	}
}

@media (max-width: 599px) {
	.wp-block-group.is-style-carrusel > * {
		flex-basis: var(--conik-carrusel-ancho-movil, 88%);
	}
}

.is-style-carrusel::-webkit-scrollbar,
.is-style-carrusel-movil::-webkit-scrollbar {
	display: none;
}

/* Tarjetas que no se ven completas quedan atenuadas, como en el diseño. */
.is-style-carrusel > * {
	transition: opacity 0.4s ease;
}

.is-style-carrusel > .is-parcial {
	opacity: 0.35;
}

.is-style-carrusel:focus-visible,
.is-style-carrusel-movil:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 4px;
}

/*
 * Controles: anterior / siguiente y una pausa pequeña al centro
 * (WCAG 2.2.2: lo que se mueve solo debe poder detenerse).
 */
.conik-carrusel__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.conik-carrusel__controles[hidden] {
	display: none;
}

.conik-carrusel__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: var(--wp--custom--border--width, 1px) solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted, currentColor);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.conik-carrusel__boton svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* La pausa es más chica y sin borde para no competir con las flechas. */
.conik-carrusel__pausa {
	width: 2rem;
	height: 2rem;
	border-color: transparent;
}

.conik-carrusel__pausa svg {
	width: 1rem;
	height: 1rem;
}

.conik-carrusel__boton:hover {
	border-color: var(--wp--preset--color--accent, currentColor);
	background: var(--wp--preset--color--accent, currentColor);
	color: var(--wp--preset--color--base, #fff);
}

.conik-carrusel__pausa:hover {
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--accent, currentColor);
}

.conik-carrusel__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.is-style-carrusel,
	.is-style-carrusel-movil {
		scroll-behavior: auto;
	}

	.conik-carrusel__boton {
		transition: none;
	}

	/* No avanza solo: la pausa sobra, las flechas siguen. */
	.conik-carrusel__pausa {
		display: none;
	}
}

/* En escritorio las columnas no son carrusel: los controles sobran. */
@media (min-width: 782px) {
	.is-style-carrusel-movil + .conik-carrusel__controles {
		display: none;
	}
}

/*
 * Grupo «Cinta continua»: fila que se desplaza lenta y sin fin, sin flechas
 * (logos de marcas). El script mete los elementos en .conik-cinta__pista y
 * los duplica; la animación mueve la pista media longitud y vuelve a empezar
 * sin salto. Personalizable por bloque:
 *   --conik-cinta-ancho     ancho de cada elemento
 *   --conik-cinta-espacio   separación entre elementos
 *   --conik-cinta-duracion  tiempo de una vuelta (más alto = más lento)
 */
.wp-block-group.is-style-cinta {
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.conik-cinta__pista {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	animation: conik-cinta var(--conik-cinta-duracion, 40s) linear infinite;
}

.conik-cinta__pista > * {
	flex: 0 0 var(--conik-cinta-ancho, 12rem);
	margin: 0 var(--conik-cinta-espacio, var(--wp--preset--spacing--60, 3rem)) 0 0 !important;
}

.is-style-cinta:hover .conik-cinta__pista,
.is-style-cinta:focus-within .conik-cinta__pista,
.is-style-cinta.is-pausada .conik-cinta__pista,
.is-style-cinta.is-fuera .conik-cinta__pista {
	animation-play-state: paused;
}

@keyframes conik-cinta {
	to {
		transform: translateX(-50%);
	}
}

/* Sin script (editor) la cinta queda como una fila quieta. */
.wp-block-group.is-style-cinta:not(:has(> .conik-cinta__pista)) {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--conik-cinta-espacio, var(--wp--preset--spacing--60, 3rem));
}

.wp-block-group.is-style-cinta:not(:has(> .conik-cinta__pista)) > * {
	flex: 0 0 var(--conik-cinta-ancho, 12rem);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-cinta {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.conik-cinta__pista {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--wp--preset--spacing--40, 1.5rem);
	}

	.conik-cinta__copia {
		display: none;
	}
}