<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>MeuDireito.org | Advocacia Previdenciária</title>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<style>
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:linear-gradient(180deg,#0b1c2d,#0a1420);
  color:#f5f5f5;
}
.container{
  max-width:1200px;
  margin:auto;
  padding:80px 20px;
}
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.hero h1{
  font-family:'Playfair Display',serif;
  color:#d4af37;
  font-size:42px;
}
.hero p{
  font-size:17px;
  line-height:1.7;
  color:#eaeaea;
}
.btn{
  display:inline-block;
  margin-top:25px;
  padding:16px 36px;
  background:linear-gradient(135deg,#d4af37,#b8962e);
  color:#0a1420;
  border-radius:40px;
  font-weight:600;
  text-decoration:none;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.section{
  margin-top:110px;
}
.section h2{
  font-family:'Playfair Display',serif;
  color:#d4af37;
  font-size:32px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
  margin-top:35px;
}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,.25);
  border-radius:18px;
  padding:32px;
}
.card h3{
  color:#d4af37;
  margin-bottom:10px;
}
.footer{
  background:#070f18;
  padding:60px 20px;
  text-align:center;
  margin-top:140px;
}
.footer a{
  color:#d4af37;
  text-decoration:none;
}
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  background:linear-gradient(135deg,#d4af37,#b8962e);
  color:#0a1420;
  padding:16px 26px;
  border-radius:50px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  z-index:9999;
}
.chatbot{
  position:fixed;
  bottom:90px;
  right:22px;
  width:320px;
  background:#0b1c2d;
  border:1px solid rgba(212,175,55,.4);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  display:none;
  z-index:9999;
}
.chatbot header{
  padding:15px;
  background:#0a1420;
  color:#d4af37;
  font-weight:600;
  border-radius:18px 18px 0 0;
}
.chatbot .body{
  padding:15px;
  font-size:14px;
}
.chatbot button{
  width:100%;
  margin-top:10px;
  padding:10px;
  background:#d4af37;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
}
</style>
</head>

<body>

<div class="container">

  <!-- HERO -->
  <div class="hero">
    <div>
      <h1>Orientação Jurídica Previdenciária Segura</h1>
      <p>
        Atuação especializada em <strong>Direito Previdenciário</strong>,
        com ética, responsabilidade e total respeito às normas da OAB.
        Atendimento humano, claro e consciente.
      </p>
      <a class="btn" href="https://wa.me/557799615007" target="_blank">
        Falar com a Dra. Júlia
      </a>
    </div>
    <div>
      <img src="URL_DA_FOTO_DO_DR_JOSE_PAULO"
           style="width:100%;border-radius:20px;box-shadow:0 14px 38px rgba(0,0,0,.55);">
    </div>
  </div>

  <!-- SOBRE -->
  <div class="section">
    <h2>Sobre o Escritório</h2>
    <p>
      O MeuDireito.org atua com foco exclusivo na orientação previdenciária,
      oferecendo análise técnica individualizada, transparência e
      compromisso com o cliente.
    </p>
    <p><strong>Dr. José Paulo</strong><br>
    Advogado – Direito Previdenciário</p>
  </div>

  <!-- ÁREAS -->
  <div class="section">
    <h2>Áreas de Atuação</h2>
    <div class="cards">
      <div class="card">
        <h3>Aposentadorias</h3>
        <p>Análise de regras, tempo de contribuição e planejamento.</p>
      </div>
      <div class="card">
        <h3>Revisões de Benefício</h3>
        <p>Revisão da Vida Toda e correções previdenciárias.</p>
      </div>
      <div class="card">
        <h3>Descontos Indevidos</h3>
        <p>Associações, empréstimos e cobranças irregulares.</p>
      </div>
      <div class="card">
        <h3>Orientação Preventiva</h3>
        <p>Evite prejuízos futuros com orientação especializada.</p>
      </div>
    </div>
  </div>

</div>

<!-- CHATBOT -->
<div class="chatbot" id="chatbot">
  <header>Dra. Júlia • Assistente Jurídica</header>
  <div class="body">
    Olá! 😊<br><br>
    Escolha uma opção:
    <button onclick="wa('Aposentadoria')">Aposentadoria / INSS</button>
    <button onclick="wa('Revisão de Benefício')">Revisão de Benefício</button>
    <button onclick="wa('Descontos Indevidos')">Descontos Indevidos</button>
    <button onclick="wa('Falar com Advogado')">Falar com Advogado</button>
  </div>
</div>

<a class="whatsapp-float" onclick="toggleChat()">💬 Dra. Júlia</a>

<div class="footer">
  <p>© MeuDireito.org – Advocacia Previdenciária</p>
  <p><a href="https://www.instagram.com/jps.meudireito/" target="_blank">
    Instagram @jps.meudireito</a></p>
</div>

<script>
function toggleChat(){
  const c=document.getElementById('chatbot');
  c.style.display=c.style.display==='block'?'none':'block';
}
function wa(msg){
  window.open(
    'https://wa.me/557799615007?text='+
    encodeURIComponent('Olá Dra. Júlia, preciso de ajuda sobre '+msg),
    '_blank'
  );
}
</script>

</body>
</html>
