/* Web Systems 3.1 · Página Suscripciones
 * Este módulo se carga de forma condicional desde functions.php.
 */

/* Subscriptions */
.model-comparison { background: var(--paper); }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comparison-grid article { padding: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.comparison-grid .comparison-featured { color: white; border-color: var(--ink); background: var(--ink); box-shadow: var(--shadow-dark); }
.comparison-label { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.comparison-featured .comparison-label { color: #89a0ff; }
.comparison-grid h3 { margin: 18px 0 13px; font-size: 34px; letter-spacing: -.045em; }
.comparison-grid article > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.72; }
.comparison-featured > p { color: #9fa7b4 !important; }
.comparison-grid ul { display: grid; gap: 12px; margin: 28px 0 31px; padding: 23px 0 0; border-top: 1px solid var(--line); list-style: none; }
.comparison-featured ul { border-color: var(--line-dark); }
.comparison-grid li { display: flex; align-items: center; gap: 8px; color: #666d78; font-size: 10px; }
.comparison-featured li { color: #b7beca; }.comparison-grid li svg { color: var(--blue); }
.plans-section { background: white; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan-card { position: relative; padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.plan-featured { color: white; border-color: var(--ink); background: var(--ink); box-shadow: var(--shadow-dark); transform: translateY(-10px); }
.popular-plan { position: absolute; top: 20px; right: 20px; padding: 6px 8px; border-radius: 99px; color: #aabaff; background: rgba(73,105,255,.18); font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.plan-type { color: #8c929c; font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.plan-card h3 { margin: 10px 0 11px; font-size: 32px; letter-spacing: -.045em; }
.plan-card > p { min-height: 63px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.plan-featured > p { color: #9fa7b4; }
.plan-price { display: flex; align-items: baseline; margin-top: 30px; }
.plan-price small { margin-right: 7px; color: #8d939d; font-size: 10px; }.plan-price strong { font-size: 55px; line-height: 1; letter-spacing: -.065em; }.plan-price span { margin-left: 5px; color: #8d939d; font-size: 10px; }
.plan-setup { display: block; margin: 12px 0 25px; color: #8a9099; font-size: 8px; }
.plan-card ul { min-height: 210px; display: grid; align-content: start; gap: 13px; margin: 0 0 29px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan-featured ul { border-color: var(--line-dark); }
.plan-card li { display: flex; align-items: center; gap: 8px; color: #626975; font-size: 9px; }.plan-featured li { color: #b8bfca; }.plan-card li svg { color: var(--blue); }
.webcare-section { color: white; background: var(--ink); }
.webcare-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.webcare-copy > p { margin: 22px 0; color: #9fa7b4; font-size: 13px; line-height: 1.72; }
.webcare-price { display: flex; align-items: baseline; gap: 8px; margin: 28px 0; }.webcare-price span { color: #8d95a2; font-size: 9px; }.webcare-price strong { font-size: 40px; letter-spacing: -.05em; }.webcare-price small { color: #8d95a2; font-size: 9px; }
.webcare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.webcare-grid article { min-height: 190px; padding: 26px; border: 1px solid var(--line-dark); border-radius: 15px; background: #131720; }
.webcare-grid svg { color: #8da4ff; }.webcare-grid h3 { margin: 35px 0 9px; font-size: 16px; }.webcare-grid p { margin: 0; color: #858e9c; font-size: 10px; line-height: 1.65; }

@media (max-width: 900px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plan-featured { transform: none; }
  .plan-card ul { min-height: 0; }
}

@media (max-width: 640px) {
  .comparison-grid { grid-template-columns: 1fr; }
}