/* ── Home ─────────────────────────────────────────────────────────────────────
   La portada de The Holy War. Tres reglas que la gobiernan:
   1. El 3D real y los videos SÓLO en pantallas grandes; en celular, imagen.
      El juego se juega del celular: los datos del jugador no se malgastan acá.
   2. Todo el arte es del juego (wallpapers de la pantalla de carga, videos de
      héroes, modelos del open world). Nada comprado ni inventado.
   3. Las animaciones son CSS + IntersectionObserver: cero librerías. */

/* ── Portada ─────────────────────────────────────────────────────────────── */
.portada{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
/* Capas del parallax: se mueven distinto con el mouse y con el scroll */
.capa{position:absolute;inset:-6% -4%;z-index:-1;will-change:transform}
.capa img{width:100%;height:100%;object-fit:cover}
.capa-fondo{filter:saturate(.85) brightness(.55)}
.capa-frente{
  background:
    radial-gradient(60% 55% at 50% 42%,transparent 0%,rgba(8,10,18,.55) 70%,rgba(8,10,18,.95) 100%),
    linear-gradient(180deg,rgba(8,10,18,.75) 0%,transparent 28%,transparent 55%,rgba(8,10,18,.98) 100%);
}
/* Lienzo del 3D: encima del arte, debajo del texto */
/* Un <canvas> NO se estira con inset solo: sin width/height explícitos se queda
   en su tamaño por omisión (300x150) y el render sale de estampilla. */
/* Un <canvas> NO se estira con inset solo. Y no ocupa toda la pantalla a
   propósito: el personaje va a la derecha, al lado del texto, y así se dibujan
   la mitad de los píxeles (en una máquina modesta se nota). */
#escena3d{
  position:absolute;top:0;right:0;bottom:0;left:45%;width:55%;height:100%;
  z-index:-1;opacity:0;transition:opacity 1.6s ease;pointer-events:none;
}
@media (max-width:900px){ #escena3d{display:none} }
#escena3d.viva{opacity:1}

.portada-texto{max-width:1240px;margin:0 auto;padding:0 20px;width:100%}
.marca{
  font-family:var(--display);font-weight:700;line-height:1.02;
  font-size:clamp(40px,8.5vw,92px);letter-spacing:1px;margin:0;
  background:linear-gradient(180deg,#fff8e4,var(--oro) 48%,#a9822e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.85));
}
.lema{
  font-family:var(--serif);font-size:clamp(16px,2.2vw,23px);color:var(--crema);
  margin:14px 0 8px;max-width:23ch;line-height:1.45;text-shadow:0 2px 14px #000;
}
.bajada-portada{color:var(--gris2);max-width:52ch;margin:0 0 26px;font-size:17px;text-shadow:0 2px 12px #000}
.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;padding:15px 30px;border-radius:10px;font-family:var(--serif);
  font-size:16px;letter-spacing:.6px;border:1px solid var(--oro3);cursor:pointer;
}
.btn-oro{
  background:linear-gradient(180deg,#e8cf86,#b8912f);color:#20180a;border-color:#f0d68a;
  font-weight:700;box-shadow:0 8px 26px rgba(200,168,80,.28);
}
.btn-oro:hover{background:linear-gradient(180deg,#f6e2a2,#caa03a);color:#20180a}
.btn-ghost{background:rgba(12,10,26,.6);color:var(--crema);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(36,26,62,.8);color:var(--oro)}
.gratis{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gris2);
  margin-top:16px;
}
.gratis b{color:var(--verde);font-weight:600}
.flecha{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:var(--oro2);font-size:22px;animation:baja 2.2s ease-in-out infinite;z-index:2;
}
@keyframes baja{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,9px);opacity:1}}

/* ── Aparecer al scrollear ───────────────────────────────────────────────── */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.revelar.visible{opacity:1;transform:none}

/* ── Bloques de la home ──────────────────────────────────────────────────── */
.bloque{max-width:1240px;margin:0 auto;padding:80px 20px}
.bloque-titulo{
  font-family:var(--serif);font-size:clamp(25px,4vw,38px);margin:0 0 10px;font-weight:700;
  background:linear-gradient(180deg,#fff6dd,var(--oro) 55%,var(--oro2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bloque-bajada{color:var(--gris);font-size:17px;max-width:64ch;margin:0 0 30px}

.pilares{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.pilar{padding:24px;position:relative;overflow:hidden}
.pilar .ico{font-size:30px;margin-bottom:10px}
.pilar h3{font-family:var(--serif);color:var(--oro);margin:0 0 8px;font-size:20px}
.pilar p{margin:0;color:var(--gris2);line-height:1.6}

/* Ken Burns: la captura del mundo respira, no está muerta */
.escenario{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/8;
  border:1px solid var(--oro3);box-shadow:var(--sombra);
}
.escenario img{width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-2.5%,-2%)}}
.escenario .velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(8,10,18,.92));
}
.escenario .pie{position:absolute;left:22px;right:22px;bottom:20px}
.escenario .pie b{font-family:var(--serif);color:var(--oro);font-size:19px;display:block}
.escenario .pie span{color:var(--gris2);font-size:15px}

/* Héroes: quietos, y al pasar el mouse cobran vida con su video real */
.g-heroes{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.heroe{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;display:block;
  border:1px solid var(--borde);background:#0b0f1c;color:var(--crema);
  transition:transform .18s ease,border-color .18s ease;
}
.heroe:hover{transform:translateY(-5px);border-color:var(--oro3);color:var(--crema)}
.heroe img,.heroe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroe video{opacity:0;transition:opacity .35s ease}
.heroe.vivo video{opacity:1}
.heroe .datos{
  position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;
  background:linear-gradient(180deg,transparent,rgba(6,8,14,.95));
}
.heroe .datos b{font-family:var(--serif);display:block;font-size:15px}
.heroe .datos span{font-size:12px;color:var(--gris)}

/* Números */
.cifras{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cifra{padding:20px 14px;text-align:center}
.cifra b{
  display:block;font-family:var(--serif);font-size:clamp(28px,4vw,40px);color:var(--oro);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.cifra span{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:1.4px}

/* Beta */
.beta{
  max-width:760px;margin:0 auto;padding:38px 30px;text-align:center;
}
.beta h2{font-family:var(--serif);color:var(--oro);font-size:clamp(24px,4vw,34px);margin:0 0 10px}
.beta p{color:var(--gris2);margin:0 auto 22px;max-width:52ch;line-height:1.65}
.beneficios{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin:0 0 26px;text-align:left;
}
.beneficio{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--crema)}
.beneficio .b-ico{color:var(--oro);font-size:17px;line-height:1.4}
.beneficio small{display:block;color:var(--gris);font-size:13px;margin-top:2px}
.form-beta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.form-beta input{flex:1 1 280px;max-width:380px;padding:14px 16px;font-size:16px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.beta-msg{margin-top:14px;min-height:22px;font-size:15px}
.beta-msg.ok{color:var(--verde)} .beta-msg.mal{color:var(--rojo)}
.beta-cuenta{margin-top:12px;font-size:13px;color:var(--gris)}

@media (max-width:760px){
  .bloque{padding:56px 16px}
  .portada{min-height:88svh}
  .escenario{aspect-ratio:4/3}
  .g-heroes{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .btn{padding:14px 22px;font-size:15px}
  .acciones{width:100%}
  .acciones .btn{flex:1 1 100%;text-align:center}
}
/* Quien pidió menos animación, recibe menos animación */
@media (prefers-reduced-motion: reduce){
  .escenario img{animation:none}
  .flecha{animation:none}
  .revelar{opacity:1;transform:none;transition:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   EVENTO — el anuncio del stream y la entrega de llaves
   ════════════════════════════════════════════════════════════════════════════ */
.evento{
  position:relative;overflow:hidden;padding:0;
  border:1px solid var(--oro3);border-radius:16px;
  background:linear-gradient(135deg,#1a1030 0%,#0e1526 55%,#101a2e 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(240,214,138,.14);
}
/* Runas de fondo, muy tenues: decoración temática sin tapar el texto */
.evento::before{
  content:"✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦";
  position:absolute;inset:0;color:rgba(240,214,138,.05);font-size:34px;
  letter-spacing:26px;line-height:2.4;pointer-events:none;overflow:hidden;
}
.evento::after{
  content:"";position:absolute;top:-60%;left:-30%;width:60%;height:220%;
  background:radial-gradient(ellipse at center,rgba(127,227,240,.14),transparent 62%);
  pointer-events:none;
}
.evento-cuerpo{position:relative;z-index:2;display:grid;gap:26px;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:center;padding:32px}
.evento-etiqueta{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);
  font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:#0e1020;
  background:linear-gradient(180deg,#f0d68a,#c8a850);padding:5px 13px;border-radius:99px;
  font-weight:700;margin-bottom:12px;
}
.evento h2{font-family:var(--serif);font-size:clamp(23px,3.4vw,33px);color:var(--oro);
  margin:0 0 10px;line-height:1.22}
.evento p.desc{color:var(--gris2);margin:0 0 18px;line-height:1.65;max-width:56ch}
.cuando{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.cuando .dato-ev{
  background:rgba(11,15,28,.72);border:1px solid var(--borde);border-radius:10px;
  padding:10px 15px;min-width:104px;
}
.cuando .dato-ev .k{font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:1.3px}
.cuando .dato-ev .v{font-family:var(--serif);font-size:17px;color:var(--crema);margin-top:2px;font-weight:600}
.cuando .dato-ev .v small{color:var(--gris);font-size:12px;font-family:var(--texto)}

/* Cuenta regresiva */
.reloj{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.reloj .u{
  background:linear-gradient(180deg,#1c1436,#0b0f1c);border:1px solid var(--oro3);
  border-radius:10px;padding:9px 13px;text-align:center;min-width:66px;
}
.reloj .u b{display:block;font-family:var(--serif);font-size:24px;color:var(--oro);
  font-variant-numeric:tabular-nums;line-height:1.1}
.reloj .u span{font-size:10px;color:var(--gris);text-transform:uppercase;letter-spacing:1.2px}

.btn-discord{
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:10px;
  background:linear-gradient(180deg,#6b7ae8,#4d5bc4);border:1px solid #8892f0;color:#fff;
  font-family:var(--serif);font-size:16px;box-shadow:0 8px 24px rgba(88,101,242,.32);
}
.btn-discord:hover{background:linear-gradient(180deg,#7d8bf5,#5a68d8);color:#fff}
.btn-discord svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}
.evento-arte{border-radius:12px;overflow:hidden;border:1px solid var(--borde);aspect-ratio:4/3}
.evento-arte img,.evento-arte video{width:100%;height:100%;object-fit:cover}

/* La llave que se entrega al anotarse */
.llave{
  margin-top:18px;padding:18px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,rgba(240,214,138,.09),rgba(11,15,28,.85));
  border:1px solid var(--oro2);
}
.llave .rot{font-size:12px;color:var(--oro2);text-transform:uppercase;letter-spacing:2px;
  font-family:var(--serif);margin-bottom:8px}
.llave .cod{
  font-family:'Cinzel',monospace;font-size:clamp(20px,4.4vw,30px);color:var(--oro);
  letter-spacing:3px;font-weight:700;user-select:all;cursor:pointer;
  text-shadow:0 0 22px rgba(240,214,138,.42);
}
.llave .expl{font-size:13px;color:var(--gris2);margin-top:9px;line-height:1.55}
.copiado{font-size:12px;color:var(--verde);margin-top:6px;min-height:16px}

/* ════════════════════════════════════════════════════════════════════════════
   REDES, LOGIN Y CABECERA
   ════════════════════════════════════════════════════════════════════════════ */
.redes{display:flex;gap:6px;align-items:center}
.redes a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--borde);color:var(--gris2);background:rgba(11,15,28,.6);
  transition:transform .13s ease,color .13s ease,border-color .13s ease;
}
.redes a:hover{color:var(--oro);border-color:var(--oro3);transform:translateY(-2px)}
.redes svg{width:17px;height:17px;fill:currentColor}
@media (max-width:900px){ .redes{display:none} }

/* Portal de acceso: el login sale de un portal rúnico, no de un formulario gris */
.velo-login{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:18px;
  background:rgba(4,6,12,.86);backdrop-filter:blur(7px);
}
.velo-login.abierto{display:grid;animation:aparecer .28s ease}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.portal-login{
  position:relative;width:min(430px,100%);padding:38px 32px 30px;border-radius:18px;
  background:linear-gradient(180deg,#141029 0%,#0a0e1a 100%);
  border:1px solid var(--oro3);
  box-shadow:0 0 0 1px rgba(240,214,138,.1),0 26px 70px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(240,214,138,.16);
  animation:subir .34s cubic-bezier(.2,.8,.3,1);
}
@keyframes subir{from{transform:translateY(22px) scale(.97);opacity:0}to{transform:none;opacity:1}}
/* El anillo de runas gira despacio detrás del título */
.anillo{
  position:absolute;top:-52px;left:50%;transform:translateX(-50%);
  width:104px;height:104px;border-radius:50%;
  border:1px solid rgba(240,214,138,.42);
  background:radial-gradient(circle at 50% 45%,rgba(127,227,240,.2),rgba(10,14,26,.96) 68%);
  display:grid;place-items:center;font-size:38px;
  box-shadow:0 0 34px rgba(127,227,240,.24),inset 0 0 24px rgba(240,214,138,.14);
}
.anillo::before{
  content:"✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";position:absolute;inset:-13px;border-radius:50%;
  color:var(--oro2);font-size:10px;letter-spacing:5px;
  display:grid;place-items:center;opacity:.6;
  animation:girar 22s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.portal-login h2{
  font-family:var(--display);text-align:center;color:var(--oro);
  font-size:25px;margin:34px 0 4px;
}
.portal-login .sub{text-align:center;color:var(--gris);font-size:13.5px;margin:0 0 24px}
.campo-mag{position:relative;margin-bottom:15px}
.campo-mag input{
  width:100%;padding:14px 14px 14px 42px;font-size:16px;
  background:rgba(8,11,20,.9);border:1px solid var(--borde);border-radius:10px;color:var(--crema);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.campo-mag input:focus{
  outline:none;border-color:var(--oro3);
  box-shadow:0 0 0 3px rgba(240,214,138,.1),0 0 18px rgba(240,214,138,.12);
}
.campo-mag .runa{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--oro2);font-size:15px;pointer-events:none;
}
.btn-portal{
  width:100%;padding:15px;border-radius:10px;cursor:pointer;
  font-family:var(--serif);font-size:16.5px;letter-spacing:1px;font-weight:700;
  background:linear-gradient(180deg,#e8cf86,#b8912f);color:#20180a;border:1px solid #f0d68a;
  box-shadow:0 8px 24px rgba(200,168,80,.3);
}
.btn-portal:hover{background:linear-gradient(180deg,#f6e2a2,#caa03a)}
.btn-portal:disabled{opacity:.6;cursor:default}
.cerrar-portal{
  position:absolute;top:12px;right:14px;background:none;border:none;color:var(--gris);
  font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;
}
.cerrar-portal:hover{color:var(--rojo);border:none}
.err-portal{color:var(--rojo);text-align:center;font-size:14px;margin-top:11px;min-height:20px}
.pie-portal{text-align:center;font-size:12.5px;color:var(--gris);margin-top:16px;line-height:1.6}

/* ════════════════════════════════════════════════════════════════════════════
   NOTICIAS Y VIDEOS
   ════════════════════════════════════════════════════════════════════════════ */
.g-noticias{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.noticia{display:block;color:var(--crema);overflow:hidden;transition:transform .14s ease}
.noticia:hover{transform:translateY(-4px);color:var(--crema)}
.noticia .foto{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0d1424}
.noticia .sin-foto{width:100%;aspect-ratio:16/9;display:grid;place-items:center;
  background:linear-gradient(135deg,#1a1030,#0d1424);font-size:34px;color:#2f3d5c}
.noticia .txt{padding:15px 17px 17px}
.noticia .meta{display:flex;gap:9px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.noticia .cuando{font-size:12px;color:var(--gris);margin:0}
.noticia h3{font-family:var(--serif);font-size:17px;color:var(--oro);margin:0 0 6px;line-height:1.32}
.noticia p{margin:0;color:var(--gris2);font-size:14.5px;line-height:1.6}

.g-videos{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.video-card{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--borde);
  aspect-ratio:16/9;background:#0b0f1c;cursor:pointer;display:block}
.video-card img,.video-card iframe,.video-card video{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video-card .play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(6,8,14,.15),rgba(6,8,14,.7));
  transition:background .2s ease;
}
.video-card:hover .play{background:linear-gradient(180deg,rgba(6,8,14,.05),rgba(6,8,14,.55))}
.video-card .play i{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:rgba(240,214,138,.92);color:#1a1206;font-size:23px;padding-left:5px;
  box-shadow:0 6px 26px rgba(0,0,0,.6);transition:transform .18s ease;
}
.video-card:hover .play i{transform:scale(1.1)}
.video-card .rot{position:absolute;left:14px;bottom:12px;right:14px;
  font-family:var(--serif);font-size:15px;color:#fff;text-shadow:0 2px 10px #000;z-index:2}

@media (max-width:760px){
  .evento-cuerpo{grid-template-columns:1fr;padding:22px}
  .evento-arte{order:-1;aspect-ratio:16/9}
  .cuando .dato-ev{flex:1 1 44%;min-width:0}
  .g-noticias,.g-videos{grid-template-columns:1fr}
}

/* La tarjeta con marco ornamentado ya trae su propio "aire" en el borde:
   el contenido no necesita padding extra ni recorte de esquinas. */
.ficha-card.card-real{border-radius:0;overflow:visible}
.ficha-card.card-real .sin-arte{border-radius:6px}
.ficha-card.card-real .pie{padding:10px 0 0}
.pilar.marco-real{border-radius:0}
.beta.marco-real{border-radius:0;padding:10px 20px 20px}