.articulo{ position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; } .articulo article{ position: relative; max-width: 100%; /* font-size igual al de "p" (base.css) para que 1ch mida lo mismo aquí que dentro de los párrafos: sin esto, ch se calcula con el tamaño de fuente heredado (16px) en vez de --fs-body (~18-24px) y la columna queda más angosta que el propio texto. */ font-size: var(--fs-body); /* 70ch = mismo tope que "p, li" en base.css: la columna del artículo coincide exactamente con el ancho de los párrafos, así los bloques (tarjetas relacionadas, biografía, compartir, FAQ) tienen el mismo ancho que el texto en vez de quedar angostos o desbordados. */ flex: 0 1 min(100%, 70ch); } .articulo .post_menu{ display: grid; gap: 12px; background-color: var(--gris1); padding: 1em; li{ margin: 0; list-style: none; } } .articulo article h2, .articulo article h3{ margin: 2rem 0; } .articulo article li{ margin-bottom: 1.2em; } .articulo img{ border-radius: var(--radius); height: auto; } .articulo article a:not(.boton){ color: var(--secundario); -webkit-text-decoration: underline 3px; text-decoration: underline 3px; transition: ease-in-out 0.5s; font-weight: 700; } #markdown-toc{ padding: 4em 0; background-color: var(--gris1); box-shadow: 0 0 0 100vmax var(--gris1); -webkit-clip-path: inset(0 -100vmax); clip-path: inset(0 -100vmax); li a{ color: var(--principal); font-size: var(--fs-base); } } /* .eeat-author vive en css/eeat.css, incluido vía pages.css (post.css ya incluye pages.css) para no duplicar CSS entre blog y páginas de tratamiento. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cta-blog{ background-color: var(--acento); } #blog-posts { container-type: inline-size; } /* Evita el flash de todas las tarjetas antes de que BlogPagination (main.js) aplique la paginación real; si hay 9 o menos tarjetas, esta regla no afecta a ninguna (comportamiento seguro sin JS). */ #blog-posts .card:nth-child(n + 10) { display: none; } /* Paginación */ .pagination { --gap: 0.5rem; display: flex; gap: var(--gap); align-items: center; justify-content: center; padding-block: 2rem; } .pagination-numbers { display: flex; gap: var(--gap); } .pagination .boton { min-width: 2.5rem; height: 2.5rem; padding-inline: 1rem; display: inline-flex; align-items: center; justify-content: center; background: var(--gris1); border: none; border-radius: var(--radius); color: var(--principal); font-weight: 500; transition: all 0.2s ease; } .pagination .boton:not(:disabled):hover { background: var(--accion); transform: translateY(-2px); } .pagination .boton.current { background: var(--principal); color: white; } .pagination .boton:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-ellipsis { padding-inline: 0.5rem; color: var(--gris2); } @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card-image img { transition: none; } .pagination .boton:hover { transform: none; } } @container (max-width: 768px) { .pagination { --gap: 0.25rem; } .pagination .boton { min-width: 2rem; height: 2rem; padding-inline: 0.75rem; font-size: var(--fs-sm); } .pagination-numbers .boton:not(.current):not(:first-child):not(:last-child) { display: none; } } /* ===== POST HEADER — 3 COLUMNAS (texto+breadcrumbs | imagen | "En resumen") ===== 3 columnas independientes (grid-template-areas), no un bloque fusionado: intro, media y summary son 3 grid-area distintas. gap:0 en el grid deja imagen y tarjeta pegadas entre sí; la separación entre columna 1 y 2 se resuelve con padding-right solo en .post-header__intro, sin tocar el gap global. Sigue el mismo patrón (áreas nombradas + fallback a una columna en @media) que documenta la skill dev-jekyll. Reutiliza .flow (ritmo vertical), .section-overlay (tarjeta oscura ya usada en .three_blocks de las páginas de servicio/corporativas) y boton.html (CTA). */ .post-header { display: grid; grid-template-areas: "intro media summary"; grid-template-columns: 1fr 1.15fr 1fr; gap: 0; align-items: center; padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 7vw, 5rem) clamp(3.5rem, 6vw, 5rem); } .post-header__intro { grid-area: intro; /* Padding en las 4 direcciones (no solo padding-right hacia la imagen): así el texto respira también contra el borde izquierdo/superior del header y no depende únicamente del padding del contenedor. */ padding: 1rem clamp(2.5rem, 6vw, 5rem) 1rem 0; } /* La tarjeta de resumen es la que más se beneficia de que el texto/CTA se lea antes que la imagen en móvil, así que en el orden apilado va justo después de la intro y antes de la imagen larga. Al apilarse ya no hay columnas lado a lado: se recupera el espaciado vertical entre las 3. */ @media (max-width: 992px) { .post-header { grid-template-areas: "intro" "media" "summary"; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); } .post-header__intro { padding: 0; } } .post-header__media { grid-area: media; margin: 0; align-self: stretch; line-height: 0; } .post-header__media img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; /* Sin border-radius: las imágenes del sitio no lo llevan (ver css del resto de páginas), así que esta tampoco. */ } .post-header__summary { grid-area: summary; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 3rem); box-shadow: var(--shadow); text-align: left; } /* Mismo tamaño de párrafo que el resto del sitio (--fs-body, heredado de base.css) para que el resumen no se lea más pequeño que la intro. */ .post-header__summary-label { display: inline-block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.3em 0.9em; border-radius: 999px; background: var(--accion); color: var(--principal); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .post-header__summary .boton { align-self: flex-start; } /* Breadcrumbs reutilizados dentro de la columna de intro: se anula el padding/borde full-bleed de #breadcrumbs (pensado para ir debajo del header, ver universales.css) y se alinean a la izquierda dentro de la columna. El indicador "X minutos para leerlo" (movido aquí desde post.html) se ubica en la misma línea gracias a .post-header__meta, así que el último crumb se acorta bastante más que el límite global (40ch) para dejarle espacio. */ .post-header__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 1em; } .post-header__intro #breadcrumbs { padding: 0; border-bottom: none; flex: 1 1 auto; min-width: 0; } .post-header__intro #breadcrumbs .small { justify-content: flex-start; max-width: none; margin-inline: 0; } .post-header__intro #breadcrumbs .small li:last-child { max-width: 18ch; } .post-header__reading-time { flex-shrink: 0; font-size: var(--fs-xs); color: var(--gris2); white-space: nowrap; } /* ===== CONTENIDO RELACIONADO (_includes/related-content.html) ===== Tarjetas pegadas (sin gap) y de la misma altura/ancho: mismo lenguaje visual que .post-header (imagen + tarjeta unidas, radio de esquina solo en los lados externos). Se usa display:grid en vez de .two_columns porque .two_columns exige 400px mínimos por columna y este bloque también se inserta dentro de la columna del artículo (.articulo article, 70ch ≈ 900px). */ .related-cards { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .related-cards .card { padding: 0; transform: none; } /* .articulo img (arriba en este mismo archivo) le pone border-radius a cualquier imagen dentro del articulo; se anula solo aqui para que la imagen de la tarjeta quede con esquinas rectas como el resto del sitio. */ .related-cards .card-image img { border-radius: 0; } .related-cards .card-content { padding: 1.75rem; } .related-cards .cta-blog { padding: 1.75rem; } @media (max-width: 600px) { .related-cards { grid-template-columns: 1fr; } }