/* ===== so · Capítulo 1 · Sobre: a tira "Minha casa desde 2008" ===== */
.so-malha{background:
  radial-gradient(circle at 10% 8% in oklab, #dcd6e6 0%, transparent 46%),
  radial-gradient(circle at 90% 26% in oklab, #f1dde5 0%, transparent 42%),
  radial-gradient(circle at 72% 94% in oklab, #f3e6c4 0%, transparent 44%),
  radial-gradient(circle at 14% 78% in oklab, #d6d2da 0%, transparent 46%),
  var(--papel)}

/* ---------- abertura: título + tira à esquerda, ela à direita ---------- */
.so-abre{display:grid;grid-template-columns:minmax(0,8.1fr) minmax(0,3.9fr);grid-template-rows:auto auto;gap:var(--g) calc(var(--g) + 6px)}
.so-topo{grid-column:1;grid-row:1;padding:0 6% clamp(22px,2.6vw,38px) 0}
.so-cap{margin-bottom:clamp(16px,1.8vw,24px)}
.so-lead{max-width:34em;text-wrap:pretty}
.so-lead q{quotes:"“" "”";font-weight:500;color:var(--tinta)}

/* a tira */
.so-tira{grid-column:1;grid-row:2;--inc:20px;display:grid;grid-template-columns:1.14fr 1fr 1.2fr;gap:var(--g)}
.so-q{display:grid;min-width:0}
.so-q .pn{min-height:0}
.so-q1 .pn{--rb:var(--inc);--tl:6px}
.so-q2{margin-left:calc(var(--inc) * -1)}
.so-q2 .pn{--lt:var(--inc);--rt:var(--inc);--bl:6px}
.so-q3{margin-left:calc(var(--inc) * -1)}
.so-q3 .pn{--lb:var(--inc);--tr:6px}

.so-c{position:relative;height:100%;display:flex;flex-direction:column;padding:24px 34px 30px 28px}
.so-q2 .so-c{padding-left:36px;padding-right:36px}
.so-q3 .so-c{padding-left:40px;padding-right:44px}
.so-c h3{display:flex;flex-direction:column;font:inherit}
.so-ano{font-family:var(--f-titulo);font-size:clamp(3rem,5.2vw,4.5rem);line-height:.9;letter-spacing:-.02em}
/* o fio: a mesma casa atravessa os três quadros */
.so-fio{position:relative;display:block;height:4px;margin:24px -60px 26px}
.so-fio::before{content:"";position:absolute;inset:0;background:var(--tinta);transform-origin:0 50%}
.so-abre .so-fio::before{transform:scaleX(0);transition:transform .8s var(--ease)}
.so-abre .so-q2 .so-fio::before{transition-delay:.45s}
.so-abre .so-q3 .so-fio::before{transition-delay:.9s}
.so-abre .so-q1 .so-fio::before{transition-delay:.25s}
.so-abre.visto .so-fio::before,.sem-js .so-fio::before{transform:none}
@media (prefers-reduced-motion:reduce){.so-abre .so-fio::before{transform:none}}
.so-fio i{position:absolute;left:60px;top:50%;transform:translate(0,-50%) rotate(-2deg);font-style:normal;font-family:var(--f-balao);font-weight:700;letter-spacing:.09em;font-size:12.5px;line-height:1;padding:5px 9px 4px;background:var(--pink);color:#fff;border:2.5px solid var(--tinta)}
.so-oq{font-family:var(--f-texto);font-weight:500;font-size:clamp(1.1rem,1.5vw,1.34rem);line-height:1.2;letter-spacing:-.005em;text-wrap:balance}

.so-q1 .pn-in{background:
  radial-gradient(circle at 96% 100% in oklab, #f6d5de 0%, transparent 55%),
  var(--papel-claro)}
.so-q1 .so-ano{color:var(--pink)}
.so-q1 .ret{--ret-o:.2;--ret-g:linear-gradient(318deg,#000 0%,#777 14%,#fff 34%)}

.so-q2 .pn-in{background:
  radial-gradient(circle at 10% 100% in oklab, #e9cf96 0%, transparent 60%),
  var(--mel-claro)}
.so-q2 .ret{--ret-o:.2;--ret-g:linear-gradient(20deg,#000 0%,#777 16%,#fff 38%)}
.so-q2 .so-fio i{background:var(--tinta)}

.so-q3 .pn-in{color:var(--papel);background:
  radial-gradient(circle at 96% 4% in oklab, #45283c 0%, transparent 56%),
  radial-gradient(circle at 0% 100% in oklab, #2d2738 0%, transparent 58%),
  var(--tinta)}
.so-q3 .so-ano{color:#ff6ea6}
.so-q3 .so-fio::before{background:var(--papel)}
.so-q3 .so-fio i{background:var(--mel-claro);color:var(--tinta);border-color:var(--papel)}
.so-q3 .ret{--ret-o:.2;--ret-g:linear-gradient(20deg,#000 0%,#777 14%,#fff 36%)}

/* ela, hoje: o quadro alto que fecha a tira */
.so-hoje{grid-column:2;grid-row:1/3;display:grid;min-width:0}
.so-hoje .pn{--tl:9px;--lb:12px;--br:8px}
.so-hoje .pn-in{background:#a8a2a8}
.so-fundo{position:absolute;inset:-12%;background:
  radial-gradient(circle at 80% 10% in oklab, #dcd8d6 0%, transparent 52%),
  radial-gradient(circle at 10% 26% in oklab, #b3acbf 0%, transparent 50%),
  radial-gradient(circle at 88% 80% in oklab, #d9abbd 0%, transparent 46%),
  #a39da6}
.so-hoje .ret{--ret-o:.24;--ret-g:linear-gradient(240deg,#000 0%,#555 30%,#fff 60%)}
.so-ela{position:absolute;left:50%;top:0;width:114%;aspect-ratio:822/1415;transform:translate(-45%,-6.5%)}
.so-ela img{width:100%;height:100%;max-width:none}
.so-bl{position:absolute;left:-58px;top:-30px;width:250px;font-size:17px;--rx:20%;padding:1.2em 1.1em 1.1em}
.so-tag-hoje{position:absolute;right:-8px;bottom:-13px;background:var(--papel-claro)}

/* ---------- a página de hoje ---------- */
.so-pagina{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);margin-top:calc(var(--g) + 34px);align-items:stretch}
.so-esq{grid-column:1/5;display:flex;flex-direction:column;min-width:0}
.so-reel{position:relative}
.so-reel .pn{--tr:9px;--bl:7px}
.so-reel .pn-in{aspect-ratio:828/1440;background:var(--parede)}
.so-reel img{position:absolute;left:-14.25%;top:-13.9%;width:130.43%;max-width:none;height:auto}
.so-tag-reel{position:absolute;left:-8px;top:-12px;transform:rotate(-2deg);z-index:2}
.so-rec-reel{position:absolute;left:-10px;right:22px;bottom:-20px;font-size:15px;transform:rotate(-1.2deg);z-index:2}
.so-rec-reel b{font-weight:500}

.so-lado{grid-column:5/13;display:grid;gap:var(--g);grid-template-rows:auto auto 1fr;min-width:0}
.so-onde-t{font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.05;letter-spacing:-.01em;margin:4px 0 8px 12px}
.so-onde-t em{font-style:normal;color:var(--pink)}

.so-onde{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto auto;gap:var(--g)}
.so-l{display:grid;min-width:0}
.so-l-cons{grid-row:1/3}
.so-l-cons .pn{--tr:8px;--rb:16px}
.so-l-uni{margin-left:-4px}
.so-l-uni .pn{--bl:7px;--lb:10px}
.so-l-res{margin-left:-14px}
.so-l-res .pn{--tr:6px;--lt:10px}
.so-lc{position:relative;height:100%;padding:24px 26px 24px;display:flex;flex-direction:column}
.so-rot{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--pink-sombra);margin-bottom:8px}
.so-lt{font-family:var(--f-titulo);font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.1}
.so-ld{margin-top:8px;font-size:15.5px;line-height:1.42;color:var(--tinta-suave)}
.so-l-cons .pn-in{color:#fff;background:
  radial-gradient(circle at 12% 0% in oklab, #de3a78 0%, transparent 55%),
  radial-gradient(circle at 96% 100% in oklab, #9c1848 0%, transparent 56%),
  var(--pink)}
.so-l-cons .ret{--ret-o:.2;--ret-g:linear-gradient(140deg,#000 0%,#777 16%,#fff 38%)}
.so-l-cons .so-lc{padding:30px 34px 30px 30px;justify-content:center}
.so-l-cons .so-rot{color:#fff}
.so-l-cons .so-lt{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.05}
.so-l-cons .so-ld{color:#fff;font-size:16.5px;max-width:24em}
.so-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.so-l-cons :focus-visible{outline-color:var(--tinta)}
.so-lk{font-weight:500;font-size:15.5px;color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;padding:12px 0;white-space:nowrap}
.so-lk:hover{text-decoration-thickness:2.5px}
.so-l-uni .pn-in{background:radial-gradient(circle at 100% 0% in oklab, #dcd6e6 0%, transparent 60%),var(--papel-claro)}
.so-l-res .pn-in{background:radial-gradient(circle at 0% 100% in oklab, #f6d5de 0%, transparent 60%),var(--papel-claro)}

.so-base{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--g);align-items:stretch}
.so-form{padding:24px 26px 22px;box-shadow:6px 6px 0 var(--tinta);margin-right:6px;background:var(--papel-claro)}
.so-h{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:var(--pink-sombra);margin-bottom:12px}
.so-itens li{font-size:15.5px;line-height:1.42;color:var(--tinta-suave);padding-left:20px;position:relative}
.so-itens li+li{margin-top:10px}
.so-itens li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--pink);border:2px solid var(--tinta);border-radius:50%}
.so-itens b{font-weight:600;color:var(--tinta)}
.so-exp-t{margin-top:18px;font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--tinta-suave)}
.so-exp{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.so-exp li{font-size:13.5px;font-weight:500;line-height:1.2;border:2px solid var(--tinta);padding:5px 9px;background:var(--mel-claro)}
.so-crm{margin-top:16px;padding-top:12px;border-top:2px dashed color-mix(in oklab,var(--tinta) 30%,transparent);font-size:12.5px;letter-spacing:.02em;color:var(--tinta-suave)}

.so-mestre{display:grid}
.so-mestre .pn{--tl:8px;--br:8px;--lb:12px}
.so-mestre .pn-in{color:var(--papel);background:
  radial-gradient(circle at 96% 4% in oklab, #45283c 0%, transparent 52%),
  radial-gradient(circle at 0% 100% in oklab, #2d2738 0%, transparent 55%),
  var(--tinta)}
.so-mestre .ret{--ret-o:.2;--ret-g:linear-gradient(40deg,#000 0%,#777 14%,#fff 34%)}
.so-mc{position:relative;height:100%;padding:30px 26px 26px 34px;display:flex;flex-direction:column;justify-content:center}
.so-mc::before{content:"“";font-family:var(--f-titulo);font-size:74px;line-height:.62;height:30px;color:#ff6ea6;display:block}
.so-mc blockquote{font-weight:300;font-size:clamp(18.5px,1.6vw,21px);line-height:1.36}
.so-mc blockquote b{font-weight:500;color:#fff}
.so-mc figcaption{margin-top:18px;font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12px;line-height:1.35;color:var(--mel)}

/* o quadro que fecha a página */
.so-ps{margin-top:var(--g);display:grid}
.so-ps .pn{--tl:7px;--rb:14px;--bl:5px}
.so-ps .pn-in{background:
  radial-gradient(circle at 100% 0% in oklab, #e9cf96 0%, transparent 46%),
  var(--mel-claro)}
.so-ps .ret{--ret-o:.2;--ret-g:linear-gradient(250deg,#000 0%,#777 10%,#fff 26%)}
.so-ps-c{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px clamp(18px,2.6vw,36px);padding:22px 44px 22px 30px}
.so-ps-r{font-family:var(--f-titulo);font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1;color:var(--pink)}
.so-ps blockquote{font-family:var(--f-titulo);font-size:clamp(1.15rem,1.6vw,1.38rem);line-height:1.2;text-wrap:balance}
.so-ps blockquote em{font-style:normal;color:var(--pink-sombra)}
.so-ps figcaption{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12px;line-height:1.35;color:var(--tinta-suave);max-width:13em;text-align:right}

/* ---------- tablet ---------- */
@media (max-width:1099px){
  .so-abre{grid-template-columns:1fr}
  .so-topo{padding-right:0}
  .so-tira,.so-hoje{grid-column:1;grid-row:auto}
  .so-hoje{margin-top:34px}
  .so-hoje .pn{height:440px}
  .so-ela{width:min(430px,62%);left:auto;right:4%;transform:translate(0,-9%)}
  .so-bl{left:5%;top:-30px}
  .so-tag-hoje{right:auto;left:-7px}
  .so-esq{grid-column:1/6}
  .so-lado{grid-column:6/13}
  .so-onde{grid-template-columns:1fr}
  .so-l-cons{grid-row:auto}
  .so-l-uni,.so-l-res{margin-left:0}
  .so-base{grid-template-columns:1fr}
  .so-ps-c{grid-template-columns:auto minmax(0,1fr)}
  .so-ps figcaption{grid-column:2;text-align:left;max-width:none}
}

/* ---------- celular ---------- */
@media (max-width:719px){
  .so-tira{grid-template-columns:1fr 1fr;--inc:12px}
  .so-q1{grid-column:1/-1}
  .so-q .pn{min-height:0}
  .so-q1 .pn{--rb:0px;--br:10px}
  .so-q2{margin-left:0}
  .so-q2 .pn{--lt:0px;--rt:0px;--rb:var(--inc);--bl:0px}
  .so-q3{margin-left:calc(var(--inc) * -1)}
  .so-q3 .pn{--lt:var(--inc);--lb:0px;--tr:0px}
  .so-c{padding:20px 20px 22px}
  .so-q2 .so-c{padding:18px 22px 22px 16px}
  .so-q3 .so-c{padding:18px 14px 22px 24px}
  .so-ano{font-size:clamp(2.9rem,14.5vw,3.8rem)}
  .so-q1 .so-ano{font-size:clamp(4rem,21vw,5.4rem)}
  .so-fio{margin:20px -40px 22px}
  .so-fio i{left:40px}
  .so-oq{font-size:1.06rem}
  .so-hoje{margin-top:40px}
  .so-hoje .pn{height:auto;aspect-ratio:1/1.08;--lb:0px}
  .so-ela{width:100%;right:-2%;transform:translate(0,-10%)}
  .so-bl{left:-6px;top:-36px;width:184px;font-size:14.5px}
  .so-pagina{display:flex;flex-direction:column;margin-top:50px;gap:var(--g)}
  .so-reel{margin-bottom:26px}
  .so-ps-c{padding:20px 22px 22px 20px;gap:6px 14px;align-items:start}
  .so-ps-r{font-size:2rem}
  .so-onde-t{margin:10px 0 4px}
  .so-l-cons .so-lc{padding:26px 22px 28px}
  .so-acoes .bt{width:100%}
  .so-lc{padding:20px 20px 22px}
  .so-form{padding:20px 18px;margin-right:6px}
  .so-mc{padding:26px 20px 24px 24px}
}