/**
 * UNIPAC – Modalidades: desplazamiento horizontal con captura de scroll
 * Autor: VisorLab en unión con Claude
 * Versión: 1.4 (drag + cursor + estado activo + hover CTA)
 *
 * Columnas visibles por defecto:
 *   ≥ 1439px → 4   |   ≥ 1023px → 3   |   < 1023px → 1
 */
.unipac_modalidades_programa {
	--unipac-cols: 1;
	--unipac-x: 0px;
	position: relative;
	grid-template-columns: none !important;
	grid-auto-flow: column !important;
	grid-auto-columns: calc((100% - (var(--unipac-cols) - 1) * var(--column-gap, 0px)) / var(--unipac-cols)) !important;
	/* Sin JS: carrusel deslizable nativo */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.unipac_modalidades_programa::-webkit-scrollbar { display: none; }
.unipac_modalidades_programa > * {
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 1023px) {
	.unipac_modalidades_programa { --unipac-cols: 3; }
}
@media (min-width: 1439px) {
	.unipac_modalidades_programa { --unipac-cols: 4; }
}

/* Activado por JS */
.unipac_modalidades_programa.unipac-hscroll--activo {
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: visible;
	scroll-snap-type: none;
}
.unipac_modalidades_programa.unipac-hscroll--activo > * {
	transform: translate3d(var(--unipac-x), 0, 0);
	will-change: transform;
}

/* ───────────── Arrastre + cursor personalizado ───────────── */
.unipac-hscroll--cursor,
.unipac-hscroll--cursor * { cursor: none; }
.unipac-hscroll--cursor a,
.unipac-hscroll--cursor a *,
.unipac-hscroll--cursor button { cursor: pointer; }
.unipac_modalidades_programa.is-arrastrando,
.unipac_modalidades_programa.is-arrastrando * {
	user-select: none;
	-webkit-user-select: none;
	cursor: none;
}

.unipac-hscroll-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: none;
	will-change: transform;
}
.unipac-hscroll-cursor__bola {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 92px;
	height: 92px;
	margin: -46px 0 0 -46px;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	box-sizing: border-box;
	background: rgba(126, 66, 146, .92);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	color: #fff;
	font: 700 11px/1 Montserrat, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: 0;
	transform: scale(.2);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, background-color .2s ease;
}
/* Flechas por fuera de la bola */
.unipac-hscroll-cursor__bola svg {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: #7e4292;
	filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.unipac-hscroll-cursor__bola svg:first-child { left: -22px; }
.unipac-hscroll-cursor__bola svg:last-child  { right: -22px; }
.unipac-hscroll-cursor.is-visible .unipac-hscroll-cursor__bola {
	opacity: 1;
	transform: scale(1);
}
.unipac-hscroll-cursor.is-arrastrando .unipac-hscroll-cursor__bola {
	transform: scale(.82);
	background: rgba(238, 115, 38, .95);
}
.unipac-hscroll-cursor.is-arrastrando svg:first-child { transform: translateX(-5px); }
.unipac-hscroll-cursor.is-arrastrando svg:last-child  { transform: translateX(5px); }

@media (hover: none), (pointer: coarse) {
	.unipac-hscroll-cursor { display: none; }
}

/* ───────────── Indicador ───────────── */
.unipac-hscroll-ui {
	--u-color: #7e4292;
	--u-acento: #ee7326;
	--u-pista: rgba(126, 66, 146, .16);
	display: flex;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px clamp(16px, 4vw, 56px);
	color: var(--u-color);
	font-family: Montserrat, sans-serif;
}
.unipac-hscroll-ui[hidden] { display: none; }

/* Pista "desplázate / desliza" */
.unipac-hscroll-ui__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.unipac-hscroll-ui__icono {
	position: relative;
	flex: none;
	width: 18px;
	height: 28px;
	border: 2px solid currentColor;
	border-radius: 10px;
	box-sizing: border-box;
}
.unipac-hscroll-ui__icono::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 5px;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--u-acento);
	animation: unipac-rueda 1.6s ease-in-out infinite;
}
@keyframes unipac-rueda {
	0%   { transform: translateY(0);   opacity: 1; }
	70%  { transform: translateY(9px); opacity: 0; }
	100% { transform: translateY(0);   opacity: 0; }
}
/* Touch: dedo deslizando hacia arriba */
@media (pointer: coarse) {
	.unipac-hscroll-ui__icono {
		width: 14px;
		height: 30px;
		border: 0;
		border-radius: 0;
		background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	}
	.unipac-hscroll-ui__icono::before {
		top: auto;
		bottom: 0;
		width: 12px;
		height: 12px;
		margin-left: -6px;
		border-radius: 50%;
		animation: unipac-swipe 1.6s ease-in-out infinite;
	}
}
@keyframes unipac-swipe {
	0%   { transform: translateY(0);     opacity: 0; }
	20%  { opacity: 1; }
	80%  { transform: translateY(-18px); opacity: 1; }
	100% { transform: translateY(-18px); opacity: 0; }
}

/* Barra de progreso: muestra qué parte del carrusel está a la vista */
.unipac-hscroll-ui__barra {
	position: relative;
	flex: 1 1 auto;
	height: 4px;
	border-radius: 4px;
	background: var(--u-pista);
	overflow: hidden;
	transition: height .2s ease;
}
.unipac-hscroll-ui.is-capturando .unipac-hscroll-ui__barra { height: 6px; }
.unipac-hscroll-ui__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--u-ini, 0%);
	width: var(--u-ancho, 100%);
	border-radius: inherit;
	background: var(--u-acento);
}

.unipac-hscroll-ui__contador {
	flex: none;
	min-width: 4.2em;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.unipac-hscroll-ui__btns { display: flex; gap: 8px; flex: none; }
.unipac-hscroll-ui__btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color .2s, color .2s, opacity .2s;
}
.unipac-hscroll-ui__btn svg { width: 18px; height: 18px; }
.unipac-hscroll-ui__btn:hover:not(:disabled) { background: var(--u-color); color: #fff; }
.unipac-hscroll-ui__btn:focus-visible { outline: 3px solid var(--u-acento); outline-offset: 2px; }
.unipac-hscroll-ui__btn:disabled { opacity: .3; cursor: default; }

@media (max-width: 1022px) {
	.unipac-hscroll-ui { flex-wrap: wrap; gap: 14px 16px; }
	.unipac-hscroll-ui__hint { flex: 1 0 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.unipac-hscroll-ui__icono::before { animation: none; }
}

/* ───────────── Estado activo de la tarjeta (según Figma) ─────────────
 * Reposo: color de la tarjeta, títulos rosa, textos blancos.
 * Activa (hover, foco con teclado o tap en touch): fondo blanco, número/título,
 * separadores e "Ideal para:" morados, textos grises, CTA naranja.
 * Todo cambia a la vez con un fundido de 350 ms, como en el prototipo.
 */
.unipac_modalidades_programa {
	--u-activa-bg: #ffffff;
	--u-activa-morado: #7e4292;
	--u-activa-texto: #656565;
	--u-activa-cta: #ee7326;
	--u-fundido: .35s cubic-bezier(.4, 0, .2, 1);
}

/* El contenedor de Elementor trae "transform .4s": lo quitamos para que el
   arrastre y la rueda respondan sin retraso, y dejamos solo el fundido. */
.unipac_modalidades_programa.unipac-hscroll--activo > .unipac_destacado {
	transition: background-color var(--u-fundido), box-shadow var(--u-fundido) !important;
}
.unipac_destacado h2,
.unipac_destacado p,
.unipac_destacado .elementor-icon-list-text,
.unipac_destacado .elementor-button,
.unipac_destacado .elementor-button-text,
.unipac_destacado svg,
.unipac_destacado svg path {
	transition: color var(--u-fundido), fill var(--u-fundido), stroke var(--u-fundido) !important;
}

/* Fondo */
.unipac_modalidades_programa > .unipac_destacado.is-activa,
.unipac_modalidades_programa > .unipac_destacado:focus-within {
	background-color: var(--u-activa-bg) !important;
}
@media (hover: hover) {
	.unipac_modalidades_programa > .unipac_destacado:hover { background-color: var(--u-activa-bg) !important; }
}

/* Número y título */
.unipac_destacado.is-activa .unipac_caracteristicas_titulo h2,
.unipac_destacado:focus-within .unipac_caracteristicas_titulo h2 { color: var(--u-activa-morado) !important; }

/* Separadores punteados */
.unipac_destacado.is-activa .unipac_caracteristicas_separador svg path,
.unipac_destacado:focus-within .unipac_caracteristicas_separador svg path { stroke: var(--u-activa-morado) !important; }

/* Párrafos grises */
.unipac_destacado.is-activa .unipac_caracteristicas_descripcion p,
.unipac_destacado:focus-within .unipac_caracteristicas_descripcion p { color: var(--u-activa-texto) !important; }

/* "Ideal para:" (el párrafo que va justo antes de la lista) en morado */
.unipac_destacado.is-activa .unipac_caracteristicas_descripcion:has(+ .elementor-widget-icon-list) p,
.unipac_destacado:focus-within .unipac_caracteristicas_descripcion:has(+ .elementor-widget-icon-list) p { color: var(--u-activa-morado) !important; }

/* Lista: texto y viñetas grises (antes el texto quedaba blanco sobre blanco) */
.unipac_destacado.is-activa .elementor-icon-list-text,
.unipac_destacado:focus-within .elementor-icon-list-text { color: var(--u-activa-texto) !important; }
.unipac_destacado.is-activa .elementor-icon-list-icon svg,
.unipac_destacado.is-activa .elementor-icon-list-icon svg path,
.unipac_destacado:focus-within .elementor-icon-list-icon svg,
.unipac_destacado:focus-within .elementor-icon-list-icon svg path { fill: var(--u-activa-texto) !important; }

/* CTA naranja */
.unipac_destacado.is-activa .elementor-button,
.unipac_destacado.is-activa .elementor-button-text,
.unipac_destacado:focus-within .elementor-button,
.unipac_destacado:focus-within .elementor-button-text { color: var(--u-activa-cta) !important; }
.unipac_destacado.is-activa .elementor-button-icon svg,
.unipac_destacado.is-activa .elementor-button-icon svg path,
.unipac_destacado:focus-within .elementor-button-icon svg,
.unipac_destacado:focus-within .elementor-button-icon svg path { fill: var(--u-activa-cta) !important; }

/* Mismo estado con hover del mouse */
@media (hover: hover) {
	.unipac_destacado:hover .unipac_caracteristicas_titulo h2 { color: var(--u-activa-morado) !important; }
	.unipac_destacado:hover .unipac_caracteristicas_separador svg path { stroke: var(--u-activa-morado) !important; }
	.unipac_destacado:hover .unipac_caracteristicas_descripcion p { color: var(--u-activa-texto) !important; }
	.unipac_destacado:hover .unipac_caracteristicas_descripcion:has(+ .elementor-widget-icon-list) p { color: var(--u-activa-morado) !important; }
	.unipac_destacado:hover .elementor-icon-list-text { color: var(--u-activa-texto) !important; }
	.unipac_destacado:hover .elementor-icon-list-icon svg,
	.unipac_destacado:hover .elementor-icon-list-icon svg path { fill: var(--u-activa-texto) !important; }
	.unipac_destacado:hover .elementor-button,
	.unipac_destacado:hover .elementor-button-text { color: var(--u-activa-cta) !important; }
	.unipac_destacado:hover .elementor-button-icon svg,
	.unipac_destacado:hover .elementor-button-icon svg path { fill: var(--u-activa-cta) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.unipac_modalidades_programa { --u-fundido: 0s; }
}

/* Hover del link "Ver oferta educativa →" */
.unipac_modalidades_programa { --u-cta-hover: #198043; }
.unipac_destacado .elementor-button:hover,
.unipac_destacado .elementor-button:focus-visible,
.unipac_destacado .elementor-button:hover .elementor-button-text,
.unipac_destacado .elementor-button:focus-visible .elementor-button-text { color: var(--u-cta-hover) !important; }
.unipac_destacado .elementor-button:hover .elementor-button-icon svg,
.unipac_destacado .elementor-button:hover .elementor-button-icon svg path,
.unipac_destacado .elementor-button:focus-visible .elementor-button-icon svg,
.unipac_destacado .elementor-button:focus-visible .elementor-button-icon svg path { fill: var(--u-cta-hover) !important; }


/* Variante de 3 columnas: las 3 tarjetas ocupan todo el ancho, sin carrusel en desktop */

  .unipac_modalidades_programa.unipac_modalidades_programa_3 {
    --unipac-cols: 3;
    scroll-snap-type: none;
  }

  .unipac_modalidades_programa.unipac_modalidades_programa_3 > * {
    transform: none !important;
  }


/* ===== Variante 3 columnas: .unipac_modalidades_programa_3 ===== */

/* Mobile y tablet (hasta 1024px): tarjetas apiladas en filas, sin carrusel */
@media (max-width: 1024px) {
  .unipac_modalidades_programa.unipac_modalidades_programa_3 {
    overflow: visible !important;
    scroll-snap-type: none;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
  }
}

/* Desktop (desde 1025px): 3 columnas a todo lo ancho */
@media (min-width: 1025px) {
  .unipac_modalidades_programa.unipac_modalidades_programa_3 {
    --unipac-cols: 3;
    scroll-snap-type: none;
  }
}

/* En cualquier ancho, el JS del scroll no desplaza las tarjetas */
.unipac_modalidades_programa.unipac_modalidades_programa_3 > * {
  transform: none !important;
}

/* Variante 3: puntero normal del mouse, sin cursor personalizado de arrastre */
.unipac_modalidades_programa.unipac_modalidades_programa_3,
.unipac_modalidades_programa.unipac_modalidades_programa_3 * {
  cursor: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

/* Oculta la bola "arrastrar" solo mientras el mouse está sobre esta variante */
body:has(.unipac_modalidades_programa_3:hover) .unipac-hscroll-cursor {
  display: none !important;
}


/* Variante de 4 columnas: las 4 tarjetas ocupan todo el ancho, sin carrusel en desktop */

  .unipac_modalidades_programa.unipac_modalidades_programa_4 {
    --unipac-cols: 4;
    scroll-snap-type: none;
  }

  .unipac_modalidades_programa.unipac_modalidades_programa_4 > * {
    transform: none !important;
  }


/* ===== Variante 4 columnas: .unipac_modalidades_programa_4 ===== */

/* Mobile y tablet (hasta 1024px): tarjetas apiladas en filas, sin carrusel */
@media (max-width: 1024px) {
  .unipac_modalidades_programa.unipac_modalidades_programa_4 {
    overflow: visible !important;
    scroll-snap-type: none;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
  }
}

/* Desktop (desde 1025px): 4 columnas a todo lo ancho */
@media (min-width: 1025px) {
  .unipac_modalidades_programa.unipac_modalidades_programa_4 {
    --unipac-cols: 4;
    scroll-snap-type: none;
  }
}

/* En cualquier ancho, el JS del scroll no desplaza las tarjetas */
.unipac_modalidades_programa.unipac_modalidades_programa_4 > * {
  transform: none !important;
}

/* Variante 4: puntero normal del mouse, sin cursor personalizado de arrastre */
.unipac_modalidades_programa.unipac_modalidades_programa_4,
.unipac_modalidades_programa.unipac_modalidades_programa_4 * {
  cursor: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

/* Oculta la bola "arrastrar" solo mientras el mouse está sobre esta variante */
body:has(.unipac_modalidades_programa_4:hover) .unipac-hscroll-cursor {
  display: none !important;
}