:root{
  --gold:#f8d35a;
  --gold-2:#b99028;
  --red:#eb1d36;
  --violet:#7c3aed;
  --cyan:#29d3ff;
  --bg:#050307;
  --panel:#0d0711;
  --panel-2:#130a1c;
  --text:#fff8e7;
  --soft:#d7caad;
  --muted:#a99c81;
  --line:rgba(248,211,90,.18);
  --shadow:0 28px 90px rgba(0,0,0,.58);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;display:block}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 12% 10%, rgba(235,29,54,.26), transparent 34%),
    radial-gradient(circle at 82% 14%, rgba(124,58,237,.24), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(248,211,90,.13), transparent 38%),
    linear-gradient(180deg,#050307,#09050d 52%,#050307);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;opacity:.15;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:62px 62px;
}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.nav{position:sticky;top:0;z-index:1000;background:rgba(5,3,7,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:950}
.brand img{width:46px;height:46px;border-radius:14px;object-fit:cover;box-shadow:0 0 24px rgba(248,211,90,.18)}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:20px}
.menu a{font-weight:800;color:var(--soft);font-size:14px;transition:.22s}
.menu a:hover,.menu a.active{color:#fff;transform:translateY(-1px)}
.cta,.btn.primary{background:linear-gradient(135deg,var(--gold),#ffad33);color:#180e05!important;border:0}
.menu .cta{padding:10px 15px;border-radius:999px}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:#fff;border-radius:12px;padding:8px 10px}
.hero{position:relative;min-height:760px;display:grid;align-items:center;overflow:hidden}
.hero-video-bg{position:absolute;inset:0;z-index:-1}
.hero-video-bg video{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,3,7,.94),rgba(5,3,7,.72) 46%,rgba(5,3,7,.35)),linear-gradient(0deg,rgba(5,3,7,.85),transparent 48%,rgba(5,3,7,.52))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center;padding:78px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:950}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red);border-radius:4px}
h1,h2,h3,p{margin-top:0}
.hero h1,.page-hero h1{font-size:clamp(46px,7vw,92px);line-height:.91;letter-spacing:-.075em;font-weight:950;margin:20px 0;background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;color:transparent}
.hero p,.page-hero p,.section-heading p{font-size:18px;line-height:1.75;color:var(--soft)}
.hero-copy p{max-width:740px}
.social-row{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}
.social-row a{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:10px 14px;font-weight:850;font-size:13px;transition:.22s}
.social-row a:hover{background:rgba(248,211,90,.16);border-color:rgba(248,211,90,.46);transform:translateY(-2px)}
.hero-actions,.center{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.center{justify-content:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:13px 20px;font-weight:950;color:#fff;transition:.24s;background:rgba(255,255,255,.06)}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(248,211,90,.15)}
.release-card{background:rgba(13,7,17,.82);border:1px solid var(--line);border-radius:30px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(18px);animation:floatCard 5.5s ease-in-out infinite}
.release-card img{width:100%;height:245px;object-fit:cover;border-radius:22px;margin:14px 0;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.release-card h2{font-size:30px;line-height:1.02;color:#fff;font-weight:950}
.release-card p{color:var(--soft);line-height:1.6}
.release-card a,.video-card a,.music-card a{color:var(--gold);font-weight:900}
.live-dot{width:10px;height:10px;display:inline-block;border-radius:50%;background:#35ff9c;box-shadow:0 0 16px #35ff9c}
.section{padding:88px 0}
.section-dark{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border-block:1px solid rgba(248,211,90,.08)}
.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.section-heading{margin-bottom:34px}
.section-heading.centered{text-align:center;max-width:860px;margin:0 auto 42px}
.section-heading h2,.cta-content h2{font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.055em;font-weight:950;color:#fff}
.section-heading.split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:end}
.spotify-embed{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:26px;padding:14px;box-shadow:var(--shadow)}
.spotify-embed.wide{max-width:920px;margin:auto}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.video-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.video-card,.music-card,.contact-card,.video-mini{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.28);transition:.28s}
.video-card:hover,.music-card:hover,.contact-card:hover,.video-mini:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.card-body,.music-card div,.video-mini div,.contact-card{padding:20px}
.card-body span,.music-card span{color:var(--gold);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:950}
.card-body h3,.music-card h3,.video-mini h3,.contact-card h2{font-size:24px;font-weight:950;margin:8px 0;color:#fff}
.card-body p,.music-card p,.contact-card p{color:var(--soft);line-height:1.6}
.video-mini img{width:100%;height:170px;object-fit:cover}
.video-mini a{color:var(--gold);font-weight:900}
.music-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.music-card img{width:100%;height:180px;object-fit:cover}
.gallery-strip,.gallery{display:grid;gap:18px}
.gallery-strip{grid-template-columns:repeat(5,1fr)}
.gallery-strip img,.gallery img{height:240px;width:100%;object-fit:cover;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.32);transition:.28s}
.gallery-strip img:hover,.gallery img:hover{transform:translateY(-6px) scale(1.02)}
.gallery{grid-template-columns:repeat(4,1fr)}
.cta-band{padding:64px 0;background:linear-gradient(135deg,rgba(235,29,54,.32),rgba(248,211,90,.14));border-block:1px solid var(--line)}
.cta-content{display:flex;justify-content:space-between;align-items:center;gap:34px}
.cta-content p{color:var(--soft);max-width:700px;line-height:1.7}
.page-hero{padding:110px 0 70px;background:linear-gradient(135deg,rgba(235,29,54,.22),rgba(124,58,237,.18));border-bottom:1px solid var(--line)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted)}
.footer .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .72s ease,transform .72s ease}
.reveal.in-view{opacity:1;transform:none}
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Chatbot premium */
.iv-chat{position:fixed;right:20px;bottom:20px;z-index:1600}
.iv-chat-toggle{border:0;border-radius:999px;padding:13px 16px;background:linear-gradient(135deg,var(--gold),#ff9d21);color:#150900;font-weight:950;box-shadow:0 20px 60px rgba(248,211,90,.25);cursor:pointer;display:flex;align-items:center;gap:10px}
.iv-chat-toggle span{width:34px;height:34px;border-radius:50%;background:#150900;color:var(--gold);display:grid;place-items:center}
.iv-chat-panel{display:none;position:absolute;right:0;bottom:62px;width:min(430px,calc(100vw - 24px));background:rgba(9,5,13,.98);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(18px)}
.iv-chat.open .iv-chat-panel{display:block;animation:chatIn .22s ease}
@keyframes chatIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.iv-chat-head{padding:18px;background:linear-gradient(135deg,rgba(235,29,54,.24),rgba(248,211,90,.12));display:flex;justify-content:space-between;gap:16px}
.iv-chat-head strong{display:block;color:#fff;font-size:18px}
.iv-chat-head small{color:var(--soft)}
.iv-chat-close{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:50%;width:34px;height:34px;cursor:pointer}
.iv-chat-body{padding:14px;max-height:520px;overflow:auto}
.iv-msg{padding:12px 14px;border-radius:16px;margin-bottom:10px;line-height:1.55}
.iv-msg.bot{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.iv-msg.user{background:rgba(248,211,90,.13);border:1px solid rgba(248,211,90,.22);margin-left:24px}
.iv-quick{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.iv-quick button{border:1px solid rgba(248,211,90,.22);background:rgba(248,211,90,.1);color:#fff;border-radius:999px;padding:9px 12px;font-weight:850;cursor:pointer}
.iv-quick button:hover{background:rgba(248,211,90,.18)}
.iv-chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.iv-chat-form input{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:14px;color:#fff;padding:12px 13px;outline:0}
.iv-chat-form button{border:0;border-radius:14px;padding:12px 14px;background:var(--gold);font-weight:950;color:#160a02}
.iv-chat-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.iv-chat-actions a{font-size:12px;color:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 10px}
@media(max-width:980px){.hero-grid,.two-col,.section-heading.split,.cta-content,.contact-layout{grid-template-columns:1fr;display:grid}.video-grid,.video-grid.compact,.music-grid,.gallery{grid-template-columns:1fr 1fr}.gallery-strip{grid-template-columns:repeat(2,1fr)}.menu{display:none}.nav.open .menu{position:absolute;left:20px;right:20px;top:78px;display:grid;background:#0b0610;border:1px solid var(--line);border-radius:20px;padding:18px}.nav-toggle{display:block}}
@media(max-width:640px){.container{width:min(100% - 24px,1180px)}.hero{min-height:auto}.hero h1,.page-hero h1{font-size:42px}.section{padding:62px 0}.video-grid,.video-grid.compact,.music-grid,.gallery,.gallery-strip{grid-template-columns:1fr}.gallery-strip img,.gallery img{height:260px}.iv-chat-toggle strong{display:none}.release-card img{height:220px}.social-row a{font-size:12px;padding:9px 11px}}


/* =========================================================
   IVANGS V3 — VIDEO CARDS SIN IFRAME + CHATBOT LINKS
   ========================================================= */

.video-card-safe .video-thumb-link {
  position: relative;
  display: block;
  min-height: 325px;
  overflow: hidden;
  background: #161616;
}

.video-card-safe .video-thumb-link img {
  width: 100%;
  height: 325px;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.06) brightness(.82);
  transition: transform .35s ease, filter .35s ease;
}

.video-card-safe .video-thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(248,211,90,.18), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.52));
  pointer-events: none;
}

.video-card-safe .play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #ffb92d);
  color: #120707;
  font-size: 30px;
  box-shadow:
    0 22px 60px rgba(0,0,0,.42),
    0 0 0 12px rgba(248,211,90,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.video-card-safe:hover .video-thumb-link img {
  transform: scale(1.06);
  filter: saturate(1.14) contrast(1.08) brightness(.92);
}

.video-card-safe:hover .play-badge {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 28px 70px rgba(0,0,0,.48),
    0 0 0 16px rgba(248,211,90,.16);
}

.iv-msg.bot a {
  color: var(--gold);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iv-msg.bot a:hover {
  color: #fff0a8;
}

.spotify-section + .section-dark .section-heading p {
  max-width: 760px;
  margin: 10px auto 0;
  color: var(--soft);
}

@media (max-width: 680px) {
  .video-card-safe .video-thumb-link,
  .video-card-safe .video-thumb-link img {
    min-height: 235px;
    height: 235px;
  }

  .video-card-safe .play-badge {
    width: 58px;
    height: 58px;
    font-size: 23px;
  }
}


/* =========================================================
   IVANGS FINAL — CONTADOR + VIDEO HOME
   ========================================================= */

.visit-counter-section {
  position: relative;
  z-index: 3;
  padding: 30px 0 12px;
  background:
    radial-gradient(circle at 20% 30%, rgba(248,211,90,.12), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,3,7,.98), rgba(13,7,17,.96));
}

.visit-counter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 30px;
  border: 1px solid rgba(248,211,90,.20);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(248,211,90,.12), rgba(124,58,237,.10)),
    rgba(255,255,255,.04);
  box-shadow:
    0 24px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.counter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.counter-label::before {
  content: "";
  width: 32px;
  height: 2px;
  border-radius: 4px;
  background: var(--gold);
}

.visit-counter-card h2 {
  margin: 8px 0 4px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -.06em;
  color: var(--text);
}

.visit-counter-card p {
  margin: 0;
  color: var(--soft);
  font-weight: 700;
}

.counter-orbit {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(248,211,90,.25), rgba(248,211,90,.04) 58%, transparent 60%);
}

.counter-orbit span {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(248,211,90,.40);
  border-left-color: transparent;
  border-bottom-color: transparent;
  animation: counterSpin 4.5s linear infinite;
}

.counter-orbit b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #ffb92d);
  color: #120707;
  font-size: 26px;
  box-shadow: 0 16px 42px rgba(248,211,90,.24);
}

@keyframes counterSpin {
  to { transform: rotate(360deg); }
}

.hero,
.hero-home,
.hero-section,
header {
  position: relative;
  overflow: hidden;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050307;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .45;
  filter: saturate(1.15) contrast(1.08) brightness(.78);
}

.hero-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(248,211,90,.16), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(124,58,237,.20), transparent 36%),
    linear-gradient(90deg, rgba(5,3,7,.96), rgba(5,3,7,.66), rgba(5,3,7,.94));
}

header > .container,
.hero > .container,
.hero-home > .container,
.hero-section > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 680px) {
  .visit-counter-card {
    padding: 22px;
  }

  .counter-orbit {
    display: none;
  }

  .hero-video-bg video {
    opacity: .32;
  }
}


/* =========================================================
   IVANGS FINAL R2 — COUNTER BOTTOM + HERO VIDEO AUDIO
   ========================================================= */

.visit-counter-section {
  position: relative;
  z-index: 3;
  padding: 54px 0 40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(248,211,90,.12), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(180deg, rgba(13,7,17,.96), rgba(5,3,7,.98));
}

.visit-counter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 30px;
  border: 1px solid rgba(248,211,90,.20);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(248,211,90,.12), rgba(124,58,237,.10)),
    rgba(255,255,255,.04);
  box-shadow:
    0 24px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.counter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.counter-label::before {
  content: "";
  width: 32px;
  height: 2px;
  border-radius: 4px;
  background: var(--gold);
}

.visit-counter-card h2 {
  margin: 8px 0 4px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -.06em;
  color: var(--text);
}

.visit-counter-card p {
  margin: 0;
  color: var(--soft);
  font-weight: 700;
}

.counter-orbit {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(248,211,90,.25), rgba(248,211,90,.04) 58%, transparent 60%);
}

.counter-orbit span {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(248,211,90,.40);
  border-left-color: transparent;
  border-bottom-color: transparent;
  animation: counterSpin 4.5s linear infinite;
}

.counter-orbit b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #ffb92d);
  color: #120707;
  font-size: 26px;
  box-shadow: 0 16px 42px rgba(248,211,90,.24);
}

@keyframes counterSpin {
  to { transform: rotate(360deg); }
}

header {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  overflow: hidden !important;
  background: #050307 !important;
}

.hero-video-bg video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .58 !important;
  filter: saturate(1.18) contrast(1.10) brightness(.82) !important;
}

.hero-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(248,211,90,.16), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(124,58,237,.20), transparent 36%),
    linear-gradient(90deg, rgba(5,3,7,.94), rgba(5,3,7,.58), rgba(5,3,7,.92));
  pointer-events: none;
}

header > .container {
  position: relative !important;
  z-index: 2 !important;
}

.hero-sound-toggle {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: clamp(18px, 4vw, 44px);
  z-index: 5;
  border: 1px solid rgba(248,211,90,.35);
  border-radius: 999px;
  padding: 12px 18px;
  color: #120707;
  background: linear-gradient(135deg, var(--gold), #ffb92d);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  font-weight: 950;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.hero-sound-toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(0,0,0,.48);
}

.hero-sound-toggle.sound-on {
  background: rgba(255,255,255,.10);
  color: var(--gold);
  backdrop-filter: blur(12px);
}

@media (max-width: 680px) {
  .visit-counter-card {
    padding: 22px;
  }

  .counter-orbit {
    display: none;
  }

  .hero-video-bg video {
    opacity: .40 !important;
  }

  .hero-sound-toggle {
    right: 18px;
    bottom: 18px;
    padding: 10px 14px;
    font-size: 13px;
  }
}


/* =========================================================
   IVANGS FINAL R3 — HERO VIDEO ORIGINAL + COUNTER SMALL
   ========================================================= */

.hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #050307 !important;
  pointer-events: none !important;
}

.hero-video-bg video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .52 !important;
  filter: saturate(1.18) contrast(1.10) brightness(.78) !important;
}

.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 15% 25%, rgba(248,211,90,.16), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(124,58,237,.20), transparent 36%),
    linear-gradient(90deg, rgba(5,3,7,.94), rgba(5,3,7,.62), rgba(5,3,7,.94)) !important;
  pointer-events: none !important;
}

.hero-grid,
.hero > .container {
  position: relative !important;
  z-index: 2 !important;
}

.hero-sound-toggle {
  display: none !important;
}

/* Contador más pequeño y elegante abajo */
.visit-counter-section {
  padding: 24px 0 24px !important;
  background:
    linear-gradient(180deg, rgba(13,7,17,.96), rgba(5,3,7,.98)) !important;
}

.visit-counter-card {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  gap: 14px !important;
}

.counter-label {
  font-size: 10px !important;
  letter-spacing: .13em !important;
}

.counter-label::before {
  width: 22px !important;
}

.visit-counter-card h2 {
  margin: 5px 0 2px !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  letter-spacing: -.04em !important;
}

.visit-counter-card p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.counter-orbit {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
}

.counter-orbit span {
  inset: 5px !important;
}

.counter-orbit b {
  width: 34px !important;
  height: 34px !important;
  font-size: 16px !important;
}

@media (max-width: 680px) {
  .hero-video-bg video {
    opacity: .36 !important;
  }

  .visit-counter-card {
    max-width: 100% !important;
  }

  .counter-orbit {
    display: none !important;
  }
}


/* =========================================================
   HERO PANEL MÁS TRANSPARENTE + BOTÓN AUDIO
   ========================================================= */

/* Panel principal del hero más transparente */
.hero .hero-panel,
.hero .hero-card,
.hero .hero-copy,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(12, 8, 16, 0.28) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.24) !important;
}

/* Si el texto principal no está en tarjeta, por lo menos suaviza overlay */
.hero-overlay {
  background:
    radial-gradient(circle at 15% 25%, rgba(248,211,90,.10), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(124,58,237,.13), transparent 36%),
    linear-gradient(90deg, rgba(5,3,7,.70), rgba(5,3,7,.35), rgba(5,3,7,.70)) !important;
}

/* Video un poco más visible */
.hero-video-bg video {
  opacity: .68 !important;
  filter: saturate(1.18) contrast(1.08) brightness(.84) !important;
}

/* Botón de audio */
.hero-sound-toggle {
  position: absolute !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(248,211,90,.30) !important;
  background: rgba(8, 6, 12, 0.42) !important;
  color: #fff !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
  cursor: pointer !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

.hero-sound-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.32) !important;
  background: rgba(8, 6, 12, 0.58) !important;
}

.hero-sound-toggle .sound-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #f8d35a !important;
  box-shadow: 0 0 14px rgba(248,211,90,.65) !important;
}

.hero-sound-toggle.is-on .sound-dot {
  background: #40d97a !important;
  box-shadow: 0 0 14px rgba(64,217,122,.65) !important;
}

.hero-sound-toggle .sound-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

@media (max-width: 768px) {
  .hero-sound-toggle {
    right: 14px !important;
    bottom: 14px !important;
    padding: 10px 14px !important;
  }

  .hero-sound-toggle .sound-label {
    font-size: 12px !important;
  }
}

/* =========================================================
   IVANGS FINAL R4 — SIN BORDE EN HERO + VIDEOS MÁS PEQUEÑOS
   ========================================================= */

/* Quitar borde del panel donde está:
   "Música, visuales y lanzamientos en un solo lugar." */
.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Mantener transparencia sin borde duro */
.hero-copy {
  background: rgba(12, 8, 16, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Videos un poco más pequeños */
.video-grid {
  gap: 22px !important;
}

.video-card,
.video-card-safe {
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.video-card-safe .video-thumb-link,
.video-card-safe .video-thumb-link img {
  min-height: 245px !important;
  height: 245px !important;
}

.video-card .card-body,
.video-card-safe .card-body {
  padding: 18px 20px !important;
}

.video-card .card-body h3,
.video-card-safe .card-body h3 {
  font-size: 20px !important;
  margin-bottom: 8px !important;
}

.video-card .card-body p,
.video-card-safe .card-body p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* En pantallas grandes, que entren limpios sin verse gigantes */
@media (min-width: 980px) {
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 360px)) !important;
    justify-content: center !important;
  }
}

/* Responsive */
@media (max-width: 680px) {
  .video-card,
  .video-card-safe {
    max-width: 100% !important;
  }

  .video-card-safe .video-thumb-link,
  .video-card-safe .video-thumb-link img {
    min-height: 210px !important;
    height: 210px !important;
  }
}

/* =========================================================
   IVANGS FINAL R5 — HERO PANEL MÁS CLARO
   ========================================================= */

.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Texto dentro del panel un poco más legible */
.hero .hero-copy h1,
.hero .hero-copy h2,
.hero .hero-copy p,
.hero .hero-copy span,
.hero .hero-content h1,
.hero .hero-content h2,
.hero .hero-content p,
.hero .hero-content span {
  color: #ffffff !important;
}

/* Subtítulo con mejor contraste */
.hero .hero-copy p,
.hero .hero-content p {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   IVANGS FINAL R5 — HERO PANEL MÁS CLARO
   ========================================================= */

.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Texto dentro del panel un poco más legible */
.hero .hero-copy h1,
.hero .hero-copy h2,
.hero .hero-copy p,
.hero .hero-copy span,
.hero .hero-content h1,
.hero .hero-content h2,
.hero .hero-content p,
.hero .hero-content span {
  color: #ffffff !important;
}

/* Subtítulo con mejor contraste */
.hero .hero-copy p,
.hero .hero-content p {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   IVANGS FINAL R5 — HERO PANEL MÁS CLARO
   ========================================================= */

.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Texto dentro del panel un poco más legible */
.hero .hero-copy h1,
.hero .hero-copy h2,
.hero .hero-copy p,
.hero .hero-copy span,
.hero .hero-content h1,
.hero .hero-content h2,
.hero .hero-content p,
.hero .hero-content span {
  color: #ffffff !important;
}

/* Subtítulo con mejor contraste */
.hero .hero-copy p,
.hero .hero-content p {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   IVANGS FINAL R5 — HERO PANEL MÁS CLARO
   ========================================================= */

.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Texto dentro del panel un poco más legible */
.hero .hero-copy h1,
.hero .hero-copy h2,
.hero .hero-copy p,
.hero .hero-copy span,
.hero .hero-content h1,
.hero .hero-content h2,
.hero .hero-content p,
.hero .hero-content span {
  color: #ffffff !important;
}

/* Subtítulo con mejor contraste */
.hero .hero-copy p,
.hero .hero-content p {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   IVANGS FINAL R5 — HERO PANEL MÁS CLARO
   ========================================================= */

.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Texto dentro del panel un poco más legible */
.hero .hero-copy h1,
.hero .hero-copy h2,
.hero .hero-copy p,
.hero .hero-copy span,
.hero .hero-content h1,
.hero .hero-content h2,
.hero .hero-content p,
.hero .hero-content span {
  color: #ffffff !important;
}

/* Subtítulo con mejor contraste */
.hero .hero-copy p,
.hero .hero-content p {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   IVANGS FINAL R5 — HERO PANEL MÁS CLARO
   ========================================================= */

.hero .hero-copy,
.hero-copy,
.hero .hero-panel,
.hero .hero-card,
.hero .glass-card,
.hero .content-card,
.hero .hero-content {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Texto dentro del panel un poco más legible */
.hero .hero-copy h1,
.hero .hero-copy h2,
.hero .hero-copy p,
.hero .hero-copy span,
.hero .hero-content h1,
.hero .hero-content h2,
.hero .hero-content p,
.hero .hero-content span {
  color: #ffffff !important;
}

/* Subtítulo con mejor contraste */
.hero .hero-copy p,
.hero .hero-content p {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   IVANGS FINAL R6 — HERO PANEL CLARO INTEGRADO
   ========================================================= */

/* Panel del texto principal: más claro, sin verse como tarjeta cerrada */
.hero .hero-copy,
.hero-copy {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.07)
    ) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.15) !important;
  border-radius: 26px !important;
}

/* Quitar cualquier línea/contorno heredado */
.hero .hero-copy::before,
.hero .hero-copy::after,
.hero-copy::before,
.hero-copy::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Que no se vea igual al fondo: solo una luz suave detrás del texto */
.hero-copy {
  position: relative !important;
}

.hero-copy::before {
  content: "" !important;
  position: absolute !important;
  inset: -18px -20px !important;
  z-index: -1 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.20), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(248,211,90,0.12), transparent 48%) !important;
  filter: blur(2px) !important;
}

/* Hacer el video todavía más visible detrás del panel */
.hero-video-bg video {
  opacity: .74 !important;
  filter: saturate(1.20) contrast(1.08) brightness(.90) !important;
}

/* Bajar un poco la oscuridad del overlay */
.hero-overlay {
  background:
    radial-gradient(circle at 15% 25%, rgba(248,211,90,.09), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(124,58,237,.10), transparent 36%),
    linear-gradient(90deg, rgba(5,3,7,.58), rgba(5,3,7,.25), rgba(5,3,7,.58)) !important;
}

/* Texto con contraste limpio */
.hero-copy h1 {
  text-shadow: 0 4px 28px rgba(0,0,0,.45) !important;
}

.hero-copy p,
.hero-copy .eyebrow {
  text-shadow: 0 3px 18px rgba(0,0,0,.42) !important;
}

/* =========================================================
   IVANGS FINAL R7 — QUITAR PANEL DEL HERO COPY
   ========================================================= */

/* Quitar totalmente el panel del texto principal */
.hero .hero-copy,
.hero-copy,
.hero .hero-copy.reveal,
.hero-copy.reveal {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* Eliminar pseudo-paneles o brillos anteriores */
.hero .hero-copy::before,
.hero .hero-copy::after,
.hero-copy::before,
.hero-copy::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mantener legibilidad del texto sin panel */
.hero-copy h1 {
  text-shadow:
    0 5px 28px rgba(0,0,0,.78),
    0 2px 8px rgba(0,0,0,.70) !important;
}

.hero-copy p,
.hero-copy .eyebrow,
.hero-copy a {
  text-shadow:
    0 3px 16px rgba(0,0,0,.74),
    0 1px 6px rgba(0,0,0,.66) !important;
}

/* Hacer el video más visible detrás */
.hero-video-bg video {
  opacity: .78 !important;
  filter: saturate(1.18) contrast(1.08) brightness(.92) !important;
}

/* Overlay suave, sin oscurecer tanto */
.hero-overlay {
  background:
    radial-gradient(circle at 15% 25%, rgba(248,211,90,.08), transparent 34%),
    radial-gradient(circle at 80% 30%, rgba(124,58,237,.10), transparent 36%),
    linear-gradient(90deg, rgba(5,3,7,.42), rgba(5,3,7,.18), rgba(5,3,7,.48)) !important;
}