/* ==========================================================================
   Tokens de design
   Paleta: fundo pedra clara, verde-ardósia profundo, dourado envelhecido
   ========================================================================== */
:root {
    --cor-fundo: #F5F4F0;
    --cor-fundo-alt: #ECEAE3;
    --cor-primaria: #2B4A45;
    --cor-primaria-escura: #1D332F;
    --cor-acento: #A9814F;
    --cor-acento-claro: #C7A26B;
    --cor-texto: #262624;
    --cor-texto-suave: #6B6B62;
    --cor-borda: #DEDBD1;
    --fonte-display: 'Lora', Georgia, serif;
    --fonte-corpo: 'Inter', -apple-system, sans-serif;
    --raio: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte-corpo);
    color: var(--cor-texto);
    background: var(--cor-fundo);
    line-height: 1.65;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-display);
    color: var(--cor-primaria-escura);
    font-weight: 600;
    line-height: 1.25;
}

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

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-brand {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.navbar-brand i { color: var(--cor-acento); }

.nav-link {
    font-weight: 500;
    color: var(--cor-texto);
    padding: .5rem 1rem !important;
}
.nav-link.active, .nav-link:hover { color: var(--cor-primaria); }

.busca-topo {
    display: flex;
    align-items: center;
    background: var(--cor-fundo-alt);
    border-radius: 999px;
    padding: .25rem .25rem .25rem 1rem;
    margin-left: .5rem;
}
.busca-topo input {
    border: none;
    background: transparent;
    outline: none;
    width: 180px;
    font-size: .9rem;
}
.busca-topo button {
    border: none;
    background: var(--cor-primaria);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    background: linear-gradient(180deg, var(--cor-primaria-escura), var(--cor-primaria));
    color: #F5F4F0;
    padding: 4.5rem 0 5rem;
    text-align: center;
    position: relative;
}
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 40px;
    background: var(--cor-fundo);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    color: var(--cor-acento-claro);
    font-weight: 600;
    margin-bottom: 1rem;
}
.hero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    max-width: 780px;
    margin: 0 auto .9rem;
}
.hero-sub {
    max-width: 620px;
    margin: 0 auto 2.2rem;
    color: #D8DED9;
    font-size: 1.05rem;
}
.hero-busca {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: .35rem .35rem .35rem 1.4rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.hero-busca i { color: var(--cor-texto-suave); margin-right: .7rem; }
.hero-busca input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 1rem;
    background: transparent;
}
.hero-busca button {
    border: none;
    background: var(--cor-acento);
    color: #fff;
    font-weight: 600;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    transition: background .2s;
}
.hero-busca button:hover { background: var(--cor-acento-claro); }

.hero-tags {
    margin-top: 1.6rem;
    font-size: .85rem;
    color: #C6CDC8;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    justify-content: center;
    align-items: center;
}
.hero-tags a {
    color: #EDEAE0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: .3rem .9rem;
    transition: border-color .2s, background .2s;
}
.hero-tags a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

/* ==========================================================================
   Anúncios
   ========================================================================== */
.bloco-anuncio {
    background: var(--cor-fundo-alt);
    border: 1px dashed var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem;
    margin: 2rem 0;
    text-align: center;
    min-height: 90px;
}
.rotulo-anuncio {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cor-texto-suave);
    margin-bottom: .5rem;
}

/* ==========================================================================
   Seção de artigos / cards
   ========================================================================== */
.secao-artigos { padding: 3.5rem 0; }
.titulo-secao { margin-bottom: 2rem; }
.titulo-secao h2 { font-size: 1.8rem; margin-bottom: .3rem; }
.titulo-secao p { color: var(--cor-texto-suave); }

.categoria-tag {
    display: inline-block;
    background: rgba(169,129,79,.12);
    color: var(--cor-acento);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .7rem;
    border-radius: 999px;
    margin-bottom: .8rem;
}

.card-artigo {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.6rem;
    transition: transform .18s, box-shadow .18s;
}
.card-artigo:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(29,51,47,.1);
}
.card-artigo h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.card-artigo p { color: var(--cor-texto-suave); font-size: .92rem; flex-grow: 1; }
.ler-mais {
    color: var(--cor-primaria);
    font-weight: 600;
    font-size: .88rem;
    margin-top: 1rem;
}
.card-artigo--compacto { padding: 1.2rem; }
.card-artigo--compacto h3 { font-size: 1rem; margin-bottom: 0; }

/* ==========================================================================
   CTA
   ========================================================================== */
.faixa-cta {
    background: var(--cor-fundo-alt);
    padding: 3.5rem 0;
    text-align: center;
    border-top: 1px solid var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}
.faixa-cta h2 { margin-bottom: .5rem; }
.faixa-cta p { color: var(--cor-texto-suave); margin-bottom: 1.5rem; }
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--cor-primaria);
    color: #fff !important;
    font-weight: 600;
    padding: .8rem 1.8rem;
    border-radius: 999px;
    transition: background .2s;
}
.btn-cta:hover { background: var(--cor-primaria-escura); color: #fff; }

/* ==========================================================================
   Página de busca
   ========================================================================== */
.pagina-busca { padding: 3rem 0 4rem; }
.cabecalho-busca { margin-bottom: 2rem; text-align: center; }
.cabecalho-busca h1 { margin-bottom: 1.2rem; font-size: 1.6rem; }
.hero-busca--pagina {
    background: #fff;
    border: 1px solid var(--cor-borda);
    box-shadow: none;
    max-width: 560px;
}
.hero-busca--pagina input { color: var(--cor-texto); }
.texto-ajuda { color: var(--cor-texto-suave); text-align: center; }
.contagem-resultados { color: var(--cor-texto-suave); font-size: .85rem; margin-bottom: 1rem; }

.resultado-busca {
    display: block;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--cor-borda);
}
.resultado-busca h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.resultado-busca p { color: var(--cor-texto-suave); margin: 0; }
.resultado-busca:hover h3 { color: var(--cor-primaria); text-decoration: underline; }

.sem-resultados {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cor-texto-suave);
}
.sem-resultados i { font-size: 2rem; margin-bottom: 1rem; color: var(--cor-borda); }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar { position: sticky; top: 90px; }
.caixa-relacionados {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.3rem;
}
.caixa-relacionados h4 { font-size: 1rem; margin-bottom: .9rem; }
.caixa-relacionados ul { list-style: none; padding: 0; margin: 0; }
.caixa-relacionados li { margin-bottom: .7rem; }
.caixa-relacionados a { font-size: .9rem; color: var(--cor-texto); }
.caixa-relacionados a:hover { color: var(--cor-primaria); text-decoration: underline; }

/* ==========================================================================
   Página de artigo
   ========================================================================== */
.pagina-artigo { padding: 2.5rem 0 4rem; }
.breadcrumb-custom { font-size: .85rem; color: var(--cor-texto-suave); margin-bottom: 1.5rem; }
.breadcrumb-custom a { color: var(--cor-texto-suave); }
.breadcrumb-custom i { font-size: .65rem; margin: 0 .4rem; }
.resumo-artigo { font-size: 1.1rem; color: var(--cor-texto-suave); margin-bottom: 1.8rem; }
.corpo-artigo { font-size: 1.02rem; }
.corpo-artigo p { margin-bottom: 1.2rem; }

.caixa-aviso {
    display: flex;
    gap: .8rem;
    background: rgba(169,129,79,.08);
    border-left: 3px solid var(--cor-acento);
    padding: 1rem 1.2rem;
    border-radius: var(--raio);
    margin-top: 2rem;
}
.caixa-aviso i { color: var(--cor-acento); margin-top: .2rem; }
.caixa-aviso p { margin: 0; font-size: .9rem; color: var(--cor-texto-suave); }

/* ==========================================================================
   Páginas institucionais
   ========================================================================== */
.pagina-institucional { padding: 3rem 0 4rem; max-width: 780px; }
.pagina-institucional h1 { margin-bottom: 1.5rem; }
.pagina-institucional h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: .6rem; }
.pagina-institucional p { color: var(--cor-texto-suave); margin-bottom: 1rem; }
.formulario-contato { margin-top: 2rem; }
.formulario-contato .form-label { font-weight: 500; }
.formulario-contato .form-control:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 .2rem rgba(43,74,69,.15); }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer {
    background: var(--cor-primaria-escura);
    color: #C6CDC8;
    padding: 3.5rem 0 2rem;
    margin-top: 2rem;
}
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer h3 { font-size: 1.2rem; margin-bottom: .8rem; }
.site-footer h4 { font-size: .95rem; margin-bottom: .9rem; }
.site-footer p { font-size: .9rem; }
.lista-footer { list-style: none; padding: 0; margin: 0; }
.lista-footer li { margin-bottom: .6rem; }
.lista-footer a { font-size: .9rem; color: #C6CDC8; }
.lista-footer a:hover { color: var(--cor-acento-claro); }
.site-footer hr { border-color: rgba(255,255,255,.12); margin: 2rem 0 1.5rem; }
.aviso-legal p { font-size: .78rem; color: #93A099; margin-bottom: .5rem; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 991px) {
    .busca-topo { margin: .8rem 0; width: 100%; }
    .busca-topo input { width: 100%; }
    .sidebar { position: static; margin-top: 2rem; }
}