/* ============================================================
   BIX · Camada 6: segunda revisão do cliente (set/2026)

   Carregada por último, depois de bix-marca.css. Reúne o que veio
   na rodada de respostas do cliente:

     1. Títulos em Bold, leitura literal do manual
     2. Selos em versão escura (fim do filtro CSS)
     3. Mapa de "Onde atuamos", mesmo componente da LP bix.com.br
     4. Hero: vídeo passando por cima do título no scroll
   ============================================================ */

/* ============================================================
   1. TÍTULOS EM BOLD
   ------------------------------------------------------------
   O manual manda usar Plus Jakarta Sans Bold nos títulos. A
   camada 5 tinha deixado isso atrás da classe `tipo--titulos-bold`
   porque o display leve era o aprovado nas rodadas anteriores. O
   cliente decidiu pelo manual, então o peso 700 passa a valer em
   todos os títulos de display, com o tracking mais fechado que o
   peso pede.

   Para voltar ao display leve, apague este bloco.
   ============================================================ */
.hero__title,
.statement,
.pillars__title,
.mf-hero h1,
.mt-hero h1,
.cs-hero h1,
.ct-left h1,
.fq-hero h1,
.ix-hero h1,
.mf-where__txt h2,
.mf-inst__head h2,
.mf-vals__head h2,
.mt-pilares__head h2,
.endcta h2,
.bl-hero h1 {
  font-weight: 700;
  letter-spacing: -0.042em;
}

/* o <b> dentro dos títulos servia para marcar a palavra mais forte
   quando o corpo do título era leve. Com tudo em Bold, ele não tem
   mais o que destacar: vira a cor da marca. */
.mf-hero h1 b,
.mt-hero h1 b,
.fq-hero h1 b,
.ix-hero h1 b,
.ct-left h1 b,
.statement b {
  font-weight: 700;
  color: var(--blue);
}

.xp .statement b {
  color: #fff;
}

/* ============================================================
   2. SELOS DE CERTIFICAÇÃO
   ------------------------------------------------------------
   Os arquivos claros continuam no rodapé petróleo. Para a seção
   clara de certificações foram geradas versões em petróleo
   (`selo-*-dark.png`), então o filtro de inversão da camada 4 sai.
   ============================================================ */
.certnum__selo {
  filter: none;
}

/* ============================================================
   3. MAPA · ONDE ATUAMOS
   ------------------------------------------------------------
   O componente é o mesmo da LP da BIX: moldura com grade de 40px,
   coordenadas nos quatro cantos em mono, pinos com halo pulsando
   e rótulo em caixa alta, e a faixa escura de cobertura no pé.

   O que mudou para este contexto: no lugar da silhueta estilizada
   da América do Sul entra o mapa do Brasil em vetor (24 caminhos
   de unidades da federação, mais São Paulo, Bahia e o contorno do
   Uruguai). Como o mapa é vetor, os pinos vivem dentro do SVG, em
   coordenadas do viewBox, e não posicionados por porcentagem como
   na LP: assim continuam presos aos estados em qualquer largura.
   ============================================================ */
.mf-map {
  position: relative;
  margin: 0;
  aspect-ratio: 812/700;
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  /* respiro extra no pé: é a faixa livre onde a pílula de cobertura
     se apoia, sem cair em cima do Uruguai */
  padding: clamp(30px, 3.4vw, 44px) clamp(16px, 2.2vw, 32px) clamp(74px, 8vw, 104px);
  overflow: hidden;
}

.mf-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 81, 106, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 81, 106, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

.mf-map__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* unidades da federação: petróleo rebaixado, divisa na cor do fundo */
.uf__st {
  fill: var(--blue);
  fill-opacity: 0.26;
  stroke: var(--paper-soft);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill-opacity 0.5s ease;
}

.mf-map:hover .uf__st {
  fill-opacity: 0.32;
}

/* São Paulo, Bahia e Uruguai */
.uf__st--on {
  fill-opacity: 0.92;
}

.mf-map:hover .uf__st--on {
  fill-opacity: 1;
}

/* --- pinos (padrão da LP: ponto + halo + anel pulsando) ------ */
.mf-map__pin .dot {
  fill: var(--blue);
}

.mf-map__pin .halo {
  fill: var(--blue);
  opacity: 0.22;
  transform-box: fill-box;
  transform-origin: center;
  animation: mf-pin-pulse 2.6s ease-in-out infinite;
}

.mf-map__pin .ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mf-pin-ring 2.6s ease-in-out infinite;
}

.mf-map__pin.is-sede .dot,
.mf-map__pin.is-sede .halo {
  fill: var(--yellow);
}

.mf-map__pin.is-sede .ring {
  stroke: var(--yellow);
}

.mf-map__pin .lbl {
  fill: var(--ink-70);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes mf-pin-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.22;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.06;
  }
}

@keyframes mf-pin-ring {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  40% {
    opacity: 0.35;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-map__pin .halo,
  .mf-map__pin .ring {
    animation: none;
  }
}

/* --- cantos e faixa de cobertura ----------------------------- */
.mf-map__corner {
  position: absolute;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.mf-map__corner.tl {
  top: 14px;
  left: 18px;
}

.mf-map__corner.tr {
  top: 14px;
  right: 18px;
}

.mf-map__corner.bl {
  bottom: 14px;
  left: 18px;
}

.mf-map__corner.br {
  bottom: 14px;
  right: 18px;
}

.mf-map__cov {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(30px, 3.4vw, 44px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 92%;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(6, 34, 46, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

.mf-map__cov .d {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(249, 179, 33, 0.25);
}

@media (max-width: 860px) {
  /* faixa livre maior no pé: no celular o mapa encolhe e o Uruguai
     chegava perto demais da pílula */
  .mf-map {
    padding-bottom: clamp(92px, 18vw, 120px);
  }

  .mf-map__pin .lbl {
    font-size: 16px;
  }

  .mf-map__cov {
    font-size: 0.54rem;
    max-width: 92%;
  }
}

/* ============================================================
   4. HERO · VÍDEO POR CIMA DO TÍTULO
   ------------------------------------------------------------
   O vídeo sobe mais rápido que a página e cobre o título no
   scroll. O deslocamento quem faz é o bix.js (--hero-shift); aqui
   ficam só a pilha de camadas e o preparo de composição.
   ============================================================ */
.hero {
  position: relative;
  z-index: 0;
}

.hero__top {
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
}

.hero__media {
  z-index: 2;
  /* `translate` (propriedade independente), não `transform`: o GSAP escreve
     transform inline no #heroMedia durante a entrada do hero, e um transform
     nosso aqui seria simplesmente sobrescrito. As duas propriedades compõem. */
  translate: 0 var(--hero-shift, 0px);
  will-change: clip-path, translate;
}

/* ============================================================
   5. RODADA DE COMENTÁRIOS DO CLIENTE (set/2026, WhatsApp)
   ============================================================ */

/* --- 5.1 Corpo de texto maior, mais pesado e mais arejado -----
   "Tem alguns espaços que estou achando muito pequenininha.
   Gostaria de testar com um peso um pouco maior, tamanho um pouco
   maior, e maior espaçamento entre linhas."

   O token do corpo das internas sobe de 16px para 17,5px, o peso
   vai para 450 (a Jakarta é variável, então 450 existe de verdade)
   e a entrelinha abre de ~1,55 para 1,72. Vale para as 11 páginas.
   ============================================================ */
:root {
  --pg-lead: 19px;
  --pg-body: 17.5px;
  --pg-sm: 14px;
  --pg-h4: clamp(17px, 1.3vw, 21px);
  --body: clamp(1.02rem, 0.3vw + 0.9rem, 1.16rem);
  --body-lg: clamp(1.1rem, 0.46vw + 0.92rem, 1.32rem);
}

/* o lead nasceu em peso 300, que na Jakarta fica fino demais no
   tamanho novo */
p.mf-s1__lead,
.mt-hero__lead,
.fq-hero p,
.ix-hero p {
  font-weight: 450;
  line-height: 1.7;
}

.pg p,
.pg li,
.mf-s1__lead,
.philos__note p,
.advcard p,
.hero__desc,
.journal p,
.fig__lbl,
.mt-pil p,
.certnum__txt p,
.mf-where__txt p,
.ct-parceria__list p,
.bl-card__lead,
.bl-note {
  font-weight: 450;
  line-height: 1.72;
}

/* os rótulos em mono e os números não entram na regra: caixa alta
   com entrelinha de parágrafo desmonta o alinhamento */
.pg .k,
.pg .eyebrow,
.pg .crumbs,
.pg .ix__specs,
.pg .cs-rowl__num,
.pg .certnum__n {
  font-weight: inherit;
  line-height: inherit;
}

/* --- 5.2 Cases: imagem fixa no card, apagada até o hover -------
   "A gente gostaria que a imagem não ficasse se movimentando.
   Pensamos em deixar ela fixa nesse espaço, ficando com a cor meio
   apagada, como o título, e daí ao passar o mouse ela ficaria
   colorida."

   A camada que seguia o cursor sai de cena em qualquer largura. A
   miniatura que só aparecia no celular passa a ocupar uma coluna
   própria da linha, em duotone, e ganha cor no hover (o tratamento
   de duotone já existia em `.duo`, só não era usado aqui).
   ============================================================ */
.ix__float {
  display: none !important;
}

.ix__row {
  grid-template-columns: clamp(44px, 4.4vw, 76px) minmax(0, 1fr) clamp(170px, 20vw, 280px) auto;
  align-items: center;
}

.ix__thumb {
  display: block;
  grid-column: auto;
  margin-top: 0;
  aspect-ratio: 16/10;
  border-radius: 3px;
}

/* a foto entra apagada, como o título, e acende junto com a linha */
.ix__thumb img {
  transition:
    filter 0.7s var(--out),
    transform 1.2s var(--out);
}

.ix__row:hover .ix__thumb img,
.ix__row:focus-visible .ix__thumb img {
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1.03);
}

.ix__row:hover .ix__thumb::after,
.ix__row:focus-visible .ix__thumb::after {
  opacity: 0;
}

@media (max-width: 900px) {
  .ix__row {
    grid-template-columns: clamp(40px, 6vw, 60px) minmax(0, 1fr) auto;
  }

  .ix__thumb {
    grid-column: 1 / -1;
    margin-top: clamp(16px, 2.4vw, 22px);
  }
}

/* --- 5.3 Case: big numbers no formato da LP -------------------
   "Eu gosto quando esses big numbers têm mais destaque, como na
   LP." Lá eles são uma grade de 3 por 2, com filete de 1px entre
   as células, número em display e o rótulo em duas linhas.

   Aqui a lista de seis linhas vira essa mesma grade, sem mexer no
   conteúdo: o número usa a Fraunces (a fonte de detalhe do manual),
   o ícone da linha assume o lugar do ponto do canto.
   ============================================================ */
.cs-hero__status {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 8px 14px;
  border-radius: 4px;
  background: rgba(14, 81, 106, 0.88);
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

.cs-hero__status-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  animation: case-status-pulse 1.8s ease-in-out infinite;
}

@keyframes case-status-pulse {
  0%,
  100% {
    opacity: 0.45;
    box-shadow: 0 0 0 0 rgba(249, 179, 33, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(249, 179, 33, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero__status-dot {
    animation: none;
    opacity: 1;
    box-shadow: none;
  }
}

.cs-rows {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

/* Six tracks allow full-width rows of one, two or three cards.
   A final group of four becomes 2+2 rather than 3+1. */
.cs-rows > .cs-rowl {
  grid-column: span 2;
}

.cs-rows--remainder-1 > .cs-rowl:nth-last-child(-n + 4),
.cs-rows--remainder-2 > .cs-rowl:nth-last-child(-n + 2) {
  grid-column: span 3;
}

.cs-rows > .cs-rowl:only-child {
  grid-column: 1 / -1;
}

.cs-rowl {
  display: block;
  position: relative;
  padding: clamp(26px, 3.2vw, 44px) clamp(20px, 2.4vw, 34px);
  background: var(--blue-950);
  border-bottom: 0;
  min-height: clamp(180px, 20vw, 232px);
}

.cs-rowl:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cs-rowl__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(50px, 6vw, 86px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  display: block;
}

.cs-rowl__num .u {
  font-family: var(--sans);
  font-size: 0.3em;
  font-weight: 500;
  color: var(--yellow);
  letter-spacing: 0;
  margin-left: 0.12em;
  vertical-align: baseline;
}

p.cs-rowl__lbl {
  font-size: var(--pg-sm);
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
  max-width: 30ch;
}

p.cs-rowl__lbl strong {
  display: block;
  font-weight: 600;
  color: #fff;
}

.cs-rowl__ico {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  color: rgba(249, 179, 33, 0.55);
}

.cs-rowl:hover .cs-rowl__ico {
  color: var(--yellow);
}

@media (max-width: 1024px) {
  .cs-rows > .cs-rowl:nth-child(n) {
    grid-column: span 3;
  }

  .cs-rows > .cs-rowl:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .cs-rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-rows > .cs-rowl:nth-child(n),
  .cs-rows > .cs-rowl:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cs-rowl {
    min-height: 0;
  }
}

/* --- 5.4 Sobre: a coluna vazia do cabeçalho -------------------
   "Me parece estar faltando alguma coisa nesse espaço branco dos
   cabeçalhos."

   A coluna da direita ficou vazia em julho, quando "Onde atuamos"
   virou seção própria. Agora ela recebe a ficha da empresa, com
   fatos que já estão na página.
   ============================================================ */
.mf-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  align-content: start;
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(20px, 2.6vw, 38px);
}

.mf-facts .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow-deep);
}

.mf-facts p {
  margin: 0.5em 0 0;
  font-size: var(--pg-body);
  line-height: 1.5;
  color: var(--ink-70);
}

.mf-facts b {
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 860px) {
  .mf-facts {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-left: 0;
    padding-top: clamp(20px, 3vw, 28px);
  }
}

/* --- 5.5 Crédito do escritório de arquitetura, maior ----------
   "Do jeito que você incluiu dentro do case já ficou bom, poderia
   só aumentar um pouco o tamanho."
   ============================================================ */
.cs-arq {
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2.2vw, 28px);
}

.cs-arq__k {
  font-size: 0.68rem;
  padding-right: clamp(14px, 1.6vw, 22px);
}

.cs-arq__logo {
  width: clamp(64px, 6.4vw, 92px);
  height: clamp(34px, 3.4vw, 46px);
}

.cs-arq__nome {
  font-size: 1.16rem;
}

/* --- 5.6 Home: cards empilhados ainda menos sensíveis ---------
   "A rolagem do elemento à direita está muito sensível." Já tinha
   subido em julho de 40px para ~30vh; vai para ~52vh, então cada
   card fica quase o dobro do tempo em cena.
   ============================================================ */
.advcard:not(:last-child) {
  margin-bottom: clamp(200px, 52vh, 520px);
}

/* --- 5.7 Home: índice dos pilares na coluna da esquerda -------
   "Como a gente diminuiu o texto, senti que precisamos dar uma
   adaptada no design: ficou muito espaço livre, o texto está
   apertadinho no canto."

   A coluna passa a mostrar os quatro pilares em lista, com o item
   do card que está em cena aceso. Quem acende é o mesmo gatilho
   que move a régua de progresso.
   ============================================================ */
.adv2__idx {
  list-style: none;
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: clamp(20px, 2.6vw, 28px);
}

.adv2__idx li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: baseline;
  /* base legível de propósito: sem GSAP (ou com movimento reduzido)
     ninguém acende os itens, e a lista continua servindo como índice */
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.5s var(--out);
}

.adv2__idx .n {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.5s var(--out);
}

.adv2__idx .t {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.adv2__idx li.is-past {
  color: rgba(255, 255, 255, 0.46);
}

.adv2__idx li.is-past .n {
  color: rgba(249, 179, 33, 0.6);
}

.adv2__idx li.is-on {
  color: #fff;
}

.adv2__idx li.is-on .n {
  color: var(--yellow);
}

@media (max-width: 900px) {
  .adv2__idx {
    display: none;
  }
}

/* --- 5.8 Rodapé: menos símbolos e maiores --------------------
   "Achei legal a ideia de usar uns símbolos transparentes, mas
   acho que acabou ficando muitos logos, e esses que ficaram
   parecendo quadrados não são formatos que usamos. Talvez um
   maiorzão fique mais bonito."

   O `pattern-bix.svg` foi redesenhado: saíram os quadradinhos e
   ficou um símbolo grande por ladrilho, mais um menor girado. O
   ladrilho passa de 420px para 640px, então aparecem poucos e
   grandes em vez de muitos e pequenos.
   ============================================================ */
.footer {
  /* um símbolo só, grande, ancorado à direita: nada de ladrilho */
  background-size: clamp(280px, 34vw, 460px) auto;
  background-position: right -60px center;
  background-repeat: no-repeat;
}

/* --- 5.9 Sobre: palco do vídeo institucional -----------------
   "Trata-se do vídeo institucional. Coloque um placeholder por
   enquanto, apenas para marcar espaço."

   A moldura tracejada vira um palco 16:9 em petróleo, com o
   símbolo da marca ao fundo e um botão de play: marca o espaço na
   proporção certa e deixa claro que é reserva, não um player
   quebrado. Quando a URL chegar, a <figure> vira <video> e o JS
   de vídeo do bix.js assume.
   ============================================================ */
.mf-inst__stage.is-placeholder {
  position: relative;
  display: grid;
  justify-items: center;
  /* as duas linhas (play e legenda) ficam juntas no centro: sem isso
     elas esticam para ocupar a altura toda e abrem um vão entre si */
  align-content: center;
  gap: clamp(16px, 2vw, 24px);
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--blue-950);
  background-image: url('img/pattern-bix.svg');
  background-size: clamp(220px, 26vw, 360px) auto;
  background-position: right -40px bottom -60px;
  background-repeat: no-repeat;
  color: #fff;
}

.mf-inst__stage.is-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 50% 45%, rgba(14, 81, 106, 0.55), transparent 70%);
}

.mf-inst__play {
  position: relative;
  width: clamp(62px, 6vw, 84px);
  height: clamp(62px, 6vw, 84px);
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--yellow);
}

.mf-inst__play svg {
  width: 46%;
  height: 46%;
}

.mf-inst__cap {
  position: relative;
  text-align: center;
  display: grid;
  gap: 0.5em;
}

.mf-inst__cap .t {
  font-size: var(--pg-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.mf-inst__cap .s {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* --- 5.10 Placeholders com a mesma linguagem -----------------
   "Deixe apenas placeholders por enquanto."

   As molduras das fotos de etapa na home continuam como estão
   (tracejado + rótulo), só ganham o símbolo da marca ao fundo,
   para falarem a mesma língua do palco do vídeo institucional.
   Quando as fotos reais entrarem, o <img> cobre tudo e as regras
   daqui não atrapalham.
   ============================================================ */
.pstep__media {
  background-image: url('img/pattern-bix.svg');
  background-size: 46% auto;
  background-position: right -8% bottom -18%;
  background-repeat: no-repeat;
}

/* ============================================================
   6. CORREÇÕES DA CHECAGEM FINAL (documento x site entregue)
   ============================================================ */

/* --- 6.1 Fundos: branco de verdade -----------------------------
   Documento: "Padronizar fundos: Azul (preferencial) ou Branco",
   repetido pelo cliente na rodada do WhatsApp.

   A rodada de julho levou os três --stone para branco, mas o
   "papel" do site continuava cinza: a camada 2 definia
   --paper: #F7F8F7 e --paper-soft: #F2F4F2 ("nunca branco puro"),
   e é desses dois tokens que saem o fundo do <body>, de várias
   seções internas e dos cards dos pilares. Os dois viram branco.
   Todo componente que dependia do tom para se separar do fundo
   já tem borda própria (mapa, cards, aviso do blog).
   ============================================================ */
:root {
  --paper: #ffffff;
  --paper-soft: #ffffff;
}

/* --- 6.2 Benefícios do Método: subtítulo em amarelo ------------
   Documento: "deixar como subtítulo, dar destaque em amarelo".

   O subtítulo existia desde julho, mas a regra `.mt-ben p` (cor
   branca a 62%, peso 300) vencia `.mt-ben__sub` por especificidade,
   então ele saía branco. A regra abaixo tem especificidade maior.
   ============================================================ */
.mt-ben p.mt-ben__sub {
  margin-top: 0.55em;
  font-size: var(--body-lg);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--yellow);
  max-width: 46ch;
}

/* --- 6.3 Benefícios do Método: títulos maiores -----------------
   Documento: "Aumentar: Agilidade e Previsibilidade". Os títulos
   dos quatro benefícios estavam no corpo de h4 (17 a 21px) e
   passam para o de h3 de seção (20 a 28px), em Bold.
   ============================================================ */
.mt-ben h3 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* --- 6.4 Corpo maior também na home e nos textos de apoio -------
   Pedido da rodada do WhatsApp: "fonte de corpo com peso um pouco
   maior, tamanho um pouco maior e maior espaçamento entre linhas".

   A seção 5.1 subiu os tokens das páginas internas, mas a home tem
   parágrafos com tamanho fixo (16px) e peso 300 fora desses tokens:
   etapas do processo, "O que você pode esperar" e os cards dos
   pilares. A checagem pegou; eles passam para a mesma régua das
   internas. Junto, os textos de apoio que ficavam entre 11 e 14px.
   ============================================================ */
.pstep p,
.pstep__journey p,
.advcard p {
  font-size: 17.5px;
  font-weight: 450;
  line-height: 1.7;
}

/* parágrafos que já tinham tamanho bom, mas peso 300 */
.proj__desc,
.contact__intro,
.footer__tag,
.hero__desc {
  font-weight: 450;
  line-height: 1.65;
}

/* rótulos e textos de apoio */
.ix__specs > span {
  font-size: 14px;
}

p.cs-rowl__lbl,
.cs-recap__i span,
.cs-slate__v {
  font-size: 15px;
}

.proj__copy .link-u {
  font-size: 16px;
}

.footer__bottom {
  font-size: 12.5px;
}

.form__msg,
.ct-msg {
  font-size: 14px;
}

/* Etapas do processo em telas baixas. No desktop a seção fica
   presa (pin) com a altura da janela, e o card 1 tem o texto mais
   longo do site (Projeto e pré-obra + O que você pode esperar). Em
   notebooks de 768px de altura ou menos o corpo de 17,5px não cabe
   no card e o texto passava da borda. Nesses casos o tamanho recua
   um pouco, e o peso maior continua. */
@media (min-width: 901px) and (max-height: 860px) {
  .process.is-pinned .pstep p,
  .process.is-pinned .pstep__journey p {
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (min-width: 901px) and (max-height: 740px) {
  .process.is-pinned .pstep p,
  .process.is-pinned .pstep__journey p {
    font-size: 15px;
    line-height: 1.55;
  }

  .process.is-pinned .pstep__media {
    min-height: clamp(64px, 10vh, 160px);
  }
}

/* --- 6.5 Crédito do arquiteto: o quadro do logo aparece sempre --
   "Esse aqui do jeito que você incluiu dentro do case já ficou bom,
   poderia só aumentar um pouco o tamanho."
   Dois problemas, e o primeiro era o maior:
   1. Nas três prévias (Graneros, Praia JK, Itamambuca) o crédito
      fica abaixo da ficha técnica, fora do .cs-hero__in, e não
      tinha posição. A foto do hero é absoluta, então era pintada
      por cima do bloco. Ele só aparecia porque o GSAP deixa um
      transform no elemento depois da entrada; com "reduzir
      movimento" ligado no sistema, ou sem o GSAP carregar, a foto
      cobria o crédito inteiro. Agora o bloco tem a mesma camada do
      slate (position + z-index) nos quatro cases.
   2. O quadro tracejado era pequeno e apagado demais para ser lido
      como espaço reservado. Passa a 150 x 75 no desktop (2:1, serve
      para logo horizontal e para logo empilhado), com borda mais
      forte, um véu leve e a palavra "Logo" enquanto estiver vazio.
   Quando o logo chegar: ponha o <img> dentro do span. O :empty
   deixa de valer e a moldura, o véu e a legenda saem sozinhos.
   ============================================================ */
.cs-hero .cs-arq {
  position: relative;
  z-index: 1;
}

/* nas prévias o bloco é o último item do hero e encostava na base */
.cs-slate ~ .cs-arq {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.cs-arq__k {
  font-size: 0.72rem;
}

.cs-arq__logo {
  width: clamp(120px, 10.4vw, 152px);
  height: clamp(60px, 5.2vw, 76px);
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.cs-arq__logo:empty::after {
  content: 'Logo';
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cs-arq__logo:not(:empty) {
  border: 0;
  background: none;
}

.cs-arq__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-arq__nome {
  font-size: 1.24rem;
}

/* até 720px o bloco em linha não cabe sem quebrar rótulo e nome */
@media (max-width: 720px) {
  .cs-arq {
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
  }

  /* o rótulo vira o cabeçalho do bloco; logo e nome ficam lado a lado */
  .cs-arq__k {
    flex: 1 0 100%;
    border-right: 0;
    padding-right: 0;
  }

  .cs-arq__logo {
    width: 112px;
    height: 56px;
  }

  .cs-arq__nome {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.12rem;
  }
}

/* ============================================================
   7. RESPONSIVIDADE E ACESSIBILIDADE (rodada 4, set/2026)
   ------------------------------------------------------------
   Varredura das 11 páginas de 320 a 2560px, medida com as métricas
   reais da Plus Jakarta Sans (extraídas do PDF do manual), e
   auditoria de acessibilidade: contraste conferido em pixel, árvore
   de acessibilidade do Chrome, navegação só por teclado e teste de
   espaçamento de texto (WCAG 1.4.12). Tudo o que foi corrigido está
   nesta seção; as camadas anteriores não foram reescritas.
   ============================================================ */

/* --- 7.1 Topo: o menu completo só entra quando cabe -------------
   Com sete itens (o Blog entrou em setembro) e a fonte nova, o menu
   completo pede uns 830px de largura. Entre 721 e ~830px o logo
   encostava em "Home", e "Método BIX" e "Agendar conversa" quebravam
   em duas linhas. Até 960px o topo mostra o botão de agendar e o
   menu hambúrguer; o menu completo volta em 961px, com folga. */
.nav {
  gap: clamp(20px, 3vw, 48px);
}

.nav__links a,
.btn--nav .btn__t {
  white-space: nowrap;
}

@media (min-width: 721px) and (max-width: 960px) {
  .nav__links {
    display: none;
  }

  .burger {
    display: flex;
  }
}

/* --- 7.2 Sobre: texto dos princípios na largura toda ------------
   Até 760px a regra do celular pedia uma coluna só, mas a regra do
   ícone (mais abaixo na camada 3) redefinia a grade com duas colunas
   e o parágrafo caía na primeira, de ~96px: uma palavra por linha. */
@media (max-width: 760px) {
  .mf-item__panel-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .mf-item__panel p {
    grid-column: 1;
  }
}

/* Painel fechado some também para leitor de tela (antes o texto dos
   itens fechados era lido mesmo com aria-expanded="false"). O atraso
   acompanha a animação de fechar. */
.mf-item:not(.is-on) .mf-item__panel,
.fq-qa:not(.is-open) .fq-qa__a {
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}

.mf-item.is-on .mf-item__panel,
.fq-qa.is-open .fq-qa__a {
  visibility: visible;
  transition: visibility 0s;
}

/* --- 7.3 CTA final e topo da FAQ em uma coluna até 1024px -------
   A regra existia desde o arquivo original, mas perdeu a declaração
   num corte antigo (sobrou só o seletor). O título do CTA ficava numa
   coluna de 169px no celular. */
@media (max-width: 1024px) {
  .endcta__in,
  .fq-hero__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 7.4 FAQ: sumário sem palavra batendo no número -------------
   O corpo do sumário herdava o lead (19px). Em 1280px
   "Sustentabilidade" não cabia na coluna e encostava na contagem. */
.fq-toc button {
  font-size: clamp(15px, 1.2vw, var(--pg-lead));
}

.fq-toc button .i,
.fq-toc button .c {
  font-size: inherit;
}

/* o número tem coluna de 26px; com o espaçamento largo "02" passava 1px */
.fq-toc button .i {
  letter-spacing: 0.04em;
}

/* --- 7.5 Ficha do case: o último item ocupa a linha toda --------
   No celular a ficha tem duas colunas e a Solução (o texto mais
   longo) ficava sozinha em meia largura, com quatro linhas. */
@media (max-width: 760px) {
  .cs-slate__i:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }
}

/* --- 7.6 Home: o loader não pode prender a tela -----------------
   Com "reduzir movimento" ligado (ou sem o GSAP carregar), o JS
   liberava a página mas não escondia o loader, que ficava por cima
   de tudo até o tempo-limite de 12 segundos. */
body:not(.is-loading) .loader,
body:not(.is-loading) .stairs {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .stairs {
    display: none !important;
  }

  body.is-loading {
    overflow: visible;
    height: auto;
  }
}

/* --- 7.7 Alvos de toque com pelo menos 24px (WCAG 2.5.8) --------
   A migalha ganha área de toque sem mudar a altura da linha. */
.brand {
  min-height: 24px;
}

.crumbs a {
  padding-block: 3px;
  margin-block: -3px;
}

/* --- 7.8 Foco visível em qualquer fundo --------------------------
   O anel amarelo sozinho tinha 1,8:1 sobre o branco. Agora são dois
   anéis: petróleo colado no elemento e amarelo por fora. Um dos dois
   sempre contrasta, no branco e no petróleo. */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blue-950);
}

/* âncoras e foco de teclado não param escondidos atrás do topo fixo */
html {
  scroll-padding-top: clamp(84px, 11vh, 120px);
}

/* --- 7.9 "Pular para o conteúdo" ----------------------------------
   Primeiro item do teclado em todas as páginas; só aparece no foco. */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--blue-950);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 3px;
  transform: translateY(-160%);
  transition: transform 0.2s var(--out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

main[tabindex='-1']:focus {
  outline: none;
  box-shadow: none;
}

/* --- 7.10 Menu do celular fechado sai do teclado e do leitor -----
   Fechado, o menu era só recortado (clip-path): os sete links
   continuavam recebendo Tab, invisíveis, e eram lidos como uma
   segunda navegação. */
.overlay {
  visibility: hidden;
  transition:
    clip-path 0.8s var(--expo),
    visibility 0s linear 0.8s;
}

.menu-open .overlay {
  visibility: visible;
  transition:
    clip-path 0.8s var(--expo),
    visibility 0s;
}

/* --- 7.11 Contraste: cinzas ---------------------------------------
   --ink-45 ia a 4,4:1 e --ink-30 a 2,5:1 sobre o branco. Os dois
   escurecem um tom quase imperceptível: --ink-45 passa de 4,5:1
   (texto pequeno) e --ink-30 de 3:1 (títulos grandes, ícones). O
   "apagado" dos títulos fantasma continua apagado. Números e rótulos
   pequenos que usavam --ink-30 sobem para --ink-45. */
:root {
  --ink-45: #737372;
  --ink-30: #8f8f8e;
}

.mf-item__n,
.mt-row__n,
.mt-stepper button,
.ix__n,
.fq-toc button .i,
.fq-toc button .c,
.arrowlink .br,
.philos__no,
.proj__idx {
  color: var(--ink-45);
}

.fq-search input::placeholder {
  color: var(--ink-45);
  opacity: 1;
}

/* --- 7.12 Contraste: amarelo sobre branco --------------------------
   O amarelo da marca tem 1,8:1 sobre o branco. Nos textos de
   informação (rótulos, números de ordem, selo "Case em produção",
   contagem) o texto passa a petróleo e o amarelo fica no traço e no
   ícone. Os destaques grandes pedidos pela cliente (hero, "projetado",
   "nossas certificações", nomes dos projetos e unidades dos números
   da home) continuam amarelos: ver o documento da rodada. */
.mf-facts .k,
.mf-where__txt .k {
  color: var(--blue);
  font-size: var(--pg-mono);
}

.cs-entry__n,
.fq-group__t .i,
.mf-item.is-on .mf-item__n,
.fq-toc button.is-on .i,
.ix__badge,
.ix-hero__count b {
  color: var(--blue);
}

/* --- 7.13 Títulos em ordem (h4 do rodapé e do contato viraram h2/h3)
   Mesmo desenho de antes, só a tag mudou. */
.footer__col .footer__h {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.4em;
  font-weight: 500;
}

h2.ct-parceria__k {
  margin: 0;
  font-weight: inherit;
  line-height: inherit;
  font-size: var(--pg-mono);
}

.ct-parceria__list h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

/* --- 7.14 Vídeos: botão de pausar (WCAG 2.2.2) ---------------------
   Vídeo que toca sozinho por mais de 5 segundos precisa de um jeito
   de parar. O botão é criado pelo JS dentro do quadro do vídeo, acima
   do rótulo do canto. Com "reduzir movimento" o vídeo nem começa. */
.vidctl {
  appearance: none;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
  position: absolute;
  z-index: 6;
  right: calc(var(--fx, 0px) + 16px);
  bottom: calc(var(--fy, 0px) + 44px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(6, 34, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background 0.3s var(--out),
    color 0.3s var(--out),
    border-color 0.3s var(--out);
}

.vidctl:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--blue-950);
}

.vidctl:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

.vidctl svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.vidctl .i-play,
.vidctl.is-paused .i-pause {
  display: none;
}

.vidctl.is-paused .i-play {
  display: block;
}

.metodo__stage .vidctl {
  bottom: 56px;
  right: 30px;
}

/* --- 7.15 Formulários ---------------------------------------------
   Contato: o traço de foco dos campos era amarelo sobre branco
   (1,8:1) e passa a petróleo. O formulário enviava a mensagem de
   "Recebido" mesmo com nome, WhatsApp e e-mail vazios; agora avisa o
   que falta, marca o campo e leva o foco até ele. */
.ct-field::after {
  background: var(--blue);
}

.ct-field.is-invalid {
  border-bottom-color: #b3261e;
}

.ct-field.is-invalid label {
  color: #b3261e;
}

.ct-msg.is-erro {
  color: #b3261e;
}

.form__msg.is-erro {
  color: #ffb4a9;
}

/* --- 7.16 Sobre: selo do mapa em uma linha quando cabe --------------
   Posicionado com left: 50%, o selo só podia usar metade da largura do
   mapa e quebrava "DO / SUL" mesmo no desktop. */
.mf-map__cov {
  width: max-content;
  text-wrap: balance;
}

/* --- 7.17 Home: índice dos pilares legível nos três estados -------
   Número apagado a 30% dava 2,7:1 sobre o petróleo, e o texto dos
   itens já vistos ficava em 4,4:1. Sobem o mínimo para passar de 4,5:1
   e a hierarquia (em cena, a ver, já visto) continua a mesma. */
.adv2__idx .n {
  color: rgba(255, 255, 255, 0.6);
}

.adv2__idx li.is-past {
  color: rgba(255, 255, 255, 0.54);
}

.adv2__idx li.is-past .n {
  color: rgba(249, 179, 33, 0.8);
}

/* ============================================================
   8. CONTATO: BLOCO DOS ARQUITETOS NO TOPO (set/2026)
   ------------------------------------------------------------
   O painel "Do projeto ao pós-obra" saiu do HTML a pedido da
   cliente e o bloco para arquitetos passou a abrir a coluna. O
   filete de cima separava esse bloco do painel; como primeiro item
   ele ficava solto no topo, então sai.
   ============================================================ */
.ct-right__in > .ct-block:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ============================================================
   9. RODADA 5 · CONFERÊNCIA DO DOCUMENTO DE AJUSTES (set/2026)
   ------------------------------------------------------------
   Releitura item a item do "Ajustes - Site BIX.pdf" contra o site
   renderizado. Parte dos pedidos estava escrita no CSS desde julho
   mas não aparecia na tela: uma regra mais antiga e mais específica
   ganhava no cascade. Outros estavam aplicados de forma tímida
   demais para o cliente perceber. Detalhes em AJUSTES-set2026-r5.md.
   ============================================================ */

/* --- 9.1 Home: "Pilares do Método BIX" em letras grandes ---------
   Documento: "Deixar somente pilares do método BIX em letras
   grandes". As regras de julho (camada 4) e de setembro (camada 5)
   nunca valeram: `.adv2__aside .h2`, do arquivo original, é mais
   específica e segurava o título em 27px no desktop. No desktop,
   passa ao mesmo corpo do título do hero, que cabe na coluna em
   duas linhas ("Pilares do / Método BIX"). */
.adv2__aside .pillars__title {
  font-size: var(--display);
  line-height: 1.02;
}

@media (max-width: 980px) {
  /* coluna única: o título ganha a largura toda e fica no corpo do
     outro título grande da home ("Uma forma moderna de construir...") */
  .adv2__aside .pillars__title {
    font-size: calc(var(--h2) + 6px);
    max-width: none;
  }
}

/* --- 9.2 Sobre: texto das certificações maior --------------------
   Documento: "aumentar texto abaixo 'A ISO 9001 atesta o rigor
   dos'". A classe --lg existia, mas `p.mf-certs__lead` (camada 3)
   vencia e deixava o texto no corpo comum, 17,5px. Agora ele fica
   no corpo de texto de abertura da home (ver 9.6). */
.mf-certs p.mf-certs__lead--lg {
  font-size: var(--body-lg);
  line-height: 1.6;
}

/* --- 9.3 Números que voltam ao desenho original ------------------
   A regra 5.1 da rodada 3 (`.pg .k, ... { inherit }`) queria só
   tirar rótulos e números da entrelinha de parágrafo, mas o
   `inherit` apagava o peso e a entrelinha próprios deles: o "2024"
   e o "100%" das certificações saíam em 400 com entrelinha de
   texto, e os números da Casa São Paulo abriam espaço a mais. */
.pg .certnum__n {
  font-weight: 600;
  line-height: 1;
}

.pg .cs-rowl__num {
  font-weight: 300;
  line-height: 1;
}

/* --- 9.4 Ícones line-art legíveis sobre fundo escuro -------------
   O arquivo original tinha a lista de contextos escuros, mas a
   declaração se perdeu num corte antigo (sobrou só o seletor,
   colado na regra seguinte). Os traços ficavam em petróleo sobre o
   azul-noite: nos benefícios do Método, nos cards off-site e na
   coluna de contato, só o acento amarelo aparecia. */
.sec--dark .ico-art,
.mt-bens .ico-art,
.cs-ledger .ico-art,
.endcta .ico-art,
.ct-right .ico-art,
.dcard .ico-art {
  --ico-l: rgba(255, 255, 255, 0.78);
  --ico-a: var(--yellow);
}

/* --- 9.5 Sobre e Método: CTA final como seção própria ------------
   Documento, nas duas páginas: "destacar isso em uma seção
   diferente". A versão anterior só punha um filete amarelo no topo:
   o bloco seguia no mesmo azul-noite do rodapé (e, no Método, da
   seção de benefícios logo acima) e lia como parte do rodapé.

   Agora é uma faixa no azul petróleo do manual, a cor principal da
   marca, sem o halo, com o título no corpo de display e o filete
   curto amarelo que já marca os destaques do site. As outras
   páginas mantêm o CTA escuro; para levar o destaque a elas, basta
   acrescentar a classe `endcta--feature` na <section>. */
.endcta--feature {
  background: var(--blue);
  border-top: 0;
}

.endcta--feature::before {
  display: none;
}

.endcta--feature .endcta__in {
  align-items: center;
  padding-block: clamp(64px, 8vw, 124px);
}

.endcta--feature h2 {
  font-size: var(--display);
  line-height: 1.04;
  max-width: 18ch;
}

.endcta--feature h2::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  background: var(--yellow);
  border-radius: 2px;
}

.endcta--feature p {
  color: rgba(255, 255, 255, 0.82);
}

.endcta--feature .btn--on-dark {
  border-color: rgba(255, 255, 255, 0.5);
}

/* palavra com hífen que não deve quebrar ("construí-lo") */
.nobr {
  white-space: nowrap;
}

/* --- 9.6 Régua tipográfica da home em todas as páginas ----------
   Documento (Sobre): "Diminuir tamanho da fonte do título para se
   assemelhar à home, vale também para a página método" e "Aumentar
   a fonte do texto 'A BIX nasceu...', isso vale para todo site".
   Pedido desta rodada: conferir o tamanho de fonte das páginas e
   padronizar pelo da home.

   Régua da home, medida no navegador (desktop 1440 / celular 390):
     título da página ...... --display   47,4px / 25,9px
     texto de abertura ..... --body-lg   21,1px / 17,6px
     texto corrido ......... --pg-body   17,5px / 17,5px
     rótulo em caixa alta .. --label     12,5px / 11,2px

   O que estava fora dela:
     - título das internas: 50px no desktop e 33px no celular; nos
       cases, 76px; no contato, 55px;
     - texto de abertura das internas: 19px fixo, um terceiro corpo
       que a home não tem (menor que o dela no desktop);
     - textos corridos de cartões e painéis também em 19px;
     - componentes que existem na home com outro corpo: título do
       bloco "É arquiteto(a)..." no contato, títulos dos artigos no
       blog, nomes dos projetos na lista de cases;
     - rótulos da ficha do case em 19px, maiores que o próprio valor.
   Títulos de seção (h2) e de cartão não mudam: a home não tem um
   nível equivalente fixo, e reduzir ou crescer esses títulos não
   foi pedido. */
:root {
  --pg-d1: var(--display);
}

.cs-hero h1,
.ct-left h1 {
  font-size: var(--display);
}

/* o título do Método tem o dobro de texto do Sobre: numa coluna de
   15 caracteres ele descia em seis linhas */
.mt-hero h1 {
  max-width: 22ch;
}

/* texto de abertura: parágrafo que apresenta a página ou a seção */
p.mf-s1__lead,
.mf-vals__head p,
.mt-pilares__head p,
p.cs-contrib__intro,
.cs-ledger__head p,
.ct-left > p,
.endcta p {
  font-size: var(--body-lg);
}

/* texto corrido que tinha ficado no corpo de abertura */
.mf-item__panel p,
.mt-ben p:not(.mt-ben__sub),
.ct-block p,
.ct-lines,
.fq-empty {
  font-size: var(--pg-body);
}

/* mesmo componente da home, mesmo corpo da home (o do blog leva
   o h2 no seletor porque bix-blog.css carrega depois desta camada) */
.ct-block h2 {
  font-size: 1.32rem; /* .aside-card h3 da home */
}

h2.bl-card__title {
  font-size: clamp(1.02rem, 0.7vw + 0.68rem, 1.28rem); /* .jpost__title */
}

@media (min-width: 861px) {
  h2.bl-card__title {
    font-size: clamp(1.12rem, 0.8vw + 0.72rem, 1.5rem);
  }
}

/* o respiro entre o título e o resumo do artigo existia (.7em), mas
   `.pg p` zerava a margem e o resumo encostava no título */
p.bl-card__lead {
  margin-top: 0.7em;
}

.ix__name {
  font-size: clamp(1.7rem, 3vw + 0.3rem, 3rem); /* .proj__name */
}

/* ficha do case: o rótulo (Tipologia, Local...) estava em 19px,
   maior que o próprio valor (15px); passa ao corpo do eyebrow da
   home. O valor fica como estava: em 17,5px a "Solução" quebrava em
   três linhas na coluna estreita entre 834 e 1180px. */
.cs-slate__k {
  font-size: var(--label);
}

/* --- 9.6b Cases: texto do hero legível sobre qualquer foto ---------
   Com a ficha em corpo de rótulo (12px, amarelo) e o título na régua
   da home, o véu da foto passou a pesar mais: ele era proporcional à
   altura do hero (18% de escurecimento no meio), e no celular o
   texto ocupa justamente o meio. Com foto clara, o amarelo da ficha
   ficava em 1,2:1 e o título em 2,5:1. O véu agora acompanha o
   bloco de texto: começa um pouco acima da trilha (Home / Cases) e
   fica firme até a base, então a parte de cima da foto continua
   limpa e o texto passa de 4,5:1 mesmo com foto clara.
   Feito com border-image em vez de pseudo-elemento: a pintura vaza
   até as bordas da tela sem aumentar a área de rolagem do hero. */
.cs-hero__in {
  --cs-pt: clamp(130px, 20vh, 220px);
  padding-top: var(--cs-pt);
  border-image: linear-gradient(
      180deg,
      rgba(6, 34, 46, 0) calc(var(--cs-pt) - 72px),
      rgba(6, 34, 46, 0.62) calc(var(--cs-pt) - 8px),
      rgba(6, 34, 46, 0.74) calc(var(--cs-pt) + 56px),
      rgba(6, 34, 46, 0.8) calc(var(--cs-pt) + 120px)
    )
    fill 0 / 0 100vmax;
}

@media (max-width: 760px) {
  .cs-hero__in {
    --cs-pt: clamp(120px, 22vh, 170px);
  }
}

/* nas prévias, a ficha e o crédito ficam num segundo bloco */
.cs-hero > .wrap:not(.cs-hero__in) {
  position: relative;
  z-index: 1;
  border-image: linear-gradient(rgba(6, 34, 46, 0.8), rgba(6, 34, 46, 0.8)) fill 0 / 0 100vmax;
}

/* a trilha (Home / Cases / ...) a 50% de branco ficava em 3,5:1 sobre
   a foto; sobe para 70% e continua mais apagada que o título */
.cs-hero .crumbs--d,
.cs-hero .crumbs--d a {
  color: rgba(255, 255, 255, 0.7);
}

.cs-hero .crumbs--d a:hover {
  color: #fff;
}

/* --- 9.7 Método: pilares mais perto do modelo do documento -------
   Documento: "incluir uma seção com os pilares do método BIX no
   modelo abaixo". A estrutura estava certa (quatro cartões, ícone
   em círculo amarelo, número em etiqueta, faixa "Nossa abordagem"),
   mas os detalhes que dão cara ao modelo não: título do cartão
   menor que o texto, sem o filete amarelo embaixo dele, ícones
   pequenos e genéricos, etiqueta miúda e faixa sem ícone nem
   divisória amarela. Os ícones novos (no HTML) seguem os temas do
   modelo: módulo no guindaste, casa com conforto e tecnologia,
   folha com setas de ciclo e duas pessoas com o projeto. */
.mt-pil {
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: clamp(22px, 2.2vw, 32px);
  box-shadow:
    0 1px 2px rgba(14, 42, 51, 0.04),
    0 14px 32px -22px rgba(14, 42, 51, 0.22);
}

.mt-pil__ico {
  width: clamp(80px, 6.8vw, 104px);
  height: clamp(80px, 6.8vw, 104px);
  border-width: 2px;
  align-self: center;
  margin-bottom: clamp(18px, 1.8vw, 26px);
}

.mt-pil__ico svg {
  width: 72%;
  height: 72%;
}

/* subtítulo centralizado sem palavra sozinha na última linha */
.mt-pilares__head p {
  text-wrap: balance;
}

.mt-pil__n {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.34em 0.62em;
  border-radius: 5px;
  color: var(--ink);
}

.mt-pil h3 {
  margin-top: 0.8em;
  font-size: clamp(1.28rem, 0.8vw + 0.78rem, 1.56rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.mt-pil h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: clamp(14px, 1.4vw, 18px);
  background: var(--yellow);
  border-radius: 2px;
}

.mt-pilares .mt-pil p {
  margin-top: clamp(14px, 1.4vw, 18px);
  line-height: 1.62;
}

.mt-pil__foot {
  grid-template-columns: auto auto minmax(0, 1fr);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(14, 42, 51, 0.04),
    0 14px 32px -22px rgba(14, 42, 51, 0.22);
}

.mt-pil__foot-ico {
  display: block;
  width: clamp(40px, 3.4vw, 50px);
  height: clamp(40px, 3.4vw, 50px);
  color: var(--blue);
}

.mt-pil__foot-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mt-pil__foot-k {
  font-size: clamp(0.92rem, 0.4vw + 0.74rem, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-right: 2px solid var(--yellow);
}

@media (max-width: 640px) {
  .mt-pil__foot {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
  }

  .mt-pil__foot-k {
    border-right: 0;
    padding-right: 0;
  }

  .mt-pil__foot p {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 2px solid var(--yellow);
  }
}

/* ============================================================
   10. RODADA 6 · AJUSTES DE 24/09 E FOTOS DO CLIENTE (out/2026)
   ------------------------------------------------------------
   Documento "Ajustes Site BIX_2409" e "Novo site 2026 - Fotos
   selecionadas". Cada bloco abaixo cita o item da checklist da
   rodada (CHECKLIST-rodada-6.md). Detalhes em AJUSTES-out2026-r6.md.
   As fotos ficam em assets/img/fotos, já com o leve filtro azul
   aplicado no arquivo (item 3), então nenhuma regra daqui mexe na
   cor delas.
   ============================================================ */

/* --- 10.1 Fundo das páginas: cinza bem clarinho (item 2) ----------
   "Fundos brancos me estranham um pouco, não sei se um cinza bem
   clarinho seria uma alternativa." Vale para todas as páginas. O
   tom fica bem mais perto do branco do que o cinza da rodada 3
   (#F7F8F7). O <body>, as seções claras e os topos claros saem
   destes tokens. --paper-soft continua branco: é dele que saem os
   cartões (mapa, aviso do blog, palco do vídeo), que seguem brancos
   sobre o cinza. */
:root {
  --page: #fafbfa;
  --paper: var(--page);
  --stone: var(--page);
  --stone-2: var(--page);
  --stone-3: var(--page);
}

/* --- 10.2 Home: cards dos pilares todos azuis (item 2) ------------
   "Padronizar fundos - Azul (preferencial) ou Branco", logo abaixo
   do print dos pilares: os três primeiros cards eram brancos e o
   último azul. Os quatro recebem a classe advcard--dark no HTML.

   A foto do conforto é um modelo 3D em fundo branco, com 371 px de
   largura: entra inteira, sobre branco, sem ampliar nem cortar. */
.advcard__pic--inteira {
  background: #fff;
}

.advcard--media .advcard__pic--inteira img,
.advcard--media:hover .advcard__pic--inteira img {
  object-fit: contain;
  transform: none;
}

.advcard--media .advcard__pic--inteira .num {
  color: var(--ink-70);
  text-shadow: none;
}

/* --- 10.3 Home: coluna dos pilares mais larga (item 7) ------------
   "Deixar lado esquerdo mais largo, deixando o texto 01, 02… em uma
   linha única para diminuir o espaço livre em azul." A coluna vai de
   3 para 5 das 12 colunas (os cards continuam em 6); entre 981 e
   1180 px ela ocupa 6, para o item mais longo caber numa linha. */
@media (min-width: 981px) {
  .adv2__aside {
    grid-column: 1 / 6;
  }

  .adv2__idx .t {
    white-space: nowrap;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .adv2__aside {
    grid-column: 1 / 7;
  }
}

/* --- 10.4 Home: fotos das etapas (item 9) -------------------------
   O espaço "Foto da etapa" recebe as imagens enviadas. No relatório da
   obra o recorte guarda o topo e a esquerda (cabeçalho, foto e
   números); no manual do pós-obra, a faixa de baixo com o título. */
.pstep__media--foto {
  position: relative;
  border: 0;
  background: var(--blue-950);
  overflow: hidden;
}

/* a foto preenche a moldura em vez de ditar a altura dela: com a seção
   fixa na tela (desktop), a moldura é a peça que encolhe para o texto
   caber, e a foto acompanha o recorte */
.pstep__media--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pstep[data-step='2'] .pstep__media--foto img {
  object-position: left top;
}

.pstep[data-step='3'] .pstep__media--foto img {
  object-position: center bottom;
}

/* Itamambuca (item 6) entrou na lista e mostrou um aperto antigo: no
   celular a ficha some da linha, mas a trilha de 40% criada para ela
   (camada 2) continuava reservada, e o nome ficava numa coluna de
   ~130 px ("Casa São Paulo" em duas linhas, "Itamambuca" vazando).
   Sem a ficha, a linha volta às três colunas do arquivo original. */
@media (max-width: 860px) {
  .proj__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* --- 10.5 CTA final e contato da home em cartão próprio (item 1) ----
   "Destacar isso em uma seção diferente, separada do rodapé.
   Provavelmente, ficará melhor de outra cor também." O bloco deixa de
   encostar no rodapé: vira um cartão azul petróleo, alinhado às
   margens do conteúdo, com cantos arredondados e uma faixa do fundo
   da página entre ele e o rodapé. Todas as páginas usam a variante
   endcta--feature (Sobre e Método já usavam). */
.endcta,
.contact {
  width: calc(min(100%, var(--maxw)) - 2 * var(--pad));
  margin: clamp(16px, 2vw, 32px) auto clamp(56px, 7vw, 112px);
  border-radius: 6px;
  border-top: 0;
}

.endcta > .wrap,
.contact > .shell {
  max-width: none;
  padding-inline: clamp(24px, 5.4vw, 96px);
}

/* no celular o cartão fica a 12 px das bordas: com o recuo do
   conteúdo, o botão "Quero conversar com a BIX" (sempre em uma linha)
   não cabia quando o texto ganha espaçamento extra */
@media (max-width: 480px) {
  .endcta,
  .contact {
    width: calc(100% - 24px);
  }

  .endcta > .wrap,
  .contact > .shell {
    padding-inline: 20px;
  }
}

/* depois de uma seção escura, a faixa clara precisa existir acima também */
.mt-bens + .endcta {
  margin-top: clamp(48px, 6vw, 96px);
}

.contact {
  background: var(--blue);
  padding-block: clamp(56px, 7vw, 112px);
}

/* as guias verticais da seção não fazem sentido dentro do cartão */
.contact > .colgrid {
  display: none;
}

/* no celular o cartão é mais estreito que a seção antiga: a coluna não
   pode crescer além dele quando o texto ganha espaçamento extra */
@media (max-width: 980px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* textos de apoio do formulário: os brancos translúcidos passavam de
   4,5:1 no azul-noite, mas não no petróleo (rótulos a 50% davam 3,5:1).
   O filete dos campos sobe junto, para o campo continuar visível. */
.contact__intro {
  color: rgba(255, 255, 255, 0.82);
}

.contact .form-field .field-label,
.contact .field-group > label {
  color: rgba(255, 255, 255, 0.74);
}

.contact .form-field:focus-within .field-label {
  color: var(--yellow);
}

.contact .form-field .field {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* --- 10.6 Sobre: faixa azul com título e foto (item 10) -----------
   "Falta algo no banner de cima... foto à direita ou... retângulo no
   fundo", "aqui também podemos colocar o fundo azul" e "para ocupar
   espaço colocaria o certificado da ISO e do lado o certificado da
   neutralização de carbono". */
.mf-hero--faixa {
  padding-top: 0;
}

.mf-hero__faixa {
  background: var(--blue);
  color: #fff;
  padding-top: clamp(128px, 17vh, 200px);
  padding-bottom: clamp(44px, 5.4vw, 84px);
}

.mf-hero__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4.4vw, 84px);
  align-items: end;
}

.mf-hero--faixa h1 {
  color: #fff;
  margin-top: clamp(24px, 3.4vw, 44px);
}

/* trilha (Home / Sobre): 50% de branco dava 3,5:1 no petróleo */
.mf-hero--faixa .crumbs--d,
.mf-hero--faixa .crumbs--d a {
  color: rgba(255, 255, 255, 0.78);
}

.mf-hero--faixa .crumbs--d a:hover {
  color: #fff;
}

/* as palavras em destaque eram petróleo sobre o claro; no petróleo
   passam a um azul claro do mesmo tom (5,1:1) */
.mf-hero--faixa h1 b {
  color: #a3d2e3;
}

.mf-hero--faixa h1 em {
  color: var(--yellow);
}

.mf-hero__foto,
.mt-hero__foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: var(--blue-950);
}

.mf-hero__foto img,
.mt-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mf-hero--faixa .mf-hero__in {
  margin-top: 0;
}

.mf-hero--faixa .mf-s1 {
  border-top: 0;
  padding-top: clamp(40px, 5vw, 76px);
}

.mf-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
  margin-top: clamp(26px, 3vw, 42px);
}

.mf-selos img {
  height: clamp(62px, 5.6vw, 86px);
  width: auto;
}

@media (max-width: 860px) {
  .mf-hero__topo {
    grid-template-columns: minmax(0, 1fr);
  }

  .mf-hero__foto,
  .mt-hero__foto {
    aspect-ratio: 16 / 10;
  }
}

/* --- 10.7 Sobre: "Onde atuamos" em duas linhas (item 11) ----------
   "Deixar esse texto em duas linhas para ocupar maior espaço
   lateral: Projetos de alto padrão. / Onde quer que eles estejam."
   O limite de 16 caracteres por linha sai e cada frase vira uma
   linha. A coluna do texto ganha um pouco de largura sobre o mapa. */
@media (min-width: 861px) {
  .mf-where__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.mf-where__txt h2 {
  max-width: none;
}

.mf-where__txt h2 .l {
  display: block;
}

/* --- 10.8 Sobre: pinos do mapa (item 12) --------------------------
   "Na esquerda todas bolinhas estão amarelas, na direita tem duas
   azuis e uma amarela, padronizar." Os três pinos ficam amarelos,
   como os pontos da lista. A posição foi corrigida no HTML (São Paulo
   dentro do estado, Uruguai em Punta del Este) e a bolinha da
   legenda saiu. */
.mf-map__pin .dot,
.mf-map__pin .halo {
  fill: var(--yellow);
}

.mf-map__pin .ring {
  stroke: var(--yellow);
}

/* --- 10.9 Sobre: certificações em retângulos (item 14) ------------
   "Colocar algum efeito nos números. Colocar os números/textos dentro
   de retângulos." Cada certificação vira um cartão branco; os
   números contam ao entrar na tela (bix-pages.js, bloco 10). */
.certnum {
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--yellow);
  border-radius: 4px;
  padding: clamp(22px, 2.8vw, 40px);
}

/* --- 10.10 Método: foto à direita no topo (item 16) ---------------
   "Mesma coisa da seção sobre. Avaliar se colocamos imagem na direita
   ou distribuímos o texto horizontalmente." O fundo já era azul. */
.mt-hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4.4vw, 84px);
  align-items: end;
}

@media (max-width: 860px) {
  .mt-hero__grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 10.11 Cases: texto do topo e lista (itens 19, 20 e 21) -------
   "Eliminar o 04 Projetos e escrever: Conheça detalhes de alguns
   projetos desenvolvidos pela BIX." / "Deixar todos os cases nesse
   formato, com as soluções usadas na linha de baixo." / "Aumentar um
   pouco a largura da foto" e o desenho em vermelho: a foto ocupa a
   faixa da direita da linha, quase de borda a borda na altura. */
.ix-hero__lead {
  margin: 0;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: var(--body-lg);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-70);
}

.ix__specs > span:nth-child(4) {
  flex-basis: 100%;
}

@media (min-width: 901px) {
  .ix__row {
    grid-template-columns: clamp(44px, 4.4vw, 76px) minmax(0, 1fr) minmax(0, 1.05fr) auto;
    align-items: stretch;
  }

  .ix__body,
  .ix__go {
    align-self: center;
  }

  .ix__thumb {
    aspect-ratio: auto;
    min-height: clamp(170px, 15vw, 250px);
    margin-block: calc(clamp(26px, 3.6vw, 52px) * -1 + 12px);
  }

  /* a altura vem da linha, não da proporção de cada foto */
  .ix__thumb img {
    position: absolute;
    inset: 0;
  }
}

/* --- 10.12 Páginas dos cases: galeria para fotos panorâmicas -------
   As três fotos do Graneros são panorâmicas (2,2:1). No molde da Casa
   São Paulo (principal 4:3 e duas laterais) elas perderiam metade da
   largura; na variante "larga" a principal ocupa a linha toda e as
   duas outras dividem a linha de baixo, cada uma na proporção dela. */
/* nos cases em produção a galeria vem logo depois do texto "O projeto":
   sem o respiro de cima, para não somar dois vãos de seção */
.cs-soon + .cs-gal {
  padding-top: 0;
}

.galn--larga {
  grid-template-columns: minmax(0, 1fr);
}

.galn--larga .galn__main {
  aspect-ratio: 2.16 / 1;
}

.galn--larga .galn__side {
  grid-template-rows: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.galn--larga .galn__side figure {
  aspect-ratio: 2.26 / 1;
}

@media (max-width: 640px) {
  .galn--larga .galn__side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   11. RODADA 6 · CORREÇÕES DO JOÃO (out/2026)
   ------------------------------------------------------------
   Checklist em CHECKLIST-rodada-6-correcoes.md, aprovada. Paleta do
   manual: petróleo #0E516A, amarelo #F9B321, grafite #575756, mais o
   azul-noite (#06222E, --blue-950) do rodapé e das seções escuras.
   ============================================================ */

/* --- 11.1 Home: contato no azul do rodapé (item 1) -------------
   "Na seção contato, usar a mesma cor de fundo do footer e das demais
   seções em azul." O cartão continua separado do rodapé pela faixa
   do fundo da página. */
.contact {
  background: var(--blue-950);
}

/* --- 11.2 Header: o fundo não esmaece mais (item 2) ---------------
   Junto com a correção em bix.js: o fundo do header entra e sai de uma
   vez, sem a transição que deixava o header meio transparente por
   cima da seção enquanto voltava. */
.nav {
  transition:
    transform 0.5s var(--out),
    padding 0.5s var(--out),
    border-color 0.5s var(--out);
}

/* --- 11.3 Sobre: topo no azul-noite, com as linhas do Método (itens 4 e 7)
   "Usar o mesmo tom de azul de fundo na hero, não esse azul mais
   claro." As linhas verticais e o brilho amarelo são os mesmos do topo
   do Método (bix-pages.css, .mt-hero::before). */
.mf-hero__faixa {
  position: relative;
  background: var(--blue-950);
  overflow: hidden;
}

.mf-hero__faixa::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 /
      clamp(60px, 7vw, 120px) 100%,
    radial-gradient(60% 90% at 90% 0%, rgba(249, 179, 33, 0.1), transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.mf-hero__faixa > .wrap {
  position: relative;
  z-index: 1;
}

/* --- 11.4 CTA final em cor clara (item 5) -------------------------
   "Deve ser de outra cor, mas uma cor que sempre respeita o guia da
   BIX... talvez fique melhor em branco ou num cinza beeeeem clarinho."
   Cinza bem clarinho com um leve tom do petróleo da marca, um tom
   abaixo do fundo da página, sem branco puro. O botão passa para a
   versão de fundo claro no HTML (btn--primary). */
.endcta--feature {
  background: #f2f5f6;
  border: 1px solid rgba(14, 81, 106, 0.1);
  color: var(--ink);
}

.endcta--feature h2 {
  color: var(--blue-950);
}

.endcta--feature p {
  color: var(--ink-70);
}

.endcta--feature .link-u {
  color: var(--blue);
}

/* --- 11.5 Linhas de grid no topo das internas (item 7) ------------
   "Não se esqueça de usar as mesmas linhas de grid que usamos na home
   e método BIX (principalmente no topo)." Mesmo desenho do Método:
   uma linha vertical a cada 60 a 120 px, sumindo em direção ao
   conteúdo. No cinza, as linhas são de petróleo bem suave; sobre o
   azul e sobre as fotos dos cases, de branco suave. */
.ix-hero,
.fq-hero,
.bl-hero,
.ct-left {
  position: relative;
}

.ix-hero::before,
.fq-hero::before,
.bl-hero::before,
.ct-left::before,
.ct-right::after,
.cs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 81, 106, 0.07) 1px, transparent 1px) 0 0 /
    clamp(60px, 7vw, 120px) 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.ct-right::after,
.cs-hero::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 /
    clamp(60px, 7vw, 120px) 100%;
}

/* nos cases, as linhas ficam acima da foto e abaixo do texto */
.cs-hero::before {
  z-index: 1;
}

/* blocos altos (contato, topo dos cases): as linhas ficam no topo e
   somem até 560 px, em vez de atravessar o formulário ou a ficha */
.ct-left::before,
.ct-right::after,
.cs-hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 560px);
  mask-image: linear-gradient(180deg, #000 0, transparent 560px);
}

.ix-hero > *,
.fq-hero > *,
.bl-hero > *,
.ct-left > * {
  position: relative;
  z-index: 1;
}

/* --- 11.6 CTA no meio da página -----------------------------------
   Depois de comparar as versões A e B, o João escolheu: Sobre, Método
   e as quatro páginas de case têm o CTA no meio da página; Home
   (contato), Cases, FAQ e Blog mantêm o bloco no fim, separado do
   rodapé. Estas regras só valem quando o cartão não é o último bloco
   do <main>. */
main > .endcta:not(:last-child) {
  margin-top: clamp(8px, 1vw, 16px);
  margin-bottom: 0;
}

/* encostado numa seção escura (o topo de um case, os benefícios do
   Método), o cartão ganha a faixa clara também desse lado */
main > .cs-hero + .endcta:not(:last-child) {
  margin-top: clamp(48px, 6vw, 96px);
}

main > .endcta + .mt-bens {
  margin-top: clamp(48px, 6vw, 96px);
}

/* o Método passa a terminar nos benefícios, que são do mesmo azul do
   rodapé: um filete separa os dois */
main:has(> .mt-bens:last-child) + .footer,
main:has(> .mt-bens:last-child) ~ .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   12. RODADA 7 (out/2026)
   ------------------------------------------------------------
   Pedidos do João: fotos das etapas do mesmo tamanho, fotos novas
   (pilar 01, módulos do Método, fachada do Graneros), vídeo
   institucional, linha vertical dos pilares, filtro quente nas
   fotos (no próprio arquivo, sem CSS) e logo da Arkitito.
   Detalhe em AJUSTES-out2026-r7.md.
   ============================================================ */

/* --- 12.1 Pilares: a linha vertical não corta a coluna ------------
   "Essa linha vertical teria que ficar mais para a direita para não
   cortar os elementos." No HTML a primeira linha foi de 25% para 50%,
   onde começam os cards. Entre 721 e 980 px a coluna e os cards
   ocupam a largura toda, então qualquer linha interna cruzaria o
   texto: nessa faixa as linhas da seção saem. */
@media (min-width: 721px) and (max-width: 980px) {
  .pillars > .colgrid {
    display: none;
  }
}

/* --- 12.2 Home: as três fotos das etapas do mesmo tamanho ---------
   "Deixe todas iguais, preservando o máximo de detalhes de cada
   uma." Com a seção fixa na tela (desktop), cada moldura encolhia
   para o texto do próprio card caber, e a do card 1 (o texto mais
   longo) ficava bem menor. Agora os três cards dividem as mesmas
   linhas (subgrid): foto, título, texto e "O que você pode esperar"
   alinhados, e a moldura é a mesma nos três, em 16:10 quando cabe e
   mais baixa só quando a tela não tem altura para isso. Para sobrar
   mais altura para as fotos, o card fixo ficou um pouco mais justo
   nos respiros, e o texto recua para 16 px também em telas de até
   920 px de altura (antes, até 860). */
.pstep__media--foto img {
  object-position: center 45%;
}

@supports (grid-template-rows: subgrid) {
  .process.is-pinned .process-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(300px, 32vw, 470px);
    grid-template-rows: minmax(auto, max-content) auto auto auto 1fr;
    column-gap: clamp(18px, 2vw, 32px);
  }

  .process.is-pinned .pstep {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    height: auto;
    padding-block: clamp(18px, 2.6vh, 28px);
  }

  /* a proporção 16:10 só serve para medir a linha (o máximo que ela
     pode ter); a moldura ocupa a largura do card e a altura que a
     linha recebeu */
  .process.is-pinned .pstep__media {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: 100%;
    min-height: clamp(84px, 13vh, 150px);
  }

  .process.is-pinned .pstep h3 {
    margin-top: clamp(14px, 2.2vh, 24px);
    line-height: 1.15;
  }

  .process.is-pinned .pstep > p {
    margin-top: clamp(8px, 1.3vh, 14px);
  }

  .process.is-pinned .pstep__journey {
    margin-top: clamp(14px, 2vh, 26px);
    padding-top: clamp(12px, 1.8vh, 22px);
  }

  .process.is-pinned .pstep__journey p {
    margin-top: clamp(6px, 1vh, 12px);
  }
}

/* só a faixa nova (861 a 920 px): abaixo disso já valem 16 e 15 px */
@media (min-width: 901px) and (min-height: 861px) and (max-height: 920px) {
  .process.is-pinned .pstep p,
  .process.is-pinned .pstep__journey p {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* --- 12.3 Sobre: vídeo institucional ------------------------------
   O placeholder virou o player. Desde o ajuste r7b não há capa: o
   vídeo toca mudo e em loop quando aparece na tela (bix-pages.js,
   bloco 9). Até o primeiro quadro, o palco mostra o azul-noite com o
   símbolo da marca. */
.mf-inst__stage--video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--blue-950);
  background-image: url('img/pattern-bix.svg');
  background-size: clamp(220px, 26vw, 360px) auto;
  background-position: right -40px bottom -60px;
  background-repeat: no-repeat;
}

.mf-inst__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

/* --- 12.4 Casa São Paulo: logo da Arkitito -------------------------
   O quadro reservado era para um logo quadrado; o da Arkitito é um
   logotipo largo, então o quadro passa a seguir a proporção dele, na
   altura das letras do bloco. */
.cs-arq__logo--marca {
  display: block;
  width: auto;
  height: clamp(22px, 2.2vw, 30px);
}

.cs-arq__logo--marca img {
  display: block;
  width: auto;
  height: 100%;
}

/* --- 12.5 Graneros: fachada nova na galeria ------------------------
   A fachada retocada que chegou é 3:2, não panorâmica como a anterior.
   A principal continua ocupando a linha toda, agora em 16:9, com o
   recorte guardando o telhado da casa de madeira. */
.galn--larga .galn__main {
  aspect-ratio: 16 / 9;
}

.galn--larga .galn__main img {
  object-position: center 35%;
}

/* ============================================================
   13. AJUSTE R7B: FILTRO QUENTE DE FATO (out/2026)
   ------------------------------------------------------------
   As 29 fotos do pacote foram refeitas com um filtro quente mais
   forte que o da rodada 7, no próprio arquivo. Aqui sai a camada
   que esfriava parte delas na página, e o filtro chega pelo CSS
   às fotos que não estão no pacote.
   ============================================================ */

/* --- 13.1 Fotos com trama (Projetos e BIX em pauta, na home) ------
   Por cima delas havia uma camada azul em luz suave, a 50%, que
   anulava o tom quente (é nesse bloco que está a foto da cozinha da
   Casa São Paulo). A camada sai; o degradê escuro das bordas
   (::after) continua. */
.dither::before {
  content: none;
}

/* --- 13.2 Fotos de fora do pacote ---------------------------------
   Os artigos de exemplo do BIX em pauta (home) e do blog usam fotos
   do Unsplash. Nelas o filtro vai pelo CSS, numa combinação que
   chega perto do filtro aplicado nos arquivos. As fotos reais dos
   artigos, quando entrarem nesses lugares, recebem o mesmo filtro
   por aqui, então não precisam passar pelo filtro no arquivo. */
:root {
  --filtro-quente: sepia(0.34) saturate(1.8) hue-rotate(2deg);
}

/* Preserve the existing poster treatment; soften only the playing video's filter. */
#metodo .metodo__video {
  filter: sepia(0.17) saturate(1.35) hue-rotate(1deg) brightness(1.08) contrast(1.03);
}

#metodo .metodo__poster {
  filter: var(--filtro-quente) brightness(1.14) contrast(1.05);
}

.journal__feature .feat-img .dither img {
  filter: var(--filtro-quente) saturate(1.06) contrast(1.03);
}

.journal__feature:hover .feat-img.active .dither img {
  filter: var(--filtro-quente) saturate(1.14) contrast(1.04);
}

/* o bix-blog.css entra depois deste arquivo no blog, daí o .bl-card */
.bl-card .bl-card__media img {
  filter: var(--filtro-quente) saturate(0.85) contrast(1.03);
}