/* vo · interlúdio: a frase dela em dois requadros que trocam um pedaço */
.vo-pg{background:var(--papel)}
.vo-malha{background:
  radial-gradient(circle at 10% 14% in oklab,#f3cbd8 0%,transparent 46%),
  radial-gradient(circle at 92% 86% in oklab,#d9d3e2 0%,transparent 46%),
  radial-gradient(circle at 70% 6% in oklab,#f4e6c6 0%,transparent 40%),
  var(--papel)}
.vo-in{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,40px)}
.vo-frase{margin:0;width:100%}
.vo-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:stretch}
.vo-a{--tl:8px;--br:14px;--rb:18px;z-index:2}
.vo-b{--tr:10px;--bl:8px;--lt:18px;margin-left:-18px;margin-top:34px;z-index:1}
.vo-a .pn-in{background:radial-gradient(circle at 10% 0% in oklab,#e2437f 0%,transparent 55%),radial-gradient(circle at 100% 100% in oklab,#9c1848 0%,transparent 56%),var(--pink);color:#fff}
.vo-b .pn-in{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);color:var(--papel)}
.vo-a .ret{--ret-o:.2;--ret-g:linear-gradient(140deg,#000 0%,#777 16%,#fff 38%)}
.vo-b .ret{--ret-o:.2;--ret-g:linear-gradient(320deg,#000 0%,#777 14%,#fff 34%)}
.vo-l{position:relative;margin:0;font-family:var(--f-titulo);font-size:clamp(2rem,4.5vw,4.1rem);line-height:1.05;letter-spacing:-.012em;padding:clamp(26px,3.6vw,50px) clamp(22px,3.6vw,52px) clamp(190px,21.5cqw,272px)}
.vo-l span{display:block;font-family:var(--f-texto);font-weight:300;font-size:.42em;line-height:1.3;letter-spacing:0;margin-bottom:.5em}
.vo-l em{font-style:normal;display:block}
.vo-b .vo-l em{color:#ff6ea6}
.vo-a .vo-l em{color:var(--mel-claro)}
/* os pedaços trocados: cada requadro guarda a vaga do que deu e o pedaço que recebeu */
.vo-par{container-type:inline-size}
.vo-pc,.vo-vaga{position:absolute;bottom:clamp(20px,2.6vw,38px);width:clamp(112px,13.5cqw,176px);aspect-ratio:1}
.vo-vaga{border:2.5px dashed currentColor;opacity:.55}
.vo-vaga-a{left:clamp(22px,3.6vw,52px);color:#fff;transform:rotate(-3deg)}
.vo-vaga-b{right:clamp(26px,4vw,58px);color:var(--papel);transform:rotate(3deg)}
.vo-pc{border:var(--bw) solid var(--tinta);box-shadow:5px 5px 0 var(--tinta);transition:transform 1.25s var(--ease) .8s;z-index:2}
.vo-pc b{position:absolute;left:-6px;bottom:-12px;font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;line-height:1.2;white-space:nowrap;background:var(--mel-claro);color:var(--tinta);border:2px solid var(--tinta);padding:4px 7px 3px}
.vo-pc-deles{right:clamp(26px,4vw,58px);transform:rotate(4deg);background:var(--tinta)}
.vo-pc-deles i{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 80% 10% in oklab,#5a3350,transparent 70%),radial-gradient(circle closest-side,rgba(255,255,255,.22) 28%,transparent 30%) 0 0/8px 8px,var(--tinta)}
.vo-pc-nosso{left:clamp(30px,4.4vw,62px);transform:rotate(-5deg);background:var(--parede)}
.vo-pc-nosso::before{content:"";position:absolute;inset:0;overflow:hidden}
.vo-pc-nosso img{position:absolute;max-width:none;width:158%;height:auto;left:-30.8%;top:-76.9%;clip-path:inset(28.3% 17.3% 35% 19.5%)}
[data-cena]:not(.visto) .vo-pc-deles{transform:translate(var(--vai-x,50cqw),var(--vai-y,34px)) rotate(-3deg)}
[data-cena]:not(.visto) .vo-pc-nosso{transform:translate(calc(var(--vai-x,50cqw) * -1),calc(var(--vai-y,34px) * -1)) rotate(3deg)}
.sem-js .vo-pc-deles{transform:rotate(4deg)!important}.sem-js .vo-pc-nosso{transform:rotate(-5deg)!important}
.vo-pe{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.vo-seg{margin:0;font-size:clamp(1.15rem,2vw,1.75rem);font-weight:300;max-width:27em;text-wrap:balance;line-height:1.42;color:var(--tinta-suave)}
.vo-seg b{font-weight:500;color:var(--tinta)}
.vo-ass{margin:0;font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.vo-ass a{color:var(--pink);text-underline-offset:4px;display:inline-block;padding:10px 0}
@media (max-width:760px){
  .vo-par{grid-template-columns:minmax(0,1fr)}
  .vo-b{margin:-10px 0 0 0;--lt:0px;--tl:12px}
  .vo-a{--rb:0px}
  .vo-in{--vai-x:0px}
  .vo-pc,.vo-vaga{width:108px;bottom:24px}
  .vo-l{padding-bottom:160px}
  .vo-b .vo-vaga-b{right:24px}.vo-b .vo-pc-nosso{left:auto;right:24px}
  .vo-b .vo-vaga-b{right:auto;left:22px}
  .vo-a .vo-vaga-a{left:22px}.vo-a .vo-pc-deles{right:24px}
}
