/* MUSIRIVA — maquillaje visual basado en la maqueta aprobada.
   DOM y lógica existente se conservan; no se usa en modo agentes. */
html body.musiriva-branded{
 --musi-ink:#0b0718;--musi-violet:#8434e9;--musi-pink:#f044a8;
 --musi-text:#fff8ff;--musi-muted:#d6c4e4;
 font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
 background:radial-gradient(circle at 28% 4%,#301448 0,transparent 35%),linear-gradient(145deg,#10051c,#0e071a 65%,#180920)!important;
 color:var(--musi-text);
}
html body.musiriva-branded .wrap{width:min(1510px,calc(100% - 48px))!important;max-width:none!important}
html body.musiriva-branded:has(.musiriva-topbar){padding-bottom:25px}
.musiriva-topbar{
 position:sticky;top:0;z-index:400;background:rgba(17,7,28,.95);
 border-bottom:1px solid rgba(181,96,225,.26);
 -webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);
 box-shadow:0 7px 26px #07000c38;
}
.musiriva-topbar-inner{max-width:1570px;margin:0 auto;padding:11px 30px;min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.musiriva-head-logo{display:inline-flex;align-items:center;flex-shrink:0;max-width:245px}
.musiriva-head-logo img{display:block;width:min(230px,24vw);height:auto;max-height:52px}
.musiriva-desktop-menu{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;flex:1}
.musiriva-nav-link,.musiriva-account-btn{
 display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
 border:1px solid transparent;background:transparent;color:#ecdbf6!important;
 text-decoration:none;font-weight:700;font-size:13px;line-height:1.2;
 border-radius:15px;padding:12px 13px;cursor:pointer;
}
.musiriva-nav-link svg,.musiriva-account-btn svg{width:19px;height:19px;flex-shrink:0;stroke:currentColor}
.musiriva-nav-link:hover,.musiriva-account-btn:hover{background:rgba(150,64,201,.2);color:#fff!important}
.musiriva-nav-link.is-active{
 background:linear-gradient(120deg,rgba(117,45,182,.42),rgba(229,56,159,.32));
 border-color:#af55cb;color:#fff!important;
 box-shadow:inset 0 1px #ffffff30,0 0 18px #c04bea35;
}
.musiriva-account{position:relative;flex-shrink:0}
.musiriva-account-btn{border-color:#673b86;background:#231132}
.musiriva-account-panel{
 position:absolute;right:0;top:calc(100% + 8px);width:220px;z-index:480;
 background:#21102d;border:1px solid #754791;border-radius:16px;padding:7px;
 box-shadow:0 20px 40px #0008;
}
.musiriva-account-panel[hidden]{display:none!important}
.musiriva-account-panel button,.musiriva-account-panel a{display:block;width:100%;padding:13px!important;border:none!important;cursor:pointer;text-align:left;background:transparent!important;color:#f5e4ff!important;font-weight:700;text-decoration:none}
.musiriva-account-panel button:hover,.musiriva-account-panel a:hover{background:#3a1a4f!important;border-radius:8px}
.musiriva-mobile-menu{display:none}
html body.musiriva-branded #ecoNavToggle{display:none!important}
html body.musiriva-branded .musiriva-page-brand{display:none!important}

/* HERO de la maqueta: título, subtítulo y botón protagonista */
html body.musiriva-branded .eco-creator-hero{
 width:min(1570px,100%)!important;max-width:none!important;
 position:relative;overflow:hidden;isolation:isolate;
 padding:40px 20px 42px!important;margin:4px auto 8px!important;
 background:radial-gradient(ellipse at 49% 42%,#6e278c30,transparent 64%)!important;
}
html body.musiriva-branded .eco-creator-hero::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:url('/assets/musiriva-hero-wave.svg') center 60% / 100% auto no-repeat;
 opacity:.86;
}
html body.musiriva-branded .eco-creator-intro{
 display:flex!important;flex-direction:column!important;align-items:center!important;
 text-align:center!important;width:100%;max-width:1250px!important;
 margin:0 auto!important;padding:6px 18px!important;
}
html body.musiriva-branded .eco-creator-intro .musiriva-studio-logo{display:none!important}
html body.musiriva-branded .eco-creator-kicker{
 display:block!important;margin:0 auto 13px!important;
 color:#edb0f5!important;font-size:12px!important;
 font-weight:850!important;letter-spacing:.38em!important;
}
html body.musiriva-branded .musiriva-hero-title{
 max-width:1400px!important;margin:0 auto 15px!important;
 font-size:clamp(34px,4.15vw,72px)!important;letter-spacing:-.045em!important;
 font-weight:900!important;line-height:1.14!important;
}
html body.musiriva-branded .musiriva-hero-title span{
 display:inline!important;white-space:normal!important;line-height:inherit;
}
html body.musiriva-branded .musiriva-hero-title .musiriva-gradient{
 background:linear-gradient(90deg,#f257ab 0%,#c17ef6 57%,#eb47a7 100%);
 background-clip:text;-webkit-background-clip:text;color:transparent!important;
}
html body.musiriva-branded .musiriva-hero-description{
 color:#eee0f6!important;margin:0 auto 22px!important;
 max-width:860px!important;font-size:clamp(15px,1.45vw,21px)!important;
 line-height:1.5!important;font-weight:450!important;
}
html body.musiriva-branded .musiriva-hero-cta{
 display:inline-flex;justify-content:center;align-items:center;gap:11px;
 border:1px solid #e890f9;border-radius:100px;
 background:linear-gradient(100deg,#8c2ef1,#c837c9 50%,#f044a8);
 box-shadow:0 8px 29px #af2ccc69,inset 0 1px #fff7;
 color:white!important;text-decoration:none;font-weight:900;
 padding:15px 37px;font-size:clamp(16px,1.4vw,21px);
 min-width:min(350px,100%);transition:transform .16s,box-shadow .16s;
}
html body.musiriva-branded .musiriva-hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 35px #c42cdd85}
html body.musiriva-branded .musiriva-hero-cta svg{width:22px;height:22px;stroke:currentColor}
html body.musiriva-branded .eco-creator-purposes{margin-top:23px!important;color:#dfbde5!important;gap:25px!important}
html body.musiriva-branded .eco-wallet-counter{display:none!important}

/* Panel de producción y recientes */
html body.musiriva-branded main.grid{
 display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(360px,.88fr)!important;
 gap:20px!important;align-items:start!important;max-width:1510px!important;
 padding:18px 0 60px!important;margin:0 auto!important;
}
html body.musiriva-branded main.grid>section.card,
html body.musiriva-branded main.grid>aside.card{
 width:100%;min-width:0;max-width:none!important;
 border-radius:24px!important;
 background:linear-gradient(150deg,#30123de8,#170a27f5)!important;
 border:1px solid #8a438e!important;padding:26px!important;
 box-shadow:inset 0 1px #f7c9ff16,0 18px 35px #0007!important;
}
html body.musiriva-branded main.grid>.card h2{font-size:clamp(20px,1.7vw,27px)!important;margin:0!important;line-height:1.3!important}
html body.musiriva-branded .eco-song-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:15px}
html body.musiriva-branded .eco-songs-counter{background:#321345!important;border:1px solid #a257b1!important;color:#f3ddf8!important;border-radius:14px!important}
html body.musiriva-branded #songForm{scroll-margin-top:106px}
html body.musiriva-branded #songForm label{font-size:13px!important;margin:12px 0 6px!important;color:#f7e8ff!important}
html body.musiriva-branded #songForm input,
html body.musiriva-branded #songForm textarea,
html body.musiriva-branded #songForm select{
 background:#1e0c2f!important;border:1px solid #8b58ae!important;
 border-radius:13px!important;color:#fff5ff!important;
}
html body.musiriva-branded main.grid #lyrics{height:190px!important;min-height:160px!important;max-height:340px!important}
html body.musiriva-branded #songForm #aiLyricsBtn{
 width:auto!important;min-height:42px!important;font-size:13px!important;
 padding:10px 17px!important;margin:0 0 8px!important;
 background:#3c1e55!important;border:1px solid #8b4ab2!important;
 box-shadow:none!important;border-radius:12px!important;
}
html body.musiriva-branded .musiriva-basic-grid{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:16px;margin:2px 0 10px;
}
html body.musiriva-branded .musiriva-basic-grid>div{min-width:0}
html body.musiriva-branded .musiriva-basic-grid input{width:100%}
html body.musiriva-branded .musiriva-basic-grid .genre-strip{max-width:100%}
html body.musiriva-branded .musiriva-basic-grid #quickStyles{gap:6px!important;padding:5px 0 3px!important;overflow-x:auto!important}
html body.musiriva-branded .musiriva-basic-grid #quickStyles .login{
 padding:8px 12px!important;white-space:nowrap!important;
 background:#331747!important;border:1px solid #8152aa!important;
 border-radius:100px!important;color:#f8e8ff!important;font-size:12px!important;
}
html body.musiriva-branded .musiriva-basic-grid #quickStyles .login:hover{border-color:#e87dec!important;background:#5d2a76!important}
html body.musiriva-branded .musiriva-basic-grid #selectedGenreBox{margin:8px 0 0!important;padding:8px 10px!important;border-radius:12px!important}
html body.musiriva-branded #songForm #generateBtn{
 width:100%!important;border-radius:15px!important;min-height:56px!important;
 font-size:17px!important;margin-top:22px!important;
 background:linear-gradient(95deg,#8d33ef,#cb40d6,#f044a8)!important;
 box-shadow:0 10px 28px #9f24ca50!important;
}
html body.musiriva-branded #songResultCard{position:relative!important;top:auto!important;max-height:none!important;min-height:290px}
html body.musiriva-branded #songResultCard .eco-recent-songs{display:block!important}
html body.musiriva-branded .eco-recent-head{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
html body.musiriva-branded .eco-recent-head h2{font-size:22px!important}
html body.musiriva-branded .eco-recent-head p{color:#d0b9dc!important;margin:4px 0 0!important}
html body.musiriva-branded .eco-recent-head button{background:#391d4c!important;border:1px solid #8846a5!important;border-radius:12px!important;color:#f9eaff!important}
html body.musiriva-branded .eco-recent-list{display:flex;flex-direction:column;gap:9px}
html body.musiriva-branded .eco-recent-item{
 background:#1c0c2d!important;border:1px solid #58336f!important;
 padding:11px!important;border-radius:14px!important;
}
html body.musiriva-branded .eco-recent-art{background:linear-gradient(140deg,#7827a6,#e13c99)!important;border-radius:12px!important;color:white!important}
html body.musiriva-branded .eco-recent-meta{color:#cbb6d7!important}
html body.musiriva-branded #songResultCard audio{height:35px!important;max-width:100%;color-scheme:dark}
html body.musiriva-branded footer{color:#b89bcf}

/* Public showcase: two columns without changing loading, playback or links. */
html body.musiriva-branded main.wrap{width:min(1280px,calc(100% - 40px))!important;padding-top:22px}
html body.musiriva-branded main.wrap .panel{background:linear-gradient(160deg,#261230,#160b26)!important;border:1px solid #693888!important;border-radius:24px}
html body.musiriva-branded main.wrap #songs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
html body.musiriva-branded main.wrap #songs .song{
 margin:0!important;min-width:0;
 display:flex;flex-direction:column;gap:7px;
 background:linear-gradient(150deg,#30143f,#1a0c29)!important;
 border:1px solid #70438b!important;border-radius:17px!important;padding:18px!important;
}
html body.musiriva-branded main.wrap #songs .song:before{
 content:'♫';display:grid;place-items:center;width:43px;height:43px;
 background:linear-gradient(135deg,#9f33ed,#ee4bb0);
 border-radius:12px;font-size:25px;color:white;margin-bottom:5px;
}
html body.musiriva-branded main.wrap #songs .song h2{font-size:17px;margin:0!important;line-height:1.3}
html body.musiriva-branded main.wrap #songs .song small{color:#d4b9e0!important;font-size:12px}
html body.musiriva-branded main.wrap #songs .song audio{width:100%;min-width:0;max-width:100%;height:42px!important;margin:7px 0 1px!important;color-scheme:dark}
html body.musiriva-branded main.wrap #songs .song>a{
 display:inline-flex!important;width:max-content;max-width:100%;
 border-color:#ab62cf!important;background:#311845!important;color:#f5d9ff!important;
 padding:9px 12px!important;border-radius:12px!important;font-size:12px!important;
}
html body.musiriva-branded main.wrap #genreFilter{color:#fff!important;border:1px solid #75469a!important;background:#1e0e2d!important;border-radius:12px!important}

/* Responsive navigation and stacked panels */
@media(max-width:1100px){
 .musiriva-desktop-menu{gap:0}
 .musiriva-nav-link{font-size:12px;padding:10px 9px}
 .musiriva-head-logo img{width:185px}
 html body.musiriva-branded main.grid{grid-template-columns:minmax(0,1.3fr) minmax(290px,.82fr)!important;gap:14px!important}
}
@media(max-width:860px){
 .musiriva-topbar-inner{min-height:64px;padding:9px 18px}
 .musiriva-desktop-menu{display:none!important}
 .musiriva-head-logo img{width:188px}
 .musiriva-account-btn{padding:9px 12px}
 .musiriva-mobile-menu{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:550;
  bottom:0;left:0;right:0;min-height:68px;
  padding:6px 8px max(8px,env(safe-area-inset-bottom,8px));
  background:rgba(28,10,42,.97);border-top:1px solid #9256aa;
  box-shadow:0 -6px 35px #0a0217bf;backdrop-filter:blur(17px);
 }
 .musiriva-mobile-menu .musiriva-nav-link{
  min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center;
  justify-content:center;border-radius:13px;font-size:10px!important;padding:6px 2px!important;
  white-space:nowrap;line-height:1.2;
 }
 .musiriva-mobile-menu .musiriva-nav-link svg{width:20px;height:20px}
 html body.musiriva-branded:has(.musiriva-mobile-menu){padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important}
 html body.musiriva-branded .wrap{width:calc(100% - 24px)!important}
 html body.musiriva-branded .eco-creator-hero{
  padding:26px 8px 29px!important;margin:6px auto!important;
 }
 html body.musiriva-branded .eco-creator-hero::before{background-position:center 78%;background-size:auto 75%;opacity:.55}
 html body.musiriva-branded .eco-creator-intro{padding:6px 7px!important}
 html body.musiriva-branded .musiriva-hero-title{font-size:clamp(28px,6.4vw,47px)!important;line-height:1.12!important}
 html body.musiriva-branded .musiriva-hero-title .musiriva-gradient{display:block!important}
 html body.musiriva-branded .musiriva-hero-description{font-size:clamp(13px,3.6vw,17px)!important;margin-bottom:17px!important}
 html body.musiriva-branded .musiriva-hero-cta{padding:13px 22px;min-width:min(305px,100%)}
 html body.musiriva-branded main.grid{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:5px 0 48px!important}
 html body.musiriva-branded main.grid>section.card,
 html body.musiriva-branded main.grid>aside.card{padding:17px!important;border-radius:20px!important}
 html body.musiriva-branded .eco-creator-purposes{gap:11px!important;font-size:12px!important}
 html body.musiriva-branded #songResultCard{position:static!important;top:auto!important}
 html body.musiriva-branded main.wrap #songs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 html body.musiriva-branded .musiriva-basic-grid{grid-template-columns:minmax(0,1fr)!important;gap:3px!important}
 html body.musiriva-branded .musiriva-hero-title{font-size:clamp(28px,8.1vw,39px)!important;letter-spacing:-.03em!important}
 html body.musiriva-branded .eco-creator-kicker{letter-spacing:.20em!important;font-size:10px!important}
 html body.musiriva-branded main.grid #lyrics{height:160px!important;min-height:140px!important}
 html body.musiriva-branded main.wrap #songs{grid-template-columns:minmax(0,1fr)}
 html body.musiriva-branded .eco-recent-head h2{font-size:18px!important}
 html body.musiriva-branded main.wrap .panel{padding:17px!important}
}
@media(prefers-reduced-motion:reduce){
 html body.musiriva-branded .musiriva-hero-cta{transition:none}
}


/* En celular, el acceso de WhatsApp se coloca POR ENCIMA de la navegación.
   Conserva la misma dirección y el mismo comportamiento de soporte. */
@media(max-width:860px){
 html body.musiriva-branded .eco-whatsapp-support{
  position:fixed!important;right:14px!important;
  bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
  width:48px!important;height:48px!important;z-index:560!important;
 }
 html body.musiriva-branded .eco-whatsapp-support svg{width:27px!important;height:27px!important}
}
/* Evitar que la ilustración decorativa interfiera con la frase del inicio. */
@media(min-width:861px){
 html body.musiriva-branded .eco-creator-hero::before{opacity:.60;background-position:center bottom}
}