/* =========================================================================
   AKROS — o carrossel (08/10): UMA fôrma para o Radar e os Depoimentos

   A mecânica do Carrossel.tsx da landing do Falcão: trilha horizontal com
   encaixe por cartão, setas que só existem quando há o que rolar e apagam
   nas pontas. 4 cartões por vez no computador, 3 · 2 abaixo; no celular, 1
   de borda a borda, sem setas, com o próximo aparecendo na beirada (é o que
   diz «arraste» sem texto). A partir do quinto, a fileira vira carrossel.
   O comportamento mora em js/carrossel.js.

   A trilha rola, então corta o que passa da caixa dela: o respiro de 28 px
   em cima e embaixo guarda a sombra e o contorno do foco, e a margem
   negativa devolve o espaço (o flow-root da caixa segura as margens).

   A cor das setas e da barra vem da seção (--seta-*, --barra-*); sem elas,
   vale a noite do Radar.
   ========================================================================= */
.carro{
  position:relative;display:flow-root;
  width:100%;max-width:1320px;margin-inline:auto;
}
.carro.tem-setas{padding-inline:40px}
@media (min-width:640px){ .carro.tem-setas{padding-inline:56px} }

.carro__trilha{
  --vao:clamp(14px,1.4vw,22px);
  --por-vez:4;
  list-style:none;margin:-28px 0;padding:28px 4px;
  display:flex;gap:var(--vao);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:4px;
  scrollbar-width:none;
}
.carro__trilha::-webkit-scrollbar{display:none}
.carro__trilha > *{
  flex:0 0 calc((100% - (var(--por-vez) - 1) * var(--vao)) / var(--por-vez));
  min-width:0;  /* sem isto, texto em nowrap alarga o cartão e cabem 3 */
  scroll-snap-align:start;
}
@media (max-width:1180px){ .carro__trilha{--por-vez:3} }
@media (max-width:860px){ .carro__trilha{--por-vez:2} }
@media (max-width:560px){
  .carro{width:auto;margin-inline:calc(-1 * var(--gutter))}
  .carro.tem-setas{padding-inline:0}
  .carro__trilha{padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .carro__trilha > *{flex-basis:86%}
  .carro__seta{display:none!important}
}

.carro__seta{
  position:absolute;top:50%;z-index:2;transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--seta-borda,rgba(255,255,255,.14));border-radius:calc(12px * var(--r,1));
  background:var(--seta-fundo,var(--gr-card-2));color:var(--seta-tinta,var(--ink));cursor:pointer;
  box-shadow:var(--seta-sombra,0 10px 24px -14px rgba(0,0,0,.8));
  transition:border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.carro__seta[hidden]{display:none}
.carro__seta--ant{left:0}
.carro__seta--prox{right:0}
.carro__seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carro__seta:hover{border-color:rgba(10,128,226,.6);color:var(--seta-tinta-forte,#FFFFFF)}
.carro__seta:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.carro__seta:disabled{opacity:.3;cursor:default;pointer-events:none}

/* os grupos (08/10, «transitando entre grupos»): um ponto por grupo; o da
   vez vira pílula e enche no tempo do avanço automático (--tempo, que o
   js/carrossel.js põe); a pausa fica ao lado. Pausado, a pílula fica cheia.
   Cada ponto é um botão de 24 px de alvo, o desenho é que é pequeno. */
.carro__barra{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:clamp(2px,.6vh,8px) auto 0;
}
.carro__barra[hidden]{display:none}
.carro__pontos{display:flex;align-items:center}
.carro__ponto{
  display:grid;place-items:center;width:22px;height:24px;padding:0;
  border:0;background:none;cursor:pointer;
  transition:width .45s var(--ease);
}
.carro__ponto i{
  position:relative;display:block;width:8px;height:8px;border-radius:8px;overflow:hidden;
  background:var(--ponto,rgba(255,255,255,.3));
  transition:width .45s var(--ease),background-color .25s var(--ease);
}
.carro__ponto:hover i{background:var(--ponto-forte,rgba(255,255,255,.55))}
.carro__ponto i::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--barra-luz,var(--accent-hi,#0A80E2));
  transform:scaleX(0);transform-origin:left center;
}
.carro__ponto.is-ativo{width:46px}
.carro__ponto.is-ativo i{width:34px}
.carro__ponto.is-ativo i::after{transform:none}
.carro__ponto.is-contando i::after{animation:carro-enche var(--tempo,6s) linear both}
@keyframes carro-enche{from{transform:scaleX(0)}to{transform:none}}
.carro__ponto:focus-visible{outline:2px solid var(--accent-hi);outline-offset:0;border-radius:8px}

.carro__pausa{
  display:grid;place-items:center;width:30px;height:30px;padding:0;margin-left:2px;
  border:1px solid var(--seta-borda,rgba(255,255,255,.14));border-radius:50%;
  background:transparent;color:var(--seta-tinta,var(--ink));cursor:pointer;
  opacity:.75;transition:opacity .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.carro__pausa svg{width:14px;height:14px}
.carro__pausa:hover{opacity:1;border-color:rgba(10,128,226,.6);color:var(--seta-tinta-forte,#FFFFFF)}
.carro__pausa:focus-visible{opacity:1;outline:2px solid var(--accent-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .carro__ponto,.carro__ponto i{transition:none}
  .carro__ponto.is-contando i::after{animation:none}
}