/* ==========================================================================
   pages-videoteca.css  ·  Videoteca, cursos y eventos
   Páginas: videos.html, video.html, cursos.html, eventos.html, evento.html
   Todo lo que no existe en rdn.css lleva prefijo vid-. Sin colores sueltos:
   solo variables del sistema. Sin estilos en línea (CSP).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilidades de página
   -------------------------------------------------------------------------- */
.vid-title {
  font-size: clamp(2rem, 1.15rem + 3.6vw, 3.75rem);
  line-height: 1;
}
.vid-hero__lead { display: grid; gap: var(--sp-5); max-width: 62rem; }
.vid-hero__lead .dek { max-width: 56ch; }
.vid-hero__tools { margin-top: var(--sp-8); }
.vid-nojs { margin-top: var(--sp-6); }
.vid-empty { grid-column: 1 / -1; }
.vid-loading { padding: var(--sp-12) 0; }
.vid-lead-note { margin-top: var(--sp-4); max-width: 62ch; }

/* Datos clave en tira (variante de .facts con rótulos largos) */
.vid-facts { margin-top: var(--sp-8); }
.vid-facts dd { font-size: var(--fs-2xl); }
.vid-facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .vid-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ficha de datos (fecha, sede, precio…): cifras largas en condensada */
.vid-data {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--line-4);
}
.vid-data > div { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: var(--line-soft); min-width: 0; }
.vid-data dt {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute);
}
.vid-data dd {
  margin-top: 2px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); line-height: 1.15;
  overflow-wrap: anywhere;
}
.vid-data dd small { display: block; margin-top: 2px; font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-mute); }
.vid-data .is-tbc dd { color: var(--fg-2); font-weight: 600; }
@media (min-width: 768px) {
  .vid-data--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vid-data--4 > div { border-right: var(--line-soft); padding-left: var(--sp-4); }
  .vid-data--4 > div:first-child { padding-left: 0; }
  .vid-data--4 > div:last-child { border-right: 0; }
}

/* Sello "por confirmar": discontinuo, no es de ejemplo ni de patrocinio */
.vid-tbc {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 2px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-2);
  border: 1px dashed var(--ink);
}
.vid-tbc .icon { width: 13px; height: 13px; stroke-width: 3; }
.vid-flags { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* --------------------------------------------------------------------------
   Buscador de la videoteca
   -------------------------------------------------------------------------- */
.vid-search {
  display: flex; align-items: stretch;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  --focus: var(--ink);
}
.vid-search:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.vid-search__icon { display: grid; place-items: center; flex: none; width: 52px; color: var(--ink); }
.vid-search__input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 var(--sp-2) 0 0;
  background: none; border: 0; outline: none; border-radius: 0;
  font-size: 1rem; font-weight: 500;
  -webkit-appearance: none; appearance: none;
}
.vid-search__input::placeholder { color: var(--ink-mute); opacity: 1; }
.vid-search__input::-webkit-search-cancel-button { display: none; }
.vid-search__clear {
  display: grid; place-items: center; flex: none; width: 52px;
  color: var(--ink); border-left: var(--line);
}
.vid-search__clear:hover { background: var(--paper-2); }
.vid-search__clear[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */
.vid-filters { margin-bottom: var(--sp-6); }
.vid-filters__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  border: 2px solid var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.vid-filters__toggle .icon { transition: transform var(--t-fast) var(--ease); }
.vid-filters__toggle[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }
.vid-filters__badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--red); color: #fff; font-size: var(--fs-xs); letter-spacing: 0;
}
.vid-filters__panel { display: none; gap: var(--sp-5); margin-top: var(--sp-4); }
.vid-filters.is-open .vid-filters__panel { display: grid; }
.vid-filter { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.vid-filter > legend, .vid-filter > label.vid-filter__label {
  padding: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute);
}
.vid-filter .chip-row { gap: var(--sp-2); }
.vid-count { color: inherit; opacity: 1; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.chip[disabled] { opacity: 0.45; cursor: not-allowed; }
.chip[disabled]:hover { background: var(--paper); }
@media (min-width: 900px) {
  .vid-filters__toggle { display: none; }
  .vid-filters__panel {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap); row-gap: var(--sp-5);
    margin-top: 0;
    padding-top: var(--sp-4); border-top: var(--line-4);
  }
  .vid-filter--tipo { grid-column: 1 / -1; }
  .vid-filter--acceso { grid-column: span 4; }
  .vid-filter--anio { grid-column: span 4; }
  .vid-filter--ponente { grid-column: span 4; }
}

.vid-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.vid-active[hidden] { display: none; }
.vid-results__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-6); padding-top: var(--sp-3); border-top: var(--line);
}
.vid-results__status { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; }
.vid-results__status small { display: block; margin-top: 2px; font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-mute); }
.vid-sort { display: grid; gap: 4px; }
.vid-sort label { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.vid-sort .select { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.vid-more { display: grid; justify-items: center; gap: var(--sp-3); margin-top: var(--sp-10); }
.vid-more[hidden] { display: none; }
.vid-more p { font-size: var(--fs-sm); color: var(--fg-mute); }

/* --------------------------------------------------------------------------
   Tarjeta de video (extiende .card-video)
   -------------------------------------------------------------------------- */
.vid-card .card-video__media { --ar: 16 / 10; }
.vid-card .kicker { margin-top: var(--sp-1); }
.vid-card__sub { font-size: var(--fs-sm); color: var(--fg-2); }
/* El botón de reproducir va pequeño en la esquina: las miniaturas ya traen título y ponente impresos.
   Igual que en podcast (.com-ep). Para unificar en todo el sitio: aplicar esta regla a .card-video__play en rdn.css. */
.vid-card .card-video__play, .vid-radio .card-video__play {
  left: auto; top: var(--sp-2); right: var(--sp-2); translate: none;
  width: 40px; height: 40px; border-width: 2px;
}
.vid-card .card-video__play .icon, .vid-radio .card-video__play .icon { width: 16px; height: 16px; margin-left: 2px; }
.vid-card .badge--float { z-index: 2; }
.vid-card .meta { margin-top: 2px; }

/* --------------------------------------------------------------------------
   Proyecto Radio MX: programa destacado
   -------------------------------------------------------------------------- */
.vid-radio { background: var(--ink); color: #fff; --focus: #fff; }
.vid-radio .meta { color: #D9D3D3; }
.vid-radio .card-video__media { background: #000; }
.vid-radio__grid { display: grid; gap: var(--sp-8); align-items: start; }
.vid-radio__logo { display: block; width: min(100%, 260px); padding: var(--sp-3); background: #fff; }
.vid-radio__copy { display: grid; gap: var(--sp-4); align-content: start; }
.vid-radio__copy h2 { margin-top: var(--sp-1); }
.vid-radio__copy .dek { color: #E4DEDE; max-width: 44ch; }
.vid-radio__stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); margin: var(--sp-2) 0; }
.vid-radio__stats div { min-width: 0; }
.vid-radio__stats dd { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; }
.vid-radio__stats dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: #CFC8C8; margin-top: 4px; }
.vid-radio__eps { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vid-radio__eps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .vid-radio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); }
  .vid-radio__eps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-radio__eps > :nth-child(3) { display: none; }
}
@media (min-width: 1200px) {
  .vid-radio__eps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vid-radio__eps > :nth-child(3) { display: flex; }
}

/* --------------------------------------------------------------------------
   Ficha de video: reproductor, candado y datos
   -------------------------------------------------------------------------- */
.vid-player {
  position: relative; display: block; overflow: hidden;
  background: var(--ink); aspect-ratio: 16 / 9;
}
.vid-player > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity var(--t-med), transform 600ms var(--ease); }
a.vid-player:hover > img { opacity: 1; transform: scale(1.02); }
.vid-player__play {
  position: absolute; inset: 0 0 auto 0; display: flex; justify-content: flex-end; padding: var(--sp-3);
  color: #fff; text-decoration: none; --focus: #fff; pointer-events: none;
}
.vid-player__play .play-btn { width: clamp(48px, 8vw, 72px); height: clamp(48px, 8vw, 72px); }
.vid-player__play .play-btn .icon { width: 40%; height: 40%; }
a.vid-player:hover .play-btn { transform: scale(1.08); background: var(--red-deep); }
.vid-player__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.1em; text-transform: uppercase;
}
.vid-player__bar span { white-space: nowrap; }
.vid-player__bar .icon { vertical-align: -0.25em; }
.vid-player__embed { position: absolute; inset: 0; }
.vid-player__embed[hidden] { display: none; }
.vid-playnote { font-size: var(--fs-sm); color: var(--fg-mute); margin-top: var(--sp-2); }

.vid-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.vid-aside { display: grid; gap: var(--sp-6); align-content: start; }
.vid-gate .card-plan { margin: 0; }
.vid-gate .price--lg { margin-top: calc(var(--sp-1) * -1); }

.vid-meta { border-top: var(--line-4); }
.vid-meta > div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--line-soft); }
.vid-meta dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); padding-top: 3px; }
.vid-meta dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.vid-meta dd small { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--fg-mute); margin-top: 2px; }
.vid-meta a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vid-meta a:hover { color: var(--red-deep); }

/* --------------------------------------------------------------------------
   Cursos y masterclass: filas de programa
   -------------------------------------------------------------------------- */
.vid-lessons { display: grid; gap: 0; }
.vid-lesson {
  position: relative;
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0; border-top: var(--line);
  align-items: start;
}
.vid-lesson__media { position: relative; grid-row: span 2; }
.vid-lesson__media .ratio { --ar: 16 / 10; background: var(--ink); }
.vid-lesson__media .ratio img { opacity: 0.92; }
/* Miniatura repetida entre varios videos: se sustituye por un rótulo tipográfico */
.vid-thumbtype {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: var(--sp-2); background: var(--ink); color: #fff; border-top: 4px solid var(--red); overflow: hidden;
}
.vid-thumbtype span { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.vid-thumbtype b { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; line-height: 1.02; text-transform: uppercase; }
@media (min-width: 768px) { .vid-thumbtype b { font-size: 1.2rem; } }
.vid-lesson__body { display: grid; gap: var(--sp-1); min-width: 0; }
.vid-lesson__title { font-size: var(--fs-lg); }
.vid-lesson__title a { text-decoration: none; }
.vid-lesson__title a::after { content: ""; position: absolute; inset: 0; }
.vid-lesson:hover .vid-lesson__title a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.vid-lesson__who { font-size: var(--fs-sm); color: var(--fg-2); }
.vid-lesson__who strong { color: var(--fg); font-weight: 600; }
.vid-lesson__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); grid-column: 2; }
@media (min-width: 768px) {
  .vid-lesson { grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-6); }
  .vid-lesson__media { grid-row: auto; }
  .vid-lesson__aside { grid-column: auto; flex-direction: column; align-items: flex-end; }
}
.vid-series { margin-top: var(--sp-8); }
.vid-series:first-child { margin-top: 0; }
.vid-series__head { padding-top: var(--sp-2); border-top: var(--line-4); display: grid; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.vid-series__head h3 { font-size: var(--fs-xl); }
.vid-series .vid-lesson:first-of-type { border-top: var(--line); }
.vid-pick { display: grid; gap: var(--gap); }
.vid-note { margin-top: var(--sp-6); max-width: 70ch; }

/* --------------------------------------------------------------------------
   Eventos: tarjetas, portadas y fichas
   -------------------------------------------------------------------------- */
.vid-ev { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.vid-ev__media { --ar: 16 / 10; background: var(--ink); }
.vid-ev__media--paper { background: var(--paper-2); }
.vid-ev__media--contain > img { object-fit: contain; }
.vid-ev__media img { transition: transform 600ms var(--ease); }
.vid-ev:hover .vid-ev__media--cover img { transform: scale(1.03); }
.vid-ev__back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-ev__over { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.vid-ev__over--flush { padding: 0; }
.vid-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--paper); }
.vid-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.vid-mosaic--3 { grid-template-rows: 1fr 1fr; }
.vid-mosaic--3 img:first-child { grid-row: span 2; }
.vid-evtype {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-1);
  padding: var(--sp-4); background: var(--ink); color: #fff; border-top: 6px solid var(--red);
}
.vid-evtype__kicker { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.vid-evtype__big { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 0.98; text-transform: uppercase; overflow-wrap: anywhere; }
.vid-ev__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.vid-ev__title { font-size: var(--fs-xl); }
.vid-ev__title a { text-decoration: none; }
.vid-ev__title a::after { content: ""; position: absolute; inset: 0; }
.vid-ev:hover .vid-ev__title a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.vid-ev__lema { font-family: var(--font-text); font-style: italic; color: var(--fg-2); font-size: var(--fs-base); }

.vid-next { display: grid; gap: var(--sp-5) var(--gap); padding: var(--sp-8) 0; border-top: var(--line-4); }
.vid-next:first-of-type { border-top-color: var(--red); }
.vid-next__media { position: relative; }
.vid-next__media .cintillo { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
.vid-next__media .ratio { --ar: 16 / 10; }
.vid-next__copy { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.vid-next__copy h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-2xl); line-height: 1; padding-top: 0.06em; }
.vid-next__copy h3 a { text-decoration: none; }
.vid-next__copy h3 a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.vid-next__copy .dek { max-width: 52ch; }
@media (min-width: 900px) {
  .vid-next { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .vid-next__media { grid-column: span 5; }
  .vid-next__copy { grid-column: 7 / span 6; }
  .vid-next--flip .vid-next__media { grid-column: 8 / span 5; grid-row: 1; }
  .vid-next--flip .vid-next__copy { grid-column: 1 / span 6; grid-row: 1; }
}

.vid-evhero { display: grid; gap: var(--sp-6) var(--gap); align-items: start; }
.vid-evhero__copy { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.vid-evhero__media { min-width: 0; }
.vid-evhero__media .cover { max-width: 420px; }
.vid-evhero__media .ratio { --ar: 16 / 9; }
@media (min-width: 900px) {
  .vid-evhero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vid-evhero__copy { grid-column: span 7; }
  .vid-evhero__media { grid-column: 8 / span 5; }
}
.vid-section { margin-top: var(--sp-10); }
.vid-section:first-child { margin-top: 0; }
.vid-section > h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.vid-people { display: grid; gap: 0; }
.vid-people li { padding: var(--sp-3) 0; border-bottom: var(--line-soft); font-weight: 600; }
.vid-people li:first-child { border-top: var(--line); }
.vid-people small { display: block; font-weight: 400; color: var(--fg-mute); font-size: var(--fs-sm); }
.vid-chips-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vid-chips-list li { padding: 6px 12px; border: 1px solid var(--ink); font-size: var(--fs-sm); font-weight: 600; background: var(--paper); }
.vid-gallery { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .vid-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vid-gallery figure { min-width: 0; }
.vid-gallery .ratio { --ar: 1 / 1; background: var(--ink); }
.vid-gallery .ratio--paper { background: var(--paper-2); }
.vid-gallery .ratio img { object-fit: contain; padding: 4px; }
.vid-reg { border: 3px solid var(--ink); background: var(--paper); }
.vid-reg__head { padding: var(--sp-3) var(--sp-5); background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.18em; text-transform: uppercase; }
.vid-reg--open .vid-reg__head { background: var(--red); }
.vid-reg__body { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.vid-reg__body .btn { width: 100%; }
.vid-reg__body .btn--text { width: auto; height: auto; justify-content: flex-start; text-align: left; padding-bottom: 10px; }
.vid-reg__body .btn--text::after { bottom: 2px; }
.vid-reg__small { font-size: var(--fs-sm); color: var(--fg-mute); }

/* Interés / registro (demostración) */
.vid-interest { display: grid; gap: var(--sp-8); align-items: center; }
.vid-interest__copy { display: grid; gap: var(--sp-4); align-content: start; }
.vid-interest__form { background: var(--paper); color: var(--ink); padding: var(--sp-6); --focus: var(--ink); }
.vid-interest__form .form-grid { margin-top: var(--sp-4); }
.vid-demo-note { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-2) var(--sp-3); background: var(--info-tint); border: 1px solid var(--info); color: #173A52; }
.vid-demo-note .icon { margin-top: 2px; }
@media (min-width: 900px) {
  .vid-interest { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-12); }
}

/* Membresía en las páginas de video */
.vid-member { display: grid; gap: var(--sp-8); align-items: center; }
.vid-member__copy { display: grid; gap: var(--sp-4); align-content: start; }
.vid-member .check-list li { color: #fff; }
.vid-member .check-list li::before { background: #fff; }
.vid-member__card { background: var(--paper); color: var(--ink); padding: var(--sp-6); display: grid; gap: var(--sp-4); --focus: var(--ink); }
@media (min-width: 900px) {
  .vid-member { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); }
}

/* Hash de resultados: evita que el encabezado pegajoso tape el título */
#biblioteca, #programa, #archivo, #proximos { scroll-margin-top: calc(var(--header-h) + 8px); }

@media (prefers-reduced-motion: reduce) {
  a.vid-player:hover > img, .vid-ev:hover .vid-ev__media--cover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Héroes: cifras en columna o póster, para no dejar media columna vacía
   -------------------------------------------------------------------------- */
.vid-herogrid { display: grid; gap: var(--sp-8) var(--gap); align-items: center; }
.vid-statlist { border-top: var(--line-4); }
.vid-statlist > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: var(--line);
}
.vid-statlist dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.vid-statlist dd { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; text-align: right; }
.hero-section--ink .vid-statlist { border-top-color: #fff; }
.hero-section--ink .vid-statlist > div { border-bottom-color: rgb(255 255 255 / 0.4); }
.hero-section--ink .vid-statlist dt { color: #E4DEDE; }
.vid-herofig { min-width: 0; }
.vid-herofig .cover { width: 100%; }
@media (min-width: 900px) {
  .vid-herogrid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vid-herogrid > .vid-hero__lead { grid-column: 1 / span 7; }
  .vid-herogrid > .vid-statlist { grid-column: 9 / span 4; }
  .vid-herogrid > .vid-herofig { grid-column: 8 / span 5; }
}

/* Sin segundo rojo: sobre tinta, los kickers van en blanco (el rojo del logo queda para botones y filetes) */
.vid-radio .kicker, .hero-section--ink .kicker, .band--ink .kicker { color: #fff; }
.vid-evtype__kicker { color: #fff; }
.vid-radio .vid-radio__stats dt { color: #E4DEDE; }

/* "Por confirmar" discreto en las tarjetas; la explicación va una sola vez arriba del archivo */
.vid-tbc-mini { font-style: italic; }
.vid-next__note { max-width: 60ch; }
#cur-free .card-plan { align-self: start; }
#ev-legend { margin-top: var(--sp-4); max-width: 70ch; }

/* La tarjeta clara de membresía vive dentro de una sección .on-ink: se restablece el contraste
   (rojo profundo 7.7:1 y tinta 16.9:1 sobre blanco) con mayor especificidad que las reglas de .on-ink */
.on-ink .vid-member__card .kicker { color: var(--red-deep); }
.on-ink .vid-member__card .btn--secondary { color: var(--ink); border-color: var(--ink); }
.on-ink .vid-member__card .btn--secondary:hover { background: var(--ink); color: #fff; }
.on-ink .vid-member__card { --focus: var(--ink); }
.vid-notfound h1 { margin-bottom: var(--sp-2); }

/* Resumen de plan que dibuja assets/js/membresias.js (variante "resumen") dentro de las tarjetas de membresía */
.vid-member__sum { font-size: var(--fs-sm); color: var(--fg-2); }
.vid-member__sum .mb-res strong { color: var(--fg); }