/* ==========================================================================
   THEME DARK LUXURY — GJ Advocacia
   Override aditivo, carregado DEPOIS de style.css e libs.css.
   Não edita os arquivos originais — só sobrescreve o necessário.
   Paleta: vinho #6d2735 · dourado #b8923f / #e3b565 · base #0a0a0a / #111111
   ========================================================================== */

:root {
    --dark-bg: #0a0a0a;
    --dark-panel: #111111;
    --gold: #b8923f;
    --gold-light: #e3b565;
    --wine: #6d2735;
    --ink-text: #f4f1ec;
    --ink-muted: #c2beb3;
    --gold-border: rgba(184, 146, 63, 0.25);
}

/* ---------- Base ---------- */
body {
    background-color: var(--dark-bg);
    color: var(--ink-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-text);
    font-weight: 300;
    letter-spacing: 0.5px;
}

a {
    color: var(--gold);
}
a:hover {
    color: var(--gold-light);
}

/* ---------- Header ---------- */
.header-fixed {
    background-color: rgba(10, 10, 10, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gold-border);
    box-shadow: none;
}

.main-mnu-list > li a {
    color: var(--ink-text);
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.main-mnu-list > li > a::after {
    color: var(--gold-light);
}

.main-mnu-btn .bar {
    background-color: var(--gold) !important;
}

.mmm {
    background-color: var(--dark-panel) !important;
}

.mmm-content {
    background-color: var(--dark-panel) !important;
}

.mmm-list > li {
    border-bottom: 1px solid var(--gold-border) !important;
}

.mmm-list a {
    color: var(--ink-text) !important;
}

/* ---------- Hero / Intro (estrutura própria, independente do template original) ---------- */
.hero-simple {
    position: relative;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--dark-bg);
    padding: 6rem 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.72) 45%, rgba(10,10,10,0.55) 100%);
    z-index: 1;
}

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

.hero-simple-content {
    max-width: 34rem;
}

.hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.hero-title {
    font-size: 2.75rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--ink-text);
    margin: 0 0 22px;
    line-height: 1.25;
}

.hero-title strong {
    color: var(--gold-light);
    font-weight: 300;
}

.hero-desc {
    font-size: 1rem;
    color: var(--ink-muted);
    font-weight: 300;
    line-height: 1.7;
    max-width: 30rem;
    margin: 0 0 32px;
}

.hero-simple-content .wrap-btn {
    margin: 0;
}

@media (max-width: 767.98px) {
    .hero-simple {
        padding: 4.5rem 0;
    }
    .hero-title {
        font-size: 2rem;
    }
}

/* ---------- Section base / divisores ---------- */
.section {
    background-color: var(--dark-bg);
    color: var(--ink-text);
    border-top: 1px solid var(--gold-border);
}

.section:first-of-type {
    border-top: none;
}

.section-subheading {
    color: var(--gold);
    font-weight: 400;
    letter-spacing: 3px;
    font-size: 0.75rem;
}

.section-heading h1, .section-heading h2, .section-heading h3 {
    font-weight: 300;
}

.texto_areas,
p {
    color: var(--ink-muted);
}

/* ---------- Botões: pill outline dourado ---------- */
.btn {
    background: transparent;
    color: var(--gold-light);
    border: 1px solid var(--gold);
    border-radius: 999px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.9em 2.2em;
}

.btn .el-ripple-circle {
    background: var(--gold);
}

.btn.btn-with-icon > svg {
    width: 1rem;
    height: 1rem;
    transform: translateY(-2px);
    fill: currentColor;
}

.btn:hover {
    color: var(--dark-bg);
    font-weight: 600;
    letter-spacing: 1.5px;
}

.btn-top {
    background: var(--dark-panel);
    border: 1px solid var(--gold-border);
    fill: var(--gold);
}
.btn-top:hover {
    border-color: var(--gold);
    fill: var(--gold-light);
}

/* ---------- Accordion (Dúvidas Gerais) ---------- */
.accordion-item {
    background-color: var(--dark-panel) !important;
    border: 1px solid var(--gold-border);
    border-radius: 4px;
}

.accordion-trigger {
    color: var(--ink-text);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.accordion-trigger::after, .accordion-trigger::before {
    background-color: var(--gold);
}

.accordion-content p {
    color: var(--ink-muted);
    font-weight: 400;
    line-height: 1.75;
}

.accordion-content p span i {
    color: var(--ink-muted);
    opacity: 0.7;
}

/* ---------- Artigos (news-item) — Opção B: fundo escuro + borda dourada ---------- */
.news-item {
    background-color: var(--dark-panel);
    border: 1px solid var(--gold-border);
    transition: border-color 0.25s;
}
.news-item:hover {
    border-color: var(--gold);
}

.item:has(.news-item) {
    margin-bottom: 2.5rem;
}

.news-item-img {
    background-color: var(--dark-bg);
    filter: grayscale(15%) contrast(1.05);
}

.news-item-date {
    background-color: var(--gold);
    color: var(--dark-bg);
    font-weight: 600;
    border-radius: 999px;
}

.news-item-heading a {
    color: var(--ink-text);
    font-weight: 400;
}
.news-item-heading a:hover {
    color: var(--gold-light);
}

.news-item-desc,
.news-item-desc p {
    color: var(--ink-muted);
}

/* ---------- Áreas de Atuação (iitem) ---------- */
.iitem {
    background-color: var(--dark-panel);
    border: 1px solid var(--gold-border) !important;
    border-radius: 4px;
    padding: 1.5rem 1rem;
    transition: border-color 0.25s, background-color 0.25s;
}

/* Espaço entre linhas dos cards de Áreas de Atuação — aplicado na coluna, não no card,
   pra não conflitar com o height:100% do .item-style */
.item:has(.iitem) {
    margin-bottom: 2.8125rem; /* 45px — compensa o .items{margin-bottom:-45px} do style.css original */
}

.iitem:hover {
    border: 1px solid var(--gold) !important;
    background-color: rgba(184, 146, 63, 0.06);
    color: var(--ink-text);
}

.iitem img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(37%) saturate(555%) hue-rotate(358deg) brightness(94%) contrast(89%);
    opacity: 1;
}

.iitem-heading,
.item-heading-large {
    color: var(--ink-text) !important;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
}

/* ---------- Links Úteis ---------- */
.ini-info a {
    display: block;
    padding: 0.75rem 0;
    color: var(--ink-text);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-border);
}
.ini-info a:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    padding: 0.75rem 0;
    text-decoration: none;
}

/* ---------- Mapa / Endereço ---------- */
.section-heading + .container iframe,
iframe {
    filter: grayscale(35%) contrast(1.05) brightness(0.9);
    border: 1px solid var(--gold-border) !important;
}

/* ---------- Footer ---------- */
.footer {
    background-color: var(--dark-panel);
    border-top: 1px solid var(--gold-border);
}

.footer-item-heading {
    color: var(--gold);
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.footer-mnu li a,
.footer-contact-info,
.footer-contact-info a {
    color: var(--ink-muted);
}
.footer-mnu li a:hover,
.footer-contact-info a:hover {
    color: var(--gold-light);
}

.footer-social-links li a {
    border: 1px solid var(--gold-border);
    fill: var(--gold);
}
.footer-social-links li a:hover {
    border-color: var(--gold);
    fill: var(--gold-light);
    background-color: transparent;
}

.footer-social-links li a.footer-insta-link {
    width: auto;
    height: auto;
    padding: 0.5rem 0.9rem;
    gap: 0.5rem;
    align-items: center;
}
.footer-social-links li a.footer-insta-link svg {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
}
.footer-social-links li a.footer-insta-link span {
    font-size: 0.8rem;
    color: var(--ink-text);
    white-space: nowrap;
}
.footer-social-links li a.footer-insta-link:hover span {
    color: var(--gold-light);
}

.footer-bottom {
    background-color: var(--dark-bg);
}
.footer-bottom .copyright {
    color: var(--ink-muted);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* ---------- Seções que tinham fundo cinza fixo via inline style ---------- */
.dark-panel-section {
    background-color: var(--dark-panel) !important;
}

/* ---------- Avaliações do Google ---------- */
.review-stars {
    color: var(--gold-light);
    font-size: 1.25rem;
    letter-spacing: 4px;
    margin: 0.75rem 0 0.5rem;
}

.review-based-on {
    color: var(--ink-muted);
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}
.review-based-on strong {
    color: var(--ink-text);
    font-weight: 500;
}

.review-card {
    height: 100%;
    background: linear-gradient(180deg, rgba(184,146,63,0.04), transparent);
    border: 1px solid var(--gold-border);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    transition: border-color 0.25s;
}
.review-card:hover {
    border-color: var(--gold);
}

/* Espaço entre linhas dos cards de avaliação — na coluna, não no card,
   mesmo motivo do fix aplicado em Áreas de Atuação (height:100% + margin no mesmo elemento gera loop) */
.item:has(.review-card) {
    margin-bottom: 1.5rem;
}

.review-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.review-avatar {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--wine);
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.95rem;
}

.review-name {
    color: var(--ink-text);
    font-size: 0.9rem;
    font-weight: 500;
}

.review-date {
    color: var(--ink-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.review-stars-sm {
    color: var(--gold-light);
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
}

.review-text {
    color: var(--ink-muted);
    font-size: 0.85rem;
    line-height: 1.65;
    font-weight: 300;
    margin: 0;
}

/* Accordion em grade: alinha item 1 esquerda com item 1 direita, item 2 com item 2 etc.
   (cada linha da grade estica pra altura do item mais alto dos dois lados, automático) */
.accordion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
}
@media (max-width: 991.98px) {
    .accordion-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Grade do Instagram ---------- */
.insta-post {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--gold-border);
    margin-bottom: 1.5rem;
    transition: border-color 0.25s;
}
.insta-post:hover {
    border-color: var(--gold);
}
.insta-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.insta-post:hover img {
    transform: scale(1.06);
}
.insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}
.insta-post:hover .insta-overlay {
    opacity: 1;
}
.insta-overlay svg {
    width: 30px;
    height: 30px;
    fill: var(--gold-light);
}

/* ---------- Breadcrumbs (Início > Sobre etc.) ---------- */
.bread-crumbs {
    background-color: var(--dark-panel);
    border-bottom: 1px solid var(--gold-border);
}

.bread-crumbs-list li a,
.bread-crumbs-list li span {
    color: var(--ink-muted);
}
.bread-crumbs-list li a:hover {
    color: var(--gold-light);
}

.bread-crumbs-list li:last-child a,
.bread-crumbs-list li:last-child span {
    color: var(--gold-light);
}

.bread-crumbs-list li i {
    color: var(--gold);
}

/* ---------- Foto institucional (Sobre) ---------- */
.ini-info img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--gold-border);
}

/* Moldura decorativa por trás da foto da advogada (mesmo espírito visual
   dos outros gráficos do site, sem precisar de photoshop) */
.photo-frame {
    position: relative;
}
.photo-frame::before {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 100%;
    height: 100%;
    background: var(--wine);
    z-index: 0;
}
.photo-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}

/* Variante espelhada: moldura desloca pra baixo/direita em vez de cima/direita */
.photo-frame-br {
    position: relative;
}
.photo-frame-br::before {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 100%;
    height: 100%;
    background: var(--wine);
    z-index: 0;
}
.photo-frame-br img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}

/* ---------- Artigo detalhado (news-post) ---------- */
.news-post-title {
    color: var(--ink-text);
    font-weight: 300;
}

.news-post-meta {
    color: var(--ink-muted);
}

.news-post-meta-item i {
    color: var(--gold);
}

.news-post-img.img-style {
    border: 1px solid var(--gold-border);
    background-color: var(--dark-panel);
}

.content h2, .content h3, .content h4, .content h5, .content h6 {
    color: var(--gold-light);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.content p,
.content ul li,
.content ol li {
    color: var(--ink-muted);
    font-weight: 400;
    line-height: 1.75;
}

.content ul li::before,
.content ol li::before {
    color: var(--gold);
}

.content a {
    color: var(--gold-light);
}

/* Neutraliza a margem negativa herdada do template original,
   que deixava o espaço de baixo mais curto que o de cima em toda seção "row items" */
.items {
    margin-bottom: 0;
}

/* ---------- Footer responsivo: centraliza em telas menores ---------- */
@media (max-width: 767.98px) {
    .footer-item {
        text-align: center;
    }

    .footer-contacts li {
        justify-content: center;
    }

    .footer-social-links {
        justify-content: center;
    }
}