/* ==========================================================================
   BLOCOS cb-* DO ARTIGO CHINA/PIX  (revisao de casca, 2026-08-18)

   O que mudou e por que:

   1. RAIO E BORDA. Todos os blocos passaram a 14px de raio com overflow
      hidden, o mesmo da capa do hero e dos cartoes da listagem /blog/.
      Antes eram caixas de canto vivo, herdadas do desenho anterior.

   2. PRETO. #0b0b0b e #222 sairam para o #1A1816 do conjunto. Nos blocos
      claros, as divisorias #d8d8cf e #222 viraram a linha #E6E0D2.

   3. ROSA, e aqui a regra inverte conforme o fundo (medido em python,
      2026-08-18). Sobre CLARO, #FF2D8A com texto branco da 3.5 e reprova:
      os fundos chapados passaram para #E30065, que da 4.71 com branco.
      Sobre o PRETO #1A1816 e o contrario: #E30065 cai para 3.76 e quem
      passa e o #FF2D8A, com 5.05. Por isso os blocos escuros seguem no
      rosa claro e so os chapados claros usam o rosa forte.
      Detalhe do .cb-thesis: sobre #E30065 NENHUMA cor escura alcanca 4.5
      (o preto puro para em 4.46), entao o <strong> que era #160009 virou
      branco e a hierarquia fica por tamanho.

   4. HERANCA DE COR. O <style id="ag-artigo"> da pagina traz
      ".guide-page .guide-article p, li { color: ... }" com 0,2,1. Essa
      regra alcanca os <p> e <li> DENTRO destes blocos e pintaria texto
      escuro sobre fundo escuro, sem erro nenhum no console. As regras de
      devolucao ficam no fim deste arquivo, com 0,3,1, e repoem tambem os
      tamanhos de fonte proprios que aquela regra atropelava.

   5. .cb-editorial-photo-hero saiu junto com o elemento: o <img> apontava
      para /assets/blog/china-pix-editorial.webp, que nao existe em disco.
      O object-position que a classe carregava era enquadramento daquele
      arquivo especifico e nao faz sentido na foto que entrou no lugar.
   ========================================================================== */

.guide-article .cb-bridge,
.guide-article .cb-stack {
  margin: 2.5rem 0 0;
}

.cb-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr) minmax(0, 1fr);
  border: 1px solid #2E2A26;
  border-radius: 14px;
  background:
    linear-gradient(115deg, rgba(255, 45, 138, .16), transparent 38%),
    #1A1816;
  color: #fff;
  overflow: hidden;
}

.cb-bridge-country {
  min-height: 245px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.cb-bridge-country::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(255, 255, 255, .12);
  pointer-events: none;
}

.cb-bridge-country strong,
.cb-stack-title strong {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.cb-bridge-country small {
  margin-top: .65rem;
  color: rgba(255, 255, 255, .68);
}

.cb-code {
  width: 3.3rem;
  height: 3.3rem;
  margin-bottom: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  font: 700 .75rem/1 var(--font-mono, monospace);
  letter-spacing: .12em;
}

/* .cb-bridge-br era classe sem nenhuma regra: o lado BR pegava a lima do
   .cb-code base e so o lado CN tinha declaracao propria, entao a simetria do
   par existia no HTML e nao no CSS. Agora os dois estao escritos. O lima
   passou de #d7ff00 para o #DFFF00 do conjunto (15,55 sobre o preto). */
.cb-bridge-br .cb-code {
  color: #DFFF00;
}

.cb-bridge-cn .cb-code {
  color: #FF2D8A;
}

.cb-bridge-center {
  padding: 1.5rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border-inline: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}

/* .48 dava 5.0 sobre o preto; a .62 sobe para 7.37 e sobra margem para um
   texto de 9,6px em caixa alta. */
.cb-bridge-center span {
  color: rgba(255, 255, 255, .62);
  font: 600 .6rem/1 var(--font-mono, monospace);
  letter-spacing: .18em;
}

.cb-bridge-center b {
  max-width: 11rem;
  font-size: .85rem;
  letter-spacing: .07em;
}

.cb-bridge-center i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(#FF2D8A, #DFFF00);
}

.cb-bridge figcaption,
.cb-stack figcaption {
  grid-column: 1 / -1;
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  line-height: 1.5;
}

.cb-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
  border: 1px solid var(--ag-linha, #E6E0D2);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.cb-evidence article {
  min-height: 210px;
  padding: 1.65rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ag-texto, #3A3630);
}

.cb-evidence article + article {
  border-left: 1px solid var(--ag-linha, #E6E0D2);
  background: var(--ag-creme, #FAF5EB);
}

.cb-evidence strong {
  margin-top: auto;
  color: var(--ag-preto, #1A1816);
  font-size: 1.15rem;
}

.cb-evidence p {
  margin: .7rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
}

.cb-status {
  padding: .45rem .75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 700 .62rem/1 var(--font-mono, monospace);
  letter-spacing: .12em;
}

.cb-status-ok {
  color: #315800;
  background: rgba(215, 255, 0, .32);
}

.cb-status-wait {
  color: #b1004c;
  background: rgba(255, 45, 138, .08);
}

.cb-stack {
  border: 1px solid #2E2A26;
  border-radius: 14px;
  overflow: hidden;
  background: #1A1816;
  color: #fff;
}

.cb-stack-title {
  padding: 2rem;
}

.cb-stack-title span {
  display: block;
  margin-bottom: .8rem;
  color: #DFFF00;
  font: 600 .62rem/1 var(--font-mono, monospace);
  letter-spacing: .18em;
}

.cb-stack ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.cb-stack li {
  min-height: 150px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.cb-stack li + li {
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.cb-stack li span {
  color: #FF2D8A;
  font: 700 .65rem/1 var(--font-mono, monospace);
}

.cb-stack li b {
  margin-top: auto;
  font-size: .74rem;
  letter-spacing: .04em;
}

.cb-stack li small {
  color: rgba(255, 255, 255, .66);
  font-size: .66rem;
  line-height: 1.35;
}

.cb-opportunity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
  border: 1px solid var(--ag-linha, #E6E0D2);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.cb-opportunity article {
  min-height: 190px;
  padding: 1.5rem;
  position: relative;
  color: var(--ag-texto, #3A3630);
}

.cb-opportunity article:nth-child(2n) {
  border-left: 1px solid var(--ag-linha, #E6E0D2);
}

.cb-opportunity article:nth-child(n + 3) {
  border-top: 1px solid var(--ag-linha, #E6E0D2);
}

.cb-opportunity article:nth-child(3) {
  background: #E30065;
  color: #fff;
}

.cb-opportunity article:nth-child(4) {
  background: #DFFF00;
  color: #1A1816;
}

.cb-opportunity span {
  font: 700 .65rem/1 var(--font-mono, monospace);
}

.cb-opportunity strong {
  display: block;
  margin-top: 2.4rem;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.cb-opportunity p {
  margin: .7rem 0 0;
  max-width: 22rem;
  font-size: .82rem;
  line-height: 1.45;
}

.cb-roadmap {
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
  align-items: center;
  margin-top: 2.5rem;
  padding: 1.2rem;
  border: 1px solid #2E2A26;
  border-radius: 14px;
  background: #1A1816;
  color: #fff;
}

.cb-roadmap p {
  min-height: 135px;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
}

.cb-roadmap span {
  color: #FF2D8A;
  font: 700 .6rem/1 var(--font-mono, monospace);
  letter-spacing: .12em;
}

.cb-roadmap strong {
  margin-top: auto;
  font-size: 1rem;
}

.cb-roadmap small {
  margin-top: .35rem;
  color: rgba(255, 255, 255, .66);
}

.cb-roadmap i {
  height: 1px;
  background: linear-gradient(90deg, #FF2D8A, #DFFF00);
  position: relative;
}

.cb-roadmap i::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid #DFFF00;
  border-right: 1px solid #DFFF00;
  transform: translateY(-50%) rotate(45deg);
}

.cb-thesis {
  margin: 2.5rem 0 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 0;
  border-radius: 14px;
  background: #E30065;
  color: #fff;
}

.cb-thesis span {
  font: 700 .62rem/1 var(--font-mono, monospace);
  letter-spacing: .18em;
}

.cb-thesis p {
  max-width: 36rem;
  margin: 2rem 0 .45rem;
  color: #fff;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: .98;
  letter-spacing: -.045em;
}

/* Era #160009. Sobre o rosa forte, nenhuma cor escura chega a 4.5: o preto
   puro para em 4.46. Como o clamp desce a 16px no celular, a linha entra na
   faixa de texto pequeno e precisa do branco (4.71). A hierarquia contra o
   <p> acima fica por corpo e por peso, nao por cor. */
.cb-thesis strong {
  display: block;
  max-width: 34rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.35rem);
}

@media (max-width: 760px) {
  .cb-bridge {
    grid-template-columns: 1fr;
  }

  .cb-bridge-country {
    min-height: 205px;
  }

  .cb-bridge-center {
    min-height: 170px;
    border: 0;
    border-block: 1px solid rgba(255, 255, 255, .12);
  }

  .cb-bridge-center i {
    height: 25px;
  }

  .cb-evidence,
  .cb-opportunity {
    grid-template-columns: 1fr;
  }

  .cb-evidence article + article,
  .cb-opportunity article:nth-child(2n) {
    border-left: 0;
  }

  .cb-evidence article + article,
  .cb-opportunity article:nth-child(n + 2) {
    border-top: 1px solid var(--ag-linha, #E6E0D2);
  }

  .cb-stack ol {
    grid-template-columns: 1fr;
  }

  .cb-stack li {
    min-height: 95px;
  }

  .cb-stack li + li {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .cb-stack li b {
    margin-top: .8rem;
  }

  .cb-roadmap {
    grid-template-columns: 1fr;
  }

  .cb-roadmap i {
    width: 1px;
    height: 34px;
    margin-left: 50%;
    background: linear-gradient(#FF2D8A, #DFFF00);
  }

  .cb-roadmap i::after {
    right: auto;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-bridge *,
  .cb-stack *,
  .cb-opportunity *,
  .cb-roadmap * {
    animation: none !important;
    transition: none !important;
  }
}
/* Moldura igual a da capa do hero (.ag-capa, no <style id="ag-artigo"> da
   pagina): raio 14, borda #E6E0D2, legenda POR FORA em #6B655C. Antes a foto
   vinha dentro de um painel #0a0a0a com legenda branca translucida, unica
   ilha escura no meio de uma pagina creme.

   height:auto e obrigatorio, nao e enfeite. O <img> traz height="900", que o
   navegador aplica como height:900px pelo origin de presentational hints. Com
   a altura definida, aspect-ratio e ignorado e a foto estica. Esta pagina usa
   classe propria, entao nao herda o .guide-shot img { height:auto } do
   guide.css como as outras capas de guia. */
.cb-editorial-photo {
  margin: clamp(1.8rem, 4vw, 3rem) 0;
}

.cb-editorial-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--ag-linha, #E6E0D2);
  border-radius: 14px;
  background: var(--ag-creme, #FAF5EB);
}

.cb-editorial-photo figcaption {
  max-width: 62ch;
  margin: 12px 0 0;
  padding: 0;
  border-top: 0;
  color: var(--ag-suave, #6B655C);
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
   DEVOLUCAO DE COR E CORPO DENTRO DOS BLOCOS cb-*
   ".guide-page .guide-article p" e ".guide-page .guide-article li", do
   <style id="ag-artigo">, tem 0,2,1 e alcancam diretamente os <p> e <li>
   destes blocos, ganhando das regras 0,1,1 daqui de cima. Sem este trecho o
   texto do roadmap, da tese e da escada nasce escuro sobre fundo escuro, e o
   tamanho da tese cai de 3rem para 17px. Estes seletores tem 0,3,1 e vencem
   por especificidade, nao por ordem de carga.
   ========================================================================== */
.guide-page .guide-article .cb-evidence p {
  color: inherit;
  font-size: .92rem;
  line-height: 1.55;
}

.guide-page .guide-article .cb-opportunity p {
  color: inherit;
  font-size: .86rem;
  line-height: 1.45;
}

.guide-page .guide-article .cb-roadmap p,
.guide-page .guide-article .cb-stack li {
  color: inherit;
}

.guide-page .guide-article .cb-thesis p {
  color: inherit;
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: .98;
}