/* ═══════════════════════════════════════════════════════
   Tema visual USF Marginal — inspirado em "Recomendações por Idade"
   Paleta azul-petróleo / sálvia / gelo · Fredoka (títulos) + Nunito (texto)
   Carregar DEPOIS de style.css / monolito.css
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --teal:#4f85a0; --teal-m:#3f6f88; --teal-l:#e4f1f6; --teal-dk:#253d48;
  --blue:#4f85a0; --blue-m:#3f6f88; --blue-d:#253d48; --blue-l:#e8f2f7;
  --sage:#9ec4c5; --ice:#d7eff9; --gold:#c9923a;
  --rose:#b5567a; --rose-l:#fbeaf1; --rose-m:#c2698d;
  --amber:#a56f12; --amber-l:#fff4df;
  --red:#d44a41; --red-l:#fdecea;
  --green:#3c8c6e; --green-l:#e6f4ee;
  --t1:#1e3540; --t2:#5a7580; --t3:#93a8b1;
  --bg:#f4f9fb; --bgp:#ffffff; --bg2:#f0f6f8;
  --b:#dfe9ee; --b2:#c9d9e0;
  --r:12px; --rl:16px; --rxl:20px;
  --shadow:0 6px 22px -10px rgba(37,61,72,.22);
}
body{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.card-hd h3,.setup-header h2,.home-title,.login-title,.mc-title,.cb-title,.folheto-titulo,.hdr-in h1{font-family:'Fredoka','Nunito',sans-serif;font-weight:600;letter-spacing:.2px}

/* cartões e secções */
.card{border-radius:var(--rl);border:1px solid var(--b);box-shadow:var(--shadow)}
.card-hd{background:#fff;border-bottom:2px solid var(--bg)}
.card-hd h3{color:var(--teal-dk);font-size:14.5px}
.sb-section{display:inline-block;margin:12px 14px 6px;padding:4px 12px;border-radius:999px;background:var(--teal);color:#fff;font-size:10px;font-weight:800;letter-spacing:1.5px}
.nav-item{border-radius:0 999px 999px 0;margin-right:8px}
.nav-item.active{background:var(--teal-l)!important;border-left-color:var(--teal)!important}
.setup-card{border-radius:var(--rxl);box-shadow:var(--shadow)}
.setup-header{background:linear-gradient(120deg,var(--teal-dk),var(--teal))!important}
.field-input{border-radius:12px;border:1.5px solid var(--b2)}
.field-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,133,160,.15)}
.btn-primary,.login-btn,.btn-copiar,.tbtn.primario{border-radius:999px!important;font-weight:800;letter-spacing:.3px;background:var(--teal)!important;color:#fff!important}
.btn-primary:hover,.login-btn:hover{background:var(--teal-m)!important}
.topbar{background:var(--teal-dk)}
.tab.active{border-color:var(--teal);color:var(--teal)}

/* shell */
#header{border-bottom:1px solid #e9eef1}
#header .h-title .t1{color:var(--teal-dk);font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;letter-spacing:.3px}
#header .h-title .t2{color:var(--t2);font-weight:700;font-size:11px;letter-spacing:1.2px;text-transform:uppercase}
#sidebar{border-right:1px solid #e9eef1}
.sb-tool{border-radius:0 999px 999px 0;margin-right:8px;font-weight:600}
.sb-tool.active{background:var(--teal-l);border-left-color:var(--teal);color:var(--teal)}
.sb-home{color:var(--teal-dk)}
.sb-home.active{background:var(--teal-l)}
#home-page{background:linear-gradient(180deg,#eef4fb 0%,var(--bg) 40%)}
.home-title{color:var(--teal-dk);font-size:34px;text-transform:uppercase;letter-spacing:1px;line-height:1.05}
.home-sub{color:var(--teal);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:12px}
.mod-card{border-radius:var(--rxl);box-shadow:var(--shadow)}
.mc-tool{border-radius:12px}
#login-overlay{background:linear-gradient(135deg,var(--teal-dk),var(--teal) 60%,var(--sage))}
.login-box{border-radius:var(--rxl)}