/* =========================================================
   VYLLORRI — movimento: aparelhos vivos, demonstrações e fotos
   (carregado depois de style.css)
   ========================================================= */
:root{--demo:7s}

/* Aparelhos flutuando (parallax entra pelas variáveis --px/--py) */
.laptop{animation:lapIn 1.4s var(--ease) .35s forwards,floatL 7s ease-in-out 1.75s infinite}
.phone{animation:phoneIn 1.2s var(--ease) 1s forwards,floatP 6s ease-in-out 2.2s infinite}
@keyframes floatL{0%,100%{translate:var(--px,0px) var(--py,0px)}50%{translate:var(--px,0px) calc(var(--py,0px) - 14px)}}
@keyframes floatP{0%,100%{translate:var(--px,0px) var(--py,0px)}50%{translate:var(--px,0px) calc(var(--py,0px) - 22px)}}
.laptop .shadow{position:absolute;left:10%;right:10%;bottom:-7%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(11,28,63,.32),transparent);filter:blur(4px);animation:shadowP 7s ease-in-out 1.75s infinite;z-index:-1}
@keyframes shadowP{50%{transform:scaleX(.88);opacity:.55}}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:7;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 46%,transparent 54%);background-size:260% 100%;background-position:130% 0;animation:glare 8s ease-in-out 2.5s infinite}
@keyframes glare{0%,70%{background-position:130% 0}100%{background-position:-60% 0}}
.hero .stage{translate:0 calc(var(--sc,0) * 70px);scale:calc(1 - var(--sc,0) * .06)}

/* Título com brilho correndo */
.h-hero .w.hl{background:linear-gradient(100deg,var(--blue),#2f8cff,var(--cyan),#2f8cff,var(--blue));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:wordIn 1s var(--ease) calc(.15s + var(--i)*.1s) forwards,shine 6s linear 2s infinite}
@keyframes shine{to{background-position:-200% 0}}

/* Demonstração no notebook: cursor, clique, preenchimento e notificação */
.cursor{position:absolute;left:0;top:0;width:2.4cqw;height:auto;z-index:8;pointer-events:none;filter:drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.35));animation:cur var(--demo) var(--ease) both}
@keyframes cur{
  0%{transform:translate(var(--sx),var(--sy));opacity:0}
  8%{opacity:1}
  30%{transform:translate(var(--tx),var(--ty))}
  34%{transform:translate(var(--tx),var(--ty)) scale(.8)}
  38%{transform:translate(var(--tx),var(--ty)) scale(1)}
  62%{transform:translate(var(--ex),var(--ey));opacity:1}
  72%,100%{transform:translate(var(--ex),var(--ey));opacity:0}}
.ripple{position:absolute;left:var(--tx);top:var(--ty);width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;background:var(--c);z-index:7;pointer-events:none;opacity:0;animation:rip var(--demo) ease-out both}
@keyframes rip{0%,32%{opacity:0;transform:scale(.2)}35%{opacity:.5;transform:scale(.4)}50%,100%{opacity:0;transform:scale(2.6)}}
[data-target]{position:relative}
[data-target]::after{content:attr(data-fill);position:absolute;inset:0;border-radius:inherit;background:var(--c);color:#fff;display:flex;align-items:center;padding-left:1cqw;font-weight:700;font-size:1cqw;transform-origin:left;animation:fillT var(--demo) var(--ease) both;box-shadow:0 .4cqw 1.2cqw color-mix(in srgb,var(--c) 45%,transparent)}
@keyframes fillT{0%,35%{transform:scaleX(0);opacity:0}43%,100%{transform:none;opacity:1}}
.toast{position:absolute;right:2cqw;top:5.4cqw;z-index:8;display:flex;align-items:center;gap:.8cqw;padding:1cqw 1.6cqw 1cqw 1cqw;border-radius:1.3cqw;background:#fff;box-shadow:0 1.2cqw 3cqw rgba(11,28,63,.25);font-size:1.1cqw;font-weight:700;color:var(--navy);white-space:nowrap;animation:toast var(--demo) var(--ease) both}
.toast b{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:1.3cqw;flex:none}
.toast small{display:block;font-weight:500;color:var(--muted);font-size:.9cqw}
@keyframes toast{0%,44%{opacity:0;transform:translateY(-50%) scale(.92)}50%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-30%)}}
.cards3 i::after{animation:wgrow 1.4s var(--ease) .3s both}
@keyframes wgrow{from{width:0}}
.top .pill{animation:pillP 2.2s ease-in-out infinite}
@keyframes pillP{50%{box-shadow:0 0 0 .6cqw color-mix(in srgb,var(--c) 22%,transparent)}}

/* Celular: fluxo em 3 etapas (escolha → horário → confirmado) */
.ph-ui{display:block;padding:0;background:none}
.ph-track{display:flex;width:300%;height:100%;animation:track var(--demo) var(--ease) both}
@keyframes track{0%,26%{transform:none}32%,58%{transform:translateX(-33.333%)}64%,100%{transform:translateX(-66.666%)}}
.pane{position:relative;width:33.333%;height:100%;padding:5.4cqw 1.8cqw 2cqw;display:flex;flex-direction:column;gap:1.3cqw;background:linear-gradient(180deg,var(--soft),#fff 40%)}
.pane .ph-btn{margin-top:auto}
.ph-item,.ph-times span{position:relative}
.ph-item.pk{animation:pop .6s var(--ease) both,pick var(--demo) var(--ease) both}
@keyframes pick{0%,15%{background:#fff;color:var(--navy);transform:none}19%{transform:scale(.94)}23%,100%{background:var(--c);color:#fff;transform:none}}
.ph-item.pk::before,.ph-times .pk::before{content:"";position:absolute;inset:0;border-radius:inherit;animation:ring var(--demo) ease-out both}
@keyframes ring{0%,16%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}30%,100%{box-shadow:0 0 0 2.2cqw transparent}}
.ph-times span.pk{animation:pick2 var(--demo) var(--ease) both}
.ph-times .pk::before{animation-name:ring2}
@keyframes pick2{0%,44%{background:#fff;color:var(--navy);transform:none}48%{transform:scale(.9)}52%,100%{background:var(--c);color:#fff;transform:none}}
@keyframes ring2{0%,45%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}60%,100%{box-shadow:0 0 0 2.2cqw transparent}}
.pane .ph-btn.go{animation:btnTap var(--demo) var(--ease) both}
@keyframes btnTap{0%,24%{transform:none}26%{transform:scale(.94)}28%,100%{transform:none}}
.pane .ph-btn.go2{animation:btnTap2 var(--demo) var(--ease) both}
@keyframes btnTap2{0%,56%{transform:none}58%{transform:scale(.94)}60%,100%{transform:none}}
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;text-align:center}
.chk{width:9cqw;height:9cqw}
.chk circle{fill:color-mix(in srgb,var(--c) 14%,#fff);stroke:var(--c);stroke-width:3;stroke-dasharray:150;stroke-dashoffset:150;animation:drawC var(--demo) var(--ease) both}
.chk path{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:drawK var(--demo) var(--ease) both}
@keyframes drawC{0%,64%{stroke-dashoffset:150}76%,100%{stroke-dashoffset:0}}
@keyframes drawK{0%,72%{stroke-dashoffset:40}82%,100%{stroke-dashoffset:0}}
.done b{font-family:var(--font-h);font-size:1.8cqw;color:var(--navy);animation:doneIn var(--demo) var(--ease) both}
.done small{font-size:1.15cqw;color:var(--muted);padding:.6cqw 1.2cqw;border-radius:2cqw;background:var(--soft);animation:doneIn var(--demo) var(--ease) both}
@keyframes doneIn{0%,74%{opacity:0;transform:translateY(1cqw)}84%,100%{opacity:1;transform:none}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:40%;left:50%;width:.9cqw;height:.9cqw;border-radius:.2cqw;background:var(--c);opacity:0;animation:conf var(--demo) ease-out both}
.confetti i:nth-child(3n){background:var(--cyan)}
.confetti i:nth-child(4n){background:#ffc845}
@keyframes conf{0%,74%{opacity:0;transform:translate(0,0) rotate(0)}78%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}

/* Faixa animada */
.band{padding:30px 0;overflow:hidden;background:#fff;border-block:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.band-row{display:flex;overflow:hidden;user-select:none}
.band-track{display:flex;flex:none;gap:44px;padding-right:44px;animation:marq 40s linear infinite}
.band-row.rev .band-track{animation-direction:reverse;animation-duration:48s}
.band-track span{display:inline-flex;align-items:center;gap:44px;font-family:var(--font-h);font-weight:800;font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.03em;color:var(--navy);white-space:nowrap}
.band-track span::after{content:"";width:.62em;height:.5em;background:linear-gradient(135deg,var(--light),var(--blue));clip-path:polygon(0 12%,22% 12%,48% 70%,74% 0,100% 0,58% 100%,40% 100%)}
.band-row.rev span{color:transparent;-webkit-text-stroke:1.5px #b9d3ff}
.band-row.rev span::after{opacity:.4}
@keyframes marq{to{transform:translateX(-100%)}}

/* Na prática */
.show-sec{background:#fff}
.show{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:start}
.show-stage{position:sticky;top:100px;order:2;padding:30px 0 40px}
.stage-show{aspect-ratio:1.28}
.stage-show .laptop{opacity:1;transform:rotateY(-9deg) rotateX(3deg);animation:floatL 7s ease-in-out infinite}
.stage-show .phone{opacity:1;transform:rotate(-3deg);animation:floatP 6s ease-in-out infinite}
.stage-show .laptop .shadow{animation-delay:0s}
.stage-show .stage-note{bottom:-6%;right:2%}
.show-prog{display:flex;gap:8px;justify-content:center;margin-top:34px}
.show-prog i{width:8px;height:8px;border-radius:99px;background:var(--sky-2);transition:width .5s var(--ease),background .5s}
.show-prog i.on{width:30px;background:var(--c)}
.stories{display:flex;flex-direction:column}
.story{min-height:82vh;display:flex;align-items:center;padding:30px 0}
.story-in{width:100%;opacity:.28;transform:translateY(24px) scale(.97);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.story.on .story-in{opacity:1;transform:none}
.story-photo{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/10;margin-bottom:24px;box-shadow:var(--shadow-lg)}
.story-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.6s var(--ease)}
.story.on .story-photo img{transform:scale(1)}
.story-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--c) 55%,rgba(11,28,63,.6)))}
.story-tag{position:absolute;left:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-h);font-weight:700;font-size:.9rem;color:var(--navy)}
.story-tag b{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center}
.story-tag b svg{width:16px;height:16px}
.story-num{font-family:var(--font-h);font-weight:800;font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--c);display:block;margin-bottom:8px}
.story h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:10px}
.story p{color:var(--muted);font-size:1.05rem;margin-bottom:16px;max-width:520px}
.story a{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:700;color:var(--c)}

/* Fotos nos cards de produto */
.pcard-art{height:200px;background:var(--soft)}
.pcard-art::before{display:none}
.pcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover .pcard-art img{transform:scale(1.08)}
.pcard-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,28,63,.08) 30%,color-mix(in srgb,var(--c) 55%,rgba(11,28,63,.5)))}
.pa-chip{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 7px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);font-size:.76rem;font-weight:700;color:var(--navy);animation:bob 5s ease-in-out infinite}
.pa-chip b{width:20px;height:20px;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:.7rem}

/* Sobre com foto */
.about-art{height:460px;display:block;background:none;box-shadow:var(--shadow-lg)}
.about-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.about-side.in .about-art img{transform:none}
.about-badge{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);animation:bob 6s ease-in-out infinite}
.about-badge .about-mark{width:44px;height:37px;animation:none;filter:none}
.about-badge span{font-size:.85rem;color:var(--muted);line-height:1.25}
.about-badge b{display:block;font-family:var(--font-h);color:var(--navy);font-size:1rem}
.about-chip{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.92);font-size:.82rem;font-weight:700;color:var(--navy);box-shadow:var(--shadow);animation:bob 7s ease-in-out 1s infinite}
.about-chip .ic{width:18px;height:18px;color:var(--blue)}

@media(max-width:900px){
  .show{grid-template-columns:1fr;gap:0}
  .show-stage{order:0;top:58px;z-index:5;padding:10px var(--gutter) 30px;margin:0 calc(-1 * var(--gutter));background:linear-gradient(180deg,#fff 86%,rgba(255,255,255,0))}
  .stage-show{max-width:440px;margin:0 auto;aspect-ratio:1.45}
  .stage-show .stage-note{display:none}
  .show-prog{margin-top:10px}
  .story{min-height:auto;padding:20px 0 56px}
  .story-in{opacity:.4}
  .story-photo{aspect-ratio:16/9;margin-bottom:18px;border-radius:20px}
  .story-num{font-size:2.6rem}
  .about-art{height:320px}
}
@media(max-width:600px){
  .band{padding:22px 0}
  .pcard-art{height:180px}
}

/* Tema por negócio: ao escolher um produto, o site assume a cor dele */
@property --blue{syntax:"<color>";inherits:true;initial-value:#1463ff}
@property --blue-2{syntax:"<color>";inherits:true;initial-value:#0a3fd1}
@property --light{syntax:"<color>";inherits:true;initial-value:#7cc0ff}
@property --cyan{syntax:"<color>";inherits:true;initial-value:#1ec8e6}
@property --sky{syntax:"<color>";inherits:true;initial-value:#e9f2ff}
@property --sky-2{syntax:"<color>";inherits:true;initial-value:#d7e8ff}
:root{transition:--blue .8s var(--ease),--blue-2 .8s var(--ease),--light .8s var(--ease),--cyan .8s var(--ease),--sky .8s var(--ease),--sky-2 .8s var(--ease)}
html[data-theme] .btn-primary{background:linear-gradient(135deg,var(--light),var(--blue) 50%,var(--blue-2));box-shadow:0 12px 28px -12px var(--blue)}
html[data-theme] .grad,html[data-theme] .h-hero .w.hl{background-image:linear-gradient(100deg,var(--blue),var(--light),var(--blue-2),var(--light),var(--blue))}
html[data-theme] .final{background:linear-gradient(135deg,var(--blue-2) 0%,var(--blue) 55%,var(--light) 100%)}
html[data-theme] .b1{background:radial-gradient(circle,color-mix(in srgb,var(--blue) 35%,transparent),transparent 70%)}
.theme-pill{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-lg);font-size:.86rem;font-weight:600;color:var(--navy);white-space:nowrap;max-width:calc(100vw - 32px);transform:translate(-50%,140%);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.theme-pill.on{transform:translate(-50%,0);opacity:1}
.theme-pill i{width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--sky)}
.theme-pill button{padding:7px 12px;border-radius:999px;background:var(--sky);color:var(--blue-2);font-weight:700;font-size:.8rem}

/* Logo própria do produto dentro dos selos */
.plogo{width:78%;height:78%;object-fit:contain;display:block}
.pa-badge:has(.plogo),.story-tag b:has(.plogo),.bdg:has(.plogo),.ph-top b:has(.plogo){background:#fff;box-shadow:0 10px 22px -10px var(--c),inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.hero-segs a .plogo,.stage-tabs button .plogo{width:18px;height:18px}
.stage-tabs button.on .plogo{filter:drop-shadow(0 0 1px #fff)}

/* Telas reais nos aparelhos */
.real-lap{position:absolute;inset:0;overflow:hidden;background:#0b0b0b}
.real-lap img{width:100%;height:100%;object-fit:cover;object-position:top;animation:realPan var(--demo) ease-in-out both}
@keyframes realPan{from{transform:scale(1.06)}to{transform:scale(1)}}
.real-badge{position:absolute;left:1.6cqw;bottom:1.6cqw;z-index:3;display:flex;align-items:center;gap:.6cqw;padding:.6cqw 1.2cqw;border-radius:2cqw;background:rgba(255,255,255,.94);font-size:1.05cqw;font-weight:700;color:var(--navy);box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.25)}
.real-badge i{width:.9cqw;height:.9cqw;border-radius:50%;background:#22c55e;box-shadow:0 0 0 .3cqw rgba(34,197,94,.25)}
.real-ph{position:absolute;inset:0;background:#0b0b0b}
.real-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;animation:realShot var(--demo) linear infinite both}
.real-ph img:first-child{opacity:1}
@keyframes realShot{0%{opacity:0;transform:translateY(2%)}3%,20%{opacity:1;transform:none}24%,100%{opacity:0}}

/* Janela "Por dentro" */
.pdlg.wide{width:min(1000px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.inside .pd-head{padding:26px 28px 20px}
.in-grid{display:grid;grid-template-columns:300px 1fr;gap:28px;padding:4px 28px 28px;align-items:start}
.in-phone{position:relative;border-radius:34px;padding:9px;background:linear-gradient(160deg,#2a3550,#0b1226);box-shadow:var(--shadow-lg);aspect-ratio:9/18.5}
.in-slides{inset:9px;border-radius:26px;overflow:hidden}
.in-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.in-side p{color:var(--muted)}
.in-shots{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.in-shots figure{flex:none;width:104px;scroll-snap-align:start}
.in-shots img{width:100%;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:12px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease)}
.in-shots figure:hover img{transform:translateY(-4px)}
.in-shots figcaption{font-size:.74rem;color:var(--muted);margin-top:6px;text-align:center}
.in-desk{width:100%;border-radius:14px;box-shadow:var(--shadow)}
.in-btns{display:flex;flex-wrap:wrap;gap:10px}
.in-note{color:var(--muted);font-size:.8rem}
@media(max-width:760px){
  .in-grid{grid-template-columns:1fr;padding:0 18px 22px;gap:18px}
  .in-phone{width:min(260px,70vw);margin:0 auto}
  .inside .pd-head{padding:22px 18px 16px}
  .in-btns .btn{width:100%}
}