/* ==========================================================================
   ESPECIALIDADES - CSS compartilhado pelas 5 paginas de especialidade
   (Especialidades_Imoveis.php, _Veiculos, _Embarcacoes, _Aeronaves e
   _ConexoesInvestimentos).

   POR QUE UM CSS SO: as cinco paginas tem exatamente a mesma espinha --
   topo azul (.cv-pg-topo, global) + intro + o que entra + como funciona +
   perguntas + outras especialidades + CTA. Cinco arquivos quase iguais
   divergiriam a cada ajuste, que foi o problema ja vivido com o .cv-pg-topo
   entre a /contato/ e a /Biografia.php. O que muda de pagina para pagina e
   so a COR DE ACENTO, entregue por uma classe modificadora no <body>
   (.cv-esp--imoveis etc.) que redefine as variaveis --esp-*.

   Paleta da marca (mesma do css.css / index.css):
       azul escuro  #062345    azul do titulo  #0b294d
       dourado      #d2aa4c    creme           #efe9d3

   Layout FLUIDO dentro do .cv-container (1170px) -- nao replica fatiado de
   medidas fixas, igual a /contato/ e a /Biografia.php. Por isso o bloco
   responsivo no fim e curto.
   ========================================================================== */

/* ==========================================================================
   TEMA POR ESPECIALIDADE
   Cada modificadora abaixo so troca o par de cores de acento. As cores
   conversam com a marca (todas convivem com o azul #062345) e nao servem
   para "colorir" a pagina: o acento aparece em filetes, icones e numeros,
   nunca em area grande.
   ========================================================================== */

:root {
    --esp-acento:       #d2aa4c;
    --esp-acento-forte: #b8922f;
    --esp-tinta:        rgba(210, 170, 76, .14);
}

/* Imoveis - o dourado da marca, sem desvio */
.cv-esp--imoveis {
    --esp-acento:       #d2aa4c;
    --esp-acento-forte: #b8922f;
    --esp-tinta:        rgba(210, 170, 76, .14);
}

/* Veiculos - ouro mais fechado, leitura de metal */
.cv-esp--veiculos {
    --esp-acento:       #a8823a;
    --esp-acento-forte: #8a6a2b;
    --esp-tinta:        rgba(168, 130, 58, .14);
}

/* Embarcacoes - azul do mar, dentro da familia do azul da marca */
.cv-esp--embarcacoes {
    --esp-acento:       #2f7fa8;
    --esp-acento-forte: #22637f;
    --esp-tinta:        rgba(47, 127, 168, .14);
}

/* Aeronaves - azul de ceu alto, mais frio que o das embarcacoes */
.cv-esp--aeronaves {
    --esp-acento:       #4a72a8;
    --esp-acento-forte: #365684;
    --esp-tinta:        rgba(74, 114, 168, .14);
}

/* Conexoes e Investimentos - verde de crescimento, contraponto ao ouro */
.cv-esp--conexoes {
    --esp-acento:       #5c8a63;
    --esp-acento-forte: #456b4b;
    --esp-tinta:        rgba(92, 138, 99, .14);
}

/* ==========================================================================
   TITULOS DE SECAO desta familia de paginas
   ========================================================================== */

.cv-esp-h2 {
    margin-bottom: 18px;
    font-size: 40px;
    line-height: 46px;
}

.cv-esp-h2--centro {
    text-align: center;
}

/* Sobre fundo azul */
.cv-esp-h2--claro {
    color: #efe9d3;
}

/* ==========================================================================
   INTRO - foto + paragrafo de apresentacao da vertical
   ========================================================================== */

.cv-esp-intro {
    padding: 84px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcf6 62%, #f7f4e3 100%);
}

.cv-esp-intro-grid {
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 60px;
    align-items: center;
}

.cv-esp-intro-texto {
    max-width: 620px;
}

/* Selo com o icone da vertical, acima do H2 */
.cv-esp-selo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--esp-acento);
    border-radius: 100px;
    background: var(--esp-tinta);
    font: 700 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--esp-acento-forte);
}

/* ARMADILHA do projeto: svg.lucide define fill:none/stroke:currentColor com
   especificidade tipo+classe -- uma classe sozinha perde e o icone sai na
   cor errada. Por isso o seletor e svg.classe. */
svg.cv-esp-selo-ico {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Primeiro paragrafo com corpo maior e filete a esquerda: a "entrada" do
   texto, mesmo recurso da .cv-bio-corpo-abre da Biografia. */
.cv-esp-intro-abre {
    margin-bottom: 18px;
    padding-left: 20px;
    border-left: 3px solid var(--esp-acento);
    font-size: 19px;
    line-height: 31px;
    color: #16324f;
}

.cv-esp-intro-texto p {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 28px;
    color: #46596e;
}

.cv-esp-intro-texto p:last-of-type {
    margin-bottom: 26px;
}

/* Moldura da foto: o filete de acento deslocado atras da profundidade. */
.cv-esp-intro-foto {
    position: relative;
    border-radius: 4px;
}

.cv-esp-intro-foto::before {
    content: "";
    position: absolute;
    top: 18px;
    right: -18px;
    bottom: -18px;
    left: 18px;
    border: 2px solid var(--esp-acento);
    border-radius: 4px;
    opacity: .5;
}

.cv-esp-intro-foto img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 44px rgba(6, 35, 69, .18);
}

/* ==========================================================================
   O QUE ENTRA - cards do que a vertical cobre
   ========================================================================== */

.cv-esp-cobre {
    padding: 80px 0;
    background: #ffffff;
}

.cv-esp-cobre-intro {
    max-width: 720px;
    margin: 0 auto 42px;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #46596e;
}

.cv-esp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.cv-esp-card {
    padding: 32px 28px;
    border: 1px solid #e7e1cc;
    border-top: 3px solid var(--esp-acento);
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf9f0 100%);
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease);
}

.cv-esp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(6, 35, 69, .12);
}

svg.cv-esp-card-ico {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    stroke: var(--esp-acento-forte);
}

.cv-esp-card-h3 {
    margin-bottom: 10px;
    font: 700 19px/25px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
}

.cv-esp-card p {
    font-size: 15px;
    line-height: 26px;
    color: #46596e;
}

/* ==========================================================================
   COMO FUNCIONA - passos numerados (fundo azul)
   O numero e decorativo: quem le por leitor de tela ja recebe a ordem pela
   propria <ol>, entao ele vai no ::before e nao no HTML.
   ========================================================================== */

.cv-esp-passos {
    padding: 84px 0;
    background: #062345;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 55%);
}

.cv-esp-passos-intro {
    max-width: 720px;
    margin: 0 auto 46px;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: rgba(239, 233, 211, .8);
}

.cv-esp-passos-lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    counter-reset: passo;
}

.cv-esp-passo {
    position: relative;
    padding-top: 26px;
    border-top: 1px solid rgba(239, 233, 211, .22);
    counter-increment: passo;
}

.cv-esp-passo::before {
    content: counter(passo, decimal-leading-zero);
    display: block;
    margin-bottom: 12px;
    font: 700 34px/34px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--esp-acento);
}

.cv-esp-passo-h3 {
    margin-bottom: 8px;
    font: 700 17px/24px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #efe9d3;
}

.cv-esp-passo p {
    font-size: 15px;
    line-height: 25px;
    color: rgba(239, 233, 211, .72);
}

/* --------------------------------------------------------------------------
   PONTE PARA O FAQ GLOBAL

   O bloco de perguntas destas paginas passou a usar as classes .cv-faq-*
   do css.css (as mesmas da /ventura-connect/ e das paginas de oportunidade).
   Antes havia DOIS blocos de CSS gemeos para o mesmo componente, e eles ja
   tinham comecado a divergir.

   O que NAO se perde na migracao e a cor: cada especialidade tem o proprio
   acento (--esp-acento), e a linha abaixo repassa esse valor para a variavel
   que o bloco global le. Assim o "+" / o sinal de menos e a borda do item aberto
   continuam dourados em imoveis, azuis em embarcacoes e assim por diante.
   -------------------------------------------------------------------------- */

.cv-faq {
    --cv-faq-acento:       var(--esp-acento);
    --cv-faq-acento-forte: var(--esp-acento-forte);
}

/* ==========================================================================
   PERGUNTAS - CSS ANTIGO (.cv-esp-faq / .cv-esp-item), SEM USO

   Mantido temporariamente para referencia visual. Nenhuma pagina o aplica
   desde a migracao para o .cv-faq global. Pode ser removido com seguranca. Toda pergunta declarada no JSON-LD da pagina
   existe aqui como texto (regra do projeto para structured data).
   Usa <details>/<summary> nativos: abre e fecha sem JS.
   ========================================================================== */

.cv-esp-faq {
    padding: 80px 0;
    background: #f7f4e3;
}

.cv-esp-faq-lista {
    max-width: 860px;
    margin: 36px auto 0;
}

.cv-esp-item {
    margin-bottom: 12px;
    border: 1px solid #e7e1cc;
    border-radius: 4px;
    background: #ffffff;
    transition: border-color .25s var(--cv-ease);
}

.cv-esp-item[open] {
    border-color: var(--esp-acento);
}

.cv-esp-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    font: 700 17px/25px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
    list-style: none;
}

/* Some com a setinha nativa (Chrome/Safari usam o pseudo do WebKit) */
.cv-esp-item summary::-webkit-details-marker {
    display: none;
}

.cv-esp-item summary::after {
    content: "+";
    flex: 0 0 auto;
    font: 400 26px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--esp-acento-forte);
}

/* Sinal de menos (U+2212) quando aberto */
.cv-esp-item[open] summary::after {
    content: "\2212";
}

.cv-esp-item summary:hover {
    color: var(--esp-acento-forte);
}

.cv-esp-item-txt {
    padding: 0 24px 22px;
    font-size: 15px;
    line-height: 27px;
    color: #46596e;
}

/* ==========================================================================
   OUTRAS ESPECIALIDADES - navegacao lateral entre as 5 paginas
   A pagina atual NAO entra na lista (nao se linka para si mesma): cada
   arquivo omite o proprio item no HTML.
   ========================================================================== */

.cv-esp-outras {
    padding: 74px 0;
    background: #ffffff;
}

.cv-esp-outras-lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 34px;
}

/* Sem marcador nativo: nao ha reset global de ul no css.css, entao as
   grades em <ul> mostravam o ponto do <li> ao lado de cada card. */
.cv-esp-cards,
.cv-esp-passos-lista,
.cv-esp-outras-lista {
    list-style: none;
}

.cv-esp-outra a {
    display: block;
    height: 100%;
    padding: 26px 22px;
    border: 1px solid #e7e1cc;
    border-radius: 4px;
    background: #fbf9f0;
    transition: transform .25s var(--cv-ease), border-color .25s var(--cv-ease),
                box-shadow .25s var(--cv-ease);
}

.cv-esp-outra a:hover {
    transform: translateY(-4px);
    border-color: #d2aa4c;
    box-shadow: 0 14px 30px rgba(6, 35, 69, .1);
}

svg.cv-esp-outra-ico {
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    stroke: #b8922f;
}

.cv-esp-outra-h3 {
    margin-bottom: 6px;
    font: 700 17px/23px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
}

.cv-esp-outra p {
    font-size: 14px;
    line-height: 23px;
    color: #46596e;
}

/* ==========================================================================
   RESPONSIVO
   O layout ja e fluido dentro do container, entao aqui so as quebras de grid.
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-esp-intro-grid {
        grid-template-columns: 1fr 360px;
        gap: 44px;
    }

    .cv-esp-h2 {
        font-size: 34px;
        line-height: 40px;
    }

}

@media (max-width: 991px) {

    .cv-esp-intro,
    .cv-esp-passos {
        padding: 62px 0;
    }

    .cv-esp-cobre,
    .cv-esp-faq,
    .cv-esp-outras {
        padding: 58px 0;
    }

    /* Foto abaixo do texto: em tablet a coluna de 360px espremia o paragrafo */
    .cv-esp-intro-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .cv-esp-intro-texto {
        max-width: none;
    }

    .cv-esp-intro-foto {
        max-width: 520px;
    }

    .cv-esp-cards,
    .cv-esp-passos-lista,
    .cv-esp-outras-lista {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767px) {

    .cv-esp-h2 {
        font-size: 29px;
        line-height: 35px;
    }

    .cv-esp-intro-abre {
        font-size: 17px;
        line-height: 29px;
    }

    /* O filete deslocado da moldura sairia da tela no celular */
    .cv-esp-intro-foto::before {
        display: none;
    }

    .cv-esp-cards,
    .cv-esp-passos-lista,
    .cv-esp-outras-lista {
        grid-template-columns: 1fr;
    }

    .cv-esp-item summary {
        padding: 17px 18px;
        font-size: 16px;
        line-height: 23px;
    }

    .cv-esp-item-txt {
        padding: 0 18px 18px;
    }

}

@media (max-width: 479px) {

    .cv-esp-h2 {
        font-size: 25px;
        line-height: 31px;
    }

    .cv-esp-card {
        padding: 26px 22px;
    }

}