/* ============================================
   Souza Lopes Advocacia — Design tokens
   Navy profundo + dourado sóbrio + creme
   Display: Fraunces / Corpo: Public Sans
   ============================================ */

:root{
  --navy: #0B1520;
  --navy-soft: #122234;
  --navy-line: rgba(201,166,89,.22);
  --gold: #C9A659;
  --gold-light: #E4CE94;
  --gold-deep: #9C7C3D;
  --cream: #F3EEE3;
  --white: #FBF9F5;
  --ink: #171310;
  --muted: #AEB7C2;
  --muted-ink: #5B564D;
  --wa-green: #25D366;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', -apple-system, Segoe UI, Roboto, sans-serif;

  --radius: 2px;
  --container: 1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream);}
.brand svg{width:46px;height:46px;flex:none;}
.brand-name{font-family:var(--serif);font-size:1.05rem;line-height:1.15;}
.brand-name small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-top:3px;}

.tabs{display:flex;gap:6px;background:var(--navy-soft);border:1px solid var(--navy-line);border-radius:100px;padding:4px;}
.tabs a{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;
  padding:9px 20px;border-radius:100px;color:var(--muted);
  transition:.2s;
}
.tabs a.active{background:var(--gold);color:var(--navy);font-weight:700;}
.tabs a:not(.active):hover{color:var(--cream);}

.header-cta{
  display:none;
}
@media(min-width:820px){
  .header-cta{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;border:1px solid var(--gold);color:var(--gold-light);
    padding:11px 20px;font-size:.78rem;letter-spacing:.03em;font-weight:600;
    border-radius:100px;transition:.2s;
  }
  .header-cta:hover{background:var(--gold);color:var(--navy);}
}

@media(max-width:640px){
  .tabs a{padding:8px 14px;font-size:.7rem;}
  .brand-name{font-size:.85rem;}
}

/* ---------- HERO ---------- */
.hero{
  background: radial-gradient(ellipse 900px 500px at 80% -10%, rgba(201,166,89,.14), transparent 60%), var(--navy);
  color: var(--cream);
  padding: 88px 0 96px;
  position: relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(201,166,89,.05) 40px);
  pointer-events:none;
}
.hero .wrap{display:grid;grid-template-columns: 1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size: clamp(2.1rem, 4.4vw, 3.4rem);line-height:1.08;color:var(--white);}
.hero h1 em{font-style:italic;color:var(--gold-light);}
.hero p.lede{font-size:1.05rem;color:var(--muted);margin-top:20px;max-width:520px;}
.hero .badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;}
.hero .badges span{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:7px;}
.hero .badges span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

.btn{
  font-family:var(--sans);font-weight:700;font-size:.88rem;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:.2s ease;
}
.btn-primary{background:var(--wa-green);color:#0B1520;}
.btn-primary:hover{background:#1fb958;transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--gold);color:var(--gold-light);}
.btn-ghost:hover{background:rgba(201,166,89,.1);}
.btn svg{width:19px;height:19px;flex:none;}

.hero-photo{
  position:relative;
  border:1px solid var(--navy-line);
  background:var(--navy-soft);
  aspect-ratio: 4/5;
  border-radius:4px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo .frame-corner{
  position:absolute;width:26px;height:26px;border:1.5px solid var(--gold);opacity:.8;
}
.frame-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none;}
.frame-corner.br{bottom:12px;right:12px;border-left:none;border-top:none;}
.photo-placeholder{color:var(--muted);text-align:center;font-size:.85rem;padding:20px;}

/* ---------- SECTION generic ---------- */
section{padding: 78px 0;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:10px;color:var(--ink);}
.section-head p{color:var(--muted-ink);margin-top:12px;font-size:1rem;}
.section-head.on-dark h2{color:var(--white);}
.section-head.on-dark p{color:var(--muted);}

.bg-navy{background:var(--navy);color:var(--cream);}
.bg-cream{background:var(--cream);}

/* ---------- SERVICES GRID ---------- */
.services-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background: rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.08);
}
.service-card{
  background:var(--white);
  padding:30px 24px;
  min-height:190px;
  display:flex;flex-direction:column;gap:10px;
  transition:.2s;
}
.service-card:hover{background:var(--navy);color:var(--cream);}
.service-card:hover .service-num{color:var(--gold);}
.service-card:hover h3{color:var(--white);}
.service-num{font-family:var(--serif);font-size:.85rem;color:var(--gold-deep);}
.service-card h3{font-size:1.02rem;line-height:1.3;}
.service-card p{font-size:.85rem;color:var(--muted-ink);line-height:1.45;}
.service-card:hover p{color:var(--muted);}

.services-cta{text-align:center;margin-top:40px;}

@media(max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr;}}

/* ---------- SOBRE / ADVOGADA ---------- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
.about-photo{
  aspect-ratio:3/4;border-radius:4px;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);background:var(--navy-soft);
  display:flex;align-items:center;justify-content:center;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-name{font-size:1.9rem;margin-top:6px;color:var(--ink);}
.about-oab{font-size:.82rem;letter-spacing:.05em;color:var(--gold-deep);font-weight:700;margin-top:6px;text-transform:uppercase;}
.about-bio{margin-top:18px;color:var(--muted-ink);font-size:1rem;max-width:560px;}
.about-bio + .about-bio{margin-top:12px;}
@media(max-width:820px){.about{grid-template-columns:1fr;}.about-photo{max-width:320px;}}

/* ---------- CROSS PROMO (recomenda a outra área) ---------- */
.cross-promo{
  border:1px solid var(--navy-line);
  background:var(--navy-soft);
  padding:38px;border-radius:4px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cross-promo h3{color:var(--white);font-size:1.25rem;}
.cross-promo p{color:var(--muted);margin-top:6px;font-size:.92rem;max-width:460px;}
.cross-promo .btn-ghost{white-space:nowrap;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--navy) 0%, #16283C 100%);
  color:var(--white);text-align:center;
}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--white);}
.cta-band p{color:var(--muted);margin-top:14px;max-width:520px;margin-inline:auto;}
.cta-band .btn{margin-top:30px;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:var(--muted);padding:52px 0 30px;border-top:1px solid var(--navy-line);}
footer .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;}
footer .brand{margin-bottom:10px;}
footer .foot-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
footer .foot-col p, footer .foot-col a{font-size:.88rem;display:block;margin-bottom:6px;color:var(--muted);}
footer .foot-col a:hover{color:var(--gold-light);}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--navy-line);font-size:.76rem;color:#6E7A88;text-align:center;}

/* ---------- WHATSAPP FLOATING BUTTON (fixo) ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:60px;height:60px;border-radius:50%;
  background:var(--wa-green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  border:2px solid var(--gold);
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.07);}
.wa-float svg{width:30px;height:30px;fill:#0B1520;}
.wa-float .pulse{
  position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--wa-green);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(1.6);opacity:0;}
}
@media(max-width:640px){
  .wa-float{width:54px;height:54px;right:16px;bottom:16px;}
}

@media (prefers-reduced-motion: reduce){
  .wa-float .pulse{animation:none;display:none;}
  html{scroll-behavior:auto;}
}

/* utility */
.mobile-menu-btn{display:none;background:none;border:1px solid var(--navy-line);color:var(--cream);width:40px;height:40px;border-radius:6px;}
@media(max-width:500px){
  .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;}
}