/* ============================================================
   PELAYO — Capa "Editorial Moderno"
   Se superpone a pelayo.css. Tipografía grotesca de contraste,
   marquesina cinética, numeración editorial, progreso de scroll
   y halo de cursor. Mantiene la paleta papel/oro/musgo/azul.
   ============================================================ */

:root{
  --font-grotesk:"Space Grotesk", "Inter", system-ui, sans-serif;
}

/* ---- Barra de progreso de scroll ---- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  transform:scaleX(var(--sp,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--moss-bright),var(--gold-glow) 45%,var(--gold) 60%,var(--stone-blue));
  box-shadow:0 0 12px color-mix(in oklab,var(--gold) 50%,transparent);
  will-change:transform;
}

/* ============================================================
   TIPOGRAFÍA DE CONTRASTE (grotesca moderna en las etiquetas)
   ============================================================ */
.kicker{
  font-family:var(--font-grotesk);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.28em;
}
.nav-links a,.nav-cta,.btn,.brand .brand-name,
.char .role,.arc-step .panel .where,.fact .l,
.fragment .chapter,.author-portrait .plate,.atmos-card h3{
  font-family:var(--font-grotesk);
}
.nav-links a{font-size:.74rem;letter-spacing:.16em;font-weight:500;}
.nav-cta{letter-spacing:.14em;font-weight:600;border-radius:0;}
.brand .brand-name{letter-spacing:.34em;font-weight:700;}
.btn{border-radius:0;font-weight:600;letter-spacing:.14em;}
.fact .l,.char .role,.arc-step .panel .where{letter-spacing:.18em;}

/* La marca lleva un punto índice moderno */
.brand{position:relative;}

/* ---- Nav: línea inferior animada en los enlaces ---- */
.nav-links a{position:relative;padding-bottom:3px;}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--moss-bright),var(--gold),var(--stone-blue));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after{transform:scaleX(1);}

/* ---- Botones modernos: barrido de relleno + flecha ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.btn-gold::before{background:linear-gradient(180deg,#1d2c15,#0f1a0a);}
.btn-gold:hover{color:var(--gold-glow);}
.btn-gold:hover::before{transform:translateY(0);}
.btn-ghost::before{background:linear-gradient(180deg,var(--gold-glow),var(--gold-deep));}
.btn-ghost:hover{color:#fff;border-color:transparent;}
.btn-ghost:hover::before{transform:translateY(0);}
.btn .arrow{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.btn:hover .arrow{transform:translateX(4px);}
.section--south .btn-ghost:hover{color:#0f1a0a;}
.section--south .btn-ghost::before{background:linear-gradient(180deg,var(--gold-glow),var(--gold));}

/* ============================================================
   HERO — etiqueta lateral + halo de cursor + escala editorial
   ============================================================ */
.hero{isolation:isolate;}
.hero__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,40%),
      color-mix(in oklab,var(--gold-glow) 38%,transparent),transparent 70%);
  opacity:0;transition:opacity .6s ease;mix-blend-mode:multiply;
}
.hero:hover .hero__glow{opacity:1;}

.side-label{
  position:absolute;left:clamp(14px,3vw,40px);top:50%;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--font-grotesk);font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;align-items:center;gap:1.2em;z-index:5;
}
.side-label::after{content:"";width:1px;height:64px;background:linear-gradient(var(--gold),transparent);}
@media (max-width:1040px){.side-label{display:none;}.scroll-hint{display:none;}}

/* Wordmark con leve sombra editorial y tracking */
.hero-title{position:relative;}
.hero-sub .tag{font-family:var(--font-grotesk);font-weight:500;}

/* ============================================================
   MARQUESINA CINÉTICA
   ============================================================ */
.marquee{
  position:relative;overflow:hidden;padding:clamp(22px,3.4vw,40px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;width:max-content;gap:0;
  animation:marquee 32s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{
  display:inline-flex;align-items:center;gap:.6em;padding:0 .5em;
  font-family:var(--font-display);font-weight:900;line-height:1;
  font-size:clamp(2.4rem,6.5vw,5.5rem);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
}
.marquee__item--solid{
  background:linear-gradient(176deg,var(--gold-glow),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.marquee__item--outline{
  color:transparent;
  -webkit-text-stroke:2.6px color-mix(in oklab,var(--gold) 80%,var(--ink));
  paint-order:stroke;
}
.marquee__item--moss{-webkit-text-stroke-color:var(--moss);-webkit-text-stroke-width:2.8px;}
.marquee__item--blue{-webkit-text-stroke-color:var(--stone-blue);-webkit-text-stroke-width:2.8px;}
@media (max-width:680px){
  .marquee__item--outline{-webkit-text-stroke-width:1.6px;}
  .marquee__item--moss,.marquee__item--blue{-webkit-text-stroke-width:1.8px;}
}
.marquee__sep{width:.62em;height:.62em;flex:none;color:var(--stone-blue);}
.marquee__sep svg{width:100%;height:100%;display:block;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
body.no-motion .marquee__track{animation:none;}

/* ============================================================
   NUMERACIÓN EDITORIAL DE SECCIONES
   ============================================================ */
.sec-index{
  position:absolute;top:clamp(20px,4vw,54px);right:clamp(14px,4vw,60px);
  font-family:var(--font-grotesk);font-weight:700;
  font-size:clamp(4rem,11vw,10rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--gold) 34%,transparent);
  pointer-events:none;user-select:none;z-index:0;opacity:.5;
}
.section--south .sec-index{-webkit-text-stroke-color:color-mix(in oklab,var(--gold-glow) 46%,transparent);opacity:.6;}
.section .wrap{position:relative;z-index:1;}
@media (max-width:680px){.sec-index{font-size:18vw;top:14px;right:14px;}}

/* ============================================================
   REFINADOS MODERNOS EN COMPONENTES
   ============================================================ */
/* Tarjetas de personaje: esquina con índice y borde superior más marcado */
.char{border-radius:2px;}
.atmos-card{border-radius:2px;}
.fragment .frame{border-radius:2px;}
.author-portrait img{border-radius:2px;}
.book-mockup{border-radius:0;}

/* Cifras del autor: grotesca tabular, más impacto */
.fact .n{font-family:var(--font-grotesk);font-weight:700;letter-spacing:-.02em;}

/* Título de sección: kerning más apretado y moderno */
.section-title{letter-spacing:.02em;}

/* CTA final: fondo de banda con destellos */
.cta-band{position:relative;}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 12% 20%, color-mix(in oklab,var(--moss) 14%, transparent), transparent 70%),
    radial-gradient(44% 56% at 88% 80%, color-mix(in oklab,var(--stone-blue) 12%, transparent), transparent 70%);
}
.cta-band .wrap{position:relative;z-index:1;}

/* Reveal extra: las grotescas suben con un poquito más de carácter — sin tocar el motor existente */