*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --cyan:#00BCD4; --cyan-dark:#0097A7; --bg:#060608; --text:#fff; --text-2:#999; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex;
  flex-direction: column; align-items: center;
  padding: 0 1.5rem 5rem;
  -webkit-font-smoothing: antialiased;
}

/* ── Indicador de paso dentro del card ── */
.card-step {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  color: var(--cyan);
  margin-bottom: 0.6rem;
  opacity: 0.8;
}

.card {
  width:100%; max-width:31.25rem;
  background:rgba(255,255,255,0.03);
  border: 0.0625rem solid rgba(255,255,255,0.07);
  border-radius:1rem; padding:2.5rem 2.5rem 2rem;
}

.card h1 { font-family:'DM Serif Display',serif; font-size:1.75rem; font-weight:700; color:#fff; margin-bottom:0.375rem; }
.card h1 em { font-style:italic; color:var(--cyan); }
.card .sub { font-size:0.8125rem; color:var(--text-2); font-weight:300; margin-bottom:1.8rem; }

.msg { display:none; padding:0.625rem 0.875rem; border-radius:0.375rem; font-size:0.8125rem; margin-bottom:1.25rem; }
.msg--error { background:rgba(229,115,115,0.10); border: 0.0625rem solid rgba(229,115,115,0.35); color:#e57373; }

.fields { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.5rem; margin-bottom:1.6rem; }
.field--full { grid-column:1 / -1; }

.field label { display:block; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.125rem; color:rgba(255,255,255,0.4); margin-bottom:0.4375rem; }

.input-wrap { position:relative; }
.input-wrap input { width:100%; background:transparent; border:none; border-bottom: 0.0625rem solid rgba(255,255,255,0.12); padding:0.5rem 1.75rem 0.5rem 0; color:var(--text); font-size:0.9375rem; font-family:'Inter',sans-serif; outline:none; transition:border-color .2s; }
.input-wrap input::placeholder { color:rgba(255,255,255,0.2); }
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 62.5rem #060608 inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}
.input-wrap::after { content:''; position:absolute; bottom:0; left:0; width:0; height: 0.0625rem; background:var(--cyan); transition:width .3s ease; }
.input-wrap:focus-within::after { width:100%; }
.input-wrap input:focus { border-bottom-color:transparent; }

.eye-btn { position:absolute; right:0; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-2); cursor:pointer; font-size:0.875rem; transition:color .2s; }
.eye-btn:hover { color:var(--cyan); }

.plan-label { font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.125rem; color:rgba(255,255,255,0.4); margin-bottom:0.625rem; }
.plan-opts { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.6rem; }

.plan-opt { border: 0.0625rem solid rgba(255,255,255,0.1); border-radius:0.625rem; overflow:hidden; transition:border-color .2s; cursor:pointer; }
.plan-opt.selected { border-color:var(--cyan); }

.plan-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; gap:0.75rem; }
.plan-radio { display:flex; align-items:center; gap:0.625rem; }
.plan-radio input[type="radio"] { display:none; }

.radio-dot { width:1rem; height:1rem; border-radius:50%; border: 0.125rem solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .2s; }
.plan-opt.selected .radio-dot { border-color:var(--cyan); background:rgba(0,188,212,0.15); }
.radio-dot::after { content:''; width:0.375rem; height:0.375rem; border-radius:50%; background:var(--cyan); display:none; }
.plan-opt.selected .radio-dot::after { display:block; }

.plan-name { font-size:0.875rem; font-weight:700; color:#fff; }
.plan-desc { font-size:0.75rem; color:var(--text-2); font-weight:300; }
.plan-price { font-size:0.8125rem; font-weight:700; color:var(--text-2); white-space:nowrap; flex-shrink:0; }
.plan-opt.selected .plan-price { color:var(--cyan); }

.plan-features { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.plan-opt.selected .plan-features { grid-template-rows:1fr; }
.plan-features-inner { overflow:hidden; padding:0 1rem; }
.plan-opt.selected .plan-features-inner { padding-bottom:0.75rem; }

.feat-list { display:flex; flex-wrap:wrap; gap:0.375rem 1.125rem; border-top: 0.0625rem solid rgba(255,255,255,0.06); padding-top:0.625rem; }
.feat-item { display:flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:rgba(255,255,255,0.5); }
.feat-item i { font-size:0.5625rem; color:var(--cyan); }
.feat-no { color:rgba(255,255,255,0.2); }
.feat-no i { color:rgba(255,255,255,0.2); }

.btn-register { width:100%; padding:0.8125rem; border-radius:6.25rem; border:none; background:linear-gradient(90deg,var(--cyan),var(--cyan-dark)); color:#000; font-size:0.875rem; font-weight:800; font-family:'Inter',sans-serif; letter-spacing:0.03125rem; cursor:pointer; transition:opacity .2s, transform .15s; margin-bottom:1.2rem; }
.btn-register:hover { opacity:0.88; transform:translateY(-0.0625rem); }

.form-footer { text-align:center; font-size:0.8125rem; color:var(--text-2); font-weight:300; }
.form-footer a { color:var(--cyan); text-decoration:none; font-weight:600; }
.form-footer a:hover { text-decoration:underline; }

/* Progress bar — oculta en este diseño */
.progress-bar { display: none; }

@media (max-width:35rem) {
  .card { padding:2rem 1.5rem 1.5rem; }
  .fields { grid-template-columns:1fr; }
  .field--full { grid-column:1; }
}