/* Axis360 · carrossel-videos.css — a galeria de vídeos da home (#videos e #videos-empresa, includes/carrossel-modelo.php;
   site-galeria-videos 24/10, o molde da home da Fever).
   A faixa começa na coluna do conteúdo e sangra até a borda direita; cartões verticais 2:3 (427 × 640 no desktop,
   ~74 vw no celular) com cantos de 16 px; o da frente inteiro e os seguintes em escada (−12 % de altura por passo,
   centrados); título branco sobre o degradê; botões redondos escuros no canto. --k = a distância até o cartão da frente
   (o JS a escreve a cada rolagem; sem JS, o nth-child). Claro e escuro iguais (os cartões já são escuros). */

.gal{--gal-w:clamp(236px,74vw,427px);--gal-h:calc(var(--gal-w) * 1.5);--gal-gap:10px;--gal-r:16px;
  --gal-pad:max(16px,calc((100vw - var(--wrap,1120px)) / 2));}
@media (min-width:768px){.gal{--gal-gap:12px;}}

.gal-stage{margin-top:40px;}
@media (min-width:768px){.gal-stage{margin-top:56px;}}

.gal-track{
  list-style:none;margin:0;padding:0 var(--gal-pad) 0 var(--gal-pad);height:var(--gal-h);
  display:flex;align-items:center;gap:var(--gal-gap);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--gal-pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gal-track::-webkit-scrollbar{display:none;}
.gal-track:focus-visible{outline:2px solid var(--gold,#d7c49a);outline-offset:-2px;}
@media (prefers-reduced-motion:no-preference){.gal-track{scroll-behavior:smooth;}}

.gal-item{flex:0 0 var(--gal-w);min-width:0;scroll-snap-align:start;--k:0;
  height:calc(var(--gal-h) * (1 - .12 * var(--k)));transition:height .5s var(--ease,cubic-bezier(.2,.7,.2,1));}
/* sem JS: a escada a partir do 1º */
.gal-item:nth-child(2){--k:1;} .gal-item:nth-child(3){--k:2;} .gal-item:nth-child(4){--k:3;} .gal-item:nth-child(n+5){--k:4;}
html.js .gal-item{--k:0;}
html.js .gal-item[data-k="1"]{--k:1;} html.js .gal-item[data-k="2"]{--k:2;} html.js .gal-item[data-k="3"]{--k:3;} html.js .gal-item[data-k="4"]{--k:4;}
/* o último espaço: o derradeiro cartão também chega à frente */
.gal-track::after{content:"";flex:0 0 calc(100vw - var(--gal-pad) - var(--gal-w));}

.gal-card{
  position:relative;height:100%;overflow:hidden;border-radius:var(--gal-r);background:#0b0b0d;isolation:isolate;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 40px -28px rgba(0,0,0,.45);
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.gal-poster,.gal-poster img{display:block;width:100%;height:100%;}
.gal-poster{position:absolute;inset:0;z-index:1;}
.gal-poster img{object-fit:cover;object-position:50% 40%;}
.gal-poster-ligacao img{object-position:50% 52%;}
.gal-poster-boleto img{object-position:50% 62%;}
.gal-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 40%;z-index:2;opacity:0;transition:opacity .4s ease;}
.gal-item.is-on .gal-video{opacity:1;}

/* o link do cartão: sem JS abre o .mp4; com JS traz o cartão para a frente (ou pausa/toca o da frente); o título em cima do degradê */
.gal-abrir{
  position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding:0 18px 22px;
  color:#fff;text-decoration:none;cursor:pointer;border-radius:inherit;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.62) 100%);
  -webkit-tap-highlight-color:transparent;
}
.gal-abrir:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--gold,#d7c49a);}
.gal-titulo{
  display:block;width:100%;text-align:center;font-family:var(--font-display,inherit);font-weight:600;
  font-size:clamp(1.125rem,1.3vw + .5rem,1.625rem);line-height:1.2;letter-spacing:-.015em;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.gal-item[data-k="3"] .gal-titulo,.gal-item[data-k="4"] .gal-titulo{font-size:clamp(1rem,1vw + .4rem,1.25rem);}
/* a legenda: o título em todos; a frase só no cartão da frente (a escada guarda só o título, como na Fever) */
.gal-legenda{display:block;width:100%;}
.gal-texto{display:block;margin-top:6px;text-align:center;font-size:.9375rem;line-height:1.4;color:rgba(255,255,255,.82);max-height:2.8em;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;}
.gal-item[data-k="1"] .gal-texto,.gal-item[data-k="2"] .gal-texto,.gal-item[data-k="3"] .gal-texto,.gal-item[data-k="4"] .gal-texto,html:not(.js) .gal-item:nth-child(n+2) .gal-texto{opacity:0;max-height:0;margin-top:0;}

/* o play do cartão que não é o da frente (como na Fever); some no da frente */
.gal-play{
  position:absolute;top:14px;right:14px;z-index:4;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#f2f3f3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease,ease);
}
.gal-play svg{width:24px;height:24px;margin-left:3px;fill:currentColor;}
.gal-item.is-on .gal-play{opacity:0;transform:scale(.8);}
.gal-abrir:hover ~ .gal-play{transform:scale(1.06);}

/* os botões do cartão da frente: som e pausa */
.gal-botoes{position:absolute;top:14px;right:14px;z-index:5;display:flex;gap:8px;}
.gal-botoes[hidden]{display:none;}
.gal-bt{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#f2f3f3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,transform .2s var(--ease,ease);
}
.gal-bt[hidden]{display:none;}
.gal-bt svg{width:22px;height:22px;fill:currentColor;}
.gal-bt svg .gal-ico-linha{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.gal-bt:hover{background:rgba(0,0,0,.75);transform:scale(1.06);}
.gal-bt:active{transform:scale(.96);}
.gal-bt:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:639px){.gal-bt{width:44px;height:44px;} .gal-bt svg{width:20px;height:20px;} .gal-play{width:48px;height:48px;}}

/* setas */
.gal-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;}
.gal-ctrl[hidden]{display:none;}
.gal-seta{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--bg,#fbfbfd);color:var(--text,#1d1d1f);
  box-shadow:0 0 0 1px var(--line,rgba(0,0,0,.08)),0 6px 16px -10px rgba(0,0,0,.3);
  transition:background .2s ease,opacity .2s ease,transform .2s var(--ease,ease);
}
.gal-seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.gal-seta:hover{transform:scale(1.05);}
.gal-seta[aria-disabled="true"]{opacity:.35;cursor:default;transform:none;}
.gal-seta:focus-visible{outline:2px solid var(--gold,#d7c49a);outline-offset:3px;}
.gal-pos{min-width:3.5em;text-align:center;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--sec,#6e6e73);}

@media (prefers-reduced-motion:reduce){
  .gal-item,.gal-video,.gal-play,.gal-bt,.gal-seta{transition:none;}
}