/* =========================================================================
   Mastercoip 2026 — clases gratuitas (inc/pages/clase-gratis.php).

   Estas páginas no tienen artboard en el XD. La maqueta habla el idioma de las
   landings de curso —el mismo velo violeta en multiply sobre la foto del curso,
   los mismos botones .coip-cta y los mismos desplegables del programa, que
   llegan con assets/css/curso.css— y lo ordena alrededor de lo que se viene a
   ver: el vídeo.

     1. Sala       banda oscura con sello, título, lema y el reproductor
     2. Aprender   tarjetas con lo que enseña el curso completo (crema)
     3. Oferta     el curso y su ficha de compra (banda marengo)
     4. Pack       sólo Common Mistakes II (tarjeta en degradado)
     5. Programa   los desplegables de la landing (blanco)
     6. FAQ        sólo la clase rusa
     7. Cierre     última invitación (violeta)

   Los cuatro gestos de hover son los de base.css y nada más. Las tarjetas de
   «Aprender» entran con un stagger, así que GSAP les deja un transform en
   línea: su elevación se escribe con `translate`, no con `transform` (ver la
   TRAMPA del lenguaje de hover).
   ========================================================================= */

.coip-clase {
	--coip-clase-player: 1000px; /* ancho máximo del vídeo */
	--coip-clase-aire: 110px;    /* aire vertical de las secciones */

	position: relative;
	background: var(--coip-white);
}

/* Los botones de estas páginas cogen el ancho de su rótulo: en la landing
   miden 313 px porque ahí cada uno tiene su columna, aquí van en fila. El alto
   pasa a mínimo para que un rótulo largo pueda partirse en dos renglones sin
   salirse de la píldora. */
.coip-clase .coip-cta {
	width: auto;
	min-width: 230px;
	height: auto;
	min-height: 40px;
	gap: 16px;
	padding: 8px 14px 8px 20px;
}

.coip-clase .coip-cta--block {
	width: 100%;
	min-width: 0;
}

/* Contorno marengo sobre fondo claro: la versión clara del fantasma crema. */
.coip-cta--linea {
	background: transparent;
	border-color: var(--coip-charcoal);
	color: var(--coip-charcoal);

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

/* Antetítulo de sección: versalitas espaciadas, como el «ONLINE CLINICAL
   SERIES» de las landings pero en violeta sobre claro y lila sobre oscuro. */
.coip-clase__kicker {
	font-size: var(--coip-fs-ui);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--coip-violet);
}

.coip-clase__kicker--claro {
	color: var(--coip-lilac);
}

.coip-clase__titulo {
	margin-top: 12px;
	font-size: var(--coip-fs-h2);
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   1. Sala
   ---------------------------------------------------------------------- */

.coip-clase__sala {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 64px 96px;
	background-color: var(--coip-charcoal);
	background-image: var(--coip-clase-fondo, url("../img/curso-fondo-abstracto.webp"));
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--coip-cream);
	text-align: center;
}

.coip-clase__sala::before,
.coip-clase__sala::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* El velo del hero de las landings: #5A5895 al 88,9 % en multiplicar. */
.coip-clase__sala::before {
	background: var(--coip-hero-veil);
	opacity: 0.8892;
	mix-blend-mode: multiply;
}

/* Y encima, la penumbra de una sala de cine: la banda se oscurece hacia
   abajo, que es donde está la pantalla. */
.coip-clase__sala::after {
	background: linear-gradient(180deg, rgba(41, 43, 50, 0) 28%, rgba(41, 43, 50, 0.78) 100%);
}

.coip-clase__cabecera {
	max-width: 920px;
	margin-inline: auto;
}

.coip-clase__sello {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 20px 6px 6px;
	border: 1px solid rgba(255, 249, 240, 0.32);
	border-radius: 999px;
	background: rgba(255, 249, 240, 0.1);
	font-size: var(--coip-fs-ui);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.coip-clase__sello-play {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--coip-coral);
	color: var(--coip-cream);
}

.coip-clase__sello-play svg {
	width: 10px;
	height: 11.6px;
	margin-inline-start: 2px; /* el triángulo pesa a la izquierda: se centra a ojo */
}

/* Latido del play: señala que lo que viene es un vídeo sin mover nada más.
   Es un anillo que se expande y se desvanece; con movimiento reducido no
   existe. */
@media (prefers-reduced-motion: no-preference) {
	.coip-clase__sello-play::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		animation: coip-clase-latido 2.6s var(--coip-ease-suave) infinite;
	}
}

@keyframes coip-clase-latido {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 129, 129, 0.6);
	}

	70%,
	100% {
		box-shadow: 0 0 0 12px rgba(255, 129, 129, 0);
	}
}

.coip-clase__h1 {
	margin-top: 24px;
	font-size: var(--coip-fs-stat);
	line-height: 1.1;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.coip-clase__lema {
	margin-top: 14px;
	font-size: var(--coip-fs-hero);
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}

/* El reproductor. Ancho completo hasta 1000 px y siempre 16:9: el marco lo
   da aspect-ratio y el iframe lo llena, así que no quedan bandas a ningún
   tamaño. `isolation` le da capa propia para que el resplandor de detrás no
   se mezcle con los velos de la sala. */
.coip-clase__player {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: var(--coip-clase-player);
	margin: 44px auto 0;
}

/* Resplandor de la pantalla: el degradado lila-coral de las tarjetas,
   desenfocado por detrás del marco. */
.coip-clase__player::before {
	content: "";
	position: absolute;
	inset: 12% 5% -3%;
	z-index: -1;
	border-radius: 40px;
	background: var(--coip-grad-card);
	filter: blur(70px);
	opacity: 0.55;
	pointer-events: none;
}

.coip-clase__marco {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--coip-radius);
	background: #000;
	box-shadow:
		0 30px 70px rgba(12, 10, 32, 0.55),
		0 0 0 1px rgba(255, 249, 240, 0.14);

	/* Safari no recorta las esquinas de un iframe si el contenedor con
	   overflow: hidden no tiene capa propia. */
	transform: translateZ(0);
}

@supports not (aspect-ratio: 16 / 9) {
	.coip-clase__marco {
		height: 0;
		padding-top: 56.25%;
	}
}

.coip-clase__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.coip-clase__nota {
	margin-top: 14px;
	font-size: var(--coip-fs-ui);
	line-height: 1.3;
	color: rgba(255, 249, 240, 0.85);
}

/* Móvil tumbado: el vídeo cabe entero en el alto de la pantalla en vez de
   obligar a desplazarse para ver la parte de abajo. */
@media (orientation: landscape) and (max-height: 600px) {
	.coip-clase__player {
		max-width: min(var(--coip-clase-player), calc((100vh - 40px) * 16 / 9));
		max-width: min(var(--coip-clase-player), calc((100svh - 40px) * 16 / 9));
	}
}

/* Bajo el vídeo: quién imparte el curso y los dos botones. */
.coip-clase__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 40px;
	max-width: var(--coip-clase-player);
	margin: 32px auto 0;
	text-align: start;
}

.coip-clase__barra--sola {
	justify-content: center;
}

.coip-clase__autor {
	display: flex;
	align-items: center;
	gap: 14px;
}

.coip-clase__retratos {
	display: flex;
	flex: none;
}

/* Retrato recortado sobre círculo crema, como el autor del hero de las
   landings; si son dos, el segundo monta sobre el primero. */
.coip-clase__retratos img {
	width: 56px;
	height: 56px;
	border: 2px solid var(--coip-cream);
	border-radius: 50%;
	background: var(--coip-cream);
	object-fit: cover;
}

.coip-clase__retratos img + img {
	margin-inline-start: -14px;
}

.coip-clase__autor-txt {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.coip-clase__autor-rol {
	font-size: var(--coip-fs-ui);
	line-height: 1.2;
}

.coip-clase__autor-nombre {
	font-size: var(--coip-fs-card-sub);
	line-height: 1.2;
	font-weight: 700;
}

.coip-clase__autor-nombre + .coip-clase__autor-nombre::before {
	content: "·";
	margin-inline: 8px;
	font-weight: 400;
}

.coip-clase__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* -------------------------------------------------------------------------
   2. Aprender
   ---------------------------------------------------------------------- */

.coip-clase__aprender {
	padding-block: var(--coip-clase-aire);
	background: var(--coip-cream);
}

.coip-clase__intro {
	max-width: 760px;
}

.coip-clase__puntos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--coip-col-gap);
	margin-top: 50px;
}

.coip-clase__punto {
	position: relative;
	overflow: hidden;
	padding: 32px 28px 34px;
	border-radius: var(--coip-radius);
	background: var(--coip-white);
	box-shadow: var(--coip-shadow);
	transition:
		translate var(--coip-dur) var(--coip-ease-suave),
		box-shadow var(--coip-dur) var(--coip-ease-suave);
}

/* Filete superior con el degradado de la marca. */
.coip-clase__punto::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--coip-grad-card);
}

.coip-clase__punto-num {
	display: block;
	font-size: var(--coip-fs-list);
	line-height: 1;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: var(--coip-coral);
}

.coip-clase__punto-titulo {
	margin-top: 18px;
	font-size: var(--coip-fs-body);
	line-height: 1.2;
	font-weight: 700;
}

.coip-clase__punto-texto {
	margin-top: 16px;
	font-size: var(--coip-fs-card-sub);
	line-height: 1.35;
}

.coip-clase__punto-titulo + .coip-clase__punto-texto {
	margin-top: 10px;
	font-size: var(--coip-fs-ui);
}

/* Gesto 1, elevar. Con `translate` y no con `transform`: GSAP deja un
   transform en línea a los hijos del stagger. */
@media (hover: hover) and (pointer: fine) {
	.coip-clase__punto:hover {
		translate: 0 var(--coip-lift);
		box-shadow: var(--coip-shadow-lift);
	}
}

/* -------------------------------------------------------------------------
   3. Oferta
   ---------------------------------------------------------------------- */

.coip-clase__oferta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--coip-clase-aire);
	background: var(--coip-charcoal);
	color: var(--coip-cream);
}

/* Un halo lila-coral detrás de la ficha, para que la banda no sea un plano. */
.coip-clase__oferta::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -180px;
	z-index: -1;
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(157, 154, 255, 0.34), rgba(255, 129, 129, 0.12) 62%, transparent);
	translate: 0 -50%;
	pointer-events: none;
}

.coip-clase__oferta-wrap {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 448px);
	justify-content: space-between;
	align-items: center;
	gap: 60px;
}

.coip-clase__oferta-titulo {
	margin-top: 14px;
	font-size: var(--coip-fs-stat);
	line-height: 1.1;
	font-weight: 900;
	text-wrap: balance; /* sin esto el móvil deja «I» sola en la segunda línea */
}

.coip-clase__oferta-lema {
	margin-top: 16px;
	font-size: var(--coip-fs-hero);
	line-height: 1.2;
	font-weight: 700;
}

.coip-clase__oferta-cuerpo {
	margin-top: 24px;
	font-size: var(--coip-fs-body);
	line-height: 1.3;
}

.coip-clase__oferta-cuerpo p + p {
	margin-top: 16px;
}

.coip-clase__oferta-cuerpo strong {
	font-weight: 600;
}

.coip-clase__oferta-cta {
	display: flex;
	margin-top: 36px;
}

.coip-clase__ficha {
	padding: 30px 30px 36px;
	border-radius: var(--coip-radius);
	background: var(--coip-white);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
	color: var(--coip-ink);
}

/* Contenedor que recorta la foto para que pueda acercarse (gesto 4). */
.coip-clase__ficha-media {
	display: block;
	overflow: hidden;
	border-radius: 16px;
}

.coip-clase__ficha-img {
	width: 100%;
	height: auto;
	aspect-ratio: 388 / 250;
	object-fit: cover;
	transition: scale var(--coip-dur) var(--coip-ease-suave);
}

@media (hover: hover) and (pointer: fine) {
	.coip-clase__ficha:hover .coip-clase__ficha-img {
		scale: var(--coip-zoom);
	}
}

.coip-clase__precio {
	margin-top: 20px;
	font-size: var(--coip-fs-hero);
	line-height: 1.2;
	font-weight: 700;
	color: var(--coip-charcoal);
}

.coip-clase__precio-nota {
	margin-top: 8px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 300;
}

.coip-clase__ficha .coip-cta {
	margin-top: 22px;
}

/* Los botones de arriba y del cierre bajan aquí (#compra) cuando el curso se
   paga a plazos: que la ficha no quede pegada al borde de la ventana. */
.coip-clase__ficha {
	scroll-margin-top: 24px;
}

/* Selector de pago único / plazos (inc/pago.php, estilos en pago.css). */
.coip-clase__ficha .coip-pago {
	margin-top: 18px;
}

.coip-clase__features {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 24px;
}

/* Icono alineado con la primera línea, como en la ficha de la landing. */
.coip-clase__feature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--coip-fs-card-sub);
	line-height: 1.2222;
	font-weight: 600;
}

.coip-clase__feature svg {
	flex: none;
	width: 30px;
	height: 30px;
	color: var(--coip-charcoal);
}

.coip-clase__feature-txt {
	padding-top: 4px;
}

.coip-clase__feature-sub {
	display: block;
	margin-top: 4px;
	font-size: var(--coip-fs-ui);
	line-height: 1.2;
	font-weight: 400;
}

/* La segunda línea existe en un idioma y no en el otro; vacía, no ocupa. */
.coip-clase__feature-sub:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   4. Pack (Common Mistakes II)
   ---------------------------------------------------------------------- */

.coip-clase__pack {
	padding-top: var(--coip-clase-aire);
	background: var(--coip-white);
}

.coip-clase__pack-tarjeta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 56px;
	padding: 56px 60px;
	border-radius: 30px;
	background: var(--coip-grad-card);
	box-shadow: var(--coip-shadow-lift);
	color: var(--coip-cream);
}

.coip-clase__pack-media {
	display: flex;
	align-items: center;
	gap: 14px;
}

.coip-clase__pack-foto {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(41, 43, 50, 0.28);
}

.coip-clase__pack-foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 388 / 250;
	object-fit: cover;
}

.coip-clase__pack-mas {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--coip-cream);
	font-size: 28px;
	line-height: 1;
	font-weight: 900;
	color: var(--coip-coral);
}

/* Sobre el degradado lila-coral el antetítulo lila desaparecería. */
.coip-clase__pack .coip-clase__kicker {
	color: var(--coip-cream);
	opacity: 0.85;
}

.coip-clase__pack-titulo {
	margin-top: 12px;
	font-size: var(--coip-fs-h2);
	line-height: 1.2;
	font-weight: 900;
	text-wrap: balance;
}

.coip-clase__pack-texto {
	margin-top: 18px;
	font-size: var(--coip-fs-body);
	line-height: 1.3;
	font-weight: 600;
}

.coip-clase__pack-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

/* -------------------------------------------------------------------------
   5. Programa  ·  6. FAQ
   ---------------------------------------------------------------------- */

.coip-clase__programa,
.coip-clase__faq {
	padding-block: var(--coip-clase-aire);
	background: var(--coip-white);
}

.coip-clase__programa + .coip-clase__faq {
	padding-top: 0;
}

/* Dos listas que apilan por separado: abrir un desplegable no descuadra el
   de la columna de al lado. */
.coip-clase__columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 20px var(--coip-col-gap);
	margin-top: 44px;
}

.coip-clase__desplegables > li + li {
	margin-top: 20px;
}

.coip-clase__desplegables--faq {
	max-width: 860px;
	margin-top: 44px;
}

/* Lecciones de un módulo (la clase rusa): lista numerada dentro del
   desplegable, con la misma sangría que la respuesta de la landing. */
.coip-clase__lecciones {
	margin-top: -3px;
	padding: 0 24px 26px 50px;
	list-style: decimal;
	font-size: var(--coip-fs-ui);
	line-height: 1.35;
}

.coip-clase__lecciones li + li {
	margin-top: 8px;
}

.coip-clase__lecciones li::marker {
	font-weight: 700;
	color: var(--coip-violet);
}

.coip-clase__programa-cta {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

/* -------------------------------------------------------------------------
   7. Cierre
   ---------------------------------------------------------------------- */

.coip-clase__cierre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 100px;
	background: linear-gradient(120deg, var(--coip-violet) 0%, var(--coip-hero-veil) 100%);
	color: var(--coip-cream);
	text-align: center;
}

.coip-clase__cierre::before {
	content: "";
	position: absolute;
	inset: -40% 10% auto;
	z-index: -1;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 129, 129, 0.3), transparent);
	pointer-events: none;
}

.coip-clase__cierre-txt {
	max-width: 760px;
	margin-inline: auto;
}

.coip-clase__cierre-titulo {
	font-size: var(--coip-fs-h2);
	line-height: 1.2;
	font-weight: 900;
	text-wrap: balance;
}

.coip-clase__cierre-texto {
	margin-top: 16px;
	font-size: var(--coip-fs-body);
	line-height: 1.3;
}

.coip-clase__cierre-cta {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

/* =========================================================================
   Adaptación
   ========================================================================= */

@media (max-width: 1279px) {
	.coip-clase {
		--coip-clase-aire: 96px;
	}

	.coip-clase__oferta-wrap {
		gap: 44px;
	}
}

@media (max-width: 1023px) {
	.coip-clase {
		--coip-clase-aire: 80px;
	}

	.coip-clase__sala {
		padding-block: 52px 76px;
	}

	.coip-clase__puntos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* La ficha baja debajo del texto y se queda con su ancho de tarjeta. */
	.coip-clase__oferta-wrap {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.coip-clase__oferta-txt {
		width: 100%;
		max-width: 640px;
	}

	.coip-clase__ficha {
		width: 100%;
		max-width: 448px;
	}

	.coip-clase__oferta::before {
		top: auto;
		right: 50%;
		bottom: -260px;
		translate: 50% 0;
	}

	.coip-clase__pack-tarjeta {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding: 44px;
	}

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

@media (max-width: 767px) {
	.coip-clase {
		--coip-clase-aire: 64px;
	}

	.coip-clase__sala {
		padding-block: 40px 56px;
	}

	.coip-clase__sello {
		gap: 10px;
		padding-inline-end: 16px;
		letter-spacing: 0.08em;
	}

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

	.coip-clase__marco {
		border-radius: 14px;
	}

	/* Autor arriba y botones debajo, a todo el ancho. */
	.coip-clase__barra {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		margin-top: 26px;
	}

	.coip-clase__autor {
		justify-content: center;
	}

	.coip-clase__ctas {
		flex-direction: column;
	}

	.coip-clase .coip-cta {
		width: 100%;
		min-width: 0;
	}

	.coip-clase__puntos {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 36px;
	}

	.coip-clase__punto {
		padding: 26px 22px 28px;
	}

	/* El nombre del curso a 38 px no cabe en una línea de 344: se queda en el
	   cuerpo del titular del hero, que ya reparte las palabras en dos. */
	.coip-clase__oferta-titulo {
		font-size: calc(var(--coip-fs-stat) * 0.84);
	}

	.coip-clase__oferta-cta {
		margin-top: 30px;
	}

	.coip-clase__ficha {
		padding: 22px 22px 28px;
	}

	.coip-clase__pack-tarjeta {
		padding: 30px 23px 34px;
		border-radius: var(--coip-radius);
	}

	.coip-clase__pack-mas {
		width: 34px;
		height: 34px;
		font-size: 22px;
	}

	.coip-clase__pack-ctas {
		flex-direction: column;
	}

	.coip-clase__columnas,
	.coip-clase__desplegables--faq {
		margin-top: 32px;
	}

	.coip-clase__lecciones {
		padding-inline: 44px 20px;
	}

	.coip-clase__cierre {
		padding-block: 72px;
	}
}