/* ePrilux · Corazón para guardar en las tarjetas (módulo guardar, 26/10/2026) */
.epx-guardar-caja { position: relative; }
.epx-guardar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e4e6e9 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .15s linear, transform .15s ease;
}
.epx-guardar svg { width: 17px; height: 17px; fill: none; stroke: #06163d; stroke-width: 1.6; stroke-linejoin: round; }
.epx-guardar:hover, .epx-guardar:focus-visible { border-color: #06163d !important; }
.epx-guardar:focus-visible { outline: 2px solid #23a7d6; outline-offset: 2px; }
.epx-guardar[aria-pressed="true"] svg { fill: #23a7d6; stroke: #23a7d6; }
.epx-guardar--latido { transform: scale(1.15); }
@media (max-width: 767px) {
  .epx-guardar { top: 6px; right: 6px; width: 30px; height: 30px; }
  .epx-guardar svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .epx-guardar { transition: none; } .epx-guardar--latido { transform: none; } }
/* Karen: «el corazón que solo aparezca en el hover». Con ratón, sale al pasar por la tarjeta (o al llegar con el
   teclado); si ya está guardado, se ve siempre. En pantallas táctiles no hay «pasar por encima»: se ve siempre. */
@media (hover: hover) and (pointer: fine) {
  .epx-guardar { opacity: 0; transition: opacity .15s linear, border-color .15s linear, transform .15s ease; }
  .e-loop-item:hover .epx-guardar,
  .e-loop-item:focus-within .epx-guardar,
  .epx-guardar[aria-pressed="true"] { opacity: 1; }
}