/* ═══════════════════════════════════════════════════════════
   css_hero.css  |  Primera sección de la portada (inc/hero_animado.php)
   GlobalTech / Sistema Prisma ERP
═══════════════════════════════════════════════════════════ */

.hx{
    --hx-blue:#0052cc;
    --hx-green:#00c896;
    --hx-ink:#0a0e1a;
    --hx-muted:#4b5568;
    --hx-bg:#f2f6fd;
    position:relative;overflow:hidden;isolation:isolate;
    margin-top:-40px;               /* pega la sección a la cabecera (main-wrapper tiene 40px de padding) */
    padding:4.5rem 0 5.5rem;
    background:var(--hx-bg);
    font-family:'Plus Jakarta Sans','Roboto','Segoe UI',sans-serif;
}
.hx-wrap{
    position:relative;              /* sin z-index: así la laptop puede mezclarse (multiply) con el fondo */
    display:grid;grid-template-columns:1fr 1.08fr;gap:3rem;align-items:center;
}

/* ── FONDO ──────────────────────────────────────────────── */
.hx-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hx-dots{
    position:absolute;inset:0;
    background-image:radial-gradient(rgba(0,82,204,.13) 1px,transparent 1.2px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 45%,#000 20%,transparent 70%);
            mask-image:radial-gradient(ellipse 60% 70% at 70% 45%,#000 20%,transparent 70%);
}
.hx-blob{position:absolute;border-radius:50%;filter:blur(70px);}
.hx-b1{width:520px;height:520px;right:-120px;top:-160px;background:rgba(0,82,204,.16);animation:hxBlob 14s ease-in-out infinite;}
.hx-b2{width:420px;height:420px;left:-160px;bottom:-200px;background:rgba(0,200,150,.14);animation:hxBlob 18s ease-in-out infinite reverse;}
.hx-b3{width:300px;height:300px;left:42%;top:30%;background:rgba(0,168,232,.12);animation:hxBlob 16s ease-in-out -5s infinite;}
@keyframes hxBlob{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(-50px,40px) scale(1.12);}
    66%{transform:translate(40px,-30px) scale(.92);}
}

/* ── TEXTO ──────────────────────────────────────────────── */
.hx-badge{
    display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;
    margin:0 0 1.3rem;padding:.45rem 1rem .45rem .8rem;border-radius:999px;
    background:#fff;border:1px solid #dce6f7;
    box-shadow:0 6px 18px -8px rgba(0,82,204,.25);
    font-size:.8rem;font-weight:600;color:#33415c;line-height:1.35;
}
.hx-live{position:relative;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--hx-green);}
.hx-live::after{
    content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--hx-green);
    animation:hxPing 1.6s ease-out infinite;
}
@keyframes hxPing{from{transform:scale(.6);opacity:1;}to{transform:scale(1.9);opacity:0;}}

/* Palabra rotativa: todas apiladas en la misma celda, el ancho es el de la más larga */
.hx-rot{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.35em;color:var(--hx-blue);font-weight:800;}
.hx-rot > span{
    grid-area:1/1;text-align:left;
    transform:translateY(110%);opacity:0;
    transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;
}
.hx-rot > span.on{transform:none;opacity:1;}
.hx-rot > span.off{transform:translateY(-110%);opacity:0;}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.hx-title{
    font-size:clamp(2rem,4.2vw,3.35rem);font-weight:800;line-height:1.1;
    letter-spacing:-.02em;color:var(--hx-ink);margin:0 0 1.2rem;
}
.hx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;}
.hx-w > span{display:inline-block;}
.hx-hl{position:relative;overflow:visible;}
.hx-hl > span{
    background:linear-gradient(90deg,#0052cc,#00a8e8 40%,#00c896 70%,#0052cc);
    background-size:220% auto;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:hxGrad 7s linear infinite;
}
@keyframes hxGrad{to{background-position:220% center;}}
.hx-underline{
    position:absolute;left:0;bottom:-.18em;width:100%;height:.32em;overflow:visible;
}
.hx-underline path{
    fill:none;stroke:var(--hx-green);stroke-width:5;stroke-linecap:round;
    stroke-dasharray:320;stroke-dashoffset:0;
}

.hx-sub{font-size:1.04rem;line-height:1.75;color:var(--hx-muted);max-width:540px;margin:0 0 1.8rem;}
.hx-sub strong{color:var(--hx-ink);}

.hx-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.5rem;}
.hx-btn{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.9rem 1.6rem;border-radius:.65rem;
    font:inherit;font-size:.93rem;font-weight:700;cursor:pointer;
    transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
}
.hx-btn-main{
    background:linear-gradient(135deg,#0052cc,#0a6cf0);color:#fff;border:0;
    box-shadow:0 12px 28px -10px rgba(0,82,204,.65);
}
.hx-btn-main::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
    transform:translateX(-120%);animation:hxShine 3.8s ease-in-out 2.5s infinite;
}
@keyframes hxShine{0%{transform:translateX(-120%);}40%,100%{transform:translateX(120%);}}
.hx-btn-main:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(0,82,204,.75);}
.hx-btn-main svg{transition:transform .2s;}
.hx-btn-main:hover svg{transform:translateX(3px);}
.hx-btn-ghost{background:#fff;color:var(--hx-ink);border:1.5px solid #d6e0f0;}
.hx-btn-ghost:hover{border-color:var(--hx-blue);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,82,204,.4);}
.hx-btn-play{
    display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
    background:var(--hx-blue);color:#fff;padding-left:2px;position:relative;
}
.hx-btn-play::after{
    content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--hx-blue);
    animation:hxPing 2s ease-out infinite;
}
.hx-btn:focus-visible{outline:3px solid rgba(0,82,204,.35);outline-offset:2px;}

.hx-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:0 0 2rem;padding:0;list-style:none;}
.hx-checks li{display:flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;color:#33415c;}
.hx-checks li span{
    display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
    background:rgba(0,200,150,.15);color:#00a37a;font-size:.65rem;font-weight:900;
}

.hx-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;}
.hx-stat{padding:0 1.3rem;border-left:1px solid #d9e2f1;}
.hx-stat:first-child{padding-left:0;border-left:0;}
.hx-stat strong{display:block;font-size:1.75rem;font-weight:800;line-height:1.1;color:var(--hx-blue);font-variant-numeric:tabular-nums;}
.hx-stat small{display:block;font-size:.76rem;line-height:1.3;color:#7b879c;font-weight:500;}

/* ── VISUAL ─────────────────────────────────────────────── */
.hx-visual{
    --mx:0;--my:0;
    position:relative;aspect-ratio:3/2;
    margin:1rem 1.5rem;
}
.hx-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;}
.hx-line{
    fill:none;stroke:var(--c);stroke-width:.35;stroke-linecap:round;
    stroke-dasharray:2 1.6;opacity:.75;
    animation:hxFlow 1.6s linear infinite;
}
@keyframes hxFlow{to{stroke-dashoffset:-3.6;}}
.hx-pkt{filter:drop-shadow(0 0 1.2px currentColor);}

/* Laptop: multiply funde el fondo blanco de la foto con el fondo de la sección */
.hx-laptop{
    position:absolute;inset:0;z-index:2;cursor:pointer;outline:none;
    mix-blend-mode:multiply;
    transform:translate(calc(var(--mx) * -8px),calc(var(--my) * -6px)) rotateY(calc(var(--mx) * 4deg)) rotateX(calc(var(--my) * -3deg));
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.hx-laptop img{
    width:100%;height:100%;max-width:none;object-fit:contain;
    /* La foto no tiene fondo blanco puro: difuminamos los bordes para que no se note el recuadro */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 78%,transparent 98%),linear-gradient(to bottom,transparent 2%,#000 14%,#000 84%,transparent 98%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 78%,transparent 98%),linear-gradient(to bottom,transparent 2%,#000 14%,#000 84%,transparent 98%);
            mask-composite:intersect;
    animation:hxHover 6s ease-in-out infinite;
}
@keyframes hxHover{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* Área de la pantalla (polígono sobre la foto) para el brillo */
.hx-screen{
    position:absolute;inset:0;pointer-events:none;
    clip-path:polygon(30.5% 19.2%,73.9% 18.3%,71.3% 66.7%,29.4% 59.3%);
    animation:hxHover 6s ease-in-out infinite;
}
.hx-glare{
    position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 48%,rgba(255,255,255,.1) 55%,transparent 62%);
    transform:translateX(-80%);
    animation:hxGlare 5.5s ease-in-out 2s infinite;
}
@keyframes hxGlare{0%{transform:translateX(-80%);}35%,100%{transform:translateX(80%);}}

.hx-play{
    position:absolute;left:51%;top:40%;z-index:3;
    display:grid;place-items:center;width:70px;height:70px;margin:-35px 0 0 -35px;
    border-radius:50%;padding-left:4px;
    background:rgba(255,255,255,.95);color:var(--hx-blue);
    box-shadow:0 14px 34px -6px rgba(0,30,90,.55);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s;
}
.hx-play::before,.hx-play::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid rgba(255,255,255,.8);
    animation:hxWave 2.4s ease-out infinite;
}
.hx-play::after{animation-delay:1.2s;}
@keyframes hxWave{from{transform:scale(1);opacity:.9;}to{transform:scale(1.9);opacity:0;}}
.hx-play-label{
    position:absolute;left:51%;top:calc(40% + 46px);z-index:3;
    transform:translate(-50%,6px);opacity:0;
    padding:.25rem .7rem;border-radius:999px;background:rgba(10,14,26,.75);
    color:#fff;font-size:.72rem;font-weight:700;white-space:nowrap;
    transition:opacity .25s,transform .25s;
}
.hx-laptop:hover .hx-play,.hx-laptop:focus-visible .hx-play{transform:scale(1.12);background:var(--hx-green);color:#fff;}
.hx-laptop:hover .hx-play-label,.hx-laptop:focus-visible .hx-play-label{opacity:1;transform:translate(-50%,0);}

/* Nodos de módulos */
.hx-node{
    position:absolute;z-index:3;
    transform:translate(-50%,-50%) translate(calc(var(--mx) * 14px),calc(var(--my) * 10px));
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.hx-node-in{
    display:flex;flex-direction:column;align-items:center;gap:.3rem;
    animation:hxBob 4.5s ease-in-out infinite;animation-delay:calc(var(--d) * -.7s);
}
.hx-node i{
    position:relative;display:grid;place-items:center;
    width:42px;height:42px;border-radius:12px;
    background:#fff;color:var(--c);
    box-shadow:0 8px 20px -6px color-mix(in srgb,var(--c) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);
}
.hx-node i::after{
    content:"";position:absolute;inset:-5px;border-radius:15px;
    border:2px solid var(--c);opacity:0;
    animation:hxNodePulse 3.2s ease-out infinite;animation-delay:calc(1.8s + var(--d) * .45s);
}
@keyframes hxNodePulse{0%{opacity:.7;transform:scale(.9);}60%,100%{opacity:0;transform:scale(1.25);}}
.hx-node b{
    font-size:.7rem;font-weight:700;color:#33415c;
    padding:.1rem .5rem;border-radius:999px;background:rgba(255,255,255,.85);
}
@keyframes hxBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* Tarjetas flotantes */
.hx-card{
    position:absolute;z-index:4;
    transform:translate(calc(var(--mx) * 22px),calc(var(--my) * 16px));
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.hx-card-in{
    display:flex;align-items:center;gap:.7rem;
    padding:.7rem .95rem;border-radius:.85rem;
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 18px 40px -14px rgba(10,30,80,.35),0 0 0 1px rgba(0,82,204,.06);
    animation:hxBob 5s ease-in-out infinite;
}
.hx-card-a{left:-6%;bottom:9%;}
.hx-card-a .hx-card-in{animation-delay:-1.5s;}
.hx-card-b{right:-7%;top:37%;}
.hx-card-b .hx-card-in{animation-delay:-3s;}
.hx-card-c{right:8%;bottom:-3%;}
.hx-card-c .hx-card-in{padding:.5rem .85rem;font-size:.74rem;color:#4b5568;border-radius:999px;}
.hx-card-c b{color:var(--hx-ink);}

.hx-card-ico{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:10px;}
.hx-ok{background:rgba(0,200,150,.15);color:#00a37a;}
.hx-doc{min-width:170px;}
.hx-doc strong{display:block;font-size:.82rem;color:var(--hx-ink);}
.hx-doc small{font-size:.72rem;color:#00a37a;font-weight:700;}
.hx-doc.swap{animation:hxDocIn .55s cubic-bezier(.2,.8,.2,1);}
@keyframes hxDocIn{from{opacity:0;transform:translateY(10px);filter:blur(3px);}to{opacity:1;transform:none;filter:none;}}
.hx-card-a .hx-ok.pop{animation:hxPop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes hxPop{0%{transform:scale(.6);}100%{transform:scale(1);}}

.hx-sales small{display:block;font-size:.7rem;color:#7b879c;font-weight:600;}
.hx-sales strong{font-size:1.05rem;color:var(--hx-ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.hx-bars{display:flex;align-items:flex-end;gap:3px;height:36px;}
.hx-bars i{
    display:block;width:7px;height:var(--h);border-radius:3px 3px 1px 1px;
    background:linear-gradient(180deg,#00c896,#0052cc);
    transform-origin:bottom;
    animation:hxBar 3.2s ease-in-out infinite;animation-delay:calc(var(--d) * .12s);
}
@keyframes hxBar{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.55);}}

.hx-sync{display:grid;place-items:center;color:var(--hx-blue);animation:hxSpin 2.5s linear infinite;}
@keyframes hxSpin{to{transform:rotate(360deg);}}

/* Indicador de scroll */
.hx-scroll{
    position:absolute;left:50%;bottom:1.1rem;z-index:3;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:.4rem;
    font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7b879c;
}
.hx-scroll:hover{color:var(--hx-blue);}
.hx-mouse{position:relative;width:22px;height:34px;border:2px solid currentColor;border-radius:12px;}
.hx-mouse i{
    position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:currentColor;
    animation:hxWheel 1.8s ease-in-out infinite;
}
@keyframes hxWheel{0%{opacity:0;transform:translateY(-3px);}30%{opacity:1;}100%{opacity:0;transform:translateY(10px);}}

/* ── ENTRADA (solo con JS; sin JS todo se ve normal) ────── */
.hx-js .hx-a{opacity:0;transform:translateY(22px);}
.hx-js .hx-w > span{transform:translateY(110%);}
.hx-js .hx-underline path{stroke-dashoffset:320;}
.hx-js .hx-laptop{opacity:0;}
.hx-js .hx-line{stroke-dashoffset:0;opacity:0;}
.hx-js .hx-node{opacity:0;}
.hx-js .hx-card{opacity:0;}
.hx-js .hx-pkt{opacity:0;}

.hx.hx-go .hx-a{
    opacity:1;transform:none;
    transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);
    transition-delay:calc(var(--d) * .12s + .1s);
}
.hx.hx-go .hx-w > span{
    transform:none;
    transition:transform .85s cubic-bezier(.2,.9,.25,1);
    transition-delay:calc(var(--d) * .07s + .2s);
}
.hx.hx-go .hx-underline path{transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1) 1.1s;stroke-dashoffset:0;}
.hx.hx-go .hx-laptop{
    opacity:1;
    animation:hxLaptopIn 1.2s cubic-bezier(.2,.8,.2,1) .25s backwards;
    transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .6s .25s;
}
@keyframes hxLaptopIn{from{opacity:0;transform:translateY(50px) scale(.9) rotateX(12deg);}}
.hx.hx-go .hx-line{opacity:.75;transition:opacity .6s calc(.9s + var(--d) * .1s);}
.hx.hx-go .hx-pkt{opacity:1;transition:opacity .4s 1.6s;}
.hx.hx-go .hx-node{
    opacity:1;
    transition:opacity .5s calc(.8s + var(--d) * .1s),transform .5s cubic-bezier(.2,.8,.2,1);
}
.hx.hx-go .hx-node-in{animation:hxNodeIn .7s cubic-bezier(.34,1.56,.64,1) calc(.8s + var(--d) * .1s) backwards,hxBob 4.5s ease-in-out calc(var(--d) * -.7s) infinite;}
@keyframes hxNodeIn{from{transform:scale(0);}}
.hx.hx-go .hx-card{opacity:1;transition:opacity .6s,transform .5s cubic-bezier(.2,.8,.2,1);}
.hx.hx-go .hx-card-a{transition-delay:1.4s,0s;}
.hx.hx-go .hx-card-b{transition-delay:1.65s,0s;}
.hx.hx-go .hx-card-c{transition-delay:1.9s,0s;}
.hx.hx-go .hx-card-a .hx-card-in{animation:hxCardL .8s cubic-bezier(.2,.8,.2,1) 1.4s backwards,hxBob 5s ease-in-out -1.5s infinite;}
.hx.hx-go .hx-card-b .hx-card-in{animation:hxCardR .8s cubic-bezier(.2,.8,.2,1) 1.65s backwards,hxBob 5s ease-in-out -3s infinite;}
.hx.hx-go .hx-card-c .hx-card-in{animation:hxCardU .8s cubic-bezier(.2,.8,.2,1) 1.9s backwards,hxBob 5s ease-in-out infinite;}
@keyframes hxCardL{from{opacity:0;transform:translateX(-30px);}}
@keyframes hxCardR{from{opacity:0;transform:translateX(30px);}}
@keyframes hxCardU{from{opacity:0;transform:translateY(20px);}}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1024px){
    .hx{padding:3.5rem 0 5rem;}
    .hx-wrap{grid-template-columns:1fr;gap:2rem;text-align:center;}
    .hx-copy{display:flex;flex-direction:column;align-items:center;}
    .hx-sub{margin-inline:auto;}
    .hx-actions,.hx-checks,.hx-stats{justify-content:center;}
    .hx-stats{justify-content:center;}
    .hx-visual{width:100%;max-width:620px;margin:0 auto;}
    .hx-card-a{left:0;}
    .hx-card-b{right:0;}
}
@media(max-width:600px){
    .hx{padding:2.5rem 0 2rem;}
    .hx-badge{font-size:.74rem;justify-content:center;}
    .hx-title br{display:none;}
    .hx-actions{width:100%;}
    .hx-btn{flex:1 1 auto;justify-content:center;padding:.85rem 1.1rem;}
    .hx-checks{flex-direction:column;align-items:flex-start;margin-inline:auto;}
    .hx-stat{padding:0 .9rem;}
    .hx-stat strong{font-size:1.4rem;}
    .hx-stat small{font-size:.7rem;}
    .hx-visual{margin-top:1rem;}
    .hx-node i{width:32px;height:32px;border-radius:9px;}
    .hx-node i svg{width:15px;height:15px;}
    .hx-node b{display:none;}
    .hx-play{width:54px;height:54px;margin:-27px 0 0 -27px;}
    .hx-play-label{display:none;}
    .hx-card-in{padding:.5rem .7rem;gap:.5rem;}
    .hx-card-a{left:-2%;bottom:2%;}
    .hx-card-ico{width:28px;height:28px;}
    .hx-doc{min-width:0;}
    .hx-doc strong{font-size:.72rem;}
    .hx-doc small{font-size:.66rem;}
    .hx-card-b{right:-2%;top:30%;}
    .hx-sales strong{font-size:.85rem;}
    .hx-bars{height:26px;}
    .hx-bars i{width:5px;}
    .hx-card-c{display:none;}
    .hx-scroll{display:none;}
}

@media (prefers-reduced-motion: reduce){
    .hx *,.hx *::before,.hx *::after{animation:none !important;transition-duration:.01ms !important;}
    .hx .hx-a,.hx .hx-laptop,.hx .hx-node,.hx .hx-card,.hx .hx-line,.hx .hx-pkt{opacity:1 !important;transform:none !important;}
    .hx .hx-w > span{transform:none !important;}
    .hx .hx-underline path{stroke-dashoffset:0 !important;}
}