:root {
  --primary-navy: #051025;
  --primary-blue: #0d4d8c;
  --bright-blue: #1e88e5;
  --accent-cyan: #00e5ff;
  --text-primary: #10233f;
  --text-secondary: #51627b;
  --line: #d8e6f7;
  --card-bg: rgba(255,255,255,.94);
  --shadow-soft: 0 12px 28px rgba(7, 27, 56, 0.09);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text-primary);background:linear-gradient(180deg,#eef5ff 0%,#f7fbff 100%)}

.blog-navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:.56rem 0;background:rgba(255,255,255,.93);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid rgba(15,31,61,.1);box-shadow:0 8px 20px rgba(8,28,58,.08)}
.blog-nav-container{max-width:1080px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between}
.blog-logo-link{display:inline-flex;align-items:center;text-decoration:none}
.blog-logo{height:180px;width:auto;display:block;margin:-28px 0;filter:brightness(1.1) drop-shadow(0 2px 4px rgba(13,77,140,.3))}
.blog-nav-cta{text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--primary-blue),var(--bright-blue));border-radius:999px;min-height:42px;padding:.56rem .98rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.85rem;box-shadow:0 8px 20px rgba(13,77,140,.22)}

.container{max-width:1080px;margin:0 auto;padding:6.2rem 1rem 3rem}
.blog-hero{background:var(--card-bg);border:1px solid var(--line);border-radius:20px;padding:1rem;box-shadow:var(--shadow-soft)}
.blog-title{margin:.2rem 0 .3rem;font-size:2rem;line-height:1.2;font-weight:800;color:var(--primary-navy)}
.blog-subtitle{margin:0;color:var(--text-secondary);line-height:1.55}

.filter-row{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.55rem}
.filter-btn{border:1px solid #c9dcf6;background:#fff;color:var(--primary-blue);padding:.45rem .75rem;border-radius:999px;font-weight:700;cursor:pointer;transition:all .2s var(--ease)}
.filter-btn.active,.filter-btn:hover{background:linear-gradient(135deg,var(--primary-blue),var(--bright-blue));color:#fff;border-color:transparent}

.featured{margin-top:1rem;background:var(--card-bg);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft);display:grid;grid-template-columns:1fr 1fr}
.featured.no-media{grid-template-columns:1fr}
.featured-media{display:block;background:#eef4ff}
.featured-media picture{display:block}
.featured-media img{width:100%;height:260px;object-fit:contain;background:#eef4ff}
.featured-media:empty{display:none}
.featured-body{padding:1rem}
.badge{display:inline-block;background:#e8f3ff;color:var(--primary-blue);font-weight:700;padding:.28rem .6rem;border-radius:999px;font-size:.78rem}
.read-badge{margin-left:.45rem;background:#ecf9ff;color:#0b5f88}
.featured h2{margin:.55rem 0 .45rem;font-size:1.35rem;color:var(--primary-navy)}
.featured p{margin:0 0 .85rem;color:var(--text-secondary);line-height:1.55}
.link-btn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--primary-blue),var(--bright-blue));padding:.6rem .9rem;border-radius:10px;font-weight:700}

.grid{margin-top:1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
.card{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 18px rgba(13,77,140,.07);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 24px rgba(13,77,140,.12)}
.card-media{display:block;background:#eef4ff}
.card-media picture{display:block}
.card-media img{width:100%;height:180px;object-fit:contain;background:#eef4ff}
.card-media:empty{display:none}
.card-body{padding:.82rem}
.card h3{margin:.55rem 0 .45rem;font-size:1rem;color:var(--primary-navy);line-height:1.35}
.card p{margin:0 0 .7rem;color:var(--text-secondary);font-size:.92rem;line-height:1.45}
.card.hidden{display:none}

.article-wrap{max-width:820px;margin:0 auto;padding:6.2rem 1rem 5rem}
.article-hero{background:var(--card-bg);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft)}
.article-hero picture{display:block;background:#eef4ff}
.article-hero img{width:100%;height:320px;object-fit:contain;background:#eef4ff}
.article-content{padding:1rem}
.article-content h1{margin:.2rem 0 .45rem;font-size:1.9rem;line-height:1.2;color:var(--primary-navy)}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 .85rem}
.article-content p{color:var(--text-secondary);line-height:1.65}
.section-card{margin-top:.85rem;background:var(--card-bg);border:1px solid var(--line);border-radius:14px;padding:.9rem;box-shadow:0 8px 18px rgba(13,77,140,.06)}
.section-card h2{margin:0 0 .45rem;font-size:1.12rem;color:var(--primary-navy)}
.gallery-pane{margin-top:.85rem;background:var(--card-bg);border:1px solid var(--line);border-radius:14px;padding:.9rem;box-shadow:0 8px 18px rgba(13,77,140,.06)}
.gallery-pane h3{margin:0 0 .55rem;color:var(--primary-navy)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}
.gallery-item{margin:0;background:#eef4ff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gallery-item img{display:block;width:100%;height:110px;object-fit:cover}

.inline-actions{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}
.wa-share{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;background:#25d366;color:#fff;padding:.56rem .85rem;border-radius:10px;font-weight:700}
.related{margin-top:1rem;background:var(--card-bg);border:1px solid var(--line);border-radius:14px;padding:.9rem}
.related h3{margin:0 0 .45rem;color:var(--primary-navy)}

.floating-whatsapp{position:fixed;right:.8rem;bottom:1.2rem;width:58px;height:58px;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;font-size:1.6rem;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(37,211,102,.35)}

@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured{grid-template-columns:1fr}.featured-media img{height:220px}.card-media img{height:165px}.article-hero img{height:260px}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.blog-title{font-size:1.55rem}.article-content h1{font-size:1.45rem}.blog-logo{height:120px;margin:-18px 0}.blog-nav-cta{font-size:.78rem;padding:.5rem .8rem}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}