/* Menu de navegacao no celular.
   O botao so aparece quando o nav da propria pagina foi escondido pelo CSS dela
   (600px na home e nas paginas legais, 860px nas paginas pilar). Quem decide e o
   nav-mobile.js, lendo o display computado: assim cada pagina mantem o seu ponto
   de quebra e nao precisamos repetir media query aqui. */

.p3-mob {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* alvo de toque de 44px, minimo confortavel */
  margin-right: -10px;         /* compensa a folga interna e alinha com a borda */
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.p3-mob-on .p3-mob { display: flex; }
.p3-mob span {
  display: block; width: 22px; height: 2px; margin: 0 auto;
  background: rgba(255,255,255,0.7);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), background 0.25s ease;
}
.p3-mob:hover span { background: #fff; }
.p3-mob[aria-expanded="true"] span { background: #fff; }
.p3-mob[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.p3-mob[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
.p3-mob:focus-visible { outline: 1px solid rgba(255,255,255,0.6); outline-offset: 3px; border-radius: 4px; }

/* O painel mora dentro do <header>, que e fixed em todas as paginas.
   top:100% o coloca colado embaixo do cabecalho sem precisar medir altura. */
.p3-painel {
  position: absolute; top: 100%; left: 0; right: 0;
  /* Teto so para menu longo em tela baixa; a altura normal e a do conteudo.
     Nao animamos max-height: alem de exigir a altura em pixel vinda do JS, e o
     tipo de animacao que forca layout a cada quadro. Opacidade e transform
     rodam na composicao e nao repintam a pagina. */
  max-height: 78vh;
  max-height: 78dvh;
  overflow-y: auto;
  /* Fundo opaco de proposito: com o preto translucido do cabecalho, o texto
     grande do hero atravessava o menu e competia com os links. */
  background: #000;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  /* pointer-events nao transiciona: garante que o painel pare de receber toque
     no mesmo instante do fechamento, e nao so quando a opacidade terminar. */
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.p3-painel[data-aberto="1"] {
  opacity: 1; visibility: visible; transform: none;
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}
.p3-painel nav { display: block; }
.p3-painel a {
  display: block;
  padding: 15px clamp(20px, 5vw, 40px);   /* acompanha a folga lateral do cabecalho */
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 400; color: rgba(255,255,255,0.55); text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: color 0.25s ease, background 0.25s ease;
}
.p3-painel nav a:first-child { border-top: 0; }
.p3-painel a[aria-current="page"] { color: #fff; }
.p3-painel a:hover, .p3-painel a:active { color: #fff; background: rgba(255,255,255,0.04); }
.p3-painel a:focus-visible { outline: 1px solid rgba(255,255,255,0.6); outline-offset: -3px; }

/* A chamada principal das paginas pilar sai do cabecalho no celular (nao cabe ao
   lado do botao) e reaparece aqui embaixo, com o mesmo peso que tem no desktop. */
html.p3-mob-on .head-cta { display: none; }
.p3-painel .p3-cta { padding: 16px clamp(20px, 5vw, 40px) 20px; border-top: 1px solid rgba(255,255,255,0.06); }
.p3-painel .p3-cta a {
  display: block; text-align: center; padding: 13px 18px;
  background: #fff; color: #000; border: 0; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: none;
}
.p3-painel .p3-cta a:hover { background: #fff; color: #000; }

/* Fecha o painel com a mesma barra tricolor que abre o site */
.p3-painel::after {
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, #555 0 33.333%, #fff 0 66.666%, #999 0);
}

/* Com o painel aberto o cabecalho assume o fundo solido que ele so teria apos
   rolar, senao o menu flutua descolado sobre a pagina. */
html.p3-aberto header {
  background: #000;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(255,255,255,0.1);
}
html.p3-aberto body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .p3-painel, .p3-mob span { transition: none; }
}