/* =========================================================
   MARCUTZ TATTOO — Seção "Sobre mim"
   Tela fixa: cenário e texto formam uma composição única 16:9
   (2392x1344) que escala inteira, sem nada mudar de lugar.
   ========================================================= */

.sobre {
  --sb-preto: #070304;
  --sb-osso: #ece2cf;
  --sb-vermelho: #d8232e;
  /* tipografia da marca (tokens do site em css/base.css, com reserva se a seção for usada sozinha) */
  --sb-texto: var(--f-texto, "Montserrat", sans-serif);       /* parágrafos */
  --sb-marca: var(--f-display, "Gang of Three", sans-serif);  /* rótulos, abas, lema */
  --sb-traco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath fill='%23d8232e' fill-rule='evenodd' d='M2 9.5C20 6.8 55 5.2 95 5c35-.2 70 .6 101 2.2 3 .2 3.5 2 1 2.4-22 1-47 .8-77 1.4-35 .6-70 1.6-106 2.6C6 13.9.5 11.2 2 9.5ZM38 8.6c40-1.4 80-1.7 128-1.1v.6c-48-.2-88 .2-128 1.2ZM60 11.2c30-.6 60-.9 90-1v.5c-30 .2-60 .5-90 1.1Z'/%3E%3C/svg%3E");

  position: relative;
  margin: 0;
  padding: 0;                /* blinda contra padding global de <section> do site */
  scroll-margin-top: var(--sb-topo, 0px);   /* altura do menu fixo, se houver */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sb-preto);
  color: var(--sb-osso);
  container-type: size;
}
.sobre *, .sobre *::before, .sobre *::after { box-sizing: border-box; }

/* ---------- Geometria da tela fixa ----------
   Largura = tela toda. Em telas mais "quadradas" que 16:9 aceita cortar
   até 9% da direita; passou disso, sobra faixa preta em cima/embaixo
   (o palco já esfuma pro preto nas bordas, então não aparece emenda).
   Em telas mais largas que 16:9, corta um pouco de cima/embaixo.      */
.sobre__palco,
.sobre__conteudo {
  --W: max(100cqw, min(calc(100cqh * 1.7798), 109cqw));
  --H: calc(var(--W) / 1.7798);
  --T: clamp(min(calc(100cqh - var(--H)), calc((100cqh - var(--H)) / 2)),
             calc(50cqh - .46 * var(--H)),
             max(0px, calc((100cqh - var(--H)) / 2)));
  --u: calc(var(--W) / 100);       /* 1% da largura do palco */
}

.sobre__palco-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.sobre__palco {
  position: absolute;
  left: 0;
  top: var(--T);
  width: var(--W);
  height: var(--H);
}

.sobre__cenario {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #1a0608 url("../assets/sobre/sobre-cenario-lqip.webp") center / cover;
}

/* ---------- Dragão: corpo e cabeça recortados do cenário ----------
   As camadas são cópias exatas do cenário com borda esfumada; paradas
   ficam idênticas ao fundo, e o movimento é de poucos pixels.       */
.sobre__dragao-corpo {
  position: absolute;
  left: 26.421%;
  top: 0;
  width: 56.355%;
  height: auto;
  transform-origin: 85% 25%;
  animation: sobre-corpo 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes sobre-corpo {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30%      { transform: translate(-.25%, .7%) rotate(-.18deg); }
  65%      { transform: translate(.15%, -.45%) rotate(.12deg); }
}

.sobre__dragao-cabeca {
  position: absolute;
  left: 71.865%;
  top: 0;
  width: 28.135%;
  aspect-ratio: 673 / 741;
  transform-origin: 30% 8%;
  animation: sobre-cabeca 6.6s ease-in-out infinite;   /* mesmo ritmo dos olhos e da fumaça */
  will-change: transform;
}
.sobre__dragao-cabeca img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes sobre-cabeca {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  9%       { transform: translate(.35%, .9%) scale(1.012) rotate(.35deg); }   /* expira: avança */
  40%      { transform: translate(.1%, .3%) scale(1.004) rotate(.1deg); }
  78%      { transform: translate(-.25%, -.75%) scale(.997) rotate(-.25deg); } /* inspira: recua */
}

/* ---------- Olhos (dentro da cabeça) ---------- */
.sobre__olho {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12.1%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 120, .95) 0, rgba(255, 45, 30, .6) 22%, rgba(255, 20, 20, .18) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: .35;
  animation: sobre-olho 6.6s ease-in-out infinite;
}
@keyframes sobre-olho {
  0%   { opacity: .35; scale: .9; }
  6%   { opacity: 1;   scale: 1.3; }
  22%  { opacity: .75; scale: 1.05; }
  60%  { opacity: .45; scale: .95; }
  100% { opacity: .35; scale: .9; }
}

/* ---------- Respiração: brasa na boca + fumaça ---------- */
.sobre__boca {
  position: absolute;
  left: 54.68%;
  top: 71.39%;
  width: 21.3%;
  aspect-ratio: 1.5;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 120, 70, .85) 0, rgba(255, 40, 25, .45) 30%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: sobre-boca 6.6s ease-in-out infinite;
}
@keyframes sobre-boca {
  0%   { opacity: 0; }
  7%   { opacity: 1; scale: 1.15; }
  30%  { opacity: .45; scale: 1; }
  60%, 100% { opacity: 0; }
}

.sobre__fumaca {
  position: absolute;
  left: 80.7%;          /* boca em 87.25%; origem da pluma a 43.8% da largura */
  top: 39.4%;
  width: 15%;
}
.sobre__fumaca img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  transform-origin: 43.8% 0;
  mix-blend-mode: screen;
  opacity: 0;
  transform: rotate(var(--r)) scale(.15);
  animation: sobre-fumaca 6.6s var(--d) cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes sobre-fumaca {
  0%   { opacity: 0;                        transform: rotate(var(--r))  scale(.15); }
  12%  { opacity: var(--o); }
  50%  { opacity: calc(var(--o) * .75); }
  100% { opacity: 0;                        transform: rotate(var(--r2)) scale(1.15) translateY(8%); }
}

/* ---------- Lanternas ---------- */
.sobre__lanterna {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 95, .6) 0, rgba(255, 50, 30, .22) 38%, transparent 70%);
  mix-blend-mode: screen;
  animation: sobre-chama 3.4s var(--d) ease-in-out infinite;
}
@keyframes sobre-chama {
  0%, 100% { opacity: .75; scale: 1; }
  18%      { opacity: .95; scale: 1.06; }
  31%      { opacity: .62; scale: .96; }
  47%      { opacity: .9;  scale: 1.03; }
  63%      { opacity: .7;  scale: .98; }
  82%      { opacity: 1;   scale: 1.08; }
}

/* ---------- Névoa (textura repetida, loop sem emenda) ---------- */
.sobre__nevoa {
  position: absolute;
  left: 0;
  aspect-ratio: 19.505;
  background: repeat-x 0 0 / 25% 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* integração (v4.0.1): a textura só baixa quando o hero.js libera as imagens das seções de baixo
   (.imgs-ok, na abertura do hero). Antes, o fundo do CSS baixava junto com o hero. */
.imgs-ok .sobre__nevoa { background-image: url("../assets/sobre/nevoa.webp"); }
.sobre__nevoa--fundo  { top: 62%; height: 18%; opacity: .26; animation: sobre-nevoa 110s linear infinite; }
.sobre__nevoa--frente { top: 76%; height: 26%; opacity: .3;  animation: sobre-nevoa 70s linear infinite reverse; }
@keyframes sobre-nevoa { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ---------- Retrato (moldura + foto) ---------- */
.sobre__retrato {
  position: absolute;
  left: 48.49%;
  top: 23.21%;
  width: 22.2%;
  aspect-ratio: 1024 / 1521;
  margin: 0;
}
.sobre__retrato::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  bottom: -2.2%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.85), transparent 70%);
  z-index: -2;
}
.sobre__retrato-aura {
  position: absolute;
  inset: -6% -16% 4%;
  background: radial-gradient(ellipse at 50% 42%, rgba(215, 22, 32, .38), rgba(140, 10, 18, .12) 45%, transparent 68%);
  filter: blur(8px);
  z-index: -1;
  animation: sobre-aura 6.6s ease-in-out infinite;
  transition: opacity .6s;
}
@keyframes sobre-aura { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

.sobre__retrato-foto {
  position: absolute;
  left: 18.75%;
  top: 17.82%;
  width: 62.6%;
  height: 66.2%;
  overflow: hidden;
  background: #120405;
}
.sobre__retrato-foto {
  filter: brightness(1.04);
  transition: filter .7s;
}
.sobre__retrato-foto img,
.sobre__retrato-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sobre__retrato-canvas { opacity: 0; transform-origin: 50% 38%; }
.sobre__retrato.is-pronto .sobre__retrato-canvas { opacity: 1; }
.sobre__retrato.is-pronto .sobre__retrato-foto img { opacity: 0; }   /* fica só pro leitor de tela */

/* selo do topo da moldura: acende quando a tinta começa a escorrer */
.sobre__retrato-selo {
  position: absolute;
  left: 49.9%;
  top: 14.86%;
  width: 24%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 120, .95) 0, rgba(255, 60, 35, .7) 18%, rgba(230, 20, 30, .25) 42%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.sobre__retrato.is-trocando .sobre__retrato-selo { animation: sobre-selo 1.9s ease-out; }
@keyframes sobre-selo {
  0%   { opacity: 0;   scale: .5; }
  12%  { opacity: 1;   scale: 1.15; }
  45%  { opacity: .55; scale: 1; }
  100% { opacity: 0;   scale: .9; }
}
.sobre__retrato.is-trocando { animation: sobre-impacto .7s cubic-bezier(.3,.7,.3,1); }
@keyframes sobre-impacto {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.sobre__retrato.is-trocando .sobre__retrato-aura { animation: sobre-aura-troca 1.9s ease-out; }
@keyframes sobre-aura-troca {
  0%   { opacity: .7; transform: scale(1); }
  20%  { opacity: 1;  transform: scale(1.1); filter: blur(8px) brightness(1.5); }
  100% { opacity: .7; transform: scale(1); }
}
.sobre__retrato-moldura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@media (hover: hover) {
  .sobre__retrato:hover .sobre__retrato-foto { filter: brightness(1.16) contrast(1.06); }
  .sobre__retrato:hover .sobre__retrato-aura { opacity: 1; animation-play-state: paused; }
}

/* ---------- Vinheta (dentro do palco: esfuma as bordas pro preto) ---------- */
.sobre__vinheta {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,3,4,.9) 0%, rgba(7,3,4,.74) 24%, rgba(7,3,4,.34) 39%, rgba(7,3,4,0) 48%),
    linear-gradient(180deg, var(--sb-preto) 0%, rgba(7,3,4,.55) 6%, rgba(7,3,4,0) 16%),
    linear-gradient(0deg, var(--sb-preto) 0%, rgba(7,3,4,.6) 8%, rgba(7,3,4,0) 22%),
    radial-gradient(ellipse at 62% 45%, transparent 58%, rgba(7,3,4,.45) 100%);
}

.sobre__particulas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Conteúdo (mesmas proporções do palco) ---------- */
.sobre__conteudo {
  position: absolute;
  left: 0;
  top: max(0px, var(--T));
  width: var(--W);
  height: min(var(--H), 100cqh);
  z-index: 3;
  pointer-events: none;
}
.sobre__texto {
  position: absolute;
  left: 6%;
  top: 8%;
  bottom: 6%;
  width: 38.5%;            /* termina em 44.5%; a moldura começa em 48.5% */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--sb-texto);
  pointer-events: auto;
}

/* Título: só uma flutuação leve */
.sobre__titulo {
  margin: 0 0 calc(var(--u) * .5) -2.5%;
  width: 86%;
  line-height: 0;
  filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * 1.1) rgba(0,0,0,.65));
}
.sobre__titulo img {
  width: 100%;
  height: auto;
  display: block;
  animation: sobre-flutua 7s ease-in-out infinite;
}
@keyframes sobre-flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--u) * -.38)); }
}

/* Estilos de tatuagem */
.sobre__estilos {
  margin: 0 0 calc(var(--u) * 1.4);
  font-size: max(16px, calc(var(--u) * 1.08));
  font-family: var(--sb-marca);
  letter-spacing: .01em;
  color: rgba(236, 226, 207, .72);
}
.sobre__estilos span {
  margin: 0 .35em;
  font-style: normal;
  color: rgba(236, 226, 207, .3);
}

/* Capítulos */
.sobre__capitulos {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  font-size: max(15.5px, calc(var(--u) * 1.06));
  border-bottom: 1px solid rgba(236, 226, 207, .12);
}
.sobre__tab {
  position: relative;
  padding: .2em 0 .65em;
  border: 0;
  background: none;
  font: 500 1em/1.2 var(--sb-marca);
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(236, 226, 207, .42);
  cursor: pointer;
  transition: color .4s;
  -webkit-tap-highlight-color: transparent;
}
.sobre__tab:hover { color: rgba(236, 226, 207, .78); }
.sobre__tab[aria-selected="true"] { color: var(--sb-osso); }
.sobre__tab:focus-visible { outline: 1px solid rgba(216, 35, 46, .8); outline-offset: 4px; }

/* traço de pincel embaixo da aba ativa (desenha conforme o tempo do capítulo) */
.sobre__traco {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -.32em;
  height: .5em;
  background: var(--sb-traco) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.sobre__tab[aria-selected="true"] .sobre__traco { clip-path: inset(0 0 0 0); transition: clip-path .5s ease-out; }
.sobre.is-auto .sobre__tab.is-correndo .sobre__traco {
  transition: none;
  animation: sobre-progresso var(--sb-dur, 9000ms) linear forwards;
}
@keyframes sobre-progresso { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.sobre__texto:hover .sobre__traco,
.sobre__texto:focus-within .sobre__traco,
.sobre:not(.is-ativa) .sobre__traco { animation-play-state: paused !important; }

/* Painéis empilhados (altura do maior, sem pulo) */
.sobre__paineis {
  display: grid;
  margin-top: calc(var(--u) * 1.4);
}
.sobre__painel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  filter: blur(3px);
  transition: opacity .6s, transform .6s, filter .6s, visibility 0s .6s;
}
.sobre__painel.is-ativo {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: opacity .8s .12s, transform .8s .12s, filter .8s .12s, visibility 0s;
}
.sobre__painel p {
  margin: 0;
  /* integração: Montserrat tem altura-x bem maior que a EB Garamond; ~10% menor equilibra
     com os rótulos em Gang of Three (era max(17px, u × 1.16)) */
  font-size: max(16px, calc(var(--u) * 1.04));
  line-height: 1.58;
  color: rgba(236, 226, 207, .9);
  text-wrap: pretty;
}
.sobre__painel strong { font-weight: 600; color: #f6eedf; }
.sobre__painel .tinta { color: #ef3b45; }

/* Assinatura */
.sobre__assinatura {
  margin: calc(var(--u) * 1.7) 0 0;
  padding: 0;
}
.sobre__assinatura::before {
  content: "";
  display: block;
  width: max(56px, calc(var(--u) * 3.6));
  height: max(7px, calc(var(--u) * .45));
  margin-bottom: calc(var(--u) * .9);
  background: var(--sb-traco) center / 100% 100% no-repeat;
  opacity: .9;
}
.sobre__assinatura p {
  margin: 0;
  font-family: var(--sb-marca);
  font-size: max(16px, calc(var(--u) * 1.06));
  line-height: 1.5;
  color: rgba(236, 226, 207, .74);
}
/* a Gang of Three não tem itálico (o navegador inventaria um oblíquo): ênfase só pela cor */
.sobre__assinatura .sobre__assinatura-lema {
  margin-bottom: .15em;
  font-size: max(20px, calc(var(--u) * 1.5));
  font-weight: 500;
  line-height: 1.3;
  color: var(--sb-osso);
}
.sobre__assinatura em { font-style: normal; color: #ef3b45; }

/* ---------- Entrada (só com JS) ---------- */
.js .sobre .sobre__titulo,
.js .sobre .sobre__estilos,
.js .sobre .sobre__capitulos,
.js .sobre .sobre__paineis,
.js .sobre .sobre__assinatura { opacity: 0; transition: opacity 1.2s; }
.js .sobre .sobre__retrato { opacity: 0; translate: 0 5%; transition: opacity 1.4s .3s, translate 1.6s cubic-bezier(.2,.7,.2,1) .3s; }

.js .sobre.is-visivel .sobre__titulo     { opacity: 1; }
.js .sobre.is-visivel .sobre__estilos    { opacity: 1; transition-delay: .35s; }
.js .sobre.is-visivel .sobre__capitulos  { opacity: 1; transition-delay: .5s; }
.js .sobre.is-visivel .sobre__paineis    { opacity: 1; transition-delay: .65s; }
.js .sobre.is-visivel .sobre__assinatura { opacity: 1; transition-delay: .8s; }
.js .sobre.is-visivel .sobre__retrato    { opacity: 1; translate: 0 0; }

/* economiza CPU fora da tela */
.sobre:not(.is-ativa) .sobre__palco *,
.sobre:not(.is-ativa) .sobre__titulo img { animation-play-state: paused !important; }

/* ---------- Celular e tablet: cena em cima, texto embaixo ---------- */
@media (max-width: 959px), (orientation: portrait) {
  .sobre {
    height: auto;
    min-height: 0;
    container-type: normal;
  }
  .sobre__palco-wrap {
    position: relative;
    inset: auto;
    container-type: size;
  }
  .sobre__retrato { pointer-events: none; }

  .sobre__conteudo {
    --u: 6px;
    position: relative;
    left: auto; top: auto;
    width: auto;
    height: auto;
  }
  .sobre__texto {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    padding: 6px 22px 72px;
  }
  .sobre__titulo { width: 100%; margin-left: 0; }
  /* integração (Gang of Three, mais larga que a EB Garamond): encolhe só o necessário para
     caber numa linha na largura útil (100vw − 44px de padding). O divisor é a largura do texto
     em "px por px de fonte", medida na fonte. Abaixo do piso, volta a quebrar como no pacote. */
  .sobre__estilos { font-size: clamp(13px, (100vw - 44px) / 24.6, 16.5px); }
  .sobre__capitulos { font-size: clamp(11.5px, (100vw - 44px) / 23.6, 15px); gap: .4em; }
  .sobre__painel p { font-size: 16.5px; line-height: 1.6; }   /* integração: era 18px (EB Garamond) */
  .sobre__assinatura .sobre__assinatura-lema { font-size: clamp(16px, (100vw - 44px) / 20.9, 21px); }
  .sobre__assinatura p { font-size: 16.5px; }
}

/* Celular deitado: o cenário horizontal inteiro, na largura da tela */
@media (max-width: 959px) and (orientation: landscape) {
  .sobre__palco-wrap { height: 56.19vw; }
  .sobre__palco { --W: 100cqw; --H: 100cqh; left: 0; top: 0; }
  .sobre__vinheta {
    background:
      linear-gradient(0deg, var(--sb-preto) 0%, rgba(7,3,4,0) 22%),
      /* integração: o topo começa em preto pleno para emendar com o hero sem linha */
      linear-gradient(180deg, var(--sb-preto) 0%, rgba(7,3,4,.86) 4%, rgba(7,3,4,.42) 9%, rgba(7,3,4,0) 15%);
  }
}

/* ---------- Celular e tablet em pé: cenário vertical próprio (2:3) ----------
   A cena aparece inteira, sem corte. Dragão em cima, retrato grande
   no centro, de pé sobre o chão molhado em primeiro plano.              */
.sobre__lanterna--m { display: none; }

@media (orientation: portrait) {
  .sobre__palco-wrap {
    width: min(100%, 61.33svh);          /* em tablet não passa da altura da tela */
    aspect-ratio: 2 / 3;
    height: auto;
    margin-inline: auto;
  }
  .sobre__palco { --W: 100cqw; --H: 100cqh; left: 0; top: 0; }
  .sobre__cenario { background-image: url("../assets/sobre/sobre-cenario-mobile-lqip.webp"); }

  /* dragão: camadas do cenário vertical */
  .sobre__dragao-corpo { left: 0; top: 0; width: 100%; transform-origin: 50% 30%; }
  .sobre__dragao-cabeca { left: 23.828%; top: 0; width: 57.91%; aspect-ratio: 593 / 801; transform-origin: 50% 10%; }
  .sobre__olho--e { --x: 41.15% !important; --y: 54.93% !important; }
  .sobre__olho--d { --x: 58.01% !important; --y: 54.93% !important; }
  .sobre__boca { left: 49.58%; top: 73.03%; }

  /* fumaça saindo da boca pra direita, longe dos olhos e da foto */
  .sobre__fumaca { left: 46.41%; top: 38.4%; width: 14%; }
  .sobre__fumaca img:nth-child(1) { --r: -100deg !important; --r2: -112deg !important; --o: .8 !important; }
  .sobre__fumaca img:nth-child(2) { display: none; }
  .sobre__fumaca img:nth-child(3) { --r: -124deg !important; --r2: -136deg !important; --o: .55 !important; }

  .sobre__lanterna:not(.sobre__lanterna--m) { display: none; }
  .sobre__lanterna--m { display: block; }

  .sobre__nevoa--fundo  { top: 66%; height: 10%; }
  .sobre__nevoa--frente { top: 84%; height: 18%; z-index: 3; }

  /* retrato: 58% da largura, centrado no eixo do dragão, pés no chão */
  .sobre__retrato {
    width: 58%;
    left: 23.5%;
    top: 40.1%;
    z-index: 2;
  }
  .sobre__retrato-aura { inset: -8% -22% 2%; }

  .sobre__vinheta {
    background:
      linear-gradient(0deg, var(--sb-preto) 0%, rgba(7,3,4,.5) 6%, rgba(7,3,4,0) 18%),
      /* integração: o topo começa em preto pleno para emendar com o hero sem linha */
      linear-gradient(180deg, var(--sb-preto) 0%, rgba(7,3,4,.86) 4%, rgba(7,3,4,.42) 9%, rgba(7,3,4,0) 15%),
      linear-gradient(90deg, var(--sb-preto) 0%, rgba(7,3,4,0) 3%, rgba(7,3,4,0) 97%, var(--sb-preto) 100%);
  }
}

/* (integração: o antigo ajuste das abas em ≤380px virou o tamanho fluido acima) */

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .sobre__palco *, .sobre__palco *::before, .sobre__palco *::after,
  .sobre__titulo img, .sobre__traco { animation: none !important; }
  .sobre__olho { opacity: .6; }
  .js .sobre .sobre__titulo, .js .sobre .sobre__estilos, .js .sobre .sobre__capitulos,
  .js .sobre .sobre__paineis, .js .sobre .sobre__assinatura, .js .sobre .sobre__retrato {
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
}