/* ============================================================
   BIX — SISTEMA DAS PÁGINAS INTERNAS  (v2 · jul/2026)
   ============================================================
   Reescrito do zero. Princípios desta versão:

   1) NADA de grade absoluta (.colgrid). Toda linha vertical ou
      horizontal é BORDA de um elemento real — por definição
      alinhada com o conteúdo, nunca atravessando texto.
   2) Cada página tem a sua própria direção de arte. Nenhuma
      repete o ritmo da home.
   3) Guardas de overflow globais (min-width:0, break-word,
      reveal por palavra) para que nenhum texto seja cortado.

   Ordem: tokens · guardas · peças comuns · página a página · responsivo
   ============================================================ */

/* ============================================================
   TOKENS DE PÁGINA
   ============================================================ */
:root {
  /* MESMA grade da home: o container das internas (.wrap) usa
     exatamente os valores do .shell, para que a margem lateral e o
     limite de largura coincidam em todas as páginas. */
  --pg-pad: var(--pad);
  --pg-maxw: var(--maxw);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  /* ESCALA TIPOGRÁFICA ÚNICA
     h1 76/40 · h2 44/28 · h3 28/20 · h4 20/16 · lead 16 · body 14 · sm/mono 12 */
  --pg-d1: clamp(40px, 5.2vw, 76px);
  --pg-d2: clamp(28px, 3vw, 44px);
  --pg-d3: clamp(20px, 1.8vw, 28px);
  --pg-h4: clamp(16px, 1.2vw, 20px);
  --pg-lead: 16px; /* parágrafo de apoio/destaque */
  --pg-body: 14px; /* corpo corrido — única exceção à regra dos
                           múltiplos de 4 (12 é ilegível, 16 era grande);
                           para voltar a 16, mude só este token */
  --pg-sm: 12px; /* legendas, labels de números, notas */
  --pg-mono: 12px;

  /* respiro vertical padrão das seções internas */
  --sec-y: clamp(56px, 7vw, 104px);
}

/* ============================================================
   NAV EM FUNDO ESCURO
   ------------------------------------------------------------
   Dois casos, um mesmo conjunto de regras:

   .is-darktop  → hero escuro, nav transparente. Vale só enquanto
                  o nav não rolou; depois ele fica branco sozinho.
                  (Método, páginas de case)

   .is-navdark  → o fundo escuro atravessa a página inteira, então
                  o nav precisa ficar escuro SEMPRE, inclusive
                  rolado. (Contato: o painel direito é sticky e
                  acompanha o scroll — um nav branco perderia
                  contraste na metade direita a página toda.)
   ============================================================ */
body.is-navdark .nav,
body.is-navdark .nav.scrolled {
  background: var(--blue-950);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.nav[data-light-logo='1'] .brand__logo--d {
  display: none;
}

.nav[data-light-logo='1'] .brand__logo--l {
  display: block;
}

body:not(.menu-open) .nav[data-scroll-logo='1'].scrolled .brand__logo--d {
  display: block;
}

body:not(.menu-open) .nav[data-scroll-logo='1'].scrolled .brand__logo--l {
  display: none;
}

/* Keep the default dark logo outside cases/contact until the mobile menu opens. */
body:not(.menu-open) .nav[data-light-logo='0'] .brand__logo--d {
  display: block;
}

body:not(.menu-open) .nav[data-light-logo='0'] .brand__logo--l {
  display: none;
}

.nav[data-case-page='1'].scrolled {
  background: var(--blue-950);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

body.is-darktop .nav:not(.scrolled):not([data-case-page='1']) .nav__links a,
body.is-navdark .nav .nav__links a {
  color: rgba(255, 255, 255, 0.74);
}

.nav[data-case-page='1'] .nav__links a {
  color: #ffffffbd;
}

.nav[data-case-page='1'] .nav__links a:hover,
.nav[data-case-page='1'] .nav__links a.active {
  color: #fff;
}

body.is-darktop .nav:not(.scrolled) .nav__links a:hover,
body.is-darktop .nav:not(.scrolled) .nav__links a.active,
body.is-navdark .nav .nav__links a:hover,
body.is-navdark .nav .nav__links a.active {
  color: #fff;
}

body.is-darktop .nav:not(.scrolled) .burger span,
body.is-navdark .nav .burger span,
.nav[data-case-page='1'] .burger span {
  background: #fff;
}

/* o CTA do nav nasce com texto em tinta escura — some no escuro */
body.is-darktop .nav:not(.scrolled) .btn--primary,
body.is-navdark .nav .btn--primary,
.nav[data-case-page='1'] .btn--primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

body.is-darktop .nav:not(.scrolled) .btn--primary:hover,
body.is-navdark .nav .btn--primary:hover,
.nav[data-case-page='1'] .btn--primary:hover {
  color: var(--blue-950);
}

/* ============================================================
   GUARDAS DE OVERFLOW
   Aplicadas a tudo que vive dentro de .pg (todas as internas).
   ============================================================ */
.pg,
.pg * {
  min-width: 0;
  /* impede o "blowout" clássico de grid/flex */
}

.pg img,
.pg video,
.pg svg {
  max-width: 100%;
}

.pg h1,
.pg h2,
.pg h3,
.pg h4 {
  overflow-wrap: break-word;
  text-wrap: balance;
  margin: 0;
}

.pg p {
  overflow-wrap: break-word;
  margin: 0;
}

/* container único das internas */
.wrap {
  width: 100%;
  max-width: var(--pg-maxw);
  margin-inline: auto;
  padding-inline: var(--pg-pad);
}

.wrap--narrow {
  max-width: 1180px;
}

/* reveal por palavra — substitui as quebras de linha fixas com
   overflow:hidden, que cortavam texto em larguras intermediárias.
   O padding/margin compensa o corte de descendentes (g, p, q). */
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.split .w > i {
  display: inline-block;
  font-style: inherit;
}

/* ============================================================
   PEÇAS COMUNS (usadas com pesos diferentes em cada página)
   ============================================================ */

/* rótulo mono */
.kicker {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}

.kicker::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--yellow);
  flex: 0 0 auto;
}

.kicker--d {
  color: rgba(255, 255, 255, 0.66);
}

/* migalhas */
.crumbs {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  display: flex;
  gap: 0.7em;
  flex-wrap: wrap;
}

.crumbs a {
  color: var(--ink-45);
  transition: color 0.35s var(--ease-out);
}

.crumbs a:hover {
  color: var(--blue);
}

.crumbs .s {
  color: var(--yellow-deep);
}

.crumbs--d,
.crumbs--d a {
  color: rgba(255, 255, 255, 0.5);
}

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

/* rodapé de CTA — comum, mas com peso tipográfico maior que na home */
.endcta {
  position: relative;
  background: var(--blue-950);
  color: #fff;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.endcta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 120% at 88% 0%, rgba(249, 179, 33, 0.13), transparent 60%);
}

.endcta__in {
  position: relative;
  z-index: 1;
  padding-block: var(--sec-y);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(26px, 4vw, 80px);
  align-items: end;
}

.endcta h2 {
  font-size: var(--pg-d2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.03;
  color: #fff;
  max-width: 20ch;
}

.endcta p {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 300;
  font-size: var(--pg-lead);
  line-height: 1.55;
  max-width: 44ch;
}

.endcta__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 22px);
  justify-self: end;
}

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

/* ============================================================
   PÁGINA 1 · SOBRE — "Manifesto"
   ------------------------------------------------------------
   Direção: editorial, quase sem imagem no primeiro terço.
   Tipografia gigante alinhada à esquerda, muito respiro.
   Assinatura: os 5 princípios como ÍNDICE que expande no hover
   (linhas = bordas das próprias linhas, sempre alinhadas).
   ============================================================ */

.mf-hero {
  background: var(--stone);
  padding-top: clamp(128px, 17vh, 200px);
  padding-bottom: clamp(48px, 7vw, 96px);
  position: relative;
}

.mf-hero__in {
  display: grid;
  gap: clamp(30px, 5vw, 64px);
}

.mf-hero h1 {
  font-size: var(--pg-d1);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 17ch;
}

.mf-hero h1 b {
  font-weight: 600;
}

.mf-hero h1 em {
  font-style: normal;
  color: var(--yellow-deep);
}

/* Seção 1 — parágrafo de abertura + "Onde atuamos", lado a lado.
   Os dois pertencem à mesma seção no documento. */
.mf-s1 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line-stone);
}

p.mf-s1__lead {
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 44ch;
}

.mf-s1__where {
  border-left: 1px solid var(--line-stone);
  padding-left: clamp(20px, 2.6vw, 38px);
}

.mf-s1__where .k {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 1em;
}

.mf-s1__where p {
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 42ch;
}

/* faixa de imagem entre as seções 1 e 2 (respiro, sem texto) */
.mf-band {
  background: var(--stone);
  padding-bottom: clamp(40px, 6vw, 84px);
}

/* ÍNDICE DE PRINCÍPIOS */
.mf-vals {
  background: var(--paper);
  padding-block: var(--sec-y);
}

.mf-vals__head {
  max-width: 72ch;
  padding-bottom: clamp(24px, 3vw, 40px);
}

.mf-vals__head h2 {
  font-size: var(--pg-d2);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--ink);
}

.mf-vals__head p {
  margin-top: 20px;
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 56ch;
}

.mf-list {
  border-top: 1px solid var(--hair);
}

.mf-item {
  border-bottom: 1px solid var(--hair);
  position: relative;
}

.mf-item__bar {
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--yellow);
  transition: width 0.8s var(--ease-out);
}

.mf-item.is-on .mf-item__bar {
  width: 100%;
}

.mf-item__row {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 84px) minmax(0, 1fr) 40px;
  align-items: baseline;
  gap: clamp(12px, 2vw, 28px);
  padding-block: clamp(20px, 2.6vw, 34px);
  cursor: pointer;
}

.mf-item__n {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  color: var(--ink-30);
  transition: color 0.45s var(--ease-out);
}

.mf-item.is-on .mf-item__n {
  color: var(--yellow-deep);
}

.mf-item__t {
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--ink-30);
  transition:
    color 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.mf-item.is-on .mf-item__t {
  color: var(--ink);
  transform: translateX(clamp(4px, 0.8vw, 14px));
}

.mf-item__sign {
  justify-self: end;
  align-self: center;
  width: 26px;
  height: 26px;
  position: relative;
  color: var(--ink-30);
  transition: color 0.4s var(--ease-out);
}

.mf-item.is-on .mf-item__sign {
  color: var(--yellow-deep);
}

.mf-item__sign::before,
.mf-item__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease-out);
}

.mf-item__sign::before {
  width: 14px;
  height: 1.5px;
}

.mf-item__sign::after {
  width: 1.5px;
  height: 14px;
}

.mf-item.is-on .mf-item__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mf-item__panel {
  overflow: hidden;
  height: 0;
}

.mf-item__panel-in {
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 84px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding-bottom: clamp(26px, 3.2vw, 44px);
}

.mf-item__panel p {
  grid-column: 2;
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 62ch;
}

/* faixa de imagem da Seção 1 — a moldura cola no hero (mesmo fundo
   stone) e a foto preenche 100% da moldura: sem parallax, sem vão */
.mf-band {
  background: var(--stone);
  padding: 0 var(--pg-pad) clamp(48px, 6vw, 88px);
}

/* CERTIFICAÇÕES */
.mf-certs {
  background: var(--stone-2);
  padding-block: var(--sec-y);
}

.mf-certs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(30px, 4vw, 52px);
}

p.mf-certs__lead {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 62ch;
}

.mf-cert {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: clamp(30px, 3.6vw, 52px);
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  transition:
    border-color 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.mf-cert:hover {
  border-color: var(--yellow);
  transform: translateY(-4px);
}

/* selos em preto sobre fundo claro (brightness(0) preserva o alfa
   e transforma qualquer cor em preto sólido) */
.mf-cert img {
  height: clamp(88px, 9vw, 130px);
  width: auto;
  filter: brightness(0);
  opacity: 0.86;
  transition: opacity 0.5s var(--ease-out);
}

.mf-cert:hover img {
  opacity: 1;
}

.mf-cert figcaption {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ============================================================
   PÁGINA 2 · MÉTODO — "Ficha técnica"
   ------------------------------------------------------------
   Direção: técnica, mono em evidência, escuro dominante.
   Assinatura: etapas em painel duplo (coluna esquerda fixa com
   o stepper, direita rolando) + sistemas off-site em ABAS
   (clique, não scroll) — o oposto do ritmo da home.
   ============================================================ */

.mt-hero {
  background: var(--blue-950);
  color: #fff;
  padding-top: clamp(128px, 17vh, 196px);
  padding-bottom: clamp(44px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.mt-hero::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%);
}

.mt-hero .wrap {
  position: relative;
  z-index: 1;
}

.mt-hero h1 {
  font-size: var(--pg-d1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 15ch;
  margin-top: clamp(24px, 3.4vw, 44px);
}

.mt-hero h1 em {
  font-style: normal;
  color: var(--yellow);
}

/* Seção 1 — os dois parágrafos do documento, em duas colunas */
.mt-lede {
  margin-top: clamp(36px, 4.6vw, 64px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 56px);
}

.mt-lede p {
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

/* ETAPAS — painel duplo */
.mt-steps {
  background: var(--paper);
  padding-block: var(--sec-y);
}

.mt-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}

.mt-steps__aside {
  position: sticky;
  top: clamp(108px, 15vh, 148px);
}

.mt-steps__aside h2 {
  font-size: var(--pg-d3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

p.mt-steps__intro {
  margin-top: 32px;
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
}

/* stepper vertical */
.mt-stepper {
  margin-top: clamp(26px, 3.4vw, 42px);
  display: grid;
  gap: 2px;
}

.mt-stepper button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0.9em;
  align-items: center;
  text-align: left;
  padding: 0.55em 0;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-30);
  transition: color 0.4s var(--ease-out);
}

.mt-stepper button .b {
  height: 1px;
  background: var(--hair);
  position: relative;
}

.mt-stepper button .b::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.mt-stepper button.is-on {
  color: var(--ink);
}

.mt-stepper button.is-on .b::after {
  transform: scaleX(1);
}

/* linhas de etapa */
.mt-rows {
  border-top: 1px solid var(--hair);
}

.mt-row {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 104px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  padding-block: clamp(28px, 3.6vw, 52px);
  border-bottom: 1px solid var(--hair);
  transition: background 0.5s var(--ease-out);
}

.mt-row.is-on {
  background: linear-gradient(90deg, rgba(249, 179, 33, 0.05), transparent 55%);
}

.mt-row__n {
  font-family: var(--mono);
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-30);
  transition: color 0.5s var(--ease-out);
}

.mt-row.is-on .mt-row__n {
  color: var(--yellow-deep);
}

.mt-row h3 {
  font-size: var(--pg-d3);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.mt-row p {
  margin-top: 0.8em;
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 64ch;
}

/* SISTEMAS OFF-SITE — abas */
.mt-sys {
  background: var(--stone-2);
  padding-block: var(--sec-y);
  border-top: 1px solid var(--hair);
}

/* Seção 3 — os dois parágrafos de abertura do documento */
.mt-sys__lede {
  margin-top: clamp(18px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 56px);
}

.mt-sys__lede p {
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
}

/* cabeçalho padrão sobre fundo escuro: inverte automaticamente.
   (era azul-escuro sobre azul-escuro — ilegível) */
.mt-bens .mf-vals__head h2,
.cs-ledger .mf-vals__head h2 {
  color: #fff;
}

.mt-bens .mf-vals__head p,
.cs-ledger .mf-vals__head p {
  color: rgba(255, 255, 255, 0.62);
}

/* BENEFÍCIOS — bento 2×2 com uma célula grande */
.mt-bens {
  background: var(--blue-950);
  color: #fff;
  padding-block: var(--sec-y);
}

.mt-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(30px, 4vw, 54px);
}

.mt-ben {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;
  padding: clamp(26px, 3.2vw, 48px);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  transition:
    border-color 0.5s var(--ease-out),
    background 0.5s var(--ease-out);
}

.mt-ben:hover {
  border-color: rgba(249, 179, 33, 0.45);
  background: rgba(255, 255, 255, 0.045);
}

.mt-ben--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}

.mt-ben--wide .mt-ben__body {
  flex: 1 1 320px;
}

.mt-ben h3 {
  font-size: var(--pg-h4);
  font-weight: 600;
  color: #fff;
}

.mt-ben p {
  margin-top: 0.8em;
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  max-width: 58ch;
}

/* ============================================================
   PÁGINA 4 · CASE (detalhe) — "Documentário"
   ------------------------------------------------------------
   Direção: cinematográfica. Hero de mídia com slate na base.
   Assinatura: os números como LEDGER — uma linha por número,
   largura total, lendo como relatório técnico.
   ============================================================ */

.cs-hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--blue-950);
  overflow: hidden;
}

.cs-hero__media {
  position: absolute;
  inset: 0;
}

.cs-hero__media img,
.cs-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 34, 46, 0.62) 0%,
    rgba(6, 34, 46, 0.18) 40%,
    rgba(6, 34, 46, 0.9) 100%
  );
}

.cs-hero__in {
  position: relative;
  z-index: 1;
  padding-top: clamp(130px, 20vh, 220px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.cs-hero h1 {
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  margin-top: clamp(14px, 2vw, 24px);
}

p.cs-hero__sub {
  margin-top: clamp(12px, 1.6vw, 20px);
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
}

/* slate: faixa mono colada na base */
.cs-slate {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.cs-slate__i {
  padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.6vw, 24px);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.cs-slate__i:first-child {
  padding-left: 0;
}

.cs-slate__i:last-child {
  border-right: 0;
}

.cs-slate__k {
  font-family: var(--mono);
  font-size: var(--pg-lead);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  display: block;
}

.cs-slate__v {
  margin-top: 0.5em;
  color: #fff;
  font-size: var(--pg-sm);
  letter-spacing: 0.02em;
  font-weight: 500;
  line-height: 1.3;
}

/* LEDGER de números */
.cs-ledger {
  background: var(--blue-950);
  color: #fff;
  padding-block: var(--sec-y);
}

.cs-ledger__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
  padding-bottom: clamp(26px, 3.2vw, 42px);
}

.cs-ledger__head h2 {
  font-size: var(--pg-d2);
  font-weight: 600;
  letter-spacing: -0.024em;
  color: #fff;
  max-width: 26ch;
}

.cs-ledger__head p {
  margin-top: 20px;
  font-size: var(--pg-lead);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
}

.cs-rows {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.cs-rowl {
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 260px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: background 0.5s var(--ease-out);
}

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

.cs-rowl__num {
  font-weight: 600;
  font-size: clamp(28px, 2.8vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  white-space: nowrap;
}

.cs-rowl__num .u {
  font-size: 0.38em;
  color: var(--yellow);
  letter-spacing: 0;
  font-weight: 500;
}

p.cs-rowl__lbl {
  font-size: var(--pg-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 52ch;
}

.cs-rowl__ico {
  align-self: center;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.5s var(--ease-out);
}

/* Repeater icons keep the slot's dimensions, regardless of the selected drawing. */
.cs-rowl__ico > svg {
  width: 20px;
  height: 20px;
}

.cs-entry__ico > svg {
  display: block;
  width: clamp(40px, 4vw, 56px);
  height: auto;
}

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

/* CORPO EDITORIAL */
.cs-body {
  background: var(--paper);
  padding-block: var(--sec-y);
}

.cs-lede {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  padding-bottom: clamp(40px, 5.5vw, 80px);
  border-bottom: 1px solid var(--hair);
}

.cs-lede h2 {
  font-size: var(--pg-d2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
  max-width: 20ch;
}

.cs-lede p {
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 62ch;
}

.cs-lede p + p {
  margin-top: 1em;
}

/* contribuições: título sticky + entradas */
.cs-contrib {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  padding-top: clamp(40px, 5.5vw, 80px);
}

.cs-contrib__aside {
  position: sticky;
  top: clamp(108px, 15vh, 148px);
}

.cs-contrib__aside h2 {
  font-size: var(--pg-d3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

p.cs-contrib__intro {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
}

.cs-entries {
  border-top: 1px solid var(--hair);
}

.cs-entry {
  display: grid;
  grid-template-columns: clamp(40px, 4vw, 62px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 26px);
  padding-block: clamp(22px, 2.8vw, 36px);
  border-bottom: 1px solid var(--hair);
}

.cs-entry__n {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  color: var(--yellow-deep);
  padding-top: 0.35em;
}

.cs-entry h3 {
  font-size: var(--pg-h4);
  font-weight: 600;
  color: var(--ink);
}

.cs-entry p {
  margin-top: 0.7em;
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 62ch;
}

/* GALERIA — espalhamento editorial */
.cs-gal {
  background: var(--stone-2);
  padding-block: var(--sec-y);
}

.cs-gal figure {
  overflow: hidden;
  border-radius: 2px;
  background: var(--stone);
  margin: 0;
}

.cs-gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}

.cs-gal figure:hover img {
  transform: scale(1);
}

.cs-gal .a {
  grid-column: 1 / 8;
  aspect-ratio: 16/10;
}

.cs-gal .b {
  grid-column: 8 / 13;
  aspect-ratio: 4/5;
  align-self: end;
}

.cs-gal .c {
  grid-column: 1 / 5;
  aspect-ratio: 3/4;
}

.cs-gal .d {
  grid-column: 5 / 13;
  aspect-ratio: 16/9;
}

/* retomada dos números — versão compacta */
.cs-recap {
  background: var(--paper);
  padding-block: var(--sec-y);
  border-top: 1px solid var(--hair);
}

.cs-recap__head {
  display: grid;
  gap: 0.8em;
  padding-bottom: clamp(24px, 3vw, 38px);
}

.cs-recap__head h2 {
  font-size: var(--pg-d2);
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 30ch;
}

.cs-recap__head p {
  margin-top: 20px;
  font-size: var(--pg-lead);
  font-weight: 300;
  color: var(--ink-70);
}

.cs-recap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}

.cs-recap__i {
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 44px) clamp(28px, 3.2vw, 44px) 0;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
}

.cs-recap__i:nth-child(3n) {
  border-right: 0;
}

.cs-recap__i b {
  display: block;
  font-size: var(--pg-d3);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.cs-recap__i span {
  display: block;
  margin-top: 12px;
  font-size: var(--pg-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 40ch;
}

/* case em produção */
.cs-soon {
  background: var(--paper);
  padding-block: var(--sec-y);
}

.cs-soon__in {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.cs-soon h2 {
  font-size: var(--pg-d2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  max-width: 18ch;
}

.cs-soon p {
  margin-top: 1.1em;
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 56ch;
}

.cs-soon__act {
  margin-top: clamp(26px, 3.2vw, 40px);
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
  align-items: center;
}

p.cs-soon__note {
  margin-top: clamp(30px, 4vw, 52px);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px dashed var(--line-stone);
  border-radius: 3px;
  background: var(--stone-3);
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--ink-45);
  text-transform: uppercase;
}

/* ============================================================
   PÁGINA 5 · FAQ — "Índice tipográfico"
   ------------------------------------------------------------
   Direção: só tipografia, nenhuma imagem, muita calma.
   Assinatura: sumário de livro numerado à esquerda + busca ao
   vivo. Pergunta em tipo grande; resposta abre com altura.
   ============================================================ */

.fq-hero {
  background: var(--stone);
  padding-top: clamp(128px, 17vh, 196px);
  padding-bottom: clamp(34px, 4.6vw, 64px);
}

.fq-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}

.fq-hero h1 {
  font-size: var(--pg-d1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: clamp(20px, 2.6vw, 34px);
}

.fq-hero h1 b {
  font-weight: 600;
}

/* busca */
.fq-search {
  position: relative;
  border-bottom: 1px solid var(--ink-30);
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding-bottom: 0.7em;
}

.fq-search svg {
  color: var(--ink-45);
  flex: 0 0 auto;
}

.fq-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--pg-body);
  color: var(--ink);
  padding: 0.2em 0;
}

.fq-search input::placeholder {
  color: var(--ink-30);
}

.fq-search input:focus {
  outline: none;
}

.fq-search::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--yellow);
  transition: width 0.5s var(--ease-out);
}

.fq-search:focus-within::after {
  width: 100%;
}

.fq-count {
  margin-top: 0.9em;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* corpo */
.fq-body {
  background: var(--paper);
  padding-block: clamp(44px, 6vw, 88px);
}

.fq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 90px);
  align-items: start;
}

/* sumário */
.fq-toc {
  position: sticky;
  top: clamp(108px, 15vh, 148px);
  border-top: 1px solid var(--hair);
}

.fq-toc button {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 0.8em;
  align-items: baseline;
  padding-block: 0.95em;
  border-bottom: 1px solid var(--hair);
  font-size: var(--pg-lead);
  color: var(--ink-45);
  transition: color 0.4s var(--ease-out);
}

.fq-toc button .i,
.fq-toc button .c {
  font-family: var(--mono);
  font-size: var(--pg-lead);
  letter-spacing: 0.12em;
  color: var(--ink-30);
}

.fq-toc button:hover {
  color: var(--ink);
}

.fq-toc button.is-on {
  color: var(--blue);
}

.fq-toc button.is-on .i {
  color: var(--yellow-deep);
}

/* grupos */
.fq-group + .fq-group {
  margin-top: clamp(36px, 5vw, 72px);
}

.fq-group__t {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding-bottom: clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--ink);
}

.fq-group__t h2 {
  font-size: var(--pg-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.fq-group__t .i {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  color: var(--yellow-deep);
}

.fq-qa {
  border-bottom: 1px solid var(--hair);
}

.fq-qa[hidden] {
  display: none;
}

.fq-qa__q {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 1.2em;
  align-items: start;
  padding-block: clamp(16px, 2vw, 24px);
  font-size: var(--pg-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  transition: color 0.35s var(--ease-out);
}

.fq-qa__q:hover {
  color: var(--blue);
}

.fq-qa__sign {
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 0.18em;
  justify-self: end;
  color: var(--ink-30);
  transition: color 0.4s var(--ease-out);
}

.fq-qa.is-open .fq-qa__q {
  color: var(--blue);
  font-weight: 500;
}

.fq-qa.is-open .fq-qa__sign {
  color: var(--yellow-deep);
}

.fq-qa__sign::before,
.fq-qa__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease-out);
}

.fq-qa__sign::before {
  width: 13px;
  height: 1.4px;
}

.fq-qa__sign::after {
  width: 1.4px;
  height: 13px;
}

.fq-qa.is-open .fq-qa__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.fq-qa__a {
  overflow: hidden;
  height: 0;
}

.fq-qa__a-in {
  padding-bottom: clamp(20px, 2.4vw, 30px);
  padding-right: clamp(0px, 5vw, 80px);
  border-left: 2px solid var(--yellow-soft);
  padding-left: clamp(14px, 1.8vw, 24px);
}

.fq-qa__a p {
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 68ch;
}

.fq-qa__a p + p {
  margin-top: 0.9em;
}

.fq-empty {
  padding-block: clamp(40px, 6vw, 80px);
  font-size: var(--pg-lead);
  font-weight: 300;
  color: var(--ink-45);
}

.fq-empty[hidden] {
  display: none;
}

/* ============================================================
   PÁGINA 6 · CONTATO — "Split screen"
   ------------------------------------------------------------
   Direção: tela dividida. Formulário à esquerda em claro,
   painel escuro à direita que acompanha o scroll. Quieta.
   ============================================================ */

.ct-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 100svh;
  align-items: stretch;
}

.ct-left {
  background: var(--stone);
  padding: clamp(126px, 17vh, 190px) clamp(20px, 5vw, 90px) clamp(56px, 8vw, 110px) var(--pg-pad);
}

.ct-left h1 {
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-top: clamp(18px, 2.4vw, 30px);
}

.ct-left h1 b {
  font-weight: 600;
}

.ct-left > p {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 44ch;
}

.ct-form {
  margin-top: clamp(34px, 4.5vw, 58px);
  max-width: 620px;
}

.ct-field {
  position: relative;
  border-bottom: 1px solid var(--line-stone);
  padding-top: clamp(20px, 2.4vw, 28px);
}

.ct-field label {
  position: absolute;
  left: 0;
  bottom: 0.7em;
  font-size: var(--pg-body);
  color: var(--ink-45);
  pointer-events: none;
  transform-origin: left bottom;
  transition:
    transform 0.35s var(--ease-out),
    color 0.35s var(--ease-out);
}

.ct-field input,
.ct-field textarea {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--pg-body);
  color: var(--ink);
  padding: 0 0 0.7em;
  resize: vertical;
}

.ct-field input:focus,
.ct-field textarea:focus {
  outline: none;
}

.ct-field.is-filled label,
.ct-field:focus-within label {
  transform: translateY(-1.85em) scale(0.72);
  color: var(--blue);
}

.ct-field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--yellow);
  transition: width 0.5s var(--ease-out);
}

.ct-field:focus-within::after {
  width: 100%;
}

.ct-stage {
  margin-top: clamp(26px, 3.2vw, 40px);
}

.ct-stage > span {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  display: block;
  margin-bottom: 1em;
}

.ct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.ct-chips button {
  border: 1px solid var(--line-stone);
  border-radius: 100px;
  padding: 0.68em 1.15em;
  font-size: var(--pg-lead);
  color: var(--ink-70);
  transition: 0.4s var(--ease-out);
}

.ct-chips button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.ct-chips button.is-sel {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.ct-submit {
  margin-top: clamp(30px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
}

.ct-msg {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.08em;
  color: var(--blue);
  opacity: 0;
  transform: translateY(6px);
  transition: 0.5s var(--ease-out);
}

.ct-msg.show {
  opacity: 1;
  transform: none;
}

/* painel direito */
.ct-right {
  background: var(--blue-950);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ct-right::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 80% 12%, rgba(249, 179, 33, 0.16), transparent 62%),
    radial-gradient(70% 70% at 10% 90%, rgba(14, 81, 106, 0.55), transparent 65%);
}

.ct-right__in {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: clamp(126px, 17vh, 190px) var(--pg-pad) clamp(56px, 8vw, 96px) clamp(20px, 5vw, 90px);
  display: grid;
  gap: clamp(24px, 3.4vw, 44px);
  align-content: start;
}

.ct-block {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: clamp(20px, 2.6vw, 30px);
}

.ct-block .k {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  display: block;
  margin-bottom: 1em;
}

.ct-block h2 {
  font-size: var(--pg-h4);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  max-width: 24ch;
}

.ct-block p {
  margin-top: 0.85em;
  font-size: var(--pg-lead);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.64);
  max-width: 44ch;
}

.ct-block .link-u {
  margin-top: 1.2em;
  color: var(--yellow);
}

.ct-block__btn {
  margin-top: clamp(18px, 2.2vw, 26px);
}

.ct-lines {
  display: grid;
  gap: 0.85em;
  font-family: var(--mono);
  font-size: var(--pg-lead);
}

.ct-lines a,
.ct-lines span {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.35s var(--ease-out);
}

.ct-lines a:hover {
  color: var(--yellow);
}

.ct-lines svg {
  color: var(--yellow);
  flex: 0 0 auto;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1180px) {
  .mt-steps__grid,
  .cs-lede,
  .cs-contrib,
  .cs-soon__in,
  .fq-grid {
    grid-template-columns: 1fr;
  }

  .mt-steps__aside,
  .cs-contrib__aside,
  .fq-toc {
    position: static;
  }

  .fq-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    border-top: 0;
  }

  .fq-toc button {
    width: auto;
    display: inline-flex;
    gap: 0.6em;
    border: 1px solid var(--hair);
    border-radius: 100px;
    padding: 0.6em 1.05em;
  }

  .fq-toc button .c {
    display: none;
  }

  .fq-toc button.is-on {
    border-color: var(--yellow);
    background: var(--yellow-soft);
  }
}

@media (max-width: 1024px) {
  .endcta__in,
  .fq-hero__in,
  .endcta__act {
    justify-self: start;
  }

  .ct-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ct-left {
    padding-inline: var(--pg-pad);
  }

  .ct-right__in {
    position: static;
    padding: clamp(46px, 8vw, 80px) var(--pg-pad);
  }

  .cs-gal .a,
  .cs-gal .b,
  .cs-gal .c,
  .cs-gal .d {
    grid-column: 1 / 13;
    aspect-ratio: 16/10;
  }
}

@media (max-width: 760px) {
  .mf-item__row {
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    gap: 0.8em;
  }

  .mf-item__panel-in {
    grid-template-columns: 1fr;
  }

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

  .mf-s1 {
    grid-template-columns: 1fr;
  }

  .mf-s1__where {
    border-left: 0;
    border-top: 1px solid var(--line-stone);
    padding-left: 0;
    padding-top: clamp(20px, 3vw, 28px);
  }

  .mf-certs__grid,
  .mt-bento {
    grid-template-columns: 1fr;
  }

  .mf-cert {
    grid-template-columns: 1fr;
  }

  .mt-ben--wide {
    grid-column: span 1;
    flex-direction: column;
  }

  .mt-lede,
  .mt-sys__lede,
  .cs-rowl {
    grid-template-columns: 1fr;
    gap: 0.6em;
  }

  .cs-rowl__ico {
    display: none;
  }

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

  .cs-hero__in {
    padding-top: clamp(120px, 22vh, 170px);
    padding-bottom: clamp(30px, 6vw, 44px);
  }

  .cs-slate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-slate__i {
    padding-inline: 0 clamp(10px, 3vw, 18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .cs-slate__i:nth-child(even) {
    border-right: 0;
    padding-left: clamp(10px, 3vw, 18px);
  }

  .cs-recap__grid {
    grid-template-columns: 1fr;
  }

  .cs-recap__i {
    border-right: 0;
    padding-right: 0;
  }

  .mt-row,
  .cs-entry {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }
}

/* prefers-reduced-motion: nada pulsa, nada desliza.
   Os acordeões continuam funcionando — só trocam a animação
   de altura por um corte seco (tratado no JS). */
@media (prefers-reduced-motion: reduce) {
  .split .w > i,
  .scroll-hint i {
    animation: none !important;
    transform: none !important;
  }

  .cs-gal img,
  .mf-item__t {
    transition: none !important;
  }
}

/* ============================================================
   REPERTÓRIO VISUAL — direção de arte da LP (bix.com.br)
   ------------------------------------------------------------
   Trazido da LP: ícones line-art de dois tons, imagens em
   duotone com etiqueta, colagens e galeria com legenda
   numerada. Paleta e tipografia do site permanecem as mesmas —
   o que muda é a densidade de elementos visuais, que era a
   crítica da cliente ("fundos muito cinzas ou azuis, monótonos").
   ============================================================ */

/* ---------- ÍCONES LINE-ART (56px, dois tons) ---------------
   Um mesmo SVG serve fundo claro e escuro: as cores saem de
   --ico-l (traço) e --ico-a (acento), redefinidas por contexto. */
.ico-art {
  --ico-l: var(--blue);
  --ico-a: var(--yellow-deep);
  display: block;
  width: clamp(40px, 4vw, 56px);
  height: auto;
  overflow: visible;
}

.sec--dark .ico-art,
.mt-bens .ico-art,
.cs-ledger .ico-art,
.endcta .ico-art,
.ct-right .ico-art,

/* o acento cresce discretamente no hover do bloco que o contém */
.ico-art {
  transition: transform 0.7s var(--ease-out);
}

.mf-item:hover .ico-art,
.mt-ben:hover .ico-art,
.dcard:hover .ico-art,
.cs-entry:hover .ico-art {
  transform: translateY(-3px);
}

/* ---------- IMAGEM EM DUOTONE + ETIQUETA -------------------- */
.duo {
  position: relative;
  overflow: hidden;
  background: var(--blue-950);
  isolation: isolate;
}

.duo img,
.duo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.68) saturate(0.35) contrast(1.06);
  mix-blend-mode: luminosity;
  transform: scale(1.04);
  transition:
    filter 0.9s var(--ease-out),
    transform 1.4s var(--ease-out);
}

.duo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 81, 106, 0.4) 0%, rgba(8, 44, 59, 0.82) 100%);
  transition: opacity 0.7s var(--ease-out);
}

/* No hover o tratamento sai por completo: a foto aparece em cor
   natural, sem filtro e sem a camada azul. Duotone é o estado de
   repouso; o hover revela a imagem como ela é. */
.duo:hover img,
.duo:hover video,
a:hover .duo img,
.dcard:hover .duo img,
.duo:focus-visible img,
a:focus-visible .duo img {
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1);
}

.duo:hover::after,
a:hover .duo::after,
.dcard:hover .duo::after,
.duo:focus-visible::after,
a:focus-visible .duo::after {
  opacity: 0;
}

/* etiqueta sobre a imagem */
.duo__tag {
  position: absolute;
  z-index: 2;
  top: clamp(12px, 1.4vw, 20px);
  left: clamp(12px, 1.4vw, 20px);
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}

.duo__tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  flex: 0 0 auto;
}

/* ---------- CARD COM IMAGEM DUOTONE ------------------------
   Formato dos cards do Método na LP: imagem tratada + etiqueta,
   numeração mono, título, texto e ícone line-art no pé. */
/* Bento assimétrico: 12 colunas, cards de larguras e alturas
   diferentes — 7/5 na primeira linha, 5/7 na segunda. */
.dgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(28px, 3.6vw, 48px);
}

.dcard:nth-child(1) {
  grid-column: span 7;
}

.dcard:nth-child(2) {
  grid-column: span 5;
}

.dcard:nth-child(3) {
  grid-column: span 5;
}

.dcard:nth-child(4) {
  grid-column: span 7;
}

/* proporções distintas por posição reforçam a assimetria */
.dcard:nth-child(1) .dcard__pic {
  aspect-ratio: 16/9;
}

.dcard:nth-child(2) .dcard__pic {
  aspect-ratio: 4/3.4;
}

.dcard:nth-child(3) .dcard__pic {
  aspect-ratio: 4/3.4;
}

.dcard:nth-child(4) .dcard__pic {
  aspect-ratio: 16/9;
}

.dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blue-900);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.6s var(--ease-out);
}

.dcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-950) 100%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}

.dcard:hover {
  border-color: rgba(249, 179, 33, 0.4);
}

.dcard:hover::before {
  opacity: 1;
}

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

.dcard__pic {
  aspect-ratio: 4/3;
}

.dcard__in {
  padding: clamp(22px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  flex: 1;
}

.dcard__n {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.dcard h3 {
  font-size: var(--pg-d3);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.12;
  color: #fff;
}

.dcard p {
  font-size: var(--pg-body);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.64);
  max-width: 52ch;
}

.dcard__foot {
  margin-top: auto;
  padding-top: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.dcard__meta {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: grid;
  gap: 0.5em;
}

/* ---------- COLAGEM DE IMAGENS -----------------------------
   Uma alta à esquerda + duas empilhadas à direita, cada uma com
   legenda própria. Quebra a sequência de faixas retangulares. */
.collage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(12px, 1.6vw, 22px);
}

.collage__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 22px);
}

.cfig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--stone);
}

.cfig--tall {
  aspect-ratio: 4/5.2;
}

.cfig--wide {
  aspect-ratio: 16/9;
}

.cfig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}

.cfig:hover img {
  transform: scale(1);
}

.cfig figcaption {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.6vw, 22px) clamp(12px, 1.4vw, 18px);
  background: linear-gradient(180deg, transparent, rgba(6, 34, 46, 0.78));
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- GALERIA COM LEGENDA NUMERADA -------------------- */
.galn {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.6vw, 48px);
}

.galn__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 22px);
}

/* Four or more images share equal columns instead of the two-image side stack. */
.galn.galn--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.galn--grid > figure {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.galn--grid > figure:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

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

  .galn--grid > figure:last-child:nth-child(odd) {
    aspect-ratio: 4 / 3;
  }
}

.galn figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--stone);
}

.galn__main {
  aspect-ratio: 4/3;
}

.galn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform 1.4s var(--ease-out);
}

.galn figure:hover img {
  transform: scale(1);
}

/* legenda numerada no canto, no formato "01 / Fachada" */
.galn figcaption {
  position: absolute;
  z-index: 2;
  bottom: clamp(12px, 1.4vw, 18px);
  left: clamp(12px, 1.4vw, 18px);
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(6, 34, 46, 0.58);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.5em 0.85em;
}

.galn figcaption b {
  color: var(--yellow);
  font-weight: 400;
  margin-right: 0.5em;
}

/* ---------- RESPONSIVO DO REPERTÓRIO ----------------------- */
@media (max-width: 1024px) {
  .dgrid,
  .collage,
  .galn {
    grid-template-columns: 1fr;
  }

  .cfig--tall {
    aspect-ratio: 16/10;
  }

  .collage__stack,
  .galn__side {
    grid-template-rows: auto auto;
  }

  .galn__side figure {
    aspect-ratio: 16/10;
  }
}

/* ---------- ENCAIXE DOS ÍCONES NAS ESTRUTURAS EXISTENTES ---- */

/* Sobre · princípios: ícone entre o número e o título */
.mf-item__row {
  grid-template-columns: clamp(44px, 4.4vw, 72px) auto minmax(0, 1fr) 40px;
}

.mf-item__ico {
  align-self: center;
  opacity: 0.5;
  transition: opacity 0.55s var(--ease-out);
}

.mf-item.is-on .mf-item__ico {
  opacity: 1;
}

.mf-item__panel-in {
  grid-template-columns:
    calc(clamp(44px, 4.4vw, 72px) + clamp(40px, 4vw, 56px) + clamp(12px, 2vw, 28px))
    minmax(0, 1fr);
}

/* Método · etapas: ícone abaixo do número, na coluna da esquerda */
.mt-row {
  grid-template-columns: clamp(56px, 6vw, 104px) minmax(0, 1fr);
}

.mt-row__ico {
  grid-column: 1;
  margin-top: clamp(12px, 1.4vw, 18px);
  opacity: 0.45;
  transition: opacity 0.55s var(--ease-out);
}

.mt-row.is-on .mt-row__ico {
  opacity: 1;
}

/* Método · benefícios: o ícone line-art substitui o círculo antigo */
.mt-ben > .ico-art {
  flex: 0 0 auto;
}

/* Case · contribuições: ícone sob o número */
.cs-entry {
  grid-template-columns: clamp(44px, 4.6vw, 72px) minmax(0, 1fr);
}

.cs-entry__ico {
  grid-column: 1;
  margin-top: clamp(10px, 1.2vw, 16px);
  opacity: 0.5;
  transition: opacity 0.5s var(--ease-out);
}

.cs-entry:hover .cs-entry__ico {
  opacity: 1;
}

/* FAQ · ícone da categoria */
.fq-group__t {
  gap: clamp(12px, 1.6vw, 20px);
}

.fq-group__ico {
  align-self: center;
}

.fq-group__ico .ico-art {
  width: clamp(24px, 2.2vw, 30px);
}

/* Contato · imagem no painel escuro + ícone do bloco */

.ct-block__ico {
  display: block;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.ct-block__ico .ico-art {
  width: clamp(36px, 3.4vw, 48px);
}

@media (max-width: 760px) {
  .mf-item__row {
    grid-template-columns: 30px auto minmax(0, 1fr) 26px;
    gap: 0.7em;
  }

  .mf-item__ico .ico-art {
    width: 28px;
  }

  .mt-row,
  .cs-entry {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }

  .mt-row__ico,
  .cs-entry__ico {
    display: none;
  }
}

/* ============================================================
   CASES · ÍNDICE INTERATIVO + MAPA ANIMADO
   ------------------------------------------------------------
   A página era uma lista de cards. Virou um índice tipográfico em
   que a foto do projeto acompanha o cursor (desktop) e um mapa
   cujos traços se desenham conforme entra na tela — o recurso que
   a cliente citou da LP.
   ============================================================ */

.ix-hero {
  background: var(--stone);
  padding-top: clamp(128px, 17vh, 200px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.ix-hero h1 {
  font-size: var(--pg-d1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: clamp(20px, 2.6vw, 34px);
}

.ix-hero__foot {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--line-stone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.ix-hero__count b {
  color: var(--yellow-deep);
  font-weight: 400;
}

.ix-hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}

.ix-hero__hint i {
  width: 22px;
  height: 1px;
  background: var(--yellow);
  transform-origin: left;
  animation: ixHint 2.4s var(--ease-io) infinite;
}

@keyframes ixHint {
  0%,
  100% {
    transform: scaleX(0.3);
  }

  50% {
    transform: scaleX(1);
  }
}

/* ---------- lista ---------- */
.ix {
  position: relative;
  background: var(--paper);
  padding-bottom: clamp(20px, 3vw, 44px);
}

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

.ix__row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 88px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  padding-block: clamp(26px, 3.6vw, 52px);
  border-bottom: 1px solid var(--hair);
  transition: background 0.6s var(--ease-out);
}

/* faixa amarela que corre no topo da linha em foco */
.ix__row::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--yellow);
  transition: width 0.9s var(--ease-out);
}

.ix__row:hover::after,
.ix__row:focus-visible::after {
  width: 100%;
}

.ix__n {
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.16em;
  color: var(--ink-30);
  align-self: start;
  padding-top: 0.6em;
  transition: color 0.5s var(--ease-out);
}

.ix__row:hover .ix__n {
  color: var(--yellow-deep);
}

.ix__body {
  display: block;
  min-width: 0;
}

.ix__cat {
  display: flex;
  align-items: center;
  gap: 0.9em;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.ix__badge {
  font-weight: 400;
  color: var(--yellow-deep);
}

.ix__name {
  display: block;
  margin-top: 0.4em;
  font-size: clamp(32px, 4.4vw, 68px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1;
  color: var(--ink-30);
  transition:
    color 0.55s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.ix__row:hover .ix__name,
.ix__row:focus-visible .ix__name {
  color: var(--ink);
  transform: translateX(clamp(6px, 1vw, 18px));
}

.ix__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.6em;
  margin-top: clamp(16px, 2vw, 24px);
}

.ix__specs > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.08em;
  color: var(--ink-70);
}

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

.ix__go {
  width: clamp(38px, 3.6vw, 48px);
  height: clamp(38px, 3.6vw, 48px);
  border: 1px solid var(--line-stone);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  flex: 0 0 auto;
  transition: 0.55s var(--ease-out);
}

.ix__go svg {
  width: 40%;
  height: 40%;
}

.ix__row:hover .ix__go {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--blue-950);
  transform: rotate(45deg);
}

/* miniatura: some no desktop (a imagem vai para a camada flutuante) */
.ix__thumb {
  display: none;
  grid-column: 2;
  margin-top: clamp(18px, 2.4vw, 26px);
  aspect-ratio: 16/10;
  border-radius: 2px;
  overflow: hidden;
}

/* ---------- imagem que acompanha o cursor ---------- */
.ix__float {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: clamp(240px, 26vw, 400px);
  aspect-ratio: 4/3;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.92);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
  will-change: transform;
}

.ix__float.is-on {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.ix__float-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 40px 90px -50px rgba(6, 34, 46, 0.6);
}

.ix__float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   CONTATO · PRANCHETA DESENHÁVEL (no lugar da foto)
   ------------------------------------------------------------
   Um canvas sobre a grade de blueprint. A tela nasce vazia — o
   único desenho que aparece é o que o visitante faz. Os traços
   ficam guardados em coordenadas normalizadas, então redimensionar
   a janela não deforma nem apaga o rascunho.
   ============================================================ */
.bp {
  position: relative;
  aspect-ratio: 16/11;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0/32px 32px,
    var(--blue-950);
}

/* linhas-mestras a cada 4 quadros, como papel milimetrado */
.bp::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0/128px 128px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0/128px 128px;
}

.bp__corner {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.bp__corner.tl {
  top: 14px;
  left: 16px;
}

.bp__corner.tr {
  top: 14px;
  right: 16px;
  color: var(--yellow);
}

/* crosshair que segue o cursor */
.bp__cross {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: rgba(249, 179, 33, 0.3);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}

.bp.is-hover .bp__cross {
  opacity: 1;
}

.bp__cross--x {
  left: 0;
  right: 0;
  height: 1px;
  top: 50%;
}

.bp__cross--y {
  top: 0;
  bottom: 0;
  width: 1px;
  left: 50%;
}

/* a superfície de desenho */
.bp__canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* convite discreto, some no primeiro traço */
.bp__hint {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  transition: opacity 0.5s var(--ease-out);
}

.bp.is-drawn .bp__hint,
.bp.is-hover .bp__hint {
  opacity: 0;
}

/* barra inferior: indicador de traço + limpar */
.bp__bar {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  pointer-events: none;
}

.bp__pen {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 10px;
}

.bp__pen i {
  width: 1px;
  height: 5px;
  background: rgba(255, 255, 255, 0.22);
}

.bp__pen i:first-child {
  height: 10px;
  background: var(--yellow);
}

.bp__clear {
  pointer-events: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-family: var(--mono);
  font-size: var(--pg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: 0.4s var(--ease-out);
}

/* o botão só existe depois que há o que apagar */
.bp.is-drawn .bp__clear {
  opacity: 1;
  transform: none;
}

.bp__clear:hover,
.bp__clear:focus-visible {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* no toque não há cursor para o crosshair seguir, mas o convite
   continua — é a única indicação de que a área é desenhável */
@media (pointer: coarse) {
  .bp__cross {
    display: none;
  }

  .bp.is-hover .bp__hint {
    opacity: 1;
  }

  .bp.is-drawn .bp__hint {
    opacity: 0;
  }
}

/* ============================================================
   RESPONSIVO — cases e prancheta
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  /* sem cursor fino, a imagem flutuante não faz sentido:
     a miniatura entra no fluxo da linha */
  .ix__float {
    display: none;
  }

  .ix__thumb {
    display: block;
  }
}

@media (max-width: 760px) {
  .ix__row {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
    gap: 0.8em clamp(12px, 3vw, 18px);
  }

  .ix__thumb {
    grid-column: 1 / -1;
  }
}
/* Controlled inline highlight for editable copy outside the animated home title. */
.cms-text-accent {
  color: var(--blue, #0e516a);
}
.xp .cms-text-accent,
.advcard--dark .cms-text-accent {
  color: var(--yellow, #f9b321);
}