/* Forróbook -- estilo base, mobile-first. Paleta laranja/vermelho
   (mesma linha visual do Agenda do Forró SP). */
:root {
  --laranja: #E8590C;
  --vermelho: #C92A2A;
  --fundo: #FFF8F3;
  --cartao: #FFFFFF;
  --texto: #2B2118;
  --texto-suave: #8A7A6D;
  --borda: #F0E4D8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  padding-bottom: 64px; /* espaço pra barra de navegação fixa embaixo */
}
a { color: inherit; text-decoration: none; }
.container { max-width: 480px; margin: 0 auto; padding: 16px; }

.topo {
  display: flex; align-items: center; justify-content: center;
  padding: 14px; background: linear-gradient(135deg, var(--laranja), var(--vermelho));
  color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em;
  position: sticky; top: 0; z-index: 10;
}

.nav-inferior {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around; align-items: center;
  background: #fff; border-top: 1px solid var(--borda);
  padding: 10px 0; z-index: 10;
}
.nav-inferior a { font-size: 1.4rem; padding: 4px 16px; color: var(--texto-suave); }
.nav-inferior a.ativo { color: var(--laranja); }

.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px;
  padding: 20px; margin-bottom: 16px;
}

input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--borda);
  font-size: 1rem; margin-bottom: 12px; font-family: inherit;
}
textarea { resize: vertical; min-height: 80px; }

.btn {
  display: inline-block; width: 100%; padding: 13px; border-radius: 999px;
  background: linear-gradient(135deg, var(--laranja), var(--vermelho));
  color: #fff; font-weight: 700; text-align: center; border: none; font-size: 1rem;
  cursor: pointer;
}
.btn-secundario {
  background: #fff; color: var(--laranja); border: 1.5px solid var(--laranja);
}
.erro { color: var(--vermelho); font-size: 0.88rem; margin-bottom: 10px; }

/* --- Post no feed --- */
.post { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.post-cabecalho { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-cabecalho img.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--borda); }
.post-cabecalho .nome-usuario { font-weight: 700; font-size: 0.92rem; }
.post img.midia { width: 100%; display: block; background: var(--borda); }
.post-legenda { padding: 10px 14px 16px; font-size: 0.92rem; }
.post-legenda strong { margin-right: 6px; }

/* --- Perfil --- */
.perfil-cabecalho { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.perfil-cabecalho img.avatar-grande { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--borda); }
.perfil-stats { display: flex; gap: 20px; font-size: 0.9rem; }
.perfil-stats strong { display: block; font-size: 1.05rem; }
.grade-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 16px; }
.grade-posts img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--borda); }

.vazio { text-align: center; color: var(--texto-suave); padding: 40px 16px; }