/* ======================================================================
   ALQUIMIA — Experiencia inmersiva de los elementos
   Portada digital + capítulos interactivos por cóctel
   ====================================================================== */
:root{
  --bg:#0A0900; --bg-soft:#14110A;
  --gold:#C9A84C; --gold-dark:#8A6E3A; --gold-subtle:#3A2E18;
  --cream:#E8DCC8; --cream-dim:#A79D8B; --gray-text:#6b6252;
  --font-title:'Cinzel',serif; --font-dish:'Cormorant Garamond',serif;
  --font-body:'Montserrat',system-ui,sans-serif; --font-runes:'Noto Sans Runic',serif;
  /* elementos */
  --tierra:#6FA24A; --fuego:#E8692A; --aire:#D9E4EC; --agua:#2F8FD1; --mercurio:#A7B6C6; --quinta:#C9A84C;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--cream);font-family:var(--font-body);font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0}

/* ---------- toggle menú clásico (sticky) ---------- */
.toggle-classic{position:fixed;top:14px;right:14px;z-index:50;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid var(--gold-subtle);border-radius:999px;background:rgba(10,9,0,.72);backdrop-filter:blur(8px);
  color:var(--gold);text-decoration:none;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:all .2s}
.toggle-classic:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.tc-icon{font-size:13px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:70px 18px 150px;overflow:hidden}
.hero-bg{position:absolute;inset:-4%;background:url(assets/portada.jpg) center 30%/cover no-repeat;filter:blur(7px) brightness(.32) saturate(.85);transform:scale(1.06);opacity:.6}
.hero-vignette{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 45%,rgba(10,9,0,0) 0%,rgba(10,9,0,.55) 55%,rgba(10,9,0,.96) 100%),
  linear-gradient(180deg,rgba(10,9,0,.6) 0%,rgba(10,9,0,0) 30%,rgba(10,9,0,0) 70%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:2;text-align:center;width:100%;max-width:720px}
.kicker{font-size:10.5px;font-weight:400;letter-spacing:.55em;text-indent:.55em;text-transform:uppercase;color:var(--cream-dim)}
.title-serif{font-family:var(--font-title);font-weight:600;font-size:clamp(34px,9vw,64px);line-height:1;letter-spacing:.12em;text-indent:.12em;text-transform:uppercase;color:var(--gold);margin-top:8px;text-shadow:0 0 30px rgba(201,168,76,.18)}
.sub{font-size:clamp(11px,2.8vw,13px);font-weight:400;letter-spacing:.45em;text-indent:.45em;text-transform:uppercase;color:var(--cream-dim);margin-top:10px}

/* anillo + logo + medallones */
.ring-wrap{position:relative;width:min(86vw,440px);aspect-ratio:1;margin:22px auto 8px}
.geometry{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);opacity:.5;animation:spin 140s linear infinite}
.logo{position:absolute;left:50%;top:50%;width:64%;transform:translate(-50%,-50%);color:var(--gold);filter:drop-shadow(0 0 18px rgba(201,168,76,.35))}


.medallion{position:absolute;left:var(--x);top:var(--y);margin:-34px 0 0 -34px;z-index:3;width:68px;height:68px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  background:rgba(10,9,0,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 0 22px var(--glow),inset 0 0 12px rgba(0,0,0,.6);animation:breathe 3.4s ease-in-out infinite;transition:box-shadow .25s}
.medallion .glyph{font-size:22px;line-height:1;color:var(--c);text-shadow:0 0 10px var(--glow)}
.medallion .lbl{font-size:8px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.medallion.active{border-color:var(--c);box-shadow:0 0 40px var(--glow),0 0 0 2px var(--c)}
@media (hover:hover){.medallion:hover{transform:scale(1.14);box-shadow:0 0 36px var(--glow),0 0 0 1px var(--c)}}
.medallion:focus-visible{box-shadow:0 0 36px var(--glow),0 0 0 1px var(--c);outline:none}
.medallion[data-el="Tierra"]{--c:var(--tierra);--glow:rgba(111,162,74,.45);animation-delay:.2s}
.medallion[data-el="Fuego"]{--c:var(--fuego);--glow:rgba(232,105,42,.5);animation-delay:0s}
.medallion[data-el="Aire"]{--c:var(--aire);--glow:rgba(217,228,236,.35);animation-delay:.6s}
.medallion[data-el="Agua"]{--c:var(--agua);--glow:rgba(47,143,209,.45);animation-delay:.9s}
.medallion[data-el="Mercurio"]{--c:var(--mercurio);--glow:rgba(167,182,198,.4);animation-delay:1.2s}
.medallion[data-el="Quintaesencia"]{--c:var(--quinta);--glow:rgba(201,168,76,.5);animation-delay:1.5s;border-color:var(--gold)}
.medallion[data-el="Fuego"] .glyph{animation:flicker 1.6s ease-in-out infinite}
.medallion[data-el="Agua"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(120,190,240,.5);animation:ripple 3s ease-out infinite}
.medallion[data-el="Quintaesencia"]::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(201,168,76,.5);animation:spin 18s linear infinite}
.medallion[data-el="Mercurio"] .glyph{animation:shine 4s ease-in-out infinite}
@media (max-width:380px){.medallion{width:58px;height:58px;margin:-29px 0 0 -29px}.medallion .glyph{font-size:19px}.medallion .lbl{font-size:7px}}

.triangle{font-family:var(--font-title);color:var(--gold);font-size:18px;opacity:.85;margin-top:14px}
.tagline{font-size:10.5px;font-weight:400;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:var(--cream-dim);margin-top:8px}
.runes{font-family:var(--font-runes);font-size:15px;letter-spacing:.34em;text-indent:.34em;color:var(--gold-dark);margin-top:12px;opacity:.9}
.hint{font-size:10.5px;color:var(--cream-dim);margin-top:20px;letter-spacing:.06em}
.hint span{display:inline-block;animation:bounce 1.8s ease-in-out infinite}

/* el libro negro = menú clásico */
.book{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;width:156px;height:98px;border-radius:5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--gold);
  background:linear-gradient(135deg,#171309,#0B0A02);border:1px solid var(--gold-subtle);
  box-shadow:0 18px 34px rgba(0,0,0,.65),inset 0 0 0 1px rgba(201,168,76,.08),inset 0 0 40px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s}
.book:hover{transform:translateX(-50%) translateY(-4px);box-shadow:0 26px 44px rgba(0,0,0,.7),0 0 24px rgba(201,168,76,.18)}
.book-spine{position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--gold-subtle)}
.book-emblem{font-size:18px;color:var(--gold-dark);line-height:1}
.book-title{font-family:var(--font-title);font-weight:600;font-size:13px;letter-spacing:.3em;text-indent:.3em;margin-top:4px}
.book-sub{font-size:8.5px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-top:5px}

/* ---------- CAPÍTULOS ---------- */
.chapter{position:relative;min-height:100vh;padding:96px 20px 72px;display:grid;place-items:center;overflow:hidden;border-top:1px solid rgba(58,46,24,.5)}
.ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute}
.ch-inner{position:relative;z-index:1;width:100%;max-width:980px;display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:860px){.ch-inner{grid-template-columns:1fr 1.15fr;gap:52px}}

.ch-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;width:100%;max-width:420px;margin:0 auto;
  box-shadow:0 30px 60px rgba(0,0,0,.65),0 0 0 1px rgba(201,168,76,.14),0 0 40px var(--glow,transparent)}
.ch-media img{width:100%;height:112%;object-fit:cover;display:block;transform:translateY(-6%);will-change:transform}
.ch-media-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,0,.06) 0%,rgba(10,9,0,0) 40%,rgba(10,9,0,.6) 100%)}
.chapter[data-el="Quintaesencia"] .ch-media-veil{background:linear-gradient(180deg,rgba(10,9,0,.45) 0%,rgba(10,9,0,.18) 40%,rgba(10,9,0,.78) 100%),radial-gradient(circle at 50% 50%,rgba(201,168,76,.12),transparent 60%)}

.ch-el{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-el .glyph{font-size:18px;color:var(--c);text-shadow:0 0 10px var(--glow,transparent)}
.ch-el b{color:var(--cream);font-weight:500}
.runes-sm{font-family:var(--font-runes);letter-spacing:.25em;color:var(--gold-dark);font-size:12px;text-transform:none}
.ch-name{font-family:var(--font-title);font-weight:600;font-size:clamp(30px,7vw,48px);line-height:1.05;letter-spacing:.04em;color:var(--gold);margin:12px 0 6px}
.ch-lema{font-family:var(--font-dish);font-style:italic;font-weight:600;font-size:clamp(18px,4.2vw,23px);color:var(--cream);margin-bottom:16px}
.ch-historia{font-size:14.5px;color:var(--cream-dim);line-height:1.75;margin-bottom:22px}
.ch-ing h4{font-family:var(--font-title);font-weight:500;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.ch-ing ul{list-style:none}
.ch-ing li{font-size:13.5px;color:var(--cream);padding-left:18px;position:relative;margin:5px 0;line-height:1.5}
.ch-ing li::before{content:"◆";position:absolute;left:0;top:.5em;font-size:7px;color:var(--c)}
.ch-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.ch-meta>div{border:1px solid var(--gold-subtle);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--cream);line-height:1.45;background:rgba(255,255,255,.02)}
.ch-meta small{display:block;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:4px}
.ch-sens{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
@media (min-width:560px){.ch-sens{grid-template-columns:repeat(4,1fr)}}
.ch-sens>div{text-align:center;padding:12px 8px 6px;border-top:1px solid var(--gold-subtle)}
.ch-sens i{font-style:normal;font-size:20px;display:block;margin-bottom:6px;color:var(--c)}
.ch-sens small{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark)}
.ch-sens p{font-size:12px;color:var(--cream-dim);line-height:1.5;margin-top:5px}
.ch-ritual{margin:18px 0;padding:12px 14px;border-left:2px solid var(--c);background:rgba(255,255,255,.03);font-family:var(--font-dish);font-style:italic;font-size:16.5px;color:var(--cream)}
.ch-ritual::before{content:"✦ ";color:var(--c);font-style:normal}
.ch-price{display:flex;align-items:baseline;gap:14px;margin-top:22px}
.ch-price span{font-family:var(--font-title);font-weight:600;font-size:26px;color:var(--gold)}
.ch-price em{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}

/* colores por elemento (capítulo) */
.chapter[data-el="Tierra"]{--c:var(--tierra);--glow:rgba(111,162,74,.35)}
.chapter[data-el="Fuego"]{--c:var(--fuego);--glow:rgba(232,105,42,.4)}
.chapter[data-el="Aire"]{--c:var(--aire);--glow:rgba(217,228,236,.28)}
.chapter[data-el="Agua"]{--c:var(--agua);--glow:rgba(47,143,209,.38)}
.chapter[data-el="Mercurio"]{--c:var(--mercurio);--glow:rgba(167,182,198,.35)}
.chapter[data-el="Quintaesencia"]{--c:var(--quinta);--glow:rgba(201,168,76,.45)}

/* ---------- AMBIENTES ANIMADOS ---------- */
/* Fuego: brasa que respira + ascuas que suben */
.chapter[data-el="Fuego"] .ambient{background:radial-gradient(ellipse at 50% 112%,rgba(232,105,42,.32),transparent 62%)}
.chapter[data-el="Fuego"] .ambient::before{inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(255,140,60,.26),transparent 55%);animation:flicker 2.8s ease-in-out infinite}
.chapter[data-el="Fuego"] .ambient::after{inset:0;opacity:.7;background:
  radial-gradient(2px 2px at 18% 100%,rgba(255,190,110,.95),transparent 60%),
  radial-gradient(1.5px 1.5px at 42% 100%,rgba(255,150,70,.9),transparent 60%),
  radial-gradient(2px 2px at 63% 100%,rgba(255,200,120,.9),transparent 60%),
  radial-gradient(1.5px 1.5px at 84% 100%,rgba(255,160,80,.9),transparent 60%);
  animation:rise 9s linear infinite}
/* Agua: ondas concéntricas */
.chapter[data-el="Agua"] .ambient{background:radial-gradient(ellipse at 50% 112%,rgba(47,143,209,.26),transparent 62%)}
.chapter[data-el="Agua"] .ambient::before,.chapter[data-el="Agua"] .ambient::after{left:50%;top:62%;width:44vmax;height:44vmax;margin:-22vmax;border-radius:50%;border:1px solid rgba(120,190,240,.38);animation:ripple 7s ease-out infinite}
.chapter[data-el="Agua"] .ambient::after{animation-delay:3.5s}
/* Aire: bruma que deriva */
.chapter[data-el="Aire"] .ambient{background:radial-gradient(ellipse at 50% 30%,rgba(217,228,236,.09),transparent 60%)}
.chapter[data-el="Aire"] .ambient::before,.chapter[data-el="Aire"] .ambient::after{width:75vmax;height:32vmax;border-radius:50%;filter:blur(34px);background:radial-gradient(ellipse,rgba(230,238,244,.2),transparent 65%);animation:drift 20s ease-in-out infinite alternate}
.chapter[data-el="Aire"] .ambient::before{left:-20vmax;top:18%}
.chapter[data-el="Aire"] .ambient::after{right:-25vmax;top:58%;animation-delay:-9s;animation-direction:alternate-reverse}
/* Tierra: pulso de bosque + partículas */
.chapter[data-el="Tierra"] .ambient{background:radial-gradient(ellipse at 50% 112%,rgba(111,162,74,.22),transparent 62%)}
.chapter[data-el="Tierra"] .ambient::before{inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(140,190,90,.14),transparent 55%);animation:breathe-soft 6s ease-in-out infinite}
.chapter[data-el="Tierra"] .ambient::after{inset:0;opacity:.5;background:
  radial-gradient(1.5px 1.5px at 25% 100%,rgba(200,220,150,.9),transparent 60%),
  radial-gradient(1.5px 1.5px at 55% 100%,rgba(201,168,76,.8),transparent 60%),
  radial-gradient(1.5px 1.5px at 78% 100%,rgba(180,210,140,.9),transparent 60%);animation:rise 14s linear infinite}
/* Mercurio: destello metálico */
.chapter[data-el="Mercurio"] .ambient{background:radial-gradient(ellipse at 50% 112%,rgba(167,182,198,.16),transparent 62%)}
.chapter[data-el="Mercurio"] .ambient::before{inset:0;background:linear-gradient(115deg,transparent 42%,rgba(220,230,240,.13) 50%,transparent 58%);background-size:260% 100%;animation:shimmer 7s linear infinite}
.chapter[data-el="Mercurio"] .ambient::after{inset:0;background:
  radial-gradient(2px 2px at 22% 28%,rgba(235,242,250,.95),transparent 60%),
  radial-gradient(1.5px 1.5px at 70% 22%,rgba(235,242,250,.9),transparent 60%),
  radial-gradient(2px 2px at 80% 66%,rgba(235,242,250,.9),transparent 60%),
  radial-gradient(1.5px 1.5px at 30% 72%,rgba(235,242,250,.9),transparent 60%);animation:twinkle 3.2s ease-in-out infinite}
/* Quintaesencia: oro que respira + anillo que gira */
.chapter[data-el="Quintaesencia"] .ambient{background:radial-gradient(circle at 50% 58%,rgba(201,168,76,.2),transparent 56%)}
.chapter[data-el="Quintaesencia"] .ambient::before{inset:0;background:radial-gradient(circle at 50% 58%,rgba(201,168,76,.16),transparent 50%);animation:breathe-soft 5s ease-in-out infinite}
.chapter[data-el="Quintaesencia"] .ambient::after{left:50%;top:58%;width:72vmin;height:72vmin;margin:-36vmin;border-radius:50%;opacity:.55;
  background:conic-gradient(from 0deg,transparent 0 20%,rgba(201,168,76,.22) 28%,transparent 36% 60%,rgba(201,168,76,.18) 68%,transparent 76%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 66%,transparent 67%);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 66%,transparent 67%);animation:spin 40s linear infinite}

/* ---------- PIE ---------- */
.foot{text-align:center;padding:64px 20px 110px;border-top:1px solid var(--gold-subtle)}
.logo-foot{width:min(260px,70vw);color:var(--gold-dark)}
.foot-runes{font-family:var(--font-runes);font-size:14px;letter-spacing:.32em;text-indent:.32em;color:var(--gold-dark);margin-top:14px}
.foot-city{font-family:var(--font-dish);font-style:italic;font-size:15px;color:var(--gold-dark);margin-top:6px}
.foot-link{display:inline-block;margin-top:18px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;border:1px solid var(--gold-subtle);border-radius:999px;padding:9px 16px;transition:all .2s}
.foot-link:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.foot-note{font-size:10.5px;color:var(--gray-text);margin-top:16px}

/* ---------- KEYFRAMES ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 18px var(--glow),inset 0 0 12px rgba(0,0,0,.6)}50%{box-shadow:0 0 34px var(--glow),inset 0 0 12px rgba(0,0,0,.6)}}
@keyframes breathe-soft{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}30%{opacity:.78;transform:scale(1.04) translateY(-1px)}60%{opacity:.92;transform:scale(.98)}80%{opacity:.7}}
@keyframes ripple{0%{transform:scale(.25);opacity:.75}100%{transform:scale(1.35);opacity:0}}
@keyframes drift{0%{transform:translateX(0) translateY(0)}100%{transform:translateX(22vmax) translateY(-6vmax)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(-110%);opacity:0}}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6) drop-shadow(0 0 6px rgba(235,242,250,.8))}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media (prefers-reduced-motion:reduce){
  .geometry,.medallion,.medallion .glyph,.medallion::after,.ambient::before,.ambient::after,.hint span{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- MEDALLONES: vida propia por elemento (sin hover) ---------- */
.medallion>.glyph,.medallion>.lbl{position:relative;z-index:1}
.medallion .fx{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:0}
/* Fuego: chispas que suben desde la base */
.medallion[data-el="Fuego"] .fx{background:
  radial-gradient(ellipse at 50% 118%,rgba(232,105,42,.55),transparent 55%),
  radial-gradient(2px 2px at 28% 100%,#ffcf8a,transparent 60%),
  radial-gradient(1.5px 1.5px at 50% 100%,#ff9d4d,transparent 60%),
  radial-gradient(2px 2px at 72% 100%,#ffd9a0,transparent 60%),
  radial-gradient(1.5px 1.5px at 40% 100%,#ff7a2a,transparent 60%);
  background-size:100% 100%,100% 200%,100% 200%,100% 200%,100% 200%;animation:sparks 2.4s linear infinite}
/* Agua: gotas que caen + ondas (::after) */
.medallion[data-el="Agua"] .fx{background:
  radial-gradient(ellipse at 50% 118%,rgba(47,143,209,.5),transparent 55%),
  radial-gradient(2px 3px at 35% 0%,#bfe3ff,transparent 60%),
  radial-gradient(1.5px 2.5px at 62% 0%,#8fcbff,transparent 60%),
  radial-gradient(2px 3px at 50% 0%,#dff1ff,transparent 60%);
  background-size:100% 100%,100% 200%,100% 200%,100% 200%;animation:drops 2.6s linear infinite}
/* Aire: bruma que cruza */
.medallion[data-el="Aire"] .fx{background:linear-gradient(90deg,transparent 0%,rgba(230,238,244,.34) 50%,transparent 100%) 0 50%/70% 30% no-repeat;filter:blur(2px);animation:mist 3.6s ease-in-out infinite alternate}
/* Tierra: semillas que brotan, glifo que crece */
.medallion[data-el="Tierra"] .fx{background:
  radial-gradient(ellipse at 50% 118%,rgba(111,162,74,.45),transparent 55%),
  radial-gradient(1.5px 1.5px at 30% 100%,#cfe3a3,transparent 60%),
  radial-gradient(1.5px 1.5px at 58% 100%,#c9a84c,transparent 60%),
  radial-gradient(1.5px 1.5px at 75% 100%,#a8d67a,transparent 60%);
  background-size:100% 100%,100% 200%,100% 200%,100% 200%;animation:sparks 5s linear infinite}
.medallion[data-el="Tierra"] .glyph{animation:grow 4s ease-in-out infinite}
/* Mercurio: destello metálico que barre */
.medallion[data-el="Mercurio"] .fx{background:linear-gradient(115deg,transparent 40%,rgba(235,242,250,.38) 50%,transparent 60%);background-size:260% 100%;animation:shimmer 3.2s linear infinite}
/* Quintaesencia: oro que respira dentro + anillo (::after) */
.medallion[data-el="Quintaesencia"] .fx{background:radial-gradient(circle at 50% 55%,rgba(201,168,76,.4),transparent 65%);animation:breathe-soft 2.6s ease-in-out infinite}
.medallion[data-el="Quintaesencia"] .glyph{animation:shine 3s ease-in-out infinite}
@keyframes sparks{0%{background-position:0 0,0 0,0 0,0 0,0 0}100%{background-position:0 0,0 -100%,0 -100%,0 -100%,0 -100%}}
@keyframes drops{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:0 0,0 100%,0 100%,0 100%}}
@keyframes mist{0%{background-position:-60% 50%}100%{background-position:160% 50%}}
@keyframes grow{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ---------- BARRA FLOTANTE DE ELEMENTOS (aparece al salir de la portada) ---------- */
.el-nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:2px;padding:6px;border-radius:999px;
  background:rgba(10,9,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--gold-subtle);
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(201,168,76,.06);
  transform:translate(-50%,130%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.el-nav.show{transform:translate(-50%,0);opacity:1}
.el-nav button{position:relative;width:42px;height:44px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--cream-dim);transition:background .25s,color .25s,transform .2s,width .25s}
.el-nav .el-nav-glyph{font-size:18px;line-height:1;color:var(--c,var(--gold));text-shadow:0 0 8px color-mix(in srgb,var(--c,var(--gold)) 60%,transparent)}
.el-nav .el-nav-lbl{display:none;font-size:8px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.el-nav button.active{width:auto;padding:0 12px 0 8px}
.el-nav button.active .el-nav-lbl{display:inline}
.el-nav button:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.el-nav button.active{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--cream);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent)}
.el-nav .el-nav-home{color:var(--gold);border-right:1px solid var(--gold-subtle);border-radius:999px 0 0 999px;margin-right:2px}
.el-nav .el-nav-home .el-nav-glyph{animation:bounce-up 1.8s ease-in-out infinite}
@keyframes bounce-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:380px){.el-nav button{width:38px;padding:0 4px}.el-nav .el-nav-glyph{font-size:16px}}
.chapter:last-of-type{padding-bottom:120px}
.foot{padding-bottom:130px}
.load-error{text-align:center;padding:60px 20px;color:var(--cream-dim)}
.load-error a{color:var(--gold)}
@media (prefers-reduced-motion:reduce){.medallion .fx,.medallion .glyph,.el-nav .el-nav-glyph{animation:none!important}}

/* ---------- BOTÓN DE SONIDO ---------- */
.sound-toggle{position:fixed;top:14px;left:14px;z-index:50;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--gold-subtle);border-radius:999px;
  background:rgba(10,9,0,.72);backdrop-filter:blur(8px);color:var(--cream-dim);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.sound-toggle:hover{filter:brightness(1.2)}
.sound-toggle{color:#b07a6a;border-color:rgba(176,122,106,.5)}
.sound-toggle.on{color:#8CC46A;border-color:rgba(140,196,106,.6);box-shadow:0 0 14px rgba(111,162,74,.25)}
.sound-toggle.remind{animation:exp-pulse 2.4s ease-in-out infinite}
.st-icon{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.st-icon i{display:block;width:2px;height:4px;background:currentColor;border-radius:1px;transition:height .3s}
.sound-toggle.on .st-icon i{animation:eq .9s ease-in-out infinite}
.sound-toggle.on .st-icon i:nth-child(2){animation-delay:.15s}.sound-toggle.on .st-icon i:nth-child(3){animation-delay:.3s}.sound-toggle.on .st-icon i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
@keyframes exp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.45)}60%{box-shadow:0 0 0 10px rgba(201,168,76,0)}}
@media (max-width:420px){.sound-toggle .st-lbl{display:none}.sound-toggle{padding:11px 12px}}

/* ---------- VIAJERO ELEMENTAL ---------- */
.traveler{position:fixed;left:50%;top:42%;z-index:70;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(10,9,0,.9),rgba(10,9,0,.55));
  border:1px solid var(--c,var(--gold));box-shadow:0 0 30px color-mix(in srgb,var(--c,var(--gold)) 60%,transparent),0 0 70px color-mix(in srgb,var(--c,var(--gold)) 30%,transparent);
  opacity:0;transform:translate(var(--sway,0px),0) scale(.4);transition:opacity .3s,transform .3s}
.traveler.show{opacity:1;transform:translate(var(--sway,0px),0) scale(1)}
.traveler-glyph{font-size:28px;line-height:1;color:var(--c,var(--gold));text-shadow:0 0 14px var(--c,var(--gold));animation:traveler-bob 1s ease-in-out infinite}
.traveler-trail{position:absolute;left:50%;top:50%;width:6px;height:120px;margin-left:-3px;border-radius:3px;
  background:linear-gradient(to top,transparent,color-mix(in srgb,var(--c,var(--gold)) 55%,transparent));transform-origin:50% 100%;transform:translateY(-100%) scaleY(calc(var(--dir,1) * 1));opacity:.7;filter:blur(2px)}
.traveler.pulse::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c,var(--gold));animation:ripple .7s ease-out 1}
.traveler.land{animation:traveler-land .9s ease-out 1}
.traveler.land::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--c,var(--gold));animation:ripple .9s ease-out 1}
@keyframes traveler-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes traveler-land{0%{transform:translate(var(--sway,0px),0) scale(1)}30%{transform:translate(var(--sway,0px),0) scale(1.3)}100%{transform:translate(var(--sway,0px),0) scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.traveler,.sound-toggle,.st-icon i{animation:none!important}}

/* ---------- enlace a la trivia ---------- */
.codigo-link{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 18px 10px 12px;border:1px solid var(--gold-subtle);outline:1px solid rgba(201,168,76,.12);outline-offset:3px;text-decoration:none;text-align:left;color:var(--cream);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);transition:border-color .3s,transform .3s}
.codigo-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.codigo-link .cl-glyph{font-size:22px;color:var(--gold);text-shadow:0 0 12px rgba(201,168,76,.5);animation:key-glow 3s ease-in-out infinite}
.codigo-link b{display:block;font-family:var(--font-title);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.codigo-link small{display:block;font-size:10px;letter-spacing:.08em;color:var(--cream-dim);margin-top:2px}
@keyframes key-glow{0%,100%{opacity:.75}50%{opacity:1;text-shadow:0 0 18px rgba(201,168,76,.8)}}
.foot-link-gold{margin-left:8px;border-color:var(--gold-dark)}