/* =====================================================================
 * COMANDO · Sección RETRO
 * Todo vive dentro de .cdx-retro para no pisar el resto del sitio.
 * ===================================================================== */
.cdx-retro{
  --r-bg:#0b1020; --r-bg2:#070a16; --r-panel:#141a33; --r-card:#111a2c; --r-deep:#0b1220;
  --r-line:#2a3260; --r-line2:rgba(130,170,230,.22);
  --r-text:#e8e6f0; --r-soft:#c9cce0; --r-muted:#a3a8c7; --r-muted2:#a9b6cb;
  --r-gold:#f5c542; --r-violet:#8a7ff0; --r-blue:#4aa8ff; --r-fav:#ff4d6d;
  --f-pix:"Press Start 2P",monospace; --f-term:"VT323",monospace; --f-head:"Orbitron",sans-serif;
  --f-ui:"Rajdhani",system-ui,sans-serif; --f-body:"Space Grotesk",system-ui,sans-serif;
  color:var(--r-text); font-family:var(--f-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.cdx-retro *,.cdx-retro *::before,.cdx-retro *::after{box-sizing:border-box}
.cdx-retro.cdx-retro--archivo,.cdx-retro.cdx-retro--linea,.cdx-retro.cdx-retro--lector{background:var(--r-bg); width:100%}
.cdx-retro.cdx-retro--lector{background:var(--r-bg2)}
.cdx-retro img{max-width:100%; height:auto; border:0; border-radius:0; box-shadow:none}
.cdx-retro p{margin:0}
.cdx-retro .cdx-r-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
html.cdx-r-lock,html.cdx-r-lock body{overflow:hidden}

/* ---------- botones: reseteo a prueba de estilos del tema / Elementor ---------- */
.cdx-retro .cdx-r-btn{
  -webkit-appearance:none; appearance:none; margin:0; padding:var(--b-pad,0); min-height:0; width:auto;
  font-family:inherit; font-size:inherit; font-weight:inherit; font-style:normal; line-height:1.2; letter-spacing:inherit;
  text-transform:none; text-decoration:none; text-align:inherit; cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,opacity .15s;
}
/* Los colores van por variables, así los :hover/:focus del tema no los pisan (y nada se mueve al hacer clic) */
.cdx-retro .cdx-r-btn,.cdx-retro .cdx-r-btn:hover,.cdx-retro .cdx-r-btn:focus,.cdx-retro .cdx-r-btn:active{
  color:var(--b-fg,inherit)!important; background:var(--b-bg,transparent)!important; border:var(--b-bd,0)!important; border-radius:var(--b-rad,0)!important;
  box-shadow:var(--b-sh,none)!important; padding:var(--b-pad,0)!important; outline-color:var(--r-gold); text-decoration:none; transform:none;
}
.cdx-retro .cdx-r-btn:disabled{opacity:.35; cursor:default}
.cdx-retro .cdx-r-btn:focus-visible,.cdx-retro a:focus-visible,.cdx-retro .cdx-r-input:focus-visible{outline:2px solid var(--r-gold); outline-offset:2px}
.cdx-retro a.cdx-r-link,.cdx-retro a.cdx-r-link:hover{color:var(--r-gold); text-decoration:none}
.cdx-retro a.cdx-r-link:hover{text-decoration:underline}

/* pestañas tipo terminal */
.cdx-retro .cdx-r-tab{--b-pad:0 16px; --b-bd:2px solid var(--r-line); --b-fg:var(--r-text);
  min-height:44px; display:inline-flex; align-items:center; font-family:var(--f-term); font-size:22px; letter-spacing:.02em}
.cdx-retro .cdx-r-tab:hover{--b-bd:2px solid var(--c,var(--r-gold))}
.cdx-retro .cdx-r-tab.is-on{--b-bd:2px solid var(--c,var(--r-gold)); --b-bg:var(--c,var(--r-gold)); --b-fg:#0b1020}
.cdx-retro .cdx-r-pix{--b-pad:0 18px; --b-bd:2px solid var(--r-line); --b-fg:var(--r-text);
  min-height:46px; display:inline-flex; align-items:center; font-family:var(--f-term); font-size:22px}
.cdx-retro .cdx-r-pix:hover:not(:disabled){--b-bd:2px solid var(--r-gold)}
.cdx-retro .cdx-r-pix.is-gold{--b-bg:var(--r-gold); --b-bd:2px solid var(--r-gold); --b-fg:#0b1020}
.cdx-retro .cdx-r-textbtn{--b-fg:var(--r-gold); line-height:inherit; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; vertical-align:baseline; min-height:32px}
.cdx-retro .cdx-r-textbtn.is-muted{--b-fg:var(--r-muted)}
.cdx-retro .cdx-r-textbtn,.cdx-retro .cdx-r-textbtn:hover,.cdx-retro .cdx-r-textbtn:focus,.cdx-retro .cdx-r-textbtn:active{text-decoration:underline!important}
.cdx-retro .cdx-r-iconbtn{--b-bg:var(--r-bg); --b-bd:2px solid var(--r-line); --b-fg:var(--r-text);
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center}
.cdx-retro .cdx-r-iconbtn:hover{--b-bd:2px solid var(--r-gold)}
.cdx-retro .cdx-r-iconbtn[aria-pressed="true"]{--b-bg:var(--r-gold); --b-fg:#0b1020; --b-bd:2px solid var(--r-gold)}

/* botones con estilo de las fichas de Personajes */
.cdx-retro .cdx-r-cta,.cdx-retro a.cdx-r-cta{--b-pad:0 16px; --b-rad:10px; --b-bd:1px solid rgba(150,180,220,.3); --b-fg:var(--r-text);
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--f-ui); font-weight:700; font-size:15px; letter-spacing:.06em; text-decoration:none; white-space:nowrap;
  padding:var(--b-pad); color:var(--b-fg); background:var(--b-bg,transparent); border:var(--b-bd); border-radius:var(--b-rad)}
.cdx-retro .cdx-r-cta:hover,.cdx-retro a.cdx-r-cta:hover{--b-bd:1px solid rgba(150,200,255,.7); --b-bg:rgba(74,168,255,.1); color:#fff}
.cdx-retro a.cdx-r-cta.is-blue{--b-bg:#1e4c8c; --b-bd:1px solid var(--r-blue); color:#fff}
.cdx-retro a.cdx-r-cta.is-blue:hover{--b-bg:#2a5fa8}
.cdx-retro a.cdx-r-cta.is-gold,.cdx-retro a.cdx-r-cta.is-gold:hover{--b-rad:0; --b-bg:var(--r-gold); --b-bd:2px solid var(--r-gold); color:#0b1020; font-family:var(--f-term); font-weight:400; font-size:21px; letter-spacing:.02em}
.cdx-retro a.cdx-r-cta.is-gold:hover{--b-bg:#ffd96b}
.cdx-retro .cdx-r-fav{--b-pad:0 16px; --b-rad:10px; --b-bd:1px solid rgba(255,77,109,.6); --b-fg:var(--r-text);
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--f-ui); font-weight:700; font-size:15px; letter-spacing:.06em; white-space:nowrap}
.cdx-retro .cdx-r-fav span{color:var(--r-fav)}
.cdx-retro .cdx-r-fav:hover{--b-bg:rgba(255,77,109,.1)}
.cdx-retro .cdx-r-fav.is-on{--b-bg:rgba(255,77,109,.16); --b-bd:1px solid rgba(255,77,109,.9); --b-fg:#fff}
.cdx-retro .cdx-r-favn{display:inline-flex; align-items:center; min-width:22px; height:18px; padding:0 6px; border-radius:99px; font:700 12px/1 var(--f-ui); color:#ffb3c1; background:rgba(255,77,109,.16); border:1px solid rgba(255,77,109,.35)}

/* ---------- estructura ---------- */
.cdx-retro .cdx-r-wrap{width:100%; max-width:none; margin:0; padding:18px clamp(16px,3vw,48px) 72px; display:flex; flex-direction:column; gap:18px}
.cdx-retro .cdx-r-crumbs{font-family:var(--f-term); font-size:18px; line-height:1; color:var(--r-muted); display:flex; flex-wrap:wrap; gap:8px; align-items:baseline}
.cdx-retro .cdx-r-crumbs b{font-weight:400; color:var(--r-gold)}
.cdx-retro .cdx-r-head{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:flex-end; justify-content:space-between}
.cdx-retro .cdx-r-headtxt{flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:4px}
.cdx-retro .cdx-r-ready{font-family:var(--f-term); font-size:18px; line-height:1.1; color:var(--r-violet)}
.cdx-retro .cdx-r-h1{margin:0; padding:0; font-family:var(--f-pix); font-weight:400; font-size:clamp(20px,2.6vw,32px); line-height:1.25; color:var(--r-gold); letter-spacing:0; text-transform:none; text-shadow:none; background:none}
.cdx-retro .cdx-r-intro{font-size:15px; line-height:1.45; color:var(--r-soft); max-width:none; margin-top:4px}
.cdx-retro .cdx-r-stats{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.cdx-retro .cdx-r-stats > div{border:1px solid var(--r-line); padding:8px 12px; min-width:92px; display:flex; flex-direction:column-reverse; gap:4px}
.cdx-retro .cdx-r-stats dd{margin:0; font-family:var(--f-pix); font-size:14px; color:var(--r-text)}
.cdx-retro .cdx-r-stats dt{font-family:var(--f-term); font-size:16px; line-height:1; color:var(--r-muted); font-weight:400}
.cdx-retro .cdx-r-h2{margin:0; padding:0; font-family:var(--f-head); font-weight:800; font-size:17px; letter-spacing:.08em; line-height:1.3; color:#e9effa; text-transform:uppercase; background:none}
.cdx-retro .cdx-r-h3{font-family:var(--f-head); font-weight:800; font-size:14px; letter-spacing:.08em; color:#e9effa}
.cdx-retro .cdx-r-kicker{font-family:var(--f-term); font-size:20px; color:var(--r-muted2)}
.cdx-retro .cdx-r-hint{font-family:var(--f-ui); font-weight:600; font-size:15px; color:var(--r-muted2)}

/* ---------- avatares de personaje ---------- */
.cdx-retro .cdx-r-av{--s:28px; flex:0 0 auto; width:var(--s); height:var(--s); border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; background:var(--r-deep); color:var(--c);
  border:2px solid var(--c); box-shadow:0 0 12px color-mix(in srgb,var(--c) 35%,transparent);
  font-family:var(--f-head); font-weight:800; font-size:calc(var(--s) * .26); letter-spacing:0; line-height:1}
.cdx-retro .cdx-r-av img{width:100%; height:100%; object-fit:cover; display:block}
.cdx-retro .cdx-r-av.is-sm{--s:24px; border-width:1.5px}
.cdx-retro .cdx-r-av.is-md{--s:46px}
.cdx-retro .cdx-r-av.is-lg{--s:58px}
.cdx-retro .cdx-r-av.is-xl{--s:124px; border-width:3px; box-shadow:0 0 28px color-mix(in srgb,var(--c) 40%,transparent)}
.cdx-retro .cdx-r-pills{display:flex; flex-wrap:wrap; gap:6px}
.cdx-retro .cdx-r-pill{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; border:1px solid rgba(150,180,220,.3);
  font-family:var(--f-ui); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#c9d5e8}
.cdx-retro .cdx-r-pill i{width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c)}

/* ---------- índice de personajes ---------- */
.cdx-retro .cdx-r-index{background:var(--r-card); border:1px solid var(--r-line2); padding:12px 16px 6px; display:flex; flex-direction:column; gap:8px}
.cdx-retro .cdx-r-index-head{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between; font-family:var(--f-ui); font-weight:600; font-size:16px; color:var(--r-muted2)}
.cdx-retro .cdx-r-rail{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:thin; scrollbar-color:var(--r-line) transparent}
.cdx-retro .cdx-r-railbtn{--b-pad:10px 6px; --b-rad:14px; --b-bd:1px solid transparent; --b-fg:#e9effa;
  flex:0 0 auto; width:106px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.cdx-retro .cdx-r-railbtn.is-compact{width:92px}
.cdx-retro .cdx-r-railbtn:hover{--b-bg:color-mix(in srgb,var(--c) 10%,transparent)}
.cdx-retro .cdx-r-railbtn.is-on{--b-bg:color-mix(in srgb,var(--c) 16%,transparent); --b-bd:1px solid var(--c)}
.cdx-retro .cdx-r-railbtn.is-on .cdx-r-av{background:var(--c); color:#0b1020}
.cdx-retro .cdx-r-railname{font-family:var(--f-head); font-weight:700; font-size:11px; letter-spacing:.04em; line-height:1.2}
.cdx-retro .cdx-r-railn{font-family:var(--f-ui); font-weight:600; font-size:14px; color:var(--r-muted2)}

/* panel del personaje elegido */
.cdx-retro .cdx-r-focus{display:flex; flex-wrap:wrap; gap:22px; align-items:center; padding:24px; border-radius:16px; background:var(--r-card);
  border:1px solid var(--c); box-shadow:0 0 30px color-mix(in srgb,var(--c) 14%,transparent); scroll-margin-top:100px}
.cdx-retro .cdx-r-focus[hidden]{display:none}
.cdx-retro .cdx-r-focus-txt{flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:10px}
.cdx-retro .cdx-r-fname{margin:0; padding:0; font-family:var(--f-head); font-weight:800; font-size:clamp(24px,3vw,34px); letter-spacing:.04em; line-height:1.1; color:#fff; text-transform:uppercase; background:none}
.cdx-retro .cdx-r-fname.is-sm{font-size:20px}
.cdx-retro .cdx-r-fline{font-family:var(--f-ui); font-weight:600; font-size:18px; color:#c9d5e8}
.cdx-retro .cdx-r-fline .cdx-r-textbtn{font-weight:700}
.cdx-retro .cdx-r-focus-act{display:flex; flex-direction:column; gap:8px; flex:0 1 auto; max-width:100%}
.cdx-retro .cdx-r-focus-act.is-row{flex-direction:row; flex-wrap:wrap}

/* ---------- barra de filtros ---------- */
.cdx-retro .cdx-r-toolbar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.cdx-retro .cdx-r-tabs{display:flex; flex-wrap:wrap; gap:8px}
.cdx-retro .cdx-r-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.cdx-retro .cdx-r-lbl{font-family:var(--f-term); font-size:20px; color:var(--r-muted); margin:0}
.cdx-retro .cdx-r-input{height:44px; margin:0; padding:0 12px; max-width:100%; background:var(--r-bg); border:2px solid var(--r-line); border-radius:0; box-shadow:none;
  color:var(--r-text); font-family:var(--f-term); font-size:20px; line-height:1}
.cdx-retro input.cdx-r-input{width:240px}
.cdx-retro .cdx-r-input::placeholder{color:#7f86a8}
.cdx-retro .cdx-r-input:focus{border-color:var(--r-gold); outline:none}
.cdx-retro select.cdx-r-input option{background:var(--r-bg); color:var(--r-text)}
.cdx-retro .cdx-r-active{display:flex; flex-wrap:wrap; gap:8px}
.cdx-retro .cdx-r-active[hidden]{display:none}
.cdx-retro .cdx-r-chipx{--b-pad:0 14px; --b-bd:2px solid var(--r-violet); --b-fg:var(--r-text); min-height:40px; font-family:var(--f-term); font-size:20px}
.cdx-retro .cdx-r-chipx:hover{--b-bg:rgba(138,127,240,.15)}
.cdx-retro .cdx-r-sum{font-family:var(--f-term); font-size:20px; color:var(--r-muted)}
.cdx-retro .cdx-r-empty{text-align:center; font-family:var(--f-term); font-size:24px; color:var(--r-muted)}
.cdx-retro .cdx-r-empty[hidden]{display:none}

/* ---------- grilla: lo apaisado ocupa dos columnas ---------- */
.cdx-retro .cdx-r-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(192px,1fr)); gap:18px; grid-auto-flow:row dense; align-items:start}
/* paginador */
.cdx-retro .cdx-r-pager{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; padding-top:6px}
.cdx-retro .cdx-r-pager[hidden]{display:none}
.cdx-retro .cdx-r-pg{--b-pad:0 12px; --b-bd:2px solid var(--r-line); --b-fg:var(--r-text); min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-term); font-size:22px}
.cdx-retro .cdx-r-pg:hover:not(:disabled){--b-bd:2px solid var(--r-gold)}
.cdx-retro .cdx-r-pg.is-on{--b-bg:var(--r-gold); --b-bd:2px solid var(--r-gold); --b-fg:#0b1020}
.cdx-retro .cdx-r-pgdots{font-family:var(--f-term); font-size:22px; color:var(--r-muted); padding:0 4px}
.cdx-retro .cdx-r-card{display:flex; flex-direction:column; min-width:0; background:var(--r-panel); border:2px solid var(--r-line); transition:border-color .15s,transform .15s}
.cdx-retro .cdx-r-card:hover{border-color:#3d4785}
.cdx-retro .cdx-r-card.is-ap{grid-column:span 2}
.cdx-retro .cdx-r-open{display:flex; flex-direction:column; width:100%}
.cdx-retro .cdx-r-thumb{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; overflow:hidden;
  background:repeating-linear-gradient(45deg,#161c3a 0 10px,#131934 10px 20px); border-bottom:2px solid var(--r-line)}
.cdx-retro .cdx-r-card.is-ap .cdx-r-thumb{aspect-ratio:16/9}
.cdx-retro .cdx-r-thumb img{width:100%; height:100%; object-fit:contain; transition:transform .5s ease}
.cdx-retro .cdx-r-open:hover .cdx-r-thumb img{transform:scale(1.03)}
.cdx-retro .cdx-r-ph{font-family:var(--f-term); font-size:20px; color:var(--r-muted); background:var(--r-bg); padding:4px 10px}
.cdx-retro .cdx-r-npag{position:absolute; right:8px; bottom:8px; font-family:var(--f-term); font-size:18px; line-height:1; padding:4px 8px; background:rgba(11,16,32,.88); color:var(--r-text)}
.cdx-retro .cdx-r-cbody{display:flex; flex-direction:column; gap:7px; padding:12px 14px 8px}
.cdx-retro .cdx-r-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.cdx-retro .cdx-r-badge{display:inline-block; font-family:var(--f-term); font-size:18px; line-height:1; padding:3px 8px 2px; color:#0b1020; background:var(--c,var(--r-violet))}
.cdx-retro .cdx-r-badge.is-historieta{--c:var(--r-gold)}
.cdx-retro .cdx-r-badge.is-dibujo{--c:var(--r-violet)}
.cdx-retro .cdx-r-year{font-family:var(--f-term); font-size:20px; color:var(--r-muted); margin-left:auto}
.cdx-retro .cdx-r-meta .cdx-r-year + .cdx-r-year{margin-left:0}
.cdx-retro .cdx-r-title{display:block; font-size:16px; font-weight:700; line-height:1.3; color:var(--r-text)}
.cdx-retro .cdx-r-desc{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:14px; line-height:1.5; color:#b7bad3}
.cdx-retro .cdx-r-chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px}
.cdx-retro .cdx-r-chip{--b-pad:3px 12px 3px 4px; --b-rad:999px; --b-bd:1px solid rgba(150,180,220,.28); --b-bg:rgba(255,255,255,.03); --b-fg:#c9d5e8;
  min-height:36px; display:inline-flex; align-items:center; gap:7px; font-family:var(--f-ui); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.cdx-retro .cdx-r-chip:hover{--b-bd:1px solid var(--c); --b-fg:#fff}
.cdx-retro .cdx-r-chip.is-on{--b-bg:color-mix(in srgb,var(--c) 22%,transparent); --b-bd:1px solid var(--c); --b-fg:#fff}
.cdx-retro .cdx-r-star{color:var(--r-gold)}

/* ---------- ficha (modal) ---------- */
.cdx-r-modal.cdx-retro{position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:20px}
.cdx-r-modal.cdx-retro[hidden]{display:none}
.cdx-retro .cdx-r-backdrop{position:absolute; inset:0; background:rgba(5,8,18,.92)}
.cdx-retro .cdx-r-dialog{position:relative; width:100%; max-width:1100px; max-height:calc(100vh - 40px); overflow:auto; background:var(--r-panel); border:2px solid var(--r-gold); outline:none}
.cdx-retro .cdx-r-stage{position:relative; display:flex; align-items:center; justify-content:center; min-height:240px; height:58vh; overflow:hidden;
  background:repeating-linear-gradient(45deg,#161c3a 0 12px,#131934 12px 24px)}
.cdx-retro .cdx-r-stageimg{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.cdx-retro .cdx-r-stage.is-zoom{overflow:auto; display:block; height:70vh}
.cdx-retro .cdx-r-stage.is-zoom .cdx-r-stageimg{max-width:none; max-height:none; width:auto; height:auto; cursor:zoom-out}
.cdx-retro .cdx-r-stagebtns{position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:2}
.cdx-retro .cdx-r-stage.is-zoom .cdx-r-stagebtns{position:sticky; float:right; top:12px; margin:12px}
.cdx-retro .cdx-r-mbody{display:flex; flex-wrap:wrap; gap:28px; padding:26px 30px 30px}
.cdx-retro .cdx-r-mmain{flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:14px}
.cdx-retro .cdx-r-mside{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:10px}
.cdx-retro .cdx-r-mtitle{margin:0; padding:0; font-family:var(--f-body); font-size:26px; font-weight:700; line-height:1.25; color:var(--r-text); text-transform:none; letter-spacing:0; background:none}
.cdx-retro .cdx-r-mtext{font-size:16px; line-height:1.6; color:var(--r-soft); white-space:pre-line}
.cdx-retro .cdx-r-quote{background:var(--r-bg); border-left:4px solid var(--r-violet); padding:14px 16px}
.cdx-retro .cdx-r-quote > div{font-family:var(--f-term); font-size:19px; color:var(--r-violet)}
.cdx-retro .cdx-r-quote p{font-size:15px; line-height:1.55; color:var(--r-soft); margin-top:6px; white-space:pre-line}
.cdx-retro .cdx-r-dl{margin:0; display:grid; grid-template-columns:110px 1fr; gap:6px 16px; font-family:var(--f-term); font-size:20px; border-top:2px dashed var(--r-line); padding-top:14px}
.cdx-retro .cdx-r-dl dt{color:var(--r-muted); font-weight:400}
.cdx-retro .cdx-r-dl dd{margin:0}
.cdx-retro .cdx-r-person{--b-pad:10px 12px; --b-rad:12px; --b-bg:var(--r-card); --b-bd:1px solid var(--r-line2); --b-fg:#e9effa;
  width:100%; min-height:64px; display:flex; align-items:center; gap:12px; text-align:left}
.cdx-retro .cdx-r-person:hover{--b-bd:1px solid var(--c)}
.cdx-retro .cdx-r-person.is-on{--b-bg:color-mix(in srgb,var(--c) 14%,var(--r-card)); --b-bd:1px solid var(--c)}
.cdx-retro .cdx-r-person.is-on .cdx-r-av{background:var(--c); color:#0b1020}
.cdx-retro .cdx-r-person > span:last-child{display:flex; flex-direction:column; gap:3px; min-width:0}
.cdx-retro .cdx-r-person b{font-family:var(--f-head); font-weight:700; font-size:13px; letter-spacing:.04em}
.cdx-retro .cdx-r-person em{font-style:normal; font-family:var(--f-term); font-size:18px; color:var(--r-gold)}
.cdx-retro .cdx-r-person small{font-family:var(--f-ui); font-weight:600; font-size:14px; color:var(--r-muted2)}
.cdx-retro .cdx-r-mnav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; font-family:var(--f-term); font-size:20px; color:var(--r-muted)}
.cdx-retro .cdx-r-mside .cdx-r-cta.is-gold{width:100%}

/* ---------- lector ---------- */
.cdx-retro .cdx-r-lector{padding-top:20px; gap:18px}
.cdx-retro .cdx-r-lbar{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:2px solid var(--r-line)}
.cdx-retro .cdx-r-lbar > .cdx-r-cta{--b-rad:0; --b-bd:2px solid var(--r-line); font-family:var(--f-term); font-weight:400; font-size:20px; letter-spacing:.02em}
.cdx-retro .cdx-r-lmeta{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:6px}
.cdx-retro .cdx-r-lmeta .cdx-r-year{margin-left:0}
.cdx-retro .cdx-r-ltitle{font-size:22px; font-weight:700; line-height:1.25}
.cdx-retro .cdx-r-lctl{display:flex; flex-wrap:wrap; gap:6px}
.cdx-retro .cdx-r-lctl .cdx-r-tab{font-size:20px; --b-pad:0 12px}
.cdx-retro .cdx-r-resume{font-family:var(--f-term); font-size:22px; color:var(--r-text); background:var(--r-panel); border:2px solid var(--r-violet); padding:10px 16px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.cdx-retro .cdx-r-lgrid{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start}
.cdx-retro .cdx-r-lmain{flex:999 1 640px; min-width:0; display:flex; flex-direction:column; gap:14px}
.cdx-retro .cdx-r-lside{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:14px; position:sticky; top:20px}
.cdx-retro .cdx-r-viewer{position:relative; display:flex; align-items:center; justify-content:center; background:var(--r-bg); border:2px solid var(--r-line); padding:14px; min-height:200px; outline:none}
.cdx-retro .cdx-r-page{display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 140px); object-fit:contain; background:#efe6d2}
.cdx-retro .cdx-r-viewer.is-fit-w .cdx-r-page{width:100%; max-height:none}
.cdx-retro .cdx-r-viewer.is-full{background:#000; padding:0; border:0}
.cdx-retro .cdx-r-viewer.is-full .cdx-r-page{max-height:100vh; max-width:100vw; width:auto}
.cdx-retro .cdx-r-hit{position:absolute; top:0; bottom:0; width:22%; --b-bg:transparent}
.cdx-retro .cdx-r-hit.is-prev{left:0; cursor:w-resize}
.cdx-retro .cdx-r-hit.is-next{right:0; cursor:e-resize}
.cdx-retro .cdx-r-hit:disabled{display:none}
.cdx-retro .cdx-r-hit:focus-visible{outline-offset:-4px}
.cdx-retro .cdx-r-mark{position:absolute; top:24px; left:24px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:4px 14px 4px 4px; border-radius:999px;
  background:rgba(7,12,24,.9); border:1px solid var(--c); font-family:var(--f-ui); font-weight:700; font-size:14px; letter-spacing:.05em; color:#fff; pointer-events:none}
.cdx-retro .cdx-r-mark[hidden]{display:none}
.cdx-retro .cdx-r-mark .cdx-r-av{background:var(--c); color:#0b1020}
.cdx-retro .cdx-r-lnav{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.cdx-retro .cdx-r-count{font-family:var(--f-pix); font-size:13px; color:var(--r-gold)}
.cdx-retro .cdx-r-thumbs{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; scrollbar-color:var(--r-line) transparent}
.cdx-retro .cdx-r-tb{position:relative; flex:0 0 auto; width:72px; display:flex; flex-direction:column; gap:5px}
.cdx-retro .cdx-r-tb.is-ap{width:118px}
.cdx-retro .cdx-r-tb img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:#1b2245; border:2px solid var(--r-line); opacity:.75; transition:opacity .15s,border-color .15s}
.cdx-retro .cdx-r-tb.is-ap img{aspect-ratio:297/210}
.cdx-retro .cdx-r-tb:hover img{opacity:1}
.cdx-retro .cdx-r-tb.is-on img{opacity:1; border-color:var(--r-gold)}
.cdx-retro .cdx-r-tbn{position:absolute; left:4px; top:4px; font-family:var(--f-term); font-size:17px; line-height:1; padding:2px 6px; background:rgba(11,16,32,.88); color:var(--r-text)}
.cdx-retro .cdx-r-tb.is-on .cdx-r-tbn{background:var(--r-gold); color:#0b1020}
.cdx-retro .cdx-r-tbbar{display:block; height:6px; border-radius:3px; background:transparent}
.cdx-retro .cdx-r-tbbar.is-on{background:var(--c)}
.cdx-retro .cdx-r-note{background:var(--r-bg); border:2px solid var(--r-violet); padding:16px 20px; display:flex; flex-direction:column; gap:8px}
.cdx-retro .cdx-r-note[hidden]{display:none}
.cdx-retro .cdx-r-note-h{font-family:var(--f-term); font-size:20px; color:var(--r-violet)}
.cdx-retro .cdx-r-note p{font-size:16px; line-height:1.6; color:#d3d5e6; white-space:pre-line}
.cdx-retro .cdx-r-note-by{font-family:var(--f-term); font-size:18px; color:var(--r-muted)}
.cdx-retro .cdx-r-note-by:empty{display:none}
.cdx-retro .cdx-r-about{display:flex; flex-direction:column; gap:14px; padding-top:10px}
.cdx-retro .cdx-r-about-slot{color:var(--r-soft); font-size:16px; line-height:1.65}
.cdx-retro .cdx-r-about-slot p{margin:0 0 1em}
.cdx-retro .cdx-r-about-slot a{color:var(--r-gold)}
.cdx-retro .cdx-r-box{background:var(--r-card); border:1px solid var(--r-line2); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px}
.cdx-retro .cdx-r-box[hidden]{display:none}
.cdx-retro .cdx-r-lidx{display:flex; flex-direction:column; gap:8px}
.cdx-retro .cdx-r-lfocus{border-color:var(--c); box-shadow:0 0 24px color-mix(in srgb,var(--c) 14%,transparent)}
.cdx-retro a.cdx-r-erabox{text-decoration:none; color:var(--r-text); gap:4px}
.cdx-retro a.cdx-r-erabox b{font-family:var(--f-head); font-size:14px; letter-spacing:.04em}
.cdx-retro a.cdx-r-erabox span:last-child{font-family:var(--f-ui); font-weight:700; color:var(--r-gold)}
.cdx-retro a.cdx-r-erabox:hover{border-color:var(--r-gold)}

/* ---------- línea de tiempo ---------- */
.cdx-retro .cdx-r-linea .cdx-r-eras{max-width:1100px}
.cdx-retro .cdx-r-follow{font-family:var(--f-ui); font-weight:600; font-size:16px; color:var(--r-muted2)}
.cdx-retro .cdx-r-erajump{display:flex; flex-wrap:wrap; gap:8px}
.cdx-retro a.cdx-r-erachip{min-height:44px; padding:0 14px; display:inline-flex; align-items:center; border:2px solid var(--r-line); color:var(--r-text); text-decoration:none; font-family:var(--f-term); font-size:20px}
.cdx-retro a.cdx-r-erachip:hover{border-color:var(--r-gold)}
.cdx-retro a.cdx-r-erachip.is-last{border-color:var(--r-gold); color:var(--r-gold)}
.cdx-retro a.cdx-r-erachip.is-hit{border-color:var(--c); color:#fff; background:color-mix(in srgb,var(--c) 14%,transparent)}
.cdx-retro .cdx-r-eras{list-style:none; margin:0 0 0 10px; padding:0; border-left:4px solid var(--r-line)}
.cdx-retro .cdx-r-era{position:relative; margin:0; padding:0 0 52px 36px; transition:opacity .25s; scroll-margin-top:100px}
.cdx-retro .cdx-r-era.is-dim{opacity:.28}
.cdx-retro .cdx-r-dot{position:absolute; left:-14px; top:0; width:20px; height:20px; background:var(--r-violet); border:4px solid var(--r-bg); transition:transform .2s}
.cdx-retro .cdx-r-era.is-last .cdx-r-dot{background:var(--r-gold)}
.cdx-retro .cdx-r-era.is-hit .cdx-r-dot{background:var(--c); transform:scale(1.4)}
.cdx-retro .cdx-r-erahead{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cdx-retro .cdx-r-erayear{font-family:var(--f-pix); font-size:18px; color:var(--r-violet)}
.cdx-retro .cdx-r-era.is-last .cdx-r-erayear{color:var(--r-gold)}
.cdx-retro .cdx-r-hitpill{font-family:var(--f-ui); font-weight:700; font-size:13px; letter-spacing:.05em; padding:4px 12px; border-radius:999px; color:#fff; background:color-mix(in srgb,var(--c) 22%,transparent); border:1px solid var(--c)}
.cdx-retro .cdx-r-eratitle{margin:12px 0 8px; padding:0; font-family:var(--f-body); font-size:26px; font-weight:700; line-height:1.25; color:var(--r-text); text-transform:none; letter-spacing:0; background:none}
.cdx-retro .cdx-r-eratext{font-size:16px; line-height:1.6; color:var(--r-soft); max-width:660px; margin-bottom:18px; white-space:pre-line}
.cdx-retro .cdx-r-egrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; grid-auto-flow:row dense; max-width:860px}
.cdx-retro a.cdx-r-etb{position:relative; display:flex; aspect-ratio:3/4; overflow:hidden; border:2px solid var(--r-line); text-decoration:none;
  background:repeating-linear-gradient(45deg,#161c3a 0 8px,#131934 8px 16px); align-items:center; justify-content:center}
.cdx-retro a.cdx-r-etb.is-ap{grid-column:span 2; aspect-ratio:auto}
.cdx-retro a.cdx-r-etb img{width:100%; height:100%; object-fit:contain}
.cdx-retro a.cdx-r-etb span{position:absolute; left:0; right:0; bottom:0; padding:18px 8px 6px; font-family:var(--f-term); font-size:17px; line-height:1.1; color:var(--r-text); background:linear-gradient(transparent,rgba(7,10,22,.92))}
.cdx-retro a.cdx-r-etb:hover{border-color:var(--r-gold)}
.cdx-retro a.cdx-r-etb.is-more{border-style:dashed; color:var(--r-gold); font-family:var(--f-term); font-size:20px; text-align:center; padding:10px; background:none}
.cdx-retro .cdx-r-erarow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px}
.cdx-retro .cdx-r-erarow > span{font-family:var(--f-term); font-size:19px; color:var(--r-muted)}
.cdx-retro .cdx-r-erarow > span.is-gold{color:var(--r-gold)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cdx-retro .cdx-r-lside{position:static}
}
@media (max-width:640px){
  .cdx-retro .cdx-r-wrap{padding:22px 16px 56px; gap:20px}
  .cdx-retro .cdx-r-grid{grid-template-columns:minmax(0,1fr); gap:16px}
  .cdx-retro .cdx-r-card.is-ap{grid-column:span 1}
  .cdx-retro input.cdx-r-input{width:100%; flex:1 1 180px}
  .cdx-retro .cdx-r-tools{width:100%}
  .cdx-retro .cdx-r-focus{padding:18px; gap:16px}
  .cdx-retro .cdx-r-av.is-xl{--s:88px}
  .cdx-retro .cdx-r-focus-act{flex:1 1 100%; flex-direction:row; flex-wrap:wrap}
  .cdx-r-modal.cdx-retro{padding:0}
  .cdx-retro .cdx-r-dialog{max-height:100vh; height:100%; border-width:0}
  .cdx-retro .cdx-r-stage{height:46vh}
  .cdx-retro .cdx-r-mbody{padding:20px 18px 26px}
  .cdx-retro .cdx-r-egrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cdx-retro .cdx-r-era{padding-left:26px}
  .cdx-retro .cdx-r-viewer{padding:6px}
  .cdx-retro .cdx-r-page{max-height:none}
  .cdx-retro .cdx-r-hit{width:30%}
}
@media (prefers-reduced-motion:reduce){
  .cdx-retro *{transition:none!important; scroll-behavior:auto!important}
}
.cdx-retro .cdx-r-noscript{columns:2; color:var(--r-text)}
.cdx-retro .cdx-r-noscript a{color:var(--r-gold)}

/* ---------- botones de navegación (banners) ---------- */
.cdx-r-nav.cdx-retro{display:block; width:100%; background:var(--r-bg); padding:0; scroll-margin-top:80px}
.cdx-retro.cdx-r-nav ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:0}
.cdx-retro.cdx-r-nav li{margin:0; padding:0; min-width:0}
.cdx-retro.cdx-r-nav a.cdx-r-navbtn{position:relative; display:flex; align-items:center; justify-content:center; height:clamp(64px,7.5vw,110px); overflow:hidden; text-decoration:none;
  background:var(--nb,#2a3260); color:#141414; outline-offset:-4px; transition:filter .15s, transform .15s}
.cdx-retro.cdx-r-nav a.cdx-r-navbtn:hover{filter:brightness(1.08)}
.cdx-retro.cdx-r-nav a.cdx-r-navbtn:focus-visible{outline:3px solid var(--r-gold)}
.cdx-retro.cdx-r-nav .cdx-r-navimg{position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover; display:block; margin:0!important}
.cdx-retro.cdx-r-nav .cdx-r-navtxt{position:relative; padding:0 10px; text-align:center; font-family:"Rajdhani",system-ui,sans-serif; font-weight:700; font-size:clamp(16px,2.1vw,30px); line-height:1; text-transform:uppercase; letter-spacing:.02em}
.cdx-retro.cdx-r-nav .is-c0{--nb:#b5483b} .cdx-retro.cdx-r-nav .is-c1{--nb:#a8cbb7} .cdx-retro.cdx-r-nav .is-c2{--nb:#fbf2a8}
.cdx-retro.cdx-r-nav .is-c3{--nb:#2d3fae} .cdx-retro.cdx-r-nav .is-c4{--nb:#ffffff} .cdx-retro.cdx-r-nav .is-c5{--nb:#f5c542}
/* el que está abierto: barra dorada abajo; los demás, apenas más apagados */
.cdx-retro.cdx-r-nav a.cdx-r-navbtn::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:transparent}
.cdx-retro.cdx-r-nav a.cdx-r-navbtn.is-on::after{background:var(--r-gold); box-shadow:0 0 12px rgba(245,197,66,.7)}
.cdx-retro.cdx-r-nav ul:has(.is-on) a.cdx-r-navbtn:not(.is-on){filter:saturate(.75) brightness(.82)}
.cdx-retro.cdx-r-nav ul:has(.is-on) a.cdx-r-navbtn:not(.is-on):hover{filter:none}
.cdx-retro-seccion{width:100%}
@media (max-width:760px){
  .cdx-retro.cdx-r-nav ul{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
  .cdx-retro.cdx-r-nav li{flex:0 0 44%; scroll-snap-align:start}
  .cdx-retro.cdx-r-nav a.cdx-r-navbtn{height:64px}
}
/* dentro de la sección, los botones ya llevan a todos lados: la ruta propia de cada vista sobra */
.cdx-retro-seccion .cdx-r-crumbs{display:none}
.cdx-retro-seccion > .cdx-retro,.cdx-retro-seccion > .elementor{width:100%}

/* entrada (post) abierta dentro de la sección */
.cdx-retro-seccion .cdx-r-post{background:#0b1020; margin:0; padding:28px clamp(16px,3vw,32px) 64px; color:#e8e6f0; font-family:"Space Grotesk",system-ui,sans-serif}
.cdx-retro-seccion .cdx-r-post > *{max-width:860px; margin-left:auto; margin-right:auto}
.cdx-retro-seccion .cdx-r-posthead{display:flex; flex-direction:column; gap:8px; margin-bottom:22px}
.cdx-retro-seccion .cdx-r-postcat{font-family:"VT323",monospace; font-size:20px; color:#8a7ff0; text-transform:uppercase}
.cdx-retro-seccion .cdx-r-posttitle{margin:0; padding:0; font-family:"Orbitron",sans-serif; font-weight:800; font-size:clamp(24px,3.2vw,38px); line-height:1.15; color:#fff; letter-spacing:.02em; background:none}
.cdx-retro-seccion .cdx-r-postdate{font-size:14px; color:#a3a8c7}
.cdx-retro-seccion .cdx-r-postimg{margin:10px 0 0}
.cdx-retro-seccion .cdx-r-postimg img{width:100%!important; height:auto!important; border-radius:10px; display:block}
.cdx-retro-seccion .cdx-r-postbody{font-size:18px; line-height:1.7; color:#d3d5e6}
.cdx-retro-seccion .cdx-r-postbody a{color:#f5c542}
.cdx-retro-seccion .cdx-r-postlink{margin-top:28px}
.cdx-retro-seccion .cdx-r-postlink a{font-family:"VT323",monospace; font-size:22px; color:#f5c542; text-decoration:none}

/* panel del personaje elegido en el Archivo: compacto (mitad de alto) */
.cdx-retro .cdx-r-focus{gap:10px 18px; padding:12px 18px; border-radius:12px}
.cdx-retro .cdx-r-focus .cdx-r-av.is-xl{--s:64px; border-width:2px; box-shadow:0 0 16px color-mix(in srgb,var(--c) 35%,transparent)}
.cdx-retro .cdx-r-focus-txt{gap:4px}
.cdx-retro .cdx-r-focus .cdx-r-kicker{display:none}
.cdx-retro .cdx-r-focus .cdx-r-fname{font-size:clamp(18px,1.8vw,24px)}
.cdx-retro .cdx-r-focus .cdx-r-pills{gap:4px}
.cdx-retro .cdx-r-focus .cdx-r-pill{padding:3px 9px; font-size:11px}
.cdx-retro .cdx-r-focus .cdx-r-fline{font-size:15px; line-height:1.3}
.cdx-retro .cdx-r-focus .cdx-r-focus-act{flex-direction:row; flex-wrap:wrap; gap:6px}
.cdx-retro .cdx-r-focus .cdx-r-cta,.cdx-retro .cdx-r-focus a.cdx-r-cta,.cdx-retro .cdx-r-focus .cdx-r-fav{min-height:36px; --b-pad:0 12px; font-size:13px}
/* el nombre y las etiquetas en la misma línea */
.cdx-retro .cdx-r-focus-txt{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px}
.cdx-retro .cdx-r-focus-txt .cdx-r-fline{grid-column:1 / -1}
@media (max-width:640px){ .cdx-retro .cdx-r-focus-txt{grid-template-columns:1fr} }