/* Visualizador de modelos: barra, modo celular, camadas e prévia do WhatsApp.
   Cada modelo tem visual próprio e fixo (não segue o tema claro/escuro do site da Arquantis). */

.viewer { position: fixed; inset: 0; z-index: 100; background: #fff; overflow-y: auto; overscroll-behavior: contain; --stick: calc(60px + env(safe-area-inset-top, 0px)); font-family: "Figtree", system-ui, sans-serif; }
.viewer.phone { background: radial-gradient(1200px 600px at 50% 0%, #2A3354 0%, #121729 55%, #0A0D18 100%); --stick: 0px; }

.vbar { position: sticky; top: 0; z-index: 80; background: #0E1426; color: #EEF1F7; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.vbar-in { display: flex; align-items: center; gap: 10px; min-height: 60px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.vback { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid rgba(238,241,247,.22); color: inherit; font: 600 14.5px/1 "Figtree", system-ui, sans-serif; padding: 10px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.vback:hover { border-color: rgba(238,241,247,.7); }
.vinfo { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.vinfo small { font: 500 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #FFB21E; }
.vinfo b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdev { display: inline-flex; background: rgba(255,255,255,.07); border-radius: 999px; padding: 3px; }
.vdev button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #B8C0D6; font: 600 13.5px/1 "Figtree", system-ui, sans-serif; padding: 9px 12px; border-radius: 999px; cursor: pointer; }
.vdev button svg { width: 17px; height: 17px; }
.vdev button[aria-pressed="true"] { background: #EEF1F7; color: #0E1426; }
.vpers { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(238,241,247,.22); background: transparent; color: #EEF1F7; font: 600 13.5px/1 "Figtree", system-ui, sans-serif; padding: 9px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.vpers svg { width: 16px; height: 16px; }
.vpers[aria-expanded="true"], .vpers:hover { border-color: #FFB21E; color: #FFB21E; }
.vcta { background: #1A9E4E; color: #fff; text-decoration: none; font: 700 14.5px/1 "Figtree", system-ui, sans-serif; padding: 11px 16px; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.vcta svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 1020px) { .vinfo small { display: none; } .vdev button span { display: none; } }
@media (max-width: 760px) { .vdev { display: none; } .vpers span { display: none; } .vback span { display: none; } }
@media (max-width: 480px) { .vcta .long { display: none; } .vcta { padding: 11px 13px; } }
.vpop { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); top: calc(100% + 8px); width: min(340px, calc(100vw - 24px)); background: #fff; color: #10162A; border-radius: 16px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.vpop label { font-weight: 700; font-size: 14.5px; }
.vpop div { display: flex; gap: 8px; }
.vpop input { flex: 1; min-width: 0; font: 500 16px/1.3 "Figtree", system-ui, sans-serif; border: 1.5px solid #DADDE2; border-radius: 10px; padding: 11px 12px; color: #10162A; background: #fff; }
.vpop input:focus { outline: none; border-color: #2242E0; }
.vpop div button { border: 0; background: #2242E0; color: #fff; font: 600 14px/1 "Figtree", system-ui, sans-serif; border-radius: 10px; padding: 0 14px; cursor: pointer; }
.vpop-reset { border: 0; background: none; color: #586078; font: 500 13.5px/1.2 "Figtree", system-ui, sans-serif; text-align: left; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Dispositivo */
.device { position: relative; }
.stage { container: site / inline-size; }
.sbar { display: none; }
.viewer.phone .device { width: 390px; max-width: calc(100% - 24px); height: min(820px, calc(100vh - 110px)); min-height: 560px; margin: 26px auto 40px; border-radius: 50px; border: 11px solid #05070D; box-shadow: 0 0 0 1.5px #3A425E, 0 50px 90px -30px rgba(0,0,0,.85); overflow: hidden; transform: translateZ(0); background: var(--band, #fff); }
.viewer.phone .stage { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-top: 38px; background: var(--band, #fff); }
.viewer.phone .stage::-webkit-scrollbar { display: none; }
.viewer.phone .sbar { display: flex; position: absolute; z-index: 70; inset: 0 0 auto; height: 38px; padding: 0 26px; align-items: center; justify-content: space-between; background: var(--band, #fff); color: var(--band-ink, #111); font: 700 14px/1 -apple-system, "SF Pro Text", "Figtree", system-ui, sans-serif; pointer-events: none; }
.sbar i { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 104px; height: 26px; border-radius: 20px; background: #05070D; }
.sbar svg { height: 12px; width: auto; }
.viewer.phone .vnext { padding-bottom: 28px; }

/* Rodapé "ver outro modelo" */
.vnext { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 40px 16px calc(44px + env(safe-area-inset-bottom, 0px)); background: #0E1426; color: #EEF1F7; text-align: center; }
.vnext p { width: 100%; font-size: 15px; opacity: .8; margin: 0 0 6px; }
.vnext button { background: transparent; color: inherit; border: 1px solid rgba(238,241,247,.3); padding: 10px 14px; border-radius: 999px; font: 600 14px/1 "Figtree", system-ui, sans-serif; cursor: pointer; }
.vnext button:hover { border-color: #FFB21E; color: #FFB21E; }

/* Base dos modelos */
.demo { -webkit-font-smoothing: antialiased; line-height: 1.55; overflow-x: clip; }
.demo *, .demo-layer * { box-sizing: border-box; }
/* Reset com especificidade zero (:where) para nunca vencer o estilo próprio de cada modelo */
:where(.demo, .demo-layer) :where(h1, h2, h3, h4, p) { margin: 0; text-wrap: balance; }
:where(.demo, .demo-layer) :where(button) { cursor: pointer; font: inherit; color: inherit; }
:where(.demo, .demo-layer) :where(button:disabled) { cursor: not-allowed; }
:where(.demo, .demo-layer) :where(a) { color: inherit; }
:where(.demo, .demo-layer) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.demo, .demo-layer) :where(table) { border-collapse: collapse; width: 100%; }
:where(.demo, .demo-layer) :where(input, select, textarea) { font: inherit; color: inherit; }
.dw { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.viewer.phone .dw { padding-left: 18px; padding-right: 18px; }

.k-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.k-status i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; flex: none; }
.k-status.is-open i { background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: kpulse 2s infinite; }
@keyframes kpulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@container site (max-width: 560px) { .k-status span { display: none; } }

/* Camadas: gavetas, janelas e folhas */
.ov { position: fixed; inset: 0; z-index: 60; }
.ov-back { position: absolute; inset: 0; background: rgba(8,10,18,.55); opacity: 0; transition: opacity .25s ease; }
.ov.on .ov-back { opacity: 1; }
.ov-panel { position: absolute; overflow-y: auto; overscroll-behavior: contain; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.ov-panel.side { top: 0; right: 0; bottom: 0; width: min(440px, 100%); transform: translateX(100%); display: flex; flex-direction: column; overflow: hidden; }
.ov.on .ov-panel.side { transform: none; }
.ov-panel.sheet { left: 50%; top: 50%; width: min(760px, calc(100% - 40px)); max-height: calc(100% - 60px); transform: translate(-50%, -46%); opacity: 0; border-radius: 22px; }
.ov.on .ov-panel.sheet { transform: translate(-50%, -50%); opacity: 1; }
.viewer.phone .ov-panel.side { top: 38px; }
.viewer.phone .ov-panel.sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: calc(100% - 70px); border-radius: 22px 22px 0 0; transform: translateY(100%); opacity: 1; }
.viewer.phone .ov.on .ov-panel.sheet { transform: none; }
@media (max-width: 640px) {
  .ov-panel.sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: calc(100% - 50px); border-radius: 22px 22px 0 0; transform: translateY(100%); opacity: 1; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ov.on .ov-panel.sheet { transform: none; }
  .ov-panel.side { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.ov-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 22px; line-height: 1; background: rgba(0,0,0,.08); }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(0,0,0,.08); flex: none; }
.side-head .ov-x { position: static; }
.side-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: grid; gap: 18px; align-content: start; }
.side-foot { flex: none; padding: 16px 20px; border-top: 1px solid rgba(0,0,0,.08); display: grid; gap: 12px; }

/* Prévia do WhatsApp */
.wam { z-index: 75; }
.wam-card { position: absolute; left: 50%; top: 50%; width: min(410px, calc(100% - 24px)); max-height: calc(100% - 32px); overflow-y: auto; transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease; background: #fff; color: #111B21; border-radius: 26px; padding: 18px; display: grid; gap: 14px; font-family: "Figtree", system-ui, sans-serif; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.wam.on .wam-card { transform: translate(-50%, -50%); opacity: 1; }
.wam-kicker { font: 700 12px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #1A9E4E; text-align: center; margin: 4px 0 0; }
.wam-phone { border-radius: 18px; overflow: hidden; border: 1px solid #E3E6EA; }
.wam-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F0F2F5; }
.wam-av { width: 38px; height: 38px; border-radius: 50%; background: #DFE5E7; color: #54656F; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.wam-head b { display: block; font-size: 15.5px; }
.wam-head small { display: block; font-size: 12.5px; color: #667781; }
.wam-chat { background-color: #EFEAE2; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; padding: 14px 12px 16px; display: grid; gap: 8px; align-content: start; min-height: 230px; max-height: 360px; overflow-y: auto; }
.wam-day { justify-self: center; background: #fff; color: #54656F; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; border-radius: 8px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.wam-msg { position: relative; max-width: 90%; padding: 8px 10px 20px; border-radius: 10px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 1px 0 rgba(0,0,0,.08); word-wrap: break-word; animation: wamIn .3s ease both; }
.wam-msg.in { background: #fff; justify-self: start; border-top-left-radius: 2px; }
.wam-msg.out { background: #D9FDD3; justify-self: end; border-top-right-radius: 2px; animation-delay: .5s; }
.wam-time { position: absolute; right: 9px; bottom: 4px; font-size: 11px; color: #667781; }
.wam-time .tick { color: #53BDEB; font-weight: 400; }
@keyframes wamIn { from { opacity: 0; transform: translateY(6px); } }
.wam-typing { justify-self: start; background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; gap: 4px; }
.wam-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: wamDot 1s infinite; }
.wam-typing i:nth-child(2) { animation-delay: .15s; } .wam-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wamDot { 50% { transform: translateY(-4px); opacity: .5; } }
.wam-note { font-size: 14px; color: #54656F; text-align: center; line-height: 1.45; margin: 0; }
.wam-acts { display: grid; gap: 8px; }
.wam-acts .vcta { justify-content: center; padding: 14px 16px; font-size: 15px; }
.wam-close { border: 1.5px solid #DADDE2; background: #fff; color: #10162A; font: 600 15px/1 "Figtree", system-ui, sans-serif; padding: 13px 16px; border-radius: 999px; cursor: pointer; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #10162A; color: #F3F4EF; padding: 14px 18px; border-radius: 14px; font: 500 15px/1.4 "Figtree", system-ui, sans-serif; max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }