/*
 * Overrides del sitio (cargado después del CSS del tema).
 *
 * El header flotante usa z-index 1111 y .navbar-scrolltofixed usa 999 !important.
 * Bootstrap 3 deja .modal y .modal-backdrop en ~1050 / 1040, por eso el menú queda encima.
 * Subimos el backdrop primero y el modal encima, por encima también del botón "scroll to top" (99999).
 */
.modal-backdrop {
  z-index: 100000 !important;
}
.modal {
  z-index: 100050 !important;
}

/*
 * Separador de marca CC (.cc-title-separator):
 * Diseño: línea — logo — línea (flex). Ancho del bloque con clases --w-10 … --w-100 (pasos del 10%).
 * .cc-title-separator--centered centra el bloque en el contenedor (margin auto).
 */
.cc-title-separator {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin-top: 18px;
  margin-bottom: 22px;
  box-sizing: border-box;
}

/* Centrar el bloque respecto al padre (el ancho lo fija --w-XX). */
.cc-title-separator--centered {
  margin-left: auto;
  margin-right: auto;
}

/*
 * Anchos del separador completo (porcentaje del contenedor padre).
 * Sin clase --w-XX el bloque sigue al 100% (comportamiento por defecto arriba).
 */
.cc-title-separator--w-10 {
  width: 10%;
}
.cc-title-separator--w-20 {
  width: 20%;
}
.cc-title-separator--w-30 {
  width: 30%;
}
.cc-title-separator--w-40 {
  width: 40%;
}
.cc-title-separator--w-50 {
  width: 50%;
}
.cc-title-separator--w-60 {
  width: 60%;
}
.cc-title-separator--w-70 {
  width: 70%;
}
.cc-title-separator--w-80 {
  width: 80%;
}
.cc-title-separator--w-90 {
  width: 90%;
}
.cc-title-separator--w-100 {
  width: 100%;
}

/* Logo entre las dos líneas; no se encoge. */
.cc-title-separator__mark {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Cada tramo de línea crece por igual a izquierda y derecha del logo. */
.cc-title-separator__line {
  display: block;
  flex: 1 1 0;
  min-width: 8px;
  height: 3px;
  border-radius: 1px;
}

/* Degradado #335983 ↔ #64afeb; espejado en la segunda línea para simetría con el logo. */
.cc-title-separator--on-light .cc-title-separator__line:first-child {
  background: linear-gradient(90deg, #335983 0%, #64afeb 100%);
}
.cc-title-separator--on-light .cc-title-separator__line:last-child {
  background: linear-gradient(90deg, #64afeb 0%, #335983 100%);
}

/* Fondo oscuro: mismas dos medias líneas espejadas en blanco suave. */
.cc-title-separator--on-dark .cc-title-separator__line:first-child {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.55) 100%
  );
}
.cc-title-separator--on-dark .cc-title-separator__line:last-child {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

/*
 * Nuestros Servicios (#servicios en index.html):
 * Las tarjetas usan .border-1px + .border-hover-theme-colored (borde gris y al hover color tema).
 * Redondeamos solo en hover para alinear con el resto del sitio (p. ej. slider a 5px).
 */
#servicios .icon-box.border-hover-theme-colored {
  transition: border-radius 0.25s ease;
}
#servicios .icon-box.border-hover-theme-colored:hover {
  border-radius: 5px;
}