/* As telas fora da landing: entrar, senha, obrigado e pagamento.
 *
 * Mesmo grafismo da landing: fundo off-white, topo branco com a marca, faixa
 * escura com as madeiras do catálogo e o cartão branco de canto cortado, com a
 * Sora. As cores são as da landing (que vêm do CBM_GERACAO do app).
 */
:root{
  --verde:#009C3B;--verde-h:#007F30;--verde-luz:#2FBF62;--verde-soft:#E3F2E8;
  --preto:#262624;--offwhite:#EDEBE6;--chumbo:#494944;--grafite:#7D7B75;--concreto:#B2B0AA;
  --hair:#E2DFD6;--escuro:#181816;--laranja:#B86A12;--vermelho:#C8553D;
  --shadow2:0 8px 16px rgba(38,38,36,.09),0 24px 50px rgba(38,38,36,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--offwhite);color:var(--chumbo);
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--verde);color:#fff}
:focus-visible{outline:3px solid var(--verde-luz);outline-offset:2px}

/* topo branco, igual ao da landing */
.topo{background:#fff;border-bottom:1px solid #DEDBD2;height:70px;display:flex;align-items:center;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--preto);font-weight:700;font-size:15px;letter-spacing:-.01em;margin:0 auto;width:100%;max-width:1180px}
.brand span{white-space:nowrap}
.brand small{display:block;margin:0;font-size:10.5px;font-weight:700;color:var(--verde);letter-spacing:.22em;text-transform:uppercase;line-height:1.2}
.disco{width:42px;height:42px;flex:none;display:flex}
.disco img{width:100%;height:100%;display:block}

/* faixa escura com as madeiras, como o banner da landing */
.madeiras{position:relative;height:230px;background:var(--escuro);overflow:hidden;
  display:grid;grid-template-columns:repeat(8,1fr)}
.madeiras i{display:block;background:#2a2a27 center/cover no-repeat;filter:saturate(.9)}
.madeiras::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,24,22,.55) 0%,rgba(24,24,22,.9) 100%)}
@media(max-width:560px){.madeiras{grid-template-columns:repeat(4,1fr);height:170px}.madeiras i:nth-child(n+5){display:none}}

/* o cartão sobe por cima da faixa */
main{position:relative;z-index:1;width:calc(100% - 32px);max-width:560px;margin:-150px auto 64px;
  --corte:40px;background:#fff;border-radius:0 0 0 var(--corte);padding:38px 36px 34px;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%);
  animation:up .6s var(--ease) both}
@media(max-width:560px){main{margin-top:-110px;padding:30px 22px 26px}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.selo{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grafite)}
.selo::before{content:"";width:24px;height:3px;background:var(--verde)}
h1{margin:0 0 12px;color:var(--preto);font-size:clamp(26px,4.4vw,34px);font-weight:700;letter-spacing:-.015em;line-height:1.15}
main>p{margin:0;font-size:15.5px;font-weight:300;line-height:1.65}

/* o sinal das telas de retorno do pagamento */
.mark{width:56px;height:56px;margin:0 0 20px;border-radius:0 0 0 16px;display:flex;align-items:center;justify-content:center;
  background:var(--verde-soft)}
.mark svg{width:26px;height:26px;fill:none;stroke:var(--verde);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mark.ok svg{stroke-dasharray:32;stroke-dashoffset:32;animation:draw .6s .25s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mark.wait{background:#F6EBDD}
.mark.wait svg{stroke:var(--laranja)}
.mark.bad{background:#F6E2DC}
.mark.bad svg{stroke:var(--vermelho)}

dl{display:none;margin:24px 0 0;padding:14px 18px;background:#F4F2ED;border-left:3px solid var(--verde);font-size:13.5px}
dl.on{display:block}
dl div{display:flex;justify-content:space-between;gap:16px;padding:4px 0}
dt{color:var(--grafite)}
dd{margin:0;font-weight:600;color:var(--preto);font-variant-numeric:tabular-nums;word-break:break-all;text-align:right}

.row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:12px 24px;
  border-radius:0 0 0 18px;border:2px solid var(--verde);background:var(--verde);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;text-align:center;
  cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{background:var(--verde-h);border-color:var(--verde-h);transform:translateY(-2px)}
.ghost{background:transparent;border-color:var(--preto);color:var(--preto)}
.ghost:hover{background:var(--preto);border-color:var(--preto);color:var(--offwhite)}
main small{display:block;margin-top:22px;color:var(--grafite);font-size:13px;line-height:1.55}

.rodape{margin-top:auto;background:var(--preto);color:var(--concreto);font-size:13px;text-align:center;padding:22px 16px}
.rodape a{color:var(--offwhite)}
.rodape a:hover{color:var(--verde-luz)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}