/* =====================================================================
   datalab.css — camada de identidade visual por cima do template
   ---------------------------------------------------------------------
   Carregar DEPOIS de creative-studio.css. Não edita o template; só
   sobrepõe tokens e os seletores que ele expõe. Fonte da verdade da
   identidade: "datalab — Guia do Design System" (Canva, v1.0, 2026).

   Paleta        grafite 900 #0E1116 (fundo) · grafite 800 #171B22 (superfície)
                 vermelho 500 #D6201E (acento, nunca fundo de área grande)
                 branco #FFFFFF · cinza 100 #F4F5F7 · cinza 500 #6B7280
   Tipografia    IBM Plex Sans (títulos, corpo) · IBM Plex Mono (rótulos,
                 caixa alta, entreletra 0,12em) · pesos 400, 500, 600
   Geometria     grid de 8 px · raio de canto zero · filetes de 2 px
                 sem gradiente, sem sombra, sem neon
   ===================================================================== */

:root {
  --dl-grafite-900: #0E1116;
  --dl-grafite-800: #171B22;
  --dl-vermelho: #D6201E;
  --dl-branco: #FFFFFF;
  --dl-cinza-100: #F4F5F7;
  --dl-cinza-300: #D9DCE1;
  --dl-cinza-500: #6B7280;
  --dl-texto: #0E1116;
  --dl-sans: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --dl-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
body {
  font-family: var(--dl-sans);
  color: var(--dl-texto);
  background: var(--dl-branco);
  min-width: 0 !important;           /* o template travava em 992px */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dl-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dl-texto);
}
p { color: #2B303A; }
a { color: var(--dl-vermelho); }
a:hover { color: #A8120F; text-decoration: none; }
small, .small { color: var(--dl-cinza-500); }

/* rótulo mono: categorias, datas, etiquetas */
.dl-label,
section .section-subtitle,
.card .small.text-primary,
.footer .list-head h6 {
  font-family: var(--dl-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
}
section .section-subtitle { color: var(--dl-cinza-500); margin-bottom: 8px; }
section.has-bg-img .section-subtitle { color: rgba(255, 255, 255, 0.6); }
section .section-title { font-size: 40px; font-weight: 600; line-height: 1.08; }
.card .small.text-primary { color: var(--dl-vermelho) !important; margin-bottom: 8px; }

/* ---------- raio zero, sem sombra ---------- */
.card, .btn, .img-wrapper, .custom-navbar, .form-control, .alert, .badge,
.card-img, .card-img-top, .card img.inset, .nav-tabs .nav-link, .nav-pills .nav-link,
.testimonial-wrapper .body, .list-group-item, .modal-content {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- botões ---------- */
.btn {
  font-family: var(--dl-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-width: 2px;
}
.btn-lg { padding: 16px 32px; font-size: 14px; }
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-primary,
.btn-primary:disabled, .btn-primary.disabled {
  background: var(--dl-vermelho);
  border-color: var(--dl-vermelho);
  color: var(--dl-branco);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: #A8120F;
  border-color: #A8120F;
  color: var(--dl-branco);
  box-shadow: none;
}
.btn-outline-light { border-color: var(--dl-branco); color: var(--dl-branco); }
.btn-outline-light:hover { background: var(--dl-branco); color: var(--dl-grafite-900); }
.btn-outline-dark { border-color: var(--dl-grafite-900); color: var(--dl-grafite-900); }
.btn-outline-dark:hover { background: var(--dl-grafite-900); color: var(--dl-branco); }

/* ---------- navegação ---------- */
.custom-navbar {
  border: 0;
  background: transparent;
  width: 100%;
  max-width: 1140px;
  padding: 8px 16px;
}
.custom-navbar .navbar-brand img { width: 56px; }
.custom-navbar .nav-link {
  font-family: var(--dl-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 4px;
}
.custom-navbar .nav-link.active { color: var(--dl-branco) !important; border-bottom: 2px solid var(--dl-vermelho); }
.custom-navbar.affix { background: var(--dl-grafite-900); border-bottom: 1px solid var(--dl-grafite-800); }
.custom-navbar.affix .nav-link { color: var(--dl-branco) !important; }
.custom-navbar.affix .nav-link.active { color: var(--dl-branco) !important; }
.custom-navbar .nav-link.btn { border-bottom: 0; }
.custom-navbar .navbar-toggler, .custom-navbar.affix .navbar-toggler { border-color: rgba(255, 255, 255, 0.3) !important; }
.custom-navbar .navbar-toggler span,
.custom-navbar .navbar-toggler span:after,
.custom-navbar .navbar-toggler span:before { background-color: var(--dl-branco); border-radius: 0; }

/* ---------- hero ---------- */
.header { background-color: var(--dl-grafite-900); }
.header .overlay { background: rgba(14, 17, 22, 0.78); }
.header .overlay .subtitle {
  font-family: var(--dl-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}
.header .overlay h1, .header .overlay h3, .header .overlay .title { color: var(--dl-branco); }
.header .overlay .title { font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0; }
.header .overlay h3.title img { max-width: 220px; margin: 24px 0 8px; }
.header .overlay .tribute-message {
  max-width: 720px;
  margin: 32px auto 0 !important;
  padding-top: 24px;
  border-top: 2px solid var(--dl-vermelho);
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- seções escuras ---------- */
section.has-bg-img { background: var(--dl-grafite-900); color: var(--dl-branco); }
section.has-bg-img:after { display: none; }      /* sem foto de fundo */
section.has-bg-img p { color: rgba(255, 255, 255, 0.8); }
section.has-bg-img h1, section.has-bg-img h2, section.has-bg-img h3,
section.has-bg-img h4, section.has-bg-img h5, section.has-bg-img h6 { color: var(--dl-branco); }

/* método de trabalho: círculos viram colunas com filete */
.widget .widget-item {
  width: 200px;
  height: auto;
  border: 0;
  border-top: 2px solid var(--dl-vermelho);
  border-radius: 0;
  padding: 24px 0 0;
  text-align: left;
  margin: 16px;
}
.widget .widget-item i { color: var(--dl-branco); font-size: 28px; margin-bottom: 16px; }
.widget .widget-item h4 { font-size: 16px; font-weight: 500; }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--dl-cinza-300);
  background: var(--dl-branco);
}
.card .card-body { padding: 24px; }
.card .card-title { font-size: 16px; font-weight: 600; }
#service .card { border-top: 2px solid var(--dl-grafite-900); }
#service .card h2 i { color: var(--dl-grafite-900); font-size: 24px; }
#service .card .card-title { text-transform: none; }
#pesquisas-andamento .card { border-left: 2px solid var(--dl-vermelho); }
#pesquisas-andamento .card small strong { font-family: var(--dl-mono); font-weight: 500; letter-spacing: 0.06em; }
#team .card img.inset { border-radius: 0; width: 100%; transform: none; }
#team .card .card-body { margin-top: 0; }
#team .card .socials a { color: var(--dl-grafite-900); }
#publications .card { border-left: 2px solid var(--dl-grafite-900); }
#publications h5 { font-family: var(--dl-mono); font-size: 14px; letter-spacing: 0.12em; color: var(--dl-cinza-500); }

/* ---------- portfólio ---------- */
.img-wrapper .overlay { background: rgba(14, 17, 22, 0.88); }
.img-wrapper .overlay .overlay-infos h5 { color: var(--dl-branco); font-size: 18px; }
.img-wrapper .overlay .overlay-infos a { border-radius: 0; border-color: var(--dl-branco); }
.img-wrapper .overlay .overlay-infos a:hover { background: var(--dl-vermelho); border-color: var(--dl-vermelho); color: var(--dl-branco); }
.img-wrapper.link-block {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 24px; text-align: center;
  background: var(--dl-grafite-900);
  border-top: 2px solid var(--dl-vermelho);
  text-decoration: none;
}
.img-wrapper.link-block h5 { color: var(--dl-branco); margin: 0; }

/* ---------- contato e rodapé ---------- */
#contact .contact-card { border: 1px solid var(--dl-cinza-300); border-radius: 0; box-shadow: none; }
#contact .item i { color: var(--dl-vermelho); }
.footer { padding: 64px 0 48px; }
.footer .list-head { border-bottom: 2px solid var(--dl-vermelho); }
.footer a { opacity: .85; }
.footer .logo h6 { font-family: var(--dl-sans); font-weight: 600; }

/* ---------- utilitários datalab ---------- */
.dl-chip {
  display: inline-block;
  font-family: var(--dl-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--dl-cinza-300);
  color: var(--dl-cinza-500);
  margin-right: 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.dl-chip.red { border-color: var(--dl-vermelho); color: var(--dl-vermelho); }
.dl-chip.dark { border-color: var(--dl-grafite-900); color: var(--dl-grafite-900); }
.dl-rule { border: 0; border-top: 2px solid var(--dl-vermelho); width: 48px; margin: 0 0 24px; }
.dl-rule.center { margin: 0 auto 24px; }

/* ---------- seção datalab Quests (home) ---------- */
#quests { background: var(--dl-cinza-100); padding: 96px 0; }
#quests .dl-steps { display: flex; flex-wrap: wrap; margin: 0 -12px; }
#quests .dl-step { flex: 1 1 220px; margin: 0 12px 24px; padding: 24px; background: var(--dl-branco); border: 1px solid var(--dl-cinza-300); border-top: 2px solid var(--dl-grafite-900); }
#quests .dl-step .ico { font-size: 28px; color: var(--dl-grafite-900); display: block; margin-bottom: 12px; }
#quests .dl-step .num { font-family: var(--dl-mono); color: var(--dl-vermelho); font-size: 12px; letter-spacing: 0.12em; margin-bottom: 16px; display: block; }
#quests .dl-step h5 { font-size: 16px; margin-bottom: 8px; }
#quests .dl-step p { font-size: 14px; margin: 0; color: var(--dl-cinza-500); }
#quests .dl-cta { margin-top: 16px; }
#quests .dl-cta .btn { margin: 0 8px 8px 0; }

@media (max-width: 767px) {
  section .section-title { font-size: 28px; }
  .header { min-height: 520px; }
  .header .overlay .title { font-size: 32px; line-height: 1.1; margin: 0 16px; }
  .header .overlay .subtitle { font-size: 12px; }
  .header .overlay h3.title img { max-width: 160px; }
  .header .overlay .tribute-message { margin: 24px 16px 0 !important; font-size: 14px; }
  .custom-navbar .navbar-collapse { background: var(--dl-grafite-900); padding: 8px 16px 16px; }
  #quests { padding: 64px 0; }
  .widget .widget-item { width: 100%; margin: 8px 0; }
  .footer .list { width: 100%; padding: 0 16px; }
}