/* Marca Local — carrosséis da Home (banners, Empresas em Destaque, categorias, recarga de celulares).
   IMPORTANTE: este arquivo estiliza SÓ os contêineres. Nenhuma regra aqui
   atinge .ml-biz, .ml-biz__*, .biz-icon, .biz-info ou qualquer parte interna do card de anunciante
   (o CSS dele continua em main.css, intacto). */

/* ==========================================================================
   Motor de carrossel (compartilhado)
   Os slides ficam empilhados na MESMA célula de uma grade: a altura do
   carrossel é a do maior slide desde o primeiro render (sem salto/CLS) e
   nada depende de largura fixa (sem overflow horizontal).
   ========================================================================== */
.ml-car__trilha{
  list-style:none; margin:0; padding:0;
  display:grid; overflow:hidden; max-width:100%;
  touch-action:pan-y;          /* rolagem vertical da página continua livre */
}
.ml-slide{
  grid-area:1 / 1; min-width:0;
  visibility:hidden;            /* inativo: fora da ordem de Tab e dos leitores de tela */
  transition:transform .55s cubic-bezier(.22,.8,.26,1);
  will-change:transform;
}
.ml-slide.is-ativo,
.ml-slide.is-movendo{ visibility:visible; }

/* ---- Controles ---- */
.ml-car__controles{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
}
.ml-car__controles[hidden]{ display:none; }
.ml-car__btn{
  width:44px; height:44px; /* alvo de toque */
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
  background:var(--surface); color:var(--primary); font-size:13px;
}
.ml-car__btn:hover{ background:var(--bg); }
.ml-car__btn:focus-visible,
.ml-car__ponto:focus-visible,
.ml-cats__seta:focus-visible,
.ml-banner__midia:focus-visible,
.ml-banner__ver:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.ml-car__pausa{ margin-left:6px; }
.ml-car__pontos{ display:flex; align-items:center; gap:2px; }
.ml-car__ponto{
  position:relative; width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;
}
.ml-car__ponto::after{
  content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--line); transition:transform .2s, background .2s;
}
.ml-car__ponto.is-ativo::after{ background:var(--primary); transform:scale(1.35); }
.ml-car__contador{ min-width:34px; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); }

/* ==========================================================================
   Banners
   ========================================================================== */
.ml-banners{ margin-top:18px; }

.ml-banner__midia{
  position:relative; display:block; overflow:hidden; border-radius:18px;
  background:var(--line);
  aspect-ratio:var(--ml-ar-d, 8 / 3);       /* proporção real da imagem desktop */
  box-shadow:0 8px 22px -14px rgba(22,36,31,.45);
}
.ml-banner__midia picture{ display:block; width:100%; height:100%; }
.ml-banner__midia img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){
  .ml-banner__midia{ aspect-ratio:var(--ml-ar-m, var(--ml-ar-d, 8 / 3)); } /* proporção da imagem mobile */
}
.ml-banner__tag{
  position:absolute; top:10px; left:10px; padding:2px 8px; border-radius:999px;
  background:rgba(22,36,31,.62); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}

/* Formato 2: o card existente entra como está, dentro do seu <ul class="biz-list">. */
.ml-banner__card{ min-width:0; }

/* Formato 3 */
.ml-banner__info{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 4px 0;
}
.ml-banner__info-texto{ min-width:0; }
.ml-banner__nome{
  display:block; font-size:16px; font-weight:700; line-height:1.25; color:var(--ink);
  overflow-wrap:anywhere;
}
.ml-banner__info .ml-biz__meta{ margin:3px 0 0; }
.ml-banner__ver{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px;
  font-size:13.5px; font-weight:700; color:var(--primary-light); text-decoration:none;
}
.ml-banner__ver i{ font-size:11px; }

/* ==========================================================================
   Empresas em Destaque — grupos de 3 (coluna), transição horizontal
   ========================================================================== */
.ml-dest__cabecalho{ align-items:center; }
.ml-dest__trilha{ padding:2px 2px 4px; }  /* respiro para a sombra do card não ser cortada */
.ml-dest__grupo > .biz-list{ margin-top:0; }
.ml-dest__grupo .ml-biz:last-child .ml-biz__card{ margin-bottom:4px; }
.ml-dest .ml-car__controles{ margin-top:6px; }

/* ==========================================================================
   Categorias — uma linha, rolagem horizontal
   (continuam sendo <a href> reais; o JS só acrescenta as setas no desktop)
   ========================================================================== */
.ml-cats-wrap{ position:relative; }
.ml-cats{
  display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  margin:0 -18px; padding:2px 18px 6px;
  scroll-snap-type:x proximity; scroll-padding:0 18px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ml-cats::-webkit-scrollbar{ display:none; }
.ml-cats .cat-tile{ flex:none; width:76px; scroll-snap-align:start; }

.ml-cats__seta{
  position:absolute; top:22px; z-index:2;
  width:36px; height:36px; display:none; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
  background:var(--surface); color:var(--primary); font-size:12px;
  box-shadow:0 6px 16px -8px rgba(22,36,31,.5);
}
.ml-cats__seta--prev{ left:-6px; }
.ml-cats__seta--next{ right:-6px; }
/* Setas só onde há mouse: no celular vale o gesto de arrastar. */
@media (hover:hover) and (pointer:fine){
  .ml-cats__seta:not([hidden]){ display:inline-flex; }
}

/* ==========================================================================
   Recarga de Celulares — faixa arrastável (visual igual ao "Nossos Parceiros")
   Duas listas idênticas lado a lado; o JS rola e faz o loop. Sem JS continua
   sendo uma faixa rolável com dedo/mouse.
   ========================================================================== */
.ml-recarga{
  margin:0 -18px; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  cursor:grab; user-select:none; -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ml-recarga::-webkit-scrollbar{ display:none; }
.ml-recarga.is-arrastando{ cursor:grabbing; }
.ml-recarga__trilha{ display:flex; width:max-content; }
.ml-recarga__lista{ display:flex; flex:none; list-style:none; margin:0; padding:0; }
.ml-recarga__item{ flex:none; padding:4px 7px; }
.ml-recarga__item a{
  display:flex; align-items:center; justify-content:center;
  width:132px; height:78px; padding:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 4px 14px -10px rgba(22,36,31,.3);
  color:var(--ink); text-decoration:none; -webkit-user-drag:none;
}
.ml-recarga__item a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.ml-recarga__logo{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  pointer-events:none; -webkit-user-drag:none;   /* o arraste vale para o cartão, não para a imagem */
}
.ml-recarga__nome{ font-size:13px; font-weight:700; line-height:1.2; text-align:center; overflow-wrap:anywhere; }

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ml-slide{ transition:none; }
  .ml-car__ponto::after{ transition:none; }
  .ml-cats{ scroll-behavior:auto; }
  .ml-recarga{ scroll-behavior:auto; }
}