/* ==========================================================
   Catálogo de produtos (Fixação, Qualidade, Balancim...)
   Cada marca: faixa colorida (--band) com foto, etiqueta, logo e
   linhas de produto; depois vídeo e barra(s) de catálogo em PDF.
   (depende de style.css e pages.css)
   ========================================================== */
.brands { background: #fff; }
.brand {
  display: flex; flex-direction: column; gap: 20px;
  padding: var(--pt, 0) 0 var(--pb, 100px); --fg: #fff; --tag: #fff;
}

/* ---------- Faixa da marca ---------- */
.brand-band { background: var(--band); padding: 0 10px; }
.brand-inner {
  display: flex; gap: 50px; max-width: var(--content); margin: 0 auto; padding: 10px 0;
}
.brand-photo {
  flex: 0 1 70%; min-width: 0; padding: 10px; margin: 37px 0 -114px;
}
.brand-photo img {
  display: block; width: 100%; border-radius: 10px;
  box-shadow: -9px 9px 10px 0 rgba(0, 0, 0, .23);
}
.brand-info {
  flex: 0 1 100%; min-width: 0; padding: 10px;
  display: flex; flex-direction: column; justify-content: center;
}
.tag--brand { border-color: var(--tag); }
.tag--brand svg { fill: var(--tag); }
.tag--brand span { color: var(--tag); }
.brand-logo img { display: block; width: 39%; }
.brand-list li { display: flex; align-items: center; }
.brand-list li:not(:last-child) { padding-bottom: 1.5px; }
.brand-list li + li { margin-top: 1.5px; }
.brand-list svg { width: 16px; height: 16px; fill: var(--fg); flex-shrink: 0; margin-right: 4px; }
.brand-list span {
  padding-left: 5px; font-family: "Rubik", sans-serif; font-size: 16px;
  font-weight: 400; line-height: 1.5; color: var(--fg);
}

/* ---------- Linhas: vídeo e catálogo ---------- */
.brand-row {
  display: flex; gap: 20px; width: calc(100% - 20px); max-width: var(--content);
  margin: 0 auto; padding: 10px 0;
}
.brand-row--gap { margin-top: 40px; }
.brand-spacer { flex: 0 1 70%; min-width: 0; padding: 10px; }
.brand-video, .catalog-list { flex: 0 1 100%; min-width: 0; }
.catalog-list { display: flex; flex-direction: column; gap: 20px; }
.brand-video { display: flex; gap: 20px; }
.video-frame, .brand-video-spacer { flex: 1 1 0; min-width: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }

.catalog-bar { display: flex; gap: 20px; background: #EBEBEB; border-radius: 10px; }
.catalog-info {
  flex: 0 1 100%; min-width: 0; display: flex; align-items: center; gap: 50px; padding: 10px;
}
.catalog-icon { flex: 0 0 12%; }
.catalog-icon img { display: block; width: 68%; }
.catalog-name {
  font-family: "Rubik", sans-serif; font-size: 17px; font-weight: 400;
  line-height: 1; color: #353535;
}
.catalog-action { flex: 0 1 32%; display: flex; align-items: center; padding: 10px; }
.btn-catalog {
  display: inline-block; background: var(--navy); color: #fff; border-radius: 3px;
  font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 400; line-height: 1;
  padding: 12px 24px; transition: background .3s;
}
.btn-catalog:hover { background: var(--orange); }
/* catálogo sem arquivo: pede pelo contato */
.btn-catalog--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.btn-catalog--ghost:hover { color: #fff; }

/* ==========================================================
   Responsivo
   ========================================================== */
@media (max-width: 1366px) {
  .catalog-name { font-size: 15px; }
  .catalog-action { flex-basis: 250px; }
}

@media (max-width: 767px) {
  .brand { padding: var(--pt-m, 0) 0 var(--pb-m, 150px); }
  .brand-band { padding: 0 var(--bpx-m, 20px); }
  .brand-inner { flex-direction: column; gap: var(--band-gap-m, 0); padding: var(--bpt-m, 0) 0 var(--bpb-m, 50px); }
  .brand-photo { flex: none; width: 100%; margin: -82px 0 0; }
  .brand-info { flex: none; width: 100%; }
  .brand-logo img { width: 80%; }
  .brand-row {
    flex-direction: column; width: 100%;
    padding: var(--rt-m, 0) var(--rr-m, 20px) var(--rb-m, 0) var(--rl-m, 20px);
  }
  .brand-row--gap { margin-top: 0; }
  .brand-spacer, .brand-video-spacer { display: none; }
  .brand-video { flex-direction: column; }
  /* espaçadores que o original não oculta no mobile continuam ocupando espaço */
  .brand-spacer.brand-spacer--keep, .brand-video-spacer.brand-spacer--keep { display: block; flex: none; width: 100%; }
  .catalog-bar { flex-direction: column; gap: 0; }
  .catalog-info { justify-content: center; gap: 10px; }
  .catalog-icon img { width: 100%; }
  .catalog-action { flex: none; justify-content: center; }
}

/* ---------- Vídeo leve: miniatura + play; o player do YouTube só carrega no clique ---------- */
.yt-lite {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: #000; cursor: pointer; overflow: hidden;
}
.yt-lite img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s, opacity .3s; }
.yt-lite:hover img, .yt-lite:focus-visible img { transform: scale(1.03); opacity: .85; }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: #ff0000; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: background .2s;
}
.yt-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff;
}
.yt-lite:hover .yt-play, .yt-lite:focus-visible .yt-play { background: #cc0000; }
.yt-lite:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }