/* Globesp Brand — componente reutilizable HTML+CSS
   Renderiza el logo "GLOBESP find your way" con texto real (Inter del
   sistema/CDN) en lugar de texto SVG (que falla cuando la fuente no carga
   a tiempo). La diana es CSS puro: anillo + punto azul.
   Uso:
     <div class="gx-brand" style="--gx-brand-size:64px; color:#fff">
       <div class="gx-brand-row">
         <span class="gx-brand-text">GL</span>
         <span class="gx-brand-mark" aria-hidden="true"></span>
         <span class="gx-brand-text">BESP</span>
       </div>
       <div class="gx-brand-tag">find your way</div>
     </div>
   El tamaño se controla con la variable --gx-brand-size (px).
*/
.gx-brand {
  --gx-brand-size: 56px;
  --gx-brand-mark-fill: #3b82f6;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "ss01", "ss02";
  line-height: 1;
  color: currentColor;
}

.gx-brand-row {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--gx-brand-size) * 0.04);
}

.gx-brand-text {
  font-size: var(--gx-brand-size);
  font-weight: 900;
  letter-spacing: calc(var(--gx-brand-size) * -0.04);
  line-height: 1;
  color: currentColor;
}

/* La diana es un SVG inline con un arco abierto (gap superior derecho) y
   un círculo central. Usa currentColor para el anillo y la variable
   --gx-brand-mark-fill para el punto, así se integra con el contexto. */
.gx-brand-mark {
  display: inline-block;
  width: calc(var(--gx-brand-size) * 0.92);
  height: calc(var(--gx-brand-size) * 0.92);
  margin: 0 calc(var(--gx-brand-size) * 0.02);
  flex: 0 0 auto;
  position: relative;
  line-height: 0;
}
.gx-brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gx-brand-mark .gx-brand-arc { stroke: currentColor; }
.gx-brand-mark .gx-brand-dot {
  fill: var(--gx-brand-mark-fill);
  filter: drop-shadow(0 0 calc(var(--gx-brand-size) * 0.04) rgba(59, 130, 246, 0.55));
}

.gx-brand-tag {
  font-size: calc(var(--gx-brand-size) * 0.30);
  font-weight: 600;
  letter-spacing: calc(var(--gx-brand-size) * 0.04);
  margin-top: calc(var(--gx-brand-size) * 0.06);
  color: currentColor;
  opacity: 0.92;
}

/* Variante en línea horizontal compacta (sin "find your way") */
.gx-brand--inline {
  flex-direction: row;
}
.gx-brand--inline .gx-brand-tag { display: none; }

/* Variante "armónica con teal": el punto del centro toma el accent del shell */
.gx-brand--teal {
  --gx-brand-mark-fill: #00d4aa;
}