/* ============================================================================
   MUSIDEO · SISTEMA DE MARCA
   ----------------------------------------------------------------------------
   Tokens compartidos por las webs públicas de la suite (Musideo, ClickTracker,
   MusicSync). Un único acento de marca; el resto es escala de grises.

   ── POR QUÉ EL PREFIJO --mus- ─────────────────────────────────────────────
   En este proyecto hay 98 tokens declarados dos veces con valores distintos
   (documentado en ui2-shell.css:12-33): --space-2 acaba valiendo 2px en vez de
   8px según qué hoja gane. Este fichero NO reutiliza esos nombres para no
   entrar en esa colisión, y puede cargarse junto a cualquiera de ellos.

   ── DIRECCIÓN ─────────────────────────────────────────────────────────────
   Editorial y sobria. Superficies planas, sin desenfoques ni degradados de
   marca, sin texto en degradado. El peso visual lo llevan la tipografía, el
   espacio y las capturas reales del producto.
   ========================================================================== */

:root {
  /* ── Color ────────────────────────────────────────────────────────────────
     Papel cálido en vez de blanco puro: sostiene mejor las capturas y evita
     el aspecto de plantilla. Tinta casi negra, nunca #000. */
  --mus-paper:        #FBFAF7;
  --mus-paper-2:      #F4F2EC;
  --mus-paper-3:      #EBE8DF;
  --mus-ink:          #14141C;
  --mus-ink-2:        #3D3D4A;
  --mus-ink-3:        #5E5E6C;
  --mus-line:         #E0DDD3;
  --mus-line-strong:  #C9C5B8;

  /* Un solo acento en toda la suite. Evoluciona el morado que ya existía
     (#5a55d2) hacia un tono más profundo, que aguanta mejor en texto. */
  --mus-accent:       #4B3FD1;
  --mus-accent-deep:  #372DA6;
  --mus-accent-soft:  #EEECFB;

  /* Superficie oscura para las bandas de contraste */
  --mus-dark:         #14141C;
  --mus-dark-2:       #1F1F2B;
  --mus-on-dark:      #F4F2EC;
  --mus-on-dark-2:    #A9A6B8;

  /* ── Tipografía ───────────────────────────────────────────────────────────
     Sora para titulares, Outfit para texto. Es la única voz tipográfica propia
     del ecosistema y ya estaba en uso; el problema no era la fuente sino su
     aplicación (antes: peso 800 en casi todo, sin jerarquía real). */
  --mus-display: 'Sora', 'Outfit', system-ui, sans-serif;
  --mus-text:    'Outfit', system-ui, -apple-system, sans-serif;

  --mus-t-hero:   clamp(2.6rem, 6.2vw, 5rem);
  --mus-t-h2:     clamp(2rem, 3.9vw, 3.1rem);
  --mus-t-h3:     clamp(1.3rem, 2vw, 1.6rem);
  --mus-t-lead:   clamp(1.06rem, 1.35vw, 1.25rem);
  --mus-t-body:   1.02rem;
  --mus-t-small:  .9rem;
  --mus-t-eyebrow:.76rem;

  /* ── Espaciado y forma ────────────────────────────────────────────────── */
  --mus-s1: 4px;   --mus-s2: 8px;   --mus-s3: 12px;  --mus-s4: 16px;
  --mus-s5: 24px;  --mus-s6: 32px;  --mus-s7: 48px;  --mus-s8: 64px;
  --mus-s9: 96px;  --mus-s10: 128px;

  --mus-r-sm: 6px;
  --mus-r:    10px;
  --mus-r-lg: 16px;

  /* Sombra mínima y fría. En esta dirección la profundidad la da el borde,
     no la sombra: por eso hay --mus-line y casi no hay elevación. */
  --mus-shadow:    0 1px 2px rgba(20, 20, 28, .05);
  --mus-shadow-lg: 0 18px 40px -24px rgba(20, 20, 28, .35);

  --mus-wrap: 1180px;
  --mus-wrap-narrow: 760px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body.mus {
  margin: 0;
  background: var(--mus-paper);
  color: var(--mus-ink);
  font-family: var(--mus-text);
  font-size: var(--mus-t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mus h1, .mus h2, .mus h3, .mus h4 {
  font-family: var(--mus-display);
  color: var(--mus-ink);
  margin: 0;
  letter-spacing: -.028em;
  line-height: 1.08;
  text-wrap: balance;
}
.mus h1 { font-size: var(--mus-t-hero); font-weight: 700; }
.mus h2 { font-size: var(--mus-t-h2);   font-weight: 700; }
.mus h3 { font-size: var(--mus-t-h3);   font-weight: 600; letter-spacing: -.018em; }
.mus p  { margin: 0; }

.mus a { color: inherit; text-decoration: none; }

/* Foco visible propio. La home actual no declara ningún :focus en más de
   20 enlaces porque todo su CSS va en atributos style=. */
.mus a:focus-visible,
.mus button:focus-visible,
.mus input:focus-visible,
.mus textarea:focus-visible,
.mus select:focus-visible {
  outline: 2px solid var(--mus-accent);
  outline-offset: 3px;
  border-radius: var(--mus-r-sm);
}

.mus img { max-width: 100%; height: auto; display: block; }

.mus-wrap { width: 100%; max-width: var(--mus-wrap); margin: 0 auto; padding: 0 var(--mus-s5); }
.mus-narrow { max-width: var(--mus-wrap-narrow); }

.mus-section { padding: var(--mus-s9) 0; }
@media (max-width: 700px) { .mus-section { padding: var(--mus-s8) 0; } }

/* ── Tipos de texto ─────────────────────────────────────────────────────── */
.mus-eyebrow {
  font-size: var(--mus-t-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mus-ink-3);
  display: block;
  margin-bottom: var(--mus-s4);
}
.mus-lead {
  font-size: var(--mus-t-lead);
  line-height: 1.6;
  color: var(--mus-ink-2);
  max-width: 62ch;
}
.mus-small { font-size: var(--mus-t-small); color: var(--mus-ink-3); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.mus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mus-s2);
  height: 48px;
  padding: 0 var(--mus-s6);
  border-radius: var(--mus-r);
  border: 1px solid transparent;
  font-family: var(--mus-text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Estas reglas van prefijadas con `.mus ` a propósito: `.mus a { color: inherit }`
   de arriba tiene especificidad (0,1,1) y ganaría a un simple `.mus-btn-primary`
   (0,1,0), dejando el texto de los botones en tinta sobre el acento (2,56:1).
   Con `.mus .mus-btn-primary` (0,2,0) el componente manda. */
.mus .mus-btn-primary { background: var(--mus-accent); color: #fff; }
.mus .mus-btn-primary:hover { background: var(--mus-accent-deep); }
.mus .mus-btn-secondary {
  background: transparent;
  color: var(--mus-ink);
  border-color: var(--mus-line-strong);
}
.mus .mus-btn-secondary:hover { border-color: var(--mus-ink); }
.mus .mus-btn-on-dark { background: var(--mus-on-dark); color: var(--mus-ink); }
.mus .mus-btn-on-dark:hover { background: #fff; }
.mus .mus-btn-ghost-dark {
  background: transparent; color: var(--mus-on-dark);
  border-color: rgba(244, 242, 236, .3);
}
.mus .mus-btn-ghost-dark:hover { border-color: var(--mus-on-dark); }

/* Enlace con flecha, usado como acción terciaria */
.mus .mus-link {
  display: inline-flex; align-items: center; gap: var(--mus-s2);
  font-weight: 600; color: var(--mus-accent);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.mus .mus-link:hover { border-bottom-color: var(--mus-accent); }

/* ── Tarjetas y superficies ─────────────────────────────────────────────── */
.mus-card {
  background: #fff;
  border: 1px solid var(--mus-line);
  border-radius: var(--mus-r-lg);
  padding: var(--mus-s6);
}
.mus-band-dark { background: var(--mus-dark); color: var(--mus-on-dark); }
.mus-band-dark h2, .mus-band-dark h3 { color: var(--mus-on-dark); }
.mus-band-dark .mus-lead { color: var(--mus-on-dark-2); }
.mus-band-dark .mus-eyebrow { color: var(--mus-on-dark-2); }

.mus-rule { height: 1px; background: var(--mus-line); border: 0; margin: 0; }

/* ── Marco de captura ────────────────────────────────────────────────────
   Las capturas son la prueba del producto: se muestran grandes y legibles,
   nunca como fondo decorativo al 20 % de opacidad. */
.mus-shot {
  border: 1px solid var(--mus-line);
  border-radius: var(--mus-r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--mus-shadow-lg);
}
.mus-shot img { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .mus *, .mus *::before, .mus *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}