/* ===== TextoPro Studio — Tecnología Viva V2 · esquemas conceptuales del carrusel de Inicio =====
   Comunicación (.sx--com), Digitalización (.sx--dig) e IA (.sx--ia) comparten la misma estructura:
   escenario de proporción fija (sin saltos de diseño) + nodos HTML reales + banda de lectura.
   Sin JavaScript se ve el esquema completo y estático (Digitalización, en su estado «conectado»).
   Con JS los nodos pasan a ser un grupo de opciones (vivo-soluciones.js). Solo se anima transform/opacity/stroke. */

.sol-visual.sx{
  padding: 0.9rem;
  min-height: 0;
}

/* ---------- Escenario ---------- */
.sx-stage{
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
  touch-action: manipulation;
  --px: 0;
  --py: 0;
}
/* Rejilla tenue: capa de fondo (se desplaza apenas con el puntero en IA) */
.sx-stage::before{
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(110, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 25%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 40%, #000 25%, transparent 80%);
  transform: translate(calc(var(--px) * -4px), calc(var(--py) * -3px));
  transition: transform 0.25s ease-out;
}
.sol-visual .sx-art{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
}
.sx-back circle,
.sx-back rect{ fill: none; stroke: rgba(110, 231, 255, 0.1); stroke-width: 1; }

/* ---------- Conexiones ---------- */
.sx-edge{
  fill: none;
  stroke: rgba(110, 231, 255, 0.3);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
}
.sx-edge.is-hot{ stroke: #6ee7ff; stroke-width: 2.2; }
.sx-edge.is-dim{ opacity: 0.3; }

/* ---------- Nodos ---------- */
.sx-nodes{
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sx-pos{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.sx-node{
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  white-space: nowrap;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
button.sx-node{ cursor: pointer; }
.sx-node.is-dim{ opacity: 0.62; }
.sx-node:focus-visible{ outline: none; }

.sx-face{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 255, 0.36);
  background: #0b1a3d;
  color: #e8efff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sx-node:hover .sx-face{ border-color: #6ee7ff; }
.sx-node.is-linked .sx-face{ border-color: rgba(110, 231, 255, 0.75); }
.sx-node[aria-checked="true"] .sx-face{
  border-color: #6ee7ff;
  background: #0d2a63;
  box-shadow: 0 0 0 1px rgba(110, 231, 255, 0.5), 0 0 18px rgba(50, 177, 255, 0.45);
}
.sx-node:focus-visible .sx-face,
.sx-node:focus-visible .sx-orb{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Banda de lectura ---------- */
.sx-read{
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: calc(25% - 12px);
  margin: 0;
  padding: 0.3rem 0.7rem;
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(110, 231, 255, 0.2);
  background: rgba(4, 9, 26, 0.88);
  color: #d6def5;
  font-size: 0.72rem;
  line-height: 1.3;
  overflow: hidden;
}
.sol-panel .sx-read{ margin: 0; color: #d6def5; font-size: 0.72rem; }
.sx-read-t{ color: #6ee7ff; font-weight: 700; margin-right: 0.3em; }

/* ---------- Comunicación: vista previa conceptual dentro del nodo «Mensaje» ---------- */
.sx--com .sx-node--msg .sx-face{ min-height: 36px; padding: 0 0.9rem 0 0.55rem; }
.sx-face .pv{ display: none; width: 28px; height: 22px; flex: none; fill: rgba(170, 195, 255, 0.85); }
.sx-face .pv .pv-o{ fill: none; stroke: rgba(170, 195, 255, 0.85); stroke-width: 1.4; }
.sx--com .pv-default{ display: block; }
.sx--com[data-sel="web"] .pv-default,
.sx--com[data-sel="redes"] .pv-default,
.sx--com[data-sel="whatsapp"] .pv-default{ display: none; }
.sx--com[data-sel="web"] .pv-web,
.sx--com[data-sel="redes"] .pv-redes,
.sx--com[data-sel="whatsapp"] .pv-whatsapp{ display: block; fill: #6ee7ff; }
.sx--com[data-sel="web"] .pv-web .pv-o,
.sx--com[data-sel="redes"] .pv-redes .pv-o{ stroke: #6ee7ff; }

/* ---------- Digitalización: de piezas sueltas a módulos conectados ---------- */
/* Base = estado «conectado» (es lo que ve quien no tiene JS). El JS fija data-state="scattered" al iniciar. */
.sx--dig .sx-face{
  position: relative;
  width: 104px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 0.74rem;
}
.sx-t0,
.sx-t1{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}
.sx-t0{ opacity: 0; }
.sx--dig .sx-edges,
.sx--dig .sx-back{ transition: opacity 0.5s ease 0.2s; }
.sx--dig[data-state="scattered"] .sx-edges,
.sx--dig[data-state="scattered"] .sx-back{ opacity: 0; transition-delay: 0s; }
.sx--dig[data-state="scattered"] .sx-pos{ transform: translate(var(--dx), var(--dy)); }
.sx--dig[data-state="scattered"] .sx-node{ --rot: var(--r); }
.sx--dig[data-state="scattered"] .sx-face{ border-style: dashed; background: #091330; border-color: rgba(170, 195, 255, 0.5); }
.sx--dig[data-state="scattered"] .sx-t0{ opacity: 1; }
.sx--dig[data-state="scattered"] .sx-t1{ opacity: 0; }
.sx--dig.is-init .sx-pos,
.sx--dig.is-init .sx-node,
.sx--dig.is-init .sx-t0,
.sx--dig.is-init .sx-t1{ transition: none; }

.sx-toggle{
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 255, 0.3);
  background: rgba(4, 9, 26, 0.9);
}
.sx-toggle button{
  min-width: 88px;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.sx-toggle button:hover{ color: var(--text); }
.sx-toggle button[aria-checked="true"]{ background: #0d2a63; color: #fff; box-shadow: inset 0 0 0 1px rgba(110, 231, 255, 0.7); }
.sx-toggle button:focus-visible{ outline: 2px solid #fff; outline-offset: 1px; }

/* ---------- IA: núcleo y red de agentes (la más tecnológica de las tres) ---------- */
.sol-visual.sx--ia{
  background:
    radial-gradient(circle at 50% 42%, rgba(50, 177, 255, 0.22), transparent 58%),
    linear-gradient(180deg, #040b22, #02050f);
  border-color: rgba(110, 231, 255, 0.28);
}
.sx--ia .sx-stage::before{
  background-image:
    linear-gradient(rgba(110, 231, 255, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 255, 0.085) 1px, transparent 1px);
}
.sx--ia .sx-back circle{ stroke: rgba(110, 231, 255, 0.16); stroke-dasharray: 2 6; }
.sx--ia .sx-back circle:nth-child(2){ stroke: rgba(110, 231, 255, 0.09); stroke-dasharray: none; }
.sx--ia .sx-edge{ stroke: rgba(110, 231, 255, 0.46); stroke-width: 1.6; }
.sx--ia .sx-edge.is-hot{ stroke: #6ee7ff; stroke-width: 2.4; }
.sx--ia .sx-node[aria-checked="true"],
.sx--ia .sx-node.is-linked{ --glow: 1; }

.sx-orb{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.sx-orb--core{
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 35% 30%, #6fd8ff, #1779d6 58%, #0b3d91);
  border: 1px solid #9be9ff;
  box-shadow: 0 0 0 6px rgba(50, 177, 255, 0.14), 0 0 26px rgba(50, 177, 255, 0.55);
}
.sx-orb--core b{ font-size: 0.95rem; letter-spacing: 0.06em; color: #fff; }
.sx-orb--agent{
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at 35% 30%, #4aa8ff, #1654b8 62%, #0b2d6e);
  border: 1px solid #6ee7ff;
  box-shadow: 0 0 14px rgba(50, 177, 255, 0.4);
}
.sx-orb--aux{
  width: 24px;
  height: 24px;
  background: #061330;
  border: 1px solid rgba(110, 231, 255, 0.75);
}
.sx-orb--aux::after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6ee7ff; }
.sx-node--core{ --or: 27px; }
.sx-node--agent{ --or: 17px; }
.sx-node--aux{ --or: 12px; }
.sx-node[aria-checked="true"] .sx-orb{ box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.55), 0 0 24px rgba(110, 231, 255, 0.85); }
.sx-node:hover .sx-orb{ border-color: #fff; }
.sx-l{
  position: absolute;
  font-size: 0.68rem;
  font-weight: 600;
  color: #cfe0ff;
  pointer-events: none;
  text-shadow: 0 0 4px #02050f, 0 0 2px #02050f;
}
.sx-l--b{ left: 50%; top: calc(50% + var(--or) + 1px); transform: translateX(-50%); }
.sx-l--r{ left: calc(50% + var(--or) + 6px); top: 50%; transform: translateY(-50%); }

/* Pulsos de datos: breves y finitos (los dispara el JS al mostrar el panel y al elegir un nodo) */
.sx-flow{
  fill: none;
  stroke: #c4f6ff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 200;
  stroke-dashoffset: 7;
  opacity: 0;
}
.sx-flow.is-fly{ animation: sx-fly 1.3s cubic-bezier(0.45, 0, 0.25, 1) both; animation-delay: var(--d, 0s); }
.sx-flow.is-rev{ animation-direction: reverse; }
@keyframes sx-fly{
  0%{ stroke-dashoffset: 7; opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ stroke-dashoffset: -100; opacity: 0; }
}

/* ---------- Tamaños ---------- */
@media (min-width: 901px){
  .sx-face{ font-size: 0.84rem; min-height: 32px; }
  .sx--dig .sx-face{ width: 116px; min-height: 40px; font-size: 0.8rem; }
  .sx-read{ font-size: 0.8rem; padding: 0.35rem 0.85rem; }
  .sol-panel .sx-read{ font-size: 0.8rem; }
  .sx-orb--core{ width: 62px; height: 62px; }
  .sx-orb--agent{ width: 40px; height: 40px; }
  .sx-orb--aux{ width: 28px; height: 28px; }
  .sx-node--core{ --or: 31px; }
  .sx-node--agent{ --or: 20px; }
  .sx-node--aux{ --or: 14px; }
  .sx-l{ font-size: 0.74rem; }
}
@media (max-width: 900px){
  .sol-visual.sx{ padding: 0.7rem; }
}
/* Pantallas estrechas: escenario más alto (los nodos conservan áreas táctiles de 44 px) y algo más ancho.
   El SVG de fondo se estira con el escenario (preserveAspectRatio="none") para que las conexiones sigan a los nodos. */
@media (max-width: 640px){
  .sx-stage{ aspect-ratio: 1 / 1; }
}
@media (max-width: 480px){
  .sol-visual.sx{ margin-inline: -0.6rem; padding: 0.45rem; }
  .sx-face{ padding: 0 0.5rem; font-size: 0.72rem; }
  .sx--dig .sx-face{ width: 94px; font-size: 0.68rem; }
  .sx-toggle button{ min-width: 78px; }
}
@media (max-width: 380px){
  .sx-stage{ aspect-ratio: 4 / 5; }
}

/* ---------- Movimiento reducido: mismos estados, sin transiciones ni pulsos ---------- */
@media (prefers-reduced-motion: reduce){
  .sx *,
  .sx-stage::before{ transition: none !important; animation: none !important; }
  .sx-stage::before{ transform: none !important; }
  .sx-flow{ display: none; }
}

/* Dos enlaces seguidos en el cuerpo de un panel (Digitalización): uno debajo del otro */
.sol-body .card-link + .card-link{
  display: block;
  width: fit-content;
  margin-top: 0.55rem;
}

/* ---------- Altura común del área visual (solo desde 641 px) ----------
   Reserva la misma altura para las cuatro soluciones, de modo que al cambiar de pestaña no se mueva lo que hay debajo.
   354 px = alto real de los esquemas con el escenario completo (400 px de ancho) en dos columnas (≥901 px);
   347 px = el mismo alto con el relleno de las pantallas medias (641–900 px). Productos solo recibe la altura del
   contenedor: su ilustración y su contenido no cambian (quedan centrados). Con 640 px o menos no se reserva nada. */
@media (min-width: 641px){
  .sol-carousel{ --sol-vh: 347px; }
  .sol-carousel .sol-visual{ min-height: var(--sol-vh); }
}
@media (min-width: 901px){
  .sol-carousel{ --sol-vh: 354px; }
}