/* =====================================================================
   Início · Presq Agency
   Celular primeiro. Só tokens do base.css; hex solto só no que imita app de verdade.
   ===================================================================== */

/* ---------- respiro das seções desta página ---------- */
.pg-inicio .secao{--secao-pg:clamp(2rem, -.4rem + 9.6vw, 9rem); padding-block:var(--secao-pg)}
.pg-inicio .secao.reserva-botao{padding-bottom:calc(var(--reserva-fixo) + var(--e2))}
@media (min-width:1024px){
  /* o Início no computador mais perto de 9 telas; respiro de seção até 6,5rem */
  .pg-inicio .secao{--secao-pg:clamp(2rem, -.4rem + 9.6vw, 6.5rem)}
  .pg-inicio .secao.reserva-botao{padding-bottom:var(--secao-pg)}
}
.pg-inicio h2{max-width:20ch}
@media (max-width:599px){ .pg-inicio main h2{font-size:clamp(1.875rem, 1.5rem + 1.6vw, 2.125rem)} }
.pg-inicio .rotulo + h2{margin-top:var(--e4)}

/* =====================================================================
   1 + 2 · ABERTURA E O UAU
   Grade de duas linhas: a abertura (linha 1) e a pista (linha 2). O palco ocupa as
   duas e é sticky: o celular fica parado enquanto a rolagem passa pelos capítulos.
   ===================================================================== */
.uau{
  /* duração de cada trecho, em telas (o inicio.js lê estes números) */
  /* celular: os capítulos com vídeo ganham mais pista (cap1..cap4), o 4 é curto; --cap é a média (reserva) */
  /* os capítulos 1 e 2 com pelo menos 0,3 da tela de pista no celular */
  --viagem:.42; --d0:.06; --cap:.3; --cap1:.3; --cap2:.3; --cap3:.42; --cap4:.16;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto;
  padding:0 !important; overflow-x:clip;
  background:
    radial-gradient(70% 46% at 78% 0%, color-mix(in oklab, var(--verde) 9%, transparent) 0%, transparent 70%),
    var(--fundo);
}
/* computador: cada nível com 0,4 tela de rolagem (antes 0,62) */
@media (min-width:1024px){ .uau{--viagem:.64; --d0:.26; --cap:.4; --cap1:.4; --cap2:.4; --cap3:.4; --cap4:.4} }

/* ---------- abertura ---------- */
.abertura{grid-row:1; grid-column:1; position:relative; z-index:2; min-height:100svh; pointer-events:none}
.abertura .conteudo{pointer-events:auto; padding-top:calc(var(--cabecalho-altura) + var(--e3))}
.abertura-faixa{display:flex; align-items:center; justify-content:space-between; gap:var(--e5)}
.abertura-rotulo{font-size:13px}
.abertura-texto{margin-top:var(--e4)}
.abertura-titulo{font-size:clamp(2.5rem, 1.5rem + 4.3vw, 5.5rem); letter-spacing:-.045em; line-height:.98; max-width:none}
.abertura-titulo .grad{display:block}
.abertura-apoio{margin-top:var(--e4); font-size:16px; line-height:1.42; color:var(--apoio); max-width:34ch}
.abertura-acoes{margin-top:var(--e5)}
.abertura-acoes .botao{padding:0 14px}
/* celular: subtítulo mais curto, os dois botões lado a lado e o aparelho sobe pra primeira dobra
   (a tela de bloqueio com pelo menos duas notificações à vista) */
@media (max-width:599px){
  .abertura .conteudo{padding-top:calc(var(--cabecalho-altura) + var(--e1))}
  .abertura-texto{margin-top:var(--e3)}
  .abertura-titulo{font-size:clamp(2.25rem, 1.9rem + 1.6vw, 2.5rem)}
  .abertura-apoio{margin-top:var(--e3); font-size:15px; line-height:1.38}
  .abertura-acoes{margin-top:var(--e4); flex-wrap:nowrap; gap:10px}
  .abertura-acoes .botao{flex:1 1 0; min-width:0; padding:0 10px}
}
/* a frase e os botões da abertura entram na carga (não dependem de a pessoa rolar: a 1920x1080 eles ficam no pé da tela) */
html.js .ab-entra{opacity:0}

@media (min-width:1024px){
  .abertura{display:flex; flex-direction:column}
  .abertura>.conteudo{flex:1; display:flex; flex-direction:column; padding-top:calc(var(--cabecalho-altura) + var(--e2))}
  .abertura-faixa{padding:14px 0 16px; border-bottom:1px solid var(--texto)}
  .abertura-rotulo,.abertura-socios{font-size:var(--t-mono)}
  .abertura-socios{color:var(--apoio)}
  .abertura-texto{
    --fs-ab:min(7.5vw, 13svh, 7.25rem);
    position:relative; margin-top:clamp(40px, 13svh - 12px, 112px); padding-bottom:var(--e6);
  }
  .abertura-titulo{font-size:var(--fs-ab); letter-spacing:-.055em; line-height:.93; max-width:8.4em}
  .abertura-lado{margin-top:var(--e5); max-width:min(40rem, calc(100% - 420px))}
  .abertura-apoio{font-size:clamp(1.0625rem, .4rem + .85vw, 1.25rem); line-height:1.45; margin-top:0; max-width:40ch; min-height:2.9em}
  .abertura-acoes .botao{padding:0 22px}
}
/* ---------- palco (sticky) ---------- */
.palco{
  grid-row:1 / 3; grid-column:1; align-self:start;
  position:sticky; top:0; z-index:1;
  height:100svh; overflow:visible;
}
.palco-grade{
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  /* reserva do pé (o bloco do celular mais abaixo zera: lá a barra do WhatsApp sai enquanto o aparelho ocupa o pé) */
  padding-top:66px; padding-bottom:calc(var(--reserva-fixo) - 12px);
}
.pista{grid-row:2; grid-column:1; height:calc((var(--viagem) + var(--d0) + var(--cap1) + var(--cap2) + var(--cap3) + var(--cap4)) * 100svh)}
/* computador: quando o palco solta, o topo dele se dissolve num degradê de 80 px
   (nada fica cortado numa linha reta no alto da tela); enquanto ele está preso, essa faixa é só o respiro do cabeçalho */
@media (min-width:1024px){ .palco{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 80px); mask-image:linear-gradient(to bottom, transparent 0, #000 80px)} }
/* primeira pintura: o palco só aparece quando o inicio.js já pôs o celular no lugar da abertura */
html.js-sim .uau:not(.uau--pronto):not(.uau--fila) .palco{opacity:0}

/* no celular, o aparelho da abertura já pinta parado, antes do JS (é o LCP), no MESMO lugar
   onde o inicio.js põe o celular do palco (44 px abaixo dos botões: 22 de respiro + o trilho); some quando o palco fica pronto */
.ab-fone{display:none}
@media (max-width:1023px), (pointer:coarse){
  .abertura-lado{position:relative}
  html.js-sim:not(.reduzido) .uau:not(.uau--pronto):not(.uau--fila) .ab-fone{
    display:block; position:absolute; left:50%; top:calc(100% + 44px); transform:translateX(-50%); pointer-events:none;
    --iphone-w:min(calc((100svh - 326px) * .482), calc(60svh * .482), 240px);
  }
}
.ab-fone .iphone-tela>img{object-fit:cover}

/* o aparelho */
.fone-caixa{position:relative; display:flex; justify-content:center; width:100%; flex:none}
.fone-movel{--iphone-w:min(calc((100svh - 326px) * .482), calc(60svh * .482), 240px); position:relative; will-change:transform; display:flex; flex-direction:column; align-items:center}
.fone-pe{position:relative; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; min-height:20px}
.fone-legenda{font-size:12px; line-height:1.3; color:var(--apoio); text-align:center; white-space:nowrap}
/* pausa (seção 6, régua 11): fora do aparelho. Celular: na margem ao lado do celular, embaixo; computador: na linha da legenda */
.fone-pausa{position:absolute; right:auto; left:calc(50% + var(--iphone-w) / 2 + 10px); top:auto; bottom:calc(100% + var(--iphone-w) * .6); min-height:40px; padding:0 12px; background:transparent; color:var(--texto); border-color:var(--linha-forte); -webkit-backdrop-filter:none; backdrop-filter:none}

/* celular: a tese fixa, o capítulo atual e as 4 barrinhas */
.cap-atual{width:100%; max-width:24rem; text-align:center}
.cap-tese{font-size:clamp(1.375rem, 1.1rem + 1.2vw, 1.625rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; text-wrap:balance}
.cap-tese .grad{margin-inline:auto}
.cap-atual{position:relative}
/* a troca é uma máscara vertical. O texto velho sobe pra fora da janela e o novo entra por baixo
   só depois que o velho saiu: nunca dois textos legíveis no mesmo pixel */
.cap-janela{position:relative; margin-top:10px; overflow:hidden; min-height:calc(28px + 4px + 2 * 1.35 * 15px)}
.cap-bloco{min-height:calc(28px + 4px + 2 * 1.35 * 15px)}
.cap-bloco--saindo{position:absolute; left:0; right:0; top:0; pointer-events:none}
.cap-atual-nome{display:flex; align-items:baseline; justify-content:center; gap:8px; font-size:1.375rem; font-weight:700; letter-spacing:-.03em; line-height:1.2; color:var(--texto)}
.cap-atual-num{font-size:13px; font-weight:500; color:var(--acento); letter-spacing:.02em}
.cap-atual-num:empty{display:none}
.cap-bloco--tese .cap-atual-nome{flex-direction:column; align-items:center; gap:6px}
.cap-bloco--tese .cap-atual-num{font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--apoio)}
.cap-bloco--tese .cap-atual-texto{display:block; text-wrap:balance}
.cap-bloco--tese .cap-atual-texto .grad{display:block; width:fit-content; margin-inline:auto}
.cap-bloco--tese .cap-atual-frase:empty{display:none}
.cap-atual-frase{margin-top:4px; font-size:15px; line-height:1.35; color:var(--apoio); text-wrap:balance}
/* celular: o trilho de 4 pontos em cima do aparelho; a linha enche com a rolagem (--t, 0 a 1) */
.trilho{position:relative; display:flex; justify-content:space-between; align-items:center; list-style:none; padding:0; margin:0 0 10px; width:calc(var(--iphone-w) * .78); height:12px}
.trilho::before,.trilho::after{content:""; position:absolute; left:5px; right:5px; top:50%; height:2px; margin-top:-1px; border-radius:1px; background:var(--linha-forte)}
.trilho::after{background:var(--acento); transform-origin:0 50%; transform:scaleX(var(--t,0))}
.trilho li{position:relative; z-index:1; width:10px; height:10px; border-radius:50%; background:var(--fundo); border:2px solid var(--linha-forte); transition:background-color .3s var(--ease-entra), border-color .3s var(--ease-entra), box-shadow .3s var(--ease-entra)}
.trilho li i{display:none}
.trilho li.ligado{background:var(--acento); border-color:var(--acento)}
.trilho li.atual{box-shadow:0 0 0 4px color-mix(in oklab, var(--acento) 18%, transparent)}

/* computador: a lista com interruptor */
.capitulos{display:none}
@media (min-width:1024px){
  .palco-grade{
    display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap);
    align-items:center; padding-top:88px; padding-bottom:20px;
  }
  .cap-atual,.trilho{display:none}
  .palco-grade{position:relative; padding-bottom:20px}
  .capitulos{display:block; grid-column:1 / 6; grid-row:1}
  .fone-caixa{grid-column:6 / 11; grid-row:1}
  .fone-movel{--iphone-w:min(372px, calc((100svh - 176px) * .482))}
  .fone-pe{margin-top:14px; min-height:40px}
  .fone-legenda{font-size:13px}
  .fone-pausa{position:static}
}
.capitulos-tese{font-size:var(--t-titulo); margin:var(--e4) 0 var(--e7); max-width:13ch}
.tese-fim{display:block; width:fit-content; color:var(--apagado-atual); padding-bottom:.12em; transition:color .6s var(--ease-entra)}
.capitulos.completo .tese-fim{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.capitulos-lista{list-style:none; padding-left:0; padding-right:0; padding-top:0}
.capitulos-lista>li{padding:0; position:static}
.cap-linha{color:var(--apoio); transition:color var(--d-ui) var(--ease-entra)}
.cap-cab{display:flex; align-items:center; gap:var(--e4); min-height:76px}
.cap-cab .etapa{color:var(--linha-forte); transition:color var(--d-ui) var(--ease-entra)}
/* o interruptor com 44 x 44 de alvo e o mesmo desenho: a caixa cresce, a pílula vira o ::before */
.cap-cab .interruptor{height:44px; background:none}
.cap-cab .interruptor::before{inset:9px 0; border-radius:13px; background:var(--linha-forte); transition:background-color var(--d-ui) var(--ease-entra)}
.cap-cab .interruptor[aria-checked="true"]::before{background:var(--acento)}
.cap-cab .interruptor::after{top:12px}
.cap-nome{flex:1; font-size:var(--t-destaque); font-weight:600; letter-spacing:-.025em; line-height:1.15}
.cap-num{font-family:var(--fonte-mono); font-size:.62em; font-weight:500; letter-spacing:0; vertical-align:.18em; margin-right:.25em}
/* as linhas nunca mudam de altura. A frase do capítulo atual aparece num lugar só, reservado
   embaixo da lista (as quatro frases ficam ali, uma sobre a outra, e só a da vez acende). A que sai apaga em 0,15 s
   antes de a nova acender: nunca duas frases legíveis no mesmo lugar, e CLS zero na troca */
.capitulos .capitulos-lista{position:relative; padding-bottom:calc(var(--t-texto) * 2.8 + var(--e5))}
.cap-apoio{position:absolute; left:0; right:0; bottom:0; pointer-events:none}
.cap-apoio>p{color:var(--apoio); font-size:var(--t-texto); line-height:1.4; max-width:34ch; opacity:0; transform:translateY(8px); transition:opacity .15s ease, transform .15s ease}
.cap-linha.ligado{color:var(--texto)}
.cap-linha.ligado .etapa{color:var(--acento)}
.cap-linha.atual .cap-apoio>p{opacity:1; transform:none; transition:opacity .35s var(--ease-entra) .15s, transform .5s var(--ease-entra) .15s}

/* =====================================================================
   3 · OS NÚMEROS (Noite) · celular: um por linha, filete entre eles;
   computador: 2x2 separado por filetes em cruz, sem caixa
   ===================================================================== */
.numeros-titulo{max-width:16ch}
.numeros-grade{margin-top:var(--e5); border-top:1px solid var(--linha)}
.numero-celula{
  position:relative; display:grid; grid-template-rows:auto auto auto; padding:12px 0 13px; border-bottom:1px solid var(--linha);
  text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent;
}
/* a linha do número tem altura fixa e a legenda tem a linha dela: painéis vizinhos alinham no pixel */
.numero-celula .numero{display:contents}
.numero-topo{display:flex; align-items:center; justify-content:space-between; gap:var(--e4)}
.numero-celula .rotulo{font-size:13px; margin:0}
.numero-seta{font-family:var(--fonte-mono); font-size:18px; line-height:1; color:var(--apoio); transition:transform var(--d-ui) var(--ease-entra), color var(--d-ui)}
.numero-celula .numero-linha{margin-top:4px; font-size:clamp(3rem, 2rem + 4.2vw, 4rem); letter-spacing:-.05em; line-height:.92; height:.92em; align-items:baseline; flex-wrap:nowrap}
.numero-celula .numero-legenda{margin-top:6px; font-size:15px; max-width:none; text-wrap:pretty}
.numero-andamento{margin-top:8px; font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--acento)}
.numeros-links{margin-top:var(--e4); display:flex; flex-direction:column; align-items:flex-start; gap:var(--e3)}
@media (min-width:1024px){
  .numeros-titulo{max-width:none}
  /* três painéis numa linha, linhas da grade compartilhadas (subgrid): rótulo, número e legenda na mesma altura */
  .numeros-grade{margin-top:var(--e8); border-top:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto auto auto}
  .numero-celula{grid-row:span 3; grid-template-rows:subgrid; padding:clamp(28px, 2.6vw, 44px) clamp(24px, 2.6vw, 44px) clamp(32px, 3vw, 48px); border-bottom:0; border-left:1px solid var(--linha)}
  .numero-celula:first-child{padding-left:0; border-left:0}
  .numero-celula:last-child{padding-right:0}
  .numero-celula .rotulo{font-size:var(--t-mono)}
  .numero-seta{font-size:24px}
  .numero-celula .numero-linha{margin-top:var(--e5); font-size:clamp(4rem, 1.2rem + 5.4vw, 7rem)}
  .numero-celula .numero-legenda{align-self:start; margin-top:var(--e3); font-size:var(--t-texto); max-width:26ch}
}
@media (hover:hover) and (pointer:fine){
  .numero-celula:hover .numero-seta{color:var(--acento); transform:translate(3px,-3px)}
}

/* =====================================================================
   4 · MARCAS (Papel)
   ===================================================================== */
.marcas-titulo{margin:var(--e4) 0 var(--e5); max-width:19ch; font-size:var(--t-titulo)}
.marcas-titulo .grad{display:block}
.pg-inicio .marcas-logos>li{min-height:46px; padding:7px 8px}
@media (min-width:600px){ .pg-inicio .marcas-logos>li{min-height:88px} }
@media (min-width:1024px){ .marcas-titulo{margin-bottom:var(--e8)} .pg-inicio .marcas-logos>li{min-height:120px} }
/* filetes do mural dentro de cada célula (e não no fundo da lista): antes de os logos entrarem em cascata, a grade fica
   só com a borda, sem virar um bloco cinza. 2 colunas no celular, 7 a partir de 600 px (a mesma solução de Quem somos) */
.pg-inicio .marcas-logos{gap:0; background:transparent}
.pg-inicio .marcas-logos>li{box-shadow:inset -1px -1px 0 var(--linha)}
.pg-inicio .marcas-logos>li:nth-child(2n){box-shadow:inset 0 -1px 0 var(--linha)}
.pg-inicio .marcas-logos>li:nth-last-child(-n+2){box-shadow:inset -1px 0 0 var(--linha)}
.pg-inicio .marcas-logos>li:nth-child(2n):nth-last-child(-n+2){box-shadow:none}
@media (min-width:600px){
  .pg-inicio .marcas-logos>li,.pg-inicio .marcas-logos>li:nth-child(2n),.pg-inicio .marcas-logos>li:nth-last-child(-n+2){box-shadow:inset -1px -1px 0 var(--linha)}
  .pg-inicio .marcas-logos>li:nth-child(7n){box-shadow:inset 0 -1px 0 var(--linha)}
  .pg-inicio .marcas-logos>li:nth-last-child(-n+7){box-shadow:inset -1px 0 0 var(--linha)}
  .pg-inicio .marcas-logos>li:nth-last-child(1){box-shadow:none}
}

/* =====================================================================
   5 · TRABALHOS EM DESTAQUE (Papel)
   ===================================================================== */
.trab-caixa{position:relative; margin-top:var(--e5)}
.trab .capa{--proporcao:1/1}
/* celular: os 4 casos à vista de uma vez, um por linha, com a capa em miniatura (nada escondido na lateral) */
.trab-lista.faixa{list-style:none; display:grid; gap:0; margin:0; padding:0; overflow:visible; scroll-snap-type:none; border-top:1px solid var(--linha)}
.trab{border-bottom:1px solid var(--linha)}
.trab-link{display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:14px; padding:12px 0}
.trab-link .caso-capa{border-radius:14px}
.trab-texto{display:flex; flex-direction:column; gap:3px; min-width:0}
.trab-n{font-size:12px; font-weight:500; color:var(--apoio)}
.trab-nome{font-size:1.25rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--texto)}
.trab-resultado{font-size:15px; line-height:1.35; color:var(--apoio); font-weight:500}
.trab-numero,.trab-legenda{display:inline}
.trab-selo{display:block; margin-bottom:3px; font-size:11px; letter-spacing:.02em; text-transform:uppercase; color:var(--acento)}
.trab-seta{display:none}
.trab-links{margin-top:var(--e4); display:flex; flex-wrap:wrap; gap:var(--e2) var(--e6)}
.trab-cursor{display:none}
@media (max-width:1023px){
  /* miniaturas: um objeto só por capa, sem legenda dentro */
  .trab .capa--adv .capa-legenda,.trab .capa--adv .capa-fone,.trab .capa--derm .capa-agenda,.trab .capa-leque{display:none}
  .trab .capa--adv .capa-pontos{left:9cqw; top:9cqw; bottom:auto}
  .trab .capa--adv .capa-grade{--cp:calc(82cqw / 16)}
  .trab .capa--derm .capa-fone{--iphone-w:64cqw; left:auto; right:8cqw; top:12cqw; bottom:auto}
  .trab .capa--derm .selo{display:none}
  .trab .capa--levany>.capa-foto{object-position:72% 20%}
}

/* computador sem mouse (notebook com toque, tablet deitado): as 4 capas à vista, em grade */
@media (min-width:1024px){
  .trab-lista.faixa{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); overflow:visible; margin:0; padding:0; scroll-snap-type:none; border-top:0}
  .trab{border-bottom:0}
  .trab-link{display:flex; flex-direction:column; align-items:stretch; padding:0; gap:var(--e3)}
  .trab .capa{--proporcao:597/752}
  .trab-nome{font-size:var(--t-destaque)}
  .trab-resultado{font-size:16px}
  /* no computador "Os números" sai e cada linha dos trabalhos traz o número grande (um bloco só) */
  .trab-resultado{display:flex; flex-direction:column; gap:4px}
  .trab-numero{display:block; font-size:clamp(2rem, 1rem + 1.6vw, 2.75rem); font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--acento); font-variant-numeric:tabular-nums; white-space:nowrap}
  .trab-legenda{display:block; color:var(--apoio)}
}
/* computador com mouse: a lista com o nome gigante em linha própria e o resultado embaixo e a capa ao lado */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* a capa fica parada numa coluna à direita (nunca segue o mouse) e o texto nunca passa por baixo dela */
  .trab-caixa{--capa-lado:clamp(300px, 25vw, 372px)}
  .trab-lista.faixa{display:block; margin-right:calc(var(--capa-lado) + 56px)}
  .trab{border-top:1px solid var(--linha)}
  .trab:last-child{border-bottom:1px solid var(--linha)}
  .trab .caso-capa{display:none}
  .trab-link{display:block; padding:clamp(22px, 2vw, 30px) 0; transition:opacity var(--d-ui) var(--ease-entra)}
  .trab-texto{display:grid; grid-template-columns:88px minmax(0,1fr) 48px; grid-template-rows:auto auto; column-gap:var(--gap); row-gap:6px; align-items:baseline}
  .trab-n{grid-row:1; grid-column:1; font-size:var(--t-mono)}
  .trab-nome{grid-row:1; grid-column:2; font-size:clamp(2.25rem, .9rem + 2.6vw, 3.5rem); letter-spacing:-.045em; line-height:1}
  /* o número e a frase dele lado a lado (a frase centrada no número); o selo em cima, quando houver */
  .trab-resultado{grid-row:2; grid-column:2; font-size:clamp(1.0625rem, .9rem + .35vw, 1.25rem); max-width:none; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:22px; row-gap:8px; margin-top:8px}
  .trab-numero{grid-column:1; font-size:clamp(2.25rem, .9rem + 2.6vw, 3.5rem)}
  .trab-legenda{grid-column:2; max-width:44ch; line-height:1.4}
  .trab-selo{grid-column:1 / -1; margin-bottom:0}
  .trab-selo + .trab-legenda{grid-column:1 / -1; max-width:54ch}
  .trab-selo{font-size:12px; margin-bottom:6px}
  .trab-seta{grid-row:1; grid-column:3; display:block; justify-self:end; font-size:var(--t-destaque); color:var(--apoio); transition:transform var(--d-ui) var(--ease-entra), color var(--d-ui)}
  .trab-lista.tem-foco .trab-link{opacity:.42}
  .trab-lista.tem-foco .trab-link.foco{opacity:1}
  .trab-link.foco .trab-seta{transform:translateX(6px); color:var(--texto)}
  .trab-cursor{
    display:block; position:absolute; left:0; top:0; z-index:4; pointer-events:none;
    width:var(--capa-lado); aspect-ratio:597/752;
    border-radius:var(--r-painel); overflow:hidden; box-shadow:var(--s-janela);
    clip-path:inset(50% 50% 50% 50% round var(--r-painel)); visibility:hidden;
  }
  .trab-cursor-dentro{position:absolute; inset:0}
  .trab-cursor-dentro>.caso-capa{position:absolute; inset:0; display:block; border-radius:0; opacity:0; aspect-ratio:auto; height:100%; transition:opacity .25s ease}
  .trab-cursor-dentro>.caso-capa.ativa{opacity:1}
  /* a imagem enche o quadro inteiro; "Ver o caso" fica sobre ela, no canto de baixo, num degradê curto.
     O degradê e o rótulo moram DENTRO de cada capa da janela (o inicio.js copia o rótulo pra cada uma): na troca eles
     entram e saem junto com a capa, no mesmo corte, e nunca trocam de cor antes dela (nada da prévia nova por cima da velha) */
  .trab-cursor>.trab-cursor-rotulo{display:none}
  .trab-cursor-dentro>.caso-capa::after{content:""; position:absolute; inset:auto 0 0 0; height:26%; z-index:5; pointer-events:none; background:linear-gradient(to top, rgba(10,11,13,.62) 0%, rgba(10,11,13,.28) 48%, rgba(10,11,13,0) 100%)}
  .trab-cursor-rotulo{
    position:absolute; left:22px; bottom:20px; z-index:6; display:flex; align-items:center; gap:8px;
    color:var(--claro); font-size:13px; font-weight:500; letter-spacing:.02em; text-transform:uppercase;
  }
  .trab-cursor-rotulo::after{content:"→"; font-family:var(--fonte); font-size:16px; letter-spacing:0; text-transform:none}
  /* capa clara (dermatologista): o degradê é do Papel e o rótulo em Tinta */
  .trab-cursor-dentro>.caso-capa.capa--derm::after{background:linear-gradient(to top, rgba(245,245,242,.92) 0%, rgba(245,245,242,.5) 50%, rgba(245,245,242,0) 100%)}
  .trab-cursor-dentro>.caso-capa.capa--derm>.trab-cursor-rotulo{color:var(--tinta)}
  /* no cartão o rótulo "Ver o caso" ocupa o pé: a legenda da grade fica só no caso */
  .trab-cursor .capa-legenda{visibility:hidden}
}

/* =====================================================================
   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 trabalhos.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}
}

/* 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 inicio.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%)}

/* a capa ganha vida quando aparece (celular): os 192 pontos acendem em ordem embaralhada fixa, a partir de 35% */
.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} }

/* =====================================================================
   7 · ATÉ ONDE A GENTE VAI (Papel) · a escada aprovada
   celular: o nome dentro da barra, "NÍVEL n" à direita, de baixo pra cima
   ===================================================================== */
.niveis h2{max-width:17ch}
.escada{margin-top:var(--e5); overflow-x:clip; overflow-y:visible}
.degraus{list-style:none; padding:0; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:6px}
.degrau{width:calc(52% + var(--n) * 12%)}
.degrau:nth-child(1){--cor:color-mix(in oklab, var(--verde) 12%, var(--papel))}
.degrau:nth-child(2){--cor:color-mix(in oklab, var(--verde) 24%, var(--papel))}
.degrau:nth-child(3){--cor:color-mix(in oklab, var(--verde) 42%, var(--papel))}
.degrau:nth-child(4){--cor:var(--verde)}
.degrau a{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3);
  min-height:46px; padding:11px 16px; border-radius:14px 14px 4px 4px;
  background:var(--cor); color:var(--tinta); text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.degrau:nth-child(4) a{color:var(--claro)}
.degrau-nivel{order:2; font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:color-mix(in oklab, var(--tinta) 78%, var(--verde)); white-space:nowrap}
.degrau:nth-child(4) .degrau-nivel{color:var(--claro)}
.degrau-nome{font-size:1.25rem; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.degrau-linha{display:none; text-wrap:pretty}
.diagnostico{
  margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-radius:var(--r-janela); background:var(--noite-painel); color:var(--claro);
}
.diagnostico .etapa{width:22px; height:22px; color:var(--menta)}
.diagnostico-nome{font-size:1.25rem; font-weight:700; letter-spacing:-.03em}
.diagnostico-linha{flex-basis:100%; color:var(--cinza); font-size:15px; line-height:1.35}
.niveis-pe{margin-top:var(--e4); display:flex; flex-direction:column; gap:var(--e4)}
.niveis-todos{display:flex; align-items:center; gap:10px; color:var(--apoio); font-size:16px}
.niveis-todos strong{color:var(--texto); font-weight:600}
.laco{width:20px; height:20px; color:var(--acento); flex:none}
.niveis-links{display:flex; flex-direction:column; align-items:stretch; gap:var(--e2)}
.niveis-teste{white-space:normal; text-align:left; justify-content:space-between; line-height:1.25; padding-block:12px}
@media (min-width:1024px){
  .niveis h2{max-width:none}
  .escada{margin-top:var(--e7)}
  .degraus{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); align-items:end; gap:14px; height:min(46vh, 430px)}
  .degrau{width:auto; height:calc(52% + var(--n) * 12%)}
  .degrau a{height:100%; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:var(--e3); padding:28px 28px 32px; border-radius:22px 22px 0 0}
  .degrau-nivel{order:0; font-size:var(--t-mono)}
  .degrau-nome{font-size:clamp(1.75rem, 1rem + 1.3vw, 2.5rem)}
  /* grafite não passa 4,5:1 sobre o verde dos degraus 2 e 3; um tom quase Tinta passa com folga */
  .degrau-linha{display:block; color:color-mix(in oklab, var(--tinta) 72%, var(--grafite)); font-size:clamp(1rem, .9rem + .25vw, 1.1875rem); line-height:1.4; max-width:24ch}
  .degrau:nth-child(4) .degrau-linha{color:var(--claro)}
  .diagnostico{margin-top:0; border-radius:0 0 var(--r-janela) var(--r-janela); padding:22px 32px; flex-wrap:nowrap; gap:20px}
  .diagnostico-nome{font-size:var(--t-destaque)}
  .diagnostico-linha{flex-basis:auto; padding-left:20px; border-left:1px solid var(--filete-noite); font-size:var(--t-texto)}
  .niveis-pe{flex-direction:row; justify-content:space-between; align-items:center}
  .niveis-links{flex-direction:row; align-items:center; gap:var(--e5)}
  /* o link com o mesmo corpo, peso e altura de linha do texto do botão, no mesmo eixo */
  .niveis-links .link-seta{margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.1; min-height:48px; align-self:center}
  .niveis-teste{justify-content:center}
  .niveis-todos{font-size:var(--t-texto)}
}
@media (hover:hover) and (pointer:fine){
  .degrau a{transition:transform var(--d-ui) var(--ease-entra)}
  .degrau a:hover{transform:translateY(-6px)}
}

/* =====================================================================
   8 · QUEM FAZ + FECHO (Noite, uma seção só)
   ===================================================================== */
.fecho-quem{padding-block:var(--secao-pg) calc(var(--secao-pg) * .9) !important}
.quem-grade{display:flex; flex-direction:column}
.quem-texto{display:contents}
.quem-titulo{max-width:16ch}
.quem-link{order:3; align-self:flex-start; margin-top:var(--e3) !important}
.socios{order:2; margin-top:var(--e4); display:grid; grid-template-columns:1fr 1fr; gap:12px}
.socio{margin:0}
.socio-foto{position:relative; aspect-ratio:4/5; border-radius:var(--r-painel); overflow:hidden; background:var(--noite-painel); isolation:isolate}
.socio-recorte{position:absolute; inset:0}
.socio-recorte img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.96)}
/* mesmo recorte e mesma altura de rosto nos dois */
.socio-foto--jose .socio-recorte{transform:scale(1.12); transform-origin:50% 62%}
.socio-foto--rogge .socio-recorte{transform-origin:0 0; transform:translate(-86%, -26%) scale(2.08)}
.socio-foto::after{content:""; position:absolute; inset:auto 0 0 0; height:50%; z-index:1; background:linear-gradient(to top, rgba(10,11,13,.88) 0%, rgba(10,11,13,0) 100%); pointer-events:none}
.socio-legenda{position:absolute; left:12px; right:10px; bottom:12px; z-index:2; display:flex; flex-direction:column; gap:3px}
.socio-nome{font-size:18px; font-weight:700; letter-spacing:-.025em; line-height:1.1; color:var(--claro)}
.socio-faz{font-size:11px; font-weight:500; color:#D4D6DB; text-transform:uppercase; letter-spacing:.02em; text-wrap:balance}
@media (max-width:599px){ .socio-legenda{left:10px; right:8px} .socio-faz{font-size:clamp(10px, 2.85vw, 11px); letter-spacing:0} }
.socio-linha{margin-top:var(--e2); font-size:13.5px; line-height:1.36; color:var(--apoio)}
.socio-linha strong{color:var(--texto); font-weight:600}

.fecho-grade{margin-top:var(--e5); padding-top:var(--e5); border-top:1px solid var(--linha); position:relative}
@media (max-width:1023px){ .fecho-texto>.rotulo{display:none} .fecho-quem .fecho-acoes{gap:var(--e1)} }
.fecho-quem .fecho-titulo{font-size:clamp(2.125rem, 1.4rem + 3.6vw, 5.5rem)}
.fecho-quem .fecho-apoio{margin-top:var(--e4)}
/* celular: a notificação sozinha, logo acima do botão */
.fecho-notif{
  margin-top:var(--e4); display:grid; grid-template-columns:auto 1fr; column-gap:11px; align-items:center;
  padding:11px 14px 11px 11px; border-radius:20px; max-width:360px;
  background:rgba(245,245,245,.94); color:#000; box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
.fn-ic{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(45deg,#F9A13B 0%,#E1306C 50%,#8A3AB9 100%)}
.fn-ic svg{width:62%; height:62%}
.fn-txt{min-width:0; display:flex; flex-direction:column; gap:1px}
.fn-cab{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:15px; line-height:1.25}
.fn-cab b{font-weight:600}
.fn-cab span{font-size:13px; color:rgba(60,60,67,.6)}
.fn-corpo{font-size:15px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fecho-quem .fecho-acoes{margin-top:var(--e4)}

@media (min-width:1024px){
  .quem-grade{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:end}
  .quem-texto{display:block; grid-column:1 / 6; align-self:center}
  .quem-texto h2{font-size:clamp(2.5rem, 1.2rem + 2.2vw, 3.25rem); max-width:none}
  .quem-link{margin-top:var(--e6) !important}
  .socios{grid-column:7 / 13; margin-top:0; gap:var(--gap)}
  .socio-legenda{left:24px; right:20px; bottom:22px; gap:6px}
  .socio-nome{font-size:var(--t-destaque)}
  .socio-faz{font-size:13px}
  .socio-linha{font-size:17px; max-width:32ch}
  .fecho-quem{overflow:clip; padding-bottom:0 !important}
  .fecho-grade{
    margin-top:var(--e8); padding-top:var(--e8);
    display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:start;
  }
  .fecho-texto{grid-column:1 / 8; padding-bottom:var(--e6)}
  .fecho-quem .fecho-titulo{max-width:12ch}
  /* o aparelho cabe inteiro na seção e termina ~64 px acima do filete do rodapé (32 aqui + 32 do rodapé), sem corpo
     cortado reto na linha; um filete só entre o fecho e o rodapé (o do rodapé). O brilho morre antes de qualquer borda.
     Aparelho de ~232 px no 1440 (era 290): o Início fica abaixo de 8,9 telas sem apertar o topo do fecho */
  .fecho-fone{
    position:relative; grid-column:9 / 13; align-self:end; display:flex; justify-content:center; align-items:flex-start;
    padding-bottom:var(--e6); overflow:visible;
  }
  .fecho-fone::before,.fecho-fone::after{content:""; position:absolute; z-index:0; left:-30%; right:-30%; top:-12%; bottom:0; pointer-events:none}
  .fecho-fone::before{
    background:radial-gradient(closest-side at 50% 50%, rgba(61,220,151,.2) 0%, rgba(61,220,151,.11) 34%, rgba(61,220,151,.04) 62%, rgba(61,220,151,0) 100%);
  }
  /* grão fino por cima do brilho: tira as faixas do degradê no Noite */
  .fecho-fone::after{
    opacity:.55; mix-blend-mode:screen;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 0%, rgba(0,0,0,.5) 50%, transparent 100%); mask-image:radial-gradient(closest-side at 50% 50%, #000 0%, rgba(0,0,0,.5) 50%, transparent 100%);
  }
  .fecho-fone-movel{position:relative; z-index:1}
  .fecho-fone .iphone{--iphone-w:min(232px, 17vw, calc((100svh - 300px) * .482))}
}

/* sem JavaScript (ou a base não subiu): nada de palco preso; a ilustração parada entra no lugar */
/* .js-sim só falta quando o JavaScript está desligado de verdade; a trava de 3 s (rede lenta)
   tira o .js mas não o .js-sim, então o layout do uau não muda (nada de CLS) e o pôster parado continua no lugar */
html:not(.js-sim) .uau:not(.uau--fila){display:block}
html:not(.js-sim) .uau:not(.uau--fila) .palco,html:not(.js-sim) .uau:not(.uau--fila) .pista{display:none}
html:not(.js-sim) .uau .abertura{min-height:0; padding-bottom:var(--e7)}
html:not(.js-sim) .uau .abertura-texto{margin-top:var(--e4)}
.uau-sem-js{margin:0 auto; padding-bottom:var(--secao-pg); display:flex; flex-direction:column; align-items:center; gap:var(--e3)}
.uau-sem-js img{width:min(100%, 460px); height:auto; border-radius:var(--r-painel); border:1px solid var(--linha)}

/* =====================================================================
   MOVIMENTO REDUZIDO (e sem JS): o uau vira capítulos em fila
   ===================================================================== */
/* a fila está no HTML desde o começo e o CSS já a desenha no primeiro quadro (a classe "reduzido" vem do script do <head>):
   o JS não muda a geometria de nada, só acorda as telas */
.uau-fila{display:none; padding-bottom:var(--secao-pg)}
html.reduzido .uau,.uau.uau--fila{display:block}
html.reduzido .uau .abertura,.uau.uau--fila .abertura{min-height:0; padding-bottom:var(--e6)}
html.reduzido .uau .palco,html.reduzido .uau .pista,.uau.uau--fila .palco,.uau.uau--fila .pista{display:none}
html.reduzido .uau .uau-fila,.uau.uau--fila .uau-fila{display:block}
html.reduzido .ab-entra{opacity:1}
.fila-legenda{margin:0 auto; padding-top:var(--e5); text-align:center}
.fila-item{display:grid; gap:var(--e5); justify-items:center; text-align:center; padding:var(--e7) 0; border-top:1px solid var(--linha)}
.fila-item .iphone,.fila-fone{--iphone-w:min(240px, 60vw)}
.fila-fone{width:var(--iphone-w); aspect-ratio:482 / 1000; flex:none}
.fila-texto{max-width:30rem}
.fila-texto .rotulo{justify-content:center}
.fila-texto h3{margin-top:var(--e2)}
.fila-texto p{margin-top:var(--e2); color:var(--apoio)}
@media (min-width:1024px){
  .fila-item{grid-template-columns:1fr 1fr; text-align:left; justify-items:start; align-items:center}
  .fila-texto .rotulo{justify-content:flex-start}
  .fila-item .iphone,.fila-fone{--iphone-w:300px; justify-self:center}
}


/* =====================================================================
   LINHA DO TEMPO EM VOLTA DO CELULAR (computador · decisão 13, direção C do motion v2)
   Uma cartela por capítulo: hora em Mono, o evento e o check. Entra no mesmo limiar do capítulo
   (o inicio.js comanda); a da vez fica em Tinta e puxa um fio fino até o aparelho, as de trás recuam.
   ===================================================================== */
.linha-tempo,.lt-fio{display:none}
@media (min-width:1024px){
  .linha-tempo{
    --lt:0; display:flex; flex-direction:column; gap:30px; list-style:none; margin:0; padding:0 0 0 0;
    grid-column:11 / 13; grid-row:1; align-self:center; position:relative;
    opacity:0; transition:opacity .4s var(--ease-entra);
  }
  .linha-tempo.ativa{opacity:1}
  /* o filete vertical que enche até a cartela da vez */
  .linha-tempo::before,.linha-tempo::after{content:""; position:absolute; left:8px; top:10px; bottom:10px; width:2px; margin-left:-1px; border-radius:1px; background:var(--linha)}
  .linha-tempo::after{background:var(--acento); transform-origin:50% 0; transform:scaleY(var(--lt)); transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .lt-item{position:relative; display:grid; grid-template-columns:16px minmax(0,1fr); column-gap:14px; row-gap:3px; align-items:center; opacity:0}
  .lt-no{grid-row:1 / 3; align-self:start; margin-top:1px; position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:var(--fundo); border:2px solid var(--linha-forte); display:grid; place-items:center; transition:background-color .3s, border-color .3s}
  .lt-no svg{width:12px; height:12px; fill:none; stroke:var(--claro); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:14; stroke-dashoffset:14; transition:stroke-dashoffset .4s cubic-bezier(.16,1,.3,1) .1s}
  .lt-hora{grid-column:2; font-size:12px; line-height:1.2; letter-spacing:.02em; text-transform:uppercase; color:var(--apoio)}
  .lt-evento{grid-column:2; font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.25; color:var(--apoio); transition:color .4s}
  .lt-item.feito .lt-no{background:var(--acento); border-color:var(--acento)}
  .lt-item.feito .lt-no svg{stroke-dashoffset:0}
  .lt-item.atual .lt-evento{color:var(--texto)}
  /* o fio da cartela da vez até a borda do aparelho */
  .lt-fio{display:block; position:absolute; left:0; top:0; height:1px; width:0; background:var(--acento); opacity:.55; transform-origin:100% 50%; pointer-events:none}
}

/* o rótulo da abertura sai antes de encostar no cabeçalho transparente */
.abertura-faixa{will-change:opacity}

/* a capa que voa (View Transition): a antiga sai em 120 ms 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}

/* troca seca no celular do uau: o vídeo entra sem esmaecer por cima da reserva, e a reserva some quando ele está à vista
   (nenhum quadro com a tela HTML e o vídeo sobrepostos) */
#uau .fone .iphone-video{transition:none}
#uau .fone.iphone--video-on .iphone-tela>.tela{visibility:hidden}
/* troca pra um capítulo com vídeo: até o vídeo novo aparecer (a base mostra ele um quadro depois), o pôster dele já
   pinta como fundo da tela, e a tela HTML de reserva e o 9:41 HTML ficam escondidos (o pôster traz os dele).
   Nenhum quadro mostra a reserva entre a tela velha e o vídeo novo. O inicio.js só liga isso com o pôster já baixado. */
#uau .fone.fone--poster:not(.iphone--video-on) .iphone-tela{background:#fff var(--fone-poster) center / cover no-repeat}
#uau .fone.fone--poster:not(.iphone--video-on) .iphone-tela>.tela,
#uau .fone.fone--poster:not(.iphone--video-on) :is(.iphone-hora,.iphone-sinais,.iphone-inicio){visibility:hidden}

/* =====================================================================
   CELULAR: o cabeçalho e a barra do WhatsApp enquanto os capítulos rolam
   e a pílula do cabeçalho mais cedo, com fade
   ===================================================================== */
@media (max-width:1023px){
  html.uau-preso .cabecalho:not(:focus-within){transform:translateY(calc(-100% - 56px))}
  /* a barra do WhatsApp sai (com a transição dela) enquanto o aparelho ocupa o pé da tela: a .fone-caixa tem
     data-sem-botao-fixo e a base recolhe a barra enquanto ela passa pela faixa de baixo. Volta quando o palco solta e o
     aparelho sobe. O aparelho aparece inteiro. */
  /* nos capítulos, o dedo não rola a página (nem a inércia): o inicio.js anda um capítulo por gesto */
  html.uau-preso #uau .palco{touch-action:none}
  .pg-inicio .cabecalho-barra{transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, -webkit-backdrop-filter .2s ease, backdrop-filter .2s ease}
  .pg-inicio .cabecalho[data-tom="papel"].inicio-flutua .cabecalho-barra{
    background:color-mix(in srgb, var(--painel) 86%, transparent); border-color:var(--filete);
    box-shadow:0 8px 30px rgba(17,17,19,.06);
    -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  }
}


/* =====================================================================
   o painel do capítulo 4 entra com o primeiro bloco ("Olá!" e o cartão "Bastidor do
   atendimento") já à vista; só os blocos de baixo chegam em cascata. Nenhum quadro com a tela vazia.
   ===================================================================== */
#uau .tela-painel.tocando .pn-ola,#uau .tela-painel.tocando .pn-ola + .pn-sec{animation:none}

/* os 14 logos ficam fora da primeira carga; a máscara (o arquivo .svg) só é pedida
   quando o mural chega perto (o inicio.js põe .perto). Sem JS, ou na trava de 3 s, eles carregam normalmente. */
html.js .marcas-logos:not(.perto) .logo{-webkit-mask:none !important; mask:none !important; background-color:transparent !important}

/* 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}

/* o Início no computador abaixo de 9 telas: a lista dos trabalhos fecha com 64 px de respiro */
@media (min-width:1024px){ .pg-inicio .trabalhos{padding-bottom:var(--e8)} }

/* =====================================================================
   acabamento de 15/10, tarde
   ===================================================================== */

/* front 8: o aparelho parado da abertura também no computador, no mesmo lugar e no mesmo tamanho do celular do palco
   (topo 6 px abaixo do topo da manchete, borda direita onde o inicio.js põe a do palco, escala .92). Pinta sem JS.
   Sobe 80 px na carga só com transform (sem opacidade: não atrasa o LCP). Some quando o V1 já toca no palco. */
@media (min-width:1024px) and (pointer:fine){
  .abertura-lado{position:static}
  html.js-sim:not(.reduzido) .uau:not(.uau--pronto):not(.uau--fila) .ab-fone{
    display:block; position:absolute; top:6px; pointer-events:none;
    right:calc(-1 * clamp(0px, (100vw - var(--largura) - 2 * var(--margem)) / 2, 160px));
    --iphone-w:calc(min(372px, (100svh - 176px) * .482) * .92);
  }
  .ab-fone .iphone{animation:ab-fone-sobe 1.1s cubic-bezier(.16,1,.3,1) .15s both}
}
@keyframes ab-fone-sobe{from{transform:translateY(80px)}to{transform:none}}

/* arte 2 (celular): o aparelho dos capítulos com ~250 px de largura (antes 160): a tese repetida sai (ela entra
   na frase do celular assentado), a legenda e o "Pausar" sobem pra cima do aparelho, e ele sangra pelo pé da tela,
   por baixo da barra do WhatsApp. Na abertura ele continua do tamanho de antes (o inicio.js reduz com scale). */
@media (max-width:1023px){
  .uau{--iphone-w-heroi:min(calc((100svh - 326px) * .482), calc(60svh * .482), 240px)}
  .fone-sonda{position:absolute; width:var(--iphone-w-heroi); height:1px; visibility:hidden; pointer-events:none}
  .palco-grade{justify-content:flex-start; gap:8px; padding-top:14px; padding-bottom:0}
  .cap-atual{margin-top:auto}
  .fone-caixa{margin-bottom:auto}
  .cap-tese{display:none}
  .cap-janela{margin-top:0}
  .cap-atual-frase{max-width:30ch; margin-inline:auto}
  /* o aparelho cabe inteiro, do topo ao pé, abaixo do título, da legenda e do trilho (~165 px) com ~12 px de folga */
  .fone-movel{--iphone-w:clamp(180px, calc((100svh - 178px) * .482), 264px)}
  .fone-pe{order:-1; margin:0 0 8px; min-height:36px; gap:8px; max-width:calc(100vw - 2 * var(--margem))}
  .fone-pe .fone-legenda{font-size:11px; letter-spacing:0; min-width:0; overflow:hidden; text-overflow:ellipsis}
  .fone-pausa{position:static; flex:none; min-height:40px; padding:0 10px; font-size:12px}
  /* o texto do app nunca abaixo de ~11 px: zoom do app um pouco maior nesse aparelho */
  #uau .fone .tela{--z-med:1.34}
  #uau .fone .tela-instagram{--z-med:1.32}
  #uau .fone .tela-google{--z-med:1.28}
  #uau .fone .tela{--z-peq:1.5}
  #uau .fone .tela-instagram,#uau .fone .tela-google{--z-peq:1.4}
}
/* telas estreitas (320 a 389 px): a legenda quebra em duas linhas em vez de cortar com reticências */
@media (max-width:389px){
  .fone-pe .fone-legenda{white-space:normal; text-overflow:clip; text-align:left; line-height:1.25; text-wrap:balance}
}

/* arte 4 (celular): cada trabalho com a sua miniatura à direita do número (pontos da advogada, recorte do WhatsApp da
   dermatologista, foto da Levany e do Rogge), como a prévia do computador */
.numero-mini{display:none}
@media (max-width:1023px){
  .numero-celula{grid-template-columns:minmax(0,1fr) 80px; column-gap:16px}
  .numero-celula .numero-topo{grid-column:1 / -1}
  .numero-celula .numero-linha,.numero-celula .numero-legenda{grid-column:1}
  .numero-celula .numero-andamento{grid-column:1 / -1}
  .numero-celula--andamento .numero-mini{grid-row:3 / span 1; align-self:start; margin-top:8px}
  .numero-mini{
    display:block; grid-column:2; grid-row:2 / span 2; align-self:center; position:relative;
    width:80px; height:80px; border-radius:16px; overflow:hidden; background:var(--noite-painel);
    box-shadow:inset 0 0 0 1px var(--filete-noite);
  }
  .numero-mini>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05)}
  .numero-mini--adv{display:grid; place-items:center}
  .numero-mini--adv .capa-grade{--cp:8.6px; grid-template-columns:repeat(7, var(--cp)); grid-auto-rows:var(--cp)}
  .numero-mini--adv .capa-grade i{animation:none}
  .numero-mini--adv.acesa .capa-grade i{animation:capa-ponto .45s ease var(--d) both}
  /* o WhatsApp da dermatologista: o iPhone desenhado inteiro, em miniatura, no centro do quadro (nenhuma palavra cortada
     na borda; a conversa fica no estado final) */
  .numero-mini--derm .iphone{--iphone-w:34px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
  .numero-mini--derm .iphone-corpo{box-shadow:none}
  .numero-mini--derm .iphone-inicio{height:1px}
  /* a conversa inteira, no tamanho de um aparelho de verdade reduzido (sem o zoom de tela pequena, que cortaria o topo) */
  .numero-mini--derm .tela{--z-mini:1}
}

/* motion 12 (computador): na prévia que segue a lista, a capa velha sai por corte de baixo pra cima e a nova entra
   por baixo (inicio.js); nunca as duas com opacidade parcial no mesmo pixel */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .trab-cursor-dentro>.caso-capa{opacity:1; visibility:hidden; transition:none}
  .trab-cursor-dentro>.caso-capa.ativa{visibility:visible; z-index:2}
  .trab-cursor-dentro>.caso-capa.saindo{visibility:visible; z-index:1}
}