/* ============================================================
   MECANISMOS — layout partilhado
   ============================================================ */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/48px 48px,
    var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

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

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px 90px;
}

/* ---------- navegação ---------- */
.voltar{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  transition: color .2s ease;
}
.voltar:hover{ color: var(--text); }

/* ---------- barra de navegação no topo ----------
   As ligações viviam só no rodapé, e no rodapé ninguém as vê: numa
   página de três minutos, chegar ao fundo é o fim da visita. Sobem
   para o topo, ficam também em baixo para quem lá chega, e passam a
   ter cor e contorno. Uma ligação tem de parecer uma coisa em que se
   carrega, e cinzento sobre cinzento não parece. */
.topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.topo .voltar{ margin-bottom: 0; }
.topo-links{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--link);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover,
.chip:focus-visible{
  border-color: var(--link);
  background: var(--link-fundo);
  color: var(--text);
}

/* ---------- cabeçalho ---------- */
.hero{
  max-width: 660px;
  margin-bottom: 52px;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  transition: background .4s ease;
}
.hero h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 16px;
}
.hero .sub{
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 58ch;
}
.hero .sub + .sub{ margin-top: 15px; }

/* ============================================================
   PÁGINA DE MECANISMO
   ============================================================ */

.stage{
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 880px){
  .stage{ grid-template-columns: 1fr; }
}

/* ---------- painel da animação ---------- */
.engine-panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cutaway{
  padding: 14px 18px 6px;
  position: relative;
}
/* A legenda foi absoluta durante muito tempo, e por isso flutuava
   por cima do canto superior esquerdo do desenho. Em seis das 23
   páginas batia em alguma coisa — no 01 caía em cima do rótulo
   "AIR + FUEL", no 10 em cima do "SPARK PLUG", no 07 em cima do
   "GENERATOR". Não havia teste que apanhasse isso: o colisoes.js
   corre em jsdom, que não faz layout, e o problema só existe
   depois de o SVG ser escalado.

   Passa a ocupar o seu lugar. Custa uma linha de altura ao painel
   e mata a classe inteira de erros — e a legenda é mesmo uma
   legenda, não faz parte do desenho. */
.cutaway .tag{
  display: block;
  margin: 0 0 9px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.cutaway svg.engine{
  display: block;
  width: 100%;
  height: auto;
}

/* elementos comuns aos desenhos */
.gas{ transition: fill .35s ease; }
.valve{ transition: transform .12s linear; }
.guide{ opacity: .35; }

/* ---------- controlos ---------- */
.controls{
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
}
@media (max-width: 420px){
  .controls{ grid-template-columns: 1fr; }
}

.dial-wrap{ display: flex; align-items: center; gap: 14px; }
svg.dial{
  width: 92px;
  height: 92px;
  touch-action: none;
  cursor: grab;
}
svg.dial:active{ cursor: grabbing; }
.dial-readout{ font-family: var(--font-mono); line-height: 1.3; }
.dial-readout .deg{ font-size: 20px; color: var(--text); }
.dial-readout .lap{ font-size: 11px; letter-spacing: .06em; color: var(--text-faint); }

.buttons{ display: flex; flex-direction: column; gap: 10px; }
.buttons .row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s ease, color .2s ease;
}
.btn:hover{ border-color: var(--accent); color: var(--accent); }
.btn svg{ width: 12px; height: 12px; flex: none; }

.speed{ display: flex; align-items: center; gap: 9px; flex: 1; min-width: 150px; }
.speed label{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}
.speed input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.speed input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: background .3s ease;
}
.speed input[type=range]::-moz-range-thumb{
  width: 12px; height: 12px;
  border: none; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.dwell{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dwell label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  cursor: pointer;
}

/* ---------- linha de fases ---------- */
.timeline{ position: relative; padding-left: 30px; }
.timeline::before{
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}

.phase{
  position: relative;
  padding: 4px 0 30px;
  opacity: .4;
  transition: opacity .4s ease;
}
.phase:last-child{ padding-bottom: 4px; }
.phase.active{ opacity: 1; }

.phase::before{
  content: "";
  position: absolute;
  left: -30px; top: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--dot, var(--text-faint));
  transition: background .4s ease, box-shadow .4s ease;
}
.phase.active::before{
  background: var(--dot, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent);
}

.phase .k{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.phase.active .k{ color: var(--dot, var(--accent)); }

.phase h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.005em;
  margin: 0 0 8px;
}
.phase p{
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0;
}
.phase.active p{ color: var(--text); }

/* ---------- nota de rodapé do mecanismo ---------- */
.nota{
  margin-top: 46px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel);
  max-width: 76ch;
}
.nota .k{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.nota p{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- bloco de verificação ----------
   Os números que o modelo dá, calculados no browser.
   Deliberadamente sóbrio: é uma folha de medições, não um destaque. */
.verificacao{
  margin-top: 18px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel);
  max-width: 76ch;
}
.verificacao .k{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.verificacao table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.verificacao td{
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.verificacao tr:last-child td{ border-bottom: none; }
.verificacao td:first-child{ color: var(--text-muted); padding-right: 16px; }
.verificacao td:last-child{ color: var(--text); text-align: right; white-space: nowrap; }
.verificacao p.rodape{
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ============================================================
   CATÁLOGO
   ============================================================ */

.linha-titulo{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 48px 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.linha-titulo h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
.linha-titulo .conta{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-left: auto;
}
.linha-titulo p{
  margin: 0;
  font-size: 13px;
  color: var(--text-faint);
}

.indice{ display: flex; flex-direction: column; }

.item{
  display: grid;
  grid-template-columns: 46px 84px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 18px 12px 18px 4px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  transition: border-left-color .25s ease, background .25s ease, padding-left .25s ease;
}
.item .num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: .04em;
  padding-top: 5px;
}

/* ---------- miniatura ----------
   A máquina verdadeira, congelada no ângulo do poses.js pelo
   miniaturas.js. O fundo do painel vive aqui e não dentro do SVG:
   assim as figuras translúcidas compõem-se sobre a mesma cor que
   teriam na página, e a miniatura acompanha a paleta se ela mudar. */
.item .mini{
  width: 84px;
  height: 104px;
  display: block;
  border-radius: var(--radius-s);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  object-fit: contain;
  transition: border-color .25s ease;
}
.item .mini.vazia{ background: transparent; border-style: dashed; }
a.item:hover .mini{ border-color: var(--item-cor, var(--accent)); }
.item h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  margin: 0 0 5px;
  letter-spacing: -.005em;
}
.item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}
.item .estado{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 6px;
}

a.item:hover{
  border-left-color: var(--item-cor, var(--accent));
  background: var(--panel);
  padding-left: 14px;
}
a.item:hover h3{ color: var(--item-cor, var(--accent)); }
a.item .estado{ color: var(--item-cor, var(--accent)); }


/* ---------- rodapé ---------- */
/* ---------- página de texto corrido ----------
   Só o "about" usa isto. O site é feito de desenhos; quando é mesmo
   preciso escrever, escreve-se numa coluna estreita e acaba ali. */
.prosa{ max-width: 68ch; }
.prosa h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.005em;
  color: var(--text);
  margin: 42px 0 12px;
}
.prosa h2:first-child{ margin-top: 0; }
.prosa p{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}
.prosa strong{ color: var(--text); font-weight: 500; }
.prosa em{ font-style: italic; }

/* ---------- formulário ----------
   Só o /feedback usa isto. Mesma regra que a .prosa: uma coluna
   estreita, os campos com o peso das caixas que já existem no site,
   e nada de decoração nova. */
.formulario{ max-width: 62ch; }
.campo{ display: block; margin-bottom: 22px; position: relative; }
.campo .rotulo{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.formulario textarea,
.formulario select{
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  transition: border-color .2s ease;
}
.formulario select{ font-family: var(--font-mono); font-size: 13px; }
.formulario textarea{ resize: vertical; min-height: 120px; }
.formulario textarea:focus,
.formulario select:focus{ outline: none; border-color: var(--accent); }
.formulario textarea::placeholder{ color: var(--text-faint); }
.conta-chars{
  position: absolute;
  right: 12px;
  bottom: -16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
/* A armadilha tem de ser invisível para uma pessoa e preenchível
   para um robot: display:none é o único sítio onde alguns não vão. */
.mel{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.linha-envio{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.linha-envio .btn[disabled]{ opacity: .5; cursor: default; }
.estado-envio{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.obrigado{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

footer.pagina{
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer.pagina a{ color: var(--link); transition: color .2s ease; }
footer.pagina a:hover{ color: var(--text); }


/* ============================================================
   FOCO — escurecer tudo menos a região de que a fase fala
   ------------------------------------------------------------
   O véu escurece PARA a cor do painel, não para o preto do fundo
   da página. A diferença importa: escurecer para --panel faz o
   desenho recuar para o seu próprio fundo; escurecer para --ink
   punha-lhe uma sombra por cima, que lê como sujidade.

   0,62 não é um número escolhido a olho. --text-faint (#566372)
   com 38% de passagem sobre --panel (#121821) dá #2C3440, que é
   praticamente --line (#2A3642): o desenho fora do foco cai
   exactamente ao peso das linhas de grelha que já existem. Fica
   estrutura, deixa de ser detalhe, e continua legível — que é o
   que permite ao leitor perceber onde a peça acesa encaixa.
   ============================================================ */
.foco-veu{
  fill: var(--panel);
  opacity: var(--foco-veu);
  transition: opacity .35s ease;
}

/* ---------- legenda viva por baixo do desenho ----------
   A ponte entre as duas colunas: diz, na cor da fase, o nome da
   fase que está acesa do outro lado. min-height fixa para a
   altura do painel não saltar quando o nome muda de linha. */
.agora{
  border-top: 1px solid var(--line-soft);
  padding: 11px 18px 10px;
  min-height: 38px;
  display: flex;
  align-items: center;
}
/* A espera lê-se: uma barra fina que se esvazia por baixo da
   legenda. Sem ela a pausa parecia a página ter encravado. */
.agora{ position: relative; }
.agora .espera{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: .5;
  transform-origin: left center;
  transform: scaleX(0);
}
.agora span{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color .4s ease;
  line-height: 1.3;
}

/* ---------- a linha de fases ----------
   Estava a esbater-se com opacity:.4, o que punha o corpo do texto
   a 2,1:1 e transformava três quartos da escrita em decoração. O
   cartão activo passa a destacar-se por acréscimo — fundo com um
   toque da cor da fase — em vez de os outros serem empurrados
   para baixo do limiar de leitura. */
.phase{
  opacity: .82;
  border-radius: var(--radius-s);
  padding: 10px 14px 26px;
  margin-left: -14px;
  transition: opacity .4s ease, background .4s ease;
}
.phase.active{
  opacity: 1;
  background: color-mix(in srgb, var(--dot, var(--accent)) 7%, transparent);
}
.phase::before{ left: -16px; top: 12px; }

/* ============================================================
   PAINEL COLADO
   ------------------------------------------------------------
   O defeito de fundo do layout: o desenho e as palavras sobre o
   desenho nunca estão no ecrã ao mesmo tempo. A .stage começa por
   volta dos 346px, o painel tem 510 a 740px de altura e a lista de
   fases 850 a 1200px — pela terceira fase a máquina já saiu do
   ecrã, e nenhum destaque no mundo resolve isso, porque não há
   nada visível para destacar.

   CUIDADO: position:sticky morre em silêncio se qualquer
   antepassado tiver overflow diferente de visible. Não pôr
   overflow-x:hidden no .wrap, no .stage nem no body — é o reflexo
   habitual para tapar um scroll horizontal no telemóvel, e mata
   isto sem dar erro nenhum.
   ============================================================ */
@media (min-width: 881px){
  .engine-panel{
    position: sticky;
    top: 20px;
  }
  /* o desenho nunca pode ser mais alto do que o ecrã, senão o
     colado deixa de servir para nada */
  .cutaway svg.engine{
    max-height: calc(100vh - 250px);
    max-height: calc(100svh - 250px);
    margin: 0 auto;
  }
}

/* No telemóvel a lista de fases fica POR BAIXO do desenho, por
   isso ler a fase 3 significa ter a máquina fora do ecrã. Aqui o
   colado vale ainda mais do que no computador. */
@media (max-width: 880px){
  .engine-panel{
    position: sticky;
    top: 0;
    z-index: 2;
  }
  /* alvo de dedo: 29 px de altura chegam ao rato, não chegam ao polegar */
  .chip{ padding: 9px 14px; font-size: 12px; }
  .cutaway{ padding: 12px 12px 2px; }
  .cutaway svg.engine{ max-height: max(190px, 44svh); margin: 0 auto; }
  .agora{ padding: 8px 14px 7px; min-height: 32px; }
  .controls{ padding: 10px 14px; }
}

/* ============================================================
   Ecrãs estreitos
   ------------------------------------------------------------
   Tem de ficar no fim do ficheiro. As regras que sobrepõe
   (.verificacao td, .item, .timeline) estão definidas acima,
   e uma media query não acrescenta especificidade: se este
   bloco subisse, perdia para elas.
   ============================================================ */
@media (max-width: 880px){
  .wrap{ padding: 24px 16px 60px; }
  .hero{ margin-bottom: 32px; }
  .timeline{ margin-top: 34px; }

  /* a coluna dos valores é nowrap no computador, para as linhas
     lerem como uma tabela. Num telemóvel isso rebenta a caixa. */
  .verificacao{ padding: 18px 16px 16px; }
  .verificacao td{ font-size: 12px; }
  .verificacao td:last-child{ white-space: normal; }

  .item{ grid-template-columns: 30px 54px 1fr auto; gap: 12px; }
  .item .mini{ width: 54px; height: 68px; }
}

/* Ecrã baixo de mais para caber desenho e texto ao mesmo tempo: o
   colado é uma promessa que não se pode cumprir. Mais vale desistir
   dele e dar ao desenho o tamanho que ele quer. */
@media (max-width: 880px) and (max-height: 520px){
  .engine-panel{ position: static; }
  .cutaway svg.engine{ max-height: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}