/* /support — los planes de mecenas (Fase 42f), «oro sobre carbón».
   Se apoya en los componentes 42a de global.css (.gv2-card, .gv2-btn,
   .gv2-chip--gold, .gv2-eyebrow); aquí solo va lo propio de la página. */

.gvs-wrap { max-width:1200px;margin:0 auto;padding:calc(var(--nav-h) + var(--sp-12)) var(--sp-4) var(--sp-16);}
.gvs-wrap { color:var(--gv2-text);font-family:var(--font-ui);}

.gvs-head { max-width:720px;margin:0 auto var(--sp-12);text-align:center;}
.gvs-logo { display:block;width:72px;height:72px;margin:0 auto var(--sp-4);border-radius:var(--gv2-radius-sm);}
.gvs-title { margin:0 0 var(--sp-4);font-family:var(--font-display);font-weight:400;letter-spacing:1px;line-height:1;}
.gvs-title { font-size:clamp(2.5rem, 6vw, 4rem);color:var(--gv2-text);}
.gvs-lead { margin:0 auto;max-width:560px;font-size:1.125rem;line-height:1.55;color:var(--gv2-text-2);}

/* Mensual / Anual: solo se pinta con GV_SUPPORT_ANUAL encendido. */
.gvs-billing { display:inline-flex;gap:var(--sp-1);margin-top:var(--sp-8);padding:var(--sp-1);}
.gvs-billing { background:var(--gv2-surface);border:1px solid var(--gv2-border);border-radius:999px;}
.gvs-billing-opt { min-height:44px;padding:0 var(--sp-6);border:0;border-radius:999px;background:transparent;}
.gvs-billing-opt { font-family:var(--font-ui);font-size:0.9375rem;font-weight:700;color:var(--gv2-text-2);}
.gvs-billing-opt.is-active { background:var(--gold);color:var(--gv2-on-gold);}
.gvs-billing-opt:disabled { cursor:not-allowed;}
.gvs-billing-note { margin:var(--sp-2) 0 0;font-size:0.875rem;color:var(--gv2-text-3);}

.gvs-grid { display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--sp-6);align-items:stretch;}

.gvs-plan { position:relative;display:flex;flex-direction:column;padding:var(--sp-8) var(--sp-6);}
.gvs-plan[data-featured] { border-color:var(--gv2-border-gold);box-shadow:var(--gv2-shadow-gold);}
.gvs-plan[data-featured] { background:linear-gradient(180deg, var(--gv2-gold-wash), transparent 45%), var(--gv2-surface);}
.gvs-badge { position:absolute;top:0;left:50%;transform:translate(-50%, -50%);white-space:nowrap;}
.gvs-badge { background:var(--gold);color:var(--gv2-on-gold);}

.gvs-plan-icon { width:36px;height:36px;color:var(--gold);margin-bottom:var(--sp-4);}
.gvs-plan-name { margin:0 0 var(--sp-2);font-family:var(--font-display);font-weight:400;font-size:2rem;letter-spacing:1px;line-height:1;}
.gvs-price { margin:0 0 var(--sp-2);display:flex;align-items:baseline;gap:var(--sp-2);}
.gvs-price-num { font-family:var(--font-display);font-weight:400;font-size:2.75rem;line-height:1;color:var(--gold-light);}
.gvs-price-per { font-size:0.9375rem;font-weight:600;color:var(--gv2-text-3);}
.gvs-pitch { margin:0;min-height:3em;font-size:1rem;line-height:1.5;color:var(--gv2-text-2);}

.gvs-rule { width:100%;margin:var(--sp-6) 0;border:0;border-top:1px solid var(--gv2-border);}

.gvs-perks { flex:1;margin:0 0 var(--sp-8);padding:0;list-style:none;}
.gvs-perk { display:flex;gap:var(--sp-2);align-items:flex-start;margin:0 0 var(--sp-3);font-size:1rem;line-height:1.4;}
.gvs-perk--inherit { font-weight:700;color:var(--gold-light);}
.gvs-check { flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--gold);}

.gvs-cta { width:100%;}

.gvs-foot { max-width:640px;margin:var(--sp-12) auto 0;text-align:center;font-size:0.9375rem;line-height:1.55;color:var(--gv2-text-3);}

@media (max-width:1100px) {
  .gvs-grid { grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:var(--sp-8);}
}
@media (max-width:640px) {
  .gvs-grid { grid-template-columns:minmax(0, 1fr);}
  .gvs-plan { padding:var(--sp-8) var(--sp-4) var(--sp-6);}
  .gvs-pitch { min-height:0;}
}