/*
Theme Name: Ben Vaz Music
Theme URI: https://benvaz.es/
Author: OpenAI for Ben Vaz
Description: Tema musical oscuro, elegante y responsive para la web oficial de Ben Vaz. Diseñado para integrarse con el plugin Ben Vaz Music Ranking.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: ben-vaz
*/

:root {
  --bv-bg: #07070a;
  --bv-bg-soft: #101016;
  --bv-panel: rgba(255,255,255,.055);
  --bv-panel-strong: rgba(255,255,255,.085);
  --bv-text: #f7f7fb;
  --bv-muted: #a8a8b6;
  --bv-line: rgba(255,255,255,.12);
  --bv-accent: #9e6cff;
  --bv-accent-2: #55d6ff;
  --bv-hot: #ff4f9a;
  --bv-radius: 22px;
  --bv-shadow: 0 20px 60px rgba(0,0,0,.38);
  --bv-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 16% 10%, rgba(158,108,255,.16), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(85,214,255,.09), transparent 30%),
    var(--bv-bg);
  color: var(--bv-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--bv-accent-2); }
img { max-width: 100%; height: auto; display: block; }

.bv-container { width: min(var(--bv-max), calc(100% - 36px)); margin: 0 auto; }
.bv-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(7,7,10,.72);
  border-bottom: 1px solid var(--bv-line);
}
.bv-header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.bv-brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.bv-brand .custom-logo { max-height:48px; width:auto; }
.bv-brand-text { font-size:1.06rem; }
.bv-nav ul { list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.bv-nav a { color:var(--bv-muted); font-weight:650; font-size:.94rem; }
.bv-nav a:hover { color:#fff; }

.bv-hero {
  min-height: 76vh;
  display: grid;
  align-items: center;
  padding: 84px 0 54px;
  overflow: hidden;
}
.bv-hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:64px; align-items:center; }
.bv-kicker { color: var(--bv-accent-2); text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; font-weight:800; }
.bv-hero h1 { font-size: clamp(3.2rem, 9vw, 7.8rem); line-height:.88; margin:.15em 0 .18em; letter-spacing:-.055em; }
.bv-gradient-text {
  background: linear-gradient(110deg, #fff 10%, #c9b7ff 45%, #6ee7ff 75%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bv-lead { color:var(--bv-muted); font-size:clamp(1.05rem,2vw,1.35rem); max-width:680px; }
.bv-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.bv-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 20px; border-radius:999px;
  background:#fff; color:#09090d; font-weight:800; border:1px solid #fff;
  transition:.2s ease;
}
.bv-btn:hover { transform:translateY(-2px); color:#09090d; box-shadow:0 12px 34px rgba(255,255,255,.15); }
.bv-btn--ghost { background:transparent; color:#fff; border-color:var(--bv-line); }
.bv-btn--ghost:hover { color:#fff; border-color:rgba(255,255,255,.36); }

.bv-cover-card {
  position:relative;
  padding:18px;
  border-radius:32px;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--bv-shadow);
}
.bv-cover-card:before {
  content:""; position:absolute; inset:10% -12% -8% 12%; z-index:-1;
  background:radial-gradient(circle, rgba(158,108,255,.3), transparent 60%); filter:blur(24px);
}
.bv-cover-card img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:22px; }
.bv-cover-fallback { aspect-ratio:1; border-radius:22px; display:grid; place-items:center; font-size:clamp(2.8rem,8vw,6rem); font-weight:900; background:linear-gradient(135deg,#14141d,#28184e 48%,#0b5c70); }

.bv-section { padding:76px 0; }
.bv-section--tight { padding-top:28px; }
.bv-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.bv-section h2 { font-size:clamp(2rem,4vw,3.6rem); margin:0; letter-spacing:-.035em; }
.bv-section-sub { color:var(--bv-muted); max-width:640px; margin:.4rem 0 0; }

.bv-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.bv-card { background:var(--bv-panel); border:1px solid var(--bv-line); border-radius:var(--bv-radius); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.18); }
.bv-card-body { padding:20px; }
.bv-card h3 { margin:0 0 8px; font-size:1.22rem; }
.bv-meta { color:var(--bv-muted); font-size:.9rem; }
.bv-card img { aspect-ratio:1/1; object-fit:cover; width:100%; }

.bv-ranking-shell {
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border-radius:30px;
  padding:22px;
  box-shadow:var(--bv-shadow);
}

.bv-about { display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; }
.bv-about-copy p { color:var(--bv-muted); font-size:1.05rem; }
.bv-socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.bv-socials a { border:1px solid var(--bv-line); border-radius:999px; padding:10px 14px; color:var(--bv-muted); }
.bv-socials a:hover { color:#fff; border-color:rgba(255,255,255,.3); }

.bv-content { padding:64px 0 90px; }
.bv-content article { max-width:820px; margin:0 auto; }
.bv-content h1 { font-size:clamp(2.3rem,5vw,4.2rem); line-height:1.03; }
.bv-content p, .bv-content li { color:#d8d8df; }

.bv-site-footer { border-top:1px solid var(--bv-line); padding:30px 0 44px; color:var(--bv-muted); }
.bv-footer-inner { display:flex; justify-content:space-between; gap:18px; align-items:center; }

@media (max-width: 900px) {
  .bv-hero-grid, .bv-about { grid-template-columns:1fr; }
  .bv-hero { min-height:auto; }
  .bv-hero-visual { max-width:620px; }
  .bv-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bv-nav { display:none; }
}

@media (max-width: 620px) {
  .bv-container { width:min(var(--bv-max), calc(100% - 24px)); }
  .bv-header-inner { min-height:66px; }
  .bv-hero { padding-top:54px; }
  .bv-card-grid { grid-template-columns:1fr; }
  .bv-ranking-shell { padding:12px; border-radius:22px; }
  .bv-section { padding:56px 0; }
  .bv-footer-inner { align-items:flex-start; flex-direction:column; }
}


/* Portadas uniformes: todas ocupan exactamente el mismo espacio sin deformarse. */
.bv-cover-card { aspect-ratio:1 / 1; box-sizing:border-box; }
.bv-cover-card > img,
.bv-cover-card > .bv-cover-fallback { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; display:block; }
.bv-card-cover { width:100%; aspect-ratio:1 / 1; overflow:hidden; background:#15151e; }
.bv-card-cover img,
.bv-card-cover .bv-cover-fallback { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; display:block; border-radius:0; }
.bv-card-cover .bv-cover-fallback { place-items:center; }
.bv-song-public-stats { margin:14px 0 4px; }


/* v1.5: encuadre rígido de portadas. Evita bandas por proporciones distintas. */
.bv-card-cover {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #15151e;
}
.bv-card-cover > img,
.bv-card-cover > picture,
.bv-card-cover > picture > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
}
.bv-card-cover > .bv-cover-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

/* También uniforma la imagen principal y cualquier portada individual. */
.bv-cover-card {
  position: relative !important;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.bv-cover-card > img,
.bv-cover-card > picture,
.bv-cover-card > picture > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}


/* v1.6: portadas renderizadas como fondo de una caja rígida.
   Esto evita que atributos width/height/srcset del <img> de WordPress alteren el encuadre. */
.bv-card-cover {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #15151e !important;
}
.bv-card-cover > .bv-cover-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.bv-cover-card > .bv-cover-image {
  position: absolute !important;
  inset: 18px !important;
  display: block !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 22px !important;
}
@media (max-width: 620px) {
  .bv-card-cover { aspect-ratio: 1 / 1 !important; }
}