/* ════════════════════════════════════════════════════════════════
   projeto-catalogo.css  —  Via Traço
   Estilos ESPECÍFICOS das páginas individuais de catálogo
   (catalogos/*.html / body.project-page).
   Reaproveita o hero global (.page-hero-band/.sec/.sec-h) e usa
   classes próprias .proj-* para corpo, galeria e CTA. Não altera
   nenhum estilo global — só acrescenta classes novas.
   ════════════════════════════════════════════════════════════════ */

/* voltar */
.proj-back { display: inline-block; font-family: "Noto Sans", sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); text-decoration: none; margin-bottom: 22px; transition: color .2s; }
.proj-back:hover { color: var(--green); }

/* hero (ajuste fino sobre o page-hero-band: títulos de catálogo são longos;
   espelha a estética da página de catálogos — menos padding, sem borda) */
.proj-hero-band { padding: 60px 44px 30px; border-bottom: none; }
.proj-hero-band .sec-h { font-size: clamp(22px, 3vw, 34px); line-height: 1.2; margin-top: 12px; }

/* capa principal */
.proj-cover { max-width: 980px; margin: 20px auto 46px; padding: 0 40px; }
.proj-cover img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; object-position: center center; display: block; margin: 0 auto; }

/* corpo (coluna editorial) */
.proj-body { max-width: 720px; margin: 0 auto; padding: 0 40px; }
.proj-block { margin: 0 0 34px; }
.proj-h { font-family: "Noto Sans", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.proj-block p { font-family: "Noto Sans", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--ink); margin: 0; }

/* o que desenvolvemos */
.proj-services { border-top: 1px solid var(--rule); padding-top: 38px; }
.proj-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.proj-list li { font-family: "Noto Sans", sans-serif; font-weight: 300; font-size: 14px; line-height: 1.5; color: var(--ink); padding: 7px 0 7px 18px; position: relative; border-bottom: 1px solid var(--rule); }
.proj-list li:last-child { border-bottom: none; }
.proj-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

/* galeria — carrossel horizontal */
.proj-gallery { max-width: 980px; margin: 58px auto 0; padding: 0 40px; }
.proj-gallery-h { text-align: center; margin-bottom: 30px; }
.proj-carousel { position: relative; }
.proj-car__frame { position: relative; }
/* galeria editorial — sem moldura/bloco de card; imagem respira no branco */
.proj-car__viewport { overflow: hidden; background: transparent; }
.proj-car__track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.proj-car__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 52vh; max-height: 560px; cursor: zoom-in; padding: 0 6px; }
.proj-car__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.proj-car__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(255,255,255,.6); color: var(--ink2); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, opacity .2s; opacity: .5; }
.proj-carousel:hover .proj-car__arrow { opacity: 1; }
.proj-car__arrow:hover { background: #fff; color: var(--ink); }
.proj-car__arrow--prev { left: 4px; }
.proj-car__arrow--next { right: 4px; }
.proj-car__counter { position: absolute; bottom: 10px; right: 12px; z-index: 2; font-family: "Noto Sans", sans-serif; font-size: 11px; letter-spacing: .14em; color: var(--ink2); }
.proj-carousel.is-single .proj-car__arrow, .proj-carousel.is-single .proj-car__counter { display: none; }

/* lightbox próprio das páginas de catálogo */
#proj-lb { display: none; position: fixed; inset: 0; z-index: 950; background: rgba(20,19,18,.94); align-items: center; justify-content: center; }
#proj-lb.open { display: flex; }
.proj-lb__stage { display: flex; align-items: center; justify-content: center; width: 92vw; height: 88vh; overflow: hidden; }
.proj-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; cursor: zoom-in; user-select: none; }
.proj-lb__close { position: absolute; top: 18px; right: 22px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.proj-lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 0 18px; opacity: .8; transition: opacity .2s; }
.proj-lb__arrow:hover { opacity: 1; }
.proj-lb__arrow--prev { left: 8px; }
.proj-lb__arrow--next { right: 8px; }
.proj-lb__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-family: "Noto Sans", sans-serif; font-size: 13px; letter-spacing: .12em; opacity: .85; }

/* CTA final do projeto */
.proj-cta { max-width: 720px; margin: 84px auto 0; padding: 58px 40px; text-align: center; border-top: 1px solid var(--rule); }
.proj-cta h2 { font-family: "Noto Sans", sans-serif; font-weight: 200; font-size: 24px; line-height: 1.32; color: var(--ink); margin: 0 0 12px; }
.proj-cta p { font-family: "Noto Sans", sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--ink2); margin: 0 0 26px; }
.proj-cta-btn { 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; }
.proj-cta-btn:hover { background: var(--green); color: #fff; }

/* seções com âncora (Brasilidades) — evita ficar sob o menu fixo */
.proj-section { scroll-margin-top: 100px; }
.proj-section .proj-gallery { margin-top: 30px; }

/* ── Páginas de projeto: um único CTA forte (.proj-cta) ────────────
   O bloco global (cta-band) vira contato discreto, sem 2º título grande */
/* assinatura global (cta-band) preservada como fechamento único das páginas de projeto */