/* ============================================================
   BLOG — estils compartits per a l'índex i els articles
   ============================================================ */

.blog-index-hero { background:#0a0a0a; color:#fff; padding:60px 20px; text-align:center; }
.blog-index-hero h1 { font-family:'Oswald',sans-serif; font-weight:700; }
.blog-index-hero p { color:rgba(255,255,255,0.7); max-width:600px; margin:10px auto 0; }

.blog-list { max-width:780px; margin:0 auto; padding:50px 20px; }
.blog-card { display:block; background:#fff; border-radius:12px; padding:24px; margin-bottom:20px; text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,0.06); transition:transform .2s ease; }
.blog-card:hover { transform:translateY(-3px); }
.blog-card .blog-card-kicker { color:#FF6B00; font-weight:700; font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; }
.blog-card h2 { font-family:'Oswald',sans-serif; font-size:1.2rem; color:#111; margin:8px 0; }
.blog-card p { color:#555; font-size:0.92rem; margin:0; }

.blog-article { max-width: 780px; margin: 0 auto; padding: 50px 20px 70px; }
.blog-article h1 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2rem; margin-bottom: 10px; }
.blog-article .blog-kicker { color: #FF6B00; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display: block; }
.blog-article .blog-lead { font-size: 1.1rem; color: #444; margin-bottom: 30px; }
.blog-article h2 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.35rem; margin-top: 40px; margin-bottom: 15px; }
.blog-article p { line-height: 1.7; color: #333; }
.blog-article table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; font-size: 0.92rem; }
.blog-article th { background: #1a1a1a; color: #fff; text-align: left; padding: 10px 12px; }
.blog-article td { padding: 10px 12px; border-bottom: 1px solid #eee; }
.blog-article tr:nth-child(even) { background: #f7f7f8; }
.blog-article .tip-box { background: #fff3ec; border-left: 4px solid #FF6B00; padding: 16px 20px; border-radius: 6px; margin: 25px 0; }
.blog-article .tip-box strong { color: #cc5500; }
.blog-article .blog-cta { background: #0a0a0a; color: #fff; border-radius: 12px; padding: 30px; text-align: center; margin-top: 45px; }
.blog-article .blog-cta a { display: inline-block; background: #FF6B00; color: #fff; font-weight: 700; padding: 12px 28px; border-radius: 8px; text-decoration: none; margin: 6px; }
.blog-article .blog-cta a.secondary { background: transparent; border: 1px solid rgba(255,255,255,0.3); }

.breadcrumb-blog { max-width: 780px; margin: 20px auto 0; padding: 0 20px; font-size: 0.85rem; }
.breadcrumb-blog a { color: #666; text-decoration: none; }