/* InforAlvelos · faixa "Proteja-se das burlas": telemovel 3D com SMS falso e carimbo FALSO.
   Respeita "reduzir movimento" do sistema e o modo calmo do proprio site (.calm-mode). */
.burlas{border-top:1px solid var(--line)}
.burlas-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:center}
.burlas-copy h2{font-size:clamp(36px,4.1vw,62px);margin:22px 0 0;line-height:1.08}
.burlas-copy h2 em{color:var(--red)}
.burlas-lead{color:var(--muted);font-size:16px;line-height:1.7;max-width:34em;margin:24px 0 32px}
.burlas-actions{display:flex;gap:16px;flex-wrap:wrap}
.burlas-ghost{border:1px solid var(--line);color:var(--ink)}
.burlas-ghost:hover{border-color:var(--red);transform:translateY(-2px)}

.burlas-art{position:relative}
.burlas-art:before{content:'';position:absolute;inset:30px 0 60px;background:radial-gradient(ellipse at 60% 45%,rgba(255,68,68,.18),transparent 62%);z-index:-1;filter:blur(6px)}
.bur-caption{text-align:center;color:var(--muted);font-size:12px;margin-top:20px;letter-spacing:.04em}

.bur-scene{perspective:1150px;display:grid;place-items:center;min-height:560px}
.bur-phone{position:relative;width:266px;height:540px;border-radius:42px;padding:13px;
  background:linear-gradient(155deg,#2b2e2a,#0e100e 70%);
  border:1px solid #3c403a;
  box-shadow:26px 36px 64px rgba(0,0,0,.55),inset 0 0 0 2px #000,0 0 0 1px #40443e;
  transform:rotateY(-20deg) rotateX(7deg);
  transform-style:preserve-3d;transform-origin:center}
.bur-screen{position:relative;height:100%;border-radius:30px;background:#0b0c0b;overflow:hidden;padding:46px 15px 20px;display:flex;flex-direction:column;gap:12px}
.bur-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:84px;height:7px;border-radius:5px;background:#24271f;z-index:4}
.bur-smshead{display:flex;align-items:center;gap:11px;padding:0 2px 13px;border-bottom:1px solid #1c1f1b}
.bur-avatar{width:36px;height:36px;border-radius:50%;background:#c92a2a;color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.bur-smshead b{display:block;font-size:15px;color:#f2f1eb}
.bur-smshead small{color:#8b9085;font-size:11px}
.bur-bubbles{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.bur-bubble{max-width:92%;align-self:flex-start;background:#20241f;border:1px solid #2b2f29;color:#dfe2da;font-size:13.5px;line-height:1.5;padding:11px 13px;border-radius:4px 16px 16px 16px}
.bur-link{color:#ff6a6a;text-decoration:underline;word-break:break-all}
.bur-stamp{position:absolute;top:57%;left:50%;z-index:5;
  font-weight:800;font-size:44px;letter-spacing:.1em;color:#ff3b3b;
  border:4px solid #ff3b3b;border-radius:10px;padding:5px 20px;
  background:rgba(11,12,11,.25);text-transform:uppercase;
  box-shadow:0 0 34px rgba(255,59,59,.4);
  transform:translate(-50%,-50%) rotate(-15deg);opacity:0}

/* estado inicial escondido; so anima quando a faixa entra no ecra (.is-on, dado por burlas.js) */
.burlas .bur-bubble{opacity:0;transform:translateY(16px)}
.burlas.is-on .bur-bubble{animation:bur-in .6s var(--ease) forwards}
.burlas.is-on .bur-bubble.b1{animation-delay:.35s}
.burlas.is-on .bur-bubble.b2{animation-delay:.85s}
.burlas.is-on .bur-phone{animation:bur-float 6.5s ease-in-out 1.9s infinite}
.burlas.is-on .bur-stamp{animation:bur-stamp .75s cubic-bezier(.2,1.25,.3,1) 1.55s forwards}
@keyframes bur-in{to{opacity:1;transform:none}}
@keyframes bur-float{0%,100%{transform:rotateY(-20deg) rotateX(7deg) translateY(0)}50%{transform:rotateY(-15deg) rotateX(5deg) translateY(-12px)}}
@keyframes bur-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scale(2.7)}55%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-15deg) scale(1)}}

@media(max-width:900px){.burlas-wrap{grid-template-columns:1fr;gap:6px}.burlas-art{margin-top:26px}.bur-scene{min-height:510px}}

/* sem movimento: mostrar o estado final de uma vez */
@media(prefers-reduced-motion:reduce){
  .burlas .bur-bubble{opacity:1;transform:none;animation:none}
  .burlas .bur-stamp{opacity:1;animation:none}
  .burlas.is-on .bur-phone{animation:none}
}
.calm-mode .burlas .bur-bubble{opacity:1;transform:none;animation:none}
.calm-mode .burlas .bur-stamp{opacity:1;animation:none}
.calm-mode .burlas .bur-phone{animation:none}