:root{
  --gold:#d8b765; --gold-2:#b18b3f; --bg:#0a0e18; --txt:#eaeef9; --muted:#cfd6e6;
  --logo-url:url("./img/logo_edit.png");
}
html,body{height:100%} body{margin:0;background:#000}
body.preloading{overflow:hidden}

/* ===== PRELOADER ===== */
#preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden;
  color:var(--txt);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(216,183,101,.08), rgba(7,10,20,.95) 70%),
    var(--bg);
}
.pre-dots{position:absolute; inset:0; width:100%; height:100%}
.pl-inner{position:relative; text-align:center; padding:24px 18px; z-index:4}

/* ===== LOGO sin destello ===== */
.logo-wrap{ width:min(34vw,280px); height:min(22vw,180px); margin:0 auto 16px; position:relative; perspective:1200px; }
#logoFull{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; filter:none; }

/* Anillo orbital */
.orbit{ position:absolute; inset:-10% -6%; z-index:3; border-radius:50%; pointer-events:none; }
.dot{
  position:absolute; top:50%; left:50%;
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--gold) 45%, rgba(216,183,101,.12) 70%, transparent 72%);
  transform:translate(-50%,-50%) translateX(calc(50% - 8px));
}
.dot.d2{ width:6px; height:6px; opacity:.7; transform:translate(-50%,-50%) translateX(calc(50% - 8px)) rotate(180deg); }

/* ===== TÍTULO ===== */
.pl-title{
  font-family:"Cinzel", ui-serif, Georgia, serif; font-weight:800;
  color:var(--txt) !important; opacity:1 !important; z-index:5 !important;
  font-size:clamp(24px,4.8vw,48px); line-height:1.05; position:relative; text-align:center;
}
.pl-title .sp{display:inline-block; width:clamp(8px,1.2vw,16px)}
.pl-underline{
  display:block; width:0; height:2px; margin:8px auto 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2)); border-radius:2px;
}

/* ===== SUBTÍTULO + PORCENTAJE ===== */
.pl-sub{margin:14px 0 18px; font-size:clamp(13px,1.5vw,15px); color:var(--muted);
  display:flex; gap:.6rem; justify-content:center; align-items:center;}
.pl-percent{font-variant-numeric:tabular-nums; font-weight:800; color:var(--gold);}

/* ===== BARRA “joya” con perlas ===== */
.progress{ width:min(70vw,520px); height:14px; margin:0 auto; position:relative; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.14) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(90deg,var(--gold),var(--gold-2));
  background-size: 280px 100%, 100% 100%;
  border-radius:inherit;
}
.pearl{
  position:absolute; top:50%; transform:translate(-50%,-50%); left:0%;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--gold) 40%, rgba(216,183,101,.18) 68%, transparent 70%);
}
.pearl.p2{width:10px;height:10px;opacity:.8}
.pearl.p3{width:8px;height:8px;opacity:.7}
.pearl.p4{width:12px;height:12px;opacity:.85}

/* ===== APERTURA DE LIBRO (pantalla completa) ===== */
.book-open{ position:fixed; inset:0; z-index:9998; pointer-events:none; perspective:1600px; }
.leaf{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    linear-gradient(90deg, #0c1220, #0a0e18);
  box-shadow:0 0 60px rgba(0,0,0,.55) inset;
  backface-visibility:hidden;
}
.leaf.left { left:0;  transform-origin:100% 50%; border-right:1px solid rgba(255,255,255,.06); }
.leaf.right{ right:0; transform-origin:  0% 50%; border-left: 1px solid rgba(255,255,255,.06); }

/* Canvas detrás */
.pre-dots{ position:absolute; inset:0; z-index:1; }

.page-hidden{opacity:0}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }