/* ==========================================================================
   OAB Campos — folha de estilo unica
   --------------------------------------------------------------------------
   Consolida o design aprovado (PROJETO VISUAL/assets/css/styles.css, que
   estava em camadas v1..v11) em um unico arquivo sem dependencias.

   Tokens conforme briefing: azul institucional #002B4C e vermelho #B32024.
   Sem jQuery, sem CDN, sem Unsplash: o hero usa foto real da OAB definida em
   --hero-imagem, sobrescrevivel por pagina.
   ========================================================================== */

:root {
    --oab-blue: #002b4c;
    --oab-blue-2: #05385f;
    --oab-blue-3: #0d4f85;
    --oab-red: #b32024;
    --oab-red-strong: #e5242a;
    --oab-bg: #f6f8fd;
    --oab-soft: #eaf1ff;
    --oab-text: #16304a;
    --oab-muted: #6b7c91;
    --oab-card: #ffffff;
    --oab-border: rgba(13, 57, 96, .12);
    --oab-shadow: 0 18px 45px rgba(0, 43, 76, .12);
    --oab-shadow-hover: 0 28px 62px rgba(0, 43, 76, .18);
    --oab-shadow-red: 0 16px 36px rgba(179, 32, 36, .16);
    --oab-radius: 14px;
    --hero-imagem: url("../img/sala-dos-advogados.png");
    --bs-primary: #002b4c;
    --bs-link-color: #0d4f85;
    --bs-link-hover-color: #b32024;
    color-scheme: light;
}

/* --- Reset leve ---------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    /* Evita rolagem horizontal caused pelo gradiente de fundo fixo */
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--oab-bg);
    color: var(--oab-text);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(179, 32, 36, .05), transparent 28%),
        radial-gradient(circle at 82% 5%, rgba(0, 43, 76, .06), transparent 22%);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--bs-link-color);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
        transform .25s ease, box-shadow .25s ease;
}

a:hover {
    color: var(--oab-red);
}

/* --- Acessibilidade ------------------------------------------------------ */

:focus-visible {
    outline: 3px solid var(--oab-red-strong);
    outline-offset: 2px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Barra de progresso de leitura -------------------------------------- */

.top-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 0;
    height: 3px;
    border-radius: 0;
    background: linear-gradient(90deg, #002b4c 0%, #b32024 50%, #002b4c 100%);
    transition: width .18s ease, opacity .4s ease;
}

/* --- Barra superior (telefone, e-mail, cidades) ----------------------- */

.topbar {
    padding: .45rem 0;
    border-bottom: 1px solid rgba(0, 43, 76, .08);
    background: var(--oab-blue);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
}

.topbar-cidades {
    margin: 0;
}

.site-cabecalho {
    display: flex;
    flex-direction: column;
}

/* No celular a barra de municípios desce para baixo do menu. */
@media (max-width: 991.98px) {
    .site-cabecalho .site-header {
        order: 1;
    }

    .site-cabecalho .topbar {
        order: 2;
        border-top: 1px solid rgba(0, 43, 76, .08);
        border-bottom: 0;
    }
}

.topbar a {
    color: rgba(255, 255, 255, .88);
}

.topbar a:hover {
    color: #fff;
    text-decoration: underline;
}

.topbar-link {
    white-space: nowrap;
}

@media (max-width: 575px) {
    .topbar {
        font-size: .78rem;
        text-align: center;
    }
}

/* --- Cabecalho / navegacao ---------------------------------------------- */

/*
 * O header precisa de z-index alto E de position relative.
 *
 * O .navbar usa backdrop-filter (o efeito de vidro fosco). backdrop-filter -
 * assim como filter, transform, will-change, contain e opacity < 1 - cria um
 * *stacking context*: a partir dai, o z-index de tudo que esta dentro dele
 * passa a valer so dentro desse contexto. O .dropdown-menu do Bootstrap tem
 * z-index 1000, mas esse 1000 nao competia mais com o resto da pagina - ele
 * ficava preso ao header.
 *
 * Sem position + z-index no proprio header, o .hero (que vem DEPOIS no DOM e
 * e position: relative) era pintado por cima, e o submenu aparecia atras da
 * imagem de fundo da home. O valor 1030 fica acima do .topbar (1000 nao ha
 * sticky) e do conteudo, e abaixo do .top-progress (99999).
 */
.site-header {
    position: relative;
    z-index: 1030;
}

.navbar {
    min-height: 72px;
    border-top: 4px solid var(--oab-red);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(0, 43, 76, .1);
}

/* Reforco explicito: o submenu precisa ficar acima do hero e do rodape. */
.navbar .dropdown-menu {
    z-index: 1031;
}

.navbar .nav-link {
    position: relative;
    margin-inline: .25rem;
    color: #25415c;
    font-size: .92rem;
    font-weight: 700;
}

.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .25rem;
    height: 3px;
    background: var(--oab-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    color: var(--oab-red);
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* O `.nav-link::after` acima e a barra de sublinhado; no `.dropdown-toggle`
 * ela substituia a seta do Bootstrap e o caret sumia. Recupero a seta para
 * itens com submenu. */
.navbar .nav-link.dropdown-toggle::after {
    position: static;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .35em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    background: none;
    transform: none;
    transform-origin: auto;
    transition: none;
}

.navbar .nav-link.dropdown-toggle:hover::after,
.navbar .nav-link.dropdown-toggle.active::after {
    transform: none;
}

/* Menu aberto: a seta vira para cima. */
.navbar .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    border-top: 0;
    border-bottom: .3em solid;
}

.navbar-brand {
    padding-block: .25rem;
}

.site-logo {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}

.site-logo-top {
    max-width: 180px;
    height: 54px;
}

/* --- Botoes -------------------------------------------------------------- */

.btn {
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

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

.btn-oab {
    position: relative;
    overflow: hidden;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: 6px;
    background: var(--oab-blue);
    box-shadow: inset 0 -3px 0 rgba(179, 32, 36, .55);
    color: #fff;
    font-weight: 800;
}

.btn-oab:hover {
    background: var(--oab-blue-2);
    color: #fff;
    box-shadow: 0 12px 22px rgba(0, 43, 76, .22);
}

.btn-gold {
    position: relative;
    overflow: hidden;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: 6px;
    background: var(--oab-red);
    color: #fff;
    font-weight: 800;
}

.btn-gold:hover {
    background: var(--oab-red-strong);
    color: #fff;
    box-shadow: var(--oab-shadow-red);
}

.btn-oab::after,
.btn-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, .28), transparent 85%);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.btn-oab:hover::after,
.btn-gold:hover::after {
    transform: translateX(120%);
}

.btn-outline-oab {
    padding: .65rem 1rem;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-weight: 700;
}

.btn-outline-oab:hover {
    background: #fff;
    color: var(--oab-blue);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    padding-top: 122px;
    padding-bottom: 52px;
    overflow: hidden;
    background: #001e37;
    color: #fff;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0, 37, 66, .84), rgba(0, 37, 66, .84)),
        var(--hero-imagem) center / cover no-repeat;
    transform: scale(1.05);
    transition: transform 5s ease;
}

/* Com Destaques cadastrados (painel > Destaques), o carrossel manda: nunca misturar a foto
   institucional padrao (--hero-imagem, ex.: sala-dos-advogados.png) com a foto de um slide — so cor
   solida aqui, a foto (quando o destaque tem uma) vem do proprio .carousel-item. */
.hero.hero--carrossel-ativo::before {
    background: linear-gradient(rgba(0, 37, 66, .84), rgba(0, 37, 66, .84));
}

.hero:hover::before {
    transform: scale(1.09);
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 7px;
    background: linear-gradient(90deg, #002b4c 0%, #b32024 45%, #b32024 55%, #002b4c 100%);
}

.hero .container {
    position: relative;
    z-index: 1;
}

/* Carrossel do hero: o 1o slide carrega o h1 da home, os demais usam h2 com a mesma tipografia para
   nao haver dois h1 na pagina.

   Altura: .hero-carousel cobre o .hero inteiro por posicao absoluta (inset:0), a MESMA tecnica que
   .hero::before ja usa pra foto padrao (por isso ela sempre encaixou certinho). Tentativas anteriores
   com flex-stretch e com min-height em px (ver historico) nao garantiam cobrir 100% da altura em
   todo caso; isso aqui nao depende de nenhuma conta de altura. */
.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-carousel .carousel-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.hero-carousel .carousel-item {
    transition: transform .78s cubic-bezier(.16, 1, .3, 1), opacity .78s ease;
    background-size: cover;
    background-position: center;
    height: 100%;
}

/* Mesmos seletores que o Bootstrap usa pra mostrar o slide (display:block) — vira flex so nesses
   estados, nunca nos escondidos, senao toda foto do carrossel apareceria empilhada de uma vez. */
.hero-carousel .carousel-item.active,
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
    display: flex;
    align-items: center;
}

/* Imagem de fundo por slide (painel > Destaques): escurece para o texto continuar legivel. Sem
   imagem propria, o slide so mostra esse degrade (ver .hero--carrossel-ativo::before: a foto padrao
   do .hero fica desligada quando ha destaques, pra nunca misturar as duas). */
.hero-carousel .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(rgba(0, 37, 66, .82), rgba(0, 37, 66, .82));
}

.hero-carousel .carousel-item .container {
    position: relative;
    z-index: 1;
}

.hero h1,
.hero h2 {
    max-width: 980px;
    margin-top: .45rem;
    font-size: clamp(2.1rem, 5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, .86);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 46px;
    height: 46px;
    top: calc(50% - 23px);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .4);
    opacity: .9;
    transition: transform .25s ease, background .25s ease;
}

.hero-carousel .carousel-control-prev {
    left: .5rem;
}

.hero-carousel .carousel-control-next {
    right: .5rem;
}

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
    background: var(--oab-red);
    border-color: var(--oab-red);
    opacity: 1;
    transform: scale(1.08);
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
}

.hero-indicators {
    bottom: 1.1rem;
    z-index: 3;
    margin-bottom: 0;
}

.hero-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    opacity: .4;
}

.hero-indicators .active {
    background: var(--oab-red-strong);
    opacity: 1;
}

@media (max-width: 767.98px) {
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        top: auto;
        bottom: .75rem;
        width: 38px;
        height: 38px;
    }

    .hero-carousel .carousel-control-prev {
        left: .35rem;
    }

    .hero-carousel .carousel-control-next {
        right: .35rem;
    }

    .hero-indicators {
        bottom: 1.25rem;
    }

    .hero-indicators [data-bs-target] {
        width: 9px;
        height: 9px;
    }
}

/* --- Servicos rapidos ---------------------------------------------------- */

.quick-services {
    padding: 2rem 0;
    background: var(--oab-soft);
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 105px;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--oab-border);
    border-radius: 10px;
    background: var(--oab-card);
    box-shadow: 0 8px 22px rgba(3, 42, 74, .05);
    color: var(--oab-blue);
    font-size: .86rem;
    font-weight: 800;
    text-align: center;
    transform: translateZ(0);
    transition: transform .38s cubic-bezier(.2, .8, .2, 1),
        box-shadow .38s ease, border-color .38s ease;
}

.service-card::before,
.article-card::before,
.indica-card::before,
.partner-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--oab-blue), var(--oab-red));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s ease;
}

.service-card::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(179, 32, 36, .08);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}

.service-card:hover {
    transform: translateY(-12px);
    border-color: rgba(179, 32, 36, .35);
    box-shadow: 0 28px 58px rgba(0, 43, 76, .18);
}

.service-card:hover::before,
.article-card:hover::before,
.indica-card:hover::before,
.partner-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover::after {
    transform: scale(2.3);
    opacity: .75;
}

.service-card i,
.service-card .bi {
    font-size: 1.3rem;
    transition: transform .25s ease;
}

.service-card:hover i,
.service-card:hover .bi {
    color: var(--oab-red);
    transform: scale(1.18) rotate(-4deg);
}

/* --- Secoes -------------------------------------------------------------- */

.section {
    padding: 5.5rem 0;
}

.section-soft {
    background: #eef4ff;
}

.section-dark {
    background: linear-gradient(135deg, var(--oab-blue) 0%, #01223d 68%, #3b121b);
    color: #fff;
}

.eyebrow {
    margin-bottom: .25rem;
    color: var(--oab-red);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.eyebrow-light {
    color: #fff !important;
    opacity: .75;
}

.section-title {
    position: relative;
    color: var(--oab-blue);
    font-weight: 900;
    letter-spacing: -.03em;
}

.section-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: .65rem;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--oab-red), rgba(179, 32, 36, .18));
}

.text-center .section-title::after,
.section-dark .text-center .section-title::after {
    margin-right: auto;
    margin-left: auto;
}

.section-dark .section-title {
    color: #fff;
}

.muted {
    color: var(--oab-muted);
}

.section-dark .muted {
    color: rgba(255, 255, 255, .72);
}

/* Link de texto sobre fundo escuro.
 *
 * O estado vazio da Agenda (home) e o das Publicacoes dizem "consulte a
 * pagina de..." com `.media-link`, que e azul-marinho — a MESMA cor do topo do
 * gradiente de `.section-dark`. O link ficava invisivel sobre o fundo.
 *
 * Aqui o link de texto vira branco com sublinhado (a pista de que e clicavel),
 * no mesmo espirito de `.eyebrow-light` e `.section-dark .muted`. Botoes ficam
 * de fora: eles ja tem cor propria e nao precisam de sublinhado.
 */
.section-dark a:not(.btn) {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-dark .media-link,
.section-dark .media-link:hover {
    color: #fff;
}

.section-dark .media-link:hover {
    opacity: .78;
    text-decoration-thickness: 2px;
}

/* Link do estado vazio ("consulte a pagina de...").
 *
 * Nao usa `.media-link`: aquela e azul-marinho fixo, que e a cor do fundo da
 * secao escura da Agenda. Aqui o link herda a cor do texto do bloco (branco no
 * escuro, escuro no claro) e ganha sublinhado, entao o mesmo elemento serve as
 * duas secoes da home - Agenda (fundo escuro) e Artigos/Publicacoes (fundo claro).
 */
.estado-vazio-link {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.estado-vazio-link:hover {
    text-decoration-thickness: 2px;
}

/* Sobe um pouco o titulo para nao colar no topo */
.section-head {
    margin-bottom: 2.75rem;
}

/* --- Noticias: destaque + laterais -------------------------------------- */

.news-feature {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 410px;
    overflow: hidden;
    border-radius: var(--oab-radius);
    background: #001d35;
    box-shadow: var(--oab-shadow);
    color: #fff;
    transition: transform .28s ease, box-shadow .28s ease;
}

.news-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.72);
    transition: transform .45s ease;
}

/* O placeholder tem que ocupar a mesma area da <img> para nao achatar o card */
.news-feature .media-placeholder,
.news-feature .midia-sem-foto {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
}

.news-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 28, 53, .92));
}

.news-feature:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 62px rgba(0, 43, 76, .18);
}

.news-feature:hover img {
    transform: scale(1.05);
}

.news-feature-content {
    position: relative;
    z-index: 1;
    padding: 1.6rem;
}

.news-feature h2,
.news-feature h3 {
    font-weight: 900;
    letter-spacing: -.02em;
}

.badge-gold,
.tag {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 20px;
    background: var(--oab-red);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
}

.side-news {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: .75rem;
    overflow: hidden;
    border: 1px solid var(--oab-border);
    border-radius: 12px;
    background: var(--oab-card);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.side-news:hover {
    transform: translateX(10px);
    border-left: 4px solid var(--oab-red);
    box-shadow: 0 14px 30px rgba(0, 43, 76, .12);
}

.side-news img {
    width: 140px;
    height: 92px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    transition: transform .3s ease;
}

.side-news:hover img {
    transform: scale(1.04);
}

.side-news small {
    color: var(--oab-red);
    font-weight: 900;
    text-transform: uppercase;
}

.side-news h3 {
    margin: .15rem 0;
    color: var(--oab-blue);
    font-size: 1rem;
    font-weight: 900;
}

/* --- Eventos ------------------------------------------------------------- */

/*
 * O card de evento aparece em dois fundos: a home usa `section-dark`, mas
 * /eventos usa `section`, que e branca. A versao anterior fixava o visual de
 * vidro escuro (.event-card p com branco em 86%) sem escopo, entao em /eventos
 * o resumo saia branco sobre branco, ilegivel, e a borda do card sumia.
 *
 * Agora o padrao e o card claro e o vidro escuro e o override de .section-dark.
 * Os dois Contextos estao medidos, nao deduzidos: o card de /eventos tem
 * background e cor de texto Effective.
 */
.event-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.4rem;
    border: 1px solid rgba(15, 45, 80, .12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 45, 80, .05);
    transition: transform .28s ease, background .28s ease, border-color .28s ease,
        box-shadow .28s ease;
}

.event-card:hover {
    transform: translateY(-12px);
    border-color: rgba(179, 32, 36, .35);
    box-shadow: 0 22px 45px rgba(179, 32, 36, .14);
}

.event-card h3 {
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    font-weight: 900;
}

/*
 * Capa do evento. 348 dos 474 eventos migrados tem `imagem` preenchida e o
 * arquivo esta em midia/eventos/; so o card nao emitia <img>, entao a capa
 * existia no acervo e nunca aparecia. Altura fixa (nao aspect-ratio): o
 * cliente pediu que a imagem apareça inteira, e `object-fit: contain` com
 * largura 100% só mostra tudo quando a altura do quadro não muda com a
 * proporção da foto.
 */
.event-card .event-capa {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #eef4ff;
}

.event-card .media-placeholder,
.event-card .midia-sem-foto {
    height: 320px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Eventos realizados (eventos.php, aba "Realizados"): mesmo tratamento do card de evento futuro
   acima — altura um pouco maior e a foto inteira visível, sem cortar. */
.article-card .evento-realizado-capa {
    height: 320px;
}

.article-card img.evento-realizado-capa {
    object-fit: contain;
    background: #eef4ff;
}

/* Data e botão de inscrição na mesma linha, a data à esquerda e o botão à direita. */
.event-card-linha-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .65rem 0;
}

/*
 * Botao de inscricao dentro do card. Precisou de position relative + z-index
 * para ficar clicavel acima do ::after do `.stretched-link`, que cobre o card.
 */
.event-card .btn-card-oab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 0;
    border-radius: 6px;
    background: var(--oab-blue);
    box-shadow: inset 0 -2px 0 rgba(179, 32, 36, .55);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    text-decoration: none;
    transition: background .25s ease, box-shadow .25s ease;
}

.event-card .btn-card-oab:hover,
.event-card .btn-card-oab:focus {
    background: var(--oab-blue-2);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 43, 76, .22);
}

.section-dark .event-card {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.section-dark .event-card:hover {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 22px 45px rgba(179, 32, 36, .14), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.section-dark .event-card h3 {
    color: #fff;
}

/* (0,2,1) contra (0,1,0) do .muted: sem isto o resumo ficava cinza-claro
 * sobre o vidro escuro da home. */
.section-dark .event-card p,
.section-dark .event-card p.muted {
    color: rgba(255, 255, 255, .86);
}

.section-dark .event-card .event-capa {
    background: rgba(255, 255, 255, .08);
}

/* Na home (secao escura) o botao azul desaparecia no fundo azulado do card;
 * o vermelho da marca e o que da contraste. */
.section-dark .event-card .btn-card-oab {
    background: var(--oab-red);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28);
}

.section-dark .event-card .btn-card-oab:hover,
.section-dark .event-card .btn-card-oab:focus {
    background: var(--oab-red-strong);
    color: #fff;
    box-shadow: 0 10px 20px rgba(179, 32, 36, .4);
}

.date-box {
    display: grid;
    place-items: center;
    width: 66px;
    height: 74px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 -5px 0 rgba(0, 43, 76, .35);
    color: var(--oab-blue);
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.date-box span {
    font-size: 1.55rem;
}

.date-box .mes {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.btn-events-done {
    padding: .85rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    color: #fff;
    font-weight: 900;
}

.btn-events-done:hover {
    transform: translateY(-3px);
    border-color: var(--oab-red);
    background: var(--oab-red);
    color: #fff;
}

/* --- Cards de listagem (noticias, artigos, albuns) ---------------------- */

.article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--oab-border);
    border-radius: var(--oab-radius);
    background: var(--oab-card);
    box-shadow: 0 10px 28px rgba(2, 43, 75, .06);
    transition: transform .28s ease, box-shadow .28s ease;
}

.article-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 62px rgba(0, 43, 76, .18);
}

.article-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .35s ease;
}

.article-card:hover img {
    transform: scale(1.04);
}

.article-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5rem;
}

.article-card h3 {
    color: var(--oab-blue);
    font-size: 1.05rem;
    font-weight: 900;
}

.article-card .card-meta {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--oab-muted);
    font-size: .85rem;
}

/* Data de publicacao colada no autor, abaixo dele. */
.article-card .card-meta + .card-meta {
    padding-top: .2rem;
}

/* Link que cobre o card inteiro (Bootstrap stretched-link, sem depender
   dele: funciona nos cards sem imagem, que nao tem <img> para esticar). */
.article-card,
.side-news,
.event-card {
    position: relative;
}

.article-card > .stretched-link::after,
.side-news > .stretched-link::after,
.event-card > .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* O placeholder tem a altura da imagem em grid, mas nao deve estufar a linha
   lateral nem o card de evento. */
.side-news .media-placeholder,
.side-news .midia-sem-foto {
    width: 140px;
    min-height: 92px;
    flex: 0 0 auto;
    padding: .6rem;
}

.side-news .media-placeholder .ph-icone {
    display: none;
}

.side-news .media-placeholder .ph-texto {
    max-width: none;
    font-size: .7rem;
}

/* Placeholder tipografico para noticia sem foto (4002 de 7561) */
.media-placeholder,
.midia-sem-foto {
    display: grid;
    place-items: center;
    min-height: 230px;
    padding: 1.5rem;
    background: linear-gradient(145deg, var(--oab-blue) 0%, #0a4b7a 100%);
    color: #fff;
    text-align: center;
}

.media-placeholder .ph-icone,
.midia-sem-foto > span {
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
}

.midia-sem-foto {
    width: 100%;
}

.midia-sem-foto > span {
    max-width: 24ch;
    font-size: .95rem;
}

.media-placeholder .ph-icone {
    font-size: 2.2rem;
    opacity: .85;
}

.media-placeholder .ph-texto {
    max-width: 22ch;
    margin-top: .6rem;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .9;
}

/* --- Filtros, pills e sidebars ------------------------------------------ */

.filter-box,
.sidebar-box {
    padding: 1.25rem;
    border: 1px solid var(--oab-border);
    border-radius: var(--oab-radius);
    background: var(--oab-card);
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .22rem;
    padding: .45rem .75rem;
    border: 1px solid var(--oab-border);
    border-radius: 50px;
    background: var(--oab-card);
    color: var(--oab-text);
    font-size: .86rem;
    font-weight: 800;
}

.category-pill:hover,
.category-pill.active {
    border-color: var(--oab-red);
    background: var(--oab-red);
    color: #fff;
}

/* Linha de resultado de uma listagem com filtro ativo (/convenios).
 *
 * Sem filtro a contagem ja esta no page-hero, entao esta linha so aparece com
 * busca e/ou categoria: ai ela diz o que os filtros produziram, e a regra embaixo
 * separa o primeiro card da barra do filtro sem precisar de margem extra.
 */
.result-count {
    margin-bottom: 1.35rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--oab-border);
    color: var(--oab-muted);
    font-size: .95rem;
    font-weight: 700;
}

.share-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--oab-border);
    border-radius: 50%;
    background: var(--oab-card);
}

.share-btn:hover {
    transform: translateY(-3px);
    border-color: var(--oab-red);
    background: var(--oab-red);
    color: #fff;
}

/* --- Nuestra Instituicao -------------------------------------------------- */

.institution-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.institution-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    padding: .82rem 1rem;
    border: 1px solid rgba(0, 43, 76, .18);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 43, 76, .05);
    color: var(--oab-blue);
    font-weight: 700;
    line-height: 1.2;
}

.institution-link:hover {
    transform: translateY(-2px);
    border-color: rgba(179, 32, 36, .28);
    box-shadow: 0 10px 24px rgba(0, 43, 76, .1);
    color: var(--oab-red);
}

.institution-link.is-active,
.institution-link[aria-current="page"] {
    border-color: var(--oab-blue);
    background: var(--oab-blue);
    box-shadow: 0 12px 26px rgba(0, 43, 76, .18), inset 0 -3px 0 rgba(179, 32, 36, .55);
    color: #fff;
}

.galeria-presidente {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 45, 80, .1);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 45, 80, .05);
    overflow: hidden;
}

.galeria-presidente img,
.galeria-presidente .midia-sem-foto,
.galeria-presidente .media-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #eef4ff;
}

.galeria-presidente figcaption {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .8rem .9rem 1rem;
}

.galeria-presidente-periodo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--oab-red);
}

.galeria-presidente-nome {
    font-weight: 700;
    line-height: 1.25;
    color: var(--oab-blue);
}

.modal-presidente-corpo {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.modal-presidente-texto {
    flex: 1 1 220px;
    order: 1;
}

.modal-presidente-lateral {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: 0 auto;
    order: 2;
}

.modal-presidente-moldura img,
.modal-presidente-moldura .midia-sem-foto,
.modal-presidente-moldura .media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--oab-red);
    box-shadow: 0 4px 14px rgba(15, 45, 80, .18);
    background: #eef4ff;
}

.modal-presidente-periodo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--oab-red);
    text-align: center;
}

/* --- Galeria de fotos (albuns e fotos) ------------------------------------ */

/* Sem capa preenchida no banco, a miniatura do album e a primeira foto; a
   altura acompanha o card de noticia para a grade ficar regular. */
.article-card .album-thumb {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.album-count {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 3;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(2, 43, 75, .78);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.photo-figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 45, 80, .1);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 45, 80, .05);
    overflow: hidden;
}

.photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.photo-figure .midia-sem-foto,
.photo-figure .media-placeholder {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.photo-figure figcaption {
    padding: .6rem .8rem;
    font-size: .8rem;
    color: var(--oab-muted);
    line-height: 1.4;
}

/* --- Convenios ------------------------------------------------------------- */

.convenio-card {
    display: flex;
    gap: 1.1rem;
    height: 100%;
    padding: 1.2rem;
    border: 1px solid rgba(15, 45, 80, .1);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 45, 80, .05);
    transition: transform .28s ease, box-shadow .28s ease;
}

.convenio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 43, 76, .14);
}

.convenio-logo {
    flex: 0 0 108px;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    padding: .6rem;
    border: 1px solid rgba(15, 45, 80, .1);
    border-radius: 10px;
    background: #fbfdff;
}

.convenio-coluna {
    flex: 0 0 108px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.convenio-modal-capa {
    height: 240px;
    padding: .75rem;
    border: 1px solid rgba(15, 45, 80, .1);
    border-radius: 12px;
    background: #fbfdff;
    overflow: hidden;
}

.convenio-modal-capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.convenio-info-botao {
    width: 100%;
    font-size: .8rem;
}

.partner-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.partner-card-link:focus-visible {
    outline: 3px solid var(--oab-red-strong);
    outline-offset: 3px;
    border-radius: 12px;
}

.convenio-img {
    display: block;
    max-width: 100%;
    max-height: 96px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.convenio-logo .midia-sem-foto,
.convenio-logo .media-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .4rem;
}

.convenio-logo .midia-sem-foto > span {
    font-size: .6rem;
}

.convenio-info {
    flex: 1 1 auto;
    min-width: 0;
}

.convenio-info h3 {
    color: var(--oab-blue);
}

.convenio-info .badge-gold {
    font-weight: 700;
}

/* --- Convênios e Parceiros (home): carrossel e cards ------------------------ */

.partner-card,
.indica-card {
    position: relative;
    background: var(--oab-card);
    border: 1px solid var(--oab-border);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: transform .28s ease, box-shadow .28s ease;
}

.partner-card:hover,
.indica-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--oab-shadow-hover);
}

.partner-logo {
    height: 270px;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: #fff;
    border-bottom: 1px solid var(--oab-border);
}

.partner-logo .partner-logo-img {
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.icon-panel {
    height: 270px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #edf3ff, #f9e8e9);
    color: var(--oab-blue);
    font-size: 2.8rem;
}

.partner-card-body {
    padding: 1rem;
}

.partner-card h3,
.indica-card h3 {
    font-size: 1rem;
    font-weight: 900;
    color: var(--oab-blue);
}

.indica-card {
    text-align: center;
    padding: 1.5rem;
}

.indica-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    background: linear-gradient(145deg, #edf3ff, #f9e8e9);
    color: var(--oab-blue);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    transition: transform .25s ease, color .25s ease;
}

.indica-card:hover .indica-icon {
    transform: scale(1.08) rotate(-2deg);
    color: var(--oab-red);
}

.partners-carousel {
    padding: 0 3.25rem 2.35rem;
}

.partners-carousel .carousel-inner {
    overflow: hidden;
}

.partners-carousel .carousel-item {
    transition: transform .78s cubic-bezier(.16, 1, .3, 1), opacity .78s ease;
}

.partners-carousel .carousel-control-prev,
.partners-carousel .carousel-control-next {
    width: 42px;
    height: 42px;
    top: calc(50% - 28px);
    border-radius: 50%;
    background: var(--oab-blue);
    opacity: 1;
    box-shadow: 0 12px 28px rgba(0, 43, 76, .16);
    transition: transform .25s ease, background .25s ease;
}

.partners-carousel .carousel-control-prev {
    left: 0;
}

.partners-carousel .carousel-control-next {
    right: 0;
}

.partners-carousel .carousel-control-prev:hover,
.partners-carousel .carousel-control-next:hover {
    background: var(--oab-red);
    transform: scale(1.08);
}

.partners-carousel .carousel-control-prev-icon,
.partners-carousel .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
}

.partners-indicators {
    bottom: -12px;
    margin-bottom: 0;
}

.partners-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--oab-blue);
    opacity: .32;
    border: 0;
}

.partners-indicators .active {
    background: var(--oab-red);
    opacity: 1;
}

@media (max-width: 767.98px) {
    .partners-carousel {
        padding: 0 0 2.5rem;
    }

    .partners-carousel .carousel-control-prev,
    .partners-carousel .carousel-control-next {
        top: auto;
        bottom: -2px;
    }

    .partners-carousel .carousel-control-prev {
        left: calc(50% - 54px);
    }

    .partners-carousel .carousel-control-next {
        right: calc(50% - 54px);
    }

    .partners-indicators {
        display: none;
    }
}

/* --- Revista / Canal: cards de mídia --------------------------------------- */

.revista-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--oab-border);
    border-radius: 12px;
    background: var(--oab-card);
}

.revista-card h3 {
    margin: 0;
    padding: .95rem 1.05rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--oab-blue);
}

.revista-card .ratio {
    border-top: 1px solid var(--oab-border);
    border-radius: 0;
}

.revista-card iframe {
    border: 0;
    background: #f3f6fb;
}

.revista-link {
    margin: 0;
    padding: .8rem 1.05rem;
    border-top: 1px solid var(--oab-border);
}

.revista-link a {
    color: var(--oab-blue);
    font-weight: 700;
    text-decoration: none;
}

.revista-link a:hover {
    color: var(--oab-red);
}

.busca-comissoes {
    max-width: 480px;
}

#accordionComissoes .accordion-header {
    margin: 0;
}

#accordionComissoes .accordion-button {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    padding: .7rem .85rem;
    background: #f2f3f5;
}

#accordionComissoes .accordion-button:not(.collapsed) {
    color: var(--oab-text);
    background: rgba(179, 32, 36, .05);
    box-shadow: none;
}

#accordionComissoes .accordion-button:focus {
    box-shadow: 0 0 0 .15rem rgba(179, 32, 36, .18);
}

/* Comissoes: o accordion continua (sao 50 comissoes em uma pagina so, o
 * recolhimento e o que torna a pagina usavel), mas o corpo de cada item usa a
 * MESMA listagem do Conselho - `.conselho-lista`, um nome por linha com a barra
 * vermelha a esquerda. O cargo fica em versalete acima do grupo. */
.comissao-cargo {
    margin-bottom: .4rem;
    color: var(--oab-blue);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Cada comissao ganha a mesma barra vermelha da listagem do Conselho, na borda
 * esquerda do item. Dentro do item os nomes ficam sem barra: so o cabecalho
 * da comissao sinaliza o bloco. */
#accordionComissoes .accordion-item {
    border-left: 3px solid rgba(179, 32, 36, .4);
    border-radius: 0 .5rem .5rem 0;
    margin-bottom: .4rem;
    overflow: hidden;
}

#accordionComissoes .conselho-lista li {
    padding-left: 0;
    border-left: 0;
    background: none;
}

/* No celular o nome sozinho ja ocupa a linha; a barra vermelha colada na borda
 * deixa de fazer sentido e vira um risco na tela. */
@media (max-width: 575.98px) {
    #accordionComissoes .conselho-lista li {
        padding-left: .55rem;
        font-size: .95rem;
    }
}

.institution-img-facade {
    width: 100%;
    min-height: 300px;
    border: 1px solid rgba(0, 43, 76, .08);
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
    box-shadow: var(--oab-shadow);
    /* As fotos de sede saem em 16:9. O ratio casa com a foto para nao cortar
       as pontas; o min-height so segura a caixa em telas estreitas, onde o
       ratio sozinho deixaria a imagem baixa demais. */
    aspect-ratio: 16 / 9;
}

/* Carrossel das sedes. Só existe quando há 2+ fotos (ver index.php). O wrapper
   recebe o mesmo box da foto isolada e corta os cantos; dentro, a imagem fica
   sem raio nem sombra para não desenhar duas molduras sobrepostas. */
.institution-carousel {
    border-radius: 16px;
    overflow: hidden;
}
.institution-carousel .institution-img-facade {
    border-radius: 0;
    box-shadow: none;
}
/* Setas largas pegam a faixa de clique da foto inteira, mas precisam de
   stop-color opaco: o gradiente do Bootstrap é claro demais sobre a foto. */
.institution-carousel .carousel-control-prev,
.institution-carousel .carousel-control-next {
    width: 15%;
    opacity: .85;
}
.institution-carousel .carousel-control-prev:hover,
.institution-carousel .carousel-control-next:hover {
    opacity: 1;
}
.institution-carousel .carousel-indicators {
    margin-bottom: .85rem;
}

.float-card-seal {
    position: absolute;
    left: -14px;
    bottom: -22px;
    display: grid;
    place-items: center;
    width: 150px;
    min-height: 130px;
    padding: .65rem;
    border: 1px solid rgba(0, 43, 76, .08);
    border-top: 4px solid var(--oab-red);
    border-radius: 14px;
    background: var(--oab-card);
    box-shadow: var(--oab-shadow);
}

.float-card-seal img {
    width: 126px;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 43, 76, .12));
}

/* --- Midia / video ------------------------------------------------------- */

.media-link {
    color: var(--oab-blue);
    white-space: nowrap;
}

.media-link:hover {
    color: var(--oab-red);
    transform: translateX(3px);
}

.video-embed {
    overflow: hidden;
    border: 1px solid var(--oab-border);
    border-radius: 14px;
    background: #001e37;
    box-shadow: 0 10px 26px rgba(4, 42, 78, .08);
}

.video-embed iframe {
    border: 0;
}

.media-box {
    display: grid;
    place-items: center;
    min-height: 310px;
    padding: 2rem;
    border: 1px solid var(--oab-border);
    border-radius: 12px;
    background: linear-gradient(145deg, #dfe8fb, #f5f8ff);
    box-shadow: 0 10px 26px rgba(4, 42, 78, .06);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.media-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--oab-shadow-hover);
}

/* --- Newsletter ---------------------------------------------------------- */

.newsletter {
    padding: 2rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--oab-blue) 0%, #062c4c 70%, #5b151d);
    color: #fff;
}

.newsletter .form-control {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.newsletter .form-control::placeholder {
    color: rgba(255, 255, 255, .68);
}

/* --- Rodape -------------------------------------------------------------- */

.footer {
    padding: 4.5rem 0 2rem;
    border-top: 5px solid var(--oab-red);
    background: linear-gradient(135deg, #002744 0%, #001d33 65%, #2a1118);
    color: #dbe8f5;
}

.footer h2,
.footer h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.footer a {
    color: #dbe8f5;
    font-size: .9rem;
}

.footer a:hover {
    color: #fff;
}

.site-logo-footer {
    max-width: 220px;
    height: 66px;
}

.social-link {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: .35rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.social-link:hover {
    transform: translateY(-3px);
    background: var(--oab-red);
    color: #fff;
}

.footer .text-warning {
    color: var(--oab-red) !important;
}

.footer-slogan {
    color: #fff;
    font-size: .95rem;
}

.footer-endereco,
.footer-cidades {
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    font-style: normal;
}

.footer-links li {
    margin-bottom: .4rem;
}

.footer-heading {
    margin-bottom: .9rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .68);
    font-size: .84rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
}

@media (max-width: 575px) {
    .footer-base {
        flex-direction: column;
        text-align: center;
    }
}

.nmaster-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
}

.nmaster-credit a {
    display: inline-flex;
    align-items: center;
    opacity: .72;
    filter: grayscale(1) brightness(0) invert(1);
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

.nmaster-credit a:hover {
    opacity: 1;
    transform: translateY(-1px);
    filter: grayscale(0) brightness(1) invert(0);
}

.nmaster-credit img {
    display: block;
    width: auto;
    max-width: 96px;
    height: 18px;
}

/* --- Cookie banner / LGPD ----------------------------------------------- */

.cookie-banner {
    position: fixed;
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
    left: max(.75rem, env(safe-area-inset-left));
    z-index: 9999;
    width: auto;
    max-width: min(980px, calc(100vw - 1.5rem));
    margin: auto;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--oab-border);
    border-top: 4px solid var(--oab-red);
    border-radius: 16px;
    background: var(--oab-card);
    box-shadow: var(--oab-shadow);
}

.cookie-banner:not(.show) {
    display: none;
}

.cookie-banner .row {
    --bs-gutter-x: 1rem;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.cookie-banner p {
    overflow-wrap: anywhere;
}

.cookie-banner .col-lg-auto {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Pagina de erro ------------------------------------------------------ */

.error-page {
    display: grid;
    place-items: center;
    min-height: 75vh;
    padding: 7rem 1rem;
    text-align: center;
}

.error-code {
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.08em;
    color: var(--oab-blue);
}

/* --- Cabecalho de pagina interna (listagens e detalhes) ---------------- */

.page-hero {
    padding: 3.5rem 0 2.75rem;
    background: linear-gradient(135deg, var(--oab-blue) 0%, #064c80 100%);
    color: #fff;
}

.page-hero h1 {
    font-weight: 900;
    letter-spacing: -.03em;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55);
    margin-bottom: 1rem;
    font-size: .86rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: rgba(255, 255, 255, .8);
}

.breadcrumb-item a:hover {
    color: #fff;
}

.breadcrumb-item.active {
    color: rgba(255, 255, 255, .62);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .45);
}

/* --- Leitura em voz alta (noticia.php/artigo.php, assets/js/leitura.js) ------- */
/* Ocupa a largura da coluna de texto; nasce com [hidden] e o JS revela só se o
   navegador tiver Web Speech API. A barra mostra o progresso real da fala
   (evento "boundary") ou, sem esse evento, uma estimativa por tempo. */

.leitura-player {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .6rem .9rem;
    background: var(--oab-soft);
    border: 1px solid var(--oab-border);
    border-radius: var(--oab-radius);
}

.leitura-player-botao {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--oab-blue);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
}

.leitura-player-botao:hover {
    background: var(--oab-blue-2);
}

.leitura-player-ativo .leitura-player-botao {
    background: var(--oab-red-strong);
}

.leitura-player-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.leitura-player-rotulo {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--oab-text);
    margin-bottom: .3rem;
}

.leitura-player-barra {
    height: .4rem;
    border-radius: 1rem;
    background: rgba(13, 57, 96, .12);
    overflow: hidden;
}

.leitura-player-progresso {
    height: 100%;
    width: 0%;
    border-radius: 1rem;
    background: var(--oab-blue);
    transition: width .2s linear;
}

.leitura-player-ativo .leitura-player-progresso {
    background: var(--oab-red-strong);
}

/* --- Conteudo de artigo / noticia --------------------------------------- */

.conteudo-pagina {
    font-size: 1.05rem;
}

.conteudo-pagina > *:last-child {
    margin-bottom: 0;
}

.conteudo-pagina h2,
.conteudo-pagina h3,
.conteudo-pagina h4 {
    margin-top: 2rem;
    color: var(--oab-blue);
    font-weight: 900;
}

.conteudo-pagina p {
    margin-bottom: 1.1rem;
}

.conteudo-pagina ul,
.conteudo-pagina ol {
    margin-bottom: 1.1rem;
    padding-left: 1.4rem;
}

.conteudo-pagina img {
    border-radius: 10px;
}

/* `:not(.btn)` e obrigatorio, nao cosmetico. O corpo do artigo trata todo
   link como link de texto (sublinhado + cor de link). Essa regra vale
   (0,1,1) contra (0,1,0) do `.btn-oab`, entao um botao de download dentro
   do corpo herdaria sublinhado e a cor errada no hover, justamente por
   causa do container. Excluindo `.btn`, a excecao vale para qualquer botao
   que apareca no corpo, e nao so para o caso de hoje. */
.conteudo-pagina a:not(.btn) {
    color: var(--bs-link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.conteudo-pagina a:not(.btn):hover {
    color: var(--oab-red);
}

.conteudo-pagina blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.35rem;
    border-left: 4px solid var(--oab-red);
    border-radius: 0 10px 10px 0;
    background: var(--oab-soft);
    font-size: 1.1rem;
}

.conteudo-pagina table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.conteudo-pagina th,
.conteudo-pagina td {
    padding: .7rem .85rem;
    border: 1px solid var(--oab-border);
    text-align: left;
}

.conteudo-pagina thead th {
    background: var(--oab-blue);
    color: #fff;
    font-weight: 800;
}

.credito-foto {
    margin-top: .5rem;
    color: var(--oab-muted);
    font-size: .8rem;
}

/* --- Galeria de fotos extras da notícia (carrossel, ver noticia.php) -------- */

/* Moldura ocupa toda a largura da coluna do artigo (nunca corta a foto): aspect-ratio deriva a
   altura a partir dessa largura — toda foto, não importa a proporção original, ocupa exatamente a
   mesma área, e trocar de slide não faz a página pular. */
.noticia-galeria-moldura {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f1f3f5;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Capa do evento (evento.php): proporção 4:5, igual à maioria das imagens de evento — evita a
   moldura 16:9 (pensada para foto larga de notícia) sobrando muito espaço vazio nas laterais. */
.evento-capa-moldura {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #f1f3f5;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.noticia-galeria-moldura img,
.evento-capa-moldura img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Capa da revista na home: mesma moldura 16:9 do vídeo do Canal (video-embed). */
.revista-capa-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Categorias extras de convênio: escondidas no celular até o botão "Ver mais". */
.categorias-pills.expandido .cat-extra {
    display: inline-flex !important;
}

/* Um item por vez no celular: os indicadores de grupo não batem mais com os slides. */
@media (max-width: 767.98px) {
    [data-carrossel-mobile].um-por-slide .carousel-indicators {
        display: none;
    }
}

/* Voltar ao topo: discreto, canto inferior esquerdo, aparece depois de rolar. */
.btn-topo {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 43, 76, .15);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--oab-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

.btn-topo.visivel {
    opacity: .85;
    transform: none;
}

.btn-topo[hidden] { display: none; }

.btn-topo:hover,
.btn-topo:focus-visible {
    opacity: 1;
}

/* Folheto de revista (PDF lido com pdf.js e virado com StPageFlip). */
.revista-folheto-palco {
    display: flex;
    justify-content: center;
    min-height: 320px;
    padding: 1rem 0;
    background: #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.revista-folheto-palco:focus-visible {
    outline: 2px solid var(--oab-red);
    outline-offset: 2px;
}

.revista-folheto-pagina {
    background: #fff;
}

.revista-folheto-pagina canvas {
    display: block;
}

.revista-folheto-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
}

/* Banners da home: a arte inteira aparece (contain), sem cortar texto da imagem. */
.banner-home-moldura {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f1f3f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner-home-moldura img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.banners-home .carousel-control-prev,
.banners-home .carousel-control-next {
    width: 8%;
    filter: invert(1) grayscale(1);
    opacity: .6;
}

.banners-home-indicadores {
    position: relative;
    margin-top: .75rem;
}

.banners-home-indicadores [data-bs-target] {
    background-color: var(--oab-blue);
    opacity: .3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.banners-home-indicadores .active {
    opacity: 1;
}

.noticia-galeria .carousel-control-prev,
.noticia-galeria .carousel-control-next {
    width: 10%;
    filter: invert(1) grayscale(1);
    opacity: .55;
}

.noticia-galeria .carousel-control-prev:hover,
.noticia-galeria .carousel-control-next:hover {
    opacity: .9;
}

.noticia-galeria-indicadores {
    position: relative;
    margin-top: .75rem;
}

.noticia-galeria-indicadores [data-bs-target] {
    background-color: var(--oab-blue);
    opacity: .3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.noticia-galeria-indicadores .active {
    opacity: 1;
}

/* --- Páginas da Diretoria, do Conselho e embeds institucionais ------------- */

.diretoria-lista dt {
    padding-bottom: .35rem;
    border-bottom: 1px dashed rgba(15, 45, 80, .14);
    margin: 0 0 1.1rem;
    color: var(--oab-muted);
}

.diretoria-lista dd {
    padding-bottom: .35rem;
    border-bottom: 1px dashed rgba(15, 45, 80, .14);
    margin: 0 0 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.conselho-lista li {
    padding: .45rem .6rem;
    border-left: 3px solid rgba(179, 32, 36, .4);
    background: rgba(15, 45, 80, .04);
    margin-bottom: .4rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Secao "Historico" da pagina A Subsecao. O periodo e a referencia de leitura
   (versalete na linha de cima), o presidente fica em destaque e as notas sao o
   contexto, em corpo menor. */
.historico-gestoes {
    margin-bottom: 0;
}

.historico-gestoes dt {
    color: var(--oab-blue);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.historico-gestoes dd {
    border-left: 3px solid var(--oab-red);
    margin-bottom: 1.1rem;
    padding-left: .9rem;
}

.historico-gestoes dd:last-child {
    margin-bottom: 0;
}

.gestao-presidente {
    font-weight: 700;
}

.gestao-nota {
    color: var(--oab-muted);
    font-size: .9rem;
}

.historico-marcos {
    line-height: 1.6;
}

.historico-marcos > li + li {
    margin-top: .9rem;
}

/* Menu de telefone da /telefones: seis entradas de primeiro nivel e, dentro da
   Sede, as oito opcoes do URA. O numero de cada linha e um badge; o grupo fica
   em versalete e as sub-opcoes recuam para nao competir com ele. */
.telefone-menu,
.telefone-menu ol {
    list-style: none;
    padding-left: 0;
}

.telefone-menu {
    margin-bottom: 0;
}

.telefone-menu > li {
    padding: .7rem 0;
    border-bottom: 1px solid var(--oab-border);
}

.telefone-menu > li:last-child {
    border-bottom: 0;
}

.telefone-menu-linha {
    display: flex;
    gap: .75rem;
    align-items: baseline;
}

.telefone-menu-rotulo {
    font-weight: 700;
    letter-spacing: .02em;
}

.telefone-menu-sub {
    margin: .55rem 0 .1rem 1.6rem;
}

.telefone-menu-sub > li {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    padding: .22rem 0;
}

.ratio-5x4::before {
    padding-top: 80%;
}

@media (max-width: 991.98px) {
    .conselho-lista li {
        font-size: .95rem;
    }
}

/* --- Barra de progresso de leitura: animacao de entrada ------------------ */

.reveal {
    opacity: 0 !important;
    transform: translate3d(0, 58px, 0) scale(.97) !important;
    filter: blur(8px) !important;
    transition: opacity .95s cubic-bezier(.16, 1, .3, 1),
        transform .95s cubic-bezier(.16, 1, .3, 1),
        filter .95s ease !important;
    transition-delay: var(--reveal-delay, 0ms) !important;
}

.reveal.visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: blur(0) !important;
}

.reveal-left:not(.visible) {
    transform: translate3d(-70px, 0, 0) scale(.97) !important;
}

.reveal-right:not(.visible) {
    transform: translate3d(70px, 0, 0) scale(.97) !important;
}

.reveal-zoom:not(.visible) {
    transform: translate3d(0, 35px, 0) scale(.88) !important;
}

/* --- Utilitarios de conteudo ------------------------------------------- */

.text-oab-blue {
    color: var(--oab-blue) !important;
}

.text-oab-red {
    color: var(--oab-red) !important;
}

.bg-oab-soft {
    background-color: var(--oab-soft) !important;
}

/* Avisa visualmente (e para leitores de tela) que nao ha imagem */
.sem-imagem {
    border: 1px dashed rgba(0, 43, 76, .18);
    border-radius: 10px;
    background: var(--oab-soft);
}

/* --- Links uteis ------------------------------------------------------------
   A pagina e um directorio: grupos com titulo e uma grade de destinos. O
   icone de "abre em outra aba" aparece so no hover, para nao competir com o
   nome do destino; a seta fica sempre visivel. */

.links-uteis-grupo + .links-uteis-grupo {
    margin-top: 2.25rem;
}

.links-uteis-grade {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.links-uteis-item {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .7rem .85rem;
    border: 1px solid var(--oab-border);
    border-radius: 10px;
    background: var(--oab-card);
    color: var(--oab-blue);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.links-uteis-item:hover,
.links-uteis-item:focus-visible {
    border-color: var(--oab-blue);
    background: var(--oab-soft);
    color: var(--oab-blue);
    transform: translateY(-2px);
}

.links-uteis-item .bi {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: var(--oab-red);
}

.links-uteis-item .bi-box-arrow-up-right {
    margin-left: auto;
    font-size: .8rem;
    color: var(--oab-muted);
    transition: color .2s ease;
}

.links-uteis-item:hover .bi-box-arrow-up-right,
.links-uteis-item:focus-visible .bi-box-arrow-up-right {
    color: var(--oab-blue);
}

.links-uteis-nota {
    margin: 0;
    font-size: .9rem;
}

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 991px) {
    .navbar-collapse {
        padding: 1rem 0;
    }

    .hero {
        min-height: 590px;
        padding-top: 110px;
        text-align: center;
    }

    .section {
        padding: 4rem 0;
    }

    .float-card-seal {
        left: 18px;
        bottom: -30px;
    }

    .side-news {
        align-items: flex-start;
    }

    .side-news img {
        width: 112px;
        height: 82px;
    }
}

/*
 * Menu secundario dos links institucionais, na coluna da direita.
 *
 * Reusa .institution-link inteiro (cor, borda, hover, .is-active); o que muda
 * aqui e so o eixo. `.institution-links` e o agendador da home e fica em linha,
 * entao nao se mexe nele - a coluna precisa de um container proprio.
 */
.institution-nav {
    display: grid;
    gap: .5rem;
}

.institution-nav .institution-link {
    width: 100%;
    min-height: 44px;
    padding: .7rem .9rem;
}

.institution-menu {
    position: sticky;
    top: 1.5rem;
}

@media (max-width: 991.98px) {
    /* Sem stickiness no mobile: a coluna cai abaixo do conteudo e um menu
     * grudado no topo brigaria com o navbar. */
    .institution-menu {
        position: static;
    }
}

@media (max-width: 991.98px) {
    .institution-img-facade {
        min-height: 220px;
    }
}

@media (max-width: 575px) {
    .site-logo-top {
        max-width: 140px;
        height: 42px;
    }

    .site-logo-footer {
        max-width: 176px;
        height: 54px;
    }

    .navbar {
        min-height: 64px;
    }

    .section-title::after {
        width: 42px;
    }

    .side-news {
        display: block;
    }

    .side-news img {
        width: 100%;
        height: 160px;
        margin-bottom: .75rem;
    }

    .newsletter {
        padding: 1.35rem;
    }

    .quick-services .col-6 {
        padding-inline: .35rem;
    }

    .service-card {
        min-height: 96px;
        font-size: .78rem;
    }

    .hero-actions .btn-gold,
    .hero-actions .btn-oab {
        width: 100%;
    }

    .institution-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .institution-link {
        justify-content: center;
        padding: .85rem .8rem;
        text-align: center;
    }

    .institution-link span {
        font-size: .92rem;
    }

    .float-card-seal {
        width: 122px;
        min-height: 105px;
    }

    .float-card-seal img {
        width: 100px;
    }

    .nmaster-credit {
        flex-wrap: wrap;
        font-size: .68rem;
    }

    .nmaster-credit img {
        height: 16px;
    }

    .cookie-banner {
        max-height: calc(100vh - 1.5rem);
        padding: .9rem !important;
        overflow-y: auto;
        border-radius: 14px !important;
    }

    .cookie-banner .col-lg-auto {
        display: grid !important;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: .55rem !important;
    }

    .cookie-banner .btn {
        width: 100%;
        padding: .7rem .55rem;
        white-space: normal;
    }
}

/* --- Preferencias de movimento reduzido ---------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero::before {
        transform: none;
    }
}

/* v14 - seção especial de notícias: Prerrogativas (portada do projeto) */
.prerrogativas-section {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%);
    overflow: hidden;
}
.prerrogativas-section::before {
    content: "";
    position: absolute;
    right: -120px;
    top: 80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(179, 32, 36, .12), rgba(179, 32, 36, 0) 68%);
    pointer-events: none;
}
.prerrogativas-section::after {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -200px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 43, 76, .1), rgba(0, 43, 76, 0) 70%);
    pointer-events: none;
}
.prerrogativas-section .container {
    position: relative;
    z-index: 1;
}
.prerrogativas-grid {
    align-items: stretch;
}
.prerrogativa-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 43, 76, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 43, 76, .08);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.prerrogativa-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 62px rgba(0, 43, 76, .16);
    border-color: rgba(179, 32, 36, .28);
}
.prerrogativa-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}
.prerrogativa-thumb {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--oab-blue), #0a4b7a);
    display: grid;
    place-items: center;
    color: #fff;
}
.prerrogativa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.96) brightness(.82);
    transition: transform .55s ease, filter .55s ease;
}
.prerrogativa-card:hover .prerrogativa-thumb img {
    transform: scale(1.08);
    filter: saturate(1.08) brightness(.92);
}
.prerrogativa-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 43, 76, .05), rgba(0, 43, 76, .72));
    pointer-events: none;
}
.prerrogativa-thumb.icon-mode {
    height: 190px;
    background: linear-gradient(135deg, #002b4c 0%, #0a4b7a 58%, #b32024 100%);
}
.prerrogativa-thumb.icon-mode i {
    position: relative;
    z-index: 1;
    font-size: 3.5rem;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22));
    transition: transform .35s ease;
}
.prerrogativa-card:hover .icon-mode i {
    transform: scale(1.1) rotate(-4deg);
}
.prerrogativa-label {
    position: absolute;
    z-index: 2;
    left: 18px;
    top: 18px;
    background: var(--oab-red);
    color: #fff;
    border-radius: 999px;
    padding: .42rem .72rem;
    font-size: .72rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
}
.prerrogativa-content {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}
.prerrogativa-content time {
    color: var(--oab-red);
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.prerrogativa-content h3 {
    font-size: 1.18rem;
    line-height: 1.22;
    margin: 0;
    color: var(--oab-blue);
    font-weight: 900;
}
.prerrogativa-content p {
    color: var(--oab-muted);
    margin: 0;
}
.read-more {
    margin-top: auto;
    color: var(--oab-blue);
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.read-more i {
    transition: transform .25s ease;
}
.prerrogativa-card:hover .read-more {
    color: var(--oab-red);
}
.prerrogativa-card:hover .read-more i {
    transform: translateX(5px);
}
.prerrogativa-card-featured {
    background: linear-gradient(180deg, #fff, #f8fbff);
}
.prerrogativa-card-featured .prerrogativa-thumb {
    height: 225px;
}
@media (max-width: 767px) {
    .prerrogativa-card-featured .prerrogativa-thumb,
    .prerrogativa-thumb,
    .prerrogativa-thumb.icon-mode {
        height: 180px;
    }
    .prerrogativas-section .text-lg-end {
        text-align: left !important;
    }
}