/* =========================================================
   CONCEPTO B · CINEMÁTICO
   Web oscura e inmersiva, tipo tráiler. Cada libro tiene su
   "mundo" de color tomado de su cubierta:
     I   → ámbar / desierto
     II  → azul noche + rojo sangre
     III → violeta estelar + oro
   ========================================================= */

:root{
  --black:#131b2b;
  --black-2:#182238;
  --ink:#f7f0e5;
  --muted:#c3c7d2;
  --line:rgba(241,232,218,.24);

  --amber:#e8a23a;     /* libro I */
  --ember:#c4521c;
  --blue:#0d1a2e;      /* libro II */
  --blood:#e0362b;
  --violet:#22123a;    /* libro III */
  --star:#f2c76b;

  --f-display:"Anton", Impact, sans-serif;
  --f-serif:"Cormorant Garamond", Georgia, serif;
  --f-body:"Manrope", system-ui, sans-serif;

  --wrap:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em;margin:0 0 .4em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--amber);margin-bottom:22px}
.kicker::before{content:"";width:34px;height:1px;background:currentColor}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.section{padding:130px 0;position:relative}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;font-family:var(--f-body);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all .3s var(--ease);border-radius:2px}
.btn--fire{background:var(--amber);color:var(--black)}
.btn--fire:hover{background:#fff;box-shadow:0 0 40px rgba(232,162,58,.55)}
.btn--blood{background:var(--blood);color:#fff}
.btn--blood:hover{background:#fff;color:var(--black)}
.btn--line{border-color:var(--line);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--ink)}
.btn--sm{padding:11px 18px;font-size:12px}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Cabecera ---------- */
.header{position:fixed;inset:0 0 auto;z-index:60;transition:background .4s, padding .4s;padding:22px 0}
.header.is-solid{background:rgba(19,27,43,.88);backdrop-filter:blur(10px);padding:12px 0;border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--f-display);font-size:22px;letter-spacing:.24em;text-decoration:none;text-transform:uppercase}
.logo i{font-style:normal;color:var(--amber)}
.nav{display:flex;align-items:center;gap:34px}
.nav a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,232,218,.82);text-shadow:0 1px 8px rgba(0,0,0,.6);transition:color .2s}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.nav a.is-active{box-shadow:0 2px 0 var(--amber)}
.nav .btn{color:var(--black)}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(100vh,1000px);display:flex;align-items:center;overflow:hidden;background:#1a0c03}
.hero__bg{position:absolute;inset:0;background:url(../img/publi-2.jpg) 75% 40%/cover no-repeat;transform:scale(1.08);animation:breathe 18s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(19,27,43,.96) 0%,rgba(19,27,43,.75) 38%,rgba(19,27,43,.1) 70%),
  linear-gradient(0deg,var(--black) 0%,transparent 30%)}
.hero__dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero__in{position:relative;z-index:2;padding-top:90px;width:100%}
.hero h1{font-size:clamp(56px,8.4vw,128px);max-width:780px}
.hero h1 .outline{-webkit-text-stroke-color:var(--amber)}
.hero__lead{font-size:clamp(17px,1.6vw,20px);max-width:520px;color:#ece3d6}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__cover{position:absolute;right:max(24px,calc((100vw - var(--wrap))/2 + 24px));bottom:90px;z-index:2;width:min(260px,22vw);transform:rotate(4deg);box-shadow:0 40px 80px -10px rgba(0,0,0,.8)}
.hero__cover::before{content:"YA DISPONIBLE";position:absolute;top:-14px;left:-14px;background:var(--blood);color:#fff;font-size:11px;font-weight:800;letter-spacing:.2em;padding:7px 12px;z-index:2;transform:rotate(-6deg)}
.scroll-cue{position:absolute;left:50%;bottom:28px;z-index:2;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--amber),transparent);animation:drip 2s infinite}
@keyframes breathe{to{transform:scale(1.18) translateX(-2%)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0;background:var(--black)}
.marquee__track{display:flex;gap:46px;width:max-content;animation:slide 40s linear infinite;font-family:var(--f-display);font-size:28px;letter-spacing:.12em;text-transform:uppercase;color:#6f7b95}
.marquee__track span::after{content:"✦";margin-left:46px;color:var(--amber);font-size:16px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Trilogía (paneles expandibles) ---------- */
.tri__head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.tri__head h2{font-size:clamp(44px,6vw,88px);margin:0}
.tri__head p{max-width:400px;color:var(--muted);margin:0}
.tri{display:flex;gap:10px;height:640px}
.panel{position:relative;flex:1;overflow:hidden;text-decoration:none;color:var(--ink);transition:flex .7s var(--ease);background:#000;isolation:isolate}
.panel:hover,.panel.is-open{flex:2.6}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease), filter .7s;filter:saturate(.8) brightness(.7)}
.panel:hover img{transform:scale(1.06);filter:saturate(1) brightness(.85)}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.92) 10%,transparent 65%)}
.panel__num{position:absolute;top:18px;left:24px;font-family:var(--f-serif);font-size:90px;line-height:1;color:rgba(255,255,255,.85)}
.panel__body{position:absolute;left:28px;right:28px;bottom:28px}
.panel__status{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding:6px 10px;margin-bottom:14px}
.panel--1 .panel__status{background:var(--amber);color:var(--black)}
.panel--2 .panel__status{background:var(--blood);color:#fff}
.panel--3 .panel__status{background:var(--star);color:var(--violet)}
.panel h3{font-size:clamp(28px,2.6vw,42px);margin:0 0 10px}
.panel__more{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease), opacity .4s}
.panel:hover .panel__more,.panel.is-open .panel__more{max-height:200px;opacity:1}
.panel__more p{font-family:var(--f-serif);font-style:italic;font-size:22px;line-height:1.3;color:#ece3d6;max-width:460px}

/* ---------- Libro I ---------- */
.book1{background:radial-gradient(900px 600px at 80% 50%,rgba(232,162,58,.22),transparent 70%),linear-gradient(180deg,var(--black),#221d24 50%,var(--black))}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.split--rev{grid-template-columns:1.1fr .9fr}
.book1 h2,.split h2{font-size:clamp(42px,5vw,76px)}
.big-quote{font-family:var(--f-serif);font-style:italic;font-size:clamp(26px,2.6vw,36px);line-height:1.25;color:var(--amber);margin:26px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 34px}
.chips li{border:1px solid var(--line);padding:7px 14px;font-size:13px;color:#ece3d6}
.cover3d{perspective:1400px;max-width:420px;margin:0 auto}
.cover3d > *{transform:rotateY(-18deg) rotateX(4deg);transition:transform .8s var(--ease);box-shadow:-30px 40px 80px -10px rgba(0,0,0,.85), 0 0 120px rgba(232,162,58,.25)}
.cover3d:hover > *{transform:rotateY(-4deg)}

/* Portadas provisionales II y III (ilustración + texto) */
.cover{position:relative;aspect-ratio:2/3;overflow:hidden;background:#000;container-type:inline-size}
.cover > img{width:100%;height:100%;object-fit:cover}
.cover__txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:#f3ece0;padding:8cqw 6cqw 6cqw;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.cover__saga{font-family:var(--f-display);font-size:15.5cqw;line-height:1}
.cover__num{font-family:"EB Garamond",serif;font-size:8cqw;margin-top:3cqw}
.cover__title{font-family:"EB Garamond",serif;font-weight:500;font-size:8.6cqw;line-height:1.05;margin-top:auto}
.cover__author{font-family:"EB Garamond",serif;font-size:3.6cqw;letter-spacing:.2em;margin-top:5cqw}

/* ---------- Viaje en el tiempo ---------- */
.journey{background:var(--black-2);overflow:hidden}
.journey h2{font-size:clamp(44px,6vw,90px)}
.journey__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 24px 40px;margin-top:50px;scrollbar-width:thin;scrollbar-color:var(--amber) transparent}
.era{scroll-snap-align:start;flex:0 0 280px;border-top:2px solid var(--c, var(--amber));padding-top:22px;position:relative}
.era::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--c, var(--amber));box-shadow:0 0 18px var(--c, var(--amber))}
.era small{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--c, var(--amber))}
.era h3{font-size:34px;margin:8px 0 10px}
.era p{color:var(--muted);font-size:15px}
.era--2{--c:var(--blood)}
.era--3{--c:#b48cff}
.journey__hint{color:var(--muted);font-size:13px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- ¿Estás marcado? ---------- */
.mark{background:radial-gradient(600px 400px at 30% 50%,rgba(224,54,43,.18),transparent 70%),var(--black);text-align:center}
.mark h2{font-size:clamp(50px,8vw,120px)}
.mark__form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px auto 0;max-width:560px}
.mark__form input{flex:1;min-width:220px;background:transparent;border:0;border-bottom:1px solid var(--muted);color:var(--ink);font-family:var(--f-serif);font-size:26px;padding:10px 4px;text-align:center}
.mark__form input:focus{outline:none;border-color:var(--amber)}
.mark__out{margin:50px auto 0;max-width:640px;display:none}
.mark__out.is-on{display:block}
.mark__svg{width:240px;height:240px;margin:0 auto 26px;filter:drop-shadow(0 0 18px rgba(232,162,58,.55))}
.mark__svg path,.mark__svg circle,.mark__svg line{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.mark__text{font-family:var(--f-serif);font-style:italic;font-size:26px;line-height:1.35}
.mark__text b{font-style:normal;color:var(--amber);font-weight:600}
.mark__origin{max-width:520px;margin:0 auto 26px;padding:18px 22px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:16px;color:var(--ink)}
.mark__origin small{display:block;font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.mark__out.is-chosen .mark__svg{filter:drop-shadow(0 0 26px rgba(224,54,43,.8))}
.mark__out.is-chosen .mark__svg *{stroke:var(--blood)}

/* ---------- Libro II (cuenta atrás) ---------- */
.hunt{background:var(--blue);overflow:hidden}
.hunt__bg{position:absolute;inset:0;background:url(../img/portada-2-full.jpg) center/cover;opacity:.6}
.hunt::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,12,24,.97) 35%,rgba(6,12,24,.3))}
.hunt .wrap{position:relative;z-index:2}
.hunt .kicker{color:var(--blood)}
.hunt h2{font-size:clamp(44px,6vw,92px);max-width:820px}
.hunt h2 .outline{-webkit-text-stroke-color:var(--blood)}
.hunt p{max-width:540px;color:#c4cfe0}
.timer{display:flex;gap:4px;margin:40px 0}
.timer div{min-width:110px;padding:18px 16px;background:rgba(255,255,255,.04);border-left:2px solid var(--blood)}
.timer b{display:block;font-family:var(--f-display);font-weight:400;font-size:64px;line-height:1}
.timer span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#93a3bd}
.cities{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#7f8fab;margin-top:26px}
.cities span::before{content:"✕ ";color:var(--blood)}

/* ---------- Carta de la autora ---------- */
.letter{background:radial-gradient(700px 500px at 70% 20%,rgba(242,199,107,.18),transparent 70%),linear-gradient(180deg,var(--black),var(--violet) 60%,var(--black));text-align:center}
.letter__star{width:60px;height:60px;margin:0 auto 30px;background:radial-gradient(circle,#fff 0 6%,var(--star) 12%,transparent 60%);position:relative;animation:twinkle 4s ease-in-out infinite}
.letter__star::before,.letter__star::after{content:"";position:absolute;left:50%;top:-30px;bottom:-30px;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,var(--star),transparent)}
.letter__star::after{transform:translateX(-50%) rotate(90deg)}
@keyframes twinkle{50%{opacity:.6;transform:scale(.9)}}
.letter blockquote{font-family:var(--f-serif);font-style:italic;font-size:clamp(24px,2.8vw,38px);line-height:1.35;max-width:880px;margin:0 auto 30px}
.letter cite{font-style:normal;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--star)}

/* ---------- Lead magnet ---------- */
.lead{border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.lead__img{background:url(../img/publi-1.jpg) center 70%/cover;min-height:420px}
.lead__body{padding:60px}
.lead h2{font-size:clamp(36px,4vw,60px)}
.form{display:grid;gap:12px;margin-top:26px}
.form input{background:transparent;border:1px solid var(--line);color:var(--ink);padding:16px 18px;font:inherit}
.form input:focus{outline:none;border-color:var(--amber)}
.form small{color:var(--muted);font-size:12px}
.form__ok{display:none;color:var(--amber);font-weight:700}
form.is-sent .form__ok{display:block}

/* ---------- Blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post{text-decoration:none;display:block}
.post__img{aspect-ratio:4/3;overflow:hidden;margin-bottom:20px}
.post__img div{width:100%;height:100%;background:center/cover;transition:transform 1s var(--ease);filter:grayscale(.4)}
.post:hover .post__img div{transform:scale(1.07);filter:none}
.post time{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.post h3{font-size:26px;margin:10px 0}
.post p{color:var(--muted);font-size:15px}

/* ---------- Páginas interiores ---------- */
.page-hero{padding:190px 0 90px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(60px,10vw,150px)}
.page-hero p{max-width:620px;color:var(--muted);font-size:19px}
.chapter{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px 0;scroll-margin-top:0}
.chapter__bg{position:absolute;inset:0;background:center/cover;opacity:.35}
.chapter::before{content:"";position:absolute;inset:0;z-index:1}
.chapter .wrap{position:relative;z-index:2;width:100%}
.chapter--1{background:#1d0f04}.chapter--1::before{background:linear-gradient(90deg,rgba(29,22,16,.95) 45%,rgba(29,22,16,.6))}
.chapter--2{background:var(--blue)}.chapter--2::before{background:linear-gradient(90deg,rgba(6,12,24,.96) 45%,rgba(6,12,24,.6))}
.chapter--3{background:var(--violet)}.chapter--3::before{background:linear-gradient(90deg,rgba(34,22,50,.95) 45%,rgba(34,22,50,.55))}
.chapter--2 .kicker,.chapter--2 .big-quote{color:var(--blood)}
.chapter--3 .kicker,.chapter--3 .big-quote{color:var(--star)}
.chapter h2{font-size:clamp(46px,6vw,96px)}
.chapter .tag{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.chapter .body p{color:#ece3d6}
.chapter .note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:22px}
.chapter-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:16px}
.chapter-nav a{font-family:var(--f-serif);font-size:20px;text-decoration:none;color:var(--muted);text-align:right}
.chapter-nav a.is-active{color:var(--ink)}
.chapter-nav a.is-active::before{content:"— "}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.cform{display:grid;gap:18px}
.cform label{display:grid;gap:8px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform textarea,.cform select{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;font-size:17px;padding:10px 0;letter-spacing:0;text-transform:none}
.cform select option{background:var(--black)}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--amber)}

/* ---------- Consentimiento ---------- */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--muted);cursor:pointer}
.consent input{flex:none;margin-top:2px;accent-color:var(--amber);padding:0}

/* ---------- Test "¿Quién es Elena?" ---------- */
.quiz{max-width:820px;margin:0 auto;counter-reset:q}
.quiz__q{border-top:1px solid var(--line);padding:40px 0;display:grid;grid-template-columns:90px 1fr;gap:20px}
.quiz__q::before{counter-increment:q;content:"0" counter(q);font-family:var(--f-display);font-size:54px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--amber)}
.quiz__q h3{font-family:var(--f-serif);font-style:italic;text-transform:none;font-size:30px;line-height:1.2;margin-bottom:18px;letter-spacing:0}
.quiz__opts{display:flex;flex-wrap:wrap;gap:10px}
.quiz__opts button{font:inherit;font-size:15px;background:transparent;color:var(--ink);border:1px solid var(--line);padding:12px 18px;cursor:pointer;transition:.25s;text-align:left}
.quiz__opts button:hover{border-color:var(--amber)}
.quiz__opts button.is-picked{background:var(--amber);border-color:var(--amber);color:var(--black)}
.quiz__end{border:1px solid var(--line);padding:50px 40px;text-align:center;margin-top:20px;background:radial-gradient(500px 300px at 50% 0%,rgba(232,162,58,.15),transparent 70%)}
.quiz__end h3{font-size:clamp(32px,4vw,52px)}
.quiz__end p{color:var(--muted)}
.quiz__end .form{max-width:480px;margin:24px auto 0;text-align:left}
.quiz__count{color:var(--amber);font-weight:700}

/* ---------- Entrada de blog ---------- */
.article-hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;padding:160px 0 80px;overflow:hidden}
.article-hero__bg{position:absolute;inset:0;background:url(../img/publi-2.jpg) center 40%/cover;transform:scale(1.05)}
.article-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--black) 5%,rgba(19,27,43,.55) 60%,rgba(19,27,43,.3))}
.article-hero .wrap{position:relative;z-index:2}
.article-hero h1{font-size:clamp(48px,8vw,120px);max-width:1000px}
.article-hero .meta{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#ece3d6}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--amber);z-index:80;width:0}
.article{max-width:740px;margin:0 auto;padding:40px 24px 60px;font-size:19px;line-height:1.85;color:#ece3d6}
.article .intro{font-family:var(--f-serif);font-style:italic;font-size:30px;line-height:1.35;color:var(--ink);margin-bottom:40px}
.article h2{font-size:clamp(34px,4vw,52px);margin:70px 0 22px;color:var(--ink)}
.article ul{list-style:none;padding:0;display:grid;gap:14px}
.article ul li{padding-left:34px;position:relative}
.article ul li::before{content:"✦";position:absolute;left:0;color:var(--amber)}
.article strong{color:var(--ink)}
.pullquote{margin:70px -80px;padding:0;text-align:center;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(40px,5.4vw,78px);line-height:.95;color:var(--ink)}
.pullquote span{color:transparent;-webkit-text-stroke:1.5px var(--amber)}
.calendar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:34px 0}
.calendar div{position:relative;aspect-ratio:2/3;overflow:hidden;display:flex;align-items:flex-end;padding:16px;background:#000}
.calendar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.calendar p{position:relative;margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:#fff}
.calendar b{display:block;font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:.02em}
.cta-box{display:grid;grid-template-columns:140px 1fr;gap:30px;align-items:center;border:1px solid var(--line);padding:30px;margin:60px 0;background:linear-gradient(120deg,rgba(232,162,58,.12),transparent)}
.cta-box h3{font-size:30px;margin-bottom:8px}
.cta-box p{font-size:16px;color:var(--muted)}
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;margin-top:50px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.share a{border:1px solid var(--line);padding:9px 14px;text-decoration:none;color:var(--ink)}
.share a:hover{border-color:var(--amber)}
.author-box{display:flex;gap:20px;align-items:center;margin-top:34px}
.author-box__img{width:76px;height:76px;border-radius:50%;flex:none;border:1px solid var(--amber);display:grid;place-items:center;font-family:var(--f-serif);font-size:32px;color:var(--amber)}
.author-box p{margin:0;font-size:15px;color:var(--muted)}
.comments{max-width:740px;margin:0 auto;padding:0 24px}
.comment{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.comment__av{width:44px;height:44px;border-radius:50%;background:#22304a;color:var(--amber);display:grid;place-items:center;font-weight:700;flex:none}
.comment p{margin:4px 0 0;font-size:16px;color:#ece3d6}
.comment small{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.comment--reply{margin-left:60px}
.comment--reply .comment__av{background:var(--amber);color:var(--black)}
@media (max-width:900px){
  .pullquote{margin:50px 0}
  .quiz__q{grid-template-columns:1fr}
}
@media (max-width:760px){
  .calendar{grid-template-columns:1fr 1fr 1fr;gap:3px}
  .calendar b{font-size:18px}
  .calendar p{font-size:9px}
  .cta-box{grid-template-columns:1fr;text-align:center}
  .cta-box img{max-width:140px;margin:0 auto}
  .article{font-size:17px}
  .article .intro{font-size:24px}
}

/* ---------- Página de autora · ficha de personaje ---------- */
.author-hero{padding-bottom:50px}
.ficha{position:relative;max-width:860px;margin:0 auto;border:1px solid var(--line);background:linear-gradient(160deg,rgba(232,162,58,.1),rgba(255,255,255,.02) 60%);padding:40px 44px}
.ficha__head{display:flex;flex-wrap:wrap;gap:10px 28px;padding-right:170px;font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:10px}
.ficha__grid{display:grid;grid-template-columns:1fr 1fr;margin:0}
.ficha__grid > div{padding:20px 0;border-bottom:1px solid var(--line)}
.ficha__grid > div:nth-child(odd):not(.ficha__wide){padding-right:28px}
.ficha__wide{grid-column:1 / -1}
.ficha dt{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ficha dd{margin:0;font-family:var(--f-serif);font-size:24px;line-height:1.3;color:var(--ink)}
.ficha dd small{font-size:16px;color:var(--muted);font-style:italic}
.ficha__foot{padding-top:26px}
.ficha__foot p{font-family:var(--f-serif);font-style:italic;font-size:22px;margin-bottom:18px}
.ficha__ctas{display:flex;gap:10px;flex-wrap:wrap}
.ficha__stamp{position:absolute;top:26px;right:-14px;transform:rotate(8deg);border:3px solid var(--blood);color:var(--blood);font-family:var(--f-display);font-size:30px;letter-spacing:.14em;text-transform:uppercase;padding:4px 16px;opacity:.85;background:rgba(19,27,43,.6)}
@media (max-width:700px){
  .ficha{padding:30px 22px}
  .ficha__grid{grid-template-columns:1fr}
  .ficha__grid > div:nth-child(odd):not(.ficha__wide){padding-right:0}
  .ficha__stamp{top:-18px;right:10px;font-size:22px}
  .ficha__head{padding-right:0}
}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:90px 0 30px}
.footer__big{font-family:var(--f-display);font-size:clamp(50px,11vw,170px);line-height:.9;text-transform:uppercase;margin-bottom:60px}
.footer__big .outline{-webkit-text-stroke-color:var(--amber)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:700}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer a{text-decoration:none;color:#ece3d6}
.footer a:hover{color:var(--amber)}
.footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px}
.footer__legal nav{display:flex;gap:20px}

/* ---------- Barra compra móvil ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;align-items:center;gap:12px;padding:10px 14px;background:rgba(19,27,43,.95);border-top:1px solid var(--line);backdrop-filter:blur(8px);transform:translateY(100%);transition:transform .4s var(--ease)}
.buybar.is-on{transform:none}
.buybar img{width:34px;height:51px;object-fit:cover}
.buybar span{flex:1;font-size:13px;line-height:1.3}
.buybar span b{display:block;font-family:var(--f-display);font-weight:400;font-size:16px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- Aparición ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split,.split--rev,.lead,.contact{grid-template-columns:1fr;gap:50px}
  .tri{flex-direction:column;height:auto}
  .panel{min-height:300px}
  .panel:hover,.panel.is-open{flex:1}
  .panel__more{max-height:none;opacity:1}
  .posts{grid-template-columns:1fr 1fr}
  .hero__cover{display:none}
  .chapter-nav{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .section{padding:90px 0}
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--black);flex-direction:column;justify-content:center;gap:28px;transform:translateX(100%);transition:transform .4s var(--ease)}
  .nav.is-open{transform:none}
  .nav a{font-size:18px}
  .burger{position:relative;z-index:70}
  .posts{grid-template-columns:1fr}
  .lead__body{padding:36px 24px}
  .lead__img{min-height:260px}
  .timer div{min-width:0;flex:1;padding:12px 8px}
  .timer b{font-size:40px}
  .buybar{display:flex}
  .footer{padding-bottom:100px}
  .footer__grid{grid-template-columns:1fr}
  .hero::before{background:linear-gradient(0deg,rgba(19,27,43,.98) 25%,rgba(19,27,43,.35) 75%)}
  .hero{align-items:flex-end;padding-bottom:70px}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .mark__svg *{stroke-dashoffset:0!important}
}


/* ---------- Formularios de Fluent Forms con el estilo del tema ---------- */
.fluentform .ff-el-input--label label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fluentform .ff-el-form-control{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;color:var(--ink)!important;font:inherit;font-size:17px;padding:10px 0!important;box-shadow:none!important}
.fluentform .ff-el-form-control:focus{border-bottom-color:var(--amber)!important}
.fluentform .ff-el-form-control::placeholder{color:var(--muted)}
.fluentform textarea.ff-el-form-control{min-height:140px}
.fluentform .ff-btn-submit{background:var(--amber)!important;color:var(--black)!important;border:0!important;border-radius:2px!important;padding:17px 30px!important;font-family:var(--f-body);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.fluentform .ff-btn-submit:hover{background:#fff!important}
.fluentform .ff-el-is-error .text-danger,.fluentform .error{color:#ff8a80}
.ff-message-success{background:rgba(232,162,58,.1)!important;border:1px solid rgba(232,162,58,.5)!important;color:var(--ink)!important;box-shadow:none!important}

/* ---------- Carrusel: rótulo de cada lugar siempre en una línea ---------- */
.era small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Aviso de lanzamiento (sección Libro II) ---------- */
.aviso-form{max-width:720px;margin:14px 0 0;display:grid;gap:16px;padding:30px 32px;background:rgba(6,12,24,.55);border:1px solid rgba(224,54,43,.45);border-left:4px solid var(--blood);backdrop-filter:blur(4px)}
.aviso-form__title{font-family:var(--f-display);font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:.03em;text-transform:uppercase;margin:0;color:var(--ink)}
.hunt .aviso-form__title{color:var(--ink);max-width:none}
.aviso-form__row{display:flex;gap:12px;flex-wrap:wrap}
.aviso-form__row input{flex:1;min-width:240px;background:rgba(6,12,24,.75);border:1px solid rgba(255,255,255,.3);color:var(--ink);padding:20px 22px;font:inherit;font-size:18px}
.aviso-form__row input:focus{outline:none;border-color:var(--blood)}
.aviso-form__row .btn{padding:20px 34px;font-size:15px}
.aviso-form .consent{color:#c3cbdb;font-size:13px}
.aviso-form__alt{margin-top:4px;color:var(--amber);font-weight:700;text-decoration:none;font-size:17px}
.aviso-form__alt:hover{text-decoration:underline}

/* ---------- Blog: NOVEDAD en grande (primer bloque) ---------- */
.blog-news{position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:40px;min-height:520px;padding:60px 64px;margin-bottom:28px;border:1px solid rgba(232,162,58,.5);isolation:isolate;box-shadow:0 30px 80px -30px rgba(232,162,58,.45)}
.blog-news__bg{position:absolute;inset:0;z-index:-2;background:url(../img/publi-2.jpg) 70% 45%/cover;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.blog-news:hover .blog-news__bg{transform:scale(1.1)}
.blog-news::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(19,27,43,.97) 0%,rgba(19,27,43,.85) 45%,rgba(19,27,43,.2) 100%)}
.blog-news__tag{display:inline-block;background:var(--blood);color:#fff;font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;padding:7px 12px;margin-bottom:22px}
.blog-news h2{font-size:clamp(44px,5.6vw,86px);margin-bottom:18px}
.blog-news h2 .outline{-webkit-text-stroke-color:var(--amber)}
.blog-news p{max-width:560px;font-size:18px;color:#efe6d8;text-align:justify;hyphens:auto}
.blog-news__ctas{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.blog-news small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.blog-news__cover{justify-self:center;width:min(260px,100%);transform:rotate(4deg);transition:transform .6s var(--ease)}
.blog-news__cover:hover{transform:rotate(0) scale(1.03)}
.blog-news__cover img{box-shadow:0 40px 70px -15px rgba(0,0,0,.85),0 0 60px rgba(232,162,58,.3)}
.post-featured--compact{grid-template-columns:.8fr 1.2fr;margin-bottom:56px;border-color:var(--line)}
.post-featured--compact .post-featured__img{min-height:260px}
.post-featured--compact .post-featured__body{padding:30px 36px}
.post-featured--compact h2{font-size:clamp(26px,2.6vw,38px)}
.blog-more{font-size:clamp(30px,3vw,44px);margin:0 0 28px}
@media (max-width:900px){
  .blog-news{grid-template-columns:1fr;padding:40px 24px;min-height:0}
  .blog-news::before{background:linear-gradient(0deg,rgba(19,27,43,.97) 35%,rgba(19,27,43,.6))}
  .blog-news__cover{width:180px;order:-1}
  .post-featured--compact{grid-template-columns:1fr}
}

/* ---------- Blog: entrada destacada (fijada arriba) ---------- */
.post-featured{display:grid;grid-template-columns:1.15fr 1fr;margin-bottom:60px;text-decoration:none;border:1px solid rgba(232,162,58,.4);background:linear-gradient(120deg,rgba(232,162,58,.1),rgba(255,255,255,.02) 60%);overflow:hidden;transition:box-shadow .4s}
.post-featured:hover{box-shadow:0 0 60px -20px var(--amber)}
.post-featured__img{min-height:380px;background:center/cover;transition:transform 1.2s var(--ease)}
.post-featured:hover .post-featured__img{transform:scale(1.04)}
.post-featured__body{padding:44px 44px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.post-featured__tag{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.post-featured h2{font-size:clamp(34px,3.6vw,54px);margin-bottom:10px}
.post-featured p{color:#ece3d6;text-align:justify;hyphens:auto}
.post-featured .btn{margin-top:10px}
.post-featured small{margin-top:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.post-featured{grid-template-columns:1fr}.post-featured__img{min-height:240px}.post-featured__body{padding:30px 24px}}

/* ---------- Texto de las entradas: justificado ---------- */
.article > p:not(.pullquote),.article li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.article h3{font-family:var(--f-serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;font-size:clamp(24px,2.6vw,30px);line-height:1.25;color:var(--amber);margin:44px 0 14px}
.article a{color:var(--amber)}
.article ul,.article ol{margin:0 0 1.2em}

/* ---------- Entradas antiguas: nota de reedición ---------- */
.post-note{display:flex;gap:16px;align-items:flex-start;border:1px solid rgba(232,162,58,.45);background:rgba(232,162,58,.08);padding:18px 22px;margin:0 0 40px;font-size:16px;line-height:1.6}
.post-note p{margin:0;color:var(--ink)}
.post-note a{color:var(--amber);font-weight:700;white-space:nowrap}
.post-note__icon{color:var(--amber);font-size:20px;line-height:1.3}
.cta-box--saga img{box-shadow:0 20px 40px -10px rgba(0,0,0,.7)}
.cta-box--saga h3{font-size:clamp(24px,2.6vw,32px)}

/* =========================================================
   TONOS POR LIBRO · el fondo deja de ser negro plano y se
   tiñe con los colores de las cubiertas:
   I ámbar/desierto · II azul noche · III violeta estelar
   ========================================================= */
body{background:var(--black)}
.marquee{background:transparent}
.tone-amber{background:radial-gradient(1100px 650px at 85% 0%,rgba(232,162,58,.18),transparent 70%),radial-gradient(700px 500px at 0% 100%,rgba(196,82,28,.12),transparent 70%),var(--black)}
.journey{background:linear-gradient(100deg,#2b2420 0%,#1a2438 35%,#152340 65%,#271c47 100%)}
.mark{background:radial-gradient(650px 420px at 30% 45%,rgba(224,54,43,.2),transparent 70%),linear-gradient(180deg,#162036 0%,#1a1f36 100%)}
.letter{background:radial-gradient(700px 500px at 70% 20%,rgba(242,199,107,.2),transparent 70%),linear-gradient(180deg,#14213a 0%,#2a1745 55%,#2d1c3a 100%)}
.tone-violet{background:linear-gradient(180deg,#2d1c3a 0%,#211f3d 55%,#18213a 100%)}
.tone-dusk{background:linear-gradient(180deg,#18213a 0%,var(--black) 100%)}
.page-hero{background:radial-gradient(900px 500px at 80% 0%,rgba(232,162,58,.2),transparent 70%),radial-gradient(500px 300px at 0% 40%,rgba(60,36,90,.35),transparent 70%)}
.footer{background:radial-gradient(900px 400px at 50% 100%,rgba(232,162,58,.12),transparent 70%),linear-gradient(180deg,var(--black),#0e1422)}
.lead{background:rgba(255,255,255,.03)}

/* ---------- Formularios de muestra y aviso para administradores ---------- */
.lm-form-demo{display:grid;gap:16px}
.lm-form-aviso{margin:0 0 14px;padding:10px 14px;border:1px dashed var(--amber);background:rgba(232,162,58,.08);color:var(--ink);font-size:13px;line-height:1.5}
.lm-form-aviso a{color:var(--amber)}