/* ============================================================ AppClub · /blog — hoja de estilo Mismo lenguaje que la portada y /demo: papel de invernadero, tinta verde y los tres verdes de la marca. Tipos: Bricolage Grotesque (titulares), Instrument Sans (texto), Spline Sans Mono (rótulos y metadatos). Pero esto NO es la portada: es una superficie de lectura larga. Lo que manda aquí es la columna de texto. Por eso: · Una sola columna de ~66 caracteres, centrada, con el índice flotando fuera del raíl a partir de 1100px. Ni bento, ni rejilla de tarjetas iguales, ni tres cajitas de métricas. · La jerarquía la dan el ESPACIO y el PESO, no los recuadros. Los

respiran 3 líneas por arriba y llevan su número en mono: se puede recorrer el post en diagonal sin leerlo. · El color aparece cuatro veces por página como mucho, y siempre significa algo (verde = marca y foco; ámbar = ojo; azul = dato). Nada de un chip de color por tarjeta. · Tema claro y oscuro. Quien lee un artículo de 2.000 palabras de noche tiene derecho a que no le queme la pantalla. Prefijo bp- (blog post) en todo, para no chocar con lp- de la portada ni con las clases de la app. ============================================================ */ :root { --paper: #f4f8f0; --paper-2: #eaf2e4; --surface: #ffffff; --ink: #16241d; --ink-2: #46584e; --ink-3: #75857b; --line: #d8e2d2; --line-2: #c3d2ba; --marca: #10795c; --marca-claro: #7ad693; --ambar: #b47b24; --azul: #2f6fe0; --display: 'Bricolage Grotesque', 'Instrument Sans', sans-serif; --body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace; --sh-sm: 0 1px 2px rgba(22, 36, 29, .05), 0 6px 16px -10px rgba(22, 36, 29, .18); --sh-md: 0 1px 2px rgba(22, 36, 29, .05), 0 16px 38px -18px rgba(22, 36, 29, .28); /* Lo que se apoya SOBRE el verde de marca, y el botón macizo. Son los dos sitios donde el color no se aclara al pasar a oscuro: se invierte. Como tokens, las reglas que los usan valen para los dos temas sin duplicarse. */ --sobre-marca: #ffffff; --boton-fg: var(--paper); --boton-bg: var(--ink); --boton-fg-hover: #ffffff; --boton-bg-hover: var(--marca); --shell: 1180px; --gutter: clamp(20px, 5vw, 56px); --col: 66ch; /* la medida de lectura; todo lo demás orbita alrededor */ --indice: 200px; /* ancho del índice lateral */ --calle: clamp(36px, 5vw, 76px); /* separación entre el índice y el texto */ } /* ---------- Tema oscuro ---------- Se declara DOS VECES, y no es un descuido: · el bloque de @media es para quien llega con el sistema en oscuro y NO ha tocado el interruptor (y también para quien tenga el JavaScript desactivado, que entonces es la única regla que actúa); · el bloque de [data-modo="oscuro"] es para quien lo ha elegido a mano, tenga el sistema como lo tenga. El `:not([data-modo])` del primero es lo que hace que elegir CLARO gane con el sistema en oscuro. Con data-theme solo no se podía distinguir: el tema claro es la AUSENCIA de atributo, así que «claro elegido» y «nada elegido» eran el mismo estado. Por eso blog.js escribe siempre data-modo con el modo ya resuelto. Y no se usa light-dark(), que ahorraría la duplicación, porque en un navegador que no la soporte los tokens quedan inválidos y la página sale sin colores: en una página de captación eso no se arriesga. Si tocas un color, tócalo en los dos sitios. */ :root[data-modo="oscuro"] { --paper: #0f1713; --paper-2: #131d17; --surface: #16211b; --ink: #e9f4ec; --ink-2: #a8bcaf; --ink-3: #7f9388; --line: #26362d; --line-2: #32463a; --marca: #5fc98a; --marca-claro: #9ee5b6; --ambar: #d9a44e; --azul: #7aa8f5; --sh-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -10px rgba(0, 0, 0, .55); --sh-md: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 38px -18px rgba(0, 0, 0, .7); --sobre-marca: #0f1713; --boton-fg: #0f1713; --boton-bg: var(--marca); --boton-fg-hover: #0f1713; --boton-bg-hover: var(--marca-claro); } @media (prefers-color-scheme: dark) { :root:not([data-modo]) { --paper: #0f1713; --paper-2: #131d17; --surface: #16211b; --ink: #e9f4ec; --ink-2: #a8bcaf; --ink-3: #7f9388; --line: #26362d; --line-2: #32463a; --marca: #5fc98a; --marca-claro: #9ee5b6; --ambar: #d9a44e; --azul: #7aa8f5; --sh-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -10px rgba(0, 0, 0, .55); --sh-md: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 38px -18px rgba(0, 0, 0, .7); --sobre-marca: #0f1713; --boton-fg: #0f1713; --boton-bg: var(--marca); --boton-fg-hover: #0f1713; --boton-bg-hover: var(--marca-claro); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: color-mix(in srgb, var(--marca) 30%, transparent); } :where(a, button, summary, input):focus-visible { outline: 2.5px solid var(--marca); outline-offset: 3px; border-radius: 4px; } /* Salto directo al contenido: en un artículo largo, tabular por la cabecera y el índice antes de llegar al texto es una pérdida de tiempo real. */ .bp-saltar { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 600; } .bp-saltar:focus { left: 0; } /* ---------- Raíl común ---------- */ .bp-shell { max-width: var(--shell); width: 100%; margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Cabecera ---------- Flota sobre el papel, sin barra ni cristal, igual que en /demo. Se queda pegada arriba porque en un texto de diez minutos la salida tiene que estar siempre a mano. */ .bp-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .bp-top.bp-top-pegada { border-bottom-color: var(--line); } .bp-top-in { display: flex; align-items: center; gap: 16px; min-height: 62px; } .bp-marca { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 640; letter-spacing: -.02em; } .bp-marca svg { display: block; } .bp-marca-sub { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: .02em; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line-2); } .bp-top-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; } .bp-top-nav a { font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 999px; } .bp-top-nav a:hover { background: var(--paper-2); color: var(--ink); } /* Interruptor de tema. Mismo objeto que en la portada (.lp-tema): un círculo a trazo con el sol o la luna. Se dibuja el DESTINO, no el estado actual —en claro se ve la luna, porque es lo que vas a obtener al pulsar—, que es la convención que menos confunde. Sobrevive en móvil aunque los enlaces de texto se escondan: en una página de lectura larga es de lo más útil que hay en la cabecera. */ .bp-modo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; color: var(--ink-2); background: transparent; cursor: pointer; border: 1px solid var(--line-2); border-radius: 50%; transition: color .15s ease, border-color .15s ease, transform .15s ease; } .bp-modo:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); } .bp-modo svg { display: block; } @media (prefers-reduced-motion: no-preference) { .bp-modo svg { animation: bp-modo-gira .32s cubic-bezier(.2, .7, .2, 1); } } @keyframes bp-modo-gira { from { opacity: 0; transform: rotate(-35deg) scale(.8); } to { opacity: 1; transform: none; } } /* Rótulo solo para lectores de pantalla (el botón no lleva texto visible). */ .bp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .bp-cta-top { font-size: 13.5px; font-weight: 600; color: var(--ink) !important; padding: 8px 15px !important; border: 1.5px solid var(--ink); border-radius: 999px; transition: background .15s ease, color .15s ease, transform .15s ease; } .bp-cta-top:hover { background: var(--ink); color: var(--paper) !important; transform: translateY(-1px); } /* Barra de avance de lectura: 2px de verde bajo la cabecera. Solo en el post. */ .bp-avance { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--marca); transform: scaleX(0); transform-origin: left center; } /* ---------- Migas ---------- */ .bp-migas { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bp-migas a { color: var(--ink-3); text-decoration: none; } .bp-migas a:hover { color: var(--marca); text-decoration: underline; } .bp-migas span[aria-hidden] { color: var(--line-2); } /* ============================================================ ÍNDICE · /blog ============================================================ */ /* --- Portada del blog: un titular grande y nada más. Sin hero de tres columnas ni tarjetas de reclamo. --- */ .bp-portada { padding: clamp(38px, 7vh, 76px) 0 clamp(28px, 5vh, 52px); } .bp-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; } .bp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--marca); flex: 0 0 auto; } .bp-portada h1 { font-family: var(--display); font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin: 0 0 18px; max-width: 17ch; } .bp-portada h1 em { font-style: normal; color: var(--marca); } .bp-portada-sub { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0; } /* --- Filtro por tema: píldoras de mono. Se mantienen todas las entradas en el HTML (el buscador las ve); el filtro solo esconde. --- */ .bp-temas { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 clamp(26px, 4vh, 42px); border-bottom: 1px solid var(--line); } /* Son de verdad, no