/* ═══════════════════════════════════════════════════════════
   Demo do painel no hero (index.html)
   Réplica em HTML do dashboard do admin (repos/admin: pages/portal/admin/dashboard,
   components/admin/novo-agendamento-aviso). O app é montado em 1428×818 px, com as
   medidas do admin, e escalado para a largura da moldura por --s (js/hero-demo.js).
   ═══════════════════════════════════════════════════════════ */

.gx-demo {
  --s: 0.62;
  position: relative;
  aspect-ratio: 1428 / 818;
  overflow: hidden;
  background: #fbfcfe;
}

.gx-demo__app {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 85px 1fr;
  grid-template-rows: 52px 1fr;
  width: 1428px;
  height: 818px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  background: #fbfcfe;
  color: #111a34;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
/* :where() zera a especificidade: qualquer classe da demo vence este reset */
:where(.gx-demo__app, .gx-cel__app) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.gx-demo__app img,
.gx-cel__app img { max-width: none; }

/* ── Topo (shell do admin) ── */
.gx-demo__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 0 22px;
  background: #223548;
  color: #fff;
  font-size: 13px;
}
.gx-demo__top > .fa-bars { width: 18px; font-size: 16px; opacity: 0.85; }
.gx-demo__logo { width: 24px; height: 24px; margin-left: 12px; border-radius: 6px; }
.gx-demo__slash { margin: 0 -2px; color: rgba(255, 255, 255, 0.35); font-size: 16px; }
.gx-demo__conta { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.gx-demo__busca {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 280px;
  height: 33px;
  margin-left: 12px;
  padding: 0 7px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
}
.gx-demo__busca kbd {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
}
.gx-demo__novo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  margin-left: auto;
  padding: 0 11px;
  border-radius: 8px;
  background: #149cf0;
  font-weight: 700;
}
.gx-demo__novo .fa-chevron-down { font-size: 9px; }
.gx-demo__acoes-hoje { display: inline-flex; align-items: center; gap: 7px; margin: 0 6px 0 8px; font-weight: 600; }
.gx-demo__acoes-hoje .far { font-size: 15px; }
.gx-demo__acoes-hoje b { width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #f43f5e; }
.gx-demo__top-ico { font-size: 17px; opacity: 0.9; }
.gx-demo__sino { position: relative; width: 32px; height: 32px; margin-left: 4px; font-size: 17px; }
.gx-demo__sino b {
  position: absolute;
  top: 0;
  right: -3px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
}
.gx-demo__sino.is-tocando .far { animation: gx-demo-sino 0.9s ease; transform-origin: 50% 0; }
@keyframes gx-demo-sino {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  35% { transform: rotate(-14deg); }
  55% { transform: rotate(9deg); }
  75% { transform: rotate(-5deg); }
}
.gx-demo__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 10px;
  padding-left: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #1b2a40;
  font-size: 11px;
  font-weight: 700;
  box-shadow: -11px 0 0 -10px rgba(255, 255, 255, 0.2);
}
.gx-demo__top-chev { font-size: 9px; opacity: 0.8; }

/* ── Menu lateral recolhido ── */
.gx-demo__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
  background: #223548;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}
.gx-demo__side i { display: grid; place-items: center; width: 44px; height: 34px; border-radius: 9px; }
.gx-demo__side i.is-ativo { background: rgba(0, 171, 250, 0.16); color: #38bdf8; box-shadow: inset 3px 0 0 #00abfa; }
.gx-demo__side hr { width: 40px; margin: 8px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.gx-demo__side .fa-angle-double-left { margin-top: auto; }

/* ── Conteúdo ── */
.gx-demo__main { position: relative; overflow: hidden; padding-top: 24px; transition: opacity 0.35s ease; }
.gx-demo__app.is-trocando .gx-demo__main { opacity: 0.3; }
.gx-demo__conteudo { width: 1050px; margin: 0 auto; }

/* Card escuro "Seu dia" (.dash-mob__hero no desktop) */
.gx-demo__hero {
  position: relative;
  padding: 22px 26px 20px;
  border-radius: 20px;
  background:
    radial-gradient(160% 100% at 50% -30%, rgba(0, 171, 250, 0.28), transparent 55%),
    linear-gradient(180deg, #16223b 0%, #101a2f 100%);
  color: #fff;
  box-shadow: 0 12px 28px -18px rgba(6, 14, 32, 0.55);
}
.gx-demo__hero-topo { display: flex; justify-content: space-between; font-size: 11.2px; font-weight: 600; }
.gx-demo__hero-topo span:first-child { color: rgba(255, 255, 255, 0.72); letter-spacing: 0.09em; text-transform: uppercase; }
.gx-demo__hero-topo span:last-child { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.gx-demo__hero-linha { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.gx-demo__hero-valor {
  font-size: 36.8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gx-demo__olho {
  display: grid;
  place-items: center;
  align-self: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 15px;
  transition: background 0.18s ease;
}
.gx-demo__olho:hover { background: rgba(255, 255, 255, 0.18); }
.gx-demo__hero-ctx { margin-top: 10px; color: rgba(255, 255, 255, 0.72); font-size: 13.1px; line-height: 1.5; }
.gx-demo__hero-ctx strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.gx-demo__hero-ctx strong.is-ok { color: #4ade80; }
.gx-demo__hero-ctx > span { margin: 0 4px; opacity: 0.4; }
.gx-demo__pills { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; }
.gx-demo__pill { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 89.6px; font-size: 11.5px; font-weight: 600; }
.gx-demo__pill > span {
  display: grid;
  place-items: center;
  width: 45.6px;
  height: 45.6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.11);
  font-size: 16.8px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gx-demo__pill:hover > span:not(.is-destaque) { background: rgba(255, 255, 255, 0.2); }
.gx-demo__pill > span.is-destaque { background: #00abfa; box-shadow: 0 6px 14px -6px rgba(0, 171, 250, 0.55); }
.gx-demo__dica {
  position: absolute;
  top: 104px;
  left: 370px; /* centro do atalho Copiar link */
  padding: 7px 12px;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(6, 14, 32, 0.35);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.gx-demo__dica i { margin-right: 6px; color: #16a34a; }
.gx-demo__dica.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* KPIs (.dhv2-kpi) */
.gx-demo__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.gx-demo__kpi {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gx-demo__kpi.is-destaque { border-color: #7dd3fc; box-shadow: 0 0 0 4px rgba(0, 171, 250, 0.14); }
.gx-demo__kpi-label { display: inline-flex; align-items: center; gap: 5.6px; color: #64748b; font-size: 11.8px; }
.gx-demo__kpi-label i { font-size: 12px; }
.gx-demo__kpi-label .is-teal { color: #0f6e56; }
.gx-demo__kpi-label .is-roxo { color: #534ab7; }
.gx-demo__kpi-label .is-ambar { color: #854f0b; }
.gx-demo__kpi-label .is-dourado { color: #ba7517; }
.gx-demo__kpi-valor {
  margin: 4px 0 2px;
  color: #111a34;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gx-demo__kpi-valor.is-vazio { color: #cbd5e1; }
.gx-demo__kpi-valor small { margin-left: 2px; color: #94a3b8; font-size: 11.8px; font-weight: 500; letter-spacing: 0; }
.gx-demo__kpi-sub { display: block; color: #94a3b8; font-size: 10.6px; }

/* Parte de baixo: próximos agendamentos e gráfico da semana */
.gx-demo__baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 32px; }

.gx-demo__ap { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 12px; }
.gx-demo__ap-topo { display: flex; align-items: center; justify-content: space-between; }
.gx-demo__ap-topo small { display: block; color: #475569; font-size: 11.8px; text-transform: uppercase; }
.gx-demo__ap-topo strong { display: block; color: #0f172a; font-size: 16px; font-weight: 800; }
.gx-demo__ver { display: inline-flex; align-items: center; gap: 5px; color: #185fa5; font-size: 12.8px; font-weight: 600; }
.gx-demo__ver i { font-size: 11px; }
.gx-demo__semana { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)) 30px; gap: 6px; }
.gx-demo__semana > span,
.gx-demo__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 3px 2px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
}
.gx-demo__semana > span { background: #f8fafc; color: #475569; font-size: 11px; }
.gx-demo__dia { text-align: center; transition: background 0.2s ease, border-color 0.2s ease; }
.gx-demo__dia:hover { background: #f8fafc; }
.gx-demo__dia small { color: #64748b; font-size: 9.9px; font-weight: 700; line-height: 1; }
.gx-demo__dia small + b + small { font-size: 9.6px; font-weight: 400; text-transform: lowercase; }
.gx-demo__dia b { color: #0f172a; font-size: 15.2px; font-weight: 800; line-height: 1.15; }
.gx-demo__dia.is-ativo { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.1); }

.gx-demo__lista { display: grid; gap: 8px; }
.gx-demo__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  animation: gx-demo-entra 0.35s ease both;
}
.gx-demo__item.is-novo { border-color: #7dd3fc; box-shadow: 0 0 0 4px rgba(0, 171, 250, 0.14); }
@keyframes gx-demo-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.gx-demo__item strong { display: block; margin-bottom: 3px; color: #0f172a; font-size: 15px; font-weight: 800; }
.gx-demo__item p { color: #334155; font-size: 12.5px; line-height: 1.55; }
.gx-demo__item p i { width: 16px; color: #475569; font-size: 11px; }
.gx-demo__vazio { padding: 22px 12px; border: 1px dashed rgba(15, 23, 42, 0.1); border-radius: 10px; color: #64748b; font-size: 13px; text-align: center; }
.gx-demo__status {
  padding: 3px 8px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo);
  color: var(--cor);
  font-size: 10.9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.gx-demo__status.is-confirmado { --cor: #1f7a45; --fundo: #eaf7ef; --borda: #b7e4c7; }
.gx-demo__status.is-finalizado { --cor: #00abfa; --fundo: #e8f0ff; --borda: #bfd5ff; }
.gx-demo__status.is-pendente { --cor: #9a6700; --fundo: #fff4e6; --borda: #ffd8a8; }
.gx-demo__mais { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; color: rgba(15, 23, 42, 0.72); font-size: 13px; font-weight: 800; }
.gx-demo__mais span { flex: 1; height: 1.5px; background: rgba(15, 23, 42, 0.1); }

.gx-demo__graf { min-width: 0; padding-right: 10px; }
.gx-demo__graf > strong { display: block; color: #0f172a; font-size: 16px; font-weight: 700; }
.gx-demo__graf > small { display: block; color: #64748b; font-size: 12.8px; }
.gx-demo__graf svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.gx-demo__graf svg text { fill: #94a3b8; font-size: 9px; }
.gx-demo__graf-linha { fill: none; stroke: #3d6df2; stroke-width: 2; }
.gx-demo__graf-ponto { fill: #3d6df2; stroke: #fff; stroke-width: 2; transition: opacity 0.3s ease; }
.gx-demo__legenda { display: flex; justify-content: center; gap: 14px; margin-top: 10px; color: #475569; font-size: 11px; }
.gx-demo__legenda span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--cor); }
.gx-demo__total { margin-top: 12px; color: #64748b; font-size: 12px; }
.gx-demo__total b { color: #15803d; }

/* Aviso "Uhuu! Novo agendamento" (novo-agendamento-aviso do admin) */
.gx-demo__aviso {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.gx-demo__aviso.is-aberto { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.gx-demo__aviso-card {
  position: relative;
  width: 440px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gx-demo__aviso.is-aberto .gx-demo__aviso-card { transform: none; }
.gx-demo__aviso-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 56px 16px 20px;
  background: linear-gradient(180deg, #eef3fe 0%, #fff 100%);
}
.gx-demo__aviso-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #1a50e0;
  color: #fff;
  font-size: 21px;
  box-shadow: 0 8px 18px rgba(26, 80, 224, 0.32);
}
.gx-demo__aviso-topo strong { display: block; color: #1a50e0; font-size: 13.1px; font-weight: 700; }
.gx-demo__aviso-topo small { display: block; margin-top: 2px; color: #64748b; font-size: 12px; }
.gx-demo__aviso-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f3f5;
  color: #475569;
  font-size: 13px;
}
.gx-demo__aviso-corpo { padding: 4px 20px 16px; }
.gx-demo__aviso-cli { display: flex; align-items: center; gap: 12px; }
.gx-demo__aviso-cli span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef3fe;
  color: #1a50e0;
  font-size: 13.6px;
  font-weight: 700;
}
.gx-demo__aviso-cli b { font-size: 17.9px; }
.gx-demo__aviso-quando {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #f8fafc;
}
.gx-demo__aviso-cal { flex: none; width: 44px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 10px; background: #fff; text-align: center; }
.gx-demo__aviso-cal small { display: block; padding: 2px 0; background: #1a50e0; color: #fff; font-size: 9.6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gx-demo__aviso-cal b { display: block; font-size: 17.9px; line-height: 26px; }
.gx-demo__aviso-quando strong { display: block; font-size: 15.2px; }
.gx-demo__aviso-quando span { display: block; margin-top: 1px; color: #64748b; font-size: 12px; }
.gx-demo__aviso-item { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.gx-demo__aviso-item > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #e6f1fb; color: #185fa5; font-size: 13px; }
.gx-demo__aviso-item div { flex: 1; font-size: 14px; }
.gx-demo__aviso-item div strong { display: block; font-weight: 600; }
.gx-demo__aviso-item div span { display: block; color: #64748b; font-size: 12px; }
.gx-demo__aviso-item > b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-demo__aviso-total { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.gx-demo__aviso-total small { display: block; color: #64748b; font-size: 12px; }
.gx-demo__aviso-total b { font-size: 16.8px; font-variant-numeric: tabular-nums; }
.gx-demo__aviso-pago {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf7ef;
  color: #1f7a45;
  font-size: 11.5px;
  font-weight: 600;
}
.gx-demo__aviso-pago::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.gx-demo__aviso-pe { display: flex; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid rgba(15, 23, 42, 0.08); }
.gx-demo__aviso-pe button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.gx-demo__aviso-pe .is-pri { border-color: #1a50e0; background: #1a50e0; color: #fff; }

/* Cursor que encena o uso. O tamanho divide pela escala (--s) para ficar com ~30 px na tela em qualquer largura */
.gx-demo__cursor {
  --tam: calc(30px / var(--s));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--tam);
  height: var(--tam);
  opacity: 0;
  transform: translate(var(--x, 760px), var(--y, 640px));
  transition: transform var(--t, 750ms) cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease;
  pointer-events: none;
}
.gx-demo__cursor.is-visivel { opacity: 1; }
.gx-demo__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(2px / var(--s)) calc(3px / var(--s)) rgba(0, 0, 0, 0.4));
  transform-origin: 0 0;
  transition: transform 0.12s ease;
}
.gx-demo__cursor.is-clique svg { animation: gx-demo-aperto 0.3s ease; }
@keyframes gx-demo-aperto {
  40% { transform: scale(0.8); }
}
/* onda azul no ponto do clique */
.gx-demo__cursor::after {
  content: "";
  position: absolute;
  top: calc(var(--tam) * -1.1);
  left: calc(var(--tam) * -1.1);
  width: calc(var(--tam) * 2.2);
  height: calc(var(--tam) * 2.2);
  border: calc(4px / var(--s)) solid #00abfa;
  border-radius: 50%;
  background: rgba(0, 171, 250, 0.22);
  opacity: 0;
}
.gx-demo__cursor.is-clique::after { animation: gx-demo-clique 0.7s ease-out; }
@keyframes gx-demo-clique {
  0% { opacity: 1; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1); }
}

/* Hover e aperto simulados (o cursor da demo não dispara :hover de verdade) */
.gx-demo__pill.is-hover > span:not(.is-destaque) { background: rgba(255, 255, 255, 0.22); }
.gx-demo__pill.is-hover > span.is-destaque { box-shadow: 0 0 0 5px rgba(0, 171, 250, 0.35); }
.gx-demo__olho.is-hover { background: rgba(255, 255, 255, 0.24); }
.gx-demo__dia.is-hover { border-color: rgba(59, 130, 246, 0.35); background: #f1f5f9; }
.gx-demo__aviso-pe button.is-hover { background: #f1f5f9; }
.gx-demo__aviso-pe .is-pri.is-hover { background: #1543c2; }
.gx-demo__app .is-apertado,
.gx-cel__app .is-apertado { transform: scale(0.92); transition: transform 0.12s ease; }

/* Notificação do sistema no celular (dentro do app, em px do app), junto com o aviso do painel */
.gx-push {
  position: absolute;
  top: calc(var(--ilha) / var(--s) + 8px);
  right: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(245, 247, 250, 0.96);
  box-shadow: 0 14px 32px rgba(6, 14, 32, 0.3);
  color: #0f172a;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.gx-push.is-visivel { opacity: 1; transform: none; }
.gx-push img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.gx-push div { flex: 1; min-width: 0; }
.gx-push strong,
.gx-push span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-push small { align-self: flex-start; color: #64748b; font-size: 12px; }


/* Com "reduzir movimento" a demo começa parada; se a pessoa der o play, anima normalmente */
@media (prefers-reduced-motion: reduce) {
  .gx-hero__stage:not(.is-demo-rodando) .gx-demo__app *,
  .gx-hero__stage:not(.is-demo-rodando) .gx-cel__app *,
  .gx-hero__stage:not(.is-demo-rodando) .gx-push { animation: none !important; transition: none !important; }
}

/* Botão "Demonstração" na barra do navegador: avisa que a tela é animada e pausa/retoma */
.gx-hero__chrome { position: relative; }
.gx-hero__demo {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #dbe4ee;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 0.18s ease;
}
.gx-hero__demo:hover { background: rgba(255, 255, 255, 0.14); }
.gx-hero__demo:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.gx-hero__demo b { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: gx-demo-pulso 1.6s ease-out infinite; }
.gx-hero__demo.is-pausado b { background: #94a3b8; animation: none; }
.gx-hero__demo i { font-size: 0.625rem; opacity: 0.85; }
@keyframes gx-demo-pulso {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65); }
  100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

@media (max-width: 700px) {
  .gx-hero__demo { right: 4px; gap: 5px; height: 18px; padding: 0 7px; font-size: 0.625rem; }
  .gx-hero__demo b { width: 5px; height: 5px; }
}

/* ═══════════════════════════════════════════════════════════
   App do celular: réplica da home mobile do admin (dash-mob, ap-tl e menu inferior), montada em
   390×860 px e escalada para a tela do celular por --s. No mobile é a única tela da demo.
   ═══════════════════════════════════════════════════════════ */
.gx-cel {
  --s: 0.62;
  --ilha: 44px; /* faixa de status que a ilha do iPhone cobre, em px da tela */
  position: relative;
  aspect-ratio: 390 / 860;
  overflow: hidden;
  border-radius: 37px;
  background: #223548;
}
.gx-cel__app {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 860px;
  overflow: hidden;
  transform: scale(var(--s));
  transform-origin: 0 0;
  background: #fff;
  color: #16202e;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  transition: opacity 0.35s ease;
}
.gx-cel__app.is-trocando { opacity: 0.35; }
.gx-cel__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--ilha) / var(--s));
  padding: 0 30px;
  background: #223548;
  color: #fff;
  font-size: 14px;
}
.gx-cel__status b { font-weight: 600; }
.gx-cel__status span { display: flex; gap: 5px; font-size: 11px; }

.gx-cel__top { display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 14px 0 18px; background: #223548; color: #fff; font-size: 19px; }
.gx-cel__top img { width: 26px; height: 26px; margin-left: -4px; border-radius: 6px; }
.gx-cel__top-busca { margin-left: auto; }
.gx-cel__lampada,
.gx-cel__sino { position: relative; }
.gx-cel__lampada::after { content: ""; position: absolute; top: -1px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: #f43f5e; }
.gx-cel__sino b {
  position: absolute;
  top: -8px;
  right: -11px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.gx-cel__sino.is-tocando .far { animation: gx-demo-sino 0.9s ease; transform-origin: 50% 0; }
.gx-cel__avatar { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: #1b2a40; font-size: 12px; font-weight: 700; }

.gx-cel__ola { display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: #223548; color: #fff; }
.gx-cel__ola strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.gx-cel__ola small { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.gx-cel__copiar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: #7dd3fc; font-size: 13.4px; font-weight: 700; }
.gx-cel__copiar i { font-size: 11px; }

/* card do faturamento vira a continuação da faixa escura, com o "lábio" branco no rodapé */
.gx-cel__hero { position: relative; padding: 16px 16px 42px; background: #223548; color: #fff; }
.gx-cel__hero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 22px; border-radius: 22px 22px 0 0; background: #fff; }
.gx-cel__valor { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gx-cel__hero .gx-demo__hero-ctx { font-size: 12px; }
.gx-cel__pills { display: flex; gap: 5px; margin: 22px -16px 0 0; overflow: hidden; }
.gx-cel__pills .gx-demo__pill { flex: none; width: 74px; font-size: 11px; }
.gx-cel__pills .gx-demo__pill > span { width: 48px; height: 48px; font-size: 17px; }
.gx-cel__pills em { display: block; max-width: 100%; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.gx-cel__agenda { padding: 8px 20px 0; }
.gx-cel__agenda .gx-demo__ap-topo small { color: #16202e; font-size: 12px; }
.gx-cel__agenda .gx-demo__ap-topo strong { font-size: 16.5px; }
.gx-cel__agenda .gx-demo__ver { font-size: 13.4px; font-weight: 700; }
.gx-cel__semana { display: flex; gap: 8px; margin: 12px -20px 0 0; }
.gx-cel__semana > span { display: grid; place-items: center; flex: none; width: 36px; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 9px; background: #f8fafc; color: #475569; font-size: 12px; }
.gx-cel__dias { display: flex; gap: 8px; overflow: hidden; }
.gx-cel__dias .gx-demo__dia { flex: none; width: 55px; min-height: 52px; }
.gx-cel__lista { margin-top: 10px; }
.gx-cel__tl {
  --barra: #15803d;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  animation: gx-demo-entra 0.35s ease both;
}
.gx-cel__tl:last-child { border-bottom: 0; }
.gx-cel__tl.is-finalizado { --barra: #185fa5; }
.gx-cel__tl.is-pendente { --barra: #d98f00; }
.gx-cel__tl.is-novo { margin: 0 -10px; padding-right: 10px; padding-left: 10px; border-radius: 10px; background: #eff8ff; box-shadow: inset 0 0 0 1px #7dd3fc; }
.gx-cel__tl > b { flex: none; width: 44px; color: #16202e; font-size: 12.8px; font-weight: 700; text-align: right; }
.gx-cel__tl > i:first-of-type { flex: none; align-self: stretch; width: 3px; border-radius: 2px; background: var(--barra); }
.gx-cel__tl > div { flex: 1; min-width: 0; }
.gx-cel__tl strong { display: flex; align-items: center; gap: 6px; color: #16202e; font-size: 13.4px; font-weight: 700; }
.gx-cel__tl strong em { padding: 1px 7px; border-radius: 999px; background: rgba(217, 143, 0, 0.14); color: #92660a; font-size: 9.6px; font-style: normal; font-weight: 600; }
.gx-cel__tl span { display: block; overflow: hidden; color: #7c8898; font-size: 11.2px; text-overflow: ellipsis; white-space: nowrap; }
.gx-cel__tl > .fa-chevron-right { flex: none; color: #7c8898; font-size: 12px; }
.gx-cel__graf { margin-top: 24px; }
.gx-cel__graf strong { display: block; color: #0f172a; font-size: 16.5px; font-weight: 800; }
.gx-cel__graf small { display: block; color: #64748b; font-size: 13px; }

.gx-cel__grade { position: absolute; right: 12px; bottom: 100px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: #2563eb; font-size: 18px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16); }
.gx-cel__nav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: 78px;
  padding-bottom: 10px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  color: #8a94a3;
  font-size: 11px;
}
.gx-cel__nav span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gx-cel__nav span i { font-size: 20px; }
.gx-cel__nav .is-ativo { position: relative; color: #0ea5e9; }
.gx-cel__nav .is-ativo::before { content: ""; position: absolute; top: -13px; width: 32px; height: 3px; border-radius: 2px; background: #0ea5e9; }
.gx-cel__nav b {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 50px;
  height: 50px;
  margin-top: -34px;
  border: 3px solid #fff;
  border-radius: 15px;
  background: #00abfa;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 18px rgba(0, 171, 250, 0.4);
}
.gx-cel__toast {
  position: absolute;
  bottom: 96px;
  left: 50%;
  z-index: 2;
  padding: 9px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gx-cel__toast i { margin-right: 6px; color: #4ade80; }
.gx-cel__toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* Aviso de agendamento novo no celular: bottom sheet, botões empilhados (como no admin) */
.gx-cel__folha {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.gx-cel__folha.is-aberto { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.gx-cel__folha-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: #fff;
  color: #0f172a;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gx-cel__folha.is-aberto .gx-cel__folha-card { transform: none; }
.gx-cel__alca { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cbd5e1; }
.gx-cel__folha .gx-demo__aviso-topo { padding: 24px 20px 14px; }
.gx-cel__folha .gx-demo__aviso-pe { flex-direction: column; padding-bottom: 28px; }

/* "Dedo" dos toques simulados, com ~34 px na tela em qualquer largura */
.gx-cel__toque {
  --tam: calc(34px / var(--s));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: var(--tam);
  height: var(--tam);
  margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2);
  border: calc(2px / var(--s)) solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.3);
  box-shadow: 0 calc(2px / var(--s)) calc(8px / var(--s)) rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate(var(--x, 195px), var(--y, 640px));
  transition: transform var(--t, 650ms) cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease;
  pointer-events: none;
}
.gx-cel__toque.is-visivel { opacity: 1; }
.gx-cel__toque.is-clique { animation: gx-cel-toque 0.3s ease; }
@keyframes gx-cel-toque {
  40% { scale: 0.75; }
}
.gx-cel__toque::after {
  content: "";
  position: absolute;
  inset: calc(var(--tam) * -0.5);
  border: calc(3px / var(--s)) solid #00abfa;
  border-radius: 50%;
  opacity: 0;
}
.gx-cel__toque.is-clique::after { animation: gx-demo-clique 0.7s ease-out; }

/* Botão "Demonstração" do celular: só aparece no mobile, onde a barra do navegador some */
.gx-hero__demo--cel { display: none; }

@media (max-width: 700px) {
  .gx-hero__screen { display: none; }
  .gx-hero__phone { width: min(76%, 280px); margin: 0 auto; padding: 8px; border-radius: 40px; }
  .gx-hero__island { top: 15px; height: 20px; }
  .gx-cel { --ilha: 38px; border-radius: 32px; }
  .gx-hero__demo--cel {
    position: static;
    display: flex;
    width: fit-content;
    height: 28px;
    margin: 16px auto 0;
    padding: 0 12px;
    border-color: transparent;
    background: #223548;
    color: #e2e8f0;
    font-size: 0.75rem;
    transform: none;
  }
  .gx-hero__demo--cel b { width: 7px; height: 7px; }
}