/* ==========================================================================
   OPORTUNIDADES - CATEGORIAS SEM LISTA (Veículos, Naval, Aeronaves e
   Conexões e Investimentos)

   As quatro páginas ainda não têm itens cadastrados. Em vez de repetir a
   mesma casca vazia, elas ganharam um layout próprio: um bloco de abertura
   com a proposta da categoria, os diferenciais, o que a pessoa precisa saber
   antes de negociar e um FORMULÁRIO de contato ao final.

   ARQUIVO COMPARTILHADO pelas 4 páginas -- prefixo .cv-oc-*. Cada página só
   troca o conteúdo (arrays PHP) e a cor de acento, via a variável
   --oc-acento declarada na própria section (ver o topo de cada .php).

   Carregado DEPOIS do css.css global e do Especialidades.css. O formulário
   reaproveita as classes .cv-fc-* da /contato/ (Contato.css), que também é
   carregado por estas páginas -- assim o campo, o erro inline e o véu de
   envio se comportam exatamente igual, sem duplicar CSS.
   ========================================================================== */

.cv-oc {
    --oc-azul: #062345;
    --oc-azul-claro: #0b294d;
    --oc-ouro: #d2aa4c;
    --oc-creme: #efe9d3;
    --oc-linha: #e3ddc8;
    --oc-texto: #37475c;
    --oc-suave: #7d8899;
    --oc-raio: 16px;
    --oc-sombra: 0 24px 60px rgba(6, 35, 69, .09);
}

/* --------------------------------------------------------------------------
   ABERTURA - a proposta da categoria, em duas colunas
   -------------------------------------------------------------------------- */

.cv-oc-abre {
    padding: 78px 0 84px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcf8 100%);
}

.cv-oc-abre-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.cv-oc-selo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(210, 170, 76, .45);
    border-radius: 999px;
    font: 400 12px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: #9a7526;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ARMADILHA do Lucide: a base `svg.lucide { fill:none; stroke:currentColor }`
   tem especificidade tipo+classe. Por isso todos os seletores de ícone aqui
   são descendentes (que vencem), nunca uma classe solta. */
.cv-oc-selo svg {
    width: 15px;
    height: 15px;
    stroke: var(--oc-ouro);
}

.cv-oc-h2 {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 47px;
}

.cv-oc-abre-texto p {
    margin-bottom: 16px;
    font: 400 16px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oc-texto);
}

.cv-oc-abre-texto p:last-child {
    margin-bottom: 0;
}

/* A primeira frase puxa o olho: corpo maior e filete dourado à esquerda. */
.cv-oc-abre-lead {
    padding-left: 20px;
    border-left: 3px solid var(--oc-ouro);
    font-size: 18px !important;
    line-height: 30px !important;
    color: var(--oc-azul) !important;
}

.cv-oc-abre-texto strong {
    font-weight: 700;
    color: var(--oc-azul);
}

/* CAIXA LATERAL: os pontos-chave da categoria, em fundo azul. Substitui a
   foto que a categoria ainda não tem -- e carrega informação, em vez de
   ocupar espaço com imagem genérica de banco. */
.cv-oc-caixa {
    position: relative;
    padding: 34px 32px 32px;
    overflow: hidden;
    border-radius: var(--oc-raio);
    background-color: var(--oc-azul);
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(90% 130% at 50% 100%, rgba(210, 170, 76, .18) 0%, rgba(210, 170, 76, 0) 68%),
        linear-gradient(160deg, #051d3a 0%, #072a4f 52%, #0b3059 100%);
}

/* Filete dourado no topo (assinatura das faixas escuras do site). */
.cv-oc-caixa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .55) 50%, rgba(210, 170, 76, 0) 100%);
}

.cv-oc-caixa-titulo {
    margin-bottom: 22px;
    font: 400 24px/1.3 'Afterglow', Georgia, serif;
    color: var(--oc-creme);
}

.cv-oc-caixa-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cv-oc-caixa-lista li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font: 400 15px/24px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .84);
}

.cv-oc-caixa-lista li svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    stroke: var(--oc-ouro);
}

/* --------------------------------------------------------------------------
   DIFERENCIAIS - 3 ou 4 cartões
   -------------------------------------------------------------------------- */

.cv-oc-dif {
    padding: 76px 0 84px;
    background: var(--oc-creme);
}

.cv-oc-intro {
    max-width: 720px;
    margin: 0 auto 46px;
    font: 400 17px/29px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oc-texto);
    text-align: center;
}

.cv-oc-dif-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.cv-oc-dif-card {
    padding: 30px 28px 28px;
    border: 1px solid var(--oc-linha);
    border-radius: var(--oc-raio);
    background: #fff;
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease),
                border-color .25s var(--cv-ease);
}

.cv-oc-dif-card:hover {
    transform: translateY(-4px);
    border-color: var(--oc-ouro);
    box-shadow: var(--oc-sombra);
}

/* Círculo do ícone. */
.cv-oc-dif-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 50% 0%, #0b294d 0%, #062345 62%);
}

.cv-oc-dif-ico svg {
    width: 24px;
    height: 24px;
    stroke: var(--oc-ouro);
}

.cv-oc-dif-h3 {
    margin-bottom: 10px;
    font: 400 22px/1.28 'Afterglow', Georgia, serif;
    color: var(--oc-azul);
}

.cv-oc-dif-card p {
    font: 400 15px/25px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oc-texto);
}

/* --------------------------------------------------------------------------
   ANTES DE NEGOCIAR -- REFEITA em 09/09/2026

   Era uma lista de itens soltos sobre fundo BRANCO, separados apenas por um
   filete fino. Dois problemas: o conteúdo (que é um checklist útil, o mais
   prático da página) pesava pouco, e a seção clara se fundia com o
   formulário -- também claro -- que vem logo abaixo.

   Agora é uma FAIXA ESCURA com cartões: dá peso ao checklist e cria a
   separação que faltava antes do bloco de contato. É também o único
   respiro escuro da página, entre a abertura clara e o formulário claro.
   -------------------------------------------------------------------------- */

.cv-oc-saber {
    position: relative;
    padding: 84px 0 90px;
    background-color: var(--oc-azul);
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(90% 130% at 50% 0%, rgba(210, 170, 76, .16) 0%, rgba(210, 170, 76, 0) 62%),
        linear-gradient(165deg, #051d3a 0%, #072a4f 50%, #0b3059 100%);
    overflow: hidden;
}

/* Filete dourado no topo, assinatura das faixas escuras do site. */
.cv-oc-saber::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0) 0%, rgba(210, 170, 76, .55) 50%, rgba(210, 170, 76, 0) 100%);
}

/* ---- Cabeçalho ---- */

.cv-oc-saber-topo {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center;
}

.cv-oc-saber-selo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 7px 16px;
    border: 1px solid rgba(210, 170, 76, .45);
    border-radius: 999px;
    font: 400 12px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oc-ouro);
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ARMADILHA do Lucide: a base `svg.lucide { fill:none; stroke:currentColor }`
   tem especificidade tipo+classe -- por isso o seletor descendente. */
.cv-oc-saber-selo svg {
    width: 15px;
    height: 15px;
    stroke: var(--oc-ouro);
}

/* O .cv-titulo global é azul escuro (feito para fundo claro): sobre a faixa
   escura ele precisa virar creme, senão o título desaparece. */
.cv-oc-saber-h2 {
    margin-bottom: 14px;
    font-size: 38px;
    line-height: 45px;
    color: var(--oc-creme);
}

.cv-oc-saber-intro {
    font: 400 17px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .78);
}

/* ---- Os cartões ---- */

.cv-oc-saber-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
    list-style: none;      /* é <ol>: o número visual é o .cv-oc-saber-num */
}

.cv-oc-saber-item {
    position: relative;
    padding: 30px 30px 28px;
    border: 1px solid rgba(210, 170, 76, .20);
    border-radius: var(--oc-raio);
    background: rgba(255, 255, 255, .04);
    transition: transform .25s var(--cv-ease), border-color .25s var(--cv-ease),
                background-color .25s var(--cv-ease);
}

/* Cartão sobe 4px no hover (padrão do site). */
.cv-oc-saber-item:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 170, 76, .45);
    background: rgba(255, 255, 255, .07);
}

/* Número grande, decorativo (o aria-hidden está no HTML -- a <ol> já
   informa a posição para o leitor de tela). */
.cv-oc-saber-num {
    display: block;
    margin-bottom: 12px;
    font: 400 34px/1 'Afterglow', Georgia, serif;
    color: rgba(210, 170, 76, .75);
}

.cv-oc-saber-h3 {
    margin-bottom: 8px;
    font: 400 20px/1.3 'Afterglow', Georgia, serif;
    color: var(--oc-creme);
}

.cv-oc-saber-item p {
    font: 400 14px/23px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .78);
}

/* --------------------------------------------------------------------------
   FORMULÁRIO -- espelha a /contato/

   REFEITO em 09/09/2026 a pedido do cliente. A versão anterior tinha layout
   próprio (faixa azul escura, título centralizado acima das colunas, passos
   numerados). Agora o bloco usa o MESMO desenho da página de contato: fundo
   claro, canais diretos à esquerda, cartão do formulário à direita.

   Por isso quase tudo aqui vem pronto do Contato.css (.cv-fc-*): a seção
   carrega a classe .cv-fc junto da .cv-oc-form, e o que sobra neste arquivo
   são apenas os poucos ajustes específicos das páginas de oportunidade.
   -------------------------------------------------------------------------- */

/* A seção herda todo o visual do .cv-fc. O único ajuste é a separação do
   bloco anterior: na /contato/ o formulário vem logo após o cabeçalho da
   página, aqui ele fecha uma sequência de seções. */
.cv-oc-form {
    border-top: 1px solid var(--fc-linha);
}

/* Item da coluna de canais que NÃO é link ("O que acontece depois").
   O .cv-fc-canal traz hover e cursor de link; aqui os dois são desligados. */
.cv-fc-canal--info {
    cursor: default;
}

.cv-fc-canal--info:hover {
    transform: none;
    border-color: var(--fc-linha);
    box-shadow: none;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-oc-abre,
    .cv-oc-dif,
    .cv-oc-saber,
    .cv-oc-form {
        padding-left: 24px;
        padding-right: 24px;
    }

}

@media (max-width: 991px) {

    /* Uma coluna: a caixa azul vai para baixo do texto. (A quebra do
       formulário é tratada pelo Contato.css, no .cv-fc-layout.) */
    .cv-oc-abre-grid {
        grid-template-columns: 1fr;
    }

    .cv-oc-saber-grade {
        grid-template-columns: 1fr;
    }

    .cv-oc-h2,
    .cv-oc-saber-h2 {
        font-size: 34px;
        line-height: 41px;
    }

}

@media (max-width: 767px) {

    .cv-oc-abre,
    .cv-oc-dif,
    .cv-oc-saber,
    .cv-oc-form {
        padding-top: 56px;
        padding-bottom: 62px;
    }

    .cv-oc-h2,
    .cv-oc-saber-h2 {
        font-size: 29px;
        line-height: 36px;
    }

    .cv-oc-saber-item {
        padding: 26px 24px 24px;
    }

    .cv-oc-abre-lead {
        font-size: 17px !important;
        line-height: 28px !important;
    }

    .cv-oc-caixa {
        padding: 28px 24px 26px;
    }

}

@media (max-width: 479px) {

    .cv-oc-abre,
    .cv-oc-dif,
    .cv-oc-saber,
    .cv-oc-form {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cv-oc-h2,
    .cv-oc-saber-h2 {
        font-size: 26px;
        line-height: 33px;
    }

    .cv-oc-saber-num {
        font-size: 28px;
    }

}