/** * blog.css — Estilos del blog nativo (post_type 'post') * Cargado en home.php (archive de posts) y single.php. * El hero (.page-hero) es un componente compartido con la página de * Contacto — su CSS vive en main.css (se carga en todo el sitio), * no acá. Este archivo solo tiene lo específico del blog. */ /* style.css define un fondo gris claro global para (--color-fondo). En el blog el body debe ser blanco — WordPress agrega automáticamente la clase 'blog' en la página de entradas (home.php) y 'single-post' en el single (vía body_class() en header.php), así que se puede sobreescribir sin tocar la regla global (que sí aplica en el resto del sitio). */ body.blog, body.single-post { background-color: var(--color-blanco); } /* ───────────────────────────────────────────────────────── LAYOUT — 70% contenido / 30% sidebar (home.php + single.php) ───────────────────────────────────────────────────────── */ .blog-layout { padding: 60px 0 80px; background: var(--color-blanco); } .blog-layout__grid { display: grid; grid-template-columns: 7fr 3fr; gap: 48px; align-items: start; } .blog-layout__grid > * { min-width: 0; } @media (max-width: 1024px) { .blog-layout__grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────── ARCHIVE (home.php) — grid de cards, 2 columnas ───────────────────────────────────────────────────────── */ .archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* .blog-card* — componente compartido, ver main.css (se reutiliza en Home) */ @media (max-width: 640px) { .archive-grid { grid-template-columns: 1fr; } } .no-results { padding: 40px 0; text-align: center; color: var(--color-texto-claro); } .no-results--filtro { grid-column: 1 / -1; } /* Paginación — markup nativo de the_posts_pagination() */ .blog-pagination { display: flex; justify-content: center; margin-top: 48px; } .blog-pagination .nav-links { display: flex; gap: 8px; } .blog-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--color-borde); border-radius: var(--radius-sm); color: var(--color-primario); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--color-blanco); } .blog-pagination .page-numbers.current { background: var(--color-primario); color: var(--color-blanco); border-color: var(--color-primario); } .blog-pagination .page-numbers:hover:not(.current) { border-color: var(--color-primario); } /* ───────────────────────────────────────────────────────── SINGLE (single.php) — artículo, columna 70% ───────────────────────────────────────────────────────── */ .post-featured-img { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 32px; background: linear-gradient(135deg, var(--color-primario), var(--color-primario-lt)); } .post-featured-img__el { width: 100%; height: 100%; object-fit: cover; } .post-header { margin-bottom: 28px; } .post-cat { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-acento); margin-bottom: 14px; } .post-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--color-primario); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 20px; } .post-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--color-texto-claro); padding-bottom: 28px; border-bottom: 1px solid var(--color-borde); } .post-meta__item { display: flex; align-items: center; gap: 6px; } .post-meta__item svg { width: 14px; height: 14px; flex-shrink: 0; } .post-body { margin-top: 32px; font-size: 16px; line-height: 1.85; color: var(--color-texto); } .post-body p { margin: 0 0 20px; } .post-body h2 { font-size: 24px; font-weight: 700; color: var(--color-primario); margin: 36px 0 16px; scroll-margin-top: 100px; } .post-body h3 { font-size: 19px; font-weight: 700; color: var(--color-primario); margin: 28px 0 14px; scroll-margin-top: 100px; } .post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 20px; } .post-body li { margin-bottom: 8px; } .post-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .post-body blockquote { margin: 28px 0; padding: 22px 26px; border-left: 4px solid var(--color-acento); background: var(--color-fondo); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .post-body blockquote p { font-style: italic; font-size: 18px; color: var(--color-primario); margin: 0; } /* ───────────────────────────────────────────────────────── SIDEBAR (template-parts/blog-sidebar.php) — columna 30% Compartido por home.php y single.php. ───────────────────────────────────────────────────────── */ .blog-sidebar { display: flex; flex-direction: column; gap: 24px; } .sidebar-card { background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: var(--radius-md); padding: 28px; box-shadow: 0 12px 28px rgba(10,37,64,0.05); } .sidebar-card__title { font-size: 17px; font-weight: 700; color: var(--color-primario); margin: 0 0 20px; } .sidebar-search { display: flex; gap: 8px; } .sidebar-search input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-borde); background: var(--color-fondo); font-family: inherit; font-size: 14px; color: var(--color-texto); } .sidebar-search input:focus { outline: none; border-color: var(--color-primario); } .sidebar-search button { width: 44px; flex-shrink: 0; border: none; border-radius: var(--radius-sm); background: var(--color-primario); color: var(--color-blanco); cursor: pointer; display: flex; align-items: center; justify-content: center; } .sidebar-search button svg { width: 16px; height: 16px; } .sidebar-post-list { display: flex; flex-direction: column; gap: 18px; } .sidebar-post { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; } .sidebar-post__img { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(135deg, var(--color-primario), var(--color-primario-lt)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); } .sidebar-post__img svg { width: 22px; height: 22px; } .sidebar-post__img-el { width: 100%; height: 100%; object-fit: cover; } .sidebar-post__title { display: block; font-size: 13px; font-weight: 700; color: var(--color-primario); line-height: 1.4; margin: 0 0 4px; } .sidebar-post__date { display: block; font-size: 11px; color: var(--color-texto-claro); } .sidebar-toc-list { display: flex; flex-direction: column; gap: 2px; } .sidebar-toc-list__item { display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--color-borde); font-size: 13px; font-weight: 600; color: var(--color-texto-claro); text-decoration: none; line-height: 1.4; transition: color 0.15s, border-color 0.15s; } .sidebar-toc-list__item:hover { color: var(--color-primario); border-left-color: var(--color-primario); } .sidebar-toc-list__item--nivel3 { padding-left: 26px; font-size: 12px; font-weight: 500; } /* Botones (antes eran que navegaban a la página de categoría por defecto de WordPress) — ahora filtran las cards en tiempo real, igual que el buscador (ver theme.js). */ .sidebar-cat-list { display: flex; flex-direction: column; } .sidebar-cat-list button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid var(--color-borde); background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-texto); text-align: left; cursor: pointer; transition: color 0.15s; } .sidebar-cat-list button:last-child { border-bottom: none; } .sidebar-cat-list button:hover { color: var(--color-primario); } .sidebar-cat-list button.is-active { color: var(--color-primario); } .sidebar-cat-list button span { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--color-texto-claro); background: var(--color-fondo); border-radius: 999px; padding: 3px 10px; } .sidebar-cat-list button.is-active span { background: var(--color-acento-lt); color: var(--color-acento); }