/* ============================================================
   BIX — camada de REVISÃO DA HOMEPAGE (rodada do cliente, jul/2026)
   Carregar depois de bix.css e antes de bix-pages.css.
   Mexe apenas na home; nenhuma regra aqui afeta páginas internas.
   ============================================================ */
/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* cinza pedido na revisão (slide 1) — substitui o branco puro do topo */
  --stone: #e9ecea;
  --stone-2: #f2f4f2;
  --stone-3: #f7f8f7;
  --line-stone: rgba(14, 81, 106, 0.1);

  /* nunca branco puro: o "papel" do site inteiro é um cinza bem leve.
     Tudo que usa var(--paper)/var(--paper-soft) herda automaticamente. */
  --paper: #f7f8f7;
  --paper-soft: #f2f4f2;
}

/* ============================================================
   2. HOMEPAGE — ajustes da revisão
   ============================================================ */

/* --- slide 1: fundo do hero deixa de ser branco puro --------- */
.hero {
  background: linear-gradient(
    180deg,
    var(--stone) 0%,
    var(--stone) 54%,
    var(--stone-2) 82%,
    var(--paper) 100%
  );
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 78% 0%, rgba(249, 179, 33, 0.07), transparent 62%),
    radial-gradient(90% 60% at 0% 20%, rgba(14, 81, 106, 0.05), transparent 60%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* --- slide 2: vídeo do hero com mais brilho e contraste ------ */
.hero__video,
.hero__poster {
  filter: brightness(1.22) contrast(1.07) saturate(1.05);
}

.hero__scrim {
  opacity: 0.55 !important;
}

.metodo__video,
.metodo__poster {
  filter: brightness(1.14) contrast(1.05);
}

/* --- slide 3: big numbers em 2 linhas, com ícones ------------ */
.figures {
  background: linear-gradient(180deg, var(--paper) 0%, var(--stone-3) 100%);
}

/* "vs. construção convencional" removido do markup; a barra fica só com o rótulo */
.figures__bar {
  justify-content: flex-start;
  gap: 1.2em;
}

.figures__bar .rule {
  flex: 1;
  height: 1px;
  background: var(--hair);
  display: block;
}

.figrow + .figrow {
  border-top: 1px solid var(--hair);
}

.figrow--b::after {
  display: none;
}

.fig {
  padding-top: clamp(28px, 3.2vw, 48px);
}

.fig__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-stone);
  border-radius: 50%;
  color: var(--blue);
  margin-bottom: clamp(18px, 2vw, 26px);
  background: var(--paper);
  transition:
    background 0.55s var(--out),
    color 0.55s var(--out),
    border-color 0.55s var(--out),
    transform 0.55s var(--out);
}

.fig:hover .fig__ico {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--blue-950);
  transform: translateY(-3px);
}

.fig__num {
  font-size: clamp(2.6rem, 6vw, 5.6rem);
}

.figrow--b .fig__num {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
}

.fig__num .u.u--sm {
  font-size: 0.32em;
}

/* --- slide 4: coluna de texto da direita removida ------------ */
.philos__grid--solo .philos__lead {
  grid-column: 1 / 11;
  padding-right: clamp(20px, 4vw, 90px);
}

.philos__grid--solo .statement {
  font-size: clamp(1.9rem, 3.6vw + 0.3rem, 4.5rem);
  max-width: 22ch;
}

@media (max-width: 900px) {
  .philos__grid--solo .philos__lead {
    grid-column: 1 / -1;
  }
}

/* --- slide 5: etapas com bloco "Jornada" --------------------- */

/* Enquanto pinada, a seção inteira cabe em uma tela: altura fixa de
   100svh e o card deriva a altura do espaço que sobra, em vez de
   empurrar o conteúdo para fora do viewport. */
.process.is-pinned {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(12px, 2vh, 30px);
}

/* CRÍTICO: como .process virou flex container, os filhos passaram a
   ser flex items. O .shell tem margin-inline:auto, e margem automática
   em flex item faz a largura virar shrink-to-fit e centralizar — foi o
   que desalinhou o cabeçalho da seção. align-self:stretch devolve a
   largura total e o alinhamento da grade da home. */
.process.is-pinned > .shell,
.process.is-pinned > .process-viewport {
  align-self: stretch;
  width: 100%;
}

.process.is-pinned .shell {
  padding-top: 0;
  flex: 0 0 auto;
}

.process.is-pinned .process__head {
  margin-bottom: clamp(14px, 2.2vh, 34px);
}

.process.is-pinned .process__head h2 {
  font-size: clamp(1.4rem, 1.6vw + 0.6rem, 2.4rem);
}

.process.is-pinned .process-viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* flex-shrink 0: o track precisa manter a largura max-content, senão
   o flex comprimiria os cards */
.process.is-pinned .process-track {
  flex: 0 0 auto;
  height: 100%;
  align-items: stretch;
  padding-bottom: clamp(14px, 2.2vh, 34px);
}

.process.is-pinned .pstep {
  min-height: 0;
  height: 100%;
}

/* a moldura da foto é a peça elástica: ela encolhe para o texto
   caber, nunca o contrário */
.process.is-pinned .pstep__media {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: clamp(72px, 13vh, 210px);
  overflow: hidden;
}

/* quando as fotos reais das etapas entrarem no lugar do placeholder */
.pstep__media img,
.pstep__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.process.is-pinned .shell--btm {
  padding-block: 0;
  margin-top: clamp(10px, 1.6vh, 22px);
}

/* PONTOS DO TOPO — o marcador de cada etapa é um ::before em
   top:-27px. O track tinha padding-top de 26px, então o ponto nascia
   1px acima da área visível e o overflow:hidden do viewport o cortava
   ao meio. Agora o espaço acima do card e a posição do ponto vêm da
   mesma variável, e o ponto fica centrado na linha que liga as etapas
   (que está em top:4px, ou seja, centro em 4.5px). */
.process-track {
  --dot: 30px;
  padding-top: var(--dot);
}

.pstep::before {
  top: calc(-1 * var(--dot) + 0.5px);
}

.pstep {
  flex: 0 0 clamp(300px, 32vw, 470px);
  min-height: clamp(440px, 62vh, 580px);
}

.pstep p {
  max-width: 44ch;
}
/* A Jornada é o "segundo andar" do card: fica recolhida e só abre
   no card que está no centro do carrossel (.is-focus). Isso evita
   quatro blocos de texto competindo na tela ao mesmo tempo.
   Só transform e opacity — nada de altura, senão o pin recalcularia
   a distância do scroll horizontal. */
.pstep__journey {
  position: relative;
  margin-top: clamp(22px, 3vh, 40px);
  padding-top: clamp(22px, 2.8vh, 34px);
  border-top: 1px solid var(--hair-d);
  isolation: isolate;
}

/* traço amarelo que se desenha por cima da régua */
.pstep__journey::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--expo);
}

.pstep.is-focus .pstep__journey::after {
  transform: scaleX(1);
}

/* clarão que varre o bloco uma vez, no momento da abertura */
.pstep__journey::before {
  content: '';
  position: absolute;
  inset: -1px -6% 0 -6%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(249, 179, 33, 0.16) 45%,
    transparent 72%
  );
  opacity: 0;
  transform: translateX(-42%);
}

.pstep.is-focus .pstep__journey::before {
  animation: journeySweep 2.2s var(--out) 0.18s;
}

@keyframes journeySweep {
  0% {
    opacity: 0;
    transform: translateX(-42%);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

/* Fora do foco a Jornada NÃO some — ela fica em estado fantasma.
   Espaço vazio lê como bug; texto apagado lê como hierarquia. */
.pstep__journey .k {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.8em;
  opacity: 0.34;
  transition: opacity 0.85s var(--out);
}

.pstep.is-focus .pstep__journey .k {
  opacity: 1;
}

.pstep__journey p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.58;
  font-weight: 300;
  opacity: 0.18;
  transition: opacity 1.05s var(--out) 0.12s;
}

.pstep.is-focus .pstep__journey p {
  opacity: 1;
}

/* a descrição principal também recua fora do foco */
.pstep > p {
  transition: color 0.85s var(--out);
}

.pstep:not(.is-focus) > p {
  color: rgba(255, 255, 255, 0.44);
}

.pstep.is-focus > p {
  color: rgba(255, 255, 255, 0.72);
}

.pstep h3 {
  transition: color 0.8s var(--out);
}

.pstep:not(.is-focus) h3 {
  color: rgba(255, 255, 255, 0.6);
}

/* --- slide 6: cards de projeto com meta uniforme + ícones ---- */
.proj__meta {
  gap: clamp(10px, 1.4vw, 22px) !important;
  flex-wrap: wrap;
}

.proj__meta .m {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

.proj__meta .m svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--yellow-deep);
  opacity: 0.95;
}

.proj__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--hair);
}

.proj__spec .k {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.proj__spec .k svg {
  width: 13px;
  height: 13px;
  color: var(--yellow-deep);
}

.proj__spec .v {
  margin-top: 0.55em;
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

/* --- slide 8+9: pilares do método no formato de cards -------- */
/* a seção "Vantagens" saiu; o formato dela foi aplicado aos pilares,
   agora com imagem dentro do card. */
.pillars {
  position: relative;
  background: var(--blue-950);
  padding-block: clamp(72px, 9vw, 132px) clamp(90px, 12vw, 170px);
}

.advcard--media {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.advcard--media .advcard__pic {
  position: relative;
  aspect-ratio: 16/8.4;
  overflow: hidden;
}

.advcard--media .advcard__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.2s var(--out);
}

.advcard--media:hover .advcard__pic img {
  transform: scale(1);
}

.advcard--media .advcard__pic .num {
  position: absolute;
  left: clamp(14px, 1.4vw, 20px);
  bottom: clamp(12px, 1.2vw, 16px);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.advcard--media .advcard__in {
  padding: clamp(24px, 2.8vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
}

.advcard--media .advcard__top {
  margin-bottom: 0;
}

.advcard--media .advcard__body {
  margin-top: 0;
  max-width: 46ch;
}

.advcard--media h3 {
  font-size: clamp(1.35rem, 1.5vw + 0.5rem, 2.05rem);
}

.advcard--media p {
  font-size: 1rem;
}

/* aside dos pilares — herda o tratamento escuro que era da seção Vantagens */
.pillars .adv2__aside .h2 {
  color: #fff;
}

.pillars .adv2__track {
  color: rgba(255, 255, 255, 0.45);
}

.pillars .adv2__track .lbl {
  color: rgba(255, 255, 255, 0.7);
}

.pillars .adv2__bar {
  background: rgba(255, 255, 255, 0.16);
}

/* links claros sobre fundo escuro */
.link-u.on-dark {
  color: var(--yellow);
}

.sec--dark .link-u {
  color: var(--yellow);
}

/* ---------------- responsivo da home ---------------- */
@media (max-width: 900px) {
  .proj__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .figrow--b {
    border-top: 0;
  }
  .advcard--media {
    min-height: 0 !important;
    padding: 0;
  }
}

/* ============================================================
   DESTAQUE DOS TÍTULOS — tarja amarela + peso
   ------------------------------------------------------------
   Quarta e definitiva. As três anteriores tentaram destacar sem
   sair da cor do texto (amarelo sólido, halo, traço embaixo) e
   todas esbarraram no mesmo ponto: o amarelo da marca não tem
   contraste para carregar texto sobre fundo claro.

   A solução inverte o problema. Em vez de o amarelo colorir a
   letra, ele vira o fundo — e a palavra sobe para preto e peso
   600 por cima. Aí o contraste é o maior possível de toda a
   página, e o amarelo aparece com a saturação cheia, no papel
   que ele cumpre bem: marcação, não tipografia.

   O preto é #111, não o --ink (#0E2A33). O ink tem fundo de
   petróleo, e sobre amarelo essa tinta esverdeia; preto neutro
   fica limpo.

   box-decoration-break: clone é o que faz a tarja se refazer em
   cada linha quando a frase quebra — sem ele, a quebra deixaria
   um retângulo só, esticado e furado no meio.
   ------------------------------------------------------------
   TRÊS VARIANTES, trocáveis por _src/_destaque.py:
     (padrão)        tarja amarela com a palavra em preto
     .emph--marker   tarja translúcida, palavra na cor do título
     .emph--solid    palavra pintada de amarelo (versão original)
   ============================================================ */

:root {
  --emph-ink: #111;
  --emph-h: 0.78em;
}

/* Estado padrão: tarja JÁ aberta. Se o JS não rodar, o destaque
   continua lá — nunca se depende da animação para ele existir.
   É o bix.js que marca o <body> com .js-anim e recolhe a tarja,
   devolvendo-a na entrada. */
.hero__title .accent,
.statement em {
  color: var(--emph-ink);
  font-weight: 600;
  font-style: normal;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 54%;
  background-size: 100% var(--emph-h);
  padding-inline: 0.16em;
  margin-inline: -0.08em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

body.js-anim .hero__title .accent,
body.js-anim .statement em {
  background-size: 0% var(--emph-h);
}

/* a tarja passa como um marca-texto quando a frase entra em cena */
body.js-anim .hero__title.is-lit .accent,
body.js-anim .statement em.is-drawn {
  background-size: 100% var(--emph-h);
}

/* sobre o petróleo nada muda: a tarja amarela já resolve o
   contraste sozinha, e o preto continua legível sobre ela */
.xp .statement em {
  color: var(--emph-ink);
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .accent,
  .statement em {
    transition: none;
  }
}

/* --- variante: marca-texto translúcido ---------------------- */
body.emph--marker .hero__title .accent,
body.emph--marker .statement em {
  color: var(--ink);
  font-weight: 400;
  background-image: linear-gradient(rgba(249, 179, 33, 0.34), rgba(249, 179, 33, 0.34));
}

body.emph--marker .xp .statement em {
  color: #fff;
  background-image: linear-gradient(rgba(249, 179, 33, 0.3), rgba(249, 179, 33, 0.3));
}

/* --- variante: amarelo sólido (versão original) -------------- */
body.emph--solid .hero__title .accent,
body.emph--solid .statement em {
  color: var(--yellow-deep);
  font-weight: inherit;
  background-image: none;
  padding-inline: 0;
  margin-inline: 0;
}

body.emph--solid .xp .statement em {
  color: var(--yellow);
}

/* A tarja extrapola a caixa de linha. No hero as linhas ficam
   dentro de máscaras overflow:hidden para o reveal, por isso o JS
   marca #heroTitle com .is-lit — é o mesmo gancho que abre a
   tarja, e ele dispara junto com a chegada das linhas, não no fim
   do timeline inteiro (era daí que vinha o atraso). */
.hero__title.is-lit .cl {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .cl {
    overflow: visible;
  }
}

/* ============================================================
   PROJETOS — a ficha técnica não pode cruzar a linha da grade
   ------------------------------------------------------------
   A coluna da meta era `auto`, ou seja, crescia até o max-content:
   com os quatro itens em nowrap ela virava uma linha só, larga o
   bastante para atravessar a divisória em 50% e encostar na borda.

   Passa a ser uma trilha limitada a 40% da largura da linha. Nessa
   medida o bloco fica sempre à direita da divisória (a coluna do
   "+" e o gap consomem o resto), e os itens quebram em duas ou
   três linhas alinhadas à direita em vez de esticar.
   ============================================================ */

.proj__row {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 40%) auto;
}

.proj__meta {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
  align-content: center;
}

.proj__meta .m {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* entre 860 e 1180 sobra pouca largura: a meta some da linha e a
   ficha continua disponível dentro do painel aberto */
@media (max-width: 1180px) and (min-width: 861px) {
  .proj__row {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 40%) auto;
    gap: clamp(12px, 2vw, 28px);
  }

  .proj__meta {
    font-size: 0.6rem;
  }
}