/* Módulo «carrusel» del front: se carga solo si la página trae sus clases (App\Core\View\CssFront::MODULOS). */
/* Slider reutilizable: scroll horizontal nativo y scroll-snap. */
.producto-slider-seccion { margin-top: 3rem; }
.producto-slider { position: relative; }
.producto-slider__pista {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* `overflow-x: auto` también recorta en vertical: sin este aire, la tarjeta que se levanta (translateY(-3px)) perdía el borde de arriba y su sombra
	   quedaba cortada. El margen negativo devuelve el espacio, así el layout no cambia. */
	padding: .4rem 0 .9rem;
	margin: -.4rem 0 -.9rem;
}
/* Misma cantidad de tarjetas por "página" que la grilla de productos
   normal (--grid-cols-*, ThemeCss) — el theme define una sola vez cuántas
   columnas van en cada tamaño de pantalla y el slider las respeta. */
.producto-slider__pista .producto-card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--grid-cols-movil, 2) - 1) * 1.25rem) / var(--grid-cols-movil, 2));
	min-width: 150px;
}
@media (min-width: 768px) and (max-width: 1024px) {
.producto-slider__pista .producto-card {
		flex-basis: calc((100% - (var(--grid-cols-tablet, 3) - 1) * 1.25rem) / var(--grid-cols-tablet, 3));
	}
}
@media (min-width: 1025px) {
.producto-slider__pista .producto-card {
		flex-basis: calc((100% - (var(--grid-cols-escritorio, 4) - 1) * 1.25rem) / var(--grid-cols-escritorio, 4));
	}
}
@media (max-width: 360px) {
.producto-slider__pista .producto-card { flex-basis: 100%; }
}
.flecha-slider--prev { left: -0.75rem; }
.flecha-slider--next { right: -0.75rem; }
/* Animación al hacer click (app.js agrega/saca la clase) — un "pulso"
   simple, nada elaborado. */
.flecha-slider--pulso { animation: flecha-pulso 280ms ease; }
@keyframes flecha-pulso {
	0% { transform: translateY(-50%) scale(1); }
	40% { transform: translateY(-50%) scale(0.82); }
	100% { transform: translateY(-50%) scale(1); }
}
@media (max-width: 640px) {
.flecha-slider { width: calc(var(--flecha-tamano, 2.4rem) * 0.8); height: calc(var(--flecha-tamano, 2.4rem) * 0.8); }
}
/* producto-slider.php oculta flechas si todos los elementos caben en el breakpoint. */
@media (max-width: 767px) {
.producto-slider--sin-flechas-movil .flecha-slider { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.producto-slider--sin-flechas-tablet .flecha-slider { display: none; }
}
@media (min-width: 1025px) {
.producto-slider--sin-flechas-escritorio .flecha-slider { display: none; }
}
/* Flechas del slider de productos relacionados: centradas en la altura de las tarjetas. Si la tarjeta es angosta y su texto la vuelve más alta que
   ancha, el centro se limita a la foto (cuadrada, del ancho de la tarjeta) para que la flecha no caiga sobre el nombre o el precio. */
.producto-slider { container-type: inline-size; }
.producto-slider .flecha-slider {
	--cols: var(--grid-cols-movil, 2);
	--foto: calc((100cqw - (var(--cols) - 1) * 1.25rem) / var(--cols));
	top: min(50%, calc(var(--foto) - var(--flecha-tamano, 2.4rem) / 2 - .5rem));
}
@media (min-width: 768px) and (max-width: 1024px) {
.producto-slider .flecha-slider { --cols: var(--grid-cols-tablet, 3); }
}
@media (min-width: 1025px) {
.producto-slider .flecha-slider { --cols: var(--grid-cols-escritorio, 4); }
}
@media (max-width: 360px) {
.producto-slider .flecha-slider { --cols: 1; }
}
/* Carrusel genérico (`data-vc-carrusel`, ver carrusel.js): una fila con scroll-snap que funciona sin JS; con JS suma puntos, flechas y autoplay opcional.
   `data-por-vista` (1–6) fija cuántas diapositivas caben a la vez en escritorio; en tablet son 2 como máximo y en celular 1. */
.vc-carrusel { position: relative; --vc-por-vista: 1; --vc-gap: 1rem; }
.vc-carrusel[data-por-vista="2"] { --vc-por-vista: 2; }
.vc-carrusel[data-por-vista="3"] { --vc-por-vista: 3; }
.vc-carrusel[data-por-vista="4"] { --vc-por-vista: 4; }
.vc-carrusel[data-por-vista="5"] { --vc-por-vista: 5; }
.vc-carrusel[data-por-vista="6"] { --vc-por-vista: 6; }
@media (max-width: 1024px) {
.vc-carrusel[data-por-vista="3"], .vc-carrusel[data-por-vista="4"], .vc-carrusel[data-por-vista="5"], .vc-carrusel[data-por-vista="6"] { --vc-por-vista: 2; }
}
@media (max-width: 640px) {
.vc-carrusel[data-por-vista] { --vc-por-vista: 1; }
}
.vc-carrusel__pista { display: flex; gap: var(--vc-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: .5rem 0; margin: -.5rem 0; }
.vc-carrusel__pista::-webkit-scrollbar { display: none; }
.vc-carrusel__slide { flex: 0 0 calc((100% - (var(--vc-por-vista) - 1) * var(--vc-gap)) / var(--vc-por-vista)); min-width: 0; scroll-snap-align: start; }
.vc-carrusel__puntos { display: flex; justify-content: center; gap: .15rem; margin-top: .75rem; }
.vc-carrusel__punto { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.vc-carrusel__punto::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: color-mix(in srgb, currentColor 32%, transparent); transition: transform .2s ease, background-color .2s ease; }
.vc-carrusel__punto[aria-current="true"]::before { background: currentColor; transform: scale(1.3); }
.vc-carrusel__flecha { position: absolute; top: calc((100% - 2.25rem) / 2); z-index: 2; display: grid; place-items: center; box-sizing: border-box; flex: none; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; aspect-ratio: 1 / 1; padding: 0; margin: 0; border: 1px solid var(--color-borde); border-radius: 50%; background: var(--color-flotante, #fff); color: var(--color-texto); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-sombra) 14%, transparent); transform: translateY(-50%); cursor: pointer; -webkit-appearance: none; appearance: none; }
.vc-carrusel__flecha--ant { left: -.75rem; }
.vc-carrusel__flecha--sig { right: -.75rem; }
.vc-carrusel__flecha:disabled { opacity: .35; cursor: default; }
.vc-carrusel--simple .vc-carrusel__flecha { display: none; }
@media (max-width: 640px) {
.vc-carrusel__flecha--ant { left: -.25rem; }
.vc-carrusel__flecha--sig { right: -.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.vc-carrusel__pista { scroll-behavior: auto; }
.vc-carrusel__punto::before { transition: none; }
}