/* UNE Energia · as dobras 2 a 9. O topo está em lp.css.
   A régua comum: cada dobra é uma .sec com o seu fundo (noite, papel, amarelo); o .fio na margem acende com a rolagem e costura as dobras;
   o .revela entra uma vez ao chegar à tela (sem JS, tudo já aparece: o esconder só vale com html.js). */
:root{
  --papel:#f5f1e8; --papel-2:#ece5d6; --tinta:#0a1c2b; --tinta-2:#3f5466; --tinta-3:#6b7f90; --linha-papel:rgb(10 28 43 / .12);
  --n1:#02111e; --n2:#05192b; --gutter:clamp(20px,4vw,56px);
}
.sec{position:relative;isolation:isolate;padding:clamp(88px,11vw,150px) var(--gutter);overflow:hidden}
.sec--noite{background:var(--n1);color:var(--t1)}
.sec--papel{background:var(--papel);color:var(--tinta)}
.sobre{font:700 13px/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--sol);display:inline-flex;align-items:center;gap:10px}
.sobre::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.sec--papel .sobre{color:#b07d00}
.sec h2{margin-top:18px;font-family:var(--manchete);font-weight:var(--m-peso);font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:var(--m-esp);text-wrap:balance}
.sec h2 span{color:var(--t3)}
.sec--papel h2 span{color:var(--tinta-3)}

/* o fio de energia: a margem esquerda, de dobra em dobra */
.fio{position:absolute;left:calc(var(--gutter) * .42);top:0;bottom:0;width:2px;z-index:0;pointer-events:none}
.fio::before{content:"";position:absolute;inset:0;background:rgb(255 255 255 / .06);border-radius:2px}
.sec--papel .fio::before{background:var(--linha-papel)}
.fio i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,var(--folha),var(--sol));border-radius:2px;box-shadow:0 0 12px rgb(255 198 26 / .45)}
.fio i::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;translate:-50% 0;border-radius:50%;background:var(--sol);box-shadow:0 0 0 4px rgb(255 198 26 / .25),0 0 18px 4px rgb(255 198 26 / .7)}
@supports (animation-timeline: view()){
  .fio i{animation:enche linear both;animation-timeline:view();animation-range:entry 10% exit 40%}
  @keyframes enche{to{transform:scaleY(1)}}
}
@supports not (animation-timeline: view()){ .fio.visto i{transform:scaleY(1);transition:transform 1.8s var(--ease)} }
@media (max-width:760px){.fio{display:none}}

/* a entrada única */
.js .revela{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .revela.visto{opacity:1;transform:none}

/* ---------- 2 · Onde a UNE está ---------- */
.estados{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,90px);align-items:center;
  background:
    radial-gradient(50% 60% at 72% 50%,rgb(255 198 26 / .07),transparent 70%),
    linear-gradient(180deg,var(--n0) 0%,var(--n1) 22%,var(--n1) 100%)}
/* as linhas de latitude e longitude, bem apagadas: o mapa como instrumento */
.estados::before{content:"";position:absolute;inset:0;z-index:-1;background:
  repeating-linear-gradient(0deg,rgb(255 255 255 / .035) 0 1px,transparent 1px 72px),
  repeating-linear-gradient(90deg,rgb(255 255 255 / .035) 0 1px,transparent 1px 72px);
  -webkit-mask:radial-gradient(70% 70% at 70% 50%,#000,transparent 75%);mask:radial-gradient(70% 70% at 70% 50%,#000,transparent 75%)}
.estados__nota{margin-top:16px;color:var(--t2);max-width:30em}
.numeros{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border-radius:18px;overflow:hidden;border:1px solid var(--vidro-borda)}
.numeros div{background:rgb(255 255 255 / .03);padding:18px 16px;display:flex;flex-direction:column-reverse;gap:6px}
.numeros dd{margin:0;font-family:var(--manchete);font-weight:var(--m-peso);font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:-.02em;color:var(--t1)}
.numeros dd small{font-family:var(--texto);font-size:13px;font-weight:600;color:var(--t3);letter-spacing:0;margin-right:2px}
.numeros div:first-child dd{color:var(--sol)}
.numeros dt{font-size:13px;color:var(--t3);font-weight:500}
.painel-uf{margin-top:22px;padding:22px 22px 20px;border-radius:20px;background:linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02));border:1px solid var(--vidro-borda);display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:end}
.painel-uf__nome{grid-column:1;font-family:var(--manchete);font-weight:var(--m-peso);font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;line-height:1.05}
.painel-uf__desc{grid-column:1;color:var(--t2);font-weight:600}
.painel-uf__desc b{color:var(--sol);font-size:20px}
.painel-uf__conta{grid-column:1;color:var(--t3);font-size:15px;margin-top:4px}
.painel-uf .botao{grid-column:2;grid-row:1 / span 3;align-self:center}
.painel-uf.fora .painel-uf__desc b{color:var(--t3)}
.painel-uf.troca{animation:troca .45s var(--ease)}
@keyframes troca{from{opacity:.4;transform:translateY(6px)}}

.estados__mapa{position:relative}
.mapa{position:relative;aspect-ratio:1000/1027;max-height:76vh;margin-inline:auto}
.mapa svg{width:100%;height:100%;display:block;overflow:visible}
.mapa path{fill:#0d2133;stroke:rgb(255 255 255 / .1);stroke-width:1;stroke-linejoin:round;transition:fill .6s var(--ease),filter .4s var(--ease),opacity .6s var(--ease);transition-delay:var(--atraso,0ms)}
.mapa path.une{cursor:pointer}
.mapa.aceso path.une{fill:var(--tinta-uf)}
.mapa .pino{opacity:0;transition:opacity .6s var(--ease);transition-delay:calc(var(--atraso,0ms) + 700ms);pointer-events:none}
.mapa.aceso .pino{opacity:1}
.mapa .pino circle{fill:#fff}
.mapa .pino text{font:700 17px var(--texto);fill:#fff;paint-order:stroke;stroke:rgb(1 10 19 / .75);stroke-width:4px;letter-spacing:.04em}
.mapa .pino.sel circle{fill:var(--sol)}
.mapa path.une:hover,.mapa path.une:focus-visible{filter:brightness(1.15) drop-shadow(0 0 14px var(--cor));outline:none}
.mapa svg .unes{filter:drop-shadow(0 0 24px rgb(255 198 26 / .18))}
.mapa path.sel{stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 0 22px var(--cor))}
.mapa path.fora:hover{fill:#14304a}
.mapa .onda{fill:none;stroke:var(--sol);stroke-width:2;opacity:0;pointer-events:none}
.mapa .onda.vai{animation:onda 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes onda{0%{r:4;opacity:.9}100%{r:170;opacity:0}}
.faixas{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.faixa{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;background:rgb(255 255 255 / .03);border:1px solid var(--vidro-borda);font-size:14px;color:var(--t2)}
.faixa b{font-family:var(--manchete);font-size:22px;letter-spacing:-.02em}
.faixa--25 b{color:var(--sol)}.faixa--20 b{color:#d4e04a}.faixa--15 b{color:var(--folha)}
.faixa__ufs{display:flex;gap:4px}
.faixa__ufs button{min-height:36px;min-width:42px;border-radius:999px;border:1px solid var(--vidro-borda);background:transparent;color:var(--t2);font:600 12px var(--texto);cursor:pointer}
.faixa__ufs button:hover{color:var(--t1);border-color:rgb(255 255 255 / .34)}
.faixa__ufs button[aria-pressed=true]{background:var(--sol);border-color:var(--sol);color:#081320}
@media (max-width:1000px){
  .estados{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .estados__texto{display:contents}
  .estados .sobre{order:1;align-self:flex-start}.estados h2{order:2}.estados__nota{order:3}
  .estados__mapa{order:4;margin-top:28px}.numeros{order:5}.painel-uf{order:6}
  .mapa{max-height:none;width:min(100%,520px)}
}
@media (max-width:560px){
  .numeros{grid-template-columns:1fr 1fr}
  .painel-uf{grid-template-columns:1fr}.painel-uf .botao{grid-column:1;grid-row:auto;margin-top:12px;width:100%}
  .faixa{grid-template-columns:52px 1fr}.faixa__ufs{grid-column:1/-1;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.js .revela{opacity:1;transform:none}.mapa .onda{display:none}.fio i{transform:scaleY(1)}}

/* ---------- 2 · a UNE chegando aos 9 estados: as rotas, os cometas, as faíscas e o símbolo no mar ---------- */
.mapa path.une.acende{fill:var(--tinta-uf)}
.mapa .pino.acende{opacity:1}
/* a rota sem o non-scaling-stroke: o traço que se desenha mede no espaço do mapa, igual ao comprimento do caminho */
.mapa path.rota{fill:none;stroke-width:4.5px;stroke-linecap:round;pointer-events:none;
  filter:drop-shadow(0 0 6px rgb(255 198 26 / .35));transition:opacity 1.4s var(--ease),stroke-width .3s var(--ease)}
.mapa.calmo path.rota{opacity:.16}
.mapa.calmo path.rota.foco,.mapa.calmo path.rota.sel{opacity:.85;stroke-width:5.5px}
/* enquanto a câmera está perto, o desenho não sai da moldura do mapa */
.mapa:not(.aceso) svg{overflow:hidden}
.mapa .cometa{fill:#fffbe6;pointer-events:none;filter:drop-shadow(0 0 4px #ffe27a) drop-shadow(0 0 12px rgb(255 198 26 / .9))}
.mapa .faisca{fill:none;stroke:var(--cor);stroke-width:2px;vector-effect:non-scaling-stroke;pointer-events:none;animation:faisca 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes faisca{from{r:4px;opacity:.95}to{r:var(--r1);opacity:0}}
.mapa .hub{pointer-events:none}
.mapa .hub__halo{fill:rgb(255 198 26 / .12);stroke:rgb(255 198 26 / .32);stroke-width:1px;vector-effect:non-scaling-stroke}
.mapa .hub__fundo{fill:#0a1c2b;stroke:rgb(255 198 26 / .85);stroke-width:1.5px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 10px rgb(255 198 26 / .45))}
@media (prefers-reduced-motion:reduce){.mapa .faisca,.mapa .cometa{display:none}}

/* ---------- 2 · o mapa, 2ª passada: o contraste das linhas e o motion de mão ----------
   O pedido: as linhas na mesma tonalidade não aparecem. A divisa entre 2 estados acesos fica escura (azul-noite), a rota
   ganha a casca escura embaixo (aparece por cima de qualquer cor) e a cauda clara do cometa; a rede, calma, fica visível. */
.mapa path.une.acende{stroke:rgb(2 17 30 / .72);stroke-width:1.5px}
.mapa path.une.acende.sel{stroke:#fff;stroke-width:2.6px}
.mapa path.rota-casca{fill:none;stroke:rgb(2 14 24 / .82);stroke-width:10px;stroke-linecap:round;pointer-events:none;transition:opacity 1.4s var(--ease)}
.mapa path.rota{stroke-width:4.5px}
.mapa path.rota-cauda{fill:none;stroke:#fff6c4;stroke-width:6px;stroke-linecap:round;pointer-events:none;filter:drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 14px rgb(255 198 26 / .7))}
.mapa.calmo path.rota{opacity:.5}
.mapa.calmo path.rota-casca{opacity:.55}
.mapa.calmo path.rota.foco,.mapa.calmo path.rota.sel{opacity:1;stroke-width:6px}
.mapa.calmo path.rota-casca.foco,.mapa.calmo path.rota-casca.sel{opacity:.95}
/* o realce: o estado sob o mouse sobe com mola, os outros recuam um pouco */
.mapa path.une,.mapa .pino{transform-box:fill-box;transform-origin:center;transition:fill .6s var(--ease),filter .4s var(--ease),opacity .45s var(--ease),transform .5s cubic-bezier(.3,1.5,.5,1)}
.mapa.foco-uf path.une:not(.realce){opacity:.55}
.mapa path.une.realce{transform:translateY(-7px) scale(1.025);filter:brightness(1.1) drop-shadow(0 10px 14px rgb(0 0 0 / .55)) drop-shadow(0 0 22px var(--cor))}
.mapa .pino.realce{transform:translateY(-7px)}
.mapa{transform-style:preserve-3d;will-change:transform}
/* a etiqueta: o nome e o desconto, presos ao estado */
.estados__mapa{position:relative}
.mapa__tag{position:absolute;z-index:3;left:0;top:0;translate:-50% calc(-100% - 22px);display:grid;gap:2px;padding:9px 13px 10px;border-radius:12px;pointer-events:none;
  background:rgb(4 22 36 / .92);border:1px solid rgb(255 255 255 / .14);box-shadow:0 14px 30px -12px rgb(0 0 0 / .8),inset 3px 0 0 var(--cor);backdrop-filter:blur(8px);
  font-size:12.5px;color:var(--t2);white-space:nowrap;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s var(--ease),transform .35s cubic-bezier(.3,1.5,.5,1),left .25s var(--ease),top .25s var(--ease)}
.mapa__tag b{font:700 15px/1.1 var(--manchete);color:#fff}
.mapa__tag span{color:var(--cor);font-weight:700}
.mapa__tag.ve{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mapa path.une.realce,.mapa .pino.realce{transform:none}.mapa{transform:none!important}}