/* -------------------------------------------------------------------
 * rotator.css
 * -------------------------------------------------------------------
 * Estilos del carrusel "Reels Rotator".
 *
 * CAMBIO IMPORTANTE (a partir de esta versión): el efecto 3D (reel
 * centrado grande y de frente, laterales rotados/achicados/con sombra)
 * ya NO lo dibujamos nosotros con variables CSS propias (--rrw-scale,
 * --rrw-blur, etc.) — lo genera el efecto "coverflow" que trae Swiper.js
 * de fábrica (rotator.js solo le pasa 2 números: rotación y
 * profundidad). Swiper aplica esa transformación 3D directamente sobre
 * cada ".swiper-slide" y agrega sus propias capas de sombra
 * (".swiper-slide-shadow-left/right") — nosotros ya no calculamos nada
 * de eso, solo definimos el tamaño/forma de la tarjeta y algunos
 * "toques" encima (la curva del rebote, el look general oscuro).
 * ------------------------------------------------------------------- */

/* Contenedor exterior: fondo oscuro + espacio para las flechas */
.rrw-carousel-wrap {
	position: relative;
	width: 100%;
	background: #0a0a0f; /* fondo oscuro, como pide el referente visual */
	padding: 36px 0;
	overflow: hidden;
	box-sizing: border-box;
}

.rrw-carousel-wrap *,
.rrw-carousel-wrap *::before,
.rrw-carousel-wrap *::after {
	box-sizing: border-box;
}

.rrw-swiper {
	width: 100%;
	padding: 26px 0;
	/* NOTA: ya no ponemos "perspective" acá a mano — Swiper agrega su
	 * propia clase "swiper-3d" a este contenedor (con su perspectiva ya
	 * calculada) apenas activamos effect:"coverflow" en rotator.js. */
	/* overflow visible: permite que los slides laterales, rotados y más
	 * chicos por la perspectiva 3D, no queden "cortados" por el borde
	 * del contenedor. */
	overflow: visible;
}

.rrw-swiper .swiper-wrapper {
	/* alinea verticalmente todos los slides sin importar que tengan
	 * distinta escala (los más chicos quedan centrados igual). */
	align-items: center;
}

/* -----------------------------------------------------------------
 * SLIDES
 * ----------------------------------------------------------------- */
.rrw-slide {
	/* El TAMAÑO de cada slide ya NO se fija en px a mano: rotator.js le
	 * pasa a Swiper cuántos reels se ven a la vez (control "Tamaño de
	 * los reels" del panel — más alto ese número, más chico se ve cada
	 * reel, con puntos de quiebre responsive), y es Swiper quien calcula
	 * y aplica el ANCHO de cada slide (inline) a partir de eso — necesario
	 * para que el loop infinito quede simétrico (ver el comentario del
	 * encabezado de este archivo). El alto se mantiene SIEMPRE
	 * proporcional al ancho con aspect-ratio (9:16, como un Reel real) —
	 * así el reel nunca se deforma, sea cual sea el tamaño elegido. El
	 * achicamiento/rotación/sombra de los laterales tampoco se define
	 * acá — lo aplica Swiper directamente sobre este mismo elemento. */
	max-width: 90vw; /* red de seguridad para pantallas muy angostas */
	aspect-ratio: 9 / 16; /* proporción vertical típica de un Reel — se mantiene siempre, no se deforma */
	border-radius: 14px;
	overflow: hidden; /* también recorta la sombra que agrega Swiper en los laterales, a la misma forma redondeada */
	cursor: pointer;
	position: relative;
	background: #16161f;

	/* El "rebote" sencillo que pediste: Swiper anima la rotación/tamaño
	 * de cada slide con una duración fija (la que fija "speed" en
	 * rotator.js), pero deja la CURVA de esa animación a cargo del CSS.
	 * Con una curva que se pasa un poco de largo antes de asentarse (en
	 * vez de la "ease" pareja de siempre), el crecimiento al centrarse
	 * se siente con un rebote suave — sin necesitar JavaScript aparte.
	 * El !important es porque Swiper sí fija la DURACIÓN por su cuenta
	 * (vía JavaScript) en cada slide; sin él, esta curva podría no
	 * aplicarse en todos los casos. */
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* El slide activo (centrado) lo marca Swiper automáticamente con la
 * clase "swiper-slide-active". Le damos prioridad de apilado (z-index)
 * para que quede siempre por encima de los laterales. */
.rrw-slide.swiper-slide-active {
	z-index: 5;
	cursor: pointer;
}

/* Cuando el movimiento automático está activo (modo "always" o
 * "hover", ver data-autoplay-mode que pone class-widget.php), usamos
 * una curva LINEAL para el desplazamiento HORIZONTAL del carrusel (el
 * que mueve la tira completa de un lado a otro) en vez de la curva
 * "ease" por defecto del navegador — así, combinado con el delay casi
 * en cero que configura rotator.js, el movimiento se ve como una cinta
 * continua en vez de una seguidilla de frenados y arranques. Esto es
 * aparte del "rebote" de arriba: ese es el giro/tamaño de CADA tarjeta,
 * este es el desplazamiento del carrusel completo. */
.rrw-carousel-wrap[data-autoplay-mode="always"] .swiper-wrapper,
.rrw-carousel-wrap[data-autoplay-mode="hover"] .swiper-wrapper {
	transition-timing-function: linear;
}

.rrw-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none; /* el click lo maneja el contenedor .rrw-slide */
}

.rrw-slide-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 14px;
	background: #1c1c27;
}

/* Icono de "play" decorativo centrado sobre cada slide */
.rrw-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 28px;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	opacity: 0.9;
	z-index: 1; /* por encima de la sombra que agrega Swiper en los laterales */
	transition: opacity var(--rrw-speed, 600ms) ease;
}

.rrw-slide:not(.swiper-slide-active) .rrw-play-icon {
	opacity: 0.5;
}

/* -----------------------------------------------------------------
 * FLECHAS DE NAVEGACIÓN
 * ----------------------------------------------------------------- */
.rrw-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: background 0.25s ease, border-color 0.25s ease;
}

.rrw-nav:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.45);
}

.rrw-nav-prev {
	left: 12px;
}

.rrw-nav-next {
	right: 12px;
}

/* -----------------------------------------------------------------
 * BOTÓN "SEGUIR EN INSTAGRAM" (opcional)
 * ----------------------------------------------------------------- */
.rrw-follow-wrap {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.rrw-follow-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 999px; /* forma de "píldora" */
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(4px);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.rrw-follow-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	transform: translateY(-1px);
}

/* -----------------------------------------------------------------
 * RESPONSIVE
 * -----------------------------------------------------------------
 * El tamaño de los reels ya es responsive por su cuenta — los puntos de
 * quiebre que calcula rotator.js a partir de "Tamaño de los reels" (ver
 * class-widget.php) escalan ese número solos según el ancho de
 * pantalla, así que NO hace falta un @media aparte para eso acá. Estos
 * @media solo ajustan el "aire" alrededor del carrusel y el tamaño de
 * las flechas.
 * ----------------------------------------------------------------- */
@media (max-width: 768px) {
	.rrw-carousel-wrap {
		padding: 20px 0;
	}

	.rrw-swiper {
		padding: 14px 0;
	}

	.rrw-slide {
		border-radius: 10px;
	}

	.rrw-nav {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.rrw-nav-prev {
		left: 6px;
	}

	.rrw-nav-next {
		right: 6px;
	}
}