@import url("loja.css?v=20260718-058");

/* YOYONAUTAS V300.048 — cabeçalho, logo e menus padronizados
   Este arquivo deve ser carregado por último em todas as páginas públicas. */

.site-header {
  position: relative !important;
  z-index: 70 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 12px 3px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.site-logo-link {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
}

.site-header-logo,
.store-logo-img,
.site-logo-img,
.yoyonautas-logo-standard {
  display: block !important;
  position: static !important;
  width: 90% !important;
  max-width: 800px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  pointer-events: auto !important;
}

.site-header .mobile-menu { order: 2 !important; }

main,
.main-grid,
.main-content,
.screen,
.screen.active {
  margin-top: 0 !important;
}

@media (min-width: 901px) {
  #mobile-menu,
  .mobile-menu { display: none !important; }
}

@media (max-width: 900px) {
  html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .site-header {
    padding: 0 5px 2px !important;
  }

  /* O menu sempre vem primeiro no mobile, inclusive nos templates onde
     o logo aparece antes dele no HTML. */
  .site-header .mobile-menu,
  #mobile-menu,
  .mobile-menu {
    order: 1 !important;
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    z-index: 220 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 4px 1px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: transparent !important;
    transform: none !important;
  }

  .mobile-menu-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mobile-menu .menu-button,
  .mobile-menu .menu-button,
  #mobile-menu a,
  .mobile-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    box-sizing: border-box !important;
    font-size: clamp(8px, 2.05vw, 10px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    text-decoration: none !important;
  }

  .site-logo-link { order: 2 !important; }

  .site-header-logo,
  .store-logo-img,
  .site-logo-img,
  .yoyonautas-logo-standard {
    width: 90% !important;
    max-width: 800px !important;
  }

  /* Logo das páginas legadas (Home e Loja): imediatamente depois do menu. */
  .store-logo-wrap,
  .site-logo,
  .logo-wrap,
  .logo-container,
  main > .logo,
  #home > div:first-child {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .store-logo-wrap {
    margin-bottom: 7px !important;
  }

  main,
  .main-grid,
  .main-content,
  .screen,
  .screen.active,
  #home,
  #home > div:first-child {
    top: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .sidebar-left,
  .sidebar-right { display: none !important; }
}

/* ========================================================================== 
   V300.082 — MENU LATERAL DESKTOP MAIS PRESENTE E LEVEMENTE ELEVADO
   Aproveita melhor a altura disponível sem alterar o menu mobile.
   ========================================================================== */
@media (min-width: 901px) {
  .sidebar-left,
  .sidebar-right {
    top: 46% !important;
    transform: translateY(-50%) !important;
    gap: 10px !important;
  }

  .sidebar-left .menu-button,
  .sidebar-right .menu-button {
    min-height: 43px !important;
    padding: 11px 6px !important;
  }
}

@media (max-width: 520px) {
  .site-header { padding: 0 3px 1px !important; }

  .site-header .mobile-menu,
  #mobile-menu,
  .mobile-menu {
    padding: 1px 3px 0 !important;
    gap: 2px !important;
  }

  .mobile-menu-row { gap: 2px !important; }

  #mobile-menu .menu-button,
  .mobile-menu .menu-button,
  #mobile-menu a,
  .mobile-menu a {
    min-height: 27px !important;
    padding: 3px 1px !important;
    font-size: clamp(7.6px, 2.18vw, 9.2px) !important;
  }

  .site-header-logo,
  .store-logo-img,
  .site-logo-img,
  .yoyonautas-logo-standard {
    width: 90% !important;
    max-width: 90% !important;
  }
}

/* Glossário responsivo preservado. */
body.page-glossario .main-content {
  width: 100% !important;
  max-width: 1200px !important;
  padding-left: clamp(12px, 2vw, 28px) !important;
  padding-right: clamp(12px, 2vw, 28px) !important;
  box-sizing: border-box !important;
}
body.page-glossario .screen,
body.page-glossario .glossario-container { width:100% !important; max-width:none !important; box-sizing:border-box !important; }
body.page-glossario .glossario-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important; gap:12px !important; width:100% !important; padding:12px 0 20px !important; box-sizing:border-box !important; }
@media(max-width:820px){ body.page-glossario .glossario-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }
@media(max-width:520px){ body.page-glossario .glossario-grid{grid-template-columns:1fr !important;} }


/* ========================================================================== 
   V300.044 — CORREÇÃO DEFINITIVA DO LOGO NO MOBILE
   As regras abaixo têm especificidade suficiente para neutralizar os limites
   antigos de 275/340/420 px e os paddings de 134/148 px ainda presentes no
   style.css legado.
   ========================================================================== */
@media (max-width: 900px) {
  body:not(.page-home) .site-header,
  body:not(.page-home) header.site-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 5px 2px !important;
  }

  body:not(.page-home) .site-logo-link,
  body:not(.page-home) .site-header .site-logo-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.page-home) .site-header-logo,
  body:not(.page-home) .site-header .site-header-logo {
    display: block !important;
    width: 90% !important;
    max-width: 800px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
  }

  /* Elimina a antiga reserva de 134/148 px. Esta correção é especialmente
     importante na Loja, onde o logo faz parte do conteúdo principal. */
  body:not(.page-home) main,
  body.page-loja main,
  body[class*="page-loja"] main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.page-loja .main-grid,
  body.page-loja .main-content,
  body.page-loja .screen,
  body[class*="page-loja"] .main-grid,
  body[class*="page-loja"] .main-content,
  body[class*="page-loja"] .screen {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.page-loja .store-logo-wrap,
  body[class*="page-loja"] .store-logo-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 520px) {
  body:not(.page-home) .site-header-logo,
  body:not(.page-home) .site-header .site-header-logo,
  body.page-loja .store-logo-img,
  body[class*="page-loja"] .store-logo-img {
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ========================================================================== 
   V300.046 — LOGO GRANDE TAMBÉM NO DESKTOP DAS PÁGINAS INTERNAS
   Neutraliza a regra legada body:not(.page-home) .site-header-logo, que ainda
   limitava o logo interno a 420 px no desktop por possuir maior especificidade.
   ========================================================================== */
@media (min-width: 901px) {
  body:not(.page-home) .site-header,
  body:not(.page-home) header.site-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* Mesma referência real da Home e da Loja: .main-grid começa a 18 px. */
    padding: 18px 12px 3px !important;
  }

  body:not(.page-home) .site-logo-link,
  body:not(.page-home) .site-header .site-logo-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  body:not(.page-home) .site-header-logo,
  body:not(.page-home) .site-header .site-header-logo {
    display: block !important;
    width: 90% !important;
    max-width: 800px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
  }
}

/* ========================================================================== 
   V300.046 — UMA ÚNICA MEDIDA REAL PARA O LOGO NO DESKTOP
   A Home e a Loja estavam dentro de um conteúdo mais estreito, enquanto o
   cabeçalho interno media 90% da janela. Por isso 90% não produzia o mesmo
   tamanho visual. A partir daqui todos usam exatamente a mesma largura máxima.
   ========================================================================== */
@media (min-width: 901px) {
  body.page-home #home > div:first-child > img,
  body.page-loja .store-logo-img,
  body[class*="page-loja"] .store-logo-img,
  body:not(.page-home) .site-header-logo,
  body:not(.page-home) .site-header .site-header-logo,
  .site-header-logo,
  .store-logo-img,
  .site-logo-img,
  .yoyonautas-logo-standard {
    width: min(700px, 90vw) !important;
    max-width: 700px !important;
    height: auto !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
  }
}


/* ========================================================================== 
   V300.048 — ESPAÇAMENTO REAL DA HOME NAS PÁGINAS INTERNAS
   Na Home e na Loja, o logo está dentro de .screen, cujo padding superior
   efetivo no desktop é 40px. A regra abaixo atua somente no header modular
   das páginas internas. Home, Loja e mobile permanecem inalterados.
   ========================================================================== */
@media (min-width: 901px) {
  body:not(.page-home):not(.page-loja):not([class*="page-loja-"])
  header.site-header,
  body:not(.page-home):not(.page-loja):not([class*="page-loja-"])
  .site-header {
    padding-top: 40px !important;
  }
}

/* V300.052 — distância padronizada entre o logo e o conteúdo */
.site-header {
  margin-bottom: 12px !important;
}

.store-logo-wrap {
  margin-bottom: 12px !important;
}

.screen > h2:first-child,
.store-logo-wrap + h2 {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .site-header,
  .store-logo-wrap {
    margin-bottom: 8px !important;
  }
}

/* ========================================================================== 
   V300.066 — CABEÇALHO ÚNICO EM TODAS AS PÁGINAS
   O componente do logo não fica mais dentro do conteúdo da Home ou da Loja.
   Todas as páginas usam templates/public-header.php na mesma posição do HTML.
   ========================================================================== */
html body.page-home header.site-header,
html body header.site-header {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 40px 12px 3px !important;
  box-sizing: border-box !important;
}

html body header.site-header .yoyo-logo-stage {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  html body.page-home header.site-header,
  html body header.site-header {
    padding: 0 5px 2px !important;
    margin-bottom: 8px !important;
  }

  html body header.site-header .yoyo-logo-stage {
    margin-top: 7px !important;
    margin-bottom: 11px !important;
  }
}

/* ========================================================================== 
   V300.065 — COMPONENTE ÚNICO DO LOGO
   Home, Loja e páginas internas usam agora o mesmo HTML e estas mesmas regras.
   As classes antigas deixam de participar do tamanho e da centralização.
   ========================================================================== */
.yoyo-logo-stage {
  position: relative !important;
  left: auto !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 0 12px calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  transform: none !important;
  overflow: visible !important;
}

.yoyo-logo-link,
.yoyo-logo-link.logo-shine-host {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  transform: none !important;
}

.yoyo-logo-image {
  display: block !important;
  position: static !important;
  width: min(700px, 90vw) !important;
  min-width: min(700px, 90vw) !important;
  max-width: min(700px, 90vw) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.yoyo-logo-stage + h2 { margin-top: 0 !important; }

.yoyo-logo-link > .logo-shine-overlay {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: min(700px, 90vw) !important;
  min-width: min(700px, 90vw) !important;
  max-width: min(700px, 90vw) !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.site-header .yoyo-logo-stage { order: 1 !important; }

@media (max-width: 900px) {
  .yoyo-logo-stage {
    margin-top: 7px !important;
    margin-bottom: 11px !important;
  }
  .site-header .mobile-menu { order: 1 !important; }
  .site-header .yoyo-logo-stage { order: 2 !important; }
}

/* ========================================================================== 
   V300.061 — BRILHO AUTOMÁTICO RECORTADO NO LOGO
   Uma segunda cópia transparente recebe uma faixa de luz. Como a própria
   imagem é um PNG recortado, o brilho nunca aparece fora do logo.
   ========================================================================== */
.logo-shine-host {
  position: relative !important;
}

.logo-shine-overlay {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: 0 !important;
  width: min(700px, 90vw) !important;
  max-width: 700px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: .72;
  filter: brightness(2.35) contrast(1.08) saturate(.8);
  mix-blend-mode: screen;
  transform: translateX(-50%) !important;
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, rgba(0,0,0,.15) 45%, #000 49.5%, #000 50.5%, rgba(0,0,0,.15) 55%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, rgba(0,0,0,.15) 45%, #000 49.5%, #000 50.5%, rgba(0,0,0,.15) 55%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: yoyonautas-logo-shine 15s ease-in-out 4s infinite;
}

@keyframes yoyonautas-logo-shine {
  0%   { -webkit-mask-position: 150% 0; mask-position: 150% 0; opacity: 0; }
  1%   { opacity: .72; }
  10%  { -webkit-mask-position: -50% 0; mask-position: -50% 0; opacity: .72; }
  11%, 100% { -webkit-mask-position: -50% 0; mask-position: -50% 0; opacity: 0; }
}

@media (max-width: 900px) {
  .logo-shine-overlay {
    width: 90vw !important;
    max-width: 800px !important;
  }
}

/* V300.062 — mesma referência de tamanho e respiro em todo o mobile. */
@media (max-width: 900px) {
  body.page-home .yoyonautas-logo-standard,
  body.page-loja .store-logo-img,
  body[class*="page-loja-"] .store-logo-img,
  body:not(.page-home) .site-header-logo,
  .site-header-logo,
  .store-logo-img,
  .yoyonautas-logo-standard {
    width: 90vw !important;
    max-width: 800px !important;
  }

  body.page-home #home > div:first-child,
  body.page-loja .store-logo-wrap,
  body[class*="page-loja-"] .store-logo-wrap,
  .site-header .site-logo-link,
  body:not(.page-home) .site-header .site-logo-link,
  body:not(.page-home) header.site-header .site-logo-link {
    margin-top: 7px !important;
    margin-bottom: 11px !important;
  }
}

@media (max-width: 520px) {
  body.page-home .yoyonautas-logo-standard,
  body.page-loja .store-logo-img,
  body[class*="page-loja-"] .store-logo-img,
  body:not(.page-home) .site-header-logo,
  .site-header-logo,
  .store-logo-img,
  .yoyonautas-logo-standard,
  .logo-shine-overlay {
    width: 90vw !important;
    max-width: 90vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-shine-overlay { display: none !important; animation: none !important; }
}

/* ========================================================================== 
   V300.064 — CAIXA ÚNICA DO LOGO NO MOBILE
   Além da imagem, o contêiner passa a usar a largura real da tela. Isso evita
   que a coluna central da Home ou da Loja reduza o logo em algumas páginas.
   ========================================================================== */
@media (max-width: 900px) {
  body.page-home #home > div:first-child.logo-shine-host,
  body.page-loja .store-logo-wrap.logo-shine-host,
  body[class*="page-loja-"] .store-logo-wrap.logo-shine-host,
  body:not(.page-home) .site-header .site-logo-link.logo-shine-host {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    text-align: center !important;
  }

  body.page-home #home > div:first-child.logo-shine-host > .yoyonautas-logo-standard,
  body.page-loja .store-logo-wrap.logo-shine-host > .store-logo-img,
  body[class*="page-loja-"] .store-logo-wrap.logo-shine-host > .store-logo-img,
  body:not(.page-home) .site-header .site-logo-link.logo-shine-host > .site-header-logo,
  .logo-shine-host > .logo-shine-overlay {
    display: block !important;
    width: min(700px, 90vw) !important;
    min-width: min(700px, 90vw) !important;
    max-width: min(700px, 90vw) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
  }

  .logo-shine-host > .logo-shine-overlay {
    position: absolute !important;
    left: 50% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* V300 117 - menu mobile sempre em exatamente duas linhas */
@media (max-width:900px){
  .mobile-menu-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap:3px !important;
  }
  #mobile-menu .menu-button,
  .mobile-menu .menu-button,
  #mobile-menu a,
  .mobile-menu a{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    padding-left:1px !important;
    padding-right:1px !important;
    font-size:clamp(7px,1.85vw,9.5px) !important;
    white-space:nowrap !important;
  }
}


/* V300 120 - logo mobile com 80% da largura da tela */
@media(max-width:900px){
  body.page-home .yoyonautas-logo-standard,
  body.page-loja .store-logo-img,
  body[class*="page-loja-"] .store-logo-img,
  body:not(.page-home) .site-header-logo,
  .site-header-logo,.store-logo-img,.yoyonautas-logo-standard,
  .logo-shine-host>.logo-shine-overlay,
  body.page-home #home>div:first-child.logo-shine-host>.yoyonautas-logo-standard,
  body.page-loja .store-logo-wrap.logo-shine-host>.store-logo-img,
  body[class*="page-loja-"] .store-logo-wrap.logo-shine-host>.store-logo-img,
  body:not(.page-home) .site-header .site-logo-link.logo-shine-host>.site-header-logo{
    width:min(700px,80vw)!important;min-width:min(700px,80vw)!important;max-width:min(700px,80vw)!important;
  }
}
@media(max-width:520px){.logo-shine-overlay{width:80vw!important;max-width:80vw!important}}

/* ========================================================================== 
   V300.123 — ÍCONES VETORIAIS NOS MENUS PÚBLICOS
   Desktop: ícone acima do texto. Mobile: ícone compacto e visível; oculto apenas em telas muito estreitas.
   ========================================================================== */
.menu-button .menu-icon {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #d6b36a;
  filter: drop-shadow(0 0 4px rgba(214, 179, 106, .18));
  pointer-events: none;
}

.menu-button .menu-label {
  display: block;
  min-width: 0;
  pointer-events: none;
}

@media (min-width: 901px) {
  .sidebar-left .menu-button,
  .sidebar-right .menu-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .sidebar-left .menu-button .menu-icon,
  .sidebar-right .menu-button .menu-icon {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 900px) {
  #mobile-menu .menu-button,
  .mobile-menu .menu-button {
    gap: 2px !important;
  }

  #mobile-menu .menu-button .menu-icon,
  .mobile-menu .menu-button .menu-icon {
    width: 11px;
    height: 11px;
    stroke-width: 2;
  }
}

/* Oculta somente em telas realmente estreitas, quando o espaço pode ficar insuficiente. */
@media (max-width: 350px) {
  #mobile-menu .menu-button .menu-icon,
  .mobile-menu .menu-button .menu-icon {
    display: none !important;
  }
}