/* Project fact sheet: a <dl> of Technology / Category / Status next to a numbered list of key functions.
   Static on purpose: no transforms or animations here, so it never fights a parent that has them
   (on the home the only motion is the data-reveal entrance that site code puts on the whole block). */

.facts {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.facts-title {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.facts-list {
  margin: 0;
  padding: 8px 32px;
}

.facts-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
}

.facts-row + .facts-row {
  border-top: 1px solid var(--line-soft);
}

.facts-row dt {
  padding-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.facts-row dd {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.facts-more {
  padding: 24px 32px 12px;
  border-left: 1px solid var(--line);
}

.facts-label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.facts-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fact;
}

.facts-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.5;
  counter-increment: fact;
}

.facts-steps li + li {
  border-top: 1px solid var(--line-soft);
}

.facts-steps li::before {
  content: counter(fact, decimal-leading-zero);
  color: var(--accent-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Narrow screens and small slots (the Neutralpha row on the home): one column, the list under the rows. */
@media (max-width: 760px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts-title {
    padding: 16px 20px;
  }

  .facts-list {
    padding: 4px 20px;
  }

  .facts-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 16px 0;
  }

  .facts-row dt {
    padding-top: 0;
  }

  .facts-more {
    padding: 20px 20px 8px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

.facts--compact {
  grid-template-columns: minmax(0, 1fr);
  align-self: stretch;
  width: 100%;
  margin-top: 20px;
}

.facts--compact .facts-title {
  padding: 14px 24px;
}

.facts--compact .facts-list {
  padding: 4px 24px;
}

.facts--compact .facts-row {
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 14px 0;
}

.facts--compact .facts-more {
  padding: 20px 24px 8px;
  border-top: 1px solid var(--line);
  border-left: 0;
}

@media (max-width: 480px) {
  .facts--compact .facts-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* Standalone block under other content on the home (same top gap as .logros). */
.facts--block {
  margin-top: 72px;
}