/* ==========================================================================
   AS PORTAS DO "PARA QUEM" — /professores e /orientadores
   --------------------------------------------------------------------------
   As duas páginas são compostas com os componentes .ip-* de
   instituicoes.css, que é a folha desta família: as três portas da
   bifurcação de /para-quem falam o mesmo vocabulário visual — herói escuro,
   moldura de 8px com cards em r8, linha do tempo de quatro nós, componente
   .telas para as capturas, cartão escuro para preço e limites, CTA no fim.

   Aqui vive SÓ o que elas pedem a mais. Cada regra diz por que existe;
   nenhuma redefine cor, tipo ou espaçamento fora dos tokens.
   ========================================================================== */

/* ---------- comparação em duas colunas ----------
   A grade de perfis nasce com três colunas porque a /instituicoes tem três
   públicos. A comparação "sem × com" é binária.

   A regra vive num min-width de propósito: escrita solta, ela venceria por
   ORDEM DE ARQUIVO os media queries de instituicoes.css (que levam
   .ip-perfis a 2 colunas em ≤1024 e a 1 em ≤768, e vêm antes desta folha) e
   a comparação ficaria em duas colunas no telefone. */
@media (min-width: 1025px) {
  .or-comparar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sem .ip-perfil__d entre o título e a lista, o respiro de 20px encostava a
   régua no rótulo. A régua de 1px continua: é ela que separa o lado do que o
   lado diz. */
.or-comparar__li { margin-top: 14px; }

/* Fio de acento de 3px no topo do cartão: é o que o cartão de comparação usa
   no site novo para dizer qual dos dois lados é a proposta. O overflow entra
   junto, senão o fio vaza o raio de 8px do card. */
.or-perfil--acento { position: relative; overflow: hidden; }
.or-perfil--acento::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 3px; background: var(--tom);
}

/* Número no lugar do ícone: o quadrado de 38px do .ip-perfil__ico já traz a
   cor e o fundo tingido do tom do card. Só o conteúdo muda, para o mono que
   a página de preços já usa para numerar cartão. */
.or-num { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .04em; }

/* ---------- colunas alinhadas pelo topo ----------
   Nas duas páginas a coluna de texto é mais alta que a peça ao lado, e
   centrar deixaria a imagem flutuando no meio de um vão. É o mesmo caso de
   .ip-duo--marca na /instituicoes. */
.ip-duo--topo { align-items: start; }

/* ---------- foto de conteúdo ----------
   Mesmo raio dos cartões grandes e o mesmo anel de 1px que .tela usa: sem
   ele a imagem termina em aresta nua sobre o fundo escuro. */
.or-foto {
  margin: 0; border-radius: var(--radius-16); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, .09);
}
.or-foto img { display: block; width: 100%; height: auto; }

/* ---------- listas de traço fora do cartão ----------
   .ip-preco__li é a lista de condições do cartão de licença. Fora dele o
   marcador é o mesmo; muda só o respiro do bloco. */
.or-plano__li { margin-top: 26px; }

/* ---------- cartão de limites (/orientadores #plano) ----------
   Sozinho na coluna, ao lado do preço + 4 traços: no padding padrão do
   .or-cartao (32px) ele sobrava baixo e apertado. Aqui ganha mais respiro,
   próprio desta instância — o .or-cartao base (professores usa em
   .or-acesso) continua com o padding original. Seletor composto
   (.or-cartao.or-limites) para vencer o empate de especificidade com a
   regra de padding do .or-cartao, que vem depois neste arquivo. */
.or-cartao.or-limites { padding: 44px 40px; }
.or-limites__lista { margin-top: 24px; gap: 28px; }

/* nota de pé de coluna: corpo menor, cor de apoio da seção escura */
.or-nota { margin-top: 24px; font-size: 14px; line-height: 1.62; color: var(--text-grey-a1); }
.or-nota a { color: var(--orange); font-weight: 700; }

/* ---------- cartão escuro avulso ----------
   O cartão do sistema para superfície escura, na receita de `.deliver`:
   fundo --card-escuro, raio 8 (radius/base do DS: botão, cartão, campo),
   respiro de 32 e o levantar de 4px no hover com o fundo clareando.

   O anel de 1px fica SEMPRE ligado, não só no hover como em .deliver: o
   cartão pousa sobre --ink-deep (#090909) e o fundo dele é #0c0c0c — três
   pontos de diferença, que a olho nu não desenham borda nenhuma. É o anel
   que diz onde o cartão começa.

   Sem moldura em volta e SEM fio de acento no topo. A moldura de 8px existe
   para AGRUPAR cards (.ip-kpis, .ip-gov, .ip-perfis) e um cartão sozinho não
   tem grupo; o fio de acento é do cartão de PREÇO (.ip-preco), que usa cor
   para dizer que ali tem uma oferta. Num cartão de pedido de acesso ou de
   limite, o fio afirma uma ênfase que o conteúdo não tem. */
.or-cartao {
  background: var(--card-escuro);
  border-radius: var(--radius-8);
  padding: 32px;
  box-shadow: var(--card-escuro-anel);
  transition: transform .25s ease, background-color .25s ease;
}
.or-cartao:hover { transform: translateY(-4px); background: var(--card-escuro-hover); }

/* ---------- cartão de pedir acesso (/professores) ----------
   O scroll-margin existe porque a barra é fixa e tem 73px: sem ele o botão
   do herói levava o rótulo do cartão para trás dela. */
.or-acesso { scroll-margin-top: 100px; }
.or-acesso__t {
  margin-top: 12px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);   /* o passo h3 do DS */
  line-height: 1.12; letter-spacing: -0.512px;
  color: var(--paper-fa);
}
.or-acesso__d { margin-top: 14px; font-size: 14px; line-height: 1.62; color: var(--text-grey-a1); }
.or-acesso__acao { margin-top: 26px; }
.or-acesso__nota { margin-top: 16px; font-size: 12.4px; line-height: 1.55; color: var(--text-grey-a3); }

@media (max-width: 768px) {
  .or-acesso__acao .btn { width: 100%; }
}