/* Páginas do diagnóstico (/confirmar, /pre-venda, /obrigado) e a política de privacidade. */
.logo-link { position: relative; display: inline-flex; border-radius: var(--raio-pequeno); }
.logo-link::after { content: ""; position: absolute; inset: -2px 0; } /* área de toque de 44 px */
.topo-centro { justify-content: center; padding-top: 16px; }

/* "O diagnóstico da hardfit foi finalizado" */
.finalizado { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.finalizado .selo { margin-bottom: 4px; }
.finalizado h1 { font-size: 24px; line-height: 32px; }
.finalizado h1 .nome { color: var(--ouro); overflow-wrap: anywhere; }
.finalizado p { font-size: 14px; line-height: 20px; color: var(--texto-2); max-width: 420px; }
.heroi .texto > .sub { text-align: center; font-size: 14px; line-height: 20px; }

/* Saúde: nota de 0 a 100 num anel que enche, com o nível em cor */
.cartao-saude { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.medidor { position: relative; width: 168px; height: 168px; }
.medidor svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.medidor circle { fill: none; stroke-width: 10; }
.medidor .trilho { stroke: #1b3150; }
.medidor .arco { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--alvo); animation: enche 1600ms var(--mola) 200ms both; }
@keyframes enche { from { stroke-dashoffset: 100; } }
.medidor .nota { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.medidor .nota b { font-size: 48px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.medidor .nota span { font-size: 12px; line-height: 16px; color: var(--texto-2); }
.nivel { display: inline-flex; padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.nivel.cor-vermelho { background: rgba(255, 107, 94, 0.12); }
.nivel.cor-ambar { background: rgba(245, 181, 68, 0.12); }
.nivel.cor-verde { background: rgba(95, 211, 141, 0.12); }
.titulo-nivel { font-size: 20px; line-height: 28px; font-weight: 700; }
.cartao-saude .corpo { font-size: 14px; line-height: 20px; }

/* Valor na mesa: o número grande em vermelho (dinheiro que escapa), por mês e por ano */
.cartao-valor { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border-color: rgba(255, 107, 94, 0.35); }
.cartao-valor .antes { font-size: 16px; line-height: 24px; color: #dbe3ec; max-width: 360px; }
.cartao-valor .valor { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--vermelho); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao-valor .valor.verde { color: var(--verde); }
.cartao-valor .depois { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.pilula { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: rgba(255, 107, 94, 0.12); border: 1px solid rgba(255, 107, 94, 0.35); color: #ffc2bc; font-size: 14px; line-height: 20px; font-weight: 700; }
.conta { width: 100%; text-align: left; }
.conta summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ouro); }
.conta summary::-webkit-details-marker { display: none; }
.conta summary svg { width: 16px; height: 16px; flex: none; }
.conta summary svg:last-child { transition: transform 700ms var(--mola); }
.conta[open] summary svg:last-child { transform: rotate(180deg); }
.conta ul { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; color: #c9d3df; }
.perfil { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: #e9d9b6; }
.perfil svg { width: 20px; height: 20px; flex: none; color: var(--ouro); }
.cartao-valor .botao { margin-top: 8px; }
.cartao-valor .prova { display: flex; gap: 8px; text-align: left; font-size: 14px; line-height: 20px; color: #e9d9b6; }
.cartao-valor .prova svg { width: 20px; height: 20px; flex: none; color: var(--ouro); }

/* Raio-x por área */
.areas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.area { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.area .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-medio); }
.area .ic svg { width: 20px; height: 20px; }
.area .ic.cor-vermelho { background: rgba(255, 107, 94, 0.12); }
.area .ic.cor-ambar { background: rgba(245, 181, 68, 0.12); }
.area .ic.cor-verde { background: rgba(95, 211, 141, 0.12); }
.area-corpo { display: flex; flex-direction: column; gap: 8px; }
.area-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.area-topo strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.area-nota { flex: none; font-size: 12px; line-height: 16px; color: var(--texto-2); }
.area-nota b { font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.area-nota.cor-vermelho b { color: var(--vermelho); }
.area-nota.cor-ambar b { color: var(--ambar); }
.area-nota.cor-verde b { color: var(--verde); }
.area-nota.cor-vermelho, .area-nota.cor-ambar, .area-nota.cor-verde { color: var(--texto-2); }
.barra-nota { display: block; height: 6px; border-radius: 999px; background: #1b3150; overflow: hidden; }
.barra-nota i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: currentColor; animation: cresce 1400ms var(--mola) 300ms both; }
@keyframes cresce { from { width: 0; } }
.area p { font-size: 14px; line-height: 20px; color: var(--texto-2); }

/* Plano de ação */
.plano { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.passo-plano { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px; background: var(--cartao); border: 1px solid rgba(217, 178, 106, 0.35); border-radius: var(--raio); }
.passo-plano .num { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ouro); }
.passo-plano .pilha { gap: 8px; }
.passo-plano strong { font-size: 18px; line-height: 28px; font-weight: 700; padding-top: 4px; }
.valor-area { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ouro); }
.o-que-fazer { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid rgba(217, 178, 106, 0.3); border-radius: var(--raio-medio); background: rgba(217, 178, 106, 0.06); }
.o-que-fazer .olho { display: inline-flex; align-items: center; gap: 4px; }
.o-que-fazer .olho svg { width: 16px; height: 16px; }
.o-que-fazer p { font-size: 14px; line-height: 20px; color: #dbe3ec; }

/* Botão do WhatsApp no fim de cada seção */
.cta-secao { margin-top: 8px; }
.cartao-valor .botao { margin-top: 8px; }
.heroi .texto > .botao { margin-top: -4px; }

/* Vídeo do Bruno (toca na página) */
.video { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.video.vertical .tela-video { width: 100%; max-width: 320px; margin-inline: auto; }
.video figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.video figcaption strong { font-size: 16px; line-height: 24px; }
.video figcaption span { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.video figcaption svg { width: 16px; height: 16px; }
#video .perfil { margin-top: 8px; }
.fontes { margin-top: 8px; font-size: 12px; line-height: 16px; color: #8fa0b6; }

/* Conteúdo gratuito (desquali) */
.conteudos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.conteudos a {
  display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 16px; text-decoration: none;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-medio); transition: border-color 300ms var(--mola);
}
.conteudos strong { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.conteudos svg { width: 20px; height: 20px; flex: none; color: var(--ouro); }
.conteudos span { font-size: 14px; line-height: 20px; color: var(--texto-2); }

.legal h2 { font-size: 20px; line-height: 28px; }
.legal p { color: var(--texto-2); }

@media (min-width: 768px) {
  .conteudos { grid-template-columns: repeat(2, 1fr); }
  .cartao-valor .valor, .medidor .nota b { font-size: 60px; }
}

/* Passar o mouse: só onde existe mouse (no toque, o destaque ficaria preso na opção tocada). */
@media (hover: hover) {
  .conteudos a:hover { border-color: var(--ouro); }
}