/* Hero de la portada en formato slider (partials/hero-slider.php)
   Variables que pone el JS: --mx/--my (ratón, -1..1), --px/--py (ratón en %), --sp (scroll 0..1), --burst (cambio de slide) */
.hs { --mx: 0; --my: 0; --px: 70%; --py: 40%; --sp: 0; --burst: 0; isolation: isolate; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hs__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hs__spot { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(38rem circle at var(--px) var(--py), rgba(46, 211, 245, .16), rgba(1, 153, 214, .07) 40%, transparent 70%); }
.hs__viewport { display: grid; grid-template-columns: minmax(0, 1fr); }
.hs__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.hs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: clamp(28rem, 40vw, 36rem); }
@media (min-width: 901px) { .hs__grid { padding-right: 3.2rem; } }

/* Texto: entra escalonado y se aleja suavemente con el scroll */
.hs__copy { min-width: 0; transform: translate3d(0, calc(var(--sp) * -70px), 0); opacity: calc(1 - var(--sp) * 1.1); }
.hs__copy > * { opacity: 0; transform: translateY(1.2rem); filter: blur(6px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); }
.hs__slide.is-active .hs__copy > * { opacity: 1; transform: none; filter: none; }
.hs__slide.is-active .hs__copy > :nth-child(2) { transition-delay: .1s; }
.hs__slide.is-active .hs__copy > :nth-child(3) { transition-delay: .2s; }
.hs__slide.is-active .hs__copy > :nth-child(4) { transition-delay: .3s; }
.hs__title { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
.hs__title em { font-style: normal; background: linear-gradient(100deg, var(--brand), #2ed3f5 50%, var(--brand)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hs-shine 6s linear infinite; }
@keyframes hs-shine { to { background-position: -200% 0; } }
.hs .lead { max-width: 34em; }

/* Controles */
.hs__ctrl { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1rem, 2.5vw, 2rem); }
.hs__arrow { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.hs__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.hs__arrow svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs__dots { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.hs__dot { display: flex; flex-direction: column; gap: .55rem; padding: .4rem 0; border: 0; background: none; font: 600 .82rem/1.2 var(--body); color: var(--ink-2, #4a5a6b); text-align: left; cursor: pointer; }
.hs__dot.is-active { color: var(--ink); }
.hs__dot i { position: relative; display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hs__dot i::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.hs__dot.is-active i::after { transform: scaleX(1); }
.hs.is-timing .hs__dot.is-active i::after { animation: hs-progress var(--hs-dur, 7s) linear both; }
.hs.is-paused .hs__dot.is-active i::after { animation-play-state: paused; }
@keyframes hs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Escena 3D ───────────────────────────────────────────────────────── */
.hs__mg { position: relative; aspect-ratio: 1 / .92; max-width: 36rem; width: 100%; margin-inline: auto; perspective: 1100px; perspective-origin: 50% 40%; }
.hs__mg * { animation-play-state: paused; }
.hs__slide.is-active .hs__mg * { animation-play-state: running; }
.hs__stage { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(var(--mx) * 16deg - 6deg)) rotateX(calc(var(--my) * -11deg + 4deg + var(--sp) * 32deg)) translateZ(calc(var(--sp) * -80px)) scale(calc(1 - var(--sp) * .12)); }
/* Al entrar la slide, las capas llegan desde el fondo una detrás de otra */
.hs__L { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none;
  transform: translate3d(calc(var(--mx) * var(--z) * -.12px), calc(var(--my) * var(--z) * -.1px - var(--sp) * var(--z) * .5px), calc(var(--z) * 1px * (1 + var(--sp) * 2.2 + var(--burst) * 1.5))); }
.hs__slide .hs__L > * { opacity: 0; scale: .7; translate: 0 40px; transition: opacity .7s var(--ease), scale .9s var(--ease), translate .9s var(--ease); }
.hs__slide.is-active .hs__L > * { opacity: 1; scale: 1; translate: 0 0; }
.hs__slide.is-active .hs__L:nth-child(3) > * { transition-delay: .08s; } .hs__slide.is-active .hs__L:nth-child(4) > * { transition-delay: .16s; }
.hs__slide.is-active .hs__L:nth-child(5) > * { transition-delay: .24s; } .hs__slide.is-active .hs__L:nth-child(6) > * { transition-delay: .32s; }
.hs__slide.is-active .hs__L:nth-child(7) > * { transition-delay: .4s; } .hs__slide.is-active .hs__L:nth-child(8) > * { transition-delay: .48s; }

/* Halo y órbitas */
.hs__halo::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(1, 153, 214, .35), rgba(46, 211, 245, .1), rgba(255, 178, 63, .25), rgba(1, 153, 214, .35)); filter: blur(40px); animation: hs-spin 14s linear infinite; }
.hs__orbit { position: absolute; left: 50%; top: 50%; border: 1.5px dashed rgba(1, 153, 214, .35); border-radius: 50%; transform-style: preserve-3d; }
.hs__orbit b { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 16px 4px rgba(46, 211, 245, .7); }
.hs__orbit--1 { width: 96%; height: 96%; margin: -48% 0 0 -48%; transform: rotateX(70deg) rotateZ(0); animation: hs-orbit1 16s linear infinite; }
.hs__orbit--2 { width: 76%; height: 76%; margin: -38% 0 0 -38%; transform: rotateY(65deg); animation: hs-orbit2 12s linear infinite; border-color: rgba(255, 178, 63, .45); }
.hs__orbit--2 b { background: #ffb23f; box-shadow: 0 0 14px 3px rgba(255, 178, 63, .7); }
.hs__orbit--3 { width: 112%; height: 112%; margin: -56% 0 0 -56%; transform: rotateX(80deg) rotateY(20deg); animation: hs-orbit3 22s linear infinite; border-style: solid; border-color: rgba(1, 153, 214, .15); }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@keyframes hs-orbit1 { to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes hs-orbit2 { to { transform: rotateY(65deg) rotateZ(-360deg); } }
@keyframes hs-orbit3 { to { transform: rotateX(80deg) rotateY(20deg) rotateZ(360deg); } }

/* Tarjetas de cristal con reflejo que sigue al ratón */
.hs__glass { position: absolute; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink), 0 30px 60px -20px rgba(10, 26, 43, .35); overflow: hidden; }
.hs__glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 45%, transparent 60%); background-size: 250% 100%; background-position: calc(50% + var(--mx) * 60%) 0; mix-blend-mode: soft-light; }
.hs__glass--dark { background: rgba(10, 26, 43, .92); color: #fff; }
.hs__chip { padding: .6rem .95rem; font: 700 .85rem/1 var(--body); color: var(--ink); white-space: nowrap; animation: hs-float 5s ease-in-out infinite; }
@keyframes hs-float { 50% { transform: translateY(-12px); } }

/* 1 · Web */
.hsw { left: 6%; right: 10%; top: 14%; bottom: 18%; padding-bottom: 1rem; }
.hsw__bar { display: flex; align-items: center; gap: .35rem; padding: .7rem .9rem; border-bottom: 1.5px solid var(--ink); }
.hsw__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #ff6b6b; } .hsw__bar i + i { background: #ffb23f; } .hsw__bar i + i + i { background: #3ccf91; }
.hsw__bar span { flex: 1; margin-left: .6rem; padding: .2rem .6rem; border-radius: 1rem; background: var(--tint); font: 600 .68rem/1.2 var(--body); color: var(--ink-2, #4a5a6b); }
.hsw__nav { display: flex; gap: .6rem; justify-content: flex-end; padding: .9rem 1.1rem 0; }
.hsw__nav b { width: 2.2rem; height: .45rem; border-radius: 1rem; background: var(--line); }
.hsw__nav b:first-child { margin-right: auto; width: 3.2rem; background: var(--brand); }
.hsw__hero { padding: 1.3rem 1.1rem .8rem; }
.hsw__hero b { display: block; height: .95rem; border-radius: .5rem; background: var(--ink); width: 70%; margin-bottom: .55rem; transform-origin: left; animation: hs-grow 7s var(--ease) infinite; }
.hsw__hero b + b { width: 48%; background: linear-gradient(90deg, var(--brand), #2ed3f5); animation-delay: .2s; }
.hsw__hero em { display: inline-block; margin-top: .6rem; width: 6rem; height: 1.6rem; border-radius: .6rem; background: var(--brand); animation: hs-press 7s ease-in-out infinite; }
.hsw__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: .4rem 1.1rem 0; }
.hsw__cards span { height: 4rem; border-radius: .7rem; background: linear-gradient(160deg, var(--tint), #fff); border: 1px solid var(--line); animation: hs-cards 7s var(--ease) infinite; }
.hsw__cards span:nth-child(2) { animation-delay: .15s; } .hsw__cards span:nth-child(3) { animation-delay: .3s; }
.hsw__cursor { position: absolute; left: 66%; top: 80%; width: 1.8rem; animation: hs-cursor 7s var(--ease) infinite; filter: drop-shadow(0 6px 8px rgba(10, 26, 43, .35)); }
.hsw__cursor svg { fill: var(--ink); stroke: #fff; stroke-width: 1.2; }
.hs__code { left: 46%; right: -2%; top: 4%; padding: .9rem 1rem; font: 500 .72rem/1.7 ui-monospace, Menlo, monospace; }
.hs__code p { margin: 0; white-space: nowrap; overflow: hidden; width: 0; animation: hs-code 7s steps(26) infinite; }
.hs__code p:nth-child(2) { animation-delay: .5s; } .hs__code p:nth-child(3) { animation-delay: 1s; }
.hs__code i { font-style: normal; color: #6f8aa3; } .hs__code u { text-decoration: none; color: #2ed3f5; } .hs__code s { text-decoration: none; color: #ffb23f; } .hs__code q { quotes: none; color: #3ccf91; }
.hs__swatches { position: absolute; left: 0; bottom: 8%; display: flex; gap: .4rem; padding: .5rem; border-radius: 1rem; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.hs__swatches i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); animation: hs-bob 3s ease-in-out infinite; }
.hs__swatches i:nth-child(2) { background: #2ed3f5; animation-delay: .2s; } .hs__swatches i:nth-child(3) { background: #ffb23f; animation-delay: .4s; } .hs__swatches i:nth-child(4) { background: var(--ink); animation-delay: .6s; }
.hs__gauge { right: 2%; bottom: 4%; width: 8.5rem; padding: .8rem .8rem .7rem; text-align: center; }
.hs__gauge svg { width: 100%; fill: none; stroke-width: 9; stroke-linecap: round; }
.hs__gauge-bg { stroke: var(--tint); } .hs__gauge-val { stroke: #3ccf91; stroke-dasharray: 100; animation: hs-gauge 7s var(--ease) infinite; }
.hs__gauge b { display: block; margin-top: -1.6rem; font: 800 1.5rem/1 var(--display); color: var(--ink); }
.hs__gauge span { font: 600 .7rem/1 var(--body); color: var(--ink-2, #4a5a6b); }
@keyframes hs-grow { 0%, 5% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
@keyframes hs-cards { 0%, 18% { opacity: 0; transform: translateY(16px); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes hs-cursor { 0%, 30% { transform: translate(0, 0); } 50% { transform: translate(-9.5rem, -7rem); } 54% { transform: translate(-9.5rem, -7rem) scale(.85); } 58%, 80% { transform: translate(-9.5rem, -7rem); } 100% { transform: translate(0, 0); } }
@keyframes hs-press { 0%, 52% { box-shadow: 0 0 0 0 rgba(1, 153, 214, .5); } 60% { box-shadow: 0 0 0 12px rgba(1, 153, 214, 0); transform: scale(.94); } 64%, 100% { transform: none; } }
@keyframes hs-code { 0%, 6% { width: 0; } 30%, 100% { width: 26ch; } }
@keyframes hs-bob { 50% { transform: translateY(-6px); } }
@keyframes hs-gauge { 0%, 15% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 2; } }

/* 2 · App */
.hsa__phone { position: absolute; left: 50%; top: 2%; bottom: 2%; aspect-ratio: 9 / 18.5; margin-left: -23%; border-radius: 2.2rem; border-width: 2px; padding: .7rem; }
.hsa__phone--back { margin-left: -6%; top: 8%; bottom: 0; transform: rotate(10deg); background: linear-gradient(160deg, var(--brand), #2ed3f5); border: 2px solid var(--ink); border-radius: 2.2rem; box-shadow: 6px 6px 0 var(--ink); opacity: .9; }
.hsa__notch { width: 38%; height: .9rem; margin: 0 auto .6rem; border-radius: 0 0 .7rem .7rem; background: var(--ink); }
.hsa__screens { position: relative; height: calc(100% - 1.5rem); overflow: hidden; border-radius: 1.4rem; background: var(--tint); }
.hsa__screen { position: absolute; inset: 0; padding: 1rem .8rem; display: flex; flex-direction: column; gap: .55rem; animation: hs-screen 7s var(--ease) infinite; }
.hsa__screen b { height: .8rem; width: 60%; border-radius: .4rem; background: var(--ink); }
.hsa__screen span { height: 2.6rem; border-radius: .7rem; background: var(--paper); border: 1px solid var(--line); }
.hsa__screen em { margin-top: auto; height: 2rem; border-radius: .7rem; background: var(--brand); }
.hsa__screen--2 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; animation-name: hs-screen2; }
.hsa__screen--2 b { grid-column: 1 / -1; }
.hsa__screen--2 i { aspect-ratio: 1; border-radius: .7rem; background: linear-gradient(135deg, #2ed3f5, var(--brand)); opacity: .85; }
.hsa__screen--2 em { grid-column: 1 / -1; margin-top: .4rem; }
.hsa__screen--3 { align-items: center; justify-content: center; animation-name: hs-screen3; }
.hsa__check { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #3ccf91; color: #fff; font: 800 1.8rem/1 var(--body); box-shadow: 0 0 0 10px rgba(60, 207, 145, .2); }
.hsa__screen--3 b { width: 70%; } .hsa__screen--3 span { width: 80%; height: .6rem; }
@keyframes hs-screen { 0%, 28% { transform: none; } 33%, 95% { transform: translateX(-105%); } 100% { transform: none; } }
@keyframes hs-screen2 { 0%, 28% { transform: translateX(105%); } 33%, 61% { transform: none; } 66%, 100% { transform: translateX(-105%); } }
@keyframes hs-screen3 { 0%, 61% { transform: translateX(105%); } 66%, 95% { transform: none; } 100% { transform: translateX(105%); } }
.hsa__notif { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; font: .82rem/1.25 var(--body); color: var(--ink); max-width: 15rem; }
.hsa__notif i { font-style: normal; font-size: 1.2rem; }
.hsa__notif b { display: block; }
.hsa__notif--1 { left: -2%; top: 16%; animation: hs-notif 7s var(--ease) infinite; }
.hsa__notif--2 { right: -2%; bottom: 20%; animation: hs-notif 7s var(--ease) 1.2s infinite; }
@keyframes hs-notif { 0%, 10% { opacity: 0; transform: translateY(14px) scale(.92); } 18%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-8px); } }
.hs__icons { position: absolute; right: 0; top: 2%; display: grid; grid-template-columns: repeat(3, 2.6rem); gap: .45rem; }
.hs__icons i { display: grid; place-items: center; height: 2.6rem; border-radius: .8rem; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-style: normal; font-size: 1.15rem; animation: hs-bob 3.4s ease-in-out infinite; }
.hs__icons i:nth-child(2n) { animation-delay: .5s; } .hs__icons i:nth-child(3n) { animation-delay: 1s; }
.hs__rating { left: 2%; bottom: 6%; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; animation: hs-float 5s ease-in-out -2s infinite; }
.hs__rating span { color: #ffb23f; letter-spacing: .05em; } .hs__rating b { font: 800 1rem/1 var(--display); color: var(--ink); }

/* 3 · SEO y GEO */
.hss__search { left: 2%; right: 4%; top: 4%; display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-radius: 2rem; }
.hss__search svg { width: 1.2rem; flex: none; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.hss__type { overflow: hidden; white-space: nowrap; font: 600 1rem/1 var(--body); color: var(--ink); border-right: 2px solid var(--brand); animation: hs-type 7s steps(23) infinite; width: 0; }
@keyframes hs-type { 0%, 4% { width: 0; } 30%, 100% { width: 23ch; } }
.hss__results { left: 6%; right: 14%; top: 24%; margin: 0; padding: .6rem; list-style: none; display: flex; flex-direction: column; }
.hss__res { position: relative; display: grid; grid-template-columns: 1.8rem 1fr; grid-template-rows: auto auto; gap: .3rem .7rem; align-items: center; padding: .65rem .6rem; border-radius: .8rem; }
.hss__res i, .hss__res strong { grid-row: span 2; width: 1.8rem; height: 1.8rem; border-radius: .5rem; background: var(--tint); }
.hss__res b { height: .7rem; width: 70%; border-radius: .4rem; background: var(--line); }
.hss__res span { height: .5rem; width: 90%; border-radius: .4rem; background: var(--tint); }
.hss__res--you { order: 3; background: rgba(1, 153, 214, .1); animation: hs-rank 7s var(--ease) infinite; }
.hss__res--you strong { display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 .8rem/1 var(--body); }
.hss__res--you b { height: auto; width: auto; background: none; font: 700 .9rem/1 var(--body); color: var(--ink); }
@keyframes hs-rank { 0%, 30% { transform: translateY(0); } 45%, 100% { transform: translateY(-200%); } }
.hss__res:not(.hss__res--you) { animation: hs-down 7s var(--ease) infinite; }
@keyframes hs-down { 0%, 30% { transform: none; } 45%, 100% { transform: translateY(100%); } }
.hss__res:first-child { order: 1; } .hss__res:last-child { order: 2; }
.hss__ai { right: 0; bottom: 6%; width: 66%; display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; animation: hs-ai 7s var(--ease) infinite; }
.hss__ai p { margin: 0; font: .86rem/1.4 var(--body); }
.hss__ai b { color: #2ed3f5; }
.hss__ai-ico { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: linear-gradient(135deg, #2ed3f5, var(--brand)); font-size: .9rem; animation: hs-spin 4s linear infinite; }
@keyframes hs-ai { 0%, 50% { opacity: 0; transform: translateY(16px) scale(.94); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hs__kw { position: absolute; inset: 0; }
.hs__kw span { position: absolute; padding: .35rem .7rem; border-radius: 1rem; background: var(--paper); border: 1px solid var(--brand); color: var(--brand-ink, var(--brand)); font: 600 .72rem/1 var(--body); white-space: nowrap; animation: hs-float 6s ease-in-out infinite; }
.hs__kw span:nth-child(1) { left: -4%; top: 30%; } .hs__kw span:nth-child(2) { right: -2%; top: 34%; animation-delay: -1.5s; }
.hs__kw span:nth-child(3) { left: 2%; bottom: 26%; animation-delay: -3s; } .hs__kw span:nth-child(4) { right: 8%; top: 18%; animation-delay: -2s; } .hs__kw span:nth-child(5) { left: 30%; bottom: 0; animation-delay: -4s; }
.hs__medal { position: absolute; right: 4%; top: 22%; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: conic-gradient(#ffb23f, #ffd88a, #ffb23f, #e59a1f, #ffb23f); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink), 0 0 30px rgba(255, 178, 63, .6); animation: hs-medal 7s var(--ease) infinite; }
.hs__medal b { font: 800 1.5rem/1 var(--display); color: var(--ink); }
@keyframes hs-medal { 0%, 38% { transform: scale(0) rotate(-120deg); } 48% { transform: scale(1.15) rotate(10deg); } 54%, 100% { transform: scale(1) rotate(0); } }

/* 4 · Marketing */
.hsm__card { left: 4%; right: 20%; top: 12%; bottom: 20%; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.hsm__head { display: flex; justify-content: space-between; align-items: baseline; font: 600 .9rem/1 var(--body); color: var(--ink-2, #4a5a6b); }
.hsm__head strong { font: 800 1.6rem/1 var(--display); color: #3ccf91; }
.hsm__bars { flex: 1; display: flex; align-items: flex-end; gap: 8%; padding-top: 1rem; }
.hsm__bars i { flex: 1; border-radius: .4rem .4rem 0 0; background: linear-gradient(180deg, #2ed3f5, var(--brand)); transform-origin: bottom; animation: hs-bar 7s var(--ease) infinite; }
.hsm__bars i:nth-child(1) { height: 22%; } .hsm__bars i:nth-child(2) { height: 34%; animation-delay: .1s; } .hsm__bars i:nth-child(3) { height: 30%; animation-delay: .2s; }
.hsm__bars i:nth-child(4) { height: 52%; animation-delay: .3s; } .hsm__bars i:nth-child(5) { height: 70%; animation-delay: .4s; } .hsm__bars i:nth-child(6) { height: 92%; animation-delay: .5s; }
@keyframes hs-bar { 0%, 4% { transform: scaleY(0); } 26%, 100% { transform: scaleY(1); } }
.hsm__line { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1rem; height: 55%; width: calc(100% - 2.4rem); overflow: visible; }
.hsm__line path { fill: none; stroke: #ffb23f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: hs-draw 7s var(--ease) infinite; }
@keyframes hs-draw { 0%, 20% { stroke-dashoffset: 1; } 48%, 100% { stroke-dashoffset: 0; } }
.hsm__donut { right: 0; bottom: 4%; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; border-radius: 50%; }
.hsm__donut svg { position: absolute; inset: .7rem; transform: rotate(-90deg); }
.hsm__donut circle { fill: none; stroke: var(--tint); stroke-width: 4; }
.hsm__donut .hsm__donut-val { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; animation: hs-donut 7s var(--ease) infinite; }
@keyframes hs-donut { 0%, 25% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 22; } }
.hsm__donut b { font: 800 1rem/1.1 var(--display); text-align: center; color: var(--ink); }
.hs__chip--c { left: -2%; bottom: 6%; animation-delay: -2s; }
.hs__chip--d { right: 4%; top: 0; animation-delay: -4s; }
.hs__funnel { position: absolute; right: 2%; top: 22%; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.hs__funnel i { height: 1.1rem; border-radius: .4rem; border: 1.5px solid var(--ink); background: #ffb23f; box-shadow: 3px 3px 0 var(--ink); animation: hs-bob 3s ease-in-out infinite; }
.hs__funnel i:nth-child(1) { width: 6rem; } .hs__funnel i:nth-child(2) { width: 4.2rem; background: #2ed3f5; animation-delay: .2s; } .hs__funnel i:nth-child(3) { width: 2.4rem; background: #3ccf91; animation-delay: .4s; }
.hs__coins i { position: absolute; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe3a3, #ffb23f 60%, #e59a1f); border: 1.5px solid var(--ink); font: 800 1rem/1 var(--display); font-style: normal; color: var(--ink); animation: hs-coin 4s ease-in-out infinite; }
.hs__coins i:nth-child(1) { left: 12%; top: 2%; } .hs__coins i:nth-child(2) { left: 44%; top: -4%; animation-delay: -1.3s; } .hs__coins i:nth-child(3) { left: 30%; bottom: 2%; animation-delay: -2.6s; }
@keyframes hs-coin { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-14px) rotateY(180deg); } }

/* Móvil */
@media (max-width: 900px) {
  .hs__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 1.5rem; }
  .hs__mg { overflow: visible; } .hs { overflow: hidden; }
  .hs .actions { flex-wrap: wrap; }
  .hs__mg { max-width: 24rem; }
  .hs__dot span { display: none; }
  .hs__chip, .hsa__notif, .hss__ai p { font-size: .72rem; }
  .hsm__donut, .hs__gauge { width: 6.5rem; height: auto; }
  .hsm__donut { height: 6.5rem; }
  .hs__code, .hs__kw span:nth-child(n+4), .hs__icons { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs__mg *, .hs__copy > *, .hs__title em { animation: none !important; transition: none !important; }
  .hss__type { width: 23ch; } .hs__code p { width: 26ch; }
  .hsa__screen--2, .hsa__screen--3 { display: none; }
  .hs__fx { display: none; }
}