/* ==========================================================================
   Puente entre el kit y el markup existente del sitio.
   Va DESPUES de la hoja del tema. No modifica el kit: adapta sus reglas a la
   estructura HTML que ya tiene la pagina y migra los azules que quedaron.

   Escrito solo con var(--sb-*), asi que sirve igual para el kit gris y el
   verde: cambiar de tema es cambiar la hoja del tema, no este archivo.

   Mapa de traduccion (el sitio no usa los hex del documento de marca, usa
   los suyos propios):
     #074a82 azul       -> --sb-ink        estructura y titulos
     #126abd azul medio -> --sb-accent     accion
     #2d9dd5 celeste    -> --sb-accent     links e iconos
     #0f74b8 celeste 2  -> --sb-accent     bandas de accion
     #0e1727 / #212e4f  -> --sb-header     topbar y footer
     #f0f0f0 gris       -> --sb-paper      fondo de secciones
   Criterio: si invita a hacer algo va --sb-accent; si estructura o titula,
   va --sb-ink. Las fotografias no se tocan.
   ========================================================================== */

/* ---------- 1. Cards de cursos: tres niveles ----------
   El kit usa .sb-card:nth-child(1..3) asumiendo cards hermanas. Aca cada card
   es hijo unico de su columna Bootstrap: las tres caerian en nth-child(1). */
.cursos-box > div:nth-child(1) .sb-card {
  background: var(--sb-ink);
  color: #fff;
}
.cursos-box > div:nth-child(2) .sb-card {
  background: var(--sb-card-2);
  color: #fff;
}
.cursos-box > div:nth-child(3) .sb-card {
  background: var(--sb-surface-2);
  color: var(--sb-ink);
}

/* Tercera card: el CSS viejo fuerza color:#fff en los hijos y sobre arena
   queda ilegible. */
.cursos-box > div:nth-child(3) .sb-card,
.cursos-box > div:nth-child(3) .sb-card h2,
.cursos-box > div:nth-child(3) .sb-card h3,
.cursos-box > div:nth-child(3) .sb-card h6,
.cursos-box > div:nth-child(3) .sb-card p,
.cursos-box > div:nth-child(3) .sb-card span,
.cursos-box > div:nth-child(3) .sb-card .sl-b,
.cursos-box > div:nth-child(3) .sb-card .sl-b2 {
  color: var(--sb-ink) !important;
}

/* ---------- 2. Superficies y tipografia que quedaron en azul ---------- */
#menu.sb-header,
#topbar,
.bg-a-deg,
.bg-ao {
  background: var(--sb-header);
}

.bg-g,
.sb-section {
  background-color: var(--sb-paper);
}

/* Titulos de seccion y de bloque (Visualization, Modern Engineering,
   Strategy, Innovation, About Us, Our Clients...). */
.sl-a {
  color: var(--sb-ink);
}

/* Subtitulo de cada bloque de servicio: es accion, va en acento. */
.box-servicio h3.sl-g {
  color: var(--sb-accent);
}

/* Celestes de links, iconos y textos secundarios. */
.sl-c,
.sl-c2,
.sl-a2 {
  color: var(--sb-accent);
}

.bg-c,
.bg-c2,
.btn-c {
  background-color: var(--sb-accent);
}

/* .bg-a estructura (la card 1 de cursos ya la pinta .sb-card). */
.bg-a {
  background-color: var(--sb-ink);
}

/* ---------- 3. Banda "How We Work": bosque con la foto al 15% ----------
   La foto va en un style inline, asi que no se puede reemplazar desde aca:
   le superponemos el color y dejamos ver la imagen por debajo. */
section.bg-a.bg-cover {
  position: relative;
}
section.bg-a.bg-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sb-ink);
  opacity: 0.85;
  pointer-events: none;
}
section.bg-a.bg-cover > * {
  position: relative;
  z-index: 1;
}

/* ---------- 4. Cards del proceso 1-5 ---------- */
.box-number {
  background-color: var(--sb-accent) !important;
}
.box .box-number + h2,
.box h2.sl-c {
  color: var(--sb-ink);
}
.box.bg-b {
  border: 1px solid #ddd6c8;
  box-shadow: none;
}
.box.bg-b:hover {
  border-color: var(--sb-accent);
}

/* ---------- 5. Seccion de contacto ----------
   El bloque pasa a acento; el boton de envio, a bosque, para que contraste
   contra el fondo (btn-primary lo comparte con "View Services", que si va
   en acento, por eso se acota a la seccion). */
[data-seccion="contact"] .btn-primary,
[data-seccion="contacto"] .btn-primary {
  background: var(--sb-ink);
  color: #fff;
}
[data-seccion="contact"] .btn-primary:hover,
[data-seccion="contacto"] .btn-primary:hover {
  background: var(--sb-header);
}

/* ---------- 6. Carrusel de clientes: flechas ---------- */
.slick-prev:before,
.slick-next:before,
.slide-c .slick-arrow:before {
  color: var(--sb-accent) !important;
  opacity: 1;
}

/* ---------- 7. Burbuja flotante de mail ----------
   La de WhatsApp conserva su verde de marca, igual que los badges de
   Microsoft: es identidad de un tercero. */
.btns-fix a[data-color="envelope"] {
  background-color: var(--sb-ink);
  color: #fff;
  border-color: var(--sb-ink);
}

/* ---------- 8. Badges de Microsoft / Power BI ----------
   Opacidad plena sobre recuadro solido; nunca se recolorean. */
.sb-badge {
  background: var(--sb-surface-2);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
}
.sb-badge img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ---------- 9. Detalle decorativo de la banda de cita ---------- */
.box-line:before {
  background-color: var(--sb-surface-2);
}

/* ---------- 10. Hero ----------
   La foto original es 95% azul con saturacion 0.72: es la mayor fuente de
   azul de la pagina y compite con toda la paleta. Se reemplaza por un
   duotono en los colores del tema (misma foto, misma composicion). */
.slide-p-item {
  background-image: url("/assets/smartbi/img/hero.svg");
  background-position: center bottom;
  background-color: var(--sb-ink);
}

/* El panel de texto llegaba pegado a sus bordes; le damos aire y una
   sombra suave para que se despegue de la foto. */
.sb-hero__panel {
  padding: 34px 32px;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
@media (max-width: 767.98px) {
  .sb-hero__panel {
    padding: 24px 20px;
  }
}

/* Los badges de partner quedaban apretados contra los botones. */
.sb-hero__panel .sb-badge {
  margin-top: 4px;
}

/* El hero medía 490px y el panel con aire ocupaba 433: quedaba ahogado.
   Le damos altura para que respire arriba y abajo. */
.slide-p-item {
  min-height: 580px;
}
@media (max-width: 767.98px) {
  .slide-p-item {
    min-height: 620px;
  }
}

/* ==========================================================================
   Hero: split de dos columnas (referencia del mockup)
   Foto a la izquierda, bloque solido de color a la derecha con el texto
   encima. La foto se cubre por un ::after en vez de recortarla con
   background-size, para no deformarla.
   ========================================================================== */
@media (min-width: 992px) {
  /* Sin bloque solido: las barras del SVG ya se desvanecen hacia la derecha,
     que es justo donde va el texto. */
  .slide-p-item .container {
    z-index: 1;
  }
  /* El panel ya no es una tarjeta flotante: es el bloque solido. */
  .sb-hero__panel {
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 40px;
  }
  /* Titular con mas presencia, como en la referencia. */
  .slide-p-item .f-30 {
    font-size: 40px;
  }
  .slide-p-item {
    min-height: 520px;
  }
}

/* 2. Badges de partner en el hero: no aportan, se quitan.
   (El bloque de botones es .row; los badges son .d-flex, por eso el
   selector alcanza solo a estos.) */
.sb-hero__panel > div.d-flex {
  display: none !important;
}

/* 3. Cuña diagonal debajo de la banda de cita: se remueve.
   Al ocultar las dos columnas, la fila y su contenedor colapsan solos. */
.col-solapa {
  /* !important: la segunda columna trae .d-sm-block de Bootstrap, que ya es
     !important y si no le gana deja una franja de 56px. */
  display: none !important;
}

/* En la referencia el CTA del hero va claro y el naranja queda reservado
   al boton de la barra de navegacion. */
.slide-p-item .btn-meeting {
  background: var(--sb-paper);
  color: var(--sb-ink);
}
.slide-p-item .btn-meeting:hover {
  background: #fff;
  color: var(--sb-ink);
}

/* Linea divisoria junto a los titulos ("Courses", "Other Courses").
   Es un border-top en un pseudo-elemento, por eso no la alcanzaban las
   reglas de color/background de mas arriba. Va en tono de superficie:
   es un separador, no un titulo. */
.t-line:before {
  border-top-color: var(--sb-surface-2);
}

/* ---------- 11. Titulos sobre superficies oscuras ----------
   El kit pinta TODOS los h1-h4 con var(--sb-ink). Sobre las bandas oscuras
   eso queda ilegible: el titulo de la banda de cita medía 1.3:1 de
   contraste. Los titulos que llevan la clase .sl-b del sitio se salvan
   porque esa clase es !important; estos no la tienen. */
.sb-quote h1,
.sb-quote h2,
.sb-quote h3,
.sb-quote h4,
.sb-hero__panel h1,
.sb-hero__panel h2,
.sb-hero__panel h3,
section.bg-a.bg-cover h1,
section.bg-a.bg-cover h2,
section.bg-a.bg-cover h3,
.bg-ao h1,
.bg-ao h2,
.bg-ao h3,
.bg-ao h4,
[data-seccion="contact"] h1,
[data-seccion="contacto"] h1,
.cursos-box > div:nth-child(1) .sb-card h2,
.cursos-box > div:nth-child(1) .sb-card h6,
.cursos-box > div:nth-child(2) .sb-card h2,
.cursos-box > div:nth-child(2) .sb-card h6 {
  color: #fff;
}

/* El texto secundario del sitio es #dedede: sobre el tono medio de la
   segunda card no llegaba a 4.5:1. */
.cursos-box > div:nth-child(1) .sb-card .sl-b2,
.cursos-box > div:nth-child(2) .sb-card .sl-b2 {
  color: #fff;
}

/* ---------- 12. Logo con mas presencia ----------
   El isotipo a 31px quedaba chico frente al peso de la barra de navegacion
   y del boton de agenda. */
.sb-logo__mark {
  height: 40px;
}
.sb-logo__text {
  font-size: 32px;
}
@media (max-width: 767.98px) {
  .sb-logo__mark {
    height: 30px;
  }
  .sb-logo__text {
    font-size: 23px;
  }
}