/* ============================================================
   HERO SHARED EFFECTS — CSS
   ============================================================
   Versión genérica y reutilizable de 2 efectos que nacieron en el
   hero de la Home (ver hero-home.css/.js): el typewriter (palabra
   que se digita/borra en loop) y los botones magnéticos.

   NO depende del slideshow ni de las clases .pu-home-hero/.ph-*
   de la Home — se activa solo con estos 2 patrones de markup,
   para poder agregarse a cualquier hero existente sin tocar su
   layout:

   1) Typewriter: <span class="hs-type" data-hs-words="a,b,c">a</span>
      (el texto inicial del span debe ser igual a la 1.ª palabra
      de data-hs-words — así se ve bien incluso si el JS no carga).

   2) Botón magnético: envolver el/los botón(es) en un contenedor
      con [data-hs-magnetic-group], y cada botón con el atributo
      [data-hs-magnetic]. El JS inserta el wrapper .hs-magnetic-wrap
      automáticamente.

   No se tocó hero-home.css/.js — la Home sigue usando su propio
   sistema, sin cambios.
   ============================================================ */

.hs-type{
  display:inline-block;
  font-style:italic;font-weight:500;color:#F4D000;
}
.hs-type[data-hs-text]::before{content:attr(data-hs-text);}
.hs-type[data-hs-text] .hs-type__src{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.hs-type::after{
  content:'';display:inline-block;width:2px;height:.82em;margin-left:3px;
  background:#F4D000;vertical-align:.06em;
  animation:hs-caret 1.05s steps(1) infinite;
}
@keyframes hs-caret{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion: reduce){
  .hs-type::after{animation:none;opacity:1;}
}

.hs-magnetic-wrap{display:inline-block;will-change:transform;}