:root{--ink:#fff;--muted:rgba(255,255,255,.7);--line:#fff;--glass:rgba(255,255,255,.18)}
*{box-sizing:border-box;margin:0}
body{background:#000;color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.page{
  min-height:100vh;position:relative;overflow:hidden;padding:20px max(20px,calc((100% - 410px)/2)) 36px;
  background:
    radial-gradient(circle at 12% 9%,rgba(190,225,255,.55) 0 3px,rgba(190,225,255,.15) 4px 6px,transparent 7px),
    radial-gradient(circle at 80% 6%,rgba(190,225,255,.5) 0 5px,rgba(190,225,255,.12) 6px 9px,transparent 10px),
    radial-gradient(circle at 36% 15%,rgba(190,225,255,.4) 0 2px,transparent 3px),
    radial-gradient(circle at 90% 26%,rgba(190,225,255,.45) 0 4px,rgba(190,225,255,.1) 5px 8px,transparent 9px),
    radial-gradient(circle at 6% 30%,rgba(190,225,255,.35) 0 6px,rgba(190,225,255,.08) 7px 11px,transparent 12px),
    radial-gradient(ellipse at 70% 18%,rgba(255,255,255,.18),transparent 45%),
    linear-gradient(180deg,#5b9ccf 0%,#2f6a9e 14%,#12395f 34%,#06182b 52%,#02060c 72%,#000 100%)}
.page.has-bg{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.85) 62%,#000 82%),var(--bg-image) top center/cover no-repeat,#000}
.loading{text-align:center;margin-top:40vh;color:var(--muted)}
.top{display:flex;justify-content:flex-end;margin-bottom:14px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#d6a13a,#7a4c10);font:400 30px "Archivo Black"}
.avatar img{width:100%;height:100%;object-fit:cover}
h1{font:400 20px/1.2 "Archivo Black";text-align:center;margin-bottom:6px}
.bio{font:400 15px/1.4 "Archivo Black";text-align:center;margin:0 2px 18px;white-space:pre-line}
.socials{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.socials a{width:30px;height:30px;color:#fff;display:grid;place-items:center}
.socials svg{width:28px;height:28px}
.chip{display:table;margin:0 auto 24px;background:var(--glass);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);backdrop-filter:blur(8px)}
.block{position:relative;display:block;border:1px solid var(--line);border-radius:28px;color:#fff;text-decoration:none;margin-bottom:16px;background:rgba(0,0,0,.12);backdrop-filter:blur(2px)}
.video{padding:12px 12px 14px}
.thumb{aspect-ratio:16/9;border-radius:18px;background:#0b1522 center/cover;position:relative;display:grid;place-items:center;overflow:hidden}
.play{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.play::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.vt{text-align:center;padding:12px 28px 0}
.vt b{display:block;font:400 16px "Archivo Black"}
.vt span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:6px}
.vt svg{width:13px;height:13px}
.dots{position:absolute;right:14px;width:22px;height:22px;display:grid;place-items:center;color:var(--muted)}
.dots::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.video .dots{bottom:16px}
.btn{display:flex;align-items:center;min-height:56px;padding:0 52px;font:400 15px "Archivo Black";text-align:center;justify-content:center;transition:background .15s}
.btn:hover,.video:hover{background:rgba(255,255,255,.1)}
.btn .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:block}
.btn .ico svg{width:28px;height:28px}
.btn .dots{top:50%;transform:translateY(-50%)}
footer{text-align:center;margin-top:44px;font:400 13px "Archivo Black";opacity:.9}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}

.page>*{position:relative;z-index:1}
.page.has-video{background:#000}
.page>.bgvid,.page>.bgshade{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.bgvid{object-fit:cover}
.bgshade{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.85) 62%,#000 82%)}
.extras{margin-top:30px}
.extras h2{font:400 15px/1.3 "Archivo Black";text-align:center;margin-bottom:14px}

/* ---- lista de reproducción estilo YouTube ---- */
.yt{margin:0;padding:0;color:#f1f1f1;font-family:Inter,system-ui,sans-serif;background:linear-gradient(180deg,#000 0,#0f0f0f 140px,#0f0f0f 100%)}
.yt[hidden]{display:none}
.yt-wrap{display:grid;gap:20px;max-width:1700px;margin:0 auto;padding:36px 14px 48px}
.yt-main{min-width:0}
.yt-frame{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.yt-frame iframe,.yt-frame #vf-player{width:100%;height:100%;border:0;display:block}
.yt-now{font:700 18px/1.35 Inter,system-ui,sans-serif;margin:12px 0 14px}
.yt-info{background:rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;display:grid;gap:6px;font-size:14px}
.yt-info>b{font-size:15px}
.yt-stats{color:#aaa;font-size:12px}
.yt-desc{white-space:pre-line;line-height:1.45;max-height:4.4em;overflow:hidden;margin-top:6px}
.yt-desc.open{max-height:none}
.yt-more{justify-self:start;background:none;border:0;color:#f1f1f1;font:700 13px Inter,system-ui,sans-serif;padding:2px 0;cursor:pointer}
.yt-open{justify-self:start;margin-top:6px;color:#3ea6ff;text-decoration:none;font-weight:700;font-size:13px}
.yt-side{border:1px solid #3f3f3f;border-radius:14px;overflow:hidden;max-height:440px;display:flex;flex-direction:column}
.yt-in{display:flex;flex-direction:column;min-height:0;height:100%}
.yt-side>.yt-in{max-height:inherit}
.yt-head{background:#212121;padding:12px 14px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.yt-ht{min-width:0;display:grid;gap:3px}
.yt-ht b{font-size:16px;line-height:1.3}
.yt-ht span{color:#aaa;font-size:12px}
.yt-nav{display:flex;gap:4px}
.yt-nav button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:15px;cursor:pointer}
.yt-nav button:hover{background:rgba(255,255,255,.2)}
.yt-list{list-style:none;margin:0;padding:6px 0;overflow-y:auto;position:relative;flex:1}
.yt-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 4px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit}
.yt-item:hover{background:rgba(255,255,255,.1)}
.on .yt-item{background:rgba(255,255,255,.18)}
.yt-idx{width:22px;flex:none;text-align:center;font-size:12px;color:#aaa}
.yt-idx .eq{display:none;color:#fff}
.on .yt-idx .n{display:none}.on .yt-idx .eq{display:inline}
.yt-th{position:relative;width:110px;flex:none;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#222}
.yt-th img{width:100%;height:100%;object-fit:cover;display:block}
.yt-th em{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.8);border-radius:4px;padding:1px 4px;font:700 11px Inter,system-ui,sans-serif;font-style:normal}
.yt-meta{min-width:0;display:grid;gap:3px}
.yt-meta b{font-size:13px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta small{color:#aaa;font-size:12px}
@media(min-width:900px){
  .yt-wrap{grid-template-columns:minmax(0,1fr) 420px;gap:28px;padding:44px 40px 64px}
  .yt-side{max-height:none;min-height:420px;position:relative;display:block}
  .yt-side>.yt-in{position:absolute;inset:0}
}


.yt-facade{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:rgba(0,0,0,.72);transition:background .15s}
.yt-play::after{content:"";position:absolute;left:27px;top:14px;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt-facade:hover .yt-play{background:#f00}