/* =========================================================
   Design system Frank'Anna — tokens e componentes compartilhados
   Carregado ANTES do <style> de cada página; regras da própria
   página vêm depois e podem sobrescrever pontualmente.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --azul-escuro:#0b1a2e;   /* navy mais profundo */
  --azul:#16324f;
  --azul-claro:#27567f;
  --dourado:#c9a86a;       /* acento dourado */
  --creme:#f5f1e8;
  --texto-claro:#eaf0f6;
  --fonte-texto:'Inter',sans-serif;
  --fonte-titulos:'Cormorant Garamond',serif;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}

/* ---------- Base da página (tema navy) ---------- */
body{
  font-family:var(--fonte-texto);
  color:var(--texto-claro);
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(39,86,127,.55), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(201,168,106,.12), transparent 60%),
    linear-gradient(160deg, #112844 0%, #081320 100%);
  display:flex;
  flex-direction:column;
}

/* ---------- Topo (cabeçalho com logo) ---------- */
.topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topo img{height:44px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
.topo-dir{display:flex;gap:12px;}

/* ---------- Botões do topo ---------- */
.btn-sair,
.btn-topo{
  padding:8px 16px;font-size:.85rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:8px;cursor:pointer;
  text-decoration:none;
  transition:background .2s;
}
.btn-sair:hover,
.btn-topo:hover{background:rgba(255,255,255,.16);}

/* ---------- Miolo (área central) ---------- */
.miolo{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:48px 20px 60px;
}
.titulo{
  font-family:var(--fonte-titulos);
  font-size:2.1rem;font-weight:600;color:#fff;margin-bottom:6px;text-align:center;
}
.sub{
  font-size:.95rem;color:rgba(234,240,246,.6);margin-bottom:40px;text-align:center;
}

/* ---------- Rodapé ---------- */
.rodape{
  text-align:center;padding:16px;font-size:.76rem;color:rgba(234,240,246,.4);
  border-top:1px solid rgba(255,255,255,.06);
}