/*
 * Media Hub Studio — Estilos del módulo frontend
 * Autor: Bruno Invernizzi <bruno_invernizzi@hotmail.com>
 * Versión: 3.0.0 — Rediseño completo estilo streaming (alto impacto
 * desktop + mobile). Mantiene TODAS las clases yh- y variables
 * configurables de 2.x: los overrides de CSS de los clientes siguen
 * funcionando.
 * Sin dependencias. Vanilla CSS puro. Sin WebAssetManager.
 * ─────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. VARIABLES CSS (Tema claro — valores por defecto)
   ═══════════════════════════════════════════════════════════════════════ */
.mod-mediahubstudio {
  --yh-accent:       #ff0000;
  --yh-secondary:    #0f0f0f;
  --yh-radius:       8px;
  --yh-gap:          20px;
  --yh-transition:   200ms cubic-bezier(.4, 0, .2, 1);
  --yh-main-size:    66%;
  --yh-card-min-w:   240px;
  --yh-font-family:  inherit;

  /* Colores tema claro */
  --yh-bg:           #f7f7f8;
  --yh-surface:      #ffffff;
  --yh-surface-2:    #ededf0;
  --yh-border:       #dfdfe3;
  --yh-text:         #101014;
  --yh-text-2:       #5f5f66;
  --yh-overlay-bg:   rgba(0,0,0,.52);
  --yh-shadow:       0 1px 4px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --yh-shadow-hover: 0 12px 32px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.1);
  --yh-play-bg:      var(--yh-accent);
  --yh-play-arrow:   #ffffff;
  --yh-skeleton:     #e6e6ea;
  --yh-skeleton-2:   #f2f2f4;

  /* Cristal / degradés (nuevos en 3.0 — internos, con fallback) */
  --yh-glass:        rgba(255,255,255,.72);
  --yh-glass-dark:   rgba(18,18,22,.55);
  --yh-grad-card:    linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 46%, rgba(0,0,0,0) 72%);
  --yh-grad-stage:   linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 42%);

  /* Layout */
  --yh-columns:      3;
  --yh-sidebar-ratio: 2fr 1fr;
}

/* Tema oscuro explícito (paleta streaming: negros profundos) */
.mod-mediahubstudio.yh-theme--dark {
  --yh-bg:           #141414;
  --yh-surface:      #1e1e22;
  --yh-surface-2:    #2a2a30;
  --yh-border:       #3a3a42;
  --yh-text:         #ffffff;
  --yh-text-2:       #b3b3b8;
  --yh-overlay-bg:   rgba(0,0,0,.65);
  --yh-shadow:       0 2px 10px rgba(0,0,0,.45);
  --yh-shadow-hover: 0 16px 42px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  --yh-skeleton:     #26262c;
  --yh-skeleton-2:   #1c1c20;
  --yh-glass:        rgba(30,30,36,.6);
}

/* Tema automático (sigue la preferencia del SO) */
@media (prefers-color-scheme: dark) {
  .mod-mediahubstudio.yh-theme--auto {
    --yh-bg:           #141414;
    --yh-surface:      #1e1e22;
    --yh-surface-2:    #2a2a30;
    --yh-border:       #3a3a42;
    --yh-text:         #ffffff;
    --yh-text-2:       #b3b3b8;
    --yh-overlay-bg:   rgba(0,0,0,.65);
    --yh-shadow:       0 2px 10px rgba(0,0,0,.45);
    --yh-shadow-hover: 0 16px 42px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
    --yh-skeleton:     #26262c;
    --yh-skeleton-2:   #1c1c20;
    --yh-glass:        rgba(30,30,36,.6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. CONTENEDOR RAÍZ
   ═══════════════════════════════════════════════════════════════════════ */
.mod-mediahubstudio {
  background:  var(--yh-bg-override, var(--yh-bg));
  color:       var(--yh-text-override, var(--yh-text));
  font-family: var(--yh-font-family, inherit);
  box-sizing: border-box;
  /* v3.13: configurable desde Estilos → Apariencia general (0 = sin
     padding; vacío/heredar = el clamp responsivo de siempre). */
  padding:    var(--yh-pad, clamp(14px, 3cqi, 32px));
  border-radius: calc(var(--yh-radius) * 1.5);
  container-type: inline-size;
}

.mod-mediahubstudio *,
.mod-mediahubstudio *::before,
.mod-mediahubstudio *::after {
  box-sizing: inherit;
}

.yh-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--yh-text-2);
  border: 1.5px dashed var(--yh-border);
  border-radius: var(--yh-radius);
  font-size: .95rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. FILTROS DE CATEGORÍA (chips estilo streaming)
   ═══════════════════════════════════════════════════════════════════════ */
.yh-filters {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin-bottom: var(--yh-block-gap, calc(var(--yh-gap) * 1.15));
}

.yh-filter-btn {
  padding:          .5em 1.2em;
  border:           1.5px solid transparent;
  border-radius:    100px;
  /* Colores y tamaño configurables desde la pestaña Filtros; los
     fallbacks son los valores automáticos del tema */
  background:       var(--yh-filter-bg, var(--yh-surface-2));
  color:            var(--yh-filter-text, var(--yh-text-2));
  font-size:        var(--yh-filter-size, 14px);
  font-weight:      600;
  letter-spacing:   .01em;
  cursor:           pointer;
  transition:       background var(--yh-transition), color var(--yh-transition),
                    border-color var(--yh-transition), transform var(--yh-transition),
                    box-shadow var(--yh-transition);
  white-space: nowrap;
}

.yh-filter-btn:hover {
  color:        var(--yh-filter-htext, var(--yh-text-override, var(--yh-text)));
  background:   var(--yh-filter-hbg, var(--yh-filter-bg, var(--yh-surface-2)));
  border-color: var(--yh-filter-active, var(--yh-accent));
  transform:    translateY(-1px);
}

.yh-filter-btn.is-active {
  background:   var(--yh-filter-active, var(--yh-accent));
  border-color: var(--yh-filter-active, var(--yh-accent));
  color:        #fff;
  box-shadow:   0 4px 14px rgba(0,0,0,.22);
}

.yh-filter-btn:focus-visible {
  outline: 2px solid var(--yh-accent);
  outline-offset: 2px;
}

/* Mobile: los chips no se apilan — riel horizontal deslizable */
@container (max-width: 520px) {
  .yh-filters {
    flex-wrap:  nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .yh-filters::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. TARJETA DE VIDEO (compartida entre todos los diseños)
   ═══════════════════════════════════════════════════════════════════════ */
.yh-card {
  background:    var(--yh-surface);
  border-radius: var(--yh-radius);
  overflow:      hidden;
  cursor:        pointer;
  border:        none;
  position:      relative;
  isolation:     isolate;
  transition:    transform var(--yh-transition), box-shadow var(--yh-transition),
                 background var(--yh-transition);
  display:       flex;
  flex-direction: column;
}

.yh-has-shadow .yh-card { box-shadow: var(--yh-shadow); }

.yh-card:hover,
.yh-card:focus-visible {
  outline: none;
}

/* Hover estilo streaming: la tarjeta se eleva y crece sutilmente */
.yh-card:hover {
  transform: translateY(-4px) scale(1.02);
  z-index:   2;
}
.yh-has-shadow .yh-card:hover { box-shadow: var(--yh-shadow-hover); }

.yh-card.is-active {
  box-shadow: 0 0 0 2px var(--yh-active-c, var(--yh-accent)), var(--yh-shadow-hover);
}

.yh-card:focus-visible {
  outline: 2px solid var(--yh-accent);
  outline-offset: 2px;
}

/* Miniatura de tarjeta (con shimmer mientras carga la imagen) */
.yh-card__thumb {
  position:    relative;
  overflow:    hidden;
  aspect-ratio: 16 / 9;
  background:  var(--yh-surface-2);
  flex-shrink: 0;
}

.yh-card__thumb:has(.is-loading) {
  background: linear-gradient(110deg,
    var(--yh-skeleton) 8%, var(--yh-skeleton-2) 18%, var(--yh-skeleton) 33%);
  background-size: 200% 100%;
  animation: yhSkeleton 1.4s linear infinite;
}

/* Soporte para relaciones de aspecto variables (todos los layouts) */
.yh-aspect--4-3  .yh-card__thumb { aspect-ratio: 4 / 3; }
.yh-aspect--1-1  .yh-card__thumb { aspect-ratio: 1 / 1; }
.yh-aspect--9-16 .yh-card__thumb { aspect-ratio: 9 / 16; }

.yh-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform calc(var(--yh-transition) * 2);
}

.yh-has-zoom .yh-card:hover .yh-card__img {
  transform: scale(1.08);
}

/* Overlay: degradé cinematográfico desde abajo + botón de play */
.yh-card__overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
  display:  flex;
  align-items: center;
  justify-content: center;
  background: var(--yh-overlay-c, var(--yh-grad-card));
  opacity:    0;
  transition: opacity var(--yh-transition);
}

.yh-card:hover .yh-card__overlay,
.yh-card.is-active .yh-card__overlay {
  opacity: 1;
}

.yh-play-icon {
  width:   clamp(44px, 26%, 64px);
  height:  auto;
  opacity: 0;
  transform: scale(.72) translateY(8px);
  transition: opacity var(--yh-transition), transform var(--yh-transition);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}

.yh-card:hover .yh-play-icon,
.yh-card.is-active .yh-play-icon {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.yh-play-shape { fill: var(--yh-play-bg); }
.yh-play-arrow { fill: var(--yh-play-arrow); }

/* Badge "Short": píldora de cristal */
.yh-badge {
  position:      absolute;
  bottom:        8px;
  left:          8px;
  z-index:       2;
  padding:       3px 10px;
  border-radius: 999px;
  font-size:     .68rem;
  font-weight:   700;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.yh-badge--short {
  background: rgba(12,12,14,.72);
  color:      #fff;
}

/* Meta info de la tarjeta */
.yh-card__meta {
  padding: var(--yh-card-pad, 12px 14px 14px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.yh-card__title {
  font-size:   var(--yh-it-size, .92rem);
  font-weight: var(--yh-it-w, 650);
  letter-spacing: var(--yh-it-ls, -.01em);
  line-height: var(--yh-it-lh, 1.32);
  text-align:  var(--yh-it-align, inherit);
  color:       var(--yh-title-c, var(--yh-text-override, var(--yh-text)));
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.yh-card__date {
  font-size: var(--yh-da-size, .74rem);
  font-weight: var(--yh-da-w, 500);
  letter-spacing: var(--yh-da-ls, .02em);
  line-height: var(--yh-da-lh, normal);
  text-align: var(--yh-da-align, inherit);
  color:     var(--yh-date-c, var(--yh-text-2));
}

.yh-card__desc {
  font-size:   var(--yh-de-size, .82rem);
  font-weight: var(--yh-de-w, inherit);
  letter-spacing: var(--yh-de-ls, normal);
  /* El 1.45 era una declaración duplicada más abajo que PISABA la
     variable (bug v3.12): ahora es solo el fallback. */
  line-height: var(--yh-de-lh, 1.45);
  text-align:  var(--yh-de-align, inherit);
  color:       var(--yh-desc-c, var(--yh-text-2));
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. REPRODUCTOR PRINCIPAL (usado en Sidebar, Sidebar v2, Hbar y Destacado)
   ═══════════════════════════════════════════════════════════════════════ */
/* Alto fijo opcional del principal (pestaña Diseño, 0 = automático) */
.yh-has-mainh .yh-player-stage {
  aspect-ratio: auto;
  height:       var(--yh-main-h, auto);
}

.yh-player-stage {
  position:     relative;
  border-radius: var(--yh-player-radius, calc(var(--yh-radius) * 1.25));
  overflow:     hidden;
  background:   #000;
  aspect-ratio: var(--yh-player-ar, 16 / 9);
  width:        100%;
  box-shadow:   var(--yh-player-shadow, 0 18px 48px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.22));
}

.yh-thumb-overlay {
  position: absolute;
  inset:    0;
  display:  flex;
  align-items: center;
  justify-content: center;
}

/* Viñeta cinematográfica sobre la miniatura del principal */
.yh-thumb-overlay::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
  background: var(--yh-grad-stage);
  pointer-events: none;
}

.yh-thumb-overlay.is-hidden { display: none; }

.yh-main-thumb {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1),
              filter .4s ease, opacity .4s ease;
}

.yh-player-stage:hover .yh-main-thumb { transform: scale(1.035); }

/* Botón de play del reproductor principal (con halo pulsante) */
.yh-play-main {
  position:      relative;
  z-index:       2;
  background:    transparent;
  border:        none;
  border-radius: 50%;
  cursor:        pointer;
  padding:       0;
  width:         var(--yh-play-size, 80px);
  height:        var(--yh-play-size, 80px);
  transition:    transform var(--yh-transition), opacity var(--yh-transition);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.55));
}

.yh-play-main::before {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  animation:     yhPulse 2.6s cubic-bezier(.4, 0, .6, 1) infinite;
  pointer-events: none;
}

.yh-play-main:hover { transform: scale(1.1); }
.yh-play-main:focus-visible { outline: 2px solid #fff; border-radius: 50%; }

.yh-main-play-circle { fill: var(--yh-accent); opacity: .92; }
.yh-main-play-tri    { fill: #fff; }

/* Slot del iframe */
.yh-iframe-slot {
  position: absolute;
  inset:    0;
}

.yh-iframe-slot iframe {
  width:  100%;
  height: 100%;
  border: none;
  display: block;
}

/* Meta info del reproductor principal */
.yh-main-meta {
  padding: 16px 4px 8px;
}

.yh-main-title {
  font-size:   var(--yh-mt-size, clamp(1.08rem, 2.6cqi, 1.45rem));
  font-weight: var(--yh-mt-w, 800);
  letter-spacing: var(--yh-mt-ls, -.02em);
  color:       var(--yh-title-c, var(--yh-text-override, var(--yh-text)));
  margin:      0 0 6px;
  line-height: var(--yh-mt-lh, 1.22);
  text-align:  var(--yh-mt-align, inherit);
}

.yh-main-date {
  /* v3.13: ídem, grupo «Fecha». */
  font-size: var(--yh-da-size, .8rem);
  font-weight: var(--yh-da-w, 500);
  letter-spacing: var(--yh-da-ls, .02em);
  line-height: var(--yh-da-lh, normal);
  text-align: var(--yh-da-align, inherit);
  color:     var(--yh-date-c, var(--yh-text-2));
  display:   block;
  margin-bottom: 8px;
}

.yh-main-desc {
  /* v3.13: el principal ahora consume las variables del grupo
     «Descripción» (antes hardcodeaba todo y los controles no hacían nada). */
  font-size:   var(--yh-de-size, .9rem);
  font-weight: var(--yh-de-w, inherit);
  letter-spacing: var(--yh-de-ls, normal);
  text-align:  var(--yh-de-align, inherit);
  color:       var(--yh-desc-c, var(--yh-text-2));
  margin:      0;
  line-height: var(--yh-de-lh, 1.55);
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. DISEÑO 2: PRINCIPAL + LISTA (.yh-sidebar, clases 2.x conservadas)
   La lista iguala automáticamente el alto del principal; si sobran
   videos aparece un scroll fino interno.
   ═══════════════════════════════════════════════════════════════════════ */
.yh-sidebar {
  display: grid;
  /* v3.16: min() reserva 240px para el riel — con el principal al 100%
     el riel quedaba en ancho cero y "no funcionaba" (bug). */
  grid-template-columns: min(var(--yh-main-size, 66%), calc(100% - 240px - var(--yh-gap))) 1fr;
  gap:     var(--yh-gap);
  align-items: stretch;
}

/* Posición del principal: derecha */
.yh-sidebar--invert {
  grid-template-columns: 1fr min(var(--yh-main-size, 66%), calc(100% - 240px - var(--yh-gap)));
}
.yh-sidebar--invert .yh-sidebar__player   { order: 2; }
.yh-sidebar--invert .yh-sidebar__listwrap { order: 1; }

/* El wrap define el alto (el de la columna del principal); la lista
   se desplaza adentro, en posición absoluta. */
.yh-sidebar__listwrap {
  position:   relative;
  min-height: 280px;
}

/* Lista: filas silenciosas, resaltado al pasar, activo con barra de
   acento — sin lift (el lift es para tarjetas sueltas) */
.yh-sidebar__list {
  position:       absolute;
  inset:          0;
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--yh-gap) * .45);
  overflow-y:     auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--yh-scroll-c, var(--yh-border)) transparent;
  padding-right:  6px;
}

.yh-sidebar__list::-webkit-scrollbar { width: var(--yh-sb-w, 8px); }
.yh-sidebar__list::-webkit-scrollbar-thumb {
  background: var(--yh-scroll-c, var(--yh-border));
  border-radius: 99px;
}

.yh-sidebar__list .yh-card {
  flex:           0 0 auto;
  flex-direction: row;
  min-height:     0;
  background:     transparent;
  box-shadow:     none;
  padding:        6px;
  gap:            2px;
}

.yh-sidebar__list .yh-card:hover {
  transform:  none;
  background: var(--yh-list-hbg, var(--yh-surface-2));
  box-shadow: none;
}

.yh-sidebar__list .yh-card.is-active {
  background: var(--yh-surface-2);
  box-shadow: inset 3px 0 0 var(--yh-active-c, var(--yh-accent));
}

.yh-sidebar__list .yh-card__thumb {
  width:       120px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--yh-radius) * .75);
}

/* Tamaños configurables de miniatura en la lista lateral */
.yh-list-thumb--sm .yh-sidebar__list .yh-card__thumb { width: 84px; }
.yh-list-thumb--md .yh-sidebar__list .yh-card__thumb { width: 120px; }
.yh-list-thumb--lg .yh-sidebar__list .yh-card__thumb { width: 168px; }

.yh-sidebar__list .yh-card__meta {
  padding: 6px 10px;
}

.yh-sidebar__list .yh-card__title {
  font-size: .82rem;
  -webkit-line-clamp: 2;
}

/* Responsive: en angosto se apila y la lista pasa a un riel horizontal
   deslizable con snap — patrón streaming en mobile */
@container (max-width: 600px) {
  .yh-sidebar,
  .yh-sidebar--invert {
    grid-template-columns: 1fr;
  }
  .yh-sidebar--invert .yh-sidebar__player   { order: 0; }
  .yh-sidebar--invert .yh-sidebar__listwrap { order: 0; }
  .yh-sidebar__listwrap {
    min-height: 0;
  }
  .yh-sidebar__list {
    position:       static;
    flex-direction: row;
    overflow-x:     auto;
    overflow-y:     hidden;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .yh-sidebar__list .yh-card {
    flex: 0 0 min(190px, 62cqi);
    flex-direction: column;
    scroll-snap-align: start;
  }
  .yh-list-thumb--sm .yh-sidebar__list .yh-card__thumb,
  .yh-list-thumb--md .yh-sidebar__list .yh-card__thumb,
  .yh-list-thumb--lg .yh-sidebar__list .yh-card__thumb {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. DISEÑO: CUADRÍCULA
   ═══════════════════════════════════════════════════════════════════════ */
.yh-grid {
  display:               grid;
  grid-template-columns: repeat(var(--yh-columns), minmax(min(var(--yh-card-min-w, 200px), 100%), 1fr));
  gap:                   var(--yh-gap);
}

@container (max-width: 700px) {
  .yh-grid { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 440px) {
  .yh-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. DISEÑO: CARRUSEL
   ═══════════════════════════════════════════════════════════════════════ */
.yh-carousel {
  position: relative;
  padding:  0 52px;
}

.yh-carousel__viewport {
  overflow: hidden;
  border-radius: var(--yh-radius);
}

.yh-carousel__track {
  display:    flex;
  gap:        var(--yh-gap);
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
  /* Aire vertical para que el hover con scale no se recorte contra el
     overflow:hidden del viewport (sin padding horizontal: no altera
     los cálculos de desplazamiento del JS) */
  padding: 10px 0;
}

.yh-carousel__track .yh-card {
  /* El ancho de cada ítem lo controla "Tamaño de tarjeta/ítem (px)"
     de la pestaña Diseño: cuanto más chico, más videos visibles.
     min() evita que un valor grande desborde en contenedores chicos. */
  flex:      0 0 min(var(--yh-card-min-w, 240px), 100%);
  min-width: 0;
}

@container (max-width: 600px) {
  .yh-carousel { padding: 0 40px; }
  .yh-carousel__track .yh-card { flex-basis: calc(50% - var(--yh-gap) / 2); }
}

@container (max-width: 380px) {
  .yh-carousel__track .yh-card { flex-basis: 85%; }
}

/* Botones del carrusel: cristal con blur */
.yh-carousel-btn {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  z-index:    5;
  width:      var(--yh-cnav-size, 44px);
  height:     var(--yh-cnav-size, 44px);
  border:     none;
  border-radius: var(--yh-cnav-radius, 50%);
  background: var(--yh-cnav-bg, var(--yh-glass-dark, rgba(18,18,22,.55)));
  color:      var(--yh-cnav-c, #fff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    0;
  transition: background var(--yh-transition), transform var(--yh-transition),
              opacity var(--yh-transition);
}

.yh-carousel-btn--prev { left:  2px; }
.yh-carousel-btn--next { right: 2px; }

.yh-carousel-btn:hover {
  background: var(--yh-cnav-hbg, var(--yh-accent));
  color:      var(--yh-cnav-hc, #fff);
  transform:  translateY(-50%) scale(1.08);
}

.yh-carousel-btn:disabled { opacity: .3; pointer-events: none; }
.yh-carousel-btn svg { width: calc(var(--yh-cnav-size, 44px) * .41); height: calc(var(--yh-cnav-size, 44px) * .41); }

/* Puntos de navegación: el activo se estira como píldora */
.yh-carousel__dots {
  display:         flex;
  justify-content: center;
  gap:             12px;
  margin-top:      16px;
}

.yh-dot {
  /* El punto visible sigue siendo chico (8px) pero el área táctil se
     amplía a 44×44 (WCAG 2.5.5) con un pseudo-elemento invisible, así
     no se rompe el diseño del slidenav. */
  width:         8px;
  height:        8px;
  border-radius: 99px;
  border:        none;
  background:    var(--yh-border);
  cursor:        pointer;
  padding:       0;
  position:      relative;
  transition:    background var(--yh-transition), width var(--yh-transition);
}

.yh-dot::before {
  content:  '';
  position: absolute;
  top:      50%;
  left:     50%;
  width:    44px;
  height:   44px;
  transform: translate(-50%, -50%);
}

.yh-dot.is-active {
  background: var(--yh-active-c, var(--yh-accent));
  width:      24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. DISEÑO: DESTACADO
   ═══════════════════════════════════════════════════════════════════════ */
.yh-featured__hero {
  margin-bottom: var(--yh-gap);
  /* Tamaño del video principal (%) desde la pestaña Diseño, centrado */
  width:        var(--yh-main-size, 100%);
  max-width:    100%;
  margin-inline: auto;
}

.yh-featured__secondary {
  margin-top: var(--yh-gap);
}

/* ═══════════════════════════════════════════════════════════════════════
   10. MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.yh-modal {
  position: fixed;
  inset:    0;
  z-index:  9990;
  display:  flex;
  align-items: center;
  justify-content: center;
  padding:  16px;
}

.yh-modal[hidden] { display: none !important; }

.yh-modal__backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: yhFadeIn 200ms ease;
}

.yh-modal__box {
  position:      relative;
  z-index:       1;
  width:         min(960px, 100%);
  background:    #000;
  border-radius: calc(var(--yh-radius) + 6px);
  overflow:      hidden;
  box-shadow:    0 32px 88px rgba(0,0,0,.7);
  animation:     yhSlideUp 300ms cubic-bezier(.34, 1.56, .64, 1);
}

.yh-modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      #0c0c0e;
}

.yh-modal__title {
  color:       #fff;
  font-size:   .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin:      0;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   85%;
}

.yh-modal__close {
  background:    rgba(255,255,255,.08);
  border:        none;
  color:         #ccc;
  cursor:        pointer;
  padding:       6px;
  border-radius: 50%;
  display:       flex;
  transition:    color var(--yh-transition), background var(--yh-transition),
                 transform var(--yh-transition);
  flex-shrink:   0;
}

.yh-modal__close:hover { color: #fff; background: rgba(255,255,255,.16); transform: rotate(90deg); }
.yh-modal__close svg { width: 20px; height: 20px; }

.yh-modal__stage {
  position:     relative;
  aspect-ratio: 16 / 9;
  background:   #000;
}

.yh-modal__stage .yh-iframe-slot { position: static; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   11. ANIMACIONES
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes yhFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes yhSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

@keyframes yhSkeleton {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes yhPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  70%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. ESTADO VACÍO Y ERRORES
   ═══════════════════════════════════════════════════════════════════════ */
.yh-card.yh-card--hidden {
  display: none;
}

/* Accesibilidad: focus visible en toda la galería */
.mod-mediahubstudio :focus-visible {
  outline:        2px solid var(--yh-accent);
  outline-offset: 2px;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .mod-mediahubstudio *,
  .mod-mediahubstudio *::before,
  .mod-mediahubstudio *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. ESTILOS DE TARJETA (elevated / flat / outline / minimal)
   ═══════════════════════════════════════════════════════════════════════ */

/* "elevated" es el default: sombra + lift, ya cubierto más arriba */

.yh-card-style--flat .yh-card {
  border:     none;
  box-shadow: none;
  background: transparent;
}
.yh-card-style--flat .yh-card:hover { transform: none; box-shadow: none; }
.yh-card-style--flat .yh-card__thumb { border-radius: var(--yh-radius); }

.yh-card-style--outline .yh-card {
  box-shadow:   none;
  border:       1.5px solid var(--yh-border);
  background:   var(--yh-surface);
}
.yh-card-style--outline .yh-card:hover {
  border-color: var(--yh-accent);
  transform:    none;
  box-shadow:   none;
}

.yh-card-style--minimal .yh-card {
  border:     none;
  box-shadow: none;
  background: transparent;
}
.yh-card-style--minimal .yh-card:hover { transform: none; box-shadow: none; }
.yh-card-style--minimal .yh-card__meta {
  padding-left:  2px;
  padding-right: 2px;
}
.yh-card-style--minimal .yh-card__thumb { border-radius: var(--yh-radius); }

/* ═══════════════════════════════════════════════════════════════════════
   14. TAMAÑOS DE TEXTO (sm / md / lg)
   ═══════════════════════════════════════════════════════════════════════ */

.yh-text-size--sm .yh-card__title  { font-size: .8rem; }
.yh-text-size--sm .yh-card__desc   { font-size: .74rem; }
.yh-text-size--sm .yh-card__date   { font-size: .68rem; }
.yh-text-size--sm .yh-main-title   { font-size: clamp(.95rem, 2.2cqi, 1.15rem); }
.yh-text-size--sm .yh-main-desc    { font-size: .8rem; }

.yh-text-size--lg .yh-card__title  { font-size: 1.04rem; }
.yh-text-size--lg .yh-card__desc   { font-size: .92rem; }
.yh-text-size--lg .yh-card__date   { font-size: .84rem; }
.yh-text-size--lg .yh-main-title   { font-size: clamp(1.25rem, 3cqi, 1.7rem); }
.yh-text-size--lg .yh-main-desc    { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════
   15. FORMA DEL BOTÓN DE REPRODUCCIÓN PRINCIPAL
   ═══════════════════════════════════════════════════════════════════════ */

/* "rounded" (default) ya es un círculo dibujado en el SVG — sin cambios */

.yh-player-shape--square .yh-play-main,
.yh-player-shape--pill .yh-play-main {
  background: var(--yh-accent);
  filter:     drop-shadow(0 8px 20px rgba(0,0,0,.4));
  display:    flex;
  align-items: center;
  justify-content: center;
}

.yh-player-shape--square .yh-play-main { border-radius: 18px; }

.yh-player-shape--pill .yh-play-main {
  border-radius: 999px;
  width:         calc(var(--yh-play-size, 80px) * 1.4);
}

.yh-player-shape--square .yh-main-play-circle,
.yh-player-shape--pill .yh-main-play-circle {
  display: none;
}

.yh-player-shape--square .yh-main-play-tri,
.yh-player-shape--pill .yh-main-play-tri {
  fill: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. ESTILOS DE FILTRO (pills / tabs / underline / buttons)
   ═══════════════════════════════════════════════════════════════════════ */

.yh-filters--align-left   { justify-content: flex-start; }
.yh-filters--align-center { justify-content: center; }
.yh-filters--align-right  { justify-content: flex-end; }

/* "pills" es el default — ya cubierto por .yh-filter-btn más arriba */

/* Tabs: fondo con la pestaña activa "levantada" */
.yh-filters--tabs {
  border-bottom: 2px solid var(--yh-border);
  gap: 2px;
}
.yh-filters--tabs .yh-filter-btn {
  border:              none;
  border-radius:       var(--yh-radius) var(--yh-radius) 0 0;
  background:          var(--yh-surface-2);
  margin-bottom:       -2px;
  box-shadow:          none;
  transform:           none;
}
.yh-filters--tabs .yh-filter-btn.is-active {
  background:    var(--yh-surface);
  color:         var(--yh-filter-active, var(--yh-accent));
  border-bottom: 2px solid var(--yh-filter-active, var(--yh-accent));
}

/* Underline: minimalista, sin fondo, solo una línea debajo del activo */
.yh-filters--underline .yh-filter-btn {
  border:        none;
  border-radius: 0;
  background:    transparent;
  padding:       6px 4px;
  border-bottom: 2px solid transparent;
  box-shadow:    none;
  transform:     none;
}
.yh-filters--underline .yh-filter-btn.is-active {
  background:    transparent;
  color:         var(--yh-filter-active, var(--yh-accent));
  border-bottom-color: var(--yh-filter-active, var(--yh-accent));
}

/* Buttons: rectangulares con el radio del tema */
.yh-filters--buttons .yh-filter-btn {
  border-radius: var(--yh-radius);
}

/* ═══════════════════════════════════════════════════════════════════════
   17. DISEÑO: BARRA LATERAL V2 (principal + carrusel vertical)
   ═══════════════════════════════════════════════════════════════════════ */

.yh-sidebar2 {
  display: grid;
  /* v3.16: min() reserva 240px para el riel — con el principal al 100%
     el riel quedaba en ancho cero y "no funcionaba" (bug). */
  grid-template-columns: min(var(--yh-main-size, 66%), calc(100% - 240px - var(--yh-gap))) 1fr;
  gap:     var(--yh-gap);
  align-items: stretch;
}

/* Posición invertida: principal a la derecha, carrusel a la izquierda */
.yh-sidebar2--invert {
  grid-template-columns: 1fr min(var(--yh-main-size, 66%), calc(100% - 240px - var(--yh-gap)));
}

.yh-sidebar2--invert .yh-sidebar2__player { order: 2; }
.yh-sidebar2--invert .yh-sidebar2__rail   { order: 1; }

/* El riel vertical: su alto queda determinado por el reproductor
   principal (el contenido desplazable está en posición absoluta, así
   que no "empuja" la fila hacia abajo — se desplaza adentro). */
.yh-sidebar2__rail {
  position:   relative;
  min-height: 280px;
}

.yh-sidebar2__scroll {
  position:   absolute;
  inset:      0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display:               grid;
  grid-template-columns: repeat(var(--yh-side-cols, 2), 1fr);
  gap:            calc(var(--yh-gap) * .6);
  align-content:  start;
  padding-right:  6px;
  scrollbar-width: thin;
  /* v3.16.1: track visible (antes transparente) y SIN la máscara de
     desvanecido — la máscara se aplicaba a toda la caja INCLUIDA la
     barra de scroll, que quedaba desvanecida/invisible: "el scroll no
     funciona" (bug reportado). El layout 2, idéntico pero sin máscara,
     siempre anduvo. */
  scrollbar-color: var(--yh-scroll-c, var(--yh-border)) rgba(127,127,127,.18);
  scrollbar-gutter: stable;
}

.yh-sidebar2__scroll::-webkit-scrollbar { width: var(--yh-sb-w, 8px); }
.yh-sidebar2__scroll::-webkit-scrollbar-track { background: rgba(127,127,127,.18); border-radius: 99px; }
.yh-sidebar2__scroll::-webkit-scrollbar-thumb {
  background: var(--yh-scroll-c, var(--yh-border));
  border-radius: 99px;
}

/* Responsive: en contenedores angostos se apila — principal arriba,
   carrusel debajo como grilla normal (sin scroll interno). */
@container (max-width: 640px) {
  .yh-sidebar2,
  .yh-sidebar2--invert {
    grid-template-columns: 1fr;
  }
  .yh-sidebar2--invert .yh-sidebar2__player { order: 0; }
  .yh-sidebar2--invert .yh-sidebar2__rail   { order: 0; }
  .yh-sidebar2__rail {
    min-height: 0;
  }
  .yh-sidebar2__scroll {
    position:   static;
    overflow-y: visible;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   18. DISEÑO: BARRA HORIZONTAL (principal + carrusel horizontal debajo)
   ═══════════════════════════════════════════════════════════════════════ */

.yh-hbar {
  display:        flex;
  flex-direction: column;
  gap:            var(--yh-gap);
}

/* Posición del principal: abajo (la fila de miniaturas queda arriba) */
.yh-hbar--mainbottom { flex-direction: column-reverse; }

.yh-hbar__player {
  /* Tamaño del video principal (%) desde la pestaña Diseño, centrado */
  width:         var(--yh-main-size, 100%);
  max-width:     100%;
  margin-inline: auto;
}

.yh-hbar__rail {
  /* La fila iguala automáticamente el ancho del principal */
  width:         var(--yh-main-size, 100%);
  max-width:     100%;
  margin-inline: auto;
  display:    flex;
  gap:        var(--yh-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 8px 2px 10px;
  -webkit-overflow-scrolling: touch;
  /* Scroll fino horizontal (slimScrollBar del diseño) */
  scrollbar-width: thin;
  scrollbar-color: var(--yh-scroll-c, var(--yh-border)) transparent;
}

.yh-hbar__rail::-webkit-scrollbar { height: var(--yh-sb-w, 8px); }
.yh-hbar__rail::-webkit-scrollbar-thumb {
  background: var(--yh-scroll-c, var(--yh-border));
  border-radius: 99px;
}

.yh-hbar__rail .yh-card {
  /* El ancho de cada ítem se adapta a la cantidad de columnas elegida
     (1-4): cada ítem ocupa 1/N del ancho visible, descontando los gaps. */
  flex: 0 0 calc((100% - (var(--yh-side-cols, 2) - 1) * var(--yh-gap)) / var(--yh-side-cols, 2));
  min-width: 0;
  scroll-snap-align: start;
}

/* Responsive: en contenedores angostos, mínimo razonable por ítem para
   que no queden ilegibles con 4 columnas. */
@container (max-width: 520px) {
  .yh-hbar__rail .yh-card {
    flex-basis: max(
      calc((100% - (var(--yh-side-cols, 2) - 1) * var(--yh-gap)) / var(--yh-side-cols, 2)),
      160px
    );
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   19. MODOS DE TÍTULO EN ÍTEMS DEL CARRUSEL (fuera / dentro / al hover)
   Aplican a Barra lateral v2 y Barra horizontal.
   ═══════════════════════════════════════════════════════════════════════ */

/* Título superpuesto: oculto por defecto (modo "fuera" = meta normal) */
.yh-card__thumb-title {
  display: none;
}

/* Modo "dentro": título siempre visible sobre la miniatura, con
   degradé para asegurar legibilidad; se oculta la meta de abajo. */
.yh-title-mode--inside .yh-sidebar2__scroll .yh-card__thumb-title,
.yh-title-mode--inside .yh-hbar__rail .yh-card__thumb-title,
.yh-title-mode--inside .yh-pcuadvh .yh-card__thumb-title,
.yh-title-mode--inside .yh-pcuadfull .yh-card__thumb-title,
.yh-title-mode--hover  .yh-sidebar2__scroll .yh-card__thumb-title,
.yh-title-mode--hover  .yh-hbar__rail .yh-card__thumb-title,
.yh-title-mode--hover  .yh-pcuadvh .yh-card__thumb-title,
.yh-title-mode--hover  .yh-pcuadfull .yh-card__thumb-title {
  display:     block;
  position:    absolute;
  inset:       auto 0 0 0;
  z-index:     2;
  padding:     30px 12px 10px;
  /* v3.17: scrim en dos paradas (más suave arriba, más firme abajo) +
     sombra de texto — legibilidad tipo No Boss/YouTube sobre cualquier
     miniatura. */
  background:  linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  color:       #fff;
  font-size:   .82rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow:        hidden;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  pointer-events: none;
}

.yh-title-mode--inside .yh-sidebar2__scroll .yh-card__meta,
.yh-title-mode--inside .yh-hbar__rail .yh-card__meta,
.yh-title-mode--inside .yh-pcuadvh .yh-card__meta,
.yh-title-mode--inside .yh-pcuadfull .yh-card:not(.yh-pcuadfull__hero) .yh-card__meta,
.yh-title-mode--hover  .yh-sidebar2__scroll .yh-card__meta,
.yh-title-mode--hover  .yh-hbar__rail .yh-card__meta,
.yh-title-mode--hover  .yh-pcuadvh .yh-card__meta,
.yh-title-mode--hover  .yh-pcuadfull .yh-card:not(.yh-pcuadfull__hero) .yh-card__meta {
  display: none;
}

/* Modo "al hover": igual que "dentro" pero aparece con transición al
   pasar el mouse (o al enfocar con teclado). */
.yh-title-mode--hover .yh-sidebar2__scroll .yh-card__thumb-title,
.yh-title-mode--hover .yh-hbar__rail .yh-card__thumb-title,
.yh-title-mode--hover .yh-pcuadvh .yh-card__thumb-title,
.yh-title-mode--hover .yh-pcuadfull .yh-card__thumb-title {
  opacity:    0;
  transform:  translateY(6px);
  transition: opacity var(--yh-transition), transform var(--yh-transition);
}

.yh-title-mode--hover .yh-sidebar2__scroll .yh-card:hover .yh-card__thumb-title,
.yh-title-mode--hover .yh-sidebar2__scroll .yh-card:focus-visible .yh-card__thumb-title,
.yh-title-mode--hover .yh-hbar__rail .yh-card:hover .yh-card__thumb-title,
.yh-title-mode--hover .yh-hbar__rail .yh-card:focus-visible .yh-card__thumb-title,
.yh-title-mode--hover .yh-pcuadvh .yh-card:hover .yh-card__thumb-title,
.yh-title-mode--hover .yh-pcuadvh .yh-card:focus-visible .yh-card__thumb-title,
.yh-title-mode--hover .yh-pcuadfull .yh-card:hover .yh-card__thumb-title,
.yh-title-mode--hover .yh-pcuadfull .yh-card:focus-visible .yh-card__thumb-title {
  opacity:   1;
  transform: translateY(0);
}

/* ═══ Lazy-load con blur ═══════════════════════════════════════════ */
.yh-card__img,
.yh-main-thumb {
  transition: transform calc(var(--yh-transition) * 2), filter .4s ease, opacity .4s ease;
}
.yh-card__img.is-loading,
.yh-main-thumb.is-loading {
  filter: blur(12px);
  opacity: .55;
}

/* ═══ Buscador frontend (píldora estilo app) ═══════════════════════ */
.yh-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.yh-search__input {
  flex: 1 1 auto;
  max-width: 380px;
  padding: 10px 18px;
  font-size: 14px;
  border: 1.5px solid var(--yh-border);
  border-radius: 999px;
  background: var(--yh-surface);
  color: var(--yh-text-override, var(--yh-text));
  transition: border-color var(--yh-transition), box-shadow var(--yh-transition);
}
.yh-search__input::placeholder { color: var(--yh-text-2); }
.yh-search__input:focus {
  outline: none;
  border-color: var(--yh-accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.yh-search__count {
  font-size: 13px;
  color: var(--yh-text-2);
  white-space: nowrap;
}

/* ═══ Botón "Cargar más" (píldora protagonista) ════════════════════ */
.yh-loadmore {
  display: flex;
  justify-content: center;
  margin: 22px 0 4px;
}
.yh-loadmore__btn {
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--yh-btn-c, var(--yh-accent));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: filter .2s ease, transform var(--yh-transition), box-shadow var(--yh-transition);
}
.yh-loadmore__btn:hover  { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.yh-loadmore__btn:active { transform: translateY(0); }
.yh-loadmore__btn:focus-visible { outline: 2px solid var(--yh-accent); outline-offset: 2px; }

/* ═══ Reproductor MP4 propio (estilo Netflix) ═══════════════════════ */
.yh-mp4 {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    border-radius: inherit;
}
.yh-mp4__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    cursor: pointer;
}
/* Botón grande central de play (aparece cuando está pausado).
   Mismo formato que el botón del reproductor principal (yh-play-main):
   círculo con color de acento y triángulo blanco. */
.yh-mp4__big {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 68px;
    border: none; background: none; padding: 0;
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease, transform .15s ease;
    z-index: 3;
}
.yh-mp4.is-playing .yh-mp4__big { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.7); }
.yh-mp4__big:hover { transform: translate(-50%,-50%) scale(1.1); }
.yh-mp4__big:focus-visible { outline: 2px solid #fff; border-radius: 50%; }
.yh-mp4__big svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.yh-mp4__big-bg { fill: var(--yh-accent, #e50914); opacity: .9; }
.yh-mp4__big-ic { fill: #fff; }
.yh-mp4__big:hover .yh-mp4__big-bg { opacity: 1; }

/* Barra de controles inferior */
.yh-mp4__controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    pointer-events: none;
}
.yh-mp4__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.35) 60%, transparent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}
.yh-mp4:hover .yh-mp4__bar,
.yh-mp4:not(.is-playing) .yh-mp4__bar,
.yh-mp4:focus-within .yh-mp4__bar { opacity: 1; transform: translateY(0); }

.yh-mp4__btn {
    background: none; border: none; color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    padding: 4px; border-radius: 4px;
    transition: transform .1s ease, color .15s ease;
}
.yh-mp4__btn:hover { transform: scale(1.15); color: var(--yh-accent, #e50914); }
.yh-mp4__time { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }

/* Barra de progreso */
.yh-mp4__seek {
    -webkit-appearance: none; appearance: none;
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.3);
    cursor: pointer;
}
.yh-mp4__seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--yh-accent, #e50914);
    box-shadow: 0 0 4px rgba(0,0,0,.5);
    cursor: pointer;
}
.yh-mp4__seek::-moz-range-thumb {
    width: 14px; height: 14px; border: none; border-radius: 50%;
    background: var(--yh-accent, #e50914); cursor: pointer;
}
/* Volumen (más corto) */
.yh-mp4__vol {
    -webkit-appearance: none; appearance: none;
    width: 70px; height: 4px; border-radius: 3px;
    background: rgba(255,255,255,.3); cursor: pointer;
}
.yh-mp4__vol::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; cursor: pointer;
}
.yh-mp4__vol::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff; cursor: pointer; }
.yh-mp4__rate { font-size: 13px; font-weight: 600; min-width: 34px; }

/* En pantallas chicas, ocultar el volumen deslizante (queda el mute) */
@media (max-width: 560px) {
    .yh-mp4__vol { display: none; }
    .yh-mp4__rate { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. DISEÑO 1: PRINCIPAL (v3.1.0) — solo el reproductor principal
   ═══════════════════════════════════════════════════════════════════════ */
.yh-principal {
  width:         var(--yh-main-size, 100%);
  max-width:     100%;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. DISEÑO 5: PRINCIPAL + CUADRÍCULA VERTICAL Y HORIZONTAL (v3.1.0)
   Miniaturas al costado (igualan el alto del principal) y debajo
   (igualan el ancho total). Sin scroll: el JS reparte las tarjetas
   entre franja y fila; la fila recorta el exceso con filas colapsadas.
   ═══════════════════════════════════════════════════════════════════════ */
.yh-pcuadvh {
  display: grid;
  /* v3.16.1 (spec): la franja lateral mide EXACTAMENTE una tarjeta de la
     fila inferior de 4 → todas las tarjetas son del mismo tamaño. El
     principal ocupa el resto (este diseño ignora «Tamaño del principal»). */
  grid-template-columns: 1fr calc((100% - 3 * var(--yh-gap)) / 4);
  gap:     var(--yh-gap);
  align-items: stretch;
}

/* Posición del principal: derecha */
.yh-pcuadvh--invert {
  grid-template-columns: calc((100% - 3 * var(--yh-gap)) / 4) 1fr;
}
.yh-pcuadvh--invert .yh-pcuadvh__player { order: 2; }
.yh-pcuadvh--invert .yh-pcuadvh__rail   { order: 1; }

/* Franja lateral: alto = el del principal, sin scroll */
.yh-pcuadvh__rail {
  position:   relative;
  min-height: 280px;
}

.yh-pcuadvh__grid {
  position:   absolute;
  inset:      0;
  overflow:   hidden;
  display:    grid;
  /* v3.16 (spec de Bruno): la franja lateral es SIEMPRE de 1 columna
     (ignora side_columns); la fila inferior, de 4. Sin scroll. */
  grid-template-columns: 1fr;
  gap:            calc(var(--yh-gap) * .6);
  align-content:  start;
}

/* Fila inferior: ancho completo, UNA fila visible (las filas extra
   colapsan a 0 y el overflow queda recortado) */
.yh-pcuadvh__bottom {
  grid-column: 1 / -1;
  display: grid;
  /* v3.16: exactamente 4 columnas, una sola fila visible, sin scroll. */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: 0;
  gap: 0 var(--yh-gap);
  overflow: hidden;
}

/* Responsive: apilado — franja como grilla normal y fila debajo */
@container (max-width: 640px) {
  .yh-pcuadvh,
  .yh-pcuadvh--invert {
    grid-template-columns: 1fr;
  }
  .yh-pcuadvh--invert .yh-pcuadvh__player { order: 0; }
  .yh-pcuadvh--invert .yh-pcuadvh__rail   { order: 0; }
  .yh-pcuadvh__rail { min-height: 0; }
  .yh-pcuadvh__grid {
    position: static;
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   22. DISEÑO 6: PRINCIPAL + CUADRÍCULA COMPLETA (v3.1.0)
   El principal incrustado en la grilla (arriba a la izquierda, ocupa
   2×2); los videos rellenan alrededor con flujo denso. Sin scroll.
   ═══════════════════════════════════════════════════════════════════════ */
.yh-pcuadfull {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--yh-card-min-w, 240px), 100%), 1fr));
  grid-auto-flow: dense;
  gap: var(--yh-gap);
}

.yh-pcuadfull__hero {
  grid-column: 1 / span 2;
  grid-row:    1 / span 2;
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

.yh-pcuadfull__hero .yh-player-stage {
  aspect-ratio: auto;
  height:       auto;
  flex:         1 1 auto;
  min-height:   200px;
}

.yh-pcuadfull__hero .yh-main-meta {
  padding-bottom: 0;
}

/* Responsive: en angosto el principal ocupa una celda normal */
@container (max-width: 560px) {
  .yh-pcuadfull__hero {
    grid-column: auto;
    grid-row:    auto;
  }
  .yh-pcuadfull__hero .yh-player-stage {
    aspect-ratio: 16 / 9;
    flex:         0 0 auto;
    min-height:   0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   23. DISEÑO 8: CARRUSEL VERTICAL (v3.1.0)
   Flechas arriba/abajo, slidenav vertical opcional. El alto del
   viewport lo fija el JS (ítems visibles = "Columnas").
   ═══════════════════════════════════════════════════════════════════════ */
.yh-vcarousel {
  width:         min(100%, calc(var(--yh-card-min-w, 240px) * 1.6));
  margin-inline: auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
}

/* Las flechas heredan el estilo de cristal del carrusel horizontal,
   pero en flujo normal (no absolutas) */
.yh-vcarousel .yh-carousel-btn {
  position:  static;
  transform: none;
}
.yh-vcarousel .yh-carousel-btn:hover {
  transform: scale(1.08);
}

.yh-vcarousel__body {
  display:     flex;
  align-items: center;
  gap:         12px;
  width:       100%;
}

.yh-vcarousel__viewport {
  flex:     1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--yh-radius);
  padding: 2px;
}

.yh-vcarousel__track {
  display:        flex;
  flex-direction: column;
  gap:            var(--yh-gap);
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

.yh-vcarousel__track .yh-card {
  flex: 0 0 auto;
}

/* Slidenav vertical: columna de puntos al costado; el activo se
   estira como píldora vertical */
.yh-vcarousel__dots {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex-shrink:    0;
}

.yh-vcarousel__dots .yh-dot {
  transition: background var(--yh-transition), height var(--yh-transition);
}

.yh-vcarousel__dots .yh-dot.is-active {
  width:  8px;
  height: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   24. DESIGN SYSTEM (v3.2.0) — pestaña Estilos
   Variables y clases emitidas por el template desde styles_json.
   Todo con fallback al comportamiento previo: sin configurar nada,
   el componente se ve exactamente igual que en 3.1.0.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ancho del componente ── */
.mod-mediahubstudio.yh-w-full   { width: 100%; max-width: none; }
.mod-mediahubstudio.yh-w-custom { width: 100%; max-width: var(--yh-comp-max, none); margin-inline: auto; }

/* ── Colores/tipografía en la meta del principal ── */
.yh-main-date { color: var(--yh-date-c, var(--yh-text-2)); }
.yh-main-desc { color: var(--yh-desc-c, var(--yh-text-2)); }

/* Links dentro de descripciones */
.yh-main-desc a, .yh-card__desc a { color: var(--yh-link-c, var(--yh-accent)); }

/* Etiquetas y badges (tipografía lb) */
.yh-badge, .yh-filter-btn {
  font-size: var(--yh-lb-size, inherit);
  font-weight: var(--yh-lb-w, inherit);
  letter-spacing: var(--yh-lb-ls, inherit);
  line-height: var(--yh-lb-lh, inherit);
}

/* ── Reproductor: sombras preseteadas ── */
.yh-pshadow--none   .yh-player-stage { --yh-player-shadow: none; }
.yh-pshadow--soft   .yh-player-stage { --yh-player-shadow: 0 6px 18px rgba(0,0,0,.18); }
.yh-pshadow--medium .yh-player-stage { --yh-player-shadow: 0 12px 32px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18); }
.yh-pshadow--strong .yh-player-stage { --yh-player-shadow: 0 24px 64px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.30); }

/* ── Reproductor: borde ── */
.yh-pborder .yh-player-stage {
  border: var(--yh-player-bw, 2px) solid var(--yh-player-bc, var(--yh-accent));
}

/* ── Reproductor: loader al cambiar de video ──
   El JS pone .is-switching en el stage al montar el iframe/video y lo
   saca cuando termina de cargar. */
.yh-ploader--spinner .yh-player-stage.is-switching::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--yh-accent);
  border-radius: 50%;
  animation: yhSpin .8s linear infinite;
  z-index: 5;
  pointer-events: none;
}

.yh-ploader--skeleton .yh-player-stage.is-switching::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,.04) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.04) 70%);
  background-size: 200% 100%;
  animation: yhShimmerP 1.1s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}

@keyframes yhSpin     { to { transform: rotate(360deg); } }
@keyframes yhShimmerP { to { background-position: -200% 0; } }

/* ── Reproductor: animación de entrada del video nuevo ── */
.yh-planim--fade  .yh-player-stage.is-entering .yh-iframe-slot { animation: yhPFade  .5s ease both; }
.yh-planim--slide .yh-player-stage.is-entering .yh-iframe-slot { animation: yhPSlide .45s cubic-bezier(.4,0,.2,1) both; }
.yh-planim--zoom  .yh-player-stage.is-entering .yh-iframe-slot { animation: yhPZoom  .45s cubic-bezier(.4,0,.2,1) both; }

@keyframes yhPFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes yhPSlide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes yhPZoom  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── Tarjetas: radio, borde y sombras preseteadas ── */
.yh-card { border-radius: var(--yh-card-radius, var(--yh-radius)); }

.yh-cborder .yh-card {
  border: var(--yh-card-bw, 1px) solid var(--yh-card-bc, var(--yh-border));
}

.yh-cardshadow--none   .yh-card { box-shadow: none; }
.yh-cardshadow--soft   .yh-card { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.yh-cardshadow--medium .yh-card { box-shadow: 0 4px 16px rgba(0,0,0,.16), 0 1px 4px rgba(0,0,0,.10); }
.yh-cardshadow--strong .yh-card { box-shadow: 0 10px 32px rgba(0,0,0,.26), 0 3px 8px rgba(0,0,0,.16); }

/* ── Tarjetas: efecto al pasar el mouse ──
   El default (sin clase) sigue siendo la elevación de 3.0.0. */
.yh-hovfx--scale .yh-card:hover { transform: scale(1.045); }
.yh-hovfx--glow  .yh-card:hover {
  transform: none;
  box-shadow: 0 0 0 1px var(--yh-accent), 0 0 22px color-mix(in srgb, var(--yh-accent) 55%, transparent);
}
.yh-hovfx--none .yh-card:hover { transform: none; }
.yh-hovfx--none.yh-has-shadow .yh-card:hover { box-shadow: var(--yh-shadow); }

/* ── Miniaturas: radio y relación de aspecto propia ──
   (después de las reglas yh-aspect--* para ganar por orden) */
.yh-card__thumb { border-radius: var(--yh-thumb-radius, 0); }

.yh-thumb-aspect--16-9 .yh-card__thumb { aspect-ratio: 16 / 9; }
.yh-thumb-aspect--4-3  .yh-card__thumb { aspect-ratio: 4 / 3; }
.yh-thumb-aspect--1-1  .yh-card__thumb { aspect-ratio: 1 / 1; }
.yh-thumb-aspect--9-16 .yh-card__thumb { aspect-ratio: 9 / 16; }

/* ── Miniaturas: efecto hover propio (pisa al zoom legacy) ── */
.yh-thumbfx--zoom   .yh-card:hover .yh-card__img { transform: scale(1.08); }
.yh-thumbfx--darken .yh-card:hover .yh-card__img { transform: none; filter: brightness(.65); }
.yh-thumbfx--glow   .yh-card:hover .yh-card__img { transform: none; }
.yh-thumbfx--glow   .yh-card:hover .yh-card__thumb { box-shadow: inset 0 0 0 2px var(--yh-accent); }
.yh-thumbfx--none   .yh-card:hover .yh-card__img { transform: none; filter: none; }

/* ── Miniaturas: visibilidad de elementos ── */
.yh-noplay .yh-card__overlay .yh-play-icon { display: none; }
.yh-noshort .yh-badge--short { display: none; }

/* Badge de categoría: oculto por defecto, visible con .yh-catbadge */
.yh-badge--cat { display: none; }
.yh-catbadge .yh-badge--cat {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 8px;
  background: color-mix(in srgb, var(--yh-accent) 88%, #000);
  color: #fff;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
   25. DESIGN SYSTEM v3.3.0 — secciones 8-14 de la pestaña Estilos
   (Lista, Cuadrículas responsive, Carruseles, Botones, Animaciones de
   entrada, Responsive y Scrollbars). Las columnas/gaps responsive se
   emiten como media queries en el <style> por instancia del template.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 8. Lista de videos ── */
.yh-sidebar__list { gap: var(--yh-list-gap, calc(var(--yh-gap) * .45)); }

.yh-list-noscroll .yh-sidebar__list { scrollbar-width: none; }
.yh-list-noscroll .yh-sidebar__list::-webkit-scrollbar { display: none; }

/* ── 9. Cuadrículas: gaps horizontal/vertical separados ── */
.yh-grid {
  column-gap: var(--yh-gap-x, var(--yh-gap));
  row-gap:    var(--yh-gap-y, var(--yh-gap));
}

/* ── 10. Carruseles ── */
/* Slides visibles fijos (horizontal): N tarjetas exactas por vista */
.yh-car-fixed .yh-carousel__track .yh-card {
  flex: 0 0 calc((100% - (var(--yh-car-n, 3) - 1) * var(--yh-gap)) / var(--yh-car-n, 3));
}

/* Ocultar flechas (cubre carrusel horizontal y vertical) */
.yh-noarrows .yh-carousel-btn { display: none; }

/* ── 11. Botón «Mostrar más» ── */
.yh-loadmore__btn {
  border-radius: var(--yh-btn-radius, 999px);
  padding: 12px var(--yh-btn-px, 32px);
  font-size: var(--yh-btn-size, 14px);
  color: var(--yh-btn-text, #fff);
}

.yh-loadmore__btn:hover {
  background: var(--yh-btn-hbg, var(--yh-btn-c, var(--yh-accent)));
}

/* ── 12. Animación de entrada de las tarjetas ──
   Cascada al cargar (backwards mantiene el estado inicial durante el
   delay). Se respeta la preferencia de reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .yh-enter--fade   .yh-card { animation: yhEnFade   .55s ease both; }
  .yh-enter--slide  .yh-card { animation: yhEnSlide  .55s cubic-bezier(.4,0,.2,1) both; }
  .yh-enter--zoom   .yh-card { animation: yhEnZoom   .5s  cubic-bezier(.4,0,.2,1) both; }
  .yh-enter--bounce .yh-card { animation: yhEnBounce .65s cubic-bezier(.34,1.56,.64,1) both; }

  [class*="yh-enter--"] .yh-card:nth-child(1)  { animation-delay: .04s; }
  [class*="yh-enter--"] .yh-card:nth-child(2)  { animation-delay: .08s; }
  [class*="yh-enter--"] .yh-card:nth-child(3)  { animation-delay: .12s; }
  [class*="yh-enter--"] .yh-card:nth-child(4)  { animation-delay: .16s; }
  [class*="yh-enter--"] .yh-card:nth-child(5)  { animation-delay: .20s; }
  [class*="yh-enter--"] .yh-card:nth-child(6)  { animation-delay: .24s; }
  [class*="yh-enter--"] .yh-card:nth-child(7)  { animation-delay: .28s; }
  [class*="yh-enter--"] .yh-card:nth-child(8)  { animation-delay: .32s; }
  [class*="yh-enter--"] .yh-card:nth-child(9)  { animation-delay: .36s; }
  [class*="yh-enter--"] .yh-card:nth-child(10) { animation-delay: .40s; }
  [class*="yh-enter--"] .yh-card:nth-child(11) { animation-delay: .44s; }
  [class*="yh-enter--"] .yh-card:nth-child(12) { animation-delay: .48s; }
  [class*="yh-enter--"] .yh-card:nth-child(n+13) { animation-delay: .5s; }
}

@keyframes yhEnFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes yhEnSlide  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes yhEnZoom   { from { opacity: 0; transform: scale(.92); }       to { opacity: 1; transform: none; } }
@keyframes yhEnBounce { from { opacity: 0; transform: scale(.7); }        to { opacity: 1; transform: none; } }

/* ── 14. Scrollbars de los rieles ── */
.yh-sb-hidden .yh-sidebar__list,
.yh-sb-hidden .yh-sidebar2__scroll,
.yh-sb-hidden .yh-hbar__rail { scrollbar-width: none; }

.yh-sb-hidden .yh-sidebar__list::-webkit-scrollbar,
.yh-sb-hidden .yh-sidebar2__scroll::-webkit-scrollbar,
.yh-sb-hidden .yh-hbar__rail::-webkit-scrollbar { display: none; }

.yh-sidebar__list::-webkit-scrollbar-thumb:hover,
.yh-sidebar2__scroll::-webkit-scrollbar-thumb:hover,
.yh-hbar__rail::-webkit-scrollbar-thumb:hover {
  background: var(--yh-scroll-hc, var(--yh-scroll-c, var(--yh-border)));
}

.yh-sb-smooth .yh-sidebar__list,
.yh-sb-smooth .yh-sidebar2__scroll,
.yh-sb-smooth .yh-hbar__rail { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════════════════════════
   26. ACCESIBILIDAD (v3.5.1) — utilidades WCAG 2.1 AA
   ═══════════════════════════════════════════════════════════════════════ */

/* Texto solo para lectores de pantalla (patrón sr-only estándar) */
.yh-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: salta los filtros y va directo a los videos. Oculto hasta
   recibir foco por teclado (Tab), momento en que aparece arriba. */
.yh-skip {
  /* v3.16: patrón sr-only real. El desplazamiento vertical anterior lo
     dejaba APENAS por encima del módulo — visible todo el tiempo en la
     página (bug reportado). Ahora queda recortado a 1px hasta recibir
     foco de teclado, como corresponde a un skip link (WCAG 2.4.1). */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 20;
}
.yh-skip:focus,
.yh-skip:focus-visible {
  left: 8px; top: 8px;
  width: auto; height: auto;
  margin: 0; padding: 8px 16px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border-radius: 8px;
  background: var(--yh-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   FIXES v3.13 — consumidores que faltaban
   ═══════════════════════════════════════════════════════════════════════ */
/* Alineación del grupo «Etiquetas y badges»: aplica al texto interno de
   badges y botones de filtro (los badges son absolutos sobre la
   miniatura, así que la alineación actúa dentro de cada pieza). */
.yh-badge, .yh-filter-btn { text-align: var(--yh-lb-align, center); }


/* ═══════════════════════════════════════════════════════════════════════
   BLINDAJE v3.16.2 — Rieles de los diseños 3 y 5
   ═══════════════════════════════════════════════════════════════════════
   En sitios reales conviven temas (Gantry, Helix) y optimizadores (JCH,
   caché, lazy-load) que reordenan CSS o meten resets globales del tipo
   img { height: auto !important }. Síntoma reportado: las tarjetas de
   los rieles verticales quedaban aplastadas a "tiritas" que llenaban
   exactamente el alto del contenedor (comportamiento de flex con
   shrink). Este bloque, al FINAL del archivo y con especificidad alta,
   reafirma la geometría crítica para que ninguna regla externa pueda
   aplastarla. */
.mod-mediahubstudio .yh-sidebar2__scroll,
.mod-mediahubstudio .yh-pcuadvh__grid {
  display: grid !important;
  flex-direction: column;      /* si un tema fuerza flex, que al menos no reparta */
}
.mod-mediahubstudio .yh-sidebar2__scroll { grid-template-columns: repeat(var(--yh-side-cols, 2), 1fr) !important; }
.mod-mediahubstudio .yh-pcuadvh__grid    { grid-template-columns: 1fr !important; }
/* v3.16.5 — EL HALLAZGO DEL DEBUG: las filas del grid aparecían FIJADAS
   a ~39/48 px (menos que el min-height del thumb), o sea, congeladas por
   estilos INLINE de algún script del sitio (patrón masonry de temas de
   noticias: miden al cargar y fijan filas). Un !important de hoja de
   estilos LE GANA al estilo inline → filas siempre automáticas. */
.mod-mediahubstudio .yh-sidebar2__scroll,
.mod-mediahubstudio .yh-pcuadvh__grid {
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
}
.mod-mediahubstudio .yh-sidebar2__scroll > .yh-card,
.mod-mediahubstudio .yh-pcuadvh__grid    > .yh-card {
  grid-row: auto !important;
  grid-column: auto !important;
  min-height: 110px;
}
.mod-mediahubstudio .yh-sidebar2__scroll > .yh-card,
.mod-mediahubstudio .yh-pcuadvh__grid    > .yh-card {
  /* Nunca encoger: ni como item flex (temas) ni como fila de grid */
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
}
.mod-mediahubstudio .yh-sidebar2__scroll .yh-card__thumb,
.mod-mediahubstudio .yh-pcuadvh__grid    .yh-card__thumb {
  /* Alto garantizado aunque un optimizador anule aspect-ratio o un
     lazy-load deje la imagen sin dimensiones */
  aspect-ratio: 16 / 9;
  min-height: 90px;
}
.mod-mediahubstudio .yh-sidebar2__scroll .yh-card__img,
.mod-mediahubstudio .yh-pcuadvh__grid    .yh-card__img {
  /* Independiente de resets img{height:auto!important} de temas */
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}


/* ── v3.17: títulos de tarjeta — hover al color de acento ──────────────
   Al pasar el mouse por la tarjeta, el título (modo "abajo") transiciona
   al acento; el overlay (inside/hover) aclara. Personalizable con
   --yh-title-hc si algún día se quiere otro color. */
.yh-card .yh-card__title {
  transition: color calc(var(--yh-transition, .18s) * 1.5);
}
.yh-card:hover .yh-card__title,
.yh-card:focus-within .yh-card__title {
  color: var(--yh-title-hc, var(--yh-accent));
}
.yh-card:hover .yh-card__thumb-title {
  color: var(--yh-title-hc, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE POR VIEWPORT (v3.22.2)
   ───────────────────────────────────────────────────────────────────────
   Los @container de arriba dependen de que el CONTENEDOR colapse en móvil.
   Algunos temas (p. ej. Gantry5) meten la galería en un contenedor de
   ancho fijo que NO colapsa, así que los container queries no disparan y
   en el celular el video principal no se adapta y la lista queda partida.
   Este bloque usa @media (ancho real de PANTALLA) como respaldo robusto:
   funciona siempre, dependa o no del contenedor del tema.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Reproductor principal: que siempre ocupe el ancho y respete su ratio,
     sin desbordar ni quedar con altura fija heredada. */
  .mod-mediahubstudio .yh-player-stage {
    width:        100% !important;
    max-width:    100% !important;
    height:       auto !important;
    aspect-ratio: var(--yh-player-ar, 16 / 9) !important;
  }
  .mod-mediahubstudio .yh-player-stage iframe,
  .mod-mediahubstudio .yh-player-stage video,
  .mod-mediahubstudio .yh-player-stage .yh-main-thumb {
    width:  100% !important;
    height: 100% !important;
  }

  /* Diseños con dos columnas (principal + lista) → una sola columna. */
  .mod-mediahubstudio .yh-sidebar,
  .mod-mediahubstudio .yh-sidebar--invert,
  .mod-mediahubstudio .yh-pcuadvh,
  .mod-mediahubstudio .yh-pcuadv,
  .mod-mediahubstudio .yh-pcuadh {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* La lista lateral en móvil: VERTICAL con scroll (a pedido), no la
     tira horizontal. Altura acotada para que no empuje la página. */
  .mod-mediahubstudio .yh-sidebar__list,
  .mod-mediahubstudio .yh-sidebar2__scroll,
  .mod-mediahubstudio .yh-pcuadvh__grid {
    position:         static !important;
    flex-direction:   column !important;
    grid-auto-flow:   row !important;
    overflow-x:       hidden !important;
    overflow-y:       auto !important;
    max-height:       70vh !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .mod-mediahubstudio .yh-sidebar__list .yh-card {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    width: 100% !important;
  }

  /* Cuadrículas: 1 columna en teléfonos angostos para que las tarjetas
     no queden diminutas. */
  .mod-mediahubstudio .yh-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  /* Tablets / teléfonos anchos: 2 columnas en la cuadrícula. */
  .mod-mediahubstudio .yh-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}