/*
  Totem v2: palco fixo de 1920x1080 escalado para caber na tela (sem rolagem em nenhum monitor).
  Visual contido: fonte do sistema (Segoe UI Variable no Windows 11, SF no Mac), uma cor de
  destaque (vermelho MovFit), superfícies escuras e movimento com propósito.
*/
:root {
  --fundo: #0d0d0e;
  --superficie: #19191b;
  --superficie-2: #222225;
  --superficie-3: #2c2c30;
  --linha: rgba(255, 255, 255, 0.08);
  --texto: #f5f5f7;
  --texto-2: #a1a1a6;
  --texto-3: #6e6e73;
  --vermelho: #e5061c;
  --vermelho-press: #c10418;
  --vermelho-suave: rgba(229, 6, 28, 0.14);
  --verde: #30d158;
  --verde-suave: rgba(48, 209, 88, 0.14);
  --laranja: #ff9f0a;
  --laranja-suave: rgba(255, 159, 10, 0.14);
  --azul: #0a84ff;
  --azul-suave: rgba(10, 132, 255, 0.14);
  --boneco-texto: #f5f5f7;
  --boneco-linha: #55555a;
  --mola: cubic-bezier(0.32, 1.4, 0.5, 1);
  --saida: cubic-bezier(0.2, 0.9, 0.2, 1);
  --fonte: "Segoe UI Variable Display", "Segoe UI Variable Text", "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--texto);
  font-family: var(--fonte);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: default;
}

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; padding: 0; }
svg.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- palco ---------- */
#palco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center;
  overflow: hidden;
  background: radial-gradient(1400px 900px at 78% 40%, #1c0d0f 0%, var(--fundo) 60%);
}

/* ---------- barra superior ---------- */
.barra {
  position: absolute;
  inset: 0 0 auto 0;
  height: 112px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 72px;
  z-index: 5;
}
.logo { height: 76px; display: block; }
.barra > div:first-child { display: flex; align-items: center; gap: 28px; }

.marca { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; color: var(--vermelho); }
.marca span { background: var(--texto); color: #111; padding: 0 8px; margin-left: 4px; border-radius: 5px; font-style: italic; }
.passos { display: flex; gap: 10px; grid-column: 2; }
.passos i { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--superficie-3); overflow: hidden; position: relative; }
.passos i::after { content: ""; position: absolute; inset: 0; background: var(--texto); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--saida); }
.passos i.feito::after, .passos i.atual::after { transform: scaleX(1); }
.passos i.atual::after { background: var(--vermelho); }
.acoes-topo { grid-column: 3; justify-self: end; display: flex; gap: 14px; }
.btn-topo {
  height: 64px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 32px;
  background: var(--superficie-2);
  font-size: 22px;
  font-weight: 600;
  color: var(--texto);
  transition: transform 0.2s var(--mola), background 0.2s;
}
.btn-topo .ic { font-size: 26px; }

/* ---------- telas e transições ---------- */
#conteudo { position: absolute; inset: 112px 0 0 0; }
.tela { position: absolute; inset: 0; padding: 24px 120px 72px; }
.entra-dir { animation: entra-dir 0.55s var(--saida) both; }
.entra-esq { animation: entra-esq 0.55s var(--saida) both; }
.sai-esq { animation: sai-esq 0.35s ease-in both; pointer-events: none; }
.sai-dir { animation: sai-dir 0.35s ease-in both; pointer-events: none; }
@keyframes entra-dir { from { opacity: 0; transform: translateX(80px); } }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-80px); } }
@keyframes sai-esq { to { opacity: 0; transform: translateX(-60px) scale(0.98); } }
@keyframes sai-dir { to { opacity: 0; transform: translateX(60px) scale(0.98); } }

/* Peças que entram em sequência dentro da tela: style="--i:n" */
.surge { animation: surge 0.7s var(--saida) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
@keyframes surge { from { opacity: 0; transform: translateY(24px); } }

/* ---------- tipografia ---------- */
.rotulo-sec { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; color: var(--texto-2); letter-spacing: 0.01em; margin: 0 0 20px; }
.rotulo-sec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 6px var(--vermelho-suave); }
.titulo-xl { font-size: 104px; line-height: 0.98; font-weight: 700; letter-spacing: -0.035em; margin: 0; }
.titulo { font-size: 68px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.texto { font-size: 30px; line-height: 1.4; color: var(--texto-2); margin: 24px 0 0; font-weight: 400; }
.texto-p { font-size: 22px; line-height: 1.45; color: var(--texto-3); }
.vermelho { color: var(--vermelho); }

/* ---------- botões ---------- */
.btn {
  height: 104px;
  padding: 0 56px;
  border-radius: 28px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: transform 0.25s var(--mola), background 0.2s, opacity 0.2s;
}
.btn .ic { font-size: 36px; }
.btn-primario { background: var(--vermelho); color: #fff; }
.btn-secundario { background: var(--superficie-2); color: var(--texto); }
.btn:disabled { opacity: 0.35; }
/* toque: afunda e escurece, como nos sistemas da Apple */
.pressionado { transform: scale(0.96) !important; filter: brightness(0.88); }

/* ---------- 1. atração (início) ---------- */
.atracao { display: grid; grid-template-columns: 980px 1fr; align-items: center; padding-top: 0; }
.atracao .cta-linha { display: flex; align-items: center; gap: 36px; margin-top: 64px; }
.atracao .btn-primario { height: 120px; padding: 0 64px; font-size: 36px; border-radius: 32px; }
.atracao .btn-primario .ic { transition: transform 0.4s var(--mola); animation: cutuca 2.6s ease-in-out infinite 1.5s; }
@keyframes cutuca { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(10px); } 90% { transform: translateX(-2px); } }
.toque-qualquer { font-size: 24px; color: var(--texto-3); display: flex; align-items: center; gap: 12px; }
.toque-qualquer i { width: 14px; height: 14px; border-radius: 50%; background: var(--texto-3); animation: toque 2s ease-out infinite; }
@keyframes toque { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); } 70%, 100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }
.fatos { display: flex; gap: 56px; margin-top: 88px; }
.fato strong { display: block; font-size: 44px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fato span { font-size: 22px; color: var(--texto-2); }

.vitrine { position: relative; height: 880px; display: grid; place-items: center; }
.vitrine .figura { position: relative; height: 820px; aspect-ratio: 300 / 520; }
.vitrine .figura svg { width: 100%; height: 100%; }
.sem-etiquetas .etiqueta-boneco { display: none; }
.base-balanca {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 360px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229, 6, 28, 0.55), transparent);
  filter: blur(6px);
  animation: brilha 3s ease-in-out infinite;
}
@keyframes brilha { 50% { opacity: 0.45; transform: translateX(-50%) scaleX(0.85); } }
.varredura {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff3347 30%, #fff 50%, #ff3347 70%, transparent);
  box-shadow: 0 0 30px 8px rgba(229, 6, 28, 0.45);
  animation: varre 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes varre { 0%, 100% { top: 2%; } 50% { top: 95%; } }
.chip-medida {
  position: absolute;
  padding: 18px 24px;
  border-radius: 22px;
  background: rgba(34, 34, 37, 0.82);
  backdrop-filter: blur(20px);
  border: 1px solid var(--linha);
  min-width: 250px;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.6s var(--saida), transform 0.6s var(--saida);
}
.chip-medida.visivel { opacity: 1; transform: none; }
.chip-medida span { display: block; font-size: 19px; color: var(--texto-2); }
.chip-medida strong { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chip-medida small { font-size: 22px; color: var(--texto-2); margin-left: 6px; }

/* ---------- 2. entrada numérica (CPF, data, altura, celular) ---------- */
.entrada { display: grid; grid-template-columns: 1fr 660px; gap: 120px; align-items: center; }
.casas { display: flex; align-items: center; gap: 10px; margin-top: 56px; }
.casa {
  position: relative;
  width: 76px;
  height: 112px;
  border-radius: 18px;
  background: var(--superficie);
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  font-size: 58px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, background 0.2s, transform 0.3s var(--mola);
}
.casa.atual { border-color: var(--texto-3); }
.casa.atual::after {
  content: "";
  position: absolute;
  bottom: 18px;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: var(--vermelho);
  animation: pisca 1.1s steps(1) infinite;
}
@keyframes pisca { 50% { opacity: 0; } }
.casa .d { display: inline-block; animation: digito 0.45s var(--mola); }
@keyframes digito { from { opacity: 0; transform: translateY(-34px) scale(1.4); } }
.casa.preenchida { background: var(--superficie-2); }
.separador { font-size: 52px; color: var(--texto-3); width: 18px; text-align: center; }
.casas.ok .casa { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); }
.casas.ok .casa:nth-child(n) { transition-delay: calc(var(--k, 0) * 25ms); }
.casas.erro { animation: treme 0.5s; }
.casas.erro .casa.preenchida { border-color: var(--vermelho); }
@keyframes treme { 15%, 55% { transform: translateX(-16px); } 35%, 75% { transform: translateX(16px); } }
.aviso { min-height: 44px; margin-top: 28px; font-size: 26px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.aviso.erro { color: #ff453a; }
.aviso.ok { color: var(--verde); }
.nota-privacidade { position: absolute; left: 120px; bottom: 64px; display: flex; align-items: center; gap: 14px; font-size: 21px; color: var(--texto-3); }
.nota-privacidade .ic { font-size: 26px; }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tecla {
  height: 124px;
  border-radius: 26px;
  background: var(--superficie);
  font-size: 52px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  transition: transform 0.22s var(--mola), background 0.15s;
}
.tecla.pressionado { background: var(--superficie-3); filter: none; }
.tecla.fn { font-size: 26px; font-weight: 600; color: var(--texto-2); }
.tecla.fn .ic { font-size: 40px; }
.tecla.ok { background: var(--vermelho); color: #fff; font-size: 28px; font-weight: 600; }
.tecla:disabled { opacity: 0.3; }

/* altura: régua animada */
.altura-vis { display: flex; align-items: flex-end; gap: 40px; margin-top: 48px; height: 400px; }
.regua { position: relative; width: 110px; height: 400px; border-radius: 20px; background: var(--superficie); overflow: hidden; }
.regua .enche { position: absolute; inset: auto 0 0 0; height: 0; background: linear-gradient(180deg, #ff3347, var(--vermelho)); transition: height 0.7s var(--mola); }
.regua .marcas { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, 0.12) 38px 40px); }
.altura-num { font-size: 168px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.altura-num small { font-size: 48px; color: var(--texto-2); font-weight: 500; letter-spacing: 0; margin-left: 10px; }
.altura-num .vazio { color: var(--superficie-3); }

/* ---------- 3. nome (teclado completo) ---------- */
.nome-tela { display: flex; flex-direction: column; padding-top: 8px; }
.campo-texto {
  margin-top: 36px;
  height: 128px;
  border-radius: 26px;
  background: var(--superficie);
  display: flex;
  align-items: center;
  padding: 0 40px;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 2px solid var(--superficie-3);
}
.campo-texto .ph { color: var(--texto-3); font-weight: 400; }
.campo-texto .cursor { width: 4px; height: 64px; border-radius: 2px; background: var(--vermelho); margin-left: 4px; animation: pisca 1.1s steps(1) infinite; }
.campo-texto .l { display: inline-block; animation: digito 0.35s var(--mola); white-space: pre; }
.teclado-alfa { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.linha-teclas { display: flex; gap: 14px; justify-content: center; }
.linha-teclas .tecla { width: 148px; height: 104px; font-size: 40px; font-weight: 500; border-radius: 22px; }
.linha-teclas .tecla.acento { color: var(--texto-2); }
.linha-teclas .tecla.acento.ativo { background: var(--vermelho-suave); color: var(--vermelho); box-shadow: inset 0 0 0 2px var(--vermelho); }
.linha-teclas .tecla.larga { width: 310px; font-size: 26px; font-weight: 600; }
.linha-teclas .tecla.espaco { width: 840px; font-size: 24px; color: var(--texto-2); }
.linha-teclas .tecla.ok { width: 310px; }

/* ---------- 4. escolha de sexo ---------- */
.escolha-tela { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cartoes-escolha { display: flex; gap: 48px; margin-top: 64px; }
.cartao-escolha {
  width: 480px;
  height: 520px;
  border-radius: 40px;
  background: var(--superficie);
  border: 3px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 36px;
  gap: 20px;
  font-size: 40px;
  font-weight: 600;
  transition: transform 0.35s var(--mola), border-color 0.25s, background 0.25s;
}
.cartao-escolha .figura { height: 340px; aspect-ratio: 300 / 520; transition: transform 0.5s var(--mola); }
.cartao-escolha .figura svg { width: 100%; height: 100%; }
.cartao-escolha.escolhido { border-color: var(--vermelho); background: #241215; transform: scale(1.04); }
.cartao-escolha.escolhido .figura { transform: scale(1.06) translateY(-6px); }
.cartao-escolha.apagado { opacity: 0.35; transform: scale(0.96); }

/* ---------- 5. revisão + consentimento ---------- */
.revisao { display: grid; grid-template-columns: 1fr 760px; gap: 96px; align-items: center; }
.lista-dados { margin-top: 44px; border-radius: 28px; background: var(--superficie); overflow: hidden; }
.lista-dados div { display: flex; justify-content: space-between; align-items: center; padding: 26px 36px; font-size: 28px; border-bottom: 1px solid var(--linha); }
.lista-dados div:last-child { border-bottom: none; }
.lista-dados dt { color: var(--texto-2); }
.lista-dados dd { margin: 0; font-weight: 600; }
.consentimento { border-radius: 36px; background: var(--superficie); padding: 48px; }
.consentimento h3 { margin: 0 0 16px; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 14px; }
.consentimento h3 .ic { color: var(--verde); font-size: 40px; }
.consentimento p { margin: 0; font-size: 24px; line-height: 1.5; color: var(--texto-2); }
.aceite {
  margin: 36px 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border-radius: 24px;
  background: var(--superficie-2);
  text-align: left;
  font-size: 25px;
  line-height: 1.35;
  transition: transform 0.25s var(--mola), background 0.2s;
}
.caixa-marcar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 3px solid var(--texto-3);
  display: grid;
  place-items: center;
  transition: background 0.25s, border-color 0.25s;
}
.caixa-marcar .ic { font-size: 34px; stroke-width: 3; color: #fff; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 0.4s var(--saida) 0.05s; }
.aceite.marcado .caixa-marcar { background: var(--vermelho); border-color: var(--vermelho); }
.aceite.marcado .caixa-marcar .ic { stroke-dashoffset: 0; }
.consentimento .btn { width: 100%; }

/* ---------- 6. boas-vindas de volta ---------- */
.bem-vindo { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 120px; }
.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff3347, #8f0412);
  display: grid;
  place-items: center;
  font-size: 84px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
  animation: avatar 0.9s var(--mola) both;
  box-shadow: 0 30px 80px -20px rgba(229, 6, 28, 0.6);
}
@keyframes avatar { from { transform: scale(0.4); opacity: 0; } }
.bem-vindo .botoes { display: flex; gap: 28px; margin-top: 64px; }

/* ---------- 7. aguardando a balança ---------- */
.espera { display: grid; grid-template-columns: 1fr 760px; gap: 80px; align-items: center; }
.passos-lista { list-style: none; padding: 0; margin: 44px 0 0; display: flex; flex-direction: column; gap: 16px; }
.passos-lista li {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 32px;
  border-radius: 28px;
  background: var(--superficie);
  font-size: 32px;
  font-weight: 500;
  color: var(--texto-2);
  transition: background 0.4s, color 0.4s, transform 0.5s var(--mola);
}
.passos-lista .num {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--superficie-3);
  font-size: 28px;
  font-weight: 700;
  transition: background 0.4s;
}
.passos-lista .ic { font-size: 44px; margin-left: auto; color: var(--texto-3); transition: color 0.4s; }
.passos-lista li.ativo { background: var(--superficie-2); color: var(--texto); transform: translateX(16px); }
.passos-lista li.ativo .num { background: var(--vermelho); color: #fff; }
.passos-lista li.ativo .ic { color: var(--vermelho); }
.status-espera { display: flex; align-items: center; gap: 28px; margin-top: 44px; }
.giro { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--superficie-3); border-top-color: var(--laranja); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.status-espera .txt { font-size: 26px; color: var(--laranja); font-weight: 600; }
.status-espera .cron { font-size: 26px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.dica-altura { margin-top: 28px; font-size: 24px; color: var(--texto-2); }
.dica-altura strong { color: var(--texto); }
.espera .vitrine { height: 820px; }
.espera .vitrine .figura { height: 760px; }
.btn-teste { margin-left: auto; height: 72px; padding: 0 32px; border-radius: 24px; border: 2px dashed var(--azul); color: var(--azul); background: var(--azul-suave); font-size: 24px; font-weight: 600; }

/* ---------- 8. resultado ---------- */
.resultado { display: grid; grid-template-columns: 680px 1fr; grid-template-rows: auto 1fr; gap: 28px 36px; padding-top: 0; padding-bottom: 56px; }
.cab-resultado { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; }
.cab-resultado .titulo { font-size: 60px; }
.cab-resultado .texto { margin-top: 10px; font-size: 24px; }
.concluir { position: relative; }
.concluir .btn { height: 96px; padding: 0 44px 0 30px; gap: 18px; }
.anel-tempo { width: 52px; height: 52px; transform: rotate(-90deg); }
.anel-tempo circle { fill: none; stroke-width: 5; }
.anel-tempo .trilho { stroke: rgba(255, 255, 255, 0.25); }
.anel-tempo .resta { stroke: #fff; stroke-linecap: round; stroke-dasharray: 138.2; transition: stroke-dashoffset 1s linear; }

.painel-corpo { border-radius: 36px; background: var(--superficie); padding: 32px 32px 24px; display: flex; flex-direction: column; min-height: 0; }
.painel-corpo .topo-cartao { display: flex; justify-content: space-between; align-items: center; }
.painel-corpo h3 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.legenda { display: flex; gap: 22px; font-size: 19px; color: var(--texto-2); }
.legenda span { display: flex; align-items: center; gap: 8px; }
.legenda i { width: 14px; height: 14px; border-radius: 4px; }
.painel-corpo .figura-res { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
.painel-corpo .figura-res svg { height: 100%; max-height: 620px; width: 100%; }
.painel-corpo .varredura { animation: varre-uma 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.2s both; }
@keyframes varre-uma { 0% { top: 0; opacity: 1; } 92% { top: 98%; opacity: 1; } 100% { top: 98%; opacity: 0; } }
.observacoes { display: flex; gap: 12px; margin-top: 8px; }
.observacoes div { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--superficie-2); font-size: 19px; line-height: 1.3; color: var(--texto-2); }
.observacoes .ic { font-size: 28px; }
.observacoes .ok .ic { color: var(--verde); }
.observacoes .atencao .ic { color: var(--laranja); }

.metricas { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: min-content; gap: 24px; align-content: start; }
.metrica { border-radius: 30px; background: var(--superficie); padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.metrica.grande { grid-column: span 2; min-height: 290px; }
.metrica.media { grid-column: span 3; }
.metrica.pequena { grid-column: span 2; }
.metrica .nome { font-size: 22px; color: var(--texto-2); font-weight: 500; }
.metrica .valor { font-size: 76px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.metrica.media .valor { font-size: 60px; }
.metrica.pequena .valor { font-size: 50px; }
.metrica .un { font-size: 26px; color: var(--texto-2); font-weight: 500; letter-spacing: 0; margin-left: 8px; }
.metrica .rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.selo { font-size: 19px; font-weight: 600; padding: 7px 16px; border-radius: 14px; }
.selo.ideal { background: var(--verde-suave); color: var(--verde); }
.selo.acima { background: var(--laranja-suave); color: var(--laranja); }
.selo.abaixo { background: var(--azul-suave); color: var(--azul); }
.delta { font-size: 20px; font-weight: 600; color: var(--texto-3); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.delta.bom { color: var(--verde); }
.delta.ruim { color: var(--laranja); }
.faixa { position: relative; height: 12px; display: flex; gap: 4px; margin-top: 14px; }
.faixa span { flex: 1; border-radius: 6px; opacity: 0.4; }
.faixa .z-abaixo { background: var(--azul); }
.faixa .z-ideal { background: var(--verde); }
.faixa .z-acima { background: var(--laranja); }
.faixa .marca-pos {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 6px solid var(--superficie);
  transform: translate(-50%, -50%);
  transition: left 1.5s var(--mola) 0.5s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ---------- mensagens e modal ---------- */
.mensagem { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 140px; }
.icone-grande { width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); margin-bottom: 44px; animation: avatar 0.8s var(--mola) both; }
.icone-grande .ic { font-size: 76px; }
.mensagem .btn { margin-top: 64px; }

.veu { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(16px); display: grid; place-items: center; animation: aparece 0.3s both; }
@keyframes aparece { from { opacity: 0; } }
.modal { width: 820px; border-radius: 44px; background: var(--superficie); padding: 64px; text-align: center; animation: avatar 0.6s var(--mola) both; }
.modal h2 { margin: 0; font-size: 56px; font-weight: 700; letter-spacing: -0.03em; }
.modal p { font-size: 28px; color: var(--texto-2); margin: 20px 0 48px; }
.modal .btn { width: 100%; }
.contagem-modal { font-size: 120px; font-weight: 700; color: var(--vermelho); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 20px; }

.aviso-rede {
  position: absolute;
  top: 128px;
  left: 50%;
  z-index: 30;
  transform: translate(-50%, -20px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 32px;
  border-radius: 24px;
  background: #3a1013;
  color: #ffb4b0;
  font-size: 24px;
  font-weight: 600;
  transition: opacity 0.35s, transform 0.45s var(--mola);
}
.aviso-rede.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}