/* ─── Hero · tarjetas del panel flotando (10-oct-2026) ───────────────────────────
   Decorativas (aria-hidden), mismo lenguaje que el panel v4 y los clips de «01 · Por qué»:
   #161616 / borde #2c2c31 / tinta #f2f2f2 · #a1a1a6 · #6b6b70 / azul #3b5bff / verde #34c759.
   Escritorio (≥1024): tres tarjetas a la derecha, entre el antetítulo y las píldoras
   (v4-hero.js mide esa franja; sin JS quedan centradas). Por debajo: una sola, en flujo,
   bajo los botones. Las animaciones son CSS; el JS sólo pone el parallax y la cifra de CPU. */

.hero .env{position:relative}
.ht{--ht-bg:rgba(22,22,22,.66);--ht-borde:#2c2c31;--ht-t1:#f2f2f2;--ht-t2:#a1a1a6;--ht-t3:#6b6b70;--ht-azul:#3b5bff;--ht-verde:#34c759;--ht-ambar:#f5a524;
  position:absolute;z-index:1;pointer-events:none;user-select:none;-webkit-user-select:none;
  right:max(0px,calc(var(--pad) - max(0px,(100vw - var(--ancho)) / 2)));
  top:50%;height:min(400px,56vh);transform:translateY(-50%);
  width:min(430px,34vw);font:400 clamp(11px,.95vw,14px)/1.35 "Inter",system-ui,sans-serif;color:var(--ht-t1);
  perspective:900px}
.ht.medida{transform:none}                     /* v4-hero.js puso top/height reales */

.ht-c{position:absolute;will-change:transform}
.ht-1{top:0;right:0;width:23.5em;z-index:2}
.ht-2{top:36%;left:0;width:19.5em;z-index:3}
.ht-3{bottom:0;right:2%;width:24.5em;z-index:1}

/* entrada escalonada + flotación lenta; van en .ht-f para no pelearse con el parallax de .ht-c */
.ht-f{animation:htEntra 1s cubic-bezier(.2,.8,.2,1) var(--d,.5s) both,htFlota var(--fl,8s) ease-in-out calc(var(--d,.5s) + 1s) infinite}
.ht-1 .ht-f{--d:.55s;--fl:8s}
.ht-2 .ht-f{--d:.7s;--fl:9.5s;--fy:-7px}
.ht-3 .ht-f{--d:.85s;--fl:7.2s;--fy:-5px}
@keyframes htEntra{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes htFlota{0%,100%{transform:none}50%{transform:translateY(var(--fy,-9px))}}
html.hi-js:not(.hi-abre) .ht-f{animation-play-state:paused}   /* espera a la intro, como el titular */
.ht.quieto .ht-f,.ht.quieto .ht-f *{animation-play-state:paused!important}

.ht-t{background:var(--ht-bg);border:1px solid var(--ht-borde);border-radius:1.65em;padding:1.15em 1.25em;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.3)}
.ht-3 .ht-t{background:rgba(22,22,22,.58)}

.ht-cab{display:flex;align-items:center;gap:.75em}
.ht-ico{flex:none;width:2.45em;height:2.45em;border-radius:.75em;display:grid;place-items:center;background:#1f1f22;border:1px solid var(--ht-borde);color:var(--ht-t2)}
.ht-ico svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ht-nom{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1em}
.ht-nom b{font-weight:600;font-size:1.08em;color:var(--ht-t1);white-space:nowrap;letter-spacing:-.01em}
.ht-nom small{font-size:.88em;color:var(--ht-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.92em;letter-spacing:0}

.ht-chip{flex:none;display:inline-flex;align-items:center;gap:.45em;height:1.95em;padding:0 .7em;border-radius:999px;font-weight:500;font-size:.88em;white-space:nowrap}
.ht-ok{color:var(--ht-verde);background:rgba(52,199,89,.12)}
.ht-ok i{width:.5em;height:.5em;border-radius:50%;background:var(--ht-verde);box-shadow:0 0 0 0 rgba(52,199,89,.5);animation:htLatido 2.4s ease-out infinite}
@keyframes htLatido{0%{box-shadow:0 0 0 0 rgba(52,199,89,.55)}70%,100%{box-shadow:0 0 0 .5em rgba(52,199,89,0)}}


/* 1 · servidor: CPU en vivo */
.ht-cpu{display:flex;align-items:center;gap:1em;margin-top:.9em;padding-top:.85em;border-top:1px solid rgba(44,44,49,.8)}
.ht-cpu-cab{flex:none;display:flex;flex-direction:column;gap:.1em;min-width:3.6em;color:var(--ht-t3)}
.ht-cpu-cab b{font-weight:600;font-size:1.3em;color:var(--ht-t1);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ht-graf{position:relative;flex:1;height:2.9em;overflow:hidden;border-radius:.5em;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ht-graf svg{position:absolute;left:0;top:0;width:200%;height:100%;animation:htCorre 9s linear infinite}
@keyframes htCorre{to{transform:translateX(-50%)}}

/* 2 · factura: pendiente → pagada */
.ht-imp{display:flex;align-items:baseline;justify-content:space-between;margin-top:.9em}
.ht-imp b{font-weight:600;font-size:1.55em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ht-imp span{color:var(--ht-t3)}
.ht-est{display:grid}
.ht-est>*{grid-area:1/1;justify-self:end}
.ht-pend{color:var(--ht-ambar);background:rgba(245,165,36,.12);animation:htPend 7s ease infinite}
.ht-pag{color:var(--ht-verde);background:rgba(52,199,89,.12);animation:htPag 7s ease infinite}
.ht-pag svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;animation:htTick 7s ease infinite}
.ht-barra{height:.3em;margin-top:.85em;border-radius:99px;background:#232326;overflow:hidden}
.ht-barra i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--ht-azul);transform-origin:0 50%;animation:htBarra 7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes htBarra{0%{transform:scaleX(0);background:var(--ht-azul)}36%{transform:scaleX(1);background:var(--ht-azul)}44%,90%{transform:scaleX(1);background:var(--ht-verde)}100%{transform:scaleX(1);background:var(--ht-verde);opacity:0}}
@keyframes htPend{0%,36%{opacity:1;transform:none}42%,92%{opacity:0;transform:translateY(-.4em)}100%{opacity:1;transform:none}}
@keyframes htPag{0%,38%{opacity:0;transform:translateY(.4em) scale(.9)}44%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes htTick{0%,42%{stroke-dashoffset:14}50%,100%{stroke-dashoffset:0}}

/* 3 · ticket: escribe… → respuesta → resuelto */
.ht-av{flex:none;width:2.45em;height:2.45em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3b5bff,#7c93ff);color:#fff;font-weight:600;font-size:.92em}
.ht-msg{display:grid;margin-top:.85em}
.ht-msg>*{grid-area:1/1;align-self:start}
.ht-burb{justify-self:start;max-width:100%;padding:.6em .85em;border-radius:1em 1em 1em .3em;background:#232326;color:var(--ht-t1)}
.ht-escribe{display:inline-flex;gap:.3em;padding:.85em .9em;animation:htEscribe 8s ease infinite}
.ht-escribe i{width:.42em;height:.42em;border-radius:50%;background:var(--ht-t2);animation:htPunto 1s ease-in-out infinite}
.ht-escribe i:nth-child(2){animation-delay:.15s}.ht-escribe i:nth-child(3){animation-delay:.3s}
.ht-resp{animation:htResp 8s ease infinite}
.ht-gris{color:var(--ht-t2);background:rgba(255,255,255,.06);animation:htEscribe 8s ease infinite}
.ht-res{animation:htResuelto 8s ease infinite}
@keyframes htPunto{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-.18em)}}
@keyframes htEscribe{0%,30%{opacity:1}34%,94%{opacity:0}100%{opacity:1}}
@keyframes htResp{0%,32%{opacity:0;transform:translateY(.35em)}38%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes htResuelto{0%,46%{opacity:0;transform:scale(.85)}52%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* escritorio estrecho: el titular necesita el sitio */
@media (max-width:1180px) and (min-width:1024px){
  .ht{width:min(380px,35vw)}
}

/* tablet y móvil: una sola tarjeta (el servidor), en flujo bajo los botones */
@media (max-width:1023px){
  .ht{position:relative;right:auto;top:auto;height:auto;transform:none;width:100%;max-width:23.5em;margin-top:28px;font-size:12px;perspective:none}
  .ht.medida{transform:none}
  .ht-c{position:relative;top:auto;right:auto;left:auto;bottom:auto;width:auto;will-change:auto}
  .ht-2,.ht-3{display:none}
  .ht-1 .ht-f{--d:.75s;--fy:-4px}
  .ht-t{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (max-width:1023px) and (max-height:700px){ .ht{display:none} }   /* pantallas bajas: nada que empuje */
@media (max-width:560px){ .ht{max-width:none;margin-top:24px} }

@media (prefers-reduced-motion:reduce){
  .ht-f,.ht-f *{animation:none!important}
  .ht-c{transform:none!important}
  .ht-pend,.ht-escribe,.ht-gris{opacity:0}
  .ht-pag svg{stroke-dashoffset:0}
}