/* ==========================================================================
   IBC — Planes de membresía
   Portada de texto (mismo patrón que legal.css, duplicado a propósito: cada
   página resuelve sus propios componentes bajo su propio archivo, como ya
   hacen activos.css/capital.css/normas.css entre sí) + rejilla de 3 planes.
   ========================================================================== */

.plans-hero {
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-lg);
  background-color: var(--color-navy-950);
  color: var(--color-on-dark);
  text-align: center;
}

.plans-hero__eyebrow {
  color: var(--color-brass-400);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.plans-hero__title {
  margin-top: var(--space-sm);
  font-size: var(--text-h2);
}

.plans-hero__lead {
  max-width: 46ch;
  margin: var(--space-sm) auto 0;
  color: var(--color-on-dark-soft);
}

/* --------------------------------------------------------------------------
   Rejilla de planes

   Tres columnas iguales en escritorio; la del centro (Corporativo) se eleva
   ligeramente y gana un borde de latón para leerse como la opción sugerida,
   sin depender de JavaScript ni de una insignia flotante que se recorte.
   -------------------------------------------------------------------------- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bone-50);
  border: 1px solid var(--border-hairline);
}

.plan-card--featured {
  position: relative;
  margin-top: calc(-1 * var(--space-sm));
  padding-block: calc(var(--space-lg) + var(--space-sm));
  background-color: var(--color-navy-950);
  color: var(--color-on-dark);
  border-color: var(--color-brass-500);
  box-shadow: var(--shadow-raised);
}

.plan-card__badge {
  position: absolute;
  top: 0;
  left: var(--space-md);
  transform: translateY(-50%);
  padding: 0.4rem 0.9rem;
  background-color: var(--color-brass-500);
  color: var(--color-navy-950);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.plan-card__name {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-title);
}

.plan-card__tagline {
  margin-top: var(--space-2xs);
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.plan-card--featured .plan-card__tagline { color: var(--color-on-dark-muted); }

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  font-family: var(--font-display);
}

.plan-card__price-currency {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
}

.plan-card--featured .plan-card__price-currency { color: var(--color-on-dark-soft); }

.plan-card__price-amount {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 600;
}

.plan-card__price-period {
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.plan-card--featured .plan-card__price-period { color: var(--color-on-dark-soft); }

.plan-card__rule {
  width: 3rem;
  height: 1px;
  margin-top: var(--space-md);
  background-color: var(--color-brass-500);
}

.plan-card__features {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  flex-grow: 1;
}

.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.plan-card--featured .plan-card__features li { color: var(--color-on-dark-soft); }

.plan-card__features i {
  margin-top: 0.2em;
  color: var(--color-brass-600);
  font-size: 0.8em;
}

.plan-card--featured .plan-card__features i { color: var(--color-brass-400); }

.plan-card__cta { margin-top: var(--space-lg); }
.plan-card__cta .btn { width: 100%; }

.plans-note {
  max-width: 62ch;
  margin: var(--space-lg) auto 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 1080px) {
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-card--featured { margin-top: 0; }
}