/* ============================================================
   Corrêa Lamounier Advocacia — Estilos globais
   SPA estática (client-side). Sem dependências externas além
   das fontes do Google Fonts carregadas no index.html.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; color: #1b1916; background: #f7f4ee; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #96773c; text-decoration: none; transition: color .2s ease; }
a:hover { color: #b1904f; }
::selection { background: #b1904f; color: #fff; }

@keyframes clfade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Cabeçalho da home (transparente -> sólido ao rolar) ---------- */
#cl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(247,244,238,0); box-shadow: none; transition: background .3s ease, box-shadow .3s ease; }
#cl-header.cl-scrolled { background: rgba(247,244,238,.96); box-shadow: 0 1px 0 rgba(177,144,79,.25); }

/* ---------- Efeitos de hover (equivalentes ao style-hover do design) ---------- */
.cl-cta-dark:hover { background: #b1904f !important; border-color: #b1904f !important; color: #fff !important; }
.cl-btn-gold:hover { background: #96773c !important; color: #fff; transform: translateY(-2px); }
.cl-btn-outline:hover { border-color: #b1904f !important; color: #96773c !important; }
.cl-btn-gold2:hover { background: #cdae76 !important; color: #1b1916 !important; }
.cl-contact-row:hover { opacity: .85; }
.cl-float:hover { transform: scale(1.08); }

/* ---------- Menu mobile ---------- */
#cl-drawer { display: none; }
#cl-drawer.cl-open { display: block; }

/* ---------- Páginas de artigo ---------- */
.cl-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: .5px; color: #3a352d; }
.cl-back:hover { color: #96773c; }
.cl-back svg { transition: transform .2s ease; }
.cl-back:hover svg { transform: translateX(-3px); }

.cl-article h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.18; color: #1b1916; margin-top: 44px; }
.cl-article h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; line-height: 1.25; color: #1b1916; margin-top: 32px; }
.cl-article p { font-size: 17px; line-height: 1.85; color: #4a4438; font-weight: 300; margin-top: 18px; }
.cl-article ul { margin: 18px 0 0 22px; }
.cl-article li { font-size: 17px; line-height: 1.8; color: #4a4438; font-weight: 300; margin-top: 10px; }
.cl-article strong { font-weight: 500; color: #1b1916; }

.cl-btn-gold { display: inline-flex; align-items: center; gap: 10px; background: #b1904f; color: #fff; padding: 15px 28px; font-size: 14.5px; letter-spacing: .6px; box-shadow: 0 10px 30px -12px rgba(177,144,79,.7); transition: all .25s ease; }
.cl-btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #1b1916; padding: 15px 26px; font-size: 14.5px; letter-spacing: .6px; border: 1px solid rgba(27,25,22,.28); transition: all .25s ease; }

/* ---------- Responsivo ---------- */
@media (max-width: 880px) {
  .cl-navlinks { display: none !important; }
  .cl-burger { display: flex !important; }
  .cl-hero-grid { grid-template-columns: 1fr !important; }
  .cl-sobre-cols { grid-template-columns: 1fr !important; }
  .cl-adv-grid { grid-template-columns: 1fr !important; }
  .cl-blog-grid { grid-template-columns: 1fr !important; }
  .cl-contato-grid { grid-template-columns: 1fr !important; }
  .cl-footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .cl-article p, .cl-article li { font-size: 16px; }
}
@media (max-width: 560px) {
  .cl-areas-grid { grid-template-columns: 1fr !important; }
  .cl-stats { grid-template-columns: 1fr !important; gap: 22px !important; }
}