/* ════════════════════════════════════════════════════════
   Nueve.5 – Subscription Plans (cards)
   Diseño basado en Figma "Desktop-membresias"
   • Card normal:   fondo blanco, texto gunmetal, botón pill negro
   • Card popular:  fondo gunmetal, texto blanco, botón pill blanco,
                    badge "🔥 más popular" + opcional "Ahorro X%"
   ════════════════════════════════════════════════════════ */

:root {
  --n5p-gunmetal:  #112530;
  --n5p-erieblack: #1E1E1E;
  --n5p-btn-bg:    #191D1E;
  --n5p-white:     #FFFFFF;
  --n5p-muted:     #6C828B;
  --n5p-faded:     rgba(17, 37, 48, 0.32);
  --n5p-faded-on-dark: rgba(255, 255, 255, 0.32);
  --n5p-radius:    16px;
  --n5p-radius-btn: 1000px;
  --n5p-font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.n5-plans {
  font-family: var(--n5p-font);
  color: var(--n5p-gunmetal);
  padding: 32px 16px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.n5-plans__title {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 8px;
  color: var(--n5p-gunmetal);
  letter-spacing: -0.01em;
}

/* Descripción del grupo (taxonomía n5_plan_group) — bajo el título */
.n5-plans__subtitle {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--n5p-muted);
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 480px;
}

/* Grid: 3 columnas en desktop, 1 en mobile (con scroll horizontal opcional) */
.n5-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

/* ── Card base ───────────────────────────────────────── */
.n5-plan {
  position: relative;
  background: var(--n5p-white);
  border-radius: var(--n5p-radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 2px 12px rgba(17, 37, 48, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.n5-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(17, 37, 48, 0.12);
}

/* ── Badges (más popular + ahorro) ───────────────────── */
.n5-plan__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin: -4px 0 -4px;
}
.n5-plan__badge {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.n5-plan__badge--popular {
  color: var(--n5p-white);
}
.n5-plan__fire { font-size: 14px; line-height: 1; }

/* En cards normales el badge popular no debería verse (no tienen popular)
   pero por si se reordena, ajustamos color cuando queda en card clara */
.n5-plan:not(.n5-plan--popular) .n5-plan__badge--popular {
  color: var(--n5p-gunmetal);
}

/* ── Tag de ahorro inline (junto al precio) ──────────────
   Pequeña etiqueta "-10%" en rojo brand, sutil y armónica
   con el resto de la paleta. */
.n5-plan__price-savings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: #B91D2C;       /* rojo cálido muted, armoniza con gunmetal */
  border-radius: 6px;
  white-space: nowrap;
  vertical-align: middle;
  align-self: center;
}

/* ── Título del plan ─────────────────────────────────── */
.n5-plan__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: inherit;
}

/* ── Lista de features ───────────────────────────────── */
.n5-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.n5-plan__feature {
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
  align-items: flex-start;
}
.n5-plan__feature.is-disabled {
  color: var(--n5p-faded);
}
/* Check icon: sólo el tick, sin fondo de rombo/hexágono.
   Color verde-azulado en cards normales, blanco en card popular. */
.n5-plan__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  margin-top: 2px;
  color: var(--n5p-secondary-blue, #6C828B); /* gris-azulado en cards claras */
}
.n5-plan__check svg { display: block; }
.n5-plan__feature.is-disabled .n5-plan__check {
  color: var(--n5p-faded);
}
.n5-plan__feature-text { flex: 1; }

/* ── Bloque de precio ────────────────────────────────── */
.n5-plan__price-block {
  margin-top: auto; /* empuja al final de la card */
  text-align: left;
}
.n5-plan__price {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: inherit;
}
.n5-plan__price-currency {
  font-size: 18px;
  font-weight: 600;
}
.n5-plan__price-suffix {
  font-size: 14px;
  font-weight: 500;
  margin-left: 4px;
  opacity: 0.85;
}
.n5-plan__monthly {
  font-size: 13px;
  font-weight: 500;
  color: var(--n5p-muted);
  margin: 6px 0 0;
}
/* Precio por lata – bajo el valor mensual, más sutil */
.n5-plan__per-can {
  font-size: 13px;
  font-weight: 400;
  color: var(--n5p-gunmetal);
  margin: 4px 0 0;
  opacity: 0.8;
}

/* ── CTA pill ────────────────────────────────────────── */
.n5-plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  min-width: 140px;
  padding: 12px 28px;
  background: var(--n5p-btn-bg);
  color: var(--n5p-white);
  border: none;
  border-radius: var(--n5p-radius-btn);
  font-family: var(--n5p-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-top: 4px;
}
.n5-plan__cta:hover { opacity: 0.92; transform: translateY(-1px); }
.n5-plan__cta:active { transform: translateY(0); }
.n5-plan__cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Plan deshabilitado (próximamente / off-line) ─────────
   Card con un toque sutil de "no disponible" + botón
   en outline gris en vez del pill negro. */
.n5-plan--disabled {
  opacity: 0.92;
}
.n5-plan--disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--n5p-radius);
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.n5-plan__cta--disabled,
.n5-plan__cta--disabled:hover,
.n5-plan__cta--disabled:active {
  background: transparent !important;
  color: var(--n5p-muted) !important;
  border: 1.5px solid var(--n5p-muted) !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 1 !important;
  text-decoration: none;
}
/* En card popular el botón "Próximamente" debe seguir legible */
.n5-plan--popular .n5-plan__cta--disabled,
.n5-plan--popular .n5-plan__cta--disabled:hover {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ════════════════════════════════════════════════════════
   Variante POPULAR – fondo oscuro
   ════════════════════════════════════════════════════════ */
.n5-plan--popular {
  background: var(--n5p-gunmetal);
  color: var(--n5p-white);
}
.n5-plan--popular .n5-plan__check { color: var(--n5p-white); }
.n5-plan--popular .n5-plan__feature.is-disabled {
  color: var(--n5p-faded-on-dark);
}
.n5-plan--popular .n5-plan__feature.is-disabled .n5-plan__check {
  color: var(--n5p-faded-on-dark);
}
.n5-plan--popular .n5-plan__monthly {
  color: rgba(255, 255, 255, 0.6);
}
.n5-plan--popular .n5-plan__per-can {
  color: rgba(255, 255, 255, 0.9);
}
.n5-plan--popular .n5-plan__cta {
  background: var(--n5p-white);
  color: var(--n5p-gunmetal);
}
/* El sello de ahorro mantiene su rojo flash-sale también en la card popular */

/* ════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .n5-plans__grid {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}

@media (max-width: 600px) {
  .n5-plans { padding: 24px 16px 32px; }
  .n5-plans__title { font-size: 20px; margin-bottom: 20px; }
  .n5-plans__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 380px;
    margin: 0 auto;
  }
  .n5-plan { padding: 24px 22px; }
  .n5-plan__title { font-size: 20px; }
  .n5-plan__price { font-size: 26px; }
}