/* ==========================================================================
   Página de contenido — se dibuja con js/content-page.js
   Documento (índice + apartados) o preguntas frecuentes (desplegables).
   ========================================================================== */

body { background: #fff; }

.page {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.page:focus { outline: none; }
.page__noscript { padding: 80px 0; text-align: center; }

.page__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  color: #525252;
}
.page__breadcrumb li + li::before { content: "/"; margin-right: 4px; color: #949494; }
.page__breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }
.page__breadcrumb a:hover { color: #751fff; }
.page__breadcrumb [aria-current] { color: #000; }

.page__title {
  margin: 0 0 20px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

/* Texto enriquecido del dashboard */
.page__rich {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
}
.page__rich > :first-child { margin-top: 0; }
.page__rich > :last-child { margin-bottom: 0; }
.page__rich p { margin: 0 0 1em; }
.page__rich ul { list-style: disc; margin: 0 0 1em; padding-left: 1.3em; }
.page__rich ol { list-style: decimal; margin: 0 0 1em; padding-left: 1.3em; }
.page__rich li { margin-bottom: .35em; }
.page__rich strong, .page__rich b { font-weight: 700; }
.page__rich h3, .page__rich h4 { margin: 1.4em 0 .5em; font-weight: 700; }
.page__rich a { color: #751fff; text-decoration: underline; text-underline-offset: 2px; }
.page__rich a:hover { color: #000; }

.page__intro { margin-bottom: 32px; color: #333; }

/* Índice de apartados */
.page__toc {
  margin: 0 0 40px;
  padding: 20px 24px;
  border-left: 3px solid #bc9b5d;
  background: #faf8f3;
}
.page__toc-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #525252;
}
.page__toc ol { margin: 0; padding-left: 1.2em; list-style: decimal; }
.page__toc li { margin: 4px 0; font-size: 16px; }
.page__toc a { text-decoration: underline; text-underline-offset: 2px; }
.page__toc a:hover { color: #751fff; }

/* Apartados del documento */
.page__block {
  padding-top: 8px;
  margin-bottom: 36px;
  scroll-margin-top: 24px;
}
.page__block:focus { outline: none; }
.page__block .page__block-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edecec;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

/* Preguntas frecuentes */
.page__faq {
  border-bottom: 1px solid #e0e0e0;
  scroll-margin-top: 24px;
}
.page__article--faq .page__blocks { border-top: 1px solid #e0e0e0; }
.page__faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.page__faq summary::-webkit-details-marker { display: none; }
.page__faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s ease;
}
.page__faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.page__faq summary:hover { color: #751fff; }
.page__faq .page__block-body { padding: 0 4px 22px; }
.page__faq:focus { outline: none; }

.page a:focus-visible,
.page summary:focus-visible { outline: 2px solid #751fff; outline-offset: 2px; }

.page__notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 0;
  text-align: center;
}

@media (max-width: 700px) {
  .page { padding: 24px 16px 56px; }
  .page__breadcrumb ol { margin-bottom: 20px; }
  .page__title { font-size: 28px; }
  .page__rich { font-size: 16px; }
  .page__block .page__block-title { font-size: 21px; }
  .page__faq summary { font-size: 16px; padding: 16px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .page__faq summary::after { transition: none; }
}