/* =====================================================================
   Sakura Design — o site inteiro dentro do filme.

   Não há seções: a animação é o fundo fixo da página do começo ao fim,
   e os blocos de texto entram e saem conforme a rolagem. O que rola é
   o filme; o texto aparece por cima dele.

   As tipografias saíram do vídeo do Canva, medidas nos quadros em 4K:

     · o rosa gordo e brilhante ("Mulheres extravagantes") é uma
       geométrica muito arredondada, com um brilho mais claro na parte
       de cima das hastes — reproduzido com degradê recortado no texto
     · o rosa vivo com contorno claro ("FEEDS ORGANIZADOS") é a mesma
       família, mais pesada, com traço claro em volta
     · o branco tem uma sombra rosa dura, deslocada para baixo e para a
       direita, sem desfoque nenhum
   ===================================================================== */

/* Variável CSS comum não anima: ela troca de valor de uma vez, e a
   propriedade que depende dela recalcula de um salto. Era isso que
   fazia os botões sumirem de um lugar e aparecerem no outro.

   Registrada com @property e um tipo, ela passa a ser interpolável —
   e então dá para transicionar a PRÓPRIA variável, com o transform
   recalculando quadro a quadro.

     --ex  entrada pela lateral
     --mx  o passeio horizontal até o centro, no fecho */
@property --ex {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --mx {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

:root {
  --rosa-escuro: #C9184A;
  --rosa-gloss:  #F0447E;
  --rosa-vivo:   #FF2D8E;
  --rosa-claro:  #FFC2DC;
  --sombra-rosa: rgba(226, 138, 170, .95);
  --papel:       #F3D9D3;
}

* { box-sizing: border-box; }

html { background: var(--papel); }

body {
  margin: 0;
  background: transparent;
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------
   O filme: fundo fixo, atrás de tudo, o tempo inteiro
   --------------------------------------------------------------- */
#tela {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* A altura desta camada é o que define o comprimento da rolagem.
   Quem calcula é o filme.js, a partir da duração e do pxPorSegundo. */
#corrida { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   Blocos de legenda
   Ficam presos na tela e aparecem no trecho de rolagem de cada um.
   --------------------------------------------------------------- */
.bloco {
  position: fixed;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--l, 40%);
  /* --dx/--dy são a correção que o monta.js aplica para o bloco não
     sair da tela. A posição escrita no textos.js continua sendo a
     verdade; isto só empurra de volta para dentro quando a janela é
     baixa ou estreita demais para ela. */
  /* --ex é o deslocamento de entrada pela lateral e --mx é o passeio
     horizontal até o centro no fim. Os dois andam pelo transform, e
     não por left, porque left definido por variável CSS troca de valor
     de uma vez — não anima. O transform anima. */
  transform: translate(calc(-50% + var(--dx, 0px) + var(--ex, 0px) + var(--mx, 0px)),
                       calc(-50% + var(--dy, 0px)));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(18px * var(--t, 1));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Transiciono as VARIÁVEIS, não o transform. Se as duas coisas
     estivessem na lista, o transform ficaria perseguindo um valor que
     já está se movendo sozinho, e o movimento sairia arrastado. */
  transition: opacity .5s ease,
              visibility 0s linear .5s,
              --ex .65s cubic-bezier(.22, .85, .25, 1),
              --mx .9s cubic-bezier(.25, .8, .3, 1);
}

/* de onde cada bloco entra */
.bloco[data-entra="esq"] { --ex: -13vw; }
.bloco[data-entra="dir"] { --ex:  13vw; }
.bloco.vem[data-entra]   { --ex: 0px; }
/* visibility junto da opacidade: bloco invisível não pode continuar
   clicável, senão o cartão de um trabalho que já saiu de cena rouba o
   clique do que está na tela */
.bloco.vem {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s;
}

/* Sem transição nenhuma enquanto o monta.js mede.

   O --ex tem transição própria, de .65s. Zerar o --ex para medir não
   punha o bloco no lugar de repouso na hora: punha ele a CAMINHO dele.
   O getBoundingClientRect() lia então uma posição intermediária, via
   uma borda saindo da tela e a trava de enquadramento "corrigia" um
   deslocamento que já estava se desfazendo sozinho.

   O estrago era visível: o balão de perfil terminava uns 30px à
   direita do centro, e os botões do fecho saíam desalinhados entre si
   — cada um para o lado de onde tinha entrado. */
.bloco.medindo { transition: none !important; }

.bloco a,
.bloco button { pointer-events: auto; }

/* ---------------------------------------------------------------
   Tira de peças de um trabalho

   Corre para o lado em vez de cortar. Antes era uma colagem única num
   arquivo só, e o que não coubesse na largura ficava de fora.
   --------------------------------------------------------------- */
.bloco--trabalho { gap: calc(12px * var(--t, 1)); }

.tira { position: relative; width: 100%; }

.tira__rolo {
  display: flex;
  gap: calc(10px * var(--t, 1));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  border-radius: calc(10px * var(--t, 1));
  /* a barra de rolagem cortaria a tira e apareceria por cima do filme */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tira__rolo::-webkit-scrollbar { display: none; }

.tira__peca {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: block;
  line-height: 0;
  border-radius: calc(8px * var(--t, 1));
  overflow: hidden;
  box-shadow: 0 16px 40px -18px rgba(120, 20, 60, .55);
  transition: transform .22s ease;
}
.tira__peca:hover { transform: translateY(-3px); }
.tira__peca:focus-visible { outline: 3px solid var(--rosa-vivo); outline-offset: 3px; }

/* Altura fixa, largura livre: slide de apresentação é 16:9 e peça de
   feed é 4:5 — forçar as duas na mesma caixa deformaria uma delas. */
.tira__peca img {
  display: block;
  height: calc(clamp(120px, 21vh, 250px) * var(--t, 1));
  width: auto;
}

/* Na tela em pé esta altura muda: as cinco tiras ficam empilhadas ao
   mesmo tempo e a peça precisa ceder espaço para o nome do trabalho.
   A regra está no bloco "TELA EM PÉ", no fim do arquivo, junto com os
   outros ajustes de orientação. */

/* --- setas --- */
.tira__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: calc(40px * var(--t, 1));
  height: calc(40px * var(--t, 1));
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--rosa-vivo);
  color: #fff;
  font-size: calc(22px * var(--t, 1));
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(120, 20, 60, .4);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
/* só aparecem quando há para onde correr */
.tira--rola .tira__seta { opacity: .92; }
.tira__seta:hover { background: var(--rosa-escuro); }
.tira__seta:disabled { opacity: .25 !important; cursor: default; }
.tira__seta--ant  { left: calc(-14px * var(--t, 1)); }
.tira__seta--prox { right: calc(-14px * var(--t, 1)); }

.bloco--trabalho .linha--rosa { line-height: 1.1; }

/* ---------------------------------------------------------------
   Balão rosado translúcido

   Serve para o perfil e para as abas de serviço e processo. Rosado e
   transparente de propósito: as pétalas continuam caindo atrás dele.
   Um cartão opaco abriria um buraco no filme justamente no momento em
   que a animação é a única coisa acontecendo.
   --------------------------------------------------------------- */
.bloco--balao {
  gap: calc(12px * var(--t, 1));
  padding: calc(26px * var(--t, 1)) calc(22px * var(--t, 1));
  border-radius: calc(30px * var(--t, 1));
  /* Vidro: pouca cor e muito desfoque. O que dá a leitura não é a
     opacidade do rosa, é o borrão — ele apaga o contorno das pétalas
     que passam por trás sem apagar a cor delas. */
  background: linear-gradient(158deg,
              rgba(255, 205, 224, .28) 0%,
              rgba(250, 145, 188, .18) 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 22px 54px -22px rgba(120, 20, 60, .4),
              inset 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

/* Dentro do balão a sombra rosa dura do texto branco atrapalha em vez
   de ajudar: ela existe para separar a letra do filme, e aqui o balão
   já faz esse trabalho. Sobrepostas, as duas coisas embolam a leitura. */
.bloco--balao .linha--branco,
.bloco--balao .linha--branco-p { text-shadow: none; }

.bloco--balao .linha--branco-p {
  font-size: calc(clamp(14px, 1.25vw, 19px) * var(--t, 1));
  line-height: 1.4;
}
.bloco--balao .linha--rosa {
  font-size: calc(clamp(17px, 1.7vw, 26px) * var(--t, 1));
}

/* Os quatro cartões de aba com a mesma altura, mesmo tendo textos de
   comprimentos diferentes. */
.bloco--aba {
  min-height: calc(clamp(150px, 19vw, 210px) * var(--t, 1));
  justify-content: flex-start;
}

/* A legenda branca ocupa a altura que sobra e se centra nela.

   Sem isso, o texto curto ficava colado no nome e deixava metade do
   balão vazia — o balão tem altura fixa para os quatro ficarem iguais,
   e quem tem pouco texto herdava o buraco. Crescer a fonte e deixá-la
   preencher o espaço resolve as duas coisas: some o vazio e o texto
   fica maior para ler.

   As margens automáticas centram o parágrafo no espaço livre sem
   torná-lo um contêiner flex — se fosse flex, o alinhamento do texto
   dentro dele deixaria de funcionar. */
.bloco--aba .linha--branco-p {
  margin-top: auto;
  margin-bottom: auto;
  font-size: calc(clamp(16px, 1.65vw, 25px) * var(--t, 1));
  line-height: 1.38;
}

/* ---------------------------------------------------------------
   Botões de chamada

   Mesmo vidro dos balões, em pílula. Sobre o túnel de papel, que é
   claro e movimentado, um botão chapado sumiria; o desfoque cria o
   assento sem tapar a cena.
   --------------------------------------------------------------- */
.cta {
  display: block;
  width: 100%;
  padding: calc(15px * var(--t, 1)) calc(22px * var(--t, 1));
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: calc(clamp(14px, 1.35vw, 20px) * var(--t, 1));
  color: #fff;
  background: linear-gradient(150deg,
              rgba(228, 70, 124, .88), rgba(201, 24, 74, .82));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 14px 34px -14px rgba(120, 20, 60, .6),
              inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease;
}
.cta:hover { transform: translateY(-2px); background: var(--rosa-vivo); }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* o crédito da Pollennomics: discreto de propósito */
.cta--mini {
  width: auto;
  align-self: center;
  padding: calc(7px * var(--t, 1)) calc(16px * var(--t, 1));
  font-size: calc(clamp(11px, 1vw, 14px) * var(--t, 1));
  font-weight: 500;
  background: rgba(255, 255, 255, .3);
  color: var(--rosa-escuro);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: none;
}
.cta--mini:hover { background: rgba(255, 255, 255, .55); }

.linha--credito {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: calc(clamp(11px, 1vw, 14px) * var(--t, 1));
  letter-spacing: .06em;
  color: #fff;
  margin: 0;
  /* brilho macio no lugar da sombra rosa dura: o papel do túnel é
     claro e o branco sumiria nele sem algum assento por trás */
  text-shadow: 0 1px 12px rgba(140, 30, 75, .65),
               0 1px 3px rgba(140, 30, 75, .45);
}

/* ---------------------------------------------------------------
   Indicador de rolagem da abertura

   Um traço que sobe e desce de leve, com a ponta apontando para
   baixo. Fica no primeiro quadro, com o pote ainda fechado, e some
   assim que o texto começa — a partir dali a página já se explica.
   --------------------------------------------------------------- */
.seta {
  position: relative;
  display: block;
  width: 2px;
  height: calc(44px * var(--t, 1));
  margin: calc(14px * var(--t, 1)) auto calc(10px * var(--t, 1));
  border-radius: 2px;
  background: linear-gradient(rgba(255, 45, 142, 0), var(--rosa-vivo));
  animation: desliza 1.9s ease-in-out infinite;
}
.seta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: calc(9px * var(--t, 1));
  height: calc(9px * var(--t, 1));
  border-right: 2px solid var(--rosa-vivo);
  border-bottom: 2px solid var(--rosa-vivo);
  transform: translate(-50%, 40%) rotate(45deg);
}
@keyframes desliza {
  0%, 100% { transform: translateY(-7px); opacity: .5; }
  50%      { transform: translateY(7px);  opacity: 1; }
}

.bloco--rolar .linha--rosa {
  font-size: calc(clamp(12px, 1.05vw, 16px) * var(--t, 1));
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Logos do fecho
   --------------------------------------------------------------- */
.logo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(120, 20, 60, .18));
}

/* Halo: um borrão branco redondo atrás da logo, sem moldura.

   A logo da designer é traço fino vinho sobre o papel rosa claro do
   túnel, e ali ela quase desaparece. Um cartão resolveria, mas
   apareceria como um retângulo colado na cena. Aqui o fundo é só
   desfocado e clareado, com a máscara radial apagando a borda — não há
   contorno nenhum, só um clarão macio que morre antes de virar forma. */
.bloco--halo::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle,
              rgba(255, 255, 255, .55) 0%,
              rgba(255, 255, 255, .28) 45%,
              rgba(255, 255, 255, 0) 70%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 70%);
  mask-image: radial-gradient(circle, #000 42%, transparent 70%);
}

/* ---------------------------------------------------------------
   Faixa branca atrás dos títulos de aba

   O rosa vivo do título sobre o rosa do filme tem contraste curto. A
   faixa clara desfocada devolve a leitura sem tapar a animação.
   --------------------------------------------------------------- */
.bloco--faixa {
  padding: calc(16px * var(--t, 1)) calc(28px * var(--t, 1));
  border-radius: calc(26px * var(--t, 1));
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 14px 36px -16px rgba(120, 20, 60, .35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.retrato {
  width: calc(clamp(96px, 13vw, 190px) * var(--t, 1));
  height: calc(clamp(96px, 13vw, 190px) * var(--t, 1));
  border-radius: 50%;
  object-fit: cover;
  border: calc(4px * var(--t, 1)) solid #fff;
  box-shadow: 0 16px 40px -14px rgba(120, 20, 60, .6);
}
.bloco--perfil[data-al="centro"] .retrato { align-self: center; }
.bloco--perfil[data-al="dir"]    .retrato { align-self: flex-end; }

/* número do passo, nas abas de processo */
.linha--numero {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: calc(clamp(22px, 2.3vw, 34px) * var(--t, 1));
  color: rgba(255, 255, 255, .85);
  line-height: 1;
  margin: 0;
  text-shadow: 0 2px 0 rgba(180, 30, 90, .3);
}

.bloco--perfil .linha--rosa {
  font-size: calc(clamp(13px, 1.15vw, 17px) * var(--t, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* o nome completo é longo e o balão é estreito: sem reduzir aqui ele
   quebraria em quatro linhas */
/* O nome dela é a única coisa em rosa escuro sobre rosa.

   O estilo "titulo" é um degradê recortado no texto, do rosa brilhante
   ao vinho — desenhado para pousar sobre o papel claro do filme, onde
   ele brilha. Dentro do balão de perfil, que é rosa translúcido, esse
   mesmo degradê fica quase da cor do fundo e o nome some.

   Aqui o degradê sai e entra branco chapado, que é o que o balão
   comporta. A sombra é um brilho macio, e não a sombra rosa dura das
   outras linhas brancas: dentro do balão ela dobraria o traço, e é por
   isso que o próprio balão já a desliga nas demais. */
.bloco--perfil .linha--titulo {
  font-size: calc(clamp(19px, 2.1vw, 31px) * var(--t, 1));
  line-height: 1.08;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(140, 30, 75, .45));
}

[data-al="esq"]    { align-items: flex-start; text-align: left; }
[data-al="centro"] { align-items: center;     text-align: center; }
[data-al="dir"]    { align-items: flex-end;   text-align: right; }

.linha { margin: 0; white-space: pre-line; line-height: 1.12; }

/* --- rosa escuro, gordo, com brilho --- */
.linha--titulo {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: calc(clamp(30px, 4.3vw, 62px) * var(--t, 1));
  background: linear-gradient(178deg,
              var(--rosa-gloss) 0%,
              var(--rosa-gloss) 26%,
              var(--rosa-escuro) 52%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(160, 20, 60, .22));
}

/* --- rosa vivo com contorno claro --- */
.linha--display {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: calc(clamp(30px, 4.6vw, 66px) * var(--t, 1));
  color: var(--rosa-vivo);
  letter-spacing: .005em;
  -webkit-text-stroke: calc(2px * var(--t, 1)) var(--rosa-claro);
  paint-order: stroke fill;
  text-shadow: 0 calc(4px * var(--t, 1)) 0 rgba(180, 30, 90, .28);
}

/* --- rosa vivo menor --- */
.linha--rosa {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: calc(clamp(17px, 1.75vw, 26px) * var(--t, 1));
  color: var(--rosa-vivo);
  line-height: 1.25;
  text-shadow: 0 2px 0 rgba(180, 30, 90, .22);
}

/* --- branco com sombra rosa dura --- */
.linha--branco,
.linha--branco-p {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  color: #fff;
  line-height: 1.28;
  text-shadow: calc(3px * var(--t, 1)) calc(5px * var(--t, 1)) 0 var(--sombra-rosa);
}
.linha--branco   { font-size: calc(clamp(22px, 2.6vw, 40px) * var(--t, 1)); }
.linha--branco-p { font-size: calc(clamp(15px, 1.5vw, 23px) * var(--t, 1)); }

/* marcados com semSombra no textos.js — o bloco inteiro ou uma linha só */
.bloco--sem-sombra .linha,
.linha--sem-sombra { text-shadow: none; }

/* ---------------------------------------------------------------
   Barra de carregamento dos quadros
   --------------------------------------------------------------- */
#carga {
  position: fixed;
  left: 50%; bottom: 5vh;
  transform: translateX(-50%);
  z-index: 4;
  width: min(220px, 56vw);
  text-align: center;
  transition: opacity .4s ease;
}
#carga.sumiu { opacity: 0; pointer-events: none; }
#carga i {
  display: block; height: 3px; border-radius: 3px;
  background: rgba(201, 24, 74, .18); overflow: hidden;
}
#carga i b {
  display: block; height: 100%; width: 0;
  background: var(--rosa-vivo);
  transition: width .25s ease;
}
#carga small {
  display: block; margin-top: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rosa-escuro);
}

@media (prefers-reduced-motion: reduce) {
  .bloco { transition: none; }
}

/* =====================================================================
   TELA EM PÉ

   A conta do recorte é a mesma do JavaScript (altura > largura × 1,15).
   Se as duas divergissem, o texto encolheria numa orientação e se
   posicionaria pela outra.

   POR QUE ESTAS REGRAS EXISTEM

   Quase todo tamanho de letra do site é um clamp com três valores: um
   mínimo, um valor que acompanha a largura da tela, e um máximo. Num
   celular de 390px o termo do meio some — 1,65vw dá 6px, e o mínimo
   assume. Isso é certo para o celular e errado para tudo que é em pé e
   maior: numa janela estreita de 890px, que é como se confere isto num
   monitor, o termo do meio ainda dava menos que o mínimo, e a letra
   ficava do tamanho de celular numa tela duas vezes mais larga.

   Aqui o coeficiente vw sobe. No celular nada muda, porque o mínimo
   continua mandando; da metade da largura de um monitor em diante o
   texto volta a crescer com a tela.

   Fica no fim do arquivo de propósito: várias destas regras têm a mesma
   especificidade das que sobrescrevem, e a ordem é o que decide.
   ===================================================================== */
@media (max-aspect-ratio: 100/115) {

  /* --- cartões de serviço e processo --- */
  .bloco--balao .linha--rosa {
    font-size: calc(clamp(17px, 3.2vw, 34px) * var(--t, 1));
  }
  .bloco--balao .linha--branco-p {
    font-size: calc(clamp(14px, 2.6vw, 28px) * var(--t, 1));
  }
  .bloco--aba .linha--branco-p {
    font-size: calc(clamp(16px, 3vw, 30px) * var(--t, 1));
  }
  .linha--numero {
    font-size: calc(clamp(22px, 3.8vw, 44px) * var(--t, 1));
  }

  /* --- legendas soltas sobre o filme --- */
  .linha--rosa    { font-size: calc(clamp(17px, 3vw, 34px) * var(--t, 1)); }
  .linha--branco  { font-size: calc(clamp(22px, 3.4vw, 42px) * var(--t, 1)); }
  .linha--branco-p{ font-size: calc(clamp(15px, 2.5vw, 30px) * var(--t, 1)); }

  /* --- crédito da Pollennomics --- */
  .linha--credito { font-size: calc(clamp(11px, 2.2vw, 24px) * var(--t, 1)); }
  .cta--mini      { font-size: calc(clamp(11px, 2.2vw, 24px) * var(--t, 1)); }

  /* Peça do portfólio mais baixa.

     As cinco tiras ficam empilhadas ao mesmo tempo, então a altura da
     peça não é escolha, é divisão: o que ela toma, o nome do trabalho
     perde. A 9vh sobra altura para o nome ser lido — e é o nome que
     manda a pessoa abrir o projeto. */
  .tira__peca img {
    height: calc(clamp(60px, 9vh, 150px) * var(--t, 1));
  }

  /* Botão de chamada com menos folga nas laterais.

     Na tela em pé o botão tem de ser estreito para parecer botão e não
     barra — mas "Portfólio no Behance" precisa de largura, e quebrado
     em duas linhas ele deixa de parecer botão do mesmo jeito. Os 22px
     de folga lateral eram um terço do espaço útil; a 14px o mesmo
     botão estreito comporta a letra maior sem quebrar. */
  /* No fecho os cinco botões são PASTILHAS, não barras.

     O botão inteiro nasceu com width:100%. No monitor isso não aparece
     como problema, porque lá a caixa dele já é estreita — a largura da
     caixa é que dá a forma. Na tela em pé a mesma regra o estica de
     borda a borda, e uma faixa dessas lê como divisória de seção, não
     como coisa clicável.

     O da Pollennomics sempre foi uma pastilha ajustada ao próprio
     texto, e é essa a forma certa para todos aqui. Agora os cinco
     usam ela: a largura vem do rótulo, a altura é a mesma nos cinco, e
     o que distingue o da Pollennomics continua sendo só a cor — clara
     e discreta, de propósito.

     Com isso o "l" do textos.js deixa de ser a largura do botão e vira
     só o limite dele. Quem ainda precisa daquela largura é a linha de
     crédito, que tem de caber inteira numa linha só. */
  .cta,
  .cta--mini {
    width: auto;
    max-width: 100%;
    align-self: center;
    padding: calc(10px * var(--t, 1)) calc(18px * var(--t, 1));
    font-size: calc(clamp(15px, 2.1vw, 24px) * var(--t, 1));
  }
}