/**
 * Blog Option 01 — Destacado + lista (DESKTOP)
 * Migrado desde assets/css/blog-option01.css (reglas base, sin el bloque
 * @media que ahora es mobile/blog-option01-mobile.css).
 */
.blog-option01 { background: var(--bg-canvas); padding-block: clamp(64px, 9vw, 130px); }

.bl01-header { max-width: 560px; margin: 0 auto 44px; text-align: center; }
.bl01-header .text-eyebrow { justify-content: center; }
.bl01-header .text-eyebrow::before { display: none; }
.bl01-header h2 { margin-top: 12px; }

.bl01-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.bl01-featured { display: block; color: inherit; text-decoration: none; }
.bl01-featured .media { margin-bottom: 18px; box-shadow: var(--elevation-2); }
.bl01-featured h3 { margin: 12px 0 10px; font-size: var(--text-2xl); }
.bl01-featured p { max-width: 46ch; margin-bottom: 12px; }

.bl01-list { display: flex; flex-direction: column; }

.bl01-row {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
}

.bl01-row:first-child { padding-top: 0; }

.bl01-index { font-family: var(--font-display); font-weight: 700; color: var(--text-muted); font-size: var(--text-sm); }
.bl01-row-content { display: flex; flex-direction: column; gap: 6px; }
.bl01-row-title { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); transition: color var(--duration-fast) var(--ease-out); }
.bl01-row:hover .bl01-row-title { color: var(--accent); }