/* Chapter 04 — Understanding / Center.
   Passage opens the way; this chapter resolves meaning around one calm center. */
.understanding-chapter {
  position:relative;
  min-height:1180px;
  overflow:clip;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 52%,rgba(214,226,255,.48) 0,rgba(230,238,255,.20) 28%,transparent 58%),
    radial-gradient(circle at 24% 58%,rgba(103,201,189,.075),transparent 24%),
    radial-gradient(circle at 78% 49%,rgba(49,91,255,.045),transparent 25%),
    linear-gradient(180deg,#f7f9fc 0%,#fbfcff 46%,#f3f7fd 100%);
  color:#0d1527;
}
.understanding-chapter::before {
  content:'';
  position:absolute;
  left:50%;
  top:-1px;
  width:min(86vw,1380px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(111,140,202,.18),transparent);
}
.understanding-field { position:absolute; inset:0; pointer-events:none; }
.understanding-field::before {
  content:'';
  position:absolute;
  left:50%; top:53%;
  width:min(76vw,1160px); height:min(76vw,1160px);
  transform:translate(-50%,-43%);
  border-radius:50%;
  border:1px solid rgba(49,91,255,.052);
  box-shadow:inset 0 0 150px rgba(49,91,255,.032),0 0 120px rgba(49,91,255,.025);
}
.understanding-field::after {
  content:'';
  position:absolute;
  left:50%; top:57%;
  width:min(56vw,860px); height:min(20vw,300px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.78),rgba(211,224,255,.14) 48%,transparent 73%);
  filter:blur(10px);
}
.understanding-halo { position:absolute; left:50%; top:56%; border-radius:50%; transform:translate(-50%,-50%); }
.understanding-halo-a { width:min(58vw,880px); height:min(58vw,880px); background:radial-gradient(circle,rgba(255,255,255,.88),rgba(218,229,255,.23) 42%,transparent 72%); }
.understanding-halo-b { width:min(36vw,550px); height:min(36vw,550px); border:1px solid rgba(49,91,255,.095); box-shadow:0 0 96px rgba(49,91,255,.055),inset 0 0 72px rgba(255,255,255,.35); }
.understanding-axis-v,.understanding-axis-h { position:absolute; left:50%; top:56%; }
.understanding-axis-v { width:1px; height:790px; transform:translate(-50%,-50%); background:linear-gradient(180deg,transparent,rgba(83,111,177,.16) 28%,rgba(83,111,177,.11) 72%,transparent); }
.understanding-axis-h { width:min(88vw,1400px); height:1px; transform:translate(-50%,-50%); background:linear-gradient(90deg,transparent,rgba(83,111,177,.16),transparent); }
.understanding-routes { position:absolute; left:50%; top:56%; width:min(94vw,1520px); height:800px; transform:translate(-50%,-50%); overflow:visible; }
.understanding-route { fill:none; stroke:url(#understandingLine); stroke-width:1.65; stroke-linecap:round; opacity:.78; filter:drop-shadow(0 0 5px rgba(49,91,255,.08)); }
.understanding-routes circle { fill:#fff; stroke:#789dff; stroke-width:1.8; filter:drop-shadow(0 0 7px rgba(49,91,255,.26)); }
.understanding-copy { position:relative; z-index:3; padding-top:118px; }
.understanding-meta { display:flex; gap:24px; margin:0 0 34px; color:#64779e; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.understanding-meta span { color:#315bff; }
.understanding-copy h2 { max-width:1000px; font-size:clamp(50px,5.2vw,82px); font-weight:560; line-height:.98; letter-spacing:-.061em; }
.understanding-copy h2 span { color:#315bff; }
.understanding-premise { max-width:600px; margin:34px 0 0 auto; color:#526685; font-size:clamp(17px,1.35vw,21px); line-height:1.62; }
.understanding-system { position:relative; z-index:3; min-height:660px; margin-top:20px; }
.understanding-center {
  position:absolute;
  left:50%; top:52%;
  display:grid;
  place-items:center;
  width:258px; height:258px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(49,91,255,.15);
  border-radius:50%;
  background:
    radial-gradient(circle at 44% 34%,rgba(255,255,255,.98),rgba(248,250,255,.94) 42%,rgba(231,238,255,.82) 100%);
  box-shadow:0 34px 105px rgba(49,91,255,.13),inset 0 1px 0 white,inset 0 -18px 40px rgba(92,123,208,.055);
  backdrop-filter:blur(18px);
  text-align:center;
}
.understanding-center::before,.understanding-center::after {
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.understanding-center::before {
  inset:13px;
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 0 28px rgba(49,91,255,.045);
}
.understanding-center::after {
  left:21%; right:21%; top:12%; height:22%;
  background:linear-gradient(180deg,rgba(255,255,255,.68),transparent);
  filter:blur(4px);
}
.understanding-center strong { position:relative; z-index:2; display:block; margin-top:-8px; font-size:25px; font-weight:650; letter-spacing:-.04em; }
.understanding-center small { position:absolute; z-index:2; bottom:66px; color:#7081a6; font-size:10px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
.understanding-center-glow { position:absolute; inset:-116px; border-radius:50%; background:radial-gradient(circle,rgba(49,91,255,.17),rgba(156,181,248,.075) 41%,transparent 70%); filter:blur(10px); }
.understanding-center-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(49,91,255,.085); border-radius:50%; transform:translate(-50%,-50%); }
.understanding-center-ring-a { width:370px; height:370px; }
.understanding-center-ring-b { width:520px; height:520px; opacity:.66; }
.understanding-step { position:absolute; width:275px; }
.understanding-step::before {
  content:'';
  display:block;
  width:34px;
  height:1px;
  margin-bottom:16px;
  background:linear-gradient(90deg,#315bff,rgba(49,91,255,.08));
}
.understanding-step > span { display:block; margin-bottom:10px; color:#315bff; font-size:10px; font-weight:700; letter-spacing:.18em; }
.understanding-step h3 { margin:0 0 8px; font-size:30px; font-weight:560; letter-spacing:-.042em; }
.understanding-step p { max-width:245px; color:#667695; font-size:15px; line-height:1.55; }
.understanding-listen { left:4.5%; top:14%; }
.understanding-understand { right:4.5%; top:14%; }
.understanding-act { right:4.5%; bottom:12%; }
.understanding-remember { left:4.5%; bottom:12%; }
.understanding-close { position:relative; z-index:3; padding-bottom:116px; }
.understanding-close p { max-width:900px; margin-left:auto; font-size:clamp(34px,3.45vw,54px); font-weight:450; line-height:1.1; letter-spacing:-.05em; text-align:right; }
.understanding-close p span { color:#63749a; }

/* During this iterative chapter pass the legacy capabilities block is superseded visually. */
.home-main > #capacidades { display:none; }

@media (prefers-reduced-motion:no-preference) {
  .understanding-center-glow { animation:understanding-breathe 9s ease-in-out infinite alternate; }
  .understanding-chapter[data-entered] .understanding-route { animation:understanding-route-in 950ms cubic-bezier(.2,.72,.2,1) both; }
  .understanding-chapter[data-entered] .understanding-route-b { animation-delay:90ms; }
  .understanding-chapter[data-entered] .understanding-route-c { animation-delay:180ms; }
  .understanding-chapter[data-entered] .understanding-route-d { animation-delay:270ms; }
}
@keyframes understanding-breathe { from { transform:scale(.988); opacity:.78; } to { transform:scale(1.014); opacity:1; } }
@keyframes understanding-route-in { from { opacity:.12; stroke-dasharray:1; stroke-dashoffset:1; } to { opacity:.78; stroke-dasharray:1; stroke-dashoffset:0; } }

@media (max-width:900px) {
  .understanding-chapter { min-height:auto; }
  .understanding-field::before { width:96vw; height:96vw; top:55%; }
  .understanding-routes { display:none; }
  .understanding-copy { padding-top:84px; }
  .understanding-premise { margin-left:0; }
  .understanding-system { min-height:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:64px; padding-bottom:70px; }
  .understanding-center { position:relative; left:auto; top:auto; grid-column:1/-1; grid-row:2; width:190px; height:190px; margin:22px auto; transform:none; }
  .understanding-center strong { font-size:22px; }
  .understanding-center small { bottom:46px; }
  .understanding-center-ring-a { width:270px; height:270px; }
  .understanding-center-ring-b { width:350px; height:350px; }
  .understanding-step { position:relative; width:auto; left:auto; right:auto; top:auto; bottom:auto; padding:22px 0; border-top:1px solid rgba(95,121,176,.15); }
  .understanding-step::before { display:none; }
  .understanding-listen { grid-column:1; grid-row:1; }
  .understanding-understand { grid-column:2; grid-row:1; }
  .understanding-act { grid-column:1; grid-row:3; }
  .understanding-remember { grid-column:2; grid-row:3; }
  .understanding-close { padding-bottom:84px; }
  .understanding-close p { margin-left:0; text-align:left; }
}

@media (max-width:620px) {
  .understanding-copy { padding-top:70px; }
  .understanding-copy h2 { font-size:clamp(40px,11vw,54px); }
  .understanding-system { grid-template-columns:1fr; gap:4px; padding-top:44px; }
  .understanding-center { grid-column:1; grid-row:3; margin:34px auto; }
  .understanding-listen { grid-column:1; grid-row:1; }
  .understanding-understand { grid-column:1; grid-row:2; }
  .understanding-act { grid-column:1; grid-row:4; }
  .understanding-remember { grid-column:1; grid-row:5; }
  .understanding-center-ring-b { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .understanding-center-glow,.understanding-route { animation:none !important; }
}