/* ==========================================================================
   Sobre o Leiautar — estilos das seções da página (prefixo .sb-)
   Depende de site.css (chrome .lt-: tokens, cabeçalho, botões, rótulos, CTA
   final, rodapé) e de base.css (motion, cursor).
   ========================================================================== */

/* Seções de largura travada — 1 unidade = 1 px acima de 981 */
@media (min-width: 981px) {
  .sb-bridge,
  .sb-history,
  .sb-teacher,
  .sb-numbers,
  .sb-quotes,
  .sb-guests,
  .lt-final,
  .lt-footer {
    --lt-u: 1px;
  }
}

/* Título padrão das seções travadas. */
.sb-history h2,
.sb-numbers h2,
.sb-quotes h2,
.sb-guests h2 {
  max-width: none;
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

/* Hover dos cartões chapados: o filete verde engrossa para dentro. */
.motion-enabled .sb-quote,
.motion-enabled .sb-pillar {
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: var(--lt-entrada-card), var(--lt-entrada-card), var(--lt-entrada-card), 240ms;
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms;
}

.sb-quote:hover {
  box-shadow: inset 0 calc(-5 * var(--lt-u)) 0 var(--red);
}

/* ==========================================================================
   1. Hero institucional — primeira dobra inteira
   Foto da escola em full-bleed com escurecimento (o recurso da aula gratuita
   do curso). Conteúdo de largura total (48 de margem, como o hero da Caixa),
   ancorado embaixo: à esquerda o bloco principal — rótulo, título, texto —
   e à direita, compacta e na mesma linha de base, a frase-síntese.
   ========================================================================== */
.sb-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - var(--lt-header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(160 * var(--lt-u)) calc(48 * var(--lt-u)) calc(56 * var(--lt-u));
  overflow: hidden;
  color: var(--white);
  background: var(--black);
}

.sb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Escurece de baixo para cima: o texto assenta no preto, a foto respira em cima. */
.sb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.88) 100%);
}

/* Entrada da foto: só `transform`, a opacidade fica intocada (é o maior elemento pintado). */
.motion-enabled .sb-hero__bg {
  transform: scale(1.05);
  transition: transform 1400ms var(--motion-ease-scale);
}

.motion-enabled.motion-loaded .sb-hero__bg {
  transform: scale(1);
}

.sb-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(48 * var(--lt-u));
  width: 100%;
}

/*
 * Bloco principal. Título e texto aparados na letra (text-box, como no hero da
 * Caixa): o gap da coluna é o vão que se vê, igual entre rótulo → título e
 * título → texto.
 */
.sb-hero__copy {
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
  min-width: 0;
  max-width: calc(1100 * var(--lt-u));
}

/* Rótulo branco sobre o escuro (o quadrado cinza com o + amarelo já é do ícone). */
.sb-hero .lt-label {
  background: var(--white);
}

/*
 * H1 de abertura do site (--lt-h1, site.css). Só encolhe se a coluna não
 * comporta: "LEIAUTAR É ESCOLA DE" mede ~8em, então 12cqi garante as duas linhas.
 */
.sb-hero h1 {
  max-width: none;
  color: var(--white);
  font-size: min(var(--lt-h1), 12cqi);
  line-height: 0.88;
}

.sb-hero h1 em {
  color: var(--yellow);
  font-style: normal;
}

.sb-hero__lead {
  max-width: calc(560 * var(--lt-u));
  color: var(--gray-200);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

.sb-hero h1,
.sb-hero__lead,
.sb-hero__statement {
  text-box: trim-both cap alphabetic;
}

/* Navegador sem text-box: as mesmas sobras descontadas na margem (medidas da fonte). */
@supports not (text-box: trim-both cap alphabetic) {
  .sb-hero h1 {
    margin-block: -0.026em -0.154em;
  }

  .sb-hero__lead {
    margin-block: -0.405em -0.395em;
  }

  .sb-hero__statement {
    margin-block: -0.046em -0.174em;
  }
}

/*
 * A frase-síntese em display, no cinza da tese do curso, fechando a dobra à
 * direita. Compacta (coluna estreita, corpo menor que antes) para o peso ficar
 * no bloco da esquerda; aparada na letra, a base dela é a base do texto.
 */
.sb-hero__statement {
  flex: 0 0 auto;
  width: calc(400 * var(--lt-u));
  margin: 0;
  padding-left: calc(20 * var(--lt-u));
  color: var(--gray-400);
  font-family: var(--display);
  font-size: calc(36 * var(--lt-u));
  line-height: 0.92;
  text-transform: uppercase;
  border-left: calc(5 * var(--lt-u)) solid var(--yellow);
}

.sb-hero__statement em {
  color: var(--white);
  font-style: normal;
}

/* ==========================================================================
   2. Manifesto — o que a escola acredita
   Faixa do título com as diagonais finas no passo que o site já usa (tese do
   curso, Figma 616:37590; painel dos sinais da home): fio de 2 px a cada 9 px
   na horizontal, em cinza-200 sobre branco — tom sobre tom e sutil, como o site
   usa esse padrão (grafite sobre preto nos sinais da home, na tese do curso),
   sem o peso do xadrez rosa e amarelo nem do amarelo chapado.
   Título em display à esquerda e o parágrafo, no corpo padrão das seções
   (16, entrelinha 1,5), na mesma linha de base. Embaixo, no cinza, os três
   pilares como uma sequência: ícone no quadrado da cor do pilar, número,
   verbo em display, texto e, no pé, a faixa com o padrão da cor (os mesmos
   da tese da home: diagonais no rosa, pontinhos no vermelho, zigue-zague no
   amarelo).
   ========================================================================== */
.sb-manifesto {
  background: var(--gray-100);
}

.sb-manifesto__head {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(360 * var(--lt-u));
  align-items: end;
  gap: calc(48 * var(--lt-u));
  padding: calc(96 * var(--lt-u)) calc(48 * var(--lt-u)) calc(88 * var(--lt-u));
  /* O gradiente conta na perpendicular: 2 e 9 na horizontal viram 1,41 e 6,36 (× sen 45°). */
  background: repeating-linear-gradient(
    -45deg,
    var(--gray-200) 0 calc(1.41 * var(--lt-u)),
    var(--white) calc(1.41 * var(--lt-u)) calc(6.36 * var(--lt-u))
  );
}

/*
 * "MAS SERÁ MESMO?" mede 6,87em (medido na ABC Gravity): o corpo é 140 ou o
 * que cabe na coluna do título (a largura menos o parágrafo e o vão), com
 * folga de 3%, o que for menor — o título fica sempre em duas linhas.
 */
.sb-manifesto h2 {
  max-width: none;
  color: var(--black);
  font-size: min(calc(140 * var(--lt-u)), calc((100cqi - 408 * var(--lt-u)) / 7.1));
  line-height: 0.9;
}

.sb-manifesto__text {
  max-width: calc(360 * var(--lt-u));
  color: var(--ink);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

/* Aparados na letra: a base do parágrafo encontra a base do título. */
.sb-manifesto h2,
.sb-manifesto__text {
  text-box: trim-both cap alphabetic;
}

.sb-manifesto__body {
  padding: calc(56 * var(--lt-u)) calc(48 * var(--lt-u)) calc(96 * var(--lt-u));
}

/*
 * As três linhas do cartão (topo, verbo, texto) são linhas da grade da lista
 * (subgrid): verbo e texto ficam na mesma altura nos três, mesmo quando um
 * texto quebra em duas linhas e os outros em uma.
 */
.sb-manifesto__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto;
  column-gap: calc(24 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-pillar {
  --sb-faixa: calc(24 * var(--lt-u));
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: calc(12 * var(--lt-u));
  padding: calc(32 * var(--lt-u)) calc(32 * var(--lt-u)) calc(32 * var(--lt-u) + var(--sb-faixa));
  overflow: hidden;
  background: var(--white);
}

/* Faixa de padrão no pé; no hover ela sobe (o lugar do filete dos outros cartões). */
.sb-pillar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--sb-faixa);
  background: var(--sb-pillar-padrao);
  transition: height 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-pillar:hover::after {
  height: calc(var(--sb-faixa) * 1.75);
}

.sb-pillar--pink {
  --sb-pillar-cor: var(--pink);
  --sb-pillar-padrao: repeating-linear-gradient(-45deg, var(--pink-light) 0 7px, var(--pink) 7px 9px);
}

.sb-pillar--red {
  --sb-pillar-cor: var(--red);
  --sb-pillar-padrao: var(--red) url("./assets/pattern-tile-pontinhos-vermelho.svg") 0 0 / 8px 8px repeat;
}

.sb-pillar--yellow {
  --sb-pillar-cor: var(--yellow);
  --sb-pillar-padrao: var(--white) url("./assets/pattern-tile-zigue-amarelo.svg") 0 0 / 12px 44px repeat;
}

/* O topo dá a altura do cartão (subgrid: min-height no cartão não chega às linhas). */
.sb-pillar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: calc(120 * var(--lt-u));
  padding-bottom: calc(40 * var(--lt-u));
}

/*
 * Ícone no quadrado da cor do pilar: preto no rosa e no amarelo, branco no
 * vermelho. Mesma escala dos ícones do resto do site (os do Figma, estilo
 * Lucide): 24 px com traço de 2 px — 8,3% do ícone —, como nos caminhos do
 * Contato, que também usam a caixa de 56. Maior que isso o traço engrossa e o
 * ícone pesa mais que os outros.
 */
.sb-pillar__icon {
  display: grid;
  place-items: center;
  width: calc(56 * var(--lt-u));
  height: calc(56 * var(--lt-u));
  background: var(--sb-pillar-cor);
}

.sb-pillar__icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.sb-pillar__num {
  color: var(--gray-400);
  font-family: var(--display);
  font-size: calc(32 * var(--lt-u));
  line-height: 0.8;
}

.sb-pillar h3 {
  color: var(--black);
  font-family: var(--display);
  font-size: calc(48 * var(--lt-u));
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.sb-pillar p {
  max-width: calc(320 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

/* ==========================================================================
   3. A ponte — entre teoria e prática
   Preto chapado, texto branco (antes: vermelho com trama de "+" branca e texto
   preto, ilegível). Em cima, título e parágrafo (corpo padrão, 16)
   centralizados, sobre o eixo da ponte. Embaixo, uma ponte de arcos vista de
   lado: as margens "Teoria" e "Prática" nas pontas; tabuleiro e pilares numa
   peça só, construída com a malha de quadradinhos da marca (o passo de 10 que
   o site já usa), em cinza — os arcos são os vãos sem malha, e cada frase mora dentro de
   um arco, centralizada na parte reta, em branco sobre o preto. A ponte
   assenta no fim da seção, sem chão. Na entrada ela se desenha da esquerda
   para a direita e as frases aparecem arco a arco.
   ========================================================================== */
.sb-bridge {
  overflow: hidden;
  padding-top: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  color: var(--white);
  background: var(--black);
}

.sb-bridge__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--lt-u));
  text-align: center;
}

.sb-bridge h2 {
  max-width: calc(720 * var(--lt-u));
  color: var(--white);
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
  text-wrap: balance;
}

.sb-bridge__head p {
  max-width: calc(520 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
  text-wrap: balance;
}

/* Aparados na letra: o vão entre título e parágrafo é o que se vê. */
.sb-bridge h2,
.sb-bridge__head p {
  text-box: trim-both cap alphabetic;
}

.sb-bridge__figure {
  margin-top: calc(120 * var(--lt-u));
}

.sb-bridge__track {
  position: relative;
}

/*
 * As margens, nas duas pontas do tabuleiro: texto solto (não é etiqueta), em
 * rosa — a cor da seção fica nesse detalhe pequeno, não na malha, que é o
 * elemento maior. Mesma medida do texto do rótulo do site.
 */
.sb-bridge__banks {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(20 * var(--lt-u));
}

.sb-bridge__bank {
  color: var(--pink);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/*
 * A ponte sangra até as bordas da tela (a seção corta o excesso); o recuo
 * lateral devolve os arcos à coluna de 1216.
 */
.sb-bridge__arcade {
  --sb-tabuleiro: calc(60 * var(--lt-u));
  --sb-pilar: calc(40 * var(--lt-u));
  --sb-ponte-cor: var(--gray-600);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--sb-tabuleiro) calc(50vw - 50%) 0;
}

/* A malha: quadradinhos na cor da ponte (máscara do ladrilho oficial, passo 10). */
.sb-bridge__arcade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sb-ponte-cor);
  -webkit-mask: url("./assets/pattern-tile-quadradinhos.svg") 0 0 / calc(10 * var(--lt-u)) calc(10 * var(--lt-u)) repeat;
  mask: url("./assets/pattern-tile-quadradinhos.svg") 0 0 / calc(10 * var(--lt-u)) calc(10 * var(--lt-u)) repeat;
}

.sb-bridge__arches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Cada arco é um vão preto de volta perfeita (meio círculo em cima), aberto
 * na malha; entre um e outro fica o pilar. A frase centraliza na parte reta
 * do vão: o respiro de cima é o raio do arco (metade da largura do vão, que
 * em % conta sobre a coluna, daí o desconto do pilar).
 */
.sb-bridge__arches li {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(440 * var(--lt-u));
  margin-inline: calc(var(--sb-pilar) / 2);
  padding: calc(50% - var(--sb-pilar) / 2) calc(14 * var(--lt-u)) calc(40 * var(--lt-u));
  background: var(--black);
  border-radius: 999px 999px 0 0;
  text-align: center;
}

/*
 * As quatro frases sempre em duas linhas: a quebra é fixa no HTML (num ponto
 * natural da leitura) e o corpo é o que faz a linha mais longa — "LINGUAGEM
 * DE GENTE.", 7,98em na ABC Gravity — caber no vão, até 30. Mesmo corpo nos
 * quatro arcos, porque os vãos têm a mesma largura.
 */
.sb-bridge__arches p {
  color: var(--white);
  font-family: var(--display);
  font-size: min(calc(30 * var(--lt-u)), calc(100cqi / 8.1));
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   4. História compacta — linha do tempo guiada pela rolagem
   O formato guardado da ponte (docs/formatos-guardados/linha-do-tempo.md),
   no branco (a seção anterior é preta). Uma linha atravessa a seção de borda a
   borda da tela: o trilho em cinza-200 e, por cima, o traço preto que a
   rolagem desenha. Em cada marco, o ano grande em cima, o nó na linha e,
   embaixo, um cartão cinza com título e texto e o filete da cor do marco na
   base (rosa, azul, vermelho) — no topo ele somava peso ao miolo, entre a
   linha e o texto. Quando o traço passa por um nó, o marco acende:
   o nó ganha a cor, o ano sai do cinza para o preto e o cartão sobe.
   No desktop a seção fica presa na tela enquanto a rolagem desenha a linha;
   abaixo de 981 a linha é vertical e cresce conforme a página desce. Sem JS ou
   com movimento reduzido, fica tudo aberto (a classe `is-rolagem` não entra).
   ========================================================================== */
.sb-history {
  overflow-x: clip;
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--white);
}

.sb-history__inner {
  display: flex;
  flex-direction: column;
  gap: calc(128 * var(--lt-u));
  width: 100%;
}

.sb-history__head,
.sb-numbers__head,
.sb-quotes__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
}

/* Presa na tela: a seção ganha 150vh de rolagem, que viram o traço da linha. */
@media (min-width: 981px) {
  .sb-history.is-rolagem {
    height: calc(100vh - var(--lt-header-h) + 150vh);
    padding: 0;
  }

  .sb-history.is-rolagem .sb-history__pin {
    position: sticky;
    top: var(--lt-header-h);
    display: flex;
    align-items: center;
    height: calc(100vh - var(--lt-header-h));
    padding: calc(48 * var(--lt-u)) var(--lt-gutter);
  }
}

/*
 * O ano ocupa uma caixa de altura fixa (uma linha de 0,8em), então a altura
 * do nó é conhecida e a linha passa exatamente pelo centro dele.
 */
.sb-history__deck {
  --sb-ano: calc(96 * var(--lt-u));
  --sb-ano-h: calc(var(--sb-ano) * 0.8);
  --sb-ano-vao: calc(28 * var(--lt-u));
  --sb-no: calc(16 * var(--lt-u));
  position: relative;
}

/* Tela baixa (notebook de 720): a seção presa precisa caber — ano e vãos menores. */
@media (min-width: 981px) and (max-height: 780px) {
  .sb-history__inner {
    gap: calc(96 * var(--lt-u));
  }

  .sb-history__deck {
    --sb-ano: calc(80 * var(--lt-u));
  }
}

/* De uma borda da tela à outra (nem mais, nem menos: todo o traço é visível). */
.sb-history__line {
  position: absolute;
  top: calc(var(--sb-ano-h) + var(--sb-ano-vao) + var(--sb-no) / 2 - 1px);
  left: calc(50% - 50vw);
  width: 100vw;
  height: 2px;
  background: var(--gray-200);
}

/* O traço desenhado pela rolagem (sem JS, a linha inteira). */
.sb-history__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(var(--sb-progresso, 1));
  transform-origin: 0 50%;
}

.sb-history__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(32 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-milestone {
  --sb-titulo: calc(20 * var(--lt-u));
  --sb-titulo-h: calc(var(--sb-titulo) * 2);
  --sb-icone: calc(var(--sb-titulo-h) + 4 * var(--lt-u));
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sb-milestone--pink { --sb-marco-cor: var(--pink); }
.sb-milestone--blue { --sb-marco-cor: var(--blue); }
.sb-milestone--red { --sb-marco-cor: var(--red); }

.sb-milestone__year {
  display: block;
  height: var(--sb-ano-h);
  color: var(--black);
  font-family: var(--display);
  font-size: var(--sb-ano);
  line-height: 0.8;
  text-transform: uppercase;
  transition: color 500ms ease;
}

.sb-milestone__node {
  position: relative;
  width: var(--sb-no);
  height: var(--sb-no);
  margin-top: var(--sb-ano-vao);
  margin-bottom: calc(32 * var(--lt-u));
  background: var(--sb-marco-cor);
  transition: background-color 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * O cartão da época: cinza, com o filete da cor do marco na base. Ícone e
 * título na mesma linha, com a mesma altura; o texto embaixo, na largura toda.
 */
.sb-milestone__card {
  position: relative;
  display: grid;
  grid-template-columns: var(--sb-icone) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: calc(16 * var(--lt-u));
  flex: 1 0 auto;
  padding: calc(28 * var(--lt-u)) calc(28 * var(--lt-u)) calc(32 * var(--lt-u));
  background: var(--gray-100);
  border-bottom: calc(5 * var(--lt-u)) solid var(--sb-marco-cor);
  transition: opacity 700ms var(--lt-entrada-curva), transform 700ms var(--lt-entrada-curva);
}

/*
 * Quadrado branco sobre o cartão cinza, ícone preto: a cor da época já está
 * no nó e no filete. O quadrado tem a altura do título (duas linhas aparadas
 * na letra = 2em) mais 4 de ajuste ótico — 2 acima e 2 abaixo, com o título
 * centrado nele: com a medida exata o quadrado parecia menor que o texto. O
 * ícone é de 24 com traço de 2, a escala dos ícones do site.
 */
.sb-milestone__icon {
  display: grid;
  place-items: center;
  width: var(--sb-icone);
  height: var(--sb-icone);
  background: var(--white);
}

.sb-milestone__icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

/*
 * Título no tamanho dos cartões com ícone do site (20, como na Mentoria e na
 * Caixa), sempre em duas linhas: a quebra é fixa no HTML e a linha mais longa
 * ("Escola de design", 7,74em) cabe no cartão em todas as larguras. Aparado na
 * letra, mede 1,3em + a altura da maiúscula (0,7em) = 2em.
 */
.sb-milestone h3 {
  align-self: center;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--sb-titulo);
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.sb-milestone p {
  grid-column: 1 / -1;
  max-width: calc(340 * var(--lt-u));
  margin-top: calc(20 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

/* Estado antes de o traço chegar: ano e nó apagados, cartão abaixo e invisível. */
.is-rolagem .sb-milestone:not(.is-on) .sb-milestone__year {
  color: var(--gray-200);
}

.is-rolagem .sb-milestone:not(.is-on) .sb-milestone__node {
  background: var(--gray-200);
}

.is-rolagem .sb-milestone.is-on .sb-milestone__node {
  transform: scale(1.25);
}

.is-rolagem .sb-milestone:not(.is-on) .sb-milestone__card {
  opacity: 0;
  transform: translateY(calc(32 * var(--lt-u)));
}

/* ==========================================================================
   5. Quem conduz — a seção "Sobre Itamara" da página do curso
   ========================================================================== */
.sb-teacher {
  position: relative;
  overflow: hidden;
  padding-block: calc(120 * var(--lt-u));
  background: var(--gray-100);
}

/* Painel de listras colado na borda esquerda; a largura acompanha a margem. */
.sb-teacher__stripes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc((100% - min(100%, var(--lt-max))) / 2 + 318 * var(--lt-u));
  background-image: repeating-linear-gradient(
    -45deg,
    var(--black) 0 calc(0.71 * var(--lt-u)),
    transparent calc(0.71 * var(--lt-u)) calc(7.07 * var(--lt-u))
  );
}

.sb-teacher__inner {
  position: relative;
  display: grid;
  grid-template-columns: calc(590 * var(--lt-u)) minmax(0, 1fr);
  gap: calc(59 * var(--lt-u));
  align-items: stretch;
  width: min(100%, var(--lt-max));
  margin: 0 auto;
  padding-inline: calc(24 * var(--lt-u));
}

.sb-teacher__photo {
  position: relative;
  height: calc(700 * var(--lt-u));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
  padding: calc(24 * var(--lt-u));
}

.sb-teacher__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #575757;
}

.sb-teacher__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-teacher__photo:hover .sb-teacher__frame img {
  transform: scale(1.04);
}

.sb-teacher__photo figcaption {
  position: relative;
  color: var(--white);
  font-family: var(--display);
  font-size: calc(81 * var(--lt-u));
  font-weight: 400;
  line-height: 0.87;
  text-align: right;
  text-transform: uppercase;
}

.sb-teacher__dots {
  position: absolute;
  bottom: calc(41 * var(--lt-u));
  left: calc(-59 * var(--lt-u));
  width: calc(149 * var(--lt-u));
  height: calc(294 * var(--lt-u));
  background-image: url("./assets/pontos-vermelhos.svg?v=20260917-paleta");
  background-size: calc(59.3 * var(--lt-u)) calc(59.3 * var(--lt-u));
}

.sb-teacher__col {
  display: flex;
  flex-direction: column;
  min-height: calc(700 * var(--lt-u));
  min-width: 0;
  padding-top: calc(48 * var(--lt-u));
}

.sb-teacher__copy {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
}

.sb-teacher h2 {
  max-width: calc(310 * var(--lt-u));
  color: var(--black);
  font-size: calc(48 * var(--lt-u));
  line-height: 1;
}

.sb-teacher__name {
  width: fit-content;
  padding: calc(8 * var(--lt-u)) calc(10 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sb-teacher__text {
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--lt-u));
  max-width: calc(394 * var(--lt-u));
}

.sb-teacher__text p {
  color: var(--ink);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.36;
}

.sb-teacher__quote {
  display: flex;
  align-items: center;
  max-width: calc(394 * var(--lt-u));
  margin: calc(48 * var(--lt-u)) 0 0;
  padding-inline: calc(16 * var(--lt-u));
  color: var(--black);
  font-size: calc(18 * var(--lt-u));
  font-weight: 500;
  line-height: 1.13;
  border-left: calc(5 * var(--lt-u)) solid var(--red);
}

.sb-teacher__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(26 * var(--lt-u));
  margin: auto 0 0;
  padding: calc(48 * var(--lt-u)) 0 0;
  list-style: none;
}

.sb-teacher__stats li {
  min-height: calc(97 * var(--lt-u));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--lt-u));
  padding: calc(14 * var(--lt-u)) calc(12 * var(--lt-u));
  background: var(--white);
}

.sb-teacher__stats strong {
  color: var(--red);
  font-size: calc(33 * var(--lt-u));
  font-weight: 700;
  line-height: 1;
}

.sb-teacher__stats span {
  color: var(--ink);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.25;
}

/* ==========================================================================
   6. Números
   Cinza-escuro (#444) — entre a seção da Itamara (cinza-claro) e os
   depoimentos (pretos); o #222 quase se confundia com o preto que vem depois —,
   cartões pretos com o filete da cor na base. Em cada cartão, no topo, o ícone num quadrado de 48
   na cor do cartão (ícone de 24 com traço de 2 — a escala dos ícones do site;
   branco no vermelho e no azul, preto no rosa e no amarelo); embaixo, o número
   em display e a descrição, as quatro com o mesmo tamanho (duas linhas).
   Título e rótulo brancos sobre o escuro. O 4º cartão é azul (era branco).
   No fundo, a trama de cruzes "+" do CTA final (mesma cruz de 22 em 48, traço
   1,5), um tom acima do fundo — lá #444 sobre o grafite, aqui #666 sobre o
   #444 —; com mouse, as cruzes vivas do site.js (giram até virar "×").
   ========================================================================== */
.sb-numbers {
  --lt-cruzes-passo: calc(48 * var(--lt-u));
  --lt-cruzes-braco: 0.2292;
  --lt-cruzes-meia: 0.015625;
  --lt-cruzes-cor: var(--gray-600);
  position: relative;
  isolation: isolate;
  padding-block: calc(140 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  color: var(--white);
  background: var(--gray-700) url("./assets/pattern-tile-cruzes-cinza.svg") center top / var(--lt-cruzes-passo) var(--lt-cruzes-passo) repeat;
}

/* Com as cruzes vivas no canvas, a trama parada do CSS sai para não dobrar. */
.sb-numbers.is-cruzes-vivas {
  background-image: none;
}

.sb-numbers .lt-label {
  background: var(--white);
}

.sb-numbers__inner {
  display: flex;
  flex-direction: column;
  gap: calc(88 * var(--lt-u));
}

.sb-numbers h2 {
  color: var(--white);
}

.sb-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(24 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-stat {
  display: flex;
  flex-direction: column;
  min-height: calc(260 * var(--lt-u));
  padding: calc(24 * var(--lt-u));
  background: var(--black);
  border-bottom: calc(5 * var(--lt-u)) solid var(--sb-stat-cor);
}

.sb-stat--red { --sb-stat-cor: var(--red); }
.sb-stat--pink { --sb-stat-cor: var(--pink); }
.sb-stat--yellow { --sb-stat-cor: var(--yellow); }
.sb-stat--blue { --sb-stat-cor: var(--blue); }

.sb-stat__icon {
  display: grid;
  place-items: center;
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  margin-bottom: auto;
  background: var(--sb-stat-cor);
}

/* Sobre o vermelho e o azul, branco (o ícone é preto no arquivo). */
.sb-stat--red .sb-stat__icon img,
.sb-stat--blue .sb-stat__icon img {
  filter: invert(1);
}

.sb-stat__icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.sb-stat strong {
  margin-top: calc(32 * var(--lt-u));
  color: var(--white);
  font-family: var(--display);
  font-size: calc(56 * var(--lt-u));
  white-space: nowrap;
  font-weight: 400;
  line-height: 0.88;
  text-transform: uppercase;
}

/* Até 230: as quatro descrições (≈ 40 caracteres cada) em duas linhas em qualquer largura de cartão. */
.sb-stat__text {
  max-width: calc(230 * var(--lt-u));
  margin-top: calc(16 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
  text-wrap: balance;
}

/* ==========================================================================
   7. O que dizem os alunos — o formato dos depoimentos da Mentoria
   Modo escuro em carrossel: título à esquerda, setas à direita e a faixa de
   cartões começando na margem do conteúdo e correndo até a borda da tela
   (infinita: sobre.js repete a lista antes e depois). Cartão grafite com as
   aspas vermelhas, o depoimento, a foto quadrada com nome e o filete vermelho
   na base. Com cartões de 400u cabem três e a ponta do quarto em 1440.
   ========================================================================== */
.sb-quotes {
  /* Três inteiros e a ponta do quarto mesmo em 1280: o cartão encolhe até
     caber (margem + dois vãos + 60 de ponta), sem passar de 320 para baixo. */
  --sb-depo-card: min(calc(400 * var(--lt-u)), max(320px, calc((100cqw - var(--lt-gutter) - 48 * var(--lt-u) - 60px) / 3)));
  display: grid;
  grid-template-columns: var(--lt-gutter) minmax(0, 1fr) auto var(--lt-gutter);
  grid-template-areas:
    ".     head  nav   ."
    "track track track track";
  row-gap: calc(80 * var(--lt-u));
  padding-block: calc(160 * var(--lt-u));
  overflow: hidden;
  color: var(--white);
  background: var(--black);
}

.sb-quotes h2 {
  color: var(--white);
}

/* Rótulo branco sobre o escuro. */
.sb-quotes .lt-label {
  background: var(--white);
}

.sb-quotes__head {
  grid-area: head;
  padding-right: calc(32 * var(--lt-u));
}

.sb-quotes__nav {
  grid-area: nav;
  align-self: end;
}

/* Setas chapadas no grafite, sem contorno (o fundo já separa). */
.sb-quotes__nav button,
.sb-quotes__nav button[disabled]:hover {
  color: var(--white);
  background: var(--ink);
  border: 0;
}

.sb-quotes__nav button:hover {
  color: var(--black);
  background: var(--yellow);
}

.sb-quotes__track {
  grid-area: track;
  container-type: inline-size;
}

.sb-quotes .lt-carousel {
  gap: calc(24 * var(--lt-u));
  margin: 0;
  padding: 0 var(--lt-gutter);
  scroll-padding-inline: var(--lt-gutter);
  list-style: none;
}

.sb-quote {
  flex: 0 0 var(--sb-depo-card);
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
  min-height: calc(440 * var(--lt-u));
  padding: calc(40 * var(--lt-u));
  background: var(--ink);
  border-bottom: calc(5 * var(--lt-u)) solid var(--red);
}

.sb-quote__mark {
  width: calc(32 * var(--lt-u));
  height: calc(32 * var(--lt-u));
}

.sb-quote blockquote {
  margin: 0 0 calc(16 * var(--lt-u));
}

.sb-quote blockquote p {
  color: var(--white);
  font-size: calc(19 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.sb-quote__person {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--lt-u));
  margin-top: auto;
}

/* Foto quadrada (a foto de autor é quadrada). */
.sb-quote__avatar {
  flex: 0 0 auto;
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  object-fit: cover;
}

.sb-quote__person b,
.sb-quote__person small {
  display: block;
  line-height: 1.5;
}

.sb-quote__person b {
  color: var(--white);
  font-size: calc(16 * var(--lt-u));
  font-weight: 700;
}

.sb-quote__person small {
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
}

/* ==========================================================================
   8. Professores convidados — no desenho dos palestrantes do Festival
   Topo centralizado (como a ponte) e as fotos 4:5 coladas, sem vão, num mural;
   nome em display sobre a foto e, embaixo dele, o tema da aula (no Festival
   ele fica escondido; aqui é o que explica por que a pessoa está ali). São 15:
   5 colunas × 3 fileiras no desktop (no Festival são 3 colunas, o que daria
   5 fileiras de foto grande no fim da página), 3 × 5 no tablet e no celular —
   sempre fileiras completas. Fundo branco: os depoimentos, antes, são pretos.
   ========================================================================== */
.sb-guests {
  position: relative;
  padding-top: calc(120 * var(--lt-u));
  background: var(--white);
}

.sb-guests__inner {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  padding-bottom: calc(120 * var(--lt-u));
}

.sb-guests__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--lt-u));
  text-align: center;
}

.sb-guests h2 {
  max-width: calc(800 * var(--lt-u));
  text-wrap: balance;
}

.sb-guests__lead {
  max-width: calc(560 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
  text-wrap: balance;
}

.sb-guests__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-guests__grid li {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--gray-700);
}

.sb-guests__grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-guests__grid li:hover img {
  transform: scale(1.04);
}

.sb-guests__grid div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--lt-u));
  padding: calc(18 * var(--lt-u));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

/* 26, ou menos quando a foto estreita (5 colunas entre 981 e 1279). */
.sb-guests__grid h3 {
  color: var(--white);
  font-family: var(--display);
  font-size: min(calc(26 * var(--lt-u)), 11cqi);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.sb-guests__grid p {
  color: var(--gray-400);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

/* Trama de losangos que fecha a seção, como no curso — em vermelho. */
.sb-guests__band {
  width: 100%;
  height: calc(62 * var(--lt-u));
  background-color: var(--red);
  background-image:
    repeating-linear-gradient(45deg, var(--black) 0 calc(4 * var(--lt-u)), transparent calc(4 * var(--lt-u)) calc(21 * var(--lt-u))),
    repeating-linear-gradient(-45deg, var(--black) 0 calc(4 * var(--lt-u)), transparent calc(4 * var(--lt-u)) calc(21 * var(--lt-u)));
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
/* História e convidados: com a margem de 112, o título dos cartões não caberia em
   duas linhas e as fotos das 5 colunas ficariam pequenas demais. */
@media (min-width: 981px) and (max-width: 1279px) {
  .sb-history,
  .sb-guests {
    --lt-gutter: 48px;
  }
}

@media (max-width: 1279px) {
  /* Ponte: com a margem de 112 os arcos estreitavam demais; a ponte vai até a margem de 48. */
  .sb-bridge__track {
    margin-inline: calc(48px - var(--lt-gutter));
  }

  /* Manifesto: o parágrafo desce para baixo do título, que ganha a largura toda. */
  .sb-manifesto__head {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(32 * var(--lt-u));
  }

  .sb-manifesto h2 {
    font-size: min(calc(140 * var(--lt-u)), calc(100cqi / 7.1));
  }

  /* Empilhado: a frase-síntese desce para baixo do texto, na mesma coluna. */
  .sb-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .sb-hero__copy {
    flex: 0 0 auto;
    align-self: stretch;
  }

  .sb-hero__statement {
    width: auto;
    max-width: calc(520 * var(--lt-u));
  }


  .sb-numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sb-stat {
    min-height: calc(240 * var(--lt-u));
  }
}

@media (max-width: 980px) {
  .sb-hero,
  .sb-bridge,
  .sb-history,
  .sb-numbers,
  .sb-quotes {
    padding-block: 80px;
  }

  .sb-guests {
    padding-top: 80px;
  }

  .sb-guests__inner {
    padding-bottom: 80px;
  }

  .sb-history h2,
  .sb-numbers h2,
  .sb-quotes h2,
  .sb-guests h2,
  .sb-bridge h2 {
    max-width: none;
    font-size: clamp(40px, 8.4vw, 64px);
  }

  .sb-hero {
    min-height: 0;
    padding: 160px 48px 48px;
  }

  /* Empilhado: sem a trava da coluna, vale o H1 de abertura (pode ir a mais linhas). */
  .sb-hero h1 {
    font-size: var(--lt-h1);
  }

  .sb-hero__inner {
    gap: 32px;
  }

  .sb-hero__statement {
    max-width: none;
    font-size: clamp(28px, 5vw, 36px);
  }

  .sb-manifesto__head {
    padding: 64px 48px 56px;
  }

  .sb-manifesto__body {
    padding: 40px 48px 64px;
  }

  .sb-manifesto__pillars {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 16px;
  }

  .sb-pillar {
    grid-row: auto;
    grid-template-rows: auto auto auto;
  }

  .sb-pillar__top {
    min-height: 0;
  }

  /*
   * Ponte no tablet e no celular: a mesma proporção do desktop, atravessada
   * de lado (rolagem horizontal da própria figura, de "Teoria" até
   * "Prática"); a malha cobre a largura toda da rolagem.
   */
  .sb-bridge {
    padding-bottom: 0;
  }

  .sb-bridge__figure {
    margin-top: 64px;
    margin-inline: calc(-1 * var(--lt-gutter));
    padding-inline: var(--lt-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sb-bridge__figure::-webkit-scrollbar {
    display: none;
  }

  .sb-bridge__track {
    width: 1040px;
    margin-inline: 0;
  }

  .sb-bridge__arcade {
    width: auto;
    margin-inline: calc(-1 * var(--lt-gutter));
  }

  .sb-bridge__arcade {
    padding-inline: var(--lt-gutter);
  }

  .sb-bridge__arches li {
    height: 380px;
    padding-inline: 12px;
    padding-bottom: 28px;
  }

  /*
   * História empilhada: a linha vira vertical, à esquerda, do centro do
   * primeiro nó ao centro do último (o JS mede e grava as duas medidas; sem
   * JS, a linha cobre a lista); o traço cresce conforme a página desce. O nó
   * fica no meio da altura do ano, e ano e cartão na coluna ao lado.
   */
  .sb-history__inner {
    gap: 48px;
  }

  .sb-history__deck {
    --sb-ano: 60px;
    --sb-no: 16px;
  }

  .sb-history__line {
    top: var(--sb-linha-topo, 0);
    left: calc(var(--sb-no) / 2 - 1px);
    width: 2px;
    height: var(--sb-linha-altura, 100%);
  }

  .sb-history__fill {
    transform: scaleY(var(--sb-progresso, 1));
    transform-origin: 50% 0;
  }

  .sb-history__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .sb-milestone {
    display: grid;
    grid-template-columns: var(--sb-no) minmax(0, 1fr);
    column-gap: 24px;
  }

  .sb-milestone__year,
  .sb-milestone__card {
    grid-column: 2;
  }

  .sb-milestone__year {
    margin-bottom: 20px;
  }

  .sb-milestone__node {
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0 0 20px;
  }

  /* Itamara empilhada: foto em cima, coluna embaixo. */
  .sb-teacher {
    padding-block: 80px;
  }

  .sb-teacher__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-inline: 48px;
  }

  .sb-teacher__stripes {
    width: 120px;
  }

  .sb-teacher__photo {
    height: 520px;
  }

  .sb-teacher__col {
    min-height: 0;
    gap: 28px;
    padding-top: 0;
  }

  .sb-teacher__copy {
    gap: 20px;
  }

  .sb-teacher__quote,
  .sb-teacher__stats {
    margin-top: 0;
    padding-top: 0;
  }

  .sb-numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .sb-stat {
    min-height: 230px;
  }

  .sb-stat strong {
    font-size: 52px;
  }

  /* Depoimentos no tablet e no celular: setas embaixo da faixa, um cartão e a ponta do próximo. */
  .sb-quotes {
    --sb-depo-card: min(340px, calc(100cqw - 2 * var(--lt-gutter) - 48px));
    grid-template-columns: var(--lt-gutter) minmax(0, 1fr) var(--lt-gutter);
    grid-template-areas:
      ".     head  ."
      "track track track"
      ".     nav   .";
    row-gap: 40px;
  }

  .sb-quotes__head {
    padding-right: 0;
  }

  .sb-quotes__nav {
    align-self: start;
  }

  .sb-quotes .lt-carousel {
    gap: 16px;
  }

  .sb-quote {
    min-height: 380px;
  }

  .sb-quote blockquote p {
    font-size: 18px;
  }

  .sb-guests__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .sb-hero,
  .sb-bridge,
  .sb-history,
  .sb-numbers,
  .sb-quotes {
    padding-block: 64px;
  }

  /* A ponte assenta no fim da seção: sem respiro embaixo. */
  .sb-bridge {
    padding-bottom: 0;
  }

  .sb-guests {
    padding-top: 64px;
  }

  .sb-guests__inner {
    padding-bottom: 64px;
  }

  .sb-history h2,
  .sb-numbers h2,
  .sb-quotes h2,
  .sb-guests h2,
  .sb-bridge h2 {
    font-size: clamp(36px, 11.5vw, 48px);
  }

  .sb-hero {
    padding: 120px 24px 40px;
  }

  .sb-hero__lead {
    font-size: 16px;
  }

  .sb-hero__statement {
    padding-left: 14px;
    font-size: clamp(24px, 7vw, 32px);
  }

  .sb-manifesto__head {
    padding: 48px 24px 40px;
  }

  .sb-manifesto__body {
    padding: 24px 24px 48px;
  }

  .sb-pillar {
    padding: 24px 24px calc(24px + var(--sb-faixa));
  }

  .sb-pillar__top {
    padding-bottom: 24px;
  }

  .sb-pillar__icon {
    width: 48px;
    height: 48px;
  }

  .sb-pillar__icon img {
    width: 24px;
    height: 24px;
  }

  .sb-pillar h3 {
    font-size: 40px;
  }


  .sb-history__deck {
    --sb-ano: 52px;
  }

  /* Itamara: listras só numa faixa no topo, como no curso. */
  .sb-teacher {
    padding: 16px 16px 60px;
  }

  .sb-teacher__stripes {
    width: 100%;
    height: 220px;
    bottom: auto;
  }

  .sb-teacher__inner {
    gap: 40px;
    margin: 0;
    padding: 0;
  }

  .sb-teacher__photo {
    height: 400px;
    padding: 16px;
  }

  .sb-teacher__photo figcaption {
    font-size: 52px;
  }

  .sb-teacher__dots {
    bottom: 24px;
    left: -24px;
    width: 96px;
    height: 190px;
    background-size: 38px 38px;
  }

  .sb-teacher__col {
    gap: 24px;
  }

  .sb-teacher__copy {
    gap: 16px;
  }

  .sb-teacher h2 {
    font-size: 32px;
  }

  .sb-teacher__text {
    max-width: none;
    gap: 12px;
  }

  .sb-teacher__text p {
    font-size: 14px;
  }

  .sb-teacher__quote {
    max-width: none;
    padding-inline: 12px;
    font-size: 14px;
  }

  .sb-teacher__stats {
    gap: 8px;
  }

  .sb-teacher__stats li {
    min-height: 0;
    padding: 12px 8px;
  }

  .sb-teacher__stats strong {
    font-size: 22px;
  }

  .sb-teacher__stats span {
    font-size: 13px;
  }

  .sb-numbers__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-stat {
    min-height: 0;
    padding: 20px;
  }

  .sb-stat strong {
    font-size: 48px;
  }

  .sb-quotes {
    --sb-depo-card: calc(100cqw - 2 * var(--lt-gutter) - 32px);
  }

  .sb-quote {
    padding: 24px;
  }

  /* Celular: 3 colunas (fileiras completas); no cartão de ~110 px fica só o nome. */
  .sb-guests__grid div {
    padding: 8px;
  }

  .sb-guests__grid h3 {
    font-size: 16px;
  }

  .sb-guests__grid p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-hero__bg,
  .sb-pillar::after,
  .sb-guests__grid img,
  .sb-teacher__frame img {
    transition: none;
  }
}