@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700;800;900&family=Amatic+SC:wght@400;700&family=Bebas+Neue&family=Bungee&family=Caveat:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Dancing+Script:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=Great+Vibes&family=Inter:wght@400;500;600;700;800;900&family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Merriweather:opsz,wght@18..144,400;18..144,700;18..144,900&family=Montserrat:wght@400;500;600;700;800;900&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@400;500;600;700&family=Pacifico&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@400;500;600;700&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@400;500;600;700&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=VT323&display=swap");

:root{
  --bg:#6b4f7d;
  --ink:#2f213b;
  --text:#f0c8ff;
  --pink:#fe85a4;
  --line:rgba(240,200,255,.26);
  --panel:rgba(47,33,59,.18);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:"Trebuchet MS","Nunito",Arial,sans-serif;
  overflow-x:hidden;
}
.lore-shell{
  width:min(92vw,1100px);
  margin:0 auto;
  padding:clamp(54px,7vw,96px) clamp(18px,3vw,36px) 90px;
}
.lore-header{text-align:center;margin-bottom:56px}
.lore-header .eyebrow{
  margin:0 0 10px;
  color:var(--pink);
  font-size:15px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.lore-header h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(50px,7vw,86px);
  line-height:1;
}
.lore-header h1 span{color:var(--pink)}
.lore-content{
  width:min(100%,900px);
  margin:0 auto;
}
.lore-content p,
.lore-content li{
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.78;
  font-weight:500;
}
.lore-content p{margin:0 0 22px}
.lore-content strong,.lore-content b{color:inherit;font-weight:900}
.lore-content em,.lore-content i{font-style:italic}
.lore-section{
  margin-top:74px;
  padding-top:52px;
  border-top:1px solid var(--line);
}
.lore-section h2{
  margin:0 0 30px;
  text-align:center;
  color:var(--ink);
  font-size:clamp(36px,4.6vw,56px);
}
.dialogue{
  margin:28px 0;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}
.dialogue.aetheria{
  background:rgba(255,255,255,.045);
  border-color:rgba(240,200,255,.4);
}
.dialogue.iluru{
  background:rgba(254,133,164,.07);
  border-color:rgba(254,133,164,.44);
}
.dialogue.narrator{
  background:rgba(47,33,59,.26);
}
.speaker{
  display:block;
  margin-bottom:12px;
  color:var(--pink);
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
}
.dialogue.aetheria .speaker{color:#f8ddff}
.dialogue blockquote{margin:0}
.dialogue blockquote p{
  margin:0 0 10px;
  font-style:normal;
}
.dialogue blockquote p:last-child{margin-bottom:0}
/* Manual rich-text emphasis: normal text stays normal. */
.lore-content .dialogue blockquote strong,
.lore-content .dialogue blockquote b{font-weight:900}
.lore-content .dialogue blockquote em,
.lore-content .dialogue blockquote i{font-style:italic}

.akumachi-list{
  width:min(100%,680px);
  margin:20px auto 30px;
  padding:22px 28px 22px 48px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}
.akumachi-list li{margin:7px 0}
.lore-footer{
  margin-top:70px;
  padding-top:28px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:13px;
  font-weight:800;
  opacity:.78;
}
@media(max-width:620px){
  .lore-shell{
    width:100%;
    padding:46px 14px 68px;
  }
  .dialogue{padding:18px 16px}
  .akumachi-list{padding:18px 18px 18px 38px}
}


/* LORE SITE HEADER */
.site-nav{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(76,62,87,.94);
  border-bottom:1px solid rgba(240,200,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav-inner{
  width:min(94vw,1400px);
  min-height:68px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand-cluster{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand{
  color:var(--text);
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
}
.home-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(240,200,255,.24);
  border-radius:50%;
  background:rgba(47,33,59,.72);
  color:var(--pink);
  text-decoration:none;
  transition:transform .15s ease, background .15s ease;
}
.home-icon:hover{
  transform:translateY(-1px);
  background:rgba(47,33,59,.9);
}
.home-icon svg{
  width:22px;
  height:22px;
  display:block;
}
.lang{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(240,200,255,.28);
  border-radius:999px;
  background:rgba(47,33,59,.72);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.lang span,
.lang a{
  min-width:42px;
  padding:8px 11px;
  border-radius:999px;
  text-align:center;
  color:var(--text);
  font-weight:900;
  line-height:1;
}
.lang .active{
  background:var(--pink);
  color:var(--ink);
}

@media(max-width:620px){
  .nav-inner{
    width:100%;
    min-height:62px;
    padding:9px 12px;
  }
  .brand{
    font-size:15px;
  }
  .home-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .home-icon svg{
    width:20px;
    height:20px;
  }
  .lang{
    gap:4px;
    padding:5px;
  }
  .lang span,
.lang a{
    min-width:36px;
    padding:7px 8px;
    font-size:13px;
  }
}



/* FINAL LORE HEADER/LANGUAGE FIX */
.lore-site-nav .lang{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:7px !important;
  border:1px solid rgba(240,200,255,.28) !important;
  border-radius:999px !important;
  background:rgba(47,33,59,.72) !important;
}

.lore-site-nav .lang a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:42px !important;
  padding:8px 11px !important;
  border-radius:999px !important;
  color:var(--text) !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-decoration:none !important;
}

.lore-site-nav .lang a.active{
  background:var(--pink) !important;
  color:var(--ink) !important;
}

.lore-site-nav .lang a:not(.active):hover{
  background:rgba(254,133,164,.16) !important;
}

@media(max-width:620px){
  .lore-site-nav .lang{
    gap:4px !important;
    padding:5px !important;
  }
  .lore-site-nav .lang a{
    min-width:36px !important;
    padding:7px 8px !important;
    font-size:13px !important;
  }
}


/* LORE COMING SOON */
.lore-coming-soon{
  width:min(100%,680px);
  margin:64px auto 0;
  padding:18px 24px;
  text-align:center;
  border:1px solid rgba(254,133,164,.42);
  border-radius:18px;
  background:rgba(254,133,164,.07);
}

.lore-coming-soon span{
  color:var(--pink);
  font-size:clamp(20px,2vw,28px);
  font-weight:900;
  letter-spacing:.01em;
}

@media(max-width:620px){
  .lore-coming-soon{
    margin-top:48px;
    padding:16px 18px;
  }
}

/* SECTION-BASED LORE CMS */
#lore-dynamic-content > .lore-section:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.lore-image-section{
  text-align:center;
}
.lore-image-block{
  width:min(100%,820px);
  margin:10px auto 0;
}
.lore-image-block img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:min(78vh,920px);
  margin:0 auto;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(34,20,43,.18);
}
.lore-image-block figcaption{
  margin-top:14px;
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.6;
  font-weight:700;
  opacity:.82;
}

/* RICH TEXT CONTENT */
.lore-content h3{
  margin:34px 0 18px;
  color:#fff0fa;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.2;
}
.lore-content ul:not(.akumachi-list),
.lore-content ol{
  margin:18px 0 28px;
  padding-left:38px;
}
.lore-content ul:not(.akumachi-list) li,
.lore-content ol li{margin:7px 0}
.lore-content blockquote.plain-quote,
.lore-content .lore-section > blockquote:not(.plain-quote){
  margin:24px 0;
  padding:18px 22px;
  border-left:4px solid var(--pink);
  border-radius:0 14px 14px 0;
  background:rgba(254,133,164,.07);
}
.lore-content a{color:#ffd4e0;text-decoration:underline;text-underline-offset:3px}
.lore-content u{text-underline-offset:3px}
.lore-content s{opacity:.82}
.lore-content hr.lore-rule,
.lore-content .lore-section hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.lore-content .lore-section > div:not(.dialogue){margin-bottom:18px}

/* =========================================================
   LORE INDEX / TABLE OF CONTENTS
   ========================================================= */
.lore-section{
  scroll-margin-top:96px;
}
.lore-toc{
  position:fixed;
  z-index:900;
  top:104px;
  left:max(16px, calc((100vw - 1460px)/2 + 18px));
  width:190px;
  max-height:calc(100vh - 132px);
  overflow:auto;
  padding:14px;
  border:1px solid rgba(240,200,255,.24);
  border-radius:18px;
  background:rgba(47,33,59,.78);
  box-shadow:0 14px 36px rgba(20,10,28,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.lore-toc-title{
  margin:0 0 10px;
  padding:0 4px 9px;
  color:var(--pink);
  border-bottom:1px solid rgba(240,200,255,.16);
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.lore-toc-links{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.lore-toc a{
  display:block;
  padding:8px 9px;
  border-radius:10px;
  color:rgba(240,200,255,.80);
  text-decoration:none;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.lore-toc a:hover{
  background:rgba(254,133,164,.12);
  color:#fff0f6;
  transform:translateX(2px);
}
.lore-toc a.is-active{
  background:rgba(254,133,164,.18);
  color:var(--pink);
}
.lore-toc-toggle{
  display:none;
}

@media(max-width:1279px){
  .lore-toc{
    display:none;
    top:76px;
    left:12px;
    width:min(300px,calc(100vw - 24px));
    max-height:calc(100vh - 92px);
  }
  .lore-toc.is-open{display:block}
  .lore-toc-toggle{
    position:fixed;
    z-index:901;
    left:12px;
    top:76px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:40px;
    padding:0 12px;
    border:1px solid rgba(240,200,255,.26);
    border-radius:999px;
    background:rgba(47,33,59,.84);
    color:var(--pink);
    font:800 13px/1 "Trebuchet MS","Nunito",Arial,sans-serif;
    box-shadow:0 10px 26px rgba(20,10,28,.22);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    cursor:pointer;
  }
  .lore-toc.is-open + .lore-toc-toggle{
    opacity:0;
    pointer-events:none;
  }
}


/* FIX: FIXED LORE PAGE TITLE + FULL-SCREEN HERO */
.lore-shell{
  padding-top:0;
}
.lore-header{
  min-height:calc(100svh - 68px);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.lore-header .eyebrow{
  margin-bottom:14px;
}
.lore-content{
  padding-top:42px;
}
/* El H1 es el título fijo de la página. Cada título de sección sigue siendo su propio H2. */
.lore-section > h2{
  display:block;
}
@media(max-width:620px){
  .lore-shell{padding-top:0;}
  .lore-header{min-height:calc(100svh - 62px);}
  .lore-content{padding-top:30px;}
}

.lore-image-link{display:block;color:inherit;text-decoration:none}.lore-image-link:focus-visible{outline:3px solid rgba(254,133,164,.75);outline-offset:5px;border-radius:18px}

/* =========================================================
   PUBLIC LORE POLISH — reading experience
   ========================================================= */

/* Subtle reading progress under the sticky navigation */
.lore-reading-progress{
  position:fixed;
  z-index:1002;
  top:68px;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none;
  background:rgba(47,33,59,.16);
}
.lore-reading-progress > span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--pink),#f6c6ff);
  box-shadow:0 0 14px rgba(254,133,164,.45);
  will-change:transform;
}

/* Hero cue: makes the full-screen cover feel intentional and discoverable */
.lore-explore{
  position:absolute;
  left:50%;
  bottom:clamp(24px,5vh,52px);
  transform:translateX(-50%);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border:0;
  background:transparent;
  color:rgba(240,200,255,.86);
  font:900 12px/1.15 "Trebuchet MS","Nunito",Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease,transform .2s ease;
}
.lore-explore::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  animation:lore-cue 1.8s ease-in-out infinite;
}
.lore-explore:hover{color:var(--pink);transform:translateX(-50%) translateY(2px)}
.lore-explore:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:5px;
  border-radius:999px;
}
@keyframes lore-cue{
  0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.6}
  50%{transform:translateY(4px) rotate(45deg);opacity:1}
}

/* Give each chapter a clearer, book-like entrance */
#lore-dynamic-content > .lore-section{
  position:relative;
}
#lore-dynamic-content > .lore-section:not(:first-child)::before{
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:min(190px,42vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(254,133,164,.72),transparent);
}
.lore-section > h2{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:0 28px;
}
.lore-section > h2::before,
.lore-section > h2::after{
  content:"✦";
  position:absolute;
  top:50%;
  color:rgba(254,133,164,.72);
  font-size:.38em;
  transform:translateY(-50%);
}
.lore-section > h2::before{left:0}
.lore-section > h2::after{right:0}

/* Section reveal is progressively enhanced: content stays visible if JS fails. */
.lore-section.lore-reveal-ready{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.2,.75,.25,1);
}
.lore-section.lore-reveal-ready.is-visible{
  opacity:1;
  transform:none;
}

/* Stronger, clearer table of contents */
.lore-toc{
  width:210px;
  padding:16px;
  border-color:rgba(240,200,255,.3);
  background:linear-gradient(180deg,rgba(47,33,59,.88),rgba(47,33,59,.76));
}
.lore-toc-links{counter-reset:lorechap}
.lore-toc a{
  position:relative;
  display:grid;
  grid-template-columns:24px 1fr;
  gap:7px;
  align-items:start;
  padding:9px 10px 9px 9px;
  border-left:2px solid transparent;
}
.lore-toc a::before{
  counter-increment:lorechap;
  content:counter(lorechap,decimal-leading-zero);
  color:rgba(240,200,255,.42);
  font-size:10px;
  line-height:1.65;
  font-weight:900;
  letter-spacing:.04em;
  transition:color .18s ease;
}
.lore-toc a.is-active{
  border-left-color:var(--pink);
  background:linear-gradient(90deg,rgba(254,133,164,.22),rgba(254,133,164,.08));
  color:#ffdcea;
  box-shadow:inset 0 0 0 1px rgba(254,133,164,.08);
}
.lore-toc a.is-active::before{color:var(--pink)}
.lore-toc a.is-active::after{
  content:"";
  position:absolute;
  right:9px;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 9px rgba(254,133,164,.8);
}

/* Mobile TOC gets a dimmed backdrop instead of floating without context */
.lore-toc-backdrop{
  position:fixed;
  z-index:899;
  inset:68px 0 0;
  border:0;
  padding:0;
  background:rgba(24,13,32,.46);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
body.lore-toc-open .lore-toc-backdrop{opacity:1;pointer-events:auto}

/* Back to top */
.lore-back-top{
  position:fixed;
  z-index:880;
  right:clamp(14px,2.4vw,30px);
  bottom:clamp(14px,2.4vw,28px);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(240,200,255,.28);
  border-radius:50%;
  background:rgba(47,33,59,.84);
  color:var(--pink);
  box-shadow:0 12px 28px rgba(20,10,28,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  opacity:0;
  transform:translateY(12px) scale(.94);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .2s ease;
}
.lore-back-top::before{
  content:"";
  width:11px;
  height:11px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:translateY(3px) rotate(45deg);
}
.lore-back-top.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.lore-back-top:hover{background:rgba(254,133,164,.16)}
.lore-back-top:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

@media(max-width:1279px){
  .lore-toc{width:min(330px,calc(100vw - 24px));padding:17px}
  .lore-toc a{font-size:14px;padding-top:10px;padding-bottom:10px}
}

@media(max-width:620px){
  .lore-reading-progress{top:62px}
  .lore-toc-backdrop{inset:62px 0 0}
  .lore-explore{bottom:24px}
  .lore-section > h2{padding:0 20px}
  .lore-section > h2::before,
  .lore-section > h2::after{font-size:.32em}
  .lore-back-top{width:42px;height:42px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lore-explore::after{animation:none}
  .lore-section.lore-reveal-ready,
  .lore-section.lore-reveal-ready.is-visible,
  .lore-back-top,
  .lore-toc-backdrop{transition:none;transform:none}
}

/* Anchor the hero's reading cue inside the cover. */
.lore-header{position:relative}

/* =========================================================
   PORTADA VISUAL + REPRODUCTOR OST
   ========================================================= */
.nav-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}
.lore-ost-player{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:5px 7px;
  border:1px solid rgba(240,200,255,.25);
  border-radius:999px;
  background:rgba(47,33,59,.72);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.lore-ost-player[hidden]{display:none!important}
.lore-ost-mute{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(254,133,164,.12);
  color:var(--pink);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  position:relative;
}
.lore-ost-mute svg{width:19px;height:19px;display:block;overflow:visible}
.lore-ost-mute.is-muted::after{
  content:"";
  position:absolute;
  width:20px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform:rotate(-45deg);
  box-shadow:0 0 0 1px rgba(47,33,59,.35);
}
.lore-ost-count{
  flex:0 0 auto;
  min-width:34px;
  padding:0 5px;
  color:var(--pink);
  font:900 11px/1 "Trebuchet MS","Nunito",Arial,sans-serif;
  text-align:center;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:.95;
}

.lore-ost-mute:hover{background:rgba(254,133,164,.22)}
.lore-ost-mute:focus-visible,.lore-ost-player select:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.lore-ost-player select{
  width:clamp(120px,16vw,210px);
  min-width:0;
  height:34px;
  padding:0 30px 0 9px;
  border:0;
  border-radius:999px;
  background:rgba(47,33,59,.36);
  color:#f6d9ff;
  font:800 12px/1 "Trebuchet MS","Nunito",Arial,sans-serif;
  text-overflow:ellipsis;
  cursor:pointer;
}
.lore-ost-player select option{background:#4c3e57;color:#f6d9ff}

/* La portada sale del ancho del texto y ocupa todo el viewport. */
.lore-header{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  isolation:isolate;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.lore-header::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  /* Ajuste fino: menos niebla/luz central para evitar efecto lavado,
     manteniendo bordes algo más profundos. */
  background:
    radial-gradient(ellipse at center,
      rgba(226,215,255,.16) 0%,
      rgba(205,188,238,.10) 33%,
      rgba(169,145,198,.045) 54%,
      rgba(28,17,35,.03) 73%,
      rgba(20,12,27,.11) 100%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.010) 0%,
      rgba(255,255,255,0) 54%,
      rgba(20,12,27,.09) 100%
    );
}
.lore-header.has-cover::before{opacity:1}
.lore-hero-content{
  position:relative;
  z-index:1;
  width:min(92vw,1050px);
  padding:clamp(24px,5vw,54px);
}
.lore-header.has-cover .eyebrow{
  color:#ffd1df;
  text-shadow:0 2px 16px rgba(20,10,28,.5);
}
.lore-header.has-cover h1{
  color:#fff2f8;
  text-shadow:0 4px 26px rgba(18,9,24,.72),0 1px 3px rgba(18,9,24,.75);
}
.lore-header.has-cover h1 span{color:#ff9eb7}
.lore-subtitle{
  width:min(90%,760px);
  margin:18px auto 0;
  color:rgba(240,200,255,.9);
  font-size:clamp(16px,1.8vw,22px);
  line-height:1.55;
  font-weight:800;
}
.lore-header.has-cover .lore-subtitle{
  color:#ffe7f0;
  text-shadow:0 2px 14px rgba(18,9,24,.72);
}
.lore-subtitle[hidden]{display:none}
.lore-header .lore-explore{z-index:2}

@media(max-width:760px){
  .nav-inner{gap:8px}
  .nav-actions{gap:6px}
  .lore-ost-player{gap:4px;padding:4px 5px}
  .lore-ost-mute{width:32px;height:32px;flex-basis:32px}
  .lore-ost-count{min-width:30px;padding:0 3px;font-size:10px}
  .lore-ost-player select{width:120px;padding-left:7px;font-size:11px}
  .lore-site-nav .lang{gap:3px!important;padding:4px!important}
  .lore-site-nav .lang a{min-width:34px!important;padding:7px 7px!important;font-size:12px}
}
@media(max-width:520px){
  .brand{display:none}
  .brand-cluster{gap:0}
  .lore-ost-player select{width:104px}
  .lore-ost-count{min-width:28px}
  .lore-hero-content{width:94vw;padding:24px 16px 68px}
  .lore-subtitle{width:96%;margin-top:14px}
}

/* =========================================================
   PORTADA — IMAGEN CUADRADA CON TAMAÑO VISUAL CONTROLADO
   La resolución del archivo no debe determinar su tamaño en pantalla.
   ========================================================= */
.lore-header.has-cover{
  background-size:min(92vw,1080px) auto;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#554562;
}

@media(max-width:760px){
  .lore-header.has-cover{
    background-size:94vw auto;
  }
}


/* =========================================================
   PORTADA COMO CAPÍTULO 00 DEL ÍNDICE
   ========================================================= */
.lore-toc a.is-cover::before{
  counter-increment:none;
  content:"00";
}


/* Copyright / rights notice */
.lore-rights-notice{
  width:min(100%,900px);
  margin:58px auto 18px;
  padding:22px 24px;
  border:1px solid rgba(254,133,164,.36);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(254,133,164,.06),rgba(47,33,59,.24));
  box-shadow:0 12px 34px rgba(20,12,27,.12);
  color:var(--ink);
}
.lore-rights-kicker{
  margin-bottom:10px;
  color:var(--pink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.lore-rights-notice p{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.65;
  font-weight:500;
  color:rgba(240,220,246,.88);
}
.lore-rights-notice strong{color:#ffe7f0;font-weight:900}
@media(max-width:760px){
  .lore-rights-notice{margin-top:42px;padding:18px 18px}
  .lore-rights-notice p{font-size:13px}
}