/* ACHALAI | decoración estática y opt-in. Continuidad cromática S4 -> Founder -> FAQ -> Lead Form */
.ach-bg-scope {
  --ach-bg-base: #050814;
  --ach-bg-blue: #2D7FF9;
  --ach-bg-violet: #7C5CFA;
  --ach-bg-fade: clamp(64px, 12vw, 180px);
  --ach-bg-curves-opacity: .55;
  --ach-bg-curves: url("/img/curvas.svg");
}

/* Aplicar a hosts existentes SOLO tras revisar sus estilos y containing blocks.
   Sin overflow, transform, filter, containment, isolation ni altura forzada. */
.ach-bg-host {
  position: relative;
  background-color: var(--ach-bg-base);
}

/* En desktop, #solucion mantiene background transparent para preservar la integración superior con Sección 3 */
@media (min-width: 1024px) {
  #solucion.ach-bg-host {
    background-color: transparent !important;
  }
}

/* Hijo absoluto puramente decorativo; no cambia el flujo ni recibe eventos. */
.ach-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* En #solucion, se sitúa sobre la atmósfera base (z-index: 1) y bajo el sticky frame (z-index: 10) */
#solucion > .ach-bg-layer {
  z-index: 2;
}

.ach-bg-layer::before,
.ach-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Sin máscaras: omitir atmósferas; base oscura uniforme y curvas con fade propio. */
  opacity: 0;
}

.ach-bg-layer::before {
  background: var(--ach-bg-atmosphere, none);
}

.ach-bg-layer::after {
  background: var(--ach-bg-curves) right center / auto 100% no-repeat;
}

.ach-bg-layer--laptop {
  --ach-bg-atmosphere:
    radial-gradient(ellipse at 62% 62%, rgb(124 92 250 / .12), transparent 65%),
    radial-gradient(ellipse at 28% 48%, rgb(45 127 249 / .09), transparent 62%);
}

.ach-bg-layer--founder {
  --ach-bg-atmosphere:
    radial-gradient(ellipse at 84% 44%, rgb(124 92 250 / .14), transparent 58%),
    radial-gradient(ellipse at 68% 64%, rgb(45 127 249 / .08), transparent 58%);
}

.ach-bg-layer--faq {
  --ach-bg-curves-opacity: .2;
  --ach-bg-atmosphere:
    radial-gradient(ellipse at 9% 38%, rgb(45 127 249 / .12), transparent 60%),
    radial-gradient(ellipse at 90% 70%, rgb(124 92 250 / .10), transparent 60%);
}

.ach-bg-layer--lead-form {
  --ach-bg-curves-opacity: .10;
  --ach-bg-atmosphere:
    /* Área editorial izquierda (Desktop): extensión fluida del azul de FAQ */
    radial-gradient(ellipse 640px 520px at 18% 38%, rgb(45 127 249 / .10), transparent 68%),
    radial-gradient(ellipse 480px 400px at 12% 72%, rgb(124 92 250 / .07), transparent 65%),
    /* Halo envolvente de la tarjeta de contacto (Derecha) */
    radial-gradient(ellipse 620px 540px at 80% 44%, rgb(45 127 249 / .11), transparent 70%),
    radial-gradient(ellipse 500px 440px at 88% 80%, rgb(124 92 250 / .08), transparent 70%);
}

@supports ((mask-image: linear-gradient(transparent, black)) or (-webkit-mask-image: linear-gradient(transparent, black))) {
  .ach-bg-layer::before,
  .ach-bg-layer::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
  /* En secciones suficientemente altas, fade acotado en px; en las cortas usar % para no cruzar stops. */
  @supports (height: min(1px, 1%)) {
    .ach-bg-layer::before,
    .ach-bg-layer::after {
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 min(22%, var(--ach-bg-fade)), #000 max(78%, calc(100% - var(--ach-bg-fade))), transparent);
      mask-image: linear-gradient(to bottom, transparent, #000 min(22%, var(--ach-bg-fade)), #000 max(78%, calc(100% - var(--ach-bg-fade))), transparent);
    }
  }

  /* Coordinación de continuidad fluida para la secuencia Founder -> FAQ -> Demo */
  .ach-bg-layer--founder::before,
  .ach-bg-layer--founder::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 min(20%, 80px), #000 85%, rgba(0, 0, 0, 0.88) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 min(20%, 80px), #000 85%, rgba(0, 0, 0, 0.88) 100%);
  }

  .ach-bg-layer--faq::before,
  .ach-bg-layer--faq::after {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, #000 35px, #000 calc(100% - 35px), rgba(0, 0, 0, 0.90) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, #000 35px, #000 calc(100% - 35px), rgba(0, 0, 0, 0.90) 100%);
  }

  .ach-bg-layer--lead-form::before,
  .ach-bg-layer--lead-form::after {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.90) 0%, #000 35px, #000 max(80%, calc(100% - 75px)), transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.90) 0%, #000 35px, #000 max(80%, calc(100% - 75px)), transparent 100%);
  }

  .ach-bg-layer::before { opacity: 1; }
  .ach-bg-layer::after { opacity: var(--ach-bg-curves-opacity); }
  .ach-bg-layer--laptop::after { opacity: 0 !important; display: none !important; }
}

@media (max-width: 767px) {
  .ach-bg-scope { --ach-bg-fade: 72px; --ach-bg-curves-opacity: .28; }
  .ach-bg-layer--faq { --ach-bg-curves-opacity: .14; }
  .ach-bg-layer--lead-form {
    --ach-bg-curves-opacity: .07;
    --ach-bg-atmosphere:
      radial-gradient(ellipse 390px 420px at 50% 28%, rgb(45 127 249 / .10), transparent 70%),
      radial-gradient(ellipse 360px 440px at 50% 72%, rgb(124 92 250 / .08), transparent 70%);
  }
  .ach-bg-layer::after { background-size: auto 100%; background-position: 65% center; }
}
/* No hay animación, scroll listeners, fixed ni parallax. Reduced motion es estático por defecto. */