/* The guide page (templates/pk_editorial/article_page.html), redesigned 2026-10-22 after
   blackhealth.org's article page. Kit tokens only, so the theme and its contrast gate hold.
   From 64rem the main element is a two-column grid (contents | reading column) beside the kit's
   rail: every section stays a direct child of main, which is where Journey inserts ads. */

.guia-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: 15px; color: var(--color-muted); }
.guia-crumbs a { color: var(--color-muted); text-decoration: none; }
.guia-crumbs a:hover { color: var(--color-ink); text-decoration: underline; }

.guia-chip { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--color-brand-50);
  color: var(--color-brand-ink); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; }
.guia-chip:hover { text-decoration: underline; }

.guia-head h1 { margin: 14px 0 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.01em; }
.guia-head .pk-dek { margin: 0 0 20px; font-size: 19px; line-height: 1.55; }

.guia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line); font-size: 15px; color: var(--color-muted); }
.guia-meta a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.guia-meta a:hover { text-decoration: underline; }
.guia-meta__sep { width: 1px; height: 14px; background: var(--color-line-strong); }
@media (max-width: 40rem) { .guia-meta { gap: 6px 14px; } .guia-meta__sep { display: none; } }

.guia-figure { margin: 24px 0 0; }
.guia-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.guia-figure figcaption { margin-top: 8px; font-size: 15px; color: var(--color-muted); text-align: center; }

.guia-puntos { padding: 22px 24px 24px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface-2); }
.guia-puntos h2 { margin: 0 0 14px; font-size: 21px; }
.guia-puntos ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: punto; }
.guia-puntos li { position: relative; padding-left: 38px; font-size: 17px; line-height: 1.55; counter-increment: punto; }
.guia-puntos li::before { content: counter(punto); position: absolute; left: 0; top: 1px; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand); color: var(--color-on-brand); font-size: 13px; font-weight: 700; }

.guia-cita-w { white-space: nowrap; }
sup.guia-cita { margin-left: 2px; font-size: 11px; line-height: 0; vertical-align: super; }
sup.guia-cita a { color: var(--color-muted); font-weight: 600; text-decoration: none; }
sup.guia-cita a:hover, sup.guia-cita a:focus-visible { color: var(--color-brand-ink); text-decoration: underline; }

.guia-prose h2 { font-size: 27px; line-height: 1.2; }
.guia-fuentes { padding-top: 20px; border-top: 1px solid var(--color-line); font-size: 15px; }
.guia-fuentes h2 { font-size: 21px; }
.guia-fuentes li { margin-bottom: 6px; }

.guia-toc { display: none; font-size: 15px; }
.guia-toc p { margin: 0 0 10px; font-weight: 600; color: var(--color-ink); }
.guia-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--color-line); }
.guia-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
  color: var(--color-muted); line-height: 1.35; text-decoration: none; }
.guia-toc a:hover, .guia-toc a:focus-visible { border-left-color: var(--color-brand); color: var(--color-ink); }

.guia-confianza { padding: 20px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface-2); font-size: 15px; }
.guia-confianza h2 { margin: 0 0 8px; font-size: 19px; }
.guia-confianza p { margin: 0 0 10px; line-height: 1.5; color: var(--color-muted); }
.guia-confianza a { font-weight: 600; color: var(--color-brand-ink); }

@media (min-width: 64rem) {
  /* The reading block is exactly as wide as its two columns (200 + 64 + 680 = 944px) and sits
     beside the rail, the pair centered in the page; the kit's 1fr track left up to ~250px of dead
     space between the text and the rail on a wide screen (Mario, 2026-10-22). */
  .pk-page--guia.pk-page--rail { grid-template-columns: minmax(0, 944px) 300px; column-gap: 56px; justify-content: center; }
  .pk-page--guia .pk-main { display: grid; grid-template-columns: 200px minmax(0, 680px); column-gap: 64px; align-content: start; }
  .pk-page--guia .pk-main > * { grid-column: 2; min-width: 0; }
  .pk-page--guia .pk-main > .guia-toc { display: block; grid-column: 1; grid-row: 1 / span 80; align-self: start;
    position: sticky; top: 96px; margin-top: 0; }
}
/* A laptop (1024 to 1279px): no room for three columns, so the contents list goes and the text
   takes the whole space beside the rail (with it, the text was 410px at 1024px and four tables
   spilled into the rail; 2026-10-23). */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .pk-page--guia.pk-page--rail { grid-template-columns: minmax(0, 680px) 300px; column-gap: 40px; }
  .pk-page--guia .pk-main { grid-template-columns: minmax(0, 680px); }
  .pk-page--guia .pk-main > * { grid-column: 1; }
  .pk-page--guia .pk-main > .guia-toc { display: none; }
}

.guia-tools { padding: 20px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-card); }
.guia-tools h2 { margin: 0 0 6px; font-size: 19px; }
.guia-tools ul { margin: 0; padding: 0; list-style: none; }
.guia-tools li + li { border-top: 1px solid var(--color-line); }
.guia-tools a { display: flex; min-height: 48px; flex-direction: column; justify-content: center; padding: 8px 0; text-decoration: none; color: var(--color-ink); }
.guia-tools a strong { font-size: 15px; }
.guia-tools a span { font-size: 15px; color: var(--color-muted); }
.guia-tools a:hover strong, .guia-tools a:focus-visible strong { color: var(--color-brand-ink); text-decoration: underline; }

@media print { .guia-toc, .guia-confianza, .guia-tools { display: none !important; } }

/* Tables in a guide (pipe tables from the drafts): full width, padded cells, a tinted header, a
   rule between rows, numbers right-aligned, and a horizontal scroll on a phone instead of a squeeze. */
.guia-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 20px 0; border-collapse: collapse;
  border: 1px solid var(--color-line); border-radius: 12px; font-size: 15px; line-height: 1.45; }
.guia-prose thead th { background: var(--color-surface-2); color: var(--color-ink); font-weight: 700; text-align: left; }
.guia-prose th, .guia-prose td { padding: 11px 14px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.guia-prose tbody tr:last-child td { border-bottom: 0; }
.guia-prose td:not(:first-child) { font-variant-numeric: tabular-nums; }
.guia-prose td.num, .guia-prose th.num { text-align: right; white-space: nowrap; }
/* From 40rem the table is a real table inside the reading column: headers wrap, so a long header
   ("Walmart (lista vigente desde marzo de 2025)") can never push it past the column into the
   rail (Mario, 2026-10-23). Under 40rem it stays a block that scrolls inside its own box. */
@media (min-width: 40rem) { .guia-prose table { display: table; table-layout: auto; } }
@media (min-width: 40rem) and (max-width: 79.99rem) { .guia-prose :is(td, th) { padding-inline: 10px; } .guia-prose :is(td.num, th.num) { white-space: normal; } }

/* The sources list, collapsed at the end of the guide like blackhealth.org's. */
.guia-fuentes details { border: 1px solid var(--color-line); border-radius: 14px; padding: 0 20px; background: var(--color-surface-2); }
.guia-fuentes summary { display: flex; min-height: 52px; align-items: center; cursor: pointer; font-weight: 600; font-size: 17px; color: var(--color-ink); list-style: none; }
.guia-fuentes summary::-webkit-details-marker { display: none; }
.guia-fuentes summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--color-muted); }
.guia-fuentes details[open] summary::after { content: "−"; }
.guia-fuentes details[open] { padding-bottom: 16px; }

/* The affiliate disclosure is the one line that must be clear and conspicuous (FTC Endorsement
   Guides): never under the 15px floor (2026-10-22 audit). The kit sets it at 13px. */
.pk-promo-note { font-size: 15px; line-height: 1.45; color: var(--color-ink); }

/* Phone touch targets (2026-10-22 mobile pass): the crumbs, the section chip, the byline link and
   the method link keep their look and gain a 44px hit area, so a thumb never misses them. */
:is(.guia-crumbs a, .guia-chip, .guia-meta a, .guia-confianza a) { position: relative; }
:is(.guia-crumbs a, .guia-chip, .guia-meta a, .guia-confianza a)::after { content: ""; position: absolute; inset: -10px -4px; }

/* On a phone a guide table is a stack of cards: the first column is the card's title and each other
   cell prints its column header above the value (data-label, set at render by guias_tags). A table
   that scrolled sideways hid its last columns with no sign they were there (2026-10-23). */
@media (max-width: 39.99rem) {
  .guia-prose table.guia-tabla { display: block; overflow: visible; border: 0; border-radius: 0; }
  .guia-prose table.guia-tabla thead { display: none; }
  .guia-prose table.guia-tabla :is(tbody, tr, td) { display: block; }
  .guia-prose table.guia-tabla tr { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-card); }
  .guia-prose table.guia-tabla td { padding: 6px 0 0; border: 0; white-space: normal; text-align: left; }
  .guia-prose table.guia-tabla td::before { content: attr(data-label); display: block; font-size: 15px; font-weight: 700; color: var(--color-muted); }
  .guia-prose table.guia-tabla td:first-child { padding: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--color-ink); }
  .guia-prose table.guia-tabla td:first-child::before { content: none; }
}