/* =============================================================
   COFRE · case conceitual de onboarding
   Escrito para este case. Prefixo cf- em todas as classes.
   Os estados iniciais das animações só valem quando o cofre.js
   adiciona a classe cf-a-* no <html>; se o script falhar, tudo
   aparece pronto.
   ============================================================= */

/* Só a Bold: a Belfast é de exibição e fica nos títulos */
@font-face {
  font-family: "Belfast Grotesk";
  src: url("../../fonts/BelfastGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Paleta: grafite e amarelo. Contrastes conferidos (AA) no texto. */
  --fundo: #14171a;
  --fundo-fundo: #0e1013;
  --superficie: #1d2126;
  --superficie-2: #272c32;
  --linha: rgba(242, 241, 236, 0.14);
  --linha-forte: rgba(242, 241, 236, 0.32);
  --texto: #f2f1ec;
  --texto-2: #b9bdc2;
  --texto-3: #8e949a;
  --amarelo: #ffd23f;
  --alerta: #ff8a6b;

  --f-titulo: "Belfast Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* A Belfast Grotesk é de exibição: no corpo de texto o "C" fecha e lembra "O"
     (CPF vira OPF). Por isso ela fica nos títulos e o texto corrido usa Poppins. */
  --f-corpo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* texto de interface do app e dos mockups: o "C" da Belfast fecha e lembra "O" */
  --f-app: "Bricolage Grotesque", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
}

.cf-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cf-pular {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--amarelo);
  color: #14171a;
  font-weight: 700;
  transform: translateY(-160%);
}
.cf-pular:focus {
  transform: none;
}

.cf-wrap {
  width: min(100%, calc(var(--max) + 2 * var(--gutter)));
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.cf-secao {
  padding-block: clamp(72px, 12vw, 160px);
}


.cf-titulo {
  max-width: 22ch;
  font: 700 clamp(30px, 4.6vw, 64px) / 1.06 var(--f-titulo);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.cf-titulo--menor {
  font-size: clamp(28px, 3.6vw, 52px);
}

.cf-subtitulo {
  margin: clamp(56px, 8vw, 96px) 0 24px;
  font: 700 clamp(22px, 2.4vw, 30px) / 1.2 var(--f-titulo);
}

.cf-nota {
  margin-top: 28px;
  font: 400 13px / 1.5 var(--f-mono);
  color: var(--texto-3);
}

.cf-acento {
  color: var(--amarelo);
}

/* ---------- palavras com máscara (revelação dos títulos) ---------- */
.cf-p {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.cf-p__i {
  display: inline-block;
}
.cf-a-pal [data-palavras] .cf-p__i {
  transform: translateY(115%);
}

/* ---------- estados iniciais das revelações ---------- */
.cf-a-rev [data-revela],
.cf-a-hero [data-entrada] {
  opacity: 0;
  transform: translateY(26px);
}
.cf-a-hero .cf-abertura__moeda {
  opacity: 0;
}

/* =============================================================
   TOPO E PROGRESSO
   ============================================================= */
.cf-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(20, 23, 26, 0.92), rgba(20, 23, 26, 0));
  pointer-events: none;
  transition: background 0.3s ease;
}
/* depois de rolar, o topo ganha fundo para o texto não passar por baixo do link */
.cf-topo.is-rolado {
  background: rgba(20, 23, 26, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha);
}
.cf-topo > * {
  pointer-events: auto;
}
.cf-topo__voltar {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  font: 500 14px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--texto);
}
.cf-topo__voltar:hover {
  color: var(--amarelo);
}
.cf-topo__selo {
  padding: 7px 14px;
  border: 1px solid var(--amarelo);
  border-radius: 99px;
  background: rgba(20, 23, 26, 0.72);
  font: 500 12px / 1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amarelo);
  backdrop-filter: blur(8px);
}

.cf-progresso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: transparent;
}
.cf-progresso i {
  display: block;
  height: 100%;
  background: var(--amarelo);
  transform-origin: left;
  transform: scaleX(var(--prog, 0));
}

/* =============================================================
   ABERTURA
   ============================================================= */
.cf-abertura {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 108px 0 80px;
  overflow: clip;
}
.cf-abertura__fundo {
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(60% 60% at 78% 62%, rgba(255, 210, 63, 0.16), transparent 70%);
  -webkit-mask-image: radial-gradient(80% 80% at 60% 55%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 60% 55%, #000 30%, transparent 100%);
  will-change: transform;
}
.cf-abertura__grade {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 960px) {
  .cf-abertura__grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
  }
}

.cf-abertura__titulo {
  max-width: 15ch;
  font: 700 clamp(36px, 5.6vw, 84px) / 1.02 var(--f-titulo);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cf-abertura__lead {
  max-width: 52ch;
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--texto-2);
}

.cf-ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  max-width: 560px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--linha);
}
.cf-ficha dt {
  margin-bottom: 4px;
  font: 500 12px / 1.3 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cf-ficha dd {
  font-size: 15px;
  line-height: 1.4;
}

.cf-abertura__moeda {
  position: relative;
  justify-self: center;
  width: min(100%, 520px);
}
.cf-moeda {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}
.cf-moeda canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cf-moeda__reserva {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
  animation: cf-flutuar 6s ease-in-out infinite;
}
.cf-moeda--3d .cf-moeda__reserva {
  opacity: 0;
  visibility: hidden;
}
@keyframes cf-flutuar {
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

.cf-selo-giro {
  position: absolute;
  top: -4%;
  right: -2%;
  width: clamp(104px, 15vw, 150px);
  height: auto;
  animation: cf-giro 26s linear infinite;
}
.cf-selo-giro__fundo {
  fill: var(--fundo);
  stroke: var(--amarelo);
  stroke-width: 1.5;
}
.cf-selo-giro text {
  font: 500 11px var(--f-mono);
  fill: var(--amarelo);
  letter-spacing: 0.05em;
}
.cf-selo-giro__traco {
  fill: none;
  stroke: var(--amarelo);
  stroke-width: 3;
  stroke-linecap: round;
}
@keyframes cf-giro {
  to {
    transform: rotate(360deg);
  }
}

.cf-abertura__rolar {
  position: absolute;
  left: var(--gutter);
  bottom: 22px;
  display: none;
  align-items: center;
  gap: 12px;
  font: 400 12px / 1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cf-abertura__rolar i {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--amarelo), transparent);
  animation: cf-rolar 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cf-rolar {
  0% {
    transform: scaleY(0);
  }
  60% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
@media (min-width: 960px) and (min-height: 640px) {
  .cf-abertura__rolar {
    display: flex;
  }
}

/* =============================================================
   NÚMEROS
   ============================================================= */
.cf-fato {
  max-width: 24ch;
  margin-top: clamp(36px, 5vw, 64px);
  font: 700 clamp(28px, 4.2vw, 60px) / 1.12 var(--f-titulo);
  letter-spacing: -0.015em;
  color: var(--texto-2);
  /* "pretty", não "balance": com os números sem quebra o balance estoura a linha no celular */
  text-wrap: pretty;
}
.cf-fato b {
  font-size: 1.28em;
  line-height: 1;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =============================================================
   A PALAVRA (BUROCRACIA → 3 passos)
   ============================================================= */
.cf-bur {
  position: relative;
  padding-block: clamp(72px, 12vw, 140px);
  background: var(--fundo-fundo);
}
.cf-bur__palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto;
  text-align: center;
}
.cf-bur__cena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
}
.cf-bur__palavra {
  width: min(100%, 1100px);
  height: auto;
  overflow: visible;
}
.cf-bur__letra {
  fill: none;
  stroke: var(--texto);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-bur__risco {
  fill: none;
  stroke: var(--amarelo);
  stroke-width: 10;
  stroke-linecap: round;
}
.cf-bur__resultado {
  font: 700 clamp(72px, 17vw, 240px) / 0.95 var(--f-titulo);
  letter-spacing: -0.03em;
  color: var(--amarelo);
}
.cf-bur__apoio {
  display: grid;
  gap: 16px;
  max-width: 54ch;
}
.cf-bur__texto {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--texto-2);
}

/* versão animada: a seção vira um palco de uma tela, fixado na rolagem */
.cf-a-bur .cf-bur {
  height: 100vh;
  height: 100svh;
  padding-block: 0;
  overflow: hidden;
}
.cf-a-bur .cf-bur__palco {
  height: 100%;
  justify-content: center;
}
.cf-a-bur .cf-bur__cena,
.cf-a-bur .cf-bur__apoio {
  display: grid;
  place-items: center;
}
.cf-a-bur .cf-bur__palavra,
.cf-a-bur .cf-bur__resultado,
.cf-a-bur .cf-bur__texto {
  grid-area: 1 / 1;
}
.cf-a-bur .cf-bur__cena {
  min-height: clamp(160px, 26vw, 300px);
}
.cf-a-bur .cf-bur__apoio {
  min-height: 7.5em;
}
.cf-a-bur .cf-bur__letra,
.cf-a-bur .cf-bur__risco {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.02;
}
.cf-a-bur .cf-bur__resultado,
.cf-a-bur .cf-bur__texto--depois {
  opacity: 0;
}

/* =============================================================
   ANTES E DEPOIS
   ============================================================= */
.cf-comp__dica {
  margin-top: 20px;
  color: var(--texto-2);
}
.cf-comp__quadro {
  --pos: 50%;
  position: relative;
  height: 720px;
  margin-top: 40px;
  border: 1px solid var(--linha);
  border-radius: 24px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
@media (min-width: 1024px) {
  .cf-comp__quadro {
    height: 500px;
  }
}

.cf-camada {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px 22px 64px;
}
.cf-camada--depois {
  background:
    radial-gradient(50% 70% at 50% 40%, rgba(255, 210, 63, 0.1), transparent 70%),
    var(--superficie);
}
.cf-camada--antes {
  background: var(--fundo-fundo);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.cf-camada__telas {
  display: grid;
  width: 100%;
}
.cf-camada__telas--nove {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 330px);
}
.cf-camada__telas--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 721px) {
  .cf-camada__telas--nove {
    width: min(100%, 330px);
  }
  .cf-camada__telas--tres {
    gap: 18px;
    width: min(100%, 600px);
  }
}
/* telas largas: as 9 telas cabem em uma linha só */
@media (min-width: 1024px) {
  .cf-camada__telas--nove {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    width: 100%;
  }
}
/* o conteúdo das duas camadas ocupa a mesma largura do quadro: assim a barra
   revela a mesma posição nas duas */
.cf-camada__rotulo {
  position: absolute;
  bottom: 18px;
  padding: 6px 12px;
  border-radius: 99px;
  font: 400 12px / 1.2 var(--f-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cf-camada__rotulo b {
  margin-right: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cf-camada__rotulo--antes {
  left: 18px;
  background: rgba(255, 138, 107, 0.14);
  color: var(--alerta);
}
.cf-camada__rotulo--depois {
  right: 18px;
  background: rgba(255, 210, 63, 0.14);
  color: var(--amarelo);
}
.cf-rot-extra {
  display: none;
}
@media (min-width: 721px) {
  .cf-rot-extra {
    display: inline;
  }
}

/* mockups de tela: o container é o .cf-tela e todas as medidas internas (cqw)
   ficam no .cf-tela__in, porque cqw num elemento que é o próprio container
   resolve contra a janela, não contra ele */
.cf-tela {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 9 / 17;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: #191c20;
  overflow: hidden;
}
.cf-tela__in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5cqw;
  height: 100%;
  padding: 9cqw 8cqw 8cqw;
  font-size: 9cqw;
  line-height: 1.2;
}
.cf-tela em {
  position: absolute;
  top: 5cqw;
  right: 7cqw;
  font: 500 8cqw / 1 var(--f-mono);
  font-style: normal;
  color: var(--alerta);
}
.cf-tela__t {
  font: 700 11.5cqw / 1.1 var(--f-app);
  padding-right: 8cqw;
}
.cf-tela__b {
  margin-top: auto;
  padding: 5cqw 3cqw;
  border-radius: 99px;
  background: #3a3f46;
  font: 500 9cqw / 1 var(--f-corpo);
  text-align: center;
  color: var(--texto);
}
.cf-campo {
  display: block;
  padding: 3.5cqw 4cqw;
  border: 1px solid var(--linha-forte);
  border-radius: 4cqw;
  font-size: 8.5cqw;
  min-height: 15cqw;
  color: var(--texto);
}
.cf-campo small {
  display: block;
  margin-bottom: 1cqw;
  font: 400 6.4cqw / 1 var(--f-mono);
  color: var(--texto-3);
}
.cf-opcao {
  display: block;
  padding: 4cqw;
  border: 1px solid var(--linha-forte);
  border-radius: 4cqw;
  font-size: 8.5cqw;
  color: var(--texto-2);
}
.cf-l {
  display: block;
  height: 2.6cqw;
  border-radius: 9cqw;
  background: rgba(242, 241, 236, 0.2);
}
.cf-l--c {
  width: 62%;
}
.cf-linha-chk {
  display: flex;
  align-items: center;
  gap: 3cqw;
}
.cf-linha-chk .cf-l {
  flex: 1;
}
.cf-chk {
  flex: 0 0 7cqw;
  width: 7cqw;
  height: 7cqw;
  border: 1px solid var(--linha-forte);
  border-radius: 1.6cqw;
}
.cf-rosto {
  align-self: center;
  width: 46cqw;
  height: 46cqw;
  margin-block: 4cqw;
  border: 1.4cqw dashed var(--linha-forte);
  border-radius: 50%;
}
.cf-token {
  display: flex;
  gap: 3cqw;
  justify-content: center;
  margin-block: 4cqw;
}
.cf-token i {
  width: 14cqw;
  height: 18cqw;
  border: 1px solid var(--linha-forte);
  border-radius: 3cqw;
}

.cf-comp__alca {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  margin-left: -24px;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.cf-comp__alca::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--amarelo);
}
.cf-comp__grip {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--amarelo);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s var(--ease-saida);
}
.cf-comp__grip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #14171a;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-comp__alca:hover .cf-comp__grip,
.cf-comp__quadro.is-arrastando .cf-comp__grip {
  transform: scale(1.12);
}
.cf-comp__alca:focus-visible .cf-comp__grip {
  outline: 3px solid var(--texto);
  outline-offset: 4px;
}

/* =============================================================
   PROCESSO (7 etapas, rolagem horizontal)
   ============================================================= */
.cf-proc {
  position: relative;
  background: var(--fundo-fundo);
}
.cf-proc__palco {
  padding-block: clamp(72px, 10vw, 128px);
}
.cf-proc__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.cf-proc__contador {
  font: 500 clamp(40px, 6vw, 88px) / 1 var(--f-mono);
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}
.cf-proc__contador b {
  font-weight: 500;
}
.cf-proc__contador span {
  color: var(--texto-3);
}

.cf-proc__janela {
  overflow-x: auto;
  padding-block: 8px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.cf-proc__trilha {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
}
.cf-etapa {
  flex: 0 0 min(84vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--linha);
  border-radius: 24px;
  background: var(--superficie);
  scroll-snap-align: center;
  transition:
    opacity 0.4s ease,
    border-color 0.4s ease;
}
@media (min-width: 900px) {
  .cf-etapa {
    flex-basis: min(480px, 36vw);
    gap: 16px;
    padding: 32px;
  }
}
.cf-etapa__n {
  font: 500 14px / 1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--amarelo);
}
.cf-il {
  width: 100%;
  height: auto;
  max-height: 120px;
  padding: 14px;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--texto-3);
}
.cf-il .cf-y {
  stroke: var(--amarelo);
}
.cf-il .cf-y-fill {
  fill: var(--amarelo);
}
.cf-etapa h3 {
  font: 700 clamp(24px, 2.4vw, 32px) / 1.1 var(--f-titulo);
}
.cf-etapa p {
  color: var(--texto-2);
  font-size: 16px;
}
.cf-etapa .cf-etapa__n {
  color: var(--amarelo);
  font-size: 14px;
}
.cf-etapa__dec {
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.cf-etapa__dec b {
  display: block;
  margin-bottom: 2px;
  font: 500 12px / 1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
}
.cf-etapa p.cf-etapa__met {
  margin-top: auto;
  font: 500 13px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  color: var(--amarelo);
}

.cf-trilho {
  margin-top: 8px;
  --prog: 0;
}
.cf-trilho__barra {
  position: relative;
  height: 2px;
  background: var(--linha);
}
.cf-trilho__barra i {
  position: absolute;
  inset: 0;
  background: var(--amarelo);
  transform-origin: left;
  transform: scaleX(var(--prog));
}
.cf-trilho__pontos {
  position: absolute;
  inset: -5px 0 auto 0;
  display: flex;
  justify-content: space-between;
}
.cf-trilho {
  position: relative;
}
.cf-trilho__pontos li {
  width: 12px;
  height: 12px;
  border: 2px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--fundo-fundo);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}
.cf-trilho__pontos li.is-ativa {
  border-color: var(--amarelo);
  background: var(--amarelo);
  transform: scale(1.25);
}

/* versão animada: o palco ocupa uma tela e a trilha anda na horizontal */
.cf-a-proc .cf-proc__palco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-block: 84px 36px;
}
.cf-a-proc .cf-proc__janela {
  overflow: hidden;
  scroll-snap-type: none;
}
.cf-a-proc .cf-etapa {
  opacity: 0.5;
}
.cf-a-proc .cf-etapa.is-ativa {
  opacity: 1;
  border-color: rgba(255, 210, 63, 0.55);
}
@media (max-height: 780px) {
  .cf-a-proc .cf-etapa {
    padding: 22px 26px;
    gap: 10px;
  }
  .cf-a-proc .cf-il {
    max-height: 84px;
    padding: 8px;
  }
}

/* =============================================================
   DECISÕES (sanfona)
   ============================================================= */
.cf-sanfona {
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--linha);
}
.cf-sanfona__item {
  border-bottom: 1px solid var(--linha);
}
.cf-sanfona__gatilho {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 26px 0;
  text-align: left;
  font: 700 clamp(18px, 2.2vw, 28px) / 1.2 var(--f-titulo);
}
.cf-sanfona__gatilho:hover .cf-sanfona__nome {
  color: var(--amarelo);
}
.cf-sanfona__n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  font: 500 13px / 1 var(--f-mono);
  color: var(--amarelo);
}
.cf-sanfona__nome {
  transition: color 0.25s ease;
}
.cf-sanfona__mais {
  position: relative;
  width: 22px;
  height: 22px;
}
.cf-sanfona__mais::before,
.cf-sanfona__mais::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--amarelo);
  transition: transform 0.4s var(--ease-saida);
}
.cf-sanfona__mais::after {
  transform: rotate(90deg);
}
.is-aberto > h3 .cf-sanfona__mais::after {
  transform: rotate(0deg);
}

.cf-trade {
  display: grid;
  gap: 14px;
  padding: 0 0 30px 0;
}
@media (min-width: 720px) {
  .cf-trade {
    padding-left: 62px;
  }
}
.cf-trade > div {
  display: grid;
  gap: 4px;
}
.cf-trade dt {
  font: 500 12px / 1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.cf-trade dd {
  max-width: 62ch;
  color: var(--texto-2);
}
@media (min-width: 720px) {
  .cf-trade > div {
    grid-template-columns: 130px 1fr;
    gap: 20px;
  }
  .cf-trade dt {
    padding-top: 4px;
  }
}

/* painel: só fica recolhido quando o cofre.js está ativo (classe cf-js) */
.cf-js .cf-sanfona__painel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.5s var(--ease-saida),
    visibility 0s linear 0.5s;
}
.cf-js .is-aberto > .cf-sanfona__painel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}
.cf-js .cf-sanfona__painel > div {
  overflow: hidden;
}

/* =============================================================
   APRENDIZADOS E METAS
   ============================================================= */
.cf-fecho {
  background: var(--fundo-fundo);
}
.cf-aprend {
  display: grid;
  gap: 0;
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--linha);
}
.cf-aprend li {
  padding: 30px 0;
  border-bottom: 1px solid var(--linha);
}
.cf-aprend h3 {
  font: 700 clamp(22px, 2.5vw, 32px) / 1.15 var(--f-titulo);
}
.cf-aprend p {
  max-width: 56ch;
  margin-top: 8px;
  color: var(--texto-2);
}
@media (min-width: 900px) {
  .cf-aprend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
    gap: 28px;
  }
  .cf-aprend li {
    padding: 28px 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--amarelo);
  }
}


/* =============================================================
   EXTRATO DAS METAS (papel impresso) E COFRINHO DO CONVITE
   ============================================================= */
.cf-metas {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(56px, 8vw, 104px);
}
@media (min-width: 900px) {
  .cf-metas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  }
}
.cf-metas__texto p:not(.cf-nota) {
  max-width: 34ch;
  color: var(--texto-2);
}
.cf-metas__texto .cf-subtitulo {
  margin: 0 0 14px;
}
.cf-extrato {
  --papel: #f2f1ec;
  position: relative;
  padding: 26px 28px 46px;
  background: var(--papel);
  color: #14171a;
  font-family: var(--f-mono);
  transform: rotate(-1.1deg);
  /* borda de baixo serrilhada, como papel arrancado da bobina */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
}
.cf-extrato header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px dashed rgba(20, 23, 26, 0.45);
}
.cf-extrato header b {
  font: 700 28px / 1 var(--f-titulo);
}
.cf-extrato header span {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cf-extrato dl {
  display: grid;
  gap: 14px;
  padding-block: 20px;
}
.cf-extrato dl > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}
.cf-extrato dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
}
.cf-extrato dt::after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted rgba(20, 23, 26, 0.4);
  transform: translateY(-3px);
}
.cf-extrato dd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cf-extrato s {
  color: #5e6368;
  text-decoration-thickness: 2px;
}
.cf-extrato dd i {
  font-style: normal;
}
.cf-extrato dd b {
  padding: 1px 7px;
  background: var(--amarelo);
  font-weight: 700;
}
.cf-extrato footer {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 2px dashed rgba(20, 23, 26, 0.45);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cf-extrato__barras {
  height: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 38' preserveAspectRatio='none'%3E%3Cpath fill='%2314171a' d='M0 0h2v38H0zM5 0h1v38H5zM9 0h3v38H9zM15 0h1v38h-1zM19 0h2v38h-2zM24 0h1v38h-1zM28 0h3v38h-3zM34 0h1v38h-1zM38 0h2v38h-2zM43 0h1v38h-1zM47 0h3v38h-3zM53 0h2v38h-2zM58 0h1v38h-1zM62 0h3v38h-3zM68 0h1v38h-1zM72 0h2v38h-2zM77 0h1v38h-1zM81 0h3v38h-3zM87 0h1v38h-1zM91 0h2v38h-2zM96 0h3v38h-3zM102 0h1v38h-1zM106 0h2v38h-2zM111 0h1v38h-1zM115 0h3v38h-3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* animada: o papel sai da impressora, linha a linha, de cima para baixo */
.cf-a-ext .cf-extrato {
  clip-path: inset(0 0 100% 0);
}

.cf-cofrinho {
  width: clamp(150px, 20vw, 220px);
  height: auto;
  overflow: visible;
}
.cf-cofrinho__corpo {
  fill: var(--superficie-2);
  stroke: var(--linha-forte);
  stroke-width: 2;
}
.cf-cofrinho__fenda {
  fill: var(--amarelo);
}
.cf-cofrinho__disco {
  fill: none;
  stroke: var(--linha-forte);
  stroke-width: 2;
}
.cf-cofrinho__marca {
  fill: none;
  stroke: var(--texto-3);
  stroke-width: 2;
  stroke-linecap: round;
}

/* =============================================================
   CONVITE E RODAPÉ
   ============================================================= */
.cf-chamada {
  position: relative;
  padding-block: clamp(88px, 14vw, 180px);
  overflow: clip;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(255, 210, 63, 0.2), transparent 70%),
    var(--fundo);
}
.cf-chamada__miolo {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.cf-chamada .cf-titulo {
  max-width: 18ch;
}
.cf-chamada__lead {
  max-width: 44ch;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--texto-2);
}
.cf-chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.cf-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid var(--amarelo);
  border-radius: 99px;
  background: var(--amarelo);
  font: 700 17px / 1 var(--f-titulo);
  text-decoration: none;
  color: #14171a;
  transition:
    transform 0.3s var(--ease-saida),
    background 0.3s ease,
    color 0.3s ease;
}
.cf-botao:hover {
  transform: translateY(-3px);
}
.cf-botao--sec {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--texto);
}
.cf-botao--sec:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.cf-rodape {
  padding: 40px 0 56px;
  border-top: 1px solid var(--linha);
  background: var(--fundo-fundo);
  color: var(--texto-2);
}
.cf-rodape__miolo {
  display: grid;
  gap: 18px;
  font-size: 14px;
}
.cf-rodape__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 20px / 1 var(--f-titulo);
  color: var(--texto);
}
.cf-rodape__miolo p {
  max-width: 62ch;
}
.cf-rodape__voltar {
  justify-self: start;
  font: 500 14px / 1 var(--f-mono);
  text-decoration: none;
  color: var(--amarelo);
}
.cf-rodape__voltar:hover {
  text-decoration: underline;
}
@media (min-width: 800px) {
  .cf-rodape__miolo {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
  }
}

/* =============================================================
   TELA DE CARGA
   ============================================================= */
#carga {
  display: grid;
  place-items: center;
}
.cf-carga__miolo {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.cf-carga__miolo img {
  border-radius: 16px;
  animation: cf-pulsar 1.6s ease-in-out infinite;
}
.cf-carga__pct {
  font: 500 14px / 1 var(--f-mono);
  letter-spacing: 0.2em;
  color: var(--amarelo);
}
.cf-carga__barra {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(242, 241, 236, 0.1);
}
.cf-carga__barra i {
  display: block;
  height: 100%;
  background: var(--amarelo);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
@keyframes cf-pulsar {
  50% {
    transform: scale(0.92);
  }
}

/* =============================================================
   MOVIMENTO REDUZIDO
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* cf-app:inicio */
/* =============================================================
   APP EM ALTA FIDELIDADE
   Os celulares do comparador, da seção do app, os estados e o protótipo
   clicável usam o mesmo HTML (cofre-telas.js). As telas foram desenhadas
   em 390 de largura: 1 unidade (--u) é 1/390 da largura da caixa
   (.cf-ap-caixa, o container), então tudo escala junto, do celular da
   página ao modal.
   ============================================================= */
.cf-ap-caixa {
  container-type: inline-size;
  width: 100%;
  height: 100%;
}
.cf-ap {
  --u: calc(100cqw / 390);
  --sup: 0; /* folga extra no topo para o recorte da câmera do celular */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  text-align: left;
}
.cf-fone .cf-ap {
  --sup: 18;
}
.cf-ap *,
.cf-ap *::before,
.cf-ap *::after {
  box-sizing: border-box;
}
.cf-ap button:disabled {
  cursor: not-allowed;
}
.cf-ap :focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 2px;
}
.cf-ap [data-foco]:focus {
  outline: none;
}
.cf-ap h4 {
  margin: 0;
}
/* celular da página: o recorte da câmera come espaço no topo, então o teclado encolhe um pouco para caber inteiro */
.cf-fone .cf-ap--lancar .cf-ap-corpo {
  gap: calc(14 * var(--u));
  padding-top: calc(18 * var(--u));
}
.cf-fone .cf-ap--lancar .cf-ap-tecla {
  height: calc(54 * var(--u));
}

/* ícones de traço */
.cf-ic {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-ic--p {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.cf-ic--g {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
.cf-ic--gira path:last-child {
  transform-origin: 12px 12px;
  animation: cf-ap-borda 1s linear infinite;
}

/* ---------- cabeça de cada passo ---------- */
.cf-ap-cab {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  padding: calc((20 + var(--sup)) * var(--u)) calc(20 * var(--u)) 0;
}
.cf-ap-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
}
.cf-ap-marca {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.cf-ap-marca__ic {
  flex: none;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}
.cf-ap-marca span {
  font: 700 calc(22 * var(--u)) / 1 var(--f-app);
}
.cf-ap-passo {
  font: 400 calc(13 * var(--u)) / 1.3 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cf-ap-vol {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: calc(16 * var(--u));
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
}
.cf-ap-prog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(6 * var(--u));
}
.cf-ap-prog i {
  display: block;
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: rgba(242, 241, 236, 0.16);
}
.cf-ap-prog i.is-on {
  background: var(--amarelo);
}

/* ---------- miolo que rola e rodapé fixo ---------- */
.cf-ap-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(30 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.cf-ap-corpo > * {
  flex: none;
}
.cf-ap--lancar .cf-ap-corpo {
  gap: calc(16 * var(--u));
  padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
}
.cf-ap--mes .cf-ap-corpo {
  gap: calc(20 * var(--u));
  padding: calc((20 + var(--sup)) * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
}
.cf-ap-rodape {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.cf-ap-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: 100%;
  height: calc(58 * var(--u));
  border-radius: calc(18 * var(--u));
  border: 0;
  background: var(--amarelo);
  color: #14171a;
  font: 700 calc(19 * var(--u)) / 1 var(--f-app);
}
.cf-ap-cta .cf-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 2.4;
}
.cf-ap-cta.is-off {
  background: rgba(242, 241, 236, 0.1);
  color: var(--texto-3);
}
.cf-ap-cta.is-off .cf-ic {
  display: none;
}
.cf-ap-cta--m {
  height: calc(56 * var(--u));
  font-size: calc(18 * var(--u));
}
.cf-ap-cta--fino {
  height: calc(50 * var(--u));
  border: 1px solid var(--linha-forte);
  border-radius: calc(16 * var(--u));
  background: transparent;
  color: var(--texto);
  font: 600 calc(15.5 * var(--u)) / 1 var(--f-corpo);
}
.cf-ap-legal {
  text-align: center;
  font-size: calc(12.5 * var(--u));
  line-height: 1.4;
  color: var(--texto-3);
}

/* ---------- textos ---------- */
.cf-ap-t {
  font-family: var(--f-app);
  font-weight: 700;
  font-size: calc(42 * var(--u));
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.cf-ap-t--m {
  font-size: calc(40 * var(--u));
}
.cf-ap-t--p {
  font-size: calc(36 * var(--u));
  line-height: 1.05;
}
.cf-ap-t--s {
  font-size: calc(22 * var(--u));
  line-height: 1.1;
  letter-spacing: 0;
}
.cf-ap-t--s2 {
  font-size: calc(20 * var(--u));
  line-height: 1.15;
  letter-spacing: 0;
}
.cf-ap-t--f {
  font-size: calc(30 * var(--u));
  line-height: 1.08;
}
.cf-ap-lead {
  max-width: 32ch;
  margin-top: calc(12 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  color: var(--texto-2);
}
.cf-ap-rot {
  font: 400 calc(12 * var(--u)) / 1.3 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cf-ap-rot--mudo {
  color: var(--texto-3);
}
.cf-ap-ajuda {
  font-size: calc(13.5 * var(--u));
  line-height: 1.4;
  color: var(--texto-3);
}
.cf-ap-ajuda--ico {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  line-height: 1.45;
}
.cf-ap-ajuda--ico .cf-ic {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-top: calc(1 * var(--u));
  stroke: var(--amarelo);
  stroke-width: 1.8;
}

/* ---------- 1 · campos ---------- */
.cf-ap-campo {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.cf-ap-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(58 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 1px solid var(--linha-forte);
  border-radius: calc(14 * var(--u));
  background: var(--superficie);
  font: 500 calc(18 * var(--u)) / 1.2 var(--f-corpo);
  color: var(--texto);
  outline: 0;
}
.cf-ap-input--mono {
  font: 500 calc(19 * var(--u)) / 1.2 var(--f-mono);
  letter-spacing: 0.04em;
}
input.cf-ap-input:focus {
  border-color: var(--amarelo);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 210, 63, 0.25);
}
.cf-ap-input--erro {
  border: calc(2 * var(--u)) solid var(--alerta);
  background: var(--fundo);
}

/* ---------- 2 · de onde vem o dinheiro ---------- */
.cf-ap-opcoes {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}
.cf-ap-opc {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: 100%;
  padding: calc(18 * var(--u));
  border: calc(2 * var(--u)) solid rgba(242, 241, 236, 0.2);
  border-radius: calc(20 * var(--u));
  background: var(--superficie);
  color: var(--texto);
  text-align: left;
}
.cf-ap-opc.is-on {
  border-color: var(--amarelo);
  background: rgba(255, 210, 63, 0.08);
}
.cf-ap-opc__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--superficie-2);
  color: var(--texto-2);
}
.cf-ap-opc.is-on .cf-ap-opc__ic {
  color: var(--amarelo);
}
.cf-ap-opc__ic .cf-ic {
  stroke-width: 1.8;
}
.cf-ap-opc__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
}
.cf-ap-opc__txt b {
  font: 700 calc(20 * var(--u)) / 1.15 var(--f-app);
}
.cf-ap-opc__txt span {
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  color: var(--texto-2);
}
.cf-ap-opc__ck {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border: calc(2 * var(--u)) solid rgba(242, 241, 236, 0.4);
  border-radius: 50%;
}
.cf-ap-opc.is-on .cf-ap-opc__ck {
  border-color: var(--amarelo);
  background: var(--amarelo);
  color: #14171a;
}
.cf-ap-opc__ck .cf-ic {
  stroke-width: 3.2;
}

/* ---------- 3 · primeiro lançamento ---------- */
.cf-ap-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(18 * var(--u));
  background: var(--superficie);
}
.cf-ap-seg__b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(48 * var(--u));
  border-radius: calc(14 * var(--u));
  color: var(--texto-2);
  font: 500 calc(16 * var(--u)) / 1 var(--f-corpo);
}
.cf-ap-seg__b.is-on {
  background: var(--amarelo);
  color: #14171a;
  font-weight: 600;
}
.cf-ap-valor {
  padding: calc(6 * var(--u)) 0 calc(2 * var(--u));
  text-align: center;
}
.cf-ap-valor__n {
  margin-top: calc(4 * var(--u));
  font: 500 calc(60 * var(--u)) / 1.05 var(--f-mono);
  letter-spacing: -0.02em;
}
.cf-ap-valor__rs {
  font-size: calc(28 * var(--u));
  font-weight: 400;
  color: var(--texto-3);
}
.cf-ap-cursor {
  display: inline-block;
  width: calc(3 * var(--u));
  height: calc(50 * var(--u));
  margin-left: calc(4 * var(--u));
  vertical-align: calc(-6 * var(--u));
  background: var(--amarelo);
  animation: cf-ap-pisca 1.1s steps(1) infinite;
}
.cf-ap-cat {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(18 * var(--u));
  background: var(--superficie);
}
.cf-ap-cat__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--superficie-2);
  color: var(--amarelo);
}
.cf-ap-cat__ic .cf-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 1.8;
}
.cf-ap-cat__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}
.cf-ap-cat__txt span {
  font-size: calc(12.5 * var(--u));
  color: var(--texto-3);
}
.cf-ap-cat__txt b {
  font-size: calc(17 * var(--u));
  font-weight: 500;
}
.cf-ap-trocar {
  flex: none;
  display: grid;
  place-items: center;
  min-height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 1px solid var(--linha-forte);
  border-radius: calc(12 * var(--u));
  font: 600 calc(14.5 * var(--u)) / 1 var(--f-corpo);
}
.cf-ap-teclas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}
.cf-ap-tecla {
  display: grid;
  place-items: center;
  height: calc(58 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--superficie);
  font: 500 calc(26 * var(--u)) / 1 var(--f-mono);
}
.cf-ap-tecla--ap {
  border: 1px solid rgba(242, 241, 236, 0.2);
  background: transparent;
  color: var(--texto-2);
}

/* ---------- 4 · o primeiro saldo do mês ---------- */
.cf-ap-pilula {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1px solid rgba(242, 241, 236, 0.2);
  border-radius: 999px;
  font: 500 calc(14 * var(--u)) / 1.2 var(--f-corpo);
  color: var(--texto-2);
}
.cf-ap-saldo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  overflow: hidden;
  padding: calc(22 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(28 * var(--u));
  background: var(--superficie);
}
.cf-ap-saldo__txt {
  min-width: 0;
}
.cf-ap-saldo__v {
  margin-top: calc(8 * var(--u));
  font: 500 calc(42 * var(--u)) / 1 var(--f-mono);
  letter-spacing: -0.02em;
}
.cf-ap-saldo__v span {
  font-size: calc(20 * var(--u));
  font-weight: 400;
  color: var(--texto-3);
}
.cf-ap-saldo__v.is-neg {
  color: var(--alerta);
}
.cf-ap-saldo__d {
  margin-top: calc(14 * var(--u));
  font: 400 calc(13.5 * var(--u)) / 1.6 var(--f-mono);
  color: var(--texto-2);
}
.cf-ap-saldo__d b {
  font-weight: 500;
  color: var(--texto);
}
.cf-ap-saldo--simples {
  flex-direction: column;
  align-items: stretch;
  gap: calc(8 * var(--u));
  padding: calc(22 * var(--u));
}
.cf-ap-saldo--simples .cf-ap-saldo__v {
  margin-top: 0;
  font-size: calc(44 * var(--u));
}
.cf-ap-saldo--simples .cf-ap-saldo__d {
  margin-top: calc(10 * var(--u));
}

/* a moeda: duas faces e uma borda de 32 fatias, em CSS 3D */
.cf-ap-moeda {
  position: relative;
  flex: none;
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  perspective: calc(560 * var(--u));
}
.cf-ap-moeda__incl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
}
.cf-ap-moeda__gira {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: cf-ap-gira 9s linear infinite;
}
.cf-ap-moeda__face {
  position: absolute;
  left: calc(-52 * var(--u));
  top: calc(-52 * var(--u));
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  border-radius: 50%;
  backface-visibility: hidden;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 45%, #b88b00 100%);
  transform: translateZ(calc(8 * var(--u)));
}
.cf-ap-moeda__face--verso {
  transform: rotateY(180deg) translateZ(calc(8 * var(--u)));
}
.cf-ap-moeda__face i {
  position: absolute;
  inset: calc(9 * var(--u));
  border: calc(2 * var(--u)) solid rgba(20, 23, 26, 0.28);
  border-radius: 50%;
}
.cf-ap-moeda__face svg {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
}
.cf-ap-moeda__gira > i {
  position: absolute;
  left: calc(-8 * var(--u));
  top: calc(-5.62 * var(--u));
  width: calc(16 * var(--u));
  height: calc(11.24 * var(--u));
  background: linear-gradient(180deg, #9c7600, #ffd23f 50%, #9c7600);
  transform: rotateZ(calc(var(--a) * 1deg)) translateX(calc(52 * var(--u))) rotateY(90deg);
}

.cf-ap-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: calc(10 * var(--u));
}
.cf-ap-sec__n {
  font-size: calc(13.5 * var(--u));
  color: var(--texto-3);
}
.cf-ap-lista {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.cf-ap-lanc {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border: 1px solid rgba(242, 241, 236, 0.12);
  border-radius: calc(18 * var(--u));
  background: var(--superficie);
}
.cf-ap-lanc__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--superficie-2);
  color: var(--amarelo);
}
.cf-ap-lanc.is-saiu .cf-ap-lanc__ic,
.cf-ap-lanc.is-saiu .cf-ap-lanc__v {
  color: var(--alerta);
}
.cf-ap-lanc__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}
.cf-ap-lanc__txt b {
  font-size: calc(16 * var(--u));
  font-weight: 500;
}
.cf-ap-lanc__txt span {
  font-size: calc(13 * var(--u));
  color: var(--texto-3);
}
.cf-ap-lanc__v {
  font: 500 calc(17 * var(--u)) / 1.2 var(--f-mono);
  color: var(--amarelo);
  white-space: nowrap;
}
.cf-ap-resto {
  padding: calc(18 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(22 * var(--u));
  background: var(--superficie);
}
.cf-ap-resto__lead {
  margin: calc(6 * var(--u)) 0 calc(14 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.45;
  color: var(--texto-2);
}
.cf-ap-resto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) 0;
  border-top: 1px solid rgba(242, 241, 236, 0.1);
  font-size: calc(15 * var(--u));
}
.cf-ap-resto li:last-child {
  padding-bottom: 0;
}
.cf-ap-resto__s {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(13.5 * var(--u));
  text-align: right;
  color: var(--texto-2);
}
.cf-ap-resto__s.is-gira {
  color: var(--amarelo);
}

/* ---------- estados ---------- */
.cf-ap-aviso {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(255, 210, 63, 0.4);
  border-radius: calc(18 * var(--u));
  background: rgba(255, 210, 63, 0.12);
}
.cf-ap-aviso .cf-ic {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-top: calc(1 * var(--u));
  color: var(--amarelo);
  stroke-width: 2.4;
}
.cf-ap-aviso p {
  font-size: calc(15 * var(--u));
  line-height: 1.45;
}
.cf-ap-aviso b {
  font-weight: 600;
}
.cf-ap-corpo--conf {
  gap: calc(18 * var(--u));
  padding: calc((20 + var(--sup)) * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
}
.cf-ap-fundo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  padding: calc((20 + var(--sup)) * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  opacity: 0.35;
}
.cf-ap-fundo__a,
.cf-ap-fundo__b {
  display: block;
  border-radius: calc(28 * var(--u));
  background: var(--superficie);
}
.cf-ap-fundo__a {
  height: calc(190 * var(--u));
}
.cf-ap-fundo__b {
  height: calc(70 * var(--u));
  border-radius: calc(18 * var(--u));
}
.cf-ap-veu {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 12, 0.6);
}
.cf-ap-folha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(28 * var(--u)) calc(20 * var(--u));
  border-top: 1px solid rgba(242, 241, 236, 0.2);
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: var(--superficie);
}
.cf-ap-folha__ic {
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 138, 107, 0.16);
  color: var(--alerta);
}
.cf-ap-folha__txt {
  margin-top: calc(8 * var(--u));
  font-size: calc(15.5 * var(--u));
  line-height: 1.5;
  color: var(--texto-2);
}
.cf-ap-erro {
  font-size: calc(13.5 * var(--u));
  line-height: 1.4;
  color: var(--alerta);
}
.cf-ap-folha__bt {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-top: calc(4 * var(--u));
}
.cf-ap-faixa {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc((14 + var(--sup)) * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--linha);
  background: var(--superficie-2);
  font: 500 calc(15 * var(--u)) / 1.3 var(--f-corpo);
}
.cf-ap-faixa .cf-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--alerta);
}
.cf-ap-corpo--off {
  gap: calc(18 * var(--u));
  padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
}
.cf-ap-corpo--off .cf-ap-valor {
  padding: calc(10 * var(--u)) 0 calc(4 * var(--u));
}
.cf-ap-nota {
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 138, 107, 0.1);
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  color: var(--texto);
}

/* protótipo em janela baixa: o teclado e o valor encolhem para a tela do lançamento caber sem rolar */
@media (max-height: 1000px) {
  .cf-ap--vivo.cf-ap--lancar .cf-ap-cab {
    gap: calc(14 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-corpo {
    gap: calc(12 * var(--u));
    padding-top: calc(16 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-t {
    font-size: calc(32 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-seg__b {
    height: calc(44 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-valor {
    padding: 0;
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-valor__n {
    font-size: calc(52 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-cursor {
    height: calc(44 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-teclas {
    gap: calc(8 * var(--u));
  }
  .cf-ap--vivo.cf-ap--lancar .cf-ap-tecla {
    height: calc(46 * var(--u));
  }
}

@keyframes cf-ap-pisca {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes cf-ap-gira {
  to {
    transform: rotateY(360deg);
  }
}
@keyframes cf-ap-borda {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-ap *,
  .cf-ap *::before,
  .cf-ap *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================
   CELULAR, SEÇÃO DO APP, ESTADOS E PROTÓTIPO CLICÁVEL
   ============================================================= */

/* moldura do celular: no comparador (miniatura), na seção do app e nos estados */
.cf-fone {
  --b: 8px;
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  overflow: hidden;
  border: var(--b) solid #2a3036;
  border-radius: calc(var(--b) * 5);
  background: var(--fundo);
  box-shadow:
    0 0 0 1px var(--linha-forte),
    0 40px 60px -34px rgba(0, 0, 0, 0.9);
}
.cf-fone::before {
  content: "";
  position: absolute;
  top: calc(var(--b) * 0.75);
  left: 50%;
  z-index: 3;
  width: 30%;
  height: calc(var(--b) * 2);
  border-radius: 99px;
  background: #2a3036;
  transform: translateX(-50%);
}
.cf-fone--comp {
  --b: 3px;
  width: 100%;
}
@media (min-width: 721px) {
  .cf-fone--comp {
    --b: 4px;
  }
}

/* seção "O app, tela a tela" */
.cf-app {
  position: relative;
  background: radial-gradient(60% 40% at 50% 0%, rgba(255, 210, 63, 0.06), transparent 70%);
}
.cf-app__lead {
  max-width: 58ch;
  margin-top: 20px;
  color: var(--texto-2);
}
.cf-app__lista {
  display: flex;
  gap: 20px;
  margin: clamp(36px, 5vw, 64px) calc(var(--gutter) * -1) 0;
  padding: 8px var(--gutter) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.cf-app__item {
  flex: 0 0 min(72vw, 280px);
  scroll-snap-align: center;
}
@media (min-width: 900px) {
  .cf-app__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 36px);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .cf-app__lista--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cf-app__item {
    flex: none;
  }
}
.cf-app__item figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.cf-app__item .cf-fone {
  width: 100%;
  max-width: 280px;
}
.cf-app__item figcaption {
  display: grid;
  gap: 6px;
  max-width: 30ch;
  text-align: center;
}
.cf-app__item figcaption b {
  font: 500 12px / 1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.cf-app__item figcaption span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-2);
}
.cf-app__estados {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--linha);
}
.cf-app__estados h3 {
  max-width: 24ch;
  font: 700 clamp(24px, 2.8vw, 38px) / 1.1 var(--f-titulo);
  letter-spacing: -0.01em;
}
.cf-app__estados > p {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--texto-2);
}
.cf-app__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 32px;
}
.cf-comp__acoes {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* o botão do protótipo só existe com JavaScript (e com o módulo das telas) */
button.cf-botao[data-abrir-app] {
  display: none;
}
.cf-js button.cf-botao[data-abrir-app] {
  display: inline-flex;
}

/* ---------- protótipo clicável (<dialog>) ---------- */
html.cf-travado {
  overflow: hidden;
}
.cf-modal {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--linha-forte);
  border-radius: 28px;
  background: var(--fundo);
  color: var(--texto);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.cf-modal::backdrop {
  background: rgba(8, 10, 12, 0.78);
  backdrop-filter: blur(6px);
}
/* navegadores sem <dialog>: o script usa esta versão simples */
.cf-modal--simples[open] {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 200;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 100vmax rgba(8, 10, 12, 0.78),
    0 40px 100px rgba(0, 0, 0, 0.7);
}
.cf-loja {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 3.5vw, 24px);
}
.cf-loja__cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cf-loja__titulo {
  font: 700 clamp(26px, 4.2vw, 32px) / 1.05 var(--f-titulo);
  letter-spacing: -0.01em;
}
.cf-loja__titulo:focus {
  outline: none;
}
.cf-loja__sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-2);
}
.cf-loja__fechar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
}
.cf-loja__fechar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.cf-loja__fechar:hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: #14171a;
}
.cf-loja__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cf-loja__etapa {
  font: 500 12px / 1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cf-loja__recomecar {
  flex: none;
  min-height: 44px;
  padding: 0 4px;
  font: 500 13px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--texto-2);
}
.cf-loja__recomecar:hover {
  color: var(--amarelo);
}
.cf-loja__app {
  height: min(860px, calc(100svh - 170px));
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 24px;
  background: var(--fundo);
}
/* ---------- RESPONSIVO · o protótipo nunca passa da altura da tela ----------
   Antes o app tinha altura min(860px, 100svh - 170px), mas a casca do diálogo (padding,
   cabeçalho, barra e espaços) passa de 170px: o diálogo sempre rolava e o botão do
   app ficava abaixo da dobra (rolagem dupla). Agora o diálogo tem altura própria
   (até 1090px, no máximo a da tela) e o app ocupa o que sobra, com rolagem só
   dentro dele. */
.cf-modal {
  height: min(1090px, calc(100vh - 24px));
  height: min(1090px, calc(100svh - 24px));
  max-height: none;
  overflow: hidden;
}
.cf-modal[open] {
  display: flex;
  flex-direction: column;
}
.cf-loja {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.cf-loja__app {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
/* tela baixa (notebook, celular na horizontal): a casca encolhe para dar altura ao app */
@media (max-height: 760px) {
  .cf-loja {
    gap: 6px;
    padding: 14px 16px;
  }
  .cf-loja__sub {
    display: none;
  }
  .cf-loja__titulo {
    font-size: 22px;
    line-height: 1.1;
  }
}
/* altura muito baixa (celular na horizontal): o app volta ao tamanho natural e o
   diálogo rola, como antes; com a casca ocupando metade da tela o app não tem
   altura para os próprios botões */
@media (max-height: 520px) and (min-width: 521px) {
  .cf-modal {
    height: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100svh - 24px);
    overflow: auto;
  }
  .cf-modal[open] {
    display: block;
  }
  .cf-loja {
    display: grid;
  }
  .cf-loja__app {
    height: 440px;
    min-height: 420px;
  }
}
/* no celular o protótipo ocupa a tela toda: assim 1u = 1px e os alvos de toque seguem em 44px */
@media (max-width: 520px) {
  .cf-modal {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100svh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .cf-loja {
    gap: 8px;
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 14px 0 0;
  }
  .cf-loja__cab,
  .cf-loja__barra {
    padding-inline: 16px;
  }
  .cf-loja__etapa {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .cf-loja__app {
    height: auto;
    min-height: 0;
    border-width: 1px 0 0;
    border-radius: 0;
  }
}
/* cf-app:fim */

/* =============================================================
   BOOST VISUAL · a página é o cofre
   Tudo abaixo vale por cima do que já existia. Os efeitos que dependem
   de script só aparecem com a classe cf-js (cofre.js) ou cf-ex
   (cofre-extras.js) no <html>; sem eles a página é a de antes.
   ============================================================= */

@property --da {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* "Pausar o movimento" para tudo que anda só com CSS */
html.cf-pausado *,
html.cf-pausado *::before,
html.cf-pausado *::after {
  animation-play-state: paused !important;
}

/* ---------- topo: pausa e "saldo da leitura" ---------- */
.cf-topo__dir {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-topo__saldo {
  display: none;
  font: 500 12px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .cf-js .cf-topo__saldo {
    display: inline;
  }
}
.cf-pausa {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 99px;
  background: rgba(20, 23, 26, 0.72);
  font: 500 12px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  color: var(--texto);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}
.cf-js .cf-pausa {
  display: inline-flex;
}
.cf-pausa svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.cf-pausa__toca {
  display: none;
}
.cf-pausa[aria-pressed="true"] .cf-pausa__toca {
  display: block;
}
.cf-pausa[aria-pressed="true"] .cf-pausa__pausa {
  display: none;
}
.cf-pausa:hover,
.cf-pausa[aria-pressed="true"] {
  border-color: var(--amarelo);
  color: var(--amarelo);
}
@media (max-width: 719px) {
  .cf-pausa {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .cf-pausa span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 520px) {
  .cf-topo__dir {
    gap: 8px;
  }
  .cf-topo__selo {
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 400px) {
  .cf-topo__nome {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-js .cf-pausa {
    display: none;
  }
}

/* ---------- barra de leitura: uma moeda rola na ponta ---------- */
.cf-progresso {
  overflow: visible;
}
.cf-progresso__moeda {
  display: none;
  position: absolute;
  top: -8px;
  left: calc(var(--prog, 0) * 100%);
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 48%, #9c7600 100%);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(20, 23, 26, 0.25);
  rotate: calc(var(--prog, 0) * 4320deg);
}
.cf-progresso__moeda::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2.5px solid rgba(20, 23, 26, 0.72);
  border-right-color: transparent;
  border-radius: 50%;
}
.cf-js .cf-progresso__moeda {
  display: block;
}

/* ---------- abertura: chuva de moedas, moedinhas 1-2-3 e ticker ---------- */
.cf-abertura__texto {
  position: relative;
  z-index: 2;
}
.cf-moeda--chuva canvas {
  inset: -30%;
  width: 160%;
  height: 160%;
  pointer-events: none;
}
.cf-moeda__lancar {
  position: absolute;
  inset: 9%;
  z-index: 2;
  border-radius: 50%;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.cf-moeda__lancar:active {
  cursor: grabbing;
}
.cf-moeda__lancar:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 6px;
}
.cf-moeda__lancar[hidden] {
  display: none;
}

.cf-mini {
  display: none;
  position: absolute;
  z-index: 1;
  width: clamp(34px, 5vw, 54px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 50%, #b88b00 100%);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(20, 23, 26, 0.22);
  font: 700 clamp(16px, 2.4vw, 26px) / 1 var(--f-app);
  color: #14171a;
  animation: cf-mini 5s ease-in-out infinite;
}
.cf-js .cf-mini {
  display: grid;
}
.cf-mini--1 {
  left: 2%;
  top: 12%;
  animation-delay: -1s;
}
.cf-mini--2 {
  right: 0;
  top: 46%;
  animation-delay: -2.4s;
}
.cf-mini--3 {
  left: 6%;
  bottom: 8%;
  animation-delay: -3.6s;
}
@keyframes cf-mini {
  50% {
    translate: 0 -12px;
  }
}

.cf-ticker {
  display: none;
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: 52px;
  overflow: hidden;
  border-top: 1px solid var(--linha);
  background: rgba(14, 16, 19, 0.82);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cf-js .cf-ticker {
  display: block;
}
.cf-ticker__faixa {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  height: 100%;
  padding-left: 24px;
  font: 400 13px / 1 var(--f-mono);
  white-space: nowrap;
  color: var(--texto-2);
  animation: cf-ticker 40s linear infinite;
}
.cf-ticker b {
  font-weight: 500;
}
.cf-ticker .e {
  color: var(--amarelo);
}
.cf-ticker .s {
  color: var(--alerta);
}
@keyframes cf-ticker {
  to {
    transform: translateX(-50%);
  }
}
.cf-js .cf-abertura {
  padding-bottom: 136px;
}
.cf-js .cf-abertura__rolar {
  bottom: 74px;
}

/* ---------- números: baralho, cronômetro e cem pessoas ---------- */
.cf-obj {
  display: grid;
  gap: clamp(40px, 5vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
}
@media (min-width: 900px) {
  .cf-obj {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
  }
}
.cf-obj__item {
  display: grid;
  gap: 14px;
  justify-items: start;
  align-content: start;
  margin: 0;
}
.cf-obj__palco {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 250px;
}
.cf-obj__rot {
  font: 500 12px / 1.3 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cf-obj__rever {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}

.cf-bar {
  perspective: 900px;
}
.cf-bar__in {
  position: absolute;
  inset: 14px 0 0 24px;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-24deg);
  transition: transform 0.8s var(--ease-saida);
}
.cf-bar:hover .cf-bar__in {
  transform: rotateX(8deg) rotateY(-10deg);
}
.cf-bar__c {
  position: absolute;
  left: 0;
  top: 0;
  width: 108px;
  height: 166px;
  padding: 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
  transform: translateZ(calc(var(--i) * 12px));
  translate: 0 0;
  transition: translate 0.9s var(--ease-saida) calc(var(--i) * 70ms);
}
.cf-bar__c em {
  display: block;
  font: 500 12px / 1 var(--f-mono);
  font-style: normal;
  color: var(--amarelo);
}
.cf-bar__c u {
  display: block;
  height: 6px;
  margin-top: 9px;
  border-radius: 3px;
  background: rgba(242, 241, 236, 0.22);
  text-decoration: none;
}
.cf-bar__c u:nth-of-type(2) {
  width: 70%;
}
.cf-bar__c u:nth-of-type(3) {
  width: 48%;
}
.cf-obj.is-vista .cf-bar__c {
  translate: calc(var(--i) * 15px) calc(var(--i) * 11px);
}
.cf-obj.is-vista .cf-bar:hover .cf-bar__c {
  translate: calc(var(--i) * 20px) calc(var(--i) * 7px);
}

.cf-cro svg {
  width: 230px;
  height: 230px;
  margin-top: 8px;
  overflow: visible;
}
.cf-cro__arco {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.7s var(--ease-saida) 0.2s;
}
.cf-obj.is-vista .cf-cro__arco {
  stroke-dasharray: 18.3 100;
}
.cf-cro__ponteiro {
  transform-origin: 100px 100px;
  transform: rotate(0deg);
  transition: transform 1.7s var(--ease-saida) 0.2s;
}
.cf-obj.is-vista .cf-cro__ponteiro {
  transform: rotate(66deg);
}

.cf-cem {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  align-content: start;
  max-width: 250px;
  height: auto;
}
.cf-cem i {
  display: block;
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 50%, #9c7600 100%);
  transition:
    transform 0.9s cubic-bezier(0.55, 0, 0.8, 0.4) var(--d, 0s),
    opacity 0.9s ease var(--d, 0s);
}
.cf-cem.cai .cf-cem__cai {
  z-index: 0;
  background: #3a3f45;
  opacity: 0.4;
  transform: translateY(24px) rotate(var(--r, 20deg));
}

/* ---------- a palavra: as letras caem sobre um chão de moedas ---------- */
.cf-bur__chao,
.cf-bur__degraus {
  display: none;
}
.cf-a-bur .cf-bur__palavra {
  position: relative;
  z-index: 1;
}
.cf-a-bur .cf-bur__resultado {
  position: relative;
  z-index: 2;
}
.cf-a-bur .cf-bur__chao {
  display: block;
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  height: 52px;
  pointer-events: none;
}
.cf-bur__chao i {
  position: absolute;
  left: var(--x);
  bottom: var(--b, 0);
  width: clamp(18px, 2.6vw, 34px);
  aspect-ratio: 1;
  margin-left: calc(clamp(18px, 2.6vw, 34px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 50%, #9c7600 100%);
  box-shadow: inset 0 0 0 2px rgba(20, 23, 26, 0.25);
}
.cf-a-bur .cf-bur__degraus {
  display: flex;
  position: relative;
  z-index: 0;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  align-items: flex-end;
  gap: 8px;
  width: min(100%, 760px);
  height: 100%;
  pointer-events: none;
}
.cf-bur__degraus i {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  border-top: 2px solid rgba(255, 210, 63, 0.55);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(rgba(255, 210, 63, 0.16), rgba(255, 210, 63, 0.03));
}
.cf-bur__degraus i:nth-child(1) {
  height: 40%;
}
.cf-bur__degraus i:nth-child(2) {
  height: 64%;
}
.cf-bur__degraus i:nth-child(3) {
  height: 88%;
}
.cf-bur__degraus b {
  font: 700 clamp(26px, 5vw, 64px) / 1 var(--f-titulo);
  color: rgba(255, 210, 63, 0.4);
}

/* ---------- antes e depois: a alça vira uma moeda ---------- */
.cf-comp .cf-wrap {
  perspective: 1800px;
}
.cf-comp__quadro {
  rotate: 0 1 0 var(--tilt, 0deg);
  transition: rotate 0.3s linear;
}
html.cf-pausado .cf-comp__quadro {
  rotate: none;
}
.cf-comp__grip {
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 48%, #a87f00 100%);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(20, 23, 26, 0.2);
  scale: var(--cx, 1) 1;
}
.cf-comp__quadro.is-ponta .cf-comp__grip {
  animation: cf-pulinho 0.5s var(--ease-saida);
}
@keyframes cf-pulinho {
  40% {
    translate: 0 -14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-comp__quadro {
    rotate: none;
  }
  .cf-comp__grip {
    scale: 1;
  }
}
.cf-comp__medidor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.cf-comp__medidor div {
  padding: 12px 16px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
}
.cf-comp__medidor span {
  display: block;
  font: 500 11px / 1.2 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cf-comp__medidor b {
  display: block;
  margin-top: 2px;
  font: 700 clamp(28px, 4vw, 40px) / 1.05 var(--f-titulo);
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}
.cf-comp__medidor.is-alto b {
  color: var(--alerta);
}
.cf-comp__atalhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.cf-comp__atalho {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 99px;
  font: 500 13px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}
.cf-comp__atalho:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

/* ---------- sete etapas: o dial do cofre e a moeda no trilho ---------- */
.cf-dial {
  --da: 0deg;
  --r: 72px;
  position: relative;
  display: none;
  flex: none;
  width: 190px;
  height: 190px;
  margin: 0 clamp(16px, 3vw, 40px) 0 auto;
  transform: perspective(700px) rotateX(16deg);
  transition: --da 0.9s var(--ease-saida);
}
@media (min-width: 720px) {
  .cf-dial {
    display: block;
  }
}
@media (max-height: 780px) {
  .cf-dial {
    --r: 56px;
    width: 150px;
    height: 150px;
  }
  .cf-dial__parada {
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 -20px !important;
    font-size: 12px !important;
  }
}
@media (max-height: 640px) {
  .cf-dial {
    display: none;
  }
}
.cf-dial__corpo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #3a4047, var(--superficie) 55%, var(--fundo-fundo));
  box-shadow:
    inset 0 0 0 2px var(--linha-forte),
    0 24px 40px -14px rgba(0, 0, 0, 0.8);
  rotate: var(--da);
}
.cf-dial__corpo::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -0.3deg, rgba(242, 241, 236, 0.5) 0 0.6deg, transparent 0.6deg 5.143deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 90%, #000 91%);
  mask: radial-gradient(circle closest-side, transparent 90%, #000 91%);
}
.cf-dial__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 48%, #a87f00 100%);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(20, 23, 26, 0.22);
}
.cf-dial__hub::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 5px solid rgba(20, 23, 26, 0.75);
  border-right-color: transparent;
  border-radius: 50%;
}
.cf-dial.is-aberto .cf-dial__hub {
  animation: cf-pulso 2.2s ease-out infinite;
}
@keyframes cf-pulso {
  0% {
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.5),
      inset 0 0 0 3px rgba(20, 23, 26, 0.22),
      0 0 0 0 rgba(255, 210, 63, 0.55);
  }
  100% {
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.5),
      inset 0 0 0 3px rgba(20, 23, 26, 0.22),
      0 0 0 18px rgba(255, 210, 63, 0);
  }
}
.cf-dial__ponteiro {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 2;
  width: 18px;
  height: 22px;
  margin-left: -9px;
  background: var(--amarelo);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
.cf-dial__parada {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--superficie);
  font: 500 13px / 1 var(--f-mono);
  color: var(--texto);
  transform: rotate(calc(var(--a) + var(--da))) translateY(calc(var(--r) * -1)) rotate(calc((var(--a) + var(--da)) * -1));
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.cf-dial__parada:hover {
  border-color: var(--amarelo);
}
.cf-dial__parada.is-ativa {
  border-color: var(--amarelo);
  background: var(--amarelo);
  color: #14171a;
}
.cf-trilho__moeda {
  position: absolute;
  left: calc(var(--prog, 0) * 100%);
  top: -13px;
  z-index: 2;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 48%, #9c7600 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(20, 23, 26, 0.22);
  rotate: calc(var(--prog, 0) * 2160deg);
}
.cf-trilho__moeda::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 3px solid rgba(20, 23, 26, 0.72);
  border-right-color: transparent;
  border-radius: 50%;
}

/* ---------- o app: leque, pinos de nota e simulador de estados ---------- */
.cf-app__tela {
  position: relative;
  width: 100%;
  max-width: 280px;
}
@media (min-width: 900px) {
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item {
    perspective: 1400px;
  }
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-fone {
    transform: rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
    transition:
      transform 0.7s var(--ease-saida),
      box-shadow 0.5s ease;
    animation: cf-fl 7s ease-in-out infinite;
  }
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item:nth-child(1) .cf-fone {
    --ry: 16deg;
  }
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item:nth-child(2) .cf-fone {
    --ry: 6deg;
    animation-delay: -1.8s;
  }
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item:nth-child(3) .cf-fone {
    --ry: -6deg;
    animation-delay: -3.4s;
  }
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item:nth-child(4) .cf-fone {
    --ry: -16deg;
    animation-delay: -5s;
  }
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item:hover .cf-fone,
  .cf-ex .cf-app__lista:not(.cf-app__lista--tres) .cf-app__item.is-nota .cf-fone {
    --ry: 0deg;
    --ty: -10px;
  }
}
@keyframes cf-fl {
  50% {
    translate: 0 -8px;
  }
}
.cf-pin {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--amarelo);
  box-shadow:
    0 0 0 6px rgba(255, 210, 63, 0.25),
    0 6px 14px rgba(0, 0, 0, 0.5);
  font: 700 18px / 1 var(--f-app);
  color: #14171a;
  transition:
    transform 0.3s var(--ease-saida),
    box-shadow 0.3s ease;
}
.cf-pin:hover {
  transform: scale(1.1);
}
.cf-pin[aria-pressed="true"] {
  box-shadow:
    0 0 0 8px rgba(255, 210, 63, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.5);
}
.cf-app__nota {
  display: none;
  max-width: 760px;
  margin-top: 8px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 210, 63, 0.45);
  border-radius: 16px;
  background: var(--superficie);
}
.cf-ex .cf-app__nota {
  display: grid;
  gap: 4px;
}
.cf-app__nota b {
  font: 500 12px / 1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.cf-app__nota span,
.cf-app__dica {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-2);
}
.cf-sim {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.cf-ex .cf-sim {
  display: flex;
}
.cf-sim__chip {
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 99px;
  font: 500 13px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.cf-sim__chip:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}
.cf-sim__chip[aria-pressed="true"] {
  border-color: var(--amarelo);
  background: var(--amarelo);
  color: #14171a;
}
.cf-app__estados .cf-app__item .cf-fone {
  transition:
    opacity 0.4s ease,
    filter 0.4s ease,
    transform 0.5s var(--ease-saida);
}
.cf-ex .cf-app__estados[data-sim] .cf-app__item .cf-fone {
  opacity: 0.4;
  filter: grayscale(0.7);
  transform: scale(0.93);
}
.cf-ex .cf-app__estados[data-sim="a"] .cf-app__item:nth-child(1) .cf-fone,
.cf-ex .cf-app__estados[data-sim="b"] .cf-app__item:nth-child(2) .cf-fone,
.cf-ex .cf-app__estados[data-sim="c"] .cf-app__item:nth-child(3) .cf-fone {
  opacity: 1;
  filter: none;
  transform: scale(1.04);
}

/* ---------- decisões: a balança ao lado do acordeão ---------- */
.cf-balanca {
  display: none;
  container-type: inline-size;
  width: 100%;
  max-width: 480px;
  margin: clamp(32px, 5vw, 56px) auto 0;
}
.cf-ex .cf-balanca {
  display: block;
}
@media (min-width: 1000px) {
  .cf-ex .cf-dec__grade {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .cf-ex .cf-balanca {
    position: sticky;
    top: 112px;
    margin: clamp(40px, 6vw, 72px) 0 0;
  }
}
.cf-bal {
  --u: calc(100cqw / 480);
  position: relative;
  width: 100%;
  height: calc(var(--u) * 340);
}
.cf-bal__mastro {
  position: absolute;
  left: calc(var(--u) * 236);
  top: calc(var(--u) * 84);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 240);
  border-radius: 4px;
  background: linear-gradient(90deg, #3a3f45, #8e949a, #3a3f45);
}
.cf-bal__base {
  position: absolute;
  left: calc(var(--u) * 176);
  top: calc(var(--u) * 316);
  width: calc(var(--u) * 128);
  height: calc(var(--u) * 14);
  border-radius: 7px;
  background: var(--superficie-2);
}
.cf-bal__viga {
  position: absolute;
  left: calc(var(--u) * 70);
  top: calc(var(--u) * 85);
  width: calc(var(--u) * 340);
  height: calc(var(--u) * 10);
  border-radius: 5px;
  background: linear-gradient(#ffe083, #ffd23f 60%, #b88b00);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--ang, 0deg));
  transition: transform 0.9s var(--ease-saida);
}
.cf-bal__pivo {
  position: absolute;
  left: calc(var(--u) * 222);
  top: calc(var(--u) * 70);
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 50%, #9c7600 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.cf-bal__prato {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 150);
  transition: translate 0.9s var(--ease-saida);
}
.cf-bal__prato--e {
  translate: calc(var(--u) * var(--lx, 180)) calc(var(--u) * var(--ly, 90));
}
.cf-bal__prato--d {
  translate: calc(var(--u) * var(--rx, 300)) calc(var(--u) * var(--ry, 90));
}
.cf-bal__prato svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cf-bal__corrente {
  fill: none;
  stroke: rgba(242, 241, 236, 0.5);
  stroke-width: 2;
}
.cf-bal__bacia {
  fill: var(--superficie-2);
  stroke: rgba(242, 241, 236, 0.5);
  stroke-width: 2;
}
.cf-bal__bacia--e {
  stroke: var(--amarelo);
}
.cf-bal__moedas i {
  position: absolute;
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * (96 - var(--k) * 11));
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 50%, #9c7600 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  animation: cf-cai 0.5s var(--ease-saida) both;
  animation-delay: calc(var(--k) * 70ms);
}
.cf-bal__moedas--d i {
  background: radial-gradient(circle at 34% 28%, #8e949a 0, #5b6168 50%, #2b3036 100%);
}
@keyframes cf-cai {
  from {
    translate: 0 calc(var(--u) * -60);
    opacity: 0;
  }
}
.cf-bal__rot {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 156);
  text-align: center;
  font: 500 clamp(10.5px, calc(var(--u) * 12), 13px) / 1.2 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cf-bal__prato--e .cf-bal__rot {
  color: var(--amarelo);
}

/* ---------- aprendizados: os três recibos ---------- */
.cf-aprend {
  counter-reset: rec;
  gap: 26px;
}
.cf-aprend::before {
  content: "";
  display: block;
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  height: 30px;
  margin-bottom: -14px;
  border: 1px solid var(--linha-forte);
  border-radius: 15px;
  background:
    linear-gradient(#000, #000) center / calc(100% - 36px) 6px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 210, 63, 0.35) 50%, transparent) center / calc(100% - 36px) 10px no-repeat,
    linear-gradient(#272c32, #14171a);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.cf-aprend li {
  counter-increment: rec;
  perspective: 1200px;
  padding: 0;
  border: 0;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5));
}
.cf-aprend li:nth-child(1) {
  --rz: -1.6deg;
}
.cf-aprend li:nth-child(2) {
  --rz: 1.1deg;
}
.cf-aprend li:nth-child(3) {
  --rz: -0.8deg;
}
.cf-aprend li > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 300px;
  padding: 22px 24px 128px;
  border-radius: 8px 8px 0 0;
  background: #f2f1ec;
  color: #14171a;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  transform: rotate(var(--rz, 0deg));
  rotate: var(--ax, 0) var(--ay, 0) 0 var(--ang, 0deg);
  transition: rotate 0.3s ease-out;
  /* o carimbo ainda não aplicado fica maior (scale 1.9): sem isto ele alargava a página */
  overflow: clip;
}
.cf-aprend li > div::before {
  content: "Cofre · recibo nº 00" counter(rec);
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(20, 23, 26, 0.35);
  font: 400 11px / 1.3 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4d535a;
}
.cf-aprend li > div::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  height: 30px;
  background: repeating-linear-gradient(
    90deg,
    #14171a 0 2px,
    transparent 2px 4px,
    #14171a 4px 5px,
    transparent 5px 8px,
    #14171a 8px 11px,
    transparent 11px 13px
  );
}
.cf-aprend h3 {
  color: #14171a;
}
.cf-aprend p {
  max-width: none;
  margin-top: 0;
  color: #33383d;
}
.cf-a-rev .cf-aprend [data-revela] {
  transform: translateY(-90px);
}
.cf-rec__carimbo {
  position: absolute;
  right: 14px;
  bottom: 74px;
  padding: 6px 12px;
  border: 3.5px solid #8a6600;
  border-radius: 8px;
  background: rgba(255, 210, 63, 0.35);
  font: 700 18px / 1 var(--f-titulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b4d00;
  opacity: 0;
  rotate: -14deg;
  scale: 1.9;
  pointer-events: none;
  transition:
    scale 0.35s var(--ease-saida),
    opacity 0.25s ease;
}
.is-carimbado .cf-rec__carimbo {
  opacity: 1;
  scale: 1;
}
.cf-rec__btn {
  position: absolute;
  left: 24px;
  bottom: 68px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 99px;
  background: #14171a;
  font: 500 13px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  color: #f2f1ec;
  transition: background 0.25s ease;
}
.cf-rec__btn:hover {
  background: #2d3339;
}
.cf-rec__btn[aria-pressed="true"] {
  background: #6b4d00;
}
.cf-rec__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.cf-rec__acoes .cf-botao {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

/* ---------- metas: o extrato ou as colunas de moedas ---------- */
.cf-metas {
  perspective: 1400px;
}
.cf-extrato {
  rotate: var(--ax, 0) var(--ay, 0) 0 var(--ang, 0deg);
  transition: rotate 0.3s ease-out;
}
.cf-extrato[hidden],
.cf-colunas[hidden] {
  display: none;
}
.cf-metas__vistas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.cf-metas__vista {
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 99px;
  font: 500 13px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.cf-metas__vista:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}
.cf-metas__vista[aria-pressed="true"] {
  border-color: var(--amarelo);
  background: var(--amarelo);
  color: #14171a;
}
.cf-colunas {
  margin: 0;
  padding: 28px 22px 22px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: linear-gradient(var(--superficie), var(--fundo));
}
.cf-colunas__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.cf-colunas__pilhas {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 230px;
}
.cf-colunas__pilha {
  position: relative;
  width: clamp(20px, 3.4vw, 36px);
  height: 100%;
}
.cf-colunas__pilha--antes {
  --cor: radial-gradient(circle at 34% 28%, #8e949a 0, #5b6168 60%, #3a3f45 100%);
  --lado: #2b3036;
}
.cf-colunas__pilha--depois {
  --cor: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 55%, #b88b00 100%);
  --lado: #8a6600;
}
.cf-colunas__pilha i {
  position: absolute;
  left: 0;
  bottom: calc(var(--k) * 14px);
  width: 100%;
  height: 13px;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 4px 0 var(--lado);
  translate: 0 -70px;
  opacity: 0;
}
.cf-colunas.is-vista .cf-colunas__pilha i {
  translate: 0 0;
  opacity: 1;
  transition:
    translate 0.6s var(--ease-saida) calc(var(--k) * 35ms),
    opacity 0.3s ease calc(var(--k) * 35ms);
}
.cf-colunas__rot {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  text-align: center;
  font: 400 11px / 1.3 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cf-colunas__rot b {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--texto);
}

/* ---------- convite: a porta do cofre ---------- */
.cf-chamada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(46% 38% at 50% 24%, rgba(255, 210, 63, 0.4), transparent 72%);
  opacity: var(--luz, 0);
  pointer-events: none;
}
.cf-chamada__miolo {
  position: relative;
  z-index: 1;
}
.cf-porta {
  display: none;
  position: relative;
  width: min(78vw, 360px);
  aspect-ratio: 1;
  cursor: grab;
  touch-action: pan-y;
}
.cf-porta.is-arrastando {
  cursor: grabbing;
}
.cf-chamada--porta .cf-porta {
  display: block;
}
.cf-chamada--porta .cf-cofrinho {
  display: none;
}
.cf-porta canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cf-porta__ctl {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
}
.cf-chamada--porta .cf-porta__ctl {
  display: flex;
}
.cf-porta__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 400 12px / 1 var(--f-mono);
  letter-spacing: 0.06em;
  color: var(--texto-2);
}
.cf-porta__rotulo input {
  width: min(46vw, 200px);
  accent-color: var(--amarelo);
}
.cf-porta__abrir {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

/* ---------- protótipo: a moeda marcadora de etapa e a chuva ao salvar ---------- */
.cf-loja {
  position: relative;
}
.cf-loja__trilho {
  position: relative;
  height: 26px;
  margin: 2px 6px 0;
}
.cf-loja__trilho i {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 11px;
  height: 3px;
  border-radius: 2px;
  background: var(--linha-forte);
}
.cf-loja__trilho i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--amarelo);
  transform-origin: left;
  transform: scaleX(var(--e, 0));
  transition: transform 0.6s var(--ease-saida);
}
.cf-loja__trilho b {
  position: absolute;
  top: 1px;
  left: calc(var(--e, 0) * (100% - 24px));
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 48%, #9c7600 100%);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(20, 23, 26, 0.22);
  transition: left 0.6s var(--ease-saida);
}
.cf-loja__trilho b::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 3px solid rgba(20, 23, 26, 0.72);
  border-right-color: transparent;
  border-radius: 50%;
}
@media (max-width: 520px) {
  .cf-loja__trilho {
    margin-inline: 16px;
  }
}
.cf-chuva {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border-radius: 24px;
  pointer-events: none;
}
.cf-chuva i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff0a8 0, #ffd23f 50%, #9c7600 100%);
  box-shadow: inset 0 0 0 2px rgba(20, 23, 26, 0.22);
  animation: cf-chuva var(--d) cubic-bezier(0.5, 0, 0.9, 0.5) var(--dl) both;
}
@keyframes cf-chuva {
  from {
    translate: 0 -60px;
    rotate: 1 0.4 0 0deg;
  }
  to {
    translate: 0 800px;
    rotate: 1 0.4 0 720deg;
  }
}

/* ---------- ajustes depois da primeira rodada de capturas ---------- */
.cf-a-bur .cf-bur__cena {
  min-height: clamp(280px, 46vh, 470px);
}
.cf-a-bur .cf-bur__palavra {
  align-self: start;
  margin-top: clamp(0px, 3vh, 30px);
}
.cf-cem {
  padding-bottom: 30px;
}

/* =============================================================
   RESPONSIVO · alturas baixas (notebook, celular na horizontal)
   O palco do processo (7 etapas) tem 100svh: com ~650px de altura os cartões
   passavam por baixo da trilha de pontos e o texto da decisão era cortado.
   ============================================================= */
@media (max-height: 700px) {
  .cf-a-proc .cf-proc__palco {
    padding-block: 72px 20px;
  }
  .cf-a-proc .cf-proc__cabeca {
    margin-bottom: 14px;
  }
  .cf-a-proc .cf-proc__cabeca .cf-titulo {
    font-size: clamp(26px, 4.6vh, 40px);
  }
  .cf-a-proc .cf-proc__contador {
    font-size: clamp(34px, 8vh, 64px);
  }
  .cf-a-proc .cf-proc__janela {
    padding-block: 4px 10px;
  }
  .cf-a-proc .cf-etapa {
    padding: 16px 22px;
    gap: 8px;
  }
  .cf-a-proc .cf-il {
    max-height: 56px;
    padding: 6px;
  }
  .cf-a-proc .cf-etapa h3 {
    font-size: 22px;
  }
  .cf-a-proc .cf-etapa p {
    font-size: 14.5px;
    line-height: 1.4;
  }
}
@media (max-height: 560px) {
  .cf-a-proc .cf-il {
    display: none;
  }
}

/* alvo de toque: no celular o "←" ficava com 8px de largura */
.cf-topo__voltar {
  min-width: 44px;
}