/* ============================================================================
   NUCLARQ — Design System aplicado ao Divi 5
   Fonte: Manual de Identidade Nuclarq v2.0 · 2026
   Alvo:  WordPress 7.0.2 + Divi 5.6.2 (www.nuclarq.pt)

   COMO APLICAR
   ------------
   Opção A (rápida, reversível):
     Divi → Theme Options → Integration/Custom CSS → colar este ficheiro.
   Opção B (recomendada, definitiva):
     Child theme → style.css (ou plugin de CSS) + configurar os mesmos valores
     nos Global Presets do Divi 5, para que os módulos NOVOS já nasçam corretos.

   NOTA DE ESPECIFICIDADE
     O Divi 5 gera CSS dinâmico por módulo (et-divi-dynamic-83.css) com
     especificidade alta. Os !important abaixo são o preço de override por
     folha externa. A correção "limpa" é repor estes valores nos presets do
     Divi — este ficheiro serve para uniformizar imediatamente e para o que
     os presets não cobrem.
   ========================================================================== */


/* ============================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* --- Trio da marca (usar um acento de cada vez, nunca em gradiente) --- */
  --nq-blue:          #226FA6;  /* Análise · fase I   · Pantone 7692 C · 5.40:1 AA */
  --nq-blue-d:        #1C5C89;
  --nq-blue-on-dark:  #5F9BCB;  /* azul aclarado para uso SOBRE slate */

  --nq-amber:         #A8620A;  /* Ação · fase II     · Pantone 145 C  · 4.76:1 AA */
  --nq-amber-d:       #8E5208;
  --nq-amber-on-dark: #F0A733;  /* âmbar aclarado para uso SOBRE slate */

  --nq-coral:         #C8382B;  /* Marketing · fase III · Pantone 7599 C · 5.18:1 AA */
  --nq-coral-d:       #A82E22;

  /* --- Ink / slate --- */
  --nq-ink-900: #22303C;  /* títulos, secções escuras · 13.4:1 */
  --nq-ink-800: #33454F;  /* corpo sobre claro */
  --nq-ink-700: #46586B;
  --nq-ink-600: #6B7A85;  /* texto secundário */
  --nq-ink-500: #7F8C8D;  /* legendas, muted */
  --nq-ink-400: #95A5A6;  /* desativado */

  /* --- Neutros --- */
  --nq-n-0:   #FFFFFF;
  --nq-n-50:  #F7F9FA;
  --nq-n-100: #ECF0F1;
  --nq-n-200: #E1E6E8;
  --nq-n-300: #D2D9DC;  /* hairline */
  --nq-n-400: #BDC3C7;

  /* --- Semânticos (fora do trio, dessaturados) --- */
  --nq-success: #2F7D57;
  --nq-warning: #B78200;
  --nq-danger:  #B02A1E;
  --nq-info:    #34728F;

  /* --- Papéis --- */
  --nq-fg-1: var(--nq-ink-800);
  --nq-fg-2: var(--nq-ink-500);
  --nq-fg-on-dark: #FFFFFF;
  --nq-bg-dark: var(--nq-ink-900);
  --nq-border: var(--nq-n-300);
  --nq-accent: var(--nq-amber);

  /* --- Tipografia --- */
  --nq-font: "Inter", "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --nq-fs-display: 64px;
  --nq-fs-h1: 44px;
  --nq-fs-h2: 32px;
  --nq-fs-h3: 24px;
  --nq-fs-h4: 19px;
  --nq-fs-body: 16px;
  --nq-fs-small: 14px;
  --nq-fs-overline: 11px;

  --nq-lh-tight: 1.05;
  --nq-lh-snug: 1.2;
  --nq-lh-normal: 1.5;
  --nq-lh-relaxed: 1.65;

  --nq-ls-wordmark: 0.42em;          /* wordmark ≥120px, peso 100 */
  --nq-ls-wordmark-compact: 0.12em;  /* wordmark ≤120px, peso 600 */
  --nq-ls-overline: 0.22em;          /* eyebrows de secção */
  --nq-ls-caps: 0.08em;
  --nq-ls-tight: -0.01em;

  /* --- Espaçamento (base 8pt) --- */
  --nq-sp-1: 4px;  --nq-sp-2: 8px;  --nq-sp-3: 12px; --nq-sp-4: 16px;
  --nq-sp-5: 24px; --nq-sp-6: 32px; --nq-sp-7: 48px; --nq-sp-8: 64px;
  --nq-sp-9: 96px; --nq-sp-10: 128px;

  /* --- Raios (flat-first, retângulos vivos) --- */
  --nq-r-none: 0;     /* fields  */
  --nq-r-sm: 2px;     /* chips   */
  --nq-r-md: 4px;     /* default */
  --nq-r-lg: 6px;     /* lg      */

  /* --- Elevação (baixa & difusa — preferir hairlines) --- */
  --nq-sh-1: 0 1px 2px rgba(34,48,60,.08);
  --nq-sh-2: 0 2px 8px rgba(34,48,60,.10);
  --nq-sh-3: 0 6px 22px rgba(34,48,60,.13);
}


/* ============================================================================
   2 · BASE TIPOGRÁFICA
   Corrige: corpo a 14px/#666 → 16px/ink-800; famílias inconsistentes.
   ========================================================================== */
body,
#page-container,
.et_pb_module,
.et_pb_text,
input, textarea, select, button {
  font-family: var(--nq-font) !important;
}

body,
#page-container p,
.et_pb_text p,
.et_pb_blurb_description p,
.et_pb_testimonial_description p {
  font-size: var(--nq-fs-body) !important;
  line-height: var(--nq-lh-relaxed) !important;
  font-weight: 400 !important;
  color: var(--nq-fg-1) !important;
}

/* Escala de títulos — pesos finos, o gesto da marca. */
#page-container h1,
#page-container .et_pb_module h1 {
  font-size: var(--nq-fs-h1) !important;
  font-weight: 200 !important;
  line-height: var(--nq-lh-snug) !important;
  letter-spacing: var(--nq-ls-tight) !important;
  color: var(--nq-ink-900) !important;
}

#page-container h2,
#page-container .et_pb_module h2 {
  font-size: var(--nq-fs-h2) !important;
  font-weight: 300 !important;
  line-height: var(--nq-lh-snug) !important;
  letter-spacing: var(--nq-ls-tight) !important;
  color: var(--nq-ink-900) !important;
}

#page-container h3,
#page-container .et_pb_module h3 {
  font-size: var(--nq-fs-h3) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--nq-ink-900) !important;
}

#page-container h4,
#page-container .et_pb_module h4 {
  font-size: var(--nq-fs-h4) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--nq-ink-900) !important;
}

/* ---- NOTA DE ESPECIFICIDADE (importante) --------------------------------
   As regras genéricas acima usam `#page-container h2` → especificidade
   (1,0,1). Qualquer regra de componente baseada só em classes — por ex.
   `.et_pb_slide_title` (0,1,0) — PERDE para elas, mesmo com !important.
   Verificado em produção: sem o prefixo, o título do slider ficava a
   peso 300 em vez de 100.
   Por isso TODAS as regras de componente abaixo levam `#page-container`.
   Ao acrescentar regras novas a este ficheiro, manter a mesma convenção.
   ------------------------------------------------------------------------ */

/* Títulos sobre fundo escuro / imagem */
#page-container .et_pb_bg_layout_dark h1, #page-container .et_pb_bg_layout_dark h2,
#page-container .et_pb_bg_layout_dark h3, #page-container .et_pb_bg_layout_dark h4 {
  color: var(--nq-fg-on-dark) !important;
}
#page-container .et_pb_bg_layout_dark p {
  color: rgba(255,255,255,.86) !important;
}

/* ---- Classes utilitárias da marca --------------------------------------
   Aplicar em Divi via "CSS Class" no módulo.                              */

/* Display — Thin, maiúsculas, tracking largo. O gesto da marca. */
#page-container .nq-display,
#page-container .nq-display h1, #page-container .nq-display h2 {
  font-weight: 100 !important;
  font-size: var(--nq-fs-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;   /* display de página: mais contido que a wordmark */
  line-height: var(--nq-lh-tight) !important;
}

/* Eyebrow / overline de secção — Bold, maiúsculas, tracking 0.22em */
#page-container .nq-eyebrow,
#page-container .nq-eyebrow h1, #page-container .nq-eyebrow h2,
#page-container .nq-eyebrow h3, #page-container .nq-eyebrow h4,
#page-container .nq-eyebrow p {
  font-size: var(--nq-fs-overline) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nq-ls-overline) !important;
  line-height: 1.4 !important;
  color: var(--nq-ink-600) !important;
}
#page-container .nq-eyebrow--blue,  #page-container .nq-eyebrow--blue p  { color: var(--nq-blue)  !important; }
#page-container .nq-eyebrow--amber, #page-container .nq-eyebrow--amber p { color: var(--nq-amber) !important; }
#page-container .nq-eyebrow--coral, #page-container .nq-eyebrow--coral p { color: var(--nq-coral) !important; }

/* Wordmark em texto (quando não se usa o SVG) */
#page-container .nq-wordmark {
  font-weight: 100 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nq-ls-wordmark) !important;
  line-height: var(--nq-lh-tight) !important;
}
#page-container .nq-wordmark--compact {
  font-weight: 600 !important;
  letter-spacing: var(--nq-ls-wordmark-compact) !important;
}

/* Texto secundário / legenda */
#page-container .nq-muted, #page-container .nq-muted p { color: var(--nq-fg-2) !important; }


/* ============================================================================
   3 · CABEÇALHO & NAVEGAÇÃO
   Corrige: hover/ativo a #DD901C (contraste 2.4:1 — falha AA).
   ========================================================================== */
#main-header {
  background-color: var(--nq-n-0) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--nq-border) !important;
}

#top-menu li a {
  font-family: var(--nq-font) !important;
  font-size: var(--nq-fs-small) !important;
  font-weight: 500 !important;
  letter-spacing: var(--nq-ls-caps) !important;
  text-transform: uppercase !important;
  color: var(--nq-ink-700) !important;
  padding-bottom: var(--nq-sp-3) !important;
  transition: color .18s ease;
}

#top-menu li a:hover,
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a {
  color: var(--nq-amber) !important;   /* #A8620A · 4.76:1 AA, em vez de #DD901C */
  opacity: 1 !important;
}

/* Regra fina de acento no item ativo — mais sóbrio que só a cor */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
  box-shadow: inset 0 -2px 0 0 var(--nq-amber);
}

/* Dropdowns — hairline, sem sombra dura */
#top-menu li ul.sub-menu {
  border: 1px solid var(--nq-border) !important;
  border-top: 2px solid var(--nq-amber) !important;
  box-shadow: var(--nq-sh-2) !important;
  border-radius: var(--nq-r-md) !important;
  padding: var(--nq-sp-2) 0 !important;
}

/* Ícone hamburger */
.mobile_menu_bar:before,
.et_toggle_slide_menu:after { color: var(--nq-ink-800) !important; }

.et_mobile_menu {
  border-top: 2px solid var(--nq-amber) !important;
  border-radius: 0 0 var(--nq-r-md) var(--nq-r-md) !important;
  box-shadow: var(--nq-sh-2) !important;
}
.et_mobile_menu li a {
  font-weight: 500 !important;
  letter-spacing: var(--nq-ls-caps) !important;
  text-transform: uppercase !important;
  font-size: var(--nq-fs-small) !important;
  color: var(--nq-ink-700) !important;
  border-bottom: 1px solid var(--nq-n-100) !important;
}

/* Logótipo — reserva de espaço livre = Q/2 (ver §11 sobre substituir o PNG) */
#logo {
  max-height: 44px !important;
  margin-right: var(--nq-sp-5);
}


/* ============================================================================
   4 · BOTÕES & CTAs
   Flat-first, canto 4px, sem sombras duras nem gradientes.
   ========================================================================== */
#page-container .et_pb_button,
#page-container .et_pb_more_button,
#page-container button[type="submit"],
#page-container .et_pb_contact_submit,
#page-container input[type="submit"] {
  font-family: var(--nq-font) !important;
  font-size: var(--nq-fs-small) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nq-ls-caps) !important;

  background-color: var(--nq-amber) !important;
  background-image: none !important;
  color: var(--nq-n-0) !important;

  border: 1px solid var(--nq-amber) !important;
  border-radius: var(--nq-r-md) !important;
  padding: var(--nq-sp-3) var(--nq-sp-5) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease;
}

#page-container .et_pb_button:hover,
#page-container .et_pb_more_button:hover,
#page-container button[type="submit"]:hover,
#page-container .et_pb_contact_submit:hover,
#page-container input[type="submit"]:hover {
  background-color: var(--nq-amber-d) !important;
  border-color: var(--nq-amber-d) !important;
  color: var(--nq-n-0) !important;
  padding: var(--nq-sp-3) var(--nq-sp-5) !important;  /* neutraliza o "grow" do Divi */
}

/* Divi injeta uma seta via ::after — o manual pede sobriedade. */
#page-container .et_pb_button:after,
#page-container .et_pb_more_button:after { display: none !important; }

/* Secundário — outline */
#page-container .nq-btn-secondary .et_pb_button,
#page-container .et_pb_button.nq-btn-secondary {
  background-color: transparent !important;
  color: var(--nq-ink-800) !important;
  border: 1px solid var(--nq-n-400) !important;
}
#page-container .nq-btn-secondary .et_pb_button:hover,
#page-container .et_pb_button.nq-btn-secondary:hover {
  background-color: var(--nq-n-100) !important;
  border-color: var(--nq-ink-600) !important;
  color: var(--nq-ink-900) !important;
}

/* Botões sobre fundo escuro / hero */
.et_pb_bg_layout_dark .et_pb_button,
.et_pb_fullwidth_header .et_pb_button {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  color: #fff !important;
}
.et_pb_bg_layout_dark .et_pb_button:hover,
.et_pb_fullwidth_header .et_pb_button:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--nq-ink-900) !important;
}

/* Ligações inline */
#page-container .et_pb_text a,
#page-container p a {
  color: var(--nq-blue) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(34,111,166,.35);
  transition: border-color .18s ease;
}
#page-container .et_pb_text a:hover,
#page-container p a:hover { border-bottom-color: var(--nq-blue); }


/* ============================================================================
   5 · SECÇÕES, CARDS & HAIRLINES
   ========================================================================== */
.et_pb_section { background-color: var(--nq-n-0); }

/* Alternância de superfície — aplicar via CSS Class no módulo */
.nq-surface-alt  { background-color: var(--nq-n-50)  !important; }
.nq-surface-sunk { background-color: var(--nq-n-100) !important; }
.nq-surface-dark {
  background-color: var(--nq-bg-dark) !important;
  color: var(--nq-fg-on-dark) !important;
}
#page-container .nq-surface-dark h1, #page-container .nq-surface-dark h2,
#page-container .nq-surface-dark h3, #page-container .nq-surface-dark h4 { color: #fff !important; }
#page-container .nq-surface-dark p { color: rgba(255,255,255,.86) !important; }
/* Sobre slate, os acentos aclaram (regra explícita do manual) */
#page-container .nq-surface-dark a { color: var(--nq-blue-on-dark) !important; }
#page-container .nq-surface-dark .nq-eyebrow,
#page-container .nq-surface-dark .nq-eyebrow p { color: var(--nq-amber-on-dark) !important; }

/* Card padrão: superfície branca, hairline 1px, canto 4px, regra fina de fase */
.nq-card {
  background: var(--nq-n-0);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-r-md);
  padding: var(--nq-sp-5);
  box-shadow: none;
}
.nq-card--blue  { border-top: 3px solid var(--nq-blue); }
.nq-card--amber { border-top: 3px solid var(--nq-amber); }
.nq-card--coral { border-top: 3px solid var(--nq-coral); }

/* Divisórias finas em vez de sombras */
.et_pb_space, .et_pb_divider_internal { border-color: var(--nq-border) !important; }
.nq-rule { border-top: 1px solid var(--nq-border); }

/* Blurbs (Desenho · Marketing · Economia) */
#page-container .et_pb_blurb .et_pb_module_header {
  font-size: var(--nq-fs-h3) !important;
  font-weight: 500 !important;
  color: var(--nq-ink-900) !important;
  margin-bottom: var(--nq-sp-3) !important;
}
#page-container .et_pb_blurb .et_pb_blurb_description,
#page-container .et_pb_blurb .et_pb_blurb_description p { color: var(--nq-fg-1) !important; }

/* Ícones — Lucide, monolinha ~1.75px, sem preenchidos/duotone */
.nq-icon svg, .et_pb_blurb .et-pb-icon svg {
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}


/* ============================================================================
   6 · FASES I · II · III
   Blue = I (diagnóstico) · Amber = II (estratégia) · Coral = III (mercado)
   Um acento de cada vez — nunca combinados em gradiente.
   ========================================================================== */
.nq-phase        { border-left: 3px solid var(--nq-n-300); padding-left: var(--nq-sp-5); }
.nq-phase--i     { border-left-color: var(--nq-blue); }
.nq-phase--ii    { border-left-color: var(--nq-amber); }
.nq-phase--iii   { border-left-color: var(--nq-coral); }

.nq-phase__num {
  font-size: var(--nq-fs-display);
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--nq-n-300);
  display: block;
  margin-bottom: var(--nq-sp-3);
}
.nq-phase--i   .nq-phase__num { color: var(--nq-blue); }
.nq-phase--ii  .nq-phase__num { color: var(--nq-amber); }
.nq-phase--iii .nq-phase__num { color: var(--nq-coral); }

/* Barra tricolor — rodapé de estacionário, topo/base de secção.
   Ordem canónica: azul · âmbar · coral. */
.nq-tricolor {
  height: 4px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    var(--nq-blue)  0 33.333%,
    var(--nq-amber) 33.333% 66.666%,
    var(--nq-coral) 66.666% 100%
  );
}


/* ============================================================================
   7 · SLIDERS & HERO
   Corrige: H2 a 50px/w300 sem tracking → display Thin com o gesto da marca.
   ========================================================================== */
#page-container .et_pb_slide_title,
#page-container .et_pb_slider .et_pb_slide_description .et_pb_slide_title,
#page-container .et_pb_fullwidth_header .et_pb_module_header {
  font-family: var(--nq-font) !important;
  font-weight: 100 !important;
  font-size: clamp(32px, 5vw, var(--nq-fs-display)) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: var(--nq-lh-tight) !important;
  color: #fff !important;
  text-shadow: none !important;
}

#page-container .et_pb_slide_description,
#page-container .et_pb_fullwidth_header_subhead {
  font-weight: 300 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

/* Scrim legível — leve, slate, sem HDR nem filtro saturado */
.et_pb_slide_overlay_container,
.et_pb_fullwidth_header_overlay {
  background: linear-gradient(
    to right,
    rgba(34,48,60,.15) 0%,
    rgba(34,48,60,.55) 100%
  ) !important;
}

/* Controladores do slider */
.et-pb-controllers a { background-color: rgba(255,255,255,.45) !important; }
.et-pb-controllers .et-pb-active-control { background-color: #fff !important; }

/* Hero de página interior (ex.: "O nosso método de trabalho" — hoje laranja
   chapado #DD901C). Slate é o fundo canónico; o acento entra na hairline. */
#page-container .nq-hero {
  background-color: var(--nq-bg-dark) !important;
  border-bottom: 4px solid var(--nq-amber);
}
#page-container .nq-hero h1,
#page-container .nq-hero .et_pb_module_header { color: #fff !important; }
#page-container .nq-hero p,
#page-container .nq-hero .et_pb_fullwidth_header_subhead {
  color: rgba(255,255,255,.72) !important;
}


/* ============================================================================
   8 · PORTFÓLIO (Projectos)
   ========================================================================== */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
  font-family: var(--nq-font) !important;
  font-size: var(--nq-fs-small) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nq-ls-caps) !important;
  color: var(--nq-ink-600) !important;
  border: 1px solid var(--nq-border) !important;
  border-radius: var(--nq-r-sm) !important;   /* chips = 2px */
  background: transparent !important;
  padding: var(--nq-sp-2) var(--nq-sp-4) !important;
  transition: color .18s ease, border-color .18s ease;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
  color: var(--nq-amber) !important;
  border-color: var(--nq-amber) !important;
  background: transparent !important;
}

#page-container .et_pb_portfolio_item .et_pb_module_header,
#page-container .et_pb_portfolio_item h2 {
  font-size: var(--nq-fs-h3) !important;
  font-weight: 400 !important;
  letter-spacing: var(--nq-ls-tight) !important;
  color: var(--nq-ink-900) !important;
}
#page-container .et_pb_portfolio_item .post-meta,
#page-container .et_pb_portfolio_item .post-meta a {
  font-size: var(--nq-fs-overline) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nq-ls-overline) !important;
  color: var(--nq-ink-500) !important;
}

/* Overlay de imagem — slate, não o azul default do Divi */
.et_portfolio_image .et_overlay,
.et_pb_gallery_image .et_overlay {
  background-color: rgba(34,48,60,.72) !important;
  border: none !important;
  box-shadow: none !important;
}
.et_overlay:before { color: #fff !important; }


/* ============================================================================
   9 · FORMULÁRIOS
   Fields = canto 0 (regra do manual).
   ========================================================================== */
#page-container input[type="text"],
#page-container input[type="email"],
#page-container input[type="tel"],
#page-container textarea,
#page-container select,
#page-container .et_pb_contact_field input,
#page-container .et_pb_contact_field textarea {
  font-family: var(--nq-font) !important;
  font-size: var(--nq-fs-body) !important;
  color: var(--nq-ink-800) !important;
  background: var(--nq-n-0) !important;
  border: 1px solid var(--nq-n-400) !important;
  border-radius: var(--nq-r-none) !important;
  padding: var(--nq-sp-3) var(--nq-sp-4) !important;
  box-shadow: none !important;
  transition: border-color .18s ease;
}
#page-container input:focus,
#page-container textarea:focus,
#page-container select:focus {
  border-color: var(--nq-blue) !important;
  outline: 2px solid rgba(34,111,166,.25) !important;
  outline-offset: 0 !important;
}
#page-container ::placeholder { color: var(--nq-ink-400) !important; opacity: 1; }

/* Foco visível global — acessibilidade */
#page-container a:focus-visible,
#page-container button:focus-visible,
#top-menu a:focus-visible {
  outline: 2px solid var(--nq-blue);
  outline-offset: 2px;
}


/* ============================================================================
   10 · RODAPÉ
   Corrige: títulos a #DD901C sobre #2C3E50 → slate canónico + âmbar aclarado.
   ========================================================================== */
#main-footer {
  background-color: var(--nq-ink-900) !important;  /* #22303C, não #2C3E50 */
}
#main-footer:before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--nq-blue)  0 33.333%,
    var(--nq-amber) 33.333% 66.666%,
    var(--nq-coral) 66.666% 100%
  );
}

#main-footer h4,
#main-footer .widgettitle,
#footer-widgets h4 {
  font-size: var(--nq-fs-overline) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--nq-ls-overline) !important;
  color: var(--nq-amber-on-dark) !important;   /* #F0A733 — legível sobre slate */
  margin-bottom: var(--nq-sp-4) !important;
}

#main-footer,
#main-footer p,
#footer-widgets .et_pb_widget div,
#footer-widgets .et_pb_widget li {
  color: rgba(255,255,255,.78) !important;
  font-size: var(--nq-fs-small) !important;
  line-height: var(--nq-lh-relaxed) !important;
}

#main-footer a { color: var(--nq-blue-on-dark) !important; }
#main-footer a:hover { color: #fff !important; }

#footer-bottom {
  background-color: rgba(0,0,0,.22) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
#footer-info, #footer-info a {
  font-size: var(--nq-fs-overline) !important;
  letter-spacing: var(--nq-ls-caps) !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
}

/* Botão voltar ao topo */
.et_pb_scroll_top {
  background: var(--nq-ink-800) !important;
  border-radius: var(--nq-r-md) !important;
  box-shadow: var(--nq-sh-1) !important;
}


/* ============================================================================
   11 · LOGÓTIPO — ZONA DE PROTEÇÃO & DIMENSÃO MÍNIMA
   O manual: margem mínima = metade da altura do anel «Q»; wordmark fina
   nunca abaixo de 120px de largura (abaixo disso → wordmark compacta w600).
   O ficheiro atual é um PNG 300×50 de 2013 — desfocado em ecrãs retina.
   Ver nota de handover: substituir por SVG.
   ========================================================================== */
.et_pb_menu__logo,
#logo {
  padding: 0 !important;
  /* espaço livre ≈ Q/2; com logo a 44px de altura → ~22px de margem */
  margin-right: 22px !important;
}

@media (max-width: 480px) {
  /* Abaixo de ~120px de largura a linha fina perde-se: usar a versão
     compacta (ficheiro separado, ver handover). */
  #logo { max-height: 32px !important; }
}


/* ============================================================================
   12 · BANNER DE COOKIES (CookieYes)
   Alinhar com a marca: flat, hairline, botões do sistema.
   ========================================================================== */
.cky-consent-container .cky-consent-bar {
  font-family: var(--nq-font) !important;
  border: 1px solid var(--nq-border) !important;
  border-radius: var(--nq-r-md) !important;
  box-shadow: var(--nq-sh-3) !important;
}
.cky-title { color: var(--nq-ink-900) !important; font-weight: 600 !important; }
.cky-notice-des, .cky-notice-des p {
  color: var(--nq-ink-600) !important;
  font-size: var(--nq-fs-small) !important;
}
.cky-btn { border-radius: var(--nq-r-md) !important; font-weight: 600 !important; }
.cky-btn-accept {
  background: var(--nq-amber) !important;
  border-color: var(--nq-amber) !important;
  color: #fff !important;
}
.cky-btn-reject, .cky-btn-customize {
  background: transparent !important;
  border: 1px solid var(--nq-n-400) !important;
  color: var(--nq-ink-800) !important;
}


/* ============================================================================
   13 · RESPONSIVO — escala de tipo
   ========================================================================== */
@media (max-width: 980px) {
  :root {
    --nq-fs-display: 40px;
    --nq-fs-h1: 32px;
    --nq-fs-h2: 26px;
    --nq-fs-h3: 21px;
  }
  .nq-phase { padding-left: var(--nq-sp-4); }
}

@media (max-width: 767px) {
  :root {
    --nq-fs-display: 30px;
    --nq-fs-h1: 26px;
    --nq-fs-h2: 22px;
    --nq-fs-h3: 19px;
  }
  #page-container .et_pb_slide_title,
  #page-container .et_pb_fullwidth_header .et_pb_module_header {
    letter-spacing: 0.08em !important;  /* tracking fecha um pouco em ecrã pequeno */
  }
}


/* ============================================================================
   14 · IMPRESSÃO
   ========================================================================== */
@media print {
  #main-header, #main-footer, .et_pb_scroll_top, .cky-consent-container { display: none !important; }
  body { color: #000 !important; font-size: 11pt !important; }
}


/* ============================================================================
 * 15  CORRECOES POS-VERIFICACAO EM PRODUCAO (2026-08-03)
 * Este bloco fica no FIM do ficheiro de proposito: sobrepoe-se ao que esta
 * acima e mantem o registo do que falhou e porque.
 * 
 * SCRIM DO SLIDER
 * A regra do 7 aponta para .et_pb_slide_overlay_container, elemento que NAO
 * existe no Divi 5 (verificado: 0 ocorrencias no DOM). O scrim nunca pintou.
 * Como o 7 tambem impoe text-shadow:none, ficou texto branco fino sobre
 * fotografia sem apoio de contraste nenhum.
 * 
 * Medicao da imagem do hero (derek-torsani-224082_web.jpg, 2400x1837), na
 * faixa onde o titulo assenta (55-97% da largura, 33-65% da altura), texto
 * branco, pior pixel:
 * sem scrim ... 1.62:1  (falhava ja ANTES desta folha; o Divi disfarcava
 * com text-shadow)
 * 55% ......... 3.13:1
 * 65% ......... 3.78:1
 * 75% ......... 4.75:1  <- escolhido
 * ============================================================================ */
#page-container .et_pb_slider .et_pb_slide { position: relative; }
#page-container .et_pb_slider .et_pb_slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: linear-gradient(to right, rgba(34,48,60,.10) 0%, rgba(34,48,60,.45) 30%, rgba(34,48,60,.75) 55%, rgba(34,48,60,.78) 100%);
}
#page-container .et_pb_slider .et_pb_slide > .et_pb_container { position: relative; z-index: 1; }
@media (max-width: 980px) {
	#page-container .et_pb_slider .et_pb_slide::after { background: rgba(34,48,60,.72); }
}


/* ----------------------------------------------------------------------------
 * HERO DE PAGINA INTERIOR
 * O manual (cap. 06) diz que o ambar e acento PONTUAL, nunca fundo cheio; o
 * fundo canonico das seccoes escuras e o slate ink-900. Os heros interiores
 * estavam a #DD901C (que tambem nao e o ambar da marca) com texto branco:
 *    branco sobre #DD901C ... 2.60:1  falha AA
 *    branco sobre #22303C ... 13.50:1
 * Medido em /como-fazemos/ e /o-que-fazemos/ (3 heros nesta ultima).
 * Nao se toca em background-image, para que um hero com fotografia mantenha
 * a imagem por cima desta cor.
 * ---------------------------------------------------------------------------- */
#page-container .et_pb_fullwidth_header {
	background-color: var(--nq-ink-900) !important;
	border-bottom: 4px solid var(--nq-amber);
}

/* ----------------------------------------------------------------------------
 * SLIDER DENTRO DE COLUNA (fullwidth_off) - ex.: "Trabalhos em curso"
 * O 7 poe o titulo do slider a 64px/tracking largo, o que serve o hero de
 * largura total mas ESTOURA num slider metido numa coluna: a palavra
 * "RESIDENCIAL" (452px a 64px) nao cabe nos 449px da coluna e o Divi parte-a
 * a meio ("RESIDENCIA / L"). Aqui reduz-se a escala so para este caso.
 * Especificidade com .et_pb_slider.et_pb_slider_fullwidth_off para vencer o 7.
 * ---------------------------------------------------------------------------- */
#page-container .et_pb_slider.et_pb_slider_fullwidth_off .et_pb_slide_description .et_pb_slide_title,
#page-container .et_pb_slider.et_pb_slider_fullwidth_off .et_pb_slide_title {
	font-size: clamp(22px, 2.4vw, 38px) !important;
	letter-spacing: 0.08em !important;
	line-height: 1.15 !important;
}

/* FICHA DE PROJETO (single-project com bloco .ncl-ficha) */
/* A ficha traz o seu proprio titulo, hero e nav; o template de projeto do Divi injecta por cima o titulo (.et_main_title), a imagem destacada (img direto no article) e a meta (.et_project_meta), duplicando tudo. Escondem-se SO nas paginas que contem a ficha, via :has(.ncl-ficha), sem afetar os restantes projetos. */
body:has(.ncl-ficha) .et_main_title,
body:has(.ncl-ficha) article.project > img,
body:has(.ncl-ficha) .et_project_meta{display:none !important}
body:has(.ncl-ficha) .entry-content{padding-top:0 !important}
body:has(.ncl-ficha) #left-area{padding-bottom:0 !important}