/* ============================================================
   pages/proyectos.css — Fundación 20 de Enero · Corazón Sabanero
   Estilos exclusivos de la página proyectos.
   Solo aquí van reglas que NO se repiten en ninguna otra página.
   Requiere: tokens.css, components.css
   ============================================================ */

/* Sub-proyectos dentro de cada línea de acción */
.subproyectos {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
  margin-top:            var(--space-5);
}

.subproyectos--single { grid-template-columns: 1fr; }

.subproyecto {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-2);
  background:     var(--c-surface-alt);
  border-radius:  var(--radius);
  padding:        var(--space-5);
}

.subproyecto__tag {
  display:        inline-block;
  background:     var(--c-brand-primary);
  color:          var(--c-text-inverse);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        3px 10px;
  border-radius:  var(--radius-full);
}

.subproyecto h4 {
  font-size:   1rem;
  line-height: 1.3;
  margin:      0;
}

.subproyecto p {
  font-size:  0.88rem;
  color:      var(--c-text-secondary);
  margin:     0;
  flex-grow:  1;
}

@media (max-width: 680px) {
  .subproyectos { grid-template-columns: 1fr; }
}