/* ==========================================================================
   Página Sobre (sobre.html)
   Copy do documento "Copy do site" (Sobre), sem acréscimos.

   Sistema do site: abertura creme com título vermelho, margem lateral
   --pad, eyebrow e botões do components.css, escala de texto das páginas
   de teste (título de seção 48 · destaque 24 · parágrafo 17 no frame de
   1512), rodapé claro. As palavras gigantes desta página usam o desenho da
   assinatura do rodapé (Plus Jakarta 400, -0.05em).

   Referências (a organização, não as telas):
   - aat-architecten.be/over: letras gigantes com a foto sobreposta (B1) e
     o parágrafo grande com recuo na primeira linha (B2).
   - mijobello.com/about: a grade visível em linhas finíssimas (B3), a
     escala entre palavra gigante e rótulos pequenos e a lista de linhas
     com nome e papel (B5).
   - coffee-tech.com/about: números em destaque (o período de cada
     capítulo) e blocos desencontrados na grade, com muito respiro (B3).
   - undplus.com/about-us: o texto de abertura como afirmação em corpo
     grande (B2) e a ordem livre dos elementos na página.
   - Do projeto: blocos encostados metade e metade de sonder-mr.com (B6) e
     o respiro de arbeiderpartiet.no (todas as seções).

   B1  Abertura ......... título vermelho; "Trajetória" gigante em vinho
                          com o retrato sobreposto
   B2  Entrada .......... parágrafo grande com recuo; palavras que se
                          acendem com o scroll
   B2b Sumário .......... a foto em sete faixas, uma por capítulo, que se
                          alinham com o scroll (o componente da versão 3)
   B3  A trajetória ..... sete capítulos em lugares
                          diferentes dela, ligados pela linha vermelha
   B4  Hoje ............. vinho; a linha termina no quadrado verde-limão
   B5  Na mídia ......... (da versão 3) linhas grandes com nome e papel;
                          cartão com o logo acompanha o cursor
   B6  Formas de trabalhar  (da versão 3) título e texto; dois blocos que
                          são os próprios CTAs, com a palavra gigante
   ========================================================================== */

.page-about {
  --m: calc(126 * var(--fp)); /* módulo: 1/12 da largura do frame */
  --b-title: max(32px, calc(48 * var(--fp)));
  --b-sub: max(18px, calc(24 * var(--fp)));
  --b-text: max(15px, calc(17 * var(--fp)));
  --b-lead: max(16px, calc(19 * var(--fp)));
  /* período de cada capítulo da trajetória (B3) */
  --b-year: max(40px, calc(68 * var(--fp))); /* era 104, depois 84 (29/10/2026) */
  /* respiro vertical entre as seções (arbeiderpartiet.no) */
  --b-py: max(96px, calc(200 * var(--fp)));
  /* espaço entre colunas de B5 e B6 (o --gap da versão 3) */
  --b-gap: calc(24 * var(--fp));
  /* recuo do texto em relação à linha da grade onde o capítulo começa */
  --b-in: max(24px, calc(36 * var(--fp)));
  --muted: #6f6969;
  --path-red: var(--c-red);
}

/* ---------- Tipografia comum ---------- */
.b-h2,
.b-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.b-h2 {
  max-width: 14ch;
  font-size: var(--b-title);
  line-height: 1.2;
}
.b-h3 {
  max-width: 17ch;
  font-size: max(26px, calc(40 * var(--fp)));
  line-height: 1.2;
}
:is(.b-h2, .b-h3) .rv-line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.b-nowrap {
  white-space: nowrap;
}

/* Link contextual (o mesmo da página Sobre, versão de teste) */
.b-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-red);
  font-family: var(--font-text);
  font-size: var(--b-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.b-link__icon {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.5s var(--ease-osmo);
}
.b-link__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .b-link:hover .b-link__icon {
    transform: translate(2px, -2px);
  }
}

/* ==========================================================================
   B1 · Abertura
   Sem título visível (o h1 fica só para leitores de tela, .sr-only). Na
   base, "Trajetória" de uma margem à outra, em vinho, e o retrato por cima
   das letras (aat-architecten.be/over). A palavra é medida para o desenho
   ir de margem a margem em 1512 (--hero-word). O acento do "ó" fica por
   cima do retrato (.b-hero__word--accent).
   ========================================================================== */
.b-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* a palavra e o retrato na base da primeira dobra */
  min-height: max(100svh, calc(860 * var(--fp)));
  padding-top: var(--nav-h);
  overflow: hidden;
  /* Faixa branca atrás do header (altura --nav-h: 100px em 1512), como na
     página de palestras, versão de teste (.t-hero); o creme começa embaixo dela */
  background: linear-gradient(var(--c-white) 0 var(--nav-h), var(--c-cream) var(--nav-h));
  color: var(--c-ink);
}

.b-hero__stage {
  /* a largura de "Trajetória" é ~3.84 × o corpo: o desenho vai de margem a margem */
  --hero-word: calc((100vw - 2 * var(--pad)) / 3.84);
  --stage-pb: calc(36 * var(--fp)); /* respiro embaixo da palavra */
  position: relative;
  padding: 0 var(--pad) var(--stage-pb);
}
.b-hero__word {
  position: relative;
  z-index: 1;
  margin: 0 0 0 -0.045em; /* alinhamento óptico: a barra do "T" na margem */
  color: var(--c-wine);
  font-family: var(--font-display);
  font-size: var(--hero-word);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.b-hero__word .rv-line-mask {
  padding: 0.04em 0.06em 0.16em 0;
  margin: -0.04em -0.06em -0.16em 0;
}

/* Acento do "ó" por cima do retrato: a mesma palavra, na mesma posição, acima
   da foto (z-index 3), recortada na faixa do acento. Medidas em em (valem em
   qualquer tamanho): o "ó" vai de 2.30em a 2.90em a partir do "T" e o alto do
   "o" (altura-x) fica a 0.34em do topo da linha. Nessa faixa só existe o
   acento; o resto da cópia fica escondido. Ao trocar a palavra, a fonte, o
   peso ou o espaçamento, refaça estas medidas. */
.b-hero__word--accent {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--stage-pb);
  clip-path: inset(-0.1em calc(100% - 2.9em) calc(100% - 0.34em) 2.3em);
  pointer-events: none;
}

/* Retrato sobre as letras: ocupa as colunas 9 a 11 e cobre só o alto de
   "ór", para a palavra continuar legível.
   O quadro (.b-hero__frame) é revelado de baixo para cima; o bloco de fora
   leva o parallax.
   Foto (06/11/2026, a pedido): Iona de blusa branca no corredor
   (sobre/iona-trajetoria.webp, vertical), num quadro vertical (8:9), um
   pouco mais largo e mais à direita, como no layout enviado. Antes:
   iona-retrato.webp num quadro horizontal (800:520), 3 módulos de largura, a
   1 módulo da margem (versoes-anteriores/sobre-retrato-abertura/). */
.b-hero__photo {
  position: absolute;
  z-index: 2;
  right: calc(var(--pad) + 0.85 * var(--m));
  bottom: calc(var(--hero-word) * 0.8);
  width: calc(3.25 * var(--m));
}
.b-hero__frame {
  position: relative;
  aspect-ratio: 8 / 9;
  overflow: hidden;
  background: var(--c-graphite); /* fundo provisório atrás da foto */
}
.b-hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  top: -6%;
  object-fit: cover;
  object-position: 50% 19%; /* da cabeça, com respiro, até a cintura */
}

/* ==========================================================================
   B2 · Entrada
   O parágrafo de abertura em corpo grande, com a primeira linha recuada em
   3 das 11 colunas que ele ocupa (aat-architecten.be/over). As palavras
   começam apagadas e se acendem conforme o texto sobe (sobre.js, item 2).
   O segundo parágrafo, em cinza, fica à direita, bem abaixo.
   ========================================================================== */
.b-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: var(--b-py) var(--pad) calc(var(--b-py) * 0.6);
  background: var(--c-cream);
  color: var(--c-ink);
}
.b-intro__lead {
  grid-column: 1 / span 11;
  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;
  text-indent: calc(300% / 11);
}
/* Palavras do item 2 (sobre.js): apagadas até a vez delas */
.b-intro__lead .b-word {
  text-indent: 0; /* o recuo vale só para a primeira linha do parágrafo, não para cada palavra */
  opacity: var(--lit, 1);
}
.b-intro__support {
  grid-column: 8 / span 4;
  margin: calc(140 * var(--fp)) 0 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--b-lead);
  line-height: 1.5;
}

/* ==========================================================================
   B2b · Sumário
   O componente "Os campos" da página Sobre, versão 3 (.a3-field), aqui com o
   prefixo .b- e com o texto e o número em Plus Jakarta Sans: a mesma foto dividida em sete faixas verticais, uma por
   capítulo, na largura toda. As faixas começam desencontradas e se alinham
   com o scroll (sobre.js, item 6). O fundo creme continua o da entrada e
   aparece nos desencontros.
   ========================================================================== */
.b-fields {
  position: relative;
  background: var(--c-cream);
}
.b-fields__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: min(calc(100vw * 1080 / 2400), calc(100svh - 40px));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: clip;
}
.b-field {
  position: relative;
  min-width: 0;
  will-change: transform;
}
.b-field__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  color: var(--c-cream);
  text-decoration: none;
}
/* Cada faixa mostra o seu pedaço da mesma foto */
.b-field__img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-100% * var(--i));
  width: 700%;
  transition: filter 0.6s ease;
}
.b-field__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Fio claro entre as faixas */
.b-field + .b-field .b-field__link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 1px;
  background: rgba(251, 245, 238, 0.16);
}
.b-field__label {
  position: absolute;
  top: max(16px, calc(28 * var(--fp)));
  left: max(12px, calc(20 * var(--fp)));
  right: 8px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Sumário: texto e número em Plus Jakarta Sans (na versão 3, Libre Franklin) */
  font-family: var(--font-display);
  font-size: max(12px, calc(14 * var(--fp)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.4s ease, translate 0.6s var(--ease-osmo);
}
.b-field__num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) {
  /* Ao passar por uma faixa, as outras escurecem: o campo ganha foco */
  .b-fields__list:has(.b-field__link:hover) .b-field__img {
    filter: brightness(0.45);
  }
  .b-fields__list .b-field__link:hover .b-field__img {
    filter: none;
  }
  .b-field__link:hover .b-field__label {
    color: var(--c-lime);
    translate: 0 4px;
  }
}
.b-field__link:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: -4px;
}

/* ==========================================================================
   B3 · A trajetória
   Grade de 12 colunas visível (mijobello.com/about), da margem esquerda à
   direita. Cada capítulo começa numa linha da grade (--col) e ocupa 5
   colunas; o texto fica recuado da linha (--b-in). A linha vermelha
   (sobre.js, item 3) passa pelas linhas da grade: desce pela linha de um
   capítulo, atravessa o respiro na horizontal e desce até o marcador do
   próximo.
   ========================================================================== */
.b-path {
  position: relative;
  /* em cima, só meio respiro: o título saiu e a seção começa logo no
     primeiro capítulo, abaixo das faixas do sumário */
  padding: calc(var(--b-py) * 0.5) var(--pad) calc(var(--b-py) * 0.9);
  background: var(--c-white);
  color: var(--c-ink);
}
/* As linhas verticais da grade (mijobello.com/about) saíram em 29/10/2026:
   fica só a linha vermelha da trajetória. */
.b-path__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.b-path__line path {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* O caminho pontilhado que mostrava para onde a linha ia saiu em 29/10/2026:
   fica só a linha vermelha, desenhada conforme a leitura avança. */
/* a parte já percorrida, em vermelho */
.b-path__ink {
  stroke: var(--path-red);
  stroke-width: 2;
}

.b-path__head {
  position: relative;
  padding-left: var(--b-in);
  margin-bottom: 0; /* só o título para leitores de tela (.sr-only) */
}

.b-path__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: calc(160 * var(--fp));
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-step {
  position: relative;
  /* Começa numa coluna da grade (--col) e tem largura própria: o texto mede
     600px no frame de 1512 e acompanha a escala da tela (--fp), mais o recuo
     (--b-in). Por isso, no desktop, nenhum capítulo começa depois da coluna 7
     (na 8, passaria da margem direita). */
  grid-column: var(--col, 1) / span 6;
  justify-self: start;
  width: calc(600 * var(--fp) + var(--b-in));
  grid-row: var(--row, auto); /* uma linha por capítulo (sem isso, dois capítulos sem colunas em comum dividiriam a mesma linha) */
  padding-left: var(--b-in);
  font-family: var(--font-text);
  font-size: var(--b-text);
  line-height: 1.55;
  color: var(--c-text);
}
.b-step:focus {
  outline: none;
}
.b-step p {
  margin: 0;
}
.b-step p + p {
  margin-top: calc(16 * var(--fp));
}

/* Marcador quadrado sobre a linha da grade; acende quando a linha chega */
.b-step__mark {
  position: absolute;
  top: calc(var(--b-year) * 0.55 - 6px); /* meio da altura dos algarismos do período */
  left: -6px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(7, 0, 0, 0.35);
  background: var(--c-white);
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease-osmo);
}
.b-step.is-on .b-step__mark {
  border-color: var(--path-red);
  background: var(--path-red);
  transform: rotate(90deg);
}
:root:not(.js) .b-step__mark,
.b-path.is-static .b-step__mark {
  border-color: var(--path-red);
  background: var(--path-red);
}

/* Período de cada capítulo, em destaque (os números de coffee-tech.com/about).
   Mesmo formato em todos: ano–ano, com meia-risca e sem espaços. 84px no
   frame de 1512 (era 104, depois 84: agora 68); o mais largo ("2009–2012")
   ocupa ~5.1em (347px) e cabe com folga nos 600px do texto. */
.b-step p.b-step__year {
  margin-bottom: calc(32 * var(--fp));
  color: var(--c-red);
  font-family: var(--font-display);
  font-size: var(--b-year);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.b-step__year .rv-line-mask {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.b-step .b-h3 {
  margin-bottom: calc(32 * var(--fp));
  color: var(--c-ink);
}
.b-step p.b-step__lead {
  color: var(--c-ink);
  font-size: var(--b-lead);
  line-height: 1.5;
}
.b-step p.b-step__more {
  margin-top: calc(32 * var(--fp));
}

/* ==========================================================================
   B4 · Hoje
   Vinho. O texto começa na mesma coluna em que a trajetória termina (8):
   uma linha verde-limão desce do alto do bloco até o quadrado, continuando
   a linha vermelha (--grow, sobre.js, item 4). À esquerda, "Hoje" gigante,
   em verde-limão, com o "j" cortado pela borda de baixo.
   ========================================================================== */
.b-today {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: calc(6.5 * var(--m));
  padding: 0 var(--pad);
  overflow: hidden;
  background: var(--c-wine);
  color: var(--c-cream);
  --t-pt: calc(var(--b-py) * 0.8); /* respiro de cima do texto */
  --t-lead: max(22px, calc(32 * var(--fp)));
}
.b-today__word {
  grid-column: 1 / span 6;
  grid-row: 1;
  align-self: end;
  /* A palavra inteira fica visível, com a perna do "j" (0.142em abaixo da
     linha) a 48px da borda de baixo. Antes o "j" era cortado pela borda e a
     palavra parecia "Hoie" (ajuste de 29/10/2026). */
  margin: 0 0 calc(0.142em + 48 * var(--fp)) -0.06em;
  color: var(--c-lime);
  font-family: var(--font-display);
  font-size: calc(330 * var(--fp)); /* era 360: com a palavra mais alta, ganha folga do texto ao lado */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}
.b-today__word .rv-line-mask {
  padding: 0.04em 0.06em 0.2em 0;
  margin: -0.04em -0.06em -0.2em 0;
}
.b-today__body {
  position: relative;
  grid-column: 7 / span 6; /* a mesma coluna do último capítulo: a linha continua aqui */
  grid-row: 1;
  padding: var(--t-pt) 0 var(--t-pt) var(--b-in);
}
/* A continuação da linha: do alto do bloco até o quadrado */
.b-today__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: calc(var(--t-pt) + var(--t-lead) * 0.65);
  background: var(--c-lime);
  transform: scaleY(var(--grow, 1));
  transform-origin: 50% 0;
}
.b-today__square {
  position: absolute;
  top: calc(var(--t-pt) + var(--t-lead) * 0.65 - 9px);
  left: -9px;
  width: 18px;
  height: 18px;
  background: var(--c-lime);
  transform: scale(var(--sq, 1));
}
.b-today__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.b-today__text {
  max-width: 34em;
  margin: calc(32 * var(--fp)) 0 0;
  color: rgba(251, 245, 238, 0.72);
  font-family: var(--font-text);
  font-size: var(--b-lead);
  line-height: 1.5;
}

/* ==========================================================================
   B5 · Na mídia e em diferentes frentes
   Trazida da página Sobre, versão 3 (.a3-media), com o prefixo .b- (29/10/2026):
   os nomes da copy em linhas grandes, com o papel de Iona à direita. No hover
   (desktop), o nome avança e fica vermelho e um cartão com o logo acompanha o
   cursor (sobre.js, item 7); no toque e no celular, o logo aparece pequeno na
   própria linha.
   ========================================================================== */
/* Título das seções B5 e B6: o .a3-h2 da versão 3 (56px, medium) */
.b-display {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: max(30px, calc(56 * var(--fp)));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.b-display .rv-line-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.b-media {
  position: relative;
  padding: var(--b-py) var(--pad) 0;
  background: var(--c-white);
  color: var(--c-ink);
}
.b-media__head {
  margin-bottom: max(48px, calc(88 * var(--fp)));
}
.b-media__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(7, 0, 0, 0.14);
}
.b-media__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
  column-gap: var(--b-gap);
  align-items: center;
  padding: max(20px, calc(30 * var(--fp))) 0;
  cursor: default;
}
/* Linha de cima, desenhada da esquerda para a direita (data-reveal="rule") */
.b-media__row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(7, 0, 0, 0.14);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}
/* Nomes menores que o título da seção (06/11/2026, a pedido: com 64px, ficavam
   maiores que o título, de 56): 40px no frame de 1512, 22px no mínimo */
.b-media__name {
  font-family: var(--font-display);
  font-size: max(22px, calc(40 * var(--fp)));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
  transition: color 0.4s ease, translate 0.6s var(--ease-osmo);
}
.b-media__role {
  justify-self: end;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: max(14px, calc(15 * var(--fp)));
  line-height: 1.45;
  text-align: right;
}
.b-media__mini {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .b-media__row:hover .b-media__name {
    color: var(--c-red);
    translate: calc(16 * var(--fp)) 0;
  }
}
.b-media__todo {
  margin: 24px 0 0;
  color: var(--c-muted);
  font-family: var(--font-text);
  font-size: 13px;
}

/* Cartão que acompanha o cursor (desktop) */
.b-media__card {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  width: max(220px, calc(300 * var(--fp)));
  aspect-ratio: 4 / 3;
  background: var(--card-bg, var(--c-cream));
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.3s ease, scale 0.5s var(--ease-osmo), background-color 0.4s ease;
}
.b-media__card.is-on {
  opacity: 1;
  scale: 1;
}
.b-media__card img {
  width: 58%;
  max-height: 46%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (hover: none), (pointer: coarse) {
  .b-media__card {
    display: none;
  }
}

/* ==========================================================================
   B6 · Conheça as formas de trabalhar com Iona
   Trazida da página Sobre, versão 3 (.a3-close / .a3-panel), com o prefixo
   .b-: título e texto da copy no branco e, abaixo, dois blocos encostados
   que são os próprios CTAs, com a palavra gigante cortada na base
   (Libre Franklin 800): vinho com "Serviços" em azul e vermelho com
   "Palestras" em verde-limão. Hover: a palavra anda, o rótulo ganha
   sublinhado e a seta avança.
   ========================================================================== */
.b-close {
  padding-top: var(--b-py);
  background: var(--c-white);
  color: var(--c-ink);
}
.b-close__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--b-gap);
  align-items: end;
  padding-inline: var(--pad);
}
.b-close__head .b-display {
  grid-column: 1 / 7;
}
.b-close__text {
  grid-column: 8 / 13;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--b-text);
  line-height: 1.6;
}
.b-close__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: max(64px, calc(120 * var(--fp)));
}
.b-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;
}
.b-panel--wine {
  --word: var(--c-blue);
  background: var(--c-wine);
}
.b-panel--red {
  --word: var(--c-lime);
  background: var(--c-red);
}
.b-panel__cta {
  /* rótulo do CTA: Plus Jakarta 500, -0.02em (o espaçamento dos títulos da
     página de palestras, versão de teste) */
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: max(22px, calc(40 * var(--fp)));
  font-weight: 500;
  letter-spacing: -0.02em;
}
.b-panel__label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.7s var(--ease-osmo);
}
.b-panel__arrow {
  width: 0.8em;
  height: 0.8em;
  transition: transform 0.6s var(--ease-osmo);
}
.b-panel__arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.b-panel__arrow path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
}
/* Palavra gigante: o desenho e o movimento de "Palestras" na abertura da
   página de palestras, versão de teste (.t-hero__word): Plus Jakarta bold
   221px, -0.02em, começando 55px antes da borda do bloco (cortada) e com a
   base das letras a 24px da borda de baixo. Parada; só anda no hover do
   bloco: desliza devagar para a direita até a margem do texto (alinhada ao
   rótulo do CTA, com a primeira letra inteira) e volta quando o mouse sai.
   Para a esquerda, a palavra perdia as primeiras letras ("lestras").
   Sem hover (toque) ou com movimento reduzido, parada. */
.b-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) {
  .b-panel:hover .b-panel__word {
    /* a palavra desliza para a direita até a margem do texto: começa
       alinhada ao rótulo do CTA, com a primeira letra inteira */
    translate: calc(var(--pad) + 55 * var(--fp) - 0.04em) 0;
  }
  .b-panel:hover .b-panel__label {
    background-size: 100% 1px;
  }
  .b-panel:hover .b-panel__arrow {
    transform: translate(4px, -4px);
  }
}
.b-panel:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: -8px;
}

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

/* ==========================================================================
   Tablet (768–1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .b-hero__photo {
    right: var(--pad);
    bottom: calc(var(--hero-word) * 0.88);
    width: calc(4 * var(--m));
  }
  .b-intro__lead {
    grid-column: 1 / -1;
    text-indent: 25%;
  }
  .b-intro__support {
    grid-column: 7 / -1;
  }
  .b-step {
    grid-column: var(--col-t, 1) / span 7;
    width: auto;
  }
  .b-today__word {
    grid-column: 1 / span 5;
    font-size: 19vw;
  }
  .b-today__body {
    grid-column: 6 / -1;
  }
  .b-close__head .b-display,
  .b-close__text {
    grid-column: 1 / -1;
  }
  .b-close__text {
    margin-top: 28px;
  }
}

/* ==========================================================================
   Celular (até 767px)
   A grade fica com 4 colunas; os capítulos ocupam a largura toda e a linha
   desce reta pela margem. A abertura empilha título, retrato e palavra.
   ========================================================================== */
@media (max-width: 767px) {
  .page-about {
    --b-py: 96px;
    --b-in: 24px;
  }
  .b-hero {
    min-height: 0;
  }
  .b-hero__stage {
    --stage-pb: 20px;
    margin-top: 48px;
  }
  .b-hero__photo {
    position: relative;
    right: auto;
    bottom: auto;
    width: 64%;
    margin: 0 0 -0.1em auto; /* cobre só o alto das letras */
    transform: none !important; /* sem parallax no celular: a sobreposição fica fixa */
    font-size: var(--hero-word);
  }
  .b-hero__stage {
    display: flex;
    flex-direction: column-reverse;
  }
  .b-intro {
    display: block;
  }
  .b-intro__lead {
    font-size: 26px;
    line-height: 1.2;
    text-indent: 22%;
  }
  .b-intro__support {
    margin-top: 48px;
    padding-left: 22%;
  }
  /* Sumário: faixas mais altas, com o nome na vertical */
  .b-fields__list {
    height: min(78svh, 620px);
  }
  .b-field__img img {
    object-position: 50% 20%;
  }
  .b-field__label {
    top: 14px;
    left: 50%;
    right: auto;
    translate: -50% 0;
    flex-direction: row;
    gap: 8px;
    writing-mode: vertical-rl;
    font-size: 12px;
    white-space: nowrap;
  }
  .b-path__list {
    display: block;
  }
  .b-step + .b-step {
    margin-top: 88px;
  }
  .b-step p.b-step__year {
    margin-bottom: 20px;
  }
  .b-step .b-h3 {
    margin-bottom: 20px;
  }
  .b-today {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .b-today {
    --t-pt: 72px;
  }
  .b-today__body {
    padding-bottom: 40px;
  }
  .b-today__word {
    margin-top: 24px;
    margin-bottom: calc(0.142em + 28px);
    font-size: 40vw;
  }
  .b-media__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .b-media__role {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .b-media__mini {
    display: block;
    grid-column: 2;
    grid-row: 1 / 3;
    width: auto;
    height: 22px;
  }
  .b-close__panels {
    grid-template-columns: 1fr;
  }
  .b-panel {
    min-height: 260px;
  }
  /* as medidas do celular de .t-hero__word */
  .b-panel__word {
    left: -0.25em;
    bottom: calc(16px - 0.09em);
    font-size: clamp(140px, 26vw, 221px);
  }
}

/* ---------- Movimento reduzido: nada se move ---------- */
@media (prefers-reduced-motion: reduce) {
  .b-step__mark,
  .b-field__img,
  .b-field__label,
  .b-panel__word,
  .b-panel__label,
  .b-panel__arrow,
  .b-media__name {
    transition: none;
  }
}

/* ==========================================================================
   Celular — ajustes de proporção (12/11/2026, a pedido)
   Versão anterior: versoes-anteriores/mobile-sobre-antes/.
   ========================================================================== */
@media (max-width: 767px) {
  /* B1 · Abertura: como no desktop, "Trajetória" é o elemento principal e o
     retrato, menor, fica sobre o alto de "ória" (antes, 64% da largura, mais
     alto que a palavra e chamando mais atenção que ela) */
  /* Desde 12/11/2026 (a pedido, no layout enviado): "Trajetória" no alto, de
     margem a margem, e o retrato embaixo, grande, encostado na borda direita
     da tela (82% da largura), com a perna do "j" passando por cima do alto
     da foto. Foto do celular: o recorte mais próximo
     (sobre/iona-trajetoria-mobile.webp, no <picture> do HTML). */
  .b-hero__stage {
    flex-direction: column;
    margin-top: 96px;
    padding-bottom: 12px;
  }
  /* No layout enviado, a palavra é mais encorpada que no desktop (600, em
     vez de 400); a largura de "Trajetória" em 600 é ~4 × o corpo, então o
     corpo é refeito para o desenho continuar de margem a margem */
  .b-hero__stage {
    --hero-word: calc((100vw - 2 * var(--pad)) / 4);
  }
  .b-hero__word {
    z-index: 3; /* acima da foto: o "j" passa por cima dela */
    font-weight: 600;
  }
  .b-hero__word--accent {
    display: none; /* a foto não cobre mais o acento */
  }
  .b-hero__photo {
    width: 82%;
    margin: -0.04em calc(-1 * var(--pad)) 0 auto; /* o alto da foto logo abaixo da linha de base */
  }
  .b-hero__frame {
    aspect-ratio: 981 / 1125;
  }
  .b-hero__frame img {
    top: 0;
    height: 100%;
    object-position: 50% 0%;
  }

  /* B2b · Sumário: faixas mais baixas (antes, até 620px, quase a tela
     toda); a foto continua cobrindo a altura, com Iona no centro */
  .b-fields__list {
    height: min(56svh, 440px);
  }
  .b-field__img img {
    object-position: 50% 50%;
  }

  /* B4 · Hoje: na proporção do resto da página. A palavra no tamanho de
     "Trajetória" da abertura (antes, 40vw: 156px em 390, quase o dobro) e
     o texto de abertura um pouco menor e mais leve na leitura (antes, 22px) */
  .b-today {
    --t-pt: 56px;
    --t-lead: 20px;
  }
  .b-today__word {
    align-self: flex-start; /* no desktop, alinhada pela base da grade (end) */
    margin-top: 56px;
    margin-bottom: calc(0.142em + 8px);
    font-size: calc((100vw - 2 * var(--pad)) / 3.84);
  }
  .b-today__lead {
    line-height: 1.35;
  }
  .b-today__text {
    margin-top: 24px;
  }
  .b-today__body {
    padding-bottom: 72px;
  }

  /* B5 · Na mídia: logos menores, todos na mesma caixa (até 64 × 20px,
     sem distorcer), no tamanho em que o selo do LinkedIn Top Voice já
     aparecia (antes, todos com 22px de altura: os mais largos, como a
     Forbes, ficavam enormes) */
  .b-media__mini {
    width: 64px;
    height: 20px;
    object-fit: contain;
    object-position: 100% 50%;
  }
}

/* Celular (12/11/2026, a pedido): sem o sumário (as sete faixas da foto);
   da entrada, a página segue direto para a trajetória */
@media (max-width: 767px) {
  .b-fields {
    display: none;
  }
}