/* CANONICAL — promoted from section-05-v2-1.css (Global Polish V2); previous canonical archived in src/archive/section-05-v2-canonical/ */
/*
 * DIA CAPITAL — Section 05 · De sistema a ecosistema. V2 TEST base (canonical Section 05 V2 styles + the block at the end)
 * (adopted 2026-10-13; COMPOSITION APPROVED / CANONICAL). v1.0 archived in
 * src/archive/section-05-v1.0/.
 *
 * Requires the base system (main.css). Fills the dia.sections layer; scoped
 * under .dia-apex. A dark immersive field in both themes (.dia-island). Static.
 *
 * One continuous spatial field with three territories of the same architecture.
 * Scope is read from the products themselves (one module → four connected → six
 * connected around a larger core), not from size: optical scaling is restrained
 * (Gold ≈ 82 % / Pro ≈ 90 % / Elite ≈ 98 % of a common art zone, all capped to the
 * same height, so the visual masses stay comparable). Depth, back to front:
 *   1 deep ground · 2 distant atmosphere · 3 a faint shared horizon + ground haze ·
 *   4 a restrained light pool behind each product (tight and Bronze for Gold;
 *     wider, Bronze + cool for Pro; widest, multi-hue for Elite) and a soft floor
 *     shadow · 5 the official transparent products · 6 typography.
 * No grids, charts, particles, arrows, podiums or cards.
 */

@layer dia.sections {
  .dia-apex .dia-eco2 {
    --dia-eco2-ground: color-mix(in srgb, var(--dia-island-bg) 70%, #000);
    --dia-eco2-art-h: clamp(250px, 21vw, 330px);
    --dia-eco2-line: color-mix(in srgb, var(--dia-text-secondary) 55%, transparent);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--dia-text);
    background:
      radial-gradient(ellipse 85% 50% at 50% 46%, color-mix(in srgb, var(--dia-surface) 60%, transparent) 0%, transparent 76%),
      var(--dia-eco2-ground);
  }

  /* Edge vignette. */
  .dia-apex .dia-eco2::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 58%, rgb(0 0 0 / 0.38) 100%);
  }

  /* ---------- Head ---------- */

  .dia-apex .dia-eco2__head {
    max-inline-size: 48rem;
  }

  .dia-apex .dia-eco2__title {
    margin-block-start: var(--space-4);
  }

  /* ---------- Territories ---------- */

  .dia-apex .dia-eco2__stages {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-7);
    margin: var(--space-10) 0 0;
    padding: 0;
    list-style: none;
  }

  /* Shared horizon: one faint line under all three products, with a ground haze below it. */
  .dia-apex .dia-eco2__stages::before,
  .dia-apex .dia-eco2__stages::after {
    content: "";
    position: absolute;
    inset-inline: calc(-1 * var(--space-7));
    pointer-events: none;
  }

  .dia-apex .dia-eco2__stages::before {
    inset-block-start: var(--dia-eco2-art-h);
    block-size: 1px;
    background: linear-gradient(to right, transparent, var(--dia-eco2-line) 14%, var(--dia-eco2-line) 86%, transparent);
  }

  /* Ground haze: an elliptical lift under the horizon — no hard edges. */
  .dia-apex .dia-eco2__stages::after {
    z-index: -1;
    inset-block-start: var(--dia-eco2-art-h);
    block-size: 140px;
    background: radial-gradient(ellipse 52% 100% at 50% 0%, color-mix(in srgb, var(--dia-surface) 40%, transparent) 0%, transparent 72%);
  }

  .dia-apex .dia-eco2__stage {
    --dia-eco2-accent: var(--dia-bronze);
    --dia-eco2-w: 90%;

    display: grid;
    grid-template-rows: var(--dia-eco2-art-h) auto;
    min-inline-size: 0;
  }

  .dia-apex .dia-eco2__stage--gold {
    --dia-eco2-w: 82%;
    --dia-eco2-pool:
      radial-gradient(ellipse 40% 40% at 50% 56%, color-mix(in srgb, var(--apex-gold) 18%, transparent) 0%, transparent 72%);
  }

  .dia-apex .dia-eco2__stage--bundle-pro {
    --dia-eco2-w: 90%;
    --dia-eco2-accent: linear-gradient(90deg, var(--dia-bronze) 0 50%, var(--apex-volume) 50% 100%);
    --dia-eco2-pool:
      radial-gradient(ellipse 34% 34% at 50% 54%, color-mix(in srgb, var(--apex-gold) 16%, transparent) 0%, transparent 72%),
      radial-gradient(ellipse 56% 50% at 50% 50%, color-mix(in srgb, var(--apex-fractal) 9%, transparent) 0%, transparent 74%);
  }

  .dia-apex .dia-eco2__stage--bundle-elite {
    --dia-eco2-w: 98%;
    --dia-eco2-pool:
      radial-gradient(ellipse 34% 36% at 50% 52%, color-mix(in srgb, var(--apex-gold) 18%, transparent) 0%, transparent 72%),
      radial-gradient(ellipse 30% 30% at 26% 40%, color-mix(in srgb, var(--apex-fractal) 9%, transparent) 0%, transparent 74%),
      radial-gradient(ellipse 30% 30% at 76% 66%, color-mix(in srgb, var(--apex-volume) 9%, transparent) 0%, transparent 74%),
      radial-gradient(ellipse 64% 54% at 50% 50%, color-mix(in srgb, var(--apex-fund-open) 6%, transparent) 0%, transparent 76%);
  }

  .dia-apex .dia-eco2__art {
    position: relative;
    display: grid;
    place-items: end center;
    margin: 0;
    padding-block-end: var(--space-4);
  }

  /* Light pool behind the product (the product's own light stays the main source). */
  .dia-apex .dia-eco2__art::before {
    content: "";
    position: absolute;
    inset: -12% -10% -4%;
    background: var(--dia-eco2-pool);
    pointer-events: none;
  }

  /* Soft floor shadow on the horizon. */
  .dia-apex .dia-eco2__art::after {
    content: "";
    position: absolute;
    inset-inline: 14%;
    inset-block-end: -10px;
    block-size: 26px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.55), transparent 72%);
    pointer-events: none;
  }

  .dia-apex .dia-eco2__art picture {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: end center;
    inline-size: 100%;
    block-size: 100%;
  }

  /* Every product is capped to the same art-zone height (comparable masses); width follows its architecture. */
  .dia-apex .dia-eco2__img {
    display: block;
    inline-size: var(--dia-eco2-w);
    block-size: auto;
    max-block-size: calc(var(--dia-eco2-art-h) - var(--space-4));
    object-fit: contain;
    object-position: 50% 100%;
  }

  /* ---------- Copy per territory ---------- */

  .dia-apex .dia-eco2__text {
    padding-block-start: var(--space-6);
  }

  .dia-apex .dia-eco2__role {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dia-text);
  }

  .dia-apex .dia-eco2__role::before {
    content: "";
    flex: none;
    inline-size: var(--space-5);
    block-size: 2px;
    background: var(--dia-eco2-accent);
  }

  .dia-apex .dia-eco2__num {
    font-variant-numeric: tabular-nums;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-eco2__name {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: var(--dia-fs-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dia-text);
  }

  .dia-apex .dia-eco2__desc {
    max-inline-size: 30rem;
    margin: var(--space-3) 0 0;
    font-size: var(--dia-fs-body);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* Per-level inclusion lists: real text; shown on small screens, visually hidden where the index shows them. */
  .dia-apex .dia-eco2__comp {
    margin: var(--space-4) 0 0;
    padding: var(--space-4) 0 0;
    list-style: none;
    border-block-start: 1px solid var(--dia-border);
    font-size: var(--dia-fs-small);
    line-height: 1.5;
    color: var(--dia-text);
  }

  .dia-apex .dia-eco2__comp > li + li {
    margin-block-start: var(--space-2);
  }

  .dia-apex .dia-eco2__comp > .dia-eco2__inherited {
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-eco2__plus {
    display: inline-block;
    inline-size: 1em;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-eco2__map {
    display: none;
  }

  /* ---------- Closing bridge into Section 06 ---------- */

  .dia-apex .dia-eco2__close {
    position: relative;
    display: grid;
    justify-items: center;
    margin-block-start: var(--space-11);
    padding-block: var(--space-8) var(--space-6);
    text-align: center;
  }

  /* A faint convergence of the field's light behind the sentence. */
  .dia-apex .dia-eco2__close::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -20% -10%;
    background:
      radial-gradient(ellipse 34% 46% at 50% 50%, color-mix(in srgb, var(--dia-bronze) 9%, transparent) 0%, transparent 72%),
      radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--dia-surface) 55%, transparent) 0%, transparent 78%);
    pointer-events: none;
  }

  .dia-apex .dia-eco2__bridge {
    max-inline-size: 28ch;
    margin: 0;
    text-wrap: balance;
  }

  /* ---------- ≥ 1024px: index shown, lists visually hidden ---------- */

  @media (min-width: 1024px) {
    .dia-apex .dia-eco2__comp {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: 0;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    /* Inclusion index: an architectural activation map, not a table. */
    .dia-apex .dia-eco2__map {
      --g: var(--dia-gutter);
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      column-gap: var(--g);
      row-gap: var(--space-4);
      margin-block-start: var(--space-10);
      padding-block-start: var(--space-7);
      border-block-start: 1px solid var(--dia-border);
    }

    .dia-apex .dia-eco2__span {
      grid-column: 1 / span var(--n);
      display: grid;
      justify-items: end;
      row-gap: var(--space-2);
    }

    .dia-apex .dia-eco2__span--gold  { --n: 1; --cut: 0%; }
    .dia-apex .dia-eco2__span--pro   { --n: 4; --cut: calc((100% - 3 * var(--g)) / 4 + var(--g) / 2); }
    .dia-apex .dia-eco2__span--elite { --n: 6; --cut: calc((100% - 5 * var(--g)) / 6 * 4 + var(--g) * 3.5); }

    .dia-apex .dia-eco2__span-label {
      font-size: var(--dia-fs-small);
      font-weight: 600;
      line-height: 1.4;
      color: var(--dia-text);
    }

    .dia-apex .dia-eco2__span-line {
      position: relative;
      justify-self: stretch;
      block-size: 9px;
      background:
        linear-gradient(to right, var(--dia-eco2-line) 0 var(--cut), var(--dia-text) var(--cut) 100%)
        0 50% / 100% 1px no-repeat;
      border-inline: 1px solid var(--dia-text-secondary);
    }

    .dia-apex .dia-eco2__module {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
      margin-block-start: var(--space-3);
      font-size: var(--dia-fs-label);
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--dia-text-secondary);
    }

    .dia-apex .dia-eco2__module::before {
      content: "";
      flex: none;
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background: var(--dia-eco2-dot);
      transform: translateY(-1px);
    }
  }

  /* ---------- 768–1023px: three generous horizontal chapters ---------- */

  @media (min-width: 768px) and (max-width: 1023px) {
    .dia-apex .dia-eco2 {
      --dia-eco2-art-h: 300px;
    }

    .dia-apex .dia-eco2__stages {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-9);
      margin-block-start: var(--space-9);
    }

    .dia-apex .dia-eco2__stages::before,
    .dia-apex .dia-eco2__stages::after {
      display: none;
    }

    .dia-apex .dia-eco2__stage {
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
      grid-template-rows: var(--dia-eco2-art-h);
      column-gap: var(--space-7);
      align-items: center;
    }

    .dia-apex .dia-eco2__text {
      padding-block-start: 0;
    }
  }

  /* ---------- < 768px: one stacked flow, same field ---------- */

  @media (max-width: 767px) {
    .dia-apex .dia-eco2__stages {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-9);
      margin-block-start: var(--space-8);
    }

    .dia-apex .dia-eco2__stages::before,
    .dia-apex .dia-eco2__stages::after {
      display: none;
    }

    .dia-apex .dia-eco2__stage {
      grid-template-rows: auto auto;
    }

    /* Mobile scale stays restrained: Gold 84 % / Pro 90 % / Elite 96 % of the width. */
    .dia-apex .dia-eco2__stage--gold         { --dia-eco2-w: 84%; }
    .dia-apex .dia-eco2__stage--bundle-pro   { --dia-eco2-w: 90%; }
    .dia-apex .dia-eco2__stage--bundle-elite { --dia-eco2-w: 96%; }

    .dia-apex .dia-eco2__art {
      min-block-size: 220px;
    }

    .dia-apex .dia-eco2__img {
      max-block-size: 300px;
    }

    .dia-apex .dia-eco2__text {
      padding-block-start: var(--space-5);
    }

    .dia-apex .dia-eco2__close {
      margin-block-start: var(--space-10);
      padding-block: var(--space-6) var(--space-4);
    }
  }
}

/* =====================================================================
 * Section 05 V2 — bridge opening, softer art edges, Matrix as coordination layer
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-eco2__intro { max-inline-size: 44rem; margin: var(--space-4) 0 0; font-size: var(--dia-fs-body); line-height: 1.6; color: var(--dia-text-secondary); text-wrap: pretty; }

  /* Entry: the page of Section 04 returns to the immersive dark field through a short ramp. */
  .dia-apex .dia-eco2--v2::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    block-size: 4rem;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--dia-bg) 0%, transparent 100%);
  }

  .dia-theme-light .dia-apex .dia-eco2--v2::before {
    block-size: 5rem;
    background: linear-gradient(to bottom, #F7F8F8 0%, #DCE5E9 16%, #8FA6B2 40%, #3B5666 64%, rgb(7 20 28 / 0.6) 86%, transparent 100%);
  }

  /* The products carry a faint rectangular alpha halo: a soft radial mask feathers every edge (object untouched). */
  .dia-apex .dia-eco2--v2 .dia-eco2__img {
    -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 52%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 52% 50% at 50% 52%, #000 70%, transparent 100%);
  }

  /* Elite: slightly more depth (a wider cool + Bronze atmosphere), without extra size. */
  .dia-apex .dia-eco2--v2 .dia-eco2__stage--bundle-elite .dia-eco2__art::before {
    background:
      radial-gradient(ellipse 54% 46% at 50% 54%, rgb(201 138 75 / 0.14), transparent 72%),
      radial-gradient(ellipse 70% 58% at 50% 52%, rgb(61 139 255 / 0.10), transparent 76%);
  }

  /* Matrix: the coordination layer, set apart from the modules by a hairline and a Bronze ring marker. */
  .dia-apex .dia-eco2__comp > .dia-eco2__matrix {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid color-mix(in srgb, var(--dia-bronze) 40%, transparent);
    color: var(--dia-text);
  }

  .dia-apex .dia-eco2__comp > .dia-eco2__matrix::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    inline-size: 9px;
    block-size: 9px;
    margin-inline-end: 0.6em;
    border: 1.5px solid var(--dia-bronze);
    border-radius: 50%;
    vertical-align: baseline;
  }
}

@layer dia.sections {
  .dia-apex .dia-eco2--v2 { padding-block-start: clamp(3rem, 5vw, 4.5rem); }

  /* The Matrix is a coordination layer across Bundle Pro and Bundle Elite (not a module of the six). */
  @media (min-width: 1024px) {
    .dia-apex .dia-eco2__span--matrix { --n: 6; --cut: calc((100% - 5 * var(--g)) / 6 + var(--g) / 2); grid-column: 1 / -1; justify-items: start; }
    .dia-apex .dia-eco2__span--matrix .dia-eco2__span-label { color: var(--dia-accent-text-raised); }
    .dia-apex .dia-eco2__span--matrix .dia-eco2__span-line {
      background: linear-gradient(to right, transparent 0 var(--cut), var(--dia-bronze) var(--cut) 100%) 0 50% / 100% 1px no-repeat;
      border-image: none;
    }
    .dia-apex .dia-eco2__span--matrix .dia-eco2__span-line::before,
    .dia-apex .dia-eco2__span--matrix .dia-eco2__span-line::after { border-color: var(--dia-bronze); }
  }
}

/* =====================================================================
 * V2.1 — unmasked product art (environment-only integration) + compact bridge into Section 06
 * ===================================================================== */
@layer dia.sections {
  /* The V2 object masks are removed: the PNG / WebP is shown crisp and complete (its alpha edges are clean). */
  .dia-apex .dia-eco2--v2 .dia-eco2__img { -webkit-mask-image: none; mask-image: none; }

  /* Apex Gold: slightly larger, with a local Bronze grounding field behind the terminal. */
  .dia-apex .dia-eco2--v2 .dia-eco2__stage--gold { --dia-eco2-w: 90%; }
  .dia-apex .dia-eco2--v2 .dia-eco2__stage--gold .dia-eco2__art::before {
    background:
      radial-gradient(ellipse 46% 40% at 50% 58%, rgb(201 138 75 / 0.16), transparent 72%),
      radial-gradient(ellipse 62% 50% at 50% 56%, rgb(201 138 75 / 0.07), transparent 76%);
  }

  /* Environment: a stage-level glow behind each product (outside the object) and a slightly firmer contact shadow. */
  .dia-apex .dia-eco2--v2 .dia-eco2__art::after { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.62), transparent 72%); }

  .dia-apex .dia-eco2--v2 .dia-eco2__stage--bundle-pro .dia-eco2__art::before {
    background:
      radial-gradient(ellipse 52% 46% at 50% 52%, rgb(201 138 75 / 0.12), transparent 72%),
      radial-gradient(ellipse 66% 56% at 50% 52%, rgb(61 139 255 / 0.09), transparent 76%);
  }

  /* Light page: a soft local darkening directly behind each product (not a mask on it). */
  .dia-theme-light .dia-apex .dia-eco2--v2 .dia-eco2__art::before {
    background:
      radial-gradient(ellipse 50% 46% at 50% 54%, rgb(7 20 28 / 0.55), rgb(7 20 28 / 0.25) 55%, transparent 100%),
      var(--dia-eco2-pool);
  }

  /* ---------- Compact bridge (replaces the large closing statement) ---------- */
  .dia-apex .dia-eco2--v2 .dia-eco2__close { margin-block-start: var(--space-7); padding-block: var(--space-6) var(--space-3); }

  .dia-apex .dia-eco2__bridge2 {
    position: relative;
    max-inline-size: 46rem;
    margin: 0;
    padding-block-start: var(--space-5);
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--dia-text);
    text-wrap: balance;
  }

  .dia-apex .dia-eco2__bridge2::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 2.5rem;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--dia-bronze), transparent);
  }

  .dia-apex .dia-eco2__bridge2-sub {
    max-inline-size: 42rem;
    margin: var(--space-3) 0 0;
    font-size: var(--dia-fs-body-lg);
    line-height: 1.55;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* Keep the map's own spacing tighter before the bridge. */
  @media (min-width: 1024px) { .dia-apex .dia-eco2--v2 .dia-eco2__map { margin-block-start: var(--space-8); } }

  /* ---------- Breathing room under the products (WordPress visual tuning) ----------
     The three products shrink by 10 % (same factor, so their relative scale and column centring are kept) and the freed
     height is added UNDER them (padding + the contact shadow rises with the object), so the art zone — and therefore the
     horizon line and every section height — does not move, while the glow/shadow clears the divider. */
  .dia-apex .dia-eco2 {
    --dia-eco2-k: 0.9;
    --dia-eco2-lift: calc(var(--dia-eco2-art-h) * 0.1);
  }
  .dia-apex .dia-eco2__art { padding-block-end: calc(var(--space-4) + var(--dia-eco2-lift)); }
  .dia-apex .dia-eco2--v2 .dia-eco2__art::after { inset-block-end: calc(var(--dia-eco2-lift) - 10px); }
  .dia-apex .dia-eco2--v2 .dia-eco2__img {
    inline-size: calc(var(--dia-eco2-w) * var(--dia-eco2-k));
    max-block-size: calc(var(--dia-eco2-art-h) - var(--space-4) - var(--dia-eco2-lift));
  }
  @media (max-width: 767px) {
    .dia-apex .dia-eco2 { --dia-eco2-lift: 24px; }
    .dia-apex .dia-eco2--v2 .dia-eco2__img { max-block-size: 270px; }
  }
}