/* ===== Hi Sports Club — custom styles ===== */
:root{
  --fira:'Fira Sans',system-ui,sans-serif;
  --asap:'Asap Condensed',var(--fira);
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--fira); background:#05060a; color:#fff; overflow-x:hidden; }
.font-cond{ font-family:var(--asap); }
h1,h2,h3,.display{ font-family:var(--asap); }

a{ color:#c9a3ff; text-decoration:none; }
a:hover{ color:#e7d6ff; }

/* keep app hidden until Vue mounts to avoid flash of {{ }} */
[v-cloak]{ display:none; }

/* ---- section diagonal stripe texture ---- */
.stripes::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);
  mix-blend-mode:screen;opacity:.6;
}
.dots{
  background-image:radial-gradient(rgba(255,255,255,.16) 1.6px,transparent 1.6px);
  background-size:16px 16px;
}

/* ---- gradient section backgrounds ---- */
.bg-beneficios{ background:linear-gradient(120deg,#3a0f74 0%,#5a1596 40%,#8f1a9c 72%,#c81f83 100%); }
.bg-subastas{ background:linear-gradient(120deg,#ff8a00 0%,#ff5e00 55%,#ff3d2e 100%); }
.bg-pregunta{ background:linear-gradient(120deg,#0f6b2f 0%,#2fae2c 55%,#a6d80f 100%); }
.bg-desafios{ background:linear-gradient(120deg,#2a0a2e 0%,#5c0f4d 55%,#8a1444 100%); }
.bg-membresia{ background:linear-gradient(120deg,#0b3b8c 0%,#0e63c8 55%,#1e8bff 100%); }

.text-grad-hero{
  background:linear-gradient(100deg,#4fd8ff 0%,#8f9bff 45%,#c79bff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- hero ---- */
.hero-media{ position:absolute;inset:0;overflow:hidden; }
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-media img{ animation:kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns{ from{transform:scale(1.05) translate(0,0)} to{transform:scale(1.18) translate(-2%,-2%)} }
.hero-sweep{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(75deg,transparent 40%,rgba(120,180,255,.10) 50%,transparent 60%);
  background-size:250% 100%;animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep{ 0%{background-position:130% 0} 100%{background-position:-30% 0} }
.hero-fade{ position:absolute;inset:0;background:
  linear-gradient(90deg,#05060a 8%,rgba(5,6,10,.72) 42%,rgba(5,6,10,.15) 70%,rgba(5,6,10,.35) 100%),
  linear-gradient(0deg,#05060a 2%,transparent 30%); }

/* ---- generic scroll reveal ---- */
.reveal{ opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.rv-left{ transform:translateX(-42px); }
.reveal.rv-right{ transform:translateX(42px); }
.reveal.rv-scale{ transform:scale(.9); }
.reveal.in{ opacity:1;transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .hero-media img,.hero-sweep{animation:none}
}

/* ---- benefit icon badge float ---- */
.badge-float{ animation:float 4.5s ease-in-out infinite; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ---- cards ---- */
.card-hover{ transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s; }
.card-hover:hover{ transform:translateY(-8px); box-shadow:0 24px 50px -18px rgba(0,0,0,.65); }

.tag-live{ position:relative; }
.tag-live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  display:inline-block;margin-right:7px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.6s infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }

/* ---- progress bars ---- */
.bar{ height:8px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden; }
.bar > i{ display:block;height:100%;border-radius:99px;width:0;transition:width 1.3s cubic-bezier(.2,.7,.2,1); }

/* ---- pregunta del día: confetti + wrong flash ---- */
.confetti-layer{ position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden; }
.cft{ position:absolute;top:-6%;display:block;
  animation:cftfall 2s cubic-bezier(.3,.6,.5,1) forwards;will-change:transform,opacity; }
@keyframes cftfall{
  0%{ transform:translate(0,0) rotate(0);opacity:1; }
  100%{ transform:translate(var(--dx),115vh) rotate(var(--rot));opacity:.9; }
}
.wrong-flash{ position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(120% 120% at 50% 40%,rgba(230,20,40,.55),rgba(150,0,15,.85)); }
.q-wrong .wrong-flash{ animation:wrongflash .95s ease; }
@keyframes wrongflash{
  0%{ opacity:0; } 12%{ opacity:1; }
  30%,55%{ opacity:.72; } 42%{ opacity:1; } 100%{ opacity:0; }
}
.q-wrong{ animation:qshake .5s ease; }
@keyframes qshake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }
@media (prefers-reduced-motion:reduce){ .q-wrong,.cft{ animation-duration:.01s; } }

/* ---- answer chips ---- */
.chip{ transition:transform .2s,background .2s,border-color .2s; }
.chip:hover{ transform:translateY(-2px); }

/* ---- membership card 3D ---- */
.memstage{ perspective:1300px; }
.memcard{
  position:relative;transform-style:preserve-3d;will-change:transform;
  transition:transform .18s ease-out,box-shadow .3s ease;
  transform:rotateX(0deg) rotateY(0deg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 10px 30px -12px rgba(30,120,255,.4);
}
.memcard *{ transform-style:preserve-3d; }
.mem-d1{ transform:translateZ(28px); }
.mem-d2{ transform:translateZ(46px); }
.mem-d3{ transform:translateZ(64px); }
/* moving holographic sheen driven by --mx/--my */
.mem-shine{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:
    radial-gradient(130% 120% at var(--mx,50%) var(--my,20%),rgba(255,255,255,.38) 0%,rgba(255,255,255,.08) 22%,transparent 46%),
    linear-gradient(115deg,transparent 30%,rgba(120,190,255,.18) 47%,rgba(200,140,255,.18) 53%,transparent 70%);
  mix-blend-mode:screen;transition:opacity .3s;opacity:.9;
}
/* animated conic edge */
.mem-edge{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  padding:1px;
  background:conic-gradient(from 0deg,#3aa0ff,#a06bff,#28e0c8,#3aa0ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;animation:edgespin 8s linear infinite;
}
@keyframes edgespin{ to{ transform:rotate(360deg); } }
/* sporty diagonal energy stripes on the card */
.mem-stripes{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none;
}
.mem-stripes::before{
  content:"";position:absolute;inset:-20%;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 6px,transparent 6px 30px);
  mix-blend-mode:screen;
}
.mem-stripes::after{
  content:"";position:absolute;top:-40%;right:-10%;width:70%;height:180%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(40,224,200,.35),transparent);
  filter:blur(6px);
}
.mem-num{
  position:absolute;right:-6px;bottom:-22px;z-index:1;pointer-events:none;
  font-family:var(--asap);font-weight:800;font-size:150px;line-height:1;
  color:rgba(255,255,255,.08);letter-spacing:-.04em;
}

/* ---- footer wave icon strip ---- */
.marquee{ display:flex;gap:38px;width:max-content;align-items:center;animation:scrollx 34s linear infinite;pointer-events:none; }
@keyframes scrollx{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.wave-item{ display:inline-flex;animation:iconwave 2.8s ease-in-out infinite; }
.wave-item img{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
@keyframes iconwave{ 0%,100%{transform:translateY(-16px)} 50%{transform:translateY(16px)} }
@media (prefers-reduced-motion:reduce){ .wave-item,.mem-edge{ animation:none; } }

/* ---- modals ---- */
.modal-mask{ position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(4,5,10,.72);backdrop-filter:blur(6px); }
.modal-card{
  width:100%;max-width:420px;border-radius:22px;padding:34px 30px 30px;position:relative;
  background:linear-gradient(160deg,#141026,#0c1230 70%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(120,120,255,.05) inset;
}
.modal-enter-active,.modal-leave-active{ transition:opacity .28s ease; }
.modal-enter-active .modal-card,.modal-leave-active .modal-card{ transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s; }
.modal-enter-from,.modal-leave-to{ opacity:0; }
.modal-enter-from .modal-card,.modal-leave-to .modal-card{ transform:translateY(26px) scale(.94);opacity:0; }
.fld{ position:relative;margin-bottom:16px; }
.fld input{
  width:100%;border-radius:12px;padding:14px 16px 14px 44px;font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);outline:none;
  transition:border-color .2s,background .2s;
}
.fld input::placeholder{ color:rgba(255,255,255,.4); }
.fld input:focus{ border-color:#8f6bff;background:rgba(255,255,255,.1); }
.fld > i{ position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.45);font-size:15px; }
.fld input:focus + i,.fld input:focus ~ i{ color:#b79bff; }
.modal-x{ position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);transition:background .2s; }
.modal-x:hover{ background:rgba(255,255,255,.2); }

/* nav shrink */
.nav-solid{ background:rgba(8,7,14,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07); }
.logo-hi{ transition:width .3s,height .3s,transform .3s,box-shadow .3s;box-shadow:0 0 0 3px rgba(255,255,255,.12),0 8px 26px -6px rgba(160,40,220,.75);animation:logoGlow 3.2s ease-in-out infinite; }
.logo-hi:hover{ transform:scale(1.06) rotate(-3deg); }
@keyframes logoGlow{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,255,255,.12),0 8px 26px -6px rgba(160,40,220,.75); } 50%{ box-shadow:0 0 0 4px rgba(255,255,255,.2),0 10px 34px -4px rgba(192,38,211,.9); } }
@media (prefers-reduced-motion:reduce){ .logo-hi{ animation:none; } }

/* buttons */
.btn-primary{ background:linear-gradient(95deg,#7b2ff7,#c026d3);box-shadow:0 10px 26px -8px rgba(160,40,220,.7);transition:transform .25s,filter .25s,box-shadow .25s; }
.btn-primary:hover{ transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 34px -8px rgba(160,40,220,.85); }
.btn-lime{ background:linear-gradient(95deg,#9bcf1a,#c3e021);color:#0a2c00;box-shadow:0 12px 28px -8px rgba(150,200,20,.7);transition:transform .25s,filter .25s; }
.btn-lime:hover{ transform:translateY(-2px);filter:brightness(1.05); }
.btn-ghost{ border:1.5px solid rgba(255,255,255,.55);transition:background .25s,transform .25s; }
.btn-ghost:hover{ background:rgba(255,255,255,.15);transform:translateY(-2px); }