/* ============================================================
   home-inmersiva.css · v4 (light/dark rhythm)

   Direction:
   - Alterna secciones CLARAS (cream) y OSCURAS (ink) → respiración + ritmo
   - UN solo acento de color: rojo CapturoX (#e0473d)
   - Neutros: cream / muted warm grey / deep ink
   - Sombras suaves en lugar de glassmorphism
   - Mockup real del dashboard en hero (no solo texto)
   ============================================================ */

:root {
	/* Paleta — un único acento + neutros cálidos */
	--hx-cream:     #f7f5ef;
	--hx-cream-2:   #efece4;
	--hx-line-l:    #e3e0d6;
	--hx-fg-dark:   #1a1a25;
	--hx-fg-mid:    #4a4a58;
	--hx-mute-l:    #7a7888;

	--hx-ink:       #0a0a14;
	--hx-ink-2:     #14141f;
	--hx-fg-light:  #f7f5ef;
	--hx-mute-d:    #8a87a0;
	--hx-line-d:    rgba(255,255,255,.09);

	--hx-red:       #e0473d;
	--hx-red-deep:  #c43227;
	--hx-red-soft:  rgba(224,71,61,.14);
	--hx-red-glow:  rgba(224,71,61,.4);

	--hx-radius:    14px;
	--hx-easing:    cubic-bezier(.22,.61,.36,1);

	--hx-shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -12px rgba(20,20,30,.12);
	--hx-shadow-hover: 0 1px 0 rgba(0,0,0,.04), 0 24px 40px -20px rgba(20,20,30,.22);
}

html, body { overflow-x: hidden; background: var(--hx-cream); }
html.lenis { scroll-behavior: auto; }

/* OJO: NO poner perspective en .hx-root.
   perspective crea un containing block para position:fixed → rompe
   los pins de ScrollTrigger (el elemento "pinneado" queda anclado a
   .hx-root en lugar de al viewport, dando salto raro + pantalla negra).
   Los tilts y el coverflow tienen su propio perspective ya. */

.hx-root {
	background: var(--hx-cream);
	color: var(--hx-fg-dark);
	font-family: 'Roboto', system-ui, sans-serif;
	overflow: hidden;
	position: relative;
}
.hx-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
	box-sizing: border-box;
}
.hx-section { position: relative; }

/* Grano ultra sutil reutilizable */
.hx-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .35;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}


/* ============================================================
   Tipografía base
   ============================================================ */
.hx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	letter-spacing: .25em;
	color: var(--hx-mute-l);
	text-transform: uppercase;
	margin: 0 0 22px;
}
.hx-eyebrow--light { color: var(--hx-mute-d); }
.hx-eyebrow__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--hx-red);
	box-shadow: 0 0 0 0 var(--hx-red-glow);
	animation: hx-pulse 2s infinite;
}
@keyframes hx-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(224,71,61,.55); }
	50%      { box-shadow: 0 0 0 8px rgba(224,71,61,0); }
}

.hx-title {
	color: var(--hx-fg-dark);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin: 0;
	text-wrap: balance;
}
.hx-title--xl { font-size: clamp(38px, 5.5vw, 84px); }
.hx-title--lg { font-size: clamp(32px, 4.2vw, 60px); }
.hx-title--light { color: var(--hx-fg-light); }
.hx-title em {
	font-style: italic;
	color: var(--hx-red);
	white-space: nowrap;
}

.hx-lead {
	color: var(--hx-fg-mid);
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.6;
	max-width: 580px;
	margin: 24px 0 0;
	text-wrap: pretty;
}
.hx-lead--light { color: var(--hx-mute-d); }
.hx-lead strong { color: var(--hx-fg-dark); font-weight: 500; }
.hx-lead--light strong { color: var(--hx-fg-light); }

.hx-section__head {
	max-width: 760px;
	margin: 0 auto 72px;
	text-align: center;
}
.hx-section__head .hx-lead { margin-inline: auto; }


/* ============ Split text ============ */
.hx-word { display: inline-block; line-height: inherit; }
.hx-word > span {
	display: inline-block;
	transform: translateY(36px);
	opacity: 0;
	will-change: transform, opacity;
}


/* ============================================================
   Botones
   ============================================================ */
.hx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hx-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 14.5px;
	text-decoration: none;
	transition: transform .25s var(--hx-easing), box-shadow .25s, background .25s, color .25s;
	border: none;
}
.hx-btn--primary {
	background: var(--hx-fg-dark);
	color: var(--hx-cream);
	box-shadow: 0 10px 24px -10px rgba(20,20,30,.4);
}
.hx-btn--primary:hover {
	background: var(--hx-red);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -10px var(--hx-red-glow);
}
.hx-btn--ghost {
	background: transparent;
	color: var(--hx-fg-dark);
	border: 1px solid var(--hx-line-l);
}
.hx-btn--ghost:hover {
	background: var(--hx-fg-dark);
	color: var(--hx-cream);
	transform: translateY(-2px);
}


/* ============================================================
   1. HERO · LIGHT con preview
   ============================================================ */
.hx-hero {
	min-height: 92vh;
	display: flex;
	align-items: center;
	padding: 100px 32px 80px;
	background: var(--hx-cream);
	overflow: hidden;
	position: relative;
}
.hx-hero__glow {
	position: absolute;
	top: -20%; right: -10%;
	width: 700px; height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--hx-red-soft) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

.hx-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hx-hero__col { max-width: 620px; }

.hx-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--hx-line-l);
	opacity: 0;
}
.hx-trust > div { display: flex; flex-direction: column; gap: 4px; }
.hx-trust b { font-size: 20px; font-weight: 700; color: var(--hx-fg-dark); }
.hx-trust span { font-size: 13px; color: var(--hx-mute-l); }

/* Estados iniciales */
.hx-hero [data-ix="hero-eyebrow"],
.hx-hero [data-ix="hero-lead"],
.hx-hero [data-ix="hero-ctas"],
.hx-hero [data-ix="hero-preview"] { opacity: 0; }


/* ===== Preview "browser-window" estilo Linear ===== */
.hx-hero__preview {
	position: relative;
}
.hx-window {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--hx-shadow-hover);
	border: 1px solid var(--hx-line-l);
	overflow: hidden;
	transform-origin: center;
}
.hx-window__head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--hx-line-l);
	background: var(--hx-cream-2);
}
.hx-window__dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--hx-line-l);
}
.hx-window__dot:nth-child(1) { background: #ff5f57; }
.hx-window__dot:nth-child(2) { background: #ffbd2e; }
.hx-window__dot:nth-child(3) { background: #28c941; }
.hx-window__url {
	margin-left: auto;
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	color: var(--hx-mute-l);
}
.hx-window__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 16px;
}
.hx-tile {
	background: var(--hx-cream-2);
	border-radius: 10px;
	padding: 14px;
	border: 1px solid var(--hx-line-l);
}
.hx-tile--alarm {
	grid-column: 1 / -1;
	background: linear-gradient(135deg, #fff, var(--hx-red-soft));
	border-color: rgba(224,71,61,.25);
}
.hx-tile__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.hx-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Roboto Mono', monospace;
	font-size: 9px;
	letter-spacing: .2em;
	padding: 4px 8px;
	border-radius: 999px;
	font-weight: 600;
}
.hx-pill--red { background: var(--hx-red); color: #fff; }
.hx-pill__dot {
	width: 6px; height: 6px;
	background: #fff;
	border-radius: 50%;
	animation: hx-pulse 1.4s infinite;
}
.hx-tile__time { font-size: 11px; color: var(--hx-mute-l); font-family: 'Roboto Mono', monospace; }
.hx-tile h4 { margin: 0 0 4px; font-size: 15px; color: var(--hx-fg-dark); font-weight: 600; }
.hx-tile p  { margin: 0; font-size: 12px; color: var(--hx-mute-l); }
.hx-tile__cta {
	display: inline-flex;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--hx-red);
	font-weight: 500;
}
.hx-tile__label { font-size: 11px; color: var(--hx-mute-l); text-transform: uppercase; letter-spacing: .1em; }
.hx-tile b { font-size: 22px; color: var(--hx-fg-dark); font-weight: 700; font-family: 'Kanit', sans-serif; font-style: italic; }
.hx-tile--chart .hx-spark { display: block; width: 100%; height: 50px; margin-top: 8px; }
.hx-trend { display: block; margin-top: 8px; font-size: 11px; color: #15a04a; font-weight: 500; }

.hx-toast {
	position: absolute;
	bottom: -28px;
	left: -28px;
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: var(--hx-shadow-hover);
	display: flex;
	gap: 12px;
	align-items: center;
	max-width: 240px;
	animation: hx-float 4s ease-in-out infinite;
}
@keyframes hx-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
.hx-toast__icon {
	width: 32px; height: 32px;
	border-radius: 8px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	display: grid;
	place-items: center;
}
.hx-toast b { display: block; font-size: 13px; font-weight: 600; color: var(--hx-fg-dark); }
.hx-toast span { font-size: 11px; color: var(--hx-mute-l); }


/* ============================================================
   2. STRIP marquee · LIGHT
   ============================================================ */
.hx-strip {
	background: var(--hx-cream);
	padding: 32px 0 40px;
	border-top: 1px solid var(--hx-line-l);
	border-bottom: 1px solid var(--hx-line-l);
}
.hx-strip__title {
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	letter-spacing: .3em;
	color: var(--hx-mute-l);
	margin: 0 0 24px;
}
.hx-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hx-marquee__track {
	display: flex;
	align-items: center;
	gap: 36px;
	width: max-content;
	animation: hx-marquee 50s linear infinite;
}
@keyframes hx-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-33.333%); }
}
.hx-marquee__item {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 26px;
	color: var(--hx-fg-dark);
	opacity: .55;
	white-space: nowrap;
}
.hx-marquee__sep { color: var(--hx-red); font-size: 6px; }


/* ============================================================
   3. STATS · DARK BAND
   ============================================================ */
.hx-stats {
	background: var(--hx-ink);
	padding: clamp(80px, 10vw, 130px) 0;
	overflow: hidden;
	position: relative;
}
.hx-stats__aura {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 20%, var(--hx-red-soft), transparent 50%),
		radial-gradient(ellipse at 20% 80%, rgba(255,255,255,.04), transparent 50%);
	pointer-events: none;
}
.hx-stats__stage { position: relative; }
.hx-stats__head { margin-bottom: 64px; max-width: 720px; }
.hx-stats__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.hx-stat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px;
	border-radius: var(--hx-radius);
	background: rgba(255,255,255,.03);
	border: 1px solid var(--hx-line-d);
	opacity: 0;
	transform: translateY(28px);
	transition: background .25s, border-color .25s;
}
.hx-stat:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.hx-stat__num {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1;
	color: var(--hx-fg-light);
	letter-spacing: -.02em;
}
.hx-stat__label { color: var(--hx-mute-d); font-size: 14px; line-height: 1.5; }


/* ============================================================
   4. WHY · LIGHT bento
   ============================================================ */
.hx-why {
	padding: clamp(100px, 12vw, 150px) 0;
	background: var(--hx-cream);
}
.hx-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(220px, auto);
	gap: 18px;
}
.hx-bento__item {
	position: relative;
	grid-column: span 1;
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 20px;
	padding: 28px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(28px);
	transition: transform .3s var(--hx-easing), box-shadow .3s, border-color .25s;
	box-shadow: var(--hx-shadow-card);
	display: flex;
	flex-direction: column;
}
.hx-bento__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--hx-shadow-hover);
	border-color: transparent;
}

/* Card destacada (01) → ocupa 2x2, fondo con tinte rojo */
.hx-bento__item--xl,
.hx-bento__item--feature {
	grid-column: span 2;
	grid-row: span 2;
	background:
		radial-gradient(circle at 100% 100%, var(--hx-red-soft), transparent 55%),
		linear-gradient(150deg, #fff 0%, var(--hx-cream-2) 100%);
}

/* Card horizontal full-width (06) → cierra el bento.
   Usa grid-areas internas para colocar el icono a la izquierda
   y kicker/h3/p apilados a la derecha. */
.hx-bento__item--wide,
.hx-bento__item--full {
	grid-column: span 4;
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-areas:
		"icon kicker"
		"icon h3"
		"icon p";
	column-gap: 28px;
	row-gap: 4px;
	align-items: center;
	min-height: 160px;
	padding: 32px 36px;
}
.hx-bento__item--wide .hx-bento__kicker,
.hx-bento__item--full .hx-bento__kicker { grid-area: kicker; margin: 0 0 4px; }
.hx-bento__item--wide h3,
.hx-bento__item--full h3 { grid-area: h3; margin: 0 0 8px; font-size: clamp(22px, 2vw, 30px); }
.hx-bento__item--wide p,
.hx-bento__item--full p { grid-area: p; margin: 0; max-width: 720px; }
.hx-bento__item--wide .hx-bento__ic,
.hx-bento__item--full .hx-bento__ic {
	position: static;
	grid-area: icon;
	align-self: center;
	width: 64px; height: 64px;
}

.hx-bento__kicker {
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .25em;
	color: var(--hx-red);
	text-transform: uppercase;
	display: block;
	margin-bottom: 16px;
}
.hx-bento__item h3 {
	color: var(--hx-fg-dark);
	font-size: clamp(20px, 1.7vw, 26px);
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -.015em;
}
.hx-bento__item--xl h3 { font-size: clamp(28px, 2.6vw, 40px); }
.hx-bento__item h3 em { color: var(--hx-red); font-style: italic; white-space: nowrap; }
.hx-bento__item p {
	color: var(--hx-fg-mid);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0;
	max-width: 380px;
}
.hx-bento__ic {
	position: absolute;
	bottom: 24px;
	right: 24px;
	width: 44px; height: 44px;
	border-radius: 10px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	display: grid;
	place-items: center;
	transition: transform .3s var(--hx-easing);
}
.hx-bento__item:hover .hx-bento__ic { transform: rotate(-8deg) scale(1.05); }
.hx-bento__art {
	position: absolute;
	bottom: 28px;
	right: 28px;
	left: 28px;
	width: auto;
	max-width: 360px;
	height: auto;
	opacity: .95;
	pointer-events: none;
}


/* ============================================================
   5. CICLO · 3D COVERFLOW PINNEADO
   ============================================================ */
.hx-cycle {
	background: var(--hx-ink-2);
	position: relative;
	overflow: hidden;
	/* altura natural — el pin de ScrollTrigger añade el scroll extra */
}
.hx-cycle__pin {
	width: 100%;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 24px;
	padding: 80px 0 60px;
	box-sizing: border-box;
}
.hx-cycle__intro {
	align-self: start;
	padding-top: 0;
}
.hx-cycle .hx-coverflow {
	align-self: center;
}
.hx-cycle__intro {
	text-align: center;
	position: relative;
	z-index: 2;
}
.hx-cycle__intro .hx-lead { margin-inline: auto; }


/* ===== Coverflow 3D ===== */
.hx-coverflow {
	position: relative;
	perspective: 1400px;
	perspective-origin: center 45%;
	height: 420px;
}
.hx-coverflow__stage {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}
.hx-coverflow__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 340px;
	height: 380px;
	margin: -190px 0 0 -170px;
	padding: 36px 32px;
	background: linear-gradient(180deg, #1f1d33 0%, #14121f 100%);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--hx-fg-light);
	transform-style: preserve-3d;
	will-change: transform, opacity;
	box-shadow:
		0 -1px 0 rgba(255,255,255,.06) inset,
		0 24px 48px -20px rgba(0,0,0,.55);
}
.hx-coverflow__num {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 78px;
	line-height: 1;
	background: linear-gradient(180deg, var(--hx-red), var(--hx-gold, #ffc864));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -.03em;
}
.hx-coverflow__time {
	display: inline-block;
	width: fit-content;
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .25em;
	color: var(--hx-red);
	text-transform: uppercase;
	padding: 4px 10px;
	background: rgba(224,71,61,.16);
	border-radius: 999px;
}
.hx-coverflow__name {
	font-size: 30px;
	margin: 0;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--hx-fg-light);
}
.hx-coverflow__desc {
	color: var(--hx-mute-d);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.hx-coverflow__icon {
	align-self: flex-start;
	width: 56px; height: 56px;
	border-radius: 14px;
	background: rgba(255,255,255,.06);
	color: var(--hx-red);
	display: grid;
	place-items: center;
	margin-top: auto;
}

/* Barra y dots de progreso */
.hx-coverflow__bar {
	position: absolute;
	bottom: -28px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 3px;
	background: rgba(255,255,255,.1);
	border-radius: 3px;
	overflow: hidden;
}
.hx-coverflow__fill {
	display: block;
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, var(--hx-red), #ffc864);
	transition: width .12s linear;
}
.hx-coverflow__dots {
	position: absolute;
	bottom: -56px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}
.hx-coverflow__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
	transition: background .25s, transform .25s;
}
.hx-coverflow__dot.is-active {
	background: var(--hx-red);
	transform: scale(1.4);
}
.hx-cycle__container {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: start;
}
.hx-cycle__sticky {
	position: sticky;
	top: 120px;
	align-self: start;
}
.hx-cycle__sticky .hx-lead { max-width: 100%; }
.hx-cycle__steps {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
}
.hx-cycle__steps::before {
	content:'';
	position: absolute;
	left: 33px;
	top: 0; bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--hx-red), transparent);
	opacity: .3;
}
.hx-cycle__step {
	display: grid;
	grid-template-columns: 66px 1fr 44px;
	gap: 20px;
	align-items: center;
	padding: 24px 26px;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--hx-line-d);
	border-radius: var(--hx-radius);
	opacity: 0;
	transform: translateY(28px);
	position: relative;
}
.hx-cycle__step:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.hx-cycle__num {
	width: 50px; height: 50px;
	border-radius: 50%;
	background: var(--hx-red);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	box-shadow: 0 0 0 4px var(--hx-ink-2), 0 0 20px var(--hx-red-glow);
	z-index: 2;
}
.hx-cycle__time {
	display: inline-block;
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .25em;
	color: var(--hx-red);
	text-transform: uppercase;
	padding: 3px 9px;
	background: var(--hx-red-soft);
	border-radius: 999px;
	margin-bottom: 8px;
}
.hx-cycle__body h3 {
	font-size: 22px;
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--hx-fg-light);
	letter-spacing: -.01em;
}
.hx-cycle__body p {
	color: var(--hx-mute-d);
	font-size: 13.5px;
	margin: 0;
	line-height: 1.55;
	max-width: 440px;
}
.hx-cycle__icon { color: var(--hx-mute-d); opacity: .6; }


/* ============================================================
   6. SECTORES · LIGHT
   ============================================================ */
.hx-sectors {
	padding: clamp(100px, 12vw, 150px) 0;
	background: var(--hx-cream);
}
.hx-sectors__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.hx-sector {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 18px;
	padding: 32px;
	text-decoration: none;
	color: var(--hx-fg-dark);
	opacity: 0;
	transform: translateY(24px);
	overflow: hidden;
	transition: transform .3s var(--hx-easing), box-shadow .3s, border-color .25s;
	box-shadow: var(--hx-shadow-card);
	min-height: 200px;
}
.hx-sector:hover {
	transform: translateY(-4px);
	box-shadow: var(--hx-shadow-hover);
	border-color: transparent;
}
.hx-sector::after {
	content:'';
	position: absolute;
	inset: auto auto -40% -10%;
	width: 200px; height: 200px;
	background: radial-gradient(circle, var(--hx-red-soft), transparent 70%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.hx-sector:hover::after { opacity: 1; }
.hx-sector__kicker {
	display: block;
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .25em;
	color: var(--hx-red);
	text-transform: uppercase;
	margin-bottom: 16px;
}
.hx-sector__title {
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -.015em;
	line-height: 1.1;
	color: var(--hx-fg-dark);
}
.hx-sector__text {
	color: var(--hx-fg-mid);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	max-width: 320px;
	position: relative;
}
.hx-sector__arrow {
	position: absolute;
	top: 28px;
	right: 28px;
	color: var(--hx-red);
	transition: transform .3s var(--hx-easing);
}
.hx-sector:hover .hx-sector__arrow { transform: translate(5px,-5px); }


/* ============================================================
   7. QUOTE · DARK spotlight
   ============================================================ */
.hx-quote {
	min-height: 70vh;
	display: flex;
	align-items: center;
	padding: clamp(80px, 10vw, 130px) 32px;
	background: var(--hx-ink);
	overflow: hidden;
	position: relative;
}
.hx-quote__spot {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, var(--hx-red-soft), transparent 50%);
	pointer-events: none;
}
.hx-quote__mark {
	position: absolute;
	top: -60px;
	right: -20px;
	font-family: 'Kanit', serif;
	font-size: clamp(300px, 35vw, 480px);
	font-weight: 700;
	font-style: italic;
	color: rgba(224,71,61,.06);
	line-height: 1;
	user-select: none;
	pointer-events: none;
}
.hx-quote__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	text-align: left;
}
.hx-quote__stars {
	display: inline-flex;
	gap: 5px;
	color: var(--hx-red);
	margin-bottom: 28px;
	opacity: 0;
}
.hx-quote__body { margin: 0 0 32px; opacity: 0; }
.hx-quote__body p {
	font-size: clamp(24px, 3vw, 42px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.015em;
	margin: 0;
	color: var(--hx-fg-light);
	text-wrap: balance;
}
.hx-quote__author {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	opacity: 0;
}
.hx-avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--hx-red);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-family: 'Kanit', sans-serif;
	font-style: italic;
}
.hx-quote__author > div { text-align: left; }
.hx-quote__author b    { color: var(--hx-fg-light); font-size: 15px; display: block; }
.hx-quote__author span { color: var(--hx-mute-d); font-size: 13px; }


/* ============================================================
   8/9/10. Wrappers legacy (los dejamos por compatibilidad)
   ============================================================ */
.hx-roi-wrap,
.hx-apps-wrap,
.hx-final-wrap { opacity: 0; transform: translateY(24px); }


/* ============================================================
   ✦ 8. ROI · LIGHT
   ============================================================ */
.hx-roi {
	background: var(--hx-cream);
	padding: clamp(100px, 12vw, 150px) 0;
	position: relative;
	overflow: hidden;
}
.hx-roi::before {
	content:'';
	position: absolute;
	top: -10%; left: -10%;
	width: 60%; height: 60%;
	background: radial-gradient(circle, var(--hx-red-soft), transparent 60%);
	pointer-events: none;
}
.hx-roi__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hx-roi__intro { max-width: 520px; }
.hx-roi__bullets {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hx-roi__bullets li {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--hx-fg-mid);
	font-size: 15px;
}
.hx-roi__bullets svg { color: var(--hx-red); flex-shrink: 0; }
.hx-roi__bullets b { color: var(--hx-fg-dark); font-weight: 600; }

.hx-roi__panel {
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 22px;
	padding: 32px;
	box-shadow: var(--hx-shadow-hover);
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .5s var(--hx-easing);
}
.hx-roi__panel-head { margin-bottom: 24px; }

.hx-roi__sliders {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 24px;
}
.hx-slider label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: var(--hx-fg-mid);
	margin-bottom: 8px;
}
.hx-slider label b {
	font-family: 'Roboto Mono', monospace;
	font-size: 16px;
	color: var(--hx-red);
	font-weight: 600;
}
.hx-slider input[type=range] {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}
.hx-slider input[type=range]::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--hx-line-l);
	border-radius: 4px;
}
.hx-slider input[type=range]::-moz-range-track {
	height: 4px;
	background: var(--hx-line-l);
	border-radius: 4px;
}
.hx-slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px; height: 18px;
	background: var(--hx-red);
	border-radius: 50%;
	margin-top: -7px;
	box-shadow: 0 2px 8px var(--hx-red-glow);
}
.hx-slider input[type=range]::-moz-range-thumb {
	width: 18px; height: 18px;
	background: var(--hx-red);
	border-radius: 50%;
	border: none;
	box-shadow: 0 2px 8px var(--hx-red-glow);
}

.hx-roi__compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}
.hx-roi__col {
	padding: 14px;
	background: var(--hx-cream-2);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hx-roi__col span {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hx-mute-l);
}
.hx-roi__col b { font-size: 20px; color: var(--hx-fg-dark); font-weight: 700; }
.hx-roi__col--dark { background: var(--hx-fg-dark); }
.hx-roi__col--dark span { color: rgba(255,255,255,.65); }
.hx-roi__col--dark b { color: #fff; }

.hx-roi__result {
	background: linear-gradient(135deg, var(--hx-red), var(--hx-red-deep));
	color: #fff;
	padding: 24px;
	border-radius: 14px;
	text-align: center;
	margin-bottom: 16px;
}
.hx-roi__kicker {
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	opacity: .85;
}
.hx-roi__big {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.05;
	margin: 8px 0;
	letter-spacing: -.02em;
}
.hx-roi__sub {
	display: flex;
	gap: 12px;
	justify-content: center;
	font-size: 12px;
	opacity: .9;
	flex-wrap: wrap;
}
.hx-roi__sub b { font-weight: 700; }
.hx-roi__cta { width: 100%; justify-content: center; }


/* ============================================================
   ✦ 9. APPS · DARK BAND
   ============================================================ */
.hx-apps {
	background: var(--hx-ink);
	padding: clamp(100px, 12vw, 150px) 0;
	overflow: hidden;
	position: relative;
}
.hx-apps__aura {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 30%, var(--hx-red-soft), transparent 50%),
		radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.04), transparent 50%);
	pointer-events: none;
}
.hx-apps__wrap {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hx-apps__col { max-width: 560px; }
.hx-apps__features {
	list-style: none;
	margin: 32px 0 36px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hx-apps__features li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	color: var(--hx-mute-d);
	font-size: 15px;
	line-height: 1.5;
}
.hx-apps__features li b { color: var(--hx-fg-light); font-weight: 500; }
.hx-apps__check {
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 6px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	display: grid;
	place-items: center;
	margin-top: 1px;
}

.hx-apps__stores {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.hx-store {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--hx-line-d);
	border-radius: 12px;
	color: var(--hx-fg-light);
	text-decoration: none;
	transition: transform .2s var(--hx-easing), background .25s, border-color .25s;
}
.hx-store:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.2);
	transform: translateY(-2px);
}
.hx-store small {
	display: block;
	font-size: 9px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--hx-mute-d);
}
.hx-store b { font-size: 15px; font-weight: 600; }

.hx-apps__ratings {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--hx-mute-d);
}
.hx-apps__ratings span { display: inline-flex; gap: 6px; align-items: center; }
.hx-apps__ratings b { color: var(--hx-fg-light); font-weight: 600; }
.hx-apps__ratings svg { color: var(--hx-red); }


/* ===== Phone mockup ===== */
.hx-apps__phone {
	justify-self: center;
	transform-style: preserve-3d;
	transition: transform .5s var(--hx-easing);
}
.hx-phone {
	position: relative;
	width: 280px;
	height: 580px;
	background: linear-gradient(145deg, #1d1c2e 0%, #0a0a14 100%);
	border-radius: 40px;
	padding: 14px;
	border: 2px solid rgba(255,255,255,.08);
	box-shadow:
		0 -2px 0 rgba(255,255,255,.08) inset,
		0 50px 80px -30px rgba(0,0,0,.7);
}
.hx-phone__notch {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: 110px;
	height: 24px;
	background: #000;
	border-radius: 14px;
	z-index: 5;
}
.hx-phone__screen {
	width: 100%;
	height: 100%;
	background: #050810;
	border-radius: 28px;
	overflow: hidden;
	padding: 50px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hx-phone__statusbar {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--hx-fg-light);
	font-family: 'Roboto Mono', monospace;
	padding: 0 8px;
}
.hx-phone__alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px;
	background: rgba(224,71,61,.18);
	border: 1px solid rgba(224,71,61,.4);
	border-radius: 10px;
	color: #fff;
	font-size: 11px;
}
.hx-phone__alert-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--hx-red);
	box-shadow: 0 0 10px var(--hx-red);
	animation: hx-pulse 1.5s infinite;
	margin-top: 4px;
	flex-shrink: 0;
}
.hx-phone__alert b { display: block; font-size: 12px; font-weight: 600; }
.hx-phone__alert span { opacity: .8; font-size: 10px; }

.hx-phone__card {
	background: rgba(255,255,255,.05);
	border: 1px solid var(--hx-line-d);
	border-radius: 10px;
	padding: 12px;
	color: var(--hx-fg-light);
}
.hx-phone__card-head { display: flex; gap: 10px; margin-bottom: 10px; }
.hx-phone__pin {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.hx-phone__card-head b { display: block; font-size: 12px; font-weight: 600; }
.hx-phone__card-head span { font-size: 10px; color: var(--hx-mute-d); }
.hx-phone__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
	padding: 10px 0;
	border-top: 1px solid var(--hx-line-d);
	border-bottom: 1px solid var(--hx-line-d);
}
.hx-phone__stats span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 9px;
	color: var(--hx-mute-d);
	text-align: center;
}
.hx-phone__stats b { font-size: 14px; color: var(--hx-fg-light); font-weight: 700; }
.hx-phone__actions {
	display: flex;
	gap: 6px;
	margin-top: 12px;
}
.hx-phone__btn {
	flex: 1;
	padding: 8px;
	border: none;
	border-radius: 8px;
	background: var(--hx-red);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
}
.hx-phone__btn--ghost {
	background: rgba(255,255,255,.08);
	display: inline-flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
}

.hx-phone__nav {
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 12px 0 4px;
	border-top: 1px solid var(--hx-line-d);
}
.hx-phone__nav span {
	color: var(--hx-mute-d);
	display: grid;
	place-items: center;
}
.hx-phone__nav span.is-active { color: var(--hx-red); }


/* ============================================================
   ✦ 10. FAQ · LIGHT
   ============================================================ */
.hx-faq {
	background: var(--hx-cream);
	padding: clamp(100px, 12vw, 150px) 0;
}
.hx-faq__list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hx-faq__item {
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: border-color .25s, box-shadow .25s;
	box-shadow: var(--hx-shadow-card);
}
.hx-faq__item[open] {
	border-color: var(--hx-red);
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 16px 32px -16px var(--hx-red-glow);
}
.hx-faq__q {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 28px;
	font-size: 17px;
	font-weight: 600;
	color: var(--hx-fg-dark);
	gap: 24px;
	user-select: none;
}
.hx-faq__q::-webkit-details-marker { display: none; }
.hx-faq__icon {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	font-size: 22px;
	font-weight: 300;
	line-height: 0;
	transition: transform .3s var(--hx-easing), background .25s;
	flex-shrink: 0;
}
.hx-faq__item[open] .hx-faq__icon {
	transform: rotate(45deg);
	background: var(--hx-red);
	color: #fff;
}
.hx-faq__a {
	padding: 0 28px 24px;
	color: var(--hx-fg-mid);
	font-size: 15px;
	line-height: 1.65;
	max-width: 720px;
}
.hx-faq__a p { margin: 0; }

.hx-faq__cta {
	margin-top: 56px;
	text-align: center;
	color: var(--hx-fg-mid);
	font-size: 15px;
}
.hx-faq__cta p { margin: 0 0 16px; }


/* ============================================================
   ✦ 11. FINAL CTA · DARK
   ============================================================ */
.hx-final {
	background: var(--hx-ink);
	padding: clamp(100px, 12vw, 150px) 0;
	overflow: hidden;
	position: relative;
}
.hx-final__aura {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center top, var(--hx-red-soft), transparent 55%),
		radial-gradient(ellipse at bottom, rgba(255,200,100,.06), transparent 60%);
	pointer-events: none;
}
.hx-final__mark {
	position: absolute;
	top: 50%;
	right: -60px;
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: clamp(300px, 35vw, 480px);
	color: rgba(224,71,61,.05);
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
}
.hx-final__inner { position: relative; z-index: 1; }
.hx-final__head {
	max-width: 760px;
	margin: 0 auto 64px;
	text-align: center;
}
.hx-final__head .hx-lead { margin-inline: auto; }
.hx-final__head .hx-title em {
	color: var(--hx-red);
	font-style: italic;
}

.hx-final__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1100px;
	margin: 0 auto;
}
.hx-final-card {
	position: relative;
	display: block;
	padding: 36px 28px 32px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--hx-line-d);
	border-radius: 20px;
	text-decoration: none;
	color: var(--hx-fg-light);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform .35s var(--hx-easing), background .25s, border-color .25s;
	min-height: 240px;
}
.hx-final-card:hover {
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.16);
}
.hx-final-card__ic {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	margin-bottom: 18px;
}
.hx-final-card h3 {
	font-size: 22px;
	margin: 0 0 10px;
	font-weight: 700;
	letter-spacing: -.015em;
}
.hx-final-card p {
	color: var(--hx-mute-d);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
	max-width: 280px;
}
.hx-final-card__arrow {
	position: absolute;
	bottom: 28px;
	right: 28px;
	color: var(--hx-red);
	transition: transform .3s var(--hx-easing);
}
.hx-final-card:hover .hx-final-card__arrow { transform: translate(5px,-5px); }

.hx-final-card--wa { border-color: rgba(37,211,102,.25); }
.hx-final-card--wa .hx-final-card__ic { background: rgba(37,211,102,.16); color: #25D366; }
.hx-final-card--wa .hx-final-card__arrow { color: #25D366; }

.hx-final-card--primary {
	background: linear-gradient(160deg, var(--hx-red) 0%, var(--hx-red-deep) 100%);
	border-color: var(--hx-red);
}
.hx-final-card--primary .hx-final-card__ic { background: rgba(255,255,255,.15); color: #fff; }
.hx-final-card--primary p { color: rgba(255,255,255,.85); }
.hx-final-card--primary .hx-final-card__arrow { color: #fff; }
.hx-final-card__badge {
	position: absolute;
	top: 20px; right: 20px;
	font-family: 'Roboto Mono', monospace;
	font-size: 9px;
	letter-spacing: .25em;
	padding: 4px 8px;
	background: rgba(255,255,255,.18);
	border-radius: 999px;
	color: #fff;
}

.hx-final__legal {
	text-align: center;
	margin-top: 56px;
	color: var(--hx-mute-d);
	font-size: 12.5px;
}


/* ============================================================
   ✦ AUDIENCE SELECTOR · home (3 caminos)
   ============================================================ */
.hx-audience {
	background: var(--hx-cream);
	padding: clamp(80px, 10vw, 130px) 0;
}
.hx-audience__head {
	max-width: 820px;
	margin: 0 auto 64px;
	text-align: center;
}
.hx-audience__head .hx-lead { margin-inline: auto; }
.hx-audience__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.hx-audience-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 22px;
	padding: 36px 32px 30px;
	text-decoration: none;
	color: var(--hx-fg-dark);
	overflow: hidden;
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .35s var(--hx-easing), box-shadow .3s, border-color .25s;
	box-shadow: var(--hx-shadow-card);
}
.hx-audience-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hx-shadow-hover);
	border-color: var(--hx-red);
}
.hx-audience-card--primary {
	background: linear-gradient(160deg, var(--hx-fg-dark) 0%, #18162a 100%);
	color: var(--hx-fg-light);
	border-color: transparent;
	transform: scale(1.02);
	box-shadow: 0 28px 56px -20px rgba(224,71,61,.4);
}
.hx-audience-card--primary:hover {
	transform: scale(1.02) translateY(-4px);
}
.hx-audience-card--ghost {
	background: var(--hx-cream-2);
}

.hx-audience-card__badge {
	display: inline-block;
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .25em;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	width: fit-content;
	margin-bottom: 18px;
}
.hx-audience-card--primary .hx-audience-card__badge {
	background: rgba(224,71,61,.18);
	color: #fff;
	border: 1px solid var(--hx-red);
}

.hx-audience-card__ic {
	display: inline-grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 14px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	margin-bottom: 18px;
}
.hx-audience-card--primary .hx-audience-card__ic {
	background: var(--hx-red);
	color: #fff;
}

.hx-audience-card h3 {
	font-size: 22px;
	margin: 0 0 12px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.hx-audience-card--primary h3 { color: var(--hx-fg-light); }

.hx-audience-card p {
	color: var(--hx-fg-mid);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0 0 20px;
}
.hx-audience-card--primary p { color: rgba(255,255,255,.78); }

.hx-audience-card__bullets {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: var(--hx-fg-mid);
}
.hx-audience-card__bullets li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.hx-audience-card__bullets li::before {
	content: '✓';
	color: var(--hx-red);
	font-weight: 700;
	flex-shrink: 0;
}
.hx-audience-card--primary .hx-audience-card__bullets {
	color: rgba(255,255,255,.85);
}

.hx-audience-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--hx-red);
	padding-top: 18px;
	border-top: 1px solid var(--hx-line-l);
	transition: gap .25s;
}
.hx-audience-card--primary .hx-audience-card__cta {
	color: #fff;
	border-color: rgba(255,255,255,.15);
}
.hx-audience-card:hover .hx-audience-card__cta { gap: 14px; }


/* ============================================================
   ✦ Audience marker · pequeño indicador "estás en esta sección"
   ============================================================ */
.hx-audience-marker {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 14px;
	background: var(--hx-cream-2);
	border: 1px solid var(--hx-line-l);
	border-radius: 999px;
	font-size: 12px;
	color: var(--hx-fg-mid);
	margin: 0 0 24px;
}
.hx-audience-marker a {
	color: var(--hx-red);
	text-decoration: none;
	font-weight: 600;
	font-size: 12px;
}
.hx-audience-marker a:hover {
	text-decoration: underline;
}


/* ============================================================
   ✦ GARANTÍA 60 DÍAS · DARK DRAMATIC
   ============================================================ */
.hx-guarantee {
	background: var(--hx-ink);
	padding: clamp(100px, 14vw, 180px) 0;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.hx-guarantee__aura {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, var(--hx-red-soft), transparent 55%),
		radial-gradient(ellipse at 80% 30%, rgba(255,200,100,.06), transparent 50%);
	pointer-events: none;
}
.hx-guarantee__big {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(400px, 50vw, 720px);
	color: rgba(224,71,61,.06);
	line-height: 1;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.hx-guarantee__inner {
	position: relative;
	z-index: 1;
	max-width: 820px;
	margin: 0 auto;
}
.hx-guarantee__inner .hx-eyebrow { margin-inline: auto; justify-content: center; }
.hx-guarantee__inner .hx-lead { margin-inline: auto; }
.hx-guarantee__inner .hx-title { margin: 0 auto 28px; }
.hx-guarantee__inner .hx-title em {
	color: var(--hx-red);
	font-style: italic;
}

.hx-guarantee__bullets {
	list-style: none;
	margin: 36px auto 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
	text-align: left;
}
.hx-guarantee__bullets li {
	display: flex;
	gap: 14px;
	align-items: center;
	color: var(--hx-mute-d);
	font-size: 15px;
}
.hx-guarantee__bullets b { color: var(--hx-fg-light); font-weight: 600; }

.hx-guarantee__ctas {
	margin-top: 44px;
	justify-content: center;
}
.hx-btn--light {
	color: var(--hx-fg-light);
	border-color: rgba(255,255,255,.2);
}
.hx-btn--light:hover {
	background: var(--hx-fg-light);
	color: var(--hx-ink);
}


/* ============================================================
   ✦ REGULACIÓN UE · LIGHT URGENCY
   ============================================================ */
.hx-eu {
	background: var(--hx-cream);
	padding: clamp(80px, 10vw, 130px) 0;
	position: relative;
	overflow: hidden;
}
.hx-eu::before {
	content:'';
	position: absolute;
	top: -20%; left: -10%;
	width: 50%; height: 70%;
	background: radial-gradient(circle, rgba(0,51,153,.04), transparent 65%);
	pointer-events: none;
}
.hx-eu__wrap {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hx-eu__col { max-width: 580px; }
.hx-eu__col .hx-lead + .hx-lead { margin-top: 16px; }
.hx-eu__col .hx-eyebrow__dot {
	background: #003399;
	box-shadow: 0 0 12px rgba(0,51,153,.4);
}

.hx-eu__panel {
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 20px;
	padding: 36px 32px;
	box-shadow: var(--hx-shadow-hover);
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .5s var(--hx-easing);
	position: relative;
}
.hx-eu__flag {
	display: inline-flex;
	margin-bottom: 16px;
	border-radius: 4px;
	overflow: hidden;
}
.hx-eu__panel-eyebrow {
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .25em;
	color: var(--hx-mute-l);
	text-transform: uppercase;
	margin: 0 0 16px;
}
.hx-eu__countdown {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: linear-gradient(135deg, #003399 0%, #002280 100%);
	color: #fff;
	border-radius: 14px;
	margin-bottom: 28px;
}
.hx-eu__countdown > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hx-eu__countdown b {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -.02em;
	line-height: 1;
}
.hx-eu__countdown span {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #FFCC00;
}
.hx-eu__sep {
	font-size: 32px !important;
	font-weight: 300;
	opacity: .4;
}

.hx-eu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.hx-eu__list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.hx-eu__list b {
	display: block;
	color: var(--hx-fg-dark);
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 2px;
}
.hx-eu__list span {
	display: block;
	color: var(--hx-mute-l);
	font-size: 13px;
	line-height: 1.5;
}
.hx-eu__status {
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 14px;
	margin-top: 1px;
}
.hx-eu__status--ok { background: rgba(40,201,65,.16); color: #1ea73a; }
.hx-eu__status--warn { background: rgba(255,159,0,.16); color: #d97706; }


/* ============================================================
   ✦ WHITE-LABEL · LIGHT B2B
   ============================================================ */
.hx-whitelabel {
	background: var(--hx-cream-2);
	padding: clamp(100px, 12vw, 150px) 0;
	position: relative;
	overflow: hidden;
}
.hx-whitelabel::before {
	content:'';
	position: absolute;
	top: 30%; right: -20%;
	width: 80%; height: 70%;
	background: radial-gradient(circle, var(--hx-red-soft), transparent 60%);
	pointer-events: none;
}
.hx-whitelabel__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hx-whitelabel__col { max-width: 560px; }

.hx-whitelabel__bullets {
	list-style: none;
	margin: 32px 0 36px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hx-whitelabel__bullets li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.hx-whitelabel__bullets b {
	display: block;
	color: var(--hx-fg-dark);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}
.hx-whitelabel__bullets span {
	display: block;
	color: var(--hx-fg-mid);
	font-size: 13.5px;
	line-height: 1.5;
}

.hx-whitelabel__preview {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .5s var(--hx-easing);
}

.hx-wl-mock {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px;
	padding: 16px;
}
.hx-wl-mock__brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 4px 14px;
	border-bottom: 1px solid var(--hx-line-l);
	margin-bottom: 4px;
}
.hx-wl-mock__logo {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 22px;
	color: var(--hx-fg-dark);
	letter-spacing: -.02em;
}
.hx-wl-mock__logo i {
	font-style: normal;
	color: #1ea73a;
}
.hx-wl-mock__tag {
	font-size: 11px;
	color: var(--hx-mute-l);
	font-family: 'Roboto Mono', monospace;
	letter-spacing: .04em;
}

.hx-wl-badge {
	position: absolute;
	bottom: -16px;
	right: -16px;
	display: flex;
	flex-direction: column;
	background: var(--hx-fg-dark);
	color: #fff;
	padding: 10px 16px;
	border-radius: 12px;
	box-shadow: var(--hx-shadow-hover);
}
.hx-wl-badge span {
	font-size: 8px;
	letter-spacing: .25em;
	color: var(--hx-mute-d);
	font-family: 'Roboto Mono', monospace;
}
.hx-wl-badge b {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	color: var(--hx-red);
}


/* ============================================================
   ✦ Final CTA · 4ª opción para casa
   ============================================================ */
.hx-final__home {
	margin-top: 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}
.hx-final__home-eyebrow {
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--hx-mute-d);
	text-transform: uppercase;
}
.hx-final__home-link {
	color: var(--hx-fg-light);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding-bottom: 2px;
	transition: color .2s, border-color .2s;
}
.hx-final__home-link:hover {
	color: var(--hx-red);
	border-color: var(--hx-red);
}


/* ============================================================
   ✦ PÁGINAS INTERNAS · Plataforma · Precios · Producto
   ============================================================ */

/* Variantes hero (precios) */
.hx-hero__inner--centered {
	display: block !important;
	text-align: center;
}
.hx-hero__col--center {
	max-width: 880px !important;
	margin: 0 auto;
	text-align: center;
}
.hx-lead--center { margin-inline: auto; text-align: center; }

/* SR-only helper */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}


/* ===== Integraciones (Plataforma) ===== */
.hx-integrations {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	margin-top: 48px;
}
.hx-integration {
	padding: 22px 18px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--hx-line-d);
	border-radius: 12px;
	color: var(--hx-fg-light);
	font-size: 14px;
	text-align: center;
	font-weight: 500;
	transition: transform .25s var(--hx-easing), background .25s, border-color .25s;
}
.hx-integration:hover {
	transform: translateY(-3px);
	background: rgba(255,255,255,.07);
	border-color: rgba(224,71,61,.4);
	color: var(--hx-red);
}


/* ===== Planes (Precios) ===== */
.hx-plans {
	background: var(--hx-cream);
	padding: clamp(60px, 8vw, 100px) 0 clamp(100px, 12vw, 150px);
}
.hx-plans__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: 1140px;
	margin: 0 auto;
}
.hx-plan {
	position: relative;
	background: #fff;
	border: 1px solid var(--hx-line-l);
	border-radius: 20px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: var(--hx-shadow-card);
	transition: transform .35s var(--hx-easing), box-shadow .3s;
}
.hx-plan:hover {
	transform: translateY(-4px);
	box-shadow: var(--hx-shadow-hover);
}
.hx-plan--featured {
	background: linear-gradient(160deg, var(--hx-fg-dark) 0%, #2a2740 100%);
	color: var(--hx-fg-light);
	border-color: transparent;
	transform: scale(1.04);
	box-shadow: 0 30px 60px -20px rgba(224,71,61,.35);
}
.hx-plan--featured .hx-plan__name,
.hx-plan--featured .hx-plan__num,
.hx-plan--featured .hx-plan__desc { color: var(--hx-fg-light); }
.hx-plan--featured .hx-plan__note { color: rgba(255,255,255,.65); }
.hx-plan--featured .hx-plan__features { color: rgba(255,255,255,.85); }
.hx-plan--featured .hx-plan__features svg { color: var(--hx-red); }
.hx-plan--featured .hx-apps__check { background: rgba(224,71,61,.25); color: var(--hx-red); }

.hx-plan__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--hx-red);
	color: #fff;
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .2em;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 4px 12px var(--hx-red-glow);
}
.hx-plan__head { margin-bottom: 4px; }
.hx-plan__name {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--hx-fg-dark);
	letter-spacing: -.01em;
}
.hx-plan__desc {
	font-size: 13.5px;
	color: var(--hx-mute-l);
	margin: 0;
	line-height: 1.5;
}
.hx-plan__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.hx-plan__num {
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: clamp(40px, 4vw, 56px);
	color: var(--hx-fg-dark);
	letter-spacing: -.02em;
	line-height: 1;
}
.hx-plan__price small {
	font-size: 13px;
	color: var(--hx-mute-l);
	font-weight: 500;
}
.hx-plan__note {
	font-size: 12px;
	color: var(--hx-mute-l);
	margin: 0;
	font-family: 'Roboto Mono', monospace;
	letter-spacing: .03em;
}
.hx-plan__cta { width: 100%; justify-content: center; }
.hx-plan--featured .hx-plan__cta.hx-btn--ghost {
	background: #fff;
	color: var(--hx-fg-dark);
}
.hx-plan__features {
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hx-line-l);
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	color: var(--hx-fg-mid);
}
.hx-plan--featured .hx-plan__features { border-color: rgba(255,255,255,.12); }
.hx-plan__features li { display: flex; gap: 10px; align-items: flex-start; }


/* ===== Tabla comparativa (Precios y Producto) ===== */
.hx-compare {
	background: var(--hx-ink);
	padding: clamp(100px, 12vw, 150px) 0;
	position: relative;
	overflow: hidden;
}
.hx-compare--light {
	background: var(--hx-cream);
}
.hx-compare__wrap {
	background: rgba(255,255,255,.03);
	border: 1px solid var(--hx-line-d);
	border-radius: 16px;
	overflow: hidden;
}
.hx-compare--light .hx-compare__wrap {
	background: #fff;
	border-color: var(--hx-line-l);
	box-shadow: var(--hx-shadow-card);
}
.hx-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}
.hx-compare__table th,
.hx-compare__table td {
	padding: 16px 22px;
	text-align: left;
	border-bottom: 1px solid var(--hx-line-d);
}
.hx-compare--light .hx-compare__table th,
.hx-compare--light .hx-compare__table td { border-color: var(--hx-line-l); }

.hx-compare__table th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: var(--hx-mute-d);
	background: rgba(255,255,255,.02);
}
.hx-compare--light .hx-compare__table th {
	color: var(--hx-mute-l);
	background: var(--hx-cream-2);
}
.hx-compare__table th.is-highlight,
.hx-compare__table td.is-highlight {
	background: var(--hx-red-soft);
	color: var(--hx-red);
	font-weight: 600;
}
.hx-compare__table td b { color: var(--hx-fg-light); font-weight: 600; }
.hx-compare--light .hx-compare__table td b { color: var(--hx-fg-dark); }
.hx-compare__table tbody tr:last-child td { border-bottom: none; }


/* ===== Spec grid (Producto) ===== */
.hx-specs {
	background: var(--hx-ink-2);
	padding: clamp(100px, 12vw, 150px) 0;
	position: relative;
	overflow: hidden;
}
.hx-specs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.hx-spec {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--hx-line-d);
	border-radius: 18px;
	padding: 28px;
	transition: transform .35s var(--hx-easing), border-color .25s, background .25s;
	transform-style: preserve-3d;
}
.hx-spec:hover {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.15);
}
.hx-spec header {
	display: flex;
	gap: 14px;
	align-items: center;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--hx-line-d);
}
.hx-spec__ic {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--hx-red-soft);
	color: var(--hx-red);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.hx-spec header h3 {
	margin: 0;
	color: var(--hx-fg-light);
	font-size: 17px;
	font-weight: 700;
}
.hx-spec__rows {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hx-spec__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
}
.hx-spec__row dt {
	color: var(--hx-mute-d);
	margin: 0;
}
.hx-spec__row dd {
	color: var(--hx-fg-light);
	margin: 0;
	font-weight: 500;
	font-family: 'Roboto Mono', monospace;
	font-size: 12.5px;
	text-align: right;
}


/* ===== Device mock (Producto hero) ===== */
.hx-device-mock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.hx-device__body {
	width: 260px;
	background: linear-gradient(145deg, #1f1d33 0%, #0a0a14 100%);
	border-radius: 22px;
	border: 2px solid rgba(255,255,255,.08);
	padding: 20px;
	box-shadow:
		0 -2px 0 rgba(255,255,255,.08) inset,
		0 40px 80px -30px rgba(0,0,0,.6);
}
.hx-device__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	color: var(--hx-fg-light);
	font-size: 12px;
}
.hx-device__brand {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -.01em;
}
.hx-device__brand em {
	font-style: normal;
	color: var(--hx-red);
}
.hx-device__sn {
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	color: var(--hx-mute-d);
}
.hx-device__screen {
	background: #060a14;
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	position: relative;
}
.hx-device__led {
	width: 10px; height: 10px;
	background: var(--hx-red);
	border-radius: 50%;
	box-shadow: 0 0 16px var(--hx-red);
	animation: hx-pulse 1.5s infinite;
}
.hx-device__bars {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 60px;
}
.hx-device__bars span {
	width: 8px;
	background: var(--hx-red);
	border-radius: 3px;
	min-height: 14px;
}
.hx-device__label {
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--hx-red);
}
.hx-device__base {
	height: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	padding: 0 12px;
}
.hx-device__port {
	width: 28px; height: 6px;
	background: #000;
	border-radius: 3px;
}
.hx-device__antenna {
	width: 16px; height: 4px;
	background: var(--hx-red);
	border-radius: 2px;
	box-shadow: 0 0 8px var(--hx-red);
}
.hx-device__caption {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	color: var(--hx-fg-mid);
	background: var(--hx-cream-2);
	padding: 8px 14px;
	border-radius: 999px;
	font-family: 'Roboto Mono', monospace;
}
.hx-device__caption svg { color: var(--hx-red); }
.hx-device__sep {
	width: 4px; height: 4px;
	background: var(--hx-line-l);
	border-radius: 50%;
}


/* ============================================================
   ✦ LOCK-SCROLL HORIZONTAL reutilizable (hx-hlock)
   La sección se clava 100vh y el track se desliza en X (GSAP).
   Usado en: Ciclo (dark) y Sectores (light).
   ============================================================ */
.hx-hlock {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}
.hx-hlock--dark { background: var(--hx-ink); }

.hx-hlock__head {
	flex-shrink: 0;
	padding: clamp(48px,6vw,84px) 0 clamp(20px,3vw,36px);
	position: relative;
}
.hx-hlock__head .hx-eyebrow { margin-bottom: 16px; }
.hx-hlock__hint {
	position: absolute;
	right: clamp(24px,5vw,80px);
	bottom: clamp(20px,3vw,36px);
	font-family: 'Roboto Mono', monospace;
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--hx-red);
}

.hx-hlock__viewport {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 0;
}
.hx-hlock__track {
	display: flex;
	gap: clamp(18px, 2.5vw, 36px);
	padding: 0 clamp(24px,5vw,80px);
	width: max-content;
	will-change: transform;
}
.hx-hlock__card {
	flex-shrink: 0;
	width: clamp(260px, 30vw, 400px);
}

/* Número en las cards de sector */
.hx-sector__num {
	display: block;
	font-family: 'Kanit', sans-serif;
	font-style: italic; font-weight: 700;
	font-size: clamp(32px, 3.5vw, 52px);
	color: var(--hx-red); line-height: 1;
	margin-bottom: 10px;
}
/* La card sector en hlock conserva su estilo pero con altura controlada */
.hx-hlock .hx-sector { opacity: 1; transform: none; min-height: clamp(360px, 52vh, 480px); }

/* Cards de paso del ciclo (dark) */
.hx-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 34px 30px;
	height: clamp(360px, 52vh, 480px);
	box-sizing: border-box;
	background: linear-gradient(180deg, #1f1d33 0%, #14121f 100%);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 20px;
	color: var(--hx-fg-light);
}
.hx-step__num {
	font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 700;
	font-size: clamp(48px, 5vw, 76px);
	line-height: 1; letter-spacing: -.03em;
	background: linear-gradient(180deg, var(--hx-red), #ffc864);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hx-step__time {
	align-self: flex-start;
	font-family: 'Roboto Mono', monospace; font-size: 11px;
	letter-spacing: .2em; text-transform: uppercase; color: var(--hx-gold,#ffc864);
	padding: 4px 10px; border: 1px solid rgba(255,200,100,.4); border-radius: 999px;
}
.hx-step__name { font-size: clamp(24px,2.4vw,32px); margin: 0; font-weight: 700; letter-spacing: -.01em; }
.hx-step__desc { color: var(--hx-mute-d); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
.hx-step__icon {
	align-self: flex-start; margin-top: auto;
	width: 52px; height: 52px; border-radius: 13px;
	background: rgba(255,255,255,.06); color: var(--hx-red);
	display: grid; place-items: center;
}

/* Móvil: sin pin → scroll horizontal nativo */
@media (max-width: 1024px) {
	.hx-hlock { height: auto; }
	.hx-hlock__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.hx-hlock__track { padding-bottom: 32px; }
}


/* ============================================================
   Responsive (secciones nuevas)
   ============================================================ */
@media (max-width: 1024px) {
	.hx-roi__wrap, .hx-apps__wrap { grid-template-columns: 1fr; gap: 56px; }
	.hx-apps__phone { transform: scale(0.9); }
	.hx-final__grid { grid-template-columns: 1fr; max-width: 480px; }

	.hx-audience__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
	.hx-audience-card--primary { transform: none; }
	.hx-audience-card--primary:hover { transform: translateY(-4px); }
	.hx-eu__wrap { grid-template-columns: 1fr; gap: 48px; }
	.hx-whitelabel__wrap { grid-template-columns: 1fr; gap: 56px; }
	.hx-wl-badge { right: 0; bottom: -24px; }
	.hx-guarantee__big { font-size: clamp(280px, 60vw, 480px); }

	.hx-integrations { grid-template-columns: repeat(3, 1fr); }
	.hx-plans__grid { grid-template-columns: 1fr; max-width: 480px; }
	.hx-plan--featured { transform: none; }
	.hx-specs__grid { grid-template-columns: repeat(2, 1fr); }
	.hx-compare__table { font-size: 13px; }
	.hx-compare__table th, .hx-compare__table td { padding: 12px 14px; }
}
@media (max-width: 640px) {
	.hx-roi__sub { gap: 8px; font-size: 11px; }
	.hx-roi__compare { gap: 8px; }
	.hx-roi__panel { padding: 24px 20px; }
	.hx-phone { width: 240px; height: 500px; }
	.hx-faq__q { padding: 18px 20px; font-size: 15px; }
	.hx-faq__a { padding: 0 20px 20px; font-size: 14px; }

	.hx-integrations { grid-template-columns: repeat(2, 1fr); }
	.hx-specs__grid { grid-template-columns: 1fr; }
	.hx-compare__wrap { overflow-x: auto; }
	.hx-compare__table { min-width: 540px; }
	.hx-device__body { width: 220px; }
}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.hx-hero { padding: 80px 28px 60px; }
	.hx-hero__inner { grid-template-columns: 1fr; gap: 56px; }
	.hx-hero__col { max-width: 100%; }
	.hx-toast { left: auto; right: 16px; bottom: -16px; }
	.hx-bento, .hx-stats__list { grid-template-columns: repeat(2, 1fr); }
	.hx-bento__item { grid-column: span 1; }
	.hx-bento__item--xl,
	.hx-bento__item--feature { grid-column: span 2; grid-row: span 1; }
	.hx-bento__item--wide,
	.hx-bento__item--full    { grid-column: span 2; }
	.hx-sectors__grid { grid-template-columns: repeat(2, 1fr); }
	.hx-cycle__container { grid-template-columns: 1fr; gap: 40px; }
	.hx-cycle__sticky { position: static; }
}
@media (max-width: 640px) {
	.hx-bento, .hx-sectors__grid, .hx-stats__list { grid-template-columns: 1fr; }
	.hx-bento__item--xl, .hx-bento__item--wide,
	.hx-bento__item--feature, .hx-bento__item--full { grid-column: span 1; }
	.hx-bento__item--wide, .hx-bento__item--full {
		grid-template-columns: 1fr;
		grid-template-areas: "kicker" "h3" "p" "icon";
		padding: 28px;
	}
	.hx-bento__item--wide .hx-bento__ic,
	.hx-bento__item--full .hx-bento__ic { align-self: flex-start; }
	.hx-cycle__step { grid-template-columns: 50px 1fr; gap: 16px; padding: 20px 22px; }
	.hx-cycle__step .hx-cycle__icon { display: none; }
	.hx-cycle__steps::before { left: 25px; }
	.hx-cycle__num { width: 40px; height: 40px; font-size: 16px; }
	.hx-marquee__item { font-size: 20px; }
	.hx-trust { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-marquee__track, .hx-toast, .hx-eyebrow__dot, .hx-pill__dot { animation: none; }
	[data-ix], .hx-word > span { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   ✦ 3D Tilt en cards
   JS escribe el transform inline en mousemove. CSS solo aporta
   la transición suave de vuelta al reposo.
   ============================================================ */
[data-tilt] {
	transform-style: preserve-3d;
	transition: transform .5s var(--hx-easing), box-shadow .35s;
	will-change: transform;
}
[data-tilt].is-tilting {
	transition: transform .08s linear; /* sigue al cursor en hover */
}
/* Glow que se desplaza con el mouse dentro del card */
[data-tilt]::before {
	content:'';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		circle 260px at var(--mx, 50%) var(--my, 50%),
		rgba(255,255,255,.55),
		transparent 55%
	);
	opacity: 0;
	transition: opacity .35s;
	pointer-events: none;
	mix-blend-mode: overlay;
	z-index: 1;
}
[data-tilt].is-tilting::before { opacity: .4; }



@media (max-width: 1024px) {
	[data-tilt] { transform: none !important; }
	[data-tilt]::before { display: none; }
	[data-tilt] > * { transform: none !important; }
	.hx-stats, .hx-cycle, .hx-quote { clip-path: none; margin-top: 0; padding-top: clamp(80px,10vw,130px) !important; }
	.hx-section[data-stack] { transform: none !important; filter: none !important; opacity: 1 !important; }
	.hx-coverflow { perspective: 800px; height: auto; }
	.hx-coverflow__stage { height: auto; display: flex; flex-direction: column; gap: 20px; padding: 0 24px; }
	.hx-coverflow__card { position: relative; top: auto; left: auto; margin: 0; width: 100%; height: auto; transform: none !important; opacity: 1 !important; }
	.hx-coverflow__bar, .hx-coverflow__dots { display: none; }
	.hx-cycle__pin { min-height: auto; padding: clamp(80px,10vw,130px) 0; }
}
@media (prefers-reduced-motion: reduce) {
	[data-tilt] { transform: none !important; }
	[data-tilt] > * { transform: none !important; }
	.hx-cycle__steps.is-stacked .hx-cycle__step { position: static; }
}