@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap');

.html,
.html body,
.html * {
  font-family: 'Mulish', sans-serif !important;
}

.Header__logotxt {
  color: #00506B!important;
  padding-top: 8px;
}

.Header__menuList {
  border-bottom: 0;
}

.Header__homeNavbarFixed .Header__searchBox {
  background-color: #314755;
}

.Header__containerLi {
  box-shadow: none;
  color: #ffffff;
  background: #F34F36 !important;
}

.Header__tClr:hover { 
  color: #FFFFFF; 
}

.commonStyle__zt3BrandBg {
  background-color: #F34F36;
}

.Header__homeContent.Header__homeNavbarFixed .Header__navbar {
  background-color: #314755!important;
}

.Header__globalSearchAlt {
  width: 70% !important;
}

.Header__homeNavbarFixed .Header__menu, 
.Header__homeNavbarFixed .Header__menu:after, 
.Header__homeNavbarFixed .Header__menu:before {
  background-color: #ffffff !important;
}

/* icono base de conocimientos */
.ContentBox__indexIcon svg[alt="Base de conocimientos"] {
  width: 60px !important;
  height: 60px !important;
  display: block !important;
  margin: 0 auto !important;
  background: url("https://cdn.escala.com/wp-content/uploads/2025/04/integraciones-escala-icon.png.webp") center center / contain no-repeat !important;
}

.ContentBox__indexIcon svg[alt="Base de conocimientos"] use {
  display: none !important;
}

.ContentBox__indexIcon svg[alt="Base de conocimientos"] * {
  fill: transparent !important;
}

/* Icono Tickets */
.ContentBox__indexIcon svg[alt="Tickets"] {
  width: 60px !important;
  height: 60px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-image: url("https://cdn.escala.com/wp-content/themes/oceanwp-child/resources/assets/images/illustrations/others/plataformas-complejas-icon.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.ContentBox__indexIcon svg[alt="Tickets"] use {
  display: none !important;
}

.ContentBox__indexIcon svg[alt="Tickets"] * {
  fill: transparent !important;
  stroke: transparent !important;
}

/* Ocultar login */
.Header__menuList li:last-child, 
.Header__menuList li:nth-last-child(2) {
  display: none !important;
}

/* Quitar sección de tickets inferior */
[class*="ticket-container"], 
[class*="Footer__ticket"], 
.help-container,
.bottom-help-section,
.zpcenter-container,
.KB__footer,
.Footer__container,
.Footer__footerCont,
[data-id="footer"],
footer {
  display: none !important;
}

/* --- Solución para cambiar el título sin romper el diseño --- */

/* 1. Ocultamos el texto original de forma limpia sin quitar el contenedor del flujo */
span[data-id="kbLanding_breadcrumb_0"] {
    display: inline-block; /* Permite que el elemento tenga su propio flujo */
    position: relative;
    font-size: 0 !important; /* Hace que el texto original ocupe cero espacio visible */
    line-height: 0;
    margin-bottom: 25px; /* Agrega separación con los cuadros de abajo (ajusta el valor si es necesario) */
}

/* 2. Insertamos y damos estilo al nuevo texto con el azul deseado */
span[data-id="kbLanding_breadcrumb_0"]::before {
    content: "Centro de ayuda Escala";
    display: block; /* Ocupa su propio bloque de texto */
    visibility: visible;
    
    /* --- Estilos de fuente y COLOR ACTUALIZADO --- */
    font-size: 24px; /* Recuperamos el tamaño de fuente para el nuevo texto */
    font-weight: 600;
    color: #2c4857; /* <--- Tu nuevo color azul aplicado aquí */
    
    /* Usamos flujo normal en lugar de position: absolute; para evitar superposiciones */
}