/**
 * Curso Hongos Sticky CTA.
 * Barra flotante de llamada a la accion. Todos los selectores propios usan el prefijo cursohongosstickycta.
 * Los valores configurables se exponen como variables CSS para que Elementor las sobrescriba.
 * Los tamanos de fuente se dejan al grupo Tipografia de Elementor: aqui solo hay valores base.
 */

.cursohongosstickycta {
	/* Color */
	--cursohongosstickycta-tinta: #16150f;
	--cursohongosstickycta-papel: #f4f1e8;
	--cursohongosstickycta-lima: #cdf13b;
	--cursohongosstickycta-fondo: #16150f;
	--cursohongosstickycta-color-titulo: #f4f1e8;
	--cursohongosstickycta-color-subtitulo: rgba(244, 241, 232, 0.6);
	--cursohongosstickycta-color-icono: #cdf13b;

	/* Caja */
	--cursohongosstickycta-ancho: 100%;
	--cursohongosstickycta-lateral: 12px;
	--cursohongosstickycta-vertical: 12px;
	--cursohongosstickycta-radio: 8px;
	--cursohongosstickycta-hueco: 12px;
	--cursohongosstickycta-hueco-texto: 2px;
	--cursohongosstickycta-desenfoque: 0px;
	--cursohongosstickycta-z: 190;
	--cursohongosstickycta-admin: 0px;

	/* Entrada y salida */
	--cursohongosstickycta-duracion: 350ms;
	--cursohongosstickycta-curva: cubic-bezier(0.22, 0.8, 0.28, 1);
	--cursohongosstickycta-salida: 150%;
	--cursohongosstickycta-escala-entrada: 0.92;

	/* Boton */
	--cursohongosstickycta-boton-fondo: #cdf13b;
	--cursohongosstickycta-boton-color: #16150f;
	--cursohongosstickycta-boton-borde-color: #16150f;
	--cursohongosstickycta-boton-borde: 2px;
	--cursohongosstickycta-boton-radio: 4px;
	--cursohongosstickycta-boton-hueco: 10px;
	--cursohongosstickycta-boton-giro: 0deg;
	--cursohongosstickycta-boton-sombra-x: 3px;
	--cursohongosstickycta-boton-sombra-y: 4px;
	--cursohongosstickycta-boton-sombra-color: rgba(22, 21, 15, 0.85);
	--cursohongosstickycta-boton-fondo-hover: #cdf13b;
	--cursohongosstickycta-boton-color-hover: #16150f;
	--cursohongosstickycta-boton-borde-color-hover: #16150f;
	--cursohongosstickycta-boton-sombra-x-hover: 4px;
	--cursohongosstickycta-boton-sombra-y-hover: 5px;
	--cursohongosstickycta-boton-empuje: 1px;

	/* Latido */
	--cursohongosstickycta-latido-duracion: 1.5s;
	--cursohongosstickycta-latido-escala: 1.05;
	--cursohongosstickycta-latido-resplandor: rgba(205, 241, 59, 0.85);
	--cursohongosstickycta-latido-halo: 18px;

	/* Cerrar */
	--cursohongosstickycta-cerrar-tam: 28px;
	--cursohongosstickycta-cerrar-color: rgba(244, 241, 232, 0.55);
	--cursohongosstickycta-cerrar-color-hover: #f4f1e8;
	--cursohongosstickycta-cerrar-fondo: transparent;
	--cursohongosstickycta-cerrar-fondo-hover: rgba(244, 241, 232, 0.12);
	--cursohongosstickycta-cerrar-borde: 0px;
	--cursohongosstickycta-cerrar-borde-color: rgba(244, 241, 232, 0.25);

	position: fixed;
	z-index: var(--cursohongosstickycta-z);
	left: var(--cursohongosstickycta-lateral);
	right: var(--cursohongosstickycta-lateral);
	bottom: calc(var(--cursohongosstickycta-vertical) + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* El hueco libre a los lados de una barra estrecha no debe bloquear la pagina. */
	pointer-events: none;
	transition:
		transform var(--cursohongosstickycta-duracion) var(--cursohongosstickycta-curva),
		opacity var(--cursohongosstickycta-duracion) var(--cursohongosstickycta-curva),
		visibility var(--cursohongosstickycta-duracion) var(--cursohongosstickycta-curva);
}

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

/* --- Posicion ----------------------------------------------------------- */

.cursohongosstickycta--arriba {
	top: calc(var(--cursohongosstickycta-vertical) + var(--cursohongosstickycta-admin) + env(safe-area-inset-top, 0px));
	bottom: auto;
	align-items: flex-start;
	--cursohongosstickycta-salida: -150%;
}

/* La barra de administracion de WordPress solo tapa el anclaje superior. */
body.admin-bar .cursohongosstickycta--compensar-admin.cursohongosstickycta--arriba {
	--cursohongosstickycta-admin: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .cursohongosstickycta--compensar-admin.cursohongosstickycta--arriba {
		--cursohongosstickycta-admin: 46px;
	}
}

/* --- Estado oculto ------------------------------------------------------ */

.cursohongosstickycta--oculto {
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--cursohongosstickycta-salida));
}

/* Sin visibility no habria forma de sacar el enlace del orden de tabulacion. */
.cursohongosstickycta--oculto .cursohongosstickycta__barra {
	pointer-events: none;
}

.cursohongosstickycta--desvanecer.cursohongosstickycta--oculto {
	transform: none;
}

.cursohongosstickycta--escala.cursohongosstickycta--oculto {
	transform: scale(var(--cursohongosstickycta-escala-entrada));
}

/* Caja creada al vuelo cuando la barra se reubica al final del <body>. */
.cursohongosstickycta-anfitrion {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* --- Barra -------------------------------------------------------------- */

.cursohongosstickycta__barra {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cursohongosstickycta-hueco);
	width: 100%;
	max-width: var(--cursohongosstickycta-ancho);
	padding: 9px 9px 9px 18px;
	border-radius: var(--cursohongosstickycta-radio);
	background-color: var(--cursohongosstickycta-fondo);
	color: var(--cursohongosstickycta-color-titulo);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Sin bloque de texto el boton manda y se centra. */
.cursohongosstickycta--solo-boton .cursohongosstickycta__barra {
	justify-content: center;
}

.cursohongosstickycta--desenfoque .cursohongosstickycta__barra {
	-webkit-backdrop-filter: blur(var(--cursohongosstickycta-desenfoque));
	backdrop-filter: blur(var(--cursohongosstickycta-desenfoque));
}

/* --- Bloque de texto ---------------------------------------------------- */

.cursohongosstickycta__info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.cursohongosstickycta__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--cursohongosstickycta-color-icono);
	font-size: 20px;
	line-height: 1;
}

.cursohongosstickycta__icono svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cursohongosstickycta__contenido {
	display: flex;
	flex-direction: column;
	gap: var(--cursohongosstickycta-hueco-texto);
	min-width: 0;
}

.cursohongosstickycta__titulo {
	margin: 0;
	color: var(--cursohongosstickycta-color-titulo);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.cursohongosstickycta__subtitulo {
	display: block;
	margin: 0;
	color: var(--cursohongosstickycta-color-subtitulo);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* --- Acciones ----------------------------------------------------------- */

.cursohongosstickycta__acciones {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.cursohongosstickycta__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cursohongosstickycta-boton-hueco);
	padding: 11px 16px;
	border: var(--cursohongosstickycta-boton-borde) solid var(--cursohongosstickycta-boton-borde-color);
	border-radius: var(--cursohongosstickycta-boton-radio);
	background-color: var(--cursohongosstickycta-boton-fondo);
	color: var(--cursohongosstickycta-boton-color);
	box-shadow:
		var(--cursohongosstickycta-boton-sombra-x)
		var(--cursohongosstickycta-boton-sombra-y)
		0
		var(--cursohongosstickycta-boton-sombra-color);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* El boton se imprime como <button> cuando no hay enlace configurado. */
	-webkit-appearance: none;
	appearance: none;
	transform: rotate(var(--cursohongosstickycta-boton-giro));
	transition:
		transform 0.14s ease,
		box-shadow 0.14s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.cursohongosstickycta__boton:hover,
.cursohongosstickycta__boton:focus-visible {
	background-color: var(--cursohongosstickycta-boton-fondo-hover);
	border-color: var(--cursohongosstickycta-boton-borde-color-hover);
	color: var(--cursohongosstickycta-boton-color-hover);
	box-shadow:
		var(--cursohongosstickycta-boton-sombra-x-hover)
		var(--cursohongosstickycta-boton-sombra-y-hover)
		0
		var(--cursohongosstickycta-boton-sombra-color);
	transform:
		rotate(var(--cursohongosstickycta-boton-giro))
		translate(calc(var(--cursohongosstickycta-boton-empuje) * -1), calc(var(--cursohongosstickycta-boton-empuje) * -1));
}

.cursohongosstickycta__boton:active {
	box-shadow: 1px 1px 0 var(--cursohongosstickycta-boton-sombra-color);
	transform:
		rotate(var(--cursohongosstickycta-boton-giro))
		translate(var(--cursohongosstickycta-boton-empuje), var(--cursohongosstickycta-boton-empuje));
}

.cursohongosstickycta__flecha {
	display: inline-block;
	transition: transform 0.2s ease;
}

.cursohongosstickycta__boton:hover .cursohongosstickycta__flecha,
.cursohongosstickycta__boton:focus-visible .cursohongosstickycta__flecha {
	transform: translateX(4px);
}

/* --- Latido ------------------------------------------------------------- */

.cursohongosstickycta--latido .cursohongosstickycta__boton {
	animation: cursohongosstickycta-latido var(--cursohongosstickycta-latido-duracion) ease-in-out infinite;
	transform-origin: center center;
}

/* Al interactuar manda el estado hover, no la animacion. */
.cursohongosstickycta--latido .cursohongosstickycta__boton:hover,
.cursohongosstickycta--latido .cursohongosstickycta__boton:focus-visible,
.cursohongosstickycta--latido .cursohongosstickycta__boton:active {
	animation: none;
}

@keyframes cursohongosstickycta-latido {
	0%,
	100% {
		transform: rotate(var(--cursohongosstickycta-boton-giro)) scale(1);
		box-shadow:
			var(--cursohongosstickycta-boton-sombra-x)
			var(--cursohongosstickycta-boton-sombra-y)
			0
			var(--cursohongosstickycta-boton-sombra-color);
	}

	50% {
		transform: rotate(var(--cursohongosstickycta-boton-giro)) scale(var(--cursohongosstickycta-latido-escala));
		box-shadow:
			2px 3px 0 var(--cursohongosstickycta-boton-sombra-color),
			0 0 var(--cursohongosstickycta-latido-halo) 3px var(--cursohongosstickycta-latido-resplandor);
	}
}

/* --- Cerrar ------------------------------------------------------------- */

.cursohongosstickycta__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--cursohongosstickycta-cerrar-tam);
	height: var(--cursohongosstickycta-cerrar-tam);
	padding: 0;
	border: var(--cursohongosstickycta-cerrar-borde) solid var(--cursohongosstickycta-cerrar-borde-color);
	border-radius: 50%;
	background-color: var(--cursohongosstickycta-cerrar-fondo);
	color: var(--cursohongosstickycta-cerrar-color);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cursohongosstickycta__cerrar:hover,
.cursohongosstickycta__cerrar:focus-visible {
	background-color: var(--cursohongosstickycta-cerrar-fondo-hover);
	color: var(--cursohongosstickycta-cerrar-color-hover);
}

.cursohongosstickycta__cerrar svg {
	width: 45%;
	height: 45%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* --- Foco --------------------------------------------------------------- */

.cursohongosstickycta a:focus-visible,
.cursohongosstickycta button:focus-visible {
	outline: 3px solid var(--cursohongosstickycta-lima);
	outline-offset: 3px;
}

/* --- Espacio reservado en la pagina ------------------------------------- */

body.cursohongosstickycta-espacio-abajo {
	padding-bottom: var(--cursohongosstickycta-espacio-abajo, 0px);
}

body.cursohongosstickycta-espacio-arriba {
	padding-top: var(--cursohongosstickycta-espacio-arriba, 0px);
}

/* --- Editor de Elementor ------------------------------------------------ */

/* Dentro del editor la barra se muestra siempre para poder darle estilo. */
.cursohongosstickycta--editor {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --- Preferencias del sistema ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cursohongosstickycta,
	.cursohongosstickycta * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.cursohongosstickycta__boton:hover,
	.cursohongosstickycta__boton:focus-visible,
	.cursohongosstickycta__boton:active {
		transform: rotate(var(--cursohongosstickycta-boton-giro));
	}
}

@media print {
	.cursohongosstickycta {
		display: none !important;
	}
}