/* POLYMAT Play · pol-avatar.css · v1.0.0 (2026-10-01)
   Estilos del componente «POL animado» (assets/js/pol-avatar.js). Todo con prefijo .polav-: no toca app.css.
   El contenedor reserva su espacio con la proporción del dibujo (la misma que el viewBox de pol-svg.js,
   608 x 640), así que cargar o animar a POL no mueve la maquetación. Su tamaño lo da el sitio donde se coloque
   (width del contenedor); el SVG ocupa el 100 %. */

.polav {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 608 / 640;          /* el script lo vuelve a fijar con la proporción real del viewBox */
  line-height: 0;
}

.polav-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;                /* un salto o un brazo que roza el borde no se corta */
}

/* Sobre fondos oscuros (portada, bienvenida): resplandor suave detrás, como el de la bienvenida.
   Es un degradado fijo; no se anima ni usa filtros. Uso: crear({ clase: 'polav--halo' }). */
.polav--halo::before {
  content: "";
  position: absolute;
  inset: 4% 2% 2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;                       /* por detrás del dibujo */
}
.polav--halo > .polav-svg { position: relative; z-index: 1; }

/* Contenido sin animar: el SVG ya es una composición completa; esta regla solo evita que otras hojas de
   estilo con transiciones globales sobre svg/g/path lo muevan. */
.polav-svg * { transition: none; animation: none; }