/* Cómo funciona: profundidad ambiental + refinamiento de motion (hoja propia de como-trabajamos.html) */

/* ---------- 02 · Detecta: zona activa detrás de GISBA Pulse ---------- */
.cx-detect { overflow-x: clip; background: linear-gradient(180deg, #F8F7FF 0%, #F0ECFF 42%, #E9E3FF 100%); }
.cx-detect .cx-shot::before { inset: -14% -20% -16% -16%; opacity: .6; filter: blur(30px); transition: opacity .35s ease; background: radial-gradient(62% 56% at 56% 50%, rgba(91,44,255,.24), rgba(150,120,255,.11) 46%, transparent 76%); }
.cx-detect [data-stage].boost .cx-shot::before, [data-stage].boost.cx-grid .cx-shot::before { opacity: .82; }
.cx-detect .cx-sg { box-shadow: 0 46px 96px rgba(91,44,255,.20), 0 10px 26px rgba(11,16,40,.06); }

/* ---------- 04 · Coordina: halos WhatsApp / GISBA y zona de luz entre ambos ---------- */
.cx-coord { overflow-x: clip; background: linear-gradient(180deg, #F4F3FB 0%, #EEEAFF 52%, #E8E2FF 100%); }
.cx-coord-grid { position: relative; isolation: isolate; }
.cx-coord-grid::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 50%; width: 64%; height: 150%; transform: translateY(-50%); pointer-events: none; opacity: .6; filter: blur(28px); transition: opacity .3s ease; background: radial-gradient(closest-side, rgba(91,44,255,.22), rgba(150,120,255,.09) 58%, transparent); }
.cx-coord-grid::after { content: ""; position: absolute; z-index: -1; left: 22%; top: 50%; width: 48%; height: 120%; transform: translateY(-50%); pointer-events: none; opacity: .55; filter: blur(26px); background: radial-gradient(closest-side, rgba(160,140,255,.16), transparent); }
.cx-coord-grid.boost::before { opacity: .78; }

/* pulso único WhatsApp -> GISBA (una sola partícula pequeña) */
.cx-pulse { position: absolute; left: 0; top: 0; z-index: 4; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; opacity: 0; background: #5B2CFF; box-shadow: 0 0 0 4px rgba(91,44,255,.16), 0 0 12px rgba(91,44,255,.45); }

/* ---------- 02: escaneo suave, micro-pulse y trazo del sparkline ---------- */
.cx-sg-list { position: relative; }
.cx-sg-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 56px; border-radius: 14px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(91,44,255,.10), transparent); }
@keyframes cxChipPulse { 0% { transform: scale(1); box-shadow: inset 0 0 0 1px #f7b9c8, 0 0 0 0 rgba(214,31,75,.30); } 45% { transform: scale(1.05); } 100% { transform: scale(1); box-shadow: inset 0 0 0 1px #f7b9c8, 0 0 0 9px rgba(214,31,75,0); } }
.js .cx-sg-row.is-active .cx-chip.hi.on { animation: cxChipPulse .8s cubic-bezier(.2,.8,.2,1) 1; }
.js .cx-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cx-area { opacity: 0; }
.js [data-s].on .cx-line { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) .15s; }
.js [data-s].on .cx-area { opacity: 1; transition: opacity .6s ease .45s; }

/* drill-down: mismo panel cambiando de contexto */
.cx-sg-detail { transition: opacity .18s ease, transform .22s var(--ease-gisba, ease); }
.cx-sg-detail.swap { opacity: .55; transform: translateY(5px); }

/* ---------- 03: opciones neutras y decisión solo por elección humana ---------- */
.cx-opt { border: 0; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .18s, color .18s, box-shadow .18s, opacity .18s; }
.cx-opt:hover { background: #e7e5f5; }
.cx-opt.on:hover { background: var(--violet, #5B2CFF); }
.cx-opt:focus-visible { outline: 3px solid rgba(91,44,255,.35); outline-offset: 2px; }
.cx-dc.has-choice .cx-opt:not(.on) { opacity: .6; }
.cx-dc-done[hidden] { display: none; }
@keyframes cxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cx-dc-done.cx-in { animation: cxIn .4s var(--ease-gisba, ease) both; }

/* ---------- Mobile: menos ambiente ---------- */
@media (max-width: 720px) {
  .cx-detect .cx-shot::before { display: block; inset: -6% -10% -6% -10%; opacity: .4; filter: blur(22px); }
  .cx-coord-grid::after { display: none; }
  .cx-coord-grid::before { right: -20%; width: 90%; height: 60%; top: auto; bottom: -4%; transform: none; opacity: .5; filter: blur(22px); }
  .cx-sg-scan { display: none; }
}

/* ---------- Reduced motion: estados finales, sin scan/pulso/trazo ---------- */
@media (prefers-reduced-motion: reduce) {
  .cx-pulse, .cx-sg-scan { display: none !important; }
  .js .cx-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .js .cx-area { opacity: 1 !important; transition: none !important; }
  .js .cx-sg-row.is-active .cx-chip.hi.on { animation: none !important; }
  .cx-detect .cx-shot::before, .cx-coord-grid::before { transition: none; }
  .cx-sg-detail.swap { transform: none; }
  .cx-dc-done.cx-in { animation: none; }
}

/* el pulso viaja desde el mensaje: el circulo de conexion no pulsa por separado */
.js [data-stage] .cx-link { animation: none !important; }

/* QA fix: las tarjetas «Por qué importa» / «Recomendación» quedaban de ~100px de texto y cortaban «Recomendación» */
.cx-sg-box { grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.cx-sg-box .cx-bi { width: 28px; height: 28px; border-radius: 9px; }
.cx-sg-box .cx-bi svg { width: 16px; height: 16px; }
.cx-sg-box small, .cx-sg-box p { overflow-wrap: anywhere; }