/* Cores do Site (fase 6): cada --kX-rrggbb é uma cor de hoje ligada a uma das 12 cores de marca. Estes são os valores padrão;
   quando o Daniel troca as cores na dash, a página traz os novos valores no próprio HTML (html:root, vence este bloco). */
:root{--kc-16181d:22,24,29;--kc-1a1f2b:26,31,43;--kc-1b1e24:27,30,36;--kf-121419:18,20,25}
/* Banners da home e do cassino (includes/banners-carousel.php). Imagens na proporção 2,4:1 (dash › Banners).
   Computador: cards lado a lado como na betamos (480×200, 8 px entre eles, trilho que rola com encaixe e setas brancas
   nas bordas). Celular (≤720px): um banner por vez (800×333), com setas, bolinhas e arrastar. */
.fbb{position:relative;margin-bottom:18px}
.fbb-slide a,.fbb-slide picture{display:block}
.fbb-slide img{display:block;width:100%;height:auto;aspect-ratio:1200/500;object-fit:cover;-webkit-user-drag:none}
.fbb-arrow{position:absolute;top:50%;transform:translateY(-50%);padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .15s,transform .15s}
.fbb-arrow:active{transform:translateY(-50%) scale(.92)}

/* ---- computador ---- */
@media(min-width:721px){
  .fbb-track{display:grid;grid-auto-flow:column;grid-auto-columns:480px;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 2px;-webkit-user-select:none;user-select:none}
  .fbb-track::-webkit-scrollbar{display:none}
  .fbb-track.drag{scroll-snap-type:none;cursor:grabbing}
  .fbb-slide{scroll-snap-align:start;border-radius:12px;overflow:hidden;background:rgb(var(--kc-1b1e24));box-shadow:0 2px 10px rgba(0,0,0,.14)}
  .fbb-slide img{transition:transform .3s}
  .fbb-slide a:hover img{transform:scale(1.03)}
  .fbb-dots{display:none}
  .fbb-arrow{width:34px;height:34px;border:0;background:rgba(255,255,255,.92);color:rgb(var(--kc-1a1f2b));box-shadow:0 2px 8px rgba(0,0,0,.35)}
  .fbb-arrow:hover{background:#fff}
  .fbb-arrow.prev{left:-12px}.fbb-arrow.next{right:-12px}
  .fbb-arrow svg{width:16px;height:16px}
  .fbb.fits .fbb-arrow{display:none} /* todos os banners cabem na tela: sem setas */
}

/* ---- celular: um banner por vez ---- */
@media(max-width:720px){
  .fbb{border-radius:14px;overflow:hidden;background:rgb(var(--kc-16181d))}
  .fbb-track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .fbb-slide{flex:0 0 100%;min-width:0}
  .fbb-slide img{aspect-ratio:800/333}
  .fbb-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
  .fbb-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer;transition:all .2s}
  .fbb-dot.active{width:18px;border-radius:5px;background:#fff}
  .fbb-arrow{width:30px;height:30px;border:1px solid rgba(255,255,255,.16);background:rgba(var(--kf-121419),.78);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  .fbb-arrow.prev{left:8px}.fbb-arrow.next{right:8px}
  .fbb-arrow svg{width:14px;height:14px}
}