/* Design system mínimo (tokens documentados no PLANO.md, seção 12). */
@font-face { font-family: "GSerif"; src: url(assets/source-serif-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
:root {
  /* marca */
  --marinho: #0E1B2C; --marinho-2: #16273D; --marinho-3: #213A57;
  --dourado: #D9A84A; --dourado-escuro: #7A5810; --areia: #F4F0E7; --branco: #fff;
  --texto: #ECE7DB; --texto-2: #B3BDCB; --texto-escuro: #0E1B2C; --texto-escuro-2: #4A5568; --linha: #D9D2C1;
  /* estados */
  --ok: #3E9B6A; --parcial: #D69A2D; --pendente: #8A94A3;
  /* tipo: 12 14 16 18 24 32 */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: "GSerif", Georgia, serif;
  --t1: 12px; --t2: 14px; --t3: 16px; --t4: 18px; --t5: 24px; --t6: 32px;
  /* espaço */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  /* forma e movimento */
  --r: 12px; --curva: cubic-bezier(.2, .7, .2, 1); --rapido: 150ms; --medio: 200ms; --lento: 300ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--marinho); color: var(--texto); font: var(--t3)/1.45 var(--sans); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#app { position: relative; max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* topo */
.topo { flex: none; display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); padding: var(--e3) var(--e4) var(--e2); }
.marca { display: flex; align-items: center; gap: var(--e2); font: 700 var(--t1)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); }
.pontos { align-self: center; font-size: var(--t2); color: var(--texto-2); }
.pontos b { color: var(--texto); font-size: var(--t3); transition: color var(--lento) var(--curva); }
.pontos b.mudou { color: var(--dourado); }
.progresso { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e3); font-size: var(--t1); color: var(--texto-2); }
.barra { flex: 1; height: 4px; background: var(--marinho-3); border-radius: var(--r); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--dourado); transition: width var(--lento) var(--curva); }
.segs { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.segs li { height: 6px; border-radius: 3px; background: var(--marinho-3); transition: background var(--medio) var(--curva), transform var(--medio) var(--curva); }
.segs li.atual { background: var(--texto-2); }
.segs li[data-s="0"] { background: var(--pendente); } .segs li[data-s="1"] { background: var(--parcial); }
.segs li[data-s="2"], .segs li[data-s="3"] { background: var(--ok); } .segs li[data-s="na"] { background: var(--marinho-3); }
.pontos { position: relative; }
.ganho { position: absolute; right: 0; top: -2px; font: 800 var(--t3)/1 var(--serif); color: var(--dourado); opacity: 0; pointer-events: none; }
.ganho.sobe { animation: sobe 700ms var(--curva); }
@keyframes sobe { 0% { opacity: 0; transform: translateY(4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.autonomia { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px var(--e3); font-size: var(--t1); color: var(--texto-2); }
.aut-txt { color: var(--texto); font-weight: 700; font-size: var(--t2); }
.autonomia[data-faixa="0"] .aut-txt { color: #E07B5F; } .autonomia[data-faixa="1"] .aut-txt { color: var(--parcial); }
.autonomia[data-faixa="2"] .aut-txt, .autonomia[data-faixa="3"] .aut-txt { color: var(--ok); }
.aut-barra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.aut-barra li { height: 4px; border-radius: 2px; background: var(--marinho-3); transition: background var(--lento) var(--curva); }
.aut-barra li.on { background: var(--dourado); }
[data-tela="0"] .pontos, [data-tela="0"] .progresso, [data-tela="0"] .autonomia,
[data-tela="6"] .pontos, [data-tela="6"] .progresso, [data-tela="6"] .autonomia,
[data-tela="l"] .progresso, [data-tela="l"] .autonomia, [data-tela="l"] .pontos { display: none; }

/* palco: SVG de base; a cena 3D entra por cima quando o aparelho aguenta */
.palco { position: relative; flex: 1 1 0; min-height: 0; max-height: 260px; }
[data-tela="0"] .palco { flex: 0 0 30vh; flex: 0 0 30dvh; }
[data-tela="6"] .palco { display: none; }
.casa, .palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.palco canvas { opacity: 0; transition: opacity var(--lento) var(--curva); }
.palco.com3d canvas { opacity: 1; } .palco.com3d .casa { opacity: 0; }
.chao { fill: #13243a; } .parede { fill: #2b4260; } .telhado { fill: #1d3049; } .porta { fill: #172a42; } .tampa { fill: #3a5272; } .poste { stroke: #6f7f95; stroke-width: 2; }
.casa .item { fill: #33465f; transition: fill var(--lento) var(--curva); }
.casa [data-s="1"] .item { fill: #a77d34; }
.casa [data-s="2"] .item { fill: #e8bf68; }

/* cartão de contexto (fatos com fonte) */
.notif { position: absolute; z-index: 5; left: var(--e3); right: var(--e3); top: var(--e2); background: var(--areia); color: var(--texto-escuro); border-radius: var(--r); padding: var(--e3) var(--e4); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: desce var(--medio) var(--curva); will-change: transform; contain: content; }
.notif[hidden] { display: none; }
.notif.sai { opacity: 0; transition: opacity var(--rapido); pointer-events: none; }
@keyframes desce { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.notif-cab { display: flex; align-items: center; gap: var(--e2); font-size: var(--t1); color: var(--texto-escuro-2); }
.notif-cab span:first-of-type { font-weight: 700; color: var(--texto-escuro); }
.notif-rot { margin-left: auto; }
.notif-x { display: grid; place-items: center; border: 0; background: none; width: 36px; height: 36px; margin: -10px -12px -10px 0; cursor: pointer; color: var(--texto-escuro-2); }
.notif strong { display: block; font-size: var(--t3); margin-top: var(--e1); }
.notif p { margin: 2px 0 var(--e1); font-size: var(--t2); line-height: 1.4; }
.notif-fonte { margin: 0 !important; font-size: var(--t1) !important; color: var(--texto-escuro-2); }

/* telas */
main { flex: none; position: relative; }
[data-tela="6"] main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tela { display: none; padding: var(--e2) var(--e4) var(--e3); }
.tela.ativa { display: block; animation: entra var(--medio) var(--curva); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.selo { margin: 0 0 var(--e2); font: 700 var(--t1)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); }
h1, h2 { font-family: var(--serif); font-weight: 800; color: var(--branco); margin: 0 0 var(--e2); line-height: 1.15; }
h1 { font-size: var(--t6); } h2 { font-size: var(--t5); }
h1:focus, h2:focus, p:focus, .bolha:focus { outline: none; }
.sub { margin: 0 0 var(--e3); color: var(--texto-2); font-size: var(--t3); }
.cta { display: flex; align-items: center; justify-content: center; gap: var(--e2); width: 100%; min-height: 56px; border: 0; border-radius: var(--r); background: var(--dourado); color: var(--texto-escuro); font-weight: 700; font-size: var(--t4); cursor: pointer; text-decoration: none; text-align: center; padding: var(--e3) var(--e4); transition: transform var(--rapido) var(--curva), filter var(--rapido); }
.cta:active { transform: scale(.98); filter: brightness(.95); }
.confianca { text-align: center; color: var(--texto-2); font-size: var(--t1); margin: var(--e2) 0 0; }
.link, .voltar { display: block; margin: 0 auto; min-height: 44px; padding: var(--e2) var(--e3); background: none; border: 0; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t2); cursor: pointer; }

/* conversa */
.bolha { position: relative; max-width: 92%; padding: 10px var(--e3); border-radius: var(--r); font-size: var(--t3); line-height: 1.4; margin: 0 0 var(--e2); }
.bolha.ass { background: var(--marinho-2); color: var(--texto); border: 1px solid var(--marinho-3); padding-left: 40px; }
.bolha.ass::before { content: ""; position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: url(assets/icone-96.png) center / cover; }
.bolha.vc { margin-left: auto; background: var(--marinho-3); color: var(--texto); width: fit-content; }
.bolha.curta { font-size: var(--t2); color: var(--texto-2); }
.bolha.perg { font-size: var(--t4); font-weight: 600; color: var(--branco); }
.opcoes { display: grid; gap: var(--e2); margin-top: var(--e1); }
.op { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 54px; padding: 10px var(--e4); border: 1px solid transparent; border-radius: var(--r); background: var(--areia); color: var(--texto-escuro); font-size: var(--t3); font-weight: 600; text-align: left; cursor: pointer; transition: transform var(--rapido) var(--curva), background var(--rapido); touch-action: manipulation; }
.op::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pendente); }
.op:active { transform: scale(.985); background: var(--branco); }
.op[aria-pressed="true"] { border-color: var(--dourado-escuro); }
.op[aria-pressed="true"]::before { border-color: var(--dourado-escuro); background: var(--dourado-escuro); box-shadow: inset 0 0 0 3px var(--branco); }
.op.tocada { background: var(--branco); border-color: var(--dourado-escuro); }
.voltar { margin-top: var(--e2); }
.op-na { display: block; width: 100%; min-height: 44px; margin-top: 2px; background: none; border: 0; color: var(--texto-2); font-size: var(--t2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* carregando */
.load-tit { font: 800 var(--t5)/1.2 var(--serif); color: var(--branco); margin: var(--e3) 0; }
.load-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.load-lista li { display: flex; gap: var(--e3); align-items: center; color: var(--texto-2); opacity: .45; transition: opacity var(--medio) var(--curva); }
.load-lista li .ic { color: var(--pendente); }
.load-lista li.ok { opacity: 1; color: var(--texto); } .load-lista li.ok .ic { color: var(--ok); }

/* tela final: fundo areia, um bloco por ideia, uma ação por bloco */
[data-tela="6"] { background: var(--areia); }
[data-tela="6"] .marca { color: var(--dourado-escuro); }
#t6 { color: var(--texto-escuro); padding-bottom: var(--e6); }
#t6 h3 { font: 800 var(--t5)/1.2 var(--serif); color: var(--texto-escuro); margin: 0 0 var(--e3); }
.bloco { margin-top: var(--e6); }
.micro { font-size: var(--t1); color: var(--texto-2); margin: 0; }
.micro.escuro, #t6 .micro { color: var(--texto-escuro-2); }
.selo-final { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--dourado); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.selo-final circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: traco var(--lento) var(--curva) forwards; }
.selo-final path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: traco var(--lento) var(--curva) var(--lento) forwards; }
@keyframes traco { to { stroke-dashoffset: 0; } }
.lead { margin: 0 0 var(--e3); color: var(--texto-escuro-2); }
.etq { margin: 0; font: 700 var(--t1)/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dourado-escuro); }
.indica { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.indica li { padding: var(--e3) var(--e4); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); font-size: var(--t2); }
.noticias { list-style: none; padding: 0; margin: var(--e2) 0 0; display: grid; gap: var(--e2); }
.nt { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--e3) var(--e4); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); cursor: pointer; color: var(--texto-escuro); }
.nt-meta { font-size: var(--t1); color: var(--texto-escuro-2); } .nt strong { font-size: var(--t3); line-height: 1.3; }
.nt-ler { font-size: var(--t1); font-weight: 700; color: var(--dourado-escuro); text-decoration: underline; text-underline-offset: 3px; }
.nt:active { transform: scale(.99); }
.oficial { margin: var(--e3) 0 0; font-size: var(--t2); color: var(--texto-escuro-2); }
.erros { display: grid; gap: var(--e2); }
.erro { padding: var(--e3) var(--e4); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); }
.erro strong { display: block; margin-bottom: var(--e1); }
.erro p { margin: 0; font-size: var(--t2); } .er-a { color: #9C3D2A; } .er-b { color: var(--texto-escuro-2); margin-top: 2px !important; }
.custo { border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; background: var(--branco); }
.cu-linha { display: grid; grid-template-columns: 1fr 1fr; }
.cu-linha + .cu-linha { border-top: 1px solid var(--linha); }
.cu-linha > * { margin: 0; padding: var(--e3); font-size: var(--t2); }
.cu-cab span { padding: var(--e2) var(--e3); font: 700 var(--t1)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; background: var(--marinho); color: var(--dourado); }
.cu-a { color: var(--texto-escuro); } .cu-b { color: #9C3D2A; background: #FBF6EC; }
.recebe { display: grid; grid-template-columns: 104px 1fr; gap: var(--e4); align-items: center; }
.recebe img { width: 104px; height: auto; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); font-size: var(--t2); }
.checks li { display: flex; gap: var(--e2); } .checks .ic { width: 18px; height: 18px; color: var(--ok); margin-top: 1px; }
.comeca { margin: var(--e4) 0 0; padding: var(--e3); background: var(--branco); border-radius: var(--r); font-size: var(--t2); }
.agora ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.agora li { display: flex; gap: var(--e2); font-size: var(--t2); } .agora .ic { width: 18px; height: 18px; color: var(--dourado-escuro); margin-top: 1px; }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--e2); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border: solid var(--dourado-escuro); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--medio) var(--curva); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 0 0 var(--e3); font-size: var(--t2); color: var(--texto-escuro-2); }
#of-tit:focus { outline: none; }
.planos { display: grid; gap: var(--e3); margin-top: var(--e3); }
.plano { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); padding: var(--e4); }
.plano.destaque { border: 2px solid var(--dourado); }
.plano .etq { margin-bottom: var(--e2); }
.plano-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.plano h4 { margin: 0; font-size: var(--t4); }
.preco { margin: 0; font: 800 var(--t5)/1 var(--serif); } .preco small { font: 600 var(--t2) var(--sans); }
.plano ul { margin: var(--e2) 0 var(--e3); padding-left: 18px; font-size: var(--t2); color: var(--texto-escuro-2); } .plano li { margin: 2px 0; }
.plano .cta { min-height: 52px; font-size: var(--t3); }
.cta.sec { background: none; border: 1.5px solid var(--texto-escuro); color: var(--texto-escuro); }
.garantia { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e4) 0 0; padding: var(--e3); background: var(--branco); border-radius: var(--r); font-size: var(--t2); font-weight: 600; }
.garantia .ic { color: var(--ok); width: 22px; height: 22px; }
.cta.final { margin-top: var(--e6); }
.rodape { margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid var(--linha); display: grid; gap: var(--e2); font-size: var(--t1); color: var(--texto-escuro-2); }
.rodape p { margin: 0; }
.link-mais { min-height: 44px; padding: var(--e2) 0; border: 0; background: none; color: var(--texto-escuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.so-pulo { display: none; }
[data-sem-laudo="1"] .so-pulo { display: block; margin-bottom: var(--e4); }
[data-sem-laudo="1"] [data-laudo] { display: none !important; }
.barra-planos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: var(--e2) var(--e4) calc(var(--e2) + env(safe-area-inset-bottom)); background: rgba(244, 240, 231, .96); border-top: 1px solid var(--linha); animation: entra var(--medio) var(--curva); }
.barra-planos[hidden] { display: none; }
.barra-planos .cta { min-height: 48px; font-size: var(--t3); }
[data-tela="6"] #t6 { padding-bottom: 96px; }
.resumo { width: min(440px, calc(100% - 32px)); max-height: 80dvh; border: 0; border-radius: var(--r); padding: var(--e5) var(--e4) var(--e4); background: var(--areia); color: var(--texto-escuro); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.resumo::backdrop { background: rgba(14, 27, 44, .6); }
.resumo h3 { font: 800 var(--t4)/1.25 var(--serif); margin: 0 0 var(--e3); }
.rs-meta { margin: 0 0 var(--e1); font-size: var(--t1); color: var(--texto-escuro-2); text-transform: uppercase; letter-spacing: .06em; }
.resumo #rs-txt p { margin: 0 0 var(--e3); font-size: var(--t3); }
.resumo .micro { color: var(--texto-escuro-2); margin-bottom: var(--e4); }
.resumo .cta { min-height: 48px; font-size: var(--t3); }

@media (max-height: 700px) {
  .bolha { font-size: var(--t2); padding-top: var(--e2); padding-bottom: var(--e2); margin-bottom: 6px; }
  .bolha.perg { font-size: var(--t3); }
  .op { min-height: 48px; padding: var(--e2) var(--e3); font-size: 15px; }
  h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .selo-final circle, .selo-final path { stroke-dashoffset: 0; }
  .ganho { display: none; }
}

/* acabamento: superfícies do navegador e estados */
::selection { background: var(--dourado); color: var(--texto-escuro); }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
button, a { touch-action: manipulation; }
#oferta { scroll-margin-top: var(--e4); }
@media (hover: hover) {
  .cta:hover { filter: brightness(1.05); }
  .cta.sec:hover { background: var(--texto-escuro); color: var(--branco); }
  .link:hover, .voltar:hover { color: var(--texto); }
  #t6 .voltar:hover, .link-mais:hover { color: var(--dourado-escuro); }
  .nt:hover { border-color: var(--dourado); }
  .op:hover { background: var(--branco); }
}
html:has([data-tela="6"]), body:has([data-tela="6"]) { background: var(--areia); }

/* ===== v2.1: simulação de 72 horas ===== */
.casa { transition: filter var(--lento) linear; filter: brightness(calc(1 - var(--noite, 0) * .65)); }
.sim-relogio { display: flex; align-items: baseline; gap: 6px; margin: var(--e2) 0 var(--e2); color: var(--texto-2); }
.sim-relogio b { font: 800 56px/1 var(--serif); color: var(--branco); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.sim-un { font: 800 var(--t5)/1 var(--serif); color: var(--branco); } .sim-de { font-size: var(--t2); } .sim-rot { font-size: var(--t2); text-transform: uppercase; letter-spacing: .08em; }
.sim-trilho { height: 6px; border-radius: 3px; background: var(--marinho-3); overflow: hidden; margin-bottom: var(--e4); }
.sim-trilho i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dourado), #E07B5F); }
.sim-recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.sim-recursos li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--e3); align-items: center; }
.sim-nome { font-weight: 700; color: var(--texto); } .sim-recursos em { font-style: normal; font-size: var(--t2); font-weight: 700; color: #E07B5F; }
.sim-barra { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--marinho-3); overflow: hidden; }
.sim-barra i { display: block; height: 100%; width: 100%; background: var(--ok); border-radius: 5px; }
.sim-recursos li.acabou .sim-nome { color: #E07B5F; } .sim-recursos li.acabou { animation: treme 300ms var(--curva); }
@keyframes treme { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.sim-fim { margin: var(--e4) 0 0; font: 800 var(--t4)/1.2 var(--serif); color: var(--dourado); min-height: 1.2em; }

/* ===== v2.1: laudo (estrutura do quiz validado, cores Genesis) ===== */
.laudo { position: relative; background: var(--marinho); color: var(--texto); border-radius: 20px; padding: var(--e6) var(--e4) var(--e5); }
.laudo::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(217, 168, 74, .35); border-radius: 14px; pointer-events: none; }
.laudo > * { position: relative; z-index: 1; }
.laudo-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--e3); padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--dourado); color: var(--texto-escuro); font: 800 var(--t1)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.laudo-tag .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.laudo-tempo { margin: 0; font-family: var(--serif); font-weight: 800; line-height: .95; color: var(--branco); }
.laudo-kicker { display: block; font: 700 var(--t3)/1.35 var(--sans); color: var(--texto-2); margin-bottom: var(--e2); }
.laudo-pre { display: block; font-size: 30px; color: var(--dourado); }
.laudo-pre:empty { display: none; }
.laudo-num { display: block; font-size: clamp(56px, 19vw, 84px); line-height: .9; letter-spacing: -.01em; }
.laudo[data-faixa="0"] .laudo-num, .laudo[data-faixa="1"] .laudo-num { color: #F2C77A; }
.laudo-acaba { margin: var(--e4) 0 0; font-size: var(--t3); line-height: 1.45; color: var(--texto-2); }
.laudo-acaba b { display: block; font: 800 var(--t5)/1.15 var(--serif); color: var(--branco); margin-bottom: 4px; }
.laudo-dura { margin: var(--e4) 0 0; padding: var(--e3) var(--e4); border-radius: 12px; background: var(--areia); color: var(--texto-escuro); font-weight: 700; line-height: 1.4; border: 2px solid #E07B5F; }
.laudo[data-faixa="2"] .laudo-dura { border-color: var(--parcial); } .laudo[data-faixa="3"] .laudo-dura { border-color: var(--ok); }
.laudo-recursos { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: 6px; }
.laudo-recursos li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--e3); align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--marinho-2); border: 1px solid var(--marinho-3); }
.laudo-recursos li.primeiro { border: 2px solid #E07B5F; background: rgba(224, 123, 95, .12); }
.rc-nome { font-weight: 800; color: var(--branco); display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.rc-badge { white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: #E07B5F; color: var(--branco); font: 800 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.rc-tempo { font-size: var(--t2); color: var(--texto-2); text-align: right; }
.rc-barra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.rc-barra i { height: 6px; border-radius: 3px; background: var(--marinho-3); }
.rc-barra i.on { background: var(--ok); }
.laudo-recursos li[data-faixa="0"] .rc-barra i.on, .laudo-recursos li[data-faixa="1"] .rc-barra i.on { background: #E07B5F; }
.laudo-recursos li[data-faixa="2"] .rc-barra i.on { background: var(--parcial); }
.laudo-alerta { margin: var(--e4) 0 0; padding: var(--e3) var(--e4); border-radius: 12px; background: #FBEFD6; color: #4A3200; font-size: var(--t2); line-height: 1.45; border: 1px solid #E8CF95; }
.laudo-alerta[hidden] { display: none; }
.laudo-nota { margin: var(--e3) 0 0; font-size: var(--t1); color: var(--texto-2); line-height: 1.4; }

/* nível: 4 estrelas e pontos */
.nivel { margin-top: var(--e4); padding: var(--e4); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); text-align: center; }
.n-num { margin: 0; font: 700 var(--t1)/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--dourado-escuro); }
#t6 .nivel h2 { margin: var(--e2) 0; font-size: var(--t5); color: var(--texto-escuro); }
.estrelas { display: flex; justify-content: center; gap: 6px; }
.estrelas i { width: 26px; height: 26px; background: var(--linha); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.estrelas i.on { background: var(--dourado); }
.n-pontos { margin: var(--e2) 0 0; font-weight: 700; }
.n-txt { margin: var(--e1) 0 0; font-size: var(--t2); color: var(--texto-escuro-2); }
.n-liga { margin: var(--e3) 0 0; padding-top: var(--e3); border-top: 1px solid var(--linha); font-size: var(--t2); text-align: left; }

/* comece por */
.res-cap { margin-top: var(--e4); padding: var(--e4); background: var(--marinho); color: var(--texto); border-radius: var(--r); text-align: center; }
.res-cap img { width: 168px; height: auto; display: block; margin: 0 auto var(--e2); }
#t6 .res-cap h3 { color: var(--branco); margin-bottom: var(--e2); }
.res-cap p { margin: 0 0 var(--e3); color: var(--texto-2); }
.cap-btn { flex-direction: column; gap: 2px; }
.cap-btn b { font-size: var(--t1); font-weight: 700; opacity: .8; }
#t6 .res-cap .micro { color: var(--texto-2); margin: var(--e2) 0 0; }
.ind-fraco { margin: var(--e3) 0 0; font-weight: 700; }

/* lacunas */
.lacunas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.lacuna { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
.lac-cab { padding: var(--e3) var(--e4); }
.lac-ord { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e2); font-size: var(--t1); font-weight: 700; color: var(--texto-escuro-2); text-transform: uppercase; letter-spacing: .04em; }
.lac-risco { display: inline-flex; align-items: center; gap: 3px; color: #9C3D2A; }
.lacuna[data-risco="moderado"] .lac-risco { color: #8A5A00; } .lacuna[data-risco="baixo"] .lac-risco { color: var(--ok); }
.lac-risco .ic { width: 15px; height: 15px; }
.lacuna h4 { margin: 4px 0 0; font: 800 var(--t4)/1.25 var(--serif); }
.lac-corpo { display: grid; gap: var(--e2); padding: 0 var(--e4) var(--e4); }
.lac-acao, .lac-gancho { padding: var(--e3); border-radius: 10px; font-size: var(--t2); }
.lac-acao { background: #F3F7F2; } .lac-gancho { background: var(--areia); }
.lac-corpo p { margin: 2px 0 0; }
.rot { display: block; font: 800 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--dourado-escuro); }
.lac-acao .rot { color: var(--ok); }
.erro .rot { display: block; } .er-a .rot { color: #9C3D2A; }
.er-fim { margin: var(--e3) 0 0; font-weight: 700; }
.barra-planos .cta { flex-direction: column; gap: 0; } .barra-planos .cta b { font-size: var(--t1); opacity: .8; }

/* revelar: laudo entra em sequência; blocos aparecem ao rolar */
.revela .laudo-tempo { animation: entra 400ms var(--curva) both; }
.revela .laudo-acaba { animation: entra 400ms var(--curva) 250ms both; }
.revela .laudo-dura { animation: entra 400ms var(--curva) 450ms both; }
.revela .laudo-recursos li { animation: entra 350ms var(--curva) calc(600ms + var(--k) * 150ms) both; }
.revela .rc-barra i.on { animation: enche 300ms var(--curva) calc(800ms + var(--k) * 150ms) both; transform-origin: left; }
@keyframes enche { from { transform: scaleX(0); } to { transform: none; } }
.revela .estrelas i.on { animation: estrela 350ms var(--curva) calc(var(--k) * 140ms) both; }
@keyframes estrela { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
#t6 .bloco, #t6 .nivel, #t6 .res-cap { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--curva), transform 400ms var(--curva); }
#t6 .visto { opacity: 1; transform: none; }
.visto .lacuna { animation: entra 350ms var(--curva) calc(var(--k) * 120ms) both; }
@media (prefers-reduced-motion: reduce) { #t6 .bloco, #t6 .nivel, #t6 .res-cap { opacity: 1; transform: none; } }

/* ===== v3: informações oficiais, pitch completo, oferta em abas, upgrade ===== */
.oficial-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.oficial-lista li { padding: var(--e3) var(--e4); background: var(--marinho); color: var(--texto); border-radius: var(--r); }
.ofc-meta { display: block; font: 800 var(--t1)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dourado); }
.oficial-lista p { margin: 4px 0; font-size: var(--t2); line-height: 1.45; }
.ofc-fonte { font-size: var(--t1); color: var(--texto-2); }
.rc-mock { display: block; width: 220px; height: auto; margin: 0 auto var(--e3); }
.recebe-bloco .comeca { margin: 0 0 var(--e4); padding: var(--e4); background: var(--marinho); color: var(--texto); border-radius: var(--r); }
.recebe-bloco .comeca strong { display: block; font: 800 var(--t4)/1.2 var(--serif); color: var(--branco); margin-bottom: var(--e2); }
.recebe-bloco .comeca p { margin: 0; font-size: var(--t2); color: var(--texto-2); }
.sub-tit { margin: var(--e5) 0 var(--e2); font: 800 var(--t1)/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-escuro); }
.protocolos { display: grid; gap: var(--e2); }
.protocolo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); }
.protocolo summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 52px; padding: 0 var(--e4); font-weight: 800; cursor: pointer; list-style: none; }
.protocolo summary::-webkit-details-marker { display: none; }
.protocolo summary small { margin-left: auto; font-size: var(--t1); font-weight: 600; color: var(--texto-escuro-2); white-space: nowrap; }
.protocolo summary::after { content: "+"; font: 800 var(--t5)/1 var(--sans); color: var(--dourado-escuro); }
.protocolo[open] summary::after { content: "−"; }
.protocolo ul, .realidade, .painel ul, .upgrade .checks { list-style: none; margin: 0; padding: 0 var(--e4) var(--e3); display: grid; gap: var(--e2); font-size: var(--t2); }
.protocolo li, .realidade li, .painel li { display: flex; gap: var(--e2); } .protocolo .ic, .realidade .ic, .painel li .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok); }
.realidade { padding: 0; }
.bonus { list-style: none; counter-reset: b; margin: 0; padding: 0; display: grid; gap: 6px; }
.bonus li { counter-increment: b; display: grid; grid-template-columns: 34px 1fr; gap: 0 var(--e3); padding: var(--e3); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); font-size: var(--t2); }
.bonus li::before { content: "B" counter(b); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--marinho); color: var(--dourado); font: 800 var(--t2)/1 var(--sans); }
.bonus span { color: var(--texto-escuro-2); }
#oferta { background: var(--marinho); color: var(--texto); border-radius: 20px; padding: var(--e5) var(--e4); }
#t6 #oferta h3 { color: var(--branco); font-size: var(--t5); }
#oferta .lead { color: var(--texto-2); }
.abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: var(--e4); }
.aba { position: relative; display: grid; gap: 2px; justify-items: center; padding: var(--e3) 4px; border-radius: var(--r); border: 1.5px solid var(--marinho-3); background: var(--marinho-2); color: var(--texto-2); cursor: pointer; font-size: var(--t1); line-height: 1.2; text-align: center; }
.aba b { font: 800 var(--t3)/1 var(--sans); color: var(--branco); }
.aba em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--dourado); color: var(--texto-escuro); font: 800 10px/1.5 var(--sans); font-style: normal; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.aba[aria-selected="true"] { border-color: var(--dourado); background: var(--areia); color: var(--texto-escuro); }
.aba[aria-selected="true"] b { color: var(--texto-escuro); }
.paineis { margin-top: var(--e3); }
.painel { padding: var(--e4); border-radius: var(--r); background: var(--marinho-2); border: 1px solid var(--marinho-3); text-align: center; }
.painel[hidden] { display: none; }
.painel img { width: 180px; height: auto; display: block; margin: 0 auto var(--e2); }
.painel h4 { margin: 0; font-size: var(--t4); color: var(--branco); }
.painel .preco { margin: var(--e1) 0; color: var(--branco); font-size: 40px; } .painel .preco small { color: var(--dourado); }
.pn-desc { margin: 0 0 var(--e3); color: var(--texto-2); font-size: var(--t2); }
.painel ul { padding: 0 0 var(--e3); text-align: left; color: var(--texto); }
.painel .ic { color: var(--dourado) !important; }
#t6 .painel .micro { color: var(--texto-2); margin-top: var(--e2); }
#oferta .garantia { background: var(--marinho-2); color: var(--texto); }
.centro { text-align: center; margin-top: var(--e2) !important; }
#oferta .micro.escuro { color: var(--texto-2); }
.aviso-emerg { margin: var(--e5) 0 0; padding: var(--e3) var(--e4); border: 1.5px solid #C24A3A; border-radius: var(--r); background: #FCEBE8; color: #5B1E14; font-size: var(--t2); line-height: 1.45; }
#refazer { display: block; margin: var(--e2) auto 0; font-weight: 700; color: var(--texto-escuro); }
.upgrade { text-align: left; }
.upgrade h3 { font-size: var(--t5) !important; }
.upgrade .checks { padding: 0; margin-bottom: var(--e4); }
.upgrade .checks li { display: flex; gap: var(--e2); } .upgrade .checks .ic { color: var(--ok); width: 18px; height: 18px; flex: none; }
.upgrade #up-nao { display: block; text-align: center; margin-top: var(--e2); color: var(--texto-escuro-2); }
.upgrade #up-fechar { color: var(--texto-escuro-2); }

/* v3.1: "Comece por" sem produto */
.res-cap { text-align: left; }
.res-cap .etq { color: var(--dourado); margin-bottom: var(--e2); }
.cap-ponte { margin: 0 !important; padding-top: var(--e3); border-top: 1px solid var(--marinho-3); font-weight: 700; color: var(--texto) !important; }

/* ===== v4: resultado personalizado ===== */
.laudo-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin: 0 0 var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--marinho-3); }
.laudo-cab .laudo-tag { margin: 0; }
.laudo-data { font-size: var(--t1); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.nv-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); text-align: left; }
#t6 .nivel h2 { margin: 0; }
.nivel .n-pontos { margin: 2px 0 0; font-size: var(--t2); color: var(--texto-escuro-2); font-variant-numeric: tabular-nums; }
.nivel .estrelas { flex: none; gap: 3px; } .nivel .estrelas i { width: 20px; height: 20px; }
.nivel .n-txt { text-align: left; margin-top: var(--e3); }
.nivel { text-align: left; }
#t6 .pc-tit { margin: var(--e5) 0 var(--e2); padding-top: var(--e4); border-top: 1px solid var(--linha); font: 800 var(--t4)/1.2 var(--serif); }
.pcasa { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.pcasa li { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--e3); align-items: baseline; }
.pc-nome { font-weight: 700; font-size: var(--t2); }
.pc-st { font-size: var(--t1); font-weight: 700; color: var(--texto-escuro-2); }
.pcasa li[data-s="0"] .pc-st { color: #9C3D2A; } .pcasa li[data-s="1"] .pc-st { color: #8A5A00; } .pcasa li[data-s="2"] .pc-st, .pcasa li[data-s="3"] .pc-st { color: #2F7A52; }
.pc-barra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pc-barra i { height: 6px; border-radius: 3px; background: #E9E3D5; }
.pcasa li[data-s="0"] .pc-barra i { background: #F2DCD5; }
.pcasa li[data-s="1"] .pc-barra i.on { background: var(--parcial); }
.pcasa li[data-s="2"] .pc-barra i.on, .pcasa li[data-s="3"] .pc-barra i.on { background: var(--ok); }
.pcasa li[data-s="na"] { opacity: .6; }
.visto .pc-barra i.on { animation: enche 450ms var(--curva) calc(150ms + var(--k) * 70ms) both; transform-origin: left; }
.roteiro { margin: 0 0 var(--e4); padding: var(--e4); background: var(--marinho); color: var(--texto); border-radius: var(--r); }
#t6 .roteiro h4 { margin: 0 0 var(--e1); font: 800 var(--t4)/1.2 var(--serif); color: var(--branco); }
.roteiro > p { margin: 0 0 var(--e3); font-size: var(--t2); color: var(--texto-2); }
.roteiro ol { list-style: none; counter-reset: r; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.roteiro li { counter-increment: r; position: relative; padding: var(--e3) var(--e3) var(--e3) 48px; border-radius: 10px; background: var(--marinho-2); border: 1px solid var(--marinho-3); font-size: var(--t2); }
.roteiro li::before { content: counter(r); position: absolute; left: var(--e3); top: var(--e3); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--dourado); color: var(--texto-escuro); font: 800 var(--t2)/1 var(--sans); }
.roteiro li:first-child { border-color: rgba(217, 168, 74, .55); }
.roteiro li p { margin: 0; color: var(--texto-2); }
.ro-cab { display: flex; justify-content: space-between; gap: var(--e2); align-items: baseline; }
.ro-cab strong { color: var(--branco); font-size: var(--t3); }
.ro-cab span { font-size: var(--t1); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#t6 .roteiro .ro-mod { margin: 2px 0 var(--e1); color: var(--dourado); font-weight: 700; }
.pra-voce { display: flex; gap: var(--e2); margin: 0 0 var(--e2); padding: var(--e3) var(--e4); border-radius: var(--r); background: rgba(217, 168, 74, .12); border: 1px solid rgba(217, 168, 74, .4); color: var(--texto); font-size: var(--t2); font-weight: 600; line-height: 1.45; }
.pra-voce:empty { display: none; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #CFC6B2; border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 359px) { .tela { padding-left: var(--e3); padding-right: var(--e3); } .laudo { padding-left: var(--e3); padding-right: var(--e3); } .aba { font-size: 11px; } .nivel .estrelas i { width: 16px; height: 16px; } }