/* ============================================================
   RJ+ · brand.css — base compartilhada entre index.html,
   conversa/index.html e formulario/index.html.
   Fontes: Fahwang (títulos) + Verdana (corpo/UI). Paleta oficial
   RJ+ (verde musgo/floresta, bege, dourado). NUNCA navy/azul.
   ============================================================ */

@font-face {
  font-family: 'Fahwang';
  src: url('/fonts/Fahwang-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fahwang';
  src: url('/fonts/Fahwang-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --verde-musgo: #3D4B2E;
  --verde-floresta: #2A3820;
  --bege: #EEE8DC;
  --bege-accent: #CDB98B;
  --dourado: #B8923E;
  --branco: #FFFFFF;
  --texto: #2A3820;
  --texto-suave: #6B7360;
  --erro: #A8442E;
  --erro-bg: #F6E3DE;
  --aviso: #B8923E;
  --aviso-bg: #FBF1DD;
  --sucesso: #3D4B2E;
  --sucesso-bg: #E4EADB;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: Verdana, Geneva, sans-serif;
  background: var(--bege);
  color: var(--texto);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Header (comum a todas as páginas) ── */
.top-bar {
  background: var(--verde-floresta);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo-wrap { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.logo-text {
  font-family: 'Fahwang', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--branco);
  letter-spacing: 0.5px;
}
.logo-text .plus { color: var(--dourado); }
.logo-sub {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bege-accent);
}
.top-bar-right { display: flex; align-items: center; gap: 10px; }
.beta-tag {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--verde-floresta);
  background: var(--dourado);
  border-radius: 100px;
  padding: 3px 10px;
  font-weight: bold;
  white-space: nowrap;
}
.back-link {
  font-size: 11px;
  color: var(--bege-accent);
  text-decoration: none;
  font-family: Verdana, sans-serif;
  border: 1px solid rgba(238,232,220,0.3);
  border-radius: 100px;
  padding: 5px 12px;
  transition: all 0.2s;
  white-space: nowrap;
}
.back-link:hover { color: var(--branco); border-color: var(--dourado); }

/* ── Footer (comum) ── */
.app-footer {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  padding: 10px 12px 14px;
  flex-shrink: 0;
}

/* ── App shell (comum) ── */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 560px) {
  .top-bar { padding: 12px 16px; }
}