/*
  Scoped styles for the new blog post body wrapper (.blog-post-body).
  Every selector below is nested under .blog-post-body so nothing here can
  affect global h2/h3/h4/h5 styling or any other existing page. Base
  typography (h1-h6 size/weight/color, paragraph color, links) is
  intentionally left untouched -- it already inherits from css/style.css.
*/

/* "Steps"/"factors" list: the copywriter wrote these as literal <h2> tags
   because visually they must look the same weight as a heading in the
   source doc, but on the page they behave as a numbered list of short
   items, not as section headings. */
.blog-post-body .blog-steps {
   counter-reset: blog-step;
   list-style: none;
   margin: 20px 0 32px;
   padding: 0;
}

.blog-post-body .blog-step {
   position: relative;
   margin: 0 0 16px;
   padding-left: 44px;
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-base);
   line-height: var(--line-height-base);
   color: var(--body-color);
}

.blog-post-body .blog-step:last-child {
   margin-bottom: 0;
}

.blog-post-body .blog-step::before {
   counter-increment: blog-step;
   content: counter(blog-step);
   position: absolute;
   left: 0;
   top: 2px;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--primary, #fd5523);
   color: var(--white, #fff);
   font-family: var(--font-family-headings);
   font-size: 13px;
   font-weight: 700;
   line-height: 26px;
   text-align: center;
}

.blog-post-body .blog-step strong {
   color: var(--headings-color);
   font-weight: 700;
}

/* "Preguntas Frecuentes" is a section label, not a real heading in the
   source content, so it stays a <p>. */
.blog-post-body .blog-faq-label {
   margin: 36px 0 16px;
   font-family: var(--font-family-headings);
   font-weight: 600;
   font-size: 22px;
   line-height: 1.2;
   color: var(--headings-color);
}

/* FAQ questions are tagged h3/h4/h5 (for schema/outline reasons) but must
   look identical on the page regardless of heading level. */
.blog-post-body .blog-faq-q {
   margin: 22px 0 8px;
   font-family: var(--font-family-headings);
   font-weight: 600;
   font-size: 20px;
   line-height: 1.3;
   color: var(--headings-color);
}

/* Comparison tables extracted from the source document. */
.blog-post-body .blog-table-wrap {
   margin: 24px 0 32px;
   overflow-x: auto;
}

.blog-post-body .blog-compare-table {
   width: 100%;
   min-width: 620px;
   border-collapse: collapse;
}

.blog-post-body .blog-compare-table th,
.blog-post-body .blog-compare-table td {
   border: 1px solid var(--border-color, #d8dde1);
   padding: 12px 14px;
   font-size: 15px;
   line-height: 1.5;
   text-align: left;
   color: var(--body-color);
}

.blog-post-body .blog-compare-table th {
   background: var(--light, #f7f7f7);
   font-family: var(--font-family-headings);
   font-weight: 600;
   color: var(--headings-color);
}