/* ==========================================================================
   CRUZA · Hero "El cruce"
   ========================================================================== */
.xhero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 140px 0 90px; overflow: hidden; background: #FBFDFC; isolation: isolate; }
.xhero-aura { position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 35% at var(--ax, 70%) var(--ay, 40%), rgba(0, 200, 150, .20), transparent 70%),
    radial-gradient(35% 30% at 15% 85%, rgba(2, 132, 199, .08), transparent 70%),
    radial-gradient(30% 30% at 90% 90%, rgba(52, 211, 153, .10), transparent 70%);
  transition: background-position 600ms ease; }
.xhero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 65% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 70% at 65% 45%, #000 20%, transparent 75%); }

.xhero-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.xhero-copy { position: relative; transform: translateY(var(--cy, 0px)); opacity: var(--co, 1); will-change: transform, opacity; }

.xhero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .7); border: 1px solid #BBF7D0; color: #047857; font-size: 13px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); animation: xIn 600ms var(--ease-out-strong) 80ms forwards; }
.xhero-pill i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #00C896; }
.xhero-pill i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #00C896; opacity: 0; animation: xPing 2.2s var(--ease-out-strong) infinite 1s; }
@keyframes xPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes xIn { to { opacity: 1; transform: none; } }

.xhero-title { margin: 26px 0 0; font-size: clamp(42px, 4.7vw, 70px); line-height: .98; letter-spacing: -.05em; font-weight: 800; color: #0F172A; }
.xhero-title .ln { display: block; overflow: hidden; padding: .04em 0 .22em; margin: -.04em 0 -.22em; }
.xhero-title .ln > span { padding-bottom: .16em; margin-bottom: -.16em; }
.xhero-title .ln > span { display: inline-block; transform: translateY(105%); animation: xLine 900ms var(--ease-out-strong) forwards; }
.xhero-title .ln:nth-child(1) > span { animation-delay: 160ms; }
.xhero-title .ln:nth-child(2) > span { animation-delay: 260ms; }
.xhero-title .ln:nth-child(3) > span { animation-delay: 360ms; }
@keyframes xLine { to { transform: none; } }
.xhero-title .g { background: linear-gradient(90deg, #00C896, #10B981 50%, #00C896); -webkit-background-clip: text; background-clip: text; color: transparent; }

.xhero-underline { display: block; width: min(420px, 70%); height: 24px; margin: 6px 0 0 4px; overflow: visible; }
.xhero-underline path { fill: none; stroke: #00C896; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 440; stroke-dashoffset: 440; animation: xDraw 1100ms var(--ease-in-out-strong) 900ms forwards; }
@keyframes xDraw { to { stroke-dashoffset: 0; } }

.xhero-lead { max-width: 520px; margin: 22px 0 34px; font-size: 19px; line-height: 1.6; color: #475569; opacity: 0; transform: translateY(10px); animation: xIn 700ms var(--ease-out-strong) 600ms forwards; }
.xhero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; opacity: 0; transform: translateY(10px); animation: xIn 700ms var(--ease-out-strong) 720ms forwards; }
.xhero-cta .btn-demo-header { padding: 17px 28px; font-size: 16px; }
.xhero-cta .btn-demo-header:active, .xhero-ghost:active { transform: scale(.97); }
.xhero-ghost { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 99px; color: #0F172A; font-weight: 700; text-decoration: none; transition: background 200ms ease, transform 160ms ease-out; }
.xhero-ghost .play { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #0F172A; }
.xhero-ghost .play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 10px solid #0F172A; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (hover: hover) and (pointer: fine) { .xhero-ghost:hover { background: rgba(15, 23, 42, .05); } }

.xhero-facts { display: flex; gap: 36px; margin-top: 44px; padding-top: 26px; border-top: 1px solid #E2E8F0; opacity: 0; animation: xIn 700ms var(--ease-out-strong) 860ms forwards; }
.xhero-facts b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #0F172A; }
.xhero-facts span { font-size: 13.5px; color: #64748B; }

/* ---------- Escena ---------- */
.xhero-stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; justify-self: end; transform: translateY(var(--sy, 0px)) scale(var(--ss, 1)); will-change: transform; }
.xhero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xl { fill: none; vector-effect: non-scaling-stroke; stroke-width: 14; stroke-linecap: round; stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); }
.xl--g { stroke: url(#xg); animation: xDrawL 1400ms var(--ease-in-out-strong) 700ms forwards; filter: drop-shadow(0 8px 18px rgba(0, 200, 150, .35)); }
.xl--n { stroke: #1B2B45; animation: xDrawL 1400ms var(--ease-in-out-strong) 950ms forwards; }
@keyframes xDrawL { to { stroke-dashoffset: 0; } }
.xhero-lines circle { fill: #fff; stroke: #00C896; stroke-width: 3; }

.shop, .xpack, .xtoast { position: absolute; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; }
.shop > *, .xpack > *, .xtoast > * { }
.shop { width: 34%; background: #fff; border: 1px solid #E2E8F0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .35); }
.shop--a { left: 0; top: 4%; }
.shop--b { right: 0; bottom: 4%; }
.shop, .xpack { opacity: 0; animation: xPop 800ms var(--ease-out-strong) forwards; }
.shop--a { animation-delay: 380ms; } .shop--b { animation-delay: 520ms; } .xpack { animation-delay: 1500ms; }
@keyframes xPop { from { opacity: 0; filter: blur(8px); scale: .94; } to { opacity: 1; filter: blur(0); scale: 1; } }
.shop__img { height: 120px; background-size: cover; background-position: center; }
.shop__body { padding: 12px 14px 14px; }
.shop__body b { display: block; font-size: 15px; color: #0F172A; letter-spacing: -.01em; }
.shop__body span { font-size: 12.5px; color: #64748B; }
.shop__tag { position: absolute; top: 10px; right: 10px; font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; color: #047857; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); }

.xpack { right: 2%; top: 3%; width: 38%; padding: 16px; border-radius: 22px; color: #E2E8F0; background: rgba(15, 23, 42, .92); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 70px -30px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(16px); }
.xpack__top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: #94A3B8; }
.xpack__top .a-pill { margin-left: auto; background: rgba(0, 200, 150, .15); color: #6EE7B7; }
.xpack__mark { width: 26px; height: 26px; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.xpack__title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 10px 0 10px; }
.xpack__row { display: flex; justify-content: space-between; font-size: 12.5px; color: #94A3B8; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.xpack__row b { color: #fff; }
.xpack__bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); margin: 10px 0 8px; overflow: hidden; }
.xpack__bar i { display: block; height: 100%; width: var(--fill, 0%); background: linear-gradient(90deg, #00C896, #6EE7B7); border-radius: 5px; transition: width 700ms var(--ease-out-strong); }
.xpack__foot { display: flex; justify-content: space-between; font-size: 11.5px; color: #94A3B8; }
.xpack__foot b { color: #6EE7B7; font-variant-numeric: tabular-nums; }

.xtoast { left: 0; bottom: 18%; display: flex; gap: 10px; align-items: center; width: 40%; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .82); border: 1px solid #E2E8F0; backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .35); font-size: 12px; color: #475569; opacity: 0; translate: 0 10px; scale: .97; transition: opacity 380ms var(--ease-out-strong), translate 480ms var(--ease-out-strong), scale 480ms var(--ease-out-strong); }
.xtoast.in { opacity: 1; translate: 0 0; scale: 1; }
.xtoast b { display: block; font-size: 13px; color: #0F172A; }
.xtoast small { font-size: 11.5px; }
.xtoast__ic { width: 34px; height: 34px; border-radius: 11px; background: #E6FAF4; display: grid; place-items: center; flex: none; }
.xtoast__ic svg { width: 18px; height: 18px; fill: none; stroke: #059669; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.xhero-scroll { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 1.5px solid #CBD5E1; opacity: 0; animation: xIn 600ms ease 1600ms forwards; }
.xhero-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #00C896; animation: xWheel 1.8s var(--ease-in-out-strong) infinite; }
@keyframes xWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 1080px) {
  .xhero-inner { grid-template-columns: 1fr; gap: 40px; }
  .xhero-stage { justify-self: center; }
}
@media (max-width: 640px) {
  .xhero { padding: 120px 0 64px; }
  .xhero-title { font-size: 46px; }
  .xhero-lead { font-size: 17px; }
  .xhero-cta { flex-direction: column; align-items: stretch; }
  .xhero-cta .btn-demo-header, .xhero-ghost { justify-content: center; }
  .xhero-facts { gap: 20px; }
  .xhero-facts b { font-size: 20px; }
  .xhero-facts span { font-size: 12px; }
  .shop__img { height: 74px; }
  .shop__body { padding: 8px 10px 10px; }
  .shop__body b { font-size: 12.5px; } .shop__body span { font-size: 10.5px; }
  .shop__tag { font-size: 9.5px; padding: 3px 7px; }
  .xpack { padding: 11px; border-radius: 16px; }
  .xpack__title { font-size: 14px; margin: 6px 0; }
  .xpack__row { display: none; }
  .xpack__bar { margin: 6px 0; }
  .xpack__top { font-size: 10px; } .xpack__top .a-pill { display: none; }
  .xpack__foot { font-size: 9.5px; }
  .xtoast { width: 50%; padding: 9px 10px; font-size: 10.5px; }
  .xtoast b { font-size: 11px; } .xtoast small { font-size: 10px; }
  .xtoast__ic { width: 26px; height: 26px; }
  .xl { stroke-width: 9; }
  .xhero-stage { aspect-ratio: 1 / 1.3; max-width: 400px; }
  .xhero-lines circle { r: 5; }
  .xhero-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xhero-title .ln > span, .xhero-pill, .xhero-lead, .xhero-cta, .xhero-facts, .shop, .xpack, .xhero-scroll { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .xl, .xhero-underline path { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .xhero-pill i::after, .xhero-scroll span { animation: none; }
}
.xhero-scroll::before { content: ""; position: absolute; inset: -10px; }