/* ==========================================================================
   LM-INTERIORES.CSS · Lavado de cara de las páginas interiores (v2)
   Herramientas, metrónomo, Groove Lab, descargas, servicios, quiénes somos,
   Rider Planner y clases tenían su propio estilo (morado, rosa, naranja).
   Este archivo las pasa a la marca sin tocar su HTML ni su JavaScript:
     1) Cambia los colores de sus variables (se definen en <body>, que gana a :root).
     2) Corrige los colores escritos a mano con selectores ".lm-v2 ..." (más específicos
        que los de cada página, así que ganan aunque su CSS se cargue después).
   head.php añade la clase "lm-v2" a todas las páginas.
   Depende de los tokens --lm-* de luena-v2.css.
   ========================================================================== */

/* ================== 1. VARIABLES DE LAS PÁGINAS ANTIGUAS → MARCA ================== */
body.lm-v2 {
  --brand-1: var(--lm-oro);               /* Antes rojo: degradado de botones */
  --brand-2: var(--lm-oro-claro);         /* Antes ámbar */
  --accent: var(--lm-grafito);            /* Azul de acento → grafito */
  --band-ivory: var(--lm-hueso);          /* Banda marfil → hueso de la marca */
  --band-white: var(--lm-papel);          /* Banda blanca → papel */
  --text: var(--lm-tinta);                /* Texto principal */
  --text-dim: var(--lm-tinta-2);          /* Texto secundario */
  --border: var(--lm-linea);              /* Bordes */
  --tool-active: var(--lm-bronce);        /* Herramientas: morado → bronce */
  --downloads-primary: var(--lm-bronce);  /* Descargas: morado → bronce */
  --downloads-primary-hover: #5E4622;     /* Bronce más oscuro */
  --downloads-secondary: var(--lm-oro);   /* Rosa → dorado */
  --downloads-accent: var(--lm-oro);      /* Naranja → dorado */
  --metro-brand: var(--lm-grafito);       /* Metrónomo: morado → grafito */
  --metro-accent: var(--lm-oro);          /* Ámbar → dorado */
  --metro-led-on: var(--lm-oro);          /* Luz del pulso dorada */
  --metro-success: #1D7A49;               /* Verde algo más sobrio */
  --metro-danger: #B3261E;                /* Rojo algo más sobrio */
  --service-active: var(--lm-bronce);     /* Servicios: rojo → bronce */
  --service-accent: var(--lm-oro);        /* Ámbar → dorado */
  --panel: #F4EFE6;                       /* Paneles: antes rosado (#faebeb) → hueso claro */
  --panel-2: #F7F4EE;                     /* Panel secundario */
  --panel-3: var(--lm-blanco);            /* Panel blanco */
  background: var(--lm-papel);            /* Fondo de lectura */
  color: var(--lm-tinta);                 /* Texto */
}

/* ================== 2. PIEZAS COMUNES ================== */
/* Bandas de sección: más aire y sin el efecto de "pestaña" */
.lm-v2 .band {
  padding: clamp(40px, 6vw, 72px) 0;      /* Aire vertical generoso */
  border-color: var(--lm-linea);          /* Filetes suaves */
}
.lm-v2 .band::before {
  display: none;                          /* Fuera la franja con sombra */
}
/* Títulos de sección: Archivo condensada, icono bronce */
.lm-v2 .section-title {
  font-family: var(--lm-fuente);          /* Archivo */
  font-stretch: var(--lm-estrecha);       /* Condensada */
  font-weight: 800;                       /* Muy negrita */
  font-size: var(--lm-t-xl);              /* Tamaño de sección */
  letter-spacing: -.005em;                /* Un pelo más junta */
  color: var(--lm-tinta);                 /* Tinta */
}
.lm-v2 .section-title i {
  color: var(--lm-bronce);                /* Icono bronce (antes morado) */
  font-size: .8em;                        /* Algo más pequeño que el texto */
}
.lm-v2 .section-title--sub {
  font-family: var(--lm-fuente);          /* Archivo */
  font-stretch: 100%;                     /* Ancho normal */
  font-weight: 500;                       /* Ligera */
  font-size: var(--lm-t-l);               /* 21 px, como las entradillas */
  color: var(--lm-tinta-2);               /* Gris oscuro */
}
/* Caja de introducción (estaba en morado con degradado) */
.lm-v2 .seo-intro {
  background: var(--lm-blanco);           /* Blanco */
  border: 1px solid var(--lm-linea);      /* Borde suave */
  border-left: 4px solid var(--lm-oro);   /* Franja dorada */
  border-radius: var(--lm-radio-m);       /* Esquinas */
  box-shadow: none;                       /* Sin sombra de color */
  color: var(--lm-tinta-2);               /* Texto gris oscuro */
}
.lm-v2 .seo-intro strong {
  color: var(--lm-tinta);                 /* Negrita en tinta, no en color */
}
/* Botón de llamada a la acción (era una píldora naranja-roja) */
.lm-v2 .btn-cta {
  display: inline-flex;                   /* Icono + texto */
  align-items: center;                    /* Centrados */
  gap: .5rem;                             /* Separación */
  min-height: 48px;                       /* Táctil */
  padding: .8rem 1.4rem;                  /* Relleno */
  border-radius: var(--lm-radio-s);       /* Esquinas de la marca */
  background: var(--lm-oro);              /* Dorado sólido */
  color: var(--lm-grafito);               /* Texto grafito */
  font-family: var(--lm-fuente);          /* Archivo */
  font-weight: 700;                       /* Negrita */
  box-shadow: none;                       /* Sin sombra */
  border: 0;                              /* Sin borde */
}
.lm-v2 .btn-cta:hover {
  background: var(--lm-oro-claro);        /* Dorado claro al pasar */
  color: var(--lm-grafito);               /* Mismo texto */
  transform: none;                        /* Sin saltos */
}
/* Bloque final de llamada a la acción: banda oscura */
.lm-v2 .cta-final {
  background: var(--lm-grafito);          /* Grafito */
  color: var(--lm-hueso);                 /* Texto claro */
  margin: 0;                              /* Pegado a la sección anterior */
  padding: clamp(40px, 6vw, 64px) 0;      /* Aire */
  border-radius: 0;                       /* Sin esquinas */
}
.lm-v2 .cta-final::before,
.lm-v2 .cta-final::after {
  display: none;                          /* Fuera los círculos decorativos */
}
.lm-v2 .cta-final h2,
.lm-v2 .cta-final p {
  color: inherit;                         /* Texto claro */
}
.lm-v2 .cta-final .nav-link {
  color: var(--lm-niquel) !important;     /* Enlace secundario gris claro */
}

/* Tarjetas genéricas de las páginas antiguas */
.lm-v2 .tool-card,
.lm-v2 .benefit-card,
.lm-v2 .routine-card,
.lm-v2 .resource-card,
.lm-v2 .usage-card,
.lm-v2 .faq-item,
.lm-v2 .service-card,
.lm-v2 .audience-card,
.lm-v2 .diff-card,
.lm-v2 .lm-metro__card,
.lm-v2 .contact-form,
.lm-v2 .contact-info-aside {
  background: var(--lm-blanco);           /* Blanco limpio */
  border: 1px solid var(--lm-linea);      /* Borde suave */
  border-radius: var(--lm-radio-m);       /* Esquinas de la marca */
  box-shadow: none;                       /* Sin sombras de color */
}
.lm-v2 .tool-card--available:hover,
.lm-v2 .benefit-card:hover,
.lm-v2 .resource-card:hover,
.lm-v2 .usage-card:hover,
.lm-v2 .faq-item:hover,
.lm-v2 .service-card--available:hover,
.lm-v2 .audience-card:hover {
  border-color: var(--lm-bronce);         /* Bronce al pasar */
  box-shadow: 0 10px 28px rgba(11, 14, 19, .08); /* Sombra neutra muy suave */
  transform: none;                        /* Sin saltos */
}
/* Franjas de color que algunas tarjetas pintaban arriba */
.lm-v2 .resource-card::before,
.lm-v2 .usage-card::before {
  background: var(--lm-oro);              /* Dorado */
}
/* Iconos dentro de tarjetas: chapa hueso con icono bronce */
.lm-v2 .tool-card__icon,
.lm-v2 .benefit-card__icon,
.lm-v2 .service-card__icon,
.lm-v2 .audience-card__icon,
.lm-v2 .resource-card__icon,
.lm-v2 .modal-icon {
  background: var(--lm-hueso);            /* Chapa hueso */
  border: 0;                              /* Sin borde */
  color: var(--lm-bronce);                /* Icono bronce */
  box-shadow: none;                       /* Sin sombra */
}
.lm-v2 .resource-card__icon i,
.lm-v2 .modal-icon i {
  color: var(--lm-bronce);                /* Por si el icono tenía color propio */
}
/* Iconos atenuados (próximamente) */
.lm-v2 .tool-card__icon--dim,
.lm-v2 .service-card__icon--dim {
  background: #F1EEE8;                    /* Gris cálido */
  color: #8A8F97;                         /* Gris */
}
/* Números en círculo (rutinas, pasos) */
.lm-v2 .routine-card__number,
.lm-v2 .usage-card__number,
.lm-v2 .diff-card__number {
  background: var(--lm-grafito);          /* Círculo grafito */
  color: var(--lm-oro);                   /* Número dorado (como los pasos de la portada) */
  box-shadow: none;                       /* Sin sombra */
}
/* Etiquetas pequeñas */
.lm-v2 .routine-card__tool,
.lm-v2 .audience-card__service {
  background: var(--lm-hueso);            /* Hueso */
  color: var(--lm-bronce);                /* Bronce */
}
.lm-v2 .tool-badge--active,
.lm-v2 .service-badge--active {
  background: #E7F4EC;                    /* Verde muy claro */
  color: #1D7A49;                         /* Verde oscuro legible */
  border-color: rgba(35, 149, 90, .35);   /* Borde verde suave */
}
/* Botones de tarjetas (morado/rojo con degradado) */
.lm-v2 .tool-card__cta,
.lm-v2 .service-card__cta,
.lm-v2 .resource-card__cta,
.lm-v2 .btn-submit {
  background: var(--lm-grafito);          /* Grafito sólido */
  color: var(--lm-hueso);                 /* Texto claro */
  border-radius: var(--lm-radio-s);       /* Esquinas */
  box-shadow: none;                       /* Sin sombra */
}
.lm-v2 .tool-card--available:hover .tool-card__cta,
.lm-v2 .service-card--available:hover .service-card__cta,
.lm-v2 .resource-card__cta:hover,
.lm-v2 .btn-submit:hover:not(:disabled) {
  background: var(--lm-oro);              /* Dorado al pasar */
  color: var(--lm-grafito);               /* Texto grafito */
  box-shadow: none;                       /* Sin sombra */
}
/* La tarjeta destacada de descargas: botón principal dorado */
.lm-v2 .resource-card--featured {
  border: 2px solid var(--lm-oro);        /* Borde dorado */
  background: var(--lm-blanco);           /* Sin degradado */
}
.lm-v2 .resource-card--featured .resource-card__cta {
  background: var(--lm-oro);              /* Dorado */
  color: var(--lm-grafito);               /* Texto grafito */
}
.lm-v2 .resource-card--featured .resource-card__cta:hover {
  background: var(--lm-oro-claro);        /* Dorado claro */
}
.lm-v2 .resource-card__badge {
  background: var(--lm-grafito);          /* Etiqueta grafito */
  color: var(--lm-oro);                   /* Texto dorado */
  box-shadow: none;                       /* Sin sombra */
}
/* Iconos de listas y preguntas */
.lm-v2 .tool-card__features i,
.lm-v2 .service-card__features i,
.lm-v2 .resource-card__specs li i,
.lm-v2 .faq-question i,
.lm-v2 .form-group label i,
.lm-v2 .modal-privacy i,
.lm-v2 .help i,
.lm-v2 .benefit-icon,
.lm-v2 .card-section-title i,
.lm-v2 .contact-methods i {
  color: var(--lm-bronce);                /* Bronce */
}
.lm-v2 .contact-methods i {
  background: var(--lm-hueso);            /* Chapa hueso */
}
.lm-v2 .usage-card__text strong,
.lm-v2 .service-card__price,
.lm-v2 .form-legal a {
  color: var(--lm-bronce);                /* Bronce */
}
/* Campos de formulario de las páginas antiguas */
.lm-v2 .form-group input:focus,
.lm-v2 .form-group select:focus,
.lm-v2 .form-group textarea:focus {
  border-color: var(--lm-teal);           /* Foco teal */
  box-shadow: 0 0 0 3px rgba(0, 194, 199, .15); /* Halo teal suave */
  outline: none;                          /* Sin contorno doble */
}

/* ================== 3. METRÓNOMO ================== */
.lm-v2 .lm-metro__bpm {
  background: none;                       /* Fuera el degradado morado */
  -webkit-text-fill-color: var(--lm-tinta); /* Número en tinta */
  color: var(--lm-tinta);                 /* Tinta */
  font-family: var(--lm-fuente);          /* Archivo */
  font-stretch: var(--lm-estrecha);       /* Condensada */
}
.lm-v2 .lm-metro__slider::-webkit-slider-thumb {
  background: var(--lm-oro);              /* Tirador dorado */
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .25); /* Halo dorado */
}
.lm-v2 .lm-metro__slider::-moz-range-thumb {
  background: var(--lm-oro);              /* Tirador dorado */
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .25); /* Halo dorado */
}
.lm-v2 .pattern-btn:hover,
.lm-v2 .lm-metro__checkbox--primary {
  background: var(--lm-hueso);            /* Hueso */
  border-color: var(--lm-bronce);         /* Bronce */
}
.lm-v2 .pattern-btn:active,
.lm-v2 .pattern-btn.active,
.lm-v2 .lm-metro__toggle.active {
  background: var(--lm-grafito);          /* Activo: grafito */
  color: var(--lm-oro);                   /* Texto dorado */
  border-color: var(--lm-grafito);        /* Borde a juego */
}
.lm-v2 .btn-tap {
  background: var(--lm-hueso);            /* Hueso */
  border-color: var(--lm-bronce);         /* Bronce */
  color: var(--lm-bronce);                /* Bronce */
}
.lm-v2 .lm-metro__dot {
  background: var(--lm-oro);              /* Punto del pulso dorado */
  box-shadow: 0 0 16px rgba(212, 175, 55, .45); /* Brillo dorado */
}
.lm-v2 .lm-metro__progress-bar {
  background: var(--lm-oro);              /* Barra dorada */
}
.lm-v2 .lm-metro__card--training {
  border: 2px solid var(--lm-oro);        /* Tarjeta destacada con borde dorado */
  background: var(--lm-blanco);           /* Sin degradado */
}
.lm-v2 .lm-metro__radio:hover {
  background: var(--lm-hueso);            /* Hueso al pasar */
}
.lm-v2 .lm-metro__timer-display {
  color: var(--lm-tinta);                 /* Tinta */
}
.lm-v2 .lm-metro__tip {
  background: var(--lm-blanco);           /* Blanco */
  border: 1px solid var(--lm-linea);      /* Borde suave */
  border-left: 4px solid var(--lm-oro);   /* Franja dorada */
}
.lm-v2 .breadcrumbs a {
  color: var(--lm-bronce);                /* Migas bronce */
}

/* ================== 4. ANILLOS DE FOCO Y DETALLES MORADOS DE STYLES.CSS ================== */
.lm-v2 :focus-visible {
  outline: 2px solid var(--lm-teal);      /* Foco teal en toda la web (antes morado) */
  outline-offset: 2px;                    /* Separado */
}
.lm-v2 .info-pill {
  border-color: var(--lm-linea);          /* Bordes suaves */
}

/* Controles nativos (deslizadores y casillas) con los colores de la marca */
.lm-v2 input[type="range"] {
  accent-color: var(--lm-oro);            /* Deslizadores dorados (antes azul del navegador) */
}
.lm-v2 input[type="checkbox"],
.lm-v2 input[type="radio"] {
  accent-color: var(--lm-grafito);        /* Casillas grafito */
}

/* ================== 5. TEXTOS DE LECTURA ================== */
.lm-v2 main p,
.lm-v2 .band p {
  line-height: 1.6;                       /* Lectura cómoda */
}