/* ============================================================================
   10º TABELIONATO DE NOTAS RECIFE — Identidade de marca (override)
   ----------------------------------------------------------------------------
   Este arquivo aplica a identidade oficial do branding (Abril/2026) SOBRE o
   tema Crafto. É carregado por último no _Layout, portanto vence a cascata.
   Foco: VERDE oficial como cor principal, tipografia oficial (Germaine + Neue
   Haas Grotesk), respiro/espaçamento e correção de textos justificados.
   Editar aqui evita mexer nos arquivos gigantes do tema (style/responsive.css).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TIPOGRAFIA OFICIAL
   Serifa (Germaine) = "10º" / títulos de tradição.
   Sans-serif (Neue Haas Grotesk) = textos, leitura, modernidade.
   As 3 variações já existem em /fonts/NeueHaasGrotesk/.
--------------------------------------------------------------------------- */
@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplayRoman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplayMediu.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplayBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. PALETA OFICIAL (calibrada a partir do PDF de branding)
--------------------------------------------------------------------------- */
:root {
    /* Cor PRINCIPAL da marca */
    --verde: #4F6255;            /* Verde profundo — equilíbrio, serenidade, decisões seguras */
    --verde-escuro: #3B4A40;     /* estados hover / profundidade */
    --verde-claro: #EAEDE7;      /* tinta clara p/ fundos de seção */

    /* Cores de apoio (paleta institucional) */
    --azul: #5C8493;             /* Azul sofisticado — confiança e segurança jurídica */
    --dourado: #B8975A;          /* Dourado institucional — prestígio e tradição */
    --terracota: #B05941;        /* Terracota — proximidade e acolhimento */

    /* Neutros */
    --creme: #EFEBE0;            /* creme (detalhes de marca) */
    --grafite: #41413F;          /* texto principal (cinza grafite quente) */
    --fundo-claro: #F3F5F2;      /* fundo de seção: verde-neutro bem claro e limpo */

    /* Sobrescreve as variáveis do tema Crafto */
    --base-color: #4F6255;       /* accent do tema = verde */
    --alt-font: 'Germaine', 'Playfair Display', serif;
    --primary-font: 'Neue Haas Grotesk', 'SF Pro Display', Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   3. BASE / RESPIRO (o layout precisa "respirar")
--------------------------------------------------------------------------- */
body {
    font-family: var(--primary-font);
    font-size: 17px;
    line-height: 1.8;              /* mais respiro na leitura */
    color: var(--grafite);
    letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.2px;
    line-height: 1.25;
}

p {
    margin-bottom: 1.35rem;        /* espaçamento consistente entre parágrafos */
}

/* Fonte serifada oficial reservada aos títulos de destaque */
.alt-font { font-family: var(--alt-font) !important; }
.primary-font { font-family: var(--primary-font) !important; }

/* ---------------------------------------------------------------------------
   4. CORREÇÃO DE TEXTO JUSTIFICADO  ->  alinhamento à esquerda
   Cobre tanto o tema (.jornal-box) quanto conteúdo vindo do banco de dados
   com estilo inline (o !important vence o inline sem !important).
--------------------------------------------------------------------------- */
.jornal-box,
.blog-details,
[style*="text-align: justify"],
[style*="text-align:justify"],
.text-justify {
    text-align: left !important;
    text-justify: auto !important;
}

/* ---------------------------------------------------------------------------
   5. LINKS, ACENTOS E CORES DO TEMA -> VERDE
--------------------------------------------------------------------------- */
a { color: var(--verde); }
a:hover { color: var(--verde-escuro); }

.text-base-color,
.text-base-color a { color: var(--verde) !important; }

.bg-base-color { background-color: var(--verde) !important; }
.bg-verde,
.bg-dark-gray.bg-verde { background-color: var(--verde) !important; }

.border-color-base-color { border-color: var(--verde) !important; }

/* seções em tinta clara: verde-neutro bem claro (substitui o creme "avermelhado") */
.bg-very-light-gray,
.bg-light-gray,
.bg-solitude { background-color: var(--fundo-claro) !important; }

/* menu / navegação — hover/active em DOURADO (contrasta no topo, elegante) */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .simple-dropdown .dropdown-menu li a:hover,
.navbar .navbar-nav .mega-menu a:hover { color: var(--dourado) !important; }

/* Remove a borda/contorno que aparecia ao interagir com o item do menu (mobile).
   Mantém apenas a mudança de cor como feedback; o feedback de foco acessível
   segue nos formulários e botões (seção 11.4). */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:focus-visible,
.navbar .navbar-nav .nav-link:active,
.navbar .navbar-nav .dropdown-menu a:hover,
.navbar .navbar-nav .dropdown-menu a:focus,
.navbar .navbar-nav .dropdown-menu a:focus-visible,
.navbar .navbar-nav .mega-menu a:hover,
.navbar .navbar-nav .mega-menu a:focus,
.navbar .navbar-nav .mega-menu a:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Ícone do top header em DOURADO (detalhe institucional) */
.header-top-bar .text-base-color,
.header-top-bar i.text-base-color { color: var(--dourado) !important; }

/* Top header: alinhamento vertical + espaçamento consistente (flexbox + gap) */
.header-top-bar .row > .col-md-12 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 30px;
}
.header-top-bar .widget {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin: 0 !important;
    line-height: 1.4;
}
.header-top-bar .widget a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
.header-top-bar .widget a i { margin: 0 !important; }

/* ---------------------------------------------------------------------------
   6. BOTÕES
--------------------------------------------------------------------------- */
.btn-base-color,
.btn.btn-base-color {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: #fff !important;
}
.btn-base-color:hover,
.btn.btn-base-color:hover {
    background-color: var(--verde-escuro) !important;
    border-color: var(--verde-escuro) !important;
    color: #fff !important;
}

/* CTA "Área do cliente" — agora em VERDE (marca dominante, sobriedade) */
.btn-gradient-terracota {
    background-image: none !important;
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: #fff !important;
}
.btn-gradient-terracota:hover { background-color: var(--verde-escuro) !important; }

.btn-transparent-white:hover {
    background-color: #fff !important;
    color: var(--verde) !important;
    border-color: #fff !important;
}

/* ---------------------------------------------------------------------------
   7. BREADCRUMB / PAGE-TITLE  (solicitação específica)
   - Fundo VERDE oficial (remove banner de banco de imagens + overlay escuro)
   - Círculos concêntricos no fundo, no estilo gráfico do PDF (folder / cartão)
--------------------------------------------------------------------------- */
.page-title-big-typography,
section.page-title-big-typography {
    position: relative;
    background-color: var(--verde) !important;
    background-image: none !important;   /* remove a imagem genérica (banner1.png) */
    overflow: hidden;
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
}

/* neutraliza o overlay escuro do tema para não sujar o verde */
.page-title-big-typography .opacity-medium.bg-dark-gray,
.page-title-big-typography > .bg-dark-gray {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Círculos concêntricos — motivo gráfico do branding (folder / cartão de visita).
   SVG inline em traço creme, baixa opacidade, ancorado à direita. */
.page-title-big-typography::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    max-width: 42%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23EFEBE0' stroke-opacity='0.16' stroke-width='1.4'%3E%3Ccircle cx='300' cy='300' r='60'/%3E%3Ccircle cx='300' cy='300' r='120'/%3E%3Ccircle cx='300' cy='300' r='180'/%3E%3Ccircle cx='300' cy='300' r='240'/%3E%3Ccircle cx='300' cy='300' r='296'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* garante o conteúdo (breadcrumb + título) acima dos círculos */
.page-title-big-typography .container { position: relative; z-index: 1; }

/* breadcrumb em si — vira um CAMINHO de navegação discreto (não compete com o
   título grande h2). Assim o título de destaque aparece uma única vez. */
.page-title-big-typography .breadcrumb-custom,
.breadcrumb-custom {
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    opacity: .8;
}
.page-title-extra-small h1 { margin-bottom: 2px !important; }
.breadcrumb-custom a { color: rgba(255,255,255,.85); }
.breadcrumb-custom a:hover { color: #fff; }
/* remove a "barrinha"/bolinha branca órfã do tema e deixa só uma barra "/" limpa */
.breadcrumb-custom .separator {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}
.breadcrumb-custom .separator::before {
    content: "/";
    padding: 0 8px;
    color: rgba(255,255,255,.55);
}

/* subtítulo (h2) do page-title com respiro */
.page-title-big-typography h2 { margin-top: .35rem; }

/* ---------------------------------------------------------------------------
   8. RODAPÉ — verde escuro institucional (sem "bloco preto" pesado)
--------------------------------------------------------------------------- */
footer.bg-dark,
footer.footer-dark { background-color: #2E3A33 !important; }
footer .divider-style-03 { border-color: rgba(255,255,255,.12) !important; }
footer .text-base-color { color: var(--dourado) !important; } /* títulos: leve toque dourado */
footer a:hover { color: var(--verde-claro) !important; }

/* ---------------------------------------------------------------------------
   8b. RESTRIÇÃO DE PALETA — "menos é mais"
   O cliente pediu foco TOTAL no verde. Aqui as cores secundárias (terracota,
   dourado, azul) que dominavam o layout são remapeadas para o verde da marca.
   Elas permanecem apenas como detalhes mínimos e pontuais.
--------------------------------------------------------------------------- */
/* Blocos/fundos de SEÇÃO que eram terracota ou dourado -> verde da marca.
   (Os overlays de hover dos cards são tratados à parte, na seção 13.) */
section.bg-terracota,
.p-0.bg-terracota { background-color: var(--verde) !important; }
.bg-dourado:not(.feature-box-overlay) { background-color: var(--verde-escuro) !important; }

/* Gradientes terracota do tema -> verde sólido e sóbrio */
.bg-gradient-black-dark-terracota,
.bg-gradient-dark-terracota-transparent,
.bg-gradient-terracota { background-image: none !important; background-color: var(--verde) !important; }

/* Textos de destaque que eram terracota -> verde */
.text-terracota { color: var(--verde) !important; }

/* Em faixas verdes, o botão principal fica claro (contraste + sobriedade) */
.bg-verde .btn-base-color,
.bg-terracota .btn-base-color,
.bg-verde .btn.btn-base-color,
.bg-terracota .btn.btn-base-color {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--verde) !important;
}
.bg-verde .btn-base-color:hover,
.bg-terracota .btn-base-color:hover {
    background-color: var(--creme) !important;
    color: var(--verde-escuro) !important;
}


/* ---------------------------------------------------------------------------
   9. PLACEHOLDERS DE IMAGEM (fotos reais do cartório ainda não enviadas)
   Espaço preparado com aspecto correto + moldura de marca.
--------------------------------------------------------------------------- */
.img-placeholder {
    display: block;
    width: 100%;
    background-color: var(--verde);
    border-radius: 6px;
    object-fit: cover;
}
.img-placeholder-16x9 { aspect-ratio: 16 / 9; }
.img-placeholder-1x1  { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------------------
   10. AJUSTES DE ESPAÇAMENTO / RESPONSIVO
--------------------------------------------------------------------------- */
.jornal-box { line-height: 1.85; }
.jornal-box .img-jornal { border-radius: 6px; }

/* Harmonia global: respiro consistente entre as seções e o topo da página.
   O breadcrumb encosta no menu transparente — garante um respiro após ele. */
.page-title-big-typography + section,
.main > section:first-child { margin-top: 0; }
.main section { scroll-margin-top: 90px; }

/* faixa verde de destaque (ex.: "Área do Profissional") com respiro interno */
.bg-verde, .bg-terracota { padding-block: 0; }
.bg-terracota .cover-background { min-height: 360px; }

@media (max-width: 991px) {
    body { font-size: 16px; line-height: 1.75; }
    .page-title-big-typography {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (max-width: 575px) {
    .page-title-big-typography::before { right: 0; opacity: .8; max-width: 55%; }
}

/* ---------------------------------------------------------------------------
   11. AJUSTES CIRÚRGICOS DE COMPONENTES
--------------------------------------------------------------------------- */

/* 11.1 Filtro de Serviços — tipografia sem serifa (leitura mais clara) */
.portfolio-filter,
.portfolio-filter a,
.portfolio-filter li a { font-family: var(--primary-font) !important; letter-spacing: .2px; }
.portfolio-filter li.active a,
.portfolio-filter li a:hover { color: var(--verde) !important; }

/* 11.2 Card "Fale com especialista" (Detalhe do Serviço)
   Fundo verde; precisa de título nítido e telefone com alto contraste. */
.bg-verde a:not(.btn),
.bg-terracota a:not(.btn) { color: #fff !important; }
.bg-verde a:not(.btn):hover,
.bg-terracota a:not(.btn):hover { color: var(--creme) !important; }
/* título "Fale com especialista": remove o apagado */
.bg-verde .feature-box-content .opacity-6 { opacity: .9 !important; }
.bg-verde .feature-box-content .fw-300 { font-weight: 400 !important; }
/* telefone: branco, nítido e maior peso */
.bg-verde .feature-box-content .fw-500 a { color: #fff !important; font-weight: 500 !important; }
/* ícone circular: verde escuro para destacar do fundo verde do card */
.bg-verde .feature-box-icon-rounded.bg-base-color,
.bg-verde .rounded-box.bg-base-color { background-color: var(--verde-escuro) !important; }

/* 11.3 WhatsApp flutuante — ícone perfeitamente centralizado (flexbox) */
.whatsapp2 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}
.whatsapp2 i {
    margin: 0 !important;
    line-height: 1 !important;
}

/* 11.4 Estados globais de hover / active / focus — harmonia (verde dominante) */
a { transition: color .2s ease; }
.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* foco acessível e consistente (contorno verde) */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--verde) !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* botões escuros do tema -> verde (mantém tudo na cor da marca) */
.btn-dark-gray {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: #fff !important;
}
.btn-dark-gray:hover {
    background-color: var(--verde-escuro) !important;
    border-color: var(--verde-escuro) !important;
}

/* listas/links com hover base-color -> verde (consistência) */
.text-base-color-hover:hover,
a.text-base-color-hover:hover { color: var(--verde) !important; }

/* divisórias finas: único ponto onde o terracota aparece como detalhe */
.divider-terracota,
hr.detalhe-terracota { border-color: var(--terracota) !important; }

/* ---------------------------------------------------------------------------
   12. MICRO-ACENTOS — dourado + azul (~5% da paleta)
   Verde domina; dourado e azul aparecem só em pequenos itens pontuais.
--------------------------------------------------------------------------- */

/* 12.1 DOURADO — pequenos indicadores/controles */
/* Paginação do banner ("troca de página") — era terracota, agora dourado */
.swiper-number-pagination-style-02 .swiper-number .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-number-pagination-style-02 .swiper-number .swiper-pagination-bullet.swiper-pagination-bullet-active:before,
.swiper-pagination-bullet-active { background: var(--dourado) !important; }

/* Setas dos itens de lista (ex.: Mensalista "Serviços disponíveis") */
.list-style-02 li i { color: var(--dourado) !important; }

/* Ponto do indicador "Voltar ao topo" */
.scroll-progress .scroll-point { background-color: var(--dourado) !important; }

/* Sublinhado de destaque em hover (detalhe fino) */
.text-decoration-line-bottom:hover { text-decoration-color: var(--dourado); }

/* 12.2 AZUL — detalhes informativos pontuais */
/* Ícones de meta das notícias (data, autor, categoria) */
.blog-standard .entry-meta span i,
.entry-meta i { color: var(--azul) !important; }
/* Obs.: o círculo do check de benefícios (.icon-mensalista) já é azul no tema,
   com hover dourado — mais um ponto pequeno de azul/dourado na página Mensalista. */

/* ---------------------------------------------------------------------------
   13. CARDS, HOVERS E FUNDOS INSTITUCIONAIS
--------------------------------------------------------------------------- */

/* 13.1 Hover dos cards "Por que o 10º é diferente?" — PADRONIZADO em azul
   (idêntico na Home e na página Sobre; antes eram 4 cores diferentes). */
.feature-box-overlay,
.feature-box-overlay.bg-verde,
.feature-box-overlay.bg-azul,
.feature-box-overlay.bg-dourado,
.feature-box-overlay.bg-terracota { background-color: var(--azul) !important; }

/* 13.2 Cards "Diretrizes" (Missão / Visão / Valores) — modernos e elegantes */
.diretriz-card {
    background-color: #fff !important;
    border: 1px solid #E7EAE4 !important;
    box-shadow: 0 14px 36px rgba(31, 46, 38, .09) !important;
    border-radius: 14px !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.diretriz-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 46px rgba(31, 46, 38, .14) !important;
}
/* faixa/título do card (Missão/Visão/Valores) */
.diretriz-card > .bg-base-color {
    background-color: var(--verde) !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
    letter-spacing: .5px;
}
/* corpo do card com mais respiro */
.diretriz-card .pricing-header { padding: 1.9rem 1.75rem !important; }

/* 13.5 Ícones "Por que o 10º é diferente?" — traço fino + anel de círculo,
   no estilo gráfico do PDF de branding. Renderizados via mask para herdarem
   a cor (verde) e acompanharem o hover. */
.brand-diff-icon {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;              /* centralizado sobre o texto (que é centralizado) */
    background-color: currentColor;   /* usa a cor do texto (verde via text-base-color) */
    -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
    -webkit-mask-position: center;     mask-position: center;
    -webkit-mask-size: contain;        mask-size: contain;
}
.bdi-star   { -webkit-mask-image: url('../images/icons/diff-star.svg');   mask-image: url('../images/icons/diff-star.svg'); }
.bdi-notary { -webkit-mask-image: url('../images/icons/diff-notary.svg'); mask-image: url('../images/icons/diff-notary.svg'); }
.bdi-shield { -webkit-mask-image: url('../images/icons/diff-shield.svg'); mask-image: url('../images/icons/diff-shield.svg'); }
.bdi-heart  { -webkit-mask-image: url('../images/icons/diff-heart.svg');  mask-image: url('../images/icons/diff-heart.svg'); }

/* 13.3 Neutraliza o bege quente do tema (.bg-spring-wood) */
.bg-spring-wood { background-color: var(--fundo-claro) !important; }

/* 13.4 Fundo institucional dos formulários (Área do Profissional / Dúvidas)
   Verde da marca + grafismo de círculos concêntricos (folder do PDF). */
.section-marca {
    position: relative;
    background-color: var(--verde);
    background-repeat: no-repeat, no-repeat;
    background-position: right -120px top -80px, left -160px bottom -120px;
    background-size: 460px 460px, 520px 520px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23EFEBE0' stroke-opacity='0.13' stroke-width='1.4'%3E%3Ccircle cx='300' cy='300' r='70'/%3E%3Ccircle cx='300' cy='300' r='140'/%3E%3Ccircle cx='300' cy='300' r='210'/%3E%3Ccircle cx='300' cy='300' r='280'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23EFEBE0' stroke-opacity='0.10' stroke-width='1.3'%3E%3Ccircle cx='300' cy='300' r='90'/%3E%3Ccircle cx='300' cy='300' r='170'/%3E%3Ccircle cx='300' cy='300' r='250'/%3E%3C/g%3E%3C/svg%3E");
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    overflow: hidden;
}
.section-marca > .container { position: relative; z-index: 1; }