html{scrollbar-color:#29292d #0c0c0d;scrollbar-width:thin}::-webkit-scrollbar{width:5px;height:4px}::-webkit-scrollbar-track{background:#0b0b0c}::-webkit-scrollbar-thumb{background:#2d2d31;border-radius:12px}.bottom-nav{display:none}
@media(max-width:700px){
:root{color-scheme:dark}html{scroll-padding-top:calc(64px + env(safe-area-inset-top));overscroll-behavior-y:contain}
body{min-width:0;padding-bottom:calc(78px + env(safe-area-inset-bottom));background:#09090a;-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
.shell{padding-left:17px;padding-right:17px}
.top{position:sticky;top:0;z-index:60;background:#0b0b0bf5;border-bottom:1px solid #29292c;padding-top:env(safe-area-inset-top);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.top-inner{height:57px;gap:9px}.brand{font-size:27px}.brand small{font-size:7px;letter-spacing:3.8px;margin-top:5px}.nav,#addBtn{display:none}
.actions{gap:8px}#searchToggle{font-size:0;border:0;padding:9px;background:#202023;border-radius:50%;width:38px;height:38px}#searchToggle:before{content:'⌕';font-size:25px;line-height:15px}
#authBtn{font-size:10px;padding:10px 12px;max-width:126px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:25px;border:1px solid #303034;background:#202023}
main{display:block;min-height:50dvh;overflow:clip}
.hero{min-height:clamp(420px,62dvh,570px);align-items:end}
.hero-art{inset:0;background-image:linear-gradient(0deg,#09090a 1%,#09090a33 62%,#09090a55),url('https://img.youtube.com/vi/7OzbGwgCAHE/maxresdefault.jpg')}
.hero-content{width:100%;padding-top:175px;padding-bottom:29px}.hero h1{font-size:clamp(63px,15.5vw,100px);margin:16px 0}.hero p{font-size:12px;line-height:1.7;max-width:320px}.hero-buttons{margin-top:19px;gap:9px}.hero-buttons button{padding:12px;font-size:10px}
.side-number{top:18px;right:17px;font-size:11px}
.ticker-inner{padding:9px 0;font-size:17px}
.section{padding-top:29px;padding-bottom:14px}.heading{margin-bottom:17px}.heading h2{font-size:43px}.heading p{display:none}
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;margin-right:-17px;padding-right:17px;scroll-snap-type:x proximity}.filters::-webkit-scrollbar{display:none}.filter{flex:0 0 auto;border-radius:24px;padding:10px 15px;font-size:11px}
.catalog{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:0 17px 12px 0;margin-right:-17px}.catalog>.video-card{flex:0 0 77vw;max-width:325px;scroll-snap-align:start}.catalog .featured{grid-column:auto}.catalog .video-meta h3,.catalog .featured .video-meta h3{font-size:23px}
.manifesto{margin-top:28px;padding:34px 0}.manifesto h2{font-size:55px}.manifesto p{font-size:12px}
.footer{border-top:1px solid #29292c;padding:30px 0 16px}.footer-inner{gap:12px}.footer p{font-size:11px}
.bottom-nav{display:grid;position:fixed;z-index:80;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding:5px 8px env(safe-area-inset-bottom);grid-template-columns:repeat(4,minmax(0,1fr));background:#0a0a0af5;border-top:1px solid #323235;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.bottom-nav button{border:0;background:none;color:#95959b;font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px}
.bottom-nav button.active{color:#d5ff36}
.bottom-nav button:focus-visible{outline:2px solid #d5ff36;outline-offset:-4px}
.bottom-nav .nav-ico{font-size:22px;line-height:1.05}
.modal{align-items:flex-end;padding:0;z-index:100}.dialog{width:100%;max-height:94dvh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0}.dialog-head{padding:13px 17px}.dialog-head h2{font-size:23px}.player-details{padding:14px 17px}.social{padding:0 17px 22px}.form-body{padding:10px 17px 24px}
}

/* Scaled app typography across device sizes */
:root{--body-font:clamp(12px,.86vw + 10px,15px)}
body{font-size:var(--body-font)}
.hero h1{font-size:clamp(52px,8vw,104px);line-height:.9}
.heading h2{font-size:clamp(30px,3.9vw,49px)}
.manifesto h2{font-size:clamp(40px,6vw,78px)}
.video-meta h3,.catalog .featured .video-meta h3{font-size:clamp(19px,2vw,27px)}
.section{padding-top:clamp(28px,4.2vw,58px)}
@media(max-width:700px){
.hero{min-height:clamp(365px,57dvh,510px)}
.hero-content{padding-top:110px;padding-bottom:25px}
.hero h1{font-size:clamp(46px,11.7vw,70px);line-height:.92;letter-spacing:-1px}
.hero p{font-size:clamp(11px,3vw,13px);line-height:1.55}
.hero-buttons button{font-size:10px;padding:10px 12px}
.heading h2{font-size:clamp(29px,7.2vw,40px)}
.manifesto h2{font-size:clamp(36px,10vw,55px)}
.video-meta h3,.catalog .featured .video-meta h3{font-size:clamp(17px,5.3vw,22px)}
.catalog>.video-card{flex-basis:min(74vw,300px)}
.section{padding-top:25px}
.brand{font-size:24px}
}
@media(max-width:370px){.hero h1{font-size:43px}.hero-buttons{flex-wrap:wrap}.top-inner{gap:5px}#musicBtn{font-size:10px;padding:9px 8px}#authBtn{max-width:99px}}

/* viewport móvil UrbanaTV */
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}body{width:100%;min-width:0;overflow-x:clip}img,video,iframe{max-width:100%}button,a{ -webkit-tap-highlight-color:transparent}@media(max-width:640px){.shell{max-width:100%;box-sizing:border-box}.home-news-grid,.news-preview{grid-template-columns:minmax(0,1fr)}.section-head,.heading{flex-wrap:wrap}.modal{padding:10px}.dialog{max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain}.bottom-nav{padding-bottom:env(safe-area-inset-bottom)}}


/* UrbanaTV responsive header + icon-first navigation */
.top-inner{gap:clamp(10px,1.8vw,26px);min-width:0}
.brand{gap:9px;flex:0 0 auto;min-width:0}
.brand-word{display:block;min-width:0;line-height:.83}
.brand-word>span{color:var(--accent)}
.brand-word small{display:block}
.brand-icon{width:clamp(32px,3.2vw,42px);height:clamp(32px,3.2vw,42px);object-fit:cover;flex:0 0 auto}
.top .nav{gap:clamp(10px,1.35vw,22px);margin-left:clamp(0px,1vw,14px);min-width:0}
.top .nav a{font-size:clamp(10px,.82vw,12px);letter-spacing:.06em;white-space:nowrap}
.top .actions{gap:clamp(5px,.65vw,10px);flex:0 0 auto}
.top .actions .iconbtn,.top .actions .pill,.top .actions .urban-mini-open{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:42px;height:42px;min-width:42px;padding:0;border-radius:12px;font-size:16px;line-height:1}
.top .actions .pill{width:46px;min-width:46px}
.top .actions .pill i+i{font-size:13px;margin-left:-3px}
.top .actions .urban-mini-open{border-radius:12px}
.top .actions #authBtn{font-size:16px}
.top .actions .urban-bell{font-size:17px!important}
@media(max-width:1120px){.top .nav{display:none}.top-inner{gap:14px}.top .actions{margin-left:auto}.top .actions .iconbtn,.top .actions .pill,.top .actions .urban-mini-open{width:40px;height:40px;min-width:40px}.top .actions .pill{width:44px;min-width:44px}}
@media(max-width:700px){
 .top-inner{height:58px;gap:8px}
 .brand{gap:7px;min-width:0}
 .brand-icon{width:32px;height:32px}
 .brand-word{font-size:23px;letter-spacing:-.8px}
 .brand-word small{font-size:6px;letter-spacing:2.7px;margin-top:5px;white-space:nowrap}
 .top .actions{gap:5px}
 .top .actions .iconbtn,.top .actions .pill,.top .actions .urban-mini-open{width:34px;height:34px;min-width:34px;padding:0;border-radius:10px;font-size:14px}
 .top .actions .pill{width:37px;min-width:37px}
 #musicBtn{display:inline-flex!important}
 #authBtn{display:none!important}
 .top .actions .urban-bell{min-width:32px!important;width:32px!important}
 .top .actions #searchToggle{font-size:14px}
}
@media(max-width:380px){
 .top-inner{gap:5px}
 .brand{gap:5px}
 .brand-word{font-size:20px}
 .brand-word small{font-size:5px;letter-spacing:2.2px}
 .top .actions{gap:3px}
 .top .actions .iconbtn,.top .actions .pill,.top .actions .urban-mini-open{width:30px;height:32px;min-width:30px;font-size:12px}
 .top .actions .pill{width:34px;min-width:34px}
}
/* Footer-width audio dock: always sits above the fixed mobile tab bar */
.urban-mini[hidden]{display:none!important}
.urban-mini{left:0;right:0;bottom:0;width:100%;max-width:none;border-radius:16px 16px 0 0;border:1px solid #d5ff36;border-bottom:0;padding:10px clamp(14px,3vw,34px);z-index:75;display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(100px,1.1fr) auto;align-items:center;gap:14px;max-height:45dvh;overflow-y:auto}
.urban-mini-head{min-width:0;justify-content:flex-start}
.urban-mini-controls{margin:0;gap:10px}
.urban-mini input[type=range]{min-width:70px}
.urban-mini-status{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#urbanTracklistToggle{margin:0!important;justify-self:end}
.urban-mini>a[href="/musica"]{margin:0!important}
.urban-tracklist{grid-column:1/-1;width:100%;max-height:25dvh}
body:has(#urbanMiniPlayer:not([hidden])){padding-bottom:calc(105px + env(safe-area-inset-bottom))}
@media(max-width:700px){
 .urban-mini{bottom:calc(66px + env(safe-area-inset-bottom));padding:9px 12px 7px;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;border-radius:13px 13px 0 0;max-height:calc(100dvh - 135px);z-index:85}
 .urban-mini-head{grid-column:1;grid-row:1;gap:8px}
 .urban-mini-cover{width:34px;height:34px;flex:0 0 34px}
 .urban-mini-info strong{font-size:11px}
 .urban-mini-info small{font-size:10px}
 .urban-mini-head>button{width:29px;height:29px;flex:0 0 29px}
 .urban-mini-controls{grid-column:2;grid-row:1;gap:5px}
 .urban-mini-controls button{width:30px;height:30px}
 .urban-mini-controls button.mini-primary{width:36px;height:36px}
 .urban-mini input[type=range]{grid-column:1/-1;grid-row:2;width:100%;margin:0;height:15px}
 .urban-mini-status{grid-column:1;grid-row:3;font-size:9px;max-width:100%}
 #urbanTracklistToggle{grid-column:2;grid-row:3;width:34px!important;height:30px;padding:0!important;justify-self:end}
 .urban-mini>a[href="/musica"]{grid-column:2;grid-row:3;display:none!important}
 .urban-tracklist{grid-column:1/-1;max-height:24dvh;margin-top:5px}
 body:has(#urbanMiniPlayer:not([hidden])){padding-bottom:calc(205px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.urban-mini{animation:none!important}}

/* Icon-only bottom navigation */
@media(max-width:700px){.bottom-nav button{gap:0;font-size:0}.bottom-nav button i{font-size:21px;line-height:1}.bottom-nav button.active i{filter:drop-shadow(0 0 7px #d5ff3650)}}
@media(max-width:370px){.bottom-nav button i{font-size:19px}}

/* Preserve white brand wordmark while highlighting TV in lime */
.brand .brand-word{color:var(--text)}.brand .brand-word>span{color:var(--accent)}


/* App-like mobile viewport: compact spacing, stable safe areas and touch-first controls */
html{min-height:100%;min-height:100svh;scroll-padding-top:calc(58px + env(safe-area-inset-top));}
body{min-height:100vh;min-height:100svh;min-height:100dvh;width:100%;max-width:100%;overflow-x:clip;padding-bottom:calc(74px + env(safe-area-inset-bottom));}
img,video,iframe{max-width:100%}
button,a,.filter,.thumbnail{ -webkit-tap-highlight-color:transparent; }
@media(max-width:700px){
 .shell{width:100%;max-width:100%;padding-left:15px;padding-right:15px}
 .top{top:0;padding-top:env(safe-area-inset-top);isolation:isolate}
 .top-inner{height:54px;min-width:0}
 .brand{font-size:23px;gap:7px;letter-spacing:-.6px}
 .brand-icon{width:31px;height:31px;border-radius:9px}
 .brand small{font-size:6px;letter-spacing:2.6px;margin-top:5px}
 .actions{gap:5px;align-items:center}
 .actions .iconbtn,.actions .pill,.actions .urban-mini-open{display:inline-flex;align-items:center;justify-content:center;min-width:36px;width:36px;height:36px;padding:0;border-radius:11px;font-size:14px}
 #musicBtn{display:inline-flex!important}
 #authBtn{display:none!important}
 #searchToggle:before{content:none}
 #searchToggle{font-size:14px;width:36px;height:36px;min-width:36px;border:1px solid #333;background:#202023;border-radius:11px}
 main{min-height:0;overflow:visible}
 .hero{min-height:clamp(330px,52svh,450px);min-height:clamp(330px,52dvh,450px);border-radius:0 0 17px 17px}
 .hero-art{background-position:center 24%;opacity:.7}
 .hero-content{padding-top:90px;padding-bottom:23px}
 .eyebrow{font-size:9px;letter-spacing:1.5px;gap:7px}
 .hero h1{font-size:clamp(47px,12.8vw,72px);line-height:.86;letter-spacing:-1.4px;margin:14px 0 12px}
 .hero p{font-size:12px;line-height:1.5;max-width:290px;margin:0}
 .hero-buttons{gap:8px;margin-top:15px}
 .hero-buttons button{min-height:42px;padding:0 13px;border-radius:12px;font-size:10px}
 .side-number{top:14px;right:15px;font-size:10px}
 .ticker-inner{font-size:16px;padding:8px 0}
 .section{padding-top:23px;padding-bottom:9px}
 .heading{align-items:center;margin-bottom:13px;gap:10px}
 .heading h2{font-size:clamp(29px,8vw,38px);line-height:.92;letter-spacing:-.4px}
 .filters{gap:7px;margin-bottom:14px;padding-bottom:5px}
 .filter{min-height:36px;padding:0 13px;border-radius:20px;font-size:11px;scroll-snap-align:start}
 .catalog{gap:12px;padding-bottom:8px}
 .catalog>.video-card{flex:0 0 min(76vw,286px);max-width:286px}
 .thumbnail{border-radius:12px;aspect-ratio:16/10}
 .thumbnail img{display:block}
 .play{width:43px;height:43px;font-size:16px;box-shadow:0 0 0 5px #0005}
 .tag{top:8px;left:8px;padding:7px 8px;border-radius:6px;font-size:9px}
 .video-meta{padding-top:10px}
 .video-meta h3,.catalog .featured .video-meta h3{font-size:20px;line-height:1.05;margin:4px 0 5px}
 .video-meta p{font-size:11px;line-height:1.45}
 .manifesto{margin-top:21px;padding:27px 0}
 .manifesto-content{gap:12px}
 .manifesto h2{font-size:clamp(37px,10vw,51px);line-height:.88}
 .manifesto p{font-size:11px;line-height:1.55;margin:12px 0 0}
 .footer{padding:25px 0 calc(18px + env(safe-area-inset-bottom))}
 .footer-inner{align-items:flex-start;gap:8px}
 .footer .brand{font-size:24px}
 .footer p{font-size:10px;line-height:1.5;margin:0}
 .bottom-nav{height:calc(62px + env(safe-area-inset-bottom));padding:4px 12px calc(5px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;box-sizing:content-box}
 .bottom-nav button{min-width:0;min-height:48px;border-radius:12px}
 .bottom-nav button i{font-size:20px}
 .bottom-nav button.active{background:#d5ff3610}
 .modal{align-items:flex-end;padding:0;overscroll-behavior:contain}
 .modal.open{padding-top:env(safe-area-inset-top)}
 .dialog{width:100%;max-height:calc(100dvh - env(safe-area-inset-top));max-height:calc(100svh - env(safe-area-inset-top));border-radius:20px 20px 0 0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
 .dialog-head{position:sticky;top:0;z-index:3;background:#171717;border-bottom:1px solid #303033}
 .close{width:42px;height:42px;min-width:42px;border-radius:12px}
 .player{width:100%;aspect-ratio:16/9}
 .player-details{gap:10px}
 .video-controls{padding:10px 14px;gap:8px}
 .video-controls button,.social button,.form-body button{min-height:42px}
 .form-body input,.form-body select,.form-body textarea,.social textarea{font-size:16px!important}
 .comments{max-height:32dvh}
 .share-page-button,.share-article-button{width:auto;min-height:42px}
}
@media(max-width:380px){
 .shell{padding-left:12px;padding-right:12px}
 .top-inner{gap:4px}
 .brand{font-size:21px;gap:5px}
 .brand-icon{width:28px;height:28px}
 .brand small{font-size:5px;letter-spacing:2px}
 .actions{gap:3px}
 .actions .iconbtn,.actions .pill,.actions .urban-mini-open{width:32px;height:34px;min-width:32px}
 .hero{min-height:330px}
 .hero h1{font-size:clamp(43px,12vw,48px)}
 .catalog>.video-card{flex-basis:82vw}
 .bottom-nav{padding-left:8px;padding-right:8px}
}
@media(min-width:701px) and (max-width:1050px){
 .shell{padding-left:22px;padding-right:22px}
 .top-inner{gap:12px}
 .actions{gap:6px}
 .hero{min-height:470px}
 .catalog{gap:16px}
}
@media(prefers-reduced-motion:reduce){.catalog,.filters{scroll-behavior:auto!important}}


/* Account chip: icon and username get their own space instead of touching */
#authBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:42px;max-width:180px;overflow:hidden}
#authBtn>i{flex:0 0 auto;line-height:1}
#authBtn .auth-user-name{display:block;min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:0}
#authBtn.is-signed-in{width:auto;max-width:180px;padding:0 12px}
@media(max-width:700px){
 #authBtn.is-signed-in{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;gap:0}
 #authBtn .auth-user-name{display:none}
}
/* Playlist control remains icon-only even when its state changes */
#urbanTracklistToggle{font-size:0!important;position:relative}
#urbanTracklistToggle i{font-size:15px}
#urbanTracklistToggle:not(:has(i))::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* App shell: cabecera fija y secciones embebidas sin transparencia ni saltos */
.top{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:110;background:#09090a!important;border-bottom:1px solid #303034;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-top:env(safe-area-inset-top)}
body{padding-top:82px}
#urbanRouteMount{position:fixed;top:82px;right:0;bottom:0;left:0;z-index:15;background:#09090a;overflow:hidden;overscroll-behavior:contain}
#urbanRouteMount[hidden]{display:none!important}
#urbanRouteMount iframe{width:100%;height:100%;border:0;display:block;background:#09090a;overscroll-behavior:contain}
@media(max-width:700px){
 body{padding-top:calc(57px + env(safe-area-inset-top));padding-bottom:calc(66px + env(safe-area-inset-bottom));}
 .top{height:auto;padding-top:env(safe-area-inset-top)}
 .top-inner{height:57px}
 #urbanRouteMount{top:calc(57px + env(safe-area-inset-top));bottom:calc(66px + env(safe-area-inset-bottom));}
}