/* =========================================================================
   HOME 2.5.0 — solo carga en la portada (functions.php → ainea_assets)

   El nivel de dapta.ai con la identidad de ainea: base Papel, tres escenarios oscuros (hero,
   agentes, cierre) y un solo acento azul. Todo usa el prefijo hm- y ninguna regla toca la home
   anterior (.hero, .trust, .plan-card…), que sigue en style.css sin pintarse.

   Mobile-first: lo de fuera de media query es el teléfono (casi todos agendan desde ahí).
   ========================================================================= */

/* -------- base -------- */
.hm-sec { position: relative; padding: 76px 0; }
@media (min-width: 860px) { .hm-sec { padding: 116px 0; } }

.hm-escena {
	--oscuro-2: #12121C; --oscuro-3: #191926; --linea-osc: rgba(250, 250, 247, 0.12);
	--texto-osc: #B5B5BD; --texto-osc-2: #8E8E98;
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--tinta); color: var(--papel);
}
.hm-escena .kicker { color: var(--azul-claro); }

.hm-cabeza { margin-bottom: 40px; }
@media (min-width: 860px) { .hm-cabeza { margin-bottom: 60px; } }
.hm-cabeza--centro { text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }
.hm-h2 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; }
.hm-escena .hm-h2 em { color: var(--azul-claro); }
.hm-h3 { font-size: clamp(25px, 3.1vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.hm-sub { font-size: 16px; line-height: 1.6; color: var(--gris); max-width: 58ch; margin: 18px auto 0; }
@media (min-width: 860px) { .hm-sub { font-size: 17.5px; } }
.hm-escena .hm-sub { color: var(--texto-osc); }
.hm-centro { text-align: center; margin-top: 40px; }
.hm-btn-flecha { white-space: nowrap; }

/* Titulares que entran palabra por palabra (main.js → .split-words) */
.hm-hero__h1 .w, .hm-cierre__t .w {
	display: inline-block; opacity: 0; transform: translateY(0.45em);
	transition: opacity 600ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-hero__h1.words-in .w, .hm-cierre__t.words-in .w { opacity: 1; transform: none; }

/* -------- cabecera oscura mientras está sobre el hero (home.js pone .is-pasado) -------- */
body.page-home .site-header { transition: background 250ms ease, border-color 250ms ease; }
/* Opaca: detrás de la cabecera sticky está el Papel del body, y un Tinta translúcido se vería gris. */
body.page-home .site-header:not(.is-pasado) { background: var(--tinta); border-bottom-color: rgba(250, 250, 247, 0.1); }
body.page-home .site-header:not(.is-pasado) .wordmark { color: var(--papel); }
body.page-home .site-header:not(.is-pasado) .site-nav > a,
body.page-home .site-header:not(.is-pasado) .nav-drop__btn { color: rgba(250, 250, 247, 0.9); }
body.page-home .site-header:not(.is-pasado) .site-nav > a:hover,
body.page-home .site-header:not(.is-pasado) .nav-drop:hover .nav-drop__btn { color: #fff; }
body.page-home .site-header:not(.is-pasado) .site-nav > a::after { background: var(--azul-claro); }
body.page-home .site-header:not(.is-pasado) .lang-switch { border-color: rgba(250, 250, 247, 0.22); }
body.page-home .site-header:not(.is-pasado) .lang-switch a { color: rgba(250, 250, 247, 0.72); }
body.page-home .site-header:not(.is-pasado) .lang-switch a.is-active { background: var(--papel); color: var(--tinta); }
body.page-home .site-header:not(.is-pasado) .header-actions .btn-ghost { color: var(--papel); border-color: rgba(250, 250, 247, 0.32); }
body.page-home .site-header:not(.is-pasado) .header-actions .btn-ghost:hover { border-color: var(--papel); background: rgba(250, 250, 247, 0.06); }
body.page-home .site-header:not(.is-pasado) .nav-toggle { color: var(--papel); }

/* =========================================================================
   HERO (2.6.2) — la estructura probada de dapta, con la identidad de ainea
   Todo centrado: titular → subtítulo → dos botones → clientes + línea de confianza →
   ventana del producto (el chat) sobre una franja de luz azul.
   ========================================================================= */
.hm-hero { padding: clamp(40px, 6vw, 76px) 0 0; text-align: center; }
.hm-hero__in { position: relative; z-index: 1; }

/* Luz de fondo: un halo arriba, detrás del titular. Se mueve muy despacio. */
.hm-hero__aura {
	position: absolute; z-index: -1; pointer-events: none;
	left: 50%; top: -320px; width: min(1500px, 240%); height: 900px; transform: translateX(-50%);
	background:
		radial-gradient(38% 34% at 50% 40%, rgba(36, 56, 255, 0.32) 0%, rgba(36, 56, 255, 0.08) 52%, transparent 74%),
		radial-gradient(24% 22% at 24% 58%, rgba(142, 151, 255, 0.08) 0%, transparent 70%),
		radial-gradient(24% 22% at 78% 62%, rgba(36, 56, 255, 0.10) 0%, transparent 70%);
	animation: hm-aura 18s ease-in-out infinite alternate;
}
@keyframes hm-aura { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-51.5%) scale(1.06); } }

.hm-hero__h1 {
	font-size: clamp(42px, 6.6vw, 80px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.04;
	max-width: 15ch; margin: 0 auto;
}
.hm-hero__h1 em {
	letter-spacing: -0.02em; padding-right: 0.06em;
	background: linear-gradient(100deg, #B9BFFF 0%, var(--azul-claro) 45%, #5B6BFF 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-hero__sub { font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.55; color: #C4C4CC; max-width: 640px; margin: 20px auto 0; }
.hm-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hm-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 28px; font-size: 16px; min-height: 52px; line-height: 24px;
	box-shadow: 0 0 0 1px rgba(142, 151, 255, 0.35), 0 14px 36px -12px rgba(36, 56, 255, 0.9);
	transition: background 150ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.hm-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(142, 151, 255, 0.5), 0 18px 40px -12px rgba(36, 56, 255, 1); }
.hm-btn-linea {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 28px; min-height: 52px; border-radius: 99px;
	border: 1.5px solid rgba(250, 250, 247, 0.55); color: var(--papel); background: transparent;
	font-size: 16px; font-weight: 600; transition: border-color 150ms ease, background 150ms ease;
}
.hm-btn-linea:hover { border-color: var(--papel); background: rgba(250, 250, 247, 0.06); }
@media (max-width: 479px) { .hm-hero__ctas > a { width: 100%; } }

/* Fila de clientes y línea de confianza */
.hm-confianza { margin-top: 44px; }
.hm-confianza__clientes {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 14px 40px; max-width: 860px; margin: 0 auto;
}
@media (min-width: 860px) { .hm-confianza__clientes { gap: 14px 64px; } }
.hm-confianza__clientes li {
	font-size: clamp(16px, 1.7vw, 21px); font-weight: 800; letter-spacing: -0.035em; white-space: nowrap;
	color: rgba(250, 250, 247, 0.72);
}
.hm-confianza__linea {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 8px 0; margin: 22px auto 0;
	font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #9C9CA8;
}
.hm-confianza__linea li { display: inline-flex; align-items: center; }
.hm-confianza__linea li + li::before { content: ''; width: 1px; height: 14px; margin: 0 16px; background: rgba(250, 250, 247, 0.22); }
@media (max-width: 639px) {
	.hm-confianza__linea { flex-direction: column; gap: 8px; font-size: 11px; letter-spacing: 0.1em; }
	.hm-confianza__linea li + li::before { display: none; }
}

/* La ventana del producto, sobre una franja de luz azul que la atraviesa a lo ancho */
.hm-hero__producto { position: relative; margin-top: 56px; padding-bottom: 72px; }
@media (min-width: 860px) { .hm-hero__producto { margin-top: 60px; padding-bottom: 96px; } }
.hm-hero__franja {
	position: absolute; z-index: 0; pointer-events: none;
	left: 0; right: 0; top: -70px; height: 300px;
	background:
		radial-gradient(42% 46% at 50% 55%, rgba(36, 56, 255, 0.6) 0%, rgba(36, 56, 255, 0) 72%),
		radial-gradient(30% 42% at 12% 60%, rgba(142, 151, 255, 0.42) 0%, rgba(142, 151, 255, 0) 70%),
		radial-gradient(30% 42% at 88% 60%, rgba(17, 28, 184, 0.75) 0%, rgba(17, 28, 184, 0) 70%);
	filter: blur(34px);
	animation: hm-franja 14s ease-in-out infinite alternate;
}
@keyframes hm-franja { from { transform: translateX(-2%) scaleY(1); } to { transform: translateX(2%) scaleY(1.12); } }
.hm-hero__producto > .container { position: relative; z-index: 1; }
.hm-hero__ventana { max-width: 980px; margin: 0 auto; text-align: left; }
.hm-hero__ventana > .pm { max-width: 640px; margin: 0 auto; }
/* La ventana va oscura, como la de la referencia: se funde con el escenario y la luz. */
.hm-hero .aichat--ventana {
	--ac-bg: #13131D;
	--ac-fg: var(--papel);
	--ac-muted: #B5B5BD;
	--ac-suave: var(--gris-suave);
	--ac-line: rgba(250, 250, 247, 0.1);
	--ac-line-fuerte: rgba(250, 250, 247, 0.22);
	--ac-bubble: rgba(250, 250, 247, 0.08);
	--ac-composer: rgba(250, 250, 247, 0.04);
	--ac-sug: rgba(250, 250, 247, 0.03);
	--ac-sug-hover: rgba(250, 250, 247, 0.07);
	--ac-link: var(--azul-claro);
	--ac-avatar-bg: var(--papel);
	--ac-avatar-fg: var(--tinta);
	--ac-avatar-dot: var(--azul);
	border-color: rgba(250, 250, 247, 0.12);
	box-shadow: 0 0 0 1px rgba(250, 250, 247, 0.04), 0 40px 100px -30px rgba(0, 0, 0, 0.85);
}
.hm-hero__nota { font-size: 13.5px; color: #9C9CA8; margin-top: 16px; text-align: center; }

/* ---- 2.6.3 · la palabra en serif rota (home.js §4) ---- */
.hm-br { display: none; }
@media (min-width: 720px) { .hm-br { display: inline; } }
.hm-hero__h1 em.hm-rota {
	position: relative; display: inline-block; white-space: nowrap; text-align: left;
	padding-right: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit;
	transition: width 560ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-rota__p {
	display: inline-block; padding-right: 0.08em;
	background: linear-gradient(100deg, #B9BFFF 0%, var(--azul-claro) 45%, #5B6BFF 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-rota__p.is-sale { animation: hm-rota-sale 300ms cubic-bezier(0.7, 0, 0.84, 0) forwards; }
.hm-rota__p.is-entra { animation: hm-rota-entra 640ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hm-rota-sale { to { opacity: 0; transform: translateY(-0.34em); filter: blur(8px); } }
@keyframes hm-rota-entra { from { opacity: 0; transform: translateY(0.4em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.hm-rota__medidor { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; padding-right: 0.08em; pointer-events: none; }

/* ---- 2.6.3 · el chat no se pierde en el negro: luz que respira detrás y borde de luz que gira ---- */
.hm-hero__ventana { position: relative; isolation: isolate; }
.hm-hero__ventana:has(.aichat)::before {
	/* Un rectángulo azul desenfocado detrás de la ventana: el halo sale parejo por los cuatro bordes. */
	content: ''; position: absolute; z-index: -2; inset: 3% 2% 0; pointer-events: none; border-radius: 48px;
	background: linear-gradient(90deg, #2438FF 0%, #6876FF 50%, #2438FF 100%);
	filter: blur(64px);
	animation: hm-respira 6s ease-in-out infinite;
}
@keyframes hm-respira { 0%, 100% { opacity: 0.55; transform: scale(0.98); } 50% { opacity: 0.9; transform: scale(1.03); } }
@property --hm-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hm-hero__ventana:has(.aichat)::after {
	content: ''; position: absolute; z-index: -1; inset: -1.5px; border-radius: 21.5px; pointer-events: none;
	background: conic-gradient(from var(--hm-ang), rgba(142, 151, 255, 0.16) 0deg, rgba(142, 151, 255, 0.16) 200deg, #8E97FF 262deg, #2438FF 300deg, rgba(142, 151, 255, 0.16) 345deg);
	animation: hm-giro 6s linear infinite;
}
@keyframes hm-giro { to { --hm-ang: 360deg; } }
.hm-hero .aichat--ventana {
	background: radial-gradient(90% 55% at 50% 0%, rgba(36, 56, 255, 0.2), transparent 66%), var(--ac-bg);
	border-color: transparent;
	box-shadow: 0 0 0 1px rgba(142, 151, 255, 0.14), 0 0 50px 2px rgba(36, 56, 255, 0.42), 0 0 130px 16px rgba(36, 56, 255, 0.22), 0 40px 100px -30px rgba(0, 0, 0, 0.85);
}
.hm-hero .aichat--ventana .aichat__avatar--lg { animation: hm-latido-av 2.8s ease-out infinite; }
@keyframes hm-latido-av {
	0% { box-shadow: 0 0 0 0 rgba(142, 151, 255, 0.5), 0 0 36px rgba(36, 56, 255, 0.55); }
	70% { box-shadow: 0 0 0 16px rgba(142, 151, 255, 0), 0 0 36px rgba(36, 56, 255, 0.55); }
	100% { box-shadow: 0 0 0 0 rgba(142, 151, 255, 0), 0 0 36px rgba(36, 56, 255, 0.55); }
}
.hm-hero .aichat--ventana .aichat__campo { border-color: rgba(142, 151, 255, 0.42); box-shadow: 0 0 0 4px rgba(36, 56, 255, 0.08), 0 12px 32px -12px rgba(36, 56, 255, 0.7); }
.hm-hero .aichat--ventana .aichat__sug-btn:hover { border-color: rgba(142, 151, 255, 0.55); }

/* =========================================================================
   CIFRAS (2.6.3) — una hoja de cuaderno con anotaciones a mano
   Hoja sobre hoja, cinta, renglones, línea de margen, cifras en círculos hechos a mano,
   notas en serif, un trazo de lápiz que se dibuja con el scroll y garabatos que se mueven.
   ========================================================================= */
.hm-cifras { overflow: hidden; }
.hm-hoja-marco { position: relative; max-width: 1060px; margin: 0 auto; }
/* La hoja de abajo, un poco girada */
.hm-hoja-marco::before {
	content: ''; position: absolute; inset: 0; border-radius: 4px; background: #F1EFE6;
	transform: rotate(2deg) translate(10px, 12px);
	box-shadow: 0 18px 40px -26px rgba(12, 12, 20, 0.35);
}
.hm-hoja {
	position: relative; padding: 70px 22px 46px 50px; border-radius: 4px;
	background-color: #FFFEFA;
	background-image: repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(12, 12, 20, 0.065) 35px, rgba(12, 12, 20, 0.065) 36px);
	background-position: 0 24px;
	box-shadow: 0 1px 1px rgba(12, 12, 20, 0.05), 0 26px 56px -30px rgba(12, 12, 20, 0.38), 0 8px 18px -12px rgba(12, 12, 20, 0.12);
	transform: rotate(-0.5deg);
}
/* Línea de margen, como en un cuaderno */
.hm-hoja::after { content: ''; position: absolute; top: 0; bottom: 0; left: 34px; width: 1.5px; background: rgba(36, 56, 255, 0.26); }
@media (min-width: 860px) {
	.hm-hoja { padding: 84px 64px 64px 104px; }
	.hm-hoja::after { left: 66px; }
}
.hm-hoja__cinta {
	position: absolute; top: -15px; z-index: 3; width: 118px; height: 32px;
	background: rgba(214, 219, 255, 0.7); box-shadow: 0 2px 6px rgba(12, 12, 20, 0.08);
	clip-path: polygon(0 10%, 5% 0, 30% 6%, 60% 0, 95% 5%, 100% 0, 97% 50%, 100% 100%, 94% 93%, 62% 100%, 30% 94%, 4% 100%, 0 88%, 3% 50%);
}
.hm-hoja__cinta--1 { left: 10%; transform: rotate(-5deg); }
.hm-hoja__cinta--2 { right: 9%; transform: rotate(4deg); }

/* Garabatos que se mueven */
.hm-garabato { position: absolute; z-index: 1; color: var(--tinta); animation: hm-garabato 5s ease-in-out infinite alternate; }
.hm-garabato--1 { width: 26px; height: 26px; top: 36px; right: 14%; }
.hm-garabato--2 { width: 18px; height: 18px; top: 44%; right: 3.5%; animation-delay: -1.6s; }
.hm-garabato--3 { width: 15px; height: 15px; top: 62%; left: 2.4%; animation-delay: -2.8s; }
.hm-garabato--4 { width: 46px; height: 46px; bottom: 22px; right: 5%; animation-delay: -3.6s; }
@keyframes hm-garabato { from { transform: rotate(-9deg) translateY(0); } to { transform: rotate(10deg) translateY(-6px); } }
@media (max-width: 639px) { .hm-garabato--2, .hm-garabato--3 { display: none; } .hm-garabato--1 { right: 8%; top: 26px; } }

/* Cabeza de la hoja */
.hm-hoja__cabeza { position: relative; text-align: center; max-width: 660px; margin: 0 auto 44px; }
.hm-hoja__tachado {
	position: absolute; left: 0; top: -44px; display: inline-block;
	font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gris); transform: rotate(-6deg);
}
.hm-hoja__tachado .doodle { position: absolute; left: -8%; top: 22%; width: 116%; height: 62%; color: var(--tinta); }
.hm-hoja__tachado .draw svg path { transition-delay: 500ms; transition-duration: 700ms; }
@media (min-width: 860px) { .hm-hoja__tachado { left: -6%; top: -48px; font-size: 23px; } }
.hm-hoja__margen {
	display: inline-flex; align-items: flex-end; gap: 4px; margin-top: 12px;
	font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--gris);
	transform: rotate(-3deg) translateX(18%);
}
.hm-hoja__margen .doodle { width: 44px; height: 36px; color: var(--tinta); }
.hm-hoja__margen .draw svg path { transition-delay: 700ms; }

/* Las cuatro notas */
.hm-notas { position: relative; }
.hm-notas__trazo { display: none; }
@media (min-width: 860px) {
	.hm-notas__trazo {
		display: block; position: absolute; left: -2%; top: 4px; width: 104%; height: auto; aspect-ratio: 1000 / 140;
		overflow: visible; pointer-events: none; z-index: 0;
	}
	.hm-notas__trazo path { fill: none; stroke: rgba(12, 12, 20, 0.28); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; }
}
.hm-notas__lista { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
@media (min-width: 860px) { .hm-notas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.hm-nota { text-align: center; }
.hm-nota.fade { transition-delay: calc(var(--i, 0) * 110ms); }
.hm-nota__cifra {
	position: relative; display: grid; place-items: center;
	width: min(100%, 210px); aspect-ratio: 150 / 70; margin: 0 auto;
}
.hm-nota__aro { position: absolute; inset: -6% -4%; width: auto; height: auto; }
.hm-nota__aro svg { width: 100%; height: 100%; }
.hm-nota .hm-nota__aro.draw svg path { transition-duration: 1.1s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i, 0) * 180ms + 150ms); }
.hm-nota__n { position: relative; font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-nota--acento .hm-nota__n { color: var(--azul); }
.hm-nota__u { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; }
.hm-nota__l { font-size: 13.5px; line-height: 1.45; color: var(--gris); max-width: 22ch; margin: 12px auto 0; }
@media (min-width: 860px) { .hm-nota__l { font-size: 14.5px; } }
.hm-nota__mano {
	position: relative; display: inline-block; margin-top: 14px;
	font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.2; color: var(--tinta);
	transform: rotate(-2.5deg);
}
.hm-nota:nth-child(even) .hm-nota__mano { transform: rotate(2deg); }
@media (min-width: 860px) { .hm-nota__mano { font-size: 20px; } }
.hm-nota__mano span { position: relative; z-index: 1; }
@media (min-width: 860px) { .hm-nota__mano span { white-space: nowrap; } }
.hm-nota__mano .doodle { position: absolute; left: -4%; bottom: -9px; width: 108%; height: 12px; color: var(--gris-suave); }
.hm-nota .hm-nota__mano .draw svg path { transition-delay: calc(var(--i, 0) * 180ms + 950ms); }

/* =========================================================================
   AGENTES — la sección estrella
   ========================================================================= */
.hm-agentes { padding: 84px 0 76px; }
@media (min-width: 860px) { .hm-agentes { padding: 128px 0 108px; } }
.hm-agentes__aura {
	position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background:
		radial-gradient(50% 30% at 50% 0%, rgba(36, 56, 255, 0.28), transparent 70%),
		radial-gradient(40% 30% at 85% 100%, rgba(36, 56, 255, 0.16), transparent 70%);
}

/* Teléfono: carrusel horizontal con snap, se asoma la siguiente tarjeta */
.hm-agentes__lista {
	list-style: none; display: flex; gap: 14px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: 16px 20px 28px; scroll-padding: 0 20px;
	scrollbar-width: none;
}
.hm-agentes__lista::-webkit-scrollbar { display: none; }
.hm-agente { flex: 0 0 min(80%, 300px); scroll-snap-align: start; }
@media (min-width: 640px) {
	.hm-agentes__lista {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
		overflow: visible; max-width: 1120px; margin: 0 auto; padding: 16px 20px 8px;
	}
}
@media (min-width: 1024px) {
	.hm-agentes__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 16px 32px 8px; }
}

.hm-agente {
	position: relative; display: flex; flex-direction: column;
	padding: 26px 20px 20px; border-radius: 24px;
	background: radial-gradient(120% 55% at 50% 0%, rgba(36, 56, 255, 0.18), transparent 62%), var(--oscuro-2);
	border: 1px solid rgba(250, 250, 247, 0.08);
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease, box-shadow 280ms ease;
}
.hm-agente--insignia { border-color: rgba(36, 56, 255, 0.55); }
.hm-agente--medida { border-style: dashed; border-color: rgba(250, 250, 247, 0.2); background: var(--oscuro-2); }
.hm-agente__badge {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
	padding: 5px 11px; border-radius: 99px; background: var(--azul); color: #fff;
	box-shadow: 0 6px 18px -6px rgba(36, 56, 255, 0.8);
}
.hm-agente__nombre {
	display: flex; align-items: center; justify-content: center; min-height: 2.7em;
	font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
	text-align: center; color: var(--azul-claro);
}
.hm-agente__fig { position: relative; width: 82%; max-width: 230px; aspect-ratio: 1; margin: 4px auto 14px; }
.hm-agente__fig::after {
	content: ''; position: absolute; left: 24%; right: 24%; bottom: 7%; height: 7%; z-index: 0;
	border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
	animation: hm-sombra 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s);
}
/* 2.8.0: halo de luz detrás del personaje, para que los frijolitos negros no se pierdan en la tarjeta. */
.hm-agente__fig::before {
	content: ''; position: absolute; inset: 8% 12% 14%; z-index: 0; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(142, 151, 255, 0.30), rgba(142, 151, 255, 0.08) 60%, transparent);
}
.hm-agente__img {
	position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
	animation: hm-flota 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s);
	transition: scale 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hm-flota { 50% { transform: translateY(-8px); } }
@keyframes hm-sombra { 50% { transform: scaleX(0.84); opacity: 0.6; } }
/* Respaldo mientras no está la imagen del personaje */
.hm-agente__ph { position: absolute; inset: 14%; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: var(--oscuro-3); color: var(--papel); }
.hm-agente__ph .doodle { width: 46%; }
.hm-agente__punto { position: absolute; top: 20%; right: 20%; width: 12px; height: 12px; border-radius: 50%; background: var(--azul); }

.hm-agente__checks { list-style: none; display: grid; gap: 10px; align-content: start; flex: 1; }
.hm-agente__checks li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; font-size: 14px; line-height: 1.4; color: #DADADF; }
.hm-agente__checks svg { width: 18px; height: 18px; margin-top: 1px; color: rgba(250, 250, 247, 0.32); transition: color 250ms ease; }
.hm-agente__texto { flex: 1; font-size: 14.5px; line-height: 1.55; color: #DADADF; text-align: center; }
.hm-agente__nota { font-size: 12px; line-height: 1.45; color: var(--texto-osc-2); margin-top: 14px; }
.hm-agente__cta {
	display: block; margin-top: 18px; padding: 12px 16px; border-radius: 14px; text-align: center;
	font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
	background: var(--papel); color: var(--tinta); transition: background 200ms ease, color 200ms ease;
}
.hm-agente__cta:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
@media (hover: hover) {
	.hm-agente:hover { transform: translateY(-5px); border-color: rgba(36, 56, 255, 0.75); box-shadow: 0 24px 60px -24px rgba(36, 56, 255, 0.55); }
	.hm-agente:hover .hm-agente__checks svg { color: var(--azul-claro); }
	.hm-agente:hover .hm-agente__cta { background: var(--azul); color: #fff; }
	.hm-agente:hover .hm-agente__img { scale: 1.05; }
}

.hm-reglas { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 40px; }
.hm-reglas li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--texto-osc); }
.hm-reglas i { width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex: none; }

/* =========================================================================
   CÓMO FUNCIONA — filas alternas
   ========================================================================= */
.hm-fila { display: grid; gap: 34px; align-items: center; padding: 26px 0; }
@media (min-width: 960px) {
	.hm-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; padding: 52px 0; }
	.hm-fila--inversa .hm-fila__texto { order: 2; }
}
.hm-fila__kicker {
	display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul);
}
.hm-fila__kicker span { color: var(--gris-suave); font-variant-numeric: tabular-nums; }
.hm-fila__p { font-size: 16.5px; line-height: 1.6; color: var(--gris); margin-top: 14px; max-width: 46ch; }
.hm-fila__bullets { list-style: none; display: grid; gap: 11px; margin-top: 22px; }
.hm-fila__bullets li { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; font-size: 15px; line-height: 1.5; }
.hm-fila__bullets svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); }
.hm-fila__cta { margin-top: 28px; }
.hm-fila__mock { position: relative; }
.hm-fila__mock::before {
	content: ''; position: absolute; z-index: -1; inset: 6% 4%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(36, 56, 255, 0.14), transparent); filter: blur(12px);
}
.hm-fila__mock .pm, .hm-panel__mock .pm { max-width: 520px; margin: 0 auto; }
.hm-demo__chat { padding: 16px; max-width: none; }
.hm-demo__ok { display: table; margin: 4px auto 8px; }

/* =========================================================================
   SECTORES — pestañas
   ========================================================================= */
.hm-sectores { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.hm-tabs:not(.hm-tabs--js) .hm-tabs__lista { display: none; }
.hm-tabs:not(.hm-tabs--js) .hm-panel + .hm-panel { margin-top: 56px; }
.hm-tabs__lista {
	display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
	margin: 0 -20px 34px; padding: 0 20px; border-bottom: 1px solid var(--linea);
}
.hm-tabs__lista::-webkit-scrollbar { display: none; }
@media (min-width: 860px) { .hm-tabs__lista { justify-content: center; margin: 0 0 52px; padding: 0; } }
.hm-tabs__tab {
	flex: none; white-space: nowrap; cursor: pointer;
	font: 600 15px var(--sans); color: var(--gris);
	padding: 14px 16px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}
.hm-tabs__tab:hover { color: var(--tinta); }
.hm-tabs__tab[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--azul); }
.hm-tabs__tab:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; border-radius: 8px 8px 0 0; }
.hm-panel { display: grid; gap: 30px; align-items: center; }
.hm-panel:focus-visible { outline: 2px solid var(--azul); outline-offset: 8px; border-radius: 12px; }
@media (min-width: 960px) { .hm-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.hm-tabs--js .hm-tabs__paneles { display: grid; }
.hm-tabs--js .hm-panel {
	grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity 350ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 350ms;
}
.hm-tabs--js .hm-panel.is-activo { opacity: 1; visibility: visible; transform: none; transition: opacity 350ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
.hm-panel__p { font-size: 16.5px; line-height: 1.6; color: var(--gris); margin-top: 14px; max-width: 46ch; }
.hm-panel .hm-fila__bullets { margin: 20px 0 28px; }

/* =========================================================================
   CASO
   ========================================================================= */
.hm-caso { padding-bottom: 40px; }
@media (min-width: 860px) { .hm-caso { padding-bottom: 56px; } }
.hm-caso__tarjeta { display: grid; overflow: hidden; border-radius: 28px; background: var(--tinta); color: var(--papel); }
@media (min-width: 860px) { .hm-caso__tarjeta { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.hm-caso__texto { padding: 34px 24px; }
@media (min-width: 860px) { .hm-caso__texto { padding: 58px 56px; } }
.hm-caso__lugar { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul-claro); }
.hm-caso__lugar svg { width: 16px; height: 16px; }
.hm-caso__cita { font-size: clamp(23px, 2.9vw, 33px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.22; margin-top: 18px; }
.hm-caso__cita em { color: var(--azul-claro); }
.hm-caso__quien { margin-top: 22px; font-size: 14px; color: #B5B5BD; }
.hm-caso__quien b { color: var(--papel); }
.hm-caso__lado {
	display: grid; place-items: center; min-height: 190px; padding: 32px;
	background: radial-gradient(75% 75% at 65% 35%, rgba(36, 56, 255, 0.5), transparent 70%), #141422;
}
.hm-caso__marca { display: grid; justify-items: center; gap: 10px; color: var(--papel); text-align: center; }
.hm-caso__marca svg { width: 44px; height: 44px; color: var(--azul-claro); }
.hm-caso__marca b { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.04em; }
.hm-caso__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; width: 100%; }
.hm-caso__stats dt { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.hm-caso__stats div:first-child dt { color: var(--azul-claro); }
.hm-caso__stats dd { font-size: 13px; color: #B5B5BD; margin-top: 6px; }
.hm-caso__tst { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 860px) { .hm-caso__tst { grid-template-columns: 1fr 1fr; } }
.hm-tst { background: var(--blanco); border: 1px solid var(--linea); border-radius: 22px; padding: 26px; transition-delay: calc(var(--i, 0) * 90ms); }
.hm-tst blockquote { font-size: 16px; line-height: 1.6; }
.hm-tst figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; font-size: 13.5px; color: var(--gris); }
.hm-tst figcaption a b { color: var(--tinta); }
.hm-tst figcaption a:hover b { color: var(--azul); }

/* =========================================================================
   MÉTODO
   ========================================================================= */
.hm-metodo { padding-top: 56px; }
@media (min-width: 860px) { .hm-metodo { padding-top: 80px; } }
.hm-pasos { list-style: none; display: grid; gap: 16px; }
@media (min-width: 860px) { .hm-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hm-paso {
	position: relative; padding: 28px 26px 30px; border-radius: 24px;
	background: var(--blanco); border: 1px solid var(--linea);
	transition: border-color 250ms ease, transform 250ms ease; transition-delay: 0s;
}
.hm-paso.fade { transition: opacity 0.7s ease, transform 0.7s ease, border-color 250ms ease; transition-delay: calc(var(--i, 0) * 110ms); }
@media (hover: hover) { .hm-paso:hover { border-color: var(--tinta); } }
.hm-paso__num { font-size: 13px; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.hm-paso__doodle { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; color: var(--tinta); }
.hm-paso__t { font-size: 21px; font-weight: 800; letter-spacing: -0.035em; margin-top: 28px; }
.hm-paso__p { font-size: 15px; line-height: 1.6; color: var(--gris); margin-top: 10px; }

/* =========================================================================
   PLANES
   ========================================================================= */
.hm-planes { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.hm-planes__grid { display: grid; gap: 18px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 960px) { .hm-planes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; } }
.hm-plan {
	position: relative; display: flex; flex-direction: column;
	padding: 28px 24px; border-radius: 26px; background: var(--papel); border: 1px solid var(--linea);
}
.hm-plan.fade { transition-delay: calc(var(--i, 0) * 100ms); }
@media (min-width: 860px) { .hm-plan { padding: 34px 30px; } }
.hm-plan--top { background: var(--tinta); color: var(--papel); border-color: var(--tinta); box-shadow: 0 34px 80px -34px rgba(36, 56, 255, 0.6); }
@media (min-width: 960px) { .hm-plan--top { margin-top: -14px; } }
.hm-plan__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-plan__nombre { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.hm-plan__badge { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--azul); color: #fff; white-space: nowrap; }
.hm-plan__badge--suave { background: var(--azul-suave); color: var(--azul-tinta); }
.hm-plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 22px; }
.hm-plan__desde { width: 100%; font-size: 13.5px; color: var(--gris); }
.hm-plan__num { font-size: clamp(46px, 5.2vw, 58px); font-weight: 800; letter-spacing: -0.055em; line-height: 1; }
.hm-plan__unidad { font-size: 14px; color: var(--gris); }
.hm-plan__setup { align-self: flex-start; margin-top: 12px; padding: 7px 12px; border-radius: 10px; font-size: 13px; color: var(--gris); background: var(--blanco); border: 1px solid var(--linea); }
.hm-plan__cta { margin-top: 22px; width: 100%; text-align: center; }
.hm-plan__tag { font-size: 14.5px; line-height: 1.5; color: var(--gris); margin-top: 20px; }
.hm-plan__promo { font-size: 13.5px; line-height: 1.5; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--azul-suave); color: var(--azul-tinta); }
.hm-plan__hereda { font-size: 13.5px; color: var(--gris); margin-top: 18px; }
.hm-plan__hereda strong { color: var(--tinta); }
.hm-plan__feat { list-style: none; display: grid; gap: 11px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--linea); }
.hm-plan__feat li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.hm-plan__feat svg { width: 20px; height: 20px; color: var(--azul); }
.hm-plan__feat strong { font-weight: 700; }
.hm-plan--top .hm-plan__desde, .hm-plan--top .hm-plan__unidad, .hm-plan--top .hm-plan__tag, .hm-plan--top .hm-plan__hereda { color: #B5B5BD; }
.hm-plan--top .hm-plan__hereda strong { color: var(--papel); }
.hm-plan--top .hm-plan__setup { background: rgba(250, 250, 247, 0.06); border-color: rgba(250, 250, 247, 0.12); color: #D0D0D6; }
.hm-plan--top .hm-plan__feat { border-top-color: rgba(250, 250, 247, 0.12); }
.hm-plan--top .hm-plan__feat svg { color: var(--azul-claro); }
.hm-planes__nota { text-align: center; font-size: 14px; color: var(--gris); margin-top: 30px; }

/* =========================================================================
   PREGUNTAS
   ========================================================================= */
.hm-faq__grid { display: grid; gap: 34px; }
@media (min-width: 960px) {
	.hm-faq__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
	.hm-faq__lado { position: sticky; top: 112px; }
}
.hm-faq__cta-t { font-size: 15.5px; line-height: 1.6; color: var(--gris); margin-top: 20px; max-width: 34ch; }
.hm-faq__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hm-faq__item { border: 1px solid var(--linea); border-radius: 18px; background: var(--blanco); transition: border-color 200ms ease; }
.hm-faq__item + .hm-faq__item { margin-top: 10px; }
.hm-faq__item[open] { border-color: var(--tinta); }
.hm-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 19px 20px; cursor: pointer; list-style: none;
	font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4;
}
.hm-faq__item summary::-webkit-details-marker { display: none; }
.hm-faq__item summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 18px; }
.hm-faq__item summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea); transition: background 250ms ease, border-color 250ms ease; }
.hm-faq__item summary i::before, .hm-faq__item summary i::after {
	content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; border-radius: 2px;
	background: var(--tinta); transform: translate(-50%, -50%); transition: transform 250ms ease, background 250ms ease;
}
.hm-faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.hm-faq__item[open] summary i { background: var(--tinta); border-color: var(--tinta); }
.hm-faq__item[open] summary i::before, .hm-faq__item[open] summary i::after { background: #fff; }
.hm-faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.hm-faq__r { overflow: hidden; }
.hm-faq__r p { padding: 0 20px 20px; font-size: 15px; line-height: 1.65; color: var(--gris); }

/* =========================================================================
   CIERRE
   ========================================================================= */
.hm-cierre { padding: 92px 0 0; text-align: center; }
@media (min-width: 860px) { .hm-cierre { padding-top: 132px; } }
.hm-cierre__aura {
	position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background:
		radial-gradient(45% 40% at 50% 100%, rgba(36, 56, 255, 0.45), transparent 72%),
		radial-gradient(30% 25% at 50% 0%, rgba(36, 56, 255, 0.14), transparent 70%);
}
.hm-cierre__t { font-size: clamp(38px, 6.6vw, 74px); font-weight: 800; letter-spacing: -0.055em; line-height: 1.02; max-width: 15ch; margin: 0 auto; }
.hm-cierre__t em { color: var(--azul-claro); letter-spacing: -0.02em; }
.hm-cierre__sub { font-size: 17px; line-height: 1.6; color: var(--texto-osc); max-width: 52ch; margin: 24px auto 0; }
.hm-cierre .hm-centro { margin-top: 32px; }
.hm-cierre__nota { font-size: 13px; color: var(--texto-osc-2); margin-top: 14px; }
.hm-cierre__grupo { max-width: 960px; margin: 52px auto 0; }
.hm-cierre__grupo img { width: 100%; height: auto; margin-bottom: -1px; }
/* 2.7.1: la escena trae su propio fondo oscuro; la máscara funde los bordes con la sección. */
.hm-cierre__grupo--escena { max-width: 1120px; margin-top: 20px; }
.hm-cierre__grupo--escena img {
	mix-blend-mode: lighten; /* el aura de la sección se ve a través del fondo oscuro de la escena */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
	mask-composite: intersect;
}
.hm-cierre:not(:has(.hm-cierre__grupo)) { padding-bottom: 96px; }

/* =========================================================================
   2.6.4 — más grande, más oscuro, más vivo
   · tarjetas de agentes más grandes (como la referencia)
   · Sectores y Método pasan a escenarios oscuros
   · garabatos de la marca que flotan, notas a mano, flechas que se dibujan y el flujo
     con el punto azul que viaja
   ========================================================================= */

/* ---- tarjetas de agentes más grandes ---- */
.hm-agente { flex-basis: min(84%, 330px); padding: 30px 22px 22px; border-radius: 26px; }
@media (min-width: 640px) { .hm-agentes__lista { max-width: 1180px; gap: 20px; } }
@media (min-width: 1024px) { .hm-agentes__lista { max-width: 1320px; gap: 22px; padding: 18px 32px 8px; } }
.hm-agente__nombre { font-size: 17.5px; min-height: 2.6em; }
.hm-agente__fig { width: 100%; max-width: 270px; margin: 2px auto 16px; }
.hm-agente__fig::after { bottom: 5%; }
.hm-agente__checks { gap: 12px; }
.hm-agente__checks li { grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; }
.hm-agente__checks svg { width: 20px; height: 20px; }
.hm-agente__texto { font-size: 16px; }
.hm-agente__nota { font-size: 12.5px; }
.hm-agente__cta { margin-top: 20px; padding: 14px 16px; font-size: 15px; border-radius: 16px; }
@media (min-width: 1024px) { .hm-agente { min-height: 560px; } }

/* ---- garabatos que flotan de fondo (ainea_home_garabatos) ---- */
.hm-flotadores { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hm-sec > .container { position: relative; z-index: 1; }
.hm-flotador {
	position: absolute; color: var(--tinta); opacity: 0.5;
	animation: hm-flotar 7s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
@keyframes hm-flotar {
	from { transform: translateY(0) rotate(calc(var(--r, 8deg) * -1)); }
	to { transform: translateY(-16px) rotate(var(--r, 8deg)); }
}
.hm-escena .hm-flotador { color: var(--papel); opacity: 0.38; }
.hm-escena .hm-flotador .dd-blue { color: var(--azul-claro); }
@media (max-width: 639px) { .hm-flotador:nth-child(n+4) { display: none; } }

/* Subrayados a mano sobre fondo oscuro */
.hm-escena .u-underline .u-underline__svg { color: var(--papel); }
.hm-escena .u-underline .u-underline__svg .dd-blue { color: var(--azul-claro); }

/* ---- notas a mano (comunes) ---- */
.hm-fila__nota, .hm-caso__nota, .hm-plan__nota, .hm-faq__nota {
	display: inline-flex; align-items: flex-end; gap: 6px;
	font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.15; color: var(--gris);
}
.hm-fila__nota .doodle, .hm-caso__nota .doodle, .hm-plan__nota .doodle, .hm-faq__nota .doodle { width: 46px; height: 38px; flex: none; color: var(--tinta); }

/* ---- cómo funciona: notas junto a cada maqueta y flechas entre filas ---- */
.hm-fila__mock { position: relative; }
.hm-fila__nota { position: absolute; z-index: 2; right: -6px; bottom: -46px; transform: rotate(-4deg); }
.hm-fila--inversa .hm-fila__nota { right: auto; left: -6px; flex-direction: row-reverse; transform: rotate(3deg); }
.hm-fila__nota .draw svg path { transition-delay: 600ms; }
@media (min-width: 1200px) {
	.hm-fila__nota { right: -120px; bottom: 18%; }
	.hm-fila--inversa .hm-fila__nota { left: -120px; }
}
.hm-fila__flecha { display: none; }
@media (min-width: 960px) {
	.hm-fila__flecha { display: block; width: 120px; height: 96px; margin: -34px auto -20px; color: var(--azul); opacity: 0.85; }
	.hm-fila__flecha .doodle { width: 100%; height: 100%; color: var(--azul); }
	.hm-fila__flecha--a { transform: rotate(78deg) scaleY(-1); }
	.hm-fila__flecha--b { transform: rotate(102deg); }
	.hm-fila__flecha .draw svg path { transition-duration: 1.2s; }
}

/* ---- sectores en oscuro ---- */
.hm-sectores.hm-escena { border: 0; background: var(--tinta); }
.hm-sectores__aura {
	position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background:
		radial-gradient(40% 35% at 85% 20%, rgba(36, 56, 255, 0.24), transparent 70%),
		radial-gradient(40% 35% at 10% 85%, rgba(36, 56, 255, 0.18), transparent 70%);
}
.hm-escena .hm-tabs__lista { border-bottom-color: rgba(250, 250, 247, 0.12); }
.hm-escena .hm-tabs__tab { color: #9C9CA8; }
.hm-escena .hm-tabs__tab:hover { color: var(--papel); }
.hm-escena .hm-tabs__tab[aria-selected="true"] { color: var(--papel); border-bottom-color: var(--azul-claro); }
.hm-escena .hm-panel__p, .hm-escena .hm-fila__p { color: #B5B5BD; }
.hm-escena .hm-fila__bullets li { color: #E4E4EA; }
.hm-escena .hm-fila__bullets svg { background: rgba(142, 151, 255, 0.16); color: var(--azul-claro); }
.hm-escena .btn-ghost { color: var(--papel); border-color: rgba(250, 250, 247, 0.32); }
.hm-escena .btn-ghost:hover { border-color: var(--papel); background: rgba(250, 250, 247, 0.06); }
.hm-escena .hm-panel__mock .pm { box-shadow: 0 0 0 1px rgba(250, 250, 247, 0.06), 0 30px 80px -24px rgba(36, 56, 255, 0.55); }
.hm-escena .hm-panel__mock { position: relative; }
.hm-escena .hm-panel__mock::before {
	content: ''; position: absolute; z-index: -1; inset: 8% 6%; pointer-events: none; border-radius: 40px;
	background: var(--azul); opacity: 0.35; filter: blur(60px);
}

/* ---- método en oscuro + el flujo ---- */
.hm-metodo.hm-escena { padding-top: 96px; }
@media (min-width: 860px) { .hm-metodo.hm-escena { padding-top: 120px; } }
.hm-metodo__aura {
	position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background:
		radial-gradient(45% 35% at 50% 0%, rgba(36, 56, 255, 0.26), transparent 70%),
		radial-gradient(35% 30% at 90% 90%, rgba(36, 56, 255, 0.14), transparent 70%);
}
.hm-escena .hm-paso { background: radial-gradient(120% 60% at 50% 0%, rgba(36, 56, 255, 0.14), transparent 62%), var(--oscuro-2); border-color: rgba(250, 250, 247, 0.09); }
@media (hover: hover) { .hm-escena .hm-paso:hover { border-color: rgba(142, 151, 255, 0.55); } }
.hm-escena .hm-paso__num { color: var(--azul-claro); }
.hm-escena .hm-paso__doodle { color: var(--papel); }
.hm-escena .hm-paso__doodle .dd-blue { color: var(--azul-claro); }
.hm-escena .hm-paso__p { color: #B5B5BD; }
.hm-flujo { display: none; }
@media (min-width: 860px) {
	.hm-flujo { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 90; margin: -8px 0 6px; overflow: visible; }
}
.hm-flujo__base { fill: none; stroke: rgba(250, 250, 247, 0.12); stroke-width: 6; stroke-linecap: round; }
.hm-flujo__marcha { fill: none; stroke: var(--azul-claro); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 12; animation: hm-marcha 1.2s linear infinite; opacity: 0.8; }
@keyframes hm-marcha { to { stroke-dashoffset: -14; } }
.hm-flujo__nodo { fill: var(--tinta); stroke: var(--azul-claro); stroke-width: 2; }
.hm-flujo__nodo--fin { fill: var(--azul); stroke: #fff; }
.hm-flujo__punto { fill: var(--azul); filter: drop-shadow(0 0 8px rgba(36, 56, 255, 0.95)) drop-shadow(0 0 2px #fff); }

/* ---- caso: nota y testimonios como notas pegadas ---- */
.hm-caso__nota { margin-top: 22px; color: #B5B5BD; transform: rotate(-2deg); font-size: 20px; }
.hm-caso__nota .doodle { color: var(--papel); }
.hm-caso__nota .doodle .dd-blue { color: var(--azul-claro); }
.hm-tst { position: relative; transform: rotate(-0.8deg); box-shadow: 0 18px 36px -24px rgba(12, 12, 20, 0.3); }
.hm-tst:nth-child(even) { transform: rotate(0.9deg); }
.hm-tst.fade.vis { transform: rotate(-0.8deg); }
.hm-tst.fade.vis:nth-child(even) { transform: rotate(0.9deg); }
.hm-tst__cinta {
	position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-3deg);
	background: rgba(214, 219, 255, 0.72); box-shadow: 0 2px 6px rgba(12, 12, 20, 0.08);
	clip-path: polygon(0 10%, 5% 0, 30% 6%, 60% 0, 95% 5%, 100% 0, 97% 50%, 100% 100%, 94% 93%, 62% 100%, 30% 94%, 4% 100%, 0 88%, 3% 50%);
}

/* ---- planes: el precio destacado, encerrado a mano ---- */
.hm-plan__num { position: relative; }
.hm-plan__aro { position: absolute; left: -22%; top: -24%; width: 144%; height: 150%; color: var(--azul-claro); pointer-events: none; }
.hm-plan__aro.draw svg path { transition-delay: 400ms; transition-duration: 1.1s; }
.hm-plan__nota { margin-top: 10px; color: #B5B5BD; font-size: 19px; transform: rotate(-3deg); }
.hm-plan__nota .doodle { color: var(--papel); width: 40px; height: 32px; }
.hm-plan__nota .doodle .dd-blue { color: var(--azul-claro); }
.hm-plan__nota .draw svg path { transition-delay: 900ms; }

/* ---- preguntas: nota hacia el chat ---- */
.hm-faq__nota { margin-top: 18px; transform: rotate(-3deg); }
.hm-faq__nota .draw svg path { transition-delay: 500ms; }

/* =========================================================================
   SIN MOVIMIENTO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.hm-hero__h1 .w, .hm-cierre__t .w { opacity: 1; transform: none; transition: none; }
	.hm-hero__aura, .hm-hero__franja, .hm-agente__img, .hm-agente__fig::after { animation: none; }
	.hm-hero__ventana::before, .hm-hero__ventana::after, .hm-hero .aichat--ventana .aichat__avatar--lg, .hm-garabato, .hm-rota__p { animation: none !important; }
	.hm-flotador, .hm-flujo__marcha { animation: none !important; }
	.hm-flujo__punto { display: none; }
	.hm-hero__h1 em.hm-rota { transition: none; }
	.hm-btn, .hm-btn svg { transition: none; }
	.hm-btn:hover { transform: none; }
	.hm-agente, .hm-agente__img, .hm-agente__checks svg, .hm-agente__cta, .hm-btn-linea, .hm-btn-linea svg,
	.hm-tabs__tab, .hm-paso, .hm-faq__item, .hm-faq__item summary i, .hm-faq__item summary i::before, .hm-faq__item summary i::after,
	body.page-home .site-header { transition: none; }
	.hm-agente:hover { transform: none; }
	.hm-agente:hover .hm-agente__img { scale: none; }
	.hm-cifra__aro circle { stroke-dashoffset: 0; transition: none; }
	.hm-tabs--js .hm-panel { transition: none; transform: none; }
}