/* css/heart.css */

/* Animación más suave y sutil */
@keyframes heartbeat {
  0% { transform: rotate(-45deg) scale(1); }
  14% { transform: rotate(-45deg) scale(1.12); }
  28% { transform: rotate(-45deg) scale(1); }
  42% { transform: rotate(-45deg) scale(1.12); }
  70% { transform: rotate(-45deg) scale(1); }
}

/* Clase base del corazón (Tamaño reducido y alineado) */
.heart-icon {
  width: 12px;  /* Reducido de 20px a 12px */
  height: 12px;
  background-color: var(--red);
  display: inline-block;
  position: relative;
  
  /* Truco de alineación: sube un poco el corazón para centrarlo visualmente con la letra */
  top: -1px; 
  margin-right: 6px; /* Espacio entre el corazón y el texto "Latidos" */
  
  transform: rotate(-45deg);
  animation: heartbeat 1.4s ease-in-out infinite; /* Un poco más lento y suave */
  flex-shrink: 0;
  vertical-align: middle; /* Ayuda a la alineación en algunos navegadores */
}

/* Partes redondas del corazón (ajustadas al nuevo tamaño) */
.heart-icon::before,
.heart-icon::after {
  content: "";
  background-color: var(--red);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
}

.heart-icon::before { top: -6px; left: 0; } /* Ajuste matemático: mitad del tamaño */
.heart-icon::after { left: 6px; top: 0; }

/* Variante Grande (Solo si la usas en portadas grandes) */
.heart-icon.lg {
  width: 24px; 
  height: 24px;
  top: -2px;
  margin-right: 10px;
}
.heart-icon.lg::before,
.heart-icon.lg::after {
  width: 24px;
  height: 24px;
}
.heart-icon.lg::before { top: -12px; left: 0; }
.heart-icon.lg::after { left: 12px; top: 0; }