/*
 * DIA CAPITAL — Section 11 · Preguntas frecuentes — FINAL (frozen for this phase; promoted from Visual V2).
 * Previous canonical: src/archive/section-11-v1.0/section-11-faq.css.
 * Requires main.css. dia.sections layer; scoped under .dia-apex. PAGE THEME (native Light). Native <details>; no JS.
 * Editorial head, then one shared field with two independent accordion stacks separated by a central hairline.
 * < 900 px: a single column. Quiet by design: hairlines, a soft open-state lift, a Bronze marker.
 */
@layer dia.sections {
  .dia-apex .dia-faq2 {
    --faq-bronze: #B6783C;
    --faq-blue: #3D8BFF;
    --faq-line: color-mix(in srgb, var(--dia-text) 15%, transparent);
    --faq-lift: color-mix(in srgb, var(--dia-text) 4%, transparent);
    color: var(--dia-text);
  }

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

  /* ---------- Head ---------- */
  .dia-apex .dia-faq2__head { max-inline-size: 42rem; }
  .dia-apex .dia-faq2__eyebrow { margin: 0; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-faq2__title { margin-block-start: var(--space-4); }
  .dia-apex .dia-faq2__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;
  }

  /* ---------- Shared field: two independent stacks ---------- */
  .dia-apex .dia-faq2__field {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--space-8);
    margin-block-start: var(--space-8);
  }

  /* Central hairline: the two stacks read as one system. */
  .dia-apex .dia-faq2__field::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: linear-gradient(to bottom, var(--faq-line), var(--faq-line) 85%, transparent);
    transform: translateX(-0.5px);
  }

  .dia-apex .dia-faq2__col { border-block-start: 1px solid var(--faq-line); min-inline-size: 0; }

  /* ---------- Items ---------- */
  .dia-apex .dia-faq2__item {
    position: relative;
    border-block-end: 1px solid var(--faq-line);
    transition: background-color 180ms ease;
  }

  .dia-apex .dia-faq2__item::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 2px;
    background: var(--faq-bronze);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .dia-apex .dia-faq2__item[open] { background: var(--faq-lift); }
  .dia-apex .dia-faq2__item[open]::before { opacity: 1; }
  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-faq2__item:hover { background: var(--faq-lift); } }

  .dia-apex .dia-faq2__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: 3.5rem;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--dia-fs-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--dia-text);
  }

  /* Flex item: let the question shrink and wrap a long word instead of pushing the marker out at large text scales. */
  .dia-apex .dia-faq2__q-text { min-inline-size: 0; overflow-wrap: break-word; }
  .dia-apex .dia-faq2__a { overflow-wrap: break-word; }

  .dia-apex .dia-faq2__q::-webkit-details-marker { display: none; }
  .dia-apex .dia-faq2__q::marker { content: ""; }
  .dia-apex .dia-faq2__q:focus-visible { outline: 2px solid var(--dia-focus); outline-offset: -2px; border-radius: var(--radius-sm); }

  /* Thin plus → minus, inside a 28 px hit area; turns Bronze when open. */
  .dia-apex .dia-faq2__mark {
    position: relative;
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid var(--faq-line);
    border-radius: 50%;
  }

  .dia-apex .dia-faq2__mark::before,
  .dia-apex .dia-faq2__mark::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - 0.5px);
    inset-inline: 8px;
    block-size: 1px;
    background: var(--dia-text-secondary);
    transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
  }

  .dia-apex .dia-faq2__mark::after { transform: rotate(90deg); }
  @media (hover: hover) and (pointer: fine) { .dia-apex .dia-faq2__q:hover .dia-faq2__mark { border-color: color-mix(in srgb, var(--faq-bronze) 55%, var(--faq-line)); } }
  .dia-apex .dia-faq2__item[open] .dia-faq2__mark { border-color: color-mix(in srgb, var(--faq-bronze) 60%, transparent); }
  .dia-apex .dia-faq2__item[open] .dia-faq2__mark::before,
  .dia-apex .dia-faq2__item[open] .dia-faq2__mark::after { background: var(--faq-bronze); }
  .dia-apex .dia-faq2__item[open] .dia-faq2__mark::after { transform: rotate(90deg) scaleX(0); }

  .dia-apex .dia-faq2__a { padding: 0 calc(28px + var(--space-4) * 2) var(--space-4) var(--space-4); }

  .dia-apex .dia-faq2__a p {
    max-inline-size: 36rem;
    margin: 0;
    font-size: var(--dia-fs-small);
    line-height: 1.7;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  .dia-apex .dia-faq2__item[open] .dia-faq2__a { animation: dia-faq2-reveal 200ms var(--ease-out); }
  @keyframes dia-faq2-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

  /* ---------- < 900 px: one column ---------- */
  @media (max-width: 899px) {
    .dia-apex .dia-faq2__field { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-block-start: var(--space-6); }
    .dia-apex .dia-faq2__field::before { content: none; }
    .dia-apex .dia-faq2__col + .dia-faq2__col { border-block-start: 0; }
    .dia-apex .dia-faq2__a { padding-inline-end: var(--space-4); }
  }

  @media (max-width: 599px) {
    .dia-apex .dia-faq2__q { min-block-size: 3.5rem; padding-inline: var(--space-3); font-size: var(--dia-fs-body); }
    .dia-apex .dia-faq2__a { padding-inline: var(--space-3); }
  }

  @media (prefers-reduced-motion: reduce) {
    .dia-apex .dia-faq2__item,
    .dia-apex .dia-faq2__item::before,
    .dia-apex .dia-faq2__mark::before,
    .dia-apex .dia-faq2__mark::after { transition: none; }
    .dia-apex .dia-faq2__item[open] .dia-faq2__a { animation: none; }
  }
}