/* ============================================================
   CAPA 2026 — a capa em preto e branco
   (30/09/2026) Três pedidos do dono no mesmo dia:
   1. "troque o tema de amarelo para preto": a capa dourada virou preta;
   2. "quero algo mais profissional… tire esse efeito dourado no fundo
      atrás do escritório, coloque o & num tom escuro (um cinza)" e "no
      ultrawide a imagem fica lá na direita, longe do texto";
   3. "quero um visual profissional, pensei em trocar o amarelo de
      início para branco, e melhore o design completamente".
   Estado atual = (3): a capa não tem mais dourado. Preto, branco e
   cinzas; as únicas cores são a foto da sede e o "&" amarelo da logo.
   A composição aprovada fica (texto à esquerda, a foto num cartão
   arredondado à direita, o "&" atrás de tudo, os números, nenhum fio,
   nada de etiqueta-balão, pontinho ou vidro fosco). O que mudou no
   desenho:
   - a etiqueta "Advocacia empresarial" desceu: abre o título, em vez
     de ficar solta embaixo do menu;
   - o título ganhou corpo e perdeu entrelinha (era 1,40 do tamanho
     visível, é 1,20): lê como um bloco só;
   - o marca-texto de "margem" e o botão são brancos com letra preta;
   - os números do rodapé cresceram.
   Quarta rodada ("perfeito, coloque a logo branca… os números acho que
   dá pra deixar mais bonito, fazer algo legal"): a logo ficou toda
   branca sobre a capa (desfeito depois: "quero que volte com o E em
   amarelo"); os números viraram um placar (algarismos
   grandes que rolam como hodômetro na entrada, rótulos em caixa-alta);
   o link "Ver os 11 núcleos" trocou o sublinhado por uma seta num
   círculo.
   No celular a cena da sede continua: o cartão do prédio cresce até
   ocupar a tela, partindo do preto.

   Carrega depois da folha-2026.css. Nenhum texto mudou.
   Cabeçalho: tema "dark" + classe "theme-capa" enquanto está sobre a
   capa (index.html → headerTheme), para o botão do menu ficar branco.
   Versões anteriores em scratchpad/: capa-2026.dourada.bak.css,
   capa-2026.preta-v1-luz-dourada.bak.css e
   capa-2026.preta-v2-dourado-chapado.bak.css.
   ============================================================ */

:root {
  --capa-preto: #08090B;
  --capa-preto-alto: #101216;
  --capa-branco: #FFFFFF;
  --capa-gelo: #E4E7EC;
  --capa-letra: #0B0C0F;
  --capa-tinta: #1A1D24;
  /* era 0.055: "muito apagado, no celular nem dá para saber que tem"
     (02/10/2026). Um degrau mais claro, sem virar desenho. */
  --capa-grafite: rgba(255, 255, 255, 0.085);
  --capa-card-r: clamp(26px, 2.5vw, 36px);
}

/* ---------- 1. O fundo ---------- */
#hero.hero-v2 {
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(180deg, var(--capa-preto-alto) 0%, var(--capa-preto) 58%);
  color: var(--capa-branco);
  isolation: isolate;
}
/* sem luz colorida no fundo: só o preto */
#hero.hero-v2::before { display: none; }
/* O "&" da logo em grafite, um tom acima do fundo (mesma máscara do
   resto do site). A base põe mix-blend-mode: overlay no ::after, que
   sobre o preto some: aqui é normal. */
#hero.hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--capa-grafite);
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask: var(--e-logo) no-repeat;
  mask: var(--e-logo) no-repeat;
  -webkit-mask-size: auto 92%;
  mask-size: auto 92%;
  -webkit-mask-position: 58% 118%;
  mask-position: 58% 118%;
  pointer-events: none;
}

/* ---------- 2. A coluna de texto ---------- */
/* A etiqueta abre o título: o bloco etiqueta + título + texto + botões
   fica no meio da altura, e os números vão para o pé. */
#hero .hero-top {
  margin-top: auto;
  padding-bottom: 0;
}
#hero .hero-top::after { display: none; }
#hero .hero-content {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: clamp(24px, 3vh, 30px);
  padding: clamp(16px, 2.2vh, 22px) 0 0;
}
#hero .hero-foot {
  margin-top: auto;
  padding-top: clamp(36px, 6vh, 64px);
}
/* etiqueta: só o texto — sem balão, sem ponto, sem fio
   (o dono: "essas linhas todas… quero algo mais redondo") */
#hero .hero-eyebrow { color: rgba(255, 255, 255, 0.58); }

#hero .hero-headline,
#hero .hero-headline .hl-line,
#hero .hl-italic,
#hero .hl-italic em { color: var(--capa-branco); }
#hero .hero-headline .hl-line.hl-muted { color: rgba(255, 255, 255, 0.5); }
/* "margem" no marca-texto do site, aqui branco com letra preta.
   Headline de uma frase só, em 4 linhas no mesmo corpo: "O ecossistema
   jurídico / que transforma a lei / em margem para / a sua empresa."
   As margens negativas devolvem o respiro do marca-texto, para a linha
   dele não ficar mais alta que as outras.
   Na entrada, a palavra sobe em branco e o marca-texto corre por baixo
   dela, da esquerda para a direita. A letra é branca em modo
   "difference" (.hl-tx, dentro do <em>): sobre o preto continua branca,
   sobre o marca-texto branco vira preta, letra por letra, no ponto
   exato em que o marca-texto passa. Trocar a cor por transição não
   serve: branco sobre branco some no meio do caminho. */
#hero .hl-key::after { display: none; }
#hero .hl-key em {
  display: inline-block;
  margin: 0 0.02em -0.11em;
  padding: 0 0.2em 0.11em;
  border-radius: 0.24em;
  background: linear-gradient(var(--capa-branco), var(--capa-branco)) no-repeat 0 0 / 0% 100%;
  color: var(--capa-branco);
  font-style: normal;
}
#hero .hl-key .hl-tx {
  display: inline-block;
  color: #FFFFFF;
  mix-blend-mode: difference;
}
#hero .hero-headline.is-revealed .hl-key em {
  background-size: 100% 100%;
  transition: background-size 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.25s;
}
#hero .hero-lead { color: rgba(255, 255, 255, 0.68); }

/* botão principal branco com letra preta: o ponto mais claro da capa */
#hero .hero-cta-row { gap: 26px; }
#hero .hero-cta-row .btn-primary {
  background: var(--capa-branco);
  border-color: transparent;
  color: var(--capa-letra);
  border-radius: 18px;
  padding-inline: 28px;
  box-shadow: none;
}
#hero .hero-cta-row .btn-primary:hover {
  background: var(--capa-gelo);
  border-color: transparent;
  color: #000000;
}
/* link secundário: sem sublinhado (um fio a menos); a seta mora num
   círculo que acende no hover, como no botão dos artigos */
#hero .hero-cta-row .link-arrow {
  gap: 12px;
  padding-bottom: 0;
  border-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
}
#hero .hero-cta-row .link-arrow span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition:
    transform 320ms var(--ease-emphasized),
    background-color 200ms ease,
    color 200ms ease;
}
#hero .hero-cta-row .link-arrow:hover { color: var(--capa-branco); }
#hero .hero-cta-row .link-arrow:hover span {
  background-color: var(--capa-branco);
  color: var(--capa-letra);
}
#hero :focus-visible { outline-color: var(--capa-branco); }

/* ---------- 2b. O placar (os números do pé da capa) ----------
   "Os números são importantes" e "dá pra deixar mais bonito, fazer
   algo legal": algarismos grandes, proporcionais (o "11" tabular abria
   um buraco no meio), o "+" pequeno no alto, rótulo em caixa-alta.
   Separados só pelo espaço: sem régua, sem fios, sem cartõezinhos.
   Na entrada cada algarismo rola até o valor (index.html →
   animateHeroKpis monta as colunas; aqui ficam medidas e movimento). */
#hero .hero-foot { border-top: 0; align-items: flex-end; }
#hero .hero-foot::after { display: none; }
#hero .hero-kpis-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
#hero .hero-kpis-list li + li {
  margin-left: clamp(36px, 4.4vw, 68px);
  padding-left: 0;
  border-left: 0;
}
#hero .hero-kpis-list li + li::before { display: none; }
#hero .kpi-num {
  --kpi-lh: 0.92;
  align-items: flex-start;
  font-size: clamp(2.25rem, 9.6vw, 2.75rem);
  line-height: var(--kpi-lh);
  letter-spacing: -0.045em;
  color: var(--capa-branco);
}
#hero .kpi-count {
  font-variant-numeric: proportional-nums lining-nums;
  font-feature-settings: "pnum" 1, "lnum" 1;
}
#hero .kpi-num .kpi-suffix {
  margin: 0.1em 0 0 0.08em;
  font-size: 0.44em;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
#hero .kpi-lbl {
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
/* "MMXXVI · Tubarão (SC) · São Paulo (SP)" não cabe mais ao lado do
   placar (a coluna tem 600–630px); as praças já estão no "2 unidades" */
#hero .hero-foot .hero-meta { display: none; }

/* o hodômetro: a casa tem a largura do algarismo final (invisível,
   .kpi-dg-ref) e a coluna sobe por dentro dela. clip-path corta só em
   cima e embaixo: algarismo mais largo que a casa passa sem ser
   fatiado dos lados. */
#hero .kpi-odo { display: inline-flex; }
#hero .kpi-dg {
  position: relative;
  display: inline-block;
  height: calc(var(--kpi-lh) * 1em);
  clip-path: inset(0 -0.4em);
}
#hero .kpi-dg-ref { visibility: hidden; }
#hero .kpi-strip {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(-50%, 0, 0);
}
#hero .kpi-strip > span {
  display: block;
  height: calc(var(--kpi-lh) * 1em);
}
#hero .kpi-count.is-rolled .kpi-strip {
  transform: translate3d(-50%, calc(var(--steps) * var(--kpi-lh) * -1em), 0);
  transition: transform var(--dur) cubic-bezier(0.16, 1, 0.3, 1) var(--delay);
}
/* o "+" chega quando o 65 assenta */
#hero .kpi-count.is-odo + .kpi-suffix {
  opacity: 0;
  translate: -0.2em 0;
}
#hero .kpi-count.is-odo.is-rolled + .kpi-suffix {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.5s ease 1.75s,
    translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.75s;
}

/* Desktop: o título e os números usam o corte "de cartaz", que a
   mescla-2026 encolhe a 77,5% (size-adjust). Com a entrelinha antiga
   (1,01 do corpo declarado) as linhas ficavam a 1,40 do tamanho
   visível. Corpo um pouco maior, entrelinha 0,86 + 0,07: 1,20. */
@media (min-width: 1024px) {
  /* em tela baixa o bloco encosta no topo: que seja na linha do cartão
     da foto (104px), não colado no menu */
  #hero.hero-v2 { padding-top: max(104px, 11vh); }
  #hero .hero-headline {
    /* em tela baixa (notebook de 768 de altura) o corpo cede para a
       capa caber inteira sem rolar */
    font-size: clamp(2.95rem, min(4.7vw, 8.6vh), 4.75rem);
    line-height: 0.86;
    letter-spacing: -0.034em;
  }
  #hero .hero-headline .hl-line { padding-bottom: 0.07em; }
  /* o corte de cartaz é 77,5% do corpo declarado: 70px aqui são 54px
     na tela. Entrelinha menor pelo mesmo motivo. */
  #hero .kpi-num {
    --kpi-lh: 0.8;
    font-size: clamp(3rem, min(4.9vw, 9.4vh), 4.75rem);
  }
  #hero .hero-kpis-list li { gap: 12px; }
}

/* ---------- 3. A foto da sede num cartão arredondado (≥768) ---------- */
/* O cartão anda junto da coluna de texto. Até ~1440 ele encosta na
   borda da tela (menos a margem); daí para cima a margem cresce com a
   tela (50vw − 682px = a borda da coluna de 1136 + os 114px que o
   cartão passa dela em 1440), e o texto termina 30px antes dele. Em
   tela ultralarga o conjunto fica junto, no centro, em vez de a foto
   ir parar na borda direita. */
@media (min-width: 1024px) {
  #hero.hero-v2 {
    --capa-foto-w: min(41vw, 620px);
    --capa-foto-r: max(clamp(20px, 2.6vw, 40px), calc(50vw - 682px));
  }
  #hero .hero-panel {
    top: 104px;
    right: var(--capa-foto-r);
    bottom: clamp(20px, 2.6vw, 40px);
    left: auto;
    width: var(--capa-foto-w);
    height: auto;
  }
  #hero .hero-doc {
    width: min(100%, calc(100vw - var(--capa-foto-r) - var(--capa-foto-w) - max(32px, 50vw - 568px) - 30px));
  }
}
/* tablet (768–1023): a foto continua abaixo do texto, como na capa
   original, agora num cartão com margem */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #hero .hero-panel {
    width: auto;
    align-self: stretch;
    margin: 0 clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px);
  }
}
@media (min-width: 768px) {
  #hero .hero-panel {
    border: 0;
    border-radius: var(--capa-card-r);
    overflow: hidden;
    background: var(--capa-tinta);
    box-shadow: 0 50px 100px -44px rgba(0, 0, 0, 0.95);
    /* entrada sem clip-path (ele cortaria a sombra): sobe e aparece */
    clip-path: none;
    opacity: 0;
    translate: 0 26px;
    transition:
      opacity 0.9s cubic-bezier(0.32, 0.72, 0, 1) 0.2s,
      translate 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  }
  #hero.is-revealed .hero-panel { opacity: 1; translate: 0 0; clip-path: none; }
  #hero .hero-panel::before { display: none; }
  /* só uma sombra suave no pé da foto, para a legenda ler */
  #hero .hero-panel::after {
    display: block;
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(0deg, rgba(8, 10, 14, 0.6), transparent);
    pointer-events: none;
  }
  /* a foto é a única cor da capa: um fio menos saturada, para não gritar */
  #hero .hero-panel-img { filter: saturate(0.95) contrast(1.04); }
  #hero .hero-panel-cap {
    left: clamp(18px, 1.8vw, 26px);
    right: auto;
    bottom: clamp(16px, 1.6vw, 22px);
    z-index: 2;
    padding: 0;
    background: none;
    color: rgba(255, 255, 255, 0.86);
  }
  #hero .hero-panel-cap .fig-num { color: rgba(255, 255, 255, 0.6); }
}

/* ---------- 4. O recuo quando a folha sobe ----------
   O texto recuava pela .hero-shell, mas uma regra antiga
   (home-refinement.css) trava transform/opacity dela com !important:
   o recuo vai no .hero-doc, logo dentro. */
@supports (animation-timeline: view()) and (timeline-scope: --folha) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    #hero .hero-doc {
      transform-origin: 30% 40%;
      animation-name: capa-recua-e-apaga;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --folha;
      animation-range: entry 0% entry 100%;
    }
  }
}

/* ---------- 5. Cabeçalho sobre a capa ("theme-capa") ----------
   No resto do site o tema escuro do cabeçalho usa dourado (botão e
   seção atual). Sobre a capa, branco. Três classes para vencer o
   cabecalho-2026.css, que carrega depois. */
/* a logo fica como é: letras brancas e o "&" amarelo. (Chegou a ficar
   toda branca, a pedido; ele pediu o "&" amarelo de volta.) */
#site-header#site-header.theme-dark.theme-capa .nav-cta {
  background-color: var(--capa-branco);
  color: var(--capa-letra);
}
#site-header#site-header.theme-dark.theme-capa .nav-cta:hover {
  background-color: var(--capa-gelo);
  color: #000000;
}
#site-header#site-header.theme-dark.theme-capa .nav-list a[aria-current="page"] {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--capa-branco);
}
#site-header#site-header.theme-dark.theme-capa .nav > .scroll-progress {
  background-color: var(--capa-branco);
}

/* ---------- 6. Celular ---------- */
@media (max-width: 767.98px) {
  /* o "&" fica no canto de baixo; na tela do celular, um fio mais claro
     que no desktop para não sumir */
  #hero.hero-v2::after {
    background: rgba(255, 255, 255, 0.095);
    -webkit-mask-size: auto 58%;
    mask-size: auto 58%;
    -webkit-mask-position: 128% 104%;
    mask-position: 128% 104%;
  }
  /* a headline mantém as MESMAS 4 linhas do desktop: o corpo acompanha
     a largura da tela para "O ecossistema jurídico" (9,68× o corpo, medido)
     caber na coluna (tela − 48px), com teto no tamanho de antes */
  #hero .hero-headline { font-size: min(2.45rem, calc((100vw - 52px) / 9.7)); }
  /* placar: cada número na largura do próprio rótulo, espalhados até a
     borda do botão. Em colunas iguais "PROFISSIONAIS" não cabia e
     quebrava no meio da palavra ("PROFISSION / AIS"). */
  #hero .hero-kpis-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
  }
  #hero .hero-kpis-v2 { width: 100%; }
  #hero .hero-kpis-list li { flex: 0 0 auto; padding-right: 0; }
  #hero .hero-kpis-list li + li { margin-left: 16px; padding-left: 0; }
  #hero .hero-cta-row .btn-primary { width: 100%; justify-content: center; }

  /* a cena da sede parte do preto da capa, sem emenda: o cartão do
     prédio cresce até a tela. Os dourados dela (fio da moldura, véu
     sobre a foto, etiqueta, legenda, barra de progresso, clarão) viram
     branco: só cor, a coreografia não muda. */
  .office-story-mobile,
  .office-story-mobile.is-enhanced { background: var(--capa-preto); }
  .office-story-frame {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 18px 52px rgba(0, 0, 0, 0.5);
  }
  .office-story-media::before {
    background: linear-gradient(180deg, rgba(15, 17, 22, 0.28) 0%, rgba(15, 17, 22, 0.08) 34%, rgba(15, 17, 22, 0.78) 100%);
  }
  .office-story-kicker { color: rgba(255, 255, 255, 0.74); }
  .office-story-caption .fig-num { color: var(--capa-branco); }
  .office-story-caption .dot {
    background: var(--capa-branco);
    box-shadow: none;
  }
  .office-story-progress span {
    background: var(--capa-branco);
    box-shadow: none;
  }
  .office-story-mobile.is-enhanced .office-story-reveal-glow {
    background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.2), transparent 55%);
  }
}