/* ============================================================
   ALPHA7 — v4 : vídeos reais + POSTER em <img> (robusto)
   • <img.vposter> = frame real, sempre visível (mobile/screenshot ok)
   • <video.bgvideo> entra por cima e só aparece ao TOCAR (playing)
   • data-auto: toca na viewport (hero/banda) · data-hover: toca no hover
   ============================================================ */

/* POSTER (imagem real) — base sempre visível */
.vposter {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; z-index: 2;
}
/* VÍDEO — por cima do poster, revelado ao tocar */
.bgvideo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .9s var(--ease); background: transparent;
}
.bgvideo.is-playing { opacity: 1; }
body.no-motion .bgvideo { transition: none; }

/* esconde a cena SVG quando há poster (a imagem real assume) */
.hero.video-on .hero-scene { opacity: 0; }
.vband.video-on .vband-art { opacity: 0; }
.scene.video-on .scene-art { opacity: 0; }
/* alivia camadas escuras das cenas para a imagem real aparecer */
.scene.video-on::after { opacity: .42; }
.scene.video-on::before { opacity: .35; }
.video-card .thumb.video-on .v-scrim { background: linear-gradient(180deg, rgba(8,8,10,0) 34%, rgba(8,8,10,0.6)); }

/* HERO: poster/vídeo como base; gradientes/overlay por cima dão leitura */
/* graduação Executive Dark — navio, levemente mais claro */
.hero .vposter { z-index: 0; filter: saturate(.92) brightness(.66) contrast(1.06) sepia(.15) hue-rotate(-8deg); }
.hero .bgvideo { z-index: 0; filter: saturate(.92) brightness(.66) contrast(1.06) sepia(.15) hue-rotate(-8deg); }
.hero .hero-bg { z-index: -1; }
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(8,8,10,0.42) 0%, rgba(8,8,10,0.14) 32%, rgba(8,8,10,0.66) 78%, rgba(8,8,10,0.95) 100%),
    radial-gradient(120% 80% at 18% 100%, var(--hero-tint), transparent 60%) !important;
}

/* vband institucional: atrás do overlay escuro */
.vband .vposter, .vband .bgvideo { z-index: 0; filter: saturate(.92) brightness(.52); }

/* pband parceria: vídeo escurecido + scrim vinho para leitura */
.pband .vposter, .pband .bgvideo { z-index: 0; filter: saturate(.7) brightness(.34) contrast(1.05); }
.pband.video-on .pband-art { opacity: 0; }
.pband-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(28,14,19,0.55) 0%, rgba(10,10,14,0.86) 60%, rgba(7,7,10,0.95) 100%);
}

/* Insights: dentro das cenas (acima do scene-art, abaixo do scrim) */
.scene > .vposter { z-index: 2; filter: saturate(.98) brightness(.82) contrast(1.02); }
.scene > .bgvideo { z-index: 3; filter: saturate(.98) brightness(.86) contrast(1.02); }
.video-feature .v-scrim, .video-card .thumb .v-scrim { z-index: 4 !important; }
.video-feature .play-btn, .video-card .play-btn,
.video-feature .v-meta, .video-card .scene-cap, .scene-tag, .scene-rec { z-index: 6 !important; }

/* leve realce ao passar o mouse */
.video-card .thumb .vposter, .video-feature .vposter,
.video-card .thumb .bgvideo, .video-feature .bgvideo { transition: opacity .9s var(--ease), transform .8s var(--ease); }
.video-card:hover .vposter, .video-feature:hover .vposter,
.video-card:hover .bgvideo, .video-feature:hover .bgvideo { transform: scale(1.04); }

/* ---------- LOCKUP DA MARCA (logo + wordmark calibrados) ---------- */
.brand { gap: 0; align-items: center; }
.brand-name {
  margin-left: 15px; padding-left: 15px;
  border-left: 1px solid var(--line-strong);
  justify-content: center;
}
.brand-name .b1 { font-size: 17px; letter-spacing: 0.04em; line-height: 1.1; }
.brand-name .b2 { font-size: 9.5px; letter-spacing: 0.22em; margin-top: 2px; }
.nav.scrolled .brand-name { /* acompanha o header ao rolar */ }
.footer .brand-name { margin-left: 17px; padding-left: 17px; }
.footer .brand-name .b1 { font-size: 19px; }
.footer .brand-name .b2 { font-size: 10px; }
@media (max-width: 760px) {
  .brand-name { margin-left: 12px; padding-left: 12px; }
  .brand-name .b1 { font-size: 15px; }
  .brand-name .b2 { font-size: 8.5px; }
}

/* ---------- LOGO DA MARCA (header + footer) ---------- */
.brand-logo {
  height: 58px; width: auto; display: block; flex: none;
  transition: height .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease);
  filter: drop-shadow(0 2px 10px rgba(122,31,43,0.35));
}
.nav.scrolled .brand-logo { height: 48px; }
.brand:hover .brand-logo { filter: drop-shadow(0 2px 14px rgba(201,162,75,0.5)); transform: translateY(-1px); }
.footer .brand-logo { height: 64px; }
[data-variant="c"] .brand-logo { filter: drop-shadow(0 2px 8px rgba(110,28,40,0.25)); }
@media (max-width: 760px) { .brand-logo { height: 46px; } .footer .brand-logo { height: 54px; } }

/* selo discreto "vídeo substituível" */
.vswap {
  position: absolute; bottom: 12px; right: 12px; z-index: 6;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(236,233,227,0.5); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px; background: rgba(8,8,11,0.4); backdrop-filter: blur(4px); pointer-events: none;
}

/* aviso de conformidade no rodapé — discreto */
.compliance-note {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; color: var(--text-mute); max-width: 980px;
}

/* ---------- BLOCO COMPLEMENTAR (Comércio Exterior e Apoio Aduaneiro) ---------- */
.area-wide {
  margin-top: 18px; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch;
  gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg);
  position: relative; overflow: hidden;
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
.area-wide::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; z-index: 4;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.area-wide:hover { border-color: var(--line-gold); background: var(--surface-2); }
.area-wide:hover::after { transform: scaleX(1); }
.aw-content {
  display: flex; align-items: flex-start; gap: clamp(18px, 2.2vw, 30px);
  padding: clamp(28px, 3.4vw, 46px); position: relative; z-index: 1;
}
.aw-ico {
  width: 64px; height: 64px; flex: none; border: 1px solid var(--line-gold); border-radius: var(--r);
  display: grid; place-items: center; color: var(--gold);
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.area-wide:hover .aw-ico { background: var(--accent-soft); transform: translateY(-2px); }
.aw-ico svg { width: 30px; height: 30px; }
.aw-body { max-width: 56ch; }
.aw-eyebrow {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 12px;
}
.aw-body h3 { margin-bottom: 12px; }
.aw-body p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }

/* mídia de vídeo (lado direito) */
.aw-media {
  position: relative; overflow: hidden; min-height: 240px;
  border-left: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(122,31,43,0.30), transparent 58%),
    linear-gradient(155deg, #17171d 0%, #0f0f14 60%, #0a0a0f 100%);
}
.aw-media .bgvideo, .aw-media .vposter { filter: saturate(.94) brightness(.74) contrast(1.03); }
.aw-media .scene-cap { z-index: 5; }
/* legenda COMEX: cor uniforme (sem mistura) */
.aw-cap, .aw-cap b { color: var(--gold-lt); font-weight: 500; }

/* foto real em card de setor */
.scard-scene.has-photo { background: #0b0b10; }
.scard-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) brightness(.7) contrast(1.04);
  transition: transform .6s var(--ease), filter .5s var(--ease);
}
.scard:hover .scard-photo { transform: scale(1.06); filter: saturate(1) brightness(.82); }
.scard-scene.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,11,0.2), rgba(8,8,11,0.55));
}
.scard-scene.has-photo .scard-idx, .scard-scene.has-photo .scard-glow { z-index: 2; }
.aw-media::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,14,0.55), transparent 30%),
              radial-gradient(90% 80% at 50% 30%, transparent 45%, rgba(0,0,0,0.4));
}
@media (max-width: 760px) {
  .area-wide { grid-template-columns: 1fr; }
  .aw-content { padding: 26px 22px; gap: 16px; }
  .aw-media { min-height: 200px; border-left: none; border-top: 1px solid var(--line); order: -1; }
}
