/* ===== WRAPPER ===== */
.tpp-wrap {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1535;
  padding: 16px 0;
}

/* ===== HEADER ===== */
.tpp-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.tpp-title {
  font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px;
  background: linear-gradient(90deg, #1a1535 0%, #5b5be0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tpp-sub { font-size: 16px; color: #6b6f8a; line-height: 1.6; }

/* ===== GRID — siempre centrado, 1, 2 o 3 planes ===== */
.tpp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
}

/* ===== CARD ===== */
.tpp-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(26,21,53,0.06);
  border: 1px solid #eceefb;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 310px;
  flex-shrink: 0;
}
.tpp-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(26,21,53,0.12); }

.tpp-card.featured {
  background: linear-gradient(160deg, #6366f1 0%, #5b5be0 100%);
  color: #fff;
  transform: scale(1.04);
  z-index: 2;
  box-shadow: 0 24px 60px rgba(91,91,224,0.40);
}
.tpp-card.featured:hover { transform: scale(1.04) translateY(-6px); }

/* ===== BADGE ===== */
.tpp-badge {
  position: absolute; top: 22px; right: 22px;
  background: rgba(255,255,255,0.18); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 6px 14px; border-radius: 50px; text-transform: uppercase;
}

/* ===== ICON ===== */
.tpp-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: #eef0fe; font-size: 26px;
}
.tpp-card.featured .tpp-icon { background: rgba(255,255,255,0.18); }

/* ===== PLAN NAME + PRICE ===== */
.tpp-plan { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.tpp-price-row { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 4px; }
.tpp-price { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.tpp-period { font-size: 15px; color: #9094ac; font-weight: 500; }
.tpp-card.featured .tpp-period { color: rgba(255,255,255,0.75); }

/* ===== DESC + DIVIDER ===== */
.tpp-desc { font-size: 14px; color: #6b6f8a; line-height: 1.6; margin-bottom: 24px; min-height: 44px; }
.tpp-card.featured .tpp-desc { color: rgba(255,255,255,0.85); }
.tpp-divider { height: 1px; background: #eceefb; margin-bottom: 22px; }
.tpp-card.featured .tpp-divider { background: rgba(255,255,255,0.20); }

/* ===== FEATURES — INCLUIDAS ===== */
.tpp-features { list-style: none; margin: 0 0 28px; padding: 0; flex-grow: 1; }
.tpp-features li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; margin-bottom: 14px; }

.tpp-check {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: #eef0fe; display: flex; align-items: center; justify-content: center;
  color: #6366f1; font-size: 12px; font-weight: 700;
}
.tpp-card.featured .tpp-check { background: rgba(255,255,255,0.22); color: #fff; }

/* ===== FEATURES — NO INCLUIDAS ===== */
.tpp-feature-no { opacity: 0.45; }
.tpp-feature-no span:last-child { text-decoration: line-through; }

.tpp-cross {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: #f0f0f5; display: flex; align-items: center; justify-content: center;
  color: #9094ac; font-size: 12px; font-weight: 700;
}
.tpp-card.featured .tpp-feature-no { opacity: 0.50; }
.tpp-card.featured .tpp-cross { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }

/* ===== BUTTON ===== */
.tpp-btn {
  width: 100%; border: none; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700; padding: 16px; border-radius: 50px;
  background: #eef0fe; color: #5b5be0; transition: all 0.25s ease;
  text-decoration: none; text-align: center; display: block;
}
.tpp-btn:hover { background: #5b5be0; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(91,91,224,0.35); }
.tpp-btn.primary { background: linear-gradient(135deg, #6366f1 0%, #5b5be0 100%); color: #fff; box-shadow: 0 10px 24px rgba(99,102,241,0.35); }
.tpp-card.featured .tpp-btn { background: #fff; color: #5b5be0; }
.tpp-card.featured .tpp-btn:hover { background: #1a1535; color: #fff; }
.tpp-btn:active { transform: scale(0.97); }

/* ===== NOTE ===== */
.tpp-note { text-align: center; font-size: 13px; color: #9094ac; margin-top: 16px; }
.tpp-card.featured .tpp-note { color: rgba(255,255,255,0.75); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1040px) {
  .tpp-card { width: 280px; }
}
@media (max-width: 720px) {
  .tpp-grid { flex-direction: column; align-items: center; gap: 20px; }
  .tpp-card { width: 100%; max-width: 460px; }
  .tpp-card.featured { transform: scale(1); order: -1; }
  .tpp-card.featured:hover { transform: translateY(-6px); }
  .tpp-title { font-size: 30px; }
}
@media (max-width: 480px) {
  .tpp-head { margin-bottom: 28px; }
  .tpp-card { padding: 26px 20px; border-radius: 20px; }
  .tpp-icon { width: 46px; height: 46px; font-size: 22px; margin-bottom: 16px; }
  .tpp-plan { font-size: 20px; }
  .tpp-price { font-size: 36px; }
  .tpp-desc { min-height: auto; margin-bottom: 20px; }
  .tpp-features li { font-size: 14px; margin-bottom: 12px; }
  .tpp-btn { padding: 15px; font-size: 14.5px; }
  .tpp-title { font-size: 25px; }
  .tpp-sub { font-size: 14.5px; }
  .tpp-badge { top: 18px; right: 18px; font-size: 10px; padding: 5px 12px; }
}