.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
    .blog-hero { position: relative; height: 500px; display: flex; align-items: flex-end; overflow: hidden; background: var(--dark); }
    .blog-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .blog-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.72) 100%); z-index: 1; }
    .blog-hero-content { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem 4rem; color: #fff; width: 100%; }
    .blog-category { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); color: #e2e8f0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: .35rem .85rem; border-radius: 99px; margin-bottom: 1rem; }
    .blog-hero-content h1 { color: #fff; margin-bottom: 1rem; }
    .blog-meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: .88rem; color: rgba(255,255,255,.8); }
    .blog-meta span { display: flex; align-items: center; gap: .35rem; }
    .blog-article-wrap { max-width: 820px; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; }
    .blog-lead { font-size: 1.2rem; line-height: 1.7; color: var(--text-muted); font-style: italic; border-left: 3px solid var(--accent); padding-left: 1.25rem; margin-bottom: 2.5rem; }
    .blog-body { font-size: 1.1rem; color: #334155; line-height: 1.85; font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }
    .blog-body h2 { font-size: 1.8rem; color: #0f172a; margin: 3rem 0 1.25rem; font-weight: 800; font-family: 'Sora', sans-serif; letter-spacing: -0.02em; }
    .blog-body h3 { font-size: 1.4rem; color: #1e293b; margin: 2.5rem 0 1rem; font-weight: 700; font-family: 'Sora', sans-serif; }
    .blog-body p  { margin-bottom: 1.5rem; }
    .blog-body ul, .blog-body ol { padding-left: 1.75rem; margin-bottom: 1.5rem; }
    .blog-body li { margin-bottom: .6rem; }
    .blog-body img { border-radius: 12px; margin: 2.5rem auto; box-shadow: 0 4px 20px rgba(0,0,0,.08); max-width: 100%; display: block; height: auto; background: #f8fafc; min-height: 250px; }
    @supports (aspect-ratio: 1) { .blog-body img[width][height] { min-height: auto; aspect-ratio: attr(width) / attr(height); } }
    .blog-body blockquote { border-left: 4px solid var(--primary); padding: 1.25rem 1.5rem; background: var(--primary-light); border-radius: 0 var(--radius) var(--radius) 0; margin: 2rem 0; font-style: italic; color: var(--primary); font-size: 1.15rem; }
    .blog-body table { width: 100%; border-collapse: collapse; margin: 2.5rem 0; font-size: .95rem; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,.04); }
    .blog-body th, .blog-body td { border-bottom: 1px solid #e2e8f0; padding: 1rem 1.25rem; text-align: left; }
    .blog-body th { background: #f8fafc; color: #334155; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: .85rem; border-bottom: 2px solid #cbd5e1; }
    .blog-body tr:last-child td { border-bottom: none; }
    .blog-body tr:nth-child(even) { background: #fdfdfd; }
    .blog-body tr:hover { background: #f1f5f9; }
    .blog-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
    .blog-back-btn { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-weight: 700; font-size: .9rem; }
    .blog-back-btn:hover { color: var(--primary-h); }
    .blog-share-title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: .6rem; }
    .blog-share-btns { display: flex; gap: .6rem; }
    .share-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer; border: none; min-height: 40px; transition: all var(--tr); }
    .share-btn.wa   { background: #15803d; color: #fff; }
    .share-btn.wa:hover { background: #0e6e30; }
    .share-btn.copy { background: var(--bg2); color: var(--text); border: 1px solid var(--border); }
    .share-btn.copy:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
    .blog-related { padding: 5rem 0; background: var(--bg2); }
    .blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    @media (max-width: 768px) { .blog-related-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .blog-related-grid { grid-template-columns: 1fr; } }
    .blog-related-card { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform var(--tr), box-shadow var(--tr); }
    .blog-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .blog-related-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
    .blog-related-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
    .blog-related-date { font-size: .75rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
    .blog-related-body h3 { font-size: .95rem; color: var(--dark); line-height: 1.35; }
    .blog-related-body p { font-size: .84rem; color: var(--text-muted); line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
    .blog-related-read { color: var(--primary); font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; }
    @media (max-width: 640px) { .blog-hero { height: 300px; } .blog-hero-content { padding: 2rem 1.25rem 3rem; } .blog-article-wrap { padding: 2rem 1.25rem; } }

  /* Blog index hero */
  .blog-index-hero{background:linear-gradient(135deg,var(--dark) 0%,var(--primary) 100%);color:#fff;padding:2.5rem 0 2rem;text-align:center;contain:layout style}
  .blog-index-hero h1{color:#fff;margin-bottom:.75rem}
  .blog-index-hero p{font-size:1.1rem;opacity:.85;max-width:560px;margin:0 auto}
  /* Blog grid */
  .blog-index-section{padding:2.5rem 0 4rem}
  .blog-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}
  .blog-index-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--tr),box-shadow var(--tr);display:flex;flex-direction:column;contain:layout style}
  .blog-index-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
  .blog-index-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#f0f6ff}
  .blog-index-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .blog-index-card:hover .blog-index-card-img img{transform:scale(1.04)}
  .blog-index-card-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,#334155,#64748b);min-height:180px}
  .blog-index-card-body{padding:1.25rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
  .blog-index-date{font-size:.75rem;color:#92400e;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
  .blog-index-card-body h2{font-size:1.05rem;font-weight:700;color:var(--primary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .blog-index-card-body h2 a:hover{color:var(--accent)}
  .blog-index-card-body p{color:var(--text-light);font-size:.9rem;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .blog-index-card-author{font-size:.8rem;color:var(--text-light);display:flex;align-items:center;gap:.4rem}
  .blog-index-read-more{display:inline-flex;align-items:center;gap:.35rem;color:var(--primary);font-weight:700;font-size:.88rem;margin-top:auto}
  .blog-index-read-more:hover{color:var(--accent)}
  /* Paginación */
  .blog-pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem;flex-wrap:wrap}
  .blog-pg-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;font-family:var(--font-d);font-weight:600;font-size:.9rem;background:#fff;color:var(--primary);border:2px solid var(--border);transition:all .2s;text-decoration:none}
  .blog-pg-btn:hover,.blog-pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
  .blog-pg-btn.disabled{opacity:.4;pointer-events:none}
  /* Empty state */
  .blog-empty{text-align:center;padding:4rem 2rem;color:var(--text-light)}
  .blog-empty span{font-size:3rem;display:block;margin-bottom:1rem}
  /* Footer reutilizado */
  .site-footer{background:var(--dark);color:rgba(255,255,255,.8);padding:4rem 0 0}
  .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;padding-bottom:3rem}
  .footer-brand h3{font-family:var(--font-d);color:white;font-size:1.4rem;margin-bottom:.5rem}
  .footer-social{display:flex;gap:.6rem;margin-top:1rem}
  .footer-social a{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:white;text-transform:uppercase;transition:background var(--tr)}
  .footer-social a:hover{background:var(--accent);color:var(--dark)}
  .footer-links h4,.footer-contact h4{color:#fbbf24;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
  .footer-links ul li+li{margin-top:.5rem}
  .footer-links a{color:rgba(255,255,255,.82)}.footer-links a:hover{color:#fbbf24}
  .footer-contact p{margin-bottom:.35rem;font-size:.9rem;color:rgba(255,255,255,.82)}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.07);text-align:center;padding:1.25rem;font-size:.85rem;color:rgba(255,255,255,.75)}
  /* WhatsApp float */
  .wa-float-btn{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;width:58px;height:58px;background:#25d366;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.45);transition:transform .2s}
  .wa-float-btn:hover{transform:scale(1.1)}
  @media(max-width:768px){.wa-float-btn{display:flex}.blog-index-grid{grid-template-columns:1fr}}
  /* Skeleton para evitar layout shift mientras cargan las fuentes */
  .blog-index-hero h1,.blog-index-card-body h2,.nav-logo{font-synthesis:weight}