/* Halloween Black Light Padel — Grove Padel Club */
:root{
  --bg:#07020f; --bg2:#120624; --card:#170a2e; --line:#2e1856;
  --uv:#9d4dff; --uv-soft:#5b23b8;
  --lime:#c6ff1a; --pink:#ff2bd6; --orange:#ff7a1a; --cyan:#2bf5ff;
  --text:#f3ecff; --muted:#a898c8; --danger:#ff4d6d; --ok:#c6ff1a;
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",system-ui,sans-serif; color:var(--text); line-height:1.5;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(157,77,255,.35), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(255,43,214,.18), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(198,255,26,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed; min-height:100vh;
}
a{color:var(--lime)}
h1,h2,h3,.display{font-family:"Unbounded",sans-serif; letter-spacing:-.01em; margin:0}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.narrow{max-width:560px}

/* glow helpers */
.glow-lime{color:var(--lime); text-shadow:0 0 6px rgba(198,255,26,.8),0 0 22px rgba(198,255,26,.45)}
.glow-pink{color:var(--pink); text-shadow:0 0 6px rgba(255,43,214,.8),0 0 22px rgba(255,43,214,.45)}
.glow-orange{color:var(--orange); text-shadow:0 0 6px rgba(255,122,26,.8),0 0 24px rgba(255,122,26,.5)}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-family:"Unbounded"; font-weight:700; font-size:15px; letter-spacing:.04em; text-transform:uppercase}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px var(--lime),0 0 24px var(--lime)}
.nav .tag{font-size:12px; color:var(--muted); border:1px solid var(--line); padding:6px 10px; border-radius:99px}

/* hero */
.hero{padding-top:40px; padding-bottom:30px; position:relative}
.kicker{display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
  border:1px solid rgba(43,245,255,.35); border-radius:99px; padding:6px 12px;
  box-shadow:0 0 18px rgba(43,245,255,.15) inset}
.hero h1{font-size:clamp(40px,9vw,92px); line-height:.95; margin:22px 0 18px; font-weight:800; text-transform:uppercase}
.hero h1 .l2{display:block}
.hero p.lead{font-size:clamp(16px,2.4vw,19px); color:var(--muted); max-width:560px; margin:0 0 28px}
.hero-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:32px; align-items:center}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}}

.court{aspect-ratio:3/4; border-radius:26px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#160634,#0b0219);
  border:2px solid rgba(157,77,255,.6);
  box-shadow:0 0 0 1px rgba(157,77,255,.2),0 0 60px rgba(157,77,255,.35), inset 0 0 60px rgba(157,77,255,.25)}
.court::before{content:""; position:absolute; left:8%; right:8%; top:50%; height:3px;
  background:var(--pink); box-shadow:0 0 12px var(--pink),0 0 30px var(--pink)}
.court::after{content:""; position:absolute; left:50%; top:14%; bottom:14%; width:2px;
  background:rgba(43,245,255,.7); box-shadow:0 0 10px var(--cyan)}
.court .svc{position:absolute; left:8%; right:8%; height:2px; background:rgba(43,245,255,.7); box-shadow:0 0 10px var(--cyan)}
.court .svc.t{top:14%} .court .svc.b{bottom:14%}
.ball{position:absolute; width:46px; height:46px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 18px var(--lime),0 0 50px rgba(198,255,26,.7); top:28%; left:58%;
  animation:bounce 3.2s ease-in-out infinite}
.ball::before,.ball::after{content:""; position:absolute; inset:6px; border-radius:50%;
  border:2px solid rgba(7,2,15,.35); clip-path:inset(0 50% 0 0)}
.ball::after{clip-path:inset(0 0 0 50%); transform:rotate(180deg)}
.pumpkin{position:absolute; bottom:9%; left:12%; font-size:54px; filter:drop-shadow(0 0 14px var(--orange))}
.bat{position:absolute; top:7%; right:12%; font-size:30px; opacity:.9; animation:fly 6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translate(0,0)}50%{transform:translate(-90px,90px)}}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(-30px,14px) rotate(6deg)}}
@media (max-width:820px){.court{aspect-ratio:16/9; order:-1} .pumpkin{font-size:36px} .ball{width:30px;height:30px} .hero h1{margin-top:18px}}
@media (prefers-reduced-motion:reduce){.ball,.bat{animation:none}}

/* chips de info */
.facts{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px}
.fact{background:rgba(23,10,46,.8); border:1px solid var(--line); border-radius:14px; padding:10px 14px}
.fact b{display:block; font-family:"Unbounded"; font-size:15px}
.fact span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}

/* botones */
.btn{appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Unbounded"; font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.04em;
  padding:18px 28px; border-radius:14px; text-decoration:none; transition:transform .15s, box-shadow .15s}
.btn-primary{background:var(--lime); color:#0b0219;
  box-shadow:0 0 0 2px rgba(198,255,26,.3),0 0 26px rgba(198,255,26,.55)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 2px rgba(198,255,26,.5),0 0 44px rgba(198,255,26,.8)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--uv)}
.btn-pink{background:var(--pink); color:#fff; box-shadow:0 0 26px rgba(255,43,214,.5)}
.btn-block{width:100%}
.btn-sm{font-size:12px; padding:10px 14px; border-radius:10px}

/* secciones */
.section{padding-top:36px; padding-bottom:36px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.step .n{font-family:"Unbounded"; font-weight:800; font-size:28px}
.step h3{font-size:16px; margin:8px 0 6px}
.step p{margin:0; color:var(--muted); font-size:14px}

/* tarjetas y formularios */
.card{background:linear-gradient(180deg,rgba(29,12,58,.92),rgba(18,6,36,.92)); border:1px solid var(--line);
  border-radius:24px; padding:28px; box-shadow:0 0 50px rgba(157,77,255,.15)}
@media (max-width:520px){.card{padding:20px}}
.card h2{font-size:24px; margin-bottom:6px}
.card .sub{color:var(--muted); margin:0 0 22px; font-size:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#d9ccf5}
.field label small{color:var(--muted); font-weight:400}
.input{width:100%; font:inherit; font-size:16px; color:var(--text); background:#0d0420;
  border:1px solid var(--line); border-radius:12px; padding:14px; outline:none; transition:border-color .15s, box-shadow .15s}
.input:focus{border-color:var(--uv); box-shadow:0 0 0 3px rgba(157,77,255,.3),0 0 20px rgba(157,77,255,.3)}
.input[type=date]{color-scheme:dark}
.err .input{border-color:var(--danger)}
.msg{color:var(--danger); font-size:13px; margin-top:6px}

.sizes{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
@media (max-width:420px){.sizes{grid-template-columns:repeat(3,1fr)}}
.sizes input{position:absolute; opacity:0; pointer-events:none}
.sizes label{display:flex; align-items:center; justify-content:center; height:54px; margin:0; border-radius:12px;
  border:1px solid var(--line); background:#0d0420; font-family:"Unbounded"; font-weight:700; font-size:15px; cursor:pointer; transition:all .15s}
.sizes label:hover{border-color:var(--uv)}
.sizes input:checked + label{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 0 20px rgba(255,43,214,.6)}
.sizes input:focus-visible + label{outline:2px solid var(--cyan); outline-offset:2px}

/* resumen */
.summary{border:1px dashed var(--line); border-radius:16px; padding:6px 18px; margin:0 0 20px}
.row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(46,24,86,.6)}
.row:last-child{border-bottom:0}
.row span{color:var(--muted); font-size:14px}
.row b{text-align:right}
.total{display:flex; justify-content:space-between; align-items:baseline; margin:4px 0 20px}
.total .display{font-size:30px}

/* ticket */
.ticket{text-align:center}
.ticket .code{font-family:"Unbounded"; font-weight:800; font-size:clamp(38px,10vw,56px); margin:14px 0 4px; letter-spacing:.04em}
.badge{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px}
.badge.ok{background:rgba(198,255,26,.15); color:var(--lime); border:1px solid rgba(198,255,26,.4)}
.badge.warn{background:rgba(255,122,26,.15); color:var(--orange); border:1px solid rgba(255,122,26,.4)}
.badge.bad{background:rgba(255,77,109,.15); color:var(--danger); border:1px solid rgba(255,77,109,.4)}
.badge.muted{background:rgba(168,152,200,.12); color:var(--muted); border:1px solid var(--line)}
.notice{background:rgba(43,245,255,.08); border:1px solid rgba(43,245,255,.3); border-radius:14px; padding:14px 16px; font-size:14px; text-align:left}
.sim{background:repeating-linear-gradient(45deg,rgba(255,122,26,.12) 0 12px,transparent 12px 24px);
  border:1px dashed var(--orange); border-radius:14px; padding:12px; font-size:13px; color:var(--orange); text-align:center; margin-bottom:18px}


.site-footer{margin-top:40px; padding:32px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; background:rgba(7,2,15,.6)}
.site-footer p{margin:0 0 12px; line-height:1.7}
.site-footer a{color:#d9ccf5}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:24px}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}
.foot-links{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; align-content:start}
.foot-links a{text-decoration:none} .foot-links a:hover{color:var(--lime)}
.fine{font-size:12px; color:var(--muted); margin:10px 0 0}
.cards{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 4px}
.cards img{background:#fff; border-radius:6px; padding:3px 6px}
.card-pill{font-size:11px; font-weight:700; letter-spacing:.06em; padding:6px 10px; border-radius:6px; background:#f3ecff; color:#1b1030}
.card-pill.secure{background:transparent; color:#d9ccf5; border:1px solid var(--line); font-weight:600}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#d9ccf5; margin:0 0 16px; cursor:pointer;
  background:#0d0420; border:1px solid var(--line); border-radius:12px; padding:14px}
.check input{width:22px; height:22px; flex:none; margin:1px 0 0; accent-color:var(--lime)}
.incl ul{margin:12px 0 0; padding-left:18px; color:#d9ccf5} .incl li{margin:6px 0}
/* páginas legales */
.legal{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start}
@media (max-width:820px){.legal{grid-template-columns:1fr}}
.legal nav{display:grid; gap:4px; position:sticky; top:16px}
.legal nav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-size:14px}
.legal nav a.on{background:var(--card); color:var(--lime); border:1px solid var(--line)}
.prose h1{font-size:clamp(24px,5vw,34px); margin-bottom:6px}
.prose h2{font-size:17px; margin:26px 0 8px; color:var(--lime)}
.prose p,.prose li{color:#d9ccf5; font-size:15px}
.prose .upd{color:var(--muted); font-size:13px; margin-bottom:18px}
.prose details{background:#0d0420; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0}
.prose summary{cursor:pointer; font-weight:600}


/* ---------------- staff ---------------- */
.staff body, body.staff{background:var(--bg)}
.staff-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 0}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
.stat b{font-family:"Unbounded"; font-size:24px; display:block}
.stat span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.tallas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.tallas div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:13px}
.tallas b{font-family:"Unbounded"; margin-right:6px}
.search{display:flex; gap:8px; margin-bottom:10px}
.search .input{font-size:18px; padding:16px}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.tabs a{font-size:13px; text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:7px 12px}
.tabs a.on{color:#0b0219; background:var(--lime); border-color:var(--lime)}
.list{display:grid; gap:10px}
.item{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center}
.item.done{opacity:.6}
@media (max-width:620px){.item{grid-template-columns:auto 1fr} .item .act{grid-column:1/-1}}
.size-pill{width:62px; height:62px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:"Unbounded"; font-weight:800; font-size:20px; background:var(--pink); color:#fff; box-shadow:0 0 18px rgba(255,43,214,.45)}
.item.done .size-pill{background:#3a2a5a; box-shadow:none}
.item h3{font-size:16px; margin:0 0 4px; font-family:"Inter"; font-weight:700}
.item .meta{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px}
.act{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.act form{margin:0}
.flash{background:rgba(198,255,26,.12); border:1px solid rgba(198,255,26,.4); color:var(--lime);
  padding:12px 14px; border-radius:12px; margin-bottom:12px; font-weight:600}
.empty{text-align:center; color:var(--muted); padding:40px 0}
.cupos{margin:14px 0 0; color:var(--muted); font-size:15px}
.cupo-bar{position:relative; height:38px; border-radius:12px; background:var(--card); border:1px solid var(--line); overflow:hidden; margin-bottom:12px}
.cupo-bar .fill{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--uv-soft),var(--pink)); opacity:.55}
.cupo-bar span{position:relative; display:flex; align-items:center; height:100%; padding:0 14px; font-size:13px}