/* ═══════════════════════════════════════════════════════════════
   PÁGINAS DE DEMONSTRAÇÃO, Design System v4 "Terra Noturna"
   Mesma linguagem do portfólio: grafite quente, cobre como acento,
   Fraunces + Inter + JetBrains Mono. Carregado DEPOIS de style.css,
   que fornece os tokens, o fundo em grade e os componentes básicos.
═══════════════════════════════════════════════════════════════ */

.demo-page { min-height: 100vh; }

/* Aliases dos botões antigos para os botões do sistema */
.btn-white { background: var(--brand); color: var(--brand-ink); }
.btn-white:hover { background: var(--brand-hover); box-shadow: 0 10px 30px -10px rgba(217, 163, 108, .6); }
.btn-outline {
  background: rgba(243, 237, 228, .04);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { border-color: var(--brand-line); background: var(--brand-soft); }

.section-title, .demo-title, .dd-title, .demo-cta-box h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.section-title em, .demo-title em { font-style: italic; color: var(--brand); }
.demo-page .section-title { line-height: 1.08; }

/* ── Barra do topo ── */
.demo-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 max(18px, calc((100% - 1160px) / 2));
  background: rgba(28, 23, 18, 0.74);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.demo-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 9px 16px;
  transition: color .2s, border-color .2s;
}
.demo-back::before { content: ''; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.demo-back:hover { color: var(--text-1); border-color: var(--brand-line); }
.demo-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-1);
}
.demo-brand .dot { color: var(--brand); }
.demo-brand .nav-mono { margin-right: 10px; }
.demo-brand-logo {
  height: 26px;
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo-nav .demo-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.demo-nav .btn { padding: 10px 20px; font-size: 13px; }

/* ── Hero ── */
.demo-hero {
  position: relative;
  text-align: center;
  padding: clamp(80px, 11vw, 130px) clamp(18px, 5vw, 56px) clamp(60px, 8vw, 90px);
}
.demo-hero-glow { display: none; }
.demo-hero-logo { height: 46px; width: auto; margin: 0 auto 28px; }
.demo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text-2);
  border: 1px solid var(--border);
  background: rgba(243, 237, 228, .04);
  padding: 7px 15px;
  border-radius: 999px;
}
.demo-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.demo-title { font-size: clamp(40px, 6vw, 76px); line-height: 1.04; margin: 26px 0 0; }
.demo-sub { max-width: 640px; margin: 22px auto 0; font-size: 17px; color: var(--text-2); line-height: 1.65; }
.demo-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ── Seções ── */
.demo-section { position: relative; padding: clamp(72px, 9vw, 120px) clamp(18px, 5vw, 56px); overflow-x: hidden; overflow-x: clip; }
.demo-section-alt { background: linear-gradient(180deg, rgba(34, 28, 22, 0), rgba(34, 28, 22, .75) 10%, rgba(34, 28, 22, .75) 90%, rgba(34, 28, 22, 0)); }
.demo-inner { max-width: 1120px; margin: 0 auto; }
.demo-center { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
.demo-center .section-desc { max-width: 580px; margin-left: auto; margin-right: auto; }

/* ── Molduras (web e desktop) ── */
.browser, .appwin {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #201A14;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(217, 163, 108, .05);
}
.browser-bar, .appwin-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: #171410;
  border-bottom: 1px solid var(--border);
}
.browser-bar i, .appwin-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; background: rgba(243, 237, 228, .16); }
.browser-url, .appwin-title {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-url { background: rgba(243, 237, 228, .04); border: 1px solid var(--border); padding: 3px 12px; border-radius: 999px; }
.browser img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.appwin img { display: block; width: 100%; height: auto; }
.appwin-tall img { max-height: 560px; width: auto; margin: 0 auto; }
.dd-media { transform-style: preserve-3d; will-change: transform; }

/* ── Tour por abas ── */
.tour { margin-top: 14px; }
.tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.tour-tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 17px;
  transition: color .2s, background .2s, border-color .2s;
}
.tour-tab:hover { color: var(--text-1); border-color: var(--brand-line); }
.tour-tab.active { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
.tour-stage { transition: opacity .3s; }
.tour-stage.swapping { opacity: 0; }
.tour-caption { text-align: center; max-width: 640px; margin: 22px auto 0; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }

/* ── Mergulhos ── */
.dd { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dd + .dd { margin-top: clamp(72px, 9vw, 120px); }
.dd-reverse .dd-media { order: 2; }
.dd-eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--brand); }
.dd-title { font-size: clamp(25px, 2.8vw, 34px); margin: 12px 0; line-height: 1.16; }
.dd-desc { font-size: 15.5px; color: var(--text-2); line-height: 1.7; }
.dd-desc strong, .dd-bullets strong { color: var(--text-1); font-weight: 500; }
.dd-bullets { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
.dd-bullets li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--text-1); line-height: 1.55; }

/* Marcas desenhadas em SVG (o glifo do HTML fica para leitores de tela antigos) */
.dd-check, .mk-yes, .mk-no, .mk-mid {
  display: inline-block;
  font-size: 0 !important;
  line-height: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.dd-check {
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  position: relative;
}
.dd-check::before, .mk-yes::before, .mk-no::before, .mk-mid::before {
  content: '';
  display: block;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.dd-check { color: var(--brand); }
.dd-check::before { position: absolute; inset: 4px; }
.dd-check, .mk-yes { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.mk-no { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.mk-mid { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.mk-yes::before, .mk-no::before, .mk-mid::before { width: 16px; height: 16px; }
.mk-yes { color: var(--brand); }
.mk-mid { color: var(--text-2); }
.mk-no { color: var(--text-3); }

/* ── Tabela comparativa ── */
.cmp-wrap { overflow-x: auto; }
.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 48px;
  background: linear-gradient(180deg, rgba(46, 38, 30, .92), rgba(38, 32, 25, .92));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cmp th, .cmp td { padding: 15px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.cmp thead th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--text-3); font-weight: 400; }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; }
.cmp .col-mine { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp tbody tr { transition: background .2s; }
.cmp tbody tr:hover td { background-color: rgba(243, 237, 228, .025); }
.cmp-legend { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: var(--text-3); }
.cmp-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* ── Cartões de validação, depoimento, medição, canal ── */
.val-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.val-card, .rev-card, .med-card, .canal {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(46, 38, 30, .92), rgba(38, 32, 25, .92));
  border: 1px solid var(--border);
  transition: border-color .3s, transform .3s var(--ease-out);
}
.val-card:hover, .rev-card:hover, .med-card:hover, .canal:hover { border-color: var(--brand-line); }
.val-card { text-align: left; padding: 24px 20px; }
.val-card::before {
  content: '';
  display: block;
  width: 26px; height: 2px;
  margin-bottom: 16px;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}
.val-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--text-1); margin-bottom: 8px; line-height: 1.25; }
.val-card p { font-size: 13px; color: var(--text-2); line-height: 1.6; }

.rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.rev-card { display: flex; flex-direction: column; padding: 26px; }
.rev-quote { font-size: 34px; color: var(--brand); line-height: .6; font-family: var(--font-display); }
.rev-text { flex: 1; font-size: 14.5px; color: var(--text-2); line-height: 1.65; margin: 12px 0 20px; }
.rev-who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.rev-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}
.rev-name { font-size: 14px; font-weight: 500; color: var(--text-1); }
.rev-role { font-size: 12px; color: var(--text-3); }
.rev-stars { display: none; }

/* ── CTA final ── */
.demo-cta { text-align: center; padding: clamp(72px, 9vw, 110px) clamp(18px, 5vw, 56px); }
.demo-cta-box {
  position: relative;
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 60px) clamp(22px, 5vw, 44px);
  border-radius: calc(var(--r-lg) + 6px);
  border: 1px solid var(--brand-line);
  background:
    linear-gradient(rgba(217, 163, 108, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(217, 163, 108, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    #15120F;
  box-shadow: 0 0 80px -30px rgba(217, 163, 108, .35);
}
.demo-cta-box h2 { font-size: clamp(28px, 3.8vw, 44px); }
.demo-cta-box p { color: var(--text-2); margin: 14px auto 28px; max-width: 480px; font-size: 16px; }

/* ── Rodapé ── */
.demo-footer { text-align: center; padding: 40px clamp(18px, 5vw, 56px); border-top: 1px solid var(--border); background: rgba(28, 23, 18, .8); }
.demo-footer .demo-brand { position: static; transform: none; margin-bottom: 10px; }
.demo-footer p { font-size: 13px; color: var(--text-3); }
.demo-footer a { color: var(--brand); }

/* ── Revelação com Animate.css (demo.js) ── */
.js-reveal .reveal:not(.anim-done) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.anim-done) { opacity: 1; }
}

/* ── Números medidos ── */
.med-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.med-card { padding: 26px 22px; }
.med-num { display: block; font-family: var(--font-mono); font-size: clamp(28px, 3.6vw, 38px); line-height: 1; color: var(--text-1); letter-spacing: -0.02em; }
.med-num small { font-size: 0.42em; color: var(--brand); margin-left: 5px; letter-spacing: 0; }
.med-card h4 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin: 16px 0 7px; }
.med-card p { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ── Terminal ── */
.term {
  margin-top: 40px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: #0C0B09;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 15px; background: #151210; border-bottom: 1px solid var(--border); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; background: rgba(243, 237, 228, .16); }
.term-bar span { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.term pre { margin: 0; padding: 22px 24px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; color: #D3CABC; overflow-x: auto; }
.term .ok { color: var(--live); }
.term .hi { color: var(--brand); }
.term .dim { color: var(--text-3); }

/* ── Diagrama de arquitetura ── */
.arq {
  margin-top: 48px;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(rgba(243, 237, 228, .03) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(243, 237, 228, .03) 1px, transparent 1px) 0 0 / 30px 30px,
    #12100D;
  overflow-x: auto;
}
.arq svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--font-ui); }
.arq-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 26px; font-size: 13px; color: var(--text-2); }
.arq-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.arq-legenda i { width: 22px; height: 0; display: block; border-top: 3px solid var(--brand); border-radius: 2px; }
.arq-legenda i.tracejado { border-top-style: dashed; border-color: var(--border-strong); border-top-width: 2px; }
.arq-legenda i.desvio { border-color: var(--text-3); border-top-width: 2px; }

/* ── Canais de dados ── */
.canais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.canal { padding: 24px 22px; }
.canal code { font-family: var(--font-mono); font-size: 12px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 3px 9px; border-radius: 6px; }
.canal h4 { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 14px 0 8px; color: var(--text-1); }
.canal p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.canal .canal-modo { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* ── Linha do tempo das versões ── */
.versoes { margin-top: 48px; border-left: 1px solid var(--brand-line); list-style: none; }
.versoes li { position: relative; padding: 0 0 30px 30px; }
.versoes li:last-child { padding-bottom: 0; }
.versoes li::before {
  content: ""; position: absolute; left: -7px; top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border-strong);
}
.versoes li.agora::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 12px var(--brand); }
.versoes .v-num { font-family: var(--font-mono); font-size: 12px; color: var(--brand); }
.versoes .v-tit { font-family: var(--font-display); font-size: 18px; color: var(--text-1); margin: 5px 0 6px; }
.versoes .v-txt { font-size: 14px; color: var(--text-2); line-height: 1.65; max-width: 680px; }

/* ── Responsivo ── */
@media (max-width: 1000px) {
  .val-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .med-grid, .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dd { grid-template-columns: 1fr; gap: 30px; }
  .dd-reverse .dd-media { order: 0; }
  .rev-grid { grid-template-columns: 1fr; }
  .arq { padding: 20px 14px; }
}
@media (max-width: 760px) {
  .demo-brand-logo, .demo-nav .demo-brand { display: none; }
  .demo-back { padding: 8px 12px; font-size: 12px; }
  .demo-nav .btn { padding: 9px 14px; font-size: 12px; }
  .cmp { display: block; overflow-x: auto; white-space: nowrap; }
  .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .val-grid, .med-grid, .canais { grid-template-columns: 1fr; }
  .term pre { font-size: 11px; padding: 16px; }
}