/* Serviço: ligação nova (sessão 2 da revisão de 02/11/2026).
   A cena: a casa nova ao entardecer, ainda apagada. O pedido sai, a vistoria confere o padrão, o fio da rua
   chega ao poste do padrão e a casa acende. */
.hero .cena.rua-cena{width:100%;max-width:540px;aspect-ratio:560/470;margin:0 0 0 auto}
.rua{display:block;width:100%;height:100%;overflow:visible}
.rua .cenario{opacity:0;animation:aparece-rua 1.2s .2s var(--sai) forwards}
@keyframes aparece-rua{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.rua .entardecer{opacity:0;animation:aparece 2s .6s forwards}
.capa-ligacao h1{font-size:clamp(2.2rem,4.2vw,3.25rem)}
.rua .longe{fill:#0f2230}
.rua .arvore{fill:#12303f}
.rua .chao{fill:#0d1f2a}
.rua .calcada{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.5}
.rua .poste-corpo{fill:#2b4a5c}
.rua .cruzeta,.rua .armacao{fill:#36576b}
.rua .isolador{fill:#8fb0c2}
.rua .rede{fill:none;stroke:#36576b;stroke-width:1.6}
.rua .rede.baixa{stroke:#2f4e61}
.rua .telhado{fill:#24465a}
.rua .parede-casa{fill:#1c3748}
.rua .porta-casa{fill:#13293a}
.rua .janela-casa{fill:#0f2431;animation:acende .7s var(--l) var(--curva) forwards}
.rua .caixilho-casa{stroke:rgba(0,0,0,.25);stroke-width:2}
.rua .luz-varanda{fill:#3a5466;animation:acende-varanda .5s 4.6s forwards}
.rua .brilho-janela{opacity:0;animation:aparece 1.2s var(--l) forwards}
@keyframes acende{to{fill:#e3a44a}}
@keyframes acende-varanda{to{fill:#ffd98a;filter:drop-shadow(0 0 6px #ffd98a)}}
.rua .pontalete{fill:#8fa1ab}
.rua .mureta{fill:#9fb3bf}
.rua .caixa-medidor{fill:#e7ecef}
.rua .visor{fill:#0f2431;animation:liga-visor .5s 4.2s forwards}
@keyframes liga-visor{to{fill:#7ee0a8;filter:drop-shadow(0 0 4px #7ee0a8)}}
.rua .marca-padrao{fill:none;stroke:#8fd6f7;stroke-width:2;stroke-dasharray:7 5;opacity:0;animation:marca-vistoria 1.6s 2.2s forwards,anda-marca 1.2s linear 2.2s 2}
@keyframes marca-vistoria{0%{opacity:0}20%,75%{opacity:1}100%{opacity:0}}
@keyframes anda-marca{to{stroke-dashoffset:-24}}
.rua .ramal-fundo{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2;stroke-dasharray:4 6;opacity:0;animation:aparece .6s 1.2s forwards}
.rua .ramal{fill:none;stroke:#ffd98a;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1.05;filter:drop-shadow(0 0 4px rgba(255,217,138,.8));animation:liga-ramal 1s 3.2s var(--curva) forwards}
@keyframes liga-ramal{to{stroke-dashoffset:0}}
.rua-cena .aviso-protocolo{right:-24px;top:2%;width:282px;animation-delay:1s}
.acompanha{position:absolute;left:-60px;bottom:-9%;width:212px;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 1.4s var(--sai) forwards}
.acompanha 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)}
.acompanha ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.acompanha li{display:flex;align-items:center;gap:8px;color:#93a7b3;animation:etapa-feita .4s var(--d) forwards}
.acompanha li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #cfd8dd;box-sizing:border-box;background:#fff;transition:none;animation:marca-feita .4s var(--d) forwards}
@keyframes etapa-feita{to{color:var(--texto)}}
@keyframes marca-feita{to{border-color:#d6f5e3;background:#d6f5e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7F4B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat}}
/* no celular a cena fica abaixo da dobra: espera aparecer na tela para começar */
.js .rua-cena:not(.anda),.js .rua-cena:not(.anda) *{animation-play-state:paused!important}
@media (max-width:980px){
  .hero .cena.rua-cena{max-width:440px;margin:56px auto 56px}
  .rua-cena .aviso-protocolo{right:-8px;top:-13%;width:236px;padding:10px 12px;font-size:.78rem}
  .rua-cena .aviso-protocolo .icone{width:30px;height:30px}
  .acompanha{left:-8px;bottom:-17%;width:170px;padding:11px 12px;font-size:.72rem}
  .acompanha b{font-size:.82rem;padding-bottom:7px;margin-bottom:6px}
  .acompanha ul{gap:5px}
}

/* o que a concessionária olha: a foto do padrão com os pontos numerados, ligados à lista */
.padrao-grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,96px);align-items:center}
.padrao-foto{position:relative;margin:0;border-radius:var(--raio-g);overflow:hidden;background:var(--linha);aspect-ratio:3/4}
.padrao-foto img{width:100%;height:100%;object-fit:cover}
.ponto-foto{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;background:var(--noite);color:#fff;font:600 .82rem/1 var(--corpo);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.7);transition:transform .35s var(--sai),background .3s}
.ponto-foto::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,255,255,.75);opacity:0;animation:pulsa-ponto 2.4s infinite}
.ponto-foto:nth-of-type(2)::after{animation-delay:.6s}.ponto-foto:nth-of-type(3)::after{animation-delay:1.2s}.ponto-foto:nth-of-type(4)::after{animation-delay:1.8s}
@keyframes pulsa-ponto{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.25)}}
.ponto-foto.ativo{background:#fff;color:var(--noite);transform:scale(1.15)}
.pontos-lista{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--linha)}
.pontos-lista li{position:relative;padding:18px 0 18px 52px;border-bottom:1px solid var(--linha);cursor:default;transition:background .3s}
.pontos-lista li::before{content:attr(data-ponto);position:absolute;left:0;top:18px;width:32px;height:32px;border-radius:50%;border:1px solid var(--linha);display:grid;place-items:center;font:600 .85rem/1 var(--corpo);color:var(--suave);transition:background .3s,color .3s,border-color .3s}
.pontos-lista li.ativo::before{background:var(--noite);border-color:var(--noite);color:#fff}
.pontos-lista h3{font-size:1.12rem;margin-bottom:.3em}
.pontos-lista p{margin:0;color:var(--suave);font-size:1rem}
.nota-reprova{margin:22px 0 0;font-size:.95rem;color:var(--suave)}
@media (max-width:900px){.padrao-grade{grid-template-columns:1fr}.padrao-foto{max-width:460px;width:100%;margin:0 auto}}