/* Página: Início */
.hero {
  background: var(--bg-warm);
  background-image: url("../assets/img/outros/hero-bg.jpg");
  background-size: cover; background-position: center;
  padding: 28px 0 10px;
}
.hero__stage {
  position: relative; max-width: 1180px; margin-inline: auto; padding: 0 32px;
  height: clamp(540px, 45vw, 640px);
}
.hero__ele {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  width: 430px; max-width: 42%; z-index: 3;
}
.hero__cans {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2; width: 100%;
}
.hero__copy-left, .hero__copy-right {
  position: absolute; top: 150px; z-index: 4; max-width: 340px;
}
.hero__copy-left { left: 24px; }
.hero__copy-right { right: 24px; }
.hero__h {
  font-size: clamp(22px, 2.8vw, 34px); line-height: 1.14; letter-spacing: .02em;
  color: #3a3a3a; font-weight: 300; text-transform: uppercase; white-space: nowrap;
}
.hero__h .mag { color: var(--magenta); font-weight: 500; display: block; }
.hero__h--right { text-transform: none; white-space: normal; }
.hero__h--right .mag { color: var(--magenta); font-weight: 600; display: inline; }
.hero__line {
  text-align: center; font-size: clamp(24px, 3vw, 40px); letter-spacing: .01em;
  color: #3a3a3a; padding: 14px 0 4px;
}
.hero__line .mag { color: var(--magenta); font-weight: 600; }

.kicker { text-align: center; font-size: 26px; letter-spacing: .06em; color: #4a4a4a; text-transform: uppercase; font-weight: 300; }
.subkicker { text-align: center; color: var(--teal); font-size: 16px; margin-top: 6px; }

.brand-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 980px; margin: 34px auto 0; }
.brand-tab { text-align: center; padding-bottom: 12px; border-bottom: 2px solid #333; }
.brand-tab:last-child { border-bottom-color: #2323e6; }
.brand-tab img { height: 46px; width: auto; margin: 0 auto; }

.lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 24px auto 0; }
.line-item { text-align: center; }
.line-item__img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.line-item__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.line-item__img img.hov { opacity: 0; }
.line-item:hover .line-item__img img.hov { opacity: 1; }
.line-item__img span {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  color: #fff; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.line-item__label { margin-top: 14px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: #222; }

/* Certificações */
.cert-title { text-align: center; margin: 10px auto 44px; }
.cert-brush {
  display: inline-block; color: #fff; font-size: 21px; letter-spacing: .14em;
  text-transform: uppercase; padding: 20px 60px; line-height: 1;
  background: url("../assets/img/outros/pincel-preto.png") center/100% 100% no-repeat;
}
.cert-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; max-width: 1120px; margin: 0 auto; }
.cert-strip .cell { border: 1px solid var(--line); background: #fff; display: grid; place-items: center; padding: 16px 10px; aspect-ratio: 3/2; min-width: 0; }
.cert-strip .cell img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }

@media (max-width: 760px) {
  .hero__stage { height: auto; padding-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
  .hero__copy-left, .hero__copy-right {
    position: static; max-width: none; text-align: center; margin-top: 10px; order: 2;
  }
  .hero__ele { position: static; transform: none; margin: 10px auto; width: 70%; order: 1; }
  .hero__cans { position: static; order: 3; margin-top: 16px; }
  .kicker { font-size: 20px; }
  .brand-tabs { grid-template-columns: 1fr; max-width: 260px; }
  .lines-grid { grid-template-columns: 1fr; }
  .cert-strip { grid-template-columns: repeat(3, 1fr); }
  .cert-brush { font-size: 16px; padding: 16px 30px; }
}