/* Generado por `manage.py bundle_css`. NO editar a mano:
   se sobrescribe en cada build. Las fuentes son las de
   apps/core/css_bundles.py → BUNDLES['blog-post'] */

/* ===== css/comparator/cmpx.css ===== */
/* ============================================================================
   Sistema nuevo («mostrador técnico», oct-2026) — tokens y componentes comunes

   Lo comparten todas las páginas del comparador.
   Los componentes van bajo .cmpx. Los tokens --x-* están en tokens.css
   (globales desde el 29-10-2026, cuando migró la cabecera y el pie).
   Ver DESIGN-GUIDE.md.

   Cada página añade su hoja propia detrás (index.css, cmpx-category.css).
   Móvil primero; solo los cinco breakpoints de la guía, en min-width.
   ============================================================================ */


.cmpx {
  background: var(--x-paper);
  color: var(--x-ink);
  font-family: var(--x-font);
  font-size: 15px;
  line-height: 1.5;
}


.cmpx *, .cmpx *::before, .cmpx *::after { box-sizing: border-box; }
:where(.cmpx) a { color: inherit; }
.cmpx :focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; border-radius: 4px; }
.cmpx h1, .cmpx h2, .cmpx h3 { margin: 0; font-family: var(--x-font); color: var(--x-ink); text-wrap: balance; }
/* :where() deja la especificidad en 0: cualquier clase propia gana. */
:where(.cmpx) p { margin: 0; }

.cmpx-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Franja de campaña (Black Friday): portada del comparador y home. */
.cmpx-strip { background: var(--x-strip); color: var(--x-strip-ink); font-size: 13.5px; }
.cmpx-strip .cmpx-wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; justify-content: space-between; padding-block: 9px; }
.cmpx-strip strong { font-weight: 700; }
.cmpx-strip a { font-weight: 600; text-underline-offset: 3px; }
.cmpx-num { font-variant-numeric: tabular-nums; }
.cmpx-label { font-stretch: 78%; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--x-ink-3); }


/* --- Entrada --------------------------------------------------------------- */
.cmpx-intro { padding-block: 28px; border-bottom: 1px solid var(--x-line); }
.cmpx-intro__grid { display: grid; gap: 28px; align-items: start; }
.cmpx-intro__main { min-width: 0; }

.cmpx-crumbs { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--x-ink-3); }
.cmpx-crumbs li + li::before { content: "/"; margin-right: 8px; }
.cmpx-crumbs a { text-decoration: none; }
.cmpx-crumbs a:hover { color: var(--x-ink); text-decoration: underline; text-underline-offset: 3px; }
.cmpx-crumbs [aria-current] { color: var(--x-ink-2); }

.cmpx-intro h1 { font-stretch: 104%; font-weight: 650; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.022em; margin-top: 14px; max-width: 22ch; }
.cmpx-lead { color: var(--x-ink-2); font-size: 16px; max-width: 58ch; margin: 12px 0 24px; }


.cmpx-btn { font: inherit; font-weight: 600; font-size: 14.5px; line-height: 1.2; border-radius: var(--x-r); padding: 10px 16px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cmpx-btn--primary { background: var(--x-accent); color: var(--x-accent-ink); }
.cmpx-btn--primary:hover { filter: brightness(1.08); }
.cmpx-btn--ghost { background: var(--x-surface); color: var(--x-ink); border-color: var(--x-line-2); }
.cmpx-btn--ghost:hover { border-color: var(--x-ink); }
.cmpx-btn--ink { background: var(--x-ink); color: var(--x-paper); }
.cmpx-btn--ink:hover { background: color-mix(in srgb, var(--x-ink) 85%, var(--x-paper)); }

.cmpx-cats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 16px 0 0; max-width: 680px; }
.cmpx-chip { display: inline-flex; gap: 7px; align-items: baseline; text-decoration: none; font-size: 14px; padding: 6px 11px; border: 1px solid var(--x-line-2); border-radius: 999px; background: var(--x-surface); transition: border-color .15s ease; }
.cmpx-chip span { color: var(--x-ink-3); font-size: 12.5px; }
.cmpx-chip:hover { border-color: var(--x-ink); }
.cmpx-chip.is-active { border-color: var(--x-ink); background: var(--x-ink); color: var(--x-paper); font-weight: 600; }
.cmpx-chip.is-active span { color: inherit; opacity: .7; }

.cmpx-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; font-size: 13.5px; color: var(--x-ink-2); }
.cmpx-facts b { color: var(--x-ink); font-weight: 650; }

/* Leyenda del medidor */
.cmpx-legend { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; padding: 20px; max-width: 560px; }
.cmpx-legend h2 { font-stretch: 104%; font-weight: 650; font-size: 17px; line-height: 1.3; margin: 6px 0; }
.cmpx-legend > p { color: var(--x-ink-2); font-size: 14px; margin-bottom: 16px; }
.cmpx-legend__sample { border-top: 1px dashed var(--x-line-2); padding-top: 14px; }
.cmpx-legend ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--x-ink-2); }
.cmpx-legend li { display: flex; gap: 9px; align-items: center; }
.cmpx-swatch { width: 18px; height: 8px; border-radius: 2px; flex: none; }
.cmpx-swatch--low { background: var(--x-low); }
.cmpx-swatch--mid { background: var(--x-ink-3); }
.cmpx-swatch--high { background: var(--x-high); }

/* --- Medidor de rango de 90 días ------------------------------------------ */
.cmpx-meter { display: grid; gap: 5px; min-width: 0; }
.cmpx-meter__seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 10px; align-items: end; }
.cmpx-meter__seg i { display: block; height: 6px; border-radius: 1.5px; background: var(--x-mid); }
.cmpx-meter__seg i.z-low { background: color-mix(in srgb, var(--x-low) 35%, var(--x-mid)); }
.cmpx-meter__seg i.z-high { background: color-mix(in srgb, var(--x-high) 30%, var(--x-mid)); }
.cmpx-meter__seg i.on { height: 10px; background: var(--x-ink); }
.cmpx-meter__seg i.on.z-low { background: var(--x-low); }
.cmpx-meter__seg i.on.z-high { background: var(--x-high); }
.cmpx-meter__ends { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--x-ink-3); }
/* Los precios de los extremos no se parten; el veredicto sí puede ir a dos líneas. */
.cmpx-meter__ends > :first-child, .cmpx-meter__ends > :last-child { white-space: nowrap; flex: none; }
.cmpx-meter__verdict { font-size: 12.5px; font-weight: 600; text-align: center; min-width: 0; }
.cmpx-meter__verdict.v-low { color: var(--x-low); }
.cmpx-meter__verdict.v-mid { color: var(--x-ink-2); }
.cmpx-meter__verdict.v-high { color: var(--x-high); }
.cmpx-meter--none { font-size: 12.5px; color: var(--x-ink-3); }

/* --- Secciones ------------------------------------------------------------- */
.cmpx-block { padding-block: 40px 8px; }
.cmpx-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.cmpx-head > div { min-width: 0; }
.cmpx h2.cmpx-h2 { font-stretch: 104%; font-weight: 650; font-size: clamp(22px, 2.4vw, 26px); letter-spacing: -.018em; line-height: 1.18; }
.cmpx-head p { color: var(--x-ink-2); font-size: 14.5px; max-width: 62ch; margin-top: 6px; }
.cmpx-head__tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.cmpx .cmpx-textlink { font-weight: 600; font-size: 14.5px; color: var(--x-accent); text-underline-offset: 3px; }
.cmpx-empty { color: var(--x-ink-2); padding: 20px; border: 1px dashed var(--x-line-2); border-radius: 12px; }


/* Tabla de bajadas: lista en móvil, rejilla de columnas en escritorio */
.cmpx-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--x-line); border-radius: 14px; background: var(--x-surface); overflow: hidden; }
.cmpx-rows__head { display: none; }
.cmpx-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "pic name name" "pic price price" "meter meter meter" "shop shop cmp"; gap: 10px 14px; align-items: center; padding: 14px; }
.cmpx-row + .cmpx-row { border-top: 1px solid var(--x-line); }
.cmpx-row__pic { grid-area: pic; align-self: start; }
.cmpx-row__name { grid-area: name; min-width: 0; }
.cmpx-row__price { grid-area: price; }
.cmpx-row__meter { grid-area: meter; min-width: 0; }
.cmpx-row__shop { grid-area: shop; min-width: 0; }
.cmpx-row__cmp { grid-area: cmp; }

.cmpx-pic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--x-tray); overflow: hidden; }
.cmpx-pic img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.cmpx-pname { display: block; font-weight: 650; font-size: 15px; line-height: 1.25; text-decoration: none; }
.cmpx-pname:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmpx-pcat { color: var(--x-ink-3); font-size: 13px; margin-top: 2px; }
.cmpx-price { font-stretch: 104%; font-weight: 700; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; }
.cmpx-was { color: var(--x-ink-3); font-size: 13px; margin-top: 3px; }
.cmpx-was s { text-decoration-thickness: 1px; }
.cmpx-was .cmpx-drop:first-child { margin-left: 0; }

/* Selector de mercado (estilos base en comparator.css) */
.cmpx .comparator-market-selector__trigger,
.cmpx .comparator-market-selector__option { font-family: var(--x-font); }
.cmpx-drop { display: inline-block; font-weight: 650; font-size: 12.5px; color: var(--x-low); background: var(--x-low-soft); padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: 1px; }
.cmpx-shop { font-size: 13.5px; color: var(--x-ink-2); line-height: 1.35; }
.cmpx-shop b { color: var(--x-ink); font-weight: 600; }

/* Botón comparar: comparator_compare.js cambia el texto y pone .is-comparing */
.cmpx-cmp { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--x-ink); background: var(--x-surface); border: 1px solid var(--x-line-2); border-radius: var(--x-r); padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.cmpx-cmp:hover { border-color: var(--x-ink); }
.cmpx-cmp.is-comparing { border-color: var(--x-accent); color: var(--x-accent); background: var(--x-accent-soft); }
.cmpx-cmp:disabled { opacity: .45; cursor: not-allowed; }


/* --- Formularios y avisos (ficha, comparativas) ------------------------ */
.cmpx-alert { margin-top: 20px; padding: 18px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; display: grid; gap: 14px; scroll-margin-top: calc(var(--header-h, 68px) + 56px); }
.cmpx-alert h3 { font-stretch: 104%; font-weight: 650; font-size: 17px; }
.cmpx-alert__text p { margin-top: 4px; font-size: 14px; color: var(--x-ink-2); }
.cmpx-alert__fields { display: grid; gap: 12px; align-items: end; }
.cmpx-field { display: grid; gap: 5px; font-size: 13px; color: var(--x-ink-2); min-width: 0; }
.cmpx-field input, .cmpx-field textarea, .cmpx-field__box { font: inherit; font-size: 15px; color: var(--x-ink); background: var(--x-surface); border: 1px solid var(--x-line-2); border-radius: var(--x-r); padding: 9px 12px; width: 100%; }
.cmpx-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.cmpx-field input:focus, .cmpx-field textarea:focus, .cmpx-field__box:focus-within { outline: none; border-color: var(--x-ink); box-shadow: 0 0 0 3px var(--x-accent-soft); }
.cmpx-field__box { display: flex; align-items: center; gap: 6px; padding-block: 0; }
.cmpx-field__box input { border: 0; padding: 9px 0; box-shadow: none; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.cmpx-field__box input:focus { box-shadow: none; }
.cmpx-field__box input::-webkit-outer-spin-button,
.cmpx-field__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cmpx-field--static b { color: var(--x-ink); font-weight: 600; font-size: 15px; padding: 9px 0; }
.cmpx-alert__fields .cmpx-btn { justify-content: center; padding-block: 11px; }
.cmpx-alert__legal { font-size: 12.5px; color: var(--x-ink-3); }
.cmpx-alert__legal a { text-underline-offset: 2px; }
.cmpx-alert__nl label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--x-ink-2); cursor: pointer; }
.cmpx-alert__nl input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--x-accent); flex: none; }
.cmpx-alert__fb { font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: var(--x-r); }
.cmpx-alert__fb.ok { color: var(--x-low); background: var(--x-low-soft); }
.cmpx-alert__fb.err { color: var(--x-high); background: color-mix(in srgb, var(--x-high) 12%, var(--x-surface)); }


.cmpx-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.cmpx-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--x-accent); flex: none; }
.cmpx-check span:first-of-type { min-width: 0; }
.cmpx-check__n { margin-left: auto; color: var(--x-ink-3); font-size: 12.5px; }


.cmpx-prose { max-width: 70ch; padding-top: 32px; color: var(--x-ink-2); font-size: 15.5px; line-height: 1.65; }
.cmpx-prose p + p { margin-top: 12px; }


/* --- Tabla cara a cara (_compare_table.html: versus y comparar) ---------- */
.cmpx-ctable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; }
.cmpx-ctable th, .cmpx-ctable td { padding: 9px 8px; text-align: left; vertical-align: top; border-top: 1px solid var(--x-line); overflow-wrap: break-word; hyphens: auto; }
.cmpx-ctable thead th, .cmpx-ctable thead td { border-top: 0; }
/* Cabecera fija bajo la cabecera de la web: al bajar por la tabla se sigue
   viendo qué columna es cada producto. */
.cmpx-ctable thead th, .cmpx-ctable thead td { position: sticky; top: var(--header-h, 68px); z-index: 5; background: var(--x-surface); border-bottom: 1px solid var(--x-line-2); }
.cmpx-ctable thead > tr > :first-child { border-top-left-radius: 14px; }
.cmpx-ctable thead > tr > :last-child { border-top-right-radius: 14px; }
.cmpx-ctable--2 .cmpx-ctable__corner { width: 34%; }
.cmpx-ctable--3 .cmpx-ctable__corner { width: 25%; }
/* Móvil: foto encima y nombre debajo, partiendo solo entre palabras (con guiones
   salía «Ya-maha»). Como mucho tres líneas. Desde 640px, foto y nombre en fila. */
.cmpx-ctable thead th { hyphens: manual; overflow-wrap: normal; }
.cmpx-ctable__prod { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-weight: 650; font-size: 12.5px; line-height: 1.25; text-decoration: none; }
.cmpx-ctable__prod > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmpx-ctable__prod:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.cmpx-ctable__prod .cmpx-pic { width: 36px; height: 36px; border-radius: 6px; flex: none; }
.cmpx-ctable tbody th[scope="row"] { font-weight: 400; color: var(--x-ink-2); }
.cmpx-ctable__group th { padding-top: 18px; font-stretch: 78%; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--x-ink-3); background: var(--x-paper); }
.cmpx-ctable td.is-cheapest { color: var(--x-low); font-weight: 700; background: var(--x-low-soft); }
.cmpx-ctable td.is-better { font-weight: 700; }
.cmpx-ctable__na, .cmpx-ctable__no { color: var(--x-ink-3); }
.cmpx-ctable tbody:last-child tr:last-child > :first-child { border-bottom-left-radius: 14px; }
.cmpx-ctable tbody:last-child tr:last-child > :last-child { border-bottom-right-radius: 14px; }
@media (min-width: 480px) {
  .cmpx-ctable { font-size: 14px; }
  .cmpx-ctable th, .cmpx-ctable td { padding: 10px 12px; }
}
@media (min-width: 640px) {
  .cmpx-ctable__prod { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
}

/* Tarjeta: solo para objetos sueltos (alternativas, mínimos). Sin sombra. */
/* Columna flexible: el cuerpo (.cmpx-card__body) se estira y el precio queda
   abajo y alineado en toda la fila aunque los nombres ocupen 1 o 2 líneas. */
.cmpx-card { display: flex; flex-direction: column; gap: 10px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 12px; padding: 12px; text-decoration: none; transition: border-color .15s ease; }
.cmpx-card:hover { border-color: var(--x-line-2); }
.cmpx-card .cmpx-pic { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; }
.cmpx-card .cmpx-pic img { width: 70%; height: 70%; }
.cmpx-card .cmpx-pname { font-size: 14.5px; }
.cmpx-card .cmpx-pcat { display: block; }
.cmpx-card__body { flex: 1 1 auto; }
.cmpx-card__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.cmpx-card .cmpx-price { font-size: 18px; }
.cmpx-end { height: 64px; }

/* --- Breakpoints ----------------------------------------------------------- */
@media (min-width: 640px) {
  .cmpx-intro { padding-block: 40px 36px; }
  .cmpx-lead { font-size: 16.5px; }
  .cmpx-row { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "pic name price" "pic meter meter" "pic shop cmp"; gap: 10px 16px; padding: 14px 18px; }
  .cmpx-row__price { text-align: right; }
  .cmpx-row .cmpx-pic { width: 72px; height: 72px; }
}

@media (min-width: 1024px) {
  .cmpx-intro { padding-block: 44px 36px; }
  .cmpx-intro__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
  .cmpx-block { padding-block: 48px 8px; }

  .cmpx-rows__head,
  .cmpx-row { grid-template-columns: 72px minmax(0, 1.6fr) 150px minmax(170px, 1.2fr) minmax(0, 1fr) 128px; grid-template-areas: none; gap: 20px; padding: 14px 18px; }
  .cmpx-rows__head { display: grid; padding-block: 10px; border-bottom: 1px solid var(--x-line); background: var(--x-paper); }
  .cmpx-row > * { grid-area: auto; }
  .cmpx-row__price { text-align: left; }
  .cmpx-row__cmp { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .cmpx-chip, .cmpx-cmp, .cmpx-card { transition: none; }
}

/* ============================================================================
   Barra de comparar (base.html, #compare-bar.cmpx-bar)

   Vive fuera de .cmpx, por eso los tokens también se declaran en .cmpx-bar.
   La mecánica del desplegable de añadir (.cmp-addpop, .cmp-result) sigue en
   comparator.css; aquí van colores, tipografía y el resto de la barra.
   Móvil: barra fija abajo a todo el ancho. Desde 768px: panel flotante.
   ============================================================================ */
#compare-bar.cmpx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 0; display: flex; justify-content: center; pointer-events: none; font-family: var(--x-font); color: var(--x-ink); }
#compare-bar.cmpx-bar[hidden] { display: none; }
.cmpx-bar .cmpbar__inner {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: none; background: var(--x-surface); color: var(--x-ink);
  border: 1px solid var(--x-line-2); border-width: 1px 0 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 24px rgb(20 20 22 / .12);
  padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
#compare-bar.cmpx-bar .cmpbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
/* En móvil no caben «2 de 3» ni «Vaciar»: cada producto ya tiene su ×. */
#compare-bar.cmpx-bar .cmpbar__title, #compare-bar.cmpx-bar .cmpbar__clear { display: none; }
#compare-bar.cmpx-bar .cmpbar__title {  align-items: baseline; gap: 4px; font-size: 13.5px; font-weight: 400; color: var(--x-ink-2); white-space: nowrap; }
#compare-bar.cmpx-bar .cmpbar__count { display: inline; min-width: 0; height: auto; padding: 0; background: none; color: var(--x-ink); font-size: 16px; font-weight: 700; border-radius: 0; font-variant-numeric: tabular-nums; }
#compare-bar.cmpx-bar .cmpbar__list { display: flex; gap: 6px; min-width: 0; }
#compare-bar.cmpx-bar .cmpbar__item { display: flex; align-items: center; gap: 6px; max-width: 210px; margin: 0; padding: 3px; background: var(--x-paper); border: 1px solid var(--x-line); border-radius: 10px; }
#compare-bar.cmpx-bar .cmpbar__item-pic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: var(--x-tray); overflow: hidden; flex: none; }
#compare-bar.cmpx-bar .cmpbar__item-pic img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; border: 0; border-radius: 0; background: none; }
#compare-bar.cmpx-bar .cmpbar__item-name { display: none; font-size: 13.5px; font-weight: 600; color: var(--x-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
#compare-bar.cmpx-bar .cmpbar__item-remove { display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; color: var(--x-ink-3); border-radius: 6px; cursor: pointer; flex: none; }
#compare-bar.cmpx-bar .cmpbar__item-remove:hover { color: var(--x-ink); background: var(--x-tray); }
#compare-bar.cmpx-bar .cmpbar__add { display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; margin: 0; border: 1px dashed var(--x-line-2); border-radius: 10px; background: none; color: var(--x-ink-2); cursor: pointer; flex: none; }
#compare-bar.cmpx-bar .cmpbar__add:hover,
#compare-bar.cmpx-bar .cmpbar__add.is-open { border-style: solid; border-color: var(--x-ink); color: var(--x-ink); background: none; }
#compare-bar.cmpx-bar .cmpbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
#compare-bar.cmpx-bar .cmpbar__hint { display: none; font-size: 13px; color: var(--x-ink-3); }
#compare-bar.cmpx-bar .cmpbar__clear { font: inherit; font-size: 13.5px; color: var(--x-ink-2); background: none; border: 0; padding: 6px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#compare-bar.cmpx-bar .cmpbar__clear:hover { color: var(--x-ink); }
#compare-bar.cmpx-bar .cmpbar__btn { display: inline-flex; align-items: center; padding: 10px 16px; background: var(--x-accent); color: var(--x-accent-ink); border-radius: var(--x-r); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter .15s ease; transform: none; box-shadow: none; }
#compare-bar.cmpx-bar .cmpbar__btn:hover { filter: brightness(1.08); transform: none; box-shadow: none; }
#compare-bar.cmpx-bar .cmpbar__btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
#compare-bar.cmpx-bar :focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }

/* Buscador para añadir un producto (popover sobre la barra) */
#compare-bar.cmpx-bar .cmp-addpop { font-family: var(--x-font); background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 12px; box-shadow: 0 8px 24px rgb(20 20 22 / .14); }
#compare-bar.cmpx-bar .cmp-addpop__head { border-bottom-color: var(--x-line); }
#compare-bar.cmpx-bar .cmp-addpop__icon, #compare-bar.cmpx-bar .cmp-addpop__close { color: var(--x-ink-3); }
#compare-bar.cmpx-bar .cmp-addpop__close:hover { background: var(--x-tray); color: var(--x-ink); }
#compare-bar.cmpx-bar .cmp-addpop__input { font-family: var(--x-font); font-size: 15px; color: var(--x-ink); }
#compare-bar.cmpx-bar .cmp-addpop__input::placeholder { color: var(--x-ink-3); }
#compare-bar.cmpx-bar .cmp-addpop__results { scrollbar-color: var(--x-line-2) transparent; }
#compare-bar.cmpx-bar .cmp-result { font-family: var(--x-font); color: var(--x-ink); border-radius: 8px; padding: 8px; }
#compare-bar.cmpx-bar .cmp-result:hover, #compare-bar.cmpx-bar .cmp-result.is-active { background: var(--x-paper); }
#compare-bar.cmpx-bar .cmp-result__img { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; background: var(--x-tray); overflow: hidden; flex: none; }
#compare-bar.cmpx-bar .cmp-result__img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
#compare-bar.cmpx-bar .cmp-result__name { font-size: 14.5px; font-weight: 600; }
#compare-bar.cmpx-bar .cmp-result__cat, #compare-bar.cmpx-bar .cmp-result__added, #compare-bar.cmpx-bar .cmp-addpop__empty, #compare-bar.cmpx-bar .cmp-addpop__hint { color: var(--x-ink-3); font-family: var(--x-font); }
#compare-bar.cmpx-bar .cmp-result__price { font-family: var(--x-font); font-variant-numeric: tabular-nums; font-weight: 650; color: var(--x-ink); }
#compare-bar.cmpx-bar .cmp-addpop__hint { border-top-color: var(--x-line); }

@media (min-width: 480px) {
  #compare-bar.cmpx-bar .cmpbar__title { display: inline-flex; }
  #compare-bar.cmpx-bar .cmpbar__clear { display: inline; }
}
@media (min-width: 640px) {
  #compare-bar.cmpx-bar .cmpbar__hint { display: inline; }
}

@media (min-width: 768px) {
  #compare-bar.cmpx-bar { bottom: 16px; padding: 0 16px; }
  .cmpx-bar .cmpbar__inner { width: auto; max-width: min(100%, 980px); gap: 16px; border-width: 1px; border-radius: 14px; box-shadow: 0 10px 30px rgb(20 20 22 / .16); padding: 10px 10px 10px 16px; }
  #compare-bar.cmpx-bar .cmpbar__item { padding: 3px 3px 3px 3px; }
  #compare-bar.cmpx-bar .cmpbar__item-name { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  #compare-bar.cmpx-bar .cmpbar__btn { transition: none; }
}

/* ===== css/blog/content.css ===== */
/* ======================================================================
   Estilos del editor compartidos entre el cuerpo del post publicado
   (.blog-article-body) y el área editable de CKEditor 5 (.ck-content), para
   que lo que ve el autor al escribir sea lo que se publica.
   Las clases las aplica el autor desde el desplegable «Estilos» del editor.
   Tokens del sistema «mostrador técnico» (31-10-2026). La tipografía y el
   ritmo general del cuerpo están en blog/post.css (.bp-prose).
   ====================================================================== */

/* -- Espaciado entre párrafos ----------------------------------------- */
.blog-article-body .spacer-top-sm,    .ck-content .spacer-top-sm    { margin-top:    1.25em; }
.blog-article-body .spacer-top-lg,    .ck-content .spacer-top-lg    { margin-top:    3em;    }
.blog-article-body .spacer-bottom-sm, .ck-content .spacer-bottom-sm { margin-bottom: 1.25em; }
.blog-article-body .spacer-bottom-lg, .ck-content .spacer-bottom-lg { margin-bottom: 3em;    }

/* -- Párrafo destacado (callout) --------------------------------------- */
.blog-article-body .ck-highlight,
.ck-content .ck-highlight {
  padding: 14px 18px;
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-left: 3px solid var(--x-ink);
  border-radius: 10px;
  color: var(--x-ink);
}

/* -- Texto pequeño ----------------------------------------------------- */
.blog-article-body .small-text,
.ck-content .small-text { font-size: .9em; line-height: 1.5; color: var(--x-ink-3); }

/* -- Entradilla -------------------------------------------------------- */
.blog-article-body p.lead,
.ck-content p.lead { font-size: 1.12em; line-height: 1.6; color: var(--x-ink); }

/* -- Imágenes (CKEditor 5 las envuelve en <figure class="image ...">) -- */
.blog-article-body figure.image,
.ck-content figure.image { display: table; margin: 1.8em auto; max-width: 100%; }
.blog-article-body figure.image img,
.ck-content figure.image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 60vh;
  height: auto;
  margin-inline: auto;
  border-radius: 10px;
  border: 1px solid var(--x-line);
}
.blog-article-body figure.image figcaption,
.ck-content figure.image figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: 8px 4px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--x-ink-3);
  text-align: center;
}
/* Alineación (figure. para superar la especificidad de figure.image) */
.blog-article-body figure.image-style-align-center, .ck-content figure.image-style-align-center,
.blog-article-body figure.image-style-block-align-center, .ck-content figure.image-style-block-align-center { margin-left: auto; margin-right: auto; }
.blog-article-body figure.image-style-align-left, .ck-content figure.image-style-align-left,
.blog-article-body figure.image-style-block-align-left, .ck-content figure.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.blog-article-body figure.image-style-align-right, .ck-content figure.image-style-align-right,
.blog-article-body figure.image-style-block-align-right, .ck-content figure.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.blog-article-body figure.image-style-side, .ck-content figure.image-style-side { float: right; max-width: 48%; margin: .4em 0 1em 1.5em; }

/* CKEditor deja <span style="color:…"> en línea. En oscuro esos colores
   (pensados para fondo claro) no se leen; solo un !important gana a un style
   en línea, por eso es la excepción a la regla. */
[data-theme="dark"] .blog-article-body span[style*="color"] { color: var(--x-ink) !important; }

/* ===== css/blog/post.css ===== */
/* ============================================================================
   ENTRADA DEL BLOG — sistema «mostrador técnico» (31-10-2026)
   ----------------------------------------------------------------------------
   Va detrás de cmpx.css y blog/content.css (paquete "blog-post").
   Una columna de lectura de 720px y, en ≥1024, un lateral con el índice, el
   autor, las etiquetas y los relacionados. El texto sigue las mismas reglas
   que el de las lecciones (training/lesson.css → .tr-prose).
   Las clases blog-comment-*, blog-like-btn y blog-follow-tag-btn son
   ganchos de static/js/blog/index.js: no renombrar.
   Móvil primero; 640, 768 y 1024 en min-width.
   ============================================================================ */

.bp { padding-bottom: 64px; }
.bp-narrow > * { max-width: 760px; }

/* Barra de progreso de lectura: fina y en tinta, sin brillo. */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  block-size: 2px;
  inline-size: 0;
  background: var(--x-ink);
  pointer-events: none;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.bp-head { padding-bottom: 24px; border-bottom: 0; }
.bp-head .bp-title {
  margin-top: 16px;
  max-width: 760px;
  font-stretch: 104%;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.bp-lead { margin: 14px 0 0; font-size: 17.5px; line-height: 1.55; }

.bp-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--x-high);
  border-inline-start-width: 3px;
  border-radius: var(--x-r);
  background: var(--x-surface);
  font-size: 14.5px;
}

.bp-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 22px; }
.bp-byline__who { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.bp-byline__who:hover .bp-byline__name { text-decoration: underline; text-underline-offset: 3px; }
.bp-byline__txt { display: grid; min-width: 0; }
.bp-byline__name { font-size: 15px; font-weight: 650; color: var(--x-ink); }
.bp-byline__meta { font-size: 13.5px; color: var(--x-ink-3); }
.bp-byline__tools { display: flex; align-items: center; gap: 8px; }

.bp-av {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  background: var(--x-tray);
  font-size: 14px;
  font-weight: 650;
  color: var(--x-ink);
}
.bp-av--sm { inline-size: 28px; block-size: 28px; font-size: 11px; }

.bp-btn-sm { padding: 7px 12px; font-size: 13.5px; }

.bp-share { display: flex; gap: 4px; }
.bp-icon {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 1px solid var(--x-line-2);
  border-radius: var(--x-r);
  background: var(--x-surface);
  color: var(--x-ink-2);
  cursor: pointer;
  transition: border-color 150ms ease;
}
.bp-icon:hover { border-color: var(--x-ink); color: var(--x-ink); }
.bp-icon.is-copied { border-color: var(--x-low); color: var(--x-low); }
.bp-icon svg { inline-size: 16px; block-size: 16px; }

/* ── Portada ────────────────────────────────────────────────────────────── */
.bp-cover { margin: 0; aspect-ratio: 1200 / 630; border-radius: 14px; overflow: hidden; background: var(--x-tray); }
.bp-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── Columnas ───────────────────────────────────────────────────────────── */
.bp-grid { display: grid; gap: 40px; padding-top: 32px; }
.bp-article { min-width: 0; max-inline-size: 720px; }
.bp-aside { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Índice: plegable encima del texto en móvil y tableta; en el lateral en ≥1024. */
.bp-toc--side { display: none; }
.bp-toc--inline { margin-bottom: 28px; border: 1px solid var(--x-line); border-radius: 12px; background: var(--x-surface); }
.bp-toc--inline summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
.bp-toc--inline summary::-webkit-details-marker { display: none; }
.bp-toc--inline summary .cmpx-num { margin-right: auto; font-weight: 400; color: var(--x-ink-3); }
.bp-toc--inline summary::after { content: "+"; color: var(--x-ink-3); font-weight: 400; }
.bp-toc--inline[open] summary::after { content: "–"; }
.bp-toc--inline ol { display: grid; gap: 6px; margin: 0; padding: 4px 16px 14px 36px; font-size: 14.5px; color: var(--x-ink-2); }
.bp-toc--inline a { color: var(--x-ink); text-decoration: none; }
.bp-toc--inline a:hover { text-decoration: underline; text-underline-offset: 3px; }

.bp-toc--side ol { margin: 10px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--x-line); }
.bp-toc--side a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 12px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--x-ink-2);
  text-decoration: none;
  transition: border-color 150ms ease;
}
.bp-toc--side a:hover { color: var(--x-ink); border-left-color: var(--x-line-2); }
.bp-toc--side a.is-active { color: var(--x-ink); font-weight: 600; border-left-color: var(--x-ink); }

/* ── Texto del artículo (mismas reglas que .tr-prose) ───────────────────── */
.bp-prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--x-ink);
  overflow-wrap: break-word;
}
.bp-prose > * + * { margin-top: 1.05em; }
.bp-prose > :first-child { margin-top: 0; }
.bp-prose p, .bp-prose li { color: var(--x-ink); }
.bp-prose b, .bp-prose strong { font-weight: 650; }
.bp-prose h2 {
  margin-top: 2em;
  font-stretch: 104%;
  font-size: clamp(23px, 2.4vw, 27px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.016em;
  scroll-margin-top: calc(var(--header-h, 68px) + 24px);
}
.bp-prose h3 { margin-top: 1.6em; font-stretch: 104%; font-size: 19.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; scroll-margin-top: calc(var(--header-h, 68px) + 24px); }
.bp-prose h4 { margin-top: 1.3em; font-size: 17px; font-weight: 650; line-height: 1.35; }
.bp-prose h2 + *, .bp-prose h3 + *, .bp-prose h4 + * { margin-top: .55em; }
/* Enlaces del texto en tinta subrayada: el morado es para acciones. */
.bp-prose a {
  color: var(--x-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--x-line-2);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.bp-prose a:hover { text-decoration-color: currentColor; }
.bp-prose ul, .bp-prose ol { padding-left: 1.3em; }
.bp-prose li + li { margin-top: .4em; }
.bp-prose li::marker { color: var(--x-ink-3); }
.bp-prose img { max-width: 100%; height: auto; }
.bp-prose blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--x-ink);
  font-size: 1.05em;
  color: var(--x-ink);
}
.bp-prose blockquote > * + * { margin-top: .6em; }
.bp-prose hr { border: 0; border-top: 1px solid var(--x-line); margin-block: 2em; }
.bp-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.bp-prose figure.table { margin-inline: 0; overflow-x: auto; }
.bp-prose th, .bp-prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--x-line); }
.bp-prose th, .bp-prose thead td {
  font-stretch: 78%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--x-ink-3);
  border-bottom-color: var(--x-line-2);
}
.bp-prose code { font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--x-tray); color: var(--x-ink); }
[data-theme="dark"] .bp-prose code { background: var(--x-line-2); }
.bp-prose pre { padding: 16px; border-radius: 10px; background: var(--x-surface); border: 1px solid var(--x-line); overflow-x: auto; font-size: 14px; line-height: 1.55; }
.bp-prose pre code { padding: 0; background: none; }
.bp-prose mjx-container { color: var(--x-ink); }

/* ── Bloques tras el texto ──────────────────────────────────────────────── */
.bp-sec__title { font-stretch: 104%; font-size: 21px; font-weight: 650; line-height: 1.25; }
.bp-sec__sub { margin-top: 4px; font-size: 14.5px; color: var(--x-ink-2); }
.bp-n { margin-left: 4px; font-size: 16px; font-weight: 500; color: var(--x-ink-3); }
.bp-kicker { display: block; font-size: 12.5px; font-weight: 600; color: var(--x-ink-3); }
.bp-quiet { color: var(--x-ink-2); }

/* Precios de los equipos del artículo (como la ficha de producto). */
.bp-prices { display: grid; gap: 14px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--x-line); }
.bp-product { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; overflow: hidden; }
.bp-product__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--x-line); text-decoration: none; }
.bp-product__head:hover .bp-product__name { text-decoration: underline; text-underline-offset: 3px; }
.bp-product__pic { flex: none; inline-size: 56px; block-size: 56px; }
.bp-product__name { display: block; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--x-ink); }
.bp-offers { margin: 0; padding: 0; list-style: none; }
.bp-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "shop price" "shop go"; gap: 6px 14px; align-items: center; padding: 12px 16px; }
.bp-offer + .bp-offer { border-top: 1px solid var(--x-line); }
.bp-offer__shop { grid-area: shop; min-width: 0; font-size: 15px; font-weight: 650; }
.bp-offer__ship { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--x-ink-3); }
.bp-tag { display: inline-flex; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--x-low-soft); color: var(--x-low); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.bp-offer__price { grid-area: price; justify-self: end; font-stretch: 104%; font-size: 18px; font-weight: 700; }
.bp-offer .cmpx-btn { grid-area: go; justify-self: end; }
.bp-aff { margin-left: 2px; font-size: 12px; opacity: .8; }
.bp-product__more,
.bp-product__none a { display: block; padding: 12px 16px; border-top: 1px solid var(--x-line); font-size: 14px; color: var(--x-ink-2); text-underline-offset: 3px; }
.bp-product__none { margin: 0; }
.bp-note { font-size: 13px; line-height: 1.5; color: var(--x-ink-3); }

/* Me gusta + compartir */
.bp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; padding-block: 16px; border-block: 1px solid var(--x-line); }
.bp-actions__sp { flex: 1; }
.blog-like-btn svg { inline-size: 17px; block-size: 17px; }
.blog-like-btn.is-liked { border-color: var(--x-ink); }
.blog-like-btn.is-liked svg { fill: currentColor; }
.blog-like-btn:disabled { cursor: not-allowed; opacity: .7; }

/* Fuente preferida en Google */
.bp-pref { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px 14px; margin-top: 28px; padding: 16px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; }
.bp-pref__ic { padding-top: 2px; }
.bp-pref__title { font-size: 15px; font-weight: 650; }
.bp-pref__text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--x-ink-2); }
.bp-pref__cta { grid-column: 2; }

/* ── Comentarios ────────────────────────────────────────────────────────── */
.bp-comments { margin-top: 48px; }
.bp-cform { display: grid; gap: 10px; margin-top: 16px; }
.blog-comment-textarea {
  inline-size: 100%;
  min-block-size: 96px;
  padding: 10px 12px;
  border: 1px solid var(--x-line-2);
  border-radius: var(--x-r);
  background: var(--x-surface);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--x-ink);
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.blog-comment-textarea:focus { outline: none; border-color: var(--x-ink); box-shadow: 0 0 0 3px var(--x-accent-soft); }
.blog-comment-form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.bp-chars { margin-right: auto; font-size: 13px; color: var(--x-ink-3); }
.bp-cerror { flex-basis: 100%; order: -1; font-size: 13.5px; font-weight: 600; color: var(--x-high); }
.bp-login { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--x-line-2); border-radius: 12px; font-size: 15px; color: var(--x-ink-2); }
.bp-login a { color: var(--x-ink); font-weight: 600; text-underline-offset: 3px; }

.blog-comments-list { display: grid; margin-top: 20px; }
.blog-comment { padding-block: 16px; border-top: 1px solid var(--x-line); }
.blog-comments-list > .blog-comment:first-child { border-top: 0; padding-top: 4px; }
.blog-comment-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.blog-comment-author-link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.blog-comment-author { font-size: 14.5px; font-weight: 650; color: var(--x-ink); }
.blog-comment-author-link:hover .blog-comment-author { text-decoration: underline; text-underline-offset: 3px; }
.blog-comment-date { font-size: 13px; color: var(--x-ink-3); }
.blog-comment-body { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--x-ink); overflow-wrap: anywhere; }
.blog-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.blog-comment-like-btn,
.blog-comment-reply-toggle,
.blog-comment-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--x-ink-3);
  cursor: pointer;
}
.blog-comment-like-btn:hover,
.blog-comment-reply-toggle:hover { color: var(--x-ink); }
.blog-comment-delete-btn:hover { color: var(--x-high); }
.blog-comment-like-btn.is-liked { color: var(--x-ink); }
.blog-comment-like-btn.is-liked svg { fill: currentColor; }
.blog-comment-like-btn:disabled { cursor: default; }
.blog-reply-form-wrap { margin-top: 10px; }
.blog-reply-form { display: grid; gap: 8px; }
.blog-reply-form .blog-comment-textarea { min-block-size: 72px; }
.blog-replies { margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--x-line); }
.blog-comment--reply { padding-block: 12px; }
.blog-replies > .blog-comment--reply:first-child { border-top: 0; padding-top: 4px; }

/* ── Lateral ────────────────────────────────────────────────────────────── */
.bp-box { padding: 16px 18px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; }
.bp-author__id { display: flex; align-items: center; gap: 10px; margin-top: 10px; text-decoration: none; }
.bp-author__id:hover .bp-author__name { text-decoration: underline; text-underline-offset: 3px; }
.bp-author__name { display: block; font-size: 15px; font-weight: 650; color: var(--x-ink); }
.bp-author__role { display: block; font-size: 13.5px; color: var(--x-ink-2); }
.bp-author__bio { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--x-ink-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bp-author__social { display: flex; gap: 4px; margin-top: 12px; }
.bp-author__social .bp-icon { inline-size: 32px; block-size: 32px; border-color: transparent; background: none; }
.bp-author__social .bp-icon:hover { border-color: var(--x-line-2); }
.bp-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--x-ink); text-underline-offset: 3px; }

.bp-tags { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.bp-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-tag-row > a { font-size: 14.5px; font-weight: 600; color: var(--x-ink); text-decoration: none; }
.bp-tag-row > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-follow {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--x-line-2);
  border-radius: 999px;
  background: var(--x-surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--x-ink);
  cursor: pointer;
  transition: border-color 150ms ease;
}
.bp-follow:hover { border-color: var(--x-ink); }
.bp-follow.is-following { border-color: var(--x-ink); background: var(--x-ink); color: var(--x-paper); }

.bp-related { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.bp-related a { display: grid; gap: 2px; padding-block: 10px; border-top: 1px solid var(--x-line); text-decoration: none; }
.bp-related li:first-child a { border-top: 0; }
.bp-related__title { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--x-ink); }
.bp-related a:hover .bp-related__title { text-decoration: underline; text-underline-offset: 3px; }
.bp-related__meta { font-size: 12.5px; color: var(--x-ink-3); }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .bp-offer { grid-template-columns: minmax(0, 1fr) 120px auto; grid-template-areas: "shop price go"; }
  .bp-pref { grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; }
  .bp-pref__cta { grid-column: auto; }
}

@media (min-width: 1024px) {
  .bp-grid { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: 56px; }
  .bp-narrow > *, .bp-head .bp-title { max-width: 720px; }
  .bp-aside { position: sticky; top: calc(var(--header-h, 68px) + 24px); max-block-size: calc(100vh - var(--header-h, 68px) - 48px); overflow-y: auto; scrollbar-width: thin; }
  .bp-toc--inline { display: none; }
  .bp-toc--side { display: block; padding: 4px 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-icon, .bp-toc--side a, .blog-comment-textarea, .bp-follow { transition: none; }
}