/* Modelo PROJETO (item de portfólio): mais leve que o case, com o mesmo cabeçalho, rodapé, contato e linguagem visual.
   Páginas: _paginas/projeto-iba.html, projeto-blum-filmes.html, projeto-abeeolica.html.
   Carregado depois do previa.css e do previa-case.css (reaproveita .case-topo, .vitrine-real.mockup-margem, .selo-cliente,
   .lista-ponto, .faq-leia, .mini-t e .chips-case). Escrito do celular para cima: base 390, depois 621, 821, 981 e 1100.

   Blocos, na ordem:
   1. Topo (hero): trilha Início / Cases / {nome}; sobretítulo "Projeto · {tipo}"; H1 com o termo de busca; resposta de 40 a 60
      palavras; botão do contato (data-desafio) + "Ver o site no ar" (externo, rel="noopener"); mockup real navegador + celular.
      Embaixo, a ficha em faixa: Setor (link para o setor), Ano, Plataforma e Entregas (link para a página de serviço).
      No case, a ficha é um cartão no B2; no projeto ela sobe para o topo e o projeto se entende numa tela só.
   2. O que fizemos (claro): H2 de duas frases e, ao lado, 3 a 5 itens concretos da ficha de fatos. O depoimento (se houver,
      com a marca P31) fica embaixo do H2, na coluna da esquerda, no mesmo .depo dos cases; sem depoimento, a coluna fica só com o H2.
   3. No ar (papel, opcional): 2 telas reais do site e, na mesma linha, "Outros projetos" (pílulas). Sem as telas, o bloco
      fica só com as pílulas.
   Depois, <!--@CONTATO-->. Sem números, sem notas de velocidade, sem FAQ e sem data visível (só o ano, na ficha). */

.pg-projeto .sec{padding-block:clamp(40px,5vw,64px)}
/* H2 dos blocos 2 e 3 um degrau abaixo do case (a página é curta; o contato compartilhado mantém o dele) */
.pj-fizemos .h2,.pj-noar .h2{font-size:clamp(1.6rem,2.35vw,2.05rem)}

/* ---------- 1. topo ---------- */
.pj-topo .caixa{row-gap:clamp(24px,3vw,34px);padding-bottom:clamp(32px,4vw,52px)}
.pj-topo .acoes .btn-s{background:transparent}
.pj-ext{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* desktop: o mockup ganha mais largura que no case (no projeto, o site é a prova principal) */
@media (min-width:981px){
  .pj-topo .caixa{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);column-gap:clamp(32px,4vw,56px)}
  /* a imagem tem 2,5% de margem transparente dos lados: a figura avança essa margem sobre o respiro da direita,
     para o celular fechar na mesma linha da ficha e do menu */
  .pj-topo .vitrine-real{max-width:660px;width:102.6%;margin-right:-2.6%;justify-self:end}
}

/* ficha em faixa, no pé do topo */
.pj-ficha{grid-column:1 / -1;padding-top:20px;border-top:1px solid var(--linha)}
.pj-ficha dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.pj-ficha dl > div{min-width:0}
.pj-ficha .pj-f-largo{grid-column:1 / -1}
.pj-ficha dt{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.pj-ficha dd{margin:5px 0 0;font-size:15px;line-height:1.45;color:var(--titulo);text-wrap:pretty}
.pj-ficha dd a{color:var(--roxo);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pj-ficha dd a:hover{text-decoration-thickness:1.5px}
.pj-ficha dd small{display:block;margin-top:2px;font-size:inherit;color:var(--fg2)}  /* complemento do setor em linha própria (sem "·" órfão no celular) */
.pj-ficha .lista-ponto li{white-space:normal}  /* itens longos ("UX, wireframe e layout") podem quebrar */
.pj-ficha .lista-ponto{text-wrap:balance}  /* entregas em linhas parecidas, sem um item sozinho na última */
.pj-ficha .lista-ponto a{white-space:nowrap}  /* o link de serviço não parte ("SEO / on-page", "Site / institucional") */
/* celular (até 620 px): as entregas viram lista, uma por linha, sem o ponto do meio, para o dedo acertar o link
   (Felipe, 06/10/2026, pergunta 62). Mesmas medidas da lista de "Soluções" da ficha dos cases (.ficha-case, no previa-case.css):
   cada linha tem cerca de 40 px e o link responde na linha toda (o ::after do link cobre o <li>). A lista devolve em cima e
   embaixo o respiro do primeiro e do último item, e a ficha fecha à mesma distância de antes. De 621 px para cima nada muda */
@media (max-width:620px){
  .pj-ficha .lista-ponto{display:grid;margin-block:-4px -9px;text-wrap:pretty}
  .pj-ficha .lista-ponto li{position:relative;display:block;padding:9px 0}
  .pj-ficha .lista-ponto li:not(:last-child)::after{content:none}
  .pj-ficha .lista-ponto a::after{content:"";position:absolute;inset:0}
}
@media (min-width:821px){
  /* três células (setor, ano, entregas): a linha "Plataforma" saiu em 01/10/2026 (sem nome de tecnologia na página);
     setor e ano mantêm a largura de antes e as entregas ficam com o resto, sem coluna vazia */
  .pj-ficha dl{grid-template-columns:minmax(0,1.2fr) minmax(0,.5fr) minmax(0,3.3fr);gap:0}
  .pj-ficha .pj-f-largo{grid-column:auto}
  .pj-ficha dl > div{padding-inline:22px;border-left:1px solid var(--linha)}
  .pj-ficha dl > div:first-child{padding-left:0;border-left:0}
  .pj-ficha dl > div:last-child{padding-right:0}
}

/* ---------- 2. o que fizemos (+ depoimento) ---------- */
.pj-grade{display:grid;gap:28px;grid-template-areas:"cab" "lista" "depo"}
.pj-cab{grid-area:cab}
.pj-lista{grid-area:lista;display:grid;align-content:start;counter-reset:pj;border-bottom:1px solid var(--linha)}
.pj-lista li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding:14px 0;border-top:1px solid var(--linha);font-size:16px;line-height:1.5;color:var(--fg2);counter-increment:pj;text-wrap:pretty}
.pj-lista li::before{content:counter(pj,decimal-leading-zero);padding-top:3px;font:700 13px/1.4 var(--fonte);font-variant-numeric:tabular-nums;color:var(--acento)}
.pj-lista b{color:var(--titulo);font-weight:700}
/* depoimento: o componente único .depo do previa-case.css (cartão branco com foto redonda, igual ao dos cases), na coluna do H2 */
.pj-grade > .depo{grid-area:depo}
@media (min-width:981px){
  .pj-grade{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;grid-template-areas:"cab lista" "depo lista";column-gap:clamp(40px,5.5vw,80px);row-gap:30px;align-items:start}
  .pj-lista{margin-top:35px}  /* o fio de cima da lista na altura do H2 (35 px = altura do sobretítulo com a margem) */
  .pj-lista li{font-size:16.5px}
}

/* ---------- 3. no ar: telas e outros projetos ---------- */
.pj-galeria{display:grid;gap:24px;margin-top:26px}
.pj-tela{display:grid;align-content:start;margin:0}
.pj-janela{overflow:hidden;border:1px solid #E3E1D6;border-radius:12px;background:#fff;box-shadow:0 14px 32px -20px rgba(42,8,40,.4),0 2px 6px rgba(42,8,40,.06)}
.pj-barra{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-bottom:1px solid #E3E1D6;background:#F3F1EC}
.pj-barra i{width:8px;height:8px;flex:none;border-radius:50%;background:#D5D2C6}
.pj-barra span{min-width:0;margin-left:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 11.5px var(--fonte);color:#6E6C63}
.pj-janela picture{display:block}
.pj-janela img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.pj-tela figcaption{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.pj-tela figcaption b{color:var(--titulo)}
.pj-galeria .faq-outros{margin-top:4px}
@media (min-width:621px){
  .pj-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-galeria .faq-outros{grid-column:1 / -1}
}
/* 1100+: as duas telas e as pílulas numa linha só (o fio das pílulas na altura do topo das janelas) */
@media (min-width:1100px){
  .pj-galeria{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.82fr);column-gap:28px}
  .pj-galeria .faq-outros{grid-column:auto;margin-top:0}
}

/* selo com logo quadrado (Blum Filmes, recortado sem a sobra transparente): mais alto, para o logo não sumir; o selo segue metade
   dentro e metade fora do navegador */
.selo-cliente.selo-alto img{height:30px}
.vitrine-real.mockup-margem > .selo-cliente.selo-alto{margin-top:calc(53.2% - 21px)}