/* ============================================================
   WJR FIXER — pages/sobre.css
   Estilos exclusivos da página Sobre (sobre.html).
   ============================================================ */

html:has(body[data-page="sobre"]),
body[data-page="sobre"]{
  background:#F5EFE8;
  color:var(--ink);
}
body[data-page="sobre"]::before{ opacity:.03; mix-blend-mode:multiply; }
body[data-page="sobre"] #main{ background:#F5EFE8; }


/* —— Hero (metade da seção — foto full-bleed à direita) —— */
.sobre-hero{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:clamp(720px, 100vh, 1080px);
  min-height:clamp(720px, 100dvh, 1080px);
  display:flex; align-items:center;
  padding-top:clamp(7rem, 14vw, 9rem);
  padding-bottom:clamp(4rem, 8vw, 5.75rem);
}
.sobre-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 80% at 22% 42%, rgba(205,174,144,.07), transparent 55%),
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 42%, rgba(23,23,23,.4) 52%, transparent 58%),
    url("../../img/bg-gradient-3.jpg") left center / cover no-repeat;
}
.sobre-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,8,.35) 0%, transparent 38%, transparent 68%, rgba(8,8,8,.3) 100%);
}
.sobre-hero .wjr-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.sobre-hero-media{
  position:absolute; top:0; right:0; bottom:0; left:38%; z-index:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
.sobre-hero-media img{
  width:100%; height:100%; object-fit:cover;
  object-position:right 28%;
  transform:scale(1.14);
  transform-origin:88% 42%;
  filter:saturate(.78) contrast(1.1) brightness(.64);
}
.sobre-hero-media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(23,23,23,.95) 0%,
    rgba(23,23,23,.35) 12%,
    transparent 28%
  );
}
.sobre-hero-media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(23,23,23,.3) 0%, transparent 34%, transparent 72%, rgba(23,23,23,.4) 100%);
}
.sobre-hero-media .sobre-hero-bracket{
  position:absolute; top:clamp(5.5rem, 11vw, 7rem); right:var(--gut);
  z-index:2; width:28px; height:28px;
  border-top:1.5px solid var(--sand); border-right:1.5px solid var(--sand);
  opacity:.7;
}
.sobre-hero-in{
  position:relative; z-index:3; width:100%;
  max-width:min(52%, 560px);
  padding-right:clamp(1rem, 3vw, 2rem);
}
.sobre-hero-title{
  font-weight:300; font-size:clamp(1.9rem,3.6vw,3.05rem);
  line-height:1.2; letter-spacing:-.022em; text-wrap:balance;
}
.sobre-hero-title span{ display:block; }
.sobre-hero-title .a{ color:var(--off-90); font-weight:300; }
.sobre-hero-title .b{ color:var(--sand); font-weight:600; margin-top:.15em; }
.sobre-hero .intro{ margin-top:clamp(1.5rem,3vw,2.1rem); max-width:46ch; }
.sobre-hero .intro p{
  font-size:clamp(1.02rem,1.55vw,1.15rem); font-weight:300; line-height:1.62;
  color:var(--off-70);
}
.sobre-hero .intro p + p{ margin-top:1.1rem; }
.sobre-hero .intro strong{ color:var(--off-90); font-weight:500; }
@media(max-width:900px){
  .sobre-hero{
    min-height:auto; flex-direction:column; align-items:stretch;
    padding-top:clamp(6.5rem, 14vw, 7.5rem);
  }
  .sobre-hero-media{
    position:relative; left:0; width:100%; height:clamp(300px, 48vw, 420px);
    order:-1; margin-bottom:0;
    -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .sobre-hero-media img{
    object-position:72% 22%;
    transform:scale(1.06);
    transform-origin:75% 40%;
  }
  .sobre-hero-media::before{
    background:linear-gradient(180deg, var(--ink) 0%, rgba(23,23,23,.4) 45%, transparent 100%);
  }
  .sobre-hero-media::after{
    background:linear-gradient(180deg, rgba(23,23,23,.5) 0%, transparent 50%);
  }
  .sobre-hero-media .sobre-hero-bracket{ top:1.1rem; right:1.1rem; }
  .sobre-hero-in{ max-width:100%; padding-right:0; }
  .sobre-hero::before{
    background:var(--ink);
  }
}

/* —— PMV — continuidade cromática com o hero (Fundo 03 + areia) —— */
.section.sobre-pmv{
  padding-block:clamp(5rem,11vw,8.5rem);
  margin-top:-1px;
}
.sobre-pmv-band{
  position:relative; overflow:hidden; background:var(--ink);
}
.sobre-pmv-band::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 95% 75% at 28% 38%, rgba(205,174,144,.09), transparent 52%),
    url("../../img/bg-gradient-3.jpg") center 42% / cover no-repeat;
}
.sobre-pmv-band::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(23,23,23,.72) 10%, transparent 32%),
    linear-gradient(180deg, transparent 55%, rgba(8,8,8,.22) 100%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(8,8,8,.28), transparent 58%);
}
.sobre-pmv-band .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.sobre-pmv-band .wrap{ position:relative; z-index:1; }
.pmv-head{
  text-align:center; max-width:52ch; margin-inline:auto;
  margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.pmv{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.35rem); }
.pmv-card{
  display:flex; flex-direction:column; text-align:center;
  padding:clamp(2.35rem,4.5vw,3.1rem) clamp(1.25rem,2.5vw,1.75rem);
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--sand) 14%, var(--line));
  background:color-mix(in srgb, var(--ink-2) 58%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.pmv-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--sand) 38%, transparent);
  background:color-mix(in srgb, var(--ink-2) 72%, transparent);
}
.pmv-card .k{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sand); font-weight:600;
}
.pmv-card h3{
  font-size:clamp(.9rem, 1.38vw, 1.1rem); font-weight:700;
  margin:1rem 0 .85rem; color:var(--off); line-height:1.25;
  letter-spacing:-.02em; text-wrap:balance;
  min-height:calc(1.25em * 2);
  display:flex; align-items:flex-end; justify-content:center;
}
.pmv-card p{
  color:var(--off-55); font-weight:300; flex:1;
  font-size:clamp(.98rem,1.35vw,1.05rem); line-height:1.58;
  max-width:32ch; margin-inline:auto;
}
@media(max-width:820px){
  .pmv{ grid-template-columns:1fr; }
  .pmv-card{ text-align:left; }
  .pmv-card h3{ justify-content:flex-start; }
  .pmv-card p{ margin-inline:0; }
}

/* —— Valores — Fundo 03 —— */
.section.sobre-valores{ padding-block:clamp(3.25rem,7vw,5.5rem); }
.sobre-valores{
  position:relative; overflow:hidden; background:var(--ink); color:var(--off);
}
.sobre-valores::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:url("../../img/bg-gradient-3.jpg") center center / cover no-repeat;
}
.sobre-valores::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--wjr-veil);
}
.sobre-valores .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.sobre-valores .wrap{ position:relative; z-index:1; }
.val-head{ max-width:40ch; }
.val-title{
  font-size:clamp(1.75rem,3.2vw,2.65rem); line-height:1.2;
  letter-spacing:-.022em; text-wrap:balance;
}
.val-title span{ display:block; }
.val-title .a{ font-weight:300; color:var(--off-90); }
.val-title .b{ font-weight:700; color:var(--sand); }
.val-title .c{ font-weight:300; color:var(--off-55); }
.val-list{ margin-top:clamp(1.5rem,3vw,2.1rem); border-top:1px solid var(--line); }
.val{
  display:grid; grid-template-columns:52px 1fr; gap:clamp(1rem,2.5vw,2rem);
  align-items:start; padding:clamp(1.1rem,2vw,1.5rem) 0;
  border-bottom:1px solid var(--line-2);
  transition:padding-left .45s var(--ease);
}
.val:hover{ padding-left:.4rem; }
.val .vn{
  font-size:.78rem; color:var(--sand); font-weight:600; letter-spacing:.12em;
  padding-top:.35rem;
}
.val .vt h3{
  font-size:clamp(1.25rem,2.5vw,1.65rem); font-weight:700;
  letter-spacing:-.01em; color:var(--off);
}
.val .vt p{
  color:var(--off-55); font-weight:300; margin-top:.55rem;
  max-width:58ch; line-height:1.58; font-size:clamp(.98rem,1.4vw,1.05rem);
}
.val .vt cite{
  display:block; margin-top:.85rem; font-style:normal;
  font-size:.92rem; line-height:1.55; color:var(--off-55);
}
.val .vt cite em{ font-style:italic; color:var(--sand); font-weight:500; }

/* —— Desdobramentos — off-white · grid ícone + rótulo —— */
.section.sobre-desd{
  padding-block:clamp(5rem,11vw,8.5rem);
  background:#F5EFE8; color:var(--ink);
}
.sobre-desd .wrap{ max-width:960px; }
.desd-head{
  text-align:center; max-width:52ch; margin-inline:auto;
  margin-bottom:clamp(3.5rem,8vw,5rem);
}
.desd-head h2{
  font-size:clamp(2rem,4.2vw,2.85rem); font-weight:300;
  letter-spacing:-.02em; line-height:1.05; color:var(--ink);
}
.desd-head .lead{
  color:rgba(23,23,23,.62); font-weight:300; margin-top:1rem;
  font-size:clamp(1rem,1.45vw,1.1rem); line-height:1.6;
}
.desd-head .lead + .lead{ margin-top:1.35rem; }
.desd-head .lead strong{
  font-weight:600; color:var(--sand-deep);
}
.desd-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(3.75rem,9vw,6rem) clamp(1.25rem,3vw,2rem);
}
.desd-cell{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--brand);
  transform:translateY(0);
  transition:transform .65s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.desd-cell:hover{
  transform:translateY(-6px);
}
.desd-cell__glyph{
  display:flex; align-items:center; justify-content:center;
  height:clamp(20px,3.2vw,28px); width:clamp(26px,4.2vw,36px);
  margin-bottom:clamp(.9rem,1.8vw,1.2rem);
}
.desd-cell__glyph img{
  display:block; max-height:100%; max-width:100%; width:auto; height:auto;
  object-fit:contain;
}
.desd-cell__name{
  font-size:clamp(.65rem,1.05vw,.74rem); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand);
}
.desd-cell--access{ --brand:var(--access); }
.desd-cell--education{ --brand:var(--palestras); }
.desd-cell--efficiency{ --brand:var(--consultoria); }
.desd-cell--tools{ --brand:var(--tools); }
.desd-cell--advisory{ --brand:var(--advisory); }
.desd-cell--circle{ --brand:var(--genesis); }
@media(max-width:720px){
  .desd-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(2.75rem,7vw,4rem) 1.25rem; }
}
@media(max-width:420px){
  .desd-grid{ grid-template-columns:repeat(2,1fr); gap:2.5rem 1rem; }
  .desd-cell__glyph{ height:18px; width:26px; }
}