:root {
    --cor-ouro: #b8a36a;
    --cor-fundo: #f4f4f4;
    --cor-fundo-secundario: #ffffff;
    --cor-texto-principal: #1f2937;
    --cor-texto-secundario: #4b5563;
    --cor-whatsapp: #25D366;
    
    --fonte-principal: 'Inter', sans-serif;
    --fonte-destaque: 'Playfair Display', serif;
}

/* NOVA ANIMAÇÃO: Keyframes para a imagem de fundo subir */
@keyframes subirFundo {
    from { background-position: center 80px; opacity: 0.8; }
    to   { background-position: center center; opacity: 1; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

.container { width: 90%; max-width: 900px; margin: 0 auto; text-align: center; }
h2 { font-family: var(--fonte-destaque); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--cor-ouro); margin-bottom: 1.5rem; }
p { font-size: 1.1rem; color: var(--cor-texto-secundario); line-height: 1.8; max-width: 650px; margin: 0 auto; }
a { color: var(--cor-ouro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Animações de Scroll */
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Seção Hero (Principal) */
.hero {
    min-height: 95vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
    background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.95)), url('justica-balança.jpg') no-repeat center center/cover;
    animation: subirFundo 1.5s ease-out 0.2s forwards;
}
.hero-title { font-family: var(--fonte-destaque); font-size: clamp(2.0rem, 7vw, 4rem); color: var(--cor-texto-principal); margin-bottom: 1rem; margin-top: 2rem; }
.hero-subtitle { font-size: 1.2rem; max-width: 500px; margin-bottom: 2.5rem; color: var(--cor-texto-secundario); }

/* Botões */
.btn { padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; display: inline-block; cursor: pointer; border: 2px solid var(--cor-ouro); }
.btn-primary { background-color: var(--cor-ouro); color: #ffffff; }
.btn-primary:hover { background-color: transparent; color: var(--cor-ouro); }
.btn-whatsapp { background: var(--cor-whatsapp); border-color: var(--cor-whatsapp); color: white; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; transform: scale(1.05); }

/* Seções de Conteúdo */
.content-section { padding: 5rem 0; background-color: var(--cor-fundo-secundario); border-top: 1px solid #e5e7eb; }
.feature-section { padding: 6rem 0; background-color: var(--cor-fundo); }
.login-form-main { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto 0 auto; }
.login-form-main input { padding: 1rem; border-radius: 8px; border: 1px solid #d1d5db; background-color: #ffffff; color: var(--cor-texto-principal); font-size: 1rem; text-align: center; transition: all 0.3s; }
.login-form-main input:focus { border-color: var(--cor-ouro); box-shadow: 0 0 0 3px rgba(184, 163, 106, 0.25); outline: none; }

/* Mensagem de feedback do login (inline, com botão formal) */
.login-alert{
  max-width: 420px;
  margin: 0.75rem auto 0;
  text-align: center;
  padding: .9rem 1rem;
  border-radius: .6rem;
  background: #f9fafb;
  color: var(--cor-texto-principal);
  border-left: 4px solid #ef4444;
  font-size: .95rem;
  display: none;
}
.login-alert[data-type="ok"]{ border-left-color: #22c55e; }
.btn-ghost, .login-alert .btn-ghost{
  margin-top: .6rem;
  padding: .6rem 1rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: var(--cor-texto-principal);
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 600;
}
.login-alert .btn-ghost:hover{ border-color: var(--cor-ouro); color: var(--cor-ouro); }

/* Cards de Atuação */
.feature-grid { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin-top: 3rem; }
.feature-card { background-color: var(--cor-fundo-secundario); padding: 2.5rem 2rem; border-radius: 10px; border: 1px solid #e5e7eb; transition: transform 0.3s ease, box-shadow 0.3s ease; width: 100%; max-width: 500px; }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.feature-card i { font-size: 2.5rem; color: var(--cor-ouro); margin-bottom: 1.5rem; }
.feature-card h3 { font-family: var(--fonte-destaque); font-size: 1.5rem; margin-bottom: 1rem; color: var(--cor-texto-principal); }

/* Rodapé */
.main-footer-bottom { background-color: #f1f1f1; padding: 2rem 0; text-align: center; color: #6b7280; font-size: 0.9rem; }
.footer-content { display: flex; justify-content: center; align-items: center; gap: 15px; }
.footer-logo { height: 1.5em; width: auto; }

/* Estilo para link discreto */
.link-discreto, .link-discreto:visited { color: var(--cor-ouro); text-decoration: underline; }
.link-discreto:hover { text-decoration: none; }

/* Overlay Lattes (compatível com o tema) */
#lattes-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 9999; }
#lattes-overlay[hidden]{ display: none !important; }
#lattes-overlay:not([hidden]){ display: flex; }
.lattes-box{ background: var(--cor-fundo-secundario); border: 1px solid #e5e7eb; border-left: 4px solid var(--cor-ouro); border-radius: 10px; padding: 1rem 1.2rem; max-width: 560px; width: 92%; color: var(--cor-texto-principal); text-align: left; }
.lattes-actions{ display: flex; gap: .5rem; margin-top: .75rem; justify-content: flex-end; }
.lattes-actions .btn{ padding: .6rem 1rem; border: 1px solid #d1d5db; background: #ffffff; color: var(--cor-texto-principal); border-radius: .5rem; }
.lattes-actions .btn:hover{ border-color: var(--cor-ouro); color: var(--cor-ouro); }
.lattes-actions .btn.btn-primary{ background: var(--cor-ouro); color: #ffffff; border-color: var(--cor-ouro); }

/* CÓDIGO PARA RESPONSIVIDADE FORÇADA em telas pequenas */
@media (max-width: 480px) {
    .content-section, .feature-section { padding: 4rem 0; }
    .hero-title { font-size: clamp(1.8rem, 10vw, 2.2rem); }
    h2 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
    p { font-size: 1rem; }
    .btn { padding: 12px 28px; font-size: 0.95rem; }
}