/**
 * Curso Hongos Números
 * Estilos encapsulados para convivir con temas y otros widgets.
 */

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

.cursohongosnums {
	--cursohongosnums-fondo: #080808;
	--cursohongosnums-papel: #f4f1e8;
	--cursohongosnums-lima: #cdf13b;
	--cursohongosnums-cuadricula: rgba(205, 241, 59, 0.05);
	--cursohongosnums-cuadricula-tamano: 34px;
	--cursohongosnums-cuadricula-opacidad: 0.5;
	--cursohongosnums-duracion: 850ms;
	--cursohongosnums-desfase: 120ms;
	--cursohongosnums-rotacion-nota: -7deg;
	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	background: var(--cursohongosnums-fondo);
	color: var(--cursohongosnums-papel);
}

.cursohongosnums__fondo-cuadricula {
	position: absolute;
	z-index: -1;
	inset: 0;
	opacity: var(--cursohongosnums-cuadricula-opacidad);
	background-image:
		linear-gradient(var(--cursohongosnums-cuadricula) 1px, transparent 1px),
		linear-gradient(90deg, var(--cursohongosnums-cuadricula) 1px, transparent 1px);
	background-size:
		100% var(--cursohongosnums-cuadricula-tamano),
		var(--cursohongosnums-cuadricula-tamano) 100%;
	pointer-events: none;
}

.cursohongosnums__contenedor {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 60px 48px;
}

.cursohongosnums__encabezado {
	position: relative;
	margin-bottom: 54px;
}

.cursohongosnums__etiqueta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	color: rgba(244, 241, 232, 0.6);
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cursohongosnums__cuadro {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border: 1.4px solid var(--cursohongosnums-papel);
	background: var(--cursohongosnums-lima);
	transform: rotate(8deg);
}

.cursohongosnums__referencia {
	color: rgba(244, 241, 232, 0.4);
}

.cursohongosnums__titulo {
	max-width: 16ch;
	margin: 0;
	color: var(--cursohongosnums-papel);
	font-family: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
	font-size: clamp(38px, 5.4vw, 72px);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.cursohongosnums__cuadricula-cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 42px 26px;
	position: relative;
}

.cursohongosnums__cifra {
	position: relative;
	min-width: 0;
	padding: 8px 4px;
}

.cursohongosnums__valor {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0 0.12em;
	margin: 0 0 14px;
	color: var(--cursohongosnums-lima);
	font-family: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
	font-size: clamp(54px, 7vw, 108px);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.04em;
	text-shadow: 0 0 44px rgba(205, 241, 59, 0.28);
}

.cursohongosnums__valor-principal {
	min-width: 0;
}

.cursohongosnums__meta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.18em;
	padding-bottom: 0.04em;
	color: rgba(205, 241, 59, 0.72);
	font-family: inherit;
	font-size: 0.32em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.cursohongosnums__descripcion {
	width: 100%;
	max-width: 26ch;
	color: rgba(244, 241, 232, 0.72);
	font-family: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.cursohongosnums__descripcion > :first-child,
.cursohongosnums__cierre > :first-child {
	margin-top: 0;
}

.cursohongosnums__descripcion > :last-child,
.cursohongosnums__cierre > :last-child {
	margin-bottom: 0;
}

.cursohongosnums__descripcion strong {
	color: var(--cursohongosnums-papel);
	font-weight: 600;
}

.cursohongosnums__nota {
	position: absolute;
	z-index: 2;
	max-width: min(240px, 80%);
	color: var(--cursohongosnums-lima);
	font-family: Caveat, "Segoe Print", "Bradley Hand", cursive;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	text-wrap: balance;
	transform: rotate(var(--cursohongosnums-rotacion-nota));
	pointer-events: none;
}

.cursohongosnums__nota--superior-izquierda {
	top: -6px;
	left: 0;
}

.cursohongosnums__nota--superior-derecha {
	top: -6px;
	right: 0;
	text-align: right;
}

.cursohongosnums__nota--inferior-izquierda {
	bottom: -30px;
	left: 0;
}

.cursohongosnums__nota--inferior-derecha {
	right: 0;
	bottom: -30px;
	text-align: right;
}

.cursohongosnums__cierre {
	max-width: 760px;
	margin-top: 56px;
	color: rgba(244, 241, 232, 0.82);
	font-family: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.55;
}

.cursohongosnums__cierre em {
	color: var(--cursohongosnums-lima);
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
}

.cursohongosnums__cierre strong {
	color: inherit;
	font-weight: 700;
}

.cursohongosnums--animar.cursohongosnums--js .cursohongosnums__revelar {
	opacity: 0;
	filter: blur(6px);
	transform: translateY(34px) scale(0.96);
	transition:
		opacity var(--cursohongosnums-duracion) cubic-bezier(0.16, 1, 0.3, 1),
		transform var(--cursohongosnums-duracion) cubic-bezier(0.16, 1, 0.3, 1),
		filter var(--cursohongosnums-duracion) ease;
	transition-delay: calc(var(--cursohongosnums-indice, 0) * var(--cursohongosnums-desfase));
	will-change: opacity, transform, filter;
}

.cursohongosnums--animar.cursohongosnums--js .cursohongosnums__encabezado {
	--cursohongosnums-indice: 0;
}

.cursohongosnums--animar.cursohongosnums--js .cursohongosnums__cifra {
	--cursohongosnums-indice: 1;
}

.cursohongosnums--animar.cursohongosnums--js.cursohongosnums--visible .cursohongosnums__revelar,
.elementor-editor-active .cursohongosnums--animar.cursohongosnums--js .cursohongosnums__revelar {
	opacity: 1;
	filter: none;
	transform: none;
}

@media (max-width: 1024px) {
	.cursohongosnums__cuadricula-cifras {
		grid-template-columns: 1fr;
	}

	.cursohongosnums__valor {
		font-size: clamp(58px, 12vw, 104px);
	}

	.cursohongosnums__descripcion {
		max-width: min(52ch, 100%);
	}
}

@media (max-width: 767px) {
	.cursohongosnums__contenedor {
		padding-inline: 20px 16px;
	}

	.cursohongosnums__titulo {
		overflow-wrap: anywhere;
	}

	.cursohongosnums__cuadricula-cifras {
		row-gap: 38px;
	}

	.cursohongosnums__cifra {
		padding-inline: 0;
	}

	.cursohongosnums__valor {
		font-size: clamp(48px, 17vw, 78px);
	}

	.cursohongosnums__nota,
	.cursohongosnums__nota--superior-izquierda,
	.cursohongosnums__nota--superior-derecha,
	.cursohongosnums__nota--inferior-izquierda,
	.cursohongosnums__nota--inferior-derecha {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		display: block;
		width: max-content;
		max-width: 100%;
		margin-top: 12px;
		text-align: left;
		transform-origin: left center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cursohongosnums--animar.cursohongosnums--js .cursohongosnums__revelar {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}