/* CANONICAL — promoted from section-07-v3-1.css (Global Polish V2); previous canonical archived in src/archive/section-07-v1.0-canonical/ */
/*
 * DIA CAPITAL — Section 07 · Configuración flexible — VISUAL V3.1 (parallel TEST; V3 + a Dark-only tonal block at the end of this file).
 * Does not replace section-07.css (approved) or section-07-v2.css.
 *
 * Requires the base system (main.css). Fills the dia.sections layer; scoped under .dia-apex.
 * Page theme (true Light adaptation): the same geometry works in both themes; only the
 * --cfg-* tokens change. No raster images, no product artwork.
 *
 * Desktop ≥ 1280: left = eyebrow, H2, vertical selector (01 / 02 / 03), the active description;
 * right = ONE Matrix ecosystem whose footprint never changes between states. State is carried
 * by the section's data-state (set by section-07-v2.js):
 *   base      0 active connections · nodes neutral · core quiet · orbit off
 *   selectiva 3 active connections · 3 nodes active · core moderate · orbit off
 *   ampliada  6 active connections · 6 nodes active · core strongest · orbit on
 * Depth: central glow → core slab/hexes → radial field → node slabs + shadows (rear nodes dimmer)
 * → outer orbit + ticks → faint floor ellipse. Everything is static; the only transition is a
 * 200 ms opacity / stroke change, removed under prefers-reduced-motion.
 */

@layer dia.sections {
  .dia-apex .dia-cfg3 {
    --cfg-bronze: #C98A4B;
    --cfg-blue: #5C9CF0;
    --cfg-line: #5E7A86;
    --cfg-line-faint: rgb(94 122 134 / 0.38);
    --cfg-top: #17313C;
    --cfg-slab: #0A1A23;
    --cfg-ink: #F2F4F3;

    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .dia-theme-light .dia-apex .dia-cfg3 {
    --cfg-bronze: #A8662A;
    --cfg-blue: #2F6FD0;
    --cfg-line: #7C8B93;
    --cfg-line-faint: rgb(124 139 147 / 0.5);
    --cfg-top: #FFFFFF;
    --cfg-slab: #CDD5DA;
  }

  /* Section-level atmosphere: calm, central behind the Matrix; far calmer than Section 06. */
  .dia-apex .dia-cfg3::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 26% 42% at 72% 52%, rgb(201 138 75 / 0.09), transparent 70%),
      radial-gradient(ellipse 34% 40% at 76% 58%, rgb(92 156 240 / 0.07), transparent 72%),
      radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgb(2 8 13 / 0.35) 100%);
  }

  .dia-theme-light .dia-apex .dia-cfg3::before {
    background:
      radial-gradient(ellipse 26% 42% at 72% 52%, rgb(168 102 42 / 0.07), transparent 70%),
      radial-gradient(ellipse 34% 40% at 76% 58%, rgb(47 111 208 / 0.06), transparent 72%);
  }

  .dia-apex .dia-cfg3__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "head   figure"
      "tabs   figure"
      "panels figure";
    column-gap: var(--dia-gutter);
    row-gap: var(--space-6);
    align-content: start;
    align-items: start;
  }

  .dia-apex .dia-cfg3__head { grid-area: head; align-self: end; }
  .dia-apex .dia-cfg3__tabs { grid-area: tabs; }
  .dia-apex .dia-cfg3__panels { grid-area: panels; align-self: start; min-block-size: 9.5rem; }
  .dia-apex .dia-cfg3__figure { grid-area: figure; }

  .dia-apex .dia-cfg3__eyebrow { color: var(--dia-accent-text-raised); margin: 0; }

  .dia-apex .dia-cfg3__title {
    margin: var(--space-3) 0 0;
    font-size: var(--dia-fs-h2);
    max-inline-size: 18ch;
    text-wrap: balance;
  }

  /* ---------- Selector: vertical, rules + Bronze marker (no tab boxes) ---------- */

  .dia-apex .dia-cfg3__tabs {
    display: grid;
    margin-block-start: var(--space-2);
  }

  .dia-apex .dia-cfg3__tab {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    inline-size: 100%;
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
    border: 0;
    border-block-start: 1px solid var(--dia-border);
    background: none;
    color: var(--dia-text-secondary);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .dia-apex .dia-cfg3__tab:last-child { border-block-end: 1px solid var(--dia-border); }

  .dia-apex .dia-cfg3__tab::before {
    content: "";
    position: absolute;
    inset-block: -1px;
    inset-inline-start: 0;
    inline-size: 2px;
    background: transparent;
  }

  .dia-apex .dia-cfg3__tab[aria-selected="true"]::before { background: var(--dia-bronze); }

  .dia-apex .dia-cfg3__tab-num {
    font-size: var(--dia-fs-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-cfg3__tab-name {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.9rem + 0.9vw, var(--dia-fs-h3));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .dia-apex .dia-cfg3__tab[aria-selected="true"] { color: var(--dia-text); }
  .dia-apex .dia-cfg3__tab[aria-selected="true"] .dia-cfg3__tab-num { color: var(--dia-accent-text-raised); }

  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-cfg3__tab:hover { color: var(--dia-text); } }

  .dia-apex .dia-cfg3__tab:focus-visible {
    outline: 2px solid var(--dia-focus);
    outline-offset: -2px;
  }

  /* ---------- Active description ---------- */

  .dia-apex .dia-cfg3__panel { padding-inline-start: var(--space-4); }
  .dia-apex .dia-cfg3__panel:focus-visible { outline: 2px solid var(--dia-focus); outline-offset: 4px; }

  .dia-apex .dia-cfg3__panel + .dia-cfg3__panel { margin-block-start: var(--space-6); }

  .dia-apex .dia-cfg3__panel-key {
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dia-accent-text-raised);
  }

  .dia-apex .dia-cfg3__panel-title {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--dia-fs-h3);
    font-weight: 600;
    line-height: 1.2;
    color: var(--dia-text);
  }

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

  /* With JS only the active description is visible (the tablist drives `hidden`). */

  /* ---------- Figure ---------- */

  .dia-apex .dia-cfg3__figure {
    justify-self: center;
    inline-size: min(100%, 46rem);
    margin: 0;
  }

  .dia-apex .dia-cfg3__svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }

  .dia-apex .dia-cfg3__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-3);
    font-size: var(--dia-fs-small);
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-cfg3__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .dia-apex .dia-cfg3__legend-item::before {
    content: "";
    flex: none;
    inline-size: 14px;
    block-size: 14px;
  }

  .dia-apex .dia-cfg3__legend-item--core::before {
    border: 1.5px solid var(--cfg-bronze);
    border-radius: 50%;
    background: radial-gradient(circle, var(--cfg-bronze) 0 2px, transparent 2.5px);
  }

  .dia-apex .dia-cfg3__legend-item--node::before {
    background: var(--cfg-line);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    opacity: 0.8;
  }

  .dia-apex .dia-cfg3__legend-item--link::before {
    inline-size: 20px;
    block-size: 2px;
    background: linear-gradient(90deg, var(--cfg-bronze), var(--cfg-blue));
  }

  /* ---------- Layered 3D system ---------- */

  .dia-apex .dia-cfg3__stage {
    --cfg-nodeW: 22%;
    --cfg-coreW: 50%;

    position: relative;
    inline-size: 100%;
    aspect-ratio: 1000 / 760;
    isolation: isolate;
  }

  /* Orbit field: transparent plate, soft edges. Footprint fixed in every state. */
  .dia-apex .dia-cfg3__orbit {
    position: absolute;
    inset-inline-start: 1%;
    inline-size: 98%;
    inset-block-start: calc((392 - 0.522 * 653) / 760 * 100%);
    z-index: 0;
    opacity: var(--cfg-orbit, 0.38);
    mix-blend-mode: screen;
    transition: opacity 200ms ease;
    -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 52%, #000 40%, transparent 92%);
    mask-image: radial-gradient(ellipse 50% 52% at 50% 52%, #000 40%, transparent 92%);
  }

  .dia-apex .dia-cfg3__orbit img,
  .dia-apex .dia-cfg3__core img,
  .dia-apex .dia-cfg3__node img { display: block; inline-size: 100%; block-size: auto; }

  /* The supplied PNGs carry a faint rectangular alpha halo: soften it with a radial mask. */
  .dia-apex .dia-cfg3__node img {
    -webkit-mask-image: radial-gradient(ellipse 37% 36% at 50% 51%, #000 78%, transparent 100%);
    mask-image: radial-gradient(ellipse 37% 36% at 50% 51%, #000 78%, transparent 100%);
  }

  .dia-apex .dia-cfg3__core img {
    -webkit-mask-image: radial-gradient(ellipse 46% 38% at 50% 51%, #000 78%, transparent 100%);
    mask-image: radial-gradient(ellipse 46% 38% at 50% 51%, #000 78%, transparent 100%);
  }

  .dia-apex .dia-cfg3__routes {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 4;
    overflow: visible;
    pointer-events: none;
  }

  .dia-apex .dia-cfg3__routes--m { display: none; }

  .dia-apex .dia-cfg3__track {
    fill: none;
    stroke: var(--cfg-line-faint);
    stroke-width: 1.5;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .dia-apex .dia-cfg3__link { opacity: 0; transition: opacity 200ms ease; }

  .dia-apex .dia-cfg3__link path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cfg-bronze) 70%, transparent));
  }

  .dia-apex .dia-cfg3__link circle { fill: #9CC2FF; filter: drop-shadow(0 0 6px var(--cfg-blue)); }

  /* Six instances of the same node asset: position only, depth by a few % of scale. */
  .dia-apex .dia-cfg3__nodes { position: absolute; inset: 0; z-index: 2; }

  .dia-apex .dia-cfg3__node {
    position: absolute;
    inset-inline-start: var(--xd);
    inset-block-start: var(--yd);
    inline-size: var(--cfg-nodeW);
    translate: -50% -52%;
    filter: brightness(0.62) saturate(0.7);
    transition: filter 200ms ease;
  }

  .dia-apex .dia-cfg3__node--rear { scale: 0.94; }
  .dia-apex .dia-cfg3__node--front { scale: 1.04; z-index: 1; }

  /* Local floor glow under each node (state-driven). */
  .dia-apex .dia-cfg3__node::after {
    content: "";
    position: absolute;
    inset-inline: 14%;
    inset-block-end: 12%;
    block-size: 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--cfg-bronze) 70%, transparent), transparent 70%);
    opacity: 0;
    z-index: -1;
    transition: opacity 200ms ease;
  }

  .dia-apex .dia-cfg3__core {
    position: absolute;
    z-index: 3;
    inset-inline-start: calc(50% - var(--cfg-coreW) / 2);
    inline-size: var(--cfg-coreW);
    inset-block-start: calc((392 - 0.5 * 500) / 760 * 100% + 1%);
    filter: brightness(0.7) saturate(0.8);
    transition: filter 200ms ease;
  }

  /* ---------- Atmosphere behind the visual: CSS only, locally darkened in Light mode ---------- */

  .dia-apex .dia-cfg3__stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14% -12%;
    pointer-events: none;
    background:
      radial-gradient(ellipse 42% 46% at 50% 54%, rgb(201 138 75 / 0.12), transparent 70%),
      radial-gradient(ellipse 52% 44% at 50% 62%, rgb(92 156 240 / 0.10), transparent 72%);
  }

  .dia-theme-light .dia-apex .dia-cfg3__stage::before {
    background:
      radial-gradient(ellipse 48% 50% at 50% 54%, rgb(8 22 30 / 0.92), rgb(8 22 30 / 0.78) 48%, transparent 74%),
      radial-gradient(ellipse 40% 36% at 50% 54%, rgb(201 138 75 / 0.18), transparent 70%);
  }

  /* Inside the locally darkened field the technical colours are the Dark ones. */
  .dia-theme-light .dia-apex .dia-cfg3__stage {
    --cfg-bronze: #D9964F;
    --cfg-blue: #5C9CF0;
    --cfg-line-faint: rgb(140 165 175 / 0.55);
  }

  /* ---------- State: BASE (default) ---------- */

  .dia-apex .dia-cfg3[data-state="base"] { --cfg-orbit: 0.34; }

  /* ---------- State: SELECTIVA ---------- */

  .dia-apex .dia-cfg3[data-state="selectiva"] { --cfg-orbit: 0.42; }
  .dia-apex .dia-cfg3[data-state="selectiva"] .dia-cfg3__core { filter: brightness(0.9) saturate(1); }
  .dia-apex .dia-cfg3[data-state="selectiva"] .dia-cfg3__link--s { opacity: 1; }
  .dia-apex .dia-cfg3[data-state="selectiva"] .dia-cfg3__node--s {
    filter: brightness(1.04) saturate(1.05) drop-shadow(0 0 10px color-mix(in srgb, var(--cfg-bronze) 55%, transparent));
  }
  .dia-apex .dia-cfg3[data-state="selectiva"] .dia-cfg3__node--s::after { opacity: 0.8; }
  .dia-apex .dia-cfg3[data-state="selectiva"] .dia-cfg3__node:not(.dia-cfg3__node--s) { filter: brightness(0.55) saturate(0.6); }

  /* ---------- State: AMPLIADA (also the no-JS state) ---------- */

  .dia-apex .dia-cfg3[data-state="ampliada"] { --cfg-orbit: 0.52; }
  .dia-apex .dia-cfg3[data-state="ampliada"] .dia-cfg3__core {
    filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 14px color-mix(in srgb, var(--cfg-bronze) 45%, transparent));
  }
  .dia-apex .dia-cfg3[data-state="ampliada"] .dia-cfg3__link { opacity: 1; }
  .dia-apex .dia-cfg3[data-state="ampliada"] .dia-cfg3__node {
    filter: brightness(1.04) saturate(1.05) drop-shadow(0 0 10px color-mix(in srgb, var(--cfg-bronze) 55%, transparent));
  }
  .dia-apex .dia-cfg3[data-state="ampliada"] .dia-cfg3__node::after { opacity: 0.8; }

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

  /* ---------- Narrow tablet / mobile: stacked, selector horizontal ---------- */

  @media (max-width: 1023px) {
    .dia-apex .dia-cfg3__grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "head"
        "tabs"
        "figure"
        "panels";
      row-gap: var(--space-6);
    }

    .dia-apex .dia-cfg3__title { max-inline-size: 24ch; }

    .dia-apex .dia-cfg3__tabs {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-block-start: 0;
    }

    .dia-apex .dia-cfg3__tab {
      grid-template-columns: 1fr;
      row-gap: var(--space-1);
      border-block-start: 0;
      border-block-end: 1px solid var(--dia-border);
      padding: var(--space-3) var(--space-3);
    }

    .dia-apex .dia-cfg3__tab:last-child { border-block-end: 1px solid var(--dia-border); }

    .dia-apex .dia-cfg3__tab::before {
      inset-block: auto -1px;
      inset-inline: 0;
      inline-size: auto;
      block-size: 2px;
    }

    .dia-apex .dia-cfg3__tab-name { font-size: var(--dia-fs-h4); }

    .dia-apex .dia-cfg3__panel { padding-inline-start: 0; }
  }

  /* ---------- Mobile: compact 3-option selector, square-ish visual ---------- */

  @media (max-width: 767px) {
    .dia-apex .dia-cfg3__grid { row-gap: var(--space-5); }

    .dia-apex .dia-cfg3__tab { padding: var(--space-2) var(--space-2); }
    .dia-apex .dia-cfg3__tab-name { font-size: var(--dia-fs-body); letter-spacing: 0.02em; }

    .dia-apex .dia-cfg3__figure { inline-size: min(100%, 26rem); }

    .dia-apex .dia-cfg3__stage { aspect-ratio: 1000 / 880; --cfg-nodeW: 29%; --cfg-coreW: 58%; }
    .dia-apex .dia-cfg3__routes--d { display: none; }
    .dia-apex .dia-cfg3__routes--m { display: block; }
    .dia-apex .dia-cfg3__node { inset-inline-start: var(--xm); inset-block-start: var(--ym); }
    .dia-apex .dia-cfg3__orbit { inset-inline-start: -4%; inline-size: 108%; inset-block-start: calc((440 - 0.522 * 720) / 880 * 100%); }
    .dia-apex .dia-cfg3__core { inset-block-start: calc((440 - 0.5 * 580) / 880 * 100% + 1%); }

    .dia-apex .dia-cfg3__legend { gap: var(--space-1) var(--space-4); font-size: 0.8125rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dia-apex .dia-cfg3 * { transition: none !important; }
  }
}

/* =====================================================================
 * V3.1 — DARK-ONLY tonal refinement (Light mode untouched)
 * V3 dark:  section background = --dia-surface (#10242E) + faint glows Bronze .09 / blue .07 at the
 *           section level and Bronze .12 / blue .10 behind the stage.
 * V3.1:     local deep petroleum field #091820 → #07141C (top → bottom) with a soft central lift,
 *           quieter glows: Bronze .06 / blue .035 (section) and Bronze .08 / blue .05 (stage).
 * Assets (core, nodes, orbit field) are not touched: no opacity, filter or geometry change.
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-cfg3 {
    background:
      radial-gradient(ellipse 46% 56% at 72% 54%, #0C1D27 0%, transparent 72%),
      linear-gradient(to bottom, #091820 0%, #08161E 55%, #07141C 100%);
  }

  .dia-theme-light .dia-apex .dia-cfg3 { background: var(--dia-surface); }

  .dia-apex .dia-cfg3::before {
    background:
      radial-gradient(ellipse 26% 42% at 72% 52%, rgb(201 138 75 / 0.06), transparent 70%),
      radial-gradient(ellipse 34% 40% at 76% 58%, rgb(92 156 240 / 0.035), transparent 72%),
      radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgb(2 8 13 / 0.45) 100%);
  }

  .dia-apex .dia-cfg3__stage::before {
    background:
      radial-gradient(ellipse 42% 46% at 50% 54%, rgb(201 138 75 / 0.08), transparent 70%),
      radial-gradient(ellipse 52% 44% at 50% 62%, rgb(92 156 240 / 0.05), transparent 72%);
  }
}