/* =====================================================================
   SWM Online - Override de colores del template Hostech
   Paleta de marca Solution Web México: morado #7200FF / #4E00BE
   ===================================================================== */
:root {
  --theme: #7200FF;
  --theme2: #4E00BE;
  --border: #E4D6FF;
  --border-2: #E6DCF7;
  --bg: #F8F5FC;
}

/* Logo SWM: es un icono cuadrado (no wordmark horizontal como el del template) */
.header-logo img,
.header-logo-2 img,
.footer-widgets-wrapper .single-footer-widget .widget-head img {
  height: 48px;
  width: auto;
}
.offcanvas__logo a img {
  width: 48px;
  height: 48px;
}

/* Iconos SVG de SWM dentro de las tarjetas del mega-menu (mismo tamaño que los PNG originales) */
.homemenu-list .icon img {
  width: 26px;
  height: 26px;
}

/* Iconos de CMS (WordPress/Joomla/Drupal/Magento) en data-center-box-items, mismo tamaño que las banderas originales */
.data-center-box-items h3 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Capturas de pantalla de proyectos como "icono" de tarjeta en el portafolio (ourwork.php) */
.portfolio-section .hosting-inner-items .icon img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
}

/* Logos de clientes en el carrusel de marcas del portafolio (ourwork.php) */
.portfolio-logos .brand-img img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Logos de marcas SSL y CMS/cPanel en los carruseles de marca (index.php),
   con tamaños/formatos distintos a los logos originales del template */
.brand-section .brand-img img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

/* Iconos de medios de pago (Amex/Stripe) en el footer, junto a los logos
   PNG de Visa/Mastercard - mismo tamaño visual dentro de las cajas
   ".brand-logo li" */
.footer-bottom .footer-wrapper .brand-logo li i {
  font-size: 22px;
  line-height: 1;
  color: var(--white);
}

/* Filtro de categorías del blog (blog.php), adaptado de .choose-us-top-inner */
.blog-cat-filter ul {
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
.blog-cat-filter ul li {
  padding: 0;
  overflow: hidden;
}
.blog-cat-filter ul li a {
  display: block;
  padding: 14px 30px;
  color: var(--header);
  text-decoration: none;
}
.blog-cat-filter ul li:hover,
.blog-cat-filter ul li.active {
  background-color: var(--theme);
  border: 1px solid transparent;
}
.blog-cat-filter ul li:hover a,
.blog-cat-filter ul li.active a {
  color: var(--white);
}

/* Preloader: logo SWM centrado dentro del anillo giratorio (sin texto) */
.preloader .animation-preloader .spinner {
  position: relative;
}
.preloader .animation-preloader .spinner .preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  max-width: 70px;
  height: auto;
  /* Contra-rotación: el anillo (.spinner) gira, esta animación cancela
     ese giro para que el logo se vea fijo y solo el anillo se mueva. */
  animation: preloaderLogoCounterSpin 1s infinite linear;
}
@keyframes preloaderLogoCounterSpin {
  from {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateZ(-360deg);
  }
}