/* =========================================================
   DRIFT MELODIC — Sistema de diseño compartido (5 páginas)
   Paleta muestreada por píxel de los logos reales del proyecto:
   índigo → violeta/orquídea → ámbar, sobre fondo navy casi negro.
   Tipografía: Unbounded (display geométrico, wordmark-like) +
   Manrope (cuerpo) + Space Mono (metadatos/acentos, textura de
   estudio/DAW). Componentes de dinamismo (cursor, reveal, menú
   móvil, botones magnéticos, barra de progreso) — mismo lenguaje
   compartido por el resto del portfolio.
   ========================================================= */

:root{
  --bg: #060512;
  --bg-soft: #0a0918;
  --surface: #100e24;
  --surface-2: #16142e;
  --border: #2a2752;
  --border-soft: #1c1a3a;
  --text: #f3f1fb;
  --text-dim: #a8a3c9;
  --text-faint: #6c6790;
  --indigo: #6E65DC;
  --violet: #9668D8;
  --orchid: #C77FC9;
  --coral: #DB896D;
  --amber: #F1AE59;
  --grad: linear-gradient(115deg, var(--indigo) 0%, var(--orchid) 50%, var(--amber) 100%);
  --grad-soft: linear-gradient(115deg, rgba(110,101,220,0.16), rgba(199,127,201,0.14), rgba(241,174,89,0.14));
  --radius: 18px;
  --maxw: 1180px;
  --ff-head: 'Unbounded', 'Arial Narrow', sans-serif;
  --ff-body: 'Manrope', -apple-system, sans-serif;
  --ff-mono: 'Space Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 520px at 88% -6%, rgba(110,101,220,0.20), transparent 60%),
    radial-gradient(ellipse 800px 520px at 4% 10%, rgba(241,174,89,0.10), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(199,127,201,0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 90px);
  mask-image: radial-gradient(ellipse 1300px 850px at 50% 0%, black, transparent 72%);
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
section{ position:relative; z-index:1; }
h1,h2,h3{ font-family:var(--ff-head); font-weight:600; margin:0; letter-spacing:-0.01em; line-height:1.12; }
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); display:inline-flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--amber); opacity:.75; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:999px;
  font-family:var(--ff-head); font-weight:600; font-size:13.5px; text-decoration:none;
  transition:all .25s ease; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--grad); color:#0a0714; }
.btn-primary:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--border); color:var(--text); background:rgba(255,255,255,0.02); }
.btn-ghost:hover{ border-color:var(--orchid); color:var(--orchid); transform:translateY(-2px); }

/* ── NAV ── */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1150;
  background:rgba(6,5,18,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px; height:74px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-family:var(--ff-head); font-weight:600; font-size:15.5px; text-decoration:none; display:flex; align-items:center; gap:11px; letter-spacing:.01em; }
.brand-mark{ width:32px; height:32px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--bg-soft); border:1px solid var(--border); }
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--ff-head); font-size:12.5px; font-weight:500; text-decoration:none; color:var(--text-dim); transition:color .2s; }
.nav-links a:hover{ color:var(--text); }
.nav-links .current{
  font-family:var(--ff-head); font-size:12.5px; font-weight:600; color:var(--text);
  position:relative; cursor:default; padding-bottom:4px;
}
.nav-links .current::after{
  content:''; position:absolute; left:0; right:0; bottom:-21px; height:2px;
  background:var(--grad); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:14px; }

/* ── NAV BURGER + MOBILE MENU ── */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; padding:0; border:1px solid var(--border); border-radius:8px;
  background:rgba(255,255,255,0.02); cursor:pointer; flex-shrink:0;
}
.nav-burger span{ display:block; width:16px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s cubic-bezier(.16,.84,.44,1), opacity .3s ease; }
.nav-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:1050;
  background:rgba(6,5,18,0.98); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:38px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s; }
.mobile-menu-links{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.mobile-menu-links a, .mobile-menu-links .current{ font-family:var(--ff-head); font-size:24px; font-weight:600; text-decoration:none; color:var(--text-dim); transition:color .2s; }
.mobile-menu-links a:hover{ color:var(--text); }
.mobile-menu-links .current{ color:var(--text); position:relative; padding-bottom:6px; cursor:default; }
.mobile-menu-links .current::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad); border-radius:2px; }
.mobile-menu-footer{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.mobile-menu-footer a{ font-family:var(--ff-body); font-size:14px; color:var(--text-faint); text-decoration:none; }
.mobile-menu-footer a:hover{ color:var(--amber); }

@media(max-width:860px){ .nav-burger{ display:flex; } .nav-links{ display:none; } }
@media(min-width:861px){ .mobile-menu{ display:none; } }
@media(max-width:420px){
  .nav-inner{ padding:0 16px; }
  .brand{ font-size:13px; gap:8px; }
  .nav-cta{ gap:8px; }
  .lang-toggle button{ padding:6px 10px; font-size:10.5px; }
}

/* Selector de idioma */
.lang-toggle{ display:flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden; flex-shrink:0; }
.lang-toggle button{ background:none; border:none; cursor:pointer; font-family:var(--ff-mono); font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--text-dim); padding:7px 13px; transition:all .2s ease; }
.lang-toggle button.active{ background:var(--grad); color:#0a0714; }
.lang-toggle button:not(.active):hover{ color:var(--text); }

/* ── HERO ── */
.hero{ padding:172px 0 100px; overflow:hidden; }
.hero-inner{ text-align:center; max-width:820px; margin:0 auto; }
.hero-logo{ width:88px; height:88px; margin:0 auto 30px; border-radius:50%; overflow:hidden; border:1px solid var(--border); }
.hero-logo img{ width:100%; height:100%; object-fit:cover; }
.hero h1{ font-size:clamp(2.5rem, 6vw, 4.4rem); line-height:1.06; margin-bottom:22px; }
.hero-sub{ font-size:18px; color:var(--text-dim); max-width:560px; margin:0 auto 36px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.hero-tag{ font-family:var(--ff-mono); font-size:12px; color:var(--text-faint); letter-spacing:.05em; }
.hero-wave{
  margin-top:64px; border-radius:24px; overflow:hidden; position:relative;
  background:var(--surface); border:1px solid var(--border-soft);
  aspect-ratio:1255/941;
}
.hero-wave img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; opacity:.92; }
@media(max-width:640px){ .hero-wave{ aspect-ratio:4/5; } .hero-wave img{ object-position:center 12%; } }

/* ── PAGE HEADER (páginas interiores) ── */
.page-header{ padding:164px 0 60px; border-bottom:1px solid var(--border-soft); position:relative; overflow:hidden; }
.page-header-glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 800px 400px at 15% 0%, rgba(110,101,220,0.16), transparent 65%); }
.page-header > *{ position:relative; z-index:1; }
.page-header h1{ font-size:clamp(2rem, 4.2vw, 3.1rem); margin-bottom:16px; }
.page-header p{ color:var(--text-dim); font-size:16.5px; max-width:600px; }

/* ── SECTION HEADS ── */
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px; }
.section-head p{ color:var(--text-dim); font-size:16px; }

/* ── ABOUT / DISCLOSURE ── */
.about{ padding:90px 0 40px; }
.about-text{ max-width:720px; margin:0 auto; text-align:center; }
.about-text p{ color:var(--text-dim); font-size:17px; line-height:1.8; margin:0 0 18px; }
.about-text strong{ color:var(--text); }
.about-text .disclosure{ font-size:14px; color:var(--text-faint); border-top:1px solid var(--border-soft); padding-top:20px; margin-top:24px; }

/* ── SOUND FAMILIES ── */
.families{ padding:20px 0 100px; }
.families-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.family-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 28px; transition:border-color .25s, transform .25s; }
.family-card:hover{ border-color:var(--orchid); transform:translateY(-4px); }
.family-num{ font-family:var(--ff-mono); font-size:12px; color:var(--amber); letter-spacing:.1em; margin-bottom:16px; display:block; }
.family-card h3{ font-size:19px; margin-bottom:10px; }
.family-card p{ color:var(--text-dim); font-size:14.5px; margin:0 0 16px; line-height:1.65; }
.family-refs{ display:flex; flex-wrap:wrap; gap:8px; }
.ref-chip{ font-size:11px; font-family:var(--ff-mono); color:var(--text-faint); border:1px solid var(--border); border-radius:999px; padding:5px 12px; }
.family-bpm{ font-family:var(--ff-mono); font-size:11.5px; color:var(--violet); margin-top:14px; display:block; }
@media(max-width:760px){ .families-grid{ grid-template-columns:1fr; } }

/* ── VOICES ── */
.voices{ padding:20px 0 100px; }
.voices-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.voice-card{
  background:var(--surface); border:1px solid var(--border); border-radius:22px;
  overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.voice-card:hover{ transform:translateY(-6px); border-color:var(--orchid); box-shadow:0 26px 60px rgba(0,0,0,0.5); }
.voice-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#000; }
.voice-photo img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s ease; }
.voice-card:hover .voice-photo img{ transform:scale(1.045); }
.voice-badge{
  position:absolute; top:16px; left:16px; background:rgba(6,5,18,0.75); backdrop-filter:blur(6px);
  border:1px solid var(--border-soft); border-radius:999px; padding:6px 14px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; color:var(--amber); text-transform:uppercase;
}
.voice-body{ padding:26px 26px 28px; flex:1; display:flex; flex-direction:column; }
.voice-name{ font-family:var(--ff-head); font-size:21px; font-weight:600; margin-bottom:4px; }
.voice-role{ font-family:var(--ff-mono); font-size:11.5px; color:var(--violet); letter-spacing:.05em; margin-bottom:14px; }
.voice-desc{ color:var(--text-dim); font-size:14.5px; line-height:1.7; margin:0 0 16px; flex:1; }
.voice-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.voice-meta span{ font-size:10.5px; font-family:var(--ff-mono); color:var(--text-faint); border:1px solid var(--border); border-radius:999px; padding:5px 12px; }
@media(max-width:760px){ .voices-grid{ grid-template-columns:1fr; } }

/* ── MUSIC / DISCOGRAPHY ── */
.music{ padding:20px 0 100px; }
.debut{
  display:grid; grid-template-columns:0.6fr 1fr; gap:44px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:26px; padding:36px; margin-bottom:70px; position:relative; overflow:hidden;
}
.debut::before{ content:''; position:absolute; inset:0; background:var(--grad-soft); opacity:.6; pointer-events:none; }
.debut > *{ position:relative; z-index:1; }
.debut-cover{ border-radius:18px; overflow:hidden; aspect-ratio:1/1; border:1px solid var(--border-soft); }
.debut-cover img{ width:100%; height:100%; object-fit:cover; }
.debut-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid var(--border); border-radius:999px; padding:7px 15px; margin-bottom:18px; }
.debut h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:10px; }
.debut-credit{ font-family:var(--ff-mono); font-size:13px; color:var(--text-dim); margin-bottom:18px; }
.debut p.debut-desc{ color:var(--text-dim); font-size:15.5px; line-height:1.75; margin:0 0 26px; max-width:480px; }
.debut-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:820px){ .debut{ grid-template-columns:1fr; padding:26px; } }

.tracks-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.track-card{ display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; transition:border-color .25s, transform .25s; }
.track-card:hover{ border-color:var(--violet); transform:translateY(-3px); }
.track-icon{ width:44px; height:44px; border-radius:50%; background:var(--grad-soft); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:13px; color:var(--amber); flex-shrink:0; }
.track-info{ flex:1; min-width:0; }
.track-title{ font-family:var(--ff-head); font-size:14.5px; font-weight:600; margin-bottom:4px; }
.track-voice{ font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); letter-spacing:.03em; }
.track-status{ font-family:var(--ff-mono); font-size:10px; color:var(--text-faint); border:1px solid var(--border); border-radius:999px; padding:4px 10px; white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; }
@media(max-width:700px){ .tracks-grid{ grid-template-columns:1fr; } }

/* ── CONTACT ── */
.contact{ padding:20px 0 110px; }
.contact.top-pad{ padding-top:100px; }
.contact-box{ background:var(--surface); border:1px solid var(--border); border-radius:26px; padding:56px; text-align:center; position:relative; overflow:hidden; }
.contact-box::before{ content:''; position:absolute; inset:0; opacity:.6; background:var(--grad-soft); pointer-events:none; }
.contact-box > *{ position:relative; z-index:1; }
.contact-box h2{ font-size:clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom:14px; }
.contact-box p{ color:var(--text-dim); font-size:16px; max-width:480px; margin:0 auto 36px; }
.contact-methods{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.contact-method{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:14px; padding:16px 22px; text-decoration:none; color:var(--text); transition:all .2s; min-width:200px; }
.contact-method:hover{ border-color:var(--amber); transform:translateY(-3px); }
.contact-method .cm-ico{ font-size:20px; }
.contact-method .cm-label{ font-family:var(--ff-mono); font-size:10.5px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; display:block; }
.contact-method .cm-value{ font-family:var(--ff-head); font-size:13.5px; font-weight:600; display:block; margin-top:2px; }
@media(max-width:600px){ .contact-box{ padding:34px 22px; } }

/* ── SUPPORT / MECENAZGO ── */
.support{ padding:0 0 20px; }
.support-box{
  background:linear-gradient(160deg, rgba(241,174,89,0.08), rgba(199,127,201,0.05)), var(--surface);
  border:1px solid var(--border); border-radius:26px; padding:48px; text-align:center; position:relative; overflow:hidden;
}
.support-box::before{ content:''; position:absolute; inset:0; opacity:.5; background:radial-gradient(ellipse 600px 280px at 50% 0%, rgba(241,174,89,0.16), transparent 70%); pointer-events:none; }
.support-box > *{ position:relative; z-index:1; }
.support-icon{ font-size:30px; margin-bottom:16px; }
.support-box h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); margin-bottom:14px; }
.support-box p{ color:var(--text-dim); font-size:15.5px; max-width:520px; margin:0 auto 30px; line-height:1.75; }
.support-actions{ display:flex; justify-content:center; }
@media(max-width:600px){ .support-box{ padding:32px 22px; } }

/* ── FOOTER ── */
footer{ border-top:1px solid var(--border-soft); padding:32px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-inner span{ font-size:12px; color:var(--text-faint); font-family:var(--ff-mono); }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ font-size:12.5px; color:var(--text-faint); text-decoration:none; }
.footer-links a:hover{ color:var(--text); }
.footer-links .current{ font-size:12.5px; color:var(--amber); font-weight:600; cursor:default; }
.footer-bottom{
  max-width:var(--maxw); margin:16px auto 0; padding-top:16px; border-top:1px solid var(--border-soft);
  font-size:11px; letter-spacing:.04em; color:var(--text-faint); opacity:.75;
  display:flex; justify-content:center; text-align:center; font-family:var(--ff-mono);
}
.footer-credit a{ color:var(--text-faint); text-decoration:underline; opacity:.9; }
.footer-credit a:hover{ color:var(--amber); opacity:1; }

/* ── LANGUAGE SWITCH ── */
[data-lang="en"] .es{ display:none !important; }
[data-lang="es"] .en{ display:none !important; }

/* =========================================================
   DINAMISMO — cursor a medida, reveal-on-scroll, botones magnéticos,
   barra de progreso de scroll, fade-in de página, menú móvil
   (vocabulario compartido por todo el portfolio)
   ========================================================= */
body{ opacity:0; transition:opacity .6s ease; }
body.is-loaded{ opacity:1; }
body.menu-open{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ body{ opacity:1; transition:none; } }

.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--grad); z-index:1300; pointer-events:none; }

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); transition-delay:calc(var(--i, 0) * 70ms); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } }

.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--amber); opacity:.85; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s ease, height .2s ease, background .2s ease, opacity .2s ease, border-color .2s ease;
}
.cursor-dot.is-active{ width:38px; height:38px; background:rgba(199,127,201,0.16); border:1px solid var(--orchid); opacity:1; }
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button{ cursor:none; }

[data-magnetic]{ display:inline-flex; transition:transform .3s cubic-bezier(.16,.84,.44,1); }

@media(max-width:640px){
  .hero{ padding:150px 0 70px; }
  .families-grid, .voices-grid, .tracks-grid{ grid-template-columns:1fr; }
}