/* ==========================================================================
   Página Insights (insights.html)
   Copy do documento "Copy do site" (Insights), sem acréscimos no texto
   corrido. Microtextos de interface: "Cada quadrado, uma publicação",
   "Temas", "Ler", "Ler na Forbes", "Todas as colunas na Forbes" e a
   contagem de colunas por ano.

   Sistema do site: abertura creme com título vermelho, margem lateral
   --pad, títulos de seção no desenho da página Sobre (56px medium no
   frame de 1512), parágrafos em Libre Franklin 17/19, rodapé claro,
   blocos de cor encostados e palavras gigantes cortadas pelas bordas.

   Referências (a organização, não as telas):
   - shellypalmer.com/blog: o arquivo de textos de um autor, com a última
     publicação em destaque, filtro por tema e a lista por data.
   - A home (seção 08): o bloco vermelho, a foto e a faixa vinho com
     "Insights", que levam a esta página, voltam na Última publicação.
   - Do projeto: o quadrado vermelho dos rótulos e marcadores vira a
     unidade do arquivo (I1); os anos em vermelho da trajetória (página
     Sobre) organizam a lista da Forbes (I4); os blocos de cor de
     sonder-mr.com e as palavras gigantes do fim da página Sobre (I3, I5).

   I1  Abertura ............ banner rotativo: foto, h1 branco e a faixa
                             verde-limão com as três colunas mais recentes
                             da Forbes (segunda versão, 03/11/2026, Figma)
   I2  Última publicação ... imagem encostada na borda + a publicação mais
                             recente, com hover no título e no link
   I3  Ideias e perguntas .. textos autorais em blocos de cor, com o tema
                             em palavra gigante (PROVISÓRIOS), e o botão
                             "Ver todos os artigos" (→ artigos.html)
   I4  Na Forbes ........... assinatura, filtro por ano e as colunas por
                             ano, com o ano fixo à esquerda
   I5  Leve uma dessas questões  dois blocos que são os próprios CTAs
   ========================================================================== */

.page-insights {
  --m: calc(126 * var(--fp)); /* módulo: 1/12 da largura do frame */
  --i-py: max(96px, calc(200 * var(--fp))); /* respiro entre as seções (o --b-py da página Sobre) */
  --i-gap: calc(24 * var(--fp));
  --i-text: max(15px, calc(17 * var(--fp)));
  --i-lead: max(16px, calc(19 * var(--fp)));
  --muted: #6f6969;
  --i-rule: rgba(7, 0, 0, 0.14);
}

/* ---------- Título das seções: o .b-display da página Sobre (56px, medium) ---------- */
.i-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;
}
.i-display .rv-line-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* Cabeça das seções: título à esquerda (1–6), texto à direita (8–12), alinhados pela base */
.i-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--i-gap);
  align-items: end;
  padding-inline: var(--pad);
}
.i-head > .i-display,
.i-head__main {
  grid-column: 1 / 7;
}
.i-head__text {
  grid-column: 8 / 13;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--i-text);
  line-height: 1.6;
}
.i-head__text p {
  margin: 0;
}
.i-head__text p + p {
  margin-top: calc(16 * var(--fp));
}
.i-head__text .i-head__lead {
  color: var(--c-ink);
  font-size: var(--i-lead);
  line-height: 1.5;
}

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

/* Seta fina usada nos cards e nas linhas (a mesma do menu) */
.i-feature__arrow svg,
.i-idea__arrow svg,
.i-post__arrow svg,
.i-panel__arrow svg,
.i-ideas__btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.i-feature__arrow path,
.i-idea__arrow path,
.i-post__arrow path,
.i-panel__arrow path,
.i-ideas__btn-icon path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
}

/* ==========================================================================
   I1 · Abertura: banner rotativo (segunda versão, 03/11/2026)
   Figma: frame "Insights" (node 689:449), hero 1512 × 813.
   - Foto na largura toda (645 de altura), com o header claro por cima e o
     h1 em branco à esquerda (Plus Jakarta bold 59.38, em três linhas);
     uma foto por coluna, que trocam em fade, com um zoom-out lento
     enquanto a coluna está na tela. No centro, 34px acima da base da
     foto, o indicador escolhe a coluna: uma barra que se preenche em
     verde-limão nos 5s da troca, para a coluna da vez, e pontos creme
     (8px, 12 de espaço) para as outras.
   - Faixa verde-limão (168 de altura) com a coluna atual: o contador
     ("01/03"), o título (30, regular) e a linha de contexto (16), no
     desenho da "Linha de assunto" do Figma (.rows > .row: 64 | 1fr,
     espaço 24); à direita, o botão azul "Acessar na Forbes" (80 de
     altura), que leva à coluna atual. Na troca, o texto que sai sobe e
     apaga e o novo sobe de baixo (o movimento da troca de palavras das
     aberturas).
   As três colunas são as três mais recentes da Forbes, lidas da lista da
   I4 pelo insights.js (item 1); o HTML traz as mesmas, para quem não roda
   JS e para os buscadores.
   ========================================================================== */
.i-hero {
  position: relative;
  background: var(--c-lime);
  color: var(--c-ink);
}
.i-hero__media {
  position: relative;
  height: max(480px, calc(645 * var(--fp)));
  overflow: hidden;
  background: #1b1716; /* tom escuro das fotos, enquanto elas carregam */
  color: var(--c-white);
}
/* Enquanto a página confere as colunas novas da Forbes (html[data-forbes-pending],
   no máximo 1.2s; insights.js, item 7): a foto e a faixa esperam apagadas e a barra
   não anda, para nada trocar na frente de quem está vendo; depois, aparecem num fade */
.i-hero__imgs,
.i-hero__slides {
  transition: opacity 0.6s ease;
}
html[data-forbes-pending] .i-hero__imgs,
html[data-forbes-pending] .i-hero__slides {
  opacity: 0;
}
html[data-forbes-pending] .i-hero__fill {
  animation-play-state: paused !important;
}
.i-hero__imgs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.i-hero__imgs img.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .i-hero__imgs img {
    transform: scale(1.06);
    transition:
      opacity 1.1s ease,
      transform 7s linear;
  }
  .i-hero__imgs img.is-active {
    transform: scale(1);
  }
}
/* Proteção de leitura para o header e o título, qualquer que seja a foto */
.i-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 0, 0, 0.42) 0, rgba(7, 0, 0, 0) 24%),
    linear-gradient(90deg, rgba(7, 0, 0, 0.34) 0, rgba(7, 0, 0, 0) 46%);
  pointer-events: none;
}
.i-hero__title {
  position: absolute;
  z-index: 1;
  top: max(calc(var(--nav-h) + 48px), calc(215 * var(--fp)));
  left: var(--pad);
  max-width: 6em;
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: max(40px, calc(59.38 * var(--fp)));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.i-hero__title .rv-line-mask {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* Indicador (03/11/2026, a pedido; antes, três pontos): a coluna da vez é
   uma barra (40 × 8) que se preenche em verde-limão da esquerda para a
   direita no tempo da troca (--hero-step, 5s, vindo do insights.js); as
   outras são pontos creme de 8px (os do Figma), com 12px entre eles. Na
   troca, a barra encolhe até virar ponto e o ponto da coluna seguinte se
   estica. A troca acontece quando a barra termina de encher (o JS escuta o
   fim da animação), então a barra parada (.is-paused: foco na abertura, fora da
   tela, aba escondida; o mouse não pausa) também para a troca. Depois de um
   clique (.is-stopped) ou com movimento reduzido, a barra fica cheia.
   Botão: o ponto com 6px de cada lado e 8 em cima e embaixo (área de toque). */
.i-hero__dots {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(34 * var(--fp) - 8px);
  display: none;
  transform: translateX(-50%);
}
.js .i-hero__dots {
  display: flex;
  align-items: center;
}
.i-hero__dot {
  display: block;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.i-hero__pip {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-cream);
  transition:
    width 0.6s var(--ease-osmo),
    background-color 0.4s ease,
    transform 0.4s var(--ease-osmo);
}
.i-hero__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.i-hero__dot[aria-current="true"] .i-hero__pip {
  width: 40px;
  background: rgba(251, 245, 238, 0.38);
}
.i-hero__dot[aria-current="true"] .i-hero__fill {
  animation: i-hero-progress var(--hero-step, 5s) linear forwards;
}
.i-hero.is-paused .i-hero__dot[aria-current="true"] .i-hero__fill {
  animation-play-state: paused;
}
.i-hero.is-stopped .i-hero__dot[aria-current="true"] .i-hero__fill {
  animation: none;
  transform: scaleX(1);
}
@keyframes i-hero-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (hover: hover) and (pointer: fine) {
  .i-hero__dot:not([aria-current="true"]):hover .i-hero__pip {
    transform: scale(1.35);
  }
}
.i-hero__dot:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 0;
}

/* ---------- Faixa verde-limão ---------- */
.i-hero__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(24 * var(--fp));
  align-items: start;
  min-height: calc(168 * var(--fp));
  padding: calc(54 * var(--fp)) var(--pad) calc(34 * var(--fp));
}
.i-hero__slides {
  display: grid;
  min-width: 0;
}
/* Coluna: contador (64) | título e linha de contexto, como a "Linha de assunto" */
.i-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: calc(64 * var(--fp)) minmax(0, 1fr);
  column-gap: calc(24 * var(--fp));
  align-items: start;
  visibility: hidden;
}
.i-slide.is-active,
.i-slide.is-leaving {
  visibility: visible;
}
.i-slide__count {
  margin: 0;
  padding-top: calc(9 * var(--fp));
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.i-slide__body {
  min-width: 0;
  padding-left: calc(16 * var(--fp));
}
.i-slide__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: max(22px, calc(30 * var(--fp)));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.i-slide__text {
  max-width: max(380px, calc(511 * var(--fp)));
  margin: 8px 0 0;
  font-family: var(--font-text);
  font-size: max(15px, calc(16 * var(--fp)));
  line-height: 1.45;
}
/* Troca: o texto que sai sobe e apaga; o novo sobe de baixo, em sequência */
@media (prefers-reduced-motion: no-preference) {
  .js .i-slide :is(.i-slide__count, .i-slide__title, .i-slide__text) {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.45s ease;
  }
  .js .i-slide.is-leaving :is(.i-slide__count, .i-slide__title, .i-slide__text) {
    transform: translateY(-18px);
  }
  .js .i-slide.is-active :is(.i-slide__count, .i-slide__title, .i-slide__text) {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.7s ease 0.2s,
      transform 0.9s var(--ease-osmo) 0.2s;
  }
  .js .i-slide.is-active .i-slide__title {
    transition-delay: 0.27s;
  }
  .js .i-slide.is-active .i-slide__text {
    transition-delay: 0.34s;
  }
}

/* Botão azul (Figma: 80 de altura, 40 de respiro, Libre Franklin 18
   semibold e a seta de 24). No hover, o vinho sobe e o texto fica creme
   (o efeito dos botões do site; o verde-limão sumiria na faixa). */
.btn.i-hero__btn {
  --btn-color: var(--c-blue);
  --btn-contrast: var(--c-cream);
  gap: 12px;
  width: auto;
  height: max(56px, calc(80 * var(--fp)));
  margin-top: calc(-1 * var(--fp));
  padding: 0 max(24px, calc(40 * var(--fp)));
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: var(--c-ink);
  font-size: max(16px, calc(18 * var(--fp)));
  font-weight: 600;
  line-height: 1.2;
  transition: var(--btn-color-out), border-color 0.5s var(--ease-osmo);
}
.btn.i-hero__btn::after {
  background: var(--c-wine);
}
@media (hover: hover) and (pointer: fine) {
  .btn.i-hero__btn:is(:hover, :focus-visible) {
    border-color: var(--c-wine);
    transition: var(--btn-color-in), border-color 0.5s var(--ease-osmo);
  }
}
/* Com o vinho subindo, o texto do botão fica creme (04/11/2026: a cor de
   tinta do botão, mais forte que a regra geral do .btn, deixava o texto
   preto sobre o vinho). Só onde o vinho sobe: com mouse e sem movimento
   reduzido (com movimento reduzido, a regra abaixo troca as duas cores). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn.i-hero__btn:is(:hover, :focus-visible) {
    color: var(--btn-contrast);
  }
}
.btn.i-hero__btn:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .btn.i-hero__btn:is(:hover, :focus-visible) {
    background: var(--c-wine);
    color: var(--c-cream);
  }
}
.i-hero__btn-icon {
  flex: none;
  width: 24px;
  height: 24px;
}
.i-hero__btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
.i-hero__btn-icon path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.75px;
}

/* ==========================================================================
   I2 · Última publicação (segunda versão, 03/11/2026)
   Figma: frame "Insights" (node 689:449). Cabeça: o título à esquerda e,
   à direita (colunas 7–12), o texto de entrada da página (que estava na
   abertura), alinhados pelo alto. Abaixo, a publicação mais recente:
   - a imagem encostada na borda esquerda da tela (738 × 435 no frame);
   - à direita (551 de largura, 78 depois da imagem), no alto, a fonte e
     a data (com o quadrado vermelho) e o título (Plus Jakarta 48,
     medium); na base, "Ler na Forbes" ("Ler artigo", nos textos
     autorais) em 32, entre duas regras, com a seta à direita. A regra de
     baixo fica na linha da base da imagem.
   Hover: o título fica vermelho, o "Ler na
   Forbes" fica vermelho e avança 16px, uma regra vermelha percorre cada
   uma das duas regras da esquerda para a direita (a de baixo logo depois
   da de cima; 03/11/2026, a pedido) e a seta avança na diagonal. A
   publicação inteira (imagem e texto) é clicável.
   Entrada do título: linha a linha, como os textos do site (reveal.js,
   "lines"; 04/11/2026, a pedido), no texto de dentro do link.
   ========================================================================== */
.i-latest {
  padding-top: max(88px, calc(148 * var(--fp)));
  background: var(--c-white);
  color: var(--c-ink);
}
.i-head--latest {
  align-items: start;
}
.i-head--latest .i-head__text {
  grid-column: 7 / 13;
  color: var(--c-text);
  font-size: max(16px, calc(18 * var(--fp)));
  line-height: 1.35;
}

.i-feature {
  position: relative;
  display: grid;
  grid-template-columns: calc(738 * var(--fp)) minmax(0, calc(551 * var(--fp)));
  column-gap: calc(78 * var(--fp));
  margin-top: max(64px, calc(160 * var(--fp)));
}
.i-feature__media {
  position: relative;
  aspect-ratio: 738 / 435;
  margin: 0;
  overflow: hidden;
  background: var(--c-graphite); /* fundo provisório atrás da foto */
}
.i-feature__media img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  /* a foto fixa de Iona (vertical, 3:4) no quadro horizontal: do alto da cabeça às
     mãos no notebook, com folga no alto durante o parallax (10/11/2026; antes, 50% 0%,
     para o retrato provisório) */
  object-position: 50% 40%;
}
.i-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
}
.i-feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 max(24px, calc(30 * var(--fp)));
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.i-feature__meta::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}
.i-feature__meta time::before {
  content: "·";
  margin-right: 12px;
}
.i-feature__title {
  max-width: 12em;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(28px, calc(48 * var(--fp)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: color 0.45s ease;
}
.i-feature__title .rv-line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
/* O título é o link; o ::after cobre a publicação inteira (imagem e texto) */
.i-feature__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* O texto do título, dividido em linhas na entrada (reveal.js, "lines") */
.i-feature__name {
  display: block;
}
.i-feature__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.i-feature__link:focus-visible {
  outline: none;
}
.i-feature:has(.i-feature__link:focus-visible) {
  outline: 2px solid var(--c-ink);
  outline-offset: 8px;
}
/* "Ler na Forbes" entre duas regras; a de cima se desenha na entrada e, no
   hover, uma segunda regra, vermelha, percorre a primeira */
.i-feature__cta {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: max(68px, calc(94 * var(--fp)));
  padding-right: calc(28 * var(--fp));
  /* regra de baixo: a de tinta e, por cima, a vermelha do hover (fundo em
     duas camadas; a de cima são o ::before e o ::after) */
  background:
    linear-gradient(var(--c-red), var(--c-red)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--c-ink), var(--c-ink)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.9s var(--ease-osmo);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: max(22px, calc(32 * var(--fp)));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.i-feature__cta::before,
.i-feature__cta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  transform-origin: 0 50%;
}
.i-feature__cta::before {
  background: var(--c-ink);
  transform: scaleX(var(--rule, 1));
}
.i-feature__cta::after {
  background: var(--c-red);
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-osmo);
}
.i-feature__label {
  transition:
    translate 0.6s var(--ease-osmo),
    color 0.4s ease;
}
.i-feature__arrow {
  flex: none;
  width: max(24px, calc(32 * var(--fp)));
  height: max(24px, calc(32 * var(--fp)));
  color: var(--c-ink);
  transition:
    transform 0.5s var(--ease-osmo),
    color 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .i-feature:hover .i-feature__title,
  .i-feature:hover .i-feature__label,
  .i-feature:hover .i-feature__arrow {
    color: var(--c-red);
  }
  .i-feature:hover .i-feature__cta::after {
    transform: scaleX(1);
  }
  /* a de baixo percorre logo depois da de cima */
  .i-feature:hover .i-feature__cta {
    background-size: 100% 1px, 100% 1px;
    transition-delay: 0.1s;
  }
  .i-feature:hover .i-feature__label {
    translate: calc(16 * var(--fp)) 0;
  }
  .i-feature:hover .i-feature__arrow {
    transform: translate(3px, -3px);
  }
}

/* ==========================================================================
   I3 · Ideias e perguntas
   Três blocos quadrados por linha, encostados (4 de 12 colunas: 504px no
   frame de 1512). No alto, o tema e a data; o título (a pergunta) e "Ler";
   na base, o tema em palavra gigante, cortada (o desenho de .b-panel__word,
   na página Sobre). O texto fica a --pad das bordas do bloco.
   ========================================================================== */
.i-ideas {
  padding-top: var(--i-py);
  background: var(--c-white);
  color: var(--c-ink);
}
.i-ideas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: max(56px, calc(112 * var(--fp))) 0 0;
  padding: 0;
  list-style: none;
}
.i-idea {
  --word: var(--c-red);
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: calc(40 * var(--fp)) var(--pad);
  overflow: clip;
  isolation: isolate;
}
.i-idea--blue {
  background: var(--c-blue);
}
.i-idea--cream {
  background: var(--c-cream);
}
.i-idea--lime {
  --word: var(--c-wine);
  background: var(--c-lime);
}
.i-idea--wine {
  --word: var(--c-lime);
  background: var(--c-wine);
  color: var(--c-cream);
}
.i-idea__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.i-idea__theme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.i-idea__theme::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--word);
}
.i-idea__meta time {
  opacity: 0.62;
}
.i-idea__title {
  max-width: 17ch;
  margin: calc(36 * var(--fp)) 0 0;
  font-family: var(--font-display);
  font-size: max(22px, calc(32 * var(--fp)));
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.i-idea__link {
  color: inherit;
  text-decoration: none;
}
.i-idea__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.i-idea__link:focus-visible {
  outline: none;
}
.i-idea:has(.i-idea__link:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: -8px;
}
.i-idea__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: calc(24 * var(--fp));
  font-family: var(--font-display);
  font-size: max(16px, calc(18 * var(--fp)));
  font-weight: 500;
  letter-spacing: -0.01em;
}
.i-idea__label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.7s var(--ease-osmo);
}
.i-idea__arrow {
  width: 0.75em;
  height: 0.75em;
  transition: transform 0.6s var(--ease-osmo);
}
/* Palavra gigante do tema: Plus Jakarta bold, começando na margem do texto
   e cortada pela borda de baixo (e pela da direita, nas palavras longas).
   Parada, só o alto das letras aparece; no hover, ela sobe inteira, como as
   barras de voz do logo. No toque, fica um pouco mais à mostra. */
.i-idea__word {
  position: absolute;
  left: calc(var(--pad) - 0.06em);
  bottom: 0;
  z-index: -1;
  color: var(--word);
  font-family: var(--font-display);
  font-size: calc(168 * var(--fp));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  pointer-events: none;
  translate: 0 var(--peek, 52%);
  transition: translate 1.1s var(--ease-osmo);
}
@media (hover: none), (pointer: coarse) {
  .i-idea {
    --peek: 30%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .i-idea:hover .i-idea__word {
    translate: 0 6%;
  }
  .i-idea:hover .i-idea__label {
    background-size: 100% 1px;
  }
  .i-idea:hover .i-idea__arrow {
    transform: translate(3px, -3px);
  }
}

/* "Ver todos os artigos": sob os blocos, alinhado à margem esquerda; leva à
   página com todos os textos autorais (artigos.html; 04/11/2026). O mesmo
   botão do fim da página de artigo. */
.i-ideas__more {
  display: flex;
  padding: max(40px, calc(56 * var(--fp))) var(--pad) 0;
}
.btn.i-ideas__btn {
  display: inline-flex;
  gap: 12px;
  width: auto;
  height: max(56px, calc(72 * var(--fp)));
  padding: 0 max(28px, calc(40 * var(--fp)));
  font-size: max(16px, calc(18 * var(--fp)));
}
.i-ideas__btn-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   I4 · Na Forbes
   ========================================================================== */
.i-forbes {
  padding: var(--i-py) 0 0;
  background: var(--c-white);
  color: var(--c-ink);
}
.i-forbes__intro {
  max-width: 40ch;
  margin: calc(32 * var(--fp)) 0 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--i-lead);
  line-height: 1.5;
}

/* Assinatura da coluna */
.i-byline {
  grid-column: 9 / 13;
  display: flex;
  align-items: flex-end;
  gap: calc(24 * var(--fp));
}
.i-byline__photo {
  flex: none;
  width: max(72px, calc(104 * var(--fp)));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-graphite);
}
.i-byline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* insights/iona-byline.webp (06/11/2026): já recortada do rosto ao peito */
  object-position: 50% 50%;
}
.i-byline__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: max(18px, calc(22 * var(--fp)));
  font-weight: 500;
  letter-spacing: -0.02em;
}
.i-byline__role {
  margin: 4px 0 14px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 14px;
}
.i-byline .i-link {
  font-size: 14px;
}

/* Filtro (por ano em "Na Forbes", desde 04/11/2026; por tema na página com
   todos os artigos): o desenho do índice da T3 (página de palestras, versão
   de teste) — o escolhido aceso, com o quadrado vermelho; os outros, cinza */
.i-filter {
  display: none;
}
.js .i-filter {
  display: flex;
  align-items: baseline;
  gap: calc(40 * var(--fp));
  margin: max(56px, calc(104 * var(--fp))) var(--pad) 0;
  padding: calc(28 * var(--fp)) 0;
  border-top: 1px solid var(--i-rule);
  border-bottom: 1px solid var(--i-rule);
}
.i-filter__label {
  flex: none;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.i-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px calc(32 * var(--fp));
}
.i-chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: max(16px, calc(20 * var(--fp)));
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: color 0.3s ease, padding 0.5s var(--ease-osmo);
}
.i-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  background: var(--c-red);
  transform: scale(0);
  transition: transform 0.5s var(--ease-osmo);
}
.i-chip[aria-pressed="true"] {
  padding-left: 17px;
  color: var(--c-ink);
}
.i-chip[aria-pressed="true"]::before {
  transform: scale(1);
}
.i-chip__n {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  translate: 0 -0.6em;
}
@media (hover: hover) and (pointer: fine) {
  .i-chip:hover {
    color: var(--c-ink);
  }
}
.i-chip:focus-visible {
  outline-offset: 2px;
}

/* Anos: o ano fica fixo à esquerda (colunas 1–4) enquanto as colunas
   daquele ano passam à direita (5–12) */
.i-forbes__list {
  padding: 0 var(--pad) var(--i-py);
}
.i-year {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--i-gap);
  padding-top: max(48px, calc(88 * var(--fp)));
}
.i-year[hidden] {
  display: none;
}
.i-year__head {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(40 * var(--fp));
  padding-top: calc(22 * var(--fp));
}
.i-year__num {
  margin: 0 0 0 -0.04em;
  color: var(--c-red);
  font-family: var(--font-display);
  font-size: max(56px, calc(120 * var(--fp)));
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.i-year__num .rv-line-mask {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.i-year__count {
  margin: calc(18 * var(--fp)) 0 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 14px;
}
.i-year__list {
  grid-column: 5 / 13;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--i-rule);
}

/* Uma coluna: mês | título, contexto e temas | "Ler na Forbes" */
.i-post {
  position: relative;
  display: grid;
  grid-template-columns: calc(120 * var(--fp)) minmax(0, 1fr) auto;
  column-gap: var(--i-gap);
  align-items: start;
  padding: calc(32 * var(--fp)) 0 calc(36 * var(--fp));
}
.i-post[hidden] {
  display: none;
}
/* Linha de cima (--rule animada pelo reveal.js) */
.i-post::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--i-rule);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}
.i-post.is-flash {
  animation: i-flash 1.8s ease;
}
@keyframes i-flash {
  0%,
  35% {
    background-color: var(--c-cream);
  }
  100% {
    background-color: transparent;
  }
}
.i-post__month {
  padding-top: 0.7em;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.i-post__body {
  min-width: 0;
  transition: translate 0.6s var(--ease-osmo);
}
.i-post__title {
  max-width: 32ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(20px, calc(28 * var(--fp)));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  transition: color 0.4s ease;
}
.i-post__link {
  color: inherit;
  text-decoration: none;
}
.i-post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.i-post__link:focus-visible {
  outline: none;
}
.i-post:has(.i-post__link:focus-visible) {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}
.i-post__text {
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: max(15px, calc(16 * var(--fp)));
  line-height: 1.5;
}
.i-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.i-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.i-tags li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--c-red);
}
.i-post__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 0.55em;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.i-post__arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.5s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .i-post:hover .i-post__body {
    translate: calc(16 * var(--fp)) 0;
  }
  .i-post:hover :is(.i-post__title, .i-post__cta) {
    color: var(--c-red);
  }
  .i-post:hover .i-post__arrow {
    transform: translate(3px, -3px);
  }
}

/* "Ver mais": o botão com contorno do site (.btn), na coluna das listas */
.i-more {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--i-gap);
  margin-top: calc(40 * var(--fp));
}
.i-more[hidden] {
  display: none;
}
.btn.i-more__btn {
  grid-column: 5 / 13;
  justify-content: space-between;
  min-height: max(56px, calc(72 * var(--fp)));
  padding: 0 calc(28 * var(--fp));
  font-size: max(15px, calc(17 * var(--fp)));
  cursor: pointer;
  background: none;
}
.i-more__icon {
  width: 18px;
  height: 18px;
}
.i-more__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* ==========================================================================
   I5 · Leve uma dessas questões para sua organização
   O B6 da página Sobre (.b-close / .b-panel), com o prefixo .i-: os dois
   blocos com a mesma largura, metade e metade, como na página Sobre
   (04/11/2026, a pedido; antes, o principal com 7 de 12 colunas).
   ========================================================================== */
.i-close {
  padding-top: calc(var(--i-py) * 0.6);
  background: var(--c-white);
  color: var(--c-ink);
}
.i-close .i-display {
  max-width: 20ch;
}
.i-close__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: max(64px, calc(120 * var(--fp)));
}
.i-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;
}
.i-panel--wine {
  --word: var(--c-blue);
  background: var(--c-wine);
}
.i-panel--red {
  --word: var(--c-lime);
  background: var(--c-red);
}
/* Rótulo do CTA: Plus Jakarta 500. Com os blocos metade e metade,
   "Conheça as formas de trabalhar" quebra em duas linhas: a seta acompanha
   a última palavra (como na S9 da página de serviços), em vez de ficar
   solta à direita */
.i-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;
}
.i-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);
}
.i-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);
}
.i-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) {
  .i-panel:hover .i-panel__word {
    translate: calc(var(--pad) + 55 * var(--fp) - 0.04em) 0;
  }
  .i-panel:hover .i-panel__label {
    background-size: 100% 1px;
  }
  .i-panel:hover .i-panel__arrow {
    transform: translate(4px, -4px);
  }
}
.i-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, insights.js)
   ========================================================================== */
.page-insights .whatsapp__dot {
  color: var(--c-wine);
  transition: transform 0.5s var(--ease-osmo), background-color 0.3s ease, color 0.3s ease;
}
.page-insights .whatsapp.is-on-dark .whatsapp__dot {
  color: var(--c-cream);
}
@media (hover: hover) and (pointer: fine) {
  .page-insights .whatsapp:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(93, 15, 13, 0.08);
  }
  .page-insights .whatsapp.is-on-dark:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(255, 255, 255, 0.14);
  }
}
.page-insights .whatsapp:focus-visible .whatsapp__dot {
  outline-color: var(--c-wine);
}
.page-insights .whatsapp.is-on-dark:focus-visible .whatsapp__dot {
  outline-color: var(--c-cream);
}

/* ==========================================================================
   Tablet (768–1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .i-head > .i-display,
  .i-head__main,
  .i-head__text {
    grid-column: 1 / -1;
  }
  .i-head__text {
    max-width: 40em;
    margin-top: 28px;
  }
  /* I1 e I2 (segunda versão): a cabeça da Última publicação empilha, como as outras */
  .i-head--latest .i-head__text {
    grid-column: 1 / -1;
  }
  .i-feature {
    column-gap: calc(48 * var(--fp));
  }

  .i-ideas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .i-idea {
    padding: 32px var(--pad);
  }
  .i-idea__word {
    font-size: 15vw;
  }

  .i-byline {
    grid-column: 1 / -1;
    margin-top: 40px;
  }

  /* Ano em cima da lista, sem ficar fixo */
  .i-year {
    padding-top: 56px;
  }
  .i-year__head {
    grid-column: 1 / -1;
    position: static;
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 0 0 20px;
  }
  .i-year__count {
    margin: 0;
  }
  .i-year__list {
    grid-column: 1 / -1;
  }
  .i-post {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }
  .btn.i-more__btn {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Celular (até 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .page-insights {
    --i-py: 96px;
    --i-gap: 16px;
  }
  /* I1: foto mais alta que larga, título menor; na faixa, o texto em cima e o botão embaixo */
  .i-hero__media {
    height: clamp(440px, 72svh, 620px);
  }
  /* o título desce para a base da foto (no alto, ficaria sobre a pessoa), com
     uma sombra mais forte embaixo para a leitura */
  .i-hero__media::after {
    background:
      linear-gradient(180deg, rgba(7, 0, 0, 0.42) 0, rgba(7, 0, 0, 0) 22%),
      linear-gradient(0deg, rgba(7, 0, 0, 0.62) 0, rgba(7, 0, 0, 0) 52%);
  }
  .i-hero__title {
    top: auto;
    bottom: 56px;
    font-size: 36px;
    line-height: 1.2;
  }
  .i-hero__dots {
    bottom: 14px;
  }
  .i-hero__band {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    min-height: 0;
    padding: 28px var(--pad) 32px;
  }
  .i-slide {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 12px;
  }
  .i-slide__count {
    padding-top: 6px;
    font-size: 14px;
  }
  .i-slide__body {
    padding-left: 0;
  }
  .i-slide__title {
    font-size: 22px;
  }
  .btn.i-hero__btn {
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
  }

  /* I2: a imagem na largura toda, o texto embaixo */
  .i-feature {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  .i-feature__body {
    padding-inline: var(--pad);
  }
  .i-feature__title {
    font-size: 30px;
  }
  .i-feature__cta {
    padding-right: 4px;
  }

  .i-ideas__grid {
    grid-template-columns: 1fr;
  }
  .i-idea {
    aspect-ratio: auto;
    min-height: 380px;
    padding: 28px var(--pad);
  }
  .i-idea__title {
    margin-top: 28px;
  }
  .i-idea__word {
    font-size: clamp(96px, 28vw, 168px);
  }
  .btn.i-ideas__btn {
    justify-content: space-between;
    width: 100%;
  }

  .i-byline {
    margin-top: 32px;
  }

  .js .i-filter {
    flex-direction: column;
    gap: 14px;
    margin-top: 48px;
    padding: 20px 0;
  }
  .i-filter__list {
    gap: 6px 20px;
  }

  .i-year__num {
    font-size: 56px;
  }
  .i-post {
    grid-template-columns: minmax(0, 1fr) 18px;
    row-gap: 10px;
    padding: 22px 0 26px;
  }
  .i-post__month {
    grid-column: 1;
    padding-top: 0;
  }
  .i-post__body {
    grid-column: 1;
  }
  .i-post__cta {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 22px;
    color: var(--c-red);
    font-size: 0; /* só a seta no celular */
  }
  .i-post__arrow {
    width: 16px;
    height: 16px;
  }

  .i-close__panels {
    grid-template-columns: 1fr;
  }
  .i-panel {
    min-height: 260px;
  }
  .i-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) {
  .i-hero__pip,
  .i-feature__title,
  .i-feature__cta,
  .i-feature__cta::after,
  .i-feature__label,
  .i-feature__arrow,
  .i-idea__word,
  .i-idea__label,
  .i-idea__arrow,
  .i-chip,
  .i-chip::before,
  .i-post__body,
  .i-post__title,
  .i-post__cta,
  .i-post__arrow,
  .i-panel__word,
  .i-panel__label,
  .i-panel__arrow {
    transition: none;
  }
  .i-post.is-flash {
    animation: none;
  }
}

/* Celular (12/11/2026, a pedido): em "Ideias e perguntas", só os três textos
   mais recentes; os outros ficam na página com todos os artigos (botão "Ver
   todos os artigos", logo abaixo). As cores dos três primeiros (azul, creme,
   verde-limão) continuam sem repetir. */
@media (max-width: 767px) {
  .i-ideas__grid > .i-idea:nth-child(n + 4) {
    display: none;
  }
}