/**
 * Hourstat - Blog público (cambio OpenSpec web-publica-seo-blog-cookies).
 */
.blog-main { background: var(--bg-primary); }
.blog-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.blog-narrow { max-width: 760px; }
.blog .eyebrow {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
    padding: .3rem .75rem; border-radius: var(--radius-full, 999px);
}

.blog-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(37,99,235,0) 60%); }
.blog-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: .8rem 0 .6rem; letter-spacing: -.01em; }
.blog-hero p { color: var(--text-muted); max-width: 680px; margin: 0; line-height: 1.6; }
.blog-hero .blog-category-product { margin-top: 1rem; }
.blog-category-product a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-categories { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.blog-categories a {
    font-size: .85rem; text-decoration: none; color: var(--text-primary); border: 1px solid var(--border);
    background: var(--bg-primary); padding: .35rem .8rem; border-radius: var(--radius-full, 999px);
}
.blog-categories a:hover { border-color: var(--primary); color: var(--primary); }
.blog-categories span { color: var(--text-muted); }
.blog-back { display: inline-block; font-size: .88rem; color: var(--text-muted); text-decoration: none; margin-bottom: .5rem; }
.blog-back:hover { color: var(--primary); }

.blog-list { padding: 1.5rem 0 clamp(3rem, 6vw, 5rem); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
    display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px); background: var(--bg-primary); transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-card-media { display: block; aspect-ratio: 1200 / 630; background: var(--bg-secondary); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 1.1rem 1.2rem 1.4rem; }
.blog-card h2, .blog-card h3 { font-size: 1.08rem; line-height: 1.35; margin: .4rem 0 .5rem; }
.blog-card h2 a, .blog-card h3 a { color: var(--text-primary); text-decoration: none; }
.blog-card h2 a:hover, .blog-card h3 a:hover { color: var(--primary); }
.blog-card p { margin: 0; font-size: .9rem; color: var(--text-muted); line-height: 1.55; }
.blog-meta { font-size: .8rem; color: var(--text-muted); margin: 0; }
.blog-meta a { color: var(--primary); text-decoration: none; }

.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; font-size: .9rem; }
.blog-pagination a { color: var(--primary); text-decoration: none; font-weight: 600; }
.blog-pagination span { color: var(--text-muted); }

.blog-preview { background: #fef3c7; color: #92400e; text-align: center; font-size: .88rem; padding: .6rem 1rem; }
.blog-article { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; }
.blog-article-head h1 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); line-height: 1.15; margin: .5rem 0 .8rem; letter-spacing: -.015em; }
.blog-article-image { margin: 1.5rem auto 2rem; }
.blog-article-image img { width: 100%; height: auto; max-height: 520px; object-fit: contain; background: var(--bg-secondary); border-radius: var(--radius-xl, 16px); display: block; border: 1px solid var(--border); }
.blog-content { font-size: 1.05rem; line-height: 1.75; color: var(--text-primary); overflow-wrap: anywhere; }
.blog-content h2 { font-size: 1.5rem; line-height: 1.3; margin: 2.2rem 0 .8rem; }
.blog-content h3 { font-size: 1.22rem; margin: 1.8rem 0 .6rem; }
.blog-content h4 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.blog-content p { margin: 0 0 1.1rem; }
.blog-content ul, .blog-content ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.blog-content li { margin-bottom: .4rem; }
.blog-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-content blockquote { margin: 1.5rem 0; padding: .8rem 1.2rem; border-left: 4px solid var(--primary); background: var(--bg-secondary); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; }
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.blog-content th, .blog-content td { border: 1px solid var(--border); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.blog-content th { background: var(--bg-secondary); }

.blog-cta {
    margin-top: 2.5rem; padding: clamp(1.25rem, 4vw, 2rem) !important; border-radius: var(--radius-xl, 16px);
    background: linear-gradient(135deg, #1e40af, #2563eb); color: #fff;
}
.blog-cta h2 { margin: 0 0 .5rem; font-size: 1.35rem; color: #fff; }
.blog-cta p { margin: 0; color: rgba(255,255,255,.92); line-height: 1.6; }
.blog-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem !important; }
.blog-cta .btn-primary { background: #fff; color: #1e40af; border-color: #fff; }
.blog-cta .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.blog-cta .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.blog-related { padding: 1rem 0 clamp(3rem, 6vw, 5rem); }
.blog-related h2 { font-size: 1.4rem; margin: 0 0 1.25rem; }