* {box-sizing:border-box}
:root {color-scheme: dark;--bg:#03150e;--gold:#ffd46e}
html,body {margin:0;padding:0;min-height:100%;background:var(--bg)}
body {min-height:100svh;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
#app {min-height:100svh;min-height:100dvh;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 20%,#113b28 0,#03150e 67%)}
.artboard {position:relative;width:min(100vw,56.28dvh,600px);aspect-ratio:941 / 1672;flex:none;line-height:0;touch-action:pan-y;user-select:none; -webkit-user-select:none}
.artboard.offer {width:min(100vw,59.52dvh,600px);aspect-ratio:941 / 1581}
#screenImage {display:block;width:100%;height:auto;object-fit:contain;-webkit-user-drag:none}
.hotspots{position:absolute;inset:0;pointer-events:none}
.hotspot{position:absolute;display:block;padding:0;margin:0;border:0;border-radius:12px;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:background-color .14s ease}
.hotspot:hover {background:rgba(255,213,103,.035)}
.hotspot:focus-visible{outline:2px solid #fff5cb;outline-offset:-3px;background:rgba(255,207,82,.07)}
.hotspot.selected{background:rgba(255,215,85,.13)}
.hotspot.buy{border-radius:99px}
.hotspot.buy:hover,.hotspot.buy:focus-visible{background:rgba(255,253,212,.095);box-shadow:0 0 13px rgba(255,200,71,.26)}
.screen-reader-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{width:min(90vw,430px);border:1px solid #dfb65e;border-radius:17px;color:#fff1d0;background:linear-gradient(160deg,#0a3120,#03160f);box-shadow:0 16px 80px #0009;padding:0}
dialog::backdrop{background:rgba(0,0,0,.78)}
.dialog-inner{padding:26px;line-height:1.55}
.dialog-inner h2{font-size:22px;line-height:1.2;margin:0 0 15px;color:#ffe7a2}
.dialog-inner p{font-size:15px;margin:0 0 13px}
.dialog-inner .smaller{font-size:13px;color:#dad9c2}
.dialog-inner code{background:#18462b;padding:2px 4px;border-radius:3px}
.close-dialog{padding:12px 20px;background:linear-gradient(#f6d67b,#dea443);color:#1c170d;border:0;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer}
@media (max-width:600px){.artboard,.artboard.offer{max-width:100vw}.hotspot{border-radius:9px}}
@media (prefers-reduced-motion:reduce){.hotspot{transition:none}}

/* Etapa real de preparação entre a última pergunta e a oferta.
   O texto não promete um diagnóstico político nem um kit personalizado. */
[hidden]{display:none!important}
.analysis-screen{width:min(100%,540px);min-height:min(100dvh,930px);padding:0 0 28px;background:linear-gradient(165deg,#092519,#02140e 72%);color:#fff8ed;box-shadow:0 0 70px #0005;line-height:1.4}
.analysis-banner{width:100%;aspect-ratio:941/475;background-image:linear-gradient(0deg,#092519 0%,transparent 40%),url('assets/cabecalho-analise.jpg');background-size:cover;background-position:top center}
.analysis-content{padding:0 clamp(18px,5%,32px);text-align:center;position:relative;margin-top:-34px}
.analysis-eyebrow{display:block;font:700 clamp(16px,3.8vw,22px) Georgia,serif;color:#f5cb6f;letter-spacing:.12em;text-shadow:0 2px 8px #0008}
.analysis-motto{font-size:clamp(10px,2.3vw,12px);letter-spacing:.17em;color:#f6e0ab;margin:8px 0 18px}
.analysis-medallion{display:flex;align-items:center;justify-content:center;margin:0 auto 17px;width:62px;height:62px;border-radius:50%;border:2px solid #e9be57;background:linear-gradient(140deg,#254f32,#05160e);box-shadow:0 0 0 7px #c19b2f18,0 0 25px #e6b64438}
.analysis-medallion span{color:#f9da8d;font:700 28px Georgia,serif}
.analysis-content h1{font:700 clamp(27px,6vw,40px)/1.14 Georgia,serif;letter-spacing:-.02em;margin:0 auto 13px;max-width:470px}
.analysis-content h1 em{font-style:normal;color:#f4c768}
.analysis-subtitle{font-size:clamp(13px,3.2vw,16px);max-width:425px;margin:0 auto 30px;line-height:1.5;color:#eee7d3}
.analysis-progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;gap:10px;color:#e6dec5;text-align:left}
.analysis-progress-row strong{color:#ffdb88;font-variant-numeric:tabular-nums}
.analysis-track{height:12px;border-radius:30px;background:#ffffff27;overflow:hidden;outline:1px solid #ffd36a33;outline-offset:2px}
#analysisFill{height:100%;width:0;background:linear-gradient(90deg,#b68c37,#ffe28c);border-radius:inherit;transition:width .14s linear;box-shadow:0 0 16px #ffde6e80}
.analysis-steps{display:grid;gap:12px;text-align:left;margin:27px 0 23px}
.analysis-step{display:flex;align-items:center;gap:13px;padding:15px 14px;border:1px solid #d6b35c50;background:linear-gradient(115deg,#092718,#041811);border-radius:12px;color:#cfcab9;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.analysis-tick{display:flex;align-items:center;justify-content:center;border:1px solid #e0c16c7a;border-radius:50%;width:28px;height:28px;flex:none;color:transparent;font-size:17px}
.analysis-step.active{color:#ffecbd;border-color:#f2c765ad;background:#153723}
.analysis-step.active .analysis-tick{border-color:#f0c766;color:#f0c766}
.analysis-step.done{color:#ecf3dd;border-color:#5aa36a88}
.analysis-step.done .analysis-tick{background:#2b7844;color:#fff;border-color:#80b37a}
.analysis-footer{font-size:12px;color:#a4b3a3;margin:8px auto 0}
@media(max-height:700px){.analysis-screen{min-height:100dvh}.analysis-banner{max-height:190px}.analysis-content{margin-top:-23px}.analysis-motto{margin:3px 0 12px}.analysis-medallion{height:48px;width:48px;margin-bottom:13px}.analysis-subtitle{margin-bottom:19px}.analysis-steps{margin:18px 0 10px;gap:8px}.analysis-step{padding:10px 13px}}
@media(prefers-reduced-motion:reduce){#analysisFill,.analysis-step{transition:none}}