/* Vitrine de demonstrações (/demonstracoes) — segue a identidade WISALAB: fundo grafite, dourado champanhe, cantos 18px. */

/* ---------- filtro ---------- */
.dm-filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 26px}
.dm-filters button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(221,184,154,.22);background:rgba(255,255,255,.02);color:rgba(226,232,240,.82);font:600 .84rem/1 inherit;font-family:inherit;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.dm-filters button small{font-size:.7rem;padding:2px 7px;border-radius:999px;background:rgba(236,200,168,.12);color:#f0d3ba}
.dm-filters button:hover{border-color:rgba(236,196,160,.6);color:#f0d3ba}
.dm-filters button.is-on{background:linear-gradient(180deg,#f4dcc4 0%,#dfbb9f 48%,#b98a66 100%);color:#140f0c;border-color:transparent}
.dm-filters button.is-on small{background:rgba(20,15,12,.16);color:#140f0c}

/* ---------- cartões ---------- */
.dm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dm-card{--dm:#dfbb9f;position:relative;display:flex;flex-direction:column;border-radius:18px;border:1px solid rgba(221,184,154,.2);background:linear-gradient(165deg,#1b1613,#0f0e0e);overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.dm-card>*{position:relative;z-index:1}
.dm-card:hover{border-color:rgba(236,196,160,.6);transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.dm-card.is-out{display:none}
.dm-shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#151211}
.dm-shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s;filter:saturate(.92)}
.dm-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,11,11,.72) 0%,rgba(12,11,11,0) 38%)}
.dm-card:hover .dm-shot img{transform:scale(1.05);filter:saturate(1)}
button.dm-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dm-tag{position:absolute;z-index:2;left:16px;bottom:14px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f0d3ba;padding:5px 11px;border-radius:999px;background:rgba(12,11,11,.62);border:1px solid rgba(236,200,168,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dm-play{position:absolute;z-index:2;right:14px;bottom:12px;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:#140f0c;padding:8px 13px;border-radius:999px;background:linear-gradient(180deg,#f4dcc4 0%,#dfbb9f 48%,#b98a66 100%);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.dm-card:hover .dm-play,.dm-open:focus-visible .dm-play{opacity:1;transform:none}
.dm-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.dm-body h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:1.2rem;color:#fff}
.dm-body h3 i{width:10px;height:10px;border-radius:3px;background:var(--dm);box-shadow:0 0 0 3px rgba(255,255,255,.06);flex:none}
.wisa-rethink .dm-body p{margin:0 0 14px;font-size:.9rem!important;color:rgba(226,232,240,.72)}
.dm-feats{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;flex:1;align-content:flex-start}
.dm-feats li{font-size:.74rem;padding:4px 10px;border-radius:999px;border:1px solid rgba(221,184,154,.16);background:rgba(255,255,255,.03);color:rgba(240,211,186,.92)}
.dm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.dm-actions .ws-button{cursor:pointer;border:0;font-family:inherit}
.dm-note{display:flex;gap:10px;align-items:flex-start;margin:26px 0 0;padding:16px 18px;border-radius:16px;border:1px dashed rgba(221,184,154,.28);color:rgba(226,232,240,.72);font-size:.88rem}
.dm-note .ico{color:#f0d3ba;margin-top:3px}
/* cor de cada segmento (só o detalhe ao lado do nome; a vitrine mantém o dourado WISALAB) */
.dm-c-studio{--dm:#c98d72}.dm-c-barber{--dm:#c9a063}.dm-c-spa{--dm:#7f9b78}.dm-c-clinica{--dm:#2bb3a7}.dm-c-pet{--dm:#f07b2b}.dm-c-fit{--dm:#c6f432}
.dm-c-arena{--dm:#ff6a1a}.dm-c-tattoo{--dm:#d7263d}.dm-c-car{--dm:#1e7bff}.dm-c-aulas{--dm:#ffc93c}.dm-c-consult{--dm:#a8323f}

/* ---------- palco: gota, ondas e janela ---------- */
html.dm-lock{overflow:hidden}
.dm-stage{position:fixed;inset:0;z-index:1000}
.dm-stage[hidden]{display:none}
/* Só transform e opacity são animados (a placa de vídeo cuida disso sem travar); nada de desfoque ou recorte animado. */
.dm-backdrop{position:absolute;inset:0;background:rgba(8,7,7,.78);opacity:0;transition:opacity .35s ease}
.dm-stage.is-in .dm-backdrop{opacity:1}

/* 1. o ponto: nasce no centro da tela */
.dm-drop{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#f0d3ba;opacity:0;transform:scale(0);pointer-events:none;will-change:transform,opacity}
.dm-stage.is-in .dm-drop{animation:dm-dot .62s cubic-bezier(.16,1,.3,1) forwards}
@keyframes dm-dot{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}

/* 2. a onda: um círculo cheio que cresce a partir do ponto e abre a tela, com dois anéis finos à frente */
.dm-rings{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dm-rings::before{content:'';position:absolute;left:50%;top:50%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;border-radius:50%;background:#0f0d0c;transform:scale(0);will-change:transform}
.dm-rings i{position:absolute;left:50%;top:50%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;border-radius:50%;border:1px solid rgba(240,211,186,.55);opacity:0;transform:scale(0);will-change:transform,opacity}
.dm-rings i:nth-child(n+3){display:none}
.dm-stage.is-wave .dm-rings::before{transform:scale(1);transition:transform .8s cubic-bezier(.65,0,.25,1)}
.dm-stage.is-wave .dm-rings i{animation:dm-wave .9s cubic-bezier(.33,1,.68,1) forwards}
.dm-stage.is-wave .dm-rings i:nth-child(2){animation-delay:.1s}
@keyframes dm-wave{0%{opacity:.9;transform:scale(.01)}100%{opacity:0;transform:scale(.62)}}

/* 3. a janela aparece por cima da onda já aberta */
.dm-window{position:absolute;inset:4vh 3vw;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#0f0d0c;border:1px solid rgba(221,184,154,.28);box-shadow:0 30px 90px rgba(0,0,0,.55);
  opacity:0;transform:scale(.985);will-change:transform,opacity}
.dm-stage.is-open .dm-window{opacity:1;transform:scale(1);transition:opacity .32s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.dm-stage.is-open .dm-rings::before{opacity:0;transition:transform .8s cubic-bezier(.65,0,.25,1),opacity .3s ease .25s}

/* fechar: a janela some e a onda volta para o centro */
.dm-stage.is-closing .dm-window{opacity:0;transform:scale(.985);transition:opacity .18s ease,transform .18s ease}
.dm-stage.is-closing .dm-rings::before{opacity:1;transform:scale(0);transition:transform .42s cubic-bezier(.65,0,.35,1)}
.dm-stage.is-closing .dm-backdrop{opacity:0;transition:opacity .3s ease .12s}
.dm-stage.is-closing .dm-rings i,.dm-stage.is-closing .dm-drop{animation:none;opacity:0}
.dm-stage.is-quick .dm-window,.dm-stage.is-quick .dm-backdrop{transition:none;transform:none;opacity:1}
.dm-stage.is-quick .dm-rings{display:none}

/* barra de navegador */
.dm-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:linear-gradient(180deg,#1e1916,#151211);border-bottom:1px solid rgba(221,184,154,.18);min-height:54px}
.dm-dots{display:flex;gap:7px;flex:none}
.dm-dots i{width:11px;height:11px;border-radius:50%;background:#3a302a}
.dm-dots i:nth-child(1){background:#e0705a}.dm-dots i:nth-child(2){background:#e6b450}.dm-dots i:nth-child(3){background:#5fbf6a}
.dm-tab{display:flex;align-items:center;gap:8px;max-width:240px;min-width:0;padding:7px 14px;border-radius:10px 10px 0 0;background:#0f0d0c;border:1px solid rgba(221,184,154,.18);border-bottom-color:transparent;margin-bottom:-11px;align-self:flex-end;flex:none}
.dm-tab b{font-size:.8rem;font-weight:600;color:#f8f9fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-fav{width:12px;height:12px;border-radius:4px;background:linear-gradient(180deg,#f4dcc4,#b98a66);flex:none}
.dm-stage[data-key] .dm-fav{background:var(--dm,#dfbb9f)}
.dm-address{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(221,184,154,.14);color:rgba(226,232,240,.85);font-size:.82rem}
.dm-lock{color:#5fbf6a;display:inline-flex}
.dm-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-tools{display:flex;align-items:center;gap:8px;flex:none}
.dm-device{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(221,184,154,.14)}
.dm-device button{border:0;background:none;color:rgba(226,232,240,.7);font:600 .76rem inherit;font-family:inherit;padding:6px 12px;border-radius:999px;cursor:pointer}
.dm-device button.is-on{background:rgba(236,200,168,.16);color:#f0d3ba}
.dm-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(221,184,154,.16);background:rgba(255,255,255,.03);color:#f0d3ba;font-size:1.05rem;cursor:pointer;transition:border-color .2s,background .2s}
.dm-icon:hover{border-color:rgba(236,196,160,.6);background:rgba(236,200,168,.08)}
.dm-x{font-size:1.4rem;line-height:1}
.dm-newtab{font-size:.8rem;font-weight:700;color:#140f0c;text-decoration:none;padding:9px 14px;border-radius:999px;background:linear-gradient(180deg,#f4dcc4 0%,#dfbb9f 48%,#b98a66 100%);white-space:nowrap}
.dm-newtab:hover{filter:brightness(1.06)}

/* área do site */
.dm-view{position:relative;flex:1;min-height:0;background:#fff;display:flex;justify-content:center}
.dm-view iframe{display:block;width:100%;height:100%;border:0;background:#fff;transition:width .45s cubic-bezier(.22,.9,.24,1),border-radius .45s,margin .45s}
.dm-stage.is-mobile .dm-view{background:radial-gradient(circle at 50% 30%,#221b17,#0c0b0b 70%);padding:18px 0}
.dm-stage.is-mobile .dm-view iframe{width:390px;max-width:calc(100% - 24px);border-radius:34px;box-shadow:0 0 0 10px #1b1613,0 0 0 11px rgba(221,184,154,.35),0 30px 80px rgba(0,0,0,.6)}
.dm-loading{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#0f0d0c;transition:opacity .4s;pointer-events:none}
.dm-loading span{width:42px;height:42px;border-radius:50%;border:2px solid rgba(221,184,154,.18);border-top-color:#f0d3ba;animation:dm-spin .8s linear infinite}
.dm-loading.is-done{opacity:0}
@keyframes dm-spin{to{transform:rotate(360deg)}}

/* ---------- responsivo ---------- */
@media (max-width:1080px){.dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dm-tab{display:none}}
@media (max-width:720px){
  .dm-grid{grid-template-columns:minmax(0,1fr)}
  .dm-play{opacity:1;transform:none}
  .dm-window{inset:0;border-radius:0;border:0}
  .dm-bar{flex-wrap:wrap;gap:8px;padding:10px}
  .dm-dots,.dm-device{display:none}
  .dm-address{order:3;flex-basis:100%}
  .dm-tools{margin-left:auto}
  .dm-newtab{padding:8px 12px;font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){.dm-card,.dm-shot img,.dm-play{transition:none}}
.dm-section h2>span{opacity:1;color:inherit;background:none;-webkit-text-fill-color:currentColor}
/* Acessos das demonstrações com login de verdade (ex.: Wisa Agenda) */
.dm-logins{margin:0 0 16px;border-radius:14px;border:1px solid rgba(221,184,154,.2);background:rgba(255,255,255,.03);font-size:.82rem}
.dm-logins summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;color:#f0d3ba;font-weight:600;list-style:none}
.dm-logins summary::-webkit-details-marker{display:none}
.dm-logins summary::after{content:"+";margin-left:auto;font-weight:700}
.dm-logins[open] summary::after{content:"−"}
.dm-logins summary .ico{width:15px;height:15px}
.dm-logins table{width:calc(100% - 28px);margin:0 14px;border-collapse:collapse}
.dm-logins th,.dm-logins td{padding:6px 4px;border-top:1px solid rgba(221,184,154,.12);text-align:left;font-weight:500;vertical-align:top}
.dm-logins th{color:rgba(226,232,240,.7);white-space:nowrap}
.dm-logins code{font-size:.78rem;color:#fff;word-break:break-all;user-select:all}
.dm-logins small{display:block;padding:8px 14px 12px;color:rgba(226,232,240,.6);line-height:1.45}