/* Lumière | Sobre a Lumière | Medical Luxury | 2026-10
   Escopo exclusivo da seção #sobre. Nenhum filtro altera a fotografia. */
#root main #sobre {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:clamp(86px,7.5vw,126px)!important;
  padding-bottom:clamp(94px,8vw,130px)!important;
  background:
    radial-gradient(ellipse 52% 92% at 8% 49%,rgba(255,255,255,.86),transparent 76%),
    linear-gradient(112deg,#faf9f5 0%,#f4eee6 44%,#eae0d4 100%)!important;
  border-top:1px solid rgba(179,149,108,.17);
  border-bottom:1px solid rgba(172,139,96,.24);
}
#root main #sobre::before {
  content:"";position:absolute;top:12%;right:0;bottom:12%;
  width:clamp(34px,4.4vw,80px);
  background:repeating-linear-gradient(90deg,
    #92704f 0px,#bb9369 5px,#8e694b 9px,
    #cda67e 13px,#6c513d 17px,#a47b56 21px);
  opacity:.12;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);
  mask-image:linear-gradient(90deg,transparent,#000 75%);
  pointer-events:none;z-index:0;
}
#root main #sobre::after {
  content:"";position:absolute;right:clamp(28px,7vw,130px);bottom:38px;
  width:clamp(110px,14vw,260px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(171,134,85,.34),transparent);
  pointer-events:none;
}
#root main #sobre > .container {
  max-width:1310px;
  position:relative;z-index:1;
  padding-left:clamp(22px,3.2vw,56px);
  padding-right:clamp(22px,3.2vw,56px);
}
#root main #sobre > .container > .grid {
  gap:clamp(48px,5.3vw,100px);
  align-items:center;
}
@media(min-width:768px) {
  #root main #sobre > .container > .grid {
    grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  }
}
/* Portrait treated as an editorial photograph, never recoloured or retouched. */
#root main #sobre > .container > .grid > div:first-child {
  position:relative;
  z-index:1;
  padding:0;
  margin:0 10px 10px 0;
}
#root main #sobre > .container > .grid > div:first-child::before {
  content:"";position:absolute;inset:16px -15px -16px 18px;
  border:1px solid rgba(166,123,70,.53);
  border-radius:19px;
  pointer-events:none;z-index:-1;
}
#root main #sobre > .container > .grid > div:first-child > .relative.rounded-2xl {
  position:relative;
  border-radius:17px!important;
  overflow:hidden;
  border:1px solid rgba(225,205,178,.57);
  box-shadow:
    0 29px 60px rgba(53,47,40,.15),
    0 8px 19px rgba(65,52,41,.09),
    0 1px 0 rgba(255,255,255,.9) inset;
  background:#292929;
}
#root main #sobre > .container > .grid > div:first-child img {
  display:block;
  width:100%;
  height:clamp(430px,37.5vw,550px);
  object-fit:cover;object-position:center top;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}
#root main #sobre > .container > .grid > div:first-child > .relative.rounded-2xl > .absolute.inset-0 {
  background-image:linear-gradient(180deg,
    transparent 61%,rgba(14,18,18,.15) 76%,rgba(15,19,19,.64) 100%)!important;
}
#root main #sobre > .container > .grid > div:first-child > .absolute {
  width:115px;height:115px;right:-25px;bottom:-27px;
  border:1px solid rgba(184,149,102,.45)!important;
  border-radius:17px;
  box-shadow:inset 0 0 0 7px rgba(255,252,247,.13);
}
/* Editorial label at the photograph's lower left. */
#root main #sobre > .container > .grid > div:first-child::after {
  content:"DRA. MARCELA GODOY DIAS  ·  MEDICINA FETAL";
  position:absolute;left:27px;right:27px;bottom:21px;z-index:3;
  display:block;width:max-content;max-width:calc(100% - 54px);
  padding:12px 17px;
  border:1px solid rgba(243,226,201,.31);
  border-left:3px solid #d7b785;
  border-radius:8px;
  background:rgba(29,33,32,.66);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:#f5f0e7;
  font:700 10px/1.55 Lato,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.15em;
  box-shadow:0 7px 20px rgba(0,0,0,.12);
  pointer-events:none;
}
/* Editorial hierarchy on the right. */
#root main #sobre > .container > .grid > div:nth-child(2) {
  max-width:630px;
  position:relative;
  padding:12px 0;
}
#root main #sobre > .container > .grid > div:nth-child(2) > span:first-child {
  display:flex;align-items:center;gap:14px;
  margin:0 0 24px!important;
  font:700 11px/1.3 Lato,Arial,sans-serif;
  letter-spacing:.235em!important;
  text-transform:uppercase;
  color:#987647!important;
}
#root main #sobre > .container > .grid > div:nth-child(2) > span:first-child::before {
  content:"";width:41px;height:1px;flex:0 0 41px;
  background:linear-gradient(90deg,#9c7141,#e0c39c);
}
#root main #sobre h2 {
  margin-bottom:25px!important;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(2.2rem,3vw,3.2rem)!important;
  line-height:1.17!important;
  letter-spacing:-.028em;
  font-weight:500!important;
  color:#353432!important;
  text-wrap:balance;
}
#root main #sobre h2 .text-gradient-gold {
  background:linear-gradient(105deg,#966b35,#c39b5d 53%,#986b35);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
#root main #sobre > .container > .grid > div:nth-child(2) > .space-y-4 {
  padding-left:25px;
  border-left:1px solid rgba(163,125,75,.36);
}
#root main #sobre .space-y-4 p {
  color:#61594f!important;
  font:400 clamp(14px,1.05vw,16px)/1.85 Lato,Arial,sans-serif;
  letter-spacing:.004em;
}
#root main #sobre .space-y-4 p:first-child {
  color:#474540!important;
  font-size:clamp(15px,1.12vw,17px);
  line-height:1.78;
}
#root main #sobre > .container > .grid > div:nth-child(2) > .mt-8 {
  margin-top:32px!important;
  display:flex;flex-wrap:wrap;gap:10px;
}
#root main #sobre > .container > .grid > div:nth-child(2) > .mt-8 > span {
  display:inline-flex;align-items:center;gap:9px;
  min-height:35px;padding:8px 13px!important;
  border:1px solid rgba(175,144,103,.29);
  background:rgba(255,253,248,.62)!important;
  border-radius:8px!important;
  box-shadow:0 2px 8px rgba(66,49,30,.035);
  color:#63513e!important;
  font:600 12px/1.3 Lato,Arial,sans-serif!important;
  letter-spacing:.006em;
}
#root main #sobre > .container > .grid > div:nth-child(2) > .mt-8 > span::before {
  content:"";width:5px;height:5px;flex:0 0 5px;
  border-radius:100%;background:#b9935e;
}
@media(max-width:1000px) and (min-width:768px) {
  #root main #sobre > .container > .grid {gap:clamp(32px,4vw,56px)}
  #root main #sobre h2 {font-size:clamp(2rem,3.2vw,2.65rem)!important}
  #root main #sobre > .container > .grid > div:first-child img {height:490px}
  #root main #sobre > .container > .grid > div:first-child::after {font-size:9px;letter-spacing:.095em}
}
@media(max-width:767px) {
  #root main #sobre {padding:72px 0 82px!important}
  #root main #sobre::before {width:23px;opacity:.07}
  #root main #sobre > .container {padding:0 24px}
  #root main #sobre > .container > .grid {gap:46px}
  #root main #sobre > .container > .grid > div:first-child {margin-right:8px}
  #root main #sobre > .container > .grid > div:first-child img {
    height:clamp(330px,92vw,510px);object-position:center top;
  }
  #root main #sobre > .container > .grid > div:first-child::after {
    left:14px;right:14px;bottom:13px;max-width:calc(100% - 28px);
    padding:9px 12px;font-size:9px;letter-spacing:.09em;
  }
  #root main #sobre > .container > .grid > div:nth-child(2) {padding:0}
  #root main #sobre > .container > .grid > div:nth-child(2) > span:first-child {margin-bottom:18px!important}
  #root main #sobre h2 {font-size:clamp(2rem,7.6vw,2.7rem)!important;margin-bottom:21px!important}
  #root main #sobre > .container > .grid > div:nth-child(2) > .space-y-4 {
    padding-left:17px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #root main #sobre *,#root main #sobre *::before,#root main #sobre *::after {transition:none!important}
}