/* =====================================================================
   Tipo de pagina "documento"
   =====================================================================
   Para textos largos: tech papers, guias, informes. Dos columnas en
   escritorio (indice fijo + cuerpo) y una sola en pantallas chicas.
   Comparte tokens con la barra, pero los declara aparte para que la
   pagina se sostenga aunque la barra no cargue.
   ===================================================================== */

.doc {
  --doc-crimson: #770f35;
  --doc-profundo: #42061f;
  --doc-rosa: #ffe3e9;
  --doc-suave: #eda5b2;
  --doc-tinta: #1a1013;
  --doc-tenue: rgba(26, 16, 19, .62);
  --doc-linea: rgba(26, 16, 19, .1);
  --doc-papel: #f4f4f2;
  --doc-sans: "Aeonik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --doc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: var(--doc-sans);
  color: var(--doc-tinta);
  background: #fff;
}
.doc *, .doc *::before, .doc *::after { box-sizing: border-box; }

.doc-caja { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* --- portada --- */
.doc-portada {
  background: var(--doc-profundo);
  color: var(--doc-rosa);
  padding: 76px 0 68px;
}
.doc-eyebrow {
  margin: 0 0 18px; font-family: var(--doc-mono);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--doc-suave);
}
.doc-titulo {
  margin: 0 0 20px; font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.05; font-weight: 600; color: #fff; max-width: 20ch;
}
.doc-bajada {
  margin: 0 0 34px; font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55; color: rgba(255, 227, 233, .82); max-width: 62ch;
}
.doc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  font-family: var(--doc-mono); font-size: 12px;
  letter-spacing: .06em; color: rgba(255, 227, 233, .7);
}
.doc-meta i { margin-right: 6px; opacity: .8; }
.doc-descarga {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  background: #fff; color: var(--doc-crimson);
  font-family: var(--doc-sans); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: transform .15s ease, background .15s ease;
}
.doc-descarga:hover { background: var(--doc-rosa); transform: translateY(-1px); }

/* --- cuerpo a dos columnas --- */
.doc-cuerpo { display: grid; gap: 56px; padding-top: 60px; padding-bottom: 92px; }
@media (min-width: 1000px) {
  .doc-cuerpo { grid-template-columns: 268px 1fr; gap: 72px; }
}

/* --- indice --- */
.doc-indice-titulo {
  margin: 0 0 16px; font-family: var(--doc-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--doc-crimson);
}
.doc-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: seccion; }
.doc-indice li { counter-increment: seccion; margin-bottom: 3px; }
.doc-indice a {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px;
  padding: 7px 9px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.4; color: var(--doc-tenue);
  text-decoration: none; transition: background .14s ease, color .14s ease;
}
.doc-indice a::before {
  content: counter(seccion, decimal-leading-zero);
  font-family: var(--doc-mono); font-size: 10.5px; color: var(--doc-suave);
  padding-top: 2px;
}
.doc-indice a:hover { background: var(--doc-rosa); color: var(--doc-tinta); }
.doc-indice a[aria-current="true"] { background: var(--doc-rosa); color: var(--doc-crimson); font-weight: 600; }
@media (min-width: 1000px) {
  .doc-indice { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 140px); overflow-y: auto; }
}
@media (max-width: 999px) {
  .doc-indice {
    border: 1px solid var(--doc-linea); border-radius: 14px;
    padding: 20px 18px; background: var(--doc-papel);
  }
}

/* --- texto --- */
.doc-texto { max-width: 74ch; font-size: 16.5px; line-height: 1.72; }
.doc-texto section { scroll-margin-top: 108px; padding-bottom: 14px; }
.doc-texto section + section { margin-top: 62px; padding-top: 52px; border-top: 1px solid var(--doc-linea); }
.doc-texto h2 {
  margin: 0 0 26px; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2; font-weight: 600; color: var(--doc-crimson);
}
.doc-texto h3 {
  margin: 38px 0 14px; font-size: 18px; line-height: 1.35;
  font-weight: 600; color: var(--doc-tinta);
}
.doc-texto p { margin: 0 0 20px; color: rgba(26, 16, 19, .88); }
.doc-texto strong { font-weight: 600; color: var(--doc-tinta); }

/* Panel: los recuadros del PDF, rehechos como bloque destacado. */
.doc-panel {
  margin: 30px 0; padding: 24px 26px;
  background: var(--doc-papel); border-left: 3px solid var(--doc-crimson);
  border-radius: 0 12px 12px 0;
  font-size: 15.5px; line-height: 1.62; color: rgba(26, 16, 19, .82);
}
.doc-panel :last-child { margin-bottom: 0; }
.doc-panel-titulo {
  display: block; margin-bottom: 8px; font-family: var(--doc-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--doc-crimson);
}

.doc-figura { margin: 34px 0; }
.doc-figura img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--doc-linea); }
.doc-figura figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--doc-tenue);
}

@media (max-width: 999px) {
  .doc-portada { padding: 52px 0 46px; }
  .doc-cuerpo { padding-top: 40px; padding-bottom: 64px; gap: 38px; }
  .doc-texto { font-size: 16px; }
  .doc-texto section + section { margin-top: 46px; padding-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .doc *, .doc *::before, .doc *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   Componentes de contenido
   ---------------------------------------------------------------------
   Los recuadros del PDF rehechos como HTML: pesan menos, se leen en
   cualquier pantalla y se traducen como texto.
   --------------------------------------------------------------------- */

/* Tarjetas */
.doc-tarjetas { display: grid; gap: 14px; margin: 30px 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .doc-tarjetas { grid-template-columns: 1fr 1fr; } }
.doc-tarjetas li {
  padding: 20px 22px; background: var(--doc-papel);
  border: 1px solid var(--doc-linea); border-radius: 12px;
}
.doc-tarjetas h4 {
  margin: 0 0 7px; font-size: 14.5px; font-weight: 600; color: var(--doc-crimson);
}
.doc-tarjetas p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--doc-tenue); }

/* Tabla */
.doc-tabla { margin: 32px 0; overflow-x: auto; }
.doc-tabla figcaption {
  margin-bottom: 12px; font-family: var(--doc-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--doc-crimson);
}
.doc-tabla table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-tabla thead th {
  padding: 10px 14px; text-align: left; font-family: var(--doc-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--doc-tenue); border-bottom: 1px solid var(--doc-linea); font-weight: 500;
}
.doc-tabla thead th:first-child { width: 5.5em; }
.doc-tabla tbody th {
  padding: 12px 14px; text-align: left; font-family: var(--doc-mono);
  font-size: 12px; color: var(--doc-tinta); font-weight: 500;
}
.doc-tabla tbody td { padding: 12px 14px; color: var(--doc-tenue); }
.doc-tabla tbody tr + tr th, .doc-tabla tbody tr + tr td { border-top: 1px solid var(--doc-linea); }
/* La primera columna de datos es la nuestra: se destaca. */
.doc-tabla tbody td:first-of-type {
  color: var(--doc-crimson); font-weight: 600; background: rgba(255, 227, 233, .45);
}

/* Cronologia */
.doc-cronologia { margin: 32px 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--doc-linea); }
.doc-cronologia li { position: relative; padding: 0 0 24px 14px; }
.doc-cronologia li::before {
  content: ""; position: absolute; left: -29px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--doc-crimson); box-shadow: 0 0 0 4px #fff;
}
.doc-momento {
  display: inline-block; margin-bottom: 5px; font-family: var(--doc-mono);
  font-size: 10.5px; letter-spacing: .1em; color: var(--doc-suave);
}
.doc-cronologia h4 { margin: 0 0 5px; font-size: 15.5px; font-weight: 600; color: var(--doc-tinta); }
.doc-cronologia p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--doc-tenue); }

/* Etiquetas */
.doc-etiquetas { margin: 30px 0; }
.doc-etiquetas figcaption {
  margin-bottom: 12px; font-family: var(--doc-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--doc-crimson);
}
.doc-etiquetas ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.doc-etiquetas li {
  padding: 5px 12px; border-radius: 999px; background: var(--doc-papel);
  border: 1px solid var(--doc-linea); font-size: 13px; color: var(--doc-tenue);
}