* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #FFFBF5;
  color: #2A2420;
  line-height: 1.6;
}
.font-display { font-family: Georgia, 'Times New Roman', serif; }
a { color: #B8461E; }

.badge {
  display: inline-block;
  background: #D9531E;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

nav.topnav {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 18px;
  font-size: 0.9rem;
  font-weight: 600;
}
nav.topnav a { text-decoration: none; color: rgba(42,36,32,0.55); white-space: nowrap; }
nav.topnav a.current { color: #2A2420; border-bottom: 2px solid #D9531E; padding-bottom: 2px; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.back-link { font-size: 0.85rem; font-weight: 600; text-decoration: none; display: inline-block; margin-bottom: 14px; }

h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 1.15rem; margin: 0 0 14px; }
p { margin: 0 0 16px; color: rgba(42,36,32,0.85); }
p.lead { color: rgba(42,36,32,0.6); margin-bottom: 28px; }

.card {
  background: #fff;
  border: 1px solid #EDE0CC;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 20px;
}
.card p:last-child { margin-bottom: 0; }

.total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.total-card .num { font-size: 2.6rem; font-weight: 700; color: #D9531E; line-height: 1; }
.total-card .label { color: rgba(42,36,32,0.6); font-size: 0.9rem; }

.chart-box { height: 240px; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 40px;
}
.city-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #EDE0CC;
  border-radius: 16px;
  padding: 22px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.city-card:hover { border-color: #D9531E; }
.city-card h3 { font-size: 1.2rem; margin: 0 0 4px; font-family: Georgia, 'Times New Roman', serif; }
.city-card span.total { color: rgba(42,36,32,0.55); font-size: 0.85rem; }

.relato-item { padding-left: 14px; border-left: 4px solid #EDE0CC; margin-bottom: 12px; }
.relato-item p { margin: 0; font-size: 0.9rem; color: rgba(42,36,32,0.8); }

footer {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(42,36,32,0.4);
  padding: 32px 24px;
}
footer a { color: inherit; }

.skeleton { color: rgba(42,36,32,0.4); font-size: 0.9rem; }
.hidden { display: none; }