/* ==========================================================================
   LUENA-V2.CSS · Sistema visual nuevo de luenamusic.com
   Se carga DESPUÉS de styles.css y menu-fix.css (ver includes/head.php), así
   que todo lo que hay aquí manda sobre lo antiguo sin tener que borrarlo.
   Clases nuevas con prefijo "lm-" para no chocar con las de otras páginas.
   ========================================================================== */

/* ================== 0. TIPOGRAFÍA (alojada en la web, v2) ==================
   Archivo variable (peso 100-900 y anchura 62-125 %), en dos trozos: latín básico y
   latín extendido. El navegador solo baja el que necesita. Licencia OFL (assets/fonts/archivo/OFL.txt). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;             /* Se ve el texto enseguida con la letra del sistema y luego cambia */
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../assets/fonts/archivo/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations'),
       url('../assets/fonts/archivo/archivo-latin-ext-wdth-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../assets/fonts/archivo/archivo-latin-wdth-normal.woff2') format('woff2-variations'),
       url('../assets/fonts/archivo/archivo-latin-wdth-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================== 1. TOKENS (colores, tipografía, medidas) ================== */
:root {
  /* ----- Colores de marca (instrucciones del proyecto) ----- */
  --lm-grafito: #0B0E13;          /* Fondo oscuro principal: menú, cabecera, pie */
  --lm-grafito-2: #151A22;        /* Paneles elevados sobre fondo oscuro */
  --lm-grafito-3: #202733;        /* Bordes y separadores sobre fondo oscuro */
  --lm-oro: #D4AF37;              /* Dorado de marca: botón principal y detalles */
  --lm-oro-claro: #E6C760;        /* Dorado en hover */
  --lm-teal: #00C2C7;             /* Teal de marca: foco de teclado y elemento activo */
  /* ----- Colores sacados del mundo de la guitarra ----- */
  --lm-palisandro: #2A1C15;       /* Madera del diapasón */
  --lm-palisandro-2: #3A281E;     /* Veta clara del diapasón */
  --lm-niquel: #A9B2BC;           /* Trastes metálicos y texto secundario sobre oscuro */
  --lm-hueso: #EFE7DA;            /* Cejuela, incrustaciones y recuadros (como las tablas de tus PDF) */
  --lm-bronce: #7A5C2E;           /* Títulos y enlaces sobre fondo claro (color de tus PDF) */
  /* ----- Fondos y textos claros ----- */
  --lm-papel: #FBFAF7;            /* Fondo de lectura */
  --lm-blanco: #FFFFFF;           /* Blanco puro para tarjetas sobre papel */
  --lm-tinta: #161A20;            /* Texto principal sobre claro */
  --lm-tinta-2: #4A515C;          /* Texto secundario sobre claro (contraste AA) */
  --lm-linea: #E2DBCF;            /* Filetes y bordes sobre claro */
  /* ----- Colores didácticos (mismo código que la guía de tríadas) ----- */
  --lm-r: #D93F45;                /* R = raíz (rojo) */
  --lm-3: #2F6FE0;                /* 3 = tercera (azul) */
  --lm-5: #23955A;                /* 5 = quinta (verde) */
  --lm-pm: #6B7685;               /* Palm mute (gris) en las cuadrículas de ritmo */
  /* ----- Tipografía ----- */
  --lm-fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Una sola familia, dos anchuras */
  --lm-estrecha: 72%;             /* Anchura condensada para titulares (eje wdth de Archivo) */
  /* Escala tipográfica (relación ~1,25) */
  --lm-t-xs: .8125rem;            /* 13 px: pies de foto y notas */
  --lm-t-s: .9375rem;             /* 15 px: menús y etiquetas */
  --lm-t-m: 1.0625rem;            /* 17 px: texto de lectura */
  --lm-t-l: 1.3125rem;            /* 21 px: entradillas */
  --lm-t-xl: clamp(1.6rem, 3.2vw, 2.25rem);  /* Títulos de sección */
  --lm-t-xxl: clamp(2.5rem, 6.4vw, 4.6rem);  /* Titular de portada */
  /* ----- Medidas ----- */
  --nav-h: 64px;                  /* Altura del menú (sobrescribe la de styles.css) */
  --lm-ancho: 1200px;             /* Ancho máximo del contenido */
  --lm-radio-s: 6px;              /* Radio de botones y controles */
  --lm-radio-m: 10px;             /* Radio de paneles grandes */
  --lm-sombra: 0 18px 40px rgba(11, 14, 19, .18); /* Sombra de paneles flotantes */
}

/* ================== 2. BASE DEL DOCUMENTO ================== */
body {
  font-family: var(--lm-fuente);  /* Archivo en toda la web */
  font-size: var(--lm-t-m);       /* 17 px de base para leer cómodo */
  line-height: 1.6;               /* Interlineado de lectura */
  color: var(--lm-tinta);         /* Texto oscuro */
  background: var(--lm-papel);    /* Fondo papel */
  -webkit-font-smoothing: antialiased; /* Texto más fino en Mac */
  text-rendering: optimizeLegibility;  /* Ligaduras y kerning */
}
/* Foco visible y coherente para quien navega con teclado */
:focus-visible {
  outline: 3px solid var(--lm-teal); /* Anillo teal de marca */
  outline-offset: 2px;            /* Separado del elemento */
}
/* Contenedor común (mismo nombre que el antiguo para no romper páginas) */
.container {
  max-width: var(--lm-ancho);     /* 1200 px de ancho máximo */
  padding: 0 20px;                /* Margen lateral cómodo en móvil */
}
/* Enlace "Saltar al contenido" con los colores nuevos */
.skip-link:focus {
  background: var(--lm-oro);      /* Fondo dorado */
  color: var(--lm-grafito);       /* Texto oscuro */
  outline: none;                  /* Sin doble contorno */
}

/* ================== 3. BOTONES Y ENLACES ================== */
.lm-btn {
  display: inline-flex;           /* Icono y texto en línea */
  align-items: center;            /* Centrado vertical */
  justify-content: center;        /* Centrado horizontal */
  gap: .5rem;                     /* Espacio entre icono y texto */
  min-height: 46px;               /* Zona táctil cómoda */
  padding: .7rem 1.25rem;         /* Relleno del botón */
  border-radius: var(--lm-radio-s); /* Esquinas discretas */
  border: 1.5px solid transparent; /* Borde reservado para variantes */
  font: 700 var(--lm-t-s)/1.1 var(--lm-fuente); /* Peso 700, 15 px */
  text-decoration: none;          /* Sin subrayado */
  cursor: pointer;                /* Mano al pasar */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; /* Cambio suave de color */
}
/* Principal: dorado sobre cualquier fondo */
.lm-btn--oro {
  background: var(--lm-oro);      /* Fondo dorado */
  color: var(--lm-grafito);       /* Texto grafito (contraste 9:1) */
}
.lm-btn--oro:hover {
  background: var(--lm-oro-claro); /* Dorado más claro al pasar */
}
/* Secundario sobre fondo oscuro: solo contorno */
.lm-btn--linea {
  border-color: rgba(239, 231, 218, .45); /* Contorno hueso */
  color: var(--lm-hueso);         /* Texto hueso */
  background: transparent;        /* Sin fondo */
}
.lm-btn--linea:hover {
  border-color: var(--lm-hueso);  /* Contorno pleno al pasar */
  background: rgba(239, 231, 218, .06); /* Velo muy suave */
}
/* Secundario sobre fondo claro */
.lm-btn--tinta {
  border-color: var(--lm-tinta);  /* Contorno oscuro */
  color: var(--lm-tinta);         /* Texto oscuro */
  background: transparent;        /* Sin fondo */
}
.lm-btn--tinta:hover {
  background: var(--lm-tinta);    /* Se rellena al pasar */
  color: var(--lm-papel);         /* Y el texto se invierte */
}
/* Enlace de texto con flecha implícita en el subrayado */
.lm-enlace {
  color: var(--lm-bronce);        /* Bronce sobre claro */
  font-weight: 700;               /* Negrita */
  text-decoration: underline;     /* Subrayado visible: es un enlace */
  text-underline-offset: 4px;     /* Separado del texto */
  text-decoration-thickness: 1.5px; /* Algo más grueso que el de serie */
}
.lm-enlace:hover {
  color: var(--lm-tinta);         /* Oscurece al pasar */
}

/* ================== 4. MENÚ PRINCIPAL ================== */
.top-nav.lm-nav {
  background: var(--lm-grafito);  /* Fondo sólido: se acabó el morado transparente */
  border-bottom: 1px solid var(--lm-grafito-3); /* Filete inferior */
}
.top-nav.lm-nav::after {
  display: none;                  /* Quita la línea blanca antigua */
}
.lm-nav .nav-container {
  height: var(--nav-h);           /* 64 px */
  padding: 0 20px;                /* Igual que el contenedor */
  gap: 24px;                      /* Aire entre marca y menú */
}
/* Marca: logo + nombre */
.lm-brand {
  display: inline-flex;           /* Logo y texto en línea */
  align-items: center;            /* Centrados */
  gap: .6rem;                     /* Separación */
  text-decoration: none;          /* Sin subrayado */
  color: var(--lm-hueso);         /* Texto hueso */
  flex-shrink: 0;                 /* No se encoge */
}
.lm-brand .brand-logo {
  width: 40px;                    /* Tamaño real de pantalla */
  height: 40px;                   /* Cuadrado */
  border-radius: 50%;             /* El logo es redondo */
}
.lm-brand__nombre {
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensada, como los titulares */
  font-size: 1.25rem;             /* 20 px */
  letter-spacing: .01em;          /* Un pelo de aire */
}
/* Lista de enlaces */
.lm-nav .nav-menu {
  gap: 4px;                       /* Enlaces juntos; el padding hace el resto */
  margin-left: auto;              /* Empuja el menú a la derecha */
}
.lm-nav .nav-link {
  color: var(--lm-niquel);        /* Gris níquel en reposo */
  font-weight: 600;               /* Seminegrita */
  font-size: var(--lm-t-s);       /* 15 px */
  padding: 10px 12px;             /* Zona clicable */
  border-radius: var(--lm-radio-s); /* Esquinas discretas */
  opacity: 1;                     /* Anula la opacidad antigua */
  background: transparent;        /* Sin fondo */
  box-shadow: none;               /* Sin subrayado antiguo */
}
.lm-nav .nav-link:hover,
.lm-nav .nav-item:focus-within > .nav-link {
  color: var(--lm-hueso);         /* Se ilumina al pasar */
  background: rgba(255, 255, 255, .05); /* Velo mínimo */
}
.lm-nav .nav-link.is-active {
  color: var(--lm-hueso);         /* Página actual en claro */
  background: transparent;        /* Sin fondo */
  box-shadow: inset 0 -2px 0 var(--lm-oro); /* Raya dorada debajo */
}
.lm-nav .nav-link .fa-chevron-down {
  font-size: .65rem;              /* Flechita pequeña */
  opacity: .7;                    /* Discreta */
}
/* Botón de clases dentro del menú */
.lm-nav .lm-menu__cta {
  margin-left: 10px;              /* Separado del resto */
}
.lm-nav .lm-menu__cta .lm-btn {
  min-height: 40px;               /* Algo más bajo que un botón normal */
  padding: .55rem 1rem;           /* Relleno compacto */
}
/* Desplegables con título + descripción */
.lm-nav .dropdown {
  top: calc(100% + 6px);          /* Justo debajo del enlace */
  min-width: 320px;               /* Ancho para la descripción */
  padding: 8px;                   /* Relleno interior */
  background: var(--lm-grafito-2); /* Panel elevado */
  border: 1px solid var(--lm-grafito-3); /* Borde sutil */
  border-radius: var(--lm-radio-m); /* Esquinas del panel */
  box-shadow: var(--lm-sombra);   /* Sombra flotante */
}
.lm-nav .dropdown a {
  display: grid;                  /* Título arriba, descripción abajo */
  gap: 2px;                       /* Poco espacio entre ambos */
  padding: 10px 12px;             /* Zona clicable */
  color: var(--lm-hueso);         /* Título en hueso */
}
.lm-nav .dropdown a strong {
  font-weight: 700;               /* Título en negrita */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-nav .dropdown a span {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Descripción en gris */
  line-height: 1.4;               /* Compacta */
  white-space: normal;            /* Puede partir línea */
}
.lm-nav .dropdown a:hover {
  background: rgba(255, 255, 255, .05); /* Velo al pasar */
}
/* Puente invisible para que el desplegable no se cierre al bajar el ratón */
.lm-nav .nav-item::after {
  bottom: -12px;                  /* Cubre el hueco de 6 px + margen */
  height: 12px;                   /* Altura del puente */
}
/* Botón hamburguesa */
.lm-nav .mobile-menu-btn {
  color: var(--lm-hueso);         /* Icono hueso */
  border-radius: var(--lm-radio-s); /* Esquinas */
}

/* ----- Menú en móvil y tableta ----- */
@media (max-width: 900px) {
  .lm-nav .mobile-menu-btn {
    display: inline-flex;         /* Aparece la hamburguesa */
    align-items: center;          /* Icono centrado */
    justify-content: center;      /* Icono centrado */
    width: 44px;                  /* Zona táctil */
    height: 44px;                 /* Zona táctil */
    margin-left: auto;            /* Pegada a la derecha */
  }
  .lm-nav .nav-menu {
    display: none;                /* Oculto hasta abrir */
    position: fixed;              /* Panel bajo la barra */
    top: var(--nav-h);            /* Justo debajo */
    left: 0;                      /* Todo el ancho */
    right: 0;                     /* Todo el ancho */
    flex-direction: column;       /* Enlaces en columna */
    align-items: stretch;         /* Ocupan todo el ancho */
    gap: 2px;                     /* Juntos */
    margin: 0;                    /* Sin el auto del escritorio */
    padding: 12px 16px 24px;      /* Relleno del panel */
    background: var(--lm-grafito); /* Fondo sólido */
    border-bottom: 1px solid var(--lm-grafito-3); /* Filete */
    max-height: calc(100vh - var(--nav-h)); /* No más alto que la pantalla */
    overflow-y: auto;             /* Scroll si hace falta */
    box-shadow: var(--lm-sombra); /* Separación del contenido */
  }
  .top-nav.lm-nav.open .nav-menu {
    display: flex;                /* Se muestra al pulsar la hamburguesa */
  }
  .lm-nav .nav-link {
    width: 100%;                  /* Fila completa */
    padding: 14px 12px;           /* Más alto para el dedo */
    font-size: var(--lm-t-m);     /* 17 px */
    justify-content: space-between; /* Flecha a la derecha */
  }
  .lm-nav .dropdown {
    position: static;             /* Dentro del flujo */
    min-width: 0;                 /* Sin ancho mínimo */
    box-shadow: none;             /* Sin sombra */
    border: 0;                    /* Sin borde */
    background: var(--lm-grafito-2); /* Panel algo más claro */
    margin: 0 0 8px;              /* Separación inferior */
  }
  .lm-nav .nav-item:hover .dropdown {
    display: none;                /* En móvil no se abre por hover */
  }
  .lm-nav .nav-item.open .dropdown {
    display: block;               /* Se abre al tocar (scripts.js añade .open) */
  }
  .lm-nav .nav-item::after {
    display: none;                /* El puente no hace falta en móvil */
  }
  .lm-nav .lm-menu__cta {
    margin: 12px 0 0;             /* Separado de la lista */
  }
  .lm-nav .lm-menu__cta .lm-btn {
    width: 100%;                  /* Botón a todo el ancho */
    min-height: 48px;             /* Táctil */
  }
}

/* ================== 5. CABECERA DE LAS PÁGINAS INTERIORES ================== */
/* (las páginas que aún usan el hero con imagen de header.php) */
.hero-banner {
  margin-top: var(--nav-h);       /* Debajo del menú sólido (antes quedaba tapado) */
  min-height: 340px;              /* Altura de la cabecera */
  border-bottom: 1px solid rgba(212, 175, 55, .35); /* Filete dorado fino que cierra la cabecera */
  background-color: var(--lm-grafito); /* Mientras carga la ilustración */
  background-size: cover;         /* La ilustración llena el hueco */
  background-position: right center; /* El motivo está a la derecha: en móvil se ve esa parte */
}
.hero-overlay {
  background: linear-gradient(90deg, rgba(11, 14, 19, .7) 0%, rgba(11, 14, 19, .2) 55%, rgba(11, 14, 19, 0) 100%); /* Las ilustraciones nuevas ya traen la izquierda oscura: velo suave */
}
.hero-content {
  min-height: 340px;              /* Igual que el contenedor */
  justify-content: flex-start;    /* Texto alineado a la izquierda */
  text-align: left;               /* Lectura natural */
}
.hero-title-box {
  background: none;               /* Fuera la caja translúcida */
  border: 0;                      /* Sin borde */
  padding: 0;                     /* Sin relleno */
  backdrop-filter: none;          /* Sin desenfoque */
}
.h1-top {
  font-family: var(--lm-fuente);  /* Archivo */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensada */
  font-size: clamp(2.4rem, 6vw, 4.2rem); /* Grande pero contenida */
  line-height: .98;               /* Apretada */
  white-space: normal;            /* Puede partir */
  color: var(--lm-hueso);         /* Hueso sólido */
  background: none;               /* Fuera el degradado animado */
  -webkit-text-fill-color: currentColor; /* Anula el texto transparente antiguo */
  animation: none;                /* Sin animación continua */
}
@media (max-width: 700px) {
  .hero-overlay {
    background: rgba(11, 14, 19, .72); /* En móvil el motivo queda detrás del texto: velo uniforme */
  }
  .hero-banner,
  .hero-content {
    min-height: 260px;            /* Cabecera más baja en móvil */
  }
}
.h1-strap {
  font-weight: 500;               /* Más ligera que antes */
  color: var(--lm-niquel);        /* Gris níquel */
  margin-top: .6rem;              /* Separación del titular */
  max-width: 38ch;                /* Línea corta */
}
/* Títulos de sección de las páginas antiguas: solo cambia la letra */
.section-title {
  font-family: var(--lm-fuente);  /* Archivo en vez de Montserrat (que no se cargaba) */
  font-stretch: 85%;              /* Ligeramente condensada */
}

/* ================== 6. SECCIONES DE LA PORTADA ================== */
.lm-seccion {
  padding: clamp(56px, 8vw, 96px) 0; /* Aire vertical generoso */
}
.lm-seccion--papel {
  background: var(--lm-papel);    /* Fondo de lectura */
}
.lm-seccion--hueso {
  background: var(--lm-hueso);    /* Fondo hueso (bloque de clases) */
}
.lm-seccion--grafito {
  background: var(--lm-grafito);  /* Fondo oscuro */
  color: var(--lm-hueso);         /* Texto claro */
}
/* Cabecera de sección: título + entradilla, alineados a la izquierda */
.lm-cabecera {
  max-width: 46rem;               /* Línea de lectura corta */
  margin-bottom: clamp(28px, 4vw, 44px); /* Separación con el contenido */
}
.lm-h2 {
  font-size: var(--lm-t-xl);      /* Tamaño de sección */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensada */
  line-height: 1.05;              /* Apretada */
  letter-spacing: -.005em;        /* Un pelo más junta */
  margin: 0 0 .6rem;              /* Separación inferior */
  color: inherit;                 /* Hereda claro u oscuro según la sección */
}
.lm-entradilla {
  font-size: var(--lm-t-l);       /* 21 px */
  line-height: 1.45;              /* Interlineado de entradilla */
  color: var(--lm-tinta-2);       /* Gris oscuro sobre claro */
  margin: 0;                      /* Sin márgenes */
}
.lm-seccion--grafito .lm-entradilla {
  color: var(--lm-niquel);        /* Gris claro sobre oscuro */
}

/* ----- 6.1 Portada: cabecera con el mástil ----- */
.lm-hero {
  background: var(--lm-grafito);  /* Escenario oscuro */
  color: var(--lm-hueso);         /* Texto claro */
  padding: calc(var(--nav-h) + clamp(40px, 7vw, 88px)) 0 clamp(40px, 6vw, 72px); /* Deja sitio al menú fijo */
  overflow: hidden;               /* Nada se sale por los lados */
}
.lm-hero__grid {
  display: grid;                  /* Titular | texto */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* 7/12 + 5/12 */
  gap: 24px 56px;                 /* Separación entre columnas */
  align-items: end;               /* El texto se apoya en la base del titular */
}
.lm-hero__titulo {
  font-size: var(--lm-t-xxl);     /* El tamaño más grande de la web */
  font-weight: 800;               /* Muy negrita */
  font-stretch: 68%;              /* Muy condensada: es el gesto tipográfico de la portada */
  line-height: .94;               /* Líneas apretadas */
  letter-spacing: -.01em;         /* Algo más junta */
  margin: 0;                      /* Sin márgenes */
  max-width: 17ch;                /* Tres o cuatro líneas en escritorio */
  text-wrap: balance;             /* Reparte las palabras entre líneas */
}
.lm-hero__intro {
  font-size: var(--lm-t-l);       /* 21 px */
  line-height: 1.45;              /* Lectura cómoda */
  color: var(--lm-niquel);        /* Gris claro */
  margin: 0 0 24px;               /* Separación con los botones */
  max-width: 34ch;                /* Línea corta */
}
.lm-hero__acciones {
  display: flex;                  /* Botones en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 12px;                      /* Separación */
}
@media (max-width: 860px) {
  .lm-hero__grid {
    grid-template-columns: 1fr;   /* Una columna en móvil */
  }
}
/* ----- v2: foto de la guitarra en la cabecera (assets/images/portada/) -----
   Escritorio: titular y texto a la izquierda, guitarra de pie a la derecha.
   Móvil: titular, guitarra tumbada (otra foto, la misma girada) y texto.
   El "degradado": una máscara elíptica funde los bordes de la foto con el fondo grafito
   (la foto viene recortada por los lados: así no se ven los cortes) y un halo dorado detrás. */
.lm-hero__grid--guitarra {
  grid-template-areas: "titulo guitarra" "texto guitarra"; /* La guitarra ocupa las dos filas de la derecha */
  align-items: center;            /* Centrado vertical */
  row-gap: clamp(20px, 3vw, 36px); /* Aire entre titular y texto */
}
.lm-hero__grid--guitarra .lm-hero__titulo { grid-area: titulo; align-self: end; }
.lm-hero__grid--guitarra .lm-hero__texto  { grid-area: texto;  align-self: start; }
.lm-hero__guitarra {
  grid-area: guitarra;            /* Su hueco */
  position: relative;             /* Para el halo */
  isolation: isolate;             /* El halo queda detrás de la foto */
  justify-self: center;           /* Centrada en su columna */
  width: min(340px, 100%);        /* Tamaño en escritorio */
  margin: -48px 0 -72px;          /* Se sale un poco por arriba y por abajo: el degradado la funde con el fondo */
  pointer-events: none;           /* Decorativa: no estorba a los clics */
}
.lm-hero__guitarra::before {
  content: "";                    /* Halo */
  position: absolute;             /* Detrás de la guitarra */
  inset: 8% -30% 0;               /* Más ancho que la foto */
  z-index: -1;                    /* Detrás */
  background: radial-gradient(closest-side, rgba(212, 175, 55, .20), rgba(212, 175, 55, .06) 60%, transparent); /* Dorado que se apaga */
}
.lm-hero__guitarra img {
  display: block;                 /* Sin hueco bajo la imagen */
  width: 100%;                    /* Ancho de su caja */
  height: auto;                   /* Proporción de la foto */
  -webkit-mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 58%, transparent 100%); /* Bordes fundidos (Safari) */
  mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 58%, transparent 100%); /* Bordes fundidos */
}
@media (max-width: 860px) {
  .lm-hero__grid--guitarra {
    grid-template-areas: "titulo" "guitarra" "texto"; /* Una columna: la guitarra bajo el titular */
  }
  .lm-hero__guitarra {
    width: 100%;                  /* Todo el ancho */
    max-width: 520px;             /* Sin pasarse en tabletas */
    margin: -8px 0 -4px;          /* Pegada al titular */
    justify-self: start;          /* Alineada con el texto */
  }
  .lm-hero__guitarra::before {
    inset: -10% 0 -10% 20%;       /* Halo sobre la caja (a la derecha) */
  }
  .lm-hero__guitarra img {
    -webkit-mask-image: radial-gradient(ellipse 60% 56% at 58% 50%, #000 55%, transparent 100%); /* Misma idea, tumbada */
    mask-image: radial-gradient(ellipse 60% 56% at 58% 50%, #000 55%, transparent 100%);
  }
}


/* ----- 6.2 Panel del mástil (portada y guía de tríadas) ----- */
.lm-mastil-panel {
  margin-top: clamp(32px, 5vw, 56px); /* Separación con el titular */
}
.lm-mastil-barra {
  display: flex;                  /* Controles en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  align-items: center;            /* Centrados */
  gap: 10px 18px;                 /* Separación */
  margin-bottom: 14px;            /* Separación con el mástil */
}
/* Grupo de botones tipo "chip" (acordes, tipos, cuerdas) */
.lm-chips {
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 6px;                       /* Juntos */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
}
.lm-chip {
  min-height: 40px;               /* Táctil */
  padding: .45rem .9rem;          /* Relleno */
  border-radius: var(--lm-radio-s); /* Esquinas discretas */
  border: 1.5px solid var(--lm-grafito-3); /* Borde apagado */
  background: var(--lm-grafito-2); /* Fondo de panel */
  color: var(--lm-hueso);         /* Texto claro */
  font: 600 var(--lm-t-s)/1 var(--lm-fuente); /* 15 px seminegrita */
  cursor: pointer;                /* Mano */
  transition: border-color .15s ease, background-color .15s ease; /* Suave */
}
.lm-chip:hover {
  border-color: var(--lm-niquel); /* Se marca al pasar */
}
.lm-chip[aria-pressed="true"] {
  border-color: var(--lm-oro);    /* Activo: borde dorado */
  background: rgba(212, 175, 55, .12); /* Y un velo dorado */
}
/* Etiqueta del grupo de chips (texto normal, sin mayúsculas) */
.lm-chips__etiqueta {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris */
  margin-right: 4px;              /* Separación */
  align-self: center;             /* Centrada con los chips */
}
/* Botón de escuchar */
.lm-btn--sonido {
  background: transparent;        /* Sin fondo */
  border-color: var(--lm-teal);   /* Borde teal: es la acción de sonido */
  color: var(--lm-hueso);         /* Texto claro */
  min-height: 40px;               /* Igual que los chips */
  margin-left: auto;              /* Pegado a la derecha */
}
.lm-btn--sonido:hover {
  background: rgba(0, 194, 199, .12); /* Velo teal */
}
/* Contenedor con scroll horizontal (en móvil el mástil se desliza como uno de verdad) */
.lm-mastil {
  overflow-x: auto;               /* Scroll lateral solo aquí, nunca en la página */
  overscroll-behavior-x: contain; /* No arrastra la página al llegar al final */
  -webkit-overflow-scrolling: touch; /* Inercia en iOS */
  border-radius: var(--lm-radio-m); /* Esquinas del panel */
  scrollbar-width: thin;          /* Barra fina en Firefox */
}
.lm-mastil svg {
  display: block;                 /* Sin hueco inferior de línea */
  width: 100%;                    /* Ocupa el ancho */
  min-width: 760px;               /* En móvil no se aplasta: se desliza */
  height: auto;                   /* Mantiene proporción */
  user-select: none;              /* No se selecciona al tocar */
}
/* Puntos (notas) del mástil */
.lm-nota {
  cursor: pointer;                /* Se pueden tocar */
}
.lm-nota circle {
  stroke: rgba(11, 14, 19, .55);  /* Contorno oscuro para separarlo de la madera */
  stroke-width: 1.5;              /* Fino */
  transition: transform .12s ease; /* Respuesta al pulsar */
  transform-box: fill-box;        /* Escala desde su centro */
  transform-origin: center;       /* Centro */
}
.lm-nota text {
  fill: #fff;                     /* Texto blanco dentro del punto */
  font: 700 12px var(--lm-fuente); /* 12 px negrita */
  pointer-events: none;           /* El clic lo recibe el grupo */
}
.lm-nota:hover circle,
.lm-nota.is-sonando circle {
  transform: scale(1.18);         /* Crece al pasar o al sonar */
}
.lm-nota:focus-visible {
  outline: none;                  /* El anillo lo pinta el círculo */
}
.lm-nota:focus-visible circle {
  stroke: var(--lm-teal);         /* Anillo teal con teclado */
  stroke-width: 3;                /* Bien visible */
}
.lm-nota--R circle { fill: var(--lm-r); } /* Raíz en rojo */
.lm-nota--3 circle { fill: var(--lm-3); } /* Tercera en azul */
.lm-nota--5 circle { fill: var(--lm-5); } /* Quinta en verde */
/* Recuadro de cada forma (como en la escalera del PDF) */
.lm-forma rect {
  fill: rgba(239, 231, 218, .08); /* Hueso muy transparente */
  stroke: rgba(212, 175, 55, .5); /* Contorno dorado */
  stroke-width: 1.2;              /* Fino */
  cursor: pointer;                /* Se puede tocar la forma entera */
  transition: fill .15s ease;     /* Suave */
}
.lm-forma:hover rect,
.lm-forma.is-sonando rect {
  fill: rgba(239, 231, 218, .18); /* Se ilumina al pasar o sonar */
}
.lm-forma > text {
  fill: var(--lm-oro);            /* Etiqueta F / 1ª / 2ª en dorado */
  font: 700 13px var(--lm-fuente); /* 13 px */
}
/* Aparición escalonada de las formas al cambiar de acorde */
@media (prefers-reduced-motion: no-preference) {
  .lm-forma.is-entrando {
    animation: lm-entra .38s cubic-bezier(.2, .7, .2, 1) both; /* Entra deslizándose */
    animation-delay: var(--lm-retardo, 0ms); /* Cada forma un poco después */
  }
}
@keyframes lm-entra {
  from { opacity: 0; transform: translateX(-10px); } /* Empieza desplazada y transparente */
  to { opacity: 1; transform: none; } /* Termina en su sitio */
}
/* Pie del mástil y leyenda */
.lm-mastil-pie {
  display: flex;                  /* Texto y leyenda en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  justify-content: space-between; /* A los extremos */
  gap: 8px 24px;                  /* Separación */
  margin-top: 12px;               /* Separación con el mástil */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris claro */
}
.lm-mastil-pie p {
  margin: 0;                      /* Sin márgenes */
  max-width: 62ch;                /* Línea corta */
}
.lm-leyenda {
  display: flex;                  /* En fila */
  gap: 14px;                      /* Separación */
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
}
.lm-leyenda li {
  display: inline-flex;           /* Punto + texto */
  align-items: center;            /* Centrados */
  gap: 6px;                       /* Separación */
}
.lm-punto {
  display: inline-grid;           /* Para centrar la letra */
  place-items: center;            /* Centrada */
  width: 22px;                    /* Diámetro */
  height: 22px;                   /* Diámetro */
  border-radius: 50%;             /* Redondo */
  color: #fff;                    /* Letra blanca */
  font: 700 11px var(--lm-fuente); /* 11 px */
}
.lm-punto--R { background: var(--lm-r); } /* Raíz */
.lm-punto--3 { background: var(--lm-3); } /* Tercera */
.lm-punto--5 { background: var(--lm-5); } /* Quinta */
.lm-punto--P { background: var(--lm-oro); color: var(--lm-grafito); } /* v2: nota que añade la pentatónica (dorada) */
.lm-punto--E { background: var(--lm-grafito); box-shadow: inset 0 0 0 2px var(--lm-teal); color: var(--lm-hueso); } /* v2: nota que añade la escala (oscura con aro teal) */
.lm-desliza {
  display: none;                  /* Solo se ve en pantallas estrechas */
}
@media (max-width: 780px) {
  .lm-desliza {
    display: block;               /* "Desliza para ver todo el mástil" */
    font-size: var(--lm-t-xs);    /* 13 px */
    color: var(--lm-niquel);      /* Gris */
    margin: 0 0 8px;              /* Separación */
  }
  .lm-btn--sonido {
    margin-left: 0;               /* En móvil no se pega a la derecha */
  }
}

/* ----- 6.3 Guías prácticas ----- */
.lm-guias {
  display: grid;                  /* Dos guías lado a lado */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Mitad y mitad */
  gap: 24px;                      /* Separación */
}
.lm-guia {
  display: flex;                  /* Columna */
  flex-direction: column;         /* Visual, título, texto, datos, enlace */
  background: var(--lm-blanco);   /* Tarjeta blanca sobre papel */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta el visual */
  text-decoration: none;          /* Toda la tarjeta es enlace */
  color: var(--lm-tinta);         /* Texto oscuro */
  transition: border-color .15s ease; /* Suave */
}
.lm-guia:hover {
  border-color: var(--lm-bronce); /* Borde bronce al pasar */
}
.lm-guia__visual {
  background: var(--lm-grafito);  /* El visual va sobre oscuro, como el mástil */
  padding: 28px 24px;             /* Relleno */
  min-height: 200px;              /* Altura mínima igual en las dos */
  display: grid;                  /* Para centrar */
  place-items: center;            /* Centrado */
}
.lm-guia__cuerpo {
  padding: 24px 24px 28px;        /* Relleno del texto */
  display: flex;                  /* Columna */
  flex-direction: column;         /* Apilado */
  gap: 12px;                      /* Separación */
  flex: 1;                        /* Ocupa el resto de la altura */
}
.lm-guia__titulo {
  font-size: 1.625rem;            /* 26 px */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensada */
  line-height: 1.05;              /* Apretada */
  margin: 0;                      /* Sin márgenes */
}
.lm-guia__texto {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-tinta-2);       /* Gris oscuro */
}
.lm-datos {
  display: flex;                  /* Datos en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px 28px;                  /* Separación */
  margin: 4px 0 0;                /* Sin márgenes laterales */
}
.lm-datos div {
  display: grid;                  /* Número arriba, texto abajo */
}
.lm-datos dt {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-datos dd {
  margin: 0;                      /* Sin sangría */
  font-weight: 700;               /* Negrita */
}
.lm-guia .lm-enlace {
  margin-top: auto;               /* Se va al fondo de la tarjeta */
  padding-top: 6px;               /* Respiro */
}
@media (max-width: 820px) {
  .lm-guias {
    grid-template-columns: 1fr;   /* Una guía debajo de otra */
  }
}
/* Mini diagramas de acorde (SVG generado en PHP) */
.lm-diagramas {
  display: flex;                  /* En fila */
  gap: 18px;                      /* Separación */
  flex-wrap: wrap;                /* Bajan si no caben */
  justify-content: center;        /* Centrados */
}
.lm-diagrama {
  display: grid;                  /* Título, caja, pie */
  justify-items: center;          /* Centrados */
  gap: 4px;                       /* Separación */
  margin: 0;                      /* Sin márgenes de figure */
}
.lm-diagrama figcaption {
  font: 700 var(--lm-t-s) var(--lm-fuente); /* 15 px negrita */
  color: var(--lm-hueso);         /* Claro sobre oscuro */
}
.lm-diagrama small {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris */
}
.lm-diagrama svg {
  display: block;                 /* Sin hueco inferior */
}

/* ----- 6.4 Herramientas ----- */
.lm-herramientas {
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  display: grid;                  /* Dos columnas */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Mitad y mitad */
  gap: 1px;                       /* El hueco hace de filete */
  background: var(--lm-grafito-3); /* Color del filete */
  border: 1px solid var(--lm-grafito-3); /* Marco */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta las esquinas */
}
.lm-herramienta {
  display: grid;                  /* Visual + texto */
  grid-template-columns: 120px 1fr; /* Visual fijo a la izquierda */
  gap: 20px;                      /* Separación */
  align-items: center;            /* Centrados */
  padding: 24px;                  /* Relleno */
  background: var(--lm-grafito);  /* Fondo */
  color: var(--lm-hueso);         /* Texto claro */
  text-decoration: none;          /* Sin subrayado */
  height: 100%;                   /* Misma altura en la fila */
  transition: background-color .15s ease; /* Suave */
}
.lm-herramienta:hover {
  background: var(--lm-grafito-2); /* Se ilumina al pasar */
}
.lm-herramienta__titulo {
  display: block;                 /* En su línea */
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensada */
  margin-bottom: 4px;             /* Separación */
}
.lm-herramienta__texto {
  display: block;                 /* En su línea */
  color: var(--lm-niquel);        /* Gris claro */
  font-size: var(--lm-t-s);       /* 15 px */
}
/* Visual del metrónomo: tempo grande */
.lm-viz-tempo {
  font-weight: 800;               /* Negrita */
  font-stretch: 62%;              /* Muy condensado */
  font-size: 3rem;                /* Grande */
  line-height: 1;                 /* Sin aire */
  color: var(--lm-oro);           /* Dorado */
  font-variant-numeric: tabular-nums; /* Números de ancho fijo */
  text-align: center;             /* Centrado */
}
.lm-viz-tempo small {
  display: block;                 /* Debajo */
  font-size: var(--lm-t-xs);      /* 13 px */
  font-stretch: 100%;             /* Anchura normal */
  color: var(--lm-niquel);        /* Gris */
  font-weight: 600;               /* Seminegrita */
  margin-top: 4px;                /* Separación */
}
.lm-herramientas__ancha { grid-column: 1 / -1; }                  /* v2: el entrenador de lenguaje musical ocupa la fila entera */
/* Visual del Groove Lab: mini secuenciador */
.lm-viz-pasos {
  display: grid;                  /* Rejilla */
  grid-template-columns: repeat(8, 1fr); /* 8 pasos */
  gap: 3px;                       /* Separación */
}
.lm-viz-pasos i {
  display: block;                 /* Cuadradito */
  aspect-ratio: 1;                /* Cuadrado */
  border-radius: 2px;             /* Esquinas mínimas */
  background: var(--lm-grafito-3); /* Paso apagado */
}
.lm-viz-pasos i.on {
  background: var(--lm-oro);      /* Paso encendido */
}
.lm-viz-pasos i.on.caja {
  background: var(--lm-teal);     /* Caja en teal para distinguirla del bombo */
}
.lm-mas {
  margin-top: 20px;               /* Separación con la lista */
}
.lm-seccion--grafito .lm-enlace {
  color: var(--lm-oro);           /* Enlaces dorados sobre oscuro */
}
.lm-seccion--grafito .lm-enlace:hover {
  color: var(--lm-hueso);         /* Claros al pasar */
}
@media (max-width: 820px) {
  .lm-herramientas {
    grid-template-columns: 1fr;   /* Una debajo de otra */
  }
  .lm-herramienta {
    grid-template-columns: 84px 1fr; /* Visual más pequeño */
    padding: 20px;                /* Menos relleno */
  }
  .lm-viz-tempo {
    font-size: 2.25rem;           /* Tempo más pequeño */
  }
}

/* ----- 6.5 Vídeos del canal ----- */
.lm-videos {
  display: grid;                  /* Tres columnas */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Iguales */
  gap: 24px;                      /* Separación */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  list-style: none;               /* Sin viñetas */
}
.lm-video {
  display: grid;                  /* Miniatura + título */
  gap: 10px;                      /* Separación */
  text-decoration: none;          /* Sin subrayado */
  color: var(--lm-tinta);         /* Texto oscuro */
}
.lm-video__miniatura {
  position: relative;             /* Para el botón de play */
  display: block;                 /* Bloque */
  aspect-ratio: 16 / 9;           /* Proporción de YouTube */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta la imagen */
  background: var(--lm-grafito) center / 54px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M8 5.14v14l11-7z'/%3E%3C/svg%3E"); /* Fondo de reserva si la miniatura no carga */
}
.lm-video__miniatura img {
  width: 100%;                    /* Llena el hueco */
  height: 100%;                   /* Llena el hueco */
  object-fit: cover;              /* Recorta el 4:3 de YouTube a 16:9 */
  display: block;                 /* Sin hueco inferior */
  transition: transform .3s ease; /* Zoom suave */
}
.lm-video:hover .lm-video__miniatura img {
  transform: scale(1.03);         /* Zoom mínimo al pasar */
}
.lm-video__titulo {
  font-weight: 700;               /* Negrita */
  line-height: 1.3;               /* Compacto */
}
.lm-video:hover .lm-video__titulo {
  text-decoration: underline;     /* Subraya al pasar */
  text-underline-offset: 3px;     /* Separado */
}
.lm-acciones {
  display: flex;                  /* Botones en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 12px;                      /* Separación */
  margin-top: 28px;               /* Separación con la lista */
}
@media (max-width: 820px) {
  .lm-videos {
    grid-template-columns: 1fr;   /* Uno debajo de otro */
  }
}

/* ----- 6.6 Clases ----- */
.lm-clases {
  display: grid;                  /* Texto | modalidades */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); /* Algo más ancho el texto */
  gap: 40px 64px;                 /* Separación */
  align-items: start;             /* Arriba */
}
.lm-clases .lm-entradilla {
  margin-bottom: 24px;            /* Separación con el botón */
}
.lm-modalidades {
  display: grid;                  /* Lista de modalidades */
  gap: 0;                         /* Separadas por filete */
  margin: 0;                      /* Sin márgenes */
}
.lm-modalidad {
  padding: 18px 0;                /* Relleno vertical */
  border-top: 1px solid rgba(122, 92, 46, .3); /* Filete bronce */
}
.lm-modalidad:last-child {
  border-bottom: 1px solid rgba(122, 92, 46, .3); /* Cierre */
}
.lm-modalidad dt {
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensada */
  font-size: var(--lm-t-l);       /* 21 px */
  margin-bottom: 2px;             /* Separación */
}
.lm-modalidad dd {
  margin: 0;                      /* Sin sangría */
  color: var(--lm-tinta-2);       /* Gris oscuro */
}
.lm-nota-pie {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
  margin-top: 14px;               /* Separación */
}
.lm-nota-pie a {
  color: var(--lm-bronce);        /* Enlace bronce */
}
.lm-foto {
  margin: 0 0 24px;               /* Separación */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta */
  aspect-ratio: 4 / 3;            /* Proporción fija */
}
.lm-foto img {
  width: 100%;                    /* Llena */
  height: 100%;                   /* Llena */
  object-fit: cover;              /* Recorta sin deformar */
  display: block;                 /* Sin hueco */
}
@media (max-width: 860px) {
  .lm-clases {
    grid-template-columns: 1fr;   /* Una columna */
  }
}

/* ----- 6.7 Material gratis ----- */
.lm-material {
  display: grid;                  /* Texto | botón */
  grid-template-columns: minmax(0, 1fr) auto; /* El botón a su tamaño */
  gap: 24px 48px;                 /* Separación */
  align-items: end;               /* Alineados abajo */
}
.lm-material .lm-cabecera {
  margin-bottom: 0;               /* Sin margen: va en rejilla */
}
@media (max-width: 760px) {
  .lm-material {
    grid-template-columns: 1fr;   /* Uno debajo de otro */
    align-items: start;           /* Arriba */
  }
}

/* ================== 7. PIE DE PÁGINA ================== */
.footer.lm-pie {
  background: var(--lm-grafito);  /* Oscuro, como el menú */
  color: var(--lm-niquel);        /* Texto gris claro */
  text-align: left;               /* Anula el centrado antiguo */
  padding: 56px 0 28px;           /* Relleno */
  border-top: 1px solid var(--lm-grafito-3); /* Filete superior */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-pie__rejilla {
  display: grid;                  /* Cuatro columnas */
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* La marca algo más ancha */
  gap: 32px;                      /* Separación */
}
.lm-pie h2 {
  font-size: var(--lm-t-s);       /* 15 px */
  font-weight: 700;               /* Negrita */
  color: var(--lm-hueso);         /* Claro */
  margin: 0 0 12px;               /* Separación */
}
.lm-pie ul {
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  display: grid;                  /* En columna */
  gap: 8px;                       /* Separación */
}
.lm-pie a {
  color: var(--lm-niquel);        /* Enlaces grises */
  text-decoration: none;          /* Sin subrayado */
}
.lm-pie a:hover {
  color: var(--lm-hueso);         /* Claros al pasar */
  text-decoration: underline;     /* Y subrayados */
  text-underline-offset: 3px;     /* Separados */
}
.lm-pie .lm-brand {
  color: var(--lm-hueso);         /* El nombre de la marca en claro (no gris como los enlaces) */
}
.lm-pie .lm-brand:hover {
  text-decoration: none;          /* Sin subrayado en la marca */
}
.lm-pie__marca p {
  margin: 12px 0 16px;            /* Separación */
  max-width: 30ch;                /* Línea corta */
}
.lm-pie .social-links {
  justify-content: flex-start;    /* Iconos a la izquierda */
  margin: 0;                      /* Sin márgenes */
}
.lm-pie .social-links a {
  width: 40px;                    /* Botón redondo */
  height: 40px;                   /* Botón redondo */
  background: var(--lm-grafito-2); /* Fondo de panel */
  border: 1px solid var(--lm-grafito-3); /* Borde */
  color: var(--lm-hueso);         /* Icono claro */
}
.lm-pie .social-links a:hover {
  border-color: var(--lm-oro);    /* Borde dorado al pasar */
  text-decoration: none;          /* Sin subrayado en iconos */
}
.lm-pie__base {
  display: flex;                  /* Copyright y otros canales */
  flex-wrap: wrap;                /* Bajan si no caben */
  justify-content: space-between; /* A los extremos */
  gap: 8px 24px;                  /* Separación */
  margin-top: 40px;               /* Separación con las columnas */
  padding-top: 20px;              /* Respiro */
  border-top: 1px solid var(--lm-grafito-3); /* Filete */
  font-size: var(--lm-t-xs);      /* 13 px */
}
.lm-pie__base p {
  margin: 0;                      /* Sin márgenes */
}
@media (max-width: 860px) {
  .lm-pie__rejilla {
    grid-template-columns: 1fr 1fr; /* Dos columnas en tableta */
  }
  .lm-pie__marca {
    grid-column: 1 / -1;          /* La marca ocupa la fila entera */
  }
}
@media (max-width: 480px) {
  .lm-pie__rejilla {
    grid-template-columns: 1fr;   /* Una columna en móvil */
  }
}

/* ================== 8. ARREGLO: PÁGINA DE CLASES (guitarra-de-luena.php) ================== */
/* Esa página usa .usage-grid / .usage-card pero no cargaba su CSS: salía todo apelotonado */
.page-guitarra-luena .usage-grid {
  display: grid;                  /* Rejilla */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Tantas columnas como quepan */
  gap: 20px;                      /* Separación */
}
.page-guitarra-luena .usage-card {
  background: var(--lm-blanco);   /* Tarjeta blanca */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: 24px;                  /* Relleno */
}
.page-guitarra-luena .usage-card__title {
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensada */
  margin: 10px 0 6px;             /* Separación */
}
.page-guitarra-luena .usage-card__text {
  color: var(--lm-tinta-2);       /* Gris oscuro */
  margin: 0;                      /* Sin márgenes */
}
.page-guitarra-luena .seo-intro p {
  max-width: 62ch;                /* Línea de lectura */
  margin: 0 auto;                 /* Centrada como el resto de esa página */
  text-align: center;             /* Centrado */
}

/* ================== 9. MOVIMIENTO REDUCIDO ================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important; /* Sin transiciones */
    animation-duration: .01ms !important;  /* Sin animaciones */
  }
}

/* ================== 10. MINI CUADRÍCULA DE RITMO (tarjeta de la portada) ================== */
/* v2: en móvil, los tres diagramas de las tarjetas de guías caben en una fila (antes se apilaban) */
@media (max-width: 480px) {
  .lm-guia__visual .lm-diagramas {
    gap: 8px;                     /* Menos separación */
    flex-wrap: nowrap;            /* Los tres en fila */
  }
  .lm-guia__visual .lm-diagrama svg {
    width: 82px;                  /* Diagrama más pequeño */
    height: auto;                 /* Proporción */
  }
  .lm-guia__visual .lm-diagrama figcaption {
    font-size: var(--lm-t-xs);    /* 13 px */
    white-space: nowrap;          /* «1ª inversión» en una línea */
  }
}
.lm-mini-enlace {
  display: grid;                  /* Diagramas y pie apilados */
  justify-items: center;          /* Centrados */
}
/* v2: tarjeta de pentatónicas (3, 5 y 7 notas en columnas) */
.lm-mini-escala {
  display: grid;                  /* Nombre + 7 casillas por fila */
  grid-template-columns: auto repeat(7, 26px); /* Columna de nombres y una por grado */
  gap: 10px 7px;                  /* Separación */
  align-items: center;            /* Centrados en vertical */
}
.lm-mini-escala__nombre {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris claro */
  text-align: right;              /* Pegado a los puntos */
  padding-right: 6px;             /* Respiro */
}
.lm-mini-escala .lm-punto {
  width: 26px;                    /* Algo más grandes que en la leyenda */
  height: 26px;                   /* Redondos */
  font-size: 12px;                /* Número legible */
}
.lm-mini-escala__hueco {
  width: 26px;                    /* Casilla vacía: */
  height: 26px;                   /* la nota aún no está */
  border-radius: 50%;             /* Redonda */
  border: 1px dashed var(--lm-grafito-3); /* Contorno muy suave */
}
.lm-mini-escala__pie,
.lm-mini-enlace__pie {
  grid-column: 1 / -1;            /* Todo el ancho */
  margin: 8px 0 0;                /* Separación */
  text-align: center;             /* Centrado */
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris claro */
}
@media (max-width: 400px) {
  .lm-mini-escala {
    grid-template-columns: auto repeat(7, 22px); /* Más estrecha en móviles pequeños */
    gap: 9px 5px;                 /* Menos separación */
  }
  .lm-mini-escala .lm-punto,
  .lm-mini-escala__hueco {
    width: 22px;                  /* Puntos más pequeños */
    height: 22px;                 /* Puntos más pequeños */
    font-size: 11px;              /* Número */
  }
}
.lm-mini-ritmo {
  width: 100%;                    /* Todo el ancho del visual */
  max-width: 420px;               /* Sin pasarse */
}
.lm-mini-ritmo ol {
  display: grid;                  /* Ocho casillas */
  grid-template-columns: repeat(8, 1fr); /* Iguales */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  list-style: none;               /* Sin números */
}
.lm-mini-ritmo .casillas {
  border: 1.5px solid #5B5348;    /* Marco */
  border-radius: 4px;             /* Esquinas mínimas */
  overflow: hidden;               /* Recorta */
}
.lm-mini-ritmo .casillas li {
  aspect-ratio: 1;                /* Cuadradas */
  display: grid;                  /* Centra la flecha */
  place-items: center;            /* Centrada */
  background: var(--lm-papel);    /* Fondo claro, como en la guía */
  color: var(--lm-tinta);         /* Flecha negra */
  border-right: 1.5px solid #CFC6B8; /* Separador */
  font-size: 1.3rem;              /* Tamaño del punto */
}
.lm-mini-ritmo .casillas li:last-child {
  border-right: 0;                /* Sin separador al final */
}
.lm-mini-ritmo .casillas li.acento {
  background: #FADFDF;            /* Acento rosado */
  color: var(--lm-r);             /* Flecha roja */
}
.lm-mini-ritmo .casillas li.aire {
  color: #B5AC9E;                 /* Punto gris: la mano no toca */
}
.lm-mini-ritmo svg {
  width: 60%;                     /* Tamaño de la flecha */
  height: auto;                   /* Proporción */
}
.lm-mini-ritmo .arriba svg {
  transform: rotate(180deg);      /* Flecha hacia arriba */
}
.lm-mini-ritmo .cuenta li {
  text-align: center;             /* Centrada */
  color: var(--lm-niquel);        /* Gris */
  font-size: var(--lm-t-s);       /* 15 px */
  padding-top: 6px;               /* Separación */
}
.lm-mini-ritmo .cuenta li.fuerte {
  color: var(--lm-hueso);         /* Números claros */
  font-weight: 800;               /* Negrita */
}
.lm-mini-ritmo p {
  margin: 12px 0 0;               /* Separación */
  color: var(--lm-niquel);        /* Gris */
  font-size: var(--lm-t-s);       /* 15 px */
  text-align: center;             /* Centrado */
}

/* ================== 11. LÍNEA DEL CANAL, SUBTÍTULOS Y PASOS (portada) ================== */
/* Línea del canal en la cabecera */
.lm-hero__canal {
  display: inline-flex;           /* Logo + texto en línea */
  align-items: center;            /* Centrados */
  gap: 12px;                      /* Separación */
  margin-top: 28px;               /* Separación con los botones */
  padding-top: 20px;              /* Respiro sobre el filete */
  border-top: 1px solid var(--lm-grafito-3); /* Filete que lo separa de los botones */
  color: var(--lm-niquel);        /* Texto gris claro */
  text-decoration: none;          /* Sin subrayado */
  font-size: var(--lm-t-s);       /* 15 px */
  line-height: 1.35;              /* Compacto */
}
.lm-hero__canal img {
  width: 44px;                    /* Logo pequeño */
  height: 44px;                   /* Cuadrado */
  border-radius: 50%;             /* Redondo */
  display: block;                 /* Sin hueco inferior */
}
.lm-hero__canal strong {
  display: block;                 /* El nombre en su línea */
  color: var(--lm-hueso);         /* Claro */
  font-weight: 700;               /* Negrita */
}
.lm-hero__canal:hover strong {
  text-decoration: underline;     /* Subraya al pasar */
  text-underline-offset: 3px;     /* Separado */
}
/* Subtítulo dentro de una sección ("Cómo empezar", "Música para escuchar") */
.lm-subtitulo {
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  margin: 0 0 16px;               /* Separación con lo que sigue */
}

/* Pasos numerados del bloque de clases ("Cómo empezar") */
.lm-pasos {
  list-style: none;               /* Sin números del navegador: los pintamos nosotros */
  counter-reset: paso;            /* Contador propio que empieza en 0 */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin sangría */
  display: grid;                  /* Pasos uno debajo de otro */
  gap: 14px;                      /* Separación entre pasos */
}
.lm-pasos li {
  counter-increment: paso;        /* Suma 1 en cada paso */
  position: relative;             /* Para colocar el número */
  padding: 5px 0 0 50px;          /* Hueco a la izquierda para el círculo */
  min-height: 34px;               /* Al menos la altura del círculo */
  color: var(--lm-tinta-2);       /* Texto gris oscuro */
}
.lm-pasos li::before {
  content: counter(paso);         /* 1, 2, 3 */
  position: absolute;             /* Fuera del flujo del texto */
  left: 0;                        /* Pegado a la izquierda */
  top: 0;                         /* Arriba */
  width: 34px;                    /* Círculo */
  height: 34px;                   /* Círculo */
  border-radius: 50%;             /* Redondo */
  display: grid;                  /* Para centrar el número */
  place-items: center;            /* Centrado */
  background: var(--lm-grafito);  /* Fondo grafito */
  color: var(--lm-oro);           /* Número dorado */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
}
.lm-pasos strong {
  color: var(--lm-tinta);         /* La acción de cada paso, más oscura */
}

/* ================== 12. GUÍAS SOBRE FONDO OSCURO ================== */
.lm-seccion--grafito .lm-guia {
  border-color: var(--lm-grafito-3); /* Borde discreto sobre oscuro */
}
.lm-seccion--grafito .lm-guia:hover {
  border-color: var(--lm-oro);    /* Dorado al pasar */
}
.lm-seccion--grafito .lm-guia__visual {
  background: var(--lm-grafito-2); /* El visual se separa un poco del fondo */
}

/* ================== 13. LUENA MUSIC EN YOUTUBE (portada) ================== */
/* Filete fino arriba: separa dos secciones seguidas con el mismo fondo claro */
.lm-seccion--filete {
  border-top: 1px solid var(--lm-linea); /* Línea suave */
}
/* Cabecera del bloque: texto a la izquierda, ficha del canal a la derecha */
.lm-yt {
  display: grid;                  /* Texto | canal */
  grid-template-columns: minmax(0, 1fr) auto; /* La ficha a su tamaño */
  gap: 24px 48px;                 /* Separación */
  align-items: end;               /* Alineados abajo */
  margin-bottom: clamp(28px, 4vw, 44px); /* Separación con los vídeos */
}
.lm-yt .lm-cabecera {
  margin-bottom: 0;               /* Va en rejilla */
}
.lm-yt__canal {
  display: flex;                  /* Logo + botones en fila */
  align-items: center;            /* Centrados */
  gap: 18px;                      /* Separación */
}
.lm-yt__canal img {
  width: 72px;                    /* Logo del canal */
  height: 72px;                   /* Cuadrado */
  border-radius: 50%;             /* Redondo, como en YouTube */
  display: block;                 /* Sin hueco inferior */
  flex-shrink: 0;                 /* No se encoge */
}
.lm-yt__canal .lm-acciones {
  margin-top: 0;                  /* Sin margen: va junto al logo */
}
/* Los demás canales de la marca, debajo de los vídeos */
.lm-yt__otros {
  margin-top: clamp(40px, 6vw, 64px); /* Separación con los vídeos */
  padding-top: clamp(28px, 4vw, 40px); /* Respiro bajo el filete */
  border-top: 1px solid var(--lm-linea); /* Filete que lo separa */
}
@media (max-width: 1100px) {
  .lm-yt {
    grid-template-columns: 1fr;   /* Una columna: la ficha baja bajo el texto */
    align-items: start;           /* Arriba */
  }
}
@media (max-width: 600px) {
  .lm-yt__canal picture {
    display: none;                /* En móvil sobra el logo (ya sale en la cabecera) y los botones caben enteros */
  }
}
/* Fichas de los otros canales (Relax, Blues & Soul...) */
.lm-canales {
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  display: grid;                  /* Columnas */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Tantas como quepan (si añades Workout, cabe) */
  gap: 16px;                      /* Separación */
}
.lm-canal-item {
  display: grid;                  /* Nombre, texto, acción */
  gap: 6px;                       /* Separación */
  height: 100%;                   /* Misma altura en la fila */
  padding: 20px 22px;             /* Relleno */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  background: var(--lm-blanco);   /* Blanco */
  color: var(--lm-tinta);         /* Texto oscuro */
  text-decoration: none;          /* Sin subrayado */
  transition: border-color .15s ease; /* Suave */
}
.lm-canal-item:hover {
  border-color: var(--lm-bronce); /* Bronce al pasar */
}
.lm-canal-item__titulo {
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
}
.lm-canal-item__texto {
  color: var(--lm-tinta-2);       /* Gris oscuro */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-canal-item__ir {
  margin-top: 6px;                /* Separación */
  font-weight: 700;               /* Negrita */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-bronce);        /* Bronce */
}

/* ================== 14. MENÚ CON SEIS ENTRADAS ================== */
/* Con "Canales" el menú tiene una entrada más: se compacta entre 901 y 1100 px */
@media (min-width: 901px) and (max-width: 1100px) {
  .lm-nav .nav-link {
    padding: 10px 8px;            /* Menos relleno lateral */
  }
  .lm-nav .lm-menu__cta .lm-btn {
    padding: .55rem .8rem;        /* Botón algo más estrecho */
  }
  .lm-nav .lm-brand__nombre {
    display: none;                /* Solo el logo en el menú: el nombre sigue en el pie */
  }
}

/* ================== 15. VÍDEOS EN MÓVIL: filas compactas ================== */
@media (max-width: 820px) {
  .lm-video {
    grid-template-columns: 136px 1fr; /* Miniatura pequeña a la izquierda, título a la derecha */
    align-items: center;          /* Centrados */
    gap: 14px;                    /* Separación */
  }
  .lm-video__titulo {
    font-size: var(--lm-t-s);     /* 15 px */
  }
  .lm-videos {
    gap: 14px;                    /* Filas más juntas */
  }
}

/* ================== 16. FORMULARIOS (contacto y zona privada) ================== */
.lm-form {
  display: grid;                  /* Campos uno debajo de otro */
  gap: 18px;                      /* Separación entre campos */
}
.lm-campos {
  display: grid;                  /* Bloque de campos del alta (se oculta al terminar) */
  gap: 16px;                      /* Separación */
}
.lm-campos[hidden] {
  display: none;                  /* "hidden" gana al display: grid */
}
.lm-form__fila {
  display: grid;                  /* Dos campos por fila */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Mitad y mitad */
  gap: 18px;                      /* Separación */
}
.lm-campo {
  display: grid;                  /* Etiqueta, campo y error */
  gap: 6px;                       /* Separación */
}
.lm-campo label {
  font-weight: 700;               /* Etiqueta en negrita */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-campo__opcional {
  font-weight: 400;               /* "(opcional)" sin negrita */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-input {
  width: 100%;                    /* Todo el ancho */
  min-height: 48px;               /* Zona táctil cómoda */
  padding: 11px 14px;             /* Relleno */
  border: 1.5px solid #CFC6B6;    /* Borde arena, visible sobre papel */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: var(--lm-blanco);   /* Fondo blanco */
  color: var(--lm-tinta);         /* Texto oscuro */
  font: 400 var(--lm-t-m)/1.4 var(--lm-fuente); /* 17 px: en iPhone evita el zoom automático */
}
textarea.lm-input {
  resize: vertical;               /* Solo se estira hacia abajo */
  min-height: 140px;              /* Alto mínimo */
}
.lm-input:focus {
  outline: 2px solid var(--lm-teal); /* Foco teal bien visible */
  outline-offset: 1px;            /* Separado del borde */
  border-color: var(--lm-teal);   /* Borde a juego */
}
.lm-input[aria-invalid="true"] {
  border-color: #D93F45;          /* Rojo: campo con error */
}
.lm-campo__error {
  color: #B3261E;                 /* Rojo oscuro legible */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-check {
  display: flex;                  /* Casilla + texto */
  gap: 10px;                      /* Separación */
  align-items: flex-start;        /* Arriba (el texto puede ocupar varias líneas) */
  font-size: var(--lm-t-s);       /* 15 px */
  line-height: 1.45;              /* Lectura */
  cursor: pointer;                /* Mano: toda la frase marca la casilla */
}
.lm-check input {
  width: 20px;                    /* Casilla grande */
  height: 20px;                   /* Cuadrada */
  margin: 1px 0 0;                /* Alineada con la primera línea */
  flex-shrink: 0;                 /* No se encoge */
  accent-color: var(--lm-grafito); /* Color de la marca */
}
.lm-check--academia {
  padding: 14px 16px;             /* Recuadro para que destaque */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: rgba(212, 175, 55, .14); /* Velo dorado */
  border: 1px solid rgba(212, 175, 55, .55); /* Borde dorado suave */
}
.lm-form__legal {
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-tinta-2);       /* Gris */
  line-height: 1.5;               /* Lectura */
}
.lm-form__legal a {
  color: var(--lm-bronce);        /* Enlace bronce */
}
.lm-btn--ancho {
  width: 100%;                    /* Botón a todo el ancho del formulario */
}
.lm-btn[disabled] {
  opacity: .6;                    /* Atenuado mientras envía */
  cursor: wait;                   /* Reloj */
}
/* Campo trampa para robots: fuera de la pantalla (no display:none, que algunos robots detectan) */
.lm-trampa {
  position: absolute;             /* Fuera del flujo */
  left: -9999px;                  /* Fuera de la pantalla */
  width: 1px;                     /* Mínimo */
  height: 1px;                    /* Mínimo */
  overflow: hidden;               /* Nada visible */
}
/* Avisos (éxito y error) */
.lm-alerta {
  padding: 14px 18px;             /* Relleno */
  border-radius: var(--lm-radio-s); /* Esquinas */
  border-left: 4px solid;         /* Franja de color a la izquierda */
  font-size: var(--lm-t-s);       /* 15 px */
  line-height: 1.5;               /* Lectura */
  color: var(--lm-tinta);         /* Texto oscuro */
}
.lm-alerta p {
  margin: 0;                      /* Sin márgenes */
}
.lm-alerta p + p {
  margin-top: 8px;                /* Separación entre párrafos */
}
.lm-alerta--ok {
  background: #E7F4EC;            /* Verde muy claro */
  border-color: #23955A;          /* Verde de la quinta */
}
.lm-alerta--error {
  background: #FBEAEA;            /* Rojo muy claro */
  border-color: #D93F45;          /* Rojo de la raíz */
}
.lm-alerta a {
  color: inherit;                 /* Enlace del color del texto */
  font-weight: 700;               /* Negrita */
}
.lm-alerta:focus {
  outline: none;                  /* El foco se usa solo para anunciar el mensaje */
}
.lm-campo .lm-check {
  font-weight: 400;               /* La frase de la casilla, sin negrita (la etiqueta de campo sí va en negrita) */
}
.lm-check a {
  color: var(--lm-bronce);        /* Enlace bronce (no azul de serie) */
}
.lm-form > .lm-btn {
  justify-self: start;            /* Botón de enviar a su tamaño en escritorio */
}
@media (max-width: 700px) {
  .lm-form__fila {
    grid-template-columns: 1fr;   /* Un campo por fila en móvil */
  }
  .lm-form > .lm-btn {
    justify-self: stretch;        /* En móvil, botón a todo el ancho (más fácil de pulsar) */
  }
}

/* ================== 17. ZONA PRIVADA: alta, candados y listas ================== */
/* Bloque de alta: texto a la izquierda, formulario en tarjeta clara a la derecha */
.lm-registro {
  display: grid;                  /* Texto | tarjeta */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); /* Algo más ancho el texto */
  gap: 32px 64px;                 /* Separación */
  align-items: start;             /* Arriba */
}
.lm-registro__tarjeta {
  background: var(--lm-papel);    /* Tarjeta clara */
  color: var(--lm-tinta);         /* Texto oscuro */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: clamp(20px, 3vw, 32px); /* Relleno */
}
@media (max-width: 900px) {
  .lm-registro {
    grid-template-columns: 1fr;   /* Una columna */
  }
}
/* Lista con marcas de verificación */
.lm-lista-check {
  list-style: none;               /* Sin viñetas */
  margin: 22px 0 0;               /* Separación */
  padding: 0;                     /* Sin sangría */
  display: grid;                  /* Uno debajo de otro */
  gap: 14px;                      /* Separación */
}
.lm-lista-check li {
  position: relative;             /* Para la marca */
  padding-left: 32px;             /* Hueco para la marca */
  line-height: 1.5;               /* Lectura */
}
.lm-lista-check li::before {
  content: "";                    /* Marca dibujada con bordes */
  position: absolute;             /* Fuera del texto */
  left: 4px;                      /* Posición */
  top: .3em;                      /* A la altura de la primera línea */
  width: 7px;                     /* Palo corto */
  height: 13px;                   /* Palo largo */
  border: solid var(--lm-oro);    /* Dorada */
  border-width: 0 3px 3px 0;      /* Solo dos lados: forma de "check" */
  transform: rotate(45deg);       /* Girada */
}
.lm-seccion--grafito .lm-lista-check li {
  color: var(--lm-niquel);        /* Texto gris claro sobre oscuro */
}
.lm-seccion--grafito .lm-lista-check strong {
  color: var(--lm-hueso);         /* Lo importante, más claro */
}
.lm-nota-pie--oscuro {
  color: var(--lm-niquel);        /* Gris claro sobre oscuro */
  margin-top: 24px;               /* Separación */
}
.lm-nota-pie--oscuro a {
  color: var(--lm-oro-claro);     /* Enlace dorado */
}
/* Botón con candado: grupos de cuerdas de la zona privada */
.lm-chip--bloqueado {
  display: inline-flex;           /* Icono + texto */
  align-items: center;            /* Centrados */
  gap: 6px;                       /* Separación */
  text-decoration: none;          /* Es un enlace, pero parece un chip */
  border-style: dashed;           /* Borde discontinuo: "aún no disponible" */
  color: var(--lm-niquel);        /* Texto apagado */
}
.lm-chip--bloqueado i {
  font-size: .8em;                /* Candado pequeño */
  color: var(--lm-oro);           /* Dorado */
}
.lm-chip--bloqueado:hover {
  border-color: var(--lm-oro);    /* Dorado al pasar */
  color: var(--lm-hueso);         /* Texto claro */
}
/* Aviso que aparece al tocar un candado */
.lm-bloqueo {
  display: flex;                  /* Texto + botón */
  flex-wrap: wrap;                /* Bajan si no caben */
  align-items: center;            /* Centrados */
  gap: 12px 20px;                 /* Separación */
  margin: 0 0 14px;               /* Separación con el mástil */
  padding: 14px 18px;             /* Relleno */
  border: 1px solid rgba(212, 175, 55, .55); /* Borde dorado */
  border-radius: var(--lm-radio-m); /* Esquinas */
  background: rgba(212, 175, 55, .1); /* Velo dorado */
  color: var(--lm-hueso);         /* Texto claro (va sobre el panel oscuro) */
}
.lm-bloqueo[hidden] {
  display: none;                  /* Oculto hasta que se pulsa un candado */
}
.lm-bloqueo p {
  margin: 0;                      /* Sin márgenes */
  flex: 1 1 22rem;                /* Ocupa lo que pueda */
  font-size: var(--lm-t-s);       /* 15 px */
  line-height: 1.5;               /* Lectura */
}
.lm-bloqueo i {
  color: var(--lm-oro);           /* Candado dorado */
}
.lm-bloqueo.is-visto {
  animation: lm-aparece .35s ease; /* Entrada suave */
}
@keyframes lm-aparece {
  from { opacity: 0; transform: translateY(-6px); } /* Empieza un poco más arriba y transparente */
  to { opacity: 1; transform: none; }                 /* Termina en su sitio */
}

/* ================== 18. LOGO NUEVO (pentagrama) EN MENÚ Y PIE ================== */
.lm-brand__logo {
  display: block;                 /* Sin hueco inferior */
  height: 40px;                   /* Alto en el menú */
  width: auto;                    /* Ancho proporcional */
}
.lm-pie .lm-brand__logo {
  height: 44px;                   /* Un poco más grande en el pie */
}
@media (min-width: 901px) and (max-width: 1100px) {
  .lm-nav .lm-brand__logo {
    height: 32px;                 /* Menú compacto: el logo se reduce un poco */
  }
}
@media (max-width: 900px) {
  .lm-nav .lm-brand__logo {
    height: 34px;                 /* Móvil */
  }
}

/* ================== 19. PÁGINA DE CLASES (venta) ================== */
.lm-venta__rejilla {
  display: grid;                  /* Texto | imagen */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* Más ancho el texto */
  gap: 40px 56px;                 /* Separación */
  align-items: center;            /* Centrados en vertical */
}
.lm-venta__imagen {
  margin: 0;                      /* Sin márgenes de figure */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta la imagen */
  aspect-ratio: 4 / 3;            /* Ilustración apaisada */
  border: 1px solid var(--lm-grafito-3); /* Borde discreto */
}
.lm-venta__imagen--foto {
  aspect-ratio: 4 / 5;            /* Retrato vertical */
}
.lm-venta__imagen img {
  width: 100%;                    /* Llena */
  height: 100%;                   /* Llena */
  object-fit: cover;              /* Recorta sin deformar */
  object-position: 70% 50%;       /* En la ilustración, el motivo está a la derecha */
  display: block;                 /* Sin hueco */
}
.lm-venta__datos {
  margin: 28px 0 0;               /* Separación con los botones */
}
@media (max-width: 900px) {
  .lm-venta__rejilla {
    grid-template-columns: 1fr;   /* Una columna */
  }
  .lm-venta__imagen {
    max-width: 520px;             /* No ocupa toda la pantalla */
  }
}
/* "¿Te suena?": problemas típicos en tarjetas */
.lm-dolores {
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin sangría */
  display: grid;                  /* Rejilla */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Tantas como quepan */
  gap: 16px;                      /* Separación */
}
.lm-dolores li {
  position: relative;             /* Para las comillas */
  padding: 22px 22px 22px 54px;   /* Hueco para el signo */
  background: var(--lm-blanco);   /* Blanco */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  font-size: var(--lm-t-m);       /* 17 px */
  line-height: 1.45;              /* Lectura */
  font-weight: 600;               /* Seminegrita: es la voz del alumno */
}
.lm-dolores li::before {
  content: "?";                   /* Signo de pregunta como marca */
  position: absolute;             /* A la izquierda */
  left: 18px;                     /* Posición */
  top: 18px;                      /* Posición */
  width: 24px;                    /* Círculo */
  height: 24px;                   /* Círculo */
  border-radius: 50%;             /* Redondo */
  display: grid;                  /* Centrar */
  place-items: center;            /* Centrado */
  background: var(--lm-oro);      /* Dorado */
  color: var(--lm-grafito);       /* Grafito */
  font-weight: 800;               /* Negrita */
  font-size: 14px;                /* Pequeño */
}
.lm-dolores__cierre {
  margin-top: 28px;               /* Separación */
  max-width: 46rem;               /* Línea corta */
  color: var(--lm-tinta);         /* Más oscuro: es la respuesta */
}
/* Tres perfiles de alumno */
.lm-perfiles {
  display: grid;                  /* Tres columnas */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Iguales */
  gap: 20px;                      /* Separación */
}
.lm-perfil {
  display: flex;                  /* Columna */
  flex-direction: column;         /* Título, texto, enlace */
  gap: 10px;                      /* Separación */
  padding: 26px;                  /* Relleno */
  background: var(--lm-papel);    /* Papel sobre hueso */
  border: 1px solid rgba(122, 92, 46, .25); /* Borde bronce suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
}
.lm-perfil p {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-tinta-2);       /* Gris oscuro */
  flex-grow: 1;                   /* Empuja el enlace abajo */
}
.lm-perfil__titulo {
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
}
@media (max-width: 860px) {
  .lm-perfiles {
    grid-template-columns: 1fr;   /* Una columna */
  }
}
/* Quién te da clase */
.lm-bio {
  display: grid;                  /* Foto | texto */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); /* Más ancho el texto */
  gap: 40px 64px;                 /* Separación */
  align-items: center;            /* Centrados */
}
.lm-bio--sin-foto {
  grid-template-columns: 1fr;     /* Sin foto: solo texto */
}
.lm-bio--sin-foto > div {
  max-width: 50rem;               /* Línea de lectura, alineada a la izquierda como el resto */
}
.lm-bio__foto {
  margin: 0;                      /* Sin márgenes */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta */
  aspect-ratio: 4 / 5;            /* Retrato */
}
.lm-bio__foto img {
  width: 100%;                    /* Llena */
  height: 100%;                   /* Llena */
  object-fit: cover;              /* Sin deformar */
  display: block;                 /* Sin hueco */
}
.lm-bio__texto {
  color: var(--lm-niquel);        /* Gris claro sobre oscuro */
  font-size: var(--lm-t-m);       /* 17 px */
  line-height: 1.6;               /* Lectura */
  margin: 18px 0;                 /* Separación */
}
@media (max-width: 860px) {
  .lm-bio {
    grid-template-columns: 1fr;   /* Una columna */
  }
  .lm-bio__foto {
    max-width: 420px;             /* Foto contenida en móvil */
  }
}
/* Opiniones */
.lm-testimonios {
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin sangría */
  display: grid;                  /* Rejilla */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Tantas como quepan */
  gap: 20px;                      /* Separación */
}
.lm-testimonio {
  padding: 26px;                  /* Relleno */
  background: var(--lm-blanco);   /* Blanco */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
}
.lm-testimonio blockquote {
  margin: 0 0 14px;               /* Separación con el autor */
  font-size: var(--lm-t-m);       /* 17 px */
  line-height: 1.55;              /* Lectura */
}
.lm-testimonio blockquote p {
  margin: 0;                      /* Sin márgenes */
}
.lm-testimonio__autor {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-tinta-2);       /* Gris */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-acciones--fin {
  margin-top: 0;                  /* Va en la rejilla del cierre */
}
.lm-foto-ancha {
  margin: 0;                      /* Sin márgenes */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta */
  aspect-ratio: 16 / 7;           /* Panorámica */
}
.lm-foto-ancha img {
  width: 100%;                    /* Llena */
  height: 100%;                   /* Llena */
  object-fit: cover;              /* Sin deformar */
  display: block;                 /* Sin hueco */
}

/* ================== 20. MENÚ: ENTRAR / MI ZONA (v2) ================== */
.lm-nav .lm-menu__cuenta .nav-link {
  display: inline-flex;           /* Icono + texto en línea */
  align-items: center;            /* Centrados */
  gap: 7px;                       /* Separación */
}
.lm-nav .lm-menu__cuenta .fa-user-circle {
  font-size: 1.05rem;             /* Icono algo mayor que el texto */
  color: var(--lm-oro);           /* Dorado: se distingue de las secciones */
}
@media (min-width: 901px) and (max-width: 1140px) {
  .lm-nav .lm-menu__cuenta .nav-link span {
    position: absolute;           /* Con poco ancho, solo el icono a la vista... */
    width: 1px;                   /* ...pero el texto sigue ahí para los lectores de pantalla */
    height: 1px;                  /* Mínimo */
    overflow: hidden;             /* Oculto */
    clip: rect(0 0 0 0);          /* Recortado */
    white-space: nowrap;          /* Sin partir */
  }
}
@media (max-width: 900px) {
  .lm-nav .lm-menu__cuenta .nav-link {
    display: flex;                /* Fila completa en el panel del móvil */
    justify-content: flex-start;  /* Icono y texto juntos a la izquierda */
  }
}

/* ================== 21. LECTOR DE TABLATURAS: notas encendidas en el mástil (v2) ================== */
.lm-tocada circle {
  stroke-width: 2;                /* Contorno marcado */
}
.lm-tocada text {
  font: 800 12px var(--lm-fuente); /* Negrita */
  pointer-events: none;           /* Sin interacción */
}
.lm-tocada--ahora circle {
  fill: var(--lm-oro);            /* La nota que suena: dorada */
  stroke: var(--lm-grafito);      /* Contorno oscuro sobre la madera */
}
.lm-tocada--ahora text {
  fill: var(--lm-grafito);        /* Texto oscuro sobre el dorado */
}
.lm-tocada--luego circle {
  fill: rgba(11, 14, 19, .55);    /* La siguiente: hueco oscuro… */
  stroke: rgba(239, 231, 218, .7); /* …con contorno claro */
  stroke-dasharray: 3 3;          /* Discontinuo: "todavía no" */
}
.lm-tocada--luego text {
  fill: rgba(239, 231, 218, .8);  /* Texto claro y suave */
}