/* ---------- 6 · O Grupo UNE (a noite da marca) ---------- */
/* a transição 5 → 6: a noite quente esfria; uma linha fina de luz atravessa a borda e acende com a rolagem */
.grupo{text-align:center;padding-top:clamp(84px,9vw,120px);
  background:
    radial-gradient(42% 46% at 50% 47%,rgb(67 224 102 / .09),transparent 72%),
    radial-gradient(30% 30% at 50% 44%,rgb(255 198 26 / .07),transparent 70%),
    linear-gradient(180deg,var(--n1) 0%,#030f1b 40%,var(--n0) 100%)}
.grupo::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgb(255 198 26 / .7) 30%,rgb(67 224 102 / .8) 70%,transparent);
  box-shadow:0 0 18px 1px rgb(255 198 26 / .35);transform:scaleX(.15);opacity:.4;transition:transform 1.6s var(--ease),opacity 1.6s var(--ease)}
.grupo:has(.arvore.visto)::before{transform:none;opacity:1}
@supports (animation-timeline: view()){ .grupo::before{transition:none;animation:g-linha linear both;animation-timeline:view();animation-range:entry 0% entry 60%} @keyframes g-linha{to{transform:none;opacity:1}} }
/* o céu: pontos de luz bem apagados, como a malha das dobras de noite */
.grupo::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255 / .09) 1px,transparent 1.6px);background-size:34px 34px;
  -webkit-mask:radial-gradient(60% 55% at 50% 50%,#000,transparent 75%);mask:radial-gradient(60% 55% at 50% 50%,#000,transparent 75%)}
.grupo__cab{max-width:760px;margin-inline:auto}
.grupo__cab .sobre{justify-content:center}
.grupo__apoio{margin:16px auto 0;max-width:34em;text-wrap:balance;color:var(--t2);font-size:clamp(16px,1.2vw,18px)}

/* a árvore: a mãe no alto, os ramos, as 3 empresas */
.arvore{position:relative;max-width:1080px;margin:clamp(48px,6vw,80px) auto 0}
.arvore__mae{position:relative;width:clamp(220px,24vw,320px);margin-inline:auto;padding:clamp(18px,2vw,26px) 0}
.arvore__mae img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 10px 40px rgb(255 198 26 / .18))}
/* a aura: raios finos que giram devagar atrás da marca (o símbolo da UNE é um sol) */
.arvore__aura{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;translate:-50% -50%;z-index:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle,rgb(255 198 26 / .16) 0%,rgb(67 224 102 / .07) 34%,transparent 62%),
    repeating-conic-gradient(from 0deg,rgb(255 214 90 / .16) 0deg 1.2deg,transparent 1.2deg 12deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);
  opacity:0;transform:scale(.7);transition:opacity 1.4s var(--ease),transform 1.6s var(--ease)}
.arvore.visto .arvore__aura{opacity:1;transform:none;animation:g-gira 90s linear infinite}
@keyframes g-gira{to{rotate:360deg}}
.js .arvore__mae img{opacity:0;transform:scale(.94);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .arvore.visto .arvore__mae img{opacity:1;transform:none}

/* os ramos: a luz desce da mãe até cada empresa, depois um pulso corre de tempo em tempo */
.arvore__ramos{display:block;width:100%;height:clamp(80px,9vw,130px);overflow:visible}
.arvore__ramos path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.ramos-base path{stroke:rgb(255 255 255 / .09);stroke-width:2}
.ramos-luz path{stroke:url(#ramo-cor);stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1)}
.ramos-luz path:nth-child(1){transition-delay:.55s}.ramos-luz path:nth-child(2){transition-delay:.4s}.ramos-luz path:nth-child(3){transition-delay:.7s}
.arvore.visto .ramos-luz path{stroke-dashoffset:0}
.ramos-pulso path{stroke:#fff6c9;stroke-width:4;stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 4px #ffc61a)}
.arvore.visto .ramos-pulso path{animation:g-pulso 3.6s cubic-bezier(.5,0,.4,1) 2.2s infinite}
.arvore.visto .ramos-pulso path:nth-child(2){animation-delay:2.6s}.arvore.visto .ramos-pulso path:nth-child(3){animation-delay:3s}
@keyframes g-pulso{0%{stroke-dashoffset:106;opacity:0}8%{opacity:1}42%{stroke-dashoffset:0;opacity:1}50%,100%{stroke-dashoffset:0;opacity:0}}

/* as empresas: placas claras (os logos têm o subtítulo escuro), que se abrem em leque a partir do centro */
.empresas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.empresa{position:relative;display:grid;place-items:center;min-height:clamp(170px,15vw,210px);padding:30px 24px 26px;border-radius:26px;
  background:linear-gradient(180deg,#fffdf8,#f3eee3);box-shadow:0 0 0 1px rgb(255 255 255 / .6) inset,0 30px 60px -30px rgb(0 0 0 / .8),0 0 0 1px rgb(255 255 255 / .06);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.empresa img{width:auto;height:clamp(92px,9vw,124px);max-width:100%;object-fit:contain;transition:transform .5s var(--ease)}
.empresa:hover{transform:translateY(-4px)}
.empresa:hover img{transform:scale(1.03)}
.js .empresa{opacity:0;transform:translateY(-36px) scale(.9);transition:opacity .8s var(--ease),transform 1s cubic-bezier(.2,.9,.25,1.08)}
.js .empresa:nth-child(1){transform:translate(34%,-36px) scale(.9)}
.js .empresa:nth-child(3){transform:translate(-34%,-36px) scale(.9)}
.js .arvore.visto .empresa{opacity:1;transform:none}
.js .arvore.visto .empresa:nth-child(2){transition-delay:1.1s}
.js .arvore.visto .empresa:nth-child(1){transition-delay:1.3s}
.js .arvore.visto .empresa:nth-child(3){transition-delay:1.45s}
.js .arvore.visto .empresa:hover{transform:translateY(-4px);transition-delay:0s}
/* "você está aqui": a UNE Energia acesa, com o anel e o ponto que pulsa como um marcador de mapa */
.empresa--aqui{box-shadow:0 0 0 2px var(--sol),0 0 0 8px rgb(255 198 26 / .14),0 30px 70px -26px rgb(255 198 26 / .45)}
.empresa__aqui{position:absolute;left:50%;top:0;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;
  background:var(--sol);color:#081320;font:700 13px/1 var(--texto);letter-spacing:.02em;white-space:nowrap;box-shadow:0 8px 20px -8px rgb(255 198 26 / .7)}
.empresa__aqui i{position:relative;width:8px;height:8px;border-radius:50%;background:#081320}
.empresa__aqui i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #081320;opacity:0;animation:g-ping 2.4s var(--ease) infinite}
@keyframes g-ping{0%{transform:scale(.4);opacity:.7}80%,100%{transform:scale(1.6);opacity:0}}

/* no celular: a árvore vira um tronco, a mãe no alto e as empresas empilhadas sobre a linha de luz */
@media (max-width:760px){
  .arvore__ramos{display:none}
  .arvore__mae{width:min(64vw,250px);margin-bottom:34px}
  .empresas{grid-template-columns:1fr;gap:30px;max-width:340px;margin-inline:auto;position:relative}
  .empresas::before{content:"";position:absolute;left:50%;top:-34px;bottom:40px;width:2px;translate:-50% 0;z-index:-1;
    background:linear-gradient(180deg,var(--sol),var(--folha));box-shadow:0 0 12px rgb(255 198 26 / .45);transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ease) .4s}
  .arvore.visto .empresas::before{transform:none}
  .empresa{min-height:150px}
  .empresa img{height:96px}
  .js .empresa,.js .empresa:nth-child(1),.js .empresa:nth-child(3){transform:translateY(24px) scale(.96)}
  .js .arvore.visto .empresa:nth-child(1){transition-delay:.6s}
  .js .arvore.visto .empresa:nth-child(2){transition-delay:.8s}
  .js .arvore.visto .empresa:nth-child(3){transition-delay:1s}
}
@media (prefers-reduced-motion:reduce){
  .arvore__aura{animation:none!important;opacity:1;transform:none}
  .ramos-luz path{stroke-dashoffset:0;transition:none}
  .ramos-pulso{display:none}
  .empresa__aqui i::after{animation:none}
  .grupo::before{transform:none;opacity:1;animation:none}
  .js .empresa{transition:none}
}