/* ============================================================
   Transform & Clean · La marca (monograma «T&C» + nombre + lema)

   Fuente ÚNICA de los estilos del logo. La usan dos pantallas que no comparten sistema
   de estilos: la página pública (templates/publico/inicio.html, sin Bootstrap) y el
   login (templates/auth/login.html, con Bootstrap + tema + luxsop). Por eso esta hoja no
   depende de ninguna de las dos:
   · colores LITERALES, no variables de tema.css — la página pública no lo carga;
   · fuente e interlineados EXPLÍCITOS — si se heredaran, el logo mediría distinto en
     cada pantalla (1.65 de interlineado en la pública, 1.5 en Bootstrap; Inter en el
     login, la del sistema en la pública).
   El marcado sale del macro `marca()` de templates/components/marca.html; el envoltorio
   (<a> en la página, <div> en el login) lo pone cada pantalla con la clase `.marca`.
   ============================================================ */

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.marca__mono {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #162566;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;            /* es un cuadro centrado: su interlineado no mueve nada */
  letter-spacing: -.02em;
}

/* El bloque nombre+lema. Interlineado propio: si heredara el de la página (1.65 / 1.5),
   el renglón del nombre crecería y el lema bajaría. */
.marca__texto {
  min-width: 0;
  line-height: 1.1;
}

.marca__nombre {
  display: block;            /* <span> en la página y <h1> en el login: que midan igual */
  margin: 0;                 /* en el login es un <h1>: fuera el margen de Bootstrap */
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #162566;
}

.marca__lema {
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .12em;
  color: #475569;
}

/* Sobre fondo oscuro (pie de la página pública): el cuadro se invierte para no perderse. */
.marca--invertida .marca__mono   { background: #fff; color: #162566; }
.marca--invertida .marca__nombre { color: #fff; }
.marca--invertida .marca__lema   { color: #a5b4d8; }

@media (max-width: 760px) {
  .marca__nombre { font-size: 1.1rem; }
}