/*
 * DS Cursos — parte pública (v1.1.0; tarjetas rediseñadas en la 1.6.0).
 *
 * Todo vive bajo .ds-cursos, salvo el bloque final, que solo aplica a la
 * página "Cursos" del plugin: nada de aquí afecta al resto del sitio.
 * La tipografía se hereda del tema. El color principal es el azul de la marca
 * (#172973), el de los botones y el menú de saintnet.net: se lee del color
 * global de Elementor donde el sitio lo guarda (--e-global-color-8bf6330) y,
 * si esa variable no existe, se usa el mismo valor como respaldo.
 * Nota: --e-global-color-primary NO sirve aquí; en este sitio conserva el
 * valor por defecto de Elementor (#6EC1E4), que no es un color de la marca.
 */

/* ---------------------------------------------------------------------
 * Variables
 * ------------------------------------------------------------------- */

.ds-cursos {
	/* Color de marca: fondo del botón principal. */
	--ds-primario: var(--e-global-color-8bf6330, #172973);
	/* El mismo color, limitado en claridad, para bordes, foco y texto sobre
	   blanco: garantiza contraste AA aunque el color de marca cambie. */
	--ds-primario-fuerte: #172973;
	/* Tinte muy claro para fondos seleccionados. */
	--ds-primario-suave: #e8eaf1;
	/* Texto encima del color de marca. */
	--ds-sobre-primario: #ffffff;
	/* Azul al pasar el cursor, el mismo que usan los botones del sitio. */
	--ds-primario-hover: #1a5ce0;

	--ds-texto: #1f2933;
	--ds-texto-suave: #52606d;
	--ds-borde: #e2e7ee;
	--ds-borde-campo: #8a94a3;
	--ds-fondo: #ffffff;
	--ds-error: #b42318;
	--ds-error-suave: #fef3f2;
	--ds-ok: #17663a;
	--ds-ok-suave: #e7f6ec;
	--ds-aviso: #8a4b08;
	--ds-aviso-suave: #fff4e0;
	--ds-neutro: #4b5563;
	--ds-neutro-suave: #e5e7eb;

	--ds-radio: 16px;
	--ds-radio-campo: 10px;
	--ds-sombra: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 14px rgba(16, 24, 40, 0.06);
	--ds-sombra-alta: 0 2px 4px rgba(16, 24, 40, 0.06), 0 14px 30px rgba(16, 24, 40, 0.12);
	--ds-transicion: 0.16s ease;

	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 0 56px;
	color: var(--ds-texto);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

/* Si el navegador sabe derivar colores, se calculan a partir del color de
   marca real: así siguen cumpliendo contraste aunque el tema cambie de color. */
@supports (color: oklch(from red l c h)) {
	.ds-cursos {
		--ds-primario-fuerte: oklch(from var(--ds-primario) min(l, 0.5) c h);
		--ds-sobre-primario: oklch(from var(--ds-primario) clamp(0.2, (0.62 - l) * 1000, 1) 0.03 h);
	}
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.ds-cursos {
		--ds-primario-suave: color-mix(in srgb, var(--ds-primario) 10%, #ffffff);
	}
}

.ds-cursos *,
.ds-cursos *::before,
.ds-cursos *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Títulos y textos
 * ------------------------------------------------------------------- */

.ds-cursos .ds-cursos-seccion {
	margin: 0 0 56px;
}

/* !important solo en márgenes: el tema fuerza los de h2 con !important. */
.ds-cursos .ds-cursos-titulo {
	margin: 0 0 8px !important;
	padding: 0;
	color: var(--ds-texto);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
}

.ds-cursos .ds-cursos-subtitulo,
.ds-cursos .ds-cursos-texto {
	margin: 0 0 32px;
	color: var(--ds-texto-suave);
	font-size: 16px;
	line-height: 1.55;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Tarjetas de curso (1.6.0): contenido completo, sin recortes.
 * Cada tarjeta: un radio oculto y dos etiquetas suyas (datos e inversión);
 * "Ver temario" queda fuera de las etiquetas.
 *   - Un solo curso: ancho del contenido (máx. 760 px), dos zonas en escritorio.
 *   - Varios: dos columnas anchas; el bloque de inversión, al pie.
 *   - Móvil: una columna.
 * ------------------------------------------------------------------- */

.ds-cursos .ds-cursos-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0 auto;
	padding: 0;
}

@media (min-width: 880px) {
	.ds-cursos .ds-cursos-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ds-cursos .ds-cursos-grid.ds-cursos-grid-uno {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

.ds-cursos .ds-cursos-opcion {
	position: relative;
	display: flex;
	min-width: 0;
}

/* El radio sigue ahí para el teclado y los lectores de pantalla; no se ve. */
.ds-cursos .ds-cursos-radio {
	position: absolute;
	top: 28px;
	left: 28px;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.ds-cursos .ds-cursos-card {
	display: grid;
	grid-template-areas:
		"info"
		"temario"
		"compra";
	/* Crece la zona de datos: el bloque de inversión queda al pie, con su altura. */
	grid-template-rows: 1fr auto auto;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--ds-fondo);
	border: 2px solid var(--ds-borde);
	border-radius: var(--ds-radio);
	box-shadow: var(--ds-sombra);
	color: var(--ds-texto);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	transition: box-shadow var(--ds-transicion), border-color var(--ds-transicion), background-color var(--ds-transicion);
}

/* Un solo curso, en escritorio: datos a la izquierda, inversión a la derecha. */
@media (min-width: 700px) {
	.ds-cursos .ds-cursos-grid-uno .ds-cursos-card {
		grid-template-areas:
			"info compra"
			"temario compra";
		grid-template-columns: minmax(0, 1fr) 236px;
		grid-template-rows: auto 1fr;
		align-items: start;
	}
}

.ds-cursos .ds-cursos-card span {
	display: block;
}

.ds-cursos .ds-cursos-card-info,
.ds-cursos .ds-cursos-card-compra {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}

.ds-cursos .ds-cursos-card-info {
	grid-area: info;
	gap: 10px;
	padding: 24px 24px 8px;
}

.ds-cursos .ds-cursos-radio:not(:disabled) + .ds-cursos-card:hover {
	border-color: #b9c2ce;
	box-shadow: var(--ds-sombra-alta);
}

.ds-cursos .ds-cursos-radio:checked + .ds-cursos-card,
.ds-cursos .ds-cursos-radio:checked + .ds-cursos-card:hover {
	border-color: var(--ds-primario-fuerte);
	box-shadow: var(--ds-sombra-alta);
}

.ds-cursos .ds-cursos-radio:focus-visible + .ds-cursos-card {
	outline: 3px solid var(--ds-primario-fuerte);
	outline-offset: 3px;
}

.ds-cursos .ds-cursos-card .ds-cursos-card-cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

/* Fecha destacada */
.ds-cursos .ds-cursos-fecha {
	flex: 0 0 auto;
	min-width: 60px;
	padding: 8px 10px 9px;
	background: var(--ds-primario-suave);
	border-radius: 12px;
	color: var(--ds-primario-fuerte);
	text-align: center;
}

.ds-cursos .ds-cursos-fecha-dia {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.05;
}

.ds-cursos .ds-cursos-fecha-mes {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Etiqueta de modalidad */
.ds-cursos .ds-cursos-tag {
	padding: 4px 12px;
	background: #eef1f5;
	border-radius: 999px;
	color: #3e4c59;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.ds-cursos .ds-cursos-card-nombre {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ds-cursos .ds-cursos-card-cuando {
	color: var(--ds-primario-fuerte);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.ds-cursos .ds-cursos-card-cuando::first-letter {
	text-transform: uppercase;
}

.ds-cursos .ds-cursos-card-instructor {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

/* Descripción completa: sin recortes, con sus saltos de línea. */
.ds-cursos .ds-cursos-card .ds-cursos-card-desc {
	color: var(--ds-texto-suave);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* Temario desplegable (<details>, sin JavaScript). En verde desde la 1.6.1:
   texto #166534 sobre #ecfdf3 (contraste 7,1:1). */
.ds-cursos .ds-cursos-temario {
	grid-area: temario;
	margin: 4px 24px 20px;
	border: 1.5px solid #16a34a;
	border-radius: 12px;
	background: #ffffff;
}

.ds-cursos .ds-cursos-temario-boton {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	background: #ecfdf3;
	color: #166534;
	font-size: 15px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
	border-radius: 10px;
	transition: background-color var(--ds-transicion);
}

.ds-cursos .ds-cursos-temario-boton:hover {
	background: #dcfce7;
}

.ds-cursos .ds-cursos-temario[open] > .ds-cursos-temario-boton {
	border-bottom: 1px solid #bbf7d0;
	border-radius: 10px 10px 0 0;
}

.ds-cursos .ds-cursos-temario-boton::-webkit-details-marker {
	display: none;
}

.ds-cursos .ds-cursos-temario-boton::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--ds-transicion);
}

.ds-cursos .ds-cursos-temario[open] > .ds-cursos-temario-boton::before {
	transform: rotate(45deg);
}

.ds-cursos .ds-cursos-temario-boton:focus-visible {
	outline: 3px solid #166534;
	outline-offset: 2px;
}

.ds-cursos .ds-cursos-temario .ds-cursos-temario-ocultar,
.ds-cursos .ds-cursos-temario[open] .ds-cursos-temario-ver {
	display: none;
}

.ds-cursos .ds-cursos-temario[open] .ds-cursos-temario-ocultar {
	display: inline;
}

.ds-cursos .ds-cursos-temario-cuerpo {
	padding: 12px 16px 14px 18px;
	color: var(--ds-texto);
	font-size: 15px;
	line-height: 1.6;
}

.ds-cursos .ds-cursos-temario-cuerpo p {
	margin: 0 0 8px;
}

.ds-cursos .ds-cursos-temario-cuerpo .ds-cursos-temario-sub {
	margin: 12px 0 6px;
	color: var(--ds-primario-fuerte);
	font-weight: 700;
}

.ds-cursos .ds-cursos-temario-cuerpo .ds-cursos-temario-sub:first-child {
	margin-top: 4px;
}

.ds-cursos .ds-cursos-temario-lista {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.ds-cursos .ds-cursos-temario-lista li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 18px;
}

.ds-cursos .ds-cursos-temario-lista li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 2px;
	width: 7px;
	height: 7px;
	background: #FA6F05;
	border-radius: 50%;
}

/* Bloque destacado: inversión, cupos y botón */
.ds-cursos .ds-cursos-card-compra {
	grid-area: compra;
	align-items: stretch;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 16px 16px;
	padding: 18px 18px 16px;
	background: var(--ds-primario-suave);
	border-top: 4px solid #FA6F05;
	border-radius: 14px;
}

@media (min-width: 700px) {
	.ds-cursos .ds-cursos-grid-uno .ds-cursos-card-compra {
		align-self: start;
		justify-content: flex-start;
		margin: 20px 20px 20px 0;
	}
}

.ds-cursos .ds-cursos-precio-rotulo {
	color: var(--ds-texto-suave);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ds-cursos .ds-cursos-precio-valor {
	color: var(--ds-primario-fuerte);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}

.ds-cursos .ds-cursos-precio-valor.ds-cursos-precio-gratis {
	font-size: 26px;
}

.ds-cursos .ds-cursos-card-compra .ds-cursos-pill {
	align-self: flex-start;
}

/* Botón de la tarjeta (es parte de la etiqueta: marca el curso) */
.ds-cursos .ds-cursos-accion {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 16px;
	background: var(--ds-primario);
	border-radius: 999px;
	color: var(--ds-sobre-primario);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: background-color var(--ds-transicion);
}

.ds-cursos .ds-cursos-card-compra:hover .ds-cursos-accion {
	background: var(--ds-primario-hover);
}

.ds-cursos .ds-cursos-card .ds-cursos-accion-on {
	display: none;
}

.ds-cursos .ds-cursos-radio:checked + .ds-cursos-card .ds-cursos-accion {
	background: var(--ds-fondo);
	box-shadow: inset 0 0 0 2px var(--ds-primario-fuerte);
	color: var(--ds-primario-fuerte);
}

.ds-cursos .ds-cursos-radio:checked + .ds-cursos-card .ds-cursos-accion-off {
	display: none;
}

.ds-cursos .ds-cursos-radio:checked + .ds-cursos-card .ds-cursos-accion-on {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ds-cursos .ds-cursos-radio:checked + .ds-cursos-card .ds-cursos-accion-on::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--ds-primario-fuerte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
	border-radius: 50%;
}

/* Píldora de cupo */
.ds-cursos .ds-cursos-pill {
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.ds-cursos .ds-cursos-pill-ok {
	background: var(--ds-ok-suave);
	color: var(--ds-ok);
}

.ds-cursos .ds-cursos-pill-ultimo {
	background: var(--ds-aviso-suave);
	color: var(--ds-aviso);
}

.ds-cursos .ds-cursos-pill-agotado {
	background: var(--ds-neutro-suave);
	color: var(--ds-neutro);
}

/* Curso agotado: se ve, pero no se puede elegir */
.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card {
	background: #f4f5f7;
	border-color: var(--ds-borde);
	box-shadow: none;
	color: #5b6470;
}

.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-card-info,
.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-card-compra {
	cursor: not-allowed;
}

.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-fecha,
.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-tag,
.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-card-compra {
	background: var(--ds-neutro-suave);
	color: #5b6470;
}

.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-card-compra {
	border-top-color: #b9c0cf;
}

.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-card-cuando,
.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-card-desc,
.ds-cursos .ds-cursos-radio:disabled + .ds-cursos-card .ds-cursos-precio-valor {
	color: #5b6470;
}

/* Botón del formulario: "Reservar" si el curso marcado tiene inversión. */
.ds-cursos .ds-cursos-boton-pago {
	display: none;
}

.ds-cursos .ds-cursos-form:has(.ds-cursos-radio[data-pago]:checked) .ds-cursos-boton-gratis {
	display: none;
}

.ds-cursos .ds-cursos-form:has(.ds-cursos-radio[data-pago]:checked) .ds-cursos-boton-pago {
	display: inline;
}

/* Confirmación de una reserva: "Cómo pagar" */
.ds-cursos .ds-cursos-como-pagar {
	margin: 0 0 22px;
	padding: 16px 18px;
	background: var(--ds-aviso-suave);
	border-left: 4px solid #FA6F05;
	border-radius: 12px;
	text-align: left;
}

.ds-cursos .ds-cursos-como-pagar-titulo {
	display: block;
	margin-bottom: 6px;
	color: var(--ds-texto-suave);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ds-cursos .ds-cursos-como-pagar-texto {
	color: var(--ds-texto);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
 * Paneles: formulario, confirmación y estados vacíos
 * ------------------------------------------------------------------- */

.ds-cursos .ds-cursos-panel {
	max-width: 560px;
	margin: 0 auto;
	padding: 40px;
	background: var(--ds-fondo);
	border: 1px solid var(--ds-borde);
	border-radius: 20px;
	box-shadow: var(--ds-sombra);
}

.ds-cursos .ds-cursos-campo {
	margin: 0 0 22px;
}

.ds-cursos .ds-cursos-label {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 0 8px;
	color: var(--ds-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.ds-cursos .ds-cursos-req {
	color: var(--ds-error);
	font-weight: 700;
}

.ds-cursos .ds-cursos-opcional {
	color: var(--ds-texto-suave);
	font-weight: 400;
}

.ds-cursos .ds-cursos-input {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	background: var(--ds-fondo);
	border: 1px solid var(--ds-borde-campo);
	border-radius: var(--ds-radio-campo);
	box-shadow: none;
	color: var(--ds-texto);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--ds-transicion), box-shadow var(--ds-transicion), background-color var(--ds-transicion);
}

.ds-cursos .ds-cursos-input:hover {
	border-color: #5f6b7a;
}

.ds-cursos .ds-cursos-input:focus,
.ds-cursos .ds-cursos-input:focus-visible {
	border-color: var(--ds-primario-fuerte);
	outline: 2px solid var(--ds-primario-fuerte);
	outline-offset: 2px;
	box-shadow: none;
}

.ds-cursos .ds-cursos-campo-error .ds-cursos-input {
	padding: 0 13px;
	background: var(--ds-error-suave);
	border: 2px solid var(--ds-error);
}

/* Error debajo de su campo */
.ds-cursos .ds-cursos-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	color: var(--ds-error);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.ds-cursos .ds-cursos-error::before {
	content: "!";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: var(--ds-error);
	border-radius: 50%;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* El error del selector de cursos va centrado bajo la cuadrícula */
.ds-cursos .ds-cursos-seccion > .ds-cursos-error {
	justify-content: center;
	margin-top: 20px;
	font-size: 15px;
}

.ds-cursos .ds-cursos-alerta {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--ds-error-suave);
	border: 1px solid #f1aea8;
	border-radius: var(--ds-radio-campo);
	color: #7a1810;
	font-size: 15px;
	line-height: 1.45;
}

/* Botones */
.ds-cursos .ds-cursos-boton,
.ds-cursos a.ds-cursos-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 10px 0 0;
	padding: 12px 20px;
	background: var(--ds-primario);
	border: 2px solid transparent;
	border-radius: var(--ds-radio-campo);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.14);
	color: var(--ds-sobre-primario);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform var(--ds-transicion), box-shadow var(--ds-transicion), background-color var(--ds-transicion), color var(--ds-transicion);
}

.ds-cursos .ds-cursos-boton:hover {
	background: var(--ds-primario-hover);
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.16);
	color: #ffffff;
}

.ds-cursos .ds-cursos-boton:active {
	transform: translateY(1px);
}

.ds-cursos .ds-cursos-boton:focus-visible {
	outline: 3px solid var(--ds-primario-fuerte);
	outline-offset: 3px;
}

.ds-cursos a.ds-cursos-boton-secundario,
.ds-cursos a.ds-cursos-boton-secundario:hover,
.ds-cursos a.ds-cursos-boton-secundario:focus {
	background: var(--ds-fondo);
	border-color: var(--ds-primario-fuerte);
	box-shadow: none;
	color: var(--ds-primario-fuerte);
}

.ds-cursos a.ds-cursos-boton-secundario:hover {
	background: var(--ds-primario-suave);
}

/* Confirmación y estados vacíos */
.ds-cursos .ds-cursos-exito,
.ds-cursos .ds-cursos-vacio {
	text-align: center;
}

.ds-cursos .ds-cursos-exito .ds-cursos-texto,
.ds-cursos .ds-cursos-vacio .ds-cursos-texto {
	margin-bottom: 0;
}

.ds-cursos .ds-cursos-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	background: var(--ds-primario-suave);
	border-radius: 50%;
	color: var(--ds-primario-fuerte);
}

.ds-cursos .ds-cursos-icono-ok {
	background: var(--ds-ok-suave);
	color: var(--ds-ok);
}

.ds-cursos .ds-cursos-icono svg {
	display: block;
	width: 34px;
	height: 34px;
}

.ds-cursos .ds-cursos-resumen {
	margin: 28px 0 0;
	padding: 4px 20px;
	background: #f6f8fa;
	border-radius: 14px;
	text-align: left;
}

.ds-cursos .ds-cursos-resumen-fila {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ds-borde);
}

.ds-cursos .ds-cursos-resumen-fila:last-child {
	border-bottom: 0;
}

.ds-cursos .ds-cursos-resumen-clave {
	flex: 0 0 92px;
	color: var(--ds-texto-suave);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ds-cursos .ds-cursos-resumen-valor {
	color: var(--ds-texto);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ds-cursos .ds-cursos-resumen-valor::first-letter {
	text-transform: uppercase;
}

.ds-cursos .ds-cursos-exito .ds-cursos-boton {
	margin-top: 28px;
}

.ds-cursos .ds-cursos-exito .ds-cursos-boton + .ds-cursos-boton {
	margin-top: 12px;
}

/* ---------------------------------------------------------------------
 * Móvil
 * ------------------------------------------------------------------- */

@media (max-width: 639px) {
	.ds-cursos {
		padding-bottom: 40px;
	}

	.ds-cursos .ds-cursos-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ds-cursos .ds-cursos-seccion {
		margin-bottom: 40px;
	}

	.ds-cursos .ds-cursos-titulo {
		font-size: 22px;
	}

	.ds-cursos .ds-cursos-subtitulo,
	.ds-cursos .ds-cursos-texto {
		margin-bottom: 24px;
	}

	.ds-cursos .ds-cursos-card-info {
		padding: 20px 18px 6px;
	}

	.ds-cursos .ds-cursos-temario {
		margin: 4px 18px 16px;
	}

	.ds-cursos .ds-cursos-card-compra {
		margin: 0 12px 12px;
	}

	.ds-cursos .ds-cursos-precio-valor {
		font-size: 30px;
	}

	.ds-cursos .ds-cursos-panel {
		padding: 28px 20px;
		border-radius: 16px;
	}

	.ds-cursos .ds-cursos-resumen-fila {
		flex-direction: column;
		gap: 2px;
	}

	.ds-cursos .ds-cursos-resumen-clave {
		flex-basis: auto;
	}
}

/* ---------------------------------------------------------------------
 * Menos movimiento para quien lo pide en su sistema
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ds-cursos *,
	.ds-cursos *::before,
	.ds-cursos *::after {
		transition: none !important;
		animation: none !important;
	}

	.ds-cursos .ds-cursos-radio:not(:disabled) + .ds-cursos-card:hover,
	.ds-cursos .ds-cursos-boton:active {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Página "Cursos" (solo esa página: <body class="ds-cursos-pagina">)
 *
 * Estas reglas son las únicas del archivo que salen de .ds-cursos: ajustan
 * la franja del título que pinta el tema (#nt-hero) y el hueco que deja
 * debajo. La clase del <body> la pone el plugin únicamente en su página,
 * así que el resto del sitio no cambia.
 * ------------------------------------------------------------------- */

/* Franja del título: naranja del punto del logo y un tercio del alto del tema. */
body.ds-cursos-pagina #nt-hero {
	padding: 25px 0;
	background: #fa6f05 none;
}

/* El tema oscurece la franja con una capa encima: aquí no. */
body.ds-cursos-pagina #nt-hero::after {
	display: none;
}

body.ds-cursos-pagina #nt-hero .row > [class*="col-"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 48px;
}

/* Título en el azul de la marca: 4,6:1 sobre el naranja (el blanco daría 2,9:1). */
body.ds-cursos-pagina #nt-hero .hero-title {
	margin: 0;
	color: #172973;
	font-size: 28px;
	line-height: 1.2;
	text-align: left;
}

/* Ruta (Home > Cursos): pastilla azul con texto blanco, 13:1. */
body.ds-cursos-pagina #nt-hero .nt-breadcrumbs {
	margin: 0;
	padding: 7px 18px;
	background: #172973;
	border-radius: 999px;
}

body.ds-cursos-pagina #nt-hero .nt-breadcrumbs::after {
	display: none;
}

body.ds-cursos-pagina #nt-hero .nt-breadcrumbs,
body.ds-cursos-pagina #nt-hero .nt-breadcrumbs a,
body.ds-cursos-pagina #nt-hero .nt-breadcrumbs li,
body.ds-cursos-pagina #nt-hero .nt-breadcrumbs li.active,
body.ds-cursos-pagina #nt-hero .nt-breadcrumbs i {
	color: #ffffff;
}

/* Menos aire entre la franja y el contenido. */
body.ds-cursos-pagina .nt-theme-inner-container {
	padding-top: 32px;
}

@media (max-width: 767px) {
	body.ds-cursos-pagina #nt-hero {
		padding: 12px 0;
	}

	body.ds-cursos-pagina #nt-hero .row > [class*="col-"] {
		min-height: 38px;
	}

	body.ds-cursos-pagina #nt-hero .hero-title {
		font-size: 20px;
	}

	body.ds-cursos-pagina #nt-hero .nt-breadcrumbs {
		padding: 4px 12px;
	}

	body.ds-cursos-pagina .nt-theme-inner-container {
		padding-top: 20px;
	}
}

/* Banners de la portada, encima de "Elige tu curso". */
.ds-cursos .ds-cursos-banners {
	margin: 0 0 40px;
	overflow: hidden;
	border-radius: var(--ds-radio);
}

/* En la portada el carrusel lleva una sombra azul muy ancha, pensada para
   cubrir el fondo de esa página; aquí sobra. */
.ds-cursos .ds-cursos-banners .elementor-widget-image-carousel {
	box-shadow: none !important;
}

.ds-cursos .ds-cursos-banners .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
	padding: 0;
}

.ds-cursos .ds-cursos-banners img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 639px) {
	.ds-cursos .ds-cursos-banners {
		margin-bottom: 28px;
	}
}