
:root{
  --about-ink:#171715;
  --about-dark:#22211f;
  --about-paper:#f6f2ea;
  --about-gold:#b4985a;
  --about-gold-light:#d3bd88;
  --about-text:#5f5b54;
  --about-white:#fff;
  --about-green:#25d366;
  --about-line:rgba(23,23,21,.14);
}

.about-page{
  margin:0;
  background:var(--about-paper);
  color:var(--about-ink);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.about-page *{box-sizing:border-box}
.about-page img{max-width:100%;display:block}
.about-page a{text-decoration:none}

.about-shell{
  width:min(1240px,calc(100% - 64px));
  margin-inline:auto;
}

.about-hero{
  min-height:680px;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:url('https://www.plennacirurgiaplastica.com.br/images/CasalPlenna4.png') center 25%/cover no-repeat;
}

.about-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(18,18,16,.97) 0%,rgba(18,18,16,.86) 48%,rgba(18,18,16,.22) 100%);
}

.about-hero-inner{
  position:relative;
  z-index:2;
  padding:170px 0 92px;
}

.about-hero-copy{
  max-width:760px;
}

.about-eyebrow,
.about-section-label{
  display:block;
  margin-bottom:18px;
  color:var(--about-gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.about-section-label.light{color:var(--about-gold-light)}

.about-hero h1,
.about-intro h2,
.about-manifesto h2,
.about-section-heading h2,
.about-cta h2{
  margin:0;
  font-family:'Playfair Display',serif;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.04em;
}

.about-hero h1{
  max-width:760px;
  color:#fff;
  font-size:clamp(54px,7vw,96px);
}

.about-hero p{
  max-width:680px;
  margin:28px 0 0;
  color:rgba(255,255,255,.78);
  font-size:20px;
  line-height:1.75;
}

.about-primary-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  min-height:56px;
  padding:0 24px;
  background:var(--about-green);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.about-intro{
  padding:110px 0;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:76px;
  align-items:center;
}

.about-intro-copy h2{
  font-size:clamp(46px,5vw,72px);
}

.about-intro-copy p{
  margin:24px 0 0;
  color:var(--about-text);
  font-size:18px;
  line-height:1.9;
}

.about-intro-copy .about-lead{
  color:#3f3b35;
  font-size:21px;
}

.about-intro-image{
  position:relative;
}

.about-intro-image:before{
  content:"";
  position:absolute;
  inset:-18px 18px 18px -18px;
  border:1px solid rgba(180,152,90,.55);
}

.about-intro-image img{
  position:relative;
  width:100%;
  min-height:620px;
  object-fit:cover;
}

.about-manifesto{
  padding:100px 0;
  background:var(--about-dark);
}

.about-manifesto-grid{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:64px;
}

.about-manifesto-number{
  color:var(--about-gold);
  font-family:'Playfair Display',serif;
  font-size:120px;
  line-height:.9;
}

.about-manifesto h2{
  max-width:850px;
  color:#fff;
  font-size:clamp(48px,5.5vw,76px);
}

.about-text-columns{
  margin-top:42px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
}

.about-text-columns p{
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:18px;
  line-height:1.9;
}

.about-video-section,
.about-doctors{
  padding:110px 0;
}

.about-section-heading{
  max-width:820px;
  margin-bottom:44px;
}

.about-section-heading h2{
  font-size:clamp(46px,5vw,70px);
}

.about-video-frame{
  padding:18px;
  background:#171715;
}

.about-video-frame video{
  width:100%;
  max-height:720px;
  display:block;
  object-fit:cover;
}

.about-doctors{
  background:#fff;
}

.about-doctor{
  display:grid;
  grid-template-columns:.42fr 1.58fr;
  gap:52px;
  padding:48px 0;
  border-top:1px solid var(--about-line);
}

.about-doctor:last-child{
  border-bottom:1px solid var(--about-line);
}

.about-doctor-title span{
  display:block;
  margin-bottom:14px;
  color:var(--about-gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
}

.about-doctor-title h3{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:40px;
  font-weight:400;
  line-height:1.15;
}

.about-doctor ul{
  margin:0;
  padding-left:24px;
}

.about-doctor li{
  margin-bottom:10px;
  color:var(--about-text);
  font-size:18px;
  line-height:1.75;
}

.about-doctor li::marker{color:var(--about-gold)}

.about-cta{
  padding:88px 0;
  background:var(--about-gold);
}

.about-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
}

.about-cta h2{
  max-width:760px;
  color:#fff;
  font-size:clamp(44px,5vw,68px);
}

.about-cta p{
  margin:22px 0 0;
  color:rgba(255,255,255,.85);
  font-size:18px;
  line-height:1.7;
}

.about-cta a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:230px;
  min-height:58px;
  padding:0 24px;
  background:var(--about-green);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:1000px){
  .about-intro-grid{grid-template-columns:1fr}
  .about-manifesto-grid{grid-template-columns:1fr}
  .about-text-columns{grid-template-columns:1fr}
  .about-doctor{grid-template-columns:1fr}
  .about-cta-inner{flex-direction:column;align-items:flex-start}
}

@media(max-width:700px){
  .about-shell{width:min(100% - 30px,1240px)}
  .about-hero{min-height:560px;background-position:62% center}
  .about-hero-inner{padding:125px 0 62px}
  .about-hero h1{font-size:clamp(44px,13vw,62px)}
  .about-hero p{font-size:18px}
  .about-intro,
  .about-video-section,
  .about-doctors{padding:76px 0}
  .about-intro-grid{gap:44px}
  .about-intro-image img{min-height:420px}
  .about-manifesto{padding:76px 0}
  .about-manifesto-number{font-size:88px}
  .about-manifesto h2,
  .about-section-heading h2,
  .about-intro-copy h2,
  .about-cta h2{font-size:clamp(38px,11vw,54px)}
  .about-doctor-title h3{font-size:34px}
  .about-doctor li{font-size:17px}
  .about-cta{padding:66px 0}
  .about-cta a{width:100%}
}
