/* ============================================================
   v5 — barra superior (social), menu maior, dropdown no hover,
   carrossel de clientes, dados da filial
   (complementa styles-v2 + photos-v3 + styles-v4)
   ============================================================ */

/* ---------- Títulos: respiro para acentos (Ê, Ã, Õ...) ---------- */
.section-head h2,
.about__col h2,
.process__aside h2,
.why__intro h2,
.contact__col h2,
.clients h2,
.band h2 { line-height: 1.16; }

/* ---------- BARRA SUPERIOR (topbar) — fixa no scroll ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 61;
  background: var(--ink);
  color: #fff;
}
/* header branca encosta logo abaixo da barra preta */
.header { top: 40px; }

/* ---------- WHATSAPP FLUTUANTE — garantir no mobile ---------- */
.wa-float {
  display: grid !important;
  z-index: 65;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
}
.topbar__note {
  font-size: 12.5px;
  letter-spacing: .01em;
  color: #c9c5c2;
  display: none;
}
.topbar__note b { color: #fff; font-weight: 600; }
@media (min-width: 560px) { .topbar__note { display: inline; } }
.topbar__social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar__social a {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.topbar__social a:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
.topbar__social svg { width: 15px; height: 15px; }

/* ---------- MENU MAIOR ---------- */
.nav { gap: 32px; }
.nav a { font-size: 16.5px; }
.nav__trigger { font-size: 16.5px; }
.nav__trigger svg { width: 15px; height: 15px; }
@media (min-width: 920px) { .nav { gap: 30px; } }
@media (min-width: 1040px) { .nav { gap: 36px; } }

/* ---------- DROPDOWN NO HOVER (desktop) ---------- */
@media (hover: hover) and (min-width: 920px) {
  /* ponte invisível para não fechar ao atravessar o vão */
  .has-dd::after {
    content: "";
    position: absolute;
    left: -20px; right: -20px;
    top: 100%;
    height: 22px;
  }
  .has-dd:hover .dd,
  .has-dd:focus-within .dd {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .has-dd:hover .nav__trigger svg,
  .has-dd:focus-within .nav__trigger svg {
    transform: rotate(180deg);
  }
}

/* ---------- CARROSSEL DE CLIENTES ---------- */
.clients {
  padding-block: 56px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.clients__head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 34px;
}
.clients__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 18px;
  animation: clientsScroll 42s linear infinite;
}
.clients__viewport:hover .clients__track { animation-play-state: paused; }
@keyframes clientsScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }

.client-logo {
  flex: none;
  width: 240px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.client-logo:hover {
  border-color: #ddd9d4;
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.client-logo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
}
@media (min-width: 700px) {
  .client-logo { width: 280px; height: 170px; }
  .clients__track { gap: 22px; }
}

/* logos que vêm como tiles de cor sólida: a carta assume a cor do tile,
   com respiro interno (logo centralizado, sem bleed até a borda) */
.client-logo--fill {
  padding: 14px 18px;
  border-color: rgba(0,0,0,.06);
  overflow: hidden;
}
.client-logo--fill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}