/* ═══════════════════════════════════════════════════════════════════
   hero.css — abertura em sequencia. Lockup centralizado, textos que
   entram um a um com a rolagem e dois recortes em camadas com alturas
   diferentes. Fundo transparente para as nanoparticulas aparecerem em
   cheio; o trilho central guia a marca descendente.
   ═══════════════════════════════════════════════════════════════════ */

.rn-hero {
  position: relative;
  background: transparent;
  /* Nomeado porque a linha central dos principios o consome para
     alcancar a borda inferior real da secao. */
  --hero-pad-bottom: clamp(var(--space-8), 12vh, 160px);

  padding-top: calc(var(--header-h) + clamp(28px, 4.5vh, 64px));
  padding-bottom: var(--hero-pad-bottom);
  overflow: hidden;
}

.rn-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

/* Envoltorio da marca: carrega o fluxo de rolagem, enquanto a imagem
   dentro dele carrega a entrada de carregamento. Sao dois movimentos
   com ciclos de vida diferentes, e por isso dois elementos. */
.rn-hero__mark {
  display: flex;
  justify-content: center;
  width: 100%;
}

.rn-hero__lockup {
  width: min(420px, 74vw);
  height: auto;
  /* A marca precisa de silencio a volta antes de o headline comecar:
     o intervalo e o que separa a assinatura da promessa. */
  margin-bottom: clamp(var(--space-6), 4vh, var(--space-8));
}

.rn-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  /* Um degrau abaixo de --text-display-1: com o lockup logo acima, o
     corpo maximo anterior fazia duas marcas competirem pelo mesmo peso. */
  font-size: clamp(30px, 2.4vw + 20px, 54px);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  /* 25ch: 'Advocacia preventiva e resolutiva' assenta em duas linhas
     de Cinzel a partir de 700px; abaixo disso, tres. */
  max-width: 25ch;
  margin: 0;
}

.rn-hero__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: var(--measure-narrow);
  margin: 0;
}

/* ── Eixo central da secao ────────────────────────────────────────── */

/* Um unico segmento, do pe da marca ate a borda inferior da hero.
   --spine-top e escrito por js/hero-sequence.js a partir da base real
   do lockup: em CSS puro seria uma soma de header + padding + altura da
   marca que quebra a cada ajuste de escala. O degrade so dissolve as
   duas pontas — no meio a linha e continua, inclusive na altura dos
   retratos, que era onde ela sumia. */
.rn-hero__spine {
  position: absolute;
  left: 50%;
  top: var(--spine-top, 46%);
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border-default) 5%,
    var(--border-default) 95%,
    transparent 100%
  );
  pointer-events: none;
  /* Atras do conteudo. Com z-index 0 o eixo pintaria acima do texto
     estatico da secao e cortaria o headline e o lead; o -1 o joga para
     o fundo da pilha de .rn-page, que nao tem fundo proprio — a linha
     continua visivel entre os retratos, que e onde ela precisa aparecer. */
  z-index: -1;
}

/* ── Retratos recortados, em camadas ──────────────────────────────── */

/* Os dois recortes nao formam um par simetrico: o da esquerda fica a
   frente e mais baixo, o da direita sobe e recua. O deslocamento
   vertical entre eles e a profundidade da composicao — reforcada em
   rolagem pelo parallax de cada camada (js/hero-sequence.js). */
.rn-hero__figures {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  column-gap: clamp(4px, 2vw, 24px);
  margin-top: var(--space-4);
}

/* As duas camadas sao [data-flow]: sobem em direcao ao topo mais rapido
   do que a propria rolagem, cada uma no seu ritmo, e desaparecem ao
   chegar la. A da esquerda, que assenta mais baixo, leva o maior fator
   do fluxo inteiro (1) e sobe quase o dobro da direita (0.55), que ja
   nasce elevada. O transform e a opacidade vem de [data-flow], em
   motion.css — nao redeclarar aqui, ou a especificidade empata e a
   ordem dos arquivos decide. */
.rn-hero__layer {
  position: relative;
  display: flex;
}

.rn-hero__layer--left {
  z-index: 2;
  justify-content: flex-end;
}

.rn-hero__layer--right {
  z-index: 1;
  justify-content: flex-start;
  /* A camada de tras sobe: a assimetria e o que cria as duas alturas */
  margin-bottom: clamp(28px, 6.5vw, 108px);
}

/* Sem sobreposicao horizontal: o recorte de hero-bianca.webp carrega um
   retangulo de fundo residual na borda direita (a poltrona), que ficaria
   visivel por cima do blazer claro da figura vizinha. A camada vem do
   deslocamento vertical, do empilhamento e do parallax diferenciado —
   nao de invadir o recorte ao lado. */
@media (min-width: 700px) {
  .rn-hero__figures { column-gap: clamp(8px, 1.4vw, 24px); }
}

.rn-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.rn-portrait__img {
  /* Os recortes sao fotos cortadas pela moldura: sem o esmaecimento das
     bordas, o corte aparece como aresta reta — e, com a sobreposicao das
     camadas, uma aresta cruzando a figura de tras. Duas mascaras em
     intersecao dissolvem base e laterais. */
  --mask-v: linear-gradient(to bottom, #000 62%, transparent 99%);
  --mask-h: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);

  width: 100%;
  max-width: 370px;
  height: auto;
  border-radius: var(--radius-image);
  -webkit-mask-image: var(--mask-v), var(--mask-h);
  -webkit-mask-composite: source-in;
  mask-image: var(--mask-v), var(--mask-h);
  mask-composite: intersect;
}

.rn-portrait__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: calc(var(--space-5) * -1);
}

.rn-portrait__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(17px, 1.4vw + 12px, 26px);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--text-heading);
  text-align: center;
}

.rn-portrait__oab {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 599px) {
  .rn-hero__lockup { margin-bottom: var(--space-5); }
  .rn-hero__figures { column-gap: 2px; }
  .rn-portrait__caption { margin-top: calc(var(--space-4) * -1); }
  .rn-portrait__oab { font-size: var(--text-caption); }
}

/* ── Principios sob os retratos (composicao do protótipo) ─────────── */

/* Os textos se alternam de um lado e do outro do eixo, cada um no seu
   degrau. Sem a linha, tres blocos soltos em zigue-zague leriam como
   desalinho; com ela, leem como um sumario. A linha e a mesma
   .rn-hero__spine que desce desde a marca — este bloco so se organiza
   ao redor dela. */
.rn-hero__principios {
  position: relative;
  margin-top: clamp(var(--space-9), 14vh, 180px);
}

/* ul.<classe>: o reset zera o padding de toda lista com classe
   (ul[class]) — o seletor precisa da mesma especificidade. */
ul.rn-principios {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 9vh, 112px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-principio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.rn-principio__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  margin: 0;
}

.rn-principio__body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: 34ch;
  margin: 0 auto;
}

@media (min-width: 760px) {
  ul.rn-principios {
    grid-template-columns: 1fr 1fr;
    /* Sem gap de linha: cada degrau e dado pelo recuo do proprio item,
       nao por uma grade regular — e o que reproduz a cascata do
       protótipo em vez de uma tabela de tres celulas. */
    gap: 0 clamp(var(--space-7), 7vw, 128px);
  }

  /* Esquerda no topo, direita um degrau abaixo, esquerda de volta no
     fim: a leitura desce em ziguezague ao redor da linha. O recuo de
     cada item e o degrau. */
  .rn-principio:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rn-principio:nth-child(2) { grid-column: 2; grid-row: 2; margin-top: clamp(var(--space-6), 5vh, 64px); }
  .rn-principio:nth-child(3) { grid-column: 1; grid-row: 3; margin-top: clamp(var(--space-8), 10vh, 128px); }
}

/* Empilhado, a linha central nao separa nada — some com ela. */
@media (max-width: 759px) {
  .rn-hero__principios::before { display: none; }
}