#vitrine{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;overflow:hidden;
  background-color:#fff;background-repeat:no-repeat;
  background-image:radial-gradient(120% 220px at 50% -30px,
    var(--nucleo) 0,var(--saia) 56%,#fff 100%);
  transition:opacity .38s cubic-bezier(.2,.8,.25,1)}
#vitrine.viva{opacity:1;pointer-events:auto}
#vitrine>*{transition:transform .42s cubic-bezier(.2,.8,.25,1);transform:translateY(16px)}
#vitrine.viva>*{transform:none}

body:has(#vitrine.viva) .dir,
body:has(#vitrine.viva) .assina{opacity:0;pointer-events:none;transition:opacity .3s}

#vitrine .vfita{position:relative;display:flex;align-items:center;flex:none;
  padding:clamp(128px,15.5vh,152px) clamp(74px,9vw,120px) 0}
#vitrine .gavetas{display:flex;gap:7px;flex:1;padding:3px 1px;
  overflow-x:auto;scrollbar-width:none;justify-content:safe center}
#vitrine .gavetas::-webkit-scrollbar{display:none}
#vitrine .vicones{position:absolute;right:clamp(18px,3.4vw,44px);bottom:2px;display:flex;gap:6px}
#vitrine .vico{width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1.4px solid rgba(8,46,171,.14);background:#fff;color:var(--azul);
  display:grid;place-items:center;transition:.16s}
#vitrine .vico:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
#vitrine .vico svg{width:20px;height:20px} #vitrine .vdir{text-align:right}

#vitrine .vmiolo{flex:1;min-height:0;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,.62fr);
  gap:clamp(12px,2.2vw,36px);padding:10px clamp(18px,3.4vw,44px) 0}
#vitrine .vcat{font-size:11.5px;font-weight:700;letter-spacing:.13em;opacity:.55;
  text-transform:uppercase;color:var(--azul);margin-bottom:11px}
#vitrine .vnome{font-family:Anton,var(--f),sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(28px,3.7vw,50px);line-height:.95;
  color:var(--azul);transform:skewX(-9deg);transform-origin:0 100%;
  margin-bottom:15px;text-wrap:balance}

#vitrine .vdiz{font-size:clamp(12.5px,.98vw,14.5px);line-height:1.68;
  opacity:.72;max-width:46ch;margin-bottom:22px}
#vitrine .vctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

#vitrine .vcta{border:0;border-radius:30px;padding:13px 23px;font:inherit;gap:9px;
  font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;transition:.16s;color:var(--azul)}
#vitrine .vcta.forte{background:var(--amarelo);box-shadow:0 10px 22px rgba(202,192,0,.28)}
#vitrine .vcta.forte:hover{transform:translateY(-2px)} #vitrine .vcta svg{width:19px;height:19px}
#vitrine .vcta.fraco{background:none;border:1.4px solid rgba(8,46,171,.2);
  opacity:.8;font-weight:600}
#vitrine .vcta.fraco:hover{opacity:1;border-color:var(--azul)}

#vitrine .vpalco{position:relative;display:flex;align-items:center;
  justify-content:center;gap:clamp(10px,2.6vw,42px);height:100%;min-height:0}
#vitrine .vpalco::before{content:"";position:absolute;z-index:0;inset:-14% -22%;
  pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,
    #fff 0,#fff 62%,rgba(255,255,255,0) 100%)}
#vitrine .vseta{flex:none;border:0;background:none;cursor:pointer;opacity:.72;
  color:var(--azul);padding:10px 8px;display:grid;place-items:center;
  position:relative;z-index:3;transition:opacity .16s,scale .16s}
#vitrine .vseta svg{width:21px;height:32px}
#vitrine .vseta:hover{opacity:1;scale:1.12} #vitrine .vseta:active{scale:.94}

#vitrine .vfrasco{--alt:min(52vh,430px);position:relative;z-index:2;height:var(--alt);
  width:min(calc(var(--ar,.56) * var(--alt)),100%);perspective:1400px;
  transition:width .5s cubic-bezier(.22,.72,.24,1)}

#vitrine .vcarta{position:absolute;top:0;left:50%;translate:-50% 0;height:100%;
  width:calc(var(--ar,.56) * var(--alt));max-width:100%;
  transform-style:preserve-3d;will-change:transform,opacity}
#vitrine .vtilt{height:100%;transform-style:preserve-3d;transition:transform .18s ease-out;
  transform:rotateY(var(--vtilt,0deg)) rotateX(var(--vtiltx,0deg)) translateX(var(--vdesloca,0px))}
#vitrine .vboia{height:100%;animation:vboia 5s ease-in-out infinite}

@keyframes vboia{0%,100%{translate:0 0}50%{translate:0 -24px}}
#vitrine .vcarta img{width:100%;height:100%;object-fit:contain;display:block}

@keyframes vmergulho-sai{
  from{transform:translate(0,0) translateZ(0) scale(1);opacity:1;filter:blur(0)}
  to{transform:translate(-24%,-20%) translateZ(-420px) scale(.62);opacity:0;filter:blur(5px)}}
@keyframes vmergulho-entra{
  from{transform:translate(34%,30%) translateZ(240px) scale(1.5);opacity:0;filter:blur(4px)}
  to{transform:translate(0,0) translateZ(0) scale(1);opacity:1;filter:blur(0)}}

@media (prefers-reduced-motion:reduce){
  #vitrine .vboia{animation:none}
  #vitrine .vtilt{transition:none;transform:none}
  #vitrine .vcarta{animation-duration:.01ms!important}}

#vitrine .vsemfoto{width:200px;height:280px;border-radius:14px;padding:22px;
  border:1.5px dashed rgba(8,46,171,.22);display:grid;place-items:center;
  text-align:center;font-size:12.5px;line-height:1.5;opacity:.5}

#vitrine .vrot{font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.42;margin-bottom:11px}
#vitrine .vtams{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#vitrine .vtam{min-width:54px;height:54px;padding:0 15px;border-radius:50px;
  border:1.4px solid rgba(8,46,171,.16);background:#fff;color:var(--tinta);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.16s}
#vitrine .vtam:hover{border-color:var(--azul)}
#vitrine .vtam.on{background:var(--azul);color:#fff;border-color:var(--azul)}
#vitrine .vprox:hover{opacity:1;background:rgba(8,46,171,.04)}
#vitrine .vuso{margin:22px 0 0 auto;font-size:12px;opacity:.5;
  line-height:1.55;max-width:24ch}

#vitrine .vpe{flex:none;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;padding:12px clamp(18px,3.4vw,44px) 20px}
#vitrine .vredes{display:flex;gap:12px}

#vitrine .vredes a,#vitrine .vredes .semlink{width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;color:var(--azul);
  opacity:.5;text-decoration:none;transition:.16s}
#vitrine .vredes a:hover{opacity:1;background:rgba(8,46,171,.06)}

#vitrine .vredes .semlink{opacity:.66}
#vitrine .vredes svg{width:21px;height:21px}
#vitrine .vprox{display:flex;align-items:center;gap:13px;cursor:pointer;
  background:none;border:0;color:inherit;font:inherit;opacity:.75;
  padding:6px 8px;border-radius:16px;transition:.2s}
#vitrine .vrotx{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  text-align:right;line-height:1.6;opacity:.55}
#vitrine .vrotx b{display:block;font-size:12.5px;letter-spacing:0;
  text-transform:none;opacity:1;color:var(--azul);font-weight:700;max-width:20ch}
#vitrine .vprox figure{position:relative;height:62px;margin-bottom:9px;
  aspect-ratio:var(--ar,.56)}
#vitrine .vprox img{width:100%;height:100%;object-fit:contain;display:block;
  position:relative;z-index:2}

@media (max-width:960px){

  #vitrine .vfita{padding:108px 88px 0 10px}
  #vitrine .vicones{right:10px;gap:5px}
  #vitrine .vico{width:34px;height:34px} #vitrine .vico svg{width:18px;height:18px}

  #vitrine .gavetas{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
    mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  #vitrine .vmiolo{grid-template-columns:1fr;text-align:center;gap:8px;
    grid-template-rows:auto minmax(0,1fr) auto;padding-top:2px}
  #vitrine .vnome{transform-origin:50% 100%;margin-bottom:9px;font-size:clamp(26px,7.4vw,34px)}

  #vitrine .vdiz{max-width:100%;margin:0 0 14px;font-size:13px;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  #vitrine .vctas{justify-content:center;gap:8px;flex-wrap:nowrap}
  #vitrine .vcta{padding:12px 16px;font-size:13px}
  #vitrine .vdir{text-align:center}
  #vitrine .vtams{justify-content:center} #vitrine .vuso{display:none}
  #vitrine .vrot{margin-bottom:8px;font-size:10px} #vitrine .vpe{gap:8px}
  #vitrine .vtam{min-width:48px;height:46px;font-size:12.5px;padding:0 13px}
  #vitrine .vfrasco{--alt:min(32vh,250px)}

  #vitrine .vtilt{transform:none}
  #vitrine .vseta{padding:8px 2px} #vitrine .vseta svg{width:16px;height:25px}
  #vitrine .vpe{padding:6px 12px 12px}
  #vitrine .vredes{gap:4px} #vitrine .vredes svg{width:19px;height:19px}
  #vitrine .vredes a,#vitrine .vredes .semlink{width:32px;height:32px}
  #vitrine .vprox{gap:9px;padding:4px} #vitrine .vprox figure{height:40px}
  #vitrine .vrotx{font-size:9.5px} #vitrine .vrotx b{font-size:11.5px;max-width:13ch}
}