/* ======================================================================
   Estilos compartidos entre el cuerpo del post publicado
   (.blog-article-body) y el área editable de CKEditor 5 (.ck-content).
   Las clases las aplica el autor desde el desplegable "Estilos" del editor.
   ====================================================================== */

/* -- 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 {
    background: var(--surface-2, #f6f8fa);
    padding: 16px 20px;
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid var(--accent, #7c3aed);
    border-radius: 12px;
    color: var(--ink-soft, #333);
}

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

/* -- Entradilla (estilo "Entradilla" del editor) ---------------------- */
.blog-article-body p.lead,
.ck-content p.lead {
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink, #15101F);
    font-weight: 400;
}

/* -- 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: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border, #ECE8F4); }
.blog-article-body figure.image figcaption,
.ck-content figure.image figcaption {
    display: table-caption; caption-side: bottom; padding: 8px 4px 0;
    font-size: 13px; color: var(--ink-faint, #8A8398); text-align: center;
}
/* Alineación de imágenes (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 genera <span style="color:..."> inline; se heredan en el post.
   La legibilidad en modo oscuro se corrige en blog/index.css. */


/* ======================================================================
   Widget de precios — productos relacionados del comparador
   ====================================================================== */

.blog-price-widget { margin: 2.4rem 0; display: flex; flex-direction: column; gap: 1.4rem; }

.blog-price-widget__product {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.blog-price-widget__product-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.blog-price-widget__product-img {
  width: 54px; height: 54px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--photo);
  border: 1px solid var(--border);
  padding: 5px;
  flex-shrink: 0;
}

.blog-price-widget__product-category {
  font-size: 11px;
  color: var(--accent);
  margin: 0 0 .15rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

.blog-price-widget__product-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.blog-price-widget__product-name a { color: var(--ink); text-decoration: none; }
.blog-price-widget__product-name a:hover { color: var(--accent); }

.blog-price-widget__table-wrap { overflow-x: auto; }
.blog-price-widget__table { width: 100%; border-collapse: collapse; font-size: 14px; }

.blog-price-widget__table thead th {
  padding: 9px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}

.blog-price-widget__table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink-soft);
}

.blog-price-widget__table tbody tr:last-child td { border-bottom: none; }
.blog-price-widget__row--best td { background: var(--accent-soft); }
.blog-price-widget__store { font-weight: 600; color: var(--ink); }
.blog-price-widget__free { color: var(--success); font-weight: 600; }
.blog-price-widget__total { font-weight: 700; color: var(--ink); }
.blog-price-widget__total--best { color: var(--accent); font-size: 15px; }

.blog-price-widget__btn {
  display: inline-flex; align-items: center;
  padding: 7px 13px;
  background: var(--accent);
  color: var(--accent-contrast) !important;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease;
}
.blog-price-widget__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-accent-sm); }

.blog-price-widget__no-offers { padding: 16px 18px; font-size: 14px; }
.blog-price-widget__no-offers a { color: var(--accent); font-weight: 600; }

@media (max-width: 640px) {
  /* Ocultar "Precio" base en móvil; se mantiene el Total */
  .blog-price-widget__table thead th:nth-child(2),
  .blog-price-widget__table tbody td:nth-child(2) { display: none; }
}