/* Secao Sobre mim. Tudo com prefixo sm-: .marca, .moldura e .fenda ja existiam
   no hero, e .wrap/.painel/.sobre sao genericos demais pra ficarem soltos. */

/* ---------- SEÇÃO ---------- */
.sm-sobre{
  position:relative;isolation:isolate;overflow:hidden;
  max-height:none;
  aspect-ratio:16/9;min-height:auto;display:flex;align-items:center;
  padding:0 4.4vw;
  /* Vinha do body no arquivo de origem. Escopado aqui: aplicado no body trocaria
     a fonte e a cor do site inteiro. */
  background:var(--void);color:var(--ash);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
}
.sm-perto .sm-bg{background-image:url("../assets/sobre/fundo-desktop.jpg")}
.sm-bg{
  position:absolute;inset:0;z-index:-3;
  background:center center/cover no-repeat;
  will-change:transform;
}
/* scrim: escurece a esquerda, preserva o manto à direita */
.sm-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(7,8,12,.72) 0%,rgba(7,8,12,.66) 28%,rgba(7,8,12,.45) 48%,rgba(7,8,12,.08) 70%,rgba(7,8,12,0) 86%),
    radial-gradient(130% 95% at 78% 22%,rgba(224,133,54,.14),transparent 58%);
}
.sm-vig{position:absolute;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 16vmin 5vmin rgba(4,5,8,.85);
  background:linear-gradient(to bottom,rgba(5,6,10,.8),transparent 20%,transparent 82%,rgba(5,6,10,.5));
}

/* ---------- GRADE ---------- */
.sm-sobre::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:13%;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,6,10,0),rgba(5,6,10,.85) 62%,#05060A 97%);}
.sm-wrap{
  position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:23.5vw minmax(0,1fr);
  gap:5.4vw;align-items:center;
}

/* ---------- RETRATO ---------- */
.sm-retrato{position:relative;justify-self:center;width:100%;max-width:360px}
.sm-moldura.sm-clicavel{cursor:pointer}

/* Aviso: sem ele ninguem descobre que a moldura e clicavel. Fica por cima do selo,
   sai quando o selo rompe e volta depois da revelacao, pra repetir continuar obvio. */
/* left+right em vez de left:50% + translateX: com left:50% a largura disponivel
   vira metade do container e o texto quebrava em varias linhas.
   O corte diagonal e a mesma ideia das artes de botao do hero; o tracking e
   exatamente o .24em da navbar, e o texto foi encurtado pra caber numa linha so —
   em duas linhas ele ficava denso e nao lia como a navbar. */
.sm-dica{position:absolute;left:5%;right:5%;bottom:6%;
  z-index:6;margin:0;pointer-events:none;text-align:center;
  clip-path:polygon(3.5% 0,100% 0,96.5% 100%,0 100%);
  padding:.7em .8em .75em;
  font-family:var(--nav);font-stretch:125%;font-weight:800;
  font-size:clamp(.8rem,1.2vw,1rem);letter-spacing:.24em;line-height:1.1;
  text-transform:uppercase;color:#FFF4EA;text-indent:.24em;
  text-shadow:0 2px 3px rgba(0,0,0,.8);
  background:linear-gradient(180deg,rgba(176,22,18,.96),rgba(88,8,8,.96));
  box-shadow:0 10px 26px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,196,176,.3);
  animation:sm-chama 1.9s ease-in-out infinite;
  transition:opacity .45s ease}
.sm-dica b{display:block;margin-bottom:.34em;
  font-weight:600;font-size:.6em;letter-spacing:.2em;
  color:rgba(255,214,200,.8);text-shadow:none}
.sm-dica.sm-oculta{opacity:0}
.sm-dica[hidden]{display:none}
@keyframes sm-chama{
  0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(0,0,0,.65),0 0 26px rgba(168,21,18,.5)}
  50%{transform:scale(1.04);box-shadow:0 8px 22px rgba(0,0,0,.65),0 0 40px rgba(212,42,34,.85)}}
@media (prefers-reduced-motion:reduce){.sm-dica{display:none}}
.sm-moldura{position:relative;aspect-ratio:3/4;
  animation:sm-flutua 7s ease-in-out infinite;will-change:translate}
@keyframes sm-flutua{
  0%,100%{translate:0 0}
  50%{translate:0 -11px}}
.sm-janela{position:absolute;inset:0;overflow:hidden;background:#090A0E;
  border:3px solid var(--crimson-lit);
  box-shadow:inset 0 1px 0 rgba(120,124,140,.10),0 28px 60px -26px rgba(0,0,0,.95);
  animation:sm-pousa 7s ease-in-out infinite}
@keyframes sm-pousa{
  0%,100%{box-shadow:inset 0 1px 0 rgba(120,124,140,.10),0 22px 44px -24px rgba(0,0,0,.95)}
  50%{box-shadow:inset 0 1px 0 rgba(120,124,140,.10),0 40px 72px -26px rgba(0,0,0,.9)}}
.sm-janela #sm-foto{width:100%;height:100%;object-fit:cover;object-position:36% 14%;display:block}

/* traço carmim — o elemento ousado */
.sm-selo{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.sm-selo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 46%,rgba(255,196,86,.16),transparent 70%);
  animation:sm-respiro 2.6s ease-in-out infinite}
.sm-rompido::after{animation:none;opacity:0}
@keyframes sm-respiro{0%,100%{opacity:.5}50%{opacity:1}}
.sm-metade{position:absolute;inset:0;
  background:linear-gradient(158deg,#191A20,#0A0B0F 62%);
  transform-origin:50% 50%;will-change:transform,opacity;}
/* O brasao entra junto com o resto da secao. Fundo em CSS de elemento visivel
   baixa no arranque — era a unica imagem fora do hero a pesar na abertura. Os
   <img data-src> do selo ja ficavam retidos; este faltava. */
.sm-perto .sm-metade{
  background:
    url("../assets/sobre/brasao.png") center 46%/58% auto no-repeat,
    linear-gradient(158deg,#191A20,#0A0B0F 62%);}
.sm-metade.sm-esq{clip-path:polygon(0 0,54% 0,40% 11%,62% 21%,36% 35%,64% 45%,34% 57%,60% 68%,38% 80%,58% 90%,44% 100%,0 100%)}
.sm-metade.sm-dir{clip-path:polygon(54% 0,100% 0,100% 100%,44% 100%,58% 90%,38% 80%,60% 68%,34% 57%,64% 45%,36% 35%,62% 21%,40% 11%)}
.sm-fenda{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.sm-fenda .sm-raio{fill:none;stroke:#FFE79A;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:url(#sm-gl);stroke-dasharray:240;stroke-dashoffset:240}
.sm-fenda .sm-raio.sm-sub{stroke:#FF9E1F;stroke-width:5.4;opacity:.9}
.sm-fenda .sm-raio.sm-galho{stroke-width:1.15;opacity:.9;stroke-dasharray:190;stroke-dashoffset:190}
.sm-clarao{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(72% 54% at 50% 46%,rgba(255,240,180,.98),rgba(255,168,40,.5) 40%,transparent 78%)}
.sm-faiscas{position:absolute;inset:0}
.sm-fagulha{position:absolute;left:50%;top:46%;width:4px;height:4px;border-radius:50%;
  background:#FFD86B;box-shadow:0 0 10px 3px rgba(255,180,50,.85);opacity:0}

/* sequência de rompimento */
.sm-rompido .sm-fenda{opacity:1}
.sm-rompido .sm-raio{animation:sm-risca .5s cubic-bezier(.4,0,.2,1) forwards}
.sm-rompido .sm-raio.sm-sub{animation-duration:.56s}
.sm-rompido .sm-raio.sm-galho{animation:sm-risca .34s ease-out .38s forwards}
.sm-rompido .sm-clarao{animation:sm-estouro .85s ease-out .42s forwards}
.sm-rompido .sm-metade{animation:sm-parte 2.9s cubic-bezier(.32,.05,.2,1) .52s forwards}
.sm-rompido .sm-metade.sm-dir{animation-name:sm-parteDir}
.sm-rompido .sm-fenda{animation:sm-sumir 1s ease-out 1.5s forwards}
.sm-rompido .sm-fagulha{animation:sm-voar 1.1s ease-out .46s forwards}
@keyframes sm-tremor{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  8%{transform:translate3d(-5px,3px,0) rotate(-.5deg)}
  18%{transform:translate3d(6px,-4px,0) rotate(.6deg)}
  28%{transform:translate3d(-7px,-2px,0) rotate(-.7deg)}
  38%{transform:translate3d(5px,5px,0) rotate(.5deg)}
  50%{transform:translate3d(-4px,-4px,0) rotate(-.4deg)}
  62%{transform:translate3d(3px,3px,0) rotate(.3deg)}
  76%{transform:translate3d(-2px,-1px,0) rotate(-.2deg)}
  90%{transform:translate3d(1px,1px,0) rotate(.1deg)}}
.sm-moldura.sm-tremendo{animation:sm-tremor 1s cubic-bezier(.36,.07,.19,.97) both}
@keyframes sm-risca{to{stroke-dashoffset:0}}
@keyframes sm-estouro{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes sm-sumir{to{opacity:0}}
/* As metades deslizam OPACAS ate 68% e so ai desbotam: a foto e descoberta pela
   geometria, aos poucos, em vez de aparecer por transparencia de uma vez. */
@keyframes sm-parte{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  68%{opacity:1}
  100%{transform:translate3d(-62%,4%,0) rotate(-8deg);opacity:0}}
@keyframes sm-parteDir{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  68%{opacity:1}
  100%{transform:translate3d(62%,-4%,0) rotate(8deg);opacity:0}}
@keyframes sm-voar{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(var(--sm-fx),var(--sm-fy),0) scale(.25)}}



/* assinatura sob o retrato */
.sm-lema{margin:2vw 0 0;display:flex;justify-content:center}
.sm-lema img{
  display:block;width:min(118%,400px);height:auto;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.95)) drop-shadow(0 0 34px rgba(0,0,0,.6));
}

/* ---------- PAINEL ---------- */
.sm-painel{
  position:relative;max-width:56ch;
  padding:clamp(2rem,3.4vw,3.1rem) clamp(1.7rem,3vw,2.9rem);
  border-left:3px solid var(--crimson-lit);
}
.sm-painel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(164deg,rgba(14,15,21,.86),rgba(5,6,10,.90) 58%,rgba(10,11,16,.86));
  border:1px solid rgba(96,100,114,.4);border-left:0;
  box-shadow:inset 0 1px 0 rgba(140,146,164,.14),0 30px 66px -24px rgba(0,0,0,.9);}
.sm-marca,.sm-fecho{display:flex;align-items:center;justify-content:center;gap:1.3vw}
.sm-marca{margin-bottom:1.3vw}
.sm-marca img,.sm-fecho img{display:block;flex:none;opacity:.95;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.9))}
.sm-marca img{width:clamp(30px,2.9vw,46px)}
.sm-fecho img{width:clamp(22px,2.1vw,32px);opacity:.75}

.sm-marca hr,.sm-fecho hr{flex:1;height:1px;border:0;margin:0;
  background:linear-gradient(to right,rgba(168,21,18,0),var(--crimson-lit))}
.sm-marca hr:last-of-type,.sm-fecho hr:last-of-type{
  background:linear-gradient(to right,var(--crimson-lit),rgba(168,21,18,0))}
/* Escopado: vinha como `h2` solto do arquivo de origem e pegaria qualquer h2 da
   pagina. Tipografia igual a da navbar — Archivo expandida a 125%, peso 800, caixa
   alta e espacejada — em vez de Archivo Black, que e outra familia e destoava.
   O tracking e menor que os .24em da navbar porque aqui o corpo e muito maior. */
.sm-painel h2{
  margin:0 0 .66em;
  font-family:var(--nav);font-stretch:125%;font-weight:800;
  font-size:clamp(1.55rem,2.7vw,2.6rem);line-height:1.02;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;text-align:center;
  color:#F2EEE1;text-shadow:0 4px 26px rgba(0,0,0,.95);
}
.sm-painel p{margin:0 0 .85em;font-size:clamp(.92rem,1.24vw,1.26rem);line-height:1.66;color:#CFCABC}
.sm-painel p:last-of-type{margin-bottom:0}
.sm-painel strong{font-weight:500;color:var(--destaque);
  text-shadow:0 0 18px rgba(224,85,64,.28)}
.sm-fecho{margin-top:2.2vw}



/* ---------- BRASAS ---------- */
.sm-brasas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sm-brasa{position:absolute;bottom:-14px;width:3px;height:3px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 9px 2px rgba(224,133,54,.55);opacity:0}

/* ---------- ENTRADA ---------- */
.sm-reveal{opacity:0;transform:translateY(22px)}
.sm-lit .sm-reveal{opacity:1;transform:none;transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.sm-lit .sm-retrato{transition-delay:.1s}
.sm-lit .sm-painel{transition-delay:.32s}

@media (max-width:860px){
  .sm-sobre{aspect-ratio:auto;min-height:auto;display:block;
    padding:0 5.5vw calc(var(--pad-bot) + 4rem)}
  .sm-perto .sm-bg{background-image:url("../assets/sobre/fundo-desktop.jpg")}
.sm-bg{inset:auto 0 auto 0;top:0;height:177.8vw;
    background:top center/100% 100% no-repeat}
  .sm-perto .sm-bg{background-image:url("../assets/sobre/fundo-mobile.jpg")}
  .sm-scrim{background:linear-gradient(to bottom,rgba(5,6,10,0) 0%,rgba(5,6,10,0) 26%,rgba(5,6,10,.45) 44%,rgba(5,6,10,.82) 62%,#05060A 82%)}
  .sm-vig{background:linear-gradient(to bottom,rgba(5,6,10,.45),transparent 18%)}
  .sm-sobre::after{display:none}
  .sm-wrap{display:block;max-width:none;padding-top:calc(var(--pad-top) + 62vw)}
  .sm-retrato{max-width:270px;margin:0 auto}
  .sm-lema{margin:1.6rem 0 0}
  .sm-lema img{width:min(112%,330px)}
  .sm-painel{max-width:none;margin:2.6rem 0 0;padding:2.2rem 1.5rem;
    border-left:0;border-top:3px solid var(--crimson-lit)}
  .sm-painel::before{border:1px solid rgba(96,100,114,.34);border-top:0;
    background:linear-gradient(164deg,rgba(14,15,21,.9),rgba(5,6,10,.94))}
  h2{font-size:clamp(2rem,8.6vw,2.7rem)}
  .sm-painel p{font-size:clamp(1rem,4.1vw,1.12rem);line-height:1.7}
  .sm-marca{gap:4vw;margin-bottom:1.1rem}
  .sm-marca img{width:40px}
  .sm-fecho{gap:4vw;margin-top:1.8rem}
  .sm-fecho img{width:28px}
}
@media (prefers-reduced-motion:reduce){
  .sm-selo{display:none}
  .sm-moldura,.sm-janela{animation:none}
  .sm-reveal{opacity:1;transform:none;transition:none}
  .sm-brasas{display:none}
  .sm-perto .sm-bg{background-image:url("../assets/sobre/fundo-desktop.jpg")}
.sm-bg{transform:none!important}
}
.sm-sobre :focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* As brasas recebem --dx por elemento, no JS; o quadro em si e estatico. */
@keyframes sm-subir{0%{transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.85}82%{opacity:.5}
  100%{transform:translate3d(var(--dx),-104svh,0) scale(1.1);opacity:0}}