/* ============================================================
   Blocos portados da apresentação do Closer para o site.
   Carregado depois do site.css, que define as variáveis.
   ============================================================ */

/* ---------- cena presa: mandala + palco ---------- */
#mandala-arco{filter:drop-shadow(0 0 3px rgba(225,112,9,.6))}
.no{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(130% 130% at 50% 24%,var(--superficie-escura),#000 72%);border:1px solid rgba(225,112,9,.3);cursor:pointer;display:grid;place-items:center;padding:3px;color:var(--palha);font-family:var(--f-titulo);font-weight:700;font-size:.52rem;line-height:1.05;text-align:center;transition:transform .4s var(--curva-pop),box-shadow .4s,border-color .4s,color .4s}
.no.grande{width:78px;height:78px;border-color:rgba(225,112,9,.5);box-shadow:0 0 22px -4px rgba(225,112,9,.34)}
.no.pequeno{width:16px;height:16px}
.no.pequeno::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja);box-shadow:0 0 10px 2px rgba(225,112,9,.6)}
.no:hover{border-color:var(--laranja)}
.no.aceso{border-color:var(--laranja);background:radial-gradient(130% 130% at 50% 24%,var(--marrom),var(--superficie-escura-2) 74%);box-shadow:0 0 30px -2px rgba(225,112,9,.7);transform:translate(-50%,-50%) scale(1.14);color:#fff;z-index:3}
.no.pequeno.aceso{transform:translate(-50%,-50%) scale(1.6)}
.no.pequeno.aceso::after{background:var(--amarelo);box-shadow:0 0 12px 3px rgba(225,112,9,.85)}
@media (max-width:900px){
  .no.grande{width:52px;height:52px;font-size:.44rem}
}

/* ---------- mapa 3D ---------- */
.mapa{width:100%;aspect-ratio:1/.9;position:relative}
.mapa canvas{display:block}
.mapa-legenda{font-family:var(--f-titulo);font-weight:400;font-size:.84rem;color:var(--texto-2);text-align:center;margin-top:8px}
.escura .mapa-legenda{color:var(--no-escuro-3)}

/* ---------- monte seu dossiê ---------- */
@media (max-width:900px){.dossie{grid-template-columns:1fr}}

/* ---------- comparativo ---------- */
.comparativo{margin-top:34px}
.comparativo .cabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.comparativo .cabs span{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;padding:12px 16px;border-radius:var(--raio);background:var(--palha);color:var(--texto-2)}
.comparativo .cabs .vence{background:var(--degrade);color:#000}
.comparativo .colunas{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.comparativo ul{list-style:none;display:grid;gap:12px}
.comparativo li{display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border-radius:var(--raio);border:1px solid var(--linha);font-size:.95rem;line-height:1.42;background:var(--cartao);color:var(--texto-apagado)}
.comparativo li.boa{background:var(--palha-clara);border-color:var(--palha-borda);color:var(--texto)}
.comparativo li svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke:var(--no-escuro-3)}
.comparativo li.boa svg{stroke:var(--laranja)}
.comparativo .traco{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s ease}
.comparativo .traco.feito{stroke-dashoffset:0}
.comparativo .conta-final{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;color:var(--texto-2);margin-top:10px}
.comparativo .conta-final b{font-weight:900;color:var(--texto-laranja)}
@media (max-width:820px){.comparativo .cabs,.comparativo .colunas{grid-template-columns:1fr}}

/* ---------- régua da promessa ---------- */
.regua{margin-top:32px;display:grid;gap:22px;max-width:760px}
.regua .item .topo-linha{display:flex;justify-content:space-between;gap:14px;font-family:var(--f-titulo);font-weight:700;font-size:.92rem;margin-bottom:8px}
.regua .item .topo-linha span:last-child{color:var(--texto-laranja)}
.escura .regua .item .topo-linha{color:var(--no-escuro-2)}
.escura .regua .item .topo-linha span:last-child{color:var(--amarelo)}
.barra{height:12px;border-radius:99px;background:var(--palha);overflow:hidden}
.escura .barra{background:rgba(255,255,255,.08)}
.barra-fill{height:100%;width:100%;border-radius:99px;background:var(--degrade);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--curva)}
.regua .obs{font-size:.86rem;color:var(--texto-3);margin-top:6px}
.escura .regua .obs{color:var(--no-escuro-3)}

/* ---------- fechamento com logo que se aproxima ---------- */
.fechamento{min-height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fechamento .zoom-caixa{height:clamp(96px,14vw,150px);display:grid;place-items:center}
.fechamento img{width:clamp(90px,13vw,150px);will-change:transform,opacity,filter}
.fechamento h2{margin:30px auto 14px;max-width:16ch;font-weight:200;font-size:clamp(1.9rem,5vw,3.4rem)}
.fechamento h2 b{font-weight:900}
.fechamento p{color:var(--texto-2);max-width:42ch;margin:0 auto 26px}

/* ---------- modal de atendimento ---------- */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-fundo{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.modal-caixa{position:relative;z-index:2;width:min(560px,100%);max-height:92vh;overflow-y:auto;background:var(--preto);color:var(--no-escuro-2);border:1px solid var(--linha-escuro);border-radius:var(--raio-cartao);padding:clamp(22px,3.5vw,34px);box-shadow:0 40px 100px -40px #000}
.modal-caixa h2{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem);max-width:18ch}
.modal-caixa .lead{color:var(--no-escuro-3);font-size:.96rem;margin-top:10px}
.fechar{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--linha-escuro);background:rgba(255,255,255,.05);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.fechar:hover{border-color:var(--laranja);color:var(--amarelo)}