/*
  ============================================================
  musica.css — El Mundo de Manu / Música y Sonido
  ============================================================
  Estilos propios de la sección de Música. Heredan variables
  globales de style.css y añaden la identidad de este mundo.

  Dirección estética: vibrante, rítmica, nocturna.
  Paleta púrpura-magenta (#B14EFF) que evoca luces de concierto,
  energía y la dimensión emocional de la música. Verifiqué que
  no choca con ningún mundo existente: el tecnología es índigo
  (#6C63FF, más azul) y este es claramente más magenta/violeta,
  con un acento rosa neón que refuerza la vibra de escenario.

  Prefijo: ms- (música/sonido)

  Estructura:
  01. Variables locales
  02. Breadcrumb
  03. Hero (canvas visualizer)
  04. Por qué nos mueve
  05. Géneros del mundo
  06. Guías de escucha
  07. Beneficios
  08. Herramientas
  09. Nota cultural
  10. CTA final
  11. Botones propios
  12. Responsive

  Autor: Carlos Manuel Turizo Hernández
  Versión: 1.0.0
  ============================================================
*/


/* ============================================================
  01. VARIABLES LOCALES
  Púrpura-magenta como color principal, con un rosa neón de
  acento que aparece en las ondas y detalles para reforzar
  la energía de las luces de escenario.
  ============================================================ */
.page-musica {
  --ms-purple:       #B14EFF;
  --ms-purple-light: #D89BFF;
  --ms-purple-deep:  #8B2FD6;
  --ms-pink:         #FF5FD2;
  --ms-dim:          rgba(177, 78, 255, 0.10);
  --ms-glow:         rgba(177, 78, 255, 0.30);
  --ms-night-bg:     #0B0712;   /* Fondo oscuro con violeta nocturno */
  --font-genre:      'Sora', sans-serif;
}


/* ============================================================
  02. BREADCRUMB
  ============================================================ */
.breadcrumb {
  padding: calc(var(--space-4) + 70px) 0 var(--space-4);
  border-bottom: 1px solid rgba(177, 78, 255, 0.12);
  background: var(--color-bg);
}
.breadcrumb__nav { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.breadcrumb__link:hover { color: var(--ms-purple); }
.breadcrumb__sep { font-size: var(--text-sm); color: var(--color-text-muted); opacity: 0.4; }
.breadcrumb__current { font-size: var(--text-sm); color: var(--ms-purple); font-weight: 500; }

.ms-tag {
  background: var(--ms-dim);
  border-color: rgba(177, 78, 255, 0.22);
  color: var(--ms-purple-light);
}


/* ============================================================
  03. HERO DE MÚSICA
  El canvas es un visualizer de audio — barras de frecuencia
  que oscilan al ritmo de una onda simulada. El fondo nocturno
  púrpura evoca un concierto. El título lleva gradiente magenta.
  ============================================================ */
.ms-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-32) 0 var(--space-20);
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(177, 78, 255, 0.07) 0%, transparent 55%),
    var(--ms-night-bg);
}

.ms-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

.ms-hero__light {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  animation: msLightPulse 7s ease-in-out infinite;
}
.ms-hero__light--1 {
  width: 540px; height: 340px;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(177, 78, 255, 0.16) 0%, transparent 70%);
}
.ms-hero__light--2 {
  width: 280px; height: 280px;
  bottom: 10%; right: 6%;
  background: radial-gradient(circle, rgba(255, 95, 210, 0.10) 0%, transparent 70%);
  animation-delay: 2.5s;
  animation-name: msLightPulseSimple;
}
.ms-hero__light--3 {
  width: 240px; height: 240px;
  top: 22%; left: 4%;
  background: radial-gradient(circle, rgba(139, 47, 214, 0.09) 0%, transparent 70%);
  animation-delay: 4.5s;
  animation-name: msLightPulseSimple;
}
@keyframes msLightPulse {
  0%, 100% { opacity: 1;    transform: scale(1) translateX(-50%); }
  50%       { opacity: 0.55; transform: scale(1.12) translateX(-50%); }
}
@keyframes msLightPulseSimple {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.5;  transform: scale(1.15); }
}

.ms-hero__symbol-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.035;
  animation: msSymbolFloat 8s ease-in-out infinite;
}
.ms-hero__symbol { width: 340px; height: 340px; color: var(--ms-purple-light); }
/* La nota musical flota suavemente */
@keyframes msSymbolFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
  50%       { transform: translate(-50%, -50%) translateY(-12px) rotate(3deg); }
}

.ms-hero__inner { position: relative; z-index: 1; display: flex; justify-content: center; }

.ms-hero__content {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-6);
}

.ms-hero__tag-row { display: flex; justify-content: center; }

.ms-hero__title {
  font-size: clamp(3.2rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: transparent;
  background: linear-gradient(135deg, var(--ms-purple-light) 0%, var(--ms-purple) 45%, var(--ms-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.08em;
}
.ms-hero__title-and {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.7;
  margin: 0 0.1em;
}

.ms-hero__phrase {
  max-width: 560px;
  padding: var(--space-7) var(--space-9);
  border: 1px solid rgba(177, 78, 255, 0.18);
  border-left: 3px solid var(--ms-purple);
  border-radius: var(--radius-xl);
  background: rgba(177, 78, 255, 0.04);
  position: relative;
  text-align: left;
}
.ms-hero__phrase::before {
  content: '"';
  position: absolute;
  top: -14px; left: 20px;
  font-size: 6rem;
  color: var(--ms-purple);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
}
.ms-hero__phrase-text {
  font-weight: 300;
  font-size: clamp(var(--text-base), 2vw, var(--text-md));
  line-height: 1.7;
  color: var(--color-text-primary);
  font-style: italic;
}
.ms-hero__phrase-ref {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ms-purple);
  font-style: normal;
}

.ms-hero__desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 520px;
}

.ms-hero__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

.ms-hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: msScrollBounce 2.5s ease-in-out infinite;
  z-index: 1;
}
.ms-hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--ms-purple), transparent);
  order: -1;
}
@keyframes msScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ============================================================
  04. POR QUÉ NOS MUEVE
  ============================================================ */
.ms-why {
  padding: var(--space-24) 0;
  background: var(--color-surface);
  border-top: 1px solid rgba(177, 78, 255, 0.10);
  border-bottom: 1px solid rgba(177, 78, 255, 0.10);
}
.ms-why__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .ms-why__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-16); }
}
.ms-why__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-4) 0;
  line-height: 1.15;
}
.ms-why__desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.ms-why__desc:last-child { margin-bottom: 0; }

.ms-why__card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(135deg, rgba(177, 78, 255, 0.08) 0%, var(--color-bg) 100%);
  border: 1px solid rgba(177, 78, 255, 0.20);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ms-why__card-icon { font-size: 2.25rem; line-height: 1; }
.ms-why__card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}
.ms-why__card-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-5);
}
.ms-why__card-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--text-sm); line-height: 1.7;
  color: var(--color-text-secondary);
}
.ms-why__card-bullet {
  color: var(--ms-pink);
  flex-shrink: 0; margin-top: 1px;
  font-size: var(--text-base);
}
.ms-why__card-item strong { color: var(--color-text-primary); }
.ms-why__card-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 110%, var(--ms-dim) 0%, transparent 100%);
  pointer-events: none;
}


/* ============================================================
  05. GÉNEROS DEL MUNDO
  Grid de 6 tarjetas. El elemento diferenciador: cada tarjeta
  tiene una mini-onda de sonido (5 barras CSS) que se anima
  en hover, evocando un ecualizador. Titulares con fuente Sora.
  ============================================================ */
.ms-genres { padding: var(--space-24) 0; }

.ms-genres__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .ms-genres__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-genres__grid { grid-template-columns: repeat(3, 1fr); } }

.ms-genre-card {
  position: relative;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  transition: transform var(--transition-slow), border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.ms-genre-card:hover {
  transform: translateY(-6px);
  border-color: rgba(177, 78, 255, 0.38);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 24px var(--ms-dim);
}

/* Mini ecualizador de 5 barras */
.ms-genre-card__wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
  margin-bottom: var(--space-2);
}
.ms-genre-card__wave span {
  width: 5px;
  background: linear-gradient(to top, var(--ms-purple), var(--ms-pink));
  border-radius: var(--radius-full);
  height: 40%;
  opacity: 0.5;
  transition: opacity var(--transition-base);
}
/* Alturas base distintas para cada barra */
.ms-genre-card__wave span:nth-child(1) { height: 45%; }
.ms-genre-card__wave span:nth-child(2) { height: 80%; }
.ms-genre-card__wave span:nth-child(3) { height: 30%; }
.ms-genre-card__wave span:nth-child(4) { height: 65%; }
.ms-genre-card__wave span:nth-child(5) { height: 50%; }

/* En hover, las barras "bailan" con animación escalonada */
.ms-genre-card:hover .ms-genre-card__wave span {
  opacity: 1;
  animation: msEqualizer 0.9s ease-in-out infinite;
}
.ms-genre-card:hover .ms-genre-card__wave span:nth-child(1) { animation-delay: 0s; }
.ms-genre-card:hover .ms-genre-card__wave span:nth-child(2) { animation-delay: 0.15s; }
.ms-genre-card:hover .ms-genre-card__wave span:nth-child(3) { animation-delay: 0.3s; }
.ms-genre-card:hover .ms-genre-card__wave span:nth-child(4) { animation-delay: 0.45s; }
.ms-genre-card:hover .ms-genre-card__wave span:nth-child(5) { animation-delay: 0.1s; }
@keyframes msEqualizer {
  0%, 100% { transform: scaleY(0.5); }
  50%       { transform: scaleY(1.4); }
}

.ms-genre-card__title {
  font-family: var(--font-genre);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.ms-genre-card__origin {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-purple-light);
}
.ms-genre-card__desc {
  font-size: var(--text-sm);
  line-height: 1.78;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}


/* ============================================================
  06. GUÍAS DE ESCUCHA
  Mismo patrón de artículos: featured + 2 normales.
  ============================================================ */
.ms-guides {
  padding: var(--space-24) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.ms-guides__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .ms-guides__grid { grid-template-columns: repeat(2, 1fr); }
  .ms-guide-card--featured { grid-column: span 2; }
}

.ms-guide-card {
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: transform var(--transition-slow), border-color var(--transition-base);
}
.ms-guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(177, 78, 255, 0.30);
}
.ms-guide-card--featured { border-top: 3px solid var(--ms-purple); }

.ms-guide-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ms-guide-card__tag {
  padding: var(--space-1) var(--space-3);
  background: var(--ms-dim);
  border: 1px solid rgba(177, 78, 255, 0.22);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-purple-light);
}
.ms-guide-card__read { font-size: var(--text-xs); color: var(--color-text-muted); }

.ms-guide-card__title {
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-xl));
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.ms-guide-card__body {
  font-size: var(--text-sm);
  line-height: 1.82;
  color: var(--color-text-secondary);
}

.ms-guide-card__inset {
  padding: var(--space-6);
  background: var(--ms-dim);
  border: 1px solid rgba(177, 78, 255, 0.18);
  border-radius: var(--radius-lg);
}
.ms-guide-card__inset-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ms-purple-light);
  margin-bottom: var(--space-4);
}
.ms-guide-card__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ms-guide-card__list li {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  padding-left: var(--space-5);
  position: relative;
}
.ms-guide-card__list li::before {
  content: '♪';
  position: absolute; left: 0; top: 1px;
  color: var(--ms-pink);
  font-weight: 700;
  font-size: var(--text-sm);
}
.ms-guide-card__list li strong { color: var(--color-text-primary); }

.ms-guide-card__highlight {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid var(--ms-pink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 95, 210, 0.05);
  font-style: italic;
}


/* ============================================================
  07. BENEFICIOS
  Grid de 4 tarjetas centradas con ícono grande arriba.
  Layout distinto a las demás secciones para variar el ritmo.
  ============================================================ */
.ms-benefits { padding: var(--space-24) 0; }

.ms-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px)  { .ms-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-benefits__grid { grid-template-columns: repeat(4, 1fr); } }

.ms-benefit-card {
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transition: transform var(--transition-slow), border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.ms-benefit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(177, 78, 255, 0.35);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 0 20px var(--ms-dim);
}
.ms-benefit-card__icon {
  font-size: 2.5rem;
  line-height: 1;
  width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ms-dim);
  border: 1px solid rgba(177, 78, 255, 0.18);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.ms-benefit-card__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text-primary);
}
.ms-benefit-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}


/* ============================================================
  08. HERRAMIENTAS
  Grid de 3 columnas con tarjetas horizontales (ícono al lado).
  ============================================================ */
.ms-tools {
  padding: var(--space-24) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.ms-tools__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .ms-tools__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-tools__grid { grid-template-columns: repeat(3, 1fr); } }

.ms-tool-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-slow), border-color var(--transition-base);
}
.ms-tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(177, 78, 255, 0.30);
}
.ms-tool-card__icon {
  font-size: 2rem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.ms-tool-card__info { flex: 1; }
.ms-tool-card__type {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-purple-light);
  margin-bottom: var(--space-1);
}
.ms-tool-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.ms-tool-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}


/* ============================================================
  09. NOTA CULTURAL
  ============================================================ */
.ms-note { padding: var(--space-10) 0; border-top: 1px solid var(--color-border); }
.ms-note__inner {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6) var(--space-8);
  background: rgba(177, 78, 255, 0.04);
  border: 1px solid rgba(177, 78, 255, 0.14);
  border-radius: var(--radius-xl);
}
.ms-note__icon { color: var(--ms-purple); flex-shrink: 0; opacity: 0.8; margin-top: 2px; }
.ms-note__text {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-muted);
}
.ms-note__text strong { color: var(--ms-purple-light); }


/* ============================================================
  10. CTA FINAL
  ============================================================ */
.ms-cta { padding: var(--space-24) 0; }
.ms-cta__inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-14) var(--space-10);
  background: var(--color-surface);
  border: 1px solid rgba(177, 78, 255, 0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.ms-cta__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(177, 78, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
}
.ms-cta__icon {
  font-size: 3rem;
  position: relative;
  animation: msIconBounce 2s ease-in-out infinite;
}
/* La nota rebota con ritmo, como siguiendo un beat */
@keyframes msIconBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-10px) rotate(5deg); }
}
.ms-cta__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-primary);
  position: relative;
}
.ms-cta__highlight {
  color: transparent;
  background: linear-gradient(135deg, var(--ms-purple-light), var(--ms-pink));
  -webkit-background-clip: text;
  background-clip: text;
}
.ms-cta__desc {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 500px;
  position: relative;
}
.ms-cta__actions {
  display: flex; gap: var(--space-4);
  flex-wrap: wrap; justify-content: center;
  position: relative;
}


/* ============================================================
  11. BOTONES PROPIOS
  ============================================================ */
.ms-btn--primary {
  background: var(--ms-purple);
  color: #1A0626;
  font-weight: 700;
  box-shadow: 0 4px 20px var(--ms-glow);
}
.ms-btn--primary:hover {
  background: var(--ms-purple-light);
  box-shadow: 0 6px 28px rgba(177, 78, 255, 0.45);
  transform: translateY(-2px);
  color: #1A0626;
}
.ms-btn--ghost {
  border-color: rgba(177, 78, 255, 0.28);
  color: var(--ms-purple-light);
}
.ms-btn--ghost:hover {
  border-color: var(--ms-purple);
  background: var(--ms-dim);
  color: var(--ms-purple-light);
}


/* ============================================================
  12. RESPONSIVE
  ============================================================ */
@media (max-width: 640px) {
  .ms-hero { padding: var(--space-20) 0 var(--space-16); min-height: auto; }
  .ms-hero__title { font-size: clamp(2.6rem, 15vw, 4.5rem); }
  .ms-hero__phrase { padding: var(--space-6) var(--space-5); }
  .ms-hero__phrase::before { font-size: 4rem; }
  .ms-hero__actions { flex-direction: column; align-items: center; width: 100%; }
  .ms-hero__actions .btn { width: 100%; justify-content: center; }

  .ms-cta__inner { padding: var(--space-10) var(--space-6); }
  .ms-cta__actions { flex-direction: column; align-items: center; width: 100%; }
  .ms-cta__actions .btn { width: 100%; justify-content: center; }

  .ms-note__inner { flex-direction: column; padding: var(--space-5) var(--space-6); }
}

@media (max-width: 480px) {
  .ms-why__card { padding: var(--space-7) var(--space-6); }
  .ms-genre-card { padding: var(--space-6); }
  .ms-guide-card { padding: var(--space-6); }
  .ms-guide-card__inset { padding: var(--space-5); }
}

/* Footer link activo */
.footer__link--active { color: var(--ms-purple-light); }