:root{
  --jf-tropical-background:
    url("/jardinflow-fondo-tropical-v1.30.6.webp?v=1.30.6");
  --jf-tropical-overlay:
    linear-gradient(
      135deg,
      rgba(4,31,20,.82),
      rgba(8,47,31,.70)
    );
  --jf-tropical-overlay-strong:
    linear-gradient(
      135deg,
      rgba(3,24,15,.90),
      rgba(7,42,27,.78)
    );
}

/* Fondo tropical en los campos verdes principales del index. */
.phone,
.workflow,
#jf-index-expansion-v1304 .jf-index-flow-wrap,
#jf-index-expansion-v1304 .jf-index-dashboard,
#jf-index-expansion-v1304 .jf-index-cta{
  background-image:
    var(--jf-tropical-overlay),
    var(--jf-tropical-background)!important;
  background-size:
    cover,
    cover!important;
  background-repeat:
    no-repeat,
    no-repeat!important;
  background-position:
    center,
    center!important;
  background-blend-mode:
    normal!important;
}

/* Mayor contraste para las áreas con más texto. */
.phone,
.workflow,
#jf-index-expansion-v1304 .jf-index-dashboard{
  background-image:
    var(--jf-tropical-overlay-strong),
    var(--jf-tropical-background)!important;
}

/* Variar el recorte para evitar repetición visual. */
.phone{
  background-position:
    center,
    44% center!important;
}

.workflow{
  background-position:
    center,
    56% center!important;
}

#jf-index-expansion-v1304 .jf-index-flow-wrap{
  background-position:
    center,
    38% center!important;
}

#jf-index-expansion-v1304 .jf-index-dashboard{
  background-position:
    center,
    68% center!important;
}

#jf-index-expansion-v1304 .jf-index-cta{
  background-position:
    center,
    25% center!important;
}

/* Cards internas: efecto vidrio sobre el fondo vegetal. */
.phone .metric-card,
.phone .visit,
.workflow .step,
#jf-index-expansion-v1304 .jf-index-step,
#jf-index-expansion-v1304 .jf-index-stat{
  background:
    linear-gradient(
      135deg,
      rgba(8,48,31,.72),
      rgba(4,30,19,.58)
    )!important;
  border-color:
    rgba(255,255,255,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 35px rgba(0,0,0,.12)!important;
  backdrop-filter:
    blur(7px)!important;
  -webkit-backdrop-filter:
    blur(7px)!important;
}

/* Asegurar legibilidad de textos. */
.phone,
.phone h3,
.phone strong,
.workflow,
.workflow h2,
.workflow strong,
#jf-index-expansion-v1304 .jf-index-flow-wrap,
#jf-index-expansion-v1304 .jf-index-flow-wrap h4,
#jf-index-expansion-v1304 .jf-index-dashboard,
#jf-index-expansion-v1304 .jf-index-dashboard strong,
#jf-index-expansion-v1304 .jf-index-cta,
#jf-index-expansion-v1304 .jf-index-cta h3{
  color:#fff!important;
}

.phone .phone-sub,
.phone .metric-label,
.phone .visit span,
.workflow .workflow-copy,
.workflow .step span,
#jf-index-expansion-v1304 .jf-index-step p,
#jf-index-expansion-v1304 .jf-index-stat span,
#jf-index-expansion-v1304 .jf-index-cta p{
  color:
    rgba(255,255,255,.78)!important;
}

/* Los números e íconos claros se conservan. */
.workflow .step-number,
#jf-index-expansion-v1304 .jf-index-step-number{
  color:#103729!important;
  background:
    rgba(202,243,216,.92)!important;
}

@media(max-width:680px){
  .phone,
  .workflow,
  #jf-index-expansion-v1304 .jf-index-flow-wrap,
  #jf-index-expansion-v1304 .jf-index-dashboard,
  #jf-index-expansion-v1304 .jf-index-cta{
    background-position:
      center,
      center!important;
  }
}