:root{--navy:#175479;--azul:#1288C8;--cinza:#666;--fundo:#fff;--card:#f4f8fb;--borda:#d9e4ec}
@media (prefers-color-scheme:dark){:root{--fundo:#0e1a23;--card:#162632;--borda:#27404f;--cinza:#a5b4be;--navy:#7fc0e6}}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--cinza);font:400 14px/1.5 Montserrat,Gotham,sans-serif;padding:0 16px 40px 36px}
.faixa{position:fixed;left:0;top:0;bottom:0;width:6px;background:var(--azul)}
header{max-width:1000px;margin:0 auto;padding:32px 0 16px;display:flex;gap:16px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;border-bottom:2px solid var(--azul)}
.marca{display:flex;align-items:center;gap:16px}
.logo{height:64px;width:auto;border-radius:8px}
@media (prefers-color-scheme:dark){.logo{background:#fff;padding:4px 8px}}
h1{margin:0;font-weight:800;font-size:28px;color:var(--navy)}
.sub{margin:4px 0 0}
#grade{max-width:1000px;margin:24px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px}
.card{position:relative;overflow:hidden;min-height:130px}
.card::before{content:"";position:absolute;right:10px;bottom:6px;width:100px;height:100px;background:var(--navy);opacity:.1;pointer-events:none;-webkit-mask:var(--marca) center/contain no-repeat;mask:var(--marca) center/contain no-repeat}
.card>*{position:relative}
.card h2{margin:0;font-size:16px;font-weight:800;color:var(--navy)}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--azul);color:#fff;text-decoration:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:13px}
.btn:hover{background:var(--navy)}
.breve{align-self:flex-start;font-size:12px;font-weight:600;border:1px dashed var(--borda);padding:6px 12px;border-radius:8px}