/* Rubik (variable, 300-900) también propia y precargada: el texto no cambia de líneas al cargar */
@font-face {
  font-family: 'AJ Rubik';
  src: url('/assets/fonts/rubik-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* Reserva con las medidas de Rubik (Arial ajustada: +3,6 % de ancho, mismos ascendentes y
   descendentes): si Rubik tarda, el texto ocupa lo mismo y no se recoloca al llegar */
@font-face {
  font-family: 'Rubik Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 103.6%;
  ascent-override: 90.3%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}
/* Bangers servida por la propia web (25 KB, latín) y precargada en modern_head.php: llega antes
   de pintar y el titular ya no cambia de tamaño al cargar (era el salto de diseño de la portada:
   CLS 0,12-0,14). Nombre propio («AJ Bangers»): con el mismo nombre que la de Google Fonts, el
   navegador usaba la de Google y pintaba primero otra letra. */
@font-face {
  font-family: 'AJ Bangers';
  src: url('/assets/fonts/bangers-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;   /* 25 KB y precargada: mejor esperar un instante que pintar otra letra y saltar */
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   modern.css — diseño renovado (2026-10). Capa por encima de style.css: solo se aplica con
   la clase html.aj-modern, que pone includes/analytics.php (vista previa con ?beta=1).
   Misma identidad (naranja, amarillo, logo y Bangers en los titulares grandes) con
   superficies limpias: tarjetas redondeadas sin inclinación, sombras suaves, fondo claro,
   botones tipo píldora y movimiento sutil (scripts/motion.js). Todo con variables de :root.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

html.aj-modern {
  --radius-l: 22px;
  --radius-m: 16px;
  --radius-s: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px -8px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.05), 0 18px 40px -14px rgba(0, 0, 0, 0.28);
  --glow: 0 10px 24px -10px color-mix(in srgb, var(--header-bg) 75%, transparent);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --brand-gradient: linear-gradient(135deg, var(--header-bg), var(--accent-color));
  --night: #140f0c;              /* fondo oscuro cálido (cabecera del número, visor de imágenes) */
  --on-night: #ffffff;           /* texto sobre --night */
  --on-night-muted: rgba(255, 255, 255, 0.72);
  --accent-on-night: #ffb454;    /* naranja legible sobre --night (8:1) */
  scroll-behavior: smooth;
}

/* ── Fondo y marco ───────────────────────────────────────────────────────────── */
html.aj-modern body {
  background:
    radial-gradient(900px 520px at 0% -10%, color-mix(in srgb, var(--header-bg) 16%, transparent), transparent 65%),
    radial-gradient(800px 480px at 100% 0%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 60%),
    var(--comic-dot-pattern),
    var(--page-bg) !important;
  background-size: auto, auto, 14px 14px, auto !important;
  background-attachment: fixed;
  color: var(--text-color);
}
html.aj-modern .manga-page {
  background: transparent;
  box-shadow: none;
  gap: 16px;
}

/* ── Paneles: tarjetas limpias, sin el giro de viñeta ───────────────────────── */
html.aj-modern .panel {
  transform: none !important;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--radius-l);
  background-color: var(--panel-bg);
  background-image: none;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.35s var(--ease), translate 0.35s var(--ease);
}
html.aj-modern .panel:hover { box-shadow: var(--shadow-2); }
html.aj-modern .debuts-section,
html.aj-modern .panel-content-unskew,
html.aj-modern .index-page .input-panel h1,
html.aj-modern .index-page .input-panel .speech-bubble,
html.aj-modern .index-page .input-panel .date-selects,
html.aj-modern .index-page .input-panel .manga-button,
html.aj-modern .index-page .mascot-panel .speech-bubble,
html.aj-modern .index-page .mascot-panel-2 .speech-bubble,
html.aj-modern .index-page .error-message,
html.aj-modern .jump-promo-cover { transform: none !important; }

/* ── Cabecera ───────────────────────────────────────────────────────────────── */
html.aj-modern .header-panel {
  background: var(--brand-gradient);
  border: 0;
  border-radius: var(--radius-l);
  box-shadow: var(--glow);
  overflow: hidden;
}
html.aj-modern .header-panel::after {           /* brillo que cruza la cabecera al cargar */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  translate: -100% 0;
  animation: ajSweep 1.6s var(--ease) 0.3s 1 both;
  pointer-events: none;
}
html.aj-modern .lang-switcher-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(6px);
  transition: background-color 0.2s;
}
html.aj-modern .lang-switcher-btn:hover { background: rgba(255, 255, 255, 0.32); }

/* ── Tipografía ─────────────────────────────────────────────────────────────── */
html.aj-modern .index-page .input-panel h1,
html.aj-modern .results-page .result-info-header .issue-number {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  letter-spacing: 1px;
}

/* ── Botones ────────────────────────────────────────────────────────────────── */
html.aj-modern .manga-button {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--panel-bg);
  background: var(--brand-gradient);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--glow);
  text-shadow: none;
  transition: translate 0.25s var(--ease), scale 0.15s var(--ease), box-shadow 0.25s var(--ease), filter 0.2s;
}
html.aj-modern .manga-button:hover { translate: 0 -2px; filter: none; box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--header-bg) 85%, transparent); }
html.aj-modern .manga-button:active { scale: 0.97; translate: 0 0; box-shadow: var(--glow); transform: none; }
html.aj-modern a.manga-button,
html.aj-modern a.manga-button:visited { color: var(--panel-bg); }
/* Secundarios: blancos con borde suave */
html.aj-modern .random-jump-btn,
html.aj-modern #backButton,
html.aj-modern #backButtonTop {
  background: var(--panel-bg);
  color: var(--text-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--header-bg) 35%, transparent), var(--shadow-1);
}
html.aj-modern .timeline-btn,
html.aj-modern .nav-btn-grid .timeline-btn {
  background: var(--panel-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-1) !important;
  font-weight: 600;
  padding: 12px 14px !important;
}
html.aj-modern .timeline-btn:hover { translate: 0 -3px; box-shadow: var(--shadow-2) !important; background: var(--panel-bg) !important; }
html.aj-modern .nav-btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.aj-modern .nav-btn-grid .timeline-btn { min-width: 0; }
html.aj-modern .buy-original-btn {
  border: 0;
  border-radius: var(--radius-m);
  background: var(--highlight-soft);
  color: var(--text-color);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 60%, transparent);
  font-family: var(--font-body);
  font-weight: 700;
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
html.aj-modern .buy-original-btn:hover { translate: 0 -2px; transform: none; box-shadow: inset 0 0 0 2px var(--accent-color), var(--shadow-1); }

/* ── Portada: selector de fecha ─────────────────────────────────────────────── */
html.aj-modern .index-page .input-panel { padding: 28px 22px; }
html.aj-modern .index-page .speech-bubble {
  border: 0;
  background: var(--highlight-soft);
  border-radius: var(--radius-m);
  box-shadow: none;
}
html.aj-modern .index-page .speech-bubble::before,
html.aj-modern .index-page .speech-bubble::after { display: none; }
html.aj-modern .index-page .date-selects { gap: 10px; max-width: 380px; }
html.aj-modern .index-page .date-select {
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-s);
  box-shadow: none;
  padding: 14px 8px;
  font-weight: 600;
  background: var(--panel-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
html.aj-modern .index-page .date-select:hover { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent); }
html.aj-modern .index-page .date-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 30%, transparent);
}
html.aj-modern .index-page #findButton { font-size: 1.15rem; padding: 14px 34px; }
html.aj-modern .index-page .mascot-panels-wrapper > .panel { background-image: none; }
html.aj-modern .index-page .mascot-panels-wrapper .speech-bubble { border-width: 1px; box-shadow: var(--shadow-1); }
html.aj-modern .home-today .td-img {
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
  transition: translate 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
html.aj-modern .home-today .td-cover:hover .td-img { transform: none; translate: 0 -4px; box-shadow: var(--shadow-2); }

/* ── Resultado ──────────────────────────────────────────────────────────────── */
html.aj-modern .results-page .magazine-cover {
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-2);
}
/* La portada entra girando, sin pasar por invisible (no retrasa el LCP) */
html.aj-modern .results-page .result-cover .cover-zoom-btn { perspective: 900px; position: relative; overflow: hidden; border-radius: var(--radius-s); }
html.aj-modern .results-page .magazine-cover { animation: ajCoverIn 0.9s var(--ease) 1.05s both; transform-origin: 50% 60%; }
html.aj-modern .results-page .result-cover .cover-zoom-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  translate: -120% 0;
  animation: ajSweep 1.4s var(--ease) 1.7s 1 both;
  pointer-events: none;
}
html.aj-modern .cover-stats {
  border: 0;
  border-radius: 999px;
  background: var(--highlight-soft);
  padding: 5px 14px;
}
html.aj-modern .results-page .result-info-header { border-bottom: 1px solid var(--border-soft); }
html.aj-modern .results-page .result-info-buttons { border-top: 1px solid var(--border-soft); }
html.aj-modern .issue-yearweek { border-radius: 999px; }

/* Pestañas: control segmentado */
html.aj-modern .results-page .tab-navigation {
  border: 0;
  background: var(--chip-bg);
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
}
html.aj-modern .results-page .tab-navigation .tab {
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--dark-grey);
  padding: 8px 14px;
  transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
html.aj-modern .results-page .tab-navigation .tab:hover:not(.active) { filter: none; background: color-mix(in srgb, var(--panel-bg) 60%, transparent); }
html.aj-modern .results-page .tab-navigation .tab.active {
  background: var(--panel-bg);
  color: var(--text-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
html.aj-modern .results-page .tab-content:not(.hidden) { animation: ajFadeUp 0.45s var(--ease) both; }

/* Tarjetas de series */
html.aj-modern .manga-cards-grid { gap: 12px; }
html.aj-modern .manga-card {
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html.aj-modern .manga-card:hover,
html.aj-modern .manga-card:focus { transform: none; translate: 0 -5px; box-shadow: var(--shadow-2); }
html.aj-modern .manga-card-img { transition: scale 0.6s var(--ease); }
html.aj-modern .manga-card:hover .manga-card-img { scale: 1.05; }
html.aj-modern .manga-card-info { background: var(--panel-bg); border-top: 0; }
html.aj-modern .manga-card-title { font-family: var(--font-body); font-weight: 700; }
html.aj-modern .manga-card-btn { border-radius: 999px; }

/* Avisos */
html.aj-modern .debut-notice,
html.aj-modern .bday-match {
  border: 0;
  border-radius: var(--radius-m);
  background: var(--highlight-soft);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-color) 55%, transparent);
}
html.aj-modern .bday-match:not([hidden]) { animation: ajPop 0.7s var(--spring) both; position: relative; overflow: visible; }
html.aj-modern .bday-match img { border: 2px solid var(--panel-bg); box-shadow: var(--shadow-1); }

/* Confeti del aviso de cumpleaños (lo crea motion.js) */
html.aj-modern .aj-confetti {
  position: absolute;
  top: 50%;
  left: 34px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  pointer-events: none;
  animation: ajConfetti 1.1s var(--ease) forwards;
}

/* Botón de compartir: barra inferior en móvil, píldora en escritorio */
html.aj-modern .share-fab {
  border: 0;
  background: var(--brand-gradient);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--header-bg) 85%, transparent);
  font-family: var(--font-body);
  font-weight: 700;
  animation: ajRise 0.6s var(--spring) both;
}
@media (max-width: 1023px) {
  html.aj-modern .share-fab {
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: none;
    border-radius: 999px;
    padding: 15px 20px;
  }
  html.aj-modern .share-fab:active { transform: none; scale: 0.98; }
}

/* Carga */
html.aj-modern .loading-container { background-color: color-mix(in srgb, var(--page-bg) 94%, transparent); backdrop-filter: blur(4px); }
html.aj-modern .loading-spinner {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--accent-color) 60%, var(--header-bg));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  animation: spin 0.9s linear infinite;
}

/* ── /jump ──────────────────────────────────────────────────────────────────── */
html.aj-modern .jump-section h1,
html.aj-modern .jump-section h2 {
  background: var(--brand-gradient);
  border-radius: var(--radius-s);
}
html.aj-modern .jump-section h1 { margin-top: -6px; }
html.aj-modern .jump-hero-cover .cover-zoom-btn img,
html.aj-modern .jump-hero-cover img { border: 0; border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
html.aj-modern .gcard-cover {
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html.aj-modern .gcard-cover:hover { transform: none; translate: 0 -5px; box-shadow: var(--shadow-2); }
html.aj-modern .gcard-cover > img { transition: scale 0.6s var(--ease); }
html.aj-modern .gcard-cover:hover > img { scale: 1.05; }
html.aj-modern .jump-meta-table td { border-bottom-color: var(--border-soft); }
html.aj-modern .jump-intro { border-left: 0; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-color) 45%, transparent); }
html.aj-modern .jump-next a,
html.aj-modern .jump-birth { border: 1px solid var(--border-soft); border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
html.aj-modern .jump-arch-cover { border-radius: var(--radius-s); }

/* /jump: las franjas de título no se salen de la tarjeta (clip no rompe el sticky) */
html.aj-modern .jump-panel { overflow: clip; }

/* ── Portada en escritorio: más ancha y con aire, no el cuadrado de 92vmin ─────── */
@media (min-width: 1024px) {
  html.aj-modern body.index-page .manga-page {
    width: min(94vw, 1100px);
    max-width: 1100px;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  html.aj-modern .index-page .home-intro { width: min(94vw, 1100px); max-width: 1100px; }
  html.aj-modern .index-page .input-panel { padding: 40px 48px; }
  html.aj-modern .index-page .nav-btn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
  html.aj-modern .index-page .date-selects { max-width: 460px; }
}


/* ── Resto de páginas: mismas superficies (fichas, debuts, cronología, historia…) ── */
/* Franjas de título de sección */
html.aj-modern .debuts-section h1, html.aj-modern .debuts-section h2,
html.aj-modern .about-section h1, html.aj-modern .about-section h2,
html.aj-modern .hist-section h1, html.aj-modern .hist-section h2,
html.aj-modern .manga-detail-section h1, html.aj-modern .manga-detail-section h2,
html.aj-modern .mangaka-works-heading {
  background: var(--brand-gradient);
  border: 0;
  box-shadow: none;
}
html.aj-modern .debuts-panel,
html.aj-modern .about-panel { overflow: clip; }
/* Tarjetas e imágenes enmarcadas */
html.aj-modern .cover-card, html.aj-modern .debut-card, html.aj-modern .about-data-card,
html.aj-modern .about-dates-example, html.aj-modern .hist-stat, html.aj-modern .jump-cover-feature,
html.aj-modern .manga-toc, html.aj-modern .manga-chars, html.aj-modern .part-vol-card,
html.aj-modern .tc-faq details, html.aj-modern .sj-dialog, html.aj-modern .share-panel,
html.aj-modern .error-bubble, html.aj-modern .cp-cell {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  overflow: clip;   /* clip y no hidden: con hidden, en rejillas de alto fijo las tarjetas podían encogerse */
}
html.aj-modern .cover-card, html.aj-modern .debut-card, html.aj-modern .part-vol-card {
  transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html.aj-modern .cover-card:hover, html.aj-modern .debut-card:hover, html.aj-modern .part-vol-card:hover {
  transform: none;
  translate: 0 -5px;
  box-shadow: var(--shadow-2);
}
html.aj-modern .hist-lead-cover img, html.aj-modern .hist-mile-cover, html.aj-modern .s-thumb,
html.aj-modern .jy-cover, html.aj-modern .manga-hero-cover img, html.aj-modern .manga-hero-cover .cover-zoom-btn img,
html.aj-modern .manga-char img {
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
}
/* Botones de acción */
html.aj-modern .manga-hero-buy-btn, html.aj-modern .debut-share-btn, html.aj-modern .contact-email-btn,
html.aj-modern .share-option-btn, html.aj-modern .error-links a, html.aj-modern .year-jump-btn {
  background: var(--brand-gradient);
  color: var(--panel-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--glow);
  font-family: var(--font-body);
  font-weight: 700;
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
html.aj-modern .manga-hero-buy-btn:hover, html.aj-modern .debut-share-btn:hover,
html.aj-modern .share-option-btn:hover, html.aj-modern .year-jump-btn:hover { translate: 0 -2px; filter: none; }
html.aj-modern .cookie-banner { border: 0; border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
html.aj-modern .cookie-banner__btn { border-radius: 999px; }
/* Chips y filtros */
html.aj-modern .era-btn, html.aj-modern .year-btn, html.aj-modern .year-arrow, html.aj-modern .hist-chip,
html.aj-modern .hist-badge, html.aj-modern .jy-years a, html.aj-modern .jy-years span,
html.aj-modern .tl-years summary, html.aj-modern .s-pos {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, translate 0.2s var(--ease);
}
html.aj-modern .era-btn:hover, html.aj-modern .year-btn:hover, html.aj-modern .jy-years a:hover { translate: 0 -1px; }
html.aj-modern .site-footer-info { background: transparent !important; }


/* ── Entrada al hacer scroll (clases que pone motion.js) ───────────────────── */
html.aj-modern .aj-reveal { opacity: 0; translate: 0 18px; }
html.aj-modern .aj-reveal.aj-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
  transition-delay: var(--aj-delay, 0ms);
}

/* ── Animaciones ────────────────────────────────────────────────────────────── */
@keyframes ajSweep { from { translate: -120% 0; } to { translate: 120% 0; } }
@keyframes ajFadeUp { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ajPop { 0% { opacity: 0; scale: 0.92; } 100% { opacity: 1; scale: 1; } }
@keyframes ajRise { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes ajCoverIn {
  from { transform: rotateY(-22deg) rotateX(6deg) scale(0.94); }
  to   { transform: rotateY(0) rotateX(0) scale(1); }
}
@keyframes ajConfetti {
  0%   { opacity: 1; translate: 0 0; rotate: 0deg; }
  100% { opacity: 0; translate: var(--x) var(--y); rotate: var(--r); }
}

@media (prefers-reduced-motion: reduce) {
  html.aj-modern *,
  html.aj-modern *::before,
  html.aj-modern *::after { animation: none !important; transition: none !important; }
  html.aj-modern .aj-reveal { opacity: 1; translate: none; }
  html.aj-modern { scroll-behavior: auto; }
}

/* ═══ Segunda pasada (2026-10-03): cabecera con navegación, pie nuevo, cinta de portadas,
   transiciones entre páginas y huecos sin portada ═══════════════════════════════════════ */

/* ── Cabecera fija que se compacta al bajar ────────────────────────────────── */
html.aj-modern .header-panel {
  position: sticky;
  top: 8px;
  z-index: 100;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 18px;
  transition: height 0.35s var(--ease), box-shadow 0.35s var(--ease);
  view-transition-name: aj-header;
}
html.aj-modern .header-panel .logo { transition: height 0.35s var(--ease), width 0.35s var(--ease); }
html.aj-modern .lang-switcher-btn { position: static; transform: none; flex: none; }
html.aj-modern.aj-scrolled .header-panel { height: 58px; box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--header-bg) 80%, transparent); }
html.aj-modern.aj-scrolled .header-panel .logo { height: 40px; width: auto; }

/* Navegación en línea (escritorio) */
html.aj-modern .aj-nav { display: none; }
@media (min-width: 1024px) {
  html.aj-modern .aj-nav { display: flex; gap: 2px; margin-left: auto; }
  html.aj-modern .aj-nav a {
    color: var(--panel-bg);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 7px 13px;
    border-radius: 999px;
    text-shadow: none;
    transition: background-color 0.2s;
  }
  html.aj-modern .aj-nav a:hover { background: rgba(255, 255, 255, 0.18); }
  html.aj-modern .aj-nav a[aria-current] { background: rgba(255, 255, 255, 0.26); }
  html.aj-modern .aj-nav a { white-space: nowrap; }
  html.aj-modern .aj-menu-btn { display: none; }
}
/* 7 secciones: en pantallas de 1024-1279 «Esta semana» se partía y el botón de idioma se salía */
@media (min-width: 1024px) and (max-width: 1279px) {
  html.aj-modern .aj-nav a { padding: 7px 8px; font-size: 0.86rem; }
}

/* Botón de menú y menú nativo (Popover API) en móvil y tableta */
html.aj-modern .aj-menu-btn {
  margin-left: auto;
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
@media (min-width: 1024px) { html.aj-modern .aj-menu-btn { display: none; } }
html.aj-modern .aj-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--panel-bg); }
html.aj-modern .aj-menu {
  inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  width: auto;
  max-width: 460px;
  margin: 0 auto;
  border: 0;
  border-radius: 26px;
  padding: 14px;
  background: var(--panel-bg);
  color: var(--text-color);
  box-shadow: var(--shadow-2);
}
html.aj-modern .aj-menu:popover-open { display: grid; gap: 6px; animation: ajSheet 0.45s var(--ease) both; }
html.aj-modern .aj-menu::backdrop { background: rgba(20, 16, 12, 0.38); backdrop-filter: blur(3px); }
html.aj-modern .aj-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-m);
  color: var(--text-color);
  font-weight: 600;
  text-decoration: none;
  background: var(--page-bg);
}
html.aj-modern .aj-menu a[aria-current] { background: var(--highlight-soft); color: var(--text-accent); }
html.aj-modern .aj-menu .aj-menu-cta { background: var(--brand-gradient); color: var(--panel-bg); justify-content: center; box-shadow: var(--glow); }
html.aj-modern .aj-menu-close {
  margin-top: 4px;
  padding: 11px;
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 1023px) {
  html.aj-modern .header-panel .logo,
  html.aj-modern .timeline-page .header-panel img.logo { width: min(calc(100vw - 190px), 240px); height: auto; margin: 0; }
  html.aj-modern.aj-scrolled .header-panel .logo { width: min(calc(100vw - 190px), 190px); }
  html.aj-modern .header-panel { height: 72px; }
}

/* ── Pie ────────────────────────────────────────────────────────────────────── */
html.aj-modern .aj-footer {
  width: min(94vw, 1100px);
  margin: 28px auto 16px;
  padding: 28px 24px 18px;
  border: 0;
  border-top: 4px solid transparent;
  border-radius: var(--radius-l);
  background: linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box, var(--brand-gradient) border-box;
  box-shadow: var(--shadow-1);
  font-family: var(--font-body);
}
html.aj-modern .aj-footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
html.aj-modern .aj-footer-brand,
html.aj-modern .aj-footer-top > .aj-footer-col:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  html.aj-modern .aj-footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  html.aj-modern .aj-footer-brand,
  html.aj-modern .aj-footer-top > .aj-footer-col:last-child { grid-column: auto; }
}
html.aj-modern .aj-footer-brand img { height: 40px; width: auto; display: block; }
html.aj-modern .aj-footer-brand p { margin: 10px 0 14px; max-width: 36ch; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
html.aj-modern .aj-footer-cta,
html.aj-modern .aj-footer-kofi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  width: fit-content;
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
html.aj-modern .aj-footer-cta { background: var(--brand-gradient); color: var(--panel-bg); box-shadow: var(--glow); }
html.aj-modern .aj-footer-kofi { background: var(--highlight-soft); color: var(--text-color); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-color) 55%, transparent); }
html.aj-modern .aj-footer-cta:hover,
html.aj-modern .aj-footer-kofi:hover { translate: 0 -2px; }
html.aj-modern .aj-footer-col { display: flex; flex-direction: column; gap: 8px; }
html.aj-modern .aj-footer-col h2 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
  background: none;
}
html.aj-modern .aj-footer-col a:not(.aj-footer-kofi) {
  width: fit-content;
  color: var(--dark-grey);
  font-size: 0.92rem;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.3s var(--ease), color 0.2s;
}
html.aj-modern .aj-footer-col a:not(.aj-footer-kofi):hover { background-size: 100% 1.5px; color: var(--text-accent); }
html.aj-modern .aj-footer-kofi .aj-icon, html.aj-modern .aj-footer-lang .aj-icon { width: 18px; height: 18px; vertical-align: -4px; }
html.aj-modern .aj-footer-lang { margin-top: 6px; color: var(--text-muted) !important; }
html.aj-modern .aj-footer-brand > a { display: inline-block; }
/* «Volver arriba» del pie: toma el relevo del botón flotante cuando el pie está a la vista */
html.aj-modern .aj-footer-up { display: block; margin: 12px auto 0; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
html.aj-modern .aj-footer-up:hover { background: color-mix(in srgb, var(--accent-color) 16%, var(--panel-bg)); color: var(--ink); }
html.aj-modern .aj-footer-note { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }
html.aj-modern .aj-footer-bottom {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 1023px) {
  html.aj-modern body.results-page .aj-footer { margin-bottom: 96px; }   /* hueco para la barra de compartir */
}

/* ── Cinta de portadas de la home ──────────────────────────────────────────── */
html.aj-modern .aj-marquee {
  position: relative;
  align-self: stretch;
  margin: -28px -22px 16px;
  padding: 20px 0 8px;
  overflow: hidden;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: linear-gradient(180deg, var(--highlight-soft), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
}
html.aj-modern .aj-marquee-track {
  display: flex;
  gap: 14px;
  padding-right: 14px;
  width: max-content;
  animation: ajMarquee 70s linear infinite;
}
html.aj-modern .aj-marquee:hover .aj-marquee-track { animation-play-state: paused; }
html.aj-modern .aj-marquee figure { margin: 0; width: 88px; flex: none; rotate: -2.5deg; }
html.aj-modern .aj-marquee figure:nth-child(even) { rotate: 2deg; translate: 0 6px; }
html.aj-modern .aj-marquee img { display: block; width: 88px; height: auto; border-radius: 10px; box-shadow: var(--shadow-1); }
html.aj-modern .aj-marquee figcaption {
  margin-top: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  html.aj-modern .aj-marquee { margin: -40px -48px 22px; }
  html.aj-modern .aj-marquee figure,
  html.aj-modern .aj-marquee img { width: 104px; }
}

/* ── Sin portada: tarjeta con trama en vez de un bloque plano ──────────────── */
html.aj-modern .manga-card-placeholder,
html.aj-modern .debut-cover-placeholder,
html.aj-modern .part-vol-placeholder,
html.aj-modern .mangaka-work-row-cover-placeholder {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.24) 1px, transparent 1.7px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.28)) !important;
  background-size: 8px 8px, auto !important;
}
html.aj-modern .manga-card-placeholder-text,
html.aj-modern .debut-cover-placeholder-text { font-size: 1rem; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }


/* ── Sistema de títulos: tres niveles, iguales en todas las páginas ────────────────────
   1. Título de página: franja con degradado, Bangers 1.7rem. La home y el resultado usan
      en su lugar un titular grande con el texto en degradado (son portadas, no fichas).
   2. Sección: franja con degradado, Bangers 1.25rem.
   3. Titular dentro de una tarjeta (bloques de la home, sumario del resultado, año de la
      cronología, décadas de la historia): Bangers 1.35rem en naranja oscuro, sin franja.
   Todos en Bangers a 700, como el titular de la home. */
html.aj-modern .debuts-section > h1, html.aj-modern .about-section h1, html.aj-modern .hist-section h1,
html.aj-modern .manga-detail-section h1, html.aj-modern .jump-section h1 {
  font-family: var(--font-heading-comic);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--panel-bg);
  background: var(--brand-gradient);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}
html.aj-modern .debuts-section > h2, html.aj-modern .about-section h2, html.aj-modern .hist-section h2,
html.aj-modern .manga-detail-section h2, html.aj-modern .jump-main > h2, html.aj-modern .mangaka-works-heading {
  font-family: var(--font-heading-comic);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--panel-bg);
  background: var(--brand-gradient);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
html.aj-modern .hist-section h2.hist-decade-year,
html.aj-modern .index-page .home-intro h2,
html.aj-modern .results-page .tab-content h2,
html.aj-modern .covers-year-title {
  font-family: var(--font-heading-comic);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-accent);
  background: none;
  text-shadow: none;
  padding: 0;
}
@media (max-width: 600px) {
  html.aj-modern .debuts-section > h1, html.aj-modern .about-section h1, html.aj-modern .hist-section h1,
  html.aj-modern .manga-detail-section h1, html.aj-modern .jump-section h1 { font-size: 1.45rem; }
  html.aj-modern .debuts-section > h2, html.aj-modern .about-section h2, html.aj-modern .hist-section h2,
  html.aj-modern .manga-detail-section h2, html.aj-modern .jump-main > h2, html.aj-modern .mangaka-works-heading { font-size: 1.15rem; }
}

/* ── Texto: titulares equilibrados y párrafos sin viudas ───────────────────── */
html.aj-modern h1, html.aj-modern h2, html.aj-modern h3 { text-wrap: balance; }
html.aj-modern p, html.aj-modern li { text-wrap: pretty; }

/* ── Transiciones suaves entre páginas (View Transitions entre documentos) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.25s ease both ajVtOut; }
::view-transition-new(root) { animation: 0.4s ease both ajVtIn; }
@keyframes ajVtOut { to { opacity: 0; translate: 0 -8px; } }
@keyframes ajVtIn { from { opacity: 0; translate: 0 12px; } }
@keyframes ajMarquee { to { translate: -50% 0; } }
@keyframes ajSheet { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.aj-modern .aj-marquee-track { animation: none !important; }
}

/* ── Home: ajustes tras la revisión del 2026-10-03 ──────────────────────────── */
/* Nombres de la cinta legibles (el gris de antes quedaba en 4,48:1) */
html.aj-modern .aj-marquee figcaption { color: var(--dark-grey); }
/* Error del buscador: aviso visible que tiembla, en vez de una línea roja pequeña */
html.aj-modern .index-page .error-message {
  min-height: 0;
  margin: 4px 0 2px;
  padding: 7px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--error) 10%, var(--panel-bg));
  color: var(--error);
  font-size: 0.88rem;
  text-shadow: none;
  animation: ajShake 0.45s var(--ease) both;
}
@keyframes ajShake {
  0%, 100% { translate: 0 0; }
  20% { translate: -6px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}
/* «Tal día como hoy» */
html.aj-modern .home-today .td-cover strong { color: var(--text-accent); }
html.aj-modern .home-today .td-cover small { color: var(--text-muted); }
@media (max-width: 600px) {
  /* En móvil, carrusel deslizable con portadas grandes en vez de cinco miniaturas de 60 px */
  html.aj-modern .home-today .td-covers {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -4px;
    padding: 4px 4px 10px;
    scrollbar-width: none;
  }
  html.aj-modern .home-today .td-covers::-webkit-scrollbar { display: none; }
  html.aj-modern .home-today .td-cover { flex: 0 0 40%; scroll-snap-align: start; font-size: 0.82rem; }
  html.aj-modern .home-today .td-cover strong { font-size: 0.9rem; }
  /* Mascotas: más compactas, sin el hueco blanco bajo el dibujo */
  html.aj-modern .index-page .mascot-panels-wrapper { height: auto; gap: 10px; }   /* antes 300 px fijos */
  html.aj-modern .index-page .mascot-panels-wrapper > .panel { min-height: 0; height: auto; justify-content: flex-start; padding: 8px 6px 0; }
  html.aj-modern .index-page .mascot,
  html.aj-modern .index-page .mascot2 { flex: none; height: 150px; background-position: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .index-page .error-message { animation: none; }
}

/* ═══ Portada nueva: un único foco (2026-10-03) ══════════════════════════════════════════
   La pregunta, el selector y una portada grande que cambia en directo (home-hero.js).
   Debajo, la cinta de debuts míticos y los accesos con iconos propios. */
html.aj-modern body.index-page .manga-page.aj-home {
  display: block;
  width: min(94vw, 1180px);
  max-width: 1180px;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  margin: 0 auto;
}
html.aj-modern body.index-page .home-intro { width: min(94vw, 1180px); max-width: 1180px; margin: 22px auto 0; }

html.aj-modern .aj-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-top: 14px;
  padding: 22px 18px 26px;
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--header-bg) 10%, transparent), transparent 60%),
    var(--panel-bg);
  box-shadow: var(--shadow-2);
  overflow: clip;
}
/* En móvil, el texto y el selector rodean a la portada: pregunta → portada → selector */
html.aj-modern .aj-hero-copy { display: contents; }
html.aj-modern .aj-kicker { order: 1; }
html.aj-modern .aj-hero h1 { order: 2; }
html.aj-modern .aj-lead { order: 3; }
html.aj-modern .aj-hero-visual { order: 4; }
html.aj-modern .aj-picker { order: 5; }

html.aj-modern .aj-kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}
html.aj-modern .aj-kicker span {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--highlight-soft);
  color: var(--text-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
html.aj-modern .aj-hero h1 {
  margin: 0 0 6px;
  font-family: var(--font-heading-comic);
  font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
html.aj-modern .aj-hero h1 em {
  font-style: normal;
  color: var(--header-bg);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--primary-highlight) 75%, transparent) 62% 92%, transparent 92%);
  padding: 0 0.06em;
}
html.aj-modern .aj-lead { display: none; }

/* Portada en directo */
html.aj-modern .aj-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 22px 0 26px;
}
html.aj-modern .aj-burst {
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent-color) 26%, transparent) 0deg 5deg, transparent 5deg 13deg);
  -webkit-mask-image: radial-gradient(circle, black 8%, transparent 58%);
  mask-image: radial-gradient(circle, black 8%, transparent 58%);
  animation: ajSpin 120s linear infinite;
}
html.aj-modern .aj-stack { position: relative; width: min(196px, 50vw); aspect-ratio: 480 / 702; }
html.aj-modern .aj-stack-back {
  position: absolute;
  top: 12%;
  width: 66%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  filter: saturate(0.85);
  animation: ajFloat 7s ease-in-out infinite alternate;
}
html.aj-modern .aj-stack-l { left: -38%; rotate: -12deg; }
html.aj-modern .aj-stack-r { right: -38%; rotate: 11deg; animation-delay: -3.5s; }
html.aj-modern .aj-cover-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cover-placeholder);
  box-shadow: 0 34px 60px -24px rgba(70, 25, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.45s var(--ease);
  will-change: transform;
}
html.aj-modern .aj-cover-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-cover-card.aj-flip { animation: ajFlipCard 0.62s var(--ease) both; }
html.aj-modern .aj-cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.42) 48%, transparent 62%);
  translate: -130% 0;
  animation: ajShine 6s var(--ease) 1.4s infinite;
  pointer-events: none;
}
html.aj-modern .aj-sticker {
  position: absolute;
  right: -46%;
  bottom: 4%;
  z-index: 2;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--panel-bg);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: left;
  rotate: -4deg;
  box-shadow: var(--shadow-2);
}
html.aj-modern .aj-sticker b {
  font-family: var(--font-heading-comic);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--primary-highlight);
}
html.aj-modern .aj-sticker.is-yours { background: var(--brand-gradient); }
html.aj-modern .aj-sticker.is-yours b { color: var(--panel-bg); }
html.aj-modern .aj-sticker.aj-pop { animation: ajPop 0.55s var(--spring) both; }

/* Selector */
html.aj-modern .aj-picker { display: grid; gap: 12px; width: 100%; max-width: 460px; }
html.aj-modern .aj-picker .date-selects {
  display: grid;
  grid-template-columns: 0.8fr 1.45fr 1fr;
  gap: 10px;
  max-width: none;
  margin: 0;
  transform: none !important;
}
html.aj-modern .aj-field { position: relative; display: block; text-align: left; }
html.aj-modern .aj-field > span {
  position: absolute;
  top: 9px;
  left: 14px;
  z-index: 1;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}
html.aj-modern .aj-picker .date-select {
  width: 100%;
  height: 62px;
  padding: 24px 28px 6px 14px;
  border: 2px solid var(--border-soft);
  border-radius: 16px;
  background: var(--page-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
  transform: none !important;
}
html.aj-modern .aj-picker .date-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 30%, transparent); background-color: var(--panel-bg); }
/* Ruedas de fecha (date-wheel.js): cubren los <select>, que siguen debajo para index.js */
/* Alto de la rueda reservado antes de que cargue el JS (si no, el contenido de debajo saltaba) */
html.aj-modern .aj-picker .aj-field { min-height: 148px; }
html.aj-modern .aj-field.has-wheel { overflow: hidden; padding-top: 24px; border: 2px solid var(--border-soft); border-radius: 16px; background: var(--page-bg); transition: border-color 0.2s, box-shadow 0.2s; }
html.aj-modern .aj-field.has-wheel > span { left: 0; right: 0; text-align: center; }
html.aj-modern .aj-field.has-wheel > select { display: none; }
html.aj-modern .aj-field.has-wheel::after { content: ''; position: absolute; left: 6px; right: 6px; top: calc(24px + 40px); height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--accent-color) 14%, var(--panel-bg)); pointer-events: none; }
html.aj-modern .aj-field.has-wheel:focus-within { border-color: var(--accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 30%, transparent); }
html.aj-modern .aj-wheel { position: relative; z-index: 1; height: 120px; overflow-y: auto; outline: 0; scrollbar-width: none; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); box-sizing: border-box; }
html.aj-modern .aj-wheel::-webkit-scrollbar { display: none; }
html.aj-modern .aj-wheel-pad { height: 40px; }
html.aj-modern .aj-wheel-it { display: grid; place-items: center; height: 40px; color: var(--text-muted); font-size: 0.98rem; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.15s, font-size 0.15s; }
html.aj-modern .aj-wheel-it.is-on { color: var(--ink); font-size: 1.12rem; font-weight: 800; }
html.aj-modern .aj-wheel-it.is-off { opacity: 0.3; cursor: default; }
/* Rótulo inicial («Día / Mes / Año»): en el centro mientras no se elige; el de arriba se oculta */
html.aj-modern .aj-wheel-it.is-ph { color: var(--text-muted); font-weight: 600; }
html.aj-modern .aj-wheel-it.is-ph.is-on { color: var(--text-muted); font-size: 1.02rem; font-weight: 700; }
html.aj-modern .aj-field.has-wheel.is-empty > span { visibility: hidden; }
html.aj-modern .aj-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0 0;
  padding: 17px 24px;
  font-size: 1.2rem;
  background: linear-gradient(110deg, var(--header-bg), var(--accent-color) 45%, var(--header-bg) 90%) 0 0 / 220% 100%;
  animation: ajCtaGlow 5s ease-in-out infinite;
  transform: none !important;
}
html.aj-modern .aj-link-btn {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--text-accent);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
html.aj-modern .aj-link-btn .aj-icon { width: 18px; height: 18px; transition: rotate 0.5s var(--spring); }
html.aj-modern .aj-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
html.aj-modern .aj-link-btn:hover .aj-icon { rotate: 180deg; }
html.aj-modern .aj-home .error-message { margin: 0; }

@media (min-width: 900px) {
  html.aj-modern .aj-hero {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    text-align: left;
    gap: 24px;
    padding: 54px 56px;
    min-height: min(620px, calc(100svh - 130px));
  }
  html.aj-modern .aj-hero-copy { display: block; }
  html.aj-modern .aj-kicker { justify-content: flex-start; }
  html.aj-modern .aj-lead { display: block; margin: 8px 0 26px; max-width: 46ch; color: var(--dark-grey); font-size: 1.06rem; line-height: 1.55; }
  html.aj-modern .aj-link-btn { justify-self: start; }
  html.aj-modern .aj-hero-visual { padding: 0; min-height: 460px; }
  html.aj-modern .aj-stack { width: min(300px, 26vw); }
  html.aj-modern .aj-sticker { right: -34%; font-size: 0.8rem; padding: 11px 15px; }
  html.aj-modern .aj-sticker b { font-size: 1.8rem; }
}

/* Cinta de debuts bajo la portada */
html.aj-modern .aj-strip { margin-top: 26px; }
html.aj-modern .aj-strip-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html.aj-modern .aj-strip .aj-marquee { margin: 0; border-radius: 0; background: none; }

/* Accesos */
html.aj-modern .aj-explore { margin-top: 28px; }
html.aj-modern .aj-explore h2 {
  margin: 0 0 14px 4px;
  font-family: var(--font-heading-comic);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
html.aj-modern .aj-explore-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { html.aj-modern .aj-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html.aj-modern .aj-explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.aj-modern .aj-explore-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--panel-bg);
  color: var(--text-color);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
html.aj-modern .aj-explore-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}
html.aj-modern .aj-explore-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--highlight-soft);
  color: var(--text-accent);
  transition: background-color 0.3s, color 0.3s;
}
html.aj-modern .aj-explore-card:hover .aj-explore-ico { background: var(--brand-gradient); color: var(--panel-bg); }
html.aj-modern .aj-explore-text { display: grid; gap: 2px; min-width: 0; }
html.aj-modern .aj-explore-text strong { font-size: 1rem; }
html.aj-modern .aj-explore-text small { color: var(--text-muted); font-size: 0.84rem; line-height: 1.35; }
html.aj-modern .aj-explore-arrow { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--text-muted); transition: translate 0.3s var(--ease), color 0.3s; }
html.aj-modern .aj-explore-card:hover .aj-explore-arrow { translate: 4px 0; color: var(--text-accent); }
/* Cada tarjeta con el color de su sección (2026-10-08): icono en su color, fondo y borde teñidos */
html.aj-modern .aj-explore-card[style*="--c"] { background: color-mix(in srgb, var(--c) 7%, var(--panel-bg)); border-color: color-mix(in srgb, var(--c) 22%, transparent); }
html.aj-modern .aj-explore-card[style*="--c"]:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
html.aj-modern .aj-explore-card[style*="--c"] .aj-explore-ico,
html.aj-modern .aj-explore-card[style*="--c"]:hover .aj-explore-ico { background: var(--c); color: var(--panel-bg); }
html.aj-modern .aj-explore-card[style*="--c"] .aj-explore-arrow,
html.aj-modern .aj-explore-card[style*="--c"]:hover .aj-explore-arrow { color: var(--c); }
@media (min-width: 640px) { html.aj-modern .aj-explore-card.is-wide { grid-column: 1 / -1; } }

@keyframes ajSpin { to { rotate: 360deg; } }
@keyframes ajFloat { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes ajShine { 0% { translate: -130% 0; } 22%, 100% { translate: 130% 0; } }
@keyframes ajCtaGlow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes ajFlipCard {
  0%   { transform: perspective(900px) rotateY(0) scale(1); }
  45%  { transform: perspective(900px) rotateY(88deg) scale(0.94); }
  55%  { transform: perspective(900px) rotateY(-88deg) scale(0.94); }
  100% { transform: perspective(900px) rotateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .aj-burst, html.aj-modern .aj-stack-back, html.aj-modern .aj-cover-shine, html.aj-modern .aj-cta { animation: none !important; }
}

/* ═══ Resultado como revelación (2026-10-03) ═════════════════════════════════════════════ */
/* Pantalla de «¡Buscando tu Jump!» (2026-10-04): clara como el resto del diseño, tres portadas
   que se barajan, el título con el subrayado amarillo de las cabeceras, la fecha y una barra fina */
html.aj-modern .loading-container {
  overflow: hidden;
  gap: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent-color) 16%, var(--page-bg)), var(--page-bg) 62%);
  backdrop-filter: none;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
html.aj-modern .loading-container > * { position: relative; z-index: 1; }
html.aj-modern .aj-load-deck { position: relative; width: 150px; height: 214px; margin-bottom: 26px; }
html.aj-modern .aj-load-deck img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.06); animation: ajShuffle 1.5s var(--ease) infinite; }
html.aj-modern .aj-load-deck img:nth-child(1) { animation-delay: -1s; }
html.aj-modern .aj-load-deck img:nth-child(2) { animation-delay: -0.5s; }
/* cada portada sale por la derecha, vuelve detrás y sube al frente: tres a la vez parecen barajarse */
@keyframes ajShuffle {
  0% { translate: 0 0; rotate: -2deg; z-index: 3; }
  30% { translate: 92px -10px; rotate: 12deg; z-index: 3; }
  33.4% { z-index: 1; }
  60% { translate: 0 0; rotate: 3deg; z-index: 1; }
  100% { translate: 0 0; rotate: -2deg; z-index: 2; }
}
html.aj-modern .aj-load-kicker { margin: 0 0 8px; color: var(--text-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
html.aj-modern .loading-text {
  margin: 0;
  padding: 0 6px;
  color: var(--ink);
  font-size: clamp(2.1rem, 8vw, 3rem);
  letter-spacing: 0.02em;
  text-shadow: none;
  background: linear-gradient(transparent 62%, var(--primary-highlight) 62%, var(--primary-highlight) 92%, transparent 92%);
}
html.aj-modern .aj-load-date { margin: 10px 0 0; color: var(--dark-grey); font-size: 1rem; font-weight: 600; }
html.aj-modern .aj-load-bar { width: min(220px, 60vw); height: 4px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
html.aj-modern .aj-load-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--brand-gradient); animation: ajLoadBar 1.1s ease-in-out infinite; }
@keyframes ajLoadBar { 0% { translate: -110% 0; } 100% { translate: 260% 0; } }
html.aj-modern .loading-container:not(.visible) .aj-load-deck { scale: 1.1; opacity: 0; transition: scale 0.5s var(--ease), opacity 0.35s; }
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .aj-load-deck img, html.aj-modern .aj-load-bar span { animation: none; }
  html.aj-modern .aj-load-deck img:nth-child(1) { rotate: -8deg; translate: -28px 6px; }
  html.aj-modern .aj-load-deck img:nth-child(3) { rotate: 8deg; translate: 28px 6px; }
}

/* Revelación en móvil: fecha pedida y número en grande, encima de la portada */
html.aj-modern .aj-reveal-head { margin: 4px 0 14px; text-align: center; }
html.aj-modern .aj-reveal-kicker {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html.aj-modern .aj-reveal-title {
  margin: 6px 0 0;
  font-family: var(--font-heading-comic);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
html.aj-modern .aj-reveal-title b {
  display: block;
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 0.95;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.aj-modern.aj-revealed .aj-reveal-title b { animation: ajPop 0.7s var(--spring) both; }
html.aj-modern .aj-reveal-head .bday-match { margin-top: 12px; }
@media (max-width: 1023px) {
  /* El titular de la ficha ya está arriba: el h1 de abajo queda solo para lectores de pantalla */
  html.aj-modern .results-page:has(.aj-reveal-head) #resultInfoTitle {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 1024px) { html.aj-modern .aj-reveal-head { display: none; } }

/* Lluvia de confeti al revelar (solo si vienes del buscador) */
html.aj-modern .aj-rain { position: fixed; inset: 0; z-index: 1300; pointer-events: none; overflow: hidden; }
html.aj-modern .aj-rain span {
  position: absolute;
  top: -20px;
  height: 12px;
  border-radius: 2px;
  animation-name: ajRain;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1);
  animation-fill-mode: forwards;
}
@keyframes ajRain {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; }
  100% { translate: var(--x) 110vh; rotate: var(--r); opacity: 0.9; }
}

/* ── Menos naranja: los títulos de sección dejan la franja y llevan una marca a la izquierda ── */
html.aj-modern .debuts-section > h2, html.aj-modern .about-section h2, html.aj-modern .hist-section h2:not(.hist-decade-year),
html.aj-modern .manga-detail-section h2, html.aj-modern .jump-main > h2, html.aj-modern .mangaka-works-heading {
  position: relative;
  background: none;
  color: var(--ink);
  text-shadow: none;
  font-size: 1.45rem;
}
html.aj-modern .debuts-section > h2::before, html.aj-modern .about-section h2::before, html.aj-modern .hist-section h2:not(.hist-decade-year)::before,
html.aj-modern .manga-detail-section h2::before, html.aj-modern .jump-main > h2::before, html.aj-modern .mangaka-works-heading::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 1.05em;
  translate: 0 -50%;
  border-radius: 3px;
  background: var(--brand-gradient);
}
@media (max-width: 600px) {
  html.aj-modern .debuts-section > h2, html.aj-modern .about-section h2, html.aj-modern .hist-section h2:not(.hist-decade-year),
  html.aj-modern .manga-detail-section h2, html.aj-modern .jump-main > h2, html.aj-modern .mangaka-works-heading { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .aj-rain { display: none; }
  html.aj-modern .loading-text { animation: none; }
}

html.aj-modern .aj-menu .aj-icon { width: 22px; height: 22px; flex: none; color: var(--text-accent); }
html.aj-modern .aj-menu .aj-menu-cta .aj-icon { color: var(--panel-bg); }

/* ── Un solo ancho en todo el sitio (2026-10-03) ─────────────────────────────────────────
   Antes: portada 1180 px, resultado y /jump 1240 px, resto de páginas ~828 px y el pie 1100 px;
   la cabecera, además, quedaba unos píxeles por dentro del contenido. Ahora cabecera,
   contenido y pie miden lo mismo en todas las páginas. */
html.aj-modern { --aj-w: min(94vw, 1180px); }
html.aj-modern body .manga-page,
html.aj-modern body.index-page .manga-page.aj-home,
html.aj-modern body.results-page .manga-page,
html.aj-modern body.jump-page .manga-page,
html.aj-modern body.debuts-page .manga-page {
  width: var(--aj-w);
  max-width: var(--aj-w);
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
html.aj-modern .aj-footer,
html.aj-modern body.index-page .home-intro { width: var(--aj-w); max-width: var(--aj-w); }
/* Páginas de lectura más anchas: el texto corrido no pasa de una línea cómoda */
html.aj-modern .debuts-section p,
html.aj-modern .about-section p,
html.aj-modern .hist-section p { max-width: 78ch; }

/* Cronología: como el resto, crece con su contenido y hace scroll la página (antes era un
   cuadrado de 90vmin con la rejilla de portadas con scroll propio) */
html.aj-modern body.timeline-page { height: auto; min-height: 100dvh; overflow-y: auto; }
html.aj-modern body.timeline-page .manga-page { height: auto; min-height: 0; max-height: none; align-self: auto; }
html.aj-modern .timeline-page .covers-grid { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Logo plano (2026-10-03): sin el relieve ni la sombra del logo de cómic */
html.aj-modern .header-panel .logo.logo-flat { height: 54px; width: auto; filter: none; }
html.aj-modern.aj-scrolled .header-panel .logo.logo-flat { height: 42px; }
html.aj-modern .aj-footer-brand img { height: 44px; }
@media (max-width: 1023px) {
  html.aj-modern .header-panel .logo.logo-flat,
  html.aj-modern.aj-scrolled .header-panel .logo.logo-flat { width: min(calc(100vw - 180px), 230px); height: auto; }
}

/* Botón «¡Buscar mi Jump!» del mismo ancho que el selector (una regla móvil antigua lo
   limitaba a 300 px y quedaba pegado a la izquierda) */
html.aj-modern .aj-picker .aj-cta { width: 100%; max-width: none;   /* una regla móvil antigua lo dejaba en 300 px */ }

/* Sin negrita falsa: Bangers (y Boogaloo) solo tienen un grosor; al pedirles 700 el navegador
   las engordaba a mano y los títulos salían emborronados y apelmazados. */
html.aj-modern { font-synthesis-weight: none; font-synthesis: style; }

/* ── Repaso de la portada (2026-10-03) ─────────────────────────────────────── */
/* Gris de texto secundario un punto más oscuro: #777 daba 4,48:1 (mínimo 4,5:1) */
html.aj-modern { --text-muted: #666; --font-body: 'AJ Rubik', 'Rubik Fallback', sans-serif; --font-heading-comic: 'AJ Bangers', cursive; }
/* Textos que bajaban de 12 px */
html.aj-modern .aj-kicker span { font-size: 0.8rem; }
html.aj-modern .aj-field > span { font-size: 0.7rem; }
html.aj-modern .lang-switcher-btn { font-size: 0.8rem; }
html.aj-modern .aj-marquee figcaption { font-size: 0.72rem; }
html.aj-modern .aj-strip-title { color: var(--dark-grey); }
html.aj-modern .aj-sticker { font-size: 0.78rem; }

/* Móviles estrechos (≤400 px): las tres píldoras en una línea y «Día» sin cortar */
@media (max-width: 400px) {
  html.aj-modern .aj-kicker { gap: 4px; flex-wrap: nowrap; }
  html.aj-modern .aj-kicker span { padding: 4px 8px; font-size: 0.72rem; white-space: nowrap; }
  html.aj-modern .aj-picker .date-selects { grid-template-columns: 0.9fr 1.35fr 1fr; gap: 8px; }
  html.aj-modern .aj-picker .date-select { padding-left: 11px; padding-right: 22px; background-position: right 8px center; }
  html.aj-modern .aj-field > span { left: 11px; }
}

/* En el resultado la cabecera no lleva nombre de transición: con él, el navegador la dibujaba
   por encima de la pantalla de «¡Buscando tu Jump!» mientras duraba el paso de página */
html.aj-modern body.results-page .header-panel { view-transition-name: none; }

/* La pantalla de carga sale visible desde el HTML (antes aparecía cuando arrancaba el JS y en el
   primer instante se veía la página debajo). Seguro: si el JS no la retira, se va sola a los 6 s. */
html.aj-modern .loading-container.visible { animation: ajLoaderSafety 0.4s ease 6s forwards; }
@keyframes ajLoaderSafety { to { opacity: 0; visibility: hidden; } }

/* ── Botón de volver arriba (2026-10-03) ─────────────────────────────────────────
   Tinta con flecha blanca y un anillo naranja que marca cuánto llevas de página (--p lo pone
   back-to-top.php). Visible también en escritorio. En el resultado sube por encima del botón
   de compartir para no pisarlo. */
/* Discreto (2026-10-04): pequeño, cristal translúcido, solo en páginas largas y por encima del pie */
html.aj-modern .back-to-top {
  display: grid !important;
  place-items: center;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom) + var(--lift, 0px));
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--panel-bg) 78%, transparent) 86%, transparent 87%),
    conic-gradient(var(--accent-color) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--ink) 12%, transparent) 0);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.4);
  scale: 0.6;
  transition: opacity 0.3s var(--ease), visibility 0.3s, scale 0.35s var(--spring), translate 0.25s var(--ease);
}
html.aj-modern .back-to-top.visible { scale: 1; }
html.aj-modern .back-to-top:hover { translate: 0 -3px; transform: none; filter: none; }
html.aj-modern .back-to-top::before { border-color: var(--ink); margin-top: 5px; }
html.aj-modern body.results-page .back-to-top { bottom: calc(86px + env(safe-area-inset-bottom) + var(--lift, 0px)); }
@media (min-width: 1024px) {
  html.aj-modern .back-to-top { right: 24px; bottom: calc(24px + var(--lift, 0px)); }
  html.aj-modern body.results-page .back-to-top { bottom: calc(90px + var(--lift, 0px)); right: 30px; }
}

/* ═══ /jump: cabecera del número (2026-10-03) ═══════════════════════════════════════════
   «#44» enorme, fechas, apertura a color y cifras que llevan a cada sección; la portada con
   zoom sobre líneas de acción. Sin la franja de título ni la columna lateral de antes. */
html.aj-modern .aj-issue-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 0 30px;
  padding: 6px 0 4px;
}
html.aj-modern .aj-issue-copy { display: contents; }
html.aj-modern .aj-issue-hero .aj-kicker { order: 1; }
html.aj-modern .aj-issue-hero h1 { order: 2; }
html.aj-modern .aj-issue-visual { order: 3; }
html.aj-modern .aj-issue-dates { order: 4; }
html.aj-modern .aj-issue-lead { order: 5; }
html.aj-modern .aj-issue-stats { order: 6; }
html.aj-modern .aj-issue-actions { order: 7; }
html.aj-modern .aj-issue-nav { order: 8; }

html.aj-modern .jump-section .aj-issue-hero h1 {
  display: grid;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  color: var(--ink);
  font-size: inherit;
  line-height: 0.9;
}
html.aj-modern .aj-issue-mag {
  font-family: var(--font-heading-comic);
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: var(--dark-grey);
}
html.aj-modern .aj-issue-num {
  font-family: var(--font-heading-comic);
  font-size: clamp(4.6rem, 24vw, 8rem);
  letter-spacing: 0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.04em 0.06em 0;
}
html.aj-modern .aj-issue-dates {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--dark-grey);
  font-weight: 600;
}
html.aj-modern .aj-issue-dates .aj-icon { width: 18px; height: 18px; color: var(--text-accent); }
html.aj-modern .aj-issue-lead { margin: 8px 0 0; max-width: 46ch; color: var(--dark-grey); line-height: 1.5; }
html.aj-modern .aj-issue-lead strong { color: var(--text-accent); }
html.aj-modern .aj-issue-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
html.aj-modern .aj-issue-stats a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--page-bg);
  color: var(--dark-grey);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: translate 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
html.aj-modern .aj-issue-stats a:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); box-shadow: var(--shadow-1); }
html.aj-modern .aj-issue-stats b { font-family: var(--font-heading-comic); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--text-accent); }
html.aj-modern .aj-issue-stats .is-hot a { background: var(--highlight-soft); border-color: color-mix(in srgb, var(--accent-color) 50%, transparent); }
html.aj-modern .aj-issue-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  margin: 18px 0 0;
}
html.aj-modern .aj-issue-cta { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 13px 26px; }
html.aj-modern .aj-issue-cta .aj-icon { width: 18px; height: 18px; }
html.aj-modern .aj-rot90 { rotate: 90deg; }
html.aj-modern .aj-issue-actions .aj-link-btn { text-decoration: none; }
html.aj-modern .aj-issue-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
html.aj-modern .aj-issue-nav a {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--dark-grey);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
html.aj-modern .aj-issue-nav a:hover { background: var(--highlight-soft); color: var(--text-accent); }

/* Portada con zoom */
html.aj-modern .aj-issue-visual { position: relative; display: grid; place-items: center; width: 100%; padding: 22px 0 18px; }
html.aj-modern .aj-issue-visual .aj-burst { inset: -25% -15%; }
html.aj-modern .aj-cover-card.aj-issue-cover {
  position: relative;
  inset: auto;
  width: min(250px, 64vw);
  aspect-ratio: 480 / 702;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
html.aj-modern .aj-issue-cover img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
html.aj-modern .aj-zoom-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: var(--panel-bg);
  backdrop-filter: blur(4px);
  transition: scale 0.3s var(--spring);
}
html.aj-modern .aj-zoom-chip .aj-icon { width: 18px; height: 18px; }
html.aj-modern .aj-issue-cover:hover .aj-zoom-chip { scale: 1.12; }
html.aj-modern .aj-issue-visual .aj-sticker { right: max(2%, calc(50% - 210px)); bottom: 12%; max-width: 190px; }
html.aj-modern .aj-issue-visual .aj-sticker b { font-size: 1.15rem; }

@media (min-width: 900px) {
  html.aj-modern .aj-issue-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 30px;
    text-align: left;
    padding: 18px 8px 10px;
  }
  html.aj-modern .aj-issue-copy { display: block; }
  html.aj-modern .aj-issue-hero .aj-kicker,
  html.aj-modern .aj-issue-stats,
  html.aj-modern .aj-issue-actions,
  html.aj-modern .aj-issue-nav { justify-content: flex-start; }
  html.aj-modern .aj-issue-num { font-size: clamp(6rem, 11vw, 9.5rem); }
  html.aj-modern .aj-issue-dates { margin-top: 6px; }
  html.aj-modern .aj-issue-visual { padding: 10px 0; }
  html.aj-modern .aj-cover-card.aj-issue-cover { width: min(330px, 28vw); }
  html.aj-modern .aj-issue-visual .aj-sticker { right: 0; }
}

/* Sumario a todo el ancho: tantas columnas como quepan (5 en un portátil) */
html.aj-modern .jump-page .jump-main .jump-gallery { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 18px; }
@media (max-width: 560px) { html.aj-modern .jump-page .jump-main .jump-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* Series que descansan: etiquetas */
html.aj-modern .jump-absent { line-height: 2.4; color: var(--text-muted); }
html.aj-modern .jump-absent a {
  display: inline-block;
  padding: 3px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--dark-grey);
  font-weight: 600;
  line-height: 1.6;
  transition: background-color 0.2s, color 0.2s;
}
html.aj-modern .jump-absent a:hover { background: var(--highlight-soft); color: var(--text-accent); }

/* Número anterior / siguiente al final: tarjetas */
html.aj-modern .jump-next a {
  padding: 13px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  background: var(--panel-bg);
  box-shadow: var(--shadow-1);
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
html.aj-modern .jump-next a:hover { translate: 0 -3px; box-shadow: var(--shadow-2); }
html.aj-modern .jump-next .jn-year { background: var(--highlight-soft); }

/* Buscador de nacimiento: bloque destacado */
html.aj-modern .jump-birth {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 14%, var(--panel-bg)), var(--panel-bg));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-color) 45%, transparent);
}
html.aj-modern .jump-birth input[type=date] { border: 2px solid var(--border-soft); border-radius: 14px; padding: 11px 14px; font-weight: 600; }
html.aj-modern .jump-birth .manga-button { margin: 0; }

/* Accesos del final: secundarios (el naranja queda para la acción principal) */
html.aj-modern .jump-cta .manga-button {
  background: var(--panel-bg);
  color: var(--text-color);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-1);
  font-weight: 600;
}
html.aj-modern .jump-cta .manga-button:hover { box-shadow: var(--shadow-2); }

/* /jump · parte de abajo: descansan, vecinos, páginas a color y preguntas frecuentes */
html.aj-modern .jump-absent { display: flex; flex-wrap: wrap; gap: 8px; line-height: 1.6; }
html.aj-modern .jump-absent .ja-sep { display: none; }
html.aj-modern .jump-absent .ja-name {
  display: inline-block;
  padding: 3px 13px;
  border: 1px dashed var(--border-soft);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
}
html.aj-modern .jump-next { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
html.aj-modern .jump-next a { display: grid; place-items: center; min-height: 52px; justify-self: stretch; }
@media (max-width: 480px) {
  html.aj-modern .jump-next { grid-template-columns: 1fr 1fr; }
  html.aj-modern .jump-next .jn-year { grid-column: 1 / -1; grid-row: 2; }
}
/* Páginas a color: en el móvil, dos por fila (antes una a todo el ancho y la sección no acababa nunca) */
html.aj-modern .cp-cell { border: 0; border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
@media (max-width: 560px) {
  html.aj-modern .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 10px; }
  html.aj-modern .cp-cell.wide { grid-column: 1 / -1; }
  html.aj-modern .cp-cell > img { height: 100%; object-fit: cover; }
  html.aj-modern .cp-cell.wide > img { height: auto; object-fit: contain; }
  html.aj-modern .cp-grid:has(.wide) { grid-auto-rows: auto; }
  html.aj-modern .cp-grid:has(.wide) .cp-cell:not(.wide) { aspect-ratio: 2 / 3; }
}
/* Preguntas frecuentes: acordeón limpio */
html.aj-modern .debuts-faq { gap: 10px; }
html.aj-modern .faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  background: var(--panel-bg);
  box-shadow: var(--shadow-1);
  overflow: clip;
  transition: box-shadow 0.25s var(--ease);
}
html.aj-modern .faq-item[open] { box-shadow: var(--shadow-2); }
html.aj-modern .faq-item summary {
  align-items: center;
  padding: 14px 16px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-color);
}
html.aj-modern .faq-item summary::before {
  content: '+';
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--highlight-soft);
  color: var(--text-accent);
  font-weight: 800;
  line-height: 1;
  transition: rotate 0.3s var(--ease);
}
html.aj-modern .faq-item[open] summary::before { content: '+'; rotate: 45deg; }
html.aj-modern .faq-answer { padding: 0 16px 16px 50px; border-top: 0; background: none; color: var(--dark-grey); }
@media (max-width: 560px) {
  html.aj-modern .jump-cta { gap: 8px; }
  html.aj-modern .jump-cta .manga-button { margin: 0; padding: 10px 16px; font-size: 0.9rem; white-space: nowrap; }
}
/* Vecinos: tarjetas que se reparten la fila (sin hueco cuando aún no hay número siguiente) */
html.aj-modern .jump-next { display: flex; flex-wrap: wrap; }
html.aj-modern .jump-next > span:empty { display: none; }
html.aj-modern .jump-next a { flex: 1 1 0; white-space: nowrap; }
html.aj-modern .jump-next .jn-prev { order: 1; }
html.aj-modern .jump-next .jn-next { order: 2; }
html.aj-modern .jump-next .jn-year { order: 3; flex-basis: 100%; min-height: 0; padding: 9px 18px; }
@media (min-width: 700px) {
  html.aj-modern .jump-next .jn-year { order: 0; flex: 0 0 auto; }
  html.aj-modern .jump-next .jn-prev { order: -1; }
}

/* ═══ Visor de imágenes (zoom) · 2026-10-03 ═════════════════════════════════════════════
   Fondo con desenfoque, imagen grande sin marco, flechas de galería, pie con nombre y contador,
   indicador de carga mientras llega la versión grande y cierre que vuelve a la miniatura. */
html.aj-modern .cover-lightbox {
  padding: 0;
  background: color-mix(in srgb, var(--night) calc(var(--lb-fade, 1) * 90%), transparent);
  backdrop-filter: blur(calc(var(--lb-fade, 1) * 10px)) saturate(1.1);
  -webkit-backdrop-filter: blur(calc(var(--lb-fade, 1) * 10px));
  animation: ajLbIn 0.3s ease both;
  overscroll-behavior: contain;
}
html.aj-modern .cover-lightbox.is-closing { animation: ajLbOut 0.3s ease both; }
@keyframes ajLbIn { from { opacity: 0; } }
@keyframes ajLbOut { to { opacity: 0; } }
html.aj-modern .cover-lightbox-img {
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: none;
  background: var(--night);
  touch-action: none;
}
html.aj-modern .cover-lightbox-close,
html.aj-modern .aj-lb-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: none;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.2s, scale 0.25s var(--spring);
}
html.aj-modern .cover-lightbox-close { top: max(14px, env(safe-area-inset-top)); right: 14px; }
html.aj-modern .cover-lightbox-close:hover,
html.aj-modern .aj-lb-nav:hover { background: var(--accent-color); filter: none; scale: 1.06; }
html.aj-modern .aj-lb-nav { top: 50%; translate: 0 -50%; width: 54px; height: 54px; }
html.aj-modern .aj-lb-nav[hidden] { display: none; }
html.aj-modern .aj-lb-prev { left: 22px; }
html.aj-modern .aj-lb-next { right: 22px; }
html.aj-modern .aj-lb-nav .aj-icon { width: 22px; height: 22px; }
html.aj-modern .aj-rot180 { rotate: 180deg; }
html.aj-modern .aj-lb-foot {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  pointer-events: auto;
}
html.aj-modern .aj-lb-caption { display: flex; gap: 10px; align-items: baseline; margin: 0; color: #fff; font-weight: 700; font-size: 0.95rem; text-align: center; }
html.aj-modern .aj-lb-caption:empty, html.aj-modern .aj-lb-label:empty { display: none; }
html.aj-modern .aj-lb-count { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
html.aj-modern .aj-lb-count:empty { display: none; }
html.aj-modern .aj-lb-foot .cover-lightbox-hint { position: static; transform: none; margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; white-space: normal; text-align: center; }
html.aj-modern .aj-lb-spin {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
  animation: ajSpin 0.8s linear infinite;
  pointer-events: none;
}
html.aj-modern .cover-lightbox.is-loading .aj-lb-spin { opacity: 1; transition-delay: 0.25s; }
@keyframes ajSpin { to { rotate: 360deg; } }
@media (max-width: 699px) {
  html.aj-modern .aj-lb-nav { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 50px)); translate: none; width: 44px; height: 44px; }
  html.aj-modern .aj-lb-prev { left: 14px; }
  html.aj-modern .aj-lb-next { right: 14px; }
  html.aj-modern .cover-lightbox-img { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .cover-lightbox, html.aj-modern .cover-lightbox.is-closing { animation: none; }
}

/* ═══ /jump más ligera (2026-10-03): menos piezas compitiendo ════════════════════════════
   Cabecera sin cifras; tarjetas del sumario solo con título, capítulo, autor y una marca de
   texto (sin etiquetas de género); páginas a color y otros números en una fila deslizable. */
html.aj-modern .aj-issue-abs { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
html.aj-modern .aj-issue-abs::before { content: '·'; margin: 0 8px; }
html.aj-modern .aj-issue-dates { display: block; }
html.aj-modern .aj-issue-actions { margin-top: 20px; }

html.aj-modern .gcard-genre { display: none; }
html.aj-modern .gcard { gap: 9px; }
html.aj-modern .gcard-info { gap: 2px; }
html.aj-modern .gcard-title { font-size: 1rem; line-height: 1.2; }
html.aj-modern .gcard-title a { border: 0; color: var(--text-color); transition: color 0.2s; }
html.aj-modern .gcard-title a:hover { color: var(--text-accent); }
html.aj-modern .gcard-chapter { margin: 0; font-size: 0.8rem; }
html.aj-modern .gcard-author { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.76rem; }
html.aj-modern .gcard-author a { border: 0; text-decoration: none; color: inherit; }
html.aj-modern .gcard-author a:hover { color: var(--text-accent); }
html.aj-modern .gcard-tags { gap: 4px 10px; margin-top: 3px; }
html.aj-modern .gcard-tags span,
html.aj-modern .gcard-tags .t-color,
html.aj-modern .gcard-tags .t-digital,
html.aj-modern .gcard-tags .t-final,
html.aj-modern .gcard-tags .t-oneshot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  color: var(--dark-grey);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
html.aj-modern .gcard-tags span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
html.aj-modern .gcard-tags .t-color::before { background: var(--accent-color); }
html.aj-modern .gcard-tags .t-final { color: var(--badge-new); }
html.aj-modern .gcard-tags .t-final::before { background: var(--badge-new); }
html.aj-modern .gcard-tags .t-oneshot::before { background: var(--info); }
html.aj-modern .gcard-sjbtn { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--text-accent); font-size: 0.74rem; font-weight: 700; }
html.aj-modern .gcard-sjbtn:hover { background: none; color: var(--text-color); }

/* Descansan: una línea */
html.aj-modern .jump-absent { align-items: center; margin: 22px 0 6px; }
html.aj-modern .jump-absent .ja-lbl { margin-right: 4px; color: var(--text-color); font-size: 0.9rem; }

/* Páginas a color y otros números: una fila que se desliza */
html.aj-modern .cp-grid,
html.aj-modern .jump-archive-grid {
  display: flex;
  gap: 12px;
  margin: 6px calc(var(--aj-strip-bleed, 0px) * -1) 8px;
  padding: 6px var(--aj-strip-bleed, 0px) 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-color) 45%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}
html.aj-modern .cp-grid .cp-cell,
html.aj-modern .cp-grid .cp-cell.wide { flex: 0 0 auto; height: 250px; width: auto; aspect-ratio: auto; scroll-snap-align: start; grid-column: auto; }
html.aj-modern .cp-grid .cp-cell > img,
html.aj-modern .cp-grid .cp-cell.wide > img { width: auto; height: 100%; object-fit: cover; }
html.aj-modern .jump-archive-grid .jump-arch-card { flex: 0 0 120px; min-width: 0; scroll-snap-align: start; }   /* min-width: un nombre largo («Demon Slayer: Kimetsu no Yaiba») ensanchaba la tarjeta */
@media (max-width: 560px) {
  html.aj-modern .jump-main { --aj-strip-bleed: 14px; }
  html.aj-modern .cp-grid .cp-cell,
  html.aj-modern .cp-grid .cp-cell.wide { height: 210px; }
  html.aj-modern .cp-grid:has(.wide) .cp-cell:not(.wide) { aspect-ratio: auto; }
  html.aj-modern .cp-grid .cp-cell.wide > img { height: 100%; object-fit: cover; }
}
/* En pantallas anchas, los 6 vecinos y la tarjeta de la cronología en una fila: rejilla, sin deslizar */
@media (min-width: 1000px) {
  html.aj-modern .jump-archive-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; overflow: visible; }
}

/* Anclas: que la barra fija no tape el título al que se salta («Ver el sumario»…) */
html.aj-modern [id] { scroll-margin-top: 92px; }
/* Cabecera del número más compacta en el móvil: el botón y el sumario asoman sin desplazarse */
@media (max-width: 899px) {
  html.aj-modern .aj-issue-hero { padding-top: 0; margin-bottom: 18px; }
  html.aj-modern .aj-issue-num { font-size: clamp(3.8rem, 19vw, 5.6rem); }
  html.aj-modern .aj-issue-visual { padding: 12px 0 8px; }
  html.aj-modern .aj-cover-card.aj-issue-cover { width: min(200px, 52vw); }
  html.aj-modern .aj-issue-lead { margin-top: 4px; }
  html.aj-modern .aj-issue-actions { margin-top: 12px; }
  html.aj-modern .aj-issue-nav { margin-top: 10px; }
}
/* Portadas del sumario con sinopsis: marca «i» (al tocar o pasar el ratón sale la ficha) */
html.aj-modern .gcard-cover:has(.gcard-syn)::after {
  content: 'i';
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  color: #fff;
  font: 800 0.8rem/1 Georgia, serif;
  font-style: italic;
  backdrop-filter: blur(3px);
  transition: opacity 0.2s;
  pointer-events: none;
}
html.aj-modern .gcard.show .gcard-cover::after { opacity: 0; }
@media (hover: hover) { html.aj-modern .gcard-cover:hover::after { opacity: 0; } }

/* Bloque «¿Qué Jump salió el día que naciste?» → portada (sustituye al buscador de fecha) */
html.aj-modern .aj-birth-promo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 26px 0 8px;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--brand-gradient);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  isolation: isolate;
  transition: translate 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
html.aj-modern .aj-birth-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Los rayos salen del centro de las portadas (relleno de 24 px + la mitad de su bloque de 200): antes, del 85 % del
     ancho, y según el ancho de la caja quedaban hasta 50 px a la izquierda de las portadas */
  /* --abp-shift: cuánto se separan las portadas del borde derecho; los rayos se mueven con ellas */
  background: repeating-conic-gradient(from 0deg at calc(100% - 124px - var(--abp-shift, 0px)) calc(50% - 8px), rgba(255,255,255,0.10) 0 6deg, transparent 6deg 14deg);   /* -8 px: el centro de la portada del medio, que va más alta */
}
html.aj-modern .aj-birth-promo:hover { translate: 0 -3px; box-shadow: var(--shadow-3, var(--shadow-2)); }
html.aj-modern .abp-copy { display: grid; justify-items: start; gap: 6px; }
html.aj-modern .abp-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.92; }
html.aj-modern .abp-kicker .aj-icon { width: 16px; height: 16px; }
html.aj-modern .abp-title { font-family: var(--font-heading-comic); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.05; letter-spacing: 0.02em; }
html.aj-modern .abp-text { max-width: 44ch; font-size: 0.92rem; line-height: 1.45; opacity: 0.95; }
html.aj-modern .abp-btn { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 11px 22px; background: #fff; color: var(--text-accent); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
html.aj-modern .abp-btn .aj-icon { width: 18px; height: 18px; transition: translate 0.3s var(--spring); }
html.aj-modern .aj-birth-promo:hover .abp-btn .aj-icon { translate: 4px 0; }
html.aj-modern .aj-birth-promo { --abp-shift: 56px; }
html.aj-modern .abp-covers { position: relative; width: 200px; height: 170px; margin-right: var(--abp-shift); }
html.aj-modern .abp-covers img { position: absolute; top: 8px; width: 104px; height: auto; aspect-ratio: 120 / 176; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.3); transition: rotate 0.4s var(--spring), translate 0.4s var(--spring); }
html.aj-modern .abp-covers img:nth-child(1) { left: 0; rotate: -10deg; }
html.aj-modern .abp-covers img:nth-child(2) { left: 48px; top: 0; rotate: 2deg; z-index: 1; }
html.aj-modern .abp-covers img:nth-child(3) { left: 96px; rotate: 12deg; }
html.aj-modern .aj-birth-promo:hover .abp-covers img:nth-child(1) { rotate: -16deg; translate: -6px 0; }
html.aj-modern .aj-birth-promo:hover .abp-covers img:nth-child(3) { rotate: 18deg; translate: 6px 0; }
@media (max-width: 600px) {
  html.aj-modern .aj-birth-promo { grid-template-columns: 1fr; padding: 20px 18px; }
  html.aj-modern .abp-covers { display: none; }
  html.aj-modern .abp-btn { width: 100%; justify-content: center; }
}

/* ═══ Ficha de serie al tocar una portada del sumario (2026-10-03) ═══════════════════════
   Hoja que sube desde abajo en el móvil y ventana centrada en escritorio. Sustituye al velo
   oscuro sobre la portada (y al aviso de Shueisha aparte, que ahora va dentro). */
html.aj-modern .gcard-syn,
html.aj-modern .gcard-sjbtn { display: none !important; }
html.aj-modern .gcard.show .gcard-cover::after { opacity: 1; }
@media (hover: hover) { html.aj-modern .gcard-cover:hover::after { opacity: 1; background: var(--accent-color); } }
html.aj-modern .gcard-cover { cursor: pointer; }

html.aj-modern .aj-series {
  width: min(560px, 100%);
  max-width: 100%;
  max-height: 100%;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-color);
  overflow: visible;
}
html.aj-modern .aj-series::backdrop { background: rgba(13, 10, 8, 0.55); backdrop-filter: blur(4px); animation: ajLbIn 0.25s ease both; }
html.aj-modern .aj-series.is-closing::backdrop { animation: ajLbOut 0.22s ease both; }
html.aj-modern .ajs-card {
  position: relative;
  display: grid;
  gap: 14px;
  max-height: min(86vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 20px max(18px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--panel-bg);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  animation: ajSheetUp 0.34s cubic-bezier(.2, .85, .25, 1) both;
  transition: transform 0.25s var(--ease);
}
html.aj-modern .aj-series.is-closing .ajs-card { animation: ajSheetDown 0.22s ease-in both; }
@keyframes ajSheetUp { from { transform: translateY(100%); } }
@keyframes ajSheetDown { to { transform: translateY(100%); } }
html.aj-modern .ajs-grab { position: absolute; top: 9px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--border-soft); }
html.aj-modern .ajs-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: var(--chip-bg); color: var(--text-color); font-size: 0.9rem; cursor: pointer;
  transition: background-color 0.2s;
}
html.aj-modern .ajs-close:hover { background: var(--highlight-soft); color: var(--text-accent); }
html.aj-modern .ajs-head { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; padding-right: 30px; }
html.aj-modern .ajs-cover { display: block; padding: 0; border: 0; border-radius: var(--radius-s); overflow: hidden; background: var(--chip-bg); box-shadow: var(--shadow-2); cursor: zoom-in; aspect-ratio: 2 / 3; }
html.aj-modern .ajs-cover[hidden] { display: none; }
html.aj-modern .ajs-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .ajs-id { display: grid; gap: 4px; min-width: 0; }
html.aj-modern .ajs-kicker { margin: 0; color: var(--text-accent); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .ajs-id h3 { margin: 0; font-family: var(--font-heading-comic); font-weight: 400; font-size: 1.75rem; line-height: 1.02; letter-spacing: 0.02em; color: var(--ink); }
html.aj-modern .ajs-sub { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
html.aj-modern .ajs-sub:empty { display: none; }
html.aj-modern .ajs-meta { margin: 4px 0 0; color: var(--dark-grey); font-size: 0.9rem; line-height: 1.45; }
html.aj-modern .ajs-meta b { color: var(--text-accent); }
html.aj-modern .ajs-meta a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-color) 60%, transparent); text-underline-offset: 3px; }
html.aj-modern .ajs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
html.aj-modern .ajs-tags[hidden] { display: none; }
html.aj-modern .ajs-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-size: 0.78rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
html.aj-modern .ajs-tags .ajs-mark { background: var(--highlight-soft); color: var(--text-accent); }
html.aj-modern .ajs-tags .ajs-mark::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html.aj-modern .ajs-tags .t-final { color: var(--badge-new); }
html.aj-modern .ajs-syn { margin: 0; color: var(--text-color); font-size: 0.95rem; line-height: 1.6; }
html.aj-modern .ajs-syn[hidden], html.aj-modern .ajs-sj[hidden], html.aj-modern .ajs-go[hidden] { display: none; }
html.aj-modern .ajs-sj { padding: 12px 14px; border-radius: var(--radius-m); background: var(--highlight-soft); }
html.aj-modern .ajs-sj p { margin: 0; }
html.aj-modern .ajs-sj-kicker { color: var(--text-accent); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .ajs-sj-text { margin-top: 4px !important; font-size: 0.92rem; line-height: 1.55; }
html.aj-modern .ajs-sj-src { margin-top: 6px !important; color: var(--text-muted); font-size: 0.72rem; }
html.aj-modern .ajs-foot { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
html.aj-modern .ajs-go { display: inline-flex; flex: 1; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 12px 18px; }
html.aj-modern .ajs-go .aj-icon { width: 18px; height: 18px; }
html.aj-modern .ajs-pos { min-width: 52px; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
html.aj-modern .ajs-step { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--panel-bg); color: var(--text-color); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
html.aj-modern .ajs-step:hover { background: var(--highlight-soft); color: var(--text-accent); }
html.aj-modern .ajs-step .aj-icon { width: 18px; height: 18px; }
html.aj-modern .ajs-prev { order: -1; }
@media (min-width: 640px) {
  html.aj-modern .aj-series { margin: auto; }
  html.aj-modern .ajs-card { padding: 28px 28px 22px; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); animation-name: ajSheetPop; }
  html.aj-modern .aj-series.is-closing .ajs-card { animation-name: ajSheetOut; }
  html.aj-modern .ajs-grab { display: none; }
  html.aj-modern .ajs-head { grid-template-columns: 140px 1fr; gap: 20px; }
  html.aj-modern .ajs-id h3 { font-size: 2.1rem; }
}
@keyframes ajSheetPop { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes ajSheetOut { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .ajs-card, html.aj-modern .aj-series.is-closing .ajs-card, html.aj-modern .aj-series::backdrop { animation: none; }
}
html.aj-modern .ajs-go { white-space: nowrap; }
html.aj-modern .ajs-go .aj-icon, html.aj-modern .ajs-step .aj-icon { flex-shrink: 0; }
@media (max-width: 439px) { html.aj-modern .ajs-pos { display: none; } }

/* Ficha: puesto frente al número anterior, trayectoria en la revista y enlaces (VIZ, Amazon) */
html.aj-modern .ajs-rank { justify-self: start; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-size: 0.78rem; font-weight: 700; }
html.aj-modern .ajs-rank[hidden], html.aj-modern .ajs-run[hidden], html.aj-modern .ajs-links[hidden], html.aj-modern .ajs-links a[hidden] { display: none; }
html.aj-modern .ajs-rank[data-dir="up"] { background: var(--success-bg); color: var(--success); }
html.aj-modern .ajs-rank[data-dir="down"] { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--red); }
html.aj-modern .ajs-rank[data-dir="new"] { background: var(--highlight-soft); color: var(--text-accent); }
html.aj-modern .ajs-run { margin: -4px 0 0; color: var(--text-muted); font-size: 0.84rem; font-weight: 600; }
html.aj-modern .ajs-links { display: grid; gap: 8px; }
html.aj-modern .ajs-links a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--border-soft); border-radius: 14px; color: var(--text-color); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
html.aj-modern .ajs-links a:hover { background: var(--highlight-soft); border-color: color-mix(in srgb, var(--accent-color) 45%, transparent); }
html.aj-modern .ajs-links .aj-icon { width: 18px; height: 18px; color: var(--text-accent); }
html.aj-modern .ajs-buy::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--text-accent); }
@media (min-width: 640px) { html.aj-modern .ajs-links { grid-template-columns: 1fr 1fr; } html.aj-modern .ajs-links:has(a[hidden]) { grid-template-columns: 1fr; } }
/* Tiras deslizables: solo en horizontal (en el móvil «Otros números» se movía 4 px arriba y abajo) */
html.aj-modern .cp-grid, html.aj-modern .jump-archive-grid { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
html.aj-modern .ajs-foot:has(.ajs-go[hidden]) { justify-content: center; }

/* Cabecera del número en escritorio: texto y portada como una sola pieza centrada (antes cada uno
   a un extremo, ~300 px vacíos entre medias y 531 px de alto para 340 de contenido) */
@media (min-width: 900px) {
  html.aj-modern .aj-issue-hero {
    grid-template-columns: minmax(0, 540px) auto;
    justify-content: center;
    column-gap: clamp(40px, 6vw, 90px);
    padding: 10px 8px 0;
    margin-bottom: 26px;
  }
  html.aj-modern .aj-issue-visual { width: auto; padding: 4px 0; }
  html.aj-modern .aj-cover-card.aj-issue-cover { width: clamp(230px, 21vw, 280px); }
  html.aj-modern .aj-issue-visual .aj-burst { inset: -18% -38%; }
  html.aj-modern .aj-issue-num { font-size: clamp(6rem, 10vw, 9rem); }
}
html.aj-modern .aj-issue-abs { display: block; margin-top: 2px; font-size: 0.88rem; }
html.aj-modern .aj-issue-abs::before { content: none; }
@media (min-width: 900px) { html.aj-modern .aj-issue-hero { grid-template-columns: minmax(0, 500px) auto; } }

/* ═══ Cabecera del número (2026-10-03) ════════════════════════════════════════════════════
   Mismo lenguaje que la cabecera de la portada (fondo claro con toques naranjas, titular en
   tinta, número destacado en naranja con subrayado amarillo de rotulador) y, encima, un velo
   de color sacado de la propia portada desenfocada: cada semana cambia sin tocar nada. Trama de
   puntos suave, número gigante en hueco, portada que se inclina con el ratón y entrada animada. */
html.aj-modern .aj-issue-hero {
  overflow: hidden;
  margin: 0 0 30px;
  padding: 30px 18px 28px;
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--header-bg) 10%, transparent), transparent 60%),
    var(--panel-bg);
  box-shadow: var(--shadow-2);
}
html.aj-modern .aj-issue-bg { position: absolute; inset: -12%; z-index: -2; opacity: 0.2; pointer-events: none; }
html.aj-modern .aj-issue-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(42px) saturate(1.7); transform: scale(1.15); }
html.aj-modern .aj-issue-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, black 75%);
  mask-image: linear-gradient(90deg, transparent 20%, black 75%);
  pointer-events: none;
}
html.aj-modern .aj-issue-ghost {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -16%;
  translate: -50% 0;
  font-family: var(--font-heading-comic);
  font-size: clamp(14rem, 42vw, 26rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--header-bg) 16%, transparent);
  pointer-events: none;
  user-select: none;
}
/* Punto que late en «La Jump de esta semana» */
html.aj-modern .aj-issue-hero .aj-kicker span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--header-bg); animation: ajLive 2s ease-out infinite; vertical-align: 1px; }
@keyframes ajLive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--header-bg) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
/* «#44» como el «JUMP» de la portada: naranja con subrayado amarillo de rotulador */
html.aj-modern .aj-issue-hero .aj-issue-num {
  justify-self: start;
  width: max-content;
  margin-top: 2px;
  padding: 0 0.08em;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--primary-highlight) 75%, transparent) 60% 90%, transparent 90%);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--header-bg);
  animation: ajNumIn 0.7s var(--spring) both;
}
@keyframes ajNumIn { from { transform: scale(0.6) rotate(-6deg); } }
html.aj-modern .aj-cover-card.aj-issue-cover { animation: ajCoverIn 0.9s var(--ease) both; }
@keyframes ajCoverIn { from { transform: perspective(900px) translateY(40px) rotateX(14deg) rotateY(-10deg); } }
html.aj-modern .aj-issue-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.3), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
html.aj-modern .aj-issue-hero:hover .aj-issue-cover::after { opacity: 1; }
@media (max-width: 899px) { html.aj-modern .aj-issue-hero .aj-issue-num { justify-self: center; } }
@media (min-width: 900px) {
  html.aj-modern .aj-issue-hero { padding: 48px 44px 44px; }
  html.aj-modern .aj-issue-ghost { left: 56%; bottom: -20%; font-size: 26rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .aj-issue-hero .aj-issue-num, html.aj-modern .aj-cover-card.aj-issue-cover, html.aj-modern .aj-issue-hero .aj-kicker span::before { animation: none; }
}

/* Páginas a color en escritorio: galería justificada (cada fila llena el ancho, se ven todas,
   dobles y sencillas a la misma altura). En el móvil siguen en fila deslizable. */
html.aj-modern .cp-label {
  inset: auto 0 0;
  padding: 26px 10px 8px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--night) 85%, transparent));
  font-size: 0.74rem;
  line-height: 1.3;
  text-align: left;
}
html.aj-modern .cp-cell { background: var(--cover-placeholder); }
@media (min-width: 700px) {
  html.aj-modern .cp-grid { flex-wrap: wrap; gap: 12px; margin: 6px 0 8px; padding: 6px 0 0; overflow: visible; }
  html.aj-modern .cp-grid::after { content: ''; flex: 999 1 0; }
  html.aj-modern .cp-grid .cp-cell,
  html.aj-modern .cp-grid .cp-cell.wide { height: auto; width: auto; flex: var(--ar, 0.684) 1 calc(var(--ar, 0.684) * 240px); aspect-ratio: var(--ar, 0.684); max-height: 420px; }
  html.aj-modern .cp-grid .cp-cell > img,
  html.aj-modern .cp-grid .cp-cell.wide > img { width: 100%; height: 100%; object-fit: cover; }
  html.aj-modern .cp-grid .cp-cell:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
}

/* Fuentes: nota pequeña alineada a la izquierda, sin enlaces en negrita */
html.aj-modern .jump-sources { max-width: none; margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: 0.76rem; line-height: 1.7; text-align: left; }
html.aj-modern .jump-sources a { border: 0; color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-soft); text-underline-offset: 2px; }
html.aj-modern .jump-sources a:hover { color: var(--text-accent); text-decoration-color: currentColor; }

/* Galería: filas de ~300 px y la última sin estirar del todo (el hueco final se reparte) */
@media (min-width: 700px) {
  html.aj-modern .cp-grid::after { flex: 1.2 1 0; }
  html.aj-modern .cp-grid .cp-cell, html.aj-modern .cp-grid .cp-cell.wide { flex-basis: calc(var(--ar, 0.684) * 300px); max-height: 460px; }
}
html.aj-modern .jump-section .jump-sources, html.aj-modern .jump-main .jump-sources { max-width: none; }
@media (max-width: 439px) { html.aj-modern .aj-issue-nav { gap: 6px; } html.aj-modern .aj-issue-nav a { padding: 6px 11px; font-size: 0.8rem; } }

/* «Otros números»: tarjeta final «Ver todos» en la fila deslizable del móvil (en escritorio caben
   los 12 y el enlace al año ya está en la cabecera) */

/* ═══ Índice /manga (2026-10-03) ═════════════════════════════════════════════════════════
   Cabecera como la de la portada, buscador y filtros fijos bajo la barra, tarjetas enteras
   como enlace (sin botón repetido) y más columnas: 7 en escritorio, 3 en el móvil. */
html.aj-modern .aj-hub-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 8px;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 28px 18px 24px;
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--header-bg) 10%, transparent), transparent 60%),
    var(--panel-bg);
  box-shadow: var(--shadow-2);
  text-align: center;
}
html.aj-modern .aj-hub-hero .aj-kicker { justify-content: center; }
html.aj-modern .debuts-section .aj-hub-hero h1 {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--font-heading-comic);
  font-weight: 400;
  font-size: clamp(2.2rem, 8.5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
html.aj-modern .aj-hub-hero h1 em {
  font-style: normal;
  color: var(--header-bg);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--primary-highlight) 75%, transparent) 62% 92%, transparent 92%);
  padding: 0 0.06em;
}
html.aj-modern .aj-hub-lead { max-width: 52ch; margin: 6px auto 0; color: var(--dark-grey); line-height: 1.5; }
html.aj-modern .aj-hub-fan { position: relative; display: none; }
html.aj-modern .aj-hub-fan img {
  position: absolute;
  width: 150px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 26px 46px -22px rgba(70, 25, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06);
  animation: ajFanIn 0.8s var(--ease) both;
}
html.aj-modern .aj-hub-fan img:nth-of-type(1) { left: 6%; top: 34px; rotate: -11deg; animation-delay: 0.08s; }
html.aj-modern .aj-hub-fan img:nth-of-type(2) { left: 50%; top: 6px; margin-left: -85px; width: 170px; rotate: 1deg; z-index: 1; }
html.aj-modern .aj-hub-fan img:nth-of-type(3) { right: 6%; top: 34px; rotate: 11deg; animation-delay: 0.16s; }
@keyframes ajFanIn { from { transform: translateY(30px) scale(0.92); } }
html.aj-modern .aj-hub-hero:hover .aj-hub-fan img:nth-of-type(1) { rotate: -15deg; translate: -8px 0; }
html.aj-modern .aj-hub-hero:hover .aj-hub-fan img:nth-of-type(3) { rotate: 15deg; translate: 8px 0; }
html.aj-modern .aj-hub-fan img { transition: rotate 0.45s var(--spring), translate 0.45s var(--spring); }
@media (min-width: 900px) {
  html.aj-modern .aj-hub-hero { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 24px; padding: 46px 48px; text-align: left; }
  html.aj-modern .aj-hub-hero .aj-kicker { justify-content: flex-start; }
  html.aj-modern .aj-hub-lead { margin-left: 0; }
  html.aj-modern .aj-hub-fan { display: block; height: 300px; }
}

/* Buscador y filtros: se quedan fijos bajo la barra superior al bajar */
html.aj-modern .aj-hub-tools {
  position: sticky;
  top: 78px;
  z-index: 20;
  display: grid;
  gap: 8px;
  margin: 0 -6px 8px;
  padding: 10px 6px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
html.aj-modern .aj-hub-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
html.aj-modern .aj-hub-search:focus-within { border-color: var(--accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 22%, transparent); }
html.aj-modern .aj-hub-search .aj-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-muted); }
html.aj-modern .aj-hub-search input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: none; color: var(--text-color); font: inherit; font-size: 1rem; }
html.aj-modern .aj-hub-chips { display: flex; gap: 6px; margin: 0 -6px; padding: 0 6px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
html.aj-modern .aj-hub-chips::-webkit-scrollbar { display: none; }
html.aj-modern .aj-hub-chips button {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--dark-grey);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
html.aj-modern .aj-hub-chips button:hover { border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); }
html.aj-modern .aj-hub-chips button.is-on { border-color: transparent; background: var(--ink); color: var(--panel-bg); }
html.aj-modern .aj-hub-chips button small { margin-left: 3px; opacity: 0.6; font-size: 0.74rem; }
html.aj-modern .aj-hub-genres button { background: var(--page-bg); }
html.aj-modern .aj-hub-genres button.is-on { background: var(--header-bg); }
html.aj-modern .aj-hub-count { margin: 0; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
html.aj-modern .aj-hub-count:empty { display: none; }
@media (min-width: 900px) {
  html.aj-modern .aj-hub-tools { grid-template-columns: minmax(260px, 340px) 1fr; align-items: center; column-gap: 14px; }
  html.aj-modern .aj-hub-genres, html.aj-modern .aj-hub-count { grid-column: 1 / -1; }
  html.aj-modern .aj-hub-chips { flex-wrap: wrap; overflow: visible; }
}

/* Secciones y tarjetas */
html.aj-modern .aj-hub-group { scroll-margin-top: 200px; }
html.aj-modern .aj-hub-group[hidden], html.aj-modern .aj-hub-card[hidden] { display: none; }
html.aj-modern .aj-hub-n { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; vertical-align: 3px; }
html.aj-modern .aj-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 16px; margin: 6px 0 14px; }
html.aj-modern .aj-hub-card { display: grid; gap: 2px; align-content: start; min-width: 0; color: var(--text-color); text-decoration: none; }
html.aj-modern .aj-hub-cover {
  position: relative;
  display: block;
  margin-bottom: 7px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, var(--cover-placeholder), var(--highlight-soft));
  box-shadow: var(--shadow-1);
  transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html.aj-modern .aj-hub-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
html.aj-modern .aj-hub-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; color: var(--text-muted); font-family: var(--font-heading-comic); font-size: 1.1rem; line-height: 1.05; text-align: center; }
html.aj-modern .aj-hub-card:hover .aj-hub-cover { translate: 0 -5px; box-shadow: var(--shadow-2); }
html.aj-modern .aj-hub-card:hover .aj-hub-cover img { scale: 1.05; }
html.aj-modern .aj-hub-card:focus-visible { outline: none; }
html.aj-modern .aj-hub-card:focus-visible .aj-hub-cover { box-shadow: 0 0 0 3px var(--accent-color), var(--shadow-2); }
html.aj-modern .aj-hub-live {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 74%, transparent);
  color: var(--panel-bg);
  font-size: 0.66rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
html.aj-modern .aj-hub-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); }
html.aj-modern .aj-hub-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; transition: color 0.2s; }
html.aj-modern .aj-hub-card:hover .aj-hub-title { color: var(--text-accent); }
html.aj-modern .aj-hub-author { overflow: hidden; color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; text-overflow: ellipsis; }
html.aj-modern .aj-hub-meta { color: var(--dark-grey); font-size: 0.74rem; font-weight: 600; }
@media (max-width: 560px) {
  html.aj-modern .aj-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  html.aj-modern .aj-hub-title { font-size: 0.82rem; }
  html.aj-modern .aj-hub-author { font-size: 0.7rem; }
  html.aj-modern .aj-hub-meta { font-size: 0.68rem; }
  html.aj-modern .aj-hub-live { left: 5px; bottom: 5px; padding: 2px 6px; font-size: 0.58rem; }
  html.aj-modern .aj-hub-tools { top: 70px; }
}
html.aj-modern .aj-hub-empty { padding: 30px 16px; border-radius: var(--radius-m); background: var(--highlight-soft); text-align: center; }
html.aj-modern .aj-hub-empty[hidden] { display: none; }
html.aj-modern .aj-hub-empty p { margin: 0 0 10px; }
html.aj-modern .aj-hub-empty a { color: var(--text-accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { html.aj-modern .aj-hub-fan img { animation: none; } }

/* Índice /manga · ajustes: títulos de grupo como los demás (tinta + marca), barra de filtros
   normal (fija tapaba ~200 px al bajar), épocas junto al buscador y géneros en una fila */
html.aj-modern .aj-hub-group > h2 { position: relative; background: none; color: var(--ink); text-shadow: none; font-size: 1.45rem; }
html.aj-modern .aj-hub-group > h2::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 1.05em; translate: 0 -50%; border-radius: 3px; background: var(--brand-gradient); }
@media (max-width: 600px) { html.aj-modern .aj-hub-group > h2 { font-size: 1.3rem; } }
html.aj-modern .aj-hub-tools { position: static; margin: 0 0 6px; padding: 4px 0 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.aj-modern .aj-hub-chips { flex-wrap: nowrap; overflow-x: auto; }
@media (min-width: 900px) {
  html.aj-modern .aj-hub-tools { grid-template-columns: 320px 1fr; }
  html.aj-modern .aj-hub-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 2px 0; -webkit-mask-image: linear-gradient(90deg, black 92%, transparent); mask-image: linear-gradient(90deg, black 92%, transparent); }
  html.aj-modern .aj-hub-genres { flex-wrap: nowrap; }   /* en una fila: con «wrap» el cambio de fuente pasaba un botón a otra línea (CLS 0,17) */
}
@media (max-width: 560px) { html.aj-modern .aj-hub-vols { display: none; } }

/* Índice /manga · 2ª versión: filtro limpio (buscador + desplegable de género en una fila,
   época como control segmentado como las pestañas de /results) y portadas que mandan: 6
   columnas, sombra marcada y la serie con más tomos de cada época en tarjeta doble */
html.aj-modern .aj-hub-tools { gap: 10px; margin: 0 0 10px; }
html.aj-modern .aj-hub-row { display: flex; gap: 8px; }
html.aj-modern .aj-hub-row .aj-hub-search { flex: 1 1 auto; min-width: 0; }
html.aj-modern .aj-hub-select { position: relative; flex: 0 0 auto; display: flex; }
html.aj-modern .aj-hub-select :is(select, .aj-dd-btn) {
  height: 49px;
  max-width: 46vw;
  padding: 0 40px 0 16px;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-color);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
html.aj-modern .aj-hub-select::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--dark-grey);
  pointer-events: none;
}
html.aj-modern .aj-hub-select :is(select, .aj-dd-btn):hover { border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); }
html.aj-modern .aj-hub-select :is(select, .aj-dd-btn):focus-visible { outline: 0; border-color: var(--accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 22%, transparent); }
html.aj-modern .aj-hub-select.is-on :is(select, .aj-dd-btn) { border-color: transparent; background: var(--header-bg); color: var(--panel-bg); }
html.aj-modern .aj-hub-select.is-on::after { color: var(--panel-bg); }
/* Desplegable propio (aj-select.js): botón como el <select> y lista como las sugerencias */
html.aj-modern .aj-hub-select.has-dd > select { display: none; }
html.aj-modern .aj-dd-btn { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.aj-modern .aj-dd-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; max-height: min(60vh, 340px); margin: 0; padding: 6px; overflow-y: auto; list-style: none; border-radius: 16px; background: var(--panel-bg); box-shadow: var(--shadow-2), 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-dd-list li { padding: 9px 14px; border-radius: 10px; color: var(--ink); font-size: 0.92rem; white-space: nowrap; cursor: pointer; }
html.aj-modern .aj-dd-list li.is-sel { font-weight: 700; }
html.aj-modern .aj-dd-list li.is-active, html.aj-modern .aj-dd-list li:hover { background: color-mix(in srgb, var(--sec, var(--accent-color)) 12%, var(--panel-bg)); }
html.aj-modern .aj-hub-seg {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--chip-bg);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
html.aj-modern .aj-hub-seg::-webkit-scrollbar { display: none; }
html.aj-modern .aj-hub-seg button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dark-grey);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
html.aj-modern .aj-hub-seg button:hover:not(.is-on) { background: color-mix(in srgb, var(--panel-bg) 60%, transparent); }
html.aj-modern .aj-hub-seg button.is-on { background: var(--panel-bg); color: var(--text-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
@media (min-width: 900px) {
  html.aj-modern .aj-hub-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  html.aj-modern .aj-hub-row { flex: 1 1 420px; max-width: 560px; }
  html.aj-modern .aj-hub-select :is(select, .aj-dd-btn) { max-width: 240px; }
  html.aj-modern .aj-hub-count { flex-basis: 100%; }
}

/* Portadas que mandan */
html.aj-modern .aj-hub-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-flow: dense; gap: 26px 20px; }
@media (min-width: 1000px) { html.aj-modern .aj-hub-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html.aj-modern .aj-hub-cover { border-radius: 14px; box-shadow: 0 14px 28px -14px rgba(60, 25, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05); }
html.aj-modern .aj-hub-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); translate: -120% 0; transition: translate 0.7s var(--ease); pointer-events: none; }
html.aj-modern .aj-hub-card:hover .aj-hub-cover { translate: 0 -6px; rotate: -1deg; box-shadow: 0 26px 40px -18px rgba(60, 25, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.05); }
html.aj-modern .aj-hub-card:hover .aj-hub-cover::after { translate: 120% 0; }
html.aj-modern .aj-hub-cover { transition: translate 0.35s var(--ease), rotate 0.35s var(--ease), box-shadow 0.35s var(--ease); }
html.aj-modern .aj-hub-title { font-size: 1rem; }
/* Destacada: dos columnas y dos filas, título en Bangers */
html.aj-modern .aj-hub-card.is-feature { grid-column: span 2; grid-row: span 2; }
html.aj-modern .aj-hub-card.is-feature .aj-hub-cover { margin-bottom: 10px; }
html.aj-modern .aj-hub-card.is-feature .aj-hub-title { font-family: var(--font-heading-comic); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: 0.02em; color: var(--ink); }
html.aj-modern .aj-hub-card.is-feature .aj-hub-author { font-size: 0.86rem; }
html.aj-modern .aj-hub-card.is-feature .aj-hub-meta { font-size: 0.82rem; }
html.aj-modern .aj-hub-card.is-feature .aj-hub-vols { display: inline; }
@media (max-width: 560px) {
  html.aj-modern .aj-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  html.aj-modern .aj-hub-title { font-size: 0.84rem; }
  html.aj-modern .aj-hub-card.is-feature .aj-hub-title { font-size: 1.35rem; }
  html.aj-modern .aj-hub-select :is(select, .aj-dd-btn) { height: 47px; padding-left: 14px; font-size: 0.86rem; }
  html.aj-modern .aj-hub-seg { width: auto; }
}
html.aj-modern .aj-hub-row .aj-hub-search { flex: 1 1 0; }
html.aj-modern .aj-hub-search input { width: 100%; }
@media (max-width: 560px) { html.aj-modern .aj-hub-select :is(select, .aj-dd-btn) { width: 38vw; max-width: 160px; } }

/* Índice /manga · 3ª versión: cada tarjeta teñida con el color de su portada (--c, de
   data/manga_colors.json), capítulo de esta semana sobre la portada, destacada con extracto y
   cada época con su año en hueco y una línea con sus series más conocidas */
html.aj-modern .aj-hub-grid { gap: 16px; }
html.aj-modern .aj-hub-card {
  --tint: var(--c, var(--accent-color));
  padding: 10px 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tint) 15%, var(--panel-bg));
  transition: background-color 0.35s var(--ease), translate 0.35s var(--ease);
}
html.aj-modern .aj-hub-card:hover { background: color-mix(in srgb, var(--tint) 28%, var(--panel-bg)); }
html.aj-modern .aj-hub-cover { border-radius: 10px; box-shadow: 0 16px 26px -14px color-mix(in srgb, var(--tint) 70%, var(--ink)), 0 0 0 1px rgba(0, 0, 0, 0.05); }
html.aj-modern .aj-hub-card:hover .aj-hub-cover { box-shadow: 0 26px 36px -16px color-mix(in srgb, var(--tint) 80%, var(--ink)), 0 0 0 1px rgba(0, 0, 0, 0.05); }
html.aj-modern .aj-hub-title { color: var(--ink); }
html.aj-modern .aj-hub-author { color: color-mix(in srgb, var(--text-muted) 85%, var(--ink)); }
html.aj-modern .aj-hub-now {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--panel-bg);
  font-size: 0.68rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
html.aj-modern .aj-hub-card.is-feature { background: color-mix(in srgb, var(--tint) 24%, var(--panel-bg)); padding: 14px 14px 16px; }
html.aj-modern .aj-hub-exc { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--dark-grey); font-size: 0.86rem; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* Época: año en hueco detrás del título y lema */
html.aj-modern .aj-hub-group > h2 { isolation: isolate; }
html.aj-modern .aj-hub-group > h2::after {
  content: attr(data-ghost);
  position: absolute;
  z-index: -1;
  left: 34px;
  top: 50%;
  translate: 0 -46%;
  font-family: var(--font-heading-comic);
  font-size: 4.4rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--header-bg) 20%, transparent);
  pointer-events: none;
}
html.aj-modern .aj-hub-era { margin: -6px 0 14px 22px; color: var(--text-muted); font-size: 0.9rem; }
html.aj-modern .aj-hub-era b { color: var(--text-accent); font-weight: 700; }
@media (max-width: 560px) {
  html.aj-modern .aj-hub-grid { gap: 8px; }
  html.aj-modern .aj-hub-card { padding: 6px 6px 9px; border-radius: 14px; }
  html.aj-modern .aj-hub-card.is-feature { padding: 9px 9px 11px; }
  html.aj-modern .aj-hub-cover { border-radius: 8px; }
  html.aj-modern .aj-hub-now { left: 4px; bottom: 4px; padding: 2px 6px; font-size: 0.58rem; }
  html.aj-modern .aj-hub-exc { font-size: 0.76rem; -webkit-line-clamp: 4; }
  html.aj-modern .aj-hub-group > h2::after { font-size: 3.4rem; }
  html.aj-modern .aj-hub-era { margin-left: 18px; font-size: 0.82rem; }
}
/* el año en hueco va a la derecha de la línea del título: detrás del texto lo ensuciaba */
html.aj-modern .aj-hub-group > h2::after { left: auto; right: 4px; font-size: 5.2rem; -webkit-text-stroke-color: color-mix(in srgb, var(--header-bg) 24%, transparent); }
@media (max-width: 560px) { html.aj-modern .aj-hub-group > h2::after { font-size: 3.6rem; right: 14px; } }
@media (min-width: 561px) { html.aj-modern .aj-hub-group > h2::after { right: 18px; } }
/* Móvil: buscador a todo el ancho y géneros debajo (juntos, el texto del buscador se cortaba) */
@media (max-width: 560px) {
  html.aj-modern .aj-hub-row { flex-wrap: wrap; }
  html.aj-modern .aj-hub-row .aj-hub-search { flex: 1 1 100%; }
  html.aj-modern .aj-hub-select { flex: 1 1 100%; }
  html.aj-modern .aj-hub-select :is(select, .aj-dd-btn) { width: 100%; max-width: none; }
}
/* Idioma: en móvil y tableta va dentro del menú (la cabecera queda en logo + menú) */
@media (max-width: 1023px) { html.aj-modern .header-panel > .lang-switcher-btn { display: none; } }
html.aj-modern .aj-menu .aj-menu-lang { margin-top: 6px; border-top: 1px solid var(--border-soft); border-radius: 0 0 12px 12px; padding-top: 14px; color: var(--dark-grey); }
html.aj-modern .aj-menu .aj-menu-lang i { width: 20px; text-align: center; color: var(--text-muted); }

/* ═══ Cabecera común de página (.aj-page-hero) · inicio, /jump y /manga (2026-10-04) ══════
   Mismo sitio (fuera del panel, justo bajo la barra), mismo ancho, alto, márgenes, esquinas,
   fondo (degradados naranjas + trama de puntos a la derecha), zona visual, titular y entrada.
   Antes: 620 / 510 / 392 px de alto, 1.180 / 1.130 / 1.130 de ancho y tres márgenes distintos. */
html.aj-modern .aj-page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 14px 0 0;
  padding: 26px 18px 28px;
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--header-bg) 10%, transparent), transparent 60%),
    var(--panel-bg);
  box-shadow: var(--shadow-2);
}
html.aj-modern .aj-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, black 80%);
  mask-image: linear-gradient(90deg, transparent 25%, black 80%);
  pointer-events: none;
}
html.aj-modern .aj-page-hero + .panel, html.aj-modern .aj-page-hero + main.panel { margin-top: 18px; }
/* Titular y entrada iguales (en /jump el titular es el número: tiene su propio tamaño) */
html.aj-modern .aj-page-hero h1 {
  margin: 0 0 6px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--font-heading-comic);
  font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
html.aj-modern .aj-page-hero.aj-issue-hero h1 { display: grid; font-size: inherit; line-height: 0.9; }
html.aj-modern .aj-page-hero .aj-lead,
html.aj-modern .aj-page-hero .aj-hub-lead,
html.aj-modern .aj-page-hero .aj-issue-lead { max-width: 46ch; color: var(--dark-grey); font-size: 1.06rem; line-height: 1.55; }
/* Zona visual: mismo tamaño en las tres */
html.aj-modern .aj-page-hero .aj-hub-fan { display: block; height: 290px; margin-top: 14px; }
html.aj-modern .aj-page-hero .aj-hub-fan img { width: 118px; top: 34px; }
html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(1) { left: 50%; margin-left: -165px; }
html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(2) { width: 140px; top: 8px; margin-left: -70px; }
html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(3) { right: auto; left: 50%; margin-left: 47px; }
@media (min-width: 900px) {
  html.aj-modern .aj-page-hero {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    justify-content: stretch;
    align-items: center;
    gap: 24px;
    min-height: 540px;
    padding: 54px 56px;
    text-align: left;
  }
  html.aj-modern .aj-page-hero .aj-hero-visual,
  html.aj-modern .aj-page-hero .aj-issue-visual,
  html.aj-modern .aj-page-hero .aj-hub-fan { min-height: 430px; height: 430px; margin: 0; padding: 0; }
  html.aj-modern .aj-page-hero .aj-cover-card.aj-issue-cover { width: 290px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img { width: 170px; top: 70px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(1) { margin-left: -230px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(2) { width: 210px; top: 30px; margin-left: -105px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(3) { margin-left: 60px; }
}
/* Misma posición de barra y cabecera en todas las páginas: las interiores tenían 12 px de relleno
   arriba y 16 px de hueco entre bloques (la barra quedaba 12 px más abajo y la cabecera 28) */
html.aj-modern .manga-page:not(.aj-home) { padding-top: 0; }
html.aj-modern .manga-page:not(.aj-home) > .aj-page-hero { margin-top: -2px; }
html.aj-modern .manga-page:not(.aj-home) > .aj-page-hero + .panel { margin-top: 2px; }
html.aj-modern .manga-page > .header-panel { margin-bottom: 0; }   /* en el móvil sumaba 5 px solo en las páginas interiores */
@media (min-width: 900px) { html.aj-modern .aj-page-hero { min-height: 584px; } }   /* las tres igual de altas (inicio pedía 581 por el selector) */
@media (max-width: 899px) {
  html.aj-modern .aj-page-hero .aj-hub-fan { height: 360px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img { width: 142px; top: 42px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(1) { margin-left: -178px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(2) { width: 172px; top: 10px; margin-left: -86px; }
  html.aj-modern .aj-page-hero .aj-hub-fan img:nth-of-type(3) { margin-left: 36px; }
}

/* ═══ Un color por sección (2026-10-04) ═══════════════════════════════════════════════════
   Misma cabecera en todas (.aj-page-hero) pero cada sección con su color: tiñe degradados,
   trama, rayos, etiquetas, la palabra destacada y las marcas de los títulos de sección. El
   subrayado amarillo de rotulador se queda igual en todas (es la seña de la marca).
   Inicio = naranja de la marca · La Jump de esta semana = rojo · Mangas = azul. */
html.aj-modern {
  --sec-home: var(--header-bg);
  --sec-week: #d7263d;           /* rojo Jump (4,9:1 sobre blanco) */
  --sec-manga: #2563c9;          /* azul (5,6:1 sobre blanco) */
  --sec-mangaka: #7c3aed;        /* (para cuando se rediseñen) */
  --sec-timeline: #15803d;
  --sec-ranking: #b45309;
  --sec-debuts: #be185d;         /* fucsia (6,4:1 sobre blanco) */
  --sec-history: #0e7490;        /* turquesa (5,4:1 sobre blanco) */
  --sec: var(--sec-home);
}
html.aj-modern .index-page { --sec: var(--sec-home); }
html.aj-modern .jump-page { --sec: var(--sec-week); }
html.aj-modern .aj-sec-manga { --sec: var(--sec-manga); }

html.aj-modern .aj-page-hero {
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--sec) 15%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--sec) 9%, transparent), transparent 60%),
    var(--panel-bg);
}
html.aj-modern .index-page .aj-page-hero {
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--header-bg) 10%, transparent), transparent 60%),
    var(--panel-bg);
}
html.aj-modern .aj-page-hero::before { background: radial-gradient(color-mix(in srgb, var(--sec) 14%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px; }
html.aj-modern .aj-page-hero .aj-burst { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sec) 22%, transparent) 0deg 5deg, transparent 5deg 13deg); }
html.aj-modern .index-page .aj-page-hero .aj-burst { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent-color) 26%, transparent) 0deg 5deg, transparent 5deg 13deg); }
html.aj-modern .aj-page-hero .aj-kicker span { background: color-mix(in srgb, var(--sec) 11%, var(--panel-bg)); color: color-mix(in srgb, var(--sec) 82%, var(--ink)); }
html.aj-modern .index-page .aj-page-hero .aj-kicker span { background: var(--highlight-soft); color: var(--text-accent); }
html.aj-modern .aj-page-hero h1 em,
html.aj-modern .aj-page-hero .aj-issue-num { color: var(--sec); }
html.aj-modern .index-page .aj-page-hero h1 em { color: var(--header-bg); }
html.aj-modern .aj-page-hero .aj-kicker span::before { background: var(--sec); }
@keyframes ajLive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sec) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
html.aj-modern .aj-page-hero .aj-issue-lead strong { color: color-mix(in srgb, var(--sec) 88%, var(--ink)); }
/* Marcas de los títulos de sección de la página con su color */
html.aj-modern .jump-page .jump-main > h2::before,
html.aj-modern .aj-sec-manga .aj-hub-group > h2::before { background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 55%, var(--accent-color))); }
html.aj-modern .aj-sec-manga .aj-hub-group > h2::after { -webkit-text-stroke-color: color-mix(in srgb, var(--sec) 22%, transparent); }
html.aj-modern .aj-sec-manga .aj-hub-era b { color: var(--sec); }
html.aj-modern .aj-sec-manga .aj-hub-seg button.is-on { color: var(--sec); }
html.aj-modern .aj-sec-manga .aj-hub-select.is-on select { background: var(--sec); }

/* Sin textos cortados con «…»: autores en las líneas que necesiten y frase destacada entera */
html.aj-modern .aj-hub-author, html.aj-modern .gcard-author { overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.3; }
html.aj-modern .aj-hub-exc { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.aj-modern .aj-marquee figcaption { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; text-wrap: balance; }
/* El menú del móvil heredaba la sombra de texto de la barra antigua (.header-panel, style.css):
   sobre el panel blanco parecía todo en negrita */
html.aj-modern .aj-menu, html.aj-modern .aj-menu * { text-shadow: none; }
html.aj-modern .aj-menu a[aria-current] { background: color-mix(in srgb, var(--sec) 11%, var(--panel-bg)); color: color-mix(in srgb, var(--sec) 85%, var(--ink)); }
html.aj-modern .aj-menu a[aria-current] .aj-icon { color: var(--sec); }
html.aj-modern .aj-hub-now.is-off { background: color-mix(in srgb, var(--panel-bg) 88%, transparent); color: var(--dark-grey); box-shadow: 0 0 0 1px var(--border-soft); }
@media (max-width: 560px) { html.aj-modern .aj-hub-wk { display: none; } }

/* ═══ /jump · sumario con el lenguaje de /manga (2026-10-04) ═════════════════════════════
   Tarjetas teñidas con el color de su portada (--c, data/series_colors.json), sombra a juego
   y reflejo; las que traen páginas a color, destacadas en tarjeta doble con título en Bangers
   y su primera frase; la marca de cada una (estreno, apertura, final…) sobre la portada. */
html.aj-modern .jump-page .jump-main .jump-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; gap: 16px; }
@media (min-width: 1000px) { html.aj-modern .jump-page .jump-main .jump-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html.aj-modern .gcard {
  --tint: var(--c, var(--accent-color));
  gap: 0;
  align-content: start;
  padding: 10px 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tint) 15%, var(--panel-bg));
  transition: background-color 0.35s var(--ease);
}
html.aj-modern .gcard:hover { background: color-mix(in srgb, var(--tint) 28%, var(--panel-bg)); }
html.aj-modern .gcard .gcard-cover {
  margin-bottom: 8px;
  padding: 0;
  border-radius: 10px;
  background: var(--cover-placeholder);
  box-shadow: 0 16px 26px -14px color-mix(in srgb, var(--tint) 70%, var(--ink)), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: translate 0.35s var(--ease), rotate 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html.aj-modern .gcard .gcard-cover > img { border-radius: 0; }
html.aj-modern .gcard .gcard-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); translate: -120% 0; transition: translate 0.7s var(--ease); pointer-events: none; }
html.aj-modern .gcard:hover .gcard-cover { translate: 0 -5px; rotate: -1deg; box-shadow: 0 26px 36px -16px color-mix(in srgb, var(--tint) 80%, var(--ink)), 0 0 0 1px rgba(0, 0, 0, 0.05); }
html.aj-modern .gcard:hover .gcard-cover::before { translate: 120% 0; }
html.aj-modern .gcard-pos { top: 6px; left: 6px; width: 26px; height: 26px; border: 0; background: color-mix(in srgb, var(--ink) 78%, transparent); color: var(--panel-bg); font-size: 0.78rem; box-shadow: none; backdrop-filter: blur(4px); }
html.aj-modern .gcard.is-lead .gcard-pos { background: var(--sec, var(--header-bg)); color: var(--panel-bg); }
html.aj-modern .gcard-title { font-size: 0.98rem; color: var(--ink); }
html.aj-modern .gcard-author { color: color-mix(in srgb, var(--text-muted) 85%, var(--ink)); }
/* Etiqueta sobre la portada (como «#44 · cap. N» en /manga) */
html.aj-modern .gcard-flag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 40px);
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--panel-bg);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  backdrop-filter: blur(4px);
}
html.aj-modern .gcard-flag.f-lead::before, html.aj-modern .gcard-flag.f-color::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); }
html.aj-modern .gcard-flag.f-new { background: var(--primary-highlight); color: var(--ink); }
html.aj-modern .gcard-flag.f-fin { background: var(--ink); }
html.aj-modern .gcard-flag.f-digital { background: color-mix(in srgb, var(--panel-bg) 90%, transparent); color: var(--dark-grey); box-shadow: 0 0 0 1px var(--border-soft); }
/* Destacadas: las que traen páginas a color */
html.aj-modern .gcard.is-feature { grid-column: span 2; grid-row: span 2; padding: 14px 14px 16px; background: color-mix(in srgb, var(--tint) 24%, var(--panel-bg)); }
html.aj-modern .gcard.is-feature .gcard-cover { margin-bottom: 10px; }
html.aj-modern .gcard.is-feature .gcard-title { font-family: var(--font-heading-comic); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .gcard.is-feature .gcard-chapter { font-size: 0.86rem; }
html.aj-modern .gcard.is-feature .gcard-flag { left: 9px; bottom: 9px; padding: 5px 11px; font-size: 0.78rem; }
html.aj-modern .gcard.is-feature .gcard-pos { width: 32px; height: 32px; font-size: 0.95rem; }
html.aj-modern .gcard-exc { margin: 6px 0 0; color: var(--dark-grey); font-size: 0.86rem; line-height: 1.45; }
@media (max-width: 560px) {
  html.aj-modern .jump-page .jump-main .jump-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.aj-modern .gcard { padding: 6px 6px 9px; border-radius: 14px; }
  html.aj-modern .gcard.is-feature { padding: 9px 9px 11px; }
  html.aj-modern .gcard .gcard-cover { border-radius: 8px; }
  html.aj-modern .gcard-title { font-size: 0.82rem; }
  html.aj-modern .gcard-chapter { font-size: 0.72rem; }
  html.aj-modern .gcard-author { font-size: 0.68rem; }
  html.aj-modern .gcard-pos { width: 22px; height: 22px; font-size: 0.68rem; }
  html.aj-modern .gcard-flag { left: 4px; bottom: 4px; padding: 2px 6px; font-size: 0.58rem; }
  html.aj-modern .gcard.is-feature .gcard-title { font-size: 1.35rem; }
  html.aj-modern .gcard-exc { font-size: 0.76rem; }
  html.aj-modern .gcard-cover:has(.gcard-syn)::after { width: 20px; height: 20px; right: 5px; bottom: 5px; font-size: 0.7rem; }
}
html.aj-modern .gcard-tags { display: none; }   /* la marca va sobre la portada; la ficha la sigue mostrando */

/* ═══ Índice /mangaka (2026-10-04): mismo esquema que /manga, en violeta ════════════════
   Comparte las clases del índice /manga (.aj-hub-*); aquí solo el color de la sección, los
   retratos (4:5, encuadre arriba) y el abanico de fotos de la cabecera. */
html.aj-modern .aj-sec-mangaka { --sec: var(--sec-mangaka); }
html.aj-modern .aj-sec-mangaka .aj-hub-group > h2::before { background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 55%, var(--accent-color))); }
html.aj-modern .aj-sec-mangaka .aj-hub-era b,
html.aj-modern .aj-sec-mangaka .aj-hub-seg button.is-on { color: var(--sec); }
html.aj-modern .aj-mk-photo { aspect-ratio: 4 / 5; }
html.aj-modern .aj-mk-photo img { object-position: 50% 18%; }
html.aj-modern .aj-mk-fan img { aspect-ratio: 4 / 5; object-position: 50% 15%; }
html.aj-modern .aj-mk-card .aj-hub-author { color: color-mix(in srgb, var(--sec) 70%, var(--ink)); font-weight: 600; }

/* ═══ Cronología /timeline (2026-10-04): cabecera común en verde, décadas, frase del año ═══ */
html.aj-modern .timeline-page { --sec: var(--sec-timeline); }
/* El diseño clásico fija filas (cabecera 1, años 2, portadas 3) y la cabecera nueva caía al final */
html.aj-modern body.timeline-page .manga-page { grid-template-rows: none; }
html.aj-modern body.timeline-page .manga-page > * { grid-row: auto; }
html.aj-modern .aj-tl-fan-years { position: absolute; left: 50%; bottom: 8px; z-index: 3; display: flex; gap: 70px; margin: 0; translate: -50% 0; }
html.aj-modern .aj-tl-fan-years span { white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 78%, transparent); color: var(--panel-bg); font-size: 0.74rem; font-weight: 700; backdrop-filter: blur(4px); }
@media (max-width: 899px) { html.aj-modern .aj-tl-fan-years { gap: 44px; bottom: 4px; } }
/* Navegación: décadas (control segmentado) + años de esa década */
html.aj-modern .timeline-page .year-nav { display: grid; justify-items: center; gap: 10px; margin-top: 18px; padding: 14px 12px; }
html.aj-modern .aj-tl-dec { max-width: 100%; }
/* Buscador (año, nº o serie) con sugerencias: el mismo campo que /manga. En el ordenador va en
   la fila de las décadas (décadas a la izquierda, buscador a la derecha); en el móvil, arriba */
html.aj-modern .aj-tl-find { position: relative; z-index: 5; width: min(560px, 100%); }
html.aj-modern .aj-tl-find .aj-hub-search:focus-within { border-color: var(--sec); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec) 22%, transparent); }
html.aj-modern .aj-tl-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: min(60vh, 360px); margin: 0; padding: 6px; overflow-y: auto; list-style: none; border-radius: 16px; background: var(--panel-bg); box-shadow: var(--shadow-2), 0 0 0 1px var(--border-soft); text-align: left; }
html.aj-modern .aj-tl-suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
html.aj-modern .aj-tl-suggest li b { overflow: hidden; color: var(--ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
html.aj-modern .aj-tl-suggest li span { flex: none; color: var(--text-muted); font-size: 0.84rem; }
html.aj-modern .aj-tl-suggest li.is-sub { padding-top: 2px; }
html.aj-modern .aj-tl-suggest li.is-sub b { visibility: hidden; }
html.aj-modern .aj-tl-suggest li.is-active { background: color-mix(in srgb, var(--sec) 12%, var(--panel-bg)); }
html.aj-modern .aj-tl-suggest li.is-active span { color: color-mix(in srgb, var(--sec) 80%, var(--ink)); }
html.aj-modern .aj-tl-suggest li.is-empty { display: block; color: var(--text-muted); font-size: 0.88rem; cursor: default; }
@media (min-width: 900px) {
  html.aj-modern .timeline-page .year-nav { grid-template-columns: auto minmax(260px, 340px); justify-content: center; align-items: center; column-gap: 14px; }
  html.aj-modern .timeline-page .aj-tl-dec { grid-row: 1; grid-column: 1; }
  html.aj-modern .timeline-page .aj-tl-find { grid-row: 1; grid-column: 2; width: 100%; }
  html.aj-modern .timeline-page .aj-tl-find .aj-hub-search input { height: 42px; }
  html.aj-modern .timeline-page .year-nav-inner { grid-column: 1 / -1; }
}
/* Tarjeta encontrada por el buscador */
@keyframes ajTlHit { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--sec); } }
html.aj-modern .tl-card.is-hit { animation: ajTlHit 1.4s var(--ease) 2; }
html.aj-modern .timeline-page .aj-tl-dec button.is-on { color: var(--sec); }
html.aj-modern .timeline-page .year-nav-inner { width: 100%; justify-content: center; transform: none; }
html.aj-modern .timeline-page .year-btn { border-radius: 999px; box-shadow: none; font-family: var(--font-body); font-weight: 700; }
html.aj-modern .timeline-page .year-btn.active { transform: none; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--sec) 70%, transparent); }
@media (min-width: 900px) {
  /* En el ordenador caben los 10 años de la década: sin carrusel y con la lupa al lado */
  html.aj-modern .timeline-page .year-strip-wrapper { width: auto; max-width: 100%; }
  html.aj-modern .timeline-page .year-jump-wrap { position: static; translate: none; transform: none; margin-left: 6px; }
}
html.aj-modern .timeline-page .year-btn[hidden] { display: none; }
html.aj-modern .timeline-page .year-btn { background: var(--panel-bg); color: var(--dark-grey); }
html.aj-modern .timeline-page .year-btn.active { border-color: transparent; background: var(--sec); color: var(--panel-bg); }
html.aj-modern .timeline-page .year-arrow { background: var(--panel-bg); color: var(--sec); }
html.aj-modern .timeline-page .year-arrow:disabled { opacity: 0.35; }
html.aj-modern .timeline-page .year-jump-btn { background: var(--sec); color: var(--panel-bg); }
/* Cabecera del año */
html.aj-modern .timeline-page .covers-year-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; padding: 0; background: none; color: var(--ink); text-shadow: none; }
html.aj-modern .timeline-page .covers-year-title .fa-calendar-alt { display: none; }
html.aj-modern .timeline-page #selectedYearLabel { font-family: var(--font-heading-comic); font-size: 2.6rem; line-height: 1; letter-spacing: 0.02em; color: var(--sec); }
html.aj-modern .timeline-page .covers-year-title { min-height: 2.6rem; }
html.aj-modern .timeline-page .covers-count-badge { min-height: 26px; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; }
html.aj-modern .timeline-page .sort-toggle-btn { margin-left: auto; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--panel-bg); color: var(--dark-grey); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; box-shadow: none; }
html.aj-modern .aj-tl-info { min-height: 3em; margin: 0 0 16px; max-width: 75ch; color: var(--dark-grey); font-size: 0.96rem; line-height: 1.55; }
html.aj-modern .aj-tl-info a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-tl-info a:hover { color: var(--sec); }
html.aj-modern .aj-tl-note { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.82rem; }
/* Portadas: hueco reservado mientras cargan (antes el pie subía y luego bajaba: CLS 0,5) */
html.aj-modern .timeline-page .covers-grid:has(> .no-covers-msg:only-child) { min-height: 150vh; }
/* Cada número, una tarjeta inspirada en las de /manga: teñida con el color de su portada
   (data/issue_colors.json), número grande, fecha y los estrenos y finales de ese número */
html.aj-modern .timeline-page .covers-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
@media (min-width: 1000px) { html.aj-modern .timeline-page .covers-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html.aj-modern .tl-card { --tint: var(--c, var(--sec)); padding: 9px 9px 12px; border-radius: 16px; }
html.aj-modern .tl-card .aj-hub-cover { aspect-ratio: 5 / 7; margin-bottom: 9px; }
html.aj-modern .tl-card .aj-hub-ph { font-size: 1.6rem; }
html.aj-modern .tl-card .aj-hub-title { font-family: var(--font-heading-comic); font-weight: 400; font-size: 1.45rem; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .tl-card .aj-hub-title small { margin-left: 2px; color: var(--text-muted); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; }
/* Jerarquía: el número manda; en el texto solo destaca el nombre de la serie (antes todo iba en negrita) */
html.aj-modern .tl-card .aj-hub-author { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
html.aj-modern .tl-marks { display: grid; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--tint) 45%, var(--border-soft)); font-size: 0.8rem; font-weight: 400; line-height: 1.35; }
html.aj-modern .tl-mark { position: relative; padding-left: 13px; color: var(--text-muted); }
html.aj-modern .tl-mark::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px; border-radius: 50%; background: var(--sec); }
html.aj-modern .tl-mark.m-fin::before { background: var(--ink); }
html.aj-modern .tl-mark.m-lead::before { border: 2px solid color-mix(in srgb, var(--tint) 65%, var(--ink)); background: none; width: 5px; height: 5px; }
html.aj-modern .tl-card .aj-hub-author { white-space: normal; }
html.aj-modern .tl-mark.m-more { padding-left: 0; color: var(--text-muted); }
html.aj-modern .tl-mark.m-more::before { display: none; }
html.aj-modern .tl-mark b { color: var(--ink); font-weight: 600; }
html.aj-modern .tl-mark .tl-ch { white-space: nowrap; }
html.aj-modern .tl-flag.f-new { background: var(--primary-highlight); color: var(--ink); }
html.aj-modern .tl-flag.f-fin { background: var(--ink); color: var(--panel-bg); }
@media (max-width: 560px) {
  html.aj-modern .timeline-page .covers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.aj-modern .tl-card { padding: 6px 6px 9px; border-radius: 12px; }
  html.aj-modern .tl-card .aj-hub-cover { margin-bottom: 6px; border-radius: 7px; }
  html.aj-modern .tl-card .aj-hub-title { font-size: 1.15rem; }
  html.aj-modern .tl-card .aj-hub-title small { display: none; }
  html.aj-modern .tl-card .aj-hub-author { font-size: 0.7rem; }
  html.aj-modern .tl-marks { font-size: 0.68rem; }
  html.aj-modern .tl-mark { padding-left: 12px; }
  html.aj-modern .tl-mark::before { width: 6px; height: 6px; }
  html.aj-modern .timeline-page #selectedYearLabel { font-size: 2.2rem; }
}
/* Año anterior / siguiente al final de la rejilla */
html.aj-modern .aj-tl-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
html.aj-modern .aj-tl-pg { display: grid; gap: 2px; padding: 14px 18px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--sec) 10%, var(--panel-bg)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.25s var(--ease), translate 0.25s var(--ease); }
html.aj-modern .aj-tl-pg.is-next { grid-column: 2; text-align: right; }
html.aj-modern .aj-tl-pg[hidden] { display: none; }
html.aj-modern .aj-tl-pg:hover { background: color-mix(in srgb, var(--sec) 20%, var(--panel-bg)); translate: 0 -2px; }
html.aj-modern .aj-tl-pg:focus-visible { outline: 3px solid var(--sec); outline-offset: 2px; }
html.aj-modern .aj-tl-pg small { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-tl-pg b { color: var(--sec); font-family: var(--font-heading-comic); font-size: 1.9rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
/* Final de la página: últimos números en portadas y promo del cumpleaños */
html.aj-modern .aj-tl-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border-soft); }
html.aj-modern .aj-tl-h { margin: 0 0 12px; color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.8rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-shadow: none; }
html.aj-modern .aj-tl-recent { display: flex; gap: 14px; margin: 0 -4px; padding: 6px 4px 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
html.aj-modern .aj-tl-recent::-webkit-scrollbar { display: none; }
html.aj-modern .aj-tl-mini { flex: 0 0 108px; color: var(--ink); font-size: 0.82rem; text-decoration: none; scroll-snap-align: start; }
html.aj-modern .aj-tl-mini > span:last-child { color: var(--text-muted); font-weight: 600; }
html.aj-modern .aj-tl-mini-cover { position: relative; display: block; margin-bottom: 7px; overflow: hidden; aspect-ratio: 5 / 7; border-radius: 10px; background: var(--cover-placeholder); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05); transition: translate 0.35s var(--ease); }
html.aj-modern .aj-tl-mini-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-tl-mini:hover .aj-tl-mini-cover { translate: 0 -5px; }
html.aj-modern .aj-tl-mini .aj-hub-now { background: var(--sec); }
@media (max-width: 560px) {
  html.aj-modern .aj-tl-mini { flex-basis: 92px; }
}

/* ═══ Debuts /debuts (2026-10-04): cabecera común en fucsia, «El primer número» y estrenos por
   época con las tarjetas de /manga (aj-hub-*) ═══ */
html.aj-modern .debuts-page { --sec: var(--sec-debuts); }
html.aj-modern .aj-sec-debuts .aj-hub-group > h2::before { background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 55%, var(--accent-color))); }
html.aj-modern .aj-sec-debuts .aj-hub-group > h2::after { -webkit-text-stroke-color: color-mix(in srgb, var(--sec) 22%, transparent); }
html.aj-modern .aj-sec-debuts .aj-hub-era b,
html.aj-modern .aj-sec-debuts .aj-hub-seg button.is-on { color: var(--sec); }
html.aj-modern .aj-deb-first { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin: 4px 0 26px; padding: 18px; border-radius: 20px; background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); }
html.aj-modern .aj-deb-first-cover img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.5); rotate: -2deg; transition: rotate 0.35s var(--ease); }
html.aj-modern .aj-deb-first-cover:hover img { rotate: 0deg; }
html.aj-modern .aj-deb .aj-deb-first h2 { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; clip-path: none; margin: 6px 0 8px; color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.9rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-shadow: none; }
html.aj-modern .aj-deb-first p:not(.aj-kicker) { margin: 0 0 10px; max-width: 70ch; color: var(--dark-grey); line-height: 1.6; }
html.aj-modern .aj-deb-first p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-deb-first .aj-link-btn { color: var(--sec); font-weight: 700; }
html.aj-modern .aj-deb-run { margin-top: 4px; color: var(--text-muted); font-size: 0.74rem; line-height: 1.35; }
html.aj-modern .aj-deb .aj-hub-now { background: color-mix(in srgb, var(--ink) 80%, transparent); }
@media (max-width: 560px) {
  html.aj-modern .aj-deb-first { grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; }
  html.aj-modern .aj-deb-first h2 { font-size: 1.45rem; }
  html.aj-modern .aj-deb-first p:not(.aj-kicker) { font-size: 0.88rem; }
  html.aj-modern .aj-deb-run { font-size: 0.66rem; }
}
/* Preguntas frecuentes con el estilo nuevo */
html.aj-modern .aj-deb-faq { margin-top: 18px; }
html.aj-modern .aj-deb-faq h2 { color: var(--ink); font-family: var(--font-heading-comic); font-weight: 400; letter-spacing: 0.02em; text-shadow: none; background: none; }
html.aj-modern .aj-deb-faq .faq-item { border: 0; border-radius: 14px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); box-shadow: 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-deb-faq .faq-item[open] { background: var(--panel-bg); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sec) 45%, transparent); }
html.aj-modern .aj-deb-faq .faq-link { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--sec) 55%, transparent); }

/* Promo del cumpleaños: mismo ancho en todas las páginas (en /timeline el contenedor tiene menos
   relleno lateral y quedaba 12 px más ancha) */
html.aj-modern .covers-section-inner > .aj-birth-promo { margin-inline: 6px; }
/* Móvil: mismo margen lateral en todas las páginas (en /jump y /timeline era 24 px y en /manga,
   /mangaka y /debuts 16): contenido y promo del cumpleaños con el mismo ancho */
@media (max-width: 600px) {
  html.aj-modern .jump-page .debuts-section { padding-left: 16px; padding-right: 16px; }
  html.aj-modern .timeline-page .covers-section-inner { padding-left: 16px; padding-right: 16px; }
  html.aj-modern .covers-section-inner > .aj-birth-promo { margin-inline: 0; }
}

/* ═══ Ranking del sumario /ranking (2026-10-04): cabecera en dorado (--sec-ranking), años,
   destacados y tabla con el lenguaje de /manga ═══ */
html.aj-modern .aj-sec-ranking { --sec: var(--sec-ranking); }
html.aj-modern .aj-sec-ranking .aj-hub-group > h2::before { background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 55%, var(--accent-color))); }
html.aj-modern .aj-sec-ranking .aj-hub-era b { color: var(--sec); }
html.aj-modern .aj-rk-years { margin: 0 0 18px; }
html.aj-modern .aj-rk-years a { flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; color: var(--dark-grey); font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: background-color 0.2s; }
html.aj-modern .aj-rk-years a:hover:not(.is-on) { background: color-mix(in srgb, var(--panel-bg) 60%, transparent); }
html.aj-modern .aj-rk-years a.is-on { background: var(--panel-bg); color: var(--sec); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
/* Destacados */
html.aj-modern .aj-rk-high { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 26px; }
html.aj-modern .aj-rk-hl { --tint: var(--c, var(--sec)); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--tint) 14%, var(--panel-bg)); color: var(--ink); text-decoration: none; transition: background-color 0.3s var(--ease), translate 0.3s var(--ease); }
html.aj-modern a.aj-rk-hl:hover { background: color-mix(in srgb, var(--tint) 24%, var(--panel-bg)); translate: 0 -2px; }
html.aj-modern .aj-rk-hl img { flex: none; width: 52px; height: 74px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.5); }
html.aj-modern .aj-rk-hl-ph { flex: none; display: grid; place-items: center; width: 52px; height: 74px; border-radius: 8px; background: color-mix(in srgb, var(--tint) 30%, var(--panel-bg)); color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.6rem; }
html.aj-modern .aj-rk-hl > span:last-child { display: grid; gap: 2px; min-width: 0; }
html.aj-modern .aj-rk-hl small { color: var(--sec); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
html.aj-modern .aj-rk-hl b { font-size: 1rem; line-height: 1.25; }
html.aj-modern .aj-rk-hl em { color: var(--dark-grey); font-size: 0.82rem; font-style: normal; font-weight: 600; }
html.aj-modern .aj-rk-hl.is-low { --tint: var(--text-muted); }
html.aj-modern .aj-rk-hl.is-low b { font-size: 0.88rem; font-weight: 600; }
html.aj-modern .aj-rk-hl.is-low small { color: var(--dark-grey); }
/* Cada destacado con el color de lo que cuenta (antes se teñía con el color de la serie y las
   tres salían apagadas): lidera = dorado de la sección, sube = verde, baja = rojo */
html.aj-modern .aj-rk-hl.is-lead { --tint: var(--sec); }
html.aj-modern .aj-rk-hl.is-up { --tint: var(--sec-timeline); }
html.aj-modern .aj-rk-hl.is-down { --tint: var(--sec-week); }
html.aj-modern .aj-rk-hl:is(.is-lead, .is-up, .is-down) { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 20%, var(--panel-bg)), color-mix(in srgb, var(--tint) 6%, var(--panel-bg))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 30%, transparent); }
html.aj-modern a.aj-rk-hl:is(.is-lead, .is-up, .is-down):hover { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 28%, var(--panel-bg)), color-mix(in srgb, var(--tint) 10%, var(--panel-bg))); }
html.aj-modern .aj-rk-hl:is(.is-lead, .is-up, .is-down) small,
html.aj-modern .aj-rk-hl:is(.is-lead, .is-up, .is-down) em { color: color-mix(in srgb, var(--tint) 85%, var(--ink)); }
/* Tabla */
html.aj-modern .aj-rk-legend { margin: 0 0 10px; color: var(--text-muted); font-size: 0.8rem; }
html.aj-modern .aj-rk-legend svg { vertical-align: middle; }
html.aj-modern .aj-rk .tc-line { stroke: var(--sec); }
html.aj-modern .aj-rk .tc-dot { fill: var(--sec); }
html.aj-modern .aj-rk .tc-color { fill: var(--panel-bg); stroke: var(--sec); }
html.aj-modern .aj-rk-table th { border-bottom: 1px solid var(--border-soft); color: var(--text-muted); font-size: 0.7rem; }
html.aj-modern .aj-rk-table td { border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 70%, transparent); padding: 9px 8px; }
html.aj-modern .aj-rk-table tr:hover td { background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); }
html.aj-modern .aj-rk-table .tc-rank { color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.3rem; font-weight: 400; }
html.aj-modern .aj-rk-table .tc-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
html.aj-modern .aj-rk-table .tc-name a:hover { color: var(--sec); }
html.aj-modern .aj-rk-table .tc-num a { color: var(--sec); }
html.aj-modern .aj-rk-table .tc-tag { padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-size: 0.62rem; }
html.aj-modern .aj-rk-table .tc-tag.is-new { background: var(--primary-highlight); color: var(--ink); }
html.aj-modern .aj-rk-table .tc-tag.is-low { background: color-mix(in srgb, var(--sec) 16%, var(--panel-bg)); color: color-mix(in srgb, var(--sec) 80%, var(--ink)); }
html.aj-modern .aj-rk-table tr.tc-low td { background: color-mix(in srgb, var(--sec) 6%, var(--panel-bg)); }
html.aj-modern .aj-rk-tr.is-up { color: var(--sec-timeline); }
html.aj-modern .aj-rk-tr.is-down { color: var(--sec-week); }
/* Cómo se calcula */
html.aj-modern .aj-rk-how { margin: 30px 0 6px; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 6%, var(--panel-bg)); }
html.aj-modern .aj-rk-how h2 { margin: 0 0 10px; padding: 0; background: none; color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; text-shadow: none; }
html.aj-modern .aj-rk-how h2::before { display: none; }
html.aj-modern .aj-rk-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; }
html.aj-modern .aj-rk-how p { margin: 0; color: var(--dark-grey); font-size: 0.88rem; line-height: 1.55; }
html.aj-modern .aj-rk-how p b { color: var(--ink); }
html.aj-modern .aj-rk-how .aj-rk-src { margin-top: 12px; color: var(--text-muted); font-size: 0.78rem; }
@media (max-width: 560px) {
  html.aj-modern .aj-rk-high { grid-template-columns: 1fr; gap: 8px; }
  html.aj-modern .aj-rk-table td { padding: 8px 4px; }
  html.aj-modern .aj-rk-table .tc-rank { font-size: 1.1rem; }
}
html.aj-modern main.aj-rk.is-loading .aj-rk-high, html.aj-modern main.aj-rk.is-loading .aj-hub-group { opacity: 0.45; transition: opacity 0.2s; }
/* Ranking: huecos del gráfico en punteado y portadas de la zona baja */
html.aj-modern .aj-rk .tc-gap { stroke: var(--sec); }
html.aj-modern .aj-rk-low-covers { flex: none; display: flex; align-items: center; padding-left: 14px; }
html.aj-modern .aj-rk-hl .aj-rk-low-covers > * { width: 34px; height: 50px; margin-left: -14px; border-radius: 6px; object-fit: cover; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--panel-bg); }
html.aj-modern .aj-rk-low-covers > .aj-rk-hl-ph { display: grid; place-items: center; font-size: 1rem; }
html.aj-modern .aj-rk-hl.is-low { align-items: center; }
@media (max-width: 560px) { html.aj-modern .aj-rk-hl .aj-rk-low-covers > * { width: 30px; height: 44px; margin-left: -12px; } }
/* Zona baja: fila propia de todo el ancho (cinco nombres largos no cabían en una tarjeta estrecha) */
@media (min-width: 900px) {
  html.aj-modern .aj-rk-high { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.aj-modern .aj-rk-hl.is-low { grid-column: 1 / -1; }
}
html.aj-modern .aj-rk-hl.is-low b { font-weight: 600; line-height: 1.45; }
html.aj-modern .aj-rk-hl.is-low .aj-rk-sep { margin: 0 2px; color: var(--text-muted); font-weight: 400; }
html.aj-modern .aj-rk-ln { white-space: nowrap; }
/* Temporadas cerradas: qué pasó después con cada serie, y filas sin puesto (pocos números) */
html.aj-modern .aj-rk-fate { color: var(--dark-grey); font-size: 0.78rem; font-style: normal; font-weight: 500; }
html.aj-modern .aj-rk-fate a { color: inherit; text-decoration: none; }
html.aj-modern .aj-rk-fate a:hover { color: var(--sec); text-decoration: underline; }
html.aj-modern .aj-rk-table tr.tc-few td { opacity: 0.75; }
html.aj-modern .aj-rk-table tr.tc-sep td { padding: 22px 8px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
html.aj-modern .aj-rk-table tr.tc-sep td b { color: var(--sec); }
html.aj-modern .aj-rk-table tr.tc-sep:hover td { background: none; }
/* Qué pasó después / último capítulo: etiqueta (antes, texto subrayado) */
html.aj-modern .aj-rk-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-size: 0.74rem; font-weight: 700; line-height: 1.35; white-space: nowrap; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
html.aj-modern .aj-rk-pill.is-gone { background: transparent; box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-rk-pill.is-on { background: color-mix(in srgb, var(--sec-timeline) 14%, var(--panel-bg)); color: color-mix(in srgb, var(--sec-timeline) 85%, var(--ink)); }
html.aj-modern a.aj-rk-pill:hover { background: color-mix(in srgb, var(--sec) 16%, var(--panel-bg)); color: color-mix(in srgb, var(--sec) 85%, var(--ink)); }
html.aj-modern .aj-rk-table .tc-mob .aj-rk-pill { padding: 1px 8px; font-size: 0.7rem; }
/* Series con ficha: subrayado en el color de la sección y flecha; las que no tienen, texto liso */
html.aj-modern .aj-rk-table .tc-name a.aj-rk-sl { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
html.aj-modern .aj-rk-table .tc-name a.aj-rk-sl:hover { color: var(--sec); text-decoration-color: var(--sec); }
html.aj-modern .aj-rk-sl-ic { width: 0.85em; height: 0.85em; margin-left: 4px; vertical-align: -0.08em; color: var(--sec); transition: translate 0.2s var(--ease); }
html.aj-modern a.aj-rk-sl:hover .aj-rk-sl-ic { translate: 3px 0; }
html.aj-modern .aj-rk-table .tc-name strong { font-weight: 600; }
/* Móvil: un nombre por línea (en fila se partían a mitad) */
@media (max-width: 899px) {
  html.aj-modern .aj-rk-hl.is-low .aj-rk-sep { display: none; }
  html.aj-modern .aj-rk-hl.is-low .aj-rk-ln { display: block; white-space: normal; }
}

/* ═══ Historia /history (2026-10-08): cabecera en turquesa (--sec-history), cifras, década a
   década con sus datos de los sumarios, las más longevas, las que más números abrieron y
   números hito ═══ */
html.aj-modern .aj-sec-history { --sec: var(--sec-history); }
html.aj-modern .aj-sec-history .aj-hub-group > h2::before { background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 55%, var(--accent-color))); }
html.aj-modern .aj-sec-history .aj-hub-group > h2::after { -webkit-text-stroke-color: color-mix(in srgb, var(--sec) 22%, transparent); }
html.aj-modern .aj-sec-history .aj-hub-era b { color: var(--sec); }
/* Cifras */
html.aj-modern .aj-hs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 30px; }
html.aj-modern .aj-hs-stats > div { padding: 16px 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 9%, var(--panel-bg)); text-align: center; }
html.aj-modern .aj-hs-stats b { display: block; color: var(--sec); font-family: var(--font-heading-comic); font-size: 2.3rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .aj-hs-stats span { display: block; margin-top: 6px; color: var(--dark-grey); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
/* Década: texto + sus cifras, y las más longevas que nacieron en ella */
html.aj-modern .aj-hs-dec { margin-bottom: 34px; }
html.aj-modern .aj-hs-dec-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
html.aj-modern .aj-hs-text { margin: 0; max-width: 68ch; color: var(--ink); font-size: 0.98rem; line-height: 1.7; }
html.aj-modern .aj-hs-text a, html.aj-modern .aj-hs-facts a, html.aj-modern .aj-hs-list a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 50%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
html.aj-modern .aj-hs-text a:hover, html.aj-modern .aj-hs-facts a:hover, html.aj-modern .aj-hs-list a:hover { color: var(--sec); text-decoration-color: var(--sec); }
html.aj-modern .aj-hs-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
html.aj-modern .aj-hs-facts > div { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); }
html.aj-modern .aj-hs-facts dt { color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
html.aj-modern .aj-hs-facts dd { margin: 2px 0 0; color: var(--ink); font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
html.aj-modern .aj-hs-facts .is-wide dd { font-size: 0.95rem; }
html.aj-modern .aj-hs-facts dd small { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--sec); color: var(--panel-bg); font-size: 0.72rem; vertical-align: 1px; }
html.aj-modern .aj-hs-dec .aj-hs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.aj-modern .aj-hs-born-h { margin: 0 0 10px; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }
html.aj-modern .aj-hs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 16px; }
html.aj-modern .aj-hs-mini { display: grid; align-content: start; gap: 2px; color: var(--ink); font-size: 0.86rem; text-decoration: none; }
html.aj-modern .aj-hs-mini-cover { position: relative; display: block; margin-bottom: 6px; overflow: hidden; aspect-ratio: 5 / 7; border-radius: 10px; background: var(--cover-placeholder); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.06); transition: translate 0.3s var(--ease); }
html.aj-modern .aj-hs-mini-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-hs-mini:hover .aj-hs-mini-cover { translate: 0 -5px; }
html.aj-modern .aj-hs-mini b { line-height: 1.25; }
html.aj-modern .aj-hs-mini > span:last-child { color: var(--text-muted); font-size: 0.76rem; font-weight: 600; line-height: 1.3; }
html.aj-modern .aj-hs-mini .aj-hub-now { background: color-mix(in srgb, var(--ink) 80%, transparent); }
html.aj-modern .aj-hs-mini.is-hot .aj-hub-now { background: var(--sec); }
html.aj-modern .aj-hs-mini.is-hot .aj-hs-mini-cover { box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--sec); }
/* Las más longevas / las que más números abrieron: lista con barra proporcional */
html.aj-modern .aj-hs-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 34px; }
html.aj-modern .aj-hs-list { margin: 0; padding: 16px 16px 14px; border-radius: 20px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); }
html.aj-modern .aj-hs-sub { margin: -4px 0 12px 22px; color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; }
html.aj-modern .aj-hs-list ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: hs; }
html.aj-modern .aj-hs-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 36px; border-radius: 10px; isolation: isolate; counter-increment: hs; font-size: 0.9rem; }
html.aj-modern .aj-hs-list li::before { content: counter(hs); position: absolute; left: 12px; color: var(--sec); font-family: var(--font-heading-comic); font-size: 1.1rem; }
html.aj-modern .aj-hs-list li::after { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--w); min-width: 30px; border-radius: 10px; background: color-mix(in srgb, var(--sec) 15%, var(--panel-bg)); }
html.aj-modern .aj-hs-n { flex: 1; min-width: 0; font-weight: 700; line-height: 1.3; }
html.aj-modern .aj-hs-n small { margin-left: 4px; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
html.aj-modern .aj-hs-list li > b { font-variant-numeric: tabular-nums; }
/* Enlaces, preguntas y fuentes */
html.aj-modern .aj-hs-miles .aj-hub-era a { color: var(--sec); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 40%, transparent); text-underline-offset: 3px; }
html.aj-modern .aj-hs-src { margin: 18px 0 24px; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; }
html.aj-modern .aj-hs-src a { color: inherit; }
@media (max-width: 900px) {
  html.aj-modern .aj-hs-dec-body, html.aj-modern .aj-hs-lists { grid-template-columns: 1fr; }
  html.aj-modern .aj-hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html.aj-modern .aj-hs-stats { gap: 8px; }
  html.aj-modern .aj-hs-stats b { font-size: 1.8rem; }
  html.aj-modern .aj-hs-text { font-size: 0.93rem; }
  html.aj-modern .aj-hs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  html.aj-modern .aj-hs-mini { font-size: 0.78rem; }
  html.aj-modern .aj-hs-sub { margin-left: 0; }
}

/* ═══ Páginas de información /about, /contact, /privacy (2026-10-08): cabecera común en el naranja
   de la marca, pasos, tarjetas con icono, la dirección de contacto y lo que guarda el navegador ═══ */
html.aj-modern .aj-in .aj-hub-group { margin-bottom: 30px; }
html.aj-modern .aj-in-p { max-width: 72ch; margin: 0 0 12px; color: var(--ink); font-size: 0.98rem; line-height: 1.7; }
html.aj-modern .aj-in-p a, html.aj-modern .aj-in-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 50%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-in-p a:hover, html.aj-modern .aj-in-note a:hover { color: var(--sec); }
html.aj-modern .aj-in-p code, html.aj-modern .aj-in-store code { padding: 1px 6px; border-radius: 6px; background: var(--chip-bg); color: var(--ink); font-size: 0.86em; }
html.aj-modern .aj-in-note { max-width: 72ch; margin: 10px 0 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; }
html.aj-modern .aj-in-legal { margin: 0 0 26px; }
html.aj-modern .aj-in-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--sec) 14%, var(--panel-bg)); color: var(--sec); }
html.aj-modern .aj-in-ic .aj-icon { width: 22px; height: 22px; }
/* Pasos */
html.aj-modern .aj-in-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
html.aj-modern .aj-in-steps li { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 6%, var(--panel-bg)); counter-increment: st; }
html.aj-modern .aj-in-steps li::after { content: counter(st); position: absolute; top: 10px; right: 16px; color: color-mix(in srgb, var(--sec) 30%, transparent); font-family: var(--font-heading-comic); font-size: 2.2rem; line-height: 1; }
html.aj-modern .aj-in-steps b { margin-top: 4px; font-size: 1.02rem; }
html.aj-modern .aj-in-steps span:last-child { color: var(--dark-grey); font-size: 0.88rem; line-height: 1.5; }
html.aj-modern .aj-in-stats { margin: 0 0 16px; }
/* Fechas */
html.aj-modern .aj-in-dates { display: grid; gap: 8px; max-width: 560px; margin: 4px 0 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sec) 6%, var(--panel-bg)); }
html.aj-modern .aj-in-dates-h { margin: 0 0 2px; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }
html.aj-modern .aj-in-dates > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html.aj-modern .aj-in-badge { min-width: 128px; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-size: 0.74rem; font-weight: 700; text-align: center; }
html.aj-modern .aj-in-badge.is-sale { background: var(--sec); color: var(--panel-bg); }
/* Tarjetas (fuentes, qué enviar, resumen, servicios) */
html.aj-modern .aj-in-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html.aj-modern .aj-in-cards li { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-in-cards b { color: var(--ink); font-size: 0.98rem; }
html.aj-modern .aj-in-cards span { color: var(--dark-grey); font-size: 0.86rem; line-height: 1.5; }
html.aj-modern .aj-in-cards a { margin-top: 2px; color: var(--sec); font-size: 0.8rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
html.aj-modern .aj-in-cards a:hover { text-decoration: underline; }
html.aj-modern .aj-in-cards-ic li { grid-template-columns: auto 1fr; column-gap: 12px; }
html.aj-modern .aj-in-cards-ic .aj-in-ic { grid-row: span 2; }
html.aj-modern .aj-in-sum { margin-bottom: 30px; }
/* 3 columnas donde 4 dejaban tarjetas sueltas (resumen: 3, servicios: 9, qué enviar: 5) */
@media (min-width: 900px) { html.aj-modern .aj-in-sum, html.aj-modern .aj-in-third, html.aj-modern .aj-in-cards-ic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.aj-modern .aj-in-sum li { background: color-mix(in srgb, var(--sec) 9%, var(--panel-bg)); box-shadow: none; }
/* Botones */
html.aj-modern .aj-in-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--sec); color: var(--panel-bg); font: inherit; font-size: 0.92rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: translate 0.25s var(--ease), background-color 0.25s; }
html.aj-modern .aj-in-btn:hover { translate: 0 -2px; }
html.aj-modern .aj-in-btn .aj-icon { width: 18px; height: 18px; }
html.aj-modern .aj-in-btn.is-ghost { background: var(--panel-bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border-soft); }
html.aj-modern .aj-in-btn.is-ok { background: var(--sec-timeline); color: var(--panel-bg); box-shadow: none; }
html.aj-modern .aj-in-support { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
html.aj-modern .aj-in-support .aj-in-p { flex: 1 1 420px; margin: 0; }
/* Contacto */
html.aj-modern .aj-in-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 30px; padding: 20px; border-radius: 22px; background: color-mix(in srgb, var(--sec) 9%, var(--panel-bg)); }
html.aj-modern .aj-in-mail .aj-in-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--sec); color: var(--panel-bg); }
html.aj-modern .aj-in-mail .aj-in-ic .aj-icon { width: 28px; height: 28px; }
html.aj-modern .aj-in-mail > div:nth-child(2) { flex: 1 1 240px; min-width: 0; }
html.aj-modern .aj-in-mail-h { margin: 0; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }
html.aj-modern .aj-in-mail-a { display: block; color: var(--ink); font-size: 1.3rem; overflow-wrap: anywhere; }
html.aj-modern .aj-in-mail-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* Privacidad: lo que guarda el navegador */
html.aj-modern .aj-in-store { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
html.aj-modern .aj-in-store li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); }
html.aj-modern .aj-in-store code { justify-self: start; }
html.aj-modern .aj-in-store span { color: var(--ink); font-size: 0.9rem; line-height: 1.45; }
html.aj-modern .aj-in-store small { color: var(--text-muted); font-size: 0.78rem; text-align: right; }
@media (max-width: 760px) {
  html.aj-modern .aj-in-steps { grid-template-columns: 1fr; }
  /* Móvil: icono a la izquierda (encima, cada paso ocupaba el doble de alto) */
  html.aj-modern .aj-in-steps li { grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 14px 44px 14px 14px; }
  html.aj-modern .aj-in-steps li .aj-in-ic { grid-row: span 2; }
  html.aj-modern .aj-in-steps b { margin-top: 0; }
  html.aj-modern .aj-in-steps li::after { top: 50%; translate: 0 -50%; font-size: 1.8rem; }
  html.aj-modern .aj-in-store li { grid-template-columns: 1fr; gap: 4px; }
  html.aj-modern .aj-in-store small { text-align: left; }
  html.aj-modern .aj-in-mail-btns, html.aj-modern .aj-in-mail-btns .aj-in-btn { width: 100%; justify-content: center; }
  html.aj-modern .aj-in-mail-a { font-size: 1.05rem; }   /* que la dirección quepa entera en una línea */
}

/* ═══ Resultado /results (2026-10-08): la revelación en la cabecera común (fecha pedida, número en
   grande, datos rápidos, estrenos y cumpleaños, compartir) con la portada; debajo, sin pestañas,
   lo que pasó en el número, el sumario y los datos. results.js rellena los mismos id ═══ */
html.aj-modern body.results-page .manga-page:has(.aj-rs-hero) { display: flex; flex-direction: column; gap: 16px; height: auto; min-height: 0; max-height: none; grid-template-columns: none; grid-template-rows: none; }
/* Barra, cabecera y panel con el mismo ancho y los mismos huecos que el resto (antes la barra medía 1058 px y se pisaban) */
html.aj-modern body.results-page .manga-page:has(.aj-rs-hero) > .header-panel, html.aj-modern .aj-rs-hero, html.aj-modern main.aj-rs { align-self: stretch; width: 100%; max-width: none; }
html.aj-modern .aj-rs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
html.aj-modern .aj-rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--panel-bg); box-shadow: inset 0 0 0 1.5px var(--border-soft); color: var(--ink); font: inherit; font-size: 0.98rem; font-weight: 700; cursor: pointer; transition: translate 0.25s var(--ease), box-shadow 0.25s; }
html.aj-modern .aj-rs-btn:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sec) 50%, transparent); }
html.aj-modern .aj-rs-btn .aj-icon { width: 18px; height: 18px; }
html.aj-modern .aj-rs-btn.is-primary { background: var(--brand-gradient); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--header-bg) 80%, transparent); color: var(--panel-bg); }
html.aj-modern .aj-rs-adj { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 10px; font-size: 0.86rem; }
html.aj-modern .aj-rs-adj a { color: var(--dark-grey); font-weight: 600; text-decoration: none; }
html.aj-modern .aj-rs-adj a:hover { color: var(--sec); text-decoration: underline; }
/* Portada */
html.aj-modern .aj-rs-seen { position: relative; z-index: 2; display: block; max-width: 340px; margin: 14px 0 0; padding: 0; background: none; box-shadow: none; color: var(--dark-grey); font-size: 0.9rem; text-align: center; text-wrap: balance; }
html.aj-modern .aj-rs-seen b { color: var(--sec); }
html.aj-modern .aj-rs-ebay { display: inline-flex; align-items: center; gap: 6px; color: var(--dark-grey); font-size: 0.86rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-soft); text-underline-offset: 3px; }
html.aj-modern .aj-rs-ebay:hover { color: var(--sec); }
html.aj-modern .aj-rs-ebay .aj-icon { width: 16px; height: 16px; }
/* Secciones (sin pestañas: las de results.js quedan ocultas y todos los paneles a la vista) */
html.aj-modern .aj-rs .tab-navigation { display: none !important; }
html.aj-modern .aj-rs .tab-content, html.aj-modern .aj-rs .tab-content.hidden { display: block !important; animation: none; }
html.aj-modern .aj-rs .tab-content > h2, html.aj-modern .aj-rs .tab-content h2:first-child { display: none; }
html.aj-modern .aj-rs-sec { margin-bottom: 30px; }
html.aj-modern .aj-rs-trivia ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
html.aj-modern .aj-rs-trivia li { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sec) 7%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 18%, transparent); color: var(--ink); font-size: 0.95rem; line-height: 1.55; }
html.aj-modern .aj-rs-trivia p { color: var(--dark-grey); }
html.aj-modern .aj-rs-trivia a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 50%, transparent); text-underline-offset: 3px; }
html.aj-modern .aj-rs-more { margin: 4px 0 0; }
html.aj-modern .aj-rs-more a { color: var(--sec); font-weight: 700; text-decoration: none; }
html.aj-modern .aj-rs-more a:hover { text-decoration: underline; }
html.aj-modern .aj-rs-aff { margin: 12px 0 0; color: var(--text-muted); font-size: 0.8rem; }
html.aj-modern .aj-rs-aff a { color: inherit; }
/* Cierre */
html.aj-modern .aj-rs-kofi { margin: 0 0 6px; color: var(--text-muted); font-size: 0.84rem; text-align: center; }
html.aj-modern .aj-rs-kofi a { color: var(--ink); font-weight: 700; }
/* Compartir flotante: solo en móvil y cuando ya no se ven la cabecera ni los botones del final */
html.aj-modern body.results-page:has(.aj-rs-hero) .share-fab:not(.is-away) { display: none; }
@media (min-width: 1024px) { html.aj-modern body.results-page:has(.aj-rs-hero) .share-fab { display: none; } }
@media (min-width: 900px) {
  html.aj-modern .aj-rs-hero { grid-template-columns: 1.15fr 0.85fr; }
}
/* Cabecera del resultado con el patrón común (2026-10-09): etiquetas, título con la palabra resaltada,
   entrada de una frase y abanico de portadas (el número anterior, el tuyo delante y el siguiente) */
html.aj-modern .aj-rs-copy { display: grid; align-content: center; justify-items: start; gap: 12px; min-width: 0; }
html.aj-modern .aj-rs-copy .aj-kicker { order: -1; flex-wrap: wrap; }   /* arriba (la regla común la manda al final) y en dos líneas si no cabe */
html.aj-modern .aj-rs-copy .aj-hub-lead { margin: 0; }
html.aj-modern .aj-rs-copy .aj-hub-lead a, html.aj-modern .aj-rs-copy .aj-hub-lead b { color: var(--ink); font-weight: 700; }
html.aj-modern .aj-rs-copy .aj-hub-lead a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-rs-copy .aj-hub-lead a:hover { color: var(--sec); }
html.aj-modern .aj-rs-copy .debut-notice, html.aj-modern .aj-rs-copy .bday-match { width: 100%; max-width: 560px; margin: 0; padding: 10px 14px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 22%, transparent); font-size: 0.92rem; line-height: 1.45; text-align: left; }
html.aj-modern .aj-rs-copy .debut-notice a { color: var(--sec); font-weight: 700; }
html.aj-modern .aj-rs-visual { position: relative; display: grid; justify-items: center; gap: 8px; }
@media (max-width: 899px) {
  /* Móvil: etiquetas y título → portadas → entrada → acontecimiento y cumpleaños → botones → búsquedas y eBay */
  html.aj-modern .aj-rs-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  html.aj-modern .aj-rs-copy, html.aj-modern .aj-rs-visual { display: contents; }
  html.aj-modern .aj-rs-trophy { order: 3; }
  html.aj-modern .aj-rs-copy .aj-kicker { order: 1; justify-content: center; }
  html.aj-modern .aj-rs-copy h1 { order: 2; }
  html.aj-modern .aj-rs-copy .aj-hub-lead { order: 4; }
  html.aj-modern .aj-rs-copy .debut-notice, html.aj-modern .aj-rs-copy .bday-match { order: 5; }
  html.aj-modern .aj-rs-hero .aj-rs-actions { order: 6; width: 100%; justify-content: center; }   /* solo la cabecera: en «Comparte tu Jump» ponía el anterior/siguiente encima */
  html.aj-modern .aj-rs-actions .aj-rs-btn { flex: 1 1 100%; }
  html.aj-modern .aj-rs-seen { order: 7; margin-top: 4px; }
  html.aj-modern .aj-rs-ebay { order: 8; }
  html.aj-modern .aj-rs-trivia ul { grid-template-columns: 1fr; }
}

/* Sumario del resultado con la tarjeta de /jump (2026-10-09): rejilla de /jump, la que abría el
   número en grande, portada con el color de la serie de fondo mientras carga, compra discreta */
html.aj-modern .aj-rs .jump-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; gap: 16px; }
@media (min-width: 1000px) { html.aj-modern .aj-rs .jump-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 899px) { html.aj-modern .aj-rs .jump-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 560px) { html.aj-modern .aj-rs .jump-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
html.aj-modern .aj-rs-card { display: grid; text-decoration: none; }
html.aj-modern .aj-rs-card .gcard-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 7; }
html.aj-modern .aj-rs-card .gcard-cover > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-rs-card .manga-card-placeholder { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: 10px; background: color-mix(in srgb, var(--tint) 60%, var(--ink)); color: var(--panel-bg); font-family: var(--font-heading-comic); font-size: 1.1rem; line-height: 1.05; text-align: center; }
html.aj-modern .aj-rs-card .gcard-pos, html.aj-modern .aj-rs-card .gcard-flag { z-index: 2; }
/* El puesto en el sumario, en la esquina de la portada (los estilos de base estaban solo en /jump: aquí salía
   escondido detrás de la imagen) */
html.aj-modern .aj-rs-card .gcard-pos { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; line-height: 1; }
html.aj-modern .aj-rs-card .gcard-cover { position: relative; }
/* Móvil: la que abría el número, en horizontal (portada a la izquierda): antes ocupaba la pantalla entera */
@media (max-width: 560px) {
  html.aj-modern .aj-rs-card.is-feature { grid-row: auto; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; }
  html.aj-modern .aj-rs-card.is-feature .gcard-cover { margin-bottom: 0; }
  html.aj-modern .aj-rs-card.is-feature .gcard-flag { left: 50%; bottom: 5px; padding: 2px 6px; font-size: 0.58rem; white-space: nowrap; translate: -50% 0; }
  html.aj-modern .aj-rs-card.is-feature .gcard-flag::before { display: none; }
}
html.aj-modern .aj-rs-card .gcard-title a { color: var(--ink); text-decoration: none; }
html.aj-modern .aj-rs-card .gcard-title a:hover { color: var(--sec); }
html.aj-modern .aj-rs-buy { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: color-mix(in srgb, var(--tint) 55%, var(--ink)); font-size: 0.74rem; font-weight: 700; text-decoration: none; opacity: 0.8; }
html.aj-modern .aj-rs-buy:hover { opacity: 1; text-decoration: underline; }
html.aj-modern .aj-rs-buy .fas { font-size: 0.7rem; }
html.aj-modern .aj-rs-card.is-feature .aj-rs-buy { font-size: 0.8rem; }
/* «Lo que pasó»: si solo hay una, que no parezca una tarjeta perdida */
html.aj-modern .aj-rs-trivia li:only-child { grid-column: 1 / -1; max-width: 640px; }

/* ═══ Resultado, parte de abajo (2026-10-09): curiosidades con su tipo, enlaces bajo el sumario,
   los tomos de tu número (Amazon), el regalo (eBay), compartir con la vista previa de la imagen y
   el número de esta semana ═══ */
html.aj-modern .aj-rs-copy { position: relative; }
/* Lo que pasó: etiqueta por tipo; la sección se oculta si no hay nada */
html.aj-modern .aj-rs-what:not(:has(.aj-rs-trivia li)) { display: none; }
html.aj-modern .aj-rs-trivia li { position: relative; padding-top: 34px; }
html.aj-modern .aj-rs-trivia li::before { position: absolute; top: 12px; left: 16px; padding: 2px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--dark-grey); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; content: 'Curiosidad'; }
html.aj-modern .aj-rs-trivia li[data-kind="debut"]::before { background: var(--primary-highlight); color: var(--ink); content: 'Estreno'; }
html.aj-modern .aj-rs-trivia li[data-kind="final"]::before { background: var(--ink); color: var(--panel-bg); content: 'Final'; }
html.aj-modern .aj-rs-trivia li[data-kind="hito"]::before { background: var(--sec); color: var(--panel-bg); content: 'Hito'; }
html.aj-modern:lang(en) .aj-rs-trivia li::before { content: 'Trivia'; }
html.aj-modern:lang(en) .aj-rs-trivia li[data-kind="debut"]::before { content: 'Debut'; }
html.aj-modern:lang(en) .aj-rs-trivia li[data-kind="final"]::before { content: 'Final'; }
html.aj-modern:lang(en) .aj-rs-trivia li[data-kind="hito"]::before { content: 'Milestone'; }
/* «Lo que pasó» con portadas (2026-10-17): cada dato lleva el tomo 1 de la serie que nombra; el estreno
   o el final del número, a todo el ancho y destacado; «le quedaban N capítulos» = recta final */
html.aj-modern .aj-rs-trivia li[data-kind="recta"]::before { background: color-mix(in srgb, #f59e0b 85%, var(--ink)); color: #fff; content: 'Recta final'; }
html.aj-modern:lang(en) .aj-rs-trivia li[data-kind="recta"]::before { content: 'Final stretch'; }
html.aj-modern .aj-rs-trivia li[data-kind="arco"]::before { background: var(--sec-manga); color: var(--panel-bg); content: 'Arco'; }
html.aj-modern:lang(en) .aj-rs-trivia li[data-kind="arco"]::before { content: 'Arc'; }
html.aj-modern .aj-rs-trivia li.has-cover { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
html.aj-modern .aj-rs-fact-covers { display: flex; padding: 4px 6px 8px 2px; }
html.aj-modern .aj-rs-fact-covers img { width: 56px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 18px -10px rgba(70, 25, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06); rotate: -4deg; }
html.aj-modern .aj-rs-fact-covers img + img { margin-left: -24px; rotate: 5deg; }
html.aj-modern .aj-rs-trivia li[data-kind="debut"], html.aj-modern .aj-rs-trivia li[data-kind="final"] { font-size: 1.02rem; }
html.aj-modern .aj-rs-trivia li[data-kind="debut"] { background: color-mix(in srgb, var(--primary-highlight) 13%, var(--panel-bg)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-highlight) 45%, transparent); }
html.aj-modern .aj-rs-trivia li[data-kind="final"] { background: color-mix(in srgb, var(--ink) 6%, var(--panel-bg)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
html.aj-modern .aj-rs-trivia li[data-kind="debut"] .aj-rs-fact-covers img, html.aj-modern .aj-rs-trivia li[data-kind="final"] .aj-rs-fact-covers img { width: 78px; }
/* Enlaces bajo el sumario */
html.aj-modern .aj-rs-links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 16px 0 0; }
html.aj-modern .aj-rs-links .aj-link-btn { color: var(--sec); font-weight: 700; }
html.aj-modern .aj-rs-links .aj-link-btn .aj-icon { width: 18px; height: 18px; }
/* Los tomos de tu número */
html.aj-modern .aj-rs-collect[hidden] { display: none; }
/* El regalo (eBay) */
/* Comparte tu Jump: vista previa de la imagen vertical + botones */
html.aj-modern .aj-rs-end { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; justify-items: start; gap: 26px; margin: 0 0 24px; padding: 22px 26px; border-radius: 22px; background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); text-align: left; }
html.aj-modern .aj-rs-end-preview { display: block; width: 170px; }
html.aj-modern .aj-rs-end-preview img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; rotate: -3deg; box-shadow: 0 26px 40px -20px rgba(70, 25, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.06); transition: rotate 0.4s var(--spring); }
html.aj-modern .aj-rs-end-preview:hover img { rotate: 0deg; }
html.aj-modern .aj-rs-end-copy { display: grid; justify-items: start; gap: 10px; }
html.aj-modern .aj-rs-end-copy p { margin: 0; max-width: 52ch; color: var(--dark-grey); line-height: 1.55; }
html.aj-modern .aj-rs .aj-rs-end-h { margin: 0; padding: 0; background: none; box-shadow: none; color: var(--ink); font-family: var(--font-heading-comic); font-size: 2.2rem; font-weight: 400; letter-spacing: 0.02em; text-shadow: none; }
html.aj-modern .aj-rs .aj-rs-end-h::before { display: none; }
html.aj-modern .aj-rs-end .aj-rs-actions { justify-content: flex-start; }
html.aj-modern .aj-rs-end .aj-rs-adj { justify-content: flex-start; margin-top: 2px; }
/* Mientras tanto, en Japón */
html.aj-modern .aj-rs-week { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; padding: 18px 22px; border-radius: 22px; background: color-mix(in srgb, var(--sec-week) 7%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-week) 20%, transparent); color: var(--ink); text-decoration: none; }
html.aj-modern .aj-rs-week img { flex: none; width: 104px; height: auto; border-radius: 10px; rotate: 3deg; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.55); transition: rotate 0.4s var(--spring); }
html.aj-modern .aj-rs-week:hover img { rotate: 0deg; }
html.aj-modern .aj-rs-week-copy { display: grid; justify-items: start; gap: 4px; min-width: 0; }
html.aj-modern .aj-rs-week-copy small { display: inline-flex; align-items: center; gap: 6px; color: var(--sec-week); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
html.aj-modern .aj-rs-week-copy small .aj-icon { width: 16px; height: 16px; }
html.aj-modern .aj-rs-week-copy b { font-family: var(--font-heading-comic); font-size: 1.7rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .aj-rs-week-copy > span:not(.aj-rs-btn) { color: var(--dark-grey); font-size: 0.92rem; }
html.aj-modern .aj-rs-week-btn { margin-top: 6px; padding: 9px 16px; font-size: 0.86rem; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sec-week) 35%, transparent); }
html.aj-modern .aj-rs-week-btn .aj-icon { color: var(--sec-week); }
@media (max-width: 760px) {
  html.aj-modern .aj-rs-week-btn { padding: 8px 12px; font-size: 0.8rem; white-space: nowrap; }
  html.aj-modern .aj-rs-end { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px 16px; }
  html.aj-modern .aj-rs-end-preview { width: 150px; }
  html.aj-modern .aj-rs-end-copy { justify-items: center; }
  html.aj-modern .aj-rs-end .aj-rs-actions, html.aj-modern .aj-rs-end .aj-rs-adj { justify-content: center; }
  html.aj-modern .aj-rs-week { gap: 14px; padding: 14px 16px; }
  html.aj-modern .aj-rs-week img { width: 80px; }
  html.aj-modern .aj-rs-week-copy b { font-size: 1.35rem; }
}

/* Las Jump de tus cumpleaños: fila de portadas (deslizable en el móvil) y qué queda de tu número (2026-10-09) */
html.aj-modern .aj-rs-life-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 150px); justify-content: start; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
html.aj-modern .aj-rs-life-row::-webkit-scrollbar { display: none; }
html.aj-modern .aj-rs-life-card { display: grid; justify-items: center; gap: 2px; color: var(--ink); text-align: center; text-decoration: none; scroll-snap-align: start; }
html.aj-modern .aj-rs-life-cover { display: block; width: 100%; overflow: hidden; margin-bottom: 6px; aspect-ratio: 5 / 7; border-radius: 10px; background: var(--cover-placeholder); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.06); transition: translate 0.3s var(--ease), rotate 0.3s var(--ease); }
html.aj-modern .aj-rs-life-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-rs-life-card:hover .aj-rs-life-cover { translate: 0 -5px; rotate: -1.5deg; }
html.aj-modern .aj-rs-life-card b { font-family: var(--font-heading-comic); font-size: 1.35rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .aj-rs-life-card small { color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
html.aj-modern .aj-rs-life-card.is-now b { color: var(--sec); }
html.aj-modern .aj-rs-life-card.is-now .aj-rs-life-cover { box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--sec); }
html.aj-modern .aj-rs-left { display: flex; align-items: center; gap: 18px; margin: 18px 0 0; padding: 16px 20px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 20%, transparent); }
html.aj-modern .aj-rs-left-n { flex: none; display: grid; justify-items: center; line-height: 1; }
html.aj-modern .aj-rs-left-n b { color: var(--sec); font-family: var(--font-heading-comic); font-size: 3rem; font-weight: 400; }
html.aj-modern .aj-rs-left-n small { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; }
html.aj-modern .aj-rs-left p { margin: 0; color: var(--ink); font-size: 0.98rem; line-height: 1.55; }
html.aj-modern .aj-rs-left a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-rs-left a:hover { color: var(--sec); }
@media (max-width: 560px) {
  html.aj-modern .aj-rs-life-row { grid-auto-columns: 104px; gap: 10px; -webkit-mask-image: linear-gradient(90deg, black 86%, transparent); mask-image: linear-gradient(90deg, black 86%, transparent); }   /* que se note que hay más a la derecha */
  html.aj-modern .aj-rs-life-row.is-end { -webkit-mask-image: none; mask-image: none; }   /* al final, sin difuminar (la de «Hoy» se veía borrada) */
  html.aj-modern .aj-rs-left { gap: 14px; padding: 14px 16px; }
  html.aj-modern .aj-rs-left-n b { font-size: 2.4rem; }
  html.aj-modern .aj-rs-left p { font-size: 0.92rem; }
}

/* ═══ Resultado en cuatro actos (2026-10-09, Pol: «que impresione») ═══
   1 · La revelación: la portada sola y grande, como un trofeo (brillo al pasar, entrada animada) */
html.aj-modern .aj-rs-trophy { position: relative; display: grid; place-items: center; padding: 6px 0; }
html.aj-modern .aj-rs-trophy .aj-burst { inset: -25% -20%; }
html.aj-modern .aj-rs-trophy-cover { position: relative; display: block; width: min(68vw, 250px); padding: 0; border: 0; border-radius: 16px; background: none; cursor: zoom-in; rotate: -2deg; transition: rotate 0.5s var(--spring), translate 0.5s var(--spring); }
html.aj-modern .aj-rs-trophy-cover img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 16px; box-shadow: 0 40px 70px -30px rgba(70, 25, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.06); }
html.aj-modern .aj-rs-trophy-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 16px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%) no-repeat; background-size: 250% 100%; background-position: 120% 0; transition: background-position 0.9s var(--ease); pointer-events: none; }
html.aj-modern .aj-rs-trophy-cover:hover { rotate: 0deg; translate: 0 -6px; }
html.aj-modern .aj-rs-trophy-cover:hover::after { background-position: -40% 0; }
html.aj-modern .aj-rs-trophy-cover .cover-zoom-hint { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 75%, transparent); color: var(--panel-bg); font-size: 1.2rem; }
html.aj-modern.aj-revealed .aj-rs-trophy-cover { animation: ajTrophyIn 0.9s var(--spring) both; }
@keyframes ajTrophyIn { from { opacity: 0; scale: 0.82; rotate: 7deg; } }
@media (prefers-reduced-motion: reduce) { html.aj-modern.aj-revealed .aj-rs-trophy-cover { animation: none; } }
@media (min-width: 900px) {
  html.aj-modern .aj-rs-hero { grid-template-columns: 1.15fr 0.85fr; }
  html.aj-modern .aj-rs-trophy-cover { width: 330px; }
}
/* 2 · Así iban tus series: ficha teñida con el color de la serie, el capítulo en grande y su tomo */
html.aj-modern .aj-rs-collect[hidden] { display: none; }
/* «Así iban tus series» como cromos (2026-10-17): portada grande, medalla con el puesto en el sumario,
   nombre (→ ficha), capítulo y el tomo en Amazon como botón principal; «Ver su ficha» como enlace */
html.aj-modern .aj-rs-collect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: center; gap: 18px; }
html.aj-modern .aj-rs-vol { --tint: var(--c, var(--sec)); position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px 16px; border-radius: 22px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tint) 30%, var(--panel-bg)), color-mix(in srgb, var(--tint) 9%, var(--panel-bg)) 75%); color: var(--ink); text-align: center; transition: translate 0.3s var(--ease), box-shadow 0.3s var(--ease); }
html.aj-modern .aj-rs-vol:hover { translate: 0 -4px; box-shadow: 0 22px 34px -24px color-mix(in srgb, var(--tint) 80%, var(--ink)); }
html.aj-modern .aj-rs-vol a { text-decoration: none; }
html.aj-modern .aj-rs-vol a:not(.aj-rs-vol-btn) { color: inherit; }
html.aj-modern .aj-rs-vol-cover { position: relative; display: block; overflow: hidden; width: 100%; max-width: 168px; aspect-ratio: 5 / 7; border-radius: 12px; background: var(--cover-placeholder); box-shadow: 0 24px 30px -16px color-mix(in srgb, var(--tint) 70%, var(--ink)), 0 0 0 1px rgba(0, 0, 0, 0.06); rotate: -2deg; transition: rotate 0.35s var(--spring); }
html.aj-modern .aj-rs-vol:nth-child(even) .aj-rs-vol-cover { rotate: 2deg; }
html.aj-modern .aj-rs-vol:hover .aj-rs-vol-cover { rotate: 0deg; }
html.aj-modern .aj-rs-vol-cover img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-rs-vol .manga-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; color: var(--dark-grey); font-size: 0.74rem; font-weight: 700; text-align: center; }
html.aj-modern .aj-rs-vol-medal { position: absolute; top: 10px; left: 10px; z-index: 3; display: grid; place-items: center; align-content: center; width: 60px; height: 60px; border: 3px solid var(--panel-bg); border-radius: 50%; background: color-mix(in srgb, var(--tint) 78%, var(--ink)); color: #fff; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.55); rotate: -10deg; line-height: 1; }
html.aj-modern .aj-rs-vol-medal b { font-family: var(--font-heading-comic); font-size: 1.55rem; font-weight: 400; }
html.aj-modern .aj-rs-vol-medal small { font-size: 0.62rem; font-weight: 700; opacity: 0.9; }
html.aj-modern .aj-rs-vol-copy { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; }
html.aj-modern .aj-rs-vol-copy b { font-size: 1.04rem; line-height: 1.25; text-wrap: balance; }
html.aj-modern .aj-rs-vol-name b { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tint) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-rs-vol-name:hover b { text-decoration-color: currentColor; }
html.aj-modern .aj-rs-vol-ch { display: flex; align-items: baseline; justify-content: center; gap: 6px; color: color-mix(in srgb, var(--tint) 70%, var(--ink)); font-family: var(--font-heading-comic); font-size: 2.5rem; line-height: 1; }
html.aj-modern .aj-rs-vol-ch small { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-rs-vol-acts { display: grid; gap: 8px; width: 100%; margin-top: auto; padding-top: 6px; }   /* botones alineados abajo aunque el nombre ocupe 2 líneas */
html.aj-modern .aj-rs-vol-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; white-space: nowrap; border-radius: 999px; background: var(--ink); color: var(--panel-bg); font-size: 0.82rem; font-weight: 700; transition: background-color 0.2s; }
html.aj-modern .aj-rs-vol-sheet { justify-self: center; padding: 2px 4px; color: color-mix(in srgb, var(--tint) 70%, var(--ink)) !important; font-size: 0.84rem; font-weight: 700; }
html.aj-modern .aj-rs-vol-sheet:hover { text-decoration: underline; text-underline-offset: 3px; }
html.aj-modern .aj-rs-vol:hover .aj-rs-vol-btn { background: color-mix(in srgb, var(--tint) 70%, var(--ink)); }
html.aj-modern .aj-rs-left { margin: 0 0 30px; }
html.aj-modern .aj-rs-what { margin-bottom: 14px; }   /* «Qué queda» va pegado a «Lo que pasó» */
/* Sumario completo, plegado */
html.aj-modern details.aj-rs-fold { margin: 0 0 30px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern details.aj-rs-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
html.aj-modern details.aj-rs-fold > summary::-webkit-details-marker { display: none; }
html.aj-modern details.aj-rs-fold > summary span { color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.4rem; letter-spacing: 0.02em; }
html.aj-modern details.aj-rs-fold > summary span::after { content: ' ▾'; color: var(--sec); }
html.aj-modern details.aj-rs-fold[open] > summary span::after { content: ' ▴'; }
html.aj-modern details.aj-rs-fold > summary small { color: var(--text-muted); font-size: 0.86rem; font-weight: 600; }
html.aj-modern details.aj-rs-fold > :not(summary) { margin-left: 16px; margin-right: 16px; }
html.aj-modern details.aj-rs-fold .aj-rs-links { margin-bottom: 16px; }
/* 4 · El regalo, compacto (tras compartir) */
@media (max-width: 760px) {
  html.aj-modern .aj-rs-collect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.aj-modern .aj-rs-vol { padding: 16px 10px 12px; gap: 10px; border-radius: 18px; }
  html.aj-modern .aj-rs-vol-cover { max-width: 128px; }
  html.aj-modern .aj-rs-vol-medal { top: 6px; left: 6px; width: 48px; height: 48px; }
  html.aj-modern .aj-rs-vol-medal b { font-size: 1.22rem; }
  html.aj-modern .aj-rs-vol-copy b { font-size: 0.92rem; }
  html.aj-modern .aj-rs-vol-ch { font-size: 2rem; }
  html.aj-modern .aj-rs-vol-btn { gap: 5px; padding: 8px 4px; font-size: 0.71rem; }
  html.aj-modern details.aj-rs-fold > :not(summary) { margin-left: 10px; margin-right: 10px; }
}

/* El regalo (eBay), 2026-10-18: etiqueta de regalo (borde discontinuo, fondo liso, portada recta y pequeña,
   título en Rubik y botón oscuro). Antes (2026-10-09) repetía «Comparte tu Jump»: mismo panel rosado, imagen
   inclinada a la izquierda, título en Bangers y botón naranja, y Pol las veía casi iguales */
html.aj-modern .aj-rs-gift { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 24px; margin: 0 0 22px; padding: 22px 26px 26px; border: 2px dashed color-mix(in srgb, var(--sec) 45%, transparent); border-radius: 18px; background: var(--panel-bg); color: var(--ink); text-decoration: none; }
html.aj-modern .aj-rs-gift-art { position: relative; display: block; align-self: start; }
html.aj-modern .aj-rs-gift-art img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 12px 20px -14px rgba(0, 0, 0, 0.6); transition: translate 0.35s var(--ease); }
html.aj-modern .aj-rs-gift:hover .aj-rs-gift-art img { translate: 0 -4px; }
html.aj-modern .aj-rs-gift-tag { position: absolute; bottom: -11px; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--panel-bg); font-size: 0.74rem; font-weight: 700; white-space: nowrap; translate: -50% 0; }
html.aj-modern .aj-rs-gift-tag .aj-icon { width: 13px; height: 13px; color: var(--primary-highlight); }
html.aj-modern .aj-rs-gift-copy { display: grid; justify-items: start; gap: 7px; min-width: 0; }
html.aj-modern .aj-rs-gift-copy small { color: var(--sec); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
html.aj-modern .aj-rs-gift-copy b { font-size: 1.4rem; font-weight: 800; line-height: 1.2; text-wrap: balance; }
html.aj-modern .aj-rs-gift-copy > span:not(.aj-rs-btn) { max-width: 56ch; color: var(--dark-grey); font-size: 0.94rem; line-height: 1.5; }
html.aj-modern .aj-rs-gift-btn.is-primary { margin-top: 4px; background: var(--ink); box-shadow: none; color: var(--panel-bg); }
html.aj-modern .aj-rs-gift-btn .aj-icon:last-child { transition: translate 0.3s var(--ease); }
html.aj-modern .aj-rs-gift:hover .aj-rs-gift-btn .aj-icon:last-child { translate: 4px 0; }
html.aj-modern .aj-rs-gift-copy em { color: var(--text-muted); font-size: 0.72rem; font-style: normal; }
html.aj-modern .aj-rs-gift-long { font-style: normal; }
@media (max-width: 760px) {
  /* Móvil: la portada con el título al lado y, debajo y a todo el ancho, el texto, el botón y la nota (antes todo
     iba en una columna estrecha junto a la portada: 6-7 líneas de texto y el botón encajonado) */
  html.aj-modern .aj-rs-gift { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: 'art kick' 'art title' 'text text' 'btn btn' 'note note'; column-gap: 16px; row-gap: 6px; align-items: start; padding: 18px 16px 18px; }
  html.aj-modern .aj-rs-gift-copy { display: contents; }
  html.aj-modern .aj-rs-gift-art { grid-area: art; margin-bottom: 14px; }
  html.aj-modern .aj-rs-gift-copy small { grid-area: kick; align-self: end; margin-top: 6px; }
  html.aj-modern .aj-rs-gift-copy b { grid-area: title; font-size: 1.3rem; }
  html.aj-modern .aj-rs-gift-copy > span:not(.aj-rs-btn) { grid-area: text; max-width: none; margin-top: 4px; font-size: 0.9rem; }
  html.aj-modern .aj-rs-gift-btn { grid-area: btn; width: 100%; margin-top: 8px; padding: 13px 16px; }
  html.aj-modern .aj-rs-gift-copy em { grid-area: note; justify-self: center; text-align: center; }
  html.aj-modern .aj-rs-gift-tag { font-size: 0.7rem; padding: 2px 8px; }
}

/* /results ↔ /jump (2026-10-09): la ficha del número es la «wiki»; el resultado, lo tuyo */
html.aj-modern .aj-rs-wiki { display: flex; align-items: center; gap: 20px; margin: 0 0 30px; padding: 16px 22px 16px 16px; border-radius: 22px; background: color-mix(in srgb, var(--sec-week) 7%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-week) 20%, transparent); color: var(--ink); text-decoration: none; transition: translate 0.3s var(--ease); }
html.aj-modern .aj-rs-wiki:hover { translate: 0 -3px; }
html.aj-modern .aj-rs-wiki img { flex: none; width: 78px; height: auto; border-radius: 9px; rotate: -3deg; box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.55); }
html.aj-modern .aj-rs-wiki-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
html.aj-modern .aj-rs-wiki-copy small { display: inline-flex; align-items: center; gap: 6px; color: var(--sec-week); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
html.aj-modern .aj-rs-wiki-copy small .aj-icon { width: 16px; height: 16px; }
html.aj-modern .aj-rs-wiki-copy b { font-family: var(--font-heading-comic); font-size: 1.6rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .aj-rs-wiki-copy > span { color: var(--dark-grey); font-size: 0.92rem; line-height: 1.5; }
html.aj-modern .aj-rs-wiki-btn { flex: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sec-week) 35%, transparent); }
html.aj-modern .aj-rs-wiki-btn .aj-icon { color: var(--sec-week); }
@media (max-width: 760px) {
  html.aj-modern .aj-rs-wiki { flex-wrap: wrap; gap: 14px; padding: 14px; }
  html.aj-modern .aj-rs-wiki img { width: 64px; }
  html.aj-modern .aj-rs-wiki-copy { flex: 1 1 200px; }
  html.aj-modern .aj-rs-wiki-copy b { font-size: 1.35rem; }
  html.aj-modern .aj-rs-wiki-btn { flex: 1 1 100%; }
}
html.aj-modern .aj-rs-wiki.is-timeline { background: color-mix(in srgb, var(--sec-timeline) 7%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-timeline) 22%, transparent); }
html.aj-modern .aj-rs-wiki.is-timeline small { color: var(--sec-timeline); }
html.aj-modern .aj-rs-wiki.is-timeline .aj-rs-wiki-btn { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sec-timeline) 35%, transparent); }
html.aj-modern .aj-rs-wiki.is-timeline .aj-rs-wiki-btn .aj-icon { color: var(--sec-timeline); }
/* /jump · Otros números: la séptima tarjeta lleva a la cronología (en todos los tamaños, con el
   verde de su sección y la misma forma que las portadas) */
html.aj-modern .jump-arch-all .jump-arch-cover { position: relative; display: grid; align-content: end; justify-items: center; gap: 4px; overflow: hidden; aspect-ratio: 2 / 3; padding: 0 8px 12px; background: var(--jaa, var(--sec-timeline));    color: var(--panel-bg); text-align: center; box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--jaa, var(--sec-timeline)); transition: translate 0.3s var(--ease); }
html.aj-modern .jump-arch-all .jaa-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
html.aj-modern .jump-arch-all .jaa-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
html.aj-modern .jump-arch-all:hover .jaa-mosaic img { scale: 1.06; }
/* velo verde de abajo arriba para que el texto se lea sobre las portadas */
html.aj-modern .jump-arch-all .jump-arch-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--jaa, var(--sec-timeline)) 36%, color-mix(in srgb, var(--jaa, var(--sec-timeline)) 55%, transparent) 50%, transparent 64%); pointer-events: none; }
html.aj-modern .jump-arch-all .jaa-txt, html.aj-modern .jump-arch-all .jaa-go { position: relative; z-index: 1; }
html.aj-modern .jump-arch-all:hover .jump-arch-cover { translate: 0 -4px; }
html.aj-modern .jump-arch-all .jaa-txt { display: grid; font-size: 0.76rem; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
html.aj-modern .jump-arch-all .jaa-txt b { font-family: var(--font-heading-comic); font-weight: 400; font-size: 2.7rem; line-height: 0.9; }
html.aj-modern .jump-arch-all .jaa-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: var(--panel-bg); color: var(--jaa, var(--sec-timeline)); font-size: 0.72rem; font-weight: 700; }
html.aj-modern .jump-arch-all .jaa-go .aj-icon { width: 13px; height: 13px; transition: translate 0.3s var(--ease); }
html.aj-modern .jump-arch-all:hover .jaa-go .aj-icon { translate: 3px 0; }
html.aj-modern .jump-arch-all .jump-arch-meta { color: var(--jaa, var(--sec-timeline)); font-weight: 700; }

/* ═══ Ficha de manga /manga/{slug} (2026-10-09): cabecera común en azul con el abanico debut ·
   tomo 1 · último número, cifras, su historia en la Jump, puesto en la revista, personajes,
   preguntas, relacionadas ═══ */
/* la ficha conserva la clase de /debuts (fucsia): el azul de /manga tiene que ganarle */
html.aj-modern body.debuts-page.aj-sec-manga { --sec: var(--sec-manga); }
html.aj-modern .aj-sec-manga .aj-mf-hero .aj-kicker a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
html.aj-modern .aj-mf-hero .aj-kicker .is-live { background: var(--sec-timeline); color: var(--panel-bg); }
html.aj-modern .aj-mf-alt { margin: -2px 0 0; color: var(--text-muted); font-size: 0.95rem; font-weight: 600; }
html.aj-modern .aj-mf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
html.aj-modern .aj-mf-actions .aj-rs-btn { text-decoration: none; }
html.aj-modern .aj-mf-actions .aj-rs-btn.is-primary { background: var(--sec); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--sec) 80%, transparent); }
/* Abanico: debut · tomo 1 (delante, ampliable) · último número */
html.aj-modern .aj-mf-fan { position: relative; height: 340px; margin-top: 14px; }
html.aj-modern .aj-mf-fan .aj-burst { z-index: 0; }
html.aj-modern .aj-mf-fan-main, html.aj-modern .aj-mf-fan-side { position: absolute; left: 50%; display: block; padding: 0; border: 0; background: none; }
html.aj-modern .aj-mf-fan-main img, html.aj-modern .aj-mf-fan-side img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 26px 46px -22px rgba(10, 30, 70, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06); }
html.aj-modern .aj-mf-fan-main { z-index: 2; top: 18px; width: 176px; margin-left: -88px; cursor: zoom-in; transition: translate 0.4s var(--spring); }
html.aj-modern .aj-mf-fan-main:hover { translate: 0 -5px; }
html.aj-modern .aj-mf-fan-main .cover-zoom-hint { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 75%, transparent); color: var(--panel-bg); font-size: 1.1rem; }
html.aj-modern .aj-mf-fan-side { z-index: 1; top: 50px; width: 124px; transition: rotate 0.45s var(--spring), translate 0.45s var(--spring); }
html.aj-modern .aj-mf-fan-side.is-a { margin-left: -172px; rotate: -11deg; }
html.aj-modern .aj-mf-fan-side.is-b { margin-left: 48px; rotate: 11deg; }
html.aj-modern .aj-mf-fan-side.is-a:hover { rotate: -15deg; translate: -6px 0; }
html.aj-modern .aj-mf-fan-side.is-b:hover { rotate: 15deg; translate: 6px 0; }
html.aj-modern .aj-mf-fan .aj-tl-fan-years span.is-you { background: var(--sec); }
@media (min-width: 900px) {
  html.aj-modern .aj-mf-fan { height: 430px; margin: 0; }
  html.aj-modern .aj-mf-fan-main { top: 30px; width: 236px; margin-left: -118px; }
  html.aj-modern .aj-mf-fan-side { top: 76px; width: 168px; }
  html.aj-modern .aj-mf-fan-side.is-a { margin-left: -238px; }
  html.aj-modern .aj-mf-fan-side.is-b { margin-left: 70px; }
}
/* Cifras y de qué va */
html.aj-modern .aj-mf-stats { margin-bottom: 30px; }
html.aj-modern .aj-mf-about { margin-bottom: 30px; }
html.aj-modern .aj-mf-about .aj-in-p { max-width: 78ch; }
html.aj-modern .aj-mf-about .aj-in-p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 50%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-mf-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
html.aj-modern .aj-mf-genres span { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sec) 10%, var(--panel-bg)); color: color-mix(in srgb, var(--sec) 80%, var(--ink)); font-size: 0.82rem; font-weight: 700; }
/* Su historia en la Jump: línea vertical con el debut, cada saga y el final o esta semana */
html.aj-modern .aj-mf-story { margin-bottom: 30px; }
html.aj-modern .aj-mf-steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html.aj-modern .aj-mf-steps li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-mf-steps li.is-edge { background: color-mix(in srgb, var(--sec) 11%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 25%, transparent); }
html.aj-modern .aj-mf-steps li.is-now { background: color-mix(in srgb, var(--sec-timeline) 10%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-timeline) 28%, transparent); }
html.aj-modern .aj-mf-step-cover { position: relative; flex: none; display: block; overflow: hidden; width: 64px; aspect-ratio: 2 / 3; border-radius: 8px; background: color-mix(in srgb, var(--sec) 18%, var(--panel-bg)); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.5); }
html.aj-modern .aj-mf-step-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-mf-step-n { position: absolute; left: 4px; top: 4px; z-index: 1; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--sec); color: var(--panel-bg); font-size: 0.72rem; font-weight: 800; }
html.aj-modern .aj-mf-step-copy { display: grid; gap: 2px; min-width: 0; }
html.aj-modern .aj-mf-step-copy small { color: var(--sec); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-mf-steps li.is-now .aj-mf-step-copy small { color: var(--sec-timeline); }
html.aj-modern .aj-mf-step-copy b { font-size: 1rem; line-height: 1.25; }
html.aj-modern .aj-mf-step-copy > span { color: var(--dark-grey); font-size: 0.84rem; }
html.aj-modern .aj-mf-step-copy a { color: var(--dark-grey); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-soft); text-underline-offset: 2px; }
html.aj-modern .aj-mf-step-copy a:hover { color: var(--sec); }
html.aj-modern .aj-mf-step-copy > a { justify-self: start; margin-top: 2px; color: var(--sec); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
html.aj-modern .aj-mf-step-copy > a.aj-mf-step-buy { display: inline-flex; align-items: center; gap: 5px; color: var(--dark-grey); font-size: 0.78rem; }
html.aj-modern .aj-mf-step-buy .aj-icon { width: 14px; height: 14px; }
/* Puesto en la revista */
html.aj-modern .aj-mf-toc { margin-bottom: 30px; }
html.aj-modern .aj-mf-toc-box { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 20px; border-radius: 20px; background: color-mix(in srgb, var(--sec) 5%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-mf-toc .tc-line { stroke: var(--sec); }
html.aj-modern .aj-mf-toc .tc-dot { fill: var(--sec); }
html.aj-modern .aj-mf-toc .tc-color { fill: var(--panel-bg); stroke: var(--sec); }
html.aj-modern .aj-mf-toc .tc-gap { stroke: var(--sec); }
html.aj-modern .aj-mf-toc-chart .tc-spark { width: 100%; height: auto; }
html.aj-modern .aj-mf-toc-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 26px; margin: 0; }
html.aj-modern .aj-mf-toc-stats dt { color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-mf-toc-stats dd { margin: 0; color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.9rem; line-height: 1; }
html.aj-modern .aj-mf-toc-stats dd small { color: var(--text-muted); font-family: var(--font-body); font-size: 0.5em; font-weight: 700; }
html.aj-modern .aj-mf-toc-stats dd.is-up { color: var(--sec-timeline); }
html.aj-modern .aj-mf-toc-stats dd.is-down { color: var(--sec-week); }
html.aj-modern .aj-mf-more { margin: 12px 0 0; }
html.aj-modern .aj-mf-more .aj-link-btn { color: var(--sec); font-weight: 700; }
/* Personajes */
html.aj-modern .aj-mf-chars { margin-bottom: 30px; }
html.aj-modern .aj-mf-chars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
html.aj-modern .aj-mf-chars-grid li { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 14px 10px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 6%, var(--panel-bg)); text-align: center; }
html.aj-modern .aj-mf-chars-grid img { width: 92px; height: 92px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 3px var(--panel-bg), 0 0 0 5px color-mix(in srgb, var(--sec) 40%, transparent); }
html.aj-modern .aj-mf-chars-grid b { font-size: 0.94rem; line-height: 1.2; }
html.aj-modern .aj-mf-chars-grid small { color: var(--text-muted); font-size: 0.78rem; }
html.aj-modern .aj-mf-bday { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--dark-grey); font-size: 0.8rem; font-weight: 600; }
html.aj-modern .aj-mf-bday .aj-icon { width: 14px; height: 14px; color: var(--header-bg); }
html.aj-modern .aj-mf-chars-grid a { margin-top: 4px; color: var(--sec); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
html.aj-modern .aj-mf-chars-grid a:hover { text-decoration: underline; }
/* Calendario de cumpleaños de la ficha (manga.php, #cumples) */
html.aj-modern .aj-mf-bdays { margin-bottom: 30px; }
html.aj-modern .aj-mf-bdays-more { margin-top: 8px; }
html.aj-modern .aj-mf-bdays-more summary { width: max-content; margin-bottom: 8px; color: var(--sec); font-size: 0.88rem; font-weight: 700; cursor: pointer; }
/* «Su historia en la Jump» por sagas y arcos (manga.php, data/arcs.json): línea de tiempo vertical */
html.aj-modern .aj-mf-tl { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 26px; list-style: none; }
html.aj-modern .aj-mf-tl::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 8px; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--sec) 35%, transparent); }
html.aj-modern .aj-mf-tl > li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 16%, transparent); }
html.aj-modern .aj-mf-tl > li::before { content: ''; position: absolute; top: 22px; left: -24px; width: 13px; height: 13px; border-radius: 50%; background: var(--panel-bg); box-shadow: 0 0 0 3px var(--sec); }
html.aj-modern .aj-mf-tl > li.is-now::before { background: var(--sec); }
html.aj-modern .aj-mf-tl > li.aj-mf-tl-edge { background: color-mix(in srgb, var(--sec) 7%, var(--panel-bg)); }
html.aj-modern .aj-mf-tl-cover img { display: block; width: 64px; height: 90px; border-radius: 6px; object-fit: cover; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45); }
html.aj-modern .aj-mf-tl-copy { display: grid; justify-items: start; gap: 3px; min-width: 0; }
html.aj-modern .aj-mf-tl-copy > small { color: var(--sec); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
html.aj-modern .aj-mf-tl-copy > b { font-family: var(--font-heading-comic); font-size: 1.35rem; font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; }
html.aj-modern .aj-mf-tl-copy > span { color: var(--dark-grey); font-size: 0.88rem; }
html.aj-modern .aj-mf-tl-copy > a, html.aj-modern .aj-mf-tl-links a { color: var(--sec); font-size: 0.84rem; font-weight: 700; text-decoration: none; }
html.aj-modern .aj-mf-tl-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
html.aj-modern .aj-mf-tl-links .aj-mf-step-buy { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
html.aj-modern .aj-mf-tl-links .aj-icon { width: 14px; height: 14px; }
html.aj-modern .aj-mf-tl-copy > b a { color: inherit; text-decoration: none; }
html.aj-modern .aj-mf-tl-copy > b a:hover { color: var(--sec); }
html.aj-modern .aj-mf-arcs { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; padding: 0; list-style: none; }
html.aj-modern .aj-mf-arc a { display: inline-block; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sec) 9%, var(--panel-bg)); color: var(--ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
html.aj-modern .aj-mf-arc a:hover { background: color-mix(in srgb, var(--sec) 18%, var(--panel-bg)); }
html.aj-modern .aj-mf-arc.is-now a { background: var(--sec); color: var(--panel-bg); }
html.aj-modern .aj-mf-arc em { font-style: normal; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; opacity: 0.85; }
html.aj-modern .aj-mf-tl > li.is-mid { display: none; }
html.aj-modern .aj-mf-tl.is-open > li.is-mid { display: grid; }
html.aj-modern .aj-mf-tl > li.aj-mf-tl-fold { display: block; padding: 0; background: none; box-shadow: none; }
html.aj-modern .aj-mf-tl > li.aj-mf-tl-fold::before { background: var(--panel-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec) 45%, transparent); top: 10px; }
html.aj-modern .aj-mf-tl-fold button { padding: 6px 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--sec) 10%, var(--panel-bg)); color: var(--sec); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) { html.aj-modern .aj-mf-tl { padding-left: 20px; } html.aj-modern .aj-mf-tl::before { left: 5px; } html.aj-modern .aj-mf-tl > li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 10px 12px; } html.aj-modern .aj-mf-tl > li::before { left: -21px; } html.aj-modern .aj-mf-tl-cover img { width: 52px; height: 73px; } html.aj-modern .aj-mf-tl-copy > b { font-size: 1.2rem; } }
/* Calendario de cumpleaños por meses (manga.php, #cumples) */
html.aj-modern .aj-mf-cal-next { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 0 0 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: color-mix(in srgb, var(--sec) 9%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 22%, transparent); }
html.aj-modern .aj-mf-cal-next img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 3px var(--panel-bg), 0 0 0 5px var(--sec); }
html.aj-modern .aj-mf-cal-next > span { display: grid; gap: 3px; font-size: 1rem; line-height: 1.4; }
html.aj-modern .aj-mf-cal-next .aj-icon { display: inline; width: 17px; height: 17px; vertical-align: -3px; color: var(--sec); }
html.aj-modern .aj-mf-cal-next b { color: var(--sec); }
html.aj-modern .aj-mf-cal-next small { color: var(--text-muted); font-size: 0.84rem; }
html.aj-modern .aj-mf-cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-items: start; }
html.aj-modern .aj-mf-cal-month { padding: 0 0 8px; overflow: hidden; border-radius: 16px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 18%, transparent); }
html.aj-modern .aj-mf-cal-month h3 { margin: 0 0 4px; padding: 8px 12px 6px; background: color-mix(in srgb, var(--sec) 12%, var(--panel-bg)); color: var(--sec); font-family: var(--font-heading-comic); font-size: 1.2rem; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; }
html.aj-modern .aj-mf-cal-month.is-now h3 { background: var(--sec); color: var(--panel-bg); }
html.aj-modern .aj-mf-cal-month ol { margin: 0; padding: 0; list-style: none; }
html.aj-modern .aj-mf-cal-month li { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 10px; scroll-margin: 120px; }
html.aj-modern .aj-mf-cal-day { color: var(--text-muted); font-size: 0.82rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
html.aj-modern .aj-mf-cal-month img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; }
html.aj-modern .aj-mf-cal-month b { display: -webkit-box; overflow: hidden; font-size: 0.86rem; font-weight: 600; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
html.aj-modern .aj-mf-cal-month li.is-past { opacity: 0.45; }
html.aj-modern .aj-mf-cal-month li.is-main b { font-weight: 800; }
html.aj-modern .aj-mf-cal-month li.is-main img { box-shadow: 0 0 0 2px var(--sec); }
html.aj-modern .aj-mf-cal-month li.is-today, html.aj-modern .aj-mf-cal-month li.is-hit { background: color-mix(in srgb, var(--sec) 14%, var(--panel-bg)); }
@media (max-width: 900px) { html.aj-modern .aj-mf-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { html.aj-modern .aj-mf-cal { gap: 8px; } html.aj-modern .aj-mf-cal-month li { grid-template-columns: 18px 28px minmax(0, 1fr); gap: 6px; padding: 4px 8px; } html.aj-modern .aj-mf-cal-month img { width: 28px; height: 28px; } html.aj-modern .aj-mf-cal-month b { font-size: 0.8rem; } html.aj-modern .aj-mf-cal-next img { width: 52px; height: 52px; } }
html.aj-modern .aj-mf-bdays-list li.is-hit, html.aj-modern .aj-mf-chars-grid li.is-hit { box-shadow: 0 0 0 2px var(--sec); background: color-mix(in srgb, var(--sec) 14%, var(--panel-bg)); }
html.aj-modern .aj-mf-chars-grid li { scroll-margin: 120px; }
/* Preguntas y relacionadas */
html.aj-modern .aj-mf-faq { margin: 0 0 30px; }
html.aj-modern .aj-mf-related { margin-bottom: 10px; }
html.aj-modern .aj-mf-related .aj-hub-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 760px) {
  html.aj-modern .aj-mf-steps { grid-template-columns: 1fr; gap: 8px; }
  html.aj-modern .aj-mf-toc-box { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  html.aj-modern .aj-mf-toc-stats { grid-template-columns: repeat(4, auto); gap: 8px 14px; }
  html.aj-modern .aj-mf-toc-stats dd { font-size: 1.5rem; }
  html.aj-modern .aj-mf-chars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.aj-modern .aj-mf-actions { justify-content: center; width: 100%; }
  html.aj-modern .aj-mf-actions .aj-rs-btn { flex: 1 1 100%; }
}

/* Fichas de manga: el color propio de cada serie (data/manga_colors.json) en los rayos y el halo del abanico */
html.aj-modern .aj-mf-hero[style] .aj-burst { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0deg 5deg, transparent 5deg 13deg); }
html.aj-modern .aj-mf-fan::before { content: ""; position: absolute; left: 50%; top: 48%; z-index: 0; width: min(340px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--sec)) 55%, transparent), transparent 68%); translate: -50% -50%; pointer-events: none; }

/* ═══ Fichas de mangaka /mangaka/{slug} (2026-10-09): misma base que las de manga (.aj-mf-*) ═══ */
html.aj-modern body.debuts-page.aj-sec-mangaka { --sec: var(--sec-mangaka); }   /* .debuts-page lo dejaba en fucsia */
html.aj-modern .aj-mk-ffan .aj-mf-fan-main { cursor: default; }
html.aj-modern .aj-mf-fan.aj-mk-ffan { height: 286px; }   /* la foto (4:5) es más baja que una portada */
@media (min-width: 900px) { html.aj-modern .aj-mf-fan.aj-mk-ffan { height: 372px; } }
html.aj-modern .aj-mk-ffan .aj-mf-fan-main.is-photo img { aspect-ratio: 4 / 5; object-position: 50% 18%; background: var(--panel-bg); }
@media (min-width: 901px) { html.aj-modern .aj-mk-stats { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
html.aj-modern .aj-mk-work-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 10px; background: color-mix(in srgb, var(--c, var(--sec)) 25%, var(--panel-bg)); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.55); transition: translate 0.3s var(--spring); }
html.aj-modern a.aj-mk-work-cover:hover { translate: 0 -3px; }
html.aj-modern .aj-mk-work-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-mk-work-cover .aj-hub-ph { font-size: 0.95rem; }

/* Fichas de manga y mangaka: entrada del abanico (las portadas salen de detrás de la central).
   'backwards' para que al acabar mande el estilo normal y siga funcionando el :hover */
html.aj-modern .aj-mf-fan-side.is-a { animation: ajMfInA 0.9s var(--ease) 0.15s backwards; }
html.aj-modern .aj-mf-fan-side.is-b { animation: ajMfInB 0.9s var(--ease) 0.15s backwards; }
html.aj-modern .aj-mf-fan-main { animation: ajMfInMain 0.7s var(--spring) backwards; }   /* sin opacidad: es el LCP */
html.aj-modern .aj-mf-fan .aj-tl-fan-years { animation: ajMfFade 0.5s var(--ease) 0.7s backwards; }
@keyframes ajMfInA { from { rotate: 0deg; translate: 70px 14px; opacity: 0; } }
@keyframes ajMfInB { from { rotate: 0deg; translate: -70px 14px; opacity: 0; } }
@keyframes ajMfInMain { from { scale: 0.92; } }
@keyframes ajMfFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.aj-modern .aj-mf-fan-side, html.aj-modern .aj-mf-fan-main, html.aj-modern .aj-mf-fan .aj-tl-fan-years { animation: none; }
}
/* Mangaka: la foto como una copia en papel, y su nombre en japonés en vertical detrás */
html.aj-modern .aj-mk-ffan .aj-mf-fan-main.is-photo { padding: 8px; border-radius: 8px; background: var(--panel-bg); rotate: -2deg; box-shadow: 0 26px 46px -22px rgba(10, 30, 70, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06); }
html.aj-modern .aj-mk-ffan .aj-mf-fan-main.is-photo img { border-radius: 4px; box-shadow: none; }
html.aj-modern .aj-mk-tate { display: none; }
@media (min-width: 900px) {
  html.aj-modern .aj-mk-tate { position: absolute; top: 18px; right: -58px; z-index: 0; display: block; color: color-mix(in srgb, var(--sec) 20%, transparent); font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; writing-mode: vertical-rl; pointer-events: none; animation: ajMfFade 1.2s var(--ease) 0.3s backwards; }
}
/* Mangaka: en cada serie, el tomo 1 delante y detrás uno del medio y el último */
html.aj-modern .aj-mk-stack { position: relative; display: block; padding: 4px 22px 0; }
html.aj-modern .aj-mk-stack .aj-mk-work-cover { z-index: 2; }
html.aj-modern .aj-mk-back { position: absolute; top: 12px; width: 66%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.5); transition: rotate 0.4s var(--spring), translate 0.4s var(--spring); }
html.aj-modern .aj-mk-back.is-l { left: 0; z-index: 0; rotate: -9deg; }
html.aj-modern .aj-mk-back.is-r { right: 0; z-index: 1; rotate: 9deg; }
@media (max-width: 599px) {
  html.aj-modern .aj-mk-stack { padding: 2px 13px 0; }
  html.aj-modern .aj-mk-back { top: 8px; }
}
html.aj-modern .aj-mk-lw { font-style: normal; }
@media (max-width: 599px) {
  html.aj-modern .aj-mk-lw { display: none; }
}

/* ═══ Mangaka · «Sus series en la Jump»: una ficha grande por serie con su propio color ═══ */
html.aj-modern .aj-mk-works-sec { margin-bottom: 34px; }
html.aj-modern .aj-mk-series { display: grid; gap: 22px; }
html.aj-modern .aj-mk-serie { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); overflow: hidden; border-radius: 26px; background: var(--panel-bg); box-shadow: 0 24px 50px -34px rgba(20, 10, 60, 0.45), inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-mk-serie.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
html.aj-modern .aj-mk-serie.is-flip .aj-mk-serie-art { order: 2; }
html.aj-modern .aj-mk-serie.is-now { box-shadow: 0 24px 50px -34px rgba(20, 10, 60, 0.45), inset 0 0 0 2px color-mix(in srgb, var(--sec-timeline) 35%, transparent); }
html.aj-modern .aj-mk-serie-art { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 340px; overflow: hidden; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c, var(--sec)) 50%, var(--panel-bg)), color-mix(in srgb, var(--c, var(--sec)) 88%, var(--ink))); }
html.aj-modern .aj-mk-serie-art .aj-burst { inset: -30%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--panel-bg) 34%, transparent) 0deg 5deg, transparent 5deg 13deg); }
html.aj-modern .aj-mk-serie-y { position: absolute; left: 18px; bottom: 10px; z-index: 0; display: grid; color: color-mix(in srgb, var(--panel-bg) 60%, transparent); font-family: var(--font-heading-comic); font-size: 4.4rem; line-height: 0.85; letter-spacing: 0.02em; pointer-events: none; }
html.aj-modern .aj-mk-serie-y i { font-style: normal; }
html.aj-modern .aj-mk-serie.is-flip .aj-mk-serie-y { right: 18px; left: auto; text-align: right; }
html.aj-modern .aj-mk-serie-art .aj-mk-stack { position: relative; z-index: 1; width: 236px; padding: 0 38px; }
html.aj-modern .aj-mk-serie-art .aj-mk-work-cover { border-radius: 12px; box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.6); }
html.aj-modern .aj-mk-serie-art .aj-mk-back { top: 18px; width: 62%; border-radius: 10px; box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.55); }
html.aj-modern .aj-mk-serie:hover .aj-mk-back.is-l { rotate: -15deg; translate: -10px 0; }
html.aj-modern .aj-mk-serie:hover .aj-mk-back.is-r { rotate: 15deg; translate: 10px 0; }
html.aj-modern .aj-mk-serie:hover .aj-mk-work-cover { translate: 0 -4px; }
html.aj-modern .aj-mk-serie-body { display: grid; align-content: center; gap: 12px; min-width: 0; padding: 28px 32px; }
html.aj-modern .aj-mk-serie-kick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
html.aj-modern .aj-mk-serie-kick span { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--sec) 10%, var(--panel-bg)); color: color-mix(in srgb, var(--sec) 80%, var(--ink)); font-size: 0.76rem; font-weight: 700; }
html.aj-modern .aj-mk-serie-kick .is-live { background: var(--sec-timeline); color: var(--panel-bg); }
html.aj-modern .aj-mk-serie-body h3 { margin: 0; color: var(--ink); font-family: var(--font-heading-comic); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.02em; }
html.aj-modern .aj-mk-serie-body h3 a { color: inherit; text-decoration: none; background: linear-gradient(color-mix(in srgb, var(--c, var(--accent-color)) 55%, transparent), color-mix(in srgb, var(--c, var(--accent-color)) 55%, transparent)) 0 88% / 100% 0.3em no-repeat; transition: background-size 0.3s var(--ease); }
html.aj-modern .aj-mk-serie-body h3 a:hover { background-size: 100% 0.9em; }
html.aj-modern .aj-mk-serie-log { margin: 0; color: var(--ink); font-size: 1.04rem; font-weight: 500; line-height: 1.55; }
html.aj-modern .aj-mk-serie-nums { display: flex; flex-wrap: wrap; gap: 8px; }
html.aj-modern .aj-mk-serie-nums div { min-width: 96px; padding: 10px 14px 9px; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--sec)) 13%, var(--panel-bg)); }
html.aj-modern .aj-mk-serie-nums b { display: block; color: var(--sec); font-family: var(--font-heading-comic); font-size: 1.75rem; font-weight: 400; line-height: 1; }
html.aj-modern .aj-mk-serie-nums span { display: block; max-width: 14ch; margin-top: 3px; color: var(--dark-grey); font-size: 0.74rem; font-weight: 600; line-height: 1.25; }
html.aj-modern .aj-mk-serie-body .aj-mf-genres { margin: 0; }
html.aj-modern .aj-mk-serie-run { margin: 0; padding-top: 12px; border-top: 1px dashed var(--border-soft); color: var(--dark-grey); font-size: 0.88rem; line-height: 1.6; }
html.aj-modern .aj-mk-serie-run a.faq-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sec) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.aj-modern .aj-mk-serie-run a.faq-link:hover { color: var(--sec); }
html.aj-modern .aj-mk-serie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; }
html.aj-modern .aj-mk-serie-actions .aj-rs-btn { text-decoration: none; }
html.aj-modern .aj-mk-serie-actions .aj-rs-btn.is-primary { background: var(--sec); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--sec) 80%, transparent); }
@media (max-width: 760px) {
  html.aj-modern .aj-mk-serie, html.aj-modern .aj-mk-serie.is-flip { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  html.aj-modern .aj-mk-serie.is-flip .aj-mk-serie-art { order: 0; }
  html.aj-modern .aj-mk-serie-art { min-height: 268px; }
  html.aj-modern .aj-mk-serie-art .aj-mk-stack { width: 200px; padding: 0 32px; }
  html.aj-modern .aj-mk-serie-y, html.aj-modern .aj-mk-serie.is-flip .aj-mk-serie-y { right: auto; left: 14px; font-size: 3.2rem; text-align: left; }
  html.aj-modern .aj-mk-serie-body { gap: 10px; padding: 18px 18px 20px; }
  html.aj-modern .aj-mk-serie-log { font-size: 0.98rem; }
  html.aj-modern .aj-mk-serie-nums div { flex: 1 1 0; min-width: 0; padding: 9px 10px 8px; }
  html.aj-modern .aj-mk-serie-nums b { font-size: 1.5rem; }
  html.aj-modern .aj-mk-serie-actions { flex-wrap: nowrap; gap: 8px; }
  html.aj-modern .aj-mk-serie-actions .aj-rs-btn { padding: 11px 16px; font-size: 0.9rem; white-space: nowrap; }
}
/* Última tarjeta de «Más de…»: vuelta al índice de mangakas (como «Verlos todos» de /jump) */
html.aj-modern .aj-mk-all .aj-mk-all-cover { position: relative; display: grid; align-content: end; justify-items: center; gap: 4px; padding: 0 8px 12px; background: var(--sec); color: var(--panel-bg); }
html.aj-modern .aj-mk-all-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
html.aj-modern .aj-hub-cover .aj-mk-all-mosaic img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); }
html.aj-modern .aj-mk-all:hover .aj-mk-all-mosaic img { scale: 1.06; }
html.aj-modern .aj-mk-all .aj-mk-all-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sec) 34%, color-mix(in srgb, var(--sec) 55%, transparent) 52%, transparent 72%); pointer-events: none; }
html.aj-modern .aj-mk-all-txt, html.aj-modern .aj-mk-all-go { position: relative; z-index: 1; }
html.aj-modern .aj-mk-all-txt { display: grid; justify-items: center; font-size: 0.8rem; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
html.aj-modern .aj-mk-all-txt b { font-family: var(--font-heading-comic); font-size: 2.7rem; font-weight: 400; line-height: 0.9; }
html.aj-modern .aj-mk-all-go { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--panel-bg); color: var(--sec); font-size: 0.72rem; font-weight: 700; }
html.aj-modern .aj-mk-all-go .aj-icon { width: 13px; height: 13px; transition: translate 0.3s var(--ease); }
html.aj-modern .aj-mk-all:hover .aj-mk-all-go .aj-icon { translate: 3px 0; }

html.aj-modern .aj-mk-serie-kick .is-other { background: color-mix(in srgb, var(--ink) 8%, var(--panel-bg)); color: var(--dark-grey); }

/* ═══ 404 (2026-10-09): color de la marca y sello de «agotado» sobre la portada central ═══ */
html.aj-modern body.debuts-page.aj-sec-404 { --sec: var(--sec-home); }
html.aj-modern .aj-404-stamp { position: absolute; top: 112px; left: 50%; z-index: 3; display: grid; justify-items: center; padding: 6px 16px 4px; border: 4px solid var(--sec-week); border-radius: 10px; background: color-mix(in srgb, var(--panel-bg) 78%, transparent); color: var(--sec-week); font-family: var(--font-heading-comic); font-size: 2.6rem; line-height: 0.9; letter-spacing: 0.04em; text-transform: uppercase; translate: -50% 0; rotate: -12deg; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45); animation: ajStampIn 0.5s var(--spring) 0.7s backwards; }
html.aj-modern .aj-404-stamp small { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.3em; }
@keyframes ajStampIn { from { opacity: 0; scale: 1.8; } }
@media (min-width: 900px) { html.aj-modern .aj-404-stamp { top: 150px; font-size: 3.2rem; } }
@media (prefers-reduced-motion: reduce) { html.aj-modern .aj-404-stamp { animation: none; } }

html.aj-modern .aj-404-explore { margin-bottom: 8px; }
html.aj-modern .aj-404-sug { margin-bottom: 26px; }
html.aj-modern .aj-404-sug .aj-hub-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); }
html.aj-modern .aj-404-sec { margin: 0 0 22px; font-size: 1.15rem; font-weight: 600; }
html.aj-modern .aj-404-sec a { color: var(--sec); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ═══ Fichas de manga · v3 (2026-10-09) ═══ */
/* «De qué va» con la tarjeta de su autor (o autores) al lado */
@media (min-width: 900px) { html.aj-modern .aj-mf-about-body.has-author { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } }
html.aj-modern .aj-mf-authors { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 900px) { html.aj-modern .aj-mf-authors { margin-top: 0; } }
html.aj-modern .aj-mf-author { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--sec-mangaka) 7%, var(--panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-mangaka) 18%, transparent); color: var(--ink); text-decoration: none; transition: translate 0.25s var(--ease), box-shadow 0.25s; }
html.aj-modern .aj-mf-author:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-mangaka) 40%, transparent), 0 14px 26px -18px color-mix(in srgb, var(--sec-mangaka) 70%, transparent); }
html.aj-modern .aj-mf-author-img { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; background: color-mix(in srgb, var(--sec-mangaka) 15%, var(--panel-bg)); }
html.aj-modern .aj-mf-author-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
html.aj-modern .aj-mf-author-copy { display: grid; gap: 2px; min-width: 0; }
html.aj-modern .aj-mf-author-copy small { color: var(--sec-mangaka); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-mf-author-copy b { font-size: 1.05rem; line-height: 1.2; }
html.aj-modern .aj-mf-author-copy span { color: var(--dark-grey); font-size: 0.8rem; line-height: 1.35; }
html.aj-modern .aj-mf-author-copy i { margin-top: 3px; color: var(--sec-mangaka); font-size: 0.8rem; font-style: normal; font-weight: 700; }
/* Puesto en la revista: las cuatro cifras en fila y la gráfica a todo el ancho debajo */
html.aj-modern .aj-mf-toc-box { grid-template-columns: minmax(0, 1fr); gap: 14px; }
html.aj-modern .aj-mf-toc-stats { display: flex; flex-wrap: wrap; gap: 10px 40px; }
html.aj-modern .aj-mf-toc-chart .tc-spark { display: block; width: 100%; height: auto; max-height: 220px; }
@media (max-width: 600px) { html.aj-modern .aj-mf-toc-stats { gap: 8px 20px; } }
html.aj-modern .aj-mf-toc-chart { position: relative; padding-left: 34px; }
html.aj-modern .aj-mf-toc-ax { position: absolute; left: 0; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; }
html.aj-modern .aj-mf-toc-ax.is-top { top: 0; }
html.aj-modern .aj-mf-toc-ax.is-bot { bottom: 0; }

/* ═══ Fichas de manga · «Su historia en la Jump» v2: barra de sagas + fila deslizable (2026-10-09) ═══ */
html.aj-modern .aj-mf-ribbon { position: relative; height: 34px; margin: 4px 0 30px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--sec)) 10%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-mf-rb-seg { position: absolute; top: 4px; bottom: 4px; display: grid; place-items: center; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--sec)) 55%, var(--panel-bg)); box-shadow: 0 0 0 1.5px var(--panel-bg); color: var(--ink); font-size: 0.72rem; font-weight: 800; text-decoration: none; transition: background 0.2s, color 0.2s, translate 0.2s var(--ease); }
html.aj-modern .aj-mf-rb-seg:nth-of-type(even) { background: color-mix(in srgb, var(--c, var(--sec)) 85%, var(--ink) 15%); color: var(--panel-bg); }
html.aj-modern .aj-mf-rb-seg:hover, html.aj-modern .aj-mf-rb-seg:focus-visible { z-index: 1; background: var(--sec); color: var(--panel-bg); translate: 0 -2px; }
html.aj-modern .aj-mf-rb-y { position: absolute; top: calc(100% + 5px); color: var(--text-muted); font-size: 0.74rem; font-weight: 700; }
html.aj-modern .aj-mf-rb-y.is-a { left: 6px; }
html.aj-modern .aj-mf-rb-y.is-b { right: 6px; }

html.aj-modern .aj-mf-strip { position: relative; }
html.aj-modern .aj-mf-steps { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 2px; padding: 4px 2px 16px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 48px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 48px), transparent); }
html.aj-modern .aj-mf-strip.is-end .aj-mf-steps { -webkit-mask-image: none; mask-image: none; }
html.aj-modern .aj-mf-steps li { flex: 0 0 178px; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 10px 12px; scroll-snap-align: start; }
html.aj-modern .aj-mf-steps li.is-hit { box-shadow: inset 0 0 0 2px var(--sec); }
html.aj-modern .aj-mf-steps .aj-mf-step-cover { width: 100%; border-radius: 10px; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, 0.6); }
html.aj-modern .aj-mf-steps .aj-mf-step-n { left: 8px; top: 8px; min-width: 28px; height: 28px; font-size: 0.85rem; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5); }
html.aj-modern .aj-mf-steps .aj-mf-step-copy b { font-size: 1.02rem; }
html.aj-modern .aj-mf-strip-btn { position: absolute; top: 38%; z-index: 2; display: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--panel-bg); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--border-soft); color: var(--sec); cursor: pointer; transition: opacity 0.2s, scale 0.2s var(--spring); }
html.aj-modern .aj-mf-strip-btn:hover { scale: 1.08; }
html.aj-modern .aj-mf-strip-btn[disabled] { opacity: 0; pointer-events: none; }
html.aj-modern .aj-mf-strip-btn.is-prev { left: -16px; }
html.aj-modern .aj-mf-strip-btn.is-prev .aj-icon { rotate: 180deg; }
html.aj-modern .aj-mf-strip-btn.is-next { right: -16px; }
@media (hover: hover) and (min-width: 900px) { html.aj-modern .aj-mf-strip-btn { display: grid; } }
@media (max-width: 600px) {
  html.aj-modern .aj-mf-steps li { flex-basis: 150px; }
  html.aj-modern .aj-mf-ribbon { height: 28px; }
  html.aj-modern .aj-mf-rb-seg.is-narrow span { display: none; }
}
/* Personajes: anillo con el color de la serie y nombre japonés en una línea */
html.aj-modern .aj-mf-chars-grid img { box-shadow: 0 0 0 3px var(--panel-bg), 0 0 0 6px color-mix(in srgb, var(--c, var(--sec)) 65%, transparent); }
html.aj-modern .aj-mf-chars-grid small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ Fichas de manga · v4 (2026-10-09): cabecera con su portada, cifras con icono, cromos ═══ */
/* Cabecera: el tomo 1 desenfocado de fondo, en el color de la serie, y el título grande */
html.aj-modern .aj-mf-hero-bg { position: absolute; inset: -60px; z-index: -2; background: center / cover no-repeat; filter: blur(46px) saturate(1.35); opacity: 0.42; pointer-events: none; }
html.aj-modern .aj-mf-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--panel-bg) 22%, color-mix(in srgb, var(--panel-bg) 55%, transparent) 52%, transparent 80%); }
@media (max-width: 899px) { html.aj-modern .aj-mf-hero-bg::after { background: linear-gradient(180deg, var(--panel-bg) 8%, color-mix(in srgb, var(--panel-bg) 60%, transparent) 50%, transparent 85%); } }
html.aj-modern .aj-page-hero.aj-mf-hero h1 { font-size: clamp(3rem, 7vw, 5.4rem); }
html.aj-modern .aj-page-hero.aj-mf-hero.is-long h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
/* Cifras: icono en el color de la serie */
html.aj-modern .aj-mf-stats > div { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; padding-top: 14px; background: color-mix(in srgb, var(--c, var(--sec)) 11%, var(--panel-bg)); }
html.aj-modern .aj-mf-stat-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: var(--panel-bg); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c, var(--sec)) 80%, transparent); color: var(--sec); }
html.aj-modern .aj-mf-stat-ico .aj-icon { width: 17px; height: 17px; }
/* Gráfica del sumario más baja */
html.aj-modern .aj-mf-toc-chart .tc-spark { max-height: 170px; }
/* Personajes: banda con el color de la serie y cromos */
html.aj-modern .aj-mf-chars { padding: 22px 22px 16px; border-radius: 26px; background: color-mix(in srgb, var(--c, var(--sec)) 10%, var(--panel-bg)); }
html.aj-modern .aj-mf-chars-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
html.aj-modern .aj-mf-chars-grid li.aj-mf-cromo { position: relative; display: block; overflow: hidden; padding: 0; aspect-ratio: 3 / 4.3; border-radius: 16px; background: color-mix(in srgb, var(--c, var(--sec)) 30%, var(--panel-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--sec)) 70%, var(--panel-bg)), 0 18px 30px -18px rgba(0, 0, 0, 0.55); text-align: left; transition: translate 0.3s var(--spring), rotate 0.3s var(--spring); }
html.aj-modern .aj-mf-chars-grid li.aj-mf-cromo:hover { translate: 0 -5px; rotate: -1.2deg; }
html.aj-modern .aj-mf-cromo-img { position: absolute; inset: 0; }
html.aj-modern .aj-mf-chars-grid .aj-mf-cromo-img img { width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 50% 15%; }
html.aj-modern .aj-mf-cromo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 40%, transparent) 30%, transparent 52%); pointer-events: none; }
html.aj-modern .aj-mf-cromo-txt { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: grid; gap: 1px; color: var(--panel-bg); }
html.aj-modern .aj-mf-cromo:has(.aj-mf-cromo-go) .aj-mf-cromo-txt { bottom: 30px; }
html.aj-modern .aj-mf-chars-grid .aj-mf-cromo-txt b { font-family: var(--font-heading-comic); font-size: 1.2rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }
html.aj-modern .aj-mf-chars-grid .aj-mf-cromo-txt small { overflow: hidden; color: color-mix(in srgb, var(--panel-bg) 75%, transparent); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
html.aj-modern .aj-mf-cromo-bday { position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--panel-bg); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6); color: var(--ink); font-size: 0.72rem; font-weight: 700; }
html.aj-modern .aj-mf-cromo-bday .aj-icon { width: 13px; height: 13px; color: var(--header-bg); }
html.aj-modern .aj-mf-bd-l { display: none; }   /* la carta, con el día y el mes; el año va en «Su Jump de 1989 →» (con el año se partía en dos líneas) */
html.aj-modern .aj-mf-chars-grid a.aj-mf-cromo-go { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; margin: 0; color: var(--accent-color); font-size: 0.74rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
html.aj-modern .aj-mf-chars-grid a.aj-mf-cromo-go::before { content: ""; position: absolute; inset: -400px -10px -9px; }   /* toda la carta es pulsable */
@media (max-width: 600px) {
  html.aj-modern .aj-mf-chars { margin-inline: -4px; padding: 18px 14px 12px; }
  /* Los personajes, en tres columnas (antes una fila deslizable en la que cabían justo dos cartas y no se
     notaba que había seis): todas a la vista, con letra más pequeña y la fecha abajo */
  html.aj-modern .aj-mf-chars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.aj-modern .aj-mf-chars-grid li.aj-mf-cromo { border-radius: 12px; }
  html.aj-modern .aj-mf-chars-grid .aj-mf-cromo-txt { left: 7px; right: 7px; bottom: 26px; }
  html.aj-modern .aj-mf-cromo:has(.aj-mf-cromo-go) .aj-mf-cromo-txt { bottom: 26px; }
  html.aj-modern .aj-mf-chars-grid .aj-mf-cromo-txt b { font-size: 0.92rem; }
  html.aj-modern .aj-mf-chars-grid .aj-mf-cromo-txt small { display: none; }
  html.aj-modern .aj-mf-cromo-bday { top: auto; right: auto; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 6px; font-size: 0.62rem; white-space: nowrap; }
  html.aj-modern .aj-mf-cromo-bday .aj-icon { display: none; }   /* «11 de noviembre» en una línea */
  html.aj-modern .aj-mf-chars-grid a.aj-mf-cromo-go { font-size: 0; }   /* toda la carta sigue siendo pulsable (::before) */
  /* «Si te gusta…»: fila deslizable en vez de tres filas de tarjetas enormes */
  html.aj-modern .aj-mf-related .aj-hub-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 2px 2px 12px; }
  html.aj-modern .aj-mf-related .aj-hub-card { flex: 0 0 138px; scroll-snap-align: start; }
}

/* ═══ Tarjetas de «Otros números» (/jump) para todo el sitio (2026-10-09): «Si te gusta…» en las
   fichas de manga, «Más de…» en las de mangaka y «¿Buscabas…?» en la 404 usan las mismas ═══ */
html.aj-modern .jump-arch-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
html.aj-modern .jump-arch-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border: 1px solid var(--border-soft); background: linear-gradient(135deg, var(--cover-placeholder), var(--cover-placeholder-2)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); transition: transform 0.15s ease, box-shadow 0.15s ease; }
html.aj-modern .jump-arch-card:hover .jump-arch-cover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22); }
html.aj-modern .jump-arch-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .jump-arch-card.is-photo .jump-arch-cover > img { object-position: 50% 18%; }
html.aj-modern .jump-arch-meta { color: var(--text-muted); font-size: 0.74rem; font-weight: 600; line-height: 1.3; text-align: center; }
html.aj-modern .jump-arch-meta b { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 0.82rem; font-weight: 700; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* en dos líneas, sin cortar «Demon Slayer: Kimetsu…» */
html.aj-modern .jump-arch-all.is-sec { --jaa: var(--sec); }
html.aj-modern .jump-arch-card.is-photo .jaa-mosaic img { object-position: 50% 18%; filter: grayscale(1); }
html.aj-modern .aj-hub .jump-archive-grid { margin-top: 4px; }
@media (max-width: 560px) { html.aj-modern .aj-mf .jump-archive-grid, html.aj-modern .aj-mk .jump-archive-grid { --aj-strip-bleed: 14px; } }
/* Número sobre la portada (antes solo en el <style> de jump.php) y «Esta semana» arriba */
html.aj-modern .jump-arch-num { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 78%, transparent); color: var(--panel-bg); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.3px; backdrop-filter: blur(2px); }
html.aj-modern .jump-arch-cover.noimg { display: flex; align-items: center; justify-content: center; }
html.aj-modern .jump-arch-cover.noimg .jump-arch-num { position: static; background: none; color: var(--text-muted); font-size: 1.15rem; }
html.aj-modern .jump-arch-cover .aj-hub-now { position: absolute; top: 6px; bottom: auto; left: 6px; }

/* ═══ Ficha de manga · «Su puesto en la revista» v2 (2026-10-09) ═══ */
html.aj-modern .aj-mf-rank { display: grid; gap: 16px; margin-bottom: 14px; }
@media (min-width: 900px) { html.aj-modern .aj-mf-rank { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
html.aj-modern .aj-mf-rank-hero { display: grid; align-content: center; gap: 12px; padding: 20px 22px; border-radius: 22px; background: color-mix(in srgb, var(--c, var(--sec)) 11%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .aj-mf-rank-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
html.aj-modern .aj-mf-rank-big b { color: var(--sec); font-family: var(--font-heading-comic); font-size: clamp(4rem, 9vw, 5.6rem); font-weight: 400; line-height: 0.85; }
html.aj-modern .aj-mf-rank-big b small { font-size: 0.42em; }
html.aj-modern .aj-mf-rank-big span { color: var(--ink); font-size: 1.05rem; font-weight: 700; }
html.aj-modern .aj-mf-rank-trend { margin: 0; color: var(--dark-grey); font-size: 1rem; font-weight: 800; }
html.aj-modern .aj-mf-rank-trend small { font-size: 0.8rem; font-weight: 600; }
html.aj-modern .aj-mf-rank-trend.is-up { color: var(--sec-timeline); }
html.aj-modern .aj-mf-rank-trend.is-down { color: var(--sec-week); }
html.aj-modern .aj-mf-rank-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; }
html.aj-modern .aj-mf-rank-facts > div { display: grid; gap: 1px; padding: 10px 12px; border-radius: 14px; background: var(--panel-bg); box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.35); }
html.aj-modern .aj-mf-rank-facts dt { color: var(--text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-mf-rank-facts dd { margin: 0; color: var(--ink); font-family: var(--font-heading-comic); font-size: 1.7rem; line-height: 1; }
html.aj-modern .aj-mf-rank-facts small { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
/* El ranking alrededor */
html.aj-modern .aj-mf-rank-near { display: grid; align-content: center; gap: 6px; margin: 0; padding: 14px; border-radius: 22px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--border-soft); list-style: none; }
html.aj-modern .aj-mf-near-head { order: -1; display: flex; justify-content: flex-end; padding: 0 8px 2px; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html.aj-modern .aj-mf-near-row { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background 0.2s; }
html.aj-modern a.aj-mf-near-row:hover { background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); }
html.aj-modern .aj-mf-rank-near li.is-me .aj-mf-near-row { background: color-mix(in srgb, var(--c, var(--sec)) 20%, var(--panel-bg)); box-shadow: inset 0 0 0 2px var(--sec); }
html.aj-modern .aj-mf-near-pos { color: var(--text-muted); font-family: var(--font-heading-comic); font-size: 1.35rem; text-align: center; }
html.aj-modern li.is-me .aj-mf-near-pos { color: var(--sec); }
html.aj-modern .aj-mf-near-img { display: grid; place-items: center; overflow: hidden; width: 32px; aspect-ratio: 2 / 3; border-radius: 6px; background: var(--nc, color-mix(in srgb, var(--sec) 30%, var(--panel-bg))); color: var(--panel-bg); font-weight: 800; }
html.aj-modern .aj-mf-near-img img { width: 100%; height: 100%; object-fit: cover; }
html.aj-modern .aj-mf-near-name { overflow: hidden; font-size: 0.92rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
html.aj-modern .aj-mf-near-avg { color: var(--dark-grey); font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Gráfica grande */
html.aj-modern .aj-mf-toc-chart { padding: 14px 12px 8px; padding-left: 12px; border-radius: 22px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--border-soft); }
html.aj-modern .tch { display: block; width: 100%; height: auto; overflow: visible; }
html.aj-modern .tch-grid { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 3 4; }
html.aj-modern .tch-grid.is-top { stroke: color-mix(in srgb, var(--sec) 35%, transparent); stroke-dasharray: none; }
html.aj-modern .tch-y, html.aj-modern .tch-x { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; font-weight: 700; }
html.aj-modern .tch-y { text-anchor: end; }
html.aj-modern .tch-x { text-anchor: middle; }
html.aj-modern .tch-f0 { stop-color: color-mix(in srgb, var(--c, var(--sec)) 55%, transparent); }
html.aj-modern .tch-f1 { stop-color: color-mix(in srgb, var(--c, var(--sec)) 4%, transparent); }
html.aj-modern .tch-line { fill: none; stroke: var(--sec); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
html.aj-modern .tch-gap { fill: none; stroke: var(--sec); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: 0.6; }
html.aj-modern .tch-dot { fill: var(--sec); stroke: var(--panel-bg); stroke-width: 1.5; }
html.aj-modern .tch-dot.is-color { fill: var(--panel-bg); stroke: var(--sec); stroke-width: 2.4; }
html.aj-modern .tch-dot.is-lead { fill: var(--accent-color); stroke: var(--ink); stroke-width: 2; }
html.aj-modern .tch-hit rect { fill: transparent; }
html.aj-modern .tch-hit line { stroke: var(--sec); stroke-width: 1; opacity: 0; }
html.aj-modern .tch-hit:hover line { opacity: 0.45; }
html.aj-modern .aj-mf-chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0 40px; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; }
html.aj-modern .aj-mf-chart-key .is-dot { background: var(--sec); }
html.aj-modern .aj-mf-chart-key .is-color { background: var(--panel-bg); box-shadow: inset 0 0 0 2px var(--sec); }
html.aj-modern .aj-mf-chart-key .is-lead { background: var(--accent-color); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 600px) {
  html.aj-modern .aj-mf-rank-hero { padding: 16px; }
  html.aj-modern .aj-mf-toc-chart { padding: 10px 4px 6px; }
  html.aj-modern .aj-mf-chart-key { margin-left: 8px; }
}
html.aj-modern .aj-mf-toc small.o { font-family: var(--font-body); font-size: 0.42em; font-weight: 800; letter-spacing: 0; }
html.aj-modern .aj-mf-rank-facts dd small.o { font-size: 0.5em; }
html.aj-modern .tch.is-narrow { display: none; }
@media (max-width: 600px) { html.aj-modern .tch.is-wide { display: none; } html.aj-modern .tch.is-narrow { display: block; } }
html.aj-modern .tch-area { opacity: 0.9; }

/* Ficha de manga · puesto en la revista: pestañas de año (cada una con su puesto de ese año) */
html.aj-modern .aj-mf-years { display: flex; gap: 8px; margin: 2px 0 16px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: thin; }
html.aj-modern .aj-mf-years button { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 70px; padding: 8px 12px 7px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--sec)) 9%, var(--panel-bg)); box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--ink); font: inherit; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, translate 0.2s var(--ease); }
html.aj-modern .aj-mf-years button:hover { translate: 0 -2px; }
html.aj-modern .aj-mf-years button span { color: var(--text-muted); font-size: 0.74rem; font-weight: 700; }
html.aj-modern .aj-mf-years button b { color: var(--sec); font-family: var(--font-heading-comic); font-size: 1.45rem; font-weight: 400; line-height: 1; }
html.aj-modern .aj-mf-years button.is-on { background: var(--sec); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--sec) 80%, transparent); }
html.aj-modern .aj-mf-years button.is-on span, html.aj-modern .aj-mf-years button.is-on b { color: var(--panel-bg); }

/* Puesto en la revista · repaso de estilo (2026-10-09) */
/* Años como minigráfica: barra más alta = mejor puesto ese año */
html.aj-modern .aj-mf-years { align-items: end; gap: 6px; margin: 4px 0 18px; padding: 4px 2px 6px; }
html.aj-modern .aj-mf-years button { display: grid; grid-template-rows: 92px auto; justify-items: stretch; gap: 6px; min-width: 58px; padding: 6px 6px 7px; border-radius: 14px; background: transparent; box-shadow: none; }
html.aj-modern .aj-mf-years button:hover { background: color-mix(in srgb, var(--c, var(--sec)) 9%, var(--panel-bg)); }
html.aj-modern .aj-mf-yb { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 92px; }
html.aj-modern .aj-mf-yb-bar { position: relative; display: flex; justify-content: center; width: 100%; max-width: 46px; height: var(--h); min-height: 30px; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--sec) 22%, var(--panel-bg)); transition: background 0.2s, height 0.4s var(--ease); }
html.aj-modern .aj-mf-years button b { margin-top: 5px; color: var(--ink); font-size: 1.25rem; }
html.aj-modern .aj-mf-yb-y { color: var(--text-muted); font-size: 0.76rem; font-weight: 700; }
html.aj-modern .aj-mf-years button.is-few .aj-mf-yb-bar { background: var(--border-soft); }
html.aj-modern .aj-mf-years button.is-on { background: color-mix(in srgb, var(--sec) 10%, var(--panel-bg)); box-shadow: inset 0 0 0 2px var(--sec); }
html.aj-modern .aj-mf-years button.is-on .aj-mf-yb-bar { background: var(--sec); }
html.aj-modern .aj-mf-years button.is-on b { color: var(--panel-bg); }
html.aj-modern .aj-mf-years button.is-on span.aj-mf-yb-y { color: var(--sec); }
/* La caja del puesto: arriba, sin hueco */
html.aj-modern .aj-mf-rank-hero { align-content: start; }
html.aj-modern .aj-mf-rank-trend { display: inline-block; justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--panel-bg); font-size: 0.92rem; }
/* Leyenda: punto y texto juntos */
html.aj-modern .aj-mf-chart-key { gap: 6px 16px; }
html.aj-modern .aj-mf-chart-key > span { display: inline-flex; align-items: center; gap: 6px; }
html.aj-modern .aj-mf-chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
html.aj-modern .aj-mf-chart-key .is-dot { background: var(--sec); }
html.aj-modern .aj-mf-chart-key .is-color { background: var(--panel-bg); box-shadow: inset 0 0 0 2px var(--sec); }
html.aj-modern .aj-mf-chart-key .is-lead { background: var(--accent-color); box-shadow: inset 0 0 0 2px var(--ink); }
html.aj-modern .aj-mf-chart-key .aj-mf-chart-hint { margin-left: auto; font-style: italic; }
/* Aviso de la gráfica */
html.aj-modern .aj-mf-toc-chart { position: relative; }
html.aj-modern .aj-tch-tip { position: absolute; z-index: 3; padding: 5px 10px; border-radius: 10px; background: var(--ink); color: var(--panel-bg); font-size: 0.78rem; font-weight: 700; white-space: nowrap; pointer-events: none; translate: -50% calc(-100% - 12px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5); }
html.aj-modern .tch-hit.is-on line { opacity: 0.55; }
@media (max-width: 600px) {
  html.aj-modern .aj-mf-rank-near li.is-far { display: none; }
  html.aj-modern .aj-mf-years button { min-width: 50px; grid-template-rows: 76px auto; }
  html.aj-modern .aj-mf-yb { height: 76px; }
  html.aj-modern .aj-mf-chart-key .aj-mf-chart-hint { margin-left: 0; }
}
/* Puesto en la revista: la frase que lo cuenta, rótulos y leyenda del punteado */
html.aj-modern .aj-mf-rank-say { margin: -2px 0 0; color: var(--ink); font-size: 1.06rem; font-weight: 600; line-height: 1.45; }
html.aj-modern .aj-mf-years-cap { margin: 0 0 2px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
html.aj-modern .aj-mf-near-head { justify-content: space-between; align-items: baseline; }
html.aj-modern .aj-mf-near-head b { color: var(--ink); font-size: 0.8rem; letter-spacing: 0.02em; }
html.aj-modern .aj-mf-chart-key .is-gap { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--sec); opacity: 0.7; }

/* «Su historia en la Jump» · repaso (2026-10-09): barra con nombres y escala de años */
html.aj-modern .aj-mf-rb-cap { margin: 0 0 6px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
html.aj-modern .aj-mf-ribbon { height: 42px; margin: 0 0 34px; background: color-mix(in srgb, var(--sec) 6%, var(--panel-bg)); }
html.aj-modern .aj-mf-rb-seg { top: 5px; bottom: 5px; padding: 0 8px; background: color-mix(in srgb, var(--sec) 16%, var(--panel-bg)); color: var(--ink); }
html.aj-modern .aj-mf-rb-seg:nth-of-type(even) { background: color-mix(in srgb, var(--sec) 32%, var(--panel-bg)); color: var(--ink); }
html.aj-modern .aj-mf-rb-seg:hover, html.aj-modern .aj-mf-rb-seg:focus-visible, html.aj-modern .aj-mf-rb-seg.is-on { background: var(--sec); color: var(--panel-bg); }
html.aj-modern .aj-mf-rb-seg .t { overflow: hidden; font-size: 0.74rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
html.aj-modern .aj-mf-rb-seg.is-wide .n { display: none; }
html.aj-modern .aj-mf-rb-y.is-tick { translate: -50% 0; font-weight: 600; }
@media (max-width: 760px) {
  html.aj-modern .aj-mf-rb-seg.is-wide .n { display: inline; }
  html.aj-modern .aj-mf-rb-seg .t { display: none; }
  html.aj-modern .aj-mf-ribbon { height: 34px; }
  html.aj-modern .aj-mf-rb-y.is-tick:nth-of-type(even) { display: none; }
}
/* Tarjetas de la historia: misma altura de texto en todas, enlace al pie */
html.aj-modern .aj-mf-steps li { align-self: stretch; }
html.aj-modern .aj-mf-steps .aj-mf-step-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; }
html.aj-modern .aj-mf-steps li { min-width: 0; }
html.aj-modern .aj-mf-steps li[id^="mf-saga-"] .aj-mf-step-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* «121 números» en una línea; las de debut y fin, con fecha larga, sí parten */
html.aj-modern .aj-mf-steps .aj-mf-step-copy > a, html.aj-modern .aj-mf-steps .aj-mf-step-copy > a.aj-mf-step-buy { margin-top: auto; padding-top: 6px; }
html.aj-modern .aj-mf-steps .aj-mf-step-copy b { min-height: 2.5em; }


/* ═══ Firefox (2026-10-09) · desplazamiento lento ════════════════════════════════════════════
   Medido con Firefox 150 frente a Chrome: el diseño nuevo bajaba el scroll a ~22-28 fotogramas por
   segundo (Chrome ~130; el diseño viejo, ~62). No hay un culpable sino la suma de capas decorativas
   que Firefox repinta en cada fotograma. Aquí solo se aligera lo que más cuesta y menos se nota:
   fondo de página sin «fixed», rayos quietos y sin máscara, sin cristal esmerilado (los fondos ya
   son casi opacos) y la portada 3D de la portada plana hasta que se pasa el ratón.
   Resultado medido: fichas de autor 22 → 42 fps, de manga 24 → 39, /jump 26 → 36, portada 27 → 37. */
@supports (-moz-appearance: none) {
  html.aj-modern { scroll-behavior: auto; }
  html.aj-modern body { background-attachment: scroll; }
  html.aj-modern .aj-burst { animation: none; -webkit-mask-image: none; mask-image: none; opacity: 0.55; }
  html.aj-modern *, html.aj-modern *::before, html.aj-modern *::after { backdrop-filter: none !important; }
  html.aj-modern .aj-cover-card { will-change: auto; }
  html.aj-modern .aj-cover-card:not(:hover) { transform: none; }
}

/* Cumpleaños de personajes por mes (birthdays.php) */
html.aj-modern body.bdays-page { --sec: var(--sec-debuts); }   /* usa la maqueta de .debuts-page (columna centrada) */
html.aj-modern main.aj-bd { display: block; padding: 18px 20px 20px; }   /* .panel centra el contenido en columna: aquí, a todo lo ancho */
html.aj-modern .aj-bd-months, html.aj-modern .aj-bd-list { width: 100%; max-width: 100%; min-width: 0; }
@media (max-width: 560px) { html.aj-modern main.aj-bd { padding: 14px 10px 16px; } html.aj-modern .aj-bd-months a { flex: 0 0 56px; } }
html.aj-modern .aj-bd-fan { display: flex; align-items: center; justify-content: center; padding: 10px; }
html.aj-modern .aj-bd-fan img { width: 120px; height: 120px; margin-left: -26px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 5px var(--panel-bg), 0 0 0 8px var(--sec), 0 18px 28px -16px rgba(0, 0, 0, 0.5); }
html.aj-modern .aj-bd-fan img:first-child { margin-left: 0; }
html.aj-modern .aj-bd-fan img:nth-child(2) { width: 150px; height: 150px; z-index: 1; }
html.aj-modern .aj-bd-months { display: flex; gap: 6px; margin: 0 0 18px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: none; }
html.aj-modern .aj-bd-months a { display: grid; flex: 1 0 64px; justify-items: center; gap: 1px; padding: 8px 6px; border-radius: 14px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 20%, transparent); color: var(--ink); font-weight: 800; text-decoration: none; text-transform: capitalize; }
html.aj-modern .aj-bd-months a small { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
html.aj-modern .aj-bd-months a[aria-current] { background: var(--sec); color: var(--panel-bg); }
html.aj-modern .aj-bd-months a[aria-current] small { color: color-mix(in srgb, var(--panel-bg) 80%, transparent); }
html.aj-modern .aj-bd-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-items: start; }
html.aj-modern .aj-bd-day { padding: 0 0 8px; overflow: hidden; border-radius: 16px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 16%, transparent); scroll-margin: 110px; }
html.aj-modern .aj-bd-day.is-today { box-shadow: 0 0 0 3px var(--sec); }
html.aj-modern .aj-bd-day h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; padding: 8px 14px; background: color-mix(in srgb, var(--sec) 10%, var(--panel-bg)); font-size: 1rem; }
html.aj-modern .aj-bd-day h2::before { display: none; }
html.aj-modern .aj-bd-day h2 b { color: var(--sec); font-family: var(--font-heading-comic); font-size: 1.7rem; font-weight: 400; line-height: 1; }
html.aj-modern .aj-bd-day h2 span { color: var(--dark-grey); font-size: 0.86rem; font-weight: 600; }
html.aj-modern .aj-bd-day.is-today h2 { background: var(--sec); }
html.aj-modern .aj-bd-day.is-today h2 b, html.aj-modern .aj-bd-day.is-today h2 span { color: var(--panel-bg); }
html.aj-modern .aj-bd-day ul { display: grid; gap: 2px; margin: 0; padding: 0 6px; list-style: none; }
html.aj-modern .aj-bd-day li a { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
html.aj-modern .aj-bd-day li a:hover { background: color-mix(in srgb, var(--sec) 8%, var(--panel-bg)); }
html.aj-modern .aj-bd-day img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
html.aj-modern .aj-bd-day li span { display: grid; min-width: 0; }
html.aj-modern .aj-bd-day li b { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
html.aj-modern .aj-bd-day li small { overflow: hidden; color: var(--text-muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
html.aj-modern .aj-mf-cal-month h3 a { color: inherit; text-decoration: none; }
html.aj-modern .aj-mf-cal-month h3 a::after { content: ' →'; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; opacity: 0.7; }
@media (max-width: 560px) { html.aj-modern .aj-bd-fan img { width: 84px; height: 84px; } html.aj-modern .aj-bd-fan img:nth-child(2) { width: 104px; height: 104px; } html.aj-modern .aj-bd-days { grid-template-columns: 1fr; } }