/* Parpadeo */
:root{
	--pulso_opa: 0.1;
	--pulso_dur: 1.5s;
}
.zz_parpadea_punto{
	background-color: #800;
	border-radius: 50%;
	max-width: 20px;
	min-width: 20px;
	width: 20px;
	max-height: 20px;
	min-height: 20px;
	height: 20px;
	aspect-ratio: 1/1;
	float: right;

	animation-name: parpadeo;
	animation-duration: var(--pulso_dur);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;

	-webkit-animation-name:parpadeo;
	-webkit-animation-duration: var(--pulso_dur);
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
}

.tipoEnlace:hover .zz_parpadea_ico{
	color: #fff;
}

.zz_parpadea_ico{
	box-sizing: border-box;
	color: #800 !important;
	border-radius: 50%;
	max-width: 27px;
	min-width: 27px;
	width: 27px;
	max-height: 27px;
	min-height: 27px;
	text-align: center;
	height: 27px;
	aspect-ratio: 1/1;

	float: right;

	animation-name: parpadeo;
	animation-duration: var(--pulso_dur);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;

	-webkit-animation-name:parpadeo;
	-webkit-animation-duration: var(--pulso_dur);
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
}

/*
@-moz-keyframes parpadeo{
	0% { opacity: 1.0; }
	50% { opacity: var(--pulso_opa); }
	100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {
	0% { opacity: 1.0; }
	50% { opacity: var(--pulso_opa); }
	100% { opacity: 1.0; }
}

@keyframes parpadeo {
	0% { opacity: 1.0; }
	50% { opacity: var(--pulso_opa); }
	100% { opacity: 1.0; }
}
	*/

/* ************************************* */

:root {
  --pulso_dur: 2s;
  --pulso_opa: 0.2;
}

.zz_parpadea_ico {
  box-sizing: border-box;
  color: #800;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  display: flex; /* Mejor que float para centrar el icono */
  align-items: center;
  justify-content: center;
  float: right;

  /* Animación de Opacidad (la que ya tenías) */
  animation: parpadeo var(--pulso_dur) ease-in-out infinite;
}

/* Aplicamos la animación de movimiento directamente al icono de la campana */
.zz_parpadea_ico .icoAnim {
  display: inline-block;
  /* Duración total de 5s: los primeros 1s se mueve, los otros 4s descansa */
  animation: balanceo 5s ease-in-out infinite;
  transform-origin: top center; /* Para que oscile desde arriba */
}

/* Animación de Opacidad */
@keyframes parpadeo {
  0%, 100% { opacity: 1.0; }
  50% { opacity: var(--pulso_opa); }
}

/* Animación de Balanceo (Simula el toque) */
@keyframes balanceo {
  0% { transform: rotate(0); }
  5% { transform: rotate(15deg); }  /* Inicio del movimiento */
  10% { transform: rotate(-15deg); }
  15% { transform: rotate(10deg); }
  20% { transform: rotate(-10deg); }
  25% { transform: rotate(5deg); }
  30% { transform: rotate(0); }       /* Fin del movimiento (3 ciclos aprox) */
  100% { transform: rotate(0); }      /* Pausa larga hasta reiniciar */
}