/* Hondana DENSA — estilos del avatar de partículas
 * Sin contorno esférico, halo difuso, fondo transparente.
 */

.hondana-densa-root {
  position: relative;
  width: 220px;
  height: 220px;
  pointer-events: none;
  display: inline-block;
  /* No background, no border, no border-radius (sin contorno esférico) */
}

.hondana-densa-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* sin border-radius, sin sombra: el "redondeo" lo crean las partículas */
  filter: blur(0.4px);
}

.hondana-densa-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(
    circle at center,
    rgba(255, 230, 180, 0.65) 0%,
    rgba(232, 199, 154, 0.45) 18%,
    rgba(212, 165, 116, 0.28) 38%,
    rgba(196, 142, 90, 0.12) 60%,
    rgba(212, 165, 116, 0.03) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  filter: blur(22px);
  opacity: 0.45;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 60ms linear;
  mix-blend-mode: screen;
}

/* Tamaños predefinidos (más grandes — la niebla necesita espacio para extenderse) */
.hondana-densa-root.size-small  { width: 200px; height: 200px; }
.hondana-densa-root.size-medium { width: 340px; height: 340px; }
.hondana-densa-root.size-large  { width: 520px; height: 520px; }
.hondana-densa-root.size-xl     { width: 720px; height: 720px; }

/* Posición flotante de esquina superior derecha (para landing) */
.hondana-densa-root.pos-corner {
  position: fixed;
  top: 80px;
  right: 30px;
  z-index: 50;
}

@media (max-width: 640px) {
  .hondana-densa-root.pos-corner {
    top: 70px;
    right: 12px;
    transform: scale(0.7);
    transform-origin: top right;
  }
}