/* ===========================================================
   MARMAZ RECORDS — Propuesta Comercial 2026
   =========================================================== */

:root {
  --accent-1: #4622c9;   /* indigo */
  --accent-2: #d81e8f;   /* magenta */
  --gold: #e7c069;
  --gold-soft: #f0d79a;

  --bg: #0a0814;
  --bg-2: #0e0b1c;
  --surface: #15112440;
  --surface-solid: #161126;
  --surface-2: #1d1733;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f5f2fb;
  --muted: #a79fc4;
  --muted-2: #756d92;

  --font-display: "Anton", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --grad: linear-gradient(115deg, var(--accent-1), var(--accent-2));
  --container: 1240px;
  --radius: 18px;
}

[data-theme="light"] {
  --bg: #f4f1f7;
  --bg-2: #ece7f2;
  --surface: #ffffffcc;
  --surface-solid: #ffffff;
  --surface-2: #f3eff8;
  --border: rgba(20,10,40,0.10);
  --border-strong: rgba(20,10,40,0.18);
  --text: #161024;
  --muted: #5a5273;
  --muted-2: #8b83a3;
}

/* headline style swap (Tweaks) */
[data-headline="editorial"] {
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
}
[data-headline="editorial"] .display,
[data-headline="editorial"] .hero h1,
[data-headline="editorial"] .section-head h2,
[data-headline="editorial"] .contact h2,
[data-headline="editorial"] .pname,
[data-headline="editorial"] .stat .num,
[data-headline="editorial"] .ach h3,
[data-headline="editorial"] .ach .big,
[data-headline="editorial"] .pull,
[data-headline="editorial"] .wordmark,
[data-headline="editorial"] .fm,
[data-headline="editorial"] .mic-band .mt span,
[data-headline="editorial"] .ctable thead th,
[data-headline="editorial"] .compare-head h3,
[data-headline="editorial"] .artist .name {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient glows */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 85% -5%, color-mix(in oklab, var(--accent-2) 32%, transparent), transparent 70%),
    radial-gradient(55% 45% at 5% 8%, color-mix(in oklab, var(--accent-1) 30%, transparent), transparent 70%);
  opacity: .55;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow .idx { color: var(--accent-2); }
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--border-strong);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-text { color: var(--gold); }

.section { padding: clamp(70px, 11vh, 140px) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  margin: 18px 0 0;
}
.section-head p {
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  margin-top: 22px;
  max-width: 620px;
}

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 26px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--accent-2) 60%, transparent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px color-mix(in oklab, var(--accent-2) 70%, transparent); }
.btn-ghost {
  background: color-mix(in oklab, var(--text) 6%, transparent);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--text); }
.btn-wa { background: #1faf54; color: #fff; }
.btn-wa:hover { transform: translateY(-2px); background: #25c761; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  transition: background .3s, backdrop-filter .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--border);
  padding: 12px 40px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 9px;
}
.wordmark .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grad);
  display: inline-block;
}
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-size: 0.92rem; color: var(--muted);
  font-weight: 500; transition: color .2s; position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 940px) { .nav-links { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 90px;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; z-index: 0;
}
.hero-img img, .hero-img image-slot { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg) 18%, color-mix(in oklab, var(--bg) 72%, transparent) 48%, color-mix(in oklab, var(--bg) 30%, transparent) 72%, transparent),
    linear-gradient(0deg, var(--bg), transparent 35%);
}
.hero .container { z-index: 2; }
.hero-content { max-width: 820px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
  font-size: clamp(3.3rem, 10vw, 8.2rem);
  margin: 26px 0 0;
}
.hero-logo {
  display: block;
  width: min(597px, 82%);
  height: auto;
  margin: 26px auto 0;
  animation: logoFloat 5s ease-in-out infinite;
  will-change: transform;
}
.hero-logo:hover { animation-play-state: paused; }
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 8px 26px rgba(0,0,0,.35)); }
  50% { transform: translateY(-10px) scale(1.015); filter: drop-shadow(0 20px 40px color-mix(in oklab, var(--accent-2) 40%, transparent)); }
}
.hero .lede {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  color: var(--muted);
  margin: 30px 0 0;
  max-width: 540px;
}
.hero .tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 20px;
}
.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.hero-tag {
  display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 8px 16px; background: var(--surface);
}
.scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2;
}
.scroll-hint .line { width: 1px; height: 36px; background: linear-gradient(var(--accent-2), transparent); animation: drop 2s infinite; }
@keyframes drop { 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- stats ---------- */
.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat {
  padding: 56px 40px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
}
.stat .num .plus { color: var(--accent-2); }
.stat .label {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .16em; font-size: .82rem; color: var(--muted);
  margin-top: 14px;
}
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--border); padding: 40px; }
  .stat:first-child { border-top: none; }
}

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.about-copy p { color: var(--muted); font-size: 1.1rem; margin-top: 22px; max-width: 520px; }
.about-copy .pull {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  text-transform: uppercase; line-height: 1; color: var(--text); margin-top: 8px;
}
.about-media {
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); position: relative;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, color-mix(in oklab, var(--bg) 60%, transparent), transparent 50%); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-media { aspect-ratio: 16/10; } }

/* ---------- services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.service {
  background: var(--surface-solid);
  padding: 40px 34px 44px;
  transition: background .3s;
  position: relative;
}
.service:hover { background: var(--surface-2); }
.service .s-idx { font-family: var(--font-mono); color: var(--accent-2); font-size: .82rem; letter-spacing: .12em; }
.service h3 { font-size: 1.32rem; margin: 24px 0 12px; font-weight: 700; line-height: 1.15; }
.service p { color: var(--muted); font-size: .98rem; }
.service .bar { height: 2px; width: 34px; background: var(--grad); margin-top: 26px; transition: width .35s; }
.service:hover .bar { width: 70px; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* ---------- catalog ---------- */
.catalog { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.cat-controls { display: flex; gap: 12px; }
.cat-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); cursor: pointer; font-size: 1.2rem;
  display: grid; place-items: center; transition: background .2s, transform .2s, opacity .2s;
}
.cat-arrow:hover { background: var(--surface-2); transform: scale(1.06); }
.cat-arrow:disabled { opacity: .3; cursor: default; }
.cat-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-top: 44px; padding-bottom: 14px; scrollbar-width: none;
}
.cat-track::-webkit-scrollbar { display: none; }
.artist {
  flex: 0 0 280px; scroll-snap-align: start;
}
.artist .photo {
  aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); position: relative;
}
.artist .name { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; margin-top: 16px; }
.artist .tag { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }

/* placeholder visual */
.ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent-1) 16%, var(--surface-2)) 0 10px, var(--surface-2) 10px 20px);
  display: grid; place-items: center;
}
.ph span {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); background: var(--bg);
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--border);
}

/* ---------- "ver catálogo completo" button ---------- */
.cat-more { display: flex; justify-content: center; margin-top: 46px; }
.cat-more-btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text); cursor: pointer;
  background: var(--surface-solid); border: 1px solid var(--border-strong);
  border-radius: 100px; padding: 15px 26px 15px 15px;
  transition: border-color .3s, transform .3s, background .3s;
}
.cat-more-btn:hover { border-color: transparent; transform: translateY(-2px); background: color-mix(in oklab, var(--accent-1) 12%, var(--surface-solid)); }
.cat-more-plus {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--grad); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 1.4rem; line-height: 1;
}

/* ---------- full catalog modal ---------- */
.cat-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vh 4vw; }
.cat-modal[hidden] { display: none; }
.cat-modal-backdrop {
  position: absolute; inset: 0; background: rgba(4,2,12,.72);
  backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s;
}
.cat-modal.open .cat-modal-backdrop { opacity: 1; }
.cat-modal-panel {
  position: relative; width: min(1180px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 48px);
  transform: translateY(24px) scale(.98); opacity: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s;
}
.cat-modal.open .cat-modal-panel { transform: none; opacity: 1; }
.cat-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 34px;
}
.cat-modal-head h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: .95; font-size: clamp(1.8rem, 4vw, 3rem); margin-top: 14px;
}
.cat-modal-close {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 1.6rem; line-height: 1; transition: background .25s, border-color .25s;
}
.cat-modal-close:hover { background: var(--surface-solid); border-color: var(--border-strong); }
.cat-modal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px;
}
.cat-cell .photo {
  aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); position: relative;
}
.cat-cell .name {
  font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase;
  margin-top: 14px; line-height: 1;
}
@media (max-width: 640px) {
  .cat-modal-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cat-cell .name { font-size: 1rem; }
}

/* ---------- achievements ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.ach {
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px; position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.ach:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.ach .ach-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ach h3 { font-family: var(--font-display); text-transform: uppercase; line-height: 0.95; margin: 16px 0 14px; }
.ach p { color: var(--muted); font-size: .98rem; }
.ach .names { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.ach .names span { font-size: .82rem; padding: 5px 12px; border: 1px solid var(--border); border-radius: 100px; color: var(--text); }
.ach-span-7 { grid-column: span 7; }
.ach-span-5 { grid-column: span 5; }
.ach-span-4 { grid-column: span 4; }
.ach-span-8 { grid-column: span 8; }
.ach-span-6 { grid-column: span 6; }
.ach-span-12 { grid-column: span 12; }
.ach.gold { background: linear-gradient(150deg, color-mix(in oklab, var(--gold) 14%, var(--surface-solid)), var(--surface-solid)); border-color: color-mix(in oklab, var(--gold) 30%, var(--border)); }
.disc {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, var(--bg-2) 0 17%, var(--gold) 18% 22%, color-mix(in oklab,var(--gold) 70%, #b88a2e) 23% 100%);
  box-shadow: inset 0 0 0 6px color-mix(in oklab, var(--gold) 60%, #7a5a1e), 0 8px 24px -8px color-mix(in oklab,var(--gold) 50%, transparent);
  position: relative;
}
.disc::after { content:""; position:absolute; inset:0; border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(0,0,0,.08) 2px 3px); }
.ach-top { display: flex; align-items: center; gap: 22px; }
.ach .big { font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.6rem); line-height: 1; }
@media (max-width: 860px) {
  .ach-grid { grid-template-columns: 1fr; }
  .ach[class*="ach-span"] { grid-column: auto; }
}

/* ---------- hero motion: equalizer + floating notes ---------- */
.eq {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 1;
  display: flex; align-items: flex-end; gap: 4px; height: 46px; opacity: .5;
  pointer-events: none;
}
.eq span {
  width: 3px; border-radius: 6px; background: var(--grad);
  height: 20%; animation: eqbar 1.1s ease-in-out infinite;
}
.eq span:nth-child(1){animation-delay:-.1s}.eq span:nth-child(2){animation-delay:-.5s}.eq span:nth-child(3){animation-delay:-.9s}.eq span:nth-child(4){animation-delay:-.3s}.eq span:nth-child(5){animation-delay:-.7s}.eq span:nth-child(6){animation-delay:-1s}.eq span:nth-child(7){animation-delay:-.2s}.eq span:nth-child(8){animation-delay:-.6s}.eq span:nth-child(9){animation-delay:-.95s}.eq span:nth-child(10){animation-delay:-.4s}.eq span:nth-child(11){animation-delay:-.8s}.eq span:nth-child(12){animation-delay:-.15s}
@keyframes eqbar { 0%,100%{height:18%} 50%{height:100%} }
.notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.notes span {
  position: absolute; bottom: -10%; font-size: 2rem; color: color-mix(in oklab, var(--accent-2) 70%, #fff);
  opacity: 0; animation: floatNote 9s linear infinite;
}
.notes span:nth-child(1){left:12%;animation-delay:0s}
.notes span:nth-child(2){left:28%;animation-delay:2.4s;font-size:1.4rem}
.notes span:nth-child(3){left:63%;animation-delay:4.1s}
.notes span:nth-child(4){left:78%;animation-delay:1.2s;font-size:1.6rem}
.notes span:nth-child(5){left:46%;animation-delay:6s;font-size:1.2rem}
@keyframes floatNote { 0%{transform:translateY(0) rotate(0);opacity:0} 12%{opacity:.55} 88%{opacity:.4} 100%{transform:translateY(-88vh) rotate(22deg);opacity:0} }

/* ---------- logros figures ---------- */
.ach-figs { display: flex; gap: 28px; margin: 20px 0 4px; flex-wrap: wrap; }
.ach-fig { display: flex; flex-direction: column; }
.ach-fig .count { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--gold); }
.ach-fig small { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.ach p { margin-top: 14px; }

/* ---------- service icons + cta ---------- */
.s-ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent-1) 18%, var(--surface-2));
  border: 1px solid var(--border); color: var(--text); margin-bottom: 20px;
  transition: transform .3s, background .3s;
}
.s-ic svg { width: 24px; height: 24px; }
.service:hover .s-ic { transform: translateY(-3px) rotate(-4deg); background: color-mix(in oklab, var(--accent-2) 24%, var(--surface-2)); }
.s-cta {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2); margin-top: 20px; display: inline-block; transition: transform .25s, color .2s;
}
.service:hover .s-cta { transform: translateX(4px); }
a.s-cta:hover { color: var(--text); }
.service-cta {
  grid-column: span 2; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent-1) 16%, var(--surface-solid)), var(--surface-solid) 70%);
}
.service-cta h3 { font-size: 1.5rem; margin: 0 0 6px; }
.service-cta p { color: var(--muted); font-size: 1rem; }
.service-cta .btn { font-size: 1.05rem; padding: 16px 34px; }
@media (max-width: 900px) { .service-cta { grid-column: span 2; } }
@media (max-width: 600px) { .service-cta { grid-column: auto; } }

/* ---------- platforms marquee ---------- */
.platforms { margin-top: 54px; }
.platforms-label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.marquee { overflow: hidden; margin-top: 20px; position: relative; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scrollX 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .chip {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; white-space: nowrap;
  padding: 12px 22px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--surface-solid); color: var(--text);
  display: inline-flex; align-items: center; gap: 10px;
}
.marquee-track .chip-ic { display: inline-flex; color: var(--accent-2); }
.marquee-track .chip-ic svg { width: 20px; height: 20px; display: block; }
@keyframes scrollX { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- compilado ---------- */
.comp { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.comp-card {
  display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 24px; padding: 44px;
}
.comp-cover { position: relative; aspect-ratio: 1; }
.comp-cover-art { position: absolute; inset: 0; z-index: 2; }
.comp-cover-art image-slot { width: 100%; height: 100%; }
.vinyl {
  position: absolute; top: 50%; right: -26%; transform: translateY(-50%); z-index: 1;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #14101f 0 3px, #0b0813 3px 6px);
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.6);
  animation: spin 8s linear infinite;
}
.vinyl::after { content:""; position:absolute; inset:38%; border-radius:50%; background: var(--grad); box-shadow: 0 0 0 5px var(--bg-2); }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.comp-tag { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.comp-title { font-family: var(--font-display); text-transform: uppercase; line-height: .95; font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin: 12px 0 16px; }
.comp-desc { color: var(--muted); font-size: 1.05rem; max-width: 520px; }
.comp-artists { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.comp-artists span { font-size: .82rem; padding: 6px 14px; border: 1px solid var(--border); border-radius: 100px; color: var(--text); }
.comp-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.comp-hint { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-2); margin-top: 16px; }
@media (max-width: 860px) { .comp-card { grid-template-columns: 1fr; gap: 32px; padding: 28px; } .vinyl { display: none; } }

/* ---------- news ---------- */
.news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.news-head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .95; font-size: clamp(2rem, 4.4vw, 3.6rem); margin-top: 18px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, border-color .3s;
}
.news-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.news-thumb { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--surface-2); }
.news-thumb image-slot { width: 100%; height: 100%; }
.news-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.news-cat { color: var(--accent-2); }
.news-card h3 { font-size: 1.18rem; font-weight: 700; line-height: 1.2; margin: 12px 0 10px; }
.news-card p { color: var(--muted); font-size: .94rem; flex: 1; }
.news-more { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin-top: 18px; transition: transform .25s; }
.news-card:hover .news-more { transform: translateX(4px); }
a.news-more:hover { color: var(--text); }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- social footer ---------- */
.social-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap;
  padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border);
}
.social-msg { font-size: 1.05rem; color: var(--muted); max-width: 520px; }
.social-row { display: flex; gap: 12px; }
.social {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: transform .25s, background .25s, color .25s;
}
.social svg { width: 22px; height: 22px; }
.social:hover { transform: translateY(-3px) scale(1.05); background: var(--grad); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .eq span, .notes span, .vinyl, .marquee-track, .hero-logo { animation: none !important; }
  .notes { display: none; }
}

/* ---------- plans ---------- */
.plans { position: relative; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-top: 56px; }
.plan {
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 22px; padding: 38px 32px; display: flex; flex-direction: column;
  position: relative; transition: transform .3s, border-color .3s, box-shadow .3s;
}
.plan:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.plan.featured {
  background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 12%, var(--surface-solid)), var(--surface-solid) 60%);
  border-color: color-mix(in oklab, var(--gold) 38%, var(--border));
  box-shadow: 0 24px 60px -22px color-mix(in oklab, var(--gold) 40%, transparent);
}
.plan.popular { border-color: color-mix(in oklab, var(--accent-2) 40%, var(--border)); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 100px; white-space: nowrap;
}
.plan-badge.gold { background: var(--gold); color: #1a1208; }
.plan-badge.mag { background: var(--grad); color: #fff; }
.plan .tier { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plan .pname { font-family: var(--font-display); font-size: 2.2rem; text-transform: uppercase; line-height: 1; margin: 12px 0 6px; }
.plan.featured .pname { color: var(--gold); }
.plan .pdesc { color: var(--muted); font-size: .95rem; min-height: 60px; }
.plan .price { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 6px; }
.plan .price .amt { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.plan .price .per { color: var(--muted); font-size: .9rem; }
.plan .price-note { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-2); letter-spacing: .04em; }
.plan ul { list-style: none; margin: 26px 0 30px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan li { display: flex; gap: 12px; font-size: .95rem; color: var(--text); }
.plan li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--grad); -webkit-mask: var(--check) center/11px no-repeat; mask: var(--check) center/11px no-repeat; }
.plan.featured li::before { background: var(--gold); }
.plan li.inc { color: var(--muted); font-weight: 600; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.plan li.inc::before { display: none; }
.plan .btn { width: 100%; justify-content: center; }
@media (max-width: 920px) { .plans-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

.plan-note {
  margin-top: 30px; font-family: var(--font-mono); font-size: .8rem; color: var(--muted);
  letter-spacing: .02em; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; text-align: center;
}
.plan-note span { display: inline-flex; gap: 8px; align-items: center; }
.plan-note span::before { content: "—"; color: var(--accent-2); }

/* ---------- comparator ---------- */
.compare { margin-top: 80px; }
.compare-head { text-align: center; margin-bottom: 30px; }
.compare-head h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.compare-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ctable { width: 100%; border-collapse: collapse; }
.ctable th, .ctable td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.ctable thead th { background: var(--surface-2); font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; font-weight: 400; }
.ctable thead th:first-child { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; color: var(--muted); }
.ctable tbody th { font-weight: 600; font-size: .95rem; color: var(--text); width: 26%; background: color-mix(in oklab, var(--surface-2) 40%, transparent); }
.ctable td { font-size: .92rem; color: var(--muted); width: 24.6%; }
.ctable td.yes { color: var(--text); }
.ctable td.no { color: var(--muted-2); }
.ctable .col-elite { background: color-mix(in oklab, var(--gold) 7%, transparent); }
.ctable thead .col-elite { background: color-mix(in oklab, var(--gold) 16%, var(--surface-2)); color: var(--gold); }
.ctable tbody tr:hover td, .ctable tbody tr:hover th { background: color-mix(in oklab, var(--accent-2) 8%, var(--surface-2)); }
.ctable tbody tr:hover .col-elite { background: color-mix(in oklab, var(--gold) 14%, var(--surface-2)); }
.ck { color: var(--accent-2); font-weight: 700; }
@media (max-width: 820px) {
  .compare-wrap { overflow-x: auto; }
  .ctable { min-width: 680px; }
}

/* ---------- contact ---------- */
.contact { position: relative; overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 720px); gap: 60px; align-items: center; }
.contact h2 { font-family: var(--font-display); text-transform: uppercase; line-height: 0.92; font-size: clamp(2.6rem, 6vw, 5rem); margin: 18px 0 0; }
.contact .sub { color: var(--muted); font-size: 1.15rem; margin-top: 24px; max-width: 460px; }
.contact-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.contact-list { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; max-width: 480px; }
.contact-list .ci .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.contact-list .ci .v { font-size: 1.02rem; margin-top: 4px; }
.contact-card {
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 22px;
  overflow: hidden;
}
.contact-card .pic { aspect-ratio: 1; overflow: hidden; position: relative; background: var(--surface-2); }
.contact-card .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.contact-card .pic::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, var(--surface-solid), transparent 45%); }
.contact-card .info { padding: 24px 28px 28px; position: relative; margin-top: -50px; z-index: 2; }
.contact-card .info .nm { font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; }
.contact-card .info .role { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-top: 4px; }
.contact-card .socials { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.contact-card .socials a { font-size: .8rem; padding: 6px 13px; border: 1px solid var(--border); border-radius: 100px; color: var(--muted); transition: .2s; }
.contact-card .socials a:hover { color: var(--text); border-color: var(--text); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-list { grid-template-columns: 1fr 1fr; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 50px 0 60px; }
.footer-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .fm { font-family: var(--font-display); font-size: 2rem; letter-spacing: .04em; }
.footer .ft { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); letter-spacing: .06em; }
.footer .cp { font-family: var(--font-mono); font-size: .76rem; color: var(--muted-2); }

/* mic divider */
.mic-band { height: 240px; position: relative; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mic-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.mic-band::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--bg), color-mix(in oklab,var(--bg) 40%, transparent) 50%, var(--bg)); }
.mic-band .mt { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.mic-band .mt span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 4vw, 3rem); text-align: center; letter-spacing: .02em; }


/* ---------- Prensa: recap de eventos (galería editable) ---------- */
#prensa[hidden], #nav-prensa[hidden] { display: none !important; }
.about-recap { margin-top: 72px; }
.about-recap[hidden] { display: none; }
.recap-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.recap-head h3 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; margin: 10px 0 0; text-transform: uppercase; }
.recap-head p { color: var(--muted); max-width: 440px; margin: 0; }
.recap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.recap-item { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; }
.recap-item img, .recap-item video, .recap-item iframe { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0; background: #000; }
.recap-video, .recap-youtube { grid-column: span 2; }
.recap-video video, .recap-youtube iframe { aspect-ratio: 16 / 9; object-fit: contain; }
.recap-item a { display: block; overflow: hidden; }
.recap-item a img { transition: transform .5s ease; }
.recap-item a:hover img { transform: scale(1.04); }
.recap-item figcaption { padding: 12px 16px; font-size: .92rem; color: var(--muted); text-transform: capitalize; }
@media (max-width: 640px) { .recap-video, .recap-youtube { grid-column: auto; } .about-recap { margin-top: 48px; } }