/* =====================================================================
   css/holo-hero.css — HERO «Proyección» (holo-reel) · prefijo hh-
   Biblia: design/holo-biblia.md. Funciona con y sin html.holo.
   - Escena en .hh-stage (container query): 1 unidad de diseño = --u = 100cqw/760.
     Lienzo de 760 × 620 unidades; .hh-a coloca por --x --y --w --h.
   - Película de 20 s: 5 capítulos × 4 s. Todas las animaciones de capítulo duran
     var(--T) y se desfasan con --c (índice del capítulo). js/holo-hero.js las
     realinea con el reloj real (Web Animations), pausa fuera de pantalla, etc.
   - Solo se anima transform / opacity / clip-path / stroke-dashoffset / filter.
   - Sin animaciones (reduced-motion): fotograma fijo del capítulo [data-ch].
   ===================================================================== */

#top.hh{
  --hb:var(--holo,#2AA5F5);--hhi:var(--holo-hi,#7FD0FF);--hdim:var(--holo-dim,rgba(42,165,245,.35));
  --hfaint:var(--holo-faint,rgba(42,165,245,.12));--hpanel:var(--holo-panel,rgba(8,16,32,.72));
  --hred:#FF3B3B;--htx:#EAF0FA;--htx2:#8C9AB5;--T:20s;--he:cubic-bezier(.22,1,.36,1);
  --hpad:calc(92px + clamp(8px,3vh,40px));
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--holo-void,#03060D);padding:var(--hpad) 0 0;
}
.hh-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 65% at 74% 64%,rgba(42,165,245,.11),rgba(42,165,245,0) 70%),
    linear-gradient(rgba(140,154,181,.05) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(90deg,rgba(140,154,181,.05) 1px,transparent 1px) 0 0/96px 96px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 35%,transparent 100%);
          mask-image:radial-gradient(120% 90% at 60% 40%,#000 35%,transparent 100%)}

/* ---------- retícula: texto 1–5, escena 6–12 sangrando a la derecha ---------- */
#top .hh-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
#top .hero-copy{grid-column:1/6;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;position:relative;z-index:3;padding-bottom:2vh}
#top .hero-copy>.kicker{margin-bottom:var(--s4,16px)}
#top .hero-copy>h1{font-size:clamp(40px,min(4.9vw,7.4vh),80px);margin-bottom:var(--s5,24px)}
#top .hero-copy>.hero-sub{margin-bottom:var(--s6,32px)}
#top .hh-col{grid-column:6/13;grid-row:1;position:relative;z-index:1;min-width:0;display:flex;justify-content:flex-start;
  margin-right:calc(-1 * max(0px,(100vw - var(--maxw,1288px)) / 2) - var(--gutter,24px))}

/* ---------- escenario ---------- */
.hh-stage{--u:calc(100cqw / 760);container-type:inline-size;position:relative;flex:none;
  width:min(100%,1060px,calc((100vh - 212px) * 760 / 620));
  width:min(100%,1060px,calc((100svh - 212px) * 760 / 620));
  aspect-ratio:760/620;color:var(--htx)}
@supports not (width:1cqw){.hh-stage{--u:calc(min(820px,56vw) / 760)}}
.hh-in{position:absolute;inset:0}
.hh-a{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}

/* suelo holográfico en perspectiva */
.hh-floor{position:absolute;left:-45%;right:-75%;top:64%;bottom:0;z-index:1;overflow:hidden;pointer-events:none;
  perspective:calc(220 * var(--u));perspective-origin:43% 0;
  transform:translate3d(calc(var(--mx,0) * -10px),0,0);
  -webkit-mask-image:radial-gradient(46% 120% at 43% 100%,#000 8%,rgba(0,0,0,.5) 42%,transparent 82%);
          mask-image:radial-gradient(46% 120% at 43% 100%,#000 8%,rgba(0,0,0,.5) 42%,transparent 82%)}
.hh-plane{position:absolute;left:0;right:0;bottom:0;height:600%;transform-origin:50% 100%;transform:rotateX(81deg)}
.hh-lines{position:absolute;left:0;right:0;top:calc(-48 * var(--u));bottom:0;will-change:transform;
  background-image:linear-gradient(rgba(42,165,245,.55) 2px,transparent 2px),linear-gradient(90deg,rgba(42,165,245,.55) 2px,transparent 2px);
  background-size:calc(48 * var(--u)) calc(48 * var(--u));background-position:50% 100%;
  animation:hhFloor 2.6s linear infinite}
.hh-horizon{position:absolute;left:-25%;right:-45%;top:64%;height:1px;z-index:1;
  background:linear-gradient(90deg,rgba(127,208,255,0),rgba(127,208,255,.42) 38%,rgba(127,208,255,.42) 58%,rgba(127,208,255,0))}
.hh-pool{position:absolute;left:calc(130 * var(--u));width:calc(500 * var(--u));top:calc(452 * var(--u));height:calc(160 * var(--u));z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,165,245,.20),rgba(42,165,245,0))}

/* cono de luz */
.hh-cone{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;animation:hhCone 7s ease-in-out infinite}
.hh-cone2{animation:hhConeB 3.4s ease-in-out infinite;will-change:opacity}
.hh-flash{position:absolute;left:calc(220 * var(--u));top:calc(360 * var(--u));width:calc(320 * var(--u));height:calc(240 * var(--u));z-index:2;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(127,208,255,.42),rgba(42,165,245,0));animation:hhFlash 4s ease-out infinite;animation-delay:-.3s}

/* emisor */
.hh-emitter{position:absolute;left:calc(160 * var(--u));top:calc(482 * var(--u));width:calc(440 * var(--u));height:calc(132 * var(--u));z-index:3;overflow:visible}
/* anillos y núcleo: capas HTML (centro del emisor = 380,548) aplanadas como el disco; giran en el compositor */
.hh-rings{position:absolute;left:calc(380 * var(--u));top:calc(548 * var(--u));width:0;height:0;z-index:3;transform:scaleY(.206)}
.hh-ring{position:absolute;left:0;top:0;width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));margin:calc(var(--d) * -.5 * var(--u)) 0 0 calc(var(--d) * -.5 * var(--u));will-change:transform}
.hh-ring svg{display:block;width:100%;height:100%;overflow:visible}
.hh-core{border-radius:50%;background:radial-gradient(closest-side,#BFE6FF,rgba(127,208,255,.7) 35%,rgba(42,165,245,0))}
.hh-r1{animation:hhSpin 40s linear infinite}
.hh-r2{animation:hhSpin 24s linear infinite reverse}
.hh-r3{animation:hhSpin 13s linear infinite}
.hh-core{animation:hhCore 4s var(--he) infinite;animation-delay:-.3s}

/* polvo de luz */
.hh-dust{position:absolute;inset:0;z-index:4;pointer-events:none;transform:translate3d(calc(var(--mx,0) * 8px),0,0)}
.hh-dust i{position:absolute;left:calc(var(--x) * var(--u));top:calc(540 * var(--u));width:calc(3 * var(--u));height:calc(3 * var(--u));min-width:2px;min-height:2px;border-radius:50%;
  background:var(--hhi);box-shadow:0 0 6px var(--hb);opacity:0;animation:hhDust var(--d) linear infinite;animation-delay:var(--dd)}

/* escena plana: capturas siempre a escala 1, sin 3D ni will-change (nítidas a DPR 2–3); paralaje 2D en px enteros */
.hh-scene{position:absolute;inset:0;z-index:5;pointer-events:none}
.hh-rig{position:absolute;inset:0}
.hh-obj{transform:translate(calc(var(--mx,0) * var(--pz,0) * 2px),calc(var(--my,0) * var(--pz,0) * 1px))}
@supports (width:round(1.5px,1px)){.hh-obj{transform:translate(round(calc(var(--mx,0) * var(--pz,0) * 2px),1px),round(calc(var(--my,0) * var(--pz,0) * 1px),1px))}}

/* ciclo: el alambre traza la maqueta real (grupos --k: estructura→cabecera→contenido→imágenes); el escaneo revela el sólido encima y recorta el alambre debajo, en sincronía */
.hh-body,.hh-wire,.hh-wire g>*,.hh-wstall svg,.hh-morph,.hh-solid,.hh-scanl,.hh-co,.hh-leads path,
.hh-card,.hh-odo>span,.hh-tall img,.hh-me,.hh-typing,.hh-bot,.hh-sh,.hh-sh2,.hh-chk,.hh-area,.hh-curve,.hh-dot{
  animation-duration:var(--T);animation-iteration-count:infinite;animation-timing-function:var(--he);animation-fill-mode:both;
  animation-delay:calc(var(--c,0) * 4s - 20.3s + var(--k,0s))}
.hh-body{position:absolute;inset:0;opacity:0;animation-name:hhBody}
.hh-wire{--cm:calc(-60 * var(--u));position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(100% 0 0 0);animation-name:hhWireClip;animation-timing-function:linear}
.hh-wire svg{position:absolute;left:0;top:0;display:block;width:100%;height:100%;overflow:visible}
.hh-ws{position:absolute;left:calc(var(--sx) * var(--u));top:calc(var(--sy) * var(--u));width:calc(var(--sw) * var(--u));height:calc(var(--sh) * var(--u));overflow:hidden}
.hh-wsph{border-radius:calc(20 * var(--u))}
.hh-wstall svg{height:auto;aspect-ratio:1200/4200;animation-name:hhScroll}
.hh-wire g>*{fill:none;stroke:var(--hhi);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:0;animation-name:hhWire}
.hh-wf>g:first-child>*{stroke-width:1.5}
.hh-morph{z-index:6;opacity:0;transform-origin:0 0;animation-name:hhMorph}
.hh-morph svg{display:block;width:100%;height:100%;overflow:visible}
.hh-morph svg>*{fill:none;stroke:var(--hhi);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hh-solid{--cm:calc(-60 * var(--u));position:absolute;inset:0;animation-name:hhSolid;animation-timing-function:linear}
.hh-scanl{position:absolute;left:-4%;right:-4%;top:0;height:2px;margin-top:-1px;z-index:3;opacity:0;pointer-events:none;
  background:#CFEFFF;box-shadow:0 0 10px 2px rgba(127,208,255,.9),0 0 34px 8px rgba(42,165,245,.4);
  animation-name:hhScan;animation-timing-function:linear}
.hh-scanl::before{content:"";position:absolute;left:4%;right:4%;bottom:100%;height:calc(46 * var(--u));background:linear-gradient(to top,rgba(42,165,245,.26),rgba(42,165,245,0))}

/* pantallas */
.hh-win{border-radius:calc(10 * var(--u));overflow:hidden;background:#0A1324;
  box-shadow:0 0 0 1px rgba(42,165,245,.10),0 0 calc(40 * var(--u)) rgba(42,165,245,.30),0 calc(40 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.55)}
.hh-bar{position:absolute;left:0;right:0;top:0;height:calc(24 * var(--u));display:flex;align-items:center;gap:calc(5 * var(--u));padding:0 calc(10 * var(--u));
  background:#0C1729;border-bottom:1px solid rgba(127,208,255,.18)}
.hh-bar>i{width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:rgba(234,240,250,.2)}
.hh-url{position:absolute;left:50%;top:calc(5 * var(--u));width:calc(150 * var(--u));height:calc(14 * var(--u));margin-left:calc(-75 * var(--u));display:flex;align-items:center;justify-content:center;border-radius:calc(7 * var(--u));
  background:rgba(234,240,250,.06);font:500 calc(9.5 * var(--u))/1.3 var(--f-mono,monospace);letter-spacing:.04em;color:#A9B6CC;white-space:nowrap}
.hh-shot{position:absolute;left:0;right:0;top:calc(24 * var(--u));bottom:0;overflow:hidden;background:#0B1222}
.hh-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hh-tall img{height:auto;animation-name:hhScroll}
.hh-app .hh-shot{top:calc(34 * var(--u))}
.hh-tbar{height:calc(34 * var(--u));gap:calc(8 * var(--u));padding:0 calc(12 * var(--u));font:600 calc(11 * var(--u))/1 var(--f-display,inherit);color:#C9D4E6}
.hh-appic{width:calc(15 * var(--u));height:calc(15 * var(--u));border-radius:calc(4 * var(--u));border:1.5px solid var(--hhi);box-shadow:0 0 8px rgba(42,165,245,.6)}
.hh-ctl{margin-left:auto;display:flex;gap:calc(16 * var(--u));align-items:center}
.hh-ctl i{width:calc(11 * var(--u));height:calc(11 * var(--u));border:1px solid rgba(234,240,250,.4)}
.hh-ctl i:first-child{height:0;border-width:1px 0 0}
.hh-ctl i:last-child{border:0;background:linear-gradient(45deg,transparent 45%,rgba(234,240,250,.55) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,rgba(234,240,250,.55) 45% 55%,transparent 55%)}
.hh-phone{border-radius:calc(26 * var(--u));background:#050A14;
  box-shadow:0 0 0 1px rgba(42,165,245,.10),0 0 calc(40 * var(--u)) rgba(42,165,245,.32),0 calc(36 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.55)}
.hh-win::after,.hh-phone::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;border:1px solid rgba(127,208,255,.45);pointer-events:none}
.hh-phone .hh-shot{inset:calc(7 * var(--u));border-radius:calc(20 * var(--u))}
.hh-notch{position:absolute;left:50%;top:calc(12 * var(--u));width:calc(36 * var(--u));height:calc(10 * var(--u));margin-left:calc(-18 * var(--u));border-radius:99px;background:#050A14;z-index:2}

/* tienda */
.hh-card,.hh-count,.hh-chat,.hh-chart{border-radius:calc(10 * var(--u));background:rgba(8,15,30,.97);border:1px solid rgba(127,208,255,.42);
  box-shadow:0 0 calc(26 * var(--u)) rgba(42,165,245,.26),0 calc(22 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.5)}
.hh-card{position:absolute;inset:0;display:flex;align-items:center;gap:calc(10 * var(--u));padding:0 calc(12 * var(--u));animation-name:hhCard}
.hh-bag{position:relative;flex:none;width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:calc(8 * var(--u));background:rgba(42,165,245,.14);box-shadow:inset 0 0 0 1px rgba(127,208,255,.45)}
.hh-bag::before{content:"";position:absolute;left:calc(9 * var(--u));right:calc(9 * var(--u));top:calc(12 * var(--u));bottom:calc(8 * var(--u));border:1.5px solid var(--hhi);border-radius:calc(2 * var(--u))}
.hh-bag::after{content:"";position:absolute;left:calc(12.5 * var(--u));right:calc(12.5 * var(--u));top:calc(7 * var(--u));height:calc(6 * var(--u));border:1.5px solid var(--hhi);border-bottom:0;border-radius:calc(6 * var(--u)) calc(6 * var(--u)) 0 0}
.hh-card>span{display:flex;flex-direction:column;gap:calc(3 * var(--u));min-width:0}
.hh-card b{font-size:calc(11.5 * var(--u));font-weight:600;white-space:nowrap}
.hh-card em,.hh-count>span,.hh-chart>span{font:500 calc(9.5 * var(--u))/1.2 var(--f-mono,monospace);font-style:normal;letter-spacing:.06em;color:var(--htx2);white-space:nowrap;text-transform:uppercase}
.hh-card code{margin-left:auto;font:700 calc(11 * var(--u))/1 var(--f-mono,monospace);color:var(--hhi)}
.hh-count{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:calc(6 * var(--u));padding:0 calc(14 * var(--u))}
.hh-count>b{font-size:calc(30 * var(--u));font-weight:800;line-height:1;letter-spacing:-.02em}
.hh-odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.hh-odo>span{display:block;line-height:1;transform:translate3d(0,-75%,0);animation-name:hhOdo}

/* IA: chat + escudo + curva */
.hh-chat{border-radius:calc(14 * var(--u));font-size:calc(11.5 * var(--u));line-height:1.35}
.hh-chat-h{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(46 * var(--u));padding:0 calc(14 * var(--u));border-bottom:1px solid rgba(127,208,255,.18)}
.hh-av{flex:none;width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;border:1.5px solid var(--hhi);box-shadow:0 0 10px rgba(42,165,245,.6),inset 0 0 0 calc(5 * var(--u)) rgba(42,165,245,.25)}
.hh-chat-h span{display:flex;flex-direction:column;gap:calc(2 * var(--u))}
.hh-chat-h b{font-size:calc(12 * var(--u));font-weight:600;line-height:1.2}
.hh-chat-h em{font:500 calc(9 * var(--u))/1.2 var(--f-mono,monospace);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--htx2)}
.hh-msg{position:absolute;margin:0;display:flex;align-items:center;border-radius:calc(12 * var(--u))}
.hh-me{left:calc(70 * var(--u));top:calc(58 * var(--u));width:calc(216 * var(--u));height:calc(32 * var(--u));justify-content:center;white-space:nowrap;font-size:calc(10.5 * var(--u));
  background:rgba(42,165,245,.20);border:1px solid rgba(127,208,255,.42);border-bottom-right-radius:calc(4 * var(--u));animation-name:hhPop}
.hh-typing{left:calc(14 * var(--u));top:calc(102 * var(--u));width:calc(60 * var(--u));height:calc(28 * var(--u));justify-content:center;gap:calc(5 * var(--u));background:#0F1B30;border:1px solid rgba(127,208,255,.22);opacity:0;animation-name:hhTyping}
.hh-typing i{width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;background:var(--hhi);animation:hhDots 1s ease-in-out infinite}
.hh-typing i:nth-child(2){animation-delay:.15s}.hh-typing i:nth-child(3){animation-delay:.3s}
.hh-bot{left:calc(14 * var(--u));top:calc(102 * var(--u));width:calc(236 * var(--u));height:calc(54 * var(--u));padding:0 calc(11 * var(--u));
  background:#0F1B30;border:1px solid rgba(127,208,255,.22);border-bottom-left-radius:calc(4 * var(--u));animation-name:hhReply}
.hh-shield{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hh-sh{fill:none;stroke:var(--hhi);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1 1;transform-box:fill-box;
  filter:drop-shadow(0 0 5px rgba(42,165,245,.85));animation-name:hhDraw,hhCloseL}
.hh-shr{animation-name:hhDraw,hhCloseR}
.hh-sh2{fill:rgba(42,165,245,.08);stroke:rgba(127,208,255,.45);stroke-width:1;stroke-dasharray:4 5;animation-name:hhFade}
.hh-chk{fill:none;stroke:var(--htx);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;--k:1.6s;animation-name:hhDraw}
.hh-chart svg{position:absolute;left:calc(10 * var(--u));right:calc(10 * var(--u));top:calc(10 * var(--u));bottom:calc(26 * var(--u));width:calc(100% - 20 * var(--u));height:calc(100% - 36 * var(--u));overflow:visible}
.hh-chart>span{position:absolute;left:calc(14 * var(--u));bottom:calc(9 * var(--u))}
.hh-grid-l{fill:none;stroke:rgba(127,208,255,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.hh-axis{fill:none;stroke:rgba(127,208,255,.38);stroke-width:1;vector-effect:non-scaling-stroke}
.hh-area{fill:rgba(42,165,245,.13);stroke:none;--k:1.8s;animation-name:hhFade}
.hh-curve{fill:none;stroke:var(--hhi);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1 1;--k:1.6s;animation-name:hhDraw}
.hh-dot{fill:var(--htx);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 4px var(--hb));animation-name:hhDotPop}

/* ---------- anotaciones HUD ---------- */
.hh-leads{position:absolute;inset:0;width:100%;height:100%;z-index:6;overflow:visible;pointer-events:none}
.hh-leads path{fill:none;stroke:rgba(127,208,255,.6);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:0;animation-name:hhLead}
.hh-co{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));z-index:6;opacity:0;animation-name:hhCo;
  display:flex;flex-direction:column;gap:2px;font:500 max(10px,calc(10.5 * var(--u)))/1.35 var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--htx2);white-space:nowrap}
.hh-co.hh-r{left:auto;right:calc((760 - var(--x)) * var(--u));align-items:flex-end;text-align:right;--cx:8}
.hh-co b{color:var(--htx);font-weight:700}
.hh-co>span{display:flex;align-items:center;gap:6px}
.hh-live{width:6px;height:6px;border-radius:50%;background:var(--hred);box-shadow:0 0 8px var(--hred)}

/* visor */
.hh-cnr{position:absolute;z-index:7;width:calc(18 * var(--u));height:calc(18 * var(--u));border:0 solid rgba(127,208,255,.45);pointer-events:none}
.hh-tl{left:calc(4 * var(--u));top:calc(4 * var(--u));border-width:1px 0 0 1px}
.hh-tr{right:calc(8 * var(--u));top:calc(4 * var(--u));border-width:1px 1px 0 0}
.hh-bl{left:calc(4 * var(--u));bottom:calc(4 * var(--u));border-width:0 0 1px 1px}
.hh-br{right:calc(8 * var(--u));bottom:calc(4 * var(--u));border-width:0 1px 1px 0}
.hh-hud{position:absolute;left:calc(16 * var(--u));bottom:calc(14 * var(--u));z-index:7;font:500 max(10px,calc(10.5 * var(--u)))/1.4 var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase}
.hh-tc{display:flex;align-items:center;gap:8px;color:var(--htx2)}
.hh-tc b{color:var(--hred);font-weight:700}
.hh-tc span{color:var(--htx);font-variant-numeric:tabular-nums;contain:content}
.hh-tc em{font-style:normal}
.hh-rec{width:7px;height:7px;border-radius:50%;background:var(--hred);box-shadow:0 0 8px var(--hred);animation:hhRec 1.6s linear infinite}
.hh-cht{position:relative;height:1.4em;margin-top:4px;color:var(--hhi)}
.hh-cht span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;animation:hhTitle var(--T) linear infinite both;animation-delay:calc(var(--c,0) * 4s - 20s)}
.hh-fps{position:absolute;right:calc(18 * var(--u));bottom:calc(14 * var(--u));z-index:7;font:500 max(10px,calc(10 * var(--u)))/1.4 var(--f-mono,monospace);letter-spacing:.08em;color:#56627A}

/* fotograma fijo (sin animación / reduced-motion): manda [data-ch] */
.hh-stage[data-ch="0"] .hh-obj[data-c="0"] .hh-body,.hh-stage[data-ch="1"] .hh-obj[data-c="1"] .hh-body,.hh-stage[data-ch="2"] .hh-obj[data-c="2"] .hh-body,
.hh-stage[data-ch="3"] .hh-obj[data-c="3"] .hh-body,.hh-stage[data-ch="4"] .hh-obj[data-c="4"] .hh-body,
.hh-stage[data-ch="0"] :is(.hh-co,.hh-leads path,.hh-cht span)[data-c="0"],.hh-stage[data-ch="1"] :is(.hh-co,.hh-leads path,.hh-cht span)[data-c="1"],
.hh-stage[data-ch="2"] :is(.hh-co,.hh-leads path,.hh-cht span)[data-c="2"],.hh-stage[data-ch="3"] :is(.hh-co,.hh-leads path,.hh-cht span)[data-c="3"],
.hh-stage[data-ch="4"] :is(.hh-co,.hh-leads path,.hh-cht span)[data-c="4"]{opacity:1}

/* ---------- reproductor ---------- */
.hh-player{position:relative;z-index:4;display:flex;align-items:center;gap:var(--s4,16px);border-top:1px solid rgba(127,208,255,.14);padding:var(--s2,8px) 0 var(--s3,12px)}
.hh-play{display:none;flex:none;width:44px;height:44px;border-radius:50%;place-items:center;color:var(--htx);background:transparent;
  box-shadow:inset 0 0 0 1px rgba(127,208,255,.4);transition:box-shadow .2s,background-color .2s}
.hh-js .hh-play{display:grid}
.hh-play:hover{background:rgba(42,165,245,.12);box-shadow:inset 0 0 0 1px rgba(127,208,255,.75)}
.hh-play svg{width:18px;height:18px;fill:currentColor}
.hh-ip{display:none}
.hh-player.is-paused .hh-ip{display:block}
.hh-player.is-paused .hh-ipa{display:none}
.hh-chs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3,12px)}
.hh-ch{position:relative;display:flex;align-items:center;gap:var(--s2,8px);min-width:0;min-height:44px;padding:6px 0 0;background:none;border:0;cursor:pointer;
  font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--htx2);text-align:left;white-space:nowrap;transition:color .2s}
.hh-ch:hover,.hh-ch.on{color:var(--htx)}
.hh-chn{color:#7D8BA6;transition:color .2s} /* QA: antes #56627A (3,3:1); AA */
.hh-ch.on .hh-chn{color:var(--hb)}
.hh-chl{overflow:hidden;text-overflow:ellipsis}
.hh-pbar{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(127,208,255,.16);overflow:hidden}
.hh-ch.done .hh-pbar{background:rgba(127,208,255,.45)}
.hh-pbar b{position:absolute;inset:0;background:var(--hb);box-shadow:0 0 8px var(--hb);transform-origin:0 50%;transform:scaleX(0);
  animation:hhBar var(--T) linear infinite both;animation-delay:calc(var(--c,0) * 4s - 20s)}
.hh-ch.on .hh-pbar b{transform:none}
.hh-play:focus-visible,.hh-ch:focus-visible{outline:2px solid var(--hhi);outline-offset:3px;border-radius:4px}
.hh-play:focus-visible{border-radius:50%}

/* entrada con el sistema de motion (html.mo + .hero-in) */
.mo #top:not(.hero-in) :is(.hh-col,.hh-player){opacity:0}
.mo #top.hero-in .hh-col{animation:hhIn 1.1s var(--he) 120ms backwards}
.mo #top.hero-in .hh-player{animation:hhIn 700ms var(--he) 520ms backwards}

/* ---------- tableta / móvil ---------- */
@media (max-width:960px){
  #top.hh{--hpad:calc(92px + 16px)}
  #top .hh-grid{display:flex;flex-direction:column;align-items:stretch}
  #top .hero-copy{display:flex;padding-bottom:0}
  #top .hero-copy>h1{font-size:clamp(40px,7.4vw,64px)}
  #top .hh-col{margin:var(--s6,32px) calc(-1 * var(--gutter,24px)) 0;justify-content:center}
  .hh-stage{width:min(100%,640px)}
}
/* móvil horizontal / tableta horizontal bajita: texto y escena lado a lado (la escena no queda aplastada ni bajo el pliegue) */
@media (min-width:601px) and (max-width:960px) and (orientation:landscape){
  #top .hh-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  #top .hero-copy{grid-column:1/7}
  #top .hero-copy>h1{font-size:clamp(30px,4.4vw,46px)}
  #top .hh-col{grid-column:7/13;margin:0 calc(-1 * var(--gutter,24px)) 0 0;justify-content:center}
  #top.hh{--hpad:calc(92px + 8px)}
  .hh-stage{width:min(100%,calc((100vh - 40px) * 760 / 620));width:min(100%,calc((100svh - 40px) * 760 / 620))}
}
@media (max-width:600px){
  #top.hh{--hpad:calc(76px + 20px)}
  .hh-co,.hh-leads,.hh-fps,.hh-dm{display:none}
  /* el lienzo se recorta 40 u por cada lado: objetos ~12 % más grandes en el teléfono */
  #top .hh-col{justify-content:flex-start}
  .hh-stage{width:calc(100% * 760 / 680);margin-left:calc(100% * -40 / 680)}
  .hh-hud{left:calc(40 * var(--u) + 16px);bottom:6px;font-size:10px}
  .hh-tc em{display:none}
  .hh-cnr{display:none}
  .hh-chs{gap:var(--s2,8px)}
  .hh-chl{display:none}
  .hh-ch{justify-content:center}
  .hh-player{gap:var(--s3,12px)}
}
@media (max-width:360px){
  .hh-player{gap:8px}
  .hh-chs{gap:4px}
}

/* ---------- MÓVIL-1 · pulido no escritorio (todo < 1280 px; el escritorio no cambia) ---------- */
/* una columna (teléfono y tableta vertical): el HUD REC/CAP sale del lienzo y forma una tira de metadatos
   entre la escena y el reproductor, alineada con el margen de la página (antes pisaba el disco emisor) */
@media (max-width:600px),(min-width:601px) and (max-width:960px) and (orientation:portrait){
  .hh-stage{margin-bottom:32px}
  .hh-hud{top:calc(100% + 8px);bottom:auto;display:flex;align-items:center;gap:12px;white-space:nowrap}
  .hh-cht{margin-top:0;min-width:13em}
  .hh-fps{top:calc(100% + 8px);bottom:auto}
}
/* teléfono: el botón principal ocupa siempre todo el ancho (en EN el bloque se encogía al contenido y el botón quedaba a 3/4) */
@media (max-width:600px){
  #top .hero-cta{align-self:stretch}
}
/* teléfono grande / tableta mini vertical (481–600): un botón de 570 px era desproporcionado → ancho natural y enlace al lado */
@media (min-width:481px) and (max-width:600px){
  #top .hero-cta .btn{width:auto}
}
@media (min-width:601px) and (max-width:960px) and (orientation:portrait){
  .hh-hud{left:calc(var(--gutter,24px) - (100vw - min(100vw,640px)) / 2)}
  .hh-fps{right:calc(var(--gutter,24px) - (100vw - min(100vw,640px)) / 2)}
}
/* hero a dos columnas fuera del escritorio: la línea de confianza no cabe en una fila → columna limpia, sin puntos huérfanos */
@media (min-width:961px) and (max-width:1279px),(min-width:601px) and (max-width:960px) and (orientation:landscape){
  #top .hero-trust{flex-direction:column;gap:var(--s1,4px)}
  #top .hero-trust>span+span::before{display:none}
}
/* tableta horizontal / portátil pequeño: el «/ 00:20:00» del HUD rozaba el disco emisor */
@media (min-width:961px) and (max-width:1279px){
  .hh-tc em{display:none}
}
/* teléfono horizontal (poca altura): titular contenido, escena limpia (sin HUD ni anotaciones que pisen el objeto) */
@media (orientation:landscape) and (max-height:540px) and (max-width:960px){
  #top.hh{--hpad:calc(68px + 16px)}
  #top .hero-copy{grid-column:1/8}
  #top .hh-col{grid-column:8/13}
  #top .hero-copy>h1{font-size:clamp(28px,4.2vw,40px);margin-bottom:var(--s4,16px)}
  #top .hero-copy>.hero-sub{font-size:16px;margin-bottom:var(--s5,24px)}
  #top .hero-trust{margin-top:var(--s5,24px)}
  .hh-co,.hh-leads,.hh-hud,.hh-fps{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hh-stage *,.hh-player *{animation:none!important}
  #top .hh-play{display:none}
}

/* ---------- fotogramas ---------- */
@keyframes hhBody{
  0%{opacity:0;transform:translate3d(0,calc(10 * var(--u)),0)}
  2.5%{opacity:1;transform:none}
  18%{opacity:1;transform:none}
  22%,100%{opacity:0;transform:translate3d(0,calc(-8 * var(--u)),0)}}
@keyframes hhWire{0%{stroke-dashoffset:1}3.5%,17.5%{stroke-dashoffset:0}21.5%{stroke-dashoffset:-1}21.51%,100%{stroke-dashoffset:1}}
@keyframes hhWireClip{
  0%,5%{clip-path:inset(-2px var(--cm) var(--cm) var(--cm))}
  10%,16.5%{clip-path:inset(calc(100% + 2px) var(--cm) var(--cm) var(--cm))}
  19.5%,100%{clip-path:inset(-2px var(--cm) var(--cm) var(--cm))}}
@keyframes hhSolid{
  0%,5%{clip-path:inset(var(--cm) var(--cm) 100% var(--cm));filter:none}
  7.5%{filter:drop-shadow(calc(-3 * var(--u)) 0 0 rgba(255,59,59,.55)) drop-shadow(calc(3 * var(--u)) 0 0 rgba(42,165,245,.7))}
  10%{clip-path:inset(var(--cm) var(--cm) 0 var(--cm))}
  10.4%,16.3%{clip-path:inset(var(--cm))}
  10.5%{filter:none}
  16.5%{clip-path:inset(var(--cm) var(--cm) 0 var(--cm))}
  19.5%,100%{clip-path:inset(var(--cm) var(--cm) 100% var(--cm))}}
@keyframes hhScan{
  0%,5%{opacity:0;transform:translate3d(0,0,0)}
  5.3%,9.7%{opacity:1}
  10%,16.5%{opacity:0;transform:translate3d(0,calc(var(--h) * var(--u)),0)}
  16.8%,19.2%{opacity:.75}
  19.5%,100%{opacity:0;transform:translate3d(0,0,0)}}
@keyframes hhMorph{
  0%,19.4%{opacity:0;transform:none}
  19.5%{opacity:1;transform:none}
  22.5%{opacity:1;transform:translate(calc(172 * var(--u)),calc(-28 * var(--u))) scale(.3385,1.0888)}
  23.2%,100%{opacity:0;transform:translate(calc(172 * var(--u)),calc(-28 * var(--u))) scale(.3385,1.0888)}}
@keyframes hhLead{
  0%,8%{stroke-dashoffset:1;opacity:1}
  10.5%,17.5%{stroke-dashoffset:0;opacity:1}
  18.5%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hhCo{
  0%,9%{opacity:0;transform:translate3d(calc(var(--cx,-8) * 1px),0,0)}
  11%,17.5%{opacity:1;transform:none}
  18.5%,100%{opacity:0;transform:none}}
@keyframes hhTitle{0%,19.9%{opacity:1}20%,100%{opacity:0}}
@keyframes hhBar{0%{transform:scaleX(0)}20%{transform:scaleX(1)}20.01%,100%{transform:scaleX(0)}}
@keyframes hhCard{0%,10%{opacity:0;transform:translate3d(calc(44 * var(--u)),0,0)}11.5%,100%{opacity:1;transform:none}}
@keyframes hhOdo{0%,11.3%{transform:translate3d(0,0,0)}11.8%,13.3%{transform:translate3d(0,-25%,0)}13.8%,15.3%{transform:translate3d(0,-50%,0)}15.8%,100%{transform:translate3d(0,-75%,0)}}
@keyframes hhScroll{0%,11%{transform:translate3d(0,0,0)}16.3%,100%{transform:translate3d(0,-33%,0)}}
@keyframes hhPop{0%,5.5%{opacity:0;transform:translate3d(0,calc(8 * var(--u)),0)}7%,100%{opacity:1;transform:none}}
@keyframes hhTyping{0%,10.5%{opacity:0}11%,12.8%{opacity:1}13.2%,100%{opacity:0}}
@keyframes hhReply{0%,13%{opacity:0;clip-path:inset(0 100% 0 0)}13.4%{opacity:1}15.5%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes hhDraw{0%,2%{stroke-dashoffset:1}7%,100%{stroke-dashoffset:0}}
@keyframes hhCloseL{0%,4%{transform:translate3d(-16px,0,0)}9%,100%{transform:none}}
@keyframes hhCloseR{0%,4%{transform:translate3d(16px,0,0)}9%,100%{transform:none}}
@keyframes hhFade{0%,6%{opacity:0}9%,100%{opacity:1}}
@keyframes hhDotPop{0%,15%{opacity:0;transform:scale(0)}16%{opacity:1;transform:scale(1.7)}17%,100%{opacity:1;transform:scale(1)}}
@keyframes hhSpin{to{transform:rotate(360deg)}}
@keyframes hhDust{0%{opacity:0;transform:translate3d(0,0,0) scale(1)}12%{opacity:.9}75%{opacity:.45}100%{opacity:0;transform:translate3d(calc(var(--dx) * var(--u)),calc(-400 * var(--u)),0) scale(.3)}}
@keyframes hhFloor{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(48 * var(--u)),0)}}
@keyframes hhCone{0%,100%{opacity:.9}30%{opacity:1}52%{opacity:.86}55%{opacity:.98}72%{opacity:.92}}
@keyframes hhConeB{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes hhFlash{0%{opacity:0;transform:scale(.7)}14%{opacity:1;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.15)}}
@keyframes hhCore{0%,100%{transform:scale(1)}14%{transform:scale(1.35)}40%{transform:scale(1)}}
@keyframes hhDots{0%,60%,100%{transform:translate3d(0,0,0);opacity:.45}30%{transform:translate3d(0,-3px,0);opacity:1}}
@keyframes hhRec{0%,55%{opacity:1}60%,95%{opacity:.25}100%{opacity:1}}
@keyframes hhIn{from{opacity:0;transform:translate3d(0,16px,0)}}
/* sin WAAPI */
.hh-paused .hh-stage *,.hh-paused .hh-player *{animation-play-state:paused!important}
.hh-input{position:absolute;left:calc(14 * var(--u));right:calc(14 * var(--u));top:calc(214 * var(--u));display:flex;align-items:center;justify-content:space-between;height:calc(34 * var(--u));padding:0 calc(6 * var(--u)) 0 calc(12 * var(--u));border-radius:calc(10 * var(--u));
  border:1px solid rgba(127,208,255,.22);background:rgba(3,6,13,.5);font-size:calc(11 * var(--u));color:#5F6E88}
.hh-input b{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:calc(7 * var(--u));background:var(--hb);box-shadow:0 0 12px rgba(42,165,245,.6);position:relative}
.hh-input b::after{content:"";position:absolute;left:50%;top:50%;width:calc(7 * var(--u));height:calc(7 * var(--u));border:solid #03060D;border-width:2px 2px 0 0;transform:translate(-70%,-50%) rotate(45deg)}

/* QA: sin JS las capturas diferidas (data-src) nunca cargan; se oculta el icono de imagen rota */
#top:not(.hh-js) img[data-src]{visibility:hidden}