:root {
  --bg:#100e15;
  --panel:#191620;
  --line:#30283a;
  --text:#f2edf5;
  --muted:#a69bad;
  --purple:#a77be8;
  --lilac:#d2b5f5;
  --sidebar:224px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;font-size:13px}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.vm-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:27px 18px;background:#15121b;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:10}
.vm-brand{font-family:"Playfair Display",serif;font-size:25px;letter-spacing:2px;color:#e5d3fa;padding:0 12px 30px}
.vm-brand small{display:block;font:9px "DM Sans",sans-serif;letter-spacing:4px;color:var(--muted);margin-top:5px}
.vm-nav-label{font-size:9px;letter-spacing:2px;color:#796d83;padding:16px 12px 8px}
.vm-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;margin:2px 0;border-radius:7px;color:#b9afc1;font-size:12px}
.vm-nav a:hover,.vm-nav a.active{background:#2a2036;color:#e2cafa}
.nav-icon{width:17px;text-align:center;color:#bd98e9;font-size:15px}
.vm-sidebar-note{margin-top:auto;padding:15px 12px;border-top:1px solid var(--line);font-size:10px;line-height:1.7;color:#82788b}
.vm-main{margin-left:var(--sidebar);min-height:100vh}
.vm-topbar{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#131019}
.vm-breadcrumb{font-size:11px;color:var(--muted)}
.vm-top-search{width:min(320px,45%);position:relative}
.vm-top-search input{width:100%;height:36px;background:#211c29;border:1px solid #342b3e;border-radius:6px;padding:0 14px 0 36px;color:var(--text);outline:none}
.vm-top-search:before{content:"";position:absolute;left:13px;top:10px;width:11px;height:11px;border:2px solid #aa91c4;border-radius:50%;pointer-events:none}.vm-top-search:after{content:"";position:absolute;left:26px;top:23px;width:7px;height:2px;background:#aa91c4;transform:rotate(45deg);transform-origin:left center;pointer-events:none}
.vm-content{max-width:1450px;margin:auto;padding:34px 38px 70px}
.vm-page-heading{margin-bottom:25px}
.vm-kicker{font-size:9px;letter-spacing:2.5px;color:var(--purple);text-transform:uppercase;margin-bottom:8px}
.vm-page-heading h1{font:600 30px "Playfair Display",serif;margin:0 0 7px}
.vm-page-heading p{margin:0;color:var(--muted);font-size:12px}
.vm-hero{min-height:205px;border:1px solid #49365d;border-radius:10px;padding:34px 38px;margin-bottom:34px;background:radial-gradient(ellipse at 80% 20%,#49305c 0,transparent 45%),linear-gradient(110deg,#21172b,#17131e 72%);display:flex;align-items:center;justify-content:space-between}
.vm-hero-copy{max-width:570px}
.vm-hero .vm-kicker{color:#d0aaf4}
.vm-hero h1{font:600 34px "Playfair Display",serif;margin:7px 0 10px}
.vm-hero p{color:#c2b6ca;line-height:1.7;margin:0;max-width:490px}
.vm-hero-mark{font:100px "Playfair Display",serif;color:#d3b4f0;opacity:.23;padding:0 35px}
.vm-button{display:inline-flex;background:#a77be8;color:#170f20;padding:10px 17px;border-radius:5px;font-weight:700;font-size:11px;margin-top:18px}
.vm-section{margin:0 0 37px}
.vm-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.vm-section-head h2{font:600 21px "Playfair Display",serif;margin:0}
.vm-section-head p{font-size:11px;color:var(--muted);margin:5px 0 0}
.vm-more{font-size:10px;color:#c4a0eb}
.vm-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 15px}
.vm-card{min-width:0}
.vm-cover-link{display:block;position:relative;overflow:hidden;border-radius:5px;background:#282131;aspect-ratio:.72}
.vm-cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vm-card:hover .vm-cover{transform:scale(1.035)}
.vm-cover-placeholder{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:#d8c0ef;font:16px "Playfair Display",serif;background:linear-gradient(145deg,#30223e,#17131e)}
.vm-card-title{font-size:11px;line-height:1.45;font-weight:600;margin:8px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vm-card-meta{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-rank{position:absolute;top:7px;left:7px;background:#17121d;color:#e0c8f5;border:1px solid #795a98;border-radius:4px;padding:4px 7px;font-size:11px;font-weight:700}
.vm-controls{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}
.vm-control{background:#1c1723;border:1px solid var(--line);color:#c9bdcf;border-radius:5px;padding:9px 12px;font-size:11px}
.vm-letters{display:flex;flex-wrap:wrap;gap:5px;margin:17px 0}
.vm-letters button{background:#211b29;border:1px solid #352b40;color:#c5b7d0;border-radius:4px;min-width:27px;height:27px;font-size:10px;cursor:pointer}
.vm-letters button.active,.vm-letters button:hover{background:#a77be8;color:#160f20;border-color:#a77be8}
.vm-empty{padding:45px 20px;text-align:center;border:1px dashed #493b55;border-radius:8px;color:var(--muted);line-height:1.7}
.vm-empty strong{display:block;color:#e5d8ef;font:20px "Playfair Display",serif;margin-bottom:8px}
.vm-tabs{display:flex;gap:8px;margin:18px 0 22px}
.vm-tab{border:1px solid var(--line);background:#1d1824;color:#b9a9c5;padding:9px 14px;border-radius:5px;cursor:pointer;font-size:11px}
.vm-tab.active{background:#39284b;color:#e7d6f7;border-color:#79569b}
.vm-footer{border-top:1px solid var(--line);padding:22px 38px;color:#786e80;font-size:10px}

/* Distribución con columna de últimos capítulos */
.vm-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 24px;
  max-width: 1700px;
  margin: 0 auto;
  align-items: start;
}

.vm-page-layout > .vm-content {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 34px 0 70px 38px;
}

.vm-latest {
  position: sticky;
  top: 20px;
  margin: 34px 25px 30px 0;
  padding: 18px 14px;
  background: #191620;
  border: 1px solid var(--line);
  border-radius: 9px;
  min-width: 0;
}

.vm-latest-heading {
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.vm-latest-heading > span {
  color: var(--purple);
  font-size: 9px;
  letter-spacing: 2px;
}

.vm-latest-heading h2 {
  font: 600 19px "Playfair Display", serif;
  margin: 7px 0 5px;
}

.vm-latest-heading p {
  color: var(--muted);
  font-size: 10px;
  margin: 0;
}

.vm-latest-item,
.vm-update-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 8px;
  border-bottom: 1px solid #30283a;
  transition: background .2s;
}

.vm-latest-item:hover,
.vm-update-item:hover {
  background: #292034;
  border-radius: 5px;
}

.vm-latest-name {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: #e7d9f2;
}

.vm-latest-cap {
  color: #c5a0eb;
  font-size: 10px;
  font-weight: 600;
}

.vm-latest-loading,
.vm-latest-empty {
  padding: 15px 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.vm-updates-full {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vm-update-item {
  min-height: 85px;
  background: #191620;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
}

.vm-update-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  min-height: 125px;
  padding: 12px;
}

.vm-update-cover {
  display: block;
  flex: 0 0 76px;
  width: 76px;
  height: 105px;
  object-fit: cover;
  border-radius: 4px;
  background: #282131;
}

.vm-update-cover-placeholder {
  flex: 0 0 76px;
  width: 76px;
  height: 105px;
  display: grid;
  place-items: center;
  background: #30223e;
  color: var(--lilac);
  font: 22px "Playfair Display", serif;
}

.vm-update-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.vm-update-name {
  color: #e7d9f2;
  font-size: 12px;
  line-height: 1.5;
}

.vm-update-read {
  color: #c4a0eb;
  font-size: 9px;
  letter-spacing: 1px;
  margin-top: 4px;
}
.vm-update-title {
  color: var(--muted);
  font-size: 10px;
}

/* En pantallas medianas, la columna se hace más compacta */
@media(max-width:1100px) {
  .vm-page-layout {
    grid-template-columns: minmax(0, 1fr) 215px;
    gap: 15px;
  }
  .vm-page-layout > .vm-content {
    padding: 28px 0 60px 25px;
  }
  .vm-latest {
    margin-right: 15px;
  }
}

/* En celular, los últimos capítulos pasan debajo del contenido */
@media(max-width:760px) {
  .vm-page-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .vm-page-layout > .vm-content {
    width: 100%;
    padding: 23px 15px 25px;
  }
  .vm-latest {
    position: static;
    width: auto;
    margin: 0 15px 25px;
  }
  .vm-updates-full {
    grid-template-columns: 1fr;
  }
}
@media(max-width:1100px){.vm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.vm-content{padding:28px 25px}}
@media(max-width:760px){.vm-sidebar{position:static;width:auto;padding:12px 15px;display:block;border-right:0;border-bottom:1px solid var(--line)}.vm-brand{font-size:20px;padding:0 5px 10px}.vm-brand small,.vm-nav-label,.vm-sidebar-note{display:none}.vm-nav{display:flex;overflow-x:auto;gap:5px}.vm-nav a{white-space:nowrap;padding:9px;font-size:10px}.vm-main{margin-left:0}.vm-topbar{height:54px;padding:0 16px}.vm-content{padding:23px 15px 50px}.vm-hero{padding:24px;min-height:180px}.vm-hero h1{font-size:27px}.vm-hero-mark{font-size:65px;padding:0}.vm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 10px}.vm-page-heading h1{font-size:26px}.vm-footer{padding:20px 15px}}
@media(max-width:420px){.vm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vm-hero-mark{display:none}.vm-top-search{width:58%}}



/* Ajustes exclusivos de Biblioteca */
[data-page="biblioteca"] .vm-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 17px 12px;
}

[data-page="biblioteca"] .vm-card-title {
  font-size: 10px;
  line-height: 1.35;
  margin: 6px 0 3px;
}

[data-page="biblioteca"] .vm-card-meta {
  font-size: 9px;
}

@media (max-width: 1200px) {
  [data-page="biblioteca"] .vm-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  [data-page="biblioteca"] .vm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  [data-page="biblioteca"] .vm-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  [data-page="biblioteca"] .vm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Inicio: novedades compactas exclusivamente en celular */
.vm-home-latest {
  display: none;
}

@media (max-width: 760px) {
  .vm-page-layout.is-home .vm-home-latest {
    display: block;
    margin-bottom: 28px;
  }

  .vm-page-layout.is-home > .vm-latest {
    display: none;
  }

  .vm-page-layout.is-home .vm-home-latest-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .vm-page-layout.is-home .vm-home-latest-list .vm-latest-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 10px 8px;
    background: #191620;
    border: 1px solid #30263a;
    border-radius: 5px;
  }

  .vm-page-layout.is-home .vm-home-latest-list .vm-latest-name {
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .vm-page-layout.is-home .vm-content .vm-section .vm-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px 7px;
  }

  .vm-page-layout.is-home .vm-content .vm-section .vm-card-title {
    font-size: 10px;
    margin: 5px 0 3px;
  }
}

@media (max-width: 420px) {
  .vm-page-layout.is-home .vm-content .vm-section .vm-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* Brillo lila en Nuevas historias */
@media (max-width: 760px) {
  .vm-page-layout.is-home .vm-new-stories-carousel .vm-cover-link {
    position: relative;
    isolation: isolate;
    overflow: visible;
  }

  .vm-page-layout.is-home .vm-new-stories-carousel .vm-cover-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 9px -7px;
    border-radius: 16px;
    background: radial-gradient(ellipse, rgba(174, 111, 255, .48) 0%, rgba(119, 65, 190, .25) 48%, transparent 76%);
    filter: blur(13px);
    opacity: .8;
    pointer-events: none;
    transition: opacity .25s ease, filter .25s ease;
  }

  .vm-page-layout.is-home .vm-new-stories-carousel .vm-card:hover .vm-cover-link::before {
    opacity: 1;
    filter: blur(17px);
  }
}

/* Distribuci?n compacta de portadas del Inicio */
@media (min-width: 761px) {
  .vm-page-layout.is-home .vm-content .vm-section .vm-new-stories-carousel,
  .vm-page-layout.is-home .vm-content .vm-section .vm-explore-carousel {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 12px;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .vm-page-layout.is-home .vm-content .vm-section .vm-new-stories-carousel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 10px;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .vm-page-layout.is-home .vm-content .vm-section .vm-explore-carousel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 7px;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .vm-page-layout.is-home .vm-content .vm-section .vm-home-carousel .vm-card {
    width: auto;
    min-width: 0;
    flex: initial;
  }
}



/* Nuevas historias: 3 columnas y 6 portadas en m?vil */
@media (max-width: 760px) {
  .vm-page-layout.is-home .vm-content .vm-section .vm-new-stories-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vm-page-layout.is-home .vm-content .vm-section .vm-new-stories-carousel .vm-card:nth-child(n+7) {
    display: none;
  }
}

/* =========================================
   AJUSTE GENERAL DE LEGIBILIDAD
   Sin modificar portadas ni distribucion
   ========================================= */

body {
  font-size: 15px;
}

.vm-brand small { font-size: 11px; }
.vm-nav-label { font-size: 11px; }
.vm-nav a { font-size: 14px; }
.vm-sidebar-note { font-size: 12px; }

.vm-breadcrumb { font-size: 13px; }
.vm-kicker { font-size: 11px; }
.vm-page-heading p { font-size: 14px; }
.vm-hero p { font-size: 15px; }

.vm-button { font-size: 13px; }
.vm-section-head p { font-size: 13px; }
.vm-more { font-size: 12px; }

.vm-card-title,
[data-page="biblioteca"] .vm-card-title,
.vm-page-layout.is-home .vm-content .vm-section .vm-card-title {
  font-size: 13px;
  line-height: 1.45;
}

.vm-card-meta,
[data-page="biblioteca"] .vm-card-meta {
  font-size: 12px;
}

.vm-control { font-size: 13px; }
.vm-letters button { font-size: 12px; }
.vm-tab { font-size: 13px; }
.vm-footer { font-size: 12px; }

.vm-latest-heading > span { font-size: 11px; }
.vm-latest-heading p { font-size: 12px; }
.vm-latest-name { font-size: 13px; }
.vm-latest-cap { font-size: 12px; }
.vm-latest-loading,
.vm-latest-empty { font-size: 13px; }

.vm-update-name { font-size: 14px; }
.vm-update-read { font-size: 11px; }
.vm-update-title { font-size: 12px; }

@media (max-width: 760px) {
  .vm-nav a { font-size: 12px; }
  .vm-card-title,
  [data-page="biblioteca"] .vm-card-title,
  .vm-page-layout.is-home .vm-content .vm-section .vm-card-title {
    font-size: 12px;
  }
  .vm-card-meta,
  [data-page="biblioteca"] .vm-card-meta {
    font-size: 11px;
  }
  .vm-latest-name { font-size: 12px; }
}


/* Ocultar ultimos capitulos solo en Tendencias y Actualizaciones en celular */
@media (max-width: 760px) {
  body[data-page="actualizaciones"] .vm-page-layout > .vm-latest,
  body[data-page="tendencias"] .vm-page-layout > .vm-latest {
    display: none !important;
  }
}