/* ------------------------------------------------------------------
   dlgiovani.dev — folha de estilos única
   Sistema "Modernist": plano, arquitetónico, sem cantos redondos,
   réguas de 2px, tudo alinhado à esquerda. Cores da União Europeia.
   ------------------------------------------------------------------ */

/* ---- 1. Fonte ---------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo-8f704806.woff2") format("woff2");
  font-weight: 400 800;          /* fonte variável: um ficheiro, todos os pesos */
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 2. Tokens --------------------------------------------------- */
:root {
  --tinta:      #201e1d;   /* quase-preto  */
  --fundo:      #f3f2f2;   /* quase-branco */
  --fundo-2:    #e2e0df;   /* superfície alternada */
  --suave:      #605d5d;   /* texto secundário — 5.8:1 sobre --fundo */
  --medio:      #444141;   /* texto de apoio  — 9.0:1 sobre --fundo */
  --risco:      #d7d3d3;   /* régua fina */
  --azul:       #003399;   /* azul da bandeira da UE — 9.7:1 sobre --fundo */
  --azul-fundo: #00205c;   /* azul pressionado */
  --amarelo:    #ffcc00;   /* amarelo das estrelas da UE */

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --corpo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --larg: 900px;           /* largura máxima do conteúdo */
  --gut: 28px;             /* goteira lateral */
}

/* ---- 3. Reposição ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.55;
  /* sem font-smoothing: altera o peso real do texto */
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--amarelo); color: var(--azul-fundo); }

/* ---- 4. Ligações ------------------------------------------------- */
a {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--azul-fundo); background: var(--amarelo); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; background: var(--amarelo); color: var(--azul-fundo); }

/* Salto para o conteúdo — visível apenas com teclado */
.saltar {
  position: absolute; left: -9999px;
  background: var(--azul); color: #fff;
  padding: 12px 18px; font-weight: 600; text-decoration: none; z-index: 10;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---- 5. Estrutura ------------------------------------------------ */
.env { max-width: var(--larg); margin: 0 auto; padding-inline: var(--gut); }
.regua { border-bottom: 2px solid var(--tinta); }
.seccao { padding-block: 44px; }

.rotulo {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--suave);
}

/* ---- 6. Cabeçalho ------------------------------------------------ */
.topo { border-bottom: 2px solid var(--tinta); }
.topo .env {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: baseline; justify-content: space-between;
  padding-block: 20px;
}
.marca {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--tinta); text-decoration: none;
}
.menu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px; font-size: 14px; font-weight: 600; }
.menu a { color: var(--tinta); text-decoration: none; border-bottom: 3px solid transparent; padding-bottom: 2px; }
.menu a:hover { color: var(--azul-fundo); background: var(--amarelo); }
.menu a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--amarelo); }

.idioma { display: flex; gap: 6px; align-items: baseline; font-family: var(--mono); font-size: 12px; }
.idioma [aria-current="true"] { background: var(--azul); color: #fff; padding: 3px 7px; border: 0; }
.idioma a { padding: 3px 7px; color: var(--azul); text-decoration: none; border: 0; }

/* ---- 7. Herói ---------------------------------------------------- */
.heroi { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; padding-block: 56px; }
.heroi > div { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.heroi h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.heroi h1 .realce { color: var(--azul); }
.chamada { font-size: 18px; line-height: 1.55; max-width: 52ch; text-wrap: pretty; }

.lateral { min-width: 0; border-left: 2px solid var(--tinta); padding-left: 28px; display: flex; flex-direction: column; gap: 22px; }
.bloco { display: flex; flex-direction: column; gap: 5px; }
.bloco strong { font-size: 15px; font-weight: 600; }
.bloco span { font-size: 14px; color: var(--medio); }
.hr { height: 2px; background: var(--tinta); border: 0; margin: 0; }

/* ---- 8. Botões --------------------------------------------------- */
.accoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 13px 22px;
  font: inherit; font-size: 15px; font-weight: 600; text-align: left;
  text-decoration: none; border: 2px solid var(--azul); border-radius: 0;
}
.btn-1 { background: var(--azul); color: #fff; }
.btn-1:hover, .btn-1:focus-visible { background: var(--azul-fundo); border-color: var(--azul-fundo); color: #fff; }
.btn-2 { background: transparent; color: var(--azul); }
.btn-2:hover, .btn-2:focus-visible { background: var(--azul); color: #fff; }

/* ---- 9. Grelha de cartões ---------------------------------------- */
.grelha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2px; background: var(--tinta); border: 2px solid var(--tinta);
}
.cartao { background: var(--fundo); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cartao .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.cartao h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.cartao h3 a { color: var(--tinta); text-decoration: none; }
.cartao h3 a:hover, .cartao h3 a:focus-visible { color: var(--azul-fundo); background: var(--amarelo); }
.cartao p { font-size: 14px; color: var(--medio); line-height: 1.5; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao .etiquetas { margin-top: auto; padding-top: 4px; }

.etiqueta {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--azul); color: #fff; padding: 4px 8px;
}
.tec { border: 2px solid var(--azul); color: var(--azul); padding: 3px 8px; font-size: 12px; font-weight: 600; }

/* Reserva de espaço da imagem: evita saltos de layout ao carregar */
.fig { aspect-ratio: 16 / 10; border: 2px solid var(--tinta); background: var(--fundo-2); display: flex; align-items: flex-end; padding: 10px; }
.fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.fig .rotulo { font-size: 10px; }

/* ---- 10. Cabeçalho de página ------------------------------------- */
.cabeca { padding-block: 44px 32px; display: flex; flex-direction: column; gap: 14px; }
.cabeca h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.cabeca p { font-size: 17px; max-width: 60ch; line-height: 1.55; text-wrap: pretty; }
.migalhas { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.migalhas ol { display: flex; flex-wrap: wrap; gap: 6px; }
.migalhas li + li::before { content: "/ "; color: var(--suave); }

.titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
h2 { font-size: 24px; font-weight: 800; letter-spacing: -.015em; }

/* ---- 11. Filtro em CSS puro (:target) ---------------------------- */
/* Âncoras invisíveis: dão o estado sem JavaScript e sem saltar a página */
.alvo { display: none; }

.filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-block: 18px; }
.filtro ul { display: flex; flex-wrap: wrap; gap: 10px; }
.filtro a {
  display: block; font-size: 13px; font-weight: 600; color: var(--tinta);
  text-decoration: none; border: 2px solid var(--tinta); padding: 8px 14px 5px;
  border-bottom-width: 2px;
}
.filtro a::after { content: ""; display: block; height: 3px; margin-top: 5px; background: transparent; }
.filtro a:hover { background: var(--amarelo); color: var(--azul-fundo); }
.filtro a:focus-visible { background: var(--amarelo); color: var(--azul-fundo); outline-offset: 0; }

/* Estado por omissão (sem fragmento, ou #todos / #all): "Todos" ativo. */
.filtro .f-todos::after { background: var(--azul); }

#automacao:target ~ .filtro .f-todos::after,
#integracao:target ~ .filtro .f-todos::after,
#automation:target ~ .filtro .f-todos::after,
#integration:target ~ .filtro .f-todos::after,
#processo:target ~ .filtro .f-todos::after,
#process:target ~ .filtro .f-todos::after { background: transparent; }

#automacao:target ~ .filtro .f-a::after,
#automation:target ~ .filtro .f-a::after { background: var(--azul); }
#integracao:target  ~ .filtro .f-b::after,
#integration:target ~ .filtro .f-b::after { background: var(--azul); }
#processo:target    ~ .filtro .f-c::after,
#process:target     ~ .filtro .f-c::after { background: var(--azul); }

/* Oculta os projetos fora do tipo escolhido.
   As âncoras estão em display:none, portanto a página não salta ao clicar. */
#automacao:target ~ .grelha .proj:not(.s-a),
#automation:target ~ .grelha .proj:not(.s-a) { display: none; }
#integracao:target  ~ .grelha .proj:not(.s-b),
#integration:target ~ .grelha .proj:not(.s-b) { display: none; }
#processo:target    ~ .grelha .proj:not(.s-c),
#process:target     ~ .grelha .proj:not(.s-c) { display: none; }


/* ---- 12. Artigo -------------------------------------------------- */
.projeto { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 0; }
.projeto > .corpo { min-width: 0; padding-block: 44px; padding-right: 28px; display: flex; flex-direction: column; gap: 26px; }
.projeto > .ficha { border-left: 2px solid var(--tinta); padding: 44px 0 44px 24px; display: flex; flex-direction: column; gap: 20px; }

.prosa { display: flex; flex-direction: column; gap: 16px; max-width: 66ch; }
.prosa h2 { margin-top: 10px; font-size: 22px; }
.prosa p { font-size: 16.5px; line-height: 1.65; text-wrap: pretty; }
.prosa ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; font-size: 16.5px; line-height: 1.6; }
.prosa blockquote { border-left: 4px solid var(--amarelo); padding: 6px 0 6px 20px; font-size: 19px; line-height: 1.5; font-weight: 600; }

.publicacao { padding-block: 44px; display: flex; flex-direction: column; gap: 24px; max-width: 70ch; }
.publicacao h1 { font-size: clamp(28px, 4.2vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.publicacao p { font-size: 17.5px; line-height: 1.7; text-wrap: pretty; }
.publicacao h2 { font-size: 24px; }
.publicacao blockquote { border-left: 4px solid var(--amarelo); padding: 6px 0 6px 20px; font-size: 19px; line-height: 1.5; font-weight: 600; }
time { font-family: var(--mono); font-size: 12px; color: var(--suave); }

.paginacao { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 15px; font-weight: 600; }

/* ---- 13. Lista do jornal ----------------------------------------- */
.jornal li { border-bottom: 2px solid var(--tinta); padding-block: 26px; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 24px; }
.jornal li:first-child { border-top: 2px solid var(--tinta); }
.jornal time { padding-top: 4px; }
.jornal h2 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.jornal h2 a { color: var(--tinta); text-decoration: none; }
.jornal h2 a:hover, .jornal h2 a:focus-visible { color: var(--azul-fundo); background: var(--amarelo); }
.jornal p { font-size: 15px; color: var(--medio); line-height: 1.55; margin-top: 7px; }

/* ---- 14. Estudos ------------------------------------------------- */
.estudos { display: flex; flex-direction: column; gap: 14px; }
.estudos li { border-left: 2px solid var(--amarelo); padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.estudos li.a-decorrer { border-left-color: var(--azul); }
.estudos strong { font-size: 15px; font-weight: 600; }
.estudos span { font-size: 13px; color: var(--suave); }

/* ---- 15. Aviso de exemplo ---------------------------------------- */
.exemplo {
  border: 2px dashed var(--azul); background: var(--fundo-2);
  padding: 14px 18px; font-size: 14px; color: var(--medio);
}
.exemplo strong { color: var(--azul); font-weight: 600; }

/* ---- 16. Rodapé -------------------------------------------------- */
.fundo { border-top: 2px solid var(--tinta); margin-top: 0; }
.fundo .env { padding-block: 28px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; }
.fundo small { font-size: 13px; color: var(--suave); }
.fundo ul { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; font-weight: 600; }

/* ---- 17. Adaptação a ecrãs estreitos ----------------------------- */
@media (max-width: 760px) {
  :root { --gut: 20px; }
  .heroi { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  .lateral { border-left: 0; border-top: 2px solid var(--tinta); padding-left: 0; padding-top: 24px; }
  .projeto { grid-template-columns: 1fr; }
  .projeto > .corpo { padding-right: 0; }
  .projeto > .ficha { border-left: 0; border-top: 2px solid var(--tinta); padding: 28px 0 44px; }
  .jornal li { grid-template-columns: 1fr; gap: 8px; }
  .topo .env { padding-block: 16px; }
  .menu { gap: 16px; }
}

/* ---- 18. Impressão ----------------------------------------------- */
@media print {
  .topo, .fundo, .filtro, .accoes, .paginacao, .saltar { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ---- 19. Utilitários de espaçamento -----------------------------
   Existem para que nenhuma página precise de atributos style="…",
   e assim o Content-Security-Policy possa dispensar 'unsafe-inline'. */
.mt-1  { margin-top: 4px; }
.mt-3  { margin-top: 12px; }
.mt-5  { margin-top: 20px; }
.bloco-nota { margin: 24px 0 44px; }
.sem-topo   { border-top: 0; }
.fig-larga  { aspect-ratio: 16 / 9; }

/* ---- 20. Percurso ilustrado ------------------------------------- */
.passos { display: flex; flex-direction: column; gap: 40px; }
.passo  { display: flex; flex-direction: column; gap: 12px; }
.passo h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.passo p  { font-size: 16.5px; line-height: 1.65; max-width: 66ch; }
.passo .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul);
}

figure { margin: 0; border: 2px solid var(--tinta); background: var(--fundo-2); }
figure img { width: 100%; height: auto; display: block; }
figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave);
  padding: 9px 12px; border-top: 2px solid var(--tinta); background: var(--fundo);
}

/* Cabeçalho de projeto: texto à esquerda, ficha à direita, percurso em baixo
   a ocupar a largura toda, para as capturas respirarem. */
.intro { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 0; }
.intro > .corpo { min-width: 0; padding: 44px 28px 44px 0; display: flex; flex-direction: column; gap: 20px; }
.intro > .ficha { border-left: 2px solid var(--tinta); padding: 44px 0 44px 24px; display: flex; flex-direction: column; gap: 20px; }
.intro h1 { font-size: clamp(28px,4.2vw,42px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.lead { font-size: 18px; line-height: 1.6; max-width: 60ch; text-wrap: pretty; }

.ligacao-externa { font-size: 15px; font-weight: 600; }

@media (max-width: 760px) {
  .intro { grid-template-columns: 1fr; }
  .intro > .corpo { padding: 32px 0 24px; }
  .intro > .ficha { border-left: 0; border-top: 2px solid var(--tinta); padding: 24px 0 32px; }
}

/* Etiquetas que mudam de linha: cada fragmento leva a sua própria moldura,
   em vez de a moldura ficar aberta no ponto de quebra. */
.tec, .etiqueta {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* ---- 21. Legenda de cores ---------------------------------------
   Usada onde a ferramenta comunica por cor numa folha de cálculo.
   A amostra é decorativa: o significado está sempre no texto ao lado,
   nunca só na cor. */
.legenda {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2px; background: var(--tinta); border: 2px solid var(--tinta);
}
.legenda > div { background: var(--fundo); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.legenda .amostra { flex: 0 0 34px; height: 20px; border: 1px solid var(--tinta); margin-top: 3px; }
.legenda strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.legenda span.texto { font-size: 14px; color: var(--medio); line-height: 1.45; }

/* Lista de características, onde não há captura que mostre o produto */
.lista-caract { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2px; background: var(--tinta); border: 2px solid var(--tinta); }
.lista-caract > li { background: var(--fundo); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.lista-caract strong { font-size: 15.5px; font-weight: 600; }
.lista-caract span { font-size: 14.5px; color: var(--medio); line-height: 1.5; }

/* ---- 22. Cartões de projeto ainda por escrever -------------------
   Constam da listagem para mostrar que o trabalho existe, mas não têm
   página de detalhe. Ficam visivelmente mais discretos do que os outros
   e não são ligações, para não prometer o que ainda não há. */
.cartao.por-escrever { background: var(--fundo-2); }
.cartao.por-escrever h3 { color: var(--medio); font-weight: 800; }
.cartao.por-escrever p { color: var(--medio); }
.cartao.por-escrever .etiqueta { background: transparent; color: var(--suave); border: 2px solid var(--risco); padding: 2px 6px; }
.aviso-breve {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul); margin-top: auto; padding-top: 8px;
}

/* ---- 23. Secção vazia com aviso ---------------------------------- */
.em-breve { border: 2px dashed var(--tinta); padding: 32px 28px; margin-block: 32px 56px; display: flex; flex-direction: column; gap: 10px; }
.em-breve p { font-size: 17px; line-height: 1.6; max-width: 60ch; }
.em-breve .secundario { font-size: 15px; color: var(--medio); }

/* Miniatura do cartão: sem moldura, uma captura de interface clara funde-se
   com o fundo do cartão e lê-se como espaço vazio. */
.cartao > img { border: 2px solid var(--tinta); background: var(--fundo-2); }

/* Nenhuma etiqueta pode ultrapassar a largura da coluna que a contém. */
.tec, .etiqueta { max-width: 100%; overflow-wrap: anywhere; }

/* Bandeira ao lado da localidade. Decorativa: o texto já diz "Portugal",
   por isso vai com alt vazio. Ficheiro à parte em vez de embutida, porque
   embutir os 14 KB do SVG oficial triplicaria o peso da homepage. */
.bandeira {
  display: inline-block; height: .78em; width: auto;
  vertical-align: baseline; margin-left: 5px;
  border: 1px solid var(--risco);
}

/* ---- 24. Texto do jornal ------------------------------------------
   Listas, código e figuras dentro de uma publicação. As listas foram
   repostas a zero na secção 3, por isso voltam a ter marcadores aqui. */
.publicacao ul, .publicacao ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.6; }
.publicacao ul { list-style: disc; }
.publicacao ol { list-style: decimal; }
.publicacao h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.publicacao .lead { font-size: 19px; color: var(--medio); }
.publicacao .datas { font-size: 12px; margin-top: -10px; }
.publicacao code { font-family: var(--mono); font-size: .9em; background: var(--fundo-2); padding: 1px 4px; }
.publicacao pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  background: var(--fundo-2); border-left: 4px solid var(--azul);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.5;
}
.publicacao pre code { background: none; padding: 0; font-size: inherit; }
.publicacao sup { line-height: 0; }
.publicacao .remate { font-size: 15.5px; color: var(--medio); border-top: 2px solid var(--tinta); padding-top: 20px; margin-top: 12px; }

/* Demonstração desenhada em SVG, sem JavaScript */
figure.demo { background: var(--fundo); }
figure.demo svg { display: block; width: 100%; height: auto; padding: 12px; }

/* Aviso de texto desatualizado */
.aviso { border: 2px solid var(--azul); border-left-width: 8px; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.aviso .rotulo { color: var(--azul); }
.publicacao .aviso p { font-size: 15.5px; line-height: 1.55; }

/* Lista de publicações: na página do jornal e no destaque da homepage */
.cabeca + .env > .jornal { margin-block: 32px 56px; }
.jornal h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.jornal h3 a { color: var(--tinta); text-decoration: none; }
.jornal h3 a:hover, .jornal h3 a:focus-visible { color: var(--azul-fundo); background: var(--amarelo); }