/* Respira Fundo · cabeçalho, menu e "voltar ao topo" compartilhados (03/11/2026)
 * Incluído em todas as páginas públicas. O conteúdo do cabeçalho é montado por rf-nav.js.
 * Comportamento: opaco no topo; ao rolar para baixo some; ao rolar para cima volta como vidro fosco.
 * Cada página pode trocar as cores pelas variáveis --rfn-* no <header class="rfn">. */
.rfn{
  --rfn-bg:#0d4a57;--rfn-bg2:#0a3a45;--rfn-glass:rgba(13,74,87,.72);--rfn-ink:#fff;--rfn-ink2:rgba(255,255,255,.78);
  --rfn-acento:#ef8a6f;--rfn-acento-ink:#2b0f07;--rfn-linha:rgba(255,255,255,.16);--rfn-h:60px;
  position:sticky;top:0;z-index:60;color:var(--rfn-ink);background:var(--rfn-bg);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),background .32s,box-shadow .32s,backdrop-filter .32s;
  will-change:transform}
.rfn.is-rolado{background:var(--rfn-glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--rfn-linha),0 12px 32px rgba(0,0,0,.18)}
.rfn.is-oculto{transform:translateY(-100%)}
.rfn.is-aberto{transform:none;background:var(--rfn-bg)}
.rfn *{box-sizing:border-box}
.rfn-in{max-width:1120px;margin:0 auto;padding:0 18px;height:var(--rfn-h);display:flex;align-items:center;gap:10px}
.rfn-marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:800;letter-spacing:-.01em;line-height:1.05;min-width:0}
.rfn-marca img{width:32px;height:32px;flex:none;border-radius:9px}
.rfn-marca b{display:block;font-size:1rem;white-space:nowrap}
.rfn-marca small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72;font-weight:700;margin-top:2px;white-space:nowrap}
.rfn-links{margin-left:auto;display:flex;align-items:center;gap:2px}
.rfn-links a{color:inherit;text-decoration:none;font-size:.9rem;font-weight:600;padding:9px 12px;border-radius:999px;opacity:.9;white-space:nowrap;transition:background .15s,opacity .15s}
.rfn-links a:hover{background:rgba(255,255,255,.12);opacity:1}
.rfn-links a[aria-current=page]{background:rgba(255,255,255,.16);opacity:1}
.rfn-conta{display:inline-flex;align-items:center;gap:8px;margin-left:6px;padding:8px 14px 8px 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);color:inherit;text-decoration:none;font-size:.88rem;font-weight:700;white-space:nowrap;transition:background .15s,border-color .15s}
.rfn-conta:hover{background:rgba(255,255,255,.14);border-color:#fff}
.rfn-conta svg{width:18px;height:18px}
.rfn-cta{display:inline-flex;align-items:center;margin-left:4px;padding:9px 16px;border-radius:999px;background:var(--rfn-acento);color:var(--rfn-acento-ink);font-weight:800;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:transform .15s,filter .15s}
.rfn-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.rfn-menu{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:inherit;cursor:pointer;place-items:center}
.rfn-menu:hover{background:rgba(255,255,255,.2)}
.rfn-menu svg{width:24px;height:24px}
.rfn-menu .fechar{display:none}
.rfn.is-aberto .rfn-menu .abrir{display:none}
.rfn.is-aberto .rfn-menu .fechar{display:block}
.rfn :focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:10px}

/* painel do menu (celular e tablet) */
.rfn-painel{--rfn-bg:#0d4a57;--rfn-bg2:#0a3a45;--rfn-ink:#fff;--rfn-acento:#ef8a6f;--rfn-acento-ink:#2b0f07;--rfn-linha:rgba(255,255,255,.16);--rfn-h:60px;
  display:none;position:fixed;left:0;right:0;top:var(--rfn-h);bottom:0;z-index:59;background:linear-gradient(180deg,var(--rfn-bg) 0%,var(--rfn-bg2) 100%);color:var(--rfn-ink);overflow:auto;padding:14px 18px calc(28px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.rfn-painel.is-aberto{display:block;animation:rfn-desce .28s cubic-bezier(.2,.7,.2,1)}
@keyframes rfn-desce{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.rfn-painel ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:560px;margin-inline:auto}
.rfn-painel li a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--rfn-linha);color:inherit;text-decoration:none;min-height:66px;transition:background .15s}
.rfn-painel li a:hover,.rfn-painel li a[aria-current=page]{background:rgba(255,255,255,.16)}
.rfn-painel li a .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.rfn-painel li a .ic svg{width:22px;height:22px}
.rfn-painel li a b{display:block;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.rfn-painel li a small{display:block;font-size:.8rem;opacity:.78;line-height:1.3;margin-top:2px}
.rfn-painel li a .seta{width:20px;height:20px;opacity:.7}
.rfn-painel li.rfn-sep{height:1px;background:var(--rfn-linha);margin:8px 0}
.rfn-painel li.rfn-conta-item a{background:var(--rfn-acento);color:var(--rfn-acento-ink);border-color:transparent}
.rfn-painel li.rfn-conta-item a .ic{background:rgba(43,15,7,.12)}
.rfn-painel li.rfn-conta-item a small{opacity:.85}
.rfn-painel .rfn-rodape{max-width:560px;margin:18px auto 0;font-size:.8rem;opacity:.7;text-align:center}
.rfn-painel .rfn-rodape a{color:inherit}
body.rfn-travado{overflow:hidden}

@media (max-width:860px){
  .rfn-links{display:none}
  .rfn-menu{display:grid;margin-left:auto}
  .rfn-cta{margin-left:auto;padding:8px 13px;font-size:.84rem}
  .rfn-cta + .rfn-menu{margin-left:8px}
}
@media (max-width:400px){.rfn-marca small{display:none}.rfn-cta{display:none}.rfn-cta + .rfn-menu{margin-left:auto}}

/* voltar ao topo (todas as páginas, principalmente no celular) */
.rf-topo{position:fixed;right:14px;bottom:calc(var(--rf-topo-sobe,14px) + env(safe-area-inset-bottom));z-index:58;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(13,74,87,.78);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px rgba(0,0,0,.28);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s}
.rf-topo.is-on{opacity:1;transform:none;pointer-events:auto}
.rf-topo svg{width:22px;height:22px}
.rf-topo:hover{background:rgba(13,74,87,.95)}
@media (min-width:861px){.rf-topo{right:22px}}

@media (prefers-reduced-motion:reduce){
  .rfn,.rf-topo{transition:none}
  .rfn-painel.is-aberto{animation:none}
}