/* ============================================================= *
 * Puntos Gatillo — scoped layout fixes.                          *
 * The muscle pages are content-dense (ubicación + por qué +      *
 * diagrama + dolor + localizar + herramientas + pasos + consejo).*
 * The reader scales the root font (zoom-to-fit) so rem stays     *
 * large; we shrink type, padding and image heights hard so a     *
 * full muscle page fits the fixed sheet without overflowing.     *
 * In-page scroll stays as a safety net for the densest pages.    *
 * All scoped to html[data-course="puntos_gatillo"].              *
 * ============================================================= */

/* 1 ── In-page scroll contract: body grows, scrolls, never clips. */
html[data-course="puntos_gatillo"] .page-body.hygiene-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0.28in 0.4in 0.24in;
}
html[data-course="puntos_gatillo"] .hygiene-body > div { min-width: 0; }
html[data-course="puntos_gatillo"] .hygiene-body > div + div { margin-top: 0.14rem; }

/* 2 ── Header: small, doesn't eat the page. */
html[data-course="puntos_gatillo"] .limpieza-header { padding: 0.05rem 0; margin-bottom: 0.1rem; flex-shrink: 0; }
html[data-course="puntos_gatillo"] .hygiene-main-title { font-size: 0.95rem; line-height: 1.08; }
html[data-course="puntos_gatillo"] .hero-kicker { font-size: 0.52rem; letter-spacing: 0.08em; }
html[data-course="puntos_gatillo"] .limpieza-hdr-icon { width: 1.05rem; height: 1.05rem; }

/* 3 ── Compact typography everywhere on these pages. */
html[data-course="puntos_gatillo"] .hygiene-body { font-size: 0.62rem; line-height: 1.26; }
html[data-course="puntos_gatillo"] .hygiene-body :is(p, li, span) { font-size: 0.62rem; line-height: 1.26; }

/* 4 ── Callouts: slim boxes. */
html[data-course="puntos_gatillo"] .callout-block {
  padding: 0.32rem 0.5rem; margin: 0; border-radius: 0.4rem; gap: 0.4rem; align-items: flex-start;
}
html[data-course="puntos_gatillo"] .callout-title { font-size: 0.66rem; margin: 0 0 0.1rem; line-height: 1.15; }
html[data-course="puntos_gatillo"] .callout-text { margin: 0; }
html[data-course="puntos_gatillo"] .callout-icon { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

/* 5 ── Highlight + feature lists: tight rows. */
html[data-course="puntos_gatillo"] .highlight-bar { padding: 0.32rem 0.5rem; gap: 0.4rem; }
html[data-course="puntos_gatillo"] .highlight-bar-title { font-size: 0.64rem; margin: 0 0 0.12rem; }
html[data-course="puntos_gatillo"] .highlight-bar-list { gap: 0.08rem; }
html[data-course="puntos_gatillo"] .highlight-bar-list li { margin: 0 0 0.06rem; }

/* 6 ── Steps: compact cards. */
html[data-course="puntos_gatillo"] .steps-list { gap: 0.22rem; }
html[data-course="puntos_gatillo"] .step-item { padding: 0.28rem 0.42rem; }
html[data-course="puntos_gatillo"] .step-text { font-size: 0.6rem; }
html[data-course="puntos_gatillo"] :is(.step-title, .step-num) { font-size: 0.62rem; }

/* 7 ── Diagram + tool images: small so they never dominate. */
html[data-course="puntos_gatillo"] .image-block { margin: 0.05rem auto; }
html[data-course="puntos_gatillo"] .image-block-img {
  max-height: 32vh; width: auto; max-width: 92%; object-fit: contain;
  border-radius: 0.35rem; display: block; margin: 0 auto;
}
html[data-course="puntos_gatillo"] .image-block-caption { font-size: 0.54rem; margin-top: 0.06rem; text-align: center; }

/* 8 ── Tool gallery (image-grid): compact cards that hug their image.
   The base .image-card is a portrait cover card (aspect-ratio 1/2) which
   forced ~300px tall boxes; collapse it to auto so the card = the photo. */
html[data-course="puntos_gatillo"] .image-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem;
  align-items: start;
}
html[data-course="puntos_gatillo"] .image-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0.45rem;
  overflow: hidden;
}
html[data-course="puntos_gatillo"] .image-card-photo {
  max-height: 18vh; height: auto; width: 100%; object-fit: contain;
  display: block; padding: 0.3rem 0.3rem 0;
}
html[data-course="puntos_gatillo"] .image-card-overlay {
  position: static !important;
  background: none !important;
  padding: 0.2rem 0.35rem 0.4rem;
  text-align: center;
}
html[data-course="puntos_gatillo"] .image-card-title { font-size: 0.64rem; line-height: 1.1; }
html[data-course="puntos_gatillo"] .image-card-kicker { font-size: 0.5rem; opacity: 0.75; }

/* 9 ── Tool icon row (stat-grid): compact chips, 3 across. */
html[data-course="puntos_gatillo"] .stat-grid { gap: 0.32rem; grid-template-columns: repeat(3, 1fr); }
html[data-course="puntos_gatillo"] .stat-card { padding: 0.32rem 0.3rem; }
html[data-course="puntos_gatillo"] .stat-card-icon { width: 1.05rem; height: 1.05rem; }
html[data-course="puntos_gatillo"] .stat-card-value { font-size: 0.64rem; }
html[data-course="puntos_gatillo"] .stat-card-label { font-size: 0.52rem; }

/* 10 ── Bigger, taller index: tall columns down the page. */
html[data-course="puntos_gatillo"] :is(#mapa, #navegador) .index-body { column-count: 2; column-gap: 1.4rem; font-size: 0.62rem; }
html[data-course="puntos_gatillo"] :is(#mapa, #navegador) .toc-group-hdr { font-size: 0.66rem; break-after: avoid; }
html[data-course="puntos_gatillo"] :is(#mapa, #navegador) .index-entry { padding: 0.08rem 0; }