/* Tecela AI · visual do hero de /servicos/software-sob-medida ("as camadas de um sistema"). Prefixo exclusivo: .swl- */

.swl-stack {position:relative;display:grid;gap:14px;padding-left:26px}
.swl-rail {position:absolute;left:9px;top:2px;bottom:2px;width:2px;border-radius:2px;background:linear-gradient(var(--border),var(--border))}
.swl-rail::before,.swl-rail::after {content:"";position:absolute;left:50%;translate:-50% 0;width:7px;height:7px;border-radius:50%;background:var(--bg-2);border:2px solid var(--border)}
.swl-rail::before {top:-2px}
.swl-rail::after {bottom:-2px}

.swl-dot {position:absolute;left:9px;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;z-index:2}
.swl-dot-req {top:100%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.swl-dot-res {top:0%;background:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 22%,transparent)}

.swl-layer {position:relative;border:1px solid var(--border);border-radius:12px;background:var(--bg-2);padding:14px 16px}
.swl-layer-label {display:block;font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* Interface: uma telinha de app */
.swl-screen {display:grid;gap:7px;border:1px solid var(--border);border-radius:8px;background:var(--bg);padding:10px 12px}
.swl-screen-top {display:flex;align-items:center;gap:6px;margin-bottom:2px}
.swl-screen-top i {width:6px;height:6px;border-radius:50%;background:var(--border)}
.swl-screen-bar {height:7px;width:46%;border-radius:4px;background:var(--fg-2);opacity:.45}
.swl-screen-row {height:7px;border-radius:4px;background:var(--border)}
.swl-screen-row.w70 {width:70%}
.swl-screen-row.w50 {width:50%}
.swl-screen-actions {display:flex;justify-content:flex-end;margin-top:2px}
.swl-screen-btn {width:58px;height:18px;border-radius:6px;background:var(--accent)}

/* API: linhas de requisição e resposta */
.swl-api {display:grid;gap:9px}
.swl-api-line {display:flex;align-items:center;gap:9px;font:500 12px var(--font-mono);color:var(--fg-2)}
.swl-api-line i {width:6px;height:6px;border-radius:50%;flex:none;background:var(--border)}
.swl-api-req i {background:var(--accent)}
.swl-api-res i {background:var(--accent-2)}

/* Banco de dados: tag de isolamento + tabela */
.swl-db {display:grid;gap:10px}
.swl-db-tag {justify-self:start;font:600 10px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent-2) 45%,var(--border));padding:3px 9px;border-radius:99px}
.swl-db-table {border:1px solid var(--border);border-radius:8px;overflow:hidden}
.swl-db-row {display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:8px;padding:7px 10px;font:500 12px var(--font-mono);color:var(--fg-2);border-bottom:1px solid var(--border)}
.swl-db-row:last-child {border-bottom:0}
.swl-db-row.swl-db-head {color:var(--muted);background:color-mix(in srgb,var(--bg) 55%,transparent)}
.swl-db-row span:nth-child(2) {opacity:.55;letter-spacing:.04em}

/* Sem movimento: os dois pontos ficam parados nas posições de chegada (ida concluída, volta concluída). */
@media(prefers-reduced-motion:no-preference) {
  .swl-dot-req {animation:swl-down 7s ease-in-out infinite}
  .swl-dot-res {animation:swl-up 7s ease-in-out infinite}
}
@keyframes swl-down {
  0% {top:0%;opacity:0}
  9% {opacity:1}
  44% {top:100%;opacity:1}
  52%,100% {top:100%;opacity:0}
}
@keyframes swl-up {
  0%,52% {top:100%;opacity:0}
  61% {opacity:1}
  96% {top:0%;opacity:1}
  100% {top:0%;opacity:0}
}

@media(max-width:600px) {
  .swl-stack {padding-left:22px;gap:12px}
  .swl-layer {padding:12px 13px}
  .swl-db-row {grid-template-columns:0.7fr 1.6fr 1fr;gap:6px;padding:6px 8px;font-size:11px}
  .swl-api-line {font-size:11px}
}