/* =========================================================
   KOVIRA — DEMONSTRAÇÃO 3D
   1) efeitos de Halloween nos botões de segmento
   2) celular da página (2D animado, leve no celular)
   3) mini-site que vai dentro dos celulares
   4) celular 3D da tela cheia (estilo iPhone 17, símbolo de pera)
   5) visualização em tela cheia
   As cores dos efeitos ficam nas variáveis --fx-* logo abaixo.
   ========================================================= */

:root {
  --fx-1: #FF7A1A;   /* abóbora */
  --fx-2: #FFC861;   /* luz de vela */
  --fx-3: #B48CFF;   /* roxo de bruxa */
  --fx-4: #7CFF8A;   /* verde de poção */
  --fx-deep: #7B3FE4;
  --fx-ink: #1A0B2E;
}

@property --fxa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fxSpin { to { --fxa: 360deg; } }

/* =========================================================
   1) BOTÕES DE SEGMENTO
   ========================================================= */
@media (max-width: 639px) {
  /* espaço para o brilho não ser cortado na faixa que rola para o lado */
  #demo-chips.chips--scroll { padding: 14px 8px 16px; margin: -12px -8px -6px; }
}
#demo-chips .chip span { position: relative; isolation: isolate; }
#demo-chips .chip span::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 13px; padding: 1.5px;
  background: conic-gradient(from var(--fxa), var(--fx-1), var(--fx-2), var(--fx-3), var(--fx-4), var(--fx-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}

/* passar o mouse: brilho de Halloween (ainda sem o tema completo) */
@media (hover: hover) {
  #demo-chips .chip:hover input:not(:checked) + span {
    border-color: transparent; background: #21174A; color: #FFF3E2; transform: translateY(-2px);
    animation: fxGlow 1.8s ease-in-out infinite alternate;
  }
  #demo-chips .chip:hover input:not(:checked) + span::before { opacity: 1; animation: fxSpin 2.6s linear infinite; }
  #demo-chips .chip:hover input:not(:checked) + span .ico { color: var(--fx-2); filter: drop-shadow(0 0 6px rgba(255,200,97,.85)); }
}
@keyframes fxGlow {
  0%   { box-shadow: 0 0 14px rgba(255,122,26,.55), 0 0 32px rgba(255,122,26,.18); }
  50%  { box-shadow: 0 0 16px rgba(180,140,255,.6), 0 0 36px rgba(180,140,255,.2); }
  100% { box-shadow: 0 0 16px rgba(124,255,138,.45), 0 0 32px rgba(255,200,97,.22); }
}

/* depois do clique: tema de Halloween completo, por dentro e na borda */
#demo-chips .chip.is-picked input:checked + span {
  border-color: transparent; color: #FFF6E5; text-shadow: 0 1px 0 rgba(26,11,46,.55);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255,200,97,.6), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(123,63,228,.9), transparent 70%),
    linear-gradient(120deg, #FF7A1A 0%, #E0560A 48%, #6A2FCF 100%);
}
#demo-chips .chip.is-picked input:checked + span::before { opacity: 0; animation: none; }
/* camadas do efeito (criadas pelo demo3d.js): brilho que pulsa, anel que gira e reflexo que passa */
.chip__fx { position: absolute; inset: -2px; z-index: -1; border-radius: 14px; pointer-events: none; }
.chip__glow { position: absolute; inset: 2px; border-radius: 12px; box-shadow: 0 6px 24px -3px rgba(255,140,40,.95), 0 0 38px rgba(123,63,228,.6); animation: fxPulse 2.2s ease-in-out infinite; }
.chip__fx .fxs { inset: 2px; border-radius: 12px; }
@keyframes fxPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#demo-chips .chip.is-picked input:checked + span .ico { color: #FFE7B0; filter: drop-shadow(0 0 6px rgba(255,214,140,.9)); }
#demo-chips .chip.is-pop input:checked + span { animation: fxPop .6s cubic-bezier(.2,1.6,.4,1); }
.chip__pk {
  position: absolute; right: -10px; top: -14px; width: 26px; height: 25px; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255,150,40,.9)); animation: fxPkIn .7s cubic-bezier(.2,1.7,.4,1) both, fxBob 2.4s ease-in-out .7s infinite;
}
.chip__pk svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* anel giratório e reflexo — só transform, a placa de vídeo faz sozinha (não trava no celular) */
.fxr { position: absolute; inset: 0; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fxr > i { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: conic-gradient(var(--fx-2), var(--fx-1), var(--fx-3), var(--fx-4), var(--fx-2)); animation: fxRot 2.8s linear infinite; }
.fxs { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fxs > i { position: absolute; top: -30%; bottom: -30%; left: 0; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-140%) skewX(-16deg); animation: fxSweep 2.8s ease-in-out infinite; }
@keyframes fxRot { to { transform: rotate(360deg); } }
@keyframes fxSweep { 0% { transform: translateX(-140%) skewX(-16deg); } 60%, 100% { transform: translateX(360%) skewX(-16deg); } }
@keyframes fxPop { 0% { transform: scale(.84); } 55% { transform: scale(1.12) rotate(-1.5deg); } 100% { transform: scale(1); } }
@keyframes fxPkIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fxBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }

/* partículas da explosão do clique */
#fx-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.fx-p { position: absolute; display: block; border-radius: 50%; will-change: transform, opacity; }
.fx-p--bat { width: 30px; height: 14px; border-radius: 0; color: var(--fx-3); filter: drop-shadow(0 0 6px rgba(180,140,255,.9)); }
.fx-p--pk { width: 22px; height: 21px; border-radius: 0; filter: drop-shadow(0 0 8px rgba(255,150,40,.9)); }
.fx-p svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-ring { position: absolute; display: block; border-radius: 16px; border: 2px solid var(--fx-2); box-shadow: 0 0 18px var(--fx-1), inset 0 0 14px rgba(255,122,26,.5); }

/* botão Visualizar (aparece depois de escolher o segmento) */
.vz-open-wrap { margin-top: -.25rem; }
.vz-open {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: .9rem;
  width: 100%; max-width: 460px; padding: .8rem .9rem .8rem .8rem; border: 0; border-radius: 18px; cursor: pointer; text-align: left;
  color: #F6EEDF; font: inherit;
  background: radial-gradient(90% 140% at 0% 0%, rgba(255,122,26,.28), transparent 60%), linear-gradient(135deg, #2A1259, #170D38);
  box-shadow: 0 18px 40px -18px rgba(255,122,26,.75), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  animation: fxIn .7s cubic-bezier(.2,1.4,.4,1) both;
}
.vz-open .fxr { padding: 1.5px; }
.vz-open .fxr > i { animation-duration: 3.2s; }
.vz-open .fxs > i { background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); animation-duration: 3.4s; }
.vz-open > :not(.fxr):not(.fxs) { position: relative; }
.vz-open:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgba(255,140,40,.9), 0 0 0 1px rgba(255,255,255,.06) inset; }
.vz-open:focus-visible { outline: 3px solid var(--fx-2); outline-offset: 3px; }
.vz-open__ico { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--fx-ink); background: linear-gradient(135deg, #FFB347, #FF7A1A 55%, #E0560A); box-shadow: 0 0 24px rgba(255,122,26,.6); }
.vz-open__ico svg { width: 28px; height: 28px; }
.vz-open__txt { min-width: 0; }
.vz-open__txt b { display: block; font: 700 1.14rem/1.2 var(--f-display); letter-spacing: -.01em; }
.vz-open__txt small { display: block; margin-top: .15rem; font-size: .9rem; color: #C9BFDD; line-height: 1.35; }
.vz-open__txt em { font-style: normal; color: var(--fx-2); font-weight: 600; overflow-wrap: anywhere; }
.vz-open__go { flex: none; margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(246,238,223,.08); transition: transform .25s, background-color .25s, color .25s; }
.vz-open__go svg { width: 20px; height: 20px; }
.vz-open:hover .vz-open__go { transform: translateX(4px); background: var(--fx-1); color: var(--fx-ink); }
@keyframes fxIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* =========================================================
   2) CELULAR DA PÁGINA — 2D, animado só com transform (leve)
   Medidas de projeto: 410 x 870 px (reduzido com scale).
   ========================================================= */
.stage__phone { position: relative; width: min(320px, 76vw); margin: 0 auto; }
.ph2 { position: relative; pointer-events: none; }
.ph2-fit { position: relative; margin: 0 auto; }
.ph2-float { position: absolute; inset: 0; animation: ph2Float 6.5s ease-in-out infinite; }
.ph2-pop { position: absolute; inset: 0; }
.ph2-pop.is-pop { animation: ph2Pop .7s cubic-bezier(.2,1.5,.4,1); }
.ph2-scale { position: absolute; left: 0; top: 0; width: 410px; height: 870px; transform-origin: 0 0; }
.ph2-frame {
  position: absolute; inset: 0; border-radius: 66px;
  background: linear-gradient(140deg, #FFC08F 0%, #F2782A 16%, #C4511A 44%, #E86A22 70%, #FFB27A 88%, #C4511A 100%);
  box-shadow: 0 46px 70px -34px rgba(0,0,0,.9), 0 0 60px -14px rgba(255,122,26,.5), inset 0 0 0 1.5px rgba(255,220,190,.85);
}
.ph2-glass { position: absolute; inset: 5px; border-radius: 61px; background: #050507; }
.ph2-glass > .ph-screen { inset: 4px; border-radius: 57px; }
.ph2-btn { position: absolute; width: 6px; border-radius: 3px; background: linear-gradient(90deg, #8F3A0E, #FF9A55 55%, #B84A12); }
.ph2-glare { position: absolute; inset: 0; border-radius: 66px; overflow: hidden; pointer-events: none; z-index: 12; }
.ph2-glare i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.17) 45%, rgba(255,255,255,.04) 62%, transparent); transform: translateX(-130%) skewX(-12deg); animation: ph2Glare 7s ease-in-out 1s infinite; }
.ph2-shadow { position: absolute; left: 14%; right: 14%; bottom: -34px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent), radial-gradient(closest-side, rgba(255,122,26,.4), transparent); filter: blur(6px); animation: ph2Shadow 6.5s ease-in-out infinite; }
@keyframes ph2Float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(1.6deg); } }
@keyframes ph2Shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .7; } }
@keyframes ph2Glare { 0% { transform: translateX(-130%) skewX(-12deg); } 45%, 100% { transform: translateX(340%) skewX(-12deg); } }
@keyframes ph2Pop { 0% { transform: scale(.93) rotate(-2deg); } 50% { transform: scale(1.035) rotate(1deg); } 100% { transform: none; } }
/* o site dentro do celular da página rola sozinho, devagar */
.ph2 .rs-body { animation: rsAuto 18s ease-in-out 2.2s infinite; }
.ph2 .rs.is-new { animation: rsIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rsAuto { 0%, 16% { transform: translate3d(0,0,0); } 46%, 60% { transform: translate3d(0, var(--rs-auto, -600px), 0); } 90%, 100% { transform: translate3d(0,0,0); } }
@keyframes rsIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ph2.is-off .ph2-float, .ph2.is-off .ph2-shadow, .ph2.is-off .ph2-glare i, .ph2.is-off .rs-body,
.ph2.is-off .rs-pill i::after, .ph2.is-off .rs-pin::before { animation-play-state: paused; }

/* partes da tela usadas pelos dois celulares */
.ph-screen { position: absolute; overflow: hidden; background: #000; isolation: isolate; }
.ph-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; padding: 19px 34px 0 42px; display: flex; justify-content: space-between; align-items: flex-start; font: 600 16px/1 -apple-system, "SF Pro Text", "DM Sans", sans-serif; color: var(--sb, #fff); z-index: 8; pointer-events: none; }
.ph-status__r { display: flex; gap: 6px; align-items: center; }
.ph-status svg { height: 12px; width: auto; display: block; fill: currentColor; }
.ph-island { position: absolute; left: 50%; top: 11px; width: 122px; height: 36px; margin-left: -61px; border-radius: 20px; background: #000; z-index: 9; pointer-events: none; }
.ph-island::after { content: ""; position: absolute; right: 22px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b2f4a, #08090f 70%); }
.ph-wa { position: absolute; right: 18px; bottom: 34px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 22px -8px rgba(0,0,0,.55); z-index: 7; pointer-events: none; }
.ph-wa svg { width: 30px; height: 30px; display: block; }
.ph-home { position: absolute; left: 50%; bottom: 9px; width: 138px; height: 5px; margin-left: -69px; border-radius: 3px; background: var(--sb, #fff); opacity: .6; z-index: 9; pointer-events: none; }

/* =========================================================
   3) MINI-SITE DENTRO DO CELULAR (largura de projeto: 392 px)
   Sem backdrop-filter e sem animações de pintura: só transform/opacity.
   ========================================================= */
.rs { position: absolute; inset: 0; overflow: hidden; background: var(--s-bg); color: var(--s-fg); font-family: var(--f-body); font-size: 15px; line-height: 1.5; text-align: left; }
.rs * { box-sizing: border-box; }
.rs svg { display: block; }
.rs-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 58px 22px 13px; background: var(--s-bg); border-bottom: 1px solid var(--s-line); box-shadow: 0 10px 22px -18px rgba(0,0,0,.6); }
.rs-mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--s-accent); color: var(--s-accent-fg); font: 700 17px var(--s-head); }
.rs-hname { flex: 1; min-width: 0; font: 700 16px var(--s-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-burger { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.2px var(--s-line); }
.rs-burger i { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.rs-burger i::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
.rs-view { position: absolute; inset: 0; overflow: hidden; }
.rs-body { position: relative; padding-top: 106px; }

.rs-hero { padding: 24px 22px 6px; }
.rs-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--s-soft); }
.rs-pill i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2BD46B; }
.rs-pill i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2BD46B; animation: rsRing 1.8s ease-out infinite; }
@keyframes rsRing { from { transform: scale(1); opacity: .65; } to { transform: scale(2.8); opacity: 0; } }
.rs-kicker { margin-top: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-kick); }
.rs-name { margin: 8px 0 0; font: 700 44px/1 var(--s-head); letter-spacing: -.025em; overflow-wrap: anywhere; }
.rs-title { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--s-muted); }
.rs-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rs-btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 18px; border-radius: 13px; background: var(--s-accent); color: var(--s-accent-fg); font: 600 14.5px var(--f-display); }
.rs-btn svg { width: 17px; height: 17px; }
.rs-btn--ghost { background: transparent; color: var(--s-fg); box-shadow: inset 0 0 0 1.4px var(--s-line); }
.rs-art { position: relative; margin-top: 22px; height: 214px; border-radius: 22px; overflow: hidden; background: var(--s-soft); }
.rs-art__pat { position: absolute; inset: 0; }
.rs-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.28)); }
.rs-art__badge { position: absolute; right: 18px; top: 18px; z-index: 1; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: var(--s-accent-fg); box-shadow: 0 12px 24px -10px rgba(0,0,0,.55); }
.rs-art__badge svg { width: 36px; height: 36px; }
.rs-art__chip { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px; background: var(--s-bg); color: var(--s-fg); font-size: 13px; font-weight: 600; }
.rs-art__chip svg { width: 15px; height: 15px; color: var(--s-accent); }
.rs-sec { padding: 36px 22px 0; }
.rs-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-kick); }
.rs-h { margin: 6px 0 0; font: 700 26px/1.12 var(--s-head); letter-spacing: -.015em; }
.rs-svcs { display: grid; gap: 10px; margin-top: 16px; }
.rs-svc { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 17px; background: var(--s-soft); }
.rs-svc__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--s-bg); color: var(--s-accent); }
.rs-svc__ico svg { width: 22px; height: 22px; }
.rs-svc b { display: block; font: 700 15.5px/1.25 var(--s-head); }
.rs-svc span { display: block; font-size: 13px; line-height: 1.35; color: var(--s-muted); margin-top: 2px; }
.rs-svc em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--s-kick); background: var(--s-bg); padding: 5px 9px; border-radius: 99px; white-space: nowrap; }
.rs-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.rs-tile { position: relative; margin: 0; aspect-ratio: 1 / 1.08; border-radius: 18px; overflow: hidden; }
.rs-tile > span { position: absolute; left: 50%; top: 44%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.rs-tile > span svg { width: 26px; height: 26px; }
.rs-tile figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 10px; background: var(--s-bg); color: var(--s-fg); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-sec--soft { margin-top: 36px; padding: 30px 22px; background: var(--s-soft); }
.rs-dif { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.rs-dif li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 15px; }
.rs-dif li svg { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--s-accent); color: var(--s-accent-fg); }
.rs-sobre { margin-top: 16px; color: var(--s-muted); font-size: 14.5px; }
.rs-sec--soft + .rs-sec { padding-top: 32px; }
.rs-map { position: relative; margin-top: 16px; height: 176px; border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 52px, var(--s-line) 52px 60px), repeating-linear-gradient(0deg, transparent 0 44px, var(--s-line) 44px 52px), var(--s-soft); }
.rs-road { position: absolute; left: -15%; top: 50%; width: 130%; height: 16px; margin-top: -8px; background: var(--s-accent); opacity: .32; transform: rotate(-28deg); }
.rs-road--2 { height: 10px; opacity: .18; transform: rotate(62deg); }
.rs-pin { position: absolute; left: 50%; top: 46%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: var(--s-accent-fg); isolation: isolate; }
.rs-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--s-accent); animation: rsRing 2s ease-out infinite; }
.rs-pin svg { width: 24px; height: 24px; }
.rs-map__lbl { position: absolute; left: 50%; top: calc(46% + 32px); transform: translateX(-50%); max-width: 80%; padding: 6px 11px; border-radius: 10px; background: var(--s-bg); color: var(--s-fg); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.rs-info { display: grid; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--s-muted); }
.rs-info span { display: flex; gap: 9px; align-items: center; }
.rs-info svg { width: 18px; height: 18px; color: var(--s-accent); flex: none; }
.rs-cta { margin: 36px 22px 0; padding: 28px 22px; border-radius: 24px; background: var(--s-accent); color: var(--s-accent-fg); text-align: center; position: relative; overflow: hidden; }
.rs-cta::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); }
.rs-cta h4 { position: relative; margin: 0; font: 700 23px/1.15 var(--s-head); }
.rs-cta .rs-btn { position: relative; margin-top: 16px; background: var(--s-bg); color: var(--s-fg); }
.rs-foot { padding: 30px 22px 104px; text-align: center; font-size: 12.5px; color: var(--s-muted); }
.rs-foot b { display: block; font: 700 16px var(--s-head); color: var(--s-fg); margin-bottom: 4px; }
/* surgir ao rolar (só no celular da tela cheia) */
.p3 .rs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.p3 .rs-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   4) CELULAR 3D DA TELA CHEIA
   A lateral é feita de tiras finas (e não de camadas do tamanho do celular):
   gasta pouca memória de vídeo e não pisca no Android.
   ========================================================= */
.p3 { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: grab; touch-action: none; }
.p3.is-grabbing { cursor: grabbing; }
.p3-fit { position: relative; flex: none; }
.p3-persp { position: absolute; left: 0; top: 0; width: 410px; height: 870px; transform-origin: 0 0; -webkit-perspective: 2600px; perspective: 2600px; -webkit-perspective-origin: 50% 46%; perspective-origin: 50% 46%; }
.p3-body { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.p3-s { position: absolute; display: block; }
.p3-front, .p3-back { position: absolute; inset: 0; border-radius: 66px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.p3-front { -webkit-transform: translateZ(23px); transform: translateZ(23px); background: #050507; box-shadow: inset 0 0 0 2px rgba(255,190,140,.85), inset 0 0 0 4.5px #0a0a0c; }
.p3-front > .ph-screen { inset: 9px; border-radius: 57px; cursor: ns-resize; }
.p3-front > .ph-screen.is-dragging { cursor: grabbing; }
.p3-glare { position: absolute; inset: 0; border-radius: 66px; overflow: hidden; pointer-events: none; z-index: 12; }
.p3-glare i { will-change: transform; position: absolute; top: -10%; bottom: -10%; left: 25%; width: 50%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.14) 45%, rgba(255,255,255,.04) 62%, transparent); }
.p3-back {
  -webkit-transform: rotateY(180deg) translateZ(23px); transform: rotateY(180deg) translateZ(23px); overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    radial-gradient(120% 70% at 18% 8%, rgba(255,190,140,.55), transparent 55%),
    linear-gradient(162deg, #F47E30 0%, #E2661F 52%, #C4511A 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,214,180,.7), inset 0 0 40px rgba(120,40,0,.25);
}
.p3-back .p3-glare i { background: linear-gradient(105deg, transparent, rgba(255,255,255,.22) 45%, transparent); }
.p3-back__glass { position: absolute; left: 0; right: 0; top: 262px; bottom: 0; display: grid; place-items: center; padding-bottom: 120px; background: linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%, rgba(90,30,0,.08)); border-top: 1px solid rgba(255,220,190,.25); }
.p3-pear { width: 96px; height: auto; display: block; }
.p3-plat { position: absolute; left: 0; right: 0; top: 0; height: 248px; border-radius: 66px 66px 48px 48px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-transform: translateZ(-29.5px) rotateY(180deg); transform: translateZ(-29.5px) rotateY(180deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(90% 90% at 25% 15%, rgba(255,200,150,.55), transparent 60%),
    linear-gradient(170deg, #F88A3C, #E26A22);
  box-shadow: inset 0 0 0 1.5px rgba(255,220,190,.75), inset 0 -10px 24px rgba(120,40,0,.25); }
.p3-lens { position: absolute; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle, #0b0c13 0 28%, #1d2135 29% 36%, #06070b 37% 55%, #2a2a30 56% 69%, #55555d 70% 76%, #18181c 77% 100%);
  box-shadow: 0 0 0 3px rgba(150,60,10,.6), 0 8px 16px rgba(80,25,0,.45), inset 0 0 0 1px rgba(255,255,255,.14); }
.p3-lens::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(180,160,255,.95), rgba(70,90,210,.45) 32%, transparent 62%); opacity: .75; }
.p3-lens::before { content: ""; position: absolute; left: 30%; top: 24%; width: 12%; height: 12%; border-radius: 50%; background: rgba(255,255,255,.85); z-index: 1; }
.p3-l1 { left: 24px; top: 22px; } .p3-l2 { left: 24px; top: 136px; } .p3-l3 { left: 118px; top: 79px; }
.p3-flash { position: absolute; right: 44px; top: 42px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, #FFF8E2 0 28%, #EADBA9 30% 58%, #8a6d3f 60%); box-shadow: 0 0 0 2px rgba(150,60,10,.5); }
.p3-lidar { position: absolute; right: 44px; top: 156px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, #24242c 0 48%, #0a0a0d 50%); box-shadow: 0 0 0 2px rgba(150,60,10,.5); }
.p3-mic { position: absolute; right: 57px; top: 112px; width: 10px; height: 10px; border-radius: 50%; background: #5a250a; }
.p3-btn { position: absolute; display: block; border-radius: 6px; background: linear-gradient(90deg, #B84A12, #FF9A55 50%, #B84A12); }
.p3-btn--cam { background: linear-gradient(90deg, #3a2a24, #7a6a62 50%, #3a2a24); }
.p3-shadow { position: absolute; left: 13%; right: 13%; bottom: -34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent), radial-gradient(closest-side, rgba(255,122,26,.35), transparent); filter: blur(7px); will-change: transform; }

/* =========================================================
   5) VISUALIZAÇÃO EM TELA CHEIA
   O fundo borrado é o próprio site com filtro (calculado uma vez);
   as animações do site ficam pausadas enquanto a tela cheia está aberta.
   ========================================================= */
html.vz-aberto { overflow: hidden; overscroll-behavior: none; }
html.vz-aberto body { overscroll-behavior: none; }
html.vz-aberto body > :not(.vz):not(#fx-layer) { filter: blur(9px) saturate(1.15); }
html.vz-aberto body > :not(.vz):not(#fx-layer),
html.vz-aberto body > :not(.vz):not(#fx-layer) *,
html.vz-aberto body > :not(.vz):not(#fx-layer) *::before,
html.vz-aberto body > :not(.vz):not(#fx-layer) *::after { animation-play-state: paused !important; }
html.vz-aberto .wa-float, html.vz-aberto .cookie { visibility: hidden; }
.vz { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(18px, env(safe-area-inset-bottom, 0px)); color: #F6EEDF; touch-action: none; overscroll-behavior: contain; }
.vz[hidden] { display: none !important; }
.vz__bg { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .4s ease;
  background:
    radial-gradient(55% 45% at 50% 58%, rgba(255,122,26,.26), transparent 70%),
    radial-gradient(45% 40% at 85% 8%, rgba(123,63,228,.38), transparent 70%),
    radial-gradient(40% 35% at 10% 90%, rgba(123,63,228,.28), transparent 70%),
    rgba(9,5,24,.58); }
.vz__embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.vz.is-open .vz__bg, .vz.is-open .vz__embers { opacity: 1; }
.vz__ember { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background: #FFB347; box-shadow: 0 0 10px 2px rgba(255,122,26,.8); opacity: 0; animation: vzEmber linear infinite; }
@keyframes vzEmber { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translate3d(var(--dx, 30px), -105vh, 0); opacity: 0; } }
.vz__top { text-align: center; max-width: 680px; opacity: 0; transform: translateY(-14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,1,.3,1); }
.vz__actions { max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,1,.3,1); }
.vz.is-open .vz__top { opacity: 1; transform: none; transition-delay: .1s; }
.vz.is-open .vz__actions { opacity: 1; transform: none; transition-delay: .18s; }
.vz__kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255,122,26,.16); border: 1px solid rgba(255,140,40,.45); color: var(--fx-2); font: 600 .82rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.vz__kicker svg { width: 16px; height: 16px; }
.vz__title { margin-top: .55rem; font: 700 clamp(1.2rem, 2.6vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.02em; }
.vz__title span { color: #FF9A45; overflow-wrap: anywhere; }
.vz__hint { margin-top: .35rem; color: #D2C8E6; font-size: .92rem; }
.vz__stage { position: relative; width: 100%; height: 100%; min-height: 0; }
.vz__stage > .p3 { transform: translateY(46px) scale(.9); opacity: 0; transition: opacity .4s ease, transform .75s cubic-bezier(.2,1,.3,1); }
.vz.is-open .vz__stage > .p3 { transform: none; opacity: 1; }

/* botão de sair */
.vz-exit { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .75rem; min-height: 58px; padding: .45rem 1.15rem .45rem .5rem; border: 0; border-radius: 999px; cursor: pointer; color: #F6EEDF; font: inherit; text-align: left;
  background: rgba(22,13,52,.92); box-shadow: 0 14px 34px -16px rgba(0,0,0,.8); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.vz-exit .fxr { padding: 1.5px; }
.vz-exit > :not(.fxr) { position: relative; }
.vz-exit:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(255,122,26,.12), 0 18px 40px -14px rgba(255,122,26,.65); }
.vz-exit:focus-visible { outline: 3px solid var(--fx-2); outline-offset: 4px; }
.vz-exit__x { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--fx-ink); background: linear-gradient(135deg, #FFB347, #FF7A1A 55%, #E0560A); box-shadow: 0 0 20px rgba(255,122,26,.55); transition: transform .4s cubic-bezier(.2,1.4,.4,1); }
.vz-exit__x svg { width: 20px; height: 20px; }
.vz-exit:hover .vz-exit__x { transform: rotate(90deg) scale(1.06); }
.vz-exit__txt b { display: block; font: 700 1rem/1.15 var(--f-display); }
.vz-exit__txt small { display: block; font-size: .8rem; color: #BDB3D1; }
.vz-exit kbd { margin-left: .35rem; font: 600 .72rem var(--f-body); padding: .2rem .45rem; border-radius: 6px; border: 1px solid rgba(246,238,223,.28); color: #C9BFDD; }
.vz-cta { min-height: 58px; border-radius: 999px; }
.vz-cta__s { display: none; }
@media (pointer: coarse) { .vz-exit kbd { display: none; } }
@media (max-width: 520px) {
  .vz { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .vz__hint { font-size: .84rem; }
  .vz__actions { gap: .5rem; width: 100%; flex-wrap: nowrap; }
  .vz-exit { min-height: 52px; padding-right: .95rem; }
  .vz-exit__x { width: 40px; height: 40px; }
  .vz-exit__txt small { display: none; }
  .vz-exit__txt b { font-size: .9rem; white-space: nowrap; }
  .vz-cta { min-height: 52px; padding: .6rem 1.1rem; font-size: .98rem; white-space: nowrap; }
  .vz-cta__l { display: none; }
  .vz-cta__s { display: inline; }
}
@media (max-width: 380px) {
  .vz-exit { gap: .5rem; padding: .35rem .8rem .35rem .35rem; }
  .vz-exit__x { width: 36px; height: 36px; }
  .vz-exit__txt b { font-size: .84rem; }
  .vz-cta { padding: .5rem .9rem; font-size: .92rem; gap: .45rem; }
}
@media (max-height: 640px) { .vz__hint { display: none; } }

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  #demo-chips .chip span::before, .fxr > i, .fxs > i, .chip__glow { animation: none !important; }
  .fxs { display: none; }
  #demo-chips .chip span, .chip__pk, .vz-open, .vz__ember,
  .ph2-float, .ph2-shadow, .ph2-glare i, .ph2 .rs-body, .ph2-pop, .rs-pill i::after, .rs-pin::before { animation: none !important; }
  .p3 .rs-reveal { opacity: 1; transform: none; }
}