/* Dinda · telas do QUIZ "Monte o Caderno do seu bebê" (Lia, 2026-10-29). Tokens = identidade.md / agenda/src/comum.css */
:root{
 --ameixa:#3B2341;--argila:#B84A2E;--argila-esc:#9C3D25;--creme:#FBF3E9;--papel:#FFFFFF;--mel:#E8B04A;--mel-esc:#8A6110;
 --salvia:#7FA08B;--salvia-esc:#4E6E5B;--apoio:#6F5F6B;--linha:#EADFD3;--pessego:#F4CDB0;--erro:#B3261E;
 --toque:60px;            /* altura mínima de qualquer coisa tocável */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#EFE6DA}
body{font-family:Nunito,sans-serif;color:var(--ameixa);-webkit-font-smoothing:antialiased}
body.shot{background:var(--creme)}
body.shot .painel{display:none}
body.shot *{animation:none!important;transition:none!important}
.palco{display:flex;gap:40px;align-items:flex-start;padding:30px}
body.shot .palco{padding:0}

/* celular */
.fone{width:390px;height:844px;position:relative;overflow:hidden;background:var(--creme);border-radius:34px;box-shadow:0 18px 40px rgba(59,35,65,.22);flex:none}
body.shot .fone{border-radius:0;box-shadow:none}
.fone.longa{height:auto;min-height:844px}
.rola{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.fone.longa .rola{position:static}
.rola::-webkit-scrollbar{display:none}

/* topo: voltar + barra de progresso + contador */
.topo{position:sticky;top:0;z-index:5;background:var(--creme);display:flex;align-items:center;gap:6px;padding:14px 18px 10px 6px}
.voltar{width:48px;height:48px;border:0;background:none;display:grid;place-items:center;color:var(--ameixa);border-radius:50%;flex:none;cursor:pointer}
.voltar svg{width:24px;height:24px}
.barra{flex:1;height:8px;border-radius:99px;background:#EADFD3;overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:var(--argila);transition:width .35s ease}
.cont{font:800 13px Nunito;color:var(--apoio);min-width:44px;text-align:right}

.miolo{padding:8px 22px 28px}
.kick{font:900 12px Nunito;letter-spacing:.14em;text-transform:uppercase;color:var(--argila)}
.perg{font:600 30px/1.14 Fraunces,serif;font-variation-settings:'SOFT' 100;margin:10px 0 8px;letter-spacing:-.01em}
.perg em{font-style:italic;color:var(--argila)}
.dica{font:700 15px/1.45 Nunito;color:var(--apoio);margin-bottom:20px}

/* opções (1 toque) */
.ops{display:flex;flex-direction:column;gap:10px}
.op{min-height:var(--toque);width:100%;border:2px solid var(--linha);background:#fff;border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:12px;
  font:800 17px/1.3 Nunito;color:var(--ameixa);text-align:left;cursor:pointer;box-shadow:0 2px 0 rgba(59,35,65,.04)}
.op .mk{width:26px;height:26px;border-radius:50%;border:2.5px solid #CDBFB2;flex:none;display:grid;place-items:center;color:#fff}
.op.multi .mk{border-radius:8px}
.op .mk svg{width:16px;height:16px;opacity:0}
.op:active,.op.press{transform:scale(.985);background:#FFF8F0}
.op.sel{border-color:var(--argila);background:#FDF0E8}
.op.sel .mk{background:var(--argila);border-color:var(--argila)}
.op.sel .mk svg{opacity:1}
.op .emo{width:34px;height:34px;flex:none;border-radius:10px;background:#F6EBDD;display:grid;place-items:center;color:var(--argila)}
.op .emo svg{width:20px;height:20px}

/* microcopy que aparece 1 s depois do toque */
.eco{margin-top:16px;display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:6px 18px 18px 18px;padding:12px 14px;box-shadow:0 6px 18px rgba(59,35,65,.08);
  font:700 15px/1.4 Nunito;color:var(--ameixa);opacity:0;transform:translateY(6px);transition:.25s}
.eco.on{opacity:1;transform:none}
.eco .rosto{width:30px;height:30px;flex:none}

/* campo de texto */
.campo{display:block;margin-bottom:14px}
.campo .rot{display:block;font:800 14px Nunito;margin:0 0 6px 4px}
.campo .rot small{font-weight:700;color:var(--apoio)}
.inp{width:100%;height:var(--toque);border:2px solid var(--linha);border-radius:16px;background:#fff;padding:0 16px;font:700 18px Nunito;color:var(--ameixa);outline:none;display:flex;align-items:center}
.inp:focus,.inp.foco{border-color:var(--argila);box-shadow:0 0 0 4px rgba(184,74,46,.14)}
.inp.vazio{color:#A99AA3;font-weight:600}
.inp.erro{border-color:var(--erro);box-shadow:0 0 0 4px rgba(179,38,30,.10)}
.msg-erro{display:flex;gap:6px;align-items:center;font:800 13.5px Nunito;color:var(--erro);margin:6px 0 0 4px}
.msg-erro svg{width:16px;height:16px;flex:none}
.pref{display:flex;gap:8px}
.pref .ddi{width:84px;flex:none;justify-content:center;color:var(--apoio)}
.ajuda{font:700 13px/1.4 Nunito;color:var(--apoio);margin:6px 0 0 4px}

/* segmento (unidade da idade) */
.seg{display:flex;gap:8px}
.seg .inp{width:96px;flex:none;justify-content:center}
.seg .un{flex:1;display:flex;background:#F3E9DE;border-radius:16px;padding:4px;gap:4px;height:var(--toque)}
.seg .un b{flex:1;display:grid;place-items:center;border-radius:12px;font:800 15px Nunito;color:var(--apoio)}
.seg .un b.on{background:#fff;color:var(--ameixa);box-shadow:0 2px 6px rgba(59,35,65,.12)}

/* botões */
.bt{width:100%;min-height:var(--toque);border:0;border-radius:99px;background:var(--argila);color:#fff;font:900 18px/1.2 Nunito;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;cursor:pointer;box-shadow:0 8px 20px rgba(184,74,46,.28)}
.bt svg{width:20px;height:20px}
.bt:active,.bt.press{background:var(--argila-esc);transform:translateY(1px)}
.bt.off{background:#D9CCC1;box-shadow:none;color:#fff}
.lk{display:block;width:100%;min-height:48px;background:none;border:0;font:800 15px Nunito;color:var(--argila);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:center}
.rodape-fixo{position:absolute;left:0;right:0;bottom:0;padding:12px 22px 22px;background:linear-gradient(180deg,rgba(251,243,233,0),var(--creme) 22%)}

/* capa */
.capa{min-height:844px;display:flex;flex-direction:column;padding:26px 24px 24px;background:
  radial-gradient(ellipse 90% 45% at 50% 0%,#F7DCC8 0%,rgba(247,220,200,0) 70%),var(--creme)}
.capa .marca{display:flex;align-items:center;gap:8px;font:600 22px Fraunces,serif}
.capa .marca svg{width:30px;height:30px}
.capa h1{font:600 38px/1.08 Fraunces,serif;font-variation-settings:'SOFT' 100;letter-spacing:-.015em;margin:18px 0 12px}
.capa h1 em{color:var(--argila)}
.capa .sub{font:700 17px/1.45 Nunito;color:#5a4a5c}
.capa .chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:7px 12px;font:800 13px Nunito;color:var(--ameixa);box-shadow:0 2px 8px rgba(59,35,65,.07)}
.chip svg{width:15px;height:15px;color:var(--argila)}
.capa .ia{font:700 13px/1.45 Nunito;color:var(--apoio);text-align:center;margin-top:12px}

/* mini Caderno (prévia) */
.cad{background:#fff;border-radius:22px;box-shadow:0 14px 34px rgba(59,35,65,.13);padding:14px 14px 10px;position:relative}
.cad .cab{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--linha)}
.cad .cab .av{width:38px;height:38px;flex:none}
.cad .cab b{display:block;font:600 19px/1.1 Fraunces,serif}
.cad .cab small{font:800 12px Nunito;color:var(--apoio)}
.cad .ln{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #F3EBE2}
.cad .ln:last-child{border:0}
.cad .ln .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.cad .ln .ic svg{width:18px;height:18px}
.cad .ln .tx{flex:1;min-width:0}
.cad .ln .tx b{display:block;font:900 14px Nunito}
.cad .ln .tx span{font:700 12.5px Nunito;color:var(--apoio)}
.cad .ln .vl{font:900 14px Nunito;color:var(--argila)}
.cad .ln.vaz .tx span{display:block;height:9px;width:70%;border-radius:9px;background:#F1E8DE;margin-top:4px}
.cad .ln.vaz .vl{width:38px;height:12px;border-radius:9px;background:#F1E8DE}
.selo-demo{position:absolute;top:-10px;right:14px;background:var(--ameixa);color:#fff;font:800 11px Nunito;letter-spacing:.04em;padding:4px 10px;border-radius:99px}

/* carregando */
.carr{min-height:844px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 30px;text-align:center}
.carr .anel{width:120px;height:120px;position:relative;margin-bottom:26px}
.carr .anel svg.arco{position:absolute;inset:0;animation:gira 1.1s linear infinite}
.carr .anel .rosto{position:absolute;inset:22px}
@keyframes gira{to{transform:rotate(360deg)}}
.carr h2{font:600 27px/1.18 Fraunces,serif;font-variation-settings:'SOFT' 100}
.carr h2 em{color:var(--argila)}
.carr ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px;text-align:left;width:250px}
.carr li{display:flex;align-items:center;gap:12px;font:800 17px Nunito;color:#B3A5AE}
.carr li i{width:28px;height:28px;border-radius:50%;border:2.5px solid #DCCFC4;display:grid;place-items:center;color:#fff;flex:none}
.carr li i svg{width:16px;height:16px;opacity:0}
.carr li.ok{color:var(--ameixa)}
.carr li.ok i{background:var(--salvia-esc);border-color:var(--salvia-esc)}
.carr li.ok i svg{opacity:1}
.carr li.vai i{border-color:var(--argila);border-right-color:transparent;animation:gira .8s linear infinite}
.carr .ia{position:absolute;bottom:26px;left:0;right:0;font:700 12.5px Nunito;color:var(--apoio)}

/* resultado */
.res{padding:6px 20px 30px}
.res h1{font:600 31px/1.12 Fraunces,serif;font-variation-settings:'SOFT' 100;letter-spacing:-.01em;margin:6px 0 14px}
.res h1 em{color:var(--argila)}
.res .abre{font:700 16px/1.5 Nunito;color:#4f3f52;margin:16px 0 10px}
.res .lin{display:flex;gap:10px;align-items:flex-start;font:700 15.5px/1.5 Nunito;color:var(--ameixa);padding:9px 0;border-top:1px solid var(--linha)}
.res .lin .b{width:24px;height:24px;border-radius:50%;background:#FBE6DA;color:var(--argila);display:grid;place-items:center;flex:none;margin-top:1px}
.res .lin .b svg{width:14px;height:14px}
.res .lin q{font-style:italic;font-family:Fraunces,serif;font-weight:500;quotes:'"' '"'}

/* cartão da oferta */
.oferta{margin-top:20px;background:#fff;border-radius:26px;box-shadow:0 16px 40px rgba(59,35,65,.14);padding:20px 14px 16px;border:2px solid #F1E3D6;scroll-margin-top:12px}
.oferta .tt{display:flex;align-items:center;gap:8px;font:900 13px Nunito;letter-spacing:.12em;text-transform:uppercase;color:var(--argila)}
.oferta .tt svg{width:22px;height:22px}
.oferta .itens{margin:10px 0 0;display:flex;flex-direction:column;gap:5px}
.oferta .itens div{display:flex;gap:8px;align-items:flex-start;font:700 14.5px/1.35 Nunito;color:#4f3f52}
.oferta .itens svg{width:17px;height:17px;color:var(--salvia-esc);flex:none;margin-top:1px}
.oferta .preco{display:flex;align-items:baseline;gap:6px;margin:16px 0 0}
.oferta .preco .rs{font:600 24px Fraunces,serif}
.oferta .preco .vl{font:600 54px/1 Fraunces,serif;font-variation-settings:'SOFT' 100;letter-spacing:-.02em}
.oferta .cond{font:900 16px Nunito;color:var(--ameixa);margin-top:4px}
.oferta .sem{margin:12px 0 16px;background:#F2F6F3;border-radius:14px;padding:10px 12px;font:700 14.5px/1.45 Nunito;color:#3d5446}
.oferta .sem b{display:block;font:900 15.5px Nunito;color:var(--salvia-esc)}
.oferta .letra{font:700 12.5px/1.5 Nunito;color:var(--apoio);margin-top:10px}
.oferta .extra{font:800 13px/1.45 Nunito;color:var(--mel-esc);background:#FCF2DC;border-radius:10px;padding:8px 10px;margin-top:10px}

/* inscrição */
.form h1{font:600 28px/1.14 Fraunces,serif;font-variation-settings:'SOFT' 100;margin:4px 0 6px}
.form h1 em{color:var(--argila)}
.form .resumo{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 12px;margin:12px 0 18px;box-shadow:0 2px 10px rgba(59,35,65,.06)}
.form .resumo .av{width:36px;height:36px;flex:none}
.form .resumo div{flex:1;font:800 14px/1.35 Nunito}
.form .resumo small{display:block;font:700 12.5px Nunito;color:var(--apoio)}
.form .resumo .pz{font:900 16px Nunito;color:var(--argila);white-space:nowrap}
.cons{display:flex;gap:12px;align-items:flex-start;min-height:var(--toque);padding:12px 12px;border-radius:16px;background:#fff;border:2px solid var(--linha);margin:6px 0 4px;cursor:pointer}
.cons .mk{width:28px;height:28px;border-radius:8px;border:2.5px solid #CDBFB2;flex:none;display:grid;place-items:center;color:#fff;margin-top:1px}
.cons .mk svg{width:17px;height:17px;opacity:0}
.cons.on{border-color:var(--salvia-esc);background:#F4F8F5}
.cons.on .mk{background:var(--salvia-esc);border-color:var(--salvia-esc)}
.cons.on .mk svg{opacity:1}
.cons.erro{border-color:var(--erro)}
.cons p{font:700 13.5px/1.45 Nunito;color:#4f3f52}
.cons p a{color:var(--argila);font-weight:800}
.seg-info{display:flex;gap:8px;align-items:center;justify-content:center;font:700 12.5px Nunito;color:var(--apoio);margin-top:12px}
.seg-info svg{width:15px;height:15px}

/* painel lateral (só no modo interativo) */
.painel{width:300px;font:700 14px/1.5 Nunito;color:#4a3a4d}
.painel h3{font:600 22px Fraunces,serif;margin-bottom:8px}
.painel a{display:block;color:var(--argila);font-weight:800;padding:3px 0;text-decoration:none}
.painel a:hover{text-decoration:underline}
.painel .g{margin-top:14px;font:900 11px Nunito;letter-spacing:.12em;text-transform:uppercase;color:var(--apoio)}

.oferta .bt{font-size:17px;padding:0 12px;white-space:nowrap}