/* Página de vídeos estilo reels */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.rbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  padding-top: env(safe-area-inset-top); background: linear-gradient(#000 60%, rgba(0,0,0,0)); }
.rbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75%); }
.rlogo { font-weight: 900; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.rlogo .x { color: #F1BF00; }
.rtitle { flex: 1; text-align: center; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsound { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rsound[aria-pressed="true"] { background: #c8102e; border-color: #c8102e; }

.reels { height: 100vh; height: 100svh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; padding: 52px 0 0; }
.rframe { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: calc((100svh - 52px - 120px) * 9 / 16 + 1px); min-width: min(100%, 360px); }
.rplayer { position: relative; flex: 1; min-height: 0; background: #111 center / cover no-repeat; border-radius: 0; overflow: hidden; cursor: pointer; }
.rplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.rplay { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(0,0,0,.55); }
.rplay::after { content: ""; position: absolute; left: 27px; top: 21px; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.rplayer.on .rplay { display: none; }

.rinfo { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #000; }
.rchan { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: #bbb; }
.rnew { background: #F1BF00; color: #111; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 2px; margin-left: 4px; }
.rinfo h2 { margin: 0 0 10px; font-size: 16px; line-height: 1.25; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.racts { display: flex; gap: 8px; }
.racts button, .racts a { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.racts button:hover, .racts a:hover { background: rgba(255,255,255,.18); }

.rnav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.rnav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 20px; font-weight: 900; }
.rnav button:hover { background: #c8102e; border-color: #c8102e; }
.rhint { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2); padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; pointer-events: none; transition: opacity .4s; z-index: 6; }
.rhint.gone { opacity: 0; }
.rtoast { position: fixed; left: 50%; top: 66px; transform: translateX(-50%); background: #fff; color: #111; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; z-index: 20; }
.rempty { height: 100vh; display: grid; place-content: center; text-align: center; gap: 10px; color: #ccc; }
.rempty a { color: #F1BF00; font-weight: 700; }

/* Móvil: el vídeo ocupa todo el ancho; se pasa deslizando */
@media (max-width: 700px) {
  .rframe { max-width: none; min-width: 0; }
  .rnav { display: none; }
  .rbar .rtitle { display: none; }
}
@media (min-width: 701px) {
  .rplayer { border-radius: 12px; margin-top: 8px; }
  .rinfo { background: transparent; padding-left: 4px; padding-right: 4px; }
}
.rsound { margin-left: auto; }
.rhint { white-space: nowrap; }