/* =====================================================================
   INFINITHO 360 · Tarjetas de planes (web pública y vista previa del panel)
   ===================================================================== */
/* Flex centrado: con 1, 2, 3 o 4 planes la fila queda equilibrada */
.pricing { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
.pricing > .pc { flex: 1 1 100%; }
@media (min-width: 640px) { .pricing > .pc { flex: 1 1 calc(50% - 9px); max-width: 420px; } }
@media (min-width: 1100px) { .pricing > .pc { flex: 1 1 240px; max-width: 360px; } }

.pc {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px 24px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(17, 34, 71, .8), rgba(10, 22, 48, .7));
  border: 1px solid var(--line-soft);
}
.pc.is-featured {
  border-color: rgba(201, 165, 90, .6);
  background:
    radial-gradient(400px 220px at 50% -10%, rgba(201, 165, 90, .16), transparent 70%),
    linear-gradient(180deg, rgba(24, 46, 94, .9), rgba(10, 22, 48, .85));
  box-shadow: 0 30px 70px -30px rgba(201, 165, 90, .35), var(--shadow);
}
.pc__ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  color: #1b1404; background: var(--gold-grad); box-shadow: 0 8px 20px -8px rgba(201, 165, 90, .8);
}
.pc__name { font-size: 32px; color: var(--ivory); }
.pc__desc { margin: 4px 0 0; font-size: 14px; color: var(--text-soft); }
.pc__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pc__price strong { font: 600 44px/1 var(--font-display); color: var(--gold-400); }
.pc__price span { font-size: 13.5px; color: var(--muted); }
.pc__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.pc__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); }
.pc__list li .ico { margin-top: 2px; color: var(--gold-500); }
.pc__list--feat { padding-top: 16px; border-top: 1px dashed var(--line-soft); }
.pc__list--feat li { color: var(--text-soft); }
.pc__list--feat li .ico { color: var(--ok); }
.pc__cta { margin-top: auto; width: 100%; height: 48px; }
.pc > ul:last-of-type { margin-bottom: 26px; }   /* separa la última lista del botón, que queda abajo */