/* Start Grana | páginas de seção (/ferramentas/ e /aprender/) */
.hb { max-width: 1080px; margin: 0 auto; padding: 0 20px 28px; }
.hb-trilha { font-size: 13px; color: var(--muted); padding-top: 20px; display: flex; gap: 8px; }
.hb-trilha a { color: var(--muted); text-decoration: none; }
.hb-cab { padding: 22px 0 4px; }
.hb-cab h1 { font-size: clamp(30px, 4.8vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 16px; }
.hb-lide { font-size: 17px; line-height: 1.65; color: var(--text2); margin-top: 12px; max-width: 720px; }
.hb-sec { margin-top: 30px; }
.hb-sec > h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.hb-sec > p { font-size: 15px; color: var(--text2); margin-top: 4px; }
.hb-destaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.hb-d { display: flex; flex-direction: column; gap: 6px; border-radius: 22px; padding: 20px; text-decoration: none; color: #fff; background: var(--cor, #141414); min-height: 150px; transition: transform .12s; }
.hb-d:hover { transform: translateY(-2px); }
.hb-d b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.hb-d span { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); }
.hb-d em { margin-top: auto; font-style: normal; font-size: 13px; font-weight: 800; color: #fff; }
.hb-d.hb-amarelo { background: #ffc400; color: #141414; } .hb-d.hb-amarelo span, .hb-d.hb-amarelo em { color: #141414; }
.hb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; }
.hb-i { display: block; background: var(--surface, #fff); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; text-decoration: none; color: #141414; border: 2px solid transparent; transition: border-color .12s; }
.hb-i:hover { border-color: #141414; }
.hb-i b { display: block; font-size: 15px; font-weight: 800; }
.hb-i span { display: block; font-size: 13px; color: #3a382f; margin-top: 2px; line-height: 1.45; }
.hb-mais { display: inline-block; margin-top: 14px; background: #141414; color: #fff; border-radius: 999px; padding: 11px 20px; font-size: 14px; font-weight: 800; text-decoration: none; }