/* Kumo Labs — ajustes propios sobre la base del tema.
   Todo lo demás vive en style.css / colors/violet.css, que no se tocan. */

/* Logo: el archivo SVG mide 176x40 (símbolo K + nombre), aquí se fija la altura de uso */
.navbar-brand img,
.offcanvas-header img {
  height: 50px;
  width: auto;
}

.footer-logo {
  height: 52px;
  width: auto;
}

/* Cabecera móvil/tablet: logo centrado y el botón del menú pegado a la derecha. */
@media (max-width: 991.98px) {
  .navbar.center-logo .navbar-brand {
    margin: 0 auto;
  }
  .navbar.center-logo .container > .d-flex {
    position: relative;
    justify-content: center !important;
  }
  .navbar.center-logo .navbar-other {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

@media (max-width: 400px) {
  .navbar-brand img,
  .offcanvas-header img {
    height: 44px;
  }
}

/* Cabecera de escritorio: el logo va en el centro exacto. El tema reparte el
   ancho según el contenido de cada lista (4 enlaces a la izquierda, 3 a la
   derecha), lo que descentraba el logo; con flex 1 1 0 las dos mitades miden
   lo mismo y el logo queda en medio. */
@media (min-width: 992px) {
  .navbar.center-logo .navbar-collapse .offcanvas-body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .navbar.center-logo .navbar-collapse .offcanvas-header {
    flex: 0 0 auto;
    padding: .7rem 1.5rem !important; /* pisa px-lg-15 (100px) del tema */
  }
  .navbar.center-logo .offcanvas-header img {
    height: 50px;
  }
  .navbar.center-logo .navbar-nav .nav-link {
    padding-left: .6rem;
    padding-right: .6rem;
  }
}

@media (min-width: 1200px) {
  .navbar.center-logo .offcanvas-header img {
    height: 62px;
  }
  .navbar.center-logo .navbar-nav .nav-link {
    padding-left: .9rem;
    padding-right: .9rem;
  }
}

/* El logo claro se usa sobre el header transparente y el oscuro sobre
   la barra fija; el tema alterna .logo-dark / .logo-light por su cuenta. */

/* Franja de tecnología. Los logos oficiales tienen proporciones muy dispares
   (Supabase es casi cuadrado, Firebase alto, Google Cloud apaisado), así que en
   vez de escalar imágenes desiguales se usa solo la marca y el nombre se escribe
   con la tipografía del tema. Se muestran siempre a todo color y a plena opacidad.
   AWS es la excepción: su logotipo ya incluye el nombre, así que va sin texto. */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem 2rem;
}

.tech-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-navy);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
}

.tech-item img {
  height: 1.7rem;
  width: auto;
}

.tech-item-wordmark img {
  height: 2.3rem;
}

@media (max-width: 575.98px) {
  .tech-stack {
    gap: 1.2rem 1.8rem;
  }

  .tech-item {
    font-size: 0.95rem;
  }

  .tech-item img {
    height: 1.5rem;
  }

  .tech-item-wordmark img {
    height: 2rem;
  }
}

/* El icono de la hamburguesa mide 24x19: muy poco para tocarlo con el dedo.
   El relleno agranda el área pulsable y el margen negativo la compensa, así que
   no se mueve nada de sitio. */
.navbar .offcanvas-nav-btn {
  padding: 0.6rem;
  margin: -0.6rem;
}

/* Pestañas de servicios: el <li> ya se estira a la altura del más alto, pero el
   enlace blanco de dentro no, y las tarjetas quedaban desalineadas cuando un
   texto ocupaba dos líneas. */
.nav-tabs-bg .nav-item {
  display: flex;
}

.nav-tabs-bg .nav-item .nav-link {
  width: 100%;
}

/* Los números del proceso, un punto más grandes */
.icon.btn-circle .number {
  font-size: 1.15rem;
}

/* Botón flotante de WhatsApp.
   Va justo encima del círculo de progreso del tema (fixed, right/bottom 1.5rem,
   2.3rem de lado), por eso el bottom de 5rem. */
.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 5rem;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 100%;
  background-color: #25d366;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 0.25rem 1rem rgba(30, 34, 40, 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  background-color: #1da851;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .whatsapp-float {
    right: 1rem;
    bottom: 4.5rem;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.3rem;
  }
}

/* Palabras clave resaltadas dentro de un párrafo. El violeta de marca
   (#a07cc5) es demasiado claro para texto de 17 px: sobre el gris de la
   sección da 3.2:1 y el mínimo legible es 4.5:1. Este tono más oscuro
   mantiene la familia de color y llega a 6.3:1. */
.text-key {
  color: #6d4c94;
}

/* Tarjetas de los productos propios. Toda la tarjeta es un enlace, así que hay
   que devolverle al texto el color del cuerpo: si no, el tema lo pinta del
   color de enlace. La marca viene del favicon SVG de cada producto, que ya
   trae su propio fondo redondeado. */
.product-card,
.product-card:hover,
.product-card:focus {
  color: inherit;
  text-decoration: none;
}

.product-mark {
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
}