:root{
  --bg:#030303;
  --white:#f6f6f6;
  --muted:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.045);
  --shadow:0 30px 90px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Arial,sans-serif;
  background:#030303;
  color:var(--white);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.noise{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed;
  width:380px;
  height:380px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.14;
  background:radial-gradient(circle,rgba(255,255,255,.45),transparent 65%);
  transform:translate(-50%,-50%);
  filter:blur(18px);
}
.topbar{
  position:fixed;
  top:18px;
  left:22px;
  right:22px;
  z-index:50;
  display:grid;
  grid-template-columns:180px 1fr 220px;
  align-items:start;
  gap:18px;
}
.brand{
  width:165px;
  height:86px;
  display:grid;
  place-items:center;
}
.brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.65));
}
.desktop-nav{
  justify-self:center;
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(18,18,20,.78),rgba(5,5,6,.55));
  backdrop-filter:blur(14px);
  box-shadow:0 12px 38px rgba(0,0,0,.28);
}
.desktop-nav a{
  padding:10px 16px;
  border-radius:999px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.desktop-nav a:hover{background:#fff;color:#050505}
.top-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}
.lang,.login{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.lang span{
  width:14px;
  height:10px;
  display:block;
  border-radius:2px;
  background:linear-gradient(#c00 0 30%,#ffd600 30% 70%,#c00 70% 100%);
}
.login{background:#111}
.social-rail{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:45;
  display:grid;
  gap:8px;
  padding:10px 6px;
  border:1px solid rgba(255,255,255,.08);
  border-left:0;
  border-radius:0 16px 16px 0;
  background:rgba(5,5,6,.72);
  backdrop-filter:blur(14px);
}
.social-rail a{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.11);
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.social-rail a:hover{background:#fff;color:#050505}
.social-rail a img{width:18px;height:18px;object-fit:contain;display:block}
.social-rail a:hover img{filter:brightness(0)}

.hero{
  position:relative;
  min-height:115vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.14),transparent 20%),
    radial-gradient(circle at 28% 64%,rgba(255,255,255,.06),transparent 24%),
    linear-gradient(180deg,#060606,#030303 70%);
}
.hero::before,
.server-section::before,
.systems-section::before,
.community-section::before,
.join-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.12) 50%,rgba(0,0,0,.96)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.035) 92px 93px,transparent 93px 184px),
    repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,255,255,.025) 92px 93px,transparent 93px 184px);
  pointer-events:none;
}
.hero-bg{position:absolute;inset:0;z-index:1;opacity:.9}
.city{
  position:absolute;
  bottom:0;
  width:60%;
  height:42%;
  opacity:.34;
  background:
    linear-gradient(180deg,transparent 0 18%,rgba(255,255,255,.05) 18% 20%,transparent 20%),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.07) 38px 42px,transparent 42px 76px);
  clip-path:polygon(0 100%,0 58%,8% 58%,8% 30%,16% 30%,16% 55%,26% 55%,26% 18%,36% 18%,36% 50%,48% 50%,48% 35%,60% 35%,60% 62%,72% 62%,72% 26%,82% 26%,82% 52%,100% 52%,100% 100%);
}
.city-left{left:-5%;filter:blur(1px)}
.city-right{right:-8%;transform:scaleX(-1);filter:blur(2px)}
.ring{
  position:absolute;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  box-shadow:inset 0 0 70px rgba(255,255,255,.04),0 0 80px rgba(255,255,255,.035);
}
.ring-one{width:520px;height:520px;left:12%;top:22%}
.ring-two{width:420px;height:420px;right:14%;bottom:13%}
.beam{
  position:absolute;
  width:45%;
  height:2px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  opacity:.09;
  filter:blur(1px);
}
.beam-one{top:22%;left:18%;transform:rotate(-18deg)}
.beam-two{top:64%;right:12%;transform:rotate(14deg)}
.hero-center{
  position:relative;
  z-index:5;
  width:min(760px,92vw);
  display:grid;
  justify-items:center;
  text-align:center;
}
.hero-logo{
  width:min(430px,78vw);
  max-height:175px;
  object-fit:contain;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.75));
}
.hero h1{
  margin:10px 0 0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(82px,12vw,176px);
  line-height:.78;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 22px 60px rgba(0,0,0,.8);
}
.hero-center p{
  max-width:600px;
  margin:24px 0 0;
  color:rgba(255,255,255,.62);
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.8;
  text-transform:uppercase;
}
.hero-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.btn{
  min-width:205px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:7px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.3px;
  text-transform:uppercase;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{
  background:#fff;
  color:#050505;
  border:1px solid #fff;
  box-shadow:0 14px 42px rgba(255,255,255,.14);
}
.btn.ghost{
  background:rgba(255,255,255,.045);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.scroll-hint{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:42px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.42);
  font-size:9px;
  font-weight:900;
  letter-spacing:5px;
  text-transform:uppercase;
}

.server-section{
  position:relative;
  min-height:125vh;
  display:grid;
  place-items:center;
  align-content:center;
  padding:150px 22px;
  background:
    radial-gradient(circle at 46% 42%,rgba(255,255,255,.10),transparent 26%),
    linear-gradient(180deg,#030303,#0b0b0d 50%,#030303);
  overflow:hidden;
}
.section-head{
  position:relative;
  z-index:2;
  width:min(760px,92vw);
  margin:0 auto 34px;
  text-align:left;
}
.section-head p,
.systems-title p,
.community-card p,
.overline{
  margin:0 0 8px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.section-head h2,
.systems-title h2,
.community-card h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(52px,6vw,90px);
  line-height:.9;
  letter-spacing:2px;
  text-transform:uppercase;
}
.section-head span,
.systems-title span,
.community-card span{
  display:block;
  max-width:620px;
  margin-top:12px;
  color:rgba(255,255,255,.58);
  font-size:14px;
  line-height:1.8;
}
.server-card{
  position:relative;
  z-index:2;
  width:min(500px,92vw);
  padding:26px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.card-top{display:flex;justify-content:space-between;gap:14px}
.card-top h3{margin:0;font-size:14px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.online{
  height:20px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:rgba(255,255,255,.76);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.online i{width:6px;height:6px;border-radius:50%;background:#fff}
.players{margin-top:14px;font-family:"Bebas Neue",Inter,sans-serif;line-height:1}
.players strong{font-size:86px;letter-spacing:2px}
.players small{color:rgba(255,255,255,.45);font-size:18px;font-weight:900}
.bar{
  height:4px;
  margin-top:6px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.bar span{display:block;width:54%;height:100%;background:#fff}
.card-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  color:rgba(255,255,255,.50);
  font-size:10px;
  font-weight:800;
}
.card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:18px;
}
.card-actions a{
  padding:14px 12px;
  border-radius:7px;
  text-align:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.join{background:#fff;color:#050505}
.store{border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.04)}

.systems-section{
  position:relative;
  min-height:105vh;
  display:grid;
  place-items:center;
  padding:140px 22px;
  background:
    radial-gradient(circle at 28% 40%,rgba(255,255,255,.08),transparent 22%),
    radial-gradient(circle at 74% 58%,rgba(255,255,255,.07),transparent 25%),
    #060607;
  overflow:hidden;
}
.systems-wrap{
  position:relative;
  z-index:2;
  width:min(1180px,92vw);
}
.systems-title{margin-bottom:26px}
.system-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.system-grid article{
  min-height:250px;
  padding:26px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.system-grid b{
  display:inline-block;
  margin-bottom:44px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
}
.system-grid h3{
  margin:0;
  font-size:21px;
  font-weight:900;
  text-transform:uppercase;
}
.system-grid p{
  margin:12px 0 0;
  color:rgba(255,255,255,.64);
  line-height:1.7;
}

.community-section{
  position:relative;
  min-height:75vh;
  display:grid;
  place-items:center;
  padding:120px 22px;
  background:#030303;
  overflow:hidden;
}
.community-card{
  position:relative;
  z-index:2;
  width:min(1180px,92vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:36px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.discord-button{
  min-width:210px;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 22px;
  border-radius:7px;
  background:#fff;
  color:#050505;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.footer{
  padding:28px 18px 40px;
  background:#030303;
  text-align:center;
}
.footer p{
  max-width:780px;
  margin:0 auto;
  color:rgba(255,255,255,.46);
  font-size:12px;
  line-height:1.7;
}

/* Página unirse separada */
.join-page{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.12),transparent 22%),
    radial-gradient(circle at 18% 80%,rgba(255,255,255,.055),transparent 26%),
    linear-gradient(180deg,#050505,#09090b 62%,#030303);
  overflow-x:hidden;
}
.join-header{
  position:fixed;
  top:20px;
  left:28px;
  right:28px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.join-logo{
  width:150px;
  height:82px;
  display:grid;
  place-items:center;
}
.join-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.65));
}
.back-home{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  backdrop-filter:blur(14px);
}
.join-main{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:130px 22px 60px;
}
.join-only{
  position:relative;
  z-index:2;
  width:min(1240px,92vw);
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:stretch;
  gap:28px;
}
.join-only::before{
  content:"";
  position:absolute;
  inset:-42px;
  z-index:-1;
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(255,255,255,.035),rgba(0,0,0,.82)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.035) 92px 93px,transparent 93px 184px);
}
.join-left,
.join-panel{
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.join-left{
  min-height:540px;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.join-left h1{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(74px,9vw,128px);
  line-height:.82;
  letter-spacing:2px;
  text-transform:uppercase;
}
.join-left h1 span{color:rgba(255,255,255,.68)}
.join-description{
  max-width:560px;
  margin:24px 0 0;
  color:rgba(255,255,255,.68);
  line-height:1.8;
  font-size:15px;
}
.join-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.join-panel{
  min-height:540px;
  padding:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.join-panel article{
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.23);
}
.join-panel b{
  display:inline-block;
  margin-bottom:18px;
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
}
.join-panel h3{
  margin:0;
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
}
.join-panel p{
  margin:12px 0 0;
  color:rgba(255,255,255,.63);
  line-height:1.7;
  font-size:14px;
}

@media(max-width:1050px){
  .desktop-nav{display:none}
  .topbar{grid-template-columns:150px 1fr}
  .top-actions{justify-self:end}
  .system-grid,
  .join-only{
    grid-template-columns:1fr;
  }
  .community-card{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media(max-width:680px){
  .topbar{left:10px;right:10px;top:10px;grid-template-columns:1fr 1fr}
  .brand{width:125px;height:68px}
  .login{display:none}
  .social-rail{display:none}
  .hero{min-height:105vh}
  .hero h1{font-size:86px}
  .hero-logo{max-width:270px}
  .hero-buttons,
  .card-actions,
  .join-buttons{
    flex-direction:column;
    display:flex;
  }
  .btn,.discord-button{width:100%}
  .server-section{min-height:115vh;padding:120px 14px}
  .systems-section,.community-section{padding:100px 14px}
  .join-header{left:14px;right:14px}
  .join-logo{width:120px;height:68px}
  .join-main{padding-top:110px}
  .join-left,.join-panel,.community-card{padding:20px}
  .join-panel{grid-template-columns:1fr}
}


/* ===== Update visual solicitado ===== */

/* Hero más grande */
.hero{
  min-height:128vh;
}
.hero-center{
  width:min(920px,92vw);
}
.hero-logo{
  width:min(520px,82vw);
  max-height:210px;
  margin-bottom:8px;
}
.hero h1{
  font-size:clamp(112px,16vw,240px);
  letter-spacing:5px;
}
.hero-center p{
  max-width:760px;
  font-size:15px;
}
.hero-buttons{
  margin-top:34px;
}

/* Bloque servidor más grande y más junto */
.server-section{
  min-height:110vh;
  padding:120px 22px 110px;
}
.section-head{
  width:min(620px,92vw);
  margin:0 auto 16px;
}
.section-head h2{
  font-size:clamp(68px,8vw,118px);
}
.server-card{
  width:min(620px,92vw);
  padding:30px;
}
.card-top h3{
  font-size:16px;
}
.players strong{
  font-size:112px;
}
.players small{
  font-size:22px;
}
.bar{
  margin-top:10px;
}
.card-meta{
  font-size:11px;
}
.card-actions a{
  padding:16px 12px;
  font-size:12px;
}

/* Sección nueva inspirada en los bloques amarillos */
.promos-section{
  position:relative;
  min-height:130vh;
  display:grid;
  place-items:center;
  padding:120px 22px;
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.07),transparent 24%),
    radial-gradient(circle at 72% 70%,rgba(255,255,255,.06),transparent 26%),
    linear-gradient(180deg,#070708,#030303);
  overflow:hidden;
}
.promos-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.12) 50%,rgba(0,0,0,.96)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.035) 92px 93px,transparent 93px 184px),
    repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,255,255,.025) 92px 93px,transparent 93px 184px);
  pointer-events:none;
}
.promos-wrap{
  position:relative;
  z-index:2;
  width:min(1280px,92vw);
}
.promos-head{
  margin-bottom:30px;
}
.promos-head p{
  margin:0 0 8px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.promos-head h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(58px,7vw,108px);
  line-height:.9;
  letter-spacing:2px;
  text-transform:uppercase;
}
.promos-head span{
  display:block;
  max-width:760px;
  margin-top:12px;
  color:rgba(255,255,255,.58);
  font-size:14px;
  line-height:1.8;
}
.promo-stack{
  display:grid;
  gap:22px;
}
.promo-card{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  padding:40px 46px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.08));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.promo-card::before{
  content:"";
  position:absolute;
  inset:auto -8% -32px auto;
  width:54%;
  height:92px;
  background:rgba(255,255,255,.04);
  transform:rotate(-4deg);
  border-radius:16px 0 0 0;
}
.promo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),transparent 30%),
    repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.025) 86px 87px,transparent 87px 172px);
  pointer-events:none;
}
.promo-copy{
  position:relative;
  z-index:2;
  max-width:760px;
}
.promo-copy p{
  margin:0 0 12px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.promo-copy h3{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(46px,6vw,78px);
  line-height:.92;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.promo-copy span{
  display:block;
  max-width:640px;
  margin-top:14px;
  color:rgba(255,255,255,.62);
  line-height:1.8;
  font-size:15px;
}
.promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:214px;
  min-height:50px;
  margin-top:24px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:#fff;
  color:#050505;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(255,255,255,.10);
}
.promo-btn:hover{
  transform:translateY(-2px);
}
.promo-banda .promo-card,
.promo-negocio .promo-card{
  min-height:240px;
}
.promo-streamer{
  min-height:250px;
}
.promo-banda{
  min-height:250px;
}
.promo-negocio{
  min-height:250px;
}

/* Menos altura en comunidad para que cierre bien */
.community-section{
  min-height:60vh;
}

@media(max-width:900px){
  .hero{
    min-height:118vh;
  }
  .hero h1{
    font-size:clamp(90px,18vw,154px);
  }
  .server-card{
    width:min(560px,92vw);
  }
  .players strong{
    font-size:96px;
  }
  .promo-card{
    padding:28px 24px;
    min-height:220px;
  }
  .promo-copy h3{
    font-size:clamp(38px,10vw,60px);
  }
}

@media(max-width:680px){
  .hero-logo{
    width:min(320px,82vw);
    max-height:130px;
  }
  .hero h1{
    font-size:92px;
  }
  .section-head h2{
    font-size:72px;
  }
  .server-card{
    padding:22px;
  }
  .players strong{
    font-size:84px;
  }
  .promos-section{
    padding:90px 14px;
    min-height:auto;
  }
  .promo-card{
    min-height:auto;
    padding:24px 20px;
  }
  .promo-btn{
    width:100%;
  }
}


/* ===== Ajuste pedido por el usuario ===== */

/* Barra superior más pegada, centrada y ajustada */
.topbar{
  top:10px;
  left:20px;
  right:20px;
  grid-template-columns:180px 1fr 200px;
  align-items:center;
}
.desktop-nav{
  gap:6px;
  padding:5px;
  min-width:328px;
}
.desktop-nav a{
  padding:11px 18px;
  font-size:12px;
  white-space:nowrap;
}
.top-actions{
  gap:6px;
}

/* Sección del servidor más grande y más unida */
.server-section{
  min-height:122vh;
  padding:110px 22px 110px;
}
.section-head{
  width:min(760px,92vw);
  margin:0 auto 10px;
}
.section-head h2{
  font-size:clamp(74px,9vw,128px);
}
.section-head span{
  max-width:700px;
}
.server-card{
  width:min(640px,92vw);
  padding:30px;
}
.players strong{
  font-size:118px;
}
.players small{
  font-size:24px;
}
.card-actions a{
  padding:17px 14px;
  font-size:12px;
}

/* Bloques inferiores más largos y más anchos */
.promos-section{
  min-height:148vh;
  padding:90px 22px 130px;
}
.promos-wrap{
  width:min(1360px,94vw);
}
.promos-head{
  margin-bottom:34px;
}
.promo-stack{
  gap:26px;
}
.promo-card{
  min-height:310px;
  padding:46px 48px;
}
.promo-card::before{
  width:58%;
  height:100px;
}
.promo-copy{
  max-width:880px;
}
.promo-copy h3{
  font-size:clamp(54px,7vw,88px);
}
.promo-copy span{
  max-width:740px;
  font-size:15px;
}
.promo-btn{
  min-width:230px;
  min-height:54px;
}

/* Sección tienda en lugar de discord */
.store-section{
  position:relative;
  min-height:88vh;
  display:grid;
  place-items:center;
  padding:80px 22px 120px;
  background:#030303;
  overflow:hidden;
}
.store-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.12) 50%,rgba(0,0,0,.96)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.035) 92px 93px,transparent 93px 184px),
    repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,255,255,.025) 92px 93px,transparent 93px 184px);
  pointer-events:none;
}
.store-card{
  position:relative;
  z-index:2;
  width:min(1360px,94vw);
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.store-copy p{
  margin:0 0 8px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.store-copy h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(60px,7vw,104px);
  line-height:.9;
  letter-spacing:2px;
  text-transform:uppercase;
}
.store-copy span{
  display:block;
  max-width:860px;
  margin-top:14px;
  color:rgba(255,255,255,.60);
  font-size:14px;
  line-height:1.8;
}
.store-button{
  min-width:220px;
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:8px;
  background:#fff;
  color:#050505;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(255,255,255,.10);
}

/* El footer con menos espacio para que todo quede más limpio */
.footer{
  padding-top:12px;
}

/* Responsive */
@media(max-width:1050px){
  .topbar{
    top:10px;
    left:12px;
    right:12px;
  }
  .server-section{
    min-height:112vh;
  }
  .promos-section{
    min-height:auto;
    padding-bottom:110px;
  }
  .promo-card{
    min-height:260px;
  }
  .store-card{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media(max-width:680px){
  .topbar{
    left:10px;
    right:10px;
  }
  .section-head h2{
    font-size:74px;
  }
  .server-card{
    width:min(100%,94vw);
    padding:22px;
  }
  .players strong{
    font-size:88px;
  }
  .promos-wrap,
  .store-card{
    width:min(100%,94vw);
  }
  .promo-card{
    padding:28px 20px;
    min-height:auto;
  }
  .promo-copy h3{
    font-size:56px;
  }
  .store-section{
    min-height:auto;
    padding:70px 14px 90px;
  }
  .store-card{
    padding:24px;
  }
  .store-copy h2{
    font-size:62px;
  }
  .store-button{
    width:100%;
  }
}


/* ===== Último ajuste: servidor largo + tienda más profesional ===== */

.server-section{
  min-height:110vh;
  display:grid;
  place-items:center;
  padding:95px 22px 110px;
}
.server-panel{
  position:relative;
  z-index:2;
  width:min(1360px,94vw);
  min-height:420px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:34px;
  align-items:stretch;
  padding:42px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.server-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.015),transparent 28%),
    repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.025) 86px 87px,transparent 87px 172px);
  pointer-events:none;
}
.server-intro{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
  padding-right:20px;
}
.server-intro p{
  margin:0 0 10px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.server-intro h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(86px,10vw,152px);
  line-height:.88;
  letter-spacing:2px;
  text-transform:uppercase;
}
.server-intro span{
  display:block;
  max-width:720px;
  margin-top:14px;
  color:rgba(255,255,255,.60);
  font-size:15px;
  line-height:1.85;
}
.server-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.server-pills span{
  margin:0;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.server-card{
  width:100%;
  max-width:none;
  align-self:center;
  padding:30px;
  border-radius:16px;
}
.players strong{
  font-size:120px;
}
.players small{
  font-size:24px;
}
.card-actions{
  margin-top:20px;
}
.card-actions a{
  padding:17px 14px;
  font-size:12px;
}

/* Tienda más profesional */
.store-section{
  min-height:105vh;
  padding:90px 22px 120px;
}
.store-layout{
  position:relative;
  z-index:2;
  width:min(1360px,94vw);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:stretch;
}
.store-main,
.store-side{
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.store-main{
  position:relative;
  overflow:hidden;
  padding:42px;
  min-height:380px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.store-main::before{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-34px;
  width:55%;
  height:110px;
  background:rgba(255,255,255,.04);
  transform:rotate(-4deg);
  border-radius:18px 0 0 0;
}
.store-main::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),transparent 34%),
    repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.025) 86px 87px,transparent 87px 172px);
  pointer-events:none;
}
.store-copy,
.store-tags,
.store-actions{
  position:relative;
  z-index:2;
}
.store-copy p{
  margin:0 0 10px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.store-copy h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(82px,9vw,140px);
  line-height:.88;
  letter-spacing:2px;
  text-transform:uppercase;
}
.store-copy span{
  display:block;
  max-width:760px;
  margin-top:16px;
  color:rgba(255,255,255,.60);
  font-size:15px;
  line-height:1.85;
}
.store-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.store-tags span{
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.store-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.store-button,
.store-outline{
  min-width:220px;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.store-button{
  background:#fff;
  color:#050505;
  box-shadow:0 10px 30px rgba(255,255,255,.10);
}
.store-outline{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#fff;
}
.store-side{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:18px;
  min-height:380px;
}
.mini-store-card{
  padding:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.20);
}
.mini-store-card b{
  display:inline-block;
  margin-bottom:16px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
}
.mini-store-card h3{
  margin:0;
  font-size:22px;
  font-weight:900;
  text-transform:uppercase;
}
.mini-store-card p{
  margin:12px 0 0;
  color:rgba(255,255,255,.60);
  line-height:1.75;
  font-size:14px;
}

/* Evitar que reglas viejas limiten demasiado */
.store-card{
  width:min(1360px,94vw);
}

@media(max-width:1100px){
  .server-panel,
  .store-layout{
    grid-template-columns:1fr;
  }
  .server-intro{
    padding-right:0;
  }
  .server-intro h2{
    font-size:clamp(74px,13vw,118px);
  }
  .store-copy h2{
    font-size:clamp(70px,12vw,118px);
  }
}

@media(max-width:680px){
  .server-section,
  .store-section{
    padding-left:14px;
    padding-right:14px;
  }
  .server-panel,
  .store-main,
  .store-side{
    padding:22px;
  }
  .server-panel{
    width:min(100%,94vw);
    gap:20px;
  }
  .server-intro h2{
    font-size:74px;
  }
  .players strong{
    font-size:88px;
  }
  .store-layout{
    width:min(100%,94vw);
  }
  .store-copy h2{
    font-size:70px;
  }
  .mini-store-card h3{
    font-size:20px;
  }
}


/* ===== Ajuste servidor: título arriba, bloque largo abajo ===== */
.server-section{
  min-height:110vh;
  padding:95px 22px 120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.server-head{
  position:relative;
  z-index:2;
  width:min(1080px,92vw);
  margin:0 auto 26px;
  text-align:center;
}

.server-head p{
  margin:0 0 10px;
}

.server-head h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(86px,10vw,150px);
  line-height:.88;
  letter-spacing:2px;
  text-transform:uppercase;
}

.server-head span{
  display:block;
  max-width:820px;
  margin:14px auto 0;
  color:rgba(255,255,255,.60);
  font-size:15px;
  line-height:1.85;
}

.server-pills-top{
  justify-content:center;
  margin-top:22px;
}

.server-card-wide{
  position:relative;
  z-index:2;
  width:min(1280px,94vw);
  max-width:none;
  min-height:300px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  align-items:center;
  padding:34px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.server-card-wide::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018),transparent 30%),
    repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.025) 86px 87px,transparent 87px 172px);
  pointer-events:none;
}

.server-card-left,
.server-card-right{
  position:relative;
  z-index:2;
}

.server-card-left{
  padding-right:10px;
}

.server-card-right{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.10);
}

.access-copy p{
  margin:0 0 10px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}

.access-copy span{
  display:block;
  max-width:440px;
  color:rgba(255,255,255,.60);
  font-size:15px;
  line-height:1.8;
}

.card-actions-vertical{
  grid-template-columns:1fr;
  gap:10px;
  margin-top:4px;
}

.card-actions-vertical a{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.server-card-wide .players strong{
  font-size:118px;
}

.server-card-wide .players small{
  font-size:24px;
}

.server-card-wide .bar{
  margin-top:10px;
}

.server-card-wide .card-meta{
  font-size:11px;
}

@media(max-width:1100px){
  .server-card-wide{
    grid-template-columns:1fr;
    gap:22px;
  }

  .server-card-right{
    padding-left:0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:22px;
  }

  .card-actions-vertical{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:680px){
  .server-head h2{
    font-size:74px;
  }

  .server-card-wide{
    width:min(100%,94vw);
    padding:22px;
    min-height:auto;
  }

  .server-card-wide .players strong{
    font-size:88px;
  }

  .card-actions-vertical{
    grid-template-columns:1fr;
  }

  .access-copy span{
    font-size:14px;
  }
}


/* ===== Información más profesional ===== */

#informacion,
#servidor,
#tienda,
#inicio{
  scroll-margin-top: 96px;
}

.promo-pro-section{
  min-height:auto;
  padding:120px 22px 120px;
}

.promo-pro-head{
  margin-bottom:38px;
}

.promo-pro-head h2{
  font-size:clamp(52px,6.2vw,96px);
  line-height:.92;
  max-width:980px;
}

.promo-pro-head span{
  max-width:860px;
}

.promo-pro-stack{
  gap:20px;
}

.promo-pro-card{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:stretch;
  min-height:320px;
  padding:28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    linear-gradient(135deg,rgba(255,255,255,.03),transparent 55%);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.promo-pro-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),transparent 28%),
    repeating-linear-gradient(90deg,transparent 0 88px,rgba(255,255,255,.024) 88px 89px,transparent 89px 176px);
  pointer-events:none;
}

.promo-pro-card::after{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-34px;
  width:44%;
  height:100px;
  background:rgba(255,255,255,.035);
  transform:rotate(-4deg);
  border-radius:18px 0 0 0;
  pointer-events:none;
}

.promo-pro-left,
.promo-pro-right{
  position:relative;
  z-index:2;
}

.promo-pro-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px 4px 6px 2px;
}

.promo-pro-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.promo-pro-kicker b{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
}

.promo-pro-kicker span{
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}

.promo-pro-left h3{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(44px,5vw,74px);
  line-height:.92;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.promo-pro-left p{
  max-width:680px;
  margin:16px 0 0;
  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.85;
}

.promo-points{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.promo-points li{
  position:relative;
  padding-left:18px;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.7;
}

.promo-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.35);
}

.promo-pro-left .promo-btn{
  align-self:flex-start;
  margin-top:24px;
  min-width:210px;
  min-height:52px;
  border-radius:10px;
}

.promo-pro-right{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-content:center;
}

.promo-side-box{
  min-height:84px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.18);
}

.promo-side-box small{
  display:block;
  color:rgba(255,255,255,.48);
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.promo-side-box strong{
  display:block;
  margin-top:10px;
  color:#fff;
  font-size:24px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .promo-pro-card{
    grid-template-columns:1fr;
  }

  .promo-pro-right{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:740px){
  .promo-pro-section{
    padding:90px 14px;
  }

  .promo-pro-head h2{
    font-size:64px;
  }

  .promo-pro-card{
    padding:20px;
    min-height:auto;
  }

  .promo-pro-left h3{
    font-size:52px;
  }

  .promo-pro-right{
    grid-template-columns:1fr;
  }

  .promo-pro-left .promo-btn{
    width:100%;
  }
}


/* ===== Flujo de información / guía ===== */
:root{
  --accent:#ffd21c;
  --accent-dark:#0f0f10;
}

.info-flow-page{
  background:
    linear-gradient(180deg,#050505,#020202 72%);
}

.info-flow-page .topbar{
  align-items:center;
}

.info-flow-page .desktop-nav a:hover,
.info-flow-page .desktop-nav a[aria-current="page"]{
  background:var(--accent);
  color:#050505;
}

.info-gate-page,
.guide-page{
  position:relative;
  min-height:100vh;
  padding-top:110px;
}

.info-gate-page::before,
.guide-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.16) 50%,rgba(0,0,0,.96)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.028) 92px 93px,transparent 93px 184px),
    repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,255,255,.018) 92px 93px,transparent 93px 184px);
  pointer-events:none;
}

.info-gate-hero{
  position:relative;
  min-height:calc(100vh - 110px);
  display:grid;
  place-items:center;
  padding:40px 18px 70px;
}

.info-band{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:190px;
  background:
    linear-gradient(180deg,rgba(255,210,28,.18),rgba(255,210,28,.08)),
    linear-gradient(120deg,rgba(255,255,255,.05),transparent 60%);
  clip-path:polygon(0 0,100% 0,100% 72%,0 100%);
  border-bottom:1px solid rgba(255,210,28,.18);
}

.info-gate-panel{
  position:relative;
  z-index:2;
  width:min(760px,92vw);
  padding:44px 34px 34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 0%,rgba(255,210,28,.08),transparent 36%);
  box-shadow:0 32px 90px rgba(0,0,0,.6);
  text-align:center;
}

.info-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 14px;
  border:1px solid rgba(255,210,28,.35);
  border-radius:999px;
  background:rgba(255,210,28,.08);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:2.3px;
  text-transform:uppercase;
}

.info-gate-panel h1{
  margin:18px 0 0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(58px,8vw,112px);
  line-height:.88;
  letter-spacing:2px;
  text-transform:uppercase;
}

.info-gate-panel p{
  max-width:640px;
  margin:18px auto 0;
  color:rgba(255,255,255,.70);
  font-size:16px;
  line-height:1.85;
}

.gate-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}

.gate-point{
  min-height:140px;
  padding:18px 16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(0,0,0,.18);
  text-align:left;
}

.gate-point strong{
  display:block;
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
}

.gate-point span{
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,.60);
  font-size:14px;
  line-height:1.7;
}

.gate-actions,
.guide-cta-row,
.guide-footer-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.gate-actions{
  margin-top:26px;
}

.accent-btn,
.ghost-btn{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:.25s ease;
}

.accent-btn{
  background:var(--accent);
  color:#050505;
  border:1px solid rgba(255,210,28,.55);
  box-shadow:0 14px 30px rgba(255,210,28,.14);
}

.accent-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 34px rgba(255,210,28,.18);
}

.ghost-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
}

.ghost-btn:hover{
  background:#fff;
  color:#050505;
}

.guide-hero{
  position:relative;
  min-height:440px;
  padding:46px 22px 80px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.guide-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,210,28,.12),transparent 22%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%);
  pointer-events:none;
}

.guide-hero-inner{
  position:relative;
  z-index:2;
  width:min(840px,92vw);
  text-align:center;
}

.guide-hero h1{
  margin:18px 0 0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(72px,9vw,140px);
  line-height:.88;
  letter-spacing:2px;
  text-transform:uppercase;
}

.guide-hero p{
  max-width:760px;
  margin:16px auto 0;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.85;
}

.guide-cta-row{
  margin-top:26px;
}

.slanted-divider{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:160px;
  background:
    linear-gradient(180deg,rgba(255,210,28,.07),transparent 15%),
    linear-gradient(180deg,#000,#000);
  clip-path:polygon(0 42%,100% 0,100% 100%,0 100%);
  border-top:1px solid rgba(255,210,28,.16);
}

.guide-format{
  position:relative;
  z-index:2;
  width:min(980px,92vw);
  margin:-40px auto 0;
  padding:20px 0 10px;
  text-align:center;
}

.format-icons{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.format-card{
  min-width:130px;
  padding:20px 14px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.format-icon{
  width:72px;
  height:72px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,210,28,.26);
  border-radius:18px;
  background:rgba(255,210,28,.06);
  color:var(--accent);
  font-size:16px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.format-card span{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.format-copy{
  max-width:760px;
  margin:22px auto 0;
  color:rgba(255,255,255,.68);
  font-size:15px;
  line-height:1.85;
}

.format-copy strong{
  color:var(--accent);
}

.guide-content{
  position:relative;
  z-index:2;
  width:min(980px,92vw);
  margin:42px auto 110px;
  padding:0 0 40px;
}

.guide-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:18px;
}

.section-line{
  flex:1;
  max-width:220px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}

.guide-title h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(40px,4vw,68px);
  line-height:.95;
  letter-spacing:2px;
  text-transform:uppercase;
}

.guide-notice{
  margin:0 auto 28px;
  max-width:820px;
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.8;
}

.guide-notice strong{
  color:var(--accent);
}

.guide-block{
  margin-top:26px;
  padding:28px 28px 24px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
}

.guide-block h3{
  margin:0 0 18px;
  color:var(--accent);
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1;
  letter-spacing:2px;
  text-transform:uppercase;
}

.guide-block p,
.guide-block li{
  color:rgba(255,255,255,.74);
  font-size:15px;
  line-height:1.85;
}

.guide-block ul{
  margin:14px 0 0;
  padding-left:18px;
}

.guide-footer-actions{
  margin-top:36px;
}

@media(max-width:980px){
  .gate-points{
    grid-template-columns:1fr;
  }

  .guide-title{
    gap:10px;
  }

  .section-line{
    max-width:90px;
  }
}

@media(max-width:720px){
  .info-gate-panel{
    padding:34px 20px 22px;
  }

  .info-gate-panel h1{
    font-size:64px;
  }

  .guide-hero h1{
    font-size:76px;
  }

  .guide-block{
    padding:22px 18px 18px;
  }

  .guide-title h2{
    font-size:42px;
  }

  .accent-btn,
  .ghost-btn{
    width:100%;
  }
}


/* ===== Selector de información ===== */
.selector-main{
  position:relative;
  min-height:100vh;
  padding:128px 22px 90px;
}
.selector-main::before,
.app-page main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.18) 50%,rgba(0,0,0,.96)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.028) 92px 93px,transparent 93px 184px),
    repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,255,255,.018) 92px 93px,transparent 93px 184px);
  pointer-events:none;
}
.selector-hero,
.app-page main{
  position:relative;
  z-index:1;
}
.selector-head{
  width:min(1000px,92vw);
  margin:0 auto 28px;
  text-align:left;
}
.selector-head h1{
  margin:16px 0 0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(62px,7.8vw,122px);
  line-height:.88;
  letter-spacing:2px;
  text-transform:uppercase;
}
.selector-head p{
  max-width:760px;
  margin:12px 0 0;
  color:rgba(255,255,255,.68);
  font-size:15px;
  line-height:1.9;
}
.selector-stack{
  width:min(1000px,92vw);
  margin:0 auto;
  display:grid;
  gap:20px;
}
.selector-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  padding:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  box-shadow:0 30px 90px rgba(0,0,0,.4);
}
.selector-card.disabled{
  opacity:.88;
}
.selector-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.selector-kicker b{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  font-size:14px;
}
.selector-kicker span{
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.selector-left h2{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(42px,4.6vw,72px);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:1px;
}
.selector-left p{
  margin:14px 0 0;
  color:rgba(255,255,255,.68);
  font-size:15px;
  line-height:1.85;
}
.selector-left ul{
  margin:18px 0 0;
  padding-left:18px;
}
.selector-left li{
  color:rgba(255,255,255,.8);
  font-size:14px;
  line-height:1.9;
}
.selector-left .promo-btn,
.static-btn{
  margin-top:18px;
}
.selector-right{
  display:grid;
  gap:16px;
  align-content:start;
}
.selector-box{
  min-height:120px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.selector-box small{
  display:block;
  color:rgba(255,255,255,.5);
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
}
.selector-box strong{
  display:block;
  margin-top:12px;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:38px;
  line-height:.95;
  text-transform:uppercase;
}
.promo-btn-disabled,
.static-btn{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.6)!important;
  cursor:not-allowed;
}

/* ===== Guías de negocios / bandas ===== */
.app-page main{
  min-height:100vh;
  position:relative;
}
.app-hero{
  position:relative;
  min-height:240px;
  padding-top:36px;
  overflow:hidden;
}
.app-hero-band{
  position:absolute;
  inset:0 0 auto 0;
  height:170px;
  background:
    linear-gradient(90deg,rgba(255,210,28,.12),rgba(255,210,28,.04)),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border-bottom:1px solid rgba(255,210,28,.2);
}
.app-slant{
  position:absolute;
  left:0; right:0; bottom:0;
  height:130px;
  background:#000;
  clip-path:polygon(0 55%,100% 15%,100% 100%,0 100%);
}
.app-hero-content{
  position:relative;
  z-index:2;
  width:min(760px,92vw);
  margin:0 auto;
  padding-top:18px;
  text-align:center;
}
.warn-chip{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.hero-warning{
  max-width:680px;
  margin:12px auto 18px;
  font-size:14px;
  line-height:1.75;
  color:rgba(255,255,255,.78);
}
.hero-warning strong,
.guide-notice strong,
.app-note strong,
.app-guide-block strong{
  color:#ff4d4d;
}
.app-format-strip,
.app-note,
.app-guide,
.app-submit{
  position:relative;
  z-index:2;
}
.app-format-strip{
  width:min(960px,92vw);
  margin:0 auto;
  padding:10px 0 0;
  text-align:center;
}
.format-icons.compact .format-card{
  min-width:110px;
  padding:16px 12px 12px;
}
.format-copy.compact{
  max-width:760px;
  margin-top:18px;
  font-size:14px;
}
.format-copy.compact strong,
.app-guide-block h3,
.submit-title h2{
  color:#ffd21c;
}
.app-note{
  width:min(760px,92vw);
  margin:26px auto 0;
  text-align:center;
}
.app-note-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}
.app-note p{
  margin:18px auto;
  max-width:760px;
  color:rgba(255,255,255,.76);
  font-size:14px;
  line-height:1.9;
}
.app-guide{
  width:min(760px,92vw);
  margin:28px auto 0;
}
.guide-title.big h2,
.submit-title h2{
  font-size:clamp(34px,4vw,58px);
}
.guide-notice.narrow{
  max-width:760px;
  font-size:13px;
}
.app-guide-list{
  margin-top:20px;
}
.app-guide-block{
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.app-guide-block:last-child{
  border-bottom:1px solid rgba(255,255,255,.14);
}
.app-guide-block h3{
  margin:0 0 14px;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(24px,3vw,40px);
  line-height:1;
  letter-spacing:2px;
  text-transform:uppercase;
}
.app-guide-block p{
  margin:0 0 12px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.85;
}
.app-submit{
  width:min(760px,92vw);
  margin:30px auto 90px;
  text-align:center;
}
.app-submit p{
  max-width:640px;
  margin:8px auto 0;
  color:rgba(255,255,255,.75);
  font-size:14px;
  line-height:1.85;
}
.upload-icon{
  width:88px;
  height:88px;
  margin:28px auto 0;
  display:grid;
  place-items:center;
  font-size:58px;
  color:#fff;
}
.submit-discord-btn{
  min-width:180px;
  min-height:48px;
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border-radius:999px;
  background:linear-gradient(180deg,#7d88ff,#6774ff);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.minimal-topbar .desktop-nav{background:rgba(10,10,10,.92)}

@media(max-width:960px){
  .selector-card{grid-template-columns:1fr}
  .selector-right{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .selector-main{padding-top:110px}
  .selector-head h1{font-size:66px}
  .selector-card{padding:22px}
  .selector-right{grid-template-columns:1fr}
  .selector-box{min-height:90px}
  .app-hero{min-height:220px}
  .app-hero-band{height:150px}
}


/* ===== Login Discord / FiveM style ===== */
.auth-actions-top{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(18,18,20,.78),rgba(5,5,6,.55));
  backdrop-filter:blur(14px);
}

.fivem-login,
.discord-login{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
}

.fivem-login{
  color:rgba(255,255,255,.72);
}

.discord-login{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
}

.discord-login:hover,
.fivem-login:hover{
  background:#fff;
  color:#050505;
}

.discord-mark{
  width:17px;
  height:17px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:#5865F2;
  color:#fff;
  font-size:8px;
  box-shadow:0 0 18px rgba(88,101,242,.35);
}

.discord-login.logged-in{
  border-color:rgba(88,101,242,.45);
  background:rgba(88,101,242,.14);
}

.discord-login.logged-in .discord-mark{
  background:#28d17c;
  box-shadow:0 0 18px rgba(40,209,124,.35);
}

.auth-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 42%,rgba(88,101,242,.12),transparent 22%),
    linear-gradient(180deg,#050505,#020202);
  color:#fff;
}

.auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
}

.auth-card{
  width:min(560px,92vw);
  padding:38px 30px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  text-align:center;
}

.auth-card img{
  width:120px;
  height:70px;
  margin:0 auto 20px;
  object-fit:contain;
}

.auth-card p{
  margin:0 0 8px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}

.auth-card h1{
  margin:0;
  font-family:"Bebas Neue",Inter,sans-serif;
  font-size:clamp(56px,7vw,92px);
  line-height:.9;
  text-transform:uppercase;
}

.auth-card span{
  display:block;
  max-width:460px;
  margin:18px auto 0;
  color:rgba(255,255,255,.68);
  line-height:1.8;
}

.auth-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:28px;
}

@media(max-width:850px){
  .auth-actions-top{
    justify-self:end;
  }
  .fivem-login{
    display:none;
  }
}

@media(max-width:680px){
  .auth-actions-top{
    padding:4px;
  }
  .discord-login{
    padding:0 10px;
  }
}


/* ===== FiveM status real ===== */
.online.is-offline{
  color:rgba(255,255,255,.62);
}
.online.is-offline i{
  background:#ff4d4d;
  box-shadow:0 0 12px rgba(255,77,77,.35);
}
.fivem-login{
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.fivem-login:hover{
  transform:translateY(-1px);
}
.server-card-wide .join[data-fivem-connect]{
  cursor:pointer;
}


/* Ajuste solicitado: quitar etiquetas y barra dinámica */
.server-pills-top{
  display:none !important;
}

.bar span{
  transition:width .45s ease;
}

.players small{
  margin-left:4px;
}

/* =========================================================
   TIENDA TEBEX PRO - LaLife RP
   ========================================================= */
.store-section.tebex-section {
  min-height: 100vh !important;
  width: 100% !important;
  padding: 130px 24px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.store-section.tebex-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 23% 26%, rgba(255,255,255,.085), transparent 29%),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
  pointer-events: none;
}

.tebex-clean-wrap {
  width: min(1480px, 94vw) !important;
  position: relative !important;
  z-index: 2 !important;
}

.tebex-clean-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 640px !important;
  padding: 56px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.025)),
    rgba(0,0,0,.57) !important;
  box-shadow:
    0 40px 110px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px !important;
  gap: 42px !important;
  align-items: center !important;
}

.tebex-clean-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 42%, rgba(255,255,255,.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 130px);
  pointer-events: none;
}

.tebex-clean-card::after {
  content: "COMING SOON";
  position: absolute;
  right: -60px;
  bottom: 34px;
  font-size: clamp(72px, 8vw, 145px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 10px;
  color: rgba(255,255,255,.035);
  transform: rotate(-6deg);
  pointer-events: none;
  white-space: nowrap;
}

.tebex-clean-bg {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -180px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  filter: blur(65px);
  pointer-events: none;
}

.tebex-clean-left,
.tebex-clean-panel {
  position: relative !important;
  z-index: 2 !important;
}

.tebex-status {
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.94) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.45px !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.tebex-status span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 18px rgba(255,255,255,.9) !important;
}

.tebex-kicker {
  margin: 42px 0 14px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.tebex-clean-card h2 {
  margin: 0 !important;
  font-family: "Bebas Neue", Inter, sans-serif !important;
  color: #fff !important;
  font-size: clamp(106px, 10vw, 178px) !important;
  line-height: .80 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-shadow: 0 20px 42px rgba(0,0,0,.46) !important;
}

.tebex-description {
  max-width: 820px !important;
  margin: 30px 0 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.tebex-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 32px !important;
}

.tebex-points span {
  padding: 11px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
}

.tebex-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 38px !important;
}

.tebex-btn {
  min-width: 238px !important;
  min-height: 62px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 1.35px !important;
  text-transform: uppercase !important;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}

.tebex-btn:not(.tebex-secondary) {
  background: #fff !important;
  color: #050505 !important;
  box-shadow: 0 18px 48px rgba(255,255,255,.14) !important;
}

.tebex-btn.tebex-secondary {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  background: rgba(255,255,255,.055) !important;
}

.tebex-btn:hover {
  transform: translateY(-3px) !important;
}

.tebex-btn.tebex-disabled {
  opacity: .78 !important;
  cursor: not-allowed !important;
}

.tebex-btn.tebex-disabled:hover {
  transform: none !important;
}

.tebex-clean-panel {
  min-height: 410px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
    rgba(0,0,0,.46) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.panel-line {
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.60), rgba(255,255,255,.05));
}

.tebex-clean-panel p {
  margin: 0 0 10px !important;
  color: rgba(255,255,255,.60) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.tebex-clean-panel h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 42px !important;
  line-height: .96 !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
}

.tebex-clean-panel > span {
  display: block !important;
  margin-top: 16px !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.store-progress {
  margin-top: 34px !important;
}

.store-progress-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.store-progress small,
.store-mini-grid small {
  color: rgba(255,255,255,.50) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}

.store-progress-bar {
  height: 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.store-progress-bar i {
  display: block !important;
  width: 62% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(255,255,255,.45), #fff) !important;
  box-shadow: 0 0 20px rgba(255,255,255,.25) !important;
}

.store-mini-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.store-mini-grid div {
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
}

.store-mini-grid strong {
  display: block !important;
  margin-top: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

@media(max-width: 1080px) {
  .tebex-clean-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 42px !important;
  }

  .tebex-clean-panel {
    min-height: 320px !important;
  }
}

@media(max-width: 620px) {
  .store-section.tebex-section {
    padding: 90px 14px !important;
  }

  .tebex-clean-card,
  .tebex-clean-panel {
    padding: 26px !important;
  }

  .tebex-clean-card h2 {
    font-size: 82px !important;
  }

  .tebex-btn {
    width: 100% !important;
  }

  .store-mini-grid {
    grid-template-columns: 1fr !important;
  }
}