/* ============================================================
   COMAX — Visualizador do catálogo
   ============================================================ */

/* Leitor em tela cheia: a altura é distribuída pela cadeia flex
   (todos com min-height:0), nunca por calc() somando elementos —
   qualquer item novo na barra quebraria essa conta. */
.pagina-catalogo {
  background: var(--navy-800);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- Header -------------------------------------------------- */
.header--catalogo { position: sticky; }

.cat-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur) var(--ease);
}
.cat-link:hover { color: var(--yellow); }
.cat-link svg { width: 18px; height: 18px; }

.cat-peso {
  font-weight: 400;
  opacity: .7;
  font-size: 13px;
}

/* --- Leitor --------------------------------------------------- */
#visualizador {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.leitor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.leitor__palco {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 80px;
  min-height: 0;
}

/* A imagem é filha direta do palco, sem <figure> envolvendo. O palco
   tem altura definida pela cadeia flex, então max-height:100% resolve
   e a imagem se encaixa sozinha mantendo a proporção — nos dois
   sentidos, quando a altura limita e quando a largura limita.
   Com um wrapper de altura automática no meio a porcentagem era
   circular e a página ganhava faixas brancas. */
.leitor__folha {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .45);
  background: var(--white);
}

/* Modo ampliado: a folha ocupa a largura toda e a página rola */
.leitor.is-zoom .leitor__palco {
  align-items: flex-start;
  padding-inline: 0;
  overflow: auto;
}
.leitor.is-zoom .leitor__folha {
  border-radius: 0;
  max-width: none;
  max-height: none;
  width: min(1200px, 100%);
  height: auto;
}
.leitor.is-zoom .leitor__seta { display: none; }

/* Setas */
.leitor__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: rgb(21 26 46 / .75);
  backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.leitor__seta:hover { background: var(--red); }
.leitor__seta:disabled { opacity: .25; cursor: default; }
.leitor__seta:disabled:hover { background: rgb(21 26 46 / .75); }
.leitor__seta svg { width: 26px; height: 26px; }
.leitor__seta--ant { left: 16px; }
.leitor__seta--prox { right: 16px; }

/* --- Barra de controles --------------------------------------- */
.leitor__barra {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--navy-900);
  border-top: 1px solid rgb(255 255 255 / .08);
}

.leitor__contador {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgb(255 255 255 / .75);
}
.leitor__contador input {
  width: 64px;
  padding: 8px 10px;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: var(--white);
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 8px;
  -moz-appearance: textfield;
}
.leitor__contador input::-webkit-outer-spin-button,
.leitor__contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.leitor__botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: rgb(255 255 255 / .08);
  border-radius: 10px;
  transition: background var(--dur) var(--ease);
}
.leitor__botao:hover { background: rgb(255 255 255 / .16); }
.leitor__botao[aria-pressed="true"],
.leitor__botao[aria-expanded="true"] { background: var(--red); }
.leitor__botao svg { width: 18px; height: 18px; }

/* dica e CTA ficam nos cantos sem empurrar os controles do centro */
.leitor__dica {
  position: absolute;
  left: 20px;
  font-size: 13px;
  color: rgb(255 255 255 / .4);
}

.leitor__cta {
  position: absolute;
  right: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--yellow);
  transition: opacity var(--dur) var(--ease);
}
.leitor__cta:hover { opacity: .75; }

/* --- Tira de miniaturas ---------------------------------------- */
.tira {
  flex-shrink: 0;
  max-height: 170px;
  background: var(--navy-950);
  border-top: 1px solid rgb(255 255 255 / .08);
  padding: 16px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.tira[hidden] { display: none; }

.tira__lista {
  display: flex;
  gap: 12px;
  padding-inline: 20px;
  width: max-content;
}

.tira__item {
  flex: 0 0 auto;
  width: 84px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tira__item:hover { transform: translateY(-3px); }
.tira__item[aria-current="true"] { border-color: var(--yellow); }
.tira__item img {
  width: 100%;
  height: auto;
  display: block;
}
.tira__num {
  display: block;
  padding: 3px 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--navy-900);
  background: rgb(0 0 0 / .06);
}

/* --- Responsivo ------------------------------------------------ */
@media (max-width: 860px) {
  .cat-link { display: none; }
  .cat-peso { display: none; }
  .cat-acoes { gap: 12px; }

  /* no mobile o CTA da home ficava escondido; aqui ele é o download */
  .header--catalogo .btn--sm { display: inline-flex; }

  .leitor__palco { padding: 16px; }

  .leitor__seta {
    width: 44px; height: 44px;
    background: rgb(21 26 46 / .6);
  }
  .leitor__seta--ant { left: 6px; }
  .leitor__seta--prox { right: 6px; }

  .leitor__barra { gap: 8px; padding: 12px 14px; }
  .leitor__botao { padding: 10px 14px; font-size: 14px; }
  .leitor__botao span:not([data-zoom-texto]) { display: none; }

  .leitor__dica, .leitor__cta { display: none; }

  .tira__item { width: 64px; }
}

@media (max-width: 420px) {
  .leitor__botao { padding: 10px 12px; }
  .leitor__contador { font-size: 14px; }
  .leitor__contador input { width: 54px; padding: 8px 6px; }
}