/* ============================================================
   Ajustes exclusivos da versão mobile do site.
   Este arquivo nunca altera o layout do desktop — o botão/menu
   novo daqui fica escondido por padrão e só aparece dentro do
   @media abaixo. style.css não é tocado por este arquivo.
   ============================================================ */

.pp-mobile-toggle{display:none}
.pp-mobile-menu{display:none}
.pp-mobile-overlay{display:none}

@media (max-width:768px){
  /* nav mais enxuta: some o botão duplicado (ele mora no menu) e sobra
     espaço de sobra pra logo + hambúrguer nunca cortarem */
  .pp-nav{padding:16px 20px}
  .pp-nav-inner{gap:12px}
  .pp-logo-img{height:38px}
  .pp-nav > .pp-nav-inner > .pp-btn-solid{display:none}

  .pp-mobile-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:40px;height:40px;flex:none;border:none;background:rgba(0,0,0,.06);border-radius:10px;
    cursor:pointer;padding:0;
  }
  .pp-mobile-toggle span{display:block;width:18px;height:2px;background:var(--navy-deep);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
  .pp-mobile-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .pp-mobile-toggle.is-open span:nth-child(2){opacity:0}
  .pp-mobile-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .pp-mobile-overlay{
    display:block;position:fixed;inset:0;background:rgba(10,14,30,.45);z-index:72;
    opacity:0;pointer-events:none;transition:opacity .3s ease
  }
  .pp-mobile-overlay.is-open{opacity:1;pointer-events:auto}

  .pp-mobile-menu{
    display:flex;flex-direction:column;gap:2px;
    position:fixed;top:0;right:0;bottom:0;width:min(80vw,340px);
    background:var(--bg);box-shadow:-18px 0 44px -20px rgba(0,0,0,.35);
    padding:100px 28px 40px;z-index:73;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .pp-mobile-menu.is-open{transform:translateX(0)}
  .pp-mobile-menu a{padding:15px 4px;font-weight:700;font-size:16px;color:var(--navy-deep);border-bottom:1px solid var(--border)}
  .pp-mobile-menu .pp-btn-solid{display:inline-flex;justify-content:center;text-align:center;margin-top:18px;border-bottom:none;padding:14px 24px}

  /* portais/atalhos: o container tinha 64px de respiro fixo de cada lado
     (isso só era reduzido em <section>, e aqui é uma <div>) e o texto do
     card não tinha limite de largura — os dois juntos empurravam o card
     pra fora da tela. */
  .pp-quicklinks{padding:0 20px}
  .pp-quicklink{padding:18px 18px;gap:12px}
  .pp-quicklink-badge{width:44px;height:44px;font-size:18px}
  .pp-quicklink > span:not(.pp-quicklink-badge):not(.pp-quicklink-arrow){min-width:0;flex:1 1 auto}
  .pp-quicklink-label{overflow-wrap:break-word}
  .pp-quicklink-arrow{margin-left:8px}
}

/* portais em 1 coluna só nas telas bem estreitas, pra não apertar o texto */
@media (max-width:480px){
  .pp-quicklinks-grid{grid-template-columns:1fr!important}
}