/* ═══════════════════════════════════════════════════════════════
   SMART NOVA — PORTADAS DE CASO DE ÉXITO
   Miniaturas dibujadas en vivo para las tarjetas del Home y del
   portafolio, y para la cabecera de cada caso.

   Lienzo 1600×900 (no 2560 como los módulos): estas se ven a ~390 px
   en la tarjeta y a ~1260 px en el detalle, así que nada baja de 30 px
   y las cifras van a 80–110 px para que se lean en la miniatura.
   ═══════════════════════════════════════════════════════════════ */

.snk{
  background:#080c14;
  --cyan:#00c8e0; --blue:#4d9bff; --violet:#a78bfa; --green:#22c55e; --orange:#fb923c;
  --line:rgba(255,255,255,.09);
  --t1:#eaf2ff; --t2:#9fb2cc; --t3:#6f83a0;
}
.snk-canvas{
  width:1600px;height:900px;
  font-family:"Inter",system-ui,sans-serif;color:var(--t1);
  display:flex;flex-direction:column;
}
/* Dentro de una tarjeta de caso el marco lo pone la tarjeta */
.lienzo.plano{border-radius:0;border:0;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;}

/* ─────────── Ventana de aplicación simplificada ─────────── */
.snk-win{flex:1;min-height:0;display:flex;flex-direction:column;background:#0b0f16;}
.snk-bar{display:flex;align-items:center;gap:20px;padding:26px 38px;border-bottom:1px solid var(--line);flex:none;}
.snk-mark{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 26px rgba(0,200,224,.35);}
.snk-mark i{width:15px;height:15px;transform:rotate(45deg);background:#080c14;display:block;}
.snk-name{font-size:30px;font-weight:700;letter-spacing:-.02em;}
.snk-name span{color:var(--t3);font-weight:500;}
.snk-tabs{display:flex;gap:10px;margin-left:auto;}
.snk-tabs span{font-size:20px;color:var(--t3);padding:8px 18px;border-radius:10px;}
.snk-tabs span.on{color:#04121a;font-weight:700;background:linear-gradient(135deg,var(--cyan),var(--blue));}

.snk-body{flex:1;min-height:0;padding:34px 38px;display:flex;flex-direction:column;gap:28px;}
.snk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;flex:none;}
.snk-kpi{background:#111827;border:1px solid var(--line);border-radius:20px;padding:26px 28px;
  border-top:3px solid var(--acc,var(--cyan));}
.snk-kpi-l{font-size:22px;color:var(--t2);font-weight:500;}
.snk-kpi-v{font-size:52px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:14px;}
.snk-kpi-f{font-size:20px;color:var(--t3);margin-top:12px;}

.snk-cols{flex:1;min-height:0;display:flex;align-items:flex-end;gap:20px;padding-bottom:4px;}
.snk-cols i{flex:1;border-radius:12px 12px 5px 5px;display:block;}

.snk-rows{display:flex;flex-direction:column;gap:16px;flex:none;}
.snk-row{display:flex;align-items:center;gap:20px;background:#111827;border:1px solid var(--line);
  border-radius:18px;padding:20px 24px;}
.snk-av{width:52px;height:52px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;}
.snk-row-n{font-size:24px;font-weight:600;}
.snk-row-d{font-size:19px;color:var(--t3);margin-top:5px;}
.snk-pill{font-size:19px;font-weight:700;padding:8px 20px;border-radius:99px;white-space:nowrap;}
.snk-amt{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-left:auto;white-space:nowrap;}

/* ─────────── Escena de sitios web ─────────── */
.snk-web{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(65% 60% at 50% 42%,rgba(0,140,220,.34),transparent 68%),
    radial-gradient(45% 45% at 16% 72%,rgba(167,139,250,.22),transparent 70%),
    radial-gradient(45% 45% at 86% 30%,rgba(34,197,94,.16),transparent 70%),
    #080c14;}
.snk-page{
  position:absolute;border-radius:26px;overflow:hidden;background:#111827;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 110px -20px rgba(0,0,0,.85);
  display:flex;flex-direction:column;
}
.snk-page-bar{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;
  background:#111827;border-bottom:1px solid var(--line);flex:none;}
.snk-page-bar i{width:11px;height:11px;border-radius:50%;background:#2a3852;display:block;}
.snk-page-b{flex:1;padding:40px 34px;display:flex;flex-direction:column;gap:16px;justify-content:center;}
.snk-line{height:24px;border-radius:8px;background:rgba(255,255,255,.22);display:block;}
.snk-line.sm{height:13px;background:rgba(255,255,255,.10);}
.snk-cta{height:50px;width:190px;border-radius:99px;margin-top:14px;display:block;}
.snk-blocks{display:flex;gap:12px;margin-top:16px;}
.snk-blocks i{flex:1;height:76px;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);display:block;}