/* ==========================================================================
   Baly Energy Drink — Mockups D2C
   home.css  ·  Seções da Home (vitrine)
   Construção incremental, seção por seção.
   ========================================================================== */

/* ==========================================================================
   1. HERO — Full Banner (imagem estática)
   Imagem 1920×800 com texto/CTA embutidos; o banner inteiro é clicável.
   Para versão mobile dedicada: descomentar o <source> no HTML.
   ========================================================================== */
/* SLIDER de banners (fade + autoplay + setas no hover + dots). Slides empilhados
   (absolutos) → o .hero precisa de altura definida; banners em cover.
   Desktop: trava a altura p/ header+banner+faixa caberem na tela (≈ viewport − 215px). */
/* Altura SEMPRE pela proporção da arte (1920×700 desktop · 1000×1200 mobile) →
   o cover nunca corta o banner, em qualquer zoom/escala (era altura fixa + cover = corte). */
.hero { position: relative; background: var(--baly-preto); overflow: hidden; aspect-ratio: 1920 / 700; }
/* mobile (<768): banners têm versão RETRATO dedicada (1000×1200) */
@media (max-width: 767px) { .hero { aspect-ratio: 1000 / 1200; } }

.hero__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* setas — aparecem no hover do banner (em telas touch ficam sempre visíveis) */
.hero__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--baly-preto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer;
  opacity: 0; transition: opacity .25s ease, background var(--t-rapida), transform var(--t-rapida);
}
.hero:hover .hero__seta { opacity: 1; }
.hero__seta:hover { background: var(--baly-amarelo); }
.hero__seta:active { transform: translateY(-50%) scale(.93); }
.hero__seta svg { width: 22px; height: 22px; }
.hero__seta--prev { left: clamp(8px, 2vw, 24px); }
.hero__seta--next { right: clamp(8px, 2vw, 24px); }
@media (hover: none) { .hero__seta { opacity: 1; background: rgba(255, 255, 255, .82); } }
/* mobile (<768): sem setas — navega por swipe + dots */
@media (max-width: 767px) { .hero__seta { display: none; } }

/* dots */
.hero__dots { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hero__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; transition: background var(--t-rapida), width var(--t-rapida); }
.hero__dot.is-active { background: var(--baly-amarelo); width: 24px; border-radius: var(--raio-pill); }

/* ==========================================================================
   2. FAIXA DE BENEFÍCIOS
   Tira de confiança logo abaixo do hero (frete · Pix · fábrica · segurança)
   ========================================================================== */
.beneficios {
  background: var(--baly-amarelo);
  border-block: 1px solid rgba(0, 0, 0, .12);
}
/* faixa ESTÁTICA (sem esteira/rolagem): linha distribuída */
.beneficios__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}
.beneficio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}
/* mobile: CARROSSEL automático e infinito, 1 por vez (JS = setupBeneficiosCarousel) */
@media (max-width: 767px) {
  .beneficios__row {
    max-width: none;               /* anula o .container → faixa full-bleed */
    padding-inline: 0;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .beneficios__row::-webkit-scrollbar { display: none; }
  .beneficio {
    flex: 0 0 100%;                /* 1 item = largura toda do viewport */
    justify-content: center;
    padding-inline: var(--gutter); /* respiro interno do conteúdo */
    scroll-snap-align: start;
  }
}
.beneficio__icone {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--raio);
  background: var(--baly-preto);          /* círculo preto p/ contrastar no fundo amarelo */
  color: var(--baly-amarelo);
}
.beneficio__icone svg { width: 24px; height: 24px; }

.beneficio__txt { min-width: 0; }
.beneficio__txt b {
  display: block;
  font-weight: var(--peso-heavy);
  font-size: var(--fs-sm);
  line-height: 1.15;
}
.beneficio__txt span {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(0, 0, 0, .65);          /* legível sobre o amarelo (era cinza claro) */
  margin-top: 2px;
}

/* Desktop: esteira mais espaçada */
@media (min-width: 768px) {
  .beneficio { gap: var(--sp-4); margin-right: var(--sp-9); }
  .beneficios .marquee__track { padding-block: var(--sp-5); --marquee-dur: 40s; }
}

/* ==========================================================================
   3. VITRINE DE SABORES
   Cards de produto (reusáveis em PLP/cross-sell)
   ========================================================================== */
.sabores { padding-block: var(--sp-8); }

.secao-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
@media (min-width: 640px) {
  .secao-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
  }
}
.secao-head__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--baly-amarelo-escuro);
  margin-bottom: var(--sp-2);
}
.secao-head__eyebrow::before { content:""; width: 28px; height: 2px; background: var(--baly-amarelo); }
.secao-head h2 { font-size: var(--fs-xl); text-transform: uppercase; line-height: 1; }
.secao-head__link {
  flex: none;
  font-weight: var(--peso-bold); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--baly-amarelo);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color var(--t-rapida);
}
.secao-head__link:hover { color: var(--baly-amarelo-escuro); }

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

/* ---- Card de produto (reusável) ----
   Layout em 3 zonas: imagem · texto · rodapé (preço + botão).
   O rodapé usa margin-top:auto → cola no fundo do card; como os cards do grid
   esticam para a mesma altura, preços e botões ficam SEMPRE alinhados na linha. */
.card-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--baly-branco);
  color: var(--cor-texto);            /* card é branco → cor própria (não herda a do fundo, ex.: seção Zero escura) */
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}

/* Badges — pílulas pequenas no padrão da marca:
   oferta = amarelo Baly (puxa o olho) · sem açúcar = contorno limpo (info) */
.card-produto__tags {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; z-index: 2;
}
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: var(--peso-bold);   /* 700 — mais legível no mobile */
  line-height: 1;
  text-transform: uppercase; letter-spacing: .03em;
  /* nudge óptico: caixa-alta sem descendentes "sobe" e sobra mais embaixo →
     desce o texto 1px (mais padding no topo, menos na base) p/ parecer centrado. Altura igual. */
  padding: calc(.36rem + 1px) .62rem calc(.36rem - 1px);
  border-radius: var(--raio-pill);
}
.tag--promo { background: var(--verde-ok); color: var(--baly-branco); box-shadow: var(--sombra-sm); }   /* desconto = verde */
.tag--zero  { background: var(--baly-amarelo); color: var(--baly-preto); box-shadow: var(--sombra-sm); }  /* zero = amarelo, texto preto */

/* Desktop: fonte das badges um pouco maior */
@media (min-width: 768px) { .tag { font-size: 13px; } }

/* Imagem — wrapper QUADRADO 1:1 (a lata é absoluta + object-fit:contain p/
   encaixar sem cortar; 4 bordas explícitas, não `inset`, por compatibilidade). */
.card-produto__img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(120% 90% at 50% 16%, #fff, var(--cinza-50));
}
.card-produto__img img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16%;        /* respiro ao redor da lata (% → escala com o quadrado) */
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.16));
  transition: transform var(--t);
}
/* Hover em qualquer ponto do card → zoom leve só na imagem */
.card-produto:hover .card-produto__img img { transform: scale(1.05); }

/* Corpo */
.card-produto__body {
  display: flex; flex-direction: column;
  padding: var(--sp-3);
  flex: 1;
}
.card-produto__nome {
  font-weight: var(--peso-heavy);
  font-size: 1.25rem;   /* 20px */
  line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-produto__meta { font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-top: 2px; }

/* Rodapé: preço em cima, botão full-width embaixo (mobile/tablet).
   No desktop largo (≥992) vira lado-a-lado (ver media query no fim). */
.card-produto__rodape {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-3);
}

/* Bloco de preço — PIX em destaque (preço principal) + valor no cartão (secundário) */
.card-produto__preco {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px; line-height: 1.05;
  container-type: inline-size;   /* decide "no Pix" ao lado/embaixo pela largura do CARD */
}
/* largo: preço + "no Pix" lado a lado (sem wrap). estreito: empilha p/ TODOS igual no grid */
.card-produto__preco-row { display: flex; align-items: baseline; gap: .35rem; flex-wrap: nowrap; }
@container (max-width: 149px) {
  .card-produto__preco-row { flex-direction: column; align-items: flex-start; gap: 1px; }
}
.card-produto__preco .agora { font-weight: var(--peso-black); font-size: var(--fs-base); }  /* = preço no Pix */
.card-produto__pix-flag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .04em;
  color: #32BCAD;                 /* teal oficial do Pix */
}
.card-produto__pix-flag svg { width: 13px; height: 13px; flex: none; }
.card-produto__cartao { font-size: var(--fs-xs); color: var(--cor-texto-suave); }
.card-produto__cartao .antes { text-decoration: line-through; margin-right: .3rem; }

/* Botão Adicionar — "+ Adicionar" full-width (vira compacto ao lado no desktop largo) */
.card-produto__add {
  flex: none;
  width: 100%; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--baly-amarelo);
  color: var(--baly-preto);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .03em;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.card-produto__add svg { width: 19px; height: 19px; }
.card-produto__add:hover { background: var(--baly-amarelo-escuro); }
.card-produto__add:active { transform: scale(.97); }

@media (min-width: 640px) {
  .grid-produtos { grid-template-columns: repeat(3, 1fr); }
  .card-produto__body { padding: var(--sp-4); }
  .card-produto__preco .agora { font-size: var(--fs-md); }   /* preço mais discreto */
}

/* Desktop: vitrine = 4 colunas. Rodapé fica EMPILHADO (preço em cima + botão
   full-width embaixo, = layout do cross-sell) — em card estreito o lado-a-lado
   espremia o preço. */
@media (min-width: 992px) {
  .grid-produtos { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   PRODUTO EM DESTAQUE — CLEAN (estilo do site institucional).
   Painel AMARELO com a lata (esq) + conteúdo clean (dir): pills de formato,
   título controlado, descrição curta, preço, CTAs. Sem degradê/grão/sticker.
   Mobile: empilhado → desktop: 2 colunas.
   ========================================================================== */
.destaque { padding-block: var(--sp-8); }
.destaque__card {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  align-items: stretch;
}

/* Painel amarelo da lata — QUADRADO (aspect-ratio 1) no mobile e no desktop.
   ⚠️ A lata é position:absolute + object-fit:contain (senão a altura intrínseca
   da imagem estoura o track e o aspect-ratio não é respeitado — gotcha conhecido). */
.destaque__media {
  position: relative;
  background: var(--baly-amarelo);
  border-radius: 24px;
  aspect-ratio: 1;
  width: 100%; max-width: 440px; margin-inline: auto;
}
.destaque__media img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--sp-6); box-sizing: border-box;
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .22));   /* sombra suave p/ "assentar" a lata */
}

/* Conteúdo */
.destaque__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
}

/* Swatches de formato — chips clicáveis, canto reto, menores */
.destaque__formats { display: flex; align-items: center; gap: var(--sp-2); }
.fmt {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 .8rem; border-radius: 8px;
  background: var(--cinza-100); color: var(--baly-preto);
  font-weight: var(--peso-bold); font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.fmt:hover { background: var(--cinza-200); }
.fmt--ativo, .fmt--ativo:hover { background: var(--baly-preto); color: var(--baly-branco); }

/* eyebrow + nome + social = filhos diretos do body → espaçamento IGUAL entre eles (gap do body, sp-4) */
.destaque__eyebrow { font-size: var(--fs-xs); font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .14em; color: var(--baly-amarelo-escuro); }
.destaque__nome { font-size: var(--fs-xl); line-height: 1.05; color: var(--baly-preto); }   /* = títulos de seção (40px desktop) */
.destaque__social { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-sm); color: var(--cor-texto-suave); }
.destaque__estrelas { color: var(--baly-amarelo); font-size: var(--fs-md); letter-spacing: 1px; }
.destaque__aval { font-weight: var(--peso-semibold); color: var(--cor-texto); }
.destaque__sep { opacity: .4; }
/* Formato (label + pills) */
.destaque__opt { display: flex; flex-direction: column; gap: var(--sp-2); }
.destaque__opt-tit { font-size: var(--fs-sm); font-weight: var(--peso-bold); }
.destaque__desc { font-size: var(--fs-base); line-height: 1.6; color: var(--cor-texto-suave); max-width: 48ch; }

/* Preço — limpo: valor no Pix em destaque + linha secundária */
.destaque__preco { display: flex; flex-direction: column; gap: 3px; }
.destaque__preco-topo { display: flex; align-items: baseline; gap: .5rem; }
.destaque__agora { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: var(--peso-black); line-height: 1; }
.destaque__pix {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .04em; color: #32BCAD;
}
.destaque__pix svg { width: 14px; height: 14px; }
.destaque__cartao { font-size: var(--fs-sm); color: var(--cor-texto-suave); }

/* CTA — reusa o MESMO botão dos cards (.card-produto__add) p/ consistência;
   aqui só ajusto a largura p/ caber no conteúdo (em vez de 100%). */
.destaque__ctas { width: 100%; margin-top: var(--sp-1); display: flex; gap: var(--sp-3); align-items: stretch; }
.destaque__ctas .qty { flex: none; }
.destaque__ctas .qty button { width: 40px; }
.destaque__add { flex: 1; width: auto; height: auto; min-height: 52px; padding: .95rem 1.5rem; }   /* qty + botão lado a lado; botão preenche o resto */

/* ---- Microanimações ao trocar a variação (re-disparadas via JS) ---- */
@keyframes dq-fade { from { opacity: .5; } to { opacity: 1; } }                           /* conteúdo do card */
@keyframes dq-rise { from { opacity: .45; } to { opacity: 1; } }                          /* preço: só fade — o translate era o que "travava" */
@keyframes dq-img  { from { opacity: .3; transform: scale(.985); } to { opacity: 1; transform: none; } } /* imagem: micro-zoom + fade, rápido */
@keyframes dq-pop  { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
.dq-anim-fade { animation: dq-fade .28s ease both; }
.dq-anim-rise { animation: dq-rise .3s  ease both; }
.dq-anim-img  { animation: dq-img  .34s ease-out both; }
.dq-anim-pop  { animation: dq-pop  .26s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .dq-anim-fade, .dq-anim-rise, .dq-anim-img, .dq-anim-pop { animation: none; }
}

@media (min-width: 768px) {
  /* painel (máx. 440px) + conteúdo (máx. 520px), o conjunto CENTRALIZADO na seção */
  .destaque__card { grid-template-columns: minmax(0, 440px) minmax(0, 520px); gap: var(--sp-7); align-items: center; justify-content: center; }
  .destaque__body { justify-content: center; padding: var(--sp-5); }
  .destaque__add { width: auto; }                                          /* desktop: content-width */
}

/* ==========================================================================
   LINHA ZERO — variante ESCURA da vitrine de sabores.
   Reusa a mesma grade (.grid-produtos) e o mesmo card (.card-produto), sem
   tocá-los: só troca a "pele" da seção (fundo grafite + filete amarelo no topo)
   → os cards brancos saltam no escuro e a página ganha ritmo (branco·escuro·branco).
   ========================================================================== */
/* Pele AMARELA (os cards brancos saltam no amarelo). Tudo que era claro/amarelo
   (eyebrow, traço, título, link, filete) vira ESCURO — senão sumiria/ficaria sem
   contraste sobre o amarelo. */
.sabores--zero {
  background: var(--baly-amarelo);
  border-top: 1px solid rgba(0, 0, 0, .12);   /* filete escuro (amarelo seria invisível) */
  color: var(--baly-preto);
}
.sabores--zero .secao-head h2 { color: var(--baly-preto); }
.sabores--zero .secao-head__eyebrow { color: var(--baly-preto); }
.sabores--zero .secao-head__eyebrow::before { background: var(--baly-preto); }
.sabores--zero .secao-head__link { color: var(--baly-preto); }
.sabores--zero .secao-head__link:hover { color: var(--baly-preto); text-decoration: underline; }

/* ==========================================================================
   COMPRE POR MARCA — seletor de marcas: produto sobre um CÍRCULO AMARELO,
   vazando um pouco a borda do círculo. Fundo branco. (Não copia o balybrasil.)
   ========================================================================== */
.marcas { background: var(--baly-branco); padding-block: var(--sp-8); }
.marcas__head { text-align: center; margin-bottom: var(--sp-6); }
.marcas__head h2 {
  display: inline-block; position: relative;
  font-size: var(--fs-xl); text-transform: uppercase; color: var(--baly-preto);
  padding-bottom: var(--sp-3);
}
.marcas__head h2::after {                          /* traço amarelo da marca */
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 48px; height: 3px; border-radius: 2px; background: var(--baly-amarelo);
}

/* Mobile: ROLAGEM HORIZONTAL. O padding vertical dá espaço p/ a foto VAZAR sem
   ser cortada (overflow-x:auto recorta o eixo Y → a sobra cabe no padding).
   Desktop (≥768): quebra linha centralizado (ver media query no fim). */
.marcas__row {
  display: flex; flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-5) 2px var(--sp-3);   /* topo/baixo = folga p/ o vazamento */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.marcas__row::-webkit-scrollbar { display: none; }

.marca-tile {
  flex: 0 0 auto;
  width: clamp(100px, 28vw, 150px);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  padding: var(--sp-2) var(--sp-2) 0;
  scroll-snap-align: center;
  text-align: center;
}
/* Círculo amarelo (fundo). Sem overflow:hidden → o produto vaza a borda. */
.marca-tile__img {
  position: relative;
  width: clamp(82px, 24vw, 118px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--baly-amarelo);
  display: grid; place-items: center;
}
/* produto ABSOLUTO → não estica a altura do círculo (mantém redondo) e vaza a borda.
   max-height escala junto c/ o círculo (clamp) → vazamento sutil também no mobile. */
.marca-tile__img img {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-height: clamp(100px, 29vw, 142px); max-width: 168%; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .22));
  transition: transform var(--t);
}
.marca-tile:hover .marca-tile__img img { transform: translate(-50%, calc(-50% - 6px)) scale(1.05); }
.marca-tile__nome {
  font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--baly-preto);
  transition: color var(--t-rapida);
}
.marca-tile:hover .marca-tile__nome { color: var(--baly-amarelo-escuro); }
/* Cor do círculo POR MARCA (referência). Energy/Outros = amarelo padrão. */
.marca-tile--intencion .marca-tile__img { background: #1C3775; }  /* azul (vodka) */
.marca-tile--kids      .marca-tile__img { background: #0095D0; }  /* azul (kids) */
.marca-tile--hidrate   .marca-tile__img { background: #EA5920; }  /* laranja (isotônico) */
.marca-tile--bier      .marca-tile__img { background: #37C04E; }  /* verde (Baly Bier) */
.marca-tile--safadao   .marca-tile__img { background: #C62921; }  /* vermelho (Safadão) */

/* tile "Outros" — seta dentro do círculo (não vaza) */
.marca-tile--outros .marca-tile__img svg { width: 40px; height: 40px; color: var(--baly-preto); }

/* Desktop: tem espaço → quebra linha centralizado, sem scroll */
@media (min-width: 768px) {
  .marcas__row {
    flex-wrap: wrap; justify-content: center;
    overflow: visible;
    padding: var(--sp-3) 0 0;
    row-gap: var(--sp-5);
  }
}

/* ==========================================================================
   BALY LOVERS — PLACEHOLDER (vestuário + acessórios; aguardando fotos reais)
   Cabeçalho reusa .secao-head. Cada peça = caixa tracejada (listrado diagonal,
   igual ao placeholder de banner da PLP) + nome. Trocar .lovers__ph por <img>.
   ========================================================================== */
.lovers { padding-block: var(--sp-8); }
/* card único full-width (largura do container), formato banner responsivo */
.lovers__ph {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border: 1.5px dashed var(--cinza-300); border-radius: var(--raio-lg);
  background: repeating-linear-gradient(135deg, var(--cinza-100) 0 14px, var(--cinza-50) 14px 28px);
  color: var(--cor-texto-suave); text-align: center; padding: var(--sp-4);
}
@media (min-width: 768px) { .lovers__ph { aspect-ratio: 5 / 2; } }   /* desktop = faixa larga */
.lovers__ph span { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

/* ==========================================================================
   FAIXA DE MARCAS — esteira de logos das linhas do Grupo Baly
   Reusa o mecanismo .marquee (style.css) + main.js. Faixa AMARELO BALY com
   filete escuro sutil; logos escuros (preto) p/ contraste, espaçados p/ loop sem vão.
   ========================================================================== */
.faixa-marcas {
  background: var(--baly-amarelo);
  border-block: 1px solid rgba(0, 0, 0, .12);   /* filete escuro sutil p/ definir a faixa sobre o amarelo */
  --ref: 24px;                          /* "cap-height" alvo — as alturas por logo são relativas a isto */
}
.faixa-marcas .marquee__track { padding-block: var(--sp-5); --marquee-dur: 32s; }
.marca-logo {
  display: inline-flex; align-items: center; flex: none;
  margin-right: var(--sp-7);            /* espaço uniforme entre logos (loop sem vão) */
}
.marca-logo img {
  display: block; width: auto; max-width: none;
  opacity: 1; transition: opacity var(--t-rapida);   /* logos escuros nítidos sobre o amarelo */
}
.marca-logo:hover img { opacity: .75; }

/* Equilíbrio ÓPTICO — alturas por logo p/ igualar o tamanho do "BALY"/maiúsculas.
   Wordmark largo de 1 linha (Intencion) = menor; lockups empilhados c/ tagline
   (Energy/Hidrate, onde o "BALY" é só parte da arte) = maiores. */
.marca-logo--intencion img { height: calc(var(--ref) * 0.95); }
.marca-logo--kids img      { height: calc(var(--ref) * 1.32); filter: brightness(0); } /* logo azul → preto p/ uniformizar a faixa */
.marca-logo--hidrate img   { height: calc(var(--ref) * 1.60); }
.marca-logo--energy img    { height: calc(var(--ref) * 1.78); }

@media (min-width: 768px) {
  .faixa-marcas { --ref: 28px; }
  .faixa-marcas .marquee__track { --marquee-dur: 44s; }
  .marca-logo { margin-right: var(--sp-9); }
}

/* ==========================================================================
   BALY LOVERS — feed simulado da hashtag #balylovers (Instagram)
   Seção CLARA (quebra o grafite da Linha Zero e separa do rodapé preto).
   Cabeçalho estilo "página de hashtag" do IG + grade de posts de pessoas
   (foto + @usuário + curtidas no rodapé do post). Fotos = placeholder.
   ========================================================================== */
.lovers { background: var(--baly-branco); padding-block: var(--sp-8); }

.lovers__head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.lovers__badge {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--baly-amarelo); color: var(--baly-preto);
  font-weight: var(--peso-black); font-size: 2.4rem; line-height: 1;
  box-shadow: var(--sombra-amarela);
}
.lovers__hash {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-xl); letter-spacing: -.02em;
}
.lovers__hash .lovers__ig { width: 26px; height: 26px; flex: none; }
.lovers__sub { color: var(--cor-texto-suave); font-size: var(--fs-md); max-width: 52ch; }
.lovers__sub strong { color: var(--baly-preto); font-weight: var(--peso-heavy); }

.lovers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }

/* Post = foto quadrada + faixa inferior com @usuário e curtidas (estilo IG) */
.ig-post {
  position: relative; display: block; aspect-ratio: 1 / 1;
  border-radius: var(--raio); overflow: hidden; background: var(--cinza-100);
}
.ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.ig-post:hover img { transform: scale(1.06); }
.ig-post__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem;
  padding: .9rem .8rem .65rem;
  color: var(--baly-branco); font-size: var(--fs-sm); font-weight: var(--peso-bold);
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.ig-post__user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-post__likes { display: inline-flex; align-items: center; gap: .3rem; flex: none; }
.ig-post__likes svg { width: 16px; height: 16px; }

.lovers__cta { text-align: center; margin-top: var(--sp-6); }
.lovers__cta .btn svg { width: 20px; height: 20px; }

@media (min-width: 768px) {
  .lovers__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .lovers__hash { font-size: var(--fs-2xl); }
}