/*
 * DIA CAPITAL — Section 10B · Antes de comprar — FINAL (frozen for this phase). V3 + V3.1 + V3.2 blocks at the end.
 * Previous: src/archive/section-10b-v1.0/section-10b.css (original); section-10b-v2 / v3 / v3-1.css (tests).
 * Requires main.css. dia.sections layer; scoped under .dia-apex. PAGE THEME (native Light). Static; no motion.
 * Head → one console of four steps (number, icon, title, text) → two complementary blocks → referral note bar.
 * ≥ 1100: 4 steps in a row · 700–1099: 2 × 2 · < 700: compact vertical sequence.
 */
@layer dia.sections {
  .dia-apex .dia-rdy3 {
    --rdy-bronze: #B6783C;
    --rdy-blue: #3D8BFF;
    --rdy-edge: color-mix(in srgb, var(--dia-text) 14%, transparent);
    --rdy-sep: color-mix(in srgb, var(--dia-text) 16%, transparent);
    --rdy-icon: 5.25rem;
    --rdy-panel: linear-gradient(180deg, color-mix(in srgb, var(--dia-text) 5%, var(--dia-bg)), var(--dia-bg));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--dia-text);
  }

  .dia-theme-light .dia-apex .dia-rdy3 {
    --rdy-bronze: #A8662A;
    --rdy-blue: #2F6FD0;
    --rdy-edge: color-mix(in srgb, var(--dia-text) 13%, transparent);
    --rdy-panel: linear-gradient(180deg, #FFFFFF, #F6F7F7);
  }

  .dia-apex .dia-rdy3::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 36% at 50% 30%, rgb(61 139 255 / 0.07), transparent 72%),
      radial-gradient(ellipse 45% 28% at 12% 0%, rgb(201 138 75 / 0.07), transparent 70%),
      radial-gradient(ellipse 40% 26% at 88% 100%, rgb(61 139 255 / 0.05), transparent 70%);
  }

  .dia-theme-light .dia-apex .dia-rdy3::before {
    background:
      radial-gradient(ellipse 60% 36% at 50% 30%, rgb(47 111 208 / 0.04), transparent 72%),
      radial-gradient(ellipse 45% 28% at 12% 0%, rgb(168 102 42 / 0.05), transparent 70%);
  }

  /* ---------- Head ---------- */
  .dia-apex .dia-rdy3__head { max-inline-size: 48rem; }
  .dia-apex .dia-rdy3__eyebrow { margin: 0; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-rdy3__title { margin-block-start: var(--space-4); }
  .dia-apex .dia-rdy3__intro {
    max-inline-size: 42rem;
    margin: var(--space-4) 0 0;
    font-size: var(--dia-fs-body-lg);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* ---------- Steps console ---------- */
  .dia-apex .dia-rdy3__console {
    position: relative;
    margin-block-start: var(--space-8);
    border: 1px solid var(--rdy-edge);
    border-radius: var(--radius-lg);
    background: var(--rdy-panel);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 60px -44px rgb(0 0 0 / 0.75);
    overflow: hidden;
  }

  .dia-theme-light .dia-apex .dia-rdy3__console { box-shadow: inset 0 1px 0 #fff, 0 26px 50px -38px rgb(12 28 36 / 0.35); }

  .dia-apex .dia-rdy3__rule {
    position: absolute;
    inset: 0 0 auto 0;
    block-size: 2px;
    background: linear-gradient(90deg, var(--rdy-bronze) 0, var(--rdy-bronze) 18%, var(--rdy-blue) 100%);
    opacity: 0.9;
  }

  .dia-apex .dia-rdy3__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dia-apex .dia-rdy3__step {
    position: relative;
    display: grid;
    align-content: start;
    row-gap: var(--space-5);
    padding: var(--space-7) var(--space-5) var(--space-6);
  }

  .dia-apex .dia-rdy3__step + .dia-rdy3__step::before {
    content: "";
    position: absolute;
    inset-block: var(--space-5);
    inset-inline-start: 0;
    inline-size: 1px;
    background: linear-gradient(to bottom, transparent, var(--rdy-sep) 18%, var(--rdy-sep) 82%, transparent);
  }

  .dia-apex .dia-rdy3__portal { display: block; inline-size: var(--rdy-icon); block-size: var(--rdy-icon); }
  .dia-apex .dia-rdy3__icon { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
  .dia-apex .dia-rdy3__glyph { filter: drop-shadow(0 0 3px rgb(201 138 75 / 0.55)); }
  .dia-theme-light .dia-apex .dia-rdy3__icon { filter: drop-shadow(0 12px 14px rgb(12 28 36 / 0.26)); }

  .dia-apex .dia-rdy3__num {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--dia-fs-h3);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--dia-accent-text-raised);
  }

  .dia-apex .dia-rdy3__step-title {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: var(--dia-fs-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--dia-text);
  }

  .dia-apex .dia-rdy3__step-text {
    margin: var(--space-2) 0 0;
    font-size: var(--dia-fs-small);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* ---------- Complementary blocks ---------- */
  .dia-apex .dia-rdy3__blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-6);
  }

  .dia-apex .dia-rdy3__block {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--rdy-edge);
    border-radius: var(--radius-lg);
    background: var(--rdy-panel);
  }

  .dia-apex .dia-rdy3__block--reco { border-color: color-mix(in srgb, var(--rdy-bronze) 38%, var(--rdy-edge)); }
  .dia-apex .dia-rdy3__block--reco::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    block-size: 2px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--rdy-bronze), transparent 80%);
  }

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

  .dia-apex .dia-rdy3__block-title {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--dia-fs-h4);
    font-weight: 600;
    line-height: 1.25;
  }

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

  .dia-apex .dia-rdy3__chips,
  .dia-apex .dia-rdy3__checks { margin: var(--space-5) 0 0; padding: 0; list-style: none; }

  .dia-apex .dia-rdy3__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .dia-apex .dia-rdy3__chip {
    padding: var(--space-1) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--rdy-blue) 38%, transparent);
    border-radius: 999px;
    font-size: var(--dia-fs-small);
    color: var(--dia-text);
  }

  .dia-apex .dia-rdy3__checks { display: grid; gap: var(--space-3); }

  .dia-apex .dia-rdy3__check {
    position: relative;
    padding-inline-start: 1.75rem;
    font-size: var(--dia-fs-small);
    line-height: 1.5;
    color: var(--dia-text);
  }

  /* State geometry (no green tick): a Bronze ring with a blue core. */
  .dia-apex .dia-rdy3__check::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.3em;
    inline-size: 12px;
    block-size: 12px;
    border: 2px solid var(--rdy-bronze);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--dia-bg);
    background: var(--rdy-blue);
  }

  .dia-apex .dia-rdy3__cta { margin: var(--space-5) 0 0; }

  .dia-apex .dia-rdy3__cta-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 48px;
    padding-inline: var(--space-6);
    border: 1px solid var(--rdy-bronze);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rdy-bronze) 30%, transparent), color-mix(in srgb, var(--rdy-bronze) 14%, transparent));
    font-weight: 600;
    color: var(--dia-text);
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-rdy3__cta-link:hover { background: color-mix(in srgb, var(--rdy-bronze) 34%, transparent); } }
  .dia-apex .dia-rdy3__cta-link:focus-visible { outline: 2px solid var(--dia-focus); outline-offset: 2px; }
  .dia-apex .dia-rdy3__ext { color: var(--dia-text-secondary); }

  .dia-apex .dia-rdy3__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---------- Referral note bar ---------- */
  .dia-apex .dia-rdy3__note {
    margin: var(--space-5) 0 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--rdy-edge);
    border-inline-start: 2px solid var(--rdy-blue);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--dia-text) 3%, transparent);
    font-size: var(--dia-fs-small);
    line-height: 1.55;
    color: var(--dia-text-secondary);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1099px) {
    .dia-apex .dia-rdy3__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dia-apex .dia-rdy3__step:nth-child(odd)::before { content: none; }
    .dia-apex .dia-rdy3__step:nth-child(3)::after,
    .dia-apex .dia-rdy3__step:nth-child(4)::after {
      content: "";
      position: absolute;
      inset: 0 var(--space-5) auto;
      block-size: 1px;
      background: var(--rdy-sep);
    }
    .dia-apex .dia-rdy3__step:nth-child(2)::before { content: ""; }
  }

  @media (max-width: 899px) {
    .dia-apex .dia-rdy3__blocks { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 699px) {
    .dia-apex .dia-rdy3 { --rdy-icon: 4.25rem; }
    .dia-apex .dia-rdy3__steps { grid-template-columns: minmax(0, 1fr); }

    .dia-apex .dia-rdy3__step {
      grid-template-columns: var(--rdy-icon) minmax(0, 1fr);
      column-gap: var(--space-5);
      padding: var(--space-5);
    }

    .dia-apex .dia-rdy3__step::after { content: none !important; }
    .dia-apex .dia-rdy3__step + .dia-rdy3__step::before {
      content: "";
      inset-block: 0 auto;
      inset-inline: var(--space-5);
      inline-size: auto;
      block-size: 1px;
      background: var(--rdy-sep);
    }
    .dia-apex .dia-rdy3__step-title { margin-block-start: var(--space-2); }
  }

  @media (max-width: 479px) {
    .dia-apex .dia-rdy3 { --rdy-icon: 3.75rem; }
    .dia-apex .dia-rdy3__console { margin-block-start: var(--space-6); }
    .dia-apex .dia-rdy3__step { column-gap: var(--space-4); padding: var(--space-4); }
    .dia-apex .dia-rdy3__step + .dia-rdy3__step::before { inset-inline: var(--space-4); }
    .dia-apex .dia-rdy3__block { padding: var(--space-5); }
    .dia-apex .dia-rdy3__cta-link { inline-size: 100%; justify-content: center; }
    .dia-apex .dia-rdy3__intro { font-size: var(--dia-fs-body); }
  }
}

/* =====================================================================
 * V3.1 — two-column header, supplied PNG icons, video guide card + modal, quiet note
 * ===================================================================== */
@layer dia.sections {
  /* Supplied PNG icons (transparent WebP derivatives): ~7 % artwork padding, drawn at 106 % like Section 10A. */
  .dia-apex .dia-rdy3__portal { position: relative; }
  .dia-apex .dia-rdy3__portal .dia-rdy3__icon {
    position: absolute;
    inset: -3%;
    inline-size: 106%;
    block-size: 106%;
    max-inline-size: none;
    object-fit: contain;
    filter: none;
  }
  .dia-theme-light .dia-apex .dia-rdy3__portal .dia-rdy3__icon { filter: drop-shadow(0 12px 14px rgb(12 28 36 / 0.22)); }

  .dia-apex .dia-rdy3__head--split { max-inline-size: none; }

  @media (min-width: 960px) {
    .dia-apex .dia-rdy3__head--split {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      column-gap: var(--space-8);
      align-items: end;
    }
  }

  .dia-apex .dia-rdy3__head-side .dia-rdy3__intro { margin: var(--space-5) 0 0; max-inline-size: 32rem; font-size: var(--dia-fs-body); }
  @media (min-width: 960px) { .dia-apex .dia-rdy3__head-side .dia-rdy3__intro { margin-block-start: 0; } }

  /* Video guide module */
  .dia-apex .dia-rdy3__video {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    max-inline-size: 32rem;
    min-block-size: 4rem;
    margin-block-start: var(--space-5);
    padding: var(--space-1) var(--space-5) var(--space-1) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(var(--rdy-vid-bg), var(--rdy-vid-bg)) padding-box,
      linear-gradient(100deg, var(--rdy-bronze), color-mix(in srgb, var(--rdy-blue) 80%, transparent)) border-box;
    color: var(--dia-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .dia-apex .dia-rdy3 { --rdy-vid-bg: color-mix(in srgb, #0B1B24 88%, transparent); }
  .dia-theme-light .dia-apex .dia-rdy3 { --rdy-vid-bg: color-mix(in srgb, #FFFFFF 92%, transparent); }

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

  .dia-apex .dia-rdy3__video-icon { position: relative; flex: none; inline-size: 3rem; block-size: 3rem; }
  .dia-apex .dia-rdy3__video-img { position: absolute; inset: -4%; inline-size: 108%; block-size: 108%; max-inline-size: none; object-fit: contain; }
  .dia-theme-light .dia-apex .dia-rdy3__video-img { filter: drop-shadow(0 8px 10px rgb(12 28 36 / 0.22)); }

  .dia-apex .dia-rdy3__video-copy { display: grid; gap: 0; min-inline-size: 0; flex: 1; }
  .dia-apex .dia-rdy3__video-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-rdy3__video-title { font-family: var(--font-display); font-weight: 600; font-size: var(--dia-fs-body); line-height: 1.2; }
  .dia-apex .dia-rdy3__video-text { font-size: var(--dia-fs-small); line-height: 1.35; color: var(--dia-text-secondary); }
  .dia-apex .dia-rdy3__video-cue { flex: none; font-size: 0.75rem; color: var(--rdy-bronze); }

  @media (prefers-reduced-motion: no-preference) {
    .dia-apex .dia-rdy3__video { transition: box-shadow 180ms ease, transform 180ms ease; }
    .dia-apex .dia-rdy3__video-cue { transition: transform 180ms ease; }
    @media (hover: hover) and (pointer: fine) { .dia-apex .dia-rdy3__video:hover .dia-rdy3__video-cue { transform: translateX(3px); } }
  }
  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-rdy3__video:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rdy-bronze) 40%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--rdy-blue) 55%, transparent); } }

  @media (max-width: 479px) {
    .dia-apex .dia-rdy3__video { max-inline-size: none; }
  }

  /* Video dialog: always a dark media environment (both themes) */
  .dia-apex .dia-rdy3__dialog {
    inline-size: min(1100px, 90vw);
    max-inline-size: none;
    max-block-size: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--radius-lg);
    background: #07141C;
    color: #F2F5F6;
    overflow: hidden;
  }

  .dia-apex .dia-rdy3__dialog::backdrop { background: rgb(3 9 13 / 0.78); backdrop-filter: blur(6px); }

  @media (max-width: 599px) { .dia-apex .dia-rdy3__dialog { inline-size: 94vw; } }

  @media (prefers-reduced-motion: no-preference) {
    .dia-apex .dia-rdy3__dialog[open] { animation: dia-rdy3-in 180ms ease-out; }
    @keyframes dia-rdy3-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
  }

  .dia-apex .dia-rdy3__dialog-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); border-block-end: 1px solid rgb(255 255 255 / 0.1); }
  .dia-apex .dia-rdy3__dialog-title { margin: 0; font-family: var(--font-display); font-size: var(--dia-fs-body); font-weight: 600; }

  .dia-apex .dia-rdy3__dialog-close {
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-rdy3__dialog-close:hover { background: rgb(255 255 255 / 0.1); } }
  .dia-apex .dia-rdy3__dialog-close:focus-visible { outline: 2px solid #7DB1FF; outline-offset: 2px; }

  .dia-apex .dia-rdy3__dialog-stage { position: relative; aspect-ratio: 16 / 9; background: #050E13; }
  .dia-apex .dia-rdy3__dialog-stage iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

  /* Note: quiet rule + small text. */
  .dia-apex .dia-rdy3__note {
    margin-block-start: var(--space-6);
    padding: var(--space-3) 0 0;
    border: 0;
    border-block-start: 1px solid var(--rdy-edge);
    border-radius: 0;
    background: none;
    font-size: var(--dia-fs-small);
  }
}

/* =====================================================================
 * FINAL (V3.2) — empty-URL video CTA is not displayed; tablet / mobile vertical rhythm
 * ===================================================================== */
@layer dia.sections {
  /* data-video-url="" (or absent) → no CTA. Setting the attribute reveals it, no code change. */
  .dia-apex .dia-rdy3__video[data-video-url=""],
  .dia-apex .dia-rdy3__video:not([data-video-url]) { display: none; }

  @media (max-width: 1099px) {
    .dia-apex .dia-rdy3__console { margin-block-start: var(--space-7); }
    .dia-apex .dia-rdy3__step { row-gap: var(--space-4); padding-block: var(--space-5) var(--space-4); }
    .dia-apex .dia-rdy3__blocks { margin-block-start: var(--space-5); gap: var(--space-4); }
    .dia-apex .dia-rdy3__block { padding: var(--space-5); }
    .dia-apex .dia-rdy3__chips, .dia-apex .dia-rdy3__checks { margin-block-start: var(--space-4); }
    .dia-apex .dia-rdy3__cta { margin-block-start: var(--space-4); }
    .dia-apex .dia-rdy3__note { margin-block-start: var(--space-5); }
  }

  @media (max-width: 699px) {
    .dia-apex .dia-rdy3__console { margin-block-start: var(--space-6); }
    .dia-apex .dia-rdy3__step { padding: var(--space-4); row-gap: var(--space-2); }
    .dia-apex .dia-rdy3__step-title { margin-block-start: var(--space-1); }
    .dia-apex .dia-rdy3__step-text { margin-block-start: var(--space-1); }
    .dia-apex .dia-rdy3__num { font-size: var(--dia-fs-h4); }
    .dia-apex .dia-rdy3__blocks { margin-block-start: var(--space-4); gap: var(--space-3); }
    .dia-apex .dia-rdy3__block { padding: var(--space-4); }
    .dia-apex .dia-rdy3__checks { gap: var(--space-2); }
    .dia-apex .dia-rdy3__note { margin-block-start: var(--space-4); }
  }

  /* Compliance risk line: second note, quieter than the referral disclosure. */
  .dia-apex .dia-rdy3__note.dia-rdy3__note--risk {
    margin-block-start: var(--space-2);
    padding-block-start: 0;
    border-block-start: 0;
    border-inline-start-width: 0;
    font-size: var(--dia-fs-small);
  }

  /* Strifor block CTA row: tutorial = primary (hidden while its URL is empty); affiliate link = quiet underlined text link. */
  .dia-apex .dia-rdy3__cta--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
  .dia-apex .dia-rdy3__guide { font: inherit; font-weight: 600; cursor: pointer; }
  .dia-apex .dia-rdy3__guide[data-video-url=""],
  .dia-apex .dia-rdy3__guide:not([data-video-url]) { display: none; }
  .dia-apex .dia-rdy3__aff {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--dia-fs-small);
    color: var(--dia-text-secondary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--dia-text) 40%, transparent);
    text-underline-offset: 4px;
  }
  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-rdy3__aff:hover { color: var(--dia-text); text-decoration-color: var(--rdy-bronze); } }
  .dia-apex .dia-rdy3__aff:focus-visible { outline: 2px solid var(--dia-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
  @media (max-width: 767px) { .dia-apex .dia-rdy3__cta--row { flex-direction: column; align-items: stretch; } .dia-apex .dia-rdy3__aff { justify-content: center; } }

  /* Large text scale only (em = the list's own font size): icon above text so step copy keeps a readable measure. */
  .dia-apex .dia-rdy3__steps { container-type: inline-size; }
  @container (max-width: 14em) {
    .dia-apex .dia-rdy3__step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  }
}