/* ================================================================
   BLOG — Adquisición de clientes online
   Extiende el sistema visual v8 (styles.css). Paleta Google · Manrope.
   Dos bloques: (1) índice  (2) artículo + librería de artefactos.
================================================================ */

/* ── Breadcrumb del blog (reutiliza .container) ───────────────── */
.blog-bc{padding:18px 0 0}
.blog-bc .container{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.84rem;font-weight:700;color:var(--gray-500)}
.blog-bc a{color:var(--gray-500);transition:color var(--transition)}
.blog-bc a:hover{color:var(--google-blue-dark)}
.blog-bc .bc-sep{opacity:.5}
.blog-bc .bc-current{color:var(--gray-800)}

/* ════════════════════════════════════════════════════════════
   ÍNDICE
═════════════════════════════════════════════════════════════ */
.blog-hero{padding:64px 0 24px;text-align:center}
.blog-hero .eyebrow{margin:0 auto 18px}
.blog-hero h1{margin-bottom:16px}
.blog-hero .lead{margin:0 auto;max-width:660px}

.blog-featured{padding:24px 0 8px}
.bf-card{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-md);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.bf-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(66,133,244,.32)}
.bf-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.bf-body .eyebrow{margin:0 0 16px}
.bf-body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:12px}
.bf-body p{font-size:1.02rem;color:var(--gray-700);margin-bottom:22px;max-width:none}
.bf-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;font-size:.82rem;font-weight:700;color:var(--gray-500)}
.bf-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gray-300)}
.bf-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--google-blue-dark);font-size:.96rem}
.bf-arrow svg{width:18px;height:18px;transition:transform var(--transition)}
.bf-card:hover .bf-arrow svg{transform:translateX(4px)}
.bf-visual{
  position:relative;background:
    radial-gradient(120% 120% at 80% 10%, rgba(66,133,244,.12), transparent 55%),
    linear-gradient(135deg,#1A73E8 0%,#202124 100%);
  display:grid;place-items:center;padding:40px;overflow:hidden;
}
.bf-visual::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:30px 30px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%);
}

.blog-grid-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px;flex-wrap:wrap}
.blog-grid-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.blog-grid-head p{color:var(--gray-500);font-weight:700;font-size:.92rem}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.blog-card[href]:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(66,133,244,.3)}
.bc-thumb{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.bc-thumb .bc-emoji{font-size:2.6rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.16))}
.bc-thumb .bc-emoji i{font-size:2.3rem;filter:none}
.bc-thumb-b .bc-emoji i,.bc-thumb .bc-emoji i{color:var(--google-blue-dark)}
.bc-thumb-g .bc-emoji i{color:var(--google-green-dark)}
.bc-thumb-y .bc-emoji i{color:var(--google-yellow-dark)}
.bc-thumb-r .bc-emoji i{color:var(--google-red-dark)}
.bc-thumb-p .bc-emoji i{color:var(--google-purple-dark)}
.bc-thumb-b{background:radial-gradient(130% 130% at 20% 0%,#E8F0FE,transparent 60%),var(--google-blue-tint)}
.bc-thumb-g{background:radial-gradient(130% 130% at 20% 0%,#E6F4EA,transparent 60%),var(--google-green-tint)}
.bc-thumb-y{background:radial-gradient(130% 130% at 20% 0%,#FEF7E0,transparent 60%),var(--google-yellow-tint)}
.bc-thumb-r{background:radial-gradient(130% 130% at 20% 0%,#FCE8E6,transparent 60%),var(--google-red-tint)}
.bc-thumb-p{background:radial-gradient(130% 130% at 20% 0%,#EDE8FA,transparent 60%),var(--google-purple-tint)}
.bc-cat{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--gray-200);border-radius:var(--radius-pill);padding:5px 11px;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-700)}
.bc-soon{position:absolute;top:12px;right:12px;background:var(--gray-800);color:#fff;border-radius:var(--radius-pill);padding:5px 11px;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.bc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.bc-body h3{font-size:1.12rem;line-height:1.22;margin-bottom:9px}
.bc-body p{font-size:.9rem;color:var(--gray-700);line-height:1.55;margin-bottom:16px}
.bc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;font-weight:700;color:var(--gray-500)}
.bc-tools{display:inline-flex;gap:5px}
.bc-tools span{display:inline-flex;align-items:center;gap:5px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-pill);padding:4px 9px;font-size:.7rem;font-weight:800;color:var(--google-blue-dark)}
.blog-card.is-soon{opacity:.96}
.blog-card.is-soon .bc-thumb .bc-emoji{opacity:.7}

/* ════════════════════════════════════════════════════════════
   ARTÍCULO
═════════════════════════════════════════════════════════════ */
.article-hero{padding:40px 0 30px}
.article-hero .container{max-width:880px}
.ah-cat{display:inline-flex;align-items:center;gap:7px;background:var(--google-blue-tint);color:var(--google-blue-dark);border:1px solid rgba(66,133,244,.22);border-radius:var(--radius-pill);padding:6px 14px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.ah-cat.g{background:var(--google-green-tint);color:var(--google-green-dark);border-color:rgba(52,168,83,.24)}
.ah-cat.y{background:var(--google-yellow-tint);color:var(--google-yellow-dark);border-color:rgba(251,188,4,.32)}
.ah-cat.r{background:var(--google-red-tint);color:var(--google-red-dark);border-color:rgba(234,67,53,.24)}
.article-hero h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:18px;text-wrap:balance}
.article-hero .lead{font-size:1.18rem;color:var(--gray-700);max-width:760px}
.article-byline{display:flex;align-items:center;gap:13px;margin-top:28px;padding-top:24px;border-top:1px solid var(--gray-200)}
.article-byline .ab-av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;background:#fff;box-shadow:0 0 0 1px rgba(60,64,67,.08),0 4px 12px -2px rgba(60,64,67,.16);padding:2px}
.article-byline .ab-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.article-byline .ab-name{font-weight:800;color:var(--gray-900);font-size:.96rem;line-height:1.2}
.article-byline .ab-meta{font-size:.82rem;color:var(--gray-500);font-weight:700;margin-top:2px}
.article-byline .ab-share{margin-left:auto;display:flex;gap:8px}
.article-byline .ab-share a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--gray-100);border:1px solid var(--gray-200);color:var(--gray-700);transition:var(--transition)}
.article-byline .ab-share a:hover{background:var(--google-blue-tint);border-color:rgba(66,133,244,.3);color:var(--google-blue-dark);transform:translateY(-2px)}
.article-byline .ab-share svg{width:17px;height:17px}

/* Reading progress */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--rainbow);z-index:200;transition:width .1s linear}

/* TOC chips */
.article-toc{position:sticky;top:74px;z-index:40;background:rgba(248,250,253,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200);padding:11px 0}
.article-toc .container{max-width:880px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.article-toc .container::-webkit-scrollbar{display:none}
.article-toc a{white-space:nowrap;font-size:.82rem;font-weight:700;color:var(--gray-700);padding:7px 14px;border-radius:var(--radius-pill);background:#fff;border:1px solid var(--gray-200);transition:var(--transition)}
.article-toc a:hover{color:var(--google-blue-dark);border-color:rgba(66,133,244,.3)}
.article-toc a.is-active{background:var(--google-blue);color:#fff;border-color:var(--google-blue)}

/* Body / prose */
.article-body{padding:44px 0 60px}
.prose{max-width:760px;margin:0 auto}
.prose > p{font-size:1.07rem;line-height:1.75;color:var(--gray-700);margin:0 0 22px}
.prose > p:first-of-type{font-size:1.16rem}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:52px 0 6px;scroll-margin-top:130px}
.prose h2 + .ph-sub{font-size:1rem;color:var(--gray-500);font-weight:700;margin:0 0 22px}
.prose h3{font-size:1.28rem;margin:36px 0 12px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:0;display:grid;gap:11px;list-style:none}
.prose ul > li{position:relative;padding-left:30px;font-size:1.04rem;line-height:1.65;color:var(--gray-700)}
.prose ul > li::before{content:"";position:absolute;left:6px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--google-blue)}
.prose ol{counter-reset:li}
.prose ol > li{counter-increment:li;position:relative;padding-left:42px;font-size:1.04rem;line-height:1.65;color:var(--gray-700)}
.prose ol > li::before{content:counter(li);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:9px;background:var(--google-blue-tint);color:var(--google-blue-dark);font-weight:800;font-size:.86rem;display:grid;place-items:center}
.prose strong{color:var(--gray-900);font-weight:800}
.prose a:not(.btn){color:var(--google-blue-dark);font-weight:700;text-decoration:underline;text-decoration-color:rgba(26,115,232,.3);text-underline-offset:3px}
.prose a:not(.btn):hover{text-decoration-color:var(--google-blue-dark)}

/* Callouts */
.callout{display:flex;gap:14px;padding:20px 22px;border-radius:var(--radius-lg);margin:26px 0;border:1px solid;line-height:1.6}
.callout .co-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem}
.callout p{margin:0;font-size:.98rem;color:var(--gray-800)}
.callout strong{font-weight:800}
.callout.tip{background:var(--google-blue-tint);border-color:rgba(66,133,244,.22)}
.callout.tip .co-ic{background:#fff;color:var(--google-blue-dark)}
.callout.warn{background:var(--google-yellow-tint);border-color:rgba(251,188,4,.34)}
.callout.warn .co-ic{background:#fff;color:var(--google-yellow-dark)}
.callout.key{background:var(--google-green-tint);border-color:rgba(52,168,83,.24)}
.callout.key .co-ic{background:#fff;color:var(--google-green-dark)}

/* Pull quote */
.pull-quote{margin:34px 0;padding:8px 0 8px 26px;border-left:4px solid var(--google-blue);font-size:1.34rem;line-height:1.4;font-weight:800;color:var(--gray-900);letter-spacing:-.01em}

/* ════════════════════════════════════════════════════════════
   ARTEFACTOS INTERACTIVOS  (.bartifact)
═════════════════════════════════════════════════════════════ */
.bartifact{
  margin:38px 0;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;padding:12px;
}
.bartifact-wide{max-width:1080px;margin-left:auto;margin-right:auto}
.ba-head{padding:13px 5px 11px;border-bottom:1px solid var(--gray-200);background:linear-gradient(180deg,var(--gray-100),#fff);border-radius:14px}
.ba-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--google-blue-dark);margin-bottom:9px}
.ba-kicker svg{width:15px;height:15px}
.ba-head h3{font-size:1.24rem;margin:0 0 4px}
.ba-head p{font-size:.92rem;color:var(--gray-700);margin:0;font-weight:600}
.ba-body{padding:0}

/* — Calculadora / simulador — */
.ba-calc{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ba-controls{display:grid;gap:20px;align-content:start}
.ba-field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;font-weight:800;color:var(--gray-800);margin-bottom:9px}
.ba-field .ba-val{font-size:.96rem;font-weight:800;color:var(--google-blue-dark);font-variant-numeric:tabular-nums}
.ba-range{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:999px;background:var(--gray-200);outline:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--google-blue);border:3px solid #fff;box-shadow:0 2px 7px rgba(66,133,244,.5);cursor:pointer;transition:transform .12s}
.ba-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.ba-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--google-blue);border:3px solid #fff;box-shadow:0 2px 7px rgba(66,133,244,.5);cursor:pointer}
.ba-range.g::-webkit-slider-thumb{background:var(--google-green);box-shadow:0 2px 7px rgba(52,168,83,.5)}
.ba-range.g::-moz-range-thumb{background:var(--google-green)}
.ba-range.y::-webkit-slider-thumb{background:var(--google-yellow);box-shadow:0 2px 7px rgba(251,188,4,.5)}
.ba-range.y::-moz-range-thumb{background:var(--google-yellow)}
.ba-hint{font-size:.78rem;color:var(--gray-500);font-weight:600;margin-top:7px}

/* Number/segmented inputs */
.ba-seg{display:flex;gap:6px;flex-wrap:wrap}
.ba-seg button{padding:8px 14px;border-radius:var(--radius-pill);background:var(--gray-100);border:1px solid var(--gray-200);font-size:.84rem;font-weight:800;color:var(--gray-700);transition:var(--transition)}
.ba-seg button.is-on{background:var(--google-blue);color:#fff;border-color:var(--google-blue)}

/* Result panel */
.ba-result{background:linear-gradient(160deg,#1A73E8 0%,#202124 100%);border-radius:var(--radius-lg);padding:26px 26px;color:#fff;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.ba-result::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle at 80% 10%,#000,transparent 70%)}
.ba-result > *{position:relative}
.ba-result-label{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.ba-result-big{font-size:2.6rem;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.ba-result-big .unit{font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.7);margin-left:4px}
.ba-result-rows{display:grid;gap:1px;background:rgba(255,255,255,.14);border-radius:11px;overflow:hidden;margin-top:2px}
.ba-rrow{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(0,0,0,.16);padding:12px 15px;font-size:.9rem}
.ba-rrow span{color:rgba(255,255,255,.78);font-weight:600}
.ba-rrow b{font-weight:800;font-variant-numeric:tabular-nums}
.ba-rrow b.good{color:#81f0a8}
.ba-rrow b.bad{color:#ff9b91}
.ba-verdict{margin-top:auto;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 15px;font-size:.92rem;font-weight:700;line-height:1.4}
.ba-verdict .vdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--google-green)}
.ba-verdict.is-warn .vdot{background:var(--google-yellow)}
.ba-verdict.is-bad .vdot{background:var(--google-red)}

/* — Bar chart — */
.ba-bars{display:grid;gap:14px}
.ba-bar{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:14px}
.ba-bar-label{font-size:.86rem;font-weight:800;color:var(--gray-800)}
.ba-bar-track{height:30px;background:var(--gray-100);border-radius:8px;overflow:hidden;position:relative}
.ba-bar-fill{display:block;height:100%;border-radius:8px;width:0;transition:width 1s cubic-bezier(.2,.7,.2,1);background:var(--google-blue)}
.ba-bar-fill.g{background:var(--google-green)}
.ba-bar-fill.y{background:var(--google-yellow)}
.ba-bar-fill.r{background:var(--google-red)}
.ba-bar-val{font-size:.9rem;font-weight:800;color:var(--gray-900);font-variant-numeric:tabular-nums;min-width:54px;text-align:right}

/* — Donut / stat — */
.ba-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.ba-stat{display:flex;gap:14px;align-items:flex-start;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:18px 20px}
.ba-stat-num{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;font-weight:800;line-height:1;background:var(--google-blue-tint);color:var(--google-blue-dark)}
.ba-stat-num.g{background:var(--google-green-tint);color:var(--google-green-dark)}
.ba-stat-num.y{background:var(--google-yellow-tint);color:var(--google-yellow-dark)}
.ba-stat-num.r{background:var(--google-red-tint);color:var(--google-red-dark)}
.ba-stat-lbl{font-size:.9rem;font-weight:600;color:var(--gray-700);line-height:1.45}
.ba-stat-lbl strong{color:var(--gray-900);font-weight:800}

/* — Tipo de cambio (FX) — */
.ba-fx{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:16px;padding:10px 14px;background:var(--google-blue-tint);border:1px solid rgba(66,133,244,.22);border-radius:12px}
.ba-fx-lbl{font-size:.78rem;font-weight:800;color:var(--google-blue-dark);display:inline-flex;align-items:center;gap:7px;letter-spacing:.01em}
.ba-fx-ctrls{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--gray-700)}
.ba-fx-rate{width:96px;padding:7px 10px;border:1px solid var(--gray-300);border-radius:8px;font:inherit;font-weight:800;font-size:.85rem;background:#fff;color:var(--gray-900)}
.ba-fx-cur{padding:7px 8px;border:1px solid var(--gray-300);border-radius:8px;font:inherit;font-weight:800;font-size:.8rem;background:#fff;color:var(--gray-900);cursor:pointer}
.ba-fx-clear{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:#fff;border:1px solid var(--gray-300);color:var(--gray-500);font-size:1.1rem;font-weight:800;line-height:1;display:grid;place-items:center}
.ba-fx-clear:hover{background:var(--google-red-tint);color:var(--google-red-dark);border-color:rgba(234,67,53,.3)}
.fx-local{color:var(--gray-500);font-weight:700;font-size:.86em}
.ba-result .fx-local{color:rgba(255,255,255,.6)}
.ba-result-big .fx-local{display:block;font-size:.32em;letter-spacing:0;margin-top:7px}
.ba-rrow b .fx-local{display:inline;font-size:.8em;margin-left:3px}
.ba-table td .fx-local{display:block;font-size:.82em;margin-top:2px}

/* — Tabla comparativa ordenable — */
.ba-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ba-table{width:100%;border-collapse:collapse;min-width:720px}
.ba-table thead tr{background:var(--gray-800)}
.ba-table thead th{padding:13px 12px;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-align:center;white-space:nowrap;cursor:pointer;user-select:none;transition:background .15s}
.ba-table thead th:first-child{text-align:left;min-width:170px;position:sticky;left:0;background:var(--gray-800);z-index:2}
.ba-table thead th:hover{background:#44474b}
.ba-table thead th.sorted{background:var(--google-blue-dark)}
.ba-sort-i{margin-left:4px;opacity:.55;font-size:.66rem}
.ba-table thead th.sorted .ba-sort-i{opacity:1}
.ba-table tbody td{padding:11px 12px;border-bottom:1px solid var(--gray-200);font-size:.85rem;font-weight:600;color:var(--gray-700);text-align:center;white-space:nowrap;vertical-align:middle}
.ba-table tbody td:first-child{text-align:left;white-space:normal;min-width:180px;position:sticky;left:0;background:#fff;font-weight:700;color:var(--gray-900)}
.ba-table tbody tr:nth-child(even) td{background:#fbfcfe}
.ba-table tbody tr:nth-child(even) td:first-child{background:#fbfcfe}
.ba-table tbody tr:hover td{background:#f0f4fe !important}
.ba-table tbody tr[data-rec] td{background:var(--google-blue-tint) !important;font-weight:700}
.ba-tool{display:flex;align-items:center;gap:9px}
.ba-tool .ba-rank{font-size:1rem}
.ck{color:var(--google-green);font-weight:800}
.cx{color:var(--google-red);font-weight:800}
.cmid{color:var(--google-yellow-dark);font-size:.78rem;font-weight:800}
.ba-badge{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:var(--radius-pill)}
.ba-badge.low{background:var(--google-green-tint);color:var(--google-green-dark)}
.ba-badge.mid{background:var(--google-yellow-tint);color:var(--google-yellow-dark)}
.ba-badge.high{background:var(--google-red-tint);color:var(--google-red-dark)}
.price-best{color:var(--google-green-dark);font-weight:800}
.price-high{color:var(--google-red-dark);font-weight:800}

/* — Quiz — */
.ba-quiz-q{margin-bottom:4px}
.ba-quiz-step{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-500);margin-bottom:10px}
.ba-quiz-q h4{font-size:1.18rem;margin-bottom:18px}
.ba-quiz-opts{display:grid;gap:10px}
.ba-quiz-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 17px;border-radius:var(--radius-lg);background:#fff;border:1.5px solid var(--gray-200);transition:var(--transition);font-size:.98rem;font-weight:700;color:var(--gray-800)}
.ba-quiz-opt:hover{border-color:var(--google-blue);background:var(--google-blue-tint);transform:translateY(-1px)}
.ba-quiz-opt .qo-key{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--gray-100);border:1px solid var(--gray-200);font-weight:800;font-size:.86rem;color:var(--gray-700)}
.ba-quiz-opt:hover .qo-key{background:#fff;color:var(--google-blue-dark);border-color:rgba(66,133,244,.3)}
.ba-quiz-progress{height:6px;background:var(--gray-200);border-radius:999px;overflow:hidden;margin-bottom:20px}
.ba-quiz-progress > span{display:block;height:100%;background:var(--rainbow);width:0;transition:width .4s ease}
.ba-quiz-result{text-align:center;padding:8px 4px}
.ba-quiz-result .qr-emoji{font-size:2.6rem;margin-bottom:8px}
.ba-quiz-result .qr-label{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--google-green-dark);margin-bottom:8px}
.ba-quiz-result h4{font-size:1.7rem;margin-bottom:8px}
.ba-quiz-result p{font-size:1rem;color:var(--gray-700);max-width:520px;margin:0 auto 18px}
.ba-quiz-restart{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--google-blue-dark);font-size:.9rem;cursor:pointer}

/* — Checklist / scorecard — */
.ba-checklist{display:grid;gap:10px}
.ba-check{display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border-radius:var(--radius-lg);background:#fff;border:1.5px solid var(--gray-200);cursor:pointer;transition:var(--transition)}
.ba-check:hover{border-color:rgba(66,133,244,.4)}
.ba-check input{position:absolute;opacity:0;width:0;height:0}
.ba-check .cbox{width:24px;height:24px;flex:0 0 auto;border-radius:7px;border:2px solid var(--gray-300);display:grid;place-items:center;transition:var(--transition);margin-top:1px}
.ba-check .cbox svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.6);transition:var(--transition)}
.ba-check input:checked ~ .cbox{background:var(--google-green);border-color:var(--google-green)}
.ba-check input:checked ~ .cbox svg{opacity:1;transform:scale(1)}
.ba-check .ctext{font-size:.98rem;font-weight:700;color:var(--gray-800);line-height:1.4}
.ba-check .ctext small{display:block;font-size:.84rem;font-weight:600;color:var(--gray-500);margin-top:3px}
.ba-check input:checked ~ .ctext{color:var(--gray-900)}
.ba-score{display:flex;align-items:center;gap:18px;margin-top:18px;padding:18px 20px;border-radius:var(--radius-lg);background:var(--gray-100);border:1px solid var(--gray-200)}
.ba-score-ring{--p:0;width:64px;height:64px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--google-green) calc(var(--p)*1%),var(--gray-200) 0);transition:--p .5s}
.ba-score-ring i{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.96rem;color:var(--gray-900)}
.ba-score-txt b{display:block;font-size:1.04rem;font-weight:800;color:var(--gray-900);margin-bottom:2px}
.ba-score-txt span{font-size:.9rem;color:var(--gray-700);font-weight:600;line-height:1.45}

/* Comparativa 2-col tarjetas (recomendación) */
.ba-versus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba-vs-card{border-radius:var(--radius-lg);padding:22px 22px;border:1.5px solid var(--gray-200);background:var(--gray-100)}
.ba-vs-card.win{border-color:var(--google-blue);background:var(--google-blue-tint)}
.ba-vs-tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-700);margin-bottom:9px}
.ba-vs-card.win .ba-vs-tag{color:var(--google-blue-dark)}
.ba-vs-name{font-size:1.16rem;font-weight:800;color:var(--gray-900);margin-bottom:13px}
.prose .ba-vs-list{display:grid;gap:8px;margin:0;padding:0}
.prose .ba-vs-list > li{padding-left:0;font-size:.9rem;color:var(--gray-700);line-height:1.5;display:flex;gap:9px}
.prose .ba-vs-list > li::before{content:none;display:none}
.ba-vs-list li .li-ic{flex:0 0 auto;margin-top:2px}

/* Fuentes / referencias */
.article-sources{max-width:760px;margin:8px auto 0;padding:24px 26px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-lg)}
.article-sources h2{font-size:1.06rem;margin:0 0 6px;display:flex;align-items:center;gap:9px;color:var(--gray-900)}
.article-sources h2 .fa-solid{color:var(--google-blue-dark);font-size:.95rem}
.article-sources .as-note{font-size:.82rem;color:var(--gray-500);margin:0 0 16px;font-weight:600;line-height:1.5}
.article-sources ol{margin:0;padding:0;display:grid;gap:10px;counter-reset:src;list-style:none}
.article-sources li{position:relative;padding-left:28px;font-size:.86rem;line-height:1.55;color:var(--gray-700);counter-increment:src}
.article-sources li::before{content:counter(src);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:6px;background:var(--gray-200);color:var(--gray-700);font-size:.66rem;font-weight:800;display:grid;place-items:center}
.article-sources cite{font-style:normal;font-weight:800;color:var(--gray-900)}
.article-sources a{color:var(--google-blue-dark);font-weight:700;text-decoration:underline;text-decoration-color:rgba(26,115,232,.32);text-underline-offset:2px;word-break:break-word}
.article-sources a:hover{text-decoration-color:var(--google-blue-dark)}

/* CTA al final del artículo (clase propia para evitar colisión con .article-cta de styles.css) */
.blog-cta{margin:8px auto 0;max-width:880px}
.blog-cta .cta-banner{padding:56px 28px}
.blog-cta .cta-banner .container{max-width:640px;padding-left:0;padding-right:0}
@media (max-width:620px){.blog-cta .cta-banner{padding:40px 20px}}
.article-related{padding:50px 0 70px;background:#fff;border-top:1px solid var(--gray-200)}
.article-related .container{max-width:1080px}
.ar-head{margin-bottom:24px}
.ar-head h2{font-size:1.5rem}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:960px){
  /* header baja a 64px → el TOC sticky debe pegarse justo debajo, sin hueco */
  .article-toc{top:64px}
}
@media (max-width:900px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .bf-card{grid-template-columns:1fr}
  .bf-visual{min-height:200px;order:-1}
  .ba-calc{grid-template-columns:1fr}
  .ba-versus{grid-template-columns:1fr}
  /* bloques .bartifact: padding más compacto ya desde tablets/teléfonos grandes */
  .ba-result{padding:18px 16px}
  .ba-stats{gap:11px}
  .ba-stat{padding:14px 15px;gap:12px}
  .ba-vs-card{padding:16px 16px}
  .ba-quiz-opt{padding:13px 14px}
  .ba-check{padding:12px 14px}
  .ba-score{padding:15px 16px;gap:14px}
}
@media (max-width:620px){
  .blog-grid{grid-template-columns:1fr}
  .bf-body{padding:30px 26px}
  .article-byline .ab-share{display:none}
  .ba-bar{grid-template-columns:96px 1fr auto;gap:9px}
  .bartifact{padding:8px}
  .ba-result{padding:15px 14px}
  .ba-stats{gap:10px}
  .ba-stat{padding:13px 14px;gap:11px}
  .ba-stat-num{width:36px;height:36px;font-size:1.05rem}
  .ba-vs-card{padding:14px 14px}
  .ba-quiz-opt{padding:12px 13px}
  .ba-check{padding:11px 13px}
  .ba-score{padding:13px 14px;gap:13px}
  .ba-calc{gap:14px}
  .blog-cta{margin-left:16px;margin-right:16px}
  .pull-quote{font-size:1.16rem}
}