/* La marca de Cardmarket (tandas 368 y 369).
 *
 * En su propia hoja porque la usan DOS páginas: la ficha de una carta
 * (/carta) y la lista de «Mi colección». Estaba dentro de `css/carta.css`
 * y /mi-coleccion no la carga — es la trampa de la 299, que en esta misma
 * tanda ya obligó a sacar el dibujo a `js/cardmarket-marca.js`: si el CSS
 * se queda en la hoja de una página, la otra enseña el logo sin estilo.
 *
 * Y no va a `components.css`, que lo baja TODO el mundo: esto solo lo ven
 * dos pantallas del catálogo.
 *
 * El dibujo lo pone js/cardmarket-marca.js; aquí solo se coloca.
 */

.cm-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cm-logo-texto {
  color: var(--cm-azul);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* En oscuro el azul de la marca sobre fondo oscuro no se lee: el logo va
   en su propia chapa clara, como se pone un logo ajeno en cualquier
   sitio. No se le aclara el azul, que sería inventarse su marca. */
:root[data-theme='dark'] .cm-logo,
:root:not([data-theme='light']) .cm-logo {
  padding: 4px 12px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--blanco-fijo);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .cm-logo {
    padding: 0;
    background: none;
  }
}

/* El botón que lleva a Cardmarket, con su marca delante. Va en el azul
   de ellos y con el blanco fijo encima — `--white` aquí dejaría letra
   oscura sobre azul en el tema oscuro (norma de la casa). */
.btn-cardmarket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--e-md);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--cm-azul, #00256a);
  color: var(--blanco-fijo);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s var(--ease);
}

.btn-cardmarket:hover {
  filter: brightness(1.25);
}

/* La marca dentro del botón va en blanco: sobre su azul, el azul no se
   vería. Es el mismo logo, en su versión de una tinta. */
.btn-cardmarket .cm-marca path {
  fill: var(--blanco-fijo);
  stroke: var(--blanco-fijo);
}

@media (prefers-reduced-motion: reduce) {
  .btn-cardmarket {
    transition: none;
  }
}