.boll-eslabon { background: var(--boll-color-bg-alt); overflow: hidden; isolation: isolate; }
.boll-eslabon::before {
	content: ''; position: absolute; z-index: 0; pointer-events: none; inset: -20% -10% auto -10%; height: 90%;
	background: radial-gradient(ellipse 50% 55% at 50% 40%, color-mix(in srgb, var(--boll-color-primary) 22%, transparent), transparent 70%);
}

/* ---------- Diagrama: vertical en móvil, horizontal desde 768px ---------- */
.boll-eslabon__diagram {
	list-style: none; margin: 0 auto clamp(3rem, 7vw, 5rem); padding: 0;
	display: flex; flex-direction: column; align-items: center;
}

.boll-eslabon__node {
	position: relative; display: grid; justify-items: center; gap: .55rem;
	padding: 1.4rem 1.75rem 1.25rem; min-width: 11.5rem; text-align: center; cursor: default;
	border: 1.5px solid var(--boll-color-border-strong); border-radius: calc(var(--boll-radius) + 4px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--boll-color-surface-2) 92%, transparent), var(--boll-color-surface));
	transition: transform .35s var(--boll-ease), border-color .35s var(--boll-ease), box-shadow .35s var(--boll-ease);
}
.boll-eslabon__icon {
	display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
	color: var(--boll-color-primary); background: var(--boll-color-primary-soft);
	border: 1px solid color-mix(in srgb, var(--boll-color-primary) 35%, transparent);
	transition: background .35s var(--boll-ease), color .35s var(--boll-ease), transform .45s var(--boll-ease);
}
.boll-eslabon__icon svg { width: 1.6rem; height: 1.6rem; }
.boll-eslabon__label {
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display);
	font-size: 1.75rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}
.boll-eslabon__nota { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--boll-color-faint); transition: color .35s; }

/* Hover o foco en una pieza, o una razón que apunta a ella */
.boll-eslabon__node:hover,
.boll-eslabon__node:focus-visible,
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="1"]:hover) .boll-eslabon__node[data-n="1"],
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="2"]:hover) .boll-eslabon__node[data-n="2"],
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="3"]:hover) .boll-eslabon__node[data-n="3"] {
	transform: translateY(-6px); border-color: var(--boll-color-primary);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--boll-color-primary) 28%, transparent);
}
.boll-eslabon__node:hover .boll-eslabon__icon,
.boll-eslabon__node:focus-visible .boll-eslabon__icon,
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="1"]:hover) .boll-eslabon__node[data-n="1"] .boll-eslabon__icon,
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="2"]:hover) .boll-eslabon__node[data-n="2"] .boll-eslabon__icon,
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="3"]:hover) .boll-eslabon__node[data-n="3"] .boll-eslabon__icon {
	background: var(--boll-color-primary); color: var(--boll-color-text); transform: rotate(-8deg) scale(1.08);
}
.boll-eslabon__node:hover .boll-eslabon__nota,
.boll-eslabon:has(.boll-eslabon__razon[data-apunta]:hover) .boll-eslabon__node:hover .boll-eslabon__nota { color: var(--boll-color-primary); }

/* Conectores */
.boll-eslabon__link { position: relative; width: 2px; height: 3.75rem; flex: none; }
.boll-eslabon__line { position: absolute; inset: 0; background: var(--boll-color-border-strong); border-radius: 2px; }

/* Conexión sana: una señal viaja de una pieza a la siguiente */
.boll-eslabon__pulse {
	position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
	background: var(--boll-color-primary); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--boll-color-primary) 70%, transparent);
	animation: boll-eslabon-signal-y 2.2s var(--boll-ease) infinite;
}
@keyframes boll-eslabon-signal-y { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }

/* Conexión rota: línea punteada roja que «marcha» y un eslabón partido que late */
.boll-eslabon__link--roto .boll-eslabon__line {
	background: repeating-linear-gradient(to bottom, var(--boll-color-primary) 0 6px, transparent 6px 12px);
	background-size: 100% 24px; animation: boll-eslabon-march-y 1.2s linear infinite; opacity: .8;
}
@keyframes boll-eslabon-march-y { to { background-position: 0 24px; } }
.boll-eslabon__break {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	color: var(--boll-color-text); background: var(--boll-color-primary);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--boll-color-primary) 60%, transparent);
	animation: boll-eslabon-latido 2s ease-out infinite;
	transition: transform .35s var(--boll-ease);
}
.boll-eslabon__break svg { width: 1.2rem; height: 1.2rem; }
@keyframes boll-eslabon-latido {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--boll-color-primary) 55%, transparent); }
	70%  { box-shadow: 0 0 0 16px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.boll-eslabon__link--roto:hover .boll-eslabon__break,
.boll-eslabon:has(.boll-eslabon__razon[data-apunta="roto"]:hover) .boll-eslabon__break {
	transform: scale(1.25) rotate(-12deg); animation: boll-eslabon-tiembla .45s ease-in-out 2, boll-eslabon-latido 2s ease-out infinite;
}
@keyframes boll-eslabon-tiembla { 0%, 100% { translate: -50% -50%; } 25% { translate: -58% -50%; } 75% { translate: -42% -50%; } }

/* ---------- Razones ---------- */
.boll-eslabon__razones { display: grid; gap: var(--boll-space-gap); }
.boll-eslabon__razon {
	position: relative; overflow: hidden; padding: 1.75rem;
	border: 1px solid var(--boll-color-border); border-radius: var(--boll-radius);
	background: color-mix(in srgb, var(--boll-color-surface) 70%, transparent);
	transition: transform .35s var(--boll-ease), border-color .35s var(--boll-ease), box-shadow .35s var(--boll-ease);
}
/* Brillo rojo que entra desde la esquina al pasar el cursor */
.boll-eslabon__razon::before {
	content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s var(--boll-ease);
	background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--boll-color-primary) 18%, transparent), transparent 60%);
}
.boll-eslabon__razon { isolation: isolate; }
.boll-eslabon__razon:hover { transform: translateY(-6px); border-color: var(--boll-color-primary); box-shadow: var(--boll-shadow); }
.boll-eslabon__razon:hover::before { opacity: 1; }

.boll-eslabon__razon-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.boll-eslabon__razon-icon {
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px;
	color: var(--boll-color-primary); background: var(--boll-color-primary-soft);
	transition: background .35s var(--boll-ease), color .35s var(--boll-ease), transform .45s var(--boll-ease);
}
.boll-eslabon__razon-icon svg { width: 1.45rem; height: 1.45rem; }
.boll-eslabon__razon:hover .boll-eslabon__razon-icon { background: var(--boll-color-primary); color: var(--boll-color-text); transform: rotate(-8deg) scale(1.08); }
.boll-eslabon__num {
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); font-size: 2.75rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 1px var(--boll-color-border-strong); transition: color .35s, -webkit-text-stroke-color .35s;
}
.boll-eslabon__razon:hover .boll-eslabon__num { color: var(--boll-color-primary); -webkit-text-stroke-color: var(--boll-color-primary); }
.boll-eslabon__razon-title { font-family: var(--boll-font-sub); font-size: var(--boll-fs-h3); font-weight: var(--boll-fw-sub); line-height: var(--boll-lh-tight); margin-bottom: .6rem; }
.boll-eslabon__razon p { color: var(--boll-color-muted); line-height: var(--boll-lh-body); }

@media (min-width: 768px) {
	.boll-eslabon__diagram { flex-direction: row; justify-content: center; align-items: center; }
	.boll-eslabon__link { width: clamp(4.5rem, 10vw, 8rem); height: 2px; }
	.boll-eslabon__pulse { top: 50%; left: 0; margin: -4px 0 0; animation-name: boll-eslabon-signal-x; }
	.boll-eslabon__link--roto .boll-eslabon__line {
		background: repeating-linear-gradient(to right, var(--boll-color-primary) 0 6px, transparent 6px 12px);
		background-size: 24px 100%; animation-name: boll-eslabon-march-x;
	}
	.boll-eslabon__razones { grid-template-columns: repeat(3, 1fr); }
}
@keyframes boll-eslabon-signal-x { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes boll-eslabon-march-x { to { background-position: 24px 0; } }

@media (prefers-reduced-motion: reduce) {
	.boll-eslabon__pulse, .boll-eslabon__break, .boll-eslabon__link--roto .boll-eslabon__line { animation: none; }
	.boll-eslabon__node, .boll-eslabon__razon, .boll-eslabon__icon, .boll-eslabon__razon-icon, .boll-eslabon__break { transition: none; }
	.boll-eslabon__node:hover, .boll-eslabon__razon:hover { transform: none; }
}