/* MyMusicSoul — logo
   Un solo dibujo. Lo que cambia entre pantallas es el font-size, nada más.
   Usa --live, --soul y --ink, que la app ya define. Lo nuevo es --soul-ink.

   La fuente va recortada a las 9 letras del nombre (1.2 KB) e incrustada aquí:
   no agrega ninguna petición de red y no hay parpadeo al cargar.
   OJO: sólo contiene M y u s i c S o l. Si cambias el texto del logo,
   hay que volver a generar el recorte. */

@font-face {
  font-family: 'MMS Brand';
  src: url(data:font/woff2;base64,d09GMgABAAAAAAS0AA8AAAAACQwAAARbAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbgQIcKgZgP1NUQVQqAHQRCAqGMIUjATYCJAMwCxoABCAFhCQHIBteB8iuBmxjNOpISBuLC9vojSGeUQnfm1HpM8djBNAaa3YPcU14SKJdNNGgi2dCIpIC0bJ5JMOb+l/+8Z67bz8otiADcXqplLtMDtbmPS42s4aoZ0Jb6qSwkMZ0MPZuah6c626RAgPevgmyRCL1n7hDl0H0qMJVFAZ45WfimPEiacNZh9B0wBOJDoqOf6DZg/0N7LO5OZro8QV/Ua/QAGbCp1cUQA6AiCECIkICIZDFmCM2lItOBm211lwLGg78GC0rrcZaEMDB4NjtiDhGHlDFligxDCFikJxEOIgEkIrmSLGO704SxTBhU+YwQY97ekrUiXfAQjwg0gFMklXCErhSw4LBjxiZBDiCJ7vk7/9rUnYRDQhAeGNvAA0EhIgjUIJADbbWKW8mAHEkKGVvIkhACWG0j8unf1GegIvxoaFnaGJhZfdf6Pid5qR1SxbMmTZlPITLF9B/yUHm2LsCZIPfhHFsyhkplxnCkPfYBQNGnJVnLtOVxkiJSOWQK2SMpIhkNqlMwhTc4jigFPojcZ3g8qtndU8b7mWSiFgUkWVtedSFlQn7Gy2jfcL8+2E4QQFHGz8XtyInZD+yGuFA+lo3NmbTUnyI1iTP1FDC1PFIGZNAsVLaykdjtS8ceGZ1D55eUikNy5+rOqy+s5ZHRnv/yYX93RKkFOv3jqjGdAtJkpwPi0QdwnTZWxWgo3m/K7RvXxz4iUMfuL7F7pzA+7+9QNHn+nutv17UlvnyXShmwXNvB4+QqmjtQUk8xjcoONDFUkf4f7wcJtd2uMb5+3tn1tpHRTU7BhZH6w7KDO9nzSPDetHWz+FgQm7s9EnwF4fkt7rC9gpLr6CGBNk3S5xeKjysxME3dXZY6XPTrDO9ZZiwk7TjmlumwcPLhva9TjGwBUKPZ8fgvNJqBipePl6czkWWaiLqPKMiQyVzLXovIg7/O2Bf7ZAk/bTQKRQDnV/l89svngtfhj4OkVWx6Uk1EVJLdYucpiVdVb1V5dxuTj/aObY+Gah0zylnuxwf815d9zInT7/okH+9P7oDFC8lu9B1XisrqetRrFeYsY44LNzpmgvaOw0/G2s+G6pfGeFXGHmf9zxYGymQRjIH4kA/uGU6AojweslckycX+SqOFj4AT8uGv9YeI/3/RxJ9iXzwBZQCAZ6mOfkGwF9+CSDcp8lJRqGSzCEVy6BaCWyR4BwJobEJtlFguS6ktCjQ0YWFgNWSYcXDrMWVYCDTXmiUIgE4gYJETN0jMeI+kQS+fpE4+xwkEZpViaKs27MQkBN2dXyNmw6amNqZ6+noWlJwZB949CU3AK3iJFM1DUobZm5i6VkYmKB4QF/XmLl1gJWlrom5BUabK/csTYUnxM7zlemBW63U2RSZGHX4Sg3Hb9FTMzZQM1e2R3bMrml3Yauy9RtPZoq+084pE0NNLrbsvc29hHoQntsveoXJiiewj0khfd9ad0D3TGYUO09ux9CPFrGhuaL+L+cCAA==) format('woff2');
  font-weight: 700;
  font-display: block;
}

:root { --soul-ink: #5B45B8; }

.mms-logo {
  display: inline-flex;
  align-items: center;
  gap: .30em;                  /* todo en em: el font-size manda */
  font-family: 'MMS Brand', 'Space Grotesk', Outfit, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.mms-logo__wave {
  height: 1.05em;              /* el ancho sale solo del viewBox: 1.575em */
  width: auto;
  flex: none;
  display: block;
}

.mms-logo__word { white-space: nowrap; }

/* Respaldo: morado sólido legible si el navegador no recorta degradados sobre texto */
.mms-logo__word b { font-weight: inherit; color: var(--soul-ink); }

/* El halo de alma: una sombra cerrada que da el borde luminoso
   y una abierta que da el aura. En em, así que escala con el logo. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .mms-logo__word b {
    background-image: linear-gradient(100deg, var(--live) 0%, var(--soul) 72%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter:
      drop-shadow(0 0 .14em rgba(122, 99, 214, .55))
      drop-shadow(0 0 .50em rgba(122, 99, 214, .38));
  }
}

/* Tamaños. El logo completo mide 8.19 x el font-size.
   40px -> 328px · 26px -> 213px · 22px -> 180px · 20px -> 164px · 18px -> 147px */
.mms-logo            { font-size: 22px; }   /* con sesión iniciada */
.mms-logo--hero      { font-size: 40px; }   /* home */

@media (max-width: 520px) {
  .mms-logo--hero { font-size: 26px; }
  .mms-logo       { font-size: 20px; }
}
@media (max-width: 420px) {
  .mms-logo--hero { font-size: 22px; }
  .mms-logo       { font-size: 18px; }
}

/* Área táctil en móvil: el logo es el botón de volver al inicio y debe
   alcanzar los 44px que piden iOS y Android, sin empujar el layout. */
@media (max-width: 520px) and (pointer: coarse) {
  .mms-logo { position: relative; }
  .mms-logo::after {
    content: ''; position: absolute; inset: -12px -8px; 
  }
}

/* Sobre fondo oscuro hay que cambiar los tres colores de marca:
   el teal #1F6F6B da 2.56:1 sobre --ink y es ilegible. */
.mms-logo--on-dark {
  --live: #4FD1C7;
  --soul: #A896EE;
  --soul-ink: #C3B5F5;
  color: var(--paper);
}
.mms-logo--on-dark .mms-logo__word b {
  filter:
    drop-shadow(0 0 .14em rgba(168, 150, 238, .55))
    drop-shadow(0 0 .50em rgba(168, 150, 238, .38));
}

/* Opcional: una sola entrada al cargar la home. Nunca en bucle. */
@media (prefers-reduced-motion: no-preference) {
  .mms-logo--hero .mms-logo__wave { animation: mms-in 1.1s ease-out 1; }
  @keyframes mms-in {
    0%   { opacity: 0; transform: scaleY(.3); }
    70%  { opacity: 1; transform: scaleY(1.06); }
    100% { opacity: 1; transform: scaleY(1); }
  }
}