/* ═══════════════════════════════════════════════════════════════════
   LUIS MEIRELES · luis-miguel.dev
   Sistema monocromático puro. Duas cores, zero cinzentos.
   Tudo deriva da grelha do símbolo: 25 unidades, traço 7u, canal 2u.
   Tokens copiados verbatim do manual de marca.

   1 Tokens · 2 Densidade ótica · 3 Tipos de letra · 4 Reposição
   5 Tipografia · 6 Estrutura · 7 Componentes · 8 Cabeçalho
   9 Loader · 10 Secções · 11 Utilitários · 12 Media queries
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────── */
:root{
  /* Cor — as duas únicas do sistema */
  --ink:   #000000;
  --paper: #FFFFFF;

  /* Tipografia */
  --font-primary: "Neue Haas Grotesk Display", "Helvetica Now Display",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-secondary: "Poppins", "Century Gothic", "Futura", var(--font-primary);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Escala tipográfica — modular, razão 1.25 (terça maior), base 16 */
  --fs-10:  0.625rem;  /* 10px */
  --fs-20:  0.8125rem; /* 13px */
  --fs-30:  1rem;      /* 16px */
  --fs-40:  1.25rem;   /* 20px */
  --fs-50:  1.5625rem; /* 25px */
  --fs-60:  1.9375rem; /* 31px */
  --fs-70:  2.4375rem; /* 39px */
  --fs-80:  3.0625rem; /* 49px */
  --fs-90:  3.8125rem; /* 61px */
  --fs-100: 4.75rem;   /* 76px */
  --fs-110: 5.9375rem; /* 95px */

  /* Espaçamento — módulo M = 4px. Traço = 7M. Canal = 2M. */
  --sp-0: 0;
  --sp-1: 4px;    --sp-2: 8px;    --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 24px;   --sp-6: 28px;   --sp-7: 40px;   --sp-8: 64px;
  --sp-9: 100px;  --sp-10: 160px; --sp-11: 256px;

  /* Filetes — nunca cinzentos, apenas espessuras */
  --line-1: 1px;  --line-2: 2px;  --line-4: 4px;  --line-8: 8px;

  /* Raio — o sistema não tem cantos redondos */
  --radius: 0px;

  /* Movimento */
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;
  --dur-4: 500ms;  --dur-5: 800ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-enter:    cubic-bezier(0,0,0,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);
  --ease-mech:     cubic-bezier(.85,0,.15,1);

  /* Tracking — um par por degrau da escala tipográfica, igual ao manual.
     Mantém o princípio: quanto maior o corpo, mais apertado o tracking.
     Para afinar a legibilidade do site inteiro, mexe-se só aqui.     */
  --tr-110: -0.018em;  /* 95px — capa */
  --tr-100: -0.015em;  /* 76px — título de abertura, hero */
  --tr-90:  -0.012em;  /* 61px — título de página */
  --tr-80:  -0.008em;  /* 49px — título de secção */
  --tr-70:  -0.006em;  /* 39px — número em destaque */
  --tr-60:  -0.004em;  /* 31px — subtítulo maior */
  --tr-50:  -0.002em;  /* 25px — título de bloco */
  --tr-40:   0.006em;  /* 20px — introdução, citação */
  --tr-30:   0.015em;  /* 16px — texto corrido */
  --tr-20:   0.022em;  /* 13px — apoio, botões, navegação */
  --tr-10:   0.100em;  /* 10px — Poppins, maiúsculas */

  /* Layout */
  --measure:  68ch;
  --shell:    1440px;
  --gutter:   var(--sp-5);
  --header-h: 64px;
}

/* Modo negativo — a única "variação de cor" que o sistema admite */
html[data-mode="negative"]{
  --ink:   #FFFFFF;
  --paper: #000000;
}

/* ── 2. DENSIDADE ÓTICA ──────────────────────────────────────────────
   Substitui os cinzentos. Trama ordenada de Bayer sobre módulo de 2px:
   à distância lê-se como cinzento, de perto é só preto e branco.
   A secção invertida repõe o conjunto oposto — sem isto, o botão
   desabilitado dentro dela pintaria trama preta sobre fundo preto.   */
:root,
html[data-mode="negative"] .sec--invert{
  --dither-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h2v2H0z'/%3E%3C/svg%3E");
  --dither-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h2v2H0zM4 4h2v2H4z'/%3E%3C/svg%3E");
  --dither-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h2v2H0zM4 0h2v2H4zM0 4h2v2H0zM4 4h2v2H4z'/%3E%3C/svg%3E");
  --dither-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h2v2H0zM4 0h2v2H4zM2 2h2v2H2zM6 2h2v2H6zM0 4h2v2H0zM4 4h2v2H4zM2 6h2v2H2zM6 6h2v2H6z'/%3E%3C/svg%3E");
  --dither-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M0 0h2v2H0zM2 0h2v2H2zM4 0h2v2H4zM6 0h2v2H6zM2 2h2v2H2zM6 2h2v2H6zM0 4h2v2H0zM2 4h2v2H2zM4 4h2v2H4zM6 4h2v2H6zM2 6h2v2H2zM6 6h2v2H6z'/%3E%3C/svg%3E");
}
html[data-mode="negative"],
.sec--invert{
  --dither-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h2v2H0z'/%3E%3C/svg%3E");
  --dither-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h2v2H0zM4 4h2v2H4z'/%3E%3C/svg%3E");
  --dither-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h2v2H0zM4 0h2v2H4zM0 4h2v2H0zM4 4h2v2H4z'/%3E%3C/svg%3E");
  --dither-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h2v2H0zM4 0h2v2H4zM2 2h2v2H2zM6 2h2v2H6zM0 4h2v2H0zM4 4h2v2H4zM2 6h2v2H2zM6 6h2v2H6z'/%3E%3C/svg%3E");
  --dither-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h2v2H0zM2 0h2v2H2zM4 0h2v2H4zM6 0h2v2H6zM2 2h2v2H2zM6 2h2v2H6zM0 4h2v2H0zM2 4h2v2H2zM4 4h2v2H4zM6 4h2v2H6zM2 6h2v2H2zM6 6h2v2H6z'/%3E%3C/svg%3E");
}

/* ── 3. TIPOS DE LETRA ───────────────────────────────────────────────
   Só duas faces. O manual: "Não usamos Bold nem Black."
   O intervalo 500–650 faz o peso 600 dos títulos cair no Medium real,
   sem sintetizar e sem saltar para Bold — não existe ficheiro Semibold. */
@font-face{
  font-family:"Neue Haas Grotesk Display";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/NeueHaasGrotDisp-55Roman-Trial.otf") format("opentype");
}
@font-face{
  font-family:"Neue Haas Grotesk Display";
  font-style:normal; font-weight:500 650; font-display:swap;
  src:url("/assets/fonts/NeueHaasGrotDisp-65Medium-Trial.otf") format("opentype");
}

/* ── 4. REPOSIÇÃO ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--sp-5));
  scrollbar-gutter:stable;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-primary);
  font-size:var(--fs-30);
  line-height:1.55;
  font-weight:400;
  letter-spacing:var(--tr-30);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color var(--dur-3) var(--ease-standard),
             color var(--dur-3) var(--ease-standard);
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
strong,b{ font-weight:600; }
::selection{ background:var(--ink); color:var(--paper); }

/* Foco — anel duplo, legível em ambos os modos, sem depender de cor */
:focus-visible{
  outline:var(--line-2) solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--paper);
}

/* ── 5. TIPOGRAFIA ───────────────────────────────────────────────────
   O tracking aperta quando o corpo cresce: −0,045em nos títulos
   grandes, 0 no texto pequeno. Nunca centrar texto corrido.         */
.eyebrow,
.sec__num{
  display:block;
  font-family:var(--font-secondary);
  font-size:var(--fs-10);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.sec__num{ margin-bottom:var(--sp-4); }

.sec__title{
  font-size:clamp(1.9375rem, 5.4vw, 3.0625rem);
  font-weight:600;
  letter-spacing:var(--tr-80);
  line-height:.98;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.sec__sub{
  margin-top:var(--sp-3);
  font-size:var(--fs-40);
  font-weight:500;
  letter-spacing:var(--tr-40);
  line-height:1.25;
}
.sec__lead{
  margin-top:var(--sp-5);
  max-width:var(--measure);
  font-size:var(--fs-40);
  line-height:1.42;
  letter-spacing:var(--tr-40);
}
.h3{ font-size:var(--fs-50); font-weight:600; letter-spacing:var(--tr-50); line-height:1.1; }
.h4{ font-size:var(--fs-30); font-weight:600; letter-spacing:var(--tr-30); }
.body{ max-width:var(--measure); }
.body + .body{ margin-top:var(--sp-4); }
.meta{
  font-family:var(--font-secondary);
  font-size:var(--fs-20);
  font-weight:300;
  line-height:1.5;
  letter-spacing:var(--tr-20);
}
.caption{
  font-family:var(--font-secondary);
  font-size:var(--fs-10);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:400;
}
.mono{ font-family:var(--font-mono); font-size:var(--fs-20); letter-spacing:0; }

/* ── 6. ESTRUTURA ────────────────────────────────────────────────────
   Máximo 1440px, goteira 24px. Mobile-first: uma coluna por omissão. */
.sec{ border-bottom:var(--line-1) solid var(--ink); }
.sec__inner{
  max-width:var(--shell);
  margin-inline:auto;
  padding:var(--sp-8) var(--sp-5);
}
.sec__head{ max-width:var(--measure); }
.sec__body{ margin-top:var(--sp-8); }

/* Inversão como composição — sempre o oposto do modo corrente */
.sec--invert{
  --ink:#FFFFFF; --paper:#000000;
  background:var(--paper);
  color:var(--ink);
}
html[data-mode="negative"] .sec--invert{
  --ink:#000000; --paper:#FFFFFF;
}

.grid{ display:grid; gap:var(--gutter); grid-template-columns:1fr; }

/* ── 7. COMPONENTES ──────────────────────────────────────────────── */

/* Botão — a ênfase é inversão, nunca cor */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); min-height:38px;
  border:var(--line-1) solid var(--ink); border-radius:var(--radius);
  background:var(--paper); color:var(--ink);
  font-size:var(--fs-20); font-weight:500; letter-spacing:var(--tr-20);
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color var(--dur-1) var(--ease-standard),
             color var(--dur-1) var(--ease-standard),
             transform var(--dur-1) var(--ease-standard);
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn:active{ transform:translate(1px,1px); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--paper); color:var(--ink); }
.btn--ghost{ border-color:transparent; }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--block{ width:100%; }
.btn--sm{ min-height:30px; padding:var(--sp-1) var(--sp-3); font-size:var(--fs-10); }
.btn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.btn:disabled,
.btn[aria-disabled="true"]{
  cursor:not-allowed;
  color:var(--ink);
  background-color:var(--paper);
  background-image:var(--dither-2);
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover{ background-color:var(--paper); color:var(--ink); }
.btn:disabled:active,
.btn[aria-disabled="true"]:active{ transform:none; }
.btn .icon{ flex:none; }

/* Ícone — 24×24, traço 2px, remate quadrado, pintado com currentColor */
.icon{ width:20px; height:20px; }
.icon--sm{ width:16px; height:16px; }

/* Cartão — a elevação faz-se com deslocamento e filete, nunca sombra.
   As duas camadas de box-shadow têm desfoque zero: são um retângulo de
   papel com filete de 1px, deslocado. Nada de sombra difusa.        */
.card{
  position:relative;
  border:var(--line-1) solid var(--ink);
  padding:var(--sp-5);
  background:var(--paper);
  display:flex; flex-direction:column; gap:var(--sp-3);
  box-shadow:0 0 0 0 var(--paper), 0 0 0 0 var(--ink);
  transition:transform var(--dur-2) var(--ease-standard),
             box-shadow var(--dur-2) var(--ease-standard);
}
.card:hover,
.card:focus-within{
  transform:translate(-4px,-4px);
  box-shadow:4px 4px 0 0 var(--paper), 4px 4px 0 var(--line-1) var(--ink);
}
.card__foot{
  border-top:var(--line-1) solid var(--ink);
  padding-top:var(--sp-4);
  margin-top:auto;
}

/* Carrossel — só no mobile. Scroll-snap nativo: o dedo faz o trabalho,
   sem biblioteca e sem JS a animar nada. A sangria até à margem do
   documento corta o cartão seguinte na borda, que é o que diz "há
   mais para o lado" sem precisar de seta.                          */
.grid--carousel{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:82%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--sp-5);
  margin-inline:calc(var(--sp-5) * -1);
  /* o padding-bottom dá folga ao filete deslocado do :hover do cartão */
  padding:0 var(--sp-5) var(--sp-2);
}
.grid--carousel > li{ scroll-snap-align:start; }
.grid--carousel > li > .card{ height:100%; }

/* Indicadores — quadrados, nunca círculos. Cheio = posição actual. */
.carousel__nav{ display:flex; gap:var(--sp-1); margin-top:var(--sp-5); }
.carousel__dot{
  width:28px; height:28px; padding:0;      /* 28px = o traço: alvo de toque */
  display:grid; place-items:center;
  border:0; background:none; cursor:pointer; color:inherit;
}
.carousel__dot::before{
  content:"";
  width:12px; height:12px;
  border:var(--line-1) solid var(--ink);
  background:var(--paper);
  transition:background-color var(--dur-1) var(--ease-standard);
}
.carousel__dot[aria-current="true"]::before{ background:var(--ink); }

/* Etiqueta */
.tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tag{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  border:var(--line-1) solid var(--ink); padding:2px var(--sp-2);
  font-family:var(--font-secondary); font-size:var(--fs-10);
  letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}
.tag--solid{ background:var(--ink); color:var(--paper); }

/* Controlo segmentado — usado no seletor de idioma */
.seg{ display:flex; border:var(--line-1) solid var(--ink); }
.seg button{
  border:0; background:var(--paper); color:var(--ink); cursor:pointer;
  padding:var(--sp-1) var(--sp-3); min-height:34px;
  font-family:var(--font-secondary); font-size:var(--fs-10);
  font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border-right:var(--line-1) solid var(--ink);
  transition:background-color var(--dur-1) var(--ease-standard),
             color var(--dur-1) var(--ease-standard);
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:var(--ink); color:var(--paper); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* Botão só de ícone */
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none;
  border:var(--line-1) solid var(--ink); border-radius:var(--radius);
  background:var(--paper); color:var(--ink); cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-standard),
             color var(--dur-1) var(--ease-standard);
}
.iconbtn:hover{ background:var(--ink); color:var(--paper); }

/* Marca — símbolo + nome. Gap = meio traço. */
.lockup{ display:inline-flex; align-items:center; gap:var(--sp-3); text-decoration:none; }
.lockup__mark{ width:28px; height:28px; flex:none; color:var(--ink); }
.lockup__mark .fig{ fill:currentColor; }
.lockup__name{ font-size:var(--fs-30); font-weight:600; letter-spacing:var(--tr-30); line-height:1; }

/* ── 8. CABEÇALHO ────────────────────────────────────────────────────
   Briefing: logo à esquerda, menu à direita. Minimalista.           */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:var(--line-1) solid var(--ink);
  transition:background-color var(--dur-3) var(--ease-standard),
             color var(--dur-3) var(--ease-standard);
}
.site-header__inner{
  max-width:var(--shell); margin-inline:auto;
  padding:0 var(--sp-5);
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
.header__tools{ display:flex; align-items:center; gap:var(--sp-2); }

.nav-toggle{ display:inline-flex; }

/* Painel mobile — desliza de cima, movimento no eixo */
.site-nav{
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper);
  border-bottom:var(--line-1) solid var(--ink);
  transform:translateY(-100%);
  transition:transform var(--dur-3) var(--ease-mech),
             visibility 0s linear var(--dur-3);
  visibility:hidden;
  z-index:-1;
}
.site-nav[data-open="true"]{
  transform:translateY(0);
  visibility:visible;
  transition:transform var(--dur-3) var(--ease-mech), visibility 0s;
}
.site-nav__list{ padding:var(--sp-2) var(--sp-5) var(--sp-5); }
.site-nav__item{ border-top:var(--line-1) solid var(--ink); }
.site-nav__item:last-child{ border-bottom:var(--line-1) solid var(--ink); }
.site-nav__link{
  position:relative; display:grid; grid-template-columns:2.4em 1fr;
  align-items:baseline; gap:var(--sp-2);
  padding:var(--sp-3) 0;
  text-decoration:none; font-size:var(--fs-20); letter-spacing:var(--tr-20);
  transition:padding-left var(--dur-2) var(--ease-standard);
}
.site-nav__link:hover{ padding-left:var(--sp-2); }
.site-nav__link[aria-current="true"]{
  background:var(--ink); color:var(--paper);
  padding-left:var(--sp-2); font-weight:500;
}
.site-nav__num{
  font-family:var(--font-secondary); font-size:var(--fs-10);
  font-weight:500; letter-spacing:.12em;
}

/* ── 9. LOADER ───────────────────────────────────────────────────────
   A construção do símbolo: cinco formas, curva mecânica, 140ms de
   desfasamento. O vertical desce, o horizontal avança. É a única
   animação longa que a marca autoriza.                              */
.loader{
  /* A abertura é sempre um momento de afirmação: branco sobre preto,
     em qualquer modo do site. Por isso os tokens são fixos aqui. */
  --ink:#FFFFFF;
  --paper:#000000;
  position:fixed; inset:0; z-index:100;
  background:var(--paper); color:var(--ink);
  display:grid; place-items:center;
  transform:translateY(0);
}
.loader[hidden]{ display:none; }
.loader .fig{ fill:currentColor; }
/* Saída: varrimento para cima. Movimento no eixo, nunca opacidade. */
.loader.is-out{
  transform:translateY(-100%);
  transition:transform var(--dur-3) var(--ease-exit);
  /* Deixa de bloquear a página assim que começa a sair — mesmo que a
     transição nunca corra (aba em segundo plano, animação suspensa). */
  pointer-events:none;
}
/* Preto já no <html>: nenhuma hipótese de piscar branco antes de o
   loader pintar, mesmo com primeira pintura lenta. */
html.is-loading{ overflow:hidden; background:#000000; }

.logo-anim{ width:120px; height:120px; }
.logo-anim .fig{ transform-box:fill-box; }
.logo-anim.play .lg-1{ animation:growY var(--dur-4) var(--ease-mech) 0ms   both; transform-origin:top;  }
.logo-anim.play .lg-2{ animation:growX var(--dur-4) var(--ease-mech) 140ms both; transform-origin:left; }
.logo-anim.play .lg-3{ animation:growY var(--dur-4) var(--ease-mech) 280ms both; transform-origin:top;  }
.logo-anim.play .lg-4{ animation:growX var(--dur-4) var(--ease-mech) 420ms both; transform-origin:left; }
.logo-anim.play .lg-5{ animation:growY var(--dur-4) var(--ease-mech) 560ms both; transform-origin:top;  }
@keyframes growY{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes growX{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ── 10. SECÇÕES ─────────────────────────────────────────────────── */

/* Hero */
.hero .sec__inner{ padding-block:var(--sp-9) var(--sp-8); }
.hero__line{
  font-size:clamp(2.25rem, 8.4vw, 4.75rem);
  font-weight:600;
  letter-spacing:var(--tr-100);
  line-height:.94;
  max-width:16ch;
  overflow-wrap:break-word;
}
.caret{
  display:inline-block;
  width:.44em; height:.78em;
  background:var(--ink);
  margin-left:.06em;
  transform:translateY(.06em);
  animation:blink 900ms steps(1,end) infinite;
}
/* Liga/desliga duro — um fade geraria cinzento por outra via */
@keyframes blink{
  0%,50%{ background:var(--ink); }
  50.01%,100%{ background:transparent; }
}
.hero__meta{ margin-top:var(--sp-7); display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* Sobre — sem retrato, o bloco acompanha a margem do documento,
   como todas as outras secções. A medida do texto é travada pelo
   .sec__lead (68ch), não pela largura da coluna.                   */
.about__actions{ margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* Cartões de trabalho / projeto / nota */
.work__head{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:var(--sp-3);
}
.work__block + .work__block{ margin-top:var(--sp-4); }
.work__label{
  font-family:var(--font-secondary); font-size:var(--fs-10);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  display:block; margin-bottom:var(--sp-1);
}
.work__text{ font-size:var(--fs-20); line-height:1.55; }

/* Contacto — o e-mail é a chamada principal. Sublinhado de 2px e
   inversão no hover: a ênfase é sempre inversão, nunca cor.        */
.contact__mail{
  display:inline-block;
  font-size:clamp(1.5625rem, 4.4vw, 2.4375rem);
  font-weight:600;
  letter-spacing:var(--tr-70);
  line-height:1.1;
  text-decoration:none;
  overflow-wrap:break-word;
  border-bottom:var(--line-2) solid var(--ink);
  padding:0 var(--sp-1) var(--sp-2);
  margin-left:calc(var(--sp-1) * -1);
  transition:background-color var(--dur-1) var(--ease-standard),
             color var(--dur-1) var(--ease-standard);
}
.contact__mail:hover{ background:var(--ink); color:var(--paper); }

/* Rodapé */
.site-footer{ border-top:var(--line-1) solid var(--ink); }
.site-footer__inner{
  max-width:var(--shell); margin-inline:auto;
  padding:var(--sp-8) var(--sp-5);
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  justify-content:space-between; align-items:flex-start;
}
.site-footer__links{ display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:center; }

/* Barra de progresso de leitura — só nas páginas de artigo */
.progress{
  position:fixed; top:0; left:0;
  height:var(--line-4); width:0%;
  background:var(--ink); z-index:60;
}

/* Artigo — páginas de trabalho, projeto e nota */
.article__body{ max-width:var(--measure); }
.article__body h2{
  font-size:var(--fs-50); font-weight:600; letter-spacing:var(--tr-50);
  line-height:1.1; margin-top:var(--sp-8); margin-bottom:var(--sp-4);
}
.article__body h3{
  font-size:var(--fs-40); font-weight:600; letter-spacing:var(--tr-40);
  margin-top:var(--sp-6); margin-bottom:var(--sp-3);
}
.article__body p + p{ margin-top:var(--sp-4); }
.article__body ul{ margin-top:var(--sp-4); }
.article__body li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-top:var(--line-1) solid var(--ink);
  line-height:1.5;
}
.article__body li:last-child{ border-bottom:var(--line-1) solid var(--ink); }
.article__body li::before{ content:"—"; }
.article__quote{
  border-left:var(--line-8) solid var(--ink);
  padding-left:var(--sp-4);
  margin:var(--sp-7) 0;
  font-size:var(--fs-40); font-weight:600;
  letter-spacing:var(--tr-40); line-height:1.25;
}
.article__back{ margin-top:var(--sp-8); }

/* ── 11. UTILITÁRIOS ─────────────────────────────────────────────── */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-5); top:var(--sp-2);
  transform:translateY(-200%);
  background:var(--ink); color:var(--paper);
  padding:var(--sp-2) var(--sp-4); z-index:110;
  transition:transform var(--dur-2) var(--ease-standard);
}
.skip-link:focus{ transform:translateY(0); }
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity var(--dur-4) var(--ease-enter),
             transform var(--dur-4) var(--ease-enter);
}
.rule{ height:var(--line-1); background:var(--ink); border:0; margin:var(--sp-8) 0; }
.rule--heavy{ height:var(--line-8); }

/* ── 12. MEDIA QUERIES ───────────────────────────────────────────── */

/* ≥ 760px — a grelha abre, o menu deixa de ser painel */
@media (min-width:760px){
  .sec__inner{ padding:var(--sp-9) var(--sp-8); }
  .hero .sec__inner{ padding-block:var(--sp-10) var(--sp-9); }
  .site-header__inner,
  .site-footer__inner{ padding-inline:var(--sp-8); }
  .site-footer__inner{ padding-block:var(--sp-8); }

  .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Acima do mobile o carrossel desfaz-se: volta a ser grelha */
  .grid--carousel{
    grid-template-columns:1fr;
    grid-auto-flow:row;
    grid-auto-columns:auto;
    overflow-x:visible;
    scroll-snap-type:none;
    margin-inline:0;
    padding:0;
  }
  .carousel__nav{ display:none; }

  .nav-toggle{ display:none; }
  .site-nav{
    position:static; transform:none; visibility:visible;
    border-bottom:0; background:transparent; z-index:auto;
    transition:none;
  }
  .site-nav__list{ display:flex; gap:var(--sp-5); padding:0; }
  .site-nav__item,
  .site-nav__item:last-child{ border:0; }
  .site-nav__link{
    display:block; padding:var(--sp-2) 0;
    transition:none;
  }
  .site-nav__link:hover{ padding-left:0; }
  .site-nav__link[aria-current="true"]{
    background:transparent; color:inherit; padding-left:0;
  }
  .site-nav__num{ display:none; }
  /* Sublinhado que cresce da esquerda — cresce de uma aresta, como o L */
  .site-nav__link::after{
    content:""; position:absolute; left:0; bottom:0;
    height:var(--line-2); width:0; background:var(--ink);
    transition:width var(--dur-2) var(--ease-standard);
  }
  .site-nav__link:hover::after,
  .site-nav__link[aria-current="true"]::after{ width:100%; }

}

/* ≥ 1100px — três colunas nos cartões, respiro máximo */
@media (min-width:1100px){
  .sec__inner{ padding:var(--sp-10) var(--sp-8); }
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Impressão */
@media print{
  html[data-mode="negative"]{ --ink:#000; --paper:#fff; }
  .site-header,.loader,.progress,.skip-link,.no-print{ display:none !important; }
  .sec__inner{ padding:var(--sp-6) 0; page-break-inside:avoid; }
  .card{ page-break-inside:avoid; box-shadow:none; }
  body{ font-size:11pt; }
  a{ text-decoration:none; }
}

/* Movimento reduzido — desliga tudo. Sem exceções, sem negociação. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .caret{ display:none; }
  .card:hover,
  .card:focus-within{ transform:none; box-shadow:none; }
}