/* ==========================================================================
   victoou.com — project.css   (escopo .page-project)
   Blocos, na ordem: hero · main-video · shorts · details · gallery ·
   testimonial · more-projects · work-toghether(sólido) · footer
   Cada bloco é independente e removível: data-block="<tipo>".
   ========================================================================== */

/* ==================================================== HERO (810px) ====== */
.page-project .hero {
  position: relative;
  min-height: min(810px, 100svh);
  height: 92svh;
  max-height: 1000px;
  display: flex;
  align-items: center;
  padding: clamp(180px, 27svh, 300px) 0 clamp(56px, 8svh, 80px);
}
.page-project .hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px 32px;
}
.page-project .hero__title {
  flex: 1 1 380px;
  font-weight: var(--w-medium);
  font-size: var(--fs-project-name);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--text);
}
.page-project .hero__aside { flex: 1 1 500px; max-width: 634px; }
.page-project .hero__copy {
  font-size: var(--fs-p-27);
  line-height: var(--lh-copy);
  text-align: justify;
  color: var(--text-soft);
}
.page-project .hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-top: 32px;
}
.page-project .hero__tags-label {
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  color: var(--text-dimmer);
}
.page-project .tag-pill {
  padding: 10px 20px;
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-pill);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  color: var(--text-soft);
}

/* ============================================ MAIN-PROJECT (876px) ====== */
.page-project .main-project { min-height: 876px; padding: 60px 0; }
.page-project .main-project__media {
  width: 100%;
  max-width: var(--media-w);
  aspect-ratio: 1274 / 717;
  margin-inline: auto;
  border-radius: var(--radius-card);
}

/* barra de métricas, alinhada à direita */
.page-project .metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
}
.page-project .metrics__eyebrow {
  font-weight: var(--w-medium);
  font-size: var(--fs-p-19);
  line-height: var(--lh-1);
  color: var(--text-dimmer);
}
.page-project .metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 22px;
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-pill);
  font-weight: var(--w-medium);
  font-size: var(--fs-p-26);
  line-height: var(--lh-1);
  color: var(--text-bright);
}

/* ================================================== SHORTS (933px) ====== */
.page-project .shorts { min-height: 933px; padding: 80px 0; }
.page-project .shorts__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px 32px;
}
.page-project .shorts__intro { flex: 1 1 420px; max-width: 514px; }
.page-project .shorts__title {
  font-weight: var(--w-bold);
  font-size: var(--fs-display-72);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-soft);
}
.page-project .shorts__copy {
  margin-top: 32px;
  font-size: var(--fs-p-24);
  line-height: var(--lh-copy);
  color: var(--text-gray);
}

.page-project .carousel { min-width: 0; overflow: hidden; }
.page-project .carousel__track { display: flex; gap: 24px; }

.page-project .shorts__carousel { flex: 1 1 500px; }
.page-project .short-card { flex: none; width: 375px; }
.page-project .short-card__media {
  position: relative;
  height: 667px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-project .short-card__media .img-ph { height: 100%; }
.page-project .metrics--vertical {
  position: absolute;
  right: 16px; bottom: 16px;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}
.page-project .metrics--vertical .metric-pill { height: 42px; font-size: var(--fs-p-19); }

.page-project .short-card__title {
  margin-top: 24px;
  font-weight: var(--w-bold);
  font-size: var(--fs-title-36);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-bright);
}
.page-project .short-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: var(--w-medium);
  font-size: var(--fs-p-19);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.page-project .short-card.is-active .short-card__link { color: var(--accent); }

/* ========================================= PROJECT-DETAILS (731px) ====== */
.page-project .project-details { min-height: 0; padding: 80px 0 32px; }
.page-project .project-details__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px 32px;
}
.page-project .project-details__title {
  flex: 0 0 auto;
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-p);
  color: var(--text-label);
}
.page-project .project-details__body { flex: 1 1 600px; max-width: 863px; }
.page-project .project-details__copy {
  font-size: var(--fs-title-36);
  line-height: var(--lh-copy);
  color: var(--text-details);
}

.page-project .tools { margin-top: 56px; }
.page-project .tools__label {
  font-weight: var(--w-medium);
  font-size: var(--fs-p-25);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.page-project .tools__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 15px;
  margin-top: 24px;
}
.page-project .tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 51px;
  padding: 0 22px;
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-pill);
  font-weight: var(--w-medium);
  font-size: var(--fs-p-25);
  line-height: var(--lh-1);
  color: var(--text-soft);
  white-space: nowrap;
}

/* ========================================== OTHERS-ASSETS (1541px) ====== */
.page-project .others-assets { min-height: 1541px; padding: 80px 0; }

.page-project .asset {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-project .asset .img-ph { height: 100%; border: 0; }
.page-project .asset::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.page-project .asset__title {
  position: absolute;
  left: 32px; bottom: 28px;
  z-index: 2;
  font-weight: var(--w-bold);
  font-size: var(--fs-display-72);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text);
}

.page-project .asset--wide {
  width: 100%;
  max-width: var(--media-w);
  aspect-ratio: 1274 / 717;
  margin-inline: auto;
}
.page-project .others-assets__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  max-width: var(--media-w);
  margin: 32px auto 0;
}
.page-project .asset--square { aspect-ratio: 621 / 646; }
.page-project .asset--square .asset__title { font-size: var(--fs-display-68); }

/* =============================================== DEPOIMENT (649px) ====== */
.page-project .depoiment {
  position: relative;
  min-height: 649px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.page-project .depoiment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg), transparent);
}
.page-project .depoiment__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  text-align: right;
}
.page-project .depoiment__inner > * { width: min(631px, 100%); }

.page-project .rating-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: auto;
  padding: 10px 20px;
  background: var(--surface-chip);
  border-radius: var(--radius-pill);
  font-weight: var(--w-medium);
  font-size: var(--fs-p-24);
  line-height: var(--lh-1);
  color: var(--text);
}
.page-project .rating-chip .icon { color: var(--accent); }

.page-project .depoiment__quote {
  font-weight: var(--w-bold);
  font-size: var(--fs-title-36);
  line-height: var(--lh-quote);
  color: var(--text);
}
.page-project .depoiment__signature {
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-signature);
  color: var(--text-label);
}

/* ============================================== LAST-DROPS (1156px) ===== */
.page-project .last-drops { min-height: 1156px; padding: 80px 0; }
.page-project .last-drops__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.page-project .last-drops__title {
  font-weight: var(--w-medium);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
}
.page-project .last-drops .carousel { width: 100%; overflow: hidden; margin-top: 64px; }
.page-project .last-drops .carousel__track {
  position: relative;
  display: block;
  height: var(--card-carousel-h);
}
.page-project .last-drops .carousel__track > .project-card {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--card-carousel-w) / -2);
  transform: translateX(calc(var(--slot, 0) * (var(--card-carousel-w) + 22px)));
  opacity: 0;
  filter: blur(11px);
  pointer-events: none;
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease);
}
.page-project .last-drops .carousel__track > .project-card.is-side { opacity: 0.25; }
.page-project .last-drops .carousel__track > .project-card.is-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
.page-project .last-drops .carousel__track > .project-card:not(.is-active) .project-card__cursor { display: none; }
.page-project .last-drops__controls {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   Vídeo principal — capa clicável que dá lugar ao player do YouTube.
   O iframe é criado só no clique (main.js), então a página não carrega o
   embed em toda visita.
   -------------------------------------------------------------------------- */
.page-project .main-project__media { position: relative; overflow: hidden; }
.page-project .main-project__poster {
  position: absolute;
  inset: 0;
  height: 100%;
  border: 0;
}
.page-project .main-project__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.page-project .video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding-left: 6px;
  border-radius: var(--radius-pill);
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(6px);
  color: var(--text);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.page-project .main-project__media:hover .video-play { background: var(--accent); }
.page-project .video-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.page-project .main-project__media.is-playing .video-play,
.page-project .main-project__media.is-playing .main-project__poster { display: none; }

/* fundo do depoimento: caminho relativo ao CSS, como no bloco de CTA. O
   .img-ph por baixo mantém o bloco legível enquanto a foto não existir. */
.page-project .depoiment { position: relative; }
.page-project .depoiment__bg {
  position: absolute;
  inset: 0;
  height: 100%;
  background-image: url('../img/testimonial-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-project .depoiment__inner { position: relative; z-index: 1; }

/* sem vídeo definido o play continua visível, em estado inerte, para o
   template poder ser revisado */
.page-project .video-play[disabled] { opacity: 0.55; cursor: default; }

/* --------------------------------------------------------------------------
   Hero — entrada: as duas linhas do título sobem uma após a outra, e a coluna
   da direita (parágrafo e tags) entra em cascata.
   -------------------------------------------------------------------------- */
.page-project .hero__title .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.page-project .hero__title.is-in .l { opacity: 1; transform: none; }
.page-project .hero__title.is-in .l:nth-of-type(2) { transition-delay: .12s; }

.page-project .hero__aside > * {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.page-project .hero__aside.is-in > * { opacity: 1; transform: none; }
.page-project .hero__aside.is-in > *:nth-child(2) { transition-delay: .16s; }
.page-project .hero__tags .tag-pill {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.page-project .hero__aside.is-in .tag-pill { opacity: 1; transform: none; }
.page-project .hero__aside.is-in .tag-pill:nth-of-type(2) { transition-delay: .08s; }
.page-project .hero__aside.is-in .tag-pill:nth-of-type(3) { transition-delay: .16s; }

/* categoria secundária: mesma pill, traço mais discreto */
.page-project .tag-pill--secondary {
  border-color: var(--stroke-card);
  color: var(--text-dim);
}

/* o número anima do zero até o valor: largura tabular evita o pill mudar de
   tamanho a cada quadro */
.page-project .metric-pill__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* play sem pastilha: apenas o triângulo */
.page-project .video-play {
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  backdrop-filter: none;
  color: var(--text);
}
/* branco em repouso, vermelho no hover */
.page-project .video-play { transition: color .4s var(--ease), transform .4s var(--ease); }
.page-project .main-project__media:hover .video-play,
.page-project .video-play:hover { background: none; color: var(--accent); }
.page-project .video-play svg { width: 88px; height: 88px; }

/* cards de short-form: mesma capa clicável do vídeo principal, em escala menor */
.page-project .short-card__media { position: relative; overflow: hidden; }
.page-project .short-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.page-project .video-play--short svg { width: 54px; height: 54px; }
.page-project .short-card__media.is-playing .video-play,
.page-project .short-card__media.is-playing .main-project__poster { display: none; }

/* --------------------------------------------------------------------------
   Cards de short-form — dois estados:
   · mouse off: capa, título e o subtítulo em cinza, sem métricas
   · hover: as métricas aparecem (com a contagem animando) e o link acende
   -------------------------------------------------------------------------- */
.page-project .metrics--vertical {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.page-project .short-card:hover .metrics--vertical,
.page-project .short-card:focus-within .metrics--vertical {
  opacity: 1;
  transform: none;
}
/* o link segue o estado do card, em vez de depender de .is-active */
.page-project .short-card:hover .short-card__link,
.page-project .short-card:focus-within .short-card__link { color: var(--accent); }

/* --------------------------------------------------------------------------
   Carrossel de short-form: a janela deixa aparecer um pedaço do próximo card,
   sinalizando continuidade. As setas ficam sobre o carrossel, como no bloco de
   clientes, e o card que sai desaparece em fade.
   -------------------------------------------------------------------------- */
/* o recorte vive no viewport interno: assim as setas, que ficam acima da
   janela, não são cortadas pelo overflow */
.page-project .shorts__carousel {
  position: relative;
  overflow: visible;
  padding-bottom: 74px;   /* espaço das setas, abaixo da janela */
}
.page-project .shorts__carousel .carousel__viewport {
  /* a janela mostra um card inteiro e uma fatia do próximo */
  width: 100%;
  overflow: hidden;
}
.page-project .shorts__carousel .carousel__track {
  width: 100%;            /* base das porcentagens = largura da janela */
  flex-wrap: nowrap;
  transition: transform 1s var(--ease);
}
.page-project .short-card {
  transition: opacity .8s var(--ease);
}
/* fora da janela: sai de cena em fade */
.page-project .short-card.is-out { opacity: 0; }
/* o próximo card fica meio visível, indicando que há mais conteúdo */
.page-project .short-card.is-peek { opacity: 0.45; }

.page-project .shorts__arrows {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 15px;
}
.page-project .shorts__arrows .arrow-btn { background: rgba(8, 8, 8, 0.72); backdrop-filter: blur(6px); }

/* O card é dimensionado pela janela para que uma fatia do próximo fique
   sempre à vista. Nada de max-width: um teto fixo venceria a conta e os cards
   voltariam a caber inteiros, matando a pista de continuidade. */
.page-project .shorts__carousel .short-card {
  flex: 0 0 calc((100% - 24px) / 1.22);
  width: calc((100% - 24px) / 1.22);
  min-width: 300px;
}
/* a altura acompanha a largura (vertical 9:16), em vez de ficar fixa */
.page-project .shorts__carousel .short-card__media { height: auto; aspect-ratio: 9 / 16; }

/* play dos shorts: branco em repouso, vermelho ao passar o mouse */
.page-project .video-play--short { color: var(--text); }
.page-project .short-card:hover .video-play--short,
.page-project .video-play--short:hover { color: var(--accent); }

/* carrossel mais contido: cards menores, ainda com a fatia do próximo à vista */
/* dois shorts inteiros na janela e uma fatia do terceiro: 2,18 cards mais os
   dois gaps que aparecem entre eles */
.page-project .shorts__carousel .short-card {
  flex-basis: calc((100% - 48px) / 2.18);
  width: calc((100% - 48px) / 2.18);
  min-width: 180px;
}
.page-project .shorts__carousel .carousel__viewport { max-width: 620px; }

/* intro do short-form: coluna de texto na largura ajustada */
.page-project .shorts__intro { width: 409px; max-width: 100%; flex: none; }
.page-project .shorts__copy { width: 435px; max-width: 100%; }

/* o corte da janela alinha com a borda das setas: o wrapper passa a ter a
   mesma largura da janela, então "right: 0" das setas cai exatamente onde o
   próximo short é cortado */
.page-project .shorts__carousel { max-width: 620px; }
.page-project .shorts__carousel .carousel__viewport { max-width: none; width: 100%; }

/* título do short acompanha o link no hover */
.page-project .short-card__title { transition: color .4s var(--ease); }
.page-project .short-card:hover .short-card__title,
.page-project .short-card:focus-within .short-card__title { color: var(--accent); }

/* parágrafo do short-form um pouco mais largo */
.page-project .shorts__intro { width: 470px; }
.page-project .shorts__copy { width: 470px; }

/* carrossel 20% maior, crescendo a partir do canto inferior esquerdo */
.page-project .shorts__carousel { max-width: 744px; }

/* --------------------------------------------------------------------------
   Ferramentas — pill com monograma. O texto é menor que o do bloco de
   detalhes, e a grade acomoda quantas ferramentas o projeto marcar.
   -------------------------------------------------------------------------- */
.page-project .tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 15px;
}
.page-project .tool-pill {
  gap: 12px;
  height: 46px;
  padding: 0 20px 0 14px;
  font-size: var(--fs-p-19);
  line-height: var(--lh-1);
  white-space: nowrap;
}
.page-project .tool-pill__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--stroke-card);
  border-radius: 5px;
  font-weight: var(--w-bold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-dim);
}
.page-project .tool-pill:hover .tool-pill__mark { color: var(--accent); border-color: var(--accent); }

/* preenchimento de baixo para cima no hover do pill de ferramenta */
.page-project .tool-pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.page-project .tool-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-700);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.page-project .tool-pill:hover::before { transform: none; }
.page-project .tool-pill:hover { color: var(--text); border-color: var(--stroke-soft); }
.page-project .tool-pill:hover .tool-pill__mark { color: var(--text); border-color: var(--stroke-soft); }

/* --------------------------------------------------------------------------
   Imagens complementares — o título aparece só no hover, com uma borda cinza
   escuro contornando o container.
   -------------------------------------------------------------------------- */
.page-project .asset {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  transition: border-color .45s var(--ease);
}
.page-project .asset:hover,
.page-project .asset:focus-within { border-color: var(--stroke-card); }

.page-project .asset__title {
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.page-project .asset:hover .asset__title,
.page-project .asset:focus-within .asset__title { opacity: 1; transform: none; }

/* foto do cliente como fundo do depoimento: o caminho vem de
   data-client-image (gravado pelo dashboard), então o CSS não fixa o arquivo */
.page-project .depoiment__photo[data-client-image],
.page-project .depoiment__bg[data-client-image] {
  background-image: var(--client-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   DEPOIMENT — node 185:447 "depoiment+description": bloco de 842x547 com 45px
   entre as três partes. Valores transcritos do arquivo.
   -------------------------------------------------------------------------- */
.page-project .depoiment__inner {
  align-items: flex-start;
  gap: 45px;
  text-align: left;
}
.page-project .depoiment__inner > * { width: min(842px, 100%); }

/* chip de avaliação: 168,247x69, raio 94,053, fundo #363636 a 30% */
.page-project .depoiment .rating-chip {
  width: auto;
  min-width: 168.247px;
  height: 69px;
  gap: 13.247px;
  padding: 11px 26px;
  background: rgba(54, 54, 54, 0.3);
  border-radius: 94.053px;
  font-weight: var(--w-medium);
  font-size: 31.793px;
  line-height: 33.028px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--text);
}
.page-project .depoiment .rating-chip .icon { width: 32px; height: 32px; }

/* citação: 48px bold, entrelinha 89,345% */
.page-project .depoiment__quote {
  font-size: var(--fs-manifesto);
  line-height: 0.89345;
}

/* assinatura: 493px, 64px bold, entrelinha 50px, tracking −1px */
.page-project .depoiment__signature {
  width: min(493px, 100%);
  font-size: 64px;
  line-height: 50px;
  letter-spacing: -1px;
  color: var(--text-label);
}

/* --------------------------------------------------------------------------
   DEPOIMENT — duas colunas: foto do cliente à esquerda (sangrando na borda da
   tela) e o depoimento à direita, sobre fundo preto.
   -------------------------------------------------------------------------- */
.page-project .depoiment {
  min-height: 0;
  padding: 0;
  background: var(--bg);
}
.page-project .depoiment::before { content: none; }

.page-project .depoiment__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* foto: ocupa a metade esquerda inteira, sem respiro na borda */
.page-project .depoiment__photo {
  width: 100%;
  height: 100%;
  min-height: 470px;
  border: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* coluna do depoimento */
.page-project .depoiment__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  width: min(620px, 100%);
  padding: 64px min(64px, 5vw) 64px min(72px, 6vw);
}
.page-project .depoiment__body > * { width: auto; }

/* chip compacto, como no arquivo */
.page-project .depoiment .rating-chip {
  min-width: 0;
  height: 40px;
  gap: 8px;
  padding: 0 18px;
  background: rgba(54, 54, 54, 0.55);
  border-radius: var(--radius-pill);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
.page-project .depoiment .rating-chip .icon { width: 20px; height: 20px; color: var(--accent); }
.page-project .rating-chip__max { font-size: 12px; color: var(--text-muted); }

/* citação com as aspas vermelhas destacadas */
.page-project .depoiment__quote {
  width: 100%;
  font-weight: var(--w-bold);
  font-size: clamp(24px, 1.85vw, 34px);
  line-height: 1.22;
  color: var(--text);
}
.page-project .depoiment__mark {
  color: var(--accent);
  font-weight: var(--w-bold);
  padding: 0 6px;
}

/* assinatura: nome em branco, canal em cinza abaixo */
.page-project .depoiment__signature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  letter-spacing: normal;
}
.page-project .depoiment__author {
  font-weight: var(--w-bold);
  font-size: clamp(28px, 2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-project .depoiment__role {
  font-weight: var(--w-regular);
  font-size: var(--fs-p-19);
  line-height: 1.2;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   DEPOIMENT — citação em bloco largo: a primeira frase em branco, o resto em
   cinza, aspa vermelha à esquerda. Abaixo, divisória fina e a assinatura com
   o avatar do cliente.
   -------------------------------------------------------------------------- */
.page-project .depoiment { padding: 120px 0 110px; }

.page-project .depoiment__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: var(--container);
  margin-inline: auto;
  padding: 0;
  text-align: left;
}
.page-project .depoiment__photo { display: none; }

.page-project .depoiment__quote {
  width: min(900px, 100%);
  font-weight: var(--w-bold);
  font-size: clamp(34px, 2.92vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-label);
  text-wrap: pretty;
}
.page-project .depoiment__mark {
  color: var(--accent);
  padding-right: 26px;
}
.page-project .depoiment__lead { color: var(--text); }
.page-project .depoiment__rest { color: var(--text-label); }

.page-project .depoiment__rule {
  display: block;
  width: min(900px, 100%);
  height: 1px;
  margin: 56px 0 28px;
  background: var(--stroke-card);
}

.page-project .depoiment__author-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.page-project .depoiment__avatar {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-card);
  background-image: var(--client-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--surface-1);
}
.page-project .depoiment__signature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto;
  letter-spacing: normal;
}
.page-project .depoiment__author {
  font-weight: var(--w-medium);
  font-size: var(--fs-p-19);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--text);
}
.page-project .depoiment__role {
  font-weight: var(--w-regular);
  font-size: var(--fs-ui-18);
  line-height: 1.2;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   DEPOIMENT — centralizado, com o mesmo acender palavra por palavra da
   lâmina 02 da home: o texto começa cinza e vai ficando branco no scroll.
   -------------------------------------------------------------------------- */
.page-project .depoiment__inner { align-items: center; text-align: center; }
.page-project .depoiment__quote { margin-inline: auto; }
.page-project .depoiment__rule { margin-inline: auto; }
.page-project .depoiment__author-row { justify-content: center; text-align: left; }
.page-project .depoiment__mark { padding-right: 14px; }

.page-project .reveal-word {
  color: var(--text-dimmer);
  transition: color .6s var(--ease);
}
.page-project .reveal-word.is-lit { color: var(--text); }

/* bloco centralizado na página, mas texto alinhado à esquerda e mais estreito */
.page-project .depoiment__inner { text-align: left; }
.page-project .depoiment__quote { width: min(760px, 100%); text-align: left; }
.page-project .depoiment__rule { width: min(760px, 100%); }
.page-project .depoiment__author-row { width: min(760px, 100%); justify-content: flex-start; }

/* --------------------------------------------------------------------------
   MORE PROJECTS — título à esquerda, pill à direita e as setas logo abaixo
   dele; o carrossel vem em seguida, com os cards laterais sangrando nas duas
   bordas da tela.
   -------------------------------------------------------------------------- */
.page-project .last-drops { min-height: 0; padding: 80px 0 96px; }
.page-project .last-drops__head {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 64px;
}
.page-project .last-drops__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.page-project .last-drops__aside .carousel__arrows { display: flex; gap: 15px; }
.page-project .last-drops .carousel { margin-top: 40px; }

/* cabeçalho centralizado, com o título em duas linhas */
.page-project .last-drops__head { align-items: center; justify-content: center; }

/* o carrossel de MORE PROJECTS usa o mesmo motor e as mesmas medidas do da
   home: cards de 882x562, vizinhos desfocados e só o central clicável */
.page-project .last-drops .carousel__track { height: var(--card-carousel-h); }
.page-project .last-drops .carousel__track > .project-card {
  width: var(--card-carousel-w);
  height: var(--card-carousel-h);
}

/* --------------------------------------------------------------------------
   Lightbox de vídeo — os shorts abrem no centro da página, em 9:16, sobre um
   fundo escuro; o vídeo principal continua tocando no próprio bloco.
   -------------------------------------------------------------------------- */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 48px;
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(10px);
}
.video-lightbox.is-open { display: grid; animation: lightbox-in .4s var(--ease) both; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.video-lightbox__stage {
  position: relative;
  width: min(420px, 92vw);
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 96px);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg);
}
.video-lightbox__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-lightbox__close {
  position: absolute;
  top: 24px; right: 28px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.video-lightbox__close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}

/* estado vazio dentro do lightbox (template sem vídeo definido) */
.video-lightbox__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--stroke-card);
  border-radius: var(--radius-card);
  font-family: var(--font-util);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dimmer);
}

/* --------------------------------------------------------------------------
   Assinatura do depoimento — o texto sobe de baixo para cima e o avatar entra
   com zoom-out, um pouco depois.
   -------------------------------------------------------------------------- */
.page-project .depoiment__author-row .depoiment__signature {
  opacity: 0;
  transform: translateY(0.7em);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: .1s;
}
.page-project .depoiment__author-row.is-in .depoiment__signature {
  opacity: 1;
  transform: none;
}
.page-project .depoiment__avatar {
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.page-project .depoiment__author-row.is-in .depoiment__avatar {
  opacity: 1;
  transform: none;
}

/* peça principal estática: projetos de branding e design não têm player, e a
   imagem-chave ocupa o mesmo lugar do vídeo */
.page-project .main-project__media--still {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}