/* Carrossel de marcas (assets/marcas.js): fita que anda sozinha. Cartão e etiquetas copiam o
   cartão da HB e o BrandStrip do design system: mesmo raio, borda, sombra e tipografia. */
[data-om-marcas]{width:100%;display:flex;flex-direction:column;gap:28px;align-items:center}

/* As bordas somem num degradê, para os cartões entrarem e saírem sem corte seco. É uma camada
   por cima (::before/::after) e não mask-image: no Safari do iPhone, mask-image num elemento com
   filho animado deixava a fita inteira invisível (28/10). */
.om-marcas-palco{position:relative;width:100%}
.om-marcas-palco::before,.om-marcas-palco::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.om-marcas-palco::before{left:0;background:linear-gradient(90deg,var(--surface-muted),transparent)}
.om-marcas-palco::after{right:0;background:linear-gradient(270deg,var(--surface-muted),transparent)}
.om-marcas-janela{overflow:hidden;width:100%;padding:12px 0 20px;scrollbar-width:none}
.om-marcas-janela::-webkit-scrollbar{display:none}
/* A fita anda pela rolagem da janela (marcas.js), e não por animação CSS de transform: no iPhone
   o trilho inteiro (~3.500px × 3 de densidade) vira uma camada grande demais e o Safari não desenha
   nada (28/10). Margem em cada cartão, e não gap, para metade do trilho ser exatamente uma volta. */
.om-marcas-trilho{display:flex;width:max-content}

.om-marca-card{flex:0 0 280px;margin-right:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:28px 20px;background:#fff;border:1px solid var(--border-subtle);border-radius:16px;box-shadow:var(--shadow-xs)}
/* O selo da HB é redondo; os outros logos são largos. Mesma altura, largura livre até 180px. */
.om-marca-logo{width:auto;max-width:180px;height:64px;object-fit:contain;display:block;pointer-events:none}
.om-marca-logo--vazio{width:64px}
/* Sem mix-blend-mode: no Safari do iPhone ele também some com a fita animada. */
.om-marca-foto{width:226px;height:170px;object-fit:contain;display:flex;align-items:center;justify-content:center;pointer-events:none}
.om-marca-foto--vazia{color:var(--om-grey-300)}
.om-marca-nome{font-family:var(--font-display);font-size:28px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--text-strong)}

.om-marcas-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.om-marca-chip{padding:12px 22px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card, #fff);
  font-family:var(--font-display);font-size:26px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;color:var(--om-grey-700)}

@media (max-width:767px){
  .om-marca-card{flex-basis:min(240px,66vw);margin-right:14px;padding:22px 16px}
  .om-marca-foto{width:100%;height:140px}
  .om-marca-chip{font-size:18px;padding:8px 14px}
  .om-marcas-chips{gap:8px}
}
/* Quem pede menos movimento recebe a fita parada, rolando com o dedo. */
@media (prefers-reduced-motion:reduce){.om-marcas-janela{overflow-x:auto}}