/* Tema escuro do site - Elevate Solutions (Épico 19)
   Nasceu na homepage (Épico 18, home.css) e foi estendido a todas as
   páginas a pedido explícito do utilizador ("replica a mesma lógica do
   início, em termos de cores e efeitos, nas outras páginas"). Este
   ficheiro é a versão partilhada: regras genéricas de componentes que
   também existem fora da homepage (.card, .section-alt, .case-card,
   .section-cta, o cabeçalho/rodapé, etc.). Carregado por TODAS as
   páginas, a seguir a components.css/layout.css - as regras aqui
   sobrepõem-se aos defaults claros de components.css por ordem de
   carregamento (mesma especificidade, ficheiro posterior vence).

   O que fica de fora deste ficheiro, de propósito: elementos decorativos
   que só existem na homepage (painel do hero, glow atrás de "O que
   fazemos", badges circulares do processo, faixa de tecnologias, faixa
   de confiança) continuam em home.css - não fazem sentido nem têm
   seletor correspondente nas outras páginas. Overrides específicos de
   uma página só (ex: /sobre/) vivem no CSS dessa página (about.css).

   Nenhuma cor nova: só os tokens navy/sky já existentes em tokens.css.
   Nenhum conteúdo novo: só tratamento visual. Pares de contraste
   texto/fundo reutilizam só os já validados em docs/brand.md (Épico
   12.1) para fundo escuro. */

/* Redefine os tokens semânticos --text/--text-muted (não as suas cores
   base em tokens.css, só o valor herdado a partir do body) para os
   equivalentes on-dark já validados. Isto é o que torna este tema
   escuro robusto para além dos seletores explícitos abaixo: várias
   páginas (ex: /sobre/, detalhe de serviço, detalhe de caso de estudo)
   têm parágrafos com `style="color: var(--text-muted)"` inline,
   gerados pelos scripts de build - uma folha de estilo externa não
   consegue sobrepor-se a um estilo inline com um seletor de classe,
   mas CONSEGUE mudar o valor para que a variável resolve, porque
   custom properties herdam pela árvore do DOM. Body é o ponto certo:
   ancestral de tudo, sem afetar tokens.css (a definição em --root
   mantém-se, isto só sombreia o valor a partir daqui para baixo). */
body {
  background: var(--navy-900);
  --text: var(--text-on-dark);
  --text-muted: var(--text-on-dark-muted);
}

/* Links genéricos (apanha qualquer <a> sem classe própria, ex: o link
   para o website do cliente num caso de estudo) - sky-700/navy-700
   (base.css) são para fundo claro; sky-500 já está validado sobre
   navy-900/800 em docs/brand.md. Seletores mais específicos already
   existentes (.card-link, .footer-col a, .page-header a, etc.)
   continuam a vencer este por especificidade. */
a { color: var(--sky-500); }
a:hover { color: var(--white); }

/* Cabeçalho fixo - vidro escuro semi-transparente. Opacidade alta (0.95) e
   blur maior (16px) de propósito: o blur tem raio finito, por isso texto do
   conteúdo que fica scrollado mesmo por baixo da borda inferior do cabeçalho
   (títulos/ícones do painel de contactos, por ex.) só ficava parcialmente
   desfocado nessa faixa de transição - com 0.82 de opacidade isso chegava a
   ler-se sobreposto ao logo/hambúrguer (visto em mobile, 320px). Com 0.95
   essa faixa fica praticamente opaca, o texto por trás deixa de ser legível,
   mantendo o efeito vidro subtil no resto do cabeçalho. */
.site-header {
  background: rgba(22, 33, 58, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.7);
}
.site-header .nav-links a { color: var(--text-on-dark-muted); }
.site-header .nav-links a:hover,
.site-header .nav-links a[aria-current="page"] { color: var(--white); border-bottom-color: var(--sky-500); }
.site-header .nav-toggle { border-color: rgba(255, 255, 255, 0.2); background: transparent; }
.site-header .nav-toggle svg { color: var(--white); }
.mobile-nav { background: var(--navy-900); }
.mobile-nav a:where(:not(.btn)) { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.1); }

/* Títulos de secção e headings dentro de cards - o h1-h4 global
   (base.css) é navy-800, precisa de branco em fundo escuro. */
.section-head h2,
.card h3,
.step h3,
.principle h3 { color: var(--white); }
.section-head .lead { color: var(--text-on-dark-muted); }

/* Cards (serviços, placeholders de portfólio, equipa/valores em /sobre/)
   - sem borda visível em repouso (o contorno claro ficava "sujo" sobre
   fundo escuro - feedback do utilizador). Contraste vem do tom (navy-700,
   mais claro do que o fundo à volta) e de uma sombra funda, não de uma
   linha. `border-color: transparent` (em vez de `border: none`) mantém a
   largura de 1px já definida em components.css, só invisível em
   repouso - a transição para `border-color: sky-500` no hover continua
   suave. */
.card {
  background: var(--navy-700);
  border-color: transparent;
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7);
}
.card:hover {
  border-color: var(--sky-500);
  box-shadow: 0 22px 40px -18px rgba(93, 195, 240, 0.4);
}
.card-icon {
  background: rgba(93, 195, 240, 0.14);
  color: var(--sky-500);
  box-shadow: none;
}
.card p { color: var(--text-on-dark-muted); }
.card-link { color: var(--sky-500); }
.card:hover .card-link { color: var(--white); }

/* Secções alternadas - navy ligeiramente mais claro do que o fundo da
   página, para continuar a marcar o ritmo entre secções. */
.section-alt { background: var(--navy-800); }

/* Divisores de chevron - recolorados para as duas tonalidades de navy
   agora em jogo, em vez de branco/cinzento-claro. */
.section-chevron-divider path { fill: var(--navy-800); }
.section-chevron-divider--light path { fill: var(--navy-900); }

/* Passos de processo (badges circulares só na homepage - ver .step-badge
   em home.css; estas duas regras são genéricas, cores só). */
.step h3::before { color: var(--sky-500); }
.step p { color: var(--text-on-dark-muted); }

/* Portfólio - a causa real do contorno claro que persistia não era a
   borda (já estava transparente): era o PRÓPRIO .case-card, que nunca
   tinha o seu `background: var(--white)` (components.css) sobreposto -
   só o .case-card-body (a metade de baixo) tinha navy-700. O card e o
   corpo preenchem o retângulo inteiro, mas no recorte do border-radius
   (`overflow: hidden`) sobra um fio de subpixel do fundo branco original
   exatamente nos 4 cantos arredondados, visível como um "risco branco"
   sobre um fundo escuro à volta - daí não desaparecer só com
   border-color: transparent. Corrigido na origem: o próprio .case-card
   passa a navy-700 também, para esse fio de subpixel ficar dark-on-dark
   (invisível) em vez de white-on-dark (visível). */
.case-card { background: var(--navy-700); border-color: transparent; box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7); }
.case-card-body { background: var(--navy-700); }
/* Sem link de saída (Épico 25) - equivalente escuro do override em
   components.css: mantém exatamente os valores de repouso no hover, em vez
   do neutral-200/box-shadow claros que não fariam sentido sobre navy. */
.case-card--static:hover { border-color: transparent; box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7); }

/* .btn-secondary é usado em fundo claro nalgumas composições antigas -
   em qualquer página com este tema escuro precisa do mesmo tratamento
   do .btn-on-dark (transparente + borda clara). */
.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover { border-color: var(--sky-500); color: var(--sky-500); }

/* Testemunhos (hoje só na homepage, mas o componente é genérico). */
.testimonial-card {
  background: var(--navy-700);
  border-color: transparent;
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7);
}
.testimonial-quote { color: var(--white); }
.testimonial-name { color: var(--white); }
.testimonial-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.testimonial-btn svg { color: var(--white); }
.testimonial-btn:hover { border-color: var(--sky-500); }
.testimonial-dot::before { background: rgba(255, 255, 255, 0.22); }
.testimonial-dot.is-active::before { background: var(--sky-500); }

/* Avatar de iniciais - usado nos testemunhos e nos cartões de equipa de
   /sobre/. Em fundo claro usava navy sobre branco; sobre um cartão já
   navy precisa de se destacar com um tom próprio em vez de se misturar
   com o fundo do cartão. */
.avatar-initials {
  background: linear-gradient(135deg, var(--sky-600), var(--sky-700));
  color: var(--white);
}

/* Metodologia (.principle-row, hoje só na homepage, componente genérico). */
.principle { border-left-color: rgba(255, 255, 255, 0.12); }
.principle-icon { color: var(--sky-500); }
.principle p { color: var(--text-on-dark-muted); }

/* CTA final - usado em TODAS as páginas (homepage, /sobre/, /servicos/,
   /portfolio/, casos e serviços individuais). Gradiente sutil + borda
   tingida de sky em vez de um bloco navy-800 plano que se perderia
   contra o fundo navy-900 à volta. */
.section-cta {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-700));
  border: 1px solid rgba(93, 195, 240, 0.22);
}

/* Rodapé - tom mais escuro do que o resto da página (fora da escala de
   tokens.css, mas dentro da mesma família de navy - metade da
   luminosidade de --navy-900), só para o rodapé, para dar contraste a
   marcar onde o conteúdo acaba. */
.site-footer { background: #0B111F; }

/* Rodapé - grande wordmark decorativo em marca de água, eco do nome da
   marca (não é texto novo/fabricado) - puro efeito tipográfico,
   aria-hidden porque o nome da empresa já está presente e acessível no
   logótipo do rodapé logo acima. Presente em todas as páginas agora
   (markup replicado no site-shell.mjs e nas páginas estáticas). */
.footer-watermark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(93, 195, 240, 0.18), rgba(93, 195, 240, 0));
  background-clip: text;
  -webkit-background-clip: text;
  margin-top: var(--space-8);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}