/* =========================================================
   Búho · Logotipos de sistemas y servicios
   Complementa la hoja generada en logos-marcas/logos-marcas.css.
   Aquí solo vive la presentación; las siluetas oficiales viven en
   assets/logos-marcas/ y no se redibujan.
   ========================================================= */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.specband__track .logo-marca {
  --lm: 22px;
  color: #fff;
}

.specband__track .logo-marca--wide {
  width: 76px;
  height: 22px;
}

.specband__track .logo-oficial-img {
  max-width: 106px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}

.specband__track .logo-oficial-img--softaculous {
  width: 100px;
}

.specband__track .logo-oficial-img--webmail {
  height: 19px;
  max-width: 82px;
}

.specband__track .logo-oficial-img--jetbackup {
  height: 22px;
  max-width: 88px;
}

.logo-sistema {
  --lm: 24px;
  color: currentColor;
}

.ico .logo-cpanel {
  width: 36px;
  height: 22px;
}

.bento .ico.ico--woo {
  width: 76px;
  height: 42px;
}

.woo-wordmark {
  display: block;
  width: 58px;
  height: auto;
}

.brand-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-heading .logo-marca {
  width: 100px;
  height: 25px;
  color: var(--motif-b-ink, var(--buho-blue-700));
}

.brand-heading .brand-icon {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

.mock-product {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 7px;
}

.mock-product .logo-marca {
  --lm: 54px;
  height: 17px;
  color: rgba(255,255,255,.9);
}

.fpill .logo-marca {
  --lm: 62px;
  height: 17px;
  color: var(--buho-navy-950);
}

/* Logos raster/SVG a color para Google Workspace y servicios afines. */
.product-logo {
  display: inline-block;
  width: var(--pl, 22px);
  height: var(--pl, 22px);
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* El monograma «cP» es apaisado (1.49 : 1). En la caja
   cuadrada de la fila quedaría con 13.4 px de tinta —muy por
   debajo de Zoho y Outlook, que la llenan— así que se le da
   su propia caja. Medido en la página, la fila tiene masa
   √(ancho × alto) de 20.0 (Zoho) y 19.3 (Outlook); con
   24 × 16 el monograma da 19.6 y encaja entre las dos. */
.product-logo--cpanel { width: 24px; height: 16px; }

.product-logo--wordmark {
  width: var(--plw, 116px);
  height: var(--plh, 18px);
}

.crumb-product {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.crumb-product .product-logo--wordmark {
  --plw: 108px;
  --plh: 14px;
}

.mock-product-logo {
  --pl: 23px;
}

.mock-softaculous {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.mock-softaculous .product-logo {
  width: 78px;
  height: 18px;
}

.fpill .product-logo {
  --pl: 18px;
}

.trust__it .product-logo {
  --pl: 20px;
}

.specband__track .product-logo {
  --pl: 22px;
}

.specband__track .product-logo--vault {
  --pl: 24px;
}

.explore .ico.ico--brand {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0,17,68,.08), 0 5px 14px rgba(0,17,68,.08);
}

.explore .ico--brand .product-logo {
  --pl: 27px;
}

.inline-apps,
.plan-apps,
.cmp-brand {
  display: inline-flex;
  align-items: center;
}

.inline-apps {
  gap: 5px;
  margin-right: 4px;
}

.inline-apps .product-logo {
  --pl: 19px;
}

.plan-apps {
  gap: 8px;
  min-height: 25px;
  margin-top: 13px;
}

.plan-apps .product-logo {
  --pl: 24px;
}

.plan__feats .product-logo {
  --pl: 18px;
}

.techrow .product-logo,
.techrow .logo-marca {
  --pl: 20px;
  --lm: 20px;
}

.techrow .product-logo--apps {
  width: 72px;
  height: 18px;
}

.sec--navy .techrow .logo-marca {
  color: #fff;
}

.cmp-brand {
  gap: 8px;
  min-height: 24px;
}

.cmp-brand .product-logo--wordmark {
  --plw: 126px;
  --plh: 18px;
}

.cmp-brand .product-logo--zoho {
  --pl: 25px;
}

.bento .ico.ico--webmail {
  width: 82px;
  height: 42px;
  background: #fff;
}

.ico--webmail .product-logo {
  width: 66px;
  height: 25px;
}

@media (max-width: 600px) {
  .crumb-product .product-logo--wordmark {
    --plw: 94px;
    --plh: 12px;
  }

  .plan-apps {
    gap: 7px;
  }
}