/* Ubia — menu de página inteira (mesmo gesto do Instituto RP): a página encolhe pro canto e o menu aparece por baixo.
   Vale pra index e pras internas. */

/* topo: menu à esquerda, marca no meio, diagnóstico à direita */
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.head > .pill{justify-self:end}
.hamb{justify-self:start;display:flex;align-items:center;gap:.7rem;background:none;border:0;color:inherit;cursor:pointer;font:inherit;font-size:.72rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;padding:8px 0}
.hamb i{display:grid;gap:5px;width:22px}
.hamb i::before,.hamb i::after{content:"";display:block;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.hamb:hover i::after{transform:translateX(6px)}
@media (max-width:600px){.hamb span{display:none}.head .brand span{display:none}.head > .pill{padding:0 1.1rem}}

/* a casca: a página inteira mora aqui dentro, pra poder encolher */
.casca{position:relative;z-index:2;background:var(--preto);transition:transform .9s var(--ease)}
body.menu-aberto .casca{cursor:pointer}
body.menu-aberto .casca > *{pointer-events:none}

/* o menu fica por baixo da casca */
.menu{position:fixed;inset:0;z-index:1;background:var(--claro);color:var(--preto);padding:0 var(--pad);display:grid;grid-template-rows:80px 1fr;visibility:hidden;transition:visibility 0s .9s}
body.menu-aberto .menu{visibility:visible;transition:none}
.menu-topo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.menu-x{justify-self:start;display:flex;align-items:center;gap:.7rem;background:none;border:0;cursor:pointer;color:inherit;font:inherit;font-size:.72rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;padding:8px 0}
.menu-x i{position:relative;width:20px;height:20px}
.menu-x i::before,.menu-x i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;rotate:45deg}
.menu-x i::after{rotate:-45deg}
.menu-topo .brand small{color:#6b6b6b}
.menu-topo .pill{justify-self:end}
.menu nav{display:grid;align-content:start;padding-top:clamp(8px,3vh,32px)}
.menu nav a{position:relative;display:flex;align-items:baseline;gap:.9rem;width:max-content;max-width:100%;
  font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:1.04;font-size:clamp(30px,min(4.2vw,9.5vh),88px);
  opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease),color .3s}
.menu nav a small{font-size:.68rem;font-weight:300;letter-spacing:.2em;color:#838383;translate:0 -.2em}
.menu nav a::after{content:"";width:.16em;height:.16em;border-radius:50%;background:var(--lime);align-self:center;opacity:0;transition:opacity .3s}
.menu nav a[aria-current]::after{opacity:1}
.menu nav a:hover{color:#6b6b6b}
body.menu-aberto .menu nav a{opacity:1;transform:none}
body.menu-aberto .menu nav a:nth-child(1){transition-delay:.25s,.25s,0s}
body.menu-aberto .menu nav a:nth-child(2){transition-delay:.3s,.3s,0s}
body.menu-aberto .menu nav a:nth-child(3){transition-delay:.35s,.35s,0s}
body.menu-aberto .menu nav a:nth-child(4){transition-delay:.4s,.4s,0s}
body.menu-aberto .menu nav a:nth-child(5){transition-delay:.45s,.45s,0s}
/* sombra suave da miniatura da página (fica atrás dela, dentro do menu) */
.menu-sombra{position:absolute;border-radius:18px;box-shadow:0 24px 60px -12px rgba(11,11,11,.38),0 8px 18px -6px rgba(11,11,11,.22);opacity:0;transition:opacity .3s;pointer-events:none}
body.menu-aberto .menu-sombra{opacity:1;transition:opacity .5s .55s}
.menu-pe{position:absolute;left:var(--pad);bottom:var(--pad);display:grid;gap:.4rem;max-width:40%;font-weight:300;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#6b6b6b}
@media (max-width:760px){.menu-pe{display:none}.menu nav a{font-size:clamp(24px,7.4vw,56px);gap:.6rem}.menu-topo .brand span{display:none}}
@media (max-width:600px){.head,.menu-topo{grid-template-columns:auto 1fr auto;gap:16px}.head .brand,.menu-topo .brand{justify-self:start}.menu-topo .pill{display:none}}
@media (prefers-reduced-motion:reduce){.casca,.menu nav a{transition:none}}
html{scrollbar-gutter:stable}