/* Las Vaults (/vaults, /vaults/legal) y «Explorar conocimiento» (/vaults/<id>/conocimiento) · web 06 «La elegida»
   en producción (8-oct-2026). No tenían maqueta: el sistema de la 06 (web.css) y sus piezas (el índice del vuelo, los gráficos de las
   regiones, la Vault con su estación por parada). Sobrio: sin velos ni chips; el naranja, solo en la acción principal y en la señal
   de la Vault. Las líneas de los índices y gráficos, en blanco a poca opacidad (en el tema claro, en negro). */

/* ---------- Vault · el héroe: la subnavegación arriba, el texto en el centro, la Vault entera detrás ---------- */
.v-heroe { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--barra-h) + 10px) 0 20px; overflow-x: clip; }
.v-sub-fila { width: 100%; }
.v-sub ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 501px; margin: 0 auto; }
.v-sub a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 4px; border-top: 1px solid rgba(237, 237, 237, .16); font-size: .9375rem; line-height: 1.35; color: var(--t-apoyo); transition: color .3s, border-color .3s; }
.v-sub a small { font-size: .875rem; color: var(--t2); }
.v-sub a[aria-current="page"] { color: var(--t1); font-weight: 500; border-top-color: var(--t1); }
@media (hover: hover) and (pointer: fine) { .v-sub a:hover { color: var(--t1); border-top-color: rgba(237, 237, 237, .4); } .v-sub a[aria-current="page"]:hover { border-top-color: var(--t1); } }
.v-centro { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.v-centro .titular-xxl { margin-top: -4px; }
.v-centro .entradilla { max-width: 34ch; }
.v-centro .cuerpo { max-width: 44ch; color: var(--t-apoyo); }
.v-centro .acciones { justify-content: center; margin-top: 4px; }
.v-heroe .heroe-pie { position: static; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; width: 100%; }

/* ---------- Vault · las áreas: el texto a la izquierda, la Vault a la derecha y el índice abajo (el del vuelo de la portada) ---------- */
.v-areas, .k-cab, .k-pregunta, .k-previstas { position: relative; }   /* referencia de vaults-comun.js · junto */
.v-areas > .v-areas-in { flex: 1; display: flex; flex-direction: column; }
.v-info { margin: auto 0; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.v-info-vivo { display: flex; flex-direction: column; gap: 16px; }
.v-info .titular-xl { font-size: clamp(2.25rem, 4vw, 3.75rem); overflow-wrap: break-word; }
.v-info .entradilla { max-width: 40ch; }
.v-privada { max-width: 44ch; }
.v-indice { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.v-indice button { display: block; min-height: 48px; padding: 14px 0 6px; border-top: 1px solid rgba(237, 237, 237, .16); font-size: .875rem; line-height: 1.35; color: var(--t2); text-align: left; transition: color .3s, border-color .3s; }
.v-indice button[aria-pressed="true"] { color: var(--t1); border-top-color: var(--t1); }
@media (hover: hover) and (pointer: fine) { .v-indice button:hover { color: var(--t1); border-top-color: rgba(237, 237, 237, .4); } .v-indice button[aria-pressed="true"]:hover { border-top-color: var(--t1); } }

/* ---------- Vault · el cierre (comparte la última pantalla con el pie) ---------- */
.v-cierre .cierre-in, .k-cierre .cierre-in { gap: 24px; }
.v-cierre .titular-xl, .k-cierre .titular-xl { font-size: clamp(2.1rem, 4.6vw, 4.25rem); }
/* pantallas bajas de escritorio (1024 × 768, 1280 × 800): el cierre y el pie caben juntos */
@media (min-width: 761px) and (max-height: 840px) {
  .v-cierre, .k-cierre { padding-top: calc(var(--barra-h) + 2vh); padding-bottom: 3vh; }
  .v-cierre .cierre-in, .k-cierre .cierre-in { gap: 18px; }
  .v-cierre .titular-xl, .k-cierre .titular-xl { font-size: clamp(2rem, 3.8vw, 3.25rem); }
  .v-cierre .entradilla, .k-cierre .entradilla { font-size: 1.0625rem; }
}
.v-cierre-tit { max-width: 22ch; }
.v-cierre .entradilla { max-width: 50ch; }
.k-cierre .entradilla { max-width: 60ch; }

/* ---------- Explorar conocimiento · la cabecera: el texto a la izquierda, la Vault a la derecha ---------- */
.k-cab-in { max-width: min(620px, 54vw); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.k-migas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: .9375rem; margin-bottom: 6px; }
.k-volver { color: var(--t2); }
.k-flecha { display: inline-block; transition: transform .3s var(--e-sal); }
@media (hover: hover) and (pointer: fine) { .k-volver:hover { color: var(--t1); } .k-volver:hover .k-flecha { transform: translateX(-3px); } }
.k-aqui { color: var(--t-apoyo); }
.k-aqui::before { content: '/'; margin-right: 14px; color: var(--t3); }
.k-mercados { display: flex; flex-wrap: wrap; font-size: 1rem; line-height: 1.6; color: var(--t-apoyo); }
.k-mercados li + li::before { content: '·'; margin: 0 10px; color: var(--t2); }
.k-aviso { max-width: 54ch; }
.k-cab .titular-xl { font-size: clamp(2.3rem, 4.6vw, 4.25rem); }

/* ---------- Explorar conocimiento · las seis áreas: escena por pasos (como el vuelo de la portada) ----------
   Cada paso se ve entero; al llegar, lo que estaba sale hacia donde va el gesto y lo nuevo entra (por tiempo) y su gráfico se dibuja. */
.k-escena { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); padding: calc(var(--barra-h) + 20px) var(--margen) 28px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.k-pasos { grid-area: 1 / 1; display: grid; min-height: 0; }
.k-area { grid-area: 1 / 1; align-self: center; width: min(580px, 46vw); display: flex; flex-direction: column; gap: 16px; }
.k-texto { display: flex; flex-direction: column; gap: 12px; }
.k-area .titular-l { font-size: clamp(2rem, 3.3vw, 3.25rem); }
.k-area .region-desc { margin-bottom: 0; }
.k-num { color: var(--t2); font-weight: 400; }
.js:not(.rm) .k-area { opacity: 0; pointer-events: none; transform: translate3d(0, 32px, 0); transition: opacity .4s var(--e-sal), transform .55s var(--e-quint); }
.js:not(.rm) .k-area[data-lado="arriba"] { transform: translate3d(0, -32px, 0); }
.js:not(.rm) .k-area.activo { opacity: 1; pointer-events: auto; transform: none; transition: opacity .7s var(--e-sal) .3s, transform .9s var(--e-quint) .3s; }
/* el índice: las seis áreas; la que se ve, en blanco */
.k-indice { grid-row: 2; padding-top: 22px; }
.js:not(.rm) .k-indice { opacity: 0; transition: opacity .5s var(--e-sal); }
.js:not(.rm) .k-indice.visto { opacity: 1; }
.k-indice ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.k-indice li { padding-top: 14px; border-top: 1px solid rgba(237, 237, 237, .16); font-size: .875rem; line-height: 1.35; color: var(--t2); transition: color .4s, border-color .4s; }
.k-indice li.pasado { border-top-color: rgba(237, 237, 237, .36); }
.k-indice li.activo { color: var(--t1); border-top-color: var(--t1); }

/* ---------- Los gráficos (los de las regiones de la portada, .g, y tres nuevos con su mismo lenguaje); se dibujan al llegar ---------- */
.k-area .g { gap: 14px; }
/* Precio y estructura: la serie de antes (ilustrativa), su media, el volumen y los ejes */
.k-gcab { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.k-metricas { display: flex; flex-wrap: wrap; font-size: .875rem; line-height: 1.45; color: var(--t-apoyo); }
.k-metricas li + li::before { content: '·'; margin: 0 8px; color: var(--t2); }
.k-estado { font-size: .875rem; color: var(--t2); white-space: nowrap; }
.pr-lienzo { position: relative; height: clamp(104px, 18vh, 176px); }
.pr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pr-rejilla path { fill: none; stroke: rgba(237, 237, 237, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pr-linea { fill: none; stroke: var(--t1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pr-media { fill: none; stroke: var(--t2); stroke-width: 1.2; stroke-dasharray: .012 .012; vector-effect: non-scaling-stroke; }
.pr-trazo { position: absolute; inset: 0; clip-path: inset(-4px 100% -4px -4px); transition: clip-path 1.7s var(--e-mov) .45s; }
.activo .pr-trazo { clip-path: inset(-4px -4px -4px -4px); }
.pr-punto { position: absolute; left: 100%; top: 21.5%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--t1); box-shadow: 0 0 0 3px var(--panel); transform: scale(0); transition: transform .45s var(--e-sal) 2s; }
.activo .pr-punto { transform: scale(1); }
.pr-volumen { display: block; width: 100%; height: 26px; }
.pr-volumen rect { fill: rgba(237, 237, 237, .24); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .7s var(--e-quint) calc(var(--i) * 24ms + .5s); }
.activo .pr-volumen rect { transform: none; }
.pr-ejes { display: flex; justify-content: space-between; margin-top: -6px; font: 400 .8125rem/1 var(--mono); color: var(--t2); font-variant-numeric: tabular-nums; }
/* Propiedad y flujos: el anillo de propiedad (tres arcos que se dibujan uno tras otro) y su leyenda */
.prop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; }
.prop-anillo { position: relative; width: clamp(112px, 15vh, 140px); aspect-ratio: 1; }
.prop-anillo svg { width: 100%; height: 100%; overflow: visible; transform: rotate(0deg); }
.prop-fondo { fill: none; stroke: rgba(237, 237, 237, .07); stroke-width: 9; }
.prop-arco { fill: none; stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--e-mov) calc(var(--i) * 300ms + .4s); }
.prop-arco.p1 { stroke: var(--t1); }
.prop-arco.p2 { stroke: rgba(237, 237, 237, .46); }
.prop-arco.p3 { stroke: rgba(237, 237, 237, .2); }
.activo .prop-arco { stroke-dashoffset: 0; }
.prop-anillo p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.25; }
.prop-anillo b { font-size: .9375rem; font-weight: 600; }
.prop-anillo small { font-size: .875rem; color: var(--t2); }
.prop-ley { display: flex; flex-direction: column; gap: 12px; font-size: .9375rem; color: var(--t-apoyo); }
.prop-ley li { display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .5s var(--e-sal) calc(var(--i) * 300ms + .7s); }
.activo .prop-ley li { opacity: 1; }
.prop-ley i { flex: none; width: 18px; height: 3px; border-radius: 2px; }
.prop-ley i.p1 { background: var(--t1); }
.prop-ley i.p2 { background: rgba(237, 237, 237, .46); }
.prop-ley i.p3 { background: rgba(237, 237, 237, .2); }
/* Profundidad especializada: cuatro módulos que convergen en un nodo (las líneas de la región Eventos de la portada) */
.piezas { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: start; }
.piezas-lista li { height: 52px; display: flex; align-items: center; border-top: 1px solid rgba(237, 237, 237, .08); font-size: .9375rem; line-height: 1.3; color: var(--t-apoyo);
  opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity .5s var(--e-sal) calc(var(--i) * 120ms + .3s), transform .6s var(--e-quint) calc(var(--i) * 120ms + .3s); }
.piezas-lista li:first-child { border-top: 0; }
.activo .piezas-lista li { opacity: 1; transform: none; }
.piezas-svg { width: 96px; height: 208px; overflow: visible; }

/* ---------- Explorar conocimiento · «Una pregunta debe conectar los datos que importan.» ---------- */
.k-pregunta-in { max-width: min(780px, 58vw); display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* ---------- Legal · las seis áreas previstas: una lista (no una rejilla de tarjetas) que recorre la Vault ---------- */
.k-previstas-in { max-width: 600px; display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
.k-lista[data-revela] { opacity: 1; transform: none; }
.k-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(237, 237, 237, .12); }
.k-lista li:last-child { border-bottom: 1px solid rgba(237, 237, 237, .12); }
.js:not(.rm) .k-lista li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .6s var(--e-sal) calc(var(--i) * 90ms + .1s), transform .8s var(--e-quint) calc(var(--i) * 90ms + .1s); }
.js:not(.rm) .k-lista.visto li { opacity: 1; transform: none; }
.k-lista-n { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 560; letter-spacing: -.025em; line-height: 1.15; color: var(--t1); transition: color .45s var(--e-sal); }
.k-lista-e { font-size: .875rem; color: var(--t2); white-space: nowrap; }
.k-lista.marcando .k-lista-n { color: var(--t3); }
.k-lista.marcando li.activa .k-lista-n { color: var(--t1); }

/* ---------- Tema claro ---------- */
[data-tema="claro"] .v-sub a, [data-tema="claro"] .v-indice button, [data-tema="claro"] .k-indice li { border-top-color: rgba(15, 15, 15, .16); }
[data-tema="claro"] .v-sub a[aria-current="page"], [data-tema="claro"] .v-indice button[aria-pressed="true"], [data-tema="claro"] .k-indice li.activo { border-top-color: var(--t1); }
[data-tema="claro"] .k-indice li.pasado { border-top-color: rgba(15, 15, 15, .36); }
@media (hover: hover) and (pointer: fine) { [data-tema="claro"] .v-sub a:not([aria-current]):hover, [data-tema="claro"] .v-indice button[aria-pressed="false"]:hover { border-top-color: rgba(15, 15, 15, .4); } }
[data-tema="claro"] .pr-rejilla path { stroke: rgba(15, 15, 15, .08); }
[data-tema="claro"] .pr-volumen rect { fill: rgba(15, 15, 15, .18); }
[data-tema="claro"] .prop-fondo { stroke: rgba(15, 15, 15, .07); }
[data-tema="claro"] .prop-arco.p2, [data-tema="claro"] .prop-ley i.p2 { stroke: rgba(15, 15, 15, .42); background: rgba(15, 15, 15, .42); }
[data-tema="claro"] .prop-arco.p3, [data-tema="claro"] .prop-ley i.p3 { stroke: rgba(15, 15, 15, .18); background: rgba(15, 15, 15, .18); }
[data-tema="claro"] .piezas-lista li { border-top-color: rgba(15, 15, 15, .08); }
[data-tema="claro"] .k-lista li { border-color: rgba(15, 15, 15, .12); }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1080px) {
  .v-indice { gap: 12px; }
  .k-indice ol { gap: 12px; }
}

/* ---------- Móvil: la Vault arriba, en el hueco; el texto abajo ---------- */
@media (max-width: 760px) {
  .v-heroe { padding-top: calc(var(--barra-h) + 6px); padding-bottom: 16px; }
  .v-sub ol { gap: 10px; }
  .v-sub a { font-size: .875rem; padding-top: 10px; }
  .v-centro { gap: 20px; padding-top: 20px; padding-bottom: 20px; }
  .v-centro .acciones { width: min(100%, 320px); flex-direction: column; align-items: stretch; }
  .v-heroe .heroe-pie { flex-direction: column; align-items: flex-start; gap: 4px; }

  .v-areas.pantalla, .k-cab.pantalla, .k-pregunta.pantalla, .k-previstas.pantalla { justify-content: flex-end; padding-top: calc(var(--barra-h) + 16px); padding-bottom: 24px; }
  .v-areas > .v-areas-in { justify-content: flex-end; }
  .v-info { margin: 0; gap: 14px; }
  .v-info-vivo { gap: 12px; }
  .v-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 20px; }
  .v-indice button { min-height: 44px; padding: 10px 0 8px; }

  .k-cab-in { max-width: none; gap: 16px; }
  .k-migas { font-size: .875rem; margin-bottom: 2px; }
  .k-mercados { font-size: .9375rem; }

  /* la escena: el índice (seis tramos) arriba, la Vault debajo y cada área entera abajo */
  .k-escena { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); padding: calc(var(--barra-h) + 12px) var(--margen) max(18px, 3svh); }
  .k-indice { grid-row: 1; padding-top: 0; }
  .k-indice ol { gap: 6px; }
  .k-indice li { font-size: 0; line-height: 0; height: 0; padding-top: 0; border-top-width: 2px; }
  .k-pasos { grid-row: 2; }
  .k-area { width: auto; align-self: end; gap: 12px; }
  .k-texto { gap: 8px; }
  .k-area .titular-l { font-size: 1.875rem; }
  .k-area .region-desc { font-size: 1rem; }
  .pr-lienzo { height: clamp(96px, 15svh, 140px); }
  .prop { gap: 20px; }
  .prop-anillo { width: 112px; }
  .k-area .cal { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .k-area .cal-mes { gap: 1px; }
  .k-area .cal-mes span { border-radius: 6px; }
  .k-area .cal-fecha { flex-direction: column; gap: 4px; }
  .k-area .cal-fecha span { font-size: 1.875rem; }
  .k-area .cal-evento { font-size: 1rem; }
  .piezas-lista li { font-size: .875rem; }

  .k-pregunta-in { gap: 24px; }
  .k-pregunta-in .acciones { width: min(100%, 320px); }
  .k-pregunta-in .boton { width: 100%; }
  .k-previstas-in { gap: 18px; }
  .k-lista li { padding: 11px 0; }
  .k-lista-n { font-size: 1.25rem; }
}

/* ---------- Movimiento reducido: todo quieto y legible; las áreas, una por parada y ya dibujadas ---------- */
.rm .k-escena { display: flex; flex-direction: column; gap: 16px; padding: calc(var(--barra-h) + 16px) var(--margen) 24px; }
.rm .k-pasos { display: flex; flex-direction: column; gap: 16px; }
.rm .k-area { width: min(580px, 100%); min-height: calc(100svh - var(--barra-h) - 40px); justify-content: center; align-self: flex-start; }
.rm .k-indice { display: none; }
.rm .pr-trazo { clip-path: none; }
.rm .k-lista li { opacity: 1; transform: none; }