/* =========================================================
   KNOWLEDGE BASE — FAQ answers, articles and topic hubs
   (preguntas-frecuentes, noticias-ciencia-longevidad, /<tema>/)
   Loaded after styles.css via pageCSS. Editorial layout:
   readable 18px prose, cream page, cobalt accents.
   ========================================================= */
.kb {
  background: var(--color-black);
  color: var(--color-white);
  padding-top: 88px;                 /* clears the fixed header */
  min-height: 70vh;
}
.kb-cover { max-width: 900px; margin: 0 auto var(--space-8); }
.kb-cover picture, .kb-cover img { display: block; width: 100%; }
.kb-cover img { height: auto; border-radius: var(--radius-md); object-fit: cover; }
.kb-cover figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--color-gray-muted); }

/* ---------- Breadcrumb ---------- */
.kb-crumbs { padding: var(--space-6) 0 0; }
.kb-crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-body); font-size: 0.85rem; color: var(--color-gray-muted);
}
.kb-crumbs__list a { color: var(--color-gray-muted); text-decoration: none; }
.kb-crumbs__list a:hover { color: var(--color-gold); }

/* ---------- Shared bits ---------- */
.kb-tag, .kb-card__eyebrow, .kb-tile__kind, .kb-links__kind {
  display: inline-block;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
}
.kb-tag {
  padding: 6px 14px; border-radius: 999px;
  background: var(--color-gold-muted); border: var(--border-thin);
}
.kb-tag:hover { background: rgba(30,79,191,0.16); }

/* ---------- Article header ---------- */
.kb-article__header { padding: var(--space-8) 0 var(--space-8); }
.kb-article__header-inner > * { max-width: 860px; }
.kb-article__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.12;
  color: var(--color-white); margin: var(--space-5) 0 var(--space-4);
  letter-spacing: -0.01em; text-wrap: balance;
}
.kb-article__lede {
  font-family: var(--font-body); font-size: 1.2rem; line-height: 1.6;
  color: var(--color-white-soft); margin: 0 0 var(--space-5); max-width: 720px;
}
.kb-article__meta, .kb-article__review {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gray-muted); margin: 0;
}
.kb-article__review { margin-top: var(--space-2); }

/* ---------- Article layout: body + sidebar ---------- */
.kb-article__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-12); align-items: start; padding-bottom: var(--space-16);
}
.kb-article__body { max-width: 740px; min-width: 0; }

/* Direct answer box */
.kb-answer {
  background: #FFFFFF; border: var(--border-thin); border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8); box-shadow: 0 2px 12px rgba(30,79,191,0.06);
}
.kb-answer__label {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 var(--space-2);
}
.kb-answer__text { font-family: var(--font-body); font-size: 1.075rem; line-height: 1.7; color: var(--color-white); margin: 0; }

/* Video summary (front matter `video`; player: home-video-player.njk + js/video-player.js) */
.kb-video {
  --ink: #18312e; --muted: #5f706b; --blue: #2451c4; --line: #dce5df;
  margin-bottom: var(--space-8);
}
.kb-video .vplayer--solo { display: block; }
.kb-video .vplayer--solo .vlist { display: none; }
/* Cinema mode must sit above the site nav and the floating buttons. */
body .vcine { z-index: 100000; }
.kb-video .vstage-title { font-family: var(--font-body); color: var(--color-white); }

/* Prose */
.kb-prose { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.8; color: var(--color-white-soft); }
.kb-prose > * + * { margin-top: 1.1em; }
.kb-prose h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.2; color: var(--color-white); margin-top: 1.9em; scroll-margin-top: 110px;
}
.kb-prose h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 1.2rem;
  line-height: 1.4; color: var(--color-white); margin-top: 1.6em;
}
.kb-prose p, .kb-prose li { overflow-wrap: break-word; }
.kb-prose strong { color: var(--color-white); font-weight: 600; }
.kb-prose a { color: var(--color-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kb-prose a:hover { color: var(--color-gold-dark); }
.kb-prose ul, .kb-prose ol { padding-left: 1.3em; }
.kb-prose ul { list-style: disc; }
.kb-prose ol { list-style: decimal; }
.kb-prose li + li { margin-top: 0.45em; }
.kb-prose li::marker { color: var(--color-gold); }
.kb-prose blockquote {
  border-left: 3px solid var(--color-gold); padding: 0.2em 0 0.2em 1.1em;
  font-family: var(--font-display); font-style: normal; font-size: 1.35rem; color: var(--color-white);
}
.kb-prose table { width: 100%; border-collapse: collapse; font-size: 0.98rem; display: block; overflow-x: auto; }
.kb-prose th, .kb-prose td { border-bottom: var(--border-thin); padding: 10px 12px; text-align: left; vertical-align: top; }
.kb-prose th { color: var(--color-white); font-weight: 600; background: rgba(30,79,191,0.05); }

/* FAQ accordion (article "Preguntas relacionadas" + hubs) */
.kb-faq { margin-top: var(--space-12); }
.kb-faq h2, .kb-refs h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.75rem;
  color: var(--color-white); margin: 0 0 var(--space-4);
}
.kb-faq__item {
  background: #FFFFFF; border: var(--border-thin); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); box-shadow: 0 2px 8px rgba(30,79,191,0.05);
}
.kb-faq__item[open] { border-color: rgba(30,79,191,0.25); }
.kb-faq__q {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--space-4) 3.25rem var(--space-4) var(--space-5);
  font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; line-height: 1.45; color: var(--color-white);
}
.kb-faq__q::-webkit-details-marker { display: none; }
.kb-faq__q::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--color-gold); border-bottom: 2px solid var(--color-gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.kb-faq__item[open] .kb-faq__q::after { transform: translateY(-30%) rotate(225deg); }
.kb-faq__q:hover, .kb-faq__item[open] .kb-faq__q { color: var(--color-gold); }
.kb-faq__a { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid rgba(30,79,191,0.08); }
.kb-faq__a p { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--color-white-soft); margin: var(--space-4) 0 0; }
.kb-faq__more { display: inline-block; margin-top: var(--space-3); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--color-gold); text-decoration: none; }
.kb-faq__more:hover { text-decoration: underline; }

/* References */
.kb-refs { margin-top: var(--space-12); }
.kb-refs h2 { font-size: 1.4rem; }
.kb-refs__list { padding-left: 1.3em; list-style: decimal; font-family: var(--font-body); font-size: 0.92rem; line-height: 1.6; color: var(--color-gray-muted); }
.kb-refs__list li + li { margin-top: 0.4em; }
.kb-refs__list a { color: var(--color-gray-muted); text-decoration: underline; text-underline-offset: 2px; }
.kb-refs__list a:hover { color: var(--color-gold); }

/* Disclaimer */
.kb-disclaimer {
  margin-top: var(--space-10); padding: var(--space-4) var(--space-5);
  border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-black-mid);
}
.kb-disclaimer p { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: var(--color-gray-muted); margin: 0; }
.kb-disclaimer strong { color: var(--color-white-soft); }

/* ---------- Sidebar cards ---------- */
.kb-side { position: sticky; top: 104px; display: grid; gap: var(--space-5); }
.kb-card {
  background: #FFFFFF; border: var(--border-thin); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: 0 4px 20px rgba(30,79,191,0.07);
}
.kb-card--cta { background: linear-gradient(160deg, #FFFFFF 0%, #EEF2FC 100%); }
.kb-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--color-white); margin: var(--space-2) 0 var(--space-3); }
.kb-card__text { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: var(--color-white-soft); margin: 0 0 var(--space-5); }
.kb-card__btn { width: 100%; justify-content: center; text-align: center; }
.kb-card__link { display: block; margin-top: var(--space-4); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--color-gold); text-decoration: none; text-align: center; }
.kb-card__link:hover { text-decoration: underline; }
.kb-card__list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.kb-card__list li + li { border-top: var(--border-thin); }
.kb-card__list a { display: block; padding: 10px 0; font-family: var(--font-body); font-size: 0.98rem; font-weight: 500; color: var(--color-white); text-decoration: none; }
.kb-card__list a::after { content: " →"; color: var(--color-gold); }
.kb-card__list a:hover { color: var(--color-gold); }
.kb-card--wide { max-width: 720px; margin: 0 auto; text-align: center; padding: var(--space-10) var(--space-8); }
.kb-card--wide .kb-card__btn { width: auto; min-width: 260px; }

/* ---------- "Más sobre…" ---------- */
.kb-more { background: var(--color-black-mid); padding: var(--space-16) 0; border-top: var(--border-thin); }
.kb-more__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--color-white); margin: 0 0 var(--space-6); }
.kb-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kb-links a {
  display: block; height: 100%; padding: var(--space-4) var(--space-5);
  background: #FFFFFF; border: var(--border-thin); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--color-white); text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.kb-links a:hover { border-color: rgba(30,79,191,0.35); box-shadow: 0 6px 18px rgba(30,79,191,0.10); color: var(--color-gold); }
.kb-links__kind { display: block; margin-bottom: 4px; font-size: 0.68rem; }
.kb-more__all { display: inline-block; margin-top: var(--space-6); font-family: var(--font-body); font-weight: 600; color: var(--color-gold); text-decoration: none; }
.kb-more__all:hover { text-decoration: underline; }

/* ---------- Hubs ---------- */
.kb-hub__header { padding: var(--space-8) 0 var(--space-10); }
.kb-hub__header--main { padding-top: var(--space-12); }
.kb-hub__header-inner > * { max-width: 900px; }
.kb-hub__title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.1; color: var(--color-white); margin: var(--space-3) 0 var(--space-5); text-wrap: balance;
}
.kb-hub__title em { color: var(--color-gold); font-style: normal; }
.kb-hub__intro { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.75; color: var(--color-white-soft); margin: 0; max-width: 760px; }
.kb-hub__treat { margin: var(--space-5) 0 0; font-family: var(--font-body); font-size: 1rem; color: var(--color-gray-muted); }
.kb-hub__treat a { color: var(--color-gold); font-weight: 600; text-decoration: none; }
.kb-hub__treat a:hover { text-decoration: underline; }
.kb-hub__body { padding-bottom: var(--space-20); }
.kb-hub__section { margin-top: var(--space-12); }
.kb-hub__section:first-child { margin-top: 0; }
.kb-hub__section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--space-5); border-bottom: var(--border-thin); padding-bottom: var(--space-3); }
.kb-hub__section-head .kb-hub__h2 { margin: 0; }
.kb-hub__h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--color-white); margin: 0 0 var(--space-5); }
.kb-hub__see { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--color-gold); text-decoration: none; }
.kb-hub__see:hover { text-decoration: underline; }
.kb-qlist { max-width: 900px; }

/* Topic chips */
.kb-toc { margin-top: var(--space-8); }
.kb-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kb-chips a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: #FFFFFF; border: var(--border-thin);
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: var(--color-white); text-decoration: none;
}
.kb-chips a:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* Article tiles */
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.kb-tile {
  display: flex; flex-direction: column; gap: 10px; padding: var(--space-6);
  background: #FFFFFF; border: var(--border-thin); border-radius: var(--radius-lg);
  text-decoration: none; box-shadow: 0 2px 12px rgba(30,79,191,0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kb-tile:hover { transform: translateY(-3px); border-color: rgba(30,79,191,0.3); box-shadow: 0 12px 28px rgba(30,79,191,0.12); }
.kb-tile__title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.22; color: var(--color-white); }
.kb-tile__text { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: var(--color-white-soft); }
.kb-tile__kind time { color: inherit; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .kb-article__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .kb-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .kb-article__body { max-width: none; }
}
@media (max-width: 767px) {
  .kb { padding-top: 72px; }
  .kb-crumbs { padding-top: var(--space-4); }
  .kb-crumbs__list { font-size: 0.85rem; }
  .kb-article__header { padding: var(--space-6) 0; }
  .kb-article__title { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
  .kb-article__meta { flex-direction: column; gap: 2px; }
  .kb-article__meta [aria-hidden] { display: none; }
  .kb-article__lede { font-size: 1.1rem; }
  .kb-answer { padding: var(--space-4) var(--space-5); }
  .kb-prose { font-size: 1.0625rem; line-height: 1.75; }
  .kb-prose h2 { font-size: 1.6rem; }
  .kb-faq__q { font-size: 1.02rem; }
  .kb-prose table { font-size: 0.86rem; line-height: 1.45; }
  .kb-prose th, .kb-prose td { padding: 8px 6px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .kb-links { grid-template-columns: minmax(0, 1fr); }
  .kb-more { padding: var(--space-12) 0; }
  .kb-hub__header { padding: var(--space-6) 0 var(--space-8); }
  .kb-hub__header--main { padding-top: var(--space-8); }
  .kb-hub__title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .kb-hub__intro { font-size: 1.0625rem; }
  .kb-grid { grid-template-columns: minmax(0, 1fr); }
  .kb-card--wide { padding: var(--space-8) var(--space-5); }
  .kb-card--wide .kb-card__btn { width: 100%; min-width: 0; }
}

/* Article tiles rendered as <article> (news hub): whole card clickable via the title link */
article.kb-tile { position: relative; }
article.kb-tile .kb-tile__title { margin: 0; }
article.kb-tile .kb-tile__title a { color: inherit; text-decoration: none; }
article.kb-tile .kb-tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
article.kb-tile .kb-tile__kind a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
article.kb-tile .kb-tile__kind a:hover { text-decoration: underline; }
article.kb-tile .kb-tile__text { margin: 0; }

/* "Lee el análisis completo" / "Respuesta breve" — enlace entre la FAQ y su artículo (front matter `relacionados`) */
.kb-related { margin-top: 2rem; }
.kb-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.kb-related__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-gold); font-weight: 600; text-decoration: none; }
.kb-related__list a:hover { text-decoration: underline; }

/* Evidencia científica — fichas de estudios y "Cómo leer estos resultados" */
.kb-studies { margin-top: 2.5rem; display: grid; gap: 1rem; }
.kb-studies > h2 { margin: 0 0 0.25rem; }
.kb-study { padding: 1.25rem 1.4rem; border: var(--border-thin); border-radius: var(--radius-lg); background: var(--color-dark); }
.kb-study__meta { margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold); }
.kb-study__title { margin: 0 0 0.35rem; font-size: 1.05rem; line-height: 1.4; }
.kb-study__original { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--color-gray-muted); line-height: 1.5; }
.kb-study__result { margin: 0 0 0.75rem; line-height: 1.6; }
.kb-study__links { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.kb-study__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-gold); font-weight: 600; text-decoration: none; }
.kb-study__links a:hover { text-decoration: underline; }
.kb-limits { margin-top: 1.5rem; }
.kb-limits ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; line-height: 1.6; }

/* Franja "¿Qué buscas?" — Preguntas · Guías · Estudios clínicos (src/_includes/ciencia-switch.njk) */
.sci-switch { padding: 18px 0 0; background: var(--color-black); }
.sci-switch__label { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-muted); }
.sci-switch__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sci-switch__item { display: grid; gap: 2px; height: 100%; padding: 12px 16px; border: var(--border-thin); border-radius: var(--radius-lg); background: var(--color-dark); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.sci-switch__item:hover, .sci-switch__item:focus-visible { border-color: var(--color-gold); box-shadow: var(--shadow-sm); }
.sci-switch__item.is-current { border-color: var(--color-gold); box-shadow: inset 0 0 0 1px var(--color-gold); }
.sci-switch__kind { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gold); }
.sci-switch__name { font-size: 1.05rem; font-weight: 700; color: var(--color-white); }
.sci-switch__hint { font-size: 0.8125rem; color: var(--color-gray-muted); }
@media (max-width: 640px) {
  .sci-switch__list { grid-template-columns: 1fr; gap: 6px; }
  .sci-switch__item { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 10px 14px; }
  .sci-switch__kind { grid-column: 1 / -1; }
}