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

/* CALLINK — CSS consolidado para a área de estilos do sistema.
   URLs oficiais hospedadas na Backweb, fornecidas por William.
   Busca: imagem única 71665 preenchendo toda a área com cover.
   Os grafismos antigos permanecem disponíveis para a seção de vagas. */
.sherlock-styles {
  --callink-busca: url('https://www.infojobs.com.br/x.aspx?id=71665');
  --callink-grafismos: url('https://www.infojobs.com.br/x.aspx?id=71613');
  --callink-azul: #2b436c;
  --callink-texto: #0d3878;
  --callink-lima: #cbd742;
}

/* 01 — Área de busca NATIVA: nenhuma substituição do formulário. */
.sherlock-styles .home { padding: 0 !important; }
.sherlock-styles #OfferSearcher_Top_0 {
  box-sizing: border-box;
  position: relative;
  min-height: 450px !important;
  height: auto !important;
  padding: 180px 24px !important;
  background-color: var(--callink-azul) !important;
  background-image: var(--callink-busca) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sherlock-styles #OfferSearcher_Top_0::before,
.sherlock-styles #OfferSearcher_Top_0::after,
.sherlock-styles #OfferSearcher_Top_0 .intro::before,
.sherlock-styles #OfferSearcher_Top_0 .intro::after {
  display: none !important;
}
.sherlock-styles #OfferSearcher_Top_0 .container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1410px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}
.sherlock-styles #OfferSearcher_Top_0 .field_group {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 956px;
  margin: 0 auto !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center;
  gap: 16px;
  background: #fff !important;
  border-radius: 10px 100px 100px 10px !important;
}
.sherlock-styles #OfferSearcher_Top_0 .field_input_icon,
.sherlock-styles #OfferSearcher_Top_0 .field_select_icon {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.sherlock-styles #OfferSearcher_Top_0 input,
.sherlock-styles #OfferSearcher_Top_0 select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  border: 0 !important;
  background-color: #fff;
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 16px;
  color: #595959;
}
.sherlock-styles #OfferSearcher_Top_0 .b_primary {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  min-height: 51px;
  margin: 0 !important;
  padding: 14px 32px !important;
  float: none !important;
  border: 0 !important;
  border-radius: 100px !important;
  background: var(--callink-lima) !important;
  color: var(--callink-texto) !important;
  font: 700 16px/1.3 'Source Sans 3', Arial, sans-serif !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.sherlock-styles #OfferSearcher_Top_0 :is(input, select, button, a):focus-visible {
  outline: 3px solid #0d3878 !important;
  outline-offset: 3px;
}

/* 02 — Módulo HTML: texto completo, sem corte ou altura fixa. */
.callink-sobre,
.callink-sobre * { box-sizing: border-box; }
.callink-sobre {
  width: 100%;
  padding: 50px 30px !important;
  background: #fff !important;
  color: #0d3878 !important;
  font-family: 'Source Sans 3', Arial, sans-serif;
  text-align: center;
}
.callink-sobre__conteudo { width: 100%; max-width: 1350px; margin: 0 auto; }
.callink-sobre h2 {
  margin: 0 0 30px !important;
  color: #0d3878 !important;
  font: 600 40px/1.15 'Source Sans 3', Arial, sans-serif !important;
  letter-spacing: 1.6px;
  text-align: center !important;
}
.callink-sobre p {
  margin: 0 0 28px !important;
  color: #0d3878 !important;
  font: 400 28px/1.2 'Source Sans 3', Arial, sans-serif !important;
  overflow-wrap: break-word;
}
.callink-sobre p:last-child { margin-bottom: 0 !important; }

/* 03 — Vagas e banco de talentos: componentes NATIVOS.
   Configurar os títulos/textos no sistema conforme LEIA-ME.md. */
.sherlock-styles .component_LastOffersHorizontal {
  padding: 50px 30px 70px !important;
  background-color: var(--callink-azul) !important;
  background-image: var(--callink-grafismos) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
}
.sherlock-styles :is(.component_LastOffersHorizontal, .component_AddCvDB) h2 {
  margin: 0 0 40px !important;
  font: 600 40px/1.15 'Source Sans 3', Arial, sans-serif !important;
  text-align: center !important;
  letter-spacing: 1.6px;
}
.sherlock-styles .component_LastOffersHorizontal h2 { color: #fff !important; }
.sherlock-styles .component_LastOffersHorizontal .box { background: #fff; }
.sherlock-styles .component_AddCvDB {
  padding: 50px 30px !important;
  background: #fff !important;
  text-align: center;
}
.sherlock-styles .component_AddCvDB h2 { color: var(--callink-texto) !important; }
.sherlock-styles .component_AddCvDB p {
  color: #595959 !important;
  font: 400 28px/1.25 'Source Sans 3', Arial, sans-serif !important;
}
.sherlock-styles .component_AddCvDB .b_primary {
  min-height: 56px;
  padding: 16px 30px !important;
  border-radius: 100px !important;
  background: var(--callink-lima) !important;
  color: var(--callink-texto) !important;
  font: 700 26px/1.2 'Source Sans 3', Arial, sans-serif !important;
}

/* 04 — Tablet: ajustes dos campos e tipografia. */
@media (max-width: 1100px) {
  .sherlock-styles #OfferSearcher_Top_0 .field_group { gap: 10px; padding: 10px 14px !important; }
  .sherlock-styles #OfferSearcher_Top_0 .b_primary { padding-inline: 20px !important; }
  .callink-sobre p, .sherlock-styles .component_AddCvDB p { font-size: 22px !important; }
}

/* 05 — Celular: mesma imagem única da busca, preenchendo a área. */
@media (max-width: 700px) {
  .sherlock-styles #OfferSearcher_Top_0 {
    min-height: 400px !important;
    padding: 70px 20px !important;
  }
  .sherlock-styles #OfferSearcher_Top_0 .field_group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 440px;
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .sherlock-styles #OfferSearcher_Top_0 :is(.field_input_icon, .field_select_icon) { flex: 0 0 auto; width: 100% !important; }
  .sherlock-styles #OfferSearcher_Top_0 .b_primary { width: 100% !important; }
  .callink-sobre { padding: 36px 20px !important; }
  .callink-sobre h2,
  .sherlock-styles :is(.component_LastOffersHorizontal, .component_AddCvDB) h2 {
    font-size: 30px !important;
    letter-spacing: .7px;
    margin-bottom: 24px !important;
  }
  .callink-sobre p,
  .sherlock-styles .component_AddCvDB p { font-size: 18px !important; line-height: 1.5 !important; }
  .callink-sobre p { margin-bottom: 20px !important; }
  .sherlock-styles .component_LastOffersHorizontal { padding: 36px 20px 40px !important; }
  .sherlock-styles .component_AddCvDB { padding: 36px 20px !important; }
  .sherlock-styles .component_AddCvDB .b_primary { font-size: 20px !important; }
}

footer * {
	color: #ffffff !important;
}
/* 06 — Ajustes do preview real: campos separados e vagas brancas no celular. */
@media (max-width: 700px) {
  .sherlock-styles #OfferSearcher_Top_0 .field_group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .sherlock-styles #OfferSearcher_Top_0 .field_group > .field_input_icon,
  .sherlock-styles #OfferSearcher_Top_0 .field_group > .field_select_icon {
    margin: 0 !important;
    border-radius: 5px;
    background: #fff;
  }
  .sherlock-styles #OfferSearcher_Top_0 .field_help:empty,
  .sherlock-styles #OfferSearcher_Top_0 .field_help {
    margin: 0 !important;
    min-height: 0 !important;
  }
  .sherlock-styles .home > section.component_LastOffersHorizontal {
    background: #fff !important;
    color: #23282d !important;
  }
  .sherlock-styles .home > section.component_LastOffersHorizontal h2 {
    color: #0d3878 !important;
  }
  .sherlock-styles .home > section.component_LastOffersHorizontal .box {
    background: #fff !important;
    color: #23282d !important;
  }
  .sherlock-styles .component_LastOffersHorizontal {
    padding: 36px 20px 40px !important;
    background-image: none !important;
    background-color: transparent !important;
  }
  .component_OfferSearcher .mtB {
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}