/* Tikray — Diagrama arquitectura (réplica de <tk-arch> del Home) */
.tka { --tka-bg: transparent; display: block; position: relative; width: 100%; font-family: Inter, system-ui, sans-serif; color: #04123C; overflow: hidden; }
.tka * { box-sizing: border-box; }
.tka-stage { position: relative; left: 0; top: 0; width: 1100px; height: 760px; transform-origin: 0 0; }
.tka.is-ready { overflow: visible; }
.tka svg.w { position: absolute; left: 0; top: 0; overflow: visible; }
.tka .ttl { white-space: nowrap; font: 600 14px/1 Poppins, sans-serif; letter-spacing: 1.5px; color: #04123C; text-transform: uppercase; }
.tka-dg { position: absolute; left: 0; top: 0; width: 1100px; height: 760px; }
.tka-stage > .sel { position: absolute; top: 0; align-items: center; }
.tka-stage > .sel.e { left: 8px; }
.tka-stage > .sel.r { right: 8px; }
.tka .sel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tka .pick { position: relative; width: 168px; height: 72px; border-radius: 16px; background: #fff; border: 1px solid #E3E8F2; box-shadow: 0 1px 2px rgba(4,18,60,.04), 0 12px 28px -16px rgba(4,18,60,.22); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tka .cc { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: 1; transition: opacity .11s ease; }
.tka .rw { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.tka .ar { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #E3E8F2; background: #fff; color: #4290EE; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -8px rgba(4,18,60,.3); transition: border-color .2s; }
.tka .ar:hover { border-color: #4290EE; }
.tka .ar:focus-visible { outline: 2px solid #22C1E9; outline-offset: 2px; }
.tka-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tka .node { position: absolute; width: 100px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tka .ic { position: relative; width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid #E7ECF5; box-shadow: 0 1px 2px rgba(4,18,60,.04), 0 8px 20px -14px rgba(4,18,60,.25); display: flex; align-items: center; justify-content: center; transition: border-color .3s, box-shadow .3s, background .3s; }
.tka .nm { font: 400 12px/1.2 Inter, sans-serif; color: #475069; white-space: nowrap; transition: color .3s; }
.tka .node.on .ic { border-color: #4290EE; background: #F3F7FF; box-shadow: 0 0 0 4px rgba(66,144,238,.14); }
.tka .node.on .nm { color: #04123C; font-weight: 500; }
.tka .new { position: absolute; top: -8px; right: -18px; font: 600 8.5px/1 Poppins, sans-serif; letter-spacing: .06em; color: #fff; padding: 3px 5px; border-radius: 5px; background: linear-gradient(90deg, #6363F4, #22C1E9); }
.tka .tk { border-radius: 24px; background: linear-gradient(135deg, #3244FB, #03B8F8); box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px #CFE0FF, 0 0 0 12px rgba(207,224,255,.5), 0 0 54px 8px rgba(34,193,233,.32); }
.tka .tk img { display: block; width: 100%; height: 100%; filter: brightness(0) invert(1); }
.tka .mw { font: 600 13px/1 Poppins, sans-serif; letter-spacing: .16em; color: #04123C; }
.tka .aws { background: #fff; border: 1px solid #E7ECF5; border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(4,18,60,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.tka .svc { display: grid; grid-template-columns: repeat(3, 44px); gap: 14px 18px; }
.tka .svc span { width: 44px; height: 44px; border-radius: 50%; background: #EEF1F6; display: flex; align-items: center; justify-content: center; }
.tka .awsl { font: 700 20px/1 Poppins, sans-serif; color: #475069; letter-spacing: -.01em; display: flex; flex-direction: column; align-items: center; }

/* Mobile */
.tka-m { display: flex; flex-direction: column; align-items: stretch; }
.tka-m .mbox { background: #fff; border: 1px solid #E3E8F2; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tka-m .mbox .rw { width: 100%; }
.tka-m .mbox .ar { width: 44px; height: 44px; }
.tka-m .mbox .pick { flex: 1; width: auto; max-width: 280px; }
.tka-m .mbox .sel { width: 100%; }
.tka-m .mline { position: relative; height: 56px; width: 2px; margin: 0 auto; background: repeating-linear-gradient(180deg, #C9D1DF 0 4px, transparent 4px 8px); }
.tka-m .mline .dot { position: absolute; left: 50%; width: 8px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #6363F4, #22C1E9); transform: translate(-50%,-50%); opacity: 0; box-shadow: 0 0 12px rgba(34,193,233,.6); }
.tka-m .mmid { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0; }
.tka-m .mtag { font: 500 12px/1 Inter, sans-serif; color: #04123C; background: #E4EDFF; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.tka-m .mlist { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tka-m .mlist li { font: 400 13px/1.35 Inter, sans-serif; color: #475069; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; transition: all .3s; }
.tka-m .mlist li.on { color: #04123C; background: #fff; border-color: #4290EE; }

.tka .tka-lg { display: block; width: auto !important; max-width: 86%; max-height: 48px; object-fit: contain; }
.tka .tka-lg-t { display: inline-flex; align-items: center; gap: 7px; }
.tka .tka-lg-t img { display: block; width: auto !important; max-height: 48px; }
.tka .tka-lg-t span { font-family: Poppins, sans-serif; font-weight: 600; line-height: 1.1; color: #04123C; white-space: nowrap; }

.tka-rot-root { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.tka-rot-layer { grid-area: 1/1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; will-change: opacity, transform; }
.tka-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .tka-fx { display: none; } }