/* Trilion Signature — Mosaico "O que você pode nos pedir"
   Faixa horizontal de fotos em formatos variados (wide / tall / square), arrastável,
   com snap, progresso e paralaxe sutil. Só transform/opacity animam. */

.ts-mz{--col:236px;--row:300px;--gap:14px;--pad:max(28px,calc((100vw - var(--maxw)) / 2 + 28px));
  position:relative;background:var(--onyx-2);border-top:1px solid var(--hair);overflow:hidden;
  padding:clamp(64px,8vw,112px) 0 clamp(56px,7vw,92px)}
.ts-mz:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 18% 0%,rgba(201,168,76,.09),transparent 70%)}

.ts-mz .mz-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(28px,4vw,46px)}
.ts-mz .mz-head h2{font-family:var(--disp);font-weight:300;font-size:clamp(32px,4.8vw,56px);line-height:1.06;letter-spacing:-.01em;margin:14px 0 14px}
.ts-mz .mz-head h2 em{font-style:italic;color:var(--gold-light)}
.ts-mz .mz-head p{color:var(--muted);max-width:52ch;margin:0}

.ts-mz .mz-ctl{display:flex;gap:10px;flex:none}
.ts-mz .mz-b{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--gold-light);
  display:grid;place-items:center;padding:0;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .12s}
.ts-mz .mz-b:before{content:"";position:absolute;inset:-6px}
.ts-mz .mz-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ts-mz .mz-b:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--onyx)}
.ts-mz .mz-b:active:not(:disabled){transform:scale(.94)}
.ts-mz .mz-b:disabled{opacity:.32;cursor:default}
.ts-mz .mz-b:focus-visible,.ts-mz .mz-vp:focus-visible,.ts-mz .mz-more a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* faixa */
.ts-mz .mz-vp{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
  scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;touch-action:pan-x pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 48px),transparent)}
.ts-mz .mz-vp::-webkit-scrollbar{display:none}
.ts-mz .mz-vp.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
/* durante a rolagem automática o encaixe sai, senão ele devolve cada passo ao cartão mais próximo */
.ts-mz .mz-vp.is-auto{scroll-snap-type:none}
.ts-mz .mz-track{display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(2,var(--row));grid-auto-columns:var(--col);
  gap:var(--gap);width:max-content;padding:0 var(--pad)}

/* tiles */
.ts-mz .mz-t{position:relative;margin:0;overflow:hidden;border-radius:3px;background:#2A241C;box-shadow:0 0 0 1px var(--hair);
  scroll-snap-align:start;isolation:isolate}
.ts-mz .mz-t.w{grid-column:span 2}
.ts-mz .mz-t.t{grid-row:span 2}
.ts-mz .mz-ph{position:absolute;inset:0 -18px;transform:translate3d(calc(var(--p,0) * -14px),0,0);will-change:transform}
.ts-mz .mz-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 42%);
  transform:scale(1.02);transition:transform .9s cubic-bezier(.16,1,.3,1);-webkit-user-drag:none;user-select:none}
.ts-mz .mz-t:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,13,10,0) 36%,rgba(16,13,10,.58) 62%,rgba(16,13,10,.94))}
.ts-mz figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 22px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ts-mz figcaption .k{display:block;font-family:var(--disp);font-style:italic;font-size:16px;color:var(--gold-light);margin-bottom:8px}
.ts-mz figcaption h3{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(18px,1.7vw,24px);line-height:1.2;color:var(--cream);text-wrap:balance}
.ts-mz figcaption i{display:block;width:0;height:1px;background:var(--gold);margin-top:14px;transition:width .5s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){
  .ts-mz .mz-t:hover .mz-ph img{transform:scale(1.07)}
  .ts-mz .mz-t:hover figcaption{transform:translateY(-4px)}
  .ts-mz .mz-t:hover figcaption i{width:38px}
}

/* revelação escalonada (só quando o JS está ativo) */
.ts-mz.js .mz-t{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms)}
.ts-mz.js .mz-t.in{opacity:1;transform:none}

/* progresso + rodapé */
.ts-mz .mz-foot{position:relative;display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:clamp(24px,3vw,36px)}
.ts-mz .mz-prog{position:relative;flex:1;height:1px;background:var(--hair)}
.ts-mz .mz-prog i{position:absolute;left:0;top:-1px;height:3px;width:var(--w,20%);background:var(--gold);border-radius:2px;
  transform:translateX(var(--x,0px));will-change:transform}
.ts-mz .mz-more{flex:none;margin:0;font-size:15px;letter-spacing:.04em;color:var(--muted)}
.ts-mz .mz-more a{color:var(--gold-light);border-bottom:1px solid var(--hair);padding-bottom:2px;transition:border-color .2s,color .2s}
.ts-mz .mz-more a:hover{color:var(--cream);border-color:var(--gold)}
.ts-mz .mz-note{position:relative;margin:18px 0 0;font-size:14px;color:#8A8070}

/* mobile */
@media (max-width:760px){
  .ts-mz{--col:44vw;--row:60vw;--gap:10px;--pad:20px}
  .ts-mz .mz-head{flex-direction:column;align-items:flex-start;gap:20px}
  .ts-mz .mz-ctl{display:none}
  .ts-mz .mz-vp{scroll-snap-type:x mandatory}
  .ts-mz figcaption{padding:0 14px 16px}
  .ts-mz figcaption .k{font-size:14px;margin-bottom:6px}
  .ts-mz figcaption h3{font-size:17px;line-height:1.22}
  .ts-mz .mz-foot{flex-direction:column;align-items:stretch;gap:16px}
}
@media (min-width:1500px){.ts-mz{--col:260px;--row:330px}}

@media (prefers-reduced-motion:reduce){
  .ts-mz .mz-ph{transform:none;will-change:auto}
  .ts-mz .mz-ph img,.ts-mz figcaption,.ts-mz figcaption i,.ts-mz .mz-b{transition:none}
  .ts-mz.js .mz-t{opacity:1;transform:none;transition:none}
}
@media (forced-colors:active){
  .ts-mz .mz-t{border:1px solid CanvasText;box-shadow:none}
  .ts-mz figcaption h3,.ts-mz figcaption .k{color:CanvasText;background:Canvas}
  .ts-mz .mz-prog i{background:Highlight}
  .ts-mz .mz-b{border-color:ButtonText;color:ButtonText}
}