:root { color-scheme: dark; --red:#f20d2f; --yellow:#ffc400; --ink:#09090b; --panel:#151519; --muted:#aaaab5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,a { font:inherit; }
button { color:inherit; }
.site-header { min-height:82px; padding:14px clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3vw,44px); border-bottom:1px solid #29292f; background:rgba(9,9,11,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.brand { color:#fff; text-decoration:none; display:flex; align-items:center; min-width:0; }
.brand img { display:block; width:auto; height:52px; max-width:min(310px,48vw); object-fit:contain; }
.main-nav { display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.2vw,34px); margin-left:auto; }
.main-nav a { color:#d6d6dd; text-decoration:none; white-space:nowrap; font-size:.86rem; font-weight:750; transition:color .2s ease; }
.main-nav a:hover,.main-nav a:focus-visible { color:var(--yellow); }
.social-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.social-link { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:#202026; border:1px solid #34343c; border-radius:50%; transition:background .2s ease,transform .2s ease,color .2s ease; }
.social-link svg { width:21px; height:21px; display:block; }
.social-link:hover,.social-link:focus-visible { color:#111; background:var(--yellow); transform:translateY(-2px); }
.youtube-link,.load-more { background:var(--red); color:#fff; text-decoration:none; font-weight:800; padding:12px 18px; border:0; border-radius:999px; cursor:pointer; }
main { overflow:hidden; }
.hero { min-height:620px; padding:clamp(48px,8vw,110px) clamp(20px,5vw,72px); display:grid; grid-template-columns:minmax(280px,.8fr) minmax(460px,1.2fr); gap:clamp(36px,6vw,90px); align-items:center; background:radial-gradient(circle at 80% 15%,rgba(242,13,47,.26),transparent 33%),linear-gradient(145deg,#09090b,#101013); }
.hero-copy h1 { max-width:760px; font-size:clamp(2.7rem,5.2vw,6.3rem); line-height:.93; letter-spacing:-.065em; margin:10px 0 25px; }
.hero-copy>p:last-child { color:#c6c6ce; font-size:clamp(1rem,1.3vw,1.25rem); line-height:1.6; max-width:600px; }
.eyebrow { color:var(--yellow); text-transform:uppercase; letter-spacing:.17em; font-size:.75rem; font-weight:900; }
.featured { min-width:0; }.featured h2 { font-size:clamp(1.2rem,2vw,2rem); line-height:1.15; margin:18px 0 0; }
.featured-cover,.video-cover { position:relative; display:block; width:100%; padding:0; border:0; overflow:hidden; cursor:pointer; background:#222; }
.featured-cover { aspect-ratio:16/9; border-radius:24px; box-shadow:0 34px 80px rgba(0,0,0,.45); }.featured-cover img,.video-cover img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .35s ease,opacity .35s ease; }
.featured-cover img { position:absolute; inset:0; height:100%; object-fit:contain; background:#000; }
.featured-cover:hover img,.video-cover:hover img { transform:scale(1.035); opacity:.76; }
.play { position:absolute; left:50%; top:50%; translate:-50% -50%; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; padding-left:4px; color:#fff; background:var(--red); box-shadow:0 12px 28px rgba(0,0,0,.4); }.play-large { width:74px; height:74px; font-size:1.35rem; }
.featured-label { position:absolute; left:18px; top:18px; background:var(--yellow); color:#111; padding:7px 10px; border-radius:999px; text-transform:uppercase; font-size:.68rem; letter-spacing:.1em; font-weight:900; }
.videos-section { padding:clamp(64px,8vw,110px) clamp(20px,5vw,72px); max-width:1680px; margin:auto; }
.category-section { scroll-margin-top:100px; }
.videos-section.alternate { max-width:none; padding-left:max(clamp(20px,5vw,72px),calc((100vw - 1680px)/2 + 72px)); padding-right:max(clamp(20px,5vw,72px),calc((100vw - 1680px)/2 + 72px)); background:#111115; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:35px; }.section-heading h2 { font-size:clamp(2.1rem,4vw,4.6rem); letter-spacing:-.05em; margin:6px 0 0; }.video-count { color:var(--muted); }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px) 24px; }.video-cover { border-radius:16px; }.video-info { padding:15px 3px 0; }.video-info time { color:var(--yellow); font-size:.73rem; text-transform:uppercase; font-weight:800; }.video-info h3 { font-size:1.05rem; line-height:1.35; margin:7px 0 0; }.video-info h3 a { color:#fff; text-decoration:none; }.video-info h3 a:hover { color:var(--yellow); }.video-info p { color:#aaaab5; line-height:1.55; font-size:.86rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:10px 0; }.details-link { color:var(--yellow); font-size:.78rem; font-weight:800; text-decoration:none; }
.category-section:is([data-category="programas"],[data-category="cortes"]) .video-cover { aspect-ratio:16/9; background:#000; }
.category-section:is([data-category="programas"],[data-category="cortes"]) .video-cover img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; }
.load-more { display:block; margin:48px auto 0; }.load-more[hidden] { display:none; }.load-more:disabled { opacity:.55; cursor:wait; }.status { color:#ff9aab; text-align:center; margin:28px 0; min-height:1.5em; }
.skeleton { min-height:260px; border-radius:18px; background:linear-gradient(100deg,#16161b 30%,#25252c 50%,#16161b 70%); background-size:300% 100%; animation:shine 1.4s infinite; }.skeleton-featured { aspect-ratio:16/9; min-height:0; }
.shorts-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.short-card .video-cover img { aspect-ratio:9/16; }.short-card .video-info h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.skeleton-short { min-height:440px; }
.player-dialog { width:min(1050px,94vw); padding:18px; border:1px solid #34343c; border-radius:18px; color:#fff; background:#101014; box-shadow:0 30px 90px #000; }.player-dialog::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(5px); }.player-frame { aspect-ratio:16/9; }.player-frame iframe { width:100%; height:100%; border:0; }.player-dialog h2 { font-size:clamp(1rem,2vw,1.45rem); margin:15px 45px 4px 2px; }.close-player { position:absolute; right:18px; bottom:14px; width:36px; height:36px; border:0; border-radius:50%; background:#292930; cursor:pointer; font-size:1.5rem; }
footer { border-top:1px solid #29292f; color:#888894; padding:35px clamp(20px,5vw,72px); text-align:center; }
.watch-page { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:48px 0 90px; overflow:visible; }.breadcrumb { display:flex; gap:10px; color:var(--muted); margin-bottom:24px; font-size:.85rem; }.breadcrumb a { color:var(--yellow); text-decoration:none; }.watch-player { aspect-ratio:16/9; background:#000; border-radius:22px; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,.45); }.watch-player iframe { width:100%; height:100%; border:0; }.watch-article>.eyebrow { margin-top:36px; }.watch-article h1 { font-size:clamp(2rem,5vw,4.8rem); line-height:1.02; letter-spacing:-.05em; margin:10px 0 18px; }.watch-article time { color:var(--muted); }.watch-description { color:#d2d2d8; white-space:normal; line-height:1.75; margin:32px 0; max-width:900px; }.watch-youtube { display:inline-block; }.not-found { min-height:55vh; display:grid; place-content:center; text-align:center; }.not-found h1 { font-size:clamp(2rem,5vw,4rem); }
@keyframes shine { to { background-position:-300% 0; } }
@media (max-width:1100px) { .site-header { flex-wrap:wrap; }.main-nav { order:3; width:100%; margin:0; padding-top:10px; border-top:1px solid #24242a; }.category-section { scroll-margin-top:150px; } }
@media (max-width:900px) { .hero { grid-template-columns:1fr; min-height:auto; }.video-grid,.shorts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:580px) { .site-header { gap:12px; padding-bottom:10px; }.youtube-link { padding:10px 12px; font-size:.68rem; white-space:nowrap; }.social-actions { gap:6px; }.social-link { width:36px; height:36px; }.social-link svg { width:18px; height:18px; }.brand img { height:38px; max-width:42vw; }.main-nav { justify-content:flex-start; gap:22px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }.main-nav::-webkit-scrollbar { display:none; }.main-nav a { font-size:.76rem; }.category-section { scroll-margin-top:145px; }.hero { padding-top:55px; }.video-grid { grid-template-columns:1fr; }.section-heading { align-items:start; flex-direction:column; }.play-large { width:58px; height:58px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }