/* Sistema Grunet — oficial v1 (aprovado 28/09/2026). Estilo do componente. */
.sg{--sg-green:#1f9a45;--sg-green-d:#0b5a2b;--sg-lime:#93de5b;--sg-yellow:#f6c400;--sg-ink:#10241a;
  container-type:inline-size;position:relative;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--sg-ink)}
.sg,.sg *,.sg *::before,.sg *::after{box-sizing:border-box}
.sg-frame{
  --sg-h:clamp(84px, calc(11cqi + 40px), 140px);
  --sg-inset:calc(var(--sg-h) * .075);
  --sg-card-w:calc(var(--sg-h) * 1.7143);
  --sg-anchor-w:min(calc(var(--sg-h) * 1.5714), 34cqi);
  --sg-gap:clamp(10px, calc(var(--sg-h) * .1714), 24px);
  --sg-arrow:clamp(38px, calc(var(--sg-h) * .31), 46px);
  --sg-r:calc(var(--sg-h) * .19);
  position:relative;height:calc(var(--sg-h) + 2 * var(--sg-inset));
  margin-inline:calc(var(--sg-arrow) / 2);
  border:3px solid var(--sg-green);border-radius:var(--sg-r);background:#fff;
  box-shadow:0 12px 26px -16px rgba(10,60,30,.55);
}
@container (max-width: 560px){
  .sg-frame{--sg-arrow:30px}
  .sg-arrow svg{width:50%;height:50%}
}
.sg-viewport{position:absolute;top:var(--sg-inset);bottom:var(--sg-inset);left:0;right:var(--sg-inset);overflow:hidden;
  border-radius:0 max(4px, calc(var(--sg-r) - 3px - var(--sg-inset))) max(4px, calc(var(--sg-r) - 3px - var(--sg-inset))) 0;
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.sg-viewport.is-dragging{cursor:grabbing}
.sg-track{display:flex;gap:var(--sg-gap);list-style:none;margin:0;padding:0;height:100%;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.sg-track>li{flex:none;display:flex}
.sg-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--sg-h) * .04);
  width:var(--sg-card-w);height:var(--sg-h);border-radius:calc(var(--sg-h) * .1);overflow:hidden;text-decoration:none;
  background:var(--c-bg);color:var(--c-ink);box-shadow:0 5px 12px -5px rgba(0,0,0,.4);-webkit-user-drag:none;
  outline:none;padding:0 calc(var(--sg-h) * .12);text-align:center}
.sg-card:focus-visible{box-shadow:0 0 0 3px #fff inset,0 0 0 6px var(--sg-yellow) inset}
.sg-card-stripe{position:absolute;right:-14%;bottom:-40%;width:78%;height:58%;border-radius:50%;background:var(--c-stripe);opacity:.95;z-index:0}
.sg-card-stripe::before{content:"";position:absolute;inset:22% 0 0 4%;border-radius:50%;background:var(--c-bg);transform:translate(-10%,-16%)}
.sg-card-icon{position:relative;z-index:1;width:calc(var(--sg-h) * .3);height:calc(var(--sg-h) * .3);color:var(--c-icon, var(--c-acc))}
.sg-card-icon svg{width:100%;height:100%;display:block;fill:currentColor}
.sg-card-name{position:relative;z-index:1;font-weight:800;font-size:calc(var(--sg-h) * .135);line-height:1.05;letter-spacing:-.01em}
.sg-card-name em{font-style:normal;color:var(--c-acc)}
.sg-card-sub{position:relative;z-index:1;font-weight:600;font-size:calc(var(--sg-h) * .066);letter-spacing:.32em;color:var(--c-acc);margin-top:calc(var(--sg-h) * -.02)}
.sg-card--vaga .sg-card-name{font-weight:700;font-size:calc(var(--sg-h) * .128)}

.sg-anchor{position:absolute;left:0;top:0;bottom:0;width:var(--sg-anchor-w);z-index:2;
  border-radius:calc(var(--sg-r) - 3px) calc(var(--sg-h) * .06) calc(var(--sg-h) * .06) calc(var(--sg-r) - 3px);
  background:radial-gradient(130% 100% at 18% 8%, #34b85b 0%, #178d40 42%, #0a5a2b 100%);
  box-shadow:10px 0 18px -8px rgba(0,35,12,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--sg-h) * .05);
  text-align:center;color:#fff;padding:0 calc(var(--sg-h) * .08);text-decoration:none;outline:none}
.sg-anchor:focus-visible{box-shadow:10px 0 18px -8px rgba(0,35,12,.6),0 0 0 3px #fff inset,0 0 0 6px var(--sg-yellow) inset}
.sg-logo{position:relative;font-weight:800;font-size:calc(var(--sg-h) * .31);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.sg-logo .g{color:var(--sg-lime)} .sg-logo .n{color:var(--sg-yellow)}
.sg-swoosh{position:absolute;left:22%;top:-.34em;width:72%;height:.3em;display:block}
.sg-slogan{font-weight:500;font-size:clamp(9px, calc(var(--sg-h) * .1), 14px);line-height:1.25;opacity:.95}

.sg-arrow{position:absolute;top:50%;z-index:3;width:var(--sg-arrow);height:var(--sg-arrow);transform:translateY(-50%);
  border:0;border-radius:50%;background:#fff;color:var(--sg-ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 5px 14px -3px rgba(0,0,0,.35);padding:0;transition:background-color .15s}
.sg-arrow:hover{background:#eef7f0}
.sg-arrow:focus-visible,.sg-toggle:focus-visible{outline:3px solid var(--sg-yellow);outline-offset:2px}
.sg-arrow svg{width:46%;height:46%}
.sg-prev{left:calc(var(--sg-arrow) / -2 - 1.5px)}
.sg-next{right:calc(var(--sg-arrow) / -2 - 1.5px)}
.sg-toggle{position:absolute;z-index:3;right:calc(var(--sg-arrow) * .9);bottom:-14px;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--sg-green);background:#fff;color:var(--sg-green-d);display:grid;place-items:center;cursor:pointer;padding:0}
.sg-toggle svg{width:12px;height:12px}
.sg.is-reduced .sg-toggle{display:none}
.sg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.sg *{transition:none!important}}

/* v1.1 — logo oficial no bloco fixo (motor inalterado).
   Usa a versão clara da logo oficial (GRU em verde-claro, NET em amarelo), legível sobre o verde. */
.sg-logo-plate{display:block;width:100%;max-width:calc(var(--sg-h) * 1.32)}
.sg-logo-plate img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 4px rgba(0,30,10,.35))}

/* v1.2 — ajustes visuais aprovados em 28/09/2026 (motor inalterado) */

/* Etiqueta dos cards de demonstração ("Sua empresa aqui") */
.sg-card-tag{position:absolute;top:calc(var(--sg-h) * .05);right:calc(var(--sg-h) * .06);z-index:2;
  padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.88);color:#2E4337;
  font:600 clamp(8px, calc(var(--sg-h) * .062), 10px)/1.5 "Inter",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}

/* Celular: mesma proporção da versão anterior (altura ~86 px), com mais área útil para os cards.
   O bloco fixo fica mais estreito e a sombra dele mais curta, para os cards não parecerem escondidos. */
@container (max-width: 560px){
  .sg-frame{
    --sg-h:clamp(86px, calc(11cqi + 44px), 140px);
    --sg-anchor-w:28cqi;
  }
  .sg-anchor{padding:0 5px 0 calc(var(--sg-arrow) / 2 - 2px);box-shadow:4px 0 8px -4px rgba(0,35,12,.45)}
  .sg-slogan{font-size:min(8px, 2.2cqi);line-height:1.2;white-space:nowrap}
  .sg-card-tag{font-size:6.5px;padding:0 5px;letter-spacing:.04em;background:rgba(255,255,255,.72);
    top:calc(var(--sg-h) * .04);right:calc(var(--sg-h) * .05)}
}

/* Bloco fixo Grunet: brilho leve que atravessa o bloco a cada 7 s (efeito da versão anterior)
   e "respiração" sutil da logo. Só CSS: não toca na circulação dos cards. */
.sg-anchor{overflow:hidden;isolation:isolate}
.sg-anchor::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-130%);animation:sgBrilho 7s ease-in-out infinite}
.sg-logo-plate img,.sg-logo{animation:sgRespira 5s ease-in-out infinite;will-change:transform}
@keyframes sgBrilho{0%,78%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes sgRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media (prefers-reduced-motion: reduce){
  .sg-anchor::after,.sg-logo-plate img,.sg-logo{animation:none!important}
}
.sg.is-reduced .sg-anchor::after,.sg.is-reduced .sg-logo-plate img,.sg.is-reduced .sg-logo{animation:none}

/* v1.3 — card com logo em imagem (ex.: Techouse). Motor inalterado. */
.sg-card-logo{position:relative;z-index:1;display:block;height:calc(var(--sg-h) * .6);width:auto;max-width:86%;object-fit:contain;-webkit-user-drag:none}
.sg-card-tagline{position:relative;z-index:1;font:600 calc(var(--sg-h) * .088)/1.15 "Inter",system-ui,sans-serif;color:var(--c-ink);opacity:.85;letter-spacing:.01em;margin-top:calc(var(--sg-h) * -.01)}
.sg-card:has(.sg-card-logo){gap:calc(var(--sg-h) * .02);padding-block:calc(var(--sg-h) * .02) calc(var(--sg-h) * .14);justify-content:center}