/* A Conta da Vó: página de caderno (mesma identidade das artes da Vó em tools/instagram/render.mjs). */
@font-face{font-family:'DM Serif Display';src:url(/assets/fonts/dm-serif-display-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Great Vibes';src:url(/assets/fonts/great-vibes-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --papel:#FBF4E4;--fundo:#EFE3C6;--pauta:#EDE0C2;--margem:#E3A9A4;--borda:#8A7759;
  --tinta:#2B2118;--lapis:#6B5D4F;--esmeralda:#0F5C4A;--esmeralda-escura:#0A4337;
  --batom:#B3212B;--ouro:#C9A227;--creme:#FFF9EC;--branco:#FFFDF7;
  --pauta-altura:34px;--margem-x:34px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font:400 17px/1.6 Poppins,system-ui,sans-serif}

.pagina{
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:560px;margin:0 auto;
  padding:18px 20px 28px calc(var(--margem-x) + 18px);background-color:var(--papel);
  background-image:
    linear-gradient(90deg,transparent var(--margem-x),var(--margem) var(--margem-x),var(--margem) calc(var(--margem-x) + 2px),transparent calc(var(--margem-x) + 2px)),
    repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--pauta-altura) - 1px),var(--pauta) calc(var(--pauta-altura) - 1px),var(--pauta) var(--pauta-altura));
}
@media (min-width:600px){
  :root{--margem-x:56px}
  .pagina{margin:32px auto;min-height:calc(100vh - 64px);padding:30px 44px 36px calc(var(--margem-x) + 24px);border-radius:6px;box-shadow:0 1px 0 #E2D3AE,0 18px 50px rgba(60,40,10,.14)}
}
main{flex:1}

.topo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.topo img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--papel),0 0 0 5px var(--ouro);transition:width .2s,height .2s}
.pagina:has(#inicio:not([hidden])) .topo img{width:84px;height:84px}
.assinatura{margin:0;font:400 31px/1 'Great Vibes',cursive;color:var(--esmeralda)}
.ia{margin:3px 0 0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lapis)}

.selo{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:var(--esmeralda);color:var(--creme);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.selo-batom{background:var(--batom)}
h1,h2,.pergunta{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--esmeralda);letter-spacing:-.01em}
h1{margin:0 0 16px;font-size:clamp(32px,9vw,44px);line-height:1.08}
h1 em{font-style:normal;color:var(--batom)}
h2{margin:0 0 12px;font-size:30px;line-height:1.15}
.fala{margin:0 0 22px;font-size:18px}
.fala.forte{font-weight:600}
.nota{margin:12px 0;font-size:14px;color:var(--lapis)}
a{color:var(--esmeralda);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--batom);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}

.botao{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border:0;border-radius:999px;background:var(--esmeralda);color:var(--creme);font:600 17px/1.2 Poppins,system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 2px 0 var(--esmeralda-escura);transition:background-color .15s}
.botao:hover{background:var(--esmeralda-escura)}
.botao:active{transform:translateY(1px);box-shadow:none}
.botao[disabled]{opacity:.65;cursor:progress}
.botao.secundario{background:var(--branco);color:var(--esmeralda);box-shadow:inset 0 0 0 2px var(--esmeralda)}
.voltar{min-height:44px;padding:10px 4px;border:0;background:none;color:var(--lapis);font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.acoes.coluna{flex-direction:column;align-items:stretch}
.acoes.coluna .voltar{align-self:center}

.progresso{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lapis)}
.pergunta{display:block;margin:0 0 18px;font-size:30px;line-height:1.15}
.campo{display:flex;align-items:baseline;gap:10px;padding:2px 14px;border-radius:12px 12px 0 0;background:var(--branco);border-bottom:3px solid var(--tinta)}
.campo:focus-within{border-bottom-color:var(--esmeralda);box-shadow:0 3px 0 var(--esmeralda)}
.campo input{flex:1;min-width:0;padding:10px 0;border:0;background:transparent;color:var(--esmeralda);font:400 38px/1.2 'DM Serif Display',Georgia,serif}
.campo input:focus{outline:none}
.prefixo,.sufixo{font-size:18px;font-weight:600;color:var(--lapis)}
.prefixo:empty,.sufixo:empty{display:none}
.dica{margin:10px 0 0;font-size:15px;color:var(--lapis)}
.erro{margin:0;font-size:15px;font-weight:600;color:var(--batom)}
.erro:not(:empty){margin-top:8px}

.previa{font-size:18px}
.previa strong{color:var(--batom);white-space:nowrap}
.chutes{margin:18px 0 22px;padding:12px 16px;border-left:4px solid var(--margem);border-radius:0 12px 12px 0;background:rgba(255,253,247,.75);font-size:15px}
.chutes p{margin:0 0 6px;font-weight:600;color:var(--batom)}
.chutes ul{margin:0;padding-left:18px}
#captura label{display:block;margin:16px 0 6px;font-size:15px;font-weight:600}
#captura input:not([type=checkbox]){width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--borda);border-radius:12px;background:var(--branco);color:var(--tinta);font:400 17px/1.3 Poppins,system-ui,sans-serif}
#captura input:not([type=checkbox]):focus{outline:none;border-color:var(--esmeralda);box-shadow:0 0 0 3px rgba(15,92,74,.2)}
#captura .aceite{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:15px;font-weight:400;line-height:1.5}
.aceite input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--esmeralda)}
.opcional{font-weight:400;color:var(--lapis)}
#turnstile{margin-top:16px}

.numero{position:relative;display:inline-block;margin:6px 0 0;padding:6px 34px;font:400 120px/1 'DM Serif Display',Georgia,serif;color:var(--esmeralda)}
.numero.longo{font-size:76px}
.numero svg{position:absolute;inset:-10px -8px;width:calc(100% + 16px);height:calc(100% + 20px);overflow:visible}
.numero path{fill:none;stroke:var(--batom);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:risco .9s .25s ease-out forwards}
@keyframes risco{to{stroke-dashoffset:0}}
.unidade{margin:8px 0 4px;font:400 26px/1.2 'DM Serif Display',Georgia,serif;color:var(--batom)}
.contexto{margin:0 0 20px;font-size:17px}
.lapis{margin:20px 0 8px}
.lapis div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed #CDBB94}
.lapis dt{color:var(--lapis)}
.lapis dd{margin:0;font-weight:600;white-space:nowrap}
.aviso{font-size:15px;font-weight:600;color:var(--esmeralda)}
.aviso:empty{display:none}

.texto h1{font-size:clamp(30px,8vw,40px)}
.texto h2{margin-top:28px;font-size:24px}
.texto li{margin-bottom:6px}

footer{margin-top:36px;padding-top:14px;border-top:1px solid #E2D3AE;font-size:12.5px;line-height:1.55;color:var(--lapis)}
footer p{margin:0 0 6px}

.passo:not([hidden]){animation:entra .18s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .passo:not([hidden]){animation:none}
  .numero path{animation:none;stroke-dashoffset:0}
}