
/* RokiTV 2026 — portada cinematográfica responsive */
body:not(.theme-claro):not(.theme-elegante){background:#09090d;color:#f7f4f3}
body:not(.theme-claro):not(.theme-elegante) .top{background:rgba(12,11,17,.94);border-bottom:1px solid #ffffff17;backdrop-filter:blur(18px)}
.top{min-height:78px;padding:12px max(22px,calc((100vw - 1340px)/2));gap:25px}
.top .brand{font-size:22px;letter-spacing:-.5px;flex-shrink:0}.top .brand img{width:57px;height:52px}.top .nav{gap:clamp(10px,1.6vw,24px);flex-wrap:wrap;justify-content:flex-end}.top .nav a{font-size:13px;white-space:nowrap;transition:color .2s}.top .nav a:hover{color:#fff}
.top .nav a[href="resellers/"]{padding:10px 16px;border-radius:10px;border:1px solid #ffffff30;background:#ffffff0b}
.top .nav a[href="#planes"]{color:#fff;background:#ba1828;padding:10px 17px;border-radius:10px}
.hero{max-width:1340px;min-height:0;padding:78px 28px 66px;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(25px,5vw,76px)}
.hero-copy{position:relative;z-index:1}.hero-copy .eyebrow{display:inline-flex;padding:9px 13px;border:1px solid #eeb15c55;background:#b7872320;border-radius:999px;font-size:11px;color:#f6c76a;letter-spacing:2px}
.hero h1{font-size:clamp(44px,5.2vw,76px);letter-spacing:-2.6px;max-width:730px;margin:23px 0 18px}.hero-copy p{max-width:530px;line-height:1.7;color:#bfc0c9}.hero-actions .button{min-height:48px;padding:12px 23px}
.hero-art{min-height:370px;position:relative;overflow:hidden;border-radius:27px;padding:28px;background:radial-gradient(circle at 70% 25%,#72202e77,transparent 56%),linear-gradient(140deg,#24151c,#101015 75%);border:1px solid #8c374352;box-shadow:0 24px 80px #0008;justify-content:center;gap:20px}
.hero-art::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,#ffffff08 55%,transparent 65%);pointer-events:none}.hero-art>img{height:205px;max-width:350px;filter:drop-shadow(0 12px 26px #0008)}
.hero-art .stats{margin-top:auto;position:relative;z-index:1}.hero-art .stats>div{background:#0c0c14b8;border-color:#ffffff22;padding:16px 6px}.hero-art .stats b{font-size:clamp(21px,2.1vw,30px)}
.section{max-width:1340px;padding:56px 28px}.section-heading{margin-bottom:26px}.section-heading h2{font-size:clamp(28px,3vw,40px)}
.price-card,.app-card,.catalog-item{transition:transform .18s,border-color .18s}.price-card:hover,.app-card:hover,.catalog-item:hover{transform:translateY(-3px);border-color:#ffffff55}
body.theme-cinema .price-card,body.theme-cinema .app-card,body.theme-cinema .catalog-item{background:#171217}
@media(max-width:1080px){.top{padding:12px 24px}.top .nav{gap:11px}.top .nav a{font-size:12px}.hero{padding-top:58px}}
@media(max-width:850px){.top{min-height:68px;padding:10px 18px}.top .navtoggle{display:block;margin-left:auto}.top .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;background:#141017;padding:15px 18px 20px;flex-direction:column;align-items:stretch;gap:5px;border-bottom:1px solid #ffffff30;box-shadow:0 20px 35px #0008}.top .nav.open{display:flex}.top .nav a{font-size:15px;padding:12px 14px}.top .nav a[href="resellers/"],.top .nav a[href="#planes"]{padding:12px 14px}.hero{grid-template-columns:1fr;gap:25px;padding:42px 20px 38px}.hero h1{font-size:clamp(39px,7.5vw,61px)}.hero-art{min-height:310px}.section{padding:46px 20px}}
@media(max-width:480px){.hero{padding:30px 16px 30px}.hero h1{font-size:clamp(36px,10vw,47px);letter-spacing:-1.6px}.hero-copy p{font-size:15px}.hero-actions{gap:9px}.hero-actions .button{flex:1 1 155px;padding:12px 13px;font-size:13px}.hero-art{padding:15px;min-height:260px;border-radius:20px}.hero-art>img{height:140px}.hero-art .stats{gap:6px}.hero-art .stats>div{padding:12px 3px}.hero-art .stats b{font-size:19px}.hero-art .stats small{font-size:11px}.section{padding:38px 16px}.cards{gap:12px}.price-card{padding:20px}}
@media(prefers-reduced-motion:reduce){.price-card,.app-card,.catalog-item{transition:none}html{scroll-behavior:auto}}
