/* Abertura da home com a vitrine 3D (teste de 12/10/2026). Para voltar como era, ver o README, secao "Vitrine 3D na abertura". */
.hx-hero-vt .hx-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);align-items:center;gap:40px;padding-block:128px 52px}
.hx-hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hx-hero-vt .hx-hero-title{max-width:620px;font-size:clamp(34px,3.6vw,54px);text-align:left}
.hx-hero-vt .hx-hero-text{max-width:520px;margin:28px 0 40px;text-wrap:pretty;animation:rise-in .9s .16s var(--ease) both}
.hx-hero-copy>.hx-btn{animation:rise-in .9s .24s var(--ease) both}
.hx-hero-vt:after{background:radial-gradient(ellipse 36% 54% at 73% 50%,rgba(13,17,23,.86),transparent 80%),radial-gradient(ellipse 34% 40% at 24% 50%,rgba(13,17,23,.62),transparent 80%),linear-gradient(transparent 70%,rgba(13,17,23,.85))}

.hx-vitrine{position:relative;width:100%;container-type:inline-size;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.vt-defs{position:absolute;width:0;height:0;overflow:hidden}
.vt-stage{--rx:5;--ry:-7;position:relative;width:60em;height:56em;margin:0 auto;font-size:10px;font-size:calc(100cqw / 61.6);line-height:1.2;color:var(--hx-text);perspective:150em;perspective-origin:50% 42%}
.vt-world{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-7deg);pointer-events:none}
.vt-world>*{position:absolute;display:block;transform:translateZ(calc(var(--z,0) * 1em));will-change:transform}
/* so a loja, os cards e o aviso recebem o clique (o plano da cena nao pode ganhar o toque no lugar do botao) */
.vt-world>.vt-card,.vt-world>.vt-shop,.vt-world>.vt-toast{pointer-events:auto}
.hx-vitrine:not(.is-live) .vt-world>*{animation:vt-show .7s 1.4s both}
@keyframes vt-show{from{opacity:0}}

.vt-glow{--z:-16;left:13em;top:7em;width:34em;height:42em;border-radius:50%;background:radial-gradient(closest-side,rgba(127,163,196,.28),rgba(127,163,196,.07) 58%,transparent)}
.vt-ring{--z:-9;left:6.4em;top:4.8em;width:47.2em;height:47.2em;border-radius:50%;border:1px solid rgba(169,194,217,.3)}
.vt-ring:before{content:"";position:absolute;inset:3.6em;border-radius:50%;border:1px dashed rgba(169,194,217,.16)}
.vt-comet{position:absolute;inset:-1px;border-radius:50%;opacity:0;will-change:transform,opacity}
.vt-comet:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(169,194,217,0) 0deg 215deg,rgba(214,228,242,.95) 359.5deg,rgba(169,194,217,0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.vt-comet:after{content:"";position:absolute;left:50%;top:0;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em;border-radius:50%;background:#fff;box-shadow:0 0 1.2em .3em rgba(169,194,217,.95),0 0 3em 1em rgba(127,163,196,.5)}
.vt-comet.is-soft:before{background:conic-gradient(rgba(169,194,217,0) 0deg 290deg,rgba(169,194,217,.5) 359.5deg,rgba(169,194,217,0) 360deg)}
.vt-comet.is-soft:after{width:.7em;height:.7em;margin:-.35em 0 0 -.35em;box-shadow:0 0 1em .2em rgba(169,194,217,.7)}

.vt-card{display:flex;flex-direction:column;gap:1.1em;padding:1.3em 1.4em 1.4em;border-radius:1.4em;background:linear-gradient(155deg,rgba(33,43,57,.97),rgba(17,22,30,.97));border:1px solid rgba(230,232,235,.13);box-shadow:0 2.6em 5em -1.8em rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07);cursor:pointer}
.vt-lit{position:absolute;inset:-1px;border-radius:inherit;border:1px solid #a9c2d9;box-shadow:0 0 2.6em rgba(127,163,196,.6),inset 0 0 1.8em rgba(127,163,196,.2);opacity:0;pointer-events:none;will-change:opacity}
.vt-head{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin:0;font-size:1.15em;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#eef0f3}
.vt-dots{flex-shrink:0;width:1.6em;height:.4em;background:radial-gradient(circle,rgba(230,232,235,.5) 45%,transparent 55%) 0 50%/.53em .4em repeat-x}
.vt-ads{--z:6;left:.8em;top:6em;width:18.4em}
.vt-data{--z:4.5;left:42em;top:4.4em;width:18em}
.vt-opt{--z:5.5;left:1.6em;top:32em;width:18em}
.vt-crm{--z:7;left:41.4em;top:30em;width:17.8em}

.vt-ad{display:flex;align-items:center;gap:1.1em}
.vt-thumb{position:relative;flex-shrink:0;width:5.6em;height:5.6em;border-radius:1em;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fff,#e2e8ef 68%,#cfd9e3)}
.vt-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-thumb img+img{opacity:0}
.vt-ad-copy{display:flex;flex-direction:column;gap:.45em;min-width:0}
.vt-ad-copy b{overflow:hidden;font-size:1.3em;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.vt-ad-copy small{font-size:1.05em;font-weight:500;color:#a9b6c3}
.vt-ad-copy i{display:block;width:6.4em;height:.5em;margin-top:.2em;border-radius:1em;background:linear-gradient(90deg,#a9c2d9,#4a6b8a)}
.vt-acts{display:flex;align-items:center;gap:1.1em;color:#cfd8e2}
.vt-acts svg{width:1.7em;height:1.7em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-heart{will-change:transform}
.vt-heart.is-on{fill:#7fa3c4;stroke:#a9c2d9}
.vt-likes{margin-left:-.6em;font-size:1.2em;font-weight:600;color:#eef0f3;font-variant-numeric:tabular-nums}

.vt-kpi{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .8em}
.vt-kpi small{width:100%;font-size:1.05em;font-weight:500;color:#a9b6c3}
.vt-revenue{font-size:1.7em;font-weight:700;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.vt-delta{padding:.3em .6em;border-radius:1em;background:rgba(127,163,196,.18);color:#c3d6e8;font-size:1em;font-style:normal;font-weight:600}
.vt-chart{display:block;width:100%;height:auto;overflow:hidden}
.vt-line{fill:none;stroke:url(#vt-g-line);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.vt-area{fill:url(#vt-g-area)}
.vt-chart-dot{fill:#fff;stroke:#7fa3c4;stroke-width:2.4}

.vt-row{display:flex;align-items:center;gap:1.1em}
.vt-tile{position:relative;flex-shrink:0;display:grid;place-items:center;width:4.4em;height:4.4em;border-radius:1.1em;background:rgba(127,163,196,.13);border:1px solid rgba(169,194,217,.24)}
.vt-tile>svg{width:2.2em;height:2.2em;fill:none;stroke:#a9c2d9;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vt-mail{position:absolute;left:1.1em;top:1.1em;width:2.2em;height:2.2em;opacity:0;will-change:transform,opacity}
.vt-mail svg{display:block;width:100%;height:100%;fill:#131922;stroke:#e6eef6;stroke-width:1.7;stroke-linejoin:round}
.vt-num small{display:block;font-size:1.05em;font-weight:500;color:#a9b6c3}
.vt-num b{display:block;margin-top:.2em;font-size:1.7em;font-weight:700;font-variant-numeric:tabular-nums;transform-origin:0 60%;will-change:transform}
.vt-sent{display:flex;align-items:center;gap:.5em;margin:0;font-size:1.05em;font-weight:600;color:#c3d6e8;opacity:.55}
.vt-sent svg{width:1.4em;height:1.4em;fill:none;stroke:#a9c2d9;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vt-gear{will-change:transform}
.vt-bars{display:flex;flex:1;flex-direction:column;gap:.75em;min-width:0}
.vt-bars i{display:block;height:.62em;border-radius:1em;background:rgba(230,232,235,.1);overflow:hidden}
.vt-bars b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4a6b8a,#a9c2d9);transform-origin:0 50%;will-change:transform}

.vt-shop{--z:.6;left:18em;top:9em;width:24em;height:34.6em;overflow:hidden;border-radius:1.6em;background:#f3f5f8;color:#0d1117;box-shadow:0 4em 8em -2.6em rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.6);cursor:pointer}
.vt-chrome{position:relative;display:flex;align-items:center;gap:.5em;height:2.8em;padding:0 1.3em;background:#e5eaf0;border-bottom:1px solid #d6dde6}
.vt-chrome i{width:.72em;height:.72em;border-radius:50%;background:#b7c3cf}
.vt-chrome span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.35em 1.3em;border-radius:1em;background:#fff;font-size:.95em;font-weight:500;color:#5b6878;white-space:nowrap}
.vt-shophead{position:relative;display:flex;align-items:center;justify-content:space-between;height:4.4em;padding:0 1.4em}
.vt-brand{font-size:1.4em;font-weight:700;letter-spacing:.22em;line-height:1}
.vt-icons{display:flex;align-items:center;gap:1.2em}
.vt-icons svg{display:block;width:1.8em;height:1.8em;fill:none;stroke:#1f2a37;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vt-cart{position:relative;display:block;will-change:transform}
.vt-badge{position:absolute;right:-.85em;top:-.75em;min-width:1.7em;height:1.7em;padding:0 .35em;border-radius:1em;background:#4a6b8a;color:#fff;font-size:1em;font-style:normal;font-weight:700;line-height:1.7em;text-align:center;opacity:0;will-change:transform}
.vt-photo{position:relative;overflow:hidden;height:17em;margin:0 1.2em;border-radius:1.2em;background:radial-gradient(ellipse 72% 64% at 50% 40%,#fff,#e8edf2 60%,#d6dee7)}
.vt-floor{display:none}
.vt-photo-img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;will-change:opacity}
.vt-info{display:flex;align-items:flex-start;justify-content:space-between;gap:.8em;min-width:0;height:4.2em;padding:1.2em 1.4em 0}
.vt-info>span{min-width:0}
.vt-name{display:block;overflow:hidden;font-size:1.3em;font-weight:600;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.vt-stars{display:block;width:6em;height:1.2em;margin-top:.4em;fill:#7fa3c4}
.vt-price{font-size:1.5em;font-weight:700;line-height:1.1;white-space:nowrap}
.vt-buy{position:relative;display:flex;align-items:center;justify-content:center;gap:.7em;height:4em;margin:.9em 1.2em 0;overflow:hidden;border-radius:1em;background:#0d1117;color:#fff;will-change:transform;transition:background .25s}
.vt-shop:hover .vt-buy{background:#1d2836}
.vt-buy svg{position:relative;width:1.6em;height:1.6em;fill:none;stroke:#a9c2d9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-buy span{position:relative;font-size:1.25em;font-weight:600;letter-spacing:.01em}
.vt-ripple{position:absolute;left:50%;top:50%;width:10em;height:10em;margin:-5em 0 0 -5em;border-radius:50%;background:radial-gradient(closest-side,rgba(169,194,217,.55),rgba(169,194,217,0));opacity:0;pointer-events:none}

.vt-canvas{--z:.6;left:13em;top:3.6em;width:34em;height:44em;pointer-events:none;opacity:0}
.vt-toast{--z:8.5;left:16.6em;top:42.6em;width:26.8em;display:flex;align-items:center;gap:1.1em;padding:1.1em 1.2em;border-radius:1.4em;background:#fff;color:#0d1117;box-shadow:0 2.4em 4.6em -1.6em rgba(0,0,0,.85);cursor:pointer}
.vt-check{flex-shrink:0;width:3.8em;height:3.8em}
.vt-check circle{fill:#0d1117}
.vt-check path{fill:none;stroke:#a9c2d9;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.vt-toast-copy{flex:1;min-width:0}
.vt-toast-copy b{display:block;font-size:1.35em;font-weight:700;line-height:1.2}
.vt-toast-copy small{display:block;margin-top:.3em;overflow:hidden;font-size:1.05em;font-weight:500;color:#4d5b6b;white-space:nowrap;text-overflow:ellipsis}
.vt-toast-img{flex-shrink:0;width:4.4em;height:4.4em;border-radius:.8em;object-fit:cover}
.vt-cursor{--z:12;left:0;top:0;width:2.8em;height:2.8em;opacity:0;pointer-events:none}
.vt-cursor svg{display:block;width:100%;height:100%;fill:#fff;stroke:#0d1117;stroke-width:1.5;stroke-linejoin:round}

/* celular: a loja no meio e os cards nos cantos, sem cobrir o carrinho, o produto e o botao */
@container (max-width:520px){
  .vt-stage{--rx:3;--ry:-2;width:40em;height:44.8em;font-size:calc(100cqw / 40);perspective:120em}
  .vt-world{transform:rotateX(3deg) rotateY(-2deg)}
  .vt-glow{left:6em;top:4.6em;width:28em;height:34em}
  .vt-ring{left:1em;top:2.2em;width:38em;height:38em}
  .vt-card{gap:.8em;padding:1em 1.1em 1.1em;border-radius:1.2em}
  .vt-head{gap:.5em;font-size:.98em;letter-spacing:.04em}
  .vt-ads{left:1.4em;top:.8em;width:12.6em}
  .vt-crm{left:26.2em;top:.2em;width:12.4em}
  .vt-data{left:26.4em;top:15.2em;width:12.2em}
  .vt-opt{left:1.4em;top:17.6em;width:12.4em}
  .vt-thumb{width:4.6em;height:4.6em}
  .vt-ad-copy small,.vt-ad-copy b,.vt-kpi small,.vt-sent{display:none}
  .vt-ad-copy{flex:1;gap:.6em}
  .vt-ad-copy i{width:100%}
  .vt-ad-copy:after{content:"";display:block;width:62%;height:.5em;border-radius:1em;background:rgba(230,232,235,.16)}
  .vt-revenue{font-size:1.45em}
  .vt-delta{display:none}
  .vt-tile{width:3.8em;height:3.8em}
  .vt-tile>svg{width:2em;height:2em}
  .vt-num b{font-size:1.5em}
  .vt-shop{left:9.6em;top:5.6em;width:20.8em;height:29.2em;border-radius:1.4em}
  .vt-chrome{height:2.4em}
  .vt-chrome span,.vt-icons>svg{display:none}
  .vt-shophead{justify-content:center;height:4em}
  .vt-cart{position:absolute;right:1.3em;top:50%;margin-top:-.9em}
  .vt-photo{height:13.6em;margin:0 1em}
  .vt-info{height:3.8em;padding:1em 1.2em 0}
  .vt-buy{height:3.6em;margin:.8em 1em 0}
  .vt-canvas{left:5em;top:1.6em;width:30em;height:36em}
  .vt-toast{left:9.2em;top:33.8em;width:21.6em;gap:.8em;padding:.9em 1em}
  .vt-check{width:3.4em;height:3.4em}
  .vt-toast-img{display:none}
}

@media(max-width:1150px){.hx-hero-vt .hx-hero-inner{grid-template-columns:minmax(0,1fr);justify-items:center;gap:30px;padding-block:130px 36px}.hx-hero-copy{align-items:center;text-align:center}.hx-hero-vt .hx-hero-title{max-width:1240px;font-size:clamp(30px,4.2vw,60px);text-align:center}.hx-hero-vt .hx-hero-text{margin:24px 0 34px}.hx-vitrine{max-width:600px}}
@media(max-width:600px){.hx-hero-vt .hx-hero-inner{padding-block:118px 24px;gap:32px}.hx-hero-vt .hx-hero-title{font-size:clamp(28px,8.6vw,38px)}.hx-hero-vt .hx-hero-text{font-size:16px;margin:20px 0 28px}.hx-vitrine{width:100vw;max-width:none;margin-inline:calc(50% - 50vw)}}

/* Ordem das camadas igual a profundidade (--z), para o caso de o navegador achatar o 3D (no motor do Safari, em 16/10/2026,
   os cards Dados e Otimizacao do celular ficavam atras da loja, com o texto cortado). No 3D de verdade nada muda. */
.vt-glow,.vt-ring,.vt-comet{z-index:0}
.vt-shop{z-index:1}
.vt-canvas{z-index:2}
.vt-card{z-index:3}
.vt-toast{z-index:4}
.vt-cursor{z-index:5}