/* =========================================================
   DATO · capa independiente para Datavía
   Todo vive dentro de #dato-layer. No afecta estilos del sitio.
   ========================================================= */
#dato-layer{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;overflow:hidden;
  contain:strict;
}
#dato-layer .dato-character{
  position:absolute;left:0;top:0;
  width:var(--dato-w,120px);height:var(--dato-h,100px);
  opacity:0;visibility:hidden;
  will-change:transform,opacity;
}
#dato-layer .dato-sprite{
  position:absolute;inset:0;
  transform-origin:50% 100%;
  will-change:transform;
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}
#dato-layer .dato-character.dato-tappable .dato-sprite{pointer-events:auto;cursor:pointer}
#dato-layer .dato-img{
  position:absolute;left:50%;bottom:0;
  height:100%;width:auto;max-width:none;
  transform:translateX(-50%);
  display:block;user-select:none;-webkit-user-drag:none;
  /* contorno blanco fino: se lee bien sobre fondos claros y oscuros */
  filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.95));
}
#dato-layer .dato-shadow{
  position:absolute;left:50%;bottom:-3px;
  width:62%;height:8%;margin-left:-31%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(11,17,19,.28),rgba(11,17,19,0) 70%);
  opacity:0;will-change:transform,opacity;
}

/* ---------- Efectos de movimiento (motion FX) ---------- */
#dato-layer .dato-speed{position:absolute;top:22%;width:42%;height:46%;pointer-events:none;opacity:0;will-change:opacity}
#dato-layer .dato-speed i{position:absolute;right:0;height:3px;border-radius:3px;background:#0B1113;box-shadow:0 0 0 1.5px rgba(255,255,255,.9);transform-origin:100% 50%;animation:datoSpeed .32s linear infinite}
#dato-layer .dato-speed i:nth-child(1){top:12%;width:70%}
#dato-layer .dato-speed i:nth-child(2){top:46%;width:100%;animation-delay:-.11s}
#dato-layer .dato-speed i:nth-child(3){top:80%;width:55%;animation-delay:-.21s}
@keyframes datoSpeed{0%{transform:scaleX(.35);opacity:.2}40%{opacity:1}100%{transform:scaleX(1);opacity:0}}
#dato-layer .dato-fall{position:absolute;left:28%;bottom:100%;width:44%;height:60%;pointer-events:none;opacity:0}
#dato-layer .dato-fall i{position:absolute;bottom:0;width:3px;border-radius:3px;background:#0B1113;box-shadow:0 0 0 1.5px rgba(255,255,255,.9);transform-origin:50% 100%;animation:datoFall .3s linear infinite}
#dato-layer .dato-fall i:nth-child(1){left:8%;height:70%}
#dato-layer .dato-fall i:nth-child(2){left:48%;height:100%;animation-delay:-.1s}
#dato-layer .dato-fall i:nth-child(3){left:88%;height:60%;animation-delay:-.2s}
@keyframes datoFall{0%{transform:scaleY(.3);opacity:.2}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}
#dato-layer .dato-fx{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}
#dato-layer .dato-puff{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:2px solid #0B1113}
#dato-layer .dato-ring{width:60px;height:14px;margin:-7px 0 0 -30px;border-radius:50%;border:2px solid #0B1113;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
#dato-layer .dato-ray{width:3px;height:14px;margin:-7px 0 0 -1.5px;border-radius:3px;background:#0B1113;box-shadow:0 0 0 1.5px rgba(255,255,255,.9);transform-origin:50% 50%}
#dato-layer .dato-mark{font:800 26px/1 'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif;color:#0B1113;-webkit-text-stroke:0;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 3px 0 #fff;transform-origin:50% 100%}
#dato-layer .dato-ghost{position:absolute;left:0;top:0;pointer-events:none}
#dato-layer .dato-ghost img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);opacity:.5;filter:grayscale(1) contrast(.9)}
@media (prefers-reduced-motion:reduce){#dato-layer .dato-speed i,#dato-layer .dato-fall i{animation:none}}