/*
 * Reserva solamente el lateral derecho entre el 44% y el 94% de la altura.
 * pointer-events:none permite utilizar la pagina normalmente bajo esa zona;
 * el propio enlace recupera los clics mediante pointer-events:auto.
 */
.nube-soporte-zona {
  position: fixed;
  z-index: 10020;
  top: 44vh;
  right: max(12px, calc((100vw - 1500px) / 2));
  width: min(32vw, 430px);
  height: 50vh;
  pointer-events: none;
  overflow: visible;
}

/*
 * La figura mantiene el fondo azul casi negro y el contorno rosa de la nube
 * de referencia, pero se dibuja como SVG propio para que sea nitida y ligera.
 */
.nube-soporte-flotante {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 250px;
  height: 175px;
  color: var(--nube-texto, #fff);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 12px 20px rgba(7, 10, 28, .26));
  will-change: transform;
}

.nube-soporte-dibujo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nube-soporte-forma,
.nube-soporte-pensamiento {
  fill: var(--nube-fondo, #0d1021);
  stroke: var(--nube-borde, #f50073);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

/*
 * El texto ocupa el centro util de la nube y puede envolver varias palabras
 * sin salirse del dibujo. Se limita visualmente para no cubrir la pagina.
 */
.nube-soporte-texto {
  position: absolute;
  left: 32px;
  top: 39px;
  width: 190px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nube-texto, #fff);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
}

.nube-soporte-flotante:hover,
.nube-soporte-flotante:focus-visible {
  text-decoration: none;
  filter: drop-shadow(0 15px 24px rgba(245, 0, 115, .3));
}

.nube-soporte-flotante:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
  border-radius: 48%;
}

/*
 * En pantallas estrechas se reduce tanto la nube como su zona de recorrido
 * para que no tape formularios. La posicion sigue siendo derecha y media-baja.
 */
@media (max-width: 720px) {
  .nube-soporte-zona {
    top: 52vh;
    right: 7px;
    width: 190px;
    height: 42vh;
  }

  .nube-soporte-flotante {
    width: 190px;
    height: 133px;
  }

  .nube-soporte-texto {
    left: 24px;
    top: 30px;
    width: 144px;
    height: 62px;
    font-size: 13px;
  }
}

/*
 * Las personas que han pedido reducir animaciones conservan la nube util pero
 * inmovil, situada abajo a la derecha, evitando movimientos no deseados.
 */
@media (prefers-reduced-motion: reduce) {
  .nube-soporte-flotante {
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    will-change: auto;
  }
}