/* =========================================================
   PÁGINA DE DEMONSTRAÇÕES
   ========================================================= */
.demos-hero { padding: 140px 0 30px; text-align: center; }
.demos-hero h1 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 12px; text-wrap: balance; }
.demos-hero p { color: var(--muted); max-width: 62ch; margin: 0 auto 28px; }
.demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.demo-tab { font: 600 14px/1 Inter, sans-serif; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(var(--em-rgb), .35); background: #fff; color: #065f46; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; }
.demo-tab:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(var(--em-rgb), .8); }
.demo-tab.active { background: var(--btn-grad); color: #fff; border-color: transparent; box-shadow: 0 12px 24px -12px rgba(var(--em-rgb), .7); }
.demo-panel { padding: 30px 0 70px; }
.demo-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 46px; align-items: start; }
.demo-info h2 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 10px; }
.demo-info > p { color: var(--muted); margin-bottom: 18px; }
.demo-info-wide { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.demo-feats { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.demo-feats li { display: flex; gap: 10px; align-items: center; }
.demo-feats li::before { content: '✓'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 13px; background: var(--btn-grad); }
.demo-try { font-size: 14px; color: #047857 !important; font-weight: 600; }
.demo-cta { display: grid; justify-items: center; gap: 12px; margin-top: 30px; }
.liked { color: #047857; font-weight: 600; text-align: center; }
.style-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.style-pick button { font: 600 14px Inter, sans-serif; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(20,18,30,.12); background: #fff; color: var(--text); cursor: pointer; }
.style-pick button.on { border-color: var(--em-2); background: #d1fae5; color: #065f46; }
.demos-note { padding: 0 0 60px; text-align: center; }
.demos-note p { color: var(--muted); font-size: 14px; max-width: 70ch; margin: 0 auto; }

/* ---------- Discord ---------- */
.dc { display: grid; grid-template-columns: 62px 170px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 470px; border-radius: 18px; overflow: hidden; background: #313338; color: #dbdee1; font: 14px/1.45 Inter, sans-serif; box-shadow: 0 30px 70px -30px rgba(15,23,42,.6); }
.dc-servers { background: #1e1f22; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
.dc-srv { width: 44px; height: 44px; border-radius: 50%; background: #313338; display: grid; place-items: center; font-weight: 700; color: #dbdee1; }
.dc-srv.on { border-radius: 14px; background: #047857; color: #fff; }
.dc-channels { background: #2b2d31; display: flex; flex-direction: column; gap: 2px; padding: 14px 8px; }
.dc-channels strong { color: #f2f3f5; padding: 0 8px 12px; border-bottom: 1px solid #1f2023; margin-bottom: 8px; }
.dc-channels span { padding: 6px 8px; border-radius: 6px; color: #949ba4; }
.dc-channels span.on { background: #404249; color: #f2f3f5; }
.dc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dc-head { padding: 13px 16px; border-bottom: 1px solid #26272b; font-weight: 600; color: #f2f3f5; }
.dc-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.dc-msg { display: flex; gap: 12px; animation: pop .25s ease; }
.dc-av { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #5865f2; display: grid; place-items: center; font-weight: 700; color: #fff; }
.dc-av.bot { background: #047857; }
.dc-who { color: #f2f3f5; font-weight: 600; }
.dc-who em { font-style: normal; font-size: 10px; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: 2px; }
.dc-who small { color: #949ba4; font-weight: 400; font-size: 12px; margin-left: 6px; }
.dc-cmd { color: #c9cdfb; }
.dc-embed { margin-top: 6px; background: #2b2d31; border-left: 4px solid var(--c); border-radius: 4px; padding: 10px 14px; display: grid; gap: 6px; max-width: 420px; }
.dc-embed b { color: #f2f3f5; }
.dc-embed small { color: #949ba4; font-size: 12px; }
.dc-embed p { margin: 0; }
.dc-ch { background: rgba(88,101,242,.3); color: #c9cdfb; padding: 0 4px; border-radius: 3px; }
.dc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-btns span { background: #4e5058; color: #fff; padding: 5px 12px; border-radius: 4px; font-size: 13px; }
.dc-bar { height: 8px; background: #1e1f22; border-radius: 99px; overflow: hidden; }
.dc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fde047); }
.dc-list { list-style: none; display: grid; gap: 4px; }
.dc-list b { color: #6ee7b7; margin-left: 6px; }
.dc-cmds { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; background: #313338; border-top: 1px solid #26272b; }
.dc-cmds button { font: 600 14px Inter, sans-serif; color: #f2f3f5; background: #383a40; border: 1px solid #4e5058; padding: 9px 14px; border-radius: 8px; cursor: pointer; transition: background .2s, transform .2s; }
.dc-cmds button:hover { background: #047857; border-color: #10b981; transform: translateY(-2px); }

/* ---------- DayZ ---------- */
.dz { border-radius: 18px; overflow: hidden; background: #111511; color: #e7e5e4; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); font-family: Inter, sans-serif; }
.dz-banner { position: relative; padding: 26px 26px 18px; background: radial-gradient(120% 90% at 80% 0%, #3f4a2f 0%, #1a1f17 55%, #0d100c 100%); overflow: hidden; }
.dz-fog { position: absolute; inset: 0; background: radial-gradient(60% 40% at 20% 80%, rgba(255,255,255,.08), transparent 70%), radial-gradient(50% 30% at 80% 60%, rgba(255,255,255,.06), transparent 70%); animation: fog 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes fog { to { transform: translateX(-30px); opacity: .7; } }
.dz-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: 1px; position: relative; }
.dz-live { color: #86efac; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.dz-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.dz-map { color: #a8a29e; }
.dz h3 { font-family: Oswald, Poppins, sans-serif; font-size: clamp(34px, 5vw, 48px); letter-spacing: 3px; color: #f5f5f4; margin: 14px 0 4px; position: relative; text-shadow: 0 4px 20px rgba(0,0,0,.6); }
.dz h3 small { font-size: .45em; color: #dc2626; letter-spacing: 2px; vertical-align: super; }
.dz-banner > p { color: #a8a29e; position: relative; margin-bottom: 18px; }
.dz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.dz-stats div { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; }
.dz-stats b { display: block; font-family: Oswald, sans-serif; font-size: 22px; color: #fafaf9; }
.dz-stats span { font-size: 12px; color: #a8a29e; }
.dz-ip { display: flex; gap: 8px; margin-top: 14px; position: relative; flex-wrap: wrap; }
.dz-ip code { flex: 1; min-width: 0; background: rgba(0,0,0,.45); border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; padding: 10px 12px; color: #fde68a; font-size: 14px; }
.dz-ip button { background: #b91c1c; color: #fff; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 700; cursor: pointer; min-height: 42px; }
.dz-ip button:hover { background: #dc2626; }
.dz-note { position: relative; font-size: 11px; color: #78716c !important; margin: 8px 0 0 !important; }
.dz-tabs { display: flex; border-bottom: 1px solid #262b24; background: #161a15; }
.dz-tabs button { flex: 1; padding: 12px; background: none; border: 0; color: #a8a29e; font: 600 14px Inter, sans-serif; cursor: pointer; border-bottom: 2px solid transparent; }
.dz-tabs button.on { color: #fafaf9; border-color: #dc2626; }
.dz-body { padding: 16px; min-height: 190px; }
.dz-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dz-item { background: #1c211b; border: 1px solid #2a3027; border-radius: 12px; padding: 10px; display: grid; gap: 2px; text-align: center; transition: border-color .2s, transform .2s; }
.dz-item:hover { border-color: #65a30d; transform: translateY(-2px); }
.dz-ico { font-size: 24px; }
.dz-item b { font-size: 13px; color: #f5f5f4; }
.dz-item small { color: #78716c; font-size: 11px; }
.dz-item em { font-style: normal; color: #fde68a; font-weight: 700; font-size: 13px; }
.dz-mods { list-style: none; display: grid; gap: 8px; }
.dz-mods li { display: grid; padding: 8px 12px; background: #1c211b; border-radius: 10px; border-left: 3px solid #65a30d; }
.dz-mods span { color: #a8a29e; font-size: 13px; }
.dz-rules { display: grid; gap: 8px; padding-left: 20px; color: #d6d3d1; }

/* ---------- Navegador de exemplo ---------- */
.browser { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -32px rgba(15,23,42,.45); border: 1px solid rgba(20,18,30,.08); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f5f4; border-bottom: 1px solid rgba(20,18,30,.06); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.browser-bar i:nth-child(2) { background: #fbbf24; }
.browser-bar i:nth-child(3) { background: #34d399; }
.browser-bar span { margin-left: 10px; flex: 1; min-width: 0; background: #fff; border-radius: 8px; padding: 4px 12px; font-size: 13px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Landing pages ---------- */
.lp { --lp-bg: #fff; --lp-fg: #111; --lp-muted: #555; --lp-acc: #000; --lp-card: #f5f5f5; background: var(--lp-bg); color: var(--lp-fg); transition: background .4s, color .4s; }
.lp-nav { display: flex; align-items: center; gap: 18px; padding: 16px 26px; font-size: 14px; color: var(--lp-muted); }
.lp-nav strong { margin-right: auto; color: var(--lp-fg); font-size: 18px; }
.lp-hero { padding: 40px 26px 34px; max-width: 640px; display: grid; gap: 12px; animation: pop .35s ease; }
.lp-hero small { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--lp-acc); font-weight: 700; }
.lp-hero h3 { font-size: clamp(26px, 4vw, 42px); line-height: 1.1; }
.lp-hero p { color: var(--lp-muted); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lp-btn { display: inline-block; padding: 12px 20px; border-radius: 10px; font-weight: 700; background: var(--lp-acc); color: var(--lp-bg); }
.lp-btn.ghost { background: transparent; color: var(--lp-fg); border: 1px solid currentColor; }
.lp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 26px 26px; }
.lp-feats div { background: var(--lp-card); border-radius: 14px; padding: 16px; display: grid; gap: 4px; }
.lp-feats span { font-size: 24px; }
.lp-feats small { color: var(--lp-muted); }
.lp-quote { margin: 0 26px 28px; padding: 18px 20px; border-left: 4px solid var(--lp-acc); background: var(--lp-card); border-radius: 0 14px 14px 0; font-size: 17px; font-style: italic; }
.lp-quote cite { display: block; font-size: 13px; font-style: normal; color: var(--lp-muted); margin-top: 6px; }
.lp-burger { --lp-bg: #1c1210; --lp-fg: #fff7ed; --lp-muted: #d6b8a3; --lp-acc: #f97316; --lp-card: #2a1b16; font-family: Inter, sans-serif; }
.lp-burger h3, .lp-burger .lp-nav strong { font-family: Oswald, sans-serif; letter-spacing: 1px; }
.lp-pilates { --lp-bg: #fbf7f4; --lp-fg: #3b2f2f; --lp-muted: #8b7b74; --lp-acc: #b5838d; --lp-card: #f3e9e4; }
.lp-pilates h3, .lp-pilates .lp-nav strong { font-family: 'Playfair Display', serif; }
.lp-pilates .lp-btn { border-radius: 999px; color: #fff; }
.lp-barber { --lp-bg: #0c0c0c; --lp-fg: #f5f0e6; --lp-muted: #a8a29e; --lp-acc: #c9a227; --lp-card: #1a1a1a; }
.lp-barber h3, .lp-barber .lp-nav strong { font-family: 'Playfair Display', serif; letter-spacing: .5px; }
.lp-barber .lp-nav strong { letter-spacing: 6px; font-family: Oswald, sans-serif; }
.lp-barber .lp-btn { border-radius: 0; color: #0c0c0c; }

/* ---------- Site institucional ---------- */
.ws { font-family: Inter, sans-serif; color: #1e293b; background: #fff; }
.ws-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid #e2e8f0; }
.ws-logo { display: flex; align-items: center; gap: 8px; font-family: Poppins, sans-serif; color: #1e3a5f; font-size: 18px; }
.ws-logo svg { width: 30px; height: 30px; }
.ws-nav nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ws-nav button { background: none; border: 0; padding: 8px 12px; border-radius: 8px; font: 500 14px Inter, sans-serif; color: #475569; cursor: pointer; }
.ws-nav button.on { background: #1e3a5f; color: #fff; }
.ws-body { min-height: 300px; animation: pop .3s ease; }
.ws-hero { padding: 44px 24px; background: linear-gradient(120deg, #1e3a5f, #2c5282); color: #fff; display: grid; gap: 10px; }
.ws-hero small { color: #fcd34d; font-weight: 700; letter-spacing: 1px; }
.ws-hero h3 { font-size: clamp(24px, 3.6vw, 36px); max-width: 22ch; }
.ws-hero p { color: #cbd5e1; }
.ws-btn { justify-self: start; background: #f59e0b; color: #1e293b; font-weight: 700; padding: 11px 18px; border-radius: 8px; }
.ws-nums { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 22px; gap: 10px; }
.ws-nums b { display: block; font-family: Poppins, sans-serif; font-size: 26px; color: #1e3a5f; }
.ws-nums span { font-size: 13px; color: #64748b; }
.ws-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; padding: 26px 24px; }
.ws-cards div { border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; display: grid; gap: 4px; }
.ws-cards span { font-size: 26px; }
.ws-cards small { color: #64748b; }
.ws-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; padding: 26px 24px; }
.ws-gallery figure { margin: 0; }
.ws-gallery figure div { aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; }
.ws-gallery svg { width: 60%; }
.ws-gallery figcaption { font-weight: 600; font-size: 14px; margin-top: 6px; }
.ws-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 24px; }
.ws-contact p { color: #64748b; font-size: 14px; }
.ws-form { display: grid; gap: 8px; }
.ws-form span { border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; color: #94a3b8; font-size: 14px; }
.ws-form span.big { height: 64px; }
.ws-form .ws-btn { border: 0; color: #1e293b; text-align: center; justify-self: stretch; }
.ws-foot { padding: 14px 24px; font-size: 12px; color: #94a3b8; border-top: 1px solid #e2e8f0; }

/* ---------- Logomarcas ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.logo-card { margin: 0; background: #fff; border: 1px solid rgba(20,18,30,.08); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -24px rgba(40,30,60,.45); transition: transform .3s, box-shadow .3s; animation: pop .3s ease; }
.logo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(var(--em-rgb), .55); }
.logo-art { aspect-ratio: 5 / 3; display: grid; place-items: center; padding: 14px; background: linear-gradient(180deg, #fff, #f6f8f7); }
.logo-art svg { width: 100%; height: 100%; }
.logo-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(20,18,30,.06); }
.logo-card figcaption span { display: grid; }
.logo-card figcaption small { color: var(--muted); font-size: 12px; }
.like { font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(var(--em-rgb), .4); background: #fff; color: #065f46; cursor: pointer; white-space: nowrap; }
.like.on { background: #d1fae5; border-color: var(--em-2); }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; gap: 28px; }
  .demo-info { text-align: center; }
  .demo-feats { justify-content: center; text-align: left; max-width: 340px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .demos-hero { padding-top: 110px; }
  .dc { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 460px; }
  .dc-servers, .dc-channels { display: none; }
  .dz-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-feats { grid-template-columns: 1fr; }
  .lp-nav span { display: none; }
  .ws-contact { grid-template-columns: 1fr; }
  .ws-nums b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-fog, .dz-live i { animation: none; }
}

.demo-grid > .demo-info { padding-top: 18px; }