/* ==========================================================================
   Página de serviços (servicos.html)
   Copy do documento "Copy do site" (Serviços), sem acréscimos.

   Composição: a da página de palestras, versão de teste (palestras-teste),
   que vai virar a página oficial de palestras. Os componentes vêm de lá e
   da página Sobre, com o prefixo .sv- (o CSS de origem continua onde
   está; ao mudar um componente lá, decida se a mudança vale aqui também):

   S1  Abertura ........ a T1 de palestras-teste: bloco vermelho com o
                         título ("Projetos de" + palavra que se alterna) e o
                         botão; foto; "Serviços" gigante no bloco azul
   S2  Entrada ......... a B2 da página Sobre: a frase em corpo grande,
                         com as três frentes em vinho e as palavras que se
                         acendem; o texto de apoio embaixo, à direita (o h1
                         só para leitores de tela)
   S2b Por onde começar? a T2 de palestras-teste: vídeo na largura toda,
                         título no alto e texto na base, à direita
   S3  Serviços ........ a T3 de palestras-teste: painel fixo (título
                         "Formas de trabalhar" e índice) e um bloco de cor
                         por serviço
   S4  Outros formatos . a seção 02 da home (scroll horizontal): abertura
                         com o título e um card por formato, com linhas
                         de cima a baixo e o azul subindo no hover
   S5  Temas ........... a T4 de palestras-teste: faixas em movimento e
                         cartão fixo no centro
   S6  Projetos ........ a seção 06 da home (sections/projetos.css, sem
                         mudanças: nada dela está neste arquivo)
   S7  Iona Szkurnik ... a T8 de palestras-teste: imagem (vídeo) na largura
                         toda, título, bio e botão
   S8  Perguntas ....... a T9 de palestras-teste (.split + <details>)
   S9  Conte o que ..... o B6 da página Sobre / I5 da Insights: título e
                         texto; dois blocos que são os próprios CTAs

   Cores (30/10/2026, a pedido, para a página não repetir a de palestras):
   a dupla vinho e azul, a mesma que o site já usa para "Serviços" nos
   blocos finais das páginas Sobre e Insights (vinho com "Serviços" em
   azul). Palestras fica com o vermelho. Abertura vinho com a faixa azul;
   serviços em azul, verde-limão e vinho; outros formatos em creme, vinho e
   verde-limão, com a faixa azul; temas em creme; perguntas em azul. Os
   detalhes (números acesos, "+", hover das faixas) passam do
   vermelho para o vinho. A regra do site continua: nenhuma cor encosta
   nela mesma (bege com bege, azul com azul).

   Módulo: --m = 1/12 da largura do frame (126px em 1512). --cell = respiro
   interno vertical dos blocos. Na horizontal, todo conteúdo usa --pad
   (64px em 1512), a margem lateral do site.
   ========================================================================== */

.page-services {
  --m: calc(126 * var(--fp));
  --cell: max(20px, calc(32 * var(--fp)));
  /* Escala de texto de palestras-teste: título de seção 48 · subtítulo 24
     (medium) · parágrafo 17 no frame de 1512 (no celular, 32 · 18 · 15) */
  --sv-title: max(32px, calc(48 * var(--fp)));
  --sv-sub: max(18px, calc(24 * var(--fp)));
  --sv-text: max(15px, calc(17 * var(--fp)));
  /* destaque do texto de apoio da S2 (o --b-lead da página Sobre) */
  --sv-lead: max(16px, calc(19 * var(--fp)));
  /* respiro vertical da S2 e da S9 (o --b-py da página Sobre) */
  --sv-py: max(96px, calc(200 * var(--fp)));
  --rule-dark: rgba(7, 0, 0, 0.16);
  --muted: #6f6969;
}

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

/* Botão retangular (o .btn do site, na largura do rótulo) */
.btn.sv-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.sv-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.btn--white.sv-btn:focus-visible {
  outline-color: var(--c-white);
}

/* Palavra gigante cortada pelas bordas do bloco */
.sv-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;
}

/* ==========================================================================
   S1 · Abertura (a T1 de palestras-teste, com as mesmas medidas)
   Figma, frame "Palestras" (node 588:4287), em 1512: faixa do header 100;
   bloco vermelho 748 × 713; foto 764 × 493; bloco azul 764 × 220.
   Título: Plus Jakarta bold 80/1.35, -0.02em, 642 de largura.
   Botão: branco, 80 de altura, 40 de respiro lateral, a 35 da base.
   ========================================================================== */
.sv-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);
}
.sv-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-wine);
  color: var(--c-cream);
}
.sv-hero__actions {
  display: flex;
  align-items: center;
}
.btn.sv-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.sv-hero__cta:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}

/* ---------- Título com a troca de palavras ----------
   "Projetos de" fica parado; embaixo, a palavra da vez. As quatro 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. 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. */
/* Texto corrido (sem a troca): 48 no frame de 1512, para as quatro frentes
   caberem no bloco vermelho (64, como em palestras-teste, passava da base) */
.sv-hero__h1 {
  max-width: calc(642 * var(--fp));
  font-size: max(32px, calc(48 * var(--fp)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sv-hero__h1.is-rotating {
  font-size: max(44px, calc(80 * var(--fp)));
  line-height: 1.35;
}
.sv-hero__h1.is-rotating .sv-hero__static {
  display: block;
}
.sv-hero__h1.is-rotating .sv-rot {
  display: grid;
  /* folga embaixo para os descendentes (ç, g) não serem cortados */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  overflow: clip;
}
.sv-rot__word {
  grid-area: 1 / 1;
  align-self: start;
  visibility: hidden;
  will-change: transform, opacity;
}

.sv-hero__media {
  position: relative;
  grid-area: 1 / 2;
  overflow: hidden;
  background: #1b1b1b;
}
.sv-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Iona num painel (servicos/abertura-painel.webp, 06/11/2026): o arquivo
     já vem recortado como no layout enviado; ancorada à esquerda, para Iona
     não sair da moldura quando ela fica mais estreita (celular, 3:2).
     Antes: a foto da abertura de palestras, em 50% 30% (03/11/2026), e
     iona-vertical.webp, em 50% 24% */
  object-position: 0% 50%;
}

.sv-hero__word {
  position: relative;
  grid-area: 2 / 2;
  overflow: hidden;
  background: var(--c-blue);
}
/* "Serviços", em vinho sobre o azul: o desenho de "Palestras" (Plus
   Jakarta bold, -0.02em, começando 1/4 de em antes da borda), com 192 no
   frame de 1512 (a de "Palestras" tem 221).
   Posição (30/10/2026, a pedido): a palavra fica apoiada na base da faixa,
   que corta o pé do cedilha (aparecem os 60% de cima dele), como
   "Palestras", que encosta na base. Antes, com o ç inteiro e um respiro
   embaixo, a palavra parecia flutuar no bloco; e, com o ç cortado logo
   abaixo da linha de base, lia-se "Servico".
   Medida pela base: com entrelinha 1, a linha de base fica 0.092em acima
   da base da caixa; o cedilha desce 0.25em abaixo dela. bottom: 0.058em
   deixa a linha de base 0.15em acima da base da faixa (60% do cedilha à
   mostra), em qualquer tamanho de tela. */
.sv-hero__word .sv-word {
  bottom: 0.058em;
  left: -0.25em;
  font-size: calc(192 * var(--fp));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-wine);
}

/* ==========================================================================
   S2 · Entrada (versão simples, 03/11/2026)
   A estrutura da B2 da página Sobre: a frase de abertura em corpo grande
   (Plus Jakarta 500, 50px no frame de 1512), num parágrafo só, nas colunas
   1 a 9, sem recuo; o texto de apoio embaixo, nas colunas 9 a 12, em
   cinza. As três frentes da frase em vinho (.sv-intro__em). As palavras
   se acendem com o scroll (servicos.js, item 8).
   O h1 da copy não aparece: fica só para leitores de tela (.sr-only).
   Versões anteriores: versoes-anteriores/servicos-s2-v1/ (linhas
   deslocadas), servicos-s2-v2/ (três colunas numeradas) e servicos-s2-v3/
   (a frase em cascata).
   ========================================================================== */
.sv-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: calc(24 * var(--fp));
  padding: var(--sv-py) var(--pad) calc(var(--sv-py) * 0.7);
  background: var(--c-cream);
  color: var(--c-ink);
}
.sv-intro__lead {
  grid-column: 1 / span 9;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(24px, calc(50 * var(--fp)));
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
}
/* As três frentes: em vinho, a cor da página. O artigo não se separa da
   palavra seguinte na quebra de linha (o "a" sozinho no fim da linha) */
.sv-intro__em {
  color: var(--c-wine);
}
.sv-intro__nb {
  white-space: nowrap;
}
/* Palavras do item 8 (servicos.js): apagadas até a vez delas */
.sv-intro__lead .sv-lit {
  opacity: var(--lit, 1);
}
.sv-intro__support {
  grid-column: 9 / -1;
  margin: max(48px, calc(112 * var(--fp))) 0 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--sv-lead);
  line-height: 1.5;
}

/* ==========================================================================
   S3 · Por onde começar? e os serviços (a T3 de palestras-teste)
   O painel da esquerda fica fixo enquanto os três blocos passam à direita.
   No alto do painel, a abertura da copy (título, texto em destaque no
   tamanho de subtítulo e texto de apoio); na base, o índice: o item do
   serviço na tela fica cheio, os outros apagados.
   ========================================================================== */
.sv-services {
  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 (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)));
}
/* Painel fixo, como o da T3: o título no alto (alinhado ao card) e o
   índice na base. Título "Formas de trabalhar", criado em 03/11/2026 (o
   "Por onde começar?" que ficava aqui passou para a S2b) */
.sv-services__panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  height: 100vh;
  min-height: calc(5 * var(--m));
  max-height: calc(8 * var(--m));
  padding: var(--talk-py) var(--pad) var(--cell);
}
/* Título do painel: o de "Palestras disponíveis" (48/1.25, em duas linhas) */
.sv-h1.sv-services__title {
  max-width: max(280px, calc(331 * var(--fp)));
}

.sv-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-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);
  font-family: var(--font-display);
  font-size: var(--sv-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;
}
.sv-index__num {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sv-index__link.is-active {
  opacity: 1;
}
.sv-index__link.is-active .sv-index__num {
  color: var(--c-wine);
}
@media (hover: hover) and (pointer: fine) {
  .sv-index__link:not(.is-active):hover {
    opacity: 0.6;
  }
}
.sv-index__link:focus-visible {
  opacity: 1;
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}

.sv-services__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Card: número, título e o primeiro parágrafo (em destaque) no alto; na
   base, o segundo parágrafo e o botão */
.sv-service {
  display: flex;
  flex-direction: column;
  min-height: calc(5 * var(--m));
  scroll-margin-top: 0;
}
.sv-service:focus {
  outline: none;
}
.sv-service__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);
}
/* Azul, verde-limão e vinho (na página de palestras: vinho, azul e
   creme). O 1º não pode ser creme: encosta na S2. Botões: vinho no azul,
   contorno vinho no verde-limão (os botões cheios ganham verde-limão no
   hover e sumiriam no bloco) e branco no vinho. */
.sv-service--wine {
  background: var(--c-wine);
  color: var(--c-cream);
}
.sv-service--blue {
  background: var(--c-blue);
  color: var(--c-ink);
}
.sv-service--lime {
  background: var(--c-lime);
  color: var(--c-ink);
}
.sv-service__num {
  margin: 0 0 calc(20 * var(--fp));
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sv-service--wine .sv-service__num {
  color: var(--c-lime);
}
.sv-service--blue .sv-service__num,
.sv-service--lime .sv-service__num {
  color: var(--c-wine);
}
/* Título e subtítulo: os dos cards da T3 (Figma 600:335 e 600:337):
   título 40/1.3 semibold; subtítulo 24/1.25 medium, 24 abaixo */
.sv-service .sv-h3 {
  max-width: none;
  font-size: max(28px, calc(40 * var(--fp)));
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.sv-service__sub {
  margin: calc(24 * var(--fp)) 0 0;
  font-family: var(--font-display);
  font-size: var(--sv-sub);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.sv-service__detail {
  display: flex;
  flex-direction: column;
}
.sv-service__detail p {
  max-width: 56ch;
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--sv-text);
  line-height: 1.5;
}
.sv-service__detail .sv-btn {
  margin-top: max(16px, calc(32 * var(--fp)));
}

/* ==========================================================================
   S4 · Outros formatos possíveis (segunda versão, 03/11/2026)
   O layout da seção 02 da home (sections/servicos.css; referência:
   thecirclecompany.co), aqui com o prefixo .sv-formats / .sv-fcard:
   - a seção fica fixa na tela e o scroll vertical move o trilho para a
     esquerda (1px de scroll = 1px de deslocamento), com uma pausa antes e
     depois (servicos.js, item 9);
   - abertura com o título no alto. Como a copy não tem texto de abertura,
     ela ocupa metade da tela (a largura do painel da S3, logo acima), e não
     os 80% da home: o primeiro formato já aparece inteiro e o segundo espia
     na borda;
   - um card por formato, nas medidas da home: número no alto, nome e texto
     na base, linhas verticais de cima a baixo da tela entre eles. No hover,
     as cores da seção 02 da home (11/11/2026, a pedido; antes, o número
     acendia em vinho): o azul sobe da base (no último card, o verde-limão),
     o número fica preto e o nome, tinta. Os cards não têm link (não há na
     copy);
   - depois do último card, a imagem da home (fim-scroll.webp) até a borda.
   Fundo branco, como a S3 acima; embaixo, o creme dos temas (S5).
   Sem JS, no celular e com movimento reduzido: trilho com rolagem
   horizontal nativa (swipe / trackpad), com snap nos cards.
   ========================================================================== */
.sv-formats {
  --fc-w: max(300px, calc(375 * var(--fp)));
  /* altura do conteúdo do card (a da home) */
  --fc-h: calc(720 * var(--fp));
  --fc-gap: calc(46 * var(--fp));
  --fc-line: rgba(7, 0, 0, 0.1);
  position: relative;
  background: var(--c-white);
  color: var(--c-ink);
}
.sv-formats__pin {
  position: relative;
  overflow: hidden;
  padding-block: max(64px, calc(106 * var(--fp))) max(64px, calc(108 * var(--fp)));
  background: var(--c-white);
}
.sv-formats__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  padding-inline: var(--pad);
}

/* ---------- Abertura ---------- */
.sv-formats__intro {
  flex: none;
  width: calc(var(--fc-w) * 1.4);
  padding-right: var(--fc-gap);
  scroll-snap-align: start;
}
.sv-formats__title {
  /* em duas linhas: "Outros formatos / possíveis" */
  max-width: max(300px, calc(430 * var(--fp)));
}

/* ---------- Cards ----------
   Os nomes ficam todos na mesma linha (03/11/2026, a pedido): antes, cada
   card empurrava o conteúdo para a base e a descrição, mesmo escondida,
   ocupava o seu espaço; como as descrições têm tamanhos diferentes, cada
   nome parava numa altura. Agora:
   - com mouse, a descrição escondida não ocupa espaço e os nomes ficam
     todos na base do card (ver "Só a descrição espera o hover", abaixo);
   - em telas de toque e com movimento reduzido (descrição sempre à
     mostra), a lista é uma grade de quatro linhas que os cards
     compartilham (subgrid): número | respiro | nome | descrição.
   - A linha da descrição tem a altura da descrição mais longa, igual em
     todos os cards; cada descrição começa no alto dela.
   - A linha do nome tem a altura do nome mais longo; cada nome se apoia na
     base dela: a última linha de todos os nomes fica na mesma altura, e os
     nomes de duas ou três linhas crescem para cima.
   Vale com qualquer texto e em qualquer largura (nada é medido no JS). */
.sv-formats__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--fc-w);
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--fc-gap);
  row-gap: 0;
  height: var(--fc-h);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Linhas no meio do espaço entre os cards (no modo fixo, de cima a baixo
   da tela; nos outros, na altura do card) */
.sv-formats__list::before,
.sv-fcard::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fc-line);
  pointer-events: none;
}
.sv-formats__list::before {
  left: calc(var(--fc-gap) / -2);
}
.sv-fcard::after {
  right: calc(var(--fc-gap) / -2 - 1px);
}

.sv-fcard {
  position: relative;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: calc(16 * var(--fp));
  isolation: isolate;
  scroll-snap-align: start;
}
/* Hover: o azul sobe da base (o "active-card" da home) */
.sv-fcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-blue);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--ease-osmo);
}
/* O último card tem o verde-limão, como o último da seção 02 da home */
.sv-fcard:last-child::before {
  background: var(--c-lime);
}
.sv-fcard__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(64 * var(--fp));
  font-weight: 400;
  line-height: 1.26;
  color: var(--c-muted);
  transition: color 0.4s ease;
}
.sv-fcard__num {
  grid-row: 1;
}
/* O bloco do nome e da descrição ocupa as duas últimas linhas da grade e
   repassa as duas aos filhos (subgrid dentro do subgrid) */
.sv-fcard__body {
  grid-row: 3 / 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: calc(16 * var(--fp));
}
.sv-fcard__name {
  align-self: end;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(32 * var(--fp));
  font-weight: 500;
  line-height: 1.26;
  color: var(--c-graphite);
  transition: color 0.4s ease;
}
.sv-fcard__text {
  align-self: start;
  margin: 0;
  font-family: var(--font-text);
  font-size: max(16px, calc(20 * var(--fp)));
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-text);
}
/* Card aceso: no hover e com o foco do teclado (Tab; :focus-visible, para
   que o clique com o mouse não deixe o card aceso) */
.sv-fcard:focus {
  outline: none;
}
.sv-fcard:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: -2px;
}
.sv-fcard:focus-visible::before {
  transform: scaleY(1);
}
/* Card aceso: as cores da seção 02 da home (número preto, nome tinta) */
.sv-fcard:focus-visible .sv-fcard__num {
  color: #000;
}
.sv-fcard:focus-visible .sv-fcard__name {
  color: var(--c-ink);
}
@media (hover: hover) and (pointer: fine) {
  .sv-fcard:hover::before {
    transform: scaleY(1);
  }
  .sv-fcard:hover .sv-fcard__num {
    color: #000;
  }
  .sv-fcard:hover .sv-fcard__name {
    color: var(--c-ink);
  }
}
/* Só a descrição espera o hover (03/11/2026, a pedido; numa primeira
   versão, o nome também ficava escondido). Com mouse (e sem movimento
   reduzido), a descrição escondida não reserva espaço: o card volta a ser
   uma coluna com o número no alto e o nome na base, então todos os nomes
   se apoiam na mesma linha, a base do card (os mais longos crescem para
   cima). No hover, a linha da descrição abre de 0 até a altura do texto
   (grid-template-rows 0fr → 1fr) e empurra o nome para cima, e o texto
   aparece logo depois que o azul começa a subir (0.4s, a curva do "Ver
   palestras" dos cards da home). Ao sair, tudo volta junto.
   Em telas de toque (e no celular, onde os cards já ficam acesos) e com
   movimento reduzido, a descrição fica sempre visível e vale a grade
   compartilhada acima (nomes alinhados pela base da linha deles).
   As animações ficam no nome e no texto, e não no bloco (.sv-fcard__body),
   porque a entrada do reveal.js anima o bloco. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sv-fcard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sv-fcard__body {
    grid-template-rows: auto 0fr;
    row-gap: 0;
    transition: grid-template-rows 0.6s var(--ease-osmo);
  }
  .sv-fcard__name {
    margin-bottom: 0;
    transition: margin-bottom 0.6s var(--ease-osmo);
  }
  .sv-fcard__text {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sv-fcard:is(:hover, :focus-visible) .sv-fcard__body {
    grid-template-rows: auto 1fr;
  }
  .sv-fcard:is(:hover, :focus-visible) .sv-fcard__name {
    margin-bottom: calc(16 * var(--fp));
  }
  .sv-fcard:is(:hover, :focus-visible) .sv-fcard__text {
    opacity: 1;
    transition-delay: 0.14s;
  }
}

/* ---------- Modo fixo (desktop e tablet, com JS) ----------
   Cada card vira uma coluna na altura da tela, entre as linhas; o conteúdo
   fica num bloco de 720px centralizado na altura. */
.sv-formats.is-pinned {
  --fc-h-pin: min(var(--fc-h), calc(100svh - 80px));
  /* largura da imagem depois do último card (a da home) */
  --fc-end: calc(249 * var(--fp));
  --fc-top: calc((100svh - var(--fc-h-pin)) / 2);
}
.sv-formats.is-pinned .sv-formats__pin {
  display: flex;
  height: 100svh;
  padding-block: 0;
}
.sv-formats.is-pinned .sv-formats__track {
  flex: none;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding-right: 0; /* a imagem do fim encosta na borda */
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
/* O título fica na altura do número dos cards; os cards começam no meio
   da tela, na linha em que começa o bloco de cor da S3, logo acima.
   A primeira linha dos cards fica alinhada ao card vinho da S3 (11/11/2026,
   a pedido): a abertura vai até a metade da largura da seção, a mesma conta
   da grade da S3. O trilho tem a margem só à esquerda, então a largura é
   "50% - margem / 2". Antes, era "100% - 50vw": o vw conta a barra de
   rolagem e a grade da S3 não, então, com a barra visível (Mac com "mostrar
   barras de rolagem: sempre" ou com mouse, Windows), os cards começavam
   metade da barra (7.5px) à esquerda do card vinho. */
.sv-formats.is-pinned .sv-formats__intro {
  width: calc(50% - var(--pad) / 2);
  padding-top: calc(var(--fc-top) + 28 * var(--fp));
}
.sv-formats.is-pinned .sv-formats__list {
  grid-auto-columns: calc(var(--fc-w) + var(--fc-gap));
  column-gap: 0;
  height: auto;
}
.sv-formats.is-pinned .sv-formats__list::before {
  left: 0;
}
.sv-formats.is-pinned .sv-fcard {
  padding-inline: calc(var(--fc-gap) / 2 + 16 * var(--fp));
  padding-top: calc(var(--fc-top) + 19.7 * var(--fp));
  padding-bottom: calc(var(--fc-top) + 12.3 * var(--fp));
  border-right: 1px solid var(--fc-line);
}
.sv-formats.is-pinned .sv-fcard::after {
  display: none;
}

/* Imagem no fim do trilho (só no modo fixo) */
.sv-formats__end {
  display: none;
}
.sv-formats.is-pinned .sv-formats__end {
  position: relative;
  display: block;
  flex: none;
  width: var(--fc-end);
  overflow: hidden;
  background: #3b3e58; /* tom do fundo da foto, enquanto ela carrega */
}
/* Foto: Iona de camisa branca (servicos/outros-formatos.webp, 06/11/2026).
   O arquivo é o lado esquerdo da foto original. A faixa é mais estreita que
   no layout enviado quando a tela é mais alta; a 28%, o rosto, o microfone e
   a mão de Iona continuam inteiros */
.sv-formats.is-pinned .sv-formats__end img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 50%;
}

/* ---------- Tablet: medidas em px, como na home ---------- */
@media (max-width: 1199px) {
  .sv-formats {
    --fp: 1px;
  }
}

/* ---------- Celular: título em cima e os cards com swipe ---------- */
@media (max-width: 767px) {
  .sv-formats {
    --fc-w: 80vw;
    --fc-h: auto;
    --fc-gap: 12px;
  }
  .sv-formats__track {
    flex-direction: column;
    overflow: visible;
    padding-inline: 0;
  }
  .sv-formats__intro {
    width: auto;
    padding-inline: var(--pad);
  }
  .sv-formats__list {
    width: 100%;
    margin-top: 40px;
    padding-inline: var(--pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .sv-formats__list::-webkit-scrollbar {
    display: none;
  }
  .sv-formats__list::before {
    left: calc(var(--pad) - var(--fc-gap) / 2);
  }
  .sv-formats__list {
    grid-template-rows: auto minmax(24px, 1fr) auto auto;
    height: auto;
    min-height: 360px;
  }
  .sv-fcard {
    padding: 20px;
  }
  .sv-fcard__num {
    font-size: 56px;
  }
  .sv-fcard__name {
    font-size: 28px;
  }
  /* sem hover no celular: os cards já ficam no estado aceso, como na home */
  .sv-fcard::before {
    transform: scaleY(1);
  }
  .sv-fcard__num {
    color: #000;
  }
  .sv-fcard__name {
    color: var(--c-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-fcard::before,
  .sv-fcard__num {
    transition: none;
  }
}

/* ==========================================================================
   S5 · Temas (a T4 de palestras-teste; referência: hlebozavod9.ru)
   Faixas de texto em caixa-alta, coladas umas nas outras, cada uma num
   sentido e numa velocidade (servicos.js, item 3), e um cartão branco fixo
   no centro. No hover, o tema fica vermelho e a faixa desacelera.
   Ajustes: --marq-size, --marq-weight, --marq-space e --marq-leading.
   ========================================================================== */
.sv-marq {
  --marq-size: calc(80 * var(--fp));
  --marq-weight: 500;
  --marq-space: calc(200 * var(--fp));
  --marq-leading: 1.3;
  position: relative;
  padding: var(--marq-space) 0;
  overflow: hidden;
  background: var(--c-cream);
  color: var(--c-ink);
}
.sv-marq__line {
  position: relative;
}
.sv-marq__line--mobile {
  display: none;
}
.sv-marq__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.sv-marq__set {
  display: flex;
  flex: none;
}
.sv-marq__item,
.sv-marq__dot {
  font-family: var(--font-display);
  font-size: var(--marq-size);
  font-weight: var(--marq-weight);
  line-height: var(--marq-leading);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-marq__dot {
  padding: 0 0.32em;
}
.sv-marq__item {
  transition: color 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .sv-marq__item:hover {
    color: var(--c-wine);
  }
}
/* Sem movimento: cada faixa começa num ponto diferente */
.sv-marq__line:nth-child(even) .sv-marq__track {
  transform: translateX(-24%);
}

/* Cartão fixo no centro: branco, foto à esquerda e texto à direita */
.sv-marq__card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: stretch;
  padding: calc(26 * var(--fp));
  background: var(--c-cream); /* a cor do fundo da seção, como na referência */
  translate: -50% -50%;
}
.sv-marq__media {
  position: relative;
  flex: none;
  width: calc(280 * var(--fp));
  min-height: calc(250 * var(--fp));
  overflow: hidden;
  background: var(--c-ink);
}
.sv-marq__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* servicos/temas.webp (06/11/2026): recorte de hero/iona-palco-05.jpg que
     começa no enquadramento do layout enviado; ancorado no alto, a moldura do
     desktop mostra esse recorte e, se ficar mais alta (tablet), mais da base */
  object-position: 50% 0%;
}
.sv-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));
}
.sv-marq__title {
  max-width: none;
  margin: 0;
  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);
}
.sv-marq__text {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--sv-text);
  line-height: 1.5;
  color: var(--c-text);
}
/* "Pausar movimento": saiu do HTML a pedido (03/11/2026); o CSS fica para
   quando ele voltar */
.sv-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;
}
.sv-marq__toggle[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .sv-marq__toggle:hover {
    color: var(--c-ink);
  }
}
.sv-marq__toggle:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}
.sv-marq__icon,
.sv-context__icon {
  width: 8px;
  height: 9px;
  border-inline: 3px solid currentColor;
}
.sv-marq__toggle[aria-pressed="true"] .sv-marq__icon,
.sv-context__toggle[aria-pressed="true"] .sv-context__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ==========================================================================
   S7 · Iona Szkurnik (a T8 de palestras-teste)
   Imagem (e o vídeo, quando existir) preenchendo a seção (640px de altura
   no frame de 1512), com uma sombra suave em cima e embaixo para o texto
   continuar legível. Título no alto à esquerda (56 semibold); na base, a
   bio à direita (dois parágrafos, alinhados à direita como o texto da T8)
   e o botão à esquerda, na margem do título. O "Pausar vídeo" fica no
   canto de cima à direita.
   ========================================================================== */
.sv-context {
  --context-shade: 0.3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-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);
}
.sv-context__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
}
.sv-context__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, var(--context-shade)) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, calc(var(--context-shade) + 0.15)) 100%
  );
  pointer-events: none;
}
.sv-context__poster,
.sv-context__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}
/* S7 · Iona Szkurnik (06/11/2026, a pedido): Iona no palco, a mesma do
   Keynote da página de palestras (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, 100% (abaixo) */
.sv-context--bio .sv-context__poster,
.sv-context--bio .sv-context__video {
  object-position: 50% 40%;
}
.sv-context__video {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.sv-context.has-video .sv-context__video {
  opacity: 1;
}
.sv-context__title {
  max-width: calc(644 * var(--fp));
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(56 * var(--fp));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.sv-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;
}
/* 496 no frame de 1512, a largura do texto da T8: termina antes da pessoa
   na imagem provisória */
.sv-context__text {
  max-width: calc(496 * var(--fp));
  font-family: var(--font-text);
  font-size: var(--sv-text);
  line-height: 1.5;
  text-align: right;
  color: var(--c-white);
}
.sv-context__text p {
  margin: 0;
}
.sv-context__text p + p {
  margin-top: calc(12 * var(--fp));
}
.btn.sv-context__btn {
  flex: none;
  align-self: flex-end;
}
.sv-context__toggle {
  position: absolute;
  top: calc(84 * var(--fp));
  right: var(--pad);
  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;
}
.sv-context__toggle[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .sv-context__toggle:hover {
    color: var(--c-white);
  }
}
.sv-context__toggle:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 4px;
}

/* ==========================================================================
   S8 · Perguntas frequentes (a T9 de palestras-teste)
   .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.
   ========================================================================== */
.sv-faq {
  --g-gap: calc(24 * var(--fp));
  --rule-dark: rgba(7, 0, 0, 0.2);
  /* fundo azul (na página de palestras, branco); textos em grafite, que
     tem contraste suficiente sobre o azul (o cinza do site não tem) */
  background: var(--c-blue);
  color: var(--c-ink);
  interpolate-size: allow-keywords; /* anima a altura até "auto" */
}
.sv-faq__list {
  border-bottom: 1px solid var(--rule-dark);
}
.sv-faq__item {
  position: relative;
}
/* Linha de cima (--rule animada pelo reveal.js) */
.sv-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%;
}
.sv-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;
}
.sv-faq__q::-webkit-details-marker {
  display: none;
}
.sv-faq__q:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}
.sv-faq__num {
  padding-top: 0.75em;
  color: var(--c-graphite);
  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;
}
.sv-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;
}
.sv-faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 0.35em;
  color: var(--c-wine);
}
.sv-faq__icon::before,
.sv-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);
}
.sv-faq__icon::after {
  transform: rotate(90deg);
}
.sv-faq__item[open] .sv-faq__icon::after {
  transform: rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
  .sv-faq__q:hover :is(.sv-faq__text, .sv-faq__num) {
    color: var(--c-wine);
  }
}
.sv-faq__item[open] .sv-faq__num {
  color: var(--c-wine);
}
.sv-faq__a {
  padding: 0 calc(20px + var(--g-gap)) calc(36 * var(--fp)) calc(64 * var(--fp) + var(--g-gap));
}
.sv-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-graphite);
}
.sv-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.6s var(--ease-osmo), content-visibility 0.6s allow-discrete;
}
.sv-faq__item[open]::details-content {
  block-size: auto;
}

/* ==========================================================================
   S9 · Conte o que sua organização precisa discutir
   O B6 da página Sobre (.b-close / .b-panel) na variação da I5 da página
   Insights: o CTA principal mais largo (7 de 12 colunas) que o link
   secundário. Título no desenho do .b-display (56 medium) e texto à
   direita; abaixo, os dois blocos com a palavra gigante cortada na base,
   no desenho de "Palestras" da abertura de palestras-teste (Plus Jakarta
   bold 221px). Parada; no hover do bloco, desliza para a direita até a
   margem do texto, o rótulo ganha sublinhado e a seta avança.
   Respiro de cima: 160px no frame de 1512 (a S8, logo acima, é azul).
   ========================================================================== */
.sv-close {
  padding-top: calc(var(--sv-py) * 0.8);
  background: var(--c-white);
  color: var(--c-ink);
}
.sv-close__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: calc(24 * var(--fp));
  align-items: end;
  padding-inline: var(--pad);
}
.sv-display {
  grid-column: 1 / 7;
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(30px, calc(56 * var(--fp)));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.sv-display .rv-line-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.sv-close__text {
  grid-column: 8 / 13;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--sv-text);
  line-height: 1.6;
}
.sv-close__panels {
  display: grid;
  grid-template-columns: 7fr 5fr;
  margin-top: max(64px, calc(120 * var(--fp)));
}
.sv-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: max(320px, calc(520 * var(--fp)));
  padding: max(28px, calc(48 * var(--fp))) var(--pad);
  overflow: clip;
  color: var(--c-white);
  text-decoration: none;
  isolation: isolate;
}
.sv-panel--wine {
  --word: var(--c-blue);
  background: var(--c-wine);
}
.sv-panel--red {
  --word: var(--c-lime);
  background: var(--c-red);
}
/* Rótulo do CTA: Plus Jakarta 500. Quando quebra em duas linhas ("Já está
   procurando uma palestra?"), a seta acompanha a última palavra */
.sv-panel__cta {
  display: block;
  max-width: 14em;
  font-family: var(--font-display);
  font-size: max(22px, calc(40 * var(--fp)));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sv-panel__label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s var(--ease-osmo);
}
.sv-panel__arrow {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 16px;
  vertical-align: -0.04em;
  transition: transform 0.6s var(--ease-osmo);
}
.sv-panel__arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.sv-panel__arrow path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
}
.sv-panel__word {
  position: absolute;
  left: calc(-55 * var(--fp));
  bottom: calc(24 * var(--fp) - 0.09em);
  z-index: -1;
  color: var(--word);
  font-family: var(--font-display);
  font-size: calc(221.333 * var(--fp));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
  transition: translate 1.6s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .sv-panel:hover .sv-panel__word {
    translate: calc(var(--pad) + 55 * var(--fp) - 0.04em) 0;
  }
  .sv-panel:hover .sv-panel__label {
    background-size: 100% 1px;
  }
  .sv-panel:hover .sv-panel__arrow {
    transform: translate(4px, -4px);
  }
}
.sv-panel:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: -8px;
}

/* ==========================================================================
   S2b · Por onde começar? (a T2 de palestras-teste, com o mesmo vídeo)
   O mesmo componente da S7 (.sv-context), com o desenho da T2: altura de
   640 no frame de 1512, o vídeo no enquadramento do Figma (1745.8 × 982, a
   -64 da esquerda e a -9 do topo) e a sombra suave igual em cima e
   embaixo.
   Base (03/11/2026, a pedido): os dois parágrafos numa linha, o primeiro à
   esquerda e o segundo à direita (alinhado à direita, como o texto da T2),
   cada um com até 496 de largura e os dois terminando na mesma linha. O
   "Pausar vídeo" fica no canto de cima, à direita, na altura do título
   (como na S7; na T2, no canto de baixo, à esquerda).
   ========================================================================== */
.sv-context--video {
  height: calc(640 * var(--fp));
  min-height: 0;
}
.sv-context--video .sv-context__media::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, var(--context-shade)) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, var(--context-shade)) 100%
  );
}
.sv-context--video .sv-context__poster,
.sv-context--video .sv-context__video {
  inset: auto;
  top: calc(-9 * var(--fp));
  left: calc(-64 * var(--fp));
  width: calc(1745.778 * var(--fp));
  height: calc(982 * var(--fp));
  object-position: 50% 50%;
}
.sv-context--video .sv-context__text {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  align-self: stretch;
  max-width: none;
  margin-top: auto;
  padding-top: 32px;
}
.sv-context--video .sv-context__text p {
  flex: 0 1 calc(496 * var(--fp));
  margin: 0;
}
.sv-context--video .sv-context__text p:first-child {
  text-align: left;
}

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

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv-faq__item::details-content,
  .sv-faq__icon::before,
  .sv-faq__icon::after,
  .sv-index__link,
  .sv-marq__item,
  .sv-panel__word,
  .sv-panel__label,
  .sv-panel__arrow {
    transition: none;
  }
}

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

  /* S1 */
  .sv-hero,
  .sv-services {
    grid-template-columns: minmax(0, 1fr);
  }
  .sv-hero {
    grid-template-rows: none;
  }
  .sv-hero__title,
  .sv-hero__media,
  .sv-hero__word {
    grid-area: auto;
  }
  .sv-hero__title {
    min-height: calc(5.5 * var(--m));
    padding: 56px var(--pad) 32px;
  }
  .sv-hero__h1 {
    max-width: 12em;
  }
  .sv-hero__h1.is-rotating {
    font-size: clamp(48px, 8.6vw, 80px);
  }
  .btn.sv-hero__cta {
    height: 64px;
    padding: 0 32px;
  }
  .sv-hero__media {
    aspect-ratio: 3 / 2;
  }
  .sv-hero__word {
    height: calc(2.4 * var(--m));
  }
  /* faixa de 2.4 módulos: a palavra com 85% da altura dela, apoiada na
     base como no desktop (bottom: 0.058em) */
  .sv-hero__word .sv-word {
    font-size: calc(2.04 * var(--m));
  }

  /* S2: a frase na largura toda; o texto de apoio à direita */
  .sv-intro {
    column-gap: 16px;
  }
  .sv-intro__lead {
    grid-column: 1 / -1;
  }
  .sv-intro__support {
    grid-column: 7 / -1;
  }

  /* S3: o painel deixa de ser fixo */
  .sv-services__panel {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 40px;
    padding-bottom: calc(var(--cell) * 2);
  }
  .sv-index__link {
    grid-template-columns: 40px minmax(0, 1fr);
    opacity: 1;
  }
  .sv-service {
    min-height: 0;
  }
  .sv-service__main {
    gap: 64px;
  }

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

  /* S7: altura proporcional */
  .sv-context {
    --fp: 1px;
    min-height: clamp(440px, 52vw, 600px);
    padding: clamp(56px, 7vw, 84px) var(--pad) clamp(40px, 5vw, 52px);
  }
  .sv-context__title {
    max-width: 16ch;
    font-size: clamp(32px, 5.4vw, 56px);
  }
  /* mais estreito e a imagem um pouco para a esquerda: o texto termina
     antes da pessoa na imagem provisória */
  .sv-context__text {
    max-width: 380px;
  }
  .sv-context__poster,
  .sv-context__video {
    object-position: 85% 30%;
  }
  .sv-context__toggle {
    top: clamp(56px, 7vw, 84px);
  }
  /* S2b: altura proporcional (como a T2); o vídeo preenche a área, com o
     mesmo centro do enquadramento do Figma */
  .sv-context--video {
    height: auto;
    min-height: clamp(440px, 52vw, 600px);
  }
  .sv-context--video .sv-context__poster,
  .sv-context--video .sv-context__video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 47% 34%;
  }
  .sv-context--video .sv-context__text p {
    flex-basis: min(440px, calc(50% - 16px));
  }

  /* S8 */
  .sv-faq {
    --g-gap: 20px;
  }
  .sv-faq__q {
    grid-template-columns: 48px minmax(0, 1fr) 20px;
  }
  .sv-faq__a {
    padding-left: calc(48px + var(--g-gap));
  }

  /* S9 */
  .sv-display,
  .sv-close__text {
    grid-column: 1 / -1;
  }
  .sv-close__text {
    margin-top: 28px;
  }
}

/* ==========================================================================
   Celular (até 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .page-services {
    --m: 72px;
    --cell: 20px;
  }

  /* S1 */
  .sv-hero__title {
    min-height: calc(5.5 * var(--m));
    padding: 40px var(--pad) 24px;
  }
  .sv-hero__h1.is-rotating {
    font-size: clamp(36px, 10.6vw, 48px);
  }
  .btn.sv-hero__cta {
    width: 100%;
  }
  .sv-hero__word {
    height: calc(2.4 * var(--m));
  }

  /* S2: um embaixo do outro; o texto de apoio com recuo à esquerda */
  .sv-intro {
    display: block;
  }
  .sv-intro__lead {
    font-size: 26px;
    line-height: 1.2;
  }
  .sv-intro__support {
    margin-top: 40px;
    padding-left: 22%;
  }

  /* S3 */
  .sv-service__detail .sv-btn {
    align-self: stretch;
    white-space: normal;
    text-align: center;
  }

  /* S5: 9 faixas (as 4 extras só aparecem aqui) e só o texto no cartão */
  .sv-marq__line--mobile {
    display: block;
  }
  .sv-marq {
    --marq-size: clamp(36px, 11.2vw, 48px);
  }
  .sv-marq__card {
    width: calc(100% - 2 * var(--pad));
    padding: 24px;
  }
  .sv-marq__media {
    display: none;
  }
  .sv-marq__body {
    padding: 0;
  }
  .sv-marq__toggle {
    bottom: 24px;
  }

  /* S7: mais alta; texto alinhado à esquerda na largura toda, com uma
     sombra mais forte na base, onde o texto passa sobre a imagem */
  .sv-context {
    min-height: max(560px, 150vw);
  }
  .sv-context__media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, var(--context-shade)) 0%,
      rgba(0, 0, 0, 0) 20%,
      rgba(0, 0, 0, 0) 28%,
      rgba(0, 0, 0, 0.8) 52%,
      rgba(0, 0, 0, 0.88) 100%
    );
  }
  .sv-context__poster,
  .sv-context__video {
    object-position: 50% 30%;
  }
  .sv-context__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .sv-context__text {
    max-width: none;
    text-align: left;
  }
  .btn.sv-context__btn {
    align-self: stretch;
    white-space: normal;
    text-align: center;
  }
  .sv-context__toggle {
    position: static;
    order: 3;
    margin-top: 16px;
  }
  /* S2b: as medidas da T2 no celular (mais alta, texto à esquerda na
     largura toda, sombra mais forte na base) */
  .sv-context--video {
    min-height: max(520px, 135vw);
  }
  .sv-context--video .sv-context__media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, var(--context-shade)) 0%,
      rgba(0, 0, 0, 0) 32%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0.65) 100%
    );
  }
  .sv-context--video .sv-context__poster,
  .sv-context--video .sv-context__video {
    object-position: 49% 34%;
  }
  /* S7: a foto até a borda direita, para Iona aparecer */
  .sv-context--bio .sv-context__poster,
  .sv-context--bio .sv-context__video {
    object-position: 100% 40%;
  }
  /* os dois parágrafos um embaixo do outro, à esquerda; o "Pausar vídeo"
     embaixo deles, como na S7 */
  .sv-context--video .sv-context__text {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .sv-context--video .sv-context__text p {
    flex: none;
  }

  /* S8 */
  .sv-faq__q {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    column-gap: 12px;
    padding: 24px 0 26px;
  }
  .sv-faq__icon {
    width: 18px;
    height: 18px;
  }
  .sv-faq__a {
    padding: 0 0 28px 44px;
  }

  /* S9: os blocos um embaixo do outro */
  .sv-close {
    padding-top: 80px;
  }
  .sv-close__panels {
    grid-template-columns: 1fr;
  }
  .sv-panel {
    min-height: 260px;
  }
  .sv-panel__word {
    left: -0.25em;
    bottom: calc(16px - 0.09em);
    font-size: clamp(140px, 26vw, 221px);
  }
}

/* Celular (12/11/2026, a pedido): sem o índice (sumário) de "Formas de
   trabalhar"; no celular os serviços já vêm um embaixo do outro */
@media (max-width: 767px) {
  .sv-index {
    display: none;
  }
  /* O título no mesmo fundo do primeiro card (azul), 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), em
     vinho (o do número e do botão), com o mesmo respiro em cima e embaixo
     dela (o de cima do card, --talk-py). O fundo da seção também fica azul
     no celular, para nenhuma fresta clara aparecer entre o painel e o card
     (arredondamento de pixel). */
  .sv-services {
    background: var(--c-blue);
  }
  .sv-services__panel {
    position: relative;
    padding-bottom: var(--talk-py);
    background: var(--c-blue);
    color: var(--c-ink);
  }
  .sv-services__panel::after {
    content: "";
    position: absolute;
    right: var(--pad);
    bottom: 0;
    left: var(--pad);
    height: 1px;
    background: var(--c-wine);
  }
}

/* Celular (12/11/2026, a pedido): Perguntas frequentes com a pergunta menor
   (antes, 28px) e a resposta em 16px (antes, 18), o mesmo da página de
   palestras */
@media (max-width: 767px) {
  .sv-faq__text {
    font-size: 20px;
    line-height: 1.3;
  }
  .sv-faq__a p {
    font-size: 16px;
  }
}