/* nosotros.css — sección "Los Pilares de Vínculo Urbano" (ronda 9, 17-sep-2026).
   Va aparte de site.css a propósito: site.css lo mantiene el frente de diseño.
   Se enlaza desde la propia vista, justo después del include de partials/head
   (mismo patrón que recuperar.css).
   El dorado vuelve como DETALLE fino sobre navy (números e íconos), que es
   exactamente donde el cliente lo pidió: "le da un buen contraste a los tonos
   azules y blancos". */

/* 17-sep-2026 (barrido de espaciado): el margen propio de 38px se comia el
   margin-bottom de .sec-head y dejaba esta seccion con un hueco distinto al del
   resto del sitio. El aire cabecera -> rejilla lo pone .sec-head con
   --sec-head-gap (34 / 30 / 26). */
.pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.pilar { display: flex; flex-direction: column; gap: 12px; }
/* 19-sep-2026: el numeral, el aro y el parrafo salen del CONTEXTO de la seccion
   (--sec-* en site.css), no del navy en duro: el panel puede pasar Pilares a
   light/alt y antes el texto se volvia invisible. El fallback de cada uno es el
   valor navy de antes, asi que el render de hoy no cambia. */
.pilar .pi-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--sec-detail, var(--yellow));
}
.pilar .pi-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--sec-detail-line, rgba(255, 210, 63, .45));
  display: grid;
  place-items: center;
}
.pilar .pi-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--sec-detail, var(--yellow));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pilar h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 2px 0 0;
}
.pilar p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sec-ink-2, rgba(255, 255, 255, .78));
  margin: 0;
}

@media (max-width: 900px) {
  .pilares { grid-template-columns: repeat(2, 1fr); gap: 24px 22px; }
}
@media (max-width: 520px) {
  .pilares { grid-template-columns: 1fr; gap: 22px; }
}