/* ============================================================
   CLIRO.COM — FAVORITOS PAGE CSS
============================================================ */
.fav-section { padding:40px 0 80px; }
.fav-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:32px;
}
.fav-count { font-size:0.92rem; color:var(--gray); font-weight:500; }
.btn-clear {
  background:none; border:1.5px solid var(--border);
  color:var(--gray); font-family:var(--font-b); font-size:0.84rem; font-weight:500;
  padding:8px 18px; border-radius:50px; cursor:pointer;
  transition:border-color var(--t), color var(--t), transform var(--t);
}
.btn-clear:hover { border-color:var(--red); color:var(--red); transform:scale(1.03); }
.fav-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px;
}
/* Card removal animation */
.pcard.removing {
  animation:cardOut 0.35s var(--ease) forwards;
}
@keyframes cardOut {
  to { opacity:0; transform:scale(0.88) translateY(10px); }
}
/* Empty state */
.empty-state { text-align:center; padding:100px 32px; }
.empty-state .es-icon {
  font-size:5.5rem; margin-bottom:24px; display:block;
  animation:pulse-icon 2.5s ease-in-out infinite;
}
@keyframes pulse-icon {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.12); }
}
.empty-state h3 { font-family:var(--font-h); font-size:1.9rem; font-weight:800; margin-bottom:12px; }
.empty-state p { color:var(--gray); font-size:1rem; margin-bottom:32px; }
.empty-state .btn { animation:bounceBtn 1s 0.5s var(--ease) both; }
@keyframes bounceBtn {
  0%   { opacity:0; transform:translateY(20px); }
  60%  { transform:translateY(-5px); }
  100% { opacity:1; transform:translateY(0); }
}