/* Casos de éxito: encabezado y bloques. Mantiene el diseño original, con iconos y animaciones. */

/* Línea divisoria (reemplaza .separador_interno): degradado que se «dibuja» al aparecer */
.boll-caso__divider {
	position: absolute; left: 5%; right: 5%; bottom: 0; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--boll-color-text) 45%, transparent), transparent);
}

/* ---------- Encabezado ---------- */
.boll-caso-hero { overflow: clip; padding-top: calc(var(--boll-header-h) + clamp(2.5rem, 7vw, 5rem)); }
.boll-caso-hero::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(50% 70% at 50% 0%, color-mix(in srgb, var(--boll-color-primary) 16%, transparent), transparent 70%);
}
.boll-caso-hero__inner { display: grid; justify-items: center; text-align: center; gap: 1rem; padding-bottom: .5rem; }
.boll-caso-hero__back {
	display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .5rem;
	font-size: var(--boll-fs-small); font-weight: 700; color: var(--boll-color-faint); transition: color .25s, gap .25s var(--boll-ease);
}
.boll-caso-hero__back svg { width: 1rem; height: 1rem; }
.boll-caso-hero__back:hover { color: var(--boll-color-text); gap: .6rem; }
.boll-caso-hero__metric {
	display: inline-flex; align-items: center; gap: .65rem;
	font-family: var(--boll-font-sub); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
	font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.1; color: var(--boll-color-primary);
}
.boll-caso-hero__metric-icon {
	display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
	background: var(--boll-color-primary-soft); border: 1px solid color-mix(in srgb, var(--boll-color-primary) 35%, transparent);
	animation: boll-caso-latido 2.6s ease-out infinite;
}
.boll-caso-hero__metric-icon svg { width: 1.3rem; height: 1.3rem; }
@keyframes boll-caso-latido {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--boll-color-primary) 45%, transparent); }
	70%  { box-shadow: 0 0 0 14px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.boll-caso-hero__title {
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); text-transform: uppercase;
	font-size: clamp(3.25rem, 8vw, 6rem); line-height: .92; letter-spacing: .01em;
}
.boll-caso-hero__lead { max-width: 44rem; margin-top: 0; }
.boll-caso-hero .boll-caso__divider { position: relative; left: auto; right: auto; display: block; width: 90%; margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ---------- Bloques ---------- */
.boll-caso { overflow: hidden; overflow: clip; } /* clip y no hidden: hidden rompe el «sticky» del título */
.boll-caso__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

.boll-caso__icon {
	display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; border-radius: 16px;
	color: var(--boll-color-primary); background: var(--boll-color-primary-soft);
	border: 1px solid color-mix(in srgb, var(--boll-color-primary) 30%, transparent);
	transition: transform .5s var(--boll-ease), background .35s, color .35s;
}
.boll-caso__icon svg { width: 1.5rem; height: 1.5rem; }
.boll-caso__head:hover .boll-caso__icon { transform: rotate(-8deg) scale(1.08); background: var(--boll-color-primary); color: var(--boll-color-text); }
.boll-caso__title {
	font-family: var(--boll-font-sub); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.01em;
}
.boll-caso__title em { font-style: normal; color: var(--boll-color-primary); }
.boll-caso__btn { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.boll-caso__btn svg { transition: transform .3s var(--boll-ease); }
.boll-caso__btn:hover svg { transform: translate(3px, -3px); }

/* Texto enriquecido del caso */
.boll-caso__body { counter-reset: boll-paso; color: var(--boll-color-muted); font-size: 1.05rem; line-height: var(--boll-lh-body); }
.boll-caso__body > * + * { margin-top: 1.1rem; }
.boll-caso__body b, .boll-caso__body strong { color: var(--boll-color-text); font-weight: 700; }
.boll-caso__body i, .boll-caso__body em { color: var(--boll-color-text); }
.boll-caso__body p:has(> i:only-child), .boll-caso__body blockquote {
	position: relative; padding: 1rem 1.25rem 1rem 3.25rem; border-radius: var(--boll-radius-sm);
	background: var(--boll-color-primary-soft); border-left: 3px solid var(--boll-color-primary); color: var(--boll-color-text);
}
.boll-caso__body p:has(> i:only-child)::before, .boll-caso__body blockquote::before {
	content: '“'; position: absolute; left: 1rem; top: .35rem; font-family: var(--boll-font-display); font-size: 2.75rem; line-height: 1; color: var(--boll-color-primary);
}

/* Listas numeradas: número en un círculo rojo */
.boll-caso__body ol { list-style: none; padding: 0; display: grid; gap: .9rem; } /* numeración continua entre listas */
.boll-caso__body ol > li {
	counter-increment: boll-paso; position: relative; padding: .85rem 1rem .85rem 3.5rem;
	border: 1px solid var(--boll-color-border); border-radius: var(--boll-radius-sm);
	background: color-mix(in srgb, var(--boll-color-surface) 70%, transparent);
	transition: border-color .3s var(--boll-ease), transform .3s var(--boll-ease), background .3s;
}
.boll-caso__body ol > li::before {
	content: counter(boll-paso); position: absolute; left: .85rem; top: .8rem;
	display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); font-size: 1.15rem; line-height: 1;
	color: var(--boll-color-primary); background: var(--boll-color-primary-soft); border: 1px solid color-mix(in srgb, var(--boll-color-primary) 40%, transparent);
	transition: background .3s, color .3s, transform .4s var(--boll-ease);
}
.boll-caso__body ol > li:hover { border-color: color-mix(in srgb, var(--boll-color-primary) 55%, transparent); transform: translateX(4px); background: var(--boll-color-surface); }
.boll-caso__body ol > li:hover::before { background: var(--boll-color-primary); color: var(--boll-color-text); transform: scale(1.1); }
.boll-caso__body ol > li > b:first-child, .boll-caso__body ol > li > strong:first-child { display: block; margin-bottom: .2rem; }
.boll-caso__body ol > li > b:first-child + br, .boll-caso__body ol > li > strong:first-child + br { display: none; }

/* Viñetas: check rojo dibujado con máscara (toma el color del token) */
.boll-caso__body ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.boll-caso__body ul > li { position: relative; padding-left: 1.9rem; }
.boll-caso__body ul > li::before {
	content: ''; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--boll-color-primary-soft);
}
.boll-caso__body ul > li::after {
	content: ''; position: absolute; left: .25rem; top: calc(.2em + .25rem); width: .75rem; height: .75rem; background: var(--boll-color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boll-caso__body ol ul { margin-top: .6rem; }
.boll-caso__body ol ul > li::before { background: transparent; }

/* Celular con video: la imagen tiene la pantalla transparente y el video va detrás */
.boll-caso__phone { position: relative; margin: 0; pointer-events: none; aspect-ratio: 1400 / 797; }
.boll-caso__stage { position: absolute; inset: 0; }
.boll-caso__frame, .boll-caso__video { animation: boll-caso-flota 7s ease-in-out infinite; }
.boll-caso__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.boll-caso__phone .boll-caso__stage .boll-caso__video { /* especificidad alta: Elementor fija video{width:100%} */
	position: absolute; z-index: 0; left: 41.3%; top: 18.8%; width: 15.3%; max-width: none; height: 56.4%;
	object-fit: cover; border-radius: 7% / 3.6%; background: var(--boll-color-surface-2);
}
@keyframes boll-caso-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* Funde los bordes de la foto con el fondo */
.boll-caso__phone {
	-webkit-mask-image: radial-gradient(closest-side, black 72%, transparent);
	        mask-image: radial-gradient(closest-side, black 72%, transparent);
}

/* Móvil y tablet: todo en columna; el celular se recorta al centro */
@media (max-width: 1024px) {
	/* Recorte vertical centrado en el celular (la foto original es muy apaisada) */
	.boll-caso--celular .boll-caso__phone {
		aspect-ratio: 4 / 5; max-height: 34rem; width: 100%; overflow: hidden; justify-self: center;
		-webkit-mask-image: linear-gradient(transparent, black 12%, black 88%, transparent);
		        mask-image: linear-gradient(transparent, black 12%, black 88%, transparent);
	}
	.boll-caso--celular .boll-caso__stage { inset: auto; left: 50%; top: 50%; width: 260%; aspect-ratio: 1400 / 797; translate: -48.9% -46.8%; }
	.boll-caso--celular .boll-caso__head { order: 1; }
	.boll-caso--celular .boll-caso__phone { order: 2; }
	.boll-caso--celular .boll-caso__body { order: 3; }
}

@media (min-width: 1025px) {
	/* Diseño «celular»: el celular ocupa el centro y el texto lo rodea */
	.boll-caso--celular { padding-block: clamp(2rem, 4vw, 3rem); }
	.boll-caso--celular .boll-caso__grid { grid-template-columns: 1fr 15rem 1fr; min-height: calc(min(1250px, 95vw) * .569); }
	.boll-caso--celular .boll-caso__head { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
	.boll-caso--celular .boll-caso__body { grid-column: 3; grid-row: 1; position: relative; z-index: 2; }
	.boll-caso--celular .boll-caso__phone {
		position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(1250px, 95vw); z-index: 0;
	}
	.boll-js .boll-caso--celular .boll-caso__phone.boll-reveal { transform: none; }

	/* Diseño «texto»: título y botón fijos mientras se lee */
	.boll-caso--texto .boll-caso__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); align-items: start; gap: clamp(2.5rem, 6vw, 5rem); }
	.boll-caso--texto .boll-caso__head { position: sticky; top: calc(var(--boll-header-h) + 2rem); }
}

@media (prefers-reduced-motion: reduce) {
	.boll-caso__frame, .boll-caso__video, .boll-caso-hero__metric-icon { animation: none; }
	.boll-caso__body ol > li, .boll-caso__body ol > li::before, .boll-caso__icon { transition: none; }
	.boll-caso__body ol > li:hover { transform: none; }
}