/* Quiz Vesta — implementação própria; valores medidos na auditoria (audit/quiz-mosso). */

/* ── fontes (locais) ── */
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/quiz/fonts/libre-caslon-400.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/quiz/fonts/libre-caslon-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(/quiz/fonts/poppins-300.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/quiz/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/quiz/fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/quiz/fonts/poppins-600.woff2?v=2) format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/quiz/fonts/lexend.woff2) format('woff2'); }

/* ── reset + base ── */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #F3F1ED;
  color: #25252D;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { background: none; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; }
h1 { font-size: inherit; font-weight: inherit; }
.serif { font-family: 'Libre Caslon Text', serif; }

/* ── casca da página (medidas do original: coluna 400px, pad 22px/20px) ── */
.pagina { display: flex; min-height: 100dvh; justify-content: center; }
.coluna { width: 100%; max-width: 400px; padding: 20px 22px 0; display: flex; flex-direction: column; }
.shell { margin: 0 auto; display: flex; width: 100%; max-width: 528px; flex-direction: column; flex: 1; }

/* ── header: logo central, voltar à esquerda, progresso 4 trilhas ── */
.hdr { position: relative; width: 100%; }
.hdr.sem-progresso { margin-bottom: 34px; }
.hdr-linha { position: relative; display: flex; align-items: center; justify-content: center; }
.hdr-voltar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.hdr-voltar img { width: 17px; height: 10px; }
.hdr-logo { display: block; height: 22px; width: 207px; }
.hdr-logo img { height: 22px; width: 207px; object-fit: contain; }
.progresso { margin: 17px 0 24px; display: flex; justify-content: center; }
.progresso-trilhas { display: flex; width: 100%; align-items: center; gap: 10px; }
.trilha { height: 2px; width: 100%; background: #ffffff; }
.trilha > div { height: 2px; background: #B32800; transition: width .3s ease-in-out; }

/* transição de telas (fade 300ms, igual ao original) */
.tela { height: 100%; display: flex; flex-direction: column; flex: 1; opacity: 0; transition: opacity .18s ease-in-out; }
.tela.visivel { opacity: 1; }

/* telas de pergunta: o CTA segue o conteúdo (mt-24), não gruda no rodapé —
   comportamento medido no original (goals/slider/height) */
.secao { display: flex; flex-direction: column; }
.miolo { display: flex; flex-direction: column; gap: 20px; }
.miolo-15 { display: flex; flex-direction: column; gap: 15px; }

.titulo {
  font-family: 'Libre Caslon Text', serif;
  font-weight: 400;
  color: #25252D;
  text-align: center;
  font-size: 24px;
  line-height: 1.25;
}
.subtitulo { text-align: center; font-size: 14px; }
.subtitulo-italico { text-align: center; font-size: 16px; font-style: italic; }
.destaque { color: #B32800; font-style: italic; }

/* ── botão CTA (Continue / Next Step / Save & Continue) ── */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 400;
  gap: 10px; width: 100%;
  background: #25252D; color: #fff;
  font-size: 20px; padding: 14px 20px; min-height: 62px; border-radius: 10px;
  box-shadow: 0 0 6px 0 #0000001A;
  transition: background-color .15s, color .15s, border-color .15s;
  text-align: center;
}
.cta:disabled {
  background: transparent; border: 1px solid #25252D66; color: #25252D66;
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.cta-fixa { position: sticky; inset: 0; z-index: 40; margin-top: 24px; padding-bottom: 24px; }
.cta-fixa-33 { position: sticky; inset: 0; z-index: 40; padding-bottom: 33px; }

/* ── linha de opção (universal-question) ── */
.opcoes { display: flex; flex-direction: column; gap: 12px; }
.opcao {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  border-radius: 10px; border: 1px solid transparent; background: #ffffff;
  padding: 20px; line-height: 100%;
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D;
  transition: all .15s;
}
.opcao.marcada { border-color: #B32800; background: #B3280033; }
.opcao-rotulo { display: flex; align-items: center; gap: 13px; }
.opcao-rotulo p { text-align: left; }
.opcao-check { margin-left: 10px; height: 18px; width: 18px; flex: none; }
.opcao-chevron { margin-left: 10px; width: 10px; height: 13px; flex: none; }

/* ── waffle (2 colunas) ── */
.waffle { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.waffle-item {
  grid-column: span 1; display: flex; width: 100%; align-items: center; justify-content: space-between;
  border-radius: 10px; border: 1px solid transparent; background: #ffffff;
  padding: 15px 10px;
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D;
  transition: all .15s;
}
.waffle-item.marcada { border-color: #B32800; background: #B3280033; }
.waffle-item:last-child:nth-child(odd) { grid-column: span 2; justify-self: center; width: 160px; }
/* variante multi (features): último item ímpar ocupa a linha inteira; conteúdo em coluna */
.waffle.multi .waffle-item:last-child:nth-child(odd) { width: 100%; }
.waffle-rotulo-vert { margin: 0 auto; display: flex; flex-direction: column; gap: 13px; }
.waffle-rotulo-vert img { width: 60px; height: 58px; margin: 0 auto; }
.waffle-rotulo-vert p { font-size: 14px; line-height: 1; text-align: center; }
.waffle-rotulo { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.waffle-rotulo img { width: 40px; height: auto; margin: 0 auto; }
.waffle-rotulo .bola { width: 40px; height: 40px; border-radius: 9999px; flex: none; }
.waffle-rotulo p { text-align: left; line-height: 1; overflow-wrap: anywhere; }

/* ── idade (cards 160x200 com foto e faixa escura) ── */
.idade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 11px; row-gap: 25px; justify-items: center; }
.idade-card { position: relative; grid-column: span 1; height: 200px; width: 160px; border-radius: 10px; background: #ffffff; }
.idade-card.marcada { background: #B3280033; outline: 1px solid #B32800; }
.idade-foto { position: relative; height: 200px; overflow: visible; }
.idade-foto img { position: absolute; top: -35px; left: 0; height: 200px; width: auto; max-width: none; object-fit: contain; }
.idade-faixa {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: center;
  border-radius: 0 0 10px 10px; background: #25252D; padding: 16px 20px;
  font-size: 16px; color: #fff;
}
.idade-faixa p { line-height: 100%; }
.idade-faixa img { filter: invert(1); width: 10px; height: 13px; }
.idade-tela { display: flex; flex-direction: column; gap: 40px; padding-bottom: 20px; }
.idade-cabeca { display: flex; flex-direction: column; gap: 15px; }
.idade-cabeca .titulo { line-height: 1.2; }

.rodape-legal { padding-top: 16px; }
.rodape-legal p { text-align: center; font-size: 10px; color: #25252D80; }
.rodape-legal a { color: inherit; text-decoration: underline; }

/* ── undertone (cards grandes com foto 152x116) ── */
.grande { display: flex; width: 100%; border-radius: 10px; border: 1px solid transparent; background: #fff; padding: 10px; box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D; transition: all .15s; }
.grande.marcada { border-color: #B32800; background: #B3280033; }
.grande-linha { display: flex; gap: 13px; }
.grande-linha img { width: 152px; height: 116px; object-fit: cover; flex: none; }
.grande-texto { margin: auto 0; display: flex; flex-direction: column; gap: 13px; }
.grande-texto .nome { text-align: left; font-weight: 600; }
.grande-texto .desc { text-align: left; font-size: 14px; font-style: italic; }

/* ── marcas (single-brands) ── */
.marca {
  display: flex; height: 68px; width: 100%; align-items: center; justify-content: space-between;
  border-radius: 10px; border: 1px solid transparent; background: #fff; padding: 0 20px;
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D; transition: all .15s;
}
.marca.marcada { border-color: #B32800; background: #B3280033; }
.marca img.logos { width: 90px; height: 30px; }

/* ── rating (Would you wear this?) ── */
.rating-tela { display: flex; flex-direction: column; gap: 20px; }
.rating-tela .titulo { font-family: 'Poppins', sans-serif; font-size: 20px; line-height: 1.2; }
.rating-foto { width: 100%; }
.rating-foto img { width: 100%; display: block; }
.rating-opcoes { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.rating-opcao {
  display: flex; height: 92px; width: 105px; flex: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; border-radius: 10px; border: 1px solid transparent; background: #fff; padding: 11px 16px;
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D; transition: all .15s;
}
.rating-opcao.marcada { border-color: #B32800; background: #B3280033; }
.rating-opcao .emoji { font-size: 27px; line-height: 1; }
.rating-opcao p { font-size: 14px; line-height: 1; white-space: nowrap; }

/* ── slider ── */
.slider-tela { display: flex; flex-direction: column; gap: 49px; }
.slider-tela .titulo { font-size: 20px; line-height: 1.2; }
.slider-dica { text-align: center; font-size: 18px; }
.slider-wrap { width: 100%; max-width: 576px; padding-top: 90px; user-select: none;
  --accent: #CFCFCF; --trackBg: #F3F3F3; --bubbleBg: #E9DCD6; --thumb: 28px; --trackH: 8px; --railY: 56px; }
/* quando a usuária mexe (mesmo momento em que o Next Step libera), o slider assume o vermelho do quiz */
.slider-wrap.ativo { --accent: #B32800; }
.slider-area { position: relative; padding: 64px 4px 0; }
.slider-trilho { position: absolute; top: var(--railY); right: 0; left: 0; height: var(--trackH); transform: translateY(-50%); }
.slider-trilho .fundo { position: absolute; inset: 0; border-radius: 9999px; background: var(--trackBg); }
.slider-trilho .cheio { position: absolute; top: 50%; left: 0; height: var(--trackH); transform: translateY(-50%); border-radius: 9999px; background: var(--accent); transition: background .3s ease; }
.slider-bolha {
  font-family: 'Libre Caslon Text', serif; pointer-events: none; position: absolute; z-index: 10;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  padding: 8px 12px; font-size: 20px; font-weight: 400; color: #B32800;
  background: var(--bubbleBg); top: calc(var(--railY) - 80px); transform: translateX(-50%) scale(.96);
}
.slider-bolha .seta { pointer-events: none; position: absolute; bottom: -8px; left: 50%; height: 0; width: 0; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--bubbleBg); }
.slider-thumb { pointer-events: none; position: absolute; z-index: 30; border-radius: 9999px; border: 4px solid var(--accent); background: #fff; transition: border-color .3s ease;
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05); width: var(--thumb); height: var(--thumb);
  top: calc(var(--railY) - var(--thumb) / 2); transform: translateX(-50%); }
.slider-input { position: absolute; top: var(--railY); right: 0; left: 0; z-index: 40; display: block; width: 100%;
  transform: translateY(-50%); appearance: none; -webkit-appearance: none; background: transparent; outline: none; touch-action: none; height: 28px; }
.slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; opacity: 0; }
.slider-marcas { pointer-events: none; margin-top: 15px; display: flex; justify-content: space-between; font-size: 16px; }

/* ── altura/peso ── */
.medida-tela { display: flex; flex-direction: column; gap: 20px; }
.unidades { display: flex; justify-content: center; margin-top: 23px; }
.unidades-pilula { display: flex; padding: 2px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D; }
.unidade { width: 83px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; color: #25252D; }
.unidade.ativa { background: #25252D; color: #fff; }
.medida-campos { display: flex; gap: 15px; margin-top: 51px; }
.medida-campos.um { display: block; }
.medida-campo {
  height: 60px; width: 100%; border-radius: 10px; background: #fff; text-align: center; font-size: 22px;
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D; outline: none;
}
.medida-campo::placeholder { color: #B7B7B7; }
.medida-campo:focus { box-shadow: 0 0 0 1px #B32800; }

/* ── localização ── */
.loc-tela { display: flex; flex-direction: column; gap: 30px; }
.loc-sub { text-align: center; font-size: 14px; }
.loc-campo-wrap { position: relative; }
.loc-campo {
  height: 60px; width: 100%; border-radius: 10px; background: #fff; padding: 16px 40px 16px 45px; font-size: 17px;
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D; outline: none;
}
.loc-campo:focus { box-shadow: 0 0 0 1px #B32800; }
.loc-pin { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 20px; }
.loc-x { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; }
.loc-cards { display: flex; justify-content: center; gap: 7px; }
.loc-card { width: 106px; height: 164px; background: #fff; border-radius: 10px; padding: 20px 0 28px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.loc-card img { width: 30px; height: 22px; }
.loc-card .rotulo { font-size: 12px; min-height: 36px; text-align: center; }
.loc-card .valor { font-size: 20px; font-weight: 600; text-align: center; text-transform: capitalize; }

/* ── inserts / telas de conteúdo ── */
.ins-central { display: flex; flex-direction: column; flex-grow: 1; }
.ins-titulo { font-family: 'Libre Caslon Text', serif; text-align: center; font-size: 28px; line-height: 1.25; }
.ins-sub { text-align: center; font-size: 16px; line-height: 1.3; }

/* insert 2 — 120.000+ mulheres */
.prova-social { display: flex; flex-direction: column; flex-grow: 1; height: 100%; padding-bottom: 30px; }
.ins-central { display: flex; flex: 1 1 auto; flex-direction: column; }
.prova-nota { color: #25252D; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 12px; line-height: 1.3; font-weight: 500; }
.prova-nota b { font-weight: 800; margin-right: 2px; }
.prova-nota svg { flex-shrink: 0; }
.prova-colagem { position: relative; margin: 0 -20px; flex: 1 0 auto; overflow: hidden; display: flex; align-items: center; }
.prova-colagem img { width: 100%; height: auto; object-fit: contain; }

/* insert 3 — jornada: zigue-zague VERTICAL, igual ao original do Mosso
   (era carrossel horizontal; refeito em 02/09 a pedido do usuário) */
.jornada { position: relative; width: 300px; height: 330px; margin: 0 auto; }
.jornada img { max-width: none; pointer-events: none; }
.jornada-no { position: absolute; opacity: 0; transition: opacity .8s ease-in-out; }
.jornada-no.visivel { opacity: 1; }

/* loading de fase (círculo + trilha de fases) + marco */
.fase-tela { display: flex; height: 100%; flex-direction: column; justify-content: space-between; padding-bottom: 30px; flex: 1; }
.fase-topo { display: flex; flex-direction: column; gap: 41px; }
.fase-circulo {
  margin: 0 auto; display: flex; height: 60px; width: 60px; align-items: center; justify-content: center;
  border-radius: 9999px; background: #B32800; transition: all .2s ease-in-out;
  animation: pulse-loading 2s infinite;
}
.fase-circulo p { font-family: 'Libre Caslon Text', serif; font-size: 20px; line-height: 100%; font-weight: 600; color: #fff; }
@keyframes pulse-loading {
  0% { transform: scale(.95); box-shadow: 0 0 #b32800b3, 0 0 #b3280066; }
  50% { transform: scale(1.05); box-shadow: 0 0 0 12.5px #b3280000, 0 0 0 25px #b3280000; }
  100% { transform: scale(.95); }
}
.fase-msg { text-align: center; font-size: 14px; line-height: 130%; }
.fase-trilha-wrap { margin: 0 0 12px; display: flex; justify-content: center; padding-right: 26px; padding-left: 12px; }
.fase-trilha-col { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 10px; }
.fase-trilha { position: relative; display: flex; height: 6px; width: 100%; flex-direction: row; border-radius: 9999px; background: #ffffff; }
.fase-pontos { display: flex; width: 100%; flex-direction: row; align-items: center; justify-content: flex-end; gap: 28%; }
.fase-ponto { z-index: 10; display: flex; height: 12px; width: 12px; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #B32800; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); background: #fff; }
.fase-ponto.feito { background: #B32800; }
.fase-ponto img { width: 8px; height: 8px; }
.fase-barra { position: absolute; height: 6px; border-radius: 9999px; background: #B32800; transition: all .2s; }
.fase-etiquetas { display: flex; width: 100%; flex-direction: row; align-items: center; justify-content: flex-end; padding-right: 12px; gap: 15%; }
.fase-etiqueta { border-radius: 10px; background: #B328001A; padding: 3px 7px; color: #25252D80; }
.fase-etiqueta.ativa { color: #25252D; }
.fase-etiqueta p { font-size: 8px; }
.fase-cita { position: relative; margin-bottom: 50px; display: flex; flex-direction: column; gap: 13px; border-radius: 10px; background: #B328001A; padding: 30px; }
.fase-cita .aspas { position: absolute; top: -25px; left: 5px; width: 54px; height: auto; }
.fase-cita .aspas-fim { position: absolute; right: 5px; bottom: -25px; top: auto; left: auto; transform: rotateY(180deg); }
.fase-cita .texto { font-size: 12px; line-height: 100%; font-style: italic; }
.fase-cita .autor { font-family: 'Libre Caslon Text', serif; font-size: 18px; line-height: 100%; }
.fase-cita .texto b { font-weight: 700; }
/* depoimentos no rodapé do loading (fase 2) — mesmo carrossel .res-depos do result */
.fase-depos { margin-bottom: 50px; }
/* marco (fase completa) */
.marco-textos { display: flex; flex-direction: column; gap: 30px; padding: 20px 0; text-align: center; }
.marco-textos .grande-titulo { font-family: 'Libre Caslon Text', serif; font-size: 24px; line-height: 100%; }
.marco-textos .sub { font-size: 16px; line-height: 130%; }
.marco-textos .sub + .sub { margin-top: 0; }

/* insert 1 — pré-carregamento do quiz */
.pre-tela { display: flex; flex-direction: column; flex: 1; padding-bottom: 30px; }
.pre-foto { margin: 20px 0 0; }
.pre-foto img { width: 100%; }
.pre-textos { margin-top: auto; display: flex; flex-direction: column; gap: 24px; padding-top: 30px; }
.pre-titulo { font-family: 'Libre Caslon Text', serif; text-align: center; font-size: 28px; line-height: 1.25; }
.pre-sub { text-align: center; font-size: 18px; }
.pre-barra { height: 8px; border-radius: 9999px; background: #E9DCD6; overflow: hidden; margin: 6px 12px 0; }
.pre-barra > div { height: 8px; border-radius: 9999px; background: #B32800; transition: width .2s linear; }
.pre-rodape { text-align: center; font-size: 14px; color: #25252D; padding: 26px 0 10px; }

/* face-scan (medidas do original: título 25px, vídeo 200x271, ações px-20 pb-32) */
.scan-tela { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: space-between; flex: 1; }
.scan-tela .miolo { gap: 20px; }
.scan-titulo { font-family: 'Libre Caslon Text', serif; text-align: center; font-size: 25px; line-height: 1.2; color: #25252D; }
.scan-video { margin: 0 auto; border-radius: 10px; width: 200px; height: 271px; object-fit: cover; }
.scan-sub { text-align: center; line-height: 1.2; }
.scan-priv { display: flex; align-items: center; gap: 10px; padding: 0 15px; }
.scan-priv img { width: 16px; height: 17px; flex: none; }
.scan-priv p { font-size: 10px; }
.scan-acoes { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 20px; padding: 20px 20px 32px; }
.scan-pular { text-align: center; font-size: 18px; text-decoration: underline; }
.scan-preview { margin: 30px auto 0; width: 264px; border-radius: 10px; overflow: hidden; position: relative; }
.scan-preview img { width: 100%; }
.scan-analise { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.scan-analise .linha { position: absolute; left: 0; right: 0; height: 3px; background: #B32800; box-shadow: 0 0 14px 2px #B3280099; animation: varredura 1.6s ease-in-out infinite alternate; }
@keyframes varredura { from { top: 6%; } to { top: 92%; } }

/* erro de validação de altura/peso (ErrorMessage do Mosso: 12px, #EC3E0C) */
.medida-erro { margin-top: 4px; font-size: 12px; color: #EC3E0C; text-align: center; }

/* preview + escaneamento (foto sangrada até as bordas, como no original) */
.scan-foto-area { position: relative; height: 450px; margin: -20px -22px 0; overflow: hidden; background: #F5F2EE; }
.scan-foto { width: 100%; height: 100%; object-fit: cover; }
.scan-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scan-faixa { position: absolute; top: -112px; left: 0; right: 0; height: 112px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.45));
  mix-blend-mode: screen; animation: scan-desce 5s linear infinite; }
@keyframes scan-desce { from { transform: translateY(0); } to { transform: translateY(480%); } }
.scan-nao-achou { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; background: #F5F2EE; text-align: center; }
.scan-nao-titulo { font-weight: 600; font-size: 20px; }
.scan-nao-sub { padding: 0 20px; font-size: 14px; }

/* insert 7 — Great job (layout do original: logo, foto 200px, textos, botão) */
.fim-tela { position: relative; display: flex; height: 100%; flex: 1; flex-direction: column; justify-content: space-between; }

/* popup (undertone / slider) */
.veu { position: fixed; inset: 0; z-index: 50; display: flex; overflow: hidden auto; background: rgb(0 0 0 / .42); padding: 20px; backdrop-filter: blur(4.2px); opacity: 0; transition: opacity .25s; }
.veu.visivel { opacity: 1; }
.veu-caixa { position: relative; margin: auto; }
.pop { margin: 0 16px; max-width: 304px; overflow: hidden; border-radius: 5px; background: #F5F2EE; padding: 10px; box-shadow: 0 0 12px 0 #0000001A; }
.pop-foto { margin-bottom: 18px; width: 100%; overflow: hidden; border-radius: 6px; }
.pop-texto { font-family: 'Libre Caslon Text', serif; color: #25252D; margin-bottom: 18px; text-align: center; font-size: 18px; line-height: 1.3; }
.pop-texto b { font-weight: 700; color: #B32800; }
.pop-texto i { color: #B32800; }
.pop-acoes { display: flex; gap: 12px; }
.pop-acoes > * { flex: 1; }
.pop-btn {
  display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 400;
  gap: 10px; background: #fff; color: #25252D; box-shadow: 0 0 26px 0 #0000000D;
  font-size: 16px; padding: 8px 16px; min-height: 58px; border-radius: 6px; transition: background-color .15s, color .15s;
}
.pop-btn:hover, .pop-btn:active { background: #25252D; color: #fff; }
/* popup simples (só texto + ok automático) */
.pop-simples { text-align: center; padding: 24px 16px; }

/* ── página de RESULT ── */
.res-coluna { width: 100%; max-width: 400px; padding: 20px 22px; display: flex; flex-direction: column; }
.res-hdr { position: relative; height: 32px; width: 100%; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.res-anel-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 30px; }
.res-anel { position: relative; display: flex; align-items: center; justify-content: center; }
.res-anel svg { transform: rotate(-90deg); }
.res-anel circle.fundo { stroke: #fff; }
.res-anel circle.arco { stroke: #B32800; transition: stroke-dashoffset 75ms linear; }
.res-anel .pct { font-family: 'Libre Caslon Text', serif; position: absolute; font-size: 24px; }
.res-titulo { font-family: 'Libre Caslon Text', serif; font-weight: 400; color: #25252D; text-align: center; margin-bottom: 30px; font-size: 20px; line-height: 1.3; }
.res-caixa { background: #F5E6D3; width: 100%; display: flex; flex-direction: column; gap: 20px; border-radius: 10px; padding: 10px 0; margin-bottom: 26px; }
.res-caixa .conta { color: #25252D; font-family: 'Libre Caslon Text', serif; margin-bottom: 8px; padding: 0 15px; text-align: center; font-size: 14px; line-height: 1.3; }
.res-marquee { display: flex; overflow: hidden; }
.res-marquee-fila { display: flex; width: max-content; gap: 8px; will-change: transform; }
.res-email { min-width: fit-content; border-radius: 5px; background: #fff; padding: 6px 8px; font-size: 10px; line-height: 12px; white-space: nowrap; color: #403D42; font-style: italic; }
.res-depos { margin: 0 -22px; }
.res-depos-fila { display: flex; gap: 16px; padding: 0 22px; overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; }
.res-depos-fila::-webkit-scrollbar { display: none; }
.res-depo { flex: none; max-width: 248px; display: flex; flex-direction: column; justify-content: center; border-radius: 10px; border: 1px solid #fff; color: #333; padding: 10px; }
.res-depo .cabeca { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.res-depo .quem { display: flex; align-items: center; gap: 10px; }
.res-depo .avatar-wrap { overflow: hidden; border-radius: 9999px; background: #D7D7FF; height: 26px; width: 26px; }
.res-depo .avatar-wrap img { border-radius: 9999px; width: 26px; height: 26px; }
.res-depo .nome { font-family: 'Lexend', sans-serif; color: #25252D; font-weight: 700; font-size: 14px; }
.res-depo .estrelas { width: 85px; height: 14px; }
.res-depo .fala { color: #333; font-size: 12px; }