/* ============================================================
   360 Tech — Software on-demand
   Terminal de código + galería de mockups (ERP, financiero)
   Depende de site.css (tokens) · product.css (.phero) · site-mocks.css (.mock)
   ============================================================ */

/* ---------- terminal (hero) ---------- */
.term{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(7,12,20,.98), rgba(4,7,13,.99));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  font-family:var(--f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
}
.term__bar{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(4,8,14,.6); }
.term__dot{ width:11px; height:11px; border-radius:50%; background:#28323d; }
.term__dot:nth-child(1){ background:#d3554f; } .term__dot:nth-child(2){ background:#d9a441; } .term__dot:nth-child(3){ background:#4fae5f; }
.term__title{ margin-left:8px; font-size:.76rem; color:var(--mut-2); }
.term__body{ padding:20px 20px 22px; min-height:400px; font-size:.9rem; line-height:1.85; }
.tline{ white-space:pre-wrap; opacity:0; }
.tline.show{ opacity:1; }
.tprompt{ color:var(--turq); }
.tpath{ color:var(--azul-2); }
.tcmd{ color:var(--white); }
.tok{ color:var(--turq); }        /* ✓ */
.trun{ color:var(--mut); }        /* → */
.tcom{ color:var(--mut-3); }      /* comment */
.tstr{ color:var(--turq-soft); }
.tcursor{ display:inline-block; width:9px; height:1.05em; vertical-align:-2px; background:var(--turq); animation:tcur 1s steps(1) infinite; }
@keyframes tcur{ 50%{ opacity:0; } }
.tdone{ color:var(--white); }
.tbadge{ display:inline-block; margin-left:8px; font-family:var(--f-display); font-weight:300; font-size:.56rem; letter-spacing:.14em; color:var(--turq); border:1px solid rgba(17,195,189,.3); border-radius:100px; padding:2px 9px; vertical-align:middle; }
@media(max-width:900px){ .term__body{ min-height:0; } }

/* ---------- gallery / mocks: ahora en css/showcase.css ---------- */

/* ---------- proceso (4 pasos) ---------- */
.proc{ margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pcard{ position:relative; padding:28px 26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, rgba(13,22,36,.5), rgba(8,13,22,.34)); transition:transform .45s var(--ease), border-color .45s; }
.pcard:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.pcard__n{ font-family:var(--f-mono,Menlo,monospace); font-size:.78rem; color:var(--turq); }
.pcard h4{ font-family:var(--f-sans); font-weight:600; font-size:1.24rem; letter-spacing:-.01em; margin:14px 0 9px; }
.pcard p{ color:var(--mut); font-size:.94rem; line-height:1.5; }
@media(max-width:900px){ .proc{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .proc{ grid-template-columns:1fr; } }