/* 
Theme Name: fundara
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: fundara
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =========================================================
   Fondo animado orgánico Fundara
   Clase Elementor: fundara-hero-bg

   Paleta:
   Cool Gray 2 C: #DEDEDC
   2261 C:        #A1C995
   2705 C:        #B2A0EC
   Black 6 C:     #141B0C
   ========================================================= */

.fundara-hero-bg {
  --fundara-gray: #DEDEDC;
  --fundara-green: #A1C995;
  --fundara-purple: #B2A0EC;
  --fundara-black: #141B0C;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  z-index: 0;
  min-height: 100vh;

  background-color: var(--fundara-gray);

  background-image:
    radial-gradient(circle, rgba(178, 160, 236, 0.95) 0%, rgba(178, 160, 236, 0.55) 28%, transparent 58%),
    radial-gradient(circle, rgba(161, 201, 149, 0.95) 0%, rgba(161, 201, 149, 0.55) 30%, transparent 62%),
    radial-gradient(circle, rgba(222, 222, 220, 0.95) 0%, rgba(222, 222, 220, 0.60) 35%, transparent 66%),
    radial-gradient(circle, rgba(178, 160, 236, 0.75) 0%, transparent 60%),
    radial-gradient(circle, rgba(161, 201, 149, 0.75) 0%, transparent 64%),
    linear-gradient(
      135deg,
      #DEDEDC 0%,
      #B2A0EC 38%,
      #A1C995 72%,
      #DEDEDC 100%
    ) !important;

  background-size:
    70% 75%,
    75% 80%,
    90% 90%,
    65% 65%,
    80% 80%,
    260% 260%;

  background-position:
    -15% 10%,
    110% 85%,
    50% 50%,
    95% -10%,
    5% 105%,
    0% 0%;

  background-repeat: no-repeat;

  animation: fundaraColorFlow 13s ease-in-out infinite alternate !important;
}

/* Capa de manchas orgánicas principales */
.fundara-hero-bg::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 1;
  pointer-events: none;

  background-image:
    radial-gradient(circle, rgba(178, 160, 236, 0.95) 0%, rgba(178, 160, 236, 0.45) 26%, transparent 58%),
    radial-gradient(circle, rgba(161, 201, 149, 0.95) 0%, rgba(161, 201, 149, 0.48) 30%, transparent 62%),
    radial-gradient(circle, rgba(222, 222, 220, 0.88) 0%, rgba(222, 222, 220, 0.45) 32%, transparent 64%),
    radial-gradient(circle, rgba(255, 255, 255, 0.30) 0%, transparent 50%),
    radial-gradient(circle, rgba(20, 27, 12, 0.10) 0%, transparent 56%);

  background-size:
    42% 46%,
    48% 52%,
    54% 58%,
    35% 38%,
    46% 50%;

  background-position:
    12% 18%,
    78% 70%,
    55% 35%,
    82% 22%,
    25% 82%;

  background-repeat: no-repeat;

  filter: blur(44px);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, background-position;

  animation: fundaraOrganicBlobs 10s ease-in-out infinite alternate !important;
}

/* Capa de degradado luminoso para remarcar transiciones */
.fundara-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image:
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(222, 222, 220, 0.26),
      rgba(178, 160, 236, 0.34),
      rgba(161, 201, 149, 0.32),
      rgba(222, 222, 220, 0.24),
      rgba(178, 160, 236, 0.28)
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.04) 42%,
      rgba(20, 27, 12, 0.06) 100%
    );

  background-size: 220% 220%, 100% 100%;
  background-position: 0% 50%, center;
  mix-blend-mode: soft-light;
  opacity: 0.9;

  animation: fundaraLightSweep 16s ease-in-out infinite alternate !important;
}

/* Contenido de Elementor por encima */
.fundara-hero-bg > * {
  position: relative;
  z-index: 5;
}

/* Texto recomendado sobre esta paleta */
.fundara-hero-bg,
.fundara-hero-bg h1,
.fundara-hero-bg h2,
.fundara-hero-bg h3,
.fundara-hero-bg h4,
.fundara-hero-bg h5,
.fundara-hero-bg h6,
.fundara-hero-bg p,
.fundara-hero-bg a,
.fundara-hero-bg span {
  color: var(--fundara-black);
}

/* Movimiento general de masas de color */
@keyframes fundaraColorFlow {
  0% {
    background-position:
      -15% 10%,
      110% 85%,
      50% 50%,
      95% -10%,
      5% 105%,
      0% 0%;
  }

  20% {
    background-position:
      8% 0%,
      96% 70%,
      58% 44%,
      78% 8%,
      18% 92%,
      35% 20%;
  }

  45% {
    background-position:
      35% 18%,
      72% 95%,
      42% 62%,
      102% 34%,
      -8% 74%,
      85% 70%;
  }

  70% {
    background-position:
      18% 44%,
      98% 46%,
      62% 38%,
      68% -4%,
      22% 112%,
      45% 100%;
  }

  100% {
    background-position:
      -5% 72%,
      82% 105%,
      48% 52%,
      105% 12%,
      0% 82%,
      100% 35%;
  }
}

/* Movimiento orgánico más marcado */
@keyframes fundaraOrganicBlobs {
  0% {
    transform: translate3d(-8%, -6%, 0) scale(1) rotate(0deg);
    background-position:
      12% 18%,
      78% 70%,
      55% 35%,
      82% 22%,
      25% 82%;
  }

  25% {
    transform: translate3d(7%, -4%, 0) scale(1.18) rotate(9deg);
    background-position:
      28% 12%,
      68% 82%,
      46% 48%,
      92% 34%,
      12% 74%;
  }

  50% {
    transform: translate3d(10%, 9%, 0) scale(1.32) rotate(-8deg);
    background-position:
      42% 34%,
      84% 58%,
      58% 62%,
      70% 18%,
      35% 92%;
  }

  75% {
    transform: translate3d(-7%, 12%, 0) scale(1.22) rotate(12deg);
    background-position:
      20% 48%,
      92% 74%,
      38% 42%,
      86% 8%,
      18% 64%;
  }

  100% {
    transform: translate3d(6%, -10%, 0) scale(1.12) rotate(-10deg);
    background-position:
      8% 28%,
      72% 88%,
      64% 30%,
      78% 42%,
      30% 78%;
  }
}

/* Barrido sutil de luz y contraste */
@keyframes fundaraLightSweep {
  0% {
    background-position: 0% 50%, center;
    transform: scale(1) rotate(0deg);
  }

  50% {
    background-position: 100% 50%, center;
    transform: scale(1.08) rotate(8deg);
  }

  100% {
    background-position: 35% 100%, center;
    transform: scale(1.04) rotate(-6deg);
  }
}

/* Móvil */
@media (max-width: 767px) {
  .fundara-hero-bg {
    background-size:
      95% 95%,
      100% 100%,
      120% 120%,
      90% 90%,
      110% 110%,
      300% 300%;

    animation-duration: 15s !important;
  }

  .fundara-hero-bg::before {
    inset: -65%;
    filter: blur(36px);
    animation-duration: 12s !important;
  }

  .fundara-hero-bg::after {
    animation-duration: 18s !important;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .fundara-hero-bg,
  .fundara-hero-bg::before,
  .fundara-hero-bg::after {
    animation: none !important;
  }
}


/*************************************************/

/* =========================================================
   Fondo animado Fundara V2
   Clase Elementor: fundara-hero-bg-v2

   Esta versión anima:
   - Ángulo del degradado
   - Porcentajes de color
   - Transición hacia blanco

   Paleta:
   Cool Gray 2 C: #DEDEDC
   2261 C:        #A1C995
   2705 C:        #B2A0EC
   Black 6 C:     #141B0C
   White:         #FFFFFF
   ========================================================= */


/* Variables animables */
@property --fundara-v2-angle {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}

@property --fundara-v2-white-1 {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --fundara-v2-gray {
  syntax: "<percentage>";
  initial-value: 22%;
  inherits: false;
}

@property --fundara-v2-purple {
  syntax: "<percentage>";
  initial-value: 46%;
  inherits: false;
}

@property --fundara-v2-white-2 {
  syntax: "<percentage>";
  initial-value: 58%;
  inherits: false;
}

@property --fundara-v2-green {
  syntax: "<percentage>";
  initial-value: 78%;
  inherits: false;
}

@property --fundara-v2-white-3 {
  syntax: "<percentage>";
  initial-value: 100%;
  inherits: false;
}


.fundara-hero-bg-v2 {
  --fundara-gray: #DEDEDC;
  --fundara-green: #A1C995;
  --fundara-purple: #B2A0EC;
  --fundara-black: #141B0C;
  --fundara-white: #FFFFFF;

  --fundara-v2-angle: 135deg;
  --fundara-v2-white-1: 0%;
  --fundara-v2-gray: 22%;
  --fundara-v2-purple: 46%;
  --fundara-v2-white-2: 58%;
  --fundara-v2-green: 78%;
  --fundara-v2-white-3: 100%;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  min-height: 100vh;

  background:
    linear-gradient(
      var(--fundara-v2-angle),
      var(--fundara-white) var(--fundara-v2-white-1),
      var(--fundara-gray) var(--fundara-v2-gray),
      var(--fundara-purple) var(--fundara-v2-purple),
      var(--fundara-white) var(--fundara-v2-white-2),
      var(--fundara-green) var(--fundara-v2-green),
      var(--fundara-white) var(--fundara-v2-white-3)
    ) !important;

  background-size: 180% 180%;
  background-position: 50% 50%;

  animation: fundaraV2GradientFlow 10s ease-in-out infinite alternate !important;
}


/* Capa muy sutil para dar profundidad, pero sin blobs */
.fundara-hero-bg-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(20, 27, 12, 0.05) 100%
    );

  opacity: 0.75;
  mix-blend-mode: soft-light;
}


/* Contenido por encima */
.fundara-hero-bg-v2 > * {
  position: relative;
  z-index: 2;
}


/* Color recomendado para textos */
.fundara-hero-bg-v2,
.fundara-hero-bg-v2 h1,
.fundara-hero-bg-v2 h2,
.fundara-hero-bg-v2 h3,
.fundara-hero-bg-v2 h4,
.fundara-hero-bg-v2 h5,
.fundara-hero-bg-v2 h6,
.fundara-hero-bg-v2 p,
.fundara-hero-bg-v2 a,
.fundara-hero-bg-v2 span {
  color: var(--fundara-black);
}


/* Animación principal:
   cambia el ángulo y el porcentaje de los colores */
@keyframes fundaraV2GradientFlow {
  0% {
    --fundara-v2-angle: 118deg;
    --fundara-v2-white-1: 0%;
    --fundara-v2-gray: 18%;
    --fundara-v2-purple: 42%;
    --fundara-v2-white-2: 56%;
    --fundara-v2-green: 78%;
    --fundara-v2-white-3: 100%;

    background-position: 0% 40%;
  }

  20% {
    --fundara-v2-angle: 148deg;
    --fundara-v2-white-1: 4%;
    --fundara-v2-gray: 24%;
    --fundara-v2-purple: 38%;
    --fundara-v2-white-2: 52%;
    --fundara-v2-green: 74%;
    --fundara-v2-white-3: 100%;

    background-position: 28% 60%;
  }

  40% {
    --fundara-v2-angle: 192deg;
    --fundara-v2-white-1: 0%;
    --fundara-v2-gray: 14%;
    --fundara-v2-purple: 34%;
    --fundara-v2-white-2: 64%;
    --fundara-v2-green: 86%;
    --fundara-v2-white-3: 100%;

    background-position: 70% 35%;
  }

  60% {
    --fundara-v2-angle: 236deg;
    --fundara-v2-white-1: 8%;
    --fundara-v2-gray: 30%;
    --fundara-v2-purple: 52%;
    --fundara-v2-white-2: 66%;
    --fundara-v2-green: 82%;
    --fundara-v2-white-3: 100%;

    background-position: 100% 70%;
  }

  80% {
    --fundara-v2-angle: 284deg;
    --fundara-v2-white-1: 0%;
    --fundara-v2-gray: 20%;
    --fundara-v2-purple: 48%;
    --fundara-v2-white-2: 72%;
    --fundara-v2-green: 88%;
    --fundara-v2-white-3: 100%;

    background-position: 45% 100%;
  }

  100% {
    --fundara-v2-angle: 326deg;
    --fundara-v2-white-1: 6%;
    --fundara-v2-gray: 26%;
    --fundara-v2-purple: 58%;
    --fundara-v2-white-2: 74%;
    --fundara-v2-green: 92%;
    --fundara-v2-white-3: 100%;

    background-position: 10% 20%;
  }
}


/* Móvil */
@media (max-width: 767px) {
  .fundara-hero-bg-v2 {
    background-size: 220% 220%;
    animation-duration: 12s !important;
  }
}


/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .fundara-hero-bg-v2 {
    animation: none !important;
  }
}