/* =============================================================================
 *  CENA ISOMÉTRICA — imagem estática + tubulações interativas em SVG
 *  (item D do handoff; Sérgio/Henrique 28/07/2026)
 * =============================================================================
 *  A cena é um RENDER, não WebGL em runtime: a página já carrega canvas 3D nas
 *  páginas de produto, e empilhar mais um custa caro para um infográfico que não
 *  precisa girar. O que precisa de interação — acender uma tubulação por vez —
 *  é feito por um SVG sobreposto, traçando os MESMOS pontos que o render usou
 *  (projetados no palco, não estimados em % aqui).
 * ========================================================================== */

/* LADO A LADO — Sérgio 28/07: "o 3d está em cima e as partes de leitura embaixo,
   quem clica em cima não vê embaixo". Cena à ESQUERDA, leitura à DIREITA: o
   marcador clicado e a descrição ficam no mesmo campo de visão. Grid por áreas,
   sem tocar no HTML das páginas; abaixo de 940px volta a empilhar. */
.ciso{position:relative;margin:0;max-width:1180px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  grid-template-areas:"palco etapas" "palco linhas" "palco desc" "palco .";
  gap:6px 40px;align-items:start}
.ciso-palco{grid-area:palco;align-self:center}
/* ⚠ o display:grid acima VENCE o atributo hidden (display tem prioridade sobre
   o UA stylesheet) — sem esta regra, as duas variantes da residencial apareceriam
   empilhadas. */
.ciso[hidden]{display:none}
.ciso-leg-etapas{grid-area:etapas}
.ciso-leg{grid-area:linhas}
.ciso-desc{grid-area:desc}
@media(max-width:940px){
  .ciso{display:block}
}

/* ⚠ aspect-ratio REAL da arte (1200×750 = 1.6). Sem ele, o SVG e a imagem
   escalam por caminhos diferentes e as linhas descolam dos tubos assim que a
   largura muda — o defeito clássico de hotspot sobre imagem. */
.ciso-palco{position:relative;aspect-ratio:1200/750;width:100%}
.ciso-palco img{display:block;width:100%;height:100%;object-fit:contain}
.ciso-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* ── ZOOM NO PONTO ────────────────────────────────────────────────────────
 * Clicar num marcador aproxima AQUELE ponto. Sem canvas: a imagem e o SVG
 * recebem o MESMO `transform`, publicado pelo JS numa variável no palco. Como
 * os dois já vivem no mesmo espaço de coordenadas (a arte 1200×750 e o viewBox
 * do SVG), transformar os dois com a mesma matriz mantém as linhas coladas nos
 * tubos de graça — não há segunda projeção para errar.
 *
 * `transform-origin:0 0` não é detalhe: a fórmula do JS
 *   translate(50%,50%) scale(z) translate(-cx%,-cy%)
 * só leva o ponto (cx,cy) ao centro se o escalonamento acontecer a partir do
 * canto. Com o `center` padrão, o alvo escorrega quanto mais longe do meio.
 *
 * O overflow:hidden é o que faz o palco virar janela — sem ele a arte ampliada
 * vaza por cima da coluna de leitura. */
.ciso-palco{overflow:hidden}

/* ── @property: o que conserta o pino que INCHA no meio do voo ─────────────
 * Antes, o palco animava `scale(z)` e o marcador animava `scale(1/z)` como
 * DUAS transições independentes. No meio do caminho o produto das duas vale
 * (2 + z + 1/z)/4 — para z=2.8 isso dá 1.289, e o pino crescia 29% e voltava
 * a cada clique. Medido, não suposto.
 * Nenhum easing resolve: enquanto forem duas interpolações separadas, o
 * produto nunca é 1. A correção é registrar --ciso-z como NÚMERO animável e
 * fazer palco e pino derivarem do MESMO valor interpolado — aí o produto é
 * exatamente 1 em todo instante do voo.
 * Sem suporte a @property (navegador antigo) a variável salta em vez de
 * interpolar: o zoom acontece igual, só perde a suavidade. Degrada, não quebra. */
@property --ciso-z  { syntax:'<number>'; inherits:true; initial-value:1 }
@property --ciso-cx { syntax:'<number>'; inherits:true; initial-value:50 }
@property --ciso-cy { syntax:'<number>'; inherits:true; initial-value:50 }

.ciso-palco{
  --ciso-z:1; --ciso-cx:50; --ciso-cy:50;
  transition:--ciso-z .62s cubic-bezier(.22,.61,.36,1),
             --ciso-cx .62s cubic-bezier(.22,.61,.36,1),
             --ciso-cy .62s cubic-bezier(.22,.61,.36,1)}
/* o transform é DERIVADO das variáveis — não é mais interpolado por conta
   própria, então não há segunda linha do tempo para sair de sincronia */
.ciso-palco img,.ciso-svg{transform-origin:0 0;
  transform:translate(50%,50%) scale(var(--ciso-z))
            translate(calc(var(--ciso-cx) * -1%), calc(var(--ciso-cy) * -1%))}

/* ⚠ a CONTRA-ESCALA do traço e do marcador não mora aqui — mora depois das
   regras de `.ciso-p` / `.ciso-mk`, lá embaixo. Escrita aqui ela perdia para o
   `stroke-width:9` original: mesma especificidade, vence a última. */

/* botão de sair: só existe quando há zoom. Fica no canto do palco porque é ali
   que o dedo está — mandar o usuário procurar o botão que ele clicou na coluna
   de leitura seria pedir para ele desfazer no lugar errado. */
.ciso-zoomout{position:absolute;z-index:3;top:12px;right:12px;display:none;
  align-items:center;gap:7px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;
  color:var(--verde,#0B3D2C);background:rgba(255,255,255,.94);
  border:1px solid var(--pale,#DDE7DA);border-radius:999px;padding:8px 14px;
  box-shadow:0 10px 24px -14px rgba(11,61,44,.55)}
.ciso-palco.zoom .ciso-zoomout{display:inline-flex}
.ciso-zoomout:hover{border-color:var(--lima-ink,#729F28)}
.ciso-zoomout:focus-visible{outline:2px solid var(--lima,#A9CF5B);outline-offset:3px}
.ciso-palco.zoom{cursor:zoom-out}

/* ── REPOUSO VIVO ─────────────────────────────────────────────────────────
 * Antes as linhas nasciam com `opacity:0`: em repouso a peça era uma foto
 * parada que não contava que havia o que explorar — quem não passasse o mouse
 * por cima nunca descobria a interação. Agora elas ficam presentes e
 * discretas, com a água correndo devagar. O convite é o próprio conteúdo.
 * A hierarquia se inverte no clique: a escolhida vai a cheio, as outras
 * recuam — em vez de "nada → tudo", é "todas baixinho → uma alto". */
.ciso-p{fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-width:9;opacity:.42;
  transition:opacity .34s var(--ease,ease),stroke-width .62s cubic-bezier(.22,.61,.36,1)}
.ciso-halo{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
  stroke-width:17;opacity:.30;
  transition:opacity .34s var(--ease,ease),stroke-width .62s cubic-bezier(.22,.61,.36,1)}

/* água correndo SEMPRE: em repouso devagar (só sinaliza que é um caminho de
   água), e acelera quando a linha é a escolhida — a mudança de ritmo é o que
   confirma "é esta que você pediu" sem precisar de mais nenhum elemento */
.ciso-p{stroke-dasharray:26 18;animation:cisoFluxo 3.4s linear infinite}
.ciso-g.on .ciso-p{animation-duration:1.1s}
@keyframes cisoFluxo{to{stroke-dashoffset:-44}}

.ciso.ativa .ciso-g.on .ciso-p{opacity:1}
.ciso.ativa .ciso-g.on .ciso-halo{opacity:1}
/* as não escolhidas recuam, mas não somem: o mapa continua legível */
.ciso.ativa .ciso-g:not(.on) .ciso-p{opacity:.14}
.ciso.ativa .ciso-g:not(.on) .ciso-halo{opacity:.10}

/* quando UMA linha está acesa, a arte recua para ela ganhar leitura */
.ciso.ativa .ciso-palco img{filter:saturate(.55) brightness(1.06)}

/* ── MARCADORES DE ETAPA (o passo a passo do produto) ─────────────────────
   Sempre visíveis — são o conteúdo, não um segredo de hover. Com um ativo, os
   demais ficam opacos (reunião 27/07, A12: selecionado colorido / não-selecionado
   opaco). pointer-events por marcador: o SVG é pointer-events:none. */
.ciso-mk{pointer-events:auto;cursor:pointer}
.ciso-mk-halo{fill:rgba(169,207,91,.28);transition:r .25s var(--ease,ease),fill .25s var(--ease,ease)}
.ciso-mk-c{fill:var(--verde,#0B3D2C);stroke:#fff;stroke-width:2.5;
  transition:fill .25s var(--ease,ease)}

/* ── ENTRADA COREOGRAFADA ─────────────────────────────────────────────────
 * `.is-live` é posta pelo JS quando a seção entra em cena. Os pinos sobem em
 * sequência, na ordem do passo a passo — o movimento ENSINA a ordem de leitura
 * antes de qualquer texto ser lido. Escalonamento por --i, publicado no JS.
 * Só ao ENTRAR: repetir a cada rolagem viraria enjoo.
 * ⚠ a classe libera a animação; sem JS os pinos ficam visíveis e estáticos
 * (nunca começar com opacity:0 sem garantir quem tira — o site já pagou por
 * isso na `stepper.js`). */
.ciso.is-live .ciso-mk{animation:cisoPino .52s cubic-bezier(.34,1.32,.64,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes cisoPino{
  from{opacity:0;transform:scale(calc(.35 / var(--ciso-z,1)))}
  to  {opacity:1;transform:scale(calc(1 / var(--ciso-z,1)))}}

/* pulso de atenção no pino escolhido: um anel que sai dele e some. Diz "é este"
   sem mover o pino de lugar (mover o alvo debaixo do dedo é o pecado). */
.ciso-mk.on .ciso-mk-halo{animation:cisoPulso 1.9s ease-out infinite}
@keyframes cisoPulso{
  0%  {r:24;opacity:.55}
  70% {r:40;opacity:0}
  100%{r:40;opacity:0}}
.ciso-mk-n{fill:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;
  pointer-events:none;user-select:none}
.ciso.ativa .ciso-mk:not(.on){opacity:.35}
.ciso-mk{transition:opacity .25s var(--ease,ease)}
.ciso-mk.on .ciso-mk-c{fill:var(--lima-ink,#729F28)}
.ciso-mk.on .ciso-mk-halo{fill:rgba(169,207,91,.5)}

/* ── CONTRA-ESCALA (parte 2 do zoom) ──────────────────────────────────────
 * Traço e marcador NÃO podem engordar junto com a arte: a linha existe para
 * apontar o tubo, não para virar mangueira, e o marcador é um pino de mapa —
 * pino de mapa não cresce quando o mapa aproxima.
 * Tem que vir DEPOIS de `.ciso-p{stroke-width:9}` e de `.ciso-mk{transition}`:
 * mesma especificidade, quem fala por último manda. Aqueles valores fixos
 * continuam sendo o fallback de quem não entende calc()+var() — não apagar.
 * `9px` em stroke-width vale 9 unidades do viewBox, então a conta fecha. */
/* Agora que --ciso-z é um número ANIMADO (via @property), a contra-escala
   acompanha o palco quadro a quadro e NÃO precisa mais de transição própria —
   era justamente a transição própria que criava a segunda linha do tempo e
   fazia traço e pino engordarem no meio do voo. */
.ciso-p{stroke-width:calc(9px / var(--ciso-z,1))}
.ciso-halo{stroke-width:calc(17px / var(--ciso-z,1))}
/* `transform-box:fill-box` faz o origin `center` significar o centro do próprio
   marcador (a bbox do <g>) e não a origem do viewBox — sem ele o pino encolhe
   em direção ao canto da arte. */
.ciso-mk{transform:scale(calc(1 / var(--ciso-z,1)));
  transform-box:fill-box;transform-origin:center;
  transition:opacity .25s var(--ease,ease)}

/* legenda das etapas: coluna vertical na lateral — é uma LISTA de passos, e
   lista se lê de cima pra baixo. O rótulo do grupo sai do ::before (sem HTML). */
.ciso-leg-etapas{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px}
.ciso-leg-etapas::before{content:"Passo a passo";display:block;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#7C9A6B;margin-bottom:4px}
.ciso-leg-etapas button{display:flex;width:100%;align-items:center;gap:10px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;text-align:left;
  color:var(--verde,#0B3D2C);background:#fff;border:1px solid var(--pale,#DDE7DA);
  border-radius:12px;padding:9px 14px 9px 9px;
  transition:border-color .25s var(--ease,ease),box-shadow .25s var(--ease,ease),transform .25s var(--ease,ease)}
.ciso-leg-etapas button i{font-style:normal;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--verde,#0B3D2C);color:#fff;
  font-size:11.5px;font-weight:800}
.ciso-leg-etapas button:hover,.ciso-leg-etapas button[aria-pressed="true"]{
  border-color:var(--lima-ink,#729F28);box-shadow:0 10px 22px -14px rgba(11,61,44,.5);
  transform:translateY(-2px)}
.ciso-leg-etapas button[aria-pressed="true"] i{background:var(--lima-ink,#729F28)}
.ciso-leg-etapas button:focus-visible{outline:2px solid var(--lima,#A9CF5B);outline-offset:3px}

/* ── legenda das tubulações: grupo secundário, abaixo do passo a passo ───── */
.ciso-leg{list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.ciso-leg::before{content:"Caminhos no terreno";display:block;width:100%;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#7C9A6B;margin-bottom:2px}
.ciso-leg button{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
  color:var(--verde,#0B3D2C);background:#fff;border:1px solid var(--pale,#DDE7DA);
  border-radius:999px;padding:9px 16px;
  transition:border-color .25s var(--ease,ease),box-shadow .25s var(--ease,ease),transform .25s var(--ease,ease)}
.ciso-leg button::before{content:"";width:11px;height:11px;border-radius:50%;
  background:var(--c);flex:none}
.ciso-leg button:hover,.ciso-leg button[aria-pressed="true"]{
  border-color:var(--c);box-shadow:0 10px 22px -14px rgba(11,61,44,.5);transform:translateY(-2px)}
.ciso-leg button:focus-visible{outline:2px solid var(--lima,#A9CF5B);outline-offset:3px}

/* descrição da linha/etapa ativa — na coluna de leitura, colada nas legendas.
   Altura reservada: sem isso o texto entrando e saindo empurra a coluna a cada
   hover. Cartão sutil para o olho saber onde a resposta aparece. */
.ciso-desc{margin:18px 0 0;min-height:6.2em;text-align:left;
  background:#fff;border:1px solid var(--pale,#DDE7DA);border-left:4px solid var(--lima,#A9CF5B);
  border-radius:0 12px 12px 0;padding:14px 16px;
  font-family:'Poppins',sans-serif;font-size:14px;line-height:1.6;color:var(--muted,#5a7568)}
.ciso-desc:empty{visibility:hidden}
.ciso-desc b{color:var(--verde,#0B3D2C);font-family:'Montserrat',sans-serif}
.ciso-desc-lk{display:inline-flex;align-items:center;gap:6px;margin-left:8px;white-space:nowrap;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;color:var(--lima-ink,#729F28);
  text-decoration:none}
.ciso-desc-lk:hover{text-decoration:underline}

/* ── toggle de variantes (residencial): mesmo conteúdo do diagrama antigo ── */
.ciso-vars-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;
  margin:0 0 26px}
.ciso-vars-lb{font-family:'Poppins',sans-serif;font-size:13.5px;color:var(--muted,#5a7568)}
.ciso-vars-nav button{cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:13px;color:var(--verde,#0B3D2C);background:#fff;border:1px solid var(--pale,#DDE7DA);
  border-radius:999px;padding:9px 18px;
  transition:background .25s var(--ease,ease),color .25s var(--ease,ease),border-color .25s var(--ease,ease)}
.ciso-vars-nav button.active{background:var(--verde,#0B3D2C);border-color:var(--verde,#0B3D2C);color:#fff}
.ciso-vars-nav button:focus-visible{outline:2px solid var(--lima,#A9CF5B);outline-offset:3px}
@media(max-width:940px){
  .ciso-leg-etapas{margin-top:20px}
  .ciso-desc{min-height:5em}
}

@media(max-width:700px){
  .ciso-leg button{font-size:12px;padding:8px 13px}
  .ciso-desc{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  /* Honesto de verdade: TODA animação em laço morre — fluxo, pulso e entrada.
     Antes só o fluxo da linha ativa era desligado, e o repouso vivo teria
     deixado a água correndo eternamente para quem pediu para não ter
     movimento. Quem marca essa preferência costuma ter motivo clínico. */
  .ciso-p,.ciso-mk,.ciso-mk-halo,.ciso.is-live .ciso-mk{animation:none!important}
  .ciso-p,.ciso-halo,.ciso-leg button,.ciso-leg-etapas button{transition:none}
  /* o zoom continua acontecendo (é conteúdo: mostra o ponto), só deixa de ser
     um voo — corta direto para o enquadramento. Zerar a transição das
     variáveis é o que faz o corte ser seco agora que o transform deriva delas. */
  .ciso-palco{transition:none}
  .ciso-palco img,.ciso-svg,.ciso-mk{transition:none}
}