/* ==================================================================
   AJUSTES PEDIDOS PELO ELDER — depois da entrega da outra IA
   ==================================================================
   Este bloco fica no FIM do styles.css, sempre. Se o site for gerado de
   novo, é só colar isto no fim outra vez: nada aqui depende de nome de
   arquivo nem de ordem de página, só de classe.

   07/09/2026 — "tirar estas informações que poluem a imagem"
   ------------------------------------------------------------------
   Cada cartão de produto tinha dois rótulos POR CIMA da foto: o selo
   "Destaque da Over" no alto e o nome da categoria embaixo. Numa grade com
   dezenas de produtos, isso vira uma faixa branca atravessando toda foto e
   o olho não chega no produto, que é a única coisa que importa ali.

   Nada se perde: a categoria já está escrita no corpo do cartão
   ("Garrafas e squeezes · 9 cores catalogadas"), e "Destaque da Over" só
   repetia o título da seção logo acima.

   A regra vale SÓ para o cartão que tem foto (.has-image). Sem foto, esses
   rótulos são o único conteúdo do quadro — escondê-los deixaria um
   retângulo vazio, que é pior do que o problema. */
.catalog-item-visual.has-image > span,
.catalog-item-visual.has-image > small {
  display: none;
}

/* Carrossel do banner principal: até cinco campanhas com transição suave,
   setas e indicadores. Um único slide mantém exatamente o visual anterior. */
.home .over-hero-carousel {
  position: relative;
  display: block;
  overflow: hidden;
  background: #082f33;
}

.home .over-hero-slides {
  position: relative;
}

.home .over-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility .65s ease;
}

.home .over-hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.over-hero-controls {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(8, 47, 51, .72);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}

.over-hero-arrow,
.over-hero-dots button {
  appearance: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.over-hero-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0 0 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font: 400 27px/1 Arial, sans-serif;
}

.over-hero-arrow:hover,
.over-hero-arrow:focus-visible {
  background: #c9e9aa;
  color: #153d35;
}

.over-hero-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.over-hero-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
  transition: width .25s ease, background .25s ease;
}

.over-hero-dots button.is-active {
  width: 24px;
  background: #c9e9aa;
}

@media (max-width: 720px) {
  .over-hero-controls {
    left: auto;
    right: 14px;
    bottom: 14px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .over-hero-slide {
    transition: none;
  }
}

/* Sem os rótulos, a foto pode ocupar o cartão inteiro. A margem existia para
   o produto não encostar no texto que agora saiu. */
.catalog-item-visual.has-image img {
  padding: 14px 12px;
}

/* Banners mais baixos: o conteúdo e os produtos aparecem mais cedo sem
   perder a composição editorial da Home. A opção "Médio" continua
   disponível no painel para campanhas que precisem de mais presença. */
.home .campaign-height-compacta .campaign-content {
  min-height: 500px;
  padding-block: 38px;
}
.home .campaign-height-media .campaign-content {
  min-height: 580px;
  padding-block: 48px;
}
.home .campaign-copy h1 {
  font-size: clamp(3rem, 4.65vw, 4.25rem);
  margin-bottom: 20px;
}
.home .campaign-eyebrow {
  margin-bottom: 22px;
}
.home .campaign-lead {
  margin-bottom: 22px;
}
.home .campaign-proof {
  margin-top: 22px;
}
.home .mini-grid {
  grid-template-rows: repeat(2, 220px);
}
.home .mini-banner {
  min-height: 220px;
  padding: 27px;
}
.home .mini-one h3 {
  font-size: 2.15rem;
}

/* Banner fino das categorias, com uma foto real escolhida na Biblioteca
   de Mídia. O degradê preserva a leitura e a identidade verde da Over. */
.catalog-banner {
  padding: 22px 0 0;
}
.catalog-banner-art {
  min-height: 250px;
  padding: 32px 40px;
}
.catalog-banner-art.has-custom-image {
  background: #123840;
}
.catalog-banner-product-image {
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 58%;
  z-index: 0;
}
.catalog-banner-art.has-custom-image::after {
  background: linear-gradient(90deg, #123840 0%, #123840 39%, rgba(18,56,64,.9) 53%, rgba(18,56,64,.15) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}
.catalog-banner-art.has-custom-image > div {
  max-width: 560px;
}
.catalog-banner-art h2 {
  font-size: clamp(1.55rem, 2.25vw, 2.25rem);
  margin: 8px 0 10px;
}
.catalog-banner-acoes {
  margin-top: 18px;
}

@media (max-width: 1050px) {
  .home .campaign-height-compacta .campaign-content { min-height: 510px; }
  .home .campaign-height-media .campaign-content { min-height: 570px; }
}

@media (max-width: 720px) {
  .home .campaign-height-compacta .campaign-content,
  .home .campaign-height-media .campaign-content {
    min-height: 0;
    padding: 30px 0 255px;
  }
  .home .campaign-art { height: 310px; }
  .home .campaign-copy h1 { font-size: clamp(2.55rem, 10vw, 3.25rem); }
  .home .mini-grid { grid-template-rows: none; }
  .home .mini-banner,
  .home .mini-one { min-height: 230px; }
  .catalog-banner-art {
    min-height: 290px;
    padding: 28px 24px;
  }
  .catalog-banner-product-image { width: 100%; }
  .catalog-banner-art.has-custom-image::after {
    background: linear-gradient(90deg, rgba(18,56,64,.97) 0%, rgba(18,56,64,.84) 62%, rgba(18,56,64,.42) 100%);
  }
}

/* Abertura compacta das categorias: banner e busca continuam presentes,
   mas a primeira fileira de produtos já aparece na tela inicial. */
.catalog-heading {
  padding: 32px 0 26px;
}
.catalog-heading h1 {
  font-size: clamp(2.15rem, 3.5vw, 3.55rem);
  margin-bottom: 10px;
}
.catalog-heading .catalog-search {
  margin-top: 18px;
}
.catalog-banner-art {
  min-height: 215px;
  padding: 24px 32px;
}
.catalog-banner-art h2 {
  font-size: clamp(1.45rem, 2vw, 2rem);
}
.catalog-banner-art > div > p:not(.eyebrow) {
  line-height: 1.45;
}
.catalog-banner-acoes {
  margin-top: 14px;
}
.catalog-products {
  padding-top: 38px;
}
.catalog-toolbar {
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .catalog-heading { padding: 30px 0 26px; }
  .catalog-heading h1 { font-size: 2.35rem; }
  .catalog-banner-art { min-height: 260px; padding: 24px 22px; }
  .catalog-products { padding-top: 38px; }
}

/* Símbolo Over como marca-d'água. A metade visível fica presa ao canto
   direito e o conteúdo ganha uma área de segurança para nunca cruzar
   títulos, descrições, links ou botões. */
.closing-cta::after {
  width: 420px;
  height: 420px;
  right: -210px;
  top: 50%;
  border: 0;
  border-radius: 0;
  background: url('./images/icone-over-brindes-512.png') center / contain no-repeat;
  opacity: .14;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.closing-inner {
  position: relative;
  z-index: 2;
}

.editorial-card::before,
.blog-card::before {
  inset: auto -86px 18px auto;
  width: 172px;
  height: 172px;
  border: 0;
  border-radius: 0;
  background: url('./images/icone-over-brindes-512.png') center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}

.editorial-card > *,
.blog-card > * {
  position: relative;
  z-index: 2;
}

.editorial-card > p,
.blog-card > p {
  max-width: calc(100% - 72px);
}

@media (max-width: 720px) {
  .closing-cta::after {
    width: 300px;
    height: 300px;
    right: -190px;
    opacity: .11;
  }

  .editorial-card::before,
  .blog-card::before {
    right: -76px;
    bottom: 16px;
    width: 152px;
    height: 152px;
  }

  .editorial-card > p,
  .blog-card > p {
    max-width: calc(100% - 62px);
  }
}

/* 14/09/2026 — "deixar as letras do rodapé mais visíveis" pedido pelo Elder.
   Os links e textos do rodapé (Navegue, Planeje, Contato) usavam um
   cinza-azulado claro (#526b70) sobre fundo quase branco, com pouco
   contraste. Troca para --ink (a cor mais escura do tema) só no rodapé,
   sem mexer no resto do site. */
.footer-grid a,
.footer-grid p,
.footer-legal p {
  color: var(--ink);
}

/* 14/09/2026 — "marcas que confiam pode deixar um pouco maior" pedido
   pelo Elder. Os arquivos de logo já foram gerados em dobro (até 88x264px)
   pensando em tela retina — este aumento fica dentro desse limite, então
   não fica borrado. Se quiser aumentar mais que isso, os arquivos em
   assets/images/marcas/ precisam ser gerados de novo, maiores ainda.

   14/09/2026 — "pegue o que está com a maior altura e nivele os demais"
   pedido pelo Elder. Com max-height, cada logo só cresce até onde COUBER:
   um logo quadrado (largura=altura no original) bate no teto de altura e
   fica com 58px; um logo bem achatado (BYD, Nuvemshop, ManageEngine, SENAI,
   SESI, Ambev, Pague Menos — largura bem maior que altura no original)
   bate no teto de LARGURA antes, e sobra bem mais baixo que os outros — é
   essa mistura que deixava a fileira desnivelada. Trocando para altura FIXA
   (sem teto de largura), todos ficam exatamente na mesma altura, só a
   largura varia — o normal numa fileira de logos "confiam na gente".
   Ressalva: os logos mais achatados (o grupo citado acima) vão esticar
   mais na largura do que o arquivo original tem resolução de sobra; sendo
   discretos e em escala de cinza, não deve incomodar — se algum ficar
   visivelmente mole, o arquivo dele precisa ser gerado de novo, maior. */
.brands-strip img {
  height: 58px;
  width: auto;
  max-height: none;
  max-width: none;
}

/* 14/09/2026 — "o balão do chat (Tawk.to) do lado oposto do WhatsApp"
   pedido pelo Elder. O WhatsApp flutuante (.floating-whatsapp, ver
   styles.css) fica fixo no canto inferior DIREITO (right:24px;
   bottom:24px). O Tawk.to, por padrão, empilha bem no mesmo canto —
   os dois balões ficavam grudados. Como o Tawk.to não dá opção de
   posição no painel dele (conta sem permissão de admin, ver conversa),
   a saída é forçar a posição aqui: o widget deles é sempre um <iframe>
   dentro de um contêiner com posição fixa que o script deles aplica via
   estilo inline — por isso o !important, sem ele o inline sempre venceria.
   Os seletores abaixo cobrem as duas formas como o Tawk.to já nomeou esse
   contêiner ao longo do tempo; o que não existir na conta simplesmente não
   bate em nada, sem problema.

   No celular a barra .mobile-cta (Pedir cotação / WhatsApp) ocupa a largura
   toda embaixo — por isso ali o balão sobe pra cima dela, em vez de ir pro
   lado, senão ficaria por baixo da barra. */
#tawk-bubble-container,
.tawk-min-container,
iframe[title="chat widget"] {
  right: auto !important;
  left: 24px !important;
}

@media (max-width: 720px) {
  #tawk-bubble-container,
  .tawk-min-container,
  iframe[title="chat widget"] {
    left: 10px !important;
    bottom: 78px !important;
  }
}

/* 14/09/2026 — "letras finas um pouco mais grossas" pedido pelo Elder (tela
   de 23", dificuldade de ler o texto do corpo do site). Em styles.css o
   `body` não define font-weight nenhum, então cai no padrão do navegador
   (400 = normal) — e a Montserrat, sendo uma fonte variável (ver
   @font-face, weight 300 a 800), em 400 fica bem fina para leitura em
   monitores maiores. Isso só afeta texto que ainda não tem um font-weight
   próprio (títulos, botões, rótulos em maiúsculas etc. continuam com o
   peso que já tinham, todos bem mais pesados que isto aqui) — é
   basicamente parágrafo e texto corrido comum que fica mais grosso. */
body {
  font-weight: 500;
}
/* 14/09/2026 pos-migracao: Tawk.to sem posicao fixa; forcando aqui (ver conversa) */ [id^="tawk_"]{position:fixed!important;left:24px!important;right:auto!important;bottom:24px!important;z-index:2000000000!important} @media (max-width:720px){[id^="tawk_"]{left:10px!important;bottom:78px!important}}
/* 14/09/2026: telefone do topbar centralizado sobre o botao Pedir cotacao (pedido pelo Elder) */
@media (min-width:1051px){.topbar-inner a[href^="tel:"]{transform:translateX(-42px)}}