.promo { background: #0c0d0f; border-bottom: 1px solid var(--border); }
.promo-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.promo-heading h2 { font-size: clamp(1.8rem, 3.7vw, 3.2rem); margin-top: 12px; }
.promo-heading > p { color: var(--muted); line-height: 1.65; max-width: 340px; margin: 0; font-size: .95rem; }
.promo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 28px; align-items: start; }
.promo-screen { position: relative; background: #060708; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.promo-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.promo-start { position: absolute; inset: 0; border: 0; cursor: pointer; color: white; background: linear-gradient(transparent 45%, rgba(0,0,0,.58)); display: flex; justify-content: center; align-items: end; padding: 0 12px 25px; }
.promo-start[hidden] { display: none; }
.promo-start-label { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; padding: 13px 22px; font-size: .95rem; font-weight: 650; background: rgba(6,7,8,.9); box-shadow: 0 6px 30px #0006; }
.promo-start svg { width: 22px; height: 22px; color: var(--rojo-claro); }
.promo-start:hover .promo-start-label { background: var(--rojo); border-color: var(--rojo); }
.promo-start:hover svg { color: white; }
.promo-status { color: var(--muted-2); font-size: .78rem; line-height: 1.6; margin: 10px 0 0; }
.promo-error { padding: 10px; color: var(--err); }
.promo-chapters-title { margin: 0 0 12px; color: var(--muted-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.promo-chapters { display: grid; gap: 7px; }
.promo-chapters[hidden] { display: none; }
.promo-chapter { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 13px 12px; cursor: pointer; font-size: .88rem; line-height: 1.4; }
.promo-chapter time { color: var(--muted-2); font-family: var(--mono); font-size: .75rem; }
.promo-chapter:hover { color: white; border-color: var(--border-2); background: #ffffff08; }
.promo-chapter[aria-current="true"] { color: white; border-color: #dc322880; background: var(--rojo-tinte); }
.promo-chapter[aria-current="true"] time { color: var(--rojo-claro); }
.promo-membership { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.promo-membership .btn { width: 100%; text-align: center; font-size: .85rem; }
.promo-membership p { color: var(--muted-2); font-size: .76rem; line-height: 1.65; margin: 10px 0 0; }
.promo-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.promo-links a { text-decoration: underline; text-underline-offset: 3px; }
.promo-transcript { margin-top: 18px; color: var(--muted-2); font-size: .82rem; line-height: 1.7; }
.promo-transcript summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 3px; }
.promo-transcript ol { list-style: decimal; padding-left: 20px; max-width: 840px; }
.promo-transcript li { margin: 10px 0; }
.promo button:focus-visible, .promo a:focus-visible, .promo summary:focus-visible, .promo video:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (max-width: 1000px) {
  .promo-layout { grid-template-columns: 1fr; gap: 20px; }
  .promo-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-membership { display: flex; align-items: center; gap: 18px; }
  .promo-membership .btn { width: auto; flex-shrink: 0; }
  .promo-membership p { margin: 0; }
}
@media (max-width: 600px) {
  .promo-heading { display: block; }
  .promo-heading > p { margin-top: 18px; max-width: none; }
  .promo-chapter { font-size: .76rem; gap: 8px; padding: 12px 9px; }
  .promo-membership { display: block; }
  .promo-membership .btn { width: 100%; }
  .promo-membership p { margin-top: 10px; text-align: center; }
  .promo-start { padding-bottom: 12px; }
  .promo-start-label { padding: 9px 14px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .promo *, .promo *::before, .promo *::after { scroll-behavior: auto; transition: none; }
}
@media (max-width: 380px) {
  .site-header .brand-txt { font-size: 12px; }
  .site-header .brand { gap: 7px; }
  .site-header .brand-mark, .site-header.is-scrolled .brand-mark { height: 16px; }
  .site-header .container { gap: 8px; }
}