/* ============================================
   ribeiraopontoaponto.com.br — Portal Hiperlocal
   ============================================ */

:root {
  --bairro-cor: #8e44ad;
  --fundo: #fdfdfd;
  --texto: #444;
  --borda: #eee;
  --acento: #f39c12;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.5; margin: 0; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }

header { background: #fff; padding: 1.5rem 0; border-bottom: 3px solid var(--bairro-cor); }
.logo { font-size: 1.4rem; font-weight: 800; color: var(--bairro-cor); text-decoration: none; text-transform: lowercase; }
.logo span { color: var(--acento); }

nav { background: var(--bairro-cor); padding: 0.5rem 0; }
nav ul { list-style: none; display: flex; gap: 15px; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { color: #fff; text-decoration: none; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; }
nav a:hover { text-decoration: underline; }

.bairro-header { background: #f9f9f9; padding: 3rem 0; border-bottom: 1px solid var(--borda); margin-bottom: 2rem; }
.bairro-header h1 { font-size: 2.5rem; color: var(--bairro-cor); margin: 0; }

.servicos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.servico-item { border: 1px solid var(--borda); border-radius: 10px; padding: 1.5rem; background: #fff; transition: box-shadow 0.3s; }
.servico-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.servico-item h3 { margin-top: 0; color: var(--bairro-cor); }

.recomendado { border: 2px solid var(--acento); position: relative; }
.recomendado::before { content: 'RECOMENDADO'; position: absolute; top: -10px; right: 10px; background: var(--acento); color: #fff; font-size: 0.6rem; padding: 2px 8px; border-radius: 5px; font-weight: bold; }

footer { background: #333; color: #fff; padding: 2rem 0; margin-top: 4rem; text-align: center; font-size: 0.8rem; }

@media (max-width: 600px) {
  .bairro-header h1 { font-size: 1.8rem; }
}