/* =============================================================================
   Hero - caso de éxito — Figma Design-Profic-Mike
   Desktop 370:5573 · Tablet 370:5781 · Mobile 370:5989
   Card 1040 · gap track 400 · visual 500 · pad sección 90/120
   ============================================================================= */

.elementor-widget-profic_hero_caso_exito,
.elementor-widget-profic_hero_caso_exito > .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.profic-hce-section {
	--profic-hce-card-w: 1040px;
	--profic-hce-gap: 400px;
	--profic-hce-nav: 70px;
	--profic-hce-ease: cubic-bezier(0.77, 0, 0.175, 1);
	--profic-hce-duration: 800ms;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 90px 0 100px;
	box-sizing: border-box;
	overflow-x: clip;
	overflow-y: hidden;
	background-color: #090511;
	color: #ffffff;
	z-index: 1;
}

.profic-hce-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

/* Radial Figma: glow púrpura derecha */
.profic-hce-bg-glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 70% 80% at 95% 40%,
			rgba(79, 16, 205, 0.55) 0%,
			rgba(79, 16, 205, 0.18) 40%,
			rgba(9, 5, 17, 0) 72%
		);
}

.profic-hce-bg-stroke {
	position: absolute;
	left: 315px;
	top: -625px;
	width: 964px;
	height: 1088px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(92.29deg);
	opacity: 0.9;
}

.profic-hce-bg-stroke svg {
	display: block;
	width: 1237px;
	height: 993px;
	max-width: none;
}

.profic-hce-carousel {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Clip peeks laterales; dejar Y visible para no cortar el chasis del mockup */
	overflow-x: clip;
	overflow-y: visible;
}

.profic-hce-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--profic-hce-gap);
	width: max-content;
	transform: translate3d(0, 0, 0);
	transition: transform var(--profic-hce-duration) var(--profic-hce-ease);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.profic-hce-track {
		transition: none;
	}
}

.profic-hce-card {
	position: relative;
	flex: 0 0 var(--profic-hce-card-w);
	width: var(--profic-hce-card-w);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	column-gap: 90px;
	row-gap: 30px;
	padding: 40px 0;
	box-sizing: border-box;
	border-radius: 42px;
	overflow: visible;
}

.profic-hce-card.layout-visual-left,
.profic-hce-card.layout-visual_left {
	flex-direction: row;
}

.profic-hce-content {
	flex: 1 1 0;
	min-width: 0;
	max-width: 450px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	position: relative;
	z-index: 3;
}

.profic-hce-logo {
	height: var(--hce-logo-h, 15px);
	max-height: var(--hce-logo-h, 15px);
	width: auto;
	display: flex;
	align-items: center;
}

.profic-hce-logo img {
	display: block;
	height: var(--hce-logo-h, 15px) !important;
	max-height: var(--hce-logo-h, 15px) !important;
	width: auto !important;
	max-width: 200px;
	object-fit: contain;
}

.profic-hce-title {
	margin: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 36px;
	line-height: 1.2;
	color: #ffffff;
}

.profic-hce-desc {
	display: none; /* Figma 370:5573 — descripción oculta en el Hero */
	margin: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.2px;
	color: #969696;
}

.profic-hce-section.show-desc .profic-hce-desc {
	display: block;
}

/* Stats — grid 2 col (valores + labels) */
.profic-hce-stats {
	display: grid;
	grid-template-columns: 157px 157px;
	column-gap: 25px;
	row-gap: 0;
	width: max-content;
	max-width: 100%;
	padding: 0 0 12px;
	box-sizing: border-box;
}

.profic-hce-card.stats-gap-50 .profic-hce-stats {
	grid-template-columns: minmax(0, max-content) minmax(0, max-content);
	column-gap: 50px;
}

.profic-hce-card.stats-gap-50 .profic-hce-stats-labels {
	column-gap: 80px;
}

.profic-hce-stats-values,
.profic-hce-stats-labels {
	display: contents;
}

.profic-hce-stat-val {
	margin: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 200;
	font-size: 64px;
	line-height: 1.2;
	white-space: nowrap;
	background-image: linear-gradient(180deg, #4700d6 0%, #7235eb 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}

.profic-hce-stat-lbl {
	margin: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.24;
	color: #ffffff;
	width: 157px;
	max-width: 157px;
	box-sizing: border-box;
}

.profic-hce-card.stats-gap-50 .profic-hce-stat-lbl {
	width: auto;
	max-width: 157px;
}

.profic-hce-cta-wrap {
	width: 100%;
}

/* Boton Exito — glass; borde ::after (sin grow en hover) */
.profic-hce-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 50px;
	min-height: 50px;
	padding: 15px 24px;
	border: none;
	border-radius: 53px;
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transform: none;
	box-shadow: none;
	transition: background-color 0.3s ease-in;
}

.profic-hce-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1.6px solid rgba(255, 255, 255, 0.22);
	border-radius: inherit;
	pointer-events: none;
}

.profic-hce-cta:hover,
.profic-hce-cta:focus-visible,
.profic-hce-cta:active {
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	transform: none !important;
	scale: 1 !important;
	box-shadow: none !important;
	outline: none;
}

/* Frame B/C Figma Desktop: 500×500 — mockups en px exactos (Figma Dev Mode) */
.profic-hce-visual {
	position: relative;
	flex: 0 0 500px;
	flex-shrink: 0;
	width: 500px;
	min-width: 500px;
	height: 500px;
	border-radius: 60px;
	box-sizing: border-box;
	overflow: visible;
	isolation: isolate;
}

.profic-hce-chart {
	position: absolute;
	left: 30px;
	top: 86px;
	width: 317px;
	height: 328px;
	object-fit: contain;
	pointer-events: none;
	z-index: 0;
	max-width: none !important;
}

.profic-hce-section .profic-hce-mockup,
.profic-hce-visual .profic-hce-mockup {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	object-fit: contain;
	/* Anula img { max-width:100% } de tema/Elementor — sin esto el mockup queda a 500px */
	max-width: none !important;
	max-height: none !important;
	right: auto;
	/* Vars editables desde Elementor (vacío = fallback Figma por breakpoint) */
	left: var(--hce-mx, -75px);
	top: var(--hce-my, 10px);
	width: var(--hce-mw, 759px);
	height: var(--hce-mh, 479px);
	transform: rotate(var(--hce-mr, 0deg));
	transform-origin: center center;
}

/* Ricoh MacBook — defaults Figma desktop */
.profic-hce-card.mockup-laptop .profic-hce-mockup {
	left: var(--hce-mx, -75px);
	top: var(--hce-my, 10px);
	width: var(--hce-mw, 759px);
	height: var(--hce-mh, 479px);
	transform: rotate(var(--hce-mr, 0deg));
}

/* Farmashop iPhone */
.profic-hce-card.mockup-phone .profic-hce-mockup {
	left: var(--hce-mx, -123px);
	top: var(--hce-my, calc(50% - 350.365px + 2.37px));
	width: var(--hce-mw, 643.81px);
	height: var(--hce-mh, 700.73px);
	transform: rotate(var(--hce-mr, 12.46deg));
}

/* QAlified MacBook */
.profic-hce-card.layout-visual-left.mockup-laptop .profic-hce-mockup,
.profic-hce-card.layout-visual_left.mockup-laptop .profic-hce-mockup {
	left: var(--hce-mx, -260.11px);
	top: var(--hce-my, -165.13px);
	width: var(--hce-mw, 752.65px);
	height: var(--hce-mh, 626.25px);
	transform: rotate(var(--hce-mr, 23.74deg));
}

.profic-hce-card.layout-visual-left.mockup-laptop .profic-hce-chart,
.profic-hce-card.layout-visual_left.mockup-laptop .profic-hce-chart {
	display: none;
}

.profic-hce-section.nav-hidden .profic-hce-nav {
	display: none !important;
}

/* Nav — visibles en bordes del viewport (no círculo negro sobre fondo negro) */
.profic-hce-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--profic-hce-nav);
	height: var(--profic-hce-nav);
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 40;
	outline: none;
	box-shadow: none;
	transition: none;
	opacity: 1;
	pointer-events: auto;
}

.profic-hce-nav svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.profic-hce-nav:hover,
.profic-hce-nav:focus-visible,
.profic-hce-nav:active {
	transform: translateY(-50%) !important;
	scale: 1 !important;
	box-shadow: none !important;
	outline: none;
}

.profic-hce-nav:hover svg circle,
.profic-hce-nav:focus-visible svg circle {
	fill-opacity: 0.28;
}

.profic-hce-prev {
	left: max(16px, calc((100% - var(--profic-hce-card-w)) / 2 - 90px));
	right: auto;
}

.profic-hce-next {
	right: max(16px, calc((100% - var(--profic-hce-card-w)) / 2 - 90px));
	left: auto;
}

/* TABLET — Figma 800: card 780 · visual 375 · gap 300 · scale 0.75 */
@media (min-width: 768px) and (max-width: 1279px) {
	.profic-hce-section {
		--profic-hce-card-w: min(780px, calc(100vw - 96px));
		--profic-hce-gap: 300px;
		--profic-hce-nav: 44px;
		padding: 90px 48px 140px;
		overflow-x: clip;
		overflow-y: visible;
	}

	.profic-hce-carousel {
		overflow: visible;
	}

	.profic-hce-card {
		max-width: 100%;
		min-width: 0;
		column-gap: 24px;
		row-gap: 22.5px;
		padding: 30px 8px;
		border-radius: 31.5px;
		overflow: visible;
	}

	.profic-hce-content {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		gap: 18px;
		overflow: visible;
	}

	.profic-hce-title {
		font-size: 27px;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.profic-hce-desc {
		font-size: 15px;
		white-space: normal;
		overflow-wrap: break-word;
	}

	.profic-hce-stats {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 16px;
		width: 100%;
		max-width: 100%;
	}

	.profic-hce-stat-val {
		font-size: clamp(32px, 4.6vw, 48px);
		white-space: nowrap;
	}

	.profic-hce-stat-lbl {
		font-size: 9.75px;
		width: auto;
		max-width: 100%;
		white-space: normal;
	}

	.profic-hce-cta {
		height: 37.5px;
		min-height: 37.5px;
		padding: 11px 18px;
		font-size: 12px;
		max-width: 100%;
		white-space: nowrap;
	}

	.profic-hce-visual {
		flex: 0 1 320px;
		width: min(375px, 45%);
		min-width: 0;
		height: min(375px, 45vw);
		border-radius: 0;
		overflow: visible;
		isolation: auto;
	}

	.profic-hce-chart {
		left: 22.5px;
		top: 64px;
		width: 237.75px;
		height: 246.31px;
	}

	/*
	 * Fallback Figma tablet. Sin !important: los sliders responsive de Elementor
	 * ({{WRAPPER}} {{CURRENT_ITEM}} .profic-hce-mockup) tienen más especificidad.
	 */
	.profic-hce-card.mockup-laptop .profic-hce-mockup {
		left: var(--hce-mx, -56.25px);
		top: var(--hce-my, 7.5px);
		width: var(--hce-mw, 569.25px);
		height: var(--hce-mh, 359.25px);
		transform: rotate(var(--hce-mr, 0deg));
	}

	.profic-hce-card.mockup-phone .profic-hce-mockup {
		left: var(--hce-mx, -92.25px);
		top: var(--hce-my, calc(50% - 262.775px + 2.27px));
		width: var(--hce-mw, 482.86px);
		height: var(--hce-mh, 525.55px);
		transform: rotate(var(--hce-mr, 12.46deg));
	}

	.profic-hce-card.layout-visual-left.mockup-laptop .profic-hce-mockup,
	.profic-hce-card.layout-visual_left.mockup-laptop .profic-hce-mockup {
		left: var(--hce-mx, -195.08px);
		top: var(--hce-my, -123.85px);
		width: var(--hce-mw, 564.49px);
		height: var(--hce-mh, 469.69px);
		transform: rotate(var(--hce-mr, 23.74deg));
	}

	.profic-hce-bg-stroke {
		left: 10%;
		opacity: 0.5;
	}

	.profic-hce-prev {
		left: 16px;
		right: auto;
	}

	.profic-hce-next {
		right: 16px;
		left: auto;
	}
}

/* MOBILE — texto arriba, mockup en 2ª fila (el row desktop no entra a lo ancho) */
@media (max-width: 767px) {
	.profic-hce-section {
		--profic-hce-card-w: calc(100vw - 28px);
		--profic-hce-gap: 20px;
		--profic-hce-nav: 44px;
		padding: 72px 14px 110px;
		overflow-x: clip;
		overflow-y: visible;
	}

	.profic-hce-carousel {
		overflow-x: clip;
		overflow-y: visible;
	}

	.profic-hce-track {
		align-items: flex-start;
	}

	.profic-hce-card,
	.profic-hce-card.layout-visual-left,
	.profic-hce-card.layout-visual_left {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		padding: 28px 18px 20px;
		column-gap: 0;
		row-gap: 20px;
		overflow: visible;
		border-radius: 32px;
	}

	.profic-hce-content {
		order: 1;
		flex: none;
		width: 100%;
		max-width: none;
		align-items: flex-start;
		text-align: left;
		gap: 18px;
	}

	.profic-hce-visual {
		order: 2;
		flex: none;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		height: min(280px, 78vw);
		border-radius: 0;
		overflow: visible;
		isolation: auto;
	}

	.profic-hce-title {
		font-size: 28px;
		text-align: left;
	}

	.profic-hce-desc {
		font-size: 15px;
		text-align: left;
	}

	.profic-hce-stats {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		max-width: 100%;
		column-gap: 16px;
		justify-items: start;
	}

	.profic-hce-card.stats-gap-50 .profic-hce-stats {
		column-gap: 16px;
	}

	.profic-hce-stat-val {
		font-size: 40px;
		text-align: left;
	}

	.profic-hce-stat-lbl {
		width: auto;
		max-width: none;
		text-align: left;
		font-size: 12px;
	}

	.profic-hce-cta-wrap {
		display: block;
	}

	.profic-hce-chart {
		left: 8%;
		top: 12%;
		width: 70%;
		height: auto;
		max-width: 220px;
	}

	.profic-hce-card.mockup-laptop .profic-hce-mockup,
	.profic-hce-card.layout-visual-left.mockup-laptop .profic-hce-mockup,
	.profic-hce-card.layout-visual_left.mockup-laptop .profic-hce-mockup,
	.profic-hce-card.mockup-phone .profic-hce-mockup {
		left: var(--hce-mx, 6%);
		top: var(--hce-my, 8%);
		width: var(--hce-mw, 110%);
		height: auto;
		max-width: none;
		transform: rotate(var(--hce-mr, 0deg));
	}

	.profic-hce-card.mockup-phone .profic-hce-mockup {
		left: var(--hce-mx, 18%);
		width: var(--hce-mw, 64%);
		transform: rotate(var(--hce-mr, 12.46deg));
	}

	.profic-hce-nav {
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.profic-hce-nav:hover,
	.profic-hce-nav:focus-visible,
	.profic-hce-nav:active {
		transform: none !important;
	}

	.profic-hce-prev {
		left: 16px;
		right: auto;
	}

	.profic-hce-next {
		left: auto;
		right: 16px;
	}

	.profic-hce-bg-stroke {
		opacity: 0.35;
	}
}