/* ════════════════════════════════════════════════════════
   NADA QUE PERDER — nqp.css
   Estética: HBO · Euphoria · Thriller nocturno
   Tipografía: Bebas Neue + Cormorant Garamond + DM Sans
════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  /* Fondo */
  --bg0: #030308;
  --bg1: #07070f;
  --bg2: #0c0c1c;
  --bg3: #121228;
  --panel: #10101e;
  --panel2: #15152a;

  /* Bordes */
  --b0: rgba(255,255,255,0.04);
  --b1: rgba(255,255,255,0.08);
  --b-accent: rgba(108,64,210,0.25);

  /* Colores de acento */
  --purple: #6c40d2;
  --purple-s: #9b6ef8;
  --purple-d: rgba(108,64,210,0.12);
  --blue:   #2142a8;
  --blue-n: #4f7ef0;
  --gold:   #b8954a;
  --gold-s: rgba(184,149,74,0.15);

  /* Personajes */
  --c-john:    #7040d8;
  --c-karen:   #b83090;
  --c-drenthe: #2860d4;
  --c-ash:     #c03030;
  --c-chanel:  #30a878;
  --c-sheila:   #c08030;

  /* Texto */
  --t-hi:  #f0eeff;
  --t-mid: rgba(240,238,255,0.65);
  --t-lo:  rgba(240,238,255,0.35);
  --t-dim: rgba(240,238,255,0.18);

  /* Tipografía */
  --ff-display: 'Bebas Neue', 'Impact', sans-serif;
  --ff-serif:   'Cormorant Garamond', Georgia, serif;
  --ff-ui:      'DM Sans', system-ui, sans-serif;

  /* Radios / tiempos */
  --r: 3px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t3: 0.3s var(--ease);
  --t5: 0.5s var(--ease);
  --t8: 0.8s var(--ease);
}

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

/* Los pseudo-elementos decorativos nunca bloquean el ratón */
*::before, *::after { pointer-events: none; }

html { scroll-behavior: smooth; }
body {
  background: var(--bg0);
  color: var(--t-hi);
  font-family: var(--ff-ui);
  overflow-x: hidden;
}
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { border: none; background: none; color: inherit; }

::selection { background: var(--purple-d); color: var(--purple-s); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 2px; }



/* ═══════════════════════════════════════
   LOADER
═══════════════════════════════════════ */
.nqp-loader {
  position: fixed; inset: 0;
  background: var(--bg0);
  z-index: 9000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  transition: opacity .7s ease, visibility .7s ease;
}
.nqp-loader.out { opacity: 0; visibility: hidden; pointer-events: none; }

.nqp-loader-word {
  display: flex; gap: 4px;
  overflow: hidden;
  line-height: 1;
}
.nqp-loader-word2 {
  font-size: .65em;
  opacity: .45;
}
.nqp-loader-word span {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem,9vw,6rem);
  letter-spacing: .08em;
  color: var(--t-hi);
  animation: ldrChar .6s var(--ease) both;
}
.nqp-loader-word span:nth-child(1){animation-delay:.05s}
.nqp-loader-word span:nth-child(2){animation-delay:.10s}
.nqp-loader-word span:nth-child(3){animation-delay:.15s}
.nqp-loader-word span:nth-child(4){animation-delay:.20s}
.nqp-loader-word span:nth-child(5){animation-delay:.25s}
.nqp-loader-word span:nth-child(6){animation-delay:.30s}
.nqp-loader-word2 span:nth-child(1){animation-delay:.12s}
.nqp-loader-word2 span:nth-child(2){animation-delay:.17s}
.nqp-loader-word2 span:nth-child(3){animation-delay:.22s}

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

.nqp-loader-bar {
  width: 180px; height: 1px;
  background: var(--b1);
  margin-top: 2rem;
  overflow: hidden;
}
.nqp-loader-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--blue-n));
  animation: ldrFill 1.8s cubic-bezier(.4,0,.2,1) .4s forwards;
  width: 0;
}
@keyframes ldrFill { to { width: 100%; } }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
.nqp-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 3rem;
  transition: background .4s, padding .3s, backdrop-filter .4s;
}
.nqp-nav.stuck {
  background: rgba(3,3,8,.88);
  backdrop-filter: blur(18px);
  padding: 1rem 3rem;
  border-bottom: 1px solid var(--b0);
}
.nqp-nav-logo {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  letter-spacing: .12em;
  color: var(--t-hi);
}
.nqp-nav-links {
  display: flex; gap: 2.5rem; align-items: center;
}
.nqp-nav-links a {
  font-size: .72rem; font-weight: 300;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-lo);
  transition: color var(--t3);
  position: relative;
}
.nqp-nav-links a::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--purple-s);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t5);
}
.nqp-nav-links a:hover { color: var(--t-hi); }
.nqp-nav-links a:hover::after { transform: scaleX(1); }

.nqp-nav-cta {
  border: 1px solid var(--b-accent) !important;
  padding: .45rem 1.1rem;
  color: var(--purple-s) !important;
  transition: all var(--t3) !important;
}
.nqp-nav-cta:hover { background: var(--purple-d) !important; color: var(--t-hi) !important; }
.nqp-nav-cta::after { display: none !important; }

.nqp-hamburger {
  display: none; flex-direction: column; gap: 7px;
  padding: 4px; cursor: pointer;
}
.nqp-hamburger span {
  display: block; width: 22px; height: 1px; background: var(--t-hi);
  transition: all .25s;
}
.nqp-hamburger.on span:first-child { transform: translateY(8px) rotate(45deg); }
.nqp-hamburger.on span:last-child  { transform: translateY(-8px) rotate(-45deg); }

/* Menú móvil */
.nqp-mob-menu {
  position: fixed; inset: 0;
  background: rgba(3,3,8,.96);
  backdrop-filter: blur(24px);
  z-index: 490;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all var(--t3);
}
.nqp-mob-menu.on { opacity: 1; visibility: visible; }
.nqp-mob-menu ul { display: flex; flex-direction: column; gap: 2rem; text-align: center; }
.nqp-mob-link {
  font-family: var(--ff-serif);
  font-size: clamp(2rem,7vw,3rem);
  font-style: italic;
  color: var(--t-mid);
  transition: color var(--t3);
}
.nqp-mob-link:hover { color: var(--t-hi); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.nqp-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.nqp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; /* ninguna capa de fondo intercepta el ratón */
}

.nqp-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* ← el canvas NO intercepta el ratón */
}

.nqp-hero-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 25% 55%, rgba(20,8,60,.85) 0%, transparent 65%),
    radial-gradient(ellipse 70% 90% at 80% 20%, rgba(8,20,80,.5)  0%, transparent 55%),
    linear-gradient(180deg, rgba(3,3,8,.5) 0%, transparent 30%, rgba(3,3,8,.7) 80%, var(--bg0) 100%);
}

.nqp-hero-grain {
  position: absolute; inset: 0; opacity: .03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.nqp-hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 4rem;
  max-width: 1300px; width: 100%;
  padding: 9rem 4rem 6rem;
}

.nqp-hero-text { flex: 1; }

.nqp-eyebrow {
  font-size: .62rem; font-weight: 300;
  letter-spacing: .45em; text-transform: uppercase;
  color: var(--purple-s);
  display: block; margin-bottom: 1.4rem;
}

.nqp-hero-title {
  font-family: var(--ff-display);
  line-height: .88;
  margin-bottom: 2rem;
  display: flex; flex-direction: column;
}
.nqp-title-line1 {
  font-size: clamp(5rem,12vw,10rem);
  color: var(--t-hi);
  letter-spacing: .01em;
}
.nqp-title-line2 {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem,3vw,2.4rem);
  font-style: italic; font-weight: 300;
  letter-spacing: .35em;
  color: var(--t-lo);
  text-transform: uppercase;
  margin: -.2rem 0;
  line-height: 1.6;
}
.nqp-title-line3 {
  font-size: clamp(5rem,12vw,10rem);
  background: linear-gradient(120deg, var(--purple-s) 10%, var(--blue-n) 90%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .01em;
}

.nqp-hero-tagline {
  font-family: var(--ff-serif);
  font-size: clamp(.95rem,2.2vw,1.3rem);
  font-weight: 300; line-height: 1.75;
  color: var(--t-mid);
  margin-bottom: 1.8rem;
}
.nqp-hero-tagline em { color: var(--t-hi); font-style: italic; }

.nqp-hero-meta { display: flex; gap: .75rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.nqp-pill {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid var(--b1);
  padding: .3rem .8rem;
  color: var(--t-dim);
}

.nqp-hero-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 2.2rem;
  border: 1px solid rgba(108,64,210,.45);
  font-size: .72rem; font-weight: 300; letter-spacing: .18em;
  text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: border-color var(--t3), box-shadow var(--t5);
}
.nqp-hero-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--purple-d), transparent);
  transform: translateX(-100%);
  transition: transform var(--t5);
}
.nqp-hero-btn:hover::before { transform: translateX(0); }
.nqp-hero-btn:hover { border-color: var(--purple-s); box-shadow: 0 0 24px rgba(108,64,210,.2); }
.nqp-hero-btn svg { width: 16px; height: 16px; transition: transform var(--t3); }
.nqp-hero-btn:hover svg { transform: translateX(4px); }

/* Aside editorial eliminado */

/* Scroll hint */
.nqp-scroll-hint {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  z-index: 2;
}
.nqp-scroll-line {
  width: 1px; height: 55px;
  background: linear-gradient(180deg, transparent, var(--purple-s));
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.25} 50%{opacity:.9} }
.nqp-scroll-hint span {
  font-size: .52rem; letter-spacing: .4em; text-transform: uppercase; color: var(--t-dim);
}

/* ── Animaciones de entrada hero ── */
.nqp-anim {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s var(--ease);
}
.nqp-anim.in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════
   SINOPSIS
═══════════════════════════════════════ */
.nqp-synopsis {
  max-width: 860px; margin: 0 auto;
  padding: 7rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
  text-align: center;
}
.nqp-synopsis-deco {
  font-size: 1.8rem; color: var(--purple-s); opacity: .3;
  animation: synDeco 4s ease-in-out infinite;
}
@keyframes synDeco { 0%,100%{opacity:.2} 50%{opacity:.5} }
.nqp-synopsis-body p {
  font-family: var(--ff-serif);
  font-size: clamp(1.05rem,2.2vw,1.35rem);
  font-weight: 300; line-height: 1.85;
  color: var(--t-mid);
  margin-bottom: 1.5rem;
}
.nqp-synopsis-body em { color: var(--t-hi); font-style: italic; }

/* ═══════════════════════════════════════
   SECCIONES — CABECERA COMPARTIDA
═══════════════════════════════════════ */
.nqp-section { padding: 7rem 2rem 8rem; max-width: 1400px; margin: 0 auto; }
.nqp-section-head { text-align: center; margin-bottom: 4.5rem; }

.nqp-label {
  display: block;
  font-size: .58rem; font-weight: 400; letter-spacing: .45em;
  text-transform: uppercase; color: var(--purple-s);
  margin-bottom: 1rem;
}
.nqp-sh-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem,6vw,5rem);
  line-height: .95;
  letter-spacing: .02em;
}
.nqp-sh-title em {
  font-family: var(--ff-serif);
  font-style: italic; font-weight: 300;
  font-size: .72em; letter-spacing: .04em;
  background: linear-gradient(120deg, var(--purple-s), var(--blue-n));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nqp-sh-sub {
  font-family: var(--ff-serif);
  font-size: 1.05rem; color: var(--t-lo);
  margin-top: 1.2rem;
}

/* ── Scroll Reveal ── */
.nqp-reveal {
  opacity: 0; transform: translateY(38px);
  transition: opacity .85s ease, transform .85s var(--ease);
  transition-delay: var(--cd, 0s);
}
.nqp-reveal.vis { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════
   PERSONAJES
═══════════════════════════════════════ */
.nqp-chars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}

.nqp-char {
  border: 1px solid var(--b0);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--t5), transform var(--t5);
  cursor: pointer;
}
.nqp-char:hover { border-color: var(--b-accent); transform: translateY(-5px); }

/* Visual superior del personaje */
.nqp-char-visual {
  position: relative;
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
[data-char="john"]    .nqp-char-visual,
.nqp-char-visual[data-char="john"]    { background: linear-gradient(160deg,#06041a 0%,#1a0d50 55%,#2e1880 100%); }
[data-char="karen"]   .nqp-char-visual,
.nqp-char-visual[data-char="karen"]   { background: linear-gradient(160deg,#0e040e 0%,#3a0830 55%,#6a1050 100%); }
[data-char="drenthe"] .nqp-char-visual,
.nqp-char-visual[data-char="drenthe"] { background: linear-gradient(160deg,#04060e 0%,#0e1840 55%,#1a3075 100%); }
[data-char="selena"] .nqp-char-visual,
.nqp-char-visual[data-char="selena"] { background: linear-gradient(160deg,#3e001f 0%,#8c0165 55%,#f202b6 100%); }
[data-char="ash"]     .nqp-char-visual,
.nqp-char-visual[data-char="ash"]     { background: linear-gradient(160deg,#0e0404 0%,#3a0c0c 55%,#6a1515 100%); }
[data-char="chanel"]  .nqp-char-visual,
.nqp-char-visual[data-char="chanel"]  { background: linear-gradient(160deg,#04100c 0%,#0a2c20 55%,#124838 100%); }

/* Resplandor de color por personaje */
.nqp-char-glow {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  filter: blur(40px); opacity: .45;
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}
.john-glow    { background: var(--c-john); }
.karen-glow   { background: var(--c-karen); }
.drenthe-glow { background: var(--c-drenthe); }
.selena-glow { background: var(--c-selena); }
.ash-glow     { background: var(--c-ash); }
.chanel-glow  { background: var(--c-chanel); }

@keyframes glowPulse {
  0%,100% { transform: scale(1);   opacity:.35; }
  50%     { transform: scale(1.2); opacity:.55; }
}

/* Contenedor interno del visual (glow + imagen opcional) */
.nqp-char-img-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* Imagen de personaje cuando se carga desde local/servidor */
.nqp-char-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .6s var(--ease);
  /* Gradiente inferior para que el nombre siempre sea legible */
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.nqp-char:hover .nqp-char-photo { transform: scale(1.05); }

/* Cuando hay foto, el glow queda como overlay sutil */
.nqp-char-visual.has-photo .nqp-char-glow {
  opacity: .2;
  mix-blend-mode: screen;
}

/* Número */
.nqp-char-num {
  position: absolute; bottom: .8rem; right: .9rem;
  font-family: var(--ff-display); font-size: 2.8rem;
  color: white; opacity: .06; letter-spacing: .02em;
  line-height: 1;
}

/* Línea inferior de color */
.nqp-char-stripe {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
}
.john-stripe    { background: var(--c-john);    box-shadow: 0 0 12px var(--c-john); }
.karen-stripe   { background: var(--c-karen);   box-shadow: 0 0 12px var(--c-karen); }
.drenthe-stripe { background: var(--c-drenthe); box-shadow: 0 0 12px var(--c-drenthe); }
.selena-stripe { background: var(--c-selena); box-shadow: 0 0 12px var(--c-selena); }
.ash-stripe     { background: var(--c-ash);     box-shadow: 0 0 12px var(--c-ash); }
.chanel-stripe  { background: var(--c-chanel);  box-shadow: 0 0 12px var(--c-chanel); }

/* Info del personaje */
.nqp-char-info { padding: 1.3rem 1.2rem 1.6rem; }
.nqp-char-role {
  font-size: .52rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--purple-s); margin-bottom: .4rem;
}
.nqp-char-name {
  font-family: var(--ff-display);
  font-size: 1.9rem; letter-spacing: .04em;
  line-height: 1; color: var(--t-hi); margin-bottom: .3rem;
}
.nqp-char-arch {
  font-family: var(--ff-serif); font-style: italic;
  font-size: .82rem; color: var(--t-dim); line-height: 1.4;
}
.nqp-char-div {
  width: 28px; height: 1px; background: var(--b1); margin: .9rem 0;
}
.nqp-char-desc {
  font-family: var(--ff-serif); font-size: .9rem;
  line-height: 1.7; color: var(--t-mid);
}
.nqp-char-tags {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem;
}
.nqp-char-tags span {
  font-size: .5rem; letter-spacing: .15em; text-transform: uppercase;
  border: 1px solid var(--b0); padding: .2rem .55rem; color: var(--t-dim);
}

/* ═══════════════════════════════════════
   TRAILERS
═══════════════════════════════════════ */
.nqp-trailers-section { background: none; }

.nqp-trailers-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.2rem;
}

.nqp-trailer-card {
  background: var(--panel);
  border: 1px solid var(--b0);
  overflow: hidden;
  transition: border-color var(--t5), transform var(--t5);
}
.nqp-trailer-card:hover { border-color: var(--b-accent); transform: translateY(-2px); }
.nqp-trailer-main { grid-row: 1 / 3; }

.nqp-trailer-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.nqp-trailer-main .nqp-trailer-thumb { aspect-ratio: 16 / 10; }

/* Fondos placeholder de colores para cada tráiler */
.nqp-trailer-bg {
  position: absolute; inset: 0;
  pointer-events: none; /* el fondo no bloquea clics ni ratón */
  transition: transform .6s var(--ease);
}
.nqp-trailer-card:hover .nqp-trailer-bg { transform: scale(1.04); }

.nqp-tbg-main  {
  background:
    linear-gradient(180deg,rgba(3,3,8,0) 0%,rgba(3,3,8,.88) 100%),
    radial-gradient(ellipse at 30% 50%,rgba(35,10,100,.9) 0%,transparent 60%),
    radial-gradient(ellipse at 75% 25%,rgba(10,30,110,.5) 0%,transparent 55%),
    #080614;
}
.nqp-tbg-john  {
  background:
    linear-gradient(180deg,rgba(3,3,8,0) 0%,rgba(3,3,8,.88) 100%),
    radial-gradient(ellipse at 50% 45%,rgba(70,20,180,.8) 0%,transparent 65%), #06041a;
}
.nqp-tbg-karen {
  background:
    linear-gradient(180deg,rgba(3,3,8,0) 0%,rgba(3,3,8,.88) 100%),
    radial-gradient(ellipse at 50% 45%,rgba(120,15,90,.8) 0%,transparent 65%), #0e0410;
}
.nqp-tbg-ia {
  background:
    linear-gradient(180deg,rgba(3,3,8,0) 0%,rgba(3,3,8,.88) 100%),
    radial-gradient(ellipse at 50% 45%,rgba(15,45,120,.7) 0%,transparent 65%), #04060e;
}

.nqp-trailer-overlay {
  position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 2;
}
.nqp-trailer-eyebrow {
  font-size: .55rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--t-lo); margin-bottom: .3rem;
}
.nqp-trailer-big-title {
  font-family: var(--ff-display); font-size: 2rem; letter-spacing: .04em;
  font-style: italic; color: var(--t-hi);
}

/* Botón play */
.nqp-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(108,64,210,.18);
  border: 1px solid rgba(108,64,210,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t3); z-index: 3;
  backdrop-filter: blur(6px);
}
.nqp-play:hover {
  background: rgba(108,64,210,.4);
  border-color: var(--purple-s);
  transform: translate(-50%,-50%) scale(1.12);
  box-shadow: 0 0 35px rgba(108,64,210,.35);
}
.nqp-play svg { width: 20px; height: 20px; margin-left: 3px; }

.nqp-dur {
  position: absolute; bottom: 1rem; right: 1rem;
  font-size: .58rem; letter-spacing: .1em; color: var(--t-lo); z-index: 3;
}
.nqp-badge {
  position: absolute; top: .8rem; right: .8rem;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid rgba(79,126,240,.35);
  color: var(--blue-n); padding: .2rem .6rem; z-index: 3;
  background: rgba(79,126,240,.1);
}

.nqp-trailer-foot { padding: 1.1rem 1.3rem 1.4rem; }
.nqp-trailer-type {
  font-size: .53rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--purple-s); display: block; margin-bottom: .4rem;
}
.nqp-trailer-desc {
  font-family: var(--ff-serif); font-size: .88rem;
  color: var(--t-lo); line-height: 1.6;
}

/* Modal vídeo */
.nqp-vmodal {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all var(--t3);
}
.nqp-vmodal.on { opacity: 1; visibility: visible; }
.nqp-vmodal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3,3,8,.96); backdrop-filter: blur(18px);
}
.nqp-vmodal-inner {
  position: relative; z-index: 2;
  width: min(900px, 94vw);
}
.nqp-vmodal-close {
  position: absolute; top: -2.8rem; right: 0;
  cursor: pointer; color: var(--t-mid); transition: color var(--t3);
}
.nqp-vmodal-close:hover { color: var(--t-hi); }
.nqp-vmodal-close svg { width: 22px; height: 22px; }
.nqp-vmodal-frame {
  aspect-ratio: 16/9;
  background: var(--panel);
  border: 1px solid var(--b0);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.nqp-vmodal-frame iframe { width: 100%; height: 100%; border: none; }
.nqp-vm-placeholder {
  text-align: center; padding: 2rem;
  font-family: var(--ff-serif); font-size: 1rem;
  color: var(--t-dim); line-height: 2;
}
.nqp-vm-placeholder code { color: var(--purple-s); font-size: .85rem; }

/* ═══════════════════════════════════════
   CAPÍTULOS
═══════════════════════════════════════ */
.nqp-chaps-section { background: var(--bg1); }

.nqp-chaps-state {
  text-align: center; padding: 4rem 1rem; color: var(--t-lo);
}
.nqp-dots { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.nqp-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-s);
  animation: dotB 1.4s ease-in-out infinite;
}
.nqp-dots span:nth-child(2) { animation-delay: .2s; }
.nqp-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotB { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

.nqp-chaps-err-msg {
  font-family: var(--ff-serif); font-size: 1rem; font-style: italic; color: var(--t-lo);
}
.nqp-chaps-err-msg span {
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--purple-s); font-style: normal; display: block; margin-top: .8rem;
}

/* Lista */
.nqp-chaps-list {
  display: flex; flex-direction: column; gap: 1px;
  max-width: 860px; margin: 0 auto;
}

.nqp-chap-item {
  display: flex; align-items: center; gap: 1.8rem;
  padding: 1.6rem 2rem;
  background: var(--panel);
  border: 1px solid var(--b0);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--t3), border-color var(--t3);
}
.nqp-chap-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--purple);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t5);
}
.nqp-chap-item:hover { background: var(--panel2); border-color: var(--b-accent); }
.nqp-chap-item:hover::before { transform: scaleY(1); }

.nqp-chap-num {
  font-family: var(--ff-display);
  font-size: 2rem; letter-spacing: .04em;
  color: var(--purple-s); opacity: .5;
  min-width: 2.5rem;
}
.nqp-chap-body { flex: 1; }
.nqp-chap-title {
  font-family: var(--ff-serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--t-hi); margin-bottom: .25rem;
}
.nqp-chap-date {
  font-size: .58rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--t-dim);
}
.nqp-chap-arrow {
  color: var(--t-dim);
  transition: color var(--t3), transform var(--t3);
}
.nqp-chap-item:hover .nqp-chap-arrow { color: var(--purple-s); transform: translateX(5px); }
.nqp-chap-arrow svg { width: 18px; height: 18px; }

/* Lector */
.nqp-reader { max-width: 760px; margin: 0 auto; }

.nqp-reader-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 0 1.8rem;
  border-bottom: 1px solid var(--b0);
  margin-bottom: 3rem;
}
.nqp-reader-back {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--t-mid); transition: color var(--t3);
}
.nqp-reader-back:hover { color: var(--t-hi); }
.nqp-reader-back svg { width: 16px; height: 16px; }

.nqp-reader-meta {
  font-size: .58rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--purple-s);
}
.nqp-reader-tools { display: flex; gap: .5rem; }
.nqp-reader-tools button {
  background: var(--panel); border: 1px solid var(--b1);
  color: var(--t-mid); font-size: .7rem; padding: .35rem .7rem;
  cursor: pointer; transition: all var(--t3);
}
.nqp-reader-tools button:hover { color: var(--t-hi); border-color: var(--purple-s); }

.nqp-reader-progress {
  height: 1px; background: var(--b0);
  margin-bottom: 3rem; position: relative;
}
.nqp-reader-prog-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--purple-s); transition: width .1s linear;
}

.nqp-reader-body {
  font-family: var(--ff-serif);
  font-size: 1.15rem; line-height: 2;
  color: var(--t-mid);
}
.nqp-reader-body.big { font-size: 1.35rem; }
.nqp-reader-body p { margin-bottom: 1.7rem; }
.nqp-reader-body .drop { float: left; font-size: 4.2em; line-height: .78; margin: .05em .12em 0 0; color: var(--t-hi); font-weight: 700; }

/* ═══════════════════════════════════════
   FRASES
═══════════════════════════════════════ */
.nqp-quotes {
  padding: 9rem 2rem;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(18,10,50,.5) 0%, transparent 70%),
    var(--bg1);
}
.nqp-quotes-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 6rem;
}
.nqp-quote { display: flex; flex-direction: column; gap: .8rem; }
.nqp-quote-r { align-items: flex-end; text-align: right; }
.nqp-qm {
  font-family: var(--ff-display);
  font-size: 4.5rem; line-height: .5;
  color: var(--purple-s); opacity: .2;
}
blockquote {
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem,2.8vw,1.9rem);
  font-weight: 300; font-style: italic; line-height: 1.5;
  color: var(--t-hi); max-width: 640px;
}
figcaption {
  font-size: .58rem; letter-spacing: .35em;
  text-transform: uppercase; color: var(--purple-s);
}

/* ═══════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════ */
.nqp-newsletter {
  padding: 8rem 2rem;
  background: var(--bg0);
  position: relative; overflow: hidden;
}
.nqp-newsletter::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(15,8,40,.6) 0%, transparent 70%);
}
.nqp-nl-inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
.nqp-nl-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem,4.5vw,3.6rem);
  line-height: .9; letter-spacing: .02em;
  margin: 1rem 0;
}
.nqp-nl-title em {
  font-family: var(--ff-serif);
  font-style: italic; font-weight: 300;
  font-size: .78em;
  background: linear-gradient(120deg, var(--purple-s), var(--blue-n));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nqp-nl-desc {
  font-family: var(--ff-serif); font-size: 1rem;
  color: var(--t-lo); line-height: 1.75;
}

.nqp-nl-form { display: flex; flex-direction: column; gap: .9rem; }

.nqp-input {
  width: 100%;
  background: var(--panel); border: 1px solid var(--b1);
  color: var(--t-hi); font-family: var(--ff-serif); font-size: 1rem;
  padding: .95rem 1.2rem; outline: none;
  transition: border-color var(--t3), box-shadow var(--t3);
  appearance: none;
  -webkit-appearance: none;
}
.nqp-input::placeholder { color: var(--t-dim); }
.nqp-input:focus {
  border-color: rgba(108,64,210,.5);
  box-shadow: 0 0 0 1px rgba(108,64,210,.15);
}

.nqp-submit {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 2rem;
  background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
  font-size: .72rem; font-weight: 300; letter-spacing: .18em;
  text-transform: uppercase; cursor: pointer;
  transition: box-shadow var(--t3), transform var(--t3);
  position: relative; overflow: hidden;
}
.nqp-submit::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  opacity: 0; transition: opacity var(--t3);
}
.nqp-submit:hover::before { opacity: 1; }
.nqp-submit:hover { box-shadow: 0 8px 28px rgba(108,64,210,.35); transform: translateY(-1px); }
.nqp-submit span, .nqp-submit svg { position: relative; z-index: 1; }
.nqp-submit svg { width: 16px; height: 16px; }

.nqp-nl-ok {
  font-family: var(--ff-serif); font-size: .95rem;
  font-style: italic; color: var(--purple-s); text-align: center;
}
.nqp-nl-err {
  font-family: var(--ff-ui); font-size: .78rem;
  color: #e05555; text-align: center;
}
.nqp-nl-legal {
  font-size: .55rem; letter-spacing: .15em; color: var(--t-dim); text-align: center;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.nqp-footer {
  border-top: 1px solid var(--b0);
  padding: 2.5rem 2rem;
  background: var(--bg0);
}
.nqp-footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.nqp-footer-brand { display: flex; align-items: baseline; gap: 1rem; }
.nqp-footer-logo {
  font-family: var(--ff-display); font-size: 1.3rem;
  letter-spacing: .1em; color: var(--t-hi);
}
.nqp-footer-tagline {
  font-family: var(--ff-serif); font-style: italic;
  font-size: .85rem; color: var(--t-dim);
}
.nqp-footer-nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.nqp-footer-nav a {
  font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--t-dim);
  transition: color var(--t3);
}
.nqp-footer-nav a:hover { color: var(--purple-s); }
.nqp-footer-copy {
  font-size: .58rem; letter-spacing: .1em; color: var(--t-dim);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  .nqp-chars { grid-template-columns: repeat(3,1fr); }
  .nqp-trailers-grid { grid-template-columns: 1fr; }
  .nqp-trailer-main { grid-row: auto; }
}

@media (max-width: 900px) {
  .nqp-nav { padding: 1.2rem 1.5rem; }
  .nqp-nav.stuck { padding: .9rem 1.5rem; }
  .nqp-nav-links { display: none; }
  .nqp-hamburger { display: flex; }
  .nqp-hero-inner { flex-direction: column; padding: 7rem 2rem 5rem; }
  .nqp-hero-aside { border-left: none; border-top: 1px solid var(--b1); padding: 1.5rem 0 0; flex-direction: row; gap: 2rem; flex-wrap: wrap; }
  .nqp-aside-sep { display: none; }
  .nqp-nl-inner { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 650px) {
  .nqp-chars { grid-template-columns: 1fr 1fr; }
  .nqp-hero-title .nqp-title-line1,
  .nqp-hero-title .nqp-title-line3 { font-size: clamp(3.5rem,15vw,5.5rem); }
  .nqp-section { padding: 5rem 1.2rem 6rem; }
  .nqp-footer-inner { flex-direction: column; text-align: center; }
  .nqp-footer-nav { justify-content: center; }
}

@media (max-width: 480px) {
  .nqp-chars { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .nqp-chap-item { padding: 1.2rem 1.2rem; }
}
/* ════════════════════════════════════════════════
   SHEILA — Personaje nuevo
════════════════════════════════════════════════ */
[data-char="sheila"] { background: linear-gradient(160deg,#100a04 0%,#2c1a08 55%,#4a2c10 100%); }
.sheila-glow   { background: var(--c-sheila); }
.sheila-stripe { background: var(--c-sheila); box-shadow: 0 0 12px var(--c-sheila); }

[data-char="rayman"] { background: linear-gradient(160deg,#041018 0%,#082030 55%,#104050 100%); }
.rayman-glow   { background: #2090c0; }
.rayman-stripe { background: #2090c0; box-shadow: 0 0 12px #2090c0; }

[data-char="selena"] { background: linear-gradient(160deg,#180410 0%,#380820 55%,#601040 100%); }
.selena-glow   { background: #d04080; }
.selena-stripe { background: #d04080; box-shadow: 0 0 12px #d04080; }

/* ════════════════════════════════════════════════
   LIBRO 3D — Realista y cinematográfico
════════════════════════════════════════════════ */

/* ─── Variables del libro ─── */
:root {
  --book-w:      210px;   /* ancho portada */
  --book-h:      310px;   /* alto portada  */
  --book-depth:  40px;    /* grosor del lomo */
  --spine-col-1: #1a0838;
  --spine-col-2: #0d0420;
  --pages-col:   #f0ebe0;
}

/* ─── Contenedor externo ─── */
.nqp-book-wrap {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  /* La perspectiva se pone aquí, no en el libro */
  perspective: 1200px;
  perspective-origin: 50% 38%;
}

/* ─── Luz ambiental detrás ─── */
.nqp-book-halo {
  position: absolute;
  top: 42%; left: 50%;
  width: 320px; height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(108,64,210,.22) 0%,
    rgba(79,126,240,.08) 45%,
    transparent 72%
  );
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: haLo 6s ease-in-out infinite;
}
@keyframes haLo {
  0%,100% { opacity:.65; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:.95; transform:translate(-50%,-50%) scale(1.1); }
}

/* ─── Escena 3D (recibe el mousemove) ─── */
.nqp-book-scene {
  position: relative;
  z-index: 2;
  width: calc(var(--book-w) + var(--book-depth));
  height: var(--book-h);
  transform-style: preserve-3d;
  cursor: pointer;
}

/* ─── El libro (transform-style preserve-3d) ─── */
.nqp-book {
  width: var(--book-w);
  height: var(--book-h);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-32deg) rotateX(4deg);
  transition: transform 1.2s cubic-bezier(.19,1,.22,1);
  will-change: transform;

  /* Flotación suave continua via JS, no CSS animation
     para poder combinar con el seguimiento del ratón */
}

/* ─── CARA: PORTADA ─── */
.nqp-book-front {
  position: absolute;
  width: var(--book-w);
  height: var(--book-h);
  transform: translateZ(calc(var(--book-depth) / 2));
  overflow: hidden;
  border-radius: 0 2px 2px 0;
  backface-visibility: hidden;

  /* Sombra lateral que da sensación de profundidad */
  box-shadow:
    2px 0  12px rgba(0,0,0,.5),
    4px 0  30px rgba(0,0,0,.35),
   -1px 0   4px rgba(0,0,0,.6);
}

.nqp-book-front > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 2px 2px 0;
  /* Sin filtro — queremos los colores reales de la portada */
}

/* Brillo especular que sigue el ratón */
.nqp-book-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  /* El gradiente se actualiza vía JS */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.03) 30%,
    transparent 60%
  );
  mix-blend-mode: screen;
  transition: background .15s ease;
}

/* ─── CARA: LOMO ─── */
.nqp-book-spine {
  position: absolute;
  width: var(--book-depth);
  height: var(--book-h);
  /* El lomo está a la izquierda de la portada */
  transform: rotateY(-90deg) translateZ(0)
             translateX(calc(var(--book-depth) * -1));
  transform-origin: right center;
  backface-visibility: hidden;
  border-radius: 2px 0 0 2px;
  overflow: hidden;

  /* Gradiente que simula el curvado del lomo */
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.5)  0%,
      rgba(0,0,0,.1)  25%,
      rgba(255,255,255,.04) 50%,
      rgba(0,0,0,.15) 75%,
      rgba(0,0,0,.4)  100%
    ),
    linear-gradient(
      180deg,
      var(--spine-col-1) 0%,
      var(--spine-col-2) 40%,
      #160632 60%,
      var(--spine-col-1) 100%
    );

  box-shadow: inset -2px 0 8px rgba(0,0,0,.6);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

/* Título vertical en el lomo */
.nqp-book-spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Bebas Neue', sans-serif;
  font-size: .72rem;
  letter-spacing: .28em;
  color: rgba(240,235,255,.58);
  white-space: nowrap;
  overflow: hidden;
  max-height: 160px;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* Autor vertical en el lomo */
.nqp-book-spine-author {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'DM Sans', sans-serif;
  font-size: .42rem;
  letter-spacing: .38em;
  color: rgba(155,110,248,.5);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Línea decorativa en lomo */
.nqp-book-spine::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px; right: 4px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(155,110,248,.25) 25%,
    rgba(155,110,248,.35) 50%,
    rgba(155,110,248,.25) 75%,
    transparent 100%
  );
}

/* ─── CARA: CONTRAPORTADA ─── */
.nqp-book-back {
  position: absolute;
  width: var(--book-w);
  height: var(--book-h);
  transform: translateZ(calc(var(--book-depth) / 2 * -1)) rotateY(180deg);
  backface-visibility: hidden;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(135deg, #130528 0%, #06021a 60%, #0a0318 100%);
  box-shadow: inset 2px 0 12px rgba(0,0,0,.5);
}

/* ─── CARA: CANTO SUPERIOR ─── */
.nqp-book-top {
  position: absolute;
  width: var(--book-w);
  height: calc(var(--book-depth));
  top: 0;
  transform: rotateX(90deg) translateY(calc(var(--book-depth) / 2 * -1));
  transform-origin: top center;
  backface-visibility: hidden;
  /* Páginas vistas desde arriba: franjas finas */
  background:
    repeating-linear-gradient(
      90deg,
      var(--pages-col)    0px,
      var(--pages-col)    1px,
      rgba(200,190,175,.6) 1px,
      rgba(200,190,175,.6) 2px
    );
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.2);
}

/* ─── CARA: CANTO INFERIOR ─── */
.nqp-book-bottom {
  position: absolute;
  width: var(--book-w);
  height: calc(var(--book-depth));
  bottom: 0;
  transform: rotateX(-90deg) translateY(calc(var(--book-depth) / 2));
  transform-origin: bottom center;
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      var(--pages-col)    0px,
      var(--pages-col)    1px,
      rgba(200,190,175,.6) 1px,
      rgba(200,190,175,.6) 2px
    );
}

/* ─── CARA: PÁGINAS (canto derecho) ─── */
.nqp-book-pages {
  position: absolute;
  width: calc(var(--book-depth));
  height: var(--book-h);
  right: calc(var(--book-depth) / 2 * -1);
  transform: rotateY(90deg);
  transform-origin: left center;
  backface-visibility: hidden;
  overflow: hidden;

  /* Páginas: franjas horizontales muy finas */
  background:
    /* Sombra lateral izquierda (lomo) */
    linear-gradient(
      90deg,
      rgba(0,0,0,.3) 0%,
      rgba(0,0,0,.05) 20%,
      transparent 50%,
      rgba(0,0,0,.02) 80%,
      rgba(0,0,0,.1) 100%
    ),
    /* Textura de páginas */
    repeating-linear-gradient(
      0deg,
      var(--pages-col)    0px,
      var(--pages-col)    1.5px,
      rgba(210,200,185,.7) 1.5px,
      rgba(210,200,185,.7) 2px
    );
}

/* Curvatura de las páginas (sensación de libro abierto/cerrado) */
.nqp-book-pages::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.14) 55%,
    rgba(255,255,255,.04) 75%,
    transparent 100%
  );
}

/* ─── SOMBRA PROYECTADA EN EL SUELO ─── */
.nqp-book-shadow {
  width: 180px;
  height: 20px;
  position: relative;
  z-index: 1;
  background: radial-gradient(
    ellipse 80% 100% at 55% 50%,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.2) 55%,
    transparent 100%
  );
  filter: blur(8px);
  transform: scaleX(1.1) translateX(8px);
  /* La sombra se sincroniza con el libro via JS */
  transition: opacity .4s ease, transform .4s ease;
}

/* ─── ETIQUETA INFERIOR ─── */
.nqp-book-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  opacity: 0;
  animation: labelFadeIn .9s ease 2s forwards;
  z-index: 2;
  position: relative;
}
@keyframes labelFadeIn {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}
.nqp-book-label-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .92rem;
  color: rgba(240,236,255,.42);
  letter-spacing: .06em;
}
.nqp-book-label-author {
  font-size: .5rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(155,110,248,.38);
}

/* ─── PARTÍCULAS FLOTANTES ─── */
.nqp-book-particles {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 400px;
  pointer-events: none;
  z-index: 1;
}
.nqp-book-particles span {
  position: absolute;
  border-radius: 50%;
  animation: spkFloat linear infinite;
}
.nqp-book-particles span:nth-child(1){
  width:3px;height:3px;background:rgba(155,110,248,.65);
  top:12%;left:18%;animation-duration:9s;animation-delay:0s;
}
.nqp-book-particles span:nth-child(2){
  width:2px;height:2px;background:rgba(79,126,240,.55);
  top:72%;left:78%;animation-duration:12s;animation-delay:-4s;
}
.nqp-book-particles span:nth-child(3){
  width:3.5px;height:3.5px;background:rgba(184,149,74,.35);
  top:83%;left:22%;animation-duration:15s;animation-delay:-7s;
}
.nqp-book-particles span:nth-child(4){
  width:2px;height:2px;background:rgba(155,110,248,.4);
  top:18%;left:82%;animation-duration:10s;animation-delay:-2s;
}
.nqp-book-particles span:nth-child(5){
  width:2.5px;height:2.5px;background:rgba(79,126,240,.45);
  top:52%;left:6%;animation-duration:13s;animation-delay:-6s;
}
.nqp-book-particles span:nth-child(6){
  width:2px;height:2px;background:rgba(155,110,248,.35);
  top:38%;left:90%;animation-duration:11s;animation-delay:-9s;
}
@keyframes spkFloat {
  0%  { opacity:0; transform:scale(.6) translate(0,0); }
  15% { opacity:1; transform:scale(1)  translate(6px,-14px); }
  50% { opacity:.5;transform:scale(.8) translate(-8px,-22px); }
  85% { opacity:.8;transform:scale(1.1) translate(10px,-8px); }
  100%{ opacity:0; transform:scale(.6) translate(0,0); }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .nqp-book-wrap { display: none; }
}

/* ════════════════════════════════════════════════
   NAV AUTH — botón de usuario en la nav
════════════════════════════════════════════════ */
.nqp-nav-auth { display: flex; align-items: center; }

.nqp-auth-btn {
  font-size: .65rem; font-weight: 300; letter-spacing: .15em;
  text-transform: uppercase;
  border: 1px solid rgba(108,64,210,.4);
  padding: .4rem 1rem;
  color: var(--purple-s);
  cursor: pointer;
  transition: all .25s;
}
.nqp-auth-btn:hover { background: var(--purple-d); }

.nqp-auth-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; cursor: pointer;
  border: 2px solid rgba(108,64,210,.4);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel);
  transition: border-color .25s;
  font-size: .85rem; font-weight: 500;
  color: var(--purple-s);
}
.nqp-auth-avatar:hover { border-color: var(--purple-s); }
.nqp-auth-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════
   HINT DE LOGIN en capítulos
════════════════════════════════════════════════ */
.nqp-login-hint {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
}
.nqp-inline-login {
  background: none; border: 1px solid rgba(108,64,210,.4);
  color: var(--purple-s); font-size: .65rem;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .3rem .8rem; cursor: pointer;
  transition: all .25s; margin-left: .5rem;
}
.nqp-inline-login:hover { background: var(--purple-d); }

/* ════════════════════════════════════════════════
   CAPÍTULOS — indicadores leído/favorito
════════════════════════════════════════════════ */
.nqp-chap-item { position: relative; }

.nqp-chap-badges {
  display: flex; gap: .35rem; align-items: center;
}
.nqp-chap-badge-leido,
.nqp-chap-badge-fav {
  font-size: .5rem; letter-spacing: .1em;
  padding: .15rem .45rem;
}
.nqp-chap-badge-leido {
  border: 1px solid rgba(79,126,240,.3);
  color: var(--blue-n);
  background: rgba(79,126,240,.08);
}
.nqp-chap-badge-fav {
  border: 1px solid rgba(184,48,144,.3);
  color: #e060b0;
  background: rgba(184,48,144,.08);
}

/* ════════════════════════════════════════════════
   LECTOR FULLSCREEN OVERLAY
════════════════════════════════════════════════ */
.nqp-reader-overlay {
  position: fixed; inset: 0;
  z-index: 800;
  background: #06060f;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  overflow: hidden;
}
.nqp-reader-overlay.open {
  transform: translateY(0);
}

/* Barra superior del lector */
.nqp-reader-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(6,6,15,.95);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  z-index: 2;
}

.nqp-reader-close {
  display: flex; align-items: center; gap: .5rem;
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(240,238,255,.45); cursor: pointer;
  transition: color .25s;
}
.nqp-reader-close:hover { color: #f0eeff; }
.nqp-reader-close svg { width: 16px; height: 16px; }

.nqp-reader-chapinfo {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  text-align: center;
}
.nqp-reader-chapnum {
  font-size: .52rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--purple-s);
}
.nqp-reader-chaptitle {
  font-family: var(--ff-serif); font-style: italic;
  font-size: .95rem; color: rgba(240,238,255,.7);
}

.nqp-reader-actions {
  display: flex; align-items: center; gap: .5rem;
}
.nqp-reader-fav {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.1); cursor: pointer;
  border-radius: 50%;
  transition: all .25s;
  color: rgba(240,238,255,.4);
}
.nqp-reader-fav:hover,
.nqp-reader-fav.active {
  border-color: #e060b0;
  color: #e060b0;
  background: rgba(184,48,144,.1);
}
.nqp-reader-fav svg { width: 16px; height: 16px; }
.nqp-reader-fav.active svg { fill: #e060b0; }

.nqp-reader-font {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(240,238,255,.5); font-size: .7rem;
  padding: .3rem .6rem; cursor: pointer;
  transition: all .25s;
}
.nqp-reader-font:hover { color: #f0eeff; border-color: rgba(255,255,255,.2); }

/* Barra de progreso */
.nqp-reader-progress-bar {
  height: 2px; background: rgba(255,255,255,.05);
  flex-shrink: 0;
}
.nqp-reader-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--blue-n));
  width: 0; transition: width .1s linear;
}

/* Área de contenido scrolleable */
.nqp-reader-content {
  flex: 1; overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
}
.nqp-reader-content::-webkit-scrollbar { width: 3px; }
.nqp-reader-content::-webkit-scrollbar-track { background: transparent; }
.nqp-reader-content::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 2px; }

.nqp-reader-inner {
  max-width: 680px; margin: 0 auto;
  padding: 4rem 2rem 6rem;
  font-family: var(--ff-serif);
  font-size: 1.15rem; line-height: 2;
  color: rgba(240,238,255,.82);
}
.nqp-reader-inner.big { font-size: 1.35rem; }
.nqp-reader-inner p { margin-bottom: 1.8rem; }

.nqp-reader-inner .drop {
  float: left;
  font-family: var(--ff-display);
  font-size: 4.5em; line-height: .75;
  margin: .05em .12em 0 0;
  color: var(--purple-s);
}

/* Líneas de papel en el lector */
.nqp-reader-inner::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .012;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 31px,
    rgba(255,255,255,.7) 31px, rgba(255,255,255,.7) 32px
  );
  z-index: -1;
}

/* Botones de navegación prev/next en el lector */
.nqp-reader-nav-btns {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(6,6,15,.95);
  flex-shrink: 0;
}

.nqp-reader-nav-btn {
  display: flex; align-items: center; gap: .5rem;
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(240,238,255,.35);
  cursor: pointer; transition: color .25s;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  background: none;
}
.nqp-reader-nav-btn:hover { color: rgba(240,238,255,.8); border-color: rgba(255,255,255,.1); }
.nqp-reader-nav-btn:disabled { opacity: .2; cursor: not-allowed; }
.nqp-reader-nav-btn svg { width: 16px; height: 16px; }

.nqp-reader-nav-home {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: inherit;
}
.nqp-reader-nav-home svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════
   MODALES (Auth + Perfil)
════════════════════════════════════════════════ */
.nqp-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all .3s ease;
}
.nqp-modal.open { opacity: 1; visibility: visible; }

.nqp-modal-bg {
  position: absolute; inset: 0;
  background: rgba(3,3,8,.92);
  backdrop-filter: blur(20px);
}

.nqp-modal-box {
  position: relative; z-index: 2;
  background: #0e0e1e;
  border: 1px solid rgba(255,255,255,.07);
  width: min(460px, 94vw);
  padding: 2.5rem;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform .3s ease;
}
.nqp-modal.open .nqp-modal-box { transform: translateY(0); }

.nqp-modal-close {
  position: absolute; top: 1rem; right: 1.2rem;
  font-size: 1rem; color: rgba(240,238,255,.3);
  cursor: pointer; transition: color .2s;
  background: none; border: none;
}
.nqp-modal-close:hover { color: #f0eeff; }

/* Tabs auth */
.nqp-auth-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 2rem;
}
.nqp-auth-tab {
  flex: 1; padding: .75rem;
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(240,238,255,.3);
  cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .25s;
}
.nqp-auth-tab.active { color: var(--purple-s); border-bottom-color: var(--purple-s); }

.nqp-auth-msg {
  font-size: .82rem; margin-top: .75rem;
  font-family: var(--ff-serif); font-style: italic;
  min-height: 1.2em;
}
.nqp-auth-msg.ok  { color: #50c878; }
.nqp-auth-msg.err { color: #e05555; }

/* Perfil */
.nqp-profile-box { width: min(580px, 96vw); }

.nqp-profile-header {
  display: flex; align-items: center; gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 1.5rem;
}

.nqp-profile-avatar-wrap { position: relative; flex-shrink: 0; }

.nqp-profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  overflow: hidden; background: var(--panel);
  border: 2px solid rgba(108,64,210,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 500; color: var(--purple-s);
}
.nqp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nqp-avatar-edit {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.nqp-avatar-edit svg { width: 11px; height: 11px; }

.nqp-profile-email {
  font-family: var(--ff-serif); font-size: 1rem;
  color: rgba(240,238,255,.8);
}
.nqp-profile-since {
  font-size: .58rem; letter-spacing: .15em;
  color: rgba(240,238,255,.25); margin-top: .25rem;
}

/* Tabs perfil */
.nqp-profile-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 1.5rem;
}
.nqp-profile-tab {
  padding: .6rem 1.2rem;
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(240,238,255,.3);
  cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .25s;
}
.nqp-profile-tab.active { color: var(--purple-s); border-bottom-color: var(--purple-s); }

/* Stats */
.nqp-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-bottom: 1.5rem;
}
.nqp-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  padding: 1.2rem; text-align: center;
}
.nqp-stat-num {
  font-family: var(--ff-display); font-size: 2.5rem;
  color: var(--purple-s); line-height: 1;
}
.nqp-stat-label {
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,238,255,.3); margin-top: .4rem;
}

.nqp-stats-section { margin-top: 1.2rem; }
.nqp-stats-title {
  font-size: .55rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--purple-s); margin-bottom: .75rem;
}
.nqp-stats-list { display: flex; flex-direction: column; gap: 1px; }
.nqp-stats-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .75rem;
  background: rgba(255,255,255,.02);
  font-family: var(--ff-serif); font-size: .9rem;
  color: rgba(240,238,255,.6);
  gap: 1rem;
}
.nqp-stats-item span:last-child {
  font-size: .55rem; letter-spacing: .1em;
  color: rgba(240,238,255,.25); white-space: nowrap;
}
.nqp-stats-empty {
  font-family: var(--ff-serif); font-style: italic;
  font-size: .9rem; color: rgba(240,238,255,.25);
  padding: .5rem 0;
}

/* Settings */
.nqp-settings-form { display: flex; flex-direction: column; gap: .8rem; }
.nqp-settings-label {
  font-size: .58rem; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(240,238,255,.35);
}
.nqp-submit-sm { padding: .7rem 1.5rem; font-size: .65rem; }

.nqp-logout-btn {
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(224,85,85,.7); border: 1px solid rgba(224,85,85,.25);
  padding: .5rem 1.2rem; cursor: pointer;
  background: none; transition: all .25s;
}
.nqp-logout-btn:hover { color: #e05555; border-color: rgba(224,85,85,.5); background: rgba(224,85,85,.05); }

/* ════════════════════════════════════════════════
   HOVER HINT en personajes
════════════════════════════════════════════════ */
.nqp-char-hover-hint {
  position: absolute; bottom: 1rem; left: 50%;
  transform: translateX(-50%) translateY(8px);
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,238,255,.8);
  background: rgba(3,3,8,.7);
  padding: .3rem .8rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 3;
  pointer-events: none;
}
.nqp-char:hover .nqp-char-hover-hint {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.nqp-char { cursor: pointer; }

/* ════════════════════════════════════════════════
   RESPONSIVE nuevos elementos
════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nqp-book-wrap { display: none; }
  .nqp-reader-inner { padding: 2.5rem 1.2rem 5rem; }
  .nqp-reader-topbar { padding: .8rem 1rem; }
  .nqp-reader-nav-btns { padding: .8rem 1rem; }
  .nqp-modal-box { padding: 1.8rem 1.5rem; }
}

@media (max-width: 600px) {
  .nqp-book-wrap { display: none; }
  .nqp-stats-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════
   REDES SOCIALES — nota emergente en el nav
════════════════════════════════════════════════ */
.nqp-social-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nqp-social-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(240,238,255,.45);
  cursor: pointer;
  transition: all .25s ease;
  background: none;
  flex-shrink: 0;
}
.nqp-social-btn:hover,
.nqp-social-btn.active {
  color: var(--purple-s);
  border-color: rgba(108,64,210,.5);
  background: var(--purple-d);
}
.nqp-social-btn svg { width: 15px; height: 15px; }

/* La nota */
.nqp-social-note {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 210px;
  background: #f5f0e4;
  padding: 1.4rem 1.2rem 1.2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  transform: translateY(-6px) scale(.96);
  opacity: 0;
  visibility: hidden;
  transition: all .28s cubic-bezier(.25,.46,.45,.94);
  z-index: 600;
  rotate: 1deg;
}
.nqp-social-note.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Cinta adhesiva */
.nqp-social-tape {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 50px; height: 18px;
  background: rgba(255,230,120,.55);
  border-left: 1px solid rgba(200,180,80,.3);
  border-right: 1px solid rgba(200,180,80,.3);
}

/* Flecha apuntando al botón */
.nqp-social-note-arrow {
  position: absolute;
  top: -6px; right: 10px;
  width: 12px; height: 12px;
  background: #f5f0e4;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0,0,0,.08);
}

.nqp-social-title {
  font-family: 'Caveat', 'DM Sans', cursive;
  font-size: 1rem;
  color: #666;
  margin-bottom: .9rem;
  text-align: center;
  letter-spacing: .05em;
}

/* Líneas de papel */
.nqp-social-note::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 19px,
    rgba(100,140,220,.5) 19px, rgba(100,140,220,.5) 20px
  );
  z-index: 0;
}

.nqp-social-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .4rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  text-decoration: none;
  transition: all .2s;
  position: relative;
  z-index: 1;
  border-radius: 3px;
}
.nqp-social-link:last-of-type { border-bottom: none; }
.nqp-social-link:hover { background: rgba(0,0,0,.05); }

.nqp-social-link svg {
  width: 18px; height: 18px;
  color: #666;
  flex-shrink: 0;
  transition: color .2s;
}
.nqp-social-link span {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  color: #444;
  transition: color .2s;
}

/* Colores de plataforma en hover */
.nqp-social-link:nth-of-type(1):hover svg { color: #c13584; }
.nqp-social-link:nth-of-type(1):hover span { color: #c13584; }
.nqp-social-link:nth-of-type(2):hover svg { color: #010101; }
.nqp-social-link:nth-of-type(2):hover span { color: #010101; }

@media (max-width: 900px) {
  .nqp-social-note { right: -50px; }
}