/* Oveyon — molde de página de recurso (08/10/2026): /recepcao, /inbound, /migrar, /migrate, as páginas por provedor e a
   dobra de /agentes e /agents. Carregada DEPOIS de agents.css (que fica intocada: está no map de Early Hints do nginx byte a
   byte) e só acrescenta o que o molde pede — ícone → H1 → dois botões → três passos com a tela real → os cinco níveis →
   depoimento.

   «A TELA REAL»: enquanto as capturas do painel não existirem, o quadro .rcScreen mostra o artefato verdadeiro — o evento
   que chega ao endpoint, o desafio do webhook, a chamada que solta a mensagem —, nunca um painel desenhado à mão. O lugar
   de cada captura está marcado no HTML com <!-- @tela: … -->. */

/* 1. Dobra centrada: ícone, H1 com uma palavra em itálico, sub, dois botões. */
.rcHero{padding:72px 0 36px;text-align:center}
.rcHero .rcIcon{width:64px;height:64px;margin:0 auto 22px;display:grid;place-items:center;border-radius:18px;background:var(--surf2);border:1px solid var(--accLine);color:var(--acc)}
.rcHero .rcIcon svg{width:30px;height:30px;display:block}
.rcHero h1{max-width:20ch;margin:0 auto 16px}
.rcHero .lead{margin:0 auto 26px}
.rcHero .ctas{justify-content:center}
.rcHero .fine{margin:0}

/* 2. A tela de verdade: o artefato real dentro de um quadro, com legenda. */
.rcScreen{margin:0;background:var(--surf);border:1px solid var(--line2);border-radius:var(--rCard);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.rcScreen .rcBar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line2);font-family:var(--mono);font-size:11.5px;color:var(--mut);letter-spacing:.04em;overflow-wrap:anywhere}
.rcScreen .rcBar i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--line);display:inline-block}
.rcScreen .rcBar i:first-child{background:var(--brand)}
.rcScreen img{display:block;width:100%;height:auto}
.rcScreen pre{margin:0;border-radius:0;background:var(--ink);color:var(--onInk);padding:16px 18px;font-size:12.5px;line-height:1.5;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.rcScreen pre .c{color:var(--onInkMut)}.rcScreen pre .k{color:var(--brand)}.rcScreen pre .r{color:#F3B28B}
.rcScreen figcaption{padding:10px 14px;font-size:13px;line-height:1.5;color:var(--mut);border-top:1px solid var(--line2)}
.rcScreen figcaption code{font-size:12px}

/* A vice-headline na dobra de /agentes: na home ela vem antes de um parágrafo com margem própria; aqui, antes do .lead. */
.heroGrid .ovVice{margin:6px 0 18px}

/* 3. Duas colunas: texto à esquerda, tela à direita. */
.rcSplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.rcSplit>*{min-width:0}

/* 4. Três passos, cada um com o seu artefato. */
.rcSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin-top:28px;align-items:start}
.rcSteps>*{min-width:0}
.rcStep{display:flex;flex-direction:column;gap:12px}
.rcStep .rcNum{font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;color:var(--acc)}
.rcStep h3{margin:0}
.rcStep p{margin:0;color:var(--mut);font-size:15px}

/* 5. Os cinco níveis: o que você teria de construir × o que já está ligado aqui. */
.rcLevels{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;counter-reset:nivel}
.rcLevels li{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;padding:20px 22px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--rCard);box-shadow:var(--shadow)}
.rcLevels li>*{min-width:0}
.rcLevels li::before{counter-increment:nivel;content:counter(nivel);font-family:var(--serif);font-style:italic;font-size:38px;line-height:1;color:var(--acc)}
.rcLevels h3{margin:0 0 6px;font-size:18px}
.rcLevels .rcSozinho{color:var(--mut);font-size:14.5px;margin:0}
.rcLevels .rcAqui{margin:0;font-size:14.5px;line-height:1.6;color:var(--tx);background:var(--surf2);border:1px solid var(--accLine);border-radius:10px;padding:12px 14px}
.rcLevels .rcRot{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.rcLevels .rcAqui .rcRot{color:var(--acc)}

/* 6. Depoimento: o bloco existe pronto, comentado no HTML, até haver um de verdade. */
.rcQuote{margin-top:28px;border:1px solid var(--line2);border-radius:var(--rPanel);padding:36px 32px;text-align:center}
.rcQuote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,30px);line-height:1.25;color:var(--tx)}
.rcQuote .rcQuem{margin:16px 0 0;font-size:14px;color:var(--mut)}

/* 7. Cartões de provedor (/migrar) e tabelas das páginas por provedor. */
.rcProv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin-top:8px}
.rcProv a{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line2);border-radius:var(--rCard);background:var(--bg);box-shadow:var(--shadow);color:var(--tx);text-decoration:none}
.rcProv a:hover{border-color:var(--accLine);text-decoration:none}
.rcProv a:hover .rcProvNome{color:var(--acc)}
.rcProv .rcProvNome{font-size:19px;font-weight:600;letter-spacing:-.01em}
.rcProv .rcProvComo{font-size:14px;color:var(--mut);margin:0}
.rcProv .rcProvTag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.rcProv .rcProvTag.manual{color:var(--warn)}
table.rcLeituras{width:100%;border-collapse:collapse;font-size:15px;margin-top:20px}
table.rcLeituras th,table.rcLeituras td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
table.rcLeituras th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:500}
table.rcLeituras td.rcAcesso{font-family:var(--mono);font-size:12.5px;color:var(--acc);white-space:nowrap}
.rcAviso{max-width:68ch;margin:26px auto 0;text-align:left;border:1px solid var(--line);background:var(--surf);border-radius:10px;padding:14px 16px;font-size:14.5px;color:var(--tx)}
.rcAviso b{color:var(--warn)}

/* 8. Responsivo. */
@media (max-width:900px){.rcSplit{grid-template-columns:1fr}.rcLevels li{grid-template-columns:40px minmax(0,1fr)}.rcLevels .rcAqui{grid-column:2}.rcHero{padding:44px 0 24px}table.rcLeituras{min-width:560px}}