/* ═══════════════════════════════════════════════════════
   STB JAPAN — home v2 (fase B)
   Complementa css/style.css: carrossel do hero, intro,
   banda de contato e refinamentos (um único dourado).
   ═══════════════════════════════════════════════════════ */

/* ── header integrado ao hero (padrão madeinbrazil.jp):
      nasce na cor do hero, vira branco com sombra ao rolar ── */
header {
  background-color: #F1F1F1;
  box-shadow: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.3s ease;
}
header.scrolled {
  background-color: rgba(241, 242, 244, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(10, 25, 47, 0.06), 0 8px 24px -18px rgba(10, 25, 47, 0.25);
}

/* ── HERO carrossel ─────────────────────────────────── */
.hero2 {
  background-color: #F1F1F1;
  padding: 128px 0 60px; /* hero mais próximo do header integrado */
}
.hero2__viewport {
  display: grid;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 4%;
}
.hero2__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(48px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out), visibility 0s 0.65s;
}
.hero2__slide.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.hero2__slide.is-leaving-left { transform: translateX(-48px); }
@media (prefers-reduced-motion: reduce) {
  .hero2__slide, .hero2__slide.is-active { transition: none; transform: none; }
}

.hero2__media img { width: 100%; height: auto; display: block; }
.hero2__text { text-align: left; padding: 30px 5px 0; }
.hero2__title {
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  margin: 0 0 10px;
  text-wrap: balance;
}
.hero2__sub {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  font-size: clamp(1.15rem, 2.1vw, 2rem);
  margin: 0;
}

/* slide 2 — Made in Brazil */
.hero2__slide--mib { align-self: stretch; }
.hero2__inner--mib {
  background: #F5F1E8; /* papel do madeinbrazil.jp */
  border: 1px solid rgba(20, 87, 58, 0.18);
  border-radius: 6px;
  min-height: 100%;
  display: flex;
  align-items: center;
  gap: 56px;
  padding: clamp(36px, 5vw, 72px);
}
.hero2__mib-text { flex: 1.1; min-width: 0; }
.hero2__mib-logo { height: 66px; width: auto; margin-bottom: 30px; display: block; }
.hero2__title--mib {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #14573A;
  letter-spacing: 0.01em;
  font-size: clamp(1.7rem, 3.2vw, 3rem);
}
.hero2__mib-desc {
  color: #3d4a42;
  line-height: 2;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  margin: 18px 0 34px;
  max-width: 34em;
}
.hero2__mib-media { flex: 1; min-width: 0; }
.hero2__mib-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  box-shadow: 0 24px 48px -20px rgba(14, 19, 17, 0.35);
}

/* controles */
.hero2__controls {
  max-width: 1920px;
  margin: 26px auto 0;
  padding: 0 4%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero2__arrow {
  width: 42px; height: 42px;
  border: 1px solid rgba(10, 25, 47, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.hero2__arrow:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.hero2__dots { display: flex; gap: 10px; }
.hero2__dot {
  width: 34px; height: 4px;
  border: none;
  border-radius: 2px;
  background: rgba(10, 25, 47, 0.42);
  cursor: pointer;
  transition: background 0.3s;
}
.hero2__dot.is-active { background: var(--color-navy); }

/* ── intro institucional ────────────────────────────── */
.home-intro { background: var(--color-white); padding: 110px 0; text-align: center; }
.home-intro__title {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: 0.02em;
  margin-bottom: 26px;
  text-wrap: balance;
}
.home-intro__text {
  color: var(--color-text);
  line-height: 2.1;
  max-width: 42em;
  margin: 0 auto 40px;
  font-size: 1.02rem;
}
.btn-navy { border-color: var(--color-navy); color: var(--color-navy); }
.btn-navy:hover { background: var(--color-navy); color: #fff; }

/* ── negócios: dourado unificado + molduras ─────────── */
.panel-dark { background: linear-gradient(135deg, #0d1b2e 0%, #0A192F 100%); }
.partnership-text .strong { font-weight: 800; }
.accent-gold { color: var(--color-gold) !important; }
.btn-gold-line { border-color: var(--color-gold); color: var(--color-gold); }
.btn-gold-line:hover { background: var(--color-gold); color: #0A192F; }
.partnership-content.is-reversed { flex-direction: row-reverse; }
.partnership-content.is-reversed .partnership-text { padding-left: 40px; }

.media-frame { padding: 0 !important; background: transparent !important; border: none !important; overflow: hidden; border-radius: 4px; }
.media-frame img { width: 100%; height: 200px; object-fit: cover; object-position: center 30%; display: block; }
.logo-frame { height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.logo-frame img { max-width: 200px; max-height: 110px; width: auto; height: auto; }
.logo-frame--white { background-color: #ffffff !important; border: 1px solid var(--color-silver-light) !important; border-radius: 6px; }
.media-frame--badge { position: relative; }
.media-frame--badge .media-badge {
  position: absolute;
  left: 14px; bottom: 14px;
  width: auto; height: 38px;
  background: #ffffff;
  padding: 7px 14px;
  border-radius: 4px;
  box-shadow: 0 6px 18px -6px rgba(10, 25, 47, 0.45);
  object-fit: contain;
}

/* ── banda de contato ───────────────────────────────── */
.home-contact {
  background: #F4F5F7;
  border-top: 1px solid #E4E7EC;
  padding: 100px 0;
  text-align: center;
}
.home-contact__title {
  font-family: var(--font-heading);
  color: #0A192F;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 16px;
}
.home-contact__text { color: #5A6472; line-height: 2; margin-bottom: 38px; font-size: 1rem; }
.btn-contact { background: #0A192F; border-color: #0A192F; color: #fff; font-weight: 700; }
.btn-contact:hover { background: #16305A; border-color: #16305A; color: #fff; }

/* ── responsivo ─────────────────────────────────────── */
@media (max-width: 900px) {
  .hero2 { padding-top: 110px; }
  .hero2__inner--mib { flex-direction: column-reverse; gap: 30px; }
  .hero2__mib-logo { height: 42px; margin-bottom: 20px; }
  .partnership-content.is-reversed { flex-direction: column; }
  .partnership-content.is-reversed .partnership-text { padding-left: 0; }
}
@media (max-width: 600px) {
  .hero2 { padding-top: 96px; padding-bottom: 40px; }
  .hero2__title { font-size: 7.8vw; letter-spacing: -0.01em; }
  .hero2__sub { font-size: 5.4vw; }
  .hero2__mib-logo { height: 46px; }
  .hero2__controls { gap: 12px; }
  .home-intro { padding: 70px 0; }
  .home-contact { padding: 70px 0; }
}