/**
 * Simó Lorenzo Kit — Niveles (tiers).
 *
 * Solo el interior de cada tarjeta y el nivel destacado. La carcasa (columnas,
 * tarjeta, deslizable...) está en card-collection.css.
 */

.slk-tiers {
	--slk-tier-gap: 14px;
	--slk-tier-bar-on: #f04e68;
	--slk-tier-bar-off: rgba(17, 27, 46, 0.1);
	--slk-tier-bar-h: 6px;
	--slk-tier-bar-gap: 6px;
	--slk-tier-bar-space: 10px;
	--slk-tier-ring: #f04e68;
	--slk-tier-ring-w: 2px;
	--slk-tier-ring-style: solid;
	--slk-tier-ring-offset: 0px;
	--slk-tier-badge-left: 30px;
	--slk-tier-featured-offset: 0px;
	--slk-tier-box-mt: auto;
	--slk-tier-list-line: rgba(17, 27, 46, 0.1);
	--slk-tier-list-pad: 12px;
	--slk-tier-con-display: none;
	--slk-tier-con-size: 34px;
	--slk-tier-con-top: 50%;
	--slk-tier-con-left: calc(100% + var(--slk-cc-gap, 24px) / 2);

	/* Lo que el contorno del destacado sobresale de su tarjeta. */
	--slk-tier-ring-space: calc(var(--slk-tier-ring-w) + max(0px, var(--slk-tier-ring-offset)));

	/* Sitio para la insignia, que sobresale por encima de la tarjeta destacada, y para el
	   contorno por abajo: en modo deslizable la lista recorta lo que se sale. El margen
	   negativo de abajo compensa el relleno, así el espacio con lo siguiente no cambia. */
	padding-top: max(18px, var(--slk-tier-ring-space));
	padding-bottom: var(--slk-tier-ring-space);
	margin-bottom: calc(-1 * var(--slk-tier-ring-space));

	/* A los lados, sumado a lo que ya ponga "Sobresalir del contenedor". A la izquierda
	   se compensa con margen (la 1ª tarjeta sigue alineada con el contenido); a la
	   derecha solo relleno, para no ensanchar la página cuando la lista llega al borde. */
	padding-right: calc(var(--slk-cc-bleed-r, 0px) + var(--slk-tier-ring-space));
	padding-left: calc(var(--slk-cc-bleed-l, 0px) + var(--slk-tier-ring-space));
	margin-left: calc(-1 * (var(--slk-cc-bleed-l, 0px) + var(--slk-tier-ring-space)));
	scroll-padding-left: calc(var(--slk-cc-bleed-l, 0px) + var(--slk-tier-ring-space));
}

.slk-tier {
	position: relative;
	gap: var(--slk-tier-gap);
}

/* --- Barra de progreso --- */

.slk-tier__bar {
	display: flex;
	gap: var(--slk-tier-bar-gap);
	margin-bottom: var(--slk-tier-bar-space);
}

.slk-tier__seg {
	flex: 1 1 0;
	height: var(--slk-tier-bar-h);
	border-radius: calc(var(--slk-tier-bar-h) / 2);
	background: var(--slk-tier-bar-off);
}

.slk-tier__seg.is-on {
	background: var(--slk-tier-bar-on);
}

/* --- Textos --- */

.slk-tier__label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.slk-tier__title {
	margin: 0;
	padding: 0;
	line-height: 1.06;
	text-wrap: balance;
}

.slk-tier__pill-row {
	display: flex;
	justify-content: var(--slk-tier-justify, flex-start);
}

.slk-tier__pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(17, 27, 46, 0.06);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* Hueco reservado: ocupa lo mismo que una píldora, pero no se ve. */
.slk-tier__pill-row.is-placeholder {
	visibility: hidden;
}

.slk-tier__desc {
	margin: 0;
	text-wrap: pretty;
}

/* --- Nivel destacado --- */

.slk-tier.is-featured {
	margin-top: var(--slk-tier-featured-offset);
	/* Contorno con outline (admite continuo, rayas, puntos o doble y sigue las esquinas
	   redondeadas); la sombra llega del panel en --slk-tier-shadow. */
	outline: var(--slk-tier-ring-w) var(--slk-tier-ring-style) var(--slk-tier-ring);
	outline-offset: var(--slk-tier-ring-offset);
	box-shadow: var(--slk-tier-shadow, 0 0 transparent);
}

.slk-tier__badge {
	position: absolute;
	top: 0;
	left: var(--slk-tier-badge-left);
	z-index: 1;
	transform: translateY(-50%);
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--slk-tier-ring);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

/* --- Cabecera: etiqueta + insignia "junto a la etiqueta" --- */

.slk-tier__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: var(--slk-tier-justify, flex-start);
	gap: 4px 12px;
	/* Distancia hasta el título: el panel da la distancia total y aquí se descuenta el
	   espacio general entre elementos (el margen puede ser negativo). */
	margin-bottom: var(--slk-tier-head-mb, 0px);
}

/* Insignia junto a la etiqueta: solo texto, pegada a ella (o a la derecha si el panel
   lo pide con --slk-tier-badge-ml: auto). Especificidad alta solo para anular lo
   estructural de la insignia "encima de la tarjeta" (posición, fondo, relleno);
   color y tipografía siguen viniendo del panel. */
.elementor-element.slk-tiers-badge-inline .slk-tiers .slk-tier__badge {
	position: static;
	transform: none;
	margin-left: var(--slk-tier-badge-ml, 0px);
	padding: 0;
	border-radius: 0;
	background: none;
	white-space: normal;
}

/* --- Caja con lista --- */

.slk-tier__box {
	margin-top: var(--slk-tier-box-mt);
	padding: 18px 20px;
	border-radius: 20px;
	background: rgba(17, 27, 46, 0.04);
}

.slk-tier__box-title {
	margin: 0;
	padding-bottom: var(--slk-tier-list-pad);
	font-size: 14px;
	font-weight: 600;
}

.slk-tier__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slk-tier__list li {
	margin: 0;
	padding: var(--slk-tier-list-pad) 0;
	border-top: 1px solid var(--slk-tier-list-line);
	line-height: 1.5;
}

.slk-tier__list li::before,
.slk-tier__list li::marker {
	content: none;
}

/* Sin título de lista, el primer punto no lleva línea encima. */
.slk-tier__list:first-child li:first-child {
	padding-top: 0;
	border-top: 0;
}

.slk-tier__list li:last-child {
	padding-bottom: 0;
}

/* --- Símbolo entre niveles ("+") --- */

.slk-tier__connector {
	position: absolute;
	top: var(--slk-tier-con-top);
	left: var(--slk-tier-con-left);
	z-index: 2;
	display: var(--slk-tier-con-display);
	align-items: center;
	justify-content: center;
	width: var(--slk-tier-con-size);
	height: var(--slk-tier-con-size);
	border-radius: 50%;
	background: #0e1b2e;
	color: #fff;
	font-size: calc(var(--slk-tier-con-size) * 0.55);
	font-weight: 700;
	line-height: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
}