/* ===== VARIABLES ===== */
:root{
  --bg:#0a0b12;
  --line:rgba(255,255,255,.12);
  --yellow:#f7b500;
  --blue:#5ca8ff;
  --green:#1ed760;
  --navy:#4f7fd8;          /* azul marino claro ("MC") */
  --text:#f4f6ff;
  --muted:#b5bad3;
  --radius:24px;
  --shadow:0 14px 34px rgba(0,0,0,.35);
  --font-title:'Oxanium',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);line-height:1.55;overflow-x:hidden;
}
/* Fondo: captura de Minecraft + overlay oscuro con blur */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url("img/banner.jpg") center/cover no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:rgba(8,9,18,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  width:calc(100% - 24px);max-width:1400px;
  display:flex;align-items:center;gap:10px;z-index:100;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;margin-right:auto;
  background:rgba(16,18,30,.75);backdrop-filter:blur(12px);
  padding:8px 14px;border-radius:14px;border:1px solid var(--line)}
.nav{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  display:none;flex-direction:column;gap:6px;
  background:rgba(16,18,30,.95);backdrop-filter:blur(14px);
  padding:10px;border-radius:18px;border:1px solid var(--line);
}
.nav.open{display:flex}
.nav a{padding:13px 18px;border-radius:12px;font-weight:600;font-size:15px;color:var(--muted);transition:.25s}
.nav a:hover,.nav a.active{background:rgba(92,168,255,.16);color:#fff}

.ip-pill{
  background:var(--blue);color:#06101f;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:14px;
  box-shadow:0 6px 20px rgba(92,168,255,.35);transition:.25s;
}
.ip-pill:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(92,168,255,.5)}
.ip-pill:active{transform:translateY(0)}

.burger{background:rgba(16,18,30,.75);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:5px;padding:13px}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{
  position:relative;isolation:isolate;                      /* isolation: el .aura (z-index:-1) queda detrás del contenido */
  min-height:58vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:120px 20px clamp(120px,15vw,180px);   /* el padding inferior deja sitio a la ola */
}
.hero-inner{animation:rise .7s ease both}
.hero h1{
  font-family:var(--font-title);font-weight:800;
  font-size:clamp(38px,10vw,76px);line-height:1.05;margin:18px 0 12px;
  text-shadow:0 4px 18px rgba(0,0,0,.45);
}
.hero h1 span{color:var(--blue)}   /* mismo azul que los títulos del resto de páginas */
.lead{font-size:clamp(16px,4vw,19px);font-weight:500;color:var(--muted);margin-bottom:26px}

.status{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(16,18,30,.7);backdrop-filter:blur(10px);border:1px solid var(--line);
  font-weight:600;font-size:14px;
}
.dot{width:10px;height:10px;border-radius:50%;background:#888}
.status.online .dot{background:var(--green);animation:pulse 1.8s infinite}
.status.offline .dot{background:#ff4d5e}

.btn-play{
  background:var(--green);color:#04210f;font-weight:700;font-size:17px;
  padding:15px 32px;border-radius:16px;
  box-shadow:0 8px 28px rgba(30,215,96,.35);transition:.25s;
}
.btn-play:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(30,215,96,.5)}
.btn-play:active{transform:translateY(0)}

/* ===== LAYOUT ===== */
.container{width:100%;max-width:1400px;margin:0 auto}
.store{display:flex;flex-direction:column;gap:20px}
.cards-top{display:flex;flex-direction:column;gap:20px}

/* ===== CARDS ===== */
.card{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:28px 24px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.22);overflow:hidden;color:#101216;
  box-shadow:0 12px 30px rgba(16,24,56,.18);                 /* sobre fondo blanco (la sombra oscura global pesaba demasiado) */
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-5px)}
.card h2{font-family:var(--font-body);font-size:clamp(26px,7vw,40px);line-height:1.1;margin-bottom:8px;font-weight:800;letter-spacing:-.5px}
.card p{font-size:15px;font-weight:500;opacity:.85}
.card img{width:130px;flex-shrink:0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));transition:transform .3s ease}
.card:hover img{transform:scale(1.07)}

.java{background:linear-gradient(135deg,#ffc933,var(--yellow))}
.java:hover{box-shadow:0 18px 40px rgba(247,181,0,.28)}
.bedrock{background:linear-gradient(135deg,#8cc2ff,var(--blue))}
.bedrock:hover{box-shadow:0 18px 40px rgba(92,168,255,.3)}

.discord{background:linear-gradient(135deg,#4ee985,var(--green));cursor:pointer;min-height:210px;padding:30px 24px}
.discord:hover{box-shadow:0 18px 40px rgba(30,215,96,.3)}
.discord img{width:150px}
.discord-btn{display:inline-block;margin-top:16px;background:#0d0f17;color:#fff;font-weight:600;font-size:15px;padding:12px 24px;border-radius:14px;transition:.25s}
.discord:hover .discord-btn{background:#000;transform:translateY(-2px)}

/* ===== AURA: resplandor azul + partículas sutiles detrás del título (la usan Inicio y Blog) ===== */
.aura{position:absolute;inset:0;z-index:-1;pointer-events:none}
.aura::before{
  content:"";position:absolute;left:50%;top:50%;width:min(960px,100%);height:420px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(92,168,255,.22),rgba(92,168,255,.08) 45%,transparent 70%);
}
.aura::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 9% 26%,rgba(92,168,255,.85) 0 1.6px,transparent 2.4px),
    radial-gradient(circle at 17% 58%,rgba(255,255,255,.5) 0 1px,transparent 1.6px),
    radial-gradient(circle at 27% 18%,rgba(255,255,255,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 36% 44%,rgba(92,168,255,.6) 0 1.2px,transparent 2px),
    radial-gradient(circle at 66% 22%,rgba(92,168,255,.6) 0 1.2px,transparent 2px),
    radial-gradient(circle at 74% 52%,rgba(255,255,255,.5) 0 1px,transparent 1.6px),
    radial-gradient(circle at 83% 30%,rgba(255,255,255,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 91% 62%,rgba(92,168,255,.85) 0 1.6px,transparent 2.4px);
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 82%);mask-image:linear-gradient(to bottom,#000 40%,transparent 82%);
  animation:auraTwinkle 6s ease-in-out infinite;
}
@keyframes auraTwinkle{50%{opacity:.4}}

/* ===== INICIO: ola animada (igual que Sugerencias: dos capas que se deslizan en sentidos opuestos) ===== */
.hm-wave{
  position:absolute;left:0;right:0;bottom:-1px;            /* -1px: sin línea entre la ola y la sección blanca */
  height:clamp(70px,10vw,120px);overflow:hidden;pointer-events:none;
}
.hm-wave svg{
  position:absolute;bottom:0;left:0;
  width:200%;height:100%;                                  /* el dibujo se repite 2 veces: -50% encaja sin saltos */
  animation:hmDrift 16s linear infinite;
}
.hm-wave .back{animation-duration:26s;animation-direction:reverse}
@keyframes hmDrift{to{transform:translateX(-50%)}}

/* ===== INICIO: sección blanca con las tarjetas + pie sobre blanco continuo ===== */
.hm-light{background:#fff;color:#0f1424;padding:20px 14px 50px}
.hm-foot{display:flow-root;padding:10px 14px 34px;background:#fff}
.hm-foot footer{margin:0 auto;background:#10121e;border-color:rgba(255,255,255,.08);box-shadow:0 18px 44px rgba(16,24,56,.28)}

/* ===== FOOTER ===== */
footer{width:calc(100% - 28px);max-width:1400px;margin:60px auto 30px;
  background:rgba(16,18,30,.7);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.footer-top{display:flex;flex-direction:column;gap:14px;align-items:center;padding:24px}
.footer-left{display:flex;align-items:center;gap:14px}
.footer-left h2{font-size:22px;font-weight:700}
.footer-links{display:flex;gap:22px;font-weight:600;color:var(--muted)}
.footer-links a:hover{color:#fff}
.footer-links .sep{color:rgba(255,255,255,.28);font-weight:400;user-select:none}
.footer-middle{padding:14px 24px;text-align:center;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.footer-middle a{color:var(--blue)}
.footer-bottom{text-align:center;padding:12px;font-size:12px;color:var(--muted);opacity:.7}

/* ===== MODAL ===== */
.modal{
  position:fixed;inset:0;display:none;justify-content:center;align-items:center;padding:16px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);z-index:9999;
}
.modal.open{display:flex}
.modal-box{
  width:100%;max-width:460px;background:#171923;border-radius:var(--radius);
  padding:30px 24px;text-align:center;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6);
  animation:rise .3s ease;
}
.modal-box h2{font-family:var(--font-body);font-size:24px;font-weight:800}
.modal-box p{font-size:14px;color:var(--muted);margin-bottom:6px}
.modal-btn{display:block;padding:15px;border-radius:16px;color:#08110c;transition:.25s}
.modal-btn strong{display:block;font-size:16px;font-weight:700}
.modal-btn span{font-size:13px;font-weight:500;opacity:.8}
.java-btn{background:var(--green);box-shadow:0 8px 22px rgba(30,215,96,.25)}
.bedrock-btn{background:var(--blue);box-shadow:0 8px 22px rgba(92,168,255,.25)}
.modal-btn:hover{transform:translateY(-3px)}
.cancel-btn{padding:13px;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-weight:600;transition:.2s}
.cancel-btn:hover{background:rgba(255,255,255,.12)}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,30px);
  background:var(--green);color:#04210f;font-weight:700;padding:13px 24px;
  border-radius:14px;box-shadow:0 10px 30px rgba(30,215,96,.4);
  opacity:0;pointer-events:none;transition:.3s;z-index:10000;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== ANIMACIONES ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,215,96,.7)}70%{box-shadow:0 0 0 10px rgba(30,215,96,0)}100%{box-shadow:0 0 0 0 rgba(30,215,96,0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ===== TABLET ===== */
@media(min-width:700px){
  .cards-top{flex-direction:row}
  .card{padding:36px}
  .card img{width:170px}
  .discord img{width:200px}
  .footer-top{flex-direction:row;justify-content:space-between;padding:24px 34px}
}

/* ===== DESKTOP ===== */
@media(min-width:960px){
  .navbar{top:20px}
  .burger{display:none}
  .nav{position:static;display:flex;flex-direction:row;background:none;backdrop-filter:none;border:0;padding:0;gap:6px;margin-right:auto}
  .brand{margin-right:16px}
  .card{padding:42px}
  .card img{width:210px}
  .discord{padding:46px;min-height:250px}
  .discord img{width:230px}
}