:root{
    /* Variáveis principais (fáceis de alterar) */
    --logos-visible-count-desktop: 3;
    --logos-visible-count-mobile: 3;
    --logos-item-height: 64px;
    --logos-item-gap: 1rem;
    --logos-duration-per-item: 1.6s;
    --logos-padding: 6px;
    --logos-max-item-width: 160px;
  }

  .brand-card {
    background: var(--banner-info-bg);
    border-radius: var(--banner-info-border-radius);
    box-shadow: var(--banner-info-shadow);
    padding: 22px;
    }
  
  /* Base do módulo */
  .logos-module {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
  }
  
  /* Layout 70/30 */
  .logos-module .d-flex {
    gap: 1rem;
  }
  .module-left {
    flex: 0 0 70%;
    max-width: 70%;
    padding-right: 1rem;
  }
  .module-right {
    flex: 0 0 25%;
    max-width: 25%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  
  /* Mobile: empilha e mantém animação */
  @media (max-width: 767.98px) {
    .module-left, .module-right {
      flex: 0 0 100%;
      max-width: 100%;
      padding-right: 0;
    }
    .module-right { margin-top: 1rem; }
  }
  
  /* Texto */
  .logos-module .title { font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-bottom: .25rem; }
  .logos-module .subtitle { color: #6c757d; margin-bottom: .75rem; }
  .logos-module .description { color: #495057; }
  
  /* Slider - desktop (vertical) */
  .logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    --visible-count: var(--logos-visible-count-desktop);
    height: calc(var(--visible-count) * var(--logos-item-height) + (var(--visible-count) - 1) * var(--logos-item-gap));
    display: flex;
    align-items: center;
  }
  
  .logo-slider .logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--logos-item-gap);
    align-items: flex-start;
    will-change: transform;
    animation: slide-up calc(var(--items) * var(--logos-duration-per-item)) linear infinite;
  }
  
  .logo-slider .logo-item {
    height: var(--logos-item-height);
    display: flex;
    align-items: center;
    padding: .125rem .5rem;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  
  .logo-img {
    max-height: 100%;
    max-width: var(--logos-max-item-width);
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
  }
  
  /* animação vertical (desktop) */
  @keyframes slide-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
  
  /* Respeitar preferências de redução de movimento */
  @media (prefers-reduced-motion: reduce) {
    .logo-slider .logos { animation: none !important; }
  }
  
  /* ============================
     MOBILE: alterar para SLIDE HORIZONTAL
     ============================ */
  /* Em mobile mantemos o loop infinito, mas a lista vira uma linha horizontal
     que anima da esquerda para a direita (ou direita para esquerda) continuamente.
     A lista já está duplicada no servidor (logosLoop), por isso a animação usa -50%.
  */
  @media (max-width: 767.98px) {
    /* ajustar frame para altura única (uma linha de logos) */
    .logo-slider {
      --visible-count: var(--logos-visible-count-mobile);
      /* altura do frame = item height (uma linha) */
      height: var(--logos-item-height);
      align-items: stretch;
    }
  
    .logo-slider .logos {
      /* muda para linha horizontal */
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--logos-item-gap);
      align-items: center;
      /* animação horizontal */
      animation: slide-left calc(var(--items) * var(--logos-duration-per-item)) linear infinite;
    }
  
    /* cálculo prático da largura de cada item visível no frame (ajustável) */
    .logo-slider {
      /* largura do frame é 100% do container; usamos variável para calcular item width */
      --mobile-item-width: calc((100% - (var(--logos-visible-count-mobile) - 1) * var(--logos-item-gap)) / var(--logos-visible-count-mobile));
    }
  
    .logo-slider .logo-item {
      height: 100%;
      /* fixa a largura do item para que o frame mostre exatamente --logos-visible-count-mobile itens */
      flex: 0 0 var(--mobile-item-width);
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: .125rem .5rem;
    }
  
    .logo-img {
      /* ajustar imagem para caber no item horizontalmente */
      max-height: calc(var(--logos-item-height) - 6px);
      max-width: 100%;
      height: auto;
      width: auto;
    }
  
    /* animação horizontal */
    @keyframes slide-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
  }
  
  /* Pausa ao hover/focus (útil em mobile quando houver hover em navegadores que suportem) */
  .logo-slider:focus-within .logos,
  .logo-slider:hover .logos {
    animation-play-state: paused;
  }