:root{
  --paw-color:#ff7a00;              /* naranjito */
  --paw-shadow:rgba(255,122,0,.25);
  --loader-bg:rgba(255,255,255,.95);
  --fade-ms:260ms;                  /* duración de fade in/out */
}

/* Overlay */
#loader-paws{
  position:fixed; inset:0; display:none; z-index:9999;
  opacity:0; background:var(--loader-bg);
  transition: opacity var(--fade-ms) ease;
  backdrop-filter: blur(2px);
}
#loader-paws.show{ display:block; opacity:1; }

/* Caja */
#loader-paws .loader-box{ position:absolute; inset:0 }

/* Contenedor de huellas */
.paw-trail{ position:absolute; inset:0; pointer-events:none }

/* HUELLA */
.paw{
  position:absolute; width:40px; height:40px; color:var(--paw-color); opacity:0;
  filter: drop-shadow(0 3px 8px var(--paw-shadow));
  /* SVG en mask para poder teñir con currentColor */
  -webkit-mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path d='M20 24c3 0 6-3 6-7s-3-7-6-7-6 3-6 7 3 7 6 7zM44 24c3 0 6-3 6-7s-3-7-6-7-6 3-6 7 3 7 6 7zM12 40c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9zM52 40c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9zM32 60c10 0 18-6 18-14 0-6-8-12-18-12s-18 6-18 12c0 8 8 14 18 14z'/>\
</svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path d='M20 24c3 0 6-3 6-7s-3-7-6-7-6 3-6 7 3 7 6 7zM44 24c3 0 6-3 6-7s-3-7-6-7-6 3-6 7 3 7 6 7zM12 40c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9zM52 40c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9zM32 60c10 0 18-6 18-14 0-6-8-12-18-12s-18 6-18 12c0 8 8 14 18 14z'/>\
</svg>") center/contain no-repeat;
  background: currentColor;
  animation: paw-pop 1400ms ease-in-out infinite;
}

/* Posiciones + delays para las 10 huellas existentes en tu HTML */
.paw:nth-child(1) { left:12%; top:18%; transform:rotate(-16deg); animation-delay:0ms; }
.paw:nth-child(2) { left:26%; top:30%; transform:rotate( 10deg); animation-delay:120ms; }
.paw:nth-child(3) { left:42%; top:22%; transform:rotate( -6deg); animation-delay:240ms; }
.paw:nth-child(4) { left:58%; top:34%; transform:rotate( 18deg); animation-delay:360ms; }
.paw:nth-child(5) { left:74%; top:20%; transform:rotate(-12deg); animation-delay:480ms; }
.paw:nth-child(6) { left:18%; top:64%; transform:rotate( 14deg); animation-delay:600ms; }
.paw:nth-child(7) { left:36%; top:74%; transform:rotate(-18deg); animation-delay:720ms; }
.paw:nth-child(8) { left:54%; top:66%; transform:rotate(  8deg); animation-delay:840ms; }
.paw:nth-child(9) { left:70%; top:78%; transform:rotate(-20deg); animation-delay:960ms; }
.paw:nth-child(10){ left:86%; top:64%; transform:rotate(  6deg); animation-delay:1080ms; }

/* Texto "Cargando…" */
.loader-text{
  position:absolute; left:50%; bottom:8svh; transform:translateX(-50%);
  font-weight:600; font-size:.98rem; color:var(--paw-color)
}

/* Animación huellitas */
@keyframes paw-pop{
  0%   {opacity:0; transform:translateY(8px) scale(.9) rotate(var(--r,0deg))}
  20%  {opacity:.85}
  55%  {opacity:1;  transform:translateY(0)    scale(1)   rotate(var(--r,0deg))}
  100% {opacity:0;  transform:translateY(-8px) scale(.95) rotate(var(--r,0deg))}
}