@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#05040a;--ink:#f8f2ff;--muted:#a89eb3;--purple:#a85cff;--violet:#6d2bd6;--line:rgba(184,117,255,.22);--glass:rgba(13,9,22,.72);--max:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#05040a;color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input{font:inherit}.site-noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
#pageConstellationCanvas{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55}
/* [ELIMINADO] .topbar/.nav-wrap/.brand-mark/.brand-copy/nav a/.search-btn — header viejo, ya no existe en index.php (ahora .site-header/.header-inner/.main-nav/.nav-link) */
/* [ELIMINADO] .hero-orbit/.hero-copy/.cosmic-btn/.hero-cosmos/.cosmos-*/.ring-*/.orbit-dot/.constellation-label — hero cósmico viejo, sustituido por .hero-card. (También traía un .hero-actions{margin-top:32px} viejo que se filtraba sobre el nuevo hero; ya no existe). */
/* [ELIMINADO] .collection/.collection-head/.collection-count — solo existían para la portada vieja. Se conserva lo de abajo (.series-grid/.series-card base) porque /biblioteca lo sigue usando vía .collection-body */
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.series-card{position:relative;background:linear-gradient(150deg,rgba(23,14,34,.9),rgba(8,6,12,.96));border:1px solid rgba(171,101,241,.18);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;animation:cardIn .8s both;animation-delay:var(--delay)}.series-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(171,86,255,.13),transparent 42%);opacity:0;transition:.5s;pointer-events:none}.series-card:hover{transform:translateY(-10px);border-color:rgba(188,119,255,.6);box-shadow:0 25px 70px rgba(81,24,139,.22)}.series-card:hover:before{opacity:1}.card-topline{height:36px;padding:0 14px;display:flex;align-items:center;gap:9px;font-size:7px;letter-spacing:2px;color:#655b6e;border-bottom:1px solid rgba(180,109,246,.12)}.card-topline i{flex:1;height:1px;background:rgba(180,109,246,.12)}.card-topline span:last-child{color:#a887ba}.cover-wrap{display:block;position:relative;aspect-ratio:1.53/1;overflow:hidden;background:#0b0810}.cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}.series-card:hover .cover{transform:scale(1.07);filter:saturate(1.08) contrast(1.03)}.cover-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-120%);transition:.9s}.series-card:hover .cover-shine{transform:translateX(120%)}.cover-overlay{position:absolute;inset:auto 14px 14px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(6,4,10,.72);border:1px solid rgba(207,164,255,.25);backdrop-filter:blur(10px);opacity:0;transform:translateY(10px);transition:.4s}.series-card:hover .cover-overlay{opacity:1;transform:none}.cover-overlay span{font-size:8px;letter-spacing:2px}.cover-overlay b{font-size:15px;color:#c992ff}.placeholder{height:100%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,rgba(141,57,227,.2),transparent 50%),#0b0810}.placeholder span{font-size:45px}.placeholder small{font-size:8px;letter-spacing:3px;color:#7d7088}.card-body{padding:19px}.title-line{display:flex;justify-content:space-between;gap:15px}.card-index{margin:0 0 7px;color:#735f83;font-size:7px;letter-spacing:2px}.card-body h3{font:600 20px/1.15 Cinzel;margin:0;max-width:330px}.status-orb{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:#b96cff;box-shadow:0 0 0 4px rgba(185,108,255,.08),0 0 18px #a85cff}.synopsis{color:#807687;font-size:11px;line-height:1.65;max-height:37px;overflow:hidden;margin:13px 0 0}.card-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:19px}.chapter-pill{min-height:34px;display:flex;align-items:center;gap:12px;border:1px solid rgba(180,110,248,.18);padding:0 10px;background:rgba(255,255,255,.018);transition:.3s}.chapter-pill span{font-size:8px;color:#aaa0b3;letter-spacing:1px}.chapter-pill b{font-size:7px;color:#8e7c99}.chapter-pill.new{border-color:rgba(177,91,255,.5);background:rgba(143,49,220,.09)}.chapter-pill.new b{color:#d2a4ff}.chapter-pill:hover{border-color:#b46aff;transform:translateY(-2px);box-shadow:0 7px 20px rgba(119,39,199,.18)}.no-chapters{font-size:9px;color:#645b6b}.empty-card{grid-column:1/-1;padding:90px;text-align:center;border:1px dashed var(--line);background:rgba(255,255,255,.015)}.empty-star{font-size:38px;color:#b66aff}.empty-card h3{font:500 24px Cinzel}
/* [ELIMINADO] .portal/.portal-*/.orbit-1/2/3/.manifesto — banner CTA de la portada vieja, no existe en index.php actual */
footer{border-top:1px solid var(--line);min-height:130px;padding:0 max(24px,calc((100vw - 1220px)/2));display:flex;align-items:center;gap:25px;color:#766d7d}.footer-brand{display:flex;align-items:center;gap:12px;margin-right:auto}.footer-brand strong{display:block;font:12px Cinzel;color:#c9bdd3;letter-spacing:1px}.footer-brand small{font-size:7px;letter-spacing:2px}.footer-brand .brand-mark{width:36px;height:36px}.footer-brand img{width:25px;height:25px}.footer-coord{font:10px Cinzel;color:#514957;letter-spacing:3px}
/* [ELIMINADO] .search-overlay(viejo)/.search-box/.close/.search-input-wrap/.result-link — buscador viejo, sustituido por .search-dialog/.search-close/.search-input/.search-result (ver bloque final del archivo) */
/* [ELIMINADO] .site-intro (v1) y su contenido — pantalla de carga vieja; index.php actual no tiene ese splash. Las @keyframes (introIn/introOut/spin/spinReverse/pulse/float/cardIn) se conservan porque cardIn la usa .series-card y otras pueden estar en uso en otras páginas. */
@keyframes introIn{from{opacity:0;transform:translateY(25px) scale(.95)}to{opacity:1;transform:none}}@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes spin{to{transform:rotate(386deg) scaleY(.55)}}@keyframes spinReverse{to{transform:rotate(-360deg) scaleY(.38)}}@keyframes pulse{50%{transform:scale(1.05);box-shadow:0 0 110px rgba(130,50,226,.38),inset 0 0 50px rgba(176,94,255,.25)}}@keyframes float{50%{transform:translateY(-5px)}}@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(max-width:900px){.hero-orbit{grid-template-columns:1fr;min-height:760px}.hero-copy{padding:70px 0 20px}.hero-cosmos{height:380px}.hero-side-text{display:none}.series-grid{grid-template-columns:repeat(2,1fr)}.portal{min-height:620px}.portal-symbol,.portal-orbit{left:76%;top:68%}.portal-copy{max-width:650px}.portal{padding:60px 4%}.portal p{max-width:470px}.collection-head{align-items:flex-start}.collection-count{display:none}}
@media(max-width:620px){.topbar{height:70px}.nav-wrap,main{width:min(100% - 28px,var(--max))}.brand-copy small{display:none}nav{gap:0;margin-right:8px}nav a{padding:9px 7px;font-size:10px}nav a:before{left:7px;right:7px}.search-btn{width:38px;height:38px}.hero-orbit{min-height:690px}.hero h1{font-size:48px;letter-spacing:-1px}.hero-description{font-size:12px}.hero-meta{margin-top:42px;gap:15px}.hero-cosmos{height:300px}.ring-a{width:300px;height:300px}.ring-b{width:350px;height:350px}.ring-c{width:235px;height:235px}.cosmos-core{width:120px;height:120px}.core-symbol{font-size:34px}.collection{padding:75px 0}.collection-head h2{font-size:31px}.series-grid{grid-template-columns:1fr;gap:18px}.cover-wrap{aspect-ratio:1.55/1}.portal{min-height:650px;padding:55px 0}.portal h2{font-size:37px}.portal-symbol,.portal-orbit{left:70%;top:78%}.portal-number{font-size:50px}.manifesto{gap:10px}.manifesto p{letter-spacing:2px;font-size:7px}footer{padding:30px 14px;flex-wrap:wrap}.footer-coord{display:none}.search-box{padding:34px 22px}.intro-logo-wrap{width:150px;height:150px}}


/* INTERACTIVE CELESTIAL SEARCH */
.search-trigger{border:0;color:inherit;font:inherit;cursor:pointer;padding:0;background:transparent;appearance:none;text-align:inherit;position:relative;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.search-trigger:hover{transform:scale(1.035);filter:drop-shadow(0 0 35px rgba(171,88,255,.18))}
.search-trigger:focus-visible{outline:1px solid rgba(213,166,255,.85);outline-offset:10px;border-radius:50%}
.search-trigger .cosmos-core{transition:box-shadow .45s ease,transform .45s ease;border-color:rgba(209,166,255,.48)}
.search-trigger:hover .cosmos-core{transform:scale(1.08);box-shadow:0 0 35px rgba(158,75,239,.38),inset 0 0 35px rgba(191,112,255,.2)}
.search-trigger .core-symbol{animation:searchStarPulse 2.4s ease-in-out infinite}
.search-orbit-hint{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font:700 8px 'DM Sans',sans-serif;letter-spacing:4px;color:rgba(216,190,239,.48);white-space:nowrap;opacity:.78;transition:opacity .35s ease,letter-spacing .35s ease,color .35s ease}
.search-orbit-hint span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#d9b7ff;box-shadow:0 0 12px #b263ff;margin-right:7px;vertical-align:1px;animation:hintPulse 1.8s ease-in-out infinite}
.search-trigger:hover .search-orbit-hint{opacity:1;letter-spacing:5px;color:#eadcff}
.search-overlay:before,.search-overlay:after{content:"";position:absolute;border:1px solid rgba(173,96,241,.1);border-radius:50%;pointer-events:none}
.search-overlay:before{width:75vw;height:75vw;animation:searchSpin 28s linear infinite}
.search-overlay:after{width:52vw;height:52vw;border-style:dashed;animation:searchSpinReverse 20s linear infinite}
.search-box{overflow:hidden}
.search-modal-orbit{position:absolute;width:220px;height:220px;right:-80px;top:-95px;border:1px solid rgba(180,105,249,.16);border-radius:50%;pointer-events:none;animation:searchSpin 18s linear infinite}
.search-modal-orbit:before{content:"";position:absolute;inset:35px;border:1px solid rgba(203,153,255,.12);border-radius:50%}
.search-modal-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:#e6d3ff;box-shadow:0 0 15px #b25cff}
.search-modal-orbit i:nth-child(1){left:22px;top:103px}.search-modal-orbit i:nth-child(2){right:20px;top:43px}.search-modal-orbit i:nth-child(3){left:106px;bottom:4px}
.search-input-wrap{position:relative;z-index:2;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.search-input-wrap:focus-within{border-color:rgba(196,126,255,.75);box-shadow:0 0 0 1px rgba(183,99,255,.12),0 0 35px rgba(132,45,220,.17),inset 0 0 35px rgba(130,48,212,.08);transform:translateY(-2px)}
.search-input-wrap input::placeholder{color:#5f5668}
#searchResults{position:relative;z-index:2;max-height:340px;overflow:auto;margin-top:12px;padding-right:5px}
#searchResults::-webkit-scrollbar{width:4px}#searchResults::-webkit-scrollbar-thumb{background:rgba(173,92,245,.35);border-radius:10px}
.result-link{gap:15px;padding:13px 4px;border-bottom:1px solid rgba(181,109,250,.11);transition:background .25s ease,padding .25s ease,transform .25s ease}
.result-link:hover{padding-left:10px;padding-right:10px;background:rgba(160,75,236,.06);transform:translateX(3px)}
.result-main{display:flex;align-items:center;gap:12px;min-width:0}.result-cover{width:42px;height:55px;object-fit:cover;border:1px solid rgba(193,126,255,.25);box-shadow:0 0 18px rgba(130,52,221,.13)}.result-text{min-width:0}.result-text span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-text small{display:block;margin-top:4px;color:#655c6e;font-size:8px;letter-spacing:1.5px;text-transform:uppercase}.result-link b{white-space:nowrap}
.search-empty{padding:28px 0;text-align:center;color:#756a80;font-size:11px}.search-empty strong{display:block;color:#b98be4;font:500 18px Cinzel;margin-bottom:7px}
@keyframes searchStarPulse{50%{transform:scale(1.12);filter:drop-shadow(0 0 12px rgba(226,203,255,.9))}}
@keyframes hintPulse{50%{transform:scale(1.7);opacity:.45}}
@keyframes searchSpin{to{transform:rotate(360deg)}}
@keyframes searchSpinReverse{to{transform:rotate(-360deg)}}
@media(max-width:620px){.search-orbit-hint{bottom:0;font-size:7px;letter-spacing:3px}.search-trigger:hover{transform:none}.search-modal-orbit{opacity:.55}.search-overlay:before{width:130vw;height:130vw}.search-overlay:after{width:90vw;height:90vw}}


/* V7 — THE CENTRAL ORACLE IS THE SEARCH */
body.search-open{overflow:hidden}
.topbar .search-btn{display:none!important}
.search-trigger{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.search-trigger::after{content:"";position:absolute;inset:24%;border:1px solid rgba(224,194,255,.18);border-radius:50%;box-shadow:0 0 35px rgba(164,83,255,.14);opacity:0;transform:scale(.7);transition:.45s ease;pointer-events:none}
.search-trigger:hover::after,.search-trigger:focus-visible::after{opacity:1;transform:scale(1)}
.search-trigger:active{transform:scale(.98)!important}
.search-trigger .cosmos-core{position:relative;z-index:2}
.search-trigger .cosmos-core::before{content:"";position:absolute;inset:-18px;border:1px solid rgba(202,153,255,.13);border-radius:50%;animation:oraclePulse 2.8s ease-in-out infinite;pointer-events:none}
.search-trigger .cosmos-core::after{content:"";position:absolute;inset:-42px;border:1px dashed rgba(175,101,247,.11);border-radius:50%;animation:searchSpinReverse 17s linear infinite;pointer-events:none}
.search-orbit-hint{z-index:4}

.search-overlay{padding:20px;background:radial-gradient(circle at 50% 45%,rgba(106,37,180,.13),transparent 38%),rgba(2,1,6,.94);z-index:500;overscroll-behavior:contain}
.search-backdrop-stars{position:absolute;inset:0;opacity:.55;pointer-events:none;background-image:radial-gradient(circle at 17% 23%,#d9c1ff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 18%,#cba4ff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 77%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 24% 78%,#b97aff 0 1px,transparent 1.5px),radial-gradient(circle at 58% 12%,#e8dbff 0 1px,transparent 1.5px);background-size:280px 280px,330px 330px,410px 410px,360px 360px,500px 500px;animation:starDrift 18s linear infinite}
.search-box{width:min(820px,100%);max-height:min(780px,calc(100vh - 40px));padding:34px 38px 20px;border-radius:28px;background:linear-gradient(145deg,rgba(21,12,32,.97),rgba(5,4,10,.985));border:1px solid rgba(202,151,255,.38);box-shadow:0 0 0 1px rgba(133,56,211,.08),0 45px 140px rgba(0,0,0,.78),inset 0 0 70px rgba(125,43,204,.07);overflow:hidden;transform:translateY(26px) scale(.94);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.search-overlay.open .search-box{transform:none;opacity:1}
.search-box::before{content:"";position:absolute;inset:0;border-radius:28px;padding:1px;background:linear-gradient(120deg,rgba(220,183,255,.35),transparent 25%,transparent 72%,rgba(165,85,255,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.search-modal-head{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:4}.search-modal-code{display:block;margin-bottom:11px;font-size:7px;letter-spacing:3px;color:#675d70}.search-box .close{position:relative;right:auto;top:auto;width:40px;height:40px;border:1px solid rgba(191,127,255,.18);border-radius:50%;background:rgba(255,255,255,.025);font-size:23px;line-height:1;color:#8f8198;display:grid;place-items:center;transition:.3s;z-index:5}.search-box .close:hover{color:#fff;border-color:#bd78ff;box-shadow:0 0 25px rgba(165,83,255,.2);transform:rotate(90deg)}
.search-title-row{display:flex;align-items:center;gap:18px;margin:22px 0 24px;position:relative;z-index:3}.search-sigil{width:58px;height:58px;flex:none;border:1px solid rgba(202,151,255,.24);border-radius:50%;display:grid;place-items:center;color:#eadcff;font-size:25px;background:radial-gradient(circle,rgba(173,89,255,.23),transparent 68%);box-shadow:0 0 35px rgba(137,49,221,.15)}.search-box h2{font:500 clamp(30px,5vw,48px)/1.03 Cinzel;margin:0}.search-box h2 em{font-style:normal;color:#b974f5;text-shadow:0 0 25px rgba(174,91,255,.3)}.search-title-row p{margin:8px 0 0;color:#756a7e;font-size:11px;line-height:1.5}
.search-input-wrap{height:64px;border-radius:15px;padding:0 15px;border-color:rgba(190,122,255,.28);background:rgba(3,2,8,.75);box-shadow:inset 0 0 35px rgba(121,42,203,.08);position:relative;z-index:4}.search-input-wrap>span{font-size:25px}.search-input-wrap input{height:62px;font-size:14px}.search-input-wrap kbd{font:600 7px 'DM Sans';letter-spacing:2px;color:#6c6171;border:1px solid rgba(180,115,241,.16);border-radius:6px;padding:6px 7px;white-space:nowrap}.search-status{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 7px;color:#6d6274;font-size:8px;letter-spacing:1.8px;text-transform:uppercase}.search-status span:last-child{color:#a36ed0}
#searchResults{max-height:390px;overflow:auto;margin-top:4px;padding:0 5px 4px 0}.result-card-new{display:grid;grid-template-columns:34px 58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 10px;border:1px solid transparent;border-bottom-color:rgba(185,113,250,.1);border-radius:13px;animation:resultIn .45s both;animation-delay:var(--result-delay);transition:.3s}.result-card-new:hover{border-color:rgba(193,125,255,.3);background:linear-gradient(90deg,rgba(150,65,231,.11),rgba(255,255,255,.02));transform:translateX(4px);box-shadow:0 10px 30px rgba(89,28,156,.12)}.result-number{font:600 9px Cinzel;color:#5f5368;letter-spacing:1px}.result-cover-wrap{width:58px;height:72px;border-radius:7px;overflow:hidden;border:1px solid rgba(195,131,255,.22);background:#0a0710;display:grid;place-items:center;box-shadow:0 0 20px rgba(125,44,210,.1)}.result-cover-wrap img{width:100%;height:100%;object-fit:cover;transition:.45s}.result-card-new:hover .result-cover-wrap img{transform:scale(1.08)}.result-cover-placeholder{font-size:22px;color:#b56cff}.result-info{min-width:0}.result-info small{display:block;color:#806b8d;font-size:7px;letter-spacing:2px;margin-bottom:6px}.result-info strong{display:block;color:#eee4f4;font:600 15px Cinzel;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-info>span{display:block;color:#796d81;font-size:9px;margin-top:5px}.result-open{white-space:nowrap;color:#9e65d0;font-size:7px;letter-spacing:2px}.result-open b{font-size:13px;margin-left:5px}.search-empty-new{padding:55px 20px;text-align:center;border:1px dashed rgba(188,118,255,.18);border-radius:14px;margin-top:8px}.empty-orbit{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 14px;border:1px solid rgba(191,121,255,.25);border-radius:50%;color:#dcbcff;box-shadow:0 0 30px rgba(139,50,219,.15)}.search-empty-new strong{display:block;font:500 18px Cinzel;color:#c9a3df}.search-empty-new p{margin:7px 0 0;color:#706578;font-size:10px}.search-modal-foot{display:flex;justify-content:space-between;gap:20px;margin-top:13px;padding-top:13px;border-top:1px solid rgba(185,113,250,.1);font-size:7px;letter-spacing:2px;color:#514756}.search-modal-foot span:first-child{color:#8963a3}
@keyframes oraclePulse{50%{transform:scale(1.08);opacity:.45}}@keyframes resultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes starDrift{to{background-position:70px 35px,-60px 80px,50px -40px,-40px 60px,80px -50px}}
@media(max-width:620px){.search-box{padding:25px 17px 15px;border-radius:22px;max-height:calc(100vh - 24px)}.search-title-row{gap:12px;margin:18px 0}.search-sigil{width:48px;height:48px;font-size:21px}.search-title-row p{font-size:10px}.search-input-wrap{height:56px}.search-input-wrap input{height:54px;font-size:12px}.search-input-wrap kbd{display:none}.result-card-new{grid-template-columns:24px 48px minmax(0,1fr);gap:9px;padding:10px 4px}.result-cover-wrap{width:48px;height:62px}.result-open{display:none}.result-info strong{font-size:13px}.search-modal-foot{font-size:6px}.search-modal-foot span:last-child{display:none}.search-status{font-size:7px}.search-trigger{width:100%}}


/* =========================================================
   V8 — MOBILE FIRST + ANIMATED CELESTIAL INTRO + AUDIO UI
   ========================================================= */

/* Intro: cinematic sequence rather than a static splash */
.site-intro{animation:none!important;opacity:1;visibility:visible;transition:opacity .95s cubic-bezier(.2,.8,.2,1),visibility 0s linear .95s;background:radial-gradient(circle at 50% 48%,rgba(112,42,195,.16),transparent 32%),#030208;isolation:isolate}
.site-intro.done{display:grid;opacity:0;visibility:hidden;pointer-events:none}
.site-intro:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(171,99,255,.06) 45deg,transparent 90deg,rgba(214,172,255,.04) 180deg,transparent 230deg,rgba(171,99,255,.06) 300deg,transparent 360deg);animation:introNebula 16s linear infinite;pointer-events:none}
.site-intro:after{content:"";position:absolute;width:min(60vw,720px);height:min(60vw,720px);border:1px solid rgba(190,128,255,.08);border-radius:50%;box-shadow:0 0 90px rgba(131,47,220,.12),inset 0 0 90px rgba(131,47,220,.06);animation:introPortal 5.6s cubic-bezier(.2,.7,.2,1) both;pointer-events:none}
.intro-content{opacity:0;transform:translateY(22px) scale(.96);animation:introContentIn 2.4s cubic-bezier(.2,.8,.2,1) .35s forwards}
.intro-logo-wrap{transform:scale(.72);opacity:0;animation:introLogoIn 1.6s cubic-bezier(.2,1,.2,1) .25s forwards}
.custom-intro-logo{animation:introFloat 4s ease-in-out 1.5s infinite}
.intro-ring-one{animation:introSpin 18s linear infinite}
.intro-ring-two{animation:introSpinReverse 12s linear infinite}
.intro-eyebrow{opacity:0;transform:translateY(10px);animation:introTextIn .9s ease 1.45s forwards}
.intro-content h1{opacity:0;transform:translateY(16px);animation:introTextIn 1s cubic-bezier(.2,.8,.2,1) 1.65s forwards;text-shadow:0 0 0 rgba(200,140,255,0);animation-name:introTitleIn}
.intro-divider{opacity:0;animation:introDividerIn 1s ease 2.25s forwards}
.intro-tagline{opacity:0;transform:translateY(9px);animation:introTextIn .9s ease 2.45s forwards}
.intro-skip{opacity:0;animation:introTextIn .8s ease 2.9s forwards}
.intro-controls{position:absolute;z-index:20;right:26px;bottom:25px;display:flex;align-items:center;gap:9px}
.intro-sound,.intro-skip{position:relative;right:auto;bottom:auto;min-height:36px;padding:9px 13px;border-radius:999px;border:1px solid rgba(181,108,255,.25);background:rgba(255,255,255,.025);color:#92869c;font:600 8px 'DM Sans';letter-spacing:1.8px;cursor:pointer;backdrop-filter:blur(12px);transition:transform .3s,border-color .3s,color .3s,box-shadow .3s}
.intro-sound:hover,.intro-skip:hover{color:#fff;border-color:#b56eff;transform:translateY(-2px);box-shadow:0 8px 30px rgba(128,42,215,.18)}
.intro-sound[aria-pressed="true"]{color:#eadcff;border-color:rgba(205,155,255,.55);box-shadow:0 0 24px rgba(161,78,237,.22)}
.sound-dot{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#7b697f;box-shadow:0 0 0 transparent;vertical-align:middle;transition:.3s}
.intro-sound[aria-pressed="true"] .sound-dot{background:#d7a8ff;box-shadow:0 0 10px #ad5cff;animation:soundPulse 1.2s ease-in-out infinite}
.intro-glow-one{animation:glowDriftOne 7s ease-in-out infinite alternate}
.intro-glow-two{animation:glowDriftTwo 8s ease-in-out infinite alternate}

/* Better touch behavior for the oracle/search circle */
.hero-cosmos{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:0}
.search-trigger{border:0;color:inherit;background:transparent;padding:0;width:100%;appearance:none}
.search-trigger:focus-visible{outline:1px solid rgba(213,174,255,.65);outline-offset:8px}
.search-trigger .cosmos-core{will-change:transform;transition:transform .35s ease,box-shadow .35s ease}
.search-trigger:hover .cosmos-core{transform:scale(1.045);box-shadow:0 0 105px rgba(143,56,239,.38),inset 0 0 45px rgba(176,94,255,.25)}
.search-trigger:active .cosmos-core{transform:scale(.96)}
.search-orbit-hint{animation:hintFloat 2.4s ease-in-out infinite}

/* Cards feel alive without making mobile scrolling heavy */
.series-card{will-change:transform}
.cover-overlay{pointer-events:none}
.chapter-pill{position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
.chapter-pill:hover{transform:translateY(-2px);border-color:rgba(202,145,255,.55);box-shadow:0 8px 28px rgba(105,32,184,.18)}
.chapter-pill:after{content:"";position:absolute;top:-30%;left:-80%;width:45%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.chapter-pill:hover:after{left:135%}

/* Search modal: stable viewport behavior on phones */
.search-overlay{display:flex;align-items:center;justify-content:center;min-height:100dvh;height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
.search-box{max-height:calc(100dvh - 24px);display:flex;flex-direction:column}
#searchResults{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0}

@keyframes introNebula{to{transform:rotate(360deg) scale(1.08)}}
@keyframes introPortal{0%{transform:scale(.55);opacity:0}45%{opacity:.8}100%{transform:scale(1);opacity:.3}}
@keyframes introContentIn{to{opacity:1;transform:none}}
@keyframes introLogoIn{0%{opacity:0;transform:scale(.55) rotate(-8deg)}65%{opacity:1;transform:scale(1.04) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes introFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(.8deg)}}
@keyframes introSpin{to{transform:rotate(360deg)}}
@keyframes introSpinReverse{to{transform:rotate(-360deg)}}
@keyframes introTextIn{to{opacity:1;transform:none}}
@keyframes introTitleIn{0%{opacity:0;transform:translateY(18px) scale(.98);filter:blur(8px);text-shadow:0 0 35px rgba(190,116,255,.5)}100%{opacity:1;transform:none;filter:blur(0);text-shadow:0 0 24px rgba(190,116,255,.18)}}
@keyframes introDividerIn{0%{opacity:0;transform:scaleX(.1) rotate(-8deg)}100%{opacity:1;transform:none}}
@keyframes glowDriftOne{to{transform:translate(9vw,7vh) scale(1.12);opacity:.7}}
@keyframes glowDriftTwo{to{transform:translate(-8vw,-6vh) scale(1.1);opacity:.75}}
@keyframes hintFloat{50%{transform:translateY(-3px);opacity:.78}}
@keyframes soundPulse{50%{transform:scale(1.7);opacity:.55}}

/* Tablet */
@media (max-width:900px){
  main,.nav-wrap{width:min(100% - 34px,var(--max))}
  .hero-orbit{grid-template-columns:1fr;min-height:0;padding:70px 0 35px}
  .hero-copy{padding:25px 0 5px;max-width:720px}
  .hero-cosmos{height:470px;margin-top:-10px}
  .hero-side-text{display:none}
  .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection{padding-top:80px}
}

/* Phone */
@media (max-width:620px){
  html,body{width:100%;overflow-x:hidden}
  .topbar{height:64px}
  .nav-wrap,main{width:calc(100% - 24px)}
  .brand{gap:8px;min-width:0}
  .brand-mark{width:36px;height:36px;flex:none}
  .brand-mark img{width:25px;height:25px}
  .brand-copy strong{font-size:10px;letter-spacing:.7px}
  nav{margin-right:0;gap:0;flex:none}
  nav a{padding:8px 5px;font-size:9px;letter-spacing:0}
  nav a:before{left:5px;right:5px}

  .hero-orbit{padding:45px 0 18px}
  .hero-copy{padding:12px 0 0}
  .section-kicker{font-size:7px;letter-spacing:2.2px}
  .section-kicker i{width:18px}
  .hero h1{font-size:clamp(39px,12vw,54px);line-height:.98;letter-spacing:-1.3px;margin:19px 0 18px}
  .hero-description{font-size:11px;line-height:1.7;max-width:100%}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:24px}
  .cosmic-btn{width:100%;min-height:46px;font-size:10px}
  .hero-meta{margin-top:30px;gap:18px;justify-content:space-between}
  .hero-meta span{font-size:7px;letter-spacing:1.3px}
  .hero-meta b{font-size:13px}

  .hero-cosmos{height:370px;margin:0 -5px}
  .ring-a{width:285px;height:285px}
  .ring-b{width:335px;height:335px}
  .ring-c{width:225px;height:225px}
  .cosmos-core{width:112px;height:112px}
  .core-symbol{font-size:32px}
  .orbit-dot{width:6px;height:6px}
  .dot-a{top:14%;right:14%}.dot-b{bottom:15%;left:13%}.dot-c{right:3%}
  .label-top{top:7%;right:3%;font-size:6px;letter-spacing:2px}
  .label-bottom{bottom:8%;left:3%;font-size:6px;letter-spacing:2px}
  .search-orbit-hint{bottom:3px;font-size:6px;letter-spacing:2.3px}

  .collection{padding:62px 0 65px}
  .collection-head{align-items:flex-end;margin-bottom:25px}
  .collection-head h2{font-size:28px;margin:13px 0 7px}
  .collection-head p{font-size:10px;line-height:1.5;max-width:230px}
  .collection-count{padding-left:12px}.collection-count strong{font-size:27px}.collection-count span{font-size:6px;letter-spacing:2px}
  .series-grid{grid-template-columns:1fr;gap:15px}
  .series-card{border-radius:15px}
  .card-topline{height:32px;padding:0 11px;font-size:6px;letter-spacing:1.5px}
  .cover-wrap{aspect-ratio:1.48/1}
  .cover-overlay{opacity:1;transform:none;inset:auto 9px 9px;padding:8px 10px;background:rgba(6,4,10,.58)}
  .cover-overlay span{font-size:7px;letter-spacing:1.5px}
  .card-body{padding:15px}
  .card-body h3{font-size:17px}
  .synopsis{font-size:10px;line-height:1.55;max-height:46px}
  .card-footer{margin-top:14px;gap:6px}
  .chapter-pill{min-height:32px;font-size:8px}

  .portal{min-height:570px;padding:45px 0}
  .portal h2{font-size:31px}
  .portal-copy p{font-size:11px;line-height:1.65}
  .portal-symbol,.portal-orbit{left:72%;top:78%}

  footer{padding:28px 12px}

  /* Intro phone composition */
  .site-intro:after{width:88vw;height:88vw}
  .intro-content{width:100%;padding:0 18px}
  .intro-logo-wrap{width:142px;height:142px}
  .intro-eyebrow{font-size:7px;letter-spacing:3.4px;margin-top:20px}
  .intro-content h1{font-size:clamp(34px,12vw,48px);letter-spacing:-1px}
  .intro-divider{margin:13px auto}.intro-tagline{font-size:7px;letter-spacing:4px}
  .intro-controls{left:12px;right:12px;bottom:max(13px,env(safe-area-inset-bottom));justify-content:center;gap:7px}
  .intro-sound,.intro-skip{min-height:34px;font-size:7px;padding:8px 10px;letter-spacing:1.4px}

  /* Modal fills the phone safely and remains easy to type in */
  .search-overlay{padding:8px}
  .search-box{width:100%;max-height:calc(100dvh - 16px);padding:19px 13px 11px;border-radius:20px}
  .search-modal-code{font-size:6px;letter-spacing:2px;margin-bottom:8px}
  .search-box .close{width:36px;height:36px;font-size:20px}
  .search-title-row{margin:15px 0 16px;gap:10px}
  .search-sigil{width:43px;height:43px;font-size:18px}
  .search-box h2{font-size:27px}
  .search-title-row p{font-size:9px;line-height:1.4;margin-top:5px}
  .search-input-wrap{height:52px;padding:0 11px;border-radius:13px}
  .search-input-wrap>span{font-size:21px}
  .search-input-wrap input{height:50px;font-size:12px}
  .search-status{margin:10px 1px 5px;font-size:6px;letter-spacing:1.1px}
  #searchResults{max-height:none}
  .result-card-new{grid-template-columns:22px 44px minmax(0,1fr);gap:8px;padding:9px 2px}
  .result-cover-wrap{width:44px;height:58px}
  .result-info small{font-size:6px;letter-spacing:1.4px;margin-bottom:4px}
  .result-info strong{font-size:11px}
  .result-info>span{font-size:8px;margin-top:4px}
  .result-open{display:none}
  .search-modal-foot{margin-top:7px;padding-top:8px;font-size:5px;letter-spacing:1.2px}
}

@media (max-width:370px){
  nav a{padding-inline:4px;font-size:8px}
  .brand-copy strong{font-size:9px}
  .hero-cosmos{height:335px}
  .ring-a{width:250px;height:250px}.ring-b{width:295px;height:295px}.ring-c{width:198px;height:198px}.cosmos-core{width:100px;height:100px}
  .intro-logo-wrap{width:125px;height:125px}
  .intro-sound,.intro-skip{font-size:6px;padding-inline:8px}
}



/* Desktop-first main page: keep the composition intact; only scale spacing/type on narrow screens. */
@media(max-width:900px){
  .nav-wrap,main{width:min(94vw,var(--max))}
  .hero-orbit{grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:22px;min-height:620px;padding:65px 0 30px}
  .hero-copy{max-width:none}.hero-cosmos{height:560px}.hero-side-text{display:block}
  .series-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:620px){
  /* No separate mobile redesign: preserve the PC visual language while reducing scale. */
  .topbar{height:62px}.nav-wrap,main{width:calc(100% - 22px)}nav{gap:0;margin-right:0}nav a{padding:9px 6px;font-size:8px}
  .brand-copy strong{font-size:9px}.brand-copy small{font-size:6px;letter-spacing:2px}.brand-mark{width:34px;height:34px}.brand-mark img{width:24px;height:24px}
  .hero-orbit{grid-template-columns:minmax(0,1.05fr) minmax(145px,.72fr);gap:8px;min-height:500px;padding:45px 0 20px}
  .hero-copy{padding:5px 0}.hero h1{font-size:clamp(28px,8.8vw,43px);line-height:1.02}.hero-description{font-size:9px;line-height:1.55}.hero-actions{display:flex;flex-wrap:wrap;gap:7px}.cosmic-btn{width:auto;min-height:38px;padding:10px 12px;font-size:8px}.hero-meta{gap:10px}.hero-meta span{font-size:6px}.hero-meta b{font-size:11px}
  .hero-cosmos{height:430px;margin:0}.ring-a{width:210px;height:210px}.ring-b{width:245px;height:245px}.ring-c{width:160px;height:160px}.cosmos-core{width:86px;height:86px}.core-symbol{font-size:27px}.search-orbit-hint{font-size:6px;letter-spacing:1px;white-space:nowrap}
  .collection{padding-top:55px}.collection-head h2{font-size:28px}.series-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.series-card{min-width:0}.card-body{padding:11px}.series-card h3{font-size:11px}.synopsis{font-size:8px;line-height:1.5}.chapter-pill{font-size:7px;padding:7px}.card-topline{font-size:6px}.portal{min-height:430px;padding:30px 18px}.portal-copy h2{font-size:30px}
  .site-intro-v10 .intro-image{background-position:center center;filter:saturate(.85) contrast(1.02) brightness(.6);transform:scale(1.12);animation-duration:8.2s}
  .site-intro-v10 .intro-sacred-orbit{top:39%}.site-intro-v10 .orbit-outer{width:105vw;height:48vw}.site-intro-v10 .orbit-mid{width:78vw;height:37vw}.site-intro-v10 .orbit-inner{width:48vw;height:48vw}.site-intro-v10 .intro-sigil{top:39%;font-size:48px}.site-intro-v10 .intro-sigil-glow{top:39%;width:38vw;height:38vw}.site-intro-v10 .intro-copy-v10{top:39%;transform:translate(-50%,calc(-50% + 105px));width:94vw}.site-intro-v10 .intro-brand-v10{font-size:clamp(18px,5.7vw,30px);letter-spacing:2px}.site-intro-v10 .intro-sub-v10{font-size:6px;letter-spacing:3px}.site-intro-v10 .intro-small-mark{font-size:6px;letter-spacing:2px}.site-intro-v10 .intro-enter-v10{margin-top:18px;padding:11px 16px;font-size:7px}.site-intro-v10 .intro-skip-v10{right:10px;bottom:10px;font-size:7px}
}

/* Prevent browser accessibility settings from turning the cinematic intro into a still image. */


/* =========================================================
   V11 — DIVINE CONSTELLATION INTRO
   Pure CSS + Canvas: no background image, no audio.
   ========================================================= */
.site-intro-v11{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#030208;color:#fff;isolation:isolate;cursor:default}
.site-intro-v11:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 43%,rgba(116,45,220,.22),transparent 26%),radial-gradient(circle at 50% 43%,rgba(52,15,105,.22),transparent 52%),linear-gradient(180deg,#020107 0%,#07020f 52%,#020107 100%);z-index:0}
.site-intro-v11:after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.28) 75%,rgba(0,0,0,.78) 100%)}
.site-intro-v11 .divine-backdrop{position:absolute;inset:0;z-index:1;overflow:hidden}
.site-intro-v11 .divine-aura{position:absolute;left:50%;top:43%;border-radius:50%;transform:translate(-50%,-50%);filter:blur(1px);mix-blend-mode:screen;pointer-events:none}
.site-intro-v11 .aura-a{width:min(42vw,620px);height:min(42vw,620px);background:radial-gradient(circle,rgba(255,245,255,.23) 0,rgba(177,92,255,.18) 18%,rgba(103,33,194,.09) 42%,transparent 70%);animation:v11Aura 4.5s ease-in-out infinite}
.site-intro-v11 .aura-b{width:min(75vw,1100px);height:min(75vw,1100px);background:radial-gradient(circle,rgba(127,45,230,.08),transparent 62%);animation:v11Aura 7s ease-in-out .6s infinite reverse}
.site-intro-v11 .aura-c{width:min(24vw,360px);height:min(24vw,360px);background:radial-gradient(circle,rgba(255,255,255,.14),rgba(164,73,255,.1) 28%,transparent 68%);animation:v11Core 2.8s ease-in-out infinite}
.site-intro-v11 .divine-rays{position:absolute;left:50%;top:43%;width:min(62vw,900px);height:min(62vw,900px);transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 6deg,rgba(207,164,255,.08) 7deg 8deg,transparent 9deg 28deg,rgba(207,164,255,.055) 29deg 30deg,transparent 31deg 48deg);border-radius:50%;mask-image:radial-gradient(circle,#000 0 38%,transparent 69%);animation:v11Rays 32s linear infinite}
.site-intro-v11 .divine-ring{position:absolute;left:50%;top:43%;border:1px solid rgba(220,190,255,.28);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 28px rgba(151,65,255,.09),inset 0 0 25px rgba(151,65,255,.05);will-change:transform}
.site-intro-v11 .ring-1{width:min(21vw,320px);height:min(21vw,320px);border-color:rgba(255,243,255,.48);animation:v11Ring1 9s linear infinite}
.site-intro-v11 .ring-2{width:min(34vw,510px);height:min(16vw,240px);border-style:dashed;animation:v11Ring2 13s linear infinite}
.site-intro-v11 .ring-3{width:min(48vw,720px);height:min(19vw,285px);border-color:rgba(184,121,255,.24);animation:v11Ring3 18s linear infinite}
.site-intro-v11 .ring-4{width:min(57vw,850px);height:min(57vw,850px);border-color:rgba(160,95,232,.12);animation:v11Ring4 26s linear infinite reverse}
.site-intro-v11 .divine-core{position:absolute;left:50%;top:43%;width:min(13vw,190px);height:min(13vw,190px);transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;border:1px solid rgba(246,231,255,.4);border-radius:50%;background:radial-gradient(circle,rgba(255,249,255,.18) 0,rgba(176,91,255,.13) 25%,rgba(57,14,110,.12) 55%,transparent 72%);box-shadow:0 0 55px rgba(160,69,255,.22),inset 0 0 32px rgba(255,255,255,.05);animation:v11CoreFloat 4s ease-in-out infinite;z-index:3}
.site-intro-v11 .core-halo{position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 24px rgba(197,125,255,.28);animation:v11CoreHalo 3.2s ease-in-out infinite}
.site-intro-v11 .core-diamond{position:relative;font:400 clamp(38px,5vw,72px)/1 Georgia,serif;color:#fff;text-shadow:0 0 12px #fff,0 0 34px #c37aff,0 0 65px #7d35d4;animation:v11Diamond 2.6s ease-in-out infinite}
.site-intro-v11 .divine-core span{position:absolute;bottom:25px;font:600 6px 'DM Sans',sans-serif;letter-spacing:4px;color:rgba(240,220,255,.6)}
.site-intro-v11 .divine-glyphs{position:absolute;inset:0;z-index:2;pointer-events:none}
.site-intro-v11 .divine-glyphs i{position:absolute;font-style:normal;color:rgba(245,226,255,.7);text-shadow:0 0 14px #a85cff;animation:v11Glyph 5s ease-in-out infinite}
.site-intro-v11 .divine-glyphs i:nth-child(1){left:31%;top:27%;font-size:17px}.site-intro-v11 .divine-glyphs i:nth-child(2){left:68%;top:29%;font-size:13px;animation-delay:1s}.site-intro-v11 .divine-glyphs i:nth-child(3){left:24%;top:62%;font-size:12px;animation-delay:1.7s}.site-intro-v11 .divine-glyphs i:nth-child(4){left:75%;top:60%;font-size:16px;animation-delay:2.3s}.site-intro-v11 .divine-glyphs i:nth-child(5){left:42%;top:15%;font-size:11px;animation-delay:.7s}.site-intro-v11 .divine-glyphs i:nth-child(6){left:58%;top:72%;font-size:10px;animation-delay:2.8s}
.site-intro-v11 .intro-stars-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.site-intro-v11 .divine-sweep{position:absolute;z-index:5;width:35vw;height:1px;background:linear-gradient(90deg,transparent,rgba(248,230,255,.9),transparent);box-shadow:0 0 20px #a85cff;opacity:0;transform-origin:left center;pointer-events:none}
.site-intro-v11 .sweep-a{left:-40vw;top:28%;animation:v11Sweep 4.8s ease-in-out .5s infinite}.site-intro-v11 .sweep-b{left:-30vw;top:66%;animation:v11Sweep 6.2s ease-in-out 2s infinite reverse}
.site-intro-v11 .intro-copy-v11{position:absolute;left:50%;top:43%;transform:translate(-50%,calc(-50% + min(27vw,300px)));width:min(90vw,900px);text-align:center;z-index:8;opacity:0;animation:v11Copy 1.8s cubic-bezier(.16,.82,.2,1) 1.25s forwards}
.site-intro-v11 .intro-overline{display:block;font:600 clamp(7px,.65vw,10px) 'DM Sans',sans-serif;letter-spacing:clamp(2px,.5vw,6px);color:rgba(242,225,255,.62);margin-bottom:13px}.site-intro-v11 h1{margin:0;font:500 clamp(25px,3.8vw,56px)/1.1 Cinzel,Georgia,serif;letter-spacing:clamp(2px,.55vw,8px);text-shadow:0 0 26px rgba(194,132,255,.3)}.site-intro-v11 h1 b{font-weight:400;opacity:.4;margin:0 .12em}.site-intro-v11 p{margin:12px 0 0;font:600 clamp(6px,.7vw,10px) 'DM Sans',sans-serif;letter-spacing:clamp(3px,.7vw,8px);color:rgba(230,207,248,.55)}
.site-intro-v11 .intro-enter-v11{margin-top:28px;display:inline-flex;align-items:center;gap:15px;padding:13px 22px;border:1px solid rgba(231,207,255,.38);background:rgba(12,5,23,.42);color:#fff;border-radius:999px;cursor:pointer;backdrop-filter:blur(10px);font:700 9px 'DM Sans',sans-serif;letter-spacing:3px;box-shadow:0 0 30px rgba(137,52,232,.12),inset 0 0 18px rgba(255,255,255,.03);transition:.35s}.site-intro-v11 .intro-enter-v11:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.85);box-shadow:0 0 45px rgba(160,73,255,.38),inset 0 0 22px rgba(255,255,255,.07)}.site-intro-v11 .enter-star{font-size:10px;color:#d8a9ff;text-shadow:0 0 12px #a85cff}
.site-intro-v11 .intro-skip-v11{position:absolute;right:24px;bottom:20px;z-index:9;border:0;background:transparent;color:rgba(232,216,248,.45);font:600 8px 'DM Sans',sans-serif;letter-spacing:2px;cursor:pointer;padding:12px}.site-intro-v11 .intro-skip-v11:hover{color:#fff}.site-intro-v11 .intro-skip-v11 span{color:#a975d5}.site-intro-v11 .intro-corner{position:absolute;z-index:8;color:rgba(203,175,225,.25);font:600 7px 'DM Sans',sans-serif;letter-spacing:3px}.site-intro-v11 .corner-tl{left:25px;top:22px}.site-intro-v11 .corner-br{right:25px;bottom:23px}
.site-intro-v11.awakened .divine-core{transform:translate(-50%,-50%) scale(1.06)}.site-intro-v11.leaving{animation:v11Exit 1.05s cubic-bezier(.65,0,.2,1) forwards;pointer-events:none}.site-intro-v11.leaving .divine-backdrop{animation:v11ExitCore 1.05s ease forwards}.site-intro-v11.leaving .intro-copy-v11{animation:v11ExitCopy .55s ease forwards}
@keyframes v11Aura{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}@keyframes v11Core{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}@keyframes v11Rays{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes v11Ring1{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes v11Ring2{0%{transform:translate(-50%,-50%) rotate(15deg)}100%{transform:translate(-50%,-50%) rotate(375deg)}}@keyframes v11Ring3{0%{transform:translate(-50%,-50%) rotate(-24deg)}100%{transform:translate(-50%,-50%) rotate(336deg)}}@keyframes v11Ring4{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes v11CoreFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-7px)}}@keyframes v11CoreHalo{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.08);opacity:1}}@keyframes v11Diamond{0%,100%{transform:rotate(0) scale(.94)}50%{transform:rotate(45deg) scale(1.08)}}@keyframes v11Glyph{0%,100%{transform:translateY(0) rotate(0);opacity:.35}50%{transform:translateY(-14px) rotate(12deg);opacity:1}}@keyframes v11Sweep{0%{transform:translateX(0) scaleX(.1);opacity:0}15%{opacity:.75}55%{opacity:.5}100%{transform:translateX(180vw) scaleX(1);opacity:0}}@keyframes v11Copy{0%{opacity:0;transform:translate(-50%,calc(-50% + min(27vw,330px))) scale(.97);filter:blur(9px)}100%{opacity:1;transform:translate(-50%,calc(-50% + min(27vw,300px))) scale(1);filter:blur(0)}}@keyframes v11Exit{to{opacity:0;transform:scale(1.04);visibility:hidden}}@keyframes v11ExitCore{to{transform:scale(1.12);filter:blur(10px);opacity:0}}@keyframes v11ExitCopy{to{opacity:0;transform:translate(-50%,calc(-50% + min(27vw,270px))) translateY(12px);filter:blur(5px)}}
@media(max-width:700px){
 .site-intro-v11 .divine-core{top:40%;width:132px;height:132px}.site-intro-v11 .divine-aura.aura-a{width:280px;height:280px}.site-intro-v11 .divine-aura.aura-c{width:180px;height:180px}.site-intro-v11 .divine-rays{top:40%;width:430px;height:430px}.site-intro-v11 .divine-ring{top:40%}.site-intro-v11 .ring-1{width:190px;height:190px}.site-intro-v11 .ring-2{width:285px;height:135px}.site-intro-v11 .ring-3{width:360px;height:145px}.site-intro-v11 .ring-4{width:410px;height:410px}.site-intro-v11 .intro-copy-v11{top:40%;transform:translate(-50%,150px);width:94vw}.site-intro-v11 .intro-overline{font-size:6px;letter-spacing:2px}.site-intro-v11 h1{font-size:24px;letter-spacing:2px}.site-intro-v11 p{font-size:6px;letter-spacing:2.5px;line-height:1.7}.site-intro-v11 .intro-enter-v11{margin-top:20px;padding:12px 17px;font-size:8px;letter-spacing:2px}.site-intro-v11 .intro-corner{font-size:6px}.site-intro-v11 .corner-tl{left:14px;top:14px}.site-intro-v11 .corner-br{right:14px;bottom:14px}.site-intro-v11 .intro-skip-v11{right:7px;bottom:7px;font-size:6px}.site-intro-v11 .divine-glyphs i:nth-child(1){left:18%;top:25%}.site-intro-v11 .divine-glyphs i:nth-child(2){left:77%;top:28%}.site-intro-v11 .divine-glyphs i:nth-child(3){left:13%;top:59%}.site-intro-v11 .divine-glyphs i:nth-child(4){left:84%;top:56%}.site-intro-v11 .divine-glyphs i:nth-child(5){left:38%;top:12%}.site-intro-v11 .divine-glyphs i:nth-child(6){left:62%;top:69%}
}



/* =========================================================
   V12 — MOON + CONSTELLATION INTRO
   Lightweight, desktop-first, touch friendly and always animated.
   ========================================================= */
.site-intro-v12{position:fixed;inset:0;z-index:99999;overflow:hidden;isolation:isolate;background:#020107;color:#f8efff;opacity:1;visibility:visible;display:block;cursor:default;transition:opacity .9s cubic-bezier(.16,.8,.2,1),visibility .9s;}
.site-intro-v12.leaving{opacity:0;visibility:hidden;pointer-events:none}
.site-intro-v12 *{box-sizing:border-box}
.v12-starfield{position:absolute;inset:-10%;opacity:.78;background-image:radial-gradient(circle at 8% 18%,rgba(255,255,255,.95) 0 1px,transparent 1.8px),radial-gradient(circle at 24% 74%,rgba(207,163,255,.8) 0 1px,transparent 1.7px),radial-gradient(circle at 46% 27%,rgba(255,255,255,.8) 0 1px,transparent 1.8px),radial-gradient(circle at 71% 15%,rgba(210,170,255,.85) 0 1px,transparent 1.7px),radial-gradient(circle at 88% 66%,rgba(255,255,255,.8) 0 1px,transparent 1.8px),radial-gradient(circle at 64% 87%,rgba(190,132,255,.7) 0 1px,transparent 1.8px);background-size:170px 190px,220px 230px,260px 250px,190px 210px,230px 220px,250px 260px;animation:v12Stars 28s linear infinite;will-change:background-position}
.v12-starfield:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(100,36,180,.13),transparent 32%),linear-gradient(180deg,rgba(3,1,10,.12),rgba(2,1,7,.35))}
.v12-nebula{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity}
.nebula-left{width:52vw;height:42vw;left:-25vw;top:15vh;background:rgba(90,26,190,.26);animation:v12NebulaA 9s ease-in-out infinite alternate}
.nebula-right{width:48vw;height:46vw;right:-23vw;bottom:-5vh;background:rgba(158,67,245,.22);animation:v12NebulaB 11s ease-in-out infinite alternate}
.v12-constellation{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;pointer-events:none;opacity:.95}
.v12-orbit{position:absolute;left:50%;top:42%;border:1px solid rgba(214,181,255,.22);border-radius:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;box-shadow:0 0 22px rgba(126,48,220,.08),inset 0 0 22px rgba(126,48,220,.05);will-change:transform}
.v12-orbit span{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(188,112,255,.8);left:50%;top:-3px;transform:translateX(-50%)}
.orbit-a{width:min(52vw,720px);height:min(20vw,280px);animation:v12OrbitA 13s linear infinite}
.orbit-b{width:min(39vw,560px);height:min(39vw,560px);animation:v12OrbitB 19s linear infinite reverse;transform:translate(-50%,-50%) rotate(58deg)}
.orbit-c{width:min(27vw,390px);height:min(11vw,160px);animation:v12OrbitC 8s linear infinite;transform:translate(-50%,-50%) rotate(-24deg)}
.v12-moon{position:absolute;left:50%;top:42%;width:min(170px,13vw);height:min(170px,13vw);min-width:108px;min-height:108px;transform:translate(-50%,-50%);z-index:5;display:grid;place-items:center;animation:v12MoonFloat 5s ease-in-out infinite}
.moon-halo{position:absolute;inset:-55%;border-radius:50%;background:radial-gradient(circle,rgba(215,171,255,.27) 0 12%,rgba(135,61,226,.12) 30%,transparent 68%);filter:blur(5px);animation:v12Halo 3.6s ease-in-out infinite}
.moon-body{position:relative;width:68%;height:68%;border-radius:50%;background:radial-gradient(circle at 36% 31%,#fff 0 7%,#eee0ff 25%,#bd91eb 58%,#7440a7 100%);box-shadow:0 0 16px rgba(255,246,255,.9),0 0 38px rgba(172,94,255,.75),inset -12px -10px 22px rgba(40,10,74,.34);overflow:hidden}
.moon-body:before{content:"";position:absolute;width:40%;height:40%;right:10%;top:18%;border-radius:50%;background:rgba(106,59,142,.2);box-shadow:-38px 24px 0 -11px rgba(92,43,133,.18),-22px -8px 0 -14px rgba(255,255,255,.15)}
.moon-cut{position:absolute;width:78%;height:105%;right:-35%;top:-2%;border-radius:50%;background:#07030e;box-shadow:inset 10px 0 12px rgba(181,111,255,.22)}
.moon-body i,.moon-body b{position:absolute;border-radius:50%;background:rgba(255,255,255,.42);width:4px;height:4px;left:25%;top:57%;box-shadow:0 0 8px rgba(255,255,255,.5)}
.moon-body b{width:3px;height:3px;left:48%;top:28%}
.moon-star{position:absolute;font-size:clamp(22px,2.3vw,38px);color:#fff;right:-1%;top:8%;text-shadow:0 0 12px #fff,0 0 30px #bd75ff;animation:v12StarPulse 2.2s ease-in-out infinite}
.v12-constellation-name{position:absolute;z-index:5;left:50%;top:17%;transform:translateX(-50%);font:600 clamp(6px,.55vw,9px) 'DM Sans',sans-serif;letter-spacing:clamp(3px,.65vw,7px);color:rgba(226,205,255,.45);white-space:nowrap;animation:v12FadeUp 1.4s ease .3s both}
.v12-copy{position:absolute;z-index:8;left:50%;top:68%;transform:translate(-50%,-50%);width:min(90vw,850px);text-align:center;pointer-events:none;animation:v12CopyIn 1.5s cubic-bezier(.16,.8,.2,1) .7s both}
.v12-kicker{font:700 clamp(7px,.62vw,10px) 'DM Sans',sans-serif;letter-spacing:clamp(3px,.65vw,7px);color:rgba(235,216,255,.65)}
.v12-kicker span{color:#d9a9ff;text-shadow:0 0 15px #a952ff}
.v12-copy h1{margin:13px 0 8px;font:500 clamp(31px,4vw,64px)/.98 Cinzel,Georgia,serif;letter-spacing:clamp(2px,.35vw,5px);text-shadow:0 0 28px rgba(181,111,255,.25);}
.v12-copy h1 em{font-style:normal;color:#dcbaff;text-shadow:0 0 25px rgba(168,81,255,.5)}
.v12-copy p{margin:0;color:rgba(232,218,247,.56);font:500 clamp(8px,.72vw,11px) 'DM Sans',sans-serif;letter-spacing:clamp(2px,.35vw,4px)}
.v12-enter{pointer-events:auto;margin-top:22px;min-height:43px;padding:11px 19px;border-radius:999px;border:1px solid rgba(220,190,255,.48);background:rgba(10,4,20,.55);color:#fff;cursor:pointer;font:700 8px 'DM Sans',sans-serif;letter-spacing:2.7px;box-shadow:0 0 28px rgba(143,55,226,.16),inset 0 0 16px rgba(255,255,255,.025);backdrop-filter:blur(10px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.v12-enter b{margin-left:8px;color:#d9a6ff}.v12-enter:hover{transform:translateY(-3px) scale(1.035);border-color:#fff;box-shadow:0 0 45px rgba(170,76,255,.4),inset 0 0 20px rgba(255,255,255,.06)}.v12-enter:active{transform:scale(.97)}
.enter-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:7px;background:#fff;box-shadow:0 0 10px #c070ff;animation:v12Dot 1.6s ease-in-out infinite}
.v12-skip{position:absolute;z-index:9;right:22px;bottom:19px;border:0;background:none;color:rgba(230,211,249,.45);cursor:pointer;padding:10px;font:600 7px 'DM Sans',sans-serif;letter-spacing:2px;transition:color .2s ease}.v12-skip:hover{color:#fff}.v12-skip span{color:#c98cff}
.v12-corner{position:absolute;z-index:7;bottom:23px;color:rgba(226,205,255,.24);font:600 6px 'DM Sans',sans-serif;letter-spacing:2px}.corner-left{left:22px}.corner-right{right:22px;top:23px;bottom:auto}
.v12-sacred-line{position:absolute;z-index:4;width:22vw;height:1px;background:linear-gradient(90deg,transparent,rgba(214,178,255,.5),transparent);opacity:.55;transform-origin:center;animation:v12Line 4s ease-in-out infinite}.line-top{left:2%;top:23%}.line-bottom{right:2%;bottom:23%;animation-delay:1.5s}
@keyframes v12Stars{to{background-position:45px -38px,-55px 48px,38px -32px,-42px 35px,55px -45px,-35px 42px}}
@keyframes v12NebulaA{to{transform:translate3d(8vw,-4vh,0) scale(1.14);opacity:.75}}@keyframes v12NebulaB{to{transform:translate3d(-7vw,5vh,0) scale(1.12);opacity:.72}}
@keyframes v12OrbitA{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes v12OrbitB{to{transform:translate(-50%,-50%) rotate(302deg)}}@keyframes v12OrbitC{to{transform:translate(-50%,-50%) rotate(336deg)}}
@keyframes v12MoonFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-9px)}}@keyframes v12Halo{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.1);opacity:1}}@keyframes v12StarPulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.15);opacity:1}}@keyframes v12Dot{50%{transform:scale(1.7);box-shadow:0 0 17px #d095ff}}@keyframes v12FadeUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes v12CopyIn{from{opacity:0;transform:translate(-50%,calc(-50% + 22px));filter:blur(7px)}to{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}}@keyframes v12Line{0%,100%{transform:scaleX(.3);opacity:.2}50%{transform:scaleX(1);opacity:.7}}

/* Keep the animation alive on desktop and mobile even if the OS requests reduced motion. */


@media(max-width:700px){
  .v12-starfield{opacity:.7;background-size:130px 160px,170px 190px,190px 190px,150px 170px,180px 180px,200px 210px}
  .v12-nebula{filter:blur(48px)}.nebula-left{width:72vw;height:62vw}.nebula-right{width:68vw;height:60vw}
  .v12-orbit{top:39%}.orbit-a{width:92vw;height:34vw}.orbit-b{width:76vw;height:76vw}.orbit-c{width:55vw;height:23vw}
  .v12-moon{top:39%;width:118px;height:118px;min-width:118px;min-height:118px}.moon-star{font-size:27px}
  .v12-constellation-name{top:10%;letter-spacing:3px}.v12-copy{top:68%;width:calc(100% - 28px)}.v12-copy h1{font-size:clamp(29px,10vw,44px);letter-spacing:1px}.v12-copy p{font-size:8px;letter-spacing:2px}.v12-enter{min-height:44px;padding:12px 16px;font-size:7px;letter-spacing:2px}
  .v12-sacred-line{width:34vw}.corner-left{left:12px;bottom:12px}.corner-right{right:12px;top:12px}.v12-skip{right:10px;bottom:10px;font-size:6px}
}
@media(max-width:380px){.v12-moon{width:100px;height:100px;min-width:100px;min-height:100px}.v12-copy{top:69%}.v12-copy h1{font-size:28px}.v12-copy p{font-size:7px}.v12-enter{margin-top:17px}.v12-constellation-name{font-size:5px}}


/* =========================================================
   V13 PERFORMANCE LAYER — SOLO DISPOSITIVOS MÓVILES
   En PC se conserva el render original: partículas, blur y hover.
   ========================================================= */
@media (max-width:900px) and (hover:none){
  html{scroll-behavior:auto;text-rendering:optimizeSpeed}
  body{overscroll-behavior-x:none}
  img{content-visibility:auto}
  .series-card,.cosmic-btn,.chapter-pill,.cover,.cover-shine{will-change:auto}
  .search-overlay,.topbar,.cover-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
  .series-card:hover{transform:none;box-shadow:none}
  .series-card:hover .cover{transform:none;filter:none}
  .series-card:hover .cover-shine{transform:none}
  .series-card:hover .cover-overlay{opacity:1;transform:none}
  .cosmic-btn:hover,.chapter-pill:hover{transform:none;box-shadow:none}
  .topbar{background:rgba(5,4,10,.94)}
  .hero-orbit:before{filter:none}
  .series-card{animation-duration:.45s}
  .cover{transition:transform .35s ease}
  .collection,.portal{contain:layout paint}
}
@media (max-width:620px){
  html{scroll-behavior:auto}
  .site-noise{display:none}
  #pageConstellationCanvas{opacity:.28}
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-orbit{overflow:clip}
  .hero-copy{contain:content}
  .series-card{contain:layout paint;box-shadow:0 8px 28px rgba(0,0,0,.16)}
  .cover-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
  .search-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Very old / low-memory devices: keep the identity, remove expensive effects. */
@media (max-width:420px){
  .v12-nebula{display:none}
  .v12-starfield{animation:none}
  .moon-halo{filter:none}
  .search-overlay:before,.search-overlay:after{display:none}
  .portal-orbit{display:none}
  .cosmos-rings{box-shadow:none}
  .cosmos-core{box-shadow:0 0 34px rgba(130,50,226,.24),inset 0 0 22px rgba(176,94,255,.16)}
}
/* If the browser genuinely asks for reduced motion, remain usable and calm. */



/* =========================================================
   NOVELAS / TOUCH STATUS WINDOW
   ========================================================= */
.novels-section{position:relative;max-width:1220px;margin:0 auto;padding:100px 26px 120px;overflow:hidden}
.novels-section:before{content:"";position:absolute;inset:10% 5% 15%;border:1px solid rgba(191,145,255,.08);border-radius:50%;pointer-events:none}
.novels-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px;position:relative;z-index:2}
.novels-head h2{margin:12px 0 8px;font-size:clamp(38px,5vw,66px);letter-spacing:-2px}
.novels-head h2 span{opacity:.28;font-weight:300}
.novels-head p{max-width:620px;margin:0;color:rgba(235,226,248,.58);font-size:13px;line-height:1.8}
.novels-code{font-size:8px;letter-spacing:3px;text-align:right;color:rgba(220,195,255,.45);line-height:1.8;white-space:nowrap}
.novels-code strong{display:block;font-size:28px;line-height:1;color:#ead9ff;letter-spacing:0;margin-bottom:4px}
.novel-stage{position:relative;min-height:650px;display:grid;place-items:center;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;border-radius:36px;cursor:grab}
.novel-stage:active{cursor:grabbing}
.novel-stage:before{content:"";position:absolute;width:min(78vw,760px);height:min(78vw,760px);border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.17),rgba(100,70,180,.06) 38%,transparent 70%);filter:blur(5px);z-index:-2}
.novel-aura{position:absolute;width:520px;height:520px;border:1px solid rgba(214,181,255,.1);border-radius:50%;box-shadow:0 0 100px rgba(139,92,246,.12),inset 0 0 80px rgba(139,92,246,.06);animation:novelAura 8s ease-in-out infinite;z-index:-1}
.novel-orbit{position:absolute;border:1px solid rgba(211,180,255,.11);border-radius:50%;pointer-events:none}
.novel-orbit-a{width:660px;height:270px;transform:rotate(-18deg);animation:novelOrbit 18s linear infinite}
.novel-orbit-b{width:730px;height:310px;transform:rotate(28deg);animation:novelOrbit 24s linear infinite reverse}
.novel-stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.65) 0 1px,transparent 1.5px);background-size:83px 79px;opacity:.16;mask-image:radial-gradient(circle at center,black,transparent 72%);pointer-events:none}
.novel-status-window{width:min(900px,92vw);display:grid;grid-template-columns:minmax(270px,390px) 1fr;gap:42px;align-items:center;padding:28px;border:1px solid rgba(216,186,255,.25);background:linear-gradient(135deg,rgba(20,13,35,.94),rgba(10,8,20,.84));box-shadow:0 25px 90px rgba(0,0,0,.55),0 0 70px rgba(139,92,246,.12),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px));transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .55s ease}
.novel-status-window.is-next{animation:novelShiftNext .62s cubic-bezier(.16,.8,.2,1)}
.novel-status-window.is-prev{animation:novelShiftPrev .62s cubic-bezier(.16,.8,.2,1)}
.novel-status-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:3px;color:rgba(224,199,255,.55)}
.novel-status-top i{height:1px;flex:1;background:linear-gradient(90deg,rgba(211,176,255,.25),transparent)}
.novel-visual{height:420px;position:relative;display:grid;place-items:center}
.novel-ring{position:absolute;width:370px;height:370px;border-radius:50%;border:1px solid rgba(201,166,255,.16);box-shadow:0 0 45px rgba(139,92,246,.1);animation:novelSpin 22s linear infinite}
.novel-ring:before,.novel-ring:after{content:"✦";position:absolute;color:rgba(238,220,255,.75);font-size:10px}
.novel-ring:before{left:20px;top:45px}.novel-ring:after{right:28px;bottom:50px}
.novel-image-frame{width:260px;height:360px;position:relative;overflow:hidden;border:1px solid rgba(232,211,255,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(139,92,246,.12);transform:perspective(900px) rotateY(-5deg);background:linear-gradient(135deg,#171024,#08060e)}
.novel-image-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-120%);animation:novelShine 6s ease-in-out infinite;pointer-events:none}
.novel-image-frame img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.novel-sigil{position:absolute;bottom:7px;right:calc(50% - 150px);width:38px;height:38px;border:1px solid rgba(230,205,255,.3);border-radius:50%;display:grid;place-items:center;background:rgba(10,7,17,.8);color:#ead9ff;z-index:2;font-size:13px;box-shadow:0 0 22px rgba(139,92,246,.18)}
.novel-info{padding:0 8px 10px 0}
.novel-label{font-size:8px;letter-spacing:3px;color:rgba(210,181,247,.45)}
.novel-info h3{font-size:clamp(30px,4vw,50px);line-height:1.03;margin:12px 0 16px;letter-spacing:-1.4px}
.novel-info p{max-width:420px;color:rgba(235,226,248,.58);font-size:12px;line-height:1.8;margin:0 0 28px}
.novel-meta{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:8px;letter-spacing:2px;color:rgba(229,208,255,.5)}
.novel-meta span:first-child{color:#d9b9ff;border:1px solid rgba(192,150,255,.22);padding:8px 11px;background:rgba(139,92,246,.07)}
.novel-swipe-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:3px;color:rgba(230,209,255,.36);white-space:nowrap;animation:novelHint 2.5s ease-in-out infinite}
.novel-swipe-hint span{font-size:15px;margin-right:8px}
.novel-progress{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);width:min(280px,55vw);height:1px;background:rgba(214,181,255,.08);overflow:hidden}
.novel-progress:after{content:"";display:block;height:100%;width:0;background:rgba(224,196,255,.7);box-shadow:0 0 10px rgba(196,153,255,.7)}
.novel-progress.playing:after{animation:novelProgress 8s linear forwards}
@keyframes novelShiftNext{0%{opacity:1;transform:translateX(0) scale(1)}35%{opacity:0;transform:translateX(-42px) scale(.98);filter:blur(4px)}65%{opacity:0;transform:translateX(42px) scale(.98);filter:blur(4px)}100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
@keyframes novelShiftPrev{0%{opacity:1;transform:translateX(0) scale(1)}35%{opacity:0;transform:translateX(42px) scale(.98);filter:blur(4px)}65%{opacity:0;transform:translateX(-42px) scale(.98);filter:blur(4px)}100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
@keyframes novelAura{50%{transform:scale(1.06) rotate(4deg);opacity:.7}100%{transform:scale(1) rotate(0)}}
@keyframes novelOrbit{to{transform:rotate(342deg)}}
@keyframes novelSpin{to{transform:rotate(360deg)}}
@keyframes novelShine{0%,35%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@keyframes novelHint{50%{opacity:.75;transform:translateX(-50%) translateY(-4px)}}
@keyframes novelProgress{from{width:0}to{width:100%}}
@media(max-width:760px){
  .novels-section{padding:70px 14px 90px}.novels-head{align-items:flex-start;flex-direction:column;margin-bottom:24px}.novels-code{display:none}.novel-stage{min-height:620px}.novel-status-window{width:min(94vw,520px);grid-template-columns:1fr;gap:12px;padding:18px 18px 28px}.novel-status-top{margin-bottom:0}.novel-visual{height:350px}.novel-ring{width:315px;height:315px}.novel-image-frame{width:210px;height:292px}.novel-sigil{right:calc(50% - 120px);bottom:16px}.novel-info{padding:0 8px;text-align:center}.novel-info p{margin-left:auto;margin-right:auto}.novel-meta{justify-content:center}.novel-swipe-hint{bottom:24px}.novel-progress{bottom:9px}
}


.novel-swipe-hint.hidden{opacity:0;transition:opacity .35s ease}


/* =========================================================
   OMNISCIENT SCAN — TYPOGRAPHY V15
   Every informational text gets its own visual hierarchy.
   ========================================================= */
:root{
  --type-main:#e7d8ff;
  --type-bright:#f2e9ff;
  --type-purple:#b878ff;
  --type-lilac:#d5a8ff;
  --type-muted:#a998b7;
  --type-dim:#756680;
  --type-line:rgba(177,105,255,.34);
  --type-glow:rgba(155,73,255,.34);
}

/* Base reading text: no more flat white */
body{font-family:'Space Grotesk','DM Sans',sans-serif;color:var(--type-main)}
body p, body li{color:var(--type-muted)}

/* Main hierarchy */
.hero h1,
.collection-head h2,
.novels-head h2,
.novel-info h3,
.portal h2,
.search-box h2,
.empty-card h3,
.card-body h3{
  font-family:'Cinzel',Georgia,serif !important;
  color:transparent !important;
  background:linear-gradient(110deg,#9d62df 0%,#ead8ff 22%,#b878ff 45%,#f0dfff 64%,#9254d4 86%,#d7b2ff 100%) !important;
  background-size:260% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-stroke:1px rgba(198,143,255,.20);
  text-shadow:none !important;
  filter:drop-shadow(0 0 9px rgba(155,73,255,.22));
  animation:typeGradient 7s ease-in-out infinite, typeFloat 5s ease-in-out infinite !important;
}

/* Animated contour surrounding important headings */
.hero h1,.collection-head h2,.novels-head h2,.novel-info h3,.portal h2,.search-box h2,.empty-card h3,.card-body h3{isolation:isolate}
.hero h1::after,.collection-head h2::after,.novels-head h2::after,.novel-info h3::after,.portal h2::after,.search-box h2::after,.empty-card h3::after,.card-body h3::after{
  content:"" !important;
  position:absolute !important;
  inset:-9px -14px !important;
  z-index:-1 !important;
  border:1px solid rgba(184,120,255,.20) !important;
  border-radius:10px !important;
  background:linear-gradient(90deg,transparent,rgba(174,91,255,.10),transparent) !important;
  box-shadow:0 0 18px rgba(143,58,230,.08),inset 0 0 16px rgba(143,58,230,.04) !important;
  opacity:.55 !important;
  transform:scale(.985) !important;
  animation:typeContour 5s ease-in-out infinite !important;
  pointer-events:none !important;
}

/* Emphasis words inherit the animated system instead of becoming static */
.hero h1 em,.portal h2 em,.search-box h2 em,.featured-word{
  color:transparent !important;
  background:linear-gradient(90deg,#a35be9,#f0cfff,#ad6cf2,#e4baff) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  text-shadow:none !important;
  animation:typeAccent 4.5s ease-in-out infinite !important;
}

/* Section labels: technical/futuristic */
.section-kicker,.card-topline,.card-index,.collection-count span,.novels-code,.novel-status-top,.novel-label,.novel-meta,.search-modal-code,.search-status,.search-modal-foot,.footer-coord,.footer-brand small{
  font-family:'Orbitron','Courier New',monospace !important;
  color:#a987c0 !important;
  text-shadow:0 0 7px rgba(169,105,255,.20) !important;
  animation:typeMicro 3.8s ease-in-out infinite !important;
}
.section-kicker{color:#bd7cff !important}
.section-kicker b,.collection-count span{color:#8d7897 !important}

/* Normal information: elegant and readable */
.hero-description,.collection-head>div>p,.novels-head>div>p,.synopsis,.novel-info p,.portal-copy p,.search-title-row p,.search-box>p,.search-empty,.no-chapters,footer p,.manifesto p{
  font-family:'Space Grotesk','Trebuchet MS',sans-serif !important;
  color:#a998b7 !important;
  text-shadow:0 0 10px rgba(134,75,171,.13) !important;
  animation:typeBody 6s ease-in-out infinite !important;
}

/* Navigation, controls and action labels */
nav a,.cosmic-btn,.search-orbit-hint,.novel-swipe-hint,.cover-overlay span,.cover-overlay b,.chapter-pill,.result-open,.v12-enter,.v12-skip{
  font-family:'Orbitron','Arial Narrow',sans-serif !important;
  color:#ad91bc !important;
  text-shadow:0 0 8px rgba(176,103,255,.18) !important;
  transition:color .35s ease,text-shadow .35s ease,letter-spacing .35s ease !important;
}
nav a:hover,nav a.active,.cosmic-btn:hover,.chapter-pill:hover{color:#e1c9ff !important;text-shadow:0 0 12px rgba(210,163,255,.48),0 0 24px rgba(157,76,239,.20) !important}

/* Card titles */
.card-body h3{font-size:clamp(18px,2vw,25px) !important;color:transparent !important}
.card-body h3::after{inset:-6px -9px !important;border-radius:8px !important}

/* Small metadata should still feel alive */
.hero-meta span,.hero-meta b,.constellation-label,.hero-side-text,.novel-swipe-hint,.search-orbit-hint,.portal-number,.footer-coord{
  font-family:'Orbitron','Courier New',monospace !important;
  color:#8f7a9c !important;
  text-shadow:0 0 9px rgba(167,92,255,.16) !important;
}
.hero-meta b{color:#c69aff !important}
.constellation-label{animation:typeMicro 4s ease-in-out infinite}

/* Intro text gets the same family, without disturbing its layout */
.v12-kicker,.v12-copy h1,.v12-copy p,.v12-enter,.v12-skip,.v12-constellation-name,.v12-corner{
  text-shadow:0 0 12px rgba(171,92,255,.24) !important;
}
.v12-copy h1{color:transparent !important;background:linear-gradient(100deg,#a55fe9,#f1ddff,#a967ed,#d9b1ff) !important;background-size:220% auto !important;-webkit-background-clip:text !important;background-clip:text !important;animation:typeGradient 6s ease-in-out infinite !important}
.v12-copy p,.v12-corner,.v12-constellation-name{color:#967fa4 !important}

/* Search result typography */
.result-info small,.result-info strong,.result-info>span,.result-number,.result-open,.search-empty-new strong,.search-empty-new p,.search-modal-foot{
  text-shadow:0 0 8px rgba(167,92,255,.16) !important;
}
.result-info strong,.search-empty-new strong{font-family:'Cinzel',Georgia,serif !important;color:#d8b8ee !important}
.result-info small,.result-number,.result-open{font-family:'Orbitron','Courier New',monospace !important;color:#9179a0 !important}
.result-info>span,.search-empty-new p{font-family:'Space Grotesk',sans-serif !important;color:#95869e !important}

/* Footer */
footer strong{font-family:'Cinzel',Georgia,serif !important;color:#c9a8e0 !important;text-shadow:0 0 12px rgba(170,91,255,.25) !important;animation:typeAccent 5s ease-in-out infinite !important}

@keyframes typeGradient{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 7px rgba(155,73,255,.16))}50%{background-position:100% 50%;filter:drop-shadow(0 0 15px rgba(189,113,255,.32))}}
@keyframes typeAccent{0%,100%{background-position:0% 50%;opacity:.84;filter:drop-shadow(0 0 6px rgba(172,91,255,.18))}50%{background-position:100% 50%;opacity:1;filter:drop-shadow(0 0 13px rgba(210,148,255,.38))}}
@keyframes typeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes typeContour{0%,100%{opacity:.28;transform:scale(.985)}50%{opacity:.70;transform:scale(1.008)}}
@keyframes typeMicro{0%,100%{opacity:.70;letter-spacing:inherit;text-shadow:0 0 6px rgba(169,105,255,.12)}50%{opacity:1;text-shadow:0 0 13px rgba(190,126,255,.34)}}
@keyframes typeBody{0%,100%{opacity:.78;text-shadow:0 0 7px rgba(124,78,167,.08)}50%{opacity:1;text-shadow:0 0 14px rgba(155,100,205,.20)}}



/* =========================================================
   SECCIONES MANHWAS / NOVELAS — TIPOGRAFÍA INTERACTIVA
   Letras individuales + contorno luminoso + respuesta al mouse/dedo.
   ========================================================= */
.collection-head .section-title-animated,
.novels-head .section-title-animated{
  position:relative;
  display:inline-block;
  color:#f0e4ff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-stroke:1.15px rgba(207,159,255,.58);
  text-shadow:
    0 0 1px rgba(255,255,255,.7),
    0 0 8px rgba(155,76,255,.22),
    0 0 22px rgba(155,76,255,.10);
  filter:none !important;
  animation:sectionTitleBreath 5s ease-in-out infinite !important;
  isolation:isolate;
}

/* El contorno es de las letras, no una caja alrededor del título. */
.collection-head .section-title-animated::after,
.novels-head .section-title-animated::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-13px !important;
  top:auto !important;
  height:1px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,transparent 0%,rgba(164,91,255,.15) 12%,rgba(218,177,255,.75) 50%,rgba(164,91,255,.15) 88%,transparent 100%) !important;
  box-shadow:0 0 10px rgba(172,93,255,.45) !important;
  opacity:.65 !important;
  transform-origin:center !important;
  animation:sectionLinePulse 3.6s ease-in-out infinite !important;
  z-index:-1 !important;
}

/* Cada letra puede reaccionar por separado. */
.section-title-animated .letter{
  display:inline-block;
  position:relative;
  color:#eee1ff;
  -webkit-text-stroke:1px rgba(202,148,255,.50);
  text-shadow:
    0 0 2px rgba(255,255,255,.45),
    0 0 8px rgba(151,72,255,.16);
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 85%;
  transition:
    transform .42s cubic-bezier(.2,.85,.25,1),
    color .3s ease,
    -webkit-text-stroke-color .3s ease,
    text-shadow .3s ease,
    filter .3s ease;
  will-change:transform;
}

.section-title-animated .letter::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(221,183,255,0);
  box-shadow:0 0 0 rgba(190,115,255,0);
  transform:translateX(-50%) scale(0);
  transition:all .35s ease;
  pointer-events:none;
}

.section-title-animated .letter.is-hot,
.section-title-animated .letter:hover{
  color:#fff7ff;
  -webkit-text-stroke-color:rgba(224,181,255,.95);
  text-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 9px rgba(205,143,255,.82),
    0 0 22px rgba(151,67,255,.52),
    0 0 38px rgba(122,46,220,.25);
  transform:translate3d(0,-7px,0) scale(1.075) rotateX(12deg);
  filter:brightness(1.15);
  z-index:5;
}

.section-title-animated .letter.is-hot::after,
.section-title-animated .letter:hover::after{
  background:rgba(232,202,255,.95);
  box-shadow:0 0 9px rgba(201,133,255,.85);
  transform:translateX(-50%) scale(1);
}

/* El separador / queda elegante y no salta con las letras. */
.section-title-animated > span{
  display:inline-block;
  color:rgba(197,145,255,.62) !important;
  -webkit-text-stroke:.7px rgba(184,124,255,.35);
  text-shadow:0 0 10px rgba(154,76,255,.28);
  transform:translateY(-1px);
}

/* Subtítulos: más finos, pero también con contorno y movimiento. */
.collection-head .section-subtitle-animated,
.novels-head .section-subtitle-animated{
  position:relative;
  display:block;
  max-width:680px;
  color:#b9a8c8 !important;
  font-family:'Space Grotesk','Trebuchet MS',sans-serif !important;
  font-size:13px;
  line-height:1.85;
  letter-spacing:.12px;
  -webkit-text-stroke:.35px rgba(188,137,231,.28);
  text-shadow:0 0 8px rgba(137,75,180,.12);
  animation:sectionSubtitleBreath 5.5s ease-in-out infinite !important;
}

.section-subtitle-animated .letter{
  display:inline-block;
  transform:translate3d(0,0,0);
  transition:
    transform .34s cubic-bezier(.2,.8,.25,1),
    color .28s ease,
    text-shadow .28s ease,
    -webkit-text-stroke-color .28s ease;
  will-change:transform;
}

.section-subtitle-animated .letter.is-hot,
.section-subtitle-animated .letter:hover{
  color:#e8d5fa;
  -webkit-text-stroke-color:rgba(214,168,250,.58);
  text-shadow:
    0 0 5px rgba(209,164,255,.55),
    0 0 13px rgba(145,70,220,.32);
  transform:translate3d(0,-3px,0) scale(1.035);
}

/* Barrido de luz muy fino bajo el subtítulo. */
.collection-head .section-subtitle-animated::after,
.novels-head .section-subtitle-animated::after{
  content:"";
  display:block;
  width:76px;
  height:1px;
  margin-top:9px;
  background:linear-gradient(90deg,rgba(187,117,255,.75),rgba(221,186,255,.28),transparent);
  box-shadow:0 0 9px rgba(161,79,238,.32);
  animation:sectionSubtitleLine 4.2s ease-in-out infinite;
  transform-origin:left center;
}

@keyframes sectionTitleBreath{
  0%,100%{text-shadow:0 0 1px rgba(255,255,255,.55),0 0 8px rgba(155,76,255,.20),0 0 20px rgba(155,76,255,.08)}
  50%{text-shadow:0 0 2px rgba(255,255,255,.8),0 0 12px rgba(183,111,255,.34),0 0 28px rgba(155,76,255,.15)}
}
@keyframes sectionLinePulse{
  0%,100%{opacity:.38;transform:scaleX(.82)}
  50%{opacity:.9;transform:scaleX(1)}
}
@keyframes sectionSubtitleBreath{
  0%,100%{opacity:.76}
  50%{opacity:1}
}
@keyframes sectionSubtitleLine{
  0%,100%{opacity:.42;transform:scaleX(.55)}
  50%{opacity:1;transform:scaleX(1.35)}
}

@media(max-width:700px){
  .collection-head .section-title-animated,
  .novels-head .section-title-animated{
    -webkit-text-stroke:.95px rgba(207,159,255,.58);
  }
  .section-title-animated .letter.is-hot,
  .section-title-animated .letter:hover{
    transform:translate3d(0,-5px,0) scale(1.045);
  }
}




/* =========================================================
   OBRAS MÁS APOYADAS — ARCHIVO HOGYOKU
   Inspiración visual: ilusión, reiatsu y elegancia oscura.
   ========================================================= */
.collection-body{
  display:grid;
  grid-template-columns:minmax(0,2.05fr) minmax(300px,.95fr);
  gap:34px;
  align-items:stretch;
}
.collection-body .series-grid{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
.popular-panel{
  position:relative;
  min-height:100%;
  padding:25px 24px 22px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 35%,rgba(123,48,190,.20),transparent 38%),
    linear-gradient(160deg,rgba(20,12,29,.96),rgba(7,5,11,.985));
  border:1px solid rgba(198,151,255,.20);
  box-shadow:inset 0 0 45px rgba(108,41,165,.06),0 20px 70px rgba(20,5,35,.20);
}
.popular-panel:before,
.popular-panel:after{content:"";position:absolute;pointer-events:none;z-index:-1}
.popular-panel:before{inset:9px;border:1px solid rgba(205,165,255,.08);clip-path:polygon(0 0,100% 0,100% 72%,87% 100%,0 100%)}
.popular-panel:after{width:180%;height:90px;left:-40%;top:38%;background:linear-gradient(90deg,transparent,rgba(207,164,255,.045),transparent);transform:rotate(-18deg);animation:popularAtmosphere 7s ease-in-out infinite}
.popular-aura{position:absolute;width:260px;height:260px;left:50%;top:51%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(137,56,213,.17),rgba(137,56,213,.035) 42%,transparent 70%);filter:blur(3px);animation:popularAura 5s ease-in-out infinite;pointer-events:none;z-index:-1}
.popular-slice{position:absolute;left:-30%;width:160%;height:1px;background:linear-gradient(90deg,transparent,rgba(224,193,255,.5),transparent);opacity:.32;transform-origin:center;pointer-events:none}
.popular-slice-a{top:31%;transform:rotate(-22deg);animation:popularSliceA 6s ease-in-out infinite}
.popular-slice-b{top:66%;transform:rotate(19deg);animation:popularSliceB 8s ease-in-out infinite}
.popular-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;position:relative;z-index:2}
.popular-kicker{display:block;font:500 7px/1 Inter,sans-serif;letter-spacing:3px;color:rgba(208,174,245,.54);text-shadow:0 0 10px rgba(176,101,255,.18)}
.popular-head h3{margin:12px 0 7px;font:600 clamp(25px,2.5vw,34px)/1.05 Cinzel,serif;letter-spacing:-.6px;color:#eadcf6;-webkit-text-stroke:.55px rgba(177,111,235,.38);text-shadow:0 0 12px rgba(172,89,255,.20),0 0 28px rgba(120,48,184,.12);animation:popularTitleBreath 4.8s ease-in-out infinite}
.popular-head p{margin:0;max-width:250px;color:rgba(202,187,211,.52);font:400 10px/1.6 Inter,sans-serif}
.popular-rank{margin-top:2px;padding:7px 9px;border:1px solid rgba(202,157,255,.18);font:600 7px Inter,sans-serif;letter-spacing:2px;color:rgba(222,194,251,.58);background:rgba(157,76,225,.045);box-shadow:0 0 20px rgba(137,54,208,.07);white-space:nowrap}
.popular-stage{position:relative;margin-top:20px;min-height:455px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;outline:none;touch-action:pan-y}
.popular-stage:focus-visible{box-shadow:0 0 0 1px rgba(201,151,255,.42)}
.popular-veil{position:absolute;inset:15% -10% 15%;background:radial-gradient(ellipse,rgba(174,91,255,.11),transparent 58%);filter:blur(10px);animation:popularVeil 5.5s ease-in-out infinite;pointer-events:none}
.popular-sigil{position:absolute;top:14px;right:8px;width:42px;height:42px;border:1px solid rgba(222,194,255,.20);border-radius:50%;display:grid;place-items:center;color:rgba(234,214,255,.70);font-size:13px;background:rgba(9,6,14,.76);box-shadow:0 0 25px rgba(155,75,231,.13);z-index:4;animation:popularSigil 8s linear infinite}
.popular-sigil:before,.popular-sigil:after{content:"";position:absolute;border:1px solid rgba(205,163,255,.12);border-radius:50%}
.popular-sigil:before{inset:-7px;animation:popularSigilRing 5s linear infinite reverse}
.popular-sigil:after{inset:6px;border-color:rgba(237,218,255,.10)}
.popular-cover{position:relative;width:min(220px,72%);aspect-ratio:3/4;display:block;margin:12px auto 0;overflow:hidden;border:1px solid rgba(218,190,255,.28);background:#09060e;box-shadow:0 25px 55px rgba(0,0,0,.52),0 0 32px rgba(130,47,199,.18);transform:perspective(900px) rotateY(-4deg);transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
.popular-cover:before{content:"";position:absolute;inset:7px;border:1px solid rgba(230,207,255,.10);z-index:3;pointer-events:none}
.popular-cover:hover{transform:perspective(900px) rotateY(0) translateY(-5px) scale(1.015);border-color:rgba(223,192,255,.52);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 42px rgba(148,59,222,.28)}
.popular-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .8s}
.popular-cover:hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.03)}
.popular-cover-shine{position:absolute;inset:-20% 0;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%);transform:translateX(-125%);animation:popularShine 7s ease-in-out infinite;pointer-events:none;z-index:2}
.popular-placeholder{height:100%;display:grid;place-items:center;color:#b97aff;font-size:42px;background:radial-gradient(circle,rgba(141,57,227,.22),transparent 55%),#0b0810}
.popular-info{width:min(300px,90%);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:17px;position:relative;z-index:3}
.popular-position{font:600 25px/1 Cinzel,serif;color:rgba(214,178,249,.48);text-shadow:0 0 14px rgba(174,89,255,.18)}
.popular-title-wrap{min-width:0}
.popular-label{display:block;font:500 6px/1 Inter,sans-serif;letter-spacing:2.4px;color:rgba(210,184,232,.38);margin-bottom:5px}
.popular-title-wrap a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eee4f5;text-decoration:none;font:600 15px/1.25 Cinzel,serif;text-shadow:0 0 10px rgba(190,122,255,.16);transition:color .35s,text-shadow .35s,letter-spacing .35s}
.popular-title-wrap a:hover{color:#dcb9ff;letter-spacing:.15px;text-shadow:0 0 14px rgba(190,112,255,.45)}
.popular-visits{text-align:right;min-width:55px}
.popular-visits span{display:block;font:600 13px/1 Cinzel,serif;color:#cba1ef}
.popular-visits small{display:block;margin-top:4px;font:500 5px/1 Inter,sans-serif;letter-spacing:1.8px;color:rgba(204,181,220,.40)}
.popular-progress{position:relative;width:min(300px,90%);height:1px;margin:17px auto 0;background:rgba(220,188,255,.08);overflow:hidden}
.popular-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,#b86cff,#eed9ff,transparent);box-shadow:0 0 10px rgba(184,108,255,.75);animation:popularProgress 7s linear infinite}
.popular-hint{margin-top:13px;font:500 6px/1 Inter,sans-serif;letter-spacing:2.4px;color:rgba(209,184,227,.28);text-align:center;animation:popularHint 3s ease-in-out infinite}
.popular-empty{min-height:420px;display:grid;place-items:center;text-align:center;color:rgba(204,185,216,.42);font:400 11px Inter,sans-serif;border:1px dashed rgba(188,135,236,.12);margin-top:20px}
.popular-stage.is-changing .popular-cover{animation:popularChange .85s cubic-bezier(.4,0,.2,1)}
.popular-stage.is-changing .popular-info{animation:popularInfo .85s cubic-bezier(.4,0,.2,1)}

@keyframes popularAtmosphere{0%,100%{transform:translateX(-4%) rotate(-18deg);opacity:.18}50%{transform:translateX(10%) rotate(-18deg);opacity:.55}}
@keyframes popularAura{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.62}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@keyframes popularSliceA{0%,100%{transform:translateX(-5%) rotate(-22deg);opacity:.16}50%{transform:translateX(8%) rotate(-22deg);opacity:.55}}
@keyframes popularSliceB{0%,100%{transform:translateX(5%) rotate(19deg);opacity:.12}50%{transform:translateX(-8%) rotate(19deg);opacity:.46}}
@keyframes popularTitleBreath{0%,100%{text-shadow:0 0 10px rgba(172,89,255,.17),0 0 26px rgba(120,48,184,.08)}50%{text-shadow:0 0 16px rgba(197,119,255,.36),0 0 34px rgba(120,48,184,.15)}}
@keyframes popularVeil{50%{transform:scale(1.12) translateY(-8px);opacity:.72}}
@keyframes popularSigil{to{transform:rotate(360deg)}}
@keyframes popularSigilRing{to{transform:rotate(-360deg)}}
@keyframes popularShine{0%,38%{transform:translateX(-125%)}58%,100%{transform:translateX(125%)}}
@keyframes popularProgress{from{width:0}to{width:100%}}
@keyframes popularHint{50%{opacity:.65;transform:translateY(-2px)}}
@keyframes popularChange{0%{opacity:1;transform:perspective(900px) rotateY(-4deg) translateX(0) scale(1);filter:blur(0)}42%{opacity:0;transform:perspective(900px) rotateY(-9deg) translateX(-28px) scale(.97);filter:blur(4px)}58%{opacity:0;transform:perspective(900px) rotateY(9deg) translateX(28px) scale(.97);filter:blur(4px)}100%{opacity:1;transform:perspective(900px) rotateY(-4deg) translateX(0) scale(1);filter:blur(0)}}
@keyframes popularInfo{0%{opacity:1;transform:translateX(0)}45%{opacity:0;transform:translateX(-18px)}60%{opacity:0;transform:translateX(18px)}100%{opacity:1;transform:translateX(0)}}

@media(max-width:1050px){
  .collection-body{grid-template-columns:minmax(0,1.7fr) minmax(270px,.9fr);gap:22px}
  .collection-body .series-grid{gap:18px}
  .popular-panel{padding:22px 18px 20px}
  .popular-stage{min-height:430px}
  .popular-cover{width:min(185px,75%)}
  .popular-info{grid-template-columns:auto 1fr;}
  .popular-visits{grid-column:2;text-align:left}
}
@media(max-width:900px){
  .collection-body{grid-template-columns:1fr;gap:30px}
  .collection-body .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .popular-panel{min-height:540px}
  .popular-stage{min-height:470px}
  .popular-cover{width:min(220px,55%)}
  .popular-info{grid-template-columns:auto 1fr auto;width:min(390px,92%)}
  .popular-visits{grid-column:auto;text-align:right}
}
@media(max-width:620px){
  .collection-body{gap:24px}
  .collection-body .series-grid{grid-template-columns:1fr}
  .popular-panel{min-height:520px;padding:20px 16px 18px}
  .popular-head h3{font-size:27px}
  .popular-stage{min-height:440px}
  .popular-cover{width:min(205px,62%)}
  .popular-info{grid-template-columns:auto 1fr;gap:10px;width:94%}
  .popular-visits{grid-column:2;text-align:left}
  .popular-sigil{right:2px}
}


/* =========================================================
   V18 — MANHWAS COMPACTOS + MODAL DE CAPÍTULOS + POPULAR INTERACTIVO
   ========================================================= */

/* MANHWAS: tarjeta más compacta y útil */
.collection-body .series-grid{align-items:stretch}
.collection-body .series-card{
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  grid-template-rows:34px minmax(0,1fr);
  min-height:235px;
  border-radius:14px;
  isolation:isolate;
}
.collection-body .series-card .card-topline{grid-column:1/-1;grid-row:1;height:34px;padding:0 12px}
.collection-body .series-card .cover-wrap{grid-column:1;grid-row:2;aspect-ratio:auto;height:100%;min-height:201px;border-right:1px solid rgba(180,109,246,.12)}
.collection-body .series-card .cover{object-fit:cover;transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s}
.collection-body .series-card .card-body{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center;padding:16px 17px 15px;min-width:0}
.collection-body .series-card .card-index{margin-bottom:5px}
.collection-body .series-card .card-body h3{font-size:16px;line-height:1.2;max-width:none}
.collection-body .series-card .synopsis{font-size:10px;line-height:1.55;max-height:34px;margin-top:9px}
.collection-body .series-card .card-footer{margin-top:13px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.chapter-main-button{
  position:relative;min-width:132px;height:43px;padding:0 30px 0 13px;border:1px solid rgba(190,116,255,.38);
  border-radius:9px;background:linear-gradient(135deg,rgba(143,51,220,.16),rgba(255,255,255,.025));
  color:#eee3f8;cursor:pointer;display:flex;align-items:center;gap:9px;text-align:left;overflow:hidden;
  box-shadow:inset 0 0 18px rgba(138,54,211,.06);transition:transform .3s,border-color .3s,box-shadow .3s,background .3s
}
.chapter-main-button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.14) 50%,transparent 75%);transform:translateX(-120%);transition:transform .65s}
.chapter-main-button:hover{transform:translateY(-3px);border-color:#bd79ff;background:linear-gradient(135deg,rgba(145,50,223,.28),rgba(255,255,255,.045));box-shadow:0 10px 26px rgba(108,36,176,.22),0 0 18px rgba(172,89,255,.10)}
.chapter-main-button:hover:before{transform:translateX(120%)}
.chapter-main-button:focus-visible{outline:2px solid rgba(210,166,255,.75);outline-offset:3px}
.chapter-main-label{font:600 6px/1 'DM Sans',sans-serif;letter-spacing:1.5px;color:#887b94}
.chapter-main-button strong{font:600 17px/1 Cinzel,serif;color:#f5eaff}
.chapter-main-arrow{position:absolute;right:10px;font-size:13px;color:#b96eff;transition:transform .3s}
.chapter-main-button:hover .chapter-main-arrow{transform:translate(2px,-2px)}
.chapter-new-badge{display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 8px;border:1px solid rgba(221,153,255,.34);border-radius:999px;background:rgba(174,82,255,.10);color:#dcb0ff;font:700 6px/1 'DM Sans',sans-serif;letter-spacing:1.4px;box-shadow:0 0 16px rgba(160,66,231,.12);animation:newBadgePulse 2.2s ease-in-out infinite}
.chapter-new-badge:before{content:"";width:4px;height:4px;border-radius:50%;margin-right:5px;background:#d8a0ff;box-shadow:0 0 9px #c278ff}
@keyframes newBadgePulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}

/* MODAL: últimos cuatro capítulos */
body.chapter-modal-open{overflow:hidden}
.chapter-modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s,visibility .35s}
.chapter-modal.open{visibility:visible;opacity:1;pointer-events:auto}
.chapter-modal-backdrop{position:absolute;inset:0;background:rgba(3,2,7,.78);backdrop-filter:blur(9px);opacity:0;transition:opacity .4s}
.chapter-modal.open .chapter-modal-backdrop{opacity:1}
.chapter-modal-box{position:relative;width:min(520px,100%);padding:20px;border:1px solid rgba(202,151,255,.30);border-radius:18px;background:linear-gradient(145deg,rgba(25,15,37,.98),rgba(7,5,11,.99));box-shadow:0 35px 100px rgba(0,0,0,.72),0 0 55px rgba(128,45,204,.18);transform:translateY(28px) scale(.96);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;overflow:hidden}
.chapter-modal.open .chapter-modal-box{transform:none;opacity:1}
.chapter-modal-box:before{content:"";position:absolute;width:250px;height:250px;right:-120px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(166,76,240,.18),transparent 67%);filter:blur(4px);animation:modalAura 4s ease-in-out infinite}
.chapter-modal-box:after{content:"";position:absolute;left:-15%;top:56%;width:130%;height:1px;background:linear-gradient(90deg,transparent,rgba(219,182,255,.32),transparent);transform:rotate(-8deg);animation:modalScan 5s ease-in-out infinite;pointer-events:none}
.chapter-modal-top{position:relative;z-index:2;display:flex;align-items:center;gap:9px;font:600 6px/1 'DM Sans',sans-serif;letter-spacing:2px;color:#806d8f}
.chapter-modal-top i{flex:1;height:1px;background:rgba(192,132,255,.15)}
.chapter-modal-heading{position:relative;z-index:2;padding:24px 4px 17px}
.chapter-modal-kicker{font:700 7px/1 'DM Sans',sans-serif;letter-spacing:3px;color:#b66dff}
.chapter-modal-heading h3{margin:9px 0 7px;font:600 clamp(21px,4vw,29px)/1.15 Cinzel,serif;color:#f1e6fa;text-shadow:0 0 18px rgba(178,98,255,.18)}
.chapter-modal-heading p{margin:0;color:#8f8297;font-size:10px;line-height:1.6}
.chapter-modal-list{position:relative;z-index:3;display:grid;gap:8px}
.chapter-modal-item{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:67px;padding:9px 12px;border:1px solid rgba(181,112,247,.13);border-radius:11px;background:rgba(255,255,255,.018);overflow:hidden;transition:transform .3s,border-color .3s,background .3s,box-shadow .3s}
.chapter-modal-item:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(153,62,230,.10),transparent 55%);transform:translateX(-105%);transition:transform .45s}
.chapter-modal-item:hover{transform:translateX(5px);border-color:rgba(192,126,255,.45);background:rgba(158,71,230,.075);box-shadow:0 8px 28px rgba(87,27,137,.18)}
.chapter-modal-item:hover:before{transform:translateX(0)}
.chapter-modal-number{position:relative;z-index:2;font:600 20px/1 Cinzel,serif;color:#bca1cb;text-align:center}
.chapter-modal-copy{position:relative;z-index:2;min-width:0}
.chapter-modal-copy small{display:block;font:600 6px/1 'DM Sans',sans-serif;letter-spacing:1.8px;color:#76677d;margin-bottom:6px}
.chapter-modal-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.3 'DM Sans',sans-serif;color:#d8ccdf}
.chapter-modal-item b,.chapter-modal-item em{position:relative;z-index:2;font:700 6px/1 'DM Sans',sans-serif;letter-spacing:1.5px;font-style:normal;color:#8e7b99;white-space:nowrap}
.chapter-modal-item.is-new{border-color:rgba(190,111,255,.43);background:linear-gradient(90deg,rgba(139,45,218,.12),rgba(255,255,255,.018))}
.chapter-modal-item.is-new .chapter-modal-number{color:#f0dfff;text-shadow:0 0 15px rgba(193,112,255,.38)}
.chapter-modal-item.is-new em{color:#d5a2ff}
.chapter-modal-close{position:absolute;z-index:5;top:12px;right:13px;width:31px;height:31px;border:1px solid rgba(199,149,255,.18);border-radius:50%;background:rgba(255,255,255,.025);color:#b9a6c4;font-size:20px;line-height:1;cursor:pointer;transition:.3s}
.chapter-modal-close:hover{transform:rotate(90deg);color:#fff;border-color:#b96eff;box-shadow:0 0 20px rgba(173,77,242,.2)}
@keyframes modalAura{50%{transform:scale(1.15);opacity:.72}}
@keyframes modalScan{0%,100%{opacity:.08;transform:translateX(-10%) rotate(-8deg)}50%{opacity:.45;transform:translateX(8%) rotate(-8deg)}}

/* OBRAS MÁS APOYADAS: identidad visual propia */
.popular-panel{min-height:100%;border-radius:22px!important;padding:22px 22px 19px!important;background:radial-gradient(circle at 50% 25%,rgba(103,32,155,.16),transparent 38%),linear-gradient(160deg,rgba(12,12,17,.98),rgba(4,4,8,.99))!important;border:1px solid rgba(190,175,214,.18)!important;box-shadow:inset 0 0 50px rgba(255,255,255,.015),0 25px 80px rgba(0,0,0,.32)!important;overflow:hidden}
.popular-panel:before{inset:12px!important;border:1px solid rgba(226,214,239,.07)!important;clip-path:none!important;border-radius:15px}
.popular-panel:after{width:100%!important;left:0!important;top:44%!important;background:linear-gradient(90deg,transparent,rgba(221,207,239,.06),transparent)!important;transform:rotate(-11deg)!important}
.popular-head{padding:2px 2px 0}
.popular-kicker{color:rgba(215,196,232,.48)!important;letter-spacing:3.5px!important}
.popular-head h3{font-size:26px!important;letter-spacing:-.4px!important;color:#eeeaf2!important;text-shadow:0 0 16px rgba(212,186,235,.14)!important;animation:none!important}
.popular-head p{max-width:220px!important;color:rgba(205,195,210,.47)!important;font-size:9px!important}
.popular-rank{border-radius:999px!important;color:rgba(231,222,238,.63)!important;border-color:rgba(226,210,238,.16)!important;background:rgba(255,255,255,.025)!important}
.popular-stage{min-height:450px!important;margin-top:12px!important;justify-content:flex-start!important;touch-action:none!important}
.popular-counter{position:relative;z-index:7;align-self:flex-end;display:flex;align-items:center;gap:7px;font:600 7px/1 'DM Sans',sans-serif;letter-spacing:1.8px;color:#a496ac}
.popular-counter span:first-child{font:600 16px/1 Cinzel,serif;color:#eee1f6}
.popular-counter i{display:block;width:22px;height:1px;background:rgba(211,193,225,.2)}
.popular-cover-zone{position:relative;width:min(245px,82%);margin:6px auto 0;aspect-ratio:3/4;touch-action:none;cursor:grab;z-index:3}
.popular-cover-zone.is-dragging{cursor:grabbing}
.popular-cover{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border-radius:5px!important;transform:perspective(900px) rotateY(-4deg)!important;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s!important;border-color:rgba(226,217,234,.25)!important;background:#08080c!important}
.popular-cover:hover{transform:perspective(900px) rotateY(0) translateY(-4px) scale(1.012)!important;border-color:rgba(232,217,243,.48)!important}
.popular-cover img{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s!important}
.popular-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(3,3,6,.48));pointer-events:none;z-index:3}
.popular-drag-tip{position:absolute;left:50%;bottom:9px;z-index:8;transform:translateX(-50%);padding:6px 9px;border:1px solid rgba(234,220,244,.15);border-radius:999px;background:rgba(5,5,9,.62);backdrop-filter:blur(8px);font:600 5px/1 'DM Sans',sans-serif;letter-spacing:1.3px;color:rgba(237,226,243,.55);white-space:nowrap;pointer-events:none;opacity:.8;transition:.3s}
.popular-cover-zone:hover .popular-drag-tip,.popular-cover-zone.is-dragging .popular-drag-tip{opacity:0}
.popular-sword-line{position:absolute;left:-15%;right:-15%;top:53%;height:1px;z-index:6;pointer-events:none;opacity:.35;transform:rotate(-17deg)}
.popular-sword-line:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(225,212,237,.2),rgba(255,255,255,.7),rgba(225,212,237,.2),transparent);box-shadow:0 0 12px rgba(237,220,250,.5)}
.popular-sword-line span{position:absolute;left:-70px;top:-16px;font-size:24px;color:rgba(228,215,238,.3)}
.popular-weapon{position:absolute;inset:-20%;z-index:10;pointer-events:none;opacity:0;overflow:hidden}
.popular-weapon:before{content:"";position:absolute;width:245px;height:13px;left:calc(50% - 122px);top:50%;background:linear-gradient(90deg,#050507 0%,#1a1820 46%,#eeeaf4 50%,#0c0b10 54%,#050507 100%);border-radius:2px;box-shadow:0 0 5px rgba(255,255,255,.8),0 0 22px rgba(219,202,233,.35);transform:rotate(-26deg);transform-origin:center}
.popular-weapon:after{content:"";position:absolute;width:72px;height:3px;left:calc(50% - 36px);top:calc(50% + 24px);background:linear-gradient(90deg,#050507 35%,#aaa1ad 36%,#aaa1ad 63%,#050507 64%);box-shadow:0 0 10px rgba(255,255,255,.25);transform:rotate(-26deg)}
.popular-weapon.sword-slash{animation:swordBankai .85s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes swordBankai{0%{opacity:0;transform:translate(-85%,85%) rotate(-20deg) scale(.75)}18%{opacity:1}48%{opacity:1;transform:translate(0,0) rotate(-20deg) scale(1.05);filter:brightness(1.45)}68%{opacity:.85;transform:translate(55%,-55%) rotate(-20deg) scale(1.08);filter:brightness(1.2)}100%{opacity:0;transform:translate(105%,-105%) rotate(-20deg) scale(1.12)}}
.popular-info{width:min(330px,92%)!important;display:grid!important;grid-template-columns:1fr auto!important;gap:3px 12px!important;margin-top:13px!important}
.popular-label{grid-column:1/-1!important;color:rgba(211,197,220,.36)!important;font-size:5px!important}
.popular-title-wrap{display:contents!important}
.popular-title-wrap a{font-size:14px!important;line-height:1.2!important;color:#eee7f2!important}
.popular-visits{min-width:50px!important;text-align:right!important}
.popular-visits span{font-size:12px!important;color:#cbbbd2!important}
.popular-progress{width:min(330px,92%)!important;margin-top:13px!important;background:rgba(222,211,229,.08)!important}
.popular-progress span{background:linear-gradient(90deg,transparent,#e7dced,#fff,transparent)!important;box-shadow:0 0 10px rgba(238,223,246,.55)!important}
.popular-actions{position:relative;z-index:30;width:min(330px,92%);display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px auto 0;padding-top:11px;border-top:1px solid rgba(224,211,232,.08);pointer-events:auto}.popular-actions .all-works-link{position:relative;z-index:31;display:inline-flex;align-items:center;gap:5px;pointer-events:auto;cursor:pointer;user-select:none;text-decoration:none}
.popular-actions a{font:700 6px/1 'DM Sans',sans-serif;letter-spacing:1.6px;color:#e6d8eb;transition:.3s}
.popular-actions a b{display:inline-block;margin-left:5px;color:#bd9bcc;transition:.3s}
.popular-actions a:hover{color:#fff;text-shadow:0 0 10px rgba(239,220,248,.35)}
.popular-actions a:hover b{transform:translateX(3px)}
.popular-actions a.pulse-click{animation:allWorksPulse .5s ease}
.popular-actions>span{font:600 5px/1 'DM Sans',sans-serif;letter-spacing:1.2px;color:rgba(213,198,219,.27);text-align:right}
@keyframes allWorksPulse{50%{transform:scale(1.04);text-shadow:0 0 16px rgba(237,214,248,.55)}}
.popular-stage.is-changing .popular-cover{animation:popularChangeV18 .82s cubic-bezier(.4,0,.2,1)}
.popular-stage.is-changing .popular-info{animation:popularInfoV18 .82s cubic-bezier(.4,0,.2,1)}
@keyframes popularChangeV18{0%{opacity:1;transform:perspective(900px) rotateY(-4deg) translateX(0) scale(1)}42%{opacity:0;transform:perspective(900px) rotateY(-9deg) translateX(-24px) scale(.97);filter:blur(3px)}58%{opacity:0;transform:perspective(900px) rotateY(9deg) translateX(24px) scale(.97);filter:blur(3px)}100%{opacity:1;transform:perspective(900px) rotateY(-4deg) translateX(0) scale(1);filter:blur(0)}}
@keyframes popularInfoV18{0%{opacity:1;transform:translateY(0)}45%{opacity:0;transform:translateY(8px)}60%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}

/* ===== Banner "Obras más visitadas" (popular-hero) ===== */
.popular-hero{margin:38px 0 54px;position:relative}
.popular-hero-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.popular-hero-frame{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:#0a0710;aspect-ratio:21/9;cursor:grab;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.popular-hero-frame.is-dragging{cursor:grabbing}
.popular-hero-media{position:absolute;inset:0;display:block}
.popular-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.popular-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:56px;color:#7a5aa8;background:radial-gradient(circle,rgba(142,67,214,.18),transparent 65%)}
.popular-hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,4,10,.96) 0%,rgba(5,4,10,.82) 32%,rgba(5,4,10,.32) 62%,rgba(5,4,10,.08) 100%),
  linear-gradient(0deg,rgba(5,4,10,.9) 0%,rgba(5,4,10,.15) 38%,transparent 60%)}
.popular-hero-kicker{position:absolute;top:24px;right:28px;z-index:6;display:flex;align-items:center;gap:8px;color:#c9a6ff;font:700 8px/1 'DM Sans',sans-serif;letter-spacing:2.6px;text-shadow:0 0 12px rgba(180,110,255,.4)}
.popular-hero-kicker i{display:block;width:20px;height:1px;background:#b875ff;box-shadow:0 0 10px #a85cff}
.popular-hero-copy{position:absolute;left:0;bottom:66px;z-index:6;max-width:min(560px,54%);padding:0 42px;display:flex;flex-direction:column;gap:12px}
.popular-hero-badge{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:5px 12px;border:1px solid rgba(184,117,255,.35);border-radius:20px;background:rgba(20,13,30,.55);backdrop-filter:blur(6px);font:700 10px/1 'DM Sans',sans-serif;letter-spacing:1px;color:#d9c6ef}
.popular-hero-badge b{color:#f4e9ff;font-size:12px}
.popular-hero-badge i{display:block;width:3px;height:3px;border-radius:50%;background:#b86cff;box-shadow:0 0 8px #b86cff}
.popular-hero-title{display:block;font:600 clamp(24px,3.4vw,40px)/1.08 Cinzel,serif;color:#f8f2ff;text-decoration:none;text-shadow:0 0 20px rgba(172,89,255,.22);transition:.3s}
.popular-hero-title:hover{color:#e6d3ff;text-shadow:0 0 26px rgba(190,120,255,.4)}
.popular-hero-synopsis{margin:0;max-width:480px;color:#c3b8cf;font:400 12.5px/1.7 Inter,sans-serif;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.popular-hero-actions{display:flex;align-items:center;gap:16px;margin-top:4px}
.popular-hero-cta{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:10px;background:linear-gradient(135deg,#9d4eea,#6421bd);border:1px solid #bd79ff;color:#fff;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:.4px;text-decoration:none;box-shadow:0 8px 30px rgba(119,37,207,.35);transition:.3s}
.popular-hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(146,58,235,.45)}
.popular-hero-secondary{color:#c7b4dd;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.4px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.3s}
.popular-hero-secondary:hover{color:#fff}
.popular-hero-secondary b{transition:.3s}
.popular-hero-secondary:hover b{transform:translateX(3px)}
.popular-hero-footer{position:absolute;left:42px;right:32px;bottom:22px;z-index:6;display:flex;align-items:center;gap:16px}
.popular-hero-progress{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.popular-hero-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,#b86cff,#eed9ff,transparent);box-shadow:0 0 10px rgba(184,108,255,.75);animation:popularHeroProgress 7s linear infinite}
@keyframes popularHeroProgress{from{width:0}to{width:100%}}
.popular-hero-dots{display:flex;align-items:center;gap:6px}
.popular-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.3s}
.popular-dot:hover{background:rgba(255,255,255,.4)}
.popular-dot.is-active{width:22px;border-radius:5px;background:linear-gradient(90deg,#b86cff,#eed9ff)}
.popular-hero-count{font:700 9px/1 'DM Mono',monospace;letter-spacing:1px;color:#8d80a0;white-space:nowrap}
.popular-hero-empty{padding:40px;text-align:center;color:#8d80a0;font:12px Inter,sans-serif;border:1px dashed rgba(180,125,255,.2);border-radius:18px;margin:38px 0 54px}

/* Transición al cambiar de obra (arreglada: ahora sí coincide con las clases reales) */
.popular-hero-frame.is-changing .popular-hero-media img{animation:popularHeroImg .85s cubic-bezier(.4,0,.2,1)}
.popular-hero-frame.is-changing .popular-hero-copy{animation:popularHeroCopy .85s cubic-bezier(.4,0,.2,1)}
@keyframes popularHeroImg{0%{opacity:1;transform:scale(1)}42%{opacity:0;transform:scale(1.06);filter:blur(6px)}58%{opacity:0;transform:scale(1.04);filter:blur(6px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes popularHeroCopy{0%{opacity:1;transform:translateY(0)}45%{opacity:0;transform:translateY(10px)}60%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}

/* ===== Habilidad especial: ilusión estilo Kyoka Suigetsu (Aizen) =====
   Al cambiar de obra, el sable revela el zanpakuto y la escena se
   disuelve en un estallido de pétalos violetas antes de reformarse. */
.popular-illusion{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;overflow:hidden}
.popular-illusion:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(230,211,255,.9),rgba(184,108,255,.5) 30%,transparent 68%);mix-blend-mode:screen}
.popular-illusion:after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 42%,rgba(238,217,255,.65) 50%,transparent 58%);transform:translateX(-60%)}
.popular-illusion span{position:absolute;top:46%;left:50%;width:16px;height:22px;background:radial-gradient(ellipse at 50% 30%,#f3e2ff,#c98cff 55%,transparent 78%);clip-path:polygon(50% 0%,85% 30%,68% 100%,32% 100%,15% 30%);opacity:0}
.popular-illusion span:nth-child(1){--tx:-220px;--ty:-90px;--r:-40deg}
.popular-illusion span:nth-child(2){--tx:-140px;--ty:110px;--r:20deg}
.popular-illusion span:nth-child(3){--tx:-10px;--ty:-150px;--r:-15deg}
.popular-illusion span:nth-child(4){--tx:60px;--ty:130px;--r:35deg}
.popular-illusion span:nth-child(5){--tx:180px;--ty:-70px;--r:-25deg}
.popular-illusion span:nth-child(6){--tx:230px;--ty:80px;--r:50deg}
.popular-illusion span:nth-child(7){--tx:-90px;--ty:10px;--r:10deg}
.popular-illusion span:nth-child(8){--tx:110px;--ty:-10px;--r:-30deg}
.popular-illusion.is-active{animation:illusionFlash .95s ease-out}
.popular-illusion.is-active:before{animation:illusionPulse .95s ease-out}
.popular-illusion.is-active:after{animation:illusionSweep .8s ease-out}
.popular-illusion.is-active span{animation:illusionPetal .95s cubic-bezier(.2,.7,.3,1) forwards}
.popular-illusion.is-active span:nth-child(2){animation-delay:.03s}
.popular-illusion.is-active span:nth-child(3){animation-delay:.05s}
.popular-illusion.is-active span:nth-child(4){animation-delay:.02s}
.popular-illusion.is-active span:nth-child(5){animation-delay:.06s}
.popular-illusion.is-active span:nth-child(6){animation-delay:.04s}
.popular-illusion.is-active span:nth-child(7){animation-delay:.07s}
.popular-illusion.is-active span:nth-child(8){animation-delay:.01s}
@keyframes illusionFlash{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes illusionPulse{0%{transform:scale(.2);opacity:0}22%{transform:scale(1.3);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes illusionSweep{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@keyframes illusionPetal{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}20%{opacity:1;transform:translate(calc(-50% + var(--tx) * .25),calc(-50% + var(--ty) * .25)) scale(1) rotate(var(--r))}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) + 60px)) scale(.5) rotate(calc(var(--r) * 2))}}

/* ===== Estallido de energía tipo Aizen (Kurohitsugi): fisuras de luz que
   rasgan la oscuridad justo antes de que la ilusión se asiente. Todo en
   % / unidades relativas al contenedor para verse igual en PC y móvil. */
.popular-voidburst{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;overflow:hidden}
.popular-voidburst:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(4,2,8,.96),rgba(4,2,8,.6) 42%,transparent 74%);opacity:0}
.popular-voidburst:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(238,224,255,.95),rgba(184,108,255,.55) 16%,transparent 40%);mix-blend-mode:screen;opacity:0}
.popular-voidburst i{position:absolute;top:50%;left:50%;width:2px;height:58%;background:linear-gradient(180deg,transparent,#f1e4ff 12%,#fff 50%,#b86cff 88%,transparent);box-shadow:0 0 1.2vmin 0.3vmin rgba(200,150,255,.85);transform-origin:50% 0%;opacity:0}
.popular-voidburst i:nth-child(1){--rot:6deg}
.popular-voidburst i:nth-child(2){--rot:48deg}
.popular-voidburst i:nth-child(3){--rot:95deg}
.popular-voidburst i:nth-child(4){--rot:140deg}
.popular-voidburst i:nth-child(5){--rot:188deg}
.popular-voidburst i:nth-child(6){--rot:232deg}
.popular-voidburst i:nth-child(7){--rot:288deg}
.popular-voidburst i:nth-child(8){--rot:335deg}
.popular-voidburst.is-active{animation:voidFade .95s ease-out}
.popular-voidburst.is-active:before{animation:voidDark .95s ease-out forwards}
.popular-voidburst.is-active:after{animation:voidFlash .95s ease-out forwards}
.popular-voidburst.is-active i{animation:voidCrack .7s cubic-bezier(.2,.85,.25,1) forwards}
.popular-voidburst.is-active i:nth-child(2){animation-delay:.02s}
.popular-voidburst.is-active i:nth-child(3){animation-delay:.05s}
.popular-voidburst.is-active i:nth-child(4){animation-delay:.01s}
.popular-voidburst.is-active i:nth-child(5){animation-delay:.06s}
.popular-voidburst.is-active i:nth-child(6){animation-delay:.03s}
.popular-voidburst.is-active i:nth-child(7){animation-delay:.07s}
.popular-voidburst.is-active i:nth-child(8){animation-delay:.04s}
@keyframes voidFade{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes voidDark{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes voidFlash{0%{opacity:0;transform:scale(.15)}20%{opacity:1;transform:scale(1)}45%{opacity:.55;transform:scale(1.7)}100%{opacity:0;transform:scale(2.6)}}
@keyframes voidCrack{0%{transform:translateX(-50%) rotate(var(--rot)) scaleY(0);opacity:0}18%{opacity:1}38%{transform:translateX(-50%) rotate(var(--rot)) scaleY(1);opacity:1}100%{transform:translateX(-50%) rotate(var(--rot)) scaleY(1);opacity:0}}


@media(max-width:900px){
  .popular-hero-frame{aspect-ratio:4/5;border-radius:18px}
  .popular-hero-copy{max-width:88%;bottom:78px;padding:0 22px}
  .popular-hero-kicker{top:16px;right:18px}
  .popular-hero-footer{left:22px;right:18px}
}
@media(max-width:560px){
  .popular-hero-frame{aspect-ratio:3/4}
  .popular-hero-synopsis{-webkit-line-clamp:2}
  .popular-hero-actions{flex-wrap:wrap;gap:10px}
}

/* ===== Botón "Ver toda la biblioteca" (debajo del bloque de manhwas) ===== */
.collection-body{grid-template-columns:1fr!important}
.collection-more{display:flex;justify-content:center;margin:26px 0 4px}
.library-portal{position:relative;display:inline-flex;align-items:center;gap:18px;padding:16px 26px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);text-decoration:none;color:inherit;transition:.3s}
.library-portal:hover{border-color:#a85cff;background:rgba(159,75,235,.08);transform:translateY(-3px)}
.library-portal-copy{display:flex;flex-direction:column;gap:3px}
.library-portal-copy strong{font:600 15px/1.2 Cinzel,serif;color:#f0e6fa}
.library-portal-copy small{font:400 10px/1.4 Inter,sans-serif;color:#8d80a0}
.library-portal-arrow{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(184,117,255,.4);color:#e6d3ff;font-size:14px;transition:.3s}
.library-portal:hover .library-portal-arrow{background:rgba(157,78,234,.28);border-color:#bd79ff;transform:translate(2px,-2px)}
@media(max-width:620px){
  .library-portal{padding:13px 18px;gap:12px}
  .library-portal-copy strong{font-size:13px}
  .library-portal-arrow{width:30px;height:30px;font-size:13px}
}

@media(max-width:1050px){
  .collection-body .series-card{grid-template-columns:125px minmax(0,1fr)}
  .collection-body .series-card .cover-wrap{min-height:190px}
  .popular-cover-zone{width:min(215px,78%)}
}
@media(max-width:900px){
  .collection-body .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-body .series-card{grid-template-columns:132px minmax(0,1fr)}
  .popular-panel{min-height:570px!important}
}
@media(max-width:620px){
  .collection-body .series-grid{grid-template-columns:1fr;gap:14px}
  .collection-body .series-card{grid-template-columns:112px minmax(0,1fr);grid-template-rows:31px minmax(0,1fr);min-height:190px}
  .collection-body .series-card .card-topline{height:31px}
  .collection-body .series-card .cover-wrap{min-height:159px}
  .collection-body .series-card .card-body{padding:11px 12px}
  .collection-body .series-card .card-body h3{font-size:13px}
  .collection-body .series-card .synopsis{font-size:8px;max-height:28px;margin-top:7px}
  .collection-body .series-card .card-footer{margin-top:9px}
  .chapter-main-button{min-width:112px;height:38px;padding:0 26px 0 10px;gap:7px}
  .chapter-main-button strong{font-size:15px}
  .chapter-new-badge{height:22px;padding:0 7px;font-size:5px}
  .chapter-modal{padding:12px}
  .chapter-modal-box{padding:16px 14px}
  .chapter-modal-heading{padding:22px 3px 14px}
  .chapter-modal-item{grid-template-columns:50px minmax(0,1fr) auto;gap:9px;min-height:61px;padding:8px}
  .chapter-modal-number{font-size:17px}
  .chapter-modal-copy strong{font-size:9px}
  .chapter-modal-item b,.chapter-modal-item em{font-size:5px}
  .popular-panel{min-height:540px!important;padding:18px 15px 16px!important}
  .popular-stage{min-height:450px!important}
  .popular-cover-zone{width:min(205px,70%)}
  .popular-actions{align-items:flex-start;flex-direction:column;gap:9px}
  .popular-actions>span{text-align:left}
}


/* ===== V19: navegación de cuenta y archivo personal ===== */
.cosmic-nav{margin-left:auto;display:flex;align-items:center;gap:9px;margin-right:0}
.cosmic-nav-item{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 15px;border:1px solid rgba(180,125,255,.16);border-radius:14px;color:#aaa0b6!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));font-size:11px;font-weight:700;letter-spacing:.7px;text-decoration:none;overflow:hidden;transition:transform .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease}
.cosmic-nav-item:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(171,90,255,.34),transparent 60%);opacity:0;transition:opacity .3s}
.cosmic-nav-item:after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);transition:left .55s ease}
.cosmic-nav-item:hover,.cosmic-nav-item.active{color:#fff!important;border-color:rgba(190,125,255,.6);transform:translateY(-2px);box-shadow:0 8px 28px rgba(121,48,210,.2),inset 0 0 20px rgba(162,75,255,.07)}
.cosmic-nav-item:hover:before,.cosmic-nav-item.active:before{opacity:1}
.cosmic-nav-item:hover:after{left:130%}
.nav-icon{position:relative;z-index:1;width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:rgba(160,82,240,.08);border:1px solid rgba(183,125,255,.16);transition:transform .35s ease,filter .35s ease}
.nav-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.cosmic-nav-item>span:last-child{position:relative;z-index:1}
.cosmic-nav-item:hover .nav-icon{transform:rotate(-7deg) scale(1.1);filter:drop-shadow(0 0 7px rgba(205,142,255,.75))}
.icon-discord svg{stroke-width:1.35}.icon-patreon svg{stroke-width:1.5}
.save-series-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:72px;height:30px;margin:0;padding:0 9px;border:1px solid rgba(180,125,255,.20);border-radius:8px;background:rgba(13,9,19,.72);color:#8f849a;font:700 7px/1 'DM Sans',sans-serif;letter-spacing:1.15px;white-space:nowrap;cursor:pointer;overflow:hidden;transition:transform .25s ease,border-color .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease}.save-series-button:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 110%,rgba(169,88,255,.18),transparent 68%);opacity:0;transition:opacity .25s ease}.save-series-button:hover,.save-series-button.is-saved{color:#d8c1eb;border-color:rgba(183,119,255,.48);background:rgba(94,42,133,.16);box-shadow:0 5px 16px rgba(102,42,157,.12)}.save-series-button:hover{transform:translateY(-1px)}.save-series-button:hover:before,.save-series-button.is-saved:before{opacity:1}.save-icon,.save-label{position:relative;z-index:1}.save-icon{width:15px;height:15px;display:grid;place-items:center;color:#a96be7;transition:transform .25s ease,color .25s ease,filter .25s ease}.save-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}.save-series-button:hover .save-icon{transform:translateY(-1px) scale(1.06);color:#c38aff;filter:drop-shadow(0 0 5px rgba(184,111,255,.45))}.save-series-button.is-saved .save-icon{color:#c38aff;filter:drop-shadow(0 0 6px rgba(184,111,255,.4))}.save-series-button.is-saved .save-icon svg{fill:rgba(169,107,231,.18)}.save-series-button.save-click .save-icon{animation:saveIconTap .42s ease}.save-series-button.save-click .save-label{animation:saveLabelIn .28s ease}@keyframes saveIconTap{50%{transform:translateY(-2px) scale(1.18)}100%{transform:translateY(0) scale(1)}}@keyframes saveLabelIn{50%{opacity:.45;transform:translateX(2px)}100%{opacity:1;transform:none}}.collection-body .series-card .save-series-button{flex:none}.collection-body .series-card .card-footer{gap:7px}.collection-body .series-card .save-series-button + *{margin-left:0}@media(max-width:560px){.collection-body .series-card .save-series-button{min-width:65px;height:29px;padding:0 8px;font-size:6.5px}.collection-body .series-card .save-icon{width:14px}.collection-body .series-card .save-label{letter-spacing:.9px}}
.account-page{min-height:100vh;background:radial-gradient(circle at 50% 10%,rgba(114,43,205,.18),transparent 40%),#07060b;color:#fff;font-family:'DM Sans',Arial,sans-serif;display:grid;place-items:center;padding:24px}
.account-shell{width:min(440px,100%)}.account-card{position:relative;padding:42px 36px;background:rgba(18,14,27,.92);border:1px solid rgba(181,123,255,.25);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 60px rgba(115,42,210,.1);overflow:hidden}
.account-card:before{content:"";position:absolute;width:280px;height:280px;right:-150px;top:-170px;border:1px solid rgba(185,125,255,.16);border-radius:50%;box-shadow:0 0 60px rgba(154,76,238,.12)}
.account-symbol{font-size:25px;color:#c08aff;text-shadow:0 0 22px rgba(190,120,255,.7)}.account-kicker{font-size:9px;letter-spacing:3px;color:#9b82b4;margin:9px 0 8px}.account-card h1{font:600 32px Cinzel,serif;margin:0 0 8px}.account-sub{color:#9991a4;font-size:13px;margin:0 0 26px}.account-form{display:grid;gap:16px}.account-form label{display:grid;gap:7px;color:#bfb4c9;font-size:10px;font-weight:700;letter-spacing:1px}.account-form input{width:100%;padding:13px 14px;border:1px solid #332a3e;border-radius:11px;background:#0d0a12;color:#fff;outline:none}.account-form input:focus{border-color:#a15ae8;box-shadow:0 0 0 3px rgba(161,90,232,.1)}.account-submit{border:1px solid #b36cff;border-radius:11px;background:linear-gradient(135deg,#9145d9,#5d25b5);color:#fff;padding:14px;font-weight:800;letter-spacing:1px;cursor:pointer;transition:.3s}.account-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(119,46,207,.3)}.account-submit span{float:right}.account-error{padding:11px 12px;border:1px solid rgba(255,105,135,.25);border-radius:10px;background:rgba(150,40,70,.13);color:#ff9db1;font-size:12px;margin-bottom:15px}.account-switch{text-align:center;color:#8f8798;font-size:12px}.account-switch a{color:#c08aff}.account-back{display:block;text-align:center;color:#777080;font-size:11px;text-decoration:none;margin-top:20px}
.profile-page{background:#07060b;color:#fff;font-family:'DM Sans',Arial,sans-serif}.profile-main{width:min(1050px,calc(100% - 48px));margin:auto}.profile-hero{display:flex;align-items:center;gap:28px;padding:75px 0 55px;border-bottom:1px solid var(--line)}.profile-avatar-wrap{position:relative}.profile-avatar{width:130px;height:130px;border-radius:50%;object-fit:cover;border:1px solid rgba(190,130,255,.5);padding:5px;background:#100b17;box-shadow:0 0 45px rgba(137,56,222,.25)}.avatar-form{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%)}.avatar-form label{display:block;padding:7px 9px;border:1px solid rgba(190,130,255,.35);border-radius:9px;background:#15101d;color:#c5b8d0;font:700 8px 'DM Sans';white-space:nowrap;cursor:pointer}.avatar-form input{display:none}.profile-hero h1{font:600 clamp(34px,5vw,60px) Cinzel,serif;margin:14px 0 8px}.profile-muted{color:#918897;font-size:13px}.profile-logout{display:inline-block;margin-top:15px;color:#c18aff;font-size:11px;text-decoration:none}.saved-section{padding:55px 0 90px}.saved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.saved-card{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:14px;border:1px solid rgba(180,125,255,.15);background:rgba(255,255,255,.025);border-radius:15px;transition:.3s}.saved-card:hover{transform:translateY(-4px);border-color:rgba(190,125,255,.45);box-shadow:0 16px 35px rgba(0,0,0,.25)}.saved-card img,.saved-card .cover{width:95px;height:125px;object-fit:cover;border-radius:9px}.saved-card h3{font:600 16px Cinzel,serif;line-height:1.2;margin:7px 0 18px}.saved-card p{font-size:8px;letter-spacing:2px;color:#a976dc;margin:3px 0}.saved-open{font-size:9px;letter-spacing:1px;color:#b98cf0;text-decoration:none}.saved-empty{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed rgba(180,125,255,.2);border-radius:18px;background:rgba(255,255,255,.015)}.saved-empty>div{font-size:28px;color:#bc7cff}.saved-empty h3{font:600 23px Cinzel,serif}.saved-empty p{color:#8d8595;font-size:12px;margin-bottom:22px}
@media(max-width:850px){.topbar{height:auto;min-height:76px}.nav-wrap{width:calc(100% - 24px);gap:12px}.brand-copy{display:none}.cosmic-nav{gap:6px}.cosmic-nav-item{min-height:44px;padding:0 11px}.cosmic-nav-item>span:last-child{display:none}.nav-icon{width:28px;height:28px}.saved-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cosmic-nav{width:100%;justify-content:flex-end}.cosmic-nav-item{min-height:42px;padding:0 8px}.profile-main{width:calc(100% - 28px)}.profile-hero{padding:45px 0;gap:18px}.profile-avatar{width:100px;height:100px}.saved-grid{grid-template-columns:1fr}.saved-card{grid-template-columns:82px 1fr}.saved-card img,.saved-card .cover{width:82px;height:110px}}


/* =========================================================
   V22 — AJUSTE VISUAL: NAVEGACIÓN CENTRADA + GUARDAR SERIE
   Solo afecta a la barra superior y al control de guardado.
   ========================================================= */

/* Barra superior: composición centrada, marco morado sutil */
.topbar .nav-wrap{position:relative;justify-content:flex-start}
.topbar .cosmic-nav{
  position:absolute!important;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px;
  border:1px solid rgba(171,103,244,.30);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(24,14,35,.72),rgba(7,5,12,.60));
  box-shadow:0 0 0 1px rgba(191,125,255,.035),0 0 34px rgba(126,44,211,.14),inset 0 0 22px rgba(151,75,224,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar .cosmic-nav:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg,rgba(143,74,220,.05),rgba(194,132,255,.48),rgba(143,74,220,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.topbar .cosmic-nav-item{
  min-width:82px!important;
  min-height:46px!important;
  padding:5px 12px!important;
  justify-content:center;
  gap:7px;
  border:1px solid transparent!important;
  border-radius:12px;
  color:#a99bb6!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.topbar .cosmic-nav-item:before{inset:2px;border-radius:10px;background:radial-gradient(circle at 50% 110%,rgba(170,87,255,.26),transparent 68%);opacity:0}
.topbar .cosmic-nav-item:after{opacity:.45}
.topbar .cosmic-nav-item:hover,
.topbar .cosmic-nav-item.active{
  color:#f7edff!important;
  border-color:rgba(190,122,255,.38)!important;
  background:linear-gradient(180deg,rgba(157,72,231,.13),rgba(104,42,157,.055))!important;
  box-shadow:0 0 20px rgba(135,49,214,.12),inset 0 0 16px rgba(173,89,255,.07)!important;
}
.topbar .nav-icon{
  width:27px!important;
  height:27px!important;
  border-radius:9px;
  background:rgba(164,82,239,.08);
  border-color:rgba(190,126,255,.18);
  color:#bfa8cf;
}
.topbar .nav-icon svg{width:16px;height:16px}
.topbar .cosmic-nav-item:hover .nav-icon,.topbar .cosmic-nav-item.active .nav-icon{
  color:#dcbcff;
  border-color:rgba(205,151,255,.36);
  box-shadow:0 0 14px rgba(174,91,255,.16);
}

/* Guardar: pequeño, oscuro y totalmente integrado a la tarjeta */
.collection-body .card-footer{
  min-width:0;
}
.collection-body .series-card .save-series-button{
  flex:0 0 32px!important;
  width:32px!important;
  min-width:32px!important;
  max-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(184,121,255,.25)!important;
  border-radius:9px!important;
  background:rgba(9,6,14,.82)!important;
  color:#9d87ad!important;
  box-shadow:inset 0 0 14px rgba(151,72,224,.035)!important;
  overflow:hidden;
  z-index:2;
}
.collection-body .series-card .save-series-button:before{
  background:radial-gradient(circle at 50% 100%,rgba(174,89,255,.22),transparent 68%);
}
.collection-body .series-card .save-series-button:hover,
.collection-body .series-card .save-series-button.is-saved{
  transform:translateY(-1px)!important;
  border-color:rgba(194,133,255,.58)!important;
  background:rgba(50,22,72,.58)!important;
  color:#d7b8f0!important;
  box-shadow:0 7px 18px rgba(98,36,154,.16),0 0 14px rgba(166,77,236,.09),inset 0 0 15px rgba(164,78,234,.07)!important;
}
.collection-body .series-card .save-icon{
  width:32px!important;
  height:32px!important;
  color:#a985c2;
}
.collection-body .series-card .save-icon svg{width:14px!important;height:14px!important}
.collection-body .series-card .save-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.collection-body .series-card .save-series-button.is-saved .save-icon{color:#cf9cff}

/* El capítulo conserva el protagonismo y el guardado nunca empuja la tarjeta fuera */
.collection-body .series-card .card-footer{gap:7px;flex-wrap:nowrap}
.collection-body .series-card .chapter-main-button{flex:1 1 auto;min-width:0}
.collection-body .series-card .chapter-new-badge{flex:0 0 auto}

@media(max-width:850px){
  .topbar .cosmic-nav-item{min-width:52px!important;padding:5px 8px!important}
  .topbar .cosmic-nav-item>span:last-child{display:none}
  .topbar .cosmic-nav{gap:3px;padding:4px;border-radius:15px}
}
@media(max-width:560px){
  .topbar .nav-wrap{width:calc(100% - 18px)}
  .topbar .cosmic-nav{left:auto;right:0;transform:translateY(-50%)}
  .topbar .cosmic-nav-item{min-width:42px!important;min-height:40px!important;padding:4px 6px!important}
  .topbar .nav-icon{width:25px!important;height:25px!important}
  .collection-body .series-card .save-series-button{flex-basis:30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important}
  .collection-body .series-card .save-icon{width:30px!important;height:30px!important}
}


/* =========================================================
   V23 — BARRA UNIFICADA + TARJETAS HORIZONTALES EN PC
   ========================================================= */

/* La barra del perfil usa exactamente el mismo componente visual que el inicio. */
.profile-page .topbar .nav-wrap{position:relative;justify-content:flex-start}
.profile-page .topbar .cosmic-nav{margin:0!important}

/* PC: las tarjetas pasan a formato apaisado, igual que la experiencia móvil. */
@media(min-width:901px){
  .collection-body .series-grid{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }

  .collection-body .series-card{
    display:grid!important;
    grid-template-columns:minmax(220px,27%) minmax(0,1fr)!important;
    grid-template-rows:36px minmax(300px,1fr)!important;
    min-height:390px!important;
    border-radius:15px!important;
  }

  .collection-body .series-card .card-topline{
    grid-column:1/-1!important;
    grid-row:1!important;
  }

  .collection-body .series-card .cover-wrap{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    min-height:0!important;
    border-right:1px solid rgba(180,109,246,.13)!important;
  }

  .collection-body .series-card .cover{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .collection-body .series-card .card-body{
    grid-column:2!important;
    grid-row:2!important;
    min-width:0!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:30px 34px!important;
  }

  .collection-body .series-card .title-line{gap:20px!important}
  .collection-body .series-card .card-body h3{
    max-width:720px!important;
    font-size:clamp(22px,2.2vw,34px)!important;
    line-height:1.12!important;
  }
  .collection-body .series-card .synopsis{
    max-width:700px!important;
    margin-top:15px!important;
    font-size:12px!important;
  }
  .collection-body .series-card .card-footer{
    margin-top:24px!important;
    max-width:680px!important;
  }

  .collection-body .series-card .save-series-button{
    flex:0 0 34px!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }

  .collection-body .series-card .save-icon,
  .collection-body .series-card .save-icon svg{width:15px!important;height:15px!important}
}

/* Tablet mantiene el formato apaisado sin hacer la portada excesiva. */
@media(min-width:621px) and (max-width:900px){
  .collection-body .series-grid{grid-template-columns:1fr!important;gap:18px!important}
  .collection-body .series-card{display:grid!important;grid-template-columns:34% 66%!important;grid-template-rows:36px minmax(250px,1fr)!important;min-height:320px!important;border-radius:15px!important}
  .collection-body .series-card .card-topline{grid-column:1/-1!important;grid-row:1!important}
  .collection-body .series-card .cover-wrap{grid-column:1!important;grid-row:2!important;height:100%!important;aspect-ratio:auto!important;border-right:1px solid rgba(180,109,246,.13)!important}
  .collection-body .series-card .card-body{grid-column:2!important;grid-row:2!important;min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:22px!important}
}

/* Perfil: elimina cualquier rastro del antiguo menú .profile-nav. */
.profile-page .profile-nav,.profile-page .nav-orbit{all:unset}


/* =========================================================
   V24 — TARJETAS DE MANHWAS APASADAS EN PC
   ========================================================= */
@media (min-width: 901px){
  .collection-body .series-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px!important;
    width:100%!important;
    min-width:0!important;
  }

  .collection-body .series-card{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr)!important;
    grid-template-rows:34px minmax(270px,1fr)!important;
    width:100%!important;
    min-width:0!important;
    min-height:304px!important;
    height:auto!important;
    overflow:hidden!important;
  }

  .collection-body .series-card .card-topline{
    grid-column:1 / -1!important;
    grid-row:1!important;
    height:34px!important;
  }

  .collection-body .series-card .cover-wrap{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:100%!important;
    min-height:270px!important;
    aspect-ratio:auto!important;
    border-right:1px solid rgba(180,109,246,.13)!important;
  }

  .collection-body .series-card .cover{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .collection-body .series-card .card-body{
    grid-column:2!important;
    grid-row:2!important;
    width:auto!important;
    min-width:0!important;
    min-height:270px!important;
    padding:28px 30px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  .collection-body .series-card .title-line{
    width:100%!important;
    min-width:0!important;
    gap:16px!important;
  }

  .collection-body .series-card .title-line > div{
    min-width:0!important;
  }

  .collection-body .series-card .card-body h3{
    max-width:none!important;
    font-size:clamp(20px,2vw,30px)!important;
    line-height:1.15!important;
  }

  .collection-body .series-card .synopsis{
    max-width:620px!important;
    margin-top:13px!important;
    font-size:11px!important;
  }

  .collection-body .series-card .card-footer{
    width:100%!important;
    max-width:620px!important;
    margin-top:20px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }

  .collection-body .series-card .chapter-main-button{
    flex:1 1 auto!important;
    min-width:120px!important;
  }

  .collection-body .series-card .chapter-new-badge{
    flex:0 0 auto!important;
  }

  .collection-body .series-card .save-series-button{
    flex:0 0 34px!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    border-radius:9px!important;
  }

  .collection-body .series-card .save-series-button .save-label{
    display:none!important;
  }

  .collection-body .series-card .save-series-button .save-icon,
  .collection-body .series-card .save-series-button .save-icon svg{
    width:15px!important;
    height:15px!important;
  }
}

@media (min-width: 901px) and (max-width: 1050px){
  .collection-body .series-card{grid-template-columns:185px minmax(0,1fr)!important}
  .collection-body .series-card .cover-wrap{min-height:250px!important}
  .collection-body .series-card .card-body{min-height:250px!important;padding:23px!important}
  .collection-body .series-card .card-body h3{font-size:21px!important}
}

/* =========================================================
   V25 — PERFIL / CENTRO DE USUARIO
   Rediseño completo del área de perfil sin alterar el catálogo.
   ========================================================= */
.profile-v25{--profile-purple:#b873ff;--profile-purple-soft:#8e58c4;--profile-panel:rgba(15,11,22,.78);--profile-line:rgba(177,111,247,.18);min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(105,42,185,.15),transparent 34%),radial-gradient(circle at 88% 40%,rgba(108,40,170,.07),transparent 25%),#07060b;color:#f8f3ff;overflow-x:hidden}
.profile-dashboard{width:min(1120px,calc(100% - 44px));margin:auto;padding-bottom:90px}
.profile-hero-v25{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;padding:72px 0 48px;border-bottom:1px solid var(--profile-line);position:relative}
.profile-hero-v25:before{content:"";position:absolute;left:8%;right:18%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(188,117,255,.55),transparent);filter:blur(.3px)}
.profile-identity-card{display:flex;align-items:center;gap:30px;min-width:0}
.profile-avatar-wrap-v25{position:relative;flex:0 0 auto;width:142px;height:142px;display:grid;place-items:center}
.avatar-aura{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(194,124,255,.48);box-shadow:0 0 26px rgba(144,62,229,.24),inset 0 0 20px rgba(163,86,235,.09);animation:profileAura 5s ease-in-out infinite}
.avatar-aura:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(175,104,246,.10)}
.profile-avatar-v25{position:relative;width:118px;height:118px;object-fit:cover;border-radius:50%;border:1px solid rgba(210,161,255,.7);padding:4px;background:#0d0913;box-shadow:0 0 35px rgba(137,56,222,.22)}
.avatar-form-v25{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:3}.avatar-form-v25 label{display:flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid rgba(189,122,255,.42);border-radius:8px;background:rgba(17,11,26,.94);color:#c9b2db;font:700 7px 'DM Sans',sans-serif;letter-spacing:1px;white-space:nowrap;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.28);transition:.25s}.avatar-form-v25 label:hover{color:#fff;border-color:rgba(205,146,255,.75);box-shadow:0 0 18px rgba(158,76,232,.25)}.avatar-form-v25 svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.avatar-form-v25 input{display:none}
.profile-identity-copy{min-width:0}.profile-kicker-row{display:flex;align-items:center;gap:8px;color:#a979d2;font:700 8px 'DM Mono',monospace;letter-spacing:2.5px}.profile-kicker-row b{font-weight:500;color:#5f526b;font-size:7px}.kicker-line{width:25px;height:1px;background:linear-gradient(90deg,#b76aff,transparent);box-shadow:0 0 9px rgba(181,101,255,.5)}
.profile-identity-copy h1{font:600 clamp(38px,5vw,62px)/1 Cinzel,serif;letter-spacing:-.5px;margin:12px 0 4px;background:linear-gradient(120deg,#fff,#cda7eb 60%,#9b64ca);-webkit-background-clip:text;background-clip:text;color:transparent}.profile-handle{font:700 9px 'DM Mono',monospace;color:#725d80;letter-spacing:1.8px;margin:0 0 10px}.profile-bio{max-width:620px;color:#93889c;font-size:12px;line-height:1.7;margin:0}.profile-meta{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:15px;color:#75677f;font:700 7px 'DM Mono',monospace;letter-spacing:1.3px}.profile-meta i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#b36cff;box-shadow:0 0 8px #a85bff;margin-right:6px}
.profile-hero-stat{min-width:135px;padding:14px 0 14px 26px;border-left:1px solid var(--profile-line);text-align:right}.profile-hero-stat span,.profile-hero-stat small{display:block;color:#665770;font:700 7px 'DM Mono',monospace;letter-spacing:2px}.profile-hero-stat strong{display:block;font:400 43px Cinzel,serif;color:#e6d6f0;margin:4px 0;text-shadow:0 0 24px rgba(185,115,255,.15)}
.profile-workspace{display:grid;grid-template-columns:265px 1fr;gap:34px;padding-top:42px}.profile-sidebar{padding-right:22px;border-right:1px solid var(--profile-line);min-height:560px}.sidebar-label{display:flex;justify-content:space-between;color:#715f7e;font:700 7px 'DM Mono',monospace;letter-spacing:1.8px;margin-bottom:15px}.sidebar-label b{color:#4e4458;font-weight:500}.profile-menu{display:grid;gap:7px}.profile-menu-item{position:relative;display:grid;grid-template-columns:35px 1fr 24px;align-items:center;gap:8px;padding:11px 10px;border:1px solid transparent;border-radius:12px;color:#82758d;text-decoration:none;transition:.28s ease;overflow:hidden}.profile-menu-item:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 50%,rgba(166,84,255,.15),transparent 58%);opacity:0;transition:.28s}.profile-menu-item:hover,.profile-menu-item.is-active{color:#d9c8e4;border-color:rgba(179,110,244,.20);background:rgba(143,70,197,.07);box-shadow:0 10px 28px rgba(0,0,0,.12)}.profile-menu-item:hover:before,.profile-menu-item.is-active:before{opacity:1}.menu-icon{position:relative;z-index:1;width:33px;height:33px;display:grid;place-items:center;border:1px solid rgba(182,115,246,.13);border-radius:9px;background:rgba(167,88,239,.045);color:#9870b5;transition:.28s}.menu-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.profile-menu-item:hover .menu-icon,.profile-menu-item.is-active .menu-icon{color:#cf9aff;border-color:rgba(191,123,255,.38);box-shadow:0 0 18px rgba(158,75,229,.15);transform:translateX(2px)}.profile-menu-item span:nth-child(2){position:relative;z-index:1;display:grid;gap:3px}.profile-menu-item b{font-size:10px;font-weight:700;letter-spacing:.2px}.profile-menu-item small{font-size:7px;color:#66596f}.profile-menu-item em{position:relative;z-index:1;font:700 7px 'DM Mono',monospace;color:#5c4f67;font-style:normal;text-align:right}.profile-menu-item.is-active em{color:#b676e8}.profile-logout-v25{display:flex;align-items:center;gap:9px;margin-top:25px;padding:12px 10px;color:#715f7e;text-decoration:none;font:700 7px 'DM Mono',monospace;letter-spacing:1.5px;border-top:1px solid rgba(177,111,247,.09);transition:.25s}.profile-logout-v25 span{color:#9b67c3}.profile-logout-v25:hover{color:#c49ae1}
.profile-content{min-width:0}.content-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}.content-heading h2{font:600 clamp(29px,4vw,43px)/1.05 Cinzel,serif;margin:11px 0 7px;color:#dfc8eb}.content-heading p{margin:0;color:#807487;font-size:11px}.heading-symbol{font-size:24px;color:#b66eff;text-shadow:0 0 20px rgba(176,93,255,.5);padding-bottom:8px}.content-count{padding-left:20px;border-left:1px solid var(--profile-line);text-align:right}.content-count strong{display:block;font:400 32px Cinzel,serif;color:#e4d2ef}.content-count span{font:700 6px 'DM Mono',monospace;letter-spacing:2px;color:#6a5975}
.profile-grid-cards,.activity-grid-v25,.preference-grid-v25,.security-grid-v25{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.profile-panel{position:relative;padding:20px;border:1px solid rgba(177,111,247,.16);border-radius:16px;background:linear-gradient(145deg,rgba(24,16,33,.78),rgba(10,8,14,.75));box-shadow:0 20px 50px rgba(0,0,0,.18);overflow:hidden}.profile-panel:before{content:"";position:absolute;right:-90px;top:-110px;width:230px;height:230px;border:1px solid rgba(188,119,255,.08);border-radius:50%;box-shadow:0 0 50px rgba(148,65,222,.07);pointer-events:none}.panel-top{display:flex;justify-content:space-between;color:#786482;font:700 7px 'DM Mono',monospace;letter-spacing:1.7px;padding-bottom:14px;border-bottom:1px solid rgba(177,111,247,.10)}.panel-top b{color:#5a4c63;font-weight:500}.profile-form-v25{display:grid;gap:15px;margin-top:18px}.profile-form-v25 label{display:grid;gap:7px;color:#9b8ca5;font:700 8px 'DM Sans',sans-serif;letter-spacing:1px}.profile-form-v25 input,.profile-form-v25 textarea{width:100%;box-sizing:border-box;border:1px solid rgba(174,109,241,.16);border-radius:10px;background:rgba(5,4,8,.72);color:#eee;padding:12px 13px;outline:none;font:400 11px 'DM Sans',sans-serif;transition:.25s}.profile-form-v25 textarea{min-height:105px;resize:vertical;line-height:1.55}.profile-form-v25 input:focus,.profile-form-v25 textarea:focus{border-color:rgba(190,124,255,.55);box-shadow:0 0 0 3px rgba(161,90,232,.08),0 0 25px rgba(121,45,192,.08)}.profile-form-v25 label small{color:#5f5268;font-size:7px;font-weight:400;margin-top:-3px}.profile-form-v25 button,.preference-save{border:1px solid rgba(192,126,255,.38);border-radius:10px;background:linear-gradient(135deg,rgba(123,57,184,.34),rgba(60,27,91,.25));color:#d9b8ed;padding:12px 13px;font:800 8px 'DM Sans',sans-serif;letter-spacing:1px;cursor:pointer;transition:.25s;text-align:left}.profile-form-v25 button span,.preference-save span{float:right}.profile-form-v25 button:hover,.preference-save:hover{border-color:rgba(210,154,255,.7);box-shadow:0 10px 28px rgba(112,45,176,.15);transform:translateY(-1px);color:#fff}
.quick-stat{display:flex;align-items:end;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(177,111,247,.09)}.quick-stat strong{font:400 31px Cinzel,serif;color:#ddc7e9}.quick-stat span{font-size:9px;color:#82758a}.quick-note{display:flex;gap:11px;margin-top:19px;padding:13px;border:1px solid rgba(177,111,247,.09);border-radius:10px;background:rgba(152,73,222,.035)}.quick-note span{color:#b56bff}.quick-note p{font-size:9px;line-height:1.6;color:#75697e;margin:0}
.profile-toast{margin-bottom:15px;padding:10px 12px;border:1px solid rgba(127,235,180,.18);border-radius:9px;background:rgba(46,137,94,.08);color:#9be1bd;font-size:10px;animation:profileToastIn .35s ease}.profile-toast.hide{opacity:0;transform:translateY(-5px);transition:.4s}
.saved-list-v25{display:grid;gap:12px}.saved-card-v25{display:grid;grid-template-columns:100px 1fr 42px;gap:16px;align-items:center;padding:11px;border:1px solid rgba(177,111,247,.14);border-radius:14px;background:rgba(255,255,255,.018);transition:.28s}.saved-card-v25:hover{transform:translateX(3px);border-color:rgba(190,125,255,.36);background:rgba(139,66,194,.045);box-shadow:0 12px 35px rgba(0,0,0,.2)}.saved-cover-v25{width:100px;height:125px;display:grid;place-items:center;border-radius:9px;overflow:hidden;background:#100c16;color:#a56bda;text-decoration:none}.saved-cover-v25 img{width:100%;height:100%;object-fit:cover;transition:.35s}.saved-card-v25:hover .saved-cover-v25 img{transform:scale(1.035)}.saved-info-v25{min-width:0}.saved-info-v25>span{font:700 7px 'DM Mono',monospace;letter-spacing:1.5px;color:#9f6dc3}.saved-info-v25 h3{font:600 clamp(15px,2vw,21px)/1.25 Cinzel,serif;color:#e1cceb;margin:7px 0 8px;max-width:560px}.saved-info-v25 small{display:block;color:#5f5368;font:700 6px 'DM Mono',monospace;letter-spacing:1px;margin-bottom:15px}.saved-info-v25>a{font:800 7px 'DM Sans',sans-serif;letter-spacing:1.2px;color:#b87ae9;text-decoration:none}.saved-info-v25>a:hover{color:#fff}.saved-arrow{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(183,115,248,.16);border-radius:10px;color:#8c5eb0;text-decoration:none;transition:.25s}.saved-arrow:hover{border-color:rgba(201,143,255,.5);color:#d9b1f4;box-shadow:0 0 18px rgba(151,66,218,.16)}
.saved-empty-v25{padding:70px 20px;text-align:center;border:1px dashed rgba(177,111,247,.18);border-radius:16px;background:rgba(255,255,255,.012)}.saved-empty-v25>span{font-size:28px;color:#b36cff;text-shadow:0 0 20px rgba(179,108,255,.5)}.saved-empty-v25 h3{font:600 23px Cinzel,serif;color:#d6c1e1;margin:12px 0 5px}.saved-empty-v25 p{font-size:10px;color:#766a80;margin-bottom:20px}.saved-empty-v25>a{display:inline-block;padding:11px 14px;border:1px solid rgba(186,119,250,.3);border-radius:9px;color:#c08ae8;text-decoration:none;font:800 7px 'DM Sans';letter-spacing:1px}
.activity-big{display:flex;flex-direction:column;justify-content:center;min-height:245px}.activity-icon{font-size:24px;color:#bd77ff;text-shadow:0 0 22px rgba(188,107,255,.5)}.activity-big strong{font:400 58px Cinzel,serif;color:#eadbf2;margin:4px 0}.activity-big h3{font:600 17px Cinzel,serif;color:#cfb7dd;margin:0 0 7px}.activity-big p{max-width:410px;color:#756a7d;font-size:10px;line-height:1.6;margin:0}.status-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid rgba(177,111,247,.08);color:#82758b;font-size:10px}.status-row b{color:#b87be4;font:700 7px 'DM Mono',monospace;letter-spacing:1px}.coming-panel{display:flex;align-items:center;gap:15px;margin-top:16px;padding:17px;border:1px dashed rgba(177,111,247,.13);border-radius:13px;background:rgba(158,77,221,.025)}.coming-panel>span{color:#a968d5}.coming-panel strong{display:block;color:#aa99b3;font:700 9px 'DM Sans'}.coming-panel p{margin:5px 0 0;color:#665a6e;font-size:9px}
.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:17px 0}.theme-choice{display:grid;gap:7px;text-align:left;padding:13px 11px;border:1px solid rgba(177,111,247,.12);border-radius:11px;background:rgba(5,4,8,.45);color:#95889e;cursor:pointer;transition:.25s}.theme-choice i{width:100%;height:30px;border-radius:7px;background:linear-gradient(135deg,#160d21,#8d48bf);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.theme-choice:nth-child(2) i{background:linear-gradient(135deg,#091321,#4169ae)}.theme-choice:nth-child(3) i{background:linear-gradient(135deg,#210e20,#b2579e)}.theme-choice span{font-size:9px;font-weight:700}.theme-choice small{font-size:7px;color:#62566b}.theme-choice:hover,.theme-choice.selected{border-color:rgba(195,133,255,.48);box-shadow:0 0 22px rgba(140,61,207,.10);color:#e0cee9}.preference-save{width:100%;text-align:left}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid rgba(177,111,247,.09)}.toggle-row strong{display:block;font-size:10px;color:#b8a9c1}.toggle-row small{display:block;font-size:8px;color:#65596d;margin-top:4px}.fake-toggle{width:42px;height:23px;border:1px solid rgba(177,111,247,.22);border-radius:30px;background:#100c15;padding:3px;cursor:pointer;transition:.25s}.fake-toggle i{display:block;width:15px;height:15px;border-radius:50%;background:#685775;transition:.25s}.fake-toggle.on{border-color:rgba(188,119,255,.5);background:rgba(143,65,197,.2);box-shadow:0 0 14px rgba(150,68,215,.12)}.fake-toggle.on i{transform:translateX(17px);background:#c083f4;box-shadow:0 0 9px rgba(192,123,255,.6)}.preference-note{font-size:8px;line-height:1.6;color:#62576a;margin:15px 0 0}.security-note-v25{display:flex;flex-direction:column;justify-content:center;min-height:310px}.security-lock{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(188,119,255,.2);border-radius:14px;color:#b675eb;box-shadow:0 0 25px rgba(142,55,209,.1)}.security-lock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}.security-note-v25 h3{font:600 18px Cinzel,serif;color:#d5c0df;margin:18px 0 7px}.security-note-v25>p{font-size:10px;line-height:1.65;color:#74687d;max-width:390px}.security-user{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid rgba(177,111,247,.09);font:700 7px 'DM Mono',monospace;letter-spacing:1px;color:#63566d}.security-user b{color:#a979c6}
@keyframes profileAura{50%{transform:scale(1.025);opacity:.82}100%{transform:none;opacity:1}}@keyframes profileToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.profile-workspace{grid-template-columns:1fr}.profile-sidebar{padding-right:0;border-right:0;border-bottom:1px solid var(--profile-line);padding-bottom:22px;min-height:0}.profile-menu{grid-template-columns:repeat(2,1fr)}.profile-logout-v25{display:none}.profile-grid-cards,.activity-grid-v25,.preference-grid-v25,.security-grid-v25{grid-template-columns:1fr}.profile-hero-v25{grid-template-columns:1fr}.profile-hero-stat{display:none}.profile-identity-card{align-items:flex-start}.theme-options{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.profile-dashboard{width:calc(100% - 26px)}.profile-hero-v25{padding:42px 0 34px}.profile-identity-card{gap:17px}.profile-avatar-wrap-v25{width:96px;height:96px}.profile-avatar-v25{width:82px;height:82px}.avatar-aura{inset:4px}.avatar-form-v25 label span{display:none}.avatar-form-v25 label{padding:6px}.profile-identity-copy h1{font-size:34px}.profile-meta{display:grid;gap:7px}.profile-menu{grid-template-columns:1fr}.profile-workspace{padding-top:28px;gap:25px}.content-heading{align-items:flex-start}.content-heading h2{font-size:29px}.saved-card-v25{grid-template-columns:76px 1fr 30px;gap:11px}.saved-cover-v25{width:76px;height:100px}.saved-info-v25 h3{font-size:14px}.saved-info-v25 small{font-size:5.5px}.saved-arrow{width:29px;height:29px}.theme-options{grid-template-columns:1fr}.profile-panel{padding:16px}}


/* =========================================================
   V35 — PERFIL: NOMBRE INTERACTIVO + AVATAR AMPLIADO
   El nombre del usuario comparte el lenguaje visual de
   “MANHWAS / DESTACADOS”, con respuesta a mouse y dedo.
   ========================================================= */
.profile-name-animated{
  position:relative;
  display:inline-block;
  color:#f0e4ff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-stroke:1.15px rgba(207,159,255,.58);
  text-shadow:
    0 0 1px rgba(255,255,255,.7),
    0 0 8px rgba(155,76,255,.22),
    0 0 22px rgba(155,76,255,.10);
  isolation:isolate;
}
.profile-name-animated .letter{
  display:inline-block;
  position:relative;
  color:#eee1ff;
  -webkit-text-stroke:1px rgba(202,148,255,.50);
  text-shadow:0 0 2px rgba(255,255,255,.45),0 0 8px rgba(151,72,255,.16);
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 85%;
  transition:transform .42s cubic-bezier(.2,.85,.25,1),color .3s ease,-webkit-text-stroke-color .3s ease,text-shadow .3s ease,filter .3s ease;
  will-change:transform;
}
.profile-name-animated .letter::after{
  content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;border-radius:50%;
  background:rgba(221,183,255,0);box-shadow:0 0 0 rgba(190,115,255,0);
  transform:translateX(-50%) scale(0);transition:all .35s ease;pointer-events:none;
}
.profile-name-animated .letter.is-hot,.profile-name-animated .letter:hover{
  color:#fff7ff;-webkit-text-stroke-color:rgba(224,181,255,.95);
  text-shadow:0 0 2px rgba(255,255,255,.95),0 0 9px rgba(205,143,255,.82),0 0 22px rgba(151,67,255,.52),0 0 38px rgba(122,46,220,.25);
  transform:translate3d(0,-7px,0) scale(1.075) rotateX(12deg);filter:brightness(1.15);z-index:5;
}
.profile-name-animated .letter.is-hot::after,.profile-name-animated .letter:hover::after{
  background:rgba(232,202,255,.95);box-shadow:0 0 9px rgba(201,133,255,.85);transform:translateX(-50%) scale(1);
}
.profile-avatar-wrap-v25{z-index:4}
.profile-avatar-v25{
  cursor:zoom-in;
  transform:translateZ(0) scale(1);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,filter .45s ease,border-color .35s ease;
  will-change:transform;
}
.profile-avatar-wrap-v25:hover .profile-avatar-v25,.profile-avatar-v25.is-expanded{
  transform:translateZ(0) scale(1.34);
  border-color:rgba(232,202,255,.95);
  box-shadow:0 0 0 7px rgba(115,52,173,.10),0 0 48px rgba(158,76,232,.42),0 18px 45px rgba(0,0,0,.42);
  filter:saturate(1.08) contrast(1.03) brightness(1.05);
  z-index:8;
}
.profile-avatar-wrap-v25:hover .avatar-aura{transform:scale(1.14);opacity:.72}
.profile-avatar-v25.is-expanded{cursor:zoom-out}
@media(max-width:620px){
  .profile-avatar-wrap-v25:hover .profile-avatar-v25{transform:translateZ(0) scale(1.16)}
  .profile-avatar-v25.is-expanded{transform:translateZ(0) scale(1.28)}
}


/* V25 — variaciones de color para Preferencias */
.profile-v25[data-theme="azul"]{--profile-purple:#79a9ff;--profile-purple-soft:#527bc7;background:radial-gradient(circle at 50% 0%,rgba(42,91,185,.16),transparent 34%),#07090e}
.profile-v25[data-theme="azul"] .profile-avatar-v25,.profile-v25[data-theme="azul"] .profile-panel,.profile-v25[data-theme="azul"] .saved-card-v25{border-color:rgba(121,169,255,.18)}
.profile-v25[data-theme="azul"] .profile-kicker-row,.profile-v25[data-theme="azul"] .profile-meta i,.profile-v25[data-theme="azul"] .heading-symbol{color:#79a9ff}
.profile-v25[data-theme="rosa"]{--profile-purple:#ff91d0;--profile-purple-soft:#c965a2;background:radial-gradient(circle at 50% 0%,rgba(190,61,143,.15),transparent 34%),#0b070b}
.profile-v25[data-theme="rosa"] .profile-avatar-v25,.profile-v25[data-theme="rosa"] .profile-panel,.profile-v25[data-theme="rosa"] .saved-card-v25{border-color:rgba(255,145,208,.18)}
.profile-v25[data-theme="rosa"] .profile-kicker-row,.profile-v25[data-theme="rosa"] .profile-meta i,.profile-v25[data-theme="rosa"] .heading-symbol{color:#ff91d0}



/* =========================================================
   V26 — TEMAS GLOBALES + LECTURA RECIENTE
   Los temas elegidos en Perfil también se aplican al catálogo.
   ========================================================= */
body[data-theme="azul"]{
  --purple:#79a9ff;
  --violet:#4169ae;
  --line:rgba(121,169,255,.22);
  --glass:rgba(8,12,22,.74);
}
body[data-theme="rosa"]{
  --purple:#ff91d0;
  --violet:#b2579e;
  --line:rgba(255,145,208,.22);
  --glass:rgba(20,8,18,.74);
}
body[data-theme="azul"] .collection-body .series-card,
body[data-theme="azul"] .popular-panel,
body[data-theme="azul"] .novel-status-top,
body[data-theme="azul"] .chapter-modal-box{border-color:rgba(121,169,255,.22)}
body[data-theme="rosa"] .collection-body .series-card,
body[data-theme="rosa"] .popular-panel,
body[data-theme="rosa"] .novel-status-top,
body[data-theme="rosa"] .chapter-modal-box{border-color:rgba(255,145,208,.22)}
body[data-theme="azul"] .collection-body .card-index,
body[data-theme="azul"] .collection-body .chapter-main-label,
body[data-theme="azul"] .collection-body .chapter-main-arrow,
body[data-theme="azul"] .collection-body .chapter-new-badge,
body[data-theme="azul"] .collection-body .save-series-button,
body[data-theme="azul"] .section-kicker,
body[data-theme="azul"] .section-title-animated,
body[data-theme="azul"] .popular-kicker,
body[data-theme="azul"] .popular-rank{color:#79a9ff}
body[data-theme="rosa"] .collection-body .card-index,
body[data-theme="rosa"] .collection-body .chapter-main-label,
body[data-theme="rosa"] .collection-body .chapter-main-arrow,
body[data-theme="rosa"] .collection-body .chapter-new-badge,
body[data-theme="rosa"] .collection-body .save-series-button,
body[data-theme="rosa"] .section-kicker,
body[data-theme="rosa"] .section-title-animated,
body[data-theme="rosa"] .popular-kicker,
body[data-theme="rosa"] .popular-rank{color:#ff91d0}
body[data-theme="azul"] .collection-body .series-card:hover{box-shadow:0 18px 45px rgba(43,96,185,.16)}
body[data-theme="rosa"] .collection-body .series-card:hover{box-shadow:0 18px 45px rgba(190,61,143,.15)}
body[data-theme="azul"] .collection-body .save-series-button:hover,
body[data-theme="azul"] .collection-body .save-series-button.is-saved{border-color:rgba(121,169,255,.58);box-shadow:0 0 24px rgba(75,126,225,.18)}
body[data-theme="rosa"] .collection-body .save-series-button:hover,
body[data-theme="rosa"] .collection-body .save-series-button.is-saved{border-color:rgba(255,145,208,.58);box-shadow:0 0 24px rgba(218,82,166,.18)}
body[data-theme="azul"] .search-box,
body[data-theme="azul"] .search-input-wrap{border-color:rgba(121,169,255,.3)}
body[data-theme="rosa"] .search-box,
body[data-theme="rosa"] .search-input-wrap{border-color:rgba(255,145,208,.3)}

/* Perfil: control explícito para restaurar el tema original. */
.theme-reset{width:100%;margin-top:8px;padding:10px 12px;border:1px solid rgba(177,111,247,.12);border-radius:10px;background:transparent;color:#6d6077;font:700 7px 'DM Sans',sans-serif;letter-spacing:1.2px;text-align:left;cursor:pointer;transition:.25s}
.theme-reset:hover{color:#c9b1d8;border-color:rgba(188,119,255,.3);background:rgba(153,69,216,.04)}

/* Actividad / lecturas recientes */
.recent-reading-panel{margin-top:16px}
.recent-reading-list{display:grid;gap:7px;margin-top:12px}
.recent-reading-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border:1px solid transparent;border-radius:11px;color:inherit;text-decoration:none;transition:.25s}
.recent-reading-item:hover{border-color:rgba(190,124,255,.18);background:rgba(146,66,210,.045);transform:translateX(3px)}
.recent-reading-cover{width:48px;height:60px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:#100c16;border:1px solid rgba(177,111,247,.14);color:#ad6ee2}
.recent-reading-cover img{width:100%;height:100%;object-fit:cover}
.recent-reading-info{min-width:0;display:grid;gap:4px}
.recent-reading-info strong{font:600 13px/1.25 Cinzel,serif;color:#d9c6e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-reading-info small{color:#83758c;font:700 7px 'DM Mono',monospace;letter-spacing:.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-reading-info em{font:800 6px 'DM Sans',sans-serif;letter-spacing:1.2px;color:#a86ed0;font-style:normal}
.recent-reading-time{align-self:start;padding:3px 5px;color:#5d5066;font:700 6px 'DM Mono',monospace;letter-spacing:.7px}
.recent-empty{display:flex;align-items:center;gap:13px;padding:22px 3px 4px;color:#6f6376}
.recent-empty>span{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(177,111,247,.15);border-radius:50%;color:#b16de6;box-shadow:0 0 20px rgba(145,60,215,.1)}
.recent-empty strong{display:block;color:#a893b0;font:600 12px Cinzel,serif}.recent-empty p{margin:4px 0 0;max-width:560px;font-size:8px;line-height:1.5}
body[data-theme="azul"] .recent-reading-item:hover{border-color:rgba(121,169,255,.2);background:rgba(70,111,196,.045)}
body[data-theme="rosa"] .recent-reading-item:hover{border-color:rgba(255,145,208,.2);background:rgba(194,72,151,.045)}
@media(max-width:620px){.recent-reading-item{grid-template-columns:44px minmax(0,1fr)}.recent-reading-cover{width:44px;height:56px}.recent-reading-time{display:none}.recent-reading-info strong{font-size:11px}}

/* =========================================================
   V28 — BIBLIOTECA VISUAL: PORTADAS EN CUADRÍCULA
   La biblioteca adopta una presentación tipo catálogo visual.
   No altera las tarjetas horizontales del inicio.
   ========================================================= */
.library-page .library-main{width:min(1180px,calc(100% - 48px));margin:0 auto;padding-bottom:100px}
.library-page .library-hero{padding:72px 0 34px}
.library-page .library-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:16px}
.library-page .library-heading-row h1{margin:0;font:600 clamp(34px,4vw,52px)/1.02 Cinzel,serif;color:#eadcff;letter-spacing:-.7px}
.library-page .library-heading-row h1 span{color:#806a91;font-size:.72em}
.library-page .library-heading-row p{max-width:650px;margin:12px 0 0;color:#978aa2;font-size:12px;line-height:1.7}
.library-page .library-count{min-width:95px;padding:0 0 2px 20px;border-left:1px solid rgba(183,117,255,.25);text-align:left}
.library-page .library-count strong{display:block;font:500 39px/1 Cinzel,serif;color:#eadcf6}
.library-page .library-count span{display:block;margin-top:8px;font:700 6px/1 Orbitron,monospace;letter-spacing:2.4px;color:#806d8d}
.library-page .library-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:32px;padding:13px 0;border-top:1px solid rgba(178,107,248,.13);border-bottom:1px solid rgba(178,107,248,.13)}
.library-page .library-search{position:relative;display:flex;align-items:center;width:min(390px,100%);height:42px;border:1px solid rgba(180,115,250,.20);border-radius:10px;background:rgba(13,9,19,.58);box-shadow:inset 0 0 22px rgba(133,57,196,.035);overflow:hidden}
.library-page .library-search svg{width:15px;height:15px;margin:0 11px;color:#a875d1;fill:none;stroke:currentColor;stroke-width:1.6}
.library-page .library-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#e9def1;font:500 10px 'Space Grotesk',sans-serif}
.library-page .library-search input::placeholder{color:#6f6377}
.library-page .library-search>span{padding-right:13px;color:#8d729d;font:700 11px Orbitron,monospace}
.library-page .library-filter{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.library-page .library-filter-btn{height:31px;padding:0 12px;border:1px solid rgba(180,115,250,.15);border-radius:999px;background:rgba(255,255,255,.018);color:#85758e;font:700 6px Orbitron,monospace;letter-spacing:1.1px;cursor:pointer;transition:.25s}
.library-page .library-filter-btn:hover,.library-page .library-filter-btn.active{color:#ead8fb;border-color:rgba(188,122,255,.48);background:rgba(145,63,218,.11);box-shadow:0 0 18px rgba(141,55,212,.12)}
.library-page .library-collection{padding-top:30px}
.library-page .library-collection-head{margin-bottom:20px!important;align-items:flex-end!important}
.library-page .library-collection-head h2{font-size:27px!important;margin:10px 0 5px!important}
.library-page .library-collection-head>div>p{font-size:10px!important}
.library-page .library-collection-head .collection-count{padding-left:18px}
.library-page .collection-body{display:block!important}
.library-page .library-series-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:17px!important;width:100%!important;min-width:0!important;align-items:stretch!important}
.library-page .library-series-card{position:relative!important;display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;aspect-ratio:.67!important;overflow:hidden!important;border-radius:12px!important;background:#0b0810!important;border:1px solid rgba(181,111,249,.18)!important;isolation:isolate!important;cursor:default!important;box-shadow:0 12px 35px rgba(0,0,0,.20)!important}
.library-page .library-series-card:hover{transform:translateY(-6px)!important;border-color:rgba(191,125,255,.48)!important;box-shadow:0 22px 48px rgba(74,24,121,.25),0 0 22px rgba(150,69,225,.08)!important}
.library-page .library-series-card:before{content:"";position:absolute!important;inset:0!important;z-index:5!important;background:linear-gradient(180deg,rgba(4,2,8,.20) 0%,transparent 35%,rgba(4,2,8,.10) 48%,rgba(4,2,8,.88) 100%)!important;opacity:1!important;pointer-events:none!important}
.library-page .library-series-card .card-topline{position:absolute!important;top:0!important;left:0!important;right:0!important;z-index:8!important;height:34px!important;padding:0 11px!important;border-bottom:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,rgba(7,5,12,.72),rgba(7,5,12,.10))!important;color:#a18cae!important;pointer-events:none!important}
.library-page .library-series-card .card-topline span:last-child{color:#c0a8c9!important;font-size:5px!important}
.library-page .library-series-card .cover-wrap{position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;border:0!important;background:#0a0710!important;display:block!important}
.library-page .library-series-card .cover{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transform:scale(1.002)!important;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .45s!important}
.library-page .library-series-card:hover .cover{transform:scale(1.045)!important;filter:saturate(1.08) contrast(1.02)!important}
.library-page .library-series-card .cover-shine{z-index:3!important;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.13) 48%,transparent 68%)!important;opacity:.55!important}
.library-page .library-series-card .cover-overlay{inset:auto 10px 92px!important;z-index:10!important;opacity:0!important;transform:translateY(8px)!important;padding:8px 9px!important;border-radius:7px!important;background:rgba(7,4,12,.72)!important;border:1px solid rgba(208,165,255,.25)!important}
.library-page .library-series-card:hover .cover-overlay{opacity:1!important;transform:none!important}
.library-page .library-series-card .card-body{position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:7!important;display:block!important;padding:52px 12px 12px!important;min-height:0!important;width:auto!important;overflow:hidden!important;background:linear-gradient(180deg,transparent,rgba(5,3,9,.72) 28%,rgba(5,3,9,.94) 100%)!important}
.library-page .library-series-card .title-line{display:block!important;min-width:0!important}
.library-page .library-series-card .title-line>div{min-width:0!important}
.library-page .library-series-card .card-index{margin:0 0 5px!important;font-size:5px!important;letter-spacing:1.7px!important;color:#a27ab9!important}
.library-page .library-series-card .card-body h3{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;margin:0!important;max-width:none!important;font-size:clamp(13px,1.15vw,18px)!important;line-height:1.13!important;letter-spacing:-.2px!important}
.library-page .library-series-card .status-orb{position:absolute!important;right:12px!important;bottom:58px!important;width:7px!important;height:7px!important}
.library-page .library-series-card .synopsis{display:none!important}
.library-page .library-series-card .card-footer{display:flex!important;align-items:center!important;gap:6px!important;margin-top:10px!important;width:100%!important;max-width:none!important;flex-wrap:nowrap!important}
.library-page .library-series-card .chapter-main-button{flex:1 1 auto!important;min-width:0!important;width:auto!important;height:30px!important;padding:0 22px 0 9px!important;border-radius:7px!important;gap:6px!important;background:rgba(113,54,157,.16)!important;border-color:rgba(194,136,255,.30)!important}
.library-page .library-series-card .chapter-main-label{font-size:5px!important;letter-spacing:1px!important}
.library-page .library-series-card .chapter-main-button strong{font-size:12px!important}
.library-page .library-series-card .chapter-main-arrow{right:7px!important;font-size:10px!important}
.library-page .library-series-card .chapter-new-badge{height:24px!important;padding:0 7px!important;font-size:5px!important;letter-spacing:1px!important;flex:0 0 auto!important}
.library-page .library-series-card .save-series-button{flex:0 0 30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border-radius:7px!important;background:rgba(9,6,14,.70)!important;border-color:rgba(193,139,255,.26)!important;backdrop-filter:blur(7px)!important}
.library-page .library-series-card .save-label{display:none!important}
.library-page .library-series-card .save-icon,.library-page .library-series-card .save-icon svg{width:14px!important;height:14px!important}
.library-page .library-series-card .save-series-button:hover{transform:translateY(-1px)!important;background:rgba(128,57,183,.20)!important;border-color:rgba(207,155,255,.55)!important;box-shadow:0 0 18px rgba(164,81,230,.20)!important}
.library-page .library-series-card .save-series-button.is-saved{background:rgba(139,61,198,.20)!important;border-color:rgba(206,151,255,.55)!important}
.library-page .library-series-card .no-chapters{font-size:6px!important}
.library-page .library-no-results{margin-top:18px}
.library-page .empty-card{grid-column:1/-1!important}

@media(max-width:1199px) and (min-width:901px){
  .library-page .library-series-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .library-page .library-series-card .card-body h3{font-size:16px!important}
}
@media(max-width:900px) and (min-width:621px){
  .library-page .library-main{width:min(100% - 34px,900px)}
  .library-page .library-series-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .library-page .library-heading-row{align-items:flex-start}
}
@media(max-width:620px){
  .library-page .library-main{width:calc(100% - 28px)}
  .library-page .library-hero{padding:46px 0 24px}
  .library-page .library-heading-row{display:block}
  .library-page .library-count{display:none}
  .library-page .library-tools{align-items:stretch;flex-direction:column}
  .library-page .library-search{width:100%}
  .library-page .library-filter{justify-content:flex-start}
  .library-page .library-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
  .library-page .library-series-card{aspect-ratio:.66!important;border-radius:10px!important}
  .library-page .library-series-card .card-body{padding:45px 9px 9px!important}
  .library-page .library-series-card .card-body h3{font-size:12px!important}
  .library-page .library-series-card .chapter-main-button{height:27px!important}
  .library-page .library-series-card .chapter-main-button strong{font-size:10px!important}
  .library-page .library-series-card .chapter-new-badge{height:22px!important;padding:0 5px!important}
  .library-page .library-series-card .save-series-button{width:27px!important;min-width:27px!important;height:27px!important}
}
@media(max-width:430px){
  .library-page .library-series-grid{grid-template-columns:1fr!important;gap:14px!important}
  .library-page .library-series-card{aspect-ratio:.72!important}
  .library-page .library-series-card .card-body{padding:55px 13px 13px!important}
  .library-page .library-series-card .card-body h3{font-size:16px!important}
}

/* =========================================================
   V34 — SISTEMA GLOBAL DE ANCHO + ESCALA RESPONSIVE
   Unifica la proporción del sitio completo sin forzar una
   anchura fija. Los módulos existentes conservan su diseño.
   ========================================================= */
:root{
  --site-max: 1440px;
  --site-gutter: clamp(14px, 2.5vw, 42px);
  --site-gutter-small: clamp(14px, 2vw, 30px);
}

html{font-size:16px;}
body{min-width:320px;}

/* Contenedor base compartido */
.topbar .nav-wrap,
main,
.profile-main,
.library-page .library-main{
  width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
  max-width:var(--site-max);
  margin-inline:auto;
}

/* Evita que un bloque interno fuerce el viewport */
main,
.profile-main,
.library-page .library-main,
.topbar .nav-wrap,
.hero-orbit,
.collection,
.library-page .library-hero,
.library-page .library-collection,
.profile-workspace,
.profile-hero-v25,
.profile-content{
  min-width:0;
}

img,video,svg,canvas{max-width:100%;}

/* Escala global suave en secciones que ya usan el contenedor */
.hero-orbit{width:100%;}
.collection{width:100%;}

/* Biblioteca y perfil dejan de tener límites más estrechos que el resto */
.profile-main{max-width:var(--site-max);}
.library-page .library-main{max-width:var(--site-max);}

/* Tipografía y espaciado que se ajustan al viewport */
.collection-head h2,
.library-page .library-heading-row h1,
.content-heading h2{font-size:clamp(29px,3.1vw,52px);}

/* Navegación: no se sale de la pantalla */
.topbar .nav-wrap{padding-inline:0;}
.topbar nav{min-width:0;}
.topbar nav a{white-space:nowrap;}

/* Tablet */
@media (max-width:1050px){
  :root{--site-gutter:clamp(18px,2.4vw,30px);}
}

/* Móvil */
@media (max-width:620px){
  :root{--site-gutter:14px;}
  .topbar .nav-wrap,
  main,
  .profile-main,
  .library-page .library-main{
    width:calc(100% - (var(--site-gutter) * 2));
  }
}

@media (max-width:380px){
  :root{--site-gutter:11px;}
  .topbar .nav-wrap,
  main,
  .profile-main,
  .library-page .library-main{
    width:calc(100% - (var(--site-gutter) * 2));
  }
}

/* =========================================================
   V37 — PERFIL: INTERACCIONES DESKTOP REFORZADAS
   ========================================================= */
.profile-hero-v25,
.profile-identity-card,
.profile-avatar-wrap-v25{overflow:visible!important}
.profile-avatar-wrap-v25{isolation:isolate;z-index:20}
.profile-avatar-v25{position:relative;z-index:21;display:block;transform:translate3d(0,0,0) scale(1);transform-origin:center center;transition:transform .48s cubic-bezier(.16,.8,.22,1),box-shadow .38s ease,filter .38s ease,border-color .3s ease;will-change:transform;backface-visibility:hidden}
@media (hover:hover) and (pointer:fine){
  .profile-avatar-wrap-v25:hover{z-index:100}
  .profile-avatar-wrap-v25:hover .profile-avatar-v25{transform:translate3d(0,-3px,0) scale(1.42)!important;box-shadow:0 0 0 7px rgba(115,52,173,.12),0 0 55px rgba(158,76,232,.48),0 22px 55px rgba(0,0,0,.48)!important;filter:saturate(1.12) contrast(1.04) brightness(1.08)}
  .profile-avatar-wrap-v25:hover .avatar-aura{transform:scale(1.22);opacity:.9;filter:blur(1px)}
}
.profile-avatar-v25.is-expanded{transform:translate3d(0,-3px,0) scale(1.42)!important;z-index:100;border-color:rgba(232,202,255,.98);box-shadow:0 0 0 7px rgba(115,52,173,.12),0 0 55px rgba(158,76,232,.48),0 22px 55px rgba(0,0,0,.48)!important;filter:saturate(1.12) contrast(1.04) brightness(1.08)}

.profile-name-animated{cursor:default;white-space:normal}
.profile-name-animated .letter{display:inline-block;position:relative;z-index:1;transform:translate3d(0,0,0) scale(1);transition:transform .36s cubic-bezier(.16,.82,.2,1),color .22s ease,text-shadow .22s ease,filter .22s ease;will-change:transform;backface-visibility:hidden}
.profile-name-animated .letter.is-hot{color:#fff8ff!important;transform:translate3d(0,-9px,0) scale(1.10)!important;filter:brightness(1.22);text-shadow:0 0 3px rgba(255,255,255,.95),0 0 12px rgba(205,143,255,.95),0 0 28px rgba(151,67,255,.62),0 0 45px rgba(122,46,220,.3);z-index:20}
@media (hover:hover) and (pointer:fine){.profile-name-animated .letter:hover{color:#fff8ff!important;transform:translate3d(0,-9px,0) scale(1.10)!important;filter:brightness(1.22);text-shadow:0 0 3px rgba(255,255,255,.95),0 0 12px rgba(205,143,255,.95),0 0 28px rgba(151,67,255,.62),0 0 45px rgba(122,46,220,.3);z-index:20}}


/* =========================================================
   V38 — PERFIL: INTERACCIÓN DE TÍTULOS + AVATAR CLICABLE
   Correcciones finales:
   1) El botón CAMBIAR queda siempre por encima del avatar ampliado.
   2) Los títulos con data-letter-effect animan letra por letra.
   3) El efecto funciona con ratón y con dedo.
   ========================================================= */

/* El botón nunca queda tapado por la foto ampliada */
.profile-avatar-wrap-v25{
  overflow:visible!important;
  isolation:isolate;
}
.avatar-form-v25{
  position:absolute!important;
  z-index:1000!important;
  pointer-events:auto!important;
}
.avatar-form-v25 label{
  position:relative;
  z-index:1001!important;
  pointer-events:auto!important;
  touch-action:manipulation;
}
.avatar-form-v25 input{
  pointer-events:auto;
}
.profile-avatar-v25{
  z-index:100!important;
}

/* Efecto reutilizable: cada letra crece y se eleva suavemente */
.profile-v25 [data-letter-effect]{
  overflow:visible!important;
}
.profile-v25 [data-letter-effect] .letter{
  display:inline-block;
  position:relative;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 85%;
  transition:
    transform .38s cubic-bezier(.16,.82,.2,1),
    color .24s ease,
    text-shadow .24s ease,
    filter .24s ease;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.profile-v25 [data-letter-effect] .letter.is-hot,
.profile-v25 [data-letter-effect] .letter:hover{
  transform:translate3d(0,-7px,0) scale(1.10);
  filter:brightness(1.16);
  text-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 9px rgba(205,143,255,.82),
    0 0 22px rgba(151,67,255,.52),
    0 0 38px rgba(122,46,220,.25);
  z-index:20;
}

/* En títulos que no usan el degradado del nombre, resaltamos el color */
.profile-v25 .content-heading [data-letter-effect] .letter.is-hot,
.profile-v25 .content-heading [data-letter-effect] .letter:hover{
  color:#fff7ff;
}

/* En móvil no dependemos de :hover: el JS marca la letra bajo el dedo */
@media (max-width:620px){
  .profile-v25 [data-letter-effect] .letter.is-hot{
    transform:translate3d(0,-6px,0) scale(1.10);
  }
}

/* Respeta la preferencia de reducir animaciones */



/* =========================================================
   V39 — AVATAR COMO BOTÓN + ONDA MAGNÉTICA EN TODAS LAS LETRAS
   ========================================================= */
.profile-avatar-wrap-v25{
  position:relative!important;
  width:142px;
  height:142px;
  overflow:visible!important;
  isolation:isolate;
  z-index:50!important;
}
.avatar-form-v25{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  z-index:60!important;
  margin:0!important;
  pointer-events:auto!important;
}
.avatar-upload-label{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  border-radius:50%!important;
  cursor:pointer!important;
  overflow:visible!important;
  box-shadow:none!important;
  color:inherit!important;
  touch-action:manipulation;
}
.avatar-upload-label .profile-avatar-v25{
  width:112px!important;
  height:112px!important;
  margin:0!important;
  display:block!important;
  position:relative!important;
  z-index:2!important;
  border-radius:50%!important;
  cursor:pointer!important;
  object-fit:cover;
  transform:translate3d(0,0,0) scale(1)!important;
  transition:transform .5s cubic-bezier(.16,.82,.2,1),box-shadow .4s ease,filter .4s ease,border-color .3s ease!important;
}
.avatar-upload-label::after{
  content:"";
  position:absolute;
  inset:15px;
  z-index:3;
  border-radius:50%;
  background:radial-gradient(circle,rgba(9,5,15,.06) 35%,rgba(9,5,15,.62) 100%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.avatar-upload-hint{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) scale(.92)!important;
  z-index:4!important;
  width:82px!important;
  text-align:center!important;
  color:rgba(255,245,255,.92)!important;
  font:700 6px/1.45 'DM Sans',sans-serif!important;
  letter-spacing:1px!important;
  white-space:normal!important;
  opacity:0!important;
  transition:opacity .25s ease,transform .3s ease!important;
  pointer-events:none!important;
}
.avatar-upload-label:hover .profile-avatar-v25,
.avatar-upload-label:focus-within .profile-avatar-v25{
  transform:translate3d(0,-3px,0) scale(1.16)!important;
  border-color:rgba(232,202,255,.98)!important;
  box-shadow:0 0 0 7px rgba(115,52,173,.12),0 0 48px rgba(158,76,232,.42),0 18px 45px rgba(0,0,0,.42)!important;
  filter:saturate(1.1) contrast(1.03) brightness(1.05);
}
.avatar-upload-label:hover::after,
.avatar-upload-label:focus-within::after{opacity:1}
.avatar-upload-label:hover .avatar-upload-hint,
.avatar-upload-label:focus-within .avatar-upload-hint{
  opacity:1;
  transform:translate(-50%,-50%) scale(1)!important;
}
.avatar-upload-label input[type="file"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  z-index:5!important;
  display:block!important;
}
@media(max-width:620px){
  .profile-avatar-wrap-v25{width:96px;height:96px}
  .avatar-upload-label .profile-avatar-v25{width:82px!important;height:82px!important}
  .avatar-upload-label::after{inset:8px}
  .avatar-upload-hint{width:62px!important;font-size:5px!important;letter-spacing:.65px!important}
  .avatar-upload-label:active .profile-avatar-v25{transform:scale(1.04)!important}
}

/* Onda magnética: la letra central crece; las vecinas reaccionan con menor fuerza. */
.profile-v25 [data-letter-effect]{
  overflow:visible!important;
}
.profile-v25 [data-letter-effect] .letter{
  display:inline-block!important;
  position:relative!important;
  transform:translate3d(0,0,0) scale(1) rotate(0deg)!important;
  transform-origin:50% 90%;
  transition:transform .46s cubic-bezier(.16,.86,.2,1),color .28s ease,text-shadow .28s ease,filter .28s ease!important;
  will-change:transform;
  backface-visibility:hidden;
}
.profile-v25 [data-letter-effect] .letter.is-hot{
  color:#fff8ff!important;
  transform:translate3d(0,-9px,0) scale(1.15) rotate(-1.5deg)!important;
  filter:brightness(1.22)!important;
  text-shadow:0 0 3px rgba(255,255,255,.95),0 0 12px rgba(205,143,255,.95),0 0 28px rgba(151,67,255,.62),0 0 45px rgba(122,46,220,.3)!important;
  z-index:20!important;
}
.profile-v25 [data-letter-effect] .letter.is-near-1{
  color:#f2e4ff!important;
  transform:translate3d(0,-5px,0) scale(1.07) rotate(1deg)!important;
  filter:brightness(1.1)!important;
  text-shadow:0 0 7px rgba(183,104,255,.52)!important;
  z-index:10!important;
}
.profile-v25 [data-letter-effect] .letter.is-near-2{
  transform:translate3d(0,-2px,0) scale(1.035)!important;
  filter:brightness(1.04)!important;
  text-shadow:0 0 5px rgba(165,91,255,.3)!important;
}
@media(max-width:620px){
  .profile-v25 [data-letter-effect] .letter.is-hot{transform:translate3d(0,-7px,0) scale(1.12) rotate(-1deg)!important}
  .profile-v25 [data-letter-effect] .letter.is-near-1{transform:translate3d(0,-4px,0) scale(1.06)!important}
  .profile-v25 [data-letter-effect] .letter.is-near-2{transform:translate3d(0,-1px,0) scale(1.025)!important}
}


/* Preferencias y estado de perfil */
.profile-flash{margin:20px 0 -5px;padding:11px 14px;border-radius:10px;font-size:10px;font-weight:700}
.profile-flash-error{border:1px solid rgba(255,112,140,.3);background:rgba(120,20,45,.13);color:#ffb2c3}
.profile-flash-ok{border:1px solid rgba(130,255,195,.2);background:rgba(20,100,65,.1);color:#a9edca}
.profile-status-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:6px}
.profile-level-card{display:grid;grid-template-columns:auto minmax(110px,260px) auto;align-items:center;gap:8px;width:min(100%,430px)}
.level-chip{font:800 7px 'DM Mono',monospace;letter-spacing:1px;color:#9d8ea8;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);white-space:nowrap}
.level-track{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.level-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rank-color,#a95cff),var(--rank-color-2,#e6cfff));box-shadow:0 0 12px var(--rank-color,#a95cff)}
.profile-level-card small{font:800 7px 'DM Mono',monospace;color:#70657a;white-space:nowrap}
@media(max-width:620px){.profile-level-card{grid-template-columns:auto 1fr auto;width:100%}}

/* =========================================================
   V36 — IDENTIDAD, RANGOS Y PERSONALIZACIÓN AVANZADA
   ========================================================= */
.profile-page{--user-comments-color:#A95CFF;--user-chapter-color:#C98AFF;--user-button-color:#7547E8;--user-link-color:#C99BFF}
.profile-name-animated{color:var(--rank-color,#f0e4ff)!important;text-shadow:0 0 2px rgba(255,255,255,.75),0 0 12px color-mix(in srgb,var(--rank-color,#a95cff),transparent 45%),0 0 32px color-mix(in srgb,var(--rank-color,#a95cff),transparent 78%);-webkit-text-stroke-color:color-mix(in srgb,var(--rank-color,#cfa0ff),transparent 25%)}
.profile-rank-badge{display:inline-flex;align-items:center;gap:6px;margin:7px 0 2px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--rank-color),transparent 48%);border-radius:999px;color:var(--rank-color-2);background:color-mix(in srgb,var(--rank-color),transparent 90%);font:800 7px 'DM Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;box-shadow:0 0 22px color-mix(in srgb,var(--rank-color),transparent 85%);animation:rankBadgeFloat 3s ease-in-out infinite}
.profile-rank-badge span{font-size:11px;filter:drop-shadow(0 0 6px var(--rank-color))}
.profile-level-line{display:flex;align-items:center;gap:8px;max-width:420px;margin-top:10px;color:#8f8098;font:800 7px 'DM Mono',monospace;letter-spacing:1px}.profile-level-line>div{height:4px;flex:1;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.profile-level-line>div i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rank-color,#a95cff),var(--rank-color-2,#e6cfff));box-shadow:0 0 12px var(--rank-color,#a95cff)}.profile-level-line small{font-size:7px;color:#6f6278;min-width:52px;text-align:right}
@keyframes rankBadgeFloat{50%{transform:translateY(-2px);box-shadow:0 0 28px color-mix(in srgb,var(--rank-color),transparent 78%)}}
@keyframes rankAura{50%{filter:brightness(1.25) drop-shadow(0 0 10px var(--rank-color))}}
@keyframes rankPulse{50%{transform:scale(1.035);box-shadow:0 0 32px color-mix(in srgb,var(--rank-color),transparent 68%)}}
@keyframes rankAurora{0%,100%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(25deg) brightness(1.2)}}
@keyframes rankOwner{0%,100%{box-shadow:0 0 18px color-mix(in srgb,var(--rank-color),transparent 70%)}50%{box-shadow:0 0 42px color-mix(in srgb,var(--rank-color),transparent 35%),inset 0 0 16px color-mix(in srgb,var(--rank-color-2),transparent 80%)}}
.profile-rank-badge.rank-anim-aura{animation:rankAura 2.2s ease-in-out infinite}.profile-rank-badge.rank-anim-pulso{animation:rankPulse 1.8s ease-in-out infinite}.profile-rank-badge.rank-anim-aurora{animation:rankAurora 3s ease-in-out infinite}.profile-rank-badge.rank-anim-dorado{animation:rankAura 2s ease-in-out infinite}.profile-rank-badge.rank-anim-owner{animation:rankOwner 2.4s ease-in-out infinite}.profile-rank-badge.rank-anim-ninguno{animation:none}
.identity-preview{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid color-mix(in srgb,var(--rank-color),transparent 78%);border-radius:12px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--rank-color),transparent 90%),transparent 55%),rgba(5,4,8,.4);margin-top:16px}.identity-avatar{width:48px;height:48px;border-radius:50%;padding:3px;border:1px solid var(--rank-color);box-shadow:0 0 22px color-mix(in srgb,var(--rank-color),transparent 70%)}.identity-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.identity-preview strong{display:block;font-size:12px}.identity-preview span{display:block;color:#786b81;font-size:8px;margin-top:4px}
.profile-select{min-width:105px;padding:7px 8px;border-radius:8px;border:1px solid rgba(177,111,247,.18);background:#0c0911;color:#ddd;font-size:9px;outline:none}.custom-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}.custom-color-grid label{display:grid;gap:6px;color:#81738c;font-size:7px;letter-spacing:.8px}.custom-color-grid input[type=color]{width:100%;height:34px;padding:2px;border:1px solid rgba(177,111,247,.16);border-radius:8px;background:#0c0911;cursor:pointer}.theme-options-expanded{grid-template-columns:repeat(4,1fr)}.theme-options-expanded .theme-choice i{height:34px}.profile-upload-form{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}.upload-button{display:inline-flex;align-items:center;padding:9px 11px;border-radius:9px;border:1px solid rgba(192,126,255,.35);background:rgba(123,57,184,.18);color:#d9b8ed;font:800 8px 'DM Sans',sans-serif;letter-spacing:1px;cursor:pointer}.upload-button input{display:none}.profile-upload-form small{color:#62566b;font-size:7px}.banner-preview,.reader-bg-preview{height:100px;border-radius:10px;overflow:hidden;border:1px solid rgba(177,111,247,.15);background:#09070d;margin-top:15px}.banner-preview img,.reader-bg-preview img{width:100%;height:100%;object-fit:cover}.upload-empty{margin-top:15px;padding:20px;border:1px dashed rgba(177,111,247,.16);border-radius:10px;color:#75687f;font-size:9px;line-height:1.6}.range-row{margin-top:14px}.range-row label{display:flex;justify-content:space-between;color:#80738a;font-size:8px}.range-row output{color:#b89acb}.range-row input{accent-color:var(--profile-purple,#a95cff);width:100%}.quick-rank{margin-top:15px;padding-top:13px;border-top:1px solid rgba(177,111,247,.08)}.quick-rank span,.quick-rank small{display:block;color:#63566d;font:700 7px 'DM Mono',monospace;letter-spacing:1px}.quick-rank strong{display:block;margin:5px 0;color:#cda9e7;font-size:12px}.quick-rank small{font-size:7px;color:#81748a}
body[data-theme="celeste"]{--purple:#63cfff;--violet:#318db7;--line:rgba(99,207,255,.22);--glass:rgba(6,17,25,.76)}
body[data-theme="esmeralda"]{--purple:#53d8a0;--violet:#268e67;--line:rgba(83,216,160,.22);--glass:rgba(5,18,14,.76)}
body[data-theme="carmesí"]{--purple:#ff718f;--violet:#ad3d59;--line:rgba(255,113,143,.22);--glass:rgba(23,7,12,.76)}
body[data-theme="ambar"]{--purple:#f1bd55;--violet:#a96d1e;--line:rgba(241,189,85,.22);--glass:rgba(20,12,5,.76)}
body[data-theme="glacial"]{--purple:#8ce8f5;--violet:#4c9ba8;--line:rgba(140,232,245,.22);--glass:rgba(6,16,20,.76)}
.profile-v25[data-theme="celeste"]{--profile-purple:#63cfff;--profile-purple-soft:#318db7;background:radial-gradient(circle at 50% 0%,rgba(44,166,220,.16),transparent 34%),#070b0e}
.profile-v25[data-theme="esmeralda"]{--profile-purple:#53d8a0;--profile-purple-soft:#268e67;background:radial-gradient(circle at 50% 0%,rgba(35,170,116,.15),transparent 34%),#060b09}
.profile-v25[data-theme="carmesí"]{--profile-purple:#ff718f;--profile-purple-soft:#ad3d59;background:radial-gradient(circle at 50% 0%,rgba(190,61,82,.15),transparent 34%),#0b0709}
.profile-v25[data-theme="ambar"]{--profile-purple:#f1bd55;--profile-purple-soft:#a96d1e;background:radial-gradient(circle at 50% 0%,rgba(210,145,42,.15),transparent 34%),#0c0906}
.profile-v25[data-theme="glacial"]{--profile-purple:#8ce8f5;--profile-purple-soft:#4c9ba8;background:radial-gradient(circle at 50% 0%,rgba(73,183,201,.15),transparent 34%),#060b0e}
@media(max-width:900px){.theme-options-expanded{grid-template-columns:repeat(2,1fr)}.custom-color-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.theme-options-expanded{grid-template-columns:1fr}.custom-color-grid{grid-template-columns:1fr 1fr}.profile-level-line{max-width:100%}}

/* V40 — Comentarios: identidad limpia, rango y nivel ordenados. */
.comentario-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.comentario-identidad{min-width:0;display:flex;flex-direction:column;gap:5px}
.comentario-autor-nombre{display:block;font-weight:800;font-size:12px;line-height:1.2;color:var(--comment-name-color,var(--rank-color,#eee7f2));text-shadow:0 0 3px rgba(255,255,255,.2),0 0 12px color-mix(in srgb,var(--comment-name-color,var(--rank-color,#a95cff)),transparent 68%)}
.comentario-insignias{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.comentario-rango-badge,.comentario-nivel-badge,.comentario-pin,.comentario-contexto{display:inline-flex;align-items:center;gap:4px;min-height:19px;padding:3px 7px;border-radius:999px;white-space:nowrap}
.comentario-nivel-badge{order:1;border:1px solid color-mix(in srgb,var(--rank-color,#a95cff),transparent 72%);background:rgba(255,255,255,.03);color:#a99caf;font:800 7px 'DM Mono',monospace;letter-spacing:.6px}
.comentario-rango-badge{order:2;border:1px solid color-mix(in srgb,var(--rank-color,#a95cff),transparent 55%);background:linear-gradient(135deg,color-mix(in srgb,var(--rank-color,#a95cff),transparent 88%),rgba(255,255,255,.02));color:var(--rank-color-2,#d9b8ed);box-shadow:0 0 14px color-mix(in srgb,var(--rank-color,#a95cff),transparent 88%);font:800 7px 'DM Mono',monospace;letter-spacing:.6px;text-transform:uppercase}
.comentario-rango-icon{font-size:10px;color:var(--rank-color,#a95cff);filter:drop-shadow(0 0 5px var(--rank-color,#a95cff))}
.comentario-pin{order:3;border:1px solid rgba(232,192,255,.18);background:rgba(168,91,255,.08);color:#c7a4d8;font-size:7px;font-weight:800}
.comentario-contexto{order:4;border:1px solid rgba(181,103,255,.13);background:rgba(168,91,255,.07);color:#bca1d2;text-decoration:none;font-size:7px;font-weight:800}
.comentario-contexto:hover{color:#fff;border-color:rgba(181,103,255,.35)}
.comentario-contexto-general{color:#91809a}
.comentario-fecha{font-size:9px;color:#71667a;white-space:nowrap;padding-top:1px}
.comentario-editado{color:#665c6f}
.comentario-texto{font-size:12.5px;line-height:1.6;color:#ddd1e3;margin-top:9px;word-break:break-word;white-space:pre-line}
.comentario-eliminado .comentario-texto{color:#665c6f;font-style:italic}

/* Bloque de identidad: sin banner es solo un contenedor neutro; con banner, la imagen
   pasa a ser el fondo (atenuado + degradado) y el nombre/insignias quedan encima. */
.comentario-identidad-bloque{border-radius:11px}
.comentario-identidad-bloque.con-banner{position:relative;margin:0 0 11px;padding:16px 12px 10px;border-radius:11px;overflow:hidden;border:1px solid color-mix(in srgb,var(--rank-color,#a95cff),transparent 78%);box-shadow:0 8px 25px rgba(0,0,0,.16)}
.comentario-identidad-bloque.con-banner:before{content:"";position:absolute;inset:0;background-image:var(--banner-img);background-size:cover;background-position:center;opacity:.38;transition:opacity .4s ease;z-index:0}
.comentario-identidad-bloque.con-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,7,13,.25) 0%,rgba(9,7,13,.86) 100%);z-index:0}
.comentario:hover .comentario-identidad-bloque.con-banner:before{opacity:.52}
.comentario-identidad-bloque.con-banner .comentario-cabecera{position:relative;z-index:1}
@media(max-width:560px){.comentario-identidad-bloque.con-banner{padding:13px 10px 9px}.comentario-cabecera{gap:7px}.comentario-fecha{width:100%;padding-top:0}.comentario-insignias{gap:4px}.comentario-rango-badge,.comentario-nivel-badge,.comentario-pin,.comentario-contexto{min-height:18px;padding:3px 6px;font-size:6px}.comentario-rango-icon{font-size:9px}}


/* Efectos del nombre elegibles desde preferencias */
.comentario-nombre-brillo .comentario-autor-nombre{animation:commentNameGlow 2.8s ease-in-out infinite}
.comentario-nombre-aura .comentario-autor-nombre{animation:commentNameAura 2.2s ease-in-out infinite}
.comentario-nombre-pulso .comentario-autor-nombre{animation:commentNamePulse 1.8s ease-in-out infinite}
.comentario-nombre-ninguno .comentario-autor-nombre{animation:none}
@keyframes commentNameGlow{50%{text-shadow:0 0 4px #fff,0 0 15px color-mix(in srgb,var(--comment-name-color,var(--rank-color,#a95cff)),transparent 30%),0 0 28px color-mix(in srgb,var(--comment-name-color,var(--rank-color,#a95cff)),transparent 70%)}}
@keyframes commentNameAura{50%{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--comment-name-color,var(--rank-color,#a95cff)),transparent 35%))}}
@keyframes commentNamePulse{50%{transform:scale(1.015);transform-origin:left center}}
.profile-v25.effect-brillo .profile-name-animated{animation:profileNameGlow 2.8s ease-in-out infinite}
.profile-v25.effect-aura .profile-name-animated{animation:profileNameAura 2.2s ease-in-out infinite}
.profile-v25.effect-pulso .profile-name-animated{animation:profileNamePulse 1.8s ease-in-out infinite}
.profile-v25.effect-ninguno .profile-name-animated{animation:none}
@keyframes profileNameGlow{50%{text-shadow:0 0 4px #fff,0 0 16px color-mix(in srgb,var(--rank-color,#a95cff),transparent 30%),0 0 35px color-mix(in srgb,var(--rank-color,#a95cff),transparent 70%)}}
@keyframes profileNameAura{50%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--rank-color,#a95cff),transparent 30%))}}
@keyframes profileNamePulse{50%{transform:scale(1.018);transform-origin:left center}}


/* Personalización por cuenta, sincronizada desde cookies al iniciar la web. */
body.user-personalized{--purple:var(--user-button-color,#7547E8)}
body.user-personalized .comment-submit,body.user-personalized .chapter-main-button{border-color:var(--user-button-color,#7547E8)!important;box-shadow:0 0 12px color-mix(in srgb,var(--user-button-color,#7547E8),transparent 58%),inset 0 0 18px rgba(138,54,211,.06)!important}
body.user-personalized .comment-submit:hover:not(:disabled),body.user-personalized .chapter-main-button:hover{border-color:color-mix(in srgb,var(--user-button-color,#7547E8),white 22%)!important;box-shadow:0 0 22px color-mix(in srgb,var(--user-button-color,#7547E8),transparent 32%),0 10px 26px rgba(0,0,0,.22)!important}
body.user-personalized .comment-form textarea:focus,body.user-personalized .modal-chapter.is-current{border-color:var(--user-comments-color,#A95CFF)!important}.user-personalized .comentario-like:hover{color:var(--user-comments-color,#A95CFF)!important}.user-personalized .section-kicker,.user-personalized .reader-kicker{color:var(--user-chapter-color,#C98AFF)!important}.user-personalized a{--user-link:var(--user-link-color,#C99BFF)}


/* ---------- COMENTARIOS V2 / identidad completa ---------- */
.comentarios-lista .comentario{position:relative;align-items:flex-start;gap:12px}
.comentarios-lista .comentario-avatar{position:relative;z-index:3;width:42px;height:42px;border-color:color-mix(in srgb,var(--rank-color,#A95CFF),transparent 35%);box-shadow:0 0 0 3px rgba(7,5,11,.72),0 0 18px color-mix(in srgb,var(--rank-color,#A95CFF),transparent 72%)}
.comentarios-lista .comentario-respuesta .comentario-avatar{width:32px;height:32px}
.comentarios-lista .comentario-cuerpo{position:relative;min-width:0}
.comentarios-lista .comentario-con-banner .comentario-cuerpo{overflow:hidden;isolation:isolate;min-height:158px;padding:18px 18px 14px;border:1px solid color-mix(in srgb,var(--rank-color,#A95CFF),transparent 68%);border-radius:14px;background:#0b0710;box-shadow:0 14px 42px rgba(0,0,0,.28),inset 0 0 35px rgba(0,0,0,.18)}
.comentarios-lista .comentario-con-banner .comentario-cuerpo:before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--banner-img);background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.001);opacity:.54;transition:transform .55s ease,opacity .35s ease,filter .35s ease}
.comentarios-lista .comentario-con-banner .comentario-cuerpo:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,5,11,.48) 0%,rgba(7,5,11,.36) 45%,rgba(7,5,11,.72) 100%),linear-gradient(180deg,rgba(7,5,11,.16) 0%,rgba(7,5,11,.82) 100%);pointer-events:none}
.comentarios-lista .comentario-con-banner:hover .comentario-cuerpo:before{opacity:.66;transform:scale(1.025)}
.comentarios-lista .comentario-con-banner .comentario-identidad-bloque{position:relative;z-index:2;margin:0 0 9px;padding:0;background:none;border:0;border-radius:0}
.comentarios-lista .comentario-con-banner .comentario-texto{position:relative;z-index:2;margin-top:8px;color:#f1eaf5;text-shadow:0 1px 3px rgba(0,0,0,.65);max-width:900px}
.comentarios-lista .comentario-con-banner .comentario-acciones{position:relative;z-index:2}
.comentarios-lista .comentario-autor-nombre{font-weight:850;font-size:13px;line-height:1.25;color:var(--comment-name-color,#A95CFF);text-shadow:0 0 3px rgba(255,255,255,.22),0 0 14px color-mix(in srgb,var(--comment-name-color,#A95CFF),transparent 56%)}
.comentarios-lista .comentario-insignias{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.comentarios-lista .comentario-rango-badge,.comentarios-lista .comentario-nivel-badge,.comentarios-lista .comentario-pin,.comentarios-lista .comentario-contexto{display:inline-flex;align-items:center;gap:4px;min-height:20px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.comentarios-lista .comentario-nivel-badge{border:1px solid color-mix(in srgb,var(--rank-color,#A95CFF),transparent 62%);background:rgba(8,5,13,.48);color:#ddd2e4;font:800 7px 'DM Mono',monospace;letter-spacing:.7px}
.comentarios-lista .comentario-rango-badge{border:1px solid color-mix(in srgb,var(--rank-color,#A95CFF),transparent 32%);background:linear-gradient(135deg,color-mix(in srgb,var(--rank-color,#A95CFF),transparent 78%),rgba(8,5,13,.58));color:var(--rank-color-2,#D9B7FF);box-shadow:0 0 18px color-mix(in srgb,var(--rank-color,#A95CFF),transparent 82%);font:850 7px 'DM Mono',monospace;letter-spacing:.8px;text-transform:uppercase}
.comentarios-lista .comentario-rango-icon{font-size:11px;color:var(--rank-color,#A95CFF);filter:drop-shadow(0 0 6px var(--rank-color,#A95CFF))}
.comentarios-lista .comentario-fecha{position:relative;z-index:2;font-size:9px;color:#c1b4c8;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.comentarios-lista .comentario-identidad{position:relative;z-index:2}
.comentarios-lista .comentario-nombre-aurora .comentario-autor-nombre{animation:commentNameAurora 2.4s ease-in-out infinite}
.comentarios-lista .comentario-nombre-dorado .comentario-autor-nombre{animation:commentNameGold 2.2s ease-in-out infinite}
.comentarios-lista .comentario-nombre-owner .comentario-autor-nombre{animation:commentNameOwner 1.8s ease-in-out infinite}
@keyframes commentNameAurora{0%,100%{text-shadow:0 0 4px #fff,0 0 12px color-mix(in srgb,var(--comment-name-color,#46D6FF),transparent 38%),0 0 24px color-mix(in srgb,var(--comment-name-color,#46D6FF),transparent 72%)}50%{filter:hue-rotate(18deg);text-shadow:0 0 5px #fff,0 0 17px color-mix(in srgb,var(--comment-name-color,#46D6FF),transparent 20%),0 0 34px color-mix(in srgb,var(--comment-name-color,#46D6FF),transparent 62%)}}
@keyframes commentNameGold{50%{text-shadow:0 0 5px #fff,0 0 17px color-mix(in srgb,var(--comment-name-color,#FFC94A),transparent 20%),0 0 30px color-mix(in srgb,var(--comment-name-color,#FFC94A),transparent 58%)}}
@keyframes commentNameOwner{50%{filter:brightness(1.18);text-shadow:0 0 6px #fff,0 0 20px color-mix(in srgb,var(--comment-name-color,#F2D9FF),transparent 15%),0 0 38px color-mix(in srgb,var(--comment-name-color,#F2D9FF),transparent 48%)}}
.comentarios-lista .comentario-respuesta .comentario-cuerpo{padding-left:14px}
@media(max-width:650px){.comentarios-lista .comentario-con-banner .comentario-cuerpo{min-height:145px;padding:15px 13px 12px}.comentarios-lista .comentario-avatar{width:36px;height:36px}.comentarios-lista .comentario-respuesta .comentario-avatar{width:29px;height:29px}.comentarios-lista .comentario-con-banner .comentario-texto{font-size:12px}}
/* Perfil público / funciones sociales */
.comentario-perfil-link{color:inherit;text-decoration:none;cursor:pointer}.comentario-avatar-link{display:block;width:48px;height:48px;flex:0 0 auto;border-radius:50%;overflow:hidden}.comentario-avatar-link .comentario-avatar{width:100%;height:100%;transition:transform .25s ease}.comentario-avatar-link:hover .comentario-avatar{transform:scale(1.08)}.comentario-autor-nombre:hover{text-decoration:underline;text-decoration-color:var(--comment-name-color,#A95CFF);text-underline-offset:4px}
.public-profile-main{max-width:1100px;margin:0 auto;padding:42px 18px 80px}.public-profile-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(145deg,#17101f,#0c0911);box-shadow:0 28px 70px rgba(0,0,0,.35)}.public-profile-cover{height:170px;background:radial-gradient(circle at 20% 20%,var(--rank-color),transparent 28%),radial-gradient(circle at 80% 0,var(--rank-color-2),transparent 25%),linear-gradient(120deg,#100b18,#251330);opacity:.55}.public-profile-body{display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:center;padding:0 34px 26px;margin-top:-48px}.public-profile-avatar{width:112px;height:112px;border-radius:28px;object-fit:cover;border:4px solid #100b18;box-shadow:0 0 0 2px var(--rank-color)}.public-profile-kicker{font-size:10px;letter-spacing:2px;color:#a79aae}.public-profile-copy h1{margin:5px 0 0;font-size:30px}.public-profile-handle{margin:2px 0 8px;color:#9d90a8}.public-profile-rank{display:inline-flex;padding:6px 10px;border:1px solid var(--rank-color);border-radius:999px;color:var(--rank-color-2);font-size:12px}.public-profile-bio{color:#d1c8d7;max-width:620px}.public-profile-actions{display:flex;gap:9px;align-items:center}.public-profile-actions form{margin:0}.public-action{display:inline-block;border:1px solid rgba(255,255,255,.14);background:#21162a;color:#fff;border-radius:12px;padding:11px 15px;text-decoration:none;cursor:pointer}.public-action.primary{background:linear-gradient(135deg,var(--rank-color),var(--rank-color-2));color:#140b1a;border:0;font-weight:800}.public-action.liked{box-shadow:0 0 20px color-mix(in srgb,var(--rank-color) 45%,transparent)}.public-profile-stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.08)}.public-profile-stats div{padding:22px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}.public-profile-stats div:last-child{border-right:0}.public-profile-stats b{display:block;font-size:22px}.public-profile-stats span{font-size:10px;letter-spacing:1px;color:#988b9f}@media(max-width:760px){.public-profile-body{grid-template-columns:86px 1fr;padding:0 20px 22px;gap:14px}.public-profile-avatar{width:82px;height:82px;border-radius:22px}.public-profile-actions{grid-column:1/-1;flex-wrap:wrap}.public-profile-stats{grid-template-columns:repeat(2,1fr)}.public-profile-stats div:nth-child(3){border-right:0}.public-profile-stats div:last-child{grid-column:1/-1}}

/* =========================================================
   V9 — GIF AVATARS + RANKING + NOVELAS DINÁMICAS
   ========================================================= */
.gif-avatar[data-gif]{cursor:pointer}
.profile-avatar-v25.gif-avatar,.public-profile-avatar.gif-avatar,.comentario-avatar.gif-avatar{will-change:transform,filter}
.gif-avatar[data-gif]:hover{filter:saturate(1.12) brightness(1.06);box-shadow:0 0 24px color-mix(in srgb,var(--rank-color,#A95CFF),transparent 55%)}

/* El panel de populares ocupa menos espacio y deja respirar a las series. */
.collection-body{grid-template-columns:minmax(0,2.25fr) minmax(245px,.72fr);gap:26px}
.popular-panel{padding:20px 18px 17px}
.popular-head h3{font-size:clamp(21px,2.1vw,29px)}
.popular-head p{max-width:210px;font-size:9px}
.popular-stage{min-height:390px;margin-top:12px}
.popular-cover{width:min(170px,66%)}
.popular-cover-zone{width:min(185px,82%)}
.popular-info{width:min(270px,94%);gap:9px;margin-top:12px}
.popular-position{font-size:21px}
.popular-title-wrap a{font-size:13px}
.popular-visits span{font-size:11px}
.popular-actions{margin-top:13px}
.popular-actions a{font-size:7px;padding:9px 11px;border:1px solid rgba(190,122,255,.34);border-radius:8px;background:rgba(139,65,208,.08);box-shadow:0 0 0 rgba(163,82,239,0);animation:rankingButtonGlow 2.8s ease-in-out infinite}
.popular-actions a:hover{border-color:rgba(220,175,255,.7);background:rgba(151,70,225,.16);transform:translateY(-2px);box-shadow:0 0 22px rgba(151,70,225,.22)}
@keyframes rankingButtonGlow{50%{box-shadow:0 0 18px rgba(151,70,225,.15);border-color:rgba(190,122,255,.52)}}
@media(max-width:900px){.collection-body{grid-template-columns:1fr}.popular-panel{min-height:520px!important}.popular-stage{min-height:430px}}
@media(max-width:620px){.popular-panel{padding:18px 15px 16px}.popular-cover{width:min(180px,68%)}}

/* Biblioteca: novelas con color individual */
.library-novels-section{padding-top:30px}
.library-novels-section .collection-head{margin-bottom:24px}
.library-novels-section .collection-head h2 span{opacity:.3}
.novel-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.novel-library-card{--novel-color:#A95CFF;position:relative;display:grid;grid-template-columns:110px 1fr;min-height:190px;overflow:hidden;border:1px solid color-mix(in srgb,var(--novel-color),transparent 65%);border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--novel-color),#100a18 92%),#09070e);color:inherit;text-decoration:none;box-shadow:0 18px 42px rgba(0,0,0,.25),inset 0 0 35px color-mix(in srgb,var(--novel-color),transparent 92%);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.novel-library-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--novel-color),transparent 80%),transparent 50%);pointer-events:none}
.novel-library-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--novel-color),white 18%);box-shadow:0 24px 55px rgba(0,0,0,.34),0 0 28px color-mix(in srgb,var(--novel-color),transparent 80%)}
.novel-library-cover{position:relative;min-height:190px;overflow:hidden;background:#0b0711;border-right:1px solid color-mix(in srgb,var(--novel-color),transparent 70%)}
.novel-library-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .45s ease}
.novel-library-card:hover .novel-library-cover img{transform:scale(1.045);filter:saturate(1.12)}
.novel-library-cover span{display:grid;place-items:center;height:100%;font-size:34px;color:var(--novel-color)}
.novel-library-info{position:relative;padding:18px 15px;min-width:0}
.novel-library-info small{font:700 6px 'DM Mono',monospace;letter-spacing:2px;color:color-mix(in srgb,var(--novel-color),white 15%)}
.novel-library-info h3{margin:9px 0 7px;font:600 18px/1.15 Cinzel,serif;color:#eee4f4}
.novel-library-info p{margin:0;color:#82768b;font-size:9px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.novel-library-state{position:absolute;left:15px;right:15px;bottom:13px;font:700 6px 'DM Mono',monospace;letter-spacing:1.3px;color:var(--novel-color);display:flex;justify-content:space-between}
.novel-library-state b{font-size:12px}
.novel-library-empty{grid-column:1/-1;padding:45px 20px;text-align:center;border:1px dashed rgba(191,145,255,.18);border-radius:16px;background:rgba(19,11,29,.35)}
.novel-library-empty span{display:block;font-size:25px;color:#b979ff;margin-bottom:8px}.novel-library-empty strong{font:500 20px Cinzel;color:#d9c1e9}.novel-library-empty p{font-size:10px;color:#75697d}
@media(max-width:950px){.novel-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.novel-library-grid{grid-template-columns:1fr}.novel-library-card{grid-template-columns:100px 1fr;min-height:170px}.novel-library-cover{min-height:170px}}

/* Inicio: estado vacío de novelas */
.novel-empty-state{width:min(700px,90vw);padding:70px 30px;text-align:center;border:1px dashed rgba(190,130,255,.24);border-radius:22px;background:linear-gradient(145deg,rgba(25,13,39,.72),rgba(8,6,14,.86));box-shadow:0 25px 80px rgba(0,0,0,.35),inset 0 0 55px rgba(139,72,220,.08)}
.novel-empty-state>span{display:block;font-size:34px;color:#b979ff;text-shadow:0 0 24px rgba(177,99,255,.45);margin-bottom:14px}
.novel-empty-state strong{display:block;font:500 27px Cinzel;color:#e8d8f1}.novel-empty-state p{max-width:470px;margin:12px auto 22px;color:#807487;font-size:11px;line-height:1.7}.novel-empty-state a{display:inline-flex;gap:9px;align-items:center;padding:11px 15px;border:1px solid rgba(195,135,255,.34);border-radius:9px;color:#e5d6ed;text-decoration:none;font:700 7px 'DM Mono',monospace;letter-spacing:1.5px;background:rgba(145,70,221,.08);transition:.3s}.novel-empty-state a:hover{transform:translateY(-2px);border-color:#c48bff;box-shadow:0 0 25px rgba(165,82,239,.22)}

/* Ficha y lector de novelas */
.novel-detail-main,.novel-reader-main{width:min(1100px,calc(100% - 36px));margin:auto;padding:45px 0 90px}
.novel-back,.novel-reader-nav a{color:#9276a4;text-decoration:none;font:700 7px 'DM Mono',monospace;letter-spacing:1.6px}
.novel-detail-hero{margin-top:20px;display:grid;grid-template-columns:280px 1fr;gap:42px;align-items:center;padding:30px;border:1px solid color-mix(in srgb,var(--novel-color),transparent 65%);border-radius:22px;background:radial-gradient(circle at 18% 50%,color-mix(in srgb,var(--novel-color),transparent 86%),transparent 45%),linear-gradient(145deg,#171021,#09070e);box-shadow:0 25px 70px rgba(0,0,0,.35)}
.novel-detail-cover{aspect-ratio:2/3;overflow:hidden;border:1px solid color-mix(in srgb,var(--novel-color),transparent 45%);box-shadow:0 18px 45px rgba(0,0,0,.5);background:#0b0711}.novel-detail-cover img{width:100%;height:100%;object-fit:cover}.novel-detail-hero h1{font:600 clamp(36px,5vw,66px)/1.02 Cinzel;margin:14px 0;color:#eee1f3}.novel-detail-hero p{max-width:680px;color:#94869b;font-size:12px;line-height:1.8}.novel-detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.novel-detail-meta span{padding:8px 11px;border:1px solid rgba(189,128,255,.18);border-radius:8px;color:#a898af;font:700 7px 'DM Mono',monospace;letter-spacing:1px}
.novel-chapters{margin-top:38px}.novel-chapters-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.novel-chapters-head h2{font:500 35px Cinzel;margin:10px 0 0;color:#dfc9e9}.novel-chapters-head>strong{font:400 36px Cinzel;color:var(--novel-color)}
.novel-chapter{display:grid;grid-template-columns:75px 1fr 30px;align-items:center;gap:15px;padding:16px 18px;margin:8px 0;border:1px solid color-mix(in srgb,var(--novel-color),transparent 78%);border-radius:11px;background:rgba(20,11,28,.65);color:inherit;text-decoration:none;transition:.3s}.novel-chapter:hover{transform:translateX(5px);border-color:color-mix(in srgb,var(--novel-color),transparent 35%);box-shadow:0 0 25px color-mix(in srgb,var(--novel-color),transparent 88%)}.novel-chapter>span{font:500 24px Cinzel;color:var(--novel-color)}.novel-chapter small{display:block;font:700 6px 'DM Mono';letter-spacing:1.5px;color:#66596f}.novel-chapter strong{display:block;margin-top:4px;font:600 13px Cinzel;color:#ded0e5}.novel-chapter>b{color:var(--novel-color);font-size:16px}.novel-nochap{padding:30px;color:#74677d;border:1px dashed rgba(190,130,255,.16);border-radius:12px;text-align:center}
.novel-reader-main{max-width:900px}.novel-reader-nav{display:flex;justify-content:space-between;margin-bottom:20px}.novel-reader-nav span{font:700 7px 'DM Mono';letter-spacing:2px;color:var(--novel-color)}.novel-text-card{padding:36px 42px;border:1px solid color-mix(in srgb,var(--novel-color),transparent 72%);border-radius:18px;background:linear-gradient(145deg,#15101d,#09070e);box-shadow:0 25px 80px rgba(0,0,0,.4)}.novel-text-head{padding-bottom:25px;border-bottom:1px solid rgba(190,130,255,.11)}.novel-text-head h1{font:500 clamp(30px,5vw,48px) Cinzel;color:#eadcf0;margin:12px 0 0}.novel-content{padding-top:30px;color:#d4c7da;font:400 16px/2 Georgia,serif;white-space:normal}.novel-reader-pager{display:flex;justify-content:space-between;margin-top:18px}.novel-reader-pager a{padding:11px 14px;border:1px solid color-mix(in srgb,var(--novel-color),transparent 58%);border-radius:8px;color:var(--novel-color);text-decoration:none;font:700 7px 'DM Mono';letter-spacing:1px}
@media(max-width:700px){.novel-detail-hero{grid-template-columns:150px 1fr;gap:20px;padding:18px}.novel-detail-hero h1{font-size:31px}.novel-detail-hero p{font-size:10px}.novel-text-card{padding:25px 19px}.novel-content{font-size:15px;line-height:1.85}.novel-reader-nav{align-items:center}}
@media(max-width:520px){.novel-detail-hero{grid-template-columns:1fr}.novel-detail-cover{width:190px;margin:auto}.novel-detail-hero h1{font-size:34px}}

/* Ranking público */
.ranking-main{width:min(1050px,calc(100% - 36px));margin:auto;padding:65px 0 100px}.ranking-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:16px 0 30px}.ranking-heading h1{font:600 clamp(38px,6vw,70px)/1 Cinzel;margin:10px 0;color:#eadcf3}.ranking-heading h1 span{opacity:.28}.ranking-heading p{color:#83758d;font-size:11px}.ranking-back-btn{padding:10px 13px;border:1px solid rgba(190,125,255,.26);border-radius:8px;color:#c7b2d3;text-decoration:none;font:700 7px 'DM Mono';letter-spacing:1.2px;transition:.3s}.ranking-back-btn:hover{border-color:#c693ff;transform:translateY(-2px);box-shadow:0 0 20px rgba(158,76,232,.18)}
.ranking-list{display:grid;gap:10px}.ranking-item{display:grid;grid-template-columns:60px 70px minmax(0,1fr) 90px 30px;align-items:center;gap:16px;padding:12px 16px;border:1px solid rgba(184,116,247,.12);border-radius:13px;background:linear-gradient(90deg,rgba(20,12,28,.86),rgba(8,6,12,.92));color:inherit;text-decoration:none;transition:.3s}.ranking-item:hover{transform:translateX(5px);border-color:rgba(196,132,255,.35);box-shadow:0 15px 35px rgba(0,0,0,.25),0 0 24px rgba(143,63,221,.1)}.ranking-number{font:400 27px Cinzel;color:#715b7c}.ranking-item img{width:70px;height:86px;object-fit:cover;border-radius:7px;border:1px solid rgba(190,125,255,.2)}.ranking-info{min-width:0}.ranking-info small,.ranking-visits small{display:block;font:700 6px 'DM Mono';letter-spacing:1.5px;color:#75667e}.ranking-info strong{display:block;font:600 16px Cinzel;color:#e8dced;margin:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ranking-info span{font-size:9px;color:#6e6276}.ranking-visits{text-align:right}.ranking-visits strong{font:500 17px Cinzel;color:#c79be9}.ranking-arrow{font-size:17px;color:#a66bd2}.ranking-empty{padding:50px;text-align:center;border:1px dashed rgba(190,125,255,.2);color:#796b82}
@media(max-width:650px){.ranking-heading{display:block}.ranking-back-btn{display:inline-block;margin-top:12px}.ranking-item{grid-template-columns:40px 58px minmax(0,1fr) 55px;gap:9px;padding:10px}.ranking-item img{width:58px;height:72px}.ranking-number{font-size:20px}.ranking-info strong{font-size:12px}.ranking-visits strong{font-size:13px}.ranking-arrow{display:none}}

.novel-open-link{display:block;color:inherit;text-decoration:none}.novel-open-link:hover h3{color:var(--novel-color,#c99bff);text-shadow:0 0 20px color-mix(in srgb,var(--novel-color,#c99bff),transparent 55%)}

.novel-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.novel-action{display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--novel-color,#A95CFF),transparent 48%);border-radius:9px;background:rgba(255,255,255,.025);color:#d9c8e5;font:800 7px 'DM Mono',monospace;letter-spacing:1.5px;transition:.3s}.novel-action b{font-size:11px}.novel-action:hover{transform:translateY(-2px);border-color:var(--novel-color,#A95CFF);box-shadow:0 0 25px color-mix(in srgb,var(--novel-color,#A95CFF),transparent 80%);color:#fff}.novel-action.primary{background:color-mix(in srgb,var(--novel-color,#A95CFF),transparent 82%);color:var(--novel-color,#A95CFF)}.novel-action[aria-disabled="true"]{opacity:.45;pointer-events:none}
.novel-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.novel-detail-action{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid color-mix(in srgb,var(--novel-color,#A95CFF),transparent 48%);border-radius:10px;color:var(--novel-color,#A95CFF);background:color-mix(in srgb,var(--novel-color,#A95CFF),transparent 90%);font:800 8px 'DM Mono',monospace;letter-spacing:1.4px;transition:.3s}.novel-detail-action:hover{transform:translateY(-2px);box-shadow:0 0 25px color-mix(in srgb,var(--novel-color,#A95CFF),transparent 78%)}
.novel-reader-visual{position:relative;min-height:300px;margin-bottom:22px;border:1px solid color-mix(in srgb,var(--novel-color,#A95CFF),transparent 72%);border-radius:18px;overflow:hidden;background:#09070e;box-shadow:0 25px 80px rgba(0,0,0,.45)}.novel-reader-visual img{display:block;width:100%;max-height:620px;object-fit:cover;filter:saturate(.9)}.novel-reader-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,11,.15),rgba(7,5,11,.82));pointer-events:none}.novel-reader-image-label{position:absolute;z-index:2;left:20px;bottom:15px;color:#fff;font:800 7px 'DM Mono',monospace;letter-spacing:1.5px;text-shadow:0 2px 8px #000}.novel-reader-image-label span{color:var(--novel-color,#A95CFF)}.novel-text-card.over-image{position:relative;margin:-85px auto 0;z-index:3;width:min(780px,calc(100% - 40px));background:rgba(10,7,16,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 22px 70px rgba(0,0,0,.55);border-color:color-mix(in srgb,var(--novel-color,#A95CFF),transparent 48%)}
@media(max-width:620px){.novel-actions{justify-content:center}.novel-action{flex:1;justify-content:center}.novel-reader-visual{min-height:230px}.novel-text-card.over-image{width:calc(100% - 20px);margin-top:-55px}.novel-reader-image-label{left:13px;bottom:10px}}


/* Biblioteca: novelas con la misma tarjeta que las series */
.novel-library-series-grid{--novel-accent:#A95CFF}
.novel-library-series-card{border-color:color-mix(in srgb,var(--novel-accent),transparent 76%)}
.novel-library-series-card .card-topline{color:color-mix(in srgb,var(--novel-accent),white 18%)}
.novel-library-series-card .cover-wrap{border-right-color:color-mix(in srgb,var(--novel-accent),transparent 82%)}
.novel-library-series-card .cover{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s}
.novel-library-series-card:hover{border-color:color-mix(in srgb,var(--novel-accent),transparent 45%);box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 25px color-mix(in srgb,var(--novel-accent),transparent 88%)}
.novel-library-series-card .chapter-main-button{border-color:color-mix(in srgb,var(--novel-accent),transparent 58%)}
.novel-library-series-card .chapter-main-button:hover{border-color:var(--novel-accent);box-shadow:0 10px 26px color-mix(in srgb,var(--novel-accent),transparent 80%)}
.novel-library-series-card .chapter-main-arrow{color:var(--novel-accent)}
.novel-library-series-card .chapter-new-badge{background:color-mix(in srgb,var(--novel-accent),transparent 88%)}

/* =========================================================
   V20 — OBRAS MÁS VISITADAS / PANEL COMPACTO
   ========================================================= */
.collection-body{
  grid-template-columns:minmax(0,2.25fr) minmax(245px,.72fr);
  gap:24px;
}
.collection-body .popular-panel{
  width:100%;
  box-sizing:border-box;
  min-width:0;
  min-height:0!important;
  align-self:start;
  padding:18px 16px 16px!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 24%,rgba(142,67,214,.13),transparent 40%),
    linear-gradient(160deg,rgba(17,11,25,.97),rgba(7,5,11,.99))!important;
}
.collection-body .popular-head{
  align-items:center;
  gap:10px;
}
.collection-body .popular-kicker{
  font-size:6px!important;
  letter-spacing:2.4px!important;
}
.collection-body .popular-head h3{
  margin:8px 0 5px!important;
  font-size:20px!important;
  line-height:1.05!important;
  letter-spacing:-.3px!important;
}
.collection-body .popular-head p{
  max-width:180px!important;
  font-size:8px!important;
  line-height:1.45!important;
}
.collection-body .popular-rank{
  padding:6px 8px!important;
  font-size:6px!important;
  letter-spacing:1.4px!important;
}
.collection-body .popular-stage{
  min-height:0!important;
  margin-top:13px!important;
  padding-bottom:0;
}
.collection-body .popular-counter{
  align-self:flex-end;
  font-size:6px!important;
}
.collection-body .popular-counter span:first-child{
  font-size:15px!important;
}
.collection-body .popular-cover-zone{
  width:min(190px,82%)!important;
  margin:5px auto 0!important;
}
.collection-body .popular-cover{
  border-radius:7px!important;
  box-shadow:0 18px 40px rgba(0,0,0,.48),0 0 26px rgba(130,47,199,.14)!important;
}
.collection-body .popular-info{
  width:min(215px,94%)!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:4px 9px!important;
  margin-top:12px!important;
}
.collection-body .popular-label{
  font-size:5px!important;
  letter-spacing:1.8px!important;
  margin-bottom:3px!important;
}
.collection-body #popularTitle{
  display:block!important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:#eee7f2!important;
  text-decoration:none!important;
  font:700 14px/1.18 Cinzel,Georgia,serif!important;
  text-shadow:0 0 10px rgba(190,122,255,.16);
  cursor:pointer;
  transition:color .2s ease,text-shadow .2s ease,transform .2s ease;
}
.collection-body #popularTitle:hover{
  color:#dcb9ff!important;
  text-shadow:0 0 15px rgba(190,112,255,.38);
  transform:translateX(2px);
}
.collection-body .popular-visits{
  min-width:43px!important;
  text-align:right!important;
}
.collection-body .popular-visits span{
  font-size:12px!important;
}
.collection-body .popular-visits small{
  font-size:5px!important;
}
.collection-body .popular-progress{
  width:min(215px,94%)!important;
  margin:11px auto 0!important;
}
.collection-body .popular-actions{
  width:min(215px,94%)!important;
  margin:11px auto 0!important;
  padding-top:9px!important;
}
.collection-body .popular-actions a{
  font-size:7px!important;
  letter-spacing:1.2px!important;
}
.collection-body .popular-actions>span{
  font-size:5px!important;
}

@media(max-width:1050px){
  .collection-body{grid-template-columns:minmax(0,1.9fr) minmax(235px,.75fr);gap:18px}
  .collection-body .popular-cover-zone{width:min(180px,80%)!important}
}
@media(max-width:900px){
  .collection-body{grid-template-columns:1fr;gap:25px}
  .collection-body .popular-panel{width:min(520px,100%);margin:0 auto}
  .collection-body .popular-cover-zone{width:min(210px,62%)!important}
  .collection-body .popular-info,.collection-body .popular-progress,.collection-body .popular-actions{width:min(390px,90%)!important}
  .collection-body #popularTitle{font-size:16px!important}
}
@media(max-width:620px){
  .collection-body .popular-panel{padding:16px 13px 15px!important}
  .collection-body .popular-cover-zone{width:min(190px,68%)!important}
  .collection-body .popular-info,.collection-body .popular-progress,.collection-body .popular-actions{width:92%!important}
  .collection-body #popularTitle{font-size:14px!important}
}

/* =========================================================
   FIX — ORDENAR LA GRILLA DE MANHWAS (sobrescribe reglas viejas
   de una versión anterior del sitio que reservaba espacio para
   un panel lateral que ya no existe en el HTML actual).
   ========================================================= */
.collection-body{
  display:block !important;
}
#seriesGrid.series-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:26px !important;
}
@media(max-width:900px){
  #seriesGrid.series-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:620px){
  #seriesGrid.series-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   FIX — TARJETAS DE MANHWAS EN FORMATO HORIZONTAL
   (imagen a la izquierda, texto a la derecha), manteniendo
   el orden en columnas ya corregido arriba.
   ========================================================= */
#seriesGrid .series-card{
  display:grid !important;
  grid-template-columns:140px minmax(0,1fr) !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  min-height:200px !important;
}
#seriesGrid .series-card .card-topline{
  grid-column:1/-1 !important;
}
#seriesGrid .series-card .cover-wrap{
  grid-column:1 !important;
  grid-row:2 !important;
  aspect-ratio:auto !important;
  height:100% !important;
  min-height:175px !important;
  border-right:1px solid rgba(180,109,246,.12);
}
#seriesGrid .series-card .card-body{
  grid-column:2 !important;
  grid-row:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  padding:16px 17px !important;
}
#seriesGrid .series-card .card-body h3{
  font-size:15px !important;
  line-height:1.2 !important;
  max-width:none !important;
}
#seriesGrid .series-card .synopsis{
  font-size:10px !important;
  line-height:1.5 !important;
  max-height:32px !important;
  margin-top:8px !important;
}
#seriesGrid .series-card .card-footer{
  margin-top:12px !important;
  flex-wrap:nowrap !important;
}
@media(max-width:900px){
  #seriesGrid .series-card{grid-template-columns:120px minmax(0,1fr) !important;min-height:180px !important}
  #seriesGrid .series-card .cover-wrap{min-height:155px !important}
}
@media(max-width:620px){
  #seriesGrid .series-card{
    grid-template-columns:105px minmax(0,1fr) !important;
    min-height:150px !important;
  }
  #seriesGrid .series-card .cover-wrap{min-height:128px !important}
  #seriesGrid .series-card .card-body{padding:11px 12px !important}
  #seriesGrid .series-card .card-body h3{font-size:12px !important}
  #seriesGrid .series-card .synopsis{display:none !important}
}

/* =========================================================
   AJUSTE MÓVIL — grid de 2 columnas estilo portada (como en PC)
   en vez de una sola columna en formato de lista apilada.
   Se aplica solo en pantallas angostas; en tablet/escritorio
   sigue el diseño de fila horizontal definido arriba.
   ========================================================= */
@media(max-width:620px){
  #seriesGrid.series-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  #seriesGrid .series-card{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    min-height:0 !important;
  }
  #seriesGrid .series-card .card-topline{ grid-column:auto !important; }
  #seriesGrid .series-card .cover-wrap{
    grid-column:auto !important; grid-row:auto !important;
    aspect-ratio:.72/1 !important; height:auto !important; min-height:0 !important;
    border-right:0 !important; border-bottom:1px solid rgba(180,109,246,.12);
  }
  #seriesGrid .series-card .card-body{
    grid-column:auto !important; grid-row:auto !important;
    display:block !important; padding:10px 10px 12px !important;
  }
  #seriesGrid .series-card .card-body h3{ font-size:12.5px !important; line-height:1.25 !important; }
  #seriesGrid .series-card .card-footer{ margin-top:8px !important; flex-wrap:wrap !important; }

  .novel-library-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .novel-library-card{
    grid-template-columns:none !important; display:flex !important; flex-direction:column !important; min-height:0 !important;
  }
  .novel-library-cover{ min-height:0 !important; aspect-ratio:.72/1 !important; border-right:0 !important; border-bottom:1px solid color-mix(in srgb,var(--novel-color),transparent 70%); }

  /* Menos aire vertical entre secciones para que no se sienta todo "muy largo" */
  .hero-orbit{ min-height:0 !important; padding:34px 0 22px !important; }
  .hero-meta{ margin-top:26px !important; }
  .collection{ padding:38px 0 !important; }
  .collection-head{ margin-bottom:22px !important; }
}
@media(max-width:400px){
  #seriesGrid.series-grid,.novel-library-grid{ gap:9px !important; }
  #seriesGrid .series-card .card-body{ padding:8px 9px 10px !important; }
}

/* =========================================================
   MODO RENDIMIENTO — activado por el botón en la barra superior.
   Oculta partículas/decoraciones y corta animaciones y transiciones
   en todo el sitio (misma técnica que ya usa este archivo para
   prefers-reduced-motion, aplicada ahora también bajo demanda).
   ========================================================= */
.perf-toggle-btn.is-active{
  color:#d7c5e6 !important;
}
.perf-toggle-btn.is-active .nav-icon{
  color:#c992ff;
  filter:drop-shadow(0 0 6px rgba(184,111,255,.5));
}

/* El botón de rendimiento reutiliza el estilo .cosmic-nav-item pero es un <button>,
   así que reseteamos las propiedades por defecto de los botones nativos. */
button.perf-toggle-btn{
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

/* =========================================================
   RESPONSIVE V2 — MISMAS COLUMNAS QUE ESCRITORIO
   El contenido se adapta en tamaño/espaciado, pero no cambia
   la cantidad de columnas del layout de escritorio.
   ========================================================= */
@media (max-width: 620px){
  :root{--site-gutter:10px;}

  /* Mantener la estructura de escritorio */
  .hero-orbit{grid-template-columns:1.02fr .98fr!important;min-height:0!important;gap:8px!important;padding:28px 0 20px!important;}
  .hero-copy{padding:24px 0!important;min-width:0;}
  .hero h1{font-size:clamp(25px,7.4vw,43px)!important;letter-spacing:-1px!important;margin:14px 0!important;}
  .hero-description{font-size:9px!important;line-height:1.55!important;max-width:none!important;}
  .hero-actions{gap:6px!important;margin-top:15px!important;flex-wrap:wrap;}
  .hero-actions .cosmic-btn{min-height:34px!important;padding:0 9px!important;font-size:7px!important;gap:6px!important;}
  .hero-meta{gap:12px!important;margin-top:24px!important;flex-wrap:nowrap!important;}
  .hero-meta span{font-size:5px!important;letter-spacing:1px!important;}
  .hero-meta b{font-size:10px!important;}
  .hero-cosmos{height:260px!important;min-width:0;}
  .ring-a{width:190px!important;height:190px!important}.ring-b{width:225px!important;height:225px!important}.ring-c{width:145px!important;height:145px!important}.cosmos-core{width:75px!important;height:75px!important}.core-symbol{font-size:22px!important}.cosmos-core span{font-size:4px!important;letter-spacing:2px!important}

  /* Portada: conservar las 3 columnas de PC */
  #seriesGrid.series-grid,
  .series-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;}
  #seriesGrid .series-card,
  .series-card{min-width:0!important;display:flex!important;flex-direction:column!important;}
  #seriesGrid .series-card .card-topline,
  .series-card .card-topline{height:27px!important;padding:0 7px!important;font-size:5px!important;letter-spacing:.8px!important;gap:4px!important;}
  #seriesGrid .series-card .cover-wrap,
  .series-card .cover-wrap{height:auto!important;min-height:0!important;aspect-ratio:1.53/1!important;border:0!important;}
  #seriesGrid .series-card .card-body,
  .series-card .card-body{padding:8px 7px 9px!important;min-width:0!important;display:block!important;}
  #seriesGrid .series-card .card-body h3,
  .series-card .card-body h3{font-size:clamp(8px,2.5vw,12px)!important;line-height:1.15!important;margin:0!important;}
  #seriesGrid .series-card .synopsis,
  .series-card .synopsis{font-size:6px!important;line-height:1.35!important;max-height:25px!important;margin-top:5px!important;}
  #seriesGrid .series-card .card-footer,
  .series-card .card-footer{margin-top:6px!important;gap:4px!important;flex-wrap:nowrap!important;}
  #seriesGrid .series-card .chapter-main-button,
  .series-card .chapter-main-button{height:25px!important;padding:0 5px!important;font-size:5.5px!important;min-width:0!important;}
  #seriesGrid .series-card .save-series-button,
  .series-card .save-series-button{width:25px!important;min-width:25px!important;max-width:25px!important;height:25px!important;padding:0!important;}
  #seriesGrid .series-card .save-label,
  .series-card .save-label{display:none!important;}

  /* Biblioteca: conservar las 3 columnas de PC */
  .novel-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;}
  .novel-library-card{display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;}
  .novel-library-cover{min-height:0!important;aspect-ratio:.72/1!important;border-right:0!important;border-bottom:1px solid color-mix(in srgb,var(--novel-color),transparent 70%);}
  .novel-library-info{padding:8px 7px!important;min-width:0!important;}
  .novel-library-info small{font-size:4.5px!important;letter-spacing:1px!important;}
  .novel-library-info h3{font-size:9px!important;line-height:1.15!important;margin:5px 0!important;}
  .novel-library-info p{font-size:5.5px!important;line-height:1.35!important;-webkit-line-clamp:3!important;}
  .novel-library-state{position:static!important;margin-top:7px!important;font-size:4.5px!important;}
  .novel-library-state b{font-size:8px!important;}

  /* Perfil guardado: conservar 3 columnas */
  .saved-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;}
  .saved-card{grid-template-columns:1fr!important;gap:7px!important;padding:8px!important;min-width:0!important;}
  .saved-card img,.saved-card .cover{width:100%!important;height:auto!important;aspect-ratio:.76/1!important;object-fit:cover!important;}
  .saved-card h3{font-size:9px!important;margin:3px 0 8px!important;}
  .saved-card p{font-size:5px!important;letter-spacing:1px!important;}
  .saved-open{font-size:5px!important;}

  /* Ranking: conservar las 5 columnas de escritorio */
  .ranking-item{grid-template-columns:40px 48px minmax(0,1fr) 48px 20px!important;gap:5px!important;padding:7px!important;min-width:0!important;}
  .ranking-item img{width:48px!important;height:60px!important;}
  .ranking-number{font-size:14px!important;}
  .ranking-info strong{font-size:8px!important;}
  .ranking-info span,.ranking-info small,.ranking-visits small{font-size:4.5px!important;}
  .ranking-visits strong{font-size:8px!important;}
  .ranking-arrow{display:block!important;font-size:10px!important;}

  /* Perfil público: mantener estructura de 3 columnas y 5 estadísticas */
  .public-profile-body{grid-template-columns:70px minmax(0,1fr) auto!important;gap:9px!important;padding:0 10px 15px!important;margin-top:-30px!important;}
  .public-profile-avatar{width:64px!important;height:64px!important;border-radius:16px!important;}
  .public-profile-copy h1{font-size:18px!important;}
  .public-profile-kicker{font-size:6px!important;}
  .public-profile-handle{font-size:7px!important;}
  .public-profile-rank{font-size:6px!important;padding:4px 6px!important;}
  .public-profile-bio{font-size:6px!important;}
  .public-profile-actions{grid-column:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;}
  .public-action{font-size:6px!important;padding:6px 7px!important;white-space:nowrap!important;}
  .public-profile-stats{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
  .public-profile-stats div{padding:10px 3px!important;min-width:0!important;}
  .public-profile-stats b{font-size:12px!important;}
  .public-profile-stats span{font-size:4px!important;letter-spacing:.5px!important;}

  /* Detalle/lector: conservar las 2 columnas principales */
  .novel-detail-hero{grid-template-columns:150px minmax(0,1fr)!important;gap:12px!important;padding:14px!important;}
  .novel-detail-hero h1{font-size:clamp(20px,6vw,30px)!important;}
  .novel-detail-hero p{font-size:7px!important;line-height:1.5!important;}
  .novel-detail-cover{width:100%!important;}
  .novel-detail-meta span{font-size:5px!important;padding:5px 6px!important;}
  .novel-reader-main,.novel-detail-main{width:calc(100% - 20px)!important;}
  .novel-text-card{padding:18px 14px!important;}
  .novel-content{font-size:12px!important;line-height:1.75!important;}

  /* Colección principal: mantener sus dimensiones relativas sin apilar */
  .collection-body{grid-template-columns:minmax(0,2.25fr) minmax(120px,.72fr)!important;display:grid!important;gap:10px!important;}
  .collection-body .popular-panel{width:auto!important;margin:0!important;padding:10px!important;min-height:0!important;}
  .collection-body .popular-cover-zone{width:75%!important;}
  .collection-body .popular-info,.collection-body .popular-progress,.collection-body .popular-actions{width:92%!important;}
  .collection-body #popularTitle{font-size:9px!important;}

  /* Encabezados y espacios: reducidos, pero sin cambiar columnas */
  .collection{padding:35px 0 30px!important;}
  .collection-head{margin-bottom:18px!important;gap:8px!important;}
  .collection-head h2{font-size:clamp(22px,6vw,34px)!important;}
  .collection-head p{font-size:7px!important;}
  .collection-count{padding-left:10px!important;}
  .collection-count strong{font-size:20px!important;}
  .collection-count span{font-size:5px!important;letter-spacing:1px!important;}
}

@media (max-width: 400px){
  .hero-orbit{gap:5px!important;}
  .hero-cosmos{height:220px!important;}
  .ring-a{width:160px!important;height:160px!important}.ring-b{width:190px!important;height:190px!important}.ring-c{width:125px!important;height:125px!important}
  #seriesGrid.series-grid,.series-grid,.novel-library-grid,.saved-grid{gap:7px!important;}
  .ranking-item{grid-template-columns:32px 40px minmax(0,1fr) 40px 16px!important;gap:3px!important;}
  .ranking-item img{width:40px!important;height:52px!important;}
  .novel-detail-hero{grid-template-columns:115px minmax(0,1fr)!important;}
}

/* =========================================================================
   INICIO — estilos para la estructura actual de index.php
   (site-header, hero-card, home-grid, work-card, sidebar, modales, buscador)
   Mobile-first: las reglas base son para celular; @media(min-width:...) añade
   el layout de escritorio.
   ========================================================================= */

:root{
  --hm-bg:#07050d;
  --hm-panel:linear-gradient(150deg,rgba(24,14,36,.92),rgba(8,6,13,.96));
  --hm-line:rgba(184,117,255,.20);
  --hm-purple:#a85cff;
  --hm-purple-2:#c99bff;
  --hm-text:#f4eefb;
  --hm-muted:#a89eb3;
  --hm-radius:16px;
}

/* ---------- Reset puntual para no chocar con reglas antiguas de .main{} ---------- */
main.page-shell{width:min(1220px,calc(100% - 24px));margin:0 auto;padding-top:14px}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(6,4,11,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--hm-line)}
.header-inner{width:min(1220px,calc(100% - 24px));margin:0 auto;min-height:64px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:8px 0}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{display:block;width:150px;height:auto}
.brand-logo svg{width:100%;height:auto;display:block}
.main-nav{display:none}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.search-button{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--hm-line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--hm-muted);cursor:pointer;font-size:11px}
.search-button em{font-style:normal;display:none}
.social-icon{width:34px;height:34px;border:1px solid var(--hm-line);border-radius:50%;display:none;align-items:center;justify-content:center;color:var(--hm-muted);font-size:13px}
.profile-mini{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--hm-purple-2);flex:none}
.profile-mini img{width:100%;height:100%;object-fit:cover;display:block}

@media(min-width:860px){
  .main-nav{display:flex;align-items:center;gap:4px;margin-left:22px}
  .nav-link{position:relative;display:flex;align-items:center;gap:6px;padding:10px 12px;color:var(--hm-muted);font-size:12px;font-weight:600;letter-spacing:.3px;border-radius:8px;transition:.25s}
  .nav-link span{font-size:13px}
  .nav-link:hover,.nav-link.active{color:#fff;background:rgba(168,92,255,.10)}
  .nav-more{position:relative}
  .nav-more-button{background:none;border:0;color:inherit;cursor:pointer;font:inherit}
  .more-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:150px;background:var(--hm-panel);border:1px solid var(--hm-line);border-radius:10px;padding:6px;display:none;flex-direction:column;box-shadow:0 20px 45px rgba(0,0,0,.4)}
  .nav-more.open .more-menu{display:flex}
  .more-menu a{padding:9px 10px;border-radius:7px;color:var(--hm-muted);font-size:12px}
  .more-menu a:hover{background:rgba(168,92,255,.12);color:#fff}
  .search-button em{display:inline}
  .social-icon{display:flex}
}

/* ---------- HOME GRID ---------- */
.home-grid{display:grid;grid-template-columns:1fr;gap:26px;padding:16px 0 60px}
.content-column{min-width:0;display:flex;flex-direction:column;gap:32px}
.sidebar{display:flex;flex-direction:column;gap:20px}
@media(min-width:960px){
  .home-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .sidebar{position:sticky;top:86px}
}

/* ---------- HERO ---------- */
.hero-card{position:relative;border-radius:var(--hm-radius);overflow:hidden;min-height:340px;border:1px solid var(--hm-line);isolation:isolate;transition:opacity .3s}
.hero-card.hero-changing{opacity:.4}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .35s;z-index:-2;animation:heroKenBurns 16s ease-in-out infinite alternate;transform-origin:center 30%}
@keyframes heroKenBurns{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,3,9,.95) 10%,rgba(5,3,9,.55) 55%,rgba(5,3,9,.15) 100%);z-index:-1;overflow:hidden}
.hero-overlay:before{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.05) 45%,rgba(184,117,255,.08) 50%,transparent);
  transform:skewX(-14deg);animation:heroOverlaySweep 7s ease-in-out infinite;
}
@keyframes heroOverlaySweep{0%{left:-30%}45%,100%{left:130%}}
.hero-content{padding:22px 18px;display:flex;flex-direction:column;min-height:340px;justify-content:flex-end}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.hero-badges span{font-size:9px;letter-spacing:1px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--hm-line);background:rgba(255,255,255,.05);color:var(--hm-purple-2)}
.hero-views{display:inline-flex!important;align-items:center;gap:5px;color:#f3e9ff!important;border-color:rgba(184,117,255,.35)!important;background:rgba(184,117,255,.1)!important}
.hero-views i{font-style:normal;color:var(--hm-purple-2);animation:eyeBlinkIcon 3.4s ease-in-out infinite;font-size:8px}
.hero-views b{font-weight:800;color:#fff}
@keyframes eyeBlinkIcon{0%,100%{opacity:1}50%{opacity:.35}}
.eyebrow{margin:0 0 6px;color:#b875ff;font-size:10px;font-weight:700;letter-spacing:2px}
.hero-content h1{margin:0 0 10px;font:600 clamp(22px,6vw,38px)/1.1 Cinzel,serif}
.hero-description{margin:0 0 16px;color:#d3c9dd;font-size:12.5px;line-height:1.65;max-width:560px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;font-size:12px;font-weight:700;border:1px solid var(--hm-line)}
.btn.primary{background:linear-gradient(135deg,#9d4eea,#6421bd);border-color:#bd79ff;color:#fff}
.btn.secondary{background:rgba(255,255,255,.04);color:#f0e8fa}
/* Entrada escalonada del contenido cada vez que cambia la obra destacada */
.hero-content.content-pop .hero-badges{animation:heroFadeUp .55s cubic-bezier(.2,.8,.2,1) both}
.hero-content.content-pop .eyebrow{animation:heroFadeUp .55s cubic-bezier(.2,.8,.2,1) .05s both}
.hero-content.content-pop h1{animation:heroFadeUp .6s cubic-bezier(.2,.8,.2,1) .1s both}
.hero-content.content-pop .hero-description{animation:heroFadeUp .6s cubic-bezier(.2,.8,.2,1) .18s both}
.hero-content.content-pop .hero-actions{animation:heroFadeUp .6s cubic-bezier(.2,.8,.2,1) .26s both}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Botones del hero: brillo y movimiento sutil solo aquí, sin tocar .btn en el resto del sitio */
.hero-actions .btn{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s;position:relative;overflow:hidden}
.hero-actions .btn.primary{box-shadow:0 8px 22px rgba(125,50,220,.28)}
.hero-actions .btn:hover{transform:translateY(-3px)}
.hero-actions .btn.primary:hover{box-shadow:0 12px 30px rgba(157,78,234,.45)}
.hero-actions .btn.secondary:hover{border-color:var(--hm-purple-2);background:rgba(184,117,255,.1)}
.hero-actions .btn b{transition:transform .3s ease}
.hero-actions .btn:hover b{transform:translateX(3px)}
.hero-dots{position:absolute;right:16px;bottom:16px;display:flex;gap:6px;z-index:2}
.hero-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);list-style:none;transition:width .4s ease,background .4s ease,box-shadow .4s ease}
.hero-dots i.active{width:18px;border-radius:4px;background:var(--hm-purple-2);animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 6px var(--hm-purple)}50%{box-shadow:0 0 14px var(--hm-purple-2)}}
.hero-arrows{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;padding:0 10px;transform:translateY(-50%);z-index:2}
.hero-arrows button{width:34px;height:34px;border-radius:50%;border:1px solid var(--hm-line);background:rgba(6,4,11,.55);color:#fff;cursor:pointer;font-size:16px;transition:transform .3s cubic-bezier(.2,.8,.22,1),background .3s,border-color .3s,box-shadow .3s}
.hero-arrows button:hover{transform:scale(1.12);background:rgba(157,78,234,.35);border-color:var(--hm-purple-2);box-shadow:0 0 16px rgba(157,78,234,.4)}
.hero-arrows button:active{transform:scale(.94)}
.hero-empty{min-height:260px;display:grid;place-items:center;text-align:center;color:var(--hm-muted);gap:6px}
@media(min-width:700px){
  .hero-content{padding:36px}
  .hero-description{-webkit-line-clamp:3}
}

/* ---------- SECTION HEADINGS ---------- */
.section-block{scroll-margin-top:90px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.section-label{display:block;color:#b875ff;font-size:9px;font-weight:700;letter-spacing:2px;margin-bottom:4px}
.section-heading h2{margin:0;font:600 clamp(18px,3vw,24px) Cinzel,serif}
.section-heading a{color:var(--hm-muted);font-size:11px;font-weight:600;white-space:nowrap}
.section-heading a:hover{color:#fff}

/* ---------- SERIES GRID (work-card) ----------
   Nota: el CSS antiguo del sitio trae reglas !important en ".series-grid"
   de una sección anterior ("conservar las 3 columnas de PC") apuntadas a
   ".series-card", una clase que ya no existe. Por eso aquí forzamos con
   !important para ganarles de forma segura sin tener que borrar ese
   bloque viejo (que otras páginas podrían seguir usando). */
.series-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}

.work-card{
  position:relative;min-width:0!important;
  background:var(--hm-panel);border:1px solid var(--hm-line);border-radius:14px;
  overflow:hidden;isolation:isolate;
  transition:transform .5s cubic-bezier(.22,.8,.22,1),border-color .4s,box-shadow .5s;
  animation:workCardIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.work-card:nth-child(1){animation-delay:.02s}
.work-card:nth-child(2){animation-delay:.08s}
.work-card:nth-child(3){animation-delay:.14s}
.work-card:nth-child(4){animation-delay:.2s}
.work-card:nth-child(5){animation-delay:.26s}
.work-card:nth-child(6){animation-delay:.32s}
@keyframes workCardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.work-card:hover{
  transform:translateY(-7px);
  border-color:rgba(216,140,255,.55);
  box-shadow:0 22px 55px rgba(90,26,150,.32),0 0 0 1px rgba(216,140,255,.12) inset;
}

.work-cover{position:relative;display:block;aspect-ratio:3/4;background:#0b0810;overflow:hidden}
.work-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.work-card:hover .work-cover img{transform:scale(1.09);filter:saturate(1.08) brightness(1.02)}
.work-cover span{height:100%;display:grid;place-items:center;color:#5c516a;gap:6px;text-align:center}
.work-cover small{display:block;font-size:8px;letter-spacing:2px;color:#463c52}

/* Velo permanente sutil (legibilidad) que se intensifica en hover */
.work-cover:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 42%);transition:background .4s}
.work-card:hover .work-cover:after{background:linear-gradient(0deg,rgba(20,4,32,.72) 0%,rgba(90,20,130,.1) 55%,transparent 82%)}

/* Botón "Ver ficha": antes ".work-cover span" (genérico) le imponía
   height:100%+grid y lo centraba en medio de la portada. Ahora se sobre-
   escribe con mayor especificidad y queda anclado abajo, oculto hasta el hover. */
.work-cover .cover-hover{
  position:absolute;inset:auto 0 0;height:auto;z-index:3;
  padding:10px 8px 9px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(0deg,rgba(10,4,16,.92),rgba(10,4,16,.5) 70%,transparent);
  color:#f3e4ff;font-size:9px;font-weight:700;letter-spacing:1.5px;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
}
.work-cover .cover-hover b{display:inline-block;transition:transform .35s}
.work-card:hover .work-cover .cover-hover{opacity:1;transform:none}
.work-card:hover .work-cover .cover-hover b{transform:translateX(3px)}

/* Pétalos que revolotean sobre la portada mientras el mouse está encima */
.petal-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.petal-fx i{
  position:absolute;top:0;left:var(--x,50%);
  width:15px;height:15px;
  background:radial-gradient(circle at 30% 28%,#ffe3f6,#ff9adf 45%,#c25bff 80%);
  border-radius:0 60% 0 60%;
  opacity:0;transform:translateY(-40%) rotate(0deg) scale(.6);
  filter:drop-shadow(0 3px 7px rgba(255,110,220,.55));
}
.work-card:hover .petal-fx i{animation:petalFall linear infinite}
.petal-fx i:nth-child(1){--x:6%;width:16px;height:16px;animation-duration:3.4s;animation-delay:0s}
.petal-fx i:nth-child(2){--x:22%;width:11px;height:11px;animation-duration:2.7s;animation-delay:.4s}
.petal-fx i:nth-child(3){--x:40%;width:18px;height:18px;animation-duration:4s;animation-delay:.1s}
.petal-fx i:nth-child(4){--x:58%;width:12px;height:12px;animation-duration:3s;animation-delay:.55s}
.petal-fx i:nth-child(5){--x:76%;width:17px;height:17px;animation-duration:3.7s;animation-delay:.25s}
.petal-fx i:nth-child(6){--x:90%;width:10px;height:10px;animation-duration:2.5s;animation-delay:.7s}
@keyframes petalFall{
  0%{opacity:0;transform:translate(0,-40%) rotate(0deg) scale(.6)}
  10%{opacity:1;transform:translate(6px,-15%) rotate(50deg) scale(1)}
  35%{transform:translate(-12px,28%) rotate(150deg) scale(1)}
  60%{transform:translate(10px,62%) rotate(230deg) scale(.95)}
  85%{opacity:1;transform:translate(-8px,98%) rotate(310deg) scale(.85)}
  100%{opacity:0;transform:translate(6px,124%) rotate(380deg) scale(.65)}
}

.work-info{padding:12px 12px 13px}
.work-tag{display:inline-flex;align-items:center;gap:5px;font-size:8px;letter-spacing:1.5px;color:#cfa3ff;margin-bottom:7px}
.work-tag:before{content:"";width:5px;height:5px;border-radius:50%;background:#c974ff;box-shadow:0 0 8px #b95cff;animation:tagPulse 2.2s ease-in-out infinite}
@keyframes tagPulse{50%{opacity:.45;transform:scale(.8)}}
.work-info h3{margin:0 0 8px;font-size:12.5px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;transition:color .3s}
.work-card:hover .work-info h3{color:#e6c8ff}

.chapter-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:9px}
.chapter-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hm-line);background:rgba(255,255,255,.03);color:#e3d4fa;font-size:10px;font-weight:700;padding:5px 9px;border-radius:8px;cursor:pointer;transition:transform .3s,border-color .3s,background .3s,box-shadow .3s}
.chapter-pill b{display:inline-block;transition:transform .3s}
.chapter-pill:hover{transform:translateY(-2px);border-color:rgba(201,116,255,.7);background:rgba(157,64,240,.14);box-shadow:0 8px 18px rgba(120,40,210,.25)}
.chapter-pill:hover b{transform:translateX(3px)}
.chapter-pill:active{transform:translateY(0) scale(.97)}
.chapter-upload-time{
  font-size:8.5px;color:#9a8aa8;display:flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:20px;background:rgba(255,255,255,.03);
  border:1px solid transparent;transition:color .3s,background .3s,border-color .3s,transform .3s;
}
.chapter-upload-time i{display:inline-block;font-style:normal;color:#c48aff;animation:clockTick 3.5s linear infinite;transform-origin:50% 55%}
@keyframes clockTick{to{transform:rotate(360deg)}}
.work-card:hover .chapter-upload-time{color:#dcc3f5;background:rgba(157,64,240,.14);border-color:rgba(201,116,255,.35);transform:translateX(2px)}
.no-chapter{display:block;font-size:9px;color:#6a5f77;margin-bottom:8px}

.save-button{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;height:31px;border-radius:8px;border:1px solid var(--hm-line);background:rgba(255,255,255,.02);color:#a291b0;font-size:9px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:transform .25s,border-color .3s,background .3s,color .3s,box-shadow .3s}
.save-button span{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.save-button:hover{border-color:rgba(201,116,255,.6);background:rgba(157,64,240,.1);color:#e3d4fa;transform:translateY(-2px);box-shadow:0 8px 20px rgba(120,40,210,.2)}
.save-button:hover span{transform:scale(1.25)}
.save-button:active{transform:translateY(0) scale(.97)}
.save-button.is-saved{color:#d8c1eb;border-color:rgba(183,119,255,.5);background:rgba(94,42,133,.18)}
.save-button.is-saved span{color:#e29bff}

.empty-panel{grid-column:1/-1;padding:50px 16px;text-align:center;border:1px dashed var(--hm-line);border-radius:12px;color:var(--hm-muted)}
.empty-panel span{font-size:26px;color:var(--hm-purple);display:block;margin-bottom:8px}
@media(min-width:620px){.series-grid{gap:16px!important}}
@media(min-width:960px){.series-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}}

/* ---------- POPULAR LIST (ranking obras) ---------- */
.popular-list{display:flex;flex-direction:column;gap:4px}
.popular-row{display:grid;grid-template-columns:26px 48px 1fr 16px;align-items:center;gap:10px;padding:8px;border-radius:10px;transition:.2s}
.popular-row:hover{background:rgba(255,255,255,.03)}
.popular-row strong{font:600 15px Cinzel,serif;color:#5c516a}
.popular-thumb{width:48px;height:60px;border-radius:6px;overflow:hidden;background:#0b0810}
.popular-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.popular-name{min-width:0;display:flex;flex-direction:column;gap:2px}
.popular-name b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popular-name small{font-size:9px;color:var(--hm-muted)}
.popular-arrow{color:var(--hm-muted)}

/* ---------- LATEST GRID (últimos capítulos) ---------- */
.latest-grid{display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:700px){.latest-grid{grid-template-columns:1fr 1fr;gap:8px}}
.latest-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:7px;border-radius:10px}
.latest-row:hover{background:rgba(255,255,255,.03)}
.latest-cover{width:40px;height:52px;border-radius:6px;overflow:hidden;background:#0b0810}
.latest-cover img{width:100%;height:100%;object-fit:cover;display:block}
.latest-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.latest-info b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-info small{font-size:9px;color:var(--hm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-time{font-size:9px;color:#7c7186;display:flex;align-items:center;gap:4px;white-space:nowrap}

/* ---------- NOVELAS ---------- */
.novel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.novel-grid{grid-template-columns:repeat(4,1fr)}}
.novel-card{display:block;background:var(--hm-panel);border:1px solid var(--hm-line);border-radius:12px;overflow:hidden}
.novel-cover{display:block;aspect-ratio:3/4;background:#0b0810}
.novel-cover img{width:100%;height:100%;object-fit:cover;display:block}
.novel-card-info{display:block;padding:9px}
.novel-card-info small{display:block;font-size:7.5px;letter-spacing:1.5px;color:#b088d6;margin-bottom:4px}
.novel-card-info strong{display:block;font-size:11.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.novel-card-info em{display:block;font-style:normal;font-size:9px;color:var(--hm-muted);margin-top:6px}

/* ---------- FORO ---------- */
.forum-portal{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:30px 24px;border-radius:var(--hm-radius);border:1px solid var(--hm-line);background:radial-gradient(circle at 85% 0%,rgba(168,92,255,.16),transparent 55%),var(--hm-panel)}
.forum-portal-glow{position:absolute;top:-60px;right:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(168,92,255,.35),transparent 70%);filter:blur(10px);pointer-events:none}
.forum-portal-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.forum-portal h2{margin:2px 0;font:600 clamp(19px,3vw,27px) Cinzel,serif;background:linear-gradient(135deg,#fff,#d9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.forum-portal p{margin:0;color:var(--hm-muted);font-size:12.5px;line-height:1.65;max-width:440px}
.forum-portal-stats{display:flex;gap:22px;margin-top:2px}
.forum-portal-stats div{display:flex;flex-direction:column;gap:2px}
.forum-portal-stats strong{font:700 20px Cinzel,serif;color:#fff}
.forum-portal-stats span{font-size:10px;color:var(--hm-muted);text-transform:uppercase;letter-spacing:.04em}
.forum-portal-cta{margin-top:6px}
.forum-portal-preview{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.forum-preview-card{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;border:1px solid var(--hm-line);background:rgba(255,255,255,.03);transition:.25s;min-width:0}
.forum-preview-card:hover{border-color:var(--cat-color,var(--hm-purple));background:rgba(168,92,255,.07);transform:translateY(-2px)}
.forum-preview-cat{align-self:flex-start;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cat-color,var(--hm-purple));padding:2px 8px;border-radius:999px;border:1px solid var(--cat-color,var(--hm-purple));background:color-mix(in srgb,var(--cat-color,var(--hm-purple)),transparent 85%)}
.forum-preview-card b{font-size:12.5px;color:#f4eefb;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.forum-preview-card small{font-size:10.5px;color:var(--hm-muted)}
.forum-preview-placeholder{align-items:center;justify-content:center;text-align:center;color:var(--hm-muted);grid-column:1/-1}
.forum-preview-placeholder span{font-size:22px;margin-bottom:4px}
@media(min-width:860px){.forum-portal{flex-direction:row;align-items:center;padding:34px 30px}.forum-portal-main{flex:0 0 auto;max-width:320px}.forum-portal-preview{flex:1}}

/* ---------- SIDEBAR PANELS ---------- */
.side-panel{background:var(--hm-panel);border:1px solid var(--hm-line);border-radius:var(--hm-radius);padding:16px}
.side-title{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--hm-purple-2)}
.side-title h3{margin:0;font-size:14px;font-weight:600;color:#fff}
/* =========================================================================
   MEJORES USUARIOS — panel "SYSTEM" (HUD estilo ventana de estado)
   ========================================================================= */
:root{--sys-cyan:#7ad7ff;--sys-cyan-2:#bdeeff;--sys-violet:#c99bff;--sys-line:rgba(122,215,255,.55)}

.users-panel{position:relative;overflow:hidden;isolation:isolate;border-color:rgba(122,215,255,.16)}
.users-panel:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background-image:
    linear-gradient(var(--sys-line),var(--sys-line)) top left/22px 2px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) top left/2px 22px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) top right/22px 2px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) top right/2px 22px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) bottom left/22px 2px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) bottom left/2px 22px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) bottom right/22px 2px no-repeat,
    linear-gradient(var(--sys-line),var(--sys-line)) bottom right/2px 22px no-repeat;
  animation:sysCornerFlicker 5s ease-in-out infinite;
}
.users-panel:after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sys-cyan-2),var(--sys-violet),transparent);
  background-size:250% 100%;animation:sysScanBar 5.5s linear infinite;filter:drop-shadow(0 0 4px rgba(122,215,255,.6));
}
@keyframes sysScanBar{to{background-position:-250% 0}}
@keyframes sysCornerFlicker{0%,100%{opacity:.55}50%{opacity:1}92%{opacity:.25}}
.users-panel .side-title{position:relative;z-index:1}
.users-panel .side-title span{color:var(--sys-cyan);text-shadow:0 0 8px rgba(122,215,255,.6);animation:sysIconPulse 2.6s ease-in-out infinite}
.users-panel .side-title h3{font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;font-size:12.5px}
.users-panel .side-title h3:after{content:"_";color:var(--sys-cyan);margin-left:3px;animation:sysCursorBlink 1.1s step-end infinite}
@keyframes sysIconPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(122,215,255,.5))}50%{filter:drop-shadow(0 0 9px rgba(122,215,255,.95))}}
@keyframes sysCursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

.user-ranking{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px}
.user-rank{
  position:relative;display:grid;grid-template-columns:22px 36px 1fr auto;align-items:center;gap:9px;
  padding:7px 8px;border-radius:4px;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  border:1px solid rgba(122,215,255,.14);background:rgba(122,215,255,.02);
  transition:transform .35s cubic-bezier(.22,.8,.22,1),border-color .35s,background .35s,box-shadow .35s;
}
.user-rank-bg{position:absolute;inset:0;background:var(--user-banner,none) center/cover;opacity:.15;z-index:0}
.user-rank:before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(122,215,255,.16) 50%,transparent 70%);
  background-size:220% 100%;background-position:120% 0;transition:opacity .3s;
}
.user-rank:hover{transform:translateX(5px);border-color:var(--rank-color,var(--sys-cyan));box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 16px rgba(122,215,255,.12)}
.user-rank:hover:before{opacity:1;animation:sysRowSweep 1s ease forwards}
@keyframes sysRowSweep{from{background-position:120% 0}to{background-position:-20% 0}}
.user-rank strong{position:relative;z-index:1;color:var(--hm-muted);font:700 11px 'DM Mono',monospace}
.user-avatar{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;overflow:hidden;
  border:1px solid var(--rank-color,var(--sys-cyan));
  box-shadow:0 0 0 2px rgba(5,4,10,.8),0 0 10px 1px var(--rank-color,var(--sys-cyan));
  animation:auraBreathe 3.2s ease-in-out infinite;transition:transform .35s cubic-bezier(.22,.8,.22,1);
}
.user-rank:hover .user-avatar{transform:scale(1.12) rotate(-4deg);box-shadow:0 0 0 2px rgba(5,4,10,.8),0 0 16px 3px var(--rank-color,var(--sys-cyan))}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.user-data{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.user-data b{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-data small{font-size:8.5px;color:var(--hm-muted);font-family:'DM Mono',monospace}
.rank-symbol{position:relative;z-index:1;color:var(--rank-color,var(--hm-purple));font-size:14px;transition:transform .3s ease}
.user-rank:hover .rank-symbol{transform:scale(1.25) rotate(-8deg);filter:drop-shadow(0 0 6px var(--rank-color,var(--sys-cyan)))}
@keyframes auraBreathe{0%,100%{box-shadow:0 0 0 2px rgba(5,4,10,.8),0 0 8px 0px var(--rank-color,var(--sys-cyan))}50%{box-shadow:0 0 0 2px rgba(5,4,10,.8),0 0 14px 2px var(--rank-color,var(--sys-cyan))}}
/* Podio top 3 en la mini-lista */
.user-ranking .user-rank:nth-child(1){border-color:rgba(255,208,110,.5)}
.user-ranking .user-rank:nth-child(1) .user-avatar{border-color:#ffd06e}
.user-ranking .user-rank:nth-child(2){border-color:rgba(210,212,228,.45)}
.user-ranking .user-rank:nth-child(3){border-color:rgba(226,152,102,.45)}

.side-more{position:relative;z-index:1;width:100%;margin-top:13px;height:38px;border-radius:4px;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));border:1px solid rgba(122,215,255,.25);background:rgba(122,215,255,.03);color:var(--sys-cyan-2);font:700 10.5px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.3s}
.side-more:hover{color:#fff;background:rgba(122,215,255,.1);border-color:var(--sys-cyan);box-shadow:0 0 18px rgba(122,215,255,.2)}
.explore-panel a{display:flex;align-items:center;gap:8px;padding:9px 4px;color:var(--hm-muted);font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.explore-panel a:last-child{border-bottom:0}
.explore-panel a:hover{color:#fff}
.explore-panel a b{margin-left:auto;color:#5c516a}
.support-panel{text-align:center;background:radial-gradient(circle at 50% 0,rgba(114,38,203,.22),transparent 60%),var(--hm-panel);border:1px solid var(--hm-line);border-radius:var(--hm-radius);padding:20px 16px}
.support-icon{display:block;font-size:20px;color:var(--hm-purple-2);margin-bottom:6px}
.support-panel small{display:block;color:#b088d6;font-size:9px;letter-spacing:2px;margin-bottom:8px}
.support-panel h3{margin:0 0 14px;font-size:13px;font-weight:600;line-height:1.5}
.support-panel a{display:inline-flex;height:38px;padding:0 16px;align-items:center;border-radius:9px;background:linear-gradient(135deg,#9d4eea,#6421bd);color:#fff;font-size:11px;font-weight:700}

/* ---------- FOOTER ---------- */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:26px 12px;border-top:1px solid var(--hm-line);color:#766d7d;font-size:11px}
.footer-brand{display:flex;align-items:center;gap:8px;margin-right:auto}
.footer-brand img{width:26px;height:26px}
.footer-brand strong{font:12px Cinzel,serif;color:#c9bdd3;letter-spacing:1px}
.footer-brand small{display:block;font-size:7px;letter-spacing:2px;color:#5c5265}

/* =========================================================================
   BUSCADOR (markup nuevo: .search-dialog / .search-close / .search-input /
   .search-count / .search-results / .search-result)
   ========================================================================= */
.search-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:0;background:rgba(3,2,7,.9);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.3s}
.search-overlay.open{opacity:1;visibility:visible}
.search-dialog{width:100%;height:100%;max-width:100%;background:linear-gradient(150deg,rgba(20,12,30,.98),rgba(6,4,10,.98));padding:20px 16px;position:relative;overflow-y:auto}
.search-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hm-line);background:rgba(255,255,255,.03);color:#fff;font-size:18px;cursor:pointer}
.search-dialog h2{margin:26px 0 14px;font:600 clamp(22px,6vw,32px) Cinzel,serif}
.search-dialog h2 em{font-style:normal;color:var(--hm-purple-2)}
.search-input{display:flex;align-items:center;gap:10px;border:1px solid var(--hm-line);border-radius:12px;background:#0b0810;padding:0 14px}
.search-input span{color:var(--hm-purple)}
.search-input input{flex:1;height:52px;background:none;border:0;outline:0;color:#fff;font-size:14px}
.search-input kbd{display:none;font-size:9px;color:#6a5f77;border:1px solid var(--hm-line);border-radius:5px;padding:3px 6px}
.search-count{margin:14px 2px;font-size:10px;letter-spacing:1px;color:var(--hm-muted)}
.search-results{display:flex;flex-direction:column;gap:4px}
.search-result{display:grid;grid-template-columns:22px 44px 1fr 18px;align-items:center;gap:10px;padding:8px;border-radius:10px}
.search-result:hover{background:rgba(255,255,255,.04)}
.search-result strong{color:#5c516a;font-size:11px}
.search-result img{width:44px;height:58px;border-radius:6px;object-fit:cover;display:block}
.search-result span:not(.open-result){min-width:0;display:flex;flex-direction:column;gap:2px}
.search-result b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result small{font-size:9px;color:var(--hm-muted)}
.open-result{color:var(--hm-muted)}
@media(min-width:700px){
  .search-overlay{align-items:center;padding:24px}
  .search-dialog{max-width:640px;height:auto;max-height:calc(100vh - 48px);border-radius:20px;border:1px solid var(--hm-line);box-shadow:0 40px 100px rgba(0,0,0,.55)}
  .search-input kbd{display:inline-block}
}

/* =========================================================================
   MODAL DE CAPÍTULOS (chapter-modal)
   ========================================================================= */
.chapter-modal{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
.chapter-modal.open{opacity:1;visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,2,7,.75);backdrop-filter:blur(6px)}
.modal-box{position:relative;width:100%;max-height:80vh;overflow-y:auto;background:linear-gradient(150deg,rgba(22,13,32,.98),rgba(7,5,11,.98));border:1px solid var(--hm-line);border-radius:18px 18px 0 0;padding:20px 16px 26px;transform:translateY(12px);transition:.3s}
.chapter-modal.open .modal-box{transform:none}
.modal-close{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--hm-line);background:rgba(255,255,255,.03);color:#fff;font-size:16px;cursor:pointer}
.modal-box h3{margin:10px 0 14px;font:600 18px Cinzel,serif}
.modal-list{display:flex;flex-direction:column;gap:4px}
.modal-list a{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:10px;padding:9px;border-radius:9px;border:1px solid transparent}
.modal-list a:hover{background:rgba(255,255,255,.04);border-color:var(--hm-line)}
.modal-list strong{color:var(--hm-purple-2);font-size:12px}
.modal-list span{display:flex;flex-direction:column;gap:1px;font-size:11.5px}
.modal-list small{font-size:8px;letter-spacing:1.5px;color:var(--hm-muted)}
.modal-list b{font-size:9px;font-weight:700;color:#5c516a}
@media(min-width:620px){
  .chapter-modal{align-items:center}
  .modal-box{width:min(420px,100%);border-radius:16px;max-height:70vh}
}

/* =========================================================================
   RANKING COMPLETO (user-ranking-modal)
   ========================================================================= */
/* =========================================================================
   RANKING COMPLETO (user-ranking-modal)
   ========================================================================= */
.user-ranking-modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;visibility:hidden;transition:.35s}
.user-ranking-modal.open{opacity:1;visibility:visible}
.user-ranking-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(30,120,180,.18),rgba(3,2,7,.92) 60%);backdrop-filter:blur(16px)}
.user-ranking-window{
  position:relative;width:min(94vw,540px);max-height:min(90vh,600px);overflow:hidden;
  border-radius:16px;padding:16px 14px 16px;isolation:isolate;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
/* marco HUD: esquinas cortadas + brackets luminosos, sin tocar el markup */
.user-ranking-window{
  background-image:
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top left/26px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top left/2px 26px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top right/26px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top right/2px 26px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom left/26px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom left/2px 26px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom right/26px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom right/2px 26px no-repeat,
    linear-gradient(165deg,rgba(10,16,28,.97),rgba(5,5,10,.99));
  filter:drop-shadow(0 0 0 transparent);
}
.user-ranking-window:before{
  content:"";position:absolute;inset:0 0 auto;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,#ffd06e,#c974ff,#7ad7ff,transparent);
  background-size:220% 100%;animation:rankBarSheen 6s linear infinite;
}
.user-ranking-window:after{
  content:"";position:absolute;left:0;right:0;top:-40%;height:40%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(122,215,255,.14),transparent);
  animation:sysWindowScan 4.5s ease-in-out infinite;
}
@keyframes sysWindowScan{0%{top:-40%}55%{top:100%}100%{top:100%}}
@keyframes rankBarSheen{to{background-position:-220% 0}}
.ranking-window-head .section-label{color:var(--sys-cyan-2);text-shadow:0 0 6px rgba(122,215,255,.5);font-family:'DM Mono',monospace}
.ranking-window-head .section-label:after{content:"_";animation:sysCursorBlink 1.1s step-end infinite}
.user-ranking-modal.open .ranking-window-head,
.user-ranking-modal.open .ranking-mascot-panel,
.user-ranking-modal.open .ranking-user-card,
.user-ranking-modal.open .ranking-current-bar{animation:rankFadeUp .55s cubic-bezier(.2,.8,.2,1) both}
.user-ranking-modal.open .ranking-mascot-panel{animation-delay:.05s}
.user-ranking-modal.open .ranking-current-bar{animation-delay:.1s}
@keyframes rankFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.user-ranking-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hm-line);background:rgba(255,255,255,.03);color:#fff;font-size:18px;cursor:pointer;z-index:4;transition:transform .3s,border-color .3s,background .3s}
.user-ranking-close:hover{transform:rotate(90deg);border-color:rgba(216,140,255,.6);background:rgba(157,64,240,.16)}
.ranking-window-head{margin:18px 0 12px}
.ranking-window-head h2{margin:6px 0;font:600 clamp(15px,4vw,20px) Cinzel,serif;background:linear-gradient(90deg,#f3e6ff,#c99bff 60%,#8b5cc9);-webkit-background-clip:text;background-clip:text;color:transparent}
.ranking-window-head p{margin:0;color:var(--hm-muted);font-size:10.5px}
.ranking-window-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(max-width:859px){.ranking-mascot-panel{display:none}}

.ranking-list-wrap{position:relative;max-height:294px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--sys-cyan) transparent}
.ranking-list-wrap::-webkit-scrollbar{width:5px}
.ranking-list-wrap::-webkit-scrollbar-thumb{background:var(--sys-cyan);border-radius:3px}
.ranking-list-wrap:after{
  content:"";position:sticky;bottom:0;left:0;right:0;display:block;height:26px;margin-top:-26px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,9,16,.9));z-index:2;
}

.ranking-mascot-panel{
  position:relative;border:1px solid rgba(122,215,255,.18);border-radius:10px;padding:12px 10px;text-align:center;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,rgba(122,215,255,.1),transparent 60%),rgba(255,255,255,.015);
}
.ranking-mascot-panel:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.75;
  background-image:
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top left/20px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top left/2px 20px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top right/20px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) top right/2px 20px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom left/20px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom left/2px 20px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom right/20px 2px no-repeat,
    linear-gradient(var(--sys-cyan),var(--sys-cyan)) bottom right/2px 20px no-repeat;
  animation:sysCornerFlicker 5s ease-in-out infinite;
}
.mascot-aura{position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(201,155,255,.32),transparent 65%);filter:blur(6px);animation:mascotAuraPulse 4s ease-in-out infinite}
@keyframes mascotAuraPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.mascot-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.mascot-stars i{position:absolute;font-style:normal;color:#e8cbff;text-shadow:0 0 8px #b875ff;animation:mascotTwinkle 3s ease-in-out infinite}
.mascot-stars i:nth-child(1){top:10%;left:12%;font-size:13px;animation-delay:0s}
.mascot-stars i:nth-child(2){top:16%;right:12%;font-size:9px;animation-delay:.6s}
.mascot-stars i:nth-child(3){bottom:26%;left:10%;font-size:7px;animation-delay:1.2s}
.mascot-stars i:nth-child(4){bottom:12%;right:14%;font-size:11px;animation-delay:1.8s}
@keyframes mascotTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
.mascot-stage{position:relative;z-index:1;max-width:110px;margin:0 auto}
.mascot-art svg{width:100%;height:auto;display:block;animation:mascotBob 3.4s ease-in-out infinite}
@keyframes mascotBob{50%{transform:translateY(-7px)}}
.mascot-art .mascot-orbit{transform-box:fill-box;transform-origin:center;animation:mascotOrbitSpin 11s linear infinite}
.mascot-art .mascot-sparkles{transform-box:fill-box;transform-origin:center;animation:mascotSparkle 2.3s ease-in-out infinite}
.mascot-art .mascot-moon{transform-box:fill-box;transform-origin:center;animation:mascotMoonGlow 2.8s ease-in-out infinite}
.mascot-art .mascot-tail{transform-box:fill-box;transform-origin:top center;animation:mascotTailSway 2.6s ease-in-out infinite}
@keyframes mascotOrbitSpin{to{transform:rotate(360deg)}}
@keyframes mascotSparkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes mascotMoonGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,201,120,.45))}50%{filter:drop-shadow(0 0 11px rgba(255,201,120,.95))}}
@keyframes mascotTailSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.mascot-dialog{position:relative;z-index:1;margin-top:7px;font-size:9.5px;color:var(--hm-muted)}
.mascot-dialog strong{display:block;color:#f0dcff;font:600 11px Cinzel,serif;margin-bottom:1px}

.ranking-list{display:flex;flex-direction:column;gap:7px}
.ranking-user-card{
  position:relative;display:grid;grid-template-columns:22px 38px 1fr auto;align-items:center;gap:9px;
  padding:7px 9px;overflow:hidden;border:1px solid rgba(122,215,255,.14);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  background:rgba(122,215,255,.02);transition:transform .35s cubic-bezier(.22,.8,.22,1),border-color .35s,box-shadow .35s,background .35s;
}
.ranking-user-card:before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(122,215,255,.14) 50%,transparent 70%);
  background-size:220% 100%;background-position:120% 0;transition:opacity .3s;
}
.ranking-user-card:hover:before{opacity:1;animation:sysRowSweep 1s ease forwards}
.ranking-list .ranking-user-card{animation:rankFadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.ranking-list .ranking-user-card:nth-child(1){animation-delay:.08s}
.ranking-list .ranking-user-card:nth-child(2){animation-delay:.12s}
.ranking-list .ranking-user-card:nth-child(3){animation-delay:.16s}
.ranking-list .ranking-user-card:nth-child(4){animation-delay:.2s}
.ranking-list .ranking-user-card:nth-child(5){animation-delay:.24s}
.ranking-list .ranking-user-card:nth-child(6){animation-delay:.28s}
.ranking-list .ranking-user-card:nth-child(7){animation-delay:.32s}
.ranking-list .ranking-user-card:nth-child(8){animation-delay:.36s}
.ranking-list .ranking-user-card:nth-child(9){animation-delay:.4s}
.ranking-list .ranking-user-card:nth-child(10){animation-delay:.44s}
.ranking-user-card:hover{transform:translateX(7px) translateY(-2px);border-color:var(--rank-color,var(--sys-cyan));box-shadow:0 14px 30px rgba(0,0,0,.3),0 0 18px rgba(122,215,255,.14)}
.ranking-card-bg{position:absolute;inset:0;background:var(--user-banner,none) center/cover;opacity:.18;z-index:0}
.ranking-card-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,4,10,.55),transparent 60%)}
.ranking-position{position:relative;z-index:1;color:var(--hm-muted);font:700 10.5px 'DM Mono',monospace;text-align:center}
.ranking-avatar{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;overflow:hidden;
  border:2px solid var(--rank-color,var(--sys-cyan));
  box-shadow:0 0 0 3px rgba(5,4,10,.75),0 0 10px 1px var(--rank-color,var(--sys-cyan));
  animation:auraBreathe 3.4s ease-in-out infinite;transition:transform .35s cubic-bezier(.22,.8,.22,1);
}
.ranking-user-card:hover .ranking-avatar{transform:scale(1.1) rotate(-4deg);box-shadow:0 0 0 3px rgba(5,4,10,.75),0 0 18px 3px var(--rank-color,var(--sys-cyan))}
.ranking-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ranking-user-info{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:0}
.ranking-user-info b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-user-info small{font-size:8px;color:var(--hm-muted)}
.ranking-user-info em{font-style:normal;font-size:7px;color:var(--sys-cyan-2);font-family:'DM Mono',monospace}
.ranking-rank{position:relative;z-index:1;text-align:center;color:var(--rank-color,var(--hm-purple))}
.ranking-rank strong{display:block;font-size:14px;transition:transform .3s;filter:drop-shadow(0 0 4px currentColor)}
.ranking-rank small{display:block;font-size:6px;letter-spacing:1px;color:var(--hm-muted);font-family:'DM Mono',monospace}
.ranking-user-card:hover .ranking-rank strong{transform:scale(1.25) rotate(-8deg)}

/* Podio top 3 */
.ranking-list .ranking-user-card:nth-child(1){border-color:rgba(255,208,110,.55);background:linear-gradient(90deg,rgba(255,208,110,.16),rgba(255,255,255,.015) 70%);box-shadow:0 0 0 1px rgba(255,208,110,.12) inset}
.ranking-list .ranking-user-card:nth-child(1) .ranking-avatar{border-color:#ffd06e;box-shadow:0 0 0 3px rgba(255,208,110,.14),0 0 20px rgba(255,208,110,.35)}
.ranking-list .ranking-user-card:nth-child(1) .ranking-position{color:#ffd06e;display:flex;flex-direction:column;align-items:center;gap:2px}
.ranking-list .ranking-user-card:nth-child(1) .ranking-position:before{content:"♛";font-size:14px;text-shadow:0 0 10px rgba(255,208,110,.7)}
.ranking-list .ranking-user-card:nth-child(2){border-color:rgba(210,212,228,.5);background:linear-gradient(90deg,rgba(210,212,228,.12),rgba(255,255,255,.015) 70%)}
.ranking-list .ranking-user-card:nth-child(2) .ranking-avatar{border-color:#d2d4e4;box-shadow:0 0 0 3px rgba(210,212,228,.12),0 0 16px rgba(210,212,228,.3)}
.ranking-list .ranking-user-card:nth-child(2) .ranking-position{color:#d2d4e4;display:flex;flex-direction:column;align-items:center;gap:2px}
.ranking-list .ranking-user-card:nth-child(2) .ranking-position:before{content:"✦";font-size:12px;text-shadow:0 0 8px rgba(210,212,228,.6)}
.ranking-list .ranking-user-card:nth-child(3){border-color:rgba(226,152,102,.5);background:linear-gradient(90deg,rgba(226,152,102,.14),rgba(255,255,255,.015) 70%)}
.ranking-list .ranking-user-card:nth-child(3) .ranking-avatar{border-color:#e29866;box-shadow:0 0 0 3px rgba(226,152,102,.12),0 0 16px rgba(226,152,102,.3)}
.ranking-list .ranking-user-card:nth-child(3) .ranking-position{color:#e29866;display:flex;flex-direction:column;align-items:center;gap:2px}
.ranking-list .ranking-user-card:nth-child(3) .ranking-position:before{content:"✦";font-size:11px;text-shadow:0 0 8px rgba(226,152,102,.6)}

.ranking-current-bar{
  position:relative;margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid rgba(122,215,255,.28);background:linear-gradient(90deg,rgba(122,215,255,.08),rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(122,215,255,.05) inset,0 16px 40px rgba(0,0,0,.25);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.current-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--sys-cyan);box-shadow:0 0 12px rgba(122,215,255,.5);animation:auraBreathe 3s ease-in-out infinite}
.current-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.current-copy{display:flex;flex-direction:column;gap:1px}
.current-copy small{font-size:6.5px;letter-spacing:1.3px;color:var(--sys-cyan-2);font-family:'DM Mono',monospace}
.current-copy strong{font-size:11.5px;font-family:'DM Mono',monospace}
.current-rank-icon{color:var(--rank-color,var(--hm-purple));font-size:15px;margin-left:auto;filter:drop-shadow(0 0 8px currentColor)}
.current-mini-dialog{display:none}
.ranking-window-foot{margin-top:10px;font-size:9px;color:var(--hm-muted)}
.ranking-window-foot span{display:block;color:#c99bff;letter-spacing:1px;margin-bottom:3px}
@media(min-width:860px){
  .user-ranking-window{width:min(560px,calc(100% - 40px))}
  .ranking-window-grid{grid-template-columns:150px 1fr}
  .current-mini-dialog{display:flex;align-items:center;gap:8px;margin-left:12px;font-size:9px;color:var(--hm-muted)}
  .current-mini-dialog .mascot-art{width:30px}
  .current-mini-dialog .mascot-art svg{animation:none}
}

/* ========================================================
   FORO GENERAL — añadido para las páginas /foro, /foro/{categoria}, /foro/tema/{id}
   ======================================== */
.foro-migas{font-size:11px;color:var(--hm-muted);margin:16px 0}
.foro-migas a{color:var(--hm-purple-2)}
.foro-migas i{margin:0 4px;opacity:.6;font-style:normal}

.foro-portada{padding-bottom:60px}
.foro-categorias{display:grid;gap:12px;margin-top:18px}
.foro-categoria-card{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--hm-radius);border:1px solid var(--hm-line);background:var(--hm-panel);text-decoration:none;color:inherit;transition:.2s}
.foro-categoria-card:hover{border-color:var(--cat-color,var(--hm-purple));background:rgba(168,92,255,.06)}
.foro-categoria-icono{font-size:24px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--hm-line)}
.foro-categoria-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.foro-categoria-info b{font-size:14px;color:#fff}
.foro-categoria-info small{font-size:11px;color:var(--hm-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foro-categoria-stats{display:none;flex-direction:column;align-items:center;text-align:center;min-width:56px}
.foro-categoria-stats b{font-size:15px;color:#fff}
.foro-categoria-stats small{font-size:9px;color:var(--hm-muted);text-transform:uppercase;letter-spacing:.5px}
.foro-categoria-ultimo{display:none;flex-direction:column;gap:2px;text-align:right;max-width:220px}
.foro-categoria-ultimo b{font-size:11px;color:var(--hm-purple-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foro-categoria-ultimo small{font-size:10px;color:var(--hm-muted)}
@media(min-width:760px){
  .foro-categoria-stats,.foro-categoria-ultimo{display:flex}
}

.foro-hilos-lista{display:grid;gap:8px;margin-top:8px}
.foro-hilo-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--hm-line);background:rgba(255,255,255,.02);text-decoration:none;color:inherit;transition:.2s}
.foro-hilo-row:hover{background:rgba(168,92,255,.07);border-color:var(--hm-purple)}
.foro-hilo-row.is-fijado{border-color:rgba(201,155,255,.5);background:rgba(168,92,255,.05)}
.foro-hilo-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.foro-hilo-info b{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foro-hilo-info small{font-size:11px;color:var(--hm-muted)}
.foro-hilo-stats{display:none;flex-direction:column;align-items:center;min-width:56px}
.foro-hilo-stats b{font-size:14px;color:#fff}
.foro-hilo-stats small{font-size:9px;color:var(--hm-muted);text-transform:uppercase;letter-spacing:.5px}
@media(min-width:640px){.foro-hilo-stats{display:flex}}

.foro-nuevo-tema{display:grid;gap:10px;padding:16px;border-radius:var(--hm-radius);border:1px solid var(--hm-line);background:var(--hm-panel);margin:12px 0}
.foro-nuevo-tema input,.foro-nuevo-tema textarea{background:rgba(255,255,255,.03);border:1px solid var(--hm-line);border-radius:9px;color:#fff;padding:11px 12px;font-size:13px;font-family:inherit;resize:vertical}
.foro-nuevo-tema textarea{min-height:110px}

.foro-hilo-op{display:flex;gap:14px;padding:18px;border-radius:var(--hm-radius);border:1px solid var(--hm-line);background:var(--hm-panel);margin-top:16px}
.foro-hilo-op-cuerpo{flex:1;min-width:0}
.foro-hilo-op-cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.foro-hilo-op-cabecera h1{margin:0 0 4px;font:600 clamp(16px,3vw,20px) Cinzel,serif}
.foro-hilo-op-cabecera small{font-size:11px;color:var(--hm-muted)}

/* ================= FORO GENERAL — mejora de diseño y animaciones =================
   Arregla clases que faltaban (por eso solo se veía el mensaje suelto sin tarjetas,
   avatares ni botones: .comentario, .comentario-avatar, .comment-form, .comments-head,
   .comentario-btn, .comment-toast, etc. no existían) y añade animaciones sutiles
   coherentes con el resto del sitio (mismas keyframes: cardIn, float). */

/* --- Entrada y hover de tarjetas de categoría / hilos --- */
.foro-categoria-card{animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden;isolation:isolate}
.foro-categoria-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s;pointer-events:none;z-index:0}
.foro-categoria-card:hover:before{transform:translateX(120%)}
.foro-categoria-card:hover{transform:translateY(-3px)}
.foro-categoria-card > *{position:relative;z-index:1}
.foro-categoria-icono{transition:transform .3s,box-shadow .3s;box-shadow:0 0 0 rgba(0,0,0,0)}
.foro-categoria-card:hover .foro-categoria-icono{transform:translateY(-2px) scale(1.06);box-shadow:0 0 22px color-mix(in srgb,var(--cat-color,var(--hm-purple)),transparent 55%);border-color:var(--cat-color,var(--hm-purple))}
.foro-hilo-row{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
.foro-hilo-row:hover{transform:translateY(-2px)}
.foro-hilo-row.is-fijado{position:relative}
.foro-hilo-row.is-fijado:after{content:"";position:absolute;left:0;top:10%;bottom:10%;width:3px;border-radius:3px;background:linear-gradient(var(--hm-purple),var(--hm-purple-2));box-shadow:0 0 10px var(--hm-purple)}
.comentario-pin{animation:float 3s ease-in-out infinite}
.foro-categoria-card:nth-child(1){animation-delay:.03s}.foro-categoria-card:nth-child(2){animation-delay:.08s}.foro-categoria-card:nth-child(3){animation-delay:.13s}.foro-categoria-card:nth-child(4){animation-delay:.18s}.foro-categoria-card:nth-child(5){animation-delay:.23s}.foro-categoria-card:nth-child(6){animation-delay:.28s}.foro-categoria-card:nth-child(7){animation-delay:.33s}.foro-categoria-card:nth-child(8){animation-delay:.38s}
.foro-hilo-row:nth-child(1){animation-delay:.02s}.foro-hilo-row:nth-child(2){animation-delay:.06s}.foro-hilo-row:nth-child(3){animation-delay:.10s}.foro-hilo-row:nth-child(4){animation-delay:.14s}.foro-hilo-row:nth-child(5){animation-delay:.18s}.foro-hilo-row:nth-child(6){animation-delay:.22s}.foro-hilo-row:nth-child(7){animation-delay:.26s}.foro-hilo-row:nth-child(8){animation-delay:.30s}.foro-hilo-row:nth-child(9){animation-delay:.34s}.foro-hilo-row:nth-child(10){animation-delay:.38s}
.foro-migas{animation:cardIn .4s ease both}
.foro-hilo-op{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}
.foro-hilo-op:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--hm-purple),transparent)}

/* --- Botones .btn: pulido general (usado en "+Nuevo tema", login, etc.) --- */
.btn{cursor:pointer;transition:transform .25s,box-shadow .25s,filter .25s;justify-content:center}
.btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 28px rgba(157,78,234,.35)}
.btn.secondary:hover{transform:translateY(-2px);border-color:var(--hm-purple);color:#fff}
.btn.primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* --- Avatar base (fuera de .comentarios-lista no tenía NINGÚN estilo) --- */
.comentario-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--hm-line);background:#0b0710}

/* --- Tarjeta de comentario/respuesta base (antes no tenía display, padding ni fondo) --- */
.comentario{display:flex;gap:12px;align-items:flex-start;position:relative;animation:cardIn .45s cubic-bezier(.2,.8,.2,1) both}
.comentario-cuerpo{flex:1;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid var(--hm-line);background:rgba(255,255,255,.025);transition:border-color .3s,background .3s}
.comentario-cuerpo:hover{border-color:color-mix(in srgb,var(--hm-purple),transparent 45%)}
.comentario-respuestas{display:flex;flex-direction:column;gap:12px}
.comentario-respuestas:not(:empty){margin-top:12px;padding-left:18px;border-left:2px solid var(--hm-line)}
.comentario-eliminado .comentario-cuerpo{opacity:.55}
.comentarios-lista{display:flex;flex-direction:column;gap:14px}
.comentarios-lista .comentario:nth-child(1){animation-delay:.02s}.comentarios-lista .comentario:nth-child(2){animation-delay:.06s}.comentarios-lista .comentario:nth-child(3){animation-delay:.10s}.comentarios-lista .comentario:nth-child(4){animation-delay:.14s}.comentarios-lista .comentario:nth-child(5){animation-delay:.18s}

/* --- Acciones del comentario: like / responder / editar / eliminar / reportar --- */
.comentario-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.comentario-btn,.comentario-like{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--hm-line);background:rgba(255,255,255,.02);color:var(--hm-muted);font-size:10.5px;font-weight:700;cursor:pointer;transition:.25s;white-space:nowrap}
.comentario-btn:hover{border-color:var(--hm-purple);color:#fff;background:rgba(168,92,255,.08);transform:translateY(-1px)}
.comentario-btn-danger{color:#ff9db0;border-color:rgba(255,90,120,.25)}
.comentario-btn-danger:hover{border-color:#ff5c7a;color:#fff;background:rgba(255,92,120,.12)}
.comentario-like .ci-corazon{font-size:11px;transition:transform .25s}
.comentario-like:hover{border-color:#ff5c8a;color:#ff9db8}
.comentario-like.is-liked{color:#ff5c8a;border-color:rgba(255,92,138,.45);background:rgba(255,92,138,.08)}
.comentario-like.is-liked .ci-corazon{animation:foroLikePop .4s ease}
.comentario-like-count{font-size:10px;min-width:4px}
@keyframes foroLikePop{0%{transform:scale(1)}45%{transform:scale(1.4) rotate(-10deg)}100%{transform:scale(1)}}

/* --- Formularios de respuesta rápida / edición inline --- */
.comment-reply-form,.comment-edit-form{display:flex;gap:10px;margin-top:12px;align-items:flex-start;animation:cardIn .3s ease both}
.comment-reply-form textarea,.comment-edit-form textarea{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--hm-line);border-radius:9px;color:#fff;padding:9px 11px;font-size:12.5px;font-family:inherit;resize:vertical;min-height:60px;transition:border-color .25s,box-shadow .25s}
.comment-reply-form textarea:focus,.comment-edit-form textarea:focus{outline:none;border-color:var(--hm-purple);box-shadow:0 0 0 3px rgba(168,92,255,.12)}
.comment-mini-actions{display:flex;gap:8px;margin-top:8px}
.comment-mini-actions button{border:1px solid var(--hm-line);background:rgba(255,255,255,.02);color:var(--hm-muted);font-size:11px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;transition:.2s}
.comment-mini-actions button:hover{color:#fff;border-color:var(--hm-purple)}
.comment-mini-actions button.primary{background:linear-gradient(135deg,#9d4eea,#6421bd);color:#fff;border-color:#bd79ff}
.comment-mini-actions button.primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(157,78,234,.3)}

/* --- Cabecera de la sección de respuestas + orden --- */
.comments-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 14px}
.comments-head h2{font:600 16px Cinzel,serif;margin:0;display:flex;align-items:center;gap:8px;color:#fff}
.comments-count{color:var(--hm-muted);font-size:12px;font-weight:500}
.comments-sort{display:flex;gap:4px;padding:4px;border:1px solid var(--hm-line);border-radius:999px;background:rgba(255,255,255,.02)}
.comments-sort button{border:0;background:transparent;color:var(--hm-muted);font-size:11px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.25s}
.comments-sort button:hover{color:#fff}
.comments-sort button.active{background:linear-gradient(135deg,rgba(168,92,255,.24),rgba(168,92,255,.06));color:#fff;box-shadow:0 0 16px rgba(168,92,255,.18)}

/* --- Formulario de respuesta principal (antes .comment-form no existía) --- */
.comment-form{display:flex;gap:12px;padding:16px;border-radius:var(--hm-radius);border:1px solid var(--hm-line);background:var(--hm-panel);margin-bottom:18px;animation:cardIn .4s ease both}
.comment-form-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.comment-form-body textarea{background:rgba(255,255,255,.03);border:1px solid var(--hm-line);border-radius:9px;color:#fff;padding:11px 12px;font-size:13px;font-family:inherit;resize:vertical;min-height:80px;transition:border-color .25s,box-shadow .25s}
.comment-form-body textarea:focus{outline:none;border-color:var(--hm-purple);box-shadow:0 0 0 3px rgba(168,92,255,.12)}
.comment-form-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.comment-counter{font-size:10.5px;color:var(--hm-muted)}
.comment-submit{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;border-radius:10px;border:1px solid #bd79ff;background:linear-gradient(135deg,#9d4eea,#6421bd);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:transform .25s,box-shadow .25s,opacity .25s}
.comment-submit:disabled{opacity:.4;cursor:not-allowed}
.comment-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px rgba(157,78,234,.3)}

/* --- Adjuntar imagen a comentarios/respuestas del foro --- */
.comment-reply-form-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.comment-reply-form-body textarea{width:100%;box-sizing:border-box}
.comment-image-attach{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--hm-line);background:rgba(255,255,255,.02);color:var(--hm-muted);font-size:10.5px;font-weight:700;cursor:pointer;transition:.25s;white-space:nowrap}
.comment-image-attach:hover{border-color:var(--hm-purple);color:#fff;background:rgba(168,92,255,.08)}
.comment-form-foot{justify-content:flex-start}
.comment-form-foot .comment-submit{margin-left:auto}
.comment-image-preview{position:relative;display:inline-flex;width:fit-content;max-width:220px;border-radius:10px;overflow:hidden;border:1px solid var(--hm-line)}
.comment-image-preview img{display:block;max-width:100%;max-height:160px;object-fit:cover}
.comment-image-preview button{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(10,6,16,.75);color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.comment-image-preview button:hover{background:#ff5c7a}
.comentario-imagen{display:block;margin-top:10px;max-width:320px;border-radius:12px;overflow:hidden;border:1px solid var(--hm-line);cursor:zoom-in;transition:border-color .25s,transform .25s}
.comentario-imagen:hover{border-color:var(--hm-purple);transform:translateY(-1px)}
.comentario-imagen img{display:block;width:100%;max-height:340px;object-fit:cover}
.comment-lightbox{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:rgba(4,2,8,.88);backdrop-filter:blur(4px);cursor:zoom-out;padding:30px}
.comment-lightbox.is-visible{display:flex}
.comment-lightbox img{max-width:min(92vw,900px);max-height:88vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain}
.comment-lightbox button{position:absolute;top:22px;right:26px;width:38px;height:38px;border-radius:50%;border:1px solid var(--hm-line);background:rgba(20,12,30,.8);color:#fff;font-size:15px;cursor:pointer}
.comment-lightbox button:hover{border-color:var(--hm-purple);background:rgba(168,92,255,.18)}
@media(max-width:650px){.comentario-imagen{max-width:100%}}

/* --- Aviso para iniciar sesión --- */
.comment-login-prompt{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 16px;border-radius:12px;border:1px dashed var(--hm-line);color:var(--hm-muted);font-size:12.5px;margin-bottom:18px;background:rgba(255,255,255,.015)}
.comment-login-prompt a{color:#fff;font-weight:700;text-decoration:none;border:1px solid var(--hm-purple-2);padding:8px 14px;border-radius:8px;transition:.25s;background:rgba(168,92,255,.08)}
.comment-login-prompt a:hover{background:rgba(168,92,255,.18);box-shadow:0 0 16px rgba(168,92,255,.25)}

/* --- Estado vacío y "cargar más" --- */
.comments-empty{text-align:center;padding:40px 20px;color:var(--hm-muted);font-size:12.5px;border:1px dashed var(--hm-line);border-radius:12px}
.comments-load-more{display:block;width:100%;text-align:center;padding:12px;margin-top:14px;border-radius:10px;border:1px solid var(--hm-line);background:rgba(255,255,255,.02);color:var(--hm-purple-2);font-size:12px;font-weight:700;cursor:pointer;transition:.25s}
.comments-load-more:hover{border-color:var(--hm-purple);color:#fff;background:rgba(168,92,255,.1);transform:translateY(-1px)}

/* --- Toast flotante (antes .comment-toast no existía: los avisos no se veían) --- */
.comment-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);padding:12px 22px;border-radius:999px;background:rgba(15,10,22,.96);border:1px solid var(--hm-purple);color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 15px 40px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);z-index:200;max-width:90vw;text-align:center}
.comment-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- Formulario de nuevo tema: revelado animado en vez de display:none/'' instantáneo --- */
.foro-nuevo-tema{max-height:0;opacity:0;padding:0 16px;margin:0;border-width:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,padding .4s ease,margin .4s ease,border-width .4s ease}
.foro-nuevo-tema.is-open{max-height:420px;opacity:1;padding:16px;margin:12px 0;border-width:1px}
.foro-nuevo-tema input:focus,.foro-nuevo-tema textarea:focus{outline:none;border-color:var(--hm-purple);box-shadow:0 0 0 3px rgba(168,92,255,.12)}



/* ================= FORO — tarjetas de categoría rediseñadas (v2, con botón) ================= */
.foro-categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.foro-categoria-card{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:var(--hm-radius);border:1px solid var(--hm-line);background:radial-gradient(circle at 88% -10%,color-mix(in srgb,var(--cat-color,var(--hm-purple)),transparent 82%),transparent 55%),var(--hm-panel);text-decoration:none;color:inherit;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s,border-color .3s,box-shadow .3s}
.foro-categoria-card:hover{border-color:color-mix(in srgb,var(--cat-color,var(--hm-purple)),transparent 30%);box-shadow:0 18px 45px rgba(0,0,0,.3)}
.foro-categoria-top{display:flex;align-items:center;gap:14px}
.foro-categoria-icono{flex:none;width:50px;height:50px;font-size:24px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--cat-color,var(--hm-purple)),transparent 88%);border:1px solid color-mix(in srgb,var(--cat-color,var(--hm-purple)),transparent 55%)}
.foro-categoria-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.foro-categoria-info b{font:600 15px Cinzel,serif;color:#fff}
.foro-categoria-info small{font-size:11.5px;color:var(--hm-muted);white-space:normal;line-height:1.5}
.foro-categoria-meta{display:flex;gap:16px}
.foro-categoria-meta span{font-size:10.5px;color:var(--hm-muted);letter-spacing:.2px}
.foro-categoria-meta b{color:#fff;font-size:12.5px;margin-right:3px}
.foro-categoria-ultimo{border-top:1px solid var(--hm-line);padding-top:10px;min-height:16px}
.foro-categoria-ultimo small{font-size:10.5px;color:var(--hm-muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foro-categoria-ultimo small b{color:var(--hm-purple-2);font-weight:700}
.foro-categoria-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:8px 14px;border-radius:999px;border:1px solid var(--hm-line);background:rgba(255,255,255,.03);color:var(--hm-purple-2);font-size:11px;font-weight:700;transition:.25s}
.foro-categoria-btn b{transition:transform .25s}
.foro-categoria-card:hover .foro-categoria-btn{background:linear-gradient(135deg,#9d4eea,#6421bd);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(157,78,234,.3)}
.foro-categoria-card:hover .foro-categoria-btn b{transform:translateX(3px)}

/* --- Fila de tema con botón "Abrir" --- */
.foro-hilo-row{grid-template-columns:auto 1fr auto auto auto}
.foro-hilo-abrir{display:none;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;border:1px solid var(--hm-line);color:var(--hm-purple-2);font-size:10.5px;font-weight:700;white-space:nowrap;transition:.25s}
.foro-hilo-abrir b{transition:transform .25s}
.foro-hilo-row:hover .foro-hilo-abrir{background:linear-gradient(135deg,#9d4eea,#6421bd);color:#fff;border-color:transparent}
.foro-hilo-row:hover .foro-hilo-abrir b{transform:translateX(3px)}
@media(min-width:640px){.foro-hilo-abrir{display:inline-flex}}

/* =========================================================================
   FORO — REDISEÑO "OBSERVATORIO"
   Nueva identidad visual para el foro: mapa estelar animado, coherente con
   el resto del sitio (paleta violeta, tipografía Cinzel, motivos de
   constelación que ya existen en otras páginas). 100% CSS, sin depender de
   JS ni cambiar el HTML/PHP existente.
   ========================================================================= */

:root{
  --obs-bg:#07050d;
  --obs-panel:#0d0a16;
  --obs-panel-2:#110c1c;
  --obs-line:rgba(196,152,255,.16);
  --obs-line-soft:rgba(196,152,255,.09);
  --obs-text:#f4eef9;
  --obs-muted:#948aa3;
  --obs-accent:#b479ff;
  --obs-accent-2:#7c3fd1;
  --obs-cyan:#68d9e8;
  --obs-gold:#f0c975;
}

/* ---------- Fondo general de las páginas del foro ---------- */
.foro-nuevo-layout{
  position:relative;
  max-width:1120px!important;
  padding-bottom:90px;
}
.foro-migas{
  margin:22px 0 16px!important;
  font-size:9px!important;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#665d73!important;
}
.foro-migas a{color:var(--obs-accent)!important}

/* ---------- HERO: cúpula de observatorio con estrellas y constelaciones ---------- */
.foro-hero-pro{
  position:relative!important;
  min-height:300px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:30px!important;
  padding:46px 46px!important;
  overflow:hidden!important;
  border:1px solid var(--obs-line)!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 18% 20%,rgba(180,121,255,.16),transparent 38%),
    radial-gradient(circle at 82% 75%,rgba(104,217,232,.08),transparent 40%),
    linear-gradient(160deg,var(--obs-panel-2) 0%,var(--obs-bg) 70%)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.4)!important;
  isolation:isolate;
}
/* campo de estrellas, generado sin marcado extra */
.foro-hero-pro:before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.9;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 24% 68%,#e6d3ff,transparent),
    radial-gradient(1.8px 1.8px at 38% 12%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 52% 55%,#cdb6ff,transparent),
    radial-gradient(1.6px 1.6px at 64% 30%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 74% 70%,#e6d3ff,transparent),
    radial-gradient(1.8px 1.8px at 85% 18%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 92% 60%,#cdb6ff,transparent),
    radial-gradient(1.5px 1.5px at 6% 80%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 45% 85%,#fff,transparent);
  background-repeat:no-repeat;
  animation:obsTwinkle 4.5s ease-in-out infinite;
}
.foro-hero-pro:after{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:180%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(180,121,255,.10),transparent 60%);
  animation:obsDrift 12s ease-in-out infinite alternate;
}
@keyframes obsTwinkle{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes obsDrift{0%{transform:translate(-4%,-2%) scale(1)}100%{transform:translate(4%,3%) scale(1.08)}}

/* las dos órbitas que ya existían en el HTML pero no tenían estilo */
.foro-hero-pro-orbit{
  position:absolute;z-index:1;border-radius:50%;
  border:1px solid rgba(196,152,255,.16);
  pointer-events:none;
}
.foro-hero-pro-orbit.orbit-a{width:420px;height:420px;right:-140px;top:50%;transform:translateY(-50%);animation:obsOrbitSpin 38s linear infinite}
.foro-hero-pro-orbit.orbit-b{width:280px;height:280px;right:-70px;top:50%;transform:translateY(-50%);border-style:dashed;opacity:.6;animation:obsOrbitSpin 26s linear infinite reverse}
.foro-hero-pro-orbit.orbit-a:before,.foro-hero-pro-orbit.orbit-a:after{
  content:"";position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--obs-accent);box-shadow:0 0 12px var(--obs-accent);
}
.foro-hero-pro-orbit.orbit-a:before{top:-2.5px;left:50%}
.foro-hero-pro-orbit.orbit-a:after{bottom:18%;right:-2.5px;background:var(--obs-cyan);box-shadow:0 0 12px var(--obs-cyan)}
@keyframes obsOrbitSpin{to{transform:translateY(-50%) rotate(360deg)}}

.foro-hero-copy{position:relative;z-index:2;max-width:600px}
.foro-kicker{
  font-size:9px!important;letter-spacing:3px!important;font-weight:800!important;
  color:var(--obs-accent)!important;text-transform:uppercase;
}
.foro-hero-copy h1{
  margin:12px 0 12px!important;color:var(--obs-text)!important;
  font:600 clamp(28px,4vw,44px) Cinzel,Georgia,serif!important;letter-spacing:-.6px!important;line-height:1.05!important;
}
.foro-hero-copy h1 em{
  font-style:normal;background:linear-gradient(100deg,#fff,var(--obs-accent) 45%,#f2e3ff);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:obsShimmer 5s ease-in-out infinite;
}
@keyframes obsShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.foro-hero-copy p{max-width:520px!important;margin:0!important;color:var(--obs-muted)!important;font-size:12.5px!important;line-height:1.75!important}
.foro-hero-actions{display:flex!important;align-items:center!important;gap:16px!important;flex-wrap:wrap;margin-top:24px!important}
.foro-new-btn{
  position:relative;display:inline-flex!important;align-items:center!important;gap:8px!important;
  min-height:44px!important;padding:0 20px!important;border-radius:999px!important;
  border:1px solid rgba(205,153,255,.5)!important;
  background:linear-gradient(135deg,var(--obs-accent),var(--obs-accent-2))!important;
  color:#fff!important;font-size:12px!important;font-weight:800!important;text-decoration:none;cursor:pointer;
  box-shadow:0 14px 32px rgba(140,66,220,.32)!important;transition:.25s!important;overflow:hidden;
}
.foro-new-btn:before{
  content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%);transition:.5s;
}
.foro-new-btn:hover{transform:translateY(-2px)!important;box-shadow:0 18px 40px rgba(140,66,220,.45)!important}
.foro-new-btn:hover:before{transform:translateX(120%)}
.foro-new-btn span{font-size:16px;line-height:1}
.foro-hero-note{font-size:11px!important;color:#6f6579!important}
.foro-hero-note b{color:var(--obs-text)!important;margin-right:4px}

/* Emblema: núcleo estelar con anillos, reemplaza el disco plano anterior */
.foro-hero-emblem{position:relative;z-index:2;width:170px;height:170px;flex:0 0 170px;display:grid;place-items:center}
.foro-emblem-ring{position:absolute;border:1px solid rgba(196,152,255,.28);border-radius:50%;inset:10px;animation:obsOrbitSpin 16s linear infinite}
.foro-emblem-ring.ring-2{inset:28px;border-style:dashed;opacity:.7;animation-duration:11s;animation-direction:reverse}
.foro-emblem-core{
  position:relative;width:88px;height:88px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 50% 35%,rgba(205,153,255,.3),rgba(24,14,38,.94));
  border:1px solid rgba(216,175,255,.4);
  box-shadow:0 0 50px rgba(158,75,232,.3),inset 0 0 22px rgba(255,255,255,.05);
  animation:obsCoreFloat 3.6s ease-in-out infinite;
}
.foro-emblem-core span{font-size:28px;color:#e6c8ff;text-shadow:0 0 16px rgba(200,140,255,.7)}
.foro-emblem-core small{font-size:7.5px;letter-spacing:2.5px;color:#ad9ec0;font-weight:800}
@keyframes obsCoreFloat{50%{transform:translateY(-6px)}}

/* ---------- Títulos de sección ---------- */
.foro-section-title{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:16px;margin:40px 0 16px!important}
.foro-section-title>div>span,.foro-section-title>span{font-size:9px!important;letter-spacing:2.4px!important;color:var(--obs-accent)!important;font-weight:800!important;text-transform:uppercase}
.foro-section-title h2{margin:6px 0 0!important;color:var(--obs-text)!important;font:600 22px Cinzel,Georgia,serif!important}
.foro-section-title>small{font-size:10px!important;color:#655c70!important}

/* ---------- Categorías: "estrellas" del mapa ---------- */
.foro-cat-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.foro-cat-pro{
  position:relative!important;display:grid!important;grid-template-columns:auto 1fr auto auto!important;align-items:center!important;
  gap:14px!important;min-height:82px!important;padding:16px 18px!important;
  border:1px solid rgba(255,255,255,.07)!important;border-radius:18px!important;
  background:linear-gradient(150deg,rgba(255,255,255,.032),rgba(255,255,255,.01))!important;
  color:inherit;text-decoration:none;overflow:hidden;transition:.28s!important;
}
.foro-cat-pro:before{
  content:"";position:absolute;inset:0;opacity:0;transition:.3s;pointer-events:none;
  background:radial-gradient(circle at 0% 50%,color-mix(in srgb,var(--cat-color),transparent 74%),transparent 60%);
}
.foro-cat-pro:hover,.foro-cat-pro.is-active{
  transform:translateY(-3px)!important;
  border-color:color-mix(in srgb,var(--cat-color),transparent 40%)!important;
  box-shadow:0 18px 36px rgba(0,0,0,.25),0 0 26px color-mix(in srgb,var(--cat-color),transparent 80%)!important;
}
.foro-cat-pro:hover:before,.foro-cat-pro.is-active:before{opacity:1}
.foro-cat-icon{
  position:relative;width:44px!important;height:44px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  font-size:19px!important;background:rgba(255,255,255,.04)!important;border:1px solid color-mix(in srgb,var(--cat-color),transparent 55%)!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.015);
}
.foro-cat-icon:after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cat-color),transparent 55%);opacity:0;transition:.3s;
}
.foro-cat-pro:hover .foro-cat-icon:after{opacity:.55;inset:-9px}
.foro-cat-main{min-width:0;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.foro-cat-main b{font-size:13px!important;color:var(--obs-text)!important}
.foro-cat-main small{font-size:10.5px!important;color:#8a8093!important;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foro-cat-count{display:flex;flex-direction:column;align-items:center;min-width:46px;position:relative;z-index:1}
.foro-cat-count b{font-size:15px!important;color:#fff!important}
.foro-cat-count small{font-size:7.5px!important;color:#716778!important;text-transform:uppercase;letter-spacing:1px}
.foro-cat-arrow{position:relative;z-index:1;font-size:18px!important;color:var(--cat-color,#b479ff)!important;opacity:.5;transition:.25s!important}
.foro-cat-pro:hover .foro-cat-arrow{opacity:1;transform:translateX(4px)}

/* ---------- Temas: filas con "estela de cometa" al pasar el cursor ---------- */
.foro-topic-list-pro{display:flex!important;flex-direction:column!important;gap:9px!important}
.foro-topic-pro{
  position:relative!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;align-items:center!important;
  gap:14px!important;padding:14px 16px!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:16px!important;
  background:rgba(255,255,255,.018)!important;text-decoration:none;color:inherit;overflow:hidden;transition:.25s!important;
}
.foro-topic-pro:before{
  content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(180,121,255,.16),transparent);
  transform:skewX(-18deg);transition:.5s;pointer-events:none;
}
.foro-topic-pro:hover{transform:translateX(4px)!important;border-color:rgba(180,121,255,.35)!important;background:rgba(160,84,235,.055)!important}
.foro-topic-pro:hover:before{left:120%}
.foro-topic-pro.is-pinned{border-color:rgba(240,201,117,.35)!important;background:linear-gradient(90deg,rgba(240,201,117,.07),rgba(255,255,255,.015))!important}
.foro-topic-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#100a18;position:relative;z-index:1}
.foro-topic-avatar img{width:100%;height:100%;object-fit:cover}
.foro-topic-body{min-width:0;position:relative;z-index:1}
.foro-topic-topline{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.foro-topic-topline span{font-size:8px;color:var(--cat-color,#c99bff);font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.foro-topic-topline i{font-style:normal;font-size:10px}
.foro-topic-body h3{margin:0;color:#f6f0fa;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foro-topic-body p{margin:3px 0;color:#766c80;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foro-topic-body>small{font-size:9.5px;color:#5f5667}
.foro-topic-image-badge{position:relative;z-index:1;font-size:8px;color:var(--obs-cyan);border:1px solid rgba(104,217,232,.28);background:rgba(104,217,232,.06);padding:4px 8px;border-radius:999px;white-space:nowrap}
.foro-topic-stats{position:relative;z-index:1;display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:1px;text-align:right;min-width:72px}
.foro-topic-stats b{font-size:11px;color:#fff}
.foro-topic-stats small{font-size:7px;color:#62586b;text-transform:uppercase;letter-spacing:.5px}
.foro-topic-go{position:relative;z-index:1;font-size:20px;color:#5f5368;transition:.2s}
.foro-topic-pro:hover .foro-topic-go{color:var(--obs-accent);transform:translateX(3px)}

.foro-empty-pro{
  position:relative;padding:52px 20px;text-align:center;border:1px dashed rgba(180,121,255,.22);border-radius:20px;
  background:radial-gradient(circle at 50% 0,rgba(180,121,255,.06),transparent 60%);overflow:hidden;
}
.foro-empty-pro>span{display:inline-block;font-size:30px;color:var(--obs-accent);animation:obsCoreFloat 3.6s ease-in-out infinite}
.foro-empty-pro h3{margin:12px 0 5px;color:#fff;font:600 17px Cinzel,serif}
.foro-empty-pro p{margin:0 0 18px;color:#776e80;font-size:11px}

/* ---------- Modal de nuevo tema ---------- */
body.foro-modal-open{overflow:hidden}
.foro-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:18px;visibility:hidden;opacity:0;transition:.25s}
.foro-modal.is-open{visibility:visible;opacity:1}
.foro-modal-backdrop{position:absolute;inset:0;background:rgba(4,2,9,.8);backdrop-filter:blur(14px)}
.foro-new-modal{
  position:relative;z-index:2;width:min(680px,100%);max-height:min(88vh,760px);overflow:auto;padding:28px;
  border:1px solid rgba(196,152,255,.24);border-radius:24px;
  background:radial-gradient(circle at 18% 0,rgba(180,121,255,.1),transparent 40%),linear-gradient(165deg,var(--obs-panel-2),var(--obs-bg) 78%);
  box-shadow:0 40px 110px rgba(0,0,0,.55),0 0 55px rgba(144,62,220,.14);
  transform:translateY(16px) scale(.98);transition:.3s;
}
.foro-modal.is-open .foro-new-modal{transform:none}
.foro-modal-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#aaa;cursor:pointer;font-size:20px}
.foro-modal-close:hover{color:#fff;border-color:var(--obs-accent)}
.foro-modal-kicker{font-size:9px;font-weight:800;letter-spacing:2.4px;color:var(--obs-accent);text-transform:uppercase}
.foro-new-modal h2{margin:8px 0 4px;color:#fff;font:600 25px Cinzel,serif}
.foro-modal-sub{margin:0 0 20px;color:#81778b;font-size:11px;line-height:1.6}
.foro-field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.foro-field>span{font-size:10px;color:#c5b7ce;font-weight:800;letter-spacing:.5px}
.foro-field input,.foro-field select,.foro-field textarea{
  width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);border-radius:12px;
  background:rgba(255,255,255,.035);color:#fff;outline:none;padding:11px 13px;font:inherit;font-size:12px;transition:.2s;
}
.foro-field select{appearance:auto}
.foro-field textarea{min-height:130px;resize:vertical;line-height:1.55}
.foro-field input:focus,.foro-field select:focus,.foro-field textarea:focus{border-color:var(--obs-accent);box-shadow:0 0 0 3px rgba(180,121,255,.12)}
.foro-field small{align-self:flex-end;color:#62596a;font-size:9px;margin-top:-3px}
.foro-upload-box{
  position:relative;display:flex;align-items:center;gap:12px;min-height:82px;padding:12px;
  border:1px dashed rgba(180,121,255,.32);border-radius:15px;background:rgba(180,121,255,.03);transition:.25s;
}
.foro-upload-box:hover,.foro-upload-box.is-dragging{border-color:var(--obs-accent);background:rgba(180,121,255,.075);box-shadow:0 0 30px rgba(180,121,255,.1)}
.foro-upload-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(180,121,255,.12);border:1px solid rgba(205,153,255,.22);font-size:24px;color:#c99bff}
.foro-upload-box>div:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}
.foro-upload-box b{font-size:11px;color:#eee}
.foro-upload-box small{font-size:9px;color:#70667b}
.foro-upload-box>button{margin-left:auto;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#c99bff;padding:8px 11px;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}
.foro-upload-box>button:hover{border-color:var(--obs-accent);color:#fff}
.foro-upload-preview{position:absolute!important;inset:7px 7px 7px auto;display:flex!important;align-items:center;gap:8px;width:min(62%,340px);padding:6px 7px;border-radius:12px;background:rgba(9,6,13,.94);border:1px solid rgba(196,152,255,.26);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.foro-upload-preview[hidden]{display:none!important}
.foro-upload-preview img{width:58px;height:58px;border-radius:9px;object-fit:cover}
.foro-upload-preview>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.foro-upload-preview b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foro-upload-preview button{margin-left:auto;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,92,122,.12);color:#ff9db0;cursor:pointer}
.foro-upload-box.has-image>div:first-child,.foro-upload-box.has-image>div:nth-child(2),.foro-upload-box.has-image>button{opacity:.25}
.foro-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.foro-cancel-btn,.foro-publish-btn{min-height:41px;padding:0 16px;border-radius:11px;font-size:11px;font-weight:800;cursor:pointer}
.foro-cancel-btn{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);color:#8d8396}
.foro-publish-btn{border:1px solid var(--obs-accent);background:linear-gradient(135deg,var(--obs-accent),var(--obs-accent-2));color:#fff;box-shadow:0 12px 28px rgba(157,78,234,.28)}
.foro-publish-btn:hover:not(:disabled){transform:translateY(-1px)}
.foro-publish-btn:disabled{opacity:.5;cursor:not-allowed}
.foro-form-error{min-height:16px;margin-top:9px;color:#ff8fa8;font-size:10px}
.foro-publish-btn.is-loading span{display:inline-block;animation:obsArrowLoad .8s infinite}
.foro-modal-open .site-header{z-index:100}
@keyframes obsArrowLoad{50%{transform:translateX(5px)}}

/* ---------- Tema abierto (OP) ---------- */
.foro-hilo-op-cuerpo{min-width:0}
.foro-hilo-op .comentario-texto{line-height:1.7;color:#c6bdcb}
.tema-op-contenido-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:20px;margin-top:2px}
.tema-op-contenido-grid>.comentario-texto{min-width:0}
.tema-op-imagen{
  position:relative;display:inline-flex;vertical-align:top;flex-direction:column;align-items:flex-start;gap:5px;
  width:210px;margin:0;border:0;padding:0;background:transparent;cursor:zoom-in;
}
.tema-op-imagen img{
  display:block;width:100%;height:132px;object-fit:cover;border-radius:14px;
  border:1px solid rgba(196,152,255,.24);box-shadow:0 14px 34px rgba(0,0,0,.28);transition:.25s;
}
.tema-op-imagen span{
  position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;
  background:rgba(7,4,11,.78);border:1px solid rgba(255,255,255,.12);color:#eee;font-size:8px;font-weight:800;
  opacity:0;transform:translateY(4px);transition:.25s;
}
.tema-op-imagen:hover img{transform:translateY(-2px);border-color:var(--obs-accent);box-shadow:0 18px 42px rgba(124,50,205,.28)}
.tema-op-imagen:hover span{opacity:1;transform:none}
.tema-lightbox{
  position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;padding:25px;
  background:rgba(4,2,9,.9);backdrop-filter:blur(13px);opacity:0;visibility:hidden;transition:.25s;
}
.tema-lightbox.is-visible{opacity:1;visibility:visible}
.tema-lightbox img{max-width:min(92vw,1000px);max-height:88vh;object-fit:contain;border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.55)}
.tema-lightbox button{position:absolute;right:24px;top:20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(22,13,32,.9);color:#fff;font-size:20px;cursor:pointer}

/* ---------- Bloque del foro en el inicio ---------- */
.forum-portal{
  position:relative!important;min-height:250px!important;padding:0!important;display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr)!important;gap:0!important;overflow:hidden!important;
  border:1px solid var(--obs-line)!important;border-radius:24px!important;
  background:linear-gradient(150deg,var(--obs-panel-2),var(--obs-bg) 68%)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.3)!important;
}
.forum-portal:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 25%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 30% 70%,#e6d3ff,transparent),
    radial-gradient(1.3px 1.3px at 55% 15%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 78% 60%,#cdb6ff,transparent),
    radial-gradient(1.4px 1.4px at 92% 30%,#fff,transparent);
  animation:obsTwinkle 5s ease-in-out infinite;
}
.forum-portal-glow{
  position:absolute!important;top:-90px!important;right:-70px!important;width:280px!important;height:280px!important;z-index:0;
  background:radial-gradient(circle,rgba(180,121,255,.26),transparent 68%)!important;filter:blur(3px)!important;pointer-events:none;
}
.forum-portal-main{position:relative;z-index:1;padding:32px 32px 30px!important;display:flex;flex-direction:column;justify-content:center;gap:9px!important}
.forum-portal-main .section-label{font-size:9px!important;letter-spacing:2px!important;color:var(--obs-accent)!important}
.forum-portal h2{margin:8px 0!important;font:600 clamp(21px,3vw,30px) Cinzel,Georgia,serif!important;color:var(--obs-text)!important;max-width:480px!important}
.forum-portal h2 em{font-style:normal;background:linear-gradient(100deg,#fff,var(--obs-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.forum-portal p{max-width:470px!important;color:var(--obs-muted)!important;font-size:11.5px!important;line-height:1.7!important}
.forum-portal-stats{display:flex!important;gap:26px!important;margin-top:8px!important}
.forum-portal-stats div{display:flex;flex-direction:column}
.forum-portal-stats strong{font-size:17px;color:#fff}
.forum-portal-stats span{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#665c72}
.forum-portal-cta{margin-top:8px!important;width:max-content}
.forum-portal-preview{
  position:relative;z-index:1;padding:26px 22px!important;display:grid;align-content:center;gap:9px!important;
  border-left:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(180,121,255,.03));
}
.forum-home-orb{
  position:relative;width:62px;height:62px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(205,153,255,.28),rgba(24,14,38,.92));
  border:1px solid rgba(196,152,255,.3);box-shadow:0 0 34px rgba(154,72,226,.22);
  animation:obsCoreFloat 3.6s ease-in-out infinite;
}
.forum-home-orb:before,.forum-home-orb:after{content:"";position:absolute;border:1px solid rgba(196,152,255,.24);border-radius:50%;inset:-8px;animation:obsOrbitSpin 13s linear infinite}
.forum-home-orb:after{inset:-15px;border-style:dashed;animation-direction:reverse;animation-duration:19s}
.forum-home-orb span{font-size:22px;color:#e6c8ff;text-shadow:0 0 14px rgba(200,140,255,.65)}
.forum-home-orb small{position:absolute;bottom:-20px;width:max-content;font-size:6px;letter-spacing:1.3px;color:#6e6379}
.forum-preview-card{
  position:relative;min-height:54px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:12px 14px!important;border-radius:13px!important;background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.05);text-decoration:none;color:inherit;transition:.22s;
}
.forum-preview-card:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--cat-color,#b479ff);opacity:.7}
.forum-preview-card:hover{transform:translateX(4px);border-color:rgba(196,152,255,.26);background:rgba(180,121,255,.06)!important}
.forum-preview-cat{font-size:8px!important;text-transform:uppercase;letter-spacing:.9px;color:#a878d6!important}
.forum-preview-card b{font-size:11.5px!important;color:#eee!important;line-height:1.3}
.forum-preview-card small{font-size:9px!important;color:#5f5666!important}
.forum-preview-placeholder{align-items:center;text-align:center;min-height:120px!important;border:1px dashed rgba(180,121,255,.2)!important}
.forum-preview-placeholder>span{font-size:22px;color:var(--obs-accent)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .foro-hero-pro{padding:34px 26px!important}
  .foro-hero-pro-orbit{display:none}
  .foro-hero-emblem{width:130px;flex-basis:130px}
  .foro-emblem-core{width:74px;height:74px}
  .foro-emblem-core span{font-size:24px}
  .forum-portal{grid-template-columns:1fr!important}
  .forum-portal-preview{border-left:0;border-top:1px solid rgba(255,255,255,.06)}
}
@media(max-width:720px){
  .foro-hero-pro{flex-direction:column!important;text-align:center;min-height:0}
  .foro-hero-copy{max-width:100%}
  .foro-hero-actions{justify-content:center}
  .foro-cat-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .foro-hero-pro{padding:26px 20px!important;border-radius:20px!important}
  .foro-hero-copy h1{font-size:26px!important}
  .foro-cat-pro{grid-template-columns:auto 1fr!important;padding:14px!important}
  .foro-cat-count{display:none}
  .foro-topic-pro{grid-template-columns:auto minmax(0,1fr)!important}
  .foro-topic-stats,.foro-topic-go,.foro-topic-image-badge{display:none}
  .foro-new-modal{padding:22px 17px;border-radius:18px}
  .foro-upload-preview{width:calc(100% - 14px)}
  .tema-op-contenido-grid{grid-template-columns:1fr}
  .tema-op-imagen{width:100%}
  .forum-portal-main{padding:24px 20px 22px!important}
  .forum-portal-preview{padding:20px!important}
}