/* Hero de las páginas SEO: fundido de puntos al entrar y digitalizador con el ratón */
.hero-fx{position:relative;overflow:hidden;isolation:isolate;background-color:#0a0a0a;min-height:min(100svh,900px)}
/* Las páginas de servicio reservan 80 px para el menú; aquí la imagen pasa por debajo */
.hero-service.hero-fx{margin-top:-80px}
.hero-fx>.container{position:relative;z-index:2;width:100%}
.hero-fx-video,.hero-fx-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:cover}
.hero-fx-canvas{opacity:0;transition:opacity .3s;background:#0a0a0a}
.hero-fx-canvas.on{opacity:1;transition:none}
.hero-fx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,7,.94) 0%,rgba(6,8,7,.8) 30%,rgba(6,8,7,.28) 58%,rgba(6,8,7,.05) 78%),linear-gradient(0deg,#0a0a0a 0%,rgba(10,10,10,.55) 16%,transparent 42%),linear-gradient(180deg,rgba(6,8,7,.75) 0%,transparent 22%)}
.hero-fx-readout{position:absolute;z-index:2;top:124px;right:32px;margin:0;display:flex;align-items:center;gap:10px;font:400 10px/1.4 var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,247,.72)}
.hero-fx-readout::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent,#00ff66);box-shadow:0 0 10px var(--accent,#00ff66)}
.hero-fx-readout b{font-weight:400;color:var(--accent,#00ff66);font-variant-numeric:tabular-nums}
.hero-fx-readout a{color:inherit;text-decoration:none}
.hero-fx-readout a:hover,.hero-fx-readout a:focus-visible{color:var(--accent,#00ff66)}
.hero-fx-tag{position:absolute;left:0;top:0;z-index:3;pointer-events:none;white-space:nowrap;padding:4px 7px;background:rgba(6,10,8,.72);border:1px solid rgba(0,255,102,.35);font:400 10px/1 var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--accent,#00ff66);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s}
.hero-fx-tag.on{opacity:1}
@media(max-width:768px){
  .hero-fx{min-height:100svh}
  .hero-fx::after{background:linear-gradient(0deg,#0a0a0a 0%,rgba(8,10,9,.9) 48%,rgba(8,10,9,.5) 74%,rgba(8,10,9,.62) 100%)}
  .hero-fx-readout{top:auto;bottom:18px;right:auto!important;left:20px}
}