/* =========================================================
   HOME · Blog, sistema de artículos (listados y guías)
   Se carga solo en artículos, después de styles.css.
   Componentes: progreso de lectura, hero con infografía,
   índice fijo, respuesta corta, cifras, tarjetas de listado,
   tabla comparativa, gráfico de barras, línea de pasos,
   checklist imprimible, fuentes, compartir, relacionados.
   ========================================================= */

:root{
  --b-radius:14px;
  --b-radius-sm:10px;
  --b-glow:rgba(107,43,226,.18);
  --b-ok:var(--purple-light);
  --b-warn:var(--text-muted);
  --b-card:var(--bg-sunken);
}

/* ---------- Progreso de lectura ---------- */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none}
.read-progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--purple),var(--purple-light))}

/* ---------- Hero del artículo ---------- */
.art-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.art-hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:720px;height:720px;background:radial-gradient(closest-side,var(--b-glow),transparent 70%);pointer-events:none}
.art-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-faint)}
.crumbs a{color:var(--text-dim);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:none}
.art-title{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.art-lede{margin:24px 0 0;font-size:18px;line-height:1.6;color:var(--text-muted);max-width:56ch}
.art-meta{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.art-meta li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);background:rgba(255,255,255,.02)}
.art-meta svg{flex:none;color:var(--purple-light)}
.art-meta .meta-strong{border-color:var(--purple-border);color:#fff;background:rgba(107,43,226,.12)}

/* Infografía del hero */
.infog{position:relative;border:1px solid var(--border);border-radius:var(--b-radius);background:linear-gradient(180deg,var(--bg-raised),var(--bg-sunken));padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.infog-label{display:flex;justify-content:space-between;gap:12px;margin:0 0 20px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.infog-label b{color:var(--purple-light);font-weight:400}
.infog-title{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.15;color:#fff;margin:0 0 20px}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.chain li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:var(--b-radius-sm);background:var(--bg-sunken)}
.chain li:not(:last-child)::after{content:"";position:absolute;left:37px;bottom:-11px;width:2px;height:10px;background:var(--purple)}
.chain-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:rgba(107,43,226,.16);color:var(--purple-light)}
.chain-name{display:block;font-weight:600;color:#fff;font-size:15px}
.chain-sub{display:block;font-size:13px;color:var(--text-dim);line-height:1.4;margin-top:2px}
.chain-ico{grid-row:span 2}
.chain-val{grid-column:2;justify-self:start;font-family:var(--font-mono);font-size:12px;color:#fff;padding:3px 8px;border-radius:5px;background:rgba(255,255,255,.06)}
.chain li.is-limit{border-color:var(--purple);background:rgba(107,43,226,.10)}
.chain li.is-limit .chain-val{color:var(--purple-light)}
.infog-foot{margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.infog-foot strong{color:#fff}

/* Línea de pasos (infografía vertical) */
.timeline{list-style:none;margin:0;padding:0;counter-reset:tl}
.timeline li{counter-increment:tl;position:relative;display:grid;grid-template-columns:40px 1fr;gap:14px;padding:0 0 16px}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:linear-gradient(var(--purple),var(--border))}
.timeline li::after{content:counter(tl,decimal-leading-zero);grid-column:1;grid-row:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--purple-border);background:rgba(107,43,226,.14);font-family:var(--font-mono);font-size:12px;color:#fff}
.timeline .tl-body{grid-column:2;grid-row:1;padding-top:2px}
.timeline .tl-name{display:block;font-weight:600;color:#fff;font-size:15px}
.timeline .tl-who{display:inline-block;margin-top:4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-light)}

/* ---------- Layout con índice ---------- */
.art-layout{max-width:1360px;margin:0 auto;padding:64px 40px 40px;display:grid;grid-template-columns:240px minmax(0,780px);gap:72px;justify-content:center}
.toc{position:sticky;top:120px;align-self:start;max-height:calc(100vh - 140px);overflow:auto;padding-right:8px}
.toc-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--text-dim);text-decoration:none;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.toc a:hover{color:#fff;text-decoration:none}
.toc a[aria-current="true"]{color:#fff;border-left-color:var(--purple-light)}
.toc-mobile{display:none;margin:0 0 32px;border:1px solid var(--border);border-radius:var(--b-radius-sm);background:var(--bg-sunken)}
.toc-mobile summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{content:"+";font-size:18px;color:var(--purple-light)}
.toc-mobile[open] summary::after{content:"\2212"}
.toc-mobile ol{margin:0;padding:0 18px 16px 38px;color:var(--text-dim)}
.toc-mobile li{padding:6px 0}
.toc-mobile a{color:var(--text-muted);text-decoration:none}

/* ---------- Cuerpo ---------- */
.art-body{min-width:0;color:var(--text-muted);font-size:17px;line-height:1.75}
.art-body > section{scroll-margin-top:120px}
.art-body :where(h2){font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:-.015em;margin:72px 0 18px;text-wrap:balance}
.art-body > section:first-child :where(h2){margin-top:0}
.art-body :where(h3){font-family:var(--font-body);font-weight:650;color:#fff;font-size:19px;line-height:1.35;letter-spacing:0;margin:32px 0 10px}
.art-body :where(p){margin:0 0 18px}
.art-body :where(ul,ol){margin:0 0 18px;padding-left:22px}
.art-body :where(li){margin:0 0 8px}
.art-body :where(strong){color:#fff;font-weight:600}
.art-body :where(a){text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(167,139,250,.45)}
.art-body :where(a:hover){text-decoration-color:#fff}
.art-body a.btn{text-decoration:none}
.eyebrow-num{display:inline-block;margin:0 0 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light)}

/* Respuesta corta */
.tldr{position:relative;margin:0 0 40px;padding:28px 28px 24px;border:1px solid var(--purple-border);border-radius:var(--b-radius);background:linear-gradient(135deg,rgba(107,43,226,.16),rgba(107,43,226,.03) 60%)}
.tldr-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light)}
.tldr p{color:#fff;font-size:17px;margin:0 0 14px}
.tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tldr li{position:relative;padding-left:28px;margin:0;color:var(--text-muted);font-size:15.5px;line-height:1.6}
.tldr li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}

/* Cifras */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 32px}
.stat{padding:22px 20px;border:1px solid var(--border);border-radius:var(--b-radius-sm);background:var(--b-card)}
.stat-num{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,40px);line-height:1;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-num small{font-size:.5em;color:var(--purple-light);margin-left:2px}
.stat-lbl{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--text-muted)}
.stat-src{display:block;margin-top:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-faint)}

/* Aviso de transparencia */
.disclosure{display:grid;grid-template-columns:40px 1fr;gap:16px;margin:0 0 32px;padding:20px 22px;border:1px dashed var(--border-strong);border-radius:var(--b-radius-sm);background:rgba(255,255,255,.02)}
.disclosure-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);color:#fff}
.disclosure p{margin:0;font-size:15px;line-height:1.6}
.disclosure p + p{margin-top:8px}
.disclosure-title{font-weight:600;color:#fff}

/* ---------- Tarjetas del listado ---------- */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:rank}
.rank-card{position:relative;scroll-margin-top:120px;border:1px solid var(--border);border-radius:var(--b-radius);background:var(--b-card);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-out)}
.rank-card:hover{border-color:var(--border-strong)}
.rank-card.is-home{border-color:var(--purple-border);background:linear-gradient(180deg,rgba(107,43,226,.10),var(--b-card) 40%)}
.rank-head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px 26px;border-bottom:1px solid var(--border)}
.rank-num{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--purple-light);min-width:56px;font-variant-numeric:tabular-nums}
.rank-name{margin:0;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.1;color:#fff;letter-spacing:-.01em}
.rank-model{display:block;margin-top:6px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
.rank-logo{display:grid;place-items:center;width:112px;height:56px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.04)}
.rank-logo img{max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain}
.rank-logo-text{font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff;letter-spacing:-.01em}
.rank-body{padding:22px 26px 24px}
.rank-body > p{margin:0 0 18px;font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.tags li{margin:0;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.05);font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.tags li.tag-home{background:rgba(107,43,226,.18);color:#fff}
.tags li.tag-home svg{color:var(--purple-light)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 18px;border:1px solid var(--border);border-radius:var(--b-radius-sm);overflow:hidden;background:var(--border)}
.specs div{padding:12px 14px;background:var(--bg-sunken)}
.specs dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.specs dd{margin:4px 0 0;font-size:14px;line-height:1.4;color:#fff}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.proscons > div{padding:14px 16px;border-radius:var(--b-radius-sm);background:rgba(255,255,255,.025)}
.proscons h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--font-mono);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.proscons .pc-pro h4{color:var(--b-ok)}
.proscons .pc-con h4{color:var(--b-warn)}
.proscons ul{list-style:none;margin:0;padding:0}
.proscons li{font-size:14.5px;line-height:1.5;margin:0 0 6px;padding-left:14px;position:relative}
.proscons li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.ideal{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-left:2px solid var(--purple);background:rgba(107,43,226,.06);border-radius:0 8px 8px 0;font-size:15px;line-height:1.55}
.ideal svg{flex:none;margin-top:3px;color:var(--purple-light)}
.rank-src{display:block;margin-top:14px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.rank-src a{color:var(--text-dim)}

/* ---------- Tabla comparativa ---------- */
.table-wrap{margin:8px 0 12px;border:1px solid var(--border);border-radius:var(--b-radius);overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--b-card)}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.45}
.cmp caption{text-align:left;padding:16px 18px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.cmp thead th{font-family:var(--font-mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.cmp tbody th{color:#fff;font-weight:600;white-space:nowrap}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:rgba(255,255,255,.02)}
.cmp td.num{font-family:var(--font-mono);color:#fff;white-space:nowrap}
.cmp .yes{color:var(--b-ok)}
.cmp .no{color:var(--text-faint)}
.table-note{font-size:13px;color:var(--text-faint);margin:0 0 24px}

/* ---------- Gráfico de barras ---------- */
.chart{margin:8px 0 28px;padding:24px;border:1px solid var(--border);border-radius:var(--b-radius);background:var(--b-card)}
.chart-title{margin:0 0 4px;font-weight:600;color:#fff;font-size:16px}
.chart-sub{margin:0 0 20px;font-size:13.5px;color:var(--text-dim)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bars li{display:grid;grid-template-columns:minmax(120px,190px) 1fr 70px;gap:14px;align-items:center;margin:0}
.bar-lbl{font-size:13.5px;line-height:1.35;color:var(--text-muted)}
.bar-lbl b{display:block;color:#fff;font-weight:600}
.bar-track{height:14px;border-radius:4px;background:rgba(255,255,255,.04);overflow:hidden}
.bar-fill{display:block;height:100%;width:calc(var(--v) * 1%);border-radius:4px;background:var(--border-strong);transform-origin:0 50%}
.bars li.is-key .bar-fill{background:linear-gradient(90deg,var(--purple),var(--purple-light))}
.bar-val{font-family:var(--font-mono);font-size:13px;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.chart-foot{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-faint)}
.js .chart.is-waiting .bar-fill{transform:scaleX(0)}
.js .chart .bar-fill{transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.js .chart .bars li:nth-child(2) .bar-fill{transition-delay:60ms}
.js .chart .bars li:nth-child(3) .bar-fill{transition-delay:120ms}
.js .chart .bars li:nth-child(4) .bar-fill{transition-delay:180ms}
.js .chart .bars li:nth-child(5) .bar-fill{transition-delay:240ms}
.js .chart .bars li:nth-child(6) .bar-fill{transition-delay:300ms}

/* ---------- Pasos numerados ---------- */
.steps{list-style:none;margin:0 0 24px;padding:0;counter-reset:st;display:grid;gap:12px}
.steps > li{counter-increment:st;position:relative;margin:0;padding:18px 20px 18px 68px;border:1px solid var(--border);border-radius:var(--b-radius-sm);background:var(--b-card)}
.steps > li::before{content:counter(st);position:absolute;left:18px;top:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--purple);font-family:var(--font-mono);font-size:14px;color:#fff}
.steps .step-q{display:block;font-weight:600;color:#fff;font-size:16px;line-height:1.4;margin:0 0 6px}
.steps p{margin:0;font-size:15px;line-height:1.6}

/* Señales de alerta */
.flags{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flags li{display:grid;grid-template-columns:28px 1fr;gap:10px;margin:0;padding:14px 16px;border:1px solid rgba(252,165,165,.22);border-radius:var(--b-radius-sm);background:rgba(252,165,165,.04);font-size:15px;line-height:1.5}
.flags svg{color:var(--b-warn);margin-top:2px}

/* ---------- Checklist (interactivo e imprimible) ---------- */
.checklist{margin:8px 0 32px;border:1px solid var(--border);border-radius:var(--b-radius);background:var(--b-card);overflow:hidden}
.checklist-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,rgba(107,43,226,.14),transparent)}
.checklist-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;line-height:1.15}
.checklist-count{display:block;margin-top:6px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
.checklist-meter{height:4px;background:rgba(255,255,255,.06)}
.checklist-meter span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--c,0));background:var(--purple);transition:transform 300ms}
.checklist ul{list-style:none;margin:0;padding:8px 0}
.checklist li{margin:0}
.checklist label{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;padding:12px 24px;cursor:pointer;font-size:15.5px;line-height:1.5;color:var(--text-muted);transition:background var(--dur-fast) var(--ease-out)}
.checklist label:hover{background:rgba(255,255,255,.025)}
.checklist input{appearance:none;-webkit-appearance:none;margin:1px 0 0;width:22px;height:22px;border:1.5px solid var(--border-strong);border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.checklist input::after{content:"";width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.checklist input:checked{background:var(--purple);border-color:var(--purple)}
.checklist input:checked::after{transform:scale(1)}
.checklist input:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.checklist input:checked + span{color:var(--text-dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.checklist-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 24px 22px;border-top:1px solid var(--border)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font:500 14px var(--font-body);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn-ghost:hover{border-color:var(--purple-light);color:#fff}
.btn-ghost:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* Bloque descargable */
.download{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin:8px 0 32px;padding:22px 24px;border:1px solid var(--purple-border);border-radius:var(--b-radius);background:radial-gradient(120% 140% at 0% 0%,rgba(107,43,226,.22),transparent 60%),var(--b-card)}
.download-ico{display:grid;place-items:center;width:56px;height:64px;border-radius:8px;background:#fff;color:var(--bg);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;position:relative}
.download-ico::before{content:"";position:absolute;top:0;right:0;border-width:0 14px 14px 0;border-style:solid;border-color:var(--b-card) var(--b-card) var(--text-muted) var(--text-muted)}
.download-title{margin:0 0 4px;font-weight:600;color:#fff;font-size:17px}
.download p{margin:0;font-size:14.5px;line-height:1.5}

/* FAQ dentro del artículo */
.art-faq{margin:0 0 8px}
.art-faq .faq-item:last-of-type{border-bottom:1px solid var(--border)}
.art-faq .faq-answer{font-size:16px;line-height:1.7}
.art-faq .faq-answer p{margin:0 0 12px}

/* Fuentes */
.sources{margin:0;padding:0 0 0 22px;font-size:14px;line-height:1.6;color:var(--text-dim)}
.sources li{margin:0 0 10px;padding-left:4px}
.sources li::marker{font-family:var(--font-mono);color:var(--text-faint)}
.sources a{color:var(--text-muted)}
.cite{font-family:var(--font-mono);font-size:.72em;vertical-align:super;line-height:0;margin-left:1px;text-decoration:none !important}
.cite a{text-decoration:none;color:var(--purple-light)}

/* Autor y revisión */
.byline{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;margin:48px 0 0;padding:20px 22px;border:1px solid var(--border);border-radius:var(--b-radius-sm)}
.byline-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--bg-raised);border:1px solid var(--border)}
.byline-mark img{width:34px;height:34px;object-fit:contain}
.byline p{margin:0;font-size:14.5px;line-height:1.55}
.byline b{color:#fff;font-weight:600}

/* Compartir */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 0}
.share-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-right:6px}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-muted);font:500 13.5px var(--font-body);cursor:pointer;text-decoration:none !important;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.share a:hover,.share button:hover{border-color:var(--purple-light);color:#fff}

/* CTA final */
.art-cta{position:relative;overflow:hidden;margin:56px 0 0;padding:36px;border-radius:var(--b-radius);border:1px solid var(--purple-border);background:radial-gradient(90% 120% at 100% 0%,rgba(107,43,226,.35),transparent 60%),var(--bg-raised)}
.art-cta-title{margin:0 0 10px;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,30px);line-height:1.1;color:#fff;max-width:22ch}
.art-cta p{margin:0 0 22px;max-width:52ch}
.art-cta .cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* Relacionados */
.related-wrap{max-width:1360px;margin:0 auto;padding:40px 40px 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.related-card{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--border);border-radius:var(--b-radius);text-decoration:none !important;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.related-card:hover{border-color:var(--purple);transform:translateY(var(--lift));box-shadow:var(--shadow-hover)}
.related-card:active{transform:translateY(-1px);transition-duration:var(--dur-press)}
.related-card .post-title{font-size:20px}
.related-card .read-time{margin-top:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .art-layout{grid-template-columns:minmax(0,780px);gap:0}
  .toc{display:none}
  .toc-mobile{display:block}
}
@media (max-width:980px){
  .art-hero-grid{grid-template-columns:1fr;gap:40px;padding-top:48px;padding-bottom:56px}
}
@media (max-width:900px){
  .art-layout{padding:44px 20px 24px}
  .related-wrap{padding:24px 20px 0}
  .related-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .art-body{font-size:16.5px}
  .stats{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .proscons,.flags{grid-template-columns:1fr}
  /* Número y logo comparten la primera fila; el nombre usa todo el ancho
     debajo, para que nombres largos ("concesionario") no se partan */
  .rank-head{grid-template-columns:auto 1fr;gap:14px 20px;padding:20px}
  .rank-num{grid-row:1;grid-column:1;font-size:36px;min-width:44px}
  .rank-logo{grid-row:1;grid-column:2;justify-self:end}
  .rank-head > div{grid-row:2;grid-column:1 / -1}
  .rank-name{font-size:20px}
  .rank-body{padding:18px 20px 20px}
  .bars li{grid-template-columns:1fr 56px;gap:6px 10px}
  .bar-lbl{grid-column:1 / -1}
  .download{grid-template-columns:auto 1fr}
  .download .btn{grid-column:1 / -1}
  .infog{padding:20px}
  .chain li{grid-template-columns:40px 1fr;padding:12px}
  .chain-ico{width:40px;height:40px}
  .chain li:not(:last-child)::after{left:31px}
  .art-cta{padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){
  .js .chart .bar-fill,.checklist-meter span,.related-card{transition:none}
  .js .chart.is-waiting .bar-fill{transform:none}
}


/* ---------- v2, formato más ligero tipo blog ---------- */
/* Resumen "mejor para" con saltos a cada opción */
.picks{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--border)}
.art-body .picks li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;margin:0;padding:14px 4px;border-bottom:1px solid var(--border)}
.picks-n{font-family:var(--font-mono);font-size:12px;color:var(--purple-light)}
.picks-name{display:block;color:#fff;font-weight:600;font-size:16px;line-height:1.35}
.picks-for{display:block;font-size:14.5px;line-height:1.5;color:var(--text-dim);margin-top:2px}
.art-body .picks a.picks-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:13.5px;color:var(--purple-light);text-decoration:none;white-space:nowrap}
.art-body .picks a.picks-go:hover{color:#fff}
.art-body .picks li.is-home{background:linear-gradient(90deg,rgba(107,43,226,.12),transparent 70%)}
.intro-p{font-size:18px;color:#fff}

/* Datos clave en una línea (reemplaza la ficha técnica) */
.rank-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px;padding:0;list-style:none}
.art-body .rank-facts li{position:relative;margin:0;padding-left:14px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--text-muted)}
.rank-facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--purple-light)}
.rank-body .rank-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14.5px;font-weight:500}
.rank-card.is-home .rank-head{border-bottom-color:var(--purple-border)}
.rank-card .tags a{color:inherit;text-decoration:none}

/* Llamado de HOME dentro del texto */
.home-callout{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin:28px 0 8px;padding:18px 20px;border:1px solid var(--purple-border);border-radius:var(--b-radius);background:linear-gradient(90deg,rgba(107,43,226,.14),rgba(107,43,226,.03))}
.home-callout img{width:44px;height:44px;object-fit:contain}
.art-body .home-callout p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-muted)}
.home-callout b{color:#fff;font-weight:600}
.home-callout .btn{height:46px;padding:0 18px;font-size:14px;white-space:nowrap}

/* Lectura relacionada en medio del texto */
.also{margin:24px 0;padding:14px 18px;border-left:2px solid var(--purple);background:rgba(255,255,255,.025);border-radius:0 10px 10px 0}
.art-body .also p{margin:0;font-size:15px;line-height:1.55}
.also-lbl{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px}

@media (max-width:700px){
  .art-body .picks li{grid-template-columns:24px minmax(0,1fr)}
  .art-body .picks a.picks-go{grid-column:2;min-height:32px;padding:0}
  .home-callout{grid-template-columns:auto 1fr}
  .home-callout .btn{grid-column:1 / -1}
}

/* ---------- Impresión (checklist descargable como PDF) ---------- */
@media print{
  @page{margin:16mm}
  html,body{background:#fff !important;color:#111 !important}
  .site-header,.site-footer,.read-progress,.toc,.toc-mobile,.share,.art-cta,.related-wrap,.checklist-actions,.no-print{display:none !important}
  body.print-checklist main > *:not(.art-layout){display:none !important}
  body.print-checklist .art-body > *:not(.print-target){display:none !important}
  body.print-checklist .art-body > .print-target > *:not(.checklist){display:none !important}
  .art-layout{display:block;padding:0}
  .checklist{border:1px solid #bbb;background:#fff}
  .checklist-head{background:none;border-bottom:1px solid #bbb}
  .checklist-title{color:#111}
  .checklist label,.checklist input:checked + span{color:#111;text-decoration:none}
  .checklist input{border-color:#555;background:#fff !important}
  .checklist input::after{display:none}
  .checklist-meter{display:none}
  .print-brand{display:block !important;margin:0 0 12px;font:12px var(--font-mono);color:#555}
}
.print-brand{display:none}
.cmp tr.is-home{background:rgba(107,43,226,.10)}
.cmp tr.is-home th{color:var(--purple-light)}

/* ---------- v3 ---------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-actions .btn svg{width:18px;height:18px}
.badge-rec{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:6px;border-radius:4px;background:var(--purple);font-family:var(--font-mono);font-size:9.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#fff;vertical-align:middle;white-space:nowrap}
.rank-model .badge-rec{margin-left:2px}
.rank-body .rank-more{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.rank-body .rank-more a{display:inline-flex;align-items:center;gap:6px}
.rank-body .rank-more span{color:var(--text-dim)}
.art-body .rank > li.rank-inline{list-style:none;margin:0}
.rank-inline .home-callout{margin:0}
a.btn-ghost{text-decoration:none !important}
.art-body .picks li.is-home{background:linear-gradient(90deg,rgba(107,43,226,.22),transparent 80%);border-left:2px solid var(--purple)}
/* Infografía comparativa de dos columnas */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.versus-col{border:1px solid var(--border);border-radius:var(--b-radius-sm);background:var(--bg-sunken);overflow:hidden}
.versus-col.is-accent{border-color:var(--purple);background:rgba(107,43,226,.08)}
.versus-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600;color:#fff;font-size:14.5px;line-height:1.3}
.versus-head .chain-ico{width:34px;height:34px;flex:none}
.versus dl{margin:0;padding:4px 14px 10px}
.versus dt{margin-top:10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.versus dd{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--text-muted)}
/* Puntos clave */
.keys{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.art-body .keys li{position:relative;padding-left:30px;margin:0;font-size:16px;line-height:1.6}
.keys li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
/* Tarjetas de información */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 24px}
.info-card{padding:18px;border:1px solid var(--border);border-radius:var(--b-radius-sm);background:var(--b-card)}
.info-card .chain-ico{width:38px;height:38px;margin-bottom:12px}
.info-card b{display:block;color:#fff;font-weight:600;font-size:15.5px;margin-bottom:4px}
.art-body .info-card p{margin:0;font-size:14.5px;line-height:1.55}
@media (max-width:700px){.info-grid{grid-template-columns:1fr}}
@media (max-width:420px){.versus{grid-template-columns:1fr}}

/* ---------- Categorías y listados del blog ---------- */
.cat-strip{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px}
.cat-strip .blog-card{aspect-ratio:3/4}
.cat-strip .blog-card-body svg{width:24px;height:24px;color:#fff}
.cat-strip .blog-card[aria-current="page"]{outline:var(--focus-ring);outline-offset:3px}
.blog-card-count{position:absolute;top:12px;left:12px;height:24px;display:inline-flex;align-items:center;padding:0 9px;border-radius:5px;background:rgba(16,16,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:#fff}
.blog-card:focus-visible{outline:var(--focus-ring);outline-offset:3px}
@media (max-width:1100px){
  /* fila deslizable: sin filas descuadradas de 3 + 2 */
  .cat-strip{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 32px) / 3.3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
  .cat-strip .blog-card{scroll-snap-align:start}
  .cat-strip .blog-card:hover{transform:none}
}
@media (max-width:640px){
  .cat-strip{grid-auto-columns:calc((100% - 12px) / 1.7);gap:12px}
}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-card .post-desc{font-size:14px;line-height:1.55;color:var(--text-dim)}
.related-card .read-time{display:inline-flex;align-items:center;gap:6px}
.related-card .read-time svg{color:var(--purple-light)}
@media (max-width:1000px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.section-tight > .home-callout{margin-top:24px}
.cat-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.cat-cover{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--b-radius);border:1px solid var(--border)}
.cat-body{padding-top:56px}
.empty-cat{display:flex;gap:16px;align-items:center;padding:24px;border:1px dashed var(--border-strong);border-radius:var(--b-radius)}
.empty-cat p{margin:0;color:var(--text-muted);line-height:1.6}
.empty-cat b{color:#fff}
.empty-cat .chain-ico{flex:none}
a.h1-kicker{color:var(--text-dim);text-decoration:none}
a.h1-kicker:hover{color:#fff}
@media (max-width:900px){.cat-hero-grid{grid-template-columns:1fr;padding-top:40px;padding-bottom:48px}.cat-cover{max-height:260px}}

/* ---------- Recursos ---------- */
.res-row{display:grid;gap:8px;margin-top:28px;max-width:520px}
.res-row-lbl{margin:0 0 2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.res-mini{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;min-height:60px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--b-radius-sm);background:rgba(255,255,255,.03);text-decoration:none !important;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.res-mini:hover{border-color:var(--purple);background:rgba(107,43,226,.10)}
.res-mini .chain-ico{width:40px;height:40px}
.res-type{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-light)}
.res-title{display:block;margin-top:2px;font-weight:600;font-size:14.5px;line-height:1.35;color:#fff}
.res-go{color:var(--purple-light);display:inline-flex}
.res-all{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.res-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px;border:1px solid var(--border);border-radius:var(--b-radius);background:var(--b-card)}
.res-card .chain-ico{width:48px;height:48px;margin-bottom:6px}
.res-card-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.15;color:#fff;letter-spacing:-.01em}
.res-card p{margin:0;color:var(--text-muted);font-size:15px;line-height:1.6}
.res-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.res-chips a{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:5px;background:rgba(255,255,255,.05);font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-decoration:none}
.res-chips a:hover{color:#fff;background:rgba(107,43,226,.2)}
.res-card .btn{margin-top:auto;height:48px;font-size:14px}
.res-card .btn svg{width:18px;height:18px}
@media (max-width:1000px){.res-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.res-grid{grid-template-columns:1fr}.res-card{padding:22px}}

/* Recursos, versión responsive: en tablet pasan a filas horizontales, sin huérfanos */
@media (max-width:1000px){
  .res-grid{grid-template-columns:1fr;gap:12px}
  .res-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"ico type btn" "ico title btn" "ico desc btn" "ico chips btn";column-gap:20px;row-gap:6px;align-items:center;padding:22px 24px}
  .res-card .chain-ico{grid-area:ico;align-self:start;margin:0}
  .res-card .res-type{grid-area:type}
  .res-card .res-card-title{grid-area:title;font-size:20px}
  .res-card p{grid-area:desc}
  .res-card .res-chips{grid-area:chips;margin:2px 0 0}
  .res-card .btn{grid-area:btn;margin:0}
}
@media (max-width:640px){
  .res-card{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ico type" "ico title" "desc desc" "chips chips" "btn btn";padding:20px}
  .res-card .chain-ico{width:44px;height:44px}
  .res-card .btn{width:100%;margin-top:8px}
}
/* la regla global de h2 en móvil (styles.css) no debe agrandar los títulos de recursos */
main .res-grid .res-card h2.res-card-title.res-card-title.res-card-title{font-size:22px !important;line-height:1.15}
@media (max-width:1000px){main .res-grid .res-card h2.res-card-title.res-card-title.res-card-title{font-size:20px !important}}

/* Logos siempre dentro de su recuadro */
.rank-logo{box-sizing:border-box;overflow:hidden;flex:none}
.rank-logo img{display:block;max-width:100%;max-height:36px;width:auto;height:auto;object-fit:contain}
.rank-head > div{min-width:0}
.rank-name{overflow-wrap:anywhere}

/* Teléfonos de 320–360px: el título del recurso baja a su propia fila para que no se parta ("Calculadora") */
@media (max-width:360px){
  .res-card{grid-template-areas:"ico type" "title title" "desc desc" "chips chips" "btn btn"}
}