/* ==========================================================================
   PÁGINA GENÉRICA — page.php (hoy: aviso legal, privacidad, accesibilidad)
   Hero oscuro corto + columna de lectura de 68ch + índice lateral fijo.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pg-hero {
  background: var(--color-black);
  color: var(--color-white);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 3px solid var(--color-primary);
}

.pg-hero__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.pg-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-white);
  margin: 0;
  text-wrap: balance;
}

.pg-hero__fecha {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: #a6a6a6;
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */
.pg-body {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-2xl);
}

.pg-body--indice {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ── Índice ──────────────────────────────────────────────────────────────── */
.pg-toc {
  position: sticky;
  top: calc(68px + var(--space-lg));
}

.admin-bar .pg-toc {
  top: calc(68px + 32px + var(--space-lg));
}

.pg-toc__title {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 var(--space-sm);
}

.pg-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-toc__list a {
  display: block;
  padding: 0.45rem 0 0.45rem 0.9rem;
  border-left: 2px solid var(--color-gray-light);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-gray);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.pg-toc__list a:hover {
  color: var(--color-black);
}

.pg-toc__list a.is-active {
  border-left-color: var(--color-primary);
  color: var(--color-black);
  font-weight: 600;
}

/* ── Contenido ───────────────────────────────────────────────────────────── */
.pg-content {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #222;
}

.pg-content > :first-child {
  margin-top: 0;
}

.pg-content h2 {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  margin: 3rem 0 0.9rem;
  scroll-margin-top: calc(68px + var(--space-md));
}

.pg-content h2:first-child {
  margin-top: 0;
}

.pg-num {
  flex: none;
  font-size: 0.8em;
  font-weight: 800;
  color: #8a6d00; /* amarillo oscurecido: contraste AA sobre crema */
}

.pg-content h3 {
  font-size: var(--text-lg);
  line-height: 1.35;
  margin: 2rem 0 0.6rem;
}

.pg-content p,
.pg-content ul,
.pg-content ol {
  margin: 0 0 1.1rem;
}

.pg-content ul,
.pg-content ol {
  padding-left: 1.25rem;
}

.pg-content li {
  margin-bottom: 0.4rem;
}

.pg-content li::marker {
  color: #8a6d00;
}

.pg-content a {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pg-content a:hover {
  text-decoration-color: var(--color-black);
}

.pg-content strong {
  font-weight: 700;
  color: var(--color-black);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pg-body--indice {
    display: block;
  }

  .pg-toc {
    display: none;
  }
}