/* ==========================================================================
   GS01 — LOGO E ICONOS
   Los SVG de /assets se usan como máscara: la forma la pone el SVG y el
   color lo pone `background-color`, que lee una variable. Así los archivos
   originales no se tocan.
   Requiere servirse desde http (dev/serve.ps1); con file:// no funciona.
   Uso: <span class="gs-logo" role="img" aria-label="GS01"></span>
   ========================================================================== */

.gs-logo,
.gs-cross {
  display: inline-block;
  background-color: var(--icon-color, currentColor);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   LOGO
   Usa la copia derivada (dev/make-logo.ps1): su lienzo abarca todo el
   dibujo, sin el recorte de 0,4 por la derecha ni el aire de arriba y abajo
   del original. El ancho y el alto que pongas son los del logo visible.
   -------------------------------------------------------------------------- */
.gs-logo {
  --icon-color: var(--logo-color);
  width: var(--logo-width, 200px);
  aspect-ratio: 2000.7 / 1250.3;
  -webkit-mask-image: url("../assets/identidad/logos/derived/gs01-logo.svg");
          mask-image: url("../assets/identidad/logos/derived/gs01-logo.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}


/* --------------------------------------------------------------------------
   CRUZ
   -------------------------------------------------------------------------- */
.gs-cross {
  --icon-color: var(--c-detail);
  width: var(--cross-size, 16px);
  aspect-ratio: 1;
  -webkit-mask-image: url("../assets/web-assets/background/cross.svg");
          mask-image: url("../assets/web-assets/background/cross.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
}