/* ═══════════════════════════════════════════════════════════════
   FUNDARA · Fondos animados · núcleo

   Lo común a todas las animaciones: la paleta, las condiciones que
   necesita el contenedor y la capa del lienzo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fdr-violeta:#B2A0EC;
  --fdr-violeta-oscuro:#4F29CC;
  --fdr-verde:#A1C995;
  --fdr-negro:#141B0C;
  --fdr-gris:#DEDEDC;
  --fdr-claro:#F0F0EF;
  --fdr-blanco:#FFFFFF;

  /* No es un color de marca: es la ausencia de telón. Sirve para
     superponer una animación sobre el fondo propio del contenedor,
     sea una imagen o un color puesto desde Elementor. */
  --fdr-transparente:transparent;
}

/* ── El contenedor marcado ────────────────────────────────────────
   Poner fundara-fondo-<id> le da de una vez las tres condiciones que
   cualquier fondo necesita: contexto de posicionamiento, recorte de
   lo que sobresale y una capa por encima para el contenido. Ya no
   hay que configurarlas a mano en el panel. */
[class*="fundara-fondo-"]{
  position:relative;
  overflow:hidden;
}
[class*="fundara-fondo-"] > *:not(.fdr-fondo){
  position:relative;
  z-index:2;
}

/* ── El lienzo ───────────────────────────────────────────────────── */
.fdr-fondo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}

.fdr-fondo__lienzo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Grano compartido. Cada animación decide su opacidad con --grano. */
.fdr-fondo__grano{
  position:absolute;
  inset:0;
  opacity:var(--grano,0);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Modo widget ─────────────────────────────────────────────────
   El widget de Elementor envuelve el contenido; hay que anular sus
   márgenes y dejar que se estire por todo el contenedor padre. */
.elementor-widget-fundara_fondo{
  position:absolute;
  inset:0;
  margin:0;
  pointer-events:none;
}
.elementor-widget-fundara_fondo .elementor-widget-container,
.elementor-widget-fundara_fondo [class*="fundara-fondo-"]{
  position:absolute;
  inset:0;
}