/* 05-publico · PARA QUEM É (seção clara)
   Um relógio só (--pq-dur 10,5 s) dirige as três cenas: 0-9% quadro inicial, 9-60% a dor
   cresce em passos, 60-72% a virada (a IA resolve), 72-90% resultado, 90-100% reset.
   Só transform/opacity; todo grupo animado nasce num <g transform="translate()"> pai
   pra origem local ser (0,0). Keyframes com prefixo pb-. */
.pub{--pq-dur:10.5s;--pq-ease:var(--e-inout);--pq-pop:cubic-bezier(.2,.9,.3,1.2);--pq-pop2:cubic-bezier(.2,.9,.3,1.3);--pq-spring:cubic-bezier(.3,1.3,.5,1);--pq-hit:cubic-bezier(.3,0,.2,1);--pq-fling:cubic-bezier(.25,.75,.25,1);
  background:linear-gradient(180deg,var(--lav),var(--lav2));color:var(--ink);padding:110px 0}
.pub .eyebrow{color:#b8240f}
.pub h2{color:var(--ink)}.pub h2 em{color:#e8321f}
.pub .sec-head.split{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0 64px;align-items:last baseline;margin-bottom:56px}
.pub .sub{font-size:17px;line-height:1.6;max-width:360px;text-wrap:pretty;color:#6a4a40;margin:0}

/* ---------- grade dos cards ---------- */
.pub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.pc{min-width:0}
.pc:nth-child(1){--pq-off:0s}.pc:nth-child(2){--pq-off:.35s}.pc:nth-child(3){--pq-off:.7s}
.pc-tag{margin:26px 0 12px;font-size:12px;letter-spacing:.18em;font-weight:800;color:#b8240f;display:flex;align-items:center;gap:12px;text-transform:uppercase}
.pc-tag b{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border-radius:100px;background:var(--ink);color:#ffd2b8;font-size:12px;letter-spacing:.06em}
.pc h3{font:700 23px/1.24 var(--fh);letter-spacing:-.035em;margin:0 0 10px;max-width:330px;text-wrap:balance;color:var(--ink)}
.pc>p:last-child{font-size:16px;line-height:1.6;max-width:330px;text-wrap:pretty;color:#6e5046;margin:0}

/* ---------- palco da cena ---------- */
.pq-stage{position:relative;aspect-ratio:340/272;border-radius:22px;overflow:hidden;isolation:isolate;contain:paint;will-change:transform;
  background:radial-gradient(ellipse 90% 70% at 50% -10%,#5a2010 0%,rgba(90,32,16,0) 70%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 1.6px) 0 0/16px 16px,#140b09;
  box-shadow:0 30px 60px -28px rgba(110,30,10,.8),0 12px 24px -16px rgba(110,30,10,.4)}
.pq-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;z-index:2}
/* anel fino da virada (a IA resolveu) */
.pq-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 1.5px #ff8a3d,inset 0 0 60px rgba(255,106,43,.22);opacity:0;animation:pb-glow var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
/* anel grosso: pulsa uma vez quando a virada acende */
.pq-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 3px #ffb088,inset 0 0 36px rgba(255,138,61,.28);opacity:0;animation:pb-ring var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
.pq-svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.pq-txt{font-family:var(--fb);font-weight:700}
@keyframes pb-glow{0%,66%{opacity:0}72%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes pb-ring{0%,71%{opacity:0}75%{opacity:1}80%,100%{opacity:0}}

/* ---------- card 01 · anúncios ---------- */
.pq-ad{transform-box:fill-box;transform-origin:30% 100%;animation:pb-sag var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-sag{0%,8%{transform:none}60%,68%{transform:translateY(4px) rotate(-3.5deg)}73%{transform:translateY(-5px) rotate(.8deg)}78%,100%{transform:none}}
.pq-ad-tired{opacity:0;animation:pb-tired var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-tired{0%,8%{opacity:0}60%,68%{opacity:.6}74%,100%{opacity:0}}
.pq-ad-down{opacity:0;animation:pb-down var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-down{0%,14%{opacity:0;transform:scale(.3)}17%{opacity:1;transform:scale(1.18)}20%,66%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(.3)}}
/* barra que gagueja (origem local = borda esquerda) */
.pq-bar{animation:pb-bar var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
.pq-bar2{animation-delay:calc(var(--pq-off) + .3s)}.pq-bar3{animation-delay:calc(var(--pq-off) + .6s)}
@keyframes pb-bar{0%,6%{transform:scaleX(0)}20%{transform:scaleX(.34)}28%{transform:scaleX(.28)}40%{transform:scaleX(.38)}50%{transform:scaleX(.31)}62%,78%{transform:scaleX(.4)}82%,100%{transform:scaleX(0)}}
/* versões prontas cobrem os slots na virada */
.pq-done{opacity:0;transform-box:fill-box;transform-origin:center;animation:pb-done var(--pq-dur) var(--pq-pop) var(--pq-off) infinite both}
.pq-done2{animation-delay:calc(var(--pq-off) + .18s)}.pq-done3{animation-delay:calc(var(--pq-off) + .36s)}
@keyframes pb-done{0%,68%{opacity:0;transform:translateX(12px) scale(.94)}72%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.pq-cursor{opacity:0;animation:pb-cursor var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-cursor{0%{transform:translate(322px,264px);opacity:0}5%{opacity:1}12%,21%{transform:translate(296px,66px)}28%,37%{transform:translate(300px,140px)}44%,53%{transform:translate(294px,212px);opacity:1}59%{transform:translate(318px,258px);opacity:0}100%{transform:translate(322px,264px);opacity:0}}
.pq-q{opacity:0;transform-box:fill-box;transform-origin:0 100%;animation:pb-q var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-q{0%,13%{opacity:0;transform:scale(.4)}15%,20%{opacity:1;transform:scale(1)}23%,29%{opacity:0;transform:scale(.4)}31%,36%{opacity:1;transform:scale(1)}39%,45%{opacity:0;transform:scale(.4)}47%,53%{opacity:1;transform:scale(1)}56%,100%{opacity:0;transform:scale(.4)}}

/* ---------- card 02 · pasta que enche ---------- */
.pq-panel{animation:pb-shake var(--pq-dur) linear var(--pq-off) infinite both}
@keyframes pb-shake{0%,52.6%{transform:none}53.4%{transform:translate(-2.5px,1.5px)}54.2%{transform:translate(2px,-1px)}55%{transform:translate(-1px,.5px)}56%,100%{transform:none}}
.pq-list{animation:pb-list var(--pq-dur) var(--pq-spring) var(--pq-off) infinite both}
@keyframes pb-list{0%,9%{transform:translateY(0);opacity:1}12%,21%{transform:translateY(46px)}24%,33%{transform:translateY(92px)}36%,45%{transform:translateY(138px)}48%,93%{transform:translateY(184px);opacity:1}96%{transform:translateY(184px);opacity:0}97%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
.pq-thumb{animation:pb-thumb var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-thumb{0%,9%{transform:scaleY(1)}12%,21%{transform:scaleY(.82)}24%,33%{transform:scaleY(.68)}36%,45%{transform:scaleY(.56)}48%,93%{transform:scaleY(.46)}97%,100%{transform:scaleY(1)}}
/* odômetro dos dias */
.pq-day{opacity:0;animation:var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
.pq-day1{animation-name:pb-day1}.pq-day2{animation-name:pb-day2}.pq-day3{animation-name:pb-day3}.pq-day4{animation-name:pb-day4}.pq-day5{animation-name:pb-day5}
@keyframes pb-day1{0%,9%{opacity:1;transform:none}12%{opacity:0;transform:translateY(-12px)}12.1%,97%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes pb-day2{0%,9%{opacity:0;transform:translateY(12px)}12%,21%{opacity:1;transform:none}24%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pb-day3{0%,21%{opacity:0;transform:translateY(12px)}24%,33%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pb-day4{0%,33%{opacity:0;transform:translateY(12px)}36%,45%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pb-day5{0%,45%{opacity:0;transform:translateY(12px)}48%,94%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-12px)}}
/* relógio: ponteiro gira (única duração própria) e some na virada */
.pq-hand{animation:pb-spin 2.4s linear infinite}
@keyframes pb-spin{to{transform:rotate(360deg)}}
.pq-clock{animation:pb-clock var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-clock{0%,68%{opacity:1}71%,94%{opacity:0}97%,100%{opacity:1}}
.pq-ok{opacity:0;animation:pb-ok var(--pq-dur) var(--pq-pop2) var(--pq-off) infinite both}
.pq-ok2{animation-delay:calc(var(--pq-off) + .15s)}.pq-ok3{animation-delay:calc(var(--pq-off) + .3s)}.pq-ok4{animation-delay:calc(var(--pq-off) + .45s)}
@keyframes pb-ok{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,93%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
.pq-scan{opacity:0;animation:pb-scan var(--pq-dur) linear var(--pq-off) infinite both}
@keyframes pb-scan{0%,66%{opacity:0;transform:translateY(40px)}67%{opacity:1}75%{opacity:1;transform:translateY(250px)}76%,100%{opacity:0;transform:translateY(250px)}}
.pq-stamp{opacity:0;animation:pb-stamp var(--pq-dur) var(--pq-hit) var(--pq-off) infinite both}
@keyframes pb-stamp{0%,50%{opacity:0;transform:scale(1.8)}51.5%{opacity:0;transform:scale(1.35)}53%{opacity:1;transform:scale(.93)}55%,67%{opacity:1;transform:scale(1)}71%,100%{opacity:0;transform:scale(1.15)}}

/* ---------- card 03 · feed, medidor e dedo ---------- */
.pq-feed{animation:pb-feed var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
/* passos de 84 iguais ao dedo; fling com elástico no fim do paredão; reset atrás da máscara */
@keyframes pb-feed{0%,9%{transform:translateY(0)}14%,25%{transform:translateY(-84px)}30%,38%{transform:translateY(-168px)}44%{transform:translateY(-436px);animation-timing-function:var(--pq-fling)}47%{transform:translateY(-420px)}52%{transform:translateY(-420px);animation-timing-function:var(--pq-fling)}60%{transform:translateY(-652px)}96.9%{transform:translateY(-652px);animation-timing-function:steps(1,end)}97%,100%{transform:translateY(0)}}
.pq-feed-reset{opacity:0;animation:pb-feed-reset var(--pq-dur) linear var(--pq-off) infinite both}
@keyframes pb-feed-reset{0%,91%{opacity:0}96.5%{opacity:1}97.5%{opacity:1;animation-timing-function:steps(1,start)}100%{opacity:0}}
.pq-ico{animation:pb-ico var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
.pq-tile2 .pq-ico{animation-delay:calc(var(--pq-off) + .18s)}.pq-tile3 .pq-ico{animation-delay:calc(var(--pq-off) + .36s)}
@keyframes pb-ico{0%,55%{transform:scale(.3)}59%{transform:scale(1.22)}62%,100%{transform:scale(1)}}
.pq-lvl{animation:pb-lvl var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-lvl{0%,9%{transform:translateY(0);opacity:1}14%,25%{transform:translateY(50px)}30%,38%{transform:translateY(98px)}44%,58%{transform:translateY(142px);opacity:1}62%,94%{transform:translateY(142px);opacity:0}95%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
.pq-warn{opacity:0;animation:pb-warn var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-warn{0%,9%{opacity:0}14%,25%{opacity:.4}30%,38%{opacity:.78}44%,94%{opacity:1}95%,100%{opacity:0}}
.pq-okfill{animation:pb-okfill var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-okfill{0%,58%{transform:translateY(172px);opacity:1}66%,92%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(0);opacity:0}}
.pq-eye{animation:pb-eye var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-eye{0%,9%{transform:scaleY(1)}14%,25%{transform:scaleY(.72)}30%,38%{transform:scaleY(.45)}44%,58%{transform:scaleY(.16)}63%{transform:scaleY(1.18)}66%,100%{transform:scaleY(1)}}
.pq-eye-pain{animation:pb-eye-pain var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
.pq-eye-ok{opacity:0;animation:pb-eye-ok var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-eye-pain{0%,58%{opacity:1}63%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes pb-eye-ok{0%,58%{opacity:0}63%,93%{opacity:1}98%,100%{opacity:0}}
/* dedo: manipulação direta 1:1 com o feed (84 por passo), fling de 138, duplo toque no post editado */
.pq-finger{opacity:0;animation:pb-finger var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-finger{0%{transform:translate(262px,300px);opacity:0}4%{opacity:1}7%,9%{transform:translate(204px,222px)}14%{transform:translate(198px,138px);opacity:1}16%{transform:translate(198px,138px);opacity:0}17%{transform:translate(262px,300px);opacity:0}20%{opacity:1}23%,25%{transform:translate(204px,222px)}30%{transform:translate(198px,138px);opacity:1}32%{transform:translate(198px,138px);opacity:0}33%{transform:translate(262px,300px);opacity:0}35%{opacity:1}37%,38%{transform:translate(204px,230px)}43%{transform:translate(194px,92px);opacity:1}45%{transform:translate(194px,92px);opacity:0}46%{transform:translate(262px,300px);opacity:0}48%{opacity:1}50%,52%{transform:translate(204px,222px)}57%{transform:translate(199px,142px);opacity:1}59%{transform:translate(199px,142px);opacity:0}60%,70%{transform:translate(262px,300px);opacity:0}73%{opacity:1}77%{transform:translate(200px,176px)}78.2%{transform:translate(199px,180px)}79.4%{transform:translate(200px,176px)}80.6%{transform:translate(199px,180px)}82%,88%{transform:translate(200px,176px);opacity:1}94%,100%{transform:translate(262px,300px);opacity:0}}
/* sombra de contato: achata quando pousa, some quando levanta */
.pq-finger-sh{opacity:0;animation:pb-finger-sh var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-finger-sh{0%,6%{opacity:0;transform:scale(.6)}8%,14%{opacity:1;transform:scale(1)}16%,22%{opacity:0;transform:scale(.6)}24%,30%{opacity:1;transform:scale(1)}32%,36%{opacity:0;transform:scale(.6)}38%,43%{opacity:1;transform:scale(1)}45%,49%{opacity:0;transform:scale(.6)}51%,57%{opacity:1;transform:scale(1)}59%,76%{opacity:0;transform:scale(.6)}77%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0}}
/* anel de toque: nasce em cada pouso e nos dois toques */
.pq-tap-ring{opacity:0;animation:pb-tap var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-tap{0%,7%{opacity:0;transform:scale(.4)}7.5%{opacity:.7}10%{opacity:0;transform:scale(1.7)}23%{opacity:0;transform:scale(.4)}23.5%{opacity:.7}26%{opacity:0;transform:scale(1.7)}37%{opacity:0;transform:scale(.4)}37.5%{opacity:.7}40%{opacity:0;transform:scale(1.7)}50%{opacity:0;transform:scale(.4)}50.5%{opacity:.7}53%{opacity:0;transform:scale(1.7)}77%{opacity:0;transform:scale(.4)}77.5%{opacity:.8}80%{opacity:0;transform:scale(1.7)}80.6%{opacity:0;transform:scale(.4)}81%{opacity:.8}83.5%,100%{opacity:0;transform:scale(1.7)}}
.pq-heart{opacity:0;animation:pb-heart var(--pq-dur) var(--pq-ease) var(--pq-off) infinite both}
@keyframes pb-heart{0%,80%{opacity:0;transform:scale(.2)}82%{opacity:1;transform:scale(1.28)}84%{transform:scale(.94)}86%,89%{opacity:1;transform:scale(1)}93%,100%{opacity:0;transform:translateY(-8px) scale(1.08)}}

/* ---------- pausa: só o card na tela roda; a história começa do zero na 1ª aparição; com a aba oculta o EIP.whenVisible tira o is-live ---------- */
.pub.is-ready .pc:not(.is-live) svg *,.pub.is-ready .pc:not(.is-live) .pq-stage::after,.pub.is-ready .pc:not(.is-live) .pq-ring,
.js .pub .pc:not(.is-started) svg *,.js .pub .pc:not(.is-started) .pq-stage::after,.js .pub .pc:not(.is-started) .pq-ring{animation-play-state:paused}

/* ---------- bloco da virada ---------- */
.pub-turn{margin-top:64px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding:30px 30px 30px 38px;border-radius:24px;color:var(--tx);text-align:left;
  background:radial-gradient(ellipse 60% 120% at 0% 0%,#7a2a12 0%,rgba(122,42,18,0) 70%),#140b09;box-shadow:0 30px 60px -30px rgba(110,30,10,.8)}
.pub-turn-copy{min-width:0}
.pub-turn .big{font:800 clamp(21px,2vw,27px)/1.28 var(--fh);letter-spacing:-.035em;color:var(--tx);margin:0 0 8px;max-width:760px}
.pub-turn .big em{color:var(--v1);font-style:normal}
.pub-turn p:not(.big){font-size:15px;line-height:1.6;color:var(--mut);margin:0;max-width:640px;text-wrap:pretty}
.pub-turn-cta{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pub-turn .btn{min-width:0}
.pub-turn .btn + .mais-link{margin-left:0}

/* ---------- elevação sutil só com mouse ---------- */
@media (hover:hover) and (pointer:fine){
  .pc .pq-stage{transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
  .pc:hover .pq-stage{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 40px 70px -30px rgba(110,30,10,.9),0 14px 28px -16px rgba(110,30,10,.5)}
}

/* ---------- movimento reduzido: quadro curado da dor ---------- */
@media (prefers-reduced-motion:reduce){
  .pub svg *,.pub .pq-stage::after,.pub .pq-ring{animation:none!important}
  .pc .pq-stage{transition:none}
  .pq-ad-tired{opacity:.45}.pq-ad-down{opacity:1;transform:none}.pq-done{opacity:0}
  .pq-bar1{transform:scaleX(.36)}.pq-bar2{transform:scaleX(.28)}.pq-bar3{transform:scaleX(.42)}
  .pq-cursor{transform:translate(300px,140px);opacity:1}.pq-q{opacity:1;transform:none}
  .pq-day{opacity:0}.pq-day5{opacity:1;transform:none}.pq-list{transform:translateY(184px)}.pq-thumb{transform:scaleY(.5)}.pq-stamp{opacity:1;transform:none}.pq-ok,.pq-scan{opacity:0}
  .pq-feed{transform:none}.pq-feed-reset,.pq-heart,.pq-okfill,.pq-eye-ok,.pq-tap-ring{opacity:0}.pq-lvl{transform:translateY(120px)}.pq-warn{opacity:1}.pq-eye{transform:scaleY(.4)}
  .pq-finger{transform:translate(201px,168px);opacity:1}.pq-finger-sh{opacity:1;transform:none}
}

/* ---------- responsivo (breakpoints 1050 / 980 exceção da spec / 760 / 380) ---------- */
@media (max-width:1050px){
  .pub .sec-head.split{grid-template-columns:1fr;gap:18px;align-items:start}
  .pub-grid{gap:24px}
  .pc h3{font-size:21px}
  .pc>p:last-child{font-size:15px}
}
@media (max-width:980px){
  .pub{padding:80px 0}
  .pub .sec-head{margin-bottom:44px}
  .pub-grid{grid-template-columns:1fr;gap:40px}
  .pc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:40px;align-items:start}
  .pc .pq-stage{grid-row:1/6;grid-column:1}
  .pc .pc-tag{grid-row:2;grid-column:2;margin-top:0}
  .pc h3{grid-row:3;grid-column:2;font-size:24px;max-width:none}
  .pc>p:last-child{grid-row:4;grid-column:2;max-width:none}
  .pub-turn{flex-direction:column;align-items:flex-start}
  .pub-turn-cta{flex-direction:row;align-items:center;gap:6px 22px;flex-wrap:wrap}
}
@media (max-width:760px){
  .pub{padding:64px 0}
  .pub h2{font-size:clamp(31px,8.6vw,38px);line-height:1.12}
  .pub .sub{font-size:16px}
  .pub-grid{gap:44px}
  .pc{display:flex;flex-direction:column;align-items:stretch}
  .pc .pq-stage{width:100%}
  .pq-stage{border-radius:20px}
  .pc .pc-tag{margin:20px 0 10px}
  .pc h3{font-size:22px}
  .pub-turn{margin-top:52px;padding:26px 22px;border-radius:20px}
  .pub-turn .big{font-size:21px;text-wrap:pretty}
  .pub-turn .big br{display:none}
  .pub-turn-cta{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .pub-turn .btn{width:100%;justify-content:space-between;gap:12px;font-size:14px;padding:17px 20px;white-space:nowrap}
  .pub-turn .mais-link{align-self:center}

  /* modo curto: cada cartão vira uma linha (cena à esquerda, texto ao lado) e a seção cabe em 1 tela e meia */
  html.mobile-curto .pub{padding:48px 0 44px}
  html.mobile-curto .pub .eyebrow{margin-bottom:14px}
  html.mobile-curto .pub h2{font-size:clamp(28px,8vw,34px)}
  html.mobile-curto .pub .sec-head.split{gap:12px}
  html.mobile-curto .pub .sec-head{margin-bottom:22px}
  html.mobile-curto .pub .sub{font-size:15px;line-height:1.5}
  html.mobile-curto .pub-grid{gap:0}
  html.mobile-curto .pc{display:grid;grid-template-columns:minmax(0,160fr) minmax(0,178fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:14px;align-items:start;padding:16px 0;border-top:1px solid rgba(60,20,8,.12)}
  html.mobile-curto .pc:last-child{border-bottom:1px solid rgba(60,20,8,.12)}
  html.mobile-curto .pc .pq-stage{grid-column:1;grid-row:1/6;align-self:center;width:100%;border-radius:14px;box-shadow:0 14px 26px -16px rgba(110,30,10,.7)}
  html.mobile-curto .pc .pc-tag{grid-column:2;grid-row:2;margin:0 0 7px;font-size:10px;letter-spacing:.14em;gap:8px}
  html.mobile-curto .pc-tag b{min-width:26px;height:19px;padding:0 6px;font-size:10px}
  html.mobile-curto .pc h3{grid-column:2;grid-row:3;font-size:17px;line-height:1.22;margin:0 0 6px;max-width:none}
  html.mobile-curto .pc>p:last-child{grid-column:2;grid-row:4;font-size:13.5px;line-height:1.48;max-width:none}
  html.mobile-curto .pub-turn{margin-top:28px;padding:22px 20px 12px}
  html.mobile-curto .pub-turn .big{font-size:20px;margin-bottom:6px}
  html.mobile-curto .pub-turn p:not(.big){font-size:14px;line-height:1.5}
}
@media (max-width:380px){
  .pub-turn{padding:22px 18px}
  .pub-turn .btn{font-size:13px;padding:15px 16px}
  /* tela estreita: a cena volta a ser menor pra o texto ao lado não ganhar linha */
  html.mobile-curto .pc{grid-template-columns:minmax(0,142fr) minmax(0,196fr);column-gap:16px}
}