/* Formulário, prévia e oferta (/montar) e páginas simples (obrigado, termos, privacidade).
   Usa as variáveis e os componentes do app.css. */

.ficha{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:8px 24px 56px}
.etapa{display:flex;flex-direction:column;gap:18px;animation:ss-fade .35s ease both}
.etapa h1,.previa h1,.pagina h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,7vw,48px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.etapa h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,6.4vw,40px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.passo-n{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kicker)}
.sub-etapa{font-size:16px;line-height:1.55;color:rgba(243,239,231,.72);text-wrap:pretty}
.miudo{font-size:13.5px;color:rgba(243,239,231,.55);text-align:center}

.instrucoes{margin:4px 0 6px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.instrucoes li{position:relative;padding:14px 16px 14px 40px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:15.5px;line-height:1.5;color:rgba(243,239,231,.78)}
.instrucoes li::before{content:"";position:absolute;left:18px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 8px var(--coral)}
.instrucoes b{color:var(--creme);font-weight:700}

/* campos */
.campo{display:flex;flex-direction:column;gap:8px}
.rot{font-size:14.5px;font-weight:700;color:var(--creme)}
.rot i{font-style:normal;font-weight:500;color:rgba(243,239,231,.5);margin-left:4px}
.ajuda{font-size:13px;line-height:1.45;color:rgba(243,239,231,.55)}
.ficha input[type=text],.ficha input:not([type]),.ficha input[type=tel],.ficha input[type=email],.ficha input[type=date]{
  width:100%;box-sizing:border-box;height:52px;padding:0 16px;border:0;border-radius:14px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);
  color:var(--creme);font:500 16px/1 var(--sans);transition:box-shadow .2s,background .2s;color-scheme:dark}
.ficha input::placeholder{color:rgba(243,239,231,.35)}
.ficha input:focus{outline:none;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px var(--coral),0 0 0 4px rgba(255,77,94,.15)}
.ficha input[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px #ff7a86}
.campo input + input{margin-top:2px}
.codigo{max-width:200px;text-align:center;font-weight:600!important;font-size:28px!important;letter-spacing:.4em;padding-left:calc(16px + .4em)!important;font-variant-numeric:tabular-nums}

.escolha{display:flex;gap:8px}
.escolha label,.chips label{position:relative;cursor:pointer}
.escolha input,.chips input,.aceite input{position:absolute;opacity:0;width:1px;height:1px}
.escolha span{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:46px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);font-size:15px;font-weight:700;color:rgba(243,239,231,.8);transition:all .2s}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);font-size:15px;font-weight:600;color:rgba(243,239,231,.85);transition:all .2s}
.escolha input:checked + span,.chips input:checked + span{background:var(--creme);color:var(--tinta);box-shadow:0 6px 24px rgba(255,77,94,.3)}
.escolha input:focus-visible + span,.chips input:focus-visible + span,.aceite input:focus-visible + span::before{outline:2px solid var(--coral);outline-offset:3px}

.aceite{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14.5px;line-height:1.5;color:rgba(243,239,231,.78)}
.aceite > span{position:relative;padding-left:34px}
.aceite > span::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;box-sizing:border-box;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);background:rgba(255,255,255,.05);transition:all .15s}
.aceite input:checked + span::before{background:var(--coral);box-shadow:none}
.aceite input:checked + span::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.aceite a{color:var(--coral-claro);text-decoration:underline;text-underline-offset:2px}

.erro{margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(255,77,94,.12);box-shadow:inset 0 0 0 1px rgba(255,77,94,.4);color:#ffb3ba;font-size:14.5px;line-height:1.45}

/* navegação */
.cta--bloco{width:100%;justify-content:center;padding:0;border:0;cursor:pointer;font-family:var(--sans)}
.cta[disabled]{opacity:.6;cursor:progress}
.navega{display:flex;align-items:center;gap:10px;margin-top:26px}
.navega .cta{flex:1}
.voltar{height:56px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(243,239,231,.8);font-size:15px;font-weight:600;cursor:pointer}
@media (hover:hover){.voltar:hover{background:rgba(255,255,255,.13)}}
.voltar--centro{display:block;height:44px;margin:18px auto 0;background:none;text-decoration:underline;text-underline-offset:3px;color:rgba(243,239,231,.6)}
.trilha{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px}
.trilha i{width:8px;height:8px;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(243,239,231,.4);transition:all .25s}
.trilha i.on{border:0;background:var(--creme);box-shadow:0 0 10px rgba(243,239,231,.55)}
.trilha .cor{width:9.4px;height:8.3px;color:rgba(243,239,231,.22);transition:color .25s}
.trilha .cor.on{color:var(--coral);filter:drop-shadow(0 0 6px rgba(255,77,94,.9))}

/* prévia */
.ficha:has(.previa:not([hidden])){max-width:1100px}
.previa{display:grid;grid-template-columns:1fr;gap:28px;animation:ss-fade .4s ease both}
.previa-cab{display:flex;flex-direction:column;gap:12px;max-width:560px}
.previa .demo{padding:0}
.aberta--previa{gap:8px;padding-top:40px}
.aberta--previa .aberta-tit{font-size:36px;line-height:1.05;word-break:break-word}
.capitulos{align-self:stretch;margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;text-align:left}
.capitulos li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:13.5px;font-weight:600;color:rgba(243,239,231,.86)}
.capitulos li span{flex:1;min-width:0}
.cadeado{flex:none;width:14px;height:14px;fill:none;stroke:rgba(243,239,231,.6);stroke-width:2;stroke-linecap:round}
.trancado{font-size:12px;color:rgba(243,239,231,.55)}
.btn-resto{height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--coral);color:#fff;font:700 14px var(--sans);cursor:pointer;box-shadow:0 8px 26px rgba(255,77,94,.45)}
.oferta{display:flex;flex-direction:column;gap:22px}
.oferta-txt{display:flex;flex-direction:column;gap:10px;text-align:center}
.oferta-txt h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,40px);line-height:1.1}
.oferta-txt p{font-size:16.5px;line-height:1.55;color:rgba(243,239,231,.74);text-wrap:pretty}
.oferta .preco-borda{width:100%}
.oferta .cta--preco{border:0;cursor:pointer;font-family:var(--sans)}
.pagar-msg{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--creme)}
.preco-miudo{text-wrap:balance}

@media (min-width:900px){
  .previa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .previa-cab{grid-column:1 / -1}
  .oferta{position:sticky;top:24px}
}

/* páginas simples */
.pagina{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:24px 24px 64px;display:flex;flex-direction:column;gap:18px}
.pagina--centro{align-items:center;text-align:center;padding-top:48px}
.pagina p,.pagina li{font-size:16px;line-height:1.65;color:rgba(243,239,231,.78);text-wrap:pretty}
.pagina h2{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;color:var(--creme)}
.pagina ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pagina a{text-decoration:underline;text-underline-offset:2px}
.pagina a.btn-vidro{text-decoration:none;margin-top:6px}
.pagina .atualizado{font-size:13.5px;color:rgba(243,239,231,.5)}
.rodape a{color:rgba(243,239,231,.6)}
@media (hover:hover){.rodape a:hover{color:var(--creme)}}

@media (max-width:759px){
  .ficha{padding-left:20px;padding-right:20px}
  .previa .celular{transform:scale(.94);transform-origin:top center;margin-bottom:-36px}
}
@media (max-width:359px){
  .previa .celular{transform:scale(.86);margin-bottom:-86px}
  .navega .voltar{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.etapa,.previa{animation:none}}