/* ==========================================================================
   Requisitos — tres condiciones simultáneas, no una secuencia.
   Por eso van con tilde de verificación y no numeradas.
   ========================================================================== */

.req-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.req {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.75rem;
  background-color: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    translate 0.2s var(--ease);
}

.req:hover {
  border-color: rgba(0, 187, 239, 0.5);
  box-shadow: var(--shadow-md);
  translate: 0 -3px;
}

.req-check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background-color: rgba(0, 187, 239, 0.12);
  color: var(--cyan-ink);
  font-size: 1.25rem;
}

.req-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.req h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.req p {
  font-size: var(--t-small);
  color: var(--on-light-muted);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .req-list {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.25rem;
  }

  .req {
    flex-direction: row;
    align-items: flex-start;
    padding: 1.35rem;
  }
}