/* motionprompts · el marco fuera de la landing (barra, hoja del menú y pie).
 *
 * El HTML lo genera scripts/lib/marco.mjs y el comportamiento es /marco.js. Es la barra y el pie
 * de la landing (src/landing/landing.css) con nombres propios (mk-…): estas hojas conviven con las
 * del catálogo (src/shell.css) y las de las fichas (/component/detail.css), que tienen sus propios
 * .cell, .btn y tokens. Por eso los tokens del marco se declaran en sus propios elementos y no en
 * :root, salvo el alto de la barra, que necesita el <body>.
 *
 * Fuentes OFL servidas desde /fonts/ (las mismas que la landing empaqueta con Vite). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Funnel Display Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url("/fonts/funnel-display-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root { --mk-h: 52px; }
@media (min-width: 768px) { :root { --mk-h: 56px; } }

html { scroll-padding-top: var(--mk-h); }
/* Hueco para la barra fija. Con :has() desde el primer pintado; la clase la pone /marco.js para los
   navegadores que no lo entienden. */
body:has(> .mk-barra), body.con-marco { padding-top: var(--mk-h); }

.mk-salto, .mk-barra, .mk-hoja, .mk-pie {
  --mk-paper: #ffffff;
  --mk-paper-2: #f4f4f3;
  --mk-line: #e6e6e6;
  --mk-ink: #18181a;
  --mk-ink-2: #3a3a3e;
  --mk-muted: #6f6f74;
  --mk-faint: #b3b3b3;
  --mk-accent: #e0489a;
  --mk-r: 8px;
  --mk-pad: 20px;
  --mk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mk-text: "Inter Variable", Inter, -apple-system, system-ui, "SF Pro Text", sans-serif;
  --mk-display: "Funnel Display Variable", "Inter Variable", system-ui, sans-serif;
  --mk-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--mk-text);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
@media (min-width: 768px) { .mk-barra, .mk-hoja, .mk-pie { --mk-pad: 28px; } }
@media (min-width: 1280px) { .mk-barra, .mk-hoja, .mk-pie { --mk-pad: 36px; } }
.mk-barra *, .mk-hoja *, .mk-pie * { box-sizing: border-box; }
.mk-barra a, .mk-hoja a, .mk-pie a { text-decoration: none; }
/* Las hojas de las fichas tiñen de acento todo a:hover; en el marco manda su propio color. */
:is(.mk-barra, .mk-hoja, .mk-pie) a:hover { color: inherit; }
.mk-barra button, .mk-hoja button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; margin: 0; }
.mk-ico { width: 1em; height: 1em; flex: none; display: block; }

/* estado del plan (public/premium.js pinta html[data-plan][data-auth]) */
html[data-plan="unlimited"] .mk-barra .when-free,
html[data-plan="fullstack"] .mk-barra .when-free,
html[data-auth="user"] :is(.mk-barra, .mk-hoja, .mk-pie) .when-anon,
html:not([data-auth="user"]) :is(.mk-barra, .mk-hoja, .mk-pie) .when-user { display: none !important; }

/* ═══════════════ salto al contenido ═══════════════ */
.mk-salto {
  position: fixed;
  left: 12px; top: 10px;
  z-index: 80;
  padding: 10px 14px;
  border-radius: var(--mk-r);
  background: var(--mk-ink);
  color: var(--mk-paper);
  font-size: 13px;
  transform: translateY(-160%);
  transition: transform 0.2s var(--mk-ease);
}
.mk-salto:focus { transform: none; }

/* ═══════════════ barra ═══════════════ */
.mk-barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--mk-h);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--mk-ink);
  font-size: 15px;
  line-height: 1.55;
  transition: box-shadow 0.25s;
}
.mk-barra.is-scrolled { box-shadow: 0 1px 0 var(--mk-line); }
.mk-barra :focus-visible, .mk-hoja :focus-visible, .mk-pie :focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 4px; }

.mk-in {
  max-width: 1760px;
  height: 100%;
  margin: 0 auto;
  padding: 0 calc(var(--mk-pad) + 1px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.mk-marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--mk-ink);
}
.mk-marca img { width: 24px; height: auto; display: block; }

.mk-enlaces { display: none; justify-self: center; gap: 4px; }
.mk-enlaces a {
  position: relative;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 450;
  color: var(--mk-ink-2);
  border-radius: 6px;
  transition: color 0.2s, background-color 0.2s;
}
.mk-enlaces a:hover { color: var(--mk-ink); background: var(--mk-paper-2); }
.mk-enlaces a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--mk-accent);
  transform: scaleX(0);
  transition: transform 0.3s var(--mk-ease);
}
.mk-enlaces a[aria-current="page"] { color: var(--mk-ink); }
.mk-enlaces a[aria-current="page"]::after { transform: scaleX(1); }

.mk-fin { display: flex; align-items: center; gap: 10px; justify-self: end; }

.mk-idioma { display: inline-flex; gap: 2px; }
.mk-idioma .lang-opt {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: var(--mk-mono);
  font-size: 12px;
  color: var(--mk-muted);
  cursor: pointer;
}
.mk-idioma .lang-opt:hover,
.mk-idioma .lang-opt.active { color: var(--mk-ink); background: var(--mk-paper-2); }
.mk-fin > .mk-idioma { display: none; }

.mk-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 450;
  color: var(--mk-ink-2);
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
.mk-cuenta .mk-ico { font-size: 17px; }
.mk-cuenta:hover { color: var(--mk-ink); background: var(--mk-paper-2); }

/* Desbloquear premium: el botón negro con trama de la landing, en tamaño s. */
.mk-desbloquear {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--mk-r);
  background: var(--mk-ink);
  color: var(--mk-paper);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.15s var(--mk-ease), background-color 0.2s;
}
.mk-desbloquear::before {
  content: "";
  position: absolute;
  inset: 0 -14px 0 -14px;
  z-index: -1;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 7px);
  opacity: 0;
  transition: opacity 0.25s;
}
.mk-candado { position: relative; width: 16px; height: 16px; font-size: 16px; }
.mk-candado .mk-ico { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.2s; }
.mk-candado .mk-ico + .mk-ico { opacity: 0; }
.mk-flecha { display: inline-flex; font-size: 15px; transition: transform 0.25s var(--mk-ease); }
.mk-corto { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mk-desbloquear:hover::before { opacity: 1; animation: mk-trama 0.6s linear infinite; }
  .mk-desbloquear:hover .mk-candado .mk-ico:first-child { opacity: 0; }
  .mk-desbloquear:hover .mk-candado .mk-ico + .mk-ico { opacity: 1; }
  .mk-desbloquear:hover .mk-flecha { transform: translateX(3px); }
  .mk-desbloquear:hover { background: #000; color: var(--mk-paper); }
}
@keyframes mk-trama { to { transform: translateX(14px); } }
.mk-desbloquear:active { transform: scale(0.98); }

.mk-menu {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--mk-r);
  font-size: 20px;
  color: var(--mk-ink);
}
.mk-menu:hover { background: var(--mk-paper-2); }

@media (min-width: 1024px) {
  .mk-enlaces { display: flex; }
  .mk-fin > .mk-idioma { display: inline-flex; }
  .mk-menu { display: none; }
}
/* Entre 1024 y 1279 la barra va justa: la cuenta queda en icono. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-cuenta { width: 36px; padding: 0; justify-content: center; }
  .mk-cuenta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mk-largo { display: none; }
  .mk-corto { display: inline; }
}
/* Por debajo de 1024 la cuenta vive en la hoja; con sesión, cabe como icono. */
@media (max-width: 1023px) {
  .mk-cuenta { display: none; }
  html[data-auth="user"] .mk-cuenta { display: inline-flex; padding: 0; width: 44px; justify-content: center; }
  html[data-auth="user"] .mk-cuenta span { display: none !important; }
}
@media (max-width: 399px) {
  .mk-largo { display: none; }
  .mk-corto { display: inline; }
  .mk-flecha { display: none; }
  .mk-marca span { display: none; }
}

/* ═══════════════ hoja del menú (por debajo de 1024) ═══════════════ */
.mk-hoja {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--mk-paper);
  color: var(--mk-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--mk-h) + 24px) var(--mk-pad) 28px;
  overflow: auto;
}
.mk-hoja[hidden] { display: none; }
.mk-hoja-enlaces { display: grid; gap: 2px; }
.mk-hoja-enlaces a {
  font-family: var(--mk-display);
  font-size: 34px;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.15;
  padding: 6px 0;
  color: var(--mk-ink);
  animation: mk-entra 0.5s var(--mk-ease) both;
}
.mk-hoja-enlaces a:nth-child(2) { animation-delay: 0.04s; }
.mk-hoja-enlaces a:nth-child(3) { animation-delay: 0.08s; }
.mk-hoja-enlaces a:nth-child(4) { animation-delay: 0.12s; }
.mk-hoja-enlaces a:nth-child(5) { animation-delay: 0.16s; }
.mk-hoja-enlaces a:nth-child(6) { animation-delay: 0.2s; }
@keyframes mk-entra { from { opacity: 0; transform: translateY(40%); } }
.mk-hoja-sub { display: grid; gap: 4px; margin-top: auto; padding: 28px 0 20px; }
.mk-hoja-sub a { font-size: 16px; font-weight: 480; color: var(--mk-ink-2); padding: 8px 0; }
.mk-hoja-pie { display: flex; align-items: center; justify-content: space-between; }
.mk-cerrar {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--mk-r);
  background: var(--mk-paper-2) !important;
  font-size: 20px;
}

/* ═══════════════ pie ═══════════════
   La lámina de la landing: celdas blancas sobre el gris, separadas por 1px. */
.mk-pie {
  grid-column: 1 / -1; /* en las fichas el <body> es una rejilla de 12 */
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  padding: 0 1px 1px;
  background: var(--mk-line);
  color: var(--mk-ink);
  font-size: 13px;
  line-height: 1.55;
}
.mk-celda {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 26px var(--mk-pad);
  background: var(--mk-paper);
  border-radius: var(--mk-r);
}
.mk-sobre { grid-column: span 7; color: var(--mk-muted); }
.mk-sobre h2 {
  margin: 0 0 10px;
  font-family: var(--mk-display);
  font-size: 18px;
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mk-ink);
}
.mk-sobre p { margin: 0; max-width: 64ch; line-height: 1.6; }
.mk-sobre strong { color: var(--mk-ink); font-weight: 550; }
.mk-sitio { grid-column: span 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 4px 16px; }
.mk-categorias { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 4px 16px; }
.mk-pie.con-categorias .mk-sobre { grid-column: span 5; }
.mk-pie.con-categorias .mk-sitio { grid-column: span 4; grid-template-columns: 1fr 1fr; }
.mk-categorias[hidden] { display: none; }
.mk-pie.con-categorias:has(.mk-categorias[hidden]) .mk-sobre { grid-column: span 7; }
.mk-pie.con-categorias:has(.mk-categorias[hidden]) .mk-sitio { grid-column: span 5; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Las categorías las pinta shell.js: nombre y cuenta, la activa en negrita. */
.mk-categorias a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mk-categorias a .count { color: var(--mk-faint); font-variant-numeric: tabular-nums; }
.mk-categorias a.active { color: var(--mk-ink); font-weight: 600; }
.mk-sitio a, .mk-categorias a { color: var(--mk-muted); padding: 3px 0; transition: color 0.2s; }
.mk-sitio a:hover, .mk-categorias a:hover { color: var(--mk-ink); }
.mk-credito { grid-column: span 8; display: flex; align-items: center; gap: 10px; color: var(--mk-muted); }
.mk-credito a { color: var(--mk-ink); }
.mk-credito img { flex: none; display: block; }
.mk-copy { grid-column: span 2; color: var(--mk-muted); display: flex; align-items: center; }
.mk-idioma-pie { grid-column: span 2; display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding-top: 14px; padding-bottom: 14px; }
.mk-idioma-pie .lang-opt {
  min-width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-family: var(--mk-mono); font-size: 12px; color: var(--mk-muted);
}
.mk-idioma-pie .lang-opt.active, .mk-idioma-pie .lang-opt:hover { color: var(--mk-ink); background: var(--mk-paper-2); }

@media (max-width: 1023px) {
  .mk-sobre, .mk-pie.con-categorias .mk-sobre { grid-column: 1 / -1; }
  .mk-sitio, .mk-pie.con-categorias .mk-sitio, .mk-categorias { grid-column: span 6; }
  .mk-pie:not(.con-categorias) .mk-sitio { grid-column: 1 / -1; }
  .mk-credito { grid-column: 1 / -1; }
  .mk-copy, .mk-idioma-pie { grid-column: span 6; }
}
@media (max-width: 519px) {
  .mk-sitio, .mk-pie.con-categorias .mk-sitio, .mk-categorias { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

/* ═══════════════ aviso de cookies (lo inyecta /analytics.js) ═══════════════
   El de la landing: barra compacta abajo en escritorio, Aceptar en tinta. */
body.con-marco .mp-consent {
  left: 50%;
  right: auto;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: min(980px, calc(100vw - 28px));
  padding: 8px 8px 8px 16px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e6e6e6, 0 10px 30px rgba(24, 24, 26, 0.08);
  font-family: "Inter Variable", Inter, system-ui, sans-serif;
  font-size: 13px;
  color: #3a3a3e;
  transform: translate(-50%, 8px);
}
body.con-marco .mp-consent.mp-in { transform: translate(-50%, 0); }
body.con-marco .mp-consent p { margin: 0; }
body.con-marco .mp-consent-actions { flex: none; gap: 6px; }
body.con-marco .mp-consent button { border-radius: 6px; padding: 8px 14px; border: 0; background: #f4f4f3; color: #18181a; font-weight: 520; }
body.con-marco .mp-consent button.mp-yes { background: #18181a; color: #fff; }
@media (max-width: 767px) {
  body.con-marco .mp-consent { left: 10px; right: 10px; bottom: 10px; display: block; width: auto; max-width: none; padding: 12px 12px 10px 14px; transform: translateY(8px); }
  body.con-marco .mp-consent.mp-in { transform: none; }
  body.con-marco .mp-consent p { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-hoja-enlaces a { animation: none; }
  .mk-barra, .mk-enlaces a::after, .mk-desbloquear, .mk-flecha { transition: none; }
}