/* Carrossel de bastidores — faixa em movimento contínuo com fotos e vídeos do escritório.
   Reutilizável: basta o markup .bastidores + este CSS + assets/js/bastidores.js. */
.bastidores{background:var(--navy-900,#071a33);color:#fff;padding:72px 0 64px;overflow:hidden}
.bastidores .section-label{color:#e3a877}
.bastidores .section-title{color:#fff;max-width:24ch}
.bastidores-sub{max-width:620px;color:#c9d3e3;margin:0 0 32px}

.bastidores-faixa{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bastidores-trilho{display:flex;gap:16px;width:max-content;list-style:none;margin:0;padding:0;
  animation:bastidores-rolar 48s linear infinite}
.bastidores-faixa:hover .bastidores-trilho,
.bastidores-faixa:focus-within .bastidores-trilho,
.bastidores.pausado .bastidores-trilho{animation-play-state:paused}
@keyframes bastidores-rolar{to{transform:translateX(calc(-50% - 8px))}}

.bastidores-item{position:relative;flex:0 0 auto;width:260px;aspect-ratio:3/4;margin:0;
  border-radius:var(--r-lg,14px);overflow:hidden;background:var(--navy-700,#102f57)}
.bastidores-item img,.bastidores-item video{display:block;width:100%;height:100%;object-fit:cover}
.bastidores-item figcaption{position:absolute;left:10px;bottom:10px;right:10px;width:max-content;max-width:calc(100% - 20px);
  background:rgba(7,26,51,.82);color:#fff;font-size:.78rem;font-weight:500;line-height:1.3;
  padding:6px 10px;border-radius:var(--r-sm,6px)}

/* Tudo à esquerda: o botão flutuante do WhatsApp ocupa o canto direito da tela. */
.bastidores-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.bastidores-rodape a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bastidores-rodape a:hover{color:var(--brand,#ed7d31)}
.bastidores-pausa{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
  font:inherit;font-size:.85rem;padding:8px 14px;border-radius:999px;cursor:pointer}
.bastidores-pausa:hover{border-color:#fff}
.bastidores-pausa:focus-visible,.bastidores-rodape a:focus-visible{outline:2px solid var(--brand,#ed7d31);outline-offset:3px}

/* Versão clara: para quando a faixa fica logo abaixo de um topo escuro. */
.bastidores--claro{background:#fffcf8;color:var(--ink,#16202f)}
.bastidores--claro .section-label{color:var(--brand-deep,#bf5f18)}
.bastidores--claro .section-title{color:var(--navy-800,#0b2545)}
.bastidores--claro .bastidores-sub{color:var(--body,#44506b)}
.bastidores--claro .bastidores-item{background:var(--line-soft,#f0ebe3)}
.bastidores--claro .bastidores-rodape a{color:var(--navy-800,#0b2545)}
.bastidores--claro .bastidores-rodape a:hover{color:var(--brand-deep,#bf5f18)}
.bastidores--claro .bastidores-pausa{color:var(--navy-800,#0b2545);border-color:var(--line,#e7e1d7)}
.bastidores--claro .bastidores-pausa:hover{border-color:var(--navy-800,#0b2545)}

/* Páginas de venda (/br/...): usam o título e o subtítulo da própria página, em fundo branco. */
.bastidores--lp{background:#fff;padding:var(--s,64px) 0}
.bastidores--lp .bastidores-faixa{margin-top:36px}
.bastidores--lp .bastidores-rodape{justify-content:center}
.bastidores--lp .bastidores-item figcaption{font-family:inherit}

@media (max-width:700px){
  .bastidores{padding:56px 0 48px}
}
/* Só no celular o quadro diminui, e pouco: no 375 px cabem 1,5 quadro à vista. */
@media (max-width:480px){
  .bastidores-item{width:240px}
  .bastidores-trilho{gap:12px;animation-duration:44s}
  @keyframes bastidores-rolar{to{transform:translateX(calc(-50% - 6px))}}
}

/* Quem pede menos movimento recebe a faixa parada, rolável com o dedo ou o trackpad. */
@media (prefers-reduced-motion:reduce){
  .bastidores-faixa{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .bastidores-trilho{animation:none}
  .bastidores-trilho [aria-hidden="true"]{display:none}
  .bastidores-pausa{display:none}
}