/* ============================================================
   MENU MOBILE
   Abaixo de 620px o styles.css esconde a navegação inteira
   (.top nav{display:none}) e não havia substituto. Este arquivo
   traz o gatilho na barra e uma gaveta lateral com o menu todo.
   Carregado em todas as páginas, inclusive a home.
   ============================================================ */

/* ---------- gatilho ---------- */
.hamb{display:none;position:relative;z-index:120;
      width:44px;height:44px;padding:0;border-radius:13px;cursor:pointer;
      border:1px solid rgba(159,208,228,.24);background:rgba(3,49,102,.3);
      -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
      transition:background .3s,border-color .3s}
.hamb:hover,.hamb:focus-visible{background:rgba(111,180,210,.2);border-color:rgba(159,208,228,.55)}
.hamb:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
/* dois traços que viram X: o de cima gira, o de baixo cruza */
.hamb span{position:absolute;left:50%;width:19px;height:1.5px;border-radius:2px;
      background:#EAF4FA;translate:-50% 0;
      transition:top .3s cubic-bezier(.22,1,.36,1),rotate .3s cubic-bezier(.22,1,.36,1),
                 opacity .2s}
.hamb span:nth-child(1){top:17px}
.hamb span:nth-child(2){top:25px}
.hamb[aria-expanded="true"] span:nth-child(1){top:21px;rotate:45deg}
.hamb[aria-expanded="true"] span:nth-child(2){top:21px;rotate:-45deg}

/* ---------- gaveta ---------- */
.gaveta{position:fixed;z-index:115;inset:0 0 0 auto;
        width:min(380px,88vw);
        display:flex;flex-direction:column;
        padding:calc(env(safe-area-inset-top,0px) + 84px) 0 24px;
        background:rgba(0,10,26,.96);
        -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
        border-left:1px solid rgba(159,208,228,.14);
        box-shadow:-30px 0 70px -20px rgba(0,4,12,.7);
        translate:100% 0;
        transition:translate .42s cubic-bezier(.22,1,.36,1)}
.gaveta.aberta{translate:0 0}
.gaveta[hidden]{display:none}

.gaveta .rolo{flex:1;overflow-y:auto;overscroll-behavior:contain;
              padding:0 clamp(20px,6vw,28px)}
.gaveta nav{display:grid}
/* itens de primeiro nível */
.gitem{display:flex;align-items:center;justify-content:space-between;gap:12px;
       width:100%;font:inherit;font-size:17px;font-weight:400;letter-spacing:-.005em;
       text-align:left;text-decoration:none;cursor:pointer;
       color:rgba(234,244,250,.9);background:none;border:0;
       padding:17px 0;border-bottom:1px solid rgba(159,208,228,.1);
       transition:color .25s}
.gitem:hover,.gitem:focus-visible{color:#9FD0E4}
.gitem:focus-visible{outline:2px solid #9FD0E4;outline-offset:-2px;border-radius:6px}
.gitem svg{width:14px;height:14px;flex:0 0 auto;opacity:.55;
           transition:rotate .34s cubic-bezier(.22,1,.36,1),opacity .25s}
.gitem[aria-expanded="true"]{color:#fff}
.gitem[aria-expanded="true"] svg{rotate:180deg;opacity:1}
/* página atual */
.gitem[aria-current="page"]{color:#fff}
.gitem[aria-current="page"]::before{content:"";width:5px;height:5px;border-radius:50%;
       background:#6FB4D2;margin-right:10px;flex:0 0 auto}
.gitem[aria-current="page"]{justify-content:flex-start}

/* sublista de serviços */
.gsub{overflow:hidden;max-height:0;transition:max-height .44s cubic-bezier(.22,1,.36,1)}
.gsub > div{padding:6px 0 14px}
.glabel{margin:14px 0 4px;font-size:10.5px;font-weight:500;letter-spacing:.2em;
        text-transform:uppercase;color:rgba(111,180,210,.7)}
.gsub > div > .glabel:first-child{margin-top:6px}
.gsub a,.gsub span.indisp{display:block;padding:11px 0 11px 14px;
        font-size:14.5px;line-height:1.4;text-decoration:none;
        border-left:1px solid rgba(159,208,228,.16);
        color:rgba(214,232,244,.72);transition:color .25s,border-color .25s}
.gsub a:hover,.gsub a:focus-visible{color:#fff;border-left-color:#6FB4D2}
.gsub a:focus-visible{outline:2px solid #9FD0E4;outline-offset:-2px}
/* serviço ainda sem página: aparece, mas não finge ser link */
.gsub span.indisp{color:rgba(214,232,244,.34);cursor:default}

/* rodapé da gaveta */
.gpe{padding:20px clamp(20px,6vw,28px) 0;border-top:1px solid rgba(159,208,228,.12)}
.gcta{display:block;width:100%;font:inherit;font-size:15px;font-weight:500;cursor:pointer;
      color:#EAF4FA;padding:15px;border-radius:13px;
      border:1px solid rgba(159,208,228,.34);background:rgba(3,49,102,.44);
      transition:background .3s,border-color .3s,color .3s}
.gcta:hover,.gcta:focus-visible{background:rgba(111,180,210,.22);
      border-color:rgba(159,208,228,.62);color:#fff}
.gcta:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
.gzap{display:flex;align-items:center;justify-content:center;gap:9px;
      margin-top:12px;padding:13px;border-radius:13px;text-decoration:none;
      font-size:14px;color:rgba(214,232,244,.72);
      border:1px solid rgba(159,208,228,.16);transition:color .3s,border-color .3s}
.gzap:hover,.gzap:focus-visible{color:#fff;border-color:rgba(159,208,228,.44)}

/* trava a rolagem do fundo sem mexer no style inline que o modal usa */
html.menu-aberto,html.menu-aberto body{overflow:hidden}

/* A barra tem z-index 100 e cria contexto de empilhamento, então o
   z-index do gatilho não escapa dela: sem isso a gaveta cobre a barra
   e o X fica inalcançável. Com o menu aberto, a barra sobe. */
html.menu-aberto .top{z-index:130}

/* ---------- quando o menu entra em cena ---------- */
@media (max-width:620px){
  .hamb{display:block}
  .top{grid-template-columns:1fr auto auto;gap:12px}
}
@media (max-width:430px){
  .top .cta{display:none}
  .top{grid-template-columns:1fr auto}
}
@media (min-width:621px){
  .gaveta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gaveta,.gsub,.hamb span,.gitem svg{transition:none}
}