.anima-packs {
  background:#f7f8fa;
  padding:60px 20px;
}

.anima-packs__grid {
  display:grid;
  gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch;
}

/* =========================
   CARD BASE
========================= */

.pack {
  position:relative;
  background:#fff;
  border:1px solid #e9ecf0;
  border-radius:20px;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}

.pack:hover {
  transform:translateY(-8px);
  box-shadow:0 22px 48px rgba(0,0,0,.08);
}

.pack__title {
  margin:0;
  font:800 22px/1.3 "Montserrat",sans-serif;
  color:#111;
}

.pack__desc {
  margin:0;
  color:#666;
  font:500 15px/1.6 "Montserrat",sans-serif;
}

.pack__list {
  margin:6px 0 0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font:500 14px/1.6 "Montserrat",sans-serif;
  color:#333;
}

/* =========================
   PRECIO (más dominante)
========================= */

.pack__price {
  font:900 28px/1.1 "Montserrat",sans-serif;
  color:#F26A1B;
  margin-top:18px;
  letter-spacing:-0.5px;
}

/* =========================
   BOTONES
========================= */

.pack__ctas {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.pack .btn {
  width:100%;
  text-align:center;
  padding:12px 16px;
  border-radius:14px;
  font:800 14px/1 "Montserrat",sans-serif;
  transition:.2s ease;
}

.pack .btn--ghost {
  background:#f4f4f4;
  border:1px solid #ddd;
  color:#111;
}

.pack .btn--ghost:hover {
  background:#ececec;
}

/* =========================
   RECOMENDADO (dominante real)
========================= */

.pack--recommended {
  border:2px solid #F26A1B;
  background:#fffaf4;
  transform:scale(1.06);
  box-shadow:0 24px 60px rgba(242,106,27,.18);
  z-index:2;
}

.pack--recommended:hover {
  transform:scale(1.06) translateY(-6px);
}

.pack--recommended .pack__price {
  font-size:30px;
}

.pack--recommended::before {
  content:"Más recomendado";
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  background:#F26A1B;
  color:#fff;
  font:800 12px/1 "Montserrat",sans-serif;
  padding:7px 16px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){
  .pack--recommended {
    transform:none;
  }
}