/* ═══════════════════════════════════════════════════════════════
   wopapp — Páginas públicas (landing, login, registro)
   Tono: enérgico, cálido, familia calisténica
   ═══════════════════════════════════════════════════════════════ */
:root {
  --n: #F0A418; --p: #4607C7; --k: #242424;
  --bg: #111; --bg1: #1a1a1a; --bg2: #222; --bg3: #2a2a2a;
  --borde: #2e2e2e; --txt: #EFEFEF; --sub: #888; --ten: #444;
  --verde: #5DCAA5; --rojo: #FF6B6B;
  --r: 14px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* ── Nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 24px; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(17,17,17,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
}
.nav__logo { font-size:22px; font-weight:800; color:var(--n); letter-spacing:-.03em; }
.nav__logo span { color:var(--txt); font-weight:400; }
.nav__acciones { display:flex; gap:10px; align-items:center; }
.nav__link { font-size:14px; color:var(--sub); transition:color .15s; }
.nav__link:hover { color:var(--txt); }

/* ── Botones ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 22px; border-radius:10px; font-family:inherit; font-weight:700;
  font-size:15px; cursor:pointer; border:none; transition:all .15s;
  text-decoration:none; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn--naranja { background:var(--n); color:var(--k); }
.btn--naranja:hover { opacity:.9; }
.btn--outline { background:transparent; border:1.5px solid var(--borde); color:var(--txt); }
.btn--outline:hover { border-color:var(--sub); }
.btn--purpura { background:var(--p); color:#fff; }
.btn--sm { padding:9px 16px; font-size:13px; border-radius:8px; }
.btn--full { width:100%; }

/* ── Hero ── */
.hero {
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:80px 24px 60px;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(70,7,199,.3) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 80% 80%, rgba(240,164,24,.1) 0%, transparent 60%),
              var(--bg);
}
.hero__tag {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:99px; border:1px solid rgba(240,164,24,.3);
  background:rgba(240,164,24,.08); color:var(--n); font-size:13px;
  font-weight:600; margin-bottom:24px;
}
.hero__titulo {
  font-size:clamp(36px,8vw,76px); font-weight:900; line-height:1.0;
  letter-spacing:-.04em; margin-bottom:20px;
}
.hero__titulo .accent { color:var(--n); }
.hero__titulo .accent-p { color:#b19fe8; }
.hero__subtitulo { font-size:clamp(16px,2.5vw,20px); color:var(--sub); max-width:580px; margin-bottom:36px; line-height:1.6; }
.hero__acciones { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ── Stats ── */
.stats {
  display:flex; justify-content:center; gap:0;
  padding:32px 24px; border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  background:var(--bg1); overflow-x:auto; flex-wrap:wrap;
}
.stat {
  flex:1; min-width:120px; text-align:center; padding:16px 20px;
  border-right:1px solid var(--borde);
}
.stat:last-child { border-right:none; }
.stat__numero { font-size:32px; font-weight:900; color:var(--n); letter-spacing:-.03em; }
.stat__label { font-size:12px; color:var(--sub); margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }

/* ── Sección ── */
.seccion { padding:72px 24px; max-width:1100px; margin:0 auto; }
.seccion__titulo {
  font-size:clamp(24px,4vw,38px); font-weight:800; letter-spacing:-.02em;
  margin-bottom:8px;
}
.seccion__sub { font-size:16px; color:var(--sub); margin-bottom:40px; }

/* ── Grid sedes ── */
.sedes-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.sede-card {
  background:var(--bg2); border:1px solid var(--borde); border-radius:var(--r);
  padding:20px; cursor:pointer; transition:border-color .15s,transform .1s;
}
.sede-card:hover { border-color:var(--n); transform:translateY(-2px); }
.sede-card.activo { border-color:var(--n); background:rgba(240,164,24,.05); }
.sede-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.sede-card__nombre { font-weight:700; font-size:16px; }
.sede-card__badge {
  padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; flex-shrink:0;
}
.badge-presencial { background:rgba(240,164,24,.15); color:var(--n); }
.badge-online { background:rgba(70,7,199,.25); color:#b19fe8; }
.badge-libre { background:rgba(196,196,196,.12); color:#999; }
.badge-prox { background:rgba(255,107,107,.15); color:var(--rojo); }
.sede-card__meta { font-size:13px; color:var(--sub); margin-top:6px; }
.sede-card__horarios { margin-top:12px; display:none; }
.sede-card.activo .sede-card__horarios { display:block; }
.horario-item {
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-top:1px solid var(--borde); font-size:13px;
}
.horario-item:first-child { border-top:none; }
.horario-item__dia { min-width:80px; color:var(--sub); }
.horario-item__hora { font-weight:600; flex:1; }
.horario-item__btn {
  font-size:11px; padding:4px 10px; border-radius:99px;
  background:rgba(240,164,24,.15); color:var(--n); border:none;
  cursor:pointer; font-family:inherit; font-weight:600; transition:background .15s;
}
.horario-item__btn:hover { background:rgba(240,164,24,.3); }

/* ── Grid coaches ── */
.coaches-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;
}
.coach-card {
  background:var(--bg2); border:1px solid var(--borde); border-radius:var(--r);
  padding:20px; text-align:center;
}
.coach-avatar {
  width:60px; height:60px; border-radius:50%; background:var(--p);
  color:#fff; font-size:22px; font-weight:700; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
}
.coach-nombre { font-weight:700; font-size:15px; margin-bottom:4px; }
.coach-esp { font-size:12px; color:var(--sub); margin-bottom:10px; line-height:1.4; }
.coach-wpp {
  display:inline-flex; align-items:center; gap:5px; font-size:12px;
  color:#25D366; background:rgba(37,211,102,.1); padding:4px 12px;
  border-radius:99px; font-weight:600;
}

/* ── Desbloqueado/bloqueado ── */
.planes-preview {
  background:var(--bg2); border:1px solid var(--borde); border-radius:var(--r);
  padding:28px; text-align:center; position:relative; overflow:hidden;
}
.planes-preview__numero {
  font-size:64px; font-weight:900; color:var(--n);
  filter:blur(0); line-height:1;
}
.planes-preview__label { font-size:16px; color:var(--sub); margin-top:8px; margin-bottom:16px; }
.planes-preview__lock {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; color:var(--sub); padding:10px 16px; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid var(--borde); margin:0 auto;
  max-width:320px;
}

/* ── CTA section ── */
.cta-section {
  background: linear-gradient(135deg, #0d0920 0%, #111827 100%);
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  padding:72px 24px; text-align:center;
}
.cta-section h2 { font-size:clamp(28px,5vw,48px); font-weight:900; letter-spacing:-.03em; margin-bottom:16px; }
.cta-section p { font-size:16px; color:var(--sub); margin-bottom:36px; max-width:480px; margin-left:auto; margin-right:auto; }

/* ── Auth pages ── */
.auth-page {
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:80px 20px 40px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(70,7,199,.2) 0%, transparent 60%),
              var(--bg);
}
.auth-box {
  width:100%; max-width:420px;
  background:var(--bg1); border:1px solid var(--borde); border-radius:20px;
  padding:36px 32px;
}
.auth-logo { font-size:28px; font-weight:900; color:var(--n); text-align:center; margin-bottom:8px; }
.auth-logo span { color:var(--txt); font-weight:400; }
.auth-titulo { font-size:22px; font-weight:800; text-align:center; margin-bottom:6px; }
.auth-sub { font-size:14px; color:var(--sub); text-align:center; margin-bottom:28px; line-height:1.5; }
.campo { margin-bottom:18px; }
.campo label { display:block; font-size:13px; font-weight:600; color:var(--sub); margin-bottom:6px; }
.campo input {
  width:100%; background:var(--bg2); border:1px solid var(--borde);
  border-radius:10px; padding:13px 14px; color:var(--txt);
  font-family:inherit; font-size:16px; transition:border-color .15s;
}
.campo input:focus { outline:none; border-color:var(--n); }
.campo input::placeholder { color:var(--ten); }
.campo .err { font-size:12px; color:var(--rojo); margin-top:5px; }
.campo .pista { font-size:12px; color:var(--ten); margin-top:5px; }
.auth-footer { text-align:center; font-size:13px; color:var(--sub); margin-top:20px; }
.auth-footer a { color:var(--n); font-weight:600; }
.alerta-auth {
  padding:12px 14px; border-radius:10px; font-size:14px; margin-bottom:18px;
}
.alerta-auth--error { background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.3); color:var(--rojo); }
.alerta-auth--ok { background:rgba(93,202,165,.1); border:1px solid rgba(93,202,165,.3); color:var(--verde); }

/* ── App alumno pendiente ── */
.pendiente-banner {
  background:rgba(240,164,24,.08); border:1px solid rgba(240,164,24,.3);
  border-radius:12px; padding:16px 20px; margin:20px;
  display:flex; align-items:flex-start; gap:12px;
}
.pendiente-banner__icono { font-size:22px; flex-shrink:0; }
.pendiente-banner__titulo { font-weight:700; font-size:15px; color:var(--n); margin-bottom:4px; }
.pendiente-banner__texto { font-size:13px; color:var(--sub); line-height:1.5; }

/* ── Modal clase de prueba ── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:200;
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
@media(min-width:600px){ .modal-backdrop { align-items:center; padding:20px; } }
.modal-box {
  background:var(--bg1); border-radius:20px 20px 0 0; width:100%;
  max-width:480px; padding:28px 24px; max-height:92dvh; overflow-y:auto;
}
@media(min-width:600px){ .modal-box { border-radius:20px; } }
.modal-titulo { font-size:20px; font-weight:800; margin-bottom:6px; }
.modal-sub { font-size:14px; color:var(--sub); margin-bottom:22px; }
.modal-cerrar {
  position:absolute; top:16px; right:16px; background:none; border:none;
  color:var(--sub); font-size:26px; cursor:pointer; line-height:1;
}
select.campo-select {
  width:100%; background:var(--bg2); border:1px solid var(--borde);
  border-radius:10px; padding:13px 14px; color:var(--txt);
  font-family:inherit; font-size:16px; margin-bottom:18px;
}
select.campo-select:focus { outline:none; border-color:var(--n); }

/* ── Footer ── */
.footer { padding:40px 24px; text-align:center; font-size:13px; color:var(--ten); border-top:1px solid var(--borde); }
.footer a { color:var(--sub); }

/* ── Loader ── */
.spinner {
  width:28px; height:28px; border:3px solid var(--borde); border-top-color:var(--n);
  border-radius:50%; animation:spin .7s linear infinite; margin:40px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }
.oculto { display:none !important; }