/* ═══════════════════════════════════════════════════════
   LANDING_PATCH.CSS
   Extensión del hero — no modifica landing.css
═══════════════════════════════════════════════════════ */

/* ── Nav derecha: alertas + lang ── */
.slider-header-right {
  display: flex; align-items: center; gap: 1.2rem;
  pointer-events: all;
}

.btn-alerts {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px; color: rgba(255,255,255,0.8);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.btn-alerts:hover {
  border-color: #ffffff; color: #ffffff;
  background: rgba(255,255,255,0.06);
}
.btn-alerts svg { flex-shrink: 0; }

/* ── Slider track ── */
.slider { position: relative; }

.slider__track {
  position: absolute; inset: 0;
  display: flex; transition: none;
}

.slider__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.8s ease;
  pointer-events: none;
}
.slider__slide.is-active {
  opacity: 1; pointer-events: all; z-index: 1;
}

.slider__slide video,
.slider__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ── UI superpuesta al slider ── */
.slider__ui {
  position: absolute;
  bottom: 0; left: 0;
  z-index: 10;
  padding: 0 5% 5.5rem;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 1rem;
  max-width: 560px;
}

.slider__series-logo {
  height: 56px; width: auto; max-width: 260px;
  object-fit: contain;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.7));
  animation: fadeInDown 0.9s ease both;
}

.slider__synopsis {
  font-size: 0.88rem; line-height: 1.75;
  color: rgba(255,255,255,0.8);
  max-width: 420px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Botón Play ── */
.btn-play {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 2px; color: #ffffff;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.75rem 1.75rem; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.btn-play:hover {
  background: rgba(255,255,255,0.22);
  border-color: #ffffff;
  transform: translateY(-2px);
}
.btn-play__circle {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%; background: #ffffff;
  color: #0f0f0d; flex-shrink: 0;
}
.btn-play__circle svg { margin-left: 2px; }

/* ── Dots paginación ── */
.slider__dots {
  display: flex; gap: 0.5rem; align-items: center;
  margin-top: 0.25rem;
}
.slider__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35); border: none;
  cursor: pointer; padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.slider__dot.is-active {
  background: #ffffff;
  transform: scale(1.35);
}

/* ── Flechas ── */
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.6rem;
  width: 42px; height: 42px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s ease, transform 0.25s ease;
}
.slider__arrow:hover {
  color: #ffffff;
  transform: translateY(-50%) scale(1.2);
}
.slider__arrow--prev { left: 1.5rem; }
.slider__arrow--next { right: 1.5rem; }

/* ── Donate hero (esquina inferior derecha del header) ── */
.btn-donate-hero {
  position: absolute; bottom: 2.5rem; right: 2.5rem; z-index: 10;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent; color: #ffffff;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 2px;
  transition: background 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(6px);
}
.btn-donate-hero:hover {
  background: rgba(255,255,255,0.1);
  border-color: #ffffff;
}

/* ── Modal Vimeo ── */
.vimeo-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.vimeo-modal.is-open {
  opacity: 1; pointer-events: all;
}
.vimeo-modal__wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2001;
  isolation: isolate;
}
.vimeo-modal__wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: none;
  z-index: 1;
}

.vimeo-modal__close {
  position: fixed; top: 1.25rem; right: 1.5rem; z-index: 2010;
  background: transparent; border: none;
  color: rgba(255,255,255,0.6); font-size: 1.5rem;
  cursor: pointer; line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.vimeo-modal__close:hover { color: #ffffff; transform: scale(1.2); }


/* ── Series promo pre-roll: botón Skip/Saltar ── */
.vimeo-modal__wrap .vimeo-preroll-skip {
  position: absolute !important;
  right: max(1.5rem, env(safe-area-inset-right)) !important;
  bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  z-index: 2147483647 !important;
  min-width: 7.25rem;
  height: 3.25rem;
  padding: 0 1.35rem;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 2px;
  background: rgba(8,10,12,.76);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.vimeo-modal__wrap .vimeo-preroll-skip.is-visible { display: inline-flex !important; }
.vimeo-modal__wrap .vimeo-preroll-skip:hover { background: rgba(255,255,255,.16); border-color: #fff; }
@media (max-width: 767px) {
  .vimeo-modal__wrap .vimeo-preroll-skip {
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    min-width: 6.7rem;
    height: 3rem;
    font-size: .76rem;
  }
}

/* ── Episode credits: botón Saltar créditos ── */
.vimeo-modal__wrap .vimeo-credits-skip {
  position: absolute !important;
  right: max(1.5rem, env(safe-area-inset-right)) !important;
  bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  z-index: 2147483647 !important;
  min-width: 9.5rem; height: 3.25rem; padding: 0 1.35rem;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.82); border-radius: 2px;
  background: rgba(8,10,12,.76); color: #fff; font: inherit;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.35); opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
.vimeo-modal__wrap .vimeo-credits-skip.is-visible { display: inline-flex !important; }
.vimeo-modal__wrap .vimeo-credits-skip:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.vimeo-modal__wrap .vimeo-credits-skip:disabled { opacity: .55 !important; pointer-events: none !important; }
@media (max-width: 767px) {
  .vimeo-modal__wrap .vimeo-credits-skip { right: max(1rem, env(safe-area-inset-right)) !important; bottom: max(1rem, env(safe-area-inset-bottom)) !important; min-width: 8.8rem; height: 3rem; font-size: .74rem; }
}

/* ── Post-roll overlay dentro del modal ── */
.postroll {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 2005;
}
.postroll.is-visible {
  opacity: 1; pointer-events: all;
}
.postroll__inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.25rem;
  animation: fadeUp 0.5s ease both;
}
.postroll__donate { margin-top: 0.5rem; }

/* ── Key Art Grid — fila horizontal landscape con scroll ── */
.section--keyart {
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative; /* para las flechas */
}

/* Wrapper con overflow hidden para que las flechas queden dentro */
.keyart-wrap {
  position: relative;
}

.keyart-grid {
  display: flex;
  flex-direction: row;
  gap: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.keyart-grid::-webkit-scrollbar { display: none; }

/* Card landscape 16/9 */
.keyart-item {
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 420px);
  aspect-ratio: 16/9;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  display: block;
}
.keyart-item:hover {
  border-color: rgba(255,255,255,0.25);
  transform: scale(1.02);
}
.keyart-item__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: brightness(0.85);
}
.keyart-item:hover .keyart-item__img {
  transform: scale(1.05); filter: brightness(1);
}

/* Coming Soon fallback */
.keyart-cs {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.6rem; padding: 1.5rem;
  background: linear-gradient(135deg, #1c1c1a 0%, #0d0d0b 100%);
}
.keyart-cs__studio {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(200,169,110,0.55); margin-top: 0.4rem;
}
.keyart-cs__coming {
  font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.2rem 0.6rem; border-radius: 2px;
}

.keyart-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
}
.keyart-item__label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.85rem 1rem 0.8rem;
  color: #ffffff; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── Flechas hover en bordes ── */
.keyart-arrow {
  position: absolute; top: 0; bottom: 0.5rem;
  width: 60px; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: pointer; border: none; background: transparent; padding: 0;
}
.keyart-arrow--prev { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.55), transparent); }
.keyart-arrow--next { right: 0; background: linear-gradient(to left,  rgba(0,0,0,0.55), transparent); }

.keyart-wrap:hover .keyart-arrow { opacity: 1; pointer-events: all; }
.keyart-arrow:hover { opacity: 1 !important; }

.keyart-arrow__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 1.4rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.keyart-arrow:hover .keyart-arrow__icon {
  color: #ffffff;
  transform: scale(1.2);
}

@media (max-width: 600px) {
  .keyart-item { width: clamp(200px, 72vw, 300px); }
  .keyart-arrow { display: none; } /* en mobile el swipe es suficiente */
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .slider__series-logo { height: 40px; }
  .slider__arrow { width: 34px; height: 34px; font-size: 0.9rem; }
  .slider__arrow--prev { left: 0.75rem; }
  .slider__arrow--next { right: 0.75rem; }
  .btn-alerts span { display: none; }
  .btn-alerts { padding: 0.4rem 0.6rem; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── About block ── */
.section--about {
  padding-top: 3rem;
  padding-bottom: 5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.about-block {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.about-block__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

.about-block__body {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.9;
}

.about-block__link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.about-block__link:hover {
  color: #ffffff;
  border-color: #ffffff;
}

/* ── Mobile: modal ocupa todo y rota bien ── */
@media (max-width: 768px) {

  /* Portrait — iframe centrado con max height para no quedar enano */
  .vimeo-modal__wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #vimeoIframe {
    position: relative !important;
    width: 100vw !important;
    height: 56.25vw !important; /* 16:9 en portrait */
    max-height: 100vh;
    inset: auto !important;
  }

  /* Landscape — iframe llena toda la pantalla */
  @media (orientation: landscape) {
    #vimeoIframe {
      width: 100vw !important;
      height: 100vh !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════
   MORE EPISODES BUTTON
═══════════════════════════════════════════════════════ */
.slider__ui .btn-play,
.slider__ui .btn-more-episodes {
  display: inline-flex;
}

/* Row de botones Play + More */

.btn-more-episodes {
  display: inline-flex; align-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 2px; color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.75rem 1.5rem; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn-more-episodes:hover {
  background: rgba(255,255,255,0.1);
  border-color: #ffffff; color: #ffffff;
  transform: translateY(-2px);
}

/* ── Wrap Play + More en fila ── */
.slider__btn-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   MORE EPISODES PANEL OVERLAY
═══════════════════════════════════════════════════════ */
.more-panel-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,0.7);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}
.more-panel-overlay.is-open {
  opacity: 1; pointer-events: all;
}

/* Panel lateral derecho */
.more-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 1600;
  width: min(520px, 100vw);
  background: #0f0f0d;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.more-panel.is-open {
  transform: translateX(0);
}
.more-panel::-webkit-scrollbar { width: 4px; }
.more-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Header imagen ── */
.more-panel__header {
  position: relative;
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  flex-shrink: 0;
}
.more-panel__header-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(0.75);
}
.more-panel__header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, #0f0f0d 100%);
}
.more-panel__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; color: #fff; font-size: 1rem;
  width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(6px);
}
.more-panel__close:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* ── Body ── */
.more-panel__body {
  padding: 1.5rem 1.75rem 3rem;
  display: flex; flex-direction: column; gap: 2rem;
}

.more-panel__synopsis {
  font-size: 0.9rem; line-height: 1.85;
  color: rgba(255,255,255,0.6);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ── Season title ── */
.more-panel__season-title {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1rem;
}

/* ── Episodes grid ── */
.more-panel__episodes {
  display: flex; flex-direction: column; gap: 0.75rem;
}

/* ── Episode card ── */
.ep-card {
  display: flex; align-items: center; gap: 1rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  padding: 0.6rem;
  transition: border-color 0.25s ease, background 0.25s ease;
  text-decoration: none; color: inherit;
}
.ep-card--playable {
  cursor: pointer;
}
.ep-card--playable:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
.ep-card--soon { opacity: 0.5; cursor: default; }

/* Thumb */
.ep-card__thumb {
  position: relative; flex-shrink: 0;
  width: 110px; height: 62px;
  border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.ep-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ep-card--no-thumb { background: rgba(255,255,255,0.04); }

/* Play icon over thumb */
.ep-card__play-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff; opacity: 0;
  transition: opacity 0.25s ease;
}
.ep-card--playable:hover .ep-card__play-icon { opacity: 1; }

/* Coming soon badge */
.ep-card__badge {
  position: absolute; bottom: 4px; left: 4px;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.6);
  padding: 2px 5px; border-radius: 2px;
}

/* Info */
.ep-card__info {
  display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0;
}
.ep-card__num {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.ep-card__title {
  font-size: 0.88rem; font-weight: 500;
  color: #ffffff; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-card__dur {
  font-size: 0.72rem; color: rgba(255,255,255,0.35);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .more-panel { width: 100vw; }
  .more-panel__body { padding: 1.25rem 1.25rem 3rem; }
  .ep-card__thumb { width: 90px; height: 52px; }
}


/* ── Hero donate block — siempre position absolute hijo del .hero ── */
.hero-donate-block {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.hero-vote-count {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 0.1rem;
}
.hero-vote-count__num {
  font-size: 1.4rem; font-weight: 700; color: #ffffff;
  letter-spacing: -0.02em; line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.hero-vote-count__label {
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  max-width: 140px; line-height: 1.3; text-align: right;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.btn-donate-hero { position: static; }
.hero-vote-btn {
  font-size: 0.78rem !important;
  padding: 0.6rem 1.25rem !important;
  align-self: flex-end;
}

/* Mobile: mismo position absolute pero más pequeño y abajo a la derecha */
@media (max-width: 768px) {
  /* slider__ui más angosto para no chocar con el bloque derecho */
  .slider__ui {
    padding: 0 1rem 2rem;
    max-width: 52% !important;
    gap: 0.6rem;
  }
  .slider__synopsis {
    font-size: 0.78rem;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-width: 100%;
  }
  .slider__btn-row {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .btn-play {
    width: auto !important;
    font-size: 0.68rem !important;
    padding: 0.5rem 0.8rem !important;
  }
  .btn-more-episodes {
    width: auto !important;
    font-size: 0.68rem !important;
    padding: 0.5rem 0.8rem !important;
  }
  /* Donate block más compacto, esquina inferior derecha */
  .hero-donate-block {
    bottom: 1.25rem;
    right: 1rem;
    gap: 0.35rem;
  }
  .hero-vote-btn {
    font-size: 0.62rem !important;
    padding: 0.38rem 0.65rem !important;
  }
  .hero-vote-count__num   { font-size: 0.95rem; }
  .hero-vote-count__label { font-size: 0.5rem; max-width: 100px; }
  .btn-donate-hero {
    font-size: 0.62rem !important;
    padding: 0.38rem 0.65rem !important;
  }
  .slider__rating { font-size: 0.6rem; padding: 0.12rem 0.35rem; }
}



/* ── Logo + Rating en fila ── */
.slider__logo-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.slider__rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  margin-bottom: 4px; /* alinea visualmente con base del logo */
  white-space: nowrap;
}

/* ── Logo Dream Bezier centrado en hero ── */
.hero__brand {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  pointer-events: none;
}
.hero__brand-logo {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.85;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}

@media (max-width: 768px) {
  .hero__brand-logo { height: 24px; }
}

/* ── Alerts button inside More Episodes panel ── */
.more-panel__alerts {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 2px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  align-self: flex-start;
}
.more-panel__alerts:hover {
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
}
.more-panel__alerts.alerts-active {
  border-color: #c8a96e;
  color: #c8a96e;
  background: rgba(200,169,110,0.08);
}

/* ═══════════════════════════════════════════════════════
   MERCH GRID
═══════════════════════════════════════════════════════ */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.merch-item--soon {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  text-align: center;
  transition: border-color 0.3s ease;
}
.merch-item--soon:hover { border-color: rgba(255,255,255,0.18); }
.merch-item__icon { font-size: 1.8rem; color: rgba(200,169,110,0.5); }
.merch-item__label {
  font-size: 0.85rem; font-weight: 500; color: #ffffff; line-height: 1.4;
}
.merch-item__tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.2rem 0.6rem; border-radius: 2px;
}
@media (max-width: 500px) {
  .merch-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   COMMUNITY PAGE
═══════════════════════════════════════════════════════ */
.community-block {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
  margin-top: 2rem;
}
.community-block__row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 1.75rem;
}
.community-block__divider {
  height: 1px; background: rgba(255,255,255,0.07);
}
.community-block__info { flex: 1; }
.community-block__title {
  font-size: 0.9rem; font-weight: 600; color: #ffffff; margin-bottom: 0.3rem;
}
.community-block__desc {
  font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.6;
}
.community-alerts-btn {
  flex-shrink: 0;
  font-size: 0.72rem !important;
  padding: 0.5rem 1rem !important;
}
.community-vote {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem;
  flex-shrink: 0;
}
.community-vote__num {
  font-size: 1.6rem; font-weight: 700; color: #ffffff;
  letter-spacing: -0.02em; line-height: 1;
}
.community-vote__label {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  text-align: right;
}
.community-block__social { padding: 1.5rem 1.75rem; }
.community-social-links {
  display: flex; gap: 1rem; margin-top: 0.75rem; flex-wrap: wrap;
}
.social-link {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px; text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.social-link:hover { color: #ffffff; border-color: #ffffff; }

@media (max-width: 600px) {
  .community-block__row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .community-vote { align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════
   ALINEACIÓN HEADER ↔ FILA DE KEY ART
   --edge es el margen lateral del contenido del header.
   Título y primera tarjeta arrancan en la misma línea.
═══════════════════════════════════════════════════════ */
:root { --edge: 5%; }
@media (max-width: 768px) { :root { --edge: 1rem; } }

.keyart-title {
  padding: 0 var(--edge);
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.keyart-grid {
  padding-left: var(--edge);
  padding-right: var(--edge);
  scroll-padding-left: var(--edge);
  scroll-padding-right: var(--edge);
}


/* ═══════════════════════════════════════════════════════
   VARIAS SERIES
═══════════════════════════════════════════════════════ */
/* Nombre en texto cuando la serie no tiene logo */
.slider__series-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300; letter-spacing: 0.02em; line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
@media (max-width: 700px) { .slider__series-name { font-size: 1.5rem; } }

/* Nombre de la serie dentro del panel */
.more-panel__series-name {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em;
  color: #ffffff; margin-bottom: 0.75rem;
}



/* ═══════════════════════════════════════════════════════
   CELULAR (≤ 600px) — header apilado
   Arriba: logo/nombre, sinopsis, Play y More Episodes.
   Abajo, en una sola línea: voto · contador · donar.
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Logo Dream Bezier debajo de la barra para no chocar con Alertas */
  .hero__brand { top: 4.2rem; }

  /* En celular se cambia de slide con swipe */
  .slider__arrow,
  .hero__scroll-hint { display: none; }

  .slider__ui {
    max-width: 100% !important;
    width: 100%;
    padding: 0 1rem 6.4rem;
  }
  .slider__synopsis { max-width: 100%; font-size: 0.8rem; }

  .hero-donate-block {
    left: 1rem; right: 1rem; bottom: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .hero-vote-btn   { align-self: center; }
  .hero-vote-count { align-items: center; }
  .hero-vote-count__label { text-align: center; max-width: 90px; }

  /* El botón de alertas del panel sí muestra su texto */
  .more-panel__alerts span { display: inline !important; }
}


/* ═══════════════════════════════════════════════════════
   AJUSTES RESPONSIVE Y TEASERS EN EL HEADER
═══════════════════════════════════════════════════════ */
/* Fondo del slide si el video/imagen aún no existe o no carga */
.slider__slide {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(200,169,110,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #1a1a18 0%, #0b0b0a 100%);
}

/* Barra superior: fondo al hacer scroll para que no se monte sobre el contenido */
.top-nav { transition: background 0.3s ease, padding 0.3s ease; }
.top-nav.is-scrolled {
  background: linear-gradient(to bottom, rgba(10,10,9,0.94), rgba(10,10,9,0.82));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}

/* Panel: nombre pegado a la sinopsis */
.more-panel__series-name { margin-bottom: -1.25rem; }

/* Botones del header en pantallas chicas: pueden bajar de línea */
@media (max-width: 420px) {
  .slider__btn-row { flex-wrap: wrap !important; }
  .slider__series-name { font-size: 1.35rem; }
  .more-panel__body { padding: 1.25rem 1.1rem 2.5rem; }
  .more-panel__series-name { font-size: 1.1rem; }
}


/* ═══════════════════════════════════════════════════════
   KEY ART EN CELULAR Y TABLET: GRILLA VERTICAL
   Escritorio: fila horizontal con flechas.
   Tablet (≤900px): 2 columnas.
   Celular (≤600px): 1 columna, tarjetas a todo el ancho.
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .keyart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .keyart-item {
    width: 100%;
    scroll-snap-align: none;
  }
  .keyart-item:hover { transform: none; }
  .keyart-arrow { display: none !important; }
}

@media (max-width: 600px) {
  .keyart-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .keyart-item { width: 100% !important; }
  .keyart-item__label {
    font-size: 0.8rem;
    padding: 1rem 1.1rem 0.95rem;
  }
}


/* ═══════════════════════════════════════════════════════
   VIDEO: FLECHA DE REGRESO ARRIBA A LA IZQUIERDA
═══════════════════════════════════════════════════════ */
.vimeo-modal__close {
  top: calc(1rem + env(safe-area-inset-top, 0px));
  left: calc(1.25rem + env(safe-area-inset-left, 0px));
  right: auto;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.85);
  font-size: 0;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.vimeo-modal__close svg { width: 40px; height: 40px; }
.vimeo-modal__close:hover {
  color: #ffffff;
  background: rgba(0,0,0,0.6);
  transform: translateX(-3px);
}
@media (max-width: 600px) {
  .vimeo-modal__close { width: 54px; height: 54px; top: calc(0.75rem + env(safe-area-inset-top, 0px)); left: calc(0.75rem + env(safe-area-inset-left, 0px)); }
  .vimeo-modal__close svg { width: 34px; height: 34px; }
}


/* ═══════════════════════════════════════════════════════
   SIGUIENTE EPISODIO — CUENTA REGRESIVA
═══════════════════════════════════════════════════════ */
.upnext {
  display: flex; align-items: center; gap: 1.25rem;
  width: min(520px, 88vw);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  animation: fadeUp 0.45s ease both;
}
.upnext__ring { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.upnext__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.upnext__ring-bg { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3; }
.upnext__ring-fg {
  fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 201.1; stroke-dashoffset: 0;
  animation-name: upnextRing; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes upnextRing { to { stroke-dashoffset: 201.1; } }
.upnext__num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: #ffffff;
}
.upnext__info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; text-align: left; }
.upnext__eyebrow {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(200,169,110,0.85);
}
.upnext__title { font-size: 1rem; font-weight: 500; color: #ffffff; line-height: 1.3; }
.upnext__time  { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.upnext__btns  { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.upnext__play, .upnext__cancel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1.1rem; border-radius: 2px; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.upnext__play   { background: #ffffff; color: #0f0f0d; border: 1px solid #ffffff; }
.upnext__play:hover { background: rgba(255,255,255,0.85); }
.upnext__cancel { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.3); }
.upnext__cancel:hover { color: #ffffff; border-color: #ffffff; }

@media (max-width: 600px) {
  .upnext { gap: 1rem; padding: 1rem; }
  .upnext__ring { width: 58px; height: 58px; }
  .upnext__num { font-size: 1.3rem; }
  .upnext__title { font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════
   PANEL: EXTRAS Y CABECERA SIN IMAGEN
═══════════════════════════════════════════════════════ */
.more-panel__extras {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
/* Si la imagen de cabecera no existe, no queda un bloque negro vacío */
.more-panel__header--empty { aspect-ratio: auto; height: 72px; }
.more-panel__header--empty::after { display: none; }


/* ═══════════════════════════════════════════════════════
   BLOQUE ABOUT — frases que rotan con fundido
═══════════════════════════════════════════════════════ */
#aboutTitle, #aboutBody { transition: opacity 0.55s ease; }


/* ══════════════════════════════════════════════════════════════
   DREAM BEZIER v10.11.3 — HERO COMPOSITION + WORK SANS HIERARCHY
   One grid for both editorial columns, safe stacked mobile layout.
   Hero background is NOT clickable; buttons retain their own actions.
══════════════════════════════════════════════════════════════ */
.hero .slider__track { z-index: 0; }
.hero .hero__overlay {
  z-index: 2;
  pointer-events: none;
  /* Gentle darkening through mid-frame, more contrast exactly where the text lives. */
  background: linear-gradient(to bottom,
    rgba(0,0,0,.07) 0%,
    rgba(0,0,0,.07) 26%,
    rgba(0,0,0,.14) 44%,
    rgba(0,0,0,.30) 68%,
    rgba(0,0,0,.66) 100%);
}
.hero__content-band {
  position: absolute;
  left: 5%; right: 5%;
  bottom: clamp(3.6rem, 7vh, 6rem);
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 690px) minmax(215px, 1fr);
  column-gap: clamp(1.4rem, 4vw, 5rem);
  align-items: start; /* Right-hand CTA starts on same line as series identity. */
  pointer-events: none; /* The background must never become a link. */
}
.hero__content-band .slider__ui,
.hero__content-band .hero-donate-block { pointer-events: auto; }
.hero__content-band .slider__ui {
  position: relative;
  inset: auto;
  z-index: auto;
  padding: 0;
  width: 100%;
  max-width: 690px !important;
  display: flex;
  gap: clamp(.72rem, 1.4vh, 1.1rem);
}
.hero__content-band .slider__logo-row {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  column-gap: clamp(.85rem, 2vw, 1.5rem);
  row-gap: .65rem;
  max-width: 100%;
}
.hero__content-band .slider__series-logo {
  /* Correct the desktop asset-size cap: the earlier 76px barely enlarged wide logos. */
  height: clamp(108px, 9vw, 132px);
  width: auto;
  max-width: min(500px, 74%);
  object-fit: contain;
  object-position: left center;
  flex: 0 1 auto;
}
.hero__content-band .slider__series-name {
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--leading-tight);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-title);
}
.hero__content-band .slider__rating {
  font-family: var(--font-body);
  font-size: var(--type-small);
  line-height: var(--leading-small);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  white-space: normal;
  margin-bottom: 0;
  padding: .32rem .56rem;
  max-width: 100%;
}
.hero__content-band .slider__synopsis {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  line-height: var(--leading-body);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,.94);
  max-width: 590px;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.hero__content-band .btn-play,
.hero__content-band .btn-more-episodes {
  font-family: var(--font-body);
  font-size: var(--type-cta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-title);
  min-height: 45px;
}
.hero__content-band .hero-donate-block {
  position: relative;
  inset: auto;
  z-index: auto;
  justify-self: end;
  align-self: start;
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
  padding-top: .22rem;
}
.hero__content-band .hero-vote-btn,
.hero__content-band .btn-donate-hero {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
}
.hero__content-band .hero-vote-count__num {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 1.65vw, 1.65rem);
}
.hero__content-band .hero-vote-count__label {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-small);
}
/* Public typographic hierarchy elsewhere on Home; does not alter logos. */
.nav-menu__link { font-weight: var(--weight-regular); }
.keyart-title { font-size: var(--type-small);font-weight:var(--weight-bold);letter-spacing:var(--tracking-label); }
.text-block__title { font-size: var(--type-section-title);font-weight:var(--weight-semibold);line-height:var(--leading-title);letter-spacing:var(--tracking-title); }
.more-panel__series-name { font-size: var(--type-card-title);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-title); }
.more-panel__season-title { font-weight:var(--weight-semibold); }
.ep-card__title { font-weight: var(--weight-semibold); }
.ep-card__num, .ep-card__dur { font-size: var(--type-caption);font-weight:var(--weight-medium); }

@media (max-width: 1050px) and (min-width: 821px) {
  .hero__content-band { grid-template-columns: minmax(0, 1fr) minmax(190px, .64fr); column-gap: 1.25rem; }
  .hero__content-band .slider__series-logo { height: clamp(86px, 9vw, 104px); max-width: min(410px, 74%); }
  .hero__content-band .slider__synopsis { font-size: .95rem; }
}

/* Tablet and phones: separate lower footer band; no overlapping columns. */
@media (max-width: 820px) {
  .hero__content-band {
    left: 1rem; right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: .95rem;
  }
  .hero__content-band .slider__ui {
    width: 100%; max-width: 100% !important;
    position: relative; inset: auto; padding: 0;
    gap: .65rem;
  }
  .hero__content-band .slider__series-logo { height: clamp(49px, 7vw, 64px);max-width: min(280px, 75vw); }
  .hero__content-band .slider__series-name { font-size: clamp(1.65rem, 5vw, 2.4rem); }
  .hero__content-band .slider__synopsis {
    font-size: clamp(.84rem, 2.15vw, 1rem);
    line-height: 1.5;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .hero__content-band .hero-donate-block {
    position: relative; inset: auto;
    width: 100%; max-width: 100%;
    flex-direction: row; align-items: center;justify-content: space-between;
    gap: .55rem;
    padding-top: .82rem;
    border-top: 1px solid rgba(255,255,255,.22);
  }
  .hero__content-band .hero-vote-btn { align-self:center; }
  .hero__content-band .hero-vote-count { align-items:center;min-width:0; }
  .hero__content-band .hero-vote-count__label { text-align:center; }
  .hero__content-band .btn-donate-hero { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .hero__content-band .slider__series-logo { height:clamp(48px, 13vw, 58px);max-width:min(245px,77vw); }
  .hero__content-band .slider__rating { font-size: .72rem; padding: .2rem .4rem; }
  .hero__content-band .slider__btn-row { flex-wrap: wrap; }
  .hero__content-band .btn-play,
  .hero__content-band .btn-more-episodes { font-size: .72rem !important;min-height:42px; }
  .hero__content-band .hero-vote-btn {
    max-width: 42%;
    padding: .48rem .55rem !important;
    font-size: .62rem !important;
    line-height: 1.2;
    white-space: normal;
    text-align:center;
  }
  .hero__content-band .hero-vote-count__num { font-size: 1rem; }
  .hero__content-band .hero-vote-count__label {font-size: .55rem;max-width:90px;}
  .hero__content-band .btn-donate-hero {padding:.5rem .6rem !important;font-size:.63rem !important;}
}
/* Small landscape screens need shorter editorial block and comfortable tap targets. */
@media (max-height: 610px) and (min-width: 821px) {
  .hero__content-band { bottom:2.3rem; }
  .hero__content-band .slider__series-logo { height: clamp(76px, 15vh, 92px); }
  .hero__content-band .slider__synopsis { line-height:1.42;font-size:.9rem; }
  .hero__content-band .slider__ui { gap:.55rem; }
}

/* ═══════════════════════════════════════════════════════
   DREAM BEZIER v10.11.4 — TYPOGRAPHIC HIERARCHY
   MAIN TITLES: Work Sans SemiBold / 600 / uppercase
   SUBHEADINGS: Work Sans Bold / 700 / uppercase
   BODY: Work Sans Regular / 400 / natural casing
   ═══════════════════════════════════════════════════════ */
/* The real logos stay image assets; fallback series titles are styled as main titles. */
.hero__content-band .slider__series-name {
  font-weight: var(--weight-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 2.75vw, 2.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-title);
  overflow-wrap: break-word;
}
.hero__content-band .slider__synopsis {
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: normal;
}
/* About is the main editorial headline on Home. */
.about-block__title {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-title);
  overflow-wrap: break-word;
}
.about-block__body, .text-block__body { font-weight: var(--weight-regular);text-transform:none;letter-spacing:normal; }
/* Section headers / panel subtitles form the second strong tier. */
.text-block__title {
  font-size: var(--type-section-title);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}
.keyart-title, .more-panel__season-title {
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.more-panel__series-name {
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
}
.ep-card__title { font-weight: var(--weight-bold);text-transform:uppercase;overflow-wrap:break-word; }
.ep-card__desc, .more-panel__synopsis { font-weight:var(--weight-regular);text-transform:none; }
/* Labels and CTA remain compact; do not turn metadata into display typography. */
@media (max-width:820px) {
  .about-block__title { font-size:clamp(1.75rem, 5.5vw, 2.35rem); }
  .hero__content-band .slider__series-name { font-size:clamp(1.55rem, 4.6vw, 2.15rem); }
  .text-block__title { font-size:clamp(1.375rem, 3.6vw, 1.875rem); }
}
@media (max-width:390px) {
  .about-block__title { font-size:clamp(1.65rem, 6vw, 2rem); }
  .hero__content-band .slider__series-name { font-size:clamp(1.5rem, 5vw, 1.9rem); }
}


/* ════════════════════════════════════════════════════════════
   DREAM BEZIER v10.11.5 — ABOUT DESKTOP WIDTH + HEADER SERIES LOGO
   Desktop only: broader title composition, readable narrower body.
   Mobile composition and original series brand artwork are preserved.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
  /* The global .container max-width is 860px and .about-block used 640px;
     those two constraints caused unnecessary 3–4 line wrapping. */
  .section--about > .container {
    width: min(92%, 1120px);
    max-width: 1120px;
  }
  .section--about .about-block {
    width: 100%;
    max-width: 100%;
  }
  .section--about .about-block__title {
    width: 100%;
    max-width: 1060px;
    margin-inline: auto;
    text-wrap: balance;
  }
  .section--about .about-block__body {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    text-wrap: pretty;
  }
}

/* v10.11.6 · refined public editorial hierarchy. Keep About broad, not loud. */
.section--about .about-block__title { font-weight:var(--weight-display); letter-spacing:-.035em; line-height:1.10; }
@media (min-width:821px) {
  .section--about .about-block__title { font-size:var(--type-display); }
}


/* ═══════════════════════════════════════════════════════════
   DREAM BEZIER v10.11.7 — QUIET EDITORIAL TYPOGRAPHY
   Reduce all editorial headline scales without touching media/logos.
   Applied consistently to Hero, About, Originals and More Episodes.
   ═══════════════════════════════════════════════════════════ */
.about-block__title,
.section--about .about-block__title {
  font-size:var(--type-display);
  font-weight:var(--weight-display);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-title);
  text-wrap:balance;
}
.text-block__title {
  font-size:var(--type-section-title);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
}
.hero__content-band .slider__series-name {
  font-size:var(--type-page-title);
  font-weight:var(--weight-display);
  line-height:var(--leading-tight);
}
.more-panel__series-name {
  font-size:var(--type-card-title);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-title);
}
.more-panel__season-title,
.keyart-title {font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label)}
.ep-card__title {font-weight:var(--weight-medium)}
.hero__content-band .slider__rating {font-weight:var(--weight-semibold)}
.hero__content-band .slider__synopsis {
  font-size:var(--type-body-large);
  font-weight:var(--weight-regular);
  line-height:1.6;
}
@media (max-width:820px) {
  .about-block__title,.section--about .about-block__title {
    font-size:clamp(1.7rem,5.4vw,2.2rem);
  }
  .hero__content-band .slider__series-name {font-size:clamp(1.55rem,4.6vw,2.15rem)}
  .text-block__title {font-size:clamp(1.375rem,3.7vw,1.875rem)}
}
@media (max-width:390px) {
  .about-block__title,.section--about .about-block__title {font-size:clamp(1.625rem,6vw,1.875rem)}
  .hero__content-band .slider__series-name {font-size:clamp(1.45rem,5vw,1.75rem)}
}


/* ══════════════════════════════════════════════════════════
   Dream Bezier v10.11.8 — stable lower Hero controls
   Right CTA is bottom-aligned to the pagination, not top-
   aligned to series artwork/synopsis. Background remains inert.
   Pagination separates visible dot size from the actual hit area.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
  .hero__content-band {
    align-items: end;
  }
  .hero__content-band .hero-donate-block {
    position: relative;
    inset: auto;
    align-self: end;
    justify-self: end;
    box-sizing: border-box;
    width: min(100%, 305px);
    min-height: 205px;
    padding: 0 0 3px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .72rem;
  }
  .hero__content-band .hero-vote-btn {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero__content-band .hero-vote-count {
    box-sizing: border-box;
    width: 100%;
    align-items: flex-end;
    text-align: right;
    gap: .18rem;
  }
  .hero__content-band .hero-vote-count__num {
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .hero__content-band .hero-vote-count__label {
    display: block;
    width: 156px;
    max-width: 100%;
    min-height: 2.9em;
    text-wrap: pretty;
  }
  .hero__content-band .btn-donate-hero {
    align-self: flex-end;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}

/* Each dot is a real button: visible marker 11px, clickable area 38px.
   This retains the slider's existing click/touch handlers. */
.hero__content-band .slider__dots {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
  margin-top: 0;
  margin-left: -13px; /* marker still lines up with the editorial column */
  min-height: 38px;
}
.hero__content-band .slider__dot,
.hero__content-band .slider__dot.is-active {
  position: relative;
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  background: transparent;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero__content-band .slider__dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.54);
  transform: translate(-50%,-50%);
  transition: background .2s ease, transform .2s ease;
  pointer-events: none;
}
.hero__content-band .slider__dot.is-active::before {
  background: #fff;
  transform: translate(-50%,-50%) scale(1.16);
}
@media (hover:hover) {
  .hero__content-band .slider__dot:hover::before {
    background: rgba(255,255,255,.85);
    transform: translate(-50%,-50%) scale(1.16);
  }
}
.hero__content-band .slider__dot:focus-visible {
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: -3px;
}
@media (max-width: 820px) {
  /* Keep the existing mobile three-part action row and stacked layout. */
  .hero__content-band .hero-donate-block {
    min-height: 0;
    width: 100%;
    align-self: stretch;
    justify-content: space-between;
    padding-top: .82rem;
  }
  /* WCAG-friendly mobile target without huge visible circles. */
  .hero__content-band .slider__dots {
    min-height: 44px;
    margin-left: -15px;
  }
  .hero__content-band .slider__dot,
  .hero__content-band .slider__dot.is-active {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .hero__content-band .slider__dot::before {
    width: 12px;
    height: 12px;
  }
}

/* ══════════════════════════════════════════════════════
   DREAM BEZIER v10.11.9 — Quiet Editorial / sentence case
   Keep the v10.11.8 hero placement, logo size, overlay and dot hit areas.
   Typography-only overrides, placed last intentionally.
   ══════════════════════════════════════════════════════ */
.hero__content-band .slider__series-name,
.about-block__title,.section--about .about-block__title,
.text-block__title,.keyart-title,
.more-panel__series-name,.more-panel__season-title,
.ep-card__title,.ep-card__num,.more-panel__landing-card .ep-card__title,
.nav-menu__link {text-transform:none;}
.hero__content-band .slider__series-name,
.about-block__title,.section--about .about-block__title {letter-spacing:-.024em;}
.text-block__title,.more-panel__series-name,.more-panel__season-title {letter-spacing:-.017em;}
.keyart-title {letter-spacing:.005em;}
.ep-card__title {letter-spacing:normal;}
/* Consistency: every public nav/control/text area uses Work Sans. */
.nav-menu,.nav-menu__list,.nav-menu__link,.top-nav,.lang-switcher,
.slider__ui,.slider__synopsis,.slider__rating,
.hero__content-band,.hero-donate-block,.hero-vote-count,
.keyart-title,.keyart-card,.about-block,.text-block,
.more-panel,.more-panel__body,.ep-card,.footer,
.btn-play,.btn-more-episodes,.btn-alerts,.hero-vote-btn,.btn-donate-hero,
button,input,select,textarea {font-family:var(--font-body);}
/* Functional badges, compact utility labels and CTA buttons keep uppercase treatment. */

/* v10.12.1 — distinct More Info + Alerts CTAs for Pre-release Hero.
   The main image/video of the Hero remains non-clickable. */
.hero__content-band .btn-hero-alerts {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:45px;
  border-color:rgba(255,255,255,.52);
  font-family:var(--font-body);
  font-size:var(--type-cta);
  font-weight:600;
  padding-inline:1.05rem;
  white-space:nowrap;
}
.hero__content-band .btn-hero-alerts.alerts-active {
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.12);
  color:#fff;
}
.hero__content-band .slider__btn-row {
  flex-wrap:wrap;
  gap:.65rem;
}
@media (max-width:600px) {
  .hero__content-band .btn-hero-alerts {
    min-height:44px;
    padding-inline:.85rem;
    font-size:.72rem;
  }
  .hero__content-band .slider__btn-row > button { min-height:44px; }
}

/* v10.12.2 — In Pre-release, promotional Extras lead More Info. */
.more-panel__previews { padding-top: .5rem; border-top: 0; }
.more-panel__previews + .more-panel__season { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.10); }


/* ═══════════════════════════════════════════════════════
   DREAM BEZIER v10.12.3 — HEADER LEGAL PER SERIES
═══════════════════════════════════════════════════════ */
.hero__content-band .hero-legal {
  box-sizing:border-box;
  width:100%;
  max-width:305px;
  margin:.12rem 0 0;
  color:#fff;
  opacity:.68;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.01em;
  text-align:right;
  text-transform:none;
  text-shadow:0 1px 5px rgba(0,0,0,.75);
  pointer-events:none;
}
.hero__content-band .hero-legal[hidden]{display:none!important;}

/* v10.12.4 — raise the complete right CTA stack on desktop so the top CTA aligns with the left metadata row. */
@media(min-width:821px){
  .hero__content-band .hero-donate-block{
    transform:translateY(-78px);
  }
}

@media(max-width:820px){
  /* Keep the original mobile CTA row intact. Legal is overlaid and never adds layout height. */
  .hero__content-band .hero-donate-block{
    flex-wrap:nowrap;
    position:relative;
  }
  .hero__content-band .hero-legal{
    position:absolute;
    right:0;
    bottom:-1.35rem;
    width:100%;
    max-width:100%;
    margin:0;
    font-size:9px;
    line-height:1.25;
    text-align:right;
    white-space:normal;
  }
}

/* v10.12.6 — legal baseline refinement: sit just above the lower Hero baseline / pagination row. */
@media(min-width:821px){
  .hero__content-band .hero-legal{
    transform:translateY(64px);
  }
}

/* v10.12.7 — mobile regression fix: legal must never change the CTA band's height. */

/* v10.12.8 — mobile editorial CTA stack: left-aligned, compact, legal in-flow. */
@media (max-width:600px){
  .hero__content-band .hero-donate-block{
    position:relative;
    inset:auto;
    width:min(300px,100%);
    max-width:100%;
    min-height:0;
    align-self:flex-start;
    justify-self:start;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:.48rem;
    padding:.72rem 0 0;
    border-top:1px solid rgba(255,255,255,.18);
    transform:none;
  }
  .hero__content-band .hero-vote-btn{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    align-self:flex-start;
    justify-content:flex-start;
    text-align:left;
    padding:.52rem .72rem!important;
  }
  .hero__content-band .hero-vote-count{
    width:100%;
    align-items:flex-start;
    text-align:left;
    gap:.08rem;
  }
  .hero__content-band .hero-vote-count__num{
    font-size:1.08rem;
    line-height:1.05;
    text-align:left;
  }
  .hero__content-band .hero-vote-count__label{
    width:auto;
    max-width:190px;
    min-height:0;
    text-align:left;
    font-size:.54rem;
    line-height:1.25;
  }
  .hero__content-band .btn-donate-hero{
    align-self:flex-start;
    justify-content:flex-start;
    min-height:38px;
    padding:.46rem .68rem!important;
  }
  .hero__content-band .hero-legal{
    position:static;
    inset:auto;
    width:100%;
    max-width:260px;
    margin:.18rem 0 0;
    transform:none;
    font-size:8.5px;
    line-height:1.3;
    text-align:left;
    white-space:normal;
  }
}

/* v10.12.9 — desktop CTA/legal spacing refinement.
   Keep the legal on the approved lower baseline and move the complete CTA stack
   (vote + waiting count + donate) down so Donate sits ~20px above the legal. */
@media (min-width:821px){
  .hero__content-band .hero-vote-btn,
  .hero__content-band .hero-vote-count,
  .hero__content-band .btn-donate-hero{
    transform:translateY(57px);
  }
}


/* v10.12.10 — portrait tablet CTA stack: same left-aligned editorial logic as mobile, with tablet spacing. */
@media (min-width:601px) and (max-width:820px) and (orientation:portrait){
  .hero__content-band .hero-donate-block{
    position:relative;
    inset:auto;
    width:min(340px,100%);
    max-width:100%;
    min-height:0;
    align-self:flex-start;
    justify-self:start;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:.55rem;
    padding:.8rem 0 0;
    border-top:1px solid rgba(255,255,255,.18);
    transform:none;
  }
  .hero__content-band .hero-vote-btn{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    align-self:flex-start;
    justify-content:flex-start;
    text-align:left;
    padding:.58rem .82rem!important;
  }
  .hero__content-band .hero-vote-count{
    width:100%;
    align-items:flex-start;
    text-align:left;
    gap:.1rem;
  }
  .hero__content-band .hero-vote-count__num{
    font-size:1.18rem;
    line-height:1.05;
    text-align:left;
  }
  .hero__content-band .hero-vote-count__label{
    width:auto;
    max-width:210px;
    min-height:0;
    text-align:left;
    font-size:.58rem;
    line-height:1.3;
  }
  .hero__content-band .btn-donate-hero{
    align-self:flex-start;
    justify-content:flex-start;
    min-height:40px;
    padding:.5rem .75rem!important;
  }
  .hero__content-band .hero-legal{
    position:static;
    inset:auto;
    width:100%;
    max-width:300px;
    margin:.22rem 0 0;
    transform:none;
    font-size:9px;
    line-height:1.3;
    text-align:left;
    white-space:normal;
  }
}

/* ═══════════════════════════════════════════════════════
   DREAM BEZIER v10.12.13 — PREMIUM MOBILE HERO CLEANUP
   Mobile portrait: 4:5 alternate media + compact UI.
   Tablet remains 16:9. Desktop layout remains unchanged.
   ═══════════════════════════════════════════════════════ */

/* Metadata is informational, not a CTA: text-only on every breakpoint. */
.hero__content-band .slider__rating{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  border-radius:0 !important;
  font-size:clamp(.68rem,.8vw,.78rem) !important;
  line-height:1.3;
  color:rgba(255,255,255,.88);
}

@media (max-width:600px) and (orientation:portrait){
  /* A shorter premium-style hero lets the Originals rail enter the first view. */
  .hero{
    height:82svh !important;
    min-height:620px !important;
  }

  /* Keep the editorial information compact and readable. */
  .hero__content-band{
    left:1rem;
    right:1rem;
    bottom:.75rem;
    row-gap:.58rem;
  }
  .hero__content-band .slider__ui{
    gap:.48rem;
  }
  .hero__content-band .slider__logo-row{
    gap:.58rem;
    align-items:center;
  }
  .hero__content-band .slider__series-logo{
    height:clamp(42px,11vw,52px);
    max-width:min(210px,58vw);
  }
  .hero__content-band .slider__rating{
    font-size:.64rem !important;
    max-width:52vw;
  }
  .hero__content-band .slider__synopsis{
    max-width:100%;
    font-size:.72rem !important;
    line-height:1.42 !important;
    -webkit-line-clamp:3 !important;
    margin-top:.06rem;
  }

  /* Mobile keeps only Trailer + More Info. */
  .hero__content-band .btn-hero-alerts{
    display:none !important;
  }
  .hero__content-band .slider__btn-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
    gap:.55rem;
    width:min(100%,330px);
    flex-wrap:nowrap !important;
  }
  .hero__content-band .btn-play,
  .hero__content-band .btn-more-episodes{
    width:100%;
    min-width:0;
    min-height:40px !important;
    padding:.48rem .62rem !important;
    font-size:.66rem !important;
    white-space:nowrap;
  }
  .hero__content-band .btn-play__circle{
    width:30px;
    height:30px;
    min-width:30px;
  }

  /* Pagination stays visible and compact. */
  .hero__content-band .slider__dots{
    margin-top:.05rem;
    min-height:30px;
    gap:.42rem;
  }
  .hero__content-band .slider__dot,
  .hero__content-band .slider__dot.is-active{
    width:30px;
    min-width:30px;
    min-height:30px;
  }

  /* Vote footer: heart + count in one clean row. Donate is intentionally absent on mobile. */
  .hero__content-band .hero-donate-block{
    width:100%;
    max-width:360px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:.72rem;
    row-gap:.42rem;
    padding:.58rem 0 0;
    margin:0;
    border-top:1px solid rgba(255,255,255,.17);
    transform:none !important;
  }
  .hero__content-band .hero-vote-btn{
    grid-column:1;
    grid-row:1;
    width:44px;
    height:44px;
    min-width:44px;
    max-width:44px;
    min-height:44px;
    padding:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-color:rgba(255,90,125,.8);
  }
  .hero__content-band .hero-vote-btn [data-i18n="vote_btn"]{
    display:none !important;
  }
  .hero__content-band .hero-vote-btn .btn-vote__heart{
    margin:0;
    font-size:1.15rem;
    line-height:1;
  }
  .hero__content-band .hero-vote-count{
    grid-column:2;
    grid-row:1;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:.08rem;
    text-align:left;
  }
  .hero__content-band .hero-vote-count__num{
    font-size:1rem;
    line-height:1;
    text-align:left;
  }
  .hero__content-band .hero-vote-count__label{
    max-width:210px;
    font-size:.5rem;
    line-height:1.23;
    text-align:left;
  }
  .hero__content-band .btn-donate-hero{
    display:none !important;
  }
  .hero__content-band .hero-legal{
    grid-column:1 / -1;
    grid-row:2;
    position:static !important;
    width:100%;
    max-width:none;
    margin:.02rem 0 0;
    transform:none !important;
    font-size:7.5px;
    line-height:1.25;
    text-align:left;
    opacity:.6;
  }

  /* Return Originals to the desktop interaction model: horizontal responsive rail. */
  .section--keyart{
    padding-top:.85rem;
    padding-bottom:1.5rem;
  }
  .keyart-title{
    margin-bottom:.65rem;
    font-size:.68rem;
  }
  .keyart-grid{
    display:flex !important;
    flex-direction:row !important;
    grid-template-columns:none !important;
    gap:.5rem !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    padding-left:var(--edge) !important;
    padding-right:var(--edge) !important;
    padding-bottom:.35rem !important;
  }
  .keyart-item{
    flex:0 0 calc((100vw - 2rem - 1rem) / 3) !important;
    width:calc((100vw - 2rem - 1rem) / 3) !important;
    min-width:104px;
    max-width:150px;
    aspect-ratio:16/9;
    scroll-snap-align:start !important;
  }
  .keyart-item__label{
    font-size:.5rem;
    padding:.42rem .45rem;
  }
  .keyart-arrow{
    display:none !important;
  }
}

/* v10.12.14 — Flexible media orientation + cleaner Originals cards. */
.keyart-item__label{
  display:none !important;
}
.keyart-item.is-vertical{
  aspect-ratio:9/16 !important;
}
.keyart-item.is-horizontal{
  aspect-ratio:16/9 !important;
}

/* Mobile header brand: keep Dream Bezier logo beside the hamburger,
   away from Alerts / languages / profile controls. */
@media (max-width:600px){
  .hero__brand{
    top:1.45rem !important;
    left:5.9rem !important;
    right:auto !important;
    transform:none !important;
  }
  .hero__brand-logo{
    height:21px !important;
    max-width:86px;
  }
  .keyart-item.is-vertical{
    flex-basis:calc((100vw - 2rem - 1rem) / 3) !important;
    width:calc((100vw - 2rem - 1rem) / 3) !important;
  }
}

/* v10.12.17 — Mobile Key Visual scroll stability.
   Avoid Safari/iOS repaint flicker from animated CSS filters while preserving
   the approved 9:16/16:9 orientation and layout. */
@media (max-width:600px){
  .keyart-item__img{
    filter:none !important;
    transition:none !important;
    transform:none !important;
    will-change:auto !important;
  }
  .keyart-item:hover .keyart-item__img{
    filter:none !important;
    transform:none !important;
  }
  .keyart-item__overlay{
    background:linear-gradient(to top,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.15) 55%,
      rgba(0,0,0,.15) 100%) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Dream Bezier — Mobile Hero CTA balance
   Keep both CTA contents visually centered and make More Info compact.
   Desktop/tablet remain unchanged.
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero__content-band .slider__btn-row {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    width: min(100%, 330px);
    align-items: stretch;
  }

  .hero__content-band .btn-play,
  .hero__content-band .btn-more-episodes:not(.btn-hero-alerts) {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 44px !important;
  }

  .hero__content-band .btn-play {
    width: 100% !important;
  }

  .hero__content-band .btn-more-episodes:not(.btn-hero-alerts) {
    width: auto !important;
    min-width: clamp(112px, 31vw, 132px) !important;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
    justify-self: end;
  }
}


/* v10.12.19 — Mobile Notify Me remains intentionally hidden.
   Keep this final override after CTA balance rules because the alert button
   also carries the generic .btn-more-episodes class. */
@media (max-width: 600px) {
  .hero__content-band .btn-hero-alerts {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════
   CONTENT BADGES · Key Visual
═══════════════════════════════════════════════════════ */
.db-content-badge{
  position:absolute;
  z-index:7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:6px 10px 5px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(8,8,8,.72);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
  color:#fff;
  font-family:'Work Sans',Arial,sans-serif;
  font-size:10px;
  font-weight:650;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  pointer-events:none;
}
.db-content-badge--kv{
  top:12px;
  right:12px;
}
@media(max-width:768px){
  .db-content-badge{
    min-height:24px;
    padding:5px 8px 4px;
    font-size:9px;
    letter-spacing:.075em;
  }
  .db-content-badge--kv{
    top:10px;
    right:10px;
  }
}


/* ═══════════════════════════════════════════════════════
   DREAM BEZIER · CONTENT BADGE VISUAL POLISH v2
   Visual only — no logic changes
═══════════════════════════════════════════════════════ */
.db-content-badge{
  min-height: 26px;
  padding: 6px 11px 5px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(26,26,26,.88), rgba(8,8,8,.84));
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  color: #fff;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  box-shadow:
    0 8px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
  white-space: nowrap;
  pointer-events: none;
}

.db-content-badge::before{
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .78;
  box-shadow: 0 0 8px rgba(255,255,255,.38);
}

/* KV — superior derecha */
.db-content-badge--kv{
  top: 14px;
  right: 14px;
}

/* Promo Banner — superior izquierda */
.db-content-badge--promo{
  top: clamp(12px, 1.6vw, 20px);
  left: clamp(14px, 2.2vw, 30px);
}

@media (max-width: 768px){
  .db-content-badge{
    min-height: 23px;
    padding: 5px 9px 4px;
    border-radius: 6px;
    font-size: 8.5px;
    letter-spacing: .065em;
  }

  .db-content-badge::before{
    width: 4px;
    height: 4px;
    margin-right: 6px;
  }

  .db-content-badge--kv{
    top: 10px;
    right: 10px;
  }

  .db-content-badge--promo{
    top: 10px;
    left: 12px;
  }
}


/* ═══════════════════════════════════════════════════════
   CONTENT BADGE FIX v3
   Mobile KV: bottom center, intrinsic dimensions only.
   Status dot: Coming Soon = amber, New Series = green.
═══════════════════════════════════════════════════════ */
.db-content-badge[data-badge-kind="coming-soon"]::before{
  background:#F2B84B !important;
  box-shadow:0 0 9px rgba(242,184,75,.58) !important;
}
.db-content-badge[data-badge-kind="new-series"]::before{
  background:#4FD17A !important;
  box-shadow:0 0 9px rgba(79,209,122,.58) !important;
}

@media (max-width:768px){
  .db-content-badge--kv{
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:8px !important;
    left:50% !important;

    display:inline-flex !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:calc(100% - 12px) !important;
    height:auto !important;
    min-height:22px !important;

    padding:5px 8px 4px !important;
    margin:0 !important;
    transform:translateX(-50%) !important;

    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Dream Bezier — Mobile single CTA alignment
   When Play is unavailable and More Info is the only visible hero CTA,
   align More Info to the left edge of the content band.
   Does not affect the normal two-CTA layout.
═══════════════════════════════════════════════════════ */
@media (max-width:600px){
  .hero__content-band .slider__btn-row:has(.btn-play[style*="display: none"]){
    grid-template-columns:max-content 1fr !important;
    width:100% !important;
    max-width:none !important;
  }

  .hero__content-band .slider__btn-row:has(.btn-play[style*="display: none"])
  .btn-more-episodes:not(.btn-hero-alerts){
    grid-column:1 !important;
    justify-self:start !important;
    width:auto !important;
  }
}


/* ── v10.20.1: mobile/fullscreen regression fix ─────────────────── */
html.db-video-open,
body.db-video-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.vimeo-modal.is-mobile-fullframe {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 2147483000 !important;
  background: #000 !important;
}

.vimeo-modal.is-mobile-fullframe .vimeo-modal__wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  isolation: isolate;
  background: #000;
}

/* Keep DB overlays above Vimeo in normal, pseudo-fullscreen and native
   container fullscreen. Never allow the iframe to outrank custom UI. */
.vimeo-modal .vimeo-modal__wrap iframe { z-index: 1 !important; }
.vimeo-modal .db-sub-stage { z-index: 30 !important; }
.vimeo-modal .db-sub-controls { z-index: 40 !important; }
.vimeo-modal .vimeo-modal__close { z-index: 60 !important; }
.vimeo-modal .vimeo-preroll-skip,
.vimeo-modal .vimeo-credits-skip { z-index: 70 !important; }

.vimeo-modal:fullscreen,
.vimeo-modal:-webkit-full-screen {
  background: #000 !important;
  width: 100% !important;
  height: 100% !important;
}

.db-sound-toggle {
  position: absolute;
  z-index: 55;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.db-sound-toggle.is-on { opacity: .82; }
.db-sound-svg { width: 18px; height: 18px; display: block; color: #fff; }

@media (max-width: 900px) {
  .db-sound-toggle {
    display: grid;
    top: max(62px, calc(env(safe-area-inset-top) + 56px));
    right: max(16px, calc(env(safe-area-inset-right) + 12px));
  }
}


/* ── v10.22.0: mobile manual-start player rules ─────────────────── */
@media (max-width: 900px) {
  .vimeo-modal .db-sub-stage { z-index: 30 !important; }
  .vimeo-modal .db-sub-controls {
    z-index: 80 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .vimeo-modal .db-sub-controls .db-sub-btn,
  .vimeo-modal .db-sub-controls .db-sub-fs {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .vimeo-modal .db-sound-toggle {
    z-index: 90 !important;
    width: 44px !important;
    height: 44px !important;
    pointer-events: auto !important;
  }
  .db-mobile-start-gate {
    position: absolute;
    inset: 0;
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.18);
    pointer-events: auto;
    touch-action: manipulation;
  }
  .db-mobile-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 999px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font: 700 12px/1 "Work Sans",sans-serif;
    letter-spacing: .08em;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .db-mobile-start-icon { font-size: 15px; line-height: 1; }
  .db-mobile-tap-surface {
    position: absolute;
    top: max(64px, calc(env(safe-area-inset-top) + 52px));
    left: 0;
    right: 0;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px));
    z-index: 20;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: transparent;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .vimeo-modal__close,
  .vimeo-preroll-skip,
  .vimeo-credits-skip,
  .postroll-home-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .db-mobile-tap-surface {
    top: max(50px, calc(env(safe-area-inset-top) + 40px));
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 48px));
  }
}


/* ═══════════════════════════════════════════════════════
   v10.23.0 — MOBILE LANDSCAPE STAGE
   Mobile-only. Desktop behavior is intentionally untouched.
   The DB modal itself becomes the full-frame 16:9 viewing surface.
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html.db-video-open,
  body.db-video-open {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
  }

  .vimeo-modal.db-mobile-landscape-stage {
    display: block !important;
    position: fixed !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    background: #000 !important;
    z-index: 2147483000 !important;
    transform-origin: 50% 50% !important;
    overflow: hidden !important;
  }

  /* Portrait: rotate the ENTIRE available browser viewport, not a smaller
     fixed 16:9 box. This makes the Dream Bezier surface fill tall phones edge
     to edge. The viewer physically rotates the phone to read the landscape UI. */
  .vimeo-modal.db-mobile-landscape-stage {
    width: 100dvh !important;
    height: 100dvw !important;
    min-width: 100dvh !important;
    min-height: 100dvw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #000 !important;
    isolation: isolate;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    z-index: 1 !important;
  }

  /* Subtitle UI and DB controls always sit above Vimeo. */
  .vimeo-modal.db-mobile-landscape-stage .db-sub-stage {
    z-index: 100 !important;
    pointer-events: none !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls {
    z-index: 140 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sub-btn,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-fs {
    min-width: 44px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Mobile uses Vimeo's own fullscreen control in the native control bar.
     Hide the duplicate DB fullscreen button only on mobile. */
  .vimeo-modal.db-mobile-landscape-stage .db-sub-fs {
    display: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__close {
    z-index: 180 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* AUDIO ON is an overlay, never part of layout. The video autoplays muted
     underneath it; one explicit tap grants Safari the unmute gesture. */
  .vimeo-modal.db-mobile-landscape-stage .db-sound-toggle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    min-width: 148px !important;
    height: 58px !important;
    padding: 0 22px !important;
    transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.52) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.28) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 170 !important;
    font: 700 12px/1 "Work Sans",sans-serif !important;
    letter-spacing: .09em !important;
    white-space: nowrap !important;
    transition: opacity .22s ease, transform .22s ease !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sound-toggle.is-confirmed,
  .vimeo-modal.db-mobile-landscape-stage .db-sound-toggle.is-on {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.96) !important;
  }
  .db-audio-on-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
  }
  .db-audio-on-icon svg { width: 22px; height: 22px; display: block; }
  .db-audio-on-label { display: inline-block; }

  /* The v6 manual-start gate is obsolete. */
  .db-mobile-start-gate,
  .db-mobile-start-button { display: none !important; }

  /* Play/pause tap surface lives below all DB controls. */
  .vimeo-modal.db-mobile-landscape-stage .db-mobile-tap-surface {
    z-index: 60 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .vimeo-modal.db-mobile-landscape-stage {
    width: 100dvw !important;
    height: 100dvh !important;
    min-width: 100dvw !important;
    min-height: 100dvh !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ── v10.25.0: MOBILE FULL-FRAME STABILIZATION ───────────────────
   Mobile stays entirely inside Dream Bezier's own DOM surface so custom VTT
   subtitles and controls can never be stripped away by Vimeo native fullscreen. */
@media (max-width: 900px) {
  .vimeo-modal.db-mobile-landscape-stage .db-sub-fs { display: none !important; }
  .vimeo-modal.db-mobile-landscape-stage,
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap {
    overscroll-behavior: none !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls {
    isolation: isolate;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls > * {
    flex: 0 0 auto !important;
  }
}


/* ═══════════════════════════════════════════════════════
   v10.26.0 — MOBILE FULL-FRAME SIZE + ROTATE CUE
   Fixes the legacy #vimeoIframe 16:9 portrait rule that was outranking the
   full-frame stage because of ID selector specificity.
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html.db-video-open,
  body.db-video-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* The legacy mobile rule uses #vimeoIframe with !important. Match the ID
     explicitly here so the iframe truly fills the rotated DB stage. */
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > #vimeoIframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Two non-interactive rotate cues sit at the two ends of the landscape
     stage. Because the whole stage is rotated in portrait, they land in the
     top/bottom black areas the user naturally sees before rotating the phone. */
  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-hints {
    position: absolute !important;
    inset: 0 !important;
    z-index: 125 !important;
    pointer-events: none !important;
    color: rgba(255,255,255,.80) !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-hint {
    position: absolute !important;
    top: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    transform: translateY(-50%) !important;
    opacity: .82 !important;
    text-align: center !important;
    font-family: "Work Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.65) !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-hint--a {
    left: max(18px, env(safe-area-inset-left)) !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-hint--b {
    right: max(18px, env(safe-area-inset-right)) !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-icon {
    width: 42px !important;
    height: 42px !important;
    display: block !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

/* Once the user physically rotates the phone, the DB surface becomes a normal
   landscape full-frame and the instructional cue disappears. */
@media (max-width: 900px) and (orientation: landscape) {
  .vimeo-modal.db-mobile-landscape-stage {
    top: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    min-width: 100dvw !important;
    min-height: 100dvh !important;
    transform: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > #vimeoIframe {
    width: 100dvw !important;
    height: 100dvh !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-hints {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════
   v10.27.0 — MOBILE LANDSCAPE SAFETY
   Keep phone-only player rules active after rotation, including wide iPhones
   whose landscape viewport can be >900 CSS px. This also guarantees that a
   subtitle/control tap can never fall back to desktop backdrop-close behavior.
═══════════════════════════════════════════════════════ */
@media (max-height: 600px) and (hover: none) and (pointer: coarse) {
  html.db-video-open,
  body.db-video-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    min-width: 100dvw !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 2147483000 !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #000 !important;
    isolation: isolate !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > #vimeoIframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sub-stage {
    z-index: 100 !important;
    pointer-events: none !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls {
    z-index: 140 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    isolation: isolate !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls > *,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Fullscreen is intentionally hidden in DB mobile full-frame. */
  .vimeo-modal.db-mobile-landscape-stage .db-sub-fs {
    display: none !important;
  }

  /* Keep the only close target in its own safe corner, away from the centered
     subtitle pill. No other player area is a close target on phones. */
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__close {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 190 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sound-toggle {
    z-index: 170 !important;
    pointer-events: auto !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .vimeo-preroll-skip,
  .vimeo-modal.db-mobile-landscape-stage .vimeo-credits-skip {
    z-index: 175 !important;
    pointer-events: auto !important;
  }
  .vimeo-modal.db-mobile-landscape-stage .db-mobile-rotate-hints {
    display: none !important;
  }
}

/* ==========================================================
   Dream Bezier Streaming v14 — mobile subtitle control layer
   Keep the whole subtitle UI in the same top interaction plane as AUDIO ON.
   ========================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .vimeo-modal.db-mobile-landscape-stage .db-sub-stage {
    /* The stage used to live below the mobile audio/control plane. Safari can
       then hit-test a rotated element underneath even when the pill is visible. */
    z-index: 180 !important;
    pointer-events: none !important;
    isolation: isolate !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sub-overlay,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-text,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-wake {
    pointer-events: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls {
    position: absolute !important;
    z-index: 20 !important; /* inside the stage stacking context */
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sub-controls > *,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-btn {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* AUDIO and SUBS are now intentionally peers in the same interaction plane. */
  .vimeo-modal.db-mobile-landscape-stage .db-sound-toggle {
    z-index: 180 !important;
    pointer-events: auto !important;
  }

  /* Keep the explicit back control above both interaction planes. */
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__close {
    z-index: 220 !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-preroll-skip,
  .vimeo-modal.db-mobile-landscape-stage .vimeo-credits-skip {
    z-index: 210 !important;
  }
}

/* ==========================================================
   Dream Bezier Streaming v15 — Safari landscape controls root
   Interactive subtitle controls are mounted OUTSIDE the rotated
   subtitle stage on mobile. This avoids Safari stale hit-testing
   after orientation changes.
   ========================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .vimeo-modal.db-mobile-landscape-stage > .db-sub-controls--mobile-root {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 185 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    isolation: isolate !important;
  }

  .vimeo-modal.db-mobile-landscape-stage > .db-sub-controls--mobile-root.is-hidden {
    transform: translate(-50%, -8px) !important;
    pointer-events: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage > .db-sub-controls--mobile-root > *,
  .vimeo-modal.db-mobile-landscape-stage > .db-sub-controls--mobile-root .db-sub-btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sub-stage {
    pointer-events: none !important;
  }
}

/* ==========================================================
   Dream Bezier Streaming v17 — mobile SUBS tactile plane fix
   Fixes malformed v16 CSS and keeps SUBS on the same tactile plane as AUDIO
   across portrait and landscape. Mobile detection does not depend only on width.
   ========================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .vimeo-modal.db-mobile-landscape-stage > .db-sub-controls--mobile-root {
    display: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > .db-sub-controls--mobile-root {
    display: flex !important;
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 190 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    isolation: isolate !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > .db-sub-controls--mobile-root.is-hidden {
    transform: translate(-50%, -8px) !important;
    pointer-events: none !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > .db-sub-controls--mobile-root > *,
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > .db-sub-controls--mobile-root .db-sub-btn {
    position: relative !important;
    z-index: 191 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__wrap > .db-sound-toggle {
    z-index: 190 !important;
    pointer-events: auto !important;
  }

  .vimeo-modal.db-mobile-landscape-stage .db-sub-overlay,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-text,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-wake {
    pointer-events: none !important;
  }
}

/* ==========================================================
   Dream Bezier Streaming v18 — diagnostic landscape back isolation
   TEMPORARY TEST: on touch/mobile landscape, remove the DB back arrow
   completely from hit-testing. Rotate back to portrait to exit during test.
   If SUBS becomes tappable, the back arrow/hit-area was the conflict.
   ========================================================== */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__close {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Dream Bezier Streaming v19 — BODY-level mobile controls portal
   Video may rotate/transform; interactive controls never do. */
.db-mobile-controls-portal {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  display: none !important;
}
.db-mobile-controls-portal.is-active { display: block !important; }

@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .db-mobile-controls-portal .db-sub-controls--mobile-portal {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .db-mobile-controls-portal .db-sub-controls--mobile-portal > *,
  .db-mobile-controls-portal .db-sub-controls--mobile-portal .db-sub-btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .db-mobile-controls-portal .db-sound-toggle--portal {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    z-index: 40 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .db-mobile-controls-portal .db-credits-skip--portal {
    position: absolute !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 35 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  /* Restore the real DB back arrow after the v18 isolation test. */
  .vimeo-modal.db-mobile-landscape-stage .vimeo-modal__close {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Dream Bezier Streaming v20 — mobile portal polish
   Keep the v19 controls portal architecture. Restore the original AUDIO ON visual
   treatment after moving it out of the modal, and remove the duplicate custom
   fullscreen control on mobile. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .db-mobile-controls-portal .db-sound-toggle--portal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 148px !important;
    height: 58px !important;
    padding: 0 22px !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.52) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.28) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 40 !important;
    font: 700 12px/1 "Work Sans", sans-serif !important;
    letter-spacing: .09em !important;
    white-space: nowrap !important;
    transition: opacity .22s ease, transform .22s ease !important;
  }
  .db-mobile-controls-portal .db-sound-toggle--portal.is-confirmed,
  .db-mobile-controls-portal .db-sound-toggle--portal.is-on {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.96) !important;
    -webkit-transform: translate(-50%, -50%) scale(.96) !important;
  }
  .db-mobile-controls-portal .db-sound-toggle--portal .db-audio-on-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .db-mobile-controls-portal .db-sound-toggle--portal .db-audio-on-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }
  .db-mobile-controls-portal .db-sound-toggle--portal .db-audio-on-label {
    display: inline-block !important;
  }

  /* Mobile already opens in DB full-frame. The custom fullscreen control is
     intentionally removed; it is redundant and does not add a larger surface. */
  .db-mobile-controls-portal .db-sub-fs,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-fs {
    display: none !important;
  }
}


/* Dream Bezier Streaming v21 — mobile audio pill + one-shot + no custom FS
   Cosmetic/interaction cleanup only. Keep the v19 body-level controls portal. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  body > #dbMobileControlsPortal > #dbMobileSound.db-sound-toggle.db-sound-toggle--portal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 174px !important;
    min-width: 174px !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    aspect-ratio: auto !important;
    padding: 0 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.56) !important;
    color: #fff !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.30) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 40 !important;
    font-family: \"Work Sans\", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .09em !important;
    white-space: nowrap !important;
  }
  body > #dbMobileControlsPortal > #dbMobileSound .db-audio-on-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
  body > #dbMobileControlsPortal > #dbMobileSound .db-audio-on-label {
    display: inline-block !important;
    width: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  body > #dbMobileControlsPortal .db-sub-fs,
  .vimeo-modal.db-mobile-landscape-stage .db-sub-fs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Dream Bezier Streaming v28 — dedicated mobile masters
   Mobile masters carry burned-in subtitles, so native Vimeo fullscreen is safe.
   The fullscreen trigger lives in the stable BODY-level controls portal. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  body > #dbMobileControlsPortal > #dbMobileFullscreen.db-mobile-fullscreen {
    position: absolute !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    min-width: 148px !important;
    height: 50px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.52) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.28) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 45 !important;
    font: 700 11px/1 "Work Sans", sans-serif !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }
  body > #dbMobileControlsPortal > #dbMobileFullscreen.db-mobile-fullscreen > span:first-child {
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  body > #dbMobileControlsPortal > #dbMobileFullscreen.db-mobile-fullscreen.is-disabled,
  body > #dbMobileControlsPortal > #dbMobileFullscreen.db-mobile-fullscreen:disabled {
    opacity: .38 !important;
    pointer-events: none !important;
  }
}


/* Dream Bezier Streaming v29 — one-tap mobile sound + fullscreen */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  body > #dbMobileControlsPortal > #dbMobileSound.db-sound-toggle.db-sound-toggle--portal {
    width: auto !important;
    min-width: 196px !important;
    max-width: calc(100vw - 48px) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 28px !important;
    gap: 0 !important;
  }
  body > #dbMobileControlsPortal > #dbMobileSound .db-audio-on-icon {
    display: none !important;
  }
  body > #dbMobileControlsPortal > #dbMobileSound .db-audio-on-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .11em !important;
    white-space: nowrap !important;
  }
  body > #dbMobileControlsPortal > #dbMobileFullscreen {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Dream Bezier Streaming v30 — mobile return-to-fullscreen state */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  body > #dbMobileControlsPortal > #dbMobileFullscreen.db-mobile-fullscreen {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    min-width: 172px !important;
    height: 54px !important;
    padding: 0 24px !important;
    z-index: 180 !important;
  }
}