/* ==========================================================================
   hero.css — cabecera de la portada: trama técnica, resplandor y los
   indicadores de "taller abierto ahora".
   ========================================================================== */

.tech-grid{
  background-image:
    linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
}

.glow-cyan{
  background:radial-gradient(58% 58% at 78% 12%, var(--color-glow-cyan) 0%, var(--color-glow-fade) 68%);
}

/* Anillo que se expande alrededor del punto verde de "abierto". */
.pulse-ring::before{
  content:''; position:absolute; inset:var(--ring-inset); border-radius:var(--radius-full);
  border:2px solid var(--color-wa); opacity:.75; animation:ring 2.2s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes ring{
  0%  { transform:scale(.85); opacity:.75 }
  70% { transform:scale(1.35); opacity:0 }
  100%{ opacity:0 }
}

.dot-live{ animation:blink 1.8s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

@media (prefers-reduced-motion: reduce){
  .pulse-ring::before,.dot-live{ animation:none; }
}