/* Marketplace de administradores: vacantes, registro de candidatos, "Busco
   administrador" y directorio. Se carga solo en esas páginas, encima de site.css
   (tokens, navbar, botones). Prefijo mk-. Mismo lenguaje del home: bloques con
   canto inferior, átomos de 22 % y violeta de marca. */

@layer components {
  /* ── Cabecera de página ───────────────────────────────────── */
  .mk-head { position: relative; padding-top: calc(var(--nav-h) + clamp(2.25rem, 1.4rem + 3vw, 4.25rem)); padding-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); overflow: clip; }
  .mk-head--tint { background: var(--color-cream-200); }
  .mk-head-grid { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 1024px) { .mk-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
  .mk-head .t-h1 { margin-top: .9rem; max-width: 15em; text-wrap: balance; }
  .mk-head .t-h1 .h1-l2 { display: inline; }
  .mk-head .t-lead { margin-top: 1.2rem; max-width: 38rem; text-wrap: pretty; }
  .mk-head .cta-row { margin-top: 1.75rem; }
  .mk-back { display: inline-flex; align-items: center; gap: .45rem; font-size: .93rem; font-weight: 600; color: var(--color-ink-600); transition: color .2s; }
  .mk-back:hover { color: var(--color-brand); }
  .mk-back .ico { transform: rotate(180deg); width: 1rem; height: 1rem; }
  .mk-head .mk-kicker--head { display: flex; margin-top: 1.5rem; }
  .mk-head--detail .t-h1 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem); max-width: 18em; }

  /* Filtro de ciudades: fichas con canto (en celular se desplazan de lado). */
  .mk-chips { display: flex; gap: .5rem; margin-top: 2rem; overflow-x: auto; padding: .15rem .1rem .55rem; scrollbar-width: none; }
  .mk-chips::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) { .mk-chips { flex-wrap: wrap; overflow: visible; } }
  .mk-chip { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: .8rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 3px 0 var(--color-cream-300); font-size: .9rem; font-weight: 580; color: var(--color-ink-800); white-space: nowrap; transition: box-shadow .2s, transform .2s var(--ease-spring), background-color .2s, color .2s; }
  .mk-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--color-violet-300), 0 3px 0 var(--color-violet-300); }
  .mk-chip small { font-size: .78rem; font-weight: 650; color: var(--color-ink-400); }
  .mk-chip[aria-current="page"] { background: var(--color-brand); color: #fff; box-shadow: 0 3px 0 var(--color-brand-deep); }
  .mk-chip[aria-current="page"] small { color: rgb(255 255 255 / .7); }

  /* ── Ilustración de la cabecera: vacantes confidenciales ─────── */
  .mk-board { position: relative; display: none; }
  @media (min-width: 1024px) { .mk-board { display: block; } }
  .mk-board-card { position: relative; display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius-tile); background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 5px 0 var(--color-cream-300); }
  .mk-board-card + .mk-board-card { margin-top: .85rem; }
  .mk-board-card:nth-child(2) { margin-left: 2.5rem; }
  .mk-board-card:nth-child(3) { margin-left: 1.1rem; }
  .mk-board-card p { font-size: .95rem; font-weight: 660; color: var(--color-ink-900); line-height: 1.25; }
  .mk-board-card small { display: block; margin-top: .2rem; font-size: .82rem; color: var(--color-ink-500); }
  .mk-redact { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .75rem; font-weight: 650; color: var(--color-violet-700); }
  .mk-redact i { display: block; height: .55rem; width: 6.5rem; border-radius: .2rem; background: var(--color-ink-900); transform-origin: left center; }
  .mk-redact .ico { width: .85rem; height: .85rem; }
  /* Hasta que GSAP arme la escena (sin JS, el layout la muestra a los 3 s). */
  .js-motion .mk-board:not(.mk-ready) .mk-board-card { opacity: 0; }

  /* Medidor de tamaño: una torre de 5 bloques, se llenan según el rango. */
  .mk-size { flex: none; display: grid; grid-template-rows: repeat(5, .5rem); gap: .2rem; width: 1.6rem; padding: .3rem; border-radius: .55rem; box-shadow: inset 0 0 0 1.5px var(--color-violet-200); }
  .mk-size i { border-radius: .16rem; background: var(--color-violet-100); }
  .mk-size i.on { background: var(--color-brand); }
  .mk-size--xs { width: 1.05rem; padding: .16rem; grid-template-rows: repeat(5, .17rem); gap: .1rem; border-radius: .3rem; }
  .mk-size--xs i { border-radius: .06rem; }

  /* ── Tarjeta de vacante ───────────────────────────────────── */
  .mk-list { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(4rem, 3rem + 4vw, 6rem); }
  .mk-results { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; font-size: .95rem; color: var(--color-ink-500); }
  .mk-grid { display: grid; gap: 1.1rem; }
  @media (min-width: 640px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
  .mk-vcard { position: relative; display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.2rem; border-radius: var(--radius-tile); background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 5px 0 var(--color-cream-300); transition: transform .25s var(--ease-spring), box-shadow .25s; }
  .mk-vcard:hover, .mk-vcard:focus-within { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--color-violet-300), 0 8px 0 var(--color-violet-200); }
  .mk-vcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .mk-kicker { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--color-violet-800); }
  .mk-kicker .ico { width: .95rem; height: .95rem; }
  .mk-vcard .mk-size { position: absolute; top: 1.2rem; right: 1.2rem; grid-template-rows: repeat(5, .3rem); gap: .15rem; width: 1.3rem; padding: .24rem; border-radius: .45rem; }
  .mk-vcard-top { padding-right: 2.25rem; }
  .mk-vcard .mk-size i { border-radius: .1rem; }
  .mk-vcard h2 { margin-top: .7rem; font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; color: var(--color-ink-900); text-wrap: balance; }
  .mk-vcard h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-vcard h2 a:focus-visible { outline: none; }
  .mk-vcard:has(h2 a:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 3px; }
  .mk-facts { margin-top: .9rem; display: grid; gap: .4rem; font-size: .93rem; color: var(--color-ink-700); }
  .mk-facts li { display: flex; align-items: center; gap: .55rem; }
  .mk-facts .ico { width: 1rem; height: 1rem; color: var(--color-brand); }
  .mk-vcard-foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--color-ink-500); }
  .mk-vcard-foot .go { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-atom); background: var(--color-violet-50); color: var(--color-brand); transition: background-color .2s, color .2s, transform .25s var(--ease-spring); }
  .mk-vcard:hover .go { background: var(--color-brand); color: #fff; transform: translateX(2px); }
  .mk-vcard-foot .go .ico { width: 1rem; height: 1rem; }

  /* Paginación */
  .mk-pages { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .93rem; color: var(--color-ink-500); }
  .mk-pages-links { display: flex; gap: .5rem; margin-left: auto; }

  /* Estado vacío: una torre en contorno esperando su primera vacante. */
  .mk-empty { display: grid; justify-items: center; gap: 1rem; padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) 1.5rem; border-radius: var(--radius-panel); background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-cream-300); text-align: center; }
  .mk-empty svg { width: 4.5rem; height: auto; }
  .mk-empty p { max-width: 34rem; font-size: 1.08rem; color: var(--color-ink-700); text-wrap: balance; }

  /* Cómo funciona: tres bloques numerados */
  .mk-how { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border-radius: var(--radius-panel); background: var(--color-cream-200); }
  .mk-how h2 { font-weight: 720; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.028em; color: var(--color-ink-900); }
  .mk-steps { margin-top: 1.5rem; display: grid; gap: 1rem; counter-reset: mk; }
  @media (min-width: 768px) { .mk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mk-steps li { counter-increment: mk; position: relative; padding: 1.15rem 1.15rem 1.25rem; border-radius: var(--radius-tile); background: #fff; box-shadow: 0 4px 0 var(--color-cream-300); color: var(--color-ink-700); line-height: 1.45; }
  .mk-steps li::before { content: counter(mk); display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .8rem; border-radius: var(--radius-atom); background: var(--color-brand); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 3px 0 var(--color-brand-deep); }

  /* ── Detalle de la vacante ────────────────────────────────── */
  .mk-detail { display: grid; gap: 2rem; align-items: start; padding-bottom: clamp(4rem, 3rem + 4vw, 6rem); }
  @media (min-width: 1024px) { .mk-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 3.5rem; } .mk-detail > aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
  .mk-sheet-facts { display: grid; gap: .75rem; }
  @media (min-width: 640px) { .mk-sheet-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mk-fact { padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); }
  .mk-fact dt { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--color-ink-500); }
  .mk-fact dt .ico { width: .95rem; height: .95rem; color: var(--color-brand); }
  .mk-fact dd { margin-top: .3rem; font-weight: 650; color: var(--color-ink-900); }
  .mk-fact--wide { grid-column: 1 / -1; }
  .mk-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
  .mk-tags span { padding: .25rem .6rem; border-radius: .55rem; background: var(--color-violet-50); color: var(--color-violet-800); font-size: .85rem; font-weight: 600; }
  .mk-prose { margin-top: 2rem; color: var(--color-ink-700); font-size: 1.05rem; line-height: 1.65; white-space: pre-line; }
  .mk-note { margin-top: 1.75rem; display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 1.1rem; background: var(--color-violet-50); box-shadow: inset 0 0 0 1px var(--color-violet-100); font-size: .95rem; color: var(--color-ink-700); }
  .mk-note .ico { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; color: var(--color-brand); }

  /* Panel de postulación */
  .mk-apply { padding: 1.5rem; border-radius: var(--radius-panel); background: #fff; box-shadow: inset 0 0 0 2px var(--color-brand), 0 6px 0 var(--color-violet-200); }
  .mk-apply h2 { font-weight: 720; font-size: 1.3rem; letter-spacing: -.022em; color: var(--color-ink-900); }
  .mk-apply .mk-steps { grid-template-columns: 1fr; gap: .55rem; margin-top: 1rem; }
  .mk-apply .mk-steps li { display: flex; gap: .75rem; align-items: flex-start; padding: 0; background: none; box-shadow: none; font-size: .93rem; }
  .mk-apply .mk-steps li::before { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; font-size: .78rem; box-shadow: none; }
  .mk-apply .btn { width: 100%; margin-top: 1.25rem; }
  .mk-apply .mk-form { margin-top: 1rem; }
  .mk-apply-foot { margin-top: .9rem; font-size: .9rem; color: var(--color-ink-500); text-align: center; }
  .mk-apply-note { margin-top: .75rem; font-size: .95rem; color: var(--color-ink-600); }
  .mk-apply .mk-status + .btn { margin-top: 1rem; }
  .mk-status { display: flex; align-items: center; gap: .65rem; font-weight: 650; color: var(--color-ink-900); }
  .mk-status::before { content: ""; flex: none; width: .85rem; height: .85rem; border-radius: var(--radius-atom); background: var(--color-brand); }
  .mk-status--off::before { background: var(--color-ink-300); }

  /* ── Formularios (registro, Busco administrador) ─────────── */
  .mk-split { display: grid; gap: 2.5rem; align-items: start; padding-bottom: clamp(4rem, 3rem + 4vw, 6rem); }
  @media (min-width: 1024px) { .mk-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } .mk-split > .mk-side { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
  .mk-side .t-h1 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.5rem); margin-top: .9rem; text-wrap: balance; }
  .mk-side .t-lead { margin-top: 1rem; }
  .mk-side .mk-steps { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.75rem; }
  .mk-side .mk-steps li { display: flex; gap: .85rem; align-items: center; padding: .85rem 1rem; }
  .mk-side .mk-steps li::before { margin: 0; flex: none; }
  .mk-callout { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; padding: .85rem 1rem; border-radius: 1rem; background: var(--color-violet-50); box-shadow: inset 0 0 0 1px var(--color-violet-200); font-size: .95rem; color: var(--color-ink-800); }
  .mk-callout .pill-atom { margin: 0; }
  .mk-side > .mk-hint { margin-top: 1.25rem; }
  .mk-head .mk-split { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }

  .mk-sheet { position: relative; border-radius: var(--radius-panel); background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 6px 0 var(--color-cream-300); overflow: hidden; }
  .mk-sheet-head { display: flex; align-items: center; gap: .65rem; padding: .95rem 1.5rem; border-bottom: 1px solid var(--color-cream-300); background: var(--color-cream-100); font-size: .85rem; font-weight: 650; color: var(--color-violet-800); }
  .mk-sheet-head::before { content: ""; width: .7rem; height: .7rem; border-radius: var(--radius-atom); background: var(--color-brand); }
  .mk-form { display: grid; gap: 1.15rem; }
  .mk-sheet > .mk-form { padding: 1.4rem; gap: 1.6rem; }
  @media (min-width: 640px) { .mk-sheet > .mk-form { padding: 1.9rem 2rem 2rem; } }
  .mk-fieldset { display: grid; gap: 1rem; min-width: 0; }
  /* float: la leyenda deja de dibujarse sobre el borde y entra al grid como un bloque más. */
  .mk-legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: .7rem; margin-bottom: .25rem; font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em; color: var(--color-ink-900); }
  .mk-legend span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-atom); background: var(--color-violet-100); color: var(--color-violet-800); font-size: .85rem; font-weight: 700; }
  .mk-fieldset + .mk-fieldset { padding-top: 1.5rem; border-top: 1px dashed var(--color-cream-400); }
  .mk-row { display: grid; gap: 1rem; }
  @media (min-width: 640px) { .mk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-span { grid-column: 1 / -1; } }
  .mk-label { display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 620; color: var(--color-ink-800); }
  .mk-input { width: 100%; border-radius: .8rem; padding: .72rem .9rem; font: inherit; font-size: 1rem; color: var(--color-ink-900); background: var(--color-cream-50); border: 1px solid var(--color-ink-200); transition: border-color .2s, box-shadow .2s, background-color .2s; }
  .mk-input::placeholder { color: var(--color-ink-300); }
  .mk-input:focus { outline: none; background: #fff; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-violet-100); }
  select.mk-input { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1rem; }
  textarea.mk-input { resize: vertical; min-height: 6rem; }
  input[type="file"].mk-file { display: block; width: 100%; font-size: .9rem; color: var(--color-ink-600); }
  input[type="file"].mk-file::file-selector-button { margin-right: .85rem; padding: .55rem .9rem; border: 0; border-radius: .7rem; background: var(--color-violet-50); color: var(--color-violet-800); font: inherit; font-weight: 620; cursor: pointer; }
  .mk-hint { margin-top: .4rem; font-size: .82rem; color: var(--color-ink-500); }
  .mk-checks { display: grid; gap: .5rem; }
  @media (min-width: 640px) { .mk-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mk-check { display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; border-radius: .8rem; box-shadow: inset 0 0 0 1px var(--color-cream-300); font-size: .93rem; color: var(--color-ink-800); cursor: pointer; transition: box-shadow .2s, background-color .2s; }
  .mk-check:has(input:checked) { background: var(--color-violet-50); box-shadow: inset 0 0 0 1.5px var(--color-violet-300); }
  .mk-check input, .mk-consent input { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--color-brand); }
  .mk-consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .9rem; color: var(--color-ink-600); }
  .mk-consent input { margin-top: .2rem; }
  .mk-consent a, .mk-inline-link { color: var(--color-violet-800); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .mk-alert { border-radius: .9rem; padding: .8rem 1rem; background: #FEF2F2; color: #B91C1C; font-size: .92rem; }
  .mk-alert:focus { outline: none; }
  .mk-alert ul { display: grid; gap: .2rem; padding-left: 1.1rem; list-style: disc; }
  .mk-form .btn-solid { width: 100%; }
  .mk-fine { font-size: .85rem; color: var(--color-ink-500); text-align: center; }
  /* Rol de quien pide administrador: fichas tipo bloque. */
  .mk-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  @media (min-width: 640px) { .mk-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .mk-role { position: relative; cursor: pointer; }
  .mk-role span { display: block; padding: .65rem .5rem; border-radius: .8rem; text-align: center; font-size: .93rem; font-weight: 600; color: var(--color-ink-700); box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 3px 0 var(--color-cream-300); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease-spring); }
  .mk-role input:checked + span { background: var(--color-brand); color: #fff; box-shadow: 0 3px 0 var(--color-brand-deep); }
  .mk-role input:focus-visible + span { outline: 2px solid var(--color-brand); outline-offset: 2px; }
  .mk-target { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-radius: 1rem; background: var(--color-violet-50); box-shadow: inset 0 0 0 1px var(--color-violet-200); font-size: .93rem; color: var(--color-ink-800); }

  /* ── Página de confirmación ───────────────────────────────── */
  .mk-done { min-height: calc(100svh - 12rem); display: grid; place-items: center; padding: calc(var(--nav-h) + 3rem) 1rem 4rem; text-align: center; }
  .mk-done-in { max-width: 34rem; }
  .mk-done-mark { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-atom); background: var(--color-brand); color: #fff; box-shadow: 0 6px 0 var(--color-brand-deep); }
  .mk-done-mark .ico { width: 2rem; height: 2rem; stroke-width: 2; }
  .mk-done h1 { margin-top: 1.75rem; font-weight: 740; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -.035em; color: var(--color-ink-900); text-wrap: balance; }
  .mk-done p { margin-top: 1rem; font-size: 1.1rem; color: var(--color-ink-600); text-wrap: pretty; }
  .mk-done .cta-row { margin-top: 2rem; justify-content: center; }

  /* ── Directorio y perfil público ──────────────────────────── */
  .mk-search { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .6rem; max-width: 36rem; }
  @media (min-width: 640px) { .mk-search { flex-direction: row; } }
  .mk-search label { flex: 1; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; border-radius: .9rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-ink-200); transition: box-shadow .2s; }
  .mk-search label:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-brand), 0 0 0 3px var(--color-violet-100); }
  .mk-search label .ico { color: var(--color-brand); }
  .mk-search input { width: 100%; padding: .8rem 0; border: 0; background: transparent; font: inherit; color: var(--color-ink-900); }
  .mk-search input:focus { outline: none; }
  .mk-avatar { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-atom); background: var(--color-violet-100); color: var(--color-violet-800); font-weight: 700; object-fit: cover; }
  .mk-pcard { position: relative; display: flex; flex-direction: column; padding: 1.35rem; border-radius: var(--radius-tile); background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 5px 0 var(--color-cream-300); transition: transform .25s var(--ease-spring), box-shadow .25s; }
  .mk-pcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--color-violet-300), 0 8px 0 var(--color-violet-200); }
  .mk-pcard-top { display: flex; align-items: center; gap: 1rem; }
  .mk-pcard h2 { font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em; color: var(--color-ink-900); }
  .mk-pcard h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-pcard-sub { margin-top: .15rem; font-size: .9rem; color: var(--color-ink-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mk-cities { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
  .mk-cities span, .mk-cities a { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .55rem; border-radius: .55rem; background: var(--color-cream-200); font-size: .82rem; font-weight: 580; color: var(--color-ink-700); }
  .mk-cities a:hover { background: var(--color-violet-50); color: var(--color-violet-800); }
  .mk-cities .ico { width: .8rem; height: .8rem; }
  .mk-stats { margin-top: auto; padding-top: 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mk-stats div { padding: .65rem .75rem; border-radius: .9rem; background: var(--color-cream-100); }
  .mk-stats dt { font-size: .75rem; font-weight: 600; color: var(--color-ink-500); }
  .mk-stats dd { margin-top: .1rem; font-weight: 740; font-size: 1.2rem; letter-spacing: -.02em; color: var(--color-ink-900); font-variant-numeric: tabular-nums; }
  .mk-muted { margin-top: .85rem; font-size: .82rem; color: var(--color-ink-500); }
  .mk-band { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border-radius: var(--radius-panel); background: var(--color-brand); color: #fff; }
  @media (min-width: 768px) { .mk-band { grid-template-columns: minmax(0, 1fr) auto; } }
  .mk-band h2 { font-weight: 720; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.028em; }
  .mk-band p { margin-top: .5rem; color: rgb(255 255 255 / .86); }
  .mk-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
  .mk-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: .6rem; font-size: .82rem; font-weight: 640; background: var(--color-violet-50); color: var(--color-violet-800); }
  .mk-badge .ico { width: .85rem; height: .85rem; }
  .mk-badge--ok { background: #DCFCE7; color: #166534; }
  .mk-badge--ok::before { content: ""; width: .45rem; height: .45rem; border-radius: var(--radius-atom); background: #22C55E; }
  .mk-badge--off { background: var(--color-cream-200); color: var(--color-ink-500); }
  .mk-figures { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  @media (min-width: 640px) { .mk-figures { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
  .mk-figures > div { padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 4px 0 var(--color-cream-300); }
  .mk-figures dt { font-size: .8rem; font-weight: 600; color: var(--color-ink-500); }
  .mk-figures dd { margin-top: .2rem; font-weight: 760; font-size: 1.75rem; letter-spacing: -.03em; color: var(--color-ink-900); white-space: nowrap; }
  .mk-figures dd + dd { margin-top: .1rem; font-weight: 500; font-size: .78rem; letter-spacing: 0; color: var(--color-ink-500); white-space: normal; }
  .mk-h1-name { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.3rem); }
  .mk-h1-name + .t-lead { margin-top: .35rem; }
  .mk-bio { margin-top: .75rem; white-space: normal; }
  .mk-bio p + p { margin-top: .85rem; }
  .mk-block-title { margin-top: 2.25rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em; color: var(--color-ink-900); }
  .mk-services { margin-top: .75rem; display: grid; gap: .45rem; }
  .mk-services li { display: flex; align-items: center; gap: .55rem; color: var(--color-ink-700); }
  .mk-services li::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: var(--radius-atom); background: var(--color-brand); }
  .mk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; color: var(--color-ink-500); }
  .mk-crumbs a:hover { color: var(--color-brand); }

  /* ── Movimiento ───────────────────────────────────────────────
     La cabecera entra con CSS (legible antes de que llegue GSAP); lo de más
     abajo lo revela el controlador market--reveal al hacer scroll. */
  @media (prefers-reduced-motion: no-preference) {
    .mk-in-1, .mk-in-2, .mk-in-3, .mk-in-4 { animation: mk-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
    .mk-in-2 { animation-delay: .07s; }
    .mk-in-3 { animation-delay: .14s; }
    .mk-in-4 { animation-delay: .21s; }
    .mk-done-mark { animation: mk-pop .6s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
    @keyframes mk-rise { from { opacity: 0; transform: translateY(12px); } }
    @keyframes mk-pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
  }
}