/* ==========================================================================
   Páginas de projeto — folha partilhada
   Nasceu dentro da página da Prozis; saiu para aqui quando apareceu a
   segunda, para não haver duas cópias a divergir uma da outra.
   ========================================================================== */
main{ position:relative; z-index:1;
    padding:calc(var(--nav-h) + 7vh) var(--gutter) clamp(48px,7vh,96px); }

  /* ---- cabeçalho do projeto ---------------------------------------------
     O título é a categoria, não o nome do cliente: é isso que o site está a
     mostrar — uma maneira de trabalhar, com trabalhos dentro. */
  .proj-head{ display:grid; gap:clamp(22px,3vw,44px);
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:end; }
  .proj-head h1{ font-weight:900; letter-spacing:-.055em; line-height:.9;
    font-size:clamp(3rem,9vw,7.4rem); text-wrap:balance; }
  .proj-meta{ display:flex; flex-wrap:wrap; gap:6px clamp(18px,2.4vw,36px);
    font-size:var(--step-small); color:var(--muted); }
  .proj-meta b{ font-weight:600; color:var(--ink); }
  .proj-lead{ font-size:var(--step-lead); line-height:1.55; color:var(--ink);
    max-inline-size:46ch; margin-block-start:clamp(26px,4vh,48px); }

  /* ---- vídeos -----------------------------------------------------------
     Moldura 16:9 com fundo escuro: enquanto o Vimeo carrega já não há um
     buraco branco no meio da página. */
  .vframe{ position:relative; aspect-ratio:16/9; background:#111;
    box-shadow:0 40px 90px -50px rgba(20,19,15,.5); overflow:hidden; }
  .vframe iframe{ position:absolute; inset:0; inline-size:100%; block-size:100%; border:0; }

  .reel-main{ margin-block-start:clamp(40px,7vh,88px); }

  .films{ margin-block-start:clamp(60px,10vh,130px);
    display:grid; gap:clamp(34px,5vw,64px) clamp(28px,4vw,56px);
    grid-template-columns:repeat(2,minmax(0,1fr)); }
  .film:nth-of-type(even){ margin-block-start:clamp(30px,6vh,80px); }   /* of-type: o h2 invisível não conta */
  .film h3{ margin-block-start:1em; font-size:clamp(1rem,1.5vw,1.3rem);
    font-weight:800; letter-spacing:-.02em; }
  .film p{ margin-block-start:.3em; font-size:var(--step-small); color:var(--muted); }

  /* ---- processo ---------------------------------------------------------- */
  .process{ margin-block-start:clamp(70px,12vh,150px);
    display:grid; gap:clamp(26px,4vw,64px);
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; }
  .process h2{ font-size:clamp(1.6rem,3.2vw,2.6rem); font-weight:900;
    letter-spacing:-.04em; line-height:1.05; max-inline-size:14ch; text-wrap:balance; }
  .process .body p + p{ margin-block-start:1.2em; }
  .process .body p{ line-height:1.7; color:var(--ink); max-inline-size:56ch; }
  .steps{ list-style:none; margin-block-start:clamp(28px,4vh,44px);
    display:grid; gap:0; border-block-start:1px solid var(--rule); max-inline-size:56ch; }
  .steps li{ display:grid; grid-template-columns:2.6rem 1fr; gap:14px;
    padding-block:clamp(12px,1.6vh,18px); border-block-end:1px solid var(--rule);
    font-size:var(--step-small); }
  .steps b{ font-weight:700; color:var(--ink); }
  .steps span{ color:var(--muted); }
  .steps i{ font-style:normal; color:var(--accent); font-weight:700; }

  /* ---- fecho: a conversa ------------------------------------------------- */
  .talk-cta{ margin-block-start:clamp(70px,12vh,150px);
    background:var(--night); color:var(--on-dark);
    padding:clamp(40px,7vw,86px);
    display:grid; gap:clamp(24px,3vw,48px);
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:end; }
  .talk-cta h2{ font-size:clamp(1.7rem,3.6vw,3rem); font-weight:900;
    letter-spacing:-.045em; line-height:1.05; max-inline-size:18ch; text-wrap:balance; }
  .talk-cta h2 em{ font-style:normal; color:var(--blue); }
  .talk-cta p{ color:rgba(244,242,236,.72); line-height:1.65;
    margin-block-start:1.1em; max-inline-size:48ch; }
  .talk-btn{
    justify-self:end; align-self:end;
    display:inline-flex; align-items:center; gap:.7em;
    background:var(--blue); color:#14130f; border:0; cursor:pointer;
    font:inherit; font-weight:700; font-size:var(--step-body);
    padding:1.05em 1.7em; text-decoration:none;
    transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease; }
  .talk-btn::after{ content:"↗"; transition:transform .35s cubic-bezier(.16,1,.3,1); }
  .talk-btn:hover, .talk-btn:focus-visible{ transform:translateY(-3px); background:#c4d7ee; }
  .talk-btn:hover::after{ transform:translate(3px,-3px); }

  /* ---- caixa da mensagem ------------------------------------------------- */
  .talk{ border:0; padding:0; background:none; margin:auto;
    inline-size:min(560px,94vw); color:var(--on-dark); }
  .talk::backdrop{ background:rgba(20,19,15,.55); backdrop-filter:blur(3px); }
  .talk-shell{ background:#121212; padding:clamp(26px,4vw,42px); }
  .talk-shell h2{ font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:800; letter-spacing:-.03em; }
  .talk-shell > p{ margin-block-start:.5em; color:rgba(244,242,236,.7);
    font-size:var(--step-small); line-height:1.6; }
  .talk-field{ display:block; margin-block-start:1.5rem; }
  .talk-field span{ display:block; font-size:var(--step-small); font-weight:600;
    margin-block-end:.5em; }
  .talk-field input, .talk-field textarea{
    inline-size:100%; font:inherit; color:var(--on-dark);
    background:#1c1c1c; border:1px solid rgba(244,242,236,.16);
    padding:.85em 1em; border-radius:2px; }
  .talk-field textarea{ min-block-size:8.5em; resize:vertical; }
  .talk-field input:focus-visible, .talk-field textarea:focus-visible{
    outline:2px solid var(--blue); outline-offset:1px; border-color:transparent; }
  .talk-field :user-invalid{ border-color:#e0705c; }
  .talk-actions{ display:flex; gap:12px; justify-content:flex-end;
    margin-block-start:1.8rem; }
  .talk-actions button{ font:inherit; font-weight:600; cursor:pointer;
    padding:.85em 1.4em; border-radius:2px; border:1px solid rgba(244,242,236,.2);
    background:none; color:var(--on-dark); }
  .talk-actions .send{ background:var(--blue); color:#14130f; border-color:var(--blue); font-weight:700; }
  .talk-note{ margin-block-start:1.2rem; font-size:var(--step-small);
    color:rgba(244,242,236,.55); }
  .talk-note a{ color:var(--blue); }

  @media (max-width:860px){
    .proj-head, .process, .talk-cta{ grid-template-columns:1fr; }
    .proj-head{ align-items:start; }
    .talk-btn{ justify-self:start; }
    .films{ grid-template-columns:1fr; }
    .film:nth-of-type(even){ margin-block-start:0; }
  }

/* ---- imagem de fecho -----------------------------------------------------
   Uma prancha só, à largura da coluna, a fechar o projeto. */
.closing{ margin:clamp(50px,9vh,110px) 0 0; }
.closing img{ display:block; inline-size:100%; block-size:auto;
  box-shadow:0 30px 70px -55px rgba(20,19,15,.5); }

/* ---- link para o Behance, com a marca deles ------------------------------ */
.beh{ display:inline-flex; align-items:center; gap:.7em;
  margin-block-start:clamp(22px,3vh,34px);
  text-decoration:none; color:var(--ink);
  font-size:var(--step-small); font-weight:600; }
.beh img{ inline-size:28px; block-size:28px; border-radius:6px; display:block;
  transition:transform .35s cubic-bezier(.16,1,.3,1); }
.beh span{ border-block-end:1px solid var(--edge); padding-block-end:2px;
  transition:color .3s ease, border-color .3s ease; }
.beh:hover img, .beh:focus-visible img{ transform:translateY(-2px); }
.beh:hover span, .beh:focus-visible span{ color:var(--accent); border-color:var(--accent); }

/* ---- créditos ------------------------------------------------------------ */
.credits{ margin-block-start:clamp(50px,8vh,100px);
  border-block-start:1px solid var(--rule); padding-block-start:clamp(20px,3vh,32px);
  display:grid; gap:14px clamp(24px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  font-size:var(--step-small); }
.credits div span{ display:block; color:var(--muted); }
.credits div b{ font-weight:600; }



/* ---- grelha de imagens de processo --------------------------------------
   Duas colunas de imagens com legenda. Nasceu para as pranchas do TED-Ed. */
.stills{ margin-block-start:clamp(50px,9vh,110px);
  display:grid; gap:clamp(26px,4vw,52px);
  grid-template-columns:repeat(2,minmax(0,1fr)); }
.still{ margin:0; }
.still img{ display:block; inline-size:100%; block-size:auto;
  box-shadow:0 30px 70px -55px rgba(20,19,15,.5); }
.still figcaption{ margin-block-start:.8em; font-size:var(--step-small);
  color:var(--muted); line-height:1.55; max-inline-size:44ch; }

@media (max-width:860px){
  .stills{ grid-template-columns:1fr; }
}

/* ---- título longo de uma só palavra -------------------------------------
   "myVisionTrack" não tem por onde partir: a 9vw transbordava a coluna e
   entrava por cima da ficha ao lado. Aqui a letra é dimensionada para caber. */
.proj-head.tight h1{ font-size:clamp(2.4rem,7.2vw,6.3rem); }

/* ---- nota lateral: a definição curta, ao lado de uma etiqueta ------------
   Mesma anatomia do bloco "o que é motion" da página inicial. */
.aside-note{ margin-block-start:clamp(34px,5vh,60px);
  display:grid; gap:clamp(10px,1.4vw,24px);
  grid-template-columns:minmax(0,.55fr) minmax(0,1.6fr); align-items:start; }
.aside-label{ font-size:var(--step-small); font-weight:600; color:var(--blue-deep); }
.aside-note p + p{ line-height:1.7; color:var(--ink); max-inline-size:56ch; }

@media (max-width:860px){
  .aside-note{ grid-template-columns:1fr; }
}