/* Componente de marca, con dos variantes, cada una en un solo archivo y pintada con
   la tinta del texto que la rodea (currentColor) mediante una máscara: así sirve en
   tinta y en blanco sin duplicar archivos.

   - Símbolo solo, marca.svg (cuatro barras ascendentes):
       <span class="marca" aria-hidden="true"></span>
     Tamaño con --marca (caja cuadrada; 28px por omisión).
   - Logo completo, logo.svg (símbolo + «Evoluciona» dibujada en Inter Tight 800,
     sólo rellenos, sin fuente):
       <span class="marca-logo" role="img" aria-label="Evoluciona"></span>
     Tamaño con --marca-logo, que es la ALTURA del logo; el ancho sale de la
     proporción del viewBox (887,01 × 151,41). La mayúscula mide 0,66 de esa
     altura y el símbolo, 0,99. Dentro de un enlace con aria-label el nombre ya
     lo da el enlace, y el logo va con aria-hidden="true".

   Los tamaños viven aquí. */
:root {
  --marca-s: 22px; --marca-m: 28px; --marca-l: 32px;
  /* Altura del logo completo; la mayúscula es 0,66 de ella (21px → 13,9px). */
  --marca-logo-s: 19px; --marca-logo-m: 21px; --marca-logo-l: 23px;
}
.marca {
  --marca: var(--marca-m);
  display: inline-block; flex: none;
  width: var(--marca); height: var(--marca);
  background-color: currentColor;
  -webkit-mask: url(/static/marca.svg) center / contain no-repeat;
  mask: url(/static/marca.svg) center / contain no-repeat;
}
.marca-s { --marca: var(--marca-s); }
.marca-l { --marca: var(--marca-l); }

.marca-logo {
  --marca-logo: var(--marca-logo-m);
  display: inline-block; flex: none; vertical-align: middle;
  height: var(--marca-logo);
  width: calc(var(--marca-logo) * 5.8583);
  background-color: currentColor;
  -webkit-mask: url(/static/logo.svg) left center / auto 100% no-repeat;
  mask: url(/static/logo.svg) left center / auto 100% no-repeat;
  /* La palabra se apoya en la base del logo y su mayúscula queda bajo el centro de la
     caja: se sube 0,08 de la altura para que la palabra quede a la par del texto
     vecino centrado en la misma línea (navegación, saldo, «Volver»). */
  translate: 0 calc(var(--marca-logo) * -.08);
}
.marca-logo-s { --marca-logo: var(--marca-logo-s); }
.marca-logo-l { --marca-logo: var(--marca-logo-l); }
/* Sólo el símbolo del mismo archivo: se recorta el logo al ancho de las barras
   (141,42 de 151,41). Para los encabezados que se quedan sin espacio. */
.marca-logo-simbolo { width: calc(var(--marca-logo) * .934); translate: none; }

/* Con colores forzados (alto contraste de Windows) el fondo se reemplaza por el del
   sistema y la máscara quedaría invisible: se pinta con el color de texto del sistema. */
@media (forced-colors: active) {
  .marca, .marca-logo { forced-color-adjust: none; background-color: CanvasText; }
}