:root{
  --brand-primary:#6f3a8d; /* purple */
  --brand-secondary:#e9d7f2;
  --brand-accent:#5a2e74;
  --brand-dark:#1f1a24;
  --brand-light:#faf7fd;
}

html,body{background: var(--brand-light);}

.uk-navbar-container { 
  /*background: var(--brand-light);*/
  background: none !important;
  position: absolute;
  z-index: 1001;
  width: 100%;
   }
.uk-navbar-nav > li > a {
  color: #fff;
  font-weight: 600;
}
.logo-text { font-weight: 800; letter-spacing: .3px; color: var(--brand-primary); }

.hero{
  background: url('../images/bg-3-section.jpg') var(--brand-secondary);
  background-size: cover;
  position:relative;
  overflow:hidden;
  padding-top: 240px;
}
.hero img:nth-child(1){position: absolute; bottom: 0; width: 500px;}
.hero img:nth-child(2){position: absolute;left: 80px;width: 65px;top: -160px; z-index: 99;}
.hero img:nth-child(3){position: absolute;left: 10px;width: 100px; top: 170px;}
.hero img:nth-child(4){position: absolute;right: -38px;width: 84px;top: 72px;}

.hero .blob{
  position:absolute;
  right: -20%;
  top: -10%;
  width: 60vw;
  min-width: 480px;
  height: 60vw;
  min-height: 480px;
  background: #fff;
  border-radius: 50%;
  filter: blur(30px);
  opacity:.20;
  z-index: -1;
}
.uk-heading-small {font-weight: 700; color: #000;}
.uk-text-lead {color: #000}
.hero-cta .uk-button-primary{
  background: var(--brand-primary);
}

.badge-active {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .9rem;
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  font-weight:700;
}
.uk-button, .uk-button-primary {
  border-radius: 40px;
  background: var(--brand-primary);
  transition: all ease .4s;
  color: #fff;
}
.uk-button:hover, .uk-button-primary:hover {
  background: var(--brand-dark);
  transition: all ease .4s;
}
.uk-button-text {
  background: none;
  color: var(--brand-dark);
  font-weight: 600;
}
.uk-button-text:hover {
  background: none;
}
.feature-card{
  border-radius:18px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding:15px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.feature-card .icon-circle{
  width:60px;
  height:60px;
  display:grid;place-items:center;
  background: none;
  color: #fff;
  margin-right: 5px;
}
.icon-circle{
  width:52px;
  height:52px;
  display:grid;place-items:center;
  background: var(--brand-primary);
  color: #fff;
}
#features h2 {
  font-weight: 700;
}
#features > h4 {
  font-weight: 300;
  font-size: 32px;
}
#features .feature-card h4{
  font-size: 18px !importants;
  font-weight: 700;
  line-height: 24px;
}
#bg-2 {
  background: url('../images/bg-3-section.jpg');
  background-size: cover; 
  padding-top: 200px; 
  padding-bottom: 200px;
}
/* Fondo de pantalla completo */
    #bg-2 {

      /* Gradiente base */
      background: linear-gradient(120deg,
        #572365,
        #340a3f,
        #963caf,
        #ad7abb
      );
      background-size: 400% 400%;
      animation: gradientMove 15s ease infinite;
    }

    /* Animación del gradiente */
    @keyframes gradientMove {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
#bg-2 .img-position img:nth-child(1) {position: absolute; bottom: 0; width: 500px;}
#bg-2 .img-position img:nth-child(2) {position: absolute;left: -25px;width: 125px;bottom: 0;}
#bg-2 .img-position img:nth-child(3) {position: absolute;right: -63px;width: 100px; top: 85px;}
#bg-2 .img-position {
  position:relative;
  bottom: -200px;
}

#cta {
  padding-top: 50px;
  padding-bottom: 50px;
}
#cta h2 {
  line-height: 32px;
}
#cta h2 strong { 
  font-size: 0.5em;
  color: #000;
}
.morado-text {
  color: var(--brand-primary);
}
.white-text {
  color: #fff;
}
.footer {
  color:#8d8d8d;
  border-top: 1px solid #efefef;
  padding-top: 50px;
}
.hero .img-position{
  position:relative;
  bottom: -140px;
}

@media (max-width: 959px){
  .uk-navbar-toggle {
  color: #fff !important;
}
.uk-offcanvas {
  z-index: 99999!important;
}
.uk-offcanvas-bar {
  background: var(--brand-primary);
}

.uk-offcanvas-bar .uk-button-primary {
  color: #fff!important; 
  background: var(--brand-accent)!important; 
  text-align: center!important;   
  justify-content: center!important;
  text-transform: inherit;
}
.feature-card .icon-circle {
  margin-bottom: 0 !important;
}
  .hero .blob{ right:-40%; top:-20%; width:100vw; height:100vw; }
  .hero {
    padding-top: 0;
  }
  .hero img:nth-child(1) {
    position: relative;
    bottom: 0;
    width: 335px !important;
  }
  .hero .img-position{
    top: 80px;
    bottom: 0;
}
.hero img:nth-child(2) {
  position: absolute;
  left: 60px;
  width: 65px;
  top: 45px;
  z-index: 99;
}
.hero img:nth-child(3) {
  position: absolute;
  left: 35px;
  width: 90px;
  top: 200px;
}
.hero img:nth-child(4) {
  position: absolute;
  right: 0px;
  width: 65px;
  top: 62px;
}
#bg-2 {
  padding-bottom: 100px;
}
.mg-t, .img-position, #bg-2 p.uk-margin-small-top {
  margin-top: 80px !important;
}
.mg-t h2 {
  text-align: center;
  line-height: 2.5rem;
}
.mg-t p, .hero-cta {
  text-align: center;
}
.hero-cta a{
  margin-bottom: 20px;
}

#bg-2 .img-position img:nth-child(3) {
  position: absolute;
  right: -9px;
  width: 100px;
  top: -156px;
}
#bg-2 .img-position img:nth-child(3) {
  position: absolute;
  right: -9px;
  width: 100px;
  top: -156px;
}
#bg-2 .img-position img:nth-child(2) {
  position: absolute;
  left: 35px;
  width: 125px;
  bottom: 0;
}
p, h2, h1, a, div {
  text-align: center;
}
}