/* ============================================
   cidaderibeirao.com.br — Portal Institucional
   ============================================ */

:root {
  --governo: #004a8d;
  --apoio: #f8f9fa;
  --texto: #333;
  --acento: #e67e22;
  --borda: #e1e4e8;
}

body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #fff; color: var(--texto); line-height: 1.6; margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

header { background: var(--governo); color: #fff; padding: 1.5rem 0; border-bottom: 5px solid var(--acento); }
.logo { font-size: 1.8rem; font-weight: bold; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; }

nav { background: #003366; padding: 0.8rem 0; }
nav ul { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
nav a { color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; }
nav a:hover { color: var(--acento); }

.hero { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/hero-bg.jpg'); background-size: cover; color: #fff; padding: 5rem 0; text-align: center; }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }

.section-title { border-bottom: 3px solid var(--governo); padding-bottom: 0.5rem; margin-bottom: 2rem; font-size: 1.5rem; color: var(--governo); }

.article-box { background: var(--apoio); border-radius: 5px; padding: 2rem; margin-bottom: 2rem; border-left: 5px solid var(--governo); }
.article-box h2 { color: var(--governo); margin-top: 0; }

.reportagem-empresarial { max-width: 800px; margin: 0 auto; padding: 3rem 0; }
.reportagem-empresarial h1 { color: var(--governo); font-size: 2.5rem; line-height: 1.2; }
.reportagem-empresarial .meta { color: #777; font-size: 0.9rem; margin-bottom: 2rem; }
.reportagem-empresarial p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.reportagem-empresarial img { width: 100%; border-radius: 8px; margin-bottom: 2rem; }

footer { background: #222; color: #ccc; padding: 3rem 0; margin-top: 4rem; font-size: 0.9rem; }
footer a { color: #fff; }

@media (max-width: 768px) {
  nav ul { flex-direction: column; gap: 10px; }
  .hero h1 { font-size: 2rem; }
}