/*
 * O DESENHO DESTE MÓDULO.
 *
 * Não depende do style.css do SPI, e isso é decisão de arquitetura: o dono disse que o módulo vai
 * para outro domínio depois. O nutri/ e o psi/ herdam o CSS do SPI e por isso seriam dolorosos de
 * arrancar. Aqui a marca é outra, então escrever separado deixou de ser custo.
 *
 * ---------------------------------------------------------------------------------------------
 * POR QUE ESTE ARQUIVO FOI REFEITO
 *
 * A primeira versão trocava as variáveis de cor e mantinha o desenho do SPI: pílula de navegação,
 * cartão branco com sombra, cabeçalho de barra cheia. O dono olhou e disse o óbvio: "tá igualzinho
 * o SPI, cadê a identidade do cara aí dentro". Ele estava certo. Trocar hexadecimal não é aplicar
 * marca; é pintar a mesma casa de outra cor.
 *
 * O manual descreve "exclusividade, sofisticação e o padrão elevado de uma mentoria
 * internacional", para "médicos que não se contentam com o comum", e um logotipo inspirado num
 * olho, que remete a "precisão, foco e visão apurada". Isso não é o mesmo produto que um
 * utilitário clínico claro e funcional. O desenho passou a dizer isso, em quatro decisões:
 *
 *   1. O AZUL É O CHÃO, não um detalhe. O escuro é o padrão da identidade: o #0a2129 do manual
 *      ocupa a tela e o dourado vira o que ele é lá, prestígio, em fio fino e com parcimônia.
 *      Quem prefere claro continua atendido, com o off white do manual como papel.
 *
 *   2. FIO NO LUGAR DE CAIXA. Nada de cartão branco com sombra. As seções se separam por hairline
 *      e por espaço. Sofisticação em tela é quase sempre subtração.
 *
 *   3. NAVEGAÇÃO SEM PÍLULA. A pílula era a assinatura visual do SPI. Aqui a navegação é texto,
 *      com um fio dourado sob o item atual, agrupada por rótulo em maiúscula espaçada.
 *
 *   4. O NÚMERO É O HERÓI. O produto é inteligência de negócio: o dado precisa ter presença
 *      tipográfica, tabular, com fio dourado acima e rótulo discreto abaixo.
 *
 * Toda cor, fonte e raio vem de css/marca.css. Nenhum valor de identidade é escrito aqui.
 */

* { box-sizing: border-box; }

.oc-body {
  margin: 0;
  background: var(--oc-fundo);
  color: var(--oc-texto);
  font-family: var(--oc-fonte-texto);
  /* O manual escreve em Gotham Light. O peso é o que mais separa "parece a marca" de "parece
     qualquer sistema": em 400 o texto engrossa e a página vira genérica. */
  font-weight: var(--oc-peso-texto);
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  /* Número alinha por tabular, não por fonte mono. Vale para a página inteira. */
  font-variant-numeric: tabular-nums;
}

/* Em peso 300, negrito de verdade fica longe demais. O intermediário do manual é quem destaca. */
.oc-body strong, .oc-body b { font-weight: var(--oc-peso-medio); }

.oc-hidden { display: none !important; }

/* ------------------------------------------------------------------ cabeçalho */
/* Slim, com o olho da marca e o nome em Comfortaa, fechado por um fio. Nada de barra cheia com
   botão dentro: isso era a cara do SPI. */
/*
 * O CABEÇALHO, REFEITO (2026-08-24), e é a mudança que mais faz o produto parecer dele.
 *
 * Ele era transparente sobre o off white, fechado por um fio cinza. Elegante e anônimo: podia ser
 * a marca de qualquer um. Olhando as APLICAÇÕES do manual (o certificado, o cartão, a sacola, o
 * crachá), o chão da identidade é sempre o PETRÓLEO #0a2129, com o dourado por cima. O off white
 * é o papel onde o conteúdo é lido, não a moldura da marca.
 *
 * Então o cabeçalho virou a faixa escura, e é ele que carrega a identidade. O corpo da página
 * continua claro, porque é onde mora o número e o texto longo, e ler dado em fundo escuro o dia
 * inteiro cansa. A divisão é a mesma do material impresso dele: capa escura, miolo claro.
 *
 * E o logotipo cresceu. O dono já tinha dito que a logo "lá em cima" estava "pequenininha
 * estranha": num cabeçalho de 1,8rem o símbolo com o olho vira um borrão dourado.
 */
.oc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-esp-3);
  flex-wrap: wrap;
  padding: var(--oc-esp-3) clamp(1.1rem, 5vw, 3rem);
  background: var(--oc-marca-escura);
  /* O fio dourado embaixo é o mesmo recurso do manual: uma linha fina de ouro fechando o bloco. */
  border-bottom: 1px solid rgba(241, 207, 107, .28);
}
.oc-header h1 {
  margin: 0;
  font-family: var(--oc-fonte-marca);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .05em;
}
.oc-header h1 a {
  display: flex;
  align-items: center;
  gap: var(--oc-esp-3);
  color: var(--oc-offwhite);
  text-decoration: none;
  transition: color var(--oc-tempo-toque) var(--oc-curva);
}
.oc-header h1 a:hover { color: var(--oc-dourado); }
.oc-header h1 a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--oc-marca-escura), 0 0 0 4px var(--oc-dourado);
  border-radius: var(--oc-raio-suave);
}
.oc-marca-logo {
  display: inline-block;
  /* proporção do símbolo oficial (806x480), para ele não distorcer */
  width: 4.36rem;
  height: 2.6rem;
  flex: none;
  background-image: var(--oc-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/*
 * O botão dentro da faixa escura precisa das cores do escuro, senão ele some ou berra. Como ele é
 * sempre secundário aqui (sair, voltar), vale para o fantasma.
 */
.oc-header .oc-btn-fantasma {
  background-color: rgba(252, 244, 232, .06);
  border-color: rgba(241, 207, 107, .35);
  color: var(--oc-offwhite);
}
.oc-header .oc-btn-fantasma:hover {
  background-color: rgba(241, 207, 107, .14);
  border-color: var(--oc-dourado);
  color: var(--oc-dourado);
}
.oc-header .oc-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--oc-marca-escura), 0 0 0 4px var(--oc-dourado);
}

/* ------------------------------------------------------------------ estrutura */
.oc-main {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.2rem) clamp(1.1rem, 5vw, 3rem) 6rem;
  display: flex;
  flex-direction: column;
  /* Era 2.4rem. O dono: "estão muito próximos uma coisa da outra". Entre BLOCOS de assunto o
     espaço precisa ser maior que o espaço interno deles, senão a página vira uma lista só e o
     olho não acha onde uma coisa acaba. */
  gap: var(--oc-esp-6);
}

/* Seção por fio e por ar, não por caixa. */
.oc-painel {
  display: flex;
  flex-direction: column;
  gap: var(--oc-esp-3);
  padding: var(--oc-esp-5) 0 0;
  border-top: 1px solid var(--oc-fio);
}
.oc-painel:first-child { border-top: 0; padding-top: 0; }

h2 {
  margin: 0;
  font-family: var(--oc-fonte-titulo);
  font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--oc-texto);
  text-wrap: balance;
}
h3 {
  margin: 0;
  font-family: var(--oc-fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
p { margin: 0; max-width: 68ch; }

.oc-muted { color: var(--oc-texto-suave); font-size: .94rem; }
.oc-promessa { color: var(--oc-texto); font-size: 1.02rem; }
.oc-nota { font-size: .86rem; color: var(--oc-texto-suave); }

.oc-aviso {
  background: var(--oc-superficie);
  color: var(--oc-alerta);
  border-left: 2px solid var(--oc-alerta);
  padding: .85rem 1.1rem;
  font-size: .92rem;
}
.oc-aviso a { color: inherit; }

/* --------------------------------------------------------- o versalete dourado */
/* O rótulo pequeno em maiúscula espaçada, dourado, é a assinatura tipográfica da marca aqui. */
.oc-selo {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--oc-fonte-titulo);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oc-realce);
  background: transparent;
  padding: 0;
}
.oc-selo-mentorado { color: var(--oc-mentorado); }
.oc-selo-mentor { color: var(--oc-mentor); }
.oc-selo-fase { color: var(--oc-texto-fraco); }

/* ------------------------------------------------------------------ navegação */
.oc-menu { display: flex; flex-direction: column; gap: var(--oc-esp-3); }
.oc-menu-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.oc-menu-voltar {
  font-family: var(--oc-fonte-titulo);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oc-texto-fraco);
  text-decoration: none;
}
.oc-menu-voltar:hover { color: var(--oc-realce); }

.oc-menu-grupos { display: flex; flex-direction: column; gap: var(--oc-esp-3); }
.oc-menu-grupo { display: flex; flex-direction: column; gap: .35rem; }
.oc-menu-grupo-nome {
  font-family: var(--oc-fonte-titulo);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oc-texto-fraco);
}
.oc-menu-itens { display: flex; flex-wrap: wrap; gap: var(--oc-esp-1) var(--oc-esp-4); }

/*
 * ------------------------------------------------------------------ O HAMBÚRGUER
 *
 * No desktop ele não existe: o menu inteiro está aberto e cabe. No celular ele é a única forma de
 * o conteúdo começar acima da dobra, porque dez links empilhados empurram o diagnóstico para
 * baixo da tela e a pessoa abre o app para ver menu.
 *
 * As três barrinhas viram um X quando abre. Não é enfeite: é o que diz que o mesmo botão fecha.
 */
.oc-menu-botao {
  display: none;                       /* o desktop não vê */
  align-items: center;
  gap: var(--oc-esp-2);
  width: 100%;
  min-height: 3rem;
  padding: .7rem var(--oc-esp-3);
  background: var(--oc-superficie);
  border: 1px solid var(--oc-fio);
  border-radius: var(--oc-raio);
  color: var(--oc-texto);
  font-family: var(--oc-fonte-titulo);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--oc-tempo-toque) var(--oc-curva),
              background-color var(--oc-tempo-toque) var(--oc-curva);
}
.oc-menu-botao:hover { border-color: var(--oc-realce); }
.oc-menu-botao:focus-visible { outline: none; box-shadow: var(--oc-foco); }

.oc-menu-hamburguer {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 4px; width: 1.15rem; height: 1.15rem; flex: none;
}
.oc-menu-hamburguer i {
  display: block; height: 2px; width: 100%; background: var(--oc-realce); border-radius: 2px;
  transition: transform var(--oc-tempo-cena) var(--oc-curva),
              opacity var(--oc-tempo-cena) var(--oc-curva);
}
/* As três viram X: a de cima desce e gira, a do meio some, a de baixo sobe e gira ao contrário. */
.oc-menu-aberto .oc-menu-hamburguer i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.oc-menu-aberto .oc-menu-hamburguer i:nth-child(2) { opacity: 0; }
.oc-menu-aberto .oc-menu-hamburguer i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/*
 * O item do menu: texto com fio dourado no atual. Continua sem pílula, que era a assinatura do
 * SPI, mas ganhou ALVO. Antes ele era texto puro com 5px de altura clicável: o cursor não mudava
 * de estado até acertar a letra, e no celular o dedo errava. Agora tem área, canto suave e um
 * fundo discreto no hover. É a diferença entre "isto é um link" e "isto é um lugar aonde ir".
 */
.oc-menu-item {
  font-family: var(--oc-fonte-titulo);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--oc-texto-suave);
  padding: .42rem .7rem;
  margin-left: -.7rem;               /* o recuo some do alinhamento: o texto continua na margem */
  border-radius: var(--oc-raio-suave);
  border-bottom: 2px solid transparent;
  transition: color var(--oc-tempo-toque) var(--oc-curva),
              background-color var(--oc-tempo-toque) var(--oc-curva);
}
.oc-menu-item:hover { color: var(--oc-texto); background-color: var(--oc-superficie); }
.oc-menu-item:focus-visible { outline: none; box-shadow: var(--oc-foco); }
.oc-menu-atual {
  color: var(--oc-texto);
  border-bottom-color: var(--oc-realce);
  border-radius: var(--oc-raio-suave) var(--oc-raio-suave) 0 0;
  font-weight: 600;
}

/* ------------------------------------------------------------------ entrada */
/* As portas dividem um fio, e não flutuam como cartões. */
.oc-portas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--oc-fio);
  border-top: 1px solid var(--oc-fio); border-bottom: 1px solid var(--oc-fio);
}
@media (max-width: 620px) { .oc-portas { grid-template-columns: 1fr; } }

.oc-porta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: var(--oc-texto);
  background: var(--oc-fundo);
  padding: 1.8rem 1.7rem;
  transition: background .14s;
}
.oc-porta:hover { background: var(--oc-superficie); }
.oc-porta h3 { font-size: 1.24rem; font-weight: 600; letter-spacing: -.015em; }
.oc-porta p { font-size: .92rem; color: var(--oc-texto-suave); }
.oc-porta::after {
  content: "";
  width: 1.7rem; height: 1px;
  margin-top: .4rem;
  background: var(--oc-realce);
  transition: width .16s;
}
.oc-porta:hover::after { width: 3.2rem; }

/* ------------------------------------------------------------------ botões */
/*
 * OS BOTÕES, REFEITOS (2026-08-24).
 *
 * O que havia aqui era um contorno de canto vivo que só mudava de cor no hover. No papel é
 * elegante; na mão não é botão. Faltavam as três coisas que fazem o dedo reconhecer um: CORPO
 * (ele ocupa espaço e tem forma), PESO (o principal se distingue do secundário à distância) e
 * RESPOSTA (ele reage ao toque, e não só ao passar do mouse).
 *
 * TRÊS NÍVEIS, e a hierarquia é o ponto. Quando todo botão tem o mesmo peso, a tela não diz o que
 * fazer, e é isso que dá cara de coisa gerada no automático.
 *
 *   .oc-btn              o principal. Preenchido com o DEGRADÊ DOURADO do manual, que é o mesmo
 *                        degradê da barra de cores da chapa dele. É a única peça da interface que
 *                        usa o dourado cheio, e é assim que ele continua significando prestígio.
 *   .oc-btn-fantasma     o secundário. Contorno e fundo de superfície: presente, sem competir.
 *   .oc-btn-texto        o terciário. Sublinhado, para ação de baixo risco.
 *
 * O MOVIMENTO É CURTO DE PROPÓSITO. 120ms na pressão, sem bounce, sem escala exagerada. Animação
 * longa em ferramenta de trabalho vira atraso, e atraso repetido vira irritação. E tudo isso
 * desliga sozinho para quem pede menos movimento no sistema (ver prefers-reduced-motion no fim).
 */
.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--oc-fonte-titulo);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Altura mínima de alvo de toque. Abaixo de 44px o dedo erra, e erra mais no celular do médico
     entre uma consulta e outra, que é onde este produto vai ser usado. */
  min-height: 2.85rem;
  padding: .78rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--oc-raio);
  background-image: linear-gradient(135deg, var(--oc-dourado-claro), var(--oc-dourado) 45%, var(--oc-dourado-fechado));
  color: #0a2129;                   /* o azul do manual sobre o dourado: o par de maior contraste */
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--oc-tempo-toque) var(--oc-curva),
              box-shadow var(--oc-tempo-toque) var(--oc-curva),
              filter var(--oc-tempo-toque) var(--oc-curva),
              background-color var(--oc-tempo-toque) var(--oc-curva),
              border-color var(--oc-tempo-toque) var(--oc-curva),
              color var(--oc-tempo-toque) var(--oc-curva);
  box-shadow: 0 1px 2px rgba(10, 33, 41, .10);
}
.oc-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(180, 141, 71, .30); }
/* A PRESSÃO. É o detalhe que mais faz o botão parecer real: ele afunda um fio e a sombra some. */
.oc-btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); filter: brightness(.97); }
.oc-btn:focus-visible { outline: none; box-shadow: var(--oc-foco); }
.oc-btn:disabled, .oc-btn[aria-disabled="true"] {
  opacity: .42; cursor: default; filter: none; transform: none; box-shadow: none;
}

/* O secundário: corpo sim, dourado não. */
.oc-btn-fantasma {
  background-image: none;
  background-color: var(--oc-superficie);
  border-color: var(--oc-fio-forte);
  color: var(--oc-texto-suave);
  box-shadow: none;
}
.oc-btn-fantasma:hover {
  background-color: var(--oc-superficie);
  border-color: var(--oc-realce);
  color: var(--oc-realce);
  filter: none;
  box-shadow: 0 2px 8px rgba(10, 33, 41, .07);
}

/* O de perigo continua sendo contorno, e nunca preenchido: botão vermelho cheio convida ao
   clique, e a única coisa que ele faz é apagar dado de alguém. */
.oc-btn.oc-perigo {
  background-image: none; background-color: transparent;
  border-color: var(--oc-alerta); color: var(--oc-alerta); box-shadow: none;
}
.oc-btn.oc-perigo:hover { background-color: var(--oc-alerta-fundo); filter: none; }

a.oc-btn { text-decoration: none; }

.oc-btn-texto {
  font-family: var(--oc-fonte-titulo); font-size: .8rem; font-weight: 600;
  background: none; border: 0; color: var(--oc-texto-fraco); cursor: pointer;
  padding: .3rem 0; text-decoration: underline; text-underline-offset: 4px;
  border-radius: var(--oc-raio-suave);
  transition: color var(--oc-tempo-toque) var(--oc-curva);
}
.oc-btn-texto:hover { color: var(--oc-realce); }
.oc-btn-texto:focus-visible { outline: none; box-shadow: var(--oc-foco); }
.oc-perigo { color: var(--oc-alerta); }

/* O respiro entre ações vem da escala, e não do olho de quem escreveu a tela. */
.oc-acoes {
  display: flex; flex-wrap: wrap;
  gap: var(--oc-esp-2);
  align-items: center;
  margin-top: var(--oc-esp-3);
}

/* ------------------------------------------------------------------ números */
/* O dado é o produto: fio dourado acima, número grande e tabular, rótulo discreto abaixo. */
.oc-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: var(--oc-esp-4) var(--oc-esp-5);
  margin: var(--oc-esp-2) 0;
}
/* Quando o valor é moeda por extenso (R$ 25.000,00), a coluna precisa ser mais larga, senão dois
   números encostam. A tela de gestão usa esta variação; o painel usa o valor curto e a estreita. */
.oc-numeros-largo { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.oc-num { display: flex; flex-direction: column; gap: .15rem; padding-top: .75rem; border-top: 1px solid var(--oc-realce); }
.oc-num strong {
  font-family: var(--oc-fonte-titulo);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--oc-texto);
  font-variant-numeric: tabular-nums;
}
.oc-num span {
  font-family: var(--oc-fonte-titulo); font-weight: 500;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oc-texto-fraco);
}

/* ------------------------------------------------------------------ tabelas */
.oc-rolagem { overflow-x: auto; }
.oc-tabela { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 460px; }
.oc-tabela th, .oc-tabela td {
  text-align: left; padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--oc-fio); vertical-align: top;
}
.oc-tabela th {
  font-family: var(--oc-fonte-titulo); font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oc-realce); background: transparent;
  white-space: nowrap; border-bottom-color: var(--oc-fio-forte);
}
.oc-tabela tbody tr:hover { background: var(--oc-superficie); }
.oc-tabela-caixa { overflow-x: auto; }
.oc-td-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-tabela th.oc-td-num, .oc-tabela td.oc-td-num { text-align: right; }

/* ------------------------------------------------------------------ Fase 4: telas do consultório */
/*
 * A conta embaixo do número. É a peça que cumpre a promessa do produto: o número nunca aparece
 * sozinho. Fica miúda de propósito, para não competir com o valor, mas presente sempre.
 */
.oc-num-conta {
  font-style: normal; font-size: .74rem; line-height: 1.35;
  color: var(--oc-texto-fraco); letter-spacing: .01em; margin-top: .1rem;
}
/* Número que depende de um dado ainda não importado: apagado, para ler como pendência e não como
   resultado. Um zero brilhante mente; um traço apagado diz "ainda não sabemos". */
.oc-num-falta strong { color: var(--oc-texto-fraco); font-weight: 500; }
.oc-num-falta { border-top-color: var(--oc-fio-forte); }
.oc-num-aviso {
  font-size: .86rem; color: var(--oc-mentorado);
  border-left: 2px solid var(--oc-mentorado); padding: .6rem .9rem;
  background: var(--oc-superficie); margin: .3rem 0 1rem;
}

.oc-tela-topo { margin-bottom: 1.4rem; }
.oc-tela-topo h2 { margin-bottom: .2rem; }
.oc-topo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oc-topo-acao { font-size: .8rem; white-space: nowrap; }
.oc-det-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* O destaque: a única caixa deste desenho, reservada para a leitura principal da tela (o gargalo,
   o total parado). Uma por tela, para ela significar algo. */
.oc-destaque {
  border: 1px solid var(--oc-realce); padding: 1.1rem 1.3rem; margin: 1.2rem 0;
  background: var(--oc-superficie);
}
.oc-destaque-tag {
  display: inline-block; font-family: var(--oc-fonte-titulo); font-weight: 600;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oc-realce); margin-bottom: .4rem;
}
.oc-destaque p { margin: 0; color: var(--oc-texto-suave); }
.oc-destaque strong { color: var(--oc-texto); font-weight: 500; }

/* O funil: degraus com barra proporcional, e entre eles a passagem. A barra é leitura rápida; o
   número ao lado é a leitura exata. */
.oc-funil { margin: 1rem 0; }
.oc-degrau { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: .8rem; }
.oc-degrau-rot {
  font-family: var(--oc-fonte-titulo); font-weight: 500; font-size: .82rem;
  letter-spacing: .02em; color: var(--oc-texto-suave);
}
.oc-degrau-barra { height: 12px; background: var(--oc-superficie); border: 1px solid var(--oc-fio); }
.oc-degrau-barra span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--oc-dourado-fechado), var(--oc-realce));
}
.oc-degrau-n {
  font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: 1rem;
  font-variant-numeric: tabular-nums; color: var(--oc-texto); min-width: 3ch; text-align: right;
}
.oc-degrau-falta .oc-degrau-n { color: var(--oc-texto-fraco); font-weight: 400; font-size: .78rem; }
.oc-degrau-falta .oc-degrau-barra span { background: var(--oc-fio-forte); }
.oc-passagem {
  margin: .2rem 0 .2rem calc(33.33% + .27rem);
  padding-left: .9rem; border-left: 1px dashed var(--oc-fio-forte);
  font-size: .76rem; color: var(--oc-texto-fraco); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.oc-alerta-pill {
  display: inline-block; font-size: .7rem; letter-spacing: .04em;
  padding: .15rem .5rem; color: var(--oc-alerta);
  background: var(--oc-alerta-fundo); white-space: nowrap;
}

@media (max-width: 620px) {
  .oc-degrau { grid-template-columns: 1fr auto; }
  .oc-degrau-barra { display: none; }
  .oc-passagem { margin-left: 0; }
}

/* ------------------------------------------------------------------ agenda do mentor */
.oc-agenda { margin-top: 1rem; }
.oc-agenda-item {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--oc-fio);
  border-left: 2px solid var(--oc-mentor); padding-left: 1rem;
}
/* A cor distingue os dois tipos sem legenda: o azul da mentoria para encontro, o marrom da clínica
   para cirurgia, que é onde há um mentorado do outro lado. São as cores de território do módulo. */
.oc-agenda-cirurgia { border-left-color: var(--oc-mentorado); }
.oc-agenda-encontro { border-left-color: var(--oc-mentor); }
.oc-agenda-data { text-align: right; }
.oc-agenda-data strong {
  display: block; font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: 1rem;
  font-variant-numeric: tabular-nums; color: var(--oc-texto);
}
.oc-agenda-data span { font-size: .72rem; color: var(--oc-texto-fraco); }
.oc-agenda-corpo h4 { margin: .1rem 0 .2rem; font-size: 1.02rem; font-weight: 500; }
.oc-agenda-tipo {
  font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oc-realce);
}
.oc-agenda-cirurgia .oc-agenda-tipo { color: var(--oc-mentorado); }
.oc-agenda-obs { font-size: .86rem; color: var(--oc-texto-suave); margin: .3rem 0 0; }
.oc-agenda-passado { margin-top: 1.5rem; }
.oc-agenda-passado .oc-agenda-item { opacity: .68; }

@media (max-width: 620px) {
  .oc-agenda-item { grid-template-columns: 1fr auto; }
  .oc-agenda-data { text-align: left; grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Fase 5: diagnóstico */
/* O resumo executivo em destaque: é a leitura do período em uma frase, o que a pessoa lê primeiro. */
.oc-resumo { border-left: 2px solid var(--oc-realce); padding: 1rem 1.3rem; margin: 1.2rem 0 1.6rem; background: var(--oc-superficie); }
.oc-resumo-tag {
  font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oc-realce);
}
.oc-resumo p { margin: .3rem 0 .2rem; font-size: 1.05rem; line-height: 1.5; color: var(--oc-texto); }
.oc-resumo-fonte { font-size: .74rem; color: var(--oc-texto-fraco); }

.oc-achados { display: flex; flex-direction: column; gap: var(--oc-esp-5); }
/* Cada achado é um bloco com a severidade dizendo a cor. Grave puxa o alerta, atenção o dourado
   fechado, observação fica neutra. A cor é leitura de prioridade, não decoração. */
.oc-achado { border-top: 2px solid var(--oc-fio-forte); padding-top: var(--oc-esp-3); }
.oc-achado-grave { border-top-color: var(--oc-alerta); }
.oc-achado-atencao { border-top-color: var(--oc-realce); }
.oc-achado-info { border-top-color: var(--oc-fio-forte); }
.oc-achado-sev {
  font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oc-texto-fraco);
}
.oc-achado-grave .oc-achado-sev { color: var(--oc-alerta); }
.oc-achado-atencao .oc-achado-sev { color: var(--oc-realce); }
.oc-achado h3 { margin: .15rem 0 .3rem; font-size: 1.08rem; font-weight: 500; }
.oc-achado p { margin: 0 0 .7rem; color: var(--oc-texto-suave); }
/* A hipótese de causa e a investigação, vindas da árvore do mentor. Recuadas, com fio, para
   ler como "o raciocínio por trás", separado dos números. */
.oc-achado-causa { margin-top: .7rem; padding-left: .9rem; border-left: 1px solid var(--oc-fio); }
.oc-achado-causa p { margin: 0 0 .4rem; font-size: .9rem; color: var(--oc-texto-suave); }
.oc-achado-causa strong { color: var(--oc-texto); font-weight: 500; }

/* A saúde dos dados: uma tira no topo do diagnóstico. Cor pela gravidade. */
.oc-saude { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; padding: .6rem 0 .9rem; margin-bottom: .3rem; }
.oc-saude-tag {
  font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.oc-saude-completo .oc-saude-tag { color: var(--oc-ok); }
.oc-saude-parcial .oc-saude-tag { color: var(--oc-realce); }
.oc-saude-insuficiente .oc-saude-tag { color: var(--oc-alerta); }
.oc-saude-txt { font-size: .86rem; color: var(--oc-texto-suave); }

/* O que não é o problema: fio verde, para ler como "aqui está tudo bem". */
.oc-naoeh { margin-top: 1.4rem; padding: 1rem 1.3rem; background: var(--oc-superficie); border-left: 2px solid var(--oc-ok); }
.oc-naoeh h3 { margin: 0 0 .2rem; font-size: .95rem; font-weight: 500; color: var(--oc-ok); }
.oc-naoeh-lista { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--oc-texto-suave); }
.oc-naoeh-lista li { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ Fase 9: plano de ação */
/* Cada ação do plano: o prazo como selo à esquerda, a ação e a linha de quem/métrica/sinal. */
.oc-plano-acoes { display: flex; flex-direction: column; gap: .8rem; margin-top: .9rem; }
.oc-plano-acao { display: flex; gap: .9rem; align-items: flex-start; }
.oc-plano-acao p { margin: 0; color: var(--oc-texto); }
.oc-prazo {
  flex: none; font-family: var(--oc-fonte-titulo); font-weight: 600; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--oc-realce);
  border: 1px solid var(--oc-fio-forte); padding: .25rem .5rem; margin-top: .15rem; white-space: nowrap;
}
.oc-plano-meta { display: block; font-size: .76rem; color: var(--oc-texto-fraco); margin-top: .25rem; letter-spacing: .01em; }

/* ------------------------------------------------------------------ Fase 10: o mapa público */
/* O Brasil estilizado por região: superfície com fio, dourado no hover e na região ativa. É um
   seletor com cara de mapa, não um atlas, e o desenho assume isso. */
.oc-mapa-caixa { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.oc-mapa { width: min(420px, 86vw); height: auto; display: block; }
.oc-regiao {
  fill: var(--oc-superficie); stroke: var(--oc-fio-forte); stroke-width: .6;
  cursor: pointer; transition: fill .15s ease;
}
.oc-regiao:hover { fill: var(--oc-mentor-fundo); }
.oc-regiao-ativa { fill: var(--oc-realce); stroke: var(--oc-realce); }
.oc-regiao-rotulo {
  font-family: var(--oc-fonte-titulo); font-size: 6px; font-weight: 600;
  fill: var(--oc-texto); text-anchor: middle; pointer-events: none;
}
.oc-regiao-ativa + .oc-regiao-rotulo { fill: var(--oc-contraste-realce); }
.oc-mapa-filtros { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.oc-chip-ativa { color: var(--oc-realce); border-color: var(--oc-realce); }

/* As estrelas: uma por ano de mentoria, douradas, coladas ao nome. */
.oc-estrelas { color: var(--oc-realce); letter-spacing: .12em; white-space: nowrap; }

.oc-cards-mentorados {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem;
}
.oc-card-mentorado { border-top: 1px solid var(--oc-realce); padding-top: .7rem; }
.oc-card-mentorado h4 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 600; }
.oc-card-mentorado .oc-muted { font-size: .84rem; }
.oc-card-cidade { font-size: .84rem; color: var(--oc-texto-suave); margin: .15rem 0 .5rem; }
.oc-card-contatos { display: flex; flex-wrap: wrap; gap: .5rem; }
.oc-btn-mini { font-size: .68rem; padding: .35rem .7rem; }

/* O ciclo anterior: cada prioridade com o registro de execução e o veredicto. */
.oc-bench-neutro { color: var(--oc-texto-suave); background: var(--oc-superficie); }
.oc-ciclo-prioridade { padding: .8rem 0; border-top: 1px solid var(--oc-fio); }
.oc-ciclo-prioridade > p { margin: 0 0 .3rem; }
.oc-ciclo-exec { font-size: .84rem; color: var(--oc-texto-suave); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.oc-ciclo-exec label { display: inline-flex; gap: .3rem; align-items: center; cursor: pointer; }
.oc-ciclo-exec input { width: auto; margin: 0; }
/* Os números embaixo do achado: a prova. Cada um é rótulo em cima, valor grande embaixo. */
.oc-achado-numeros { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.oc-achado-num { display: flex; flex-direction: column; }
.oc-achado-num span {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oc-texto-fraco);
}
.oc-achado-num strong {
  font-family: var(--oc-fonte-titulo); font-weight: 500; font-size: .98rem;
  color: var(--oc-texto); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Fase 6: compartilhar e painel */
/* A chave liga/desliga: estado à esquerda, ação à direita, um fio embaixo. */
.oc-troca {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0; margin-top: .8rem; border-top: 1px solid var(--oc-fio);
}
.oc-troca > div { display: flex; flex-direction: column; gap: .1rem; }
.oc-troca strong { font-weight: 500; }
.oc-troca .oc-muted { font-size: .84rem; }
/* A lista do que a chave NUNCA envia. Marcador de barra, não de bolinha: é uma promessa firme. */
.oc-nunca { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--oc-texto-suave); list-style: none; }
.oc-nunca li { position: relative; padding-left: .9rem; margin-bottom: .4rem; }
.oc-nunca li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: 1px;
  background: var(--oc-mentorado);
}
/* O benchmark: acima ou abaixo da mediana da turma, como um selo miúdo ao lado do número. */
.oc-bench {
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .05rem .35rem; white-space: nowrap;
}
.oc-bench-bom { color: var(--oc-ok); background: var(--oc-ok-fundo); }
.oc-bench-baixo { color: var(--oc-alerta); background: var(--oc-alerta-fundo); }

/* ------------------------------------------------------------------ Fase 7: perguntar aos dados */
.oc-conversa { display: flex; flex-direction: column; gap: 1rem; margin: 1.2rem 0; max-height: 60vh; overflow-y: auto; }
.oc-fala { max-width: 90%; }
/* A pergunta encosta à direita, a resposta à esquerda: a leitura de quem falou vem da posição. */
.oc-fala-eu { align-self: flex-end; text-align: right; }
.oc-fala-eu p {
  display: inline-block; margin: 0; padding: .55rem .9rem;
  background: var(--oc-mentor-fundo); color: var(--oc-texto); border: 1px solid var(--oc-fio);
}
.oc-fala-dados { align-self: flex-start; border-left: 2px solid var(--oc-realce); padding: .3rem 0 .3rem 1rem; }
.oc-fala-dados p { margin: 0 0 .5rem; color: var(--oc-texto); }
.oc-fala-dados .oc-achado-numeros { margin-top: .4rem; }

.oc-envio-pergunta { display: flex; gap: .6rem; margin-top: .5rem; }
.oc-envio-pergunta input {
  flex: 1; font: inherit; font-size: .95rem; padding: .55rem .8rem;
  color: var(--oc-texto); background: var(--oc-superficie);
  border: 1px solid var(--oc-fio-forte); border-radius: 0;
}
.oc-sugestoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.oc-chip {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: .35rem .8rem; color: var(--oc-texto-suave);
  background: transparent; border: 1px solid var(--oc-fio-forte); border-radius: var(--oc-raio-pill);
}
.oc-chip:hover:not(:disabled) { color: var(--oc-realce); border-color: var(--oc-realce); }
.oc-chip:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------------ Fase 8: conteúdo clínico */
/* O bloco de conteúdo do mentor, lido pelo mentorado. Texto para ler, separado por fio, sem caixa. */
.oc-conteudo { border-top: 1px solid var(--oc-fio); padding: 1.1rem 0; }
.oc-conteudo h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 500; color: var(--oc-realce); }
.oc-conteudo p { margin: 0 0 .7rem; color: var(--oc-texto); line-height: 1.7; }

/* As abas do editor do mentor: texto com sublinhado dourado no atual, sem pílula (padrão da marca). */
.oc-abas { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0 .3rem; border-bottom: 1px solid var(--oc-fio); }
.oc-aba {
  font: inherit; font-family: var(--oc-fonte-titulo); font-weight: 500; font-size: .82rem;
  cursor: pointer; background: transparent; border: 0; color: var(--oc-texto-suave);
  padding: 0 0 .6rem; border-bottom: 2px solid transparent; letter-spacing: .02em;
}
.oc-aba-atual { color: var(--oc-texto); border-bottom-color: var(--oc-realce); }

.oc-conteudo-lista { margin-top: .5rem; }
.oc-conteudo-linha {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--oc-fio);
}
.oc-conteudo-linha > div:first-child { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.oc-conteudo-linha strong { font-weight: 500; }
.oc-conteudo-acoes { display: flex; align-items: center; gap: .7rem; flex: none; }

/* A linha de "publicado" com caixa de seleção, no editor. */
.oc-troca-linha { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; font-size: .92rem; color: var(--oc-texto); }
.oc-troca-linha input { width: auto; }

/* ------------------------------------------------------------------ importador */
.oc-envio { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin-top: .7rem; }
.oc-envio input[type="file"] { font: inherit; font-size: .86rem; color: var(--oc-texto-suave); }

.oc-depara select {
  font: inherit; font-size: .88rem; width: 100%; max-width: 300px;
  padding: .45rem .6rem; color: var(--oc-texto);
  border: 1px solid var(--oc-fio-forte); border-radius: 0; background: var(--oc-superficie);
}
.oc-exemplos {
  display: block; margin-top: .3rem;
  font-family: var(--oc-fonte-dado); font-size: .74rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: var(--oc-texto-fraco);
}
.oc-vazia { font-style: italic; }

.oc-faltando {
  margin-top: .7rem; padding: 1.2rem 1.4rem;
  background: var(--oc-superficie); border-left: 2px solid var(--oc-mentorado);
}
.oc-faltando h3 { color: var(--oc-mentorado); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.oc-faltando ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .89rem; color: var(--oc-texto-suave); }
.oc-faltando li { margin-bottom: .35rem; }
.oc-faltando strong { color: var(--oc-texto); }

.oc-avisos summary { cursor: pointer; font-size: .88rem; color: var(--oc-texto-suave); }
.oc-avisos ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--oc-texto-fraco); }
.oc-ok-linha {
  font-size: .9rem; color: var(--oc-ok);
  border-left: 2px solid var(--oc-ok); padding: .7rem 1rem; background: var(--oc-superficie);
}

/* ------------------------------------------------------------------ formulários */
.oc-filtros { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin-top: .4rem; }
.oc-filtros input[type="search"], .oc-filtros select {
  font: inherit; font-size: .9rem; padding: .55rem .8rem; color: var(--oc-texto);
  border: 1px solid var(--oc-fio-forte); border-radius: 0; background: var(--oc-superficie);
}
.oc-filtros input[type="search"] { flex: 1 1 240px; }

.oc-grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.6rem; }
@media (max-width: 620px) { .oc-grade2 { grid-template-columns: 1fr; } }
.oc-campo { display: flex; flex-direction: column; gap: .3rem; margin-top: .9rem; }
.oc-campo > span {
  font-family: var(--oc-fonte-titulo); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oc-texto-fraco);
}
.oc-campo input, .oc-campo select, .oc-campo textarea {
  font: inherit; font-size: .94rem; padding: .5rem 0; color: var(--oc-texto);
  border: 0; border-bottom: 1px solid var(--oc-fio-forte); border-radius: 0;
  background: transparent;
}
.oc-campo input:focus, .oc-campo select:focus, .oc-campo textarea:focus {
  outline: 0; border-bottom-color: var(--oc-realce);
}
.oc-campo textarea { resize: vertical; }

/* Estado do ciclo de cada mentorado, lido de relance. */
.oc-pill {
  display: inline-block; font-family: var(--oc-fonte-titulo); font-size: .63rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: .05rem 0 .05rem .6rem; border-left: 2px solid currentColor;
}
.oc-pill-ok { color: var(--oc-ok); }
.oc-pill-renovar { color: var(--oc-mentorado); }
.oc-pill-vencido { color: var(--oc-alerta); }
.oc-pill-quieto { color: var(--oc-texto-fraco); }

/* ------------------------------------------------------------------ rodapé */
.oc-footer {
  border-top: 1px solid var(--oc-fio);
  margin: 0 clamp(1.1rem, 5vw, 3rem);
  padding: 1.6rem 0 2.6rem;
  color: var(--oc-texto-fraco);
  font-size: .76rem;
  letter-spacing: .06em;
  text-align: center;
}

/* ------------------------------------------------------------------ acessibilidade */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--oc-realce);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ------------------------------------------------ o lockup completo, na entrada */
/* O manual traz o logotipo empilhado com o letreiro. Ele merece tamanho e ar: é a primeira coisa
   que a pessoa vê ao entrar, e é o que diz de quem é este produto antes de qualquer texto. */
.oc-abertura { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; padding: 1rem 0 .5rem; }
.oc-abertura-logo {
  width: min(280px, 62vw);
  aspect-ratio: 835 / 600;
  background-image: var(--oc-logo-completo);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.oc-abertura p { max-width: 46ch; color: var(--oc-texto-suave); font-size: .95rem; }
.oc-abertura .oc-selo { align-self: center; }

/* -----------------------------------------------------------------------------
   FASE 11 · A ANÁLISE DA PRAÇA

   Duas peças novas, e as duas existem por um motivo de leitura, não de enfeite.
   ----------------------------------------------------------------------------- */

/*
   O CONVITE, no diagnóstico. Ele precisa parecer um caminho, e não mais um
   achado. Por isso ele usa a MESMA forma de .oc-resumo e .oc-naoeh (fio à
   esquerda, superfície, respiro interno) e não a de .oc-painel, que é um bloco
   sem fundo nem recuo: a primeira versão herdou o painel e o texto encostou no
   fio, sem respiro. O fio é o dourado de realce do manual, e não valor solto,
   para o convite acompanhar o tema claro e o escuro sem retoque.
*/
.oc-convite {
  margin: 1.4rem 0;
  padding: 1rem 1.3rem;
  background: var(--oc-superficie);
  border-left: 2px solid var(--oc-realce);
}
.oc-convite h3 { margin: 0 0 .4rem; }
.oc-convite p { margin: 0 0 .9rem; }
.oc-convite > :last-child { margin-bottom: 0; }

/*
   A TABELA DOS LÍDERES ROLA SOZINHA no celular. Sem isso, uma tabela de quatro
   colunas empurra a página inteira para o lado, e o médico lê o diagnóstico
   dele arrastando o texto. A rolagem fica presa dentro da tabela.
*/
.oc-tabela-rolo {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.oc-tabela-rolo .oc-tabela { min-width: 28rem; }


/* =============================================================================
   FASE 12 · O CELULAR, E QUEM PEDE MENOS MOVIMENTO (2026-08-24)
   ============================================================================= */

/*
   Abaixo de 900px o menu fecha e vira botão. É a única mudança estrutural do
   celular: o resto do desenho já é uma coluna só, e coluna funciona em qualquer
   largura. Fechar o menu aqui é o que faz o conteúdo começar acima da dobra.
*/
@media (max-width: 899px) {
  .oc-menu-botao { display: flex; }
  .oc-menu-grupos {
    display: none;
    padding-top: var(--oc-esp-3);
  }
  .oc-menu-aberto .oc-menu-grupos { display: flex; }
  /* No celular os links do grupo empilham: em linha, com dez telas, eles quebram
     em lugares que dificultam a leitura e o alvo de toque fica minúsculo. */
  .oc-menu-itens { flex-direction: column; gap: 0; }
  .oc-menu-item { padding: .6rem 0; border-bottom: 1px solid var(--oc-fio); }
  .oc-menu-atual { border-bottom-color: var(--oc-realce); }
  /* Alvo de toque cheio nos botões, que no celular é onde o erro de dedo acontece. */
  .oc-acoes .oc-btn { width: 100%; }
}

/*
   QUEM PEDE MENOS MOVIMENTO, RECEBE MENOS MOVIMENTO.

   Não é detalhe de acessibilidade opcional: para parte das pessoas, animação de
   interface causa enjoo e tontura de verdade. Quem marcou isso no sistema
   operacional está dizendo isso, e o respeito custa cinco linhas.

   A transição não é ZERADA, é encurtada para 1ms: assim o estado final continua
   sendo aplicado por transitionend em quem depende disso, sem movimento visível.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .oc-btn:active { transform: none; }
}


/* =============================================================================
   FASE 12b · A NAVEGAÇÃO VIRA COLUNA (2026-08-24)

   O QUE ESTAVA ERRADO. Depois de refazer botão, espaço e cabeçalho, o dono
   olhou e o que sobrou gritando "genérico" era a navegação: treze links de
   texto embrulhando em duas fileiras no topo. Ganharam alvo e hover na etapa
   anterior, mas continuavam parecendo uma LISTA, e não uma navegação.

   Lista no topo tem dois defeitos que não se resolvem com estilo. Primeiro,
   ela empurra o conteúdo para baixo: a pessoa abre o Diagnóstico e a primeira
   coisa que vê é um índice. Segundo, ela quebra em lugares diferentes conforme
   a largura da janela, então a posição de cada tela muda, e a memória muscular
   nunca se forma.

   A COLUNA RESOLVE OS DOIS. Cada tela tem um lugar fixo, o conteúdo começa no
   topo, e o agrupamento passa a ser lido de relance porque os grupos empilham
   em vez de embrulhar. É também o que um produto de trabalho parece: quem usa
   isto todo dia quer a mesma coisa no mesmo lugar.

   DUAS FORMAS E NENHUM MEIO-TERMO. Acima de 900px, coluna. Abaixo, hambúrguer.
   A faixa intermediária, onde o menu voltava a embrulhar, deixou de existir: era
   ela que produzia o paredão.
   ============================================================================= */

@media (min-width: 900px) {
  .oc-main {
    display: grid;
    /* A coluna da navegação é fixa, e a do conteúdo elástica com teto. Assim o
       texto nunca passa da medida confortável de leitura, mesmo em tela larga. */
    grid-template-columns: 13.5rem minmax(0, 58rem);
    align-items: start;
    gap: var(--oc-esp-4) var(--oc-esp-6);
    max-width: 78rem;
  }
  /* Tudo que não é o menu vive na coluna da direita. */
  .oc-main > * { grid-column: 2; }
  .oc-menu {
    grid-column: 1;
    grid-row: 1 / -1;
    /* Ela acompanha a rolagem: numa tela longa como o Diagnóstico, trocar de
       aba sem voltar ao topo é a diferença entre navegar e caçar. */
    position: sticky;
    top: var(--oc-esp-4);
    gap: var(--oc-esp-4);
    padding-right: var(--oc-esp-4);
    /* O fio vertical é o mesmo recurso do manual, a linha fina separando blocos. */
    border-right: 1px solid var(--oc-fio);
  }

  .oc-menu-topo { flex-direction: column; align-items: flex-start; gap: var(--oc-esp-2); }

  /* Os itens empilham e ocupam a coluna inteira: alvo cheio, e a leitura vira
     vertical, que é como se lê uma lista de lugares. */
  .oc-menu-itens { flex-direction: column; gap: 2px; }
  .oc-menu-item {
    display: block;
    width: 100%;
    margin-left: 0;
    padding: .45rem .7rem;
    border-bottom: 0;
    /* O fio do atual passa da base para a ESQUERDA. Na horizontal o sublinhado
       marcava o item; na vertical, quem marca é a barra lateral, que é o que o
       olho procura numa coluna. */
    border-left: 2px solid transparent;
    border-radius: 0 var(--oc-raio-suave) var(--oc-raio-suave) 0;
  }
  .oc-menu-atual {
    border-left-color: var(--oc-realce);
    border-bottom-color: transparent;
    background-color: var(--oc-superficie);
    border-radius: 0 var(--oc-raio-suave) var(--oc-raio-suave) 0;
  }
}

/* O nome por trás do número (quem é a maior proposta parada). Discreto, porque o herói é o
   número; presente, porque sem ele o médico não sabe para quem ligar. Este é o campo que o
   pacote enviado à IA não copia. */
.oc-achado-quem {
  display: block;
  font-style: normal;
  font-size: .78rem;
  color: var(--oc-texto-fraco);
}

/* =============================================================================
   FASE 12 · O MODO DEMONSTRAÇÃO
   ============================================================================= */

/*
   A TARJA É FEIA DE PROPÓSITO, e este comentário existe para ninguém "melhorar"
   isso depois.

   Um modo de demonstração visualmente idêntico ao produto é como um número
   inventado acaba num print, numa apresentação ou num post, apresentado como
   resultado de alguém. A tarja tem de incomodar o suficiente para quem está com
   ela ligada nunca esquecer. Ela usa o vermelho de alerta, ocupa a largura toda,
   fica acima do cabeçalho e carrega o botão de sair.
*/
.oc-tarja-demo {
  display: flex;
  align-items: center;
  gap: var(--oc-esp-3);
  flex-wrap: wrap;
  padding: var(--oc-esp-2) clamp(1.1rem, 5vw, 3rem);
  background: var(--oc-alerta-fundo);
  border-bottom: 2px solid var(--oc-alerta);
  color: var(--oc-texto);
  font-size: .86rem;
  line-height: 1.45;
}
.oc-tarja-demo-selo {
  font-family: var(--oc-fonte-titulo);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oc-contraste-realce);
  background: var(--oc-alerta);
  padding: .3rem .6rem;
  border-radius: var(--oc-raio-suave);
  flex: none;
}
.oc-tarja-demo span:nth-child(2) { flex: 1 1 22rem; }
.oc-tarja-demo .oc-btn { flex: none; }

/* Os dez cartões do seletor. Grade, porque a comparação entre eles é o ponto:
   quem for gravar escolhe pelo PROBLEMA que quer mostrar, não pelo nome. */
.oc-demo-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--oc-esp-3);
}
.oc-demo-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--oc-esp-1);
  padding: var(--oc-esp-3);
  background: var(--oc-superficie);
  border: 1px solid var(--oc-fio);
  border-radius: var(--oc-raio);
}
.oc-demo-cartao h3 { margin: 0; font-size: 1rem; }
.oc-demo-atual { border-color: var(--oc-realce); box-shadow: inset 3px 0 0 var(--oc-realce); }
.oc-demo-onde {
  margin: 0;
  font-family: var(--oc-fonte-titulo);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oc-texto-fraco);
}
/* O que cada um MOSTRA é a informação mais útil desta tela, então ela tem peso
   de texto e não de legenda. */
.oc-demo-mostra { margin: .2rem 0 var(--oc-esp-2); color: var(--oc-texto-suave); }
.oc-demo-cartao .oc-btn { margin-top: auto; }