/* ==========================================================================
   PORTFÓLIO, a lista de projetos

   CSS só desta página. Carrega depois de todos os outros, então o que
   estiver aqui tem a última palavra.

   O desenho é limpo de propósito: cabeçalho, filtros alinhados com a
   grelha e três cartões por linha, cada um com a foto, a etiqueta do
   serviço e o nome do projeto sempre à vista, nada de nome que só
   aparece quando o mouse passa por cima, porque no celular isso nunca
   acontece. Sem traço preto em foto nenhuma.
   ========================================================================== */

.portfolio{
  display:block; width:100%;
  max-width:1180px; margin:0 auto; padding:0 20px 80px;
  box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  color:#111;
}

/* ---------- cabeçalho ----------
   Tudo no mesmo eixo: título, traço amarelo, frase e contagem centrados um
   embaixo do outro. Antes a frase tinha largura máxima sem margem
   automática, então ela encostava na esquerda enquanto o resto ficava no
   meio, e era isso que dava o ar de torto. */
.portfolioCab{ padding:56px 0 22px; text-align:center; }
.portfolioCab__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:52px; line-height:.98; letter-spacing:.4px;
  text-transform:uppercase; color:#000; margin:0 auto 16px;
  display:block;
}
.portfolioCab__titulo::after{
  content:''; display:block; width:64px; height:5px;
  background:#feec34; margin:14px auto 0; border-radius:3px;
}
.portfolioCab__frase{
  margin:0 auto 14px; max-width:620px;
  font-size:15px; line-height:1.6; color:#5a5a52;
}
.portfolioCab__conta{
  margin:0 auto; font-size:13px; line-height:1; color:#6b6b62;
  text-transform:uppercase; letter-spacing:1.2px;
}
.portfolioCab__conta strong{ color:#000; font-weight:700; }

/* ---------- filtros ---------- */
.filtros{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  border-bottom:1px solid #eeeee8; margin:0 0 36px; padding:0;
}
/* o tema desenha todo button com caixa preta e letra amarela; aqui o
   filtro precisa ser só texto, então as regras vêm com o pai junto */
.portfolio .filtros .filtros__item{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  background:none; background-color:transparent;
  border:0; border-radius:0; box-shadow:none; cursor:pointer;
  padding:15px 16px; margin:0; height:auto; min-height:0;
  font-size:13.5px; font-weight:700; line-height:1; text-transform:none;
  color:#6b6b63; white-space:nowrap;
  border-bottom:3px solid transparent;
  -webkit-transition:.18s ease-in; transition:.18s ease-in;
}
.portfolio .filtros .filtros__item:first-child{ padding-left:0; }
.portfolio .filtros .filtros__item:hover{ color:#000; background:none; }
.portfolio .filtros .filtros__item.esta{ color:#000; border-bottom-color:#feec34; }

/* ---------- grelha de projetos ---------- */
.grelha{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  margin:0 -11px;
}
.projeto{
  -webkit-box-flex:0; -ms-flex:0 0 33.3333%; flex:0 0 33.3333%;
  max-width:33.3333%; min-width:0;
  padding:0 11px 34px; box-sizing:border-box;
}
.projeto[hidden]{ display:none; }
.projeto__link{ display:block; text-decoration:none; color:inherit; }

.projeto__foto{
  position:relative; width:100%; overflow:hidden;
  background:#f2f2ee; margin:0 0 15px; border-radius:10px;
}
.projeto__foto::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .projeto__foto::before{ display:none; }
  .projeto__foto{ aspect-ratio:16 / 9; }
}
.projeto__foto img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover;
  display:block; margin:0; border:0;
  -webkit-transition:.45s ease-in; transition:.45s ease-in;
}
.projeto__link:hover .projeto__foto img,
.projeto__link:focus .projeto__foto img{
  -webkit-transform:scale(1.04); transform:scale(1.04);
}

/* mesma etiqueta leve do blog: a palavra e um ponto amarelo */
.projeto__rotulo{
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:1.4px; text-transform:uppercase;
  color:#111; background:transparent; padding:0; margin:0 0 10px;
}
.projeto__rotulo::before{
  content:''; display:inline-block; width:6px; height:6px; margin-right:7px;
  background:#feec34; border-radius:50%; -ms-flex-negative:0; flex-shrink:0;
}
.projeto__titulo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:19px; font-weight:700; line-height:1.24;
  color:#000; margin:0 0 7px;
}
.projeto__link:hover .projeto__titulo{ color:#3a3a34; }
.projeto__frase{
  margin:0; font-size:14px; line-height:1.5; color:#6b6b63;
}

.semResultado{
  padding:50px 0; text-align:center; font-size:15px; color:#6b6b63; margin:0;
}

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */
@media (max-width:900px){
  .projeto{ -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; }
  .portfolioCab__titulo{ font-size:38px; }
}
@media (max-width:600px){
  .portfolio{ padding:0 16px 60px; }
  .portfolioCab{ padding:32px 0 17px; }
  .portfolioCab__titulo{ font-size:30px; }
  .portfolioCab__frase{ font-size:14px; }
  .filtros{
    -ms-flex-wrap:nowrap; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:24px;
  }
  .filtros::-webkit-scrollbar{ height:0; }
  .filtros__item{ padding:13px 13px; font-size:13px; }
  .grelha{ margin:0 -8px; }
  .projeto{ -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:0 8px 28px; }
  .projeto__titulo{ font-size:18px; }
}

/* ==========================================================================
   A VITRINE DOS DESTAQUES

   Um banner só, com a medida de três colunas da grade por duas linhas de
   altura, que dá, na largura de 1140px, um 16x9 certinho. Dentro dele só
   existe o projeto: a foto ocupa a caixa inteira, sem moldura, sem faixa
   preta ao lado, sem nada em volta.

   O nome e o botão moram numa película escura que só acende quando o mouse
   passa por cima. No celular, onde não existe passar o mouse, a película
   fica acesa por padrão, mais leve, para a pessoa saber que dá para clicar.

   Os slides trocam sozinhos e se sobrepõem com uma dissolvida. Enquanto o
   mouse está em cima, a troca pausa: ninguém perde o projeto que estava
   olhando.
   ========================================================================== */
/* o tema dá 30px de recuo em cima e embaixo de toda section; aqui o banner
   é a peça inteira, então o recuo sai e sobra só a foto */
.portfolio .vitrine{
  position:relative; margin:0 0 44px; padding:0;
  border-radius:16px; overflow:hidden; background:#111;
}

.vitrine__palco{
  position:relative; width:100%; min-height:520px;
}
.vitrine__palco::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .vitrine__palco::before{ display:none; }
  .vitrine__palco{ aspect-ratio:16 / 9; min-height:0; }
}

/* ---------- cada slide ---------- */
.vitrineSlide{
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:block; text-decoration:none; color:inherit;
  opacity:0; visibility:hidden; z-index:1;
  -webkit-transition:opacity .6s ease-in, visibility .6s ease-in;
          transition:opacity .6s ease-in, visibility .6s ease-in;
}
.vitrineSlide.esta{ opacity:1; visibility:visible; z-index:2; }

.vitrineSlide img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover;
  display:block; margin:0; border:0;
  -webkit-transition:1.2s ease-in; transition:1.2s ease-in;
}
.vitrineSlide:hover img,
.vitrineSlide:focus img{ -webkit-transform:scale(1.03); transform:scale(1.03); }

/* ---------- a película ---------- */
.vitrineSlide__pelicula{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:2;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  padding:34px; box-sizing:border-box;
  /* A película precisa dar conta de qualquer capa que entre no carrossel,
     inclusive uma quase branca. Duas camadas resolvem: um preto uniforme
     que garante o piso de contraste e um degradê que adensa o miolo, onde
     o texto de fato fica. Com .72 no centro, texto branco passa de 12:1
     mesmo sobre capa clara. */
  background:rgba(0,0,0,.72);
  background:-webkit-radial-gradient(center, ellipse, rgba(0,0,0,.78) 0%, rgba(0,0,0,.66) 100%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.78) 0%, rgba(0,0,0,.66) 100%);
  opacity:0;
  -webkit-transition:opacity .3s ease-in; transition:opacity .3s ease-in;
}
.vitrineSlide:hover .vitrineSlide__pelicula,
.vitrineSlide:focus .vitrineSlide__pelicula,
.vitrineSlide:focus-within .vitrineSlide__pelicula{ opacity:1; }

.vitrineSlide__texto{
  display:block; text-align:center; max-width:640px;
  -webkit-transform:translateY(10px); transform:translateY(10px);
  -webkit-transition:.35s ease-in; transition:.35s ease-in;
}
.vitrineSlide:hover .vitrineSlide__texto,
.vitrineSlide:focus .vitrineSlide__texto{
  -webkit-transform:translateY(0); transform:translateY(0);
}

.vitrineSlide__rotulo{
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#fff; margin:0 0 14px;
}
.vitrineSlide__rotulo::before{
  content:''; display:inline-block; width:7px; height:7px; margin-right:8px;
  background:#feec34; border-radius:50%; -ms-flex-negative:0; flex-shrink:0;
}
.vitrine .vitrineSlide__titulo{
  display:block;
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:44px; line-height:1.04; letter-spacing:.3px;
  text-transform:uppercase; color:#fff; margin:0 0 12px;
  background:transparent;
}
.vitrine .vitrineSlide__frase{
  display:block; margin:0 0 24px;
  font-size:16px; line-height:1.55; color:#e2e2da;
}
.vitrineSlide__botao{
  display:inline-block; box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:13.5px; font-weight:700; letter-spacing:.3px; color:#000;
  background:#feec34; border:2px solid #feec34; border-radius:40px;
  padding:13px 30px; min-height:46px;
  -webkit-transition:.25s ease-in; transition:.25s ease-in;
}
.vitrineSlide:hover .vitrineSlide__botao{ background:#fff; border-color:#fff; }

/* ---------- setas ---------- */
.vitrine .vitrine__seta{
  position:absolute; top:50%; z-index:4;
  -webkit-transform:translateY(-50%); transform:translateY(-50%);
  width:46px; height:46px; padding:0; margin:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.42);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-transition:background-color .2s ease-in; transition:background-color .2s ease-in;
}
.vitrine .vitrine__seta:hover{ background:#feec34; }
.vitrine__seta--ant{ left:16px; }
.vitrine__seta--prox{ right:16px; }
/* o bico da seta, feito de borda */
.vitrine__seta span{
  display:block; width:11px; height:11px;
  border-top:2.5px solid #fff; border-right:2.5px solid #fff;
}
.vitrine .vitrine__seta:hover span{ border-color:#000; }
.vitrine__seta--prox span{
  -webkit-transform:rotate(45deg) translate(-2px, 2px);
          transform:rotate(45deg) translate(-2px, 2px);
}
.vitrine__seta--ant span{
  -webkit-transform:rotate(-135deg) translate(-2px, 2px);
          transform:rotate(-135deg) translate(-2px, 2px);
}

/* ---------- pontinhos ---------- */
.vitrine__pontos{
  position:absolute; left:0; right:0; bottom:18px; z-index:4;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  gap:9px;
}
.vitrine .vitrine__ponto{
  width:9px; height:9px; padding:0; margin:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.5);
  -webkit-transition:.2s ease-in; transition:.2s ease-in;
}
.vitrine .vitrine__ponto:hover{ background:#fff; }
.vitrine .vitrine__ponto.esta{ background:#feec34; width:24px; border-radius:6px; }

/* ==========================================================================
   A VITRINE NO CELULAR
   Sem mouse não existe passar por cima, então a película nasce acesa, um
   pouco mais leve, e o texto já fica no lugar.
   ========================================================================== */
@media (max-width:900px){
  .vitrine{ margin-bottom:30px; border-radius:12px; }
  .vitrine__palco{ min-height:0; }
  @supports (aspect-ratio: 16 / 9){
    .vitrine__palco{ aspect-ratio:4 / 3; }
  }
  .vitrine__palco::before{ padding-top:75%; }

  .vitrineSlide__pelicula{
    opacity:1;
    background:-webkit-linear-gradient(top, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.85) 100%);
    background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.85) 100%);
    -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end;
    padding:22px 20px 46px;
  }
  .vitrineSlide__texto{ -webkit-transform:none; transform:none; }
  .vitrine .vitrineSlide__titulo{ font-size:28px; }
  .vitrine .vitrineSlide__frase{ font-size:14.5px; margin-bottom:18px; }
  .vitrine .vitrine__seta{ width:38px; height:38px; }
  .vitrine__seta--ant{ left:10px; }
  .vitrine__seta--prox{ right:10px; }
  .vitrine__pontos{ bottom:14px; }
}

@media (max-width:560px){
  @supports (aspect-ratio: 16 / 9){
    .vitrine__palco{ aspect-ratio:3 / 4; }
  }
  .vitrine__palco::before{ padding-top:133%; }
  .vitrine .vitrineSlide__titulo{ font-size:24px; }
  .vitrineSlide__botao{ width:100%; text-align:center; }
  .vitrineSlide__texto{ max-width:none; width:100%; }
}

/* nada de animação para quem pediu ao sistema para não ver animação */
@media (prefers-reduced-motion: reduce){
  .vitrineSlide,
  .vitrineSlide img,
  .vitrineSlide__pelicula,
  .vitrineSlide__texto{ -webkit-transition:none; transition:none; }
}

/* ==========================================================================
   O RITMO VERTICAL DO PORTFÓLIO

   Mesma correção das outras páginas: `.elementor-kit-1553 p` zera a margem
   de todo parágrafo com peso maior do que uma classe sozinha, e os espaços
   declarados aqui eram descartados sem aviso. Com o pai no seletor o peso
   empata e a régua volta a valer.
   ========================================================================== */
.portfolio .portfolioCab__titulo{ margin:0 0 30px; }
.portfolio .portfolioCab__frase{ margin:0 auto 18px; }
.portfolio .portfolioCab__conta{ margin:0 0 8px; }
.portfolio .projeto__rotulo{ margin-bottom:14px; display:block; }
.portfolio .projeto__titulo{ margin:0 0 12px; }
.portfolio .projeto__frase{ margin:0; }
.portfolio .vitrineSlide__rotulo{ margin-bottom:16px; display:block; }
.portfolio .vitrineSlide__titulo{ margin-bottom:16px; display:block; }

@media (max-width:900px){
  /* empilhados no celular, os cartões de projeto precisam de vão próprio */
  .portfolio .grade{ gap:26px; }
  .portfolio .projeto{ margin-bottom:0; }
}

/* ==========================================================================
   A GRADE DO PORTFÓLIO: SÓ A MARCA E O NOME

   Cada cartão trazia três informações empilhadas: a etiqueta do serviço, o
   nome do projeto e uma frase de apoio. Numa grade de nove, doze cartões
   isso vira parede de texto, e a capa, que é o trabalho, perde a vez.

   Fica o essencial: a capa e o nome, em caixa alta, com o mesmo peso em
   todos os cartões. A etiqueta do serviço continua existindo, agora como
   tarja sobre a capa, e só acende quando o mouse passa por cima do cartão.
   Quem está varrendo a grade vê marcas; quem parou numa delas vê do que se
   trata. A frase de apoio saiu: ela é da página do projeto.
   ========================================================================== */
.portfolio .projeto__titulo{
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:18px; line-height:1.22;
  margin:0;
}
.portfolio .projeto__texto{ padding:0 2px; }

/* a etiqueta virou tarja sobre a capa e só aparece no passar do mouse */
.portfolio .projeto__foto .projeto__rotulo{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  margin:0; padding:6px 11px;
  background:#feec34; color:#000;
  border-radius:20px;
  font-size:10.5px; letter-spacing:1.1px;
  opacity:0; -webkit-transition:.22s ease-in; transition:.22s ease-in;
}
/* o ponto amarelo era para o fundo branco; sobre a tarja amarela ele some */
.portfolio .projeto__foto .projeto__rotulo::before{ display:none; }
.portfolio .projeto__link:hover .projeto__rotulo,
.portfolio .projeto__link:focus .projeto__rotulo{ opacity:1; }

/* onde não existe passar o mouse, a tarja não aparece: no celular a grade é
   só capa e nome, que foi o pedido */
@media (hover: none){
  .portfolio .projeto__foto .projeto__rotulo{ display:none; }
}

@media (max-width:600px){
  .portfolio .projeto__titulo{ font-size:16px; letter-spacing:.4px; }
}