/* CSS da marca, compartilhado por todos os quizes.
   Extraido de diagnostico.html em 12/09/2026. Mexer aqui muda todos. */

:root{
  --bg:#F5F1EE;        /* creme da marca */
  --fg:#242324;        /* preto da marca */
  --dim:#6E6763;       /* texto de apoio */
  --hair:#DCD3CB;      /* filete */
  --areia:#D4C3B5;     /* apoio */
  --up:#885333;        /* terracota, acento da marca */
  --card:#EDE7E2;
  --tinta:#242324;     /* fundo escuro dos momentos */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,.display{font-family:"Barlow Condensed","Barlow",sans-serif; font-weight:400;
  text-transform:uppercase; margin:0; line-height:.95; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
b{font-weight:700}

.bar{position:fixed; inset:0 0 auto 0; height:3px; background:var(--hair); z-index:60}
.bar i{display:block; height:100%; width:0; background:var(--up); transition:width .5s cubic-bezier(.4,0,.2,1)}
.top{position:fixed; top:0; left:0; right:0; z-index:50; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; padding:19px 24px; pointer-events:none}
/* Coluna fixa em cada um. Sem isso, quando o "voltar" está escondido ele sai
   da grade e a logo escorrega pra célula da esquerda. */
.top .back{grid-column:1; justify-self:start}
.top .icone{grid-column:2}
.top .n{grid-column:3; justify-self:end}
.top span{font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.icone{width:26px; height:26px; opacity:.85}
.marca{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:30px}
.marca img{width:52px; height:52px}
.marca span{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:15px; letter-spacing:.22em; text-transform:uppercase}
.top .n{font-variant-numeric:tabular-nums}
.back{pointer-events:auto; font-size:12.5px; letter-spacing:.06em; color:var(--dim); padding:6px 12px 6px 0}
.back:hover{color:var(--fg)}

main{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:84px 24px 48px}
.screen{width:100%; max-width:640px; display:none}
.screen.on{display:block; animation:in .4s cubic-bezier(.2,.75,.3,1)}
@keyframes in{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.screen.on{animation:none} .bar i{transition:none}}

.eye{font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:16px}
.q{font-size:clamp(30px,7vw,50px); margin-bottom:10px}
.sub{color:var(--dim); font-size:16px; margin-bottom:30px; max-width:52ch}
.multi{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--hair); padding:4px 11px; border-radius:99px; margin-bottom:16px}

.opts{display:flex; flex-direction:column; gap:1px; background:var(--hair); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.opt{display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:var(--bg);
  padding:20px 4px; font-size:17px; transition:background .14s, padding-left .14s}
.opt:hover{background:var(--card); padding-left:14px}
.opt:focus-visible{outline:2px solid var(--up); outline-offset:-2px}
.opt.sel .k{background:var(--up); border-color:var(--up); color:#fff}
.opt .k{flex:0 0 22px; height:22px; border:1.5px solid var(--hair); display:grid; place-items:center;
  font-size:10px; font-weight:700; color:var(--dim); transition:.14s}
.opt .k.round{border-radius:50%}
.opt.sel{background:var(--card); padding-left:14px}

.cta{display:inline-flex; align-items:center; gap:12px; background:var(--fg); color:var(--bg);
  border-radius:99px; padding:17px 34px; font-family:"Barlow Condensed","Barlow",sans-serif; font-size:17px;
  letter-spacing:.06em; text-transform:uppercase; margin-top:30px}
.cta:hover{opacity:.85}
.cta:disabled{opacity:.25; cursor:not-allowed; background:var(--fg)}
.ghost{color:var(--dim); font-size:13.5px; margin-top:16px; text-decoration:underline; padding:8px 0}
.field{width:100%; background:transparent; border:0; border-bottom:1.5px solid var(--hair);
  padding:14px 0; font-size:19px; font-family:inherit; color:var(--fg); margin-bottom:6px}
.field::placeholder{color:#A79C94}
.field:focus{outline:none; border-color:var(--up)}

.warn{border-left:2px solid var(--up); padding:14px 0 14px 18px; margin:22px 0 0; font-size:14.5px; color:var(--dim)}

/* resultado */
.hero{background:var(--tinta); color:#F5F1EE; margin:0 -24px 4px; padding:34px 24px 30px}
.hero .eye{color:#8F8880; margin-bottom:12px}
.big{display:flex; align-items:baseline; gap:14px; margin:0}
.big b{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:clamp(88px,24vw,150px); line-height:.78; color:#F5F1EE; font-variant-numeric:tabular-nums}
.big span{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:19px; color:#8F8880; text-transform:uppercase}
.state{font-size:clamp(28px,6.6vw,44px); margin:18px 0 0; color:#F5F1EE}
@media(min-width:660px){.hero{margin-left:-34px; margin-right:-34px; padding-left:34px; padding-right:34px}}

.math{border:1px solid var(--hair); margin-top:26px}
.math h3{font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  margin:0; padding:15px 18px; border-bottom:1px solid var(--hair)}
.math table{width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums}
.math td{padding:11px 18px; border-bottom:1px solid var(--hair)}
.math td:last-child{text-align:right; white-space:nowrap; color:var(--dim)}
.math tr:last-child td{border-bottom:0; font-weight:700; color:var(--fg)}
.math tr:last-child td:last-child{color:var(--up)}

.blk{border-top:1px solid var(--hair); padding:26px 0; display:flex; flex-direction:column; gap:10px}
.blk h3{font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0}
.blk .l{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:clamp(23px,5vw,32px); text-transform:uppercase; line-height:1.04}
.blk p{font-size:15.5px; color:var(--dim)}
.blk ul{margin:2px 0 0; padding-left:18px; color:var(--dim); font-size:15.5px}
.next{border-left:2px solid var(--up); padding-left:18px}
.ach{display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--hair)}
.ach:last-child{border-bottom:0; padding-bottom:0}
.ach .t{flex:0 0 116px; font-weight:700; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); padding-top:3px}
.ach .v{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:19px; text-transform:uppercase; color:var(--up); line-height:1.1; margin-bottom:3px}
.ach p{font-size:14.5px; color:var(--dim)}
@media(max-width:520px){.ach{flex-direction:column; gap:5px} .ach .t{flex:none}}
.fine{font-size:13.5px; color:var(--dim); line-height:1.65; border-top:1px solid var(--hair); padding-top:22px; margin-top:8px}
.fine a{color:var(--dim)}

@media print{
  @page{size:A4; margin:14mm}
  body{background:#fff; color:#000}
  .top,.bar,main{display:none !important}
  .pr{display:block !important}
  .pr-hd{background:#000; color:#fff; padding:16pt 18pt; display:flex; justify-content:space-between; align-items:flex-end}
  .pr-hd .a{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:30pt; line-height:.88; text-transform:uppercase}
  .pr-hd .b{font-size:8pt; letter-spacing:.12em; text-transform:uppercase; text-align:right; line-height:1.6}
  .pr-sc{display:flex; align-items:baseline; gap:12pt; margin:18pt 0 2pt}
  .pr-sc b{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:64pt; line-height:.78}
  .pr-sc span{font-size:9pt; letter-spacing:.12em; text-transform:uppercase}
  .pr-st{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:24pt; text-transform:uppercase; margin:6pt 0 14pt}
  .pr-b{border:1pt solid #000; padding:11pt 13pt; margin-bottom:9pt; break-inside:avoid}
  .pr-b h3{font-size:7.5pt; letter-spacing:.18em; text-transform:uppercase; color:#666; margin:0 0 5pt}
  .pr-b .l{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:16pt; text-transform:uppercase; line-height:1.04; margin-bottom:4pt}
  .pr-b p,.pr-b li{font-size:9.5pt; line-height:1.5}
  .pr-inv{background:#000; color:#fff; border-color:#000}
  .pr-inv h3{color:#999}
  .pr-g{display:grid; grid-template-columns:1fr 1fr; gap:9pt}
  .pr-t{width:100%; border-collapse:collapse; font-size:9pt; font-variant-numeric:tabular-nums}
  .pr-t td{padding:4pt 0; border-bottom:.5pt solid #ccc}
  .pr-t td:last-child{text-align:right}
  .pr-t tr:last-child td{font-weight:700; border-bottom:0; border-top:1pt solid #000}
  .pr-r{display:flex; align-items:center; gap:8pt; margin-bottom:6pt}
  .pr-r .n{flex:0 0 78pt; font-size:9pt; font-weight:700}
  .pr-r .b{flex:1; height:11pt; border:.5pt solid #000; position:relative}
  .pr-r .b i{position:absolute; top:0; bottom:0; left:0; background:#000}
  .pr-r .v{flex:0 0 62pt; text-align:right; font-size:7.5pt; letter-spacing:.1em; text-transform:uppercase}
  .pr-f{margin-top:12pt; font-size:8pt; color:#555; line-height:1.6}
}
.pr{display:none}


/* Espaço reservado para a foto de cada movimento.
   Trocar .ph por <img src="assets/mov-<nome>.jpg"> quando as fotos existirem. */
.ph{flex:0 0 132px; width:132px; aspect-ratio:4/5; background:var(--card);
    border:1px solid var(--hair); border-radius:10px}

/* Ilustração do movimento. Some sozinha enquanto o arquivo não existe,
   então dá pra subir um SVG de cada vez sem mexer no código.
   Nomes e prompts em PROMPTS-DIAGNOSTICO.md */
.ilus{display:block; width:186px; max-width:52%; aspect-ratio:1/1; margin:2px 0 18px}

/* Par de imagens do gancho. Some inteiro enquanto os arquivos não existem. */
.par{display:flex; gap:10px; margin:0 0 22px; max-width:520px}
.par figure{margin:0; flex:1; min-width:0}
.par img{display:block; width:100%; aspect-ratio:1/1; border:1px solid var(--hair)}
.par figcaption{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-top:7px; text-align:center}
@media(max-width:400px){.par{gap:7px} .par figcaption{font-size:9px; letter-spacing:.06em}}

.plano{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--hair); margin-top:6px}
.ex{display:flex; gap:22px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--hair)}

.ex .txt{display:flex; flex-direction:column; gap:6px}
.ex .n{font-weight:700; font-size:10px; letter-spacing:.18em; color:var(--up)}
.ex .nome{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:21px; text-transform:uppercase; line-height:1.05}
.ex p{font-size:15px; color:var(--dim)}
.ex .onde{font-size:14px; color:var(--fg); opacity:.75}
@media(max-width:560px){.ex{flex-direction:column; gap:12px} .ex .ph{flex:none; width:150px}}

.dose{background:var(--card); border-left:3px solid var(--up); padding:18px 20px; margin-top:18px;
  display:flex; flex-direction:column; gap:6px}
.dose .g{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:20px; text-transform:uppercase}
.dose p{font-size:14.5px; color:var(--dim)}

.rota{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.via{display:block; border:1.5px solid var(--fg); border-radius:14px; padding:20px 22px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:5px; transition:background .15s}
.via:hover{background:var(--card)}
.via.forte{background:var(--tinta); border-color:var(--tinta); color:#F5F1EE}
.via .t{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:20px; text-transform:uppercase; line-height:1.05}
.via p{font-size:14.5px; opacity:.8}

.howto{display:flex; gap:14px; align-items:flex-start; margin:0 0 10px; font-size:16px; color:var(--dim)}
.howto b{color:var(--up); font-family:"Barlow Condensed","Barlow",sans-serif; font-weight:400; font-size:19px; line-height:1; flex:0 0 auto; min-width:18px}
.ask{font-family:"Barlow Condensed","Barlow",sans-serif; text-transform:uppercase; font-size:15px; letter-spacing:.05em;
  color:var(--fg); margin:32px 0 4px; padding-top:22px; border-top:1px solid var(--hair)}

/* ---------- específico do diagnóstico ---------- */
.escala{display:flex; flex-direction:column; gap:1px; background:var(--hair);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.escala button{display:flex; align-items:flex-start; gap:16px; width:100%; text-align:left;
  background:var(--bg); padding:19px 6px; transition:background .14s, padding-left .14s}
.escala button:hover{background:var(--card); padding-left:14px}
.escala button.sel{background:var(--card); padding-left:14px}
.escala .dot{flex:0 0 13px; width:13px; height:13px; border-radius:50%; margin-top:6px;
  border:1.5px solid var(--hair); background:transparent; transition:.14s}
.escala button.sel .dot{border-color:transparent}
.escala .lv .dot{background:#5B7A52}  /* livre */
.escala .lm .dot{background:#B08428}  /* limitado */
.escala .tv .dot{background:#9A4B3C}  /* travado */
.escala .tx{display:flex; flex-direction:column; gap:3px}
.escala .tt{font-size:17px; font-weight:600}
.escala .dd{font-size:14.5px; color:var(--dim); line-height:1.45}

.marco{text-align:left}
.marco .num{font-family:"Barlow Condensed","Barlow",sans-serif; font-size:clamp(64px,17vw,110px); line-height:.8; color:var(--areia)}
.marco .tt{font-size:clamp(28px,6.4vw,44px); margin:14px 0 10px}

.reg{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--hair); margin-top:6px}
.reg .r{display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--hair)}
.reg .nm{flex:0 0 150px; font-weight:600; font-size:15px}
.reg .tr{flex:1; height:7px; background:var(--hair); position:relative; overflow:hidden}
.reg .tr i{position:absolute; inset:0 auto 0 0; background:var(--up)}
.reg .vl{flex:0 0 92px; text-align:right; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim)}
@media(max-width:520px){.reg .nm{flex:0 0 104px; font-size:14px} .reg .vl{flex:0 0 74px; font-size:11px}}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair);
  border:1px solid var(--hair); margin-top:6px}
.duo div{background:var(--bg); padding:20px 18px}
.duo > div > b{display:block; font-family:"Barlow Condensed","Barlow",sans-serif; font-size:38px; line-height:1; color:var(--up)}
.duo p b{font-weight:700}
.duo span{display:block; font-weight:700; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); margin:9px 0 5px}
.duo p{font-size:13.5px; color:var(--dim); line-height:1.45}

.consent{font-size:13px; color:var(--dim); line-height:1.55; margin-top:18px}
.lgpd{display:flex; align-items:flex-start; gap:11px; margin-top:20px; font-size:13.5px; color:var(--dim); line-height:1.5}
.lgpd input{margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--up)}
.lgpd label{cursor:pointer}
.lgpd details{margin-top:6px}
.lgpd summary{cursor:pointer; color:var(--fg); text-decoration:underline; font-size:12.5px; list-style:none}
.lgpd summary::-webkit-details-marker{display:none}
.lgpd .mais{margin-top:8px; font-size:12.5px}
.erro{color:#9A4B3C; font-size:14px; margin-top:10px; min-height:20px}