@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;800&family=Nunito:wght@600;800&display=swap");
:root{--tinta:#2b1c0e;--creme:#fffaf0;--verde:#4caf3a;--verde2:#2f7d24;--erro:#c4302b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100dvh;font:600 16px/1.45 Nunito,system-ui,sans-serif;color:var(--tinta);background:linear-gradient(#58aef5 0%,#bfe4ff 62%,#e8f6ff 100%);display:flex;flex-direction:column;align-items:center;padding:24px 16px 120px;position:relative;overflow-x:hidden}
.nuvem{position:absolute;background:#fff;box-shadow:0 10px 0 #e3f1ff;z-index:0}
.nuvem.n1{width:120px;height:28px;top:60px;left:6%}.nuvem.n1::after{content:"";position:absolute;left:24px;top:-24px;width:60px;height:24px;background:#fff}
.nuvem.n2{width:150px;height:30px;top:150px;right:5%}.nuvem.n2::after{content:"";position:absolute;left:40px;top:-26px;width:70px;height:26px;background:#fff}
.chao{position:fixed;left:0;right:0;bottom:0;height:70px;background:repeating-linear-gradient(90deg,#8a5a32 0 34px,#7c5230 34px 68px);z-index:0}
.chao::before{content:"";position:absolute;left:0;right:0;top:-14px;height:18px;background:repeating-linear-gradient(90deg,#5fb444 0 34px,#6cc04a 34px 68px)}
main{position:relative;z-index:1;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}
.logo{width:120px;aspect-ratio:300/384;background:url(logo.webp) center/contain no-repeat;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18));margin-bottom:10px}
.cartao{width:100%;background:var(--creme);border:4px solid var(--tinta);box-shadow:6px 6px 0 rgba(0,0,0,.25);padding:22px 20px}
h1{font:800 24px/1.15 Rubik,sans-serif;margin:0 0 6px;text-align:center}
.sub{text-align:center;margin:0 0 18px;color:#5a4a3a;font-size:15px}
label{display:block;font:700 14px Rubik,sans-serif;margin:12px 0 6px}
.campo{position:relative}
input[type=email],input[type=password],input[type=text]{width:100%;font:700 17px Nunito,sans-serif;padding:13px 14px;border:3px solid var(--tinta);background:#fff;color:var(--tinta);border-radius:0;outline:none}
input:focus{box-shadow:0 0 0 3px #ffd43b}
.campo input{padding-right:54px}
.olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:38px;border:0;background:transparent;cursor:pointer;font-size:20px;display:grid;place-items:center}
.manter{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:15px;cursor:pointer}
.manter input{width:22px;height:22px;accent-color:var(--verde)}
.btn{display:block;width:100%;margin-top:18px;font:800 19px Rubik,sans-serif;color:#fff;background:var(--verde);border:3px solid var(--tinta);box-shadow:inset 0 -6px 0 var(--verde2),4px 4px 0 rgba(0,0,0,.25);padding:14px;cursor:pointer;text-align:center;text-decoration:none}
.btn:active{transform:translate(2px,2px);box-shadow:inset 0 -4px 0 var(--verde2),2px 2px 0 rgba(0,0,0,.25)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.sec{background:#f1c75a;color:var(--tinta);box-shadow:inset 0 -6px 0 #c4931c,4px 4px 0 rgba(0,0,0,.25)}
.msg{margin-top:14px;padding:10px 12px;border:3px solid;font-size:15px;display:none}
.msg.erro{display:block;border-color:var(--erro);background:#fde8e6;color:#8a1f1a}
.msg.ok{display:block;border-color:var(--verde2);background:#e8f8e2;color:#1f5a14}
.links{margin-top:16px;text-align:center;font-size:15px;display:flex;flex-direction:column;gap:10px}
.links a{color:#2f63c8;font-weight:800}
.rodape{margin-top:18px;text-align:center;font-size:14px;color:#2b1c0e;background:rgba(255,255,255,.75);padding:8px 12px;border:2px solid rgba(43,28,14,.2)}
.rodape a{color:#1f7a2a;font-weight:800}
.dica{font-size:13px;color:#7a6a5a;margin-top:6px}
.oculto{display:none!important}

/* tela inteira = rosto do logo: cabelo e barba em lápis castanho, rosto em cima, cartão na barba */
body:has(.cara){padding:0 16px 40px;background-color:#6e3816;background-image:repeating-linear-gradient(-55deg,rgba(255,190,130,.10) 0 2px,transparent 2px 7px,rgba(30,10,0,.18) 7px 8px,transparent 8px 13px)}
body:has(.cara) main{max-width:none;width:100%}
.cara{display:block;flex:none;width:min(100vw,560px,62dvh);overflow:visible}
.cara.carrega .olhos{animation:pisca .9s steps(1) infinite;transform-box:fill-box;transform-origin:center}
@keyframes pisca{0%,100%{transform:none}40%{transform:translateX(.6px)}60%{transform:scaleY(.12)}80%{transform:translateX(-.6px)}}
body:has(.cara) .cartao{max-width:400px;margin-top:6px;border-color:#2a1a10;box-shadow:6px 8px 0 rgba(0,0,0,.35)}
body:has(.cara) .logo{width:64px;margin:-6px auto 8px}
body:has(.cara) .rodape{max-width:400px;background:#fffaf0;border-color:#2a1a10}
/* o quadrinho "Salvar o app no celular" e a janela de passo a passo têm o estilo em instalar.js */