/* linear-player
   Hero con video de fondo + reproductor propio sobre <video> nativo.
   Los valores (máscaras, curvas, delays, gradientes) están tomados del CSS y del
   bundle de linear.app/quality, no estimados a ojo. Todo va prefijado con el slug. */

.linear-player {
  /* — tokens — */
  --lp-bg: #08090a;
  --lp-text: #f7f8f8;
  --lp-text-tertiary: #8a8f98;
  --lp-white: #fff;
  --lp-radius: 8px;
  --lp-radius-round: 9999px;
  --lp-speed: .25s;
  --lp-ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --lp-ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --lp-ease-reveal: cubic-bezier(.25, .1, .25, 1);   /* el tween de su preset de motion */
  --lp-reveal-duration: 1s;
  --lp-weight-medium: 510;
  --lp-inset: 32px;
  --lp-font: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --lp-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* máscaras del fondo */
  --lp-mask-visible: #000;
  --lp-mask-ease: #0003;
  --lp-mask-invisible: transparent;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  /* si el alto no alcanza, la caja scrollea (como el suyo). Con overflow:hidden el
     copy se desbordaba y la fila de tarjetas quedaba encima de los botones */
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--lp-text);
  background: var(--lp-bg);
  font-family: var(--lp-font);
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────
   Fondo: loop mudo, enmascarado por abajo y por los costados
   ───────────────────────────────────────────────────────────── */

.linear-player__bg {
  --lp-horizontal-size: 20%;
  --lp-vertical-size: 160px;
  --lp-mask-bottom: linear-gradient(to bottom,
    var(--lp-mask-visible) calc(100% - var(--lp-vertical-size)),
    var(--lp-mask-ease) calc(100% - (var(--lp-vertical-size) / 4)),
    var(--lp-mask-invisible) 100%);
  --lp-mask-right: linear-gradient(to right,
    var(--lp-mask-invisible),
    var(--lp-mask-visible) var(--lp-horizontal-size),
    var(--lp-mask-visible) calc(100% - var(--lp-horizontal-size)),
    var(--lp-mask-invisible) 100%);

  position: absolute;
  inset: 0;
  max-width: 1600px;
  margin-inline: auto;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
  user-select: none;

  -webkit-mask-image: var(--lp-mask-bottom), var(--lp-mask-right);
  mask-image: var(--lp-mask-bottom), var(--lp-mask-right);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  opacity: 0;
  animation: linear-player-fade-in var(--lp-reveal-duration) var(--lp-ease-reveal) forwards;
}

/* los clips se apilan: el nuevo entra en fundido mientras el viejo sale */
.linear-player__bg-stack { position: absolute; inset: 0; }

.linear-player__bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--lp-ease-reveal);
}

.linear-player__bg-video[data-active="true"] { opacity: 1; }

/* el blur va encima del video, no sobre el texto */
.linear-player__blur {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.linear-player__cover { position: absolute; }

.linear-player__cover--left {
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(to right, var(--lp-bg), transparent);
}

.linear-player__cover--right {
  inset: 0 0 0 auto;
  width: 25%;
  background: none;
}

@media (min-width: 1601px) {
  .linear-player__cover--right {
    background: linear-gradient(to left, var(--lp-bg), transparent);
  }
}

@media (max-width: 640px) {
  .linear-player__bg {
    max-height: 65vh;
    -webkit-mask-image: linear-gradient(to top, var(--lp-mask-invisible) 0%, var(--lp-mask-visible) 40%);
    mask-image: linear-gradient(to top, var(--lp-mask-invisible) 0%, var(--lp-mask-visible) 40%);
  }
}

/* ─────────────────────────────────────────────────────────────
   Copy y entrada
   ───────────────────────────────────────────────────────────── */

.linear-player__layout {
  position: relative;
  display: flex;
  flex: 1 0 auto;          /* crece, pero nunca se comprime por debajo del contenido */
  padding: 48px var(--lp-inset) 0;
}

/* cajas bajas (la tarjeta de la galería, un iframe chico): se aprieta todo un poco
   para que igual entre sin scroll */
@media (max-height: 640px) {
  .linear-player__layout { padding-top: 24px; }
  .linear-player__title { font-size: 38px; letter-spacing: -1px; }
  .linear-player__carousel-inner { min-height: 132px; }
  .linear-player__footer { padding-bottom: 20px; }
}

.linear-player__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-grow: 1;
  height: 100%;
}

/* el reveal: mismo initial/animate/transition que su preset (blur 10px, 8px de subida,
   tween de 1s). Los delays por elemento son .1 / .3 / .45 / .5 */
.linear-player__reveal {
  display: flex;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
  animation: linear-player-reveal var(--lp-reveal-duration) var(--lp-ease-reveal) var(--lp-delay, 0s) forwards;
}

@keyframes linear-player-reveal {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes linear-player-fade-in {
  to { opacity: 1; }
}

/* el copy sobre el video se aclara en vez de taparlo */
.linear-player__blend { mix-blend-mode: plus-lighter; }

.linear-player__brand { display: flex; align-items: center; gap: 9.5px; }
.linear-player__mark { display: flex; color: var(--lp-text); }

.linear-player__brand-line {
  align-self: stretch;
  width: 1px;
  opacity: .2;
  border-radius: var(--lp-radius-round);
  background: var(--lp-text);
}

.linear-player__brand-label {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  line-height: 14px;
  text-transform: uppercase;
}

.linear-player__grid { max-width: 620px; }
.linear-player__hgroup { margin: 0; }

.linear-player__title {
  margin: 0 0 0 -2px;            /* su "insetLarge": corrige el sidebearing óptico */
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -1.6px;
  font-weight: var(--lp-weight-medium);
}

.linear-player__description {
  margin: 0;
  max-width: 46ch;
  color: var(--lp-text-tertiary);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: balance;
}

.linear-player__spacer { height: var(--lp-h, 16px); }
.linear-player__spacer--tablet { display: none; }

.linear-player__actions {
  display: grid;
  grid-template-columns: fit-content(200px) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 20px 8px;
}

.linear-player__action-row { grid-column: 1 / -1; align-items: center; gap: 8px; }

.linear-player__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 22px 0 16px;
  transform: translateX(-4px);
  border: none;
  border-radius: var(--lp-radius-round);
  background: var(--lp-white);
  color: #08090a;
  font: inherit;
  font-size: 13px;
  font-weight: var(--lp-weight-medium);
  cursor: pointer;
  transition: var(--lp-speed) var(--lp-ease-out-quad);
  transition-property: transform, opacity;
}

.linear-player__cta:hover { transform: translateX(-4px) scale(1.02); }
.linear-player__cta:active { transform: translateX(-4px) scale(.98); }

.linear-player__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #08090a1f;
  font-family: var(--lp-font-mono);
  font-size: 10px;
}

.linear-player__service {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--lp-radius-circle, 50%);
  background: #ffffff0d;
  color: var(--lp-text);
  transition: background var(--lp-speed) var(--lp-ease-out-quad);
}

.linear-player__service:hover { background: #ffffff29; }

.linear-player__meta {
  align-items: center;
  gap: 12px;
  color: var(--lp-text-tertiary);
  font-size: 12px;
}

.linear-player__meta time { white-space: nowrap; }
.linear-player__cc { display: inline-flex; color: var(--lp-text); opacity: .55; }

@media (max-width: 900px) {
  .linear-player__title { font-size: 40px; letter-spacing: -1.1px; }
}

@media (max-width: 640px) {
  .linear-player { --lp-inset: 8px; }
  .linear-player__layout { padding-block: 24px; }
  .linear-player__grid { margin-top: auto; }
  .linear-player__title { font-size: 32px; letter-spacing: -.8px; }
  .linear-player__spacer--desktop { display: none; }
  .linear-player__spacer--tablet { display: block; }
  .linear-player__actions { grid-template-columns: fit-content(70px) auto; grid-template-rows: auto auto; }
}

/* ─────────────────────────────────────────────────────────────
   Fila de tarjetas
   ───────────────────────────────────────────────────────────── */

.linear-player__footer {
  position: relative;
  flex-shrink: 0;
  padding: 0 0 32px var(--lp-inset);
}

.linear-player__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.linear-player__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #ffffff0d;
  border-radius: 50%;
  background: #ffffff0d;
  color: var(--lp-text);
  cursor: pointer;
  transition: .16s var(--lp-ease-out-quad);
  transition-property: background-color, opacity;
}

.linear-player__nav-btn:hover:not(:disabled) { background: #ffffff29; }
.linear-player__nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* el scroll se esconde: la navegación es por tarjeta, no arrastrando */
.linear-player__carousel {
  margin-left: 24px;
  margin-bottom: -20px;
  padding-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.linear-player__carousel::-webkit-scrollbar { display: none; }

.linear-player__carousel-inner {
  display: flex;
  align-items: end;      /* las tarjetas crecen hacia arriba, no hacia abajo */
  gap: 32px;
  min-height: 160px;
  width: max-content;
  padding-right: 32px;
}

.linear-player__card {
  display: block;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  animation: linear-player-reveal-card var(--lp-reveal-duration) var(--lp-ease-reveal)
             calc(.55s + var(--lp-card-index, 0) * .06s) forwards;
}

@keyframes linear-player-reveal-card {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.linear-player__poster-wrapper {
  display: block;
  position: relative;
  margin-bottom: 12px;
  border-radius: var(--lp-radius);
  background: #32383f;
  overflow: hidden;
}

/* el ancho es lo único que cambia; el origen abajo-izquierda hace que crezca
   hacia arriba sin mover la línea de base de la fila */
.linear-player__poster {
  display: block;
  position: relative;
  width: 140px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transform-origin: 0 100%;
  transition: width var(--lp-speed) var(--lp-ease-out-quad);
}

.linear-player__card[data-active="true"] .linear-player__poster { width: 192px; }

.linear-player__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

.linear-player__card-label,
.linear-player__card-title { display: block; }

.linear-player__card-label {
  color: var(--lp-text-tertiary);
  font-size: 11px;
  line-height: 1.3;
  mix-blend-mode: plus-lighter;
}

.linear-player__card-title {
  margin-top: 2px;
  font-size: 14px;
  font-weight: var(--lp-weight-medium);
  color: var(--lp-text);
}

.linear-player__card:not([data-active="true"]) .linear-player__card-title { color: #d0d6e0; }

.linear-player__card:hover .linear-player__poster-wrapper { outline: 1px solid #ffffff29; }

/* el copy cambia con un cruce corto en blur, como al pasar de episodio */
.linear-player__swap { transition: opacity .2s var(--lp-ease-out-quad), filter .2s var(--lp-ease-out-quad); }
.linear-player__swap[data-swapping="true"] { opacity: 0; filter: blur(4px); }

@media (max-width: 640px) {
  .linear-player__footer { padding-bottom: 20px; }
  .linear-player__carousel { margin-left: 8px; }
  .linear-player__card[data-active="true"] .linear-player__poster { width: 172px; }
  .linear-player__carousel-inner { gap: 20px; min-height: 140px; }
}

/* ─────────────────────────────────────────────────────────────
   Diálogo
   ───────────────────────────────────────────────────────────── */

.linear-player__dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
}

.linear-player__dialog[hidden] { display: none; }

.linear-player__scrim {
  position: absolute;
  inset: 0;
  background: #08090ae0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  animation: linear-player-fade-in .2s var(--lp-ease-out-quad) forwards;
}

.linear-player__root {
  position: relative;
  width: 100vw;
  min-width: 320px;
  max-width: 1280px;
  border-radius: var(--lp-radius);
  outline: none;
  animation: linear-player-dialog-in .28s var(--lp-ease-out-cubic) both;
}

@keyframes linear-player-dialog-in {
  from { opacity: 0; transform: scale(.97) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* con pantalla ancha, el alto manda: el video no se pasa del viewport */
@media (min-aspect-ratio: 16/9) {
  .linear-player__root { width: auto; }
  .linear-player__video-container {
    width: auto;
    height: 100vh;
    max-height: min(720px, calc(100vh - 32px));
  }
  .linear-player__video { width: auto; height: 100%; }
}

.linear-player__video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 720;
  border-radius: var(--lp-radius);
  overflow: hidden;
  background: #000;
}

.linear-player__video { display: block; max-width: 100%; height: auto; }

.linear-player__fallback-poster {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lp-bg);
}

/* los cues nativos se apagan: los subtítulos se dibujan a mano */
.linear-player__video::cue { opacity: 0; visibility: hidden; background: none; }
.linear-player__video::-webkit-media-text-track-container { display: none !important; }

.linear-player__container {
  position: absolute;
  inset: 0;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
  container: linear-player-video / size;
}

/* el degradado inferior: 8 paradas para que no se vea el banding */
.linear-player__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    #00000080 0px, #00000073 10px, #00000059 24px, #00000040 40px,
    #00000026 58px, #00000014 78px, #00000008 98px, #00000001 112px, transparent 120px);
}

/* ── chrome: aparece con el mouse, se va sola ── */
.linear-player__chrome,
.linear-player__overlay,
.linear-player__controls {
  transition: var(--lp-speed) var(--lp-ease-out-quad);
  transition-property: opacity, transform;
}

.linear-player__chrome { pointer-events: auto; }

.linear-player__video-title {
  position: absolute;
  inset: 24px auto auto 32px;
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  font-weight: var(--lp-weight-medium);
}

.linear-player__video-overlay {
  position: absolute;
  inset: 24px 32px auto auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.linear-player__controls {
  position: absolute;
  inset-block-end: 16px;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: min(50px, 10%);
  pointer-events: auto;
}

/* estado ocioso: se esconde todo y el cursor desaparece, como en el suyo */
.linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover)) .linear-player__chrome,
.linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover)) .linear-player__overlay,
.linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover)) .linear-player__controls {
  opacity: 0;
}

.linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover)) .linear-player__controls {
  transform: translateY(16px);
}

.linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover)),
.linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover)) * {
  cursor: none !important;
}

/* ── botones de vidrio ── */
.linear-player__glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: var(--lp-radius);
  background: none;
  color: var(--lp-white);
  font: inherit;
  font-size: 13px;
  font-weight: var(--lp-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: .16s var(--lp-ease-out-quad);
  transition-property: background-color, backdrop-filter, opacity, transform;
}

.linear-player__glass--icon { width: 32px; padding: 0; }

@media (any-hover: hover) {
  .linear-player__glass:not([disabled]):hover {
    background: #ffffff29;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.linear-player__glass:focus-visible {
  outline: 2px solid #ffffff8c;
  outline-offset: 1px;
}

/* ── barra de progreso ── */
.linear-player__timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
}

.linear-player__time {
  min-width: 38px;
  font-size: 11px;
  font-weight: var(--lp-weight-medium);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.linear-player__time--end { text-align: end; }

.linear-player__progress {
  --lp-track-size: 4px;
  --lp-track-active-size: 7px;
  position: relative;
  flex-grow: 1;
  height: var(--lp-track-size);
  border-radius: var(--lp-radius-round);
  background: #ffffff29;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  transition: height var(--lp-speed) var(--lp-ease-out-quad);
}

/* área de click generosa sin engordar la barra */
.linear-player__progress::before {
  content: "";
  position: absolute;
  inset: -24px -8px;
}

.linear-player__progress:active,
.linear-player__progress[data-state="interacting"] { height: var(--lp-track-active-size); }

.linear-player__track-mask {
  position: relative;
  height: 100%;
  border-radius: var(--lp-radius-round);
  overflow: hidden;
  pointer-events: none;
}

.linear-player__range {
  position: absolute;
  inset-block: 0;
  background: var(--lp-white);
  pointer-events: none;
}

.linear-player__range[data-type="played"] {
  inset-inline-start: 0;
  inset-inline-end: calc(100% - var(--lp-played, 0) * 1%);
}

.linear-player__range[data-type="buffered"] {
  opacity: .16;
  inset-inline-start: 0;
  inset-inline-end: calc(100% - var(--lp-buffered, 0) * 1%);
}

.linear-player__range[data-type="volume"] {
  inset-inline: 0;
  inset-block-start: calc(100% - var(--lp-volume, 100) * 1%);
  inset-block-end: 0;
}

.linear-player__preview-line,
.linear-player__timestamp {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lp-speed) var(--lp-ease-out-quad);
}

.linear-player__progress:hover .linear-player__preview-line,
.linear-player__progress:hover .linear-player__timestamp { opacity: 1; }

.linear-player__preview-line {
  inset-block: -16px;
  left: calc(var(--lp-thumb, 0) * 1%);
  width: 1px;
  border-radius: var(--lp-radius-round);
  background: #ffffff7a;
}

.linear-player__progress:active .linear-player__preview-line { background: var(--lp-white); }

.linear-player__timestamp {
  left: calc(var(--lp-thumb, 0) * 1%);
  bottom: calc(100% + 32px);
  height: 16px;
  width: fit-content;
  transform: translateX(-50%);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.linear-player__timestamp-total { color: #ffffff7a; }

/* ── volumen ── */
.linear-player__sound { position: relative; }

.linear-player__volume-positioner {
  --lp-volume-size: 32px;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lp-volume-size);
  padding-block: 12px;
  border-radius: var(--lp-radius);
  visibility: hidden;
  pointer-events: none;
}

/* puente invisible para que el mouse llegue al slider sin perder el hover */
.linear-player__volume-positioner::before {
  content: "";
  position: absolute;
  inset: -8px -8px -12px;
}

@media (any-hover: hover) {
  .linear-player__sound:hover .linear-player__volume-positioner,
  .linear-player__volume-positioner:hover {
    visibility: visible;
    pointer-events: auto;
  }
}

.linear-player__sound:focus-within .linear-player__volume-positioner,
.linear-player__volume-positioner:has([data-state="interacting"]) {
  visibility: visible;
  pointer-events: auto;
}

.linear-player__volume-tint {
  position: absolute;
  inset: 0;
  border-radius: var(--lp-radius);
  background: #ffffff29;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.linear-player__volume-control {
  position: relative;
  width: 4px;
  height: 56px;
  border-radius: var(--lp-radius-round);
  background: #ffffff29;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.linear-player__volume-control::before {
  content: "";
  position: absolute;
  inset: -12px -2px;
}

.linear-player__volume-thumb {
  position: absolute;
  left: calc(50% - 4px);
  bottom: calc(var(--lp-volume, 100) * 1% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-white);
  pointer-events: none;
}

/* ── velocidad ── */
.linear-player__rate {
  height: 32px;
  padding: 0 6px;
  border: none;
  border-radius: var(--lp-radius);
  background: none;
  color: var(--lp-white);
  font: inherit;
  font-size: 13px;
  font-weight: var(--lp-weight-medium);
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  appearance: none;
  transition: .16s var(--lp-ease-out-quad);
  transition-property: background-color, backdrop-filter;
}

@media (any-hover: hover) {
  .linear-player__rate:hover {
    background: #ffffff29;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.linear-player__rate > option { background: var(--lp-bg); color: var(--lp-text); }

/* ── subtítulos propios ── */
.linear-player__captions {
  position: absolute;
  bottom: 24px;
  inset-inline: 0;
  width: fit-content;
  max-width: min(80%, 760px);
  margin-inline: auto;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(4px, 1cqw, 8px);
  background: #0000007a;
  color: var(--lp-text);
  font-size: clamp(16px, 2cqw, 48px);
  line-height: 1.4;
  font-weight: var(--lp-weight-medium);
  letter-spacing: -.47px;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  transition: transform .48s var(--lp-ease-out-cubic);
}

.linear-player__captions[hidden] { display: none; }

/* cuando la barra está a la vista, los subtítulos suben para no quedar debajo */
.linear-player__root[data-status="paused"] .linear-player__captions,
.linear-player__root[data-idle="false"] .linear-player__captions,
.linear-player__root:has(.linear-player__controls:hover) .linear-player__captions {
  transform: translateY(-86px);
}

/* ── estados de los íconos ── */
.linear-player__icon-pause,
.linear-player__icon-replay,
.linear-player__icon-fs-exit,
.linear-player__icon-cc-on,
.linear-player__icon-vol-low,
.linear-player__icon-vol-mute { display: none; }

.linear-player__root[data-status="playing"] .linear-player__icon-play,
.linear-player__root[data-status="ended"] .linear-player__icon-play { display: none; }
.linear-player__root[data-status="playing"] .linear-player__icon-pause { display: block; }
.linear-player__root[data-status="ended"] .linear-player__icon-replay { display: block; }

.linear-player__root[data-fullscreen="true"] .linear-player__icon-fs-enter { display: none; }
.linear-player__root[data-fullscreen="true"] .linear-player__icon-fs-exit { display: block; }

.linear-player__root[data-captions="on"] .linear-player__icon-cc-off { display: none; }
.linear-player__root[data-captions="on"] .linear-player__icon-cc-on { display: block; }

.linear-player__root[data-volume="low"] .linear-player__icon-vol-high { display: none; }
.linear-player__root[data-volume="low"] .linear-player__icon-vol-low { display: block; }
.linear-player__root[data-volume="muted"] .linear-player__icon-vol-high { display: none; }
.linear-player__root[data-volume="muted"] .linear-player__icon-vol-mute { display: block; }

/* ── pantalla completa ── */
.linear-player__root:fullscreen { max-width: 100%; max-height: 100%; width: 100%; background: #000; }
.linear-player__root:fullscreen .linear-player__video-container {
  border-radius: 0;
  margin: auto;
  height: 100% !important;
  max-height: none !important;
}
.linear-player__root:fullscreen .linear-player__video { width: 100%; height: 100%; object-fit: contain; }

/* ── el player angosto esconde lo secundario, igual que el suyo ── */
@container linear-player-video (width <= 640px) {
  .linear-player__controls { gap: 6px; padding-inline: 12px; inset-block-end: 10px; }
  .linear-player__rate, .linear-player__pip { display: none; }
  .linear-player__preview-line { display: none; }
  .linear-player__timestamp { bottom: calc(100% + 16px); }
  .linear-player__video-title { inset-inline-start: 16px; font-size: 12px; }
  .linear-player__video-overlay { inset-inline-end: 16px; }
  .linear-player__root[data-status="paused"] .linear-player__captions,
  .linear-player__root[data-idle="false"] .linear-player__captions,
  .linear-player__root:has(.linear-player__controls:hover) .linear-player__captions {
    transform: translateY(-32px);
  }
}

/* ── accesibilidad de movimiento ── */
@media (prefers-reduced-motion: reduce) {
  .linear-player__reveal,
  .linear-player__bg,
  .linear-player__root,
  .linear-player__scrim {
    animation-duration: .01ms;
    animation-delay: 0s;
  }
  .linear-player__reveal { opacity: 1; filter: none; transform: none; }
  .linear-player__card { animation-duration: .01ms; animation-delay: 0s;
                         opacity: 1; filter: none; transform: none; }
  .linear-player__captions,
  .linear-player__controls,
  .linear-player__chrome { transition-duration: .01ms; }
  .linear-player__bg-video { display: none; }
}