/* =========================================================================
   Página «Encuentra tu programa» — artboard 21-encuentra-tu-programa
   (1920 x 1244).

   Geometría del XD: una única tarjeta lila de 1142 x 659 px a y 220 (100 px
   por debajo de la cabecera de 120) con 50 px de aire arriba y abajo y 150 px
   a los lados, de modo que el bloque de opciones mide 842 px, con filas de
   50 px separadas 20 px. El diseño dibujaba ocho opciones cortas a dos
   columnas; el cuestionario real tiene tres opciones largas, así que la
   rejilla es de una columna y sólo pasa a dos cuando un paso trae cuatro
   opciones o más. La fila inferior agrupa el contador y la barra (327 px
   centrados en la tarjeta: flecha 28 + 20 + carril 231 + 20 + flecha 28) y
   cierra con el CTA de 184 x 40 px pegado al borde derecho.

   Los pasos 2 y 3 y la pantalla de resultado no están dibujados en el XD:
   reutilizan estas mismas medidas. La tarjeta conserva los 659 px de alto del
   diseño en escritorio para que el cuestionario no salte de un paso a otro;
   el resultado, que es más largo, crece a partir de ahí.
   ========================================================================= */

.coip-programa {
	color: var(--coip-cream);
}

.coip-programa__section {
	padding-block: 100px 150px; /* cabecera 120 → y 220; tarjeta 879 → pie 1029 */
}

.coip-programa__card {
	display: flex;
	flex-direction: column;
	min-height: 659px;
	padding: 50px 150px;
	background: var(--coip-lilac);
	border-radius: var(--coip-radius);
}

/* -------------------------------------------------------------------------
   Cabecera de la tarjeta — y 270 y 338
   ---------------------------------------------------------------------- */

.coip-programa__title {
	font-size: var(--coip-fs-h2);
	line-height: var(--coip-lh);
	font-weight: 700;
	text-align: center;
}

.coip-programa__lead {
	max-width: 594px;
	margin: 20px auto 0; /* 270 + 48 → 338 */
	font-size: var(--coip-fs-body);
	line-height: var(--coip-lh);
	font-weight: 400;
	text-align: center;
}

.coip-programa__lead .is-strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Pasos — sólo uno visible cada vez
   ---------------------------------------------------------------------- */

.coip-programa__quiz {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-top: 50px; /* fin de la entradilla (386) → enunciado (436) */
}

/* Sin JavaScript la navegación es por anclas: el primer paso se ve siempre y,
   en cuanto hay un :target, manda el paso apuntado. */
.coip-programa__step {
	display: none;
	flex: 1 1 auto;
	flex-direction: column;
}

.coip-programa__step--first {
	display: flex;
}

.coip-programa:not(.is-js) .coip-programa__quiz:has(.coip-programa__step:target) .coip-programa__step {
	display: none;
}

.coip-programa:not(.is-js) .coip-programa__quiz:has(.coip-programa__step:target) .coip-programa__step:target {
	display: flex;
}

/* Con JavaScript manda el atributo hidden y el ancla deja de pintar. */
.coip-programa.is-js .coip-programa__step {
	display: flex;
}

.coip-programa.is-js .coip-programa__step[hidden] {
	display: none;
}

/* Los dos pasos se cruzan sobre el mismo hueco: mientras dura el cambio, el
   que se va queda en absoluto —con su alto congelado desde programa.js, para
   que la fila de abajo no se le suba— y el que entra ocupa ya el sitio. Así la
   barra de progreso de los dos cae exactamente en el mismo punto y se lee como
   una sola que no ha parado de crecer. */
.coip-programa.is-js .coip-programa__quiz {
	position: relative;
}

.coip-programa.is-js .coip-programa__step.is-leaving {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	pointer-events: none;
	will-change: opacity;
}

/* La barra del paso que se va se retira de golpe, sin desvanecerse: su carril
   es opaco, y mientras se apagara estaría tapando justo el tramo que está
   creciendo por debajo, que es lo único que hay que mirar aquí. Se oculta con
   `visibility` para no mover de sitio nada de la fila. */
.coip-programa.is-js .coip-programa__step.is-leaving .coip-programa__progress {
	visibility: hidden;
}

/* Mientras cruzan, la tarjeta está cambiando de alto: lo que sobresalga del
   hueco se recorta en vez de desbordar la tarjeta. `clip` y no `hidden` para
   no crear un contenedor desplazable que el foco pudiera mover. */
.coip-programa.is-js .coip-programa__quiz.is-moving {
	overflow: hidden;
	overflow: clip;
}

/* -------------------------------------------------------------------------
   Pregunta y opciones — y 436 (enunciado) y y 482 (primera fila)
   ---------------------------------------------------------------------- */

.coip-programa__q {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.coip-programa__legend {
	display: block;
	width: 100%;
	padding: 0 0 0 20px; /* el enunciado se alinea con la casilla, no con la caja */
	margin-bottom: 24px; /* 436 + 22 → 482 */
	font-size: var(--coip-fs-list);
	line-height: var(--coip-lh);
	font-weight: 700;
}

/* El foco lo mueve el script al cambiar de paso, así que el anillo sólo se
   dibuja cuando el visitante viene del teclado. */
.coip-programa__legend:focus {
	outline: none;
}

.coip-programa__legend:focus-visible {
	outline: 2px solid var(--coip-cream);
	outline-offset: 4px;
}

/* Aviso de los pasos obligatorios: sale al intentar avanzar sin contestar. */
.coip-programa__error {
	padding-left: 20px;
	margin-top: 18px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 700;
}

.coip-programa__error[hidden] {
	display: none;
}

/* Aclaración del paso opcional: cuelga del enunciado, con menos peso. */
.coip-programa__note {
	padding-left: 20px;
	margin: -16px 0 24px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 400;
	opacity: 0.8;
}

/* El contador da a cada opción su letra de atajo, en el orden del marcado. */
.coip-programa__opts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 60px;
	row-gap: 16px;
	counter-reset: coip-opcion;
}

/* Las dos columnas del diseño se reservan para las listas largas —el catálogo
   del paso 1—; con pocas opciones y textos desiguales se lee mejor en una. */
.coip-programa__opts:has(> .coip-programa__opt:nth-child(7)) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coip-programa__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
	padding: 8px 19px; /* 19 + el borde de 1 px sitúan la casilla en x 559 */
	counter-increment: coip-opcion;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid var(--coip-cream);
	border-radius: var(--coip-radius-pill);
	cursor: pointer;
	transition: background-color var(--coip-dur-rapida) var(--coip-ease),
		border-color var(--coip-dur-rapida) var(--coip-ease),
		translate var(--coip-dur-rapida) var(--coip-ease-suave);
}

/* La letra que marca la opción desde el teclado. Va al extremo derecho de la
   píldora —la casilla del diseño mide 14 px y ahí no cabe— y se pinta con un
   contador para que no sea texto del documento: así no entra en el diccionario
   inglés ni la lee el lector de pantalla, que ya tiene la etiqueta. */
.coip-programa__opt::after {
	content: counter(coip-opcion, upper-alpha);
	margin-left: auto;
	padding-left: 12px;
	font-size: var(--coip-fs-ui);
	line-height: 1;
	font-weight: 700;
	color: var(--coip-cream);
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--coip-dur-rapida) var(--coip-ease);
}

.coip-programa__opt:has(.coip-programa__radio:checked)::after {
	opacity: 0.75;
}

/* Gesto 2 (rellenar) del lenguaje de hover de base.css: la píldora aclara su
   fondo y se levanta los 2 px de --coip-lift-sm, sin cambiar de tamaño —una
   opción que se ensancha desplaza a las de al lado— y sin mover el texto por
   su cuenta, que era un quinto gesto que no está en el vocabulario.
   Todo va dentro del guardia porque MUEVE: sin él, en móvil la opción se
   quedaba aclarada después de tocarla, como si siguiera activa, y no se
   soltaba hasta tocar otra cosa.

   SIN SOMBRA, por decisión del 8 de septiembre de 2026: sobre el lila de la
   tarjeta la sombra del gesto 1 ensuciaba la píldora en vez de levantarla.
   Aquí basta el aclarado del fondo. Por eso `box-shadow` tampoco está en la
   transición de la píldora. */
@media (hover: hover) and (pointer: fine) {
	.coip-programa__opt:hover {
		/* `translate` y no `transform`: GSAP deja un transform EN LÍNEA sobre
		   todo lo que anima anim.js, y el estilo en línea gana a la hoja. La
		   propiedad individual se compone con él en vez de pelearse con él.
		   Ver el LENGUAJE DE HOVER de base.css. */
		background: rgba(255, 255, 255, 0.26);
		translate: 0 var(--coip-lift-sm);
	}

	.coip-programa__opt:hover .coip-programa__radio {
		background: rgba(255, 249, 240, 0.6);
	}

	.coip-programa__opt:hover::after {
		opacity: 0.75;
	}
}

/* Paridad de teclado: el foco cae en la casilla, que es hija de la píldora, así
   que el mismo gesto se repite con :has(). Se mira :focus-visible y no
   :focus-within porque tocar la etiqueta en móvil también enfoca la casilla:
   con :focus-within volveríamos a dejar el estado pegado. */
.coip-programa__opt:has(.coip-programa__radio:focus-visible) {
	/* `translate` y no `transform`: GSAP deja un transform EN LÍNEA sobre
	   todo lo que anima anim.js, y el estilo en línea gana a la hoja. La
	   propiedad individual se compone con él en vez de pelearse con él.
	   Ver el LENGUAJE DE HOVER de base.css. */
	background: rgba(255, 255, 255, 0.26);
	translate: 0 var(--coip-lift-sm);
}

.coip-programa__opt:has(.coip-programa__radio:focus-visible) .coip-programa__radio {
	background: rgba(255, 249, 240, 0.6);
}

.coip-programa__opt:has(.coip-programa__radio:focus-visible)::after {
	opacity: 0.75;
}

/* La opción marcada cambia el borde a violeta y deja el fondo como está: es lo
   que hace el diseño, y es lo que mantiene legible el texto crema. */
.coip-programa__opt:has(.coip-programa__radio:checked) {
	border-color: var(--coip-violet);
}

.coip-programa__radio {
	flex: none;
	width: 14px;
	height: 14px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 249, 240, 0.467);
	border: 1px solid var(--coip-cream);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color var(--coip-dur) var(--coip-ease);
}

.coip-programa__radio:focus-visible {
	outline: 2px solid var(--coip-cream);
	outline-offset: 3px;
}

/* La marca de verificación del XD desborda ligeramente la casilla por arriba
   y por la derecha: va superpuesta, no dentro, y en violeta sobre el crema de
   la casilla (artboard 21: casilla en y 500, check en y 497,8). */
.coip-programa__check {
	position: absolute;
	top: 50%;
	left: 19px; /* se mide desde la caja de relleno: cae justo sobre la casilla */
	margin-top: -2.6px;
	color: var(--coip-violet);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0.6);
	transition: opacity var(--coip-dur) var(--coip-ease), transform var(--coip-dur) var(--coip-ease);
}

.coip-programa__check svg {
	width: 15.07px;
	height: 13.3px;
}

.coip-programa__radio:checked ~ .coip-programa__check {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.coip-programa__opt-label {
	font-size: var(--coip-fs-card-sub);
	line-height: var(--coip-lh-sub);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Fila inferior — contador (782), carril (810) y CTA (789)
   ---------------------------------------------------------------------- */

.coip-programa__nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	margin-top: auto;
	padding-top: 40px; /* última fila (742) → contador (782) */
}

.coip-programa__progress {
	grid-column: 2;
	width: 327px; /* 28 + 20 + 231 + 20 + 28 */
}

.coip-programa__meter {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-inline: 48px; /* se alinea con el carril, no con las flechas */
	padding-inline: 6px 10px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 400;
}

.coip-programa__bar {
	display: flex;
	align-items: center;
	gap: 20px;
}

.coip-programa__arrow {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--coip-cream);
	background: var(--coip-violet);
	border-radius: 50%;
	transition: background-color var(--coip-dur-rapida) var(--coip-ease);
}

.coip-programa__arrow svg {
	width: 6.32px;
	height: 11.35px;
	stroke-linecap: round;
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave);
}

.coip-programa__arrow--prev svg {
	transform: scaleX(-1);
}

/* Gesto 2 (rellenar): sólo cambia el fondo, así que no necesita el guardia de
   hover. Bloqueada no responde: una flecha que se enciende al pasar por encima
   promete un paso que no va a dar. */
.coip-programa__arrow:not(.is-locked):hover,
.coip-programa__arrow:not(.is-locked):focus-visible {
	background: var(--coip-charcoal);
}

/* Gesto 3 (avanzar): el chevron se adelanta 3 px. En la flecha de retroceso el
   nudge va DESPUÉS del scaleX(-1) que la voltea, de modo que avanza hacia
   atrás, que es a donde lleva. */
@media (hover: hover) and (pointer: fine) {
	.coip-programa__arrow--next:not(.is-locked):hover svg {
		transform: translateX(var(--coip-nudge));
	}

	.coip-programa__arrow--prev:not(.is-locked):hover svg {
		transform: scaleX(-1) translateX(var(--coip-nudge));
	}
}

.coip-programa__arrow--next:not(.is-locked):focus-visible svg {
	transform: translateX(var(--coip-nudge));
}

.coip-programa__arrow--prev:not(.is-locked):focus-visible svg {
	transform: scaleX(-1) translateX(var(--coip-nudge));
}

.coip-programa__arrow.is-off {
	opacity: 0.4;
	pointer-events: none;
}

/* Bloqueado, no inerte: el clic sigue llegando para poder avisar de que falta
   contestar. Lo que no hace es responder al ratón —ni fondo, ni elevación, ni
   chevron—: los gestos de arriba se saltan .is-locked con :not(), y aquí sólo
   queda el aspecto apagado y el cursor que dice que ahí no se pasa. */
.coip-programa__cta.is-locked,
.coip-programa__arrow.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
}

.coip-programa__track {
	flex: 1 1 auto;
	height: 10px;
	background: var(--coip-cream);
	border-radius: var(--coip-radius-pill);
	overflow: hidden;
}

/* El extremo que avanza va redondeado, no cortado a hacha: es una gota que
   crece dentro del carril, y con la barra animada se nota. */
.coip-programa__fill {
	display: block;
	height: 100%;
	background: var(--coip-violet);
	border-radius: var(--coip-radius-pill);
	transition: width var(--coip-dur) var(--coip-ease);
}

/* Con JavaScript la barra la mueve GSAP, desde el porcentaje del paso
   anterior: la transición del navegador estorbaría. */
.coip-programa.is-js .coip-programa__fill {
	transition: none;
}

/* CTA «PRÓXIMO»: 184 x 40 con el rótulo centrado en su caja de 153 px y el
   chevron cerrando a 12,7 px del borde. Al pasar el ratón vira a carbón. */
.coip-programa__cta {
	display: inline-flex;
	grid-column: 3;
	align-items: center;
	justify-self: end;
	gap: 12px;
	width: auto;
	min-width: 184px; /* el ancho del XD; los rótulos largos crecen desde ahí */
	height: 40px;
	padding-inline: 20px 12.7px;
	color: var(--coip-cream);
	background: var(--coip-violet);
	border: 1px solid var(--coip-violet);
	border-radius: var(--coip-radius);
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 500;
	white-space: nowrap;
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave);

	/* Gesto 2 (rellenar): vira a carbón. El barrido y la vuelta de las letras
	   los monta base.css a partir de esta variable. */
	--coip-fx-fill: var(--coip-charcoal);
}

.coip-programa__cta > span {
	flex: 1 1 auto;
	text-align: center;
}

.coip-programa__cta svg {
	flex: none;
	width: 6.32px;
	height: 11.35px;
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave);
}

/* Los 2 px de --coip-lift-sm que acompañan al gesto 2, y el gesto 3 (el
   chevron avanza). Ni el CTA bloqueado ni el de una ficha sin landing
   (aria-disabled) entran: no son pulsables, y base.css les apaga también el
   relleno. Sin sombra, como las opciones: ver el bloque de .coip-programa__opt. */
@media (hover: hover) and (pointer: fine) {
	.coip-programa__cta:not(.is-locked, [aria-disabled="true"]):hover {
		transform: translateY(var(--coip-lift-sm));
	}

	.coip-programa__cta:not(.is-locked, [aria-disabled="true"]):hover svg {
		transform: translateX(var(--coip-nudge));
	}
}

.coip-programa__cta:not(.is-locked, [aria-disabled="true"]):focus-visible {
	transform: translateY(var(--coip-lift-sm));
}

.coip-programa__cta:not(.is-locked, [aria-disabled="true"]):focus-visible svg {
	transform: translateX(var(--coip-nudge));
}

/* -------------------------------------------------------------------------
   Pantalla de resultado — no dibujada en el XD

   Un curso principal, el paso siguiente cuando lo hay, los casos concretos
   que haya marcado el visitante y, siempre, MasterCOIP PRO. Las fichas se
   pintan una vez en el almacén y el JavaScript las mueve al hueco que toca.
   ---------------------------------------------------------------------- */

.coip-programa__result-title {
	padding-left: 0;
	margin-bottom: 0;
	font-size: var(--coip-fs-list);
	line-height: var(--coip-lh);
}

.coip-programa__reason {
	max-width: 720px;
	margin-top: 14px;
	font-size: var(--coip-fs-body);
	line-height: var(--coip-lh);
	font-weight: 400;
}

.coip-programa__reason[hidden] {
	display: none;
}

.coip-programa__slot {
	margin-top: 30px;
}

.coip-programa__slot[hidden] {
	display: none;
}

.coip-programa__slot-title {
	margin-bottom: 16px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 500;
	opacity: 0.8;
}

/* Una ficha ocupa el ancho entero; dos o tres se reparten en columnas. */
.coip-programa__slot-list,
.coip-programa__pool {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

/* El almacén sólo se ve sin JavaScript, donde hace de catálogo completo. */
.coip-programa.is-js .coip-programa__pool {
	display: none;
}

.coip-programa__pool {
	margin-top: 30px;
}

.coip-programa__reco {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	padding: 24px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid var(--coip-cream);
	border-radius: var(--coip-radius);
	transition: transform var(--coip-dur) var(--coip-ease-suave);
}

/* Gesto 1 (elevar): la ficha entera es la superficie del enlace que lleva
   dentro, así que se levanta con él. Nada de scale(): son tarjetas con texto.
   El :focus-within va fuera del guardia a propósito —el foco cae en el CTA,
   que es hijo— y no se queda pegado en móvil, porque el enlace pierde el foco
   al soltar. Sin sombra, como todo lo pulsable de esta tarjeta: ver el bloque
   de .coip-programa__opt. */
@media (hover: hover) and (pointer: fine) {
	.coip-programa__reco:hover {
		transform: translateY(var(--coip-lift));
	}

	/* Gesto 4 (acercar): sólo aquí, porque sólo la ficha principal enseña foto
	   y sólo ella recorta con overflow: hidden. */
	.coip-programa__slot--main .coip-programa__reco:hover .coip-programa__reco-foto img {
		transform: scale(var(--coip-zoom));
	}
}

.coip-programa__reco:focus-within {
	transform: translateY(var(--coip-lift));
}

/* Un gesto por hover: si la ficha ya se está elevando, su CTA no vuelve a
   elevarse dentro; se sumarían los 6 px de la ficha y los 2 del botón. El
   botón conserva el relleno y el chevron, que es lo que dice que es pulsable. */
.coip-programa__reco:hover .coip-programa__cta--reco,
.coip-programa__reco:focus-within .coip-programa__cta--reco {
	transform: none;
}

/* La foto sólo sale en la ficha grande, que es la que tiene que destacar; en
   las secundarias manda el icono, más discreto. */
.coip-programa__reco-foto {
	display: none;
}

/* La foto llena su columna entera pase lo que pase con el alto del texto: por
   eso va absoluta dentro del hueco, no como imagen en flujo. */
.coip-programa__reco-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--coip-dur) var(--coip-ease-suave);
}

.coip-programa__reco-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
}

/* Los iconos del XD vienen a tamaños muy distintos (20 x 23 el del monitor,
   60 x 40 el del catálogo). Con viewBox y preserveAspectRatio por defecto,
   dejarlos llenar la caja los iguala ópticamente sin deformar ninguno. */
.coip-programa__reco-icon svg {
	width: 100%;
	height: 100%;
}

/* Los iconos de familia vienen del XD con el relleno en carbón; sobre la
   tarjeta lila se repintan en crema, igual que en el menú desplegable. */
.coip-programa__reco-icon svg path {
	fill: var(--coip-cream);
}

.coip-programa__reco-title {
	font-size: var(--coip-fs-card-sub);
	line-height: var(--coip-lh-sub);
	font-weight: 700;
}

.coip-programa__reco-desc {
	margin-top: 10px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh);
	font-weight: 400;
}

/* La ficha principal es la que manda: foto a sangre, fondo crema y texto
   oscuro. Sobre la tarjeta lila se lee de un vistazo cuál es la respuesta. */
.coip-programa__slot--main .coip-programa__reco {
	grid-template-columns: 300px minmax(0, 1fr);
	column-gap: 34px;
	align-items: stretch;
	min-height: 260px;
	padding: 0;
	overflow: hidden;
	color: var(--coip-charcoal);
	background: var(--coip-cream);
	border-color: var(--coip-cream);
}

.coip-programa__slot--main .coip-programa__reco-foto {
	position: relative;
	display: block;
	align-self: stretch;
}

.coip-programa__slot--main .coip-programa__reco-icon {
	display: none;
}

.coip-programa__slot--main .coip-programa__reco-body {
	padding: 30px 30px 30px 0;
}

.coip-programa__slot--main .coip-programa__reco-title {
	color: var(--coip-violet);
	font-size: var(--coip-fs-hero);
	line-height: var(--coip-lh);
}

.coip-programa__slot--main .coip-programa__reco-desc {
	margin-top: 12px;
	font-size: var(--coip-fs-body);
}

/* En la ficha grande la ficha es crema, así que el CTA se invierte: contorno
   violeta que se rellena de violeta. */
.coip-programa__slot--main .coip-programa__cta--reco {
	color: var(--coip-violet);
	border-color: var(--coip-violet);

	--coip-fx-fill: var(--coip-violet);
	--coip-fx-ink: var(--coip-cream);
}

/* La membresía no es un curso más: va en violeta para que se lea como el
   complemento que es. */
.coip-programa__slot--pro .coip-programa__reco {
	background: var(--coip-violet);
	border-color: var(--coip-violet);
}

.coip-programa__cta--reco {
	width: auto;
	margin-top: 20px;
	padding-inline: 21px 12px;
	gap: 9px;
	background: transparent;
	border-color: var(--coip-cream);

	--coip-fx-fill: var(--coip-cream);
	--coip-fx-ink: var(--coip-violet);
}

.coip-programa__cta--reco > span {
	flex: none;
}

.coip-programa__cta--reco[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Breakpoints
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.coip-programa__card {
		padding-inline: 90px;
	}

	.coip-programa__opts {
		column-gap: 40px;
	}
}

@media (max-width: 1023px) {
	.coip-programa__section {
		padding-block: 60px 90px;
	}

	/* La tarjeta deja de tener alto fijo: cada paso ocupa lo que necesita. */
	.coip-programa__card {
		min-height: 0;
		padding: 40px;
	}

	/* Una sola columna de opciones, como el resto de rejillas del tema. */
	.coip-programa__opts:has(> .coip-programa__opt:nth-child(7)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.coip-programa__quiz {
		margin-top: 40px;
	}

	/* El contador ya no cabe junto al CTA: se apilan y se centran. */
	.coip-programa__nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		padding-top: 32px;
	}

	.coip-programa__progress {
		width: 100%;
		max-width: 327px;
	}

	.coip-programa__cta {
		justify-self: auto;
	}

	.coip-programa__slot--main .coip-programa__reco {
		grid-template-columns: 220px minmax(0, 1fr);
		column-gap: 24px;
	}

	.coip-programa__slot--main .coip-programa__reco-body {
		padding: 24px 24px 24px 0;
	}
}

@media (max-width: 767px) {
	.coip-programa__section {
		padding-block: 40px 60px;
	}

	.coip-programa__card {
		padding: 28px 23px;
		border-radius: var(--coip-radius-sm);
	}

	.coip-programa__lead {
		margin-top: 16px;
	}

	.coip-programa__quiz {
		margin-top: 32px;
	}

	.coip-programa__legend {
		padding-left: 0;
		margin-bottom: 20px;
	}

	.coip-programa__result-title {
		margin-bottom: 0;
	}

	.coip-programa__note,
	.coip-programa__error {
		padding-left: 0;
	}

	.coip-programa__opt {
		gap: 10px;
		padding: 10px 16px;
	}

	.coip-programa__check {
		left: 16px;
	}

	/* Objetivo táctil mínimo: la flecha crece a 40 px. */
	.coip-programa__arrow {
		width: 40px;
		height: 40px;
	}

	.coip-programa__bar {
		gap: 12px;
	}

	.coip-programa__meter {
		margin-inline: 52px;
		padding-inline: 0;
	}

	.coip-programa__slot-list,
	.coip-programa__pool {
		grid-template-columns: minmax(0, 1fr);
	}

	.coip-programa__reco,
	.coip-programa__slot--main .coip-programa__reco {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	.coip-programa__slot--main .coip-programa__reco {
		row-gap: 0;
	}

	.coip-programa__slot--main .coip-programa__reco-foto {
		height: 180px;
	}

	.coip-programa__slot--main .coip-programa__reco-body {
		padding: 24px;
	}

	.coip-programa__cta,
	.coip-programa__cta--reco {
		width: 100%;
		max-width: 320px;
	}

	.coip-programa__cta--reco > span {
		flex: 1 1 auto;
	}
}

@media (max-width: 479px) {
	.coip-programa__progress {
		max-width: none;
	}

	.coip-programa__meter {
		margin-inline: 52px;
	}
}

/* Los hovers de la píldora, las flechas y el CTA ya no hace falta apagarlos
   aquí: están escritos con los tokens de movimiento, que base.css pone a cero
   con movimiento reducido. Lo que queda son las dos transiciones que no son de
   hover —la marca de verificación y el relleno de la barra—, que sí se cortan. */
@media (prefers-reduced-motion: reduce) {
	.coip-programa__radio,
	.coip-programa__check,
	.coip-programa__fill {
		transition: none;
	}
}