/* Portal de labs.blackwoodcollections.com: puerta de acceso y tablero de tarjetas.
   Lleva la marca de la web nueva de Blackwood (la que bajamos de Figma): azul #0060FF,
   negro #0A0A0F, crema #F5F5F0, Outfit en titulares, DM Sans en cuerpo y Space Mono en
   los rótulos técnicos. La estructura (cabecera, buscador, filtros y tarjeta con fecha
   y autor) es la de los laboratorios hermanos de OH WOW! y Land of Nomads. */

:root {
  --bg: #F5F5F0;
  --surface: #FFFFFF;
  --panel: #E8E8E1;
  --chip: #ECECE6;
  --line: rgba(10, 10, 15, 0.10);
  --btn-line: rgba(10, 10, 15, 0.22);
  --text: #0A0A0F;
  --text-muted: #45454F;
  --text-soft: #62626E;
  --brand: #0060FF;
  --brand-fill: #0060FF;
  --brand-fill-strong: #0050DD;
  --brand-contrast: #FFFFFF;
  --veil: rgba(10, 10, 15, 0.74);
  --sh-1: 0 1px 2px rgba(10, 10, 15, 0.05), 0 8px 28px rgba(10, 10, 15, 0.07);
  --r-lg: 20px;
  --r-pill: 999px;
  --font-display: "Outfit", "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 48px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A0A0F;
  --surface: #141419;
  --panel: #23232C;
  --chip: #23232C;
  --line: rgba(255, 255, 255, 0.08);
  --btn-line: rgba(255, 255, 255, 0.24);
  --text: #F0F0F5;
  --text-muted: #B9B9C6;
  --text-soft: #9393A3;
  --brand: #5C9DFF;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
img { max-width: 100%; }
a { color: inherit; }

/* ---- Marca: isotipo en su cuadrado azul + logotipo, como en la cabecera de la web ---- */
.bw-marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.bw-marca__iso {
  width: 36px; height: 36px; border-radius: 12px; background: #0060FF;
  display: grid; place-items: center; flex: 0 0 auto;
}
.bw-marca__iso img { height: 16px; width: auto; display: block; }
.bw-marca__logo { height: 16px; width: auto; display: block; }
.bw-marca__logo--oscuro { display: none; }
:root[data-theme="dark"] .bw-marca__logo--claro { display: none; }
:root[data-theme="dark"] .bw-marca__logo--oscuro { display: block; }

.kicker {
  font: 700 12px/1.2 var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 18px;
}
/* La palabra resaltada en bloque azul es la firma tipográfica de la web de Blackwood. */
.pill {
  display: inline-block; background: #0060FF; color: #FFFFFF;
  border-radius: 16px; padding: 0 .28em .04em; line-height: 1.12;
}

/* ---- Cabecera ---- */
.hub-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.hub-top__home { display: flex; text-decoration: none; }
.hub-top__sep { width: 1px; height: 22px; background: var(--btn-line); }
.hub-top__t { font: 700 12px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.hub-top__acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---- Botones: todos rellenos (ninguno fantasma) y en píldora, como los de la web ---- */
.hub-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--btn-line); cursor: pointer; text-decoration: none;
  font: 500 14px/1 var(--font-body);
  padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--panel); color: var(--text);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hub-b:hover { border-color: var(--brand); color: var(--brand); }
.hub-b:focus-visible, .chip-f:focus-visible, .chip-o:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hub-b svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hub-b--acc { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-contrast); }
.hub-b--acc:hover { background: var(--brand-fill-strong); border-color: var(--brand-fill-strong); color: var(--brand-contrast); }
#tema .ico-sol { display: none; }
:root[data-theme="dark"] #tema .ico-sol { display: block; }
:root[data-theme="dark"] #tema .ico-luna { display: none; }

/* ---- Portada ---- */
.hub { width: 100%; max-width: 1536px; margin-inline: auto; padding: clamp(32px, 5vw, 72px) var(--pad) 56px; flex: 1 0 auto; }
.hub-hero { margin-bottom: clamp(24px, 3vw, 40px); }
.hub-hero h1 {
  font: 400 clamp(36px, 5.2vw, 68px)/1 var(--font-display); letter-spacing: -0.04em;
  margin: 0 0 20px; max-width: 18ch;
}
.hub-hero__lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--text-muted); max-width: 62ch; margin: 0; }

.hub-tools {
  position: sticky; top: var(--hub-top-h, 65px); z-index: 32;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 12px 0 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
}
.hub-q {
  flex: 1 1 340px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--btn-line);
  border-radius: var(--r-pill); padding: 0 20px;
}
.hub-q svg { width: 18px; height: 18px; color: var(--brand); flex: 0 0 auto; }
.hub-q input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 400 15px/1.4 var(--font-body); color: var(--text); padding: 14px 0;
}
.hub-q input::placeholder { color: var(--text-soft); }
.hub-q:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.hub-n { font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }

.hub-filtros {
  position: sticky; top: calc(var(--hub-top-h, 65px) + var(--hub-tools-h, 68px)); z-index: 30;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 0 14px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
}
.hub-filtros::-webkit-scrollbar { display: none; }
.chip-f, .chip-o {
  flex: 0 0 auto; cursor: pointer;
  font: 500 13px/1 var(--font-body);
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); border: 1px solid var(--btn-line);
}
.chip-f:hover, .chip-o:hover { border-color: var(--brand); color: var(--brand); }
.chip-f.on, .chip-o.on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-contrast); }
.chip-f b { font-weight: 700; opacity: .75; margin-left: 4px; }
.hub-orden { margin-left: auto; display: flex; gap: 6px; padding-left: 12px; }

.hub-grupo { padding-top: 26px; }
.hub-grupo[hidden] { display: none; }
.hub-grupo__t { font: 700 12px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brand); margin: 0 0 16px; }
.hub-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- Tarjeta de pieza ----
   Sin borde: la imagen va a sangre arriba y hay aire entre la imagen y el título.
   La fecha y el autor van encima de la foto, en esquinas opuestas. */
.w {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.w[hidden] { display: none; }
.w__img {
  position: relative; display: block;
  aspect-ratio: 16 / 9; width: 100%; min-height: 0; flex: 0 0 auto; overflow: hidden;
  background: #0A0A0F;
}
.w__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.w:hover .w__img img { transform: scale(1.04); }
.w__fecha, .w__autor {
  position: absolute; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-body); letter-spacing: .01em;
  padding: 8px 12px; border-radius: var(--r-pill);
}
/* Velo oscuro fijo: va encima de una foto, que no cambia con el tema, así que la
   pastilla tampoco. */
.w__fecha { left: 12px; background: var(--veil); color: #FFFFFF; backdrop-filter: blur(6px); }
.w__fecha svg { width: 13px; height: 13px; opacity: .9; }
.w__autor { right: 12px; background: #0060FF; color: #FFFFFF; }
.w__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; flex: 1 1 auto; }
.w__t { font: 400 22px/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.w__d { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.w__q { font-size: 13px; line-height: 1.45; color: var(--text-soft); margin: 0; }
.w__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.w__tag { font: 500 12px/1 var(--font-body); color: var(--text); background: var(--chip); border-radius: var(--r-pill); padding: 7px 11px; }
.w__foot { margin-top: auto; padding-top: 12px; }
.w__foot .hub-b { width: 100%; padding: 13px 16px; font-size: 15px; }

.hub-vacio { font-size: 16px; color: var(--text-muted); padding: 40px 0; }
.hub-vacio[hidden] { display: none; }

/* ---- Pie ---- */
.hub-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px var(--pad); border-top: 1px solid var(--line);
  max-width: 1536px; width: 100%; margin: 0 auto;
}
.hub-pie p { margin: 0; font-size: 13px; color: var(--text-soft); }

/* ---- Puerta de acceso ---- */
.acceso-pagina { background: #0A0A0F; }
.acceso {
  position: relative; overflow: hidden; flex: 1;
  display: grid; place-items: center; padding: 48px 16px;
}
.acceso__luz {
  position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: #0060FF; opacity: .22; filter: blur(170px);
  top: -180px; left: -120px; pointer-events: none;
}
.acceso__caja {
  position: relative; width: 100%; max-width: 440px;
  background: var(--surface); color: var(--text);
  border-radius: 28px; padding: 36px 32px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: grid; gap: 16px;
}
.acceso__marca { margin-bottom: 10px; }
.acceso__caja .kicker { margin: 0; font-size: 11px; }
.acceso__caja h1 { font: 400 40px/1.02 var(--font-display); letter-spacing: -0.04em; margin: 0; }
.acceso__lead { margin: 0; font-size: 15px; color: var(--text-muted); }
.acceso__mal { margin: 0; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #B42318; font-size: 14px; font-weight: 500; }
.campo { display: grid; gap: 6px; }
.campo label { font: 700 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); }
.campo input {
  width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--btn-line); border-radius: 14px; padding: 13px 16px;
}
.campo input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.acceso__entrar { width: 100%; padding: 15px 18px; font-size: 16px; margin-top: 6px; }

/* El ojo de la contraseña: todo escrito con la caja delante y con valores explícitos,
   para que no herede el estilo del botón de entrar (fallo visto en Land of Nomads). */
.ojo-caja { position: relative; display: block; }
.ojo-caja > input { padding-right: 50px; }
.ojo-caja .ojo-clave {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 36px; min-width: 36px; max-width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: none; box-shadow: none; cursor: pointer; border-radius: 50%;
  color: var(--text-soft); padding: 0; margin: 0; font: inherit;
}
.ojo-caja .ojo-clave:hover { background: var(--chip); color: var(--text); }
.ojo-caja .ojo-clave svg { width: 18px; height: 18px; display: block; }
.ojo-caja .ojo-clave .ojo-abierto { display: none; }
.ojo-caja .ojo-clave.viendo .ojo-abierto { display: block; }
.ojo-caja .ojo-clave.viendo .ojo-cerrado { display: none; }

@media (max-width: 640px) {
  .hub-top { gap: 10px; padding-block: 12px; }
  .hub-top .bw-marca__logo { display: none !important; }
  .hub-top__acts .hub-b span { display: none; }
  .hub-orden { margin-left: 0; }
  .acceso__caja { padding: 28px 22px 24px; }
  .acceso__caja h1 { font-size: 34px; }
}

/* CURSOR GRANDE · fragmento canonico de la casa
   ---------------------------------------------------------------------------
   Dictado por el CEO el 2026-09-03: «en todo lo que se monte en labs, aumenta
   el tamano del cursor, se me pierde siempre».

   QUE HACE. Sustituye la flecha del sistema (unos 20 px de dibujo dentro de un
   cuadro de 32) por una de 44 px con contorno oscuro, y la mano de los
   elementos que se pulsan por otra del mismo tamano. El contorno es lo que
   hace que se vea igual sobre fondo claro y sobre fondo oscuro, que es donde
   se perdia.

   COMO SE USA. Se pega tal cual al final de la hoja de estilos de la pieza, o
   se enlaza si la pieza carga estilos de una direccion compartida. No depende
   de ninguna variable de marca, asi que funciona en cualquier tablero.

   POR QUE LLEVA `auto` Y `pointer` DETRAS DE LA COMA. Es la red de seguridad
   del navegador: si por lo que sea no puede cargar el dibujo, usa el cursor
   normal en vez de dejar la pagina sin cursor ninguno.

   LO QUE NO SE TOCA. El cursor de escribir dentro de un campo de texto, que
   sigue siendo el del sistema: ahi el tamano no estorba y cambiarlo despista.

   Los dos dibujos van dentro de la propia hoja (no son archivos aparte) para
   que la pieza siga funcionando aunque se copie a otro servidor.            */

:root {
  --cursor-flecha:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.2 19.3 13.1l-6.5.4 3.4 6.7-3.1 1.6-3.4-6.7-4.7 4.4z' fill='%23ffffff' stroke='%23141414' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2;
  --cursor-mano:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 2.2c.9 0 1.6.7 1.6 1.6v6.1h.6V5.1c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v4.8h.6V6.7c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v7.6c0 3.9-2.4 6.6-6.1 6.6-2.4 0-4.1-1-5.3-3L4.4 13c-.5-.8-.2-1.8.6-2.3.8-.5 1.8-.2 2.3.6l1.6 2.4V3.8c0-.9.7-1.6 1.6-1.6z' fill='%23ffffff' stroke='%23141414' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3;
}

/* Los dos van marcados como obligatorios A PROPOSITO. Casi todas las piezas
   ya traen su propio `cursor: pointer` escrito con mas peso (por ejemplo
   `.barra button`), y sin la marca esas reglas ganarian y el cursor volveria
   al pequeno justo encima de los botones, que es donde mas se busca. */
html, body { cursor: var(--cursor-flecha), auto !important; }

a, button, summary, label[for], select, [role="button"], [role="tab"], [role="link"],
[data-ir], [data-paso], [data-video], [onclick], .clic, .cta, .btn,
input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
  cursor: var(--cursor-mano), pointer !important;
}

/* En papel no hay cursor: se apaga para que ningun motor de impresion intente
   resolver las imagenes al generar el PDF. */
@media print {
  html, body, a, button { cursor: auto; }
}