/* CANONICAL — promoted from section-03-v2-4.css (Global Polish V2); previous canonical archived in src/archive/section-03-v1.0-canonical/ */
/*
 * DIA CAPITAL — Section 03 · Qué es Apex — VISUAL V2.4 (final micro-refinement of V2.3 — block at the end; parallel TEST).
 * Requires main.css. dia.sections layer; scoped under .dia-apex. Page-theme section (native Light / Dark). Static.
 * Level 1: three transparent stage modules directly on a CSS ground (no cards) with a thin Blue → Bronze rail behind them.
 * Level 2: four small chain nodes (Apex warmer / larger) over a faint connector wave. Meaning stays in live text.
 */
@layer dia.sections {
  .dia-apex .dia-ops {
    --ops-blue: #3D8BFF;
    --ops-bronze: #B6783C;
    --ops-line: color-mix(in srgb, var(--dia-text) 16%, transparent);
    --ops-mod: min(100%, 15.5rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2rem, 3vw, 2.75rem);
    color: var(--dia-text);
  }

  .dia-theme-light .dia-apex .dia-ops { --ops-blue: #2F6FD0; --ops-bronze: #A8662A; --ops-line: color-mix(in srgb, var(--dia-text) 20%, transparent); }

  /* Local fields: blue behind Analiza, Bronze behind Ejecuta, blue / cyan behind Gestiona. */
  .dia-apex .dia-ops::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 26% 30% at 17% 52%, rgb(61 139 255 / 0.12), transparent 72%),
      radial-gradient(ellipse 26% 30% at 50% 52%, rgb(201 138 75 / 0.14), transparent 72%),
      radial-gradient(ellipse 26% 30% at 83% 52%, rgb(61 168 255 / 0.10), transparent 72%);
  }

  .dia-theme-light .dia-apex .dia-ops::before {
    background:
      radial-gradient(ellipse 26% 30% at 17% 52%, rgb(61 139 255 / 0.14), transparent 72%),
      radial-gradient(ellipse 26% 30% at 50% 52%, rgb(201 138 75 / 0.16), transparent 72%),
      radial-gradient(ellipse 26% 30% at 83% 52%, rgb(61 139 255 / 0.12), transparent 72%),
      linear-gradient(180deg, color-mix(in srgb, #4B6676 10%, transparent), color-mix(in srgb, #4B6676 4%, transparent));
  }

  /* ---------- Editorial block ---------- */
  .dia-apex .dia-ops__head { display: grid; justify-items: center; text-align: center; }
  .dia-apex .dia-ops__eyebrow { margin: 0; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-ops__title { margin-block-start: var(--space-3); max-inline-size: 22ch; text-wrap: balance; }
  .dia-apex .dia-ops__title > span { display: block; }
  .dia-apex .dia-ops__accent { font-style: normal; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-ops__intro { max-inline-size: 56rem; margin: var(--space-4) 0 0; color: var(--dia-text); opacity: 0.88; text-wrap: pretty; }

  /* ---------- Level 1 ---------- */
  .dia-apex .dia-ops__stages {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  /* The secondary rail: a thin Blue → Bronze → Blue hairline behind the modules (at their visual centre). */
  .dia-apex .dia-ops__stages::before {
    content: "";
    position: absolute;
    inset-inline: 4%;
    inset-block-start: 6rem;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ops-blue) 70%, transparent) 14%, color-mix(in srgb, var(--ops-bronze) 80%, transparent) 50%, color-mix(in srgb, var(--ops-blue) 70%, transparent) 86%, transparent);
    opacity: 0.55;
  }

  .dia-apex .dia-ops__stage { position: relative; display: grid; align-content: start; justify-items: start; padding-block: 0 var(--space-3); }
  .dia-apex .dia-ops__dot { display: none; }

  /* Module: crops the transparent padding of the square asset; the object itself is never cropped. */
  .dia-apex .dia-ops__vis { position: relative; inline-size: var(--ops-mod); aspect-ratio: 1 / 0.86; justify-self: center; overflow: visible; margin-inline-end: 0; }
  .dia-apex .dia-ops__mod { position: absolute; inset-inline: 0; inline-size: 100%; block-size: auto; max-inline-size: none; }
  .dia-apex .dia-ops__stage--analiza .dia-ops__mod { inset-block-start: -15.5%; }
  .dia-apex .dia-ops__stage--ejecuta .dia-ops__mod { inset-block-start: -11%; }
  .dia-apex .dia-ops__stage--gestiona .dia-ops__mod { inset-block-start: -9%; }
  /* The supplied PNGs carry a faint rectangular alpha halo: a soft radial mask dissolves it (object untouched). */
  .dia-apex .dia-ops__mod, .dia-apex .dia-ops__st-img {
    -webkit-mask-image: radial-gradient(ellipse 50% 48% at 50% 54%, #000 66%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 48% at 50% 54%, #000 66%, transparent 100%);
  }

  /* Ejecuta carries slightly more authority. */
  .dia-apex .dia-ops__stage--ejecuta .dia-ops__mod { inset-inline: -6%; inline-size: 112%; }
  .dia-apex .dia-ops__stage--ejecuta .dia-ops__mod { filter: drop-shadow(0 0 22px rgb(201 138 75 / 0.22)); }
  .dia-theme-light .dia-apex .dia-ops__mod { filter: drop-shadow(0 10px 14px rgb(12 28 36 / 0.22)); }

  .dia-apex .dia-ops__index { margin-block-start: var(--space-2); font-size: var(--dia-fs-label); font-weight: 700; letter-spacing: 0.16em; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-ops__verb { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: var(--dia-fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; }
  .dia-apex .dia-ops__desc { max-inline-size: 26rem; margin: var(--space-2) var(--space-5) 0 0; font-size: var(--dia-fs-body); line-height: 1.55; color: var(--dia-text-secondary); text-wrap: pretty; }
  .dia-apex .dia-ops__index, .dia-apex .dia-ops__verb { margin-inline-end: var(--space-5); }

  /* ---------- Level 2 ---------- */
  .dia-apex .dia-ops__where { margin-block-start: var(--space-4); padding-block-start: var(--space-3); display: grid; justify-items: center; border-block-start: 1px solid var(--ops-line); }
  .dia-apex .dia-ops__where-key { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dia-text-secondary); }

  .dia-apex .dia-ops__chainwrap { position: relative; inline-size: min(100%, 62rem); margin-block-start: var(--space-2); }

  /* Connector wave: low opacity, screen blend, edges masked; behind the nodes at their centre line. */
  .dia-apex .dia-ops__wave { position: absolute; z-index: 0; inset-inline: 3%; inset-block-start: -7.2rem; pointer-events: none; mix-blend-mode: screen; opacity: 0.38;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); }
  .dia-apex .dia-ops__wave-img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2172 / 724; object-fit: fill; max-inline-size: none; }
  .dia-theme-light .dia-apex .dia-ops__wave { mix-blend-mode: normal; opacity: 0.16; }

  .dia-apex .dia-ops__chain { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
  .dia-apex .dia-ops__st { display: grid; justify-items: center; text-align: center; row-gap: 2px; padding-inline: var(--space-3); }

  /* Nodes: ≈ 40 % of a main module (Apex ≈ 52 %, warmer). Square asset cropped to its visible body. */
  .dia-apex .dia-ops__st-node { position: relative; display: block; inline-size: 6.25rem; aspect-ratio: 1 / 0.82; overflow: visible; }
  .dia-apex .dia-ops__st-img { position: absolute; inset-inline: 0; inset-block-start: -13%; inline-size: 100%; block-size: auto; max-inline-size: none; }
  .dia-apex .dia-ops__st--apex .dia-ops__st-node { inline-size: 8.25rem; margin-block-end: 0.5rem; }
  .dia-apex .dia-ops__st--apex .dia-ops__st-img { inset-block-start: -8%; filter: drop-shadow(0 0 16px rgb(201 138 75 / 0.28)); }
  .dia-theme-light .dia-apex .dia-ops__st-img { filter: drop-shadow(0 6px 8px rgb(12 28 36 / 0.2)); }

  .dia-apex .dia-ops__st-name { font-size: var(--dia-fs-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .dia-apex .dia-ops__st--apex .dia-ops__st-name { color: var(--dia-accent-text-raised); }
  .dia-apex .dia-ops__st-sub { font-size: 0.8125rem; line-height: 1.4; color: var(--dia-text-secondary); }

  /* ---------- < 760 px: vertical sequence ---------- */
  @media (max-width: 759px) {
    .dia-apex .dia-ops__head { text-align: start; justify-items: start; }
    .dia-apex .dia-ops__title { max-inline-size: none; }

    .dia-apex .dia-ops__stages { grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-4); padding-inline-start: 2.25rem; }
    .dia-apex .dia-ops__stages::before { inset-block: 1rem 1rem; inset-inline: 7px auto; inline-size: 2px; block-size: auto; background: linear-gradient(to bottom, var(--ops-blue), var(--ops-bronze) 50%, var(--ops-blue)); opacity: 0.85; }

    .dia-apex .dia-ops__stage { grid-template-columns: 6rem minmax(0, 1fr); grid-template-areas: "vis index" "vis verb" "vis desc"; column-gap: var(--space-4); align-items: start; padding-block: var(--space-2) var(--space-3); }
    .dia-apex .dia-ops__dot { display: block; position: absolute; inset-inline-start: -2.25rem; inset-block-start: 1.9rem; inline-size: 16px; block-size: 16px; border: 2px solid var(--ops-blue); border-radius: 50%; background: var(--dia-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ops-blue) 14%, transparent); }
    .dia-apex .dia-ops__stage--ejecuta .dia-ops__dot, .dia-apex .dia-ops__stage--gestiona .dia-ops__dot { border-color: var(--ops-bronze); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ops-bronze) 16%, transparent); }
    .dia-apex .dia-ops__vis, .dia-apex .dia-ops__stage--ejecuta .dia-ops__vis { grid-area: vis; inline-size: 100%; margin: 0; }
    .dia-apex .dia-ops__index { grid-area: index; margin-block-start: var(--space-3); }
    .dia-apex .dia-ops__verb { grid-area: verb; font-size: var(--dia-fs-h4); }
    .dia-apex .dia-ops__desc { grid-area: desc; font-size: 0.8125rem; line-height: 1.45; margin-inline-end: 0; }
    .dia-apex .dia-ops__index, .dia-apex .dia-ops__verb { margin-inline-end: 0; }

    .dia-apex .dia-ops__where { justify-items: start; }
    .dia-apex .dia-ops__chainwrap { inline-size: 100%; }
    .dia-apex .dia-ops__wave { display: none; }
    .dia-apex .dia-ops__chain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2); }
    .dia-apex .dia-ops__st-node { inline-size: 4.25rem; }
    .dia-apex .dia-ops__st--apex .dia-ops__st-node { inline-size: 5rem; margin-block-end: 0.25rem; }
    .dia-apex .dia-ops__st-sub { font-size: 0.75rem; }
    .dia-apex .dia-ops__intro { font-size: var(--dia-fs-small); }
  }
}

/* =====================================================================
 * V2.4 — Analiza +8 %, tighter desktop rhythm, tablet glow spacing, compact 360 px
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-ops { padding-block: clamp(2rem, 2.9vw, 2.6rem); }
  .dia-apex .dia-ops__stages { margin-block-start: var(--space-2); }
  .dia-apex .dia-ops__stage { padding-block-end: var(--space-2); }

  /* Analiza reads as heavy as Gestiona: image drawn at 108 %, same box, same baseline. */
  .dia-apex .dia-ops__stage--analiza .dia-ops__mod { inset-inline: -2%; inline-size: 104%; inset-block-start: -16.5%; }

  .dia-apex .dia-ops__index { margin-block-start: var(--space-1); }
  .dia-apex .dia-ops__desc { margin-block-start: var(--space-1); }
  .dia-apex .dia-ops__where { margin-block-start: var(--space-3); padding-block-start: var(--space-2); }
  .dia-apex .dia-ops__chainwrap { margin-block-start: 0; }
  .dia-apex .dia-ops__wave { inset-block-start: -7.4rem; }
  .dia-apex .dia-ops__st-sub { line-height: 1.35; }

  /* Tablet: tighter masks and slightly narrower modules so neighbouring glows do not meet. */
  @media (min-width: 760px) and (max-width: 1023px) {
    .dia-apex .dia-ops { --ops-mod: min(100%, 13.5rem); }
    .dia-apex .dia-ops__mod, .dia-apex .dia-ops__st-img {
      -webkit-mask-image: radial-gradient(ellipse 45% 46% at 50% 54%, #000 62%, transparent 100%);
      mask-image: radial-gradient(ellipse 45% 46% at 50% 54%, #000 62%, transparent 100%);
    }
    .dia-apex .dia-ops__stage--ejecuta .dia-ops__mod { inset-inline: -4%; inline-size: 108%; }
    .dia-apex .dia-ops__stage--analiza .dia-ops__mod { inset-inline: -2%; inline-size: 104%; }
  }

  /* Mobile: same rhythm as V2.3 (390 stays ≈ 1040); Analiza at 104 % like desktop. */
  @media (max-width: 759px) {
    .dia-apex .dia-ops__stage--analiza .dia-ops__mod { inset-inline: -2%; inline-size: 104%; }
  }

  @media (max-width: 379px) {
    .dia-apex .dia-ops__title { font-size: 1.875rem; }
    .dia-apex .dia-ops__stage { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: var(--space-3); padding-block: var(--space-1) var(--space-2); }
    .dia-apex .dia-ops { padding-block: 1.75rem 1.5rem; }
    .dia-apex .dia-ops__chain { row-gap: var(--space-1); }
    .dia-apex .dia-ops__stages { padding-inline-start: 2rem; }
    .dia-apex .dia-ops__dot { inset-inline-start: -2rem; }
    .dia-apex .dia-ops__verb { font-size: 1.125rem; }
    .dia-apex .dia-ops__index { margin-block-start: var(--space-1); }
    .dia-apex .dia-ops__intro { line-height: 1.5; }
  }
}