/* ==========================================================================
   Página de palestras (palestras.html; até 03/11/2026, a "Palestra teste",
   palestras-teste.html, de onde vem o nome deste arquivo)
   Mesma copy da página de palestras (documento "Copy do site", Palestras v2),
   numa composição inspirada em duas páginas da Sonder:
   - sonder-mr.com/services: blocos de cor encostados uns nos outros, sem
     margens, metade e metade da tela; título no alto e texto na base de cada
     bloco; palavras gigantes cortadas pelas bordas; a lista "Capabilities"
     com filtros grandes (o ativo cheio, os outros apagados).
   - sonder-mr.com/people: bloco de número ao lado do título, bloco de texto
     grande (citação), lista de pessoas com nome grande à esquerda e
     informações à direita (no hover a faixa fica escura).

   Módulo: --m = 1/12 da largura do frame (126px em 1512). As alturas dos
   blocos são múltiplos dele, como na referência. --cell = respiro interno
   vertical dos blocos. Na horizontal, todo conteúdo usa --pad (64px em
   1512), a mesma margem lateral do resto do site.

   T1  Abertura ........ medidas do Figma (frame "Palestras", 588:4287):
                         título com a troca de palavras
                         (paulkalkbrenner.net/journey) e botão no bloco
                         vermelho; foto; palavra gigante
   T2  Contexto ........ vídeo em cores na largura toda, com o
                         título no alto e o texto na base (Figma, 600:378)
   T3  Palestras ....... painel fixo com o título (48px) e o índice (à
                         esquerda) e um bloco de cor por palestra (à
                         direita; título 40px e subtítulo 24px, Figma)
   T4  Temas ........... faixas de texto em movimento e cartão branco fixo
                         no centro (hlebozavod9.ru)
   T5  Antes do palco .. bege: título à esquerda; à direita, os termos em
                         texto corrido, que se acendem com o scroll, e os
                         parágrafos
   T6  Formatos ........ painel fixo (título e link), blocos de cor e,
                         à direita, foto e faixa com a palavra do formato
   T7  Experiência ..... logos (grade da seção 07 da home, clientes.css)
   T8  Iona Szkurnik ... retrato; bio no bloco vinho
   T9  Perguntas ....... lista com a pergunta e a resposta lado a lado
   T10 Leve essa conversa  vinho, nas cores do "Hoje" da página Sobre: logo
                         verde-limão à esquerda (entra deslizando), texto e
                         link grande claro
   ========================================================================== */

.page-talks-test {
  --m: calc(126 * var(--fp));
  --cell: max(20px, calc(32 * var(--fp)));
  /* Escala de texto da página: a mesma da seção "Palestras disponíveis".
     Título de seção 48 · subtítulo 24 (medium) · parágrafo 17 (no frame
     de 1512; no celular, 32 · 18 · 15). O título da abertura (80, Figma),
     os títulos dos cards (40) e o número "30–45" ficam fora da escala. */
  --t-title: max(32px, calc(48 * var(--fp)));
  --t-sub: max(18px, calc(24 * var(--fp)));
  --t-text: max(15px, calc(17 * var(--fp)));
  --rule-dark: rgba(7, 0, 0, 0.16);
  --rule-light: rgba(251, 245, 238, 0.3);
  --muted: #6f6969;
}

/* ---------- Tipografia ---------- */
.t-h1,
.t-h2,
.t-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
}
.t-h1 {
  max-width: 16ch;
  font-size: var(--t-title);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-h2 {
  max-width: 15ch;
  font-size: max(32px, calc(56 * var(--fp)));
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.t-h3 {
  max-width: 15ch;
  font-size: max(28px, calc(44 * var(--fp)));
  line-height: 1.08;
  letter-spacing: -0.03em;
}
:is(.t-h1, .t-h2, .t-h3) .rv-line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* Botão retangular (o .btn do site; aqui na largura do rótulo) */
.btn.t-btn {
  align-self: flex-start;
  width: auto;
  height: max(56px, calc(68 * var(--fp)));
  padding: 0 max(22px, calc(28 * var(--fp)));
  font-size: max(15px, calc(17 * var(--fp)));
}
.btn.t-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Palavra gigante cortada pelas bordas do bloco */
.t-word {
  position: absolute;
  font-family: var(--font-display);
  font-size: calc(300 * var(--fp));
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}
.t-word--vertical {
  writing-mode: vertical-rl;
}

/* ==========================================================================
   T1 · Abertura
   Medidas: Figma, frame "Palestras" (node 588:4287), em 1512:
   faixa do header 100; bloco vermelho 748 de largura e 713 de altura;
   foto 764 × 493; bloco azul 764 × 220.
   Título: Plus Jakarta bold 80/1.35, -0.02em, 642 de largura, alto das
   maiúsculas a 97 do topo do bloco (padding-top 70 = 97 - 27, a distância
   entre o topo da linha e o alto das maiúsculas nessa entrelinha).
   Botão: branco, 80 de altura, 40 de respiro lateral, a 35 da base.
   ========================================================================== */
.t-hero {
  display: grid;
  grid-template-columns: calc(748 * var(--fp)) minmax(0, 1fr);
  grid-template-rows: calc(493 * var(--fp)) calc(220 * var(--fp));
  padding-top: var(--nav-h); /* faixa branca do header (100px em 1512) */
  background: var(--c-white);
}
.t-hero__title {
  grid-area: 1 / 1 / 3 / 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(70 * var(--fp)) var(--pad) calc(35 * var(--fp));
  background: var(--c-red);
  color: var(--c-white);
}
.btn--white.t-btn:focus-visible {
  outline-color: var(--c-white);
}

/* Base: o botão */
.t-hero__actions {
  display: flex;
  align-items: center;
}
.btn.t-hero__cta {
  flex: none;
  width: auto;
  height: calc(80 * var(--fp));
  min-height: 56px;
  padding: 0 calc(40 * var(--fp));
  font-size: max(15px, calc(16 * var(--fp)));
  line-height: 1.2;
}
.btn.t-hero__cta:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}

/* ---------- Título com a troca de palavras ----------
   Referência: paulkalkbrenner.net/journey. "Palestras sobre" fica parado;
   embaixo, a palavra da vez. As três palavras ocupam a mesma célula de um
   grid (a altura é a da mais alta, então nada pula na troca) e a célula
   corta o que passa da borda (máscara).
   Sem a classe .is-rotating (sem JS ou com movimento reduzido), o título
   aparece inteiro, em texto corrido, no tamanho dos outros títulos. */
.t-hero__h1 {
  max-width: calc(642 * var(--fp));
  font-size: max(36px, calc(64 * var(--fp)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-hero__h1.is-rotating {
  font-size: max(44px, calc(80 * var(--fp)));
  line-height: 1.35;
}
.t-hero__h1.is-rotating .t-hero__static {
  display: block;
}
.t-hero__h1.is-rotating .t-rot {
  display: grid;
  /* folga embaixo para os descendentes (ç, g) não serem cortados; em cima,
     a entrelinha de 1.35 já cobre os acentos */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  overflow: clip;
}
.t-rot__word {
  grid-area: 1 / 1;
  align-self: start;
  visibility: hidden;
  will-change: transform, opacity;
}

.t-hero__media {
  position: relative;
  grid-area: 1 / 2;
  overflow: hidden;
  background: #1b1b1b;
}
.t-hero__media img,
.t-bio__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Foto: hero/iona-palco-02.jpg (1448 × 1086), ancorada no alto (06/11/2026,
   a pedido; era 50% 30%): é o máximo de espaço acima da cabeça de Iona que a
   foto tem, sem sobrar faixa vazia na moldura */
.t-hero__media img {
  object-position: 50% 0%;
}

.t-hero__word {
  position: relative;
  grid-area: 2 / 2;
  overflow: hidden;
  background: var(--c-blue);
}
/* "Palestras": Plus Jakarta bold 221.333, -0.02em, começando 55 antes da
   borda do bloco (cortado) e com o alto das maiúsculas a 55 do topo
   (top 19 = 55 - 36, com entrelinha 1) */
.t-hero__word .t-word {
  top: calc(19 * var(--fp));
  left: calc(-55 * var(--fp));
  font-size: calc(221.333 * var(--fp));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-red);
}

/* ==========================================================================
   T2 · Conteúdo pensado para cada contexto
   Figma: Frame 40373 (600:378), 1512 × 640. Vídeo na largura toda, nas
   cores originais (no Figma ele está em preto e branco, pelo modo de
   mesclagem "Luminosity"; a pedido, aqui fica colorido. Para voltar ao
   preto e branco: mix-blend-mode: luminosity no poster e no vídeo).
   Enquadramento do vídeo (Figma): 1745.8 × 982, a -64 da esquerda e a -9
   do topo. Título Plus Jakarta semibold 48/1.25, -0.02em, 644 de largura,
   branco, a 84 do topo. Texto Libre Franklin 18/1.35, branco, alinhado à
   direita, 496 de largura, terminando na margem, com a última linha de
   base a 58 da base (padding de 52 = 58 - 6 do pé da linha).
   ========================================================================== */
.t-context {
  /* sombra suave nas bordas de cima e de baixo, só para garantir a leitura
     do texto em qualquer quadro do vídeo (0 = igual ao Figma) */
  --t-context-shade: 0.3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: calc(640 * var(--fp));
  padding: calc(84 * var(--fp)) var(--pad) calc(52 * var(--fp));
  overflow: clip;
  isolation: isolate;
  background: #000;
  color: var(--c-white);
}
.t-context__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
}
.t-context__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, var(--t-context-shade)) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, var(--t-context-shade)) 100%
  );
  pointer-events: none;
}
/* A imagem parada é o 1º quadro do vídeo, no mesmo tamanho e posição:
   quando o vídeo começa, a troca não aparece */
.t-context__poster,
.t-context__video {
  position: absolute;
  top: calc(-9 * var(--fp));
  left: calc(-64 * var(--fp));
  width: calc(1745.778 * var(--fp));
  height: calc(982 * var(--fp));
  max-width: none;
  object-fit: cover;
}
.t-context__video {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.t-context.has-video .t-context__video {
  opacity: 1;
}

.t-context__title {
  max-width: calc(644 * var(--fp));
  margin: 0;
  font-family: var(--font-display);
  /* 56px no frame de 1512 (exceção à escala de títulos de 48, a pedido) */
  font-size: calc(56 * var(--fp));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.t-context__text {
  align-self: flex-end;
  max-width: calc(496 * var(--fp));
  margin: auto 0 0;
  padding-top: 32px;
  font-family: var(--font-text);
  font-size: var(--t-text);
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
  color: var(--c-white);
}

/* Pausar vídeo: discreto, no canto livre (base, à esquerda) */
.t-context__toggle {
  position: absolute;
  left: var(--pad);
  bottom: calc(52 * var(--fp));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.t-context__toggle[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .t-context__toggle:hover {
    color: var(--c-white);
  }
}
.t-context__toggle:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 4px;
}
.t-context__icon {
  width: 8px;
  height: 9px;
  border-inline: 3px solid currentColor;
}
.t-context__toggle[aria-pressed="true"] .t-context__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- T8 · Iona Szkurnik: a estrutura da T2 (30/10/2026) ----------
   A mesma seção (.t-context), com duas diferenças: a imagem e o vídeo
   preenchem a área (cover), porque o enquadramento da T2 é o do vídeo
   dela no Figma; e a base tem o texto e o botão "Conheça a trajetória"
   numa linha só (.t-context__foot): o texto à direita, como na T2, e o
   botão à esquerda, na margem do título, os dois terminando no respiro de
   baixo da seção (a pedido, 30/10/2026). Como os dois cantos de baixo
   ficam ocupados, o "Pausar vídeo", que na T2 fica no canto de baixo à
   esquerda, aqui vai para o canto de cima à direita, na altura do título.
   Imagem (06/11/2026, a pedido): Iona no palco, a mesma do Keynote
   (palestras/keynote.webp). Ela fica à direita da foto: no desktop e no
   tablet, a moldura mostra a largura toda e 40% na vertical deixa a cabeça
   com respiro; no celular, a foto vai até a borda direita (100%), para
   Iona aparecer. Antes, campos.webp, com Iona no centro. */
.t-context--bio .t-context__poster,
.t-context--bio .t-context__video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: 50% 40%;
}
.t-context__foot {
  display: flex;
  flex-direction: row-reverse; /* no HTML, o texto vem antes do botão */
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  align-self: stretch;
  margin-top: auto;
  padding-top: 32px;
}
.t-context__foot .t-context__text {
  margin: 0;
  padding-top: 0;
}
.btn.t-context__btn {
  flex: none;
  align-self: flex-end;
}
.t-context--bio .t-context__toggle {
  top: calc(84 * var(--fp));
  bottom: auto;
  left: auto;
  right: var(--pad);
}

/* ==========================================================================
   T3 · Palestras disponíveis
   O painel da esquerda fica fixo enquanto os três blocos passam à direita.
   Índice: o item da palestra na tela fica cheio, os outros apagados (como
   os filtros da referência).
   ========================================================================== */
.t-talks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  background: var(--c-white);
  color: var(--c-ink);
  /* respiro de cima e de baixo dos cards (Figma: 80 no frame de 1512);
     o painel usa o mesmo em cima, para o título alinhar com o card */
  --talk-py: max(48px, calc(80 * var(--fp)));
}
.t-talks__panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  height: 100vh;
  min-height: calc(4 * var(--m));
  max-height: calc(8 * var(--m));
  /* em cima, o mesmo respiro dos cards (o título alinha com o card); embaixo,
     só o --cell, para o índice ficar perto do fim da tela */
  padding: var(--talk-py) var(--pad) var(--cell);
}

/* Título do painel — Figma (596:320): Plus Jakarta semibold 48/1.25,
   -0.02em, 331 de largura (duas linhas) */
.t-h1.t-talks__title {
  max-width: max(280px, calc(331 * var(--fp)));
}

.t-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.t-index__link {
  display: grid;
  grid-template-columns: calc(40 * var(--fp)) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  padding: calc(6 * var(--fp)) 0;
  color: var(--c-ink);
  /* sumário no tamanho de subtítulo da página (24 medium; era 40 semibold) */
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-decoration: none;
  opacity: 0.28;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.t-index__num {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.t-index__link.is-active {
  opacity: 1;
}
.t-index__link.is-active .t-index__num {
  color: var(--c-red);
}
@media (hover: hover) and (pointer: fine) {
  .t-index__link:not(.is-active):hover {
    opacity: 0.6;
  }
}
.t-index__link:focus-visible {
  opacity: 1;
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}

.t-talks__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Card: número, título e subtítulo no alto; na base, o texto, a caixa
   verde-limão com o "Ideal para" em destaque e o botão. Referências da
   caixa: o bloco de número de sonder-mr.com/people (rótulo pequeno e texto
   grande num bloco de cor) e o verde-limão da coluna do banner da home. */
.t-talk {
  display: flex;
  flex-direction: column;
  min-height: calc(5 * var(--m));
  scroll-margin-top: 0;
}
.t-talk__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(56 * var(--fp));
  min-width: 0;
  padding: var(--talk-py) var(--pad);
}
.t-talk:focus {
  outline: none;
}
.t-talk--wine {
  --fit-rule: rgba(251, 245, 238, 0.35);
  background: var(--c-wine);
  color: var(--c-cream);
}
.t-talk--blue {
  --fit-rule: rgba(7, 0, 0, 0.2);
  background: var(--c-blue);
  color: var(--c-ink);
}
/* 3º card: creme, o bege do site (era vermelho); botão vermelho, como o
   "Enviar contexto" da página de contato, que também fica sobre o creme */
.t-talk--cream {
  --fit-rule: rgba(7, 0, 0, 0.16);
  background: var(--c-cream);
  color: var(--c-ink);
}

.t-talk__num {
  margin: 0 0 calc(20 * var(--fp));
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.t-talk--wine .t-talk__num {
  color: var(--c-lime);
}
.t-talk--blue .t-talk__num,
.t-talk--cream .t-talk__num {
  color: var(--c-red);
}
/* Título e subtítulo dos cards — Figma (600:335 e 600:337): título Plus
   Jakarta semibold 40/1.3, -0.02em, na largura toda do card; subtítulo
   Plus Jakarta medium 24/1.25, -0.02em, 24 abaixo do título */
.t-talk .t-h3 {
  max-width: none;
  font-size: max(28px, calc(40 * var(--fp)));
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.t-talk__sub {
  margin: calc(24 * var(--fp)) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-talk__detail {
  display: flex;
  flex-direction: column;
}
.t-talk__detail p {
  max-width: 56ch;
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
}
.t-talk__detail p + p {
  margin-top: calc(12 * var(--fp));
}
/* "Ideal para": o padrão inicial. Abaixo do texto, separado por uma linha
   fina na cor do card; rótulo pequeno em caixa-alta e o texto no tamanho
   do parágrafo (Libre Franklin 17, medium).
   Animação: a linha se desenha da esquerda para a direita (reveal.js,
   "rule", como as linhas das listas do site) e o rótulo e o texto sobem
   linha a linha logo depois ("lines"), assim que chegam à tela. */
.t-talk__detail .t-talk__fit {
  position: relative;
  margin-top: max(16px, calc(24 * var(--fp)));
  padding-top: max(12px, calc(16 * var(--fp)));
  font-weight: 500;
}
.t-talk__fit-rule {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--fit-rule);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}
.t-talk__fit-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.t-talk__detail .t-btn {
  margin-top: max(16px, calc(32 * var(--fp)));
}

/* ==========================================================================
   T4 · Temas que atravessam as palestras
   Referência: a seção de nomes de hlebozavod9.ru (".marsakov"):
   - faixas de texto em caixa-alta, coladas umas nas outras, sem linhas
     entre elas; cada uma corre num sentido e numa velocidade
     (palestras-teste.js);
   - um cartão branco, da mesma cor do fundo, fixo no centro da seção
     (lá: 578px de largura máxima, 26px de respiro, texto de 15px);
   - no hover, o tema fica vermelho (lá, em 160ms) e a faixa desacelera.
   Aqui: faixas em Plus Jakarta medium, 80px no frame de 1512, entrelinha
   1.3 (menores, mais pesadas e mais espaçadas que na referência, que usa
   100px light e entrelinha 1) e 200px de respiro em cima e embaixo. Cartão em
   Plus Jakarta e Libre Franklin, cores do site. Ajustes: --marq-size,
   --marq-weight, --marq-space e --marq-leading.
   ========================================================================== */
.t-marq {
  --marq-size: calc(80 * var(--fp)); /* tamanho das faixas (era 100) */
  --marq-weight: 500; /* peso das faixas (era 300, light) */
  --marq-space: calc(200 * var(--fp)); /* respiro em cima e embaixo (era 140) */
  --marq-leading: 1.3; /* espaço entre as faixas (entrelinha; era 1.1) */
  position: relative;
  padding: var(--marq-space) 0;
  overflow: hidden;
  background: var(--c-white);
  color: var(--c-ink);
}
/* A seção corta nas laterais; as faixas não cortam em cima e embaixo,
   para os acentos e o ç (que passam da entrelinha) não serem cortados */
.t-marq__line {
  position: relative;
}
.t-marq__line--mobile {
  display: none;
}
.t-marq__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.t-marq__set {
  display: flex;
  flex: none;
}
.t-marq__item,
.t-marq__dot {
  font-family: var(--font-display);
  font-size: var(--marq-size);
  font-weight: var(--marq-weight);
  line-height: var(--marq-leading); /* 1 na referência; aqui mais aberto */
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.t-marq__dot {
  padding: 0 0.32em;
}
.t-marq__item {
  transition: color 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .t-marq__item:hover {
    color: var(--c-red);
  }
}
/* Sem movimento: cada faixa começa num ponto diferente */
.t-marq__line:nth-child(even) .t-marq__track {
  transform: translateX(-24%);
}

/* Cartão fixo no centro — como o da referência (".marsakov-info"):
   branco, 26 de respiro, foto à esquerda e texto à direita, lado a lado.
   Lá: 578 de largura, duas colunas de 250 (a foto com no mínimo 250 de
   altura, em "cover", esticando até a altura do texto; o texto com 26 de
   respiro dos lados e embaixo, começando na altura do topo da foto).
   Aqui as colunas são maiores (foto 280, texto 400) porque o título tem
   48px; a proporção e os respiros são os mesmos. */
.t-marq__card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: stretch;
  padding: calc(26 * var(--fp));
  background: var(--c-white);
  translate: -50% -50%;
}
.t-marq__media {
  position: relative;
  flex: none;
  width: calc(280 * var(--fp));
  min-height: calc(250 * var(--fp));
  overflow: hidden;
  background: var(--c-ink);
}
.t-marq__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* A foto (palestras/temas.webp) é um recorte vertical que começa no alto da
     cabeça: ancorada no alto, a moldura do desktop mostra rosto e microfone; se
     a moldura ficar mais alta (tablet), aparece mais do corpo, embaixo */
  object-position: 50% 0%;
}
/* Texto: título alinhado ao topo da foto e o parágrafo à base dela
   (na referência, o texto termina 26 acima da base) */
.t-marq__body {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: max(12px, calc(16 * var(--fp)));
  width: calc(400 * var(--fp));
  padding: 0 calc(26 * var(--fp));
}
.t-marq__title {
  max-width: none;
  margin: 0;
  /* exceção à escala da página: 32px semibold (os outros títulos de seção
     têm 48px), para o cartão ficar mais leve, como na referência */
  font-family: var(--font-display);
  font-size: max(24px, calc(32 * var(--fp)));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.t-marq__text {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
  color: var(--c-text);
}
/* Fora do cartão, no canto inferior esquerdo da seção (como o "Pausar
   vídeo" da seção 2) */
.t-marq__toggle {
  position: absolute;
  left: var(--pad);
  bottom: calc(48 * var(--fp));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.t-marq__toggle[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .t-marq__toggle:hover {
    color: var(--c-ink);
  }
}
.t-marq__toggle:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}
.t-marq__icon {
  width: 8px;
  height: 9px;
  border-inline: 3px solid currentColor;
}
.t-marq__toggle[aria-pressed="true"] .t-marq__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ==========================================================================
   T5 · Uma palestra começa antes do palco
   Dois blocos encostados, metade e metade (sonder-mr.com/services):
   - vermelho: o título no alto (a frase de abertura saiu a pedido) e, na
     base, o elemento gráfico da home (seção 08, insights.css): a faixa
     vinho com a palavra gigante em verde-limão, cortada pelas bordas, nas
     mesmas medidas (756 × 248 no frame de 1512), aqui com "Conteúdo";
   - creme: as quatro coisas que mudam a conversa em texto corrido, no
     tamanho dos títulos (o bloco de texto grande de sonder-mr.com/people),
     separadas pelos quadrados vermelhos do site; os termos se acendem um a
     um com o scroll e ficam acesos (palestras-teste.js, item 7); na base,
     os dois parágrafos.
   Terceira versão. A segunda usava uma lista de linhas (número + termo
   entre linhas finas), que no site sinaliza links e botões (menu, contato,
   índice da T3): versoes-anteriores/palestras-teste-t5-v2/.
   Sem a classe .is-lighting (sem JS ou com movimento reduzido), o texto
   aparece todo aceso.
   Versão anterior (faixa verde-limão com "Contexto" na vertical e bloco
   azul): versoes-anteriores/palestras-teste-t5-t6-v1/.
   ========================================================================== */
/* Desde 30/10/2026, a seção inteira é bege (creme), a pedido: o bloco da
   esquerda deixou de ser vermelho e perdeu a faixa vinho (.t-stage__word,
   cujo CSS continua abaixo, sem uso); fica só o título, em tinta. Versão
   anterior: versoes-anteriores/palestras-teste-t5-v3/. Vizinhas: a T4 e a
   T6 são brancas, então o bege não encosta em outro bege. */
/* Medidas e hierarquia (30/10/2026, a pedido, depois que o bloco vermelho
   e a faixa saíram): a altura vem do conteúdo (eram 5 módulos fixos, com
   os parágrafos empurrados para a base e um vazio no meio), com 1 módulo
   de respiro em cima e embaixo (126px no frame de 1512, 96 no tablet, 72
   no celular; era o --cell, 32px). Hierarquia na escala da página
   (48 · 24 · 17): o título fica sozinho no tamanho de título; os termos
   descem para 32 (eram 48, iguais ao título, e os dois disputavam a
   atenção); os parágrafos seguem logo abaixo dos termos.
   Versão anterior: versoes-anteriores/palestras-teste-t5-v4/. */
.t-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--m) 0;
  background: var(--c-cream);
  color: var(--c-ink);
}
.t-stage__intro,
.t-stage__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: max(28px, calc(40 * var(--fp)));
  padding: 0 var(--pad);
}
/* Título em vinho, a pedido (30/10/2026; era tinta) */
.t-stage__intro > .t-h1 {
  margin: 0;
  color: var(--c-wine);
}
/* Faixa "Conteúdo": o .insights__word da home (faixa vinho de 248 de
   altura, palavra em Libre Franklin 800 e verde-limão, cortada embaixo e à
   direita). Tamanho e posição da palavra: os da variação .insights--talks
   ("Palestras" e "Contato": 184.76, a 79 do topo, começando 35 antes da
   borda), porque "Conteúdo" é mais longa que "Insights": no tamanho da
   home (217), sumiria o "do"; assim, só o fim do "o" fica cortado, como o
   "s" de "Insights" na home.
   Animação: a palavra anda devagar para a esquerda com o scroll, como
   "Palestras" na abertura (data-drift, palestras-teste.js, item 1); com
   isso, o fim da palavra aparece inteiro no meio do caminho. */
.t-stage__word {
  position: relative;
  flex: none;
  height: calc(248 * var(--fp));
  overflow: hidden;
  background: var(--c-wine);
}
.t-stage__word span {
  position: absolute;
  top: calc(79 * var(--fp));
  left: calc(-35 * var(--fp));
  font-family: var(--font-text);
  font-size: calc(184.76 * var(--fp));
  font-weight: 800;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--c-lime);
  will-change: transform;
}
.t-stage__panel {
  background: var(--c-cream);
  color: var(--c-ink);
}

/* Texto corrido: 48 medium (o tamanho dos títulos, mais leve que eles,
   para ler como texto e não como um segundo título), sem número e sem
   linhas, para não parecer uma lista de links. Quadrado: 0.2em, na altura
   do meio das minúsculas, colado à última palavra do termo (.t-stage__end
   não deixa a linha quebrar entre os dois); o espaço dos dois lados do
   quadrado é o mesmo. */
.t-stage__terms {
  margin: 0;
  font-family: var(--font-display);
  /* 32px no frame de 1512, a pedido (entre o título, 48, e o subtítulo,
     24); antes, 48 (o tamanho do título) e, por pouco tempo, 24 */
  font-size: max(22px, calc(32 * var(--fp)));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
/* Cada termo inteiro na mesma linha: a quebra só acontece entre um termo e
   outro (em 1920, "Repertório prévio" se partia em duas linhas) */
.t-stage__term {
  white-space: nowrap;
  transition: opacity 0.6s ease;
}
.t-stage__end {
  white-space: nowrap;
}
.t-stage__sep {
  display: inline-block;
  /* 0.22em: 7px em 32, o tamanho dos quadrados dos rótulos do site */
  width: 0.22em;
  height: 0.22em;
  margin: 0 0.07em 0 0.28em;
  vertical-align: 0.18em;
  background: var(--c-red);
}
/* Apagado até a vez dele */
.t-stage__terms.is-lighting .t-stage__term:not(.is-on) {
  opacity: 0.2;
}

.t-stage__body {
  max-width: 52ch;
}
.t-stage__body p {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
}
.t-stage__body p + p {
  margin-top: max(10px, calc(14 * var(--fp)));
}

/* ==========================================================================
   T6 · Formatos (sexta versão)
   A estrutura da T3 (Palestras disponíveis), a outra seção que apresenta
   um conjunto de opções, para as duas falarem a mesma língua. Três colunas
   de 4/12 (504px no frame de 1512):
   - à esquerda, o painel fixo com as medidas do .t-talks__panel: o título
     no alto e, na base, no lugar do índice da T3, o link para os Serviços;
   - no meio, os quatro blocos de cor empilhados e encostados, com as
     medidas dos cards da T3 (respiro de --talk-py em cima, nome em 40
     semibold, texto de 17);
   - à direita, encostada na borda da tela, a foto do formato que está no
     meio da tela e, embaixo, a faixa com a palavra gigante (o elemento
     gráfico da home). Quando chega ao alto da tela, fica fixa ocupando a
     altura inteira dela.
   Cores dos blocos: azul, bege, verde-limão e azul. Do 2º bloco em diante,
   nada de vinho: eles passam ao lado da faixa vinho da foto, e os vinhos
   se misturariam. O 1º não encosta em nada vinho e pode voltar a ser
   vinho (vinho, azul, bege e verde-limão, a sequência da quinta versão).
   Sem bege no 4º, que encosta no bege da T7. O bege ao lado do painel
   branco é o mesmo da T3 (3º card).
   Passagem da T5: os blocos e a foto começam na mesma altura, 1.5 módulo
   abaixo da T5; esse branco, na largura toda, é o respiro entre as duas.
   Versões anteriores: versoes-anteriores/palestras-teste-t6-v2/ a
   versoes-anteriores/palestras-teste-t6-v5/.
   ========================================================================== */
/* Respiro embaixo da T5: os blocos e a foto começam 1.5 módulo abaixo
   dela (--fmt-top: 189px no frame de 1512), na mesma altura. Dentro do
   bloco, o respiro dos cards da T3 (--talk-py) acima do nome; o título do
   painel fica na altura do nome do primeiro bloco, como na T3. Os blocos
   têm 5 módulos de altura (os cards da T3 também). */
.t-formats {
  --talk-py: max(48px, calc(80 * var(--fp)));
  --fmt-top: calc(1.5 * var(--m));
  --fmt-card-top: var(--talk-py);
  /* painel fixo com o alto um pouco para fora da tela: o respiro de 1.5
     módulo existe na entrada da seção, mas, com o painel parado, só sobra
     o respiro normal (--talk-py) acima do título, como na T3. A altura
     compensa, para o link ficar na base da tela. */
  --fmt-stick: var(--fmt-top);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  background: var(--c-white);
  color: var(--c-ink);
}

/* ---------- Painel fixo à esquerda: título no alto, link na base ----------
   As medidas do painel da T3: altura da tela (de 4 a 8 módulos), respiro
   em cima e --cell embaixo (o link fica perto do fim da tela, como o
   índice da T3). */
.t-formats__panel {
  position: sticky;
  top: calc(-1 * var(--fmt-stick));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  height: calc(100vh + var(--fmt-stick));
  min-height: calc(7 * var(--m));
  max-height: calc(8 * var(--m) + var(--fmt-stick));
  padding: calc(var(--fmt-top) + var(--talk-py)) var(--pad) var(--cell);
}

/* ---------- Foto e faixa do formato em leitura ----------
   Coluna da direita, até a borda da tela: a foto do formato que está no
   meio da tela e, embaixo, a faixa da home (seção 08) na variação das páginas de
   contato e de palestras (.insights--talks): vinho, palavra em Libre
   Franklin 800, azul, cortada embaixo e à direita. Na coluna de 4/12, a
   palavra fica em 2/3 do tamanho da home (123px no frame de 1512), para
   o nome do formato continuar legível; a faixa acompanha (165 de altura,
   palavra a 53 do topo e começando 23 antes da borda).
   Troca (palestras-teste.js, item 9): a foto entra por cima da anterior
   (fade de 0.7s); a palavra que sai sobe e apaga, e a próxima sobe e
   aparece, como a troca de palavras da abertura. */
/* Na entrada, a coluna começa no alto da seção, encostada na T5, antes dos
   blocos (que começam --fmt-top abaixo): a foto aparece primeiro. Teste de
   30/10/2026; antes, a coluna começava na altura dos blocos
   (margin-top: var(--fmt-top); versoes-anteriores/palestras-teste-t6-v6/).
   Fixa no alto da tela, ocupa a altura inteira dela, com a faixa na base. */
.t-formats__visual {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: calc(4 * var(--m));
}
.t-formats__photos {
  position: relative;
  flex: 1;
  min-height: calc(1.5 * var(--m));
  overflow: hidden;
  background: #1b1b1b;
}
.t-formats__photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  /* 1% a mais: na coluna vertical a foto encosta em cima e embaixo, e
     algumas têm uma linha clara na borda (a de iona-retrato.webp) */
  scale: 1.01;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.t-formats__photos img.is-active {
  opacity: 1;
}
.t-formats__band {
  position: relative;
  flex: none;
  height: calc(165 * var(--fp));
  overflow: hidden;
  background: var(--c-wine);
}
.t-formats__word {
  position: absolute;
  top: calc(53 * var(--fp));
  left: calc(-23 * var(--fp));
  font-family: var(--font-text);
  font-size: calc(123 * var(--fp));
  font-weight: 800;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--c-blue);
  opacity: 0;
  transform: translateY(0.45em);
  transition: transform 0.9s var(--ease-osmo), opacity 0.6s ease;
}
.t-formats__word.is-past {
  transform: translateY(-0.45em);
}
.t-formats__word.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
/* Título: o mesmo de "Palestras disponíveis" (T3), o .t-h1 da página:
   Plus Jakarta semibold 48/1.25 no frame de 1512, 32 no celular */

/* ---------- Blocos no meio ---------- */
/* Os blocos começam na altura da foto (--fmt-top abaixo da T5) */
.t-fmts {
  margin: var(--fmt-top) 0 0;
  padding: 0;
  list-style: none;
}
/* Bloco estreito (4 colunas): nome no alto e descrição na base, como os
   blocos da Sonder (título no alto, texto na base) */
.t-fmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: calc(40 * var(--fp));
  min-height: calc(5 * var(--m));
  padding: var(--fmt-card-top) var(--pad) 0;
  overflow: hidden;
  background: var(--fmt-bg);
  color: var(--fmt-fg);
}
.t-fmt__text {
  display: contents;
}
.t-fmt--wine {
  --fmt-bg: var(--c-wine);
  --fmt-fg: var(--c-cream);
  --fmt-accent: var(--c-lime);
  --fmt-muted: rgba(251, 245, 238, 0.75);
}
.t-fmt--blue {
  --fmt-bg: var(--c-blue);
  --fmt-fg: var(--c-ink);
  --fmt-accent: var(--c-red);
  --fmt-muted: var(--c-ink);
}
.t-fmt--lime {
  --fmt-bg: var(--c-lime);
  --fmt-fg: var(--c-ink);
  --fmt-accent: var(--c-red);
  --fmt-muted: var(--c-graphite);
}
/* Bege: no 2º bloco (ver as cores no comentário do alto da T6). Nunca no
   4º, que encosta no bege da T7, logo abaixo. O vinho (.t-fmt--wine) fica
   disponível, mas hoje nenhum bloco o usa. */
.t-fmt--cream {
  --fmt-bg: var(--c-cream);
  --fmt-fg: var(--c-ink);
  --fmt-accent: var(--c-red);
  --fmt-muted: var(--c-graphite);
}

/* Nome: como os títulos dos cards da T3 (40 semibold, 28 no tablet e no celular) */
.t-fmt__name {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(28px, calc(40 * var(--fp)));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.t-fmt__name .rv-line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.t-fmt__desc {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  max-width: 34ch;
  margin: 0;
  padding: max(16px, calc(24 * var(--fp))) 0 var(--talk-py);
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
  color: var(--fmt-muted);
  text-wrap: pretty;
}

/* Link contextual: na base do painel */
.t-formats__more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 46ch;
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
  color: var(--c-text);
  text-wrap: balance;
}
.t-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.t-link__icon {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.5s var(--ease-osmo);
}
.t-link__icon svg,
.t-biglink__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .t-link:hover .t-link__icon {
    transform: translate(2px, -2px);
  }
}
.t-link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}

/* ==========================================================================
   T7 · Experiência em diferentes contextos
   A mesma seção da página de palestras (P7, palestras.css), a pedido em
   30/10/2026, com as mesmas medidas. A seção usa .clients (clientes.css:
   fundo creme, faixas de logos); aqui entram o título, os vídeos e o
   rótulo dos logos. Vídeos: desde 06/11/2026, quatro verticais do LinkedIn
   (antes, três fotos provisórias). Única diferença da P7: o título segue os
   títulos desta página (.t-h1: Plus Jakarta semibold 48, tinta), e não o
   vermelho de 44 da página de palestras (.p-title).
   A versão anterior (título e rótulo lado a lado, sem fotos):
   versoes-anteriores/palestras-teste-t5-t7-v1/.
   ========================================================================== */
.t-clients {
  --g-gap: calc(24 * var(--fp));
  padding: calc(160 * var(--fp)) 0;
}
.t-clients__title {
  max-width: 14ch;
  margin: 0 var(--pad);
}

/* Vídeos (06/11/2026, a pedido; antes, três fotos provisórias, em
   versoes-anteriores/palestras-t7-fotos/): quatro molduras verticais (9:16),
   uma a cada 3 colunas do grid de 12, e, acima (09/11/2026, a pedido:
   o contexto vem antes do vídeo; antes, abaixo), a legenda: o tipo de
   contexto e onde foi. Desde 09/11/2026, a pedido, cada moldura é o
   componente de vídeo da home (sections/depoimentos.css: .tm__frame,
   .tm__cover, .tm__poster, .tm__play): capa, véu na base e o botão
   verde-limão "Assistir ao vídeo"; no clique, o player do LinkedIn entra
   atrás da capa e ela sobe (palestras-teste.js, item 12). Depois disso, o
   play, as faixas com o texto do post e o nome são do próprio LinkedIn. O
   player precisa de pelo menos 260px de largura (abaixo disso, "Gostei"
   fica cortado no alto): por isso, abaixo de 1200px a lista vira uma
   rolagem horizontal (ver os blocos do tablet e do celular). */
.t-videos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Duas linhas compartilhadas por todos os cards (subgrid): a da legenda
     e a do vídeo. Se uma legenda quebrar em duas linhas, os vídeos
     continuam começando na mesma altura */
  grid-template-rows: auto auto;
  column-gap: var(--g-gap);
  margin: calc(72 * var(--fp)) var(--pad) 0;
  padding: 0;
  list-style: none;
}
.t-videos__item,
.t-videos__figure {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.t-videos__figure {
  margin: 0;
}
/* O .tm__media da home tem a largura e a coluna da seção 07b (e, no
   tablet, um limite pela altura da tela): aqui ele ocupa a coluna toda */
.t-videos .tm__media {
  grid-column: auto;
  width: auto;
  max-width: none;
}
.t-videos__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  margin-bottom: max(14px, calc(20 * var(--fp)));
}
.t-videos__kind {
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t-videos__name {
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--t-text);
  font-weight: 500;
  line-height: 1.4;
}

.t-clients__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: calc(120 * var(--fp)) var(--pad) 0;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t-clients__label::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}
.t-clients .clients__grid {
  margin-top: calc(28 * var(--fp));
}

/* ==========================================================================
   T8 · Iona Szkurnik (versão anterior, sem uso desde 30/10/2026)
   A T8 passou a usar a estrutura da T2 (.t-context--bio, junto da T2,
   acima). Este CSS (retrato e bloco vinho) ficou para a versão guardada
   em versoes-anteriores/palestras-teste-t8-v1/.
   ========================================================================== */
.t-bio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(5 * var(--m));
}
.t-bio__media {
  position: relative;
  overflow: hidden;
  background: #4a4847;
}
.t-bio__media img {
  object-position: 50% 28%;
}
/* Vinho no lugar do preto (regra do site: nenhuma seção com fundo preto).
   Não é bege porque a T7, logo acima, é bege: os dois se misturariam. */
.t-bio__block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(56 * var(--fp));
  padding: var(--cell) var(--pad);
  background: var(--c-wine);
  color: var(--c-cream);
}
.t-bio__body {
  display: flex;
  flex-direction: column;
}
.t-bio__lead {
  max-width: 34em;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-bio__text {
  max-width: 52ch;
  margin: calc(18 * var(--fp)) 0 0;
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
  color: rgba(251, 245, 238, 0.72);
}
.t-bio__body .t-btn {
  margin-top: calc(36 * var(--fp));
}

/* ==========================================================================
   T9 · Perguntas frequentes
   ========================================================================== */
/* Lista: pergunta grande à esquerda e resposta à direita (sonder-mr.com/people).
   Na versão anterior da T6, também a lista dos formatos. */
.t-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule-dark);
}
.t-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  min-height: var(--m);
  padding: var(--cell) 0;
  border-top: 1px solid var(--rule-dark);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.t-row > * {
  padding-inline: var(--pad);
}
.t-row__name {
  max-width: calc(24ch + 2 * var(--pad));
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-row__text {
  max-width: 52ch;
  margin: 0;
  padding-top: 0.15em;
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.5;
  color: var(--c-text);
  transition: color 0.3s ease;
}
/* ---------- T9 · Perguntas frequentes (30/10/2026) ----------
   A mesma seção da página de palestras (P9, palestras.css), a pedido, com
   as mesmas medidas: .split (components.css: título fixo nas colunas 1 a
   4, lista nas 6 a 12, 160px de respiro no frame de 1512), fundo branco e
   as perguntas em <details>, com número, texto e um "+" que vira "−" ao
   abrir. Só o título segue os títulos desta página (.t-h1). A lista de
   linhas sempre aberta (.t-rows--faq, verde-limão) saiu; versão anterior:
   versoes-anteriores/palestras-teste-t9-v1/. */
.t-faq {
  --g-gap: calc(24 * var(--fp));
  --muted: #6f6969;
  --rule-dark: rgba(7, 0, 0, 0.14);
  background: var(--c-white);
  color: var(--c-ink);
  interpolate-size: allow-keywords; /* anima a altura até "auto" */
}
.t-faq__list {
  border-bottom: 1px solid var(--rule-dark);
}
.t-faq__item {
  position: relative;
}
/* Linha de cima (--rule animada pelo reveal.js) */
.t-faq__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--rule-dark);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}
.t-faq__q {
  display: grid;
  grid-template-columns: calc(64 * var(--fp)) minmax(0, 1fr) 20px;
  column-gap: var(--g-gap);
  align-items: start;
  padding: calc(30 * var(--fp)) 0 calc(34 * var(--fp));
  list-style: none;
  cursor: pointer;
}
.t-faq__q::-webkit-details-marker {
  display: none;
}
.t-faq__q:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}
.t-faq__num {
  padding-top: 0.75em;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}
.t-faq__text {
  font-family: var(--font-display);
  font-size: max(20px, calc(28 * var(--fp)));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}
/* + / − desenhado com duas linhas finas */
.t-faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 0.35em;
  color: var(--c-red);
}
.t-faq__icon::before,
.t-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.5s var(--ease-osmo);
}
.t-faq__icon::after {
  transform: rotate(90deg);
}
.t-faq__item[open] .t-faq__icon::after {
  transform: rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
  .t-faq__q:hover :is(.t-faq__text, .t-faq__num) {
    color: var(--c-red);
  }
}
.t-faq__item[open] .t-faq__num {
  color: var(--c-red);
}
/* Resposta alinhada ao texto da pergunta */
.t-faq__a {
  padding: 0 calc(20px + var(--g-gap)) calc(36 * var(--fp)) calc(64 * var(--fp) + var(--g-gap));
}
.t-faq__a p {
  max-width: 56ch;
  margin: 0;
  font-family: var(--font-text);
  font-size: max(16px, calc(18 * var(--fp)));
  line-height: 1.5;
  color: var(--c-text);
}
/* Abrir e fechar com a altura animada (navegadores com ::details-content) */
.t-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.6s var(--ease-osmo), content-visibility 0.6s allow-discrete;
}
.t-faq__item[open]::details-content {
  block-size: auto;
}

/* ==========================================================================
   T10 · Leve essa conversa para sua organização
   ========================================================================== */
/* Bege no lugar do preto (regra do site: nenhuma seção com fundo preto);
   texto em tinta, quadrados e hover em vermelho */
.t-ticker {
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  color: var(--c-ink);
}
.t-ticker__link {
  display: block;
  padding: calc(0.28 * var(--m)) 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.t-ticker__track {
  display: flex;
  width: max-content;
}
.t-ticker__set {
  display: flex;
  flex: none;
  align-items: center;
  font-family: var(--font-display);
  font-size: max(40px, calc(76 * var(--fp)));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.t-ticker__sep {
  flex: none;
  width: calc(18 * var(--fp));
  height: calc(18 * var(--fp));
  min-width: 10px;
  min-height: 10px;
  margin: 0 calc(48 * var(--fp));
  background: var(--c-red);
}
@media (prefers-reduced-motion: no-preference) {
  .t-ticker.is-running .t-ticker__track {
    animation: t-ticker var(--ticker-dur, 36s) linear infinite;
  }
  .t-ticker.is-paused .t-ticker__track,
  .t-ticker.is-offscreen .t-ticker__track {
    animation-play-state: paused;
  }
  /* Hover só com mouse (12/11/2026: sem hover em telas de toque) */
  @media (hover: hover) and (pointer: fine) {
    .t-ticker__link:is(:hover, :focus-visible) .t-ticker__track {
      animation-play-state: paused;
    }
  }
}
@keyframes t-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .t-ticker__link:is(:hover, :focus-visible) {
    color: var(--c-red);
  }
}
.t-ticker__link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: -6px;
}
.t-ticker__toggle {
  position: absolute;
  right: var(--pad);
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  background: var(--c-cream);
  color: rgba(7, 0, 0, 0.6);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.t-ticker__toggle[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .t-ticker__toggle:hover {
    color: var(--c-ink);
  }
}
.t-ticker__toggle:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
.t-ticker__icon {
  width: 8px;
  height: 9px;
  border-inline: 3px solid currentColor;
}
.t-ticker__toggle[aria-pressed="true"] .t-ticker__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Estrutura: a mesma das versões anteriores (a pedido, 30/10/2026: "mantenha
   a mesma estrutura, altura, espaçamento, padding").
   Alinhamento com o FAQ: a coluna da esquerda termina na mesma linha em que
   começa a lista de perguntas da T9 (coluna 6 da grade de 12 do .split,
   components.css: margem, cinco colunas e cinco espaços de 24 no frame de
   1512, 651px), e o texto começa na linha do texto das perguntas (739px).
   Cores: as do bloco "Hoje" da página Sobre (B4, sobre.css: .b-today):
   seção inteira em vinho (uma cor só, sem bloco separado), texto creme,
   parágrafo creme a 72%. Sem a linha e o quadrado do "Hoje". A cor de
   destaque da seção é o azul (--c-blue; 30/10/2026, a pedido, no lugar do
   verde-limão do "Hoje"): o logo, a seta e o hover do link.
   Respiro (30/10/2026): a margem da página (--pad, 64px no frame de 1512)
   em cima e embaixo, no mínimo 40 (--cta-py): o logo fica a 64 da borda
   esquerda e a base das letras a 64 da borda de baixo. Era --cell (32);
   depois um módulo (126), "grande demais"; depois 80, "diminua ainda mais". Versões anteriores: no desenho completo do "Hoje",
   versoes-anteriores/palestras-teste-t10-v13/; bloco vinho + texto sobre
   branco, .../t10-v12/. */
.t-cta {
  background: var(--c-wine);
  color: var(--c-cream);
}
.t-cta__grid {
  --cta-py: max(40px, var(--pad)); /* respiro de cima e de baixo: a margem da página */
  --cta-gap: calc(24 * var(--fp)); /* o --split-gap do .split */
  --cta-col: calc((100% - 2 * var(--pad) - 11 * var(--cta-gap)) / 12);
  display: grid;
  grid-template-columns: calc(var(--pad) + 5 * (var(--cta-col) + var(--cta-gap))) minmax(0, 1fr);
  /* no mínimo 4 módulos (504px no frame de 1512); com o respiro de 64 em
     cima e embaixo, o texto leva a seção a ~544px */
  min-height: calc(4 * var(--m));
}

.t-cta__mark {
  position: relative;
  overflow: hidden;
}
/* O logo (30/10/2026, "aumente a tipografia do Iona"; antes, as letras
   tinham a altura do link, 107px): o desenho do logo ocupa exatamente as
   cinco colunas da esquerda da grade, as mesmas do título "Perguntas
   frequentes" da T9, logo acima: a haste do "i" na margem da página e a
   haste do "a" no fim da 5ª coluna (563px no frame de 1512; letras de
   153px). A base das letras continua na regra de baixo do link
   "Solicitar proposta de palestra", ao lado (bottom: --cta-py, o padding de
   baixo do texto).
   Medidas do SVG: o desenho vai de 0 a 368 na horizontal (da haste do "i"
   à borda da haste do "a") e o viewBox de -2.2 a 370.2 (372.4); por isso a
   largura é 1.01196 × a do desenho e o left desconta 2.2/368 (0.005978) da
   largura do desenho. Na vertical, o viewBox termina na base das letras.
   Os % de width e left são da largura do bloco da esquerda (.t-cta__mark):
   margem + 5 colunas + 5 espaços; o desenho = isso − margem − 1 espaço.
   Entra deslizando da esquerda para a direita (palestras-teste.js, item 11). */
.t-cta__logo {
  --logo-w: calc(100% - var(--pad) - var(--cta-gap)); /* largura do desenho */
  position: absolute;
  left: calc(var(--pad) - var(--logo-w) * 0.005978);
  bottom: var(--cta-py);
  width: calc(var(--logo-w) * 1.01196);
  color: var(--c-blue);
  line-height: 0;
  pointer-events: none;
  will-change: transform;
}
.t-cta__logo svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  overflow: visible;
}

/* O "i" gigante (barra e ponto, cortado embaixo), sem uso desde 30/10/2026:
   versoes-anteriores/palestras-teste-t10-v3/ */
.t-mark {
  /* Proporções do "i" do logo: barra de 22 × 100, ponto de 26.4 de diâmetro,
     28.8 de espaço entre os dois (em unidades da espessura: 4.5, 1.2 e 1.3) */
  --w: calc(0.9 * var(--m)); /* espessura da barra */
  position: absolute;
  left: 50%;
  bottom: calc(-1.7 * var(--m));
  width: var(--w);
  height: calc(var(--w) * 7);
  translate: -50% 0;
}
.t-mark__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--w) * 1.2);
  height: calc(var(--w) * 1.2);
  border-radius: 50%;
  background: var(--c-ink);
  translate: -50% 0;
}
.t-mark__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--w) * 4.5);
  background: var(--c-ink);
}

/* Espaçamentos: o título e o parágrafo formam um grupo no alto (32px entre
   os dois no frame de 1512) e o link fica embaixo (margin-top: auto), com
   a linha de baixo na altura da base do logo, ao lado. */
.t-cta__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  /* à esquerda, o recuo do texto das perguntas do FAQ (a coluna do número,
     64, e o espaço, 24, no frame de 1512): o título começa na mesma linha
     que as perguntas */
  padding: var(--cta-py) var(--pad) var(--cta-py) calc(64 * var(--fp) + var(--cta-gap));
}
/* Parágrafo no tamanho de subtítulo da página (24 no frame de 1512, no
   mínimo 18), em creme a 72% (a cor do texto do "Hoje") */
.t-cta__text {
  max-width: 36ch;
  margin: max(20px, calc(32 * var(--fp))) 0 max(40px, calc(56 * var(--fp)));
  font-family: var(--font-text);
  font-size: var(--t-sub);
  line-height: 1.4;
  color: rgba(251, 245, 238, 0.72);
}
.t-cta__body > .t-biglink {
  margin-top: auto;
  /* 32 no frame de 1512, no mínimo 22 (30/10/2026, a pedido: o link tinha
     o tamanho do título, 48). Hierarquia: título 48, link 32, parágrafo 24.
     Vale também no tablet e no celular (a regra tem mais peso que a do
     .t-biglink no celular). */
  font-size: max(22px, calc(32 * var(--fp)));
}
.t-cta__body > .t-biglink .t-biglink__icon {
  width: max(18px, calc(24 * var(--fp)));
  height: max(18px, calc(24 * var(--fp)));
}

.t-biglink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: calc(26 * var(--fp)) 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: max(26px, calc(48 * var(--fp)));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.t-biglink > span:first-child {
  transition: translate 0.6s var(--ease-osmo);
}
.t-biglink__icon {
  flex: none;
  width: max(20px, calc(32 * var(--fp)));
  height: max(20px, calc(32 * var(--fp)));
  color: var(--c-red);
}
.t-biglink__icon path {
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) and (pointer: fine) {
  .t-biglink:hover {
    color: var(--c-red);
  }
  .t-biglink:hover > span:first-child {
    translate: calc(16 * var(--fp)) 0;
  }
}
.t-biglink:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}
/* Sobre o vinho (T10): creme, regras claras e, no hover, o azul (a cor de
   destaque da T10; 30/10/2026, a pedido, no lugar do verde-limão) */
.t-biglink--light {
  border-color: var(--rule-light);
  color: var(--c-cream);
}
.t-biglink--light .t-biglink__icon {
  color: var(--c-blue);
}
@media (hover: hover) and (pointer: fine) {
  .t-biglink--light:hover {
    color: var(--c-blue);
  }
}
.t-biglink--light:focus-visible {
  outline-color: var(--c-blue);
}

/* ==========================================================================
   WhatsApp flutuante: vinho sobre os fundos claros; creme sobre os escuros
   (.is-on-dark, palestras-teste.js)
   ========================================================================== */
.page-talks-test .whatsapp__dot {
  color: var(--c-wine);
  transition: transform 0.5s var(--ease-osmo), background-color 0.3s ease, color 0.3s ease;
}
.page-talks-test .whatsapp.is-on-dark .whatsapp__dot {
  color: var(--c-cream);
}
@media (hover: hover) and (pointer: fine) {
  .page-talks-test .whatsapp:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(93, 15, 13, 0.08);
  }
  .page-talks-test .whatsapp.is-on-dark:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(255, 255, 255, 0.14);
  }
}
.page-talks-test .whatsapp:focus-visible .whatsapp__dot {
  outline-color: var(--c-wine);
}
.page-talks-test .whatsapp.is-on-dark:focus-visible .whatsapp__dot {
  outline-color: var(--c-cream);
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .t-faq__item::details-content {
    transition: none;
  }
  .t-faq__icon::before,
  .t-faq__icon::after {
    transition: none;
  }
  .t-formats__photos img,
  .t-formats__word,
  .t-index__link,
  .t-stage__term,
  .t-marq__item,
  .t-row,
  .t-row__text,
  .t-biglink,
  .t-biglink > span:first-child,
  .t-link__icon {
    transition: none;
  }
}

/* ==========================================================================
   Tablet (768–1199px): os blocos ficam um embaixo do outro
   ========================================================================== */
@media (max-width: 1199px) {
  .page-talks-test {
    --m: 96px;
    --cell: 28px;
  }

  .t-hero,
  .t-context,
  .t-talks,
  .t-bio,
  .t-cta__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-hero {
    grid-template-rows: none;
  }
  .t-hero__title,
  .t-hero__media,
  .t-hero__word {
    grid-area: auto;
  }
  .t-hero__title {
    min-height: calc(5.5 * var(--m));
    padding: 56px var(--pad) 32px;
  }
  .t-hero__h1 {
    max-width: 12em;
  }
  .t-hero__h1.is-rotating {
    font-size: clamp(48px, 8.6vw, 80px);
  }
  .btn.t-hero__cta {
    height: 64px;
    padding: 0 32px;
  }
  .t-hero__media {
    aspect-ratio: 3 / 2;
  }
  .t-hero__word {
    height: calc(2.4 * var(--m));
  }
  .t-hero__word .t-word {
    top: 0.08em;
    left: -0.25em;
    font-size: clamp(140px, 26vw, 221px);
  }

  /* T2: altura proporcional (sem tela no Figma); o vídeo preenche a área */
  .t-context {
    --fp: 1px;
    height: auto;
    min-height: clamp(440px, 52vw, 600px);
    padding: clamp(56px, 7vw, 84px) var(--pad) clamp(40px, 5vw, 52px);
  }
  .t-context__poster,
  .t-context__video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 47% 34%; /* mesmo centro do enquadramento do Figma */
  }
  .t-context--bio .t-context__poster,
  .t-context--bio .t-context__video {
    object-position: 50% 40%;
  }
  .t-context__title {
    max-width: 16ch;
    font-size: clamp(32px, 5.4vw, 56px);
  }
  .t-context__text {
    max-width: 496px;
  }
  .t-context__toggle {
    bottom: clamp(40px, 5vw, 52px);
  }
  .t-context--bio .t-context__toggle {
    top: clamp(56px, 7vw, 84px);
    bottom: auto;
  }

  .t-marq {
    --marq-size: clamp(46px, 6.8vw, 80px);
    --marq-space: clamp(104px, 16vw, 200px);
  }
  .t-marq__card {
    width: min(680px, calc(100% - 2 * var(--pad)));
    padding: 24px;
  }
  .t-marq__media {
    width: 38%;
    min-height: 220px;
  }
  .t-marq__body {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 0 0 0 24px;
  }

  /* T7: as medidas da P7 da página de palestras no tablet */
  .t-clients {
    --fp: 1px;
    --g-gap: 20px;
    padding: clamp(88px, 13vw, 140px) 0;
  }
  /* Vídeos: rolagem horizontal, da margem até a borda da tela (três
     cards e a ponta do quarto em 1199; dois e meio em 768) */
  .t-videos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(260px, 34vw, 340px);
    margin: 48px 0 0;
    padding: 0 var(--pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .t-videos::-webkit-scrollbar {
    display: none;
  }
  .t-videos__item {
    scroll-snap-align: start;
  }
  .t-clients__label {
    margin-top: 88px;
  }
  .t-clients .clients__grid {
    margin-top: 24px;
  }

  /* T9: as medidas da P9 da página de palestras no tablet */
  .t-faq {
    --g-gap: 20px;
  }
  .t-faq__q {
    grid-template-columns: 48px minmax(0, 1fr) 20px;
  }
  .t-faq__a {
    padding-left: calc(48px + var(--g-gap));
  }

  /* T10: empilhado. O logo no fluxo, em cima, com o desenho na metade da
     largura útil (letras de 127px em 1024); o texto embaixo, com a margem
     dos dois lados. Respiro de --cta-py (43px em 1024) em cima do logo e
     embaixo do link; 48px entre o logo e o título. */
  .t-cta__mark {
    padding: var(--cta-py) var(--pad) 0;
  }
  .t-cta__logo {
    --logo-w: 50%; /* da largura útil (o conteúdo do bloco, sem as margens) */
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    margin-left: calc(var(--logo-w) * -0.005978);
  }
  .t-cta__body {
    padding: 48px var(--pad) var(--cta-py);
  }

  .t-talks__panel {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 40px;
    padding-bottom: calc(var(--cell) * 2);
  }
  .t-index__link {
    grid-template-columns: 40px minmax(0, 1fr);
    opacity: 1;
  }
  .t-talk {
    min-height: 0;
  }
  .t-talk__main {
    gap: 64px;
  }

  /* T5: o título em cima e, embaixo, os termos e os parágrafos */
  .t-stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  /* faixa (sem uso desde 30/10/2026) com as proporções da home empilhada
     (756 × 248); palavra com as da variação .insights--talks (24.44vw, a
     31.9% do topo e 4.63% antes da borda) */
  .t-stage__word {
    height: auto;
    aspect-ratio: 756 / 248;
  }
  .t-stage__word span {
    top: 31.9%;
    left: -4.63%;
    font-size: 24.44vw;
  }
  .t-stage__panel {
    gap: 32px;
  }

  /* T6: o painel deixa de ser fixo (como na T3): título, link e blocos */
  .t-formats {
    grid-template-columns: minmax(0, 1fr);
  }
  .t-formats {
    --fmt-top: var(--m);
    --fmt-card-top: var(--talk-py);
  }
  .t-formats__panel {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 40px;
    padding-top: var(--fmt-top);
    padding-bottom: calc(var(--cell) * 2);
  }
  /* empilhado, os blocos encostam no painel e a imagem e a faixa saem */
  .t-fmts {
    margin-top: 0;
  }
  .t-formats__visual {
    display: none;
  }
  .t-fmt {
    min-height: calc(3 * var(--m));
  }

  .t-bio__media {
    aspect-ratio: 16 / 10;
  }

  .t-mark {
    --w: 56px;
    bottom: -90px;
  }
}

/* ==========================================================================
   Mobile (até 767px)
   ========================================================================== */
/* T2 com o vídeo da plateia (assets/video/palestras-plateia.mp4, 06/11/2026), só
   no tablet: a moça fica no centro do quadro e, com o vídeo na largura da tela,
   o título passava sobre o rosto dela. Aqui o vídeo fica ampliado (165% da
   largura), ancorado à esquerda e um pouco acima do centro, e o rosto vai para
   a direita do título, entre ele e o texto da base. No desktop vale o
   enquadramento do Figma; no celular, o de sempre (o rosto já fica entre o
   título e o texto). */
@media (min-width: 768px) and (max-width: 1199px) {
  .t-context--plateia .t-context__poster,
  .t-context--plateia .t-context__video {
    right: auto;
    width: 165%;
    object-position: 0% 18%;
  }
}

@media (max-width: 767px) {
  /* T9: as medidas da P9 da página de palestras no celular */
  .t-faq__q {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    column-gap: 12px;
    padding: 24px 0 26px;
  }
  .t-faq__icon {
    width: 18px;
    height: 18px;
  }
  .t-faq__a {
    padding: 0 0 28px 44px;
  }

  /* T7: as medidas da P7 da página de palestras no celular; os vídeos
     seguem na rolagem horizontal, um card e a ponta do seguinte */
  .t-videos {
    grid-auto-columns: clamp(260px, 72vw, 320px);
    column-gap: 12px;
    margin-top: 40px;
  }
  .t-clients__label {
    margin-top: 64px;
  }
  .t-clients .clients__grid {
    margin-top: 16px;
  }

  .page-talks-test {
    --m: 72px;
    --cell: 20px;
  }

  .t-hero__title {
    min-height: calc(5.5 * var(--m));
    padding: 40px var(--pad) 24px;
  }
  .t-hero__h1.is-rotating {
    font-size: clamp(36px, 10.6vw, 48px);
  }

  /* T2: mais alto (retrato), texto alinhado à esquerda na largura toda e
     uma sombra mais forte na base, onde o texto passa sobre o vídeo */
  .t-context {
    min-height: max(520px, 135vw);
  }
  .t-context__media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, var(--t-context-shade)) 0%,
      rgba(0, 0, 0, 0) 32%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0.65) 100%
    );
  }
  .t-context__poster,
  .t-context__video {
    object-position: 49% 34%;
  }
  .t-context--bio .t-context__poster,
  .t-context--bio .t-context__video {
    object-position: 100% 40%;
  }
  /* T8: no celular, a pessoa ocupa a altura toda da imagem e o texto passa
     sobre ela (na imagem provisória, sobre a camisa branca): sombra mais
     forte, começando mais alto que a da T2 */
  .t-context--bio .t-context__media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, var(--t-context-shade)) 0%,
      rgba(0, 0, 0, 0) 22%,
      rgba(0, 0, 0, 0) 32%,
      rgba(0, 0, 0, 0.8) 58%,
      rgba(0, 0, 0, 0.85) 100%
    );
  }
  .t-context__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .btn.t-context__btn {
    align-self: stretch;
    white-space: normal;
    text-align: center;
  }
  .t-context__text {
    align-self: stretch;
    max-width: none;
    text-align: left;
  }
  .t-context__toggle {
    position: static;
    margin-top: 16px;
  }
  .btn.t-hero__cta {
    width: 100%;
  }
  .t-talk__detail .t-btn,
  .t-bio__body .t-btn {
    align-self: stretch;
    white-space: normal;
    text-align: center;
  }
  .t-hero__word {
    height: calc(2.4 * var(--m));
  }

  /* No celular, 9 faixas (as 4 extras só aparecem aqui): o cartão ocupa
     quase toda a largura, e assim sobram faixas em cima e embaixo dele */
  .t-marq__line--mobile {
    display: block;
  }
  .t-marq {
    --marq-size: clamp(36px, 11.2vw, 48px);
  }
  .t-marq__card {
    width: calc(100% - 2 * var(--pad));
    padding: 24px;
  }
  /* Como na referência em telas estreitas: no celular, só o texto */
  .t-marq__media {
    display: none;
  }
  .t-marq__body {
    padding: 0;
  }
  .t-marq__toggle {
    bottom: 24px;
  }

  .t-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    min-height: 0;
  }
  .t-row__text {
    padding-top: 0;
  }

  /* T5 */
  .t-stage {
    row-gap: 32px;
  }
  .t-stage__panel {
    gap: 28px;
  }

  .t-ticker__toggle {
    position: static;
    margin: 0 var(--pad) 12px;
  }

  .t-biglink {
    font-size: clamp(24px, 7vw, 30px);
  }
  /* T10: o logo de margem a margem (letras de 95px em 390); respiro de
     40px em cima e embaixo (o mínimo do --cta-py), 40px entre o logo e o
     título */
  .t-cta__logo {
    --logo-w: 100%;
  }
  .t-cta__body {
    padding-top: 40px;
  }
  .t-mark {
    --w: 40px;
    bottom: -60px;
  }
}

/* Celular (12/11/2026, a pedido): sem o índice (sumário) de "Palestras
   disponíveis"; no celular as palestras já vêm uma embaixo da outra */
@media (max-width: 767px) {
  .t-index {
    display: none;
  }
  /* O título no mesmo fundo do primeiro card (vinho, com o texto creme),
     como se fosse o topo dele (12/11/2026, a pedido; antes, branco). Sem o
     respiro de baixo do painel: o espaço até o número "01" é o respiro de
     cima do próprio card. */
  /* Linha fina entre o título e o primeiro card (12/11/2026, a pedido), com
     o mesmo respiro em cima e embaixo dela (o de cima do card, --talk-py) e
     na cor das linhas de dentro do card vinho (--fit-rule). O fundo da seção
     também fica vinho no celular, para nenhuma fresta clara aparecer entre o
     painel e o card (arredondamento de pixel). */
  .t-talks {
    background: var(--c-wine);
  }
  .t-talks__panel {
    position: relative;
    padding-bottom: var(--talk-py);
    background: var(--c-wine);
    color: var(--c-cream);
  }
  .t-talks__panel::after {
    content: "";
    position: absolute;
    right: var(--pad);
    bottom: 0;
    left: var(--pad);
    height: 1px;
    background: rgba(251, 245, 238, 0.35);
  }

  /* T6 · Formatos (12/11/2026, a pedido): a mesma estrutura de "Palestras
     disponíveis". O título fica no fundo do primeiro bloco (azul), com o
     mesmo respiro em cima e embaixo e uma linha fina na cor do título, animada; o link para os Serviços passa a ser o último
     conteúdo da seção, depois dos blocos, no branco da seção.
     O painel sai da caixa (display: contents) para o título e o link
     poderem ficar em lugares diferentes da coluna. O fundo da seção fica
     azul, para nenhuma fresta clara aparecer entre o título e o primeiro
     bloco (arredondamento de pixel); o link leva o próprio fundo branco. */
  .t-formats {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* a grade do desktop usa start: aqui, tudo na largura toda */
    background: var(--c-blue);
  }
  .t-formats__panel {
    display: contents;
  }
  .t-h1.t-formats__title {
    position: relative;
    order: 0;
    max-width: none;
    margin: 0;
    padding: var(--talk-py) var(--pad);
    background: var(--c-blue);
  }
  /* Linha na cor do título (12/11/2026, a pedido; antes, bege, branca e,
     antes ainda, vinho). Desenhada da esquerda para a direita junto com a
     entrada do título (data-reveal-rule no HTML: o reveal.js anima o --rule) */
  .t-h1.t-formats__title::after {
    content: "";
    position: absolute;
    right: var(--pad);
    bottom: 0;
    left: var(--pad);
    height: 1px;
    background: currentColor;
    transform: scaleX(var(--rule, 1));
    transform-origin: 0 50%;
  }
  .t-fmts {
    order: 1;
  }
  .t-formats__more {
    order: 2;
    max-width: none;
    padding: var(--talk-py) var(--pad);
    background: var(--c-white);
  }
}

/* Celular (12/11/2026, a pedido):
   - "Solicitar proposta de palestra" (T10) e os outros links grandes: mais
     respiro entre o texto e as linhas de cima e de baixo (antes, 26 no
     frame de 1512, uns 7px no celular);
   - Perguntas frequentes (T9): pergunta menor (antes, 28px) e resposta em
     16px (antes, 18), o mesmo da página de serviços. */
@media (max-width: 767px) {
  .t-biglink {
    padding: 24px 0;
  }
  .t-faq__text {
    font-size: 20px;
    line-height: 1.3;
  }
  .t-faq__a p {
    font-size: 16px;
  }
}