/* ===================================================================
   ORBITAL DAS 4 MARCAS (Global Ecosolutions) — módulo autocontido
   Tudo namespaced em .orbital-sec / .orb-* para não colidir com o site.
   Paleta navy escopada (independe do tema brand-global).
   =================================================================== */
.orbital-sec{
  --o-azul:#0A3D66; --o-deep:#06283F; --o-azul400:#1E6FA8;
  --o-lima:#A9CF5B; --o-lima-ink:#557519; --o-ease:cubic-bezier(.22,.61,.36,1);
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(56px,6vw,84px) 20px clamp(56px,6vw,84px);
  display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(120% 92% at 50% 0%,#0c4a7d 0%,var(--o-azul) 40%,var(--o-deep) 100%);
  color:#fff;
}
/* glow ambiente */
.orbital-sec::before{content:"";position:absolute;width:680px;height:680px;left:50%;top:56%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(30,111,168,.4),transparent 62%);
  filter:blur(22px);pointer-events:none;z-index:0}

/* cabeçalho */
.orb-head{position:relative;text-align:center;max-width:700px;margin:0 auto 6px;z-index:3}
.orb-eyebrow{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--o-lima);display:inline-flex;align-items:center;gap:12px}
.orb-eyebrow::before,.orb-eyebrow::after{content:"";width:30px;height:2px;background:var(--o-lima);border-radius:2px;opacity:.7}
.orb-h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,46px);
  line-height:1.08;letter-spacing:-1px;margin:14px 0 0;color:#fff}
.orb-h2 em{font-style:italic;color:var(--o-lima)}
.orb-sub{font-family:'Poppins',sans-serif;font-weight:300;font-size:clamp(14px,1.6vw,17px);
  line-height:1.6;color:rgba(233,242,247,.82);margin-top:14px}

/* palco — maior */
.orb-stage{position:relative;width:min(880px,96vw);aspect-ratio:1;margin:30px auto 0;z-index:2}
.orb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.orb-ring{fill:none;stroke:rgba(169,207,91,.16);stroke-width:1}
.orb-ring.dash{stroke:rgba(255,255,255,.10);stroke-dasharray:3 7}
/* linha-conexão que "emana" do centro até a marca no hover (draw-on + glow) */
.orb-spoke{stroke:#bfe06a;stroke-width:3;stroke-linecap:round;opacity:0;
  stroke-dasharray:144;stroke-dashoffset:144;
  transition:opacity .35s var(--o-ease),stroke-dashoffset .6s var(--o-ease)}
.orb-spoke.lit{opacity:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(169,207,91,.95)) drop-shadow(0 0 12px rgba(169,207,91,.5))}
/* cometa que percorre a linha do centro à marca */
.orb-comet{opacity:0;
  filter:drop-shadow(0 0 7px rgba(169,207,91,.95)) drop-shadow(0 0 14px rgba(169,207,91,.55))}

/* núcleo central — disco branco com o G da Global */
.orb-core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;display:grid;place-items:center;z-index:2;cursor:pointer;
  background:radial-gradient(circle at 50% 36%,#ffffff,#eef5f8 64%,#dce8ef);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(169,207,91,.45),
    0 0 0 9px rgba(169,207,91,.08),0 0 0 20px rgba(30,111,168,.06);
  transition:box-shadow .5s var(--o-ease)}
.orb-core-g{width:60%;height:60%;object-fit:contain;display:block;position:relative;z-index:2;
  transition:transform .5s var(--o-ease)}
/* ondas de eco pulse (sonar) */
.orb-ripple{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(169,207,91,.7);
  transform:scale(.94);opacity:0;pointer-events:none;z-index:1}
/* ESTADO INTENSO (hover na marca ou no centro) */
.orb-core.pulsing{box-shadow:0 30px 70px -22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(169,207,91,.7),
  0 0 0 9px rgba(169,207,91,.2),0 0 0 20px rgba(30,111,168,.1),0 0 70px rgba(169,207,91,.75)}
.orb-core.pulsing .orb-core-g{transform:scale(1.08)}
.orb-core.pulsing .orb-ripple{animation:ecoPulseR 1.05s var(--o-ease) infinite;filter:drop-shadow(0 0 6px rgba(169,207,91,.75))}
.orb-core.pulsing .orb-ripple:nth-child(2){animation-delay:.35s}
.orb-core.pulsing .orb-ripple:nth-child(3){animation-delay:.7s}
@keyframes ecoPulseR{
  0%{transform:scale(.92);opacity:1;border-color:rgba(191,224,106,1);border-width:5px}
  55%{opacity:.4}
  100%{transform:scale(2.45);opacity:0;border-color:rgba(169,207,91,.15);border-width:1px}}

/* nós (marcas) — cards brancos com logo real */
.orb-node{position:absolute;left:50%;top:50%;width:204px;text-decoration:none;color:#fff;z-index:5;
  will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:none;border:0;padding:0;margin:0;font:inherit;text-align:inherit}
.orb-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:16px 14px;border-radius:18px;background:#fff;border:1px solid rgba(11,61,44,.12);
  box-shadow:0 20px 46px -20px rgba(0,0,0,.5);
  transition:transform .5s var(--o-ease),box-shadow .5s var(--o-ease),border-color .5s var(--o-ease)}
.orb-logo{width:100%;max-width:168px;height:46px;object-fit:contain;display:block;margin:2px auto 5px}
.orb-node em{font-style:normal;font-size:11px;line-height:1.35;color:#5a6b62}
.orb-go{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.5px;color:var(--o-lima-ink);
  opacity:0;max-height:0;transition:opacity .45s var(--o-ease),max-height .45s var(--o-ease)}
/* destaque (hover/foco) */
.orb-node.hot .orb-card,.orb-node:focus-visible .orb-card{transform:translateY(-4px) scale(1.08);
  border-color:var(--o-lima);box-shadow:0 30px 64px -18px rgba(0,0,0,.5),0 0 0 2px var(--o-lima)}
.orb-node.hot .orb-go,.orb-node:focus-visible .orb-go{opacity:1;max-height:20px}
.orb-node:focus-visible{outline:none}

.orb-hint{position:relative;z-index:3;margin-top:34px;font-size:12.5px;color:rgba(233,242,247,.6);text-align:center;max-width:560px}
.orb-hint b{color:var(--o-lima)}
.orb-hint-m{display:none}

/* ============ PAINEL (clique numa marca) ============ */
.orb-panel{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;visibility:hidden;transition:opacity .32s var(--o-ease),visibility .32s}
.orb-panel.open{opacity:1;visibility:visible}
.orb-panel-back{position:absolute;inset:0;background:rgba(6,40,63,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.orb-panel-card{position:relative;z-index:1;width:min(460px,94vw);max-height:88vh;overflow:auto;
  background:#fff;border-radius:22px;padding:30px 28px 28px;text-align:left;color:#0E1A14;
  box-shadow:0 40px 90px -30px rgba(6,40,63,.6);transform:translateY(16px) scale(.97);
  transition:transform .4s var(--o-ease)}
.orb-panel.open .orb-panel-card{transform:none}
.orb-panel-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:#F0F4F2;color:#3A4A42;font-size:15px;display:grid;place-items:center;transition:background .2s,color .2s}
.orb-panel-x:hover{background:var(--o-lima);color:#08301F}
.orb-panel-badge{display:inline-flex;align-items:center;height:74px;padding:0 4px;margin-bottom:6px}
.orb-panel-logo{max-width:210px;max-height:64px;width:auto;height:auto;object-fit:contain;display:block}
.orb-panel-tag{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--o-lima-ink);margin-top:4px}
.orb-panel-desc{font-family:'Poppins',sans-serif;font-weight:300;font-size:15px;line-height:1.65;color:#4A5A52;margin-top:12px}
.orb-panel-bul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.orb-panel-bul li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:#0E1A14}
.orb-panel-bul li i{color:var(--o-lima-ink);font-size:13px;margin-top:3px;flex:none}
.orb-panel-cta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:#fff;
  background:var(--o-azul);padding:13px 24px;border-radius:100px;text-decoration:none;
  box-shadow:0 14px 32px -12px rgba(10,61,102,.7);transition:transform .3s var(--o-ease),box-shadow .3s,background .3s}
.orb-panel-cta:hover{transform:translateY(-2px);background:var(--o-azul400);box-shadow:0 18px 40px -12px rgba(10,61,102,.8)}

/* responsivo */
@media(max-width:600px){
  .orb-stage{width:min(456px,96vw)}
  .orb-node{width:148px}
  .orb-node em{font-size:10px}
  .orb-logo{height:36px;max-width:126px}
  .orb-core{width:34%}
}
/* mobile (≤560px): abandona a órbita absoluta e empilha as 4 marcas numa
   lista clicável (o JS continua, mas transform:none !important o neutraliza). */
@media(max-width:560px){
  .orb-stage{aspect-ratio:auto;width:100%;max-width:400px;height:auto !important;
    margin:24px auto 0;display:flex;flex-direction:column;gap:12px}
  .orb-svg,.orb-core{display:none}
  .orb-node{position:static !important;transform:none !important;left:auto;top:auto;width:100%}
  .orb-card{flex-direction:row;align-items:center;justify-content:flex-start;gap:15px;
    text-align:left;padding:14px 16px}
  .orb-logo{width:116px;max-width:116px;height:42px;margin:0;flex:none}
  .orb-node em{font-size:12.5px;line-height:1.4;flex:1 1 auto}
  .orb-go{opacity:1 !important;max-height:none !important;flex:none;white-space:nowrap}
  .orb-hint-d{display:none}
  .orb-hint-m{display:inline}
}
/* 11/08/2026 — em 320px (iPhone SE / Android antigo) a linha da marca não cabia:
   logo 116 + nome + "Ver marca →" em nowrap estouravam ~25px e o `#marcas`
   comia o CTA. Medido: só em 320px; de 360 pra cima passa. Aperta a logo e a
   tipografia em vez de esconder o CTA — quem está no aparelho menor precisa
   dele igual. */
@media(max-width:360px){
  .orb-card{gap:11px;padding:12px 13px}
  .orb-logo{width:92px;max-width:92px;height:34px}
  .orb-node em{font-size:11.5px;min-width:0}
  .orb-go{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .orb-core.pulsing .orb-ripple{animation:none}
}