/* Portada narrativa de ERCMart: héroe en vivo, capítulos con parallax y juegos del universo ERC. */
:root{--navy:#0d1630;--navy2:#1b2a57;--erc:#f26a0f;--alarm:#ff3b30;--snow:#eef4ff}
.story-body{background:var(--navy);color:var(--snow)}
.story-body .site-header{position:fixed;inset:0 0 auto;max-width:none;z-index:50;border:0;padding:16px 4%;background:linear-gradient(#0d1630ee,#0d163000);color:var(--snow)}
.story-body .wordmark small{color:var(--snow)}
.story-body .site-header .nav-play{color:var(--ink);border-color:var(--snow);box-shadow:3px 3px 0 #000}

/* Héroe en vivo */
.live{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.live-layer{position:absolute;inset:-6%;background-size:cover;background-position:center;will-change:transform}
.live-layer.back{animation:drift 26s ease-in-out infinite alternate}
.live video.live-layer{width:112%;height:112%;object-fit:cover}
.live-glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 70%,#ff3b3055,transparent 70%);mix-blend-mode:screen;animation:pulse 2.4s ease-in-out infinite}
.live-flicker{position:absolute;inset:0;background:#000;opacity:0;animation:flicker 7s steps(1) infinite}
.live canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.live-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0d1630f2 0%,#0d1630a0 38%,#0d163000 70%),linear-gradient(#0d163000 60%,var(--navy))}
.live-copy{position:absolute;left:5%;bottom:13%;max-width:640px;z-index:3}
.onair{display:inline-flex;align-items:center;gap:10px;font:800 12px/1 Inter,system-ui;letter-spacing:2px;background:var(--alarm);color:#fff;padding:8px 12px;border-radius:4px;margin-bottom:22px}
.onair i{width:9px;height:9px;border-radius:50%;background:#fff;animation:blink 1s steps(1) infinite}
.live h1{font-size:clamp(54px,8vw,118px);line-height:.86;text-transform:uppercase;font-weight:900;letter-spacing:-2px;margin-bottom:22px}
.live h1 em{font-style:normal;color:var(--erc)}
.live .lede{max-width:520px;color:#dfe7ff}
.live .hero-actions{margin:26px 0 10px}
.live .button{color:var(--ink)}
.live .text-link{color:var(--snow)}
.hud{position:absolute;right:4%;top:96px;z-index:3;width:min(300px,40vw);font:600 12px/1.4 Inter,system-ui;background:#0d1630c8;border:1px solid #ffffff30;border-radius:10px;padding:16px;backdrop-filter:blur(6px)}
.hud h2{font:800 11px/1 Inter,system-ui;letter-spacing:2px;margin:0 0 12px;color:var(--erc)}
.hud dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0}
.hud dt{color:#b9c4e6}.hud dd{margin:0;font:800 18px/1 'Barlow Condensed',sans-serif;text-align:right;font-variant-numeric:tabular-nums}
.hud .bar{grid-column:1/-1;height:6px;background:#ffffff22;border-radius:3px;overflow:hidden}.hud .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--erc),var(--alarm));width:0;transition:width 1s}
.news{position:absolute;inset:auto 0 0;z-index:4;display:flex;overflow:hidden;background:var(--erc);color:var(--ink);font:800 15px/1 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;border-top:3px solid var(--ink)}
.news b{flex:none;background:var(--ink);color:var(--erc);padding:12px 16px}
.news-track{display:flex;gap:48px;padding:12px 0;white-space:nowrap;animation:ticker 60s linear infinite}

/* Capítulos */
.chapters{position:relative}
.chapter-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px}
.chapter-nav a{width:12px;height:12px;border-radius:50%;border:2px solid var(--snow);opacity:.55}
.chapter-nav a.on{background:var(--erc);border-color:var(--erc);opacity:1}
.chapter{position:relative;min-height:120svh;display:flex;align-items:flex-end;overflow:hidden}
.chapter-art{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform}
video.chapter-art{width:100%;height:124%;object-fit:cover}
.chapter::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--navy) 0%,#0d163000 22%,#0d163000 50%,#0d1630e6 85%,var(--navy))}
.chapter-card{position:relative;z-index:2;margin:0 5% 12vh;max-width:620px;padding:28px 32px;background:#0d1630c4;border-left:4px solid var(--erc);border-radius:4px 14px 14px 4px;backdrop-filter:blur(6px);opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s}
.chapter.seen .chapter-card{opacity:1;transform:none}
.chapter-num{font:900 clamp(70px,10vw,140px)/.8 'Barlow Condensed',sans-serif;color:transparent;-webkit-text-stroke:2px var(--erc);display:block;margin-bottom:6px}
.chapter h2{font-size:clamp(42px,5.6vw,78px);line-height:.9;text-transform:uppercase;font-weight:900;margin-bottom:18px}
.chapter p{font-size:17px;line-height:1.7;color:#dfe7ff}
.chapter .when{font:800 11px/1.5 Inter,system-ui;letter-spacing:2px;color:var(--erc)}
.chapter .chapter-link{display:inline-block;margin-top:10px;font-weight:800;color:var(--snow)}
.chapter.right{justify-content:flex-end}

/* Juegos del universo */
.universe{padding:110px 5%;max-width:1400px;margin:auto}
.universe h2,.fer-section h2{font-size:clamp(46px,6vw,86px);line-height:.9;text-transform:uppercase;font-weight:900;margin-bottom:40px}
.games{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px}
.game{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:14px;overflow:hidden;text-decoration:none;color:var(--snow);border:2px solid #ffffff22;background:#000 center/cover}
.game::before{content:"";position:absolute;inset:0;background:linear-gradient(#0000 35%,#0d1630f0)}
.game>*{position:relative}.game div{padding:24px}
.game small{font:800 11px/1.5 Inter,system-ui;letter-spacing:2px;color:var(--erc)}
.game h3{font-size:42px;line-height:.9;text-transform:uppercase;font-weight:900;margin:8px 0 10px}
.game p{font-size:14px;line-height:1.6;color:#dfe7ff;margin-bottom:14px}
.game span{font-weight:800}
.game:hover{border-color:var(--erc)}

/* Fer */
.fer-section{padding:40px 5% 110px;max-width:1400px;margin:auto}
.fer-section>p{max-width:640px;font-size:17px;line-height:1.7;color:#dfe7ff;margin:-20px 0 34px}
.fer-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.fer-strip figure{margin:0;scroll-snap-align:start}
.fer-strip img,.fer-strip video{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;display:block;background:#1b2a57}
.fer-strip figcaption{font:700 12px/1.4 Inter,system-ui;margin-top:8px;color:#b9c4e6}

/* Secciones del juego heredadas, sobre papel */
.game-info{background:var(--paper);color:var(--ink)}
.fiction{font-size:11px;color:#b9c4e6;text-align:center;padding:18px;background:var(--navy)}
.story-body .site-footer{background:var(--paper);color:var(--ink)}

@keyframes drift{to{transform:scale(1.06) translate(-1.5%,1%)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes flicker{0%,100%{opacity:0}62%{opacity:.35}63%{opacity:0}64%{opacity:.25}65%{opacity:0}}
@keyframes blink{50%{opacity:0}}
@keyframes ticker{to{transform:translateX(-50%)}}

@media (max-width:900px){
 .story-body .site-header nav a:not(.nav-play){display:none}
 .hud{left:5%;right:auto;top:84px;width:auto;max-width:90%}
 .hud dl{grid-template-columns:repeat(3,auto auto)}
 .hud .bar{display:none}
 .live-copy{bottom:11%;right:5%}
 .games{grid-template-columns:1fr}
 .game{min-height:340px}
 .chapter-nav{display:none}
 .chapter-card{margin-bottom:9vh}
}
@media (prefers-reduced-motion:reduce){
 .live-layer.back,.live-glow,.live-flicker,.news-track,.onair i{animation:none}
 .chapter-card{opacity:1;transform:none;transition:none}
}