/* ============================================================
   KnowledgeHub — Design System aplicado a WordPress
   Port 1:1 de resources/public/css/vitrina.css (Laravel) +
   cabecera/pie institucional (layout.blade.php) +
   bloque institucional de clases de trigo (look & feel uswheat.org)
   Contrato vitrina: contenedor único --container (1600px), tokens en :root.
   ============================================================ */

:root {
  /* Papel — base cálida de página */
  --paper-50: #f8f5f1; --paper-100: #f1eee9; --paper-200: #e1ddd8; --paper-300: #cecac4;

  /* Neutral (tinte cálido) — texto y divisores */
  --neutral-50: #fbfaf7; --neutral-100: #f3f2ee; --neutral-200: #e1dfdb;
  --neutral-300: #cccac5; --neutral-400: #b1afaa; --neutral-500: #9a9892;
  --neutral-600: #787670; --neutral-700: #5b5954; --neutral-800: #42413c;
  --neutral-900: #2c2b27; --neutral-950: #171613;

  /* Brand — verde institucional USW (#709e58 ancla 500) */
  --brand-50: #f2f6f0; --brand-100: #d9ead0; --brand-200: #c0ddb4;
  --brand-300: #a5cf97; --brand-400: #89b671; --brand-500: #709e58;
  --brand-600: #547848; --brand-700: #334730; --brand-800: #21301e;
  --brand-900: #152012; --brand-950: #0e170b;

  /* Familias agrícolas (uswheat.org) */
  --camel-200: #c4b4a1; --camel-300: #a9937a; --camel-400: #95795d;
  --camel-500: #7e664c; --camel-600: #644f38; --camel-700: #56432d; --camel-800: #4b3925;
  --sky-100: #f0f2e6; --sky-200: #dae9d5; --sky-300: #b8dfcc;
  --sky-400: #82cdd4; --sky-500: #72b4bc; --sky-600: #568f99;
  --terr-100: #fbe4d8; --terr-400: #d4582d; --terr-500: #c95027; --terr-600: #b94720; --terr-700: #9d3a16; --terr-800: #7d290c;

  /* Accent — naranjo USW (#EC8D30, único acento de interacción) */
  --accent-50: #f7f3ef; --accent-100: #ffd8af; --accent-200: #ffc388;
  --accent-300: #ffb068; --accent-400: #fa9d4a; --accent-500: #ec8d30;
  --accent-600: #c46d00; --accent-700: #9c5000; --accent-800: #723600; --accent-900: #482000;

  /* Roles semánticos */
  --bg: var(--paper-50);
  --surface: #ffffff;
  --surface-muted: var(--neutral-50);
  --ink: var(--neutral-950);
  --ink-soft: var(--neutral-900);
  --muted: var(--neutral-700);
  --faint: var(--neutral-500);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --brand: var(--brand-500);
  --brand-strong: #40652b;
  --brand-soft: var(--brand-100);
  --accent: var(--accent-500);
  --accent-strong: var(--accent-700);
  --accent-soft: var(--accent-100);
  --on-strong: #ffffff;
  --on-accent: #3a1200;
  --danger: #aa342c;
  --danger-soft: #fce1dd;

  /* Tipografía por rol */
  --f-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-prose: Georgia, 'Iowan Old Style', Charter, serif;
  --f-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Cascadia Code', Consolas, ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout — contenedor único del sitio público */
  --container: 1600px;
  --gutter: clamp(20px, 3.5vw, 40px);
  --measure: 68ch;

  /* Radius / sombra / motion */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --shadow-raised: 0 1px 2px rgba(23,22,19,.05), 0 6px 24px -12px rgba(23,22,19,.10);
  --shadow-modal: 0 12px 48px -12px rgba(23,22,19,.18);
  --dur: 180ms; --dur-slow: 260ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { color: var(--brand-800); }
:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 2px; border-radius: 4px; }

.kh-wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Neutraliza el contenedor de Astra dentro de nuestras plantillas */
.astra-kh-full .site-content .ast-container { max-width: none; padding: 0; }
.astra-kh-full .site-content { padding: 0; margin: 0; }

/* Typography roles */
.kh-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0; font-weight: 600; }
.kh-meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.kh-display { font-family: var(--f-display); font-weight: 600; letter-spacing: -.015em; }
.kh-lead { font-family: var(--f-prose); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; }
.kh-code { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.kh-prose-body { font-family: var(--f-prose); font-size: 17px; line-height: 1.68; max-width: var(--measure); }

/* Botones */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
  min-height: 46px; padding: 0 20px; font-size: 15px; font-family: var(--f-ui);
  cursor: pointer; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kh-btn:active { transform: translateY(1px); }
.kh-btn--accent { background: var(--accent-500); color: var(--on-accent); border-color: var(--accent-500); }
.kh-btn--accent:hover { background: var(--accent-400); color: var(--on-accent); }
.kh-btn--forest { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.kh-btn--forest:hover { background: var(--brand-800); color: #fff; }
.kh-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.kh-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.kh-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.kh-btn--secondary:hover { background: var(--surface-muted); border-color: var(--ink-soft); }
.kh-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Chips */
.kh-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill);
  padding: 4px 11px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.kh-chip--glass { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.kh-chip--soft { background: var(--brand-100); color: var(--brand-900); }
.kh-chip--norma { background: var(--paper-100); color: var(--camel-700); border: 1px solid var(--paper-200); }
.kh-chip--plain { background: var(--neutral-100); color: var(--neutral-800); }
.kh-chip--cat { background: var(--brand-100); color: var(--brand-800); }

/* Badge de estado workflow */
.kh-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill);
  padding: 3px 10px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .05em; white-space: nowrap;
}
.kh-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; font-style: normal; }
.kh-badge--borrador { background: var(--neutral-100); color: var(--neutral-700); }
.kh-badge--en_revision { background: var(--accent-100); color: var(--accent-800); }
.kh-badge--aprobado { background: var(--brand-100); color: var(--brand-800); }
.kh-badge--publicado { background: var(--brand-700); color: #fff; }
.kh-badge--obsoleto { background: var(--neutral-100); color: var(--neutral-400); text-decoration: line-through; }

/* Sección estándar */
.kh-sec { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

/* Filas de catálogo (disciplinas) */
a.disc:hover { background: var(--surface-muted); }
a.m-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--border-strong); }
@media (max-width:920px){ a.disc { grid-template-columns: 1fr !important; } a.disc .kh-code { display:none; } }
@media (max-width:720px){ #destacados .kh-wrap > div:last-child, .m-grid { grid-template-columns: 1fr !important; } }

/* Prosa técnica */
.kh-prose { font-family: var(--f-prose); font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.kh-prose h1,.kh-prose h2,.kh-prose h3,.kh-prose h4 { font-family: var(--f-display); color: var(--ink); line-height: 1.25; margin: 1.4em 0 .4em; }
.kh-prose h3 { font-size: 1.15em; } .kh-prose h4 { font-size: 1.05em; }
.kh-prose p { margin: .7em 0; }
.kh-prose ul, .kh-prose ol { margin: .7em 0; padding-left: 1.4em; }
.kh-prose ul { list-style: disc; } .kh-prose ol { list-style: decimal; }
.kh-prose li { margin: .3em 0; }
.kh-prose strong { font-weight: 700; color: var(--ink); }
.kh-prose em { font-style: italic; }
.kh-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.kh-prose th, .kh-prose td { border: 1px solid var(--paper-200); padding: .5em .75em; text-align: left; font-size: .92em; vertical-align: top; }
.kh-prose th { background: var(--paper-100); font-family: var(--f-ui); font-weight: 600; }
.kh-prose a { color: var(--brand-strong); text-decoration: underline; text-decoration-color: var(--brand-300); }
.kh-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 1em 0; }
.kh-prose blockquote { border-left: 3px solid var(--brand-300); margin: 1em 0; padding: .2em 1em; color: var(--muted); }

/* Paginación (WP paginate_links) */
.kh-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 32px; }
.kh-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px;
  padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; color: var(--muted); background: var(--surface); text-decoration: none;
}
.kh-pagination .page-numbers.current { background: var(--brand-700); color: #fff; border-color: var(--brand-700); font-weight: 600; }
.kh-pagination a.page-numbers:hover { border-color: var(--brand-400); color: var(--brand-strong); }

/* ============================================================
   CABECERA Y PIE INSTITUCIONAL (port de vitrina/layout.blade.php)
   ============================================================ */
.topnav { background: var(--brand-700); }
.topnav .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }
.topnav .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.topnav .brand img { height: 64px; width: auto; }
.topnav ul.navlinks { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.topnav .navlinks a { color: #fff; text-decoration: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 6px 2px; }
.topnav .navlinks a:hover, .topnav .navlinks li.current-menu-item > a { color: var(--brand-200); }
.topnav .navlinks .kh-btn { margin-left: 10px; font-family: var(--f-ui); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--on-accent); }
.topnav .navlinks .kh-btn:hover { color: var(--on-accent); }
.topnav .navtoggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: var(--r-sm); padding: 8px 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

.sitefoot { background: var(--brand-950); color: #fff; padding: 52px 0 24px; margin-top: 0; }
.sitefoot .grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr .8fr; gap: 34px; }
.sitefoot img.logo { height: 52px; width: auto; margin-bottom: 16px; }
.sitefoot p.desc { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.6; max-width: 40ch; margin: 0 0 18px; }
.sitefoot h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 14px; font-weight: 600; }
.sitefoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sitefoot a { color: rgba(255,255,255,.86); text-decoration: none; font-size: 14.5px; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.sitefoot .bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: rgba(255,255,255,.5); font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; }
@media (max-width: 1080px) {
  .topnav .navtoggle { display: inline-flex; }
  .topnav ul.navlinks { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--brand-800); flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px var(--gutter) 22px; }
  .topnav.is-open ul.navlinks { display: flex; }
  .topnav { position: relative; }
  .topnav .navlinks a { padding: 9px 0; }
  .sitefoot .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .topnav .brand img { height: 48px; }
  .sitefoot .grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — hero portada (foto de campo + velo verde)
   ============================================================ */
.kh-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--brand-800); }
.kh-hero > img.kh-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.kh-hero .kh-hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(104deg, rgba(21,32,18,.92) 0%, rgba(33,48,30,.72) 40%, rgba(33,48,30,.32) 72%, rgba(33,48,30,.55) 100%); }
.kh-hero .kh-hero-inner { padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(64px, 10vw, 132px); }
.kh-hero .kh-hero-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-500); color: var(--on-accent); border-radius: var(--r-pill); padding: 7px 16px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 26px; }
.kh-hero h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(38px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; max-width: 15ch; color: #fff; }
.kh-hero .kh-hero-sub { font-family: var(--f-prose); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; max-width: 56ch; color: rgba(255,255,255,.92); margin: 0 0 30px; }
.kh-search { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: var(--r-pill); padding: 6px 6px 6px 22px; box-shadow: 0 10px 40px -18px rgba(21,32,18,.45); max-width: 640px; }
.kh-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; font-family: var(--f-ui); color: var(--ink); padding: 10px 4px; outline: none; }
.kh-search button { border-radius: var(--r-pill); min-height: 44px; }
.kh-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.kh-hero .kh-hero-credit { position: absolute; right: var(--gutter); bottom: 12px; color: rgba(255,255,255,.78); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; }

/* ============================================================
   CLASES DE TRIGO — bloque institucional (look & feel uswheat.org)
   ============================================================ */

/* ============================================================
   MÉTODO — Layout Técnico (port 1:1)
   ============================================================ */
.m-hero { background: var(--brand-900); border-bottom: 1px solid var(--brand-800); color: #fff; }
.m-hero-inner { padding: clamp(32px, 4vw, 56px) var(--gutter); }
.m-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.m-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12.5px; color: rgba(255,255,255,.62); }
.m-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.m-breadcrumb a:hover { color: #fff; }
.m-breadcrumb-current { color: #fff; font-weight: 600; }
.m-hero-codes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.m-code-big { font-family: var(--f-mono); font-size: 15px; letter-spacing: .08em; color: #fff; font-weight: 700; padding: 5px 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill); }
.m-hero-title { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; margin: 14px 0 14px; max-width: 30ch; color: #fff; letter-spacing: -.015em; }
.m-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.m-hero-chips .kh-chip--soft { background: rgba(255,255,255,.16); color: #fff; }
.m-hero-chips .kh-chip--norma { background: rgba(255,255,255,.12); color: var(--sky-200); border-color: rgba(255,255,255,.24); }
.m-hero-lead { font-family: var(--f-prose); font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.65; color: rgba(255,255,255,.82); max-width: 72ch; margin: 0 0 22px; }
.m-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.m-hero-main { min-width: 0; }
.m-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.m-hero-actions .kh-btn--forest { background: #fff; color: var(--brand-900); border-color: #fff; font-weight: 600; }
.m-hero-actions .kh-btn--forest:hover { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand-900); }
.m-hero .kh-meta { color: rgba(255,255,255,.66); }
.m-hero .kh-badge--publicado { background: var(--accent-500); color: var(--on-accent); }
@media (max-width: 1080px) {
  .m-hero-grid { grid-template-columns: 1fr; }
  .m-kpis { grid-row: 1; }
  .m-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 560px) { .m-kpi-grid { grid-template-columns: 1fr 1fr; } }

.m-kpis { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 18px 20px; }
.m-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-kpi { background: var(--surface); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.m-kpi-label { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--camel-600); margin-bottom: 4px; font-weight: 600; }
.m-kpi-value { display: block; font-family: var(--f-ui); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: break-word; }
.m-kpi-value--mono { font-family: var(--f-mono); }

.m-body-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); align-items: start; padding-top: clamp(36px, 4vw, 52px); padding-bottom: clamp(64px, 7vw, 96px); }
@media (max-width: 1280px) { .m-body-grid { grid-template-columns: 210px minmax(0, 1fr) 300px; } }
@media (max-width: 1080px) { .m-body-grid { grid-template-columns: 1fr; } }

.m-sticky-col { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
.m-index-list { display: flex; flex-direction: column; gap: 2px; }
.m-index-item { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--muted); font-size: 13.5px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); border-left: 3px solid transparent; }
.m-index-item:hover { background: var(--brand-100); color: var(--brand-900); border-left-color: var(--brand-500); }
.m-index-num { font-family: var(--f-mono); font-size: 11px; color: var(--neutral-400); min-width: 16px; }
.m-index-item.is-visible { background: var(--brand-100); color: var(--brand-900); border-left-color: var(--brand-500); font-weight: 600; }
.m-index-item.is-visible .m-index-num { color: var(--brand-800); }

.m-index-docs { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.m-index-doc { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); text-decoration: none; font-size: 13px; color: var(--ink-soft); }
.m-index-doc:hover { background: var(--brand-50); }
.m-index-doc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-index-doc-meta { font-family: var(--f-mono); font-size: 11px; color: var(--faint); flex: none; }

.m-doc { min-width: 0; }
.m-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 34px); margin-bottom: 16px; }
.m-section-title { font-family: var(--f-display); font-size: 21px; line-height: 1.25; margin: 0 0 14px; color: var(--brand-900); border-bottom: 2px solid var(--brand-100); padding-bottom: 10px; letter-spacing: -.01em; }

.m-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.m-result-card { background: var(--paper-50); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; }
.m-result-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.m-result-name { font-family: var(--f-ui); font-size: 15px; font-weight: 700; color: var(--ink); }
.m-result-unit { font-family: var(--f-mono); font-size: 12px; color: var(--muted); background: var(--neutral-100); padding: 2px 8px; border-radius: var(--r-pill); }
.m-result-def { font-family: var(--f-prose); font-size: 14.5px; line-height: 1.55; color: var(--neutral-700); margin: 0 0 10px; }
.m-result-interp { padding-top: 10px; border-top: 1px solid var(--border); }
.m-result-interp-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); font-weight: 600; display: block; margin-bottom: 3px; }
.m-result-interp p { font-family: var(--f-prose); font-size: 14px; line-height: 1.55; color: var(--neutral-700); margin: 0; }

.m-data-panel { display: flex; flex-direction: column; gap: 16px; }
.m-data-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
.m-data-title { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--camel-600); margin: 0 0 12px; font-weight: 600; }
.m-data-list { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.m-data-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--neutral-100); }
.m-data-row:last-child { border-bottom: 0; padding-bottom: 0; }
.m-data-row dt { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.m-data-row dd { font-family: var(--f-ui); font-size: 13.5px; color: var(--ink-soft); text-align: right; margin: 0; }
.m-code-sm { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--brand-800); letter-spacing: .04em; }
.m-normas-list { display: flex; flex-wrap: wrap; gap: 5px; }
.m-norma-chip { display: inline-block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--camel-700); background: var(--paper-100); border: 1px solid var(--paper-200); padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.m-reported-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-reported-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--neutral-100); }
.m-reported-item:last-child { border-bottom: 0; }
.m-reported-name { font-family: var(--f-ui); font-size: 13.5px; color: var(--ink-soft); }
.m-reported-unit { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

.m-related-grid { display: flex; flex-direction: column; gap: 10px; }
.m-related-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; background: var(--surface); text-decoration: none; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.m-related-card:hover { border-color: var(--brand-300); background: var(--brand-50); }
.m-related-card.is-off { pointer-events: none; opacity: .6; }

/* ============================================================
   Control Documental + Identificación Técnica (Capa 1 y 2)
   ============================================================ */
.kh-control-doc, .kh-identificacion {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow-raised);
}
.kh-control-doc-head, .kh-ident-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.kh-control-doc-grid, .kh-ident-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 28px; }
.kh-control-doc-col, .kh-ident-main, .kh-ident-meta { display: grid; gap: 7px; align-content: start; }
.kh-control-doc-row, .kh-ident-row, .kh-ident-block { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; font-size: 14px; }
.kh-control-doc-label, .kh-ident-label { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.kh-control-doc-value, .kh-ident-value { color: var(--ink-soft); line-height: 1.5; min-width: 0; }
.kh-name-lg { font-size: 16px; font-weight: 600; color: var(--ink); }
.kh-state-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; background: var(--brand-100); color: var(--brand-800); white-space: nowrap; }
.kh-yes { font-weight: 600; color: #3d6b2a; }
.kh-code-sm { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--brand-800); }

/* ============================================================
   CONTRATO VITRINA — page-hero + method-card + grillas
   ============================================================ */
.page-hero { background: var(--brand-900); color: #fff; border-bottom: 1px solid var(--brand-800); }
.page-hero-inner { padding: clamp(36px, 5vw, 64px) var(--gutter); }
.page-hero-back { display: inline-block; color: rgba(255,255,255,.6); font-family: var(--f-mono); font-size: 13px; text-decoration: none; margin-bottom: 18px; }
.page-hero-back:hover { color: #fff; }
.page-hero-eyebrow { color: var(--sky-300); margin-bottom: 10px; }
.page-hero-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-hero-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; margin: 0; color: #fff; }
.page-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.page-hero-desc { color: rgba(255,255,255,.78); max-width: 72ch; margin: 14px 0 0; font-size: 16px; line-height: 1.65; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.page-hero-actions .kh-btn--forest { background: #fff; color: var(--brand-900); border-color: #fff; font-weight: 600; }
.page-hero-actions .kh-btn--forest:hover { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand-900); }

.method-card {
  background: var(--surface); border: 1px solid var(--neutral-200); border-top: 4px solid var(--brand-600);
  border-radius: var(--r-md); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.method-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--brand-400); color: var(--ink); }
.method-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.method-card-code { font-size: 13px; letter-spacing: .04em; color: var(--brand-800); font-weight: 600; }
.method-card-title { font-family: var(--f-display); font-size: 19px; line-height: 1.28; margin: 0; color: var(--ink); }
.method-card-desc { color: var(--neutral-700); font-size: 14.5px; line-height: 1.6; margin: 0; }
.method-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.method-card-cta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong); margin-top: 4px; }

.grid-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1400px) { .grid-methods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) { .grid-methods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-methods { grid-template-columns: 1fr; } }

.list-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 1080px) { .list-methods { grid-template-columns: 1fr; } }

/* Filtros del archivo de métodos */
.kh-archive-layout { display: flex; gap: clamp(24px, 3vw, 40px); align-items: flex-start; }
.kh-archive-aside { width: 240px; flex: none; position: sticky; top: 24px; }
.kh-filter-nav { display: grid; gap: 2px; margin-bottom: 22px; }
.kh-filter-nav a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--muted); text-decoration: none; }
.kh-filter-nav a:hover { background: var(--brand-50); color: var(--brand-900); }
.kh-filter-nav a.is-active { background: var(--brand-100); color: var(--brand-900); font-weight: 600; }
.kh-filter-nav .kh-count { font-family: var(--f-mono); font-size: 11px; color: var(--neutral-500); }
@media (max-width: 1080px) {
  .kh-archive-layout { flex-direction: column; }
  .kh-archive-aside { width: 100%; position: static; }
}
.kh-empty { border: 1px dashed var(--neutral-300); border-radius: var(--r-lg); padding: 48px 24px; text-align: center; }

/* Aviso de import / notas del child theme */
.kh-note { border-left: 3px solid var(--accent-500); background: var(--accent-50); color: var(--neutral-800); padding: 12px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px; }

/* ============================================================
   Compatibilidad WordPress / Astra
   ============================================================ */
body.admin-bar .m-sticky-col { top: 56px; }
.m-section .kh-prose > :first-child { margin-top: 0; }
.m-section .kh-prose > :last-child { margin-bottom: 0; }
.site-content .ast-container > .kh-sec:first-child { padding-top: 0; }
.wp-block-image img { border-radius: var(--r-md); }
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single { border: 0; }
.ast-no-sidebar.ast-separate-container .ast-article-post { padding: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ============================================================\n   COMPONENTES REUTILIZABLES DEL PORTAL (R2.x — shortcodes)\n   ============================================================ */\n\n/* Métodos destacados: carrusel responsive con scroll-snap nativo.\n   Se activa cuando hay más de 4 métodos publicados; de lo contrario\n   usa .grid-methods (4 columnas → 1 en móvil, ya definido abajo). */\n.kh-carousel {\n  display: flex;\n  gap: 16px;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  padding-bottom: 12px;\n  -webkit-overflow-scrolling: touch;\n  /* Ocultar scrollbar nativa pero mantener funcionalidad */\n  scrollbar-width: thin;\n  scrollbar-color: var(--border-strong) transparent;\n}\n\n.kh-carousel::-webkit-scrollbar {\n  height: 6px;\n}\n.kh-carousel::-webkit-scrollbar-track {\n  background: transparent;\n}\n.kh-carousel::-webkit-scrollbar-thumb {\n  background: var(--border-strong);\n  border-radius: 999px;\n}\n\n.kh-carousel .method-card {\n  flex: 0 0 auto;\n  width: 280px;\n  scroll-snap-align: start;\n}\n\n/* Breakpoints: 4 desktop → 2 tablet → 1 móvil.\n   En móvil no es carrusel: grid-method tiene 1fr ya definido. */\n@media (max-width: 1080px) {\n  .kh-carousel .method-card { width: 300px; }\n}\n@media (max-width: 640px) {\n  .kh-carousel { overflow-x: visible; }\n  .kh-carousel .method-card { width: 100%; }\n}\n\n/* Controles del carrusel: botones externos al scroll. */\n.kh-carousel-controls {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 18px;\n}\n\n.kh-carousel-controls .kh-btn {\n  min-width: 46px;\n  min-height: 46px;\n  padding: 0 16px;\n  background: var(--surface);\n  border: 1px solid var(--border-strong);\n  color: var(--ink);\n}\n\n.kh-carousel-controls .kh-btn:hover {\n  background: var(--surface-muted);\n  border-color: var(--brand-500);\n  color: var(--brand-800);\n}\n\n.kh-carousel-controls .kh-btn:focus-visible {\n  outline: 3px solid var(--accent-500);\n  outline-offset: 2px;\n}\n\n.kh-carousel-controls .kh-btn[disabled] {\n  opacity: .4;\n  cursor: not-allowed;\n}\n\n/* Indicador de posición del carrusel (opcional, etiqueta accesible). */\n.kh-carousel-label {\n  font-family: var(--f-mono);\n  font-size: 12px;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n\n/* ============================================================\n   ARMADURA DEL DESIGN SYSTEM frente a la tipografía global de Astra
   ------------------------------------------------------------
   Astra imprime `h1,h2…{ color: var(--ast-global-color-3) }` y otros
   estilos globales que ganan sobre las clases .kh-* / .m-*. Estas reglas
   las aplican los tokens KH solo en las vistas de la vitrina (body.astra-kh-full
   que agrega el child theme), sin tocar el resto del sitio.
   Orden interno: genérico → prosa → mono → títulos (el último gana en empates).
   ============================================================ */

/* Texto corrido sin clase (párrafos institucionales, listas, estados vacíos, CTA) */
body.astra-kh-full .kh-body,
body.astra-kh-full .kh-body li,
body.astra-kh-full .kh-body p { font-family: var(--f-ui) !important; }

/* Prosa técnica */
body.astra-kh-full .kh-prose,
body.astra-kh-full .kh-prose p,
body.astra-kh-full .kh-prose li,
body.astra-kh-full .kh-prose blockquote,
body.astra-kh-full .kh-lead,
body.astra-kh-full .kh-hero-sub,
body.astra-kh-full .page-hero-desc,
body.astra-kh-full .m-hero-lead,
body.astra-kh-full .m-result-def,
body.astra-kh-full .m-result-interp p,
body.astra-kh-full .method-card-desc { font-family: var(--f-prose) !important; }

/* Monoespaciada (etiquetas, códigos, chips) */
body.astra-kh-full .kh-eyebrow,
body.astra-kh-full .kh-meta,
body.astra-kh-full .kh-code,
body.astra-kh-full .kh-code-sm,
body.astra-kh-full .kh-chip,
body.astra-kh-full .kh-badge,
body.astra-kh-full .m-kpi-label,
body.astra-kh-full .m-kpi-value--mono,
body.astra-kh-full .m-data-title,
body.astra-kh-full .m-data-row dt,
body.astra-kh-full .m-index-num,
body.astra-kh-full .m-index-doc-meta,
body.astra-kh-full .m-norma-chip,
body.astra-kh-full .m-code-big,
body.astra-kh-full .m-code-sm,
body.astra-kh-full .m-breadcrumb,
body.astra-kh-full .m-state-badge,
body.astra-kh-full .m-reported-unit,
body.astra-kh-full .m-result-unit,
body.astra-kh-full .kh-control-doc-label,
body.astra-kh-full .kh-ident-label,
body.astra-kh-full .method-card-code,
body.astra-kh-full .method-card-cta,
body.astra-kh-full .kh-filter-nav .kh-count,
body.astra-kh-full .kh-pagination .page-numbers { font-family: var(--f-mono) !important; letter-spacing: .04em; }

body.astra-kh-full .kh-eyebrow,
body.astra-kh-full .kh-chip,
body.astra-kh-full .m-kpi-label,
body.astra-kh-full .m-data-title,
body.astra-kh-full .kh-control-doc-label,
body.astra-kh-full .kh-ident-label,
body.astra-kh-full .method-card-cta { text-transform: uppercase !important; }

/* Títulos — serif display del design system */
body.astra-kh-full h1,
body.astra-kh-full h2,
body.astra-kh-full h3,
body.astra-kh-full h4,
body.astra-kh-full .kh-display,
body.astra-kh-full .page-hero-title,
body.astra-kh-full .m-section-title,
body.astra-kh-full .method-card-title {
  font-family: var(--f-display) !important;
  text-transform: none !important;
  letter-spacing: -.015em;
  line-height: 1.15;
}

/* Colores de titulares */
body.astra-kh-full h1, body.astra-kh-full h2,
body.astra-kh-full h3, body.astra-kh-full h4 { color: var(--ink) !important; }
body.astra-kh-full .kh-hero h1,
body.astra-kh-full .page-hero-title,
body.astra-kh-full .m-hero-title { color: #fff !important; }
body.astra-kh-full .m-section-title { color: var(--brand-900) !important; }

/* Tarjetas y contenedores: texto hereda color del componente, no el global de Astra */
body.astra-kh-full .method-card,
body.astra-kh-full .method-card * { color: inherit; }
body.astra-kh-full .method-card { color: var(--ink); }
body.astra-kh-full .method-card-desc { color: var(--neutral-700) !important; }

/* ============================================================
   FASE 2 — Componentes extraídos de los style="" inline
   ------------------------------------------------------------
   Cada clase replica EXACTAMENTE las declaraciones que estaban
   incrustadas en las plantillas PHP (front-page.php, shortcodes.php,
   archive-metodo.php, single-metodo.php, kh-archive-tax.php).
   Objetivo: una sola fuente de verdad para la presentación.
   Los valores no se cambian: el render debe ser idéntico.
   ============================================================ */

/* ---------- Fondo de sección ---------- */
.kh-sec--paper { background: var(--paper-50); }
.kh-sec--surface { background: var(--surface); }

/* ---------- Encabezado de sección (eyebrow + h2 + lead) ----------
   Antes: 3 atributos style= repetidos 6 veces en front-page.php. */
.kh-sec-head .kh-eyebrow { color: var(--camel-600); margin-bottom: 14px; }
.kh-sec-head h2,
body.astra-kh-full .kh-sec-head h2 {
	font-family: var(--f-display) !important;
	font-size: clamp(27px, 3vw, 38px);
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--ink);
}
.kh-sec-head .kh-lead { max-width: 640px; color: var(--muted); margin-bottom: 38px; }
.kh-sec-head--compact h2,
body.astra-kh-full .kh-sec-head--compact h2 { margin: 0; }

/* ---------- Grilla de dos columnas (institución) ---------- */
.kh-two-col {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
@media (max-width: 920px) {
	.kh-two-col { grid-template-columns: 1fr; }
}

/* ---------- Prosa institucional ---------- */
.kh-inst-body {
	color: var(--neutral-700);
	font-size: 16.5px;
	line-height: 1.65;
	max-width: 60ch;
	margin: 0 0 22px;
}

/* ---------- Lista de verificación ---------- */
.kh-checks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.kh-check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15.5px;
	color: var(--neutral-800);
}
.kh-check-mark {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--brand-100);
	color: var(--brand-800);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	margin-top: 1px;
}

/* ---------- Figura con tarjeta (institución) ---------- */
.kh-figure-card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--paper-200);
	border-top: 5px solid var(--brand-700);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 24px 60px -40px rgba(21, 32, 18, .35);
}
.kh-figure-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.kh-figure-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; }
.kh-credito { font-size: 11px; color: var(--neutral-500); }

/* ---------- Tarjeta de catálogo AACC (sobre .method-card) ---------- */
.method-card--aacc {
	border-top: 4px solid var(--brand-600);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.kh-card-head { display: flex; align-items: center; gap: 14px; }
.kh-card-code {
	flex: none;
	font-family: var(--f-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--brand-700);
	background: var(--brand-100);
	border-radius: 8px;
	padding: 8px 10px;
}
.kh-card-name { min-width: 0; }
.kh-card-title {
	font-family: var(--f-display) !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	color: var(--ink) !important;
}
.kh-card-count { margin: 3px 0 0; color: var(--neutral-600); }
.kh-card-cta {
	margin-top: auto;
	color: var(--brand-strong);
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------- Índice de filas (disciplinas y normas) ---------- */
.kh-index { border-top: 1px solid var(--neutral-200); }
.kh-index-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	border-bottom: 1px solid var(--neutral-200);
	padding: 20px 6px;
	text-decoration: none;
	color: var(--ink);
}
.kh-index-row:hover { background: var(--surface-muted); }
.kh-index-row h3,
body.astra-kh-full .kh-index-row h3 {
	font-family: var(--f-display) !important;
	font-size: clamp(19px, 1.9vw, 23px);
	margin: 0 0 6px;
	color: var(--ink);
}
.kh-index-desc { color: var(--neutral-700); font-size: 14.5px; margin: 0; max-width: 62ch; }
.kh-index-cta {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-strong);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
@media (max-width: 920px) {
	.kh-index-row { grid-template-columns: 1fr; }
	.kh-index-cta { display: none; }
}

/* ---------- Fila de encabezado con enlace a la derecha ---------- */
.kh-head-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 34px;
	flex-wrap: wrap;
}
.kh-link-more {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-strong);
}

/* ---------- Banda de llamado final ---------- */
.kh-cta-band { background: var(--brand-700); color: #fff; }
.kh-cta-band .kh-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
	flex-wrap: wrap;
	padding: clamp(52px, 6vw, 76px) var(--gutter);
}
.kh-cta-band h2,
body.astra-kh-full .kh-cta-band h2 {
	font-family: var(--f-display) !important;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.12;
	margin: 0 0 10px;
	color: #fff !important;
}
.kh-cta-band p {
	color: rgba(255, 255, 255, .85);
	font-family: var(--f-prose);
	font-size: 17px;
	max-width: 56ch;
	margin: 0;
}
.kh-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   FASE 2 (2/5) — Modificadores para inc/shortcodes.php
   Mismos valores que los style="" que reemplazan.
   ============================================================ */

/* Encabezado de sección con separación inferior de 26px (antes inline) */
.kh-sec-head--gap26 h2,
body.astra-kh-full .kh-sec-head--gap26 h2 { margin: 0 0 26px; }

/* Enlace de cola dentro de una fila de índice (sin flex, es texto suelto) */
.kh-cta-text {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-strong);
	white-space: nowrap;
}

/* Enlace centrado al pie de un bloque */
.kh-link-center {
	display: block;
	margin-top: 24px;
	text-align: center;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-strong);
}

/* Nota centrada */
.kh-note-center { margin-top: 24px; text-align: center; }


/* ============================================================
   FASE 2 (3/5) — Componentes para header, archivo y taxonomías
   Mismos valores que los style="" que reemplazan.
   ============================================================ */

/* Marca textual cuando no hay logo cargado */
.kh-brand-fallback { color: #fff; font-size: 22px; }

/* Eyebrow usado como rótulo de filtro (separación menor) */
.kh-eyebrow--sm { color: var(--camel-600); margin-bottom: 10px; }

/* Código en línea dentro de un rótulo de filtro */
.kh-code--brand { font-family: var(--f-mono); font-weight: 700; color: var(--brand-700); }
.kh-code--accent { font-family: var(--f-mono); font-weight: 700; color: var(--accent-600); }

/* Aviso con separación superior */
.kh-note--mt { margin-top: 18px; }

/* Columna flexible dentro de una fila */
.kh-flex-main { flex: 1; min-width: 0; }

/* Estado vacío */
.kh-empty-title { font-size: 22px; margin: 0 0 8px; }
.kh-empty-text { color: var(--muted); margin: 0 0 18px; }

/* Sección con separación superior reducida (archivo de taxonomía) */
.kh-wrap--pt { padding-top: clamp(34px, 4vw, 54px); }

/* Cabecera de una taxonomía con figura (clase de trigo) */
.kh-tax-figure {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 420px) 1fr;
	gap: clamp(20px, 3vw, 38px);
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.kh-tax-figure img { width: 100%; height: 100%; object-fit: cover; }
.kh-tax-figure figcaption { padding: 22px 26px 22px 0; }
.kh-tax-figure h2,
body.astra-kh-full .kh-tax-figure h2 {
	font-family: var(--f-display) !important;
	font-size: clamp(22px, 2.4vw, 30px);
	margin: 8px 0 10px;
	color: var(--ink);
}
.kh-tax-figure p {
	font-family: var(--f-prose);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--neutral-700);
	margin: 0;
}
/* Corrección de responsive: la grilla fija de 420px desbordaba en móvil. */
@media (max-width: 920px) {
	.kh-tax-figure { grid-template-columns: 1fr; }
	.kh-tax-figure figcaption { padding: 0 22px 22px; }
}

/* ============================================================
   FASE 2 (4/5) — Componentes de la ficha de método (single-metodo.php)
   Mismos valores que los style="" que reemplazan.
   ============================================================ */

/* Contenedores de la ficha */
.kh-wrap--pad60 { padding: 60px 0; }
.kh-wrap--pt-sm { padding-top: clamp(26px, 3vw, 38px); }
.kh-sec--paper-flush { background: var(--paper-50); padding-top: 0; }

/* Chips de estado técnico */
.kh-chip--acreditado { background: var(--sky-100); color: var(--sky-600); }
.kh-chip--critico { background: var(--terr-100); color: var(--terr-600); }

/* Eyebrows sobre fondo oscuro y con separación propia */
.kh-eyebrow--accent { color: var(--accent-200); margin-bottom: 10px; }
.kh-eyebrow--camel { color: var(--camel-600); margin-bottom: 14px; }
.kh-eyebrow--camel-mt { color: var(--camel-600); margin: 22px 0 10px; }

/* Titular de sección de la ficha */
.m-section-title--sm { font-size: 22px; margin-bottom: 6px; }

/* Meta con separaciones propias */
.kh-meta--mb { margin: 0 0 18px; }
.kh-meta--flush { margin: 0; }
.kh-meta--tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kh-meta--xs { margin: 4px 0 0; font-size: 11px; }

/* Tarjetas de métodos relacionados */
.kh-rel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kh-rel-desc { margin: 6px 0 0; font-size: 14.5px; color: var(--neutral-700); }
.kh-rel-cta {
	flex: none;
	white-space: nowrap;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-strong);
}

/* Bloque de observaciones al pie de la ficha */
.m-feedback-box {
	border: 1px dashed var(--border-strong);
	border-radius: var(--r-lg);
	padding: 22px 26px;
	background: var(--surface);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.m-feedback-q { font-weight: 600; margin: 0 0 3px; font-size: 15px; }
.m-feedback-btn { font-size: 14.5px; flex: none; }