/* Colors Lazer — hero
   ============================================================================
   AUDITORIA QUE GEROU ESTE ARQUIVO
   O corte diagonal do Figma não é componente do Norvin: ele exigia clip-path na
   foto, no véu e na cortina, mais um traço SVG desenhado por cima pra fingir a
   aresta. Era daí que vinham as duas coisas erradas — a divisória com cara de
   linha colada e a foto cortada duas vezes (caixa transbordando + object-fit).
   Fora isso, o reflexo da vitrine e a grade técnica dependiam de mask-image.
   Tudo isso saiu.

   O QUE FICOU: só componente premium do Norvin, com a geometria dele.
     aba trapezoidal 266x88 · pill de menu com chip · relógio de local ·
     display Inter Display -0.04em · subtítulo bold de duas linhas ·
     cluster de avatares + métrica · parágrafo muted · pill com chip e chevron ·
     card premiado r20 com estrelas, louros, filete e barrinhas de carrossel.

   A DIVISÃO: dois blocos sólidos encostados. O creme termina, o palco começa.
   Sem máscara, sem traço, sem degradê fingindo aresta — não tem como parecer
   falso porque não é desenho, é onde um bloco acaba e o outro começa.

   --u vale UM PIXEL da prancheta 1440x900 e limita pela ALTURA também, então a
   tipografia nunca cresce até colidir numa janela baixa.
   ============================================================================ */

:root{
  --u:clamp(.58px, min(100vw / 1440, 100svh / 900), 1.3px);

  /* Norvin: a base não é #000, são quatro pontos acima do zero. é isso que tira
     o aspecto de buraco e faz o preto aceitar luz por cima. */
  --base:#040404;
  --sup-2:#131313;
  --sup-3:#191919;
  --linha:rgba(255,255,255,.07);
  --muted:#9A9A9A;
  --branco:#FFFFFF;

  /* Colors Lazer */
  /* O CREME QUENTE, de volta. Ele chegou a virar #E9EEF9, um claro frio, por
     eu argumentar que o bege puxava para o marrom e não estava no guia da
     marca. Ele pediu o quente de volta, primeiro na seção 03 e depois no hero
     também, então volta a ser um valor só para o site inteiro.
     `--creme-quente` continua existindo como apelido porque a seção 03 foi
     escrita com ele; as duas apontam para a mesma cor. */
  --creme:#F1E7D5;
  --creme-quente:var(--creme);

  /* guia da marca */
  --azul-escuro:#0727BF;
  --azul-fundo:#0D4EE8;
  --azul-degrade:#154EE9;
  --rosa-degrade:#E252FF;
  --logo-amarelo:#FFFF44;
  --logo-turquesa:#64D8C4;
  --logo-rosa:#E14AE1;
  --tinta-60:rgba(4,4,4,.60);

  /* cor da cena: sai dos quadradinhos CMYK do próprio logo */
  --realce:#EF493E;

  --e-entrada:cubic-bezier(.16,1,.30,1);
  --e-saida:cubic-bezier(.55,0,1,.45);
  --e-lamina:cubic-bezier(.83,0,.17,1);
  --e-objeto:cubic-bezier(.22,1,.36,1);

  --split:48%;        /* a foto passa a mandar. a 64% ela virava faixa de canto;
                         o campo da colagem foi resolvido encurtando a FILA e
                         inclinando o eixo dela, não estreitando a foto. */

  /* origem da colagem, dentro da coluna creme */
  --ox:81%;
  --oy:50%;
  --topo:calc(98 * var(--u));   /* altura da faixa, medida no Figma */

  /* A ESTEIRA DE CLIENTES. Mora na raiz porque a faixa é SEÇÃO própria, irmã do
     hero e da cena, e não filha de nenhuma delas.
     `--esc` é o único número que o celular troca; todo o resto sai dele.
     1.15 e não 1: 40 de altura é a medida do Client Ticker do Norvin, que vive
     numa faixa de 1296; a nossa atravessa a tela inteira e pede um pouco mais. */
  --esc:1.62;
  --th:calc(56 * var(--u) * var(--esc));   /* altura da faixa */
  --gap:124;                                /* o Norvin usa 120; 96 enche a fila */
}

*{box-sizing:border-box}
/* a navbar é fixa: este respiro devolve ao fluxo a altura que ela tirou */
#app{padding-top:calc(92 * var(--u))}
/* e como ela flutua por cima, âncora que cai no topo de uma seção precisa
   descontar a altura dela, senão o título nasce escondido atrás da barra */
section[id],div[id]{scroll-margin-top:calc(100 * var(--u))}
html{background:var(--base)}
body{
  margin:0;
  background:var(--base);
  color:var(--branco);
  font-family:"Inter",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit}

/* ===================== O CARTÃO DO HERO ===================== */
/* no Norvin o hero é um cartão arredondado recuado da borda da página */
/* O cartão não começa mais no topo da tela: a navbar ocupa o recuo de cima, que
   é onde o preto da PÁGINA aparece. Por isso o cartão perdeu a faixa preta que
   eu tinha pintado dentro dele — ela não existia no template, era desenho meu. */
.hero{
  position:relative;
  margin:0 calc(20 * var(--u)) calc(20 * var(--u));
  height:calc(100svh - 112 * var(--u));
  min-height:calc(560 * var(--u));
  border-radius:calc(24 * var(--u));
  overflow:hidden;
  background:var(--creme);
  isolation:isolate;
}

/* ===================== PALCO DA FOTO (bloco da direita) ===================== */
.palco{
  position:absolute;
  left:var(--split); right:0; top:0; bottom:0;
  z-index:1;
  background:var(--base);
}
.camada{position:absolute;inset:0;opacity:0}
.camada[data-base]{opacity:1}
.camada .foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 34%;
  display:block;
}
/* scrim, não máscara: escurece só o topo e o pé, onde mora o card. a foto
   continua inteira, nada é recortado. vive dentro do palco. */
.veu{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    rgba(4,4,4,.42) 0%, rgba(4,4,4,.10) 15%,
    rgba(4,4,4,0) 34%, rgba(4,4,4,.20) 62%, rgba(4,4,4,.72) 100%);
}
/* cortina da entrada: a foto nasce pintada e é revelada. elemento coberto conta
   como pintado no LCP; elemento transparente não conta. */
.cortina{
  position:absolute;
  inset:0;
  z-index:5;
  background:var(--base);
}

/* ===================== NAVBAR ===================== */
/* A navbar de verdade do Norvin não tem fundo. O preto dela é o preto da PÁGINA,
   que é a cor base do template (#040404) — o hero é que é um cartão RECUADO
   dessa página. Antes eu vinha pintando uma faixa preta dentro do cartão pra
   simular isso: era um retângulo desenhado por cima, ou seja, exatamente a
   máscara que a gente combinou que não entra.
   Agora ela mora no recuo de cima, encostada nas mesmas margens do cartão, e
   não tem background nenhum declarado. */
/* ELA ACOMPANHA O SCROLL PARA CIMA.
   Tentei `sticky` primeiro, e não serve: sticky gruda dentro do PAI, e o pai
   dela é o `#app`, que tem a altura do hero. Passando disso, ela ia embora
   junto. Medido: com sticky, a 2100px de rolagem o topo dela estava em -1271.
   Então é `fixed`, e o buraco que ela deixa no fluxo é devolvido pelo
   `padding-top` do `#app`, logo abaixo. A conta do hero (100svh - 112u) não
   muda, porque 112 já era 92 da barra mais os 20 de respiro.
   O fundo NÃO mora nela: a navbar do Norvin não tem fundo, o preto dela é o
   preto da página. Quando ela descola do topo e passa a flutuar sobre seção
   clara, quem pinta é o `::before`, que sangra os 32u de recuo lateral para os
   dois lados. Sem isso apareceria o creme nas pontas da barra. */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  height:calc(92 * var(--u));
  margin:0;
  padding:0 calc(32 * var(--u));
  display:flex; align-items:center;
  font-family:"Inter Display","Inter",sans-serif;
  transition:transform .42s var(--e-entrada);
}
.navbar::before{
  content:"";
  position:absolute;inset:0;
  background:var(--base);
  z-index:-1;
  opacity:0;
  transition:opacity .3s linear;
}
.navbar[data-presa]::before{opacity:1}
/* rolando para baixo ela sai; para cima ela volta */
.navbar[data-oculta]{transform:translateY(-118%)}

/* a logo mora na barra, no lugar que era da aba trapezoidal fechada, e agora
   dentro de um link. O alvo de toque é o LINK, não a imagem: em 44px de altura
   ele cumpre o mínimo sem a logo precisar crescer. */
.nav-marca{
  display:flex;align-items:center;
  flex:none;
  min-height:44px;
  text-decoration:none;
  border-radius:calc(8 * var(--u));
  transition:opacity .25s linear;
}
@media (hover:hover){ .nav-marca:hover{opacity:.78} }
.nav-marca:focus-visible{outline:2px solid var(--realce);outline-offset:calc(4 * var(--u))}
.navbar .logo{
  height:calc(58 * var(--u));
  width:auto;
  object-fit:contain;
  flex:none;
}

/* botão de menu: o chip 36x36 r10 com as três barras de 17x1px (gap 4) do
   componente "Menu & Time". No desktop os itens estão à vista e ele seria
   redundante, então mora só no celular. */
.menu{
  display:none;
  margin-left:calc(26 * var(--u));
  align-items:center; gap:calc(12 * var(--u));
  height:calc(44 * var(--u));
  padding:0;
  border:0; background:transparent;
  color:var(--branco);
  font-family:inherit;
  font-size:calc(15 * var(--u));
  font-weight:600;
  cursor:pointer;
  flex:none;
}
.menu i{
  width:calc(40 * var(--u)); height:calc(40 * var(--u));
  border-radius:calc(10 * var(--u));
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:calc(4 * var(--u));
  flex:none;
  transition:background-color .2s linear;
}
.menu i b{display:block;width:calc(17 * var(--u));height:1px;background:var(--branco)}
.menu:hover i{background:rgba(255,255,255,.30)}

/* o filete vertical do Norvin: 0 0 3 22, M 1.5 1 L 1.5 21 */
.tracinho{
  width:calc(3 * var(--u));
  height:calc(26 * var(--u));
  flex:none;
  margin:0 calc(26 * var(--u));
}
.tracinho path{stroke:rgba(255,255,255,.22);stroke-width:1;fill:none}

/* itens de "Menu Links" com os nomes do Figma. o Figma escreve em caixa alta e
   é isso que dá o peso institucional da faixa. */
.links{
  margin-left:auto;
  display:flex; align-items:center;
  gap:calc(34 * var(--u));
  flex:none;
}
.links a{
  color:#E5E5E5;
  font-size:calc(14 * var(--u));
  font-weight:500;
  letter-spacing:.07em;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s linear;
}
.links a:hover{color:var(--branco)}

/* ===================== BOTÃO ===================== */
/* o botão do Norvin, medido no componente publicado: raio 10, padding 4/4/4/24,
   gap 16, chevron 9x15, e um preenchimento que entra pela direita — de onde
   está o chip.

   COMO ELE É PINTADO: o preenchimento é o BACKGROUND do próprio botão, um
   gradiente sólido ancorado à direita que cresce de 0 a 100% da largura.
   Não existe camada por cima, não existe overflow cortando nada, não existe
   texto duplicado. O raio já é respeitado porque quem pinta é o botão.

   A VARIAÇÃO DA COLORS LAZER: o chip não participa da inversão. Ele carrega a
   COR DA CENA e fica aceso o tempo todo, então o botão vira ao redor de um
   ponto de cor que é o da festa em cartaz — a mesma cor do bloco de
   "HISTÓRIA.", da barrinha ativa e do anel da miniatura. */
.btn{
  --h:52;
  --chip:42;
  --corpo:var(--branco);
  --tinta:var(--base);
  --enche:var(--base);
  --tinta-cheia:var(--branco);

  display:inline-flex; align-items:center;
  gap:calc(16 * var(--u));
  height:calc(var(--h) * var(--u));
  padding:calc(5 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) calc(24 * var(--u));
  border-radius:calc(10 * var(--u));
  text-decoration:none;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(16 * var(--u));
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  flex:none;
  cursor:pointer;
  color:var(--tinta);

  background-color:var(--corpo);
  background-image:linear-gradient(var(--enche), var(--enche));
  background-repeat:no-repeat;
  background-position:right center;
  background-size:0% 100%;
  transition:background-size .48s var(--e-entrada), color .26s linear;
}
.btn:hover,
.btn:focus-visible{
  background-size:100% 100%;
  color:var(--tinta-cheia);
}

.btn .chip{
  width:calc(var(--chip) * var(--u));
  height:calc(var(--chip) * var(--u));
  border-radius:calc(8 * var(--u));
  background:var(--realce);
  display:grid; place-items:center;
  flex:none;
  transition:background-color .5s linear;
}
.btn .chip svg{
  width:calc(9 * var(--u)); height:calc(15 * var(--u));
  display:block;
  transition:transform .28s var(--e-entrada);
}
.btn:hover .chip svg{transform:translateX(calc(4 * var(--u)))}

/* a instância da faixa fica na ponta direita */
.nav-cta{margin-left:calc(30 * var(--u))}

/* instância grande da coluna, invertida porque ali o fundo é creme */
.btn.grande{
  --h:66; --chip:54;
  --corpo:var(--base);
  --tinta:var(--creme);
  --enche:var(--creme);
  --tinta-cheia:var(--base);
  font-size:calc(17 * var(--u));
  padding:calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(30 * var(--u));
  border-radius:calc(12 * var(--u));
  gap:calc(20 * var(--u));
}
.btn.grande .chip{border-radius:calc(10 * var(--u))}

/* ===================== COLUNA EDITORIAL (creme) ===================== */
.editorial{
  position:absolute;
  left:0; top:0;
  width:var(--split); height:100%;
  z-index:3;
}

.display{
  position:absolute;
  left:calc(52 * var(--u)); top:calc(110 * var(--u));
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-weight:700;
  letter-spacing:-.04em;
  font-size:calc(52 * var(--u));
  line-height:.94;
  color:var(--base);
  white-space:nowrap;
}
.display .linha{display:block}
/* o único device da Colors Lazer que sobrevive à auditoria: o bloco de destaque
   é um retângulo cheio atrás do texto, sem máscara, e é ele que carrega a cor
   da cena. o resto da tela é preto, creme e a foto. */
.display .marcado{
  display:inline-block;
  background:var(--realce);
  color:var(--creme);
  padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
  margin-left:calc(-14 * var(--u));
  transform-origin:left center;
  transition:background-color .5s linear;
}

.sub{
  position:absolute;
  left:calc(52 * var(--u)); top:calc(330 * var(--u));
  margin:0;
  font-size:calc(24 * var(--u));
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.02em;
  color:var(--base);
  max-width:calc(360 * var(--u));
}

/* o cluster de avatares + métrica do Norvin vira o identificador da cena:
   conteúdo real, nunca uma métrica de cliente inventada */
.cena-id{
  position:absolute;
  left:calc(52 * var(--u)); top:calc(430 * var(--u));
  display:flex; align-items:center; gap:calc(20 * var(--u));
}
.miniaturas{display:flex}
.miniaturas span{
  width:calc(54 * var(--u)); height:calc(54 * var(--u));
  border-radius:100px;
  border:calc(2 * var(--u)) solid rgba(4,4,4,.16);
  background-size:cover; background-position:center;
  margin-left:calc(-16 * var(--u));
  transition:border-color .4s linear, transform .4s var(--e-entrada);
}
.miniaturas span:first-child{margin-left:0}
.miniaturas span:last-child{border-color:var(--realce);transition:border-color .5s linear}
.cena-id b{
  display:block;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(30 * var(--u));
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--base);
}
.cena-id small{display:block;font-size:calc(16 * var(--u));color:var(--tinta-60)}

.corpo{
  position:absolute;
  left:calc(52 * var(--u)); top:calc(524 * var(--u));
  margin:0;
  font-size:calc(16 * var(--u));
  line-height:1.5;
  color:var(--tinta-60);
  max-width:calc(290 * var(--u));
}

/* a instância grande do botão, posicionada na coluna */
.cta{
  position:absolute;
  left:calc(52 * var(--u)); top:calc(654 * var(--u));
  z-index:4;
}
/* linha de contato: mesma régua do "Time" do Norvin (15/400, barra apagada) */
.contato{
  position:absolute;
  left:calc(52 * var(--u)); top:calc(742 * var(--u));
  margin:0;
  font-size:calc(15 * var(--u));
  letter-spacing:-.01em;
  color:var(--tinta-60);
  white-space:nowrap;
  z-index:4;
}
.contato span{color:rgba(4,4,4,.32);margin-right:calc(10 * var(--u))}
.contato a{
  color:var(--base);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(4,4,4,.28);
  transition:border-color .18s linear;
}
.contato a:hover{border-color:var(--base)}
/* no dedo, o link do orçamento é o alvo mais importante da primeira dobra e era
   o menor de todos (93x18). a área cresce, o desenho não: ::after com inset
   negativo. a guarda é hover:none, não largura — quem não tem ponteiro é quem
   precisa de área, e isso independe do tamanho da tela. */
@media (hover:none){
  .contato a{position:relative}
  .contato a::after{content:"";position:absolute;inset:-15px -10px}
}

/* ===================== PALCO DOS OBJETOS ===================== */
/* A colagem vive na coluna creme, atrás do texto. Sobre a foto ela competia com
   o conteúdo fotográfico; o creme é o campo chapado que a colagem pede — é a
   mesma razão pela qual a colagem do Studio Loop funciona lá. */
.palco-obj{
  position:absolute;
  left:0; top:0;
  width:var(--split); height:100%;
  /* ACIMA do editorial (z-index 3). Em 2, a caixa transparente do editorial
     cobria a coluna inteira e engolia o clique dos cartões — eles pareciam
     clicáveis e não eram. Os dois não se sobrepõem no desenho, então subir não
     custa nada.
     A camada é transparente ao ponteiro e só os CARTÕES são clicáveis, assim os
     vãos entre eles não engolem o toque do que está atrás. */
  z-index:4;
  pointer-events:none;
}

/* ===================== A ACOLHIDA ===================== */
/* No Studio Loop o abajur pousa sobre a mancha laranja da marca: é a mancha que
   ACOLHE o objeto e transforma colagem em composição. A nossa é um disco na cor
   da cena, atrás de toda a fila — e, diferente da deles, ela ABRE pra receber
   quem chega (o gesto está no JS). */
.acolhida{
  position:absolute;
  left:var(--ox); top:var(--oy);
  width:calc(206 * var(--u)); height:calc(206 * var(--u));
  margin-left:calc(-103 * var(--u)); margin-top:calc(-103 * var(--u));
  z-index:1;
  border-radius:100%;
  background:var(--realce);
  pointer-events:none;
  transition:background-color .5s linear;
  will-change:transform;
}

/* ===================== ESTEIRA DE CARTÕES ===================== */
/* A mecânica do hero do Studio Loop, medida no bundle deles: todos os itens
   vivem numa ÚNICA RETA que passa pelo centro, e t anda um passo por batida.
   Quem está em t=0 está no centro — é o cartão que o hero acolhe.
   Cada peça é um CARTÃO de serviço com foto real do cliente, e a foto do cartão
   é a MESMA que abre no palco quando ele chega ao centro. */
.esteira{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
}
.peca{
  position:absolute;
  left:var(--ox); top:var(--oy);
  width:calc(150 * var(--u));
  height:calc(198 * var(--u));
  margin-left:calc(-75 * var(--u));
  margin-top:calc(-99 * var(--u));
  will-change:transform;
  /* a esteira é transparente ao ponteiro; o cartão não. assim os vãos entre
     cartões não engolem clique de nada que esteja atrás. */
  pointer-events:auto;
}
.peca[aria-hidden="true"]{pointer-events:none}

/* ===================== O CARTÃO DO NORVIN =====================
   Anatomia do "Responsive Cards / Open", medida no site publicado: raio 20,
   foto full-bleed escurecida por brightness(.7), texto branco por cima dela.
   UM componente, DUAS instâncias — os cartões pequenos que correm na esteira do
   hero e o cartão largo da seção "Para quem é". O que muda entre elas é
   tamanho e conteúdo; a anatomia é escrita uma vez só, aqui.
   No hero, o corpo é um nó separado da peça: a peça carrega o transform da
   esteira e dois donos do mesmo atributo brigam. */
.peca-corpo{
  position:relative;
  display:block;
  border-radius:calc(20 * var(--u));
  overflow:hidden;
  background:var(--sup-2);
  text-decoration:none;
  transition:transform .34s var(--e-entrada), box-shadow .34s var(--e-entrada);
}
.peca-foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  /* brightness(.7) é o valor do componente, e existe porque o texto branco vive
     por cima da foto. No hover ela ESCURECE — o cartão cresce, o texto de apoio
     aparece e a foto cede leitura pra ele. */
  filter:brightness(.7);
  transition:filter .34s var(--e-entrada), transform .5s var(--e-entrada);
}

.peca-corpo{
  width:100%; height:100%;
  box-shadow:0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(4,4,4,.24),
             0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(4,4,4,.12);
}
/* título no alto, descrição no pé — o place-content:center com vão largo do
   componente original */
.peca-texto{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding:calc(14 * var(--u)) calc(12 * var(--u));
  text-align:center;
  color:var(--branco);
  pointer-events:none;
}
.peca-nome{
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(13 * var(--u));
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.peca-resumo{
  font-family:"Inter Display","Inter",sans-serif;
  font-style:normal;
  font-size:calc(10 * var(--u));
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
  text-wrap:balance;
  opacity:0;
  transform:translateY(calc(6 * var(--u)));
  transition:opacity .28s linear, transform .34s var(--e-entrada);
}

/* No DESKTOP o cartão expande no hover e a foto acende — o gesto do cartão do
   Norvin. A guarda é hover:hover: quem não tem ponteiro não tem estado
   intermediário, e no dedo isso grudaria depois do toque. */
@media (hover:hover) and (pointer:fine){
  .peca-corpo:hover,
  .peca-corpo:focus-visible{
    transform:scale(1.18);
    box-shadow:0 calc(28 * var(--u)) calc(48 * var(--u)) rgba(4,4,4,.34),
               0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(4,4,4,.16);
  }
  .peca-corpo:hover .peca-foto,
  .peca-corpo:focus-visible .peca-foto{
    filter:brightness(.56);
    transform:scale(1.06);
  }
  .peca-corpo:hover .peca-resumo,
  .peca-corpo:focus-visible .peca-resumo{
    opacity:1;
    transform:translateY(0);
  }
}
/* o cartão que cresce passa por cima dos vizinhos */
.peca:has(.peca-corpo:hover),
.peca:has(.peca-corpo:focus-visible){z-index:200}

.peca-corpo:focus-visible{outline:calc(3 * var(--u)) solid var(--realce);outline-offset:calc(3 * var(--u))}

/* ===================== CONTROLES ===================== */
/* Faixa abaixo do hero, sobre o preto da página. Traz o ponto de conversão do
   serviço em cartaz e as barrinhas de carrossel do Norvin. */
.controles{
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(24 * var(--u));
  margin:calc(18 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u));
  font-family:"Inter Display","Inter",sans-serif;
}
.chips{
  font-size:calc(12 * var(--u));
  line-height:1.9;
  color:var(--muted);
  white-space:nowrap;
}
.chips b{display:inline;color:rgba(255,255,255,.92);font-weight:400}
.chips b::after{content:"";display:inline-block;width:calc(22 * var(--u))}
.chips span{display:inline;overflow:hidden}

/* barrinhas do carrossel do Norvin: a ativa cresce e ainda mostra o tempo.
   o botão é a área de toque; o trilho de 4px é desenhado no ::before, então dá
   pra engordar o alvo no celular sem engordar o desenho. */
.barras{display:flex;align-items:center;gap:calc(7 * var(--u));flex:none}
.barras button{
  position:relative;
  width:calc(10 * var(--u)); height:calc(22 * var(--u));
  border:0; padding:0; cursor:pointer;
  background:transparent;
  transition:width .45s var(--e-entrada);
}
.barras button[aria-current="true"]{width:calc(30 * var(--u))}
.barras button::before,
.barras button i{
  content:"";
  position:absolute;
  left:var(--pad, 0px); right:var(--pad, 0px); top:50%;
  height:calc(4 * var(--u));
  margin-top:calc(-2 * var(--u));
  border-radius:100px;
}
.barras button::before{background:rgba(255,255,255,.24)}
.barras button[aria-current="true"]::before{background:rgba(255,255,255,.5)}
.barras button i{
  display:block;
  background:var(--realce);
  transform:scaleX(0);
  transform-origin:left center;
  transition:background-color .5s linear;
}

/* ===================== SEÇÃO 03 — PARA QUEM É =====================
   Empresa, e só. Era uma grade de três públicos (Empresas, Condomínios,
   Famílias) roteando para três páginas; o foco fixado pelo cliente é empresa,
   então a grade saiu inteira. Condomínios e festas particulares continuam em
   /condominios e /festas, alcançados pelo menu e pelo rodapé.
   Sem grade, a seção deixa de ser roteador e passa a ser ARGUMENTO: um cartão
   largo, a instância grande do "Responsive Cards" do Norvin, com a frase que
   vende tranquilidade, a prova numérica do deck e o pedido.
   Vive sobre o preto da página, então o cartão lê sem véu nenhum por cima. */
/* ===================== SEÇÃO 03 — A CENA, EM DOIS ESTADOS =============
   A referência é um cartaz: a palavra do tamanho da página com o sujeito na
   frente dela. O mecanismo não é efeito de texto, é ORDEM DE CAMADA:

     janela+foto (z0) < lavagem (z1) < palavra (z2) < casal (z3) < base (z4) < texto (z5)

   `cena-fundo` e `cena-frente` são o MESMO recorte, mesmas dimensões, mesma
   caixa `--img-*`; no `frente` só o casal tem alfa. Registram sozinhos, e a
   palavra que mora entre os dois fica atrás das pessoas sem uma única máscara.

   ---- OS DOIS ESTADOS ----
   Tudo que muda entre o topo e o fim da seção interpola por `--p` (0→1, escrito
   pelo JS). Nada troca de asset e não existe crossfade entre duas artes:

     A (p=0)  fundo preto  · a foto sangra a tela  · palavra escrita sobre a foto
     B (p=1)  fundo creme  · a foto numa janela    · palavra virou ENTALHE

   O entalhe não é técnica nova: a palavra é CREME nos dois estados. Sobre o
   preto ela lê como palavra; sobre o creme, a mesma pixel lê como buraco na
   foto. É só o fundo que muda de lado.

   MEDIDAS (do script que cortou os assets, não de olho):
     imagem 1.332:1 · casal em x 0.338..0.633 e y 0.089..0.925 (inteiro, com pé)
   A janela do estado B sai do Figma `nkHUQo7YvSk2a2ORGJhp3s` nó 35:2:
     margem lateral 104 · topo 25% · base 94% · palavra encostada no topo dela */
/* tipa `--p` como número. Sem isto ela é um token de texto e todo calc() que
   a usa depende do parser resolver a substituição na ordem certa. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
/* o deslocamento da esteira. É uma propriedade REGISTRADA porque é o que permite
   animá-la com keyframes e, ao mesmo tempo, lê-la de duas camadas irmãs — a de
   tinta e a colorida — que por isso nunca saem de fase. */

/* O SCROLLYTELLING SAIU (31/08/2026).
   A cena era presa por 400svh e se transformava de palco preto em cartaz creme.
   Custava 2700px de rolagem e entregava pouquíssimo por pixel: a palavra não
   saía do lugar, a foto recuava uma margem e a troca de fundo acontecia
   escondida atrás de uma foto que ocupava a tela inteira. Entre 36% e 62% do
   curso não havia nada legível na tela. Foi retirado a pedido dele.
   A seção agora é UMA tela, no estado que já era o bom: palco preto, a palavra,
   a frase, o CTA e a esteira de clientes no pé.

   `--p` fica em 0 e vira constante. Cada medida da cena está escrita como
   `(1 - p) * A + p * B`, e com p=0 é o ramo A que renderiza — que é exatamente
   o estado que ficou. O ramo B continua no arquivo de propósito: arrancá-lo
   significaria reescrever todos os números medidos desta seção, e não é isso
   que muda no comportamento. Se for para limpar, limpa-se de uma vez. */
.foco{
  --p:0;
  position:relative;
  background:var(--base);
}
/* O TRILHO é quem tem a altura extra, não a seção. A diferença importa: o pin
   acaba junto com o trilho, então sobra seção depois dele e o cartaz SOLTA e
   sobe com a página em vez de sumir de uma vez. Era esse o degrau que fazia o
   scroll parecer que não chegava a lugar nenhum. */
.cena-trilho{
  /* 400svh porque são TRÊS tempos presos, não dois:
       transformação (p 0→.46) · os cards entram (p .46→.70) · OS CARDS FICAM
     O terceiro é o que faltava. Sem ele o --q chegava a 1 no último pixel do
     trilho: os cards apareciam e o pin soltava no mesmo instante, então o
     scroll vazava direto para a seção de baixo e ninguém lia card nenhum.
     Agora sobram 30% do curso — uns 90svh — com a cena parada e os três cards
     na tela. É o tempo de conversão da seção. */
  height:auto;
  /* o trilho veste a MESMA cor que a cena. Sem isto, no instante em que o pin
     solta e o cartaz sobe, a faixa que ele desocupa mostrava o preto da seção
     por tras do creme — um degrau preto no meio da saida. */
  background:color-mix(in srgb, var(--creme) calc(var(--p) * 100%), var(--base));
}
.cena{
  /* era `sticky`. Sem transformação não há o que prender: a cena é uma tela. */
  position:relative;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  /* preto → creme. É esta linha que vira a palavra em entalhe. */
  background:color-mix(in srgb, var(--creme) calc(var(--p) * 100%), var(--base));

  /* A CAIXA DA IMAGEM. Não usa object-fit: a caixa é declarada aqui e as DUAS
     camadas herdam a mesma. É isso que mantém o registro entre elas e ao mesmo
     tempo deixa o casal transbordar a janela no estado B — ele é irmão dela,
     sem o recorte.
     largura: no A cobre a tela; no B tem a largura da janela. */
  /* No A a imagem COBRE a tela, então quem manda é o maior dos dois lados.
     No B ela vira uma PEÇA com proporção própria, e quem manda é a ALTURA:
     o casal ocupa 83.57% da altura da imagem e precisa caber de 10% a 96% da
     tela, o que pede imagem de 1.029 × altura da tela; vezes a razão 1.332 dá
     137.1svh de largura. Em 1440×900 isso deixa 103 de margem lateral — o
     Figma usa 104, a proporção bate sozinha.
     O min() é a guarda da tela estreita: ali a largura volta a mandar. */
  --img-w:calc(
    (1 - var(--p)) * max(100vw, 133.2svh) +
    var(--p) * min(calc(100vw - 96 * var(--u)), 200svh)
  );
  --img-h:calc(var(--img-w) / 1.332);
  --img-l:calc((100vw - var(--img-w)) / 2);
  /* no A a imagem encosta no topo. no B ela desce até os pés do casal (0.925 da
     altura dela) pousarem em 93svh — abaixo da base da janela (88svh), que é o
     que faz o pé sair da caixa e pisar no creme.
     o max(0px) é a guarda da janela baixa: nela vale mais cortar pé que cabeça. */
  --img-t:calc(var(--p) * max(0px, calc(97svh - .925 * var(--img-h))));
  /* O SEGUNDO ATO tem progresso próprio, tirado do primeiro: `--q` só começa a
     andar quando `--p` passa de .62, e é ele que sobe a base da janela e traz os
     cards. O JS continua escrevendo um número só. */
  --q:clamp(0, calc((var(--p) - .46) / .24), 1);
  /* a margem lateral nasce da imagem, não da tela: é ela que dá a coluna do
     cartaz, e é nela que o botão e a assinatura se alinham lá embaixo */
  --jan-x:calc(var(--p) * (100vw - var(--img-w)) / 2);

  /* A ORIGEM COMPARTILHADA. `--pal-t` morava na palavra; subiu para ca porque a
     parede de marcas tem que comecar na mesma linha que ela. Com a mesma origem
     em y e a mesma origem em x (as duas vao de borda a borda), o desenho que
     corre atras da palavra cai exatamente onde o desenho de dentro dela cai —
     sem uma unica medida a mao. */
  --pal-t:10svh;

}

/* ---- A JANELA: no estado A é a tela inteira; no B, a caixa do Figma ---- */
.cena-janela{
  position:absolute;
  left:var(--jan-x);
  right:var(--jan-x);
  /* O TOPO DA IMAGEM CAI A 87% DA ALTURA DAS LETRAS. Esse número sai do Figma:
     lá a janela começa em 426 e as letras em 271.5, com 177.65 de caixa alta —
     (426-271.5)/177.65 = 87%. É a medida que faz o efeito existir, porque a
     letra só é VISÍVEL na parte que está fora da imagem: onde ela cai sobre a
     foto, a foto de dentro dela e a de baixo são a mesma em registro, e a letra
     some. Eu tinha invertido a proporção e por isso quase nada aparecia.
     cap = 0.727 × corpo, e o corpo é --img-w/5.094; logo 0.87 × 0.727 / 5.094
     = 0.1242 da largura da imagem. */
  top:calc(var(--p) * (10svh + .1242 * var(--img-w)));
  /* 17svh abre a régua de creme onde o botão pousa FORA da foto */
  /* no ato 1 a janela só descola do fundo; no ato 2 ela SOBE a base e é essa
     subida que abre a faixa onde os cards entram */
  /* 31svh no ato 2: a base sobe o bastante para o chip da faixa cair no creme.
     Em 26svh ele pousava sobre a foto e sumia contra as areas claras dela. */
  bottom:calc(var(--p) * 8svh + var(--q) * 36svh);
  z-index:0;
  overflow:hidden;
  border-radius:calc(var(--p) * 4 * var(--u));
}

.cena-fundo,
.cena-frente{
  position:absolute;
  left:var(--img-l);
  top:var(--img-t);
  width:var(--img-w);
  height:var(--img-h);
  display:block;
  pointer-events:none;
}
/* a de fundo vive DENTRO da janela, então ela precisa descontar o recuo da
   janela para continuar no mesmo lugar da tela que a de frente */
.cena-fundo{
  left:calc(var(--img-l) - var(--jan-x));
  top:calc(var(--img-t) - var(--p) * (10svh + .1242 * var(--img-w)));
}
.cena-frente{z-index:3}

/* LAVAGEM DE BAIXO (z1). Sob a palavra e sob o casal: escurece só a cena, que é
   quem cede leitura para as letras. Some junto com o preto. */
.cena-lavagem{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:calc(1 - var(--p));
  background:
    linear-gradient(var(--base) 0%, rgba(4,4,4,0) 16%),
    linear-gradient(90deg, rgba(4,4,4,.60) 0%, rgba(4,4,4,.26) 27%, rgba(4,4,4,0) 47%),
    linear-gradient(rgba(4,4,4,.52), rgba(4,4,4,.52));
}
/* LAVAGEM DE CIMA (z4). Esta pega o casal também: sem ela o recorte ficava em
   brilho cheio sobre um pé quase preto e virava adesivo colado. */
.cena-base{
  position:absolute; inset:0;
  z-index:4;
  pointer-events:none;
  opacity:calc(1 - var(--p));
  background:linear-gradient(
    rgba(4,4,4,0) 44%, rgba(4,4,4,.50) 68%,
    rgba(4,4,4,.88) 88%, var(--base) 100%);
}

/* ---- A PALAVRA — FEITA DA PRÓPRIA FOTO ----
   No Figma as letras não são creme por cima da imagem: elas são RECORTADAS dela.
   Cada letra tem foto dentro, e o creme é o que fica em volta. E a imagem de
   dentro está na mesma posição e no mesmo tamanho da imagem da janela — por
   isso a letra é feita exatamente do pedaço de foto que estaria ali, e a
   palavra parece CRESCER da borda de cima em vez de estar escrita sobre ela.

   Técnica: `background-clip:text`. O h2 recebe a foto como fundo e o texto vira
   a janela dela. É nativo — não é máscara desenhada nem recorte fingido.

   A TRANSIÇÃO são dois fundos no mesmo elemento: uma chapa de creme com alfa
   `1 - p` por cima da foto. Em p=0 o creme é opaco e a palavra é sólida, que é
   a que já estava no ar; em p=1 o creme sai e a foto aparece dentro das letras.
   Mesma técnica nas duas pontas: o que anda é um número, não a construção.

   Fica FORA da janela de propósito: precisa transbordar a caixa sem ser
   recortada, e a parte que cai no creme some sozinha — é metade do entalhe. */
.cena-palavra{
  /* o topo mora numa variável porque o registro do fundo depende dele: a foto
     de dentro das letras precisa saber onde as letras estão na tela.
     22svh contra os 26svh do topo da imagem — a diferença de 4svh é o quanto a
     palavra sobe acima da foto. A essa altura ela mergulha 78% na imagem: o
     ponto medido em que a palavra se lê inteira e ainda assim rompe a borda. */
  /* 14svh no estado B. Cada svh que a palavra sobe e um svh que a imagem
     ganha de altura, porque o topo da janela nasce do pe das letras. Em
     1440x900 isso poe a janela em 56% da altura da tela -- os 55% do Figma. */
  /* 10svh nos dois estados: a palavra praticamente não se move. Quem se move
     é a imagem, que desce até o pé das letras. */
  position:absolute;
  left:0; right:0;
  /* A LETRA SOBE e a FOTO DESCE. Elas se cruzam de proposito: a metade de
     baixo das letras mergulha na imagem e e ali que o talhe acontece; a de
     cima fica no creme e some, deixando a borda da foto mordida. O vao que
     abre entre o topo da tela e a imagem e o campo reservado para o conteudo
     B2B que ainda vai entrar nesta tela. */
  /* 22svh contra os 26svh do topo da imagem. A diferenca de 4svh e o quanto a
     palavra SOBE acima da foto: a essa altura ela mergulha 78% na imagem, que e
     o ponto medido em que EMPRESAS continua legivel inteira (o talhe se le) e
     ainda assim a fileira de letras rompe a borda de cima. Em 33% de mergulho a
     palavra virava um risco ilegivel; com a letra encostada no topo da janela,
     100%, ela perdia o destaque sobre o creme. */
  top:var(--pal-t);
  z-index:2;
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  /* CAIXA ALTA, e nao por gosto: com todas as letras na mesma altura, a borda
     de cima da imagem fica mordida por uma fileira continua. Em caixa baixa so
     o E tocaria o topo e o entalhe viraria um dente solto.
     Os dois corpos sao medidos, nao estimados: 18.25vw da 93% da tela no estado
     A, e 16.8vw da exatamente a largura da janela no B. */
  /* No A a palavra atravessa a TELA (18.25vw = 93%). No B ela passa a ter a
     largura da IMAGEM, porque no cartaz ela e uma peca da composicao e nao um
     letreiro da janela: 5.094 e a largura de EMPRESAS em Inter Display 700 com
     -0.045em de espacamento, medida em multiplos do corpo. Dividir a largura
     alvo por ela da o corpo exato -- a palavra nasce do tamanho da peca. */
  font-size:calc((1 - var(--p)) * 18.25vw + var(--p) * var(--img-w) / 5.094);
  font-weight:700;
  letter-spacing:-.045em;
  text-transform:uppercase;
  /* .727 é a altura de caixão-alta do Inter Display: com line-height igual a
     ela, o topo da CAIXA do h2 cai exatamente no topo das LETRAS, e é por isso
     que a palavra encosta na borda da janela sem ajuste à mão. */
  line-height:.727;
  text-align:center;
  color:var(--creme);
  white-space:nowrap;
  pointer-events:none;
}

/* O recorte só entra onde o navegador sabe fazer. Sem `background-clip:text` a
   regra acima continua valendo e a palavra fica creme sólida — que é o estado
   A, legível e correto. Nunca texto invisível. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cena-palavra{
    /* a chapa de creme por cima da foto. o alfa é quem faz a travessia. */
    background-image:
      linear-gradient(
        rgb(241 231 213 / calc(1 - var(--p))),
        rgb(241 231 213 / calc(1 - var(--p)))),
      image-set(url("../assets/cliente/cena-empresas.webp") 1x);
    /* REGISTRO: a foto de dentro das letras tem o mesmo tamanho e a mesma
       posição da foto da janela. Como o h2 começa em `top` e a janela em 26svh,
       o deslocamento de cima desconta essa diferença. Sem isso a letra mostra
       um pedaço QUALQUER da imagem, e o efeito morre. */
    background-repeat:no-repeat;
    background-size:100% 100%, var(--img-w) var(--img-h);
    background-position:
      0 0,
      calc(var(--img-l) - var(--jan-x) * 0) calc(var(--img-t) - var(--pal-t));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* ---- a régua de créditos: filete + chip + as três provas na mesma linha ---- */
.cena-regua{
  position:absolute;
  left:calc((1 - var(--p)) * 52 * var(--u) + var(--jan-x));
  right:calc((1 - var(--p)) * 52 * var(--u) + var(--jan-x));
  top:calc(40 * var(--u));
  z-index:5;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:calc(30 * var(--u));
  padding-top:calc(14 * var(--u));
  border-top:1px solid color-mix(in srgb,
    rgba(4,4,4,.22) calc(var(--p) * 100%), rgba(255,255,255,.22));
}
.cena-chip{
  margin:0;
  font-size:calc(12 * var(--u));
  letter-spacing:.14em;
  color:color-mix(in srgb, var(--tinta-60) calc(var(--p) * 100%), rgba(255,255,255,.8));
  white-space:nowrap;
}
.cena-prova{
  display:flex; align-items:baseline;
  gap:calc(34 * var(--u));
  margin:0;
}
.cena-prova > div{display:flex;align-items:baseline;gap:calc(8 * var(--u))}
.cena-prova dt{
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(13 * var(--u));
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
  color:color-mix(in srgb, var(--base) calc(var(--p) * 100%), var(--branco));
}
.cena-prova dd{
  margin:0;
  font-size:calc(12 * var(--u));
  line-height:1.3;
  color:color-mix(in srgb, var(--tinta-60) calc(var(--p) * 100%), rgba(255,255,255,.62));
}

/* ---- O PÉ. No estado A mora na quina de baixo à esquerda, que é o campo que o
   casal deixa livre (ele começa em 33.8% da largura): frase, apoio, botão e
   WhatsApp.
   No B o cartaz assume e o texto corrido sai — a arte fala por si. Mas o
   cartaz do Figma é uma peça de arte e não tem CTA, e esta seção precisa
   converter: então o BOTÃO e o WhatsApp ficam, e viram tinta escura sobre o
   creme. É a única coisa que a arte ganha de a mais. */
/* No A ele mora na quina de baixo à esquerda, sobre a cena. No B ele desce
   para a régua de creme ABAIXO da imagem e se alinha com a borda esquerda dela
   — é o que tira o botão de cima da foto e o encaixa na peça. */
/* O pé pertence ao estado A. No B o cartaz fica LIMPO, como a peça do Figma —
   que é arte e não tem botão. A conversão não some: ela desce para a faixa de
   cards que o scroll revela logo abaixo, onde o botão tem lugar próprio em vez
   de ficar pousado sobre a fotografia. */
.cena-pe{
  position:absolute;
  left:calc(52 * var(--u));
  bottom:calc(52 * var(--u));
  z-index:5;
  width:min(calc(560 * var(--u)), 38vw);
  opacity:clamp(0, calc((.5 - var(--p)) * 4), 1);
  pointer-events:auto;
}
.foco[style*="--p: 1"] .cena-pe{pointer-events:none}
/* estes dois são do estado A e só dele */

.cena-frase{
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(34 * var(--u));
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.08;
  color:var(--branco);
}
.cena-apoio{
  margin:calc(16 * var(--u)) 0 calc((1 - var(--p)) * 26 * var(--u));
  font-size:calc(16 * var(--u));
  line-height:1.5;
  color:rgba(255,255,255,.76);
  max-width:calc(430 * var(--u));
}
.cena-acao{display:flex;align-items:center;gap:calc(22 * var(--u));flex-wrap:wrap}
/* O botão atravessa os dois estados trocando de instância. No A é a versão
   clara (corpo branco sobre a cena escura); no B ele vira a instância `.grande`
   original do projeto — corpo preto, texto creme — que é justamente a que o
   hero usa sobre a coluna creme. Mesmo componente, mesmo gesto, o mesmo par de
   cores do template trocando de lado junto com o fundo. */
.btn.grande.claro{
  --corpo:color-mix(in srgb, var(--base) calc(var(--p) * 100%), var(--branco));
  --tinta:color-mix(in srgb, var(--creme) calc(var(--p) * 100%), var(--base));
  --enche:color-mix(in srgb, var(--creme) calc(var(--p) * 100%), var(--base));
  --tinta-cheia:color-mix(in srgb, var(--base) calc(var(--p) * 100%), var(--branco));
}
.cena-whats{
  margin:0;
  font-size:calc(15 * var(--u));
  letter-spacing:-.01em;
  color:color-mix(in srgb, var(--tinta-60) calc(var(--p) * 100%), rgba(255,255,255,.66));
  white-space:nowrap;
}
.cena-whats span{
  color:color-mix(in srgb, rgba(4,4,4,.32) calc(var(--p) * 100%), rgba(255,255,255,.30));
  margin-right:calc(10 * var(--u));
}
.cena-whats a{
  color:color-mix(in srgb, var(--base) calc(var(--p) * 100%), var(--branco));
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,
    rgba(4,4,4,.28) calc(var(--p) * 100%), rgba(255,255,255,.34));
  transition:border-color .18s linear;
}
.cena-whats a:hover{border-color:color-mix(in srgb, var(--base) calc(var(--p) * 100%), var(--branco))}
/* ALVO DE TOQUE dos telefones. O texto tem 16 a 19px de altura e o mínimo é
   44: a área cresce por ::after, que recebe o dedo sem mudar o desenho. A
   guarda é `hover:none` — quem não tem estado de toque é quem não tem
   ponteiro, e isso não depende da largura da tela.
   O do HERO (`.contato a`) não tinha nada e saiu na sonda nos 11 aparelhos. */
@media (hover:none){
  .cena-whats a,.contato a{position:relative}
  .cena-whats a::after,.contato a::after{content:"";position:absolute;inset:-15px -12px}
}

/* a assinatura do cartaz: entra quando o pé sai, na mesma régua da janela */
/* ---- A EMENDA: como a seção termina ----
   O cartaz sobe e o creme continua embaixo dele por mais um tempo, antes de
   ceder ao preto. Sem esta faixa o creme virava preto num corte seco no
   milissegundo em que o pin soltava.
   O degradê aqui é o mesmo material da cena: chapa e rampa, nunca máscara. */
/* a mesma textura de pontinhos do cartaz, apagando junto com o creme: é ela que
   diz que a emenda ainda é a mesma página do cartaz, e não outra seção */
/* a única palavra em realce da seção inteira, e é a que o cliente vende: o
   bloco cheio atrás do texto é o mesmo device do "INFANTIL." do hero */
/* ==================== A ESTEIRA DE CLIENTES ====================
   Onze marcas que já contrataram, correndo no pé do palco, DE PONTA A PONTA.
   Ela vive no estado A e apaga junto com a frase e o CTA.

   Vem do Client Ticker do Norvin, com a geometria medida no DOM publicado dele
   (logo de 40 de altura, pontas apagadas por chapa em degradê, nunca máscara),
   e dos números que os componentes de ticker do Framer usam: 40 a 80 px/s, vão
   generoso mas sem trecho vazio. O gap caiu de 120 para 96 por causa disso — a
   fila do Norvin tem 7 marcas, a nossa tem 11, e com 120 sobrava buraco.

   A VOLTA FECHA SOZINHA porque a lista inteira está duplicada: o trilho anda
   exatamente metade da própria largura e, no quadro em que volta ao zero, o
   primeiro clone já está onde o original estava. Nada é medido em JS.

   A ALTURA DE CADA MARCA NÃO É A MESMA, e é deliberado. Ela sai do PESO ÓPTICO
   — a raiz da área de tinta —, não da caixa do arquivo, com um piso de 23 para
   as muito deitadas. Sem o peso, o brasão da Prefeitura vira um bloco e a Cantu
   vira um risco; com ele os dois pesam igual na fila. Os tickers do Framer
   igualam por ALTURA, que funciona quando as marcas são todas palavras; aqui
   tem brasão, elipse e palavra deitada na mesma fila.

   Cada marca é uma máscara, não uma imagem: assim a cor vem do
   `background-color` e um logo pode acender na cor da própria marca sem
   trocar de arquivo. */
/* A faixa é SEÇÃO, e vem logo depois da capa. É a ordem que o plano pede: logo
   de cliente é a única prova que funciona em dois segundos, e por isso vem antes
   de qualquer argumento — quem não reconhece nome nenhum ali não lê o resto.
   Ela morava no pé da cena de Empresas, onde chegava tarde demais. */
.marcas{
  position:relative;
  background:var(--base);
  padding:calc(104 * var(--u)) 0 calc(112 * var(--u));
}
/* O RÓTULO da esteira. Centrado e com corpo, porque num site B2B a fileira de
   logos é a prova que funciona em dois segundos e quem lê precisa saber o que
   está vendo. Os filetes dos dois lados são o do card premiado do Norvin:
   1px que apaga nas pontas. */
.marcas-chip{
  display:flex;align-items:center;justify-content:center;
  gap:calc(24 * var(--u));
  margin:0 0 calc(34 * var(--u));
  padding:0 calc(52 * var(--u));
  font-size:calc(15 * var(--u));
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  white-space:nowrap;
}
.marcas-chip::before,.marcas-chip::after{
  content:"";flex:1;height:1px;max-width:calc(300 * var(--u));
  background:rgba(255,255,255,.22);
}
.marcas-chip::before{-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.marcas-chip::after{-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.marcas-faixa{
  position:relative;
  height:var(--th);
  overflow:hidden;
}
/* O ROLO é quem anda, e quem o move é o JS: a posição vem do SCROLL de quem
   está lendo, não de um keyframe de duração fixa. É a assinatura do componente
   `sync-scroll` do Originkit, portado em js/marcas.js. As cópias do bloco
   entram aqui em tempo de execução, depois de medir a largura real de um. */
.marcas-rolo{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  height:100%;
  will-change:transform;
  user-select:none;
}
.marcas-bloco{
  display:flex;
  align-items:center;
  flex:none;
  gap:calc(var(--gap) * var(--u) * var(--esc));
  /* o vão vem ANTES de cada item, inclusive do primeiro: assim a emenda entre
     um bloco e o clone seguinte tem exatamente o mesmo vão que o resto da fila */
  padding:0 0 0 calc(var(--gap) * var(--u) * var(--esc));
  margin:0;
  height:100%;
  list-style:none;
}
.marca{
  position:relative;
  flex:none;
  width:calc(var(--w) * var(--u) * var(--esc));
  height:calc(var(--h) * var(--u) * var(--esc));
  background-color:var(--creme);
  -webkit-mask-image:var(--src); mask-image:var(--src);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;    mask-size:100% 100%;
  transition:background-color .4s var(--e-entrada), opacity .4s var(--e-entrada);
}
/* o ponteiro acende UMA marca na cor dela e recolhe as vizinhas. É a mesma
   ideia do botão do hero: a página inverte ao redor de um ponto de cor. */
.marcas-rolo:hover .marca{opacity:.26}
.marca:hover{opacity:1;background-color:var(--c)}
.marcas-chapa{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  /* o gradiente do Norvin apaga do 0 ao 50%. A fileira dele tem 7 marcas em
     1296; a nossa tem 11 numa tela inteira, então com a mesma rampa metade das
     marcas viveria na sombra. A rampa acompanha a densidade da fila. */
  background:linear-gradient(90deg,
    var(--base) 0%, rgba(26,26,26,0) 11%,
    rgba(26,26,26,0) 89%, var(--base) 100%);
}
/* dedo não tem hover: no toque a fileira fica em creme, que é legível inteira.
   Acender todas de uma vez estava errado — a camada de cor existe para ser o
   realce de uma marca só, e ali o Ypiranga, que é um brasão preto e branco,
   sumia no fundo. */
@media (prefers-reduced-motion:reduce){
  .marcas-rolo{transform:none}
}

/* AS NOVE ENTREGAS. Grade de três, cada item com um filete em cima — o mesmo
   filete de 1px que separa as colunas da régua do cartaz e as provas do hero.
   O número de ordem é o contador da lista, não um caractere digitado: ele nasce
   certo mesmo se alguém reordenar ou apagar um item. */

/* Sem JS, ou com movimento reduzido, a cena vale pelo estado A: é ele que tem a
   frase, o apoio e o CTA em contraste cheio. O trilho perde a altura extra e a
   cena para de prender, então não sobra tela vazia — e a emenda continua
   fechando a seção do mesmo jeito. */
@media (prefers-reduced-motion:reduce){
  .cena-trilho{height:auto}
  .cena{position:relative}
}
.foco:not([data-liga]) .cena-trilho{height:auto}
.foco:not([data-liga]) .cena{position:relative}

/* ===================== seção seguinte ===================== */
.depois{
  padding:calc(150 * var(--u)) calc(60 * var(--u));
  display:grid; place-items:center;
}
.depois p{
  max-width:calc(720 * var(--u));
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(34 * var(--u));
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.32;
  text-align:center;
  color:rgba(255,255,255,.82);
}

/* ===================== mobile ===================== */
/* o mesmo cartão, empilhado: o palco vira uma faixa no topo e o creme desce
   inteiro embaixo. continua sem máscara — só um bloco em cima do outro. */
/* ===================== mobile: o hero fecha em UMA tela =====================
   A regra da skill: seção que fecha numa tela tem UMA peça elástica. Aqui o
   texto, os cartões e o rodapé levam o que precisam (flex:0 0 auto) e a FOTO
   come a sobra (flex:1 1 auto com piso). Assim o aparelho alto ganha foto maior
   e o baixo cede foto, em vez de empurrar o botão pra fora.
   `min-height`, nunca `height`: se o texto crescer, a peça cresce e pede uma
   rolagem curta em vez de cortar o CTA.
   Ritmo vertical em svh porque a altura dos aparelhos varia quase o dobro
   (568 a 932); onde quem aperta é a largura, entra min() das duas. */
@media (max-width:860px){
  :root{
    --u:clamp(.6px, 100vw / 430, 1.05px);
    --split:0%;
    --ox:50%; --oy:50%;
    --nav-h:clamp(56px, 8.2svh, 74px);
    --respiro:clamp(10px, 1.7svh, 20px);
    --borda:clamp(12px, 3.6vw, 18px);
  }

  .navbar{
    flex:none;
    height:var(--nav-h);
    margin:0 var(--borda);
  }
  .menu{
    display:flex; margin-left:auto;
    height:clamp(44px, 6svh, 52px); min-height:44px;
    font-size:clamp(12px, min(1.7svh, 3.4vw), 14px);
  }
  .menu i{width:clamp(38px,5.2svh,44px);height:clamp(38px,5.2svh,44px);min-width:38px;min-height:38px}
  .navbar .logo{height:clamp(26px, 3.9svh, 36px)}
  .links,.nav-cta,.tracinho{display:none}

  /* O creme desce até o fim da tela. Antes sobrava uma faixa preta embaixo, que
     era a página aparecendo entre o cartão e os controles — espaço que o
     conteúdo do hero estava perdendo à toa. Agora o hero abre em cima e a faixa
     de controles fecha embaixo, os dois vestindo o mesmo creme: lidos juntos,
     são um cartão só que vai da navbar ao rodapé da tela. */
  /* a conta de "cabe numa tela" deixa de ser estimada: o CONTÊINER tem 100svh e
     o hero é a peça elástica dele. Antes eu descontava uma altura chutada pros
     controles e errava por 25px quando a faixa mudava de padding. */
  #app{
    display:flex; flex-direction:column;
    min-height:100svh;
  }
  .hero{
    height:auto;
    flex:1 1 auto;
    min-height:0;
    margin:0 var(--borda) 0;
    border-radius:clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) 0 0;
    padding:0;
    display:flex; flex-direction:column;
    gap:0;
  }

  /* --- a peça elástica: a foto come a sobra da tela --- */
  .palco{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
    order:1;
    flex:1 1 auto;
    /* piso baixo de proposito: com flex:1 a foto CRESCE pra ocupar a sobra, e o
       piso so entra quando nao ha sobra. piso alto vira a causa do estouro. */
    min-height:clamp(140px, 18svh, 560px);
  }
  .veu{background:linear-gradient(rgba(4,4,4,.44) 0%, rgba(4,4,4,0) 32%, rgba(4,4,4,0) 64%, rgba(4,4,4,.52) 100%)}
  .camada .foto{object-position:center 38%}

  /* --- leitura --- */
  .editorial{
    position:relative; left:auto; top:auto;
    width:auto; height:auto;
    order:3; flex:none;
    /* abre espaço pra metade de baixo dos cartões, que invadem daqui pra cima */
    padding:calc(clamp(80px, 11svh, 144px) / 2 + clamp(6px, 1svh, 12px)) clamp(16px, 5vw, 24px) 0;
  }
  .display,.sub,.cena-id,.corpo,.cta,.contato{position:relative;left:auto;top:auto}
  .display{
    font-size:clamp(25px, min(3.9svh, 9.4vw), 46px);
    line-height:1.02;
    white-space:normal;
  }
  .display .marcado{padding:.06em .22em .1em;margin-left:-.22em}
  .sub{
    margin-top:clamp(8px, 1.3svh, 14px);
    font-size:clamp(14px, min(1.95svh, 4.1vw), 19px);
    line-height:1.25;
    max-width:none;
  }
  /* o parágrafo de apoio repete a promessa do subtítulo e é a peça mais alta:
     sai da primeira tela e volta na seção seguinte */
  .corpo{display:none}
  .cena-id{
    margin-top:clamp(8px, 1.3svh, 14px);
    gap:clamp(10px, 3vw, 18px);
  }
  .miniaturas span{
    width:clamp(30px, 4svh, 42px); height:clamp(30px, 4svh, 42px);
    margin-left:clamp(-14px, -1.9svh, -10px);
  }
  .cena-id b{font-size:clamp(19px, min(2.7svh, 5.8vw), 28px)}
  .cena-id small{font-size:clamp(12px, min(1.7svh, 3.4vw), 15px)}
  .cta{
    margin-top:clamp(12px, 2svh, 22px);
    display:inline-flex;
  }
  .btn.grande{
    --h:0; --chip:0;
    height:clamp(46px, 5.6svh, 54px); min-height:46px;
    padding:0 5px 0 clamp(16px, 4.6vw, 26px);
    gap:clamp(10px, 3vw, 18px);
    font-size:clamp(13px, min(1.9svh, 3.9vw), 16px);
  }
  .btn.grande .chip{
    width:clamp(36px, 5svh, 46px); height:clamp(36px, 5svh, 46px);
  }
  .contato{
    margin-top:clamp(7px, 1.1svh, 12px);
    font-size:clamp(12px, min(1.6svh, 3.2vw), 14px);
  }

  /* --- os cartões ficam NA COSTURA entre a foto e o creme ---
     A faixa própria deles comia ~120px de altura que a foto pedia. Aqui o palco
     dos objetos é um item de flex com ALTURA ZERO e overflow visível, encaixado
     entre a foto e a leitura: ele não consome altura nenhuma, e os cartões, que
     se centram na origem, ficam metade sobre a foto e metade sobre o creme.
     A foto herda toda a altura que sobrou. */
  .palco-obj{
    position:relative; left:auto; top:auto;
    width:auto; height:0;
    order:2; flex:none;
    overflow:visible;
    z-index:4;
    margin:0;
  }
  .acolhida{
    width:clamp(80px, 11.2svh, 144px); height:clamp(80px, 11.2svh, 144px);
    margin-left:calc(clamp(80px, 11.2svh, 144px) / -2);
    margin-top:calc(clamp(80px, 11.2svh, 144px) / -2);
  }
  .peca{
    width:clamp(66px, 9svh, 118px);
    height:clamp(84px, 11.4svh, 150px);
    margin-left:calc(clamp(66px, 9svh, 118px) / -2);
    margin-top:calc(clamp(84px, 11.4svh, 150px) / -2);
  }
  /* no dedo o cartão é só um link: toque leva pra página. sem estado
     intermediário, que no toque ele grudaria depois do clique. */
  .peca-corpo{border-radius:clamp(10px,1.5svh,14px)}
  .peca-texto{padding:clamp(6px,.9svh,10px) clamp(5px,.8svh,9px)}
  .peca-nome{font-size:clamp(8px, min(1.1svh, 2.3vw), 11px)}
  /* a descrição não cabe num cartão de 66px e não há hover pra revelá-la */
  .peca-resumo{display:none}
  .peca-nome{
    height:clamp(18px, 2.5svh, 26px);
    font-size:clamp(7px, min(1svh, 2.1vw), 10px);
    letter-spacing:.05em;
  }

  /* --- os cartões ficam NA COSTURA entre a foto e o creme ---
     A faixa própria deles comia ~120px de altura que a foto pedia. Aqui o palco
     dos objetos é um item de flex com ALTURA ZERO e overflow visível, encaixado
     entre a foto e a leitura: ele não consome altura nenhuma, e os cartões, que
     se centram na origem, ficam metade sobre a foto e metade sobre o creme.
     A foto herda toda a altura que sobrou. */
  .palco-obj{
    position:relative; left:auto; top:auto;
    width:auto; height:0;
    order:2; flex:none;
    overflow:visible;
    z-index:4;
    margin:0;
  }
  .acolhida{
    width:clamp(80px, 11.2svh, 144px); height:clamp(80px, 11.2svh, 144px);
    margin-left:calc(clamp(80px, 11.2svh, 144px) / -2);
    margin-top:calc(clamp(80px, 11.2svh, 144px) / -2);
  }
  .peca{
    width:clamp(64px, 8.8svh, 114px);
    height:clamp(80px, 11svh, 144px);
    margin-left:calc(clamp(64px, 8.8svh, 114px) / -2);
    margin-top:calc(clamp(80px, 11svh, 144px) / -2);
    padding:clamp(4px,.6svh,7px) clamp(4px,.6svh,7px) 0;
    border-radius:clamp(8px,1.2svh,12px);
  }
  .peca-nome{
    height:clamp(18px, 2.5svh, 26px);
    font-size:clamp(7px, min(1svh, 2.1vw), 10px);
    letter-spacing:.05em;
  }

  /* os controles saem do hero e ficam embaixo dele, sobre o preto da página */
  /* empilha: com 7 serviços a fileira precisa da largura inteira pra cada alvo
     chegar aos 44px. o trilho continua fino — quem cresce é a ÁREA. */
  .controles{
    flex:none;
    flex-direction:column; align-items:stretch;
    margin:0 var(--borda) var(--borda);
    padding:clamp(6px,1svh,10px) clamp(16px,5vw,24px)
            max(clamp(8px,1.4svh,14px), env(safe-area-inset-bottom, 0px));
    background:var(--creme);
    border-radius:0 0 clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px);
    gap:clamp(8px,1.4svh,14px);
  }
  /* Os chips saem do celular. Eram duas linhas + o vão delas — 44px do que a
     foto estava pedindo. O ponto de conversão de cada serviço continua vivo no
     desktop e na seção seguinte; na primeira dobra do celular quem convence é a
     foto grande, o título e o botão. */
  .chips{display:none}
  /* no creme o trilho inverte: claro sobre escuro vira escuro sobre claro */
  .barras button::before{background:rgba(4,4,4,.16)}
  .barras button[aria-current="true"]::before{background:rgba(4,4,4,.28)}
  .barras{gap:0;width:100%}
  .barras button{
    flex:1 1 0; width:auto; min-width:0;
    height:44px; min-height:44px;
    --pad:calc(50% - 7px);
  }
  .barras button[aria-current="true"]{--pad:calc(50% - 17px)}
  .barras button::before,.barras button i{height:3px;margin-top:-1.5px}

  /* No celular a moldura é OUTRA (0.62:1, o par "-cel") e nela o casal ocupa
     63% da largura. A transformação é a mesma, com a janela mais justa. */
  .cena-trilho{height:380svh}
  .emenda{padding:clamp(52px,10svh,110px) var(--borda) clamp(64px,13svh,140px)}
  .emenda-chip{margin-bottom:18px;font-size:clamp(10px,2.8vw,12px)}
  .emenda-frase{font-size:clamp(22px, min(3.2svh, 6.4vw), 34px)}
  .emenda-fonte{margin-top:22px;font-size:clamp(12px,3.2vw,14px)}
  .cena-janela{
    left:var(--jan-x);
    right:var(--jan-x);
    top:calc(var(--p) * (13svh + .1242 * var(--img-w)));
    bottom:calc(var(--p) * 10svh + var(--q) * 42svh);
  }
  .cena{
    /* no celular a moldura é 0.62:1 e o casal ocupa 83.57% dela igual; a conta
       da altura é a mesma, só muda a razão que multiplica */
    --img-w:calc(
      (1 - var(--p)) * max(100vw, 62svh) +
      var(--p) * min(calc(100vw - 2 * var(--borda)), 52svh)
    );
    --img-h:calc(var(--img-w) / 0.62);
    --img-t:calc(var(--p) * max(0px, calc(78svh - .925 * var(--img-h))));
  }
  .cena-fundo{
    left:calc(var(--img-l) - var(--jan-x));
    top:calc(var(--img-t) - var(--p) * (13svh + .1242 * var(--img-w)));
  }
  .cena-lavagem{
    background:
      linear-gradient(var(--base) 0%, rgba(4,4,4,0) 14%),
      linear-gradient(rgba(4,4,4,.30), rgba(4,4,4,.30));
  }
  .cena-base{
    background:linear-gradient(
      rgba(4,4,4,0) 34%, rgba(4,4,4,.62) 58%,
      rgba(4,4,4,.94) 82%, var(--base) 97%);
  }
  /* 7.5svh / 19.5vw saem da prova renderizada nas três telas: nessa combinação
     o casal tapa 23..35% da palavra; em 9.5svh / 15.5vw tapava 39..51% e a
     palavra deixava de se ler. */
  .cena{--pal-t:calc((1 - var(--p)) * 7.5svh + var(--p) * 13svh)}
  .cena-palavra{
    font-size:calc((1 - var(--p)) * 16.57vw + var(--p) * var(--img-w) / 5.094);
    letter-spacing:-.04em;
  }
  /* no celular o par de arquivos é outro, então o fundo das letras troca junto:
     tem que ser a MESMA imagem que a janela mostra, senão o registro quebra */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .cena-palavra{
      background-image:
        linear-gradient(
          rgb(241 231 213 / calc(1 - var(--p))),
          rgb(241 231 213 / calc(1 - var(--p)))),
        image-set(url("../assets/cliente/cena-empresas-cel.webp") 1x);
      background-position:0 0, var(--img-l) calc(var(--img-t) - var(--pal-t));
    }
  }
  .cena-regua{
    left:calc(var(--borda) + var(--p) * 4px);
    right:calc(var(--borda) + var(--p) * 4px);
    top:clamp(14px,2.6svh,26px);
    flex-direction:column;
    gap:clamp(8px,1.4svh,12px);
    padding-top:clamp(9px,1.4svh,13px);
  }
  .cena-chip{font-size:clamp(10px,2.8vw,12px)}
  /* três provas lado a lado num celular viram três tiras: viram uma linha só */
  .cena-prova{gap:clamp(10px,3.4vw,16px)}
  .cena-prova dt{font-size:clamp(11px,3vw,13px)}
  .cena-prova dd{font-size:clamp(10px,2.6vw,12px)}
  .cena-prova > div:nth-child(3){display:none}

  .cena-pe{
    left:calc((1 - var(--p)) * var(--borda) + var(--jan-x));
    right:calc((1 - var(--p)) * var(--borda) + var(--jan-x));
    bottom:calc((1 - var(--p)) * clamp(20px,3.4svh,32px) + var(--p) * 9svh);
    width:auto;
  }
  .cena-frase{font-size:clamp(24px, min(3.4svh, 7vw), 34px)}
  .cena-apoio{
    font-size:clamp(14px, min(1.9svh, 3.9vw), 17px);
    max-width:none;
    margin:clamp(10px,1.6svh,16px) 0 clamp(16px,2.4svh,24px);
  }
  .cena-acao{gap:clamp(12px,2vh,18px)}
  /* o botão vira barra: no dedo ele é o alvo principal da seção */
  .cena-acao .btn.grande{width:100%;justify-content:space-between}
  .cena-whats{font-size:clamp(12px, min(1.7svh, 3.4vw), 15px);white-space:normal}
  /* A ESTEIRA NO CELULAR. A tela é 3.7x mais estreita: com a escala e o vão do
     desktop caberiam DUAS marcas na fila inteira, e esteira de duas marcas não
     é esteira. Só estes dois números mudam; todo o resto sai deles. */
  :root{--esc:1.34; --gap:52}
  .marcas{padding:clamp(46px,7svh,74px) 0 clamp(50px,8svh,82px)}
  .marcas-chip{
    padding-left:var(--borda);
    margin-bottom:clamp(12px,2svh,18px);
    font-size:clamp(9px,2.5vw,11px);
  }

  /* OS TRÊS CARTÕES no celular: lado a lado eles virariam tiras de 100px, e
     empilhados custariam três telas. Viram um trilho que corre no dedo. */
  .quem-contrata{padding:clamp(52px,9svh,86px) 0 clamp(60px,10svh,100px)}
  .quem-chip{padding-left:var(--borda);margin-bottom:12px;font-size:clamp(10px,2.8vw,12px)}
  .quem-contrata   .quem-contrata   .quem-contrata   .cartao{height:clamp(190px, 26svh, 240px)}
  .cartao .peca-texto{padding:16px 16px 14px}
  .cartao .peca-nome{font-size:clamp(16px,4.4vw,19px)}
  .cartao-linha{font-size:clamp(12.5px,3.5vw,14px);margin-bottom:11px}
  .cartao-fecho{font-size:clamp(11px,3vw,12px);padding-top:9px}
  .emenda-acao{flex-direction:column;align-items:stretch;gap:14px;margin-top:40px}
  .emenda-acao .btn.grande{width:100%;justify-content:space-between}
  .emenda-whats{text-align:center;font-size:clamp(12px,3.4vw,15px)}
  .entregas{grid-template-columns:1fr;gap:clamp(20px,3.4vh,30px);margin-top:clamp(34px,6svh,60px)}
  .entregas li{padding-top:12px}
  .entregas li::before{margin-bottom:8px}
  .entregas b{font-size:clamp(16px,4.2vw,19px)}
  .entregas span{font-size:clamp(13px,3.6vw,15px)}
  .emenda-sub{font-size:clamp(14px,3.9vw,17px);margin-top:16px}
  .emenda-fonte{margin-top:clamp(34px,6svh,60px)}

  .depois{padding:clamp(40px,7svh,70px) clamp(16px,5vw,24px)}
  .depois p{font-size:clamp(17px, min(2.6svh, 5.4vw), 24px);text-align:left}
}

/* Tela BAIXA (320x568 e afins): o aparelho mais estreito E mais baixo é o que
   pega defeito que nenhum outro pega. Aqui o respiro encolhe, o showcase encolhe
   e a segunda via de contato sai — o CTA está logo acima dela e cobre a função.
   Nada é cortado: o que não coubesse pediria rolagem, não sumiria. */
@media (max-width:860px) and (max-height:700px){
  :root{--respiro:7px}
  .contato{display:none}
  .editorial{padding-top:calc(clamp(80px, 11svh, 144px) / 2 + 6px)}
  .palco{min-height:110px}
  .acolhida{width:86px;height:86px;margin-left:-43px;margin-top:-43px}
  .peca{width:60px;height:76px;margin-left:-30px;margin-top:-38px}
  .peca-nome{height:16px;font-size:7px}
  .sub{margin-top:8px}
  .cena-id{margin-top:8px}
  .cta{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .cta,.cta svg,.miniaturas span,.barras button{transition:none}
}

/* ========================================================================== */
/* QUEM CONTRATA — a grade de três.
   `--u` já é um pixel da prancheta de 1440x900 e limita pela ALTURA também,
   então a seção fecha numa tela sem media query extra: o topo leva o que
   precisa e a fileira de cartões come o resto (`flex:1`), que é a regra de
   "uma peça elástica por seção". */
.qc-section{
  height:100svh;
  min-height:calc(560 * var(--u));
  padding:clamp(28px, 6svh, 74px) clamp(16px, 3.6vw, 74px) clamp(24px, 5svh, 62px);
  /* TURQUESA da marca (#64D8C4). Sobre ele a tinta é PRETA: o branco dá
     1,7:1 e some, o preto dá 11,9:1. O leve degradê é o mesmo tom em duas
     profundidades, não uma cor nova. */
  background:linear-gradient(168deg, var(--logo-turquesa) 0%, #4FC9B4 62%, #3FBCA7 100%);
  display:flex;flex-direction:column;
  position:relative;isolation:isolate;
  gap:clamp(18px, 3.4svh, 44px);
}
/* A EMENDA. A seção de cima é preta e esta é turquesa: um corte seco ali lê
   como duas páginas coladas. A virada acontece dentro dos primeiros 12% da
   seção, então o preto ENTRA no turquesa em vez de bater nele. */
.qc-section::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12svh;z-index:0;
  pointer-events:none;
  background:linear-gradient(var(--base) 0%, rgba(4,4,4,.55) 38%, rgba(4,4,4,0) 100%);
}
.qc-topo,.qc-cards{position:relative;z-index:1}
.qc-topo{
  flex:0 0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:calc(40 * var(--u));
}
.qc-title{
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(30px, min(4.6svh, 5vw), 62px);
  font-weight:700;letter-spacing:-.035em;line-height:1.04;
  color:var(--branco);
}
/* o bloco de realce da manchete do hero, aqui invertido: sobre o turquesa
   quem vira chapa é o PRETO, e a palavra fica creme dentro dele */
.qc-marca{
  display:inline-block;font-style:normal;
  background:var(--logo-turquesa);color:var(--base);
  padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u));
  margin-left:calc(-14 * var(--u));
}
.qc-sub{
  margin:calc(18 * var(--u)) 0 0;
  max-width:calc(560 * var(--u));
  font-size:clamp(13px, min(1.9svh, 1.25vw), 18px);
  line-height:1.5;color:rgba(255,255,255,.82);
}

/* a ação: a mesma instância do botão do Norvin, corpo claro sobre o palco */
.qc-acao{
  flex:none;
  display:inline-flex;align-items:center;gap:calc(16 * var(--u));
  padding:calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(28 * var(--u));
  background:var(--creme);color:var(--base);
  border-radius:calc(10 * var(--u));
  font-size:clamp(13px, 1.7svh, 17px);font-weight:600;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  transition:transform .34s var(--e-entrada);
}
.qc-acao .chip{
  display:grid;place-items:center;
  width:calc(46 * var(--u));height:calc(46 * var(--u));
  border-radius:calc(8 * var(--u));background:var(--logo-turquesa);
}
.qc-acao .chip svg{width:calc(9 * var(--u));height:calc(15 * var(--u))}
@media (hover:hover){ .qc-acao:hover{transform:translateY(calc(-2 * var(--u)))} }

/* ---------------------------------------------------------- os três cartões */
.qc-cards{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px, 1.6vw, 24px);
  margin:0;padding:0;list-style:none;
  opacity:0;transform:translateY(calc(22 * var(--u)));
  transition:opacity .85s var(--e-entrada), transform .85s var(--e-entrada);
}
.qc-cards[data-visivel]{opacity:1;transform:none}
/* o <li> é o item da grade; o <a> preenche ele. Sem isto o cartão virava link
   de altura zero, porque quem recebia o tamanho era o <li>. */
.qc-cards>li{display:flex;min-width:0}
/* O CARTÃO É LINK. Ele era a prova mais forte da seção e não convertia nada:
   a pessoa lia o próprio caso, se reconhecia, e não tinha para onde ir. Agora
   cada cartão é uma porta com a mensagem do comprador dele já escrita, e a
   seção passa a ter QUATRO entradas em vez de uma. */
.qc-card{
  flex:1 1 auto;min-width:0;
  display:block;text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  border-radius:calc(20 * var(--u));      /* o r20 do card do Norvin */
  background:var(--sup-2);
  box-shadow:0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(4,4,4,.28),
             0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(4,4,4,.16);
  transition:transform .34s var(--e-entrada);
}
.qc-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  /* brightness(.7) é o valor do componente, e existe porque o texto branco
     vive por cima da foto. No hover ela escurece e cede leitura. */
  filter:brightness(.86);
  transition:filter .34s var(--e-entrada), transform .5s var(--e-entrada);
}
@media (hover:hover){
  .qc-card:hover{transform:translateY(calc(-6 * var(--u)))}
  .qc-card:hover .qc-foto{filter:brightness(.68);transform:scale(1.04)}
}
/* A LAVAGEM DO CARTÃO. É a MESMA receita da cena de cima: um lençol no topo,
   um pela lateral, um no pé e uma chapa plana por baixo de tudo. Não é um
   degradê inventado aqui, é o material que a seção anterior já usa. Com ela a
   foto pôde ficar mais CLARA e o texto ficou mais legível ao mesmo tempo. */
.qc-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(rgba(4,4,4,.72) 0%, rgba(4,4,4,0) 22%),
    linear-gradient(90deg, rgba(4,4,4,.48) 0%, rgba(4,4,4,.18) 34%, rgba(4,4,4,0) 58%),
    linear-gradient(rgba(4,4,4,0) 38%, rgba(4,4,4,.62) 70%, rgba(4,4,4,.94) 100%),
    linear-gradient(rgba(4,4,4,.26), rgba(4,4,4,.26));
}
.qc-texto{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  padding:clamp(16px, 2.6svh, 34px);
  color:var(--branco);
}
.qc-nome{
  margin-top:auto;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(17px, min(2.6svh, 1.9vw), 30px);
  font-weight:700;letter-spacing:-.025em;line-height:1.1;
}
.qc-dor{
  margin-top:calc(10 * var(--u));
  font-size:clamp(12px, min(1.7svh, 1.1vw), 16px);
  line-height:1.42;color:rgba(255,255,255,.94);
}
.qc-prova{
  margin-top:clamp(12px, 1.8svh, 20px);
  padding-top:clamp(10px, 1.4svh, 16px);
  border-top:1px solid rgba(255,255,255,.34);
  font-style:normal;
  font-size:clamp(11px, min(1.5svh, .95vw), 14px);
  line-height:1.3;color:#FFFFFF;font-weight:500;
}
/* a chamada do cartão: o mesmo par rótulo + chevron do botão do Norvin */
.qc-cta{
  display:inline-flex;align-items:center;gap:calc(12 * var(--u));
  margin-top:clamp(12px, 1.8svh, 20px);
  color:var(--creme);
  font-size:clamp(11px, min(1.6svh, 1vw), 15px);
  font-weight:600;letter-spacing:-.01em;
}
.qc-cta b{font-weight:600}
.qc-cta i{
  display:grid;place-items:center;flex:none;
  width:calc(34 * var(--u));height:calc(34 * var(--u));
  border-radius:calc(9 * var(--u));
  background:var(--logo-turquesa);color:var(--base);
  transition:transform .34s var(--e-entrada), background-color .34s var(--e-entrada);
}
.qc-cta svg{width:calc(8 * var(--u));height:calc(13 * var(--u))}
@media (hover:hover){
  .qc-card:hover .qc-cta i{transform:translateX(calc(4 * var(--u)));background:var(--creme)}
}
@media (hover:none){ .qc-cta i{width:44px;height:44px} }

/* ------------------------------------------------------------------ celular */
/* Duas colunas onde cabe: os dois primeiros dividem a linha e o terceiro
   ocupa a largura inteira, virando o destaque da fileira. */
@media (max-width:860px){
  .qc-section{
    height:auto;min-height:100svh;
    padding:clamp(22px,4svh,44px) 14px clamp(18px,3svh,32px);
    justify-content:center;
  }
  .qc-topo{flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4svh,22px)}
  .qc-title{font-size:clamp(26px,7.6vw,36px)}
  .qc-marca{padding:.06em .22em .1em;margin-left:-.22em}
  .qc-sub{font-size:clamp(12px,3.3vw,15px);margin-top:12px}
  .qc-acao{width:100%;justify-content:space-between}
  .qc-cards{flex:0 0 auto;grid-template-columns:1fr 1fr}
  .qc-texto{padding:clamp(12px,3vw,18px)}
  /* 0.88 dava 176x200 e o texto (nome + dor + prova) não cabia: a última
     linha era cortada pela borda. No retrato o cartão fica em pé. */
  .qc-cards>li{aspect-ratio:0.56}
  .qc-cards>li:last-child{grid-column:1 / -1;aspect-ratio:1.78}
  .qc-nome{font-size:clamp(15px,4.2vw,20px)}
  .qc-dor{font-size:clamp(10px,2.9vw,13px);line-height:1.32}
  .qc-prova{font-size:clamp(9px,2.5vw,11px);margin-top:10px;padding-top:8px}
}

/* ========================================================================== */
/* SEÇÃO 03 — O QUE A COLORS ENTREGA
   Dez serviços, todos legíveis parados. Nada aqui depende de passar o mouse:
   o acordeão anterior mostrava um por vez e escondia cinco em lâminas escuras,
   e quem chegava não via o que a empresa faz.

   VESTE CLARO, o mesmo --creme que é a base do hero. Eram três telas pretas
   seguidas antes disso. Como a seção de baixo (turquesa) tem uma emenda que
   descia do preto, ela foi reapontada para o creme no fim deste bloco.

   Uma tela, como as vizinhas: o topo leva o que precisa e a grade come o resto. */
.entrega{
  height:100svh;
  min-height:calc(600 * var(--u));
  padding:clamp(26px, 5.4svh, 68px) clamp(16px, 3.6vw, 74px) clamp(22px, 4.4svh, 58px);
  background:var(--creme-quente);
  color:var(--base);
  display:flex;flex-direction:column;
  gap:clamp(16px, 3svh, 38px);
  position:relative;isolation:isolate;
}

/* --------------------------------------------------------- o selo do Norvin */
/* pílula "Primary": respiro 12/16, vão 10, ponto de 8, filete de 1px, raio 12,
   rótulo em Inter Display 16/20. Medida do template. */
/* A pílula "Primary" do Norvin, com a geometria dele e nada mais: respiro
   12/16, vão 10, ponto de 8, filete de 1px, raio 12, rótulo em Inter Display
   16/20. Eu tinha inflado ela para 23px de corpo e 14/24 de respiro para a
   frase "O que a Colors entrega" caber dentro, e nesse tamanho ela deixa de
   ser o componente e vira etiqueta.
   O TEMPLATE RESOLVE ISSO NA ESTRUTURA, não no tamanho: no Norvin a pílula é
   rótulo curto e quem cresce é o h2 do lado. Process → Our Approach.
   Latest Works → Portfolio. Testimonial → Reviews. Aqui: Serviços → O que a
   Colors entrega. */
.selo{
  margin:0;
  display:inline-flex;align-items:center;gap:calc(10 * var(--u));
  padding:calc(12 * var(--u)) calc(16 * var(--u));
  border:1px solid rgba(4,4,4,.22);border-radius:calc(12 * var(--u));
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(11px, min(1.55svh, 1.05vw), 16px);
  font-weight:400;letter-spacing:0;
  line-height:1.25;color:var(--tinta-60);white-space:nowrap;
}
.selo i{
  flex:none;width:calc(8 * var(--u));height:calc(8 * var(--u));
  border-radius:100%;background:var(--base);
}
/* variante para campo claro, se outra seção precisar */
.selo.escuro{border-color:rgba(4,4,4,.24);background:rgba(4,4,4,.04);color:var(--tinta-60)}
.selo.escuro i{background:var(--base)}

/* ------------------------------------------------------------------- topo */
.en-topo{
  flex:0 0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:calc(40 * var(--u));
}
.en-cabeca{display:flex;flex-direction:column;align-items:flex-start;gap:calc(18 * var(--u))}
/* o título cresceu um degrau: é ele que diz o assunto da seção, e antes
   competia de igual para igual com o nome dos serviços */
/* A MESMA VOZ DO HERO. Eu tinha posto um itálico serifado aqui, puxado do
   print de referência, e serifa não existe no sistema desta página: o hero e a
   cena EMPRESAS são Inter Display 700 em CAIXA ALTA, com tracking apertado.
   Ao lado deles a versão em caixa baixa com itálico lia como outra marca.
   O bloco de realce é o `.marcado` do hero, o único device próprio da Colors
   que sobreviveu à auditoria: retângulo cheio atrás da palavra, sem máscara,
   carregando a cor da cena. */
.en-titulo{
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(30px, min(5.6svh, 5.1vw), 72px);
  font-weight:700;letter-spacing:-.04em;line-height:.94;
  text-transform:uppercase;
  color:var(--base);
}
.en-titulo em{
  display:inline-block;font-style:normal;
  background:var(--realce);color:var(--creme);
  padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
  margin-left:calc(-14 * var(--u));
}
.en-sub{
  margin:0;flex:none;
  max-width:calc(400 * var(--u));
  font-size:clamp(12px, min(1.8svh, 1.15vw), 17px);
  line-height:1.5;color:var(--tinta-60);
}


/* ---------------------------------------------------------- topo com setas */
.en-lado{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;
  gap:clamp(12px, 2svh, 22px);
}
/* as setas do print de referência, com o chip do Norvin: 46 de lado, raio 10.
   A cheia é a que avança, e é ela que carrega o azul da marca. */
.pj-setas{display:flex;align-items:center;gap:calc(8 * var(--u))}

/* VER TODOS. Não leva a página nenhuma, porque página de serviços ainda não
   existe e link para destino inexistente é pior que botão nenhum. Ele abre a
   fileira em grade dentro da própria seção: os dez de uma vez, sem sair do
   lugar. */
.pj-todos{
  display:inline-flex;align-items:center;gap:calc(12 * var(--u));
  height:calc(46 * var(--u));
  padding:0 calc(6 * var(--u)) 0 calc(20 * var(--u));
  margin-right:calc(6 * var(--u));
  border:1px solid rgba(4,4,4,.20);
  border-radius:calc(10 * var(--u));
  background:rgba(255,255,255,.42);color:var(--base);
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(12px, 1.6svh, 16px);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--e-entrada), color .3s var(--e-entrada);
}
.pj-todos i{
  display:grid;place-items:center;
  width:calc(34 * var(--u));height:calc(34 * var(--u));
  border-radius:calc(8 * var(--u));
  background:var(--base);color:var(--creme);
  transition:transform .34s var(--e-entrada);
}
.pj-todos i svg{width:calc(8 * var(--u));height:calc(13 * var(--u))}
.pj-todos[aria-expanded="true"] i{transform:rotate(90deg)}
@media (hover:hover){ .pj-todos:hover{background:var(--base);color:var(--creme)} .pj-todos:hover i{background:var(--realce);color:#fff} }

/* ---- a seção aberta: a fileira vira grade e a seção deixa de ser uma tela ---- */
.entrega[data-tudo]{height:auto;min-height:100svh}
.entrega[data-tudo] .pj-fila{
  overflow:visible;
  display:grid;grid-template-columns:repeat(5, minmax(0,1fr));
  padding-right:0;margin-right:0;
}
/* na grade os clones seriam repetição visível: só a lista original aparece */
.entrega[data-tudo] .pj-fila>li[aria-hidden="true"]{display:none}
.entrega[data-tudo] .pj-fila>li{flex:none}
.entrega[data-tudo] .pj-card{aspect-ratio:.62}
.entrega[data-tudo] .pj-setas .pj-seta{display:none}
.pj-seta{
  width:calc(46 * var(--u));height:calc(46 * var(--u));
  display:grid;place-items:center;
  border-radius:calc(10 * var(--u));
  border:1px solid rgba(4,4,4,.20);
  background:rgba(255,255,255,.42);color:var(--base);
  cursor:pointer;
  transition:background .3s var(--e-entrada), color .3s var(--e-entrada), opacity .3s;
}
.pj-seta svg{width:calc(9 * var(--u));height:calc(15 * var(--u))}
.pj-seta[data-dir="1"]{background:var(--base);border-color:var(--base);color:var(--creme-quente)}
.pj-seta:disabled{opacity:.32;cursor:default}
@media (hover:hover){
  .pj-seta:not(:disabled):hover{background:var(--realce);border-color:var(--realce);color:#fff}
}

/* ------------------------------------------------------------- a fileira */
/* SANGRA NA DIREITA. O cartão seguinte aparecendo pela metade é o que avisa
   que a fila continua; parar na margem faz a seção parecer que acabou em
   quatro serviços. O recuo negativo é o mesmo respiro da seção, então o
   primeiro cartão continua alinhado com o título. */
.pj-fila{
  flex:1 1 auto;min-height:0;
  list-style:none;margin:0;padding:0 clamp(16px, 3.6vw, 74px) 0 0;
  margin-right:calc(-1 * clamp(16px, 3.6vw, 74px));
  display:flex;gap:clamp(10px, 1.3vw, 22px);
  overflow-x:auto;overflow-y:hidden;
  /* nem `scroll-behavior:smooth` nem `scroll-snap`: os dois brigam com a
     deriva contínua, que escreve scrollLeft a cada quadro */
  scrollbar-width:none;
  opacity:0;transform:translateY(calc(22 * var(--u)));
  transition:opacity .8s var(--e-entrada), transform .8s var(--e-entrada);
}
.pj-fila::-webkit-scrollbar{display:none}
.pj-fila[data-visivel]{opacity:1;transform:none}
.pj-fila>li{
  /* 27vw da 389 a 1440: tres cartoes inteiros mais a espiada do quarto */
  flex:0 0 clamp(240px, 27vw, 420px);
  display:flex;scroll-snap-align:start;
}

/* --------------------------------------------------------------- o cartão */
.pj-card{
  position:relative;overflow:hidden;isolation:isolate;
  flex:1 1 auto;min-width:0;
  border-radius:calc(20 * var(--u));
  background:var(--sup-2);
  text-decoration:none;color:var(--branco);
  display:block;
  transition:transform .4s var(--e-entrada);
}
.pj-foto{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transition:transform .5s var(--e-entrada);
}
/* o véu só no pé, que é onde o texto mora. em cima a foto fica limpa, e é por
   isso que a pílula e o chip têm fundo próprio. */
.pj-veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,4,4,.28) 0%, rgba(4,4,4,0) 26%, rgba(4,4,4,.62) 62%, rgba(4,4,4,.90) 100%);
}
/* as quatro sem foto: chapa da cor da marca no lugar da imagem, mesma peça */
/* sobre o degradê da seção, chapa da mesma família some no fundo. Estas são
   escurecidas de propósito, para o cartão continuar sendo um objeto POSTO
   sobre o fundo, e não um buraco nele. */
.pj-card[data-cor]{background:linear-gradient(158deg,#0A1B6B 0%,#122E9E 100%)}
.pj-card[data-cor="turquesa"]{background:linear-gradient(158deg,#0C5348 0%,#12796A 100%)}
.pj-card[data-cor="rosa"]{background:linear-gradient(158deg,#5B1160 0%,#8C1E93 100%)}
.pj-card[data-cor="amarelo"]{background:linear-gradient(158deg,#4A3B05 0%,#7A6410 100%)}
.pj-card[data-cor] .pj-veu{
  background:linear-gradient(180deg, rgba(4,4,4,0) 0%, rgba(4,4,4,.10) 40%, rgba(4,4,4,.34) 100%);
}

/* pílula de categoria: respiro 4/12 e filete de 1px, do Project Section */
.pj-tag{
  position:absolute;z-index:2;
  top:calc(16 * var(--u));left:calc(16 * var(--u));
  padding:calc(5 * var(--u)) calc(12 * var(--u));
  border:1px solid rgba(255,255,255,.34);
  border-radius:calc(8 * var(--u));
  background:rgba(4,4,4,.30);
  backdrop-filter:blur(6px);
  font-size:clamp(9px, min(1.3svh, .78vw), 12px);
  line-height:1.5;color:#fff;white-space:nowrap;
}
/* o chip de 35 do botão do Norvin, aqui na quina de cima à direita */
.pj-chip{
  position:absolute;z-index:2;
  top:calc(14 * var(--u));right:calc(14 * var(--u));
  width:calc(38 * var(--u));height:calc(38 * var(--u));
  display:grid;place-items:center;
  border-radius:calc(10 * var(--u));
  background:var(--creme-quente);color:var(--base);
  transition:transform .4s var(--e-entrada), background .3s var(--e-entrada);
}
.pj-chip svg{width:calc(8 * var(--u));height:calc(13 * var(--u))}

.pj-pe{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(6 * var(--u));
}
/* O NOME É A PEÇA GRANDE. É ele que a seção precisa dizer, e nas versões
   anteriores ele tinha tamanho de legenda. */
.pj-nome{
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(16px, min(2.7svh, 1.62vw), 27px);
  font-weight:600;letter-spacing:-.024em;line-height:1.1;
  color:#fff;text-wrap:balance;
}
/* OS SERVIÇOS DENTRO DA VERTENTE. Cada linha é um serviço nomeado: é isso que
   faz a peça ser separação de serviço e não cartão de categoria. O filete
   entre elas separa sem virar tabela. */
.pj-itens{
  list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-direction:column;
}
.pj-itens li{
  padding:calc(6 * var(--u)) 0;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:clamp(10px, min(1.5svh, .9vw), 14px);
  line-height:1.3;color:rgba(255,255,255,.84);
}
.pj-itens li:first-child{border-top:0;padding-top:calc(2 * var(--u))}
.pj-desc{
  margin:0;
  font-size:clamp(10px, min(1.5svh, .9vw), 14px);
  line-height:1.36;color:rgba(255,255,255,.80);
}
.pj-fato{
  margin-top:calc(4 * var(--u));
  padding-top:calc(8 * var(--u));
  border-top:1px solid rgba(255,255,255,.22);
  width:100%;
  font-size:clamp(9px, min(1.35svh, .82vw), 12.5px);
  line-height:1.3;color:var(--logo-amarelo);font-weight:500;
}

@media (hover:hover){
  .pj-card:hover{transform:translateY(calc(-6 * var(--u)))}
  .pj-card:hover .pj-foto{transform:scale(1.05)}
  .pj-card:hover .pj-chip{background:var(--logo-amarelo);transform:translateX(calc(3 * var(--u)))}
}
.pj-card:focus-visible{outline:2px solid var(--azul-fundo);outline-offset:calc(3 * var(--u))}

/* ------------------------------------------------------------------ celular */
@media (max-width:860px){
  /* O TOPO EMPILHA. Esta regra tinha se perdido numa troca de CSS e o topo
     continuava em linha no celular: a coluna da direita ficava com 343 de
     largura começando em 259, e a PÁGINA INTEIRA passava a rolar 226px na
     horizontal. Vazamento horizontal quase nunca é da peça larga que se vê;
     é de uma coluna que não empilhou. */
  .entrega{
    height:auto;min-height:100svh;
    padding:clamp(26px,5svh,44px) clamp(14px,4vw,22px) clamp(22px,4svh,38px);
    gap:clamp(14px,2.6svh,24px);
  }
  .en-topo{flex-direction:column;align-items:flex-start;gap:clamp(12px,2.2svh,18px)}
  .en-titulo{font-size:clamp(27px,8.4vw,42px)}
  .en-titulo em{padding:.06em .22em .1em;margin-left:-.22em}
  .en-sub{max-width:none;font-size:clamp(12px,3.3vw,15px)}
  .selo{font-size:clamp(11px,3.2vw,14px);padding:9px 13px;gap:8px}
  .selo i{width:7px;height:7px}
  .en-lado{align-items:flex-start;width:100%}
  .pj-setas{display:none}          /* no toque a fila se arrasta com o dedo */
  .pj-fila{
    flex:0 0 auto;
    padding-right:clamp(14px,4vw,22px);
    margin-right:calc(-1 * clamp(14px,4vw,22px));
    gap:10px;
  }
  .pj-fila>li{flex:0 0 min(62vw, 260px)}
  .pj-card{aspect-ratio:.79}
  .pj-nome{font-size:clamp(17px,4.8vw,22px)}
  .pj-desc{font-size:clamp(11px,3.1vw,13px)}
  .pj-itens li{font-size:clamp(11px,3vw,13px);padding:5px 0}
  .pj-fato{font-size:clamp(10px,2.7vw,12px)}
}

@media (prefers-reduced-motion:reduce){
  .pj-fila{transition-duration:.01ms}
  .pj-card,.pj-foto,.pj-chip{transition-duration:.01ms}
}

/* ------------------------------------------- a emenda da seção de baixo
   `.qc-section::before` nasceu descendo do PRETO, porque acima dela era a cena.
   Agora quem entrega é esta seção, que é creme. Sem isso fica uma sombra preta
   boiando no topo do turquesa. */
.qc-section::before{
  background:linear-gradient(var(--creme-quente) 0%, rgba(241,231,213,.52) 38%, rgba(241,231,213,0) 100%);
}


}