/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

/* CORES BASE */
:root {
  --preto: #000000;
  --amarelo: #FFDD40;
  --branco: #ffffff;
  --cinza: #1a1a1a;
  --cinza-claro: #2a2a2a;
}

/* BODY */
body {
  background-color: var(--preto);
  color: var(--branco);
}

/* ==================== CONTAINER PRINCIPAL ==================== */

/* CONTAINER PRINCIPAL */
.brands-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 200px 20px;
}

/* ==================== PROTÓTIPO — carrossel vertical de logos ====================
   Só visual/decorativo. position:sticky (não fixed) de propósito: some a
   sensação de "acompanha o scroll centralizado na tela", mas — diferente
   de fixed — para de seguir assim que chega no fim do próprio container
   (.brands-container, que termina logo depois do último card, antes do
   footer) — nunca invade a área do footer.
   Layout em GRID (não flex) de propósito: com flex, a coluna do carrossel
   ficava "espremida" DENTRO da caixa de 1200px do conteúdo — o grid abaixo
   reserva uma coluna de verdade pro conteúdo (max 1200px, sempre
   centralizado igual antes) e outra só pro carrossel, sobrando nas bordas.
   O "top" usa calc(50vh - metade da altura) em vez de top:50% de
   propósito: percentual em position:sticky é resolvido contra a altura do
   container (que aqui é automática/"auto"), o que quebra o cálculo e faz
   o elemento sumir; 50vh é sempre relativo à tela, então funciona sempre.
   Fundo 100% transparente, PNGs/WebPs com fundo transparente, loop
   contínuo de baixo pra cima (translateY 0 -> -1 conjunto, medido em px via
   JS e não mais fixo em -50%, porque a lista repete mais vezes quando há
   poucos parceiros cadastrados; ver @keyframes vitrineLogosScroll abaixo),
   com fade nas duas pontas via mask-image. Em telas menores que o breakpoint, .brands-container
   continua bloco normal (max-width:1200px acima), sem nenhuma mudança.
   IMPORTANTE: a regra base (com display:none) precisa vir ANTES da media
   query no arquivo — as duas têm a mesma especificidade (uma classe só),
   então em caso de empate quem vem DEPOIS no arquivo sempre vence, mesmo
   dentro de uma media query que bateu. Antes estava na ordem errada (regra
   base depois), e o display:none sempre ganhava do display:block — por
   isso o espaço da coluna aparecia (grid-column ainda se aplicava) mas o
   carrossel em si continuava invisível. */
.vitrine-logos-vertical {
  display: none;
  position: sticky;
  top: calc(50vh - 325px);
  width: 140px;
  height: 650px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

@media (min-width: 1500px) {
  .brands-container {
    max-width: none;
    width: 100%;
    display: grid;
    /* Coluna vazia de 100px entre o conteúdo e o carrossel — só pra
       afastar um do outro (antes eles ficavam colados, só com o gap
       padrão de 24px entre todas as colunas). */
    grid-template-columns: 1fr minmax(0, 1200px) 100px 140px 1fr;
    column-gap: 24px;
  }

  .brands-content {
    grid-column: 2;
  }

  .vitrine-logos-vertical {
    grid-column: 4;
    display: block;
  }
}

.vitrine-logos-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  animation: vitrineLogosScroll 16s linear infinite;
}

@keyframes vitrineLogosScroll {
  from {
    transform: translateY(0);
  }

  to {
    /* --vitrine-v-distance é medido em pixels via JS (ativações.html,
       montarVitrineVertical) — a altura exata de "1 conjunto" de logos, não
       necessariamente 50% do total. Com poucos parceiros cadastrados, o JS
       repete a lista mais vezes antes de duplicar pro loop (senão o
       "conjunto" fica curto demais pra preencher a moldura de 650px sem
       parecer vazio/cortado no meio) — por isso não dá mais pra assumir que
       1 conjunto = exatamente metade do track. Fallback 325px (metade da
       moldura) cobre o instante antes do JS medir e aplicar o valor real. */
    transform: translateY(calc(-1 * var(--vitrine-v-distance, 325px)));
  }
}

.vitrine-logos-track img {
  width: 100%;
  max-width: 120px;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

/* ==================== PROTÓTIPO — versão mobile/tablet: faixa horizontal ====================
   Mesma ideia da vitrine vertical (decorativo, transparente, fundo com
   logos PNG, loop contínuo, fade nas duas pontas — aqui esquerda/direita
   em vez de cima/baixo), só que deitada, pra caber em telas estreitas.
   Inserida entre os cards de marca via JS (ver ativações.html,
   renderVitrineHorizontal + VITRINE_INTERVALO_MOBILE) a cada 2 cards, pra
   sempre estar aparecendo enquanto o usuário rola a lista no celular.
   Visível em qualquer largura menor que o breakpoint da vitrine vertical
   (ver media query lá em cima) — nunca as duas aparecem juntas. */
.vitrine-logos-horizontal {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 24px 0;
  background: transparent;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.vitrine-logos-horizontal-track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: vitrineLogosScrollHorizontal 14s linear infinite;
}

@keyframes vitrineLogosScrollHorizontal {
  from {
    transform: translateX(0);
  }

  to {
    /* --vitrine-h-distance medido em pixels via JS (ativações.html,
       renderVitrineHorizontal) — mesma ideia da versão vertical: com poucos
       parceiros a lista repete mais vezes antes de duplicar, então não dá
       pra assumir 50% fixo. */
    transform: translateX(calc(-1 * var(--vitrine-h-distance, 300px)));
  }
}

/* Tamanho pensado pra caber uns 3 logos por vez na tela — max-width junto
   do height garante isso mesmo com logos de proporções bem diferentes
   entre si (object-fit:contain evita distorcer qualquer um).
   !important necessário: existe uma regra genérica "img { max-width:100%
   !important; height:auto !important; }" no bloco @media(max-width:768px)
   mais abaixo (pensada pra imagem de card responsiva) que, sem isso,
   sobrescreve QUALQUER <img> da página no mobile — inclusive as do
   carrossel, fazendo o logo abrir enorme/cortado em vez do tamanho
   definido aqui. */
.vitrine-logos-horizontal-track img {
  height: 52px !important;
  max-width: 120px !important;
  width: auto !important;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Celular estreito: mesma proporção de ~3 logos visíveis, um pouco menor
   pra caber numa tela mais estreita. */
@media (max-width: 480px) {
  .vitrine-logos-horizontal {
    margin: 18px 0;
  }

  .vitrine-logos-horizontal-track {
    gap: 28px;
  }

  .vitrine-logos-horizontal-track img {
    height: 44px !important;
    max-width: 96px !important;
  }
}

@media (min-width: 1500px) {
  .vitrine-logos-horizontal {
    display: none;
  }
}

/* SEÇÃO DA MARCA */
.brand-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 100px;
}

/* INVERTE LAYOUT */
.brand-section.reverse {
  flex-direction: row-reverse;
}

/* TEXTO */
.brand-text {
  flex: 1;
}

.brand-text h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--amarelo);
}

/* Prominent title styling for brand content */
.brand-content h2, .brand-text h2 {
  color: var(--amarelo);
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.05;
}

.brand-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #e0e0e0;
  margin-bottom: 16px;
}

.brand-location {
  font-size: 0.9rem;
  color: #bdbdbd;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.brand-location:hover {
  color: var(--amarelo);
  background-color: rgba(255, 221, 64, 0.1);
}

/* REDES SOCIAIS DA MARCA */
.brand-social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 221, 64, 0.3);
}

.social-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: rgba(255, 221, 64, 0.1);
  border: 1px solid rgba(255, 221, 64, 0.3);
  border-radius: 6px;
  color: var(--amarelo);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.social-brand:hover {
  background-color: var(--amarelo);
  color: var(--preto);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 221, 64, 0.3);
}

.social-brand i {
  font-size: 1rem;
}

/* MÍDIA */
.brand-media {
  position: relative; /* necessário pro empilhamento absoluto do carrossel de imagens de destaque (.brand-carousel) */
  flex: 1;
  background-color: var(--cinza);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.brand-media img,
.brand-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo separate from media */
.brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0 18px;
}
.brand-logo img {
  max-width: 160px;
  width: 100%;
  height: auto;
  display: block;
}

.brand-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.brand-actions .social-brand {
  flex: 1 1 50%;
  justify-content: center;
}

/* ==================== FOOTER ==================== */
.footer {
  background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
  padding: 60px 40px 30px;
  border-top: 2px solid #ffcc00;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.footer-section h4 {
  color: #ffcc00;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 700;
}

.footer-section p {
  font-size: 13px;
  color: #999;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: #aaa;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ffcc00;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 204, 0, 0.1);
  border: 1px solid #ffcc00;
  border-radius: 50%;
  color: #ffcc00;
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-link:hover {
  background: #ffcc00;
  color: #000;
  transform: scale(1.1);
}

/* ==================== RESPONSIVIDADE MOBILE ==================== */
@media (max-width: 768px) {
  /* Navbar mobile */
  .navbar {
    padding: 12px 15px !important;
    flex-wrap: wrap !important;
  }

  .navbar-links {
    display: none !important;
  }

  .hamburger {
    display: block !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
  }

  .hamburger:hover {
    background-color: rgba(255, 204, 0, 0.1) !important;
  }

  .hamburger span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: #fff !important;
    margin: 5px 0 !important;
    transition: 0.3s !important;
    border-radius: 2px !important;
  }

  /* Mobile menu */
  .mobile-menu {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    background: #000 !important;
    padding: 20px !important;
    z-index: 999 !important;
    border-top: 2px solid #ffcc00 !important;
    display: none !important;
  }

  .mobile-menu.open {
    display: block !important;
  }

  .mobile-menu a {
    display: block !important;
    padding: 12px 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.1) !important;
    transition: color 0.3s ease !important;
  }

  .mobile-menu a:hover {
    color: #ffcc00 !important;
  }

  /* Container responsivo */
  .brands-container {
    padding: 20px !important;
  }

  /* Brand sections responsivo */
  .brand-section {
    margin-bottom: 40px !important;
    padding: 20px !important;
  }

  .brand-content {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .brand-text {
    text-align: center !important;
  }

  .brand-text h2 {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
  }

  .brand-text p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .brand-image img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Mobile: enforce requested order and layout */
  .brand-section {
    display: block !important;
  }

  .brand-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* .texto/.imagem só existem para o layout desktop (ver bloco min-width:1024px
     no fim do arquivo); no mobile elas "desaparecem" do layout e os filhos
     delas voltam a ser itens diretos do flex acima, com os orders abaixo
     funcionando exatamente como antes dessas divs existirem. */
  .texto, .imagem {
    display: contents !important;
  }

  .brand-content h2 {
    order: 1 !important;
    text-align: left !important;
    font-size: 2.2rem !important;
    color: var(--amarelo) !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
  }

  .brand-logo { order: 2 !important; }

  /* Tamanho padrão do card de mídia no mobile — sem isso, cada foto tinha
     seu próprio tamanho: uma retrato deixava o card enorme, uma paisagem
     deixava baixinho, e o carrossel (.brand-carousel, imagens em
     position:absolute assim que montarCarrosseisImagens() roda em
     ativações.html) colapsava pra 0px por não sobrar conteúdo no fluxo
     normal pra basear a própria altura. aspect-ratio fixo resolve os dois
     de uma vez — toda foto (única, carrossel ou vídeo) usa exatamente o
     mesmo tamanho de caixa, um pouco mais compacto que antes (2:1 em vez
     do 16:9 que só o carrossel tinha). height:100% !important nas imagens
     sobrepõe a regra genérica "img{height:auto}" logo abaixo (que senão
     mantém a proporção original da foto em vez de preencher a caixa) —
     junto com object-fit:cover (regra base .brand-media img), a foto passa
     a cobrir a caixa inteira, cortando o que sobrar em vez de deixar fundo
     visível nas bordas. */
  .brand-media {
    order: 3 !important;
    aspect-ratio: 2 / 1 !important;
  }

  .brand-media img,
  .brand-media video {
    height: 100% !important;
    object-fit: cover !important;
  }

  .brand-subtitulo, .brand-desc { order: 4 !important; }
  .brand-location { order: 5 !important; }
  .brand-actions { order: 6 !important; display:flex !important; gap:10px !important; }

  /* Keep Instagram and Whatsapp side-by-side on mobile */
  .brand-actions .social-brand {
    flex: 1 1 48% !important;
    margin: 0 !important;
  }

  /* Social brands responsivo */
  .brand-social {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .social-brand {
    margin: 5px !important;
  }

  /* Footer responsivo */
  .footer {
    padding: 30px 15px !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-section {
    text-align: center !important;
  }

  /* Imagens responsivas */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Botões responsivos */
  .btn, button, .brand-location, .social-brand {
    width: 100% !important;
    margin: 10px 0 !important;
    text-align: center !important;
  }

  /* Grid responsivo geral */
  .grid, .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  /* Flex responsivo */
  .flex {
    flex-direction: column !important;
  }

  /* Espaçamentos responsivos */
  .p-4, .px-4, .py-4 {
    padding: 15px !important;
  }

  .m-4, .mx-4, .my-4 {
    margin: 15px !important;
  }

  /* Textos grandes */
  .text-5xl, .text-4xl, .text-3xl {
    font-size: 2rem !important;
  }

  .text-2xl, .text-xl {
    font-size: 1.5rem !important;
  }
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid #333;
}

.footer-bottom p {
  font-size: 13px;
  color: #999;
  margin: 8px 0;
}

.footer-bottom p strong {
  color: #ffcc00;
}

/* ==================== VITRINE PREMIUM — DESKTOP (min-width: 769px) ====================
   Reorganização visual exclusiva para desktop. Não toca em nenhuma regra de
   mobile nem em lógica/JS: a alternância de lado já é feita pela classe
   .reverse (adicionada pelo próprio script em renderMarca()), e as divs
   .texto/.imagem viram display:contents no mobile (ver bloco acima), então
   o mobile continua pixel a pixel igual ao de antes.
   Limite é 769px (não 1024px) de propósito — o bloco mobile logo acima usa
   max-width:768px, então qualquer valor diferente de 769 aqui reabre um
   vão sem cobertura nenhuma (768–1023px): nesse intervalo .brand-content
   não virava flex e .texto/.imagem não tinham display:contents, então a
   imagem caía pro tamanho/proporção natural dela (sem altura padrão) e
   sem cantos arredondados — exatamente o bug reportado ("imagem não no
   tamanho padrão, sem quinas arredondadas"), só que específico dessa
   faixa de largura (tablets e janelas de navegador redimensionadas). */
@media (min-width: 769px) {

  .brands-container {
    max-width: 1400px;
    /* padding-top propositalmente não alterado: é o que garante que o
       conteúdo não fique escondido atrás da navbar fixa. */
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 80px;
  }

  .brand-section {
    margin-bottom: 110px;
    opacity: 0;
    transform: translateY(24px);
    animation: brandFadeIn 0.7s ease forwards;
  }

  .brand-section:nth-of-type(2) { animation-delay: 0.06s; }
  .brand-section:nth-of-type(3) { animation-delay: 0.12s; }
  .brand-section:nth-of-type(4) { animation-delay: 0.18s; }
  .brand-section:nth-of-type(n+5) { animation-delay: 0.24s; }

  @keyframes brandFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Card: .texto e .imagem lado a lado, mesmo padrão simples de
     flex + row-reverse — só que .brand-content é quem vira o container
     flex (ela já existe na estrutura, um nível acima de .texto/.imagem). */
  /* Sem card/caixa — texto e imagem flutuam direto sobre o fundo preto da página */
  /* Tamanho padrão fixo (não só mínimo) — todo card, e toda imagem dentro
     dele, fica exatamente do mesmo tamanho, do primeiro ao último (mesma
     regra pro mobile, ver .brand-media dentro de @media max-width:768px
     acima — os dois seguem o mesmo padrão visual de card, só a proporção
     muda). object-fit:cover na imagem (abaixo) corta o que sobrar em vez
     de encolher a foto pra caber inteira — evita a caixa maior "vazando"
     por baixo/pelos lados quando a proporção da foto não bate exatamente
     com a da caixa. */
  .brand-content {
    display: flex;
    align-items: stretch;
    gap: 50px;
    height: 320px;
  }

  .brand-section.reverse .brand-content {
    flex-direction: row-reverse;
  }

  .texto {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }

  .imagem {
    flex: 1 1 52%;
    align-self: stretch;
  }

  .imagem .brand-media {
    height: 100%;
    margin: 0;
    background: var(--preto);
    border-radius: 32px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  /* object-fit:cover (não mais "contain") — a caixa é sempre do mesmo
     tamanho (320px de altura acima) e a foto sempre a preenche por
     inteiro, cortando o que sobrar da proporção original em vez de
     encolher pra caber inteira com faixas pretas nas bordas. Isso é o que
     faz a borda arredondada abaixo ficar colada na foto, em vez de sobrar
     um contorno maior "vazio" (mesmo com fundo preto, o box-shadow contorno
     do .brand-media acima ainda desenhava o tamanho real da caixa, maior
     que a foto visível). */
  .imagem .brand-media img,
  .imagem .brand-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
  }

  .imagem .brand-media:hover {
    transform: scale(1.015);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
  }

  /* Sem nenhum ativo visual (nem foto, nem vídeo, nem logo) — .imagem não
     existe no DOM (ver renderMarca em ativações.html). É o único caso
     legítimo de card de uma coluna só; texto ocupa a largura toda. */
  .brand-content:not(:has(.imagem)) .texto {
    flex-basis: 100%;
  }

  .texto h2 {
    font-size: 3rem;
    line-height: 1.1;
    /* espaçamento controlado pelo gap do .texto (flex column), não por margin,
       pra não somar os dois e criar um vão gigante abaixo do título */
    margin-bottom: 0;
  }

  .texto .brand-subtitulo,
  .texto .brand-desc {
    font-size: 1.05rem;
    line-height: 1.7;
  }

  .texto .brand-location {
    align-self: flex-start;
    margin: 4px 0 4px -12px;
  }

  .texto .brand-actions {
    gap: 10px;
    margin-top: 20px;
  }

  /* Botões mais minimalistas: tamanho do próprio conteúdo (não esticados
     pra dividir a largura toda), mais baixos e discretos. */
  .texto .brand-actions .social-brand {
    flex: 0 0 auto;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }

  .texto .brand-actions .social-brand i {
    font-size: 0.85rem;
  }

  .texto .brand-actions .social-brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 221, 64, 0.3);
  }
}