/* ============================================================ duqe — estilos de blog (listado, tarjetas y artículo) Reutiliza tokens y tipografía de base.css ============================================================ */ /* ---- rejilla de entradas ---- EL FILETE GRIS VA EN LA TARJETA, NO EN EL FONDO DEL CONTENEDOR. El truco de antes era el clásico: fondo gris en la rejilla, hueco de 1 px entre celdas y tarjetas blancas encima. Funciona de maravilla mientras la rejilla esté llena. Con una sola entrada publicada, ese fondo asomaba entero y pintaba una raya gris a todo lo ancho justo debajo de la destacada — cualquiera habría jurado que era un separador puesto a propósito. Y en la página de búsqueda con uno o dos resultados dejaba un bloque gris en las celdas sobrantes. Con el filete en la tarjeta (un box-shadow de 1 px hacia fuera, que se solapa con el de la vecina en el hueco de 1 px y se lee como una sola línea), una rejilla a medias simplemente tiene menos tarjetas. */ .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; } /* Columnas ajustadas al número real de tarjetas. La clase la ponen home.php, index.php y single.php contando entradas. */ .posts--1 { grid-template-columns: minmax(0, 1fr); } .posts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .posts--1 .post { min-height: auto; } /* Cinturón y tirantes: si alguna vez llegase vacía, que no ocupe sitio. */ .posts:empty { display: none; } .post { background: var(--paper); box-shadow: 0 0 0 1px var(--line); padding: clamp(26px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 14px; min-height: 304px; transition: background .3s var(--ease); } .post:hover { background: var(--paper-2); } .post__cat { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .post__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.06; letter-spacing: -0.02em; } .post__ex { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: auto; } .post__meta { font-size: 13px; color: var(--faint); font-weight: 600; letter-spacing: 0.01em; } /* El "Leer →" estaba a opacity:0 hasta el hover. El problema es que el separador " · " que lo precede lo imprime duqe_post_card() como texto suelto, así que toda tarjeta en reposo terminaba con un punto colgando: "16 Jul 2026 · 18 min ·". Dejando la flecha visible pero atenuada, el separador vuelve a separar algo y el hover sigue teniendo su gesto. El arreglo de raíz es quitar ese " · " final de la cadena de inc/template-helpers.php; si se hace, aquí se puede volver a opacity:0. */ /* El separador va pegado a la flecha y no dentro de la cadena traducible: así aparece y desaparece con ella en vez de quedarse colgando al final. */ /* El punto medio va como escape CSS y no como carácter literal: los .css del tema se sirven sin declarar charset, y un byte no ASCII dentro de `content` depende entonces de cómo lo interprete el navegador. El espacio que cierra el escape es obligatorio; el aire alrededor lo da el padding. */ .post__arrow::before { content: "\00B7 "; padding-inline: 6px 4px; color: var(--faint); } .post__arrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--faint); transition: color .3s var(--ease), transform .3s var(--ease); } .post:hover .post__arrow { color: var(--ink); transform: translateX(3px); } @media (max-width: 900px) { .posts { grid-template-columns: 1fr; } } /* ---- cabecera de página de blog ---- */ .bloghead { padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); } .bloghead .eyebrow { display: block; margin-bottom: 26px; } .bloghead h1 { font-size: clamp(34px, 4vw, 72px); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; } .bloghead p { color: var(--ink-2); max-width: 50ch; margin-top: 26px; font-size: clamp(17px, 1.5vw, 20px); } .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; } .chip { font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: 100px; border: 1.5px solid var(--line); color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease); background: transparent; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---- entrada destacada ---- */ .featured { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; padding: clamp(34px, 4vw, 56px) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); margin-bottom: clamp(40px, 6vw, 72px); } .featured__media { border-radius: 16px; overflow: hidden; min-height: 320px; } .featured__txt { display: flex; flex-direction: column; gap: 18px; align-self: center; } .featured__txt .post__cat { color: var(--ink); } .featured__txt h2 { font-size: clamp(32px, 4vw, 60px); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; } .featured__txt p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 48ch; } .featured__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; color: var(--faint); font-weight: 600; } /* La firma era un .article__cat con tres declaraciones en un atributo style para deshacer las versales y el interletrado que esa clase le imponía. Ahora tiene la suya y la plantilla queda sin estilos en línea. */ .featured__by { color: var(--ink-2); font-weight: 700; } @media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .featured__media { min-height: 220px; } } /* ---- placeholder de imagen (rayado, monoespaciado) ---- */ .ph { position: relative; width: 100%; height: 100%; min-height: inherit; background: repeating-linear-gradient(135deg, #e7e3db 0 12px, #efece6 12px 24px); display: grid; place-items: center; } .ph::after { content: attr(data-label); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); background: var(--paper); padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line-strong); } /* ---- artículo ---- UN SOLO BORDE IZQUIERDO. Hasta septiembre de 2026 la entrada tenía tres ejes distintos: la portada centrada a 1040 px, la cabecera a 820 y el texto a 720. Los tres centrados, sí, pero a anchos distintos, así que ninguno se alineaba con ninguno: el título y la categoría colgaban 50 px a la izquierda del primer párrafo. Da sensación de descuido aunque nadie sepa decir por qué. Ahora la cabecera, la portada y el bloque índice+texto miden lo mismo (--art-w) y arrancan en el mismo punto. El texto empieza donde empieza su columna, que es la segunda de la rejilla: el índice ocupa justo el hueco que antes estaba vacío. Las medidas van en variables para que los cuatro números no se puedan desincronizar por accidente. */ .article { padding: clamp(36px, 5vw, 72px) 0 clamp(60px, 8vw, 110px); --toc-w: 232px; /* ancho del índice lateral */ --toc-gap: 56px; /* separación entre el índice y el texto */ --read-w: var(--prose-measure, 720px); /* medida de lectura */ --art-w: 1008px; /* 232 + 56 + 720 = el bloque entero */ } .article__head { max-width: var(--art-w); margin: 0 auto clamp(34px, 4vw, 52px); } .article__cat { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; } /* El titular no se estira hasta los 1008: se queda en una medida legible, pero alineado al borde izquierdo del bloque, no centrado dentro de él. */ .article__head h1 { max-width: 880px; font-size: clamp(36px, 5.4vw, 72px); font-weight: 800; line-height: 1.0; letter-spacing: -0.025em; margin: 22px 0 24px; } /* flex-wrap: en 390 px estos metadatos se partían en dos líneas y dejaban los puntos separadores descolgados al final de la primera. */ .article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: var(--faint); font-weight: 600; } .article__meta .av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; } /* Los "·" son decorativos (van aria-hidden en la plantilla): que no compitan con el dato que separan. */ .article__sep { opacity: .5; } @media (max-width: 620px) { /* En pantallas estrechas el espacio ya separa de sobra. */ .article__meta .article__sep { display: none; } } .article__cover { max-width: var(--art-w); margin: 0 auto clamp(36px, 5vw, 60px); border-radius: 18px; overflow: hidden; aspect-ratio: 16/8; } /* Aquí vivía una segunda declaración de `.prose` —cuerpo, encabezados, cita, listas y enlaces—, y una tercera más abajo en el bloque de tamaños. Entre las tres y la de front-page.css, el motor tipográfico de todo el contenido largo del sitio estaba declarado en tres sitios que se pisaban por especificidad y por orden de carga, y ganaba el que ganase según la página. Ahora `.prose` se define **solo** en help.css, que es el archivo que llevaba ya la escala de las páginas legales y del contenido largo. Esto depende de que help.css se encole también en las entradas del blog. Lo hacía solo `if ( is_page() )` y una entrada es `is_single()`, así que hubo que ampliar la condición en functions.php ANTES de borrar esto. Si algún día alguien vuelve a estrechar ese encolado, los artículos se quedarán sin tipografía de golpe. */ .article__foot { max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .backlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; } /* ---- paginación (cuando hay muchas entradas) ---- */ .duqe-pagination { margin-top: clamp(40px, 6vw, 72px); } .duqe-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .duqe-pagination .page-numbers { font-family: var(--font-display); font-weight: 600; font-size: 15px; min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 100px; color: var(--ink-2); transition: all .2s var(--ease); } .duqe-pagination a.page-numbers:hover { border-color: var(--ink); color: var(--ink); } .duqe-pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); } .duqe-pagination .page-numbers.dots { border-color: transparent; min-width: auto; padding: 0 4px; } .duqe-pagination .prev, .duqe-pagination .next { padding: 0 22px; } /* ---- formulario de búsqueda ---- */ .duqe-search { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; } .duqe-search__input { font-family: var(--font-body); font-size: 16px; padding: 13px 20px; border: 1.5px solid var(--line); border-radius: 100px; background: var(--paper); color: var(--ink); min-width: 260px; flex: 1; } /* Sin `outline: none`: `:focus-visible` es un subconjunto de `:focus`, y esta regla (0-2-0) le gana a la global de base.css (0-1-0), así que borraba el anillo de teclado del buscador. Solo se oscurece el borde. */ .duqe-search__input:focus { border-color: var(--ink); } /* ============================================================ AJUSTES DE TAMAÑO (duqe) — titulares menos abrumadores Sobreescriben los tamaños de arriba. Para volver al diseño original, elimina este bloque. ============================================================ */ /* Cabecera del blog: "Menos pantalla, más vida" — era enorme (hasta 150px) */ .bloghead h1 { font-size: clamp(34px, 4vw, 72px); line-height: 0.98; } .bloghead p { font-size: clamp(15px, 1vw, 17px); } .bloghead { padding: clamp(16px, 2vw, 28px) 0 clamp(20px, 2.5vw, 32px); } /* Entrada destacada */ .featured__txt h2 { font-size: clamp(22px, 2vw, 30px); } .featured__txt p { font-size: 15px; } .featured__media { min-height: 200px; } .featured { padding: clamp(24px, 3vw, 40px) 0; gap: clamp(20px, 3vw, 40px); } /* Título de la entrada individual */ .article__head h1 { font-size: clamp(26px, 2.6vw, 38px); } /* Los cuatro tamaños de `.prose` que había aquí se han ido a help.css con el resto de la escala tipográfica. Ver la nota de arriba. */ /* Tarjetas de entrada: más compactas (menos alto y relleno) */ .post__t { font-size: clamp(17px, 1.2vw, 19px); } .post { min-height: 180px; padding: clamp(20px, 1.8vw, 26px); gap: 10px; } .post__ex { font-size: 14px; } .post__meta { font-size: 12px; } /* ============================================================ ENTRADA: ÍNDICE LATERAL Y PROGRESO DE LECTURA ------------------------------------------------------------ El ensayo del blog mide casi 11.000 px de scroll: doce pantallas sin un solo punto de referencia. Y los 288 px muertos a cada lado del texto no eran aire de diseño, era sitio desaprovechado. El índice y el progreso resuelven las dos cosas a la vez. ESTE BLOQUE ES AUTOSUFICIENTE A PROPÓSITO. El índice de la entrada comparte con el de las páginas legales el JavaScript —que solo busca los IDs #legal-content y #legal-toc-nav— pero NO las clases. Así el aspecto del índice del blog vive entero aquí, en una hoja que se encola siempre, y no depende de que help.css llegue a las entradas. El mismo motivo por el otro lado: como aquí no se escribe ni una regla .legal-toc ni .legal-layout (salvo el modificador --solo, comentado más abajo), las páginas legales no pueden verse afectadas por nada de esto. ============================================================ */ .article-layout { display: grid; grid-template-columns: var(--toc-w) minmax(0, var(--read-w)); gap: var(--toc-gap); align-items: start; max-width: var(--art-w); margin-inline: auto; } /* El cuerpo NO se centra dentro de su columna: se pega al borde izquierdo, que es el eje de lectura de toda la página. (.prose lleva "margin: 0 auto" porque en el resto del sitio va suelto y centrado.) Es lo único que este archivo le dice a .prose, y es colocación, no tipografía: la escala del cuerpo de texto se decide en otro sitio. */ .article-layout .prose { max-width: var(--read-w); margin-inline: 0; } /* Que la cabecera fija no tape el apartado al saltar a un ancla. */ .article-main .prose h2, .article-main .prose h3 { scroll-margin-top: calc(var(--nav-h, 90px) + 6px); } /* ---- El índice ---- --nav-h es el alto real de la barra de navegación pegajosa. Hoy lo define help.css, que en las entradas puede no estar encolado: de ahí el valor de respaldo. Lo suyo es que ese número se mude a base.css y lo compartan la página y el blog, porque es el mismo número y ahora vive en dos sitios. */ .article-toc { position: sticky; top: var(--nav-h, 90px); } /* Con la barra de admin de WordPress visible (32 px, 46 en móvil). */ .admin-bar .article-toc { top: calc(var(--nav-h, 90px) + 32px); } @media screen and (max-width: 782px) { .admin-bar .article-toc { top: calc(var(--nav-h, 90px) + 46px); } } /* El