/* ============================================================
   Ideal Sistemas — seção "00 · Em operação" da home (demo-home.css)

   Grade de miniaturas AO VIVO: um <iframe> real do mini.html de
   cada sistema (mesmo padrão da vitrine /demo/, ver
   deploy/demo/demo-vitrine.css), carregado só quando entra perto
   da viewport. Prefixo .home-mini- para nunca colidir com as
   classes .viz-* da vitrine nem com o vocabulário .demo-* (este
   é compartilhado com a rota /demo/, ver demo.css).

   Depende de: ../style.css (tokens, .btn) e demo.css (.demo-pip).
   ============================================================ */

/* etiqueta "demo pública · dados fictícios" da seção ---------- */
.demo-selo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted, #718070);
  border:1px solid var(--line-2, #CDD6C7);
  background:var(--surface, #FFFFFF);
  padding:7px 12px; margin:0 0 clamp(32px,4vw,44px);
}

/* grade --------------------------------------------------------*/
.home-mini-grade{
  list-style:none; margin:0 0 clamp(28px,3.4vw,40px); padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px,1.8vw,22px);
}
@media (max-width:1080px){ .home-mini-grade{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:540px){ .home-mini-grade{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }

.home-mini-item{ min-width:0; }

.home-mini-card{
  --cat-cor: var(--dim, #A3AFA0);
  display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--line-2, #CDD6C7);
  border-top:3px solid var(--cat-cor);
  border-radius:10px; overflow:hidden;
  background:var(--surface, #FFFFFF);
  box-shadow:0 2px 10px -6px rgba(24,33,27,.14);
  text-decoration:none; color:inherit;
  transition:transform .28s var(--ease, cubic-bezier(.16,1,.3,1)),
             box-shadow .28s var(--ease, cubic-bezier(.16,1,.3,1)),
             border-color .28s var(--ease, cubic-bezier(.16,1,.3,1));
}
a.home-mini-card:hover,
a.home-mini-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--cat-cor);
  box-shadow:0 22px 42px -20px color-mix(in srgb, var(--cat-cor) 55%, rgba(24,33,27,.3));
}
a.home-mini-card:focus-visible{ outline:2px solid var(--cat-cor); outline-offset:2px; }

.home-mini-tela{
  position:relative; display:block; width:100%; aspect-ratio:16/10;
  overflow:hidden; background:var(--surface-2, #EFF3EB);
  border-bottom:1px solid var(--line-2, #CDD6C7);
}
.home-mini-tela-icone{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:28px; color:color-mix(in srgb, var(--cat-cor) 45%, var(--line-2, #CDD6C7));
  pointer-events:none;
}
.home-mini-tela iframe{
  position:absolute; top:0; left:0;
  width:1000px; height:625px; border:0;
  transform:scale(.33); transform-origin:0 0;
  pointer-events:none;           /* o card inteiro é o link; o iframe é só vitrine */
  background:#fff;
}
/* mini.html não carregou (rede ou arquivo faltando) — fica só o ícone */
.home-mini-tela--sem-mini .home-mini-tela-icone{ font-size:32px; }

.home-mini-rotulo{
  display:flex; flex-direction:column; gap:5px;
  padding:12px 13px 14px;
}
.home-mini-sig{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cat-cor) 70%, var(--muted, #718070));
}
.home-mini-nome{
  font-family:var(--display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-weight:700; font-size:15px; line-height:1.22; letter-spacing:-.01em;
  color:var(--ink, #18211B);
}
.home-mini-estado{
  display:inline-flex; align-items:center; gap:7px; margin-top:1px;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent, #5F8F26); font-weight:500;
}

/* nota discreta — Base Ideal não é demo navegável -------------- */
.home-base-nota{
  margin:0 0 clamp(30px,4vw,44px);
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:11.5px; letter-spacing:.03em; line-height:1.6;
  color:var(--muted, #718070);
}
.home-base-sig{ color:var(--ink-2, #47544A); font-weight:600; }

/* CTA para a vitrine completa ---------------------------------- */
.demo-cta{ margin:0; }

@media (prefers-reduced-motion:reduce){
  .home-mini-card{ transition:none; }
}