/* =========================================================
   KONNECT V4 — Sistema de fondos ambientales
   Degradados largos azul → negro → color de la línea, con una
   oscuridad aproximada del 35 % respecto al azul plano de V3.

   Uso:
     .k-amb                 Neutral "Signals" (azul ↔ negro) para
                            secciones generales.
     .k-amb--pyme / --hip / --auto / --seg
                            Universo de cada línea de negocio.
     .k-amb--flip           Espejo horizontal de la imagen.
     .k-amb--flip-y         Espejo vertical.
     .k-amb--sweep          Solo CSS (sin imagen): barrido diagonal largo.
     .k-amb--deep           Más oscuro (texto largo o tablas).
     .k-amb-veil            Velo local de lectura detrás de un bloque.

   Capas (de abajo arriba):
     1. color de respaldo (--amb-base)
     2. imagen oficial optimizada (WebP 960/1920, ~3–12 KB)
     3. barrido CSS que extiende el color por toda la composición
     4. velo de oscuridad (--amb-dark) para el 35 % global
   El contenido siempre queda por encima (isolation + z-index -1).
   Ninguna imagen se precarga: son fondos fuera del primer viewport.
========================================================= */

.k-amb {
  --amb-base: #0C0D2E;
  --amb-blue: #222490;
  --amb-black: #0B0B12;
  --amb-c: #5EEDF2;
  --amb-img: url("../images/ambient/fondo-neutral-1920.webp");
  --amb-pos: center;
  --amb-flip: none;
  --amb-dark: 0.18;
  --amb-sweep: linear-gradient(160deg, rgba(34, 36, 144, 0.55) 0%, rgba(11, 11, 18, 0) 46%, rgba(34, 36, 144, 0.35) 100%);
  position: relative;
  isolation: isolate;
  background-color: var(--amb-base);
}
.k-amb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(5, 5, 15, var(--amb-dark)), rgba(5, 5, 15, var(--amb-dark))),
    var(--amb-sweep),
    var(--amb-img) var(--amb-pos) / cover no-repeat;
  transform: var(--amb-flip);
}
@media (max-width: 767px) {
  .k-amb { --amb-img: url("../images/ambient/fondo-neutral-960.webp"); }
}

/* ---------- Líneas de negocio ---------- */
/* El color de la línea ocupa el extremo opuesto al texto y se extiende
   con un barrido largo; nunca queda encerrado en una esquina. */
.k-amb--pyme {
  --amb-c: #5EEDF2;
  --amb-img: url("../images/ambient/fondo-pyme-1920.webp");
  --amb-sweep: linear-gradient(115deg, rgba(34, 36, 144, 0.5) 0%, rgba(11, 11, 18, 0.1) 42%, rgba(94, 237, 242, 0.1) 78%, rgba(94, 237, 242, 0.22) 100%);
}
.k-amb--hip {
  --amb-c: #B14AE3;
  --amb-img: url("../images/ambient/fondo-hipotecario-1920.webp");
  --amb-sweep: linear-gradient(115deg, rgba(34, 36, 144, 0.5) 0%, rgba(11, 11, 18, 0.1) 42%, rgba(177, 74, 227, 0.12) 78%, rgba(177, 74, 227, 0.26) 100%);
}
.k-amb--auto {
  --amb-c: #7DE34A;
  --amb-img: url("../images/ambient/fondo-autos-1920.webp");
  --amb-sweep: linear-gradient(115deg, rgba(34, 36, 144, 0.5) 0%, rgba(11, 11, 18, 0.1) 42%, rgba(125, 227, 74, 0.08) 78%, rgba(125, 227, 74, 0.2) 100%);
}
.k-amb--seg {
  --amb-c: #F26953;
  --amb-img: url("../images/ambient/fondo-seguros-1920.webp");
  --amb-sweep: linear-gradient(115deg, rgba(34, 36, 144, 0.5) 0%, rgba(11, 11, 18, 0.1) 42%, rgba(242, 105, 83, 0.1) 78%, rgba(242, 105, 83, 0.24) 100%);
}
@media (max-width: 767px) {
  .k-amb--pyme { --amb-img: url("../images/ambient/fondo-pyme-960.webp"); }
  .k-amb--hip { --amb-img: url("../images/ambient/fondo-hipotecario-960.webp"); }
  .k-amb--auto { --amb-img: url("../images/ambient/fondo-autos-960.webp"); }
  .k-amb--seg { --amb-img: url("../images/ambient/fondo-seguros-960.webp"); }
}

/* ---------- Modificadores ---------- */
.k-amb--flip { --amb-flip: scaleX(-1); }
.k-amb--flip-y { --amb-flip: scaleY(-1); }
.k-amb--flip.k-amb--flip-y { --amb-flip: scale(-1, -1); }
.k-amb--deep { --amb-dark: 0.34; }
.k-amb--soft { --amb-dark: 0.06; }

/* Barrido solo CSS: azul → negro → color, largo y diagonal. Útil para
   repetir un universo sin repetir la misma fotografía de fondo. */
.k-amb--sweep { --amb-img: none; }
.k-amb--sweep::before {
  background:
    linear-gradient(rgba(5, 5, 15, var(--amb-dark)), rgba(5, 5, 15, var(--amb-dark))),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--amb-c) 34%, transparent) 0%, transparent 62%),
    linear-gradient(125deg, var(--amb-blue) 0%, #15165C 22%, var(--amb-black) 52%, color-mix(in srgb, var(--amb-c) 22%, var(--amb-black)) 86%, color-mix(in srgb, var(--amb-c) 40%, var(--amb-black)) 100%);
}

/* Velo local de lectura: garantiza contraste AA detrás de un bloque de
   texto sin oscurecer toda la sección. */
.k-amb-veil {
  position: relative;
}
.k-amb-veil::before {
  content: "";
  position: absolute;
  inset: -12% -16%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 8, 20, 0.55), rgba(8, 8, 20, 0) 100%);
}

/* =========================================================
   APLICACIÓN V4 EN TODO EL SITIO
   Este archivo se carga después del CSS de cada página: aquí se
   sustituyen los campos azul plano por el sistema de fondos.
========================================================= */

/* 1 · Capítulos azules (.k-light / .k-sheet.k-light): ~35 % más oscuros.
   #222490 × 0.65 ≈ #16175E es el centro; el degradado se extiende hasta
   el negro oficial y vuelve al azul, largo y diagonal. */
html .k-light, html .k-sheet.k-light {
  --k-paper: #16175E;
  --k-paper-2: #121350;
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(94, 237, 242, 0.09), transparent 70%),
    linear-gradient(158deg, #101146 0%, #17186A 28%, #1B1D7A 46%, #121344 70%, #0D0D1E 100%);
}

/* 2 · Aperturas generales: fondo neutral "Signals" + velo de lectura
   detrás del texto (izquierda) que garantiza contraste AA. */
.sol-hero, .mkt-hero, .nos-hero, .ben-hero, .mem-hero {
  background:
    linear-gradient(90deg, rgba(9, 9, 28, 0.62) 0%, rgba(9, 9, 28, 0.25) 55%, rgba(9, 9, 28, 0) 100%),
    url("../images/ambient/fondo-neutral-1920.webp") center / cover no-repeat,
    #0C0D2E;
}
.mkt-hero { background-position: 0 0, 70% center, 0 0; }
.nos-hero { background-position: 0 0, 30% center, 0 0; }
@media (max-width: 767px) {
  .sol-hero, .mkt-hero, .nos-hero, .ben-hero, .mem-hero {
    background:
      linear-gradient(180deg, rgba(9, 9, 28, 0.5), rgba(9, 9, 28, 0.2)),
      url("../images/ambient/fondo-neutral-960.webp") center / cover no-repeat,
      #0C0D2E;
  }
}

/* 3 · Líneas de negocio: nuevos fondos azul → negro → color en aperturas. */
/* URLs explícitas (no en variables): una url() relativa dentro de una
   custom property se resuelve desde la hoja que la usa, no desde esta. */
[data-page="hipotecario"] .dv-hero__bg { background-image: url("../images/ambient/fondo-hipotecario-1920.webp"); }
[data-page="automotriz"] .dv-hero__bg { background-image: url("../images/ambient/fondo-autos-1920.webp"); }
[data-page="seguros"] .dv-hero__bg { background-image: url("../images/ambient/fondo-seguros-1920.webp"); }
@media (max-width: 1023px) {
  [data-page="hipotecario"] .dv-hero__bg { background-image: url("../images/ambient/fondo-hipotecario-960.webp"); }
  [data-page="automotriz"] .dv-hero__bg { background-image: url("../images/ambient/fondo-autos-960.webp"); }
  [data-page="seguros"] .dv-hero__bg { background-image: url("../images/ambient/fondo-seguros-960.webp"); }
}
.pyme-hero::before { background-image: url("../images/ambient/fondo-pyme-1920.webp"); }
@media (max-width: 767px) { .pyme-hero::before { background-image: url("../images/ambient/fondo-pyme-960.webp"); } }
.dv-hero::after { background: linear-gradient(90deg, rgba(10, 10, 30, 0.78) 0%, rgba(10, 10, 30, 0.5) 42%, rgba(10, 10, 30, 0) 76%); }
.pyme-hero::after { background: linear-gradient(90deg, rgba(10, 10, 30, 0.9) 0%, rgba(10, 10, 30, 0.66) 42%, rgba(10, 10, 30, 0) 74%); }

/* 4 · Secciones intermedias de cada línea: barrido largo azul → negro →
   color de la línea (--hue en division.css; aqua en PyME). */
.hip-paths, .auto-lanes, .seg-layers, .dv-support, .auto-families {
  background:
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--hue) 20%, transparent) 0%, transparent 65%),
    linear-gradient(125deg, #1A1C78 0%, #121350 26%, #0C0C18 56%, color-mix(in srgb, var(--hue) 14%, #0C0C18) 100%);
}
.dv-support {
  background:
    radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--hue) 16%, transparent) 0%, transparent 65%),
    linear-gradient(305deg, #1A1C78 0%, #121350 30%, #0C0C18 62%, color-mix(in srgb, var(--hue) 12%, #0C0C18) 100%);
}
.dv-final {
  background:
    radial-gradient(60% 80% at 50% 115%, color-mix(in srgb, var(--hue) 40%, transparent), transparent 70%),
    url("../images/ambient/fondo-neutral-1920.webp") center / cover no-repeat,
    #0C0D2E;
}
[data-page="hipotecario"] .dv-final { background-image: radial-gradient(60% 80% at 50% 115%, color-mix(in srgb, var(--hue) 40%, transparent), transparent 70%), url("../images/ambient/fondo-hipotecario-1920.webp"); background-position: center, left center; }
[data-page="automotriz"] .dv-final { background-image: radial-gradient(60% 80% at 50% 115%, color-mix(in srgb, var(--hue) 40%, transparent), transparent 70%), url("../images/ambient/fondo-autos-1920.webp"); background-position: center, left center; }
[data-page="seguros"] .dv-final { background-image: radial-gradient(60% 80% at 50% 115%, color-mix(in srgb, var(--hue) 40%, transparent), transparent 70%), url("../images/ambient/fondo-seguros-1920.webp"); background-position: center, left center; }
.dv-final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(10, 10, 30, 0.58); }
.dv-final { isolation: isolate; }
.pyme-catalog, .pyme-support {
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(94, 237, 242, 0.14) 0%, transparent 65%),
    linear-gradient(125deg, #1A1C78 0%, #121350 26%, #0C0C18 56%, #0B2328 100%);
}

/* 5 · Inicio: "Así conecta" continúa el campo neutral de la apertura. */
.home-connect {
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(94, 237, 242, 0.12), transparent 65%),
    linear-gradient(180deg, #0F1036 0%, #15165C 48%, #1A1C78 100%);
}

/* 5b · Resto de campos azul plano: barrido largo azul → negro (~35 %). */
.ben-chapters, .ben-wide, .mkt-why, .mkt-faq, .mem-join, .mem-faq, .op-pay {
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(94, 237, 242, 0.08), transparent 65%),
    linear-gradient(160deg, #16176A 0%, #111246 38%, #0D0D22 72%, #131452 100%);
}
.ben-chapter--alt { background: linear-gradient(200deg, #17186C 0%, #0F1038 60%, #0C0C1C 100%); }
.op-hero { background: linear-gradient(90deg, rgba(9, 9, 28, 0.55), rgba(9, 9, 28, 0.15)), url("../images/ambient/fondo-neutral-1920.webp") center / cover no-repeat, #0C0D2E; }

/* 5c · Cierres: el neutral "Signals" con la luz aqua del horizonte. */
.ben-final, .mkt-final, .op-final {
  background:
    radial-gradient(50% 70% at 50% 112%, rgba(94, 237, 242, 0.26), transparent 70%),
    linear-gradient(rgba(9, 9, 28, 0.3), rgba(9, 9, 28, 0.3)),
    url("../images/ambient/fondo-neutral-1920.webp") center / cover no-repeat,
    #0C0D2E;
}

/* 6 · Isotipos decorativos: uno por sección como máximo (V3 repetía tres
   o más). El isotipo pasa a ser protagonista solo donde explica algo. */
.k-floaters .k-float:nth-child(n + 2) { display: none; }
.k-float { --o: 0.1; }
@media (max-width: 1023px) {
  .dv-hero::after, .pyme-hero::after { background: linear-gradient(180deg, rgba(10, 10, 30, 0.9) 0%, rgba(10, 10, 30, 0.74) 60%, rgba(10, 10, 30, 0.4) 100%); }
}