:root{--jz-yellow:#FFD700;--jz-yellow-dark:#FF6600;--jz-black:#1A1A1A;--jz-gray-100:#F7F7F7;--jz-gray-200:#EEEEEE;--jz-gray-300:#CCCCCC;--jz-gray-500:#888888;--jz-gray-700:#444444;--jz-text:#222;--jz-text-light:#666;--jz-white:#fff;--jz-radius:12px;--jz-radius-sm:8px;--jz-shadow:0 2px 16px rgba(0,0,0,.07);--jz-shadow-hover:0 6px 28px rgba(0,0,0,.13);--jz-font:'Inter',-apple-system,sans-serif;--art-max:860px;--brand-primary:#E30613;--brand-secondary:#FF6600;--brand-accent:#FFD700;--brand-bg:#FFF5F5;--brand-on-primary:#ffffff}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--jz-font);color:var(--jz-text);background:var(--jz-white);line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
img{max-width:100%;height:auto}a{text-decoration:none;color:inherit}button{font-family:var(--jz-font)}

/* NAVBAR */
.jz-navbar{background:var(--jz-white);border-bottom:1px solid var(--jz-gray-200);position:sticky;top:0;z-index:1000;transition:box-shadow .2s}
.jz-navbar.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.1)}
.jz-nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;max-width:1200px;margin:0 auto}
.jz-logo{font-size:22px;font-weight:800;color:var(--jz-yellow);letter-spacing:-.5px;flex-shrink:0;cursor:pointer}
.jz-nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.jz-nav-links a{font-size:13.5px;font-weight:500;color:var(--jz-gray-700);padding:6px 12px;border-radius:8px;transition:all .15s}
.jz-nav-links a:hover{background:var(--jz-gray-100);color:var(--jz-black)}
.jz-nav-phone{font-size:13px;font-weight:700;color:var(--jz-black);white-space:nowrap;display:flex;align-items:center;gap:5px}
.jz-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--jz-black);font-size:24px;line-height:1}
.jz-mobile-nav{display:none;background:var(--jz-white);border-top:1px solid var(--jz-gray-200);padding:12px 20px 16px}
.jz-mobile-nav.open{display:block}
.jz-mobile-nav a{display:block;font-size:15px;font-weight:500;color:var(--jz-gray-700);padding:12px 0;border-bottom:1px solid var(--jz-gray-200)}
.jz-mobile-nav a:last-child{border-bottom:none}

/* PROGRESS BAR */
.progress-bar-top{position:fixed;top:0;left:0;height:3px;background:var(--jz-yellow);z-index:2000;width:0;transition:width .1s linear;display:none}
.progress-bar-top.visible{display:block}

/* VIEWS */
#view-blog{display:block}#view-article{display:none}

/* ── BLOG LIST ── */
.blog-hero{padding:44px 20px 36px;text-align:center;max-width:1200px;margin:0 auto}
.blog-hero h1{font-size:clamp(26px,5vw,38px);font-weight:800;color:var(--jz-black);letter-spacing:-.5px;margin-bottom:8px}
.blog-hero p{font-size:15px;color:var(--jz-text-light);max-width:440px;margin:0 auto}
.blog-wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* FEATURED */
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px}
.card-post{border-radius:var(--jz-radius);overflow:hidden;background:var(--jz-white);box-shadow:var(--jz-shadow);transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column;cursor:pointer}
.card-post:hover{box-shadow:var(--jz-shadow-hover);transform:translateY(-3px)}
.card-img-wrap{position:relative;overflow:hidden;aspect-ratio:16/10;flex-shrink:0;background:var(--jz-gray-200)}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card-post:hover .card-img-wrap img{transform:scale(1.04)}
.badge-dest{position:absolute;top:10px;left:10px;background:var(--jz-yellow);color:var(--jz-black);font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 9px;border-radius:5px}
.card-body-custom{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--jz-text-light);margin-bottom:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;border-radius:20px;background:var(--jz-gray-100);width:fit-content}
.card-cat iconify-icon{font-size:13px;flex-shrink:0}
.cat-dot{display:none}
.card-h2{font-size:17px;font-weight:700;color:var(--jz-black);line-height:1.35;margin-bottom:8px;letter-spacing:-.2px}
.card-desc{font-size:13px;color:var(--jz-text-light);line-height:1.6;margin-bottom:14px;flex:1}
.card-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--jz-gray-500)}
.card-meta span{display:flex;align-items:center;gap:3px}

/* SECTION LABEL */
.section-label{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--jz-text-light);margin-bottom:18px}
.section-label::after{content:'';flex:1;height:1px;background:var(--jz-gray-200)}

/* POST LIST */
.post-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--jz-gray-200);cursor:pointer;transition:opacity .15s}
.post-item:last-child{border-bottom:none}
.post-item:hover{opacity:.75}
.post-thumb{width:88px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--jz-gray-200)}
.post-info{flex:1;min-width:0}
.post-cat-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--jz-text-light);margin-bottom:5px;display:inline-flex;align-items:center;gap:4px}
.post-title{font-size:14px;font-weight:600;color:var(--jz-black);line-height:1.35;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-date{font-size:11px;color:var(--jz-gray-500)}

/* TOPIC PILLS — pill-container */
.topic-section{padding:32px 0 40px}
.topic-title{font-size:22px;font-weight:700;color:var(--jz-black);text-align:center;margin-bottom:20px;letter-spacing:-.3px}
.topic-container-wrap{display:flex;justify-content:center;width:100%;overflow-x:auto;scrollbar-width:none}
.topic-container-wrap::-webkit-scrollbar{display:none}
.topic-container{display:inline-flex;align-items:center;background:var(--jz-gray-100);border:1.5px solid var(--jz-gray-300);border-radius:40px;padding:5px;gap:0}
.topic-pill{padding:9px 22px;border-radius:32px;border:none;font-size:13.5px;font-weight:500;color:var(--jz-gray-500);white-space:nowrap;cursor:pointer;transition:all .18s;flex-shrink:0;background:transparent}
.topic-pill:hover{color:var(--jz-black)}
.topic-pill.active{background:var(--jz-white);color:var(--jz-black);font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,.1),0 0 0 1px var(--jz-gray-300)}

/* ARTICLES GRID */
.articles-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px}
.article-card-hidden{display:none}

/* LOAD MORE */
.load-more-wrap{text-align:center;padding:20px 0 48px}
.btn-load-more{padding:12px 32px;border-radius:32px;border:2px solid var(--jz-black);font-size:14px;font-weight:600;color:var(--jz-black);background:var(--jz-white);cursor:pointer;transition:all .2s}
.btn-load-more:hover{background:var(--jz-black);color:var(--jz-white)}

/* NEWSLETTER */
.newsletter-strip{background:var(--jz-gray-100);border-radius:var(--jz-radius);padding:32px 28px;margin-bottom:56px;text-align:center}
.newsletter-strip h3{font-size:20px;font-weight:700;color:var(--jz-black);margin-bottom:6px}
.newsletter-strip p{font-size:14px;color:var(--jz-text-light);margin-bottom:20px}
.newsletter-form{display:flex;gap:8px;max-width:420px;margin:0 auto}
.newsletter-input{flex:1;padding:12px 16px;border:1.5px solid var(--jz-gray-300);border-radius:32px;font-size:14px;outline:none;transition:border-color .2s}
.newsletter-input:focus{border-color:var(--jz-black)}
.newsletter-input::placeholder{color:var(--jz-gray-500)}
.btn-subscribe{padding:12px 22px;border-radius:32px;border:none;background:var(--jz-black);color:var(--jz-white);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s}
.btn-subscribe:hover{background:var(--jz-gray-700)}

/* ── ARTICLE VIEW ── */
.breadcrumb-wrap{max-width:1520px;margin:0 auto;padding:16px 32px 0}
.breadcrumb-list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--jz-text-light);flex-wrap:wrap}
.breadcrumb-list li::after{content:'›';margin-left:6px;color:var(--jz-gray-300)}
.breadcrumb-list li:last-child::after{display:none}
.breadcrumb-list a{color:var(--jz-text-light);transition:color .15s;cursor:pointer}
.breadcrumb-list a:hover{color:var(--jz-black)}
.breadcrumb-list li:last-child{color:var(--jz-black);font-weight:500}
.article-wrap{max-width:100%;margin:0 auto;padding:0 0 60px}
.article-header{padding:24px 0 0}
.article-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.article-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--jz-text-light);display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;border-radius:20px;background:var(--jz-gray-100)}
.article-cat .dot{display:none}
.article-reading-time{font-size:11px;color:var(--jz-gray-500);display:flex;align-items:center;gap:4px}
.article-h1{font-size:clamp(26px,4vw,40px);font-weight:800;color:var(--jz-black);line-height:1.2;letter-spacing:-.5px;margin-bottom:16px}
.article-meta-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--jz-gray-200);flex-wrap:wrap}
.author-chip{display:flex;align-items:center;gap:8px}
.author-avatar{width:32px;height:32px;border-radius:50%;background:var(--jz-yellow);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--jz-black);flex-shrink:0}
.author-name{font-size:12px;font-weight:600;color:var(--jz-black)}
.author-role{font-size:11px;color:var(--jz-gray-500)}
.meta-sep{width:1px;height:24px;background:var(--jz-gray-200)}
.meta-item{font-size:12px;color:var(--jz-gray-500);display:flex;align-items:center;gap:4px}
.share-row{display:flex;gap:7px;margin-left:auto}
.share-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--jz-gray-200);background:var(--jz-white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--jz-gray-700);transition:all .2s}
.share-btn:hover{background:var(--jz-black);color:var(--jz-white);border-color:var(--jz-black)}
.article-hero-img{border-radius:var(--jz-radius);overflow:hidden;margin-bottom:8px;aspect-ratio:16/9}
.article-hero-img img{width:100%;height:100%;object-fit:cover}
.img-caption{font-size:11px;color:var(--jz-gray-500);margin-bottom:28px;font-style:italic}
.answer-box{background:var(--jz-gray-100);border-left:4px solid var(--jz-yellow-dark);border-radius:0 var(--jz-radius-sm) var(--jz-radius-sm) 0;padding:16px 18px;margin-bottom:28px}
.answer-box-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--jz-yellow-dark);margin-bottom:6px}
.answer-box p{font-size:14px;color:var(--jz-text);line-height:1.65;margin:0}
.article-body{font-size:17px;line-height:1.8;color:var(--jz-text)}
.article-body h2{font-size:clamp(20px,2.5vw,26px);font-weight:700;color:var(--jz-black);margin:40px 0 16px;letter-spacing:-.3px;line-height:1.25}
.article-body h3{font-size:17px;font-weight:600;color:var(--jz-black);margin:26px 0 10px}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 18px}
.article-body li{margin-bottom:7px}
.article-body strong{color:var(--jz-black)}
.article-body a{color:var(--jz-black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body blockquote{border-left:3px solid var(--jz-yellow-dark);padding:14px 18px;background:var(--jz-gray-100);border-radius:0 8px 8px 0;margin:24px 0;font-size:15px;font-style:italic;color:var(--jz-gray-700)}
.article-body figure{margin:28px 0;border-radius:var(--jz-radius);overflow:hidden}
.article-body figure img{width:100%;display:block}
.article-body figcaption{font-size:11px;color:var(--jz-gray-500);padding:8px 12px;background:var(--jz-gray-100);font-style:italic}

/* ── STYLE 2: LISTICLE ── numbered cards */
.listicle-item{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px;padding:20px;background:var(--jz-gray-100);border-radius:var(--jz-radius);border:1px solid var(--jz-gray-200)}
.listicle-num{font-size:28px;font-weight:800;color:var(--jz-yellow-dark);line-height:1;flex-shrink:0;width:36px;text-align:center;margin-top:2px}
.listicle-body h3{font-size:16px;font-weight:700;color:var(--jz-black);margin:0 0 6px;line-height:1.3}
.listicle-body p{font-size:14px;color:var(--jz-text-light);margin:0;line-height:1.65}
.listicle-verdict{background:var(--jz-black);color:var(--jz-white);border-radius:var(--jz-radius);padding:20px 22px;margin:28px 0;display:flex;align-items:center;gap:16px}
.listicle-verdict-icon{font-size:32px;flex-shrink:0}
.listicle-verdict p{font-size:14px;color:rgba(255,255,255,.85);margin:0;line-height:1.6}
.listicle-verdict strong{color:var(--jz-yellow)}

/* ── STYLE 3: LONGFORM EDITORIAL ── */
.longform-lead{font-size:20px;line-height:1.7;color:var(--jz-black);font-weight:400;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--jz-gray-200)}
.longform-pullquote{font-size:22px;font-weight:700;color:var(--jz-black);line-height:1.35;padding:24px 0;margin:28px 0;border-top:3px solid var(--jz-black);border-bottom:1px solid var(--jz-gray-200);letter-spacing:-.3px}
.longform-pullquote span{color:var(--jz-yellow-dark)}
.longform-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 28px}
.longform-stat{text-align:center;padding:18px 14px;background:var(--jz-gray-100);border-radius:var(--jz-radius-sm);border:1px solid var(--jz-gray-200)}
.longform-stat-num{font-size:28px;font-weight:800;color:var(--jz-black);letter-spacing:-1px;line-height:1}
.longform-stat-label{font-size:11px;color:var(--jz-text-light);margin-top:4px;line-height:1.4}
.longform-byline{font-size:12px;color:var(--jz-gray-500);font-style:italic;margin-bottom:20px}
@media(max-width:480px){.longform-stat-row{grid-template-columns:1fr 1fr}}

/* ── STYLE 4: HOW-TO / STEP-BY-STEP ── */
.howto-step{display:flex;gap:20px;margin-bottom:32px;position:relative}
.howto-step:not(:last-child)::before{content:'';position:absolute;left:19px;top:44px;bottom:-12px;width:2px;background:var(--jz-gray-200)}
.howto-num{width:40px;height:40px;border-radius:50%;background:var(--jz-black);color:var(--jz-white);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;position:relative;z-index:1}
.howto-body{flex:1;padding-top:6px}
.howto-body h3{font-size:16px;font-weight:700;color:var(--jz-black);margin:0 0 8px}
.howto-body p{font-size:14px;color:var(--jz-text-light);margin:0 0 10px;line-height:1.65}
.howto-tip{background:rgba(230,194,0,.12);border:1px solid rgba(230,194,0,.3);border-radius:var(--jz-radius-sm);padding:10px 13px;font-size:13px;color:var(--jz-text);display:flex;gap:8px;align-items:flex-start}
.howto-tip-icon{flex-shrink:0;margin-top:1px}
.howto-summary{background:var(--jz-gray-100);border-radius:var(--jz-radius);padding:18px 20px;margin:24px 0;border-left:4px solid var(--jz-black)}
.howto-summary p{font-size:13px;color:var(--jz-text-light);margin:0;line-height:1.65}
.howto-summary strong{color:var(--jz-black)}

/* ── STYLE 5: NEWS BRIEF ── */
.newsbrief-kicker{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--jz-yellow-dark);margin-bottom:4px}
.newsbrief-dateline{font-size:12px;color:var(--jz-gray-500);margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--jz-black)}
.newsbrief-deck{font-size:17px;font-weight:600;color:var(--jz-black);line-height:1.5;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--jz-gray-200)}
.newsbrief-highlight{border:1.5px solid var(--jz-gray-200);border-radius:var(--jz-radius-sm);padding:14px 16px;margin:20px 0;display:flex;gap:14px;align-items:center}
.newsbrief-highlight-icon{font-size:26px;flex-shrink:0}
.newsbrief-highlight p{font-size:13px;color:var(--jz-text);margin:0;line-height:1.6}
.newsbrief-highlight strong{color:var(--jz-black)}
.newsbrief-bullets{list-style:none;padding:0;margin:16px 0 20px}
.newsbrief-bullets li{padding:10px 0;border-bottom:1px solid var(--jz-gray-200);font-size:14px;color:var(--jz-text);display:flex;gap:10px;align-items:baseline}
.newsbrief-bullets li::before{content:'→';color:var(--jz-yellow-dark);font-weight:700;flex-shrink:0}
.newsbrief-bullets li:last-child{border-bottom:none}
.newsbrief-context{font-size:13px;color:var(--jz-text-light);line-height:1.7;background:var(--jz-gray-100);border-radius:var(--jz-radius-sm);padding:14px 16px;margin:20px 0}
.tariff-table-wrap{overflow-x:auto;margin:24px 0 28px;border-radius:var(--jz-radius);box-shadow:var(--jz-shadow)}
.tariff-table{width:100%;border-collapse:collapse;font-size:14px;min-width:380px}
.tariff-table thead tr{background:var(--jz-black);color:var(--jz-white)}
.tariff-table thead th{padding:12px 16px;text-align:left;font-weight:600;font-size:12px}
.tariff-table tbody tr:nth-child(even){background:var(--jz-gray-100)}
.tariff-table tbody td{padding:12px 16px;border-bottom:1px solid var(--jz-gray-200);color:var(--jz-text);vertical-align:middle}
.tariff-table tbody tr:last-child td{border-bottom:none}
.price{font-weight:700;color:var(--jz-black);font-size:15px}
.tag-best{background:var(--jz-yellow);color:var(--jz-black);font-size:9px;font-weight:800;padding:2px 7px;border-radius:4px;text-transform:uppercase;margin-left:6px}
.cta-card{background:var(--jz-black);border-radius:var(--jz-radius);padding:28px 24px;margin:32px 0;text-align:center;color:var(--jz-white)}
.cta-card h3{font-size:20px;font-weight:800;margin-bottom:6px;color:var(--jz-white)}
.cta-card p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:18px}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-cta-primary{padding:12px 24px;border-radius:32px;background:var(--jz-yellow);color:var(--jz-black);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s;font-family:var(--jz-font)}
.btn-cta-primary:hover{background:var(--jz-yellow-dark)}
.btn-cta-secondary{padding:12px 24px;border-radius:32px;background:transparent;color:var(--jz-white);font-weight:600;font-size:14px;border:1.5px solid rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;gap:7px;transition:all .2s;font-family:var(--jz-font)}
.btn-cta-secondary:hover{border-color:var(--jz-white);background:rgba(255,255,255,.08)}
.faq-section{margin:36px 0 32px}
.faq-section h2{font-size:21px;font-weight:700;color:var(--jz-black);margin-bottom:16px}
.faq-item{border:1px solid var(--jz-gray-200);border-radius:var(--jz-radius-sm);margin-bottom:8px;overflow:hidden}
.faq-q{width:100%;background:var(--jz-white);border:none;padding:16px 18px;text-align:left;font-size:15px;font-weight:600;color:var(--jz-black);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .15s}
.faq-q:hover{background:var(--jz-gray-100)}
.faq-chevron{font-size:18px;color:var(--jz-gray-500);transition:transform .25s;flex-shrink:0}
.faq-q.open .faq-chevron{transform:rotate(180deg)}
.faq-a{font-size:14px;color:var(--jz-text-light);padding:0 18px 16px;line-height:1.7;display:none}
.faq-a.open{display:block}
.article-footer-tags{display:flex;flex-wrap:wrap;gap:7px;margin:32px 0 24px}
.article-tag{padding:6px 14px;border-radius:20px;border:1px solid var(--jz-gray-200);font-size:12px;color:var(--jz-gray-700);cursor:pointer;transition:all .15s}
.article-tag:hover{background:var(--jz-black);color:var(--jz-white);border-color:var(--jz-black)}
.article-nav-share{display:flex;align-items:center;gap:10px;padding:20px 0;border-top:1px solid var(--jz-gray-200);border-bottom:1px solid var(--jz-gray-200);margin-bottom:40px;flex-wrap:wrap}
.share-label{font-size:12px;font-weight:600;color:var(--jz-black)}
.share-icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--jz-gray-200);background:var(--jz-white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;color:var(--jz-gray-700);transition:all .2s}
.share-icon-btn:hover{background:var(--jz-black);color:var(--jz-white);border-color:var(--jz-black)}
.back-btn{margin-left:auto;font-size:13px;font-weight:600;color:var(--jz-black);display:flex;align-items:center;gap:5px;cursor:pointer;background:none;border:none;padding:0}
.back-btn:hover{opacity:.7}
.related-section{margin-bottom:48px}
.related-section h3{font-size:18px;font-weight:700;color:var(--jz-black);margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related-card{border:1px solid var(--jz-gray-200);border-radius:var(--jz-radius-sm);overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .2s}
.related-card:hover{box-shadow:var(--jz-shadow-hover);transform:translateY(-2px)}
.related-img{aspect-ratio:16/9;overflow:hidden;background:var(--jz-gray-200)}
.related-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.related-card:hover .related-img img{transform:scale(1.04)}
.related-body{padding:12px 14px}
.related-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--jz-text-light);margin-bottom:5px;display:inline-flex;align-items:center;gap:3px}
.related-title{font-size:13px;font-weight:600;color:var(--jz-black);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* FOOTER */
.jz-footer{background:var(--jz-gray-100);border-top:1px solid var(--jz-gray-200);padding:32px 20px;text-align:center;font-size:12px;color:var(--jz-gray-500)}
.jz-footer a{color:var(--jz-gray-700);margin:0 8px}
.jz-footer a:hover{color:var(--jz-black)}

/* WHATSAPP */
.wa-widget{position:fixed;bottom:24px;right:20px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.wa-bubble{background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.35);cursor:pointer;transition:transform .2s,box-shadow .2s;border:none}
.wa-bubble:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.5)}
.wa-popup{background:var(--jz-white);border-radius:var(--jz-radius);box-shadow:0 8px 40px rgba(0,0,0,.15);padding:20px;width:270px;display:none;animation:fadeUp .25s ease}
.wa-popup.open{display:block}
.wa-popup-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wa-avatar{width:40px;height:40px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-popup-head h4{font-size:14px;font-weight:700;color:var(--jz-black);margin:0 0 2px}
.wa-popup-head p{font-size:11px;color:var(--jz-text-light);margin:0}
.wa-msg{background:var(--jz-gray-100);border-radius:8px 8px 8px 2px;padding:11px 13px;font-size:13px;color:var(--jz-text);line-height:1.5;margin-bottom:12px}
.wa-cta{display:block;background:#25D366;color:#fff;text-align:center;border-radius:10px;padding:11px;font-size:14px;font-weight:600;transition:background .2s}
.wa-cta:hover{background:#20bc5a;color:#fff}
.wa-close{position:absolute;top:-10px;right:-10px;background:var(--jz-gray-500);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wa-popup-wrap{position:relative}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view-enter{animation:viewIn .28s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════
   SCROLL EFFECTS & ANIMATIONS
══════════════════════════════════════════ */

/* Reveal on scroll — base state */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .55s ease,transform .55s ease}
.reveal-scale.visible{opacity:1;transform:scale(1)}
/* Stagger delays */
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* Parallax hero wrapper */
.article-hero-parallax{position:relative;overflow:hidden;border-radius:var(--jz-radius);margin-bottom:8px;aspect-ratio:16/9}
.article-hero-parallax img{width:100%;height:120%;object-fit:cover;display:block;will-change:transform}

/* Reading progress pulse */
@keyframes progressPulse{0%,100%{box-shadow:0 0 0 0 rgba(230,194,0,.4)}50%{box-shadow:0 0 0 4px rgba(230,194,0,0)}}
.progress-bar-top.at100{animation:progressPulse .6s ease}

/* Sticky TOC — 3-column layout desktop */
.art-layout{position:relative;max-width:1520px;margin:0 auto;padding:0 32px}
.art-toc{display:none}
.art-sidebar{display:none}

/* ── 1200-1399px: sidebar + contenido solo (sin TOC) ── */
@media(min-width:1200px) and (max-width:1399px){
  .art-layout{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start}
  .art-main{min-width:0}
  .art-toc{display:none!important}
  .art-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px;padding-top:24px}
}

/* ── 1400px+: layout completo 3 columnas ── */
@media(min-width:1400px){
  .art-layout{display:grid;grid-template-columns:200px 1fr 200px;gap:40px;align-items:start}
  .art-main{min-width:0}
  .art-toc{display:block;position:sticky;top:84px;padding-top:24px}
  .art-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px;padding-top:24px}
}

@media(min-width:1200px){
  /* ── LEFT SIDEBAR ── */
  .sidebar-author{background:var(--jz-gray-100);border-radius:var(--jz-radius);padding:18px 16px;text-align:center}
  .sidebar-avatar{width:52px;height:52px;border-radius:50%;background:var(--jz-yellow);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--jz-black);margin:0 auto 10px}
  .sidebar-author-name{font-size:13px;font-weight:700;color:var(--jz-black);margin-bottom:2px}
  .sidebar-author-role{font-size:11px;color:var(--jz-gray-500)}
  .sidebar-divider{height:1px;background:var(--jz-gray-200);margin:10px 0}
  .sidebar-meta{font-size:11px;color:var(--jz-gray-500);display:flex;flex-direction:column;gap:6px}
  .sidebar-meta span{display:flex;align-items:center;gap:6px}

  .sidebar-cta{background:var(--jz-black);border-radius:var(--jz-radius);padding:18px 16px;text-align:center}
  .sidebar-cta-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.5);margin-bottom:8px}
  .sidebar-cta-title{font-size:14px;font-weight:700;color:var(--jz-white);line-height:1.35;margin-bottom:12px}
  .sidebar-cta-price{font-size:22px;font-weight:800;color:var(--jz-yellow);letter-spacing:-1px;margin-bottom:14px;line-height:1}
  .sidebar-cta-price small{font-size:12px;font-weight:500;color:rgba(255,255,255,.5);display:block;margin-top:2px}
  .sidebar-cta-btn{display:block;width:100%;padding:10px;border-radius:10px;background:var(--jz-yellow);color:var(--jz-black);font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:var(--jz-font);transition:background .2s;text-align:center}
  .sidebar-cta-btn:hover{background:var(--jz-yellow-dark)}
  .sidebar-cta-wa{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:rgba(255,255,255,.6);margin-top:10px;cursor:pointer;background:none;border:none;font-family:var(--jz-font);width:100%;transition:color .2s}
  .sidebar-cta-wa:hover{color:#25D366}

  .sidebar-tags{background:var(--jz-gray-100);border-radius:var(--jz-radius);padding:14px 16px}
  .sidebar-tags-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--jz-gray-500);margin-bottom:10px}
  .sidebar-tags-list{display:flex;flex-wrap:wrap;gap:5px}
  .sidebar-tag{padding:4px 10px;border-radius:14px;border:1px solid var(--jz-gray-200);font-size:11px;color:var(--jz-gray-700);cursor:pointer;transition:all .15s;background:var(--jz-white)}
  .sidebar-tag:hover{background:var(--jz-black);color:var(--jz-white);border-color:var(--jz-black)}

  .sidebar-related{background:var(--jz-white);border:1px solid var(--jz-gray-200);border-radius:var(--jz-radius);overflow:hidden}
  .sidebar-related-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--jz-gray-500);padding:12px 14px;border-bottom:1px solid var(--jz-gray-200)}
  .sidebar-related-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--jz-gray-200);cursor:pointer;transition:background .15s;align-items:flex-start}
  .sidebar-related-item:last-child{border-bottom:none}
  .sidebar-related-item:hover{background:var(--jz-gray-100)}
  .sidebar-related-img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--jz-gray-200)}
  .sidebar-related-text{flex:1;min-width:0}
  .sidebar-related-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--jz-gray-500);margin-bottom:3px;display:inline-flex;align-items:center;gap:3px}
  .sidebar-related-ttl{font-size:11px;font-weight:600;color:var(--jz-black);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* ── RIGHT TOC ── */
  .art-toc-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--jz-gray-500);margin-bottom:12px;padding:0 2px}
  .art-toc-list{list-style:none;padding:0;margin:0 0 20px}
  .art-toc-list li{margin-bottom:1px}
  .art-toc-list a{font-size:12px;color:var(--jz-gray-500);display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:6px;transition:all .15s;cursor:pointer;text-decoration:none;border-left:2px solid transparent;line-height:1.4}
  .art-toc-list a:hover{color:var(--jz-black);background:var(--jz-gray-100)}
  .art-toc-list a.toc-active{color:var(--jz-black);font-weight:600;border-left-color:var(--jz-yellow-dark);background:var(--jz-gray-100)}
  .art-toc-list a .toc-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.5}

  .toc-share-block{background:var(--jz-gray-100);border-radius:var(--jz-radius-sm);padding:14px}
  .toc-share-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--jz-gray-500);margin-bottom:10px}
  .toc-share-btns{display:flex;gap:6px}
  .toc-share-btn{flex:1;height:32px;border-radius:8px;border:1px solid var(--jz-gray-200);background:var(--jz-white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--jz-gray-700);transition:all .15s}
  .toc-share-btn:hover{background:var(--jz-black);color:var(--jz-white);border-color:var(--jz-black)}
}

/* ── FREE STYLE CONTENT BLOCKS ── */

/* Highlight box — uso: <div class="highlight-box"> */
.highlight-box{background:linear-gradient(135deg,rgba(230,194,0,.12),rgba(230,194,0,.04));border:1.5px solid rgba(230,194,0,.35);border-radius:var(--jz-radius);padding:20px 22px;margin:24px 0}
.highlight-box-icon{font-size:22px;margin-bottom:8px}
.highlight-box p{font-size:14px;line-height:1.7;margin:0;color:var(--jz-text)}
.highlight-box strong{color:var(--jz-black)}

/* Big stat counter — uso: <div class="stat-counter" data-target="85"> */
.stat-counter-wrap{display:flex;justify-content:center;gap:32px;margin:28px 0;flex-wrap:wrap}
.stat-counter{text-align:center;padding:20px 24px;min-width:120px}
.stat-counter-num{font-size:48px;font-weight:800;color:var(--jz-black);line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.stat-counter-suffix{font-size:24px;font-weight:700;color:var(--jz-yellow-dark)}
.stat-counter-label{font-size:12px;color:var(--jz-text-light);margin-top:4px;max-width:120px}

/* Floating image — uso: <figure class="image-float-right"> */
.image-float-right{float:right;width:46%;margin:0 0 18px 22px;border-radius:var(--jz-radius);overflow:hidden;box-shadow:var(--jz-shadow)}
.image-float-left{float:left;width:46%;margin:0 22px 18px 0;border-radius:var(--jz-radius);overflow:hidden;box-shadow:var(--jz-shadow)}
.image-float-right img,.image-float-left img{width:100%;display:block}
.clearfix::after{content:'';display:table;clear:both}

/* Big caption quote — uso: <div class="caption-big"> */
.caption-big{font-size:clamp(24px,3.5vw,36px);font-weight:800;color:var(--jz-black);line-height:1.25;letter-spacing:-.5px;padding:28px 0;margin:28px 0;border-top:3px solid var(--jz-yellow);border-bottom:1px solid var(--jz-gray-200)}
.caption-big span{color:var(--jz-yellow-dark)}

/* Wave divider */
.divider-wave{width:100%;margin:32px 0;height:2px;background:linear-gradient(90deg,transparent,var(--jz-yellow-dark),transparent);border:none;opacity:.6}

/* Dark section block — uso: <div class="dark-block"> */
.dark-block{background:var(--jz-black);color:var(--jz-white);border-radius:var(--jz-radius);padding:28px 24px;margin:28px 0}
.dark-block h3{font-size:18px;font-weight:700;color:var(--jz-white);margin-bottom:10px}
.dark-block p{font-size:14px;color:rgba(255,255,255,.75);line-height:1.7;margin:0}
.dark-block strong{color:var(--jz-yellow)}

/* Comparison two columns — uso: <div class="compare-cols"> */
.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.compare-col{padding:18px;border-radius:var(--jz-radius-sm);border:1px solid var(--jz-gray-200)}
.compare-col.col-good{background:rgba(63,185,80,.06);border-color:rgba(63,185,80,.25)}
.compare-col.col-bad{background:rgba(248,81,73,.06);border-color:rgba(248,81,73,.25)}
.compare-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.col-good .compare-col-title{color:#2d9e42}
.col-bad .compare-col-title{color:#c0392b}
.compare-col ul{list-style:none;padding:0;margin:0;font-size:13px;color:var(--jz-text)}
.compare-col li{padding:5px 0;border-bottom:1px solid var(--jz-gray-200);display:flex;gap:8px}
.compare-col li:last-child{border-bottom:none}

/* Animated highlight text (gradient sweep) */
.text-sweep{background:linear-gradient(90deg,var(--jz-black) 0%,var(--jz-black) 40%,var(--jz-yellow-dark) 50%,var(--jz-black) 60%,var(--jz-black) 100%);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:sweep 3s ease infinite}
@keyframes sweep{0%{background-position:100%}100%{background-position:-100%}}

/* Card grid inside article — uso: <div class="art-card-grid"> */
.art-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:24px 0}
.art-card{background:var(--jz-gray-100);border-radius:var(--jz-radius-sm);padding:16px;border:1px solid var(--jz-gray-200);transition:transform .2s,box-shadow .2s}
.art-card:hover{transform:translateY(-2px);box-shadow:var(--jz-shadow-hover)}
.art-card-icon{font-size:24px;margin-bottom:8px}
.art-card h4{font-size:13px;font-weight:700;color:var(--jz-black);margin:0 0 4px}
.art-card p{font-size:12px;color:var(--jz-text-light);margin:0;line-height:1.55}

/* Scroll-triggered number reveal */
.count-up{display:inline-block;transition:all .3s}

/* Sticky floating share bar — appears mid-article */
.art-share-float{position:fixed;left:20px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:8px;z-index:800;background:var(--jz-white);border:1px solid var(--jz-gray-200);border-radius:32px;padding:10px 8px;box-shadow:var(--jz-shadow)}
.art-share-float.show{display:flex}
.art-share-float button{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--jz-gray-700);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}
.art-share-float button:hover{background:var(--jz-black);color:var(--jz-white)}
@media(max-width:1200px){.art-share-float{display:none!important}}

/* Reading time indicator ring */
.reading-ring{position:relative;width:22px;height:22px;flex-shrink:0}
.reading-ring svg{transform:rotate(-90deg);width:22px;height:22px}
.reading-ring-bg{fill:none;stroke:var(--jz-gray-200);stroke-width:3}
.reading-ring-fill{fill:none;stroke:var(--jz-yellow-dark);stroke-width:3;stroke-linecap:round;stroke-dasharray:50;stroke-dashoffset:50;transition:stroke-dashoffset .1s linear}

/* ── BLOG LIST SCROLL EFFECTS ── */
.card-post{transition:box-shadow .25s,transform .25s,opacity .4s}
/* Cards stagger on load */
@keyframes cardIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cards-animate .card-post{animation:cardIn .45s ease both}
.cards-animate .card-post:nth-child(2){animation-delay:.07s}
.cards-animate .card-post:nth-child(3){animation-delay:.14s}
.cards-animate .card-post:nth-child(4){animation-delay:.21s}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1199px){
  .art-layout{max-width:900px;padding:0 24px}
  .art-share-float{display:none!important}
}
@media(max-width:768px){
  .jz-nav-links,.jz-nav-phone{display:none}.jz-burger{display:block}
  .featured-grid,.articles-grid,.related-grid{grid-template-columns:1fr}
  .card-h2{font-size:16px}.blog-hero{padding:28px 16px 24px}.blog-wrap{padding:0 16px}
  .article-wrap{padding:0 16px 48px}.breadcrumb-wrap{padding:12px 16px 0}
  .newsletter-form{flex-direction:column}.newsletter-input,.btn-subscribe{width:100%}
  .wa-widget{bottom:20px;right:14px}.wa-popup{width:240px}
  .share-row{margin-left:0}.back-btn{margin-left:0}
  .topic-pill{padding:9px 16px;font-size:13px}
  .image-float-right,.image-float-left{float:none;width:100%;margin:0 0 18px}
  .compare-cols{grid-template-columns:1fr}
  .caption-big{font-size:22px}
}
@media(max-width:420px){
  .post-thumb{width:72px;height:54px}.article-h1{font-size:22px}.tariff-table{font-size:13px}
}

/* ══════════════════════════════════════════
   UI/UX PRO MAX — INTERACTION LAYER
   Priority 1→7 del skill
══════════════════════════════════════════ */

/* ── 1. REDUCED MOTION (CRITICAL a11y) ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important}
  .cards-animate .card-post{animation:none!important}
  .article-hero-parallax img{transform:none!important}
}

/* ── 2. GLOBAL FOCUS RING (WCAG 2.4.7) ── */
/* Remove default, replace with custom visible ring on all interactive elements */
*:focus{outline:none}
*:focus-visible{
  outline:3px solid var(--jz-yellow-dark);
  outline-offset:3px;
  border-radius:6px;
}
/* Tighter on small pill-shaped elements */
.topic-pill:focus-visible,
.article-tag:focus-visible,
.sidebar-tag:focus-visible{
  outline-offset:2px;
  border-radius:24px;
}
/* On dark backgrounds */
.sidebar-cta-btn:focus-visible,
.btn-subscribe:focus-visible,
.wa-cta:focus-visible,
.listicle-verdict button:focus-visible{
  outline-color:#fff;
}

/* ── 3. CURSOR POINTER everywhere clickable ── */
.card-post,.post-item,.related-card,.sidebar-related-item,
.topic-pill,.article-tag,.sidebar-tag,.faq-q,
.listicle-item,.listicle-verdict,.howto-step,
.share-btn,.share-icon-btn,.back-btn,
.toc-share-btn,.art-toc-list a,
.btn-cta-primary,.btn-cta-secondary,
.wa-bubble,.wa-cta,.wa-close,
.sidebar-cta-btn,.sidebar-cta-wa,
.btn-load-more,.btn-subscribe,
.nav-tab,.mpill,.chip{
  cursor:pointer;
}

/* ── 4. TOUCH TARGETS — min 44×44px ── */
/* Navbar burger */
.jz-burger{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
/* Share buttons */
.share-btn{width:36px;height:36px;padding:4px}
.share-icon-btn{width:40px;height:40px}
.toc-share-btn{height:36px;min-width:36px}
/* WA close button */
.wa-close{width:26px;height:26px;font-size:12px}
/* Back button */
.back-btn{padding:8px 4px;min-height:36px}
/* Logo clickable area */
.jz-logo{min-height:44px;display:flex;align-items:center}
/* Mobile nav links */
.jz-mobile-nav a{min-height:44px;display:flex;align-items:center}
/* Sidebar CTA WA button */
.sidebar-cta-wa{min-height:36px;padding:6px}

/* ── 5. BUTTON PRESS STATES (active + transform) ── */
/* Primary CTA buttons */
.btn-cta-primary:active{transform:scale(.97);background:var(--jz-yellow-dark)}
.btn-subscribe:active{transform:scale(.97);background:var(--jz-gray-700)}
.sidebar-cta-btn:active{transform:scale(.97);background:var(--jz-yellow-dark)}
.btn-load-more:active{transform:scale(.98)}
/* Icon buttons */
.share-btn:active,.share-icon-btn:active,.toc-share-btn:active{
  transform:scale(.9);
  background:var(--jz-black);
  color:var(--jz-white);
}
/* WA bubble */
.wa-bubble:active{transform:scale(.93)}
/* Topic pills */
.topic-pill:active{transform:scale(.96)}
/* Back button */
.back-btn:active{opacity:.6}
/* Card press */
.card-post:active{transform:translateY(-1px);box-shadow:var(--jz-shadow)}
.related-card:active{transform:translateY(-1px)}
.sidebar-related-item:active{background:var(--jz-gray-200)!important}
/* Post list item */
.post-item:active{opacity:.6}
/* FAQ question */
.faq-q:active{background:var(--jz-gray-200)!important}

/* ── 6. TRANSITION TIMING — 150–300ms ── */
/* Standardise all transitions to the 150-300ms window */
.btn-cta-primary,.btn-cta-secondary,.btn-subscribe,.btn-load-more,
.sidebar-cta-btn,.sidebar-cta-wa{transition:all .18s cubic-bezier(.4,0,.2,1)}

.share-btn,.share-icon-btn,.toc-share-btn{transition:all .15s cubic-bezier(.4,0,.2,1)}

.card-post{transition:box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}
.related-card{transition:box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}

.topic-pill{transition:all .15s cubic-bezier(.4,0,.2,1)}
.article-tag,.sidebar-tag{transition:all .15s cubic-bezier(.4,0,.2,1)}

.faq-q{transition:background .15s ease}
.wa-bubble{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}

/* ── 7. FAQ — SMOOTH OPEN ANIMATION ── */
.faq-a{
  display:block;
  overflow:hidden;
  max-height:0;
  padding:0 18px;
  opacity:0;
  transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,padding .28s ease;
}
.faq-a.open{
  max-height:400px;
  padding:0 18px 16px;
  opacity:1;
}

/* ── 8. BUTTON LOADING STATE ── */
.btn-loading{
  position:relative;
  color:transparent!important;
  pointer-events:none;
}
.btn-loading::after{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;height:16px;
  border:2px solid transparent;
  border-top-color:currentColor;
  border-radius:50%;
  animation:btnSpin .6s linear infinite;
  color:var(--jz-black);
}
@keyframes btnSpin{to{transform:rotate(360deg)}}
/* Dark bg version */
.btn-cta-primary.btn-loading::after,.sidebar-cta-btn.btn-loading::after{color:var(--jz-black)}
.btn-subscribe.btn-loading::after{color:var(--jz-white)}

/* ── 9. NEWSLETTER FORM — VALIDATION UX ── */
.newsletter-input:invalid:not(:placeholder-shown){
  border-color:#e74c3c;
  background:rgba(231,76,60,.04);
}
.newsletter-input:valid:not(:placeholder-shown){
  border-color:#27ae60;
}
.newsletter-input:focus{border-color:var(--jz-black);box-shadow:0 0 0 3px rgba(26,26,26,.08)}

/* ── 10. CARD HOVER — richer state ── */
.card-post:hover .card-h2{color:var(--jz-black)}
.card-post:hover .card-cat iconify-icon{transform:scale(1.2) rotate(-5deg)}
.card-cat iconify-icon{transition:transform .2s ease}

/* Post list hover */
.post-item:hover .post-title{color:var(--jz-black)}
.post-item:hover .post-thumb{transform:scale(1.03)}
.post-thumb{transition:transform .2s ease}

/* ── 11. WHATSAPP BUBBLE — improved pulse ── */
@keyframes waPulse{
  0%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.4)}
  70%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 10px rgba(37,211,102,0)}
  100%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,0)}
}
.wa-bubble{animation:waPulse 2.5s ease-out 5s infinite}
.wa-bubble:hover{animation:none;transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,.55)}

/* ── 12. SIDEBAR CTA — hover glow ── */
.sidebar-cta-btn{
  position:relative;overflow:hidden;
}
.sidebar-cta-btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0);
  transition:background .15s ease;
}
.sidebar-cta-btn:hover::after{background:rgba(255,255,255,.1)}

/* ── 13. TOC ACTIVE — animated left border ── */
.art-toc-list a{
  border-left-width:2px;
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.art-toc-list a.toc-active{
  padding-left:12px;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}

/* ── 14. PROGRESS BAR — smoother ── */
.progress-bar-top{transition:width .12s linear}

/* ── 15. LISTICLE ITEM — hover lift ── */
.listicle-item{transition:box-shadow .2s ease,transform .2s ease;cursor:default}
.listicle-item:hover{box-shadow:0 4px 20px rgba(0,0,0,.08);transform:translateX(4px)}

/* ── 16. HOWTO STEP NUMBER — pulse on scroll reveal ── */
.howto-num{transition:background .2s ease,transform .2s ease}
.howto-step:hover .howto-num{background:var(--jz-yellow-dark);color:var(--jz-black);transform:scale(1.1)}

/* ── 17. STAT COUNTER — subtle bg on hover ── */
.stat-counter{
  border-radius:var(--jz-radius-sm);
  transition:background .2s ease,transform .2s ease;
}
.stat-counter:hover{background:var(--jz-gray-100);transform:translateY(-3px)}

/* ── 18. NEWSBRIEF BULLETS — hover ── */
.newsbrief-bullets li{transition:padding-left .15s ease,color .15s ease}
.newsbrief-bullets li:hover{padding-left:6px;color:var(--jz-black)}

/* ── 19. COMPARE-COL — hover state ── */
.compare-col{transition:transform .18s ease,box-shadow .18s ease}
.compare-col:hover{transform:translateY(-2px);box-shadow:var(--jz-shadow)}

/* ── 20. BREADCRUMB links ── */
.breadcrumb-list a{
  padding:2px 4px;border-radius:4px;
  transition:background .12s ease,color .12s ease;
}
.breadcrumb-list a:hover{background:var(--jz-gray-100)}

/* ── 22. TOUCH-ACTION — remove 300ms tap delay ── */
button,a,[onclick],.card-post,.post-item,.related-card,
.topic-pill,.article-tag,.sidebar-tag,.faq-q,
.listicle-item,.sidebar-related-item{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ── 23. SKIP TO CONTENT link (a11y) ── */
.skip-link{
  position:absolute;top:-60px;left:20px;z-index:9999;
  background:var(--jz-black);color:var(--jz-white);
  padding:10px 18px;border-radius:0 0 8px 8px;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:0}

/* ── 24. ICON BUTTON — consistent style for all share/nav icon buttons ── */
.share-btn,.share-icon-btn,.toc-share-btn{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* Consistent icon sizes within same family */
.share-btn iconify-icon,.share-icon-btn iconify-icon,.toc-share-btn iconify-icon{
  font-size:16px;
  display:flex; /* fix vertical alignment */
}

/* ── 25. LISTICLE-VERDICT — better visual feedback ── */
.listicle-verdict{transition:transform .18s ease,box-shadow .18s ease}
.listicle-verdict:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.15)}




/* ════════════════════════════════════════
   ARTICLE PAGE — extra components
════════════════════════════════════════ */

/* Nav back button & separator */
.jz-nav-back {
  font-size: 13px; color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px; transition: all .15s;
}
.jz-nav-back:hover { background: rgba(255,255,255,.15); color: #fff; }
.jz-nav-sep { width: 1px; height: 20px; background: rgba(255,255,255,.25); flex-shrink: 0; }

/* Breadcrumb */
.breadcrumb-wrap { max-width: 1200px; margin: 0 auto; padding: 14px 20px 0; }
.breadcrumb-list {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 12px; color: var(--jz-text-light); flex-wrap: wrap;
}
.breadcrumb-list li::after { content: '›'; margin-left: 6px; color: var(--jz-gray-300); }
.breadcrumb-list li:last-child::after { display: none; }
.breadcrumb-list a { color: var(--jz-text-light); transition: color .15s; }
.breadcrumb-list a:hover { color: var(--brand-primary); }
.breadcrumb-list li:last-child { color: var(--jz-black); font-weight: 500; }

/* Article layout */
.article-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

/* Badge category */
.badge-cat {
  background: rgba(91,31,138,.12); color: var(--brand-secondary);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; padding: 5px 14px; border-radius: 20px;
  display: inline-block; margin-bottom: 14px;
}

/* Article H1 */
.article-h1 {
  font-size: clamp(22px,4vw,36px); font-weight: 800;
  color: var(--jz-black); line-height: 1.2;
  letter-spacing: -.5px; margin-bottom: 16px;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; font-size: 13px; color: var(--jz-text-light); margin-bottom: 24px;
}

/* Hero image */
.article-hero-img {
  border-radius: var(--jz-radius); overflow: hidden;
  margin-bottom: 8px; aspect-ratio: 16/9;
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-caption { font-size: 11px; color: var(--jz-text-light); margin-bottom: 28px; font-style: italic; }

/* Article body */
.art-body { font-size: 16px; line-height: 1.8; color: var(--jz-text); }
.art-body h2 { font-size: clamp(18px,2.5vw,22px); font-weight: 700; color: var(--jz-black); margin: 36px 0 14px; letter-spacing: -.3px; line-height: 1.3; }
.art-body h3 { font-size: 17px; font-weight: 600; color: var(--jz-black); margin: 24px 0 10px; }
.art-body p { margin: 0 0 16px; }
.art-body strong { color: var(--jz-black); font-weight: 600; }
.art-body ul, .art-body ol { padding-left: 22px; margin: 0 0 16px; }
.art-body li { margin-bottom: 8px; }
.art-body a { color: var(--brand-secondary); text-decoration: underline; text-decoration-thickness: 1px; }

/* Tags */
.tag-pill {
  background: var(--jz-gray-100); color: var(--jz-text);
  border: 1px solid var(--jz-gray-200); font-size: 12px;
  font-weight: 500; padding: 4px 12px; border-radius: 20px;
  display: inline-block; margin: 2px 2px 2px 0; transition: all .15s;
}
.tag-pill:hover { background: var(--brand-bg); border-color: var(--brand-secondary); color: var(--brand-secondary); }

/* Share buttons */
.share-btn {
  border: 1px solid var(--jz-gray-200); background: var(--jz-white);
  color: var(--jz-text); font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  transition: all .15s; display: inline-flex; align-items: center; gap: 5px;
}
.share-btn:hover { border-color: var(--brand-secondary); color: var(--brand-secondary); }

/* Bottom CTA */
.bottom-cta { background: var(--brand-primary); border-radius: var(--jz-radius); }
.bottom-cta h3 { color: var(--brand-on-primary); }
.bottom-cta p  { color: var(--brand-on-primary); opacity: .85; }
.btn-accent {
  background: var(--brand-accent); color: #fff;
  font-weight: 700; border: none; padding: 12px 28px;
  border-radius: var(--jz-radius-sm); transition: filter .15s;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
}
.btn-accent:hover { filter: brightness(1.08); color: #fff; }

/* Related cards */
.related-card { transition: transform .15s, box-shadow .15s; border: 1px solid var(--jz-gray-200) !important; }
.related-card:hover { transform: translateY(-3px); box-shadow: var(--jz-shadow-hover); }

/* Sidebar */
.sidebar-cta-wrap { background: var(--brand-primary); border-radius: var(--jz-radius) var(--jz-radius) 0 0; padding: 22px; }
.sidebar-cta-wrap h5 { color: var(--brand-on-primary); font-weight: 700; margin-bottom: 4px; }
.sidebar-cta-wrap p  { color: var(--brand-on-primary); opacity: .85; font-size: 13px; margin-bottom: 12px; }
.sidebar-price { font-size: 28px; font-weight: 800; color: var(--brand-accent); display: block; margin-bottom: 14px; }
.sidebar-btn {
  display: block; text-align: center; background: var(--brand-accent);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 16px; border-radius: var(--jz-radius-sm);
  margin-bottom: 10px; transition: filter .15s; text-decoration: none;
}
.sidebar-btn:hover { filter: brightness(1.08); color: #fff; }
.sidebar-phone-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--brand-on-primary) !important; font-size: 13px; font-weight: 600;
  opacity: .9; transition: opacity .15s; text-decoration: none;
}
.sidebar-phone-link:hover { opacity: 1; }

/* TOC */
.toc-card {
  border: 1px solid var(--jz-gray-200); border-top: none;
  border-radius: 0 0 var(--jz-radius) var(--jz-radius); padding: 16px;
}
.toc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--jz-gray-500); margin-bottom: 10px; }
.toc-link {
  font-size: 13px; color: var(--jz-text); text-decoration: none;
  display: flex; gap: 8px; padding: 4px 0; transition: color .15s;
}
.toc-link::before { content: '·'; color: var(--brand-secondary); font-weight: 700; flex-shrink: 0; }
.toc-link:hover { color: var(--brand-secondary); }

/* Accordion FAQ override */
.accordion-button:not(.collapsed) { background: rgba(91,31,138,.06); color: var(--brand-primary); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }


/* ══ FINETWORK BRAND OVERRIDE ══ */
:root{
  --brand-primary:#5B1F8A;
  --brand-secondary:#8B2FC9;
  --brand-accent:#FF6600;
  --brand-bg:#F7F0FF;
  --brand-on-primary:#ffffff;
  --jz-yellow:#8B2FC9;
  --jz-yellow-dark:#5B1F8A;
}
#view-blog{display:block}#view-article{display:none}

/* Navbar púrpura */
.jz-navbar{background:var(--brand-primary)!important;border-bottom:2px solid var(--brand-secondary)!important}
.jz-navbar.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.2)!important}
.jz-logo{color:#fff!important}
.jz-nav-links a{color:rgba(255,255,255,.85)!important}
.jz-nav-links a:hover{background:rgba(255,255,255,.15)!important;color:#fff!important}
.jz-nav-phone{color:#fff!important}
.jz-burger{color:#fff!important}
.jz-mobile-nav{background:var(--brand-primary)!important;border-top:1px solid rgba(255,255,255,.15)!important}
.jz-mobile-nav a{color:rgba(255,255,255,.85)!important;border-bottom-color:rgba(255,255,255,.1)!important}

/* Brand elements */
.nav-tab.active,.btn.primary,.btn-subscribe,.btn-load-more:hover{background:var(--brand-primary);color:var(--brand-on-primary)}
.badge-dest,.tag-best{background:var(--brand-accent);color:#fff}
.progress-bar-top{background:var(--brand-accent)}
.topic-pill.active{background:var(--brand-primary)!important;color:var(--brand-on-primary)!important;border-color:var(--brand-primary)!important}
.art-toc-list a.toc-active{border-left-color:var(--brand-primary);background:rgba(91,31,138,.06)}
.faq-q:hover{background:rgba(91,31,138,.04)}
.answer-box{border-left-color:var(--brand-primary);background:rgba(91,31,138,.05)}
.answer-box-label,.newsbrief-kicker{color:var(--brand-primary)}
.longform-pullquote{border-left-color:var(--brand-primary)}
.longform-pullquote span{color:var(--brand-secondary)}
.caption-big{border-top-color:var(--brand-accent)}
.caption-big span,.section-label{color:var(--brand-secondary)}
.howto-num,.listicle-num{background:var(--brand-primary);color:var(--brand-on-primary)}
.howto-tip{border-left-color:var(--brand-accent);background:rgba(255,102,0,.06)}
.newsbrief-highlight{border-left-color:var(--brand-primary);background:rgba(91,31,138,.05)}
*:focus-visible{outline-color:var(--brand-primary)}
.sidebar-cta{background:var(--brand-primary)}
.sidebar-cta-price{color:var(--brand-accent)}
.sidebar-cta-btn{background:var(--brand-accent);color:#fff}
.listicle-verdict{border-left-color:var(--brand-primary)}
.compare-col.col-good{border-color:rgba(91,31,138,.4)}
.dark-block strong{color:var(--brand-accent)}
.highlight-box{border-color:rgba(139,47,201,.4);background:rgba(139,47,201,.06)}

/* ════════════════════════════════════════════════════════
   FINETWORK POST — CSS aislado
   Todos los selectores van bajo .fn-post para evitar
   conflictos con los estilos globales de la web.
════════════════════════════════════════════════════════ */

/* ── Variables ── */
.fn-post {
  --fn-primary:    #5B1F8A;
  --fn-secondary:  #8B2FC9;
  --fn-accent:     #FF6600;
  --fn-bg:         #F7F0FF;
  --fn-on-primary: #ffffff;
  --fn-black:      #1A1A2E;
  --fn-text:       #4a5568;
  --fn-light:      #718096;
  --fn-gray-100:   #F7F7F7;
  --fn-gray-200:   #EEEEEE;
  --fn-gray-300:   #CCCCCC;
  --fn-white:      #ffffff;
  --fn-radius:     12px;
  --fn-radius-sm:  8px;
  --fn-shadow:     0 2px 16px rgba(0,0,0,.07);
  --fn-shadow-hov: 0 6px 28px rgba(0,0,0,.13);
  --fn-font:       'Inter', -apple-system, sans-serif;
  font-family: var(--fn-font);
  color: var(--fn-text);
  line-height: 1.6;
}

/* ── Reset básico dentro del contenedor ── */
.fn-post *, .fn-post *::before, .fn-post *::after { box-sizing: border-box; }
.fn-post img { max-width: 100%; height: auto; }
.fn-post a { text-decoration: none; }
.fn-post ul { list-style: disc; }

/* ── Layout ── */
.fn-post .article-wrap { padding: 24px 0 60px; }

/* ── Badge categoría ── */
.fn-post .fn-badge-cat {
  background: rgba(91,31,138,.12);
  color: var(--fn-secondary);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 5px 14px; border-radius: 20px;
  display: inline-block; margin-bottom: 14px;
}

/* ── H1 ── */
.fn-post .fn-article-h1 {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800; color: var(--fn-black);
  line-height: 1.2; letter-spacing: -.5px;
  margin: 0 0 16px; padding: 0;
  border: none; background: none;
}

/* ── Meta ── */
.fn-post .fn-article-meta {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px;
  font-size: 13px; color: var(--fn-light);
  margin-bottom: 24px;
}
.fn-post .fn-article-meta span {
  display: flex; align-items: center; gap: 5px;
}
.fn-post .fn-author-chip {
  display: flex; align-items: center; gap: 8px;
}
.fn-post .fn-author-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fn-primary); color: var(--fn-on-primary);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Hero image ── */
.fn-post .fn-article-hero-img {
  border-radius: var(--fn-radius);
  overflow: hidden; margin-bottom: 8px;
  aspect-ratio: 16/9;
}
.fn-post .fn-article-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fn-post .fn-img-caption {
  font-size: 11px; color: var(--fn-light);
  margin-bottom: 28px; font-style: italic;
}

/* ── Answer box ── */
.fn-post .fn-answer-box {
  background: rgba(91,31,138,.06);
  border-left: 4px solid var(--fn-primary);
  border-radius: 0 var(--fn-radius) var(--fn-radius) 0;
  padding: 18px 20px; margin-bottom: 28px;
}
.fn-post .fn-answer-box-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--fn-primary); margin-bottom: 8px;
}
.fn-post .fn-answer-box p {
  font-size: 15px; color: var(--fn-black);
  line-height: 1.65; margin: 0;
}

/* ── Article body ── */
.fn-post .fn-art-body {
  font-size: 16px; line-height: 1.8; color: var(--fn-text);
}
.fn-post .fn-art-body h2 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700; color: var(--fn-black);
  margin: 36px 0 14px; letter-spacing: -.3px;
  line-height: 1.3; padding: 0; border: none; background: none;
}
.fn-post .fn-art-body h3 {
  font-size: 17px; font-weight: 600;
  color: var(--fn-black); margin: 24px 0 10px;
  padding: 0; border: none; background: none;
}
.fn-post .fn-art-body p { margin: 0 0 16px; }
.fn-post .fn-art-body strong { color: var(--fn-black); font-weight: 600; }
.fn-post .fn-art-body ul,
.fn-post .fn-art-body ol { padding-left: 22px; margin: 0 0 16px; }
.fn-post .fn-art-body li { margin-bottom: 8px; }
.fn-post .fn-art-body a { color: var(--fn-secondary); text-decoration: underline; }

/* ── Howto steps ── */
.fn-post .fn-howto-step {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--fn-bg); border-radius: var(--fn-radius);
  padding: 20px; margin: 16px 0;
}
.fn-post .fn-howto-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fn-primary); color: var(--fn-on-primary);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-width: 36px;
}
.fn-post .fn-howto-body { flex: 1; }
.fn-post .fn-howto-body h3 {
  font-size: 16px; font-weight: 700;
  color: var(--fn-black); margin: 0 0 8px;
  padding: 0; border: none; background: none;
}
.fn-post .fn-howto-body p {
  font-size: 14px; color: var(--fn-text);
  margin: 0 0 10px; line-height: 1.65;
}
.fn-post .fn-howto-tip {
  background: #fff;
  border-left: 3px solid var(--fn-accent);
  border-radius: 0 var(--fn-radius-sm) var(--fn-radius-sm) 0;
  padding: 10px 14px; font-size: 13px;
  color: var(--fn-text); margin-top: 10px;
  display: flex; gap: 8px; align-items: flex-start;
}

/* ── Table ── */
.fn-post .fn-table-wrap {
  border-radius: var(--fn-radius); overflow: hidden;
  box-shadow: var(--fn-shadow); margin: 20px 0;
  overflow-x: auto;
}
.fn-post .fn-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; min-width: 380px;
}
.fn-post .fn-table thead tr { background: var(--fn-primary); }
.fn-post .fn-table thead th {
  color: var(--fn-on-primary); font-size: 12px;
  font-weight: 600; padding: 12px 14px; border: none;
}
.fn-post .fn-table tbody tr:nth-child(even) { background: var(--fn-bg); }
.fn-post .fn-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--fn-gray-200);
  color: var(--fn-text); vertical-align: middle;
}
.fn-post .fn-table tbody tr:last-child td { border-bottom: none; }
.fn-post .fn-table .fn-price { font-weight: 700; color: var(--fn-secondary); }

/* ── Compare cols ── */
.fn-post .fn-compare-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin: 20px 0;
}
.fn-post .fn-compare-col {
  border-radius: var(--fn-radius); padding: 16px 18px;
  border: 1px solid var(--fn-gray-200);
}
.fn-post .fn-col-good { border-color: #86efac; background: #f0fdf4; }
.fn-post .fn-col-bad  { border-color: #fca5a5; background: #fef2f2; }
.fn-post .fn-compare-title {
  font-size: 13px; font-weight: 700;
  color: var(--fn-black); margin-bottom: 10px;
}
.fn-post .fn-compare-col ul { padding-left: 18px; margin: 0; }
.fn-post .fn-compare-col li {
  font-size: 13px; color: var(--fn-text); margin-bottom: 6px;
}
@media(max-width:520px) {
  .fn-post .fn-compare-cols { grid-template-columns: 1fr; }
}

/* ── Caption big ── */
.fn-post .fn-caption-big {
  font-size: 18px; font-weight: 700; text-align: center;
  padding: 20px 24px; margin: 24px 0;
  border-top: 3px solid var(--fn-accent);
  border-bottom: 3px solid var(--fn-accent);
  color: var(--fn-black); line-height: 1.4;
  background: none;
}
.fn-post .fn-caption-big span { color: var(--fn-secondary); }

/* ── Tags ── */
.fn-post .fn-tags { margin: 24px 0; }
.fn-post .fn-tag {
  background: var(--fn-gray-100); color: var(--fn-text);
  border: 1px solid var(--fn-gray-200); font-size: 12px;
  font-weight: 500; padding: 4px 12px; border-radius: 20px;
  display: inline-block; margin: 2px 2px 2px 0;
  transition: all .15s; cursor: default;
}

/* ── Share ── */
.fn-post .fn-share-row {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin-bottom: 40px;
}
.fn-post .fn-share-label { font-size: 13px; color: var(--fn-light); }
.fn-post .fn-share-btn {
  border: 1px solid var(--fn-gray-200);
  background: var(--fn-white); color: var(--fn-text);
  font-size: 12px; font-weight: 600; font-family: var(--fn-font);
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.fn-post .fn-share-btn:hover {
  border-color: var(--fn-secondary); color: var(--fn-secondary);
}

/* ── FAQ (sin Bootstrap accordion, CSS puro) ── */
.fn-post .fn-faq { margin-bottom: 48px; }
.fn-post .fn-faq-title {
  font-size: 22px; font-weight: 700;
  color: var(--fn-black); margin-bottom: 20px;
  padding: 0; border: none; background: none;
}
.fn-post .fn-faq-item {
  border-bottom: 1px solid var(--fn-gray-200);
}
.fn-post .fn-faq-q {
  width: 100%; text-align: left; background: none; border: none;
  padding: 16px 0; font-size: 15px; font-weight: 600;
  color: var(--fn-black); cursor: pointer; font-family: var(--fn-font);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; line-height: 1.4;
  transition: color .15s;
}
.fn-post .fn-faq-q:hover { color: var(--fn-primary); }
.fn-post .fn-faq-arrow {
  font-size: 18px; flex-shrink: 0; color: var(--fn-primary);
  transition: transform .25s; display: inline-block;
}
.fn-post .fn-faq-q.fn-open .fn-faq-arrow { transform: rotate(180deg); }
.fn-post .fn-faq-a {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: var(--fn-text); line-height: 1.7;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0;
}
.fn-post .fn-faq-a.fn-open {
  max-height: 400px;
  padding: 0 0 16px;
}

/* ── Bottom CTA ── */
.fn-post .fn-bottom-cta {
  background: var(--fn-primary);
  border-radius: var(--fn-radius);
  padding: 28px 32px; margin-bottom: 48px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 16px;
}
.fn-post .fn-bottom-cta h3 {
  color: var(--fn-on-primary); font-size: 20px;
  font-weight: 700; margin: 0 0 4px; padding: 0;
  border: none; background: none;
}
.fn-post .fn-bottom-cta p {
  color: var(--fn-on-primary); opacity: .85;
  font-size: 14px; margin: 0;
}
.fn-post .fn-btn-accent {
  background: var(--fn-accent); color: #fff !important;
  font-weight: 700; font-size: 14px; border: none;
  padding: 12px 24px; border-radius: var(--fn-radius-sm);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
  transition: filter .15s; cursor: pointer; font-family: var(--fn-font);
}
.fn-post .fn-btn-accent:hover { filter: brightness(1.08); }

/* ── Related articles ── */
.fn-post .fn-related { padding-top: 28px; border-top: 1px solid var(--fn-gray-200); }
.fn-post .fn-related-title {
  font-size: 16px; font-weight: 700;
  color: var(--fn-black); margin-bottom: 16px;
  padding: 0; border: none; background: none;
}
.fn-post .fn-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media(max-width:768px) {
  .fn-post .fn-related-grid { grid-template-columns: 1fr; }
}
.fn-post .fn-related-card {
  border: 1px solid var(--fn-gray-200);
  border-radius: var(--fn-radius); overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
  background: var(--fn-white);
}
.fn-post .fn-related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fn-shadow-hov);
}
.fn-post .fn-related-card img {
  width: 100%; height: 120px; object-fit: cover; display: block;
}
.fn-post .fn-related-body { padding: 12px 14px; flex: 1; }
.fn-post .fn-related-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; background: var(--fn-secondary);
  color: #fff; padding: 3px 10px; border-radius: 20px;
  display: inline-block; margin-bottom: 8px;
}
.fn-post .fn-related-body h6 {
  font-size: 13px; font-weight: 600; color: var(--fn-black);
  line-height: 1.4; margin: 0 0 6px; padding: 0;
  border: none; background: none;
}
.fn-post .fn-related-body p {
  font-size: 11px; color: var(--fn-light); margin: 0;
}

/* ── Sidebar ── */
.fn-post .fn-sidebar-wrap {
  border-radius: var(--fn-radius);
  overflow: hidden;
  box-shadow: var(--fn-shadow);
}
.fn-post .fn-sidebar-cta {
  background: var(--fn-primary); padding: 22px;
}
.fn-post .fn-sidebar-kicker {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: rgba(255,255,255,.7); margin-bottom: 8px;
}
.fn-post .fn-sidebar-cta h5 {
  color: var(--fn-on-primary); font-weight: 700;
  margin: 0 0 4px; font-size: 16px; padding: 0;
  border: none; background: none;
}
.fn-post .fn-sidebar-cta p {
  color: var(--fn-on-primary); opacity: .85;
  font-size: 13px; margin-bottom: 14px;
}
.fn-post .fn-sidebar-price {
  font-size: 28px; font-weight: 800;
  color: var(--fn-accent); display: block; margin-bottom: 14px;
  line-height: 1;
}
.fn-post .fn-sidebar-price-unit {
  font-size: 14px; font-weight: 500; color: var(--fn-accent);
}
.fn-post .fn-sidebar-btn {
  display: block; text-align: center;
  background: var(--fn-accent); color: #fff !important;
  font-weight: 700; font-size: 14px; font-family: var(--fn-font);
  padding: 11px 16px; border-radius: var(--fn-radius-sm);
  margin-bottom: 10px; text-decoration: none;
  transition: filter .15s;
}
.fn-post .fn-sidebar-btn:hover { filter: brightness(1.08); }
.fn-post .fn-sidebar-phone {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--fn-on-primary) !important; font-size: 13px; font-weight: 600;
  opacity: .9; text-decoration: none; transition: opacity .15s;
}
.fn-post .fn-sidebar-phone:hover { opacity: 1; }

/* ── TOC ── */
.fn-post .fn-toc {
  background: var(--fn-white);
  border: 1px solid var(--fn-gray-200); border-top: none;
  padding: 16px;
}
.fn-post .fn-toc-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--fn-light); margin-bottom: 10px;
}
.fn-post .fn-toc-list { list-style: none; padding: 0; margin: 0; }
.fn-post .fn-toc-list li { margin-bottom: 4px; }
.fn-post .fn-toc-list a {
  font-size: 13px; color: var(--fn-text); text-decoration: none;
  display: flex; gap: 8px; padding: 4px 0; transition: color .15s;
}
.fn-post .fn-toc-list a::before {
  content: '·'; color: var(--fn-secondary);
  font-weight: 700; flex-shrink: 0;
}
.fn-post .fn-toc-list a:hover { color: var(--fn-secondary); }