*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#03150e;--gold:#f5ca70}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg)}
body{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;container-type:inline-size;user-select:none;-webkit-user-select:none}
.quiz-screen{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#092719 0%,#04170e 47%,#00100a 90%)}
.quiz-screen::after{content:"";position:absolute;inset:35% 0 0;pointer-events:none;background:radial-gradient(ellipse at 10% 25%,rgba(86,107,35,.12),transparent 33%),repeating-linear-gradient(135deg,transparent,transparent 80px,rgba(214,174,64,.013) 81px);z-index:0}
.quiz-header{position:absolute;top:0;left:0;right:0;height:34.33%;overflow:hidden;z-index:1}
.quiz-header img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;-webkit-user-drag:none}
.question-panel{position:absolute;top:35%;left:5.1%;width:89.8%;height:15.4%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:1}
.question-title{margin:0;color:#fffaf0;font:bold 7.35cqw/1.08 Georgia,'Times New Roman',serif;text-shadow:0 2px 7px #0007;letter-spacing:-.016em;text-wrap:balance}
.question-title .gold{color:#f4c76a}
.question-title.tight{font-size:6.45cqw}
.question-title.very-tight{font-size:5.55cqw}
.question-subtitle{font-size:2.75cqw;line-height:1.2;color:#e8d8ac;max-width:92%;margin:1.3cqw 0 0}
.answer-cards{position:absolute;top:51.6%;bottom:4.7%;left:5.2%;right:5.2%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:1.45cqw;z-index:2}
.answer-card{position:relative;min-height:0;width:100%;overflow:hidden;border:1.8px solid #d4ac55;border-radius:2.25cqw;background:linear-gradient(105deg,#07281a 0%,#061d13 45%,#00100b 98%);cursor:pointer;display:flex;align-items:center;text-align:left;color:white;padding:0;box-shadow:inset 0 1px 0 #fff2,0 0 0 1px #0003;-webkit-tap-highlight-color:transparent;transition:background-color .12s,border-color .12s,box-shadow .12s}
.answer-card::after{position:absolute;content:"";inset:0;background:transparent;transition:background .12s;pointer-events:none}
.answer-photo{position:absolute;inset:0 auto 0 0;width:var(--photo-width,40%);height:100%;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,black 0%,black 70%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,black 0%,black 70%,transparent 100%)}
.answer-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:left center}
.answer-text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:0.75cqw;margin-left:var(--text-left,37%);margin-right:8%;padding:1.4cqw 0;width:calc(92% - var(--text-left,37%));min-width:0}
.answer-title{display:block;font:700 4.35cqw/1.08 Georgia,'Times New Roman',serif;color:#fff8ec;text-shadow:0 1px 4px #0009}
.answer-description{display:block;font:2.67cqw/1.13 Georgia,'Times New Roman',serif;color:#e2ded3;text-shadow:0 1px 3px #000}
.answer-circle{position:absolute;right:3%;top:50%;transform:translateY(-50%);height:5.5cqw;width:5.5cqw;border-radius:50%;border:2px solid #dddcd0;background:#06130dcc;z-index:3;box-shadow:0 1px 3px #0007;transition:all .12s}
@media(hover:hover) and (pointer:fine){
.answer-card:hover{border-color:#ffe48e;box-shadow:inset 0 0 0 1px #ffe5a166,0 0 13px rgba(241,187,64,.30)}
.answer-card:hover::after{background:rgba(255,207,79,.27)}
.answer-card:hover .answer-circle{border-color:#ffe9a7;background:#b48b2c;box-shadow:0 0 0 3px #ffd86a40}
}
.answer-card:focus-visible{outline:3px solid #ffefac;outline-offset:-3px;border-color:#fff2b3}
.answer-card:focus-visible::after{background:rgba(255,207,79,.27)}
.answer-card.selected{border-color:#fff2b9;box-shadow:inset 0 0 0 2px #ffe5a178,0 0 18px #f7d15c7a}
.answer-card.selected::after{background:rgba(255,203,82,.42)}
.answer-card.selected .answer-circle{background:#ffdc82;box-shadow:inset 0 0 0 1.5cqw #18442d,0 0 11px #ffedaf;border-color:#fff8d2}
.answer-card:active::after{background:rgba(255,207,79,.28)}
.quiz-screen.q-5 .answer-title,.quiz-screen.q-6 .answer-title{font-size:4.00cqw}
.quiz-screen.q-5 .answer-description,.quiz-screen.q-6 .answer-description{font-size:2.53cqw}
[hidden]{display:none!important}
.offer-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.offer-screen img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;-webkit-user-drag:none}
.checkout-hotspot{position:absolute;left:8.6%;top:calc((100% - 94.56%)/2 + 94.56% * 1412 / 1581);width:82.9%;height:calc(94.56% * 86 / 1581);border-radius:60px;cursor:pointer;background:transparent;border:0;-webkit-tap-highlight-color:transparent}
.checkout-hotspot:hover,.checkout-hotspot:focus-visible{background:#fff4b726;outline:2px solid #fff1b5}
.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('fotos-v7/cabecalho-analise.jpg');background-size:cover;background-position:top center}
.analysis-content{padding:8px clamp(18px,5%,32px) 0;text-align:center;position:relative}
.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}
.dialog-inner{padding:26px;line-height:1.55}
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 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}
.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}
@media(max-width:600px){.answer-card{border-width:1.4px}.answer-circle{border-width:1.5px}}
@media(max-height:700px){.analysis-screen{min-height:100dvh}.analysis-banner{max-height:190px}.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){.answer-card,.answer-card::after,.answer-circle,.analysis-step,#analysisFill{transition:none}}

/* Questão 4 sobre compartilhar conhecimento em família */
.quiz-screen.q-4 .question-panel {top:34.7%;height:16.7%}
.quiz-screen.q-4 .question-title {font-size:5.85cqw;line-height:1.10}
.quiz-screen.q-4 .answer-title {font-size:4.1cqw}
.quiz-screen.q-4 .answer-description {font-size:2.58cqw}

/* Reserve espaço à direita para o círculo de seleção nos cards familiares */
.quiz-screen.q-4 .answer-text {margin-right:14%;width:calc(86% - var(--text-left,37%));}
.quiz-screen.q-4 .answer-title {font-size:3.95cqw}
