*{box-sizing:border-box}
:root{
font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
color:#193c33;background:#f3f6f3}
body{margin:0}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app{display:flex;min-height:100vh}
.sidebar{
width:245px;flex-shrink:0;background:#103f34;color:white;
padding:28px 17px;display:flex;flex-direction:column;
position:sticky;top:0;height:100vh}
.marca{display:flex;align-items:center;gap:12px;
padding:4px 12px 30px}
.marca strong{display:block;font-size:22px}
.marca small{display:block;color:#a5cbbb;
letter-spacing:2px;font-size:10px;margin-top:5px}
.logo{background:#258666;border-radius:12px;
padding:12px;font-size:25px}
nav{display:grid;gap:7px}
.nav{border:0;background:transparent;color:#c8ded3;
padding:15px;text-align:left;border-radius:10px}
.nav:hover,.nav.ativo{background:#24664f;color:white}
.sidebar-footer{margin-top:auto;color:#a5cbbb;
font-size:12px;line-height:1.8;padding:15px}
.conteudo{flex:1;min-width:0;
max-width:1500px;margin:auto;padding:35px}
.topo{display:flex;align-items:center;
justify-content:space-between;gap:15px;margin-bottom:30px}
.topo h1{font-size:clamp(24px,3vw,36px);margin:8px 0}
.subtitulo{font-size:11px;letter-spacing:2px;
font-weight:700;color:#40836b}
.etiqueta{background:#e1eee6;color:#226048;
border-radius:30px;padding:9px 15px;font-size:12px}
.pagina{display:none}
.pagina.ativa{display:block}
.destaque{background:linear-gradient(120deg,#165542,#287c5c);
border-radius:22px;color:white;padding:45px;
box-shadow:0 12px 30px #164b3c1a}
.destaque span{font-size:12px;letter-spacing:2px;color:#c1edcf}
.destaque h2{font-size:clamp(28px,4vw,43px);
max-width:650px;line-height:1.2}
.destaque p{color:#e0eee7;max-width:620px;line-height:1.7}
.botao-claro{border:0;background:white;color:#165542;
border-radius:10px;padding:13px 20px;margin-top:15px;font-weight:700}
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;margin-top:24px}
.cartao{background:white;border:1px solid #e0e9e3;
border-radius:17px;padding:27px;
box-shadow:0 4px 18px #183a3008}
.cartao h2{margin-top:0}
.cartao p{color:#62776d;line-height:1.7}
.cartao button:not(.principal){border:0;background:transparent;
color:#246e53;font-weight:700;padding:8px 0}
.simbolo{font-size:30px;color:#328769}
label{display:block;font-weight:600;margin:20px 0}
input,textarea{display:block;margin-top:9px;width:100%;
padding:14px;border:1px solid #cadbd0;border-radius:10px;
background:#fbfdfb;color:#193c33}
textarea{resize:vertical}
.principal{background:#17664d;color:white;border:0;
border-radius:10px;padding:13px 22px;font-weight:700}
.registro,.artigo{padding:15px 0;border-bottom:1px solid #e4eee7;
white-space:pre-wrap;overflow-wrap:anywhere}
.registro small{color:#658174}
footer{display:flex;align-items:center;justify-content:space-between;
gap:15px;padding:25px 0;color:#28674c}
.exportar{border:1px solid #b9d3c3;border-radius:9px;
background:white;color:#225c46;padding:11px}
@media(max-width:850px){
.app{display:block}
.sidebar{width:100%;height:auto;position:static;padding:14px}
.marca{padding:6px 10px 14px}
.sidebar nav{display:flex;overflow-x:auto}
.nav{white-space:nowrap;padding:12px}
.sidebar-footer{display:none}
.conteudo{padding:18px}
.grade{grid-template-columns:1fr}
.destaque{padding:27px}
.topo{align-items:flex-start}
footer{flex-wrap:wrap}
}