/* Teste do topo com os dois juntos atrás do título: a foto ocupa o topo inteiro e o título fica por cima, na parte de baixo.
   A foto (img/hero-juntos-*) tem fundo transparente e sai de ../brand/dupla/compor-juntos.py. Três versões na mesma base:
   .hj--centro      versão 1: só a foto, o título, o texto e os dois botões (.hj--dividido: fundo preto e marfim, no fim do arquivo)
   .hj--assinatura  versão 2: cada advogado tem a própria coluna embaixo, com áreas, cidade, nome e botão
   .hj--capa        versão 3: a palavra "Parceria" enorme atrás das cabeças, como capa de revista
   Botões: os mesmos .hero-parceria-cta de contorno, de hero-parceria.css. */

.hero.hj {
  --hj-h: clamp(600px, calc(100vh - var(--header-height, 94px)), 940px);
  --hj-bottom: clamp(28px, 5vh, 56px);
  --parceria-cta-line: var(--gold-500);
  position: relative;
  isolation: isolate;
  display: block;
  height: var(--hj-h);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
@supports (height: 100svh) {
  .hero.hj { --hj-h: clamp(600px, calc(100svh - var(--header-height, 94px)), 940px); }
}
.hero.hj::before,
.hero.hj::after { content: none; }

/* Os dois, encostados na base e centralizados. A altura manda: o quadro tem a proporção da foto. */
.hj-stage {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  height: 100%;
  aspect-ratio: 1062 / 920;
  transform: translateX(-50%);
}
.hj-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}
/* Escurece a base da foto, onde fica o título. As áreas e linhas ficam acima da sombra. */
.hj-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, var(--ink) 0%, rgb(12 12 13 / .96) 18%, rgb(12 12 13 / .82) 33%, rgb(12 12 13 / .45) 48%, transparent 63%);
}

.hj-copy {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: var(--hj-bottom);
  width: min(calc(100% - var(--gutter) * 2), 900px);
  margin-inline: auto;
}
.hj .hj-kicker {
  margin: 0 0 18px;
  color: var(--gold-300);
  font: 500 var(--fs-caption)/1.6 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero.hj h1 {
  max-width: none;
  margin: 0 auto;
  color: var(--cream);
  font: 400 clamp(46px, 4.2vw, 68px)/1.04 var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: normal;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.hj .hj-description {
  max-width: 560px;
  margin: 20px auto 0;
  color: var(--on-dark);
  font: 400 var(--fs-body)/1.6 var(--sans);
  text-wrap: pretty;
}
.hj .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: auto;
  max-width: none;
  margin: 30px auto 0;
}
.hj .hj-note {
  margin: 18px auto 0;
  color: var(--on-dark);
  font: 400 13px/1.6 var(--sans);
  text-wrap: balance;
}

/* ---------- Versão 2: uma coluna para cada advogado ---------- */
.hj-duo {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: var(--hj-bottom);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
  grid-template-areas: "marco copy rosy";
  align-items: end;
  gap: 40px;
  width: min(calc(100% - var(--gutter) * 2), 1320px);
  margin-inline: auto;
}
.hj--assinatura .hj-copy {
  position: static;
  grid-area: copy;
  width: auto;
}
.hj--assinatura h1 { font-size: clamp(40px, 3.2vw, 52px); }
/* No computador o nome já está acima do botão, e o botão diz só "Falar no WhatsApp". No celular, o nome volta. */
.hj-cta-who { display: none; }
.hj-person { display: grid; justify-items: start; gap: 22px; text-align: left; }
.hj-person--marco { grid-area: marco; }
.hj-person--rosy { grid-area: rosy; justify-items: end; text-align: right; }
.hj-person-id { display: grid; gap: 10px; }
.hj-person-id::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold-500);
}
.hj-person--rosy .hj-person-id::before { justify-self: end; }
.hj .hj-person-role {
  margin: 0;
  color: var(--gold-300);
  font: 500 11px/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hj .hj-person-name {
  margin: 0;
  color: var(--cream);
  font: 400 26px/1.15 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}

/* ---------- Versão 3: capa de revista ---------- */
/* A foto desce para as cabeças passarem só na base das letras, como no título de uma capa de revista. */
.hj--capa .hj-stage { bottom: -13%; }
.hj--capa .hj-stage::after {
  background: linear-gradient(0deg, var(--ink) 0%, rgb(12 12 13 / .96) 30%, rgb(12 12 13 / .82) 44%, rgb(12 12 13 / .45) 58%, transparent 72%);
}
.hj .hj-word {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -14%;
  margin: 0;
  transform: translateX(-50%);
  color: var(--cream);
  font: 400 calc(var(--hj-h) * .23)/1 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.hj-lines {
  position: absolute;
  z-index: 2;
  top: 30%;
  width: clamp(190px, 17vw, 260px);
  text-align: left;
}
/* Nas margens: até 32% do quadro para fora, sem passar da margem da tela. */
.hj-lines--marco { left: max(calc((100% - 100vw) / 2 + var(--gutter)), -32%); }
.hj-lines--rosy { right: max(calc((100% - 100vw) / 2 + var(--gutter)), -32%); text-align: right; }
.hj .hj-lines-head {
  margin: 0 0 14px;
  color: var(--gold-300);
  font: 500 11px/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hj-lines ul { margin: 0; padding: 0; list-style: none; }
.hj-lines li {
  padding: 12px 0;
  border-top: 1px solid rgb(220 188 124 / .3);
  color: var(--cream);
  font: 400 21px/1.25 var(--serif);
  font-optical-sizing: auto;
}
.hj--capa h1 { font-size: clamp(40px, 3.4vw, 56px); }

/* ---------- Entrada ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hj-copy > *,
  .hj-person { animation: hero-parceria-enter var(--dur-4) var(--ease) both; }
  .hj-copy h1 { animation-delay: 60ms; }
  .hj-copy .hj-description { animation-delay: 120ms; }
  .hj-copy .hero-actions,
  .hj-person { animation-delay: 180ms; }
  .hj-copy .hj-note { animation-delay: 220ms; }
  .hj-stage { animation: hero-parceria-fade 900ms var(--ease) 80ms both; }
  .hj-lines { animation: hero-parceria-enter var(--dur-4) var(--ease) 420ms both; }
  .intro-loading .hj-copy > *,
  .intro-loading .hj-person,
  .intro-loading .hj-stage,
  .intro-loading .hj-lines { animation-play-state: paused; }
}

/* Computador estreito: as áreas de fora entram um pouco para não passar da borda. */
@media (min-width: 1101px) and (max-width: 1360px) {
  .hj-lines { width: clamp(210px, 19vw, 260px); }
  .hj-lines li { font-size: 17px; }
  .hj-duo { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 500px) minmax(0, 1fr); }
  .hj .hj-person-name { font-size: 22px; }
}
/* Janelas baixas no computador: ritmo vertical mais curto. */
@media (min-width: 1101px) and (max-height: 760px) {
  .hero.hj h1 { font-size: clamp(42px, 3.6vw, 54px); }
  .hj--assinatura h1,
  .hj--capa h1 { font-size: clamp(38px, 3vw, 46px); }
  .hj .hj-kicker { margin-bottom: 14px; }
  .hj .hj-description { margin-top: 14px; font-size: var(--fs-small); }
  .hj .hero-actions { margin-top: 22px; }
  .hj .hj-note { display: none; }
}

/* ---------- Até 1100 px: a foto dos dois vem primeiro, de ponta a ponta, e o texto entra sobre a base dela ---------- */
@media (max-width: 1100px) {
  .hero.hj {
    --hj-w: min(112vw, 760px);
    height: auto;
    padding: 0 0 44px;
  }
  .hj-stage {
    position: relative;
    left: 50%;
    bottom: auto;
    width: var(--hj-w);
    height: auto;
    aspect-ratio: auto;
    transform: translateX(-50%);
  }
  .hj-photo {
    position: relative;
    height: auto;
    aspect-ratio: 1062 / 920;
  }
  .hj-stage::after,
  .hj--capa .hj-stage::after {
    background: linear-gradient(0deg, var(--ink) 0%, rgb(12 12 13 / .94) 16%, rgb(12 12 13 / .6) 32%, transparent 52%);
  }

  .hj-copy {
    position: relative;
    bottom: auto;
    width: min(calc(100% - var(--gutter) * 2), 460px);
    margin: -40px auto 0;
  }
  .hero.hj h1 { font-size: clamp(34px, 8.4vw, 46px); line-height: 1.08; }
  .hj .hj-description { max-width: none; margin-top: 18px; font-size: var(--fs-small); }
  .hj .hero-actions { flex-direction: column; gap: 10px; width: 100%; margin-top: 26px; }
  .hj .hero-actions .hero-parceria-cta { width: 100%; }
  .hj .hj-note { margin-top: 16px; font-size: var(--fs-caption); }

  /* Versão 2: nome e área de cada um logo abaixo de cada um; depois o título e os dois botões. */
  .hj-duo {
    position: relative;
    bottom: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "marco rosy"
      "copy copy"
      "bmarco bmarco"
      "brosy brosy";
    gap: 0 16px;
    width: min(calc(100% - var(--gutter) * 2), 460px);
    margin: -64px auto 0;
  }
  .hj-person { display: contents; }
  .hj-person--marco .hj-person-id { grid-area: marco; }
  .hj-person--rosy .hj-person-id { grid-area: rosy; text-align: right; }
  .hj-person--marco .hero-parceria-cta { grid-area: bmarco; margin-top: 24px; }
  .hj-person--rosy .hero-parceria-cta { grid-area: brosy; margin-top: 10px; }
  .hj-person-id { position: relative; z-index: 2; gap: 6px; }
  .hj .hj-person-role { font-size: 9px; letter-spacing: .14em; }
  .hj .hj-person-name { font-size: 17px; }
  .hj--assinatura .hj-copy { margin: 22px 0 0; }
  .hj--assinatura h1 { font-size: clamp(30px, 7.4vw, 40px); }
  .hj-cta-who { display: inline; }
  .hj-cta-wa { display: none; }

  /* Versão 3: a palavra atrás das cabeças e, na base da foto, uma linha com as áreas de cada um. */
  .hj--capa .hj-stage { bottom: auto; padding-top: calc(var(--hj-w) * .1); }
  .hj .hj-word { top: 0; font-size: calc(var(--hj-w) * .19); }
  .hj-lines { top: auto; bottom: 0; width: 40%; }
  .hj-lines--marco { left: 9%; }
  .hj-lines--rosy { right: 9%; }
  .hj .hj-lines-head { margin-bottom: 6px; font-size: 9px; letter-spacing: .14em; }
  .hj-lines li { padding: 0; border: 0; font-size: 14px; line-height: 1.35; }
  .hj--capa .hj-copy { margin-top: 22px; }
  .hj--capa h1 { font-size: clamp(30px, 7.4vw, 40px); }
}

/* Celular em pé com tela baixa: a foto encurta por baixo para o primeiro botão caber na primeira tela. */
@media (max-width: 1100px) and (max-height: 1100px) {
  .hj-photo {
    aspect-ratio: auto;
    height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 50vh);
    height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 50svh);
  }
}
@media (max-width: 1100px) and (max-height: 900px) {
  .hj-photo {
    aspect-ratio: auto;
    height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 44vh);
    height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 44svh);
  }
}
@media (max-width: 1100px) and (max-height: 800px) {
  .hj--assinatura .hj-description { display: none; }
}
@media (max-width: 1100px) and (max-height: 700px) {
  .hj-photo { height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 40vh); height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 40svh); }
  .hero.hj h1 { font-size: clamp(30px, 8vw, 38px); }
  .hj--assinatura h1,
  .hj--capa h1 { font-size: clamp(28px, 7vw, 34px); }
  .hj .hj-kicker { margin-bottom: 12px; font-size: 10px; letter-spacing: .14em; }
  .hj .hj-description { margin-top: 12px; font-size: var(--fs-ui); line-height: 1.5; }
  .hj .hero-actions { margin-top: 18px; }
}

@media (max-width: 1100px) and (max-height: 620px) {
  .hj-photo { height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 36vh); height: min(calc(var(--hj-w) * var(--hj-ratio, .866)), 36svh); }
  .hero.hj h1 { font-size: clamp(28px, 8vw, 34px); }
  .hj .hj-kicker { margin-bottom: 10px; }
  .hj .hj-description { font-size: 14px; }
}
@media (max-width: 380px) {
  .hj-lines { width: 42%; }
  .hj-lines li { font-size: 12px; line-height: 1.3; }
  .hj .hj-lines-head { margin-bottom: 4px; font-size: 8px; }
}

/* Celular deitado: a foto à esquerda e o texto à direita. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .hero.hj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding: 0; }
  .hj-stage { left: 0; width: 100%; transform: none; }
  .hj-photo { height: calc(100vh - 72px); height: calc(100svh - 72px); }
  .hj-stage::after { background: linear-gradient(270deg, var(--ink), transparent 30%), linear-gradient(0deg, var(--ink), transparent 30%); }
  .hj-copy,
  .hj-duo { width: 100%; margin: 0; padding: 16px var(--gutter) 16px 8px; }
  .hj .hj-kicker { margin-bottom: 8px; font-size: 10px; }
  .hero.hj h1,
  .hj--assinatura h1,
  .hj--capa h1 { font-size: 27px; }
  .hj .hj-description { margin-top: 8px; font-size: 13px; line-height: 1.5; }
  .hj .hero-actions { gap: 8px; margin-top: 12px; }
  .hj .hero-parceria-cta { min-height: 44px; }
  .hj .hj-note { display: none; }
  .hj-duo { grid-template-areas: "copy copy" "bmarco bmarco" "brosy brosy"; }
  .hj-person-id { display: none; }
  .hj--assinatura .hj-copy { margin: 0; }
  .hj-person--marco .hero-parceria-cta { margin-top: 14px; }
  .hj-person--rosy .hero-parceria-cta { margin-top: 8px; }
  .hj--capa .hj-stage { padding-top: 7vw; }
  .hj--capa .hj-photo { height: calc(100vh - 72px - 7vw); height: calc(100svh - 72px - 7vw); }
  .hj .hj-word { font-size: 9vw; }
  .hj-lines { display: none; }
  .hj-fundo { display: none; }
}

@media (max-width: 540px) {
  .hj .hj-kicker { margin-bottom: 14px; font-size: 10px; letter-spacing: .14em; }
}

/* ---------- Versão 1: os dois lado a lado numa imagem só ----------
   A foto (img/hero-juntos-alinhados-*, de ../brand/dupla/compor-juntos-alinhados.py) traz os dois com os olhos na mesma
   linha, o rosto dela com 80% do tamanho do dele e os dois rostos à mesma distância do meio. Os dois ficam em preto e
   branco com o mesmo contraste: ele sobre o preto, ela com o terno branco limpo sobre o marfim. Eles são os protagonistas:
   a foto ocupa 118% da altura do topo, com a cabeça logo abaixo do cabeçalho, e o título é menor que os rostos.
   O fundo é contínuo, como numa foto de estúdio: escuro atrás dele e marfim atrás dela. A passagem fica atrás do ombro
   dele, e não ao lado dela, para não parecer uma sombra; o terno escuro dele se destaca no tom claro e o branco dela no marfim.
   O topo sobe por baixo do cabeçalho, para o fundo e a textura continuarem até o alto da tela. A base escurece só a partir
   da altura do texto, que fica sobre um fundo só; acima dela o marfim e o terno branco dela continuam claros.
   Detalhes: textura leve de papel, luz suave atrás de cada um e o monograma de cada um, grande e tom sobre tom, atrás
   de cada um e cortado pela borda da tela. No celular deitado, com foto e texto em colunas, o topo volta ao preto. */
.brand-logo--vertical { display: none; }

@media not all and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .hero.hj--dividido {
    --hj-ratio: .841;
    height: calc(var(--hj-h) + var(--header-height, 94px));
    margin-top: calc(-1 * var(--header-height, 94px));
    /* O marfim chega inteiro em 56%, antes do ombro dela, para ela não ficar sobre o cinza da passagem. */
    background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 29%, #1b1917 34%, #403b35 38%, #7b746b 42%, #b4ac9f 46%, #ddd6ca 50%, #f1ece4 53%, var(--rosy-ivory) 56%);
  }
  .hj--dividido .hj-stage {
    top: calc(var(--header-height, 94px) + var(--hj-h) * .02);
    bottom: auto;
    height: calc(var(--hj-h) * 1.18);
    aspect-ratio: 1094 / 920;
  }

  .hj-fundo {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  /* Monogramas de fundo grandes e tom sobre tom, como marca-d'água: o MC num dourado quase apagado sobre o preto e o RBM
     num bronze claro sobre o marfim. Ficam atrás de cada um, na altura do queixo, cortados pela borda de fora da tela
     (o MC em 15% e o RBM em 12%). A cor vem por máscara (o desenho do SVG recorta um degradê), um pouco mais forte em cima. */
  .hj-fundo::before,
  .hj-fundo::after {
    content: "";
    position: absolute;
    top: calc(var(--header-height, 94px) + var(--hj-h) * .42);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
  }
  .hj-fundo::before {
    left: 0;
    height: calc(var(--hj-h) * .4);
    aspect-ratio: 177.5 / 152.8;
    -webkit-mask-image: url("../img/logo-mc-marca-dagua.svg");
    mask-image: url("../img/logo-mc-marca-dagua.svg");
    background: linear-gradient(180deg, rgb(220 188 124 / .1), rgb(220 188 124 / .05));
    transform: translate(-15%, -50%);
  }
  .hj-fundo::after {
    right: 0;
    height: calc(var(--hj-h) * .3);
    aspect-ratio: 655.5 / 382.5;
    -webkit-mask-image: url("../img/logo-rbm-monograma.svg");
    mask-image: url("../img/logo-rbm-monograma.svg");
    background: linear-gradient(180deg, rgb(173 121 51 / .13), rgb(173 121 51 / .07));
    transform: translate(12%, -50%);
  }
  /* Textura por cima de tudo, menos do texto, para o preto e o marfim não ficarem chapados. No computador, a mesma camada
     escurece a base da tela inteira (e não só a foto), para o marfim e o preto chegarem juntos ao texto. O escuro começa
     em 48% da altura e fecha rápido até a linha dourada (36%), para não acinzentar o terno branco dela acima do texto. */
  /* brand.css usa o .hero::after para um quadradinho de pontos de 72 px com opacidade .2: aqui a camada volta a cobrir o topo todo. */
  .hero.hj--dividido::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .46 0 0 0 0 .38 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat,
      linear-gradient(0deg, var(--ink) 0%, rgb(12 12 13 / .95) 12%, rgb(12 12 13 / .86) 22%, rgb(12 12 13 / .68) 30%, rgb(12 12 13 / .44) 36%, rgb(12 12 13 / .2) 41%, rgb(12 12 13 / .06) 45%, transparent 48%);
  }
  /* Luz suave atrás de cada um: dourada atrás dele e clara atrás dela (mais larga, para o marfim ficar luminoso). */
  .hj--dividido .hj-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(26% 36% at 27.8% 26%, rgb(220 188 124 / .16), transparent 72%),
      radial-gradient(30% 42% at 71% 30%, rgb(255 254 251 / .9), transparent 75%);
  }
  /* No computador, a sombra da base vem da camada da textura (a tela inteira); a foto não leva sombra própria. */
  .hj--dividido .hj-stage::after { background: none; }

  /* Véu escuro atrás do texto, que separa o título do terno risca de giz e das mãos sem apagar a foto. */
  .hj--dividido .hj-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -56px -6% -40px;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgb(12 12 13 / .6), rgb(12 12 13 / .34) 60%, transparent 100%);
  }
  .hj--dividido .hj-copy { isolation: isolate; }

  /* Título e texto de apoio centralizados, cada frase numa linha (.hj-linha). No celular as linhas quebram, equilibradas.
     O título fica menor que os rostos: no computador vai de 34 a 50 px. */
  .hj--dividido .hj-copy { width: min(calc(100% - var(--gutter) * 2), 900px); }
  .hj--dividido .hj-linha { display: block; }
  .hj--dividido .hj-description { max-width: none; color: #d2ccc2; }
  .hero.hj--dividido h1 {
    font-size: clamp(34px, 3vw, 50px);
    line-height: 1.1;
    font-weight: 500;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 18;
    letter-spacing: -.01em;
  }
  @media (min-width: 1101px) {
    .hj--dividido .hj-description { font-size: var(--fs-small); }
  }

  /* Botões de mesma largura, um de cada lado do meio, os dois no contorno dourado sobre a base escura. */
  .hj--dividido .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
    gap: 24px;
  }
  .hj--dividido .hero-parceria-cta { width: 100%; }

  /* Cabeçalho: uma faixa escura única por cima do topo, como no resto do site, com as duas logos no formato vertical
     e na mesma altura, uma em cada ponta, e o menu no meio, no mesmo preto da faixa. Ao rolar, volta a barra preta flutuante. */

  @media (min-width: 1241px) {
    .site-header--dividido .brand-logo--full { display: none; }
    .site-header--dividido .brand-logo--vertical { display: block; height: 58px; }
  }
  @media (min-width: 1001px) {
    /* Menu e Contato direto sobre o preto da faixa, sem cápsula de outro tom: logos, menu e Contato formam uma peça só.
       Só a pílula da seção ativa e o Contato branco se destacam. */
    .site-header--dividido .header-menu { background: transparent; border-color: transparent; }
    .site-header--dividido .nav-active-pill { background: #2f2f33; border-color: transparent; }
    .site-header--dividido .header-contact { box-shadow: none; }
  }
  @media (min-width: 541px) and (max-width: 1000px) {
    .site-header--dividido .brand-logo--full { display: none; }
    .site-header--dividido .brand-logo--vertical { display: block; height: 44px; }
  }
  @media (max-width: 1000px) {
    .site-header--dividido .header-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .site-header--dividido .brand--rosy { grid-column: 3; justify-self: end; padding-left: 0; border-left: 0; }
    .site-header--dividido .menu-toggle { grid-column: 2; justify-self: center; }
    .js .site-header--dividido .menu-toggle { border-color: transparent; background: #1c1c1f; }
  }

  @media (max-width: 1100px) {
    .hero.hj--dividido {
      --hj-w: min(120vw, 820px);
      height: auto;
      padding-top: var(--header-height, 72px);
    }
    .hj--dividido .hj-stage { top: auto; height: auto; aspect-ratio: auto; }
    .hj--dividido .hj-photo { aspect-ratio: 1094 / 920; }
    /* Empilhado, o fundo preto e marfim ocupa só a altura da foto e vai de ponta a ponta da tela: as duas camadas da foto
       (a luz e a passagem do preto para o marfim atrás, o escurecimento da base na frente) saem da largura da foto para
       a da tela. Assim, quando a foto é mais estreita que a tela, as faixas dos lados seguem o mesmo fundo e a mesma sombra,
       sem borda reta. As posições do fundo são medidas pela largura da foto (--hj-w), a partir do meio, para a passagem
       ficar sempre atrás do ombro dele, como no celular. Abaixo da foto, tudo é preto. */
    .hero.hj--dividido { background: var(--ink); }
    .hero.hj--dividido::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .46 0 0 0 0 .38 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat; }
    .hj--dividido .hj-stage::before,
    .hj--dividido .hj-stage::after { left: calc(50% - 50vw); right: calc(50% - 50vw); }
    .hj--dividido .hj-stage::before {
      background:
        radial-gradient(calc(var(--hj-w) * .26) 36% at calc(50% - var(--hj-w) * .222) 26%, rgb(220 188 124 / .16), transparent 72%),
        radial-gradient(calc(var(--hj-w) * .3) 42% at calc(50% + var(--hj-w) * .21) 30%, rgb(255 254 251 / .9), transparent 75%),
        linear-gradient(90deg, var(--ink) calc(50% - var(--hj-w) * .184), #1c1916 calc(50% - var(--hj-w) * .133), #3b342e calc(50% - var(--hj-w) * .1), #6c6359 calc(50% - var(--hj-w) * .067), #a2988a calc(50% - var(--hj-w) * .033), #cbc2b3 50%, #e4ddd1 calc(50% + var(--hj-w) * .033), var(--rosy-ivory) calc(50% + var(--hj-w) * .067));
    }
    .hj--dividido .hj-stage::after { background: linear-gradient(0deg, var(--ink) 0%, rgb(12 12 13 / .92) 12%, rgb(12 12 13 / .6) 24%, rgb(12 12 13 / .22) 34%, transparent 42%); }
    .hj-fundo::before,
    .hj-fundo::after { display: none; }
    .hj--dividido .hj-copy { width: min(calc(100% - var(--gutter) * 2), 720px); }
    /* "seu escritório." ocupa cerca de 6,4 vezes o tamanho da fonte e precisa caber em meia coluna. */
    .hero.hj--dividido h1 { font-size: clamp(26px, 7vw, 36px); }
    .hj--dividido .hj-description { margin-top: 14px; font-size: 13px; line-height: 1.5; }
    .hj--dividido .hj-kicker { margin-bottom: 12px; }
    .hj--dividido .hero-actions { margin-top: 20px; }
    /* Os dois botões lado a lado, cada um no seu lado, só com o nome. */
    .hj--dividido .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hj--dividido .hj-cta-pre { display: none; }
    .hj--dividido .hero-parceria-cta { padding-inline: 10px; letter-spacing: .1em; }
  }
  /* Janelas largas e baixas até 1100 px (notebook com o DevTools aberto, tablet deitado): o texto, com os botões lado a
     lado, ocupa só cerca de 230 px, então a foto ganha a altura que sobra até o primeiro botão. Ela mostra sempre pelo
     menos a metade de cima (rostos e ombros inteiros): quando a altura não dá, a foto fica mais estreita em vez de cortar
     os rostos. A largura da foto é a altura dividida por 0,42 (metade da proporção de 0,841). */
  @media (min-width: 701px) and (max-width: 1100px) and (min-height: 501px) {
    .hero.hj--dividido {
      --hj-foto-h: max(200px, calc(100vh - var(--header-height, 80px) - 230px));
      --hj-w: min(120vw, 820px, calc(var(--hj-foto-h) / .42));
    }
    @supports (height: 100svh) {
      .hero.hj--dividido { --hj-foto-h: max(200px, calc(100svh - var(--header-height, 80px) - 230px)); }
    }
    .hj--dividido .hj-photo { aspect-ratio: auto; height: min(calc(var(--hj-w) * .841), var(--hj-foto-h)); }
  }
  @media (max-width: 380px) {
    .hj--dividido .hero-parceria-cta svg { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hj-copy > *,
  .hj-person,
  .hj-stage,
  .hj-lines { animation: none; }
}