/* ===================== PRÉVIA · página Guarda Física ===================== */

/* ---- vantagens: segunda camada ---- */
.gb-more{list-style:none;margin:20px 0 0;padding:14px;display:grid;gap:4px;background:#fff;border:1px solid #DBD6C6;border-radius:14px}
@media(min-width:900px){.gb-more{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.gb-more li{display:flex;gap:12px;align-items:flex-start;padding:10px}
.gb-more .sl-ico{background:#DCEAE5;margin-top:1px}
.gb-more b{display:block;font-size:15px;color:#16233D}
.gb-more small{display:block;font-size:13.5px;line-height:1.5;color:#4B5262;margin-top:2px}

/* ---- plataforma: demonstração ---- */
.gp-feat{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.gp-feat li{position:relative;padding-left:28px;color:#16233D;font-size:15.5px;line-height:1.5}
.gp-feat li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#DCEAE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.gp-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gp-box{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:64px;padding:10px 12px;border-radius:10px;border:1px solid rgba(245,243,236,.18);background:rgba(245,243,236,.05);color:#F5F3EC;font:inherit;text-align:left;cursor:pointer;transition:background var(--nx-t1),border-color var(--nx-t1)}
.gp-box:hover{border-color:rgba(245,243,236,.45)}
.gp-box b{font-size:14.5px}
.gp-s{font-size:12px;color:rgba(245,243,236,.65)}
.gp-box[aria-pressed="true"]{background:#F5F3EC;color:#16233D;border-color:#F5F3EC}
.gp-box[aria-pressed="true"] .gp-s{color:#0E6B58;font-weight:700}
.gp-kind{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5FC2A8}
.gp-tl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.gp-tl li{position:relative;display:flex;align-items:center;gap:12px;padding:9px 0;color:rgba(245,243,236,.42);transition:color var(--nx-t2)}
.gp-tl li+li::before{content:"";position:absolute;left:8px;top:-9px;height:18px;width:2px;background:rgba(245,243,236,.15)}
.gp-tl li.on+li.on::before{background:#5FC2A8}
.gp-b{width:18px;height:18px;border-radius:50%;border:2px solid rgba(245,243,236,.25);flex-shrink:0;transition:all var(--nx-t2)}
.gp-tl li.on{color:#F5F3EC}
.gp-tl li.on .gp-b{background:#0E6B58;border-color:#5FC2A8;box-shadow:0 0 0 4px rgba(95,194,168,.15)}
.gp-tl li:last-child.on .gp-b{background:#5FC2A8}
.gp-tl b{font-weight:600;font-size:15px}
.gp-foot{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(245,243,236,.12);font-size:12.5px;color:rgba(245,243,236,.72)}
.gp-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5FC2A8;margin-right:7px;vertical-align:1px}
@media(max-width:420px){.gp-box{padding:9px}.gp-box b{font-size:13.5px}}

/* ---- segmentos ---- */
.gs-sec{padding-top:0!important}
@media(min-width:900px){.gs-areas{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:560px) and (max-width:899px){.gs-areas{grid-template-columns:repeat(2,minmax(0,1fr))}.gs-areas .dg-areas-t{grid-column:1/-1}}
.gs-areas a{align-items:center}

/* ===================== GUARDA 4.4 · isométrico + motion design ===================== */
/* banner: ciclo de 8 s · o leitor lê a etiqueta, a vaga acende, a caixa entra na estante, a câmera confirma, final parado */
.gb-hero .dg-hero-art.iso-art{height:clamp(260px,34vw,430px)}
.gb-hero .dg-hero-art.iso-art svg{width:auto;height:100%;max-width:100%}
.dg-hero-art .gb-slot,.dg-hero-art .gb-laser,.dg-hero-art .gb-amb{opacity:0}
.dg-hero-art .gb-ok{transform-box:fill-box;transform-origin:center;opacity:0}
.dg-hero-art .gb-mv{transform:translate(var(--sx),var(--sy))}
@media (prefers-reduced-motion:no-preference){
  .dg-hero-art .gb-laser{animation:gbLaser 8s var(--nx-ease-scene) .5s infinite both}
  .dg-hero-art .gb-slot{animation:gbSlot 8s var(--nx-ease-scene) .5s infinite both}
  .dg-hero-art .gb-mv{animation:gbMv 8s var(--nx-ease-scene) .5s infinite both}
  .dg-hero-art .gb-lift{animation:gbLift 8s var(--nx-ease-scene) .5s infinite both}
  .dg-hero-art .gb-amb{animation:gbAmb 8s var(--nx-ease-scene) .5s infinite both}
  .dg-hero-art .gb-cam{animation:gbCam 8s steps(1) .5s infinite both}
  .dg-hero-art .gb-ok{animation:gbOk 8s var(--nx-ease-confirm) .5s infinite both}
}
@keyframes gbLaser{0%,8%{opacity:0}10%,17%{opacity:1}19%,100%{opacity:0}}
@keyframes gbSlot{0%,6%{opacity:.55}20%,40%{opacity:1}44%{opacity:1}50%,92%{opacity:0}97%,100%{opacity:.55}}
@keyframes gbMv{0%,22%{opacity:1;transform:translate(var(--sx),var(--sy))}36%{transform:translate(var(--mx),var(--my))}38%{transform:translate(var(--mx),calc(var(--my) + 1px))}46%{transform:none}48%{transform:translate(-1px,.6px)}50%,90%{opacity:1;transform:none}93%{opacity:0;transform:none}95%{opacity:0;transform:translate(var(--sx),var(--sy))}100%{opacity:1;transform:translate(var(--sx),var(--sy))}}
@keyframes gbLift{0%,22%{transform:none}36%,50%{transform:translateY(var(--ly))}62%,100%{transform:none}}
@keyframes gbAmb{0%,44%{opacity:0}50%{opacity:1}62%,100%{opacity:0}}
@keyframes gbCam{0%,50%,54%,58%,100%{opacity:1}52%,56%{opacity:.15}}
@keyframes gbOk{0%,54%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1.06)}60%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){.dg-hero-art .gb-slot{opacity:0}.dg-hero-art .gb-mv{transform:none}.dg-hero-art .gb-ok{opacity:1}}

/* cards: uma vez ao aparecer (um de cada vez), repetem ao passar o mouse */
.tp .tg-cone,.tp .tg-lbl,.tp .tg-cnt,.tp .tg-hl,.tp .tg-pdf,.tp .tg-fly{opacity:0}
.tp .tg-cnt{transform-box:fill-box;transform-origin:50% 100%}
.tp .tg-reader{transform:none}
@media (prefers-reduced-motion:no-preference){
  /* segurança */
  .art-go .tg-cone{animation:tgCone 1.2s var(--nx-ease-scene) .1s both}
  .art-go .tg-card{animation:tgCard .9s var(--nx-ease-scene) .9s both}
  .art-go .tg-led{animation:tgLed .3s var(--nx-ease-confirm) 1.7s both}
  /* rastreabilidade */
  .art-go .tg-reader{animation:tgRead 1.6s var(--nx-ease-scene) .2s both}
  .art-go .tg-lbl{animation:trGlow .6s var(--nx-ease-scene) calc(.45s + var(--k) * 500ms) both}
  .art-go .tg-cnt{animation:gfBar .35s var(--nx-ease) calc(.6s + var(--k) * 500ms) both}
  /* consulta remota */
  .art-go .tg-btn{animation:gfBtn .3s steps(1) .2s both}
  .art-go .tg-hl{animation:trGlow .8s var(--nx-ease-scene) .5s both}
  .art-go .tg-pull{animation:tgPull .6s var(--nx-ease) .5s both}
  .art-go .tg-fly{animation:tgFly .9s var(--nx-ease-scene) 1s both}
  .art-go .tg-pdf{animation:gfDropIn .4s var(--nx-ease) 1.8s both}
}
@keyframes tgCone{0%{opacity:0;transform:rotate(-14deg)}20%{opacity:1}70%{opacity:1;transform:rotate(10deg)}100%{opacity:0;transform:rotate(10deg)}}
@keyframes tgCard{0%{transform:none}60%{transform:translate(calc(var(--cx) * .6),calc(var(--cy) * .6 - 14px))}100%{transform:translate(var(--cx),var(--cy))}}
@keyframes tgLed{to{fill:#5FC2A8}}
@keyframes tgRead{0%{transform:none}30%{transform:none}50%{transform:translate(var(--rx),var(--ry))}65%{transform:translate(var(--rx),var(--ry))}85%,100%{transform:translate(calc(var(--rx) * 2),calc(var(--ry) * 2))}}
@keyframes tgPull{0%{transform:none}100%{transform:translate(-6px,4px)}}
@keyframes tgFly{0%{opacity:0;transform:none}15%{opacity:1}55%{transform:translate(calc(var(--fx) * .5),calc(var(--fy) * .5 - 26px))}90%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy))}}
@keyframes trGlow{0%{opacity:0}40%{opacity:.9}100%{opacity:0}}
@keyframes gfBar{from{transform:scaleY(0)}to{transform:none}}
@keyframes gfBtn{0%{fill:#5FC2A8}100%{fill:#0E6B58}}
@keyframes gfDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tp .tg-lbl,.tp .tg-cnt,.tp .tg-pdf{opacity:1}.tp .tg-cnt{transform:none}.tp .tg-card{transform:translate(var(--cx),var(--cy))}.tp .tg-led{fill:#5FC2A8}}