/* ZEH0_001_SITE_INSTITUCIONAL, topo.css. Topo com abas e menu do celular. Carregar na ordem das paginas. */

/* Topo com abas */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .5s,padding .5s,border-color .5s;padding:26px 0;border-bottom:1px solid transparent}
header.rolou{background:rgba(10,9,8,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 0;border-color:rgba(201,169,106,.18)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.5rem;letter-spacing:.42em}
.logo svg{width:20px;fill:var(--ouro)}
nav.abas{display:flex;gap:34px}
nav.abas a{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;position:relative;padding:6px 0;color:#d8d1c3;transition:color .3s}
nav.abas a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ouro);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav.abas a:hover,nav.abas a.on{color:var(--ouro-claro)}
nav.abas a:hover::after,nav.abas a.on::after{transform:scaleX(1);transform-origin:left}
header .btn{padding:12px 24px}
#ham{display:none;width:34px;height:22px;position:relative}
#ham span{position:absolute;left:0;height:1px;width:100%;background:var(--ouro-claro);transition:.4s var(--ease)}
#ham span:first-child{top:5px}#ham span:last-child{bottom:5px}
body.menu #ham span:first-child{top:10px;transform:rotate(45deg)}
body.menu #ham span:last-child{bottom:11px;transform:rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:45;background:rgba(10,9,8,.97);display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:6px;clip-path:circle(0 at 100% 0);transition:clip-path .8s var(--ease)}
body.menu #menu{clip-path:circle(150% at 100% 0)}
#menu a{font-family:var(--serif);font-size:2.3rem;padding:6px 0;border-bottom:1px solid rgba(201,169,106,.14)}
#menu a small{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;color:var(--ouro);margin-right:14px;vertical-align:middle}

