/* TechPag – Faixa de Bandeiras (sem JS)  — v2 */

/* Container/texto */
.tp-brands{ padding:24px 0 8px; background:#fff; }
.tp-brands__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.tp-brands__title{
  margin:0 0 12px;
  font-size:16px; line-height:1.4;
  color:#111; text-align:center;
}
.tp-brands__title span{ color:#6E4FFD; }

/* ===== Marquee ===== */
.tp-marquee{
  position:relative;
  overflow:hidden;
  display:flex;                        /* garante os 2 trilhos lado a lado */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tp-marquee__track{
  min-width:100%;                       /* cada trilho ocupa 100% */
  flex-shrink:0;                        /* não encolhe → fica na mesma linha */
  display:inline-flex;
  align-items:center;
  gap:28px;
  padding:8px 0;
  animation: tp-scroll var(--tp-speed, 22s) linear infinite;
  will-change: transform;
}

/* ===== Logos ===== */
/* usei uma classe nova (.tp-flag) para NÃO conflitar com sua .tp-logo do rodapé */
.tp-flag{
  height:28px;           /* mobile */
  width:auto;
  display:block;
  object-fit:contain;
  image-rendering:auto;
}

/* hover pausa (opcional) */
.tp-marquee:hover .tp-marquee__track{ animation-play-state: paused; }

/* Direita → Esquerda */
@keyframes tp-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

/* Anti-bullet (fallback) */
.tp-marquee ul{ list-style:none; margin:0; padding:0; }

/* ==== Desktop ==== */
@media (min-width:768px){
  .tp-brands{ padding:32px 0 12px; }
  .tp-brands__title{ font-size:18px; margin-bottom:16px; }
  .tp-flag{ height:36px; }
  .tp-marquee__track{ gap:36px; }
  :root{ --tp-speed:26s; }
}

/* Acessibilidade: reduz animação para quem prefere */
@media (prefers-reduced-motion: reduce){
  .tp-marquee__track{ animation:none; }
}
/* ===== Ajustes finos da faixa ===== */

/* 1) Controle centralizado: velocidade e gap */
:root{
  --tp-speed: 22s;   /* 18s mais rápido | 28s mais lento */
  --tp-gap:   36px;  /* espaço entre logos no desktop (28px no mobile) */
}

/* mobile primeiro */
.tp-marquee__track{
  gap: 28px;               /* mobile */
}
.tp-marquee__track + .tp-marquee__track{
  margin-left: -28px;      /* cola o 2º trilho no 1º -> some a “emenda” */
}

/* desktop */
@media (min-width:768px){
  .tp-marquee__track{ gap: var(--tp-gap); }
  .tp-marquee__track + .tp-marquee__track{
    margin-left: calc(var(--tp-gap) * -1);
  }
}

/* 2) Título: azul em vez de roxo */
.tp-brands__title span{
  color: #1E40B6; /* azul TECHPAG */
}

/* 3) Tentar uniformizar visualmente os PNGs sem recortar arquivo */
.tp-flag{
  height: 28px;            /* mobile */
  width: auto;
  display: block;
  object-fit: contain;
  vertical-align: middle;
  max-width: 140px;        /* evita logos muito largos */
}
@media (min-width:768px){
  .tp-flag{ height: 36px; max-width: 180px; }
}

/* (opcional) se algum PNG tiver muito “respiro”, ajuda a equilibrar */
.tp-flag{ padding: 2px 0; }  /* micro respiro, não aumenta muito a faixa */
/* Secção das bandeiras */
.brands { text-align:center; padding: 16px 0 8px; }

/* Deixa o link "bandeiras e carteiras digitais" azul (não roxo) */
.brand-link { color: var(--primary); text-decoration: none; }

/* Grade responsiva que quebra linha e mantém espaçamento */
.brand-rail{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 16px;
  align-items: center;
  justify-items: center;
  max-width: 980px;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
}

/* Cada logo dentro de uma “caixinha” previsível */
.brand{
  width: 88px;         /* desktop */
  height: 36px;        /* desktop */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Evita distorção e sobreposição de Apple/Google/Samsung */
.brand img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Ajustes para mobile */
@media (max-width: 640px){
  .brand{ width: 72px; height: 28px; }   /* caixinhas um pouco menores */
  .brand-rail{ gap: 12px; }
}