/* ============== PALETA SLATE ============== */
:root[data-theme="slate"]{
  /* Acento */
  --primary:#2e3f66;
  --primary-600:#273656;
  --primary-700:#202c46;
  --primary-rgb:46,63,102;

  /* Neutros base */
  --ink:#0e1116;
  --muted:#4b5563;
  --muted-weak:#7b8491;
  --bg:#f6f7fa;
  --card:#ffffff;
  --card-hover:#f8f9fc;

  /* Bordes / anillos */
  --ring:#e6e9f1;
  --border:#e5e7eb;
  --divider:#edf1f5;

  /* Superficies */
  --primary-soft:#eef1f6;
  --primary-soft-hover:#e9edf4;
  --surface-hover:#f1f3f5;
  --surface-muted:#fafbfc;
  --shadow-rgb:10,12,16;

  /* Estados */
  --danger-bg:#ffeaea; --danger-ring:#ffd3d3; --danger-700:#9a0511;
  --success-bg:#eef7ff; --success-ring:#cfe4ff;
}

/* ============== BASE ============== */
html, body{
  font-family:'Manrope', Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0;
  padding:0;
  min-height:100vh;
}

/* ============== CONTENEDOR ============== */
.plan-container{
  max-width:500px;
  margin:4.5em auto 0 auto;
  background:var(--card);
  border-radius:19px;
  box-shadow:0 7px 32px rgba(var(--shadow-rgb), .10);
  padding:2.7em 2.1em 2.1em;
  display:flex;
  flex-direction:column;
  align-items:center;
  border:1px solid var(--ring);
}

/* ============== LOGO / TÍTULO ============== */
.plan-logo{
  display:flex;
  align-items:center;
  gap:.7em;
  font-size:2em;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-1px;
  margin-bottom:.4em;
}
.plan-logo img{ height:2.2em; }

h2{
  margin:.5em 0 1.3em 0;
  font-size:1.32em;
  font-weight:800;
  color:var(--primary-700);
  letter-spacing:-.7px;
  text-align:center;
}

/* ============== FORMULARIO ============== */
form.plan-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1.7em;
  align-items:center;
}

.planes-list{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1.2em;
}

/* ============== TARJETAS PLAN ============== */
.plan-card{
  display:flex;
  align-items:center;
  background:var(--primary-soft);
  border:2px solid var(--ring);
  border-radius:13px;
  box-shadow:0 1px 8px rgba(var(--shadow-rgb), .04);
  padding:1.1em 1.1em;
  font-size:1.09em;
  cursor:pointer;
  transition:border-color .17s, box-shadow .15s, background .15s;
  position:relative;
}
.plan-card:hover,
.plan-card.selected{
  border-color:var(--primary);
  background:var(--primary-soft-hover);
  box-shadow:0 4px 16px rgba(var(--shadow-rgb), .10);
}

/* Radio custom */
.plan-radio{
  appearance:none;
  width:1.45em;
  height:1.45em;
  margin-right:1.1em;
  border:2.2px solid var(--ring);
  border-radius:50%;
  outline:none;
  background:#fff;
  cursor:pointer;
  position:relative;
  transition:border-color .16s, box-shadow .16s;
  flex-shrink:0;
}
.plan-radio:checked{
  border-color:var(--primary);
  background:
    radial-gradient(circle at center, var(--primary) 55%, #fff 65%);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb), .15);
}

/* Texto dentro de la tarjeta */
.plan-info{
  display:flex;
  flex-direction:column;
  gap:.17em;
}
.plan-nombre{
  font-weight:700;
  color:var(--primary-700);
  font-size:1.11em;
}
.plan-detalle{
  font-size:.97em;
  color:var(--muted-weak);
}
.plan-precio{
  font-weight:800;
  color:var(--primary);
  margin-top:.3em;
  font-size:1.14em;
}

/* Botón principal */
.plan-btn{
  width:100%;
  padding:.75em 0;
  background:var(--primary);
  color:#fff;
  font-weight:800;
  font-size:1.11em;
  border:none;
  border-radius:10px;
  box-shadow:0 2px 14px rgba(var(--primary-rgb), .18);
  cursor:pointer;
  margin-top:.9em;
  transition:background .13s, transform .10s, filter .13s;
}
.plan-btn:hover,
.plan-btn:focus{
  background:var(--primary-700);
  transform:translateY(-1px) scale(1.03);
  outline:none;
}

/* Responsive */
@media (max-width:540px){
  .plan-container{ padding:1.5em .35em; }
  .plan-card{ flex-direction:column; align-items:flex-start; gap:.8em; }
  .plan-radio{ margin-right:.7em; }
}