/* ====== Variables base ====== */
:root{
  --bg:#04070b;
  --fg:#eef3f7;
  --muted:#b2bdc8;
  --accent:#00ff8c;
  --cyan:#3ddcff;
  --danger:#ff4d4f;
  --glass:#0b1117cc;
  --ring:#18e27a;
  --shadow:rgba(0,0,0,.55);

  --menu-border: linear-gradient(135deg, rgba(61,220,255,.55), rgba(0,255,140,.55));
  --menu-shine:  linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
}

/* ====== Resets ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  line-height:1.35;
}

/* ====== Stadium background ====== */
.bg{position:fixed; inset:0; pointer-events:none}
.layer-crowd{
  z-index:-4;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 40%, transparent 70%),
    radial-gradient(ellipse at 50% 100%, #0a131b 0%, transparent 60%),
    repeating-radial-gradient(circle at 50% 75%, rgba(255,255,255,.06) 0 2px, rgba(0,0,0,0) 3px 16px);
  animation: crowd-move 22s linear infinite;
  filter: saturate(120%);
}
@keyframes crowd-move{ 0%{background-position:0 0,0 0,0 0} 100%{background-position:200px 0,0 0,400px 0} }

.layer-pitch{
  z-index:-3;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0 55%, rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(to right, rgba(3,110,64,.35) 0 80px, rgba(3,140,80,.35) 80px 160px);
  mask-image: radial-gradient(100vmax 60vmax at 50% 120%, #000 30%, transparent 80%);
}
.layer-lights{
  z-index:-2;
  background:
    conic-gradient(from -20deg at 20% -10%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%),
    conic-gradient(from 200deg at 80% -10%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
  animation: lights-sweep 7s ease-in-out infinite alternate;
  filter: blur(8px);
}
@keyframes lights-sweep{ from{transform:rotate(-2deg) translateY(-2px)} to{transform:rotate(3deg) translateY(2px)} }
.layer-haze{
  z-index:-1;
  background:
    radial-gradient(40vmax 20vmax at 20% 5%, rgba(61,220,255,.16), transparent 70%),
    radial-gradient(40vmax 20vmax at 80% 5%, rgba(0,255,140,.14), transparent 70%);
  filter: blur(30px);
  animation: haze 18s ease-in-out infinite alternate;
}
@keyframes haze{ from{transform:translateY(-6px)} to{transform:translateY(6px)} }

/* ====== Header ====== */
.header{ display:flex; align-items:center; justify-content:center; padding:36px 16px 6px }
.brand{ text-align:center }
.crest{
  width:70px;height:70px;margin:0 auto 8px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0f172a,#0b1117); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 28px var(--shadow), inset 0 0 0 2px rgba(255,255,255,.04);
}
.ball{ font-size:30px; filter:drop-shadow(0 0 8px rgba(255,255,255,.18)) }
.brand__title{
  margin:0; padding:10px 18px; display:inline-block; font-weight:800; letter-spacing:.08em; border-radius:16px;
  background:linear-gradient(135deg,#11151a 0%,#0f172a 100%); border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 30px var(--shadow), inset 0 0 0 2px rgba(255,255,255,.02);
}
.brand__subtitle{ display:block;margin-top:8px;font-size:.86rem;color:var(--muted);letter-spacing:.15em }

/* ====== Layout ====== */
.container{ width:min(900px,92vw); margin:30px auto 0; display:grid; gap:16px }

/* ====== Panels ====== */
.glass{
  background:var(--glass); backdrop-filter: blur(10px) saturate(120%);
  border:1px solid rgba(255,255,255,.08); border-radius:20px; box-shadow:0 12px 34px var(--shadow);
}
.panel{ padding:18px 20px 22px }
.card--rise{ animation: rise .6s ease both }
@keyframes rise{ from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ====== Menú compacto ====== */
#config{ position:relative; overflow:hidden; width:min(680px,92vw); margin:0 auto }
#config::before{
  content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background:var(--menu-border);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none;
}
#config::after{
  content:""; position:absolute; inset:-40% -60% auto -60%; height:60%; background:var(--menu-shine);
  transform:rotate(8deg); animation:menu-shine 6s ease-in-out infinite; pointer-events:none;
}
@keyframes menu-shine{ 0%{transform:translateX(-10%) rotate(8deg);opacity:0} 40%{opacity:.6} 100%{transform:translateX(60%) rotate(8deg);opacity:0} }

.lead{ color:var(--muted); margin:0 0 8px }
.hint{ color:var(--muted); font-weight:400 }

/* ====== Form ====== */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 14px }
.form-control label{ display:block; margin:0 0 6px; font-weight:600 }

/* Stepper */
.stepper{ display:flex; align-items:center; gap:8px }
.stepper__display{
  flex:1 1 auto; min-width:120px; text-align:center; font-weight:900; letter-spacing:.04em; color:var(--fg);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px 14px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.02);
}
.stepper__btn{
  width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.10);color:var(--fg);
  font-weight:800;font-size:20px;line-height:1;cursor:pointer; box-shadow:0 6px 12px rgba(0,0,0,.25);
  transition:transform .08s ease, background .2s ease, filter .2s ease;
}
.stepper__btn:hover{ background:rgba(255,255,255,.16) }
.stepper__btn:active{ transform:translateY(1px) }
.bump{ animation:bump .18s ease } @keyframes bump{ 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* ====== Botones ====== */
.btn{
  -webkit-tap-highlight-color:transparent; appearance:none; border:0; cursor:pointer;
  padding:10px 16px; border-radius:14px; font-weight:700; color:#0a0c10; background:#fff;
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease; box-shadow:0 8px 16px rgba(0,0,0,.25);
}
.btn:active{ transform:translateY(1px) }
.btn--xl{ padding:14px 18px; font-size:1.02rem } .btn__icon{ margin-right:8px }
.btn--primary{
  color:#031d12; background:linear-gradient(135deg,#76ffba 0%,#3af8a0 40%,#3ddcff 100%);
  box-shadow:0 8px 16px rgba(24,226,122,.22), inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn--primary:hover{ filter:brightness(1.02) saturate(1.08) }
.btn--ghost{ color:var(--fg); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
.btn--ghost:hover{ background:rgba(255,255,255,.06) }
.btn--danger{ color:#2a090a; background:linear-gradient(135deg,#ffb3b4 0%,#ff6e71 40%,#ff4d4f 100%); box-shadow:0 8px 16px rgba(255,77,79,.22) }
.btn--danger:hover{ filter:brightness(1.03) }

/* ====== Turnos / Rol ====== */
.turn-header{ display:flex; align-items:center; justify-content:center; margin-bottom:10px }
.badge{ display:inline-block; padding:2px 10px; border-radius:999px; background:rgba(61,220,255,.16); border:1px solid rgba(61,220,255,.35); color:#b9f1ff; font-weight:700 }
.sep{ margin:0 8px; color:var(--muted) }

.role-card{
  margin:14px auto 10px; width:min(360px, 92%); padding:18px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 18px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  animation: slide-up .45s ease both;
}
@keyframes slide-up{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.role-name{ margin:0; font-size:1.2rem; font-weight:800; letter-spacing:.02em; text-align:center }
.role-photo{
  width:220px; max-width:100%; border-radius:14px; aspect-ratio:1/1; object-fit:cover;
  box-shadow:0 10px 20px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
  opacity:0; transform:translateY(6px); transition:.35s ease;
}
.role-photo.fade-in{ opacity:1; transform:translateY(0) }

/* IMPOSTOR FX */
.impostor-text{
  color:var(--danger)!important; font-weight:900; letter-spacing:.04em;
  text-shadow:0 0 6px rgba(255,77,79,.9), 0 0 14px rgba(255,77,79,.55);
}
.impostor-card-anim{
  animation: impostorPulse 1.2s ease-in-out 2, impostorShake .5s ease-in-out 2;
  box-shadow:0 0 24px rgba(255,77,79,.55), inset 0 0 0 2px rgba(255,77,79,.35);
}
@keyframes impostorPulse{
  0%{ background-color:rgba(255,77,79,0); }
  50%{ background-color:rgba(255,77,79,.12); }
  100%{ background-color:rgba(255,77,79,0); }
}
@keyframes impostorShake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-7px) }
  40%{ transform:translateX(7px) }
  60%{ transform:translateX(-4px) }
  80%{ transform:translateX(4px) }
}

/* Botonera centrada */
.actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap }
.actions--center{ justify-content:center }

/* ====== Modales ====== */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:50 }
.modal__content{ width:min(420px,92vw); padding:20px; border-radius:18px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.45) }
.modal__title{ margin:0 0 8px } .modal__text{ color:var(--muted); margin:0 0 16px } .modal__actions{ display:flex; gap:10px; justify-content:center }
.pop-in{ animation:pop .22s ease both } @keyframes pop{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }

/* ====== Ribbon ====== */
.ribbon{ position:relative; margin-top:24px; padding:14px 0; overflow:hidden }
.ribbon::before,.ribbon::after{ content:""; position:absolute; top:0; bottom:0; width:60px; z-index:5; pointer-events:none }
.ribbon::before{ left:0; background:linear-gradient(90deg,var(--bg),transparent) }
.ribbon::after{ right:0; background:linear-gradient(-90deg,var(--bg),transparent) }
.ribbon__track{ display:flex; gap:14px; align-items:center; will-change:transform }
.ribbon__item{ flex:0 0 auto; width:120px; height:120px; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); box-shadow:0 6px 14px rgba(0,0,0,.3); display:grid; place-items:center }
.ribbon__item img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02) }

/* ====== Helpers ====== */
.fade-in{ animation:fade .4s ease both } @keyframes fade{ from{opacity:0} to{opacity:1} }

/* ====== Responsive ====== */
@media (max-width:640px){
  .form-grid{ grid-template-columns: 1fr }
  .btn--xl{ width:100% }
}

.footer {
  background-color: #0d0d0d; /* fondo oscuro */
  color: #fff;
  text-align: center;
  padding: 25px 15px;
  margin-top: 40px;
  border-top: 2px solid #00ffc8; /* línea decorativa */
}

.footer__container {
  max-width: 1000px;
  margin: 0 auto;
}

.footer__email {
  font-size: 16px;
  margin-bottom: 10px;
}

.footer__socials {
  margin: 10px 0;
}

.footer__socials a {
  margin: 0 12px;
  font-size: 20px;
  text-decoration: none;
  color: #00ffc8;
  transition: color 0.3s;
}

.footer__socials a:hover {
  color: #ffffff;
}

.footer__copy {
  margin-top: 15px;
  font-size: 14px;
  opacity: 0.7;
}