:root{--red:#e10600;--red2:#b00400;--black:#0b0b0b;--g:#f3f3f3;--t:#151515;--m:#666}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--t);background:var(--g)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 14px}
.top{background:var(--black);color:#fff;position:sticky;top:0;z-index:10;border-bottom:4px solid var(--red)}
.bar{display:flex;align-items:center;gap:12px;height:60px}
.logo img{height:40px;display:block}
nav{display:none;position:absolute;top:60px;left:0;right:0;background:var(--black);flex-direction:column}
nav a{padding:14px 18px;border-top:1px solid #222;font-weight:700;text-transform:uppercase;font-size:14px}
nav a:hover{background:var(--red)}
.nav-open nav{display:flex}
.menu-btn{margin-left:auto;background:none;border:0;color:#fff;font-size:26px}
.sub{background:var(--red);padding:8px 12px;border-radius:3px;font-weight:800;font-size:13px;white-space:nowrap}
.ticker{background:var(--red);font-size:13px}.ticker .wrap{display:flex;gap:10px;align-items:center;height:30px;overflow:hidden}
.ticker b{background:#000;padding:3px 8px;white-space:nowrap}.tick{overflow:hidden;white-space:nowrap;flex:1}
#ticker{display:inline-block;padding-left:100%;animation:tk 60s linear infinite}@keyframes tk{to{transform:translateX(-100%)}}
section{margin:22px 0}
.sec-h{display:flex;align-items:baseline;gap:10px;border-bottom:3px solid var(--black);margin-bottom:12px}
.sec-h h2{margin:0;background:var(--black);color:#fff;padding:6px 12px;font-size:17px;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.sec-h small{color:var(--m);font-weight:600}
.direto .sec-h{border-color:var(--red)}.direto .sec-h h2{background:var(--red)}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;display:none}.live .dot{display:inline-block;animation:p 1s infinite}@keyframes p{50%{opacity:.2}}
.direto-grid{display:grid;gap:12px}
.player{aspect-ratio:16/9;background:#000;width:100%}.player iframe{width:100%;height:100%;border:0}
.direto-side{background:#fff;padding:14px;display:flex;flex-direction:column;gap:10px}
.btn{background:var(--red);color:#fff;text-align:center;padding:12px;font-weight:800;text-transform:uppercase;font-size:14px}
.btn.ghost{background:#fff;color:var(--black);border:2px solid var(--black)}
.hero{display:grid;gap:12px}
.card{background:#fff;display:flex;flex-direction:column;overflow:hidden;border-bottom:3px solid transparent;transition:.15s}
.card:hover{border-color:var(--red)}
.card .img{aspect-ratio:16/9;background:linear-gradient(135deg,#111,#3a0000);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:22px;letter-spacing:2px}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .b{padding:10px 12px 12px}
.tag{color:var(--red);font-size:11px;font-weight:800;text-transform:uppercase}
.card h3{margin:4px 0 6px;font-size:16px;line-height:1.25}
.card p{margin:0 0 8px;font-size:14px;color:#333;line-height:1.4}
.meta{font-size:12px;color:var(--m)}.meta a{color:var(--red);font-weight:700}
.hero .card:first-child h3{font-size:22px}
.grid,.vgrid{display:grid;gap:12px;grid-template-columns:1fr}
.vcard{background:#000;color:#fff;position:relative}.vcard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.9}
.vcard span{display:block;padding:8px 10px;font-size:13px;font-weight:700}
.vcard .badge{position:absolute;top:8px;left:8px;background:var(--red);padding:2px 6px;font-size:11px;font-weight:800}
footer{background:var(--black);color:#bbb;padding:24px 0;font-size:13px;margin-top:30px;border-top:4px solid var(--red)}
@media(min-width:600px){.grid,.vgrid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){
 .menu-btn{display:none} nav{display:flex;position:static;flex-direction:row;background:none;margin-left:auto}
 nav a{border:0;padding:8px 10px;font-size:13px}
 .direto-grid{grid-template-columns:2fr 1fr}
 .hero{grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto}
 .hero .card:first-child{grid-row:span 2}
 .grid{grid-template-columns:repeat(4,1fr)} .vgrid{grid-template-columns:repeat(5,1fr)}
}
.logo{display:flex;align-items:center;gap:8px}.logo img{height:40px}
.logo span{font-weight:900;font-size:22px;letter-spacing:1px;line-height:1;display:flex;flex-direction:column}
.logo small{font-size:8px;font-weight:600;letter-spacing:1.5px;color:#bbb;margin-top:3px;text-transform:uppercase}
@media(max-width:420px){.logo small{display:none}}