/* ════════════════════════════════════════════════════════════════
   identidade-visual-catalogos.css
   Estilos ESPECÍFICOS da página "Identidade visual e catálogos"
   (identidade-visual-e-catalogos.html / body.cat-page).
   Inclui: hero da página, seção Identidade visual, grid e cards,
   carrossel manual dos cards, contador, hover de revelação do texto,
   cards de catálogo (imagem inteira), lightbox #iv-lb com zoom, e o
   fallback mobile (hover:none).
   Movido do style.css (bloco final, 100% específico desta página) para
   modularizar sem alterar a cascata: este arquivo é carregado DEPOIS de
   style.css e ANTES de responsive.css — exatamente a posição que o bloco
   ocupava antes. As classes .iv-* / .cat-* são usadas só nesta página.
   ════════════════════════════════════════════════════════════════ */

/* Página "Identidade visual e catálogos" (cat-page): hero sem linhas e texto
   mais para cima — mesmo tratamento da Identidade Corporativa (.ic-page). */
.cat-page .page-hero-band { border-bottom: none; padding-top: 60px; padding-bottom: 30px; }
.cat-page .page-hero-band .sec { border-top: none; padding-top: 32px; padding-bottom: 32px; }
/* Rótulo de seção ("Catálogos") antes da grade — alinhado à grade (1320, centralizada) */
.cat-section-head { max-width: 1320px; margin: 0 auto 26px; }

/* ══════════════════════════════════════════════════════════════════
   SEÇÃO "IDENTIDADE VISUAL" (página Identidade visual e catálogos)
   Cards com carrossel MANUAL (setas) + texto que sobe no hover.
══════════════════════════════════════════════════════════════════ */
.iv-grid-section { padding: 22px 44px 30px; }
.iv-section-head { max-width: 1320px; margin: 0 auto 26px; }
.iv-grid { display: flex; flex-wrap: wrap; gap: 32px; max-width: 1320px; margin: 0 auto; }

.iv-card {
  position: relative;
  flex: 1 1 360px; max-width: 460px; height: 340px;
  background: var(--bg2); border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; cursor: pointer;
  transition: box-shadow .25s ease, transform .25s ease;
}
.iv-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.10); transform: translateY(-4px); }

.iv-car, .iv-car__frame { position: relative; width: 100%; height: 100%; }
.iv-car__track { display: flex; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; }
.iv-car__slide { flex: 0 0 100%; height: 100%; }
.iv-car__img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-select: none; }

.iv-car__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(28,27,24,.15); background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); padding: 0;
  transition: background .2s, transform .2s;
}
.iv-car__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.iv-car__arrow:active { transform: translateY(-50%) scale(.95); }
.iv-car__arrow--prev { left: 10px; }
.iv-car__arrow--next { right: 10px; }
.iv-car__counter {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font: 500 12px "Noto Sans", sans-serif; letter-spacing: .12em;
  color: #dadada; background: transparent; padding: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.iv-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #fff; padding: 18px 22px 20px; text-align: left;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 24px rgba(0,0,0,.07);
}
/* O texto sobe no hover SOMENTE quando o card mostra a 1ª imagem (.is-first) */
.iv-card.is-first:hover .iv-card__info { transform: translateY(0); }
.iv-card__cat { font: 300 10px "Noto Sans", sans-serif; letter-spacing: .2em; color: var(--green); text-transform: uppercase; margin-bottom: 6px; }
.iv-card__title { font: 200 22px "Noto Sans", sans-serif; color: var(--ink); margin: 0 0 6px; }
.iv-card__desc { font: 300 13px/1.5 "Noto Sans", sans-serif; color: var(--ink2); margin: 0; }

/* Conteúdo dos cards de CATÁLOGO dentro do overlay (reaproveita classes cat-card-*) */
.iv-card__info .cat-card-year { margin-bottom: 6px; }
.iv-card__info .cat-card-title { font: 200 19px "Noto Sans", sans-serif; color: var(--ink); margin: 0 0 4px; line-height: 1.15; }
.iv-card__info .cat-card-sub { font-size: 12px; margin: 0 0 8px; }
.iv-card__info .cat-card-desc {
  font-size: 13px; line-height: 1.5; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.iv-card__info .cat-card-cta { font-size: 11px; }
a.cat-card-cta { text-decoration: none; cursor: pointer; }

/* Cards de CATÁLOGO: mais altos e imagem inteira (sem cortar o conteúdo da capa) */
.cat-grid .iv-card { height: 440px; background: #fff; }
.cat-grid .iv-car, .cat-grid .iv-car__frame { background: #fff; }
.cat-grid .iv-car__img { object-fit: contain; object-position: center bottom; box-sizing: border-box; padding-bottom: 30px; }
/* Páginas internas (do 2º slide em diante): centralizadas no card. A CAPA (1º slide) mantém o alinhamento inferior acima. */
.cat-grid .iv-car__slide:not(:first-child) .iv-car__img { object-position: center center; padding-bottom: 0; }

/* ── Lightbox próprio da identidade visual (#iv-lb) ───────────────── */
#iv-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(18,18,18,.94); display: none; overflow: hidden; align-items: center; justify-content: center; }
#iv-lb.open { display: flex; }
#ivLbStage { max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
#ivLbImg { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; cursor: zoom-in; transform-origin: center center; }
#ivLbClose { position: absolute; top: 16px; right: 22px; z-index: 2; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .82; }
#ivLbClose:hover { opacity: 1; }
.iv-lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
.iv-lb__arrow:hover { background: rgba(0,0,0,.55); }
.iv-lb__arrow--prev { left: 24px; }
.iv-lb__arrow--next { right: 24px; }
#ivLbInfo { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; gap: 14px; justify-content: center; color: rgba(255,255,255,.85); font: 300 13px "Noto Sans", sans-serif; letter-spacing: .1em; }
#ivLbCounter { color: rgba(255,255,255,.5); }

/* ── Mobile / touch: sem hover, mostra o texto (layout empilhado) ── */
@media (hover: none), (pointer: coarse) {
  .iv-card { height: auto; }
  .cat-grid .iv-card { height: auto; }
  .iv-car, .iv-car__frame { height: 240px; }
  .iv-card__info { position: static; transform: none; box-shadow: none; border-top: 1px solid var(--rule); }
}

/* ── Bloco comercial no fim da página (antes do contato) ──────────── */
.cat-commercial { max-width: 1320px; margin: 0 auto; padding: 76px 40px 156px; text-align: center; }
.cat-commercial .sec { border: none; padding: 0; max-width: none; }
.cat-commercial-h { font-family: "Noto Sans", sans-serif; font-weight: 200; font-size: clamp(22px, 3vw, 32px); line-height: 1.25; color: var(--ink); margin: 16px auto 16px; max-width: 760px; }
.cat-commercial-p { font-family: "Noto Sans", sans-serif; font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--ink2); margin: 0 auto 14px; max-width: 620px; }
.cat-commercial-quote { font-family: "Noto Sans", sans-serif; font-weight: 300; font-style: italic; font-size: 15px; color: var(--ink); margin: 0 auto 26px; max-width: 560px; }
.cat-commercial-cta { display: inline-block; font-family: "Noto Sans", sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); text-decoration: none; border: 1px solid var(--green); padding: 13px 28px; transition: background .2s, color .2s; }
.cat-commercial-cta:hover { background: var(--green); color: #fff; }

/* ── Identidade Visual: proporção fixa 4:3 do card (escopado a .iv-grid) ──
   O card da vitrine passa a ter altura definida pelo frame 4:3, em vez da
   altura fixa de 340px. Mantém 3 cards lado a lado no desktop (flex 1 1 360px,
   max 460px) e não afeta .cat-grid (catálogos), .iv-card base, nem a Home.
   O .iv-card__info é position:absolute (bottom), então o overlay de texto
   no hover continua funcionando com height:auto. */
.iv-grid .iv-card { height: auto; }
.iv-grid .iv-car,
.iv-grid .iv-car__frame { aspect-ratio: 4 / 3; height: auto; }
.iv-grid .iv-car__img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center; background: #fff;
}

/* Responsivo: no touch, a regra global força .iv-car__frame:240px.
   Aqui reafirmamos a proporção 4:3 SOMENTE para .iv-grid, empilhando 1 por linha. */
@media (hover: none), (pointer: coarse) {
  .iv-grid .iv-card { height: auto; }
  .iv-grid .iv-car,
  .iv-grid .iv-car__frame { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 900px) {
  .iv-grid .iv-card { width: 100%; max-width: none; flex-basis: 100%; }
  .iv-grid .iv-car,
  .iv-grid .iv-car__frame { aspect-ratio: 4 / 3; height: auto; }
  .iv-grid .iv-car__img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
}

/* ── CATÁLOGOS: livros flutuando — card invisível, sem contador ── */
.cat-grid .iv-card {
  background: transparent; border: none; box-shadow: none;
}
.cat-grid .iv-card .iv-car__counter { display: none; }
/* Sem sombreamento fixo embaixo do card */
.cat-grid .iv-card__info { box-shadow: none; }
/* Hover: mesma subida, mas sem caixa branca/sombra retangular —
   a sombra acompanha só a silhueta do catálogo (flutuando na página) */
.cat-grid .iv-card:hover {
  background: transparent;
  box-shadow: none;
  transform: translateY(-6px);    /* animação de subir mantida */
}
.cat-grid .iv-card .iv-car__img { transition: filter .25s ease; }
.cat-grid .iv-card:hover .iv-car__img {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.16));
}

/* Logotipo como capa (ex.: Muhpan) — contido e menor, no padrão do card do Cícero Dias */
.iv-grid .iv-car__img--logo {
  object-fit: contain;
  background: #fff;
  box-sizing: border-box;
  padding: 16% 20%;
}