/* Contemporary presentation approved for Bárbara Fagundes. */
html { scroll-behavior: smooth;
 }

body { margin: 0;
 background: #171b1f;
 }

.skip-link { position: absolute;
 z-index: 10;
 left: 12px;
 top: -60px;
 background: #f6f5f1;
 color: #23292c;
 padding: 12px 18px;
 }

.skip-link:focus { top: 12px;
 }

:focus-visible { outline: 3px solid #a97955;
 outline-offset: 5px;
 }

#bf-modern { max-width: 1600px;
 margin: 0 auto;
 }

#bf-modern .interactive { cursor: pointer;
 }

#bf-modern .location i { font-size: 14px;
 }

#bf-modern .specialties i { font-size: 16px;
 }

#bf-modern{--night:#171b1f;
--night-text:#f4f1eb;
--night-muted:#b9b8b6;
--copper:#d3ac8e;
--paper:#f6f5f1;
--ink:#23292c;
--muted:#646b70;
--rule:#d7d9d5;
--soft:#ebece7;
color:var(--ink);
background:var(--paper);
font:400 16px/1.6 'DM Sans',Arial,sans-serif}

#bf-modern *{box-sizing:border-box}
#bf-modern h1,#bf-modern h2,#bf-modern h3,#bf-modern p{margin:0}
#bf-modern a{color:inherit;
text-decoration:none}
#bf-modern button,#bf-modern summary{font:inherit}
#bf-modern .dark{background:var(--night);
color:var(--night-text)}
#bf-modern header{display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:25px 5%;
border-bottom:1px solid #353a3e}
#bf-modern .brand{display:flex;
align-items:center;
gap:12px}
#bf-modern .seal{display:grid;
place-items:center;
width:42px;
height:46px;
border:1px solid #697071;
color:var(--copper);
font:400 24px/1 Georgia,serif;
letter-spacing:-3px;
padding-right:3px}
#bf-modern .wordmark{font:500 16px/1.3 Manrope,Arial,sans-serif;
letter-spacing:-.4px}
#bf-modern .logo{display:block;height:52px;width:auto}
#bf-modern .wordmark small{display:block;
font:400 10px/1.8 'DM Sans',Arial,sans-serif;
letter-spacing:2.7px;
color:var(--night-muted)}
#bf-modern nav{display:flex;
gap:26px;
font-size:14px;
color:var(--night-muted)}
#bf-modern .contact-link{display:inline-flex;
gap:10px;
align-items:center;
font-size:14px;
border-bottom:1px solid var(--copper);
padding:8px 0;
color:var(--night-text)}

#bf-modern .hero{position:relative;
display:grid;
grid-template-columns:1.18fr 1fr;
isolation:isolate;
overflow:hidden}
#bf-modern .hero-copy{padding:54px 0 54px 8.5%;
position:relative;
z-index:2}
#bf-modern .kicker{display:flex;
align-items:center;
gap:12px;
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
color:var(--copper);
margin-bottom:27px}
#bf-modern .kicker:before{content:'';
width:25px;
height:1px;
background:currentColor;
flex-shrink:0}
#bf-modern h1{font:500 clamp(38px,5.9vw,61px)/1.07 Manrope,Arial,sans-serif;
letter-spacing:-2.5px}
#bf-modern h1 em{font:400 1.13em/.95 Georgia,serif;
color:var(--copper);
letter-spacing:-2px}
#bf-modern .lead{color:var(--night-muted);
font-size:16px;
max-width:360px;
margin-top:25px;
line-height:1.8}
#bf-modern .cta{display:inline-flex;
align-items:center;
justify-content:space-between;
gap:30px;
background:var(--copper);
color:#192025;
padding:14px 20px;
border:0;
border-radius:3px;
font-size:15px;
font-weight:500;
margin-top:27px}
#bf-modern .location{font-size:13px;
color:var(--night-muted);
margin-top:19px;
display:flex;
align-items:center;
gap:6px}
#bf-modern .photo{position:relative;
min-width:0;
background:var(--night)}
#bf-modern .photo img{position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
object-position:center bottom}
#bf-modern .photo:after{content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,var(--night) 0%,transparent 20%),linear-gradient(0deg,#111519 0%,transparent 40%)}
#bf-modern .photo-caption{position:absolute;
z-index:1;
bottom:29px;
left:30px;
right:24px;
border-top:1px solid #717170;
padding-top:14px;
display:flex;
justify-content:space-between;
align-items:end;
gap:14px}
#bf-modern .photo-caption span{font-size:18px;
letter-spacing:-.5px}
#bf-modern .photo-caption small{font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--night-muted)}
#bf-modern .specialties{display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
padding:22px 5%;
border-top:1px solid #353a3e;
font-size:14px;
color:var(--night-muted)}
#bf-modern .specialties span{display:flex;
align-items:center;
gap:10px}
#bf-modern .specialties i{color:var(--copper);
width:15px;
height:15px}

#bf-modern .section{padding:52px 5%}
#bf-modern .section-label{font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:18px}
#bf-modern .section-heading{display:grid;
grid-template-columns:1.15fr 1fr;
gap:45px;
align-items:end;
margin-bottom:33px}
#bf-modern h2{font:500 34px/1.15 Manrope,Arial,sans-serif;
letter-spacing:-1.5px}
#bf-modern .section-heading p{font-size:16px;
color:var(--muted);
max-width:400px}
#bf-modern .practice{border-top:1px solid var(--rule)}
#bf-modern .practice:last-child{border-bottom:1px solid var(--rule)}
#bf-modern .practice summary{display:grid;
grid-template-columns:40px 1fr 34px;
gap:15px;
align-items:center;
list-style:none;
padding:22px 0}
#bf-modern .practice summary::-webkit-details-marker{display:none}
#bf-modern .ordinal{color:var(--muted);
font-size:13px}
#bf-modern .practice h3{font:500 23px/1.2 Manrope,Arial,sans-serif;
letter-spacing:-.7px}
#bf-modern .plus{width:29px;
height:29px;
border:1px solid var(--rule);
border-radius:50%;
display:grid;
place-items:center;
color:var(--muted);
font-size:19px}
#bf-modern .practice[open] .plus{transform:rotate(45deg)}
#bf-modern .practice-body{padding:0 48px 32px 55px;
display:grid;
gap:26px;
font-size:16px;
color:var(--muted)}
#bf-modern .services,#bf-modern .credentials{margin:0;
display:grid;
gap:22px 40px}
#bf-modern .services{grid-template-columns:repeat(2,1fr)}
#bf-modern .services div,#bf-modern .credentials div{border-top:1px solid var(--rule);
padding-top:14px}
#bf-modern .services dt,#bf-modern .credentials dt{color:var(--ink);
font:500 17px/1.35 Manrope,Arial,sans-serif;
letter-spacing:-.3px}
#bf-modern .services dd,#bf-modern .credentials dd{margin:6px 0 0;
font-size:15px;
color:var(--muted)}
#bf-modern .credentials{margin-top:36px}
#bf-modern .about{display:grid;
grid-template-columns:.8fr 1.2fr;
gap:50px;
background:var(--soft)}
#bf-modern .about h2{margin-bottom:19px}
#bf-modern .about p{font-size:16px;
max-width:440px;
color:var(--muted)}
#bf-modern .about-note{border-left:2px solid var(--copper);
padding-left:23px}
#bf-modern .about-note p{color:var(--ink);
font:400 25px/1.45 Georgia,serif}
#bf-modern .about-note small{display:block;
margin-top:19px;
color:var(--muted);
font-size:10px}
#bf-modern .approach{display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:28px}
#bf-modern .approach h3{font-size:18px;
font-weight:500;
margin:13px 0 9px}
#bf-modern .approach p{color:var(--muted);
font-size:15px}
#bf-modern .approach .step{font-size:13px;
color:var(--muted);
border-top:1px solid var(--rule);
padding-top:14px}
#bf-modern .contact{display:grid;
grid-template-columns:1.2fr 1fr;
gap:45px}
#bf-modern .contact h2{font-size:38px}
#bf-modern .contact .section-label{color:var(--copper)}
#bf-modern .contact p{color:var(--night-muted);
font-size:16px;
max-width:400px;
margin-top:18px}
#bf-modern .contact-list{display:flex;
flex-direction:column;
justify-content:center;
gap:15px;
min-width:0}
#bf-modern .contact-list a{font-size:16px;
overflow-wrap:anywhere;
border-bottom:1px solid #40464a;
padding-bottom:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px}
#bf-modern footer{padding:22px 5%;
background:var(--night);
color:var(--night-muted);
border-top:1px solid #353a3e;
display:flex;
justify-content:space-between;
gap:20px;
font-size:13px}
#bf-modern footer a{border-bottom:1px solid #697071}
#bf-modern .contact-link i{color:var(--copper)}
#bf-modern .whatsapp-float{position:fixed;
z-index:20;
right:22px;
bottom:22px;
width:56px;
height:56px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--copper);
color:#192025;
font-size:26px;
box-shadow:0 8px 24px rgba(0,0,0,.25)}

@media(max-width:600px){#bf-modern header{padding:19px 6%;
gap:15px}
#bf-modern nav{display:flex;
order:3;
width:100%;
justify-content:space-between;
gap:12px;
padding-top:8px;
font-size:13px}
#bf-modern header{flex-wrap:wrap}
#bf-modern .wordmark{font-size:14px}
#bf-modern .logo{height:42px}
#bf-modern .seal{width:34px;
height:40px;
font-size:21px}
#bf-modern header .contact-link{font-size:13px;
gap:8px}
#bf-modern .hero{grid-template-columns:1fr}
#bf-modern .hero-copy{padding:37px 7%}
#bf-modern h1{font-size:45px}
#bf-modern .lead{max-width:340px}
#bf-modern .photo{height:330px}
#bf-modern .photo img{object-position:50% 35%}
#bf-modern .photo:after{background:linear-gradient(180deg,var(--night),transparent 18%),linear-gradient(0deg,#111519,transparent 42%)}
#bf-modern .photo-caption{left:7%;
right:7%}
#bf-modern .specialties{grid-template-columns:1fr 1fr;
padding:20px 7%;
gap:14px}
#bf-modern .section{padding:36px 7%}
#bf-modern .section-heading,#bf-modern .about,#bf-modern .contact{grid-template-columns:1fr;
gap:24px}
#bf-modern h2{font-size:30px}
#bf-modern .practice h3{font-size:20px}
#bf-modern .practice summary{grid-template-columns:24px 1fr 29px;
gap:10px}
#bf-modern .practice-body{padding-left:0;
padding-right:0;
gap:18px}
#bf-modern .services{grid-template-columns:1fr;
gap:18px}
#bf-modern .approach{grid-template-columns:1fr;
gap:23px}
#bf-modern .about-note p{font-size:23px}
#bf-modern .contact h2{font-size:33px}
#bf-modern footer{padding:20px 7%;
flex-direction:column;
gap:9px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
 }

}

@media (min-width: 1000px) {
  #bf-modern .hero-copy { padding-top: 66px;
 padding-bottom: 66px;
 }

  #bf-modern .lead { max-width: 420px;
 font-size: 17px;
 }

  #bf-modern .section { padding-top: 68px;
 padding-bottom: 68px;
 }

}


/* Keep the floating WhatsApp button from covering the footer links. */
#bf-modern footer { padding-right: 100px; }

@media (max-width: 600px) {
  /* The floating button already offers WhatsApp, so the header keeps brand + nav only. */
  #bf-modern header .contact-link { display: none; }
  #bf-modern nav { white-space: nowrap; font-size: 12.5px; overflow-x: auto; }
  #bf-modern footer { padding-right: 7%; padding-bottom: 96px; align-items: flex-start; }
}

#bf-modern .about .oab { margin-top: 18px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }

/* Equal columns with the art pulled toward the copy, so the hero has no empty middle. */
@media (min-width: 1000px) {
  #bf-modern .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #bf-modern h1 { font-size: clamp(61px, 6vw, 84px); letter-spacing: -3px; }
  #bf-modern .lead { max-width: 500px; font-size: 18px; }
  #bf-modern .photo-caption { left: 0; right: auto; width: min(100%, 500px); }
}

/* Photo-free hero variant: Lady Justice line art tinted in the brand copper. */
#bf-modern .photo.art { min-height: 420px; }
#bf-modern .art-figure { position: absolute; inset: 6% 0 0 0; background: var(--copper); opacity: .5;
  -webkit-mask: url(../img/justice-bg.png) center bottom / contain no-repeat;
  mask: url(../img/justice-bg.png) center bottom / contain no-repeat; }
#bf-modern .photo.art:after { background: linear-gradient(0deg, #111519 0%, transparent 30%); }
@media (min-width: 1000px) {
  #bf-modern .art-figure { right: auto; width: min(100%, 500px); }
}
@media (max-width: 600px) {
  #bf-modern .photo.art { min-height: 0; }
  #bf-modern .art-figure { inset: 4% 0 0 0; }
}

/* Size the hero by viewport height so the specialties strip shows on the first screen. */
@media (min-width: 1000px) {
  #bf-modern .hero-copy { padding-top: clamp(24px, 6vh, 66px); padding-bottom: clamp(24px, 6vh, 66px); }
  #bf-modern h1 { font-size: clamp(44px, min(6vw, 9vh), 84px); }
  #bf-modern .kicker { margin-bottom: clamp(14px, 2.5vh, 27px); }
  #bf-modern .lead { margin-top: clamp(14px, 2.5vh, 25px); font-size: clamp(15px, 2.4vh, 18px); line-height: 1.7; }
  #bf-modern .cta { margin-top: clamp(16px, 3vh, 27px); }
}
@media (min-width: 1000px) and (max-height: 820px) {
  #bf-modern header { padding-top: 16px; padding-bottom: 16px; }
  #bf-modern .location { display: none; }
  #bf-modern .specialties { padding-top: 14px; padding-bottom: 14px; }
}
@media (min-width: 1000px) and (max-height: 640px) {
  #bf-modern .hero-copy { padding-top: 18px; padding-bottom: 18px; }
  #bf-modern h1 { font-size: 8vh; }
  #bf-modern .kicker { margin-bottom: 10px; }
  #bf-modern .cta { padding-top: 11px; padding-bottom: 11px; }
}