/* =====================================================================
   Roberta Bruing · Sessão "Quem sou eu?"
   Tudo fica dentro de .rb-sobre: classes, variáveis e animações usam o
   prefixo rb- para não colidir com o CSS do site.
   Caminhos de imagem relativos a este arquivo (pasta img/ ao lado).
   Ler sobre/README.md antes de mexer em posição.
   ===================================================================== */

.rb-sobre{
  --rb-ink: #000000;
  --rb-ink-rgb: 0,0,0;
  --rb-cream: #F2EADB;
  --rb-cream-soft: #CFC5B4;
  --rb-title: #EFE6D4;
  --rb-gold: #D4AB5E;
  --rb-gold-rgb: 212,171,94;
  --rb-gold-light: #E2C17E;
  --rb-on-gold: #14100A;
  --rb-font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
  --rb-font-script: 'Hurricane', 'Brush Script MT', 'Segoe Script', cursive;
  --rb-font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --rb-gutter: clamp(16px, 4vw, 58px);
  --rb-u: min(1vw, 14.75px);   /* unidade do palco no desktop: 100u = largura do layout (até 1475px) */
  --rb-m: min(1vw, 6px);       /* unidade do palco no celular: 100m = largura da tela (até 600px) */
  /* Navbar fixa do site (nav/nav.css): ao chegar pelo menu, a sessão encosta no topo da tela, embaixo da navbar.
     --rb-livre é quanto o palco desce para o título não ficar atrás dela. No desktop, o topo das letras fica a
     5,4u do topo do palco (2,4u + 0,18 da fonte); desce só o que falta para sobrar 12px. Em 1440px ou mais não muda nada.
     No celular, o palco reserva a altura inteira da navbar (bloco @media abaixo). */
  --rb-header: var(--nav-h, 0px);
  --rb-livre: max(0px, calc(var(--rb-header) + 12px - 5.4 * var(--rb-u)));

  color-scheme: dark;
  position: relative; overflow: hidden; margin: 0; padding: 0; border: 0; max-width: none;
  background: var(--rb-ink); color: var(--rb-cream);
  font-family: var(--rb-font-body); font-size: 16px; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.rb-sobre, .rb-sobre *, .rb-sobre *::before, .rb-sobre *::after{ box-sizing: border-box }
:where(.rb-sobre) img{ display: block; max-width: 100% }
.rb-sobre img{ border: 0; border-radius: 0 }
:where(.rb-sobre) a{ color: var(--rb-gold) }
:where(.rb-sobre) a:hover{ color: var(--rb-gold-light) }
.rb-sobre :focus-visible{ outline: 2px solid var(--rb-gold-light); outline-offset: 4px }

/* ---------- palco ---------- */
.rb-topo{ position: relative; isolation: isolate }
.rb-palco{ position: relative; height: calc(64.3 * var(--rb-u) + var(--rb-livre)); overflow: hidden }
.rb-palco__cena{ position: absolute; inset: 0; background: var(--rb-ink) url("img/bg-biblioteca.webp") center top / cover no-repeat }
.rb-palco__cena::after{ content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(var(--rb-ink-rgb),0.4) 0%, rgba(var(--rb-ink-rgb),0.12) 20%, rgba(var(--rb-ink-rgb),0.14) 60%, rgba(var(--rb-ink-rgb),0.82) 88%, var(--rb-ink) 100%),
  radial-gradient(ellipse 46% 60% at 50% 40%, rgba(var(--rb-ink-rgb),0) 0%, rgba(var(--rb-ink-rgb),0.14) 70%, rgba(var(--rb-ink-rgb),0.36) 100%) }
.rb-palco__brilho{ position: absolute; left: 50%; top: 14%; width: calc(60 * var(--rb-u)); height: 66%; transform: translateX(-50%); background: radial-gradient(ellipse 50% 50% at 50% 42%, rgba(222,184,110,0.26) 0%, rgba(var(--rb-gold-rgb),0.10) 55%, rgba(var(--rb-gold-rgb),0) 100%) }

.rb-titulo{ position: absolute; z-index: 1; left: 0; right: 0; top: calc(2.4 * var(--rb-u) + var(--rb-livre)); margin: 0; padding: 0; border: 0;
  font-family: var(--rb-font-display); font-style: italic; font-weight: 800; font-size: calc(16.6 * var(--rb-u)); line-height: 1; letter-spacing: 0;
  text-align: center; text-transform: uppercase; white-space: nowrap; color: var(--rb-title); text-shadow: 0 10px 50px rgba(0,0,0,0.55);
  --rb-flutua: calc(var(--rb-u) * 0.45); animation: rb-surge 1s ease both, rb-flutua 8s ease-in-out -2s infinite }
.rb-titulo span{ color: var(--rb-gold) }

.rb-retrato{ position: absolute; z-index: 3; left: 50%; top: calc(12.4 * var(--rb-u) + var(--rb-livre)); width: calc(46 * var(--rb-u)); max-width: none; height: auto; transform: translateX(-50%);
  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.38)) drop-shadow(0 12px 36px rgba(0,0,0,0.62)) }   /* a sombra dela cai sobre o título */
/* a névoa é 18% mais larga que o palco e deriva de lado; anda com transform (GPU), sem repintar a cada quadro */
.rb-palco__nevoa{ position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 52%; opacity: 0.34; overflow: hidden; pointer-events: none }
.rb-palco__nevoa::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 118%; background: url("img/nevoa-dourada.webp") 0 100% / 100% 100% no-repeat; animation: rb-deriva 46s ease-in-out infinite alternate; will-change: transform }
.rb-palco__kettlebell{ position: absolute; z-index: 4; left: calc(50% - 58 * var(--rb-u)); bottom: calc(-16 * var(--rb-u)); width: calc(30 * var(--rb-u)); max-width: none; height: auto; pointer-events: none }
/* fundos pesados só são pedidos com a seção perto da tela (base.js marca data-perto); sem JS, carregam direto */
.js .rb-sobre:not([data-perto]) .rb-palco__cena, .js .rb-sobre:not([data-perto]) .rb-palco__nevoa::before{ background-image: none }
.js .rb-sobre:not([data-perto]) .rb-placa{ border-image-source: none }
.rb-palco__base{ position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(180deg, rgba(var(--rb-ink-rgb),0) 0%, var(--rb-ink) 94%); pointer-events: none }

/* ---------- divisor (limite entre a foto e o preto) ---------- */
.rb-divisor{ position: relative; z-index: 6; width: min(100% - 2 * var(--rb-gutter), 1180px); margin: clamp(-64px, -3.6vw, -28px) auto 0; display: flex; align-items: center; gap: clamp(10px, 1.3vw, 18px) }
.rb-divisor__fio{ flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(var(--rb-gold-rgb),0) 0%, rgba(var(--rb-gold-rgb),0.85) 100%) }
.rb-divisor__fio--dir{ background: linear-gradient(90deg, rgba(var(--rb-gold-rgb),0.85) 0%, rgba(var(--rb-gold-rgb),0) 100%) }
.rb-divisor__corte{ flex: none; width: 5px; height: 22px; margin-left: 10px; background: var(--rb-gold); transform: skewX(-22deg); box-shadow: -10px 0 0 rgba(var(--rb-gold-rgb),0.4) }
.rb-divisor__corte--dir{ margin: 0 10px 0 0; box-shadow: 10px 0 0 rgba(var(--rb-gold-rgb),0.4) }
.rb-divisor__marca{ flex: none; display: grid; place-items: center; width: clamp(84px, 7vw, 100px); height: clamp(50px, 4.2vw, 58px); border: 1px solid rgba(var(--rb-gold-rgb),0.8); background: var(--rb-ink); transform: skewX(-22deg); box-shadow: 0 10px 30px rgba(0,0,0,0.6) }
.rb-divisor__marca img{ width: 44%; height: auto; transform: skewX(22deg) }

/* ---------- placas flutuantes ---------- */
/* A imagem da placa tem 1014x240: 351px de latão à esquerda, 130px de ponta à direita; o meio estica com o texto. */
.rb-placas{ margin: 0; padding: 0; list-style: none }
.rb-gatilho{ position: absolute; left: 0; top: calc(34 * var(--rb-u) + var(--rb-livre)); width: 1px; height: 1px; pointer-events: none }
.rb-placa{ --rb-h: calc(6.8 * var(--rb-u)); --rb-k: calc(var(--rb-h) / 240);
  position: absolute; z-index: 2; height: var(--rb-h); margin: 0; padding: 0 calc(var(--rb-h) * 0.04) 0 calc(var(--rb-h) * 0.1); list-style: none;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--rb-h) * 0.06);
  font-family: var(--rb-font-body); letter-spacing: normal;
  border-style: solid; border-color: transparent; border-width: 0 calc(130 * var(--rb-k)) 0 calc(351 * var(--rb-k));
  border-image: url("img/placa.webp") 0 130 0 351 fill stretch;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,0.6));
  --rb-flutua: calc(var(--rb-h) * 0.085); animation: rb-flutua var(--rb-dur, 6s) ease-in-out var(--rb-fase, 0s) infinite }
.rb-placa::before{ content: none }
/* entrada: cada placa parte da borda da tela do seu lado e encaixa no lugar, uma por vez (só com o JS ligado) */
.rb-sobre.rb-anima .rb-placa{ translate: var(--rb-de) 0; opacity: 0 }
.rb-sobre.rb-anima .rb-entrou .rb-placa{ translate: 0 0; opacity: 1; animation: rb-chega 0.95s cubic-bezier(.17,.84,.3,1.07) var(--rb-espera, 0s) backwards, rb-flutua var(--rb-dur, 6s) ease-in-out var(--rb-fase, 0s) infinite }
/* reflexo: uma faixa de luz paralela ao corte da placa atravessa o metal de tempos em tempos.
   O <i class="rb-placa__luz"> recorta no formato da placa; a faixa (::before, 3× a largura) corre com transform. */
.rb-placa__luz{ position: absolute; top: 0; bottom: 0; left: calc(-351 * var(--rb-k)); right: calc(-130 * var(--rb-k)); overflow: hidden; pointer-events: none;
  clip-path: polygon(calc(var(--rb-h) * 0.41) 0, 100% 0, calc(100% - var(--rb-h) * 0.41) 100%, 0 100%) }
.rb-placa__luz::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(112deg, rgba(255,244,214,0) 41%, rgba(255,244,214,0.10) 46.5%, rgba(255,244,214,0.46) 50%, rgba(255,244,214,0.10) 53.5%, rgba(255,244,214,0) 59%);
  transform: translateX(-100%); animation: rb-reflexo 6.5s ease-in-out infinite; will-change: transform }
.rb-placa--especialidade .rb-placa__luz::before{ animation-delay: 1.5s }
.rb-placa--experiencia .rb-placa__luz::before{ animation-delay: 3.1s }
.rb-placa--atendimento .rb-placa__luz::before{ animation-delay: 4.4s }
.rb-placa__icone{ position: absolute; z-index: 1; left: calc(-189 * var(--rb-k)); top: 50%; width: calc(var(--rb-h) * 0.46); height: calc(var(--rb-h) * 0.46); transform: translate(-50%, -50%); fill: none; stroke: #1B1408; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255,236,190,0.5)) }
/* posição de cada placa (medida no contorno do recorte para deixar ~26px de respiro até ela em 1440px) e ritmo das animações */
.rb-placa--formacao{ right: calc(50% + 13.9 * var(--rb-u)); top: calc(29.7 * var(--rb-u) + var(--rb-livre)); --rb-de: -110vw; --rb-espera: .15s; --rb-dur: 6.2s; --rb-fase: -1.2s }
.rb-placa--especialidade{ left: calc(50% + 14.9 * var(--rb-u)); top: calc(29.7 * var(--rb-u) + var(--rb-livre)); --rb-de: 110vw; --rb-espera: .7s; --rb-dur: 7s; --rb-fase: -3.6s }
.rb-placa--experiencia{ right: calc(50% + 18.2 * var(--rb-u)); top: calc(39.1 * var(--rb-u) + var(--rb-livre)); --rb-de: -110vw; --rb-espera: 1.25s; --rb-dur: 7.4s; --rb-fase: -5s }
.rb-placa--atendimento{ left: calc(50% + 19.7 * var(--rb-u)); top: calc(39.1 * var(--rb-u) + var(--rb-livre)); --rb-de: 110vw; --rb-espera: 1.8s; --rb-dur: 6.6s; --rb-fase: -2.4s }
.rb-placa__rotulo{ position: relative; z-index: 1; display: flex; align-items: center; gap: 0.9em; font-size: max(9px, calc(var(--rb-h) * 0.1)); font-weight: 600; font-stretch: 112%; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; color: var(--rb-gold-light) }
.rb-placa__rotulo::after{ content: ""; flex: 1 1 auto; min-width: 1.6em; height: 1px; background: rgba(var(--rb-gold-rgb), 0.7) }
.rb-placa__valor{ position: relative; z-index: 1; font-size: max(13px, calc(var(--rb-h) * 0.18)); font-weight: 600; line-height: 1.15; white-space: nowrap; color: #FFFFFF }

/* ---------- manifesto ---------- */
.rb-manifesto{ position: relative; display: flow-root; background: var(--rb-ink) }
.rb-manifesto__texto{ position: relative; z-index: 1; max-width: 820px; margin: clamp(26px, 3vw, 40px) auto 0; padding: 0 var(--rb-gutter) clamp(64px, 7.5vw, 112px); display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center }
.rb-chamada{ margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; font-family: var(--rb-font-body); font-size: clamp(56px, 7.6vw, 116px); line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--rb-gold) }
.rb-chamada__script{ position: relative; z-index: 1; margin: 0 0.25em -0.58em 0; font-family: var(--rb-font-script); font-size: 0.72em; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: #FFF8EC; -webkit-text-stroke: 0.012em currentColor; transform: rotate(-6deg); text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 6px 22px rgba(0,0,0,0.6) }
.rb-chamada__bloco{ font-family: var(--rb-font-body); font-weight: 900; font-stretch: 116%; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--rb-gold) }
.rb-manifesto__abre{ margin: 0; padding: 0; font-family: var(--rb-font-body); font-size: clamp(18px, 1.55vw, 22px); font-weight: 600; line-height: 1.4; letter-spacing: normal; color: var(--rb-cream); text-wrap: balance }
.rb-manifesto__corpo{ margin: -10px 0 0; padding: 0; max-width: 640px; font-family: var(--rb-font-body); font-size: clamp(16px, 1.25vw, 18px); font-weight: 400; line-height: 1.75; letter-spacing: normal; color: var(--rb-cream-soft); text-wrap: pretty }
.rb-manifesto__missao{ margin: 6px 0 0; padding: 0; max-width: 640px; font-family: var(--rb-font-body); font-size: clamp(17px, 1.45vw, 21px); font-weight: 600; line-height: 1.5; letter-spacing: normal; color: var(--rb-cream); text-wrap: balance }
.rb-manifesto__missao span{ display: block; font-weight: 400; color: var(--rb-gold-light) }
.rb-cta{ margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 56px; padding: 0 40px 0 44px; border: 0; border-radius: 0; background: var(--rb-gold); color: var(--rb-on-gold); font-family: var(--rb-font-body); font-size: 13px; font-weight: 700; font-stretch: 112%; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); transition: background-color .2s ease }
.rb-cta:hover{ background: var(--rb-gold-light); color: var(--rb-on-gold) }
.rb-cta:hover svg{ transform: translateX(4px) }
.rb-cta svg{ flex: none; transition: transform .2s ease }
.rb-cta:focus-visible{ outline-offset: 6px }

@keyframes rb-surge{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes rb-chega{ from{ translate: var(--rb-de) 0; opacity: 0 } 25%{ opacity: 1 } to{ translate: 0 0; opacity: 1 } }
@keyframes rb-flutua{ 0%, 100%{ transform: translateY(calc(var(--rb-flutua) * -0.5)) } 50%{ transform: translateY(calc(var(--rb-flutua) * 0.5)) } }
@keyframes rb-reflexo{ 0%, 58%{ transform: translateX(-100%) } 100%{ transform: translateX(33.3333%) } }
@keyframes rb-deriva{ from{ transform: none } to{ transform: translateX(-15.2542%) } }   /* 18% do palco = 18/118 da névoa */

/* ---------- celular e tablet (até 1000px) ---------- */
@media (max-width: 1000px){
  /* O título fica colado no topo: o palco reserva a altura inteira da navbar fixa acima dele e tudo desce junto. */
  .rb-sobre{ --rb-livre: var(--rb-header) }
  .rb-palco{ height: calc(18px + var(--rb-livre) + 127.8 * var(--rb-m)) }
  .rb-palco__cena{ background-image: url("img/bg-biblioteca-mobile.webp"); background-size: cover; background-position: center top }
  .rb-palco__cena::after{ background:
    linear-gradient(180deg, rgba(var(--rb-ink-rgb),0.45) 0%, rgba(var(--rb-ink-rgb),0.1) 18%, rgba(var(--rb-ink-rgb),0.16) 55%, rgba(var(--rb-ink-rgb),0.85) 84%, var(--rb-ink) 100%),
    radial-gradient(ellipse 90% 60% at 50% 40%, rgba(var(--rb-ink-rgb),0) 0%, rgba(var(--rb-ink-rgb),0.08) 70%, rgba(var(--rb-ink-rgb),0.2) 100%) }
  .rb-palco__brilho{ top: 12%; width: calc(96 * var(--rb-m)); height: 54% }
  .rb-titulo{ top: calc(18px + var(--rb-livre)); font-size: calc(18.4 * var(--rb-m)); --rb-flutua: 14px; animation-duration: 1s, 5.5s }
  .rb-retrato{ top: calc(18px + var(--rb-livre) + 10.5 * var(--rb-m)); width: calc(104 * var(--rb-m)) }
  .rb-palco__nevoa{ height: 44% }
  .rb-palco__kettlebell{ display: none }
  .rb-divisor{ margin-top: calc(-7 * var(--rb-m)) }
  .rb-placas{ position: relative; z-index: 6; max-width: 600px; margin: 26px auto 0; padding-inline: var(--rb-gutter); display: flex; flex-direction: column; gap: 14px }
  .rb-gatilho{ position: static; display: block }
  .rb-placa{ --rb-h: 70px; position: relative; inset: auto; width: 87%; align-self: flex-start }
  .rb-placa:nth-child(even){ align-self: flex-end }
  .rb-placa__valor{ font-size: 14px; white-space: normal; text-wrap: balance }
  .rb-manifesto__texto{ margin-top: 48px; gap: 26px }
  .rb-chamada{ font-size: min(16.6vw, 100px) }
  .rb-cta{ width: 100%; max-width: 340px; padding-inline: 28px; letter-spacing: 0.16em; font-size: 12.5px }
}

@media (prefers-reduced-motion: reduce){
  .rb-titulo, .rb-placa, .rb-placa__luz::before, .rb-palco__nevoa::before, .rb-sobre.rb-anima .rb-entrou .rb-placa{ animation: none }
  .rb-sobre.rb-anima .rb-placa{ translate: none; opacity: 1 }
  .rb-cta, .rb-cta svg{ transition: none }
}