/* ═══════════════════════════════════════════════════════════════
   SOPORTE-REMOTO.CSS — Estilos exclusivos de la página Soporte Remoto
   Acento dominante: verde  |  Acento secundario: morado
   Depende de: common.css
═══════════════════════════════════════════════════════════════ */

/* ─── ACENTO DE PÁGINA ─── */

:root {
  --accent: #1AAA27;
  --accent-light: #e8f8ea;
  --accent-hover: #14901f;
}

/* ─── HERO GRADIENT — verde dominante ─── */

.svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(26, 170, 39, .18), transparent 60%), radial-gradient(ellipse 40% 60% at 90% 20%, rgba(128, 50, 159, .15), transparent 60%);
}

/* ─── BADGE — verde ─── */

.svc-badge {
  background: rgba(26, 170, 39, .12);
  border: 1px solid rgba(26, 170, 39, .3);
}

.svc-badge span, .svc-eyebrow {
  color: var(--green);
}

/* ─── SUBTÍTULO ─── */

.svc-sub {
  color: var(--green);
}

/* ─── ETIQUETA PLAN DESTACADO ─── */

.plan.featured::after {
  content: 'MÁS POPULAR';
}