/* ═══════════════════════════════════════════════════════════════════
   Via Traço · correções v20
   Ajustes pontuais de grid, proporção, ordem editorial e responsivo.
   Este arquivo é carregado por último para preservar os estilos-base.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── PÁGINA SOBRE ───────────────────────── */
body.sobre-page .page-hero-band.sobre-hero {
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
body.sobre-page .sobre-hero-grid,
body.sobre-page .sobre-about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
body.sobre-page .sobre-hero-copy,
body.sobre-page .sobre-hero-media,
body.sobre-page .sobre-about > .ac {
  min-width: 0;
  padding: 64px 44px;
}
body.sobre-page .sobre-hero-copy,
body.sobre-page .sobre-about > .ac:first-child {
  border-right: 1px solid var(--rule);
}
body.sobre-page .sobre-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.sobre-page .sobre-hero-copy .sec-lbl { margin-bottom: 18px; }
body.sobre-page .sobre-hero-copy .sec-h {
  margin: 0 0 34px;
  text-transform: none;
  line-height: 1.04;
}
body.sobre-page .sobre-hero-media {
  margin: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--bg2);
}
body.sobre-page .sobre-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-height: 740px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}
body.sobre-page .hero-manifesto { max-width: 640px; }
body.sobre-page #sobre { border-bottom: 1px solid var(--rule); }
body.sobre-page .sobre-about > .ac {
  border-bottom: 0;
  border-right: 0;
}
body.sobre-page .sobre-copy { grid-column: 2; }
body.sobre-page .sobre-local {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg2);
}
body.sobre-page .local-card {
  width: min(100%, 560px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}
body.sobre-page .local-card__visual {
  width: 100%;
  aspect-ratio: 561 / 200;
  overflow: hidden;
  background: #eee;
}
body.sobre-page .local-card__visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}
body.sobre-page .local-card__body { padding: 22px 22px 24px; }
body.sobre-page .local-card__label {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}
body.sobre-page .local-card h2 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 300;
  text-transform: none;
}
body.sobre-page .local-card address {
  margin: 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink2);
}
body.sobre-page .local-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
body.sobre-page .local-card__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
body.sobre-page .local-card__actions a:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(62,103,45,.04);
}

/* ───────────── IDENTIDADE VISUAL E CATÁLOGOS ───────────── */
@media (max-width: 900px) {
  body.cat-page .page-hero-band {
    padding: 34px 20px 22px !important;
  }
  body.cat-page .page-hero-band .sec {
    padding: 28px 0 22px !important;
  }
  body.cat-page .iv-grid-section,
  body.cat-page .cat-grid-section {
    padding: 26px 20px 42px !important;
  }
  body.cat-page .iv-section-head,
  body.cat-page .cat-section-head {
    margin-bottom: 20px;
  }
  body.cat-page .iv-grid,
  body.cat-page .cat-grid {
    gap: 24px;
  }
  body.cat-page .iv-card,
  body.cat-page .cat-grid .iv-card {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    border-radius: 7px;
  }
  body.cat-page .iv-card__info {
    padding: 17px 18px 19px;
  }
  body.cat-page .cat-grid .iv-car,
  body.cat-page .cat-grid .iv-car__frame {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  body.cat-page .cat-grid .iv-car__img {
    width: 100%;
    height: 100%;
    padding: 7% 8% 3%;
    object-fit: contain;
    object-position: center;
  }
  body.cat-page .cat-commercial {
    padding: 58px 20px 90px;
  }
}
@media (max-width: 520px) {
  body.cat-page .page-hero-band,
  body.cat-page .iv-grid-section,
  body.cat-page .cat-grid-section,
  body.cat-page .cat-commercial { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ───────────────────────── HOME · EXPOGRAFIA ───────────────────────── */
/* Uma única imagem não precisa do percurso longo reservado aos carrosséis. */
body.home #expografia .h-carousel-driver { height: 120vh !important; min-height: 0 !important; }
body.home #expografia .h-expo-solo {
  max-width: min(900px, 92%);
  max-height: 74vh;
  object-fit: contain;
}
@media (max-width: 900px) {
  body.home #expografia .h-scrub-wrap { min-height: auto !important; }
  body.home #expografia .h-scrub-sticky {
    height: 100svh !important;
    min-height: 100svh !important;
  }
  body.home #expografia .h-carousel-driver {
    display: block !important;
    height: 95svh !important;
    min-height: 0 !important;
    visibility: hidden !important;
  }
  body.home #expografia .h-section__art {
    padding: 24px 18px 10px !important;
  }
  body.home #expografia .h-expo-solo {
    width: 100%;
    max-width: 100%;
    max-height: 49svh;
    object-fit: contain;
  }
}

/* ─────────────────────── CAPAS / LOGOS ─────────────────────── */
@media (max-width: 900px) {
  body.apre-brasilidades #s1 .capa-central {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.apre-brasilidades #s1 .capa-central img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  body.apre-memorial #s1 .campo.memorial-institucional {
    align-items: center !important;
    justify-content: center !important;
    padding: 6vh 7vw 9vh !important;
  }
  body.apre-memorial #s1 .memorial-logo {
    width: min(88%, 560px) !important;
    max-width: 88% !important;
    margin: 0 auto 8px !important;
    object-position: center !important;
  }
}

/* Cícero Dias: respeitar a caixa alta e baixa da marca. */
body.apre-cicero #s1 h1.cicero,
body.apre-cicero #s1 h1.cicero .linha,
body.apre-cicero #s1 h1.cicero .linha i {
  text-transform: none !important;
}

/* ───────── BRASILIDADES 09 + CÍCERO 09/10: ordem editorial móvel ───────── */
@media (max-width: 900px) {
  body.apre-brasilidades #sc1 .duas,
  body.apre-cicero #se .duas,
  body.apre-cicero #sc1 .duas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding: 9vh 7vw !important;
  }
  body.apre-brasilidades #sc1 .txt,
  body.apre-cicero #se .txt,
  body.apre-cicero #sc1 .txt { display: contents; }
  body.apre-brasilidades #sc1 .txt > .eyebrow,
  body.apre-cicero #se .txt > .eyebrow,
  body.apre-cicero #sc1 .txt > .eyebrow { order: 1; width: 100%; }
  body.apre-brasilidades #sc1 .txt > h2,
  body.apre-cicero #se .txt > h2,
  body.apre-cicero #sc1 .txt > h2 { order: 2; width: 100%; margin-top: 0; }
  body.apre-brasilidades #sc1 .txt > p,
  body.apre-cicero #se .txt > p,
  body.apre-cicero #sc1 .txt > p { order: 3; width: 100%; max-width: none; margin-top: 0; }
  body.apre-brasilidades #sc1 .duas > .painel,
  body.apre-cicero #se .duas > .painel,
  body.apre-cicero #sc1 .duas > .painel {
    order: 4;
    width: 100%;
    max-width: 680px;
    margin: 4px auto 0;
  }
  body.apre-brasilidades #sc1 .duas > .painel img,
  body.apre-cicero #se .duas > .painel img,
  body.apre-cicero #sc1 .duas > .painel img {
    width: 100% !important;
    height: auto !important;
    max-height: 58vh !important;
    object-fit: contain !important;
  }
  body.apre-brasilidades #sc1 .rosto-linha,
  body.apre-cicero #se .livreto-linha,
  body.apre-cicero #sc1 .rosto-linha {
    order: 5;
    width: 100%;
    max-width: none;
    margin-top: 2px;
  }
  body.apre-brasilidades #sc1 .rosto-linha .mini,
  body.apre-cicero #sc1 .rosto-linha .mini { width: min(38vw, 150px); }
  body.apre-cicero #se .livreto-linha .mini { width: min(28vw, 112px); }
}

/* ───────────────────────── MUHPAN · PARTE 03 ───────────────────────── */
@media (max-width: 900px) {
  body.apre-muhpan #s4 {
    justify-content: flex-start;
    padding: 8vh 7vw 10vh !important;
  }
  body.apre-muhpan #s4 .cab { margin-bottom: 24px; }
  body.apre-muhpan #s4 .faixa {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 28px;
    border-radius: 8px;
  }
  body.apre-muhpan #s4 .faixa img {
    width: 100%;
    height: clamp(88px, 19vw, 150px);
    object-fit: cover;
    object-position: center;
  }
  body.apre-muhpan #s4 .baixo {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  body.apre-muhpan #s4 .swatches { padding-right: 32vw; }
  body.apre-muhpan #s4 .sw { width: clamp(64px, 20vw, 88px); }
  body.apre-muhpan #s4 .selo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(31vw, 150px);
    max-width: 150px;
    justify-self: auto !important;
    margin: 0 !important;
    border-width: 4px;
  }
}

/* ───────────────── MESTRES DO RENASCIMENTO ───────────────── */
@media (max-width: 900px) {
  /* capa completa, sem cortar a faixa com a marca */
  body.apre-renascimento #s1 .capa-plena { background: #0d1a22; }
  body.apre-renascimento #s1 .capa-plena img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  /* 02 e 06: texto em cima, imagem abaixo */
  body.apre-renascimento #sm .duas,
  body.apre-renascimento #sv .duas-percurso {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 9vh 7vw !important;
  }
  body.apre-renascimento #sm .txt,
  body.apre-renascimento #sv .txt { order: 1; }
  body.apre-renascimento #sm .painel,
  body.apre-renascimento #sv .painel { order: 2; width: 100%; max-width: 720px; margin: 0 auto; }
  body.apre-renascimento #sm .painel img,
  body.apre-renascimento #sv .painel img {
    width: 100% !important;
    height: auto !important;
    max-height: 56vh !important;
    object-fit: contain !important;
  }
  /* 03: mesmo padrão de paleta das demais identidades */
  body.apre-renascimento #s4 { padding: 8vh 7vw 10vh !important; }
  body.apre-renascimento #s4 .paleta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  body.apre-renascimento #s4 .cor {
    width: 100%;
    aspect-ratio: 1 / 1.08 !important;
    min-height: 150px;
  }
  body.apre-renascimento #s4 .cor:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 7px);
    justify-self: center;
  }
  body.apre-renascimento #s4 .cor .nome,
  body.apre-renascimento #s4 .cor .nucleo { left: 11px; right: 11px; }
  /* 05: galeria em fade individual, sem esticar os banners */
  body.apre-renascimento #s6 {
    height: auto !important;
    min-height: 100dvh !important;
  }
  body.apre-renascimento #s6 .grude {
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: 9vh 7vw !important;
    overflow: visible !important;
  }
  body.apre-renascimento #s6 .duas-estd {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  body.apre-renascimento #s6 .galeria-v {
    width: 100%;
    max-width: 100%;
    min-height: 48vh;
    align-items: flex-start;
  }
  body.apre-renascimento #s6 .galeria-v .gv {
    transition: opacity .78s var(--ease), transform .78s var(--ease) !important;
    transform: translateY(26px);
  }
  body.apre-renascimento #s6 .galeria-v .gv.vis {
    opacity: 1;
    transform: translateY(0);
  }
  /* 07 e 08: texto principal, imagem, texto complementar */
  body.apre-renascimento #se .duas,
  body.apre-renascimento #sc1 .duas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding: 9vh 7vw !important;
  }
  body.apre-renascimento #se .txt,
  body.apre-renascimento #sc1 .txt { display: contents; }
  body.apre-renascimento #se .txt > .eyebrow,
  body.apre-renascimento #sc1 .txt > .eyebrow { order: 1; width: 100%; }
  body.apre-renascimento #se .txt > h2,
  body.apre-renascimento #sc1 .txt > h2 { order: 2; width: 100%; margin-top: 0; }
  body.apre-renascimento #se .txt > p,
  body.apre-renascimento #sc1 .txt > p { order: 3; width: 100%; max-width: none; margin-top: 0; }
  body.apre-renascimento #se .duas > .painel,
  body.apre-renascimento #sc1 .duas > .painel {
    order: 4;
    width: 100%;
    max-width: 680px;
    margin: 3px auto 0;
  }
  body.apre-renascimento #se .duas > .painel img,
  body.apre-renascimento #sc1 .duas > .painel img {
    width: 100% !important;
    height: auto !important;
    max-height: 58vh !important;
    object-fit: contain !important;
  }
  body.apre-renascimento #se .livreto-linha,
  body.apre-renascimento #sc1 .rosto-linha {
    order: 5;
    width: 100%;
    max-width: none;
    margin-top: 2px;
  }
  body.apre-renascimento #se .mini-g { width: min(58vw, 290px) !important; }
}

/* ───────────────────────── JABUTI 2024 ───────────────────────── */
/* 05: sem cartões, bordas ou caixas; somente as peças. */
body.apre-jabuti24 #s6 .palco,
body.apre-jabuti24 #s6 .palco .painel,
body.apre-jabuti24 #s6 .palco .painel.ativa {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.apre-jabuti24 #s6 .palco .painel::after { display: none !important; }
body.apre-jabuti24 #s6 .palco .painel img {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media (max-width: 860px) {
  /* 08: preserva a zona sticky e a entrada por fade, como no desktop. */
  body.apre-jabuti24 #s9 {
    height: 285vh !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.apre-jabuti24 #s9 .sac-grude {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 7vh 6vw 5vh !important;
    overflow: hidden;
  }
  body.apre-jabuti24 #s9 .duas-sacolas {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 !important;
  }
  body.apre-jabuti24 #s9 .sac-palco {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 56vh !important;
  }
  body.apre-jabuti24 #s9 .saco {
    position: absolute !important;
    width: min(36vw, 150px) !important;
    opacity: 0;
    transform: translate(var(--px,0px), calc(var(--py,0px) + 28px));
  }
  body.apre-jabuti24 #s9 .saco.viva { opacity: 1; }
  body.apre-jabuti24 #s9 .saco:nth-child(1) { left: 2% !important; top: 2% !important; }
  body.apre-jabuti24 #s9 .saco:nth-child(2) { left: 52% !important; top: 0 !important; }
  body.apre-jabuti24 #s9 .saco:nth-child(3) { left: 10% !important; top: 49% !important; }
  body.apre-jabuti24 #s9 .saco:nth-child(4) { left: 58% !important; top: 46% !important; }

  /* 10: mantém o giro por scroll e organiza os três círculos em triângulo central. */
  body.apre-jabuti24 #s11 {
    height: 300vh !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.apre-jabuti24 #s11 .cd-grude {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 7vh 6vw 5vh !important;
    overflow: hidden;
  }
  body.apre-jabuti24 #s11 .duas-cds {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
  }
  body.apre-jabuti24 #s11 .cd-capas-mini { display: none; }
  body.apre-jabuti24 #s11 .cd-palco {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 55vh !important;
  }
  body.apre-jabuti24 #s11 .disco {
    position: absolute !important;
    width: min(41vw, 175px) !important;
  }
  body.apre-jabuti24 #s11 .disco:nth-child(1) { left: 29% !important; top: 0 !important; }
  body.apre-jabuti24 #s11 .disco:nth-child(2) { left: 3% !important; top: 50% !important; }
  body.apre-jabuti24 #s11 .disco:nth-child(3) { left: 55% !important; top: 50% !important; }
}

/* ───────────────────────── SOBRE · RESPONSIVO ───────────────────────── */
@media (max-width: 900px) {
  body.sobre-page .sobre-hero-grid,
  body.sobre-page .sobre-about { grid-template-columns: 1fr; }
  body.sobre-page .sobre-hero-copy,
  body.sobre-page .sobre-hero-media,
  body.sobre-page .sobre-about > .ac {
    padding: 42px 24px !important;
  }
  body.sobre-page .sobre-hero-copy,
  body.sobre-page .sobre-about > .ac:first-child {
    border-right: 0;
  }
  body.sobre-page .sobre-hero-copy,
  body.sobre-page .sobre-local { border-bottom: 1px solid var(--rule); }
  body.sobre-page .sobre-hero-media { padding-top: 24px !important; padding-bottom: 24px !important; }
  body.sobre-page .sobre-hero-media img {
    min-height: 0;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
  }
  body.sobre-page .sobre-local,
  body.sobre-page .sobre-copy { grid-column: 1; }
  body.sobre-page .local-card { width: 100%; }
}
@media (max-width: 520px) {
  body.sobre-page .sobre-hero-copy,
  body.sobre-page .sobre-hero-media,
  body.sobre-page .sobre-about > .ac {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.sobre-page .sobre-hero-copy { padding-top: 36px !important; padding-bottom: 34px !important; }
  body.sobre-page .sobre-hero-media { padding-top: 18px !important; padding-bottom: 18px !important; }
  body.sobre-page .sobre-about > .ac { padding-top: 34px !important; padding-bottom: 34px !important; }
  body.sobre-page .local-card__body { padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Via Traço · correção v24
   Remove a costura horizontal que aparece sob os vídeos da Home
   durante o scroll em telas responsivas. A borda do layer de vídeo
   fica alguns pixels para fora do recorte branco do painel.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.home .h-section--scrub:not(.h-section--carousel) .h-video-wrap {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.home .h-section--scrub:not(.h-section--carousel) .h-scrub-video {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    /* Empurra as bordas do layer para fora do contêiner. */
    height: calc(100% + 8px) !important;
    min-height: calc(100% + 8px) !important;
    margin-top: -4px !important;
    margin-bottom: -4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Via Traço · correção v25
   Remove qualquer costura/borda do elemento de vídeo nas duas seções
   animadas da Home, em desktop, tablet e celular.
   A moldura branca de 6px cobre os quatro limites do layer sem alterar
   o conteúdo, o scrub ou a proporção visual dos vídeos.
   ═══════════════════════════════════════════════════════════════════ */
body.home #design-editorial .h-section__art,
body.home #sites-digital .h-section__art,
body.home #design-editorial .h-video-wrap,
body.home #sites-digital .h-video-wrap,
body.home #design-editorial .h-scrub-video,
body.home #sites-digital .h-scrub-video {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.home #design-editorial .h-video-wrap,
body.home #sites-digital .h-video-wrap {
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
  isolation: isolate;
}

/* Substitui as máscaras antigas de topo/base por uma única moldura
   sobreposta, cobrindo também as linhas verticais laterais. */
body.home #design-editorial .h-video-wrap::before,
body.home #sites-digital .h-video-wrap::before {
  content: none !important;
  display: none !important;
}

body.home #design-editorial .h-video-wrap::after,
body.home #sites-digital .h-video-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 7px solid #fff !important;
  background: transparent !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

/* Recorta dois pixels do próprio plano de mídia. Isso impede que o
   Edge/Chrome revele a borda do decoder durante transformações e scrub. */
body.home #design-editorial .h-scrub-video,
body.home #sites-digital .h-scrub-video {
  clip-path: inset(2px) !important;
  -webkit-clip-path: inset(2px) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}