/* ==========================================================================
   Alves Nunes Rodrigues Advogados — stylesheet
   Reescrito do zero: mobile-first, sem dependências de jQuery.
   Paleta mantém a identidade original (verde petróleo + dourado).
   ========================================================================== */

:root{
  --verde-900:#0d211f;
  --verde-800:#112726;
  --verde-700:#1e4947;
  --verde-600:#245a57;
  --dourado-500:#bca762;
  --dourado-400:#d2b966;
  --dourado-700:#826e2e;
  --whats-500:#25D366;
  --whats-600:#1ebe57;
  --creme-100:#faf8f3;
  --creme-200:#f2efe6;
  --texto-900:#1c1c1a;
  --texto-600:#4a4a46;
  --branco:#ffffff;
  --borda:#e3ddcb;
  --sombra: 0 10px 30px rgba(13,33,31,.12);
  --raio: 10px;
  --fonte-titulo: "Droid Serif", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Droid Sans", Arial, Helvetica, sans-serif;
  --container: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--fonte-corpo);
  color:var(--texto-900);
  background:var(--branco);
  line-height:1.6;
  font-size:16px;
}
img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:var(--verde-700); text-decoration:none; }
a:hover, a:focus{ color:var(--dourado-700); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--dourado-500); outline-offset:2px;
}
h1,h2,h3,h4{ font-family:var(--fonte-titulo); color:var(--verde-800); line-height:1.25; margin:0 0 .6em; }
h1{ font-size:clamp(1.7rem,4.5vw,2.6rem); }
h2{ font-size:clamp(1.35rem,3.2vw,1.9rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
.visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--verde-800); color:#fff; padding:10px 16px; z-index:1000; border-radius:0 0 6px 0; }
.skip-link:focus{ left:0; }

/* ---------- Topo / contato rápido ---------- */
.faixa-topo{
  background:var(--verde-900);
  color:#cfe3e0;
  font-size:.85rem;
}
.faixa-topo .container{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; }
.faixa-topo a{ color:#cfe3e0; }
.faixa-topo a:hover{ color:var(--dourado-400); }

/* ---------- Cabeçalho ---------- */
.cabecalho{ background:var(--branco); border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:500; }
.cabecalho .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:10px; padding-bottom:10px; }
.marca{ display:flex; align-items:center; gap:12px; }
.marca img{ height:76px; width:auto; }
@media (min-width:640px){ .marca img{ height:92px; } }

.menu-toggle{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; flex:none; border-radius:8px; border:1px solid var(--borda);
  background:var(--creme-100); cursor:pointer;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{ content:""; display:block; width:22px; height:2px; background:var(--verde-800); }

.nav-principal{ display:none; width:100%; order:99; }
.nav-principal.aberto{ display:block; }
.nav-principal ul{ list-style:none; margin:0; padding:10px 0; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--borda); }
.nav-principal a{ display:block; padding:12px 4px; color:var(--verde-800); font-weight:600; }
.nav-principal a[aria-current="page"]{ color:var(--dourado-700); }

.acoes-topo{ display:flex; align-items:center; gap:10px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 18px; border-radius:8px; font-weight:700; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn-whats{ background:var(--whats-500); color:#fff; }
.btn-whats:hover, .btn-whats:focus{ background:var(--whats-600); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--verde-800); color:var(--verde-800); }
.btn-outline:hover{ background:var(--verde-800); color:#fff; }
.btn-dourado{ background:linear-gradient(180deg,var(--dourado-400),var(--dourado-700)); color:var(--verde-900); }
.btn-dourado:hover{ filter:brightness(1.06); color:var(--verde-900); }
.btn-grande{ padding:15px 26px; font-size:1.05rem; }
.icone-whats{ width:20px; height:20px; flex:none; }

@media (min-width:900px){
  .menu-toggle{ display:none; }
  .nav-principal{ display:block; width:auto; order:0; }
  .nav-principal ul{ flex-direction:row; border-top:0; padding:0; gap:6px; }
  .nav-principal a{ padding:8px 14px; border-radius:6px; }
  .nav-principal a:hover{ background:var(--creme-200); }
}

/* ---------- Hero / carrossel ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; background:var(--verde-900); }
.hero-slides{ position:relative; height:clamp(340px,52vw,560px); }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease; display:flex; align-items:flex-end;
}
.hero-slide.ativo{ opacity:1; }
.hero-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,33,31,.86) 0%, rgba(13,33,31,.35) 55%, rgba(13,33,31,.15) 100%); }

.hero-fixo{
  position:relative; background-size:cover; background-position:center center;
  min-height:clamp(340px,52vw,560px); display:flex; align-items:flex-end;
}
.hero-fixo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,33,31,.86) 0%, rgba(13,33,31,.35) 55%, rgba(13,33,31,.15) 100%); }
.hero-slide-conteudo{ position:relative; z-index:2; padding:26px 0 34px; padding-left:min(5%,57px); width:100%; box-sizing:border-box; }
.hero-areas{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:14px; }
.hero-areas a{ color:#e9e2c9; font-weight:700; font-size:.9rem; border-bottom:2px solid transparent; }
.hero-areas a:hover{ border-color:var(--dourado-400); color:#fff; }
.hero h1{ color:#fff; max-width:820px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }

.hero-dots{ position:absolute; z-index:3; bottom:12px; right:16px; display:flex; gap:6px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:1px solid #fff; background:rgba(255,255,255,.35); padding:0; cursor:pointer; }
.hero-dots button[aria-current="true"]{ background:var(--dourado-400); border-color:var(--dourado-400); }

.faixa-telefone{ background:var(--verde-800); color:#e9e2c9; text-align:center; padding:10px 0; font-size:.95rem; }
.faixa-telefone strong{ color:#fff; }
.faixa-telefone a{ color:#fff; text-decoration:underline; }

/* ---------- Seções gerais ---------- */
main{ display:block; }
.secao{ padding:48px 0; }
.secao-alt{ background:var(--creme-100); }
.eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:var(--dourado-700); margin-bottom:8px; display:block; }
.lead{ font-size:1.08rem; color:var(--texto-600); max-width:70ch; }

.grade-areas{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px; }
@media (min-width:640px){ .grade-areas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grade-areas{ grid-template-columns:repeat(4,1fr); } }
.card-area{
  background:#fff; border:2px solid var(--dourado-500); border-radius:var(--raio);
  padding:22px 20px; box-shadow:0 12px 26px rgba(13,33,31,.16); display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-area:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(13,33,31,.22); border-color:var(--dourado-700); }
.card-area h3{ margin:0; }
.card-area h3 a{ color:var(--verde-800); }
.card-area ul{ margin:0; padding-left:1.1em; color:var(--texto-600); font-size:.94rem; }
.card-area ul li{ margin-bottom:4px; }
.card-area .ver-mais{ margin-top:auto; font-weight:700; }

.tira-confianca{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; text-align:center; margin-top:28px; }
@media (min-width:700px){ .tira-confianca{ grid-template-columns:repeat(4,1fr); } }
.tira-confianca .num{ font-family:var(--fonte-titulo); font-size:1.8rem; color:var(--verde-800); display:block; }
.tira-confianca .rotulo{ font-size:.85rem; color:var(--texto-600); }

.bloco-duplo{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
@media (min-width:860px){ .bloco-duplo{ grid-template-columns:1fr 1fr; } }
.bloco-duplo img{ border-radius:var(--raio); box-shadow:var(--sombra); }

/* ---------- FAQ ---------- */
.faq{ margin-top:20px; border-top:1px solid var(--borda); }
.faq-item{ border-bottom:1px solid var(--borda); }
.faq-pergunta{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:18px 34px 18px 0; font-family:var(--fonte-titulo); font-weight:700; font-size:1.02rem;
  color:var(--verde-800); position:relative;
}
.faq-pergunta::after{
  content:"+"; position:absolute; right:0; top:14px; font-size:1.5rem; color:var(--dourado-700); line-height:1;
}
.faq-pergunta[aria-expanded="true"]::after{ content:"–"; }
.faq-resposta{ display:none; padding:0 0 18px; color:var(--texto-600); }
.faq-item.aberto .faq-resposta{ display:block; }

/* ---------- Formulário de contato -> WhatsApp ---------- */
.form-whats{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:24px; box-shadow:var(--sombra); max-width:560px; }
.form-whats label{ display:block; font-weight:700; margin-bottom:6px; color:var(--verde-800); font-size:.92rem; }
.form-whats input, .form-whats textarea{
  width:100%; padding:12px 14px; border:1px solid var(--borda); border-radius:8px;
  font-family:var(--fonte-corpo); font-size:1rem; margin-bottom:16px; background:var(--creme-100);
}
.form-whats textarea{ min-height:130px; resize:vertical; }
.form-whats .aviso-form{ font-size:.82rem; color:var(--texto-600); margin-top:-6px; margin-bottom:16px; }
.form-whats .msg-status{ font-size:.9rem; margin-top:10px; }

/* ---------- Endereço / mapa ---------- */
.endereco-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:860px){ .endereco-grid{ grid-template-columns:1fr 1.2fr; } }
.mapa-wrap{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); border:1px solid var(--borda); }
.mapa-wrap iframe{ width:100%; height:340px; border:0; display:block; }
.lista-endereco{ list-style:none; margin:0; padding:0; }
.lista-endereco li{ display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--borda); }
.lista-endereco strong{ color:var(--verde-800); min-width:110px; }

/* ---------- Rodapé ---------- */
.rodape{ background:var(--verde-900); color:#cfe3e0; padding:44px 0 18px; margin-top:40px; }
.rodape a{ color:#cfe3e0; }
.rodape a:hover{ color:var(--dourado-400); }
.rodape h2, .rodape h3{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; }
.rodape-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:760px){ .rodape-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.rodape-grid ul{ list-style:none; margin:0; padding:0; font-size:.92rem; }
.rodape-grid li{ margin-bottom:7px; }
.rodape-marca{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.selo-logo-rodape{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  padding:14px 24px; border-radius:999px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.selo-logo-rodape img{ height:64px; width:auto; display:block; }
.rodape-parceiros{ border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:20px; font-size:.85rem; }
.rodape-parceiros ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.rodape-base{ border-top:1px solid rgba(255,255,255,.12); margin-top:24px; padding-top:16px; font-size:.8rem; color:#9db4b1; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whats-flutuante{
  position:fixed; right:18px; bottom:18px; z-index:600;
  width:58px; height:58px; border-radius:50%; background:var(--whats-500);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.whats-flutuante:hover{ background:var(--whats-600); }
.whats-flutuante svg{ width:30px; height:30px; }

/* ---------- Utilidades ---------- */
.centro{ text-align:center; }
.mt-0{ margin-top:0; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-slide{ transition:none; }
}