/* ========================================================================= CMP · Sección "Últimos Blogs" del home (versión alterna) Diseño basado en el mockup de Design Claude, adaptado a la paleta del sitio. Tema claro por defecto; el oscuro se activa con la clase .dark en . ========================================================================= */ .blog-home { --bh-bg: #eef3fb; --bh-surface: #ffffff; --bh-surface-2: #f5f8fe; --bh-text: #1c2330; --bh-text-soft: #566173; --bh-muted: #8b94a2; --bh-border: rgba(24, 40, 72, .10); --bh-border-2: rgba(24, 40, 72, .16); --bh-accent: #408cd2; --bh-brand: #2670b8; --bh-brand-soft: #4aa3e2; --bh-shadow: 0 6px 22px rgba(28, 55, 105, .10); --bh-shadow-lg: 0 20px 52px rgba(28, 55, 105, .18); font-family: 'Poppins', system-ui, sans-serif; background: var(--bh-bg); color: var(--bh-text); padding: 64px 0 72px; } .dark .blog-home { --bh-bg: #0c121c; --bh-surface: #161f2d; --bh-surface-2: #1c2736; --bh-text: #e8f0fb; --bh-text-soft: #a2b1c4; --bh-muted: #76859a; --bh-border: rgba(255, 255, 255, .08); --bh-border-2: rgba(255, 255, 255, .15); --bh-accent: #5aa6e8; --bh-brand: #5aa6e8; --bh-brand-soft: #8cc4f3; --bh-shadow: 0 10px 30px rgba(0, 0, 0, .45); --bh-shadow-lg: 0 26px 64px rgba(0, 0, 0, .6); } .blog-home * { box-sizing: border-box; } .blog-home a { text-decoration: none; } .bh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ---------- Encabezado ---------- */ .bh-head { text-align: center; max-width: 680px; margin: 0 auto 14px; } .bh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-accent); margin-bottom: 14px; } .bh-eyebrow::before, .bh-eyebrow::after { content: ""; width: 24px; height: 1.5px; background: var(--bh-accent); display: inline-block; } .bh-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--bh-text); } .bh-head p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--bh-text-soft); } /* ---------- Botón "Ver todos" ---------- */ .bh-viewall-wrap { display: flex; justify-content: center; margin: 24px 0 38px; } .bh-viewall { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bh-accent); border: 1px solid var(--bh-border-2); background: var(--bh-surface); border-radius: 999px; padding: 10px 20px; box-shadow: var(--bh-shadow); transition: transform .18s, background .18s, color .18s; } .bh-viewall:hover { transform: translateY(-2px); background: var(--bh-accent); color: #fff; border-color: var(--bh-accent); } /* ---------- Grid ---------- */ .bh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .bh-card { display: flex; flex-direction: column; background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: 18px; overflow: hidden; box-shadow: var(--bh-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; } .bh-card:hover { transform: translateY(-7px); box-shadow: var(--bh-shadow-lg); border-color: var(--bh-border-2); } .bh-media { position: relative; height: 170px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .bh-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Skins de respaldo (sin imagen) */ .bh-skin[data-skin="sat"] { background: linear-gradient(135deg, #2a3a4f, #465a70); } .bh-skin[data-skin="radar"] { background: linear-gradient(135deg, #1f2d3c, #3a2c3a 55%, #4a3324); } .bh-skin[data-skin="map"] { background: linear-gradient(135deg, #21404a, #3a5b53); } .bh-skin[data-skin="clima"] { background: linear-gradient(135deg, #274a5e, #356a86); } .bh-skin[data-skin]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 10px); } .bh-imglabel { position: relative; z-index: 1; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .68); background: rgba(0, 0, 0, .2); padding: 4px 9px; border-radius: 6px; } .bh-badge { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--bh-bdg-bg, rgba(64, 140, 210, .14)); color: var(--bh-bdg-fg, #246199); backdrop-filter: blur(6px); } .blog-home [data-tema] { --bh-bdg-bg: rgba(64, 140, 210, .14); --bh-bdg-fg: #246199; } .blog-home [data-tema="Clima"] { --bh-bdg-bg: rgba(20, 150, 162, .15); --bh-bdg-fg: #0d7b85; } .dark .blog-home [data-tema] { --bh-bdg-bg: rgba(90, 166, 232, .2); --bh-bdg-fg: #9cccf6; } .dark .blog-home [data-tema="Clima"] { --bh-bdg-bg: rgba(56, 196, 206, .2); --bh-bdg-fg: #62d2db; } .bh-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .bh-meta { font-size: 12px; color: var(--bh-muted); } .bh-body h3 { margin: 0; font-size: 16px; line-height: 1.32; font-weight: 600; color: var(--bh-text); } .bh-excerpt { margin: 0; font-size: 13px; line-height: 1.55; color: var(--bh-text-soft); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bh-readmore { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--bh-accent); border: 1px solid var(--bh-border-2); border-radius: 10px; padding: 10px; transition: background .18s, color .18s, border-color .18s; } .bh-readmore:hover { background: var(--bh-accent); color: #fff; border-color: var(--bh-accent); } /* ---------- Responsive ---------- */ @media (max-width: 992px) { .bh-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .bh-grid { grid-template-columns: 1fr; } }