/* ============ pa · Capítulo 4 · Quem já conversou conta (página em tinta) ============ */
.pa-sec{--pa-pink:#ff6ea6;--pa-somb:#6d2c54;--pa-linha:#fbfaf5}
.pa-sec .sec-malha{background:
    radial-gradient(circle at 10% 6% in oklab, #45283c 0%, transparent 46%),
    radial-gradient(circle at 94% 34% in oklab, #2d2738 0%, transparent 50%),
    radial-gradient(circle at 64% 98% in oklab, #4a2238 0%, transparent 44%),
    radial-gradient(circle at 0% 80% in oklab, #2d2738 0%, transparent 40%),
    var(--tinta)}
.pa-sec :focus-visible{outline-color:var(--pa-pink)}

.pa-pg{display:flex;flex-direction:column}
.pa-cap{margin-bottom:30px}
.pa-cap-t{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pa-cap .lead{max-width:30em}

/* o palco: ela no meio, os recordatórios em volta */
.pa-palco{position:relative;display:flex;flex-direction:column;gap:28px}
.pa-col{display:contents}
/* retícula grande atrás dela (pontos com máscara: não depende de mistura) */
.pa-meio{position:absolute;z-index:-1;pointer-events:none;inset:300px -14px auto;height:820px;opacity:.5;
  background:radial-gradient(circle closest-side,#6d2c54 0 62%,transparent 68%) 0 0/11px 11px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0%,transparent 100%)}
.pa-q1{order:1}.pa-ela{order:2}.pa-q2{order:3}.pa-q3{order:4}.pa-q4{order:5}.pa-q5{order:6}.pa-q6{order:7}.pa-q7{order:8}

/* ---- recordatório grande: requadro fora de esquadro com sombra chapada ---- */
.pa-q{margin:0;isolation:isolate}
.pa-q::after,.pa-ela::after,.pa-fonte::after{content:"";grid-area:1/1;z-index:-1;background:var(--pa-somb);clip-path:var(--forma);transform:translate(8px,8px)}
.pa-q-c{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:26px 22px 24px}
.pa-q blockquote{font-weight:300;font-size:19px;line-height:1.36;letter-spacing:.003em}
.pa-q blockquote::before{content:"“";display:block;font-family:var(--f-titulo);font-size:74px;line-height:.62;height:30px;color:var(--pink)}
.pa-q blockquote b{font-weight:500}
.pa-q figcaption{margin-top:16px}
.pa-q .tag{font-size:12px;box-shadow:none}
/* a cor da etiqueta diz a fonte: mel = Google, papel = Doctoralia (as mesmas dos dois requadros de números) */
.pa-sec .pa-t-d{background:var(--papel-claro)}
.pa-q blockquote,.pa-rec blockquote{text-wrap:pretty}

.pa-claro .pn-in{color:var(--tinta);background:
    radial-gradient(circle at 92% 8% in oklab, #f6d5de 0%, transparent 50%),
    radial-gradient(circle at 4% 100% in oklab, #e4e0ea 0%, transparent 52%),
    var(--papel-claro)}
.pa-claro .ret{--ret-o:.18;--ret-t:7px;--ret-g:linear-gradient(322deg,#000 0%,#777 14%,#fff 34%)}

.pa-noite::before{background:var(--pa-linha)}
.pa-noite::after{display:none}
.pa-noite .pn-in{color:var(--papel);background:
    radial-gradient(circle at 96% 4% in oklab, #5a2e4b 0%, transparent 56%),
    radial-gradient(circle at 0% 100% in oklab, #2d2738 0%, transparent 55%),
    #1f1822}
.pa-noite .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(40deg,#000 0%,#777 14%,#fff 34%)}
.pa-noite blockquote::before{color:var(--pa-pink)}
.pa-noite blockquote b{color:#fff}

.pa-pink{--pa-somb:#f4e4b8}
.pa-pink .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)}
.pa-pink .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(140deg,#000 0%,#777 16%,#fff 38%)}
.pa-pink blockquote::before{color:var(--mel-claro)}
.pa-pink blockquote b{font-weight:600;display:block;font-size:1.22em;line-height:1.12;margin-top:.18em;letter-spacing:-.01em}

/* pesos */
.pa-q1{--tl:9px;--br:12px;--giro:-.6deg;margin-right:6px}
.pa-q1 blockquote{font-size:clamp(1.5rem,6.6vw,1.8rem);line-height:1.2;letter-spacing:-.008em}
.pa-q1 blockquote b{color:var(--pink);font-weight:500}
.pa-q1 blockquote span{display:block;margin-top:.7em;font-size:.62em;line-height:1.38;letter-spacing:0;color:var(--tinta-suave);font-weight:400;max-width:21em}
.pa-q2{--tr:8px;--bl:9px;--giro:.6deg;margin-left:12%}
.pa-q3{--tl:7px;--br:8px;--giro:-.5deg;margin-right:9%}
.pa-q3 .pa-q-c{padding-bottom:40px}
.pa-q5{--tr:9px;--bl:7px;--giro:.6deg;margin-right:6px}
.pa-q5 blockquote{font-weight:400;font-size:clamp(1.2rem,5.2vw,1.45rem);line-height:1.26}
.pa-q6{--tl:8px;--br:9px;--giro:-.5deg;margin-left:10%}
.pa-q6 .pa-q-c{padding-bottom:40px}

/* ---- ela reage: o quadro do reel ---- */
.pa-ela{--giro:.7deg;--tl:8px;--br:10px;aspect-ratio:866/1454;margin:4px -4px 64px 0;isolation:isolate;--pa-somb:var(--pink)}
.pa-ela::before{background:var(--pa-linha)}
.pa-ela .pn-in{background:var(--parede)}
.pa-ela img{position:absolute;max-width:none;width:124.71cqw;height:auto;left:-11.09cqw;top:-28.41cqw}
.pa-ela .pn-over{container-type:inline-size}
.pa-ela-tag{position:absolute;left:-9px;top:12px;font-size:11.5px;rotate:-2deg}
.pa-resp{position:absolute;right:-6px;bottom:-60px;display:flex;flex-direction:column;align-items:flex-end;transform-origin:30% 0}
.pa-bl{font-size:clamp(15px,4.5cqw,20px);max-width:15.5em;padding:1.15em 1.5em 1.05em}
/* rabicho para cima, apontando para ela */
.pa-bl::before,.pa-bl::after{top:auto;right:auto;left:var(--rx,24%);bottom:calc(100% - 4px);clip-path:polygon(16% 0,0 100%,100% 100%)}
.pa-bl::before{transform:translate(-3px,0) scale(1.22);transform-origin:50% 100%}
.pa-bl::after{bottom:calc(100% - 7px)}
.pa-resp-tag{font-size:11.5px;margin:-9px 14px 0 0;position:relative;rotate:-1.2deg;background:var(--papel-claro);max-width:17em;text-align:right}

/* ---- recordatórios curtos ---- */
.pa-rec{margin:0;background:var(--mel-claro);color:var(--tinta);border:2.5px solid var(--tinta);box-shadow:6px 6px 0 var(--pa-somb);padding:16px 18px 14px;max-width:20em;align-self:flex-start}
.pa-rec blockquote{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:18px;line-height:1.2}
.pa-rec figcaption{margin-top:9px;font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;color:var(--pink-sombra)}
/* no celular os curtos ficam presos na quina do requadro de cima, como bilhete */
.pa-q4{rotate:2deg;align-self:flex-end;max-width:13.6em;margin-top:-50px;position:relative;z-index:2}
.pa-q7{rotate:-1.6deg;align-self:flex-start;background:var(--papel-claro);max-width:17.5em;margin-top:-48px;position:relative;z-index:2}
.pa-q7 blockquote{font-size:15px}

/* ---- números e fontes: dois requadros de tamanhos diferentes ---- */
.pa-fontes{display:grid;gap:24px;margin-top:54px}
.pa-fonte{isolation:isolate}
.pa-fonte-c{position:relative;display:flex;align-items:center;gap:18px;padding:26px 20px 24px;height:100%;color:var(--tinta)}
.pa-f-g{--tl:8px;--br:9px;--giro:-.5deg;--pa-somb:var(--pink);margin-right:6px}
.pa-f-g .pn-in{background:
    radial-gradient(circle at 0% 0% in oklab, #fbf1d6 0%, transparent 55%),
    radial-gradient(circle at 100% 100% in oklab, #e9c98a 0%, transparent 60%),
    var(--mel-claro)}
.pa-f-d{--tr:8px;--bl:8px;--giro:.5deg;margin:0 6px 0 9%}
.pa-f-d .pn-in{background:
    radial-gradient(circle at 100% 0% in oklab, #e4e0ea 0%, transparent 55%),
    radial-gradient(circle at 0% 100% in oklab, #f6d5de 0%, transparent 55%),
    var(--papel-claro)}
.pa-fonte .ret{--ret-o:.18;--ret-t:7px;--ret-g:linear-gradient(300deg,#000 0%,#777 14%,#fff 34%)}
.pa-num{font-family:var(--f-titulo);font-size:78px;line-height:.8;letter-spacing:-.02em;padding-bottom:6px}
.pa-f-d .pa-num{color:var(--pink)}
.pa-fonte-d{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:16px;line-height:1.3;color:var(--tinta-suave)}
.pa-fonte-d b{font-weight:600;color:var(--tinta);display:block}
.pa-estrelas{display:flex;gap:3px;margin-bottom:2px}
.pa-estrelas svg{width:21px;height:21px;fill:var(--pink);stroke:var(--tinta);stroke-width:1.6;stroke-linejoin:round}
.pa-bt{min-height:46px;margin-top:8px;white-space:nowrap}
.pa-bt::after{content:"→";font-weight:500}
.pa-data{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#b9aeb8;margin-top:4px}
/* as estrelas estouram uma a uma quando a faixa entra */
.pa-fontes.visto .pa-estrelas svg{animation:pa-estrela .45s var(--pop) both}
.pa-fontes.visto .pa-estrelas svg:nth-child(1){animation-delay:.55s}
.pa-fontes.visto .pa-estrelas svg:nth-child(2){animation-delay:.63s}
.pa-fontes.visto .pa-estrelas svg:nth-child(3){animation-delay:.71s}
.pa-fontes.visto .pa-estrelas svg:nth-child(4){animation-delay:.79s}
.pa-fontes.visto .pa-estrelas svg:nth-child(5){animation-delay:.87s}
@keyframes pa-estrela{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}
.pa-f-d{--d:.12s}.pa-data{--d:.24s}

/* ================= tablet ================= */
@media (min-width:640px) and (max-width:999px){
  .pa-palco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 28px;align-items:start}
  .pa-meio{grid-column:1/-1}
  .pa-q1,.pa-q5{grid-column:1/-1}
  .pa-ela{grid-column:1;grid-row:2/span 3;margin:0 0 70px}
  .pa-q1,.pa-q2,.pa-q3,.pa-q5,.pa-q6{margin-left:0;margin-right:0}
  .pa-q2,.pa-q3,.pa-q4{grid-column:2}
  .pa-q1 blockquote{font-size:2.1rem}
  .pa-q5 blockquote{font-size:1.6rem}
  .pa-q4{margin-top:0;justify-self:start}
  .pa-q7{align-self:start;justify-self:end;margin-top:0}
  .pa-fontes{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .pa-f-d{margin-left:0}
  .pa-data{grid-column:1/-1}
}

/* ================= desktop: a página montada ================= */
@media (min-width:1000px){
  .pa-cap{margin-bottom:40px;gap:16px}
  .pa-cap h2{max-width:none;white-space:nowrap;font-size:clamp(2.6rem,5.2vw,4.4rem)}
  .pa-cap .lead{max-width:31em;font-size:1.14rem}

  .pa-palco{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,5fr) minmax(0,3.2fr);gap:0 30px;align-items:start}
  .pa-col{display:flex;flex-direction:column;gap:28px;position:relative;min-width:0}
  .pa-palco>.pa-col>*{order:0}
  .pa-meio{inset:-8% 2% -6% 14%;height:auto;background-size:13px 13px}

  .pa-esq{z-index:2}
  .pa-q1{margin:0 -58px 0 0;--tl:0px;--tr:10px;--bl:0px;--br:14px;--rb:12px}
  .pa-q1 .pa-q-c{padding:36px 40px 32px 36px}
  .pa-q1 blockquote{font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.17}
  .pa-q1 blockquote::before{font-size:104px;height:42px}
  .pa-q2{margin:0;width:80%;--tl:8px;--tr:0px;--bl:0px;--br:10px;--d:.1s}
  .pa-q3{margin:0 0 0 13%;--tl:0px;--tr:9px;--bl:10px;--br:0px;--d:.2s}
  .pa-q2 .pa-q-c,.pa-q3 .pa-q-c,.pa-q6 .pa-q-c{padding:28px 26px 26px}
  .pa-q3 blockquote{font-size:20px}

  .pa-cen{margin-top:40px;gap:0;z-index:3}
  .pa-ela{margin:0;--d:.15s;--tl:0px;--tr:12px;--bl:9px;--br:0px}
  .pa-ela-tag{left:74px;top:-14px;font-size:12px;rotate:-1.5deg}
  .pa-resp{right:26px;bottom:-84px;--d:.9s}
  .pa-resp-tag{font-size:12px}
  .pa-q7{align-self:flex-end;margin:4px 0 0;max-width:16.5em;rotate:-1.6deg;--d:.6s}
  .pa-cen{margin-top:28px}

  .pa-dir{z-index:2;margin-top:-96px}
  .pa-q4{rotate:2deg;margin:0 0 0 -14px;align-self:flex-start;max-width:20em;--d:.3s}
  .pa-q3 .pa-q-c,.pa-q6 .pa-q-c{padding-bottom:26px}
  .pa-rec blockquote{font-size:19px}
  .pa-q7 blockquote{font-size:15px}
  .pa-q6{margin:6px 0 0 8px;--tl:10px;--tr:0px;--bl:0px;--br:9px;--d:.4s}
  .pa-q5{margin:0 0 0 -54px;--tl:0px;--tr:10px;--bl:8px;--br:0px;--lt:12px;--d:.5s}
  .pa-q5 .pa-q-c{padding:30px 28px 28px 38px}
  .pa-q5 blockquote{font-size:clamp(1.25rem,1.7vw,1.5rem)}

  .pa-fontes{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px 0;margin-top:52px;align-items:stretch}
  .pa-f-g{margin:0;--tl:0px;--br:0px;--tr:8px;--rb:26px}
  .pa-f-d{margin:0 0 0 -12px;--lt:26px;--tl:10px;--tr:0px;--bl:0px;--br:8px}
  .pa-fonte-c{padding:34px 44px 30px 40px;gap:30px}
  .pa-f-d .pa-fonte-c{padding-left:62px}
  .pa-num{font-size:clamp(96px,10vw,136px)}
  .pa-fonte-d{font-size:19px}
  .pa-fonte-d b{display:inline}
  .pa-estrelas svg{width:26px;height:26px}
  .pa-data{grid-column:1/-1;justify-self:end;margin-top:14px}
}

/* toque nela: o balão da resposta treme (pa.js) */
.pa-ela{cursor:default}
.pa-bl.pa-treme{animation:treme .55s var(--ease)}
@media (min-width:1000px) and (max-width:1199px){
  .pa-dir .pa-q .tag{font-size:11.5px;letter-spacing:.02em;padding-left:8px;padding-right:8px;white-space:nowrap}
  .pa-q6 .pa-q-c{padding-left:22px;padding-right:18px}
}