<a class="ri-live-pill" href="https://player.lcinternet.es/v9/player/index.php#Radio%20Illa%20Formentera%20HQ" target="_blank" rel="noopener">
  <span class="ri-live-pill__top">
    <span class="ri-live-pill__text">EN DIRECTE</span>
    <span class="ri-live-pill__dot" aria-hidden="true"></span>
  </span>

  <span class="ri-live-pill__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" focusable="false" aria-hidden="true">
      <path d="M8 5v14l12-7z"></path>
    </svg>
  </span>

  <span class="screen-reader-text">Obrir el reproductor en directe</span>
</a>

.ri-live-pill{
  display: grid;
  grid-template-columns: 1fr;   /* 👈 fuerza 1 sola columna */
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 5px;

  padding: var(--space-2xs) var(--space-xs);
  background: #fff;
  

  
  width: fit-content;
  text-decoration: none;
  line-height: 1;

}

/* Fila superior (texto + punto) como bloque */
.ri-live-pill__top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Texto */
.ri-live-pill__text{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e1061b;
  white-space: nowrap;
}

/* Punto verde */
.ri-live-pill__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #2ecc71;
  position: relative;
}

.ri-live-pill__dot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  background:rgba(46,204,113,.35);
  animation:riPulse 1.4s ease-out infinite;
}

/* Icono abajo centrado */
.ri-live-pill__icon{
  display: grid;
  place-items: center;
}

.ri-live-pill__icon svg{
  width: 30px;
  height: 30px;
  display: block;
  fill: #e1061b;
}

@keyframes riPulse{
  0%   { transform:scale(.5); opacity:.9; }
  100% { transform:scale(1.6); opacity:0; }
}

.ri-live-pill:active{
  transform: scale(.96);
}

@media (prefers-reduced-motion: reduce){
  .ri-live-pill__dot::after{ animation:none; }
}