/* Tour 3D pelo estoque: camada em tela cheia, aberta sob demanda (a rolagem dentro dela move a câmera) */
.stk { position: fixed; inset: 0; z-index: 2147483000; display: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: #05033a; color: #fff; font-family: inherit; outline: none; }
.stk::-webkit-scrollbar { display: none; }
.stk.open { display: block; }
.stk__track { position: relative; height: 1100vh; }
html.stk-lock, html.stk-lock body { overflow: hidden !important; }
.stk *, .stk *::before, .stk *::after { box-sizing: border-box; }
.stk__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.stk__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stk__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 3, 58, .75) 100%), linear-gradient(0deg, rgba(5, 3, 58, .75), transparent 38%); }

.stk__top { position: absolute; z-index: 3; top: 22px; left: max(5vw, calc((100vw - 1180px) / 2)); right: max(5vw, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stk__brand { margin: 0; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; background: rgba(5, 3, 58, .55); backdrop-filter: blur(6px); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #dfe2ff; }
.stk__brand b { color: #FFE600; }
.stk__count { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: #FFE600; }

.stk__card { position: absolute; z-index: 3; left: max(5vw, calc((100vw - 1180px) / 2)); bottom: 12vh; width: min(480px, 90vw); padding: 24px 26px 26px; border-radius: 18px;
  background: rgba(8, 4, 76, .72); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); will-change: opacity, transform; }
.stk__kicker { margin: 0 0 .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #FFE600; }
.stk__title { color: #fff !important; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); margin: 0 0 .7rem; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.stk__text { margin: 0; font-size: 1rem; line-height: 1.55; color: #cfd3ff; }
.stk__cta { display: none; align-items: center; gap: 8px; margin-top: 1.1rem; padding: .8rem 1.4rem; border-radius: 10px; background: #FFE600; color: #05033a !important; font-weight: 800; text-decoration: none !important; box-shadow: 0 8px 24px rgba(255, 230, 0, .25); }
.stk__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.stk__dots { position: absolute; z-index: 3; right: max(4vw, calc((100vw - 1260px) / 2)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.stk__dots span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); transition: background .2s, transform .2s, border-color .2s; }
.stk__dots span.done { background: rgba(255, 255, 255, .5); }
.stk__dots span.on { background: #FFE600; border-color: #FFE600; transform: scale(1.5); }

.stk__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .12); }
.stk__bar-fill { height: 100%; background: #FFE600; transform-origin: 0 50%; transform: scaleX(0); }
.stk__hint { position: absolute; z-index: 3; right: max(5vw, calc((100vw - 1180px) / 2)); bottom: 22px; display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #cfd3ff; }

.stk--nogl .stk__sticky { display: none; }
.stk--nogl .stk__track { height: auto; padding: 40vh 20px 0; text-align: center; }
.stk--nogl .stk__track::before { content: "Tour 3D do estoque indisponível neste navegador."; color: #cfd3ff; }
.stk--nogl .stk__loading { display: none; }

.stk__loading { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #05033a; color: #cfd3ff; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; transition: opacity .5s .15s, visibility .5s .15s; }
.stk__loading p { margin: 0; }
.stk__spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #FFE600; animation: stkspin .8s linear infinite; }
.stk--live .stk__loading { opacity: 0; visibility: hidden; }
@keyframes stkspin { to { transform: rotate(360deg); } }
.stk__x { margin-left: 12px; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; background: rgba(5, 3, 58, .65); color: #fff; font: 700 .72rem/1 inherit; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); }
.stk__x:hover, .stk__x:focus-visible { background: #FFE600; color: #05033a; border-color: #FFE600; outline: none; }
.stk__top { z-index: 7; }

@media (max-width: 767px) {
  .stk__track { height: 960vh; }
  .stk__card { left: 4vw; right: 4vw; width: auto; bottom: 6vh; padding: 18px 18px 20px; }
  .stk__text { font-size: .92rem; }
  .stk__dots { right: 10px; gap: 9px; }
  .stk__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stk__card { will-change: auto; } }

body { overflow-x: clip; }

/* painel com fotos e vídeo reais do estoque (parada "Estoque de verdade") */
.stk__media { position: absolute; z-index: 3; right: calc(max(5vw, (100vw - 1180px) / 2) + 38px); top: 50%; width: min(320px, 26vw); transform: translateY(-50%); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.stk__mframe { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #0b0654; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.stk__mframe video, .stk__mimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.stk__mimg { opacity: 0; }
.stk__mthumbs { display: flex; gap: 6px; margin-top: 10px; }
.stk__mth { position: relative; flex: 1; min-width: 0; aspect-ratio: 3 / 4; padding: 0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 8px; overflow: hidden; background: #0b0654; cursor: pointer; opacity: .75; transition: opacity .15s, border-color .15s, transform .15s; }
.stk__mth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk__mth i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; color: #fff; font-size: .8rem; background: rgba(5, 3, 58, .35); }
.stk__mth:hover { opacity: 1; transform: translateY(-2px); }
.stk__mth.on { opacity: 1; border-color: #FFE600; }
.stk__mcap { margin: 10px 0 0; text-align: center; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #cfd3ff; }
@media (max-width: 767px) { .stk__media { top: 33%; right: 4vw; width: 44vw; } .stk__mcap { display: none; } .stk__mthumbs { gap: 3px; } }

.stk__q { margin-left: auto; margin-right: 14px; padding: .35rem .8rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; background: rgba(5, 3, 58, .55); color: #cfd3ff; font: 600 .7rem/1 inherit; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); }
.stk__q:hover { background: #FFE600; color: #05033a; border-color: #FFE600; }

/* prévia na home: só mostra um vídeo leve; o tour 3D abre (e carrega) ao clicar */
.stkp { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(48px, 7vw, 96px) 0; background: radial-gradient(90% 120% at 85% 20%, #1a0f9c 0%, #0b0654 45%, #05033a 100%); color: #fff; font-family: inherit; overflow: hidden; }
.stkp *, .stkp *::before, .stkp *::after { box-sizing: border-box; }
.stkp__inner { width: min(1180px, 90vw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.stkp__kicker { margin: 0 0 .8rem; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #FFE600; }
.stkp__title { margin: 0 0 1rem; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; text-transform: none; }
.stkp__text { margin: 0 0 1.6rem; max-width: 46ch; font-size: 1.05rem; line-height: 1.6; color: #cfd3ff; }
.stkp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.stkp__btn { display: inline-flex; align-items: center; gap: 10px; padding: .95rem 1.6rem; border: 0; border-radius: 12px; background: #FFE600; color: #05033a; font: 800 1rem/1 inherit; cursor: pointer; box-shadow: 0 10px 30px rgba(255, 230, 0, .25); transition: transform .15s, box-shadow .15s; }
.stkp__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.stkp__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255, 230, 0, .35); }
.stkp__btn:hover svg { transform: translateX(3px); }
.stkp__alt { padding: .4rem 0; border: 0; border-bottom: 1px dashed rgba(255, 255, 255, .45); background: none; color: #dfe2ff; font: 600 .9rem/1.2 inherit; cursor: pointer; }
.stkp__alt:hover { color: #FFE600; border-color: #FFE600; }
.stkp__meta { margin: 1.2rem 0 0; font-size: .8rem; letter-spacing: .04em; color: #9ea3d6; }
.stkp__stage { position: relative; justify-self: center; width: min(340px, 100%); }
.stkp__media { position: relative; width: 100%; aspect-ratio: 3 / 4; border: 1px solid rgba(255, 255, 255, .22); border-radius: 22px; overflow: hidden; background: #0b0654; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.stkp__media video, .stkp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.stkp__img { opacity: 0; }
.stkp__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 3, 58, .62), transparent 40%); pointer-events: none; }
.stkp__tag { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .4rem .8rem; border-radius: 99px; background: rgba(5, 3, 58, .72); backdrop-filter: blur(6px); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #dfe2ff; }
.stkp__tag b { font-weight: 700; }
.stkp__tag i { font-style: normal; font-weight: 800; color: #FFE600; letter-spacing: .06em; }
.stkp__nav { position: absolute; z-index: 3; top: 50%; width: 46px; height: 46px; margin-top: -23px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #FFE600; color: #05033a; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); transition: transform .15s, background .15s; }
.stkp__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stkp__nav:hover { transform: scale(1.1); background: #fff; }
.stkp__nav--prev { left: -23px; } .stkp__nav--next { right: -23px; }
@media (max-width: 820px) { .stkp__inner { grid-template-columns: 1fr; } .stkp__stage { width: min(300px, 78vw); order: -1; } .stkp__nav { width: 42px; height: 42px; margin-top: -21px; } .stkp__nav--prev { left: -17px; } .stkp__nav--next { right: -17px; } }