/* Para quem é: três cenas animadas que mostram onde a edição trava. */
.pub{--pub-dur:10.5s;--pub-ink:#1c0f2e;--pub-soft:#4b3a60;--pub-violet:#6a34c2;--pub-ease:cubic-bezier(.45,0,.2,1);position:relative;isolation:isolate;overflow:hidden;color:var(--pub-ink);background:radial-gradient(ellipse 60% 70% at 100% 0%,#f3ecfd 0%,#f3ecfd00 70%),radial-gradient(ellipse 55% 60% at 0% 100%,#cdb9ec 0%,#cdb9ec00 70%),linear-gradient(180deg,#e7ddf6 0%,#d9caef 100%)}
.pub .wrap{position:relative}

/* Cabeçalho */
.pub .pub-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0 64px;align-items:end;align-items:last baseline;max-width:none;margin:0 0 56px}
.pub .pub-head .eyebrow{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--pub-violet);margin:0 0 18px}
.pub .pub-head h2{color:var(--pub-ink);margin:0;font-size:clamp(34px,3.7vw,52px);line-height:1.1;text-wrap:balance}
.pub .pub-head h2 em{color:#6d31d6;display:inline-block;text-wrap:balance}
.pub .pub-head .pub-lead{font-size:17px;line-height:1.6;color:var(--pub-soft);margin:0;max-width:360px;text-wrap:pretty}

/* Cartões */
.pub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.pub-card{min-width:0;display:flex;flex-direction:column}
.pub-stage{position:relative;aspect-ratio:340/272;border-radius:22px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 90% 70% at 50% -10%,#3a1d6b 0%,#3a1d6b00 70%),radial-gradient(circle at 1px 1px,#ffffff14 1px,#0000 1.6px) 0 0/16px 16px,#120c22;box-shadow:0 30px 60px -28px #2a0f5ccc,0 12px 24px -16px #2a0f5c66}
.pub-stage::before,.pub-stage::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.pub-stage::before{box-shadow:inset 0 0 0 1px #ffffff14}
.pub-stage::after{box-shadow:inset 0 0 0 1.5px #a878ff,inset 0 0 60px #9759ff38;opacity:0;animation:pubGlow var(--pub-dur) var(--pub-ease) infinite both}
.pub-svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.pub-t{font-family:Manrope,Arial,sans-serif;font-weight:700}
.pub .pub-meta{display:flex;align-items:center;gap:12px;margin:26px 0 12px;font:700 12px/1 Manrope,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--pub-violet)}
.pub .pub-meta b{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border-radius:100px;background:var(--pub-ink);color:#e7d8ff;font-weight:700;letter-spacing:.06em}
.pub .pub-card h3{font:700 23px/1.24 Syne,Arial,sans-serif;letter-spacing:-.035em;color:var(--pub-ink);margin:0 0 10px;max-width:330px;text-wrap:balance}
.pub .pub-card .pub-pain{font-size:16px;line-height:1.6;color:var(--pub-soft);margin:0;max-width:330px;text-wrap:balance}

/* Virada */
.pub .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:#f5f0ff;background:radial-gradient(ellipse 60% 120% at 0% 0%,#4a2385 0%,#4a238500 70%),#120c22;box-shadow:0 30px 60px -30px #2a0f5ccc}
.pub .pub-turn-copy{min-width:0}
.pub .pub-turn .pub-turn-title{font:700 clamp(21px,2vw,27px)/1.28 Syne,Arial,sans-serif;letter-spacing:-.035em;color:#f5f0ff;margin:0 0 8px;max-width:640px}
.pub .pub-turn .pub-turn-title em{font:inherit;font-style:normal;color:#c7a7ff;display:inline-block;text-wrap:balance}
.pub .pub-turn .pub-turn-sub{font-size:15px;line-height:1.6;color:#b4a9c6;margin:0;max-width:640px;text-wrap:balance}
.pub .pub-cta{flex:none}

/* ---------- 01 · Ads ---------- */
.pub-a-main{transform-box:fill-box;transform-origin:30% 100%;animation:pubASag var(--pub-dur) var(--pub-ease) infinite both}
.pub-a-tired{animation:pubATired var(--pub-dur) var(--pub-ease) infinite both}
.pub-a-down{transform-box:fill-box;transform-origin:center;animation:pubADown var(--pub-dur) var(--pub-ease) infinite both}
.pub-a-bar{transform-box:fill-box;transform-origin:0 50%;animation:pubABar var(--pub-dur) var(--pub-ease) infinite both}
.pub-a-bar2{animation-delay:.3s}.pub-a-bar3{animation-delay:.6s}
.pub-a-ok{transform-box:fill-box;transform-origin:center;animation:pubAOk var(--pub-dur) cubic-bezier(.2,.9,.3,1.2) infinite both}
.pub-a-ok2{animation-delay:.18s}.pub-a-ok3{animation-delay:.36s}
.pub-a-cursor{animation:pubACursor var(--pub-dur) var(--pub-ease) infinite both}
.pub-a-q{transform-box:fill-box;transform-origin:0 100%;animation:pubAQ var(--pub-dur) var(--pub-ease) infinite both}
@keyframes pubASag{0%,8%{transform:none}60%,68%{transform:translateY(4px) rotate(-3.5deg)}73%{transform:translateY(-5px) rotate(.8deg)}78%,100%{transform:none}}
@keyframes pubATired{0%,8%{opacity:0}60%,68%{opacity:.6}74%,100%{opacity:0}}
@keyframes pubADown{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)}}
@keyframes pubABar{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)}}
@keyframes pubAOk{0%,68%{opacity:0;transform:translateX(12px) scale(.94)}72%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes pubACursor{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}}
@keyframes pubAQ{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)}}

/* ---------- 02 · Conteúdo ---------- */
.pub-c-panel{animation:pubCShake var(--pub-dur) linear infinite both}
.pub-c-list{animation:pubCList var(--pub-dur) cubic-bezier(.3,1.3,.5,1) infinite both}
.pub-c-thumb{transform-box:fill-box;transform-origin:50% 0;animation:pubCThumb var(--pub-dur) var(--pub-ease) infinite both}
.pub-c-d{opacity:0;animation:var(--pub-dur) var(--pub-ease) infinite both}
.pub-c-d1{animation-name:pubCD1}.pub-c-d2{animation-name:pubCD2}.pub-c-d3{animation-name:pubCD3}.pub-c-d4{animation-name:pubCD4}.pub-c-d5{animation-name:pubCD5}
.pub-c-hand{transform-box:fill-box;transform-origin:50% 100%;animation:pubSpin 2.4s linear infinite}
.pub-c-clock{animation:pubCClock var(--pub-dur) var(--pub-ease) infinite both}
.pub-c-ok{transform-box:fill-box;transform-origin:center;animation:pubCOk var(--pub-dur) cubic-bezier(.2,.9,.3,1.3) infinite both}
.pub-c-ok2{animation-delay:.15s}.pub-c-ok3{animation-delay:.3s}.pub-c-ok4{animation-delay:.45s}
.pub-c-sweep{animation:pubCSweep var(--pub-dur) linear infinite both}
.pub-c-stamp{transform-box:fill-box;transform-origin:center;animation:pubCStamp var(--pub-dur) cubic-bezier(.3,0,.2,1) infinite both}
@keyframes pubCList{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}}
@keyframes pubCThumb{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)}}
@keyframes pubCD1{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 pubCD2{0%,9%{opacity:0;transform:translateY(12px)}12%,21%{opacity:1;transform:none}24%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pubCD3{0%,21%{opacity:0;transform:translateY(12px)}24%,33%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pubCD4{0%,33%{opacity:0;transform:translateY(12px)}36%,45%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pubCD5{0%,45%{opacity:0;transform:translateY(12px)}48%,94%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes pubCStamp{0%,50%{opacity:0;transform:scale(1.8)}53%{opacity:1;transform:scale(.93)}55%,67%{opacity:1;transform:scale(1)}71%,100%{opacity:0;transform:scale(1.15)}}
@keyframes pubCShake{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}}
@keyframes pubCClock{0%,68%{opacity:1}71%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes pubCOk{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)}}
@keyframes pubCSweep{0%,66%{opacity:0;transform:translateY(40px)}67%{opacity:1}75%{opacity:1;transform:translateY(250px)}76%,100%{opacity:0;transform:translateY(250px)}}
@keyframes pubSpin{to{transform:rotate(360deg)}}

/* ---------- 03 · Negócio ---------- */
.pub-n-feed{animation:pubNFeed var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-reset{animation:pubNReset var(--pub-dur) linear infinite both}
.pub-n-ico{transform-box:fill-box;transform-origin:center;animation:pubNIco var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-tile2 .pub-n-ico{animation-delay:.18s}.pub-n-tile3 .pub-n-ico{animation-delay:.36s}
.pub-n-finger{animation:pubNFinger var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-heart{transform-box:fill-box;transform-origin:center;animation:pubNHeart var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-lvl{animation:pubNLvl var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-warn{animation:pubNWarn var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-okfill{animation:pubNOkFill var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-eye{transform-box:fill-box;transform-origin:center;animation:pubNEye var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-eye-pain{animation:pubNEyePain var(--pub-dur) var(--pub-ease) infinite both}
.pub-n-eye-ok{animation:pubNEyeOk var(--pub-dur) var(--pub-ease) infinite both}
/* O feed rola: o paredão nunca acaba, o polegar passa reto; o post editado segura o polegar. */
@keyframes pubNFeed{0%,9%{transform:translateY(0)}14%,25%{transform:translateY(-84px)}30%,38%{transform:translateY(-168px)}44%{transform:translateY(-420px)}52%{transform:translateY(-420px);animation-timing-function:cubic-bezier(.25,.75,.25,1)}60%{transform:translateY(-652px)}96.9%{transform:translateY(-652px);animation-timing-function:steps(1,end)}97%,100%{transform:translateY(0)}}
@keyframes pubNReset{0%,91%{opacity:0}96.5%{opacity:1}97.5%{opacity:1;animation-timing-function:steps(1,start)}100%{opacity:0}}
@keyframes pubNIco{0%,55%{transform:scale(.3)}59%{transform:scale(1.22)}62%,100%{transform:scale(1)}}
@keyframes pubNFinger{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}}
@keyframes pubNHeart{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)}}
@keyframes pubNLvl{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}}
@keyframes pubNWarn{0%,9%{opacity:0}14%,25%{opacity:.4}30%,38%{opacity:.78}44%,94%{opacity:1}95%,100%{opacity:0}}
@keyframes pubNOkFill{0%,58%{transform:translateY(172px);opacity:1}66%,92%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(0);opacity:0}}
@keyframes pubNEye{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)}}
@keyframes pubNEyePain{0%,58%{opacity:1}63%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes pubNEyeOk{0%,58%{opacity:0}63%,93%{opacity:1}98%,100%{opacity:0}}

/* Virada visual em todos os cartões */
@keyframes pubGlow{0%,66%{opacity:0}72%,90%{opacity:1}96%,100%{opacity:0}}

/* Pausa fora da tela (o script marca .pub-ready e .pub-play). */
.pub.pub-ready .pub-card:not(.pub-play) svg *,.pub.pub-ready .pub-card:not(.pub-play) .pub-stage::after{animation-play-state:paused}

/* Tablet: cena ao lado do texto. */
@media(max-width:1050px){.pub-grid{gap:24px}.pub .pub-card h3{font-size:21px}.pub .pub-card .pub-pain{font-size:15px}.pub .pub-head{gap:0 40px}}
@media(max-width:980px){
 .pub .pub-head{grid-template-columns:1fr;margin-bottom:44px}
 .pub .pub-head h2{margin-bottom:18px}
 .pub-grid{grid-template-columns:1fr;gap:40px}
 .pub-card{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}
 .pub-card .pub-stage{grid-row:1/6;grid-column:1}
 .pub-card .pub-meta{grid-row:2;grid-column:2}.pub-card h3{grid-row:3;grid-column:2}.pub-card .pub-pain{grid-row:4;grid-column:2}
 .pub .pub-card .pub-meta{margin-top:0}
 .pub .pub-card h3{font-size:24px}
 .pub .pub-turn{flex-direction:column;align-items:flex-start}
}
/* Celular: cena em cima, texto embaixo. */
@media(max-width:640px){
 .pub .pub-head h2{font-size:clamp(31px,8.6vw,38px);line-height:1.12}
 .pub .pub-head .pub-lead{font-size:16px}
 .pub-grid{gap:44px}
 .pub-card{display:flex;align-items:stretch}
 .pub-stage{border-radius:20px}
 .pub .pub-card .pub-meta{margin:20px 0 10px}
 .pub .pub-card h3{font-size:22px}
 .pub .pub-turn{margin-top:52px;padding:26px 22px;border-radius:20px}
 .pub .pub-turn .pub-turn-title{font-size:21px;text-wrap:balance}
 .pub .pub-cta{width:100%;min-width:0;justify-content:space-between;gap:12px;font-size:14px;padding:17px 20px;white-space:nowrap}
}

/* Movimento reduzido: um quadro fixo que já conta a dor. */
@media(prefers-reduced-motion:reduce){
 .pub svg *,.pub .pub-stage::after{animation:none!important}
 .pub-a-tired{opacity:.45}.pub-a-down{opacity:1}.pub-a-ok{opacity:0}
 .pub-a-bar{transform:scaleX(.36)}.pub-a-bar2{transform:scaleX(.28)}.pub-a-bar3{transform:scaleX(.42)}
 .pub-a-q{opacity:1}
 .pub-c-d{opacity:0}.pub-c-d5{opacity:1}.pub-c-thumb{transform:scaleY(.5)}.pub-c-stamp{opacity:1}.pub-c-ok{opacity:0}.pub-c-sweep{opacity:0}
 .pub-n-feed{transform:none}.pub-n-reset,.pub-n-heart,.pub-n-okfill,.pub-n-eye-ok{opacity:0}.pub-n-lvl{transform:translateY(120px)}.pub-n-warn{opacity:1}.pub-n-eye{transform:scaleY(.4)}
 .pub-n-finger{transform:translate(201px,168px)}
}