/* Torres Soares — bloco de expertise do hero.
   Escopo: .ts-expertise-*  |  Sem dependências externas. */

/* Fallback de métricas ajustadas ao Inter.
   O Inter é servido com font-display: swap. Até o arquivo chegar, o texto
   do bloco era desenhado com a fonte do sistema, de métricas diferentes: o
   título quebrava em outra altura e, na troca, a introdução, o palco e a
   lista desciam de uma vez — era essa a origem do deslocamento de layout
   medido (CLS de 0,05 no desktop e 0,12 no celular).

   Esta face não desenha nada de novo: reaproveita a fonte local do sistema
   e a reescala para a caixa do Inter, de modo que as duas ocupem o mesmo
   espaço. Assim a troca deixa de empurrar o conteúdo. Nenhum arquivo
   externo é buscado — só famílias já instaladas na máquina. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"),
       local("Roboto"), local("Liberation Sans"), local("Segoe UI");
  size-adjust: 107.40%;
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

.ts-expertise {
  --tse-ground: #0A1B26;
  --tse-gold: #D4A858;
  --tse-ink: #F2F6F8;
  --tse-body: #93A9B4;
  --tse-mute: #7E96A3;
  --tse-risk: #C7645A;
  --tse-line: rgba(255, 255, 255, .07);
  background: var(--tse-ground);
  box-sizing: border-box;
  padding: clamp(28px, 3.4vw, 56px) clamp(20px, 3.6vw, 64px);
  font-family: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ts-expertise *,
.ts-expertise *::before,
.ts-expertise *::after { box-sizing: border-box; }

.ts-expertise-grid {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.ts-expertise-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}

.ts-expertise-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--tse-gold);
  margin: 0;
}

.ts-expertise-title {
  margin: 0;
  font-size: clamp(30px, 3.7vw, 54px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--tse-ink);
  text-wrap: balance;
}

.ts-expertise-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--tse-gold);
}

.ts-expertise-lede {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--tse-body);
  max-width: 52ch;
  text-wrap: pretty;
}

.ts-expertise-rule {
  height: 1px;
  background: rgba(255, 255, 255, .14);
  margin-top: 6px;
}

.ts-expertise-list {
  display: flex;
  flex-direction: column;
  margin-top: -4px;
}

.ts-expertise-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 4px 17px;
  border-top: 1px solid var(--tse-line);
  text-decoration: none;
  color: inherit;
}

.ts-expertise-item:first-child { border-top: 0; }

.ts-expertise-item:focus-visible {
  outline: 2px solid var(--tse-gold);
  outline-offset: 3px;
}

.ts-expertise-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--tse-gold);
  transform: scaleX(0);
  transform-origin: left;
}

.ts-expertise-item[aria-current="true"] .ts-expertise-progress {
  animation: tse-grow var(--tse-cycle, 7620ms) linear forwards;
}

.ts-expertise-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.ts-expertise-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--tse-mute);
  transform: translateY(-2px);
  transition: background .4s ease, border-color .4s ease;
}

.ts-expertise-num {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  flex: 0 0 auto;
  color: var(--tse-mute);
  transition: color .4s ease;
}

.ts-expertise-name {
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.01em;
  min-width: 0;
  flex: 1 1 auto;
  color: #A9BCC5;
  transition: color .4s ease;
}

.ts-expertise-arrow {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--tse-mute);
  transition: color .4s ease, transform .4s ease;
}

.ts-expertise-desc {
  display: block;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.55;
  color: var(--tse-mute);
  padding-left: 30px;
  text-wrap: pretty;
  margin: 0;
}

.ts-expertise-item[aria-current="true"] .ts-expertise-dot {
  background: var(--tse-gold);
  border-color: var(--tse-gold);
}

.ts-expertise-item[aria-current="true"] .ts-expertise-num,
.ts-expertise-item[aria-current="true"] .ts-expertise-arrow { color: var(--tse-gold); }
.ts-expertise-item[aria-current="true"] .ts-expertise-name { color: var(--tse-ink); }
.ts-expertise-item[aria-current="true"] .ts-expertise-desc { color: var(--tse-body); }
.ts-expertise-item:hover .ts-expertise-arrow { transform: translateX(3px); }

/* ---- Sombreamento dos temas em espera ----
   O tema da cena que está no palco fica cheio; os outros dois recuam, e
   voltam ao recuo assim que o ponteiro ou o foco sai. A opacidade é
   aplicada ao conteúdo do item — cabeçalho, descrição e filete — e nunca
   ao próprio item: assim o contorno de foco, a área de toque e a leitura
   por tecnologia assistiva continuam inteiros. Tamanhos, espaçamentos,
   posições e área clicável não mudam. */
.ts-expertise-item > .ts-expertise-head,
.ts-expertise-item > .ts-expertise-desc,
.ts-expertise-item > .ts-expertise-progress {
  opacity: .28;
  transition: opacity .22s ease;
}
.ts-expertise-item { transition: border-color .22s ease; }
.ts-expertise-item:hover > .ts-expertise-head,
.ts-expertise-item:hover > .ts-expertise-desc,
.ts-expertise-item:hover > .ts-expertise-progress,
.ts-expertise-item:focus-visible > .ts-expertise-head,
.ts-expertise-item:focus-visible > .ts-expertise-desc,
.ts-expertise-item:focus-visible > .ts-expertise-progress { opacity: .78; }
/* o tema ativo vem por último: continua cheio mesmo sob o ponteiro */
.ts-expertise-item[aria-current="true"] > .ts-expertise-head,
.ts-expertise-item[aria-current="true"] > .ts-expertise-desc,
.ts-expertise-item[aria-current="true"] > .ts-expertise-progress { opacity: 1; }
.ts-expertise-item[aria-current="true"] { border-top-color: rgba(255, 255, 255, .07); }

/* ---- Cena ---- */

.ts-expertise-stage {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.ts-expertise-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Área protegida do botão flutuante.
   Onde o botão pode cair dentro do palco, a arte é recortada por um
   degradê suave centrado na posição real dele, lida pelo JavaScript. Não é
   painel, caixa nem fundo: o que existe sob o botão é ausência de traço, e
   a borda do recorte se dissolve antes de virar contorno. Fora do celular
   as variáveis não são definidas e a máscara fica longe do palco. */
.ts-expertise-stage[style*="--tse-fab-mx"] .ts-expertise-canvas {
  -webkit-mask-image: radial-gradient(circle var(--tse-fab-r, 44px) at
                        var(--tse-fab-mx, -600px) var(--tse-fab-my, -600px),
                        transparent 0 80%, #000 100%);
          mask-image: radial-gradient(circle var(--tse-fab-r, 44px) at
                        var(--tse-fab-mx, -600px) var(--tse-fab-my, -600px),
                        transparent 0 80%, #000 100%);
}

.ts-expertise-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* As etiquetas são levadas ao lugar por transform, não por left/top: assim
   o reposicionamento — que acontece quando a fonte troca e a largura real
   de cada etiqueta muda — não conta como deslocamento de layout, e ainda
   evita recalcular a posição no fluxo a cada quadro. */
.ts-expertise-tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #D3DFE5;
  background: rgba(10, 27, 38, .88);
  border: 1px solid rgba(212, 168, 88, .42);
  padding: 4px 8px;
  opacity: 0;
  transition: opacity .7s ease;
}

.ts-expertise-tag[data-on="1"] { opacity: 1; }

.ts-expertise-axes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ts-expertise-axislabel {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8FA5B0;
  opacity: 0;
  transition: opacity .45s ease;
}

.ts-expertise-axislabel[data-on="1"] { opacity: 1; }
/* ---- Breakpoints ---- */

@media (min-width: 768px) {
  .ts-expertise-stage { height: 400px; }
}

@media (min-width: 1024px) {
  .ts-expertise-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }
  .ts-expertise-stage { height: 500px; }
  .ts-expertise-tag { font-size: 10px; }
}

@media (min-width: 1280px) {
  .ts-expertise-stage { height: 560px; }
}

@keyframes tse-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-expertise * {
    animation: none !important;
    transition: none !important;
  }
  .ts-expertise-item[aria-current="true"] .ts-expertise-progress { transform: scaleX(1); }
}

/* =========================================================
   INTEGRAÇÃO AO HERO DA HOME
   Nada abaixo desta linha existia no arquivo entregue.
   ========================================================= */

/* 1) Fundo transparente.
   O componente é montado dentro do .hero original, sobre as camadas
   .hero-image, .hero-mesh, .hero-dots e .hero-vignette. A variável
   --tse-ground continua definida: etiquetas e reservas de cor a usam. */
.ts-expertise {
  background: transparent;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 2) O .hero já centraliza e já garante a primeira dobra pelas regras
   globais publicadas. Aqui apenas se anula o respiro vertical dele, que
   somado ao do componente reduziria demais a área da cena. O respiro
   lateral permanece com o componente. */
.hero:has(> .ts-expertise) {
  padding-top: 0;
  padding-bottom: 0;
}

/* 3) Grade do desktop: introdução em cima à esquerda, lista embaixo à
   esquerda, cena ocupando a coluna direita inteira. No celular a ordem é
   a do documento: etiqueta, título, introdução, cena, lista. */
@media (min-width: 1024px) {
  .ts-expertise-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    grid-template-areas:
      "intro stage"
      "lista stage";
    align-items: center;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: clamp(14px, 1.6vw, 22px);
  }
  .ts-expertise-intro { grid-area: intro; }
  .ts-expertise-list  { grid-area: lista; }
  .ts-expertise-stage { grid-area: stage; align-self: center; }
}

/* 4) Composição do celular, não uma redução do desktop.
   Respiro lateral de 22px, palco dentro da faixa de 240–280px, itens da
   lista com área de toque confortável e descrições ainda legíveis. */
@media (max-width: 1023px) {
  .ts-expertise { padding: clamp(22px, 5vw, 40px) 22px clamp(26px, 6vw, 44px); }
  .ts-expertise-grid { gap: clamp(18px, 4vw, 28px); }
  .ts-expertise-stage { height: 276px; }
  .ts-expertise-list { margin-top: 0; }
  .ts-expertise-item { padding: 14px 4px 15px; min-height: 44px; }
  .ts-expertise-desc { font-size: 13.5px; }
  .ts-expertise-title { text-wrap: balance; }
  /* no celular a lista é lida de perto e sobre a fotografia: os temas em
     espera recuam um pouco menos que no desktop */
  .ts-expertise-item > .ts-expertise-head,
  .ts-expertise-item > .ts-expertise-desc,
  .ts-expertise-item > .ts-expertise-progress { opacity: .32; }
  .ts-expertise-item:hover > .ts-expertise-head,
  .ts-expertise-item:hover > .ts-expertise-desc,
  .ts-expertise-item:hover > .ts-expertise-progress,
  .ts-expertise-item:focus-visible > .ts-expertise-head,
  .ts-expertise-item:focus-visible > .ts-expertise-desc,
  .ts-expertise-item:focus-visible > .ts-expertise-progress { opacity: .78; }
  .ts-expertise-item[aria-current="true"] > .ts-expertise-head,
  .ts-expertise-item[aria-current="true"] > .ts-expertise-desc,
  .ts-expertise-item[aria-current="true"] > .ts-expertise-progress { opacity: 1; }
}

/* 5) Área protegida do botão do WhatsApp.
   Em telas estreitas o botão flutua no canto inferior direito. As
   etiquetas passam a respeitar essa faixa; a cena não se desloca. O
   recuo é lido pelo JavaScript, que já considera a largura real de cada
   etiqueta. */
@media (max-width: 520px) {
  .ts-expertise-stage { --tse-fab-guard: 72px; --tse-fab-alt: 80px; }
}

/* No celular deitado o palco chega ao rodapé da janela e o botão flutuante
   passa a cair dentro dele — era ali que o rótulo do último movimento do
   passivo ficava por baixo. A reserva é um retângulo no canto inferior
   direito: 48px do botão, o afastamento de 18/22px e um respiro. As
   etiquetas desviam dela e a movimentação do passivo desconta a largura. */
@media (max-width: 1023px) and (max-height: 540px) {
  .ts-expertise-stage { --tse-fab-guard: 78px; --tse-fab-alt: 82px; }
}

/* 6) Sombreado localizado para leitura sobre a fotografia.
   As camadas originais (.hero-image com seu gradiente, .hero-mesh,
   .hero-dots e .hero-vignette) sozinhas deixam a introdução e as
   descrições — os textos mais claros da paleta, #93A9B4 e #7E96A3 —
   com contraste insuficiente sobre as áreas iluminadas dos prédios.

   Não é um painel: são dois gradientes transparentes desenhados atrás do
   conteúdo do componente. O primeiro adensa a coluna de texto e se
   dissolve antes da metade direita; o segundo é uma vinheta radial suave
   sob a arte, para separar as linhas da fotografia. Os prédios continuam
   visíveis nos dois lados e a imagem não é substituída nem reenquadrada. */
.ts-expertise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(10, 27, 38, .88) 0%,
      rgba(10, 27, 38, .74) 32%,
      rgba(10, 27, 38, .34) 56%,
      rgba(10, 27, 38, .12) 76%,
      rgba(10, 27, 38, .04) 100%),
    radial-gradient(56% 60% at 74% 50%,
      rgba(10, 27, 38, .40) 0%,
      rgba(10, 27, 38, 0) 72%);
}

/* No celular o texto ocupa a largura inteira: o adensamento passa a ser
   vertical, mais forte no topo, onde ficam título e introdução, e leve
   sobre a cena. */
@media (max-width: 1023px) {
  .ts-expertise::before {
    background:
      linear-gradient(180deg,
        rgba(10, 27, 38, .90) 0%,
        rgba(10, 27, 38, .82) 42%,
        rgba(10, 27, 38, .58) 66%,
        rgba(10, 27, 38, .46) 100%),
      radial-gradient(80% 34% at 50% 62%,
        rgba(10, 27, 38, .34) 0%,
        rgba(10, 27, 38, 0) 74%);
  }
}

/* 7) Ganho de escala das cenas.
   As três cenas já eram desenhadas no limite do palco: o valor interno de
   escala de cada uma corresponde à extensão do seu elemento mais externo
   — a órbita, o eixo de exposição e o contorno dos planos. Ampliar a arte
   dentro do mesmo palco consome justamente a margem que evita o corte
   desses elementos, e foi o que se observou nas medições.

   O ganho vem então do palco: ele cresce, e a arte cresce junto, em
   pixels absolutos, mantendo as mesmas margens relativas. A coluna de
   texto cede um pouco de largura, sem invadir nem ser invadida. */
@media (min-width: 1024px) {
  .ts-expertise-grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr); }
  .ts-expertise-stage { height: 566px; }
}
@media (min-width: 1280px) {
  .ts-expertise-stage { height: 624px; }
}
@media (min-width: 1600px) {
  .ts-expertise-stage { height: 660px; }
}

/* 8) Legenda das seis áreas no celular.
   Com os seis participantes simultâneos, etiquetas soltas ao redor do
   círculo colidem em telas estreitas. Até 520px elas passam a formar uma
   legenda no rodapé do palco, cada uma com o seu ponto dourado. O
   JavaScript lê --tse-legenda e deixa de posicioná-las.

   Uma coluna, e não duas: a etiqueta mais larga ("Finanças / Controladoria"
   e "Finance / Controllership") mede 176px a 9px de corpo, enquanto a
   faixa útil a 320px é de 189px — descontada a área do botão flutuante.
   Duas colunas só caberiam encurtando o nome ou baixando o corpo abaixo
   dos 8,5px, e ambas as coisas estão vedadas. */
@media (max-width: 520px) {
  .ts-expertise-stage { --tse-legenda: 1; }

  .ts-expertise-tags {
    inset: auto 0 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: 1px;
    padding-right: var(--tse-fab-guard, 0);
  }

  .ts-expertise-tag {
    position: static;
    transform: none;
    will-change: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    background: rgba(10, 27, 38, .78);
    border: 0;
    padding: 2px 4px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  .ts-expertise-tag::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tse-gold);
  }
}

/* Descrição estática da arte para leitores de tela. Fica fora do fluxo do
   grid, por posicionamento absoluto, e não interfere na composição. */
.ts-expertise-descricao {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   9) ÍNDICE LATERAL DA HOME
   O site tem um índice fixo à esquerda — aside.rail, #sectionRail, os
   números 01 a 05 — posicionado em left:clamp(16px,2vw,32px) e top:50%.
   Ele nasceu para o hero antigo, de coluna única e centralizada. No hero
   novo a coluna de texto começa perto da borda esquerda, e a partir de
   ~1470px de largura os números passam por cima do título e da introdução.
   Além disso o índice é redundante aqui: os três temas do bloco já são a
   navegação da primeira tela, com os mesmos destinos.

   A regra tira o índice do layout e da árvore de acessibilidade — não é
   deslocamento visual nem opacidade. Vale só onde o componente existe:
   esta folha é carregada apenas pelas duas homes, e o :has confirma o
   contexto. As páginas internas seguem com o índice intacto. */
body:has(.ts-expertise) .rail { display: none; }

/* =========================================================
   10) DESKTOP LARGO E BAIXO
   A composição era governada só pela largura: o respiro do bloco vem de
   clamp(...vw), e a altura do palco muda por min-width. Numa janela larga
   e baixa — 1470x636 de área útil na captura relatada, e igualmente em
   1920x768, 1680x768 ou 1280x720 — a soma cabeçalho + respiro + palco de
   624 a 660px passa da primeira tela, e o terceiro tema fica cortado na
   borda inferior: sobravam 10px em 1920x768, 11px em 1280x720 e faltavam
   7px em 1680x768.

   Aqui a altura passa a governar junto. O limite de 820px foi escolhido
   pelas medições: em 900px de altura a folga abaixo do terceiro tema é de
   127px e nada precisa mudar — por isso 1440x900 e 1920x1080 ficam fora
   da faixa e intactos; de 795px para baixo a folga cai para 37px e some.
   Dentro da faixa cede-se respiro, entrelinha e altura do palco, nesta
   ordem, sem esconder descrição, sem recorte e sem rolagem interna. */
@media (min-width: 1024px) and (max-height: 820px) {
  .ts-expertise {
    padding-top: clamp(14px, 2.4vh, 30px);
    padding-bottom: clamp(14px, 2.4vh, 30px);
  }
  .ts-expertise-grid { row-gap: clamp(8px, 1.6vh, 18px); }
  .ts-expertise-intro { gap: clamp(7px, 1.3vh, 15px); }
  .ts-expertise-title {
    font-size: clamp(27px, 2.7vw, 42px);
    line-height: 1.04;
  }
  .ts-expertise-lede { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; }
  .ts-expertise-rule { margin-top: 2px; }
  .ts-expertise-list { margin-top: 0; }
  .ts-expertise-item { padding: 9px 4px 10px; gap: 3px; }
  .ts-expertise-desc { line-height: 1.45; }
  /* o palco acompanha a altura disponível; a arte reescala sozinha, pelo
     mesmo cálculo de sempre, mantendo proporção e margens relativas */
  .ts-expertise-stage { height: min(560px, calc(100vh - 232px)); }
}

/* =========================================================
   11) COMPOSIÇÃO DO CELULAR — LEGENDA ÚNICA EM SLOT FIXO
   Medido antes, em duas tentativas. Na primeira, a ordem do documento punha
   o palco no meio e o primeiro tema só começava aos 635px em 375x812. Na
   segunda, a lista inteira subiu para antes do palco: o assunto passou a
   vir antes do desenho, mas as três legendas empilhadas somavam cerca de
   350px de texto entre a introdução e o gráfico — num iPhone real o gráfico
   nascia fora da tela, e duas das três legendas eram sempre ruído, porque
   descrevem cenas que não estão no palco.

   Aqui as três legendas ocupam a mesma célula de grade. Só a que tem
   `aria-current="true"` fica visível; as outras duas continuam no fluxo,
   contribuindo para a altura da célula, mas invisíveis, sem foco, sem
   clique e fora da árvore de acessibilidade. A altura do slot é a da maior
   das três em cada idioma, de modo que a borda de cima e a de baixo não se
   movem quando a cena troca — o deslocamento de layout continua nulo, e
   agora o gráfico começa logo depois da legenda que ele ilustra.

   A troca é uma passagem de opacidade em dois tempos: a legenda que sai
   desaparece em 110ms e só então a que entra aparece em 110ms, no mesmo
   ponto. Nunca há duas legíveis ao mesmo tempo, e nunca há nenhuma
   ausente por mais de um quadro. Sem deslocamento, escala ou reordenação.

   O ponto de quebra não é só a largura. O celular deitado tem 844 ou 932px
   de largura e 390 ou 430px de altura: pela largura ele passaria por
   desktop, mas é o mesmo aparelho, com o mesmo polegar e o mesmo botão
   flutuante, e ali a pilha de três legendas não cabe de jeito nenhum. A
   segunda condição é a mesma já usada pela reserva do botão no celular
   deitado — até 1023px de largura e até 540px de altura —, e ela não
   alcança o tablet em pé (768x1024), o tablet deitado (1024x768) nem
   nenhum desktop, que têm largura ou altura acima dos limites.

   No tablet e no desktop nada disso vale: as três legendas continuam
   simultâneas, com o esmaecimento e a interação de sempre. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 540px) {
  /* altura natural: sem min-height de tela cheia e sem centralização
     vertical. `.hero` herda clamp(580px, 80vh, 800px) da folha global e,
     no Safari, `vh` é o viewport grande — com as barras recolhidas —, de
     modo que a altura reservada não correspondia ao que se enxerga com as
     barras abertas e empurrava o conteúdo para trás delas. */
  .hero:has(> .ts-expertise) {
    min-height: 0;
    justify-content: flex-start;
  }

  .ts-expertise {
    /* lida pelo JavaScript: é este arquivo que decide onde vale o slot
       único, e o script apenas obedece ao ponto de quebra declarado aqui */
    --tse-slot: 1;
    padding-bottom: calc(clamp(26px, 6vw, 44px) + env(safe-area-inset-bottom, 0px));
  }

  /* introdução, legenda única e gráfico, nesta ordem e encostados: o
     intervalo entre a legenda e o gráfico fica na faixa de 10 a 18px */
  .ts-expertise-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3vw, 18px);
  }
  .ts-expertise-intro { order: 1; }
  .ts-expertise-list  { order: 2; }
  .ts-expertise-stage { order: 3; }

  /* uma célula só: os três itens são empilhados nela e a altura da célula
     é a do maior deles, em qualquer idioma */
  .ts-expertise-list {
    display: grid;
    grid-template-areas: 'legenda';
    /* A célula é dimensionada pela legenda mais alta das três, e as outras
       duas sobram. Ancorando na base, a sobra fica acima da legenda, entre
       ela e a régua da introdução, e nunca entre a legenda e o gráfico: o
       que o leitor vê é sempre o par legenda-gráfico encostado. A caixa da
       célula não se move — só o conteúdo dentro dela é alinhado embaixo. */
    align-items: end;
  }

  .ts-expertise-item {
    grid-area: legenda;
    min-height: 44px;
    /* sem a pilha de três, o respiro inferior do item não precisa separar
       nada: ele só afastaria a legenda do gráfico que ela nomeia */
    padding-bottom: 6px;
    /* o divisor entre temas não existe com uma legenda só; o divisor da
       composição é a régua da introdução */
    border-top: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 130ms linear, visibility 0s linear 130ms;
  }
  .ts-expertise-item[aria-current="true"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    /* Entra quando a anterior já está em 0,31 e caindo: os 40ms de
       sobreposição garantem que nunca falte uma legenda, e como nenhuma
       das duas passa de 0,31 nesse intervalo, nunca há duas legíveis.
       Total da troca: 220ms. */
    transition: opacity 130ms linear 90ms, visibility 0s linear 90ms;
  }

  /* o esmaecimento dos temas em espera não se aplica aqui: no celular o
     único item visível é sempre o ativo, e ele é sempre pleno */
  .ts-expertise-item > .ts-expertise-head,
  .ts-expertise-item > .ts-expertise-desc,
  .ts-expertise-item > .ts-expertise-progress { opacity: 1; }
}

/* =========================================================
   12) COLUNA RESERVADA DO BOTÃO FLUTUANTE
   O botão é fixo à janela: qualquer conteúdo que passe pelo canto inferior
   direito fica sob ele, em qualquer posição de rolagem. Empurrar a lista
   para baixo só troca quem é coberto. A reserva é então de coluna, não de
   altura: os itens terminam antes da faixa do botão — caixa real de 48px,
   os 18px de afastamento da direita, mais 12px de margem e a área segura
   do aparelho. Assim título, descrição, seta e a linha divisória do item
   ficam fora do alcance do botão em toda a rolagem. Nada é escondido: o
   texto reflui em mais linhas. O botão não muda de lugar nem de tamanho, e
   pode continuar ocupando a lateral do palco, onde a máscara já garante que
   nenhum traço fique por baixo dele. A reserva acompanha o mesmo ponto de
   quebra da legenda única: onde existe uma legenda só, existe também o
   botão sobre ela. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 540px) {
  .ts-expertise {
    --tse-fab-col: calc(48px + 18px + 12px + env(safe-area-inset-right, 0px));
  }
  .ts-expertise-item {
    /* desconta o respiro lateral que o bloco já reserva */
    margin-right: max(0px, calc(var(--tse-fab-col) - 22px));
  }
}