.municipios { padding: 96px 24px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.municipios-inner { width: min(1180px, 100%); margin: 0 auto; }
.municipios-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 42px; }
.municipios-header h2 { max-width: 700px; margin: 10px 0 12px; color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.04em; }
.municipios-header p { max-width: 650px; margin: 0; color: var(--ink-light); font-size: 1.05rem; line-height: 1.7; }
.municipios-controls { display: flex; flex: 0 0 auto; gap: 10px; }
.municipios-arrow { display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid #dce3ec; border-radius: 50%; background: var(--white); color: #1261e0; font-size: 1rem; line-height: 1; box-shadow: 0 2px 5px rgba(7, 17, 31, .025); transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.municipios-arrow i { display: block; line-height: 1; }
.municipios-arrow:hover { border-color: #cbd5e1; background: var(--white); color: #0a52cc; box-shadow: 0 5px 14px rgba(10, 82, 204, .1); transform: translateY(-1px); }
.municipios-arrow:focus-visible { outline: 3px solid rgba(10, 82, 204, .22); outline-offset: 3px; }
.municipios-viewport { overflow: hidden; }
.municipios-track { display: flex; gap: 22px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.municipio-card { flex: 0 0 calc((100% - 66px) / 4); min-width: 0; padding: 28px 20px 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); text-align: center; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.municipio-card:hover { border-color: rgba(10, 82, 204, .25); box-shadow: var(--shadow-md); transform: translateY(-5px); }
.municipio-brasao { display: grid; width: 104px; height: 104px; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: var(--blue-pale); color: var(--blue); }
.municipio-brasao img { width: 82px; height: 82px; object-fit: contain; }
.municipio-brasao--quatis img { width: 90px; height: 90px; object-fit: cover; object-position: 11% center; }
.municipio-brasao i { font-size: 2.5rem; }
.municipio-card h3 { margin: 0 0 7px; color: var(--ink); font-size: 1rem; font-weight: 700; }
.municipio-card > span { color: var(--ink-light); font-size: .82rem; font-weight: 600; }
@media (max-width: 991px) { .municipio-card { flex-basis: calc((100% - 44px) / 3); } }
@media (max-width: 767px) { .municipios { padding: 72px 20px; } .municipios-header { align-items: center; } .municipio-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 520px) { .municipios-header { align-items: flex-start; flex-direction: column; } .municipio-card { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .municipios-track { transition: none; } }