/* ==========================================================================
   css.css - CSS GLOBAL do site (carregado pelo Modulo_JsCss em toda pagina,
   ANTES do CSS especifico de cada pagina, ex.: index.css).

   Aqui fica tudo que e geral: reset, scrollbar, icones Lucide, loading
   (.page-loader, Est_1.php), animacao de entrada (.reveal, js.js), fontes
   (@font-face), base (body, img, titulos, .cv-container, .cv-titulo,
   .cv-seta), TOPO (.cv-topo, menu, hamburguer, botao Contato), RODAPE
   (.cv-rodape, .cv-copy), toasts do js.js e as regras responsivas dessas
   partes. Hovers e transicoes seguem o padrao do site web4business.com.br.

   O que e de UMA pagina (banner, secoes da home...) fica no CSS dela.

   Medidas em pixel vieram do render real do layout fatiado a 1920px
   (getBoundingClientRect), incluindo meios-pixels de proposito -- ver o
   comentario no topo do index.css. Breakpoints: ver o bloco RESPONSIVO.
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
}

:root {
    /* curva das transicoes de hover (mesma do web4business) */
    --cv-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   SCROLLBAR (fina, na paleta da marca: trilho creme, polegar azul, hover dourado)
   ========================================================================== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #0b294d #efe9d3;
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #efe9d3;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3a63 0%, #062345 100%);
    border-radius: 8px;
    border: 2px solid #efe9d3;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d2aa4c 0%, #b8922f 100%);
}

::-webkit-scrollbar-corner {
    background: #efe9d3;
}

/* ==========================================================================
   ICONES LUCIDE (base) - <i data-lucide="nome"> vira <svg class="lucide">
   via js.js; tamanho e cor sao dados pela classe de cada uso.
   ========================================================================== */

[data-lucide],
svg.lucide {
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

/* ==========================================================================
   LOADING (Est_1.php abre, Est_2.php fecha). O <style> inline do Est_1
   repete estas regras para o primeiro paint; aqui e a fonte canonica.
   ========================================================================== */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #062345;
    transition: opacity .4s ease, visibility .4s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(210, 170, 76, .22);
    border-top-color: #d2aa4c;
    animation: pageLoaderSpin .8s linear infinite;
}

@keyframes pageLoaderSpin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   ANIMACAO DE ENTRADA (scroll reveal) - mesmo motor do web4business.com.br

   O conteudo sobe e aparece ao entrar na tela. Irmaos entram um apos o
   outro: o js.js grava --i em cada um e o atraso e --i * --rv-step.

   IMPORTANTE: o conteudo SO fica escondido se o JS estiver ativo (a regra
   depende de .js no <html>, marcado pelo proprio js.js). Sem JS nada some.
   ========================================================================== */

:root {
    --rv-dur: 600ms;
    --rv-dist: 60px;
    --rv-step: 200ms;
    --rv-ease: ease-out;
}

.reveal {
    opacity: 1;
    transform: none;
}

.js .reveal {
    opacity: 0;
    transform: translateY(var(--rv-dist));
    transition: opacity var(--rv-dur) var(--rv-ease) calc(var(--i, 0) * var(--rv-step)),
                transform var(--rv-dur) var(--rv-ease) calc(var(--i, 0) * var(--rv-step));
}

/* O js.js roda com defer: a pagina JA foi pintada visivel quando ele marca
   .js no <html>. O .rv-armar zera a transicao durante essa troca (senao o
   conteudo visivel sumiria devagar antes de reanimar); o js.js o remove
   no frame seguinte. */
.rv-armar .reveal {
    transition: none !important;
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   TOASTS (window.cvToast, definido em js.js)

   O js.js sempre gerou esta marcacao, mas nao havia estilo para ela em lugar
   nenhum: as mensagens de erro do formulario apareciam como texto solto,
   empilhado no rodape da pagina. O estilo abaixo cobre o que o JS emite:
   .w4-toasts > .w4-toast--(error|success|info) > .w4-toast-ico + .w4-toast-text
   ========================================================================== */

.w4-toasts {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}

.w4-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 380px;
    padding: 13px 16px;
    border-radius: 10px;
    border-left: 4px solid #d32f2f;
    background: #fff;
    color: #1c1c1c;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .3s ease, transform .3s ease;
}

.w4-toast.is-in {
    opacity: 1;
    transform: none;
}

.w4-toast.is-out {
    opacity: 0;
    transform: translateX(24px);
}

/* icone desenhado em CSS, sem imagem */
.w4-toast-ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d32f2f;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.w4-toast-ico::before {
    content: "!";
}

.w4-toast-text {
    flex: 1 1 auto;
}

.w4-toast--success {
    border-left-color: #16a34a;
}

.w4-toast--success .w4-toast-ico {
    background: #16a34a;
}

.w4-toast--success .w4-toast-ico::before {
    content: "\2713";
}

.w4-toast--info {
    border-left-color: #374151;
}

.w4-toast--info .w4-toast-ico {
    background: #374151;
}

.w4-toast--info .w4-toast-ico::before {
    content: "i";
}

@media (max-width: 480px) {

    .w4-toasts {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .w4-toast {
        min-width: 0;
        max-width: none;
    }

}

/* ---- Fontes: arquivos em /fontes, preload no Est_JSTopo.php (a URL do
        preload precisa bater byte a byte com as url() abaixo).
        *-latin.woff2 = SUBSET (so os caracteres do portugues/latim), gerado
        por ferramentas/gerar-fontes-subset.cmd a partir dos hinted-*.woff2
        completos, que ficam como .woff de reserva. ---- */
@font-face {
    font-family: 'Afterglow';
    src: url('/fontes/Afterglow-Regular-latin.woff2') format('woff2'),
         url('/fontes/hinted-Afterglow-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('/fontes/Aeonik-Regular-latin.woff2') format('woff2'),
         url('/fontes/hinted-Aeonik-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('/fontes/Aeonik-Bold-latin.woff2') format('woff2'),
         url('/fontes/hinted-Aeonik-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Base ---- */
body {
    background: #f7f4e3;
    color: #062345;
    font-family: 'Aeonik', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

img {
    display: block;
}

/* <picture> (WebP + PNG de reserva) nao gera caixa: o <img> continua filho
   direto do pai, entao os seletores "x img" e o flex dos pais nao mudam. */
picture {
    display: contents;
}

/* Afterglow so existe em regular: peso bold sintetizaria um negrito falso. */
h1,
h2,
h3 {
    font-weight: 400;
}

.cv-container {
    width: 1170px;
    margin: 0 auto;
}

.cv-titulo {
    font: 400 54px/54px 'Afterglow', Georgia, serif;
    color: #0b294d;
}

/* Titulos que sao link para uma pagina propria (Conheca, Especialidades). */
.cv-titulo a {
    transition: opacity .25s var(--cv-ease);
}

.cv-titulo a:hover {
    opacity: .7;
}

/* Helper de acessibilidade: esconde visualmente mas mantem no fluxo para
   leitores de tela e buscadores (h1 do banner, cujo texto esta na imagem). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   TOPO DAS PAGINAS INTERNAS (.cv-pg-topo)

   Cabecalho padrao de toda pagina que nao e a home: migalhas, H1 e chamada.
   Fica no GLOBAL porque /contato/ e /Biografia.php usam as mesmas classes --
   quando o bloco era copiado no CSS de cada pagina, um ajuste em uma delas
   deixava a outra diferente.

   Visual: bloco azul da marca (#062345), o mesmo do rodape e do loading, no
   lugar da faixa creme lisa. A home abre com o banner escuro de 511px; as
   internas repetem esse peso em altura menor, entao a troca de pagina nao
   parece outro site. Sobre o azul vem:
     - um fundo trabalhado (degrade diagonal + brilho dourado + trama fina),
       montado so com CSS: nenhuma imagem nova para baixar;
     - a logo da marca em marca d'agua, so no desktop;
     - um filete dourado curto sob o H1 (assinatura da marca).
   ========================================================================== */

/* O fundo empilha 3 camadas (a primeira listada fica por cima):
     1. trama diagonal de 6px, quase imperceptivel, tirando a chapa lisa;
     2. brilho dourado saindo do canto superior direito;
     3. degrade diagonal, do azul mais claro para o azul profundo.
   O #062345 continua sendo a base solida, para o caso de o degrade nao pintar. */
.cv-pg-topo {
    position: relative;
    padding: 74px 0 66px;
    background-color: #062345;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(120% 140% at 88% 0%, rgba(210, 170, 76, .26) 0%, rgba(210, 170, 76, .06) 38%, rgba(210, 170, 76, 0) 66%),
        linear-gradient(115deg, #0e3560 0%, #072a4f 42%, #051d3a 100%);
    overflow: hidden;
}

/* Brilho no canto direito. Fica atras do conteudo (o .cv-container abaixo
   recebe position:relative + z-index) e nao captura clique. */
.cv-pg-topo::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 170, 76, .20) 0%, rgba(210, 170, 76, 0) 70%);
    pointer-events: none;
}

/* Marca d'agua: a LOGO da marca (o simbolo quadrado do rodape, 89x89),
   ampliada e bem apagada. Decorativa -- escondida ate 1199px para nao
   competir com o texto quando o espaco encolhe.

   ARMADILHA de ancoragem: com "right" em pixels a marca d'agua era empurrada
   para fora da tela em monitor largo (o bloco ocupa 100% da janela, mas o
   conteudo para no container de 1170px). A ancora correta e o CENTRO da tela
   deslocado meio container (585px), assim ela acompanha a borda direita do
   conteudo em qualquer largura.

   A imagem entra como background-image (e nao <img>) porque e decoracao pura:
   nao deve ser lida por leitor de tela nem aparecer na impressao do conteudo.
   opacity no proprio elemento (em vez de cor com alpha) por ser imagem. */
.cv-pg-topo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% + 585px - 300px);
    width: 260px;
    height: 260px;
    transform: translateY(-50%);
    background: url(/imagens/logo-rodape.png) center center / contain no-repeat;
    opacity: .07;
    pointer-events: none;
    user-select: none;
}

.cv-pg-topo .cv-container {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Migalhas
   -------------------------------------------------------------------------- */

.cv-migalhas {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    font: 400 13px/13px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.cv-migalhas a {
    color: rgba(255, 255, 255, .8);
    transition: color .25s var(--cv-ease);
}

.cv-migalhas a:hover {
    color: #d2aa4c;
}

.cv-migalhas span {
    margin: 0 9px;
}

.cv-migalhas-atual {
    margin: 0;
    color: #d2aa4c;
}

/* --------------------------------------------------------------------------
   Titulo + filete dourado + chamada
   -------------------------------------------------------------------------- */

/* O .cv-titulo global e azul escuro (fundo claro da home). Sobre o azul o
   texto precisa ser branco -- por isso a cor e redeclarada aqui. */
.cv-pg-titulo {
    margin: 0 0 22px;
    font-size: 62px;
    line-height: 64px;
    color: #fff;
}

/* Filete dourado sob o titulo (assinatura da marca). */
.cv-pg-titulo::after {
    content: "";
    display: block;
    width: 68px;
    height: 3px;
    margin-top: 20px;
    border-radius: 2px;
    background: #d2aa4c;
}

.cv-pg-chamada {
    margin: 0;
    font: 400 18px/30px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------------------------
   Assinatura: autoria visivel + data de atualizacao (Est_Assinatura.php)

   Fica DENTRO do .cv-pg-topo, abaixo da chamada. Discreta de proposito: o
   dado precisa estar na tela para o GEO (e para quem le), sem competir com
   o H1. Cor mais apagada que a da chamada pelo mesmo motivo.
   -------------------------------------------------------------------------- */

.cv-assinatura {
    margin: 18px 0 0;
    font: 400 14px/22px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .60);
}

.cv-assinatura a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    border-bottom: 1px solid rgba(198, 164, 92, .55);
    transition: color .25s var(--cv-ease), border-color .25s var(--cv-ease);
}

.cv-assinatura a:hover,
.cv-assinatura a:focus-visible {
    color: #c6a45c;
    border-bottom-color: #c6a45c;
}

.cv-assinatura-sep {
    margin: 0 8px;
}

/* --------------------------------------------------------------------------
   Responsivo do topo interno
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {

    .cv-pg-topo::after {
        display: none;
    }

}

@media (max-width: 991px) {

    .cv-pg-topo {
        padding: 56px 0 50px;
    }

    .cv-pg-titulo {
        font-size: 50px;
        line-height: 54px;
    }

}

@media (max-width: 767px) {

    .cv-pg-topo {
        padding: 44px 0 40px;
    }

    .cv-pg-titulo {
        font-size: 40px;
        line-height: 44px;
    }

    .cv-pg-chamada {
        font-size: 16px;
        line-height: 27px;
    }

    .cv-migalhas {
        margin-bottom: 20px;
    }

}

@media (max-width: 479px) {

    .cv-pg-titulo {
        font-size: 33px;
        line-height: 38px;
    }

    .cv-pg-titulo::after {
        margin-top: 16px;
    }

}

/* ==========================================================================
   CTA FINAL (.cv-cta) - bloco de chamada reutilizavel (Est_CTA.php)

   Fecha as paginas internas com o mesmo peso visual do .cv-pg-topo que as
   abre: a pagina comeca e termina no azul da marca, e o conteudo claro fica
   "emoldurado" entre os dois.

   Mora no GLOBAL pelo mesmo motivo do .cv-pg-topo: o bloco e usado por
   varias paginas e o CSS de pagina carrega DEPOIS daqui -- uma copia local
   sobrescreveria o visual e as paginas divergiriam a cada ajuste.

   NENHUM fundo e chapado: o azul e sempre um degrade, com brilho dourado e
   trama fina por cima. Tudo em CSS, sem imagem nova para baixar.
   ========================================================================== */

/* 3 camadas (a primeira listada fica por cima):
     1. trama diagonal de 6px, tirando a chapa lisa;
     2. brilho dourado subindo do rodape, do lado esquerdo;
     3. degrade diagonal, do azul profundo para o azul mais claro.
   O #062345 fica de base solida caso o degrade nao pinte. */
.cv-cta {
    position: relative;
    padding: 88px 0 96px;
    background-color: #062345;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
        radial-gradient(90% 120% at 12% 100%, rgba(210, 170, 76, .20) 0%, rgba(210, 170, 76, .05) 40%, rgba(210, 170, 76, 0) 68%),
        linear-gradient(155deg, #051d3a 0%, #072a4f 46%, #0e3560 100%);
    overflow: hidden;
    text-align: center;
}

/* Filete dourado no topo da secao: degrade que nasce e morre transparente,
   entao a linha nao encosta nas bordas da tela. */
.cv-cta::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%);
}

/* Halo dourado difuso atras do titulo, centralizado. Decorativo e sem
   captura de clique -- o .cv-cta-inner abaixo recebe z-index. */
.cv-cta::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 170, 76, .12) 0%, rgba(210, 170, 76, 0) 62%);
    pointer-events: none;
}

.cv-cta-inner {
    position: relative;
    z-index: 1;
}

/* Selo pequeno acima do titulo (nome da marca em caixa-alta espacada). */
.cv-cta-selo {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 18px;
    border: 1px solid rgba(210, 170, 76, .45);
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(210, 170, 76, .16) 0%, rgba(210, 170, 76, .04) 100%);
    font: 400 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #d2aa4c;
}

/* O .cv-titulo global e azul escuro (feito para fundo claro): sobre o azul
   o texto precisa ser claro, por isso a cor e redeclarada. */
.cv-cta-titulo {
    margin: 0 0 22px;
    font-size: 46px;
    line-height: 54px;
    color: #efe9d3;
}

/* Filete dourado sob o titulo, centralizado (assinatura da marca, igual ao
   .cv-pg-titulo -- ali alinhado a esquerda, aqui no meio). */
.cv-cta-titulo::after {
    content: "";
    display: block;
    width: 68px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #b8922f 0%, #d2aa4c 50%, #b8922f 100%);
}

.cv-cta-txt {
    max-width: 620px;
    margin: 0 auto 34px;
    font: 400 18px/30px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(239, 233, 211, .82);
}

.cv-cta-botoes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.cv-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 3px;
    font: 700 15px/15px 'Aeonik', Arial, Helvetica, sans-serif;
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease),
                border-color .25s var(--cv-ease), color .25s var(--cv-ease);
}

.cv-cta-btn:hover {
    transform: translateY(-2px);
}

.cv-cta-btn--dourado {
    background: linear-gradient(135deg, #e0bb63 0%, #d2aa4c 52%, #b8922f 100%);
    box-shadow: 0 10px 26px rgba(210, 170, 76, .26);
    color: #062345;
}

.cv-cta-btn--dourado:hover {
    box-shadow: 0 16px 34px rgba(210, 170, 76, .36);
}

.cv-cta-btn--vazado {
    border: 1px solid rgba(239, 233, 211, .55);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 100%);
    color: #efe9d3;
}

.cv-cta-btn--vazado:hover {
    border-color: #d2aa4c;
    color: #d2aa4c;
}

/* ARMADILHA do projeto: a base svg.lucide define fill:none/stroke:currentColor
   com especificidade tipo+classe -- o seletor precisa ser svg.classe, senao o
   icone sai na cor errada. */
svg.cv-cta-btn-ico {
    width: 19px;
    height: 19px;
    stroke: currentColor;
}

.cv-cta-assina {
    margin-top: 34px;
    font: 400 15px/24px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
    color: rgba(239, 233, 211, .55);
}

/* ---- Responsivo do CTA ---- */

@media (max-width: 991px) {

    .cv-cta {
        padding: 68px 0 74px;
    }

    .cv-cta-titulo {
        font-size: 38px;
        line-height: 46px;
    }

}

@media (max-width: 767px) {

    .cv-cta {
        padding: 54px 0 60px;
    }

    .cv-cta-titulo {
        font-size: 31px;
        line-height: 38px;
    }

    .cv-cta-txt {
        font-size: 16px;
        line-height: 27px;
    }

    /* Botoes em bloco: lado a lado eles ficariam estreitos demais. */
    .cv-cta-botoes .cv-cta-btn {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 479px) {

    .cv-cta-titulo {
        font-size: 27px;
        line-height: 34px;
    }

    .cv-cta-assina {
        font-size: 14px;
        line-height: 22px;
    }

}

/* Celula de 14px com a setinha de 9px (padrao "Clique para ver Ofertas" /
   "Saiba Mais"): o texto comeca sempre 14px depois da seta. */
.cv-seta {
    flex: none;
    width: 14px;
}

/* Lucide "play" preenchido em dourado no lugar do PNG de 9x14: no svg de
   24 unidades o triangulo ocupa x 6..20, por isso a margem negativa encosta
   o triangulo na borda esquerda da celula, como a imagem original. */
/* margin-top +1px: com isso o centro do triangulo cai no centro das
   maiusculas do texto ao lado (medido: sem o ajuste ficava 3px acima). */
.cv-seta svg {
    display: block;
    width: 16px;
    height: 18px;
    margin: 1px 0 0 -4px;
    fill: #e7ad14;
    stroke: #e7ad14;
    stroke-width: 1;
}

/* ==========================================================================
   TOPO (97px + linha dourada de 1px)
   ========================================================================== */

.cv-topo {
    height: 98px;
    background: #062345;
    border-bottom: 1px solid #d2aa4c;
}

/* A tabela interna do fatiado tem 66px de altura e fica centralizada nos
   97px: sobra 15,5px em cima. Tudo abaixo e posicionado a partir dai -- o
   meio pixel decide para que lado o navegador arredonda o fundo do botao. */
.cv-topo-inner {
    display: flex;
    height: 81.5px;
    padding-top: 15.5px;
}

.cv-logo {
    flex: none;
    display: block;
    width: 353px;
}

/* Wrapper de menu + Contato. No desktop e so um flex transparente (mesmas
   larguras do fatiado); ate 991px vira o painel do hamburguer. */
.cv-nav {
    display: flex;
}

.cv-menu-btn {
    display: none;
}

.cv-menu {
    display: flex;
    align-items: center;
    height: 66px;
}

.cv-menu-item {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #fff;
}

.cv-menu-item--1 { width: 103px; }
.cv-menu-item--2 { width: 109px; }
.cv-menu-item--3 { width: 156px; }
.cv-menu-item--4 { width: 182px; }

/* Sublinhado dourado que cresce no hover (padrao web4business, .main-nav
   a::after). Fica no <span> do texto, nao na celula de largura fixa. */
.cv-menu-item span {
    position: relative;
    display: inline-block;
}

.cv-menu-item span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #d2aa4c;
    transition: width .3s var(--cv-ease);
}

.cv-menu-item:hover span::after {
    width: 100%;
}

.cv-menu-sep {
    flex: none;
    width: 35px;
    height: 66px;
    background: url(/imagens/botao-menu.png) 0 31.5px no-repeat;
}

.cv-btn-contato {
    position: relative;
    display: block;
    width: 162px;
    height: 66px;
    background: url(/imagens/botao-contato-topo.png) right center no-repeat;
}

/* Lucide message-circle no lugar do PNG de 19x19 (mesma caixa). */
.cv-btn-contato .cv-btn-contato-ico {
    position: absolute;
    left: 44px;
    top: 24px;
    width: 19px;
    height: 19px;
    stroke: #062345;
    stroke-width: 2;
}

.cv-btn-contato span {
    position: absolute;
    left: 71px;
    top: 24.5px;
    font-size: 17px;
    line-height: 17px;
    color: #062345;
}

.cv-btn-contato {
    transition: transform .25s var(--cv-ease), opacity .25s var(--cv-ease);
}

.cv-btn-contato:hover {
    transform: translateY(-2px);
    opacity: .9;
}

/* ==========================================================================
   RODAPE
   ========================================================================== */

.cv-rodape {
    height: 340px;
    padding-top: 70px;
    background: #0c2749;
    color: #fff;
}

.cv-rodape-inner {
    display: flex;
    height: 246px;
}

.cv-rodape-col {
    flex: none;
}

.cv-rodape-col--1 { width: 259px; }
.cv-rodape-col--2 { width: 227px; }
.cv-rodape-col--3 { width: 311px; }
.cv-rodape-col--4 { width: 214px; }
.cv-rodape-col--5 { width: 159px; }

.cv-rodape-logo {
    height: 101px;
}

.cv-rodape-marca {
    height: 61px;
    font-size: 20px;
    line-height: 21px;
}

.cv-rodape-creci-wrap {
    display: flex;
    align-items: center;
    height: 47px;
}

.cv-creci-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 131px;
    height: 36px;
    background: url(/imagens/botao-creci-rodape.png) no-repeat;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: #062345;
}

.cv-rodape-h {
    height: 41px;
    font-weight: 700;
    font-size: 20px;
    line-height: 21px;
}

.cv-rodape-txt,
.cv-rodape-links a {
    display: block;
    font-size: 19px;
    line-height: 29px;
    color: #fff;
}

.cv-rodape-fone {
    height: 40px;
}

.cv-rodape-social {
    display: flex;
    gap: 12px;
    padding-top: 1px;
}

/* Alvo de toque de 27px (Lighthouse pede >= 24) sem mudar o visual: o link
   cresce 3px por lado e a margem negativa devolve o espaco ao layout. */
.cv-rodape-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin: -3px;
}

/* Icones sociais em SVG inline (tracos do Lucide), 21px como os PNG. */
.cv-rodape-social svg {
    display: block;
    width: 21px;
    height: 21px;
    stroke: #fff;
    stroke-width: 2;
    transition: opacity .25s var(--cv-ease), transform .25s var(--cv-ease);
}

.cv-rodape-social a:hover svg {
    opacity: .7;
    transform: translateY(-2px);
}

.cv-rodape-links a,
a.cv-rodape-txt,
.cv-rodape-fone,
.cv-copy a {
    transition: opacity .25s var(--cv-ease);
}

.cv-rodape-links a:hover,
a.cv-rodape-txt:hover,
.cv-rodape-fone:hover,
.cv-copy a:hover {
    opacity: .7;
}

/* Bloco (nao flex): os <span> do texto precisam continuar inline para os
   espacos ao redor dos "-" existirem. padding-top 27 = (74 - 20) / 2, a
   mesma posicao vertical que o flex centralizava. */
.cv-copy {
    display: block;
    height: 74px;
    padding-top: 27px;
    background: #f7f4e3;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #062345;
}

/* ==========================================================================
   RESPONSIVO (parte geral: topo, menu/hamburguer, rodape, container, titulos)

   Nada aqui se aplica a 1920px exatos. Faixas (as mesmas do index.css):
   >= 1921 ultra-wide | 1200-1919 desktop menor | <= 1199 tablet, container
   fluido, topo compacto | <= 991 hamburguer (.cv-menu-btn + painel
   .cv-nav.is-open, JS no index.js) | <= 767 uma coluna | <= 479 ate 320px.
   ========================================================================== */

/* ---- <= 1199 (tablet) ---- */
@media (max-width: 1199px) {

    .cv-container {
        width: auto;
        margin: 0 20px;
    }

    .cv-titulo {
        font-size: 44px;
        line-height: 48px;
    }

    /* Topo compacto: 285 + 489 + 162 = 936px, cabe em 992 - 40. */
    .cv-logo {
        width: 285px;
    }

    .cv-nav {
        margin-left: auto;
    }

    .cv-menu-item {
        font-size: 16px;
    }

    .cv-menu-item--1 { width: 80px; }

    .cv-menu-item--2 { width: 85px; }

    .cv-menu-item--3 { width: 125px; }

    .cv-menu-item--4 { width: 145px; }

    .cv-menu-sep {
        width: 18px;
    }

    /* Rodape: 3 colunas + 2. */
    .cv-rodape {
        height: auto;
        padding: 50px 0 20px;
    }

    .cv-rodape-inner {
        flex-wrap: wrap;
        height: auto;
    }

    .cv-rodape-col--1,
    .cv-rodape-col--2,
    .cv-rodape-col--3,
    .cv-rodape-col--4,
    .cv-rodape-col--5 {
        width: 33.333%;
        margin-bottom: 30px;
        padding-right: 16px;
    }

    .cv-rodape-h {
        height: auto;
        margin-bottom: 12px;
    }

    .cv-rodape-fone {
        height: auto;
    }

    /* block: com flex, o texto e o link "Web4Business" viravam dois itens
       lado a lado quando o texto quebra em varias linhas. */
    .cv-copy {
        display: block;
        height: auto;
        padding: 22px 20px;
    }

}

/* ---- <= 991 (celular e tablet vertical): hamburguer e banner quadrado ---- */
@media (max-width: 991px) {

    .cv-topo {
        height: auto;
    }

    .cv-topo-inner {
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        min-height: 70px;
        padding: 0;
    }

    .cv-logo {
        width: auto;
        margin-right: auto;
        padding: 14px 0;
    }

    .cv-logo img {
        width: 200px;
        height: auto;
    }

    .cv-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        cursor: pointer;
    }

    .cv-menu-btn-barra {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        transition: transform .2s ease, opacity .2s ease;
    }

    .cv-menu-btn[aria-expanded="true"] .cv-menu-btn-barra:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .cv-menu-btn[aria-expanded="true"] .cv-menu-btn-barra:nth-child(2) {
        opacity: 0;
    }

    .cv-menu-btn[aria-expanded="true"] .cv-menu-btn-barra:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Painel: ocupa a linha inteira abaixo do logo; so aparece com .is-open. */
    .cv-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        padding: 6px 0 18px;
        border-top: 1px solid rgba(210, 170, 76, .5);
    }

    .cv-nav.is-open {
        display: flex;
    }

    .cv-menu {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .cv-menu-item,
    .cv-menu-item--1,
    .cv-menu-item--2,
    .cv-menu-item--3,
    .cv-menu-item--4 {
        width: auto;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-size: 18px;
    }

    .cv-menu-sep {
        display: none;
    }

    /* Botao Contato solto (imagem de 148x45): icone e texto medidos do fatiado. */
    .cv-btn-contato {
        width: 148px;
        height: 45px;
        margin-top: 16px;
        background-position: 0 0;
    }

    .cv-btn-contato .cv-btn-contato-ico {
        left: 30px;
        top: 13.5px;
    }

    .cv-btn-contato span {
        left: 57px;
        top: 13px;
    }

}

/* ---- <= 767: uma coluna ---- */
@media (max-width: 767px) {

    .cv-titulo {
        font-size: 36px;
        line-height: 40px;
    }

    .cv-rodape-col--1,
    .cv-rodape-col--2,
    .cv-rodape-col--3,
    .cv-rodape-col--4,
    .cv-rodape-col--5 {
        width: 50%;
    }

    .cv-copy {
        font-size: 16px;
        line-height: 22px;
    }

}

/* ---- <= 479 (320 a 479px) ---- */
@media (max-width: 479px) {

    .cv-titulo {
        font-size: 30px;
        line-height: 34px;
    }

    .cv-rodape-col--1,
    .cv-rodape-col--2,
    .cv-rodape-col--3,
    .cv-rodape-col--4,
    .cv-rodape-col--5 {
        width: 100%;
        padding-right: 0;
    }

}

/* ==========================================================================
   MOBILE - rodape centralizado e copyright em 3 linhas (pedido 09/09/2026)
   ========================================================================== */
@media (max-width: 767px) {

    .cv-rodape-inner {
        justify-content: center;
        text-align: center;
    }

    .cv-rodape-col--1,
    .cv-rodape-col--2,
    .cv-rodape-col--3,
    .cv-rodape-col--4,
    .cv-rodape-col--5 {
        padding-right: 0;
    }

    .cv-rodape-logo img {
        margin: 0 auto;
    }

    .cv-rodape-creci-wrap,
    .cv-rodape-social {
        justify-content: center;
    }

    /* "Cida Ventura" / "Todos os Direitos Reservados" / "Powered by ...":
       uma linha cada, com respiro entre elas e a ultima menor. */
    .cv-copy {
        padding: 26px 20px;
    }

    .cv-copy-parte {
        display: block;
        padding: 3px 0;
    }

    .cv-copy-parte:last-child {
        font-size: 14px;
        line-height: 18px;
    }

    .cv-copy-sep {
        display: none;
    }

}

/* ==========================================================================
   FAQ GLOBAL (.cv-faq-*) -- perguntas frequentes em <details>/<summary>

   Vive no GLOBAL porque e usado por varias paginas (oportunidades, connect,
   contato). O gemeo .cv-esp-* do Especialidades.css continua onde esta: as 5
   especialidades ja estao publicadas e testadas com ele, e cada uma pinta o
   proprio acento pela --esp-acento.

   Aqui o acento cai no dourado da marca por padrao, e a pagina pode trocar
   redefinindo --cv-faq-acento no proprio bloco.

   Abre e fecha sem JS -- e por isso que o texto da resposta esta no HTML
   desde o primeiro byte, que e o que o GEO exige (SEO1.md 7: nada essencial
   so em JavaScript).
   ========================================================================== */

.cv-faq {
    --cv-faq-acento:       #c6a45c;
    --cv-faq-acento-forte: #a8863d;
    padding: 80px 0;
    background: #f7f4e3;
}

/* TITULO E INTRO do bloco de perguntas.

   Ficam AQUI, no global, e nao no CSS de cada pagina: o mesmo componente
   aparece na /ventura-connect/, nas 5 especialidades e nas 5 categorias de
   oportunidade, e quando o titulo dependia do CSS local as paginas
   divergiam -- as de oportunidade ficaram com o H2 no tamanho padrao e
   alinhado a ESQUERDA, enquanto todas as outras centralizavam. */

.cv-faq-titulo {
    margin-bottom: 14px;
    font-size: 40px;
    line-height: 47px;
    text-align: center;
}

.cv-faq-intro {
    max-width: 720px;
    margin: 0 auto;
    font: 400 17px/29px 'Aeonik', Arial, Helvetica, sans-serif;
    color: #46596e;
    text-align: center;
}

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

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

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

.cv-faq-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-faq-item summary::-webkit-details-marker {
    display: none;
}

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

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

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

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

@media (max-width: 991px) {

    .cv-faq {
        padding: 58px 0;
    }

    .cv-faq-titulo {
        font-size: 30px;
        line-height: 36px;
    }

    .cv-faq-intro {
        font-size: 16px;
        line-height: 27px;
    }

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

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

}