/* =====================================================================
   Trabalhos · Presq Agency
   Celular primeiro. Os casos no tom de cada um, a faixa de peças (virais e carrosséis) e o fecho.
   As capas espelham a abertura de cada caso (bloco "capas" repetido no inicio.css).
   ===================================================================== */

.pg-trabalhos .secao{--secao-pg:clamp(2.25rem, 0rem + 9.2vw, 9rem); padding-block:var(--secao-pg)}
.pg-trabalhos .rotulo + h1,.pg-trabalhos .rotulo + h2{margin-top:var(--e4)}
@media (max-width:599px){ .pg-trabalhos main h2{font-size:clamp(1.875rem, 1.5rem + 1.6vw, 2.125rem)} }

/* =====================================================================
   1 · TÍTULO
   ===================================================================== */
.trab-topo{padding-top:calc(var(--cabecalho-altura) + var(--e5)) !important; padding-bottom:var(--e4) !important}
.trab-topo h1{font-size:clamp(2.375rem, 1.4rem + 4.2vw, 5.5rem); max-width:13ch}
.trab-topo-apoio{margin-top:var(--e4); font-size:16px; min-height:calc(2 * 1.45em)}
@media (min-width:1024px){
  .trab-topo{padding-top:calc(var(--cabecalho-altura) + var(--e9)) !important; padding-bottom:var(--e8) !important}
  .trab-topo-grade{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:end}
  .trab-topo-texto{grid-column:1 / 9}
  .trab-topo-apoio{font-size:var(--t-texto); min-height:0}
  .trab-indice{grid-column:10 / 13; display:flex; flex-direction:column; border-top:1px solid var(--linha)}
  .trab-indice a{display:flex; align-items:center; gap:var(--e4); min-height:52px; border-bottom:1px solid var(--linha); font-size:17px; font-weight:600; letter-spacing:-.015em; text-decoration:none; color:var(--texto); transition:color var(--d-ui), padding var(--d-ui) var(--ease-entra)}
  .trab-indice a .mono{color:var(--acento); font-size:13px}
  .trab-indice a:hover{padding-left:6px}
}

/* =====================================================================
   2 · OS CASOS, UM POR TELA
   ===================================================================== */
.caso-bloco{padding-top:var(--e5) !important; padding-bottom:calc(var(--reserva-fixo) + var(--e2)) !important}
.caso-bloco + .caso-bloco[data-tom="papel"],.caso-bloco[data-tom="papel"] + .caso-bloco[data-tom="papel"]{border-top:1px solid var(--linha)}
.caso-link{display:grid; gap:var(--e4); text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent}
.caso-capa-caixa{position:relative}
/* celular: o número vem antes da capa (o número herói do primeiro caso já aparece na primeira tela) */
@media (max-width:1023px){ .caso-capa-caixa{order:2} .caso-info{order:1} .caso-topo .caso-ordem,.caso-topo .caso-ver-topo{font-size:12px; letter-spacing:0} }
.caso-link .caso-capa{--proporcao:4/3; border:1px solid var(--linha)}
.caso-info{display:flex; flex-direction:column; align-items:flex-start}
.caso-topo{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e4); width:100%}
.caso-ordem{display:flex; gap:10px; font-size:13px; color:var(--apoio); text-transform:uppercase; letter-spacing:.02em}
.caso-ver-topo{flex:none; font-size:13px; font-weight:600; color:var(--texto); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap}
.caso-ver-topo span{color:var(--acento)}
.caso-n{color:var(--acento)}
.caso-titulo{margin-top:6px; font-size:1.75rem; letter-spacing:-.035em; line-height:1.05}
.caso-numero{margin-top:var(--e3)}
.caso-numero .numero-linha{font-size:clamp(3.25rem, 2.3rem + 4vw, 6.75rem)}
.caso-numero .numero-legenda{margin-top:4px; font-size:16px}
.caso-feito{display:none}
.caso-ver{display:none !important}
@media (min-width:1024px){
  /* o bloco tem a altura da capa (antes, uma tela inteira cada) */
  /* página abaixo de 7 telas no computador; capa um pouco menor e respiro de 64 px */
  .caso-bloco{padding-block:var(--e8) !important}
  .caso-link{grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:center}
  /* a capa tem a proporção da abertura do caso (597 x 752) e cabe na tela */
  .caso-link .caso-capa{--proporcao:597/752}
  .caso-capa-caixa{grid-column:1 / 6; grid-row:1; width:min(100%, calc((100svh - 250px) * .794))}
  .caso-info{grid-column:7 / 12; grid-row:1}
  .caso-bloco--inverso .caso-capa-caixa{grid-column:8 / 13; justify-self:end}
  .caso-bloco--inverso .caso-info{grid-column:2 / 7}
  .caso-ordem{font-size:var(--t-mono)}
  .caso-titulo{margin-top:var(--e4); font-size:clamp(2.5rem, 1.4rem + 1.9vw, 3.5rem)}
  .caso-numero{margin-top:var(--e6)}
  .caso-numero .numero-legenda{font-size:var(--t-texto); margin-top:var(--e3)}
  .caso-feito{display:block; margin-top:var(--e6); padding-top:var(--e5); border-top:1px solid var(--linha); color:var(--apoio); font-size:var(--t-texto); line-height:1.45; max-width:38ch}
  .caso-ver-topo{display:none}
  .caso-ver{display:inline-flex !important; margin-top:var(--e5) !important; font-size:18px}
  .caso-link .caso-capa{transition:transform .8s var(--ease-entra)}
}
@media (hover:hover) and (pointer:fine){
  .caso-link:hover .caso-capa{transform:scale(1.015)}
  .caso-link:hover .caso-ver{background-size:calc(100% - 1.4em) 1px}
  .caso-link:hover .caso-ver::after{transform:translateX(3px)}
}

/* =====================================================================
   AS CAPAS DOS CASOS · espelho da abertura de cada caso (caso.css)
   Mesma composição e mesmas proporções do topo do caso. No computador, tudo em cqw sobre a
   proporção da abertura (597 x 752): quando a capa voa (View Transition), muda só a escala do
   conjunto, e no meio do voo existe um celular só. No celular, as medidas em px do caso.
   (O mesmo bloco está no inicio.css.)
   ===================================================================== */
.capa{container-type:inline-size}
.capa--adv,.capa--derm{background:var(--painel-fundo)}
.capa-pontos{position:absolute; left:7cqw; top:9%; bottom:8%; display:flex; flex-direction:column; justify-content:space-between; gap:10px}
.capa-grade{--cp:calc(68cqw / 16); display:grid; grid-template-columns:repeat(16, var(--cp)); grid-auto-rows:var(--cp)}
.capa-grade i{width:calc(var(--cp) * .46); height:calc(var(--cp) * .46); border-radius:50%; background:var(--menta); opacity:.92; align-self:center; justify-self:center}
.capa-legenda{margin:0; font-family:var(--fonte-mono); font-size:max(11px, 2.68cqw); font-weight:500; line-height:1.3; letter-spacing:.02em; text-transform:uppercase; color:var(--cinza); white-space:nowrap}
.capa-fone{position:absolute}
.capa--adv .capa-fone{left:53cqw; top:33%; --iphone-w:42cqw}
.capa--derm .capa-agenda{position:absolute; left:6.7cqw; top:8cqw; width:44%; box-shadow:none}
.capa--derm .capa-agenda .tela-janela{width:100%; aspect-ratio:393/600}
.capa--derm .capa-fone{right:8cqw; bottom:-14%; --iphone-w:50.6cqw}
.capa--levany{background:#E9E7E3}
.capa--levany>.capa-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 18%}
.capa-leque{position:absolute; left:7cqw; bottom:9%; width:58%; aspect-ratio:1.18}
.capa-car{position:absolute; bottom:0; width:62%; box-shadow:0 14px 34px rgba(17,17,19,.24)}
.capa-car img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.capa-car--1{left:0; transform:rotate(-7deg) translate(-2%,-4%)}
.capa-car--2{left:19%; transform:translateY(-8%); z-index:2}
.capa-car--3{left:38%; transform:rotate(7deg) translate(2%,-2%); z-index:3}
@media (min-width:1024px){
  .capa .janela-barra{height:4.35cqw; gap:1.17cqw; padding:0 2cqw}
  .capa .janela-barra>i{width:1.34cqw; height:1.34cqw}
}
/* celular: as alturas e as medidas da abertura do caso (mesma largura de coluna) */
@media (max-width:1023px){
  .caso-link .caso-capa{--proporcao:auto}
  .caso-link .capa--adv{height:206px}
  .caso-link .capa--derm{height:262px}
  .caso-link .capa--levany{height:250px}
  .caso-link .capa--rogge-foto{height:270px}
  .capa-pontos{left:18px; top:18px; bottom:auto; justify-content:flex-start}
  .capa-grade{--cp:8px}
  .capa-legenda{font-size:12px}
  .capa--adv .capa-fone{left:auto; right:14px; top:18px; --iphone-w:176px}
  .capa--derm .capa-agenda{left:16px; top:18px; width:46%}
  .capa--derm .capa-fone{right:16px; top:-168px; bottom:auto; --iphone-w:196px}
  .capa--levany>.capa-foto{object-position:72% 20%}
  .capa-leque{left:14px; bottom:16px; width:54%}
}
@media (max-width:359px){ .capa--adv .capa-fone,.capa--derm .capa-fone{--iphone-w:156px} }

/* advocacia (Provimento 205): nada de avaliação de cliente no Google desenhado; no lugar, os outros
   resultados da busca, como na página do caso (o trabalhos.js põe o bloco .g-org) */
.capa--adv .tela-google .g-aval{display:none}
.g-org{display:flex; flex-direction:column; border-top:calc(var(--pt)*8) solid #F1F3F4}
.g-org-res{padding:calc(var(--pt)*14) calc(var(--pt)*16); border-bottom:1px solid #ECEDEF; display:flex; flex-direction:column; gap:calc(var(--pt)*4)}
.g-org-res b{font-size:calc(var(--pt)*17); font-weight:500; color:#1A0DAB}
.g-org-res span{font-size:calc(var(--pt)*13); color:#4D5156}
.g-org-res .g-fechado{color:#B3261E}
.g-org-est{display:flex; gap:calc(var(--pt)*2)}
.g-org-est i{width:calc(var(--pt)*11); height:calc(var(--pt)*11); background:#DADCE0; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* os 192 pontos acendem em ordem embaralhada fixa quando a capa aparece (a partir de 35%, nunca "zero") */
.caso-capa.apagada .capa-grade i{opacity:.35}
.caso-capa.acesa .capa-grade i{animation:capa-ponto .45s ease var(--d) both}
@keyframes capa-ponto{from{opacity:.35; transform:scale(.7)}to{opacity:.92; transform:none}}
@media (prefers-reduced-motion:reduce){ .caso-capa .capa-grade i{animation:none!important; opacity:.92!important} }

/* =====================================================================
   3 · PEÇAS (Papel) · uma faixa só: os vídeos que viralizaram e os carrosséis
   ===================================================================== */
.pecas-cab{display:flex; justify-content:space-between; align-items:center; gap:var(--e4)}
.pecas-dica{flex:none; font-size:12px; color:var(--apoio); text-transform:uppercase; letter-spacing:.02em}
.pecas h2{max-width:17ch}
.pecas-faixa{--peca-w:min(64vw - 26px, 260px); margin:var(--e5) calc(-1 * var(--margem)) 0; padding:var(--e4) var(--margem) var(--e2); scroll-padding-inline:var(--margem); gap:var(--e2); border-radius:0}
.pecas-faixa:focus-visible{outline-offset:-3px}
.peca{flex:0 0 var(--peca-w); margin:0; scroll-snap-align:start}
.peca-leque{position:relative; aspect-ratio:4/5; margin:0 14%}
.peca-folha{
  position:absolute; inset:0; border-radius:var(--r-janela); overflow:hidden;
  border:1px solid var(--jan-borda); background:var(--jan-fundo);
  transition:transform .5s cubic-bezier(.215,.61,.355,1);
}
.peca-folha img{width:100%; height:100%; object-fit:cover}
.peca-folha--frente{z-index:3; box-shadow:0 14px 34px rgba(17,17,19,.14)}
.peca-folha--tras-e{z-index:2; transform:translateX(-9%) rotate(-4deg) scale(.94)}
.peca-folha--tras-d{z-index:1; transform:translateX(9%) rotate(4deg) scale(.94)}
.peca.aberta .peca-folha--tras-e{transform:translateX(-22%) rotate(-8deg) scale(.92)}
.peca.aberta .peca-folha--tras-d{transform:translateX(22%) rotate(8deg) scale(.92)}
.peca.aberta .peca-folha--frente{transform:translateY(-2%)}
.peca-legenda{margin-top:var(--e4); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 8px; text-align:center}
.peca-quem{font-size:15px; font-weight:600; letter-spacing:-.01em}
.peca-oque{font-size:12px; color:var(--apoio); text-transform:uppercase; letter-spacing:.02em}
/* o print do vídeo: mesma altura do leque, na moldura fina (print de verdade, nunca redesenhado) */
.peca--viral{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; padding:0 var(--e3)}
.peca-print{width:calc((var(--peca-w) * .9 - 22px) / 1.555); box-shadow:0 14px 34px rgba(17,17,19,.14)}
.peca-print img{display:block; width:100%; height:auto}
.peca-print .janela-barra{height:22px; padding:0 10px}
.peca-legenda--viral{flex-direction:column; align-items:center; gap:4px}
.peca-num{font-size:14px; color:var(--apoio); line-height:1.2}
.peca-num b{display:block; font-size:1.75rem; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--texto)}
@media (min-width:1024px){
  .pecas-faixa{--peca-w:clamp(400px, 32vw, 480px); margin:var(--e7) calc(50% - 50vw) 0 0; padding:var(--e5) calc(50vw - 50%) var(--e4) 0; gap:var(--gap); cursor:grab; scroll-snap-type:none}
  .pecas-dica{font-size:13px}
  .pecas-faixa.arrastando{cursor:grabbing; user-select:none}
  .pecas-faixa.arrastando img{pointer-events:none}
  /* o carrossel é a peça mais bonita; ~360 px de folha a 1440 e o leque já meio aberto */
  .peca-leque{margin:0 12%}
  .peca-folha--tras-e{transform:translateX(-13%) rotate(-6deg) scale(.94)}
  .peca-folha--tras-d{transform:translateX(13%) rotate(6deg) scale(.94)}
  .peca-quem{font-size:17px}
  .peca-oque{font-size:13px}
  .peca--viral{padding:0 var(--e5); justify-content:center}
  /* o print tem 281 px de verdade; no computador ele fica com no máximo 180 px (nítido na tela 2x),
     e a coluna do viral fica estreita, com o número embaixo */
  .peca-print{width:min(180px, calc((var(--peca-w) * .95 - 26px) / 1.555))}
  .peca-print .janela-barra{height:26px; padding:0 12px}
  .peca-num{font-size:15px}
  .peca-num b{font-size:clamp(2rem, 1.5rem + 1.2vw, 2.75rem)}
}
@media (hover:hover) and (pointer:fine){
  .peca:hover .peca-folha--tras-e{transform:translateX(-22%) rotate(-8deg) scale(.92)}
  .peca:hover .peca-folha--tras-d{transform:translateX(22%) rotate(8deg) scale(.92)}
  .peca:hover .peca-folha--frente{transform:translateY(-2%)}
}
@media (prefers-reduced-motion:reduce){ .peca-folha{transition:none} }

/* fecho desta página: no celular sem o rótulo (o título já chama pra conversa). O respiro de baixo é o da base
   (32 px no celular e 64 no computador, mais os 32 do rodapé), que o .pg-trabalhos .secao trocava por um respiro de seção */
@media (max-width:1023px){ .pg-trabalhos .fecho>.conteudo>.rotulo{display:none} }
.pg-trabalhos .fecho{padding-bottom:var(--e6)}
@media (min-width:1024px){ .pg-trabalhos .fecho{padding-bottom:var(--e8)} }

/* =====================================================================
   A Levany em andamento e com o número DELA (decisão 7);
   o Rogge do Vlog numa faixa própria, como o perfil da casa, fora da lista de clientes
   ===================================================================== */
.caso-selo{margin-top:var(--e2); font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--acento)}
/* Levany: o número grande é das vendas DELA, então sai do lugar de resultado:
   a frase do que a agência faz em destaque e as vendas dela numa linha de contexto, em letra menor */
.caso-frase{margin-top:var(--e3); font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); font-weight:700; letter-spacing:-.035em; line-height:1.08; color:var(--texto); max-width:18ch; text-wrap:balance}
.caso-contexto{margin-top:var(--e3); font-size:15px; line-height:1.4; color:var(--apoio); max-width:34ch}
.caso-contexto-rotulo{display:block; margin-bottom:2px; font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--texto)}
@media (min-width:1024px){ .caso-frase{margin-top:var(--e5)} .caso-contexto{margin-top:var(--e5); font-size:var(--t-texto)} .caso-contexto-rotulo{font-size:13px} }
.caso-bloco--casa{border-top:1px solid var(--filete-noite)}
.caso-casa-rotulo{margin-bottom:var(--e5)}
@media (min-width:1024px){
  .caso-bloco--casa{flex-direction:column; justify-content:center; align-items:stretch}
  .caso-casa-rotulo{margin-bottom:var(--e7)}
  .trab-indice a.trab-indice-casa{margin-top:var(--e3); border-top:1px solid var(--linha)}
  .trab-indice a small{margin-left:auto; font-size:11px; font-weight:500; color:var(--apoio); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap}
}
/* a capa que voa (View Transition): a antiga sai rápido e nunca se funde com a nova (vale na volta do caso pra cá) */
::view-transition-old(capa-advogada),::view-transition-old(capa-dermatologista),::view-transition-old(capa-levany),::view-transition-old(capa-rogge){mix-blend-mode:normal; animation-duration:.12s}
::view-transition-new(capa-advogada),::view-transition-new(capa-dermatologista),::view-transition-new(capa-levany),::view-transition-new(capa-rogge){mix-blend-mode:normal}

/* a capa que voa: no retrato da página que sai, o texto do cartão clicado some
   (o título e o número não cruzam com os da página do caso). O inicio.js/trabalhos.js põe .capa-saindo no pageswap. */
.capa-saindo .trab-texto,.capa-saindo .caso-info,html.capa-saindo .caso-casa-rotulo,html.capa-saindo .trab-cursor-rotulo{visibility:hidden}
html.capa-saindo .trab-cursor::after{display:none}
/* e a capa voa inteira: a nova já opaca desde o começo e a velha fora (só o grupo anima posição e tamanho; vale na volta pra cá) */
::view-transition-old(capa-advogada),::view-transition-old(capa-dermatologista),::view-transition-old(capa-levany),::view-transition-old(capa-rogge){display:none}
::view-transition-new(capa-advogada),::view-transition-new(capa-dermatologista),::view-transition-new(capa-levany),::view-transition-new(capa-rogge){animation:none; opacity:1}

/* no celular, quem chega pelo link em /trabalhos tem o WhatsApp à vista desde a abertura */
.trab-topo-whats{margin-top:var(--e3) !important; font-size:16px}