/* VAMUSICTOP WORDPRESS V37 — shared visual system for every internal page */
:root{
  --vmt-blue:#1e90ff;
  --vmt-ink:#11151a;
  --vmt-black:#080a0d;
  --vmt-muted:#6c7681;
  --vmt-line:#e3e8ed;
  --vmt-soft:#f7f9fb;
  --vmt-shadow:0 14px 34px rgba(14,27,39,.08);
}
html{scroll-behavior:smooth}
body{
  background:#fff!important;
  color:var(--vmt-ink)!important;
  font-family:Inter,Arial,sans-serif!important;
  overflow-x:hidden;
}
body:before{display:none!important}
.skip-link{background:var(--vmt-blue)!important;color:#fff!important}
.topbar{
  height:32px!important;
  background:var(--vmt-black)!important;
  border-bottom:1px solid #171b21!important;
  color:#9fa8b2!important;
}
.topbar .container{width:min(1240px,calc(100% - 42px))!important}
.social a:hover{color:#fff!important}
header{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  background:#07090c!important;
  border-bottom:1px solid #1b2026!important;
  box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(12px);
}
.header-main{height:82px!important;gap:24px!important;width:min(1240px,calc(100% - 42px))!important}
.brand{min-width:265px!important;gap:10px!important}
.logo{width:54px!important;height:54px!important;border:2px solid var(--vmt-blue)!important;box-shadow:0 0 0 4px rgba(30,144,255,.08)!important}
.brand-name{font-size:25px!important;color:#fff!important;letter-spacing:.2px!important}
.brand-name span{color:#68b9ff!important}
nav{gap:19px!important;font-size:11px!important}
nav a{
  color:#d9dee5!important;
  position:relative!important;
  padding:31px 0!important;
  transition:color .2s ease!important;
}
nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--vmt-blue);
  transition:right .22s ease;
}
nav a:hover,nav a.active{color:#fff!important}
nav a:hover:after,nav a.active:after{right:0}
.header-actions{gap:8px!important}
.icon-btn{background:#101318!important;border:1px solid #2d353f!important;color:#fff!important;border-radius:8px!important}
.icon-btn:hover{border-color:var(--vmt-blue)!important;color:var(--vmt-blue)!important}
.menu-btn{color:#fff!important;border-color:#2d353f!important}
.marquee{
  height:38px!important;
  background:#fff!important;
  color:#4c5660!important;
  border-bottom:1px solid var(--vmt-line)!important;
  overflow:hidden!important;
}
.marquee-track{display:flex;gap:38px;white-space:nowrap;animation:vmt-marq 28s linear infinite}
@keyframes vmt-marq{to{transform:translateX(-45%)}}
main#main-content{background:#fff!important}
#main-content > .section{
  padding:34px 0 58px!important;
  border-top:0!important;
  background:#fff!important;
}
#main-content > .section > .container,
main > .container{
  width:min(1240px,calc(100% - 42px))!important;
  margin:auto!important;
}
.section-head{
  display:flex!important;align-items:end!important;justify-content:space-between!important;
  gap:18px!important;margin:0 0 20px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid #d7dde3!important;
  position:relative!important;
}
.section-head:after{
  content:"";position:absolute;left:0;bottom:-1px;width:74px;height:3px;background:var(--vmt-blue);
}
.eyebrow{
  color:var(--vmt-blue)!important;
  font-size:11px!important;font-weight:900!important;letter-spacing:1.3px!important;
}
.eyebrow:before{background:var(--vmt-blue)!important;width:24px!important;height:3px!important}
.view{color:var(--vmt-blue)!important;font-size:10px!important;font-weight:900!important}

/* Cards / grids */
.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
.card{
  background:#fff!important;border:1px solid #e3e8ed!important;border-radius:14px!important;
  overflow:hidden!important;box-shadow:var(--vmt-shadow)!important;
  padding:0 0 18px!important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;
}
.card:hover{transform:translateY(-6px)!important;box-shadow:0 22px 46px rgba(14,27,39,.12)!important;border-color:#c8dff5!important}
.card-img{height:235px!important;border-radius:0!important;background:#edf1f4!important;overflow:hidden!important}
.card h3{font-family:"Barlow Condensed",sans-serif!important;color:var(--vmt-ink)!important;font-size:28px!important;line-height:1.04!important;letter-spacing:-.012em!important;margin:12px 18px 7px!important}
.card p{color:var(--vmt-muted)!important;font-size:11px!important;line-height:1.6!important;margin:0 18px!important}
.card .meta{color:#85909b!important;margin:10px 18px 0!important;font-size:9px!important}
.card .tag{margin:12px 18px 0!important;background:var(--vmt-blue)!important;color:#fff!important;border-radius:999px!important;padding:6px 9px!important}
.actions{margin:12px 18px 0!important}
.mini-btn{background:#f5f7f9!important;color:#202830!important;border:1px solid #dce2e8!important;border-radius:999px!important}
.mini-btn:hover{background:var(--vmt-blue)!important;color:#fff!important;border-color:var(--vmt-blue)!important}

.music-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important}
.release{
  background:#fff!important;border:1px solid #e1e6eb!important;border-radius:14px!important;
  box-shadow:var(--vmt-shadow)!important;overflow:hidden!important;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important;
}
.release:hover{transform:translateY(-6px)!important;box-shadow:0 22px 46px rgba(14,27,39,.12)!important;border-color:#c8dff5!important}
.release img{display:block!important;width:100%!important;aspect-ratio:1!important;object-fit:cover!important}
.release-info{padding:14px!important}
.release h3{font-family:"Barlow Condensed",sans-serif!important;color:var(--vmt-ink)!important;font-size:24px!important;line-height:1.05!important;margin:0 0 5px!important}
.release p{color:var(--vmt-muted)!important;font-size:10px!important;line-height:1.5!important;margin:0!important}

.video-grid{grid-template-columns:2fr 1fr 1fr!important;gap:18px!important}
.video{height:245px!important;border-radius:14px!important;overflow:hidden!important;box-shadow:var(--vmt-shadow)!important;border:1px solid #e1e6eb!important;background:#101318!important;transition:transform .3s ease,box-shadow .3s ease!important}
.video.big{height:330px!important}
.video:hover{transform:translateY(-6px)!important;box-shadow:0 24px 50px rgba(14,27,39,.14)!important}
.video:before{background:var(--vmt-blue)!important;box-shadow:0 9px 20px rgba(30,144,255,.24)!important}
.video:after{background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 66%)!important}
.video-title{font-size:22px!important;line-height:1.02!important;letter-spacing:.02em!important}

.trends{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.trend{
  background:#f7f9fb!important;color:var(--vmt-ink)!important;border:1px solid #e0e6eb!important;
  border-radius:14px!important;box-shadow:0 8px 24px rgba(14,27,39,.05)!important;padding:18px!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important;
}
.trend:hover{transform:translateY(-5px)!important;box-shadow:0 18px 36px rgba(14,27,39,.10)!important;border-color:#c8dff5!important}
.trend strong{color:var(--vmt-blue)!important;font-size:10px!important}
.trend span{font-family:"Barlow Condensed",sans-serif!important;color:var(--vmt-ink)!important;font-size:21px!important;line-height:1.05!important}

.widget{
  background:#fff!important;color:var(--vmt-ink)!important;border:1px solid #e1e6eb!important;border-radius:14px!important;
  box-shadow:var(--vmt-shadow)!important;padding:18px!important;
}
.widget h3{font-family:"Barlow Condensed",sans-serif!important;color:var(--vmt-ink)!important;border-bottom:1px solid #dfe4e9!important;font-size:24px!important;padding-bottom:9px!important;margin-bottom:12px!important}
.top-list li{border-bottom-color:#e8edf1!important;padding:11px 0!important}
.rank{color:var(--vmt-blue)!important}.song{color:#161d24!important}.artist{color:#7a8590!important}
.play{background:#f6f8fa!important;color:#101418!important;border-color:#dce2e8!important}.play:hover{background:var(--vmt-blue)!important;color:#fff!important;border-color:var(--vmt-blue)!important}
.playlist{background:#080b0f!important;border-radius:12px!important;padding:20px!important}
.disc{border-color:var(--vmt-blue)!important}

/* Search / forms */
.contact-section{grid-template-columns:1fr 1.15fr!important;gap:44px!important;align-items:start!important}
.contact-copy h2{font-family:"Barlow Condensed",sans-serif!important;font-size:46px!important;line-height:1.0!important;color:#fff!important;margin:0 0 14px!important}
.contact-copy p{font-size:12px!important;line-height:1.75!important;color:#adb7c2!important}
.contact-copy{background:#080b0f!important;border-radius:16px!important;padding:34px!important;min-height:100%!important;position:relative!important;overflow:hidden!important}
.contact-copy:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--vmt-blue)}
.contact-form{background:#fff!important;border:1px solid #e1e6eb!important;border-radius:16px!important;padding:26px!important;box-shadow:var(--vmt-shadow)!important}
.contact-form label{color:#5c6874!important}
.contact-form input,.contact-form textarea,.newsletter input,.modal input,.modal select{background:#fff!important;color:#101418!important;border-color:#d7dee5!important;border-radius:8px!important}
.primary{background:var(--vmt-blue)!important;border-radius:8px!important;box-shadow:none!important}
.primary:hover{background:#0d7fdf!important}

/* Generic article detail */
#main-content article{
  background:#fff!important;border:1px solid #e1e6eb!important;border-radius:16px!important;box-shadow:var(--vmt-shadow)!important;
  padding:26px!important;overflow:hidden!important;
}
#main-content article h1{font-family:"Barlow Condensed",sans-serif!important;font-size:44px!important;line-height:1.05!important;color:var(--vmt-ink)!important}
#main-content article p{color:var(--vmt-muted)!important;line-height:1.75!important;font-size:12px!important}
#main-content article img{border-radius:12px!important;max-height:520px!important;object-fit:cover!important;width:100%!important}

/* Buttons, search panels, toast and footer */
.search-panel{background:#fff!important;border-bottom:1px solid #dfe5ea!important;box-shadow:0 12px 22px rgba(14,27,39,.08)!important}
.search-panel input{background:#fff!important;color:#101418!important;border-color:#d7dee5!important}
.search-results{color:#6d7680!important}
.modal{background:#fff!important;color:var(--vmt-ink)!important;border-color:#dce2e8!important}
.modal h2{color:var(--vmt-ink)!important}.modal p{color:#65707c!important}.close{color:#68737e!important}
.toast{background:#fff!important;color:#17202a!important;border-color:#dce2e8!important;border-left:3px solid var(--vmt-blue)!important;box-shadow:0 12px 30px rgba(14,27,39,.10)!important}
#backTop{border-color:#d9e0e6!important;background:#fff!important;color:#111!important}
footer{background:#080a0d!important;border-top:3px solid var(--vmt-blue)!important}

/* Page-specific refinement */
body[data-vmt-page="noticias"] .layout,
body[data-vmt-page="entrevistas"] .layout{padding-top:8px!important}
body[data-vmt-page="noticias"] .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body[data-vmt-page="musica"] .section,
body[data-vmt-page="videos"] .section,
body[data-vmt-page="fotos"] .section,
body[data-vmt-page="entrevistas"] .section,
body[data-vmt-page="tendencias"] .section{min-height:460px}
body[data-vmt-page="videos"] .video-grid{align-items:stretch}
body[data-vmt-page="fotos"] .music-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body[data-vmt-page="tendencias"] .trends .trend{min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
body[data-vmt-page="buscar"] form{background:#fff!important;border:1px solid #e1e6eb!important;border-radius:14px!important;padding:18px!important;box-shadow:var(--vmt-shadow)!important}
body[data-vmt-page="buscar"] input{background:#fff!important;color:#101418!important;border-color:#d7dee5!important;border-radius:8px!important}
body[data-vmt-page="cuenta"] #main-content .widget{max-width:720px!important;margin:0 auto!important;padding:28px!important}
body[data-vmt-page="cuenta"] .widget h3{font-size:34px!important}
body[data-vmt-page="estreno"] article{max-width:1050px!important;margin:0 auto!important;display:grid!important;grid-template-columns:420px 1fr!important;gap:28px!important;align-items:center!important}
body[data-vmt-page="estreno"] article img{height:420px!important}
body[data-vmt-page="video"] #main-content .container > div:not(.section-head){background:#0a0c10!important;border-radius:16px!important;min-height:520px!important;padding:24px!important;color:#fff!important;display:grid!important;place-items:center!important;box-shadow:var(--vmt-shadow)!important}
body[data-vmt-page="video"] h1{font-family:"Barlow Condensed",sans-serif!important;color:#fff!important}
body[data-vmt-page="galeria"] .release{position:relative}

@media(max-width:980px){
  .header-main{width:min(1240px,calc(100% - 28px))!important}
  nav{display:none!important}
  .header-actions{margin-left:auto!important}
  #main-content > .section > .container,
  main > .container{width:min(1240px,calc(100% - 28px))!important}
  .music-grid,.trends{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .video-grid{grid-template-columns:1.4fr 1fr!important}
  .video.big{grid-row:span 2;height:360px!important}
  .contact-section{grid-template-columns:1fr!important}
  body[data-vmt-page="estreno"] article{grid-template-columns:300px 1fr!important}
}
@media(max-width:640px){
  .topbar{height:30px!important;font-size:9px!important}
  .topbar .social{display:none!important}
  .header-main{height:68px!important}
  .brand{min-width:0!important}
  .brand-name{font-size:20px!important}
  .logo{width:46px!important;height:46px!important}
  .marquee{height:34px!important}
  #main-content > .section{padding:24px 0 42px!important}
  .section-head{margin-bottom:16px!important}
  .section-head .view{font-size:9px!important}
  .news-grid,.music-grid,.trends,.video-grid{grid-template-columns:1fr!important}
  .video.big,.video{height:250px!important;grid-row:auto!important}
  .card-img{height:220px!important}
  .card h3{font-size:25px!important;margin-left:15px!important;margin-right:15px!important}
  .card p,.card .meta{margin-left:15px!important;margin-right:15px!important}
  .card .tag,.actions{margin-left:15px!important}
  .contact-copy h2{font-size:38px!important}
  .contact-copy,.contact-form,#main-content article{padding:20px!important}
  body[data-vmt-page="estreno"] article{display:block!important}
  body[data-vmt-page="estreno"] article img{height:auto!important;margin-bottom:18px!important}
}