/* /app-no-celular — clone de a referência Só classes p-app-* e o hero desta página.
   Cartão da casa: borda de luz em degradê (padding-box + border-box), raio 24 no celular e 40 a partir de 768.
   O celular copia a composição do computador: as duas colunas do cartão do hero, o bento, a sanfona com o celular
   e a fileira de cinco pílulas ficam lado a lado em 360px. Movimento só com transform e opacity (a luz do botão
   gigante é fundo animado, como manda a casa); "menos movimento" desliga a flutuação e o rodízio. */

/* ---------- cartões com a borda de luz da casa ---------- */
.p-app-plat,.p-app-b{border:1px solid transparent;
  background:radial-gradient(120% 120% at 0 0,#171717 0,#0d0d0d 60%,#0a0a0a 100%) padding-box,
             linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)) border-box}

/* ---------- hero: título, computador + celular, cartão largo de duas colunas (a a referência: Desktop / Móvel) ---------- */
.lp-hero--texto{padding-bottom:72px}
.lp-hero--texto .lp-hero-c{width:min(100%,944px)}
.lp-hero--texto .hero-cta{display:none}
.lp-hero--texto .lp-lede{max-width:34em}
.lp-hero .lp-sub.lp-sub{display:block;width:100%;margin:clamp(4px,1.4vw,16px) 0 0;font-size:1rem;color:var(--lp-mut)}
@media (min-width:768px){.lp-hero--texto .lp-h1 .line{display:block}}

/* computador e celular, sobrepostos, com o brilho vermelho atrás */
.p-app-dev{position:relative;isolation:isolate;display:block;width:min(100%,720px);margin:0 auto;padding-right:6%}
.p-app-dev::before{content:"";position:absolute;inset:10% 0 -20%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,45,32,.42),rgba(217,45,32,.1) 60%,transparent)}
.p-app-win{display:block;padding:1px;border-radius:14px;background:linear-gradient(148deg,#4a4a4a,#141414 70%);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.p-app-win>img{display:block;width:100%;height:auto;border-radius:0 0 13px 13px}
.p-app-win-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:13px 13px 0 0;background:#121417;border-bottom:1px solid var(--line)}
.p-app-win-bar i{width:7px;height:7px;border-radius:50%;background:#2b2f35}
.p-app-win-bar span{margin-left:auto;margin-right:auto;font-size:.6875rem;line-height:1;color:var(--lp-mut);letter-spacing:.01em}
.p-app-dev-cel{position:absolute;right:0;bottom:-14%;display:block;width:24%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.75))}
.p-app-dev .lp-cel,.p-app-dev .lp-cel-tela{display:block}
@media (min-width:768px){.p-app-win{border-radius:18px}.p-app-win>img{border-radius:0 0 17px 17px}.p-app-win-bar{height:28px;padding:0 14px;border-radius:17px 17px 0 0}.p-app-win-bar i{width:8px;height:8px}.p-app-win-bar span{font-size:.75rem}}

/* o cartão largo, que sobe por cima da base dos aparelhos */
.p-app-plat{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:-28px;padding:10px;border-radius:24px;text-align:left;
  box-shadow:0 -30px 60px -20px rgba(0,0,0,.85)}
.p-app-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,.025)}
.p-app-col-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.p-app-col-top>span{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.p-app-col-t{font-size:1.0625rem;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff}
.p-app-col-d{display:none;font-size:1rem;line-height:1.5;color:var(--lp-mut)}
.lp-hero .lp-sub .p-app-col .rd-link{color:var(--red-hi);text-decoration:none}
.p-app-chips{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%}
.lp-hero .lp-sub .p-app-chip{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:999px;color:#fff;text-decoration:none;
  font-size:.875rem;line-height:1.15;font-weight:500;background:#121212;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;transition:transform .18s var(--ease),opacity .2s}
.p-app-chip .ic{width:16px;height:16px;color:var(--red-hi)}
.p-app-chip span{min-width:0;overflow-wrap:anywhere}
.lp-hero .lp-sub .p-app-chip:active{transform:scale(.98)}
.p-app-qr{display:none}
@media (hover:hover) and (pointer:fine){.lp-hero .lp-sub .p-app-chip:hover{transform:translateY(-2px)}}
@media (min-width:600px){
  .p-app-col-d{display:block}
  .p-app-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .p-app-plat{gap:16px;margin-top:-56px;padding:16px;border-radius:40px}
  .p-app-col{gap:14px;padding:24px;border-radius:28px}
  .p-app-col-t{font-size:1.5rem}
  .p-app-col-d{max-width:24em}
}
@media (min-width:1024px){
  .p-app-qr{display:block;flex:none;width:108px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 12px 30px -10px rgba(217,45,32,.6)}
  .p-app-qr svg{display:block;width:100%;height:auto;border-radius:12px}
}

/* ---------- 1. bento "Por que levar o painel no celular" ---------- */
.p-app-s1 .lp-cite{margin-bottom:clamp(24px,4vw,48px)}
.p-app-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b c" "d d" "e e";gap:10px}
.p-app-b{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:20px 16px;border-radius:24px;text-align:center}
.p-app-b--a{grid-area:a}.p-app-b--b{grid-area:b}.p-app-b--c{grid-area:c}.p-app-b--d{grid-area:d}.p-app-b--e{grid-area:e}
.p-app-b-t{font-size:clamp(1.125rem,.95rem + .8vw,1.5rem);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--lp-mut);text-wrap:balance}
.p-app-b-t b{font-weight:600;color:#fff}
.p-app-b-d{font-size:1rem;line-height:1.5;color:var(--lp-mut);text-wrap:pretty}

/* A: os avisos que chegam no aparelho */
.p-app-b--a::after{content:"";position:absolute;inset:auto 0 -40% 0;height:70%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,45,32,.4),rgba(217,45,32,.08) 60%,transparent)}
.p-app-toasts{display:grid;gap:8px;width:100%;margin-top:auto;padding-top:8px}
.p-app-toasts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:16px;text-align:left;
  background:rgba(26,26,26,.82);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 14px 30px -14px rgba(0,0,0,.9)}
.p-app-toasts li:first-child{box-shadow:0 0 0 1px rgba(255,84,72,.4) inset,0 18px 40px -14px rgba(217,45,32,.55)}
.p-app-toasts img{width:28px;height:28px;border-radius:8px}
.p-app-toasts b{display:block;font-size:.9375rem;line-height:1.25;font-weight:600;color:#fff}
.p-app-toasts li>span>span{display:block;font-size:.875rem;line-height:1.35;color:var(--lp-mut2)}
.js-ok .p-app-b--a .p-app-toasts li{opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-ok .p-app-b--a.in .p-app-toasts li{opacity:1;transform:none}
.js-ok .p-app-b--a.in .p-app-toasts li:nth-child(2){transition-delay:.18s}
.js-ok .p-app-b--a.in .p-app-toasts li:nth-child(3){transition-delay:.36s}

/* B: o celular que sobe do fundo do cartão */
.p-app-b--b{min-height:320px}
.p-app-b-cel{position:absolute;left:50%;bottom:0;width:min(64%,230px);transform:translate(-50%,46%);transition:transform .8s var(--ease)}
.js-ok .p-app-b--b .p-app-b-cel{transform:translate(-50%,62%)}
.js-ok .p-app-b--b.in .p-app-b-cel{transform:translate(-50%,46%)}
.p-app-b--b::after{content:"";position:absolute;left:10%;right:10%;bottom:-30%;height:60%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,45,32,.36),transparent)}

/* C: as abas do painel, que acendem uma de cada vez */
.p-app-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:auto}
.p-app-tiles li{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:center;gap:6px;aspect-ratio:1;border-radius:14px;color:var(--red-hi);
  background:linear-gradient(160deg,#1b1b1b,#0b0b0b);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-app-tiles li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(90% 90% at 50% 100%,rgba(217,45,32,.55),rgba(217,45,32,.08));box-shadow:0 0 0 1px rgba(255,84,72,.5) inset}
.p-app-tiles .ic{width:20px;height:20px}
.p-app-tiles span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes p-app-acende{0%,100%{opacity:0}4%,10%{opacity:1}16%{opacity:0}}

/* D: a selfie que vai para o celular, com as quatro etapas e a barra de andamento */
.p-app-etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin-top:4px}
.p-app-etapas li{display:grid;justify-items:center;gap:6px;text-align:center}
.p-app-etapas img{width:min(100%,72px);height:auto;aspect-ratio:1;border-radius:50%}
.p-app-etapas span{font-size:.875rem;line-height:1.2;color:var(--lp-mut2)}
.p-app-barra{display:block;width:100%;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08)}
.p-app-barra i{display:block;width:100%;height:100%;border-radius:inherit;transform-origin:0 50%;transform:scaleX(.5);background:linear-gradient(90deg,var(--red),var(--red-hi))}
@keyframes p-app-anda{0%,18%{transform:scaleX(.25)}25%,43%{transform:scaleX(.5)}50%,68%{transform:scaleX(.75)}75%,100%{transform:scaleX(1)}}

/* E: o cartão aceso (o verde da a referência, no vermelho escurecido até o branco dar mais de 4,5:1) */
.p-app-b--e{justify-content:center;min-height:140px;border:0;background:radial-gradient(80% 120% at 100% 0,rgba(255,120,100,.22),transparent 60%),linear-gradient(150deg,#b4231a,#8a1912)}
.p-app-b--e::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at calc(100% + 30px) calc(100% + 60px),transparent 66px,rgba(255,255,255,.08) 67px,rgba(255,255,255,.08) 90px,transparent 91px)}
.p-app-e-t{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance;max-width:18em}

@media (min-width:768px){
  .p-app-bento{grid-template-areas:"a b" "c d" "c e";grid-template-rows:minmax(400px,auto) auto auto;gap:16px}
  .p-app-b{gap:14px;padding:32px;border-radius:40px}
  .p-app-b--b{min-height:0}
  .p-app-b--c{min-height:440px}
  .p-app-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .p-app-tiles li{aspect-ratio:auto;min-height:88px;border-radius:18px}
  .p-app-tiles .ic{width:24px;height:24px}
  .p-app-tiles span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;font-size:.875rem;line-height:1.2;color:var(--lp-mut2)}
  .p-app-toasts{gap:10px}
  .p-app-toasts li{padding:12px 16px}
}

/* ---------- 2. o aviso de venda: o sino aceso, o cartão de vidro e a chamada à direita ---------- */
.p-app-av{display:grid;gap:24px;align-items:center}
.p-app-av-med{position:relative;isolation:isolate;width:100%;max-width:560px;margin-inline:auto}
.p-app-av-med::before{content:"";position:absolute;inset:-6% 0;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(217,45,32,.3),transparent)}
.p-app-av-med img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 62%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 62%,#0000 100%)}
.p-app-vidro{position:relative;z-index:1;display:grid;gap:4px;width:min(78%,300px);margin:-34% 0 0;padding:6px;border:1px solid transparent;border-radius:20px;
  background:linear-gradient(160deg,rgba(28,28,28,.8),rgba(12,12,12,.72)) padding-box,linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.05)) border-box;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.p-app-vidro li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:14px;color:var(--lp-mut)}
.p-app-vidro li .ic{width:18px;height:18px;margin-top:2px}
.p-app-vidro li b{display:block;font-size:1rem;line-height:1.3;font-weight:600;color:var(--lp-mut2)}
.p-app-vidro li span span{display:block;margin-top:2px;font-size:.875rem;line-height:1.35;color:var(--lp-mut2)}
.p-app-vidro li.on{color:var(--red-hi);background:rgba(217,45,32,.14);box-shadow:0 0 0 1px rgba(255,84,72,.32) inset}
.p-app-vidro li.on b{color:#fff}
.p-app-av-x{order:-1;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.p-app-av-t{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);line-height:1.05;font-weight:600;letter-spacing:-.02em;color:var(--lp-mut);text-wrap:balance}
.p-app-av-t b{font-weight:600;color:#fff}
.p-app-av-x .rd-link{margin-top:-4px}
/* no celular: a chamada em cima e o sino com o vidro embaixo (texto + imagem em sequência, a mesma imagem) */
@media (min-width:768px){
  .p-app-av{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px}
  .p-app-av-x{order:0;grid-column:2;grid-row:1;align-items:center;text-align:center}
  .p-app-av-med{grid-column:1;grid-row:1}
  .p-app-vidro{grid-column:1;grid-row:1;align-self:end;margin:0 0 4%}
}

/* ---------- 3. instalar: a sanfona à esquerda e o celular que troca de tela à direita ---------- */
.p-app-ins{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:center}
.p-app-ins-i{border-bottom:1px solid var(--line)}
.p-app-ins-i:first-child{border-top:1px solid var(--line)}
.p-app-ins-i summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:56px;padding:12px 0;cursor:pointer;list-style:none}
.p-app-ins-i summary::-webkit-details-marker{display:none}
.p-app-ins-n{font-size:.875rem;line-height:1;color:var(--red-hi);font-variant-numeric:tabular-nums}
.p-app-ins-q{font-size:1rem;line-height:1.25;font-weight:600;color:var(--lp-mut2);transition:color .3s}
.p-app-ins-i[open] .p-app-ins-q{color:#fff}
.p-app-ins-x-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;color:var(--red-hi)}
.p-app-ins-x-ic .ic{width:14px;height:14px;transition:transform .4s var(--ease)}
.p-app-ins-i[open] .p-app-ins-x-ic .ic{transform:rotate(45deg)}
.p-app-ins-i p{padding:0 0 16px;font-size:1rem;line-height:1.5;color:var(--lp-mut);text-wrap:pretty}
.p-app-ins-i p b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.p-app-ins-cel{position:relative;isolation:isolate;width:100%;max-width:300px;justify-self:center}
.p-app-ins-cel::before{content:"";position:absolute;inset:20% 0 -10%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(217,45,32,.34),transparent)}
.p-app-ins-tela{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.p-app-ins-tela+.p-app-ins-tela{position:absolute;inset:0}
.p-app-ins-tela--1{opacity:1;transform:none}
.p-app-ins:has(#passo-2[open]) .p-app-ins-tela--1,.p-app-ins:has(#passo-3[open]) .p-app-ins-tela--1{opacity:0;transform:translateY(14px) scale(.98)}
.p-app-ins:has(#passo-2[open]) .p-app-ins-tela--2,.p-app-ins:has(#passo-3[open]) .p-app-ins-tela--3{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.p-app-ins-i summary:hover .p-app-ins-q{color:#fff}}
@media (min-width:768px){
  /* o título entra na coluna da sanfona, ao lado do celular (a a referência: título + sanfona à esquerda, aparelho à direita) */
  .p-app-s3 .lp-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .p-app-s3 .lp-head{grid-column:1;grid-row:1;margin-bottom:32px}
  .p-app-ins{display:contents}
  .p-app-ins-x{grid-column:1;grid-row:2}
  .p-app-ins-cel{grid-column:2;grid-row:1/3;align-self:center}
  .p-app-s3 .cap{grid-column:1/-1}
  .p-app-ins-i summary{gap:16px;min-height:72px}
  .p-app-ins-q{font-size:1.375rem}
  .p-app-ins-x-ic{width:36px;height:36px}
  .p-app-ins-i p{padding:0 52px 22px 36px;font-size:1.0625rem}
}

/* ---------- 4. o celular aceso, a fileira de cinco pílulas e a barra de botão gigante ---------- */
.p-app-bar{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(20px,3vw,32px)}
.p-app-bar-obj{position:relative;isolation:isolate;width:min(100%,520px);aspect-ratio:100/66;overflow:clip;
  -webkit-mask:linear-gradient(180deg,#0000 0,#000 34%);mask:linear-gradient(180deg,#0000 0,#000 34%)}
.p-app-bar-obj::after{content:"";position:absolute;left:4%;right:4%;bottom:-36%;height:70%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,84,72,.6),rgba(217,45,32,.18) 55%,transparent)}
.p-app-bar-cel{width:60%;margin:-46% auto 0;filter:drop-shadow(0 30px 60px rgba(217,45,32,.35))}
/* as cinco telas uma sobre a outra; sem movimento fica a do CRM, a da pílula acesa */
.p-app-bar-cel .lp-cel-tela img.p-app-bar-tela{position:absolute;left:0;top:0;opacity:0}
.p-app-bar-cel .lp-cel-tela img.p-app-bar-tela:nth-child(3){opacity:1}
.p-app-pills{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;max-width:880px;padding-bottom:64px}
.p-app-pills li{display:contents}
.p-app-pill{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:center;gap:4px;min-height:64px;min-width:0;padding:8px 2px;border-radius:18px;
  background:#0f0f0f;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;color:var(--red-hi)}
.p-app-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(100% 120% at 50% 100%,#c8261b,#6e140d);box-shadow:0 0 0 1px rgba(255,120,100,.6) inset,0 16px 40px -10px rgba(217,45,32,.7)}
.p-app-pill .ic{width:20px;height:20px}
.p-app-pill b{max-width:100%;font-size:.75rem;line-height:1.1;font-weight:600;color:#fff}
.p-app-pill-d{position:absolute;left:0;right:0;bottom:0;min-height:48px;display:grid;place-items:center;text-align:center;opacity:0;
  font-size:1rem;line-height:1.4;color:var(--lp-mut2);pointer-events:none}
/* sem movimento: a do meio fica acesa */
.p-app-pills li:nth-child(3) .p-app-pill::before,.p-app-pills li:nth-child(3) .p-app-pill-d{opacity:1}
.p-app-pills li:nth-child(3) .p-app-pill{color:#fff}
@keyframes p-app-vez{0%,17%{opacity:1}21%,96%{opacity:0}100%{opacity:1}}
.p-app-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:880px;min-height:72px;padding:0 24px;border-radius:28px;
  font-size:clamp(1.125rem,1rem + .6vw,1.5rem);font-weight:600;letter-spacing:-.01em;color:#fff;text-decoration:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.12) 50%,transparent 62%) 160% 0/240% 100% no-repeat,linear-gradient(180deg,#b8241a,#951b13);
  box-shadow:0 0 0 1px rgba(255,140,120,.35) inset,0 24px 60px -16px rgba(217,45,32,.7);transition:transform .2s var(--ease)}
.p-app-cta .ic{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.p-app-cta:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.p-app-cta:hover{transform:translateY(-2px)}.p-app-cta:hover .ic{transform:translateX(4px)}}
@keyframes p-app-luz{0%,55%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
@media (min-width:768px){
  .p-app-pills{gap:12px;padding-bottom:72px}
  .p-app-pill{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 16px;border-radius:999px}
  .p-app-pill b{font-size:1rem}
  .p-app-cta{min-height:120px;border-radius:40px}
}

/* ---------- movimento (só quem não pediu menos movimento) ---------- */
@media (prefers-reduced-motion:no-preference){
  .p-app-dev-cel{animation:p-app-flut 7s ease-in-out infinite}
  .p-app-tiles li::before{animation:p-app-acende 12s calc(var(--k) * 1s) infinite both}
  .p-app-barra i{animation:p-app-anda 8s var(--ease) infinite}
  .p-app-pills li .p-app-pill::before,.p-app-pills li .p-app-pill-d,
  .p-app-bar-cel .lp-cel-tela img.p-app-bar-tela{opacity:0;animation:p-app-vez 12s calc((var(--k) - 5) * 2.4s) infinite}
  .p-app-pills li:nth-child(3) .p-app-pill{color:var(--red-hi)}
  .p-app-cta{animation:p-app-luz 4.5s ease-in-out infinite}
}
@keyframes p-app-flut{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){
  .js-ok .p-app-b--a .p-app-toasts li{transform:none;transition:opacity .3s}
  .js-ok .p-app-b--b .p-app-b-cel{transform:translate(-50%,46%);transition:none}
  .p-app-ins-tela{transform:none;transition:opacity .25s}
}

/* a luz atrás do sino e do celular da sanfona só passa da caixa onde há margem de sobra (no celular estourava a página) */
@media (min-width:1200px){
  .p-app-av-med::before{inset:-6% -10%}
  .p-app-ins-cel::before{inset:20% -30% -10%}
}