:root{
  --bg:#03070d;
  --white:#f4f7fb;
  --yellow:#ffbd00;
  --yellow2:#ffcf36;
  --blue2:#008cff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#03060d 0%,#06111f 55%,#03060d 100%);
  background-attachment:fixed;
  min-height:100vh;
  color:var(--white);
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  letter-spacing:1px;
}

/* ===== FONDO GALAXIA: estrellas estáticas (muy ligeras) ===== */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(1.8px 1.8px at 22px 32px,   rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1.2px 1.2px at 96px 18px,   rgba(255,255,255,.60), transparent 55%),
    radial-gradient(2.2px 2.2px at 150px 140px, rgba(180,220,255,.80), transparent 55%),
    radial-gradient(1px   1px   at 44px 110px,  rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 190px 64px,  rgba(255,255,255,.90), transparent 55%),
    radial-gradient(1px   1px   at 250px 160px, rgba(255,255,255,.40), transparent 55%),
    radial-gradient(1.5px 1.5px at 30px 220px,  rgba(255,220,150,.70), transparent 55%),
    radial-gradient(1px   1px   at 300px 250px, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1.3px 1.3px at 120px 40px,  rgba(255,255,255,.70), transparent 55%),
    radial-gradient(1px   1px   at 210px 130px, rgba(150,200,255,.50), transparent 55%),
    radial-gradient(1.6px 1.6px at 60px 180px,  rgba(255,255,255,.80), transparent 55%),
    radial-gradient(1px   1px   at 170px 90px,  rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1.2px 1.2px at 280px 60px,  rgba(255,255,255,.60), transparent 55%),
    radial-gradient(1.9px 1.9px at 100px 240px, rgba(255,200,120,.55), transparent 55%),
    radial-gradient(1px   1px   at 230px 200px, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.1px 1.1px at 320px 120px, rgba(220,240,255,.75), transparent 55%),
    radial-gradient(1.4px 1.4px at 60px 280px,  rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px   1px   at 140px 330px, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.7px 1.7px at 260px 30px,  rgba(180,220,255,.75), transparent 55%),
    radial-gradient(1px   1px   at 320px 210px, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1.3px 1.3px at 40px 150px,  rgba(255,220,150,.60), transparent 55%),
    radial-gradient(1px   1px   at 200px 290px, rgba(255,255,255,.40), transparent 55%),
    radial-gradient(1.5px 1.5px at 110px 70px,  rgba(255,255,255,.80), transparent 55%),
    radial-gradient(1px   1px   at 290px 130px, rgba(200,230,255,.55), transparent 55%);
  background-size:340px 320px, 280px 300px, 300px 260px, 220px 240px,
                  360px 280px, 260px 220px, 320px 360px, 380px 300px,
                  250px 200px, 300px 340px, 350px 250px, 240px 320px,
                  310px 270px, 270px 300px, 380px 260px, 220px 280px,
                  260px 300px, 320px 240px, 340px 300px, 360px 320px,
                  280px 260px, 380px 340px, 300px 280px, 340px 360px;
}

a{color:inherit;text-decoration:none}

.page{
  position:relative;
  z-index:1;
  width:min(1600px,96%);
  margin:0 auto;
}

/* ===== CABECERA: logo, título y botones dentro del panel ===== */
.logo{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  height:calc(100% - 10px);
  width:auto;
  max-width:180px;
  object-fit:contain;
  flex:none;
  margin:0;
}
.hero-top{
  display:flex;
  align-items:center;
  gap:16px;
}
.hero-top h1{flex:1 1 auto}
.brand-btns{
  flex:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.brand-btns .soc-btn{
  width:100%;
  min-width:130px;
  padding:7px 12px;
}

/* ===== TÍTULO CENTRAL (compacto) ===== */
.hero{
  position:relative;
  overflow:hidden;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:12px 0 14px;
  padding:12px 16px 10px 210px;
  background:
    radial-gradient(620px 220px at 50% 42%, rgba(255,189,0,.16), transparent 65%),
    radial-gradient(520px 240px at 12% 50%, rgba(0,140,255,.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 24px),
    linear-gradient(160deg,#0e2036,#04101c 60%,#020a12);
  border:1px solid #2a5a80;
  border-radius:14px;
  box-shadow:
    inset 0 0 70px rgba(0,120,255,.12),
    0 0 34px rgba(0,140,255,.16);
}
.hero::before{
  content:"";
  position:absolute;
  top:0;left:24px;right:24px;height:2px;
  background:linear-gradient(90deg,transparent,var(--yellow),transparent);
  opacity:.85;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(0deg,rgba(0,120,255,.12),transparent);
  pointer-events:none;
}
.hero h1,.hero p,.brand-btns{position:relative;z-index:1}
.hero h1{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:76px;
  font-weight:400;
  letter-spacing:3px;
  line-height:1.02;
  text-transform:uppercase;
  color:var(--yellow);
  text-shadow:0 0 20px rgba(255,189,0,.3);
  margin:0;
}
.hero h1 .ps4{
  color:#fff;
  font-size:1.22em;
  text-shadow:0 0 22px rgba(140,190,255,.5);
}
.hero p{
  font-family:Arial, Helvetica, sans-serif;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:normal;
  color:#b6c6d6;
  margin:4px 210px 0 0;
}

/* ===== EXPLOITS WEBKIT (panel compacto) ===== */
.webkit-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg,#0a1726,#040b13);
  border:1px solid #1c3f5e;
  border-radius:14px;
  padding:12px 14px 14px;
  margin-bottom:10px;
}
.webkit-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  margin-bottom:10px;
}
.webkit-head h3{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:31px;
  font-weight:400;
  letter-spacing:1.5px;
  color:#fff;
  margin:0;
  text-shadow:0 2px 12px rgba(0,140,255,.35);
}
.webkit-head h3 img{
  height:22px;
  vertical-align:-4px;
  margin-right:8px;
}
.soc-btn img{height:18px;width:auto;flex:none;object-fit:contain}

.webkit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.webkit-item{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:96px;
  padding:9px 10px 8px;
  background:linear-gradient(160deg,#0b1826,#04101c);
  border:2px solid #2a5a80;
  border-radius:11px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.webkit-item:hover{
  transform:translateY(-3px);
  border-color:var(--yellow);
  background:linear-gradient(160deg,#123049,#072034);
  box-shadow:0 0 26px rgba(255,189,0,.4);
}
.wi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.fw{
  align-self:flex-start;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  font-weight:900;
  font-size:17px;
  letter-spacing:.5px;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(255,189,0,.25);
  white-space:nowrap;
}
.fw-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.hg{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:19px;
  letter-spacing:1px;
  text-transform:uppercase;
  background:linear-gradient(90deg,#fff2b0,#ffbd00 55%,#ff8a00);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#ffbd00;
  text-shadow:0 0 10px rgba(255,189,0,.45);
  white-space:nowrap;
}
.host{
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:23px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#eef4fa;
  transition:color .12s ease, text-shadow .12s ease;
}
.host-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
}
.webkit-item:hover .host{
  color:var(--yellow);
  text-shadow:0 0 14px rgba(255,189,0,.5);
}
.solo{
  align-self:flex-start;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#ff8fb9;
  background:rgba(255,79,163,.15);
  border:1px solid #ff4fa3;
  border-radius:999px;
  padding:2px 11px;
  white-space:nowrap;
}
.go{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid #2f5577;
  color:var(--yellow);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
  flex:none;
  transition:.12s ease;
}
.webkit-item:hover .go{
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  border-color:transparent;
  box-shadow:0 0 12px rgba(255,189,0,.35);
}
.webkit-item.disabled{
  opacity:.55;
  cursor:not-allowed;
  border-style:dashed;
  border-color:#2a4a66;
}
.webkit-item.disabled:hover{
  transform:none;
  border-color:#2a4a66;
  background:linear-gradient(160deg,#0b1826,#04101c);
  box-shadow:none;
}
.webkit-item.disabled:hover .host{color:#eef4fa;text-shadow:none}

/* ===== CÓMO SE USA: 5 pasos en una sola fila ===== */
.pasos{
  margin:0 0 10px;
  padding:8px 10px;
  background:rgba(3,10,16,.55);
  border:1px solid #16344e;
  border-radius:10px;
}
.pasos h4{
  margin:0 0 7px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:23px;
  font-weight:400;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--yellow);
}
.pasos ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:paso;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.pasos li{
  counter-increment:paso;
  margin:0;
  padding-left:26px;
  position:relative;
}
.pasos li::before{
  content:counter(paso);
  position:absolute;
  left:0;top:2px;
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd226,#f0a900);
  color:#0b0f14;
  font-weight:900;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pasos strong{
  display:block;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-weight:400;
  font-size:20px;
  letter-spacing:1px;
  line-height:1.05;
  color:#fff;
}
.pasos p{
  margin:3px 0 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  letter-spacing:normal;
  line-height:1.35;
  color:#a9bbcb;
}

/* ===== SUSCRIPCIÓN: columna a la derecha del banner ===== */
.subscribe{
  flex:0 0 auto;
  width:auto;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:1px solid var(--yellow);
  border-radius:12px;
  padding:14px 18px;
  background:
    radial-gradient(360px 90px at 50% -20%, rgba(255,189,0,.12), transparent 60%),
    linear-gradient(145deg,rgba(255,189,0,.07),rgba(2,8,14,.96));
}
.subscribe h3{
  color:var(--yellow);
  margin:0;
  text-transform:uppercase;
  font-size:24px;
  letter-spacing:1px;
  text-align:center;
  text-shadow:0 0 14px rgba(255,189,0,.25);
}
.subscribe h3 img{height:18px;vertical-align:middle;margin-right:8px}
.subscribe p{
  font-size:15px;
  color:#c4d0db;
  line-height:1.4;
  text-align:center;
  margin:3px 0 10px;
}
.soc-btns{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center;
  gap:8px;
}
.soc-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 10px;
  border-radius:9px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.5px;
  color:#fff;
  text-transform:uppercase;
  transition:box-shadow .15s ease, transform .15s ease;
}
.soc-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.soc-btn.youtube{
  background:linear-gradient(145deg,#ff2b34,#c0000f);
  box-shadow:0 4px 14px rgba(255,0,25,.3);
}
.soc-btn.youtube:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,0,25,.55)}
.soc-btn.twitter{
  background:linear-gradient(145deg,#0b0f14,#05070a);
  border:1px solid #3a6a94;
  box-shadow:0 4px 14px rgba(29,161,242,.18);
}
.soc-btn.twitter:hover{transform:translateY(-2px);border-color:#fff;box-shadow:0 0 24px rgba(29,161,242,.55)}
.soc-btn img{height:18px;width:auto;flex:none;object-fit:contain}
.soc-btn.kofi{
  background:linear-gradient(145deg,#ff706c,#e04542);
  box-shadow:0 4px 14px rgba(255,94,91,.3);
}
.soc-btn.kofi:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,94,91,.6)}

/* ===== CRÉDITOS (compacto) ===== */
.credits{
  margin-top:10px;
  border:1px solid #1c3f5e;
  border-radius:12px;
  padding:12px 14px 14px;
  background:linear-gradient(150deg,#0a1726,#040b13);
  text-align:center;
}
.credits h3{
  margin:0 0 6px;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:23px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--yellow);
}
.credits p{
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  letter-spacing:normal;
  line-height:1.4;
  color:#a9bbcb;
  margin:0;
}
.credits strong{color:var(--yellow)}
.credits .cracks{
  font-size:0;
  margin:8px 0 0;
  line-height:2;
  text-align:center;
}
.bub{
  display:inline-block;
  margin:2px 4px;
  padding:3px 11px;
  border-radius:999px;
  border:1px solid;
  font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
  font-size:17px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  transition:box-shadow .12s ease;
}
.bub:hover{transform:none}
.c1{color:#a9d2ff;border-color:#2f9bff;background:rgba(47,155,255,.16)}
.c1:hover{box-shadow:0 0 12px rgba(47,155,255,.85)}
.c2{color:#d2b6ff;border-color:#9b5cff;background:rgba(155,92,255,.16)}
.c2:hover{box-shadow:0 0 12px rgba(155,92,255,.85)}
.c3{color:#ffc1dd;border-color:#ff4fa3;background:rgba(255,79,163,.15)}
.c3:hover{box-shadow:0 0 12px rgba(255,79,163,.85)}
.c4{color:#b8f0e8;border-color:#17c3b2;background:rgba(23,195,178,.15)}
.c4:hover{box-shadow:0 0 12px rgba(23,195,178,.85)}
.c5{color:#ffd9b8;border-color:#ff8a3d;background:rgba(255,138,61,.15)}
.c5:hover{box-shadow:0 0 12px rgba(255,138,61,.85)}
.c6{color:#c8f5d6;border-color:#43d17c;background:rgba(67,209,124,.15)}
.c6:hover{box-shadow:0 0 12px rgba(67,209,124,.85)}
.c7{color:#ffc2c2;border-color:#ff5252;background:rgba(255,82,82,.15)}
.c7:hover{box-shadow:0 0 12px rgba(255,82,82,.85)}
.c8{color:#fff3c2;border-color:#e8b80e;background:rgba(232,184,14,.15)}
.c8:hover{box-shadow:0 0 12px rgba(232,184,14,.85)}

/* ===== FOOTER (una línea) ===== */
footer{
  border-top:1px solid var(--yellow);
  margin-top:10px;
  padding:8px 4px 10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#c2ced9;
  font-size:14px;
  flex-wrap:wrap;
}
footer strong{color:var(--white)}
footer .yellow{color:var(--yellow)}

/* Pantallas más pequeñas: vuelve a apilarse */
@media(max-width:1300px){
  .hero{margin:12px 0 14px;padding-left:170px}
  .brand-btns{flex:1 1 100%;flex-direction:row;justify-content:center}
  .webkit-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .pasos ol{grid-template-columns:1fr;gap:8px}
  .pasos li{padding-left:26px}
}
@media(max-width:760px){
  .logo{position:static;height:110px;max-width:none;transform:none;margin:0 auto}
  .hero{padding-left:16px}
  .hero-top{flex-wrap:wrap;justify-content:center}
  .hero h1{font-size:50px}
  .soc-btns{grid-template-columns:1fr}
}