/* KORTEX — Copiloto imersivo (revisao visual 20/10/2026).
   Somente tokens do Design System (kortex-ui.css), nos temas claro, escuro e IA KORTEX.
   Um unico elemento ousado: a resposta em tipo grande, lida palavra a palavra, numa coluna de leitura abaixo do nucleo.
   O resto e quieto: fichas planas com faixa de identidade por tipo, rotulos em caixa normal, sem flutuacao continua. */

.kx-imersivo {
  --kx-a: var(--kortex-primary, #16a34a);
  --kx-b: var(--kortex-mint, #5eead4);
  --kx-glow-a: color-mix(in srgb, var(--kx-a), transparent 80%);
  --kx-glow-b: color-mix(in srgb, var(--kx-b), transparent 84%);
  --kx-tinta: var(--kortex-text);
  --kx-apagado: var(--kortex-muted);
  --kx-linha: var(--kortex-line);
  --kx-ficha: color-mix(in srgb, var(--kortex-elevated, var(--kortex-surface)), transparent 4%);
  --kx-raio: 16px;
  --kx-coluna: 62ch;
  position: fixed; inset: 0; z-index: 70;
  display: none; flex-direction: column;
  color: var(--kx-tinta);
  font-family: var(--kortex-font-family, Inter, ui-sans-serif, system-ui, sans-serif);
  overflow: hidden;
  opacity: 0; transition: opacity .35s ease;
}
#kxImersivo.kx-imersivo {
  background-color: var(--kortex-bg) !important;
  background-image:
    radial-gradient(34rem 26rem at 50% 34%, var(--kx-glow-b), transparent 70%),
    radial-gradient(22rem 18rem at 50% 36%, var(--kx-glow-a), transparent 72%) !important;
}
/* o Design System estiliza [role=dialog], header e footer (largura, raio, sombra, superficie): aqui e tela cheia propria */
.kx-imersivo { width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.kx-imersivo .kx-topo, .kx-imersivo .kx-base { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; position: relative !important; inset: auto !important; }
.kx-imersivo.is-open { display: flex; }
.kx-imersivo.is-visible { opacity: 1; }
body.kx-imersivo-aberto { overflow: hidden; }
body.kx-imersivo-aberto #actionModal.open { display: none !important; }
.kx-imersivo :where(p) { -webkit-line-clamp: unset !important; display: block; overflow: visible; }

/* ---------------- topo ---------------- */
.kx-topo { z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem clamp(1rem, 3vw, 2rem) .4rem; }
.kx-marca { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.kx-marca strong { font-size: 1rem; font-weight: 850; letter-spacing: -.01em; white-space: nowrap; }
.kx-estado-chip { display: inline-flex; align-items: center; gap: .45rem; height: 1.85rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--kx-linha); background: var(--kx-ficha); font-size: .78rem; font-weight: 700; color: var(--kx-apagado); white-space: nowrap; }
.kx-marca-ponto { width: .5rem; height: .5rem; border-radius: 999px; background: var(--kx-apagado); transition: background .25s, box-shadow .25s; }
.kx-imersivo[data-estado="ouvindo"] .kx-marca-ponto { background: var(--kx-a); box-shadow: 0 0 0 .28rem var(--kx-glow-a); animation: kxPiscar 1.2s ease-in-out infinite; }
.kx-imersivo[data-estado="processando"] .kx-marca-ponto { background: var(--kortex-warning, #b45309); }
.kx-imersivo[data-estado="falando"] .kx-marca-ponto { background: var(--kx-b); box-shadow: 0 0 0 .28rem var(--kx-glow-b); }
.kx-imersivo[data-estado="confirmando"] .kx-marca-ponto { background: var(--kortex-warning, #b45309); box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--kortex-warning, #b45309), transparent 80%); }
.kx-imersivo[data-estado="erro"] .kx-marca-ponto { background: var(--kortex-danger, #b91c1c); }
.kx-imersivo:is([data-estado="ouvindo"], [data-estado="falando"]) .kx-estado-chip { color: var(--kx-tinta); }
.kx-estado-texto { font-size: .78rem; font-weight: 600; color: var(--kx-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.kx-topo-acoes { display: flex; gap: .45rem; }
.kx-botao { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--kx-linha); border-radius: 12px; background: var(--kx-ficha); color: var(--kx-tinta); font-size: .82rem; font-weight: 750; cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; }
.kx-botao:hover { border-color: color-mix(in srgb, var(--kx-a), transparent 45%); }
.kx-botao[aria-pressed="true"], .kx-botao[aria-expanded="true"] { border-color: var(--kx-a); background: color-mix(in srgb, var(--kx-a), transparent 90%); }
.kx-botao:focus-visible, .kx-item:focus-visible, .kx-mic:focus-visible, .kx-sugestao:focus-visible, .kx-fonte-chip:focus-visible, .kx-conversa-item:focus-visible, .kx-completa summary:focus-visible { outline: 2px solid var(--kx-a); outline-offset: 3px; }
.kx-botao svg { width: 1rem; height: 1rem; flex: none; }

/* ---------------- palco ---------------- */
.kx-palco { position: relative; flex: 1 1 auto; min-height: 15rem; }
.kx-aneis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kx-aneis ellipse { fill: none; stroke: color-mix(in srgb, var(--kx-linha), transparent 30%); stroke-width: 1; }
.kx-aneis ellipse.kx-anel-interno { stroke: color-mix(in srgb, var(--kx-b), transparent 72%); stroke-dasharray: 1 9; animation: kxGirar 90s linear infinite; transform-origin: 50% 50%; }

/* ---------------- nucleo: disco de luz com onda real (canvas) ---------------- */
.kx-nucleo { position: absolute; left: 50%; top: 50%; width: var(--kx-n, 13.5rem); height: var(--kx-n, 13.5rem); transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.kx-nucleo canvas { position: absolute; left: 50%; top: 50%; width: 170% !important; height: 170% !important; max-width: none !important; max-height: none !important; transform: translate(-50%, -50%); }
.kx-esfera { position: relative; width: 52%; height: 52%; border-radius: 999px;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, #fff, transparent 55%), transparent 46%),
    radial-gradient(circle at 50% 50%, var(--kx-b) 0%, var(--kx-a) 62%, color-mix(in srgb, var(--kx-a), #000 30%) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kx-b), transparent 40%), 0 0 0 .7rem var(--kx-glow-b), 0 0 5rem var(--kx-glow-a);
  transform: scale(var(--kx-escala, 1)); transition: transform .12s ease-out, filter .4s ease;
}
.kx-esfera::after { content: ""; position: absolute; inset: -16%; border-radius: 999px; border: 2px solid transparent; border-top-color: var(--kx-b); border-right-color: color-mix(in srgb, var(--kx-a), transparent 50%); opacity: 0; transition: opacity .3s; }
.kx-imersivo[data-estado="processando"] .kx-esfera::after { opacity: 1; animation: kxGirar 1.1s linear infinite; }
.kx-imersivo[data-estado="ocioso"] .kx-esfera { animation: kxRespirar 5s ease-in-out infinite; filter: saturate(.8); }
.kx-imersivo[data-estado="confirmando"] .kx-esfera { filter: hue-rotate(-28deg) saturate(1.1); }
.kx-imersivo[data-estado="erro"] .kx-esfera { filter: grayscale(.6); }
.kx-rotulo-estado { position: absolute; left: 50%; top: calc(50% + var(--kx-n, 13.5rem) * .55); transform: translateX(-50%); font-size: .8rem; font-weight: 700; letter-spacing: .01em; color: var(--kx-apagado); white-space: nowrap; pointer-events: none; }

/* ---------------- fichas (registros citados) ---------------- */
.kx-orbita { position: absolute; inset: 0; }
.kx-item { --kx-tom: var(--kx-a);
  position: absolute; left: 0; top: 0; width: var(--kx-w, 14.5rem); max-width: 42vw; padding: .75rem .85rem .75rem 1.05rem;
  border: 1px solid var(--kx-linha); border-radius: var(--kx-raio);
  background: var(--kx-ficha); box-shadow: 0 1px 0 color-mix(in srgb, var(--kx-linha), transparent 30%), 0 10px 28px rgba(15, 23, 42, .06);
  color: var(--kx-tinta); text-align: left; cursor: pointer; opacity: 0; overflow: hidden;
  transform: translate(var(--kx-x0, 0), var(--kx-y0, 0)) scale(.35);
  transition: transform .85s cubic-bezier(.2, .9, .25, 1.06), opacity .5s ease, border-color .25s, box-shadow .25s; will-change: transform, opacity; }
/* faixa de identidade: a cor diz o tipo de registro */
.kx-item::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--kx-tom); }
.kx-item[data-tipo="cotacao"] { --kx-tom: var(--kx-a); }
.kx-item[data-tipo="cliente"], .kx-item[data-tipo="oportunidade"] { --kx-tom: var(--kortex-accent-blue, #2563eb); }
.kx-item[data-tipo="conta"], .kx-item[data-tipo="cartao"], .kx-item[data-tipo="fatura"] { --kx-tom: color-mix(in srgb, var(--kx-b), var(--kx-a) 35%); }
.kx-item[data-tipo="indicador"] { --kx-tom: color-mix(in srgb, var(--kx-tinta), transparent 45%); }
.kx-item[data-tipo="prioridade"] { --kx-tom: var(--kx-a); }
.kx-item[data-tipo="executado"] { --kx-tom: var(--kortex-success, #0f766e); border-color: color-mix(in srgb, var(--kortex-success, #0f766e) 50%, transparent); }
.kx-item[data-estado="alerta"] { --kx-tom: var(--kortex-warning, #b45309); border-color: color-mix(in srgb, var(--kortex-warning, #b45309), transparent 55%); }
.kx-item.is-dentro { opacity: 1; transform: translate(var(--kx-x), var(--kx-y)) scale(1); }
.kx-item.is-dentro:hover, .kx-item.is-dentro:focus-visible { transform: translate(var(--kx-x), var(--kx-y)) scale(1) !important; border-color: color-mix(in srgb, var(--kx-tom), transparent 40%); box-shadow: 0 1px 0 var(--kx-linha), 0 16px 36px rgba(15, 23, 42, .1); }
.kx-item.is-dentro:active { transform: translate(var(--kx-x), var(--kx-y)) scale(.99) !important; }
.kx-item.is-saindo { opacity: 0; transform: translate(var(--kx-xs), var(--kx-ys)) scale(.6); pointer-events: none; }
.kx-item.is-novo { border-color: color-mix(in srgb, var(--kx-tom), transparent 35%); box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--kx-tom), transparent 85%), 0 16px 36px rgba(15, 23, 42, .08); }
.kx-item:hover { z-index: 4; }
.kx-item .kx-flutua { display: block; }
.kx-item-topo { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; color: var(--kx-apagado); line-height: 1.2; }
.kx-tipo-icone { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 7px; color: var(--kx-tom); background: color-mix(in srgb, var(--kx-tom), transparent 88%); flex: none; }
.kx-tipo-icone svg { width: .85rem; height: .85rem; }
.kx-tipo { color: var(--kx-apagado); }
.kx-nota { margin-left: auto; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 750; color: var(--kx-tom); background: color-mix(in srgb, var(--kx-tom), transparent 88%); white-space: nowrap; }
.kx-item-titulo { display: block; margin-top: .45rem; font-size: .95rem; font-weight: 750; line-height: 1.3; letter-spacing: -.005em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kx-item-detalhe { display: block; margin-top: .2rem; font-size: .78rem; color: var(--kx-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-item-valor { display: block; margin-top: .4rem; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kx-item[data-tipo="indicador"] .kx-item-valor { font-size: 1.55rem; line-height: 1.1; }
.kx-item-abrir { display: inline-block; margin-top: .45rem; font-size: .74rem; font-weight: 750; color: var(--kx-tom); opacity: 0; transition: opacity .2s; }
.kx-item:hover .kx-item-abrir, .kx-item:focus-visible .kx-item-abrir { opacity: 1; }
@media (hover: none) { .kx-item-abrir { opacity: 1; } }
.kx-item[data-tipo="acao"] { --kx-w: 19.5rem; --kx-tom: var(--kortex-warning, #b45309); border-color: color-mix(in srgb, var(--kx-tom), transparent 45%); cursor: default; box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--kx-tom), transparent 88%), 0 18px 40px rgba(15, 23, 42, .12); }
.kx-acao-botoes { display: flex; gap: .5rem; margin-top: .7rem; }
.kx-acao-botoes button { flex: 1; height: 2.5rem; border-radius: 10px; font-weight: 800; font-size: .85rem; cursor: pointer; border: 1px solid var(--kx-linha); background: var(--kortex-surface); color: var(--kx-tinta); }
.kx-acao-botoes button.kx-confirmar { background: var(--kx-a) !important; border-color: var(--kx-a) !important; color: #fff !important; }

/* ---------------- coluna de leitura: a resposta e o elemento principal ---------------- */
.kx-legenda { position: relative; z-index: 3; width: min(var(--kx-coluna), calc(100% - 2.5rem)); margin: 0 auto; text-align: left; }
.kx-saudacao { font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.4; font-weight: 600; color: var(--kx-apagado); }
.kx-saudacao strong { color: var(--kx-tinta); font-weight: 800; }
.kx-imersivo.tem-conversa .kx-saudacao { display: none; }
.kx-voce { min-height: 1.25rem; font-size: .88rem; font-weight: 600; color: var(--kx-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-voce:empty { min-height: 0; }
.kx-fala { max-height: 8.4rem; overflow-y: auto; margin-top: .3rem; font-size: clamp(1.2rem, 2.25vw, 1.75rem); line-height: 1.45; font-weight: 650; letter-spacing: -.012em; scroll-behavior: smooth; scrollbar-width: none; }
.kx-fala:empty { display: none; }
.kx-fala::-webkit-scrollbar { display: none; }
.kx-fala .kx-p { color: color-mix(in srgb, var(--kx-tinta), transparent 66%); transition: color .2s ease; }
.kx-fala .kx-p.is-dita { color: var(--kx-tinta); }
.kx-fala .kx-p.is-atual { color: var(--kx-tinta); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--kx-b), transparent 55%) 62%); border-radius: 2px; }
.kx-fala.is-texto .kx-p { color: var(--kx-tinta); }
.kx-fontes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
.kx-fontes[hidden] { display: none; }
.kx-fontes-rotulo { font-size: .78rem; font-weight: 700; color: var(--kx-apagado); margin-right: .15rem; }
.kx-fonte-chip { display: inline-flex; align-items: center; height: 1.85rem; max-width: 14rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--kx-linha); background: var(--kx-ficha); color: var(--kx-tinta); font-size: .78rem; font-weight: 650; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-fonte-chip:hover { border-color: var(--kx-a); }
.kx-completa { margin-top: .6rem; }
.kx-completa[hidden] { display: none; }
.kx-completa summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; font-size: .85rem; font-weight: 750; color: var(--kx-a); }
.kx-completa summary::-webkit-details-marker { display: none; }
.kx-completa summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.kx-completa[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.kx-completa-texto { margin-top: .5rem; max-height: min(16rem, 30vh); overflow-y: auto; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--kx-linha); background: var(--kx-ficha); font-size: .95rem; line-height: 1.6; white-space: pre-line; }
.kx-completa-texto a { color: var(--kx-a); text-decoration: underline; text-underline-offset: 2px; font-weight: 650; word-break: break-word; }
.kx-completa-texto .kx-md-titulo { display: block; margin-top: .5rem; font-weight: 800; }

/* ---------------- base: sugestoes + controles ---------------- */
.kx-base { z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.kx-sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-width: min(56rem, 100%); }
.kx-imersivo.tem-conversa .kx-sugestoes { display: none; }
.kx-sugestao { height: 2.3rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--kx-linha); background: var(--kx-ficha); color: var(--kx-tinta); font-size: .85rem; font-weight: 650; cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; }
.kx-sugestao:hover { border-color: var(--kx-a); background: color-mix(in srgb, var(--kx-a), transparent 92%); }
.kx-controles { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.kx-mic { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: 3.6rem; min-width: 3.6rem; padding: 0 1.4rem 0 1.2rem; border-radius: 999px; border: 0; cursor: pointer; color: #fff; font-size: .95rem; font-weight: 800;
  background: var(--kx-a); box-shadow: 0 .5rem 1.4rem var(--kx-glow-a); transition: transform .15s, background .2s; }
.kx-mic svg { width: 1.35rem; height: 1.35rem; }
.kx-mic:active { transform: scale(.97); }
.kx-mic.is-ativo::before { content: ""; position: absolute; inset: -.4rem; border-radius: 999px; border: 2px solid var(--kx-a); animation: kxPulso 1.6s ease-out infinite; }
.kx-mic[aria-pressed="false"] { background: var(--kortex-elevated, var(--kortex-surface)); color: var(--kx-a); border: 1px solid var(--kx-linha); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
.kx-mic[aria-pressed="true"]:not(.is-ativo) { background: color-mix(in srgb, var(--kx-a), #000 12%); }
.kx-digitar { display: none; align-items: center; gap: .45rem; width: min(34rem, calc(100vw - 13rem)); }
.kx-digitar.is-aberto { display: flex; }
.kx-digitar.is-aberto ~ .kx-lateral, .kx-controles:has(.kx-digitar.is-aberto) .kx-mic-rotulo { display: none; }
.kx-digitar input { flex: 1; min-width: 0; height: 3rem; padding: 0 1rem; border: 1px solid var(--kx-linha); border-radius: 14px; background: var(--kortex-surface); color: var(--kx-tinta); font-size: 1rem; font-weight: 550; outline: none; }
.kx-digitar input:focus { border-color: var(--kx-a); box-shadow: 0 0 0 .2rem var(--kx-glow-a); }
.kx-enviar { height: 3rem; padding: 0 1rem; border-radius: 14px; border: 0; background: var(--kx-a); color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; }
.kx-vazio { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); width: min(30rem, calc(100% - 2rem)); font-size: .82rem; line-height: 1.45; color: var(--kx-apagado); text-align: center; pointer-events: none; }

/* ---------------- painel da conversa ---------------- */
.kx-conversa { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: min(24rem, 100%); display: flex; flex-direction: column; border-left: 1px solid var(--kx-linha); background: var(--kortex-elevated, var(--kortex-surface)) !important; box-shadow: -18px 0 48px rgba(15, 23, 42, .14) !important; animation: kxPainelEntra .22s ease-out; }
.kx-conversa[hidden] { display: none; }
.kx-conversa-topo { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--kx-linha); }
.kx-conversa-topo strong { font-size: 1rem; font-weight: 800; }
.kx-conversa-lista { list-style: none; margin: 0; padding: .5rem; overflow-y: auto; flex: 1; display: grid; align-content: start; gap: .35rem; }
.kx-conversa-item { display: grid; gap: .25rem; width: 100%; text-align: left; padding: .7rem .8rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--kx-tinta); cursor: pointer; }
.kx-conversa-item:hover { border-color: var(--kx-linha); background: color-mix(in srgb, var(--kx-a), transparent 94%); }
.kx-conversa-pergunta { font-size: .9rem; font-weight: 750; line-height: 1.35; }
.kx-conversa-resposta { font-size: .82rem; line-height: 1.45; color: var(--kx-apagado); }
.kx-conversa-hora { font-size: .72rem; color: var(--kx-apagado); }
.kx-conversa-vazia { padding: 1rem; font-size: .88rem; line-height: 1.5; color: var(--kx-apagado); }
.kx-conversa-vazia[hidden] { display: none !important; }

@keyframes kxGirar { to { transform: rotate(360deg); } }
@keyframes kxRespirar { 0%, 100% { transform: scale(.975); } 50% { transform: scale(1.025); } }
@keyframes kxPulso { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes kxPiscar { 50% { opacity: .45; } }
@keyframes kxPainelEntra { from { transform: translateX(1.5rem); opacity: 0; } }

/* ---------------- telas menores ---------------- */
@media (max-width: 1023px) {
  .kx-botao:not(#kxOcultos) span { display: none; }
  .kx-botao:not(#kxOcultos) { width: 2.5rem; padding: 0; }
  .kx-estado-texto { display: none; }
}
@media (max-width: 760px) {
  .kx-imersivo { --kx-n: 9.5rem; }
  .kx-topo { padding: .7rem .9rem .2rem; }
  .kx-item { --kx-w: calc(50vw - 1.15rem); padding: .55rem .6rem .55rem .85rem; max-width: none; }
  .kx-item::before { top: .55rem; bottom: .55rem; }
  .kx-aneis { display: none; }
  .kx-item-titulo { font-size: .82rem; margin-top: .3rem; }
  .kx-item-detalhe { font-size: .72rem; }
  .kx-item-valor { font-size: .95rem; }
  .kx-item[data-tipo="indicador"] .kx-item-valor { font-size: 1.2rem; }
  .kx-item-abrir { display: none; }
  .kx-tipo-icone { width: 1.15rem; height: 1.15rem; }
  .kx-item[data-tipo="acao"] { --kx-w: 17rem; max-width: 88vw; }
  .kx-legenda { width: calc(100% - 2rem); }
  .kx-fala { max-height: 6.2rem; font-size: 1.12rem; }
  .kx-vazio { display: none; }
  .kx-sugestoes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; padding: 0 .25rem .2rem; scrollbar-width: none; }
  .kx-sugestoes::-webkit-scrollbar { display: none; }
  .kx-sugestao { flex: none; }
  .kx-mic { height: 3.4rem; }
  .kx-digitar { width: calc(100vw - 7.5rem); }
  .kx-enviar { display: none; }
  .kx-conversa { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-item { transition: opacity .2s ease; }
  .kx-aneis ellipse.kx-anel-interno, .kx-imersivo[data-estado="ocioso"] .kx-esfera, .kx-mic.is-ativo::before, .kx-marca-ponto, .kx-conversa { animation: none !important; }
}

/* ================= Cockpit (20/10/2026): sempre escuro, cores com significado =================
   Base tinta-navy azulada; cada tipo de registro tem uma cor; o nucleo muda de cor conforme o estado da voz.
   Uma unica aplicacao do espectro (verde > ciano > azul > violeta): o anel do nucleo. */
#kxImersivo.kx-imersivo {
  color-scheme: dark;
  --kx-fundo: #07111f;
  --kx-fundo-2: #0b1b2e;
  --kx-tinta: #e6edf7;
  --kx-apagado: #8fa3bf;
  --kx-linha: rgba(148, 163, 184, .16);
  --kx-ficha: rgba(15, 30, 52, .72);
  --kx-verde: #22c55e;
  --kx-ciano: #2dd4bf;
  --kx-azul: #3b82f6;
  --kx-violeta: #8b5cf6;
  --kx-ambar: #f59e0b;
  --kx-rosa: #f43f5e;
  --kx-a: var(--kx-verde);
  --kx-b: var(--kx-ciano);
  --kx-glow-a: rgba(34, 197, 94, .22);
  --kx-glow-b: rgba(45, 212, 191, .18);
  --kx-estado: var(--kx-verde);
  --kortex-surface: #0f1e34;
  --kortex-elevated: #12243d;
  --kortex-text: #e6edf7;
  --kortex-muted: #8fa3bf;
  --kortex-line: rgba(148, 163, 184, .16);
  background-color: var(--kx-fundo) !important;
  background-image:
    radial-gradient(28rem 22rem at 50% 34%, color-mix(in srgb, var(--kx-estado), transparent 82%), transparent 70%),
    radial-gradient(36rem 30rem at 8% 0%, rgba(59, 130, 246, .16), transparent 70%),
    radial-gradient(34rem 30rem at 96% 8%, rgba(139, 92, 246, .14), transparent 70%),
    radial-gradient(40rem 26rem at 50% 110%, rgba(45, 212, 191, .10), transparent 70%),
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(180deg, var(--kx-fundo), var(--kx-fundo-2)) !important;
  background-size: auto, auto, auto, auto, 44px 44px, 44px 44px, auto !important;
  transition: opacity .35s ease;
}
.kx-imersivo[data-estado="ouvindo"] { --kx-estado: var(--kx-verde); }
.kx-imersivo[data-estado="processando"] { --kx-estado: var(--kx-violeta); }
.kx-imersivo[data-estado="falando"] { --kx-estado: var(--kx-ciano); }
.kx-imersivo[data-estado="confirmando"] { --kx-estado: var(--kx-ambar); }
.kx-imersivo[data-estado="erro"] { --kx-estado: var(--kx-rosa); }
.kx-imersivo[data-estado="ocioso"] { --kx-estado: var(--kx-azul); }

/* marca com o espectro so no ponto */
.kx-imersivo .kx-marca strong { background: linear-gradient(90deg, #e6edf7, #b8c7dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kx-imersivo .kx-estado-chip { background: rgba(15, 30, 52, .6); border-color: color-mix(in srgb, var(--kx-estado), transparent 60%); color: var(--kx-tinta); }
.kx-imersivo .kx-marca-ponto { background: var(--kx-estado) !important; box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--kx-estado), transparent 78%), 0 0 12px var(--kx-estado) !important; }
.kx-imersivo .kx-botao { background: rgba(15, 30, 52, .55); border-color: var(--kx-linha); color: var(--kx-tinta); backdrop-filter: blur(10px); }
.kx-imersivo .kx-botao:hover { border-color: rgba(96, 165, 250, .55); background: rgba(30, 58, 95, .55); }

/* nucleo: anel espectral girando + disco de vidro; a cor do brilho e a do estado */
.kx-imersivo .kx-esfera {
  width: 50%; height: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .28), transparent 42%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--kx-estado), #07111f 25%) 0%, color-mix(in srgb, var(--kx-estado), #07111f 70%) 70%, #07111f 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 2.5rem color-mix(in srgb, var(--kx-estado), transparent 45%), 0 0 7rem color-mix(in srgb, var(--kx-estado), transparent 72%), inset 0 0 1.6rem rgba(255, 255, 255, .06);
  transition: transform .12s ease-out, box-shadow .5s ease, background .5s ease;
}
.kx-imersivo .kx-esfera::before { content: ""; position: absolute; inset: -11%; border-radius: 999px; padding: 2px;
  background: conic-gradient(from var(--kx-giro, 0deg), #22c55e, #2dd4bf, #3b82f6, #8b5cf6, #22c55e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9; animation: kxGirar 14s linear infinite; }
.kx-imersivo[data-estado="processando"] .kx-esfera::before { animation-duration: 2.2s; }
.kx-imersivo .kx-esfera::after { border-top-color: #8b5cf6; border-right-color: rgba(59, 130, 246, .6); inset: -22%; }
.kx-imersivo[data-estado="ocioso"] .kx-esfera { filter: none; }
.kx-imersivo .kx-rotulo-estado { color: color-mix(in srgb, var(--kx-estado), #e6edf7 45%); font-weight: 750; }
.kx-imersivo .kx-aneis ellipse { stroke: rgba(148, 163, 184, .14); }
.kx-imersivo .kx-aneis ellipse.kx-anel-interno { stroke: rgba(45, 212, 191, .28); }

/* fichas de vidro com a cor do tipo */
.kx-imersivo .kx-item { background: linear-gradient(180deg, rgba(18, 36, 61, .86), rgba(12, 26, 46, .86)); border-color: rgba(148, 163, 184, .16); box-shadow: 0 12px 32px rgba(2, 8, 23, .45), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(14px); color: var(--kx-tinta); }
.kx-imersivo .kx-item[data-tipo="cotacao"] { --kx-tom: #22c55e; }
.kx-imersivo .kx-item[data-tipo="cliente"] { --kx-tom: #60a5fa; }
.kx-imersivo .kx-item[data-tipo="oportunidade"] { --kx-tom: #a78bfa; }
.kx-imersivo .kx-item:is([data-tipo="conta"], [data-tipo="cartao"], [data-tipo="fatura"]) { --kx-tom: #2dd4bf; }
.kx-imersivo .kx-item[data-tipo="indicador"] { --kx-tom: #93c5fd; }
.kx-imersivo .kx-item[data-tipo="prioridade"] { --kx-tom: #34d399; }
.kx-imersivo .kx-item[data-tipo="executado"] { --kx-tom: #22c55e; border-color: rgba(34, 197, 94, .45); }
.kx-imersivo .kx-item[data-estado="alerta"] { --kx-tom: #fbbf24; border-color: rgba(251, 191, 36, .4); }
.kx-imersivo .kx-item[data-tipo="acao"] { --kx-tom: #fbbf24; border-color: rgba(251, 191, 36, .55); box-shadow: 0 0 0 .3rem rgba(251, 191, 36, .1), 0 18px 44px rgba(2, 8, 23, .55); }
.kx-imersivo .kx-item::before { box-shadow: 0 0 12px var(--kx-tom); }
.kx-imersivo .kx-item.is-dentro:hover, .kx-imersivo .kx-item.is-dentro:focus-visible { border-color: color-mix(in srgb, var(--kx-tom), transparent 45%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kx-tom), transparent 70%), 0 18px 44px rgba(2, 8, 23, .55); }
.kx-imersivo .kx-item.is-novo { box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--kx-tom), transparent 82%), 0 0 28px color-mix(in srgb, var(--kx-tom), transparent 70%); }
.kx-imersivo .kx-tipo-icone { background: color-mix(in srgb, var(--kx-tom), transparent 84%); }
.kx-imersivo .kx-item-valor { color: #f8fafc; }
.kx-imersivo .kx-acao-botoes button { background: rgba(15, 30, 52, .8); border-color: var(--kx-linha); color: var(--kx-tinta); }
.kx-imersivo .kx-acao-botoes button.kx-confirmar { background: #22c55e !important; border-color: #22c55e !important; color: #052e16 !important; }

/* coluna de leitura */
.kx-imersivo .kx-fala { -webkit-mask-image: linear-gradient(transparent 0, #000 1.1rem, #000 calc(100% - .4rem), transparent); mask-image: linear-gradient(transparent 0, #000 1.1rem, #000 calc(100% - .4rem), transparent); padding-top: .5rem; }
.kx-imersivo .kx-fala .kx-p { color: rgba(230, 237, 247, .34); }
.kx-imersivo .kx-fala .kx-p.is-dita, .kx-imersivo .kx-fala.is-texto .kx-p { color: #e6edf7; }
.kx-imersivo .kx-fala .kx-p.is-atual { color: #ffffff; background: linear-gradient(transparent 64%, rgba(45, 212, 191, .45) 64%); }
.kx-imersivo .kx-saudacao strong { background: linear-gradient(90deg, #22c55e, #2dd4bf 40%, #60a5fa 75%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kx-imersivo .kx-completa summary { color: #5eead4; }
.kx-imersivo .kx-completa-texto { background: rgba(12, 26, 46, .82); border-color: var(--kx-linha); color: var(--kx-tinta); }
.kx-imersivo .kx-completa-texto a, .kx-imersivo .kx-fonte-chip:hover { color: #93c5fd; }
.kx-imersivo .kx-fontes-rotulo { color: #93c5fd; }
.kx-imersivo .kx-fonte-chip { background: rgba(59, 130, 246, .1); border-color: rgba(96, 165, 250, .3); color: #dbeafe; }

/* base */
.kx-imersivo .kx-sugestao { background: rgba(15, 30, 52, .6); border-color: var(--kx-linha); color: var(--kx-tinta); backdrop-filter: blur(8px); }
.kx-imersivo .kx-sugestao:hover { border-color: rgba(45, 212, 191, .6); background: rgba(45, 212, 191, .1); }
.kx-imersivo .kx-mic { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #04261a; box-shadow: 0 10px 30px rgba(34, 197, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .3); }
.kx-imersivo .kx-mic[aria-pressed="false"] { background: rgba(15, 30, 52, .75); color: #86efac; border: 1px solid rgba(34, 197, 94, .4); box-shadow: 0 0 24px rgba(34, 197, 94, .12); }
.kx-imersivo .kx-mic[aria-pressed="true"]:not(.is-ativo) { background: linear-gradient(135deg, #16a34a, #0f766e); color: #ecfdf5; }
.kx-imersivo .kx-mic.is-ativo::before { border-color: #22c55e; }
.kx-imersivo .kx-digitar input { background: rgba(10, 22, 40, .9); border-color: rgba(148, 163, 184, .24); color: var(--kx-tinta); }
.kx-imersivo .kx-digitar input::placeholder { color: #6b7f9c; }
.kx-imersivo .kx-digitar input:focus { border-color: #2dd4bf; box-shadow: 0 0 0 .2rem rgba(45, 212, 191, .2); }
.kx-imersivo .kx-enviar { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #04261a; }
.kx-imersivo .kx-vazio { color: #6b7f9c; }
.kx-imersivo .kx-conversa { background: #0c1a2e !important; border-left-color: var(--kx-linha); box-shadow: -24px 0 60px rgba(2, 8, 23, .6) !important; color: var(--kx-tinta); }
.kx-imersivo .kx-conversa-item:hover { background: rgba(59, 130, 246, .08); border-color: rgba(96, 165, 250, .25); }
.kx-imersivo .kx-fechar:hover { background: rgba(148, 163, 184, .14); }
@media (prefers-reduced-motion: reduce) { .kx-imersivo .kx-esfera::before { animation: none; } }
/* brilho de "novo" discreto; alerta indicado pela faixa e por um contorno suave */
.kx-imersivo .kx-item.is-novo { box-shadow: 0 0 0 1px color-mix(in srgb, var(--kx-tom), transparent 55%), 0 0 22px color-mix(in srgb, var(--kx-tom), transparent 80%), 0 12px 32px rgba(2, 8, 23, .45); }
.kx-imersivo .kx-item[data-estado="alerta"] { border-color: rgba(251, 191, 36, .28); }
.kx-imersivo .kx-tipo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kx-imersivo .kx-aneis ellipse.kx-anel-externo { stroke: rgba(148, 163, 184, .07); }
@media (max-width: 760px) {
  .kx-imersivo .kx-nota { display: none; }
  .kx-imersivo .kx-item-topo { font-size: .7rem; }
}

/* Etapa 6 (20/10/2026): cartoes interativos - arrastar, fechar (sem apagar dados), reorganizar */
.kx-imersivo .kx-item[role="button"] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.kx-imersivo .kx-item.is-arrastando { transition: none !important; cursor: grabbing; z-index: 6; box-shadow: 0 18px 48px rgba(2, 6, 23, .3); }
.kx-imersivo .kx-item.is-sem-espaco { outline: 2px dashed var(--kortex-danger, #b91c1c); outline-offset: 3px; }
.kx-imersivo .kx-fechar {
  position: absolute; top: .45rem; right: .45rem; z-index: 2; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 8px; border: 0; background: transparent; color: var(--kx-apagado);
  font-size: 1.05rem; line-height: 1; cursor: pointer; opacity: 0; transform: none !important; padding: 0; min-height: 0; transition: opacity .15s, background .15s;
}
.kx-imersivo .kx-fechar:hover { background: color-mix(in srgb, var(--kx-tinta), transparent 92%); color: var(--kx-tinta); }
.kx-imersivo .kx-item:hover .kx-fechar, .kx-imersivo .kx-item:focus-within .kx-fechar, .kx-imersivo .kx-fechar:focus-visible { opacity: 1; }
.kx-imersivo .kx-fechar:focus-visible { outline: 2px solid var(--kx-a); outline-offset: 1px; }
.kx-imersivo .kx-item[role="button"] .kx-item-topo { padding-right: 1.8rem !important; }
@media (hover: none) { .kx-imersivo .kx-fechar { opacity: .75; width: 1.9rem; height: 1.9rem; } }
.kx-imersivo .kx-botao[hidden] { display: none !important; }

/* Etapa 6: aviso de lembretes vencidos (kortex-lembretes-aviso.js) - tokens do DS, acima do modo imersivo */
.kx-lembretes-avisos { position: fixed; right: 1rem; top: 5.5rem; z-index: 80; max-height: calc(100dvh - 7rem); overflow-y: auto; display: grid; gap: .6rem; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.kx-lembretes-avisos:empty { display: none; }
.kx-lembrete { pointer-events: auto; display: grid; gap: .35rem; padding: .8rem .9rem; border-radius: calc(var(--kortex-radius, 8px) * 1.6); border: 1px solid color-mix(in srgb, var(--kortex-warning, #b45309) 45%, var(--kortex-line)); background: var(--kortex-elevated, #fff); color: var(--kortex-text, #0f172a); box-shadow: 0 18px 50px rgba(2, 6, 23, .22); animation: kxLembreteEntra .22s ease-out; }
.kx-lembrete header { display: flex; align-items: center; justify-content: space-between; background: transparent !important; border: 0 !important; box-shadow: none !important; position: static !important; padding: 0 !important; }
.kx-lembrete-rotulo { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kortex-warning, #b45309); }
.kx-lembrete-x { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--kortex-line); background: transparent; color: var(--kortex-muted); cursor: pointer; transform: none !important; }
.kx-lembrete-titulo { font-size: .95rem; line-height: 1.35; }
.kx-lembrete-quando { margin: 0; font-size: .82rem; color: var(--kortex-muted); }
.kx-lembrete-acoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.kx-lembrete-acoes :where(button, a) { min-height: 2.25rem; padding: 0 .7rem; display: inline-flex; align-items: center; border-radius: var(--kortex-radius, 8px); border: 1px solid var(--kortex-line); background: var(--kortex-surface); color: var(--kortex-text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; text-decoration: none; transform: none !important; }
.kx-lembrete-acoes .kx-lembrete-principal { background: var(--kortex-primary, var(--kortex-success, #0f766e)) !important; color: #fff !important; border-color: transparent; }
.kx-lembrete :where(button, a):focus-visible { outline: 2px solid var(--kortex-mint, #5eead4); outline-offset: 2px; }
.kx-lembrete button:disabled { opacity: .6; cursor: progress; }
.kx-lembrete-erro { margin: 0; font-size: .8rem; font-weight: 700; color: var(--kortex-danger, #b91c1c); }
.kx-lembrete-erro[hidden] { display: none !important; }
.kx-lembrete.is-feito { opacity: .65; }
@keyframes kxLembreteEntra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .kx-lembrete { animation: none; } }
@media (max-width: 640px) { .kx-lembretes-avisos { left: 1rem; right: 1rem; width: auto; top: max(4.5rem, env(safe-area-inset-top)); } }
.kx-lembretes-avisos .kx-lembrete { opacity: 1 !important; }

/* imagens reais na orbita (20/10/2026): mesmo tamanho dos outros cartoes, miniatura a esquerda */
.kx-imersivo .kx-item[data-tipo="imagem"] { --kx-tom: #60a5fa; padding: .55rem; }
.kx-imersivo .kx-imagem-cartao { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.kx-imersivo .kx-imagem-miniatura { position: relative; width: 5.6rem; height: 5.6rem; border-radius: 10px; overflow: hidden; background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(96,165,250,.22), rgba(148,163,184,.12)); background-size: 200% 100%; animation: kxBrilhoImg 1.3s linear infinite; }
.kx-imersivo .kx-imagem-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-imersivo .kx-imagem-miniatura.is-falha { animation: none; background: rgba(148,163,184,.12); }
.kx-imersivo .kx-imagem-miniatura.is-falha::after { content: "Imagem indisponível"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: .3rem; text-align: center; font-size: .62rem; color: var(--kx-apagado); }
.kx-imersivo .kx-imagem-n { position: absolute; top: .25rem; left: .25rem; min-width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: rgba(2, 8, 23, .75); color: #fff; font-size: .66rem; font-weight: 800; }
.kx-imersivo .kx-imagem-legenda { display: grid; gap: .15rem; min-width: 0; }
.kx-imersivo .kx-imagem-legenda .kx-item-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
@keyframes kxBrilhoImg { to { background-position: -200% 0; } }
@media (max-width: 760px) { .kx-imersivo .kx-imagem-cartao { grid-template-columns: 3.6rem minmax(0, 1fr); } .kx-imersivo .kx-imagem-miniatura { width: 3.6rem; height: 3.6rem; } .kx-imersivo .kx-imagem-legenda .kx-item-abrir { display: none; } }
@media (prefers-reduced-motion: reduce) { .kx-imersivo .kx-imagem-miniatura { animation: none; } }

/* imagens junto da resposta (24/10/2026): galeria horizontal logo abaixo do texto, acima dos controles */
.kx-imersivo .kx-imagens { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.kx-imersivo .kx-imagens[hidden] { display: none; }
.kx-imersivo .kx-img { flex: 0 0 auto; width: 9.2rem; display: grid; gap: .35rem; padding: .35rem; border: 1px solid var(--kx-linha); border-radius: 12px; background: rgba(12, 26, 46, .72); color: var(--kx-tinta); text-align: left; cursor: zoom-in; scroll-snap-align: start; transition: border-color .15s ease, transform .15s ease; }
.kx-imersivo .kx-img:hover, .kx-imersivo .kx-img:focus-visible { border-color: rgba(96, 165, 250, .7); transform: translateY(-1px); outline: none; }
.kx-imersivo .kx-img-foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(96,165,250,.22), rgba(148,163,184,.12)); background-size: 200% 100%; animation: kxBrilhoImg 1.3s linear infinite; }
.kx-imersivo .kx-img-foto.is-ok, .kx-imersivo .kx-img-foto.is-falha { animation: none; background: rgba(148,163,184,.12); }
.kx-imersivo .kx-img-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-imersivo .kx-img-foto.is-falha::after { content: "Imagem indisponível"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: .3rem; text-align: center; font-size: .66rem; color: var(--kx-apagado); }
.kx-imersivo .kx-img-n { position: absolute; top: .25rem; left: .25rem; min-width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: rgba(2, 8, 23, .78); color: #fff; font-size: .66rem; font-weight: 800; }
.kx-imersivo .kx-img-texto { display: grid; gap: .05rem; min-width: 0; }
.kx-imersivo .kx-img-texto strong { font-size: .74rem; font-weight: 750; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-imersivo .kx-img-texto small { font-size: .64rem; color: var(--kx-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-imersivo .kx-mic.is-pausado { background: rgba(148, 163, 184, .16); border-color: rgba(148, 163, 184, .45); color: #cbd5e1; }
.kx-imersivo[data-estado="pausado"] .kx-esfera { filter: saturate(.35) brightness(.8); }
@media (max-width: 760px) {
  .kx-imersivo .kx-img { width: 6.6rem; padding: .25rem; }
  .kx-imersivo .kx-img-texto small { display: none; }
  .kx-imersivo #kxEncerrarVoz span { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) { .kx-imersivo .kx-img { width: 7.6rem; } }
@media (prefers-reduced-motion: reduce) { .kx-imersivo .kx-img-foto { animation: none; } }