/* TEMA OFICIAL · AZUL NOCHE Y DORADO · MÚSICA CRISTIANA
   Diseño responsive únicamente: conserva la estructura y el JavaScript original.
   Edita estas variables si deseas cambiar los colores globales. */
:root {
  color-scheme:dark;
  --bg:#071426; --surface:#0d2038; --surface-2:#142b48;
  --ink:#f5f8ff; --muted:#b8c9dd; --line:#27435e;
  --accent:#f3c86a; --accent-2:#ffdc92; --deep:#09182d;
  --violet:#c79e4d; --turquoise:#f3c86a;
  --shadow:0 22px 55px rgba(0,7,22,.36);
  --shadow-soft:0 10px 26px rgba(0,7,22,.3);
  --gold:#f3c86a; --gold-strong:#ffdb89;
}
@media (prefers-color-scheme:dark) {
  :root {--bg:#071426;--surface:#0d2038;--surface-2:#142b48;--ink:#f5f8ff;
   --muted:#b8c9dd;--line:#27435e;--accent:#f3c86a;--accent-2:#ffdc92;
   --deep:#09182d;--violet:#c79e4d;--turquoise:#f3c86a;}
}
html { background:#071426; }
body {
  background:radial-gradient(ellipse 800px 450px at 92% 4%,rgba(53,105,159,.17),transparent 75%),
             radial-gradient(ellipse 620px 400px at -10% 28%,rgba(243,200,106,.07),transparent 75%),
             linear-gradient(180deg,#071426 0%,#07192e 42%,#071426 100%);
  color:var(--ink);
  min-width:280px;
}
.shell {width:min(1280px,100%);padding-left:28px;padding-right:28px;}
.nav-wrap {
  position:sticky;top:0;z-index:30;margin:0 -8px 0;
  padding:13px 20px 12px;border:1px solid rgba(255,220,146,.09);
  border-top:0;border-radius:0 0 19px 19px;
  background:rgba(5,17,35,.96);
  box-shadow:0 14px 37px rgba(1,8,20,.5);
  backdrop-filter:blur(16px) saturate(150%);
}
.nav-top {margin-bottom:11px;}
.nav-brand {font-size:.87rem;line-height:.9;letter-spacing:.07em;color:#fff;}
.nav-brand strong {color:var(--gold-strong);}
.nav-brand svg {fill:var(--gold);filter:drop-shadow(0 0 13px rgba(243,200,106,.26));}
.nav-tools a,.nav-tools button {color:#f4e9cd;}
.nav-tools a:hover,.nav-tools a:focus-visible,.nav-tools button:hover,.nav-tools button:focus-visible {
  color:var(--gold-strong);background:rgba(243,200,106,.10);outline-color:rgba(243,200,106,.34);
}
.nav {gap:6px 7px;justify-content:center;}
.nav a {font-size:.67rem;letter-spacing:.01em;color:#dce7f4;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:7px 9px;}
.nav a:hover,.nav a:focus-visible {color:var(--gold-strong);background:rgba(243,200,106,.10);box-shadow:none;}
.nav a[href="#inicio"] {color:var(--gold-strong);box-shadow:inset 0 -2px 0 var(--gold);}
.hero {
  display:flex;align-items:flex-end;position:relative;isolation:isolate;
  min-height:474px;margin-top:24px;padding:54px clamp(28px,4.6vw,66px);
  border:1px solid rgba(255,215,133,.26);border-radius:26px;
  overflow:hidden;
  background-image:
    linear-gradient(90deg,rgba(3,13,29,.92) 0%,rgba(3,13,29,.79) 31%,rgba(3,13,29,.41) 56%,rgba(3,13,29,.04) 100%),
    linear-gradient(0deg,rgba(3,13,29,.35),transparent 55%),
    url('banner-auriculares-dorado.webp');
  background-size:cover;background-position:center;
  box-shadow:0 25px 70px rgba(0,4,15,.43),0 0 36px rgba(243,200,106,.06);
}
.hero:before {
  content:"";display:block;position:absolute;inset:auto auto 0 0;
  width:48%;height:3px;background:linear-gradient(90deg,var(--gold),rgba(243,200,106,0));z-index:2;
}
.hero:after {display:none;}
.hero-content {max-width:600px;position:relative;z-index:2;}
.hero h1 {font-family:"Newsreader",Georgia,serif;font-size:clamp(3.5rem,6.1vw,5.8rem);line-height:.93;letter-spacing:-.045em;font-weight:700;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.28);}
.hero h1 em {color:var(--gold-strong);font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:600;font-size:1.07em;line-height:1;letter-spacing:-.035em;text-shadow:0 3px 24px rgba(243,200,106,.16);}
.hero p {max-width:470px;margin:19px 0 0;color:#e8eff9;font-size:1.04rem;line-height:1.65;text-shadow:0 2px 14px #061021;}
.hero-actions {gap:12px;margin-top:26px;}
.hero-cta {min-height:50px;border-radius:100px;box-shadow:none;}
.hero-cta.primary {background:linear-gradient(120deg,#ffe2a0,#edb950);border:1px solid #ffe7b4;color:#102037;box-shadow:0 9px 29px rgba(243,200,106,.29);}
.hero-cta.secondary {background:rgba(6,19,37,.65);border:1px solid rgba(255,220,146,.64);color:#fff;}
.hero-cta:hover,.hero-cta:focus-visible {box-shadow:0 12px 30px rgba(243,200,106,.21);outline-color:var(--gold);}
section {border-bottom-color:rgba(149,177,207,.16);}
section,.hero {scroll-margin-top:132px;}
.section-head {margin-bottom:23px;gap:18px;}
.section-head h2,.artist-title {position:relative;padding-left:17px;font-size:clamp(1.85rem,3.5vw,2.55rem);font-weight:700;color:#fff;}
.section-head h2:before,.artist-title:before {
  content:"";position:absolute;left:0;top:.12em;bottom:.09em;width:4px;
  border-radius:5px;background:linear-gradient(180deg,#ffe8a6,#cd9c38);
  box-shadow:0 0 15px rgba(243,200,106,.42);
}
.section-head p {color:#b8c9dd;line-height:1.55;}
.track,.new-card,.playlist-card,.media-card,.seo-artist,.contact-card,.chat-box,.song-list,.dialog,.search,.back,.show-all,.alpha button {
  background:linear-gradient(145deg,#112740,#0b1d35);border:1px solid rgba(166,190,214,.13);box-shadow:0 7px 25px rgba(0,5,17,.24);
}
.track {border-radius:15px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;background:linear-gradient(140deg,#112741,#0c1c30);}
.track:nth-child(3n+2),.track:nth-child(3n) {border-bottom-color:rgba(243,200,106,.18);}
.track:hover,.track:focus-visible,.new-card:hover,.new-card:focus-visible,.playlist-card:hover,.playlist-card:focus-visible,.media-card:hover,.media-card:focus-visible,.artist-row:hover,.artist-row:focus-visible {
  transform:translateY(-2px);background:linear-gradient(135deg,#183452,#102843);border-color:rgba(243,200,106,.54);box-shadow:0 14px 32px rgba(0,6,19,.38);
}
.track-title,.new-card strong,.playlist-card strong,.media-card b {color:#f8fbff;}
.track-artist,.new-card span,.playlist-card span,.media-card span {color:#b5c8df;}
.track-cover {border-radius:11px;}
.new-card,.playlist-card {border-radius:17px;overflow:hidden;}
.new-cover,.playlist-card img {background:#09182c;}
.new-card .year,.playlist-card em,.media-card em,.track-num {color:var(--gold);}
.play-dot,.control.primary {background:linear-gradient(140deg,#ffe49f,#c68d27);color:#101d2b;box-shadow:0 5px 16px rgba(243,200,106,.23);}
.play-dot:hover {filter:brightness(1.08);}
.artist-bubble img {border-color:#253f5c;box-shadow:0 8px 25px rgba(1,8,23,.34),0 0 0 1px rgba(243,200,106,.19);}
.artist-bubble:nth-child(3n+2) img,.artist-bubble:nth-child(3n) img {box-shadow:0 8px 25px rgba(1,8,23,.34),0 0 0 1px rgba(243,200,106,.22);}
.artist-bubble span {color:#f2f6ff;}
.artist-row {background:#10243c;color:#f2f7ff;border:1px solid rgba(243,200,106,.12);border-radius:12px;}
.artist-row svg {fill:var(--gold);}
.search,.contact-card input,.contact-card textarea {background:#0b1b31;color:#f5f8ff;border-color:rgba(165,190,219,.24);}
.search:focus,.contact-card input:focus,.contact-card textarea:focus {border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,200,106,.13);}
.search::placeholder,.contact-card input::placeholder,.contact-card textarea::placeholder {color:#92a8c3;}
.alpha button {color:#dee9f7;border-radius:10px;}
.alpha button.active {background:linear-gradient(120deg,#ffdd91,#c99434);border-color:transparent;color:#101d2b;}
.show-all,.back,.topics-toggle {color:var(--gold-strong);border-color:rgba(243,200,106,.29);border-radius:99px;}
.show-all:hover,.back:hover,.topics-toggle:hover {background:#1a3551;color:#ffe8aa;border-color:var(--gold);}
.chat-box {border-color:rgba(243,200,106,.24);}
.contact-actions button {background:linear-gradient(120deg,#f3c86a,#cd942e);color:#081526;}
.contact-actions .wa {background:#167c49;color:#fff;}
.player-bar {background:#0a1a2e;color:#fff;border-color:rgba(243,200,106,.2);}
.song-btn[aria-current="true"] {box-shadow:inset 4px 0 0 var(--gold);}
.video-tag {background:rgba(243,200,106,.14);color:var(--gold-strong);}
.registration-frame {filter:none;background:#fff;}
.modal {background:rgba(1,8,20,.91);}
/* Focus accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {outline:2px solid var(--gold)!important;outline-offset:3px;}
@media(max-width:1020px) {
 .shell{padding-left:20px;padding-right:20px;}
 .hero{min-height:450px;padding:42px 38px;}
 .hero h1{font-size:clamp(3rem,7vw,4.65rem);}
 .nav a{font-size:.63rem;padding:7px 6px;}
}
@media(max-width:760px) {
 .shell {padding:0 15px 60px;}
 .nav-wrap {margin:0 -15px;padding:11px 15px;border-radius:0 0 16px 16px;}
 .nav-top{margin-bottom:0;}
 .nav-brand{font-size:.72rem;}
 .nav-brand svg{fill:var(--gold);width:29px;height:29px;}
 .nav-wrap>.nav{display:none;}
 .mobile-menu-toggle {color:var(--gold-strong);}
 .mobile-menu {background:#061425;}
 .mobile-menu a:hover,.mobile-menu a:focus-visible {color:var(--gold-strong);}
 .hero {
  min-height:530px;margin-top:16px;padding:28px 24px 28px;
  border-radius:21px;align-items:flex-end;
  background-image:linear-gradient(0deg,rgba(3,12,26,.98) 0%,rgba(3,12,26,.94) 25%,rgba(3,12,26,.68) 49%,rgba(3,12,26,.08) 100%),url('banner-auriculares-dorado.webp');
  background-position:72% center;
 }
 .hero-content{max-width:100%;}
 .hero h1{font-size:clamp(2.5rem,10.8vw,3.8rem);line-height:.95;}
 .hero p{font-size:.95rem;line-height:1.55;max-width:340px;margin-top:13px;}
 .hero-actions{display:flex;gap:9px;margin-top:18px;max-width:350px;}
 .hero-cta{min-height:47px;width:100%;justify-content:center;}
 section{padding:29px 0;}
 .section-head{align-items:start;gap:7px;flex-direction:column;}
 .section-head h2,.artist-title{font-size:clamp(1.75rem,7vw,2.2rem);padding-left:14px;}
 .section-head p{text-align:left;max-width:100%;font-size:.87rem;}
 .track-grid{grid-template-columns:1fr;gap:10px;}
 .new-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .new-card {min-height:unset;}
 .top-artists {grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 10px;}
 .playlist-grid {grid-template-columns:1fr;}
 .media-grid {grid-template-columns:1fr;}
 .artist-list,.seo-artist-list {grid-template-columns:1fr;}
 .catalog-tools {grid-template-columns:1fr;gap:9px;}
 .catalog-count {text-align:left;}
 .artist-hero{align-items:flex-start;}
}
@media(max-width:390px) {
 .hero {padding:25px 19px;min-height:520px;}
 .hero h1{font-size:clamp(2.25rem,10vw,3.1rem);}
 .new-card strong {font-size:.91rem;}
}
@media(prefers-reduced-motion:reduce) {*,*:before,*:after {scroll-behavior:auto!important;transition:none!important;}}

/* Refinamiento fiel a la maqueta aprobada · sin modificar el catálogo ni el reproductor */
:root{color-scheme:dark;--bg:#051328;--surface:#0a2039;--surface-2:#12304e;--ink:#fffaf2;--muted:#b8c7dc;--line:#28425e;--accent:#f3c268;--accent-2:#ffda8a;--gold:#f3c268;--gold-strong:#ffdf99;}
html{background:#061528}
body{font-family:'DM Sans','Inter',sans-serif;background:radial-gradient(ellipse 45% 20% at 50% 0%,rgba(6,58,97,.46),transparent 90%),linear-gradient(180deg,#031326,#061a31 52%,#061326);color:#f7f8ff}
.shell{width:min(1510px,100%);padding:0 clamp(12px,2.4vw,42px) 80px;}
.nav-wrap{display:flex;align-items:center;gap:18px;position:sticky;z-index:30;top:0;padding:12px clamp(13px,2.2vw,35px);margin:0 calc(-1 * clamp(12px,2.4vw,42px));border:none;border-radius:0;background:rgba(2,15,34,.97);box-shadow:0 9px 35px rgba(0,0,0,.24);backdrop-filter:blur(18px)}
.nav-top{display:contents}
.nav-brand{order:0;flex:none;gap:10px;text-align:left;text-transform:none;text-decoration:none}
.nav-brand svg{width:37px;height:37px;flex:none;fill:#e8b65f;filter:drop-shadow(0 0 12px rgba(245,188,82,.28))}
.brand-wordmark{display:flex;flex-direction:column;gap:4px;white-space:nowrap;}
.brand-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.25rem,1.8vw,1.65rem);color:#ffd389;font-weight:700;letter-spacing:.01em;line-height:1}
.brand-wordmark small{font-family:'DM Sans',sans-serif;letter-spacing:.24em;font-size:.47rem;color:#bfcbe0;font-weight:700;line-height:1.3}
.nav{order:1;display:flex!important;flex:1 1 auto;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;display:inline-flex;align-items:center;padding:12px 7px 13px;border-radius:0;font-size:clamp(.58rem,.72vw,.7rem);line-height:1.1;font-weight:700;letter-spacing:.005em}
.nav a[href="#inicio"]{border-bottom:2px solid var(--gold);box-shadow:none;color:var(--gold)}
.nav-tools{order:2;flex:none;gap:6px}
.nav-tools a,.nav-tools button{width:36px;height:36px;}
.nav-tools svg{height:18px;width:18px}
/* Banner editorial: mismo arte aprobado, tipografías y ubicación de la maqueta */
.hero{min-height:440px;margin:0 calc(-1 * clamp(12px,2.4vw,42px));border:0;border-bottom:1px solid rgba(244,197,102,.2);border-radius:0;padding:35px clamp(32px,5vw,80px) 45px;box-shadow:none;overflow:hidden;align-items:center;isolation:isolate;background-image:linear-gradient(90deg,rgba(1,12,30,.85) 0%,rgba(1,13,31,.69) 25%,rgba(4,17,35,.18) 61%,rgba(3,12,26,.06) 100%),url('banner-auriculares-dorado.webp');background-position:center center;background-size:cover;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,15,34,.15),transparent 40%);width:auto;height:auto;pointer-events:none;z-index:0}
.hero::after{display:block;position:absolute;inset:0;background:radial-gradient(ellipse at 75% 90%,rgba(245,186,72,.10),transparent 42%);pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:min(680px,57%);padding:0;align-self:center}
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;color:#fffaf1;font-size:clamp(4rem,6.6vw,7rem);font-weight:600;line-height:.83;letter-spacing:-.042em;text-shadow:0 6px 25px rgba(0,0,0,.55);white-space:nowrap;margin:0}
.hero h1>span{display:block}
.hero h1 em{display:block;white-space:nowrap;font-family:'Allura','Lobster Two',cursive;font-size:1.23em;line-height:1.05;font-weight:400;letter-spacing:0;color:#f7bb57;text-shadow:0 2px 18px rgba(245,183,61,.14);margin-top:-.11em;padding-right:.2em}
.hero p{max-width:445px;font-family:'DM Sans',sans-serif;font-size:clamp(.95rem,1.3vw,1.12rem);line-height:1.5;font-weight:500;margin:3px 0 0;color:#edf1f5}
.hero-verse{position:absolute;left:min(630px,105%);top:8%;width:238px;display:flex;gap:10px;padding:15px 16px;border:1px solid rgba(255,216,142,.25);border-radius:13px;background:rgba(5,20,41,.75);box-shadow:0 12px 32px rgba(0,0,0,.24);backdrop-filter:blur(12px);font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;line-height:1.35;color:#ede9e2}
.verse-quote{font-family:Georgia,serif;line-height:1;font-size:2.2rem;color:#e8b65d}
.hero-verse strong{display:block;font-family:'DM Sans',sans-serif;color:#f2c469;font-size:.62rem;letter-spacing:.15em;margin-top:7px}
.hero-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;}
.hero-cta{font-family:'DM Sans',sans-serif;font-size:.94rem;min-height:48px;padding:12px 22px;border-radius:99px;font-weight:700;}
.hero-cta.primary{border-color:#ffd88d;background:linear-gradient(135deg,#ffe2a0,#edba59);box-shadow:0 8px 22px rgba(233,177,60,.27)}
.hero-cta.secondary{border-color:#f3bd5e;background:rgba(4,17,37,.72)}
/* Listado musical como tarjetas visuales similares a las de la maqueta */
#mainView > section{position:relative;padding:29px 0 21px;border-bottom:1px solid rgba(198,220,243,.10)}
.section-head{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:12px;flex-direction:column;}
.section-head h2,.artist-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1.1;font-weight:600;letter-spacing:-.025em;padding-left:24px;margin:0}
.section-head h2:before,.artist-title:before{width:5px;top:.16em;bottom:.13em;box-shadow:0 0 12px rgba(243,190,86,.5);}
.section-head p{font-family:'DM Sans',sans-serif;margin:-2px 0 0 24px;text-align:left;color:#bccbde;font-size:.84rem;line-height:1.5;max-width:700px}
.track-grid,.new-grid,.playlist-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.track,.new-card{min-width:0;display:flex;flex-direction:column;justify-content:start;position:relative;text-align:left;gap:0;padding:0 0 14px;border:1px solid #234363;background:linear-gradient(180deg,#07182c,#071427);border-radius:12px;overflow:hidden;box-shadow:0 8px 19px rgba(0,0,0,.17);}
.track:before,.new-card:before{content:"";position:absolute;z-index:0;inset:0 0 auto 0;width:100%;aspect-ratio:16/9;background:linear-gradient(180deg,rgba(8,19,38,0),rgba(4,14,30,.2)),url('portada-respaldo-1.webp') center/cover;}
.track:nth-child(6n + 2):before,.new-card:nth-child(6n + 2):before{background-image:url('portada-respaldo-2.webp')}
.track:nth-child(6n + 3):before,.new-card:nth-child(6n + 3):before{background-image:url('portada-respaldo-3.webp')}
.track:nth-child(6n + 4):before,.new-card:nth-child(6n + 4):before{background-image:url('portada-respaldo-4.webp')}
.track:nth-child(6n + 5):before,.new-card:nth-child(6n + 5):before{background-image:url('portada-respaldo-5.webp')}
.track:nth-child(6n + 6):before,.new-card:nth-child(6n + 6):before{background-image:url('portada-respaldo-6.webp')}
.track-cover,.new-cover{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0;border-radius:0;background:transparent;color:transparent;font-size:0;}
.track .track-num{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:auto;aspect-ratio:16/9;font-size:2.5rem;color:#f1c36e;background:transparent}
.track .track-copy{order:1;display:block;min-width:0;margin:9px 11px 0}
.track-title,.new-card strong{font-family:'DM Sans',sans-serif;font-size:.89rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f5f5f9;display:block;line-height:1.35}
.track-artist,.new-card span{font-size:.73rem;color:#b6c8dd;line-height:1.35;margin-top:3px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.track .play-dot{order:0;position:absolute;left:10px;top:auto;transform:translateY(calc(16.5vw * -.1));margin-top:calc(min((100vw - 150px)/6,200px) * .5625 - 36px);z-index:3;width:31px;height:31px;background:rgba(0,9,25,.84);color:#fff;border:1.7px solid #ffd37e;box-shadow:0 3px 12px rgba(0,0,0,.34);border-radius:50%}
.track .play-dot svg{width:12px;height:12px}
.new-card .year{position:absolute;z-index:3;top:8px;left:9px;display:inline-block;margin:0;padding:4px 9px;border-radius:99px;color:#1b1d25;background:linear-gradient(140deg,#ffe9b1,#e7b65c);font-size:.64rem;font-weight:800;box-shadow:0 3px 9px rgba(0,0,0,.2)}
.new-card strong{margin:10px 11px 0;display:block;}
.new-card span{margin:3px 11px 0;}
.new-card:after{content:'▶';position:absolute;z-index:3;top:calc(100% * .18);left:11px;border:2px solid #ffcf79;border-radius:50%;height:27px;width:27px;display:grid;place-items:center;font-size:11px;color:#fff;background:rgba(2,12,28,.83);}
.track:hover,.new-card:hover,.playlist-card:hover{border-color:#f2bd63;transform:translateY(-3px);box-shadow:0 15px 30px rgba(0,0,0,.33)}
.cover-unavailable{opacity:0!important}
.playlist-grid{margin-top:8px;}
.playlist-card{position:relative;min-height:155px;padding:14px 12px;border-radius:11px;overflow:hidden;border:1px solid #2d4c6b;display:flex;flex-direction:column;justify-content:end;align-items:stretch;text-align:left;background:#071e34;isolation:isolate;}
.playlist-card img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;margin:0;}
.playlist-card:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(0,9,24,.96) 0%,rgba(0,12,28,.7) 37%,transparent 85%)}
.playlist-card strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.38rem;font-weight:600;line-height:.97;margin:0;color:#fff;max-width:95%}
.playlist-card span{font-size:.66rem;line-height:1.2;color:#cad7e2;margin:5px 0 0}
.playlist-card em{font-family:'DM Sans',sans-serif;font-style:normal;margin:10px 0 0;font-size:.62rem;color:#ffd383;}
/* Put existing “Ver más” controls near the heading, keeping them fully operational */
#showAllPopularSongs,#showAllNewSongs,#showMorePlaylists{position:absolute;right:0;top:28px;margin:0;padding:8px 11px;border:0;border-radius:5px;background:transparent;box-shadow:none;font-size:.81rem;color:#ffd07a;text-decoration:underline;text-underline-offset:3px;}
#showAllPopularSongs:after,#showAllNewSongs:after,#showMorePlaylists:after{content:'  →';text-decoration:none}
/* Keep other categories accessible and attractive; do not suppress their original text or controls */
.artist-bubble img{border-color:#2a4866;}
.artist-list,.seo-artist-list{gap:10px}
.catalog-tools .search,.alpha button{border-color:#2d4c68}
/* mobile: closely mirrors the approved phone mockup without crowding content */
@media(max-width:900px){
 .nav-wrap{gap:7px}
 .nav{gap:0}
 .nav a{padding:11px 7px;font-size:.61rem}
 .brand-name{font-size:1.35rem}
 .hero{min-height:460px}
 .hero-content{max-width:70%}
 .hero h1{font-size:clamp(3.5rem,7vw,5.4rem)}
 .hero-verse{left:92%;top:6%;width:205px}
 .track-grid,.new-grid,.playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .shell{padding:0 13px 65px}
 .nav-wrap{margin:0 -13px;padding:12px 17px;position:sticky;border-radius:0;display:flex;justify-content:space-between;align-items:center}
 .nav-top{display:flex;align-items:center;justify-content:space-between;gap:4px;flex:1;margin:0}
 .nav-brand{flex:none;max-width:calc(100% - 100px);gap:8px}
 .nav-brand svg{height:32px;width:32px;}
 .brand-name{font-size:clamp(1.16rem,5.2vw,1.5rem)}
 .brand-wordmark small{font-size:.45rem;letter-spacing:.17em}
 .nav-tools{gap:4px}
 .nav-tools a{display:none}
 .nav-tools button{color:#fff;width:37px;height:37px}
 .nav-wrap>.nav{display:none!important}
 .mobile-menu-toggle{display:grid;color:#fff;width:37px;height:37px;font-size:1.65rem;border:0}
 .mobile-menu{background:#071529}
 .hero{height:auto;min-height:0;margin:0 -13px;padding:27px 22px 24px;align-items:flex-start;border:0;border-radius:0;background-image:linear-gradient(180deg,rgba(3,13,30,.70),rgba(3,13,30,.42) 44%,rgba(3,13,30,.87) 100%),url('banner-auriculares-dorado.webp');background-position:65% center;background-size:auto 100%;}
 .hero-content{max-width:100%;width:100%;padding:0}
 .hero h1{font-size:clamp(3.1rem,12.4vw,4.2rem);line-height:.9;max-width:100%;letter-spacing:-.04em}
 .hero h1 em{font-size:1.17em;line-height:1.03;letter-spacing:0;margin-top:-.06em;}
 .hero p{font-size:.94rem;line-height:1.5;max-width:94%;margin-top:0;color:#f4f4f4;text-shadow:0 2px 14px #010e20}
 .hero-verse{position:relative;left:auto;top:auto;width:min(310px,100%);margin:14px 0 0;padding:12px 13px;background:rgba(1,13,30,.72);font-size:1rem;backdrop-filter:blur(11px)}
 .hero-actions{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:100%}
 .hero-cta{width:auto;min-width:0;min-height:46px;padding:10px 9px;gap:6px;font-size:.78rem;white-space:nowrap}
 .hero-cta svg{width:16px;height:16px}
 #mainView > section{padding:26px 0 18px}
 .section-head{margin-bottom:13px;padding-right:0;gap:2px}
 .section-head h2,.artist-title{font-size:clamp(1.9rem,7.5vw,2.35rem);padding-left:17px;line-height:1}
 .section-head p{font-size:.74rem;margin:4px 0 0 17px;max-width:calc(100% - 17px)}
 .track-grid,.new-grid,.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .track,.new-card{border-radius:10px;padding-bottom:10px}
 .track-title,.new-card strong{font-size:.79rem}
 .track-artist,.new-card span{font-size:.69rem}
 .track .track-copy{margin:8px 8px 0}
 .new-card strong{margin:9px 8px 0}
 .new-card span{margin:3px 8px 0}
 .track .play-dot{margin-top:calc((100vw - 35px)/2 * .5625 - 35px);left:9px;width:29px;height:29px;transform:none}
 .new-card .year{top:7px;left:7px;font-size:.57rem;padding:4px 7px}
 .new-card:after{top:calc((100vw - 35px)/2 * .5625 - 35px);left:8px;height:24px;width:24px;font-size:10px}
 .playlist-card{min-height:143px}
 .playlist-card strong{font-size:1.29rem}
 #showAllPopularSongs,#showAllNewSongs,#showMorePlaylists{font-size:.68rem;top:23px;right:0;max-width:94px;white-space:nowrap}
 #adoracion .section-head h2,#playlists .section-head h2{max-width:calc(100% - 65px)}
 .top-artists{grid-template-columns:repeat(3,minmax(0,1fr))}
 .catalog-tools{grid-template-columns:1fr}
 .artist-list,.seo-artist-list{grid-template-columns:1fr}
 .media-grid{grid-template-columns:1fr}
}
@media(max-width:350px){
 .hero{height:auto;min-height:0;padding:25px 16px}
 .hero h1{font-size:2.9rem}
 .hero-cta{font-size:.71rem}
 .brand-name{font-size:1.06rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Ajustes finales de fidelidad y navegación */
@media(min-width:761px){.nav{justify-content:flex-start;scroll-behavior:smooth;}.hero-verse{top:-3%;}}
@media(max-width:760px){.hero-content{align-self:flex-start;}.hero{background-position:70% center;}}

/* Corrección final móvil: altura ajustada al contenido, sin hueco bajo los botones. */


/* Fix 2026-10-13: tarjetas compactas sin espacio vacío */
.new-card{min-height:0 !important;height:auto !important;}
.new-card .year{display:none !important;}

/* Fix 2026-10-13: botones "Ver más" debajo de las tarjetas, no arriba */
#showAllPopularSongs,#showAllNewSongs,#showMorePlaylists{position:static !important;display:block;margin:18px auto 0 !important;text-align:center;}
#showAllPopularSongs:after,#showAllNewSongs:after,#showMorePlaylists:after{content:'  →';text-decoration:none}

/* Fix 2026-10-13: modal del reproductor compacto en escritorio */
@media (min-width: 768px) {
  #videoModal .dialog { max-height: 92vh; display: flex; flex-direction: column; }
  #videoModal .dialog-body, #videoModal .player-wrap { flex-shrink: 1; min-height: 0; }
  #videoModal iframe, #videoModal video { max-height: 52vh !important; }
  #modalTopicsToggle { flex-shrink: 0; }
}

/* Chat y radio: layout simple, chat arriba y radio abajo */


/* Layout chat + radio: lado a lado en escritorio, apilado en móvil */
.chat-radio-wrap { display: flex; gap: 24px; align-items: flex-start; justify-content: flex-start; }
.chat-radio-wrap .chat-col { flex: 1 1 650px; min-width: 0; }
.chat-radio-wrap .radio-col { flex: 0 1 520px; min-width: 320px; }
.chat-radio-wrap .radio-col .nr-radio { width: 100%; }
@media (max-width: 900px) {
  .chat-radio-wrap { flex-wrap: wrap; }
  .chat-radio-wrap .chat-col,
  .chat-radio-wrap .radio-col { flex: 1 1 100%; min-width: 0; max-width: 100%; }
}