:root{
  --bg:#06070b;--bg2:#0b0e14;--panel:#10141d;--text:#f7f8fb;--muted:#9aa5b5;
  --line:rgba(255,255,255,.10);--cyan:#35f2ff;--purple:#a66cff;--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.wrap{width:min(calc(100% - 36px),var(--max));margin:auto}
.hero{min-height:88vh;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 25%,rgba(53,242,255,.10),transparent 28%),radial-gradient(circle at 25% 85%,rgba(166,108,255,.12),transparent 28%),linear-gradient(135deg,#07131a,#06070b 55%,#130b1e)}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.08em}.brand img{width:46px;height:46px;object-fit:cover;border-radius:10px;box-shadow:0 0 24px rgba(53,242,255,.18)}.brand span{font-size:1.45rem;text-shadow:0 0 14px rgba(53,242,255,.7)}.navlinks{display:flex;gap:28px;font-weight:700;font-size:.92rem}.navlinks a:hover{color:var(--cyan)}.menu{display:none;background:none;border:0;color:white;font-size:1.8rem}
.hero-inner{min-height:calc(88vh - 84px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;padding-bottom:70px}.eyebrow,.section-title>span{color:var(--cyan);font-size:.76rem;font-weight:900;letter-spacing:.22em}.hero h1{font-size:clamp(5rem,18vw,11rem);line-height:.86;margin:12px 0 24px;letter-spacing:.04em;text-shadow:0 0 12px rgba(53,242,255,.45),0 0 48px rgba(53,242,255,.16)}.lead{font-size:clamp(1.2rem,3vw,1.75rem);max-width:720px;color:#dbe0e8;margin:0}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:35px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:900;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(90deg,#aaf9ff,var(--cyan));color:#031013;box-shadow:0 0 28px rgba(53,242,255,.15)}.ghost{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.hero-glow{position:absolute;border-radius:50%;filter:blur(30px)}.glow-a{width:430px;height:430px;right:-120px;top:20%;background:radial-gradient(circle,rgba(53,242,255,.13),transparent 68%)}.glow-b{width:500px;height:500px;left:8%;bottom:-320px;background:radial-gradient(circle,rgba(166,108,255,.13),transparent 68%)}
.section{padding:100px 0}.section-title{max-width:780px;margin-bottom:40px}.section-title h2,.about h2,.social-card h2{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;margin:8px 0 12px}.section-title p,.about-copy,.listen-card>p{color:var(--muted)}
.latest-grid{display:grid;grid-template-columns:minmax(280px,455px) 1fr;gap:58px;align-items:center}.cover-card{margin:0;border-radius:24px;overflow:hidden;border:1px solid rgba(53,242,255,.20);box-shadow:0 30px 85px rgba(0,0,0,.38)}.cover-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.listen-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--line);padding:30px;border-radius:24px}.listen-card h3{font-size:2rem;margin:4px 0 8px}.mini-label{font-size:.78rem;color:var(--cyan);font-weight:900;letter-spacing:.12em}.spotify{border:0;border-radius:14px;margin-top:18px}.platforms,.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.pill,.socials a{padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);font-weight:800;font-size:.87rem}.spotify-pill:hover,.socials a:hover{border-color:rgba(53,242,255,.55);color:var(--cyan)}.pending{opacity:.48;cursor:not-allowed}
.band{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.song{min-height:230px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0b0e14;display:flex;flex-direction:column}.song-art{min-height:165px;padding:18px;display:flex;align-items:flex-end;background:radial-gradient(circle at 70% 22%,rgba(53,242,255,.12),transparent 28%),linear-gradient(135deg,#111925,#090b10 60%,#171122);font-weight:900;letter-spacing:.12em;color:rgba(255,255,255,.7)}.song>div:last-child,.featured-song>div:last-child{padding:16px 18px}.song h3{margin:0 0 4px}.song p{margin:0;color:var(--muted);font-size:.88rem}.featured-song img{width:100%;height:165px;object-fit:cover;display:block}
.video-wrap{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#000;box-shadow:0 30px 85px rgba(0,0,0,.35)}.video-wrap iframe{width:100%;height:100%;border:0}.center{text-align:center;margin-top:28px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}.about-copy p:first-child{margin-top:0}.social-card{text-align:center;padding:65px 24px;border:1px solid rgba(53,242,255,.18);border-radius:28px;background:radial-gradient(circle at top,rgba(53,242,255,.08),transparent 42%),rgba(255,255,255,.028)}.socials{justify-content:center}
footer{border-top:1px solid var(--line);padding:48px 18px 58px;text-align:center;color:var(--muted)}footer img{width:46px;height:46px;object-fit:cover;border-radius:10px;vertical-align:middle;margin-right:10px}footer strong{font-size:1.35rem;color:#fff}footer p{margin:12px 0 2px}footer small{color:var(--cyan)}
@media(max-width:820px){.menu{display:block}.navlinks{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:rgba(6,7,11,.97);border:1px solid var(--line);border-radius:16px;padding:8px}.navlinks.open{display:flex}.navlinks a{padding:12px 14px}.latest-grid,.about{grid-template-columns:1fr}.cover-card{max-width:500px;margin:auto}.song-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wrap{width:min(calc(100% - 26px),var(--max))}.hero{min-height:82vh}.hero-inner{min-height:calc(82vh - 74px)}.nav{height:74px}.brand img{width:40px;height:40px}.brand span{font-size:1.2rem}.actions .btn{width:100%}.section{padding:76px 0}.latest-grid{gap:32px}.listen-card{padding:22px}.song-grid{grid-template-columns:1fr}.song{min-height:auto}.social-card{padding:48px 20px}}


/* ===== V4: catálogo con carátulas reales ===== */
.song-with-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

.song-with-cover {
  min-height: 0;
}

.song-with-cover > div {
  padding: 16px 18px 18px;
}

.song-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(53,242,255,.35);
  background: rgba(53,242,255,.06);
  color: #dffcff;
  font-weight: 800;
  font-size: .82rem;
  transition: .2s;
}

.song-link:hover {
  border-color: rgba(53,242,255,.75);
  color: var(--cyan);
  transform: translateY(-1px);
}


/* ===== V6: muestras de escucha en el catálogo ===== */
.song-cover-wrap {
  position: relative;
  overflow: hidden;
}

.song-cover-wrap > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.preview-button {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(4,8,12,.82);
  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.preview-button:hover {
  transform: translateX(-50%) translateY(-2px);
  border-color: rgba(53,242,255,.65);
  background: rgba(5,18,23,.92);
}

.song-card-info {
  padding: 16px 18px 18px;
}

.song-card-info h3 {
  margin: 0 0 4px;
}

.song-card-info p {
  margin: 0;
  color: var(--muted);
}

.song-actions {
  margin-top: 12px;
}

.song-preview {
  margin-top: 14px;
}

.song-preview iframe {
  display: block;
  border-radius: 12px;
}

.latest-song-card {
  border-color: rgba(53,242,255,.42);
  box-shadow: 0 18px 50px rgba(53,242,255,.06);
}

.latest-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(5,7,11,.82);
  border: 1px solid rgba(53,242,255,.42);
  color: var(--neon);
  font-size: .68rem;
  letter-spacing: .10em;
  font-weight: 800;
  backdrop-filter: blur(7px);
}


/* ===== V6 CORREGIDA: botón de muestra más visible ===== */
.preview-button {
  background: rgba(0,0,0,.88);
  border: 2px solid rgba(53,242,255,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 10px 30px rgba(0,0,0,.45),
    0 0 22px rgba(53,242,255,.12);
}

.preview-button::before {
  content: "♫ ";
}

.latest-song-card .preview-button {
  border-color: rgba(53,242,255,.95);
}


/* ===== V7: reproductor Spotify en ventana modal central ===== */
body.modal-open {
  overflow: hidden;
}

.music-modal[hidden] {
  display: none;
}

.music-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}

.music-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(7px);
}

.music-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 560px);
  border-radius: 24px;
  border: 1px solid rgba(53, 242, 255, .34);
  background:
    radial-gradient(circle at 50% 0%, rgba(53,242,255,.08), transparent 36%),
    #080b10;
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    0 0 36px rgba(53,242,255,.10);
  overflow: hidden;
  animation: h97ModalIn .18s ease-out;
}

.music-modal-content {
  padding: 34px 28px 28px;
}

.music-modal-kicker {
  display: block;
  color: var(--neon);
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 800;
  margin-bottom: 6px;
}

.music-modal-content h2 {
  margin: 0 44px 8px 0;
  font-size: clamp(1.55rem, 5vw, 2.2rem);
}

.music-modal-content p {
  margin: 0 0 20px;
  color: var(--muted);
}

.music-modal-player iframe {
  display: block;
  border-radius: 14px;
  background: #111;
}

.music-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.music-modal-close:hover {
  transform: scale(1.05);
  border-color: rgba(53,242,255,.6);
  background: rgba(53,242,255,.10);
}

@keyframes h97ModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 560px) {
  .music-modal {
    padding: 14px;
  }

  .music-modal-dialog {
    width: 100%;
    border-radius: 20px;
  }

  .music-modal-content {
    padding: 30px 18px 20px;
  }
}


/* ===== V8: botones de video oficial ===== */
.video-official-link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.045);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.video-official-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
}

@media (max-width: 560px) {
  .video-official-link {
    margin-left: 0;
  }
}


/* ===== V10: Sobre H-97 ===== */
.about-copy p strong {
  color: #fff;
  font-size: 1.05em;
  line-height: 1.7;
}


/* ===== V11: iconos de redes ===== */
.social-icon-link {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px !important;
}

.social-icon-link svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}

.social-icon-link span {
  line-height: 1;
}

.social-icon-link:hover svg {
  transform: scale(1.06);
}

.social-icon-link svg {
  transition: transform .18s ease;
}


/* ===== V12: optimización real para móvil y tablet ===== */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

section[id] {
  scroll-margin-top: 20px;
}

@media (max-width: 820px) {
  .nav {
    z-index: 50;
  }

  .menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    cursor: pointer;
  }

  .navlinks {
    z-index: 60;
    top: 70px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
  }

  .navlinks a {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: 10px;
  }

  .navlinks a:hover,
  .navlinks a:focus-visible {
    background: rgba(53,242,255,.06);
  }

  .latest-grid {
    gap: 34px;
  }

  .cover-card {
    width: min(100%, 500px);
  }

  .listen-card {
    width: 100%;
  }

  .platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platforms .pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }

  .song-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .song-link,
  .video-official-link {
    margin-left: 0;
  }

  .socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 520px);
    margin-left: auto;
    margin-right: auto;
  }

  .social-icon-link {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .wrap {
    width: min(calc(100% - 28px), var(--max));
  }

  .hero {
    min-height: 78svh;
  }

  .hero-inner {
    min-height: calc(78svh - 74px);
    padding-bottom: 54px;
  }

  .hero h1 {
    font-size: clamp(4.5rem, 26vw, 7.4rem);
    line-height: .9;
    margin-top: 10px;
    margin-bottom: 22px;
  }

  .eyebrow,
  .section-title > span {
    font-size: .7rem;
    letter-spacing: .17em;
  }

  .lead {
    font-size: 1.18rem;
    line-height: 1.5;
  }

  .actions {
    gap: 10px;
    margin-top: 28px;
  }

  .actions .btn {
    min-height: 50px;
  }

  .section {
    padding: 68px 0;
  }

  .section-title {
    margin-bottom: 30px;
  }

  .section-title h2,
  .about h2,
  .social-card h2 {
    font-size: clamp(1.85rem, 10vw, 2.55rem);
  }

  .latest-grid {
    gap: 26px;
  }

  .cover-card {
    border-radius: 18px;
  }

  .listen-card {
    padding: 20px;
    border-radius: 18px;
  }

  .listen-card h3 {
    font-size: 1.65rem;
  }

  .spotify {
    height: 152px;
  }

  .platforms {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .song-grid {
    gap: 16px;
  }

  .song {
    border-radius: 18px;
  }

  .song-card-info {
    padding: 16px;
  }

  .preview-button {
    width: calc(100% - 28px);
    bottom: 14px;
    min-height: 46px;
    font-size: .85rem;
  }

  .song-actions {
    flex-direction: column;
  }

  .song-link,
  .video-official-link {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .video-wrap {
    border-radius: 18px;
  }

  .center .btn {
    width: 100%;
  }

  .about {
    gap: 24px;
  }

  .about-copy p {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .social-card {
    padding: 42px 16px;
    border-radius: 22px;
  }

  .socials {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .social-icon-link {
    min-width: 0;
    padding: 11px 10px !important;
    font-size: .84rem;
  }

  footer {
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
  }

  .music-modal {
    padding:
      max(14px, env(safe-area-inset-top))
      14px
      max(14px, env(safe-area-inset-bottom));
  }

  .music-modal-dialog {
    max-height: calc(100svh - 28px);
    overflow-y: auto;
  }

  .music-modal-content {
    padding: 28px 16px 18px;
  }

  .music-modal-content h2 {
    font-size: 1.55rem;
    margin-right: 42px;
  }

  .music-modal-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: 4.4rem;
  }

  .socials {
    grid-template-columns: 1fr;
  }

  .social-icon-link {
    justify-content: flex-start;
    padding-left: 18px !important;
  }
}



/* ===== V16: YouTube Music activo y visible ===== */
.youtube-music-active {
  opacity: 1 !important;
  cursor: pointer !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.07) !important;
}

.youtube-music-active:hover {
  border-color: rgba(53,242,255,.65) !important;
  background: rgba(53,242,255,.09) !important;
  color: #fff !important;
  transform: translateY(-1px);
}


/* ===== V17: contacto oficial H-97 ===== */
.footer-contact {
  margin: 8px 0 6px;
}
.footer-contact a {
  color: var(--cyan);
  font-weight: 800;
  text-decoration: none;
}
.footer-contact a:hover,
.footer-contact a:focus-visible {
  text-decoration: underline;
}


/* ===== V19 privacidad, legal y multimedia externa ===== */
.footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:12px;font-size:.92rem}
.footer-legal a,.footer-legal button{color:#9fb0c4;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:none}
.footer-legal a:hover,.footer-legal button:hover{color:#45e9f6;text-decoration:underline}

.consent-banner{position:fixed;z-index:9999;left:18px;right:18px;bottom:18px;max-width:980px;margin:0 auto;background:#0e141c;border:1px solid rgba(69,233,246,.35);box-shadow:0 18px 55px rgba(0,0,0,.55);border-radius:18px;padding:18px 20px;display:flex;gap:22px;align-items:center;justify-content:space-between}
.consent-banner[hidden]{display:none}
.consent-copy{max-width:680px}.consent-copy strong{display:block;font-size:1.05rem;margin-bottom:5px}.consent-copy p{margin:0 0 6px;color:#b8c4d3;line-height:1.45}.consent-copy a{color:#45e9f6}
.consent-actions{display:flex;gap:10px;flex-shrink:0}.consent-actions .btn{white-space:nowrap}

.external-media-block{position:relative;width:100%;min-height:152px;border-radius:14px;overflow:hidden;background:#12151b;border:1px solid rgba(255,255,255,.08)}
.external-media-gate{min-height:152px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;color:#eef4fb}
.external-media-gate p{margin:7px 0 14px;color:#aab6c7}.consent-inline{padding:.72rem 1rem;font-size:.92rem}
.external-media-frame{display:block;width:100%;border:0}.external-media-frame[hidden]{display:none}
.external-media-block.media-enabled .external-media-gate{display:none}
.external-media-video{aspect-ratio:16/9;min-height:0}.external-media-video .external-media-gate{height:100%;min-height:0}.external-media-video iframe{width:100%;height:100%;aspect-ratio:16/9}

.legal-shell{min-height:100vh;background:#05070b;color:#f5f7fb}
.legal-header{border-bottom:1px solid rgba(255,255,255,.08);background:#071018}.legal-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:24px}.legal-back{color:#45e9f6;text-decoration:none;font-weight:700}
.legal-main{max-width:900px;margin:0 auto;padding:64px 28px 90px}.legal-main .eyebrow{color:#45e9f6}.legal-main h1{font-size:clamp(2.3rem,7vw,4.4rem);margin:.35rem 0 1.2rem}.legal-main h2{font-size:1.45rem;margin:2.3rem 0 .7rem}.legal-main p,.legal-main li{color:#b8c4d3;line-height:1.75}.legal-main a{color:#45e9f6}.legal-main ul{padding-left:1.2rem}.legal-note{border:1px solid rgba(69,233,246,.25);background:rgba(69,233,246,.05);padding:16px 18px;border-radius:14px;margin:22px 0}
.legal-footer{border-top:1px solid rgba(255,255,255,.08);padding:28px;text-align:center;color:#8492a6}
.legal-footer a{color:#45e9f6}

@media (max-width:720px){.consent-banner{left:10px;right:10px;bottom:10px;display:block;padding:16px}.consent-actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr}.consent-actions .btn{width:100%;padding:.85rem .75rem}.legal-main{padding:44px 22px 70px}.footer-legal{gap:9px 14px}}

/* V21: estado visible explícito del panel de preferencias */
.consent-banner.consent-banner-open{display:flex}
@media (max-width:720px){.consent-banner.consent-banner-open{display:block}}