*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;margin:0;background:#FDFBF7;color:#1F3A4D;line-height:1.5}
.cvv{background:#1F3A4D;color:#fff;text-align:center;padding:10px 16px;font-size:14px}
header{text-align:center;padding:24px 16px 8px}
header h1{margin:0;font-size:30px}
.sub{color:#5a6b7a;margin:4px 0 12px}
nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:8px 12px;position:sticky;top:0;background:#FDFBF7;z-index:5}
nav button{border:2px solid #C89B3C;background:#fff;color:#1F3A4D;border-radius:20px;padding:8px 14px;cursor:pointer;font-size:14px}
nav button.on{background:#1F3A4D;color:#fff}
main{max-width:760px;margin:0 auto;padding:16px}
.sec{display:none}
.sec.on{display:block}
h2{color:#1F3A4D;border-bottom:3px solid #C89B3C;padding-bottom:6px}
.card{background:#fff;border:1px solid #e3dccb;border-radius:14px;padding:16px;margin:12px 0}
.card.sos{border-color:#2E5A7A;background:#eef4f8}
.cards{display:grid;gap:12px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
label{display:block;margin:12px 0;font-weight:600}
input,select,textarea{width:100%;padding:10px;margin-top:4px;border:1px solid #c8d2da;border-radius:8px;font-size:15px;font-family:inherit}
button{background:#1F3A4D;color:#fff;border:none;border-radius:10px;padding:12px 18px;cursor:pointer;font-size:15px;margin:6px 6px 6px 0}
button.secund{background:#fff;color:#1F3A4D;border:2px solid #1F3A4D}
.msg{color:#2E5A7A;min-height:20px}
.grafico{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:8px}
.grafico div{flex:1;background:#C89B3C;border-radius:6px 6px 0 0;text-align:center;color:#fff;font-size:12px;padding-top:4px}
.lock{background:#FFF7E0;border:2px dashed #C89B3C;border-radius:14px;padding:20px;text-align:center;margin:12px 0}
.tabs button{background:#fff;color:#1F3A4D;border:2px solid #C89B3C}
.tabs button.on{background:#C89B3C;color:#fff}
.ferr{display:none}
.ferr.on{display:block}
.dist{border:1px solid #e3dccb;border-radius:10px;padding:10px 14px;margin:8px 0;cursor:pointer;background:#fff}
.dist p{margin:6px 0 0;color:#5a6b7a}
.circulo{width:170px;height:170px;border-radius:50%;background:#2E5A7A;color:#fff;display:flex;align-items:center;justify-content:center;margin:16px auto;font-size:20px;transition:transform 4s ease}
.circulo.big{transform:scale(1.25)}
.tempo{text-align:center;font-size:26px;font-weight:700}
.barra{background:#e3dccb;border-radius:8px;height:16px;overflow:hidden}
.barra div{background:#C89B3C;height:100%;width:0%}
.dia{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #eee}
.dia span{flex:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.modal-box{background:#fff;border-radius:16px;padding:24px;max-width:480px;width:100%}
footer{text-align:center;color:#7a8a99;font-size:13px;padding:24px 16px}
small{color:#7a8a99}