/* ============================================================
   NARDY LUZ — Vitrine de projetos (seção "Áreas de atuação")
   Janela única que passa os projetos sozinha, deslizando lateralmente.
   Sem ampliação/tela cheia — só a vitrine. Usa as variáveis de
   assets/css/style.css
   ============================================================ */

/* ------------------------------------------------------------
   BLOCO
   ------------------------------------------------------------ */
.pf {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px dashed rgba(13, 13, 13, .16);
}
.pf-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; margin-bottom: 1.1rem;
}
.pf-head-txt { max-width: 620px; }
.pf-head-txt h3 {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.02em; color: #0d0d0d;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; margin-bottom: .5rem;
}
.pf-head-txt h3 .amber { color: #b8790a; }
.pf-head-txt p { font-family: var(--serif); font-size: .93rem; line-height: 1.6; color: #4d4d4d; }

/* chips: só aparecem onde não há hover (toque) — no desktop quem filtra
   é o próprio card de área */
.pf-chips { display: none; flex-wrap: wrap; gap: .45rem; }
.pf-chip {
  cursor: pointer; font-family: var(--disp); font-size: .76rem; font-weight: 600;
  color: #4d4d4d; background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(13, 13, 13, .14); border-radius: 999px; padding: .44rem .85rem;
  transition: color .2s, background .2s, border-color .2s;
}
.pf-chip.on { color: #0d0d0d; background: var(--amber); border-color: var(--amber); }

/* card de área destacado enquanto sua vitrine está no ar */
.service.pf-ativo { background: #faf8f4; box-shadow: inset 0 0 0 1px rgba(250, 179, 39, .45); }
.service.pf-ativo::before { transform: scaleY(1); }
.service.pf-ativo::after { opacity: 1; }
.service[data-pf-area] { cursor: default; }

/* ------------------------------------------------------------
   VITRINE
   ------------------------------------------------------------ */
.pf-vitrine {
  --pf-h: clamp(300px, 42vh, 420px);
}

/* ---- palco ---- */
/* a maioria das pranchas está em ~1,414:1 (padrão ISO A, papel técnico);
   a janela usa essa mesma proporção — em vez de esticar até 100% da coluna
   e sobrar faixa vazia nas laterais (object-fit:contain letterboxing),
   ela se estreita para casar com a imagem. min(100%, ...) evita que passe
   da largura da coluna em telas estreitas. */
.pf-stage {
  position: relative; display: block; overflow: hidden;
  width: min(100%, calc(var(--pf-h) * 1.417));
  height: var(--pf-h);
  margin: 0 auto;
  border-radius: var(--r); border: 1px solid rgba(13, 13, 13, .12);
  background: linear-gradient(150deg, #fbfaf7, #e9e6df);
  box-shadow: 0 26px 54px -26px rgba(13, 13, 13, .45);
}

/* as duas camadas de imagem: a que sai desliza para um lado,
   a que entra desliza a partir do outro */
.pf-layer {
  position: absolute; inset: 0; z-index: 1;
  transform: translateX(0);
  transition: transform .65s var(--ease);
  will-change: transform;
}
.pf-layer.on { z-index: 2; }
.pf-layer.esq { transform: translateX(-100%); }
.pf-layer.dir { transform: translateX(100%); }
.pf-layer.sem-anim { transition: none; }
.pf-layer img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* véu só na faixa da legenda, para o texto ficar legível sobre a prancha */
.pf-veil {
  position: absolute; inset: auto 0 0 0; height: 52%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(9, 9, 10, .3) 38%, rgba(9, 9, 10, .88));
}

.pf-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: block;
  padding: 1.1rem clamp(1rem, 2.2vw, 1.7rem) 1.3rem; text-align: left;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}
.pf-cap-area {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal); margin-bottom: .3rem;
}
.pf-cap-name {
  display: block; font-family: var(--disp); font-weight: 700; color: #fff;
  font-size: clamp(1rem, 1.9vw, 1.32rem); line-height: 1.2; margin-bottom: .4rem;
}
.pf-cap-desc {
  display: block; font-family: var(--serif); font-size: .88rem; line-height: 1.55;
  color: rgba(255, 255, 255, .8); max-width: 60ch;
}
.pf-cap-tag {
  display: inline-block; margin-top: .7rem; font-family: var(--mono); font-size: .63rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
  border: 1px solid rgba(250, 179, 39, .45); background: rgba(250, 179, 39, .12);
  padding: .2rem .55rem; border-radius: 6px;
}

/* setas de navegação manual — só aparecem no hover do palco */
.pf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; cursor: pointer;
  width: 38px; height: 52px; display: grid; place-items: center;
  color: #fff; background: rgba(13, 13, 13, .45);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  opacity: 0; transition: opacity .25s, background .2s, border-color .2s, color .2s;
}
.pf-stage:hover .pf-arrow, .pf-arrow:focus-visible { opacity: 1; }
.pf-arrow:hover { background: rgba(13, 13, 13, .78); border-color: rgba(250, 179, 39, .6); color: var(--amber); }
.pf-arrow svg { width: 18px; height: 18px; }
.pf-arrow.prev { left: .6rem; }
.pf-arrow.next { right: .6rem; }
.pf-arrow.next svg { transform: rotate(180deg); }

/* contador */
.pf-count {
  position: absolute; top: .8rem; right: .9rem; z-index: 5;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: rgba(255, 255, 255, .88);
  background: rgba(13, 13, 13, .45); border: 1px solid rgba(255, 255, 255, .14);
  padding: .22rem .5rem; border-radius: 6px;
}

/* barra de tempo até a próxima imagem */
.pf-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 5;
  background: rgba(255, 255, 255, .16);
}
.pf-bar i { display: block; height: 100%; width: 0; background: var(--amber); }
.pf-bar.run i { animation: pfBar var(--pf-dur, 4200ms) linear forwards; }
@keyframes pfBar { from { width: 0 } to { width: 100% } }

/* ---- nota ---- */
.pf-note {
  display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem;
  font-family: var(--disp); font-size: .76rem; color: #6b6259;
}
.pf-note svg { width: 15px; height: 15px; flex: none; color: #1f7a7e; }

/* ------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .pf-vitrine { --pf-h: clamp(230px, 42vh, 320px); }
  .pf-cap { padding: .9rem 1rem 1.1rem; }
  .pf-cap-desc { display: none; }
  .pf-arrow { width: 34px; height: 46px; }
}

/* sem hover (toque): o filtro passa a ser pelos chips e as setas ficam sempre visíveis */
@media (hover: none) {
  .pf-chips { display: flex; }
  .pf-arrow { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-layer { transition: none; }
  .pf-bar { display: none; }
}