/* Serviço: projeto elétrico residencial e comercial (sessão 2 da revisão de 02/11/2026).
   A cena: a planta da casa se desenha, os pontos aparecem, os circuitos saem do quadro um por um e o quadro de
   cargas vai se preenchendo; no fim, o pedido de ligação sai com o projeto e a TRT. */
.hero .cena.planta-cena{width:100%;max-width:500px;aspect-ratio:520/560;margin:0 0 0 auto}
.planta{display:block;width:100%;height:100%;overflow:visible}
.planta .folha{opacity:0;animation:aparece-folha 1s .2s var(--sai) forwards}
@keyframes aparece-folha{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.planta .folha rect{fill:#0f2533;stroke:rgba(255,255,255,.1)}
.planta .folha .grade{fill:url(#grade-folha);stroke:none}
.planta .cota{fill:none;stroke:rgba(217,232,240,.3);stroke-width:1;opacity:0;animation:aparece .6s 1.4s forwards}
.planta .cota-txt{fill:rgba(217,232,240,.42);font:500 10px var(--corpo);letter-spacing:.06em;opacity:0;animation:aparece .6s 1.5s forwards}
.planta .parede{fill:none;stroke:#d9e8f0;stroke-width:6;stroke-linecap:square;stroke-dasharray:1 2;stroke-dashoffset:1.05;animation:desenha 1.1s var(--d,.5s) var(--curva) forwards}
@keyframes desenha{to{stroke-dashoffset:0}}
.planta .porta{fill:none;stroke:rgba(217,232,240,.42);stroke-width:1.4;stroke-dasharray:1 2;stroke-dashoffset:1.05;animation:desenha .8s 1.6s var(--curva) forwards}
.planta .janela{fill:#0f2533;stroke:#d9e8f0;stroke-width:1.4;opacity:0;animation:aparece .5s 1.7s forwards}
.planta .comodo{fill:rgba(217,232,240,.5);font:600 9.5px var(--corpo);letter-spacing:.16em;opacity:0;animation:aparece .7s 1.9s forwards}
.planta .qd rect{fill:#d9e8f0}
.planta .qd path{stroke:#0f2533;stroke-width:1.6}
.planta .qd{opacity:0;animation:aparece .5s 2.1s forwards}
.planta .qd-txt{fill:#d9e8f0;font:600 9px var(--corpo);letter-spacing:.1em;opacity:0;animation:aparece .5s 2.2s forwards}
.planta .luz circle{fill:#0f2533;stroke:#d9e8f0;stroke-width:1.5}
.planta .luz path{stroke:#d9e8f0;stroke-width:1.5}
.planta .luz,.planta .tomada,.planta .tue{opacity:0;transform-box:fill-box;transform-origin:center;animation:surge .45s var(--d,2.3s) cubic-bezier(.3,1.5,.5,1) forwards}
.planta .tomada{fill:#0f2533;stroke:#d9e8f0;stroke-width:1.5}
.planta .tue{fill:none;stroke:#d9e8f0;stroke-width:1.5}
@keyframes surge{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.planta .circ path{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1.05;filter:drop-shadow(0 0 3px var(--c));animation:desenha .9s var(--d) var(--curva) forwards}
.planta .carimbo-folha{opacity:0;animation:aparece .8s 1.8s forwards}
.planta .carimbo-folha rect,.planta .carimbo-folha path{fill:none;stroke:rgba(217,232,240,.32);stroke-width:1}
.planta .carimbo-folha text{fill:rgba(217,232,240,.55);font:500 9px var(--corpo);letter-spacing:.08em}
.planta .carimbo-folha text:first-of-type{fill:#d9e8f0;font-weight:600;letter-spacing:.16em}
.quadro-cargas{position:absolute;left:-60px;bottom:-9%;width:228px;padding:14px 16px;border-radius:var(--raio);background:#fff;color:var(--texto);box-shadow:0 24px 50px -16px rgba(0,0,0,.6);font-size:.8rem;line-height:1.35;opacity:0;transform:translateY(18px);animation:aparece .8s 2.7s var(--sai) forwards}
.quadro-cargas b{display:block;font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:.95rem;color:var(--noite);padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--linha)}
.quadro-cargas ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.quadro-cargas li{display:flex;align-items:center;gap:8px;opacity:0;transform:translateX(-8px);animation:aparece .5s var(--d) var(--sai) forwards}
.quadro-cargas li i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.quadro-cargas li span{margin-left:auto;color:var(--suave);font-variant-numeric:tabular-nums}
.planta-cena .aviso-pedido{right:-26px;top:-5%;width:270px;animation-delay:6.9s}
.aviso-pedido .icone svg{stroke:var(--verde)}
/* no celular a planta fica abaixo da dobra: a cena espera aparecer na tela para começar */
.js .planta-cena:not(.anda),.js .planta-cena:not(.anda) *{animation-play-state:paused!important}
@media (max-width:980px){
  .hero .cena.planta-cena{max-width:400px;margin:52px auto 64px}
  .quadro-cargas{left:-8px;bottom:-15%;width:172px;padding:11px 12px;font-size:.7rem}
  .quadro-cargas b{font-size:.82rem;padding-bottom:7px;margin-bottom:6px}
  .quadro-cargas ul{gap:4px}
  .planta-cena .aviso-pedido{right:-8px;top:-10%;width:212px;padding:10px 12px;font-size:.78rem}
  .planta-cena .aviso-pedido .icone{width:30px;height:30px}
}

/* o que vem no pacote: o fluxo de etapas (servicos-comum.css), com o fio da planta e o selo da TRT */
.fluxo-ilustra .fio-ilustra{stroke:#8fd6f7;stroke-dasharray:3 3}
.fluxo-ilustra .selo{fill:currentColor;stroke:none;opacity:.35}

/* casa ou comércio: as duas plantas pequenas ganham os circuitos quando aparecem */
.titulo-usos{max-width:820px;margin-bottom:clamp(36px,5vw,60px)}
.dois-usos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.uso{border-radius:var(--raio-g);background:var(--branco);border:1px solid var(--linha);padding:clamp(22px,3vw,36px)}
.uso-planta{border-radius:var(--raio);background:var(--fundo);padding:clamp(14px,2vw,22px);margin-bottom:24px}
.uso-planta svg{display:block;width:100%;height:auto}
.uso-parede{fill:none;stroke:var(--noite);stroke-width:4;stroke-linejoin:round}
.uso-vitrine{stroke:#8fb0c2;stroke-width:6;stroke-linecap:round}
.uso-balcao{fill:none;stroke:#93a7b3;stroke-width:2}
.uso-split{fill:var(--branco);stroke:#6b4fd8;stroke-width:2}
.uso-qd{fill:var(--noite)}
.uso-ponto{fill:var(--branco);stroke:var(--noite);stroke-width:1.8}
.uso-luz circle{fill:var(--branco);stroke:var(--noite);stroke-width:1.6}
.uso-luz path{stroke:var(--noite);stroke-width:1.4}
.uso-rot{fill:#93a7b3;font:600 8.5px var(--corpo);letter-spacing:.16em;text-anchor:middle}
.circ-uso path{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset 1.3s var(--curva) .2s}
.circ-uso path:nth-child(2){transition-delay:.45s}
.circ-uso path:nth-child(3){transition-delay:.7s}
.circ-uso path:nth-child(4){transition-delay:.95s}
.circ-uso path:nth-child(5){transition-delay:.95s}
.circ-uso+.circ-uso path{transition-delay:1.1s}
.uso.visivel .circ-uso path,html:not(.js) .circ-uso path{stroke-dashoffset:0}
.uso h3{font-size:clamp(1.35rem,2vw,1.6rem)}
.uso p{color:var(--suave);margin:0}
@media (max-width:760px){.dois-usos{grid-template-columns:1fr}}