/* ==========================================================================
   Los Treinta y Nueve Artículos (/39-articulos/, 19-X-2026): the index (the 39 articles of our Book of Common
   Prayer of 1662, by parts, each one opening its text) and the 38 pieces of Henry Jansma's commentary.
   Loaded after site.css and articulos.css, and only on these pages; uses their tokens. Same method as the rest of
   the site: flat colour, hairline rules, 2px corners, no gradients and no shadows. No inline styles (CSP).
   Mobile first. Children of .portadilla and .articulo__cuerpo: longhand margins only (UX-01).
   ========================================================================== */

/* ---- Index: heading ---- */
.s39-portada .portadilla__intro + .portadilla__intro { margin-top: 0.75rem; }
.s39-portada__acciones { margin-top: 1.5rem; margin-bottom: 0; max-width: 34rem; }

/* ---- Index: body ---- */
.s39 { padding: clamp(1.75rem, 5vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.s39 > * {
  max-width: var(--width);
  margin-left: max(0px, calc((100% - var(--width)) / 2));
  margin-right: auto;
}

/* The six parts: plain links that wrap (no sideways scroll), 44px high */
.s39-partes { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.s39-partes__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.s39-partes__lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.98rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.s39-partes__lista a:hover { border-color: var(--color-morado); background: var(--color-morado-tint); }
.s39-partes__rango { font-size: 0.88em; color: var(--color-ink-muted); }

/* One part: picture and heading, then its articles */
.s39-parte {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 4.5rem;
}
.s39-partes + .s39-parte { margin-top: 0; }
.s39-parte__cabeza { display: grid; gap: 1rem; align-items: end; margin-bottom: 1.25rem; }
.s39-parte__imagen {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 537;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.s39-parte h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.12;
  color: var(--color-morado);
  text-wrap: balance;
}
.s39-parte__rango { margin: 0.3rem 0 0; font-size: 1rem; font-style: italic; color: var(--color-ink-muted); }
.s39-parte__credito { grid-column: 1 / -1; margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--color-ink-muted); }
.s39-parte__credito a { padding: 0.85rem 0; }
@media (min-width: 40rem) {
  .s39-parte__cabeza { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.5rem; }
}
@media (min-width: 64rem) {
  .s39-parte { display: grid; grid-template-columns: 20rem minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .s39-parte__cabeza { grid-template-columns: 1fr; position: sticky; top: 5rem; margin-bottom: 0; }
  .s39-parte__lista { grid-column: 2; grid-row: 1; }
}

/* An article: its title opens its text */
.s39-parte__lista { border-bottom: 1px solid var(--color-line); max-width: 46rem; }
.s39-art { border-top: 1px solid var(--color-line); scroll-margin-top: 4.5rem; }
.s39-art > summary {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) 1.5rem;
  align-items: baseline;
  gap: 0.25rem;
  min-height: 48px;
  padding: 0.7rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.08rem;
  line-height: 1.4;
}
.s39-art > summary::-webkit-details-marker { display: none; }
.s39-art > summary::after {
  content: "+" / "";   /* #1 of AUDITORIA_UX_SEO_AO.md: the sign is not read as part of the title */
  justify-self: end;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-morado);
}
.s39-art[open] > summary::after { content: "\2212" / ""; }
.s39-art > summary:hover { background: var(--color-morado-tint); }
.s39-art__num { font-weight: 600; color: var(--color-morado); font-variant-numeric: lining-nums; }
.s39-art__texto { padding: 0.25rem 0.25rem 1.1rem 4.85rem; max-width: 42rem; }
.s39-art__texto p { margin: 0 0 0.75rem; font-size: 1.04rem; line-height: 1.6; text-wrap: pretty; }
.s39-art__texto ul, .s39-art__texto ol { margin: 0 0 0.75rem; padding-left: 1.4rem; }
.s39-art__texto li { margin-bottom: 0.2rem; line-height: 1.5; }
.s39-art__libros { columns: 2 11rem; }
.s39-art__sub { font-style: italic; }
.s39-art__enlace { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; margin-top: 0.25rem; margin-bottom: 0; }
.s39-art__entrega { font-size: 0.9rem; color: var(--color-ink-muted); }
@media (max-width: 39.99rem) {
  .s39-art > summary { grid-template-columns: 3.6rem minmax(0, 1fr) 1.25rem; }
  .s39-art__texto { padding-left: 0.25rem; }
}

.s39-sobre {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--color-line);
}
.s39-sobre > * { max-width: var(--measure); }
.s39-sobre h2 { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
.s39-sobre p { margin: 0 0 0.6rem; color: var(--color-ink-muted); text-wrap: pretty; }
.s39-sobre a { padding: 0.7rem 0; }

/* ---- A piece ---- */
.s39-sello {
  margin-top: 0;
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-morado);
}
.s39-sello__titulo { font-size: 1.08em; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.s39-pieza__textos { margin-top: 0.4rem; margin-bottom: 0; font-size: 0.95rem; color: var(--color-ink-muted); }
.s39-pieza__textos a { padding: 0.8rem 0; }

/* The article's own text, quoted from our Book of Common Prayer: a box of its own */
.articulo__cuerpo .s39-texto {
  margin-top: 1.6rem;
  margin-bottom: 1.8rem;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-morado);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.articulo__cuerpo .s39-texto__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--color-morado);
}
.articulo__cuerpo .s39-texto blockquote { margin: 0; padding: 0; border-left: 0; }
.articulo__cuerpo .s39-texto blockquote p { font-size: 1rem; line-height: 1.6; }
.articulo__cuerpo .s39-texto + .s39-texto { margin-top: -0.6rem; }

/* Previous / next / index */
.s39-pasos { padding: clamp(1.75rem, 5vw, 2.5rem) var(--gutter) 0; }
.s39-pasos > * {
  max-width: var(--measure-pasos, 40rem);
  margin-left: max(0px, calc((100% - var(--measure-pasos, 40rem)) / 2));
  margin-right: auto;
}
.s39-pasos__fila { display: grid; gap: 0.75rem; }
.s39-pasos__enlace {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 48px;
  padding: 0.8rem 1rem 0.9rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.s39-pasos__enlace:hover { border-color: var(--color-morado); background: var(--color-morado-tint); }
.s39-pasos__rotulo { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.s39-pasos__titulo { font-weight: 600; color: var(--color-morado); line-height: 1.35; }
.s39-pasos__corto { display: block; font-weight: 400; font-style: italic; color: var(--color-ink); }
.s39-pasos__enlace--siguiente { text-align: right; align-items: flex-end; }
.s39-pasos__indice { margin-top: 0.5rem; margin-bottom: 0; text-align: center; }
@media (min-width: 40rem) {
  .s39-pasos__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s39-pasos__enlace--siguiente:only-child { grid-column: 2; }
}

/* ---- Preferences ---- */
@media (forced-colors: active) {
  .s39-partes__lista a, .s39-pasos__enlace, .articulo__cuerpo .s39-texto { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .s39-partes__lista a, .s39-pasos__enlace { transition: none; }
}
@media print {
  .s39-partes, .s39-pasos, .s39-parte__imagen { display: none; }
  .s39-art__texto { display: block; }
}