/* ═══════════════════════════════════════════════════════════
   EXPO REVISTE 2026 — PRELOADER
   Capa de entrada cinematográfica tipo editorial de lujo
   ═══════════════════════════════════════════════════════════ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-obsidian);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  transition: opacity 0.6s var(--ease-expo),
              visibility 0.6s var(--ease-expo);
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Marca central */
.preloader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  animation: preloaderFadeUp 0.8s var(--ease-expo) 0.2s both;
}

.preloader-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-primary);
  line-height: 1;
}

.preloader-wordmark em {
  font-style: italic;
  background: var(--g-text-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.preloader-edition {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-gold-muted);
}

/* Barra de progreso */
.preloader-bar-wrap {
  width: min(240px, 60vw);
  height: 1px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  animation: preloaderFadeUp 0.8s var(--ease-expo) 0.4s both;
}

.preloader-bar {
  height: 100%;
  background: var(--g-gold-line);
  width: 0;
  animation: preloaderProgress 1.4s var(--ease-expo) 0.5s both;
}

/* Porcentaje */
.preloader-pct {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  color: var(--c-text-muted);
  animation: preloaderFadeUp 0.8s var(--ease-expo) 0.6s both;
}

/* Línea decorativa top/bottom */
.preloader::before,
.preloader::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--c-gold-muted) 50%, transparent);
  opacity: 0.3;
  animation: preloaderFadeUp 0.8s var(--ease-expo) both;
}
.preloader::before { top: var(--sp-12); animation-delay: 0.1s; }
.preloader::after  { bottom: var(--sp-12); animation-delay: 0.2s; transform: translateX(-50%) scaleY(-1); }

@keyframes preloaderFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes preloaderProgress {
  0%   { width: 0%; }
  60%  { width: 85%; }
  100% { width: 100%; }
}