/* ESTB Enlace con Círculo */
.estb-lr {
	--estb-lr-duration: 300ms;
	--estb-lr-size: 64px;
	--estb-lr-bg: #F7F8F7;
	--estb-lr-bg-hover: #4E7F79;
	--estb-lr-shadow-x: 0px;
	--estb-lr-shadow-y: 4px;
	--estb-lr-shadow-blur: 0px;
	--estb-lr-shadow: #A9C0BC;
	--estb-lr-shadow-hover: #3E6863;
	--estb-lr-move-x: 0px;
	--estb-lr-move-y: 0px;
	--estb-lr-lift: 0px;
	--estb-lr-line: #C5D3D0;
	--estb-lr-border: #D6DFDD;
	--estb-lr-border-hover: var(--estb-lr-bg-hover);
	--estb-lr-icon: #1E3A4A;
	--estb-lr-icon-hover: #FFFFFF;
	--estb-lr-title: #1E3A4A;
	--estb-lr-title-hover: var(--estb-lr-title);
	--estb-lr-sub: #4A5B63;
	--estb-lr-sub-hover: var(--estb-lr-sub);

	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
	margin: 0;
	padding: 24px 0 22px;
	border-top: 1px solid var(--estb-lr-line);
	background: transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Reset de estilos de enlace del tema */
a.estb-lr,
a.estb-lr:hover,
a.estb-lr:focus,
a.estb-lr:visited {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	outline-offset: 4px;
}

.estb-lr--icon-left .estb-lr__circle {
	order: -1;
	margin-left: 0;
}

.estb-lr__texts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.estb-lr__title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--estb-lr-title);
	transition: color var(--estb-lr-duration) ease;
}

.estb-lr__subtitle {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--estb-lr-sub);
	transition: color var(--estb-lr-duration) ease;
}

/* Círculo */
.estb-lr__circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: auto;
	width: var(--estb-lr-size);
	height: var(--estb-lr-size);
	border-radius: 50%;
	border: 1px solid var(--estb-lr-border);
	background-color: var(--estb-lr-bg);
	box-shadow: var(--estb-lr-shadow-x) var(--estb-lr-shadow-y) var(--estb-lr-shadow-blur) 0 var(--estb-lr-shadow);
	overflow: hidden;
	isolation: isolate;
	transform: translateY(0);
	transition: background-color var(--estb-lr-duration) ease,
		border-color var(--estb-lr-duration) ease,
		box-shadow var(--estb-lr-duration) ease,
		transform var(--estb-lr-duration) ease;
}

/* Capa de relleno para los efectos "desde abajo" y "desde el centro" */
.estb-lr__circle::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background-color: var(--estb-lr-bg-hover);
	opacity: 0;
	transition: transform var(--estb-lr-duration) ease, opacity var(--estb-lr-duration) ease;
}

.estb-lr--fill-bottom .estb-lr__circle::before {
	opacity: 1;
	border-radius: 0;
	transform: translateY(101%);
}

.estb-lr--fill-center .estb-lr__circle::before {
	opacity: 1;
	transform: scale(0);
}

.estb-lr__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	color: var(--estb-lr-icon);
	transform: translate(0, 0);
	transition: color var(--estb-lr-duration) ease, transform var(--estb-lr-duration) ease;
}

.estb-lr__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.estb-lr__icon svg.estb-lr__arrow {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* ---------- Hover ---------- */
.estb-lr:hover .estb-lr__circle,
.estb-lr:focus-visible .estb-lr__circle {
	border-color: var(--estb-lr-border-hover);
	box-shadow: var(--estb-lr-shadow-x) var(--estb-lr-shadow-y) var(--estb-lr-shadow-blur) 0 var(--estb-lr-shadow-hover);
	transform: translateY(calc(var(--estb-lr-lift) * -1));
}

.estb-lr--fill-fade:hover .estb-lr__circle,
.estb-lr--fill-fade:focus-visible .estb-lr__circle {
	background-color: var(--estb-lr-bg-hover);
}

.estb-lr--fill-bottom:hover .estb-lr__circle::before,
.estb-lr--fill-bottom:focus-visible .estb-lr__circle::before {
	transform: translateY(0);
}

.estb-lr--fill-center:hover .estb-lr__circle::before,
.estb-lr--fill-center:focus-visible .estb-lr__circle::before {
	transform: scale(1);
}

.estb-lr:hover .estb-lr__icon,
.estb-lr:focus-visible .estb-lr__icon {
	color: var(--estb-lr-icon-hover);
	transform: translate(var(--estb-lr-move-x), var(--estb-lr-move-y));
}

.estb-lr:hover .estb-lr__title,
.estb-lr:focus-visible .estb-lr__title {
	color: var(--estb-lr-title-hover);
}

.estb-lr:hover .estb-lr__subtitle,
.estb-lr:focus-visible .estb-lr__subtitle {
	color: var(--estb-lr-sub-hover);
}

@media (prefers-reduced-motion: reduce) {
	.estb-lr *,
	.estb-lr *::before {
		transition: none !important;
	}
}