/* =====================================================
   Wizard de inscripciones · Medrando+
   Standalone — replica los tokens del área cliente real
   ===================================================== */

:root{
  --teal:#4FA8AE;
  --teal-2:#5BB6BC;
  --teal-3:#67C2C8;
  --bg:#050505;
  --bg-2:#0B0B0B;
  --bg-3:#0a0a0a;
  --ink:#FFFFFF;
  --ink-2:#E8E8E8;
  --ink-3:#bdbdbd;
  --line:#1F1F1F;
  --line-2:#2a2a2a;
  --line-soft:#1A1A1A;
  --gray:#8A8A8A;
  --gray-2:#5A5A5A;
  --green:#4ADE80;
  --amber:#FBBF24;
  --red:#F87171;
  --maxw:1080px;
  --pad:clamp(20px, 4vw, 56px);
  --font:'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html, body{margin:0; padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink-2);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--teal); text-decoration:none}
button{font-family:inherit}

/* ── Nav minimal ─────────────────────────────────── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.85);
  backdrop-filter:saturate(160%) blur(10px);
  position:sticky; top:0; z-index:50;
}
.nav__brand{
  font-weight:700; font-size:18px; color:#fff; letter-spacing:-.02em;
}
.nav__brand .plus{color:var(--teal)}
.nav__links{display:flex; gap:22px; align-items:center}
.nav__links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase;
}
.nav__links a:hover{color:#fff}
.nav__cta{
  border:1px solid var(--line-2); border-radius:8px;
  padding:8px 14px; color:#fff !important;
}

/* ── Hero ─────────────────────────────────────────── */
.hero{
  padding:80px var(--pad) 60px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 400px at 80% 0%, rgba(79,168,174,.12), transparent 60%);
}
.hero__inner{max-width:var(--maxw); margin:0 auto}
.hero__back{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--ink-3); text-transform:uppercase;
}
.hero__back:hover{color:var(--teal)}
.hero__title{
  font-size:clamp(36px, 5.5vw, 56px);
  font-weight:600; letter-spacing:-.035em; line-height:1.04;
  color:#fff; margin:18px 0 12px; max-width:18ch;
}
.hero__title em{color:var(--teal); font-style:italic; font-weight:500}
.hero__sub{
  color:var(--ink-3); font-size:16px; max-width:64ch; line-height:1.55;
}

/* ── Wizard layout ────────────────────────────────── */
.wizard{
  max-width:var(--maxw); margin:0 auto;
  padding:48px var(--pad) 120px;
  display:flex; flex-direction:column; gap:24px;
}

/* Step card */
.step{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 36px;
  position:relative;
  transition:border-color .25s, opacity .25s;
}
.step--locked{opacity:.45; pointer-events:none}
.step--done{border-color:rgba(79,168,174,.3)}
.step--active{border-color:var(--teal); box-shadow:0 0 0 1px rgba(79,168,174,.25), 0 12px 60px -20px rgba(79,168,174,.3)}

.step__head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:6px;
}
.step__num{
  width:32px; height:32px; flex-shrink:0;
  border-radius:10px;
  background:var(--bg-3); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--ink-3);
  display:grid; place-items:center;
}
.step--done .step__num{
  background:rgba(79,168,174,.15); border-color:var(--teal); color:var(--teal);
}
.step--active .step__num{
  background:var(--teal); border-color:var(--teal); color:#0a0a0a;
}
.step__title{
  font-size:20px; font-weight:600; letter-spacing:-.015em;
  color:#fff; margin:0;
}
.step__sub{
  color:var(--ink-3); font-size:14.5px; line-height:1.5;
  margin-top:2px; margin-bottom:20px;
}

/* Resumen colapsado del step ya completado */
.step__summary{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; padding:14px 16px;
  background:var(--bg-3); border:1px solid var(--line-soft); border-radius:12px;
  cursor:pointer;
  transition:border-color .2s;
}
.step__summary:hover{border-color:var(--teal)}
.step__summary-text{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; color:#fff;
}
.step__summary-text .pill{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  background:rgba(79,168,174,.15); color:var(--teal);
  padding:4px 8px; border-radius:6px; text-transform:uppercase;
}
.step__edit{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-3); text-transform:uppercase;
  background:none; border:0; cursor:pointer;
}
.step__edit:hover{color:var(--teal)}

/* ── Cards selectoras (yo / hijo, marcas, centros, etapas) ───── */
.cards{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  margin-top:8px;
}
.card{
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:22px;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s;
  position:relative;
  text-align:left;
  font:inherit; color:inherit;
  width:100%;
}
.card:hover{border-color:var(--teal); transform:translateY(-2px)}
.card--selected{
  border-color:var(--teal);
  background:rgba(79,168,174,.06);
}
.card--selected::after{
  content:'✓'; position:absolute; top:12px; right:14px;
  width:24px; height:24px; border-radius:50%;
  background:var(--teal); color:#0a0a0a;
  display:grid; place-items:center; font-weight:700; font-size:14px;
}
/* Programa con aforo agotado: card seleccionable pero atenuada para
   marcar visualmente que entrará en lista de espera. */
.card--disabled-soft{ opacity:.55 }
.card--disabled-soft:hover{ opacity:.7; transform:none }
.card__icon{font-size:28px; line-height:1; margin-bottom:10px; display:block}
.card__title{font-size:17px; font-weight:600; color:#fff; margin:0}
.card__desc{font-size:13.5px; color:var(--ink-3); margin-top:6px; line-height:1.45}
.card__meta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--gray); text-transform:uppercase; margin-top:10px;
}

/* Card "Añadir nuevo" (estilo dashed) */
.card--add{
  border-style:dashed; color:var(--ink-3);
}
.card--add .card__title{color:var(--ink-3)}

/* ── Dias (calendario semanal) ──────────────────────── */
.days{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  margin-top:8px;
}
.day{
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:14px; padding:20px 22px;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s;
  position:relative; overflow:hidden;
  text-align:left; font:inherit; color:inherit; width:100%;
}
.day::before{
  content:''; position:absolute; top:0; left:0; bottom:0; width:4px;
  background:var(--gray-2); transition:background .2s;
}
.day--green::before{background:var(--green)}
.day--amber::before{background:var(--amber)}
.day--red::before{background:var(--red)}
.day--closed::before{background:var(--gray-2)}

.day:hover:not(.day--red):not(.day--closed){border-color:var(--teal)}
.day--selected{
  border-color:var(--teal); background:rgba(79,168,174,.07);
}
.day--selected::after{
  content:'✓'; position:absolute; top:14px; right:16px;
  width:24px; height:24px; border-radius:50%;
  background:var(--teal); color:#0a0a0a;
  display:grid; place-items:center; font-weight:700; font-size:14px;
}
.day--red, .day--closed{cursor:not-allowed; opacity:.7}

.day__head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:4px;
}
.day__name{font-size:17px; font-weight:600; color:#fff}
.day__hour{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-3);
}
.day__teacher{
  font-size:13px; color:var(--ink-3); margin:6px 0 14px;
}
.day__capacity{
  display:flex; flex-direction:column; gap:6px; margin-top:10px;
}
.day__bar{
  width:100%; height:6px;
  background:var(--line-2); border-radius:99px; overflow:hidden;
}
.day__bar-fill{
  height:100%; border-radius:99px;
  transition:width .4s ease;
}
.day--green .day__bar-fill{background:var(--green)}
.day--amber .day__bar-fill{background:var(--amber)}
.day--red   .day__bar-fill{background:var(--red); width:100%}
.day--closed .day__bar-fill{background:var(--gray-2)}
.day__caption{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-3); text-transform:uppercase;
}
.day__caption .badge{
  padding:3px 8px; border-radius:6px; font-weight:600;
  background:var(--bg-2); border:1px solid var(--line-2);
  color:var(--ink-3);
}
.day--green .day__caption .badge{background:rgba(74,222,128,.12); color:var(--green); border-color:rgba(74,222,128,.4)}
.day--amber .day__caption .badge{background:rgba(251,191,36,.12); color:var(--amber); border-color:rgba(251,191,36,.4)}
.day--red   .day__caption .badge{background:rgba(248,113,113,.12); color:var(--red); border-color:rgba(248,113,113,.4)}
.day--closed .day__caption .badge{background:var(--bg-2); color:var(--gray); border-color:var(--line-2)}

/* ── Bloque "Sin plazas" / Lista de espera ────────── */
.waitlist{
  margin-top:18px;
  background:linear-gradient(180deg, rgba(248,113,113,.06), rgba(248,113,113,0));
  border:1px solid rgba(248,113,113,.3);
  border-radius:14px; padding:24px 26px;
}
.waitlist__title{
  font-size:17px; font-weight:600; color:#fff; margin:0 0 6px;
}
.waitlist__title::before{content:'📋  '}
.waitlist__desc{
  color:var(--ink-3); font-size:14px; line-height:1.55; margin:0 0 16px;
}
.waitlist__btn{
  background:transparent;
  color:var(--red);
  border:1px solid rgba(248,113,113,.5);
  border-radius:10px; padding:12px 20px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background .2s, color .2s;
}
.waitlist__btn:hover{background:rgba(248,113,113,.1); color:#fff}
.waitlist--success{
  background:linear-gradient(180deg, rgba(79,168,174,.07), rgba(79,168,174,0));
  border-color:rgba(79,168,174,.4);
}
.waitlist--success .waitlist__title{color:var(--teal)}
.waitlist--success .waitlist__title::before{content:'✓  '}
.waitlist--success .waitlist__desc{color:var(--ink-2)}

/* ── Resumen final ──────────────────────────────── */
.summary{
  background:linear-gradient(180deg, rgba(79,168,174,.07), rgba(79,168,174,0));
  border:1px solid rgba(79,168,174,.4);
  border-radius:14px; padding:24px 26px;
  margin-top:8px;
}
.summary__row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05);
  gap:16px;
}
.summary__row:last-of-type{border-bottom:0}
.summary__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--gray); text-transform:uppercase;
  flex-shrink:0;
}
.summary__value{
  color:#1a1a1a; font-size:14.5px; font-weight:500; text-align:right;
  line-height:1.4;
}

/* Botón principal */
.btn-primary{
  background:var(--teal); color:#0a0a0a;
  border:0; border-radius:10px;
  padding:16px 28px;
  font-size:15px; font-weight:700;
  cursor:pointer; transition:background .2s, transform .2s;
  margin-top:24px;
}
.btn-primary:hover{background:var(--teal-2); transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5; cursor:not-allowed; transform:none; background:var(--gray-2); color:var(--ink-3)}

/* Confirmación final */
.success-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding:20px;
  backdrop-filter:blur(8px);
}
.success-modal.is-visible{display:flex; animation:fadeIn .3s ease}
.success-modal__card{
  background:#FFFFFF; border:1px solid #4ADE80;
  border-radius:18px; padding:48px 40px; max-width:540px; width:100%;
  box-shadow:0 30px 80px -20px rgba(74,222,128,.45), 0 8px 20px rgba(0,0,0,.15);
  text-align:center;
  animation:successPop .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes successPop{
  from{transform:scale(.9); opacity:0}
  to{transform:scale(1); opacity:1}
}
.success-modal__icon{
  font-size:48px; line-height:1;
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg, #4ADE80 0%, #22C55E 100%);
  color:#fff; font-weight:900;
  display:grid; place-items:center; margin:0 auto 22px;
  box-shadow:0 12px 28px rgba(74,222,128,.45), 0 0 0 8px rgba(74,222,128,.10);
  animation:iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse{
  0%, 100%{box-shadow:0 12px 28px rgba(74,222,128,.45), 0 0 0 8px rgba(74,222,128,.10)}
  50%{box-shadow:0 12px 28px rgba(74,222,128,.55), 0 0 0 16px rgba(74,222,128,.05)}
}
.success-modal__title{font-size:26px; font-weight:700; color:#1a1a1a; margin:0 0 12px; letter-spacing:-.02em}
.success-modal__desc{color:#5a5a5a; line-height:1.6; margin:0 0 28px; font-size:15.5px}
.success-modal__desc strong{color:#1a1a1a}
.success-modal details{
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:10px;
  padding:14px 16px; margin-bottom:18px;
}
.success-modal details summary{
  cursor:pointer; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase;
}
.success-modal pre{
  background:#000; border-radius:8px; padding:14px;
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  overflow-x:auto; margin:14px 0 0;
  border:1px solid var(--line-2);
}
.success-modal__actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:8px;
}
.success-modal__btn-primary{
  background:linear-gradient(135deg, #4ADE80, #22C55E) !important;
  color:#0a2010 !important;
  font-weight:700; padding:14px 24px;
  border:0; border-radius:10px;
  box-shadow:0 8px 22px rgba(74,222,128,.40);
  font-size:15px; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.success-modal__btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(74,222,128,.55);
}
.success-modal__btn-secondary{
  background:#FFFFFF !important;
  color:#1a1a1a !important;
  border:1px solid #C8BEA6 !important;
  padding:14px 24px; border-radius:10px;
  font-weight:600; font-size:14.5px;
  text-decoration:none; display:inline-flex; align-items:center;
  box-shadow:0 4px 12px rgba(60,40,10,.08);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.success-modal__btn-secondary:hover{
  border-color:var(--teal) !important;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(60,40,10,.12);
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding:30px var(--pad);
  text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--gray); text-transform:uppercase;
}

/* Animación de aparición */
.fade-in{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* Checkbox "guardar en perfil" del paso facturación */
.save-billing{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px; padding:12px 14px;
  background:rgba(79,168,174,.05); border:1px solid rgba(79,168,174,.25);
  border-radius:10px;
  cursor:pointer; user-select:none;
  font-size:13.5px; color:var(--ink-2); line-height:1.45;
}
.save-billing input[type="checkbox"]{
  width:17px; height:17px; margin:1px 0 0 0; flex-shrink:0;
  accent-color:var(--teal); cursor:pointer;
}
.save-billing span{flex:1}
.save-billing:hover{background:rgba(79,168,174,.08)}

/* ── Continue bar (step 5 multi-select) ─────────────── */
.continue-bar{
  margin-top:18px; padding:18px 22px;
  background:rgba(79,168,174,.07);
  border:1px solid rgba(79,168,174,.4);
  border-radius:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.continue-bar__info{
  color:var(--ink-2); font-size:14.5px; line-height:1.5;
  flex:1; min-width:200px;
}
.continue-bar__info strong{color:#fff}
.day-chip{
  display:inline-block;
  background:var(--bg-2); border:1px solid var(--teal);
  color:var(--teal);
  padding:3px 10px; border-radius:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600;
  margin:0 2px;
}
.btn-primary--inline{
  margin-top:0 !important;
  padding:12px 22px;
  font-size:14px;
  flex-shrink:0;
}
/* Variante "soft" del botón continuar cuando el user insiste en 1 día.
   Visual: borde teal sin fondo lleno, comunica "puedes pero no es ideal". */
.btn-primary--soft{
  background:transparent !important;
  color:var(--teal) !important;
  border:1px solid var(--teal) !important;
}
.btn-primary--soft:hover{
  background:rgba(79,168,174,.08) !important;
}

/* ── CEPJK info (entrenamiento personal sin selección de días) ─ */
.cepjk-info{
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:14px;
  padding:24px 28px; margin-bottom:18px;
  display:flex; flex-direction:column; gap:18px;
}
.cepjk-info__row{
  display:flex; gap:16px; align-items:flex-start;
}
.cepjk-info__icon{
  font-size:22px; line-height:1; flex-shrink:0;
  width:44px; height:44px; border-radius:10px;
  background:rgba(103,194,200,.1); border:1px solid rgba(103,194,200,.3);
  display:grid; place-items:center;
}
.cepjk-info__row strong{
  display:block; color:#fff; font-size:15px; margin-bottom:4px;
}
.cepjk-info__row p{
  margin:0; color:var(--ink-3); font-size:13.5px; line-height:1.5;
}

/* ── Preset "2 días" (opción recomendada · botón grande) ──── */
.preset-2dias{
  display:block; width:100%;
  background:var(--bg-3); border:2px solid var(--line-2);
  border-radius:16px; padding:24px 28px;
  cursor:pointer; transition:border-color .2s, background .2s, transform .15s;
  text-align:left; font:inherit; color:inherit;
  position:relative; overflow:hidden;
  margin-bottom:14px;
}
.preset-2dias::before{
  content:''; position:absolute; top:0; left:0; bottom:0; width:5px;
  background:var(--green); transition:background .2s;
}
.preset-2dias--amber::before{background:var(--amber)}
.preset-2dias:hover{border-color:var(--teal); transform:translateY(-2px)}
.preset-2dias--selected{
  border-color:var(--teal); background:rgba(79,168,174,.07);
}
.preset-2dias--selected::after{
  content:'✓'; position:absolute; top:18px; right:22px;
  width:30px; height:30px; border-radius:50%;
  background:var(--teal); color:#0a0a0a;
  display:grid; place-items:center; font-weight:700; font-size:16px;
}
.preset-2dias__head{margin-bottom:12px}
.preset-2dias__badge{
  display:inline-block;
  background:rgba(74,222,128,.15); color:var(--green);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  font-weight:600; padding:4px 10px; border-radius:6px;
}
.preset-2dias--amber .preset-2dias__badge{
  background:rgba(251,191,36,.15); color:var(--amber);
}
.preset-2dias__main{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:14px; flex-wrap:wrap;
}
.preset-2dias__dias{
  font-size:24px; font-weight:600; color:#fff;
  letter-spacing:-.015em;
}
.preset-2dias__hora{
  font-family:var(--mono); font-size:16px;
  color:var(--teal); letter-spacing:.02em;
}
.preset-2dias__foot{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink-3);
}
.preset-2dias__teacher{color:var(--ink-3)}
.preset-2dias__plazas{
  font-family:var(--mono); font-size:11.5px;
  background:var(--bg-2); padding:4px 10px; border-radius:6px;
  letter-spacing:.05em; color:#fff;
}

/* ── Toggle "¿Solo puedes un día?" (secundario, pequeño) ───── */
.toggle-1-dia{
  margin-top:6px;
}
.toggle-1-dia__btn{
  background:transparent; border:0;
  color:var(--gray); font-family:var(--mono); font-size:12px;
  letter-spacing:.05em; cursor:pointer;
  padding:8px 0;
  display:inline-flex; align-items:center; gap:8px;
}
.toggle-1-dia__btn:hover{color:var(--ink-3)}
.toggle-1-dia__arrow{
  display:inline-block; transition:transform .2s;
  color:var(--gray-2);
}
.toggle-1-dia__btn.is-open .toggle-1-dia__arrow{transform:rotate(180deg)}
.toggle-1-dia__body{
  margin-top:14px; padding:18px 20px;
  background:rgba(248,113,113,.04);
  border:1px dashed rgba(248,113,113,.3);
  border-radius:12px;
}
.toggle-1-dia__hint{
  font-size:13px; color:var(--red);
  margin:0 0 14px;
  font-family:var(--mono); letter-spacing:.02em;
}
.days--small{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.days--small .day{padding:14px 16px}

/* ── Warning recomendar 2 días (cuando hay 1 seleccionado) ── */
.dia-warning{
  margin-top:18px; padding:18px 22px;
  background:rgba(251,191,36,.06);
  border:1px solid rgba(251,191,36,.4);
  border-radius:14px;
  display:flex; gap:14px; align-items:flex-start;
}
.dia-warning__icon{
  font-size:24px; line-height:1; flex-shrink:0;
  color:#FBBF24;
}
.dia-warning__body{flex:1; min-width:0}
.dia-warning__title{
  display:block; color:#fff; font-size:14.5px; margin-bottom:6px;
}
.dia-warning__body p{
  margin:6px 0; color:var(--ink-2); font-size:13.5px; line-height:1.5;
}
.dia-warning__hint{
  color:var(--ink-3) !important; font-size:12.5px !important;
}

/* ── Billing cards ──────────────────────────────────── */
.billing-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-bottom:18px;
}
@media(max-width:680px){.billing-cards{grid-template-columns:1fr}}

.billing-form{
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:12px; padding:24px;
  margin-bottom:18px;
}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--gray); text-transform:uppercase;
}
.field input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line-2);
  border-radius:8px; padding:12px 14px;
  font-size:14.5px; color:#fff; font-family:inherit;
  transition:border-color .2s, background .2s;
}
.field input:focus{
  outline:none; border-color:var(--teal);
  background:rgba(79,168,174,.05);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* ── Payment cards ──────────────────────────────────── */
.payment-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:8px;
}
@media(max-width:680px){.payment-cards{grid-template-columns:1fr}}

.payment-card{
  position:relative;
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:14px; padding:24px;
  cursor:pointer; transition:border-color .2s, background .2s, transform .15s;
  text-align:left; font:inherit; color:inherit; width:100%;
}
.payment-card:hover{border-color:var(--teal); transform:translateY(-2px)}
.payment-card--selected{
  border-color:var(--teal); background:rgba(79,168,174,.06);
}
.payment-card--selected::after{
  content:'✓'; position:absolute; top:14px; right:16px;
  width:24px; height:24px; border-radius:50%;
  background:var(--teal); color:#0a0a0a;
  display:grid; place-items:center; font-weight:700; font-size:14px;
}
.payment-card--needs-action{border-style:dashed}
.payment-card__badge{
  position:absolute; top:-10px; left:18px;
  background:var(--teal); color:#0a0a0a;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  padding:3px 8px; border-radius:4px; text-transform:uppercase; font-weight:700;
}
.payment-card__icon{font-size:32px; line-height:1; margin-bottom:10px}
.payment-card__title{font-size:17px; font-weight:600; color:#fff; margin:0 0 6px}
.payment-card__desc{font-size:13.5px; color:var(--ink-3); line-height:1.5; margin:0}
.payment-card__meta{
  margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--gray); text-transform:uppercase;
}

/* ── Banner de precio ──────────────────────────────── */
.precio-banner{
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(180deg, rgba(79,168,174,.07), rgba(79,168,174,0));
  border:1px solid rgba(79,168,174,.3);
  border-radius:12px; padding:18px 22px;
  margin-bottom:18px;
}
.precio-banner__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--gray); text-transform:uppercase;
}
.precio-banner__value{
  font-size:28px; font-weight:700; color:var(--teal);
  letter-spacing:-.02em; line-height:1; margin-left:auto;
}
.precio-banner__detail{
  font-size:13px; color:var(--ink-3); flex:1; min-width:0;
}

/* ── Alert box info ─────────────────────────────────── */
.alert-box{
  margin-top:14px;
  padding:14px 18px; border-radius:10px;
  font-size:13.5px; line-height:1.55;
}
.alert-box--info{
  background:rgba(79,168,174,.08);
  border:1px solid rgba(79,168,174,.3);
  color:var(--ink-2);
}

/* ── Resumen final · row total ──────────────────────── */
.summary__row--total{
  border-top:1px solid rgba(0,0,0,.1) !important;
  border-bottom:0 !important;
  padding-top:14px; margin-top:8px;
}
.summary__row{ border-bottom:1px solid rgba(0,0,0,.06) !important; }
.summary__label{ color:#7a6e54 !important; }
.summary__value{ color:#1a1a1a !important; }
.summary__value--total{
  font-size:20px; font-weight:700; color:var(--teal);
}

/* ── Modal alta deportista ──────────────────────────── */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding:20px;
  backdrop-filter:blur(6px);
}
.modal.is-visible{display:flex}
.modal__card{
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:18px; padding:32px; max-width:560px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.modal__title{font-size:22px; font-weight:600; color:#fff; margin:0 0 6px}
.modal__sub{color:var(--ink-3); font-size:14px; line-height:1.55; margin:0 0 22px}
.modal__actions{
  display:flex; gap:12px; justify-content:flex-end; margin-top:18px;
}
.modal__actions .btn-primary{margin-top:0}

/* ── M2 · Barra de progreso del wizard ─────────────── */
.wizard-progress{
  margin-bottom:24px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(160%) blur(10px);
}
.wizard-progress__bar{
  width:100%; height:4px;
  background:var(--line-2); border-radius:99px; overflow:hidden;
  margin-bottom:14px;
}
.wizard-progress__fill{
  height:100%; background:var(--teal);
  border-radius:99px;
  transition:width .35s ease;
}
.wizard-progress__dots{
  display:flex; justify-content:space-between; gap:6px;
}
.wpd{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--gray-2);
  flex-shrink:0;
  transition:background .2s, border-color .2s, color .2s;
}
.wpd__num{line-height:1}
.wpd{cursor:default;border:1px solid var(--line-2);padding:0;font-family:var(--mono)}
.wpd--done{
  background:rgba(79,168,174,.15);
  border-color:var(--teal);
  color:var(--teal);
}
.wpd--clickable{cursor:pointer;transition:transform .15s,background .15s}
.wpd--clickable:hover{transform:scale(1.08);background:rgba(79,168,174,.25)}
@media(max-width:640px){
  .wizard-progress{padding:14px 16px}
  .wpd{width:24px; height:24px; font-size:10px}
}

/* ── M4 · Resumen step 8 clickable ─────────────────── */
.summary__row--clickable{
  cursor:pointer;
  transition:background .15s;
  border-radius:6px;
  padding-left:6px; padding-right:6px; margin-left:-6px; margin-right:-6px;
}
.summary__row--clickable:hover{
  background:rgba(79,168,174,.06);
}
.summary__edit-hint{
  opacity:0; transition:opacity .2s;
  margin-left:6px; font-size:12px; color:var(--teal);
}
.summary__row--clickable:hover .summary__edit-hint{opacity:1}

/* ── M5 · Validación inline NIF/CP ─────────────────── */
.field input.is-invalid{
  border-color:rgba(248,113,113,.6) !important;
  background:rgba(248,113,113,.04) !important;
}
.field input.is-valid{
  border-color:rgba(74,222,128,.5) !important;
}
/* BUG 5 reunión 22-may: campos obligatorios vacíos marcados en rojo
   intenso al pulsar Continuar (acuerdo: "marcar en rojo el campo que
   te está limitando para continuar"). */
.field input.field-error,
.field textarea.field-error,
.field select.field-error{
  border:2px solid #DC2626 !important;
  background:rgba(220,38,38,.06) !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.15) !important;
  animation: field-error-shake .35s ease-in-out;
}
@keyframes field-error-shake{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-4px) }
  75%{ transform:translateX(4px) }
}

/* BUG 2 reunión 22-may: si Carlos pulsaba "Pagar" sin marcar los 3
   checkboxes RGPD, antes el botón estaba disabled y no entendía por
   qué no avanzaba. Ahora dispara este flash + shake en el bloque RGPD. */
.rgpd-block.rgpd-flash{
  animation: rgpd-flash-anim .6s ease-in-out;
  border-color:#DC2626 !important;
}
@keyframes rgpd-flash-anim{
  0%   { box-shadow:0 0 0 0 rgba(220,38,38,.45); transform:translateX(0) }
  25%  { box-shadow:0 0 0 8px rgba(220,38,38,.25); transform:translateX(-6px) }
  50%  { box-shadow:0 0 0 12px rgba(220,38,38,.10); transform:translateX(6px) }
  75%  { box-shadow:0 0 0 8px rgba(220,38,38,.05); transform:translateX(-4px) }
  100% { box-shadow:0 0 0 0 rgba(220,38,38,0);    transform:translateX(0) }
}
.rgpd-row--error{
  background:rgba(220,38,38,.06);
  border-left:3px solid #DC2626;
  padding-left:8px !important;
  border-radius:4px;
}
.hint{
  font-size:12.5px; color:var(--gray); margin:4px 0 0; line-height:1.4;
}

/* ====================================================================
   TEMA CLARO — Opción C "Beige bold"
   ====================================================================
   El nav y el hero mantienen su look oscuro (Carlos).
   Del wizard hacia abajo: fondo beige cálido + cards blancas con
   sombras pronunciadas que las "elevan" hacia el usuario.
   ==================================================================== */

body{
  /* Redefinir los tokens dentro del body para que CUALQUIER regla que
     use var(--bg), var(--bg-2), etc. herede automáticamente los nuevos
     valores claros. Captura todas las reglas oscuras de un golpe. */
  --bg:#FFFFFF;
  --bg-2:#FFFFFF;
  --bg-3:#FBF9F4;
  --line:#DBD2BC;
  --line-2:#C8BEA6;
  --line-soft:#E5DFD0;
  --ink:#1a1a1a;
  --ink-2:#1a1a1a;
  --ink-3:#5a5a5a;
  --gray:#6B5A3A;
  --gray-2:#8A7B5C;
  background:#EDE5D4;
  color:#1a1a1a;
}

/* Nav y hero conservan fondo negro explícito */
.nav{
  background:rgba(5,5,5,.92);
  border-bottom:1px solid #1a1a1a;
}

/* Logo medrando+ destacado con glow elegante */
.nav__brand{
  position:relative;
  color:#fff !important;
  font-size:22px;
  font-weight:800;
  letter-spacing:.005em;
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 2px 10px rgba(79,168,174,.55),
    0 0 28px rgba(79,168,174,.28);
  transition:text-shadow .3s ease, transform .3s ease;
}
.nav__brand:hover{
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 4px 18px rgba(79,168,174,.75),
    0 0 38px rgba(79,168,174,.45);
  transform:translateY(-1px);
}
.nav__brand .plus{
  color:var(--teal);
  font-weight:900;
  text-shadow:
    0 0 14px rgba(79,168,174,.8),
    0 2px 6px rgba(79,168,174,.5);
}

/* Links del nav: Inter Tight elegante (parecido al wizard title) */
.nav__links a{
  font-family:'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:-.005em;
  text-transform:none;
  color:#cfcfcf;
}
.nav__links a:hover{ color:#fff; }
.nav__cta{
  font-family:'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff !important; border-color:#2a2a2a !important;
}

/* Hero textos (ahora sobre fondo beige) — colores oscuros para contraste */
.hero{ padding-top:160px; }
.hero__title{ color:#1a1a1a; }
.hero__sub{ color:#5a5a5a; }
.hero__back{ color:#6B5A3A; }
.hero__back:hover{ color:var(--teal); }

/* Wizard (zona beige debajo del hero negro): padding visual */
.wizard{ padding-top:48px; }
.hero{
  background:#EDE5D4 radial-gradient(1200px 400px at 80% 0%, rgba(79,168,174,.20), transparent 60%);
  border-bottom:1px solid #DBD2BC;
}

/* Wizard layout — el contenedor envuelve y pinta beige por si el body
   no llega a cubrir hasta abajo (problema reportado por Carlos:
   "la mitad sigue en negro"). */
.wizard{
  background:#EDE5D4;
  min-height:calc(100vh - 60px);  /* compensa el nav fixed */
}
/* Asegurar que html y body también son beige, hasta abajo */
html{ background:#EDE5D4 !important; }
body{ background:#EDE5D4 !important; min-height:100vh; }

/* === STEP CARD === */
.step{
  background:#FFFFFF;
  border:1px solid #DBD2BC;
  box-shadow:0 8px 28px rgba(60,40,10,.08), 0 2px 6px rgba(60,40,10,.04);
}
.step--done{ border-color:rgba(79,168,174,.45); }
.step--active{
  border-color:var(--teal);
  box-shadow:
    0 0 0 1px rgba(79,168,174,.25),
    0 16px 40px rgba(79,168,174,.15),
    0 4px 10px rgba(60,40,10,.06);
}
.step__num{
  background:#F3EDDE; border-color:#DBD2BC; color:#777;
}
.step--done .step__num{
  background:rgba(79,168,174,.15); color:var(--teal); border-color:var(--teal);
}
.step--active .step__num{
  background:var(--teal); border-color:var(--teal); color:#0a0a0a;
  box-shadow:0 6px 18px rgba(79,168,174,.45);
}
.step__title{ color:#1a1a1a; }
.step__sub{ color:#5a5a5a; }

/* Summary colapsado de un step ya completado */
.step__summary{
  background:#FBF9F4; border:1px solid #E5DFD0;
}
.step__summary:hover{ border-color:var(--teal); }
.step__summary-text{ color:#1a1a1a; }
.step__edit{ color:#7a7a7a; }
.step__edit:hover{ color:var(--teal); }

/* === CARDS selectoras (yo / hijo / línea / centro / etapa) === */
.card{
  background:#FFFFFF;
  border:1px solid #DBD2BC;
  color:#1a1a1a;
  box-shadow:
    0 6px 18px rgba(60,40,10,.10),
    0 2px 4px rgba(60,40,10,.05);
}
.card:hover{
  border-color:var(--teal);
  transform:translateY(-6px) scale(1.01);
  box-shadow:
    0 24px 48px rgba(60,40,10,.15),
    0 8px 16px rgba(60,40,10,.08);
}
.card--selected{
  background:#FFFCF4;
  border-color:var(--teal); border-width:2px;
  transform:translateY(-2px);
  box-shadow:
    0 16px 36px rgba(79,168,174,.25),
    0 4px 10px rgba(0,0,0,.06);
}
/* Centros / líneas todavía no disponibles para inscripción (Carlos 18-may).
   Apariencia gris + cursor not-allowed + sin hover. */
.card--disabled{
  background:#F4F0E5 !important;
  border:1px dashed #C8BEA6 !important;
  color:#9a8e72 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
  opacity:.7;
}
.card--disabled:hover{
  transform:none !important;
  border-color:#C8BEA6 !important;
  box-shadow:none !important;
}
.card--disabled .card__title{ color:#7a6e54 !important; }
.card--disabled .card__desc { color:#9a8e72 !important; }
.card__meta--muted{
  color:#A88D56 !important;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}
.card__title{ color:#1a1a1a; }
.card__desc{ color:#5a5a5a; }
.card__meta{ color:var(--teal); font-weight:600; }
.card--add{ border-style:dashed; border-color:#C8BEA6; color:#7a7a7a; }
.card--add .card__title{ color:#7a7a7a; }
.card--add:hover{ border-color:var(--teal); }

/* === DAY (selector multi-día) === */
.day{
  background:#FFFFFF; border:1px solid #DBD2BC; color:#1a1a1a;
  box-shadow:0 4px 14px rgba(60,40,10,.08), 0 1px 3px rgba(60,40,10,.04);
}
.day:hover:not(.day--red):not(.day--closed){
  border-color:var(--teal);
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(60,40,10,.12);
}
.day--selected{
  background:#FFFCF4; border-color:var(--teal); border-width:2px;
  box-shadow:0 12px 28px rgba(79,168,174,.22);
}
.day__name{ color:#1a1a1a; }
.day__hour, .day__teacher{ color:#5a5a5a; }
.day__bar{ background:#EFE9DA; }

/* === PRESET 2 días (recomendado) === */
.preset-2dias{
  background:#FFFFFF; border:1px solid #DBD2BC; color:#1a1a1a;
  box-shadow:0 8px 22px rgba(60,40,10,.10);
}
.preset-2dias:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(60,40,10,.14);
}
.preset-2dias--selected{
  border-color:var(--teal); border-width:2px;
  background:#FFFCF4;
  box-shadow:0 14px 32px rgba(79,168,174,.24);
}
.preset-2dias__dias, .preset-2dias__hora{ color:#1a1a1a; }
.preset-2dias__teacher{ color:#5a5a5a; }
.toggle-1-dia{ border-top:1px dashed #DBD2BC; }
.toggle-1-dia__btn{ color:#5a5a5a; }
.toggle-1-dia__btn:hover{ color:var(--teal); }

/* === CEPJK info box === */
.cepjk-info{
  background:#FBF9F4; border:1px solid #E5DFD0;
}
.cepjk-info__row strong{ color:#1a1a1a; }
.cepjk-info__row p{ color:#5a5a5a; }

/* === PAYMENT CARDS (paso 7) === */
.payment-card{
  background:#FFFFFF; border:1px solid #DBD2BC; color:#1a1a1a;
  box-shadow:0 6px 18px rgba(60,40,10,.10), 0 2px 4px rgba(60,40,10,.05);
}
.payment-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(60,40,10,.14);
}
.payment-card--selected{
  background:#FFFCF4; border-color:var(--teal); border-width:2px;
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(79,168,174,.24);
}
.payment-card__title{ color:#1a1a1a; }
.payment-card__desc{ color:#5a5a5a; }
.payment-card__meta{ color:var(--teal); }

/* === BILLING form (paso 6) === */
.billing-cards{ /* hereda de .card */ }
.billing-form{
  background:#FBF9F4; border:1px solid #E5DFD0;
}
.field label{ color:#1a1a1a; }
.field input, .field textarea, .field select{
  background:#FFFFFF; color:#1a1a1a; border:1px solid #C8BEA6;
}
.field input::placeholder{ color:#a0a0a0; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--teal); outline:0;
  box-shadow:0 0 0 3px rgba(79,168,174,.18);
}

/* === CONTINUE BAR (step 5 multi-select) === */
.continue-bar{
  background:#FBF9F4; border:1px solid #E5DFD0;
}
.continue-bar__info{ color:#1a1a1a; }

/* === WAITLIST === */
.waitlist{
  background:rgba(248,113,113,.06); border:1px solid rgba(248,113,113,.3);
}
.waitlist__title{ color:#1a1a1a; }
.waitlist__desc{ color:#5a5a5a; }

/* === BTN PRIMARY === */
.btn-primary{
  box-shadow:0 8px 24px rgba(79,168,174,.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(79,168,174,.50);
}

/* === PILLS y badges === */
.pill{ color:var(--teal); background:rgba(79,168,174,.12); }

/* === MODALES (alta deportista, success) === */
.modal__card{
  background:#FFFFFF; color:#1a1a1a;
  border:1px solid #DBD2BC;
  box-shadow:0 24px 60px rgba(60,40,10,.30), 0 8px 20px rgba(60,40,10,.15);
}
.modal__title{ color:#1a1a1a; }
.modal__sub{ color:#5a5a5a; }
.success-modal__card{
  background:#FFFFFF; color:#1a1a1a;
  border:1px solid #DBD2BC;
  box-shadow:0 24px 60px rgba(60,40,10,.30), 0 8px 20px rgba(60,40,10,.15);
}
.success-modal__title{ color:#1a1a1a; }
.success-modal__desc{ color:#5a5a5a; }

/* === ALERT box inline === */
.alert-box{
  background:#FFF6F4 !important;
  border-color:rgba(248,113,113,.4) !important;
  color:#B81F1F !important;
}

/* === HINT y SAVE-BILLING === */
.hint{ color:#7a7a7a; }
.save-billing{
  background:rgba(79,168,174,.06); border:1px solid rgba(79,168,174,.3);
  color:#1a1a1a;
}
.save-billing:hover{ background:rgba(79,168,174,.10); }

/* === FOOTER === */
.footer{
  background:#000; color:#888;
  border-top:0;
}

/* === Barra de progreso 1-8 (steps dots) === */
.wizard-progress{
  background:#FFFFFF;
  border:1px solid #DBD2BC;
  box-shadow:0 6px 20px rgba(60,40,10,.08), 0 2px 4px rgba(60,40,10,.04);
  /* sigue sticky pero con un fondo translúcido cálido al hacer scroll */
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
}
.wizard-progress__bar{
  background:#E5DFD0;
}
/* fill se queda teal — ya tiene buen contraste */

.wpd{
  background:#FBF9F4;
  border:1px solid #DBD2BC;
  color:#8A7B5C;
}
.wpd--done{
  background:rgba(79,168,174,.15);
  border-color:var(--teal);
  color:var(--teal);
}
.wpd--clickable:hover{
  background:rgba(79,168,174,.25);
}