/* ==========================================================
   STENCIS — esquema-scroll.css
   Página Sobre — metodologia "Do projeto à manutenção": esquema técnico
   ligado às 5 etapas (js/esquema-scroll.js, JS simples).

   Estados:
   - BASE (sem JS): esquema completo e estático, os 5 passos em lista.
   - .esquema--js: o JS controla a etapa ativa com .step-1 … .step-5 na secção;
     o desenho mostra o estado dessa etapa (regras "ESTADOS DO DESENHO").
   - .esquema--scroll (computador, sem "reduzir movimento"): secção alta,
     "palco" preso no ecrã e a etapa segue o scroll.
   - .esquema--toque (telemóvel/tablet, ou "reduzir movimento"): altura normal,
     etapas clicáveis, cartão que desliza e avanço automático.
   - .is-visivel: a secção está no ecrã (as animações contínuas só correm aí).
   --esquema-fill (0–1, do JS): quanto da linha/barra de progresso está cheio.
   ========================================================== */

.esquema {
  position: relative;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 100px 0;
  overflow-x: clip;      /* os cartões escondidos ficam deslocados para o lado: sem scroll horizontal
                            (clip, e não hidden, para não estragar o sticky do modo scroll) */
}

.esquema__palco {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}

/* ----- Cabeçalho fixo da secção ----- */
.esquema__cabecalho h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 26px; }

/* ----- Textos (passos) ----- */
.esquema__passos { display: grid; gap: 36px; }
.esquema__passo h3 { font-size: 1.5rem; margin-bottom: 10px; }
.esquema__passo p:not(.mono-label) { font-size: 1rem; line-height: 1.65; max-width: 440px; margin-bottom: 0; }
.esquema__passo .mono-label--manut { color: var(--color-manut); }

/* Etapas, barra e setas: só com JS */
.esquema__progresso,
.esquema__barra,
.esquema__nav { display: none; }

/* ----- Desenho ----- */
.esquema__desenho {
  background: #FFFDF9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 10px;
}
.esquema__desenho svg { display: block; width: 100%; height: auto; }

/* Elementos do SVG — cores do site */
.e-linha  { fill: none; stroke: #D9C7B4; stroke-width: 1.5; }
.e-equip  { fill: var(--color-bg); stroke-width: 2; }
.e-avac   { stroke: var(--color-avac); }
.e-hidr   { stroke: var(--color-hidr); }
.e-elet   { stroke: var(--color-elet); }
.e-icone  { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.e-tubo         { fill: none; stroke-opacity: 0.22; stroke-linejoin: round; }
.e-tubo--conduta{ stroke-width: 12; }
.e-tubo--agua   { stroke-width: 8; }
.e-tubo--cabo   { stroke-width: 4; }

.e-ar    { fill: none; stroke: var(--color-avac); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 8; opacity: 0.85; }
.e-pa    { fill: var(--color-avac); opacity: 0.9; }
.e-agua  { fill: none; stroke: var(--color-hidr); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.e-fluxo { fill: none; stroke: #FFFFFF; stroke-opacity: 0.75; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 11; }
.e-gota  { fill: var(--color-hidr); }
.e-cabo-ligado { fill: none; stroke: var(--color-elet); stroke-width: 2.5; stroke-linejoin: round; }
.e-corrente    { fill: none; stroke: var(--color-elet); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.e-vidro { fill: #FFE7B0; stroke: var(--color-elet); stroke-width: 2; }
.e-raio  { stroke: #E8A93C; stroke-width: 2; stroke-linecap: round; }

.e-texto {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--color-ink-soft);
  text-anchor: middle;
}
.e-texto--titulo { text-anchor: start; font-size: 9px; fill: var(--color-primary); }
.e-rotulo { font-size: 9px; font-weight: 500; fill: var(--color-ink); }

/* Passo 01 — linha de levantamento; passo 02 — traçado do projeto. No esquema estático não aparecem. */
.e-scan { fill: var(--color-primary); fill-opacity: 0.35; opacity: 0; }
.e-projeto { fill: none; stroke-width: 1.6; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.e-mascara { fill: none; stroke: #fff; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }

/* Passo 05 — manutenção: impulso de verificação, marcas ✓ e engrenagem (cor grafite) */
.e-verif { fill: none; stroke: var(--color-manut); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.e-check circle { fill: #FFFDF9; stroke: var(--color-manut); stroke-width: 1.6; }
.e-check path   { fill: none; stroke: var(--color-manut); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e-manut__fundo { fill: #FFFDF9; stroke: var(--color-manut); stroke-width: 1.6; }
.e-manut__roda * { fill: none; stroke: var(--color-manut); stroke-width: 1.6; stroke-linecap: round; }

/* Pontos de rotação/escala (as coordenadas são as do viewBox 600 × 440) */
.e-ventoinha { transform-box: view-box; transform-origin: 420px 105px; }
.e-brilho    { transform-box: view-box; transform-origin: 470px 318px; }
.e-check, .e-manut__roda, .e-manut { transform-box: fill-box; transform-origin: center; }

/* ==========================================================
   ESTADOS DO DESENHO (.step-1 … .step-5)
   Por defeito (com JS) só se vê a planta; cada etapa acrescenta o seu.
   Para ajustar uma etapa, mexer só no bloco dela.
   ========================================================== */
.esquema--js {
  --e-t: 0.6s;                                   /* duração das transições entre estados */
}
.esquema--a-iniciar,
.esquema--a-iniciar * { transition: none !important; }       /* posta pelo JS só no arranque */
.esquema--js .e-sis--hidr { --e-atraso: 0.15s; } /* as 3 redes entram em cascata */
.esquema--js .e-sis--elet { --e-atraso: 0.3s; }

/* Tudo o que ainda não existe na etapa 01 */
.esquema--js .e-mascara { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease; }
.esquema--js .e-mascara:nth-child(2) { transition-delay: 0.25s; }
.esquema--js .e-mascara:nth-child(3) { transition-delay: 0.5s; }
.esquema--js .e-projeto { transition: opacity var(--e-t) ease; }
.esquema--js .e-rotulo  { opacity: 0; transition: opacity var(--e-t) ease 0.4s; }

.esquema--js .e-tubo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-in-out var(--e-atraso, 0s); }
.esquema--js .e-equipamento,
.esquema--js .e-ventoinha,
.esquema--js .e-lampada { opacity: 0; transition: opacity var(--e-t) ease var(--e-atraso, 0s); }

.esquema--js .e-ares,
.esquema--js .e-fluxo,
.esquema--js .e-gotas,
.esquema--js .e-cabo-ligado,
.esquema--js .e-raios { opacity: 0; transition: opacity var(--e-t) ease; }
.esquema--js .e-agua  { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-in-out; }
.esquema--js .e-vidro { fill: var(--color-bg); transition: fill 0.4s ease 0.5s; }
.esquema--js .e-brilho { opacity: 0; transform: scale(0.4); transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; }

.esquema--js .e-check { opacity: 0; transform: scale(0.4); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1); }
.esquema--js .e-manutencao > g:nth-child(5) .e-check { transition-delay: 0.2s; }
.esquema--js .e-manutencao > g:nth-child(6) .e-check { transition-delay: 0.4s; }
.esquema--js .e-manut { opacity: 0; transition: opacity 0.4s ease 0.5s; }
.esquema--js .e-corrente { stroke-dasharray: 0.1 1.2; stroke-dashoffset: 0.1; }
.esquema--js .e-verif    { stroke-dasharray: 0.08 1.2; stroke-dashoffset: 0.08; }

/* ----- 01 ANÁLISE: só a planta, com uma linha de levantamento a percorrê-la ----- */
.esquema--js.step-1 .e-scan { animation: e-scan 2.6s ease-in-out infinite; }

/* ----- 02 PROJETO: as redes desenham-se a tracejado, com as siglas ----- */
.esquema--js:is(.step-2, .step-3, .step-4, .step-5) .e-mascara { stroke-dashoffset: 0; }
.esquema--js.step-2 .e-projeto { opacity: 1; animation: e-tracejado 1.4s linear infinite; }
.esquema--js:is(.step-2, .step-3, .step-4, .step-5) .e-rotulo { opacity: 1; }

/* ----- 03 MONTAGEM: equipamentos aparecem e as linhas ficam sólidas ----- */
.esquema--js:is(.step-3, .step-4, .step-5) .e-tubo { stroke-dashoffset: 0; }
.esquema--js:is(.step-3, .step-4, .step-5) :is(.e-equipamento, .e-ventoinha, .e-lampada) { opacity: 1; }

/* ----- 04 ENSAIO: o sistema liga ----- */
.esquema--js:is(.step-4, .step-5) .e-ventoinha { animation: e-rodar 1.1s linear infinite; }
.esquema--js:is(.step-4, .step-5) .e-ares { opacity: 1; }
.esquema--js:is(.step-4, .step-5) .e-ar { animation: e-ar 0.9s linear infinite; }
.esquema--js:is(.step-4, .step-5) .e-agua { stroke-dashoffset: 0; }
.esquema--js:is(.step-4, .step-5) .e-fluxo { opacity: 1; transition-delay: 0.9s; animation: e-fluxo 0.8s linear infinite; }
.esquema--js:is(.step-4, .step-5) .e-gotas { opacity: 1; transition-delay: 0.9s; }
.esquema--js:is(.step-4, .step-5) .e-gota { animation: e-gota 0.9s ease-in infinite; }
.esquema--js:is(.step-4, .step-5) .e-gota:nth-child(2) { animation-delay: 0.3s; }
.esquema--js:is(.step-4, .step-5) .e-gota:nth-child(3) { animation-delay: 0.6s; }
.esquema--js:is(.step-4, .step-5) .e-corrente { opacity: 1; animation: e-impulso 1.6s ease-in infinite; }
.esquema--js:is(.step-4, .step-5) .e-cabo-ligado { opacity: 1; transition-delay: 0.4s; }
.esquema--js:is(.step-4, .step-5) .e-vidro { fill: #FFE7B0; }
.esquema--js:is(.step-4, .step-5) .e-brilho { opacity: 1; transform: scale(1); animation: e-brilho 2.4s ease-in-out 1s infinite; }
.esquema--js:is(.step-4, .step-5) .e-raios { opacity: 1; transition-delay: 0.6s; }

/* ----- 05 MANUTENÇÃO: tudo a funcionar + verificação em cada rede e ✓ em cada equipamento ----- */
.esquema--js.step-5 .e-verif { opacity: 1; animation: e-impulso 2.4s ease-in-out infinite; }
.esquema--js.step-5 .e-verif:nth-child(2) { animation-delay: 0.4s; }
.esquema--js.step-5 .e-verif:nth-child(3) { animation-delay: 0.8s; }
.esquema--js.step-5 .e-check { opacity: 1; transform: scale(1); }
.esquema--js.step-5 .e-manut { opacity: 1; }
.esquema--js.step-5 .e-manut__roda { animation: e-rodar 6s linear infinite; }

/* Fora do ecrã, as animações contínuas param */
.esquema--js:not(.is-visivel) .esquema__desenho * { animation-play-state: paused !important; }

@keyframes e-scan      { 0% { opacity: 0; transform: translateY(0); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(366px); } }
@keyframes e-tracejado { to { stroke-dashoffset: -22; } }
@keyframes e-rodar     { to { transform: rotate(360deg); } }
@keyframes e-ar        { to { stroke-dashoffset: -36; } }
@keyframes e-fluxo     { to { stroke-dashoffset: -28; } }
@keyframes e-gota      { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
@keyframes e-impulso   { 0% { stroke-dashoffset: 0.1; } 100% { stroke-dashoffset: -1; } }
@keyframes e-brilho    { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

/* ==========================================================
   ETAPAS (botões), BARRA E CARTÕES — com JS
   ========================================================== */
.esquema--js .esquema__progresso {
  display: flex;
  gap: 6px 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.esquema__etapa {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--color-ink);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.esquema__etapa::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background 0.3s ease, transform 0.3s ease;
}
.esquema__etapa:hover,
.esquema__etapa.feito,
.esquema__etapa[aria-current] { opacity: 1; }
.esquema__etapa.feito::before { background: currentColor; }
.esquema__etapa[aria-current]::before { background: currentColor; transform: scale(1.2); }
.esquema__etapa[data-cor="avac"]  { --cor-passo: var(--color-avac); }
.esquema__etapa[data-cor="manut"] { --cor-passo: var(--color-manut); }
.esquema__etapa[aria-current] { color: var(--cor-passo, var(--color-ink)); }
.esquema__etapa:focus-visible,
.esquema__seta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

/* Barra fina por baixo das etapas: avança com o scroll / com o tempo de cada etapa */
.esquema--js .esquema__barra {
  display: block;
  height: 2px;
  margin: 0 0 22px;
  border-radius: 2px;
  background: var(--color-border);
  overflow: hidden;
}
.esquema__barra span {
  display: block;
  height: 100%;
  width: calc(var(--esquema-fill, 0) * 100%);
  background: var(--color-primary);
}

/* Cartões: todos na mesma "célula"; só o ativo se vê. Os outros saem para o lado. */
.esquema--js .esquema__passos { gap: 0; }
.esquema--js .esquema__passo {
  grid-area: 1 / 1;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.esquema--js .esquema__passo:not(.ativo) { opacity: 0; visibility: hidden; }
.esquema--js .esquema__passo.antes  { transform: translate(calc(var(--e-desvio-x, 0px) * -1), calc(var(--e-desvio-y, 0px) * -1)); }
.esquema--js .esquema__passo.depois { transform: translate(var(--e-desvio-x, 0px), var(--e-desvio-y, 0px)); }
.esquema--js .esquema__passo.ativo { transition-delay: 0.1s, 0.1s, 0s; }
.esquema--scroll { --e-desvio-y: 24px; }  /* computador: sobe/desce com o scroll */
.esquema--toque  { --e-desvio-x: 32px; }  /* telemóvel: desliza para o lado */

/* ==========================================================
   MODO SCROLL (computador)
   ========================================================== */
.esquema--scroll {
  height: 350vh;            /* ≈ 2,5 ecrãs de scroll enquanto o palco está fixo (5 etapas) */
  padding: 0;
}
.esquema--scroll .container { height: 100%; }
.esquema--scroll .esquema__palco {
  position: sticky;
  top: var(--esquema-topo, 74px);              /* abaixo do menu fixo */
  height: calc(100vh - var(--esquema-topo, 74px));
  height: calc(100svh - var(--esquema-topo, 74px));
  padding: 24px 0;
}

/* ==========================================================
   MODO TOQUE (telemóvel/tablet; também no computador com "reduzir movimento")
   ========================================================== */
.esquema--toque .esquema__passos { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.esquema--toque .esquema__passos.a-arrastar .esquema__passo { transition: none; }
.esquema--toque .esquema__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.esquema__seta {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #FFFDF9;
  color: var(--color-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.esquema__seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.esquema__seta:hover { border-color: var(--color-primary); color: var(--color-primary); }
.esquema__seta:disabled { opacity: 0.35; cursor: default; border-color: var(--color-border); color: var(--color-ink); }
.esquema__contador { min-width: 64px; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--color-ink-soft); }

/* ==========================================================
   TELEMÓVEL / TABLET
   ========================================================== */
@media (max-width: 900px) {
  .esquema { padding: 70px 0; }
  .esquema__palco { grid-template-columns: 1fr; gap: 32px; }
  .esquema__desenho { order: -1; }

  .esquema--js .esquema__palco { gap: 22px; }
  .esquema--js .esquema__cabecalho h2 { font-size: 1.45rem; margin-bottom: 14px; }
  .esquema--js .esquema__cabecalho .mono-label { margin-bottom: 6px; }

  /* Etapas: círculos numerados ligados por uma linha (tipo stories: vai enchendo com o tempo
     de cada etapa); o nome fica por baixo. A barra fina do computador não aparece. */
  .esquema--js .esquema__barra { display: none; }
  .esquema--js .esquema__progresso {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 4px 0 16px;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }
  .esquema--js .esquema__progresso::before,
  .esquema--js .esquema__progresso::after {
    content: "";
    position: absolute;
    top: 21px;                     /* a meio dos círculos (8px de folga + 28px / 2 − 1) */
    left: 10%;
    height: 2px;
    border-radius: 2px;
  }
  .esquema--js .esquema__progresso::before { right: 10%; background: var(--color-border); }
  .esquema--js .esquema__progresso::after { width: calc(80% * var(--esquema-fill, 0)); background: var(--color-primary); }
  .esquema--js .esquema__progresso li { position: relative; z-index: 1; min-width: 0; }
  .esquema--js .esquema__etapa {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 8px 0 4px;            /* área de toque maior que o círculo */
    opacity: 1;
    color: var(--color-ink-soft);
  }
  .esquema--js .esquema__etapa::before { display: none; }
  .esquema--js .esquema__num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.66rem;
    font-weight: 600;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .esquema--js .esquema__nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.6; transition: opacity 0.3s ease; }
  /* Feitas: círculo cheio; ativa: na cor da etapa, maior e com halo */
  .esquema--js .esquema__etapa.feito .esquema__num { background: var(--color-primary); border-color: var(--color-primary); color: #FFF6EE; }
  .esquema--js .esquema__etapa[aria-current] { color: var(--cor-passo, var(--color-primary)); }
  .esquema--js .esquema__etapa[aria-current] .esquema__num {
    background: var(--cor-passo, var(--color-primary));
    border-color: var(--cor-passo, var(--color-primary));
    color: #FFF6EE;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-passo, var(--color-primary)) 18%, transparent);
  }
  .esquema--js .esquema__etapa[aria-current] .esquema__nome,
  .esquema--js .esquema__etapa.feito .esquema__nome { opacity: 1; font-weight: 600; }
  .esquema--js .esquema__etapa:focus-visible { outline-offset: 0; }

  /* Cada passo num cartão, com o número grande em marca de água */
  .esquema--js .esquema__passo {
    position: relative;
    overflow: hidden;
    padding: 16px 18px 18px;
    background: #FFFDF9;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--cor-passo, var(--color-primary));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .esquema--js .esquema__passo:nth-child(4) { --cor-passo: var(--color-avac); }
  .esquema--js .esquema__passo:nth-child(5) { --cor-passo: var(--color-manut); }
  .esquema--js .esquema__passo::after {
    content: attr(data-num);
    position: absolute;
    top: -8px;
    right: 10px;
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--cor-passo, var(--color-primary)) 12%, transparent);
    pointer-events: none;
  }
  .esquema--js .esquema__passo > * { position: relative; z-index: 1; }
  .esquema--js .esquema__passo h3 { font-size: 1.25rem; margin-bottom: 6px; }
  .esquema--js .esquema__passo p:not(.mono-label) { font-size: 0.92rem; line-height: 1.55; }
}

/* "Reduzir movimento": mudança de estado direta, sem animações nem transições
   (o style.css já as desliga em todo o site; aqui escondem-se os impulsos que ficariam parados) */
@media (prefers-reduced-motion: reduce) {
  .esquema--js .e-scan,
  .esquema--js .e-corrente,
  .esquema--js .e-verif { display: none; }
}