/* El botón posiciona; solo los elementos internos del SVG se transforman. */
.guridi-icon-button{display:block;width:84px;height:84px;padding:0;border:0;border-radius:19px;background:transparent;overflow:visible;cursor:pointer}
.guridi-icon-button:focus-visible{outline:3px solid var(--amber);outline-offset:5px}
.guridi-icon-button .guridi-icono{display:block;width:100%;height:auto;overflow:visible}
.guridi-icon-motion .guridi-icon-button:not([data-played]) .guridi-icono{visibility:hidden}
.guridi-icono .gi-fondo,.guridi-icono .gi-g,.guridi-icono .gi-i,.guridi-icono .gi-rayo{transform-box:fill-box}
.guridi-icono .gi-fondo{transform-origin:50% 50%}
.guridi-icono .gi-g{transform-origin:50% 68%}
.guridi-icono .gi-i{transform-origin:50% 100%}
.guridi-icono .gi-rayo{transform-origin:50% 50%}
.guridi-icono.is-playing .gi-fondo{animation:gi-pop .7s cubic-bezier(.3,.7,.4,1) both}
.guridi-icono.is-playing .gi-g{animation:gi-plop .9s cubic-bezier(.3,.7,.4,1) .25s both}
.guridi-icono.is-playing .gi-i{animation:gi-plop .9s cubic-bezier(.3,.7,.4,1) .34s both}
.guridi-icono.is-playing .gi-rayo{animation:gi-zap .8s ease-out .7s both}
@keyframes gi-pop{
  0%{transform:scale(0);opacity:0}
  35%{transform:scale(1.12,.9);opacity:1}
  55%{transform:scale(.94,1.06)}
  75%{transform:scale(1.03,.98)}
  100%{transform:none}
}
@keyframes gi-plop{
  0%{transform:translateY(-55%) scale(.2,.2);opacity:0}
  18%{transform:translateY(-35%) scale(.75,1.3);opacity:1}
  36%{transform:translateY(0) scale(1.35,.6)}
  52%{transform:translateY(-12%) scale(.88,1.14)}
  68%{transform:translateY(0) scale(1.1,.9)}
  82%{transform:translateY(-2%) scale(.97,1.03)}
  100%{transform:none}
}
@keyframes gi-zap{
  0%{transform:translateY(-120%) rotate(-30deg) scale(.3);opacity:0}
  35%{transform:translateY(8%) rotate(14deg) scale(1.25);opacity:1}
  50%{transform:rotate(-10deg) scale(.9)}
  62%{transform:rotate(7deg) scale(1.08)}
  74%{transform:rotate(-4deg) scale(.98)}
  86%{transform:rotate(2deg)}
  100%{transform:none}
}
@media(max-width:700px){.guridi-icon-button{width:64px;height:64px;border-radius:14px}}
@media(prefers-reduced-motion:reduce){
  .guridi-icon-motion .guridi-icon-button:not([data-played]) .guridi-icono{visibility:visible}
  .guridi-icono.is-playing .gi-fondo,.guridi-icono.is-playing .gi-g,.guridi-icono.is-playing .gi-i,.guridi-icono.is-playing .gi-rayo{animation:none}
}