/* ============================================================ DYRECO · p-blog.css Hoja de UNA página: web/blog.html — el índice del blog. NOMBRES (comprobados contra §29 de estilos.css el 8-sep-2026 con el grep del propio registro, pasado sobre las doce hojas): .blogcab cabecera de la página → libre .blog la sección del índice → libre .nota una guía del listado → libre Se dejan expresamente libres para la hoja del ARTÍCULO (p-articulo.css, otro agente): `art`, `post`, `entrada`, `indice`, `sumario`, `autor`, `lectura` y `tema`. Si alguno de estos tres subiera al sistema, cambia de nombre y se apunta en §29. LO QUE SE REUTILIZA Y NO SE REINVENTA (estilos.css): .cont · .kicker · sec-cota (§34, transición de entrada, en la sección del índice) · .enlace-pendiente (§03) · [data-reveal] · .btn (solo en la cabecera y en el aviso de cookies). Desde el 8-sep-2026 la página ya NO usa `.otras`/`.odiv` (§35) ni `.h2`: el cliente retiró los dos bloques de cierre que había (§5). EL MECANISMO PROPIO DE ESTA PÁGINA — «el testigo que se desliza». El contrato del proyecto dice que cada pieza deslizante del sitio usa un mecanismo distinto. Aquí la pieza que se mueve es el FILTRO: una cinta de cinco casillas con un testigo amarillo —un paralelogramo con el corte de −30° de la marca, el mismo del `.btn::before`— que se DESLIZA de una casilla a otra al cambiar de división, y que en móvil gira 90° y se desliza en vertical. No lo mueve el JS: lo mueve el `:checked` de cinco radios nativos. No se parece a ninguno de los ocho mecanismos que ya existen (persiana §06, fichas §21, galería horizontal §22, panel vertical §23, pestañas por clip-path §24, marquee §11, raíl §33, cota §34). POR QUÉ RADIOS NATIVOS Y NO JS NI `:target`: · Funciona con el JS caído: no hay una línea de JavaScript en esta página aparte del `main.js` compartido, que aquí solo revela. · El ESTADO SE ANUNCIA. Un lector de pantalla dice «Ferretería, botón de opción, seleccionado, 2 de 5». Con `:target` el estado vive en la URL y no lo anuncia nadie, y con `aria-current` haría falta JS para moverlo. Las flechas del teclado recorren el grupo, que es el comportamiento nativo de un radiogroup. · SI `:has()` NO ESTÁ SOPORTADO el filtro no filtra: se ven las siete guías y la casilla marcada se sigue viendo marcada (eso va por `+`, no por `:has`). Degrada a «índice completo», que es un estado correcto de la página, no a una página rota. ⚠️ El precio: el estado no es enlazable ni queda en el historial. Un `/blog?division=ferreteria` es trabajo de Odoo, no de la maqueta. ============================================================ */ /* ------------------------------------------------------------ 0 · Variables de la página ------------------------------------------------------------ --nota-col1 es la columna del número, y está en px con clamp porque sostiene un número de dos cifras en display: por debajo de 44 px el «07» se pega al rótulo de división. --nota-hueco es la calle entre el bloque de titular y el de lectura. Es el mismo `clamp(32px, 6vw, 120px)` de `.cabecera-sec--split`, a propósito: las dos rejillas de la página tienen que respirar igual. */ .blog { --nota-col1: clamp(44px, 4vw, 72px); --nota-hueco: clamp(28px, 6vw, 120px); --blog-linea: 1px solid var(--linea); } /* ============================================================ 1 · CABECERA DE PÁGINA — UNA BANDA, NO UN PANEL ------------------------------------------------------------ La cabecera del sitio es `cab--over` (flota sobre el contenido), así que el relleno superior paga su alto ADEMÁS del aire. Fondo carbón, sin foto: la biblioteca de `assets/img/` no tiene ni una imagen que ilustre un índice de guías, y una foto de tienda aquí diría «catálogo», que es justo lo que esta página no es. ⚠️ REHECHA EL 8-SEP-2026 PORQUE COSTABA UNA PANTALLA. Medido a 1440×900 con la versión apilada (kicker → H1 → entradilla → nota, uno debajo de otro): .blogcab ................ 823 px = 0,91 pantallas relleno superior ........ 198,4 px primera guía (.nota) .... empieza en el píxel 1.105 Es decir: una pantalla entera de scroll antes de ver UNA guía, en un índice cuyo único trabajo es enseñar guías. Y sobraba sitio: el H1 pintaba 681 px de los 1.360 de la caja y la mitad derecha estaba vacía. LA CUENTA DE LA VERSIÓN NUEVA, a 1440 (medida, no estimada): relleno superior ... 76 (--alto-cab) + 60 = 136 fila ............... 216 (manda la columna de texto, no la suma) relleno inferior ... 56 total .............. 408 px = 0,45 pantallas El alto ya no es la SUMA de las cuatro piezas sino el ALTO DE LA MÁS ALTA de las dos columnas, que es de donde salen los 400 px de ahorro. LA REJILLA ES LA DEL ÍNDICE, y eso es el argumento de diseño, no un detalle: `--cab-col1 / 7fr / 5fr` con el mismo canalón que `.nota__int`. El titular ocupa las dos primeras columnas y los párrafos caen en la TERCERA, exactamente encima de la columna de entradillas de las siete guías. La página queda con una sola costura vertical de arriba abajo: cabecera, ayuda del filtro y las siete entradillas empiezan todas en el mismo píxel (929 a 1440). ============================================================ */ .blogcab { position: relative; overflow: clip; /* Los dos valores de la rejilla, copiados de `.blog` A PROPÓSITO y con otro nombre: son bloques hermanos, no anidados, así que la cabecera no hereda las variables de la sección. Si se tocan las de `.blog` hay que tocar estas dos o la costura vertical deja de cuadrar. */ --cab-col1: clamp(44px, 4vw, 72px); --cab-hueco: clamp(28px, 6vw, 120px); /* 8,5vw → 4,2vw arriba y 6vw → 4vw abajo. A 1440: 198,4+86,4 = 284,8 px de relleno pasan a 136+57,6 = 193,6. Sigue habiendo aire bajo la cabecera fija (60 px limpios), que es lo que pedía el `cab--over`. */ padding-block: calc(var(--alto-cab) + clamp(32px, 4.2vw, 76px)) clamp(30px, 4vw, 72px); } .blogcab__int { position: relative; z-index: 1; display: grid; grid-template-columns: var(--cab-col1) minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--cab-hueco); align-items: start; } /* El titular se come la columna del número y la del titular de las guías: es lo que le da los 803 px que necesita para caber en DOS renglones. */ .blogcab__titular { position: relative; grid-column: 1 / 3; } /* La entradilla se apoya en el PIE de la fila, no en el techo: es una sola frase corta y arriba quedaba flotando al lado de un titular de dos renglones. Decisión de Juan, 9-sep-2026. En la rama apilada (@1080) esta caja es `display:contents` y la regla no llega: allí no hay dos columnas que alinear. */ .blogcab__texto { grid-column: 3; align-self: end; } /* --- El gráfico de la marca: los filetes en diagonal --------- ⚠️ SE MUDAN, Y NO POR CAPRICHO. Estaban pegados al borde DERECHO (`width: 320px`, `height: 88%`), que en la versión apilada era una columna vacía de 680 px. En la banda nueva ahí van los dos párrafos, y un filete de 1 px al 48 % cruzando por detrás del texto se lee como un tachón amarillo — el mismo defecto que p-legal.css ya documenta en `.lcab::after` y resolvió dejando el adorno solo donde no hay nada. Aquí no hay franja alta libre (la columna de texto empieza arriba del todo), así que el sitio libre es OTRO: el codo que queda bajo el titular, entre su última línea y el filo de la sección. El adorno cuelga del canalón —anclado al borde derecho de la columna del titular— y se corta contra el fondo de la banda por el `overflow: clip`. Medido a 1440: pinta entre x=549 y x=877 y la columna de texto empieza en 929, así que no toca una sola letra. Cinco filetes al mismo ángulo de siempre (−30°, el del wordmark y el de la diagonal del `.kicker`) y la misma escalera de opacidades. */ .blogcab__titular::after { content: ""; position: absolute; z-index: -1; /* Anclado al borde derecho de la columna del titular, que es el canalón: así el adorno crece hacia la IZQUIERDA, hacia el hueco, y nunca hacia la columna de texto. */ right: 0; /* ⚠️ ARRANCA 72 px POR ENCIMA DEL PIE DEL TITULAR, no debajo. Colgándolo entero del `100%` solo le quedaban 104 px de sitio antes del filo de la sección: los filetes salían como cuatro arañazos y encima el `overflow: clip` los cortaba a media opacidad contra la cota amarilla. Subiéndolo hasta el hueco que deja el segundo renglón del titular —«MOSTRADOR, POR ESCRITO» acaba en x=743 y el adorno empieza en x=642— tiene 187 px de largo y cabe entero con 12 px de aire hasta el filo. Lo que se cruza con la cola del titular son los DOS filetes más flojos (.08 y .05 de amarillo, 1 px): medido sobre el render, no se ven. */ top: calc(100% - clamp(50px, 5vw, 80px)); width: clamp(150px, 14vw, 220px); height: clamp(130px, 13vw, 190px); pointer-events: none; transform: skewX(-30deg); /* Las posiciones van en PORCENTAJE y no en píxeles: con `calc(100% - 232px)` dentro de una caja de 201 px el quinto filete caía fuera y sencillamente no se pintaba a 1440. En porcentaje los cinco entran a cualquier ancho, apretados contra el canalón y abriéndose hacia el hueco. */ background: linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .50) 32%, rgb(var(--am-rgb) / .50) 64%, transparent) 100% 0 / 1px 100% no-repeat, linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .26) 32%, rgb(var(--am-rgb) / .26) 64%, transparent) 84% 0 / 1px 100% no-repeat, linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .14) 32%, rgb(var(--am-rgb) / .14) 64%, transparent) 62% 0 / 1px 100% no-repeat, linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .08) 32%, rgb(var(--am-rgb) / .08) 64%, transparent) 32% 0 / 1px 100% no-repeat, linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .05) 32%, rgb(var(--am-rgb) / .05) 64%, transparent) 0% 0 / 1px 100% no-repeat; } /* Entre el H1 del hero de división (103 px a 1440, hecho para 100dvh) y el H2 corriente (57,6). Esta página no tiene hero: el titular es lo primero que hay, pero no tiene que gritar como si midiera una pantalla. El tamaño NO se ha tocado; lo que cambia es la caja. */ .blogcab__h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5.2vw, 5.2rem); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--texto); text-wrap: balance; /* ⚠️ ERA 19ch = 681 px Y OBLIGABA A TRES RENGLONES; ahora son DOS. Medido a 1440 con `Range.getClientRects()`: la tinta de este titular son 47 caracteres a 31,8 px cada uno = 1.495 px, así que en 681 px no cabía en dos y en los 803 px que da la columna doble sí — `balance` los reparte en 24 y 22 caracteres, y el renglón más largo pinta 763. El tope de 880 px es la red de seguridad de los anchos grandes: a 1920 la columna da 967 y el renglón más largo medido son 848. Va en px, no en `ch`: en esta tipografía la `ch` miente por arriba un 22 % y aquí lo que se está fijando es un NÚMERO DE RENGLONES. */ max-width: 880px; margin-bottom: 0; } /* ⚠️ LA MEDIDA DE LECTURA ESTÁ MEDIDA, NO ESTIMADA — Y VA EN PÍXELES. El contrato del proyecto es 66 caracteres por línea como máximo (_briefs/C-nave.md). La unidad `ch` de Public Sans es el ancho del «0» y su letra media es más estrecha, así que la `ch` MIENTE POR ARRIBA en un 22 %: `62ch` daban 76 caracteres aquí. Se usó `49ch`/`48ch`, que medían bien, pero seguían siendo una cifra que hay que traducir para saber qué dice. El 8-sep-2026 se pasan a PÍXELES MEDIDOS, contando línea a línea con un Range a 1920, 1440, 1280, 1024, 834, 620 y 390: bloque cuerpo ANTES (ch) AHORA (px) peor línea .blogcab__entrada 17-20px 49ch = 509,7-599,6 512 px 65 car. .blogcab__nota 14-15px 48ch = 411,1-440,5 436 px 63 car. .blog__ayuda 14-15px 46ch = 394,0-422,2 394 px 55 car. .nota__e 16-18px 47ch = 460,1-517,6 460 px 63 car. Cada cifra es el ancho al que el bloque YA se pintaba de 620 a 1440 px —o sea que en toda esa banda no cambia un píxel—, redondeado a lo que deja 66 caracteres con el cuerpo MÁS PEQUEÑO de su `clamp`, que es el caso que manda: con la letra grande de 1920 la misma caja mete menos caracteres, nunca más. Lo único que cambia respecto a `ch` es que por encima de ~1600 px la columna deja de crecer con la letra. */ .blogcab__entrada { font-size: clamp(1.0625rem, 1.2vw, 1.25rem); line-height: var(--lh-body); color: var(--texto); max-width: 512px; } .blogcab__nota { margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--fs-sm); line-height: 1.66; color: var(--apagado); max-width: 436px; } /* --- APILADO DE LA CABECERA --------------------------------- ⚠️ EL CORTE VA EN 1080 PX Y ESTÁ MEDIDO. La columna de texto es 5fr: a 1440 son 470 px (la entradilla cabe en 5 renglones), a 1080 son 345 y a 1024 baja a 324, donde la misma entradilla se va a OCHO renglones y la columna que tenía que ahorrar alto es la que lo gasta. Por debajo el titular se pone a ancho completo y los dos párrafos se reparten en 7fr/5fr debajo, que es la última repartición que aún deja la entradilla en cinco o seis renglones. */ @media (max-width: 1079.98px) { .blogcab__int { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .blogcab__titular { grid-column: 1 / -1; margin-bottom: clamp(22px, 2.6vw, 34px); } .blogcab__texto { grid-column: 1 / -1; display: contents; } .blogcab__entrada { grid-column: 1; } .blogcab__nota { grid-column: 2; margin-top: 0; } /* Colgando del titular a ancho completo, el adorno cae justo encima de la entradilla. Fuera: la diagonal ya la lleva el `.kicker`. */ .blogcab__titular::after { display: none; } } /* Por debajo de 760 —el mismo corte que el filtro— los dos párrafos ya no caben uno al lado del otro: la entradilla se quedaría en 37 caracteres. */ @media (max-width: 759.98px) { .blogcab__int { grid-template-columns: minmax(0, 1fr); } .blogcab__entrada, .blogcab__nota { grid-column: 1; } .blogcab__nota { margin-top: clamp(16px, 1.6vw, 24px); } } /* ============================================================ 2 · LA SECCIÓN DEL ÍNDICE ============================================================ */ .blog { padding-block: var(--sec-y); } /* Cabecera pequeña sobre el filtro. NO lleva otro `.h2` de 57 px: el titular de la página ya está arriba y dos display seguidos de ese tamaño se pelean. El encabezado real de la sección es este `

` vestido de kicker — es un encabezado de verdad en el árbol de accesibilidad, no un párrafo maquillado. */ .blog__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px clamp(24px, 3vw, 56px); margin-bottom: clamp(20px, 2vw, 30px); } .blog__cab .kicker { margin-bottom: 0; } .blog__ayuda { font-size: var(--fs-sm); line-height: 1.5; color: var(--apagado); /* 46ch pintaban 394,0 px a 1440 y 422,2 a 1920, y la peor línea medida eran 55 caracteres. Se fija en los 394 de 1440 —el ancho de referencia del proyecto, donde no cambia nada— y a 1920 la ayuda deja de ensancharse con la letra. Tope real: 55 car. de los 66. */ max-width: 394px; } /* --- 2.1 · EL FILTRO — cinta de cinco casillas --------------- Cinco radios nativos + cinco etiquetas. Los radios salen del flujo (`position: absolute`), así que la rejilla la forman solo las cinco etiquetas y el reparto en quintos es exacto: el testigo mide 20 % y se desplaza en múltiplos de su propio ancho. */ .blog__filtro { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); /* Solo el filete de ARRIBA. El de abajo lo pone el `border-top` de la primera fila visible del listado, que va pegado: declarándolo aquí también, la costura se veía como una línea doble de 2 px. Y como lo pone la fila, al filtrar sigue habiendo línea bajo el filtro sea cual sea la primera guía que quede en pie — y también en papel, donde el filtro no se imprime. */ border-top: var(--blog-linea); isolation: isolate; } /* El radio: fuera del flujo, sin tamaño y sin pintar. NO lleva `display:none` ni `visibility:hidden` — eso lo sacaría del orden de tabulación y del árbol de accesibilidad, que es justo lo que aquí hace el trabajo. El anillo de foco lo dibuja su etiqueta. */ .blog__r { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .blog__f { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 66px; /* objetivo táctil holgado */ padding: 13px clamp(10px, 1.15vw, 22px); border-left: var(--blog-linea); cursor: pointer; transition: background var(--dur-ui) var(--ease); } .blog__f:nth-of-type(1) { border-left: 0; } .blog__f:hover { background: rgb(var(--texto-rgb) / .03); } .blog__fn { font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); line-height: 1.1; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--texto); transition: color var(--dur-ui) var(--ease); } .blog__fc { font-size: var(--fs-micro); line-height: 1.1; color: var(--apagado); } .blog__f:hover .blog__fn, .blog__r:checked + .blog__f .blog__fn { color: var(--amarillo); } /* El anillo de foco global (§00) vive en `:focus-visible` y el radio no se ve: se traslada a la etiqueta, que es lo que sí se ve. */ .blog__r:focus-visible + .blog__f { outline: 2px solid var(--amarillo); outline-offset: -3px; } /* --- EL TESTIGO — la pieza que se desliza -------------------- Un quinto de ancho, con el corte diagonal de −30° del `.btn::before` (13 px de sangrado, el mismo valor: 11 px del botón + el 1 px de los separadores a cada lado, para que la punta no se coma la línea). Dos capas: el lavado amarillo al 8 % y el filete de 2 px al pie, que el clip-path corta también en diagonal. ⚠️ `--k` la fija el `:has()` de abajo. Si el navegador no soporta `:has()`, `--k` se queda en 0, el testigo se queda bajo «Todas» y no hay estado incoherente: sin `:has()` tampoco se filtra nada. */ .blog__testigo { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; width: 20%; pointer-events: none; background: linear-gradient(var(--amarillo), var(--amarillo)) 0 100% / 100% 2px no-repeat, rgb(var(--am-rgb) / .08); clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%); transform: translateX(calc(var(--k, 0) * 100%)); transition: transform 620ms var(--ease-suave); } .blog__filtro:has(#f-ferreteria:checked) { --k: 1; } .blog__filtro:has(#f-maquinaria:checked) { --k: 2; } .blog__filtro:has(#f-uniformidad:checked) { --k: 3; } .blog__filtro:has(#f-rotulacion:checked) { --k: 4; } /* --- 2.2 · EL FILTRADO --------------------------------------- Una regla por división. `display:none` y no `visibility`/`opacity`: la fila tiene que salir del flujo Y del árbol de accesibilidad, o el lector de pantalla sigue leyendo siete guías con cuatro escondidas. ⚠️ Las filas ocultas llevan `[data-reveal]`. main.js las observa y, pase lo que pase, a los 2.500 ms las enseña (§01 de estilos.css): una fila que vuelve de `display:none` nunca se queda en blanco. */ .blog__int:has(#f-ferreteria:checked) .nota:not(.nota--ferreteria) { display: none; } .blog__int:has(#f-maquinaria:checked) .nota:not(.nota--maquinaria) { display: none; } .blog__int:has(#f-uniformidad:checked) .nota:not(.nota--uniformidad) { display: none; } .blog__int:has(#f-rotulacion:checked) .nota:not(.nota--rotulacion) { display: none; } /* ============================================================ 3 · UNA GUÍA DEL ÍNDICE ------------------------------------------------------------ SIN FOTO, y es una decisión medida, no una renuncia. La biblioteca de `assets/img/` NO describe lo que hay dentro de cada fichero: se abrieron las 33 candidatas y solo DOS ilustran de verdad un artículo de este lote (fer-discos y fer-tornilleria). De andamio, de hormigonera, de calzado de seguridad y de tuerca no hay ninguna —`maq-hormigonera` es una pared de herramienta AEG—. Siete filas con dos fotos y cinco huecos se leen rotas, y una foto que desmiente al titular es peor que ninguna. Aquí manda la tipografía, que es lo que este sitio hace mejor. TRES ZONAS, en la rejilla de `.cabecera-sec--split` (7fr / 5fr) con una columna de número delante: · el número del índice, · el titular: división, título y la acción, · la lectura: entradilla y la marca de qué clase de texto es. ============================================================ */ .blog__lista { border-bottom: var(--blog-linea); } .nota { border-top: var(--blog-linea); transition: border-color 620ms var(--ease); /* 620 ms: lo que dura un borde en §26 */ } /* La regla de la fila se enciende: con el desplazamiento de 12 px de abajo, el conjunto se lee como una ficha que se saca del cajón por su guía. */ .nota:hover, .nota:focus-within { border-color: var(--amarillo); } .nota__int { display: grid; grid-template-columns: var(--nota-col1) minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--nota-hueco); align-items: start; padding-block: clamp(26px, 2.9vw, 44px); /* La microinteracción de la fila: se saca 12 px, como una ficha del cajón. La línea de 1 px NO se mueve —vive en `.nota`, no aquí—, así que lo que se desplaza es el contenido contra la regla, y se lee. */ transition: transform 320ms var(--ease); } .nota:hover .nota__int, .nota:focus-within .nota__int { transform: translateX(12px); } /* La fila prevista no se saca: no hay nada detrás que sacar. */ .nota--pendiente:hover .nota__int { transform: none; } /* Colocación EXPLÍCITA de las cuatro piezas. Se coloca en vez de dejar que la rejilla las ordene sola para poder mover la acción de la columna del titular (escritorio) al final de la fila (apilada) SIN escribirla dos veces en el HTML. */ .nota__n { grid-area: 1 / 1; } .nota__cuerpo { grid-area: 1 / 2; } /* ⚠️ LA FICHA ABARCA LAS DOS FILAS y no solo la primera. Con `1 / 3` a secas, la fila 1 medía lo que mide la entradilla —la pieza más alta de la fila— y la acción, que va en la fila 2, caía 90 px por debajo del titular con un agujero en medio. Repetido siete veces era el defecto más visible de la primera maqueta. Abarcando las dos, la fila 1 la miden el rótulo y el titular, la acción se pega debajo y la entradilla ocupa el alto total sin empujar nada. */ .nota__ficha { grid-area: 1 / 3 / span 2 / auto; position: relative; z-index: 1; } .nota__accion { grid-area: 2 / 2; } .nota__n { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.2; letter-spacing: var(--ls-kicker); color: var(--amarillo); padding-top: .18em; /* alinea con la línea del rótulo */ } .nota__div { font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); line-height: 1.2; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--amarillo); margin-bottom: clamp(10px, 1vw, 14px); } .nota__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2.05vw, 1.9rem); line-height: 1.08; letter-spacing: .012em; text-transform: uppercase; color: var(--texto); text-wrap: balance; } .nota__t a { color: inherit; transition: color var(--dur-ui) var(--ease); } /* El amarillo del titular lo dispara LA FILA, no el ancla. El ancla del titular se estira sobre toda la fila (`.nota--viva`), así que en un ratón real las dos cosas coinciden; pero con el foco de teclado, o sobre la media fila que el ancla no cubre en las previstas, solo la fila responde. Atándolo a la fila, la microinteracción es una y no dos. */ .nota--viva:hover .nota__t a, .nota--viva:focus-within .nota__t a, .nota__t a:hover { color: var(--amarillo); } /* La fila ENTERA es zona de clic, sin duplicar el enlace: el ancla del titular se estira sobre `.nota`. Solo en las guías que ya existen —una fila prevista no lleva ancla que estirar. */ .nota--viva { position: relative; } .nota--viva .nota__t a::after { content: ""; position: absolute; inset: 0; } /* La entradilla queda POR ENCIMA de esa capa (z-index en el bloque de colocación) y se sigue pudiendo seleccionar con el ratón, que es lo que se pierde con un enlace estirado si no se corrige. */ /* --- El titular de una guía todavía no publicada ------------- ⚠️ AJUSTE DEL `--apagado` DE §03, Y ESTÁ RAZONADO. En el pie, `.enlace-pendiente` va en `--apagado` porque son seis enlaces de 12-14 px y el color es lo único que los separa del resto de la columna; el propio §03 explica que el `--apagado` opaco es el SUELO de contraste al que se llegó, no la intención de diseño, y deja escrito que «la señal de "todavía no está" la llevan el SUBRAYADO PUNTEADO AMARILLO y el cursor, que no dependen del contraste». Aquí el elemento es un titular de 30 px y son SEIS de las siete filas: en `--apagado` el índice entero se leía apagado, como una lista de enlaces rotos, que es exactamente lo contrario de lo que esta página tiene que hacer. El titular vuelve a `--texto` (15,6:1) y la señal la llevan las otras tres cosas, que siguen intactas: el punteado amarillo de §03, el `cursor: default` de §03 y el rótulo PREVISTA de la columna de acción. La fila tampoco se saca del cajón al pasar por encima (`.nota--pendiente`), que es la cuarta señal. */ .nota__t .enlace-pendiente, .nota__t .enlace-pendiente:hover { color: var(--texto); } /* §03 pone el punteado a 4 px del texto, que es la distancia buena bajo un enlace de 14 px del pie. Bajo un titular de 30 px en condensada se pega a los rabos de las letras y se lee como un subrayado de corrector. A 9 px se lee como lo que es: una regla debajo del titular. */ .nota__t .enlace-pendiente { text-underline-offset: 9px; } /* La acción. Misma receta que `.odiv__ir` (§35) y que `.enlace-flecha` (§03): 44 px de alto de objetivo, la regla que crece al pasar. No es un enlace —lo es el titular—, así que va oculta al lector de pantalla. */ .nota__ir { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: clamp(2px, .5vw, 8px); font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--amarillo); transition: gap var(--dur-ui) var(--ease); } .nota__ir::after { content: ""; width: 26px; height: 1px; background: var(--amarillo); transition: width var(--dur-ui) var(--ease); } .nota:hover .nota__ir { gap: 18px; } .nota:hover .nota__ir::after { width: 42px; } /* La marca de la fila prevista: mismo sitio que la acción, sin promesa de clic y sin amarillo. */ .nota__prevista { display: inline-flex; align-items: center; min-height: 44px; margin-top: clamp(2px, .5vw, 8px); font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--apagado); } .nota__e { font-size: var(--fs-body); line-height: 1.62; color: var(--apagado); /* Misma cuenta que en la cabecera, y también en píxeles medidos desde el 8-sep-2026. Sin tope, la columna de 471 px de 1440 metía 67 caracteres en la línea más larga —uno por encima del contrato— y a 1920 la columna crece hasta 616 y se iría a 87. `47ch` pintaban 460,1 px de 620 a 1440 y 517,6 a 1920; se fijan los 460, que es el ancho al que estas siete entradillas YA se leían en toda esa banda (peor línea medida: 63 caracteres, con el cuerpo de 16 px, que es el caso que manda). */ max-width: 460px; text-wrap: pretty; } /* La señal de qué clase de texto es: no es una noticia, es una lectura técnica. Dos datos y un punto medio: el tipo de guía y la norma en la que se apoya, cuando hay una. */ .nota__marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: clamp(14px, 1.4vw, 20px); font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); line-height: 1.3; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--apagado); } .nota__ref { position: relative; padding-left: 20px; color: var(--texto); } /* El punto medio es la diagonal de la marca, no un separador tipográfico. */ .nota__ref::before { content: ""; position: absolute; left: 0; top: .48em; width: 10px; height: 1px; background: var(--amarillo); transform: skewX(-30deg); } /* ============================================================ 4 · APILADO ============================================================ */ /* --- Rejilla de la fila ------------------------------------- A 900 px la columna de lectura se queda en 5 de 12 de 852 px = 331, que son 43 caracteres: por debajo de eso la entradilla se parte en cinco líneas y deja de leerse como una entradilla. Se apila. El número se queda en su columna: es lo que da la lectura de índice. */ @media (max-width: 900px) { .nota__int { grid-template-columns: var(--nota-col1) minmax(0, 1fr); /* 14 px de fila dejaban el punteado del titular previsto rozando la primera línea de la entradilla (medido a 390: 14 px de hueco menos 9 de `text-underline-offset` = 5 px reales). */ gap: clamp(20px, 3vw, 28px) clamp(16px, 3vw, 28px); } /* ⚠️ TOPE DE MEDIDA DEL TITULAR, MEDIDO. Apilado, el titular tiene toda la fila para él: a 834 px «Tipos de andamio: cuál corresponde a cada obra y cuándo compensa comprarlo» se iba a UNA línea de 660 px y 74 caracteres —ocho por encima del contrato de 66 del proyecto—, mientras su entradilla se leía a 47ch justo debajo. Con 540 px son 60 caracteres como mucho. Va en px y no en `ch` a propósito: en toda esta banda (≤900) el `clamp` del cuerpo está pisando su SUELO de 20 px —el término `2.05vw` no adelanta al suelo hasta 975 px de ventana—, así que el tamaño no se mueve y el píxel es exacto. Por debajo de 620 la columna ya mide menos que el tope y la regla no hace nada. */ .nota__t { max-width: 540px; } /* Apilada, el orden de lectura es número → división y titular → entradilla → acción. La acción baja de la fila 2 a la fila 3 y no hace falta escribirla dos veces en el HTML. */ .nota__cuerpo { grid-area: 1 / 2; } .nota__ficha { grid-area: 2 / 2; } .nota__accion { grid-area: 3 / 2; } /* ⚠️ APILADA, EL ENLACE ESTIRADO PASA POR ENCIMA DE LA ENTRADILLA. En escritorio la entradilla va por encima de la capa de clic para que se pueda seleccionar con el ratón (ver el bloque de colocación). En un móvil la fila mide 385 px de alto y la entradilla se lleva la mitad: comprobado con `elementFromPoint`, un toque en el centro de la fila caía en `.nota__e` y no abría nada. Aquí el gesto de seleccionar texto con el dedo no existe —es la pulsación larga, que sobre un enlace ofrece su menú—, así que manda el toque. */ .nota--viva .nota__t a::after { z-index: 2; } } /* --- El filtro ---------------------------------------------- ⚠️ EL CORTE VA EN 760 PX, Y ESTÁ MEDIDO, no elegido. La casilla más apretada es «Uniformidad», 82 px de tinta. Midiendo la holgura que le queda dentro de su caja (ancho de casilla menos tinta menos los dos rellenos): 834 px …… casilla 157 · holgura 55 cómoda 760 px …… casilla 142 · holgura 40 cómoda 700 px …… casilla 130 · holgura 28 justa 621 px …… casilla 115 · holgura 13 apretada, y a 6 px por lado No desbordaba a 621 —el QA de los siete anchos sale limpio—, pero un rótulo que casi toca su propio filete no se lee como un índice. En 760 hay holgura de sobra y además es donde la cabecerita de la sección deja de caber en una línea junto a su ayuda. Debajo, la cinta se pone de pie y el testigo se desliza en VERTICAL: el mismo mecanismo girado 90°, no otro distinto. `grid-auto-rows` fija la altura de las cinco filas para que el 20 % del testigo caiga exactamente sobre una. */ @media (max-width: 760px) { .blog__filtro { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 58px; } .blog__f { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 58px; border-left: 0; border-top: var(--blog-linea); padding-inline: clamp(12px, 3.5vw, 18px); } .blog__f:nth-of-type(1) { border-top: 0; } .blog__testigo { top: 0; bottom: auto; width: 3px; height: 20%; clip-path: none; background: var(--amarillo); transform: translateY(calc(var(--k, 0) * 100%)); transition: transform 520ms var(--ease-suave); } /* El lavado amarillo se pierde al quedarse en 3 px de ancho: se devuelve a la casilla marcada, que es donde tiene sentido. */ .blog__r:checked + .blog__f { background: rgb(var(--am-rgb) / .06); } /* Con el filtro de pie, el rótulo de la sección y su ayuda dejan de compartir línea: a 620 px la ayuda ocupaba dos líneas al lado de un kicker de una y las dos líneas base no casaban. */ .blog__cab { flex-direction: column; align-items: flex-start; } } /* ============================================================ 5 · EL REMATE — la página acaba en el índice, sin bloque de cierre ------------------------------------------------------------ AQUÍ HUBO DOS CIERRES Y EL CLIENTE MANDÓ QUITAR LOS DOS (8-sep-2026): primero el ajuste `.blog-cruce .otras__lista` para la venta cruzada de cuatro tarjetas (§35 de estilos.css) y después el cierre de texto `.blog-cierre` («Lo que no esté escrito, se pregunta en el mostrador»). Los dos están enteros, con su comentario, en `_backup/ajustes-20260908/` y `_backup/ajustes2b-20260908/`. No hay tercero: el índice cierra en su propia regla y de ahí se pasa al pie. El componente `.otras`/`.odiv` sigue vivo en estilos.css y lo usan las cuatro páginas de división. LO QUE HABÍA QUE RESOLVER, MEDIDO A 1440. Sin nada, entre la regla que cierra el listado (el `border-bottom` de `.blog__lista`) y el filete con el que abre el pie quedaban 144 px —el relleno inferior de sección, `--sec-y`— sin una letra en medio. Una fila del índice mide 228 px con 44 de relleno por lado: una banda vacía de 144 entre dos rayas se leía como una octava fila en blanco, no como un margen. LO QUE SE HACE. Se conserva la regla del listado —es el marco de la tabla: la primera raya la pone el filtro, las de en medio cada fila y la última tiene que existir o la séptima guía queda abierta— y el relleno inferior de `.blog` baja a la MITAD del token de sección, la misma fracción declarada que ya usa la banda de cifras (`.confianza`, estilos.css): 72 px a 1440, 88 a 1920, 48 en móvil. Así la banda entre las dos rayas es más ancha que el relleno de una fila (44) y claramente más estrecha que una fila entera, y se lee como lo que es: el margen entre el índice y el pie. Las dos rayas tampoco son iguales —la del listado va dentro del `.cont`, la del pie a sangre—, así que no se ven como un filete doble. El relleno superior no se toca: arriba el índice sigue entrando con `--sec-y`, como cualquier sección. POR QUÉ NO A CERO. Probado con captura: con `padding-bottom: 0` y sin la regla del listado, la raya del pie hace de cierre de la séptima fila (44 px por encima, 108 por debajo) y el índice parece meterse debajo del pie; además la única fila que cerraría contra una raya a sangre, en vez de contra una regla del marco, sería justo la última. Y dejando la regla del listado a 1 px de la del pie, las dos se funden en una línea de 2 px. ============================================================ */ .blog { padding-bottom: calc(var(--sec-y) / 2); } /* ============================================================ 6 · MOVIMIENTO REDUCIDO ------------------------------------------------------------ §27 ya deja todas las transiciones en .001 ms con `!important`. Se repite lo que es DESPLAZAMIENTO para que, aunque esa línea cambie, ni el testigo ni las filas se muevan para quien ha pedido que no se muevan: el estado se sigue viendo, porque el testigo también cambia de sitio, no solo de posición animada. ============================================================ */ @media (prefers-reduced-motion: reduce) { .blog__testigo { transition: none; } .nota, .nota__int { transition: none; } .nota:hover .nota__int, .nota:focus-within .nota__int { transform: none; } .nota__ir, .nota__ir::after { transition: none; } } /* ============================================================ 7 · IMPRESIÓN ------------------------------------------------------------ §28 ya deja el sitio decente en papel. Aquí solo dos cosas propias: que no se parta una guía entre dos A4 y que el filtro no salga —en papel no hay estado que filtrar y las cinco casillas se leerían como una tabla vacía. ============================================================ */ @media print { .blog__filtro { display: none; } .nota { break-inside: avoid; } .blogcab__titular::after { display: none; } }