/* ============================================================
   Detail Page — Redesign v5 (theme-driven, clases dp-*)
   Común a PC y móvil. Layout de 2 columnas en desktop/css,
   pila compacta en mobile/css.
   ============================================================ */

[data-page-rendered="detail"],
#detail-modal{
  --d-accent: rgb(var(--mml-a, 99,102,241));
  --d-accent-2: rgb(var(--mml-a2, 139,92,246));
  --d-accent-soft: rgba(var(--mml-a, 99,102,241), .18);
  --d-accent-veil: rgba(var(--mml-a, 99,102,241), .09);
  --d-accent-glow: rgba(var(--mml-a, 99,102,241), .55);
  --d-accent-line: rgba(var(--mml-a, 99,102,241), .38);
  --d-accent2-soft: rgba(var(--mml-a2, 139,92,246), .16);
  --d-bg: var(--mml-bg, #05060e);
  --d-surf: var(--mml-surf, #0c1120);
  --d-elev: var(--mml-elev, #0d1224);
  --d-line: rgba(255,255,255,.08);
  --d-line-strong: rgba(255,255,255,.16);
  --d-ink: #f5f3ef;
  --d-ink-soft: #d8d5cf;
  --d-ink-mute: #a8a29e;
  --d-ink-dim: #78716c;
  --d-radius-s: calc(4px * var(--mml-radius-k, 1));
  --d-radius-m: calc(10px * var(--mml-radius-k, 1));
  --d-radius-l: calc(18px * var(--mml-radius-k, 1));
  --d-radius-xl: calc(26px * var(--mml-radius-k, 1));
  --d-glass-a: var(--mml-glass-alpha, 1);
  --d-glass-b: var(--mml-glass-blur, 0px);
  --d-font: var(--mml-font, 'Inter','Segoe UI',system-ui,sans-serif);
  --d-surface: color-mix(in oklab, var(--d-surf) calc(var(--d-glass-a) * 100%), transparent);
  --d-surface-2: color-mix(in oklab, var(--d-elev) calc(var(--d-glass-a) * 100%), transparent);
  font-family: var(--d-font);
}

.syn-clamped{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.syn-open{ display:block; }

/* ============================================================
   CONTENEDOR
   ============================================================ */
.dp-wrap{
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(10px, 2.2vw, 40px) 80px;
  color: var(--d-ink-soft);
}

/* ============================================================
   HERO
   ============================================================ */
.dp-hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-bg) 100%);
  border-radius: 0 0 var(--d-radius-xl) var(--d-radius-xl);
  border: 1px solid var(--d-line);
  border-top: none;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.85);
  min-height: clamp(280px, 34vw, 580px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(var(--d-glass-b));
  -webkit-backdrop-filter: blur(var(--d-glass-b));
}
.dp-hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:6;
  background: linear-gradient(90deg, var(--d-accent) 0%, var(--d-accent-2) 55%, var(--d-accent) 100%);
}
.dp-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(.55) contrast(1.1) brightness(.5);
  transform: scale(1.06);
}
.dp-hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.1) 0%, color-mix(in oklab, var(--d-bg) 70%, transparent) 55%, var(--d-bg) 100%),
    linear-gradient(90deg, var(--d-accent-veil), transparent 45%, var(--d-accent2-soft));
}
.dp-back{
  position: relative; z-index: 2;
  align-self: flex-start;
  margin: 20px 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--d-line-strong);
  color: var(--d-ink);
  border-radius: var(--d-radius-s);
  padding: 9px 16px;
  font-family: var(--d-font);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: blur(var(--d-glass-b));
}
.dp-back:hover{ background: var(--d-accent-soft); border-color: var(--d-accent-line); color: var(--d-accent); }

.dp-hero-row{
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: flex-end;
  padding: 20px clamp(14px, 2vw, 32px) clamp(28px, 3vw, 44px);
}
.dp-cover{
  width: clamp(130px, 16vw, 280px);
  height: clamp(182px, 22.4vw, 392px);
  flex-shrink: 0;
  border-radius: var(--d-radius-m);
  overflow: hidden;
  border: 1px solid var(--d-line-strong);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.95),
    -14px 14px 0 -1px var(--d-accent-glow),
    -14px 14px 0 0 rgba(var(--mml-a2, 139,92,246), .35);
  transform: translateY(28px) rotate(-1.2deg);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.dp-cover:hover{ transform: translateY(24px) rotate(0); }
.dp-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.dp-cover-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20%; }

.dp-hero-info{ flex:1; min-width:240px; padding-bottom:4px; }
.dp-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.dp-badges span, .dp-origin{
  font-family: var(--d-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--d-line-strong) !important;
  color: var(--d-ink) !important;
  padding: 5px 10px !important;
  border-radius: var(--d-radius-s) !important;
}
.dp-hero-info h1{
  font-family: var(--d-font);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -.028em;
  color: var(--d-ink);
  text-wrap: balance;
  margin: 0;
}
.dp-hero-info h1::first-letter{ color: var(--d-accent); font-style: italic; }
.dp-score{ color: var(--d-ink-mute); font-size: 12px; margin: 10px 0 0; }
.dp-score b{ color: var(--d-accent-2); font-weight: 700; font-size: 16px; }

.dp-actions{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.dp-actions #star-display *{ color: var(--d-accent-2) !important; fill: var(--d-accent-2) !important; }
.dp-fav{
  background: transparent;
  border: 1px solid var(--d-line-strong);
  color: var(--d-ink-soft);
  border-radius: var(--d-radius-s);
  padding: 11px 18px;
  font-family: var(--d-font);
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  transition: all .2s ease;
}
.dp-fav:hover, .dp-fav.is-fav{
  background: var(--d-accent2-soft);
  border-color: rgba(var(--mml-a2, 139,92,246), .5);
  color: var(--d-accent-2);
}
[data-page-rendered="detail"] .btn-primary{
  background: var(--d-accent) !important;
  color: #fff !important;
  border-radius: var(--d-radius-s) !important;
  font-family: var(--d-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .12em !important;
  font-size: 11px !important;
  padding: 11px 22px !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 24px -8px var(--d-accent-glow) !important;
  transition: all .2s ease;
  cursor: pointer;
}
[data-page-rendered="detail"] .btn-primary:hover{ background: var(--d-accent-2) !important; filter: brightness(1.08); }
[data-page-rendered="detail"] .btn-primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none !important; }
[data-page-rendered="detail"] .btn-danger{
  background: transparent !important;
  color: #f87171 !important;
  border: 1px solid rgba(239,68,68,.4) !important;
  border-radius: var(--d-radius-s) !important;
  font-family: var(--d-font) !important;
  font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .12em !important;
  font-size: 11px !important;
  padding: 11px 18px !important;
  transition: all .2s ease;
  cursor: pointer;
}
[data-page-rendered="detail"] .btn-danger:hover{ background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.7) !important; }

/* ============================================================
   STATS
   ============================================================ */
.dp-stats{
  display: flex; flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 26px);
  padding: 40px 4px 8px;
}
.dp-stat{
  border-left: 2px solid var(--d-line);
  padding: 12px 0 12px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.dp-stat:hover{
  border-left-color: var(--d-accent);
  transform: translateX(3px);
  background: linear-gradient(90deg, var(--d-accent-soft), transparent 60%);
}
.dp-stat-v{
  font-weight: 700;
  font-size: clamp(30px, 3vw, 46px);
  color: var(--d-ink);
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0 0 6px;
}
.dp-stat-v span{ color: var(--d-ink-dim); font-weight: 500; font-size: 14px; }
.dp-stat-l{
  text-transform: uppercase; letter-spacing: .2em;
  font-size: 10px; color: var(--d-ink-dim); font-weight: 700; margin: 0;
}

/* ============================================================
   LAYOUT 2 COLUMNAS (grid activa en desktop css)
   ============================================================ */
.dp-layout{ display: flex; flex-direction: column; gap: 34px; margin-top: 28px; }
.dp-main{ min-width: 0; counter-reset: dsection; display: flex; flex-direction: column; gap: 40px; }
.dp-side{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Títulos de sección numerados */
.dp-sec > h3{
  font-family: var(--d-font);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 10.5px;
  color: var(--d-ink-mute);
  font-weight: 700;
  margin: 0 0 16px;
  position: relative;
  padding-left: 44px;
  display: flex; align-items: center; gap: 8px; min-height: 20px;
}
.dp-sec > h3::before{
  counter-increment: dsection;
  content: "0" counter(dsection);
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--d-accent);
  font-size: 10.5px; letter-spacing: .1em;
}
.dp-sec > h3::after{
  content: ""; position: absolute; left: 30px; top: 50%;
  width: 10px; height: 1px; background: var(--d-line-strong);
}
.dp-count{
  background: var(--d-accent-soft);
  border: 1px solid var(--d-accent-line);
  color: var(--d-accent);
  font-size: 10px; letter-spacing: 0;
  border-radius: 99px;
  padding: 1px 8px;
  min-width: 18px;
  text-align: center;
}
.dp-count:empty{ display:none; }

.dp-syn{
  color: var(--d-ink-mute);
  font-size: 14.5px;
  line-height: 1.75;
  margin: 0;
  border-left: 2px solid var(--d-accent-line);
  padding-left: 18px;
  max-width: 100%;
}
.dp-dim{ color: var(--d-ink-dim); font-size: 12px; }

.dp-more-link{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--d-accent);
  font-family: var(--d-font);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none;
  padding: 4px 0;
}
.dp-more-link:hover{ color: var(--d-accent-2); }

/* ============================================================
   TRAILER Y VIDEOS
   ============================================================ */
.dp-embed, .dp-trailer-poster{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--d-radius-l);
  overflow: hidden;
  border: 1px solid var(--d-line);
  background: #000;
  display: block;
}
.dp-embed iframe{ width:100%; height:100%; border:0; display:block; }
.dp-trailer-poster{ cursor: pointer; padding: 0; }
.dp-trailer-poster img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1), filter .3s ease;
  filter: saturate(.85) brightness(.8);
}
.dp-trailer-poster:hover img{ transform: scale(1.03); filter: saturate(1) brightness(.9); }
.dp-trailer-veil{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75) 100%);
}
.dp-trailer-cta{
  position: absolute; left: 20px; bottom: 18px;
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-family: var(--d-font);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.dp-trailer-playbtn{
  width: 48px; height: 48px; border-radius: 99px;
  background: var(--d-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 10px 30px -6px var(--d-accent-glow);
  transition: transform .2s ease;
}
.dp-trailer-poster:hover .dp-trailer-playbtn{ transform: scale(1.1); }

/* ── Carrusel de videos (reemplaza la tira de miniaturas) ── */
.dp-vcarousel{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--d-radius-l);
  overflow: hidden;
  border: 1px solid var(--d-line);
  background: #000;
}
.dp-vc-track{
  position: relative;
  height: 100%;
}
/* Antes el track era un riel horizontal (flex, translateX) donde cada
   diapositiva medía el 100% del ancho total: durante los ~550ms de la
   transición, el viewport mostraba un recorte real de DOS diapositivas
   distintas pegadas una junto a otra (los bordes de dos fotogramas
   distintos), lo que a veces parecía un collage abstracto sin sentido.
   Ahora las diapositivas están todas apiladas (position:absolute) y se
   cambia de una a otra con un crossfade de opacidad: en todo momento se
   ve, como mucho, una mezcla suave de dos fotogramas COMPLETOS
   superpuestos, nunca un recorte espacial de ambos. */
.dp-vc-slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.dp-vc-slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.dp-vc-blur-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(22px) brightness(.45) saturate(.7);
  transform: scale(1.15);
}
.dp-vc-slide img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.82);
}
/* Si ninguna miniatura llegó a cargar (bloqueada por un adblocker,
   sin conexión, etc.) mostramos un degradé de marca en vez de un
   recuadro negro liso. */
.dp-vc-slide.dp-vc-noimg{
  background: radial-gradient(120% 140% at 30% 20%, #4a3484 0%, #2d1b6e 45%, #180e45 100%);
}
.dp-vc-slide.dp-vc-noimg::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 42%, rgba(255,255,255,.05) 0, transparent 60%);
}
.dp-vc-veil{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.82) 100%);
}
/* Botón único, fijo respecto a .dp-vcarousel (no a cada diapositiva):
   así siempre queda centrado en la parte visible del carrusel, incluso
   mientras el track se desliza de una diapositiva a otra. */
.dp-vc-play{
  all: unset;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: var(--d-accent);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 14px 38px -8px var(--d-accent-glow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dp-vc-play:hover{ transform: translate(-50%, -50%) scale(1.08); }
.dp-vc-meta{
  position: absolute; left: 24px; bottom: 20px; right: 24px;
  color: #fff; font-family: var(--d-font);
  pointer-events: none;
}
.dp-vc-meta b{
  display: block; font-size: 15px; font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.dp-vc-meta i{
  display: block; font-style: normal; margin-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--d-accent-2);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.dp-vc-arrow{
  all: unset;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,6,14,.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.dp-vc-arrow:hover{ background: var(--d-accent); }
.dp-vc-arrow.is-prev{ left: 16px; }
.dp-vc-arrow.is-prev svg{ transform: rotate(180deg); }
.dp-vc-arrow.is-next{ right: 16px; }
.dp-vc-dots{
  position: absolute; right: 20px; bottom: 20px;
  display: flex; gap: 7px;
  z-index: 2;
}
.dp-vc-dot{
  all: unset;
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.dp-vc-dot.is-active{ background: var(--d-accent); transform: scale(1.25); }
.dp-vc-dot:hover{ background: rgba(255,255,255,.7); }

.dp-video-strip{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.dp-video-strip:empty{ display:none; }
.dp-video-card{
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-m);
  overflow: hidden;
  font-family: var(--d-font);
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.dp-video-card:hover{ border-color: var(--d-accent-line); transform: translateY(-2px); }
.dp-video-card.is-disabled{ opacity:.5; }
.dp-video-thumb-btn{
  all: unset;
  display: block;
  cursor: pointer;
  width: 100%;
}
.dp-video-thumb-btn:disabled{ cursor: not-allowed; }
.dp-video-thumb{
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.dp-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dp-video-play{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  opacity: 1; transition: background .2s ease;
}
.dp-video-play > svg{
  width: 42px; height: 42px;
  background: var(--d-accent);
  border-radius: 99px;
  padding: 10px;
  box-shadow: 0 8px 22px -6px var(--d-accent-glow);
  transition: transform .2s ease;
}
.dp-video-card:hover .dp-video-play{ background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%); }
.dp-video-card:hover .dp-video-play > svg{ transform: scale(1.08); }
.dp-video-meta{ display:block; padding: 9px 11px 11px; }
.dp-video-meta b{
  display:block; color: var(--d-ink);
  font-size: 12px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-video-meta i{
  display:block; font-style: normal;
  color: var(--d-ink-dim); font-size: 10.5px; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .1em;
}
.dp-video-yt{
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  color: var(--d-accent);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none;
}
.dp-video-yt:hover{ color: var(--d-accent-2); }
.dp-embed-fallback{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  color: var(--d-ink-dim);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none;
}
.dp-embed-fallback:hover{ color: var(--d-accent); }

/* ============================================================
   PERSONAJES Y STAFF
   ============================================================ */
.dp-people-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* ============================================================
   TEMAS MUSICALES
   ============================================================ */
.dp-theme-list{ display: flex; flex-direction: column; gap: 8px; }
.dp-theme-row{
  display: flex; align-items: center; gap: 14px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-m);
  padding: 12px 14px;
  transition: border-color .2s ease, background .2s ease;
}
.dp-theme-row:hover{ border-color: var(--d-accent-line); background: var(--d-accent-veil); }
.dp-theme-badge{
  flex-shrink: 0;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em;
  padding: 5px 9px;
  border-radius: var(--d-radius-s);
  font-family: var(--d-font);
}
.dp-theme-badge.is-op{ background: var(--d-accent-soft); border: 1px solid var(--d-accent-line); color: var(--d-accent); }
.dp-theme-badge.is-ed{ background: var(--d-accent2-soft); border: 1px solid rgba(var(--mml-a2, 139,92,246), .4); color: var(--d-accent-2); }
.dp-theme-info{ flex: 1; min-width: 0; }
.dp-theme-title{
  color: var(--d-ink); font-size: 13.5px; font-weight: 600; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-theme-artist{ color: var(--d-ink-mute); font-size: 11.5px; margin: 3px 0 0; }
.dp-theme-artist span{ color: var(--d-ink-dim); }
.dp-theme-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.dp-music-btn{
  width: 34px; height: 34px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--d-line-strong);
  color: var(--d-ink-mute);
  background: rgba(255,255,255,.04);
  transition: all .2s ease;
}
.dp-music-btn.is-yt:hover{ background: rgba(255,0,0,.16); border-color: rgba(255,60,60,.6); color: #ff5b5b; }
.dp-music-btn.is-sp:hover{ background: rgba(30,215,96,.14); border-color: rgba(30,215,96,.55); color: #1ed760; }
.dp-themes-toggle{ align-self: flex-start; }

/* ============================================================
   SIDEBAR — TARJETAS
   ============================================================ */
.dp-card{
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-l);
  padding: 18px 20px;
  backdrop-filter: blur(var(--d-glass-b));
  -webkit-backdrop-filter: blur(var(--d-glass-b));
}
.dp-card h4{
  font-family: var(--d-font);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 10px;
  color: var(--d-ink-dim);
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--d-line);
}
.dp-kv-list{ display: flex; flex-direction: column; gap: 11px; }
.dp-kv{ display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.dp-kv span{
  color: var(--d-ink-dim); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em;
  flex-shrink: 0;
}
.dp-kv b{
  color: var(--d-ink-soft); font-size: 12.5px; font-weight: 600;
  text-align: right; min-width: 0;
}
.dp-kv b a{ color: var(--d-accent); text-decoration: none; }
.dp-kv b a:hover{ text-decoration: underline; }

.dp-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.dp-chip{
  font-size: 11px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--d-accent-soft);
  border: 1px solid var(--d-accent-line);
  color: var(--d-accent);
}
.dp-chip-tag{
  background: var(--d-accent2-soft);
  border-color: rgba(var(--mml-a2, 139,92,246), .4);
  color: var(--d-accent-2);
}

.dp-link-list{ display: flex; flex-direction: column; gap: 7px; }
.dp-ext-link{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px;
  border-radius: var(--d-radius-s);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--d-line);
  color: var(--d-ink-soft);
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
.dp-ext-link:hover{
  border-color: var(--d-accent-line);
  background: var(--d-accent-veil);
  color: var(--d-accent);
}

.dp-card-notes{
  background: color-mix(in oklab, rgba(250,204,21,.06) 100%, var(--d-surface));
  border-color: rgba(250,204,21,.2);
}
.dp-card-notes h4{ color: #d4b35a; border-color: rgba(250,204,21,.15); }
.dp-card-notes p{ color: var(--d-ink-soft); font-size: 12.5px; line-height: 1.65; margin: 0; white-space: pre-wrap; }

.dp-mal-btn{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px;
  border-radius: var(--d-radius-m);
  border: 1px solid var(--d-line-strong);
  background: rgba(255,255,255,.04);
  color: var(--d-ink);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  text-decoration: none;
  transition: all .2s ease;
}
.dp-mal-btn:hover{ background: var(--d-accent-soft); border-color: var(--d-accent-line); color: var(--d-accent); }

/* ============================================================
   COMENTARIOS
   ============================================================ */
.dp-avatar{
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.14);
  user-select: none;
}
.dp-composer{
  display: flex; gap: 12px;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-l);
  padding: 16px;
  margin-bottom: 20px;
}
.dp-composer-body{ flex: 1; min-width: 0; }
.dp-composer textarea{
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--d-ink);
  font-family: var(--d-font);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 8px 0 4px;
  min-height: 40px;
}
.dp-composer textarea::placeholder{ color: var(--d-ink-dim); }
.dp-composer:focus-within{ border-color: var(--d-accent-line); }
.dp-composer-foot{
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--d-line);
  padding-top: 10px; margin-top: 6px;
}
#dp-char-count{
  color: var(--d-ink-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.dp-comments-empty{
  text-align: center;
  padding: 34px 16px;
  border: 1px dashed var(--d-line-strong);
  border-radius: var(--d-radius-l);
}
.dp-comments-empty p{ margin: 0; color: var(--d-ink-soft); font-size: 13px; font-weight: 600; }
.dp-comments-empty .dp-dim{ margin-top: 5px; font-weight: 400; }
.dp-comment-list{ display: flex; flex-direction: column; gap: 10px; }
.dp-comment{
  display: flex; gap: 12px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-m);
  padding: 13px 15px;
  transition: border-color .2s ease;
}
.dp-comment:hover{ border-color: var(--d-line-strong); }
.dp-comment-body{ flex: 1; min-width: 0; }
.dp-comment-head{ display: flex; align-items: center; gap: 9px; }
.dp-comment-head b{ color: var(--d-ink); font-size: 12.5px; font-weight: 700; }
.dp-comment-head span{ color: var(--d-ink-dim); font-size: 10.5px; }
.dp-comment-del{
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--d-ink-dim);
  padding: 4px;
  border-radius: var(--d-radius-s);
  display: flex; align-items: center;
  transition: all .15s ease;
}
.dp-comment-del:hover{ color: #f87171; background: rgba(239,68,68,.12); }
.dp-comment-body > p{
  color: var(--d-ink-mute);
  font-size: 13px; line-height: 1.6;
  margin: 5px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================================================
   COMENTARIOS — sección full-width bajo layout de 2 columnas
   ============================================================ */
.dp-sec-comments-full{
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--d-line);
  counter-increment: dsection;
}
.dp-sec-comments-full > h3{
  font-family: var(--d-font);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 10.5px;
  color: var(--d-ink-mute);
  font-weight: 700;
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 10px;
}
.dp-sec-comments-full > h3::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--d-accent);
}
.dp-sec-comments-full .dp-composer,
.dp-sec-comments-full #detail-comments-list{
  max-width: 820px;
}

/* ============================================================
   GRID DE VIDEOS DEBAJO DEL CARRUSEL
   ============================================================ */
.dp-video-grid-below{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
  /* Sin scrollbar — el grid crece con el contenido */
  overflow: visible;
}
.dp-video-grid-below:empty{ display: none; }

.dp-vg-card{
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  border-radius: var(--d-radius-m);
  border: 1px solid var(--d-line);
  overflow: hidden;
  background: var(--d-surface-2);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  text-align: left;
  min-width: 0;
}
.dp-vg-card:hover{
  border-color: var(--d-accent-line);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.55);
}
.dp-vg-card.is-active{
  border-color: var(--d-accent);
  box-shadow: 0 0 0 1px var(--d-accent), 0 8px 22px -6px var(--d-accent-glow);
}

.dp-vg-thumb{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}
.dp-vg-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.85);
  transition: filter .25s ease;
}
.dp-vg-card:hover .dp-vg-thumb img{ filter: brightness(1); }
.dp-vg-thumb.dp-vg-noimg{
  background: radial-gradient(120% 140% at 30% 20%, #241f47 0%, #14122b 55%, #0a0915 100%);
}

.dp-vg-overlay{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28);
  transition: background .2s ease;
}
.dp-vg-overlay svg{
  width: 28px; height: 28px;
  background: var(--d-accent);
  border-radius: 99px;
  padding: 6px;
  box-shadow: 0 4px 14px -4px var(--d-accent-glow);
  transition: transform .2s ease, opacity .2s ease;
}
.dp-vg-card:hover .dp-vg-overlay{ background: rgba(0,0,0,.12); }
.dp-vg-card:hover .dp-vg-overlay svg{ transform: scale(1.1); }
.dp-vg-card.is-active .dp-vg-overlay svg{
  background: var(--d-accent-2);
  opacity: .55;
}

.dp-vg-meta{
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 9px 9px;
  min-width: 0;
}
.dp-vg-meta b{
  color: var(--d-ink);
  font-size: 11.5px; font-weight: 600;
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--d-font);
}
.dp-vg-meta i{
  display: block; font-style: normal;
  color: var(--d-accent-2);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  font-family: var(--d-font);
}

/* =========================================================================
   Patches — Alternative titles, demographics, region warning, split themes
   Usa tokens de tema (--mml-*) para respetar dark / light / custom.
   ========================================================================= */
.dp-alt-titles{
  display:flex;flex-direction:column;gap:4px;margin:6px 0 10px;
  color:var(--mml-text-dim,#94a3b8);
  font-size:12.5px;line-height:1.45;
}
.dp-alt-titles .dp-alt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.dp-alt-titles .dp-alt-row b{
  color:var(--mml-text-mute,#cbd5e1);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;min-width:64px;
}
.dp-alt-titles .dp-alt-row span{color:var(--mml-text,#f1f5f9)}

.dp-chip.dp-chip-demo{
  background:color-mix(in oklab,var(--mml-accent,#6366f1) 18%,transparent);
  border:1px solid color-mix(in oklab,var(--mml-accent,#6366f1) 45%,transparent);
  color:var(--mml-accent,#a5b4fc);
}

.dp-region-warn{
  margin:4px 0 10px;padding:8px 10px;
  background:color-mix(in oklab,#f59e0b 12%,transparent);
  border:1px solid color-mix(in oklab,#f59e0b 40%,transparent);
  border-radius:10px;color:#fbbf24;font-size:12px;line-height:1.4;
}

.dp-themes-split{display:flex;flex-direction:column;gap:14px}
.dp-themes-block{
  background:color-mix(in oklab,var(--mml-surface-2,#1a1f36) 60%,transparent);
  border:1px solid var(--mml-border,rgba(255,255,255,.07));
  border-radius:14px;padding:12px 14px;
}
.dp-themes-block .dp-themes-h{
  margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mml-text-mute,#94a3b8);
  display:flex;align-items:center;gap:8px;
}
.dp-themes-block .dp-themes-h::before{
  content:"";flex:0 0 3px;height:14px;border-radius:2px;
  background:var(--mml-accent,#6366f1);
}
.dp-themes-block .dp-themes-inner{display:flex;flex-direction:column;gap:6px}


/* ============================================================
   CARRUSEL DE PERSONAJES / STAFF
   ============================================================ */
.dp-carousel{position:relative;margin:2px 0 6px;display:grid;grid-template-columns:1fr;grid-template-rows:auto;align-items:center;gap:8px;min-width:0}
.dp-carousel.has-arrows{grid-template-columns:auto minmax(0,1fr) auto}
.dp-carousel-viewport{grid-column:1/-1;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:8px 2px 12px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;min-width:0}
.dp-carousel.has-arrows .dp-carousel-viewport{grid-column:2}
.dp-carousel-viewport::-webkit-scrollbar{display:none}
.dp-carousel-track{display:flex;gap:14px;padding:2px}
/* Cada "columna" (personaje o seiyuu solo, o staff solo) mide igual.
   Un par personaje+seiyuu ocupa el doble (dos columnas). */
.dp-carousel-track > .dp-pc{flex:0 0 clamp(150px,46%,180px);scroll-snap-align:start}
.dp-carousel-track > .dp-pc.is-pair{flex:0 0 clamp(280px,88%,360px)}
.dp-carousel-arrow{position:static;grid-row:1;width:40px;height:40px;border-radius:99px;display:none;align-items:center;justify-content:center;background:var(--d-surface-2);color:var(--d-ink);border:1px solid var(--d-line-strong);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 18px #0005;transition:background .2s,border-color .2s,color .2s,opacity .2s;flex-shrink:0}
.dp-carousel.has-arrows .dp-carousel-arrow.is-prev{grid-column:1;display:flex}
.dp-carousel.has-arrows .dp-carousel-arrow.is-next{grid-column:3;display:flex}
.dp-carousel-arrow:hover:not(:disabled){background:var(--d-accent-veil);border-color:var(--d-accent-line);color:var(--d-accent)}
.dp-carousel-arrow:disabled{opacity:.35;pointer-events:none;cursor:default}
.dp-carousel-meta{margin-top:4px;font-size:11px;color:var(--d-ink-mute);letter-spacing:.03em}
@media (max-width:819px){
  .dp-carousel.has-arrows{grid-template-columns:1fr}
  .dp-carousel.has-arrows .dp-carousel-arrow.is-prev,
  .dp-carousel.has-arrows .dp-carousel-arrow.is-next{display:none}
  .dp-carousel.has-arrows .dp-carousel-viewport{grid-column:1/-1}
}
@media (min-width:820px){
  .dp-carousel-track > .dp-pc{flex:0 0 clamp(160px,18%,200px)}
  .dp-carousel-track > .dp-pc.is-pair{flex:0 0 clamp(310px,34%,400px)}
}
@media (min-width:1400px){
  .dp-carousel-track > .dp-pc{flex:0 0 clamp(170px,15%,210px)}
  .dp-carousel-track > .dp-pc.is-pair{flex:0 0 clamp(330px,28%,420px)}
}
@media (min-width:820px){
  .dp-pc-name{font-size:18px}
  .dp-pc-role{font-size:15px}
  .dp-pc-img{max-width:190px}
}
@media (min-width:1400px){
  .dp-pc-name{font-size:20px}
  .dp-pc-role{font-size:16px}
  .dp-pc-img{max-width:220px}
}

/* Tarjeta vertical: nombre arriba, foto grande al centro, rol abajo.
   Par personaje+seiyuu conserva dos columnas verticales lado a lado. */
.dp-pc{display:flex;align-items:stretch;justify-content:center;gap:0;background:var(--d-surface-2);border:1px solid var(--d-line);border-radius:var(--d-radius-m);padding:12px;transition:border-color .2s,background .2s,transform .2s}
.dp-pc:hover{border-color:var(--d-accent-line);background:var(--d-accent-veil);transform:translateY(-2px)}
.dp-pc-side{display:flex;flex-direction:column;flex:1 1 0;min-width:0;gap:8px;text-decoration:none;color:inherit;align-items:center;justify-content:flex-start;text-align:center}
.dp-pc-side.is-right{border-left:1px dashed var(--d-line);margin-left:10px;padding-left:10px}
.dp-pc-img{width:100%;max-width:150px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.35);margin:0 auto}
.dp-pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.dp-pc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--d-ink-dim);font-weight:700;font-size:28px}
.dp-pc-name{color:var(--d-ink);font-size:14px;font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;width:100%}
.dp-pc-side.is-right .dp-pc-name{color:var(--d-accent)}
.dp-pc-role{color:var(--d-ink-mute);font-size:12px;margin:0;line-height:1.3;width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:640px){.dp-pc{padding:10px}.dp-pc-img{max-width:130px}.dp-pc-name{font-size:13px}.dp-pc-role{font-size:11px}.dp-pc-side.is-right{margin-left:6px;padding-left:6px}}

/* ============================================================
   TEMAS MUSICALES — CAJAS
   ============================================================ */
.dp-themes-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.dp-theme-box{position:relative;border-radius:var(--d-radius-l,16px);padding:16px;background:linear-gradient(160deg,var(--d-surface-2),var(--d-surface));border:1px solid var(--d-line);overflow:hidden}
.dp-theme-box.is-op{border-color:var(--d-accent-line);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--d-accent) 12%,transparent)}
.dp-theme-box.is-ed{border-color:rgba(var(--mml-a2,139,92,246),.35);box-shadow:inset 0 0 0 1px rgba(var(--mml-a2,139,92,246),.12)}
.dp-theme-box::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 100% 0%,var(--d-accent-veil),transparent 60%);opacity:.7}
.dp-theme-box.is-ed::before{background:radial-gradient(120% 60% at 0% 0%,var(--d-accent2-soft),transparent 60%)}
.dp-theme-box-head{position:relative;display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.dp-theme-box-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--d-accent);padding:3px 8px;border-radius:99px;background:var(--d-accent-soft);border:1px solid var(--d-accent-line)}
.dp-theme-box.is-ed .dp-theme-box-eyebrow{color:var(--d-accent-2);background:var(--d-accent2-soft);border-color:rgba(var(--mml-a2,139,92,246),.4)}
.dp-theme-box-title{margin:0;font-size:15px;font-weight:700;color:var(--d-ink)}
.dp-theme-box-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--d-ink-mute);background:rgba(255,255,255,.05);padding:2px 8px;border-radius:99px;border:1px solid var(--d-line)}
.dp-theme-box-body{position:relative;display:grid;grid-template-columns:1fr;gap:8px}

/* Tile individual dentro de la caja (no es lista, es tarjeta) */
.dp-theme-tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--d-line);border-radius:var(--d-radius-m,12px);transition:border-color .2s,background .2s,transform .2s}
.dp-theme-tile:hover{border-color:var(--d-accent-line);background:var(--d-accent-veil);transform:translateY(-1px)}
.dp-theme-box.is-ed .dp-theme-tile:hover{border-color:rgba(var(--mml-a2,139,92,246),.5);background:var(--d-accent2-soft)}
.dp-theme-tile-index{min-width:40px;height:40px;padding:0 6px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--d-accent-soft);color:var(--d-accent);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--d-accent-line);line-height:1}
.dp-theme-tile-index span{font-size:14px;font-weight:800;letter-spacing:0;margin-top:2px}
.dp-theme-box.is-ed .dp-theme-tile-index{background:var(--d-accent2-soft);color:var(--d-accent-2);border-color:rgba(var(--mml-a2,139,92,246),.4)}
.dp-theme-tile-body{min-width:0}
.dp-theme-tile-title{color:var(--d-ink);font-size:13px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-theme-tile-artist{color:var(--d-ink-mute);font-size:11px;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-theme-tile-artist span{color:var(--d-ink-dim)}
.dp-theme-tile-actions{display:flex;gap:6px;flex-shrink:0}
.dp-theme-tile-actions .dp-music-btn{width:32px;height:32px}


/* ============================================================
   PAGE TYPOGRAPHY BOOST (PC)
   Aumenta el tamaño del texto general de la página en desktop
   sin tocar las tarjetas de personajes/staff (.dp-pc-*).
   ============================================================ */
@media (min-width: 820px){
  /* Etiquetas del hero (ENGLISH / JAPANESE / SINÓNIMOS ...) y sus valores */
  .dp-hero-info .dp-alt-titles{ font-size: 18px; }
  .dp-hero-info .dp-alt-titles .dp-alt-row b{ font-size: 15px; min-width: 96px; }
  .dp-hero-info .dp-alt-titles .dp-alt-row span{ font-size: 18px; }

  /* Score */
  .dp-score{ font-size: 18px; }
  .dp-score b{ font-size: 26px; }

  /* Badges del hero */
  .dp-badges span, .dp-origin{ font-size: 15px !important; padding: 8px 16px !important; }

  /* Stats */
  .dp-stat-v{ font-size: clamp(46px, 4.4vw, 68px); }
  .dp-stat-v span{ font-size: 22px; }
  .dp-stat-l{ font-size: 15px; }

  /* Títulos de sección numerados (01 SINOPSIS, 02 TRAILER Y VIDEOS...) */
  .dp-sec > h3{ font-size: 17px; letter-spacing: .24em; padding-left: 56px; }
  .dp-sec > h3::before{ font-size: 16px; }
  .dp-count{ font-size: 15px; padding: 3px 12px; }

  /* Sinopsis y texto de párrafo */
  .dp-syn{ font-size: 20px; line-height: 1.8; padding-left: 22px; }
  .dp-dim{ font-size: 17px; }
  .dp-more-link{ font-size: 16px; }

  /* Sidebar (FICHA / GÉNEROS / etc.) */
  .dp-card h4{ font-size: 16px; letter-spacing: .22em; margin-bottom: 16px; padding-bottom: 12px; }
  .dp-kv span{ font-size: 15px; }
  .dp-kv b{ font-size: 17px; }
  .dp-chip{ font-size: 16px; padding: 8px 16px; }
  .dp-ext-link{ font-size: 16.5px; padding: 13px 16px; }
  .dp-card-notes p{ font-size: 17px; }
  .dp-mal-btn{ font-size: 15.5px; padding: 16px; }

  /* Temas musicales */
  .dp-theme-title{ font-size: 18.5px; }
  .dp-theme-artist{ font-size: 16px; }
  .dp-theme-box-title{ font-size: 20px; }
  .dp-theme-box-eyebrow{ font-size: 11.5px; }
  .dp-theme-box-count{ font-size: 12.5px; }
  .dp-theme-tile-title{ font-size: 14.5px; }
  .dp-theme-tile-artist{ font-size: 12.5px; }

  /* Comentarios */
  .dp-composer textarea{ font-size: 18px; }
  .dp-comment-head b{ font-size: 14px; }
  .dp-comment-head span{ font-size: 12px; }
  .dp-comment-body > p{ font-size: 17.5px; line-height: 1.65; }

  /* Videos */
  .dp-video-meta b{ font-size: 13.5px; }
  .dp-video-meta i{ font-size: 12px; }
  .dp-vg-meta b{ font-size: 13px; }
  .dp-vg-meta i{ font-size: 11.5px; }

  /* Meta del carrusel de personajes ('Página 1 de X · Y en total') */
  .dp-carousel-meta{ font-size: 16px; }
}

@media (min-width: 1400px){
  .dp-syn{ font-size: 22px; line-height: 1.85; }
  .dp-sec > h3{ font-size: 14px; }
  .dp-stat-v{ font-size: clamp(54px, 4.8vw, 76px); }
  .dp-stat-l{ font-size: 13px; }
  .dp-kv b{ font-size: 18.5px; }
  .dp-chip{ font-size: 17px; }
  .dp-hero-info .dp-alt-titles .dp-alt-row span{ font-size: 16px; }
  .dp-score{ font-size: 16px; }
  .dp-score b{ font-size: 22px; }
}