/* MAIN */
        main { position:relative; z-index:2; }
        .container { max-width:1100px; margin:0 auto; padding:var(--spacing-2xl) var(--spacing-lg); }
        .section { max-width:1400px; margin:0 auto; padding:var(--spacing-2xl) var(--spacing-lg); }

        /* BREADCRUMB */
        .breadcrumb {
            max-width:1100px; margin:0 auto; padding:var(--spacing-md) var(--spacing-lg) 0;
            font-size:0.875rem; color:var(--color-text-light); position:relative; z-index:2;
        }
        .breadcrumb a { color:var(--color-accent); }
        .breadcrumb span { margin:0 6px; }

        /* ARTICLE HERO */
        .article-hero {
            max-width:1100px; margin:0 auto; padding:var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg);
        }
        .article-hero .article-tag {
            display:inline-block; background:rgba(8,145,178,0.1); color:var(--color-accent);
            padding:4px 14px; border-radius:var(--radius-full); font-size:0.8rem;
            font-weight:600; margin-bottom:var(--spacing-md); text-transform:uppercase; letter-spacing:0.05em;
        }
        .article-hero h1 { color:var(--color-primary); font-size:2.6rem; max-width:900px; line-height:1.15; }
        .article-meta {
            display:flex; flex-wrap:wrap; gap:var(--spacing-lg); align-items:center;
            margin:var(--spacing-lg) 0; padding:var(--spacing-md) 0;
            border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
        }
        .article-meta span { font-size:0.875rem; color:var(--color-text-light); display:flex; align-items:center; gap:6px; }
        .article-meta strong { color:var(--color-primary); font-weight:600; }

        /* ARTICLE CONTENT */
        .article-body { max-width:1100px; margin:0 auto; padding:0 var(--spacing-lg) var(--spacing-2xl); }
        .article-body h2 { color:var(--color-primary); margin-top:var(--spacing-2xl); margin-bottom:var(--spacing-md); font-size:1.75rem; }
        .article-body h3 { color:var(--color-primary); margin-top:var(--spacing-xl); margin-bottom:var(--spacing-sm); font-size:1.35rem; }
        .article-body p { font-size:1.05rem; line-height:1.8; color:#334155; margin-bottom:var(--spacing-md); }
        .article-body ul, .article-body ol { padding-left:1.5rem; margin-bottom:var(--spacing-md); }
        .article-body li { font-size:1.05rem; line-height:1.8; color:#334155; margin-bottom:4px; }
        .article-body strong { color:var(--color-primary); }

        /* INFO BOX */
        .info-box {
            background:rgba(8,145,178,0.07); border-left:4px solid var(--color-accent);
            padding:var(--spacing-md) var(--spacing-lg); border-radius:0 var(--radius-md) var(--radius-md) 0;
            margin:var(--spacing-lg) 0;
        }
        .info-box p { color:#0c4a6e; margin:0; font-size:1rem; }
        .info-box strong { color:#0c4a6e; }

        /* WARNING BOX */
        .warning-box {
            background:rgba(251,191,36,0.1); border-left:4px solid #f59e0b;
            padding:var(--spacing-md) var(--spacing-lg); border-radius:0 var(--radius-md) var(--radius-md) 0;
            margin:var(--spacing-lg) 0;
        }
        .warning-box p { color:#78350f; margin:0; font-size:0.95rem; }

        /* GRID CARDS */
        .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--spacing-lg); margin:var(--spacing-lg) 0; }
        .card {
            background:var(--color-white); border-radius:var(--radius-lg);
            padding:var(--spacing-lg); border:1px solid var(--color-border);
            transition:all 0.3s;
        }
        .card:hover { border-color:var(--color-accent); box-shadow:0 4px 12px rgba(0,0,0,0.08); transform:translateY(-2px); }
        .card h3 { color:var(--color-primary); margin-bottom:var(--spacing-md); font-size:1.1rem; }
        .card p { font-size:0.95rem; margin:0; }
        .card .card-icon { font-size:2rem; margin-bottom:var(--spacing-sm); }
        .card .card-value { font-size:1.75rem; font-weight:700; color:var(--color-accent); margin-bottom:4px; }
        .card .card-label { font-size:0.85rem; color:var(--color-text-light); }

        /* TABLE */
        .table-wrap { overflow-x:auto; margin:var(--spacing-lg) 0; border-radius:var(--radius-lg); border:1px solid var(--color-border); }
        table { width:100%; border-collapse:collapse; background:var(--color-white); }
        thead tr { background:var(--color-primary); color:var(--color-white); }
        thead th { padding:14px 16px; text-align:left; font-size:0.9rem; font-weight:600; }
        tbody tr:nth-child(even) { background:#f8fafc; }
        tbody tr:hover { background:rgba(8,145,178,0.05); }
        tbody td { padding:12px 16px; font-size:0.95rem; color:#334155; border-bottom:1px solid var(--color-border); }
        tbody td:first-child { font-weight:600; color:var(--color-primary); }
        .tag-good { color:#059669; font-weight:600; }
        .tag-avg { color:#d97706; font-weight:600; }

        /* STEP LIST */
        .steps { counter-reset:step-counter; list-style:none; padding:0; margin:var(--spacing-lg) 0; }
        .steps li {
            counter-increment:step-counter; position:relative;
            padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 60px;
            background:var(--color-white); border:1px solid var(--color-border);
            border-radius:var(--radius-lg); margin-bottom:var(--spacing-md);
            transition:all 0.2s;
        }
        .steps li:hover { border-color:var(--color-accent); box-shadow:var(--shadow-md); }
        .steps li::before {
            content:counter(step-counter); position:absolute; left:16px; top:50%;
            transform:translateY(-50%); width:32px; height:32px; border-radius:50%;
            background:var(--color-accent); color:white; display:flex; align-items:center;
            justify-content:center; font-weight:700; font-size:0.9rem;
        }
        .steps li strong { color:var(--color-primary); display:block; margin-bottom:4px; font-size:1.05rem; }
        .steps li p { margin:0; color:var(--color-text-light); font-size:0.95rem; }

        /* HIGHLIGHT BAND */
        .bg-accent-band {
            background:linear-gradient(135deg,var(--color-accent),var(--color-accent-light));
            color:var(--color-white); padding:var(--spacing-2xl) var(--spacing-lg);
            text-align:center; margin:var(--spacing-2xl) 0;
        }
        .bg-accent-band h2, .bg-accent-band p { color:var(--color-white); }

        /* AUTHOR BOX */
        .author-box {
            display:flex; gap:var(--spacing-lg); align-items:flex-start;
            background:var(--color-white); border:1px solid var(--color-border);
            border-radius:var(--radius-lg); padding:var(--spacing-lg);
            margin:var(--spacing-2xl) 0;
        }
        .author-avatar {
            width:64px; height:64px; border-radius:50%; flex-shrink:0;
            background:linear-gradient(135deg,var(--color-accent),var(--color-accent-light));
            display:flex; align-items:center; justify-content:center;
            font-size:1.5rem; font-weight:700; color:white;
        }
        .author-info h4 { color:var(--color-primary); margin-bottom:4px; }
        .author-info .author-title { color:var(--color-accent); font-size:0.85rem; font-weight:600; margin-bottom:var(--spacing-sm); }
        .author-info p { margin:0; font-size:0.9rem; }
        .author-badges { display:flex; gap:var(--spacing-sm); flex-wrap:wrap; margin-top:var(--spacing-sm); }
        .author-badge {
            background:rgba(8,145,178,0.1); color:var(--color-accent);
            padding:2px 10px; border-radius:var(--radius-full); font-size:0.75rem; font-weight:600;
        }

        /* FAQ */
        .faq-item {
            background:var(--color-white); border:1px solid var(--color-border);
            border-radius:var(--radius-lg); margin-bottom:var(--spacing-md);
            overflow:hidden; transition:all 0.3s ease;
        }
        .faq-item:hover { border-color:var(--color-accent); box-shadow:0 2px 8px rgba(8,145,178,0.1); }
        .faq-question {
            padding:var(--spacing-lg); display:flex; justify-content:space-between;
            align-items:center; cursor:pointer; font-weight:600; color:var(--color-primary);
            background:linear-gradient(135deg, rgba(8,145,178,0.05) 0%, rgba(6,182,212,0.02) 100%);
            transition:all 0.2s ease; user-select:none;
        }
        .faq-item.open .faq-question { background:linear-gradient(135deg, rgba(8,145,178,0.1) 0%, rgba(6,182,212,0.05) 100%); }
        .faq-question:hover { background:linear-gradient(135deg, rgba(8,145,178,0.12) 0%, rgba(6,182,212,0.08) 100%); }
        .faq-toggle { font-size:1.25rem; color:var(--color-accent); transition:transform 0.3s ease; flex-shrink:0; margin-left:var(--spacing-md); }
        .faq-item.open .faq-toggle { transform:rotate(45deg); }
        .faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s ease; }
        .faq-item.open .faq-answer { max-height:500px; }
        .faq-answer-inner { padding:0 var(--spacing-lg) var(--spacing-lg); }
        .faq-answer-inner p { margin:0; color:var(--color-text-light); font-size:0.95rem; line-height:1.7; }

        /* CTA SECTION */
        .cta-section {
            background:linear-gradient(135deg,#1E293B 0%,#0F172A 100%);
            color:white; padding:80px var(--spacing-lg); text-align:center;
        }
        .cta-section h2 { color:white; margin-bottom:var(--spacing-md); }
        .cta-section p { color:#94a3b8; margin-bottom:var(--spacing-xl); max-width:600px; margin-left:auto; margin-right:auto; }
        .cta-buttons { display:flex; gap:var(--spacing-md); justify-content:center; flex-wrap:wrap; }

        /* FOOTER */
        footer {
            background:var(--color-primary); color:var(--color-white);
            padding:var(--spacing-2xl) var(--spacing-lg); border-top:1px solid var(--color-border);
            position:relative; z-index:2;
        }
        .footer-content { max-width:1400px; margin:0 auto; }
        .footer-sections {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
            gap:var(--spacing-2xl); margin-bottom:var(--spacing-2xl); text-align:left;
        }
        .footer-section h4 { color:var(--color-white); margin-bottom:var(--spacing-lg); font-size:1.1rem; font-weight:700; }
        .footer-toggle {
            width:100%; background:transparent; border:none; color:var(--color-white);
            text-align:left; padding:0; margin-bottom:var(--spacing-sm);
            font-size:1.1rem; font-weight:700; display:none;
            justify-content:space-between; align-items:center; cursor:pointer;
        }
        .footer-toggle-icon { font-size:1.1rem; margin-left:var(--spacing-sm); transition:transform 0.2s ease; }
        .footer-panel { max-height:none; overflow:visible; }
        .footer-section.open .footer-toggle-icon { transform:rotate(45deg); }
        .footer-section p { font-size:0.95rem; margin-bottom:var(--spacing-md); color:rgba(255,255,255,0.85); line-height:1.6; }
        .footer-section a { color:rgba(255,255,255,0.85); transition:color 0.2s; }
        .footer-section a:hover { color:var(--color-accent-light); }
        .footer-links {
            display:flex; justify-content:center; gap:var(--spacing-xl);
            flex-wrap:wrap; margin:var(--spacing-2xl) 0 var(--spacing-xl);
            padding:var(--spacing-lg) 0;
            border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15);
        }
        .footer-links a { color:rgba(255,255,255,0.9); font-size:0.9rem; font-weight:500; }
        .footer-links a:hover { color:var(--color-accent-light); }
        .trust-badges { display:flex; gap:var(--spacing-md); justify-content:flex-start; flex-wrap:wrap; margin-top:var(--spacing-md); }
        .badge {
            background:rgba(255,255,255,0.12); color:var(--color-accent-light);
            padding:8px 16px; border:1px solid rgba(255,255,255,0.25);
            border-radius:var(--radius-full); font-weight:600; font-size:0.85rem;
        }
        .footer-bottom { text-align:center; font-size:0.85rem; color:rgba(255,255,255,0.7); padding-top:var(--spacing-lg); margin-top:var(--spacing-lg); border-top:1px solid rgba(255,255,255,0.1); }
        .footer-bottom p { margin:var(--spacing-sm) 0; color:rgba(255,255,255,0.7); }

        /* WHATSAPP */
        .whatsapp-btn {
            position:fixed; bottom:var(--spacing-lg); right:var(--spacing-lg);
            width:56px; height:56px; background:#25D366; color:var(--color-white);
            border-radius:50%; display:flex; align-items:center; justify-content:center;
            text-decoration:none; box-shadow:var(--shadow-lg); transition:all 0.2s; z-index:999;
        }
        .whatsapp-btn:hover { transform:scale(1.1); background:#128C7E; }
        .whatsapp-btn svg { width:32px; height:32px; }

        /* RESPONSIVE */
        @media (max-width:768px) {
            h1 { font-size:1.8rem; }
            h2 { font-size:1.5rem; }
            .article-hero h1 { font-size:1.8rem; }
            nav { display:none; }
            .mobile-menu-btn { display:flex; }
            .mobile-menu { display:flex; }
            .author-box { flex-direction:column; }
            .article-meta { gap:var(--spacing-sm); }
            .footer-toggle { display:flex; }
            .footer-panel { max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
            .footer-section.open .footer-panel { max-height:300px; }
        }

/* ── BLOG INDEX ─────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--spacing-lg); margin-top:var(--spacing-xl); }
.blog-card { background:var(--color-white); border-radius:var(--radius-lg); padding:var(--spacing-lg); border:1px solid var(--color-border); transition:all 0.3s; display:flex; flex-direction:column; }
.blog-card:hover { border-color:var(--color-accent); box-shadow:0 4px 12px rgba(8,145,178,0.1); transform:translateY(-2px); }
.blog-card-date { font-size:0.8rem; color:var(--color-accent); font-weight:600; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
.blog-card h3 { font-size:1.1rem; color:var(--color-primary); margin-bottom:10px; line-height:1.4; }
.blog-card p { font-size:0.9rem; color:var(--color-text-light); flex-grow:1; margin-bottom:16px; }
.blog-card .btn { font-size:0.875rem; padding:8px 20px; align-self:flex-start; }

/* ── SHARE BAR ───────────────────────────────────────────── */
.share-bar { display:flex; align-items:center; gap:var(--spacing-md); padding:var(--spacing-md) var(--spacing-lg); background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); margin:var(--spacing-xl) auto; max-width:1100px; flex-wrap:wrap; }
.share-bar span { font-size:0.9rem; font-weight:600; color:var(--color-primary); }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-md); font-size:0.85rem; font-weight:600; text-decoration:none; transition:all 0.2s; border:none; cursor:pointer; }
.share-btn-wa { background:#25D366; color:white; } .share-btn-wa:hover { background:#128C7E; }
.share-btn-tw { background:#1DA1F2; color:white; } .share-btn-tw:hover { background:#0d8fd9; }
.share-btn-li { background:#0077B5; color:white; } .share-btn-li:hover { background:#005f8d; }

/* ── RELATED ARTICLES ────────────────────────────────────── */
.related-articles { max-width:1100px; margin:var(--spacing-2xl) auto; padding:0 var(--spacing-lg); }
.related-articles h2 { font-size:1.5rem; color:var(--color-primary); margin-bottom:var(--spacing-lg); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .share-bar { gap:var(--spacing-sm); }
  .share-btn { padding:6px 12px; font-size:0.8rem; }
  .blog-grid { grid-template-columns:1fr; }
}