/* Reels por Categoría - cuadrícula y carrusel de videos verticales */

.rcat-reels {
	--rcat-cols: 3;
	--rcat-gap: 16px;
	--rcat-ratio: 9 / 16;
	--rcat-radius: 12px;
	--rcat-bg: #000;
	--rcat-item-max: 100%;
	--rcat-peek: 0;
	/* Piso de ancho por video. Es lo que evita que en pantallas angostas los
	   slides queden diminutos si la regla responsive de Elementor no llega. */
	--rcat-min-slide: 240px;
	--rcat-arrow-size: 40px;
	--rcat-arrow-bg: rgba(0, 0, 0, .55);
	--rcat-arrow-color: #fff;
	--rcat-dot-color: #c9ccd1;
	--rcat-dot-active: #111;
}

.rcat-reels__title {
	margin: 0 0 var(--rcat-gap);
}

.rcat-reels__viewport {
	position: relative;
}

/* =====================================================================
   Modo cuadrícula
   ================================================================== */

.rcat-reels__grid {
	display: grid;
	/* minmax(0, 1fr) permite que las columnas se achiquen por debajo del ancho
	   mínimo del contenido. Sin esto, 5 columnas se desbordan. */
	grid-template-columns: repeat(var(--rcat-cols), minmax(0, 1fr));
	gap: var(--rcat-gap);
	align-items: start;
}

.rcat-reels__item {
	position: relative;
	width: 100%;
	max-width: min(100%, var(--rcat-item-max, 100%));
	aspect-ratio: var(--rcat-ratio);
	overflow: hidden;
	border-radius: var(--rcat-radius);
	background-color: var(--rcat-bg);
	line-height: 0;
	margin-left: auto;
	margin-right: auto;
}

.rcat-reels__item iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* TikTok inyecta un min-width propio: sin anularlo, las columnas angostas
	   se desbordan y pierden la altura pareja. */
	min-width: 0;
	max-width: none;
	min-height: 0;
	border: 0;
	display: block;
}

.rcat-reels__item iframe.skip-lazy {
	opacity: 1 !important;
	visibility: visible !important;
}

/* =====================================================================
   Modo carrusel
   ================================================================== */

.rcat-reels--carousel .rcat-reels__grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/* Ocultamos la barra de scroll: se navega por swipe, flechas o puntos. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	outline: none;
}

.rcat-reels--carousel .rcat-reels__grid::-webkit-scrollbar {
	display: none;
}

.rcat-reels--carousel .rcat-reels__item {
	/* Ancho segun cuantos videos deben verse a la vez. --rcat-floor es un piso
	   de absurdo que en escritorio nunca se activa (1200px / 5 = 227px). */
	flex: 0 0 min(
		100%,
		max(
			var(--rcat-floor, 140px),
			calc(
				(100% - var(--rcat-gap) * (var(--rcat-cols) + var(--rcat-peek) - 1))
				/ (var(--rcat-cols) + var(--rcat-peek))
			)
		)
	);
	/* En carrusel manda el flex-basis: un max-width lo pelearía y descuadraría
	   el snap. */
	max-width: none;
	scroll-snap-align: start;
	margin-left: 0;
	margin-right: 0;
}

/* Red de seguridad para móvil.

   Esta regla vive en el CSS del plugin, no en el que genera Elementor, así que
   se aplica aunque la regla responsive de Elementor no llegue al dispositivo
   (caché de página, CSS sin regenerar, o el valor móvil heredando el de
   escritorio). Sube el piso a --rcat-min-slide: si con el número de columnas
   configurado los videos quedarían más chicos que eso, el carrusel muestra
   menos a la vez en lugar de encogerlos. Nunca cinco videos diminutos. */
@media (max-width: 767px) {
	.rcat-reels--carousel .rcat-reels__item {
		flex: 0 0 min(
			100%,
			max(
				var(--rcat-min-slide, 240px),
				calc(
					(100% - var(--rcat-gap) * (var(--rcat-cols) + var(--rcat-peek) - 1))
					/ (var(--rcat-cols) + var(--rcat-peek))
				)
			)
		);
	}
}

.rcat-reels--carousel .rcat-reels__grid.is-dragging {
	scroll-behavior: auto;
	scroll-snap-type: none;
	cursor: grabbing;
}

/* =====================================================================
   Flechas

   Van con selectores de especificidad alta y con un reset completo: muchos
   temas declaran estilos para `button` que le ganaban a la versión anterior
   y convertían las flechas en cuadros negros.
   ================================================================== */

.rcat-reels .rcat-reels__arrow,
.rcat-reels .rcat-reels__arrow:hover,
.rcat-reels .rcat-reels__arrow:focus,
.rcat-reels .rcat-reels__arrow:active {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	box-sizing: border-box;
	width: var(--rcat-arrow-size);
	height: var(--rcat-arrow-size);
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background-color: var(--rcat-arrow-bg);
	background-image: none;
	box-shadow: none;
	color: var(--rcat-arrow-color);
	font-size: 0;
	line-height: 0;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s ease, filter .2s ease;
}

.rcat-reels .rcat-reels__arrow:hover {
	filter: brightness(1.3);
}

.rcat-reels .rcat-reels__arrow:focus-visible {
	outline: 2px solid var(--rcat-arrow-color);
	outline-offset: 2px;
}

.rcat-reels .rcat-reels__arrow--prev {
	left: 8px;
	right: auto;
}

.rcat-reels .rcat-reels__arrow--next {
	right: 8px;
	left: auto;
}

/* El ícono va relleno, no con trazo: hay temas que fuerzan stroke:none en SVG
   y dejaban la flecha invisible. */
.rcat-reels .rcat-reels__arrow svg {
	width: 60%;
	height: 60%;
	display: block;
	fill: currentColor;
	stroke: none;
	pointer-events: none;
}

.rcat-reels .rcat-reels__arrow svg path {
	fill: currentColor;
}

.rcat-reels .rcat-reels__arrow:disabled {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}

.rcat-reels .rcat-reels__arrow[hidden] {
	display: none;
}

/* =====================================================================
   Puntos
   ================================================================== */

.rcat-reels .rcat-reels__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.rcat-reels .rcat-reels__dots[hidden] {
	display: none;
}

.rcat-reels .rcat-reels__dot,
.rcat-reels .rcat-reels__dot:hover,
.rcat-reels .rcat-reels__dot:focus {
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background-color: var(--rcat-dot-color);
	background-image: none;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.rcat-reels .rcat-reels__dot.is-active {
	background-color: var(--rcat-dot-active);
	transform: scale(1.35);
}

/* Área táctil cómoda en móvil sin agrandar el punto visible. */
@media (pointer: coarse) {
	.rcat-reels .rcat-reels__dots {
		gap: 14px;
	}
}

/* =====================================================================
   Avisos
   ================================================================== */

.rcat-reels__error,
.rcat-reels__notice {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	border-radius: var(--rcat-radius);
	color: #50575e;
	background: #f6f7f7;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.rcat-reels__error {
	border-color: #b32d2e;
	color: #b32d2e;
	background: #fcf0f1;
}

@media (prefers-reduced-motion: reduce) {
	.rcat-reels--carousel .rcat-reels__grid {
		scroll-behavior: auto;
	}
}

/* Fallback para navegadores sin aspect-ratio (Safari < 15). */
@supports not (aspect-ratio: 1 / 1) {
	.rcat-reels__item {
		height: 0;
		padding-bottom: 177.78%;
	}
}