/* =========================================================================
   2º RI Camaçari — camada visual própria
   Paleta: logo do cartório
   Marca: vermelho #A71E27 + preto + branco (sem azul)
   [2026-09] corrigido de #9B0102 (amostra de pixel do SVG) para #A71E27,
   confirmado como a cor oficial da marca — ver memória design-direction.
   Tipografia: Montserrat (títulos + corpo) — igual ao layout Poket aprovado
   pelo cliente, auto-hospedada (sem CDN, arquivo variável 100-900)
   ========================================================================= */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ri-vermelho: #A71E27;
    --ri-vermelho-hover: #B44047;
    --ri-vermelho-fundo: #78161C;
    --ri-preto: #161616;
    --ri-tinta: #1F2124;
    --ri-cinza: #6B6B6B;
    --ri-linha: #E6E6E6;
    --ri-fundo: #F6F4F3;
    --branco: #FFFFFF;

    --ri-fonte-titulo: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    --ri-fonte-corpo: 'Montserrat', 'Segoe UI', Arial, sans-serif;

    --ri-container: 1140px;
    --ri-raio: 6px;
    --ri-transicao: .16s ease;
}

/* preloader do tema herdado — desativado (site estático, sem tela de carregamento) */
#preloader { display: none !important; }

/* ---------------------------------------------------------------- base --- */
/* overflow-x:hidden em html/body desativa position:sticky (o menu não acompanhava o scroll);
   clip mantém a proteção contra rolagem horizontal sem criar contêiner de rolagem. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
body {
    font-family: var(--ri-fonte-corpo);
    color: var(--ri-tinta);
    font-size: 16px;
    line-height: 1.7;
    background: var(--branco);
}
h1, h2, h3, h4, h5, .megamenu .navbar-nav > li > a {
    font-family: var(--ri-fonte-titulo);
    color: var(--ri-preto);
    font-weight: 600;
    line-height: 1.25;
}
a { color: var(--ri-vermelho); transition: color var(--ri-transicao); }
a:hover, a:focus { color: var(--ri-vermelho-hover); text-decoration: none; }
img { max-width: 100%; height: auto; }

.ri-container { max-width: var(--ri-container); margin: 0 auto; padding: 0 20px; }

/* botões */
.btn-ri {
    display: inline-block;
    font-family: var(--ri-fonte-titulo);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .3px;
    padding: 13px 28px;
    border-radius: var(--ri-raio);
    border: 2px solid var(--ri-vermelho);
    background: var(--ri-vermelho);
    color: #fff;
    transition: background var(--ri-transicao), border-color var(--ri-transicao), color var(--ri-transicao);
    cursor: pointer;
}
.btn-ri:hover, .btn-ri:focus { background: var(--ri-vermelho-hover); border-color: var(--ri-vermelho-hover); color: #fff; }
.btn-ri--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.btn-ri--ghost:hover, .btn-ri--ghost:focus { background: #fff; border-color: #fff; color: var(--ri-preto); }
.btn-ri--dark { background: var(--ri-preto); border-color: var(--ri-preto); }
.btn-ri--dark:hover { background: #000; border-color: #000; }

/* ---------------------------------------------------------- faixa vermelha decorativa --- */
.ri-top-accent { background: var(--ri-vermelho); height: 46px; }
@media (max-width: 1329px) { .ri-top-accent { display: none; } }

/* ---------------------------------------------------- aviso "Site em Construção" --- */
.ri-aviso-construcao {
    background: #fff;
    color: var(--ri-vermelho);
    text-align: center;
    font-family: var(--ri-fonte-titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ri-linha);
}

/* ------------------------------------------------------------ topo (logo/contatos/email) --- */
.ri-header-top { background: #fff; padding: 46px 0 24px; }
.ri-header-top .ri-htop-logo { display: block; }
.ri-header-top .ri-htop-logo img { max-height: 66px; width: auto; }
.ri-htop-box { display: flex; align-items: flex-start; gap: 8px; height: 100%; }
.ri-htop-box .fa {
    flex: none;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ri-vermelho);
    color: #fff;
    border-radius: var(--ri-raio);
    font-size: 18px;
}
.ri-htop-box h4 { margin: 0; line-height: 1.2; font-family: var(--ri-fonte-titulo); font-size: 18px; font-weight: 700; color: var(--ri-vermelho); }
.ri-htop-box p { margin: -12px 0 0; font-size: 16px; color: var(--ri-cinza); }
.ri-htop-box p a { color: var(--ri-cinza); }
.ri-htop-box p a:hover { color: var(--ri-vermelho); }
.ri-htop-social { padding-top: 9px; }
.ri-htop-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--ri-raio);
    background: rgba(167, 30, 39, .08);
    color: var(--ri-vermelho);
    font-size: 18px;
}
.ri-htop-social a:hover { background: var(--ri-vermelho); color: #fff; }
@media (max-width: 1329px) { .ri-header-top { display: none; } }
.ri-header-top .row > div:nth-child(2) { padding-left: 55px; }
.ri-header-top .row > div:nth-child(3) { padding-left: 34px; }

/* ----------------------------------------------------------- cabeçalho -- */
.header.header_style_01 {
    position: sticky;
    top: 15px;
    z-index: 999;
    background: transparent;
    box-shadow: none;
    padding-top: 0 !important;
    transition: box-shadow var(--ri-transicao);
}
/* o tema (JS) adiciona .fixed-menu ao rolar e essa regra herdada põe 15px de padding no menu,
   deixando a pílula 30px mais alta quando fixa */
.header.header_style_01 .megamenu.navbar-default { padding: 0; }
.ri-header-spacer { display: none; }
@media (min-width: 1330px) {
    .header.header_style_01.is-stuck { position: fixed; top: 0; left: 0; right: 0; padding-top: 0 !important; }
}
.megamenu.navbar-default {
    background: #fff;
    border: 0;
    min-height: 80px;
    max-width: 1140px;
    margin: 0 auto -32px;
    border-radius: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    position: relative;
    z-index: 5;
    transition: margin var(--ri-transicao), border-radius var(--ri-transicao), box-shadow var(--ri-transicao);
}
.megamenu > .container-fluid { position: relative; padding-left: 20px; padding-right: 20px; }
.ri-hero-area { position: relative; z-index: 1; }
.navbar-brand { height: auto; padding: 8px 15px; display: flex; align-items: center; }
.navbar-brand img,
.header_style_01 .navbar-brand img { width: auto !important; max-height: 64px; }
.ri-navbar-brand-mobile { display: none; }

.megamenu .navbar-nav.navbar-right { margin-right: 0; }
.megamenu .navbar-nav > li { margin-left: 6px; margin-right: 6px; }
.megamenu .navbar-nav > li > a.primary,
.megamenu .navbar-nav > li > a {
    color: var(--ri-preto);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 30px 8px;
    position: relative;
    background: transparent;
}
.megamenu .navbar-nav > li > a:hover,
.megamenu .navbar-nav > li > a:focus { color: var(--ri-vermelho); background: transparent; }
.megamenu .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 18px;
    height: 2px;
    background: var(--ri-vermelho);
    transform: scaleX(0);
    transition: transform var(--ri-transicao);
}
.megamenu .navbar-nav > li:hover > a::after,
.megamenu .navbar-nav > li.active > a::after,
.megamenu .navbar-nav > li > a.active::after { transform: scaleX(1); }
.megamenu .navbar-nav > li > a.primary .fa-angle-down { margin-left: 4px; font-size: 11px; }

/* neutraliza a "pílula" escura do tema herdado (li a.active / li:hover a.primary) */
.header_style_01 .navbar-default .navbar-nav > li a.active,
.header_style_01 .navbar-default .navbar-nav > li:hover a.primary,
.header_style_01 .navbar-default .navbar-nav > li:focus a.primary {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: var(--ri-vermelho);
}

/* submenu */
.megamenu .navbar-nav ul[submenu],
.megamenu .navbar-nav .sub-navbar-nav {
    position: absolute;
    min-width: 250px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    padding: 22px 26px;
    list-style: none;
    display: none;
    z-index: 1000;
    max-height: none;
    overflow: visible;
}
.megamenu .navbar-nav > li { position: relative; }
.megamenu .navbar-nav > li:hover > ul[submenu],
.megamenu .navbar-nav > li:hover > .sub-navbar-nav { display: block; }

/* os dois últimos itens (LGPD, Contato) abrem o submenu para a esquerda,
   senão ele corta na borda direita da janela. O tema renomeia a classe
   em runtime, mas o atributo [submenu] permanece — usar ele. */
@media (min-width: 992px) {
    .megamenu .navbar-nav > li:nth-last-child(-n+2) > ul[submenu] {
        left: auto !important;
        right: 0 !important;
    }
}
.megamenu .navbar-nav ul[submenu] > li > a,
.megamenu .navbar-nav .sub-navbar-nav > li > a {
    display: block;
    padding: 9px 0 !important;
    font-family: var(--ri-fonte-corpo);
    font-size: 18px;
    line-height: 1.3;
    color: var(--ri-preto);
    text-align: left;
    white-space: normal;
    border-bottom: 0 !important;
}
.megamenu .navbar-nav ul[submenu] > li:not(:last-child) > a,
.megamenu .navbar-nav .sub-navbar-nav > li:not(:last-child) > a { margin-bottom: 9px; }

/* hover = estilo eyebrow ("// Nome"), igual pra qualquer item apontado pelo mouse */
.megamenu .navbar-nav ul[submenu] > li > a:hover,
.megamenu .navbar-nav .sub-navbar-nav > li > a:hover {
    font-weight: 600;
    color: var(--ri-vermelho);
    background: transparent !important;
}
.megamenu .navbar-nav ul[submenu] > li > a:hover::before,
.megamenu .navbar-nav .sub-navbar-nav > li > a:hover::before { content: "// "; }

/* submenu aninhado (ex.: "Serviços Eletrônicos" dentro de Serviços) — abre pro
   lado ao passar o mouse. Só o item pai abre o segundo painel; hover em
   qualquer outro item do primeiro painel (Registro etc.) não afeta isso.
   Importante: o painel aninhado usa a classe .ri-submenu-nested, NÃO o
   atributo [submenu] — se tivesse [submenu], o js/interface.js herdado do
   tema (setSubmenuHover) pegaria ele junto via $(this).find("[submenu]") no
   hover do item pai (Serviços) e abriria os dois painéis ao mesmo tempo. */
.ri-submenu-parent { position: relative; }
.ri-submenu-parent > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ri-submenu-parent > a .fa-angle-right { font-size: 11px; color: var(--ri-cinza); transition: transform var(--ri-transicao); }
.ri-submenu-parent:hover > a .fa-angle-right { transform: translateX(3px); }
.ri-submenu-parent > .ri-submenu-nested {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 14px;
}
.ri-submenu-parent:hover > .ri-submenu-nested { display: block; }
.ri-submenu-parent > .ri-submenu-nested.abre-esquerda {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 14px;
}

@media (max-width: 1329px) {
    .megamenu .navbar-nav > li > a,
    .megamenu .navbar-nav > li > a.primary { padding: 14px 15px; }
    .megamenu .navbar-nav > li > a::after { display: none; }
    .megamenu .navbar-nav ul[submenu],
    .megamenu .navbar-nav .sub-navbar-nav { position: static; display: block; box-shadow: none; border: 0; border-left: 3px solid var(--ri-vermelho); border-radius: 0; padding: 12px 0 12px 18px; min-width: 0; }
    .megamenu.navbar-default { min-height: 0; }
    .navbar-brand img,
    .header_style_01 .navbar-brand img { max-height: 48px; }
    .ri-navbar-brand-mobile { display: flex; }
    .megamenu .navbar-nav.navbar-right { margin-right: 0; }
    .megamenu.navbar-default { margin: 0; border-radius: 0; box-shadow: none; max-width: none; }
    .header.header_style_01 { background: #fff; box-shadow: 0 1px 0 var(--ri-linha); top: 0; }
    /* o Bootstrap 3 só recolhe o #navbar abaixo de 768px por padrão; como
       aqui o breakpoint mobile foi antecipado pra 1249px, precisa forçar
       o recolhimento nessa faixa também — :not(.in) deixa o JS do toggle
       (que adiciona a classe .in) continuar funcionando normalmente. */
    #navbar.navbar-collapse.collapse:not(.in) { display: none; }
    .navbar-default .navbar-toggle {
        display: block;
        float: right;
        margin: 16px 12px 0 0;
        padding: 9px 10px;
        background: var(--ri-vermelho) !important;
        border-color: var(--ri-vermelho) !important;
        border-radius: 4px;
    }
    .navbar-default .navbar-toggle .icon-bar { background: #fff !important; }
    #navbar.navbar-collapse { border-top: 1px solid var(--ri-linha); }
}

/* ---------------------------------------------------- hero (carrossel) -- */
.ri-hero-area { position: relative; }
.ri-hero-slider.owl-carousel { display: block; }

.ri-hero-slide {
    display: flex;
    align-items: center;
    min-height: 500px;
    padding: 40px 0 40px;
    color: #fff;
}
/* dentro de um flex container o .ri-container (filho único) encolhe pro
   tamanho do conteúdo em vez de ocupar 100% — por isso o texto do hero
   não alinhava com a margem usada no resto do site */
.ri-hero-slide > .ri-container { width: 100%; }
.ri-hero-slide .ri-eyebrow { color: #f2c9cb; }
.ri-hero-slide h1 {
    color: #fff;
    font-size: 54px;
    font-weight: 700;
    margin: 6px 0 16px;
    word-break: break-word;
}
.ri-hero-slide p.lead {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    max-width: 760px;
    margin: 0 0 45px;
}
/* botão herda o padrão vermelho/texto branco do .btn-ri usado no resto do site */

/* foto do atendente (mesma do layout aprovado pelo cliente) nos 4 slides */
.ri-hero-slide--a,
.ri-hero-slide--b,
.ri-hero-slide--c,
.ri-hero-slide--d {
    background: #191A1A url('../images/hero/slider-01.png') no-repeat center / cover;
}

/* setas de navegação (owl.carousel) — na altura do título (~1/3 do hero),
   com a mesma margem lateral dos dois lados. Ficam acima do centro vertical
   para o botão do VLibras (fixo no meio da lateral e não estilizável —
   shadow DOM) sobrar abaixo delas, sem sobreposição. */
.ri-hero-slider .owl-nav {
    top: 0; bottom: 0; left: 0; right: 0;
    margin: 0; height: auto;
    pointer-events: none;
}
.ri-hero-slider .owl-nav .owl-prev,
.ri-hero-slider .owl-nav .owl-next {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 20px;
    border-radius: 25px 0 25px 0;
    transition: background var(--ri-transicao);
    z-index: 3;
}
.ri-hero-slider .owl-nav .owl-prev { left: 76px; }
.ri-hero-slider .owl-nav .owl-next { right: 76px; }
.ri-hero-slider .owl-nav [class*="owl-"]:hover { background: var(--ri-vermelho); }

/* se o JS não carregar, mostra o 1º slide como hero estático */
.ri-hero-slider:not(.owl-loaded).owl-carousel { display: block !important; }
.ri-hero-slider:not(.owl-loaded) .ri-hero-slide { display: none; }
.ri-hero-slider:not(.owl-loaded) .ri-hero-slide:first-child { display: flex; }

@media (max-width: 767px) {
    .ri-hero-slide { padding: 56px 0; min-height: 420px; }
    .ri-hero-slide h1 { font-size: 26px; }
    /* no celular o carrossel é por toque/autoplay — setas só atrapalhariam o texto */
    .ri-hero-slider .owl-nav { display: none; }
    .ri-band--red .text-right { text-align: left; margin-top: 16px; }
}

/* ------------------------------------------------------------- seções -- */
.ri-section { padding: 66px 0; }
.ri-section--alt { background: var(--ri-fundo); }
.ri-band--dark { background: var(--ri-preto); color: #dcdcdc; padding: 52px 0; }
.ri-band--red { background: var(--ri-vermelho); color: #fff; padding: 56px 0; }
.ri-band--red h2 { color: #fff; }
.ri-band--red .row { display: flex; flex-wrap: wrap; align-items: center; }

.ri-eyebrow {
    font-family: var(--ri-fonte-titulo);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ri-vermelho);
    margin: 0 0 8px;
}
.ri-title { font-size: 27px; font-weight: 700; margin: 0 0 12px; }
.ri-section > .ri-container > .ri-head { margin-bottom: 38px; }
.ri-head p { color: var(--ri-cinza); margin: 0; }
.text-center .ri-eyebrow { }

/* ------------------------------------------------------- grade de cards - */
.ri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ri-grid a img { transition: opacity var(--ri-transicao); cursor: zoom-in; }
.ri-grid a:hover img { opacity: .85; }
.ri-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .ri-grid, .ri-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ri-grid, .ri-grid--4 { grid-template-columns: 1fr; } }

.ri-card {
    position: relative;
    background: #fff;
    border: 0;
    border-radius: var(--ri-raio);
    padding: 26px 22px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .10);
    overflow: hidden;
}
/* linha vermelha que expande do centro pras pontas, na base do card, ao passar o mouse */
.ri-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0; margin: auto;
    width: 0; height: 2px;
    background: var(--ri-vermelho);
    transition: width .4s ease-out;
}
.ri-card:hover::before { width: 100%; }
.ri-card .ri-card-ico {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--ri-raio);
    background: rgba(167, 30, 39, .08);
    color: var(--ri-vermelho);
    font-size: 20px;
    margin-bottom: 14px;
}
.ri-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.ri-card p { font-size: 16px; color: var(--ri-cinza); margin: 0 0 12px; }
.ri-card a.ri-card-link { font-family: var(--ri-fonte-titulo); font-weight: 500; font-size: 14.5px; }
.ri-card a.ri-card-link .fa { font-size: 11px; margin-left: 4px; }

/* --------------------------------------------------- serviços eletrônicos */
.ri-eletronicos { background: var(--ri-vermelho); padding: 24px 0 66px; }
.ri-eletronicos .ri-eyebrow { color: #ffd9db; text-transform: none; letter-spacing: normal; font-size: 18px; }
.ri-eletronicos .ri-title { color: #fff; font-size: 37px; }
.ri-servicos { padding-top: 24px; }
.ri-servicos .ri-eyebrow { color: var(--ri-vermelho); text-transform: none; letter-spacing: normal; font-size: 18px; }
.ri-servicos .ri-title { font-size: 37px; }
.ri-selos-band { padding-top: 24px; }
.ri-selos-band .ri-eyebrow { color: #fff; text-transform: none; letter-spacing: normal; font-size: 18px; }
.ri-selos-band .ri-title { color: #fff; font-size: 37px; }
.ri-campanhas .ri-eyebrow { color: var(--ri-vermelho); text-transform: none; letter-spacing: normal; font-size: 18px; }
.ri-campanhas .ri-title { font-size: 37px; }
.ri-campanhas .btn-ri { border-radius: 30px; padding: 8px 20px; font-size: 13px; }
.ri-eletronicos .ri-head p { color: #ffe3e4; }
.ri-eletronicos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 991px) { .ri-eletronicos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ri-eletronicos-grid { grid-template-columns: 1fr; } }
.ri-eletronicos-grid .ri-card {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    border: 0;
}
.ri-eletronicos-grid .ri-card h3 { order: 0; }
.ri-eletronicos-grid .ri-card .ri-card-ico { margin: 14px auto; order: 1; }
.ri-eletronicos-grid .ri-card p { order: 2; }
.ri-eletronicos-grid .ri-card .btn-ri { order: 3; }
.ri-eletronicos-grid .ri-card p { flex: 1 0 auto; }
.ri-eletronicos-grid .ri-card .btn-ri { margin-top: 8px; padding: 9px 24px; font-size: 14.5px; font-weight: 700; border-radius: 30px; }
/* linha vermelha no hover só nos cards de "Serviços" — não nos de "Serviços Eletrônicos" */
.ri-eletronicos-grid .ri-card:hover::before { width: 0; }

/* --------------------------------------------------------- valores chips - */
.ri-values { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ri-values li {
    border: 1px solid var(--ri-linha);
    border-left: 3px solid var(--ri-vermelho);
    border-radius: 4px;
    padding: 7px 14px;
    font-family: var(--ri-fonte-titulo);
    font-size: 13.5px;
    font-weight: 500;
    background: #fff;
}

/* ------------------------------------- O Cartório: missão / visão / valores */
.ri-cartorio { text-align: center; }
.ri-cartorio-head { max-width: 760px; margin: 0 auto 40px; }
.ri-mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 28px; }
@media (max-width: 767px) { .ri-mvv { grid-template-columns: 1fr; } }
.ri-mvv .ri-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ri-mvv .ri-card .ri-card-ico { margin: 0 auto 14px; }
.ri-mvv .ri-card h3 { margin-bottom: 10px; }
.ri-mvv .ri-card p { margin: 0; }
.ri-cartorio .ri-values { margin-top: 0; margin-bottom: 30px; }

/* -------------------------------------------------------------- selos --- */
.ri-selos.owl-carousel { display: block; }
.ri-selos .owl-stage { display: flex; align-items: flex-start; }
.ri-selos .owl-item { padding: 0 17px; }
.ri-selo-item { text-align: center; }
.ri-selos img {
    width: 96px; height: 96px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    transition: transform var(--ri-transicao);
}
.ri-selos img:hover { transform: translateY(-3px); }
.ri-selo-item span {
    display: block;
    margin-top: 8px;
    font-family: var(--ri-fonte-titulo);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #c9c9c9;
}

/* --------------------------------------------------------- links úteis -- */
.ri-links { display: flex; flex-wrap: wrap; gap: 12px; }
.ri-links a {
    border: 1px solid var(--ri-linha);
    border-radius: var(--ri-raio);
    padding: 12px 18px;
    font-family: var(--ri-fonte-titulo);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ri-preto);
    background: #fff;
}
.ri-links a:hover { border-color: var(--ri-vermelho); color: var(--ri-vermelho); }

/* --------------------------------------------------- página interna head  */
.banner-area.banner-bg-1 {
    background: linear-gradient(135deg, var(--ri-preto) 0%, var(--ri-vermelho-fundo) 100%);
    padding: 58px 0;
    position: relative; z-index: 0;
}
.banner-area.banner-bg-1::before { content: none; }
.banner h1, .banner h2 { color: #fff; font-size: 32px; margin: 0; margin-left: 0; }
.banner h1::after, .banner h2::after { content: none; }
.page-title-link { margin-top: 10px; }
.page-title-link li a { color: #f0d9da; text-transform: none; }
.page-title-link li a:hover { color: #fff; }
.page-title-link li::after { content: none; }
.page-title-link li:not(:first-child)::before { content: "/"; margin: 0 8px; color: rgba(255, 255, 255, .5); }

/* eyebrow vermelho nas páginas internas (Equipe, Quem Somos etc.) — sem isso,
   .ri-head p (mais específico) deixa o eyebrow cinza por engano. */
.ri-pagina-interna .ri-eyebrow { color: var(--ri-vermelho); }

/* ---------------------------------------------------------------- acordeão --- */
/* marca própria — não usa .panel-* do Bootstrap (cru, azul, feio); usa o mesmo
   JS de collapse que o menu mobile já carrega (js/all.js), só data-toggle. */
.ri-accordion { border-top: 1px solid var(--ri-linha); margin-top: 8px; }
.ri-accordion-item { border-bottom: 1px solid var(--ri-linha); }
.ri-accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 16px 4px;
    font-family: var(--ri-fonte-titulo);
    font-weight: 700;
    font-size: 15px;
    color: var(--ri-preto);
    cursor: pointer;
}
.ri-accordion-trigger:hover { color: var(--ri-vermelho); }
.ri-accordion-trigger .fa { color: var(--ri-vermelho); transition: transform var(--ri-transicao); flex: none; }
.ri-accordion-trigger[aria-expanded="true"] .fa { transform: rotate(180deg); }
.ri-accordion-body { padding: 0 4px 20px; font-size: 14px; color: var(--ri-tinta); line-height: 1.75; }
.ri-accordion-body p { margin: 0 0 10px; }
.ri-accordion-body ul { padding-left: 18px; margin: 0 0 10px; }
.ri-accordion-body li { margin-bottom: 4px; }

/* lista simples em 2 colunas — referência rápida (ex.: tipos de atos registráveis) */
.ri-lista-2col { columns: 2; column-gap: 40px; padding-left: 18px; color: var(--ri-tinta); font-size: 14px; line-height: 1.85; }
.ri-lista-2col li { break-inside: avoid; }
@media (max-width: 700px) { .ri-lista-2col { columns: 1; } }

/* lista de downloads (ex.: modelos de documentos) — linha compacta com ícone
   de formato, nome e botão de baixar, agrupada sob um <h3> de categoria. */
.ri-doc-list { border-top: 1px solid var(--ri-linha); margin: 0 0 32px; }
.ri-doc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ri-linha);
}
.ri-doc-item .fa-file-word-o,
.ri-doc-item .fa-file-pdf-o { font-size: 22px; color: var(--ri-vermelho); flex: none; width: 26px; text-align: center; }
.ri-doc-item span { flex: 1 1 auto; font-size: 14.5px; color: var(--ri-tinta); }
.ri-doc-item a.ri-doc-download {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ri-fonte-titulo);
    font-weight: 600;
    font-size: 13px;
    color: var(--ri-vermelho);
}
.ri-doc-item a.ri-doc-download:hover { color: var(--ri-vermelho-hover); }

/* -------------------------------------------------------- formulário (fundo claro) --- */
/* versão clara do padrão de formulário — a do rodapé (.footer-contact) é escura,
   pensada só pro fundo preto do footer. Essa aqui é pra formulários de página. */
.ri-form-label { display: block; font-family: var(--ri-fonte-titulo); font-weight: 700; font-size: 13.5px; color: var(--ri-preto); margin: 22px 0 10px; }
.ri-form-label:first-child { margin-top: 0; }
.ri-form-hint { font-size: 12.5px; color: var(--ri-cinza); margin: -6px 0 10px; }
.ri-form-radios { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ri-form-radios label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ri-tinta); font-weight: 400; cursor: pointer; }
.ri-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .ri-form-row { grid-template-columns: 1fr; } }
.ri-form input[type="text"],
.ri-form input[type="email"],
.ri-form input[type="tel"],
.ri-form select,
.ri-form textarea {
    width: 100%;
    border: 1px solid var(--ri-linha);
    border-radius: var(--ri-raio);
    padding: 11px 14px;
    font-size: 14px;
    font-family: var(--ri-fonte-corpo);
    color: var(--ri-tinta);
    background: #fff;
}
.ri-form input:focus,
.ri-form select:focus,
.ri-form textarea:focus { outline: 0; border-color: var(--ri-vermelho); }
.ri-form textarea { min-height: 110px; resize: vertical; }
.ri-form input[type="file"] { font-size: 13.5px; }
.ri-form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ri-tinta); margin-top: 18px; }
.ri-form-checkbox input { margin-top: 3px; flex: none; }
.ri-form-aviso {
    margin-top: 28px;
    padding: 16px 18px;
    background: var(--ri-fundo);
    border-radius: var(--ri-raio);
    font-size: 13.5px;
    color: var(--ri-tinta);
}
.ri-form-aviso strong { color: var(--ri-vermelho); }
.ri-form button[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------ organograma --- */
.ri-orgchart { max-width: 760px; margin: 8px auto 0; padding: 40px 20px 8px; }
.ri-org-level { display: flex; justify-content: center; }
.ri-org-connector { width: 2px; height: 26px; background: var(--ri-linha); margin: 0 auto; }

.ri-org-node {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--ri-linha);
    border-radius: var(--ri-raio);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    padding: 10px 18px;
    text-align: center;
    min-width: 200px;
}
.ri-org-node strong { display: block; font-family: var(--ri-fonte-titulo); font-size: 14.5px; color: var(--ri-preto); }
.ri-org-node span { display: block; font-size: 12.5px; color: var(--ri-cinza); margin-top: 2px; }

.ri-org-node--top { background: var(--ri-vermelho); border-color: var(--ri-vermelho); }
.ri-org-node--top strong, .ri-org-node--top span { color: #fff; }

.ri-org-node--muted { background: var(--ri-fundo); }
.ri-org-node--muted strong { font-size: 13.5px; }

/* pares (Oficiais Substitutos / Conferentes) — linha horizontal conectando os dois,
   com um pequeno "talo" vertical de cada caixa até a barra. A barra usa metade da
   largura fixa da caixa (100px = 200px / 2) como recuo — por isso as duas caixas do
   par têm largura fixa, não min-width, senão a matemática da barra desalinha. */
.ri-org-pair { display: inline-flex; gap: 32px; position: relative; }
.ri-org-pair .ri-org-node { width: 200px; }
.ri-org-pair::before {
    content: "";
    position: absolute;
    top: -26px; left: 100px; right: 100px;
    height: 2px;
    background: var(--ri-linha);
}
.ri-org-pair .ri-org-node { position: relative; }
.ri-org-pair .ri-org-node::before {
    content: "";
    position: absolute;
    top: -26px; left: 50%;
    width: 2px; height: 26px;
    background: var(--ri-linha);
    transform: translateX(-50%);
}

/* equipe de apoio direto à Oficiala — painel à parte, não faz parte do "tronco"
   principal da hierarquia (por isso não tem conector de linha, só um traço pontilhado) */
.ri-org-apoio { max-width: 460px; margin: 18px auto 0; padding-top: 14px; border-top: 1px dashed var(--ri-linha); text-align: center; }
.ri-org-apoio-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ri-cinza); margin: 0 0 10px; }
.ri-org-apoio-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ri-org-apoio-list span {
    background: var(--ri-fundo);
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ri-tinta);
}

@media (max-width: 600px) {
    .ri-org-pair { display: flex; flex-direction: column; gap: 26px; }
    .ri-org-pair::before { content: none; }
    .ri-org-pair .ri-org-node { width: auto; min-width: 200px; }
    .ri-org-pair .ri-org-node::before { content: none; }
    .ri-org-pair .ri-org-node:not(:first-child) { position: relative; }
    .ri-org-pair .ri-org-node:not(:first-child)::before {
        content: ""; position: absolute; top: -26px; left: 50%;
        width: 2px; height: 26px; background: var(--ri-linha); transform: translateX(-50%);
    }
}

/* stub */
.ri-stub { padding: 72px 0; text-align: center; color: var(--ri-cinza); }
.ri-stub .fa { font-size: 40px; color: var(--ri-vermelho); margin-bottom: 16px; display: block; }
.ri-stub h2 { margin: 0 0 8px; }

/* ------------------------------------------------------------- rodapé --- */
.footer { background: var(--ri-preto); color: #b9b9b9; padding: 56px 0 28px; }
.footer h3 { color: #fff; font-size: 15px; letter-spacing: .5px; margin: 0 0 16px; }
.footer p { font-size: 13.5px; margin: 0 0 8px; }
.footer a { color: #c9c9c9; }
.footer a:hover { color: #fff; }
.footer .footer-logo-chip {
    display: inline-block;
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.footer .footer-logo-chip img { max-height: 52px; }
.footer .footer-menu a { display: block; padding: 4px 0; font-size: 13.5px; }
.footer .footer-contact form input,
.footer .footer-contact form textarea {
    width: 100%; margin-bottom: 10px;
    background: #222; border: 1px solid #333; color: #eee;
    border-radius: 4px; padding: 9px 12px; font-size: 13.5px;
}
.footer .footer-contact form textarea { min-height: 90px; }
.copyrights { background: #0e0e0e; color: #8f8f8f; padding: 16px 0; font-size: 12.5px; }
.copyrights img { max-height: 26px; margin-bottom: 4px; }

/* --------------------------------------------------------- flutuantes --- */
#ri-assistente-btn {
    position: fixed; right: 20px; bottom: 20px;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ri-preto); color: #fff; border: 0;
    font-size: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); z-index: 997;
}
#ri-assistente-painel {
    position: fixed; right: 20px; bottom: 84px;
    width: 320px; max-width: calc(100vw - 40px);
    background: #fff; border-radius: 10px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .25);
    padding: 18px; z-index: 997; display: none;
}
#ri-assistente-painel.aberto { display: block; }
#ri-assistente-painel h4 { margin: 0 0 6px; color: var(--ri-vermelho); font-size: 16px; }
#ri-assistente-painel p { font-size: 13px; color: var(--ri-cinza); margin: 0; }

/* acessibilidade */
#ri-acess-btn {
    position: fixed; left: 20px; bottom: 20px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ri-vermelho); color: #fff; border: 0;
    font-size: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); z-index: 997;
}
#ri-acess-menu {
    position: fixed; left: 20px; bottom: 80px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .25);
    padding: 12px; z-index: 997; display: none;
}
#ri-acess-menu.aberto { display: flex; gap: 8px; }
#ri-acess-menu button {
    font-family: var(--ri-fonte-titulo); font-weight: 600;
    border: 1px solid var(--ri-linha); background: #fff;
    border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px;
}
#ri-acess-menu button:hover { border-color: var(--ri-vermelho); color: var(--ri-vermelho); }

/* VLibras: o widget monta num shadow DOM e não aceita CSS externo pro botão
   de acesso; a separação em relação à seta do carrossel é feita subindo as
   setas do hero (ver .ri-hero-slider .owl-nav acima). */

/* controle de tamanho de fonte (data-attr no <html>) */
html[data-ri-fonte="1"] body { font-size: 17.5px; }
html[data-ri-fonte="2"] body { font-size: 19px; }

/* alto contraste */
body.ri-contraste, body.ri-contraste .ri-section--alt, body.ri-contraste .ri-card,
body.ri-contraste .ri-quick a, body.ri-contraste .top-bar { background: #000 !important; color: #fff !important; }
body.ri-contraste a, body.ri-contraste h1, body.ri-contraste h2, body.ri-contraste h3,
body.ri-contraste .ri-card h3, body.ri-contraste .ri-quick a { color: #ffd400 !important; }
body.ri-contraste .ri-card, body.ri-contraste .ri-quick a { border-color: #ffd400 !important; }
body.ri-contraste .header.header_style_01, body.ri-contraste .megamenu.navbar-default { background: #000 !important; }
body.ri-contraste .megamenu .navbar-nav > li > a { color: #fff !important; }

/* faixa cookies (herdada) — recolorida para a marca */
#cookie-alert {
    font-family: var(--ri-fonte-corpo);
    background: var(--ri-preto);
    color: #e2e2e2;
    padding: 18px 20px;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
}
#cookie-alert a { color: #fff; text-decoration: underline; }
#cookie-alert #aceitar-cookies { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* util reveal (js adiciona .is-in) */
.ri-reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.ri-reveal.is-in { opacity: 1; transform: none; }