/* ════════════════════════════════════════════════════════════════
   overrides.css  —  Via Traço
   AJUSTES FINAIS GLOBAIS: botão flutuante WhatsApp, ícone Home no menu, correção de z-index do zoom, patch do viewer de catálogos (#cat-lb), link do logo no rodapé
   (Fatiado do antigo style.css, carregado na MESMA ORDEM em todas as
   páginas: style → viewer → menu → components → typography → overrides
   → [css da página] → responsive. Concatenação idêntica ao original.)
   ════════════════════════════════════════════════════════════════ */

/* ══ WHATSAPP FLOATING BUTTON ══════════════════════════════════════
   z-index: 850 — abaixo de #lb e #zoom-overlay
   O botão some naturalmente atrás do lightbox sem JS adicional.
════════════════════════════════════════════════════════════════ */
.wha-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 850;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(46,181,78,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wha-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(46,181,78,.45);
  color: #fff;
}
.wha-btn svg { display: block; }

/* ══ HOME ICON NO MENU ══════════════════════════════════════════════ */
.nav-home-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}
/* No desktop, o ícone usa a cor padrão do menu e fica verde no hover/active */
.nlinks a:has(.nav-home-icon):hover,
.nlinks a.active:has(.nav-home-icon) {
  color: var(--green);
}

@media (max-width: 900px) {
  .wha-btn { bottom: 20px; right: 16px; width: 48px; height: 48px; }
}

/* ══ CORREÇÃO FINAL: zoom sempre acima do lightbox ════════════════ */
#zoom-overlay,
body:not(.home) #zoom-overlay {
  z-index: 3000 !important;
}

#lb,
body:not(.home) #lb {
  z-index: 2000 !important;
}

#zoom-overlay.open {
  display: flex !important;
}


/* PATCH — Catálogos com viewer igual aos livros */
#cat-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 64px 0 40px;
  gap: 0;
}

#cat-lb.open { display: flex; }

#cat-lb-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  background: transparent;
  z-index: 20;
}

.cat-lb-logo {
  width: auto;
  height: 22px;
  display: block;
  object-fit: contain;
}

#catLbClose {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 36px;
  line-height: 1;
  color: rgba(0,0,0,.28);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
  flex-shrink: 0;
}

#catLbClose:hover { color: rgba(0,0,0,.8); }

#catLbPrev,
#catLbNext {
  flex: 0 0 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: default;
  padding: 0;
  pointer-events: none;
  position: static;
  top: auto;
  transform: none;
  font-size: inherit;
  color: inherit;
}

#catLbPrev .arr-btn,
#catLbNext .arr-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0,0,0,.22);
  transition: color .2s;
  pointer-events: auto;
}

#catLbPrev .arr-btn svg,
#catLbNext .arr-btn svg {
  width: 22px;
  height: 22px;
}

#catLbPrev .arr-btn:hover,
#catLbNext .arr-btn:hover { color: rgba(0,0,0,.75); }

#cat-lb-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  max-height: calc(100vh - 92px);
  overflow: hidden;
}

#catLbImg {
  flex: 0 1 auto;
  min-height: 0;
  max-width: 88%;
  max-height: calc(100vh - 258px);
  object-fit: contain;
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.12));
  transition: opacity .2s ease;
}

#cat-lb-caption {
  flex: 0 0 auto;
  text-align: center;
  max-width: 980px;
  width: 100%;
  padding: 0 24px;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}

#cat-lb-caption .lb-lbl {
  font-family: "Noto Sans", sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--ink);
  margin-bottom: 8px;
  white-space: normal;
  overflow-wrap: normal;
}

#cat-lb-caption .lb-counter {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  letter-spacing: .10em;
  color: var(--ink);
  margin-bottom: 10px;
}

#cat-lb-caption .lb-text {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: normal;
}

#catLbClose:focus,
#catLbClose:focus-visible,
#catLbPrev .arr-btn:focus,
#catLbPrev .arr-btn:focus-visible,
#catLbNext .arr-btn:focus,
#catLbNext .arr-btn:focus-visible {
  outline: none;
  box-shadow: none;
  background: none;
}

/* ══════════════════════════════════════════════════════════════════
   TELAS LARGAS — conteudo centralizado em TODO o site
   Em telas largas o conteudo vira uma coluna central (~1320px), alinhada
   com as grades de 1320 (catalogos, marcas). Abaixo de ~1408px nada muda.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .sec   { max-width: 1408px; margin-left: auto; margin-right: auto; }
  .about { max-width: 1408px; margin-left: auto; margin-right: auto; }
  footer {
    padding-left:  max(44px, calc((100% - 1408px) / 2));
    padding-right: max(44px, calc((100% - 1408px) / 2));
  }
}

/* Logo do rodapé agora é link para a Home — feedback sutil no hover */
footer .fl a { display: inline-block; cursor: pointer; }
footer .fl a .footer-logo-img { transition: opacity .2s; }
footer .fl a:hover .footer-logo-img { opacity: 1; }



/* ═══════════════════════════════════════════════════════════════
   Ajustes finais de caixa/legibilidade solicitados
   - Mantém textos editoriais em frase, sem forçar caixa alta.
   - Preserva nomes próprios escritos no HTML.
   ═══════════════════════════════════════════════════════════════ */
.cta-band h2,
.page-hero-band .sec-h,
.livros-page .lv-txt-headline,
.cat-page .sec-h,
.cat-page .cat-commercial-h,
.cat-page .iv-card__title,
.cat-page .cat-card-title,
.ic-page .sec-h,
.ic-page .ic-h,
.ic-page .ic-card__title,
.ic-page .icl-head h2,
body:not(.home) .sec-h {
  text-transform: none !important;
}

/* O texto editorial final deve ficar em frase, igual está escrito no HTML. */
.cta-band h2 {
  letter-spacing: .035em;
}

/* Cards da página Identidade visual e catálogos: nomes/títulos sem caixa alta artificial. */
.cat-page .iv-card__title,
.cat-page .cat-card-title {
  letter-spacing: .015em !important;
}

/* Identidade corporativa: nomes das marcas em frase, sem caixa alta artificial. */
.ic-page .ic-card__title {
  letter-spacing: .02em !important;
}