/* ========================================================================= CMP · Detalle de blog (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-detalle { --bd-bg: #e9eff9; --bd-bg-2: #f3f7fd; --bd-surface: #ffffff; --bd-surface-2: #f5f8fe; --bd-text: #1c2330; --bd-text-soft: #566173; --bd-read: #2b3543; --bd-muted: #8b94a2; --bd-border: rgba(24, 40, 72, .10); --bd-border-2: rgba(24, 40, 72, .16); --bd-accent: #408cd2; --bd-accent-ink: #22577f; --bd-brand: #2670b8; --bd-brand-soft: #4aa3e2; --bd-shadow: 0 6px 22px rgba(28, 55, 105, .10); --bd-shadow-lg: 0 20px 52px rgba(28, 55, 105, .18); --bd-field: #ffffff; font-family: 'Poppins', system-ui, sans-serif; background: var(--bd-bg); color: var(--bd-text); -webkit-font-smoothing: antialiased; } .dark .blog-detalle { --bd-bg: #0c121c; --bd-bg-2: #0f1825; --bd-surface: #161f2d; --bd-surface-2: #1c2736; --bd-text: #e8f0fb; --bd-text-soft: #a2b1c4; --bd-read: #cdd9e7; --bd-muted: #76859a; --bd-border: rgba(255, 255, 255, .08); --bd-border-2: rgba(255, 255, 255, .15); --bd-accent: #5aa6e8; --bd-accent-ink: #90c4f4; --bd-brand: #5aa6e8; --bd-brand-soft: #8cc4f3; --bd-shadow: 0 10px 30px rgba(0, 0, 0, .45); --bd-shadow-lg: 0 26px 64px rgba(0, 0, 0, .6); --bd-field: #0e1724; } .blog-detalle * { box-sizing: border-box; } .blog-detalle ::selection { background: rgba(64, 140, 210, .25); } .blog-detalle a { color: inherit; } /* ---------- Badges de tema ---------- */ .blog-detalle [data-tema] { --bd-bdg-bg: rgba(64, 140, 210, .16); --bd-bdg-fg: #246199; } .blog-detalle [data-tema="Clima"] { --bd-bdg-bg: rgba(20, 150, 162, .15); --bd-bdg-fg: #0d7b85; } .dark .blog-detalle [data-tema] { --bd-bdg-bg: rgba(90, 166, 232, .22); --bd-bdg-fg: #9cccf6; } .dark .blog-detalle [data-tema="Clima"] { --bd-bdg-bg: rgba(56, 196, 206, .2); --bd-bdg-fg: #62d2db; } /* ---------- Skins (fondo de respaldo cuando no hay imagen) ---------- */ .bd-skin { position: relative; } .bd-skin[data-skin="radar"] { background: linear-gradient(135deg, #1f2d3c 0%, #3a2c3a 55%, #4a3324 100%); } .bd-skin[data-skin="sat"] { background: linear-gradient(135deg, #2a3a4f 0%, #465a70 100%); } .bd-skin[data-skin="map"] { background: linear-gradient(135deg, #21404a 0%, #3a5b53 100%); } .bd-skin[data-skin="clima"] { background: linear-gradient(135deg, #5a4730 0%, #7c5a34 100%); } .bd-skin[data-skin]::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 10px); pointer-events: none; } /* ---------- Barra de progreso de lectura ---------- */ .bd-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--bd-brand-soft), var(--bd-brand)); z-index: 90; transition: width .08s linear; } /* ---------- Layout ---------- */ .bd-wrap { max-width: 1140px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ---------- Hero ---------- */ .bd-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; background-size: cover; background-position: center; } .bd-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 14, 22, .35) 0%, rgba(8, 14, 22, .5) 45%, rgba(8, 14, 22, .86) 100%); } .bd-hero-inner { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; padding: 0 24px 48px; width: 100%; } .bd-back { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .82); margin-bottom: 20px; } .bd-back:hover { color: #fff; } .bd-hero-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .bd-hero-badge { font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px; background: rgba(64, 140, 210, .9); color: #fff; } .bd-hero-meta .bd-dot { color: rgba(255, 255, 255, .4); } .bd-hero-meta span:not(.bd-hero-badge):not(.bd-dot) { font-size: 13px; color: rgba(255, 255, 255, .8); } .bd-hero h1 { margin: 0; font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: #fff; max-width: 820px; } .bd-hero-sub { margin: 18px 0 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .86); } /* ---------- Cuerpo: artículo + sidebar ---------- */ .bd-body { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } .bd-article { padding-top: 40px; min-width: 0; } .bd-aside { padding-top: 40px; min-width: 0; } /* ---------- Barra autor + compartir ---------- */ .bd-byline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--bd-border); } .bd-author { display: flex; align-items: center; gap: 12px; } .bd-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bd-surface-2); border: 1px solid var(--bd-border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--bd-accent); flex-shrink: 0; } .bd-author-name { font-size: 14.5px; font-weight: 600; color: var(--bd-text); } .bd-author-esp { font-size: 12.5px; color: var(--bd-muted); } .bd-share { display: flex; align-items: center; gap: 9px; } .bd-share-label { font-size: 13px; color: var(--bd-muted); margin-right: 4px; } .bd-share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bd-border-2); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--bd-text-soft); font-weight: 700; font-size: 14px; cursor: pointer; background: transparent; font-family: inherit; transition: all .18s; } .bd-share-btn:hover { background: var(--bd-surface-2); color: var(--bd-accent); } .bd-copy-btn { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bd-border-2); background: transparent; color: var(--bd-text-soft); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .18s; } .bd-copy-btn:hover { background: var(--bd-surface-2); color: var(--bd-accent); } /* ---------- Contenido del artículo (prosa) ---------- */ .bd-art p { font-size: 17px; line-height: 1.85; color: var(--bd-read); margin: 0 0 22px; } .bd-art h2 { font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--bd-text); margin: 42px 0 16px; scroll-margin-top: 90px; } .bd-art h3 { font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--bd-text); margin: 32px 0 14px; scroll-margin-top: 90px; } .bd-art ul, .bd-art ol { margin: 0 0 24px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .bd-art li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.7; color: var(--bd-read); } .bd-art li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--bd-brand); } .bd-art strong { color: var(--bd-text); font-weight: 600; } .bd-art a { color: var(--bd-accent); text-decoration: underline; } .bd-art img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 24px; } .bd-art blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--bd-brand); font-size: 19px; line-height: 1.6; font-style: italic; color: var(--bd-text); } /* ---------- Galería ---------- */ .bd-gallery-wrap { margin-top: 44px; } .bd-gallery-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .bd-gallery-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--bd-text); } .bd-gallery-head span { font-size: 12.5px; color: var(--bd-muted); } .bd-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .bd-gallery-item { font-family: inherit; cursor: pointer; border: 1px solid var(--bd-border); border-radius: 14px; height: 200px; position: relative; overflow: hidden; padding: 0; transition: transform .25s, box-shadow .25s; background: var(--bd-surface-2); } .bd-gallery-item:hover { transform: scale(1.015); box-shadow: var(--bd-shadow-lg); } .bd-gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Tarjeta de autor ---------- */ .bd-author-card { margin-top: 48px; display: flex; gap: 20px; align-items: center; background: var(--bd-surface); border: 1px solid var(--bd-border); border-radius: 20px; padding: 26px 28px; box-shadow: var(--bd-shadow); flex-wrap: wrap; } .bd-author-card-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--bd-brand-soft), var(--bd-brand)); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; box-shadow: 0 8px 20px rgba(64, 140, 210, .3); } .bd-author-card-body { flex: 1; min-width: 200px; } .bd-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bd-accent); margin-bottom: 5px; } .bd-author-card-name { font-size: 19px; font-weight: 700; color: var(--bd-text); } .bd-author-card-esp { font-size: 14px; color: var(--bd-text-soft); margin-top: 3px; } /* ---------- Sidebar ---------- */ .bd-aside-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; } .bd-card { background: var(--bd-surface); border: 1px solid var(--bd-border); border-radius: 16px; padding: 20px; box-shadow: var(--bd-shadow); } .bd-card-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bd-muted); margin-bottom: 14px; } .bd-toc { display: flex; flex-direction: column; gap: 2px; } .bd-toc a { font-size: 14px; color: var(--bd-text-soft); text-decoration: none; padding: 7px 12px; border-radius: 9px; border-left: 2px solid var(--bd-border); transition: all .18s; } .bd-toc a:hover, .bd-toc a.bd-active { color: var(--bd-accent); background: var(--bd-surface-2); border-left-color: var(--bd-accent); } .bd-donate { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(150deg, #1f2d3c, #2f4358); padding: 24px; box-shadow: var(--bd-shadow); } .bd-donate::before { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(64, 140, 210, .18); } .bd-donate-inner { position: relative; } .bd-donate-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bd-brand-soft); margin-bottom: 10px; } .bd-donate-title { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.35; } .bd-donate p { margin: 10px 0 16px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .78); } .bd-donate-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--bd-brand-soft), var(--bd-brand)); padding: 11px 20px; border-radius: 11px; } .bd-news-title { font-size: 15px; font-weight: 600; color: var(--bd-text); margin-bottom: 4px; } .bd-news p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--bd-text-soft); } .bd-news form { display: flex; flex-direction: column; gap: 9px; } .bd-news input { border: 1px solid var(--bd-border-2); outline: none; border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 13.5px; background: var(--bd-field); color: var(--bd-text); } .bd-news button { font-family: inherit; cursor: pointer; border: none; border-radius: 10px; padding: 11px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--bd-accent); } /* ---------- Relacionados ---------- */ .bd-related { max-width: 1140px; margin: 72px auto 0; padding: 0 24px; } .bd-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; } .bd-related-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--bd-text); } .bd-related-head a { font-size: 14px; font-weight: 600; color: var(--bd-accent); text-decoration: none; } .bd-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; } .bd-rel-card { display: flex; flex-direction: column; background: var(--bd-surface); border: 1px solid var(--bd-border); border-radius: 18px; overflow: hidden; box-shadow: var(--bd-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; } .bd-rel-card:hover { transform: translateY(-6px); box-shadow: var(--bd-shadow-lg); border-color: var(--bd-border-2); } .bd-rel-media { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .bd-rel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bd-rel-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--bd-bdg-bg); color: var(--bd-bdg-fg); backdrop-filter: blur(6px); } .bd-rel-body { padding: 17px 19px 19px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .bd-rel-meta { font-size: 12.5px; color: var(--bd-muted); } .bd-rel-body h3 { margin: 0; font-size: 16.5px; line-height: 1.34; font-weight: 600; color: var(--bd-text); } .bd-rel-link { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--bd-accent); text-decoration: none; } /* ---------- Lightbox ---------- */ .bd-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 10, 16, .86); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 32px; } .bd-lightbox.bd-open { display: flex; animation: bdpop .2s ease; } @keyframes bdpop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } .bd-lb-btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 20px; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; } .bd-lb-close { top: 22px; right: 26px; } .bd-lb-prev { left: 26px; top: 50%; transform: translateY(-50%); } .bd-lb-next { right: 26px; top: 50%; transform: translateY(-50%); } .bd-lb-stage { max-width: 880px; width: 100%; } .bd-lb-stage img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 16px; } .bd-lb-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 16px; color: #fff; } .bd-lb-counter { font-size: 13px; color: rgba(255, 255, 255, .6); } /* ---------- Utilidades ---------- */ .bd-hidden { display: none !important; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .bd-body { grid-template-columns: 1fr; gap: 0; } .bd-aside { padding-top: 8px; } .bd-aside-sticky { position: static; padding-bottom: 20px; } } @media (max-width: 600px) { .bd-hero { min-height: 380px; } .bd-gallery { grid-template-columns: 1fr; } .bd-lb-prev { left: 12px; } .bd-lb-next { right: 12px; } }