/* ===== sobre (prefixo so-) — a persiana vira a régua dos anos ===== */
.so{--so-n:53;padding-bottom:0}
.so .wf-luz{opacity:.8}

/* ---------- topo: título, história, foto ---------- */
.so-topo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:clamp(1rem,2.2vw,2.4rem);align-items:start}
.so-cab{grid-column:1 / span 7;grid-row:1;position:relative;z-index:2}
.so-h2{font-size:clamp(2.5rem,6.3vw,6.1rem);line-height:.98;letter-spacing:-.024em}
.so-h2 em{display:block}
.so-historia{grid-column:1 / span 7;grid-row:2;margin-top:clamp(2rem,5vh,3.4rem)}
.so-abre{margin:0;max-width:21em;font-family:var(--serifa);font-weight:300;font-size:clamp(1.3rem,2.05vw,1.9rem);line-height:1.28;letter-spacing:-.008em;color:var(--tinta)}
.so-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.6rem);margin-top:clamp(1.4rem,3vh,2.2rem);padding-top:clamp(1.2rem,2.6vh,1.8rem);border-top:1px solid var(--fio-tinta)}

.so-foto{grid-column:8 / span 5;grid-row:1 / span 3;margin:0;position:relative;z-index:1;justify-self:end;width:100%;max-width:31rem}
.so-foto-quadro{position:relative;border-radius:var(--raio);overflow:hidden;aspect-ratio:700 / 1037;background:var(--papel-2);
  box-shadow:0 60px 80px -50px rgba(36,26,18,.6), 0 18px 30px -22px rgba(36,26,18,.35)}
.so-foto-quadro img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.14) saturate(1.08) contrast(1.04) brightness(1.03)}
.so-foto::before{content:"";position:absolute;z-index:-1;top:-8%;bottom:6%;right:30%;width:150%;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 50% at 62% 40% in oklab, rgba(255,253,244,.95) 0%, transparent 72%),
    repeating-linear-gradient(104deg, transparent 0 54px, rgba(255,253,242,.75) 74px 112px, transparent 132px 190px);
  -webkit-mask-image:radial-gradient(ellipse 50% 52% at 64% 42%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);mask-image:radial-gradient(ellipse 50% 52% at 64% 42%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  animation:so-sol 32s ease-in-out infinite alternate}
@keyframes so-sol{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2.5%,0,0)}}
.so .so-foto figcaption{margin-top:.9rem;color:var(--tinta);display:flex;align-items:center;justify-content:flex-end;gap:.7rem}
.so-foto figcaption::before{content:"";width:1.8rem;height:1px;background:currentColor;opacity:.7}

/* a fala dela, pousada no vidro, na quina da mesa */
.so-fala{grid-column:5 / span 5;grid-row:3;align-self:end;position:relative;z-index:3;margin:clamp(1.6rem,4vh,2.6rem) 0 4.6rem;padding:1.5rem 1.7rem 1.4rem;border-radius:var(--raio);
  background:linear-gradient(135deg in oklab, rgba(241,247,242,.94) 0%, rgba(207,224,214,.9) 100%);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 34px 54px -30px rgba(36,26,18,.6), inset 0 -4px 0 rgba(111,138,125,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.so-fala p{margin:0;font-family:var(--serifa);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.008em;color:var(--tinta)}
.so-fala cite{display:block;margin-top:.8rem;font-style:normal;font-size:var(--t-mini);line-height:1.4;color:#3d3128}

/* ---------- a régua: um painel de nogueira com a janela aberta nele ---------- */
.so-regua{--so-passo:calc(100% / var(--so-n));position:relative;margin-top:clamp(3rem,8vh,5.5rem);padding-block:clamp(3rem,8vh,5.2rem) clamp(3.4rem,9vh,6rem);color:var(--texto);
  background:
    radial-gradient(ellipse 60% 70% at 60% 66% in oklab, rgba(95,82,73,.55) 0%, transparent 70%),
    linear-gradient(180deg in oklab, rgba(19,11,6,.62) 0%, rgba(19,11,6,.84) 100%),
    url("../img/so-nogueira.webp") center / cover var(--nogueira-1);
  box-shadow:inset 0 1px 0 rgba(233,223,198,.3), inset 0 22px 30px -22px rgba(0,0,0,.6), 0 -30px 50px -40px rgba(36,26,18,.5)}
.so-regua-dentro{display:flex;flex-direction:column}
.so-regua-t{margin:0;max-width:30em;font-family:var(--serifa);font-weight:300;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.3;letter-spacing:-.006em;color:var(--texto)}
.so-regua-t em{color:var(--creme)}

/* os marcos, pendurados nas lâminas */
.so-marcos{position:relative;margin:clamp(1.2rem,3vh,2rem) 0 0;padding:0;list-style:none;height:17.5rem}
.so-marcos li{position:absolute;bottom:0;left:calc((var(--a) + .5) * var(--so-passo));padding:0 0 1.1rem .8rem;border-left:1px solid rgba(233,223,198,.6);max-width:calc(var(--w) * var(--so-passo) - .4rem)}
.so-marcos li.so-alto{padding-bottom:10.6rem}
.so-marcos li.so-esq{left:auto;right:calc(100% - (var(--a) + .5) * var(--so-passo));padding-left:0;padding-right:.8rem;border-left:0;border-right:1px solid rgba(233,223,198,.6);text-align:right}
.so-marcos b{display:block;font-size:1.75rem;font-weight:300;color:var(--texto)}
.so-marcos span{display:block;margin-top:.35rem;font-size:.875rem;line-height:1.42;color:var(--texto-suave)}
.so-marcos .so-chave{border-left:3px solid var(--creme);padding-left:.9rem;margin-left:-1.5px}
.so-marcos .so-chave b{font-size:clamp(3.4rem,5vw,4.6rem);color:var(--creme);letter-spacing:-.025em;line-height:.9}
.so-marcos .so-chave span{margin-top:.6rem;color:var(--texto)}
.so-marcos .so-hoje b{color:var(--creme)}

/* a janela: 53 lâminas */
.so-janela{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--so-n),minmax(0,1fr));height:clamp(6rem,11vw,10rem);
  border-top:7px solid #0f0804;border-bottom:2px solid #0f0804;
  background:linear-gradient(180deg in oklab, #fffef4 0%, #fff6d6 60%, #f8e7b8 100%);
  box-shadow:0 0 70px -6px rgba(255,236,186,.34), inset 0 12px 16px -10px rgba(19,11,6,.5)}
.so-janela i{display:block;position:relative;transform-origin:50% 50%;
  background:linear-gradient(90deg in oklab, #6b5b44 0%, #94825f 18%, #a8966f 58%, #7d6c50 100%);
  box-shadow:inset -1px 0 0 rgba(19,11,6,.45);
  transition:transform 1.1s var(--ease), background .9s, filter .9s;transition-delay:calc(var(--i) * 26ms + 250ms)}
/* lâmina aberta: fica de perfil e a luz passa */
.so-regua.wf-visto .so-janela i:not(.so-antes),
.wf-sem-js .so-janela i:not(.so-antes){transform:scaleX(.26);filter:brightness(1.9) saturate(.8)}
.so-janela i.so-m::after{content:"";position:absolute;left:50%;top:-7px;bottom:0;width:1px;background:rgba(233,223,198,.75)}
.so-janela i.so-m:not(.so-antes)::after{background:var(--verde-tinta);width:4px;margin-left:-2px;opacity:0;transition:opacity .6s calc(var(--i) * 26ms + 800ms)}
.so-regua.wf-visto .so-janela i.so-m:not(.so-antes)::after,.wf-sem-js .so-janela i.so-m:not(.so-antes)::after{opacity:1}
.so-regua.wf-visto .so-janela i.so-m:not(.so-antes),
.wf-sem-js .so-janela i.so-m:not(.so-antes){transform:none;background:none;box-shadow:none;filter:none}
/* a luz que as lâminas abertas deitam no painel */
.so-raios{position:absolute;z-index:-1;top:100%;left:calc(8 * var(--so-passo));right:0;height:clamp(9rem,15vw,13rem);pointer-events:none;
  background:linear-gradient(90deg, transparent 0 30%, rgba(255,236,186,.2) 30% 100%) 0 0 / calc(100% / 45) 100%;
  transform:skewX(-16deg);transform-origin:0 0;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 46%, transparent 100%);mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 46%, transparent 100%);
  opacity:0;transition:opacity 1.6s ease-out 1.5s}
.so-regua.wf-visto .so-raios,.wf-sem-js .so-raios{opacity:1}

.so-eixo{position:relative;z-index:2;margin:.6rem 0 0;height:1.2rem;font-family:var(--serifa);font-size:.95rem;line-height:1.2;color:var(--texto)}
.so-eixo span{position:absolute;top:0;left:calc((var(--a) + .5) * var(--so-passo));transform:translateX(-50%);padding:0 .35em;border-radius:2px;background:rgba(19,11,6,.62)}
.so-eixo .so-dec::before{content:"";position:absolute;left:50%;top:-.6rem;width:1px;height:.4rem;background:rgba(233,223,198,.6)}
.so-eixo .so-ponta{display:none}

/* o que correu ao mesmo tempo */
.so-faixas{position:relative;z-index:2;margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}
.so-faixas li{position:relative;padding:0 0 .6rem calc(var(--de) * var(--so-passo));font-size:.875rem;line-height:1.4;color:var(--texto-suave)}
.so-faixas li span{display:block;text-shadow:0 1px 8px rgba(19,11,6,.8)}
.so-faixas b{font-weight:500;color:var(--texto)}
.so-faixas li::after{content:"";position:absolute;bottom:0;left:calc(var(--de) * var(--so-passo));width:calc((var(--ate) - var(--de)) * var(--so-passo));height:3px;border-radius:2px;
  background:var(--creme);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) 1.1s}
.so-faixas li.so-segue::after{background:linear-gradient(90deg in oklab, var(--creme) 0%, var(--creme) 80%, #fff8e0 100%)}
.so-faixas li:nth-child(3)::after,.so-faixas li:nth-child(3).so-segue::after{background:var(--vidro)}
.so-regua.wf-visto .so-faixas li::after,.wf-sem-js .so-faixas li::after{transform:none}
.so-faixas li:nth-child(2)::after{transition-delay:1.25s}
.so-faixas li:nth-child(3)::after{transition-delay:1.4s}

/* ---------- telas médias e celular: os marcos viram lista ---------- */
@media (max-width:1239px){
  .so-janela{order:1;margin-top:clamp(1.4rem,3vh,2rem)}
  .so-eixo{order:2;font-size:1.05rem;height:1.4rem;color:var(--texto)}
  .so-eixo .so-ponta{display:block}
  .so-eixo .so-ponta:first-child{left:0;transform:none}
  .so-eixo .so-ponta:last-child{left:auto;right:0;transform:none}
  .so-eixo .so-ano-chave{color:var(--creme)}
  .so-eixo .so-ano-chave{transform:translateX(-.3em)}
  .so-eixo .so-dec:not(.so-meio){display:none}
  .so-eixo .so-dec::before{display:none}
  .so-faixas{order:3;margin-top:1.5rem}
  .so-marcos{order:4;height:auto;margin-top:clamp(2rem,5vh,3rem);display:block;columns:2;column-gap:clamp(1.5rem,4vw,3rem)}
  .so-marcos li,.so-marcos li.so-alto,.so-marcos li.so-esq,.so-marcos .so-chave{position:static;display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.9rem;align-items:baseline;max-width:none;margin:0;padding:.95rem 0;border:0;border-top:1px solid var(--fio-claro);text-align:left;break-inside:avoid}
  .so-marcos b,.so-marcos .so-chave b{font-size:1.65rem;letter-spacing:0;line-height:1}
  .so-marcos .so-chave b{font-size:2.5rem;margin-left:-.05em}
  .so-marcos li.so-chave{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .so-marcos span,.so-marcos .so-chave span{margin:0;font-size:.9rem}
  .so-raios{height:7rem}
}
@media (max-width:1100px){
  .so-h2{font-size:clamp(2.5rem,6vw,4.4rem)}
  .so-colunas{grid-template-columns:1fr;gap:1rem}
  .so-fala{grid-column:4 / span 6}
}
@media (max-width:860px){
  .so-topo{display:block}
  .so-h2{font-size:clamp(2.55rem,12.4vw,3.7rem)}
  .so-foto{margin:1.9rem 0 0 auto;max-width:min(100%,26rem)}
  .so .so-foto figcaption{position:absolute;top:.7rem;left:.7rem;margin:0;padding:.38rem .7rem;border-radius:999px;background:rgba(245,238,222,.9);color:var(--tinta);font-size:.875rem;line-height:1.3}
  .so-foto figcaption::before{width:1.2rem}
  .so-foto::before{right:-10%;width:130%;top:-14%}
  .so-fala{margin:-3.6rem 1.6rem 0 -.35rem;padding:1.2rem 1.25rem 1.15rem}
  .so-fala p{font-size:1.4rem}
  .so-historia{margin-top:2.2rem}
  .so-abre{font-size:1.36rem}
  .so-regua{margin-top:3.2rem;padding-block:2.8rem 3.2rem}
  .so-janela{height:6.4rem;border-top-width:5px}
  .so-janela i{box-shadow:none}
  .so-faixas li{padding-left:0}
  .so-faixas li:nth-child(3){text-align:right}
  .so-marcos{columns:1}
  .so-marcos li,.so-marcos li.so-alto,.so-marcos li.so-esq{grid-template-columns:4.2rem minmax(0,1fr)}
}