/* =========================================================================
   A PROPOSTA · Rentabiliza.ai
   Carrega DEPOIS de pulsarh.css e rentabiliza.css. Herda a escala `--rt-*`
   inteira: aqui NAO se escreve tamanho de fonte na mao.

   ⚠️ ZERO MENCAO A TRADEUP. Decisao do Rodrigo (22/08): a TradeUp entra em
   alguns contratos e em outros nao — entao nao aparece pra ninguem. Se
   alguem for reintroduzir, isso e decisao dele, nao ajuste de peca.
   ========================================================================= */

/* ---------- a dobra da proposta ---------- */
.p-capa {
  position: relative; overflow: hidden;
  padding: calc(clamp(30px, 3.6vh, 48px) + 58px) 0 clamp(52px, 6.4vw, 88px);
  background: var(--noite);
}
.p-capa::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 86% at 80% 6%, rgba(244,185,62,.17), transparent 62%),
    radial-gradient(ellipse 48% 66% at 6% 96%, rgba(122,91,160,.3), transparent 62%);
}
.p-capa > * { position: relative; z-index: 1; }
.p-capa .r-promessa { max-width: 20ch; margin-top: 12px; }
/* 24/08 (Rodrigo): o selo da capa colado na headline, nao boiando la em cima */
.p-capa .selo { margin-bottom: 0; }

/* ---------- grade de atributos (o que e) ---------- */
.p-atributos { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(1px, .2vw, 2px); }
@media (min-width: 720px)  { .p-atributos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .p-atributos { grid-template-columns: repeat(3, 1fr); } }
.p-atributo { position: relative; padding: clamp(26px, 2.8vw, 34px) clamp(20px, 2.2vw, 26px); }
.p-atributo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fio); }
.p-atributo .p-num { display: block; font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .16em; color: var(--ouro); }
.p-atributo h3 { margin: 12px 0 8px; font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.028em; }
.p-atributo p { margin: 0; font-size: var(--rt-sub); line-height: 1.55; color: var(--tinta-meia); }

/* ---------- as tres travas do canal ---------- */
.p-travas { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(14px, 1.8vw, 20px); }
@media (min-width: 900px) { .p-travas { grid-template-columns: repeat(3, 1fr); } }
.p-trava {
  padding: clamp(26px, 2.8vw, 34px); border-radius: 18px;
  border: 1px solid var(--fio);
  background: linear-gradient(164deg, rgba(255,107,71,.08), rgba(168,170,194,.02));
}
.p-trava h3 { font-size: var(--rt-titulo); font-weight: 500; color: var(--coral); letter-spacing: -.028em; }
.p-trava p { margin: 12px 0 0; font-size: var(--rt-sub); line-height: 1.56; color: var(--tinta-meia); }

/* ---------- a lacuna: o que foi entregue x por que nao funcionou ---------- */
.p-lacuna { margin: var(--e6) 0 0; }
.p-lacuna-cabecalho, .p-lacuna-linha {
  display: grid; grid-template-columns: 1fr 44px 1.1fr; gap: 24px; align-items: center;
}
.p-lacuna-cabecalho {
  padding-bottom: 14px; font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
}
.p-lacuna-cabecalho span:first-child { color: var(--tinta-leve); }
.p-lacuna-cabecalho span:last-child  { color: var(--coral); }
.p-lacuna-linha {
  padding: 20px 12px 20px 0; border-top: 1px solid var(--fio);
  transition: background var(--base) var(--curva), padding-left var(--base) var(--curva);
}
.p-lacuna-linha:last-of-type { border-bottom: 1px solid var(--fio); }
.p-lacuna-linha:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(244,185,62,.08), transparent 70%); }
.p-lacuna-linha .p-feito { font-size: var(--rt-sub); color: var(--tinta-meia); }
.p-lacuna-linha .p-porque { font-size: var(--rt-corpo); font-weight: 500; color: var(--tinta); letter-spacing: -.018em; }
.p-lacuna-seta { position: relative; width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--fio-alto), var(--coral)); }
.p-lacuna-seta::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 2px solid var(--coral); border-right: 2px solid var(--coral);
  transform: translateX(1px) rotate(45deg);
}
@media (max-width: 880px) {
  .p-lacuna-cabecalho { display: none; }
  .p-lacuna-linha { grid-template-columns: 1fr; gap: 8px; }
  .p-lacuna-seta { display: none; }
  .p-lacuna-linha .p-porque { padding-left: 15px; border-left: 2px solid var(--coral); }
}

/* ---------- os quatro estagios do movimento ---------- */
.p-estagios { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 860px) { .p-estagios { grid-template-columns: repeat(4, 1fr); } }
.p-estagio {
  position: relative; overflow: hidden;
  padding: clamp(26px, 2.8vw, 34px) clamp(20px, 2.2vw, 26px);
  border-radius: 18px; border: 1px solid var(--fio);
  background: linear-gradient(166deg, rgba(168,170,194,.07), rgba(168,170,194,.02));
  transition: transform var(--base) var(--curva), border-color var(--base) var(--curva);
}
.p-estagio::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--metal-ouro); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--lento) var(--curva);
}
.p-estagio:hover { transform: translateY(-4px); border-color: rgba(244,185,62,.4); }
.p-estagio:hover::before { transform: scaleX(1); }
.p-estagio .p-num { font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .16em; color: var(--ouro-fundo); }
.p-estagio h3 { margin: 10px 0 12px; font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.028em; }
.p-estagio p { margin: 0; font-size: var(--rt-sub); line-height: 1.56; color: var(--tinta-meia); }

/* ---------- no que cremos + a origem ----------
   A tese vive a esquerda e a lede a direita: sem isso a secao ficava com
   metade da largura morta, que e o mesmo defeito que a home ja teve. */
.p-crenca { display: grid; gap: clamp(22px, 3vw, 48px); }
@media (min-width: 1000px) {
  .p-crenca { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: end; }
  .p-crenca-lede { margin: 0 0 8px; }
}
.p-crenca-tese h2 { max-width: 20ch; }

/* ---------- OS QUATRO CASES ----------
   Substituiram a caixa unica "A origem" em 22/08. Uma origem so falava de
   operadora e nao conectava com industria de tinta, faculdade ou instituto —
   quatro casos de setores diferentes provam que o metodo atravessa. */
.p-cases {
  list-style: none; padding: 0; margin: var(--e6) 0 0;
  display: grid; gap: clamp(12px, 1.4vw, 18px);
}
@media (min-width: 720px)  { .p-cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .p-cases { grid-template-columns: repeat(4, 1fr); } }
.p-case {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(28px, 3vw, 36px) clamp(22px, 2.4vw, 28px);
  border-radius: 20px;
  /* 🔴 CICATRIZ: estes cards nasceram em CREME com ouro por cima, e ficaram
     lavados. O gradiente de ouro vai ate #FFE7B0 — sobre fundo claro ele
     simplesmente some. Ouro so fica caro sobre ESCURO.
     E o creme ja tinha sido cortado uma vez pelo Rodrigo ("no lugar do creme
     use o prateado"). Nao voltar. */
  background: linear-gradient(158deg, #1C1608 0%, #14121F 46%, #0B0C1F 100%);
  border: 1px solid rgba(244,185,62,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 26px 50px -30px rgba(0,0,0,.9);
  transition: transform var(--base) var(--curva), border-color var(--base) var(--curva),
              box-shadow var(--base) var(--curva);
}
.p-case::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--metal-ouro);
}
/* o brilho que nasce do canto superior — e o que da o volume de vidro */
.p-case::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 84% 58% at 74% -6%, rgba(244,185,62,.16), transparent 62%);
}
.p-case > * { position: relative; z-index: 1; }
.p-case:hover {
  transform: translateY(-5px); border-color: rgba(244,185,62,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 36px 62px -30px rgba(0,0,0,.95),
    0 0 60px -22px rgba(244,185,62,.6);
}
/* O nome da empresa em PRATA, nao em ouro. Regra da casa: elemento prateado
   em secao escura. E o ouro ja e o acento da secao inteira — quando o nome do
   cliente tambem e ouro, ele vira mais um enfeite. Em prata ele le como
   ASSINATURA, que e o que um nome de cliente e. Com mais corpo tambem:
   subiu de --rt-etiqueta pra --rt-nota e de 600 pra 700. */
.p-case-marca {
  font-size: var(--rt-nota); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--prata-clara);
}
.p-case-destaque { display: flex; flex-direction: column; gap: 4px; }
.p-case-destaque b {
  /* CICATRIZ 22/08: estava clamp(42,4.8vw,66) e rendia 61px numa tela de
     1280 — MAIOR que o h2 da secao, que da 56. Numero dentro de um card
     gritando mais alto que o titulo da secao e hierarquia invertida. */
  font-size: clamp(36px, 3.5vw, 46px); font-weight: 200; line-height: .86;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-case-destaque span {
  font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244,185,62,.72);
}
.p-case-texto {
  margin: 0; font-size: var(--rt-sub); line-height: 1.58;
  color: rgba(245,246,250,.7);
}

/* ---------- A TABELA DA ESCALADA ----------
   Substituiu quatro cartoes em 22/08. Os rotulos apareciam 16 vezes; aqui
   aparecem 4. E a leitura que importa e HORIZONTAL: comparar o que muda de
   uma etapa pra outra.
   Marcacao de <table> de verdade, com `scope` — leitor de tela entende, e
   colar num deck preserva a estrutura. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.p-tabela-rolo { margin: var(--e6) 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: 20px; overflow: hidden;
  /* PRATA, com texto escuro. O prateado aqui e proprio — mais frio e mais
     claro que o `--prata-chapa` das secoes, pra a tabela ler como superficie
     separada e nao como um pedaco de secao clara.
     Os tokens sao trocados no proprio elemento: assim todo filho resolve pra
     tinta escura sozinho, sem eu reescrever cor por cor. */
  background: linear-gradient(168deg, #FBFCFF 0%, #F1F3FA 44%, #E7EAF4 100%);
  color: #0B0C1F;
  --tinta: #0B0C1F;
  --tinta-meia: #474B60;
  --tinta-leve: #7E8299;
  --fio: rgba(11,12,31,.11);
  box-shadow: 0 30px 64px -34px rgba(0,0,0,.75);
}
.p-tabela th, .p-tabela td { text-align: left; vertical-align: top; }
/* cabecalho de coluna: a etapa em cima, o nome grande embaixo */
.p-tabela thead th {
  padding: clamp(22px, 2.4vw, 30px) clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 24px);
  border-bottom: 1px solid rgba(166,118,26,.34);
}
.p-th-etapa {
  display: block; font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: #8A6416;
}
.p-th-nome {
  display: block; margin-top: 8px;
  font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; color: var(--tinta);
}
/* cabecalho de linha: o rotulo que antes se repetia quatro vezes */
.p-tabela tbody th {
  width: 1%; white-space: nowrap;
  background: linear-gradient(90deg, rgba(11,12,31,.055), rgba(11,12,31,.02));
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 24px);
  font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-meia);
  border-top: 1px solid var(--fio);
}
.p-tabela tbody td {
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 24px);
  font-size: var(--rt-sub); line-height: 1.55; color: var(--tinta-meia);
  border-top: 1px solid var(--fio);
  transition: background var(--base) var(--curva);
}
.p-tabela tbody tr:hover td { background: rgba(244,185,62,.14); }
.p-tabela tbody td b { color: var(--tinta); font-weight: 500; }
/* a linha do RESULTADO carrega os filtros da escalada — ela pesa mais */
.p-linha-resultado td { color: var(--tinta); }
/* 🔴 Sobre prata o `--metal-ouro` some: ele vai ate #FFE7B0. Aqui o destaque
   e ouro SOLIDO e profundo, que e o que se le em fundo claro. */
.p-tabela .p-linha-resultado td b { color: #8A6416; font-weight: 600; }
.p-linha-resultado th, .p-linha-resultado td { border-top-color: rgba(166,118,26,.3); }
.p-linha-resultado td { background: rgba(244,185,62,.07); }

/* No celular a tabela vira blocos: 4 colunas em 390px nao se le. Cada celula
   recupera seu rotulo pelo `data-rotulo` — nada se perde na travessia. */
@media (max-width: 900px) {
  .p-tabela, .p-tabela thead, .p-tabela tbody, .p-tabela tr,
  .p-tabela th, .p-tabela td { display: block; width: auto; }
  .p-tabela { border: 0; background: none; box-shadow: none; }
  .p-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p-tabela tbody { display: grid; gap: clamp(12px, 1.6vw, 18px); }
  .p-tabela tbody tr {
    border: 1px solid var(--fio); border-radius: 18px; overflow: hidden;
    background: linear-gradient(168deg, #FBFCFF, #EDEFF7);
    box-shadow: 0 20px 40px -28px rgba(0,0,0,.7);
  }
  .p-tabela tbody th {
    width: auto; white-space: normal; border-top: 0;
    border-bottom: 1px solid rgba(166,118,26,.3); color: #8A6416;
  }
  .p-tabela tbody td { border-top: 1px solid var(--fio); }
  .p-tabela tbody td::before {
    content: attr(data-rotulo) " · ";
    display: none;
  }
  /* dentro do bloco, cada celula diz de qual etapa ela e */
  .p-tabela tbody tr td:nth-of-type(1)::after { content: "Start"; }
  .p-tabela tbody tr td:nth-of-type(2)::after { content: "Master"; }
  .p-tabela tbody tr td:nth-of-type(3)::after { content: "Pro"; }
  .p-tabela tbody tr td:nth-of-type(4)::after { content: "Ultra"; }
  .p-tabela tbody td::after {
    display: block; margin-top: 8px;
    font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #8A6416;
  }
}

/* ---------- O MAPA DOS ESTAGIOS (.p-mapa) ----------
   Variante da tabela prateada com a orientacao INVERTIDA: na .p-tabela da
   transformacao a linha e o rotulo e a coluna e a etapa; aqui a linha e o
   ESTAGIO e a coluna e o que vem em volta da aula. Herda a superficie e
   troca so o que a orientacao pede. */
.p-mapa tbody th { width: auto; white-space: normal; min-width: 9em; }
.p-mapa tbody th b {
  display: block; font-size: var(--rt-corpo); font-weight: 600;
  letter-spacing: -.02em; text-transform: none; color: var(--tinta);
}
.p-mapa tbody th span {
  display: block; margin-top: 3px; font-size: var(--rt-etiqueta); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-leve);
}
.p-mapa tbody td { color: var(--tinta); }
/* o check e o traco: sem cor de semaforo, que aqui nao ha erro nem acerto —
   e PRESENCA. Verde-mint pra "tem", tinta leve pra "ainda nao" */
/* verde profundo: o mint da casa (#3DDC97) sobre prata da 1.9 de contraste.
   #167A52 da 5.2 [MEDIDO 22/08]. Verde chapado so funciona escuro sobre claro. */
.p-sim { font-weight: 700; color: #167A52; }
.p-nao { color: var(--tinta-leve); }
/* o Ultra e a linha de resultado, e a mentoria e o unico item que so ele tem */
.p-mapa .p-linha-resultado td b { display: inline; }
.p-mapa-nota {
  margin: var(--e3) 0 0; font-size: var(--rt-nota); line-height: 1.5;
  color: var(--tinta-leve);
}
/* no celular a linha vira bloco com o nome do estagio no topo; os rotulos de
   coluna ("Aulas", "App"...) voltam pelo data-rotulo — aqui eles SAO
   necessarios, porque a etapa e a linha e nao a coluna */
@media (max-width: 900px) {
  .p-mapa tbody th { min-width: 0; }
  .p-mapa tbody td::before { display: inline; font-weight: 600; color: var(--tinta-meia); }
  .p-mapa tbody td::after { display: none; content: none; }
}

/* ---------- A MATRIZ DE ENTREGAVEIS — a espinha da peca ----------
   Tres colunas por estagio: o que entregamos, o que o lojista sente, o que a
   marca ganha. E o bloco que mais responde "COMO" — por isso ele e o maior. */
.p-matriz { margin: var(--e6) 0 0; display: grid; gap: clamp(16px, 2vw, 26px); }
.p-bloco {
  border-radius: 22px; border: 1px solid var(--fio); overflow: hidden;
  background: linear-gradient(168deg, rgba(168,170,194,.06), rgba(168,170,194,.015));
}
.p-bloco-cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--fio);
}
.p-bloco-cabeca h3 { font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; }
.p-bloco-cabeca .p-quando { font-size: var(--rt-nota); color: var(--tinta-leve); }
.p-bloco-corpo { display: grid; }
@media (min-width: 900px) { .p-bloco-corpo { grid-template-columns: 1.2fr 1fr 1fr; } }
.p-coluna { padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px); }
@media (min-width: 900px) { .p-coluna + .p-coluna { border-left: 1px solid var(--fio); } }
@media (max-width: 899px) { .p-coluna + .p-coluna { border-top: 1px solid var(--fio); } }
.p-coluna h4 {
  margin: 0 0 12px; font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ouro);
}
.p-coluna p { margin: 0; font-size: var(--rt-sub); line-height: 1.58; color: var(--tinta-meia); }
.p-coluna p b { color: var(--tinta); font-weight: 500; }

/* ---------- a camada da marca (personalizacao) ---------- */
.p-camadas { list-style: none; padding: 0; margin: var(--e5) 0 0; display: grid; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 860px) { .p-camadas { grid-template-columns: repeat(4, 1fr); } }
/* 🔑 A BORDA TRACEJADA E SEMANTICA, nao enfeite: tracejado = camada que a
   marca ajusta; solido = entregavel fixo do movimento. As cartas da roleta
   logo acima sao SOLIDAS de proposito — elas sao o nucleo comprovado.
   Quem olha as duas secoes em sequencia le a diferenca sem legenda. */
.p-camada {
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
  border-radius: 18px; border: 1px dashed rgba(244,185,62,.34);
  background: linear-gradient(166deg, rgba(244,185,62,.08), rgba(244,185,62,.02));
  transition: border-color var(--base) var(--curva), background var(--base) var(--curva);
}
.p-camada:hover {
  border-color: rgba(244,185,62,.62);
  background: linear-gradient(166deg, rgba(244,185,62,.13), rgba(244,185,62,.03));
}
.p-camada h3 { font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; }
.p-camada .p-etiqueta {
  display: block; margin-top: 4px; font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ouro);
}
.p-camada ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.p-camada li {
  position: relative; padding-left: 18px;
  font-size: var(--rt-sub); line-height: 1.45; color: var(--tinta-meia);
}
.p-camada li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--ouro);
}

/* ---------- onde juntamos forcas ---------- */
.p-forcas { list-style: none; padding: 0; margin: var(--e5) 0 0; /* 24/08: menos vazio entre a cabeca e os cards */ display: grid; gap: clamp(14px, 1.8vw, 22px); }
@media (min-width: 900px) { .p-forcas { grid-template-columns: repeat(3, 1fr); } }
.p-forca {
  padding: clamp(26px, 2.8vw, 36px); border-radius: 20px;
  border: 1px solid var(--fio);
  background: linear-gradient(166deg, rgba(255,255,255,.7), rgba(255,255,255,.28));
  transition: transform var(--base) var(--curva), border-color var(--base) var(--curva);
}
.p-forca:hover { transform: translateY(-4px); border-color: rgba(244,185,62,.42); }
.p-forca .p-num { font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .16em; color: var(--ouro-fundo); }
.p-forca h3 { margin: 12px 0 10px; font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; }
.p-forca p { margin: 0; font-size: var(--rt-sub); line-height: 1.56; color: var(--tinta-meia); }

/* ---------- a promessa: 4 frentes ---------- */
.p-frentes { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: 1px; background: var(--fio); border: 1px solid var(--fio); border-radius: 18px; overflow: hidden; }
@media (min-width: 780px) { .p-frentes { grid-template-columns: repeat(4, 1fr); } }
.p-frente {
  background: var(--noite-2); padding: clamp(26px, 2.8vw, 36px) clamp(20px, 2.2vw, 26px);
  font-size: var(--rt-titulo); font-weight: 300; letter-spacing: -.03em; color: var(--tinta);
  transition: background var(--base) var(--curva);
}
.p-frente:hover { background: var(--noite-3); }


/* ---------- o proximo passo ---------- */
.p-passos { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(14px, 1.8vw, 20px); }
@media (min-width: 900px) { .p-passos { grid-template-columns: repeat(3, 1fr); } }
.p-passo {
  padding: clamp(26px, 2.8vw, 34px); border-radius: 20px;
  border: 1px solid rgba(244,185,62,.28); background: rgba(244,185,62,.06);
}
.p-passo h3 { font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; color: var(--ouro-alto); }
.p-passo p { margin: 12px 0 0; font-size: var(--rt-sub); line-height: 1.56; color: var(--tinta-meia); }

/* ---------- nota de rodape de bloco ---------- */
.p-ressalva {
  margin: var(--e4) 0 0; max-width: 68ch;
  font-size: var(--rt-nota); line-height: 1.6; color: var(--tinta-leve);
}
.p-ressalva b { color: var(--tinta-meia); font-weight: 500; }
/* 24/08 (Rodrigo): a ressalva dos entregaveis maior e centrada */
.p-ressalva--grande { max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; font-size: var(--rt-frase); line-height: 1.5; color: var(--tinta-meia); }
.p-ressalva--grande b { color: var(--tinta); }
.p-mapa-nota--centro { text-align: center; }

/* ---------- A TABELA DA ESCADA, versao premium (24/08, Rodrigo) ----------
   Textos centrados, moldura com fio prata, sem o cinza do cabecalho de
   linha e sem o hover amarelo; linhas separadas por fio fino e a linha do
   resultado em ouro profundo. O mapa (.p-mapa) continua como era. */
.p-tabela--escada {
  border-radius: 24px; border: 1px solid rgba(11,12,31,.08);
  background: linear-gradient(168deg, #FCFCFF 0%, #F3F4FA 50%, #EBEDF5 100%);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 #fff;
}
.p-tabela--escada th, .p-tabela--escada td { text-align: center; vertical-align: middle; }
.p-tabela--escada thead th { padding: clamp(26px, 2.8vw, 34px) clamp(14px, 1.6vw, 22px) clamp(20px, 2.2vw, 26px); border-bottom: 1px solid rgba(11,12,31,.1); }
.p-tabela--escada thead th:first-child { border-bottom-color: transparent; }
.p-tabela--escada .p-th-nome { font-size: var(--rt-display); font-weight: 400; margin-top: 10px; }
.p-tabela--escada tbody th {
  background: none; white-space: normal; width: 12%;
  padding: clamp(22px, 2.4vw, 30px) clamp(14px, 1.6vw, 22px);
  color: var(--tinta-leve); letter-spacing: .14em;
  border-top: 1px solid rgba(11,12,31,.08); border-right: 1px solid rgba(11,12,31,.06);
}
.p-tabela--escada tbody td {
  padding: clamp(22px, 2.4vw, 30px) clamp(14px, 1.6vw, 22px);
  font-size: var(--rt-corpo); line-height: 1.5; color: var(--tinta-meia);
  border-top: 1px solid rgba(11,12,31,.08);
}
.p-tabela--escada tbody td + td { border-left: 1px solid rgba(11,12,31,.04); }
.p-tabela--escada tbody tr:hover td { background: rgba(11,12,31,.025); }
.p-tabela--escada .p-linha-resultado td { background: linear-gradient(180deg, rgba(244,185,62,.10), rgba(244,185,62,.05)); font-size: var(--rt-frase); }
.p-tabela--escada .p-linha-resultado th, .p-tabela--escada .p-linha-resultado td { border-top-color: rgba(166,118,26,.28); }
@media (max-width: 900px) {
  .p-tabela--escada { border: 0; background: none; box-shadow: none; }
  .p-tabela--escada th, .p-tabela--escada td { text-align: left; }
  .p-tabela--escada tbody th { border-right: 0; width: auto; }
}

/* ---------- A PLACA DE FUNDO DA CAPA ----------
   O lockup grande saiu daqui em 22/08: o menu ja carrega o chevron e o
   wordmark, e repetir os dois na mesma tela e duplicata de marca.
   Ficou o selo de contexto e a placa. */
.p-capa-fundo {
  position: absolute; inset: -6% 0; z-index: 0;
  background: var(--noite) 100% center/cover no-repeat;
  background-image: url("../img/proposta-hero.jpg");
  filter: saturate(.9) contrast(1.04) brightness(.78);
}
.p-capa-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,12,31,.86) 0%, rgba(11,12,31,.42) 8%, rgba(11,12,31,0) 18%),
    linear-gradient(96deg, rgba(11,12,31,.97) 0%, rgba(11,12,31,.94) 36%, rgba(11,12,31,.64) 58%, rgba(11,12,31,.18) 82%, rgba(11,12,31,0) 100%),
    linear-gradient(0deg, rgba(11,12,31,.52) 0%, transparent 30%);
}
.p-capa .wrap { position: relative; z-index: 2; }
@media (max-width: 1180px) {
  .p-capa-veu {
    background:
      linear-gradient(180deg, rgba(11,12,31,.88) 0%, rgba(11,12,31,.48) 9%, rgba(11,12,31,0) 19%),
      linear-gradient(96deg, rgba(11,12,31,.97) 0%, rgba(11,12,31,.95) 50%, rgba(11,12,31,.78) 72%, rgba(11,12,31,.36) 94%, rgba(11,12,31,.22) 100%);
  }
}
@media (max-width: 760px) {
  .p-capa-veu {
    background:
      linear-gradient(0deg, rgba(11,12,31,.93) 0%, rgba(11,12,31,.86) 46%, rgba(11,12,31,.72) 100%),
      linear-gradient(180deg, rgba(11,12,31,.88) 0%, rgba(11,12,31,0) 20%);
  }
}

/* =========================================================================
   O CARROSSEL FLUTUANTE DOS ATRIBUTOS
   Seis adjetivos nao sao razao de compra — sao sabor. Por isso AQUI cabe
   carrossel, e na lista de "o que muda pra sua marca" nao cabia: la o
   comprador confere motivos e esconder 5 de 6 seria o contrario da funcao.
   Correndo, ele pausa no hover e no foco de teclado pra quem quiser ler.
   ========================================================================= */
.p-carrossel {
  --vel: 46s;
  position: relative; overflow: hidden;
  margin-top: var(--e6); padding: 8px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.p-carrossel-trilho { display: flex; width: max-content; animation: correr var(--vel) linear infinite; }
.p-carrossel:hover .p-carrossel-trilho,
.p-carrossel:focus-within .p-carrossel-trilho { animation-play-state: paused; }
.p-carrossel-fila {
  display: flex; align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  list-style: none; margin: 0; padding: 0 clamp(7px, .8vw, 11px);
}
.p-carrossel-fila li {
  position: relative; flex: none; isolation: isolate;
  width: clamp(268px, 26vw, 340px);
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.3vw, 28px);
  border-radius: 20px;
  background: linear-gradient(152deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.62) 40%, rgba(236,238,247,.5) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 44px -26px rgba(11,12,31,.48),
    0 0 44px -26px rgba(244,185,62,.55);
  transition: transform var(--base) var(--curva), box-shadow var(--base) var(--curva);
}
/* o fio de prata da moldura — o mesmo idioma do celular e da esteira */
.p-carrossel-fila li::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: var(--metal-prata);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
.p-carrossel-fila li:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 30px 54px -26px rgba(11,12,31,.5),
    0 0 62px -18px rgba(244,185,62,.8);
}
.p-carrossel-fila li > * { position: relative; z-index: 3; }
/* o icone significa a palavra — nao e enfeite */
.p-icone {
  width: 34px; height: 34px; flex: none;
  color: var(--ouro-fundo);
  transition: color var(--base) var(--curva), transform var(--base) var(--curva);
}
.p-carrossel-fila li:hover .p-icone { color: var(--ouro); transform: scale(1.08); }
.p-carrossel-fila .p-num {
  font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ouro-fundo);
}
.p-carrossel-fila h3 {
  font-size: var(--rt-titulo); font-weight: 500;
  line-height: 1.18; letter-spacing: -.03em; color: var(--tinta);
}
.p-carrossel-fila p {
  margin: 0; font-size: var(--rt-sub); line-height: 1.55; color: var(--tinta-meia);
}
/* Sem animacao vira uma fila que se arrasta com o dedo — nunca um bloco
   parado cortado pela metade. */
@media (prefers-reduced-motion: reduce) {
  .p-carrossel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .p-carrossel-trilho { animation: none; }
  .p-carrossel-fila[aria-hidden="true"] { display: none; }
}

/* ---------- A OPORTUNIDADE · o Pulse apresenta ----------
   UMA ordem de DOM serve as duas telas:
     celular → Pulse · cabeça · as 6 caixas · o fecho
     desktop → Pulse na coluna 1 ao lado da cabeça; caixas e fecho atravessam
   Nao usei `order:` porque ele muda o desenho e NAO muda a ordem do teclado
   nem a do leitor de tela — quem navega por Tab leria fora de sequencia. */
.p-oportunidade { display: grid; gap: clamp(28px, 3.4vw, 46px); }
@media (min-width: 1000px) {
  .p-oportunidade {
    grid-template-columns: minmax(0, 1fr) minmax(0, .34fr);
    column-gap: clamp(30px, 4vw, 64px); align-items: end;
  }
  
  .p-oportunidade-cabeca      { grid-column: 1; grid-row: 1; }
  /* a coluna 1 fica VAZIA de proposito: e onde o Pulse aparece pela placa */
  /* seis caixas pedem tres colunas: com duas, a ultima fileira fica torta */
  .p-oportunidade > .p-travas { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, 1fr); }
  .p-oportunidade > .r-virada { grid-column: 1 / -1; grid-row: 3; }
}
.p-oportunidade > .p-travas,
.p-oportunidade > .r-virada { margin-top: 0; }
/* sem a arte, o texto ocupa a largura toda */
@media (min-width: 1000px) {
  .p-oportunidade:has(.sem-arte) { grid-template-columns: minmax(0, 1fr); }
  .p-oportunidade:has(.sem-arte) .p-oportunidade-cabeca { grid-column: 1; }
}


/* ---------- A SECAO COM O PULSE NO FUNDO ----------
   Ele deixou de ser elemento e virou PLACA. E o espelho do hero: la o assunto
   vive a direita e a copy a esquerda; aqui e o contrario.

   🔴 CICATRIZ DE 22/08: antes ele era uma moldura com `align-self: stretch` e
   `aspect-ratio: 4/5`. Juntas, as duas fazem a caixa derivar a LARGURA da
   altura da linha — ela estourou a coluna e invadiu a headline. Se alguem
   voltar a usar moldura em coluna de grid, `align-self` fica em `end`.
   ========================================================================= */
.p-secao-cena { position: relative; overflow: hidden; }
.p-secao-fundo {
  position: absolute; inset: 0; z-index: 0;
  background: transparent right top / auto 100% no-repeat;
  background-image: url("../img/pulse-industria.jpg");
  filter: saturate(.9) contrast(1.02) brightness(.92);
}
/* O veu e VERTICAL: escurece de cima pra baixo e fica mais claro que antes,
   pra a cena aparecer. O fio horizontal so protege a esquerda, onde a copy
   mora. Antes o veu era horizontal e fechava a direita — inverteu junto com
   a copy. */
.p-secao-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,12,31,.9) 0%, rgba(11,12,31,.78) 38%, rgba(11,12,31,.4) 68%, rgba(11,12,31,.12) 100%),
    linear-gradient(180deg, rgba(11,12,31,.62) 0%, rgba(11,12,31,.34) 34%, rgba(11,12,31,.5) 72%, rgba(11,12,31,.82) 100%);
}
.p-secao-cena > .wrap { position: relative; z-index: 2; }
/* no celular a placa vira textura de fundo: figura de 1400px numa tela de
   400px nao se le, e competir com a copy la e pior que nao aparecer */
@media (max-width: 999px) {
  .p-secao-fundo { background-size: auto 58%; background-position: 118% top; opacity: .42; }
  .p-secao-veu {
    background:
      linear-gradient(0deg, rgba(11,12,31,.96) 0%, rgba(11,12,31,.9) 50%, rgba(11,12,31,.74) 100%);
  }
}

/* ---------- a linha do tempo de QUATRO marcos ----------
   A da /rentabiliza tem tres. O fio nasce no centro do primeiro no e morre no
   centro do ultimo — com 4 colunas isso e 12,5% de cada lado, nao 16,66%. */
@media (min-width: 880px) {
  .r-linha-tempo--4 { grid-template-columns: repeat(4, 1fr); }
  .r-linha-tempo--4::before { left: 12.5%; right: 12.5%; }
}
.p-marco-titulo {
  font-size: var(--rt-titulo); font-weight: 500;
  line-height: 1.18; letter-spacing: -.03em; color: var(--tinta);
}
/* o glow cresce a cada estagio — o quarto e onde o movimento chega */
.r-linha-tempo--4 .r-marco:nth-child(4) .r-marco-no {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 1px rgba(244,185,62,.82), 0 0 66px -6px rgba(244,185,62,.72);
}
.r-linha-tempo--4 .r-marco:nth-child(4).rv.dentro { transition-delay: .48s !important; }

/* ---------- AS CARTAS VERTICAIS DA ROLETA ----------
   Os quatro blocos de entregavel eram faixas largas empilhadas: muito rolo
   pra quem ja entendeu. Viraram cartas verticais na roleta.
   ⚠️ A roleta cabe AQUI e nao cabia na lista de "o que muda pra sua marca":
   la e checklist de compra, e esconder razao de comprador e o contrario da
   funcao. Aqui e camada de profundidade — a comparacao entre etapas ja foi
   resolvida pela TABELA logo acima. */
.p-baralho { margin-top: var(--e6); }
.p-entrega {
  display: flex; flex-direction: column; gap: 0;
  border-radius: 20px; overflow: hidden;
  /* ESCURO sobre a secao prata. A regra que a pagina adotou: elemento escuro
     em secao clara, elemento prateado em secao escura. Cartao claro sobre
     prata nao separa de nada — foi o mesmo defeito dos cases.
     E os tokens sao trocados aqui dentro, entao todo filho resolve pra tinta
     clara sozinho, sem reescrever cor por cor. */
  background: linear-gradient(168deg, #1A1509 0%, #13111E 46%, #0B0C1F 100%);
  border: 1px solid rgba(244,185,62,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 34px 64px -34px rgba(0,0,0,.9);
  color: #F5F6FA;
  --tinta: #F5F6FA;
  --tinta-meia: rgba(245,246,250,.72);
  --tinta-leve: rgba(245,246,250,.46);
  --fio: rgba(255,255,255,.09);
}
.p-entrega-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px);
  border-bottom: 1px solid rgba(244,185,62,.3);
  background: linear-gradient(160deg, rgba(244,185,62,.1), transparent 70%);
}
.p-entrega-topo h3 { font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; color: var(--tinta); }
.p-entrega-topo .p-quando { font-size: var(--rt-nota); color: var(--ouro); }
.p-entrega-bloco { padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px); }
.p-entrega-bloco + .p-entrega-bloco { border-top: 1px solid var(--fio); }
.p-entrega-bloco h4 {
  margin: 0 0 10px; font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-leve);
}
.p-entrega-bloco p { margin: 0; font-size: var(--rt-sub); line-height: 1.58; color: var(--tinta-meia); }
.p-entrega-bloco p b { color: var(--tinta); font-weight: 500; }
/* o bloco do que a MARCA ganha e o que interessa a quem paga: leva o ouro */
.p-entrega-bloco--marca { background: linear-gradient(160deg, rgba(244,185,62,.08), transparent 76%); }
.p-entrega-bloco--marca h4 { color: var(--ouro); }
.p-entrega-bloco--marca p b {
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 500;
}
/* a carta ativa nao levanta no hover: quem manda na posicao e a roleta */
.p-entrega:hover { transform: none; }

/* ---------- O FATO · as quatro frentes de retorno ----------
   Eram quatro substantivos numa caixa: "Market share · Retorno que escala ·
   Permanencia na base · Portabilidade". Palavra solta nao conecta com nada —
   e depois que a secao passou a se chamar O FATO, a divida ficou maior:
   promessa aceita substantivo, FATO cobra explicacao.
   Prata sobre secao escura, que e a regra da pagina. */
.p-fatos {
  list-style: none; padding: 0; margin: var(--e6) 0 0;
  display: grid; gap: clamp(14px, 1.6vw, 20px);
}
@media (min-width: 760px)  { .p-fatos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .p-fatos { grid-template-columns: repeat(4, 1fr); } }
.p-fato {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(28px, 3vw, 36px) clamp(22px, 2.4vw, 28px);
  border-radius: 20px;
  background: linear-gradient(152deg, #FBFCFF 0%, #F2F4FB 46%, #E8EBF5 100%);
  color: #0B0C1F;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 26px 50px -30px rgba(0,0,0,.8);
  transition: transform var(--base) var(--curva), box-shadow var(--base) var(--curva);
}
/* o fio de prata da moldura — mesmo idioma do resto da casa */
.p-fato::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: var(--metal-prata);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8;
}
.p-fato > * { position: relative; z-index: 3; }
.p-fato:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 34px 60px -30px rgba(0,0,0,.85),
    0 0 54px -22px rgba(244,185,62,.6);
}
/* ⚠️ Sobre prata o gradiente de ouro some (ele vai ate #FFE7B0). Aqui o
   acento e ouro SOLIDO profundo, que e o que se le em fundo claro. */
.p-icone-fato { width: 30px; height: 30px; flex: none; color: #8A6416; }
.p-fato h3 {
  font-size: var(--rt-titulo); font-weight: 500;
  line-height: 1.18; letter-spacing: -.03em; color: #0B0C1F;
}
.p-fato p { margin: 0; font-size: var(--rt-sub); line-height: 1.56; color: #474B60; }

/* ---------- COMO ESCALA · os tres cenarios ----------
   🔴 Este bloco foi apagado por engano em 22/08: um `re.sub` meu casou um
   intervalo maior do que devia e levou `.p-cenarios` junto com o bloco
   vizinho. A secao ficou renderizando como lista crua com marcador. */
.p-cenarios {
  list-style: none; padding: 0; margin: var(--e6) 0 0;
  display: grid; gap: clamp(14px, 1.8vw, 20px);
}
@media (min-width: 900px) { .p-cenarios { grid-template-columns: repeat(3, 1fr); } }
.p-cenario {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(28px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  border-radius: 20px;
  background: linear-gradient(158deg, #1A1509 0%, #13111E 46%, #0B0C1F 100%);
  border: 1px solid rgba(244,185,62,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 50px -30px rgba(0,0,0,.9);
  color: #F5F6FA;
  --tinta: #F5F6FA;
  --tinta-meia: rgba(245,246,250,.68);
  transition: transform var(--base) var(--curva), border-color var(--base) var(--curva),
              box-shadow var(--base) var(--curva);
}
.p-cenario:hover {
  transform: translateY(-5px); border-color: rgba(244,185,62,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 34px 60px -30px rgba(0,0,0,.95),
              0 0 56px -22px rgba(244,185,62,.55);
}
/* o cenario recomendado leva o fio de ouro e o unico brilho da fileira */
.p-cenario--recomendado {
  border-color: rgba(244,185,62,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 56px -30px rgba(0,0,0,.92),
              0 0 52px -24px rgba(244,185,62,.6);
}
.p-cenario--recomendado::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--metal-ouro);
}
.p-cenario .p-num {
  font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ouro);
}
.p-cenario h3 {
  margin-top: 10px; font-size: var(--rt-titulo); font-weight: 500;
  letter-spacing: -.03em; color: var(--tinta);
}
.p-cenario .p-volume {
  display: block; margin-top: 14px;
  /* mesma correcao do numero do case: 61px numa tela de 1280 era MAIOR que o
     h2 da secao (56). Numero de card nao passa por cima do titulo. */
  font-size: clamp(36px, 3.5vw, 46px); font-weight: 150; line-height: .88;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-cenario p {
  margin: 12px 0 0; font-size: var(--rt-sub); line-height: 1.5; color: var(--tinta-meia);
}

/* ---------- A PLACA DA UNIAO ----------
   Secao CLARA, entao a logica inverte: a placa e clara e o veu CLAREIA por
   cima, em vez de escurecer. Os cartoes desta secao sao de vidro claro — a
   imagem tem que viver atras deles sem disputar a leitura. */
.p-secao-uniao { position: relative; overflow: hidden; }
.p-uniao-fundo {
  position: absolute; inset: 0; z-index: 0;
  background: var(--prata-chapa) center / cover no-repeat;
  background-image: url("../img/uniao-forcas.jpg");
  filter: saturate(.72) contrast(1.02) brightness(1.06);
}
.p-uniao-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(244,246,251,.96) 0%, rgba(244,246,251,.9) 34%, rgba(244,246,251,.66) 62%, rgba(244,246,251,.5) 100%),
    linear-gradient(180deg, rgba(244,246,251,.86) 0%, rgba(244,246,251,.3) 22%, rgba(244,246,251,.62) 100%);
}
.p-secao-uniao > .wrap { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .p-uniao-veu {
    background: linear-gradient(180deg, rgba(244,246,251,.93) 0%, rgba(244,246,251,.88) 60%, rgba(244,246,251,.95) 100%);
  }
}

/* =========================================================================
   O BANHO FINAL DA LP · 22/08
   Auditoria: h2 62 · lede 22 · selo→h2 22 em TODAS as 15 secoes, gap 196
   entre secoes. O que sobrou fora da escala vem de componente da casa (btn,
   rodape, lockup) e fica como esta — escala da casa nao se reescreve aqui.
   ========================================================================= */
.acoes-centro { justify-content: center; }

/* ---------- MOVIMENTO: parallax vertical nas duas placas ----------
   ⚠️ A licao ja paga: sobra HORIZONTAL so aumenta o corte lateral, e o
   assunto das placas vive colado numa borda. Por isso `inset` e `-6% 0` e o
   transform leva apenas `translateY` — nunca `scale`. */
.p-capa-fundo, .p-secao-fundo, .p-uniao-fundo { will-change: transform; }

/* ---------- SUAVIDADE: a entrada dos blocos ---------- */
.js .p-fato.rv, .js .p-case.rv, .js .p-cenario.rv,
.js .p-trava.rv, .js .p-forca.rv, .js .p-camada.rv, .js .p-passo.rv {
  opacity: 0; transform: translateY(22px) scale(.985);
}
.js .p-fato.rv.dentro, .js .p-case.rv.dentro, .js .p-cenario.rv.dentro,
.js .p-trava.rv.dentro, .js .p-forca.rv.dentro, .js .p-camada.rv.dentro,
.js .p-passo.rv.dentro {
  opacity: 1; transform: none;
  transition: opacity .82s var(--curva), transform .82s var(--curva);
}

/* ---------- ELEGANCIA: foco visivel, em todo lugar ----------
   27 elementos focaveis nesta pagina. Sem contorno proprio, o navegador
   desenha o dele — que some no escuro e briga com o ouro no claro. */
.perna-rentabiliza a:focus-visible,
.perna-rentabiliza button:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 6px;
}
.p-tabela a:focus-visible, .p-fato a:focus-visible { outline-color: #8A6416; }

/* ---------- o fio de ouro que se desenha ao entrar ----------
   Os `::before` dourados do topo dos cartoes ja existem parados. Aqui eles
   nascem do zero e crescem — o mesmo gesto do fio da linha do tempo. */
.js .p-case.rv::before, .js .p-cenario--recomendado.rv::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--curva) .18s;
}
.js .p-case.rv.dentro::before, .js .p-cenario--recomendado.rv.dentro::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .p-fato.rv, .js .p-case.rv, .js .p-cenario.rv, .js .p-trava.rv,
  .js .p-forca.rv, .js .p-camada.rv, .js .p-passo.rv {
    opacity: 1; transform: none; transition: none;
  }
  .js .p-case.rv::before, .js .p-cenario--recomendado.rv::before {
    transform: scaleX(1); transition: none;
  }
}