/* ============================================================
   FIGURAS DECORATIVAS — blobs cromados negros (WebP con alfa)
   Elemento reutilizable en cualquier sección. Aislado bajo
   .index3-page, prefijo .i3-fig. Nunca capturan el ratón ni
   afectan al layout (position:absolute + pointer-events:none).

   Estructura:
     <div class="i3-fig i3-fig--<pos>" data-fig data-fig-depth="0.06" aria-hidden="true">
       <img src="img/figuras/bi-8.webp" alt="" loading="lazy" decoding="async">
     </div>

   Capas de movimiento (no se pisan entre sí):
     · wrapper .i3-fig     → parallax de scroll (lo mueve el JS con --i3-fig-parallax)
     · .i3-fig__inner (JS) → flotación vertical suave (CSS)
     · img                 → rotación lenta (CSS)
   ============================================================ */

.index3-page .i3-fig{
  position:absolute;
  /* POR DELANTE del contenido: antes iban detras y desaparecian sobre las
     tarjetas blancas y las bandas verdes. Siguen con pointer-events:none,
     asi que no bloquean ningun clic aunque esten encima. */
  z-index:5;
  pointer-events:none;
  width:clamp(120px,14vw,280px);
  aspect-ratio:1;                 /* el img mantiene su proporción dentro */
  will-change:transform;
  transform:translate3d(0, var(--i3-fig-parallax, 0px), 0);
  filter:drop-shadow(0 30px 45px rgba(11,11,11,.22));
}
.index3-page .i3-fig img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;             /* nunca deforma la figura */
  -webkit-user-drag:none;
  user-select:none;
}

/* La flotación va en un contenedor interno para no chocar con el parallax */
.index3-page .i3-fig__inner{
  display:block;
  width:100%;
  height:100%;
  animation:i3-fig-float var(--i3-fig-float-dur,9s) ease-in-out infinite;
  animation-delay:var(--i3-fig-delay,0s);
}
/* La rotación va en la imagen, en su propio eje */
.index3-page .i3-fig img{
  animation:i3-fig-spin var(--i3-fig-spin-dur,48s) linear infinite;
  animation-delay:var(--i3-fig-delay,0s);
}

@keyframes i3-fig-float{
  0%,100%{ transform:translateY(-10px); }
  50%    { transform:translateY(10px); }
}
@keyframes i3-fig-spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
/* Variante: balanceo en vez de vuelta completa (más sobrio) */
.index3-page .i3-fig--sway img{
  animation:i3-fig-sway var(--i3-fig-spin-dur,26s) ease-in-out infinite;
}
@keyframes i3-fig-sway{
  0%,100%{ transform:rotate(-8deg); }
  50%    { transform:rotate(8deg); }
}

/* ---------- Colocaciones reutilizables ---------- */
.index3-page .i3-fig--tr{ top:clamp(2rem,7vw,6rem);    right:clamp(-1rem,3vw,4rem); }
.index3-page .i3-fig--tl{ top:clamp(3rem,8vw,7rem);    left:clamp(-2rem,2vw,2rem); }
/* margen suficiente: pegada al borde se salia del viewport */
.index3-page .i3-fig--br{ bottom:clamp(-7rem,-5vw,-2.5rem); right:clamp(2rem,7vw,8rem); }
.index3-page .i3-fig--bl{ bottom:clamp(2rem,7vw,6rem); left:clamp(-2rem,3vw,3rem); }
.index3-page .i3-fig--cr{ top:38%;  right:clamp(-2rem,1vw,1rem); }
.index3-page .i3-fig--cl{ top:42%;  left:clamp(-3rem,0vw,0rem); }

/* tamaños alternativos */
.index3-page .i3-fig--sm{ width:clamp(90px,9vw,170px); }
.index3-page .i3-fig--lg{ width:clamp(160px,18vw,340px); }

/* Una sección que aloje figuras necesita contexto de apilado propio */
/* clip (no hidden) para no crear contexto de scroll: la sombra de la
   figura al girar sobresalia unos px y provocaba scroll lateral */
.index3-page .i3-has-figs{ position:relative; overflow-x:clip; }
.index3-page .i3-has-figs > *:not(.i3-fig){ position:relative; z-index:1; }

/* En pantallas pequeñas: menos ruido, se ocultan las secundarias */
@media (max-width:820px){
  .index3-page .i3-fig{ width:clamp(90px,22vw,150px); }
  .index3-page .i3-fig--hide-sm{ display:none; }
}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .index3-page .i3-fig{ transform:none !important; }
  .index3-page .i3-fig__inner,
  .index3-page .i3-fig img{ animation:none !important; }
}

/* Colocacion junto al TITULAR de seccion: a su derecha, en el hueco que deja
   el titulo. Evita que la figura caiga detras de las tarjetas del contenido,
   que es donde se perdian. */
.index3-page .i3-fig--head{
  top:clamp(-12rem,-8.5vw,-4rem);
  right:clamp(1rem,5vw,6rem);
  bottom:auto;
  left:auto;
}