/* ==========================================================================
   Escenas del hero de las páginas internas (inc/hero-escenas.php)
   Panel dorado a la derecha del título con una tarjeta que se anima sola.
   Por defecto (sin JS o con «reducir movimiento») se ve el estado final;
   .is-vivo lo pone hero-escenas.js y cada [data-p] sin .is-on va a su estado inicial.
   ========================================================================== */

/* ---------- Hero en dos columnas ---------- */

.he-hero .he-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.he-hero .he-texto .nh-hero__ctas { align-self: stretch; }
.he-hero .he-lado { width: 100%; display: flex; justify-content: center; }

@media (min-width: 768px) {
	.he-hero .he-texto { gap: 28px; }
	.he-hero .he-texto .nh-hero__ctas { align-self: flex-start; }
}
@media (min-width: 1024px) {
	.nh-interna__in.he-in {
		display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
		align-items: center; gap: clamp(40px, 5vw, 80px);
	}
	.he-in .nh-interna__titulo { font-size: clamp(44px, 4.4vw, 68px); }
	.he-hero .he-lado { justify-content: flex-end; }
}

/* ---------- Panel y tarjeta ---------- */

.he {
	--he-panel: var(--nh-oro);
	--he-tinta: var(--nh-oro-tinta);
	--he-card: var(--nh-superficie-2);
	--he-card-2: #272623;
	--he-borde: var(--nh-borde-3);
	--he-tx: var(--nh-texto);
	--he-tx2: var(--nh-texto-2);
	--he-sombra: 0 28px 56px -26px rgba(43, 36, 16, .75), 0 2px 8px rgba(43, 36, 16, .22);
	--he-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative; isolation: isolate; overflow: hidden;
	width: 100%; max-width: 500px; aspect-ratio: 10 / 9;
	border-radius: 28px; background: var(--he-panel);
	display: flex; align-items: center; justify-content: center; padding: 8%;
	font-family: var(--nh-sans); font-size: 14px; line-height: 1.35; color: var(--he-tx);
	-webkit-user-select: none; user-select: none; pointer-events: none;
}
/* Patrón sutil: puntos que se desvanecen hacia abajo, y una luz arriba a la izquierda */
.he::before, .he::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.he::before {
	background-image: radial-gradient(rgba(43, 36, 16, .2) 1.2px, transparent 1.7px);
	background-size: 18px 18px; background-position: 9px 9px;
	-webkit-mask-image: linear-gradient(160deg, #000 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
	mask-image: linear-gradient(160deg, #000 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
}
.he::after { background: radial-gradient(90% 70% at 0% 0%, rgba(255, 246, 220, .45), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(120, 84, 10, .28), transparent 70%); }
html[data-tema="claro"] .he { --he-card: #FFFFFF; --he-card-2: #F3F0E8; --he-borde: #E2DDD1; --he-sombra: 0 28px 56px -28px rgba(43, 36, 16, .55), 0 2px 8px rgba(43, 36, 16, .14); }

.he-card {
	position: relative; width: 100%; max-width: 330px;
	padding: 18px; border-radius: 18px; background: var(--he-card); color: var(--he-tx);
	border: 1px solid var(--he-borde); box-shadow: var(--he-sombra);
	display: flex; flex-direction: column; gap: 14px;
}
.he-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.he-marca { font-weight: 800; font-size: 15px; letter-spacing: -0.04em; }
.he-marca::after { content: '.'; color: var(--nh-oro); }
.he-cab__t { font-weight: 600; font-size: 13.5px; color: var(--he-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-marca + .he-cab__t { padding-left: 8px; border-left: 1px solid var(--he-borde); }
.he-cab__estado { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--he-tx2); white-space: nowrap; }
.he-cab__estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--nh-oro); }
.he-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.he-pie { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--he-tx2); }
.he-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--nh-oro); box-shadow: 0 0 0 4px rgba(212, 168, 67, .2); }
.he svg { display: block; }

/* Aviso flotante (venta nueva, contacto guardado): por encima de la tarjeta */
.he-aviso {
	position: absolute; z-index: 2; top: 7%; right: 5%;
	display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
	border-radius: 14px; background: var(--he-card); border: 1px solid var(--he-borde); box-shadow: var(--he-sombra);
	max-width: 76%;
}
.he-aviso__ico { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--nh-oro); color: var(--nh-oro-tinta); display: flex; align-items: center; justify-content: center; }
.he-aviso__ico svg { width: 15px; height: 15px; }
.he-aviso__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.he-aviso__txt strong { font-size: 13px; font-weight: 800; }
.he-aviso__txt span { font-size: 11.5px; color: var(--he-tx2); }

/* ---------- Transiciones genéricas ---------- */

.he [data-p], .he [data-p] * { transition: opacity .45s ease, transform .55s var(--he-ease), background-color .35s ease, border-color .35s ease, color .35s ease, stroke-dashoffset .5s ease, width .5s var(--he-ease); }
.he--sin-trans [data-p], .he--sin-trans [data-p] * { transition: none !important; }
.he.is-vivo .he-aparece:not(.is-on) { opacity: 0; transform: translateY(10px); }
.he.is-vivo .he-pop:not(.is-on) { opacity: 0; transform: scale(.3); }
.he.is-vivo .he-cambia:not(.is-on) { opacity: 0; }
.he.is-vivo .he-baja:not(.is-on) { opacity: 0; transform: translateY(-14px) scale(.96); }
.he.is-vivo .he-acomoda:not(.is-on) { opacity: 0; transform: translate(14px, 16px) rotate(-2.5deg) scale(.94); }
/* Lo que solo se ve a mitad de camino (data-hasta) no aparece en el estado final quieto */
.he:not(.is-vivo) [data-hasta] { display: none; }
.he-card { animation: he-entra .5s ease both; }
@keyframes he-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Planes: tareas del mes ---------- */

.he-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.he-prog span { height: 5px; border-radius: 3px; background: var(--nh-oro); }
.he.is-vivo .he-prog span:not(.is-on) { background: var(--he-borde); }
.he-tarea { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: var(--he-card-2); }
.he-caja { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--nh-oro); border: 1.5px solid var(--nh-oro); color: var(--nh-oro-tinta); display: flex; align-items: center; justify-content: center; }
.he-caja svg { width: 13px; height: 13px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.he-tarea__t { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; color: var(--he-tx2); text-decoration: line-through; text-decoration-color: rgba(212, 168, 67, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--he-tx2); padding: 3px 7px; border-radius: 999px; border: 1px solid var(--he-borde); }
.he.is-vivo .he-tarea:not(.is-on) .he-caja { background: transparent; border-color: var(--he-borde); }
.he.is-vivo .he-tarea:not(.is-on) .he-caja svg { stroke-dashoffset: 1; }
.he.is-vivo .he-tarea:not(.is-on) .he-tarea__t { color: var(--he-tx); text-decoration-color: transparent; }

/* ---------- Shopify: producto, carrito y venta ---------- */

.he--shopify .he-aviso { top: 5%; right: 4%; }

.he-prod { max-width: 268px; gap: 10px; margin-top: 10%; }
.he-prod__top { display: flex; align-items: center; justify-content: space-between; }
.he-prod__tienda { font-weight: 800; font-size: 14px; letter-spacing: -0.03em; }
.he-bolsa { position: relative; width: 22px; height: 22px; }
.he-bolsa svg { width: 22px; height: 22px; }
.he-bolsa__n { position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--nh-oro); color: var(--nh-oro-tinta); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.he-prod__foto { aspect-ratio: 16 / 10; border-radius: 12px; background: var(--he-card-2); color: var(--he-tx); display: flex; align-items: center; justify-content: center; }
.he-prod__foto svg { width: 46%; opacity: .85; }
.he-prod__nombre { font-weight: 700; font-size: 14px; }
.he-prod__var { margin-top: -8px; font-size: 12px; color: var(--he-tx2); }
.he-btn { position: relative; height: 38px; border-radius: 999px; background: var(--he-tx); color: var(--he-card); font-size: 13px; font-weight: 700; overflow: hidden; }
.he-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.he-btn__b { background: var(--nh-oro); color: var(--nh-oro-tinta); }
.he-btn__b svg { width: 14px; height: 14px; }

/* ---------- Webs a medida: navegador con bloques ---------- */

.he-nav { max-width: 360px; padding: 0; gap: 0; overflow: hidden; }
.he-nav__barra { display: flex; align-items: center; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--he-borde); }
.he-nav__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--he-borde); }
.he-nav__url { margin-left: 8px; flex: 1; padding: 4px 10px; border-radius: 999px; background: var(--he-card-2); font-size: 11px; color: var(--he-tx2); }
.he-nav__pag { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.he-slot { display: block; border-radius: 10px; border: 1.5px dashed var(--he-borde); }
.he-slot > * { margin: -1.5px; }
.he-bl { border-radius: 10px; background: var(--he-card-2); }
.he-bl--header { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; }
.he-bl__logo { width: 34px; height: 9px; border-radius: 5px; background: var(--nh-oro); }
.he-bl__links { display: flex; gap: 6px; }
.he-bl__links i { width: 18px; height: 5px; border-radius: 3px; background: var(--he-borde); }
.he-bl--hero { display: flex; gap: 10px; padding: 14px 12px; }
.he-bl__txt { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.he-bl__txt i { height: 8px; border-radius: 4px; background: var(--he-tx); opacity: .8; }
.he-bl__txt i + i { width: 70%; }
.he-bl__txt b { margin-top: 4px; width: 46%; height: 16px; border-radius: 999px; background: var(--nh-oro); }
.he-bl__img { width: 38%; border-radius: 8px; background: linear-gradient(135deg, rgba(212, 168, 67, .55), rgba(212, 168, 67, .15)); }
.he-bl--tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.he-bl--tarjetas .he-acomoda { display: block; height: 62px; border-radius: 10px; background: var(--he-card-2); }
.he-bl--tarjetas .he-acomoda::before { content: ''; display: block; margin: 10px 10px 0; height: 22px; border-radius: 6px; background: var(--he-borde); }

/* ---------- Apps: celular con notificaciones ---------- */

.he--apps { align-items: flex-start; padding-bottom: 0; }
.he-tel { width: 58%; max-width: 236px; margin-top: 2%; height: 112%; padding: 9px 9px 0; border-radius: 36px 36px 0 0; background: #141413; box-shadow: var(--he-sombra); }
.he-tel__pant {
	position: relative; height: 100%; border-radius: 28px 28px 0 0; overflow: hidden; padding: 12px 10px;
	background: radial-gradient(120% 70% at 50% 0%, #4A3A16 0%, #1E1A12 55%, #121110 100%); color: #F5F4F0;
	display: flex; flex-direction: column; align-items: center;
}
html[data-tema="claro"] .he-tel__pant { background: radial-gradient(120% 70% at 50% 0%, #F2E3BC 0%, #E9E2D2 60%, #E2DCCD 100%); color: #141413; }
.he-tel__isla { width: 34%; height: 16px; border-radius: 10px; background: #050505; }
.he-tel__hora { margin-top: 14px; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.he-tel__lista { width: 100%; margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.he-push { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border-radius: 14px; background: rgba(245, 244, 240, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-tema="claro"] .he-push { background: rgba(255, 255, 255, .72); }
.he-push__ico { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--nh-oro); display: flex; align-items: center; justify-content: center; }
.he-push__ico::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--nh-oro-tinta); }
.he-push__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 11.5px; line-height: 1.3; }
.he-push__top { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.he-push__top span { opacity: .65; }

/* ---------- Mantenimiento WordPress: interruptores ---------- */

.he-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--he-card-2); }
.he-ajuste__t { font-weight: 600; font-size: 13.5px; }
.he-switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: var(--nh-oro); }
.he-switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transform: translateX(16px); }
.he.is-vivo .he-switch:not(.is-on) { background: var(--he-borde); }
.he.is-vivo .he-switch:not(.is-on) span { transform: translateX(0); }

/* ---------- Nudge Chat e IA ---------- */

.he--chat { flex-direction: column; }
/* El aviso del CRM monta el borde de abajo de la tarjeta */
.he-aviso--abajo { position: relative; top: auto; right: auto; align-self: center; width: max-content; margin: -16px 0 0 -38%; }
.he-chat { gap: 12px; }
.he-chat .he-cab__t { color: var(--he-tx); font-weight: 700; }
.he-chat__msjs { display: flex; flex-direction: column; gap: 10px; }
.he-msj { margin: 0; max-width: 86%; padding: 9px 12px; font-size: 13px; line-height: 1.4; border-radius: 14px; }
.he-msj--cli { align-self: flex-end; background: var(--nh-oro); color: var(--nh-oro-tinta); border-bottom-right-radius: 4px; font-weight: 600; }
.he-chat__resp { position: relative; }
.he-msj--ia { background: var(--he-card-2); border-bottom-left-radius: 4px; }
.he-msj__quien { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--he-tx); color: var(--he-card); font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; }
.he-escribe { position: absolute; top: 0; left: 0; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--he-card-2); }
.he-escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--he-tx2); animation: he-punto 1s ease-in-out infinite; }
.he-escribe i:nth-child(2) { animation-delay: .15s; }
.he-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes he-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---------- Infraestructura: de «Configurando…» a «Activo» ---------- */

.he-servicio { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--he-card-2); }
.he-servicio__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.he-servicio__txt strong { font-size: 13.5px; font-weight: 700; }
.he-servicio__txt span { font-size: 11.5px; color: var(--he-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-estado { position: relative; flex: none; width: 104px; height: 24px; }
.he-estado > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.he-estado__conf { color: var(--he-tx2); opacity: 0; }
.he-estado__conf i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--he-borde); border-top-color: var(--nh-oro); animation: he-gira .8s linear infinite; }
.he-estado > .he-estado__ok { justify-content: center; width: 72px; left: auto; border-radius: 999px; background: rgba(212, 168, 67, .16); color: var(--nh-acento); }
.he-estado__ok svg { width: 12px; height: 12px; }
.he.is-vivo .he-estado:not(.is-on) .he-estado__conf { opacity: 1; }
.he.is-vivo .he-estado:not(.is-on) .he-estado__ok { opacity: 0; transform: scale(.85); }
@keyframes he-gira { to { transform: rotate(360deg); } }

/* ---------- nudge scan: puntaje y próximos pasos ---------- */

@property --he-n { syntax: '<integer>'; inherits: false; initial-value: 56; }
.he-scan__fila { display: flex; align-items: center; gap: 14px; }
.he-anillo { position: relative; width: 78px; height: 78px; flex: none; }
.he-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.he-anillo circle { fill: none; stroke-width: 8; stroke: var(--he-borde); }
.he .he-anillo .he-anillo__v { stroke: var(--nh-oro); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 44; transition: stroke-dashoffset 1.4s var(--he-ease); }
.he .he-anillo .he-anillo__n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; letter-spacing: -0.04em; --he-n: 56; counter-reset: he-n var(--he-n); transition: --he-n 1.4s var(--he-ease); }
.he-anillo__n::after { content: counter(he-n); }
.he.is-vivo .he-anillo:not(.is-on) .he-anillo__v { stroke-dashoffset: 100; }
.he.is-vivo .he-anillo:not(.is-on) .he-anillo__n { --he-n: 0; }
.he-scan__txt { display: flex; flex-direction: column; gap: 2px; }
.he-scan__txt strong { font-family: var(--nh-serif); font-size: 21px; font-weight: 500; }
.he-scan__txt span { font-size: 12px; color: var(--he-tx2); }
.he-scan__k { margin: 2px 0 -4px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nh-acento); }
.he-pasos li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: var(--he-card-2); font-size: 13px; font-weight: 600; }
.he-pasos__n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--nh-oro); color: var(--nh-oro-tinta); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ---------- Tablet y celular: debajo del texto, más chico ---------- */

@media (max-width: 1023px) {
	.he-hero .he-lado { margin-top: 8px; justify-content: flex-start; }
	.he { max-width: 440px; }
}
@media (max-width: 767px) {
	.he-hero .he-lado { justify-content: center; }
	/* Panel más bajo y la escena al 82 % (zoom achica también el lugar que ocupa) */
	.he { max-width: 380px; aspect-ratio: 6 / 5; padding: 5%; border-radius: 22px; }
	.he > * { zoom: .82; }
	.he-prod { margin-top: 7%; }
	.he--shopify .he-aviso { top: 3%; right: auto; left: 3%; }
}

/* ---------- Reducir movimiento: estado final, quieto ---------- */

@media (prefers-reduced-motion: reduce) {
	/* hero-escenas.js no arranca (no pone .is-vivo): queda el estado final. */
	.he *, .he *::before, .he *::after { animation: none !important; transition: none !important; }
}