/**
 * Widget «CUME Niveles» (S8): las tarjetas de los niveles en el catálogo
 * (Oferta académica). Toda la tarjeta es el enlace a la página del nivel.
 *
 * Solo globales del kit (§3.1 y §3.2 del plan): tarjetas en «Card» con
 * «Borde de card», se invierten solas en modo claro. Morado acento solo en
 * texto grande; el texto chico va en «CUME - Enlaces» o en grises del kit.
 */

.cume-niveles {
	--cume-nvs-cols: 3;
	--cume-nvs-card: var(--e-global-color-92c8497); /* «CUME - Card». */
	--cume-nvs-borde: var(--e-global-color-8297c8e); /* «CUME - Borde de card». */
	--cume-nvs-hover: var(--e-global-color-811010f); /* «CUME - Card hover». */
	--cume-nvs-acento: var(--e-global-color-secondary); /* «CUME - Ámbar de marca». */
	--cume-nvs-morado: var(--e-global-color-d1f174c); /* «CUME - Morado acento». */
}

.cume-niveles__grid {
	display: grid;
	grid-template-columns: repeat(var(--cume-nvs-cols), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cume-niveles__tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cume-nvs-borde);
	border-radius: 4px; /* Radio estándar del sitio. */
	background: var(--cume-nvs-card);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background-color 240ms ease;
}

/* Barra de acento superior a dos colores, como las tarjetas de la Oferta. */
.cume-niveles__tarjeta::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--cume-nvs-acento) 0, var(--cume-nvs-acento) 22%, var(--cume-nvs-morado) 22%, var(--cume-nvs-morado) 100%);
}

.cume-niveles__tarjeta:hover,
.cume-niveles__tarjeta:focus-within {
	transform: translateY(-4px);
	border-color: var(--cume-nvs-acento);
	background: var(--cume-nvs-hover);
}

/* --- Imagen o ícono --- */
.cume-niveles__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--e-global-color-dcd60da); /* «CUME - Superficie 2». */
}

.cume-niveles__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.cume-niveles__tarjeta:hover .cume-niveles__imagen {
	transform: scale(1.04);
}

.cume-niveles__media--icono {
	display: flex;
	align-items: flex-end;
	aspect-ratio: auto;
	padding: 28px 28px 0;
	background: transparent;
}

.cume-niveles__icono {
	display: block;
	width: 56px;
	height: 56px;
	padding: 12px;
	border-radius: 4px;
	background: var(--e-global-color-e005292); /* «CUME - Ámbar suave». */
	color: var(--e-global-color-accent); /* «CUME - Ámbar íconos». */
}

/* --- Cuerpo --- */
.cume-niveles__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 24px 28px 28px;
}

.cume-niveles .cume-niveles__conteo {
	margin: 0;
	color: var(--e-global-color-ea2f468); /* «CUME - Enlaces»: el ámbar como texto chico no pasa AA en modo claro. */
	font-family: var(--e-global-typography-3508857-font-family), sans-serif;
	font-size: var(--e-global-typography-3508857-font-size, 0.75rem); /* «CUME - Antetítulo» del kit. */
	font-weight: var(--e-global-typography-3508857-font-weight, 700);
	letter-spacing: var(--e-global-typography-3508857-letter-spacing, 0.12em);
	text-transform: var(--e-global-typography-3508857-text-transform, uppercase);
	line-height: 1.2;
}

/* Doble clase: gana al estilo de h2 del kit (.elementor-kit-6 h2). */
.cume-niveles .cume-niveles__titulo {
	margin: 0;
	font-family: var(--e-global-typography-1c9d82e-font-family), sans-serif;
	font-size: var(--e-global-typography-1c9d82e-font-size, 1.5rem); /* «CUME - Título de tarjeta» del kit. */
	font-weight: var(--e-global-typography-1c9d82e-font-weight, 700);
	line-height: var(--e-global-typography-1c9d82e-line-height, 1.2);
}

/* El enlace cubre toda la tarjeta. Doble clase: gana al color de enlace del tema. */
.cume-niveles .cume-niveles__enlace {
	color: var(--e-global-color-6517dcc); /* «CUME - Títulos». */
	text-decoration: none;
	transition: color 240ms ease;
}

.cume-niveles .cume-niveles__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cume-niveles__tarjeta:hover .cume-niveles__enlace,
.cume-niveles .cume-niveles__enlace:focus {
	color: var(--e-global-color-ea2f468); /* «CUME - Enlaces». */
}

.cume-niveles .cume-niveles__enlace:focus {
	outline: none;
}

.cume-niveles__tarjeta:has(.cume-niveles__enlace:focus-visible) {
	outline: 2px solid var(--cume-nvs-acento);
	outline-offset: 2px;
}

.cume-niveles .cume-niveles__descripcion {
	margin: 0;
	color: var(--e-global-color-text); /* «CUME - Párrafos». */
	font-family: var(--e-global-typography-d4b32b9-font-family), sans-serif;
	font-size: var(--e-global-typography-d4b32b9-font-size, 0.9375rem); /* «CUME - Texto pequeño» del kit. */
	line-height: 1.6;
}

.cume-niveles__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 8px;
	padding: 0;
	list-style: none;
}

.cume-niveles__datos li {
	margin: 0;
	padding: 4px 10px;
	border: 1px solid var(--cume-nvs-borde);
	border-radius: 4px;
	color: var(--e-global-color-2fcedc4); /* «CUME - Texto fuerte». */
	font-family: var(--e-global-typography-3508857-font-family), sans-serif;
	font-size: var(--e-global-typography-3508857-font-size, 0.75rem);
	font-weight: var(--e-global-typography-3508857-font-weight, 600);
	line-height: 1.3;
}

/* Receta del botón principal (§3.2.5): decorativo, el enlace es la tarjeta.
 * Con margin-top: auto queda abajo aunque las descripciones midan distinto. */
.cume-niveles__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 40px;
	margin-top: auto;
	padding: 9px 18px;
	border: 1px solid var(--e-global-color-c785c74);
	border-radius: 4px;
	background: var(--e-global-color-c785c74); /* «CUME - Botón principal». */
	color: var(--e-global-color-7b7bd5c); /* «CUME - Botón principal texto». */
	font-family: var(--e-global-typography-25d4bb7-font-family), sans-serif;
	font-size: var(--e-global-typography-25d4bb7-font-size, 0.875rem); /* «CUME - Botón chico» del kit. */
	font-weight: var(--e-global-typography-25d4bb7-font-weight, 600);
	line-height: 1.2;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.cume-niveles__tarjeta:hover .cume-niveles__boton {
	border-color: var(--e-global-color-3632cb9);
	background: var(--e-global-color-3632cb9); /* «CUME - Botón principal hover». */
}

/* --- Celular: botón al 100 % (§3.2.5) --- */
@media (max-width: 767px) {
	.cume-niveles__cuerpo {
		padding: 20px;
	}

	.cume-niveles__media--icono {
		padding: 20px 20px 0;
	}

	.cume-niveles__boton {
		align-self: stretch;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cume-niveles__tarjeta,
	.cume-niveles__imagen,
	.cume-niveles .cume-niveles__enlace,
	.cume-niveles__boton {
		transition: none;
	}

	.cume-niveles__tarjeta:hover,
	.cume-niveles__tarjeta:focus-within {
		transform: none;
	}

	.cume-niveles__tarjeta:hover .cume-niveles__imagen {
		transform: none;
	}
}