.blue{--fg:#fff;--bg:var(--brand);--line:rgba(255,255,255,.22);--mute:rgba(255,255,255,.72);--sub:rgba(255,255,255,.86);--accent:#b8a4ff;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 62%,#000) 0%,color-mix(in srgb,var(--brand) 30%,transparent) 55%,rgba(7,7,7,0) 100%)}
.about.blue{background:transparent}
.about{position:relative;z-index:3;padding:clamp(80px,14vh,170px) var(--pad) clamp(80px,12vh,150px)}
.about .grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,4vw,60px)}
.about .big{font-size:clamp(28px,4.4vw,70px);line-height:1.02;font-weight:700;font-variation-settings:'wdth' 88;letter-spacing:-.015em}
.about .big .w{opacity:.18;transition:opacity .3s}
/* contraste: "(Sobre)" fica sobre o brilho azul claro do topo da seção */
.about .grid>.kick{color:#fff;text-shadow:0 1px 10px rgba(0,12,70,.5)}
.about .row2{display:grid;grid-template-columns:200px 1.1fr 1fr;gap:clamp(20px,4vw,60px);margin-top:clamp(60px,10vh,120px);align-items:start}
.about .photo{border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.about .photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.about p{font-size:16px;line-height:1.55;color:var(--sub,#cfcbc3);max-width:44ch}
.about p+p{margin-top:16px}
.vals{margin-top:34px;border-top:1px solid var(--line)}
.vals div{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:600}
.vals div span{font-family:var(--mono);font-size:11px;color:var(--accent);padding-top:5px}
@media (max-width:1000px){
.about .grid,.about .row2{grid-template-columns:1fr}
.about .row2 .sp{display:none}
}
/* --- antes injetado pelo app.js --- */
.about .photo{touch-action:none}

/* Tamanho do texto ao lado da foto (editor: S.aboutText = p|m|g|gg) */
#sobre[data-txt=m] p,#sobre[data-txt=g] p,#sobre[data-txt=gg] p{color:#fff;font-weight:500;text-shadow:0 1px 14px rgba(0,8,60,.35)}
#sobre[data-txt=m] p{font-size:clamp(16px,1.25vw,19px);max-width:48ch}
#sobre[data-txt=g] p{font-size:clamp(17px,1.5vw,22px);line-height:1.5;max-width:54ch}
#sobre[data-txt=gg] p{font-size:clamp(18px,1.85vw,27px);line-height:1.45;max-width:60ch}
#sobre[data-txt=g] .row2{grid-template-columns:200px 1fr 1.15fr}
#sobre[data-txt=gg] .row2{grid-template-columns:200px .9fr 1.35fr}
@media (max-width:1000px){#sobre[data-txt] .row2{grid-template-columns:1fr}}