/* ═══ Menu › Planos e Módulos (v106, 03/11/2026) ═══
   Roxo da marca Ravvo no hero e nos destaques (igual em toda academia: é a
   página comercial da Ravvo, não da academia). O resto usa o tema do tenant. */
.pm-pagina { --pm-roxo: #7c3aed; --pm-roxo2: #a855f7; --pm-verde: var(--success, #22c55e);
  display: flex; flex-direction: column; gap: 18px; max-width: 1280px; }
.pm-hero { position: relative; overflow: hidden; border-radius: 20px; min-height: 190px; padding: 30px 34px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: radial-gradient(120% 140% at 55% 0%, #6d28d9 0%, #3b0f78 45%, #1c0838 100%); }
.pm-hero-txt { position: relative; z-index: 2; max-width: min(400px, 36%); text-shadow: 0 2px 12px rgba(20,4,45,.6); }
@media (max-width: 900px) { .pm-hero-txt { max-width: none; } }
.pm-hero h1 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #fff; line-height: 1.1; }
.pm-hero p { margin: 0; color: rgba(255,255,255,.85); font-size: .98rem; }
.pm-hero-slogan { position: relative; z-index: 2; margin-left: auto; text-align: right; display: flex; flex-direction: column; font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.pm-hero-slogan b { font-size: 1.5rem; color: #e9d5ff; }
.pm-hero-slogan b strong { font-size: 2.6rem; color: #f0abfc; }
.pm-hero-img { position: absolute; z-index: 1; left: 54%; bottom: -20px; height: 128%; transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
@media (max-width: 900px) { .pm-hero-img { opacity: .25; left: auto; right: -40px; transform: none; } .pm-hero-slogan { text-align: left; margin-left: 0; } }

.pm-abas { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.pm-aba { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--text-secondary); font: inherit; font-weight: 700;
  padding: 12px 18px; cursor: pointer; white-space: nowrap; }
.pm-aba:hover { color: var(--text-primary); }
.pm-aba.ativa { color: var(--pm-roxo2); border-bottom-color: var(--pm-roxo2); }

.pm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 22px; }
.pm-card h2 { margin: 0 0 4px; }
.pm-carregando { color: var(--text-muted); }
.pm-sub { color: var(--text-muted); font-size: .82rem; margin: 2px 0; }
.pm-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pm-ciclo { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary, transparent); }
.pm-ciclo button { border: 0; background: none; color: var(--text-secondary); font: inherit; font-weight: 700; padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.pm-ciclo button.ativo { background: var(--pm-roxo); color: #fff; }
.pm-off-chip { font-size: .72rem; font-weight: 800; color: var(--pm-verde); margin-left: 4px; }
.pm-ciclo button.ativo .pm-off-chip { color: #bbf7d0; }

.pm-alerta { border: 1px solid #f59e0b; background: rgba(245,158,11,.1); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: .9rem; }
.pm-alerta-over { border-color: #ef4444; background: rgba(239,68,68,.1); }

.pm-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: stretch; }
.pm-plano { position: relative; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 16px; padding: 22px 18px 18px;
  background: var(--bg-secondary, transparent); min-width: 0; }
.pm-plano h3 { margin: 0; font-size: 1.3rem; font-weight: 800; text-transform: none; letter-spacing: 0; display: flex; gap: 8px; align-items: center; }
.pm-destaque { border: 2px solid var(--pm-roxo2); background: color-mix(in srgb, var(--pm-roxo2) 9%, var(--bg-card)); }
.pm-selo-destaque { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--pm-roxo); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.pm-faixa { color: var(--text-secondary); font-size: .9rem; }
.pm-preco { margin-top: 8px; font-size: 1rem; font-weight: 700; }
.pm-preco b { font-size: 1.75rem; font-weight: 800; }
.pm-preco small { color: var(--text-muted); font-weight: 600; }
.pm-de { font-size: .85rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; min-height: 22px; }
.pm-de-mensal { font-size: .78rem; }
.pm-off { background: var(--pm-verde); color: #04130a; font-weight: 800; font-size: .75rem; border-radius: 6px; padding: 1px 6px; }
.pm-lista { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 7px; font-size: .86rem; flex: 1; }
.pm-lista li::before { content: '✓'; color: var(--pm-roxo2); font-weight: 800; margin-right: 8px; }
.pm-btn { margin-top: auto; border: 2px solid var(--pm-roxo2); background: transparent; color: var(--pm-roxo2); font: inherit; font-weight: 800;
  border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.pm-btn:hover:not(:disabled) { background: var(--pm-roxo2); color: #fff; }
.pm-btn:disabled { opacity: .55; cursor: default; }
.pm-btn-atual, .pm-btn-atual:disabled { background: var(--pm-roxo); border-color: var(--pm-roxo); color: #fff; opacity: 1; }

.pm-uso { margin-top: 18px; font-size: .88rem; }
.pm-uso-lin { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--text-secondary); }
.pm-uso-barra { height: 8px; background: color-mix(in srgb, var(--text-muted) 20%, transparent); border-radius: 4px; overflow: hidden; }
.pm-uso-barra i { display: block; height: 100%; background: var(--pm-roxo2); transition: width .4s; }
.pm-uso-warn .pm-uso-barra i { background: #f59e0b; }
.pm-uso-over .pm-uso-barra i { background: #ef4444; }
.pm-nota { margin: 12px 0 0; font-size: .8rem; color: var(--text-muted); }
.pm-nota a { color: var(--pm-roxo2); font-weight: 700; }

.pm-vantagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pm-vantagens > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.pm-vantagens span { grid-row: span 2; font-size: 1.6rem; }
.pm-vantagens small { color: var(--text-muted); }

.pm-tabela-wrap { overflow-x: auto; margin-top: 12px; }
.pm-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.pm-tabela th, .pm-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.pm-tabela tbody th { text-align: left; font-weight: 600; color: var(--text-secondary); }
.pm-tabela thead th { font-size: .95rem; }
.pm-tabela small { color: var(--text-muted); }
.pm-col-atual { background: color-mix(in srgb, var(--pm-roxo2) 10%, transparent); }
.pm-ok { color: var(--pm-verde); font-weight: 800; }

/* item do menu em destaque (mockup) */
.nav-item.nav-planos { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff !important; font-weight: 700; margin-top: 6px; }
.nav-item.nav-planos svg { stroke: #fff; }
.nav-item.nav-planos.active { box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; }