/* ============================================================
   vestir-planes.css · F8 (26/09/2026, Claude Code en la nube) · MEMBRESÍAS DE USER REGISTRATION (11096 /membership-pricing/,
   11097 gracias, 11095 registro de miembros). inc/vestir-plugins.php quita user-registration-membership-frontend-style en estas
   páginas; el hero y los textos («IVA incluido», sin «3 meses gratis») ya los ponen inc/remate.php, inc/reparo-b.php e
   inc/planes-unicos.php. Aquí, la estructura y el aspecto de lo que pinta el shortcode [user_registration_groups]:
   clases medidas en la réplica el 26/09 (ur-membership-container, ur-membership-title(-wrapper), ur-membership-amount-wrapper,
   ur-membership-radio-<hash>, ur-membership-signup-btn-<hash>: por eso los selectores [class*=…]). Sin !important · tokens.
   ============================================================ */
.vl-vestir .ur-membership-container { display: grid; gap: var(--vl-space-lg); margin: 0 0 var(--vl-space-xl); }
@media (min-width: 850px) { .vl-vestir .ur-membership-container { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; } }
.vl-vestir .ur-membership-container > div,
.vl-vestir .ur-membership-container .ur-membership-plan,
.vl-vestir .ur-membership-container [class*="ur-membership-radio"] { position: relative; display: flex; flex-direction: column; gap: var(--vl-space-md); padding: var(--vl-space-lg); border-radius: var(--vl-radius-xl); background: var(--vl-bg-card); box-shadow: var(--vl-halo); transition: box-shadow var(--vl-transition-neon), transform var(--vl-transition-neon); }
.vl-vestir .ur-membership-container > div:hover { box-shadow: var(--vl-halo-fuerte); transform: translateY(var(--vl-lift)); }
.vl-vestir .ur-membership-title-wrapper { display: flex; align-items: flex-start; gap: var(--vl-space-md); }
.vl-vestir .ur-membership-title,
.vl-vestir .ur-membership-title label { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 700; color: var(--vl-text); margin: 0; }
.vl-vestir .ur-membership-container input[type="radio"] { width: 22px; height: 22px; margin: 4px 0 0; flex: 0 0 auto; accent-color: var(--vl-secondary); }
.vl-vestir .ur-membership-container input[type="radio"]:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; }
.vl-vestir .ur-membership-container > div:has(input:checked) { box-shadow: var(--vl-halo-fuerte), 0 0 0 2px var(--vl-secondary); }
.vl-vestir .ur-membership-amount-wrapper { font-family: var(--font-titulos); font-size: var(--vl-font-precio); line-height: 1.1; font-weight: 800; color: var(--vl-secondary-dark); }
.vl-vestir .ur-membership-amount-wrapper small,
.vl-vestir .ur-membership-amount-wrapper span:not(:first-child) { font-family: var(--font-cuerpo); font-size: var(--vl-font-small); font-weight: 500; color: var(--vl-text-muted); }
.vl-vestir .ur-membership-description,
.vl-vestir .ur-membership-container p { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); margin: 0; }
.vl-vestir .ur-membership-container ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--vl-space-sm); }
.vl-vestir .ur-membership-container ul li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--vl-font-small); color: var(--vl-text); }
.vl-vestir .ur-membership-container ul li::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 20px; }
.vl-vestir [class*="ur-membership-signup-btn"],
.vl-vestir .ur-membership-container .button,
.vl-vestir .ur-membership-container button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--vl-touch); margin-top: auto; padding: 12px var(--vl-space-lg); border: 2px solid var(--vl-secondary); border-radius: var(--vl-radius-pill); background: var(--vl-secondary); color: var(--vl-on-color); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--vl-transition-fast); }
.vl-vestir [class*="ur-membership-signup-btn"]:hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); }
.vl-vestir [class*="ur-membership-signup-btn"]:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 3px; }
/* El nivel actual (si el plugin marca la tarjeta con «current»/«active») */
.vl-vestir .ur-membership-container .ur-membership-current,
.vl-vestir .ur-membership-container .ur-membership-active { box-shadow: var(--vl-halo-fuerte), 0 0 0 2px var(--vl-primary); }
/* Página de gracias (11097) */
.vl-vestir .ur-membership-thank-you,
.vl-vestir .ur-membership-thankyou { padding: var(--vl-space-lg); border-radius: var(--vl-radius-xl); background: var(--vl-success-bg); color: var(--vl-success); font-size: var(--vl-font-body); }
.vl-vestir .ur-membership-thank-you h2,
.vl-vestir .ur-membership-thankyou h2 { font-family: var(--font-titulos); color: var(--vl-text); }