/* ============================================================
   ARTÍCULOS ISO 27001
   Normaliza las variantes editoriales nuevas con el sistema visual
   de los artículos consolidados del portal.
   ============================================================ */

.iso-article main > .article-header {
  padding-block: var(--sp-8) var(--sp-6);
}

.iso-article main > article.article > .container,
.iso-article main > section.article-content > .container,
.iso-article .post-single .post-body > .container,
.iso-article .post-header > .container,
.iso-article .post-featured-media,
.iso-article .post-layout {
  max-width: var(--container-narrow);
}

.iso-article main > .article-header > .container,
.iso-article .article-section .article-header {
  display: grid;
  gap: var(--sp-5);
}

.iso-article .article-section {
  padding-block: var(--sp-6) var(--sp-12);
}

.iso-article .post-header {
  padding-block: var(--sp-8) var(--sp-6);
}

/* Cabecera editorial ancha y columna de lectura independiente */
.iso-article main > .article-header > .container,
.iso-article .article-hero-image-container > .container,
.iso-article .article-layout.container,
.iso-article .article-section > .article-container,
.iso-article main > article > .section:has(> .container.narrow > .post-hero) > .container.narrow,
.iso-article main > article > .section:has(> .container.narrow > .post-featured-img) > .container.narrow {
  max-width: var(--container);
}

.iso-article .article-layout.container > :is(.toc-hero, .article-body),
.iso-article .article-section > .article-container > :is(.toc-hero, .article-body, .author-box, .orientation-promo),
.iso-article main > article > .section:has(> .container.narrow > .post-hero) > .container.narrow > .toc-hero,
.iso-article main > article > .section:has(> .container.narrow > .post-featured-img) > .container.narrow > :is(.prose, .post-share, .author-box, .orientation-promo) {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* Migas de pan */
.iso-article .breadcrumb-nav,
.iso-article .breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.iso-article .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iso-article .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.iso-article .breadcrumb-item + .breadcrumb-item::before {
  content: "·";
  color: var(--brand-cyan);
}

.iso-article :is(.breadcrumb-nav, .breadcrumbs) a {
  color: var(--text-subtle);
  text-decoration: none;
}

.iso-article :is(.breadcrumb-nav, .breadcrumbs) a:hover {
  color: var(--brand-blue);
}

/* Hero y metadatos */
.iso-article .article-meta-top,
.iso-article .article-meta,
.iso-article .article-author-meta,
.iso-article .article-author-byline,
.iso-article .post-meta-top,
.iso-article .post-author-row,
.iso-article .post-date-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.iso-article .article-meta-top,
.iso-article .article-meta,
.iso-article .article-read-time,
.iso-article .article-date,
.iso-article .author-bio-short,
.iso-article .post-date-info,
.iso-article .author-role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
}

.iso-article .article-read-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.iso-article .article-header h1,
.iso-article h1.article-title,
.iso-article main > article > .section .post-hero h1 {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.35rem + 2.2vw, 4rem) !important;
  font-weight: 800;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

/* Conserva la variante no ISO que comparte esta hoja. */
.iso-article .post-header h1.post-title {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-3xl) !important;
  font-weight: 800;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
  color: var(--text);
}

.iso-article .article-lead,
.iso-article .article-header > p:not([class]),
.iso-article .post-lead {
  max-width: 65ch;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--brand-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.iso-article .article-header .author-avatar,
.iso-article .article-header .author-avatar-sm,
.iso-article .post-header .author-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.iso-article .article-header .author-info {
  display: grid;
  gap: 2px;
}

.iso-article .post-header .author-info {
  display: grid;
  gap: 2px;
}

.iso-article .article-header .author-name {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.iso-article .article-header .author-name a {
  color: inherit;
  text-decoration: none;
}

/* Variante de hero usada por las cuatro guías base del clúster */
.iso-article .post-single .post-hero > .container {
  display: grid;
  gap: var(--sp-5);
}

.iso-article .post-single .post-hero .breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
}

.iso-article .post-single .post-hero .breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.iso-article .post-single .post-hero .breadcrumb a:hover {
  color: var(--brand-blue);
}

.iso-article .post-single .post-hero .post-meta-top {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.iso-article .post-single .post-hero .post-title {
  width: 100%;
  max-width: 100%;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 4rem) !important;
  text-wrap: balance;
}

.iso-article .post-single .post-hero .post-subtitle {
  max-width: 72ch;
  color: var(--text-muted);
  font-size: clamp(var(--fs-base), 0.95rem + 0.35vw, var(--fs-md));
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.iso-article .post-single .post-hero .post-author-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.iso-article .post-single .post-author-bar .author-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.iso-article .post-single .post-author-bar .author-info > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.iso-article .post-single .post-author-bar .author-avatar-sm {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.iso-article .post-single .post-author-bar :is(.author-name, .post-date) {
  display: block;
}

.iso-article .post-single .post-author-bar .author-name {
  color: var(--text);
  font-weight: 700;
}

.iso-article .post-single .post-author-bar .author-name a {
  color: inherit;
  text-decoration: none;
}

.iso-article .post-single .post-author-bar .post-date {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
}

.iso-article .post-single .post-hero-image-wrap {
  overflow: hidden;
  margin-top: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}

.iso-article .post-single .post-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Imagen principal */
.iso-article .article-featured-image-wrapper,
.iso-article .article-featured-media,
.iso-article .article-featured-figure {
  margin-block: var(--sp-6) var(--sp-8);
}

.iso-article :is(.article-featured-img, .article-featured-image) {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.iso-article .article-featured-media img,
.iso-article .post-featured-img img {
  display: block;
  width: 100%;
  height: auto;
}

.iso-article .post-media-box {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.iso-article .post-media-box img {
  display: block;
  width: 100%;
  height: auto;
}

.iso-article .post-media-caption {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
}

.iso-article :is(.article-featured-caption, .image-caption) {
  display: block;
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
}

/* Cuerpo: conserva la jerarquía y el ritmo del patrón .prose */
.iso-article main > article.article > .container,
.iso-article main > section.article-content > .container {
  padding-bottom: var(--sp-12);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.iso-article :is(main > article.article > .container, main > section.article-content > .container) > * + * {
  margin-top: var(--sp-5);
}

.iso-article :is(main > article.article > .container, main > section.article-content > .container) > :is(h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.iso-article :is(main > article.article > .container, main > section.article-content > .container) > h2 {
  margin-top: var(--sp-16);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xl);
}

.iso-article :is(main > article.article > .container, main > section.article-content > .container) > h3 {
  margin-top: var(--sp-10);
  font-size: var(--fs-xl);
}

.iso-article :is(main > article.article > .container, main > section.article-content > .container) > :is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: var(--sp-6);
}

.iso-article :is(main > article.article > .container, main > section.article-content > .container) > :is(ul, ol) li::marker {
  color: var(--brand-cyan);
  font-weight: 700;
}

.iso-article .article-body.prose {
  max-width: none;
}

.iso-article .post-content {
  max-width: 68ch;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* Tabla de contenidos común */
.iso-article .toc-hero {
  position: relative;
  overflow: hidden;
  margin-block: var(--sp-8) var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.iso-article .toc-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand-gradient);
}

.iso-article .toc-hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.iso-article .toc-hero-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.iso-article .toc-hero-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-gradient);
  color: #fff;
}

.iso-article .toc-hero-meta {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.iso-article .toc-hero-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iso-article .toc-hero-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}

.iso-article .toc-hero-list a:hover {
  border-left-color: var(--brand-cyan);
  background: var(--surface-2);
  color: var(--text);
}

.iso-article .toc-hero-list :is(.num, .toc-hero-num) {
  flex-shrink: 0;
  color: var(--brand-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* Autor, promoción y cursos relacionados */
.iso-article .author-box-content {
  min-width: 0;
}

.iso-article .author-box-name {
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.iso-article .author-box-name a {
  color: inherit;
  text-decoration: none;
}

.iso-article .author-box-bio {
  margin-bottom: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.iso-article .author-box-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.iso-article .author-link {
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.iso-article .grid {
  display: grid;
  gap: var(--sp-4);
}

.iso-article .grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (min-width: 640px) {
  .iso-article .toc-hero-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 20px;
  }
}

@media (max-width: 900px) {
  .iso-article :is(.article-body, .prose) .callout,
  .iso-article main > article.article > .container .callout {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .iso-article :is(.article-body, .prose) .callout > *,
  .iso-article main > article.article > .container .callout > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .iso-article :is(.article-body, .prose) .callout .btn,
  .iso-article main > article.article > .container .callout .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .iso-article :is(.article-body, .prose) .table-container,
  .iso-article main > article.article > .container .table-container,
  .iso-article main > article > .section .prose > div:has(> table) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 720px) {
  .iso-article main > .article-header {
    padding-block: var(--sp-6) var(--sp-4);
  }

  .iso-article .post-header h1.post-title {
    font-size: var(--fs-2xl) !important;
  }

  .iso-article .article-lead,
  .iso-article .article-header > p:not([class]),
  .iso-article .post-lead {
    padding: var(--sp-3) var(--sp-4);
  }

  .iso-article .toc-hero {
    padding: var(--sp-5);
  }

  .iso-article main > article .lab-steps li {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .iso-article main > article .lab-num {
    flex: 1 1 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}