/* ============================================================
   A CÚPULA · BASTIDORES DO MILHÃO — Aplicação
   Estética "studio" clara: papel quente, ultramarino, grade fina,
   grão sutil. Schibsted Grotesk + Newsreader (itálico) + Spline Sans Mono.
   ============================================================ */
:root{
  --paper:#f6f4ee; --paper2:#efece3; --line:#dcd8cc; --line2:#cdc8ba;
  --ink:#121317; --ink2:#15171c; --soft:#6f7066; --body:#34352f;
  --blue:#1d2bd6; --blue-d:#1620a8; --blue-tint:#e9eafb; --danger:#c0392b;
  --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
body{min-height:100dvh;display:flex;flex-direction:column;position:relative;}
/* grão de papel */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* grade fina estrutural */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:25% 100%;opacity:.45;}

/* ---- BARRA SUPERIOR ---- */
.bar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.05rem 1.4rem;border-bottom:1px solid var(--line);background:var(--paper);}
.lock{display:flex;flex-direction:column;gap:.3rem;line-height:1;min-width:0;}
.wm{font-weight:800;font-size:.92rem;letter-spacing:.1em;white-space:nowrap;}
.wm em{font-style:normal;color:var(--blue);}
.seal{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);white-space:nowrap;}
.bar-r{flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--soft);text-transform:uppercase;}
.coord{display:flex;align-items:center;gap:.4rem;}
.coord .pip{width:.4rem;height:.4rem;border-radius:50%;background:var(--blue);animation:pulse 2.2s infinite;}
.etapa b{color:var(--ink);font-weight:500;}
.pbar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:transparent;}
.pfill{display:block;height:100%;width:0;background:var(--blue);transition:width .6s var(--ease);}

/* ---- BOTÃO VOLTAR ---- */
.back{position:absolute;top:5.0rem;left:1.4rem;z-index:4;width:2.3rem;height:2.3rem;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:50%;color:var(--soft);cursor:pointer;transition:.3s var(--ease);}
.back:hover{border-color:var(--blue);color:var(--blue);transform:translateX(-2px);}

/* ---- PALCO / TELAS ---- */
.stage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:2.1rem 1.4rem;}
.screen{display:none;width:100%;}
.screen.is-active{display:block;}
.screen.is-active>*{opacity:0;transform:translateY(14px);animation:rise .75s var(--ease) forwards;}
.screen.is-active>*:nth-child(1){animation-delay:.04s;}
.screen.is-active>*:nth-child(2){animation-delay:.12s;}
.screen.is-active>*:nth-child(3){animation-delay:.2s;}
.screen.is-active>*:nth-child(4){animation-delay:.28s;}
.screen.is-active>*:nth-child(5){animation-delay:.36s;}
.screen.is-active>*:nth-child(6){animation-delay:.44s;}

/* índice grande */
.idx{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.3rem;}
.idx .n{font-weight:900;font-size:3.3rem;line-height:.78;letter-spacing:-.05em;color:var(--blue);}
.idx .meta{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  line-height:1.7;border-left:1px solid var(--line);padding-left:.9rem;}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
  font-weight:500;margin-bottom:1rem;}

/* ---- WELCOME ---- */
h1{font-weight:800;font-size:clamp(2.6rem,12vw,4.2rem);line-height:.98;letter-spacing:-.035em;}
.acc{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--blue);}
.sub{margin-top:1.6rem;font-size:1.02rem;line-height:1.55;color:var(--body);max-width:34ch;}
.sub b{color:var(--ink);font-weight:600;}
.stats{margin-top:1.8rem;display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:520px;}
.stats .s{flex:1;padding:.85rem 0 .85rem .9rem;border-left:1px solid var(--line);}
.stats .s:first-child{border-left:none;padding-left:0;}
.stats b{display:block;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;line-height:1;}
.stats b em{font-style:normal;color:var(--blue);}
.stats span{display:block;font-family:var(--mono);font-size:.57rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:.45rem;}

/* ---- PERGUNTA: título e ajuda ---- */
.q-title{font-weight:800;font-size:clamp(1.7rem,6.5vw,2.5rem);line-height:1.06;letter-spacing:-.02em;max-width:18ch;}
.q-title em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--blue);}
.q-title b{color:var(--blue);font-weight:800;}
.q-help{margin-top:.9rem;font-size:.98rem;line-height:1.5;color:var(--soft);max-width:42ch;}

/* ---- CAMPOS DE TEXTO ---- */
.field{margin-top:2rem;}
.input,.textarea{width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--line2);
  color:var(--ink);font-family:var(--sans);font-weight:500;font-size:clamp(1.3rem,5vw,1.7rem);
  padding:.3rem 0 .7rem;transition:border-color .35s var(--ease);}
.input::placeholder,.textarea::placeholder{color:#a7a195;font-weight:400;}
.input:focus,.textarea:focus{outline:none;border-bottom-color:var(--blue);}
.textarea{resize:none;line-height:1.35;min-height:3rem;font-size:clamp(1.15rem,4.4vw,1.45rem);}
.field.err .input,.field.err .textarea{border-bottom-color:var(--danger);}
.error{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--danger);margin-top:.6rem;height:.9rem;}

/* ---- CARTÕES DE ESCOLHA ---- */
.choices{margin-top:2rem;display:flex;flex-direction:column;gap:.55rem;max-width:520px;}
.choice{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line2);border-radius:11px;color:var(--body);font-family:var(--sans);font-size:1.0rem;
  font-weight:500;padding:.95rem 1.1rem;cursor:pointer;transition:.28s var(--ease);}
.choice__k{font-family:var(--mono);font-size:.7rem;color:var(--blue);background:var(--blue-tint);
  width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:6px;flex:none;transition:.28s var(--ease);}
.choice:hover{border-color:var(--blue);color:var(--ink);transform:translateX(4px);}
.choice:hover .choice__k{background:var(--blue);color:#fff;}
.choice.sel{border-color:var(--blue);background:var(--blue-tint);color:var(--ink);}
.choice.sel .choice__k{background:var(--blue);color:#fff;}

/* ---- AÇÕES ---- */
.actions{margin-top:2.4rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--blue);color:#fff;font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:1.1rem 1.6rem;border:none;border-radius:12px;cursor:pointer;overflow:hidden;
  transition:transform .3s var(--ease),background .3s,opacity .3s;}
.btn:hover{background:var(--blue-d);transform:translateY(-2px);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn .arw{display:inline-flex;font-family:var(--mono);transition:transform .35s var(--ease);}
.btn:hover:not(:disabled) .arw{transform:translateX(5px);}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);}
.btn.sheen::before{animation:sheen 4.5s 1.6s infinite;}
.hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--soft);}
.hint kbd{border:1px solid var(--line2);border-radius:4px;padding:.12rem .42rem;color:var(--blue);}
.micro{margin-top:1.3rem;font-family:var(--mono);font-size:.7rem;color:var(--soft);letter-spacing:.02em;display:flex;gap:1.3rem;}
.micro b{color:var(--ink);font-weight:500;}

/* ---- TELAS FINAIS ---- */
.final-mark{font-family:var(--serif);font-size:2.2rem;color:var(--blue);margin-bottom:1.2rem;line-height:1;}
.final-title{font-weight:800;font-size:clamp(2rem,8vw,3rem);line-height:1.04;letter-spacing:-.025em;}
.final-title em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--blue);}
.final-body{margin-top:1.5rem;font-size:1.02rem;line-height:1.6;color:var(--body);max-width:42ch;}
.spinner{width:1.1rem;height:1.1rem;border:2px solid var(--blue-tint);border-top-color:var(--blue);border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite;}

/* ---- RODAPÉ ---- */
.foot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:1.05rem 1.4rem;border-top:1px solid var(--line);background:var(--paper);}
.foot .q{font-size:.92rem;color:var(--body);}
.foot .q b{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink);}
.foot .pg{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;color:var(--soft);}

@keyframes rise{to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(29,43,214,.45);}70%{box-shadow:0 0 0 6px rgba(29,43,214,0);}100%{box-shadow:0 0 0 0 rgba(29,43,214,0);}}
@keyframes sheen{0%{left:-60%;}18%,100%{left:140%;}}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:420px){.coord .txt{display:none;} .stats b{font-size:1.02rem;}}
@media(min-width:760px){
  .stage,.bar,.foot{max-width:880px;margin-left:auto;margin-right:auto;width:100%;}
  .bar,.foot{max-width:100%;}
  .bar>*,.foot>*{}
  h1{font-size:5rem;} .wm{font-size:1.05rem;}
  .q-title{font-size:3rem;}
  body::before{background-size:16.66% 100%;}
  .back{left:calc(50% - 440px + 1.4rem);}
}
@media(min-width:760px){
  .bar{padding-left:max(1.4rem,calc(50% - 440px));padding-right:max(1.4rem,calc(50% - 440px));}
  .foot{padding-left:max(1.4rem,calc(50% - 440px));padding-right:max(1.4rem,calc(50% - 440px));}
  .stage{max-width:880px;margin:0 auto;}
}