/* ==========================================================================
   O MENU COM DOIS LADOS: o Z e o iceberg

   Um símbolo só no alto do menu aberto. No site do Zé é o Z, em pé; na
   TOVAP é o iceberg, o mesmo Z girado 55 graus. Tocar nele gira o símbolo
   e troca o menu que aparece embaixo: o do Zé ou o da TOVAP. Assim os dois
   menus existem em qualquer página, e o giro conta que o consultor e a
   agência são a mesma coisa vista de outro ângulo.

   Este arquivo é o mesmo nos dois sites (zepaulogomes.com.br e tovap.com.br).
   ========================================================================== */
/* quando o menu é mais alto que a tela, ele rola em vez de cortar o símbolo lá em cima */
#containerMenuAberto{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
#containerMenuAberto{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
@supports (justify-content: safe center){ #containerMenuAberto{ justify-content:safe center; } }
@supports not (justify-content: safe center){ #containerMenuAberto{ -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; } }

#containerMenuAberto .menuMundo{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  width:100%; max-width:520px; margin:0 auto 18px; padding:0; -ms-flex-negative:0; flex-shrink:0;
}
/* o botão é só o símbolo e a legenda: sem caixa, sem fundo */
#containerMenuAberto .menuMundo__troca{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  width:auto; padding:6px 10px; margin:0; border:0; border-radius:0; background:transparent;
  cursor:pointer; -webkit-appearance:none; appearance:none; outline:none;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif; font-size:10px; letter-spacing:1.8px; text-transform:uppercase; line-height:1;
  color:#fff; text-shadow:none; box-shadow:none;
  -webkit-transition:color .35s ease; transition:color .35s ease;
}
#containerMenuAberto .menuMundo__troca:focus-visible .menuMundo__marca{ outline:2px solid #feec34; outline-offset:8px; border-radius:50%; }
/* o Zé é branco; a TOVAP é amarela: símbolo e legenda juntos */
#containerMenuAberto .menuMundo[data-lado="tovap"] .menuMundo__troca{ color:#feec34; }

/* o símbolo, grande e pulsando de leve: é o que pede o toque */
.menuMundo__marca{
  display:block; width:84px; height:84px; margin:0 0 12px;
  -webkit-animation:mundoPulsa 2.6s ease-in-out infinite; animation:mundoPulsa 2.6s ease-in-out infinite;
}
.menuMundo__z{
  display:block; width:100%; height:100%; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
  -webkit-transition:-webkit-transform .6s cubic-bezier(.22,.61,.36,1); transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
/* o lado da TOVAP: o Z girado 55 graus vira o iceberg */
.menuMundo[data-lado="tovap"] .menuMundo__z{ -webkit-transform:rotate(55deg); transform:rotate(55deg); }
/* passar o mouse só cresce: o giro é do clique, como um botão liga e desliga
   (girar no hover deixava a marca parecendo torta) */
@media (hover:hover){
  #containerMenuAberto .menuMundo__troca:hover .menuMundo__marca{ -webkit-animation:none; animation:none; -webkit-transform:scale(1.14); transform:scale(1.14); }
}
.menuMundo__marca{ -webkit-transition:-webkit-transform .3s ease; transition:transform .3s ease; }
@-webkit-keyframes mundoPulsa{ 0%,100%{ -webkit-transform:scale(1); } 50%{ -webkit-transform:scale(1.07); } }
@keyframes mundoPulsa{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* o nome no mesmo tamanho das palavras do menu; a linha de baixo só um pouco maior que antes */
.menuMundo__nome{ font-family:'Anton', Impact, sans-serif; font-size:26px; line-height:1.1; letter-spacing:.4px; color:inherit; margin:0 0 6px; text-transform:uppercase; text-shadow:none; -webkit-text-stroke:0; }
.menuMundo__rotulo{ display:block; color:inherit; opacity:.7; font-family:'Ubuntu','Open Sans',system-ui,sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
@media (max-width:900px){ .menuMundo__nome{ font-size:22px; } }
@media (max-width:600px){ .menuMundo__nome{ font-size:18px; } .menuMundo__rotulo{ font-size:11px; } }
.menuMundo__dica{ display:block; margin:10px 0 0; font-family:'Ubuntu','Open Sans',system-ui,sans-serif; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#5a5a52; text-shadow:none; }

/* as duas listas: só uma aparece; a primeira palavra volta a ter o traço em cima */
#containerMenuAberto .menuLista{ width:100%; -ms-flex-negative:0; flex-shrink:0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
#containerMenuAberto .menuLista[hidden]{ display:none; }
#containerMenuAberto .menuLista > a:first-child{ border-top:1px solid #2b2b2b; }

/* os azulejos dos livros (o site do Zé já tem este desenho; a TOVAP precisa dele aqui) */
#containerMenuAberto .menuApps{ display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; gap:14px; width:100%; max-width:520px; margin:26px auto 0; padding:0; }
#containerMenuAberto .menuApps .menuApp, #containerMenuAberto .menuApps .menuApp:first-child{
  display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  width:150px; max-width:none; height:118px; padding:14px 14px 10px; margin:0;
  background:#141414; border:1px solid #2b2b2b; border-radius:22px; opacity:1;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#9a9a90; line-height:1; text-shadow:none;
  -webkit-transition:background .25s ease, border-color .25s ease, -webkit-transform .25s ease; transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
#containerMenuAberto .menuApps .menuApp img{ display:block; width:100%; height:58px; -o-object-fit:contain; object-fit:contain; margin:0 0 10px; }
#containerMenuAberto .menuApps .menuApp__nome{ font-family:'Anton', Impact, sans-serif; font-size:18px; color:#fff; letter-spacing:.3px; margin-bottom:8px; text-align:center; }
#containerMenuAberto .menuApps .menuApp__rotulo{ display:block; }
#containerMenuAberto .menuApps .menuApp--ativo{ border-color:#feec34; }
@media (hover:hover){
  #containerMenuAberto .menuApps .menuApp:hover{ background:#feec34; border-color:#feec34; color:#000; -webkit-transform:translateY(-3px); transform:translateY(-3px); }
  #containerMenuAberto .menuApps .menuApp:hover img{ -webkit-filter:invert(1); filter:invert(1); }
}

/* a logo do canto também sabe girar: o Z vira iceberg ao passar o mouse */
#logoGarnizePropaganda.logoGira{ -webkit-transition:-webkit-transform .55s cubic-bezier(.22,.61,.36,1); transition:transform .55s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover){ .esquerda a:hover #logoGarnizePropaganda.logoGira{ -webkit-transform:rotate(55deg); transform:rotate(55deg); } }

@media (max-width: 560px){
  #containerMenuAberto .menuMundo{ margin-bottom:14px; }
  .menuMundo__marca{ width:76px; height:76px; margin-bottom:10px; }
  .menuMundo__dica{ font-size:9px; margin-top:8px; }
  #containerMenuAberto .menuApps{ gap:10px; margin-top:18px; }
  #containerMenuAberto .menuApps .menuApp{ width:calc(50% - 5px); height:96px; padding:10px 8px 8px; border-radius:16px; font-size:9.5px; letter-spacing:1.2px; }
  #containerMenuAberto .menuApps .menuApp img{ height:44px; margin-bottom:8px; }
}
@media (max-height:700px){
  .menuMundo__marca{ width:64px; height:64px; margin-bottom:8px; }
  .menuMundo__nome{ font-size:20px; }
  #containerMenuAberto .menuMundo{ margin-bottom:10px; }
  .menuMundo__dica{ margin-top:6px; }
}
@media (max-height:640px){
  #containerMenuAberto .menuApps .menuApp{ height:88px; }
  #containerMenuAberto .menuApps .menuApp img{ height:40px; margin-bottom:6px; }
}
@media (prefers-reduced-motion: reduce){
  .menuMundo__marca{ -webkit-animation:none; animation:none; }
  .menuMundo__z, #logoGarnizePropaganda{ -webkit-transition:none; transition:none; }
}