/*
 * ══════════════════════════════════════════════════
 * UNIVERSO ZOLARIS — Shared Design System
 * Incluir en todas las páginas ANTES del CSS local:
 *   <link rel="stylesheet" href="zolaris.css">
 * ══════════════════════════════════════════════════
 */

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:     #030309;
  --glass:  rgba(255,255,255,0.04);
  --glass-b:rgba(255,255,255,0.10);
  --text:   #F0EEFF;
  --text2:  rgba(240,238,255,0.74);
  --text3:  rgba(240,238,255,0.66); /* raised for readability over nebula */
  --pc1:    #818CF8;
  --pc2:    #C4B5FD;
  --pg:     rgba(124,109,255,0.30);
  --accent: #f59e0b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: transparent;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Liquid Glass — shared across all pages ── */
.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Glass Card — elevated surfaces ── */
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.40);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.10) 30%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.10) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ── Premium polish (site-wide): glow en hover + profundidad de títulos ──
   GLOW-ONLY a propósito: el scroll-reveal (.zn-reveal.in) controla el `transform`
   de TODAS las cards, así que un translate en :hover no aplica. Usamos box-shadow,
   que el reveal no toca. Especificidad (0,2,0) → cede ante hovers propios de cada
   página (ej. .prod-card de la tienda gana por orden de cascada). Cubre las cards
   "desnudas" de enciclopedia, padres, blog, timeline, etc. */
.glass-card { transition: box-shadow 0.34s ease; }
.glass-card:hover {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.20),
              0 16px 40px rgba(0,0,0,0.45),
              0 0 38px rgba(124,58,237,0.22);
}
.section-title { text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
@media (prefers-reduced-motion: reduce) {
  .glass-card { transition: none; }
}

/* ── Stars (shared on pages that use them locally) ── */
.stars {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--d,3s) var(--delay,0s) infinite alternate;
}
@keyframes twinkle {
  from { opacity: 0.06; transform: scale(0.8);  }
  to   { opacity: 0.85; transform: scale(1.25); }
}

/* ── Aurora band ── */
.aurora {
  position: fixed; top: 0; left: 0; right: 0; height: 260px;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 20% -20%, rgba(124,58,237,0.14) 0%, transparent 60%),
    radial-gradient(ellipse  80% 60% at 80% -10%, rgba(59,130,246,0.10) 0%, transparent 55%);
  filter: blur(30px);
  animation: aurora-drift 20s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translateX(0)    scaleX(1);    }
  100% { transform: translateX(60px) scaleX(1.08); }
}

/* ── Page wrapper (padding for fixed nav) ── */
.page { padding-top: 80px; padding-bottom: 60px; position: relative; z-index: 1; }

/* ── Hero tag pill ── */
.hero-tag {
  display: inline-block;
  background: rgba(124,109,255,0.15);
  border: 1px solid rgba(124,109,255,0.30);
  color: #C4B5FD;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 50px;
  margin-bottom: 16px;
}

/* ── CTA buttons ── */
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,rgba(124,109,255,0.30),rgba(99,102,241,0.30));
  border: 1px solid rgba(124,109,255,0.50);
  color: #C4B5FD;
  font-size: 15px; font-weight: 700;
  padding: 14px 32px; border-radius: 50px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 6px;
  cursor: pointer;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124,109,255,0.30);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124,109,255,0.30);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(124,109,255,0.55); }

/* ── Focus visible (A11y — WCAG 2.4.7) ── */
:focus-visible {
  outline: 3px solid #FBBF24;       /* amber > 4.5:1 contrast on dark bg */
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(251,191,36,0.20);
}
/* Keyboard users see a clear focus; mouse users don't */
:focus:not(:focus-visible) { outline: none; }

/* High-contrast text utilities for WCAG AA compliance (4.5:1 normal, 3:1 large) */
.text-meta { color: rgba(240,238,255,0.72); }       /* was 0.55 — now AA */
.text-strong { color: #fff; font-weight: 600; }
:root { --text3: rgba(240,238,255,0.66); }          /* bumped for readability over nebula */

/* ── FIX GLOBAL: gradient text siempre legible sobre la nebulosa ──
   Cuando un título usa "-webkit-background-clip:text" con un gradient
   que termina en violeta/azul, sobre la nebulosa morada queda invisible.
   Agregamos drop-shadow oscuro para darle profundidad y legibilidad. */
[style*="background-clip:text"],
[style*="background-clip: text"],
[style*="-webkit-background-clip:text"],
[style*="-webkit-background-clip: text"] {
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.55));
}
/* Aplica también a las clases conocidas que usan gradient text en CSS */
.hero-title .gold-text, .pq-h1, .section-heading span, .section-title span,
.reader-title, .cap0-h1 span, .hero-h1 span, .h-title span {
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.55));
}

/* ── FIX GLOBAL: cards que son <a> no deben mostrar texto azul por defecto.
   El default de los <a> es #0000EE (azul) — sobre nuestro fondo oscuro queda
   ilegible. Cualquier <a> que envuelva una tarjeta hereda el color del body. */
a.pq-world, a.book-card, a.char-card, a.lore-card, a.glass-card,
a[class*="card"], a[class*="-item"], a[class*="-tile"] {
  color: inherit;
}

/* ── Skeleton loaders for images (global, automatic) ──
   Apply via JS or class="zn-skeleton". Removes itself on load. */
@keyframes zn-shimmer {
  0% { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}
img.zn-loading,
.zn-skeleton {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(196,181,253,0.10) 30%,
      rgba(255,255,255,0.04) 60%);
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: zn-shimmer 1.6s ease-in-out infinite;
  color: transparent !important;
}
img.zn-loaded {
  animation: zn-fade-in 0.4s ease-out;
}
@keyframes zn-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* Skip link visible on focus (proper a11y pattern) */
.sr-only:focus, [class="sr-only"]:focus-visible {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important; height: auto !important;
  padding: 10px 18px !important;
  background: #FBBF24 !important;
  color: #030309 !important;
  font-weight: 800;
  border-radius: 8px;
  clip: auto !important;
  z-index: 100000;
  text-decoration: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE GLOBAL RULES — aplica a TODAS las páginas
   ══════════════════════════════════════════════════ */

/* Prevent horizontal scroll bug on every page */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* iOS doesn't bump text size on rotate */
  -webkit-tap-highlight-color: transparent; /* No grey flash on tap */
  /* Improved font rendering across platforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subpixel rendering hint for large text */
h1, h2, h3, .display, [class*="title"]{ font-feature-settings:"kern" 1, "liga" 1, "ss01"; }

/* Content-visibility for offscreen sections — Chrome/Edge skip rendering when not visible */
@supports (content-visibility: auto) {
  section, article, .section, .shop-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
  }
  /* But not for hero/above-the-fold elements */
  .hero, [class*="hero-section"], [class*="splash"], .planet-hero, .shop-hero, nav, #zn-bar { content-visibility: visible; }
}

/* Make all images responsive by default */
img, video, canvas, picture, svg {
  max-width: 100%;
  height: auto;
}
/* But preserve aspect for canvas/svg that explicitly set dimensions */
canvas, svg { height: auto; }

/* Touch-friendly buttons & links (minimum 44×44 per Apple HIG / WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {
  button, a.btn, .btn, [role="button"], a[class*="cta"], .nav-btn, .char-btn,
  input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Slightly larger tap targets in nav */
  nav a, nav button { padding: 10px 12px; }
}

/* iOS form input zoom prevention (font-size < 16px causes auto-zoom) */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="password"], textarea, select {
    font-size: 16px !important;
  }
}

/* Mobile-friendly modal/popup constraints */
@media (max-width: 600px) {
  /* Prevent modals from overflowing the viewport */
  .modal, [class*="modal"], [class*="popup"], [class*="overlay-content"] {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
}

/* Safer scroll on iOS — momentum scroll for inner scroll containers */
.scroll-container, [class*="scroll"], .overflow-auto, [class*="-scroll"] {
  -webkit-overflow-scrolling: touch;
}

/* Better text legibility on small screens */
@media (max-width: 480px) {
  body { font-size: 15px; line-height: 1.55; }
  h1 { line-height: 1.1; }
  h2 { line-height: 1.15; }
  p, li { hyphens: auto; word-break: break-word; }
}

/* Fix common villain/character page hero overflow */
@media (max-width: 600px) {
  .lb-wrap, .hero-img, .char-img-wrap, .planet-display {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Prevent fixed-position elements from blocking viewport on mobile */
@media (max-width: 480px) {
  /* WhatsApp / chat bubbles smaller on mobile */
  [class*="whatsapp"], [class*="chat-bubble"], .floating-btn {
    transform: scale(0.85);
    transform-origin: bottom right;
  }
}

/* ── Screen-reader only utility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}