/* Moldura do portal: cabeçalho, trilha, conta e rodapé de todas as páginas
   públicas, do CMS e do aplicativo. Injetado por /js/componentes.js depois das
   demais folhas, para valer sobre style.css (que no aplicativo vem em camada).
   Classes próprias (.si-*), para não herdar as regras antigas de nav/header.
   Nenhum ornamento é caractere de texto: tudo é desenho em CSS. */

body > header.si-header { --si-alt: 68px; --si-azul: #0e1a2e; --si-azul-2: #152440; --si-ouro: #c9a23f; --si-ouro-c: #e2c06a; --si-ouro-p: #f4e2a6;
  --si-marfim: #f4efe4; --si-larg: 1560px;
  position: sticky; top: 0; z-index: 1000; height: var(--si-alt);
  background: linear-gradient(180deg, rgba(14, 26, 46, .97), rgba(10, 19, 34, .97));
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(201, 162, 63, .55); box-shadow: 0 1px 0 rgba(244, 226, 166, .08), 0 10px 30px rgba(5, 10, 20, .25); }
.si-header *, .si-header *::before, .si-header *::after { box-sizing: border-box; }
.si-header__inner { max-width: var(--si-larg); height: 100%; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr) var(--si-conta, 230px); align-items: center; gap: 1.5rem; }

/* Marca */
.si-marca { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; min-width: 0; }
.si-marca img { width: 38px; height: 38px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.si-marca__txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.si-marca__txt b { font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: .86rem; letter-spacing: .08em; color: var(--si-ouro-p); white-space: nowrap; }
.si-marca__txt small { font-family: "Cinzel", Georgia, serif; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 226, 166, .6); white-space: nowrap; margin-top: .2rem; }

/* Navegação */
.si-nav { justify-self: center; height: 100%; }
.si-nav > div { height: 100%; }
.si-nav__lista { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; align-items: stretch; gap: .2rem; }
.si-nav__item { position: relative; display: flex; }
.si-nav__topo { display: inline-flex; align-items: center; gap: .4rem; height: 100%; padding: 0 .6rem; cursor: pointer;
  font-family: "Cinzel", Georgia, serif; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: rgba(244, 239, 228, .82); text-decoration: none; background: none; border: 0; position: relative; }
.si-nav__topo::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 14px; height: 1px; background: var(--si-ouro-c);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.si-nav__item:hover > .si-nav__topo, .si-nav__item:focus-within > .si-nav__topo, .si-nav__topo.ativo { color: var(--si-ouro-p); }
.si-nav__item:hover > .si-nav__topo::after, .si-nav__item:focus-within > .si-nav__topo::after, .si-nav__topo.ativo::after { transform: scaleX(1); }
/* Seta de submenu, desenhada. */
.si-nav__seta { width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .2s; }
.si-nav__item:hover .si-nav__seta, .si-nav__item.aberto .si-nav__seta { transform: translateY(1px) rotate(225deg); }

/* Painel suspenso */
.si-painel { position: absolute; top: calc(100% - 6px); left: 50%; min-width: 300px; padding: .6rem; list-style: none; margin: 0;
  background: #fbf8f0; border: 1px solid #ddd0b0; border-top: 2px solid var(--si-ouro); box-shadow: 0 24px 50px rgba(5, 10, 20, .28);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 1001; }
.si-painel::before { content: ""; position: absolute; top: -8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: #fbf8f0;
  border-left: 1px solid var(--si-ouro); border-top: 1px solid var(--si-ouro); transform: rotate(45deg); }
.si-nav__item:hover > .si-painel, .si-nav__item:focus-within > .si-painel, .si-nav__item.aberto > .si-painel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.si-painel a { display: block; padding: .65rem .8rem; text-decoration: none; color: #152035; border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.si-painel a:hover, .si-painel a:focus-visible, .si-painel a.ativo { background: #f1e9d6; border-left-color: var(--si-ouro); outline: none; }
.si-painel b { display: block; font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: .74rem; letter-spacing: .06em; }
.si-painel span { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: .98rem; line-height: 1.3; color: #5c4a30; margin-top: .1rem; }

/* Botão do menu (telas estreitas) */
.si-menu { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: 1px solid rgba(201, 162, 63, .45); padding: 0; justify-self: end; }
.si-menu i { display: block; width: 20px; height: 1.5px; background: var(--si-ouro-p); transition: transform .2s, opacity .2s; }
.si-menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.si-menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.si-menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Conta: o mesmo controle de sempre (React ou ilha do CMS), assentado na linha do cabeçalho. */
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) {
  position: fixed; top: 0; right: max(clamp(1rem, 3vw, 2rem), calc((100vw - 1560px) / 2 + 2rem)); z-index: 1002; height: 68px;
  display: flex; align-items: center; justify-content: flex-end; gap: .9rem; padding: 0; margin: 0; background: none; border: 0;
  font-family: "Cinzel", Georgia, serif; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 239, 228, .8); }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) > span:not(:has(strong)):not([role]) { display: none; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) > span:has(strong) { display: none; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) strong { font-size: .64rem; font-weight: 600; color: #f4e2a6; letter-spacing: .1em; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a,
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) button { color: rgba(244, 239, 228, .85); text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a:hover,
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) button:hover { color: #f4e2a6; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href^="/auth"] { padding: .55rem 1rem; border: 1px solid rgba(201, 162, 63, .7); color: #f4e2a6; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href^="/auth"]:hover { background: #e2c06a; color: #0e1a2e; }
body:has(> header.si-header) .conta-status:not(.conta-status--compacta) [role="status"] { opacity: .6; }

/* Trilha */
body:has(> header.si-header) > nav.breadcrumb { background: #f7f2e6; border-bottom: 1px solid #e6dcc4; padding: .55rem clamp(1rem, 3vw, 2rem); }
body:has(> header.si-header) > nav.breadcrumb .breadcrumb-inner { max-width: 1280px; font-size: .56rem; letter-spacing: .16em; gap: .5rem; color: #7a6a52; }
body:has(> header.si-header) > nav.breadcrumb .breadcrumb-inner a { color: #8a6a1e; }

/* Menu recolhido num painel que desce do cabeçalho: componentes.js põe a classe
   quando a marca, o menu e a conta não cabem juntos na linha. */
.si-header--recolhido .si-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.si-header--recolhido .si-menu { display: inline-flex; grid-column: 3; margin-right: var(--si-conta, 230px); }
.si-header--recolhido .si-nav { position: absolute; top: 100%; left: 0; right: 0; height: auto; justify-self: stretch; display: none; background: #0e1a2e; border-bottom: 2px solid var(--si-ouro); box-shadow: 0 20px 40px rgba(5, 10, 20, .4); max-height: calc(100vh - 68px); overflow-y: auto; }
.si-header--recolhido.menu-aberto .si-nav { display: block; }
.si-header--recolhido .si-nav__lista { flex-direction: column; height: auto; padding: .5rem 0; max-width: 1280px; margin: 0 auto; }
.si-header--recolhido .si-nav__item { flex-direction: column; }
.si-header--recolhido .si-nav__topo { height: auto; padding: 1rem clamp(1rem, 3vw, 2rem); justify-content: space-between; width: 100%; border-bottom: 1px solid rgba(244, 239, 228, .06); }
.si-header--recolhido .si-nav__topo::after { display: none; }
.si-header--recolhido .si-painel { position: static; transform: none; opacity: 1; visibility: visible; display: none; min-width: 0; box-shadow: none; border: 0; border-left: 2px solid var(--si-ouro); margin: 0 clamp(1rem, 3vw, 2rem) .6rem; background: rgba(251, 248, 240, .06); }
.si-header--recolhido .si-painel::before { display: none; }
.si-header--recolhido .si-nav__item.aberto > .si-painel { display: block; transform: none; }
.si-header--recolhido .si-nav__item:hover > .si-painel { transform: none; }
.si-header--recolhido .si-painel a { color: #f4efe4; }
.si-header--recolhido .si-painel a:hover, .si-header--recolhido .si-painel a:focus-visible, .si-header--recolhido .si-painel a.ativo { background: rgba(244, 226, 166, .08); }
.si-header--recolhido .si-painel span { color: rgba(244, 239, 228, .6); }
@media (max-width: 640px) {
  body > header.si-header { --si-alt: 60px; --si-conta: 112px; }
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) { height: 60px; right: 1rem; gap: .6rem; }
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) > span:has(strong),
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href="/admin/wp"] { display: none; }
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href^="/auth"] { font-size: 0; padding: .5rem .75rem; }
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href^="/auth"]::after { content: "Entrar"; font-size: .6rem; letter-spacing: .14em; }
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href="/minha-cidadania"] { font-size: 0; }
  body:has(> header.si-header) .conta-status:not(.conta-status--compacta) a[href="/minha-cidadania"]::after { content: "Conta"; font-size: .6rem; }
  .si-header__inner { gap: .6rem; }
  .si-marca { gap: .5rem; }
  .si-marca img { width: 32px; height: 32px; }
  .si-marca__txt b { font-size: .68rem; white-space: normal; line-height: 1.2; max-width: 9.5rem; }
  .si-marca__txt small { display: none; }
  .si-nav { max-height: calc(100vh - 60px); }
}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
footer.si-rodape { --si-ouro: #c9a23f; --si-ouro-p: #f4e2a6; position: relative; color: rgba(244, 239, 228, .78); font-family: "EB Garamond", Georgia, serif;
  background: radial-gradient(60% 80% at 15% 0%, rgba(201, 162, 63, .12), transparent 60%), linear-gradient(180deg, #0e1a2e, #070d18); }
/* Cimalha: uma faixa de ouro com dentículos, como a do friso dos Domínios. */
footer.si-rodape::before { content: ""; display: block; height: 10px; border-top: 2px solid var(--si-ouro);
  background: repeating-linear-gradient(90deg, rgba(201, 162, 63, .45) 0 12px, transparent 12px 20px); }
.si-rodape *, .si-rodape *::before, .si-rodape *::after { box-sizing: border-box; }
.si-rodape__inner { max-width: 1280px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem) 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.si-rodape__marca img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 1rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.si-rodape__marca b { display: block; font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 1.05rem; letter-spacing: .08em; line-height: 1.3; color: var(--si-ouro-p); }
.si-rodape__marca em { display: block; font-family: "Cinzel", Georgia, serif; font-style: normal; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 226, 166, .65); margin: .6rem 0 1rem; }
.si-rodape__marca p { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 22rem; }
.si-rodape__col h4 { margin: 0 0 1rem; font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--si-ouro-p);
  padding-bottom: .6rem; border-bottom: 1px solid rgba(201, 162, 63, .3); }
.si-rodape__col ul { list-style: none; margin: 0; padding: 0; }
.si-rodape__col li { margin: 0 0 .55rem; }
.si-rodape__col a { color: rgba(244, 239, 228, .78); text-decoration: none; font-size: 1.02rem; transition: color .15s; }
.si-rodape__col a:hover, .si-rodape__col a:focus-visible { color: var(--si-ouro-p); }
.si-rodape__base { max-width: 1280px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: 1.2rem clamp(1rem, 3vw, 2rem) 1.6rem; border-top: 1px solid rgba(201, 162, 63, .25);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  font-family: "Cinzel", Georgia, serif; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 239, 228, .5); }
.si-rodape__base strong { color: rgba(244, 226, 166, .8); font-weight: 600; }
@media (max-width: 1000px) {
  .si-rodape__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si-rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .si-rodape__inner { grid-template-columns: minmax(0, 1fr); }
  .si-rodape__base { justify-content: center; text-align: center; }
}
@media print { body > header.si-header, footer.si-rodape, body:has(> header.si-header) .conta-status { display: none !important; } }