/* Página /optimizacao-de-processos — estilos próprios.

   ATENÇÃO — mesma razão do public/css/fundador.css: o Livewire 4 EXTRAI o
   <style> de um componente single-file para storage/framework/views/livewire/
   styles/<hash>.css e não injecta o <link> que o carrega. A página fica
   servida sem uma única regra, sem erro nenhum. Por isso estas regras vivem
   num ficheiro próprio, carregado via @push('head') na view.

   Paleta: preto/branco/#F2F2F2 + acento #FF4433 — a mesma da página, sem
   cores novas. As fontes ('Instrument Sans', 'Space Mono') já são carregadas
   globalmente em components/layouts/site.blade.php — não é preciso pedir
   mais nada à rede.
*/

/* --- Kickers ("eyebrows") --------------------------------------
 * Traço de acento + rótulo mono, no mesmo espírito do .ps-eyebrow de
 * fundador.css. Substitui o texto solto `text-black/50` (que falha AA —
 * ~3.95:1 sobre branco) por `text-black/60` (~5.75:1) e acrescenta o
 * traço para não perder a presença do vermelho onde antes era só a cor
 * do texto a fazer esse trabalho.
 * ------------------------------------------------------------ */
.op-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.op-eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    /* Por omissão o traço acompanha a cor do texto (cinzento nos kickers
       normais). Nos dois ou três pontos de viragem do argumento (a secção
       de capacidades, o CTA final) o texto tem de ficar em `black/60` para
       cumprir AA sobre branco — mas o traço pode continuar vermelho,
       porque um risco de 1px não precisa de respeitar contraste de texto.
       Ver --op-mark nesses kickers. */
    background-color: var(--op-mark, currentColor);
    flex-shrink: 0;
}

/* --- Mono utilitário (Space Mono em vez do mono por omissão do Tailwind) */
.op-mono {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
}

/* --- Números de índice (fases do método, etc.) ------------------ */
.op-num {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
}

/* --- A citação-dobradiça (secção 2 · #porque-acontece) ----------
 * A frase que segura a página. Maior do que qualquer outro corpo de
 * texto além do H1 — de propósito. Reutiliza o motivo "traço vermelho à
 * esquerda" que a página já usa em citações menores (scope, honesty),
 * aqui na escala máxima: é a mesma linguagem visual, só mais alto.
 * ------------------------------------------------------------ */
.op-quote {
    font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.18;
    font-size: clamp(1.75rem, 4.6vw, 3.625rem);
}

.op-quote .op-quote-mark {
    font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
    font-weight: 700;
}

/* --- A conta feita à mão (secção 3 · #o-custo) -------------------
 * Três registos tipográficos deliberadamente diferentes dentro da mesma
 * lista: a premissa (prosa, itálico, discreta), os dois passos de
 * trabalho (mono, com seta, como notas de rascunho) e o total (mono,
 * maior, com traço por cima — a linha que se desenha por baixo de uma
 * soma feita a papel).
 * ------------------------------------------------------------ */
.op-ledger {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.op-ledger-premise {
    font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
    font-style: italic;
}

.op-ledger-step {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
    position: relative;
    padding-left: 1.5rem;
}

.op-ledger-step::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #FF4433;
}

.op-ledger-total {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #000;
    border-top: 2px solid #000;
    margin-top: 0.375rem;
    padding-top: 0.75rem;
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
}

/* Fórmula em destaque, secção 3 — passa a linha própria sem partir a
   frase em que vive (continua o mesmo <strong> do texto aprovado). */
.op-formula {
    display: block;
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: clamp(1.125rem, 2.6vw, 1.625rem);
    letter-spacing: -0.01em;
    margin: 0.75rem 0;
}

/* --- Caminho técnico em cartão (secção 8, < lg) ------------------
 * A tabela de três colunas não cabe em 375px sem scroll horizontal
 * incómodo. Abaixo de lg mostra-se uma lista de cartões com os mesmos
 * dados; a tabela property fica só para lg+.
 * ------------------------------------------------------------ */
.op-path-card {
    border-top: 2px solid #000;
    padding-top: 1.25rem;
}

.op-path-label {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
}

/* --- Cartões (razões, capacidades) — leve resposta ao hover -------- */
.op-card {
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.op-card:hover {
    border-color: #000;
    transform: translateY(-2px);
}

/* --- Revelação ao scroll ------------------------------------------ */
.op-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.op-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .op-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .op-card:hover { transform: none; }
}

/* --- Folga para âncoras sob o cabeçalho fixo -----------------------
 * A topbar é `sticky top-0`. Sem isto, saltar para qualquer uma das
 * treze âncoras desta página (nav, os redirects 301 de /como-trabalhamos
 * e /o-que-fazemos, o "Continuar a ler" do herói) esconde a primeira
 * linha da secção por baixo dela. 5.5rem é a mesma folga que o próprio
 * wrapper da página já usa (`pt-22` = 5.5rem) para o herói.
 * ------------------------------------------------------------ */
.op-scope [id] {
    scroll-margin-top: 5.5rem;
}

/* --- Foco visível --------------------------------------------------
 * Reforço explícito: os elementos interactivos desta página ganham um
 * anel de foco no acento da marca, sempre visível ao navegar por
 * teclado (nunca no clique de rato, via :focus-visible).
 * ------------------------------------------------------------ */
.op-scope a:focus-visible,
.op-scope button:focus-visible {
    outline: 2px solid #FF4433;
    outline-offset: 3px;
    border-radius: 2px;
}