@charset "utf-8";
/* ==========================================================================
   AVANTI — A EXPERIÊNCIA
   --------------------------------------------------------------------------
   Português europeu em todo o ficheiro. Tratamento por tu.

   A paleta foi auditada antes de ser usada (_ferramentas/contraste.py) sobre
   o fundo real #100E37. O que saiu de lá e não se pode esquecer:

     tinta #E4E1F5 a 100%  15,7:1     corpo e títulos
     tinta #E4E1F5 a  .72   8,4:1     texto secundário
     tinta #E4E1F5 a  .62   6,5:1     mínimo para texto pequeno
     azul  #B1E5FC         13,6:1
     roxo  #B650DF          4,6:1     passa à justa — nunca abaixo de 16px
     roxo  #B650DF sobre azul-escuro #002564   3,6:1 → só título grande
     BOTÃO CHEIO: texto escuro #0B0722 sobre o roxo (4,9:1).
                  Branco sobre roxo dá 4,0:1 e chumba. Não trocar.

   Índice
   01 · Fundações            08 · Trabalhos          15 · Contactos
   02 · Componentes          09 · Serviços           16 · Rodapé
   03 · Camadas persistentes 10 · Estratégia         17 · Cookies
   04 · Entrada (os olhos)   11 · Processo           18 · Responsivo
   05 · Navegação            12 · Resultados/Momento 19 · Movimento reduzido
   06 · Hero                 13 · Sobre/Honestidade  20 · Páginas legais
   07 · Fita e clientes      14 · Avançar
   ========================================================================== */

/* ═══════════════════ 01 · FUNDAÇÕES ═══════════════════ */

:root {
  --noite:      #050416;
  --fundo:      #0C0A2B;   /* um grau mais escuro do que a primeira versão */
  --fundo-alto: #120F35;
  --azul-esc:   #002564;
  --roxo-esc:   #320B51;
  --azul:       #B1E5FC;
  --roxo:       #B650DF;
  --roxo-legivel: #C77BE8;
  --escuro:     #0B0722;          /* tinta dos botões cheios */

  --tinta:   #E4E1F5;                  /* 14,4:1 — o branco puro cansa a vista */
  --tinta-2: rgba(228,225,245,.72);    /*  7,8:1 */
  --tinta-3: rgba(228,225,245,.62);    /*  6,0:1 */
  --linha:   rgba(228,225,245,.13);
  --linha-2: rgba(228,225,245,.065);
  --vidro:   rgba(255,255,255,.04);

  --grad:      linear-gradient(100deg, var(--azul) 0%, var(--roxo) 100%);
  --grad-inv:  linear-gradient(100deg, var(--roxo) 0%, var(--azul) 100%);
  --grad-prof: linear-gradient(150deg, var(--azul-esc) 0%, var(--roxo-esc) 100%);

  --fonte-t: "Syne", "Segoe UI", system-ui, sans-serif;
  --fonte-c: "Inter", system-ui, -apple-system, sans-serif;

  /* Escala contida de propósito. A primeira versão era um terço maior e o
     Tiago disse que cansava a vista: com o Syne, tamanho a mais lê-se como
     grito. O impacto passa a vir do espaço e do ritmo, não do corpo.      */
  --t-display: clamp(2.5rem, 7.6vw, 6.5rem);
  --t-h2-g:    clamp(1.9rem, 5vw, 4.125rem);
  --t-h2:      clamp(1.5rem, 3.6vw, 3rem);
  --t-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --t-lede:    clamp(1rem, 1.35vw, 1.1875rem);
  --t-corpo:   clamp(1rem, 1.05vw, 1.0625rem);
  --t-peq:     .8125rem;
  --t-rot:     .75rem;

  --e1: .5rem;  --e2: 1rem;   --e3: 1.5rem; --e4: 2rem;
  --e5: 3rem;   --e6: 4rem;   --e7: 6rem;   --e8: 8rem;
  --seccao: clamp(4.5rem, 9vw, 9.5rem);

  --raio:   12px;
  --raio-g: 26px;
  --larg:   1380px;
  --goteira: clamp(1.25rem, 5vw, 4.5rem);

  --rapido: .18s;
  --medio:  .3s;
  --lento:  .55s;
  --saida:  cubic-bezier(.22,1,.36,1);
  --suave:  cubic-bezier(.4,0,.2,1);

  --z-ambiente: 0;
  --z-conteudo: 1;
  --z-indice:   50;
  --z-menu:     70;
  --z-topo:     75;   /* acima do menu: o botão de fechar tem de continuar a dar */
  --z-cookies:  85;
  --z-ficha:    88;
  --z-cursor:   90;
  --z-intro:    100;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html:not(.js) { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.6 var(--fonte-c);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.trancado { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-t);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button, a, label, summary { cursor: pointer; }

::selection { background: var(--roxo); color: var(--escuro); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--noite); }
::-webkit-scrollbar-thumb { background: rgba(228,225,245,.16); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(228,225,245,.28); }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════ 02 · COMPONENTES ═══════════════════ */

.caixa {
  width: min(var(--larg), 100%);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

.sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salto {
  position: fixed; top: -100px; left: var(--e2); z-index: 200;
  padding: .75rem 1.25rem; border-radius: var(--raio);
  background: var(--azul); color: var(--fundo);
  font-weight: 600;
  transition: top var(--medio) var(--saida);
}
.salto:focus { top: var(--e2); }

/* rótulos: a voz pequena da marca, sempre em maiúsculas com tracking */
.rot {
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.rot--cap {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.rot--cap i {
  font-style: normal; font-weight: 600;
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
.rot--cap::after {
  content: ""; flex: 1; height: 1px; max-width: 120px;
  background: linear-gradient(90deg, var(--linha), transparent);
}
.hero__rot i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--roxo);
}

/* botões */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .625rem;
  min-height: 52px;
  padding: .875rem 1.75rem;
  border-radius: 999px;
  font: 600 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden;
  transition: transform var(--medio) var(--saida), color var(--medio),
              border-color var(--medio), background-color var(--medio);
}
.btn > * { position: relative; z-index: 1; }
.btn svg { flex: none; transition: transform var(--medio) var(--saida); }
.btn:hover svg { transform: translateX(4px); }

.btn--cheio { background: var(--roxo); color: var(--escuro); }
.btn--cheio::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-inv);
  transform: translateY(101%);
  transition: transform var(--lento) var(--saida);
}
.btn--cheio:hover::before { transform: translateY(0); }

.btn--nu {
  border: 1px solid var(--linha);
  color: var(--tinta);
}
.btn--nu:hover { border-color: var(--roxo); background: rgba(182,80,223,.14); }

.btn--peq { min-height: 44px; padding: .625rem 1.125rem; }

.btn--gigante {
  min-height: clamp(66px, 8vw, 92px);
  padding: 1rem clamp(2rem, 4vw, 3.25rem);
  font-size: clamp(.875rem, 1.4vw, 1.0625rem);
  letter-spacing: .06em;
  background: var(--azul); color: var(--fundo);
}
.btn--gigante::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-inv);
  transform: scale(0); transform-origin: center;
  border-radius: 999px;
  transition: transform .6s var(--saida);
}
.btn--gigante:hover { color: var(--escuro); }
.btn--gigante:hover::before { transform: scale(1.6); }

/* revelação de texto: cada linha entra por baixo da sua própria máscara */
/* revelação de texto: a linha sobe de dentro da sua própria máscara.
   A folga em baixo existe para as descidas (p, g, ç) não serem cortadas. */
.rev {
  display: inline-block; vertical-align: bottom;
  max-width: 100%;              /* em grelha o item cresceria até max-content */
  padding-bottom: .14em; margin-bottom: -.14em;
}
.js .rev { clip-path: inset(0 0 105% 0); }

/* blocos que sobem quando entram no ecrã */
.js [data-surge] { opacity: 0; transform: translateY(28px); }


/* ── TIPOGRAFIA DE DECLARAÇÃO ────────────────────────────────────────────
   O Syne é uma fonte larga: "CONSTRUÍMOS" em maiúsculas ocupa 12,6 em. Com
   um tamanho fixo, a palavra estoira a caixa em ecrãs médios e o browser
   corta-a sem avisar. Por isso cada título grande declara a largura da sua
   linha mais comprida (--maior, medida na própria fonte) e o tamanho passa a
   ser o menor entre o desejado e o que a caixa comporta.
   Se o texto mudar, medir de novo — não estimar.                          */

.caixa, .hero, .proc__palco, .menu__lista, .servicos__lista,
.obras, .ficha__rolo { container-type: inline-size; }

.hero__titulo, .clientes__t, .cliente span, .manifesto__t, .trab__t,
.obra__nome, .serv__nome, .servicos__t, .proc__pal,
.sobre__t, .honesto__t, .honesto__p, .testemunhos__t, .avancar__t,
.menu__lista a {
  font-size: min(var(--disp), calc(100cqi / var(--maior)));
}

.hero__titulo    { --disp: var(--t-display); --maior: 3.95; }  /* CAIXA ALTA */
.clientes__t     { --disp: var(--t-h2);      --maior: 9.3; }
.cliente span    { --disp: clamp(1.35rem, 3vw, 2.5rem);   --maior: 6.4; }
.manifesto__t    { --disp: var(--t-h2-g);    --maior: 6.1; }
.trab__t         { --disp: var(--t-h2);      --maior: 7.1; }
.obra__nome      { --disp: clamp(1.375rem, 3.2vw, 2.375rem); --maior: 11.0; }
.servicos__t     { --disp: var(--t-h2);      --maior: 7.1; }
.serv__nome      { --disp: clamp(1.375rem, 3.2vw, 2.375rem); --maior: 5.0; }
.proc__pal       { --disp: clamp(2.25rem, 7.5vw, 7rem);   --maior: 5.0; }
.sobre__t        { --disp: var(--t-h2);      --maior: 8.2; }
.honesto__t      { --disp: var(--t-h2-g);    --maior: 7.15; }
.honesto__p      { --disp: var(--t-h2-g);    --maior: 11.1; }
.testemunhos__t  { --disp: var(--t-h2);      --maior: 9.6; }
.avancar__t      { --disp: var(--t-h2-g);    --maior: 7.8; }   /* CAIXA ALTA */
.menu__lista a   { --disp: min(clamp(1.5rem, 4vw, 3.25rem), 7.5vh); --maior: 4.8; }

/* ═══════════════════ 03 · CAMADAS PERSISTENTES ═══════════════════ */

.ambiente {
  position: fixed; inset: 0; z-index: var(--z-ambiente);
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(130% 85% at 50% -12%, rgba(0,37,100,.5) 0%, transparent 62%),
    radial-gradient(110% 75% at 50% 112%, rgba(50,11,81,.48) 0%, transparent 60%);
}
.ambiente__luz {
  position: absolute;
  width: 66vmax; height: 66vmax;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .26;
  will-change: transform;
}
.ambiente__luz--a {
  top: -20vmax; left: -14vmax;
  background: radial-gradient(circle, var(--azul-esc) 0%, transparent 68%);
}
.ambiente__luz--b {
  bottom: -24vmax; right: -16vmax;
  background: radial-gradient(circle, var(--roxo-esc) 0%, transparent 68%);
}
/* grelha técnica: seis fios verticais que dão medida ao ecrã. Quase não se
   veem, mas é isso que faz a página parecer desenhada e não desenhada por
   acaso — e o traço acompanha o scroll um bocadinho. */
.ambiente__grelha {
  position: absolute; inset: -2vh 0;
  /* seis colunas — a medida vem de 100vw, não do tamanho do azulejo, senão
     o gradiente repete-se dentro de cada coluna e a grelha fecha */
  background-image: repeating-linear-gradient(90deg,
    rgba(228,225,245,.05) 0 1px, transparent 1px calc(100vw / 6));
}
.ambiente__grelha::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,229,252,.35), transparent);
  transform: translateY(calc(var(--varre, 0) * 100vh));
}
.ambiente__grao {
  position: absolute; inset: -50%;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — cursor ————————————————————————————————————————————— */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .cursor {
    display: block;
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
    pointer-events: none;
    will-change: transform;
  }
  .cursor__ponto {
    position: absolute; top: -3px; left: -3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--azul);
    transition: opacity var(--medio), transform var(--medio) var(--saida);
  }
  .cursor__aro {
    position: absolute; top: -21px; left: -21px;
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 999px;
    border: 1px solid rgba(177,229,252,.4);
    /* o esticão vem do JavaScript, pela velocidade do rato */
    transform: rotate(var(--ang, 0deg)) scale(var(--ex, 1), var(--ey, 1));
    transition: width var(--medio) var(--saida), height var(--medio) var(--saida),
                top var(--medio) var(--saida), left var(--medio) var(--saida),
                border-color var(--medio), background-color var(--medio);
  }
  .cursor__nota { transform: rotate(calc(var(--ang, 0deg) * -1)); }
  .cursor__nota {
    font: 600 10px/1 var(--fonte-c);
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--escuro);
    opacity: 0; white-space: nowrap;
    transition: opacity var(--rapido);
  }
  .cursor.activo .cursor__aro {
    width: 68px; height: 68px; top: -34px; left: -34px;
    border-color: transparent; background: var(--azul);
  }
  .cursor.activo .cursor__ponto { opacity: 0; }
  .cursor.rotulo .cursor__aro { width: 84px; height: 84px; top: -42px; left: -42px; }
  .cursor.rotulo .cursor__nota { opacity: 1; }
  body:has(.intro:not([hidden])) .cursor,
  body.menu-aberto .cursor { opacity: 0; }
}

/* — barra de progresso ———————————————————————————————— */
.progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: var(--z-topo);
  background: var(--linha-2);
  pointer-events: none;
}
.progresso__luz {
  display: block; height: 100%; width: 100%;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}

/* — índice de capítulos: a viagem vista de lado ————————————— */
.indice { display: none; }
/* só com rato: os alvos do índice são pequenos de propósito */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .js .indice {
    display: block;
    position: fixed; top: 50%; right: clamp(1rem, 2.2vw, 2.25rem);
    transform: translateY(-50%);
    z-index: var(--z-indice);
    opacity: 0; visibility: hidden;
    transition: opacity var(--lento), visibility var(--lento);
  }
  .indice.mostra { opacity: 1; visibility: visible; }
  .indice ol { display: grid; gap: .125rem; }
  .indice a {
    display: flex; align-items: center; justify-content: flex-end; gap: .625rem;
    min-height: 30px; padding: .25rem 0;
    font: 500 11px/1 var(--fonte-c);
    letter-spacing: .14em;
    color: var(--tinta-3);
    transition: color var(--medio);
  }
  .indice i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    opacity: .55;
    transition: opacity var(--medio);
  }
  .indice span {
    text-transform: uppercase;
    max-width: 0; overflow: hidden; white-space: nowrap;
    opacity: 0;
    transition: max-width var(--lento) var(--saida), opacity var(--medio);
  }
  .indice a::after {
    content: ""; width: 14px; height: 1px; background: currentColor; opacity: .4;
    transition: width var(--medio) var(--saida), opacity var(--medio);
  }
  .indice a:hover,
  .indice li.actual a { color: var(--tinta); }
  .indice a:hover i,
  .indice li.actual a i { opacity: 1; }
  .indice a:hover span,
  .indice li.actual a span { max-width: 120px; opacity: 1; }
  .indice li.actual a::after { width: 28px; opacity: 1; background: var(--roxo); }
}
/* ═══════════════════ 04 · ENTRADA — OS OLHOS DO LOBO ═══════════════════
   Copiada tal e qual do site anterior, a pedido: pálpebras a sério dentro da
   máscara de cada olho, e o wordmark oficial a entrar letra a letra. As
   medidas vêm da própria arte — assets/logo/coordenadas.txt. Se a arte mudar,
   correr preparar-lobo.py e trazer os valores novos para aqui.            */

.intro {
  position: fixed; inset: 0; z-index: var(--z-intro);
  display: grid; place-items: center;
  background: var(--noite);
  overflow: hidden;
  --ritmo: 1;                 /* 1 = primeira visita · 0,4 = visita repetida */
}
.intro[hidden] { display: none; }

.intro__luz {
  position: absolute; top: 50%; left: 50%;
  width: 120vmax; height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(182,80,223,.30) 0%, rgba(0,37,100,.22) 34%, transparent 62%);
  opacity: 0; transform: scale(.28);
  animation: introLuz calc(3s * var(--ritmo)) var(--saida)
             calc(.5s * var(--ritmo)) forwards;
}
@keyframes introLuz { to { opacity: 1; transform: scale(1); } }

.intro__lobo {
  position: relative;
  width: min(1180px, 96vw);
  --zoom: 1;                         /* em ecrãs estreitos a arte cresce sem sair do sítio */
  transform: translateY(-3%) scale(calc(var(--zoom) * .965));
  opacity: 0;
  /* a arte tem de estar toda presente antes de os olhos começarem a abrir;
     a aproximação continua devagar por baixo disso */
  animation:
    loboAparece   calc(1.4s * var(--ritmo)) var(--saida) forwards,
    loboAproxima  calc(4.2s * var(--ritmo)) cubic-bezier(.33,0,.2,1) forwards;
}
@keyframes loboAparece  { to { opacity: 1; } }
@keyframes loboAproxima { to { transform: translateY(-3%) scale(var(--zoom)); } }
.lobo__arte { width: 100%; height: auto; }

/* ── PÁLPEBRAS ──────────────────────────────────────────────────────────
   Cada olho tem a máscara da sua abertura, recortada da própria arte. Lá
   dentro há dois blocos que se encontram na dobra: um sai por cima, outro por
   baixo. É uma pálpebra a levantar, não um véu a desvanecer — e a máscara
   impede que qualquer um deles pise a pelagem.
   Medidas em assets/logo/coordenadas.txt.                                  */

.olho {
  position: absolute; inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.olho--e {
  --cx: 26.51%; --cy: 65.18%; --ang: 32.3deg; --lid: #170A27;
  --sobe: 18.9%; --desce: 15.8%;
  -webkit-mask-image: url("../assets/logo/lobo-olho-e.png");
          mask-image: url("../assets/logo/lobo-olho-e.png");
}
.olho--d {
  --cx: 73.12%; --cy: 64.58%; --ang: -32.6deg; --lid: #151523;
  --sobe: 19.7%; --desce: 18.6%;
  -webkit-mask-image: url("../assets/logo/lobo-olho-d.png");
          mask-image: url("../assets/logo/lobo-olho-d.png");
}
.olho__par {
  position: absolute; left: var(--cx); top: var(--cy);
  width: 56%; height: 56%;
  transform: translate(-50%, -50%) rotate(var(--ang));
}
.olho__cima, .olho__baixo {
  position: absolute; left: 0; right: 0;
  background: var(--lid);
  will-change: transform;
}
.olho__cima  { top: 0;   bottom: 50%; }
.olho__baixo { top: 50%; bottom: 0; }

/* a pálpebra de cima faz o percurso todo e demora; a de baixo assenta cedo,
   como num olho verdadeiro */
.intro .olho__cima {
  animation: palpebraCima calc(2.2s * var(--ritmo)) cubic-bezier(.4,0,.15,1)
             calc(1.6s * var(--ritmo)) both;
}
.intro .olho__baixo {
  animation: palpebraBaixo calc(1.4s * var(--ritmo)) cubic-bezier(.4,0,.15,1)
             calc(1.6s * var(--ritmo)) both;
}
/* o curso é medido na própria arte (ver coordenadas.txt): só o suficiente
   para a pálpebra sair da abertura, para o movimento durar o tempo todo */
@keyframes palpebraCima  { from { transform: translateY(0); }
                           to   { transform: translateY(calc(-1 * var(--sobe))); } }
@keyframes palpebraBaixo { from { transform: translateY(0); }
                           to   { transform: translateY(var(--desce)); } }

/* fio de luz na dobra: só se vê com o olho fechado */
.fenda {
  position: absolute;
  left: var(--cx); top: var(--cy);
  height: 2px; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(var(--ang));
  opacity: 0;
  animation:
    fendaAcende calc(1s * var(--ritmo))  var(--saida) calc(.35s * var(--ritmo)) forwards,
    fendaApaga  calc(.7s * var(--ritmo)) var(--suave) calc(1.85s * var(--ritmo)) forwards;
}
.fenda--e {
  --cx: 26.51%; --cy: 65.18%; --ang: 32.3deg; width: 11%;
  background: linear-gradient(90deg, transparent, var(--roxo), transparent);
  box-shadow: 0 0 14px 2px rgba(182,80,223,.5);
}
.fenda--d {
  --cx: 73.12%; --cy: 64.58%; --ang: -32.6deg; width: 11%;
  background: linear-gradient(90deg, transparent, var(--azul), transparent);
  box-shadow: 0 0 14px 2px rgba(177,229,252,.45);
}
@keyframes fendaAcende { from { opacity: 0; } to { opacity: .9; } }
@keyframes fendaApaga  { to { opacity: 0; } }

.intro__marca {
  position: absolute; left: 50%; bottom: clamp(9%, 14vh, 18%);
  transform: translateX(-50%);
  margin: 0; text-align: center;
  display: grid; gap: .9rem; justify-items: center;
}
.intro__nome {
  position: relative;
  width: min(62vw, 540px);
  aspect-ratio: 860 / 108;          /* as medidas do wordmark oficial */
}
.intro__nome i {
  position: absolute; top: 0; height: 100%;
  opacity: 0; transform: translateY(.5em);
  animation: letra calc(.9s * var(--ritmo)) var(--saida) both;
}
.intro__nome i img { height: 100%; width: 100%; object-fit: contain; display: block; }
.intro__nome i:nth-child(1) { left: 0.233%; width: 15.349%; animation-delay: calc(3.10s * var(--ritmo)); }
.intro__nome i:nth-child(2) { left: 17.674%; width: 15.465%; animation-delay: calc(3.16s * var(--ritmo)); }
.intro__nome i:nth-child(3) { left: 36.047%; width: 15.349%; animation-delay: calc(3.22s * var(--ritmo)); }
.intro__nome i:nth-child(4) { left: 57.674%; width: 12.558%; animation-delay: calc(3.28s * var(--ritmo)); }
.intro__nome i:nth-child(5) { left: 76.512%; width: 15.000%; animation-delay: calc(3.34s * var(--ritmo)); }
.intro__nome i:nth-child(6) { left: 97.209%; width: 2.558%; animation-delay: calc(3.40s * var(--ritmo)); }
@keyframes letra { to { opacity: 1; transform: translateY(0); } }

.intro__desc {
  font: 500 var(--t-rot)/1 var(--fonte-t);
  letter-spacing: .34em; text-transform: uppercase; text-indent: .34em;
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  opacity: 0;
  animation: surgir calc(1s * var(--ritmo)) var(--saida) calc(3.70s * var(--ritmo)) forwards;
}
@keyframes surgir { from { opacity: 0; transform: translateY(10px); }
                    to   { opacity: 1; transform: translateY(0); } }

.intro__saltar {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem);
  min-height: 44px; padding: .75rem 1.375rem;
  border: 1px solid var(--linha); border-radius: 999px;
  font: 500 var(--t-peq)/1 var(--fonte-t);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-2);
  opacity: 0;
  animation: surgir calc(.6s * var(--ritmo)) var(--saida) calc(1.1s * var(--ritmo)) forwards;
  transition: color var(--medio), border-color var(--medio), background-color var(--medio);
}
.intro__saltar:hover { color: var(--tinta); border-color: var(--roxo); background: rgba(182,80,223,.12); }

/* saída: mergulha-se pela luz do olhar para dentro do site */
.intro--sai {
  animation: introSai .95s var(--saida) forwards;
  pointer-events: none;
}
.intro--sai .intro__lobo {
  animation: loboMergulha 1s cubic-bezier(.7,0,.84,0) forwards;
}
.intro--sai .intro__luz {
  animation: luzInunda .95s cubic-bezier(.7,0,.84,0) forwards;
}
.intro--sai .intro__marca,
.intro--sai .intro__saltar {
  animation: apaga .3s var(--suave) forwards;
}
@keyframes introSai     { 0%,55% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes loboMergulha { to { transform: translateY(-3%) scale(calc(var(--zoom) * 7)); opacity: 0; } }
@keyframes luzInunda    { to { transform: scale(2.4); opacity: 0; } }
@keyframes apaga        { to { opacity: 0; } }

/* o hero assenta enquanto a entrada desaparece */
.js body.a-entrar .hero__rot,
.js body.a-entrar .hero__titulo,
.js body.a-entrar .hero__assinatura,
.js body.a-entrar .hero__pe { opacity: 0; }

/* ═══════════════════ 05 · NAVEGAÇÃO ═══════════════════ */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-topo);
  display: flex; align-items: center; gap: var(--e3);
  padding: clamp(1rem, 2vw, 1.5rem) var(--goteira);
  transition: background-color var(--lento), backdrop-filter var(--lento),
              border-color var(--lento), padding var(--lento);
  border-bottom: 1px solid transparent;
}
.nav.assente {
  background: rgba(8,6,26,.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--linha-2);
  padding-block: .75rem;
}
.nav.esconde { transform: translateY(-100%); }
.nav { transition: transform var(--lento) var(--saida), background-color var(--lento),
                   backdrop-filter var(--lento), border-color var(--lento), padding var(--lento); }

.nav__marca {
  display: flex; align-items: center; gap: .6rem;
  margin-right: auto;
  min-height: 44px;
}
.nav__lobo {
  width: clamp(38px, 4vw, 50px); height: auto;
  filter: drop-shadow(0 0 16px rgba(182,80,223,.35));
  transition: transform var(--lento) var(--saida);
}
.nav__marca:hover .nav__lobo { transform: scale(1.08); }
.nav__nome { width: clamp(92px, 9vw, 122px); height: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav__links a {
  position: relative;
  display: block; overflow: hidden;
  padding: .5rem 0;
  min-height: 44px; display: flex; align-items: center;
  font: 500 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: color var(--medio);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .35rem;
  height: 1px; background: var(--grad);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--medio) var(--saida);
}
.nav__links a:hover { color: var(--tinta); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* o MENU existe em todas as larguras: no desktop é o atalho para a lista
   inteira, no telemóvel é a única navegação */
.nav__menu {
  display: flex; align-items: center; gap: .625rem;
  min-height: 44px; padding: .5rem .375rem .5rem .75rem;
  font: 600 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: color var(--medio);
}
.nav__menu:hover { color: var(--tinta); }
.nav__menu-tra {
  display: grid; gap: 5px;
  width: 26px; padding: 8px 0;
}
.nav__menu-tra i {
  display: block; height: 1.5px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--medio) var(--saida), width var(--medio) var(--saida);
}
.nav__menu[aria-expanded="true"] .nav__menu-tra i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-tra i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
.nav__menu:hover .nav__menu-tra i:last-child { width: 60%; }
.nav__menu[aria-expanded="true"]:hover .nav__menu-tra i:last-child { width: 100%; }

/* — menu inteiro no ecrã ————————————————————————————— */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid; align-content: center;
  padding: 6rem var(--goteira) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
/* por omissão o fundo está aberto: se o GSAP não carregar, o menu continua
   a funcionar. É o GSAP que o fecha antes de o abrir com animação. */
.menu__fundo {
  position: absolute; inset: 0;
  background: var(--noite);
}
.menu__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 80% 10%, rgba(50,11,81,.7), transparent 65%),
              radial-gradient(70% 60% at 10% 90%, rgba(0,37,100,.6), transparent 65%);
}
.menu__lista {
  position: relative;
  width: min(var(--larg), 100%); margin-inline: auto;
  display: grid;
}
.menu__lista a {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(.5rem, 1.4vw, 1rem) 0;
  border-bottom: 1px solid var(--linha-2);
  font-family: var(--fonte-t); font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tinta);
  transition: color var(--medio), padding-left var(--lento) var(--saida);
}
.menu__lista a i {
  font: 500 var(--t-rot)/1 var(--fonte-c);
  font-style: normal; letter-spacing: .18em;
  color: var(--tinta-3);
  transition: color var(--medio);
}
.menu__lista a:hover { padding-left: clamp(.75rem, 2vw, 2rem); }
.menu__lista a:hover span {
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
.menu__lista a:hover i { color: var(--roxo-legivel); }
.menu__pe {
  position: relative;
  width: min(var(--larg), 100%); margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  font-size: var(--t-peq); color: var(--tinta-3);
}
.menu__pe a { color: var(--azul); }
body.menu-aberto { overflow: hidden; }
body.menu-aberto .nav__links { opacity: 0; pointer-events: none; }
.nav__links { transition: opacity var(--medio); }

/* ═══════════════════ 06 · HERO ═══════════════════ */

.hero {
  position: relative; z-index: var(--z-conteudo);
  min-height: 100svh;
  isolation: isolate;          /* as camadas decorativas vão para z-index -1 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* sem isto a coluna cresce com o
                                              texto gigante e o hero transborda */
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(.75rem, 1.8vw, 1.5rem);
  padding: clamp(6rem, 12vh, 8rem) var(--goteira) clamp(1.5rem, 3.5vh, 2.5rem);
  overflow: hidden;
}

.hero__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__halo {
  position: absolute; top: 42%; left: 62%;
  width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,80,223,.24) 0%, rgba(0,37,100,.16) 38%, transparent 66%);
}
/* o lobo aqui é um fio: o contorno da própria arte, cheio com o gradiente */
/* a cara do logótipo, a sangrar pela direita e esbatida na margem para se
   fundir com o fundo em vez de ficar colada por cima dele */
.hero__lobo {
  position: absolute; top: 46%; right: -18%;
  width: min(1080px, 88vw);
  transform: translateY(-50%);
  opacity: .5;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 42%, transparent 78%);
          mask-image: radial-gradient(72% 72% at 50% 50%, #000 42%, transparent 78%);
  will-change: transform;
}
.hero__lobo img { width: 100%; height: auto; }

.hero__rot { display: flex; align-items: center; gap: .875rem; }
.hero__rot i { display: block; }

.hero__titulo {
  align-self: center;
  margin: 0;
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.hero__linha { display: block; overflow: hidden; padding-bottom: .04em; }
/* O estado escondido do título NÃO vive aqui. Se vivesse, bastava o GSAP
   falhar (CDN em baixo, por exemplo) para o título nunca aparecer. Quem o
   esconde é o próprio GSAP, no momento em que o vai animar — se ele não
   correr, o título está simplesmente visível. */
.hero__pal { display: block; }
/* a última linha leva o gradiente — as três ficam encostadas à esquerda */
.hero__linha:last-of-type .hero__pal {
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}

/* a palavra AVANTI atravessa o hero como elemento gráfico, não como texto */
/* A palavra AVANTI atravessa o hero de lado a lado. São dois rolos iguais e a
   fita anda meia largura: a emenda nunca se vê. A luz que passa por cima é o
   que a impede de parecer um GIF. */
.hero__assinatura {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.hero__fita {
  display: flex; width: max-content;
  will-change: transform;
  animation: fitaMarca 42s linear infinite;
}
.hero__rolo {
  display: flex; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
}
.hero__rolo img { width: clamp(190px, 22vw, 360px); height: auto; opacity: .22; }
.hero__rolo i {
  font-style: normal; font-size: clamp(.5rem, .9vw, .75rem);
  color: var(--roxo); opacity: .5;
}
@keyframes fitaMarca { to { transform: translateX(-50%); } }

.hero__assinatura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(177,229,252,.22) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: fitaLuz 7s var(--suave) infinite;
  pointer-events: none;
}
@keyframes fitaLuz { 0% { transform: translateX(-60%); } 55%,100% { transform: translateX(160%); } }

.hero__pe {
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding-top: clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid var(--linha-2);
}
.hero__tri { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; text-align: right; }
.hero__tri span { color: var(--tinta-3); }


/* ═══════════════════ 07 · CLIENTES ═══════════════════ */

.clientes {
  position: relative; z-index: var(--z-conteudo);
  padding-block: var(--seccao);
}
.clientes__t { margin-bottom: clamp(2rem, 4vw, 3rem); }
.clientes__nota { margin-top: var(--e3); }
.clientes__nota b { color: var(--roxo-legivel); font-weight: 500; }

/* Colunas que trocam de nome em tempos desencontrados. Sem JavaScript é uma
   linha com os quatro nomes — o mesmo conteúdo, sem o movimento.          */
.carrossel { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.carrossel__lista {
  display: flex; flex-wrap: wrap;
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.js .carrossel.montado .carrossel__lista { display: none; }

/* colunas juntas e do mesmo tamanho, sem caixa à volta: os logótipos ficam a
   flutuar, como numa parede de marcas */
.carrossel__colunas { display: none; }
.js .carrossel.montado .carrossel__colunas {
  display: flex; flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.75rem);
}
.coluna {
  container-type: inline-size;
  position: relative;
  width: clamp(140px, 19vw, 260px);
  height: clamp(88px, 10.5vw, 136px);   /* dá altura a logótipos quadrados */
  overflow: hidden;
}
.coluna__item {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0;
  font-family: var(--fonte-t); font-weight: 700;
  font-size: min(clamp(.95rem, 1.9vw, 1.5rem), calc(100cqi / 8));
  line-height: 1.1; letter-spacing: -.02em;
  text-align: center; text-wrap: balance;
  color: var(--tinta);
}
/* O logótipo manda; o nome só aparece se o ficheiro não existir. Convém que
   os PNG venham com fundo transparente — um logótipo com fundo branco vai
   mostrar o quadrado branco. */
/* O logótipo entra como imagem de fundo da célula, não como <img>.
   Com um <img>, o tamanho intrínseco da imagem entra na conta e um logótipo
   quadrado transbordava a célula — a largura mandava e a altura acompanhava
   pela proporção. Em fundo, a caixa é a célula e o `contain` encaixa lá
   dentro, seja o logótipo largo ou quadrado. O nome fica num .sr, para quem
   lê por leitor de ecrã. */
.coluna__item.com-logo {
  padding: 14px 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-origin: content-box;
}
.cliente span img { max-height: 2.5em; max-width: 100%; width: auto; object-fit: contain; }

/* a versão sem movimento: os nomes como etiquetas grandes */
.cliente span {
  display: block;
  padding: clamp(.75rem, 2vw, 1.125rem) clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio);
  background: var(--vidro);
  font-family: var(--fonte-t); font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  color: var(--tinta-2);
  transition: color var(--medio), border-color var(--medio);
}
.cliente span:hover { color: var(--tinta); border-color: rgba(182,80,223,.5); }

/* ═══════════════════ MANIFESTO ═══════════════════ */

.manifesto {
  position: relative; z-index: var(--z-conteudo);
  padding-block: var(--seccao);
  overflow: hidden;
  isolation: isolate;
}
/* Aqui o lobo aparece em linha — e desenha-se com o scroll. As linhas são
   traçadas do contorno da própria arte (assets/logo/tracar-lobo.py), não
   desenhadas à mão. Cada uma leva pathLength="1", por isso o traço avança ao
   mesmo ritmo em todas, independentemente do comprimento real.
   Sem JavaScript aparecem já desenhadas: o dasharray só é posto pelo JS.   */
.manifesto__linhas {
  position: absolute; top: 50%; left: 50%;
  width: min(1500px, 130vw); height: auto;
  transform: translate(-50%, -50%);
  opacity: .32;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.manifesto__linhas .fio { vector-effect: non-scaling-stroke; }
.manifesto__t {
  display: grid; justify-items: start;
  line-height: 1.02;
}
.manifesto__t em {
  font-style: normal;
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
.manifesto__p {
  max-width: 30rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  margin-left: auto;
  font-size: var(--t-lede);
  color: var(--tinta-2);
  text-wrap: pretty;
}

/* ═══════════════════ 08 · TRABALHOS ═══════════════════
   Lista grande, como uma pauta: o cursor percorre os nomes, a imagem troca com
   ele e os outros nomes esmorecem. Clicar abre a ficha do projeto por cima da
   página. Sem JavaScript a lista continua a ser uma lista e as fichas ficam
   logo a seguir, todas visíveis.                                            */

.trabalhos {
  position: relative; z-index: var(--z-conteudo);
  padding-block: var(--seccao);
  overflow-x: clip;          /* o halo da pilha não empurra a página de lado */
}
/* .percorre é o contrato com o js/main.js: só ela prende o palco e alonga a
   secção, e é o JavaScript que a põe quando monta o percurso. Sem ela — ecrã
   baixo, movimento reduzido, GSAP em baixo — fica tudo em fluxo normal. */
.trabalhos.percorre { padding-block: 0; height: 340vh; }
.trabalhos.percorre .trab__palco {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow: hidden;
}
.trabalhos.percorre .pilha { max-width: min(430px, 42vh); }
.trabalhos.percorre .trab__grelha { margin-top: clamp(1rem, 2.5vw, 2rem); }
.trab__mais { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.trab__mais .btn[aria-disabled="true"] {
  color: var(--tinta-3); border-color: var(--linha-2); cursor: default;
}
.trab__mais .btn[aria-disabled="true"]:hover { background: none; border-color: var(--linha-2); }
.trab__sub {
  margin-top: var(--e3);
  max-width: 34rem;
  font-size: var(--t-lede); color: var(--tinta-2);
}
.trab__dica { display: none; }
.trab__aviso { margin-top: var(--e3); }
.trab__aviso b { color: var(--roxo-legivel); font-weight: 500; }

.trab__grelha {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .trab__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
}
.obras { border-top: 1px solid var(--linha-2); }
.obra { position: relative; border-bottom: 1px solid var(--linha-2); }
.obra::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(182,80,223,.13), rgba(0,37,100,.08) 55%, transparent);
  opacity: 0;
  transition: opacity var(--medio);
}
.obra__abre {
  position: relative; z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(.875rem, 2vw, 2rem);
  padding: clamp(1.125rem, 2.4vw, 1.875rem) 0;
  text-align: left;
  transition: padding-left var(--lento) var(--saida);
}
.obra__num {
  font: 500 var(--t-rot)/1 var(--fonte-c);
  font-style: normal; letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  transition: color var(--medio);
}
.obra__nome {
  font-family: var(--fonte-t); font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  color: var(--tinta);
  transition: color var(--medio);
}
.obra__cat { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
.obra__cat i {
  font-style: normal;
  padding: .3125rem .625rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
  transition: color var(--medio), border-color var(--medio);
}
.obra__seta {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--tinta-3);
  opacity: .4; transform: translate(-6px, 6px);
  transition: opacity var(--medio), transform var(--medio) var(--saida), color var(--medio);
}

.obra.actual::before, .obra:hover::before, .obra:focus-within::before { opacity: 1; }
.obra.actual .obra__abre, .obra:hover .obra__abre, .obra:focus-within .obra__abre { padding-left: clamp(.625rem, 1.6vw, 1.5rem); }
.obra.actual .obra__num, .obra:hover .obra__num, .obra:focus-within .obra__num { color: var(--roxo-legivel); }
.obra.actual .obra__cat i, .obra:hover .obra__cat i, .obra:focus-within .obra__cat i { color: var(--tinta-2); border-color: rgba(182,80,223,.5); }
.obra.actual .obra__seta, .obra:hover .obra__seta, .obra:focus-within .obra__seta { opacity: 1; transform: translate(0,0); color: var(--azul); }

/* Os que não estão activos recuam — é isso que dá foco a um de cada vez.
   Recua só o NOME, e até 55%: a 34% dava 2,6:1 e chumbava, e as etiquetas
   pequenas, que já vivem a 62% de tinta, ficavam em 1,9:1. O nome é grande,
   é ele que carrega o efeito; o resto fica legível. */
.obra__nome, .obra__num, .obra__cat { transition: opacity var(--medio), color var(--medio); }
.js .obras.viva .obra:not(.actual) .obra__nome { opacity: .55; }

/* em ecrã estreito o nome fica sozinho na linha e as etiquetas por baixo */
@media (max-width: 720px) {
  .obra__abre {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: .5rem;
  }
  .obra__num  { grid-column: 1; grid-row: 1; }
  .obra__nome { grid-column: 2; grid-row: 1; }
  .obra__seta { grid-column: 3; grid-row: 1; }
  .obra__cat  { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
}

/* ── A PILHA ──────────────────────────────────────────────────────────────
   A imagem do projeto aparece por dentro de um recorte que se monta peça a
   peça, respira e desmonta-se — e cada projeto tem o seu recorte. É isso que
   faz a troca parecer uma transformação e não uma substituição.
   Sequência e tempos em js/main.js, secção 9.                             */

.trab__pilha {
  position: relative;
  display: grid; place-items: center;
  isolation: isolate;
}
.pilha__halo {
  position: absolute; z-index: -1;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,80,223,.2), rgba(0,37,100,.14) 45%, transparent 68%);
  filter: blur(50px);
}
.pilha {
  width: 100%; max-width: 460px; height: auto;
  transition: max-width var(--lento) var(--saida);
  filter: drop-shadow(0 28px 70px rgba(5,4,22,.55));
}
.pilha__nota { position: absolute; left: 0; bottom: -1.75rem; color: var(--tinta-3); }
.pilha__nota b { font-weight: 500; }

@media (max-width: 899px) {
  .trab__pilha { order: -1; }
  .pilha { max-width: 340px; }
  .pilha__nota { position: static; margin-top: var(--e2); text-align: center; }
}
html:not(.js) .pilha__nota { position: static; margin-top: var(--e2); }

/* painel que segue o cursor — agora só nos serviços */
.servicos__painel { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .js .servicos__painel {
    display: block;
    position: fixed; top: 0; left: 0;
    width: clamp(240px, 21vw, 340px); aspect-ratio: 4 / 3;
    border-radius: var(--raio);
    overflow: hidden;
    pointer-events: none;
    z-index: 40;
    opacity: 0; transform: translate(-50%, -50%) scale(.92);
    transition: opacity var(--medio), transform var(--medio) var(--saida);
    box-shadow: 0 24px 70px rgba(5,4,22,.55);
  }
  .js .servicos__painel.mostra { opacity: 1; }
  .painel__arte {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: var(--fundo-alto);
    opacity: 0;
    transition: opacity var(--medio);
  }
  .painel__arte.actual { opacity: 1; }
  .js .trab__dica { display: inline; }
  .js .trab__dica::before { content: " "; }
}

/* ── FICHA DO PROJETO ─────────────────────────────────────────────────────
   Sem JavaScript é uma secção normal com os quatro projetos.
   Com JavaScript passa a folha que abre por cima da página.               */

.ficha {
  position: relative; z-index: var(--z-conteudo);
  padding-block: var(--seccao);
}
.ficha__veu, .ficha__barra { display: none; }
.js .ficha { display: none; position: fixed; inset: 0; z-index: var(--z-ficha); padding: 0; }
.js .ficha.aberta { display: block; }
.js .ficha__veu {
  display: block;
  position: absolute; inset: 0;
  background: rgba(5,4,22,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.js .ficha__folha {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fundo);
  clip-path: inset(0 0 0 0);
}
.js .ficha__barra {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2);
  padding: .75rem var(--goteira);
  background: rgba(12,10,43,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha-2);
}
.ficha__onde { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.ficha__onde i {
  font-style: normal; letter-spacing: 0; text-transform: none;
  color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha__onde i:not(:empty)::before { content: "— "; color: var(--tinta-3); }
.ficha__fechar {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--linha); border-radius: 999px;
  font: 500 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: color var(--medio), border-color var(--medio), background-color var(--medio);
}
.ficha__fechar:hover { color: var(--tinta); border-color: var(--roxo); background: rgba(182,80,223,.12); }

.ficha__rolo {
  width: min(var(--larg), 100%); margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--goteira) var(--seccao);
}
.js .ficha__item { display: none; }
.js .ficha__item.actual { display: block; }
.ficha__item + .ficha__item { margin-top: var(--seccao); }

.ficha__cab { display: grid; gap: var(--e2); justify-items: start; }
.ficha__num { font-variant-numeric: tabular-nums; }
.ficha__nome {
  font-size: min(var(--t-h2), calc(100cqi / 6.4));
  line-height: 1.02;
}
.ficha__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.ficha__tags li {
  padding: .3125rem .75rem;
  border: 1px solid var(--linha); border-radius: 999px;
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
}

.ficha__ficha {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.ficha__meta { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--linha-2); }
.ficha__meta > div {
  display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr;
  gap: var(--e2);
  padding: .75rem 0;
  border-bottom: 1px solid var(--linha-2);
}
.ficha__meta dt {
  font: 500 var(--t-rot)/1.4 var(--fonte-c);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-3);
}
.ficha__meta dd { margin: 0; color: var(--tinta-2); }
.ficha__texto { font-size: var(--t-lede); color: var(--tinta-2); max-width: 38rem; text-wrap: pretty; }

.ficha__galeria {
  display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.peca { margin: 0; }
.peca--larga { grid-column: 1 / -1; }
.peca__vazio {
  display: grid; place-content: center; justify-items: center; gap: .625rem;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(150deg, rgba(0,37,100,.4), rgba(50,11,81,.4));
  color: var(--tinta-3);
}
.peca--larga .peca__vazio { aspect-ratio: 16 / 9; }
.peca__vazio b {
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .2em; text-transform: uppercase;
}

.ficha__nav {
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha-2);
}
.ficha__nav button {
  display: grid; gap: .25rem; justify-items: start;
  min-height: 56px; padding: .75rem 0;
  transition: padding-left var(--medio) var(--saida);
}
.ficha__nav button:last-child { justify-items: end; text-align: right; }
.ficha__nav b {
  font-family: var(--fonte-t); font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  letter-spacing: -.02em;
  transition: color var(--medio);
}
.ficha__nav button:hover b { color: var(--roxo-legivel); }
.ficha__nav button:first-child:hover { padding-left: .5rem; }

/* ═══════════════════ 09 · SERVIÇOS ═══════════════════ */

.servicos {
  position: relative; z-index: var(--z-conteudo);
  padding-block: var(--seccao);
}
.servicos__t { }
.servicos__lista {
  width: min(var(--larg), 100%);
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  padding-inline: var(--goteira);
  border-top: 1px solid var(--linha-2);
}
.serv { position: relative; border-bottom: 1px solid var(--linha-2); }
.serv > a {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .5rem clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0;
  transition: padding-left var(--lento) var(--saida);
}
.serv__num {
  font: 600 var(--t-rot)/1 var(--fonte-c);
  font-style: normal; letter-spacing: .2em;
  color: var(--tinta-3);
  transition: color var(--medio);
}
.serv__nome {
  grid-column: 2;
  line-height: 1.02; letter-spacing: -.02em;
  transition: color var(--medio);
}
.serv__desc {
  grid-column: 2;
  max-width: 34rem; margin-top: .625rem;
  color: var(--tinta-2);
}
.serv__seta {
  position: absolute; right: 0; top: clamp(1.5rem, 3.5vw, 2.75rem);
  color: var(--tinta-3);
  opacity: 0; transform: translate(-8px, 8px);
  transition: opacity var(--medio), transform var(--medio) var(--saida), color var(--medio);
}
.serv::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(182,80,223,.14), rgba(0,37,100,.1) 60%, transparent);
  opacity: 0;
  transition: opacity var(--medio);
}
.serv:hover::before, .serv:focus-within::before { opacity: 1; }
.serv:hover > a, .serv:focus-within > a { padding-left: clamp(.75rem, 2vw, 1.75rem); }
.serv:hover .serv__nome, .serv:focus-within .serv__nome {
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
.serv:hover .serv__num, .serv:focus-within .serv__num { color: var(--roxo-legivel); }
.serv:hover .serv__seta, .serv:focus-within .serv__seta {
  opacity: 1; transform: translate(0,0); color: var(--azul);
}

/* — as quatro composições. Abstratas de propósito: são a linguagem da marca,
     não capturas de ecrã falsas de trabalhos que não existem. ————————— */
.painel__arte, .serv__visual {
  --a: rgba(177,229,252,.9); --b: rgba(182,80,223,.9);
  background-color: var(--fundo-alto);
}
.serv__visual--social, .painel__arte[data-arte="social"] {
  background-image:
    linear-gradient(180deg, rgba(177,229,252,.16) 0 22%, transparent 22%),
    linear-gradient(180deg, transparent 30%, rgba(182,80,223,.2) 30% 52%, transparent 52%),
    linear-gradient(180deg, transparent 60%, rgba(177,229,252,.12) 60% 78%, transparent 78%),
    var(--grad-prof);
}
.serv__visual--ads, .painel__arte[data-arte="ads"] {
  background-image:
    repeating-linear-gradient(115deg, rgba(182,80,223,.28) 0 12px, transparent 12px 34px),
    radial-gradient(60% 60% at 70% 30%, rgba(177,229,252,.35), transparent 66%),
    var(--grad-prof);
}
.serv__visual--web, .painel__arte[data-arte="web"] {
  background-image:
    linear-gradient(180deg, rgba(228,225,245,.22) 0 12%, transparent 12%),
    linear-gradient(90deg, rgba(177,229,252,.18) 0 34%, transparent 34%),
    radial-gradient(70% 70% at 80% 80%, rgba(182,80,223,.3), transparent 68%),
    var(--grad-prof);
}
.serv__visual--audit, .painel__arte[data-arte="audit"] {
  background-image:
    linear-gradient(0deg, rgba(177,229,252,.35) 0 26%, transparent 26%),
    repeating-linear-gradient(90deg, transparent 0 14%, rgba(182,80,223,.3) 14% 20%),
    var(--grad-prof);
}

/* painel que segue o cursor (só desktop com rato) */

/* sem rato (ou em ecrã estreito) o visual do serviço vem por baixo do nome */
.serv__visual { display: none; }
@media (max-width: 899px), (hover: none) {
  .serv__visual {
    display: block;
    height: clamp(120px, 26vw, 200px);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--raio);
    border: 1px solid var(--linha-2);
  }
}

/* ═══════════════════ 10 · PROCESSO ═══════════════════
   A secção prende-se ao ecrã e a palavra transforma-se enquanto se rola:
   ANALISAR → DEFINIR → CRIAR → OTIMIZAR. Sem JavaScript as quatro aparecem
   umas sob as outras, na mesma ordem.                                      */

.processo {
  position: relative; z-index: var(--z-conteudo);
  padding-block: var(--seccao);
}
.js .processo { padding-block: 0; height: 380vh; }

.proc__palco {
  display: grid; align-content: center;
  padding-inline: var(--goteira);
  width: min(var(--larg), 100%); margin-inline: auto;
}
.js .proc__palco {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.proc__lobo {
  position: absolute; top: 50%; left: 50%;
  width: min(1300px, 120vw); aspect-ratio: 1460 / 773;
  transform: translate(-50%, -50%);
  background: var(--grad-prof);
  -webkit-mask: url("../assets/logo/lobo-silhueta.png") center / contain no-repeat;
          mask: url("../assets/logo/lobo-silhueta.png") center / contain no-repeat;
  opacity: .24;
  z-index: -1;
  pointer-events: none;
}
.proc__palavras { position: relative; }
.proc__pal {
  display: block;
  font-family: var(--fonte-t); font-weight: 700;
  line-height: 1; letter-spacing: -.03em;
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
.js .proc__pal { position: absolute; inset: 0; opacity: 0; }
.js .proc__pal[data-passo="1"] { opacity: 1; }
.js .proc__palavras { min-height: clamp(3rem, 7.5vw, 7rem); }

.proc__legenda {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 34rem;
  font-size: var(--t-lede); color: var(--tinta-2);
}
.js .proc__legenda { min-height: 4.5rem; }
.js .proc__legenda span { position: absolute; inset: 0; opacity: 0; }
.js .proc__legenda span[data-passo="1"] { opacity: 1; }

.proc__marcas {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin-top: clamp(2rem, 4vw, 3rem);
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .2em;
  color: var(--tinta-3);
}
.proc__marcas li { display: flex; align-items: center; gap: .5rem; }
.proc__marcas i {
  display: block; width: 26px; height: 2px; border-radius: 2px;
  background: var(--linha);
  transition: background var(--medio);
}
.proc__marcas li.actual { color: var(--tinta); }
.proc__marcas li.actual i { background: var(--grad); }

/* ═══════════════════ 12 · MOMENTO ═══════════════════ */

.momento { position: relative; z-index: var(--z-conteudo); padding-block: clamp(2rem, 6vw, 5rem); }
.momento__moldura {
  position: relative;
  width: 72%; margin-inline: auto;
  border-radius: var(--raio-g);
  overflow: hidden;
  will-change: width, border-radius;
}
.momento__arte {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--linha);
  background:
    radial-gradient(70% 80% at 30% 20%, rgba(0,37,100,.7), transparent 65%),
    radial-gradient(60% 70% at 80% 80%, rgba(50,11,81,.75), transparent 65%),
    var(--fundo-alto);
}
.momento__vazio {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: .75rem;
  color: var(--tinta-3);
}
.momento__vazio b {
  font: 500 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .2em; text-transform: uppercase;
}
.momento__frase {
  position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem);
  font-family: var(--fonte-t); font-weight: 700;
  font-size: min(clamp(1.125rem, 2.4vw, 1.875rem), calc(100vw / 12));
  line-height: 1; letter-spacing: -.02em;
  color: var(--tinta);
  text-shadow: 0 2px 30px rgba(5,4,22,.8);
}

/* ═══════════════════ 13 · SOBRE E HONESTIDADE ═══════════════════ */

.sobre { position: relative; z-index: var(--z-conteudo); padding-block: var(--seccao); }
.sobre__t { display: grid; gap: .12em; justify-items: start; line-height: 1.02; }
.sobre__marca {
  width: clamp(180px, 34vw, 420px); height: auto;
  transform: translateY(.06em);
}
.sobre__corpo {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 62rem;
}
.sobre__p { font-size: var(--t-lede); color: var(--tinta-2); text-wrap: pretty; }
.sobre__lema {
  font-family: var(--fonte-t); font-weight: 700;
  font-size: min(clamp(1.25rem, 2.6vw, 2rem), calc(100cqi / 17.1));
  line-height: 1.15; letter-spacing: -.02em;
  color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
/* as fotografias ao centro, e o nome debaixo de cada uma */
.sobre__pessoas {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: center;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  text-align: center;
}
.pessoa__foto {
  display: grid; place-content: center;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(160deg, rgba(0,37,100,.55), rgba(50,11,81,.55));
  color: var(--tinta-3);
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .2em; text-transform: uppercase;
}
.pessoa__nome { margin-top: var(--e2); font-family: var(--fonte-t); font-weight: 700; font-size: 1.125rem; }
.pessoa__papel { margin-top: .25rem; }

.honesto {
  position: relative; z-index: var(--z-conteudo);
  padding-block: clamp(7rem, 18vw, 16rem);
  text-align: center;
}
.honesto__t { display: grid; gap: .06em; justify-items: center; line-height: 1.02; }
.honesto__risco { position: relative; }
.honesto__risco::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 55%;
  height: .055em; border-radius: 8px;
  background: var(--grad);
  transform: scaleX(var(--risco, 0)); transform-origin: left center;
  transition: transform .9s var(--suave);
}
/* a promessa tem o mesmo desenho do que está riscado por cima: é a mesma
   frase a continuar, não um comentário mais pequeno */
.honesto__p {
  display: grid; gap: .06em; justify-items: center;
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
  font-family: var(--fonte-t); font-weight: 700;
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--tinta);
}

.testemunhos { position: relative; z-index: var(--z-conteudo); padding-block: var(--seccao); }
.testemunhos__t { }
.testemunhos__lista {
  display: grid; gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.teste {
  display: grid; gap: var(--e2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-g);
  background: var(--vidro);
}
.teste__aspas {
  font-family: var(--fonte-t); font-weight: 800;
  font-size: 3rem; line-height: .5;
  color: var(--roxo-legivel);
}
.teste__txt { color: var(--tinta-3); font-size: var(--t-lede); }
.teste__quem { display: grid; gap: .25rem; }
.teste__quem b { font-weight: 600; color: var(--tinta-2); }
.testemunhos__nota { margin-top: var(--e3); }

/* ═══════════════════ 14 · AVANÇAR ═══════════════════
   O fim é uma declaração, não um formulário. O gradiente aqui é o da marca,
   mas na metade escura: branco sobre #002564 dá 12,4:1 e sobre #320B51 dá
   13,8:1. Com o roxo claro no fundo o texto branco cairia para 4,0:1.      */

.avancar {
  position: relative; z-index: var(--z-conteudo);
  padding-block: clamp(6rem, 16vw, 13rem);
  overflow: hidden;
  background: var(--grad-prof);
  isolation: isolate;
}
.avancar::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 120%, rgba(182,80,223,.4), transparent 65%);
}
.avancar__lobo {
  position: absolute; top: 50%; left: 50%;
  width: min(1400px, 130vw); aspect-ratio: 1460 / 773;
  transform: translate(-50%, -50%);
  background: linear-gradient(100deg, rgba(177,229,252,.5), rgba(182,80,223,.5));
  -webkit-mask: url("../assets/logo/lobo-silhueta.png") center / contain no-repeat;
          mask: url("../assets/logo/lobo-silhueta.png") center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
}
.avancar .caixa { position: relative; }
/* sobre o halo roxo do fundo, a tinta a 62% cai para 4,2:1 e o roxo da marca
   para 2,3:1 — aqui o rótulo sobe para 82% e o número passa a azul (7:1). */
.avancar .rot { color: rgba(228,225,245,.82); }
.avancar .rot--cap i { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--azul); }
.avancar .rot--cap::after { background: linear-gradient(90deg, rgba(228,225,245,.35), transparent); }
.avancar__t {
  text-transform: uppercase;
  display: grid; gap: .04em; justify-items: start;
  line-height: .98;
}
.avancar__p {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--t-lede); color: rgba(228,225,245,.86);
}
.avancar__acao {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.avancar .btn--nu { border-color: rgba(228,225,245,.35); }
.avancar .btn--nu:hover { border-color: var(--azul); background: rgba(177,229,252,.16); }

/* ═══════════════════ 15 · RODAPÉ ═══════════════════
   Os contactos vivem só aqui — não há secção própria. As redes são o ícone e
   mais nada: o nome delas fica no rótulo, para quem lê por leitor de ecrã.  */

.rodape {
  position: relative; z-index: var(--z-conteudo);
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--linha-2);
  background: rgba(5,4,22,.62);
}
/* A assinatura é composta pelas seis letras do logótipo, não pela palavra
   inteira: assim cada uma pode entrar por si. As medidas são as do wordmark
   oficial (assets/logo/wordmark.txt) — se a arte mudar, vêm de lá.        */
.rodape__assin {
  width: min(var(--larg), 100%); margin-inline: auto;
  padding-inline: var(--goteira);
  opacity: .78;
}
.assin__nome {
  position: relative; display: block;
  width: min(100%, 38rem);
  aspect-ratio: 860 / 108;
}
.assin__l {
  position: absolute; top: 0; height: 100%;
  transform-origin: 50% 50%;
}
.assin__l img { height: 100%; width: 100%; object-fit: contain; display: block; }
.assin__l:nth-child(1) { left: 0.233%;  width: 15.349%; }   /* A */
.assin__l:nth-child(2) { left: 17.674%; width: 15.465%; }   /* V — o espelho do A */
.assin__l:nth-child(3) { left: 36.047%; width: 15.349%; }   /* A */
.assin__l:nth-child(4) { left: 57.674%; width: 12.558%; }   /* N */
.assin__l:nth-child(5) { left: 76.512%; width: 15.000%; }   /* T */
.assin__l:nth-child(6) { left: 97.209%; width: 2.558%;  }   /* I */

.rodape__caixa {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.rodape__marca { display: flex; align-items: center; gap: var(--e2); margin-right: auto; }
.rodape__lobo { width: 46px; height: auto; filter: drop-shadow(0 0 16px rgba(182,80,223,.32)); }
.rodape__lema {
  font: 500 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-3);
}

.rodape__falar { display: flex; flex-wrap: wrap; gap: .25rem clamp(1rem, 2.5vw, 2rem); }
.rodape__falar a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: var(--t-corpo); color: var(--tinta-2);
  transition: color var(--medio);
}
.rodape__falar a:hover { color: var(--tinta); }
.rodape__falar a[aria-disabled="true"] { color: var(--tinta-3); cursor: default; }

.rodape__redes { display: flex; gap: .375rem; }
.rodape__redes a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--tinta-3);
  transition: color var(--medio), background-color var(--medio);
}
.rodape__redes a:hover { color: var(--tinta); background: rgba(182,80,223,.16); }
.rodape__redes a[aria-disabled="true"] { color: rgba(228,225,245,.3); cursor: default; }
.rodape__redes a[aria-disabled="true"]:hover { background: none; color: rgba(228,225,245,.3); }

.rodape__baixo {
  width: min(var(--larg), 100%); margin-inline: auto;
  padding: var(--e3) var(--goteira) var(--e4);
  border-top: 1px solid var(--linha-2);
  display: flex; flex-wrap: wrap; gap: .5rem var(--e4);
  justify-content: space-between; align-items: center;
  font-size: var(--t-peq); color: var(--tinta-3);
}
.rodape__legais { display: flex; flex-wrap: wrap; gap: .25rem clamp(.875rem, 2vw, 1.5rem); }
.rodape__legais a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--tinta-3);
  transition: color var(--medio);
}
.rodape__legais a:hover { color: var(--azul); }
.rodape__legal i { margin-inline: .35rem; color: var(--roxo-legivel); font-style: normal; }

/* ═══════════════════ 16 · COOKIES ═══════════════════ */

.cookies {
  position: fixed; left: var(--e2); right: var(--e2); bottom: var(--e2);
  z-index: var(--z-cookies);
  width: min(560px, calc(100% - 2rem));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  justify-content: space-between;
  padding: var(--e2) 1.125rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgba(8,6,26,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(5,4,22,.6);
}
.cookies[hidden] { display: none; }
.cookies__txt { font-size: var(--t-peq); color: var(--tinta-2); max-width: 22rem; }
.cookies__txt a {
  display: inline-block; padding: .5rem 0;
  color: var(--azul); text-decoration: underline; text-underline-offset: 3px;
}
.cookies__acao { display: flex; gap: .5rem; margin-left: auto; }

/* ═══════════════════ 18 · RESPONSIVO ═══════════════════ */

@media (max-width: 1100px) {
  .hero__pe { justify-content: flex-start; }
  .hero__tri { text-align: left; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .manifesto__p { margin-left: 0; }
  .sobre__t { gap: .16em; }
}


@media (max-width: 700px) {
  :root { --t-display: clamp(3rem, 15vw, 5rem); }
  .hero { padding-top: clamp(5.5rem, 14vh, 7rem); }
  .hero__pe { gap: 1.25rem; }
  .cliente::after { display: none; }
  .rodape__baixo { flex-direction: column; align-items: flex-start; }
  .rodape__caixa { align-items: flex-start; }
  .rodape__marca { margin-right: 0; width: 100%; }
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__txt a { display: flex; align-items: center; min-height: 44px; }
  .cookies__acao { margin-left: 0; }
  .cookies__acao .btn { flex: 1; }
  .momento__moldura { width: 100%; }
}

/* ═══════════════════ 19 · MOVIMENTO REDUZIDO E SEM JAVASCRIPT ═══════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-surge], .js .hero__pal { opacity: 1 !important; transform: none !important; }
  .js .rev { clip-path: none !important; }
  .js .processo { height: auto; padding-block: var(--seccao); }
  .js .proc__palco { position: static; height: auto; }
  .js .proc__pal, .js .proc__legenda span { position: static; opacity: 1; }
  .js .proc__palavras, .js .proc__legenda { min-height: 0; }
  /* a ficha do projeto continua a abrir, só que sem animação */
  .js .ficha__folha { clip-path: none !important; }
  .trabalhos.percorre { height: auto; padding-block: var(--seccao); }
  .trabalhos.percorre .trab__palco { position: static; height: auto; overflow: visible; }
  .honesto__risco::after { --risco: 1; }
  .momento__moldura { width: 100%; }
}

/* Sem JavaScript nada desaparece: as classes que escondem só existem com .js */
html:not(.js) .intro { display: none; }
html:not(.js) .indice,
html:not(.js) .servicos__painel { display: none; }
html:not(.js) .honesto__risco::after { --risco: 1; }
html:not(.js) .momento__moldura { width: 100%; }

/* ═══════════════════ 20 · PÁGINAS LEGAIS ═══════════════════ */

.legal {
  position: relative; z-index: var(--z-conteudo);
  padding-block: clamp(8rem, 18vh, 11rem) var(--seccao);
}
.legal__bg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1100px, 120%); height: 480px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(50,11,81,.55), transparent 70%);
  pointer-events: none;
}
.legal .caixa { max-width: 860px; }
.legal__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.legal__rot {
  font: 500 var(--t-rot)/1 var(--fonte-c);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: var(--e2);
}
.legal h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1;
  margin-bottom: var(--e2);
}
.legal__data { font-size: var(--t-peq); color: var(--tinta-3); }
.legal__data b { color: var(--tinta-2); font-weight: 500; }

.legal__aviso {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: 1.125rem 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(182,80,223,.4);
  border-radius: var(--raio);
  background: rgba(182,80,223,.09);
  font-size: .9375rem; color: var(--tinta-2);
}
.legal__aviso b { color: var(--tinta); }
.legal__icone { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--roxo-legivel); }

.legal__corpo { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.legal__corpo > section { display: grid; gap: .875rem; }
.legal__corpo h2 {
  display: flex; align-items: baseline; gap: .75rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -.02em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha-2);
}
.legal__corpo h2 em {
  font-style: normal;
  font-size: var(--t-rot); letter-spacing: .18em;
  color: var(--roxo-legivel);
}
.legal__corpo h3 { font-size: 1.0625rem; margin-top: .5rem; }
.legal__corpo p, .legal__corpo li { font-size: var(--t-corpo); color: var(--tinta-2); }
.legal__corpo b { color: var(--tinta); font-weight: 500; }
.legal__corpo a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.legal__corpo ul, .legal__corpo ol { display: grid; gap: .5rem; padding-left: 1.25rem; }
.legal__corpo ul li { list-style: none; position: relative; }
.legal__corpo ul li::before {
  content: ""; position: absolute; left: -1.25rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--grad);
}
.legal__corpo ol { list-style: decimal; }
.legal__corpo ol li::marker { color: var(--roxo-legivel); font-variant-numeric: tabular-nums; }

.legal__tabela { overflow-x: auto; border: 1px solid var(--linha-2); border-radius: var(--raio); }
.legal__tabela table { width: 100%; border-collapse: collapse; min-width: 520px; }
.legal__tabela th, .legal__tabela td {
  padding: .75rem .875rem; text-align: left;
  font-size: .875rem; border-bottom: 1px solid var(--linha-2);
}
.legal__tabela th {
  font: 600 var(--t-peq)/1.3 var(--fonte-c);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
  background: rgba(255,255,255,.03);
}
.legal__tabela td { color: var(--tinta-2); }
.legal__tabela tr:last-child td { border-bottom: 0; }

/* nas páginas legais a barra já entra assente e o voltar substitui o menu */
.nav--legal { background: rgba(8,6,26,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--linha-2); }
.nav__voltar {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--linha); border-radius: 999px;
  font: 500 var(--t-peq)/1 var(--fonte-c);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: color var(--medio), border-color var(--medio), background-color var(--medio);
}
.nav__voltar:hover { color: var(--tinta); border-color: var(--roxo); background: rgba(182,80,223,.12); }