/*
 * DIA CAPITAL — Section 12 · CTA final — FINAL (frozen for this phase; promoted from Visual V3, layered scene).
 * Previous canonical: src/archive/section-12-v1.0/section-12-final-cta.css.
 * Requires main.css. dia.sections layer; scoped under .dia-apex. Dark cinematic island in both themes (.dia-island).
 * Centered copy, then a compact panoramic scene assembled from eleven transparent PNG-derived layers (stage 1800 × 550 units
 * = the composite reference cropped to y 170–720). The site background stays the section field; blend + masks dissolve it.
 */
@layer dia.sections {
  .dia-apex .dia-final3 {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    min-block-size: 0;
    background:
      radial-gradient(ellipse 60% 36% at 50% 82%, rgb(61 139 255 / 0.10) 0%, transparent 72%),
      radial-gradient(ellipse 36% 30% at 50% 76%, rgb(201 138 75 / 0.10) 0%, transparent 70%),
      var(--dia-island-bg);
    color: var(--dia-text);
  }

  /* Entry from the FAQ: short petroleum-tinted ramp (Dark: surface → island; Light: white → deep teal → island). */
  .dia-apex .dia-final3::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    block-size: 7rem;
    pointer-events: none;
    background: linear-gradient(to bottom, #10242E 0%, rgb(16 36 46 / 0.6) 40%, transparent 100%);
  }

  .dia-theme-light .dia-apex .dia-final3::before {
    background: linear-gradient(to bottom,
      #FFFFFF 0%, #E3EAEE 14%, #9DB2BD 34%, #4B6676 54%, rgb(27 52 65 / 0.8) 72%, rgb(7 20 28 / 0.35) 90%, transparent 100%);
  }

  /* ---------- Copy ---------- */
  .dia-apex .dia-final3__content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    padding-block: calc(var(--dia-section-y) + 0.5rem) 0;
    text-align: center;
  }

  .dia-apex .dia-final3 .dia-final__title { max-inline-size: 22ch; margin-block-start: var(--space-4); text-wrap: balance; }
  .dia-apex .dia-final3 .dia-final__body { max-inline-size: 38rem; margin-block-start: var(--space-5); color: var(--dia-text-secondary); }

  .dia-apex .dia-final3 .dia-final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-5) var(--space-6);
    margin-block-start: var(--space-6);
  }

  .dia-apex .dia-final3 .dia-final__actions .dia-btn { min-block-size: 52px; padding-inline: var(--space-7); }

  .dia-apex .dia-final3 .dia-final__secondary {
    display: grid;
    justify-items: start;
    row-gap: 2px;
    min-block-size: 44px;
    padding-inline-start: var(--space-6);
    border-inline-start: 1px solid color-mix(in srgb, var(--dia-text) 18%, transparent);
    text-align: start;
    font-size: var(--dia-fs-small);
    line-height: 1.45;
    color: var(--dia-text-secondary);
    text-decoration: none;
  }

  .dia-apex .dia-final3 .dia-final__secondary-line { display: block; }

  .dia-apex .dia-final3 .dia-final__secondary-act {
    display: block;
    font-size: var(--dia-fs-body);
    font-weight: 600;
    color: var(--dia-text);
    text-decoration: underline;
    text-decoration-color: var(--dia-bronze);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-final3 .dia-final__secondary:hover .dia-final__secondary-act { text-decoration-thickness: 2px; } }
  .dia-apex .dia-final3 .dia-final__secondary:focus-visible { outline: 2px solid var(--dia-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

  /* ---------- Layered scene ---------- */
  .dia-apex .dia-final3__scene {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 1500px);
    margin-inline: auto;
    margin-block-start: clamp(-0.5rem, 0vw, 0rem);
    pointer-events: none;
    /* Edges dissolve into the section field: sides, top and base. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }

  .dia-apex .dia-final3__stage {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 1800 / 550;
    overflow: hidden;
  }

  .dia-apex .dia-final3__l { position: absolute; display: block; max-inline-size: none; block-size: auto; }

  .dia-apex .dia-final3 .dia-final3__l--atmosphere-glow { left: -2.778%; top: -16.545%; inline-size: 104.278%; mix-blend-mode: screen; opacity: 0.95; }
  .dia-apex .dia-final3 .dia-final3__l--connection-lines { left: -0.778%; top: -7.091%; inline-size: 103.556%; mix-blend-mode: screen; opacity: 0.85; }
  .dia-apex .dia-final3 .dia-final3__l--tech-floor { left: 3.556%; top: 37.273%; inline-size: 95.222%; }
  .dia-apex .dia-final3 .dia-final3__l--sat-fractal { left: 24.1%; top: 7.236%; inline-size: 11.161%; }
  .dia-apex .dia-final3 .dia-final3__l--sat-nest { left: 59.433%; top: 10.6%; inline-size: 10.578%; }
  .dia-apex .dia-final3 .dia-final3__l--sat-gold { left: 8.267%; top: 37.345%; inline-size: 11.306%; }
  .dia-apex .dia-final3 .dia-final3__l--sat-fundamental { left: 31.5%; top: 42.6%; inline-size: 10.467%; }
  .dia-apex .dia-final3 .dia-final3__l--sat-fundamental-abierto { left: 60.494%; top: 43.455%; inline-size: 8.578%; }
  .dia-apex .dia-final3 .dia-final3__l--sat-volume { left: 74.883%; top: 41.345%; inline-size: 11.756%; }
  .dia-apex .dia-final3 .dia-final3__l--core { left: 40.056%; top: 22.727%; inline-size: 20.056%; }
  .dia-apex .dia-final3 .dia-final3__l--particles-overlay { left: 0.0%; top: -20.0%; inline-size: 100.0%; mix-blend-mode: screen; opacity: 0.55; }

  /* Soft contact shadow under the core, and a gentle deepening at the base before the footer. */
  .dia-apex .dia-final3__stage::after {
    content: "";
    position: absolute;
    inset-inline: 38%;
    inset-block-end: 10%;
    block-size: 8%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.5), transparent 72%);
  }

  .dia-apex .dia-final3::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0 0;
    block-size: 18%;
    pointer-events: none;
    background: linear-gradient(to top, var(--dia-island-bg) 0%, transparent 100%);
  }

  /* ---------- Narrow: the scene is cropped around the core so the modules stay legible ---------- */
  @media (max-width: 767px) {
    .dia-apex .dia-final3__content { padding-block-start: calc(var(--dia-section-y) + 0.25rem); }
    .dia-apex .dia-final3 .dia-final__title { max-inline-size: 12ch; }
    .dia-apex .dia-final3 .dia-final__body { margin-block-start: var(--space-4); }
    .dia-apex .dia-final3 .dia-final__actions { display: grid; justify-items: center; gap: var(--space-3); margin-block-start: var(--space-6); }
    .dia-apex .dia-final3 .dia-final__actions .dia-btn { inline-size: min(100%, 22rem); justify-content: center; }
    .dia-apex .dia-final3 .dia-final__secondary { justify-items: center; text-align: center; padding-inline-start: 0; border-inline-start: 0; }

    .dia-apex .dia-final3__scene { inline-size: 100%; margin-block-start: var(--space-4); overflow: hidden; }
    .dia-apex .dia-final3__stage { inline-size: 120%; margin-inline: -10%; }
  }
}