/* ============================================================================
   INSTITUIÇÕES — página corporativa (escolas, psicólogos, redes, RH)
   Tokens, tipografia e componentes vêm de styles.css. Aqui só o que é
   próprio desta página. Regra do DS: neutros em 90% da tela, cor RIASEC
   apenas como diferenciador de tipo. Nada de gradiente decorativo.
   ========================================================================== */

/* ---------- primitivas locais ---------- */
.ip-sec        { padding: 104px var(--gutter); display: flex; flex-direction: column; align-items: center; }
.ip-sec--claro { background: var(--paper); }
.ip-sec--f5    { background: var(--paper-f5); }
.ip-sec--escuro{ background: var(--ink-deep); }
.ip-in         { width: var(--content); max-width: 100%; }

.ip-head        { max-width: 720px; }
/* quando a seção abaixo é simétrica (a linha do tempo), o cabeçalho
   alinhado à esquerda deixava o bloco torto: centraliza junto.
   text-align sozinho não bastava: o .lede carrega max-width:640px própria,
   então a CAIXA dele continuava encostada à esquerda dos 720px e só o texto
   dentro dela é que centralizava. Os filhos precisam de margin auto. */
.ip-head--centro { max-width: 720px; margin-inline: auto; text-align: center; }
.ip-head--centro > * { margin-inline: auto; }
.ip-head h2     { margin-top: 11px; }
.ip-head .lede  { margin-top: 18px; }
.ip-sec--escuro .ip-head h2 { color: var(--paper-fa); }
.ip-sec--escuro .ip-head .lede { color: var(--text-grey-a1); }

/* ---------- 1 · abertura ---------- */
.ip-hero {
  background: var(--ink);
  padding: 156px var(--gutter) 96px;
  display: flex; flex-direction: column; align-items: center;
}
.ip-hero__in { width: var(--content); max-width: 100%; }
.ip-hero__t  { margin-top: 12px; color: var(--paper-fa); max-width: 15ch; }
.ip-hero__l  { margin-top: 26px; font-size: 15.2px; line-height: 1.58; color: var(--text-grey-a1); max-width: 560px; }
.ip-hero__cta{ margin-top: 34px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* faixa de números que fecha a abertura */
.ip-hero__nums {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid rgba(250,250,250,.1);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.ip-num strong { display: block; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--paper-fa); }
.ip-num span   { display: block; margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--text-grey-a3); }

/* ---------- 2 · três perfis ---------- */
/* Moldura + cards do sistema claro, o mesmo de .pr-regras__grade/.pr-regra:
   fundo --paper-f2 com 8px de respiro por dentro, cards --paper-fa em r8 e
   o levantar de 4px no hover. A borda de 1px e a faixa de cor no topo
   saíram: quem separa um card do outro é a moldura, e o tipo já vem dito
   pelo ícone e pelos marcadores, ambos na cor do perfil. */
.ip-perfis {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 8px;
  background: var(--paper-f2); border-radius: var(--radius-16);
}
.ip-perfil {
  background: var(--paper-fa); border-radius: var(--radius-8);
  padding: 28px 24px 24px; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ip-perfil:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 12, 12, .08); }
.ip-perfil__ico {
  width: 38px; height: 38px; border-radius: var(--radius-8);
  display: grid; place-items: center; font-size: 19px;
  color: var(--tom); background: color-mix(in srgb, var(--tom) 9%, transparent);
}
.ip-perfil__t { margin-top: 18px; font-family: var(--display); font-size: 21px; line-height: 1.1; color: var(--ink); }
.ip-perfil__d { margin-top: 11px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); flex: 1; }
.ip-perfil__li { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7e7ea; display: flex; flex-direction: column; gap: 8px; }
.ip-perfil__li span { position: relative; padding-left: 17px; font-size: 13.2px; line-height: 1.5; color: var(--text-secondary); }
.ip-perfil__li span::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--tom);
}

/* CARTÃO PADRÃO DARK MODE em #tempo (orientadores.html) — pedido do
   Márcio, 11/09/2026: depois que a seção virou escura, os dois cartões de
   comparação também viram a versão escura do sistema (mesma receita de
   .ip-preco__in em /instituicoes: --card-escuro + o anel de 1px, sem fio
   de acento — a linha verde do "Com a Loomty" saiu do HTML). Escopado a
   .or-comparar porque .ip-perfil é a MESMA classe que /instituicoes e
   /professores usam em seções claras — sem o escopo, esta regra escureceria
   os cartões delas também. */
/* a MOLDURA (o container .ip-perfis, com o padding de 8px que separa os
   dois cartões) tinha ficado clara — var(--paper-f2), fixo — mesmo depois
   dos cartões escurecerem. É outra classe (.ip-perfis, plural, o grid;
   .ip-perfil, singular, é o cartão) e passou batido no primeiro
   levantamento. Mesmo par de tokens que .ip-preco/.delivers__cards usam:
   --card-escuro-moldura é o escuro de --paper-f2. Achado ao olhar o
   resultado publicado, 11/09/2026. */
.or-comparar { background: var(--card-escuro-moldura); }
.or-comparar .ip-perfil {
  background: var(--card-escuro);
  box-shadow: var(--card-escuro-anel);
}
.or-comparar .ip-perfil__t { color: var(--paper-fa); }
.or-comparar .ip-perfil__li { border-top-color: rgba(255, 255, 255, .09); }
.or-comparar .ip-perfil__li span { color: var(--text-grey-a1); }

/* O BRILHO DA HERO, ATRÁS DOS DOIS CARTÕES DE #tempo — pedido do Márcio,
   11/09/2026. Mesmo .palco__brilho/.palco__nucleo já portados para /sobre
   (ver comentário lá): duas camadas de espectro cônico desfocado, giradas
   por assets/js/brilho.js. .or-comparar precisa ficar ACIMA do brilho
   (z-index), senão o espectro pinta por cima dos cartões. */
.or-comparar-palco { position: relative; }
.or-comparar-palco > .or-comparar { position: relative; z-index: 1; }

/* ---------- 3 · fluxo da operação ----------
   Mesma linha do tempo de .tl (ultima-etapa.css), transposta para
   superfície clara: lá os nós são escuros sobre fundo escuro, com anel
   claro; aqui são escuros sobre papel, que é o que mantém o contraste do
   trilho colorido passando por trás deles. O nó precisa ser opaco, senão
   o trilho o atravessa. */
.ip-fluxo {
  position: relative;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  list-style: none;
  padding: 0;
}

/* O invólucro existe só para o trilho ter de onde se posicionar. Ele é um
   elemento de verdade, e não o ::after de antes, porque o GSAP não anima
   pseudo-elemento — e a sincronia com as bolinhas é feita no GSAP. */
.ip-linha { position: relative; margin-top: 52px; }

/* Trilho: só o preenchimento no espectro da marca, de centro de nó a centro
   de nó. 120px são os três vãos de 40px. */
.ip-linha__trilho {
  position: absolute;
  top: 20px;
  left: calc((100% - 120px) / 8);
  right: calc((100% - 120px) / 8);
  height: 3px;
  border-radius: 2px;
  background: var(--espectro);
  transform-origin: left;
}

.ip-passo {
  position: relative;
  z-index: 1;              /* o trilho é gerado depois dos <li> */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.ip-passo__no {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-fa);
  box-shadow: inset 0 0 0 1.5px rgba(12, 12, 12, .18);
}
.ip-passo__num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
}

/* O passo em que a operação desemboca */
.is-fim .ip-passo__no {
  background: var(--orange);
  box-shadow: inset 0 0 0 1.5px var(--orange);
  animation: ip-anel 2.6s ease-out 1.2s infinite;
}
@keyframes ip-anel {
  0%       { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 0 rgba(204, 51, 0, .38); }
  55%,100% { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 16px rgba(204, 51, 0, 0); }
}

.ip-passo__r {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-grey);
}
.is-fim .ip-passo__r { color: var(--orange); }

.ip-passo__t {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}

.ip-passo__d {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 26ch;
}

/* ---------- 4 · nível administrador ---------- */
/* ---------- as duas telas administrativas, em seção escura ----------
   O componente é o mesmo da home (.telas, em styles.css) e foi construído
   para o fundo CLARO da seção .admin: os títulos das legendas usam
   --ink-deep e o corpo usa --text-grey, que aqui sairiam pretos no preto.
   Só a cor é reancorada; geometria, foco em par e rolagem seguem sendo os
   do styles.css, sem cópia. */
.telas--escuro { margin-top: 44px; }
.telas--escuro .tela__nome { color: var(--paper-fa); }
.telas--escuro .tela__txt  { color: var(--text-grey-a1); }

/* ---------- uma tela só, sem coluna de legendas (.telas--solo) ----------
   Aqui cada seção mostra UMA tela, e quem explica é o texto da própria
   seção — os KPIs e os seis recursos embaixo do painel, a lista de marca
   própria ao lado do relatório. A coluna de legendas do componente
   original ficaria repetindo o que já está escrito ao redor.

   Sem o par, a tela ocupa o palco inteiro, e é isso que obriga a recalcular
   --cab: ele é a altura do cabeçalho em % da ALTURA da tela, e a tela
   deixou de ser uma fração do palco para virar o palco. A conta continua
   sendo a mesma do styles.css — --cab = --cab-w × (largura ÷ altura) — só
   que agora a razão é a do próprio palco, declarada em --razao ao lado do
   aspect-ratio. Mantive as duas juntas de propósito: separá-las é como o
   --cab do relatório tinha ficado errado antes.

   Fica em @media (min-width: 769px) porque abaixo disso o responsive.css
   já reempilha .tela (position:relative, aspect-ratio 3/2) com um --cab
   próprio; sem a media query, a especificidade daqui venceria a de lá e
   quebraria justamente o mobile. */
@media (min-width: 769px) {
  .telas--solo { grid-template-columns: 1fr; }
  .telas--solo .telas__palco { aspect-ratio: var(--janela); }
  .telas--solo .tela { inset: 0; width: 100%; height: 100%; }
  .telas--solo .tela--painel,
  .telas--solo .tela--relatorio { --cab: calc(var(--cab-w) * var(--razao)); }

  /* a tela em foco não amplia: com ela ocupando o palco inteiro, os 12%
     de escala vazariam para fora e seriam cortados pela seção. O que
     marca o foco aqui é a sombra e a rolagem que se abre. */
  .telas--solo.telas[data-foco] .tela { transform: none; }
}

/* a janela larga mostra cabeçalho, indicadores e o começo dos gráficos;
   a alta cabe na coluna estreita do bloco de marca própria */
.telas--larga { --janela: 16 / 9; --razao: 1.777778; }
.telas--alta  { --janela: 4 / 3;  --razao: 1.333333; }

/* o par em foco: no claro o corpo escurece para --text-secondary; no
   escuro o caminho é o inverso, ele clareia até o branco do papel */
.telas--escuro.telas[data-foco="painel"] .tela__info[data-par="painel"] .tela__txt,
.telas--escuro.telas[data-foco="conta"]  .tela__info[data-par="conta"]  .tela__txt {
  color: var(--paper-fa);
}

/* a sombra do sistema é preta sobre papel e some no fundo escuro; aqui
   quem separa a tela do fundo é um anel claro, o mesmo recurso dos cards
   escuros do DS */
.telas--escuro .tela {
  border-color: rgba(250, 250, 250, .14);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75);
}
.telas--escuro.telas[data-foco="painel"] .tela--painel,
.telas--escuro.telas[data-foco="conta"]  .tela--relatorio {
  box-shadow: 0 44px 90px -24px rgba(0, 0, 0, .8),
              0 0 0 1px rgba(250, 250, 250, .22);
}

/* KPI em CSS puro, reproduzindo o cartão do admin */
/* Os KPIs vivem em seção escura, então usam o cartão escuro do sistema
   (--card-escuro-*), o mesmo de .deliver. Antes eram cards brancos, o que
   competia com a captura do painel logo acima em vez de apoiá-la. */
.ip-kpis {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 8px;
  background: var(--card-escuro-moldura); border-radius: var(--radius-16);
}
.ip-kpi {
  background: var(--card-escuro); border-radius: var(--radius-8);
  padding: 20px 20px 18px;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.ip-kpi:hover { transform: translateY(-4px); background: var(--card-escuro-hover); box-shadow: var(--card-escuro-anel); }
.ip-kpi__l { font-family: var(--mono); font-size: 9.6px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-grey-a3); }
.ip-kpi__v { margin-top: 10px; font-family: var(--display); font-size: 29px; line-height: 1; color: var(--paper-fa); }
.ip-kpi__d { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--text-grey-a1); }
.ip-kpi__d b { color: #00bb60; font-weight: 700; }

/* Os seis recursos eram o ÚNICO grupo da página sem cartão: texto solto
   sobre a seção, ao lado de quatro grupos que seguem todos a mesma receita
   — moldura de 8px, cartão em r8, levantar de 4px no hover (.ip-perfis,
   .ip-kpis, .ip-gov e o cartão da licença). Normalizados, usam a receita
   dos KPIs logo acima: cartão escuro do sistema na moldura mais funda, que
   é a escada certa para a seção escura em que os dois vivem. */
.ip-recursos {
  margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 8px;
  background: var(--card-escuro-moldura); border-radius: var(--radius-16);
}
.ip-rec {
  background: var(--card-escuro); border-radius: var(--radius-8);
  padding: 24px 22px 22px;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.ip-rec:hover {
  transform: translateY(-4px);
  background: var(--card-escuro-hover);
  box-shadow: var(--card-escuro-anel);
}
.ip-rec__n { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--tom, var(--orange)); }
.ip-rec__t { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.ip-rec__d { margin-top: 7px; font-size: 13.4px; line-height: 1.62; color: var(--text-secondary); }

/* ---------- 5 · marca própria ---------- */
/* minmax(0, …) e não 1fr puro: o mínimo automático de uma trilha de grid é o
   min-content do que está dentro dela, então uma coluna `1fr` cresce até caber
   a linha mais larga da lista em vez de quebrar o texto. Numa tela de 320px a
   trilha ia a 343px e empurrava a página inteira para o lado. O zero no mínimo
   devolve à trilha o direito de encolher. (12/09/2026) */
.ip-duo { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.ip-lista { display: flex; flex-direction: column; gap: 18px; }
.ip-item__t { font-size: 15px; font-weight: 700; color: var(--paper-fa); }
.ip-item__d { margin-top: 6px; font-size: 13.6px; line-height: 1.62; color: var(--text-grey-a1); }
/* INVERSÃO DE SEÇÃO — pedido do Márcio, 11/09/2026 (orientadores.html, de
   #relatorio em diante). .ip-item__t/__d nasceram só para fundo escuro (as
   duas ocorrências anteriores a hoje eram sempre dentro de .ip-sec--escuro);
   agora #relatorio virou claro e a lista "O que tem dentro" precisa da
   leitura oposta. A REGRA de baixo cobre a exceção: dentro de um cartão que
   é SEMPRE escuro por natureza (.or-cartao, ex.: .or-limites em #plano), o
   texto tem que continuar claro mesmo quando a seção ao redor virou clara —
   senão vira texto escuro sobre cartão escuro. */
.ip-sec--claro .ip-item__t,
.ip-sec--f5 .ip-item__t { color: var(--ink); }
.ip-sec--claro .ip-item__d,
.ip-sec--f5 .ip-item__d { color: var(--text-secondary); }
.ip-sec--claro .or-cartao .ip-item__t,
.ip-sec--f5 .or-cartao .ip-item__t { color: var(--paper-fa); }
.ip-sec--claro .or-cartao .ip-item__d,
.ip-sec--f5 .or-cartao .ip-item__d { color: var(--text-grey-a1); }

/* ---------- 5.1 · licença institucional ----------
   A tabela que o conteúdo novo trouxe para esta seção: o cartão escuro do
   sistema (--card-escuro-*), o mesmo dos KPIs.

   Ele vive DENTRO da coluna de texto, não numa banda de largura cheia: em
   1264px a banda virava um bloco mais largo que a captura do relatório ao
   lado e roubava a cena dela. Na coluna ele fica do tamanho do cartão do
   site novo, ao lado do título, que é onde a composição o põe.

   Nasceu com moldura de 8px + fio de acento de 3px (como .ip-perfil--acento
   leva na página do orientador) — 11/09/2026 isso virou o cartão PADRÃO
   dark mode, sem acento; ver o comentário logo abaixo. */
.ip-preco { margin-top: 34px; }
/* CARTÃO PADRÃO DARK MODE — pedido do Márcio, 11/09/2026. Antes este cartão
   tinha um tratamento próprio: moldura de 8px + fio de acento de 3px em
   #3377ee, cor escolhida à mão porque o azul real do DS (#0044aa) apagava
   sobre este fundo (ver comentário antigo, removido daqui). Isso destoava
   do padrão que o resto do site usa para cartão escuro sem-destaque —
   `.or-cartao` (portas.css) e `.cartao` do site novo (loomty.css): fundo
   --card-escuro, raio 8px, e só um anel de 1px (`--card-escuro-anel`) pra
   dizer onde o cartão começa. Mesma receita aqui, sem o fio colorido. */
.ip-preco__in {
  background: var(--card-escuro); border-radius: var(--radius-8);
  box-shadow: var(--card-escuro-anel);
  padding: 30px 28px 28px;
}
/* o valor e a unidade na MESMA linha de base, como no cartão do site novo:
   o preço é uma informação só, quebrá-la em duas linhas a transforma em
   duas. */
.ip-preco__v {
  margin-top: 12px;
  font-family: var(--display); font-size: 42px; line-height: 1;
  color: var(--paper-fa);
}
.ip-preco__v span {
  margin-left: 4px;
  font-family: var(--sans); font-size: 13.6px; font-weight: 600;
  color: var(--text-grey-a1);
}
/* traço de 12px, não bolinha: é o marcador que o cartão de preço usa no
   site novo (.tracos), e o que separa uma lista de condições de uma lista
   de recursos, que é a que leva bolinha nos perfis desta página. */
.ip-preco__li {
  margin: 22px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px;
}
.ip-preco__li li {
  position: relative; padding-left: 22px;
  font-size: 13.8px; line-height: 1.6; color: var(--text-grey-a1);
}
.ip-preco__li li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 12px; height: 1.5px; background: var(--orange);
}
/* INVERSÃO DE SEÇÃO — #plano (orientadores.html) virou claro, 11/09/2026.
   Esta lista (.or-plano__li) não mora dentro do cartão .ip-preco__in — fica
   direto no fundo da seção —, então segue a cor DA SEÇÃO, diferente da
   lista irmã em /instituicoes (que é sempre escura, dentro do cartão, e não
   deve mudar). O marcador já é --orange, funciona nos dois fundos, sem
   sobrescrever aqui. */
.ip-sec--claro .or-plano__li li,
.ip-sec--f5 .or-plano__li li { color: var(--text-secondary); }
/* .ip-preco__li b é --paper-fa (branco) fixo — certo para o cartão sempre
   escuro de /instituicoes, invisível quase aqui, onde a lista está direto
   no fundo agora claro. Achado ao olhar o resultado, não no levantamento
   original: o <b> teria ficado cinza-claro sobre branco. */
.ip-sec--claro .or-plano__li b,
.ip-sec--f5 .or-plano__li b { color: var(--ink); }
/* Esta regra existia para o traço da lista casar com o fio de acento do
   topo do cartão (#3377ee) — agora que o cartão é o padrão dark mode, sem
   fio colorido, o marcador volta a valer a regra geral acima
   (`.ip-preco__li li::before`), que já usa --orange. Nada a sobrescrever
   aqui dentro do cartão. */
.ip-preco__li b { color: var(--paper-fa); font-weight: 700; }
.ip-preco__acao { margin-top: 28px; }

/* Com o cartão na coluna da direita ela ficou mais alta que a captura do
   relatório; centrar deixaria a imagem flutuando no meio de um vão. As duas
   colunas desta seção passam a alinhar pelo topo. */
.ip-duo--marca { align-items: start; }

/* ---------- 6 · governança ---------- */
.ip-gov {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 8px;
  background: var(--paper-f2); border-radius: var(--radius-16);
}
.ip-card {
  background: var(--paper-fa); border-radius: var(--radius-8);
  padding: 24px 22px 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ip-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 12, 12, .08); }
.ip-card__ico { font-size: 20px; color: var(--tom, var(--ink)); }
.ip-card__t { margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ip-card__d { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- 7 · CTA ---------- */
.ip-cta { background: var(--ink); padding: 96px var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
.ip-cta h2 { color: var(--paper-fa); max-width: 20ch; }
.ip-cta p  { margin-top: 18px; font-size: 14.6px; line-height: 1.6; color: var(--text-grey-a1); max-width: 520px; }
/* o rotulo tambem e um <p>, e '.ip-cta p' (0,1,1) vence '.eyebrow' (0,1,0)
   por especificidade — o laranja padrao (--orange) virava cinza sem
   ninguem pedir isso. Devolve a cor que todo outro rotulo desta pagina
   usa. Pedido do Márcio, 11/09/2026. */
.ip-cta .eyebrow { color: var(--orange); }

/* .ip-cta--claro — variante clara, só para o fecho de orientadores.html
   (pedido do Márcio, 11/09/2026: inverter #relatorio→#plano→CTA). Classe
   NOVA, não um redesenho de .ip-cta: professores.html e instituicoes.html
   também usam .ip-cta e continuam escuros, sem essa classe. O botão sólido
   troca de HTML (.btn--light → .btn--dark, direto na página) porque branco
   sobre branco não é uma questão de CSS — não existe cor de texto que
   salve um botão da MESMA cor do fundo. */
.ip-cta--claro { background: var(--paper-f5); color: var(--ink); }
.ip-cta--claro h2 { color: var(--ink); }
.ip-cta--claro p  { color: var(--text-secondary); }

/* .btn--ghost em fundo claro — usado aqui no CTA (.ip-cta--claro) e em
   #plano (.ip-sec--claro), as duas seções que a inversão de 11/09/2026
   virou claras nesta página. O contorno padrão é var(--paper-fa) a 15%,
   que soma quase zero de contraste sobre var(--paper); esta versão troca a
   base para var(--ink), mesma receita (1px, 15%). Nenhuma outra seção do
   site combina .btn--ghost com ip-sec--claro/f5 hoje — checado antes de
   escrever esta regra —, então não há risco de puxar essa cor para um
   lugar que já funcionava. */
.ip-sec--claro .btn--ghost,
.ip-sec--f5 .btn--ghost,
.ip-cta--claro .btn--ghost {
  border-color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 15%, transparent);
  color: var(--ink);
}
.ip-sec--claro .btn--ghost:hover,
.ip-sec--f5 .btn--ghost:hover,
.ip-cta--claro .btn--ghost:hover { background: var(--ink); color: var(--paper-fa); }
.ip-cta__acoes { margin-top: 32px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .ip-perfis, .ip-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Na vertical o trilho não pode ser uma barra só: os passos têm alturas
     diferentes e ela ultrapassaria o último nó. Cada passo carrega o próprio
     segmento, com a fatia do espectro que lhe cabe. */
  .ip-fluxo { grid-template-columns: 1fr; gap: 28px; }
  .ip-linha__trilho { display: none; }
  .ip-passo {
    display: grid; grid-template-columns: 44px 1fr;
    align-items: start; text-align: left; column-gap: 18px; row-gap: 3px;
  }
  .ip-passo__no { grid-row: 1 / span 3; margin-bottom: 0; }
  .ip-passo__d { max-width: none; }
  .ip-passo:not(:last-child)::before {
    content: ""; position: absolute; left: 20.5px; top: 44px; bottom: -28px; width: 3px;
    border-radius: 2px;
  }
  .ip-passo:nth-of-type(1)::before { background: linear-gradient(180deg, #cc3300, #cccc00); }
  .ip-passo:nth-of-type(2)::before { background: linear-gradient(180deg, #cccc00, #007a40); }
  .ip-passo:nth-of-type(3)::before { background: linear-gradient(180deg, #007a40, #6600aa); }
  .ip-gov, .ip-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  .ip-sec { padding: 72px var(--gutter); }
  .ip-hero { padding: 128px var(--gutter) 72px; }
  .ip-hero__t { max-width: none; }
  .ip-hero__nums { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; margin-top: 46px; }
  .ip-num strong { font-size: 27px; }
  .ip-perfis, .ip-recursos, .ip-gov, .ip-kpis { grid-template-columns: 1fr; }
  .ip-cta { padding: 72px var(--gutter); }
  .ip-cta__acoes .btn { width: 100%; }
  .ip-preco__in { padding: 26px 22px 24px; }
  .ip-preco__v { font-size: 36px; }
  .ip-preco__v span { display: block; margin: 8px 0 0; }
  .ip-preco__acao .btn { width: 100%; }
}

/* A captura do relatório é retrato alto (1300×3244). Emoldurada ao lado do
   texto ela viraria uma coluna infinita, então mostra só o topo, que é onde
   mora o perfil e a abertura da leitura da Iara. */

/* O body do site nasce com color #fafafa, porque a home é escura. Toda seção
   clara precisa reancorar a cor de texto, senão o título sai branco no
   branco. Bug de contraste real, não estético. */
.ip-sec--claro,
.ip-sec--f5 { color: var(--ink); }

.ip-sec--claro h2,
.ip-sec--f5 h2,
.ip-sec--claro h3,
.ip-sec--f5 h3 { color: var(--ink); }

/* 15ch quebrava o título da abertura em quatro linhas curtas e magras.
   Em 22ch ele fecha em duas ou três, com a mancha que o display pede. */
.ip-hero__t { max-width: 22ch; }

/* Mesma armadilha do contraste, ao contrário: a grade de recursos vive na
   seção escura, então o título não pode herdar --ink. */
.ip-sec--escuro .ip-rec__t { color: var(--paper-fa); }
.ip-sec--escuro .ip-rec__d { color: var(--text-grey-a1); }

/* A captura do painel tem 2576px de altura. Inteira ela vira um bloco que
   sozinho ocupa três dobras e empurra o resto da página para longe. Mostra
   o topo, que é onde estão os indicadores, o gráfico e o funil, e deixa o
   detalhe fino para quem entra no produto. */


/* .lede e .eyebrow são globais e nasceram para fundo escuro: #a3a3a3 e
   #ff6633. Sobre branco isso dá 2,3:1 e 2,9:1, abaixo de qualquer piso de
   leitura. Nas seções claras eles voltam para os tons de texto sobre papel.
   A escura fica como está, que é onde os valores originais funcionam. */
.ip-sec--claro .lede,
.ip-sec--f5 .lede { color: var(--text-secondary); }

.ip-sec--claro .eyebrow,
.ip-sec--f5 .eyebrow { color: var(--orange); }

/* O rótulo do KPI copia o --text-3 do admin (#a1a1aa), que lá vive em
   tabela densa. Em página de venda ele precisa de mais peso de leitura. */
.ip-kpi__l { color: #71717a; }

/* quem pediu silêncio: o anel do último nó e o trilho param */
@media (prefers-reduced-motion: reduce) {
  .is-fim .ip-passo__no { animation: none; }
  .ip-linha__trilho { transform: scaleX(1); }
}