/* ===========================================================================
   cena-residencial.css — "Como a água circula no seu lar" (projetos-pequenos)
   ---------------------------------------------------------------------------
   REESCRITA 17/07/2026 (#7 do board): a seção virou UM diagrama só, fundindo a
   antiga "cena" (2 trilhos) com "As soluções" (corte do lote). Agora é o cenário
   do PDF — casa no centro, setas do ciclo, toggle entre cenário 1 e 2 e card do
   produto no hover.

   Por que o diagrama inteiro é SVG (nós E setas no MESMO viewBox):
     · as setas casam exatamente com os nós em qualquer escala. Com nós em HTML +
       overlay SVG, qualquer resize desalinha ponta de seta com card.
     · o popover mede por getBoundingClientRect, que funciona igual num <g>.

   🔴 Contrato com js/cena-residencial.js — NÃO renomear:
     [data-cena] > .cena-toggle button[data-scene] + .cena-scene[data-scene]
     + .cena-st.tech[data-tech]
   🔴 A troca de cena usa ATRIBUTO `hidden` (o JS faz set/removeAttribute).
     `.hidden` como propriedade NÃO funciona em SVG — ver comentário no JS.
   =========================================================================== */

.cena{margin-top:36px}

/* ---- toggle: diz O QUE ele troca -------------------------------------------- */
.cena-switch{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px}
.cena-switch-lb{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);text-align:center}
.cena-toggle{display:inline-flex;background:#EAF2EC;border-radius:100px;padding:5px;gap:4px;
  max-width:100%;flex-wrap:wrap;justify-content:center}
.cena-toggle button{border:0;background:transparent;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:13.5px;color:var(--verde);padding:10px 22px;border-radius:100px;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.cena-toggle button:hover{color:var(--lima-ink)}
.cena-toggle button.active{background:#fff;box-shadow:0 6px 18px -8px rgba(8,42,30,.35);color:var(--azul)}
.cena-toggle button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* ---- palco ------------------------------------------------------------------ */
.cena-stage{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(8,42,30,.08);
  background:linear-gradient(180deg,#EAF4FF 0%,#F6FBF7 56%,#F1EAD9 100%)}
.cena-scroll{overflow-x:auto}
/* min-width evita o diagrama virar ilegível no celular: rola na horizontal */
.cena-diagram{display:block;width:100%;min-width:760px;height:auto}

/* ---- nós -------------------------------------------------------------------- */
.cn-node rect{fill:#fff;stroke:rgba(8,42,30,.14);stroke-width:1.5;rx:14}
.cn-node.agua rect{stroke:rgba(0,113,227,.30)}
.cn-node.esg  rect{stroke:rgba(114,159,40,.32)}
.cn-label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;fill:var(--verde)}
.cn-label.sm{font-size:13px}
.cn-sub{font-family:'Poppins',sans-serif;font-weight:300;font-size:11.5px;fill:var(--muted)}
.cn-ic{font-size:22px}

/* estação de PRODUTO: é a única clicável — e parece clicável */
.cena-st.tech{cursor:pointer}
.cena-st.tech rect{stroke-width:2.5}
.cena-st.tech.agua rect{stroke:var(--azul)}
.cena-st.tech.esg  rect{stroke:var(--lima)}
.cena-st.tech:hover rect,
.cena-st.tech:focus-visible rect{filter:drop-shadow(0 10px 18px rgba(8,42,30,.28))}
.cena-st.tech:focus-visible{outline:none}
.cena-st.tech:focus-visible rect{stroke:var(--verde);stroke-width:3}
.cn-tagbg.agua{fill:var(--azul)}
.cn-tagbg.esg{fill:var(--lima-ink)}
.cn-tag{font-family:'Montserrat',sans-serif;font-weight:800;font-size:9px;letter-spacing:.5px;
  text-transform:uppercase;fill:#fff}
.cn-more{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px}
.cn-more.agua{fill:var(--azul)}
.cn-more.esg{fill:var(--lima-ink)}

/* ---- setas ------------------------------------------------------------------ */
.cn-flow{fill:none;stroke-width:2.4}
.cn-flow.agua{stroke:var(--azul)}
.cn-flow.esg{stroke:var(--lima-ink)}
.cn-flow.dash{stroke-dasharray:6 6;opacity:.75;stroke-width:2}
.cn-flab{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase}
.cn-flab.agua{fill:var(--azul)}
.cn-flab.esg{fill:var(--lima-ink)}
.cn-flab-bg{fill:#F6FBF7;opacity:.92}

/* ---- casa ------------------------------------------------------------------- */
.cn-body{fill:#fff;stroke:var(--verde);stroke-width:2}
.cn-roof{fill:var(--verde)}
.cn-win{fill:var(--pale)}
.cn-houselb{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;fill:var(--verde)}

/* ---- troca de cenário -------------------------------------------------------- */
.cena-scene[hidden]{display:none}
.cena-scene.cena-in{animation:cenaIn .42s var(--ease) backwards}
@keyframes cenaIn{from{opacity:0}to{opacity:1}}

/* ---- pontos de consumo (card COPY do board) ---------------------------------- */
.cena-consumo{margin-top:26px}
.cena-consumo-h{text-align:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--lima-ink);margin-bottom:16px}
.cena-consumo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cena-cchip{display:inline-flex;align-items:center;gap:9px;background:rgba(114,159,40,.10);
  border:1px solid rgba(114,159,40,.24);border-radius:100px;padding:10px 18px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--lima-ink)}
.cena-cchip i{font-size:14px;color:var(--lima)}

/* ---- popover ----------------------------------------------------------------- */
.cena-pop{position:fixed;z-index:60;max-width:300px;background:#fff;border:1px solid rgba(8,42,30,.12);
  border-radius:16px;box-shadow:0 24px 60px -20px rgba(8,42,30,.5);padding:18px;opacity:0;transform:translateY(8px);
  pointer-events:none;transition:opacity .25s,transform .25s}
.cena-pop.on{opacity:1;transform:none;pointer-events:auto}
.cena-pop h4{font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:var(--verde);margin-bottom:6px}
.cena-pop p{font-family:'Poppins',sans-serif;font-size:12.5px;line-height:1.55;color:#556;margin-bottom:12px}
.cena-pop a{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:12.5px;color:#fff;background:var(--azul);padding:8px 14px;border-radius:100px;text-decoration:none}
.cena-pop.esg a{background:var(--lima-ink)}

.cena-hint{text-align:center;font-size:12px;color:#8aa;margin-top:16px}
.cena-hint i{color:var(--azul)}
.cena-hint-touch{display:none}

@media(max-width:860px){
  .cena-hint-hover{display:none}
  .cena-hint-touch{display:inline}
}
@media(max-width:560px){
  .cena-toggle button{padding:9px 15px;font-size:12.5px}
  .cena-cchip{font-size:12.5px;padding:9px 14px}
}
@media(prefers-reduced-motion:reduce){
  .cena-scene.cena-in{animation:none}
  .cena-pop{transition:none}
  .cena-st.tech:hover rect{filter:none}
}